/* ==========================================================================
   Wikpis Starter Theme - Basic: Minimal CSS
   - Uses CSS variables for quick theming
   - Includes tiny reset + basic layout helpers
   ========================================================================== */

/* Color & type variables (defaults adapted for Masygraf, change as needed) */
:root {
  --color-primary: #9C1A95;
  --color-secondary: #1C155C;
  --color-bg: #FFFFFF;
  --color-text: #1A1A1A;
  --color-accent-light: #D57BF5;
  --container: 1200px;
  --radius: 14px;
  --font-base: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --fs-300: clamp(0.9rem, 0.35vw + 0.85rem, 1rem);
  --fs-400: clamp(1rem, 0.4vw + 0.9rem, 1.125rem);
  --fs-500: clamp(1.125rem, 0.6vw + 1rem, 1.25rem);
  --fs-600: clamp(1.25rem, 0.8vw + 1.1rem, 1.5rem);
  --fs-700: clamp(1.5rem, 1.2vw + 1.2rem, 2rem);
}

/* Reset / Base */
*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-base); color: var(--color-text); background: var(--color-bg); font-size: var(--fs-400); line-height: 1.55; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, textarea, select { font: inherit; }

/* Layout helpers */
.container { width: min(100% - 2rem, var(--container)); margin-inline: auto; }
.stack > * + * { margin-top: var(--stack-gap, 1rem); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--cluster-gap, 1rem); align-items: center; }
.center { display: grid; place-items: center; }


/* ====== Header Masygraf ====== */
.header--masygraf {
  background: #fff;
  color: var(--color-secondary);
  padding: 0.9rem 0;
  border-bottom-right-radius: 28px;      /* borde inferior derecho redondeado */
  box-shadow: 0 8px 18px rgba(0,0,0,.08); /* sombra suave inferior */
  position: relative;
  z-index: 20;
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 1rem;
}

.branding .brand-link { display: inline-flex; align-items: center; gap: .5rem; }
.branding .brand-logo { height: 34px; width: auto; display: block; }
.branding .site-title { font-weight: 700; color: var(--color-secondary); }

/* Menú desktop */
.primary-nav .menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; }
.primary-nav .menu > li > a {
  color: var(--color-secondary);             /* morado oscuro */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: .5rem 0;
  display: inline-block;
  font-size: 14px;
}
.primary-nav .menu > li > a:hover,
.primary-nav .menu > li.current-menu-item > a,
.primary-nav .menu > li.current_page_item > a {
  color: var(--color-primary);               /* rosado */
  text-decoration: none;
}

/* CTA */
.header-cta-wrap { margin-left: .25rem; }
.header-cta {
  display: inline-flex; align-items:center; gap:.5rem;
  font-size: 14px;
  padding: .66rem 1rem;
  border-radius: 999px;
  border: 2px solid var(--color-secondary);
  color: var(--color-secondary);
  background: transparent;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  transition: background .18s ease, color .18s ease, filter .18s ease;
}
.header-cta:hover {
  background: var(--color-secondary);  /* se llena de morado */
  color: var(--color-primary);         /* texto cambia a rosado */
  text-decoration: none;
}
.header-cta .wa-icon { width: 1.05em; height: 1.05em; }

/* Hamburguesa / responsive */
.nav-toggle {
  display: none;
  border: 0;
  background: transparent;
  width: 44px; height: 44px;
  border-radius: 999px;
  justify-self: end;
}
.nav-toggle .hamburger,
.nav-toggle .hamburger::before,
.nav-toggle .hamburger::after {
  content: "";
  display: block;
  width: 24px; height: 2px;
  background: var(--color-secondary);
  margin: 6px auto;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}

/* Mobile nav (panel simple) */
@media (max-width: 980px) {
    .header-cta{
        display: none !important;
    }
  .header-inner {
    grid-template-columns: 1fr auto auto; /* logo, cta, hamburguesa */
  }
  .primary-nav {
    position: absolute;
    top: 100%; right: 1rem; left: 1rem;
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 14px;
    box-shadow: 0 12px 24px rgba(0,0,0,.12);
    display: none;
    padding: .5rem;
  }
  .primary-nav[aria-expanded="true"] { display: block; }
  .primary-nav .menu {
    flex-direction: column;
    gap: 0;
  }
  .primary-nav .menu > li > a { padding: .75rem 1rem; display:block; border-radius: 10px; }
  .primary-nav .menu > li > a:hover { background: rgba(28,21,92,0.06); }

  .nav-toggle { display: inline-flex; align-items:center; justify-content:center; }
}

/* Ajustes utilitarios */
@media (min-width: 981px){
  .primary-nav { margin-left: auto; }
}


/* ===========================
   Footer Masygraf
   =========================== */


/* 2. Modificamos levemente el CSS de tu footer existente */
.wikpis-footer {
  background: #fff;
  color: #1C155C;
  padding: 60px 0 60px;
  border-top-left-radius: 28px;       /* Esta curva ahora será visible */
  box-shadow: 0 -6px 18px rgba(0,0,0,.04);

  /* Añadimos estas dos propiedades para asegurar que el footer se ponga por ENCIMA de la sección anterior */
  position: relative;
  z-index: 10;
}

.wikpis-footer__nav{ display:flex; justify-content:center; }
.wikpis-footer__menu{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:0;
}

/* Links del menú (mismo estilo que header, + separadores) */
.wikpis-footer__menu > li{
  display:inline-block;
}
.wikpis-footer__menu > li + li{
  position:relative; padding-left:20px; margin-left:20px;
}
.wikpis-footer__menu > li + li::before{
  content:""; position:absolute; left:0; top:50%;
  width:1px; height:12px;
  background:#1C155C; opacity:.4; transform:translateY(-50%);
}
.wikpis-footer__menu > li > a{
  font-size:14px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:#1C155C;
}
.wikpis-footer__menu > li > a:hover{ color:#9C1A95; }

/* Logo centrado */
.wikpis-footer__brand{
  display:grid; place-items:center;
   margin-top:50px;
  margin-bottom:50px;
}
.wikpis-footer__brand img{
  height:64px; width:auto; display:block;
}
.wikpis-footer__title{
  font-weight:700; font-size:20px; color:#1C155C;
}

/* Línea divisoria fina (centrada) */
.wikpis-footer__divider{
  width: 320px;
  max-width: 60%;
  height: 1px;
  background:#1C155C; opacity:.35;
  margin: 16px auto 10px auto;
}

/* Redes sociales */
.wikpis-footer__socials{
  list-style:none; margin: 10px 0 0; padding:0;
  display:flex; justify-content:center; gap:18px;
  margin-top:30px;
}
.wikpis-footer__socials img{
  display:block; width:22px; height:auto; filter:none;
  transition: transform .15s ease, opacity .15s ease;
}
.wikpis-footer__socials a:hover img{
  transform: translateY(-1px);
  opacity: .85;
}

/* Responsive */
@media (max-width:680px){
  .wikpis-footer{ padding:28px 0; }
      .wikpis-footer__menu {
        display: flex;
        flex-wrap: wrap;
        row-gap: 8px;
        justify-content: space-evenly;
    }
}
  .wikpis-footer__menu > li + li{ padding-left:14px; margin-left:14px; }
  .wikpis-footer__divider{ width: 220px; }
}


/* Buttons */
.button, .wp-block-button__link { display:inline-block; background: var(--color-primary); color:#fff; padding:.75rem 1rem; border-radius: var(--radius); font-weight:600; }
.button:hover, .wp-block-button__link:hover { filter: brightness(1.1); text-decoration:none; }

/* Content */
main .post-card { border: 1px solid #e5e7eb; border-radius: var(--radius); padding: 1rem; }
.post-meta { color:#6b7280; font-size:.95rem; }

/* Utilities */
.bg-primary { background: var(--color-primary); color:#fff; }
.bg-secondary { background: var(--color-secondary); color:#fff; }
.text-center { text-align:center; }
.mt-2 { margin-top: .5rem; } .mt-4 { margin-top: 1rem; } .mt-8 { margin-top: 2rem; }
.mb-2 { margin-bottom: .5rem; } .mb-4 { margin-bottom: 1rem; } .mb-8 { margin-bottom: 2rem; }

/* Skip link */
.skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { position: static; width: auto; height: auto; padding:.5rem 1rem; background:#000; color:#fff; }

/* ===========================
   Home – Hero Banner (full-bleed exacto)
   =========================== */
.hero-banner{
  /* overlap para meterse debajo de la curva del header */
  margin-top: var(--hero-overlap, -28px);

  /* full-width real */
  width: 100%;
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;

  /* paddings más generosos */
  padding-top: 84px;
  padding-bottom: 84px;
}

/* overlay/tinte como la referencia */
.hero-banner::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
}

.hero-banner__inner{ position: relative; z-index: 1; }

/* margen lateral extra a la izquierda como en tu layout */
@media (min-width: 1024px){
  .hero-banner__inner{ padding-left: 76px; padding-right: 24px; }
}

/* Contenido */
.hero-banner__content{ max-width: 780px; color:#fff; }

/* Título (más fino visualmente) */
.hero-banner__title{
  margin:0 0 .5rem 0;
  line-height:1.12;
  font-weight:700;
  font-size: clamp(28px, 2.2vw + 18px, 48px);
  letter-spacing:.2px;
}
.hero-banner__title .line{ display:block; }
.hero-banner__title .line--white{ color:#FFF; }
.hero-banner__title .line--pink{ color: var(--color-accent-light); } /* #D57BF5 */

/* Descripción en párrafos, ancho legible */
.hero-banner__desc p{
  margin:0 0 .9rem 0;
  color: rgba(255,255,255,.95);
  font-size: clamp(15px, .35vw + 13px, 18px);
  font-weight: 400;
  max-width: 62ch;         /* fuerza salto de línea natural */
}

/* Botones como en la imagen */
.btn{
  display:inline-block;
  padding: .80rem 1.25rem;
  border-radius: 16px !important;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 700;
  font-size: 14px;
  transition: filter .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}

/* 1) Primario: lleno en #9C1A95 con texto blanco */
.btn--primary{
  background: #D57BF5;   /* #9C1A95 */
  color:#1C155C;
  border: 2px solid #D57BF5;
}
.btn--primary:hover{ filter: brightness(1.08); }

/* 2) Secundario: SOLO borde y texto #D57BF5, sin relleno */
.btn--outline-light{
  background: transparent;
  color: var(--color-accent-light);           /* #D57BF5 */
  border: 2px solid var(--color-accent-light);
}
.btn--outline-light:hover{
  background: rgba(213,123,245,.10);
  color: var(--color-accent-light);
}

/* Responsive paddings */
@media (max-width: 1024px){
  .hero-banner{ padding-top: 72px; padding-bottom: 68px; }
  .hero-banner__inner{ padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 640px){
  .hero-banner{ padding-top: 56px; padding-bottom: 52px; }
  .hero-banner__content{ max-width: 95%; }
}

/* ===========================
   Home – Servicios (acordeón horizontal en 1 caja)
   =========================== */
:root{ --color-accent-light:#D57BF5; --srvx-tab-w:86px; }

.srvx{ padding:48px 0;}
.srvx__head{ text-align:center; margin-bottom:18px; }
.srvx__title{ margin:0; line-height:1.2; font-weight:700; font-size: clamp(22px,1.5vw + 16px,32px); }
.srvx__title .line{ display:block; }
.srvx__title .line--accent{ color:var(--color-accent-light); }
.srvx__title .line--secondary{ color:var(--color-secondary); }

.srvx__box{
  background:#ffffff;
  overflow:hidden;
}

/* riel con tarjetas horizontales */
.srvx__rail{ display:flex; align-items:stretch; }

/* Tarjeta: colapsada = solo pestaña vertical; activa = panel expandido */
.srvx-card{
  position:relative;
  display:flex; align-items:stretch;
  flex:0 0 var(--srvx-tab-w);
  transition:flex-basis .32s ease, flex-grow .32s ease;
  border-left:1px solid rgba(28,21,92,.15);     /* separadores verticales */
}
.srvx-card:first-child{ border-left:0; }
.srvx-card.is-active{ flex:1 1 auto; }

/* pestaña vertical (siempre visible) */
.srvx-tab{
  width:var(--srvx-tab-w); min-width:var(--srvx-tab-w);
  background:#fff; border:0; padding:12px 0;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; position:relative;
}
.srvx-tab__title{
  /* título vertical real, legible */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align:center;
  font-size:24px; line-height:1.05;
  font-weight:700;
  color:var(--color-secondary);
  letter-spacing:.02em;
}

/* Estilo del título cuando la tarjeta (padre) está activa */
.srvx-card.is-active .srvx-tab__title {
  font-weight: 400; /* Peso de la fuente para el estado activo */
}

.srvx-tab__icon{
  position:absolute; top:18px; left:50%;
  transform:translateX(-50%);
  width:22px; height:22px; color:var(--color-secondary);
}
.srvx-card.is-active .srvx-tab__icon{ color:var(--color-accent-light); }

/* iconos imagen (de ACF) */
.srvx-tab__icon img{ display:none; width:100%; height:100%; }
.srvx-card.is-active .icon-minus{ display:block; }
.srvx-card:not(.is-active) .icon-plus{ display:block; }

/* fallback: + y – dibujados por CSS */
.icon-css{ position:absolute; inset:0; display:none; }
.icon-css::before,.icon-css::after{ content:""; position:absolute; background:currentColor; left:50%; top:50%; transform:translate(-50%,-50%); }
.icon-css.plus::before{ width:2px; height:18px; }
.icon-css.plus::after{  width:18px; height:2px; }
.icon-css.minus::after{ width:18px; height:2px; }
.srvx-card:not(.is-active) .icon-css.plus{ display:block; }
.srvx-card.is-active .icon-css.minus{ display:block; }

/* Panel: aparece solo en activo, dentro de la MISMA tarjeta */
.srvx-panel{
  flex:1 1 auto; min-width:0;
  background:#fff;
  display:none;
}
.srvx-card.is-active .srvx-panel{ display:block; }

.srvx-panel__inner{
  display:grid; grid-template-columns: 360px 1fr; gap:32px;
  padding: 24px 28px;
}

/* Imagen con proporción consistente y recorte cover */
.srvx-media{ width:100%; aspect-ratio: 3 / 4; border-left:1px solid var(--color-accent-light); padding-left:16px; }
.srvx-media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Texto (lista) */
.srvx-body{ color:#2c2c2c; font-size:16px; line-height:1.6; margin-top: -10%; }
.srvx-body ul{ margin-left:1.2rem; }
.srvx-body li{ margin-bottom:.5rem; }

/* Responsive */
@media (max-width:1100px){
  .srvx-panel__inner{ grid-template-columns: 300px 1fr; gap:24px; padding:22px; }
}
@media (max-width:860px){
  /* móvil: acordeón vertical (pero sigue siendo una caja) */
  .srvx__rail{ display:block; }
  .srvx-card{ display:block; border-left:0; border-top:1px solid rgba(28,21,92,.12); }
  .srvx-card:first-child{ border-top:0; }
  .srvx-tab{
    width:100%; min-width:0; padding:14px 52px 14px 52px;
  }
  .srvx-tab__title{
    writing-mode: horizontal-tb; transform:none;
    font-size:16px; font-weight:800; text-align:left;
  }
  .srvx-tab__icon{ left:22px; top:50%; transform:translateY(-50%); }
  .srvx-panel{ display:none; }
  .srvx-card.is-active .srvx-panel{ display:block; }
  .srvx-panel__inner{ grid-template-columns: 1fr; gap:16px; padding:18px; }
  .srvx-media{ aspect-ratio: 16/9; padding-left:0; border-left:0; }
}

/* ===========================
   Home – Proyectos
   =========================== */
:root{ --proj-gap: 24px; --proj-radius: 8px; --proj-shadow: 0 10px 24px rgba(0,0,0,.12); }

.home-proj{ padding: 36px 0 22px; background: transparent; }
.home-proj__grid{
  display: grid;
  grid-template-columns: 1.05fr 1.95fr; /* izq / der */
  gap: var(--proj-gap);
  align-items: stretch;
}

/* Caja intro (morado oscuro) */
.home-proj__intro{
  background: #1C155C;
  color: #fff;
  padding: 34px 34px;
  box-shadow: var(--proj-shadow);
}
.intro__title{ margin:0 0 .6rem 0; line-height:1.15; font-weight:800; font-size: clamp(22px,1.4vw + 16px,34px); }
.intro__title .line{ display:block; }
.intro__title .line--accent{ color:#D57BF5; }
.intro__desc{ margin:0 0 14px 0; color:#cfd3f6; font-size:15px; }
.btn.btn--intro{
  display:inline-flex; align-items:center; gap:.5rem;
  color:#D57BF5; background:#D57BF512; border: 1px solid #D57BF5;
  padding:.65rem 1.1rem; border-radius:16px; font-size:14px; font-weight:700; text-transform:uppercase;
}
.btn--intro .arrow{ display:inline-block; transform: translateX(2px); }
.btn--intro:hover{ background: rgba(255,255,255,.08); }

/* Columna derecha */
.home-proj__colR{ display:grid; grid-template-rows: 1fr auto; gap: var(--proj-gap); }
.home-proj__colR .proj-card--featured{ height: 100%; }

/* Tarjetas de proyecto */
.proj-card{
  position: relative; display:block; overflow:hidden;
  background: #eee; background-image: var(--bg); background-size: cover; background-position:center;
  box-shadow: var(--proj-shadow);
  min-height: 240px;
}
.proj-card--featured{ min-height: 360px; }
.proj-card--left{ grid-column: 1 / span 1; grid-row: 2; min-height: 260px; }

/* Fila inferior derecha: dos tarjetas lado a lado */
.home-proj__colR > .proj-card:not(.proj-card--featured){
  display:grid; grid-template-columns: 1fr 1fr; gap: var(--proj-gap);
}
.home-proj__colR > .proj-card:nth-child(2),
.home-proj__colR > .proj-card:nth-child(3){
  /* cada una es una tarjeta simple: sobreescribimos el grid de arriba */
  display:block; min-height: 240px;
}

/* Overlay y contenido solo en hover */
.proj-card__hover{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding: 18px 20px;
  color:#fff;
  background: linear-gradient(180deg, rgba(28,21,92,0) 0%, rgba(28,21,92,.55) 55%, rgba(28,21,92,.85) 100%);
  opacity:0; transition: opacity .2s ease;
}
.proj-card:hover .proj-card__hover{ opacity:1; }

.proj-card__title{
  position:absolute; left:20px; top:50%; transform:translateY(-50%);
  font-size: clamp(18px,1.4vw + 12px,28px); font-weight:800; text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

.proj-card__bottom{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.proj-card__cta{
  text-transform:uppercase; font-size:12px; font-weight:700; letter-spacing:.08em;
}
.proj-card__go{
  display:inline-grid; place-items:center; width:28px; height:28px;
  background: rgba(255,255,255,.85); color:#1C155C; font-size:18px; font-weight:700;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}

/* Responsive */
@media (max-width: 1100px){
  .home-proj__grid{ grid-template-columns: 1fr; }
  .home-proj__colR{ grid-template-rows: auto auto; }
  .proj-card--featured{ min-height: 320px; }
  .proj-card--left{ grid-column: auto; grid-row:auto; }
  .home-proj__colR > .proj-card:not(.proj-card--featured){ grid-template-columns: 1fr; }
}


/* ===========================
   Home – Destacados (3 cards)
   =========================== */
.home-high{ padding: 56px 0 64px; background: transparent; }
.home-high__head{ text-align:center; margin-bottom: 22px; }

.home-high__title{
  margin:0 0 6px 0;
  font-weight: 800;
  line-height: 1.15;
  font-size: clamp(24px, 2vw + 18px, 40px);
}
.home-high__title .line{ display:block; }
.home-high__title .line--secondary{ color: var(--color-secondary); }
.home-high__title .line--accent{ color: var(--color-accent-light); }

.home-high__sub{
  color: rgba(0,0,0,.75);
  font-size: 16px;
}

.home-high__grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.high-card{
  text-align: center;
  padding: 28px 26px;
  border: 1px solid rgba(28,21,92,.35); /* borde sutil, como en la ref */
  border-radius: 4px;
  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.high-card__icon img{
  width: 56px; height: 56px; object-fit: contain; display: inline-block;
  filter: none; /* deja el color del icono tal cual lo subas (morado) */
}

.high-card__title{
  color: var(--color-secondary);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  margin: 4px 0 2px 0;
}

.high-card__text{
  color: #262626;
  font-size: 15px;
  line-height: 1.55;
}
.high-card__text p{ margin: 0 0 .65rem 0; }

@media (max-width: 960px){
  .home-high__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .home-high{ padding: 42px 0 50px; }
  .home-high__grid{ grid-template-columns: 1fr; gap: 18px; }
}

/* ===========================
   Home – CTA Cover (bg + gradiente vertical)
   =========================== */
.cta-cover{
  position: relative;
  width:100%;
  background-image: var(--cta-bg);
  background-size: cover;
  background-position: center;
  /* padding similares al mock (más altos) */
  padding: 72px 0 80px;
  overflow:hidden;
  margin-bottom: -28px;
}
/* Gradiente vertical: arriba → abajo (según especificación) */
.cta-cover::before{
  content:""; position:absolute; inset:0;
  mix-blend-mode: multiply; /* da tinte sin “lavar” la foto */
  pointer-events:none;
}
.cta-cover::after{
  /* leve velo para asegurar legibilidad en fotos claras */
  content:""; position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.10) 60%, rgba(0,0,0,0) 100%);
  pointer-events:none;
}

.cta-cover__inner{ position:relative; z-index:1; }
.cta-cover__head{ text-align:center; color:#fff; max-width:840px; margin:0 auto; }

.cta-cover__title{
  margin:0 0 .35rem 0;
  line-height:1.15;
  font-weight:800;
  font-size: clamp(26px, 2vw + 18px, 40px);
}
.cta-cover__title .line{ display:block; }
.cta-cover__title .line--accent{ color: var(--color-accent-light); }
.cta-cover__title .line--white{ color:#fff; }

.cta-cover__sub{
  color: rgba(255,255,255,.92);
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 18px;
}
.cta-cover__sub p{ margin:0 0 .4rem 0; }

/* Botón “chip” violeta claro */
.btn{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.70rem 1.15rem;
  border-radius:16px;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-weight:700;
  font-size:14px;
}
.btn--cta{
  color:#1C155C;
  background-color: #D57BF5;/* texto morado oscuro */
}
.btn--cta:hover{ filter:brightness(1.05); }

/* Responsive */
@media (max-width: 960px){
  .cta-cover{ padding: 62px 0 70px; }
}
@media (max-width: 640px){
  .cta-cover{ padding: 52px 0 58px; }
}

/* Single Project (estructura base) */
.proj-hero{ background-image:var(--bg); background-size:cover; background-position:center; padding:64px 0; color:#fff; position:relative; }
.proj-hero::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(28,21,92,.85), rgba(28,21,92,.55) 60%, rgba(28,21,92,0) 100%); }
.proj-hero .container{ position:relative; z-index:1; }
.proj-hero__title{ margin:0; font-weight:800; font-size: clamp(24px,2vw + 18px,36px); }

.proj-detail{ padding:28px 0 36px; }
.proj-detail__grid{ display:grid; grid-template-columns: 1.6fr 1fr; gap:24px; }
.proj-detail__media img{ width:100%; height:70%; object-fit:cover; display:block; border-radius:8px; box-shadow:0 8px 22px rgba(0,0,0,.12); }
.meta-card{ background:#1C155C; color:#fff; border-radius:8px; padding:18px; }
.meta-box{ margin-top:18px; border:2px solid #1C155C; border-radius:8px; padding:14px 16px; }
.meta-box h4{ margin:0 0 8px 0; color:#1C155C; }

.proj-cta{ text-align:center; margin:28px 0; }

/* =============================
   SINGLE PROJECT: MOBILE STACK
   ============================= */

@media (max-width: 980px){
  /* Hero más compacto en mobile */
  .proj-hero{
    padding: 40px 0;
  }
  .proj-hero__title{
    font-size: clamp(22px, 4.2vw, 28px);
    line-height: 1.15;
  }

  /* Sección detalle: una sola columna */
  .proj-detail{
    padding: 20px 0 28px;
  }
  .proj-detail__grid{
    display: grid;
    grid-template-columns: 1fr !important; /* fuerza 1 col */
    gap: 14px;                              /* separación más corta */
  }

  /* Medias y tarjetas ocupan todo el ancho */
  .proj-detail__media img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    box-shadow: 0 8px 22px rgba(0,0,0,.12);
  }
  .meta-card{
    border-radius: 10px;
    padding: 16px 14px;
  }
  .meta-box{
    margin-top: 8px;
    padding: 14px 16px;
    border-radius: 10px;
  }
  .meta-box h4{
    margin: 0 0 8px 0;
  }

  /* CTA centrada y con respiración */
  .proj-cta{
    margin: 20px 0 10px;
    text-align: center;
  }
}

/* Ajuste aún más apretado para móviles pequeños */
@media (max-width: 600px){
  .proj-hero{ padding: 32px 0; }
  .proj-detail__grid{ gap: 12px; }
  .meta-card{ padding: 14px; }
  .meta-box{ padding: 12px 14px; }
}

/* =============== Archivo Proyectos =============== */
.proj-arch__hero{
  background-image: var(--bg);
  background-size: cover; background-position: center;
  padding: 64px 0 48px; color:#fff; position: relative;
}
.proj-arch__hero::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(28,21,92,.85) 0%, rgba(28,21,92,.55) 60%, rgba(28,21,92,0) 100%);
}
.proj-arch__hero .container{ position: relative; z-index:1; }
.proj-arch__title{ margin:0; font-weight:800; font-size: clamp(28px, 3vw + 14px, 56px); }

.proj-arch{ padding: 28px 0 40px; }
.proj-arch__head{ text-align:center; max-width: 920px; margin: 0 auto 16px; }
.proj-arch__h2{ margin:0 0 30px 0; font-weight:800; line-height:1.15; font-size: clamp(24px, 2vw + 16px, 40px); }
.proj-arch__h2 .line{ display:block; }
.proj-arch__h2 .line--secondary{ color: var(--color-secondary); }
.proj-arch__h2 .line--accent{ color: var(--color-accent-light); }
.proj-arch__desc{ color:#2c2c2c; }
.proj-arch__desc p{ margin:.25rem 0; margin-bottom: 40px;}

/* Tabs */
.proj-arch__tabs{ margin-top: 14px; position: relative; }
.tabs{ list-style:none; padding:0; margin:0; display:flex; gap: 28px; justify-content:center; flex-wrap:wrap; }
.tab a{
  display:inline-block; padding: 8px 0;
  color:#4b4b4b; font-weight:600; text-decoration:none;
  position:relative;
}
.tab sup{ font-size: 10px; vertical-align: super; margin-left: 2px; color: #b58cdf; }
.tab.is-active a{ color: var(--color-accent-light); }
.tabs__underline{ display:block; height:2px; width: 75%; margin: 6px auto 0; background: rgba(28,21,92,.18); }

/* Grid 3xN */
.proj-arch__grid{
  margin-top: 22px;
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Tarjeta con overlay morado en hover (reutiliza estilos de home) */
.proj-card{
  position: relative; display:block; overflow:hidden;
  background: #eee; background-image: var(--bg); background-size: cover; background-position:center;
  min-height: 260px; box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.proj-card__hover{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding: 18px 20px; color:#fff;
  background: linear-gradient(180deg, rgba(28,21,92,0) 0%, rgba(28,21,92,.55) 55%, rgba(28,21,92,.85) 100%);
  opacity:0; transition: opacity .2s ease;
}
.proj-card:hover .proj-card__hover{ opacity:1; }
.proj-card__title{
  position:absolute; left:20px; top:50%; transform:translateY(-50%);
  font-size: clamp(18px,1.4vw + 12px,28px); font-weight:800; text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.proj-card__bottom{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.proj-card__cta{ text-transform:uppercase; font-size:12px; font-weight:700; letter-spacing:.08em; }
.proj-card__go{
  display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%;
  background: rgba(255,255,255,.85); color:#1C155C; font-size:18px; font-weight:700;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}

/* Paginación */
.proj-arch__pagination{ margin-top: 20px; text-align:center; }
.proj-arch__pagination ul{ list-style:none; display:inline-flex; gap:8px; padding:0; margin:0; }
.proj-arch__pagination a, .proj-arch__pagination span{
  display:inline-block; padding:6px 10px; border-radius:6px; text-decoration:none;
  color:#1C155C; border:1px solid rgba(28,21,92,.25);
}
.proj-arch__pagination .current{ background:#1C155C; color:#fff; border-color:#1C155C; }

@media (max-width: 980px){
  .proj-arch__grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px){
  .proj-arch__grid{ grid-template-columns: 1fr; }
}

/* ===== Archivo Proyectos: fix tabs + grid + paginación ===== */
.proj-arch__hero::before{ pointer-events:none; }

.proj-arch__tabs{ position:relative; z-index:10; }
.tabs{ list-style:none; padding:0; margin:0; display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
.tab a, .tab button{
  display:inline-block; padding:8px 12px;
  color:#4b4b4b; font-weight:600; text-decoration:none;
  background:#fff; border:1px solid rgba(28,21,92,.28); border-radius:6px;
  cursor:pointer;
}
.tab.is-active a, .tab.is-active button{
  color: var(--color-accent-light);
  border-color: var(--color-accent-light);
  box-shadow: 0 0 0 1px rgba(213,123,245,.25) inset;
}
.tabs__underline{ display:block; height:2px; width:75%; margin:6px auto 0; background:rgba(28,21,92,.18); }

.proj-arch__grid{
  margin-top:22px !important;
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:24px !important;
}
#projGrid.is-loading { opacity:.55; pointer-events:none; filter:grayscale(15%); }

.proj-card{
  position:relative; display:block; border-radius:8px; overflow:hidden;
  background:#eee; background-image:var(--bg); background-size:cover; background-position:center;
  min-height:260px; box-shadow:0 10px 24px rgba(0,0,0,.12);
}
.proj-card__hover{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:18px 20px; color:#fff;
  background: linear-gradient(180deg, rgba(28,21,92,0) 0%, rgba(28,21,92,.55) 55%, rgba(28,21,92,.85) 100%);
  opacity:0; transition:opacity .2s ease;
}
.proj-card:hover .proj-card__hover{ opacity:1; }
.proj-card__title{
  position:absolute; left:20px; top:50%; transform:translateY(-50%);
  font-size: clamp(18px,1.4vw + 12px,28px); font-weight:800; text-shadow:0 2px 10px rgba(0,0,0,.35);
}
.proj-card__bottom{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.proj-card__cta{ text-transform:uppercase; font-size:12px; font-weight:700; letter-spacing:.08em; }
.proj-card__go{ display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,.85); color:#1C155C; font-size:18px; font-weight:700; box-shadow:0 6px 16px rgba(0,0,0,.25); }

.proj-arch__pagination{ margin-top:20px; text-align:center; }
.proj-arch__pagination ul{ list-style:none; display:inline-flex; gap:8px; padding:0; margin:0; }
.proj-arch__pagination a,
.proj-arch__pagination button,
.proj-arch__pagination span{
  display:inline-block; padding:6px 10px; border-radius:6px; text-decoration:none;
  color:#1C155C; background:#fff; border:1px solid rgba(28,21,92,.25); cursor:pointer;
}
.proj-arch__pagination .current{ background:#1C155C; color:#fff; border-color:#1C155C; }

@media (max-width:980px){
  .proj-arch__grid{ grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:640px){
  .proj-arch__grid{ grid-template-columns:1fr !important; }
}

/* ============================
   PROYECTOS / TABS EN MODO TEXTO
   ============================ */

/* El header puede estar ya centrado; reforzamos por si acaso */
.proj-arch__head { text-align: center; }

//* ===== PROYECTOS · Tabs en texto, 16/400/#000 y línea full-width ===== */

/* El nav debe medir lo mismo que la grilla (100% del .container) */
.proj-arch__tabs{
  display:block;
  width:100%;
  max-width:100%;   /* por si hubiera un inline-block previo */
  position:relative;
  z-index:10;
  margin: 0 auto;
}

/* Fila de tabs como texto, sin “píldoras” */
.proj-arch__tabs .tabs{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;   /* alinea a la izquierda */
  gap:48px;                     /* separa ítems (ajusta a gusto) */
  padding:0;
  margin:0;
  list-style:none;
}

/* Estilo de los ítems (16px, 400, #000) */
.proj-arch__tabs .tab button,
.proj-arch__tabs .tab a{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:0 0 10px !important;  /* espacio sobre la línea */
  font-size:16px;
  font-weight:400;
  line-height:1.2;
  color:#000000;
  cursor:pointer;
}

/* Estado activo/hover en morado claro */
.proj-arch__tabs .tab.is-active button,
.proj-arch__tabs .tab.is-active a,
.proj-arch__tabs .tab button:hover,
.proj-arch__tabs .tab a:hover{
  color:#D57BF5;
}

/* Línea única (mismo ancho que los tabs/grilla) */
.proj-arch__tabs .tabs__underline{
  display:block;
  width:100%;
  height:2px;
  margin:8px 0 0;
  background:#D57BF5;
  opacity:.6;
}

/* Mantén la grilla tal cual */
.proj-arch__grid{
  margin-top:22px !important;
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:24px !important;
}
@media (max-width:980px){
  .proj-arch__grid{ grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:640px){
  .proj-arch__grid{ grid-template-columns:1fr !important; }
}