/* ============================================================
   NIEFERGOLD & CÍA. — componentes de marca
   ------------------------------------------------------------
   Navegación, hero, áreas, índice de calculadoras, testimonios,
   feed y movimiento transversal. Se carga después de styles.css.

   Igual que el resto: cero colores literales, todo desde tokens.css.
   ============================================================ */

/* ── Superficies claras ───────────────────────────────────────────
   El sitio alterna ónix y marfil. Dentro de .claro cambia el contexto
   completo: texto en tinta, secundario en piedra, hairlines en niebla
   y el acento pasa de oro a BRONCE, porque el oro sobre marfil no da
   contraste suficiente para texto (solo sirve decorativo). */
.claro{
  background:var(--marfil);
  color:var(--tinta);
  --acento:var(--bronce);
  --sobre:var(--tinta);
  --sobre-2:var(--piedra);
  --hairline:var(--niebla);
  --tarjeta:var(--blanco);
}
/* Sobre ónix el acento es el oro y los neutros se invierten. */
.oscuro,
body{
  --acento:var(--oro);
  --sobre:var(--marfil);
  --sobre-2:var(--humo);
  --hairline:var(--grafito-2);
  --tarjeta:var(--grafito);
}
.oscuro{background:var(--onix);color:var(--marfil)}
.claro .eyebrow{color:var(--bronce)}

/* ── Utilidades de sección ────────────────────────────────────── */
.seccion{padding:clamp(64px,9vw,118px) 0}
.seccion-cabeza{max-width:760px;margin-bottom:clamp(34px,5vw,56px)}
.seccion-cabeza h2{
  font-size:clamp(34px,4.6vw,58px);font-weight:var(--peso-titular);line-height:1.06;
  letter-spacing:-.03em;margin:0 0 18px;color:var(--sobre)}
.seccion-cabeza p{margin:0;color:var(--sobre-2);font-size:17px;line-height:1.7;max-width:62ch}
.it{font-style:italic;color:var(--champan)}
.claro .it{color:var(--bronce)}

/* Enlace de salto para teclado: fuera de pantalla hasta recibir foco. */
.saltar{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--oro);color:var(--onix);padding:12px 18px;
  border-radius:0 0 var(--radio-s) 0;font-weight:600;font-size:14px}
.saltar:focus{left:0}

/* ============================================================
   1 · Navegación y megamenú
   ============================================================ */
.nav{position:sticky;top:0;z-index:60;
  border-bottom:1px solid var(--grafito-2);
  background:rgba(var(--onix-rgb),.86);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.nav-in{width:min(var(--max),calc(100% - 44px));margin-inline:auto;height:78px;
  display:flex;align-items:center;gap:28px}
/* La lista ocupa toda la altura de la barra (no solo la de su contenido)
   para que el ítem con megamenú pueda estirarse hasta el borde inferior.
   Ver .mega-host más abajo. */
.nav-menu{margin-left:auto;align-self:stretch}
.nav-lista{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;height:100%}
.nav-link{display:inline-flex;align-items:center;gap:7px;
  padding:9px 14px;border-radius:var(--radio-s);border:0;background:none;cursor:pointer;
  font-family:var(--font-texto);font-size:14px;font-weight:500;color:var(--humo);
  transition:color var(--t-micro) var(--e-soft),background var(--t-micro) var(--e-soft)}
.nav-link:hover{color:var(--marfil);background:var(--superficie)}
.nav-link-activo{color:var(--marfil)}
.nav-link-activo::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--oro)}
.nav-cta{padding:11px 20px;font-size:14px;flex:none}
.mega-chevron{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--t-micro) var(--e-soft)}
[aria-expanded="true"] .mega-chevron{transform:rotate(180deg)}

/* Megamenú: dos columnas. Entra con opacidad + translateY(-10px)→0 en
   240ms con la curva de entradas. `hidden` lo saca del flujo cuando
   está cerrado, así no se puede tabular hacia él sin querer. */
/* El anfitrión se estira a toda la altura de la barra para que su caja
   llegue justo al borde superior del panel. Sin esto quedaba una franja
   muerta de ~30px entre el botón y el menú, y bajar el cursor disparaba
   un `mouseleave`. `position:static` es a propósito: el panel se ancla a
   .nav, que sí está posicionada, para poder ocupar todo el ancho. */
.mega-host{position:static;align-self:stretch;display:flex;align-items:center}
.mega{position:absolute;left:50%;transform:translateX(-50%);
  top:calc(100% - 1px);width:min(var(--max),calc(100vw - 44px));
  background:var(--grafito);border:1px solid var(--grafito-2);
  border-radius:0 0 var(--radio) var(--radio);box-shadow:var(--sombra);
  overflow:hidden;z-index:61}
.mega[hidden]{display:none!important}
.mega-animado{opacity:0;transform:translateX(-50%) translateY(-10px);
  transition:opacity var(--t-micro) var(--e-out),transform var(--t-micro) var(--e-out)}
.mega-abierto{opacity:1;transform:translateX(-50%) translateY(0)}
.mega-in{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr)}
.mega-col{padding:30px 32px 34px}
.mega-titulo{margin:0 0 16px;font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--oro)}
.mega-lista{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.mega-item{display:flex;gap:14px;padding:13px 14px;border-radius:var(--radio-s);
  transition:background var(--t-micro) var(--e-soft),transform var(--t-micro) var(--e-soft)}
.mega-item:hover{background:var(--superficie);transform:translateX(3px)}
.mega-ico{width:22px;height:22px;flex:none;margin-top:2px;fill:none;stroke:var(--oro);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mega-item strong{display:block;font-size:14px;font-weight:600;color:var(--marfil);margin-bottom:3px}
.mega-item small{display:block;font-size:12.5px;color:var(--humo);line-height:1.5}
.mega-promo{padding:30px 32px 34px;background:var(--grafito-2);
  border-left:1px solid var(--onix);display:flex;flex-direction:column;align-items:flex-start}
.mega-promo-t{font-family:var(--font-display);font-size:25px;font-weight:var(--peso-titular);line-height:1.15;
  margin:0 0 12px;color:var(--marfil)}
.mega-promo-p{font-size:13.5px;color:var(--humo);line-height:1.65;margin:0 0 22px}
.mega-promo .btn{padding:12px 18px;font-size:13.5px}

/* Hamburguesa y menú lateral: solo en pantallas chicas. */
.nav-menu-btn{display:none;width:42px;height:42px;flex:none;border:1px solid var(--grafito-2);
  border-radius:var(--radio-s);background:var(--superficie);cursor:pointer;
  place-items:center;padding:0}
.nav-menu-barras,.nav-menu-barras::before,.nav-menu-barras::after{
  display:block;width:17px;height:1.5px;background:var(--marfil);border-radius:2px}
.nav-menu-barras{position:relative}
.nav-menu-barras::before,.nav-menu-barras::after{content:"";position:absolute;left:0}
.nav-menu-barras::before{top:-6px}
.nav-menu-barras::after{top:6px}

.drawer-fondo{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.6);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.drawer{position:fixed;z-index:71;top:0;right:0;bottom:0;width:min(360px,88vw);
  background:var(--grafito);border-left:1px solid var(--grafito-2);
  padding:20px 22px 32px;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:18px}
.drawer-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.drawer-cerrar{width:38px;height:38px;flex:none;border:1px solid var(--grafito-2);
  border-radius:var(--radio-s);background:var(--superficie);cursor:pointer;
  display:grid;place-items:center}
.drawer-cerrar svg{width:17px;height:17px;fill:none;stroke:var(--marfil);
  stroke-width:2;stroke-linecap:round}
.drawer-cta{margin:0}
.drawer-nav{display:flex;flex-direction:column}
.drawer-link{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;text-align:left;padding:15px 2px;border:0;border-bottom:1px solid var(--grafito-2);
  background:none;cursor:pointer;font-family:var(--font-texto);font-size:16px;
  font-weight:500;color:var(--marfil)}
.drawer-sub{display:grid;padding:4px 0 12px 14px;border-left:1px solid var(--grafito-2);margin-left:2px}
.drawer-sub a{padding:11px 0;font-size:14px;color:var(--humo)}
.drawer-sub a:hover{color:var(--oro)}
.drawer-sub-todas{color:var(--oro)!important;font-weight:600}
/* La animación de apertura la orquesta interfaz.js con estas clases. */
.drawer-animado{transform:translateX(100%);
  transition:transform var(--t-base) var(--e-inout)}
.drawer-abierto{transform:translateX(0)}
.drawer-fondo-animado{opacity:0;transition:opacity var(--t-base) var(--e-inout)}
.drawer-fondo-abierto{opacity:1}

/* ============================================================
   2 · Hero con cordillera
   ============================================================ */
.hero-cordillera{position:relative;overflow:hidden;background:var(--onix);
  min-height:min(88vh,860px);display:flex;align-items:flex-end;
  padding:clamp(90px,14vw,170px) 0 clamp(44px,6vw,72px)}

/* Telón tenue detrás de la ilustración: dos resplandores muy bajos —uno
   champán arriba a la derecha, donde el SVG dibuja el sol, y otro dorado
   apoyado abajo— sobre ónix. Da temperatura al fondo sin competir con el
   titular ni convertirse en un color de bloque. */
.cordillera-telon{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(94% 68% at 74% 14%,rgba(var(--champan-rgb),.13),transparent 66%),
    radial-gradient(80% 60% at 8% 96%,rgba(var(--oro-rgb),.08),transparent 72%),
    var(--onix)}

/* La ilustración. Ancla abajo y desborda un poco (scale) para que el
   parallax pueda moverla sin dejar el borde superior a la vista. */
.cordillera{position:absolute;inset:auto 0 0 0;width:100%;height:min(76%,660px);
  pointer-events:none;z-index:0;overflow:hidden}
.cordillera-img{width:100%;height:100%;display:block;
  object-fit:cover;object-position:center bottom;transform:scale(1.06)}

/* Scrim: degradé hacia ónix para que el texto se lea sobre las montañas.
   Es lo justo para garantizar el contraste del titular y no más: la
   ilustración es el fondo, no un adorno tapado. Fuerte arriba (donde va
   el h1), casi transparente en la franja de las cumbres, y otra vez
   presente abajo para asentar la fila de valores. */
.cordillera-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(var(--onix-rgb),.96) 0%,rgba(var(--onix-rgb),.86) 24%,rgba(var(--onix-rgb),.26) 56%,rgba(var(--onix-rgb),.16) 76%,rgba(var(--onix-rgb),.66) 100%)}
.hero-cordillera .wrap{position:relative;z-index:2}
.hero-cordillera h1{font-size:clamp(44px,7vw,92px);font-weight:var(--peso-titular);line-height:1.02;
  letter-spacing:-.035em;margin:0 0 26px;color:var(--marfil);max-width:16ch}
.hero-lede{font-size:clamp(16px,1.5vw,19px);line-height:1.7;color:var(--humo);
  max-width:56ch;margin:0 0 36px}
.hero-acciones{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:clamp(48px,7vw,84px)}

/* Los cuatro valores, en fila. */
.valores{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--grafito-2);border:1px solid var(--grafito-2);border-radius:var(--radio);
  overflow:hidden}
.valor{background:rgba(var(--onix-rgb),.84);padding:26px 22px 28px;display:flex;flex-direction:column}
.valor h3{font-size:20px;font-weight:var(--peso-titular);margin:0 0 10px;color:var(--marfil);letter-spacing:-.015em}
.valor p{margin:0;font-size:13px;line-height:1.6;color:var(--humo)}

/* ============================================================
   3 · Áreas de práctica
   ============================================================ */
/* Las tarjetas de área no llevan icono ni numeración: el título es el
   único elemento de entrada y ocupa la esquina superior izquierda, sobre
   el mismo eje que la bajada y el enlace. Por eso la tarjeta es más alta
   y con más aire que antes: el titular necesita espacio para respirar. */
.areas-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}
/* Variante de dos columnas para grupos de cuatro tarjetas con texto
   largo —los pilares de Nosotros—: con `auto-fit` quedaban 3 + 1 y la
   última huérfana en su propia fila. */
.areas-grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));max-width:960px}
.area{position:relative;display:flex;flex-direction:column;padding:34px 32px 34px;
  border-radius:var(--radio);background:var(--tarjeta);border:1px solid var(--hairline);
  min-height:280px;
  transition:transform var(--t-micro) var(--e-soft),box-shadow var(--t-micro) var(--e-soft),
             border-color var(--t-micro) var(--e-soft)}
.area:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(var(--tinta-rgb),.13)}
.area-ico{width:30px;height:30px;fill:none;stroke:var(--acento);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:18px}
.area h3{font-size:clamp(25px,2.5vw,31px);font-weight:var(--peso-titular);
  margin:0 0 14px;color:var(--sobre);letter-spacing:-.022em;line-height:1.12}
.area p{margin:0;font-size:14px;line-height:1.65;color:var(--sobre-2)}
.area-enlace{margin-top:auto;padding-top:22px;font-size:13px;font-weight:600;
  color:var(--acento);display:inline-flex;align-items:center;gap:9px;
  transition:gap var(--t-micro) var(--e-soft)}
.area:hover .area-enlace{gap:15px}

/* Una tarjeta oscura entre claras: destaca Tributario, la de mayor
   tráfico esperado, sin cambiar su estructura. Redefine las variables
   de contexto en vez de repintar cada regla. */
.area-destacada{
  background:linear-gradient(155deg,var(--grafito-2),var(--onix));
  border-color:var(--grafito-2);
  --acento:var(--oro);
  --sobre:var(--marfil);
  --sobre-2:var(--humo);
}
.area-destacada:hover{box-shadow:0 20px 50px rgba(0,0,0,.4)}

/* ============================================================
   4 · Índice de calculadoras
   ============================================================ */
.indice{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.85fr);
  gap:clamp(28px,4vw,60px);align-items:start}
.indice-lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--hairline)}
.indice-fila{border-bottom:1px solid var(--hairline)}
.indice-btn{display:flex;align-items:center;gap:18px;width:100%;text-align:left;
  padding:22px 4px;border:0;background:none;cursor:pointer;
  font-family:var(--font-display);font-size:clamp(20px,2.2vw,28px);font-weight:var(--peso-titular);
  letter-spacing:-.02em;color:var(--sobre-2);
  transition:color var(--t-micro) var(--e-soft),transform var(--t-micro) var(--e-soft)}
/* Solo el span del texto crece. Sin `:first-child` esta regla alcanzaba
   también a .indice-flecha y estiraba el círculo hasta volverlo elipse. */
.indice-btn>span:first-child{flex:1;min-width:0}
.indice-activo .indice-btn{color:var(--sobre);transform:translateX(10px)}
/* La flecha circular en oro solo aparece en el ítem activo. */
.indice-flecha{width:36px;height:36px;flex:none;border-radius:50%;
  display:grid;place-items:center;background:var(--oro);
  opacity:0;transform:scale(.7);
  transition:opacity var(--t-micro) var(--e-soft),transform var(--t-micro) var(--e-soft)}
.indice-flecha svg{width:16px;height:16px;fill:none;stroke:var(--onix);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.indice-activo .indice-flecha{opacity:1;transform:scale(1)}

.indice-panel{position:relative;border-radius:var(--radio);overflow:hidden;
  background:var(--grafito);border:1px solid var(--grafito-2);
  min-height:390px;padding:36px 34px 34px}
.indice-vista{position:absolute;inset:0;padding:36px 34px 34px;
  display:flex;flex-direction:column;justify-content:center;
  opacity:0;transform:scale(1.06);pointer-events:none;
  transition:opacity var(--t-base) var(--e-out),transform var(--t-lento) var(--e-out)}
.indice-vista-activa{opacity:1;transform:scale(1);pointer-events:auto}
/* El gancho va arriba de la cifra: primero la pregunta, después el
   número que la responde. */
.indice-gancho{margin:0 0 10px;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--oro)}
.indice-cifra{font-family:var(--font-display);font-size:clamp(38px,5vw,58px);font-weight:var(--peso-titular);
  line-height:1;letter-spacing:-.03em;color:var(--champan);margin:0 0 16px}
.indice-desc{margin:0 0 12px;font-size:14.5px;line-height:1.65;color:var(--humo);max-width:46ch}
/* La advertencia de que la cifra es un ejemplo va pegada al texto que la
   explica, no al titular: se lee cuando ya se entendió el dato. */
.indice-nota{margin:0 0 24px;font-size:11.5px;line-height:1.5;color:var(--piedra)}
.indice-cta{font-size:13.5px;font-weight:600;color:var(--marfil);
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  border-bottom:1px solid rgba(var(--oro-rgb),.5);padding-bottom:6px;
  transition:gap var(--t-micro) var(--e-soft),color var(--t-micro) var(--e-soft)}
.indice-cta:hover{gap:15px;color:var(--oro)}

/* ============================================================
   5 · Testimonios
   ============================================================ */
.testimonios{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px}
.tst{display:flex;flex-direction:column;padding:28px 26px 26px;border-radius:var(--radio);
  background:var(--tarjeta);border:1px solid var(--hairline)}
.tst-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.tst-estrellas{display:flex;gap:3px}
.tst-estrellas svg{width:15px;height:15px;fill:var(--oro)}
/* Marca de ejemplo: estas tarjetas NO son reseñas reales. */
.tst-ejemplo{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;color:var(--sobre-2);
  border:1px solid var(--hairline);background:transparent}
/* La cita es texto corrido entre comillas, no un titular: se queda en
   peso normal aunque use la variante Display. */
.tst-cita{font-family:var(--font-display);font-style:italic;font-size:17.5px;font-weight:400;
  line-height:1.55;color:var(--sobre);margin:0 0 24px}
.tst-pie{display:flex;align-items:center;gap:13px;margin-top:auto}
.tst-avatar{width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:rgba(var(--oro-rgb),.14);border:1px solid rgba(var(--oro-rgb),.34);
  font-size:13px;font-weight:600;color:var(--acento);letter-spacing:.04em}
.tst-quien{display:flex;flex-direction:column;gap:2px;min-width:0}
.tst-nombre{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--sobre)}
.tst-check{width:15px;height:15px;flex:none;fill:var(--verde-ok)}
.tst-meta{font-size:12px;color:var(--sobre-2)}
/* Hueco a la espera de reseñas reales. */
.tst-vacia{align-items:center;justify-content:center;text-align:center;
  border:1px dashed var(--hairline);background:transparent;min-height:230px}
.tst-vacia p{margin:0;font-size:14.5px;line-height:1.6;color:var(--sobre-2);max-width:26ch}
.tst-vacia strong{display:block;font-family:var(--font-display);font-size:19px;font-weight:var(--peso-titular);
  color:var(--sobre);margin-bottom:8px}

/* ============================================================
   6 · Feed de LinkedIn
   ============================================================ */
.feed{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.post{display:flex;flex-direction:column;border-radius:var(--radio);overflow:hidden;
  background:var(--tarjeta);border:1px solid var(--hairline)}
.post-top{display:flex;align-items:center;gap:12px;padding:20px 22px 14px}
.post-avatar{width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:rgba(var(--oro-rgb),.14);border:1px solid rgba(var(--oro-rgb),.34);
  font-size:13px;font-weight:600;color:var(--acento)}
.post-quien{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.post-nombre{font-size:14px;font-weight:600;color:var(--sobre)}
.post-tiempo{font-size:12px;color:var(--sobre-2)}
.post-li{width:20px;height:20px;flex:none;fill:var(--acento)}
.post-titulo{padding:0 22px;margin:2px 0 8px;font-size:18px;font-weight:var(--peso-titular);
  line-height:1.3;letter-spacing:-.018em;color:var(--sobre)}
.post-texto{padding:0 22px 16px;margin:0;font-size:14px;line-height:1.65;color:var(--sobre-2)}
.post-mas{border:0;background:none;padding:0;cursor:pointer;font:inherit;font-weight:600;
  color:var(--acento)}
/* Enlace a la publicación real: es el único destino de la tarjeta, así
   que ocupa el pie completo en lugar de los contadores de la maqueta. */
.post-enlace{font-size:13.5px;font-weight:600;color:var(--acento);
  display:inline-flex;align-items:center;gap:8px;
  transition:gap var(--t-micro) var(--e-soft)}
.post-enlace:hover{gap:14px}
/* Estado vacío del feed: ocupa el ancho completo de la grilla. */
.feed-vacio{grid-column:1/-1;margin:0;padding:26px 24px;border-radius:var(--radio);
  border:1px dashed var(--hairline);color:var(--sobre-2);font-size:14.5px;text-align:center}
.feed-pie{margin:26px 0 0}
.post-media{position:relative;aspect-ratio:16/9;background:var(--grafito-2);
  display:grid;place-items:center;border-block:1px solid var(--hairline)}
.post-media-t{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--humo)}
.post-play{position:absolute;width:52px;height:52px;border-radius:50%;
  background:rgba(var(--onix-rgb),.72);border:1px solid rgba(var(--marfil-rgb),.28);
  display:grid;place-items:center}
.post-play svg{width:17px;height:17px;fill:var(--marfil);margin-left:3px}
/* `margin-top:auto` empuja el pie al fondo de la tarjeta: en una grilla
   todas las tarjetas tienen la misma altura y sin esto el enlace de una
   publicación corta quedaba flotando a media caja. */
.post-pie{display:flex;align-items:center;gap:18px;padding:14px 22px 18px;
  margin-top:auto;font-size:12.5px;color:var(--sobre-2)}
.post-dato{display:inline-flex;align-items:center;gap:6px}
.post-dato svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6}
.post-compartir{margin-left:auto;border:1px solid var(--hairline);background:none;cursor:pointer;
  border-radius:999px;padding:7px 14px;font:inherit;font-size:12.5px;font-weight:500;
  color:var(--sobre-2);display:inline-flex;align-items:center;gap:7px;
  transition:color var(--t-micro) var(--e-soft),border-color var(--t-micro) var(--e-soft)}
.post-compartir:hover{color:var(--acento);border-color:var(--acento)}
.post-compartir svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* ============================================================
   7 · Páginas internas y marcas de pendiente
   ============================================================ */
.encabezado{padding:clamp(58px,8vw,104px) 0 clamp(34px,5vw,56px);
  border-bottom:1px solid var(--grafito-2)}
.encabezado h1{font-size:clamp(38px,5.6vw,72px);font-weight:var(--peso-titular);line-height:1.04;
  letter-spacing:-.032em;margin:0 0 20px;color:var(--marfil);max-width:18ch}
.encabezado p{margin:0;font-size:17px;line-height:1.7;color:var(--humo);max-width:60ch}
/* `.encabezado p` es más específico que `.eyebrow` y le ganaba el color y
   el tamaño. Se repone aquí para que el rótulo siga siendo un rótulo. */
.encabezado .eyebrow{margin:0 0 18px;font-size:11px;color:var(--oro);max-width:none}
/* Variante para titulares largos —el manifiesto de Nosotros—: baja un
   peldaño el tamaño y ensancha la medida, o quedarían ocho líneas de dos
   palabras cada una. */
.encabezado-largo h1{font-size:clamp(31px,4.3vw,54px);max-width:26ch;line-height:1.08}
.migas{display:flex;align-items:center;gap:9px;margin-bottom:22px;
  font-size:12px;color:var(--humo)}
.migas a:hover{color:var(--oro)}
.migas span{opacity:.45}

/* Contenido de relleno: visible a propósito, para que no se publique
   por accidente creyendo que es texto definitivo. */
.pendiente{position:relative;border:1px dashed rgba(var(--oro-rgb),.42);
  border-radius:var(--radio);padding:26px 26px 28px;background:rgba(var(--oro-rgb),.04)}
.pendiente::before{content:"Contenido pendiente";position:absolute;top:-10px;left:22px;
  padding:2px 10px;border-radius:999px;background:var(--oro);color:var(--onix);
  font-family:var(--font-texto);font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase}
.claro .pendiente{background:rgba(var(--oro-rgb),.07);border-color:rgba(var(--oro-rgb),.5)}
.pendiente>:first-child{margin-top:6px}
.pendiente>:last-child{margin-bottom:0}
.pendiente p{color:var(--sobre-2);font-size:14.5px;line-height:1.7}

.prosa{max-width:68ch}
.prosa h2{font-size:clamp(26px,3.2vw,38px);font-weight:var(--peso-titular);letter-spacing:-.02em;
  margin:clamp(38px,5vw,58px) 0 16px;color:var(--sobre)}
.prosa h3{font-size:21px;font-weight:var(--peso-titular);margin:32px 0 12px;color:var(--sobre)}
.prosa p{margin:0 0 18px;font-size:16px;line-height:1.75;color:var(--sobre-2)}
.prosa ul{margin:0 0 20px;padding-left:20px;color:var(--sobre-2);font-size:16px;line-height:1.75}
.prosa li{margin-bottom:9px}
.prosa a{color:var(--acento);border-bottom:1px solid currentColor}

/* ── Contacto ─────────────────────────────────────────────────────
   Dos columnas: a la izquierda por qué escribir y qué se garantiza, a
   la derecha el formulario. La confirmación ocupa el lugar exacto del
   formulario al enviarse, así la página no salta. */
.contacto-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,4vw,58px);align-items:start}
.contacto-copy h2{font-size:clamp(28px,3.4vw,42px);font-weight:var(--peso-titular);
  line-height:1.08;letter-spacing:-.028em;margin:0 0 16px;color:var(--sobre)}
.contacto-copy>p{margin:0;color:var(--sobre-2);font-size:16px;line-height:1.7;max-width:46ch}

/* Las garantías: promesa en negrita, detalle debajo. Con una línea de
   oro al costado para que se lean como compromisos y no como viñetas. */
.garantias{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:18px}
.garantias li{padding-left:18px;border-left:2px solid var(--acento);
  font-size:13.5px;line-height:1.6;color:var(--sobre-2)}
.garantias strong{display:block;margin-bottom:5px;font-size:14.5px;
  font-weight:600;color:var(--sobre)}

.contacto-form{border-radius:var(--radio);padding:clamp(24px,3vw,38px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 18px}
.contacto-form .control-wide{grid-column:1/-1}
.contacto-form .check,.contacto-form .form-error,
.contacto-form .btn,.contacto-nota{grid-column:1/-1}
.contacto-form .form-error{margin:0}
.contacto-nota{margin:0;text-align:center;font-size:12.5px;color:var(--sobre-2)}

/* Confirmación: mismo ancho y misma caja que el formulario. */
.contacto-ok{border-radius:var(--radio);padding:clamp(30px,4vw,48px);text-align:center}
.contacto-ok h2{font-size:clamp(24px,2.8vw,32px);font-weight:var(--peso-titular);
  letter-spacing:-.022em;margin:0 0 14px;color:var(--marfil)}
.contacto-ok>p:not(.eyebrow){margin:0 auto 26px;max-width:44ch;font-size:15px;
  line-height:1.7;color:var(--humo)}

/* Banner de cierre: una frase de marca y un solo botón. Es el último
   bloque de una página larga, así que no compite con nada más. */
.cierre{display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(24px,3vw,34px);padding:clamp(30px,5vw,56px);
  border-radius:var(--radio-l);border:1px solid var(--hairline);
  background:linear-gradient(150deg,rgba(var(--oro-rgb),.11),transparent 64%),var(--tarjeta)}
.cierre-frase{margin:0;font-family:var(--font-display);
  font-size:clamp(21px,3.1vw,33px);font-weight:var(--peso-titular);
  line-height:1.26;letter-spacing:-.022em;color:var(--sobre);max-width:30ch}

/* Bloque de datos de contacto */
.datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.dato{padding:26px 24px;border-radius:var(--radio);background:var(--tarjeta);
  border:1px solid var(--hairline)}
.dato p:first-child{margin:0 0 8px;font-size:11px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--acento)}
.dato p:last-child{margin:0;font-size:15px;line-height:1.6;color:var(--sobre)}

/* ============================================================
   8 · Pie
   ============================================================ */
.pie{border-top:1px solid var(--grafito-2);background:var(--onix);padding:clamp(48px,6vw,72px) 0 34px}
.pie-in{width:min(var(--max),calc(100% - 44px));margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(26px,4vw,48px)}
.pie-lema{margin:14px 0 0;font-size:13px;color:var(--marfil)}
.pie-nota{margin:8px 0 0;font-size:12.5px;color:var(--humo);max-width:34ch;line-height:1.65}
.pie-col{display:flex;flex-direction:column;gap:11px}
.pie-t{margin:0 0 5px;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--oro)}
.pie-col a{font-size:13.5px;color:var(--humo);transition:color var(--t-micro) var(--e-soft)}
.pie-col a:hover{color:var(--marfil)}
.pie-legal{width:min(var(--max),calc(100% - 44px));margin:clamp(38px,5vw,58px) auto 0;
  padding-top:26px;border-top:1px solid var(--grafito-2)}
.pie-legal p{margin:0 0 14px;font-size:11.5px;line-height:1.7;color:var(--piedra);max-width:88ch}
.pie-legal-fila{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px;margin:0!important}

/* ============================================================
   9 · Movimiento transversal
   ============================================================
   Reveal al entrar en viewport: opacidad 0→1 y translateY(34px)→0 en
   560ms con la curva de entradas. El stagger entre hermanos lo aplica
   interfaz.js escribiendo transitionDelay desde JavaScript (la CSP del
   sitio no permite atributos style en el HTML, pero sí el CSSOM).
   Se dispara una sola vez por elemento. */
.reveal{opacity:0;transform:translateY(34px);
  transition:opacity var(--t-base) var(--e-out),transform var(--t-base) var(--e-out)}
.reveal-visible{opacity:1;transform:none}

/* ── Adaptación a pantallas chicas ────────────────────────────── */
@media(max-width:1080px){
  .mega-lista{grid-template-columns:1fr}
  .mega-in{grid-template-columns:minmax(0,1fr) minmax(240px,.55fr)}
}
@media(max-width:980px){
  .nav-menu,.nav-cta{display:none}
  .nav-menu-btn{display:grid}
  .nav-in{gap:16px;justify-content:space-between}
  .valores{grid-template-columns:repeat(2,minmax(0,1fr))}
  .indice{grid-template-columns:1fr}
  /* En una columna el panel deja de ser un mosaico absoluto y se apila
     debajo de la lista, mostrando solo la vista activa. */
  .indice-panel{min-height:0;padding:0;position:relative}
  .indice-vista{position:relative;inset:auto;display:none;padding:30px 26px 28px}
  .indice-vista-activa{display:flex}
  .pie-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contacto-layout{grid-template-columns:1fr}
}
@media(max-width:600px){
  .contacto-form{grid-template-columns:1fr}
  .nav-in{width:min(100% - 28px,var(--max));height:66px}
  .hero-cordillera{min-height:auto;padding-top:76px}
  .hero-acciones .btn{width:100%}
  .valores{grid-template-columns:1fr}
  .areas-grid,.testimonios,.feed,.datos{grid-template-columns:1fr}
  .pie-in{grid-template-columns:1fr;gap:30px}
  .pie-legal-fila{flex-direction:column;align-items:flex-start}
}

/* Movimiento reducido: sin transiciones ni parallax, estado final directo. */
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .mega-animado,.drawer-animado,.drawer-fondo-animado,
  .indice-vista,.indice-btn,.indice-flecha,.area{transition:none!important}
  .mega-animado{opacity:1;transform:translateX(-50%)}
  .drawer-animado{transform:none}
  .drawer-fondo-animado{opacity:1}
}