/* ============================================================
   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)}

/* Texto que solo existe para quien escucha la página. Se saca del
   flujo sin `display:none` ni `visibility:hidden`, que lo borrarían
   también del árbol de accesibilidad y es justo lo contrario de lo que
   se busca. Lo usa la frase completa del rotador de la home. */
.solo-lectores{position:absolute!important;width:1px;height:1px;
  margin:-1px;padding:0;border:0;overflow:hidden;
  clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}

/* 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 - var(--seguro-izq) - var(--seguro-der)));
  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}
/* El desplegable de áreas usa el mismo .mega-item y el mismo .mega-ico
   que el de calculadoras: dos columnas, icono a la izquierda y el
   nombre del área con su nota debajo. Los iconos no se escriben en el
   partial, los genera scripts/areas.mjs desde el campo `icono` de
   data/areas.mjs. */
.mega-areas .mega-in{grid-template-columns:minmax(0,1fr) minmax(250px,.6fr)}
.mega-lista-areas{grid-template-columns:repeat(2,minmax(0,1fr))}

.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);
  /* Los márgenes seguros importan aquí más que en ningún otro sitio:
     el cajón toca los cuatro bordes de la pantalla, así que en un
     iPhone su último enlace queda debajo de la barra del gesto de
     inicio y en horizontal el borde derecho se come contra la muesca. */
  padding:calc(20px + var(--seguro-arriba)) calc(22px + var(--seguro-der))
          calc(32px + var(--seguro-abajo)) 22px;
  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 de video
   ------------------------------------------------------------
   El hero de la home es la pieza de marca en video a pantalla
   completa (ver partials/hero-video.html). Ocupa el alto de la
   ventana MENOS la barra: la barra es sticky y está en el flujo, así
   que un 100svh a secas dejaría siempre 78px de página asomando
   debajo del hero y la primera pantalla no cerraría nunca.

   svh y no vh: en móvil, `vh` mide la ventana con la barra del
   navegador retraída, así que el hero queda más alto que lo que se
   ve y el botón de bajar cae fuera de pantalla. `svh` mide la
   ventana pequeña —la que hay al llegar—, que es lo correcto aquí.
   El `100vh` de la línea anterior es el respaldo para quien no
   entienda svh.
   ============================================================ */
.hero-video{position:relative;overflow:hidden;background:var(--onix);
  min-height:calc(100vh - 78px);min-height:calc(100svh - 78px)}

/* La capa del video cubre el hero completo. El fondo ónix de abajo es
   deliberado: el video abre y cierra en negro, así que mientras carga
   —y en el instante del corte del loop— no hay ningún salto de color.

   El fotograma fijo del poster se declara también como background
   porque es lo que se ve cuando el video no se muestra: movimiento
   reducido, o un navegador que no reproduce el archivo. */
.hero-video-capa{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:var(--onix)}
/* El encuadre es el natural: la pieza se ve centrada y a sangre. Antes
   había que desplazarla hacia arriba porque el nombre del estudio, que
   va grabado en la mitad de la imagen, chocaba con el titular del sitio.
   Sin ese titular no hay nada con qué chocar y el video vuelve a
   mostrarse como fue compuesto. */
.hero-video-media,
.hero-video-still{position:absolute;inset:0;width:100%;height:100%;
  display:block;object-fit:cover;object-position:center;
  /* Decorativos y mudos: no reciben puntero ni foco. Quien quiera
     detener el video usa el botón, que sí es un control de verdad. */
  pointer-events:none}
/* El video va encima del fotograma. Cuando no se muestra —movimiento
   reducido, archivo caído— el que queda es el fotograma, con exactamente
   el mismo encuadre porque comparten la regla de arriba. */
.hero-video-media{z-index:1}

/* Scrim en dos capas. La vertical asienta el texto abajo y oscurece la
   franja de la barra; la horizontal apoya la columna izquierda, que es
   donde vive el titular. Ninguna de las dos toca la banda central: ahí
   el video pone la marca y taparla sería tapar la pieza. */
/* El scrim ya no tiene que garantizar el contraste de ningún texto:
   encima del video no hay nada. Queda lo mínimo —un velo suave arriba,
   bajo la barra, y un fundido a ónix abajo— para que el hero entre en
   la sección siguiente sin un corte a filo y para que el indicador de
   bajar tenga sobre qué leerse. */
.hero-video-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(var(--onix-rgb),.42) 0%,transparent 16%,
    transparent 62%,rgba(var(--onix-rgb),.48) 86%,var(--onix) 100%)}

/* Botón de bajar: un ancla real a la sección siguiente, no un adorno.
   Quien está en un hero a pantalla completa tiene que poder salir de él
   con un click o con el teclado. */
.hero-bajar{position:absolute;left:50%;bottom:clamp(20px,3vw,32px);translate:-50% 0;
  z-index:3;display:inline-flex;flex-direction:column;align-items:center;gap:9px;
  text-decoration:none;color:var(--humo);
  font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  transition:color var(--t-micro) var(--e-soft)}
.hero-bajar:hover{color:var(--marfil)}
.hero-bajar-ico{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--linea-fuerte);background:rgba(var(--onix-rgb),.45)}
.hero-bajar-ico svg{width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  animation:bajar-latido 2.6s var(--e-inout) infinite}
@keyframes bajar-latido{
  0%,100%{transform:translateY(-2px);opacity:.65}
  50%    {transform:translateY(2px); opacity:1}
}

/* Control de pausa. Un fondo en movimiento que dura más de cinco
   segundos necesita una forma de detenerlo (WCAG 2.2.2). Nace con
   `hidden` en el HTML y lo destapa interfaz.js: sin JavaScript no
   habría nada que el botón pudiera hacer. */
.hero-video-pausa{position:absolute;z-index:3;
  right:clamp(14px,3vw,28px);bottom:clamp(14px,3vw,28px);
  width:38px;height:38px;display:grid;place-items:center;padding:0;
  border-radius:50%;border:1px solid var(--linea-fuerte);
  background:rgba(var(--onix-rgb),.55);color:var(--marfil);cursor:pointer;
  transition:background var(--t-micro) var(--e-soft),border-color var(--t-micro) var(--e-soft)}
.hero-video-pausa:hover{background:rgba(var(--onix-rgb),.85);border-color:var(--oro)}
.hero-video-pausa-ico{width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* El icono de play se dibuja lleno; el de pausa, con dos trazos. */
.hero-video-pausa-ico-play{fill:currentColor;stroke:none;display:none}
.hero-video-detenido .hero-video-pausa-ico-pausa{display:none}
.hero-video-detenido .hero-video-pausa-ico-play{display:block}

/* Si el archivo no llega a reproducirse —red caída, formato no
   soportado— interfaz.js marca la capa y el hero se queda con el
   fotograma fijo en vez de con un rectángulo negro. */
.hero-video-caido .hero-video-media{display:none}

/* ── El hero en pantallas angostas ─────────────────────────────
   Aquí `cover` es inservible. Un video 16:9 recortado a una pantalla de
   teléfono deja a la vista una cuarta parte del ancho, y como la marca
   está centrada lo que se lee es un pedazo de palabra: «ERGOLD &».

   Se cambia a `contain`: el video se ve entero, como una placa de
   título. Lo que sobra arriba y abajo no es un vacío, es el mismo ónix
   del fondo.

   Y el hero deja de medir una pantalla completa. Una placa de 219px de
   alto flotando en 714px de negro se ve rota; midiendo lo que mide la
   placa (56.25vw es la altura de un 16:9 del ancho de la ventana) más
   un respiro parejo arriba y abajo, se ve como lo que es. */
@media (max-width:820px){
  .hero-video{min-height:calc(56.25vw + 132px)}
  .hero-video-media,
  .hero-video-still{object-fit:contain;object-position:center}
  /* Sin recorte no hace falta oscurecer nada: el video empieza y termina
     en negro y el fondo del hero es ónix. El scrim sobra. */
  .hero-video-scrim{background:none}
  /* En táctil el scroll es el gesto natural y el hero ya no ocupa la
     pantalla entera: el ancla sobra. */
  .hero-bajar{display:none}
  /* El botón se ancla a la esquina de la PLACA, no a la del hero: en la
     franja negra de arriba quedaba flotando lejos de lo que controla.
     La placa está centrada, así que su borde superior cae a la mitad de
     lo que sobra —(100% - 56.25vw) / 2— y de ahí se entra 10px. */
  .hero-video-pausa{bottom:auto;right:14px;
    top:calc((100% - 56.25vw) / 2 + 10px)}
}

/* ============================================================
   2.a · Hero con cordillera (SIN USO HOY)
   ------------------------------------------------------------
   La home usaba esta ilustración antes del video. No se borra: el
   marcado sigue completo en partials/cordillera.html y basta con
   volver a poner sus marcas de parte en una página para tener un hero
   liviano, sin descargar un archivo de video. Mismo criterio que la
   sección de testimonios.
   ============================================================ */
.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)}

/* ============================================================
   2.b · Propósito: el degradado de marca en movimiento
   ------------------------------------------------------------
   La primera sección después del hero. Su fondo es un degradado de los
   colores corporativos que se mueve muy lento: tres manchas de color
   desenfocadas que se desplazan y respiran.

   Solo se animan `transform` y `opacity`. Son las dos propiedades que
   el navegador resuelve en el compositor sin recalcular layout ni
   repintar: el desenfoque —que es lo caro— se rasteriza una vez y
   después la mancha solo se mueve. Animar `background-position` en su
   lugar obligaría a repintar la sección entera en cada frame.
   ============================================================ */
.proposito{position:relative;overflow:hidden;isolation:isolate}

.aurora{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aurora-mancha{position:absolute;display:block;border-radius:50%;
  filter:blur(80px);will-change:transform}
.aurora-oro{width:56vw;height:56vw;left:-14vw;top:-20vw;
  background:radial-gradient(circle,rgba(var(--oro-rgb),.50),transparent 68%);
  animation:aurora-a 26s var(--e-inout) infinite alternate}
.aurora-champan{width:46vw;height:46vw;right:-12vw;top:4vw;
  background:radial-gradient(circle,rgba(var(--champan-rgb),.34),transparent 68%);
  animation:aurora-b 34s var(--e-inout) infinite alternate}
.aurora-bronce{width:64vw;height:64vw;left:24vw;bottom:-30vw;
  background:radial-gradient(circle,rgba(var(--bronce-rgb),.62),transparent 68%);
  animation:aurora-c 42s var(--e-inout) infinite alternate}

/* Los bordes de la sección se desvanecen a ónix para que el degradado
   no corte a ras con la sección de al lado. */
.aurora::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,var(--onix) 0%,transparent 20%,transparent 80%,var(--onix) 100%)}

@keyframes aurora-a{
  0%  {transform:translate3d(0,0,0)          scale(1)}
  100%{transform:translate3d(14vw,7vw,0)     scale(1.16)}
}
@keyframes aurora-b{
  0%  {transform:translate3d(0,0,0)          scale(1.1)}
  100%{transform:translate3d(-12vw,10vw,0)   scale(.9)}
}
@keyframes aurora-c{
  0%  {transform:translate3d(0,0,0)          scale(.94)}
  100%{transform:translate3d(-16vw,-8vw,0)   scale(1.2)}
}

.proposito-cabeza{max-width:960px;margin-bottom:clamp(50px,7vw,84px)}
.proposito-t{font-size:clamp(29px,4.6vw,60px);font-weight:var(--peso-titular);line-height:1.08;
  letter-spacing:-.03em;margin:0 0 24px;color:var(--marfil);text-wrap:balance}
.proposito-p{margin:0;color:var(--humo);font-size:17px;line-height:1.7;max-width:60ch}
/* Los dos botones del sitio. Estaban sobre el video y bajaron aquí:
   quedan al final del mensaje y justo encima de los valores, que es
   donde tienen sentido leerlos. */
.proposito-acciones{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(30px,4vw,40px)}

/* ── La palabra que rota ───────────────────────────────────────
   Es una grilla de UNA sola celda con las seis palabras encima unas de
   otras: el bloque mide siempre lo que la palabra más larga y ninguna
   entrada empuja el resto de la frase. Sin JavaScript: es una animación
   CSS con un retardo distinto por palabra.

   Si cambias la lista de palabras hay que tocar tres cosas a la vez o
   la rotación queda con huecos:
     · la duración total (--rotador-ciclo) = nº de palabras × 2.8s
     · el retardo de cada :nth-child, de 2.8s en 2.8s
     · el texto de .solo-lectores, que dice la frase completa. */
.rotador{--rotador-paso:2.8s;--rotador-ciclo:16.8s;
  display:inline-grid;vertical-align:bottom}
.rotador-pista{display:grid;grid-template-areas:"palabra"}
.rotador-palabra{grid-area:palabra;opacity:0;color:var(--champan);
  animation:rotar-palabra var(--rotador-ciclo) var(--e-inout) infinite}
/* El degradé de marca sobre la palabra. Va dentro de un @supports
   porque `color:transparent` sin recorte de fondo la dejaría invisible
   en un navegador que no lo entienda. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .rotador-palabra{
    background:linear-gradient(96deg,var(--oro),var(--champan) 46%,var(--oro));
    -webkit-background-clip:text;background-clip:text;color:transparent}
}
.rotador-palabra:nth-child(1){animation-delay:0s}
.rotador-palabra:nth-child(2){animation-delay:2.8s}
.rotador-palabra:nth-child(3){animation-delay:5.6s}
.rotador-palabra:nth-child(4){animation-delay:8.4s}
.rotador-palabra:nth-child(5){animation-delay:11.2s}
.rotador-palabra:nth-child(6){animation-delay:14s}

/* Cada palabra ocupa una sexta parte del ciclo: entra desde abajo, se
   queda quieta la mayor parte del turno y sale hacia arriba. */
@keyframes rotar-palabra{
  0%    {opacity:0;transform:translateY(.36em)}
  2.6%  {opacity:1;transform:translateY(0)}
  14%   {opacity:1;transform:translateY(0)}
  16.7% {opacity:0;transform:translateY(-.36em)}
  100%  {opacity:0;transform:translateY(-.36em)}
}

/* ── Los cuatro valores ────────────────────────────────────────
   Cada tarjeta lleva su propio degradado en movimiento: un cono de los
   colores de marca que gira detrás y al que solo se le ve el borde,
   porque el ::after lo tapa todo salvo un píxel del contorno.

   Se anima `rotate` (la propiedad independiente, no `transform`) para
   no pisar el translate del centrado. */
.valores-rotulo{display:flex;align-items:center;gap:18px;margin:0 0 22px;
  color:var(--oro);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.valores-rotulo::after{content:"";flex:1;height:1px;
  background:linear-gradient(to right,var(--linea-fuerte),transparent)}

.valores{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.valor{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radio);
  padding:26px 22px 28px;display:flex;flex-direction:column;
  transition:transform var(--t-micro) var(--e-soft)}
.valor::before{content:"";position:absolute;z-index:-2;
  left:50%;top:50%;width:220%;aspect-ratio:1;translate:-50% -50%;
  background:conic-gradient(from 0deg,
    transparent 0deg,var(--oro) 45deg,var(--champan) 85deg,transparent 150deg,
    transparent 215deg,var(--bronce) 275deg,var(--oro) 305deg,transparent 350deg);
  animation:girar-borde 14s linear infinite}
/* La cara de la tarjeta va OPACA. Con un 10% de transparencia se
   alcanzaba a ver el cono girando por debajo, y lo que se ve de un cono
   es su vértice: un destello dando vueltas en mitad del texto. El
   resplandor cálido de arriba es ahora un degradé propio, quieto y
   controlado, en vez de una fuga del de atrás. */
.valor::after{content:"";position:absolute;z-index:-1;inset:1px;
  border-radius:calc(var(--radio) - 1px);
  background:
    radial-gradient(130% 100% at 50% 0%,rgba(var(--oro-rgb),.09),transparent 62%),
    linear-gradient(180deg,var(--grafito),var(--onix))}
.valor:hover{transform:translateY(-3px)}
.valor-num{display:block;margin-bottom:14px;
  color:var(--oro);font-size:11px;font-weight:600;letter-spacing:.18em}
.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)}

@keyframes girar-borde{to{rotate:360deg}}

/* ============================================================
   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)}

/* ── Áreas jurídicas interactivas (home) ──────────────────────────
   Filas del ancho de la pantalla: número, rótulo del área y, a la
   derecha, una nota y la flecha. La fila activa se pinta con una banda
   que va de ónix a bronce y cruza el viewport completo; encima, flotando
   sobre las filas, la tarjeta con la descripción y las materias del área
   activa. No es un acordeón ni un menú: nada se pliega, la tarjeta
   siempre está llena y solo cambia de contenido.

   ALINEACIÓN. Las filas y la capa de la tarjeta comparten la misma
   grilla (--col-materias) y el mismo ancho útil que .wrap, así que la
   tarjeta cae exactamente en la columna que las filas dejan libre. Son
   dos elementos independientes que se ven como uno: si cambias una
   columna, cambian las dos a la vez porque leen la misma variable.

   El marcado lo genera scripts/areas.mjs desde data/areas.mjs. */
.materias{
  position:relative;
  /* 1 rótulo · 2 hueco de la tarjeta · 3 nota · 4 flecha */
  --col-materias:minmax(0,1fr) clamp(300px,30vw,400px) clamp(150px,16vw,215px) 46px;
  --gap-materias:clamp(12px,1.8vw,22px);
  --ancho-materias:min(var(--max),calc(100% - 44px));
}
.materias-lista{list-style:none;margin:0;padding:0}
.materias-fila{border-top:1px solid var(--hairline);
  transition:border-color var(--t-micro) var(--e-soft)}
.materias-fila:last-child{border-bottom:1px solid var(--hairline)}
/* La banda tapa las hairlines que toca, arriba y abajo: si quedaran a la
   vista se verían como dos rayas claras cruzando el degradé. */
.materias-activo,
.materias-activo+.materias-fila{border-top-color:transparent}
.materias-activo:last-child{border-bottom-color:transparent}

/* `isolation` deja que el fondo viva en z-index:-1 sin escaparse por
   detrás de la sección: la banda queda bajo el texto de su fila y sobre
   el fondo marfil, sin tocar nada más. */
.materias-enlace{position:relative;display:block;isolation:isolate}
/* Un degradé no se puede transicionar, así que la banda vive en su
   propia capa y lo que se anima es la opacidad y un barrido de
   izquierda a derecha. */
.materias-fondo{position:absolute;inset:0;z-index:-1;
  /* Ónix que se abre hacia la derecha con un halo de oro: el degradé
     de color vive en el resplandor y no en el fondo, así el texto de la
     derecha y el disco dorado conservan su contraste sobre oscuro. Un
     fondo bronce macizo los dejaba a los tres compitiendo en el mismo
     tono. */
  background:
    radial-gradient(125% 190% at 100% 50%,rgba(var(--oro-rgb),.42) 0%,rgba(var(--oro-rgb),0) 62%),
    linear-gradient(96deg,var(--onix) 0%,var(--grafito) 60%,var(--grafito-2) 100%);
  opacity:0;transform:scaleX(.985);transform-origin:left;
  transition:opacity var(--t-micro) var(--e-soft),transform var(--t-base) var(--e-out)}
.materias-activo .materias-fondo{opacity:1;transform:none}

.materias-fila-in{width:var(--ancho-materias);margin-inline:auto;
  display:grid;grid-template-columns:var(--col-materias);gap:var(--gap-materias);
  align-items:center;padding:clamp(20px,2.4vw,30px) 0}
.materias-area{grid-column:1;min-width:0;font-family:var(--font-display);
  font-size:clamp(24px,3vw,38px);font-weight:var(--peso-titular);
  letter-spacing:-.028em;line-height:1.1;color:var(--sobre);
  transition:color var(--t-micro) var(--e-soft)}
.materias-nota{grid-column:3;text-align:right;font-size:12.5px;line-height:1.45;
  color:var(--sobre-2);transition:color var(--t-micro) var(--e-soft)}
.materias-flecha{grid-column:4;justify-self:end;width:46px;height:46px;flex:none;
  border-radius:50%;display:grid;place-items:center;border:1px solid var(--hairline);
  transition:background-color var(--t-micro) var(--e-soft),border-color var(--t-micro) var(--e-soft),
             transform var(--t-micro) var(--e-soft)}
.materias-flecha svg{width:17px;height:17px;fill:none;stroke:var(--sobre);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--t-micro) var(--e-soft)}
.materias-enlace:hover .materias-flecha{transform:translateX(4px)}

/* Sobre la banda oscura se invierte todo el contexto de la fila: el
   nombre en marfil, la nota en champán y la flecha convertida en el
   disco dorado. */
.materias-activo .materias-area{color:var(--marfil)}
.materias-activo .materias-nota{color:var(--champan)}
.materias-activo .materias-flecha{border-color:transparent;
  background:linear-gradient(140deg,var(--oro),var(--champan))}
.materias-activo .materias-flecha svg{stroke:var(--onix)}

/* Solo se muestra donde el hover no existe: en escritorio sobra. */
.materias-pista{display:none;margin:16px 0 0;width:var(--ancho-materias);margin-inline:auto;
  font-size:12.5px;line-height:1.5;color:var(--sobre-2)}
@media(hover:none){.materias-pista{display:block}}

/* La capa de la tarjeta: no recibe eventos salvo en la tarjeta misma,
   así que pasar el cursor por el aire de las filas sigue funcionando. */
.materias-capa{position:absolute;inset:0;display:grid;align-items:center;pointer-events:none}
.materias-capa-in{width:var(--ancho-materias);margin-inline:auto;
  display:grid;grid-template-columns:var(--col-materias);gap:var(--gap-materias)}
/* Las vistas se apilan en la MISMA celda de grilla (grid-area:1/1) en vez
   de posicionarse absolutas: así la tarjeta mide lo que mide el área más
   larga, no cambia de alto al pasar de una a otra y ninguna descripción
   se corta si mañana crece un párrafo. */
.materias-panel{grid-column:2;pointer-events:auto;display:grid;
  border-radius:var(--radio-l);background:var(--tarjeta);border:1px solid var(--hairline);
  box-shadow:0 30px 70px rgba(var(--tinta-rgb),.20)}
.materias-vista{grid-area:1/1;display:flex;flex-direction:column;
  padding:clamp(26px,2.6vw,34px);opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity var(--t-base) var(--e-out),transform var(--t-base) var(--e-out)}
.materias-vista-activa{opacity:1;transform:none;pointer-events:auto}
.materias-vista .eyebrow{margin-bottom:12px}
.materias-titulo{font-size:clamp(26px,2.6vw,33px);font-weight:var(--peso-titular);
  letter-spacing:-.03em;line-height:1.08;margin:0 0 14px;color:var(--sobre)}
.materias-desc{margin:0 0 22px;font-size:14.5px;line-height:1.65;color:var(--sobre-2)}
.materias-rotulo{margin:0 0 12px;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sobre-2);opacity:.75}
.materias-tags{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-wrap:wrap;gap:7px}
/* Las etiquetas entran escalonadas detrás del texto. El retardo se
   escribe con :nth-child porque la CSP del sitio no admite atributos
   style: ocho posiciones cubren de sobra una lista de cinco a siete. */
.materias-tag{font-size:12px;font-weight:600;line-height:1.2;color:var(--sobre-2);
  border:1px solid var(--hairline);border-radius:999px;padding:7px 13px;
  transition:opacity var(--t-micro) var(--e-out),transform var(--t-micro) var(--e-out)}
/* La entrada escalonada es de la TARJETA de la home, no de la etiqueta:
   fuera de ella —en la página propia de cada área— las etiquetas se ven
   desde el principio. Cuando el arranque invisible vivía en
   `.materias-tag`, las materias de esas páginas no aparecían nunca. */
.materias-vista .materias-tag{opacity:0;transform:translateY(8px)}
.materias-vista-activa .materias-tag{opacity:1;transform:none}
.materias-vista-activa .materias-tag:nth-child(1){transition-delay:90ms}
.materias-vista-activa .materias-tag:nth-child(2){transition-delay:130ms}
.materias-vista-activa .materias-tag:nth-child(3){transition-delay:170ms}
.materias-vista-activa .materias-tag:nth-child(4){transition-delay:210ms}
.materias-vista-activa .materias-tag:nth-child(5){transition-delay:250ms}
.materias-vista-activa .materias-tag:nth-child(6){transition-delay:290ms}
.materias-vista-activa .materias-tag:nth-child(7){transition-delay:330ms}
.materias-vista-activa .materias-tag:nth-child(8){transition-delay:370ms}
.materias-cta{margin-top:auto;font-size:13px;font-weight:600;color:var(--acento);
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  transition:gap var(--t-micro) var(--e-soft)}
.materias-cta:hover{gap:15px}

/* ── Página propia de cada área ───────────────────────────────────
   Las genera scripts/areas.mjs desde data/areas.mjs. Reutilizan el
   encabezado, las secciones y las etiquetas de materias del resto del
   sitio; lo único propio son el rotador de datos y la vista previa de
   las calculadoras. */

/* «¿Sabías que…?»: va bajo el titular, dentro del encabezado oscuro.
   Sin JavaScript los datos se ven todos, uno debajo del otro; el script
   añade .sabias-rotando y recién ahí se apilan y rotan. Un bloque
   invisible esperando un script que no llegó sería peor que una lista. */
.sabias{margin-top:clamp(30px,4vw,44px);padding-top:clamp(24px,3vw,32px);
  border-top:1px solid var(--grafito-2);max-width:72ch}
/* Doble clase a propósito: `.encabezado p` es más específico que una
   clase suelta y le ganaba el tamaño y el color, igual que le pasaba a
   `.eyebrow` unas líneas más abajo. */
.sabias .sabias-t{margin:0 0 16px;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--oro)}
.sabias-lista{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.sabias-item{display:grid;gap:8px}
.sabias .sabias-dato{margin:0;font-family:var(--font-display);
  font-size:clamp(24px,3.2vw,36px);font-weight:var(--peso-titular);
  letter-spacing:-.028em;line-height:1.1;color:var(--champan)}
.sabias .sabias-texto{margin:0;font-size:15px;line-height:1.7;color:var(--humo);max-width:64ch}
/* En las calculadoras el dato no es una cifra corta sino una pregunta
   completa, así que baja un punto la escala tipográfica para que no
   compita con el titular de la página. */
.sabias-preguntas .sabias-dato{font-size:clamp(20px,2.4vw,27px);max-width:32ch}

/* Modo rotación: todos los datos ocupan la misma celda de grilla, así
   el bloque mide lo que mide el más largo y el encabezado no pega un
   salto cada siete segundos. */
.sabias-rotando .sabias-lista{gap:0}
.sabias-rotando .sabias-item{grid-area:1/1;opacity:0;transform:translateY(10px);
  pointer-events:none;
  transition:opacity var(--t-base) var(--e-out),transform var(--t-base) var(--e-out)}
.sabias-rotando .sabias-activo{opacity:1;transform:none;pointer-events:auto}

/* Cuánto falta para el próximo dato. La escala la anima el script con
   la duración que calculó para ese texto. */
.sabias-progreso{display:block;height:2px;margin-top:20px;max-width:260px;
  border-radius:2px;background:var(--oro);opacity:.55;
  transform:scaleX(0);transform-origin:left}
.sabias-nav{display:flex;align-items:center;gap:14px;margin-top:18px}
.sabias-flecha{width:38px;height:38px;flex:none;border-radius:50%;
  border:1px solid var(--grafito-2);background:none;color:var(--humo);
  display:grid;place-items:center;cursor:pointer;font-size:15px;
  transition:border-color var(--t-micro) var(--e-soft),color var(--t-micro) var(--e-soft),
             background-color var(--t-micro) var(--e-soft)}
.sabias-flecha:hover{border-color:var(--oro);color:var(--oro);background:rgba(var(--oro-rgb),.1)}
.sabias-puntos{display:flex;align-items:center;gap:8px}
/* El punto activo no se distingue solo por color: también crece y se
   ensancha, para que no dependa de ver la diferencia de tono. */
.sabias-punto{width:8px;height:8px;padding:0;border:0;border-radius:99px;
  background:var(--grafito-2);cursor:pointer;
  transition:width var(--t-micro) var(--e-soft),background-color var(--t-micro) var(--e-soft)}
.sabias-punto:hover{background:var(--humo)}
.sabias-punto-activo{width:22px;background:var(--oro)}

/* Las materias de la página no son etiquetas encerradas en una caja:
   son filas separadas por una hairline, que entran escalonadas al
   aparecer y se corren al pasar el cursor. */
.materias-lista-area{list-style:none;margin:0;padding:0;max-width:960px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(24px,4vw,56px)}
.materia-fila{display:flex;align-items:baseline;gap:16px;
  padding:clamp(14px,1.8vw,20px) 4px;border-bottom:1px solid var(--hairline);
  transition:transform var(--t-micro) var(--e-soft)}
.materia-fila:hover{transform:translateX(8px)}
.materia-nombre{font-family:var(--font-display);
  font-size:clamp(19px,2.1vw,26px);font-weight:var(--peso-titular);
  letter-spacing:-.022em;line-height:1.2;color:var(--sobre)}
/* El guion dorado crece desde la derecha: es el mismo gesto que usa la
   fila activa de la home, en chico. */
.materia-guion{flex:1;height:1px;min-width:0;background:var(--acento);
  transform:scaleX(0);transform-origin:right;align-self:center;
  transition:transform var(--t-micro) var(--e-soft)}
.materia-fila:hover .materia-guion{transform:scaleX(1)}
.area-pie{margin:clamp(30px,4vw,44px) 0 0}
/* El enlace a la página completa desde el índice de áreas. */
.area-pie-enlace{margin:22px 0 0}
.prosa .area-enlace{text-decoration:none}

/* ── Vista previa viva de las calculadoras ────────────────────────
   No es una captura: es la misma tarjeta de resultado del sitio, en
   chico, que se va llenando sola. Sin JavaScript queda quieta y
   completa; con él se enciende .demo-animada y los datos entran de a
   uno. Por eso los estados iniciales cuelgan de esa clase y no del
   elemento: lo que no se anima, se ve. */
.demo{max-width:760px}
.demo-marco{border-radius:var(--radio);overflow:hidden;
  border:1px solid var(--grafito-2);background:var(--onix);
  box-shadow:0 24px 60px rgba(0,0,0,.35)}
.demo-barra{display:flex;gap:6px;padding:12px 16px;background:var(--grafito-2)}
.demo-barra span{width:9px;height:9px;border-radius:50%;background:rgba(var(--oro-rgb),.35)}
.demo-barra span:first-child{background:rgba(var(--oro-rgb),.7)}
.demo-cuerpo{display:grid;padding:clamp(22px,3vw,32px)}
/* Las pantallas se apilan en la misma celda: el marco mide lo que mide
   la más alta y no pega saltos al cambiar de calculadora. */
.demo-pantalla{grid-area:1/1;display:flex;flex-direction:column}
.demo-animada .demo-pantalla{opacity:0;pointer-events:none;
  transition:opacity var(--t-base) var(--e-out)}
.demo-animada .demo-activa{opacity:1;pointer-events:auto}
.demo-nombre{margin:0 0 6px;font-family:var(--font-display);font-size:19px;
  font-weight:var(--peso-titular);letter-spacing:-.018em;color:var(--marfil)}
.demo-resumen{margin:0 0 22px;font-size:13px;line-height:1.6;color:var(--humo)}
.demo-pasos{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:1px;
  border-top:1px solid var(--grafito-2)}
.demo-paso{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:13px 2px;border-bottom:1px solid var(--grafito-2);font-size:13.5px}
/* Nada arranca invisible del todo: las filas se ven desde el principio,
   apagadas, y lo que aparece es el VALOR de cada una. Así el marco
   parece un formulario llenándose y no una caja vacía esperando algo.
   Con las filas ocultas, la mitad del ciclo el recuadro se veía hueco. */
.demo-animada .demo-paso{opacity:.42;
  transition:opacity var(--t-base) var(--e-out)}
.demo-animada .demo-paso-visible{opacity:1}
.demo-campo{color:var(--humo)}
.demo-valor{color:var(--marfil);font-weight:600;text-align:right;
  font-variant-numeric:tabular-nums}
.demo-animada .demo-valor{opacity:0;transform:translateY(4px);
  transition:opacity var(--t-base) var(--e-out),transform var(--t-base) var(--e-out)}
.demo-animada .demo-paso-visible .demo-valor{opacity:1;transform:none}
.demo-resultado{padding:20px 22px;border-radius:var(--radio-s);
  border:1px solid rgba(var(--oro-rgb),.28);
  background:linear-gradient(180deg,rgba(var(--oro-rgb),.08),transparent)}
/* El recuadro del resultado también está desde el principio: se ve el
   contorno esperando la cifra, como cuando una calculadora está por
   responder. */
.demo-animada .demo-resultado{opacity:.3;
  transition:opacity var(--t-base) var(--e-out)}
.demo-animada .demo-resultado-visible{opacity:1}
.demo-animada .demo-cifra,.demo-animada .demo-caso{opacity:0;transform:translateY(8px);
  transition:opacity var(--t-base) var(--e-out),transform var(--t-base) var(--e-out)}
.demo-animada .demo-resultado-visible .demo-cifra,
.demo-animada .demo-resultado-visible .demo-caso{opacity:1;transform:none}
.demo-rotulo{margin:0 0 8px;font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--humo)}
.demo-cifra{margin:0 0 10px;font-family:var(--font-display);
  font-size:clamp(30px,4vw,42px);font-weight:var(--peso-titular);
  letter-spacing:-.03em;line-height:1;color:var(--champan)}
.demo-caso{margin:0;font-size:11.5px;line-height:1.55;color:var(--piedra)}
.demo-cta{margin-top:22px;align-self:flex-start}
/* Los botones para elegir calculadora: solo aparecen con JavaScript y
   cuando hay más de una. */
.demo-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.demo-tab{border:1px solid var(--grafito-2);background:none;color:var(--humo);
  border-radius:999px;padding:9px 16px;font-size:12.5px;font-weight:600;cursor:pointer;
  transition:border-color var(--t-micro) var(--e-soft),color var(--t-micro) var(--e-soft),
             background-color var(--t-micro) var(--e-soft)}
.demo-tab:hover{color:var(--marfil);border-color:rgba(var(--oro-rgb),.5)}
.demo-tab-activa{color:var(--onix);background:var(--oro);border-color:transparent}
.demo-nota{margin:22px 0 0;font-size:11.5px;line-height:1.6;color:var(--piedra);max-width:70ch}

/* ── Salida hacia otras áreas ─────────────────────────────────────── */
.otras-areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.otra-area{display:flex;flex-direction:column;gap:6px;padding:22px 24px;
  border-radius:var(--radio);background:var(--tarjeta);border:1px solid var(--hairline);
  transition:transform var(--t-micro) var(--e-soft),border-color var(--t-micro) var(--e-soft)}
.otra-area:hover{transform:translateY(-3px);border-color:var(--acento)}
.otra-area-t{font-family:var(--font-display);font-size:20px;font-weight:var(--peso-titular);
  letter-spacing:-.02em;color:var(--sobre)}
.otra-area-n{font-size:12.5px;line-height:1.5;color:var(--sobre-2)}
.otra-area-todas{background:transparent;border-style:dashed}

/* ============================================================
   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}
/* Los dos accesos privados van agrupados: con `space-between` y tres
   hijos sueltos, el enlace del portal quedaría flotando al medio de la
   línea, leyéndose como parte del aviso legal. */
.pie-accesos{display:flex;flex-wrap:wrap;align-items:center;gap:18px}

/* ============================================================
   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)}

  /* Por debajo de este ancho ya no cabe la tarjeta flotante sin apretar
     los rótulos: la fila se queda con el nombre y la flecha, la nota
     baja a una segunda línea y la tarjeta deja de flotar para apilarse
     bajo la lista, mostrando solo el área activa. */
  .materias-fila-in{grid-template-columns:minmax(0,1fr) 42px;gap:14px;
    padding:18px 0}
  .materias-area{grid-column:1;grid-row:1;font-size:clamp(21px,4.6vw,30px)}
  .materias-nota{grid-column:1;grid-row:2;text-align:left;margin-top:6px}
  .materias-flecha{grid-column:2;grid-row:1/3;width:42px;height:42px}
  .materias-capa{position:static;display:block;margin-top:22px}
  .sabias .sabias-dato{font-size:clamp(22px,5.4vw,28px)}
  .materias-lista-area{grid-template-columns:1fr}
  .demo-paso{flex-direction:column;gap:4px;align-items:flex-start}
  .demo-valor{text-align:left}
  .materias-capa-in{display:block}
  .materias-panel{box-shadow:none}
  .materias-vista{display:none}
  .materias-vista-activa{display:flex}
}
@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,
  .proposito-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}
}

/* Sin JavaScript no hay quien agregue .reveal-visible, así que todo lo
   que entra con scroll —incluido el titular y los botones del hero— se
   quedaría en opacidad 0. No es una hipótesis remota: basta con un
   bloqueador que corte el script o con que la descarga falle.

   `scripting: none` es la forma de detectarlo desde CSS. Tiene que ser
   desde CSS: la CSP del sitio no permite scripts en línea, así que no
   hay manera de marcar el <html> antes del primer pintado. Un navegador
   que no entienda la consulta simplemente se comporta como hasta ahora.

   Va antes del bloque de movimiento reducido a propósito: son dos
   situaciones distintas y las dos terminan en el mismo estado final. */
@media (scripting: none){
  .reveal{opacity:1;transform:none;transition:none}
}

/* Movimiento reducido: sin transiciones ni parallax, estado final directo. */
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}

  /* El hero deja de ser un video y pasa a ser el fotograma fijo. No se
     "ralentiza" el video: se retira. Debajo ya está el <img> del
     fotograma, con el mismo encuadre. */
  .hero-video-media{display:none}
  .hero-video-pausa{display:none}
  .hero-bajar-ico svg{animation:none}

  /* El degradado de marca se queda quieto: sigue siendo el mismo
     degradado, sin desplazamiento. */
  .aurora-mancha{animation:none}
  .valor::before{animation:none}
  .valor{transition:none}

  /* Sin rotación queda a la vista la primera palabra, y la frase se
     lee entera igual: «…ayudamos a personas». */
  .rotador-palabra{animation:none}
  .rotador-palabra:first-child{opacity:1}

  .mega-animado,.drawer-animado,.drawer-fondo-animado,
  .indice-vista,.indice-btn,.indice-flecha,.area,
  .materias-vista,.materias-fondo,.materias-area,.materias-nota,
  .materias-flecha,.materias-flecha svg,.materias-tag,
  .materias-cta,.materias-fila,.sabias-item,.sabias-punto,.sabias-flecha,
  .sabias-progreso,.materia-fila,.materia-guion,
  .demo-pantalla,.demo-paso,.demo-valor,.demo-resultado,.demo-cifra,.demo-caso,
  .demo-tab,.otra-area{transition:none!important}
  /* Sin animación no hay nada que anunciar: la barra de progreso sobra. */
  .sabias-progreso{display:none}
  .materias-fondo{transform:none}
  .mega-animado{opacity:1;transform:translateX(-50%)}
  .drawer-animado{transform:none}
  .drawer-fondo-animado{opacity:1}
}

/* Enlace a la política de privacidad, dentro de la línea de copyright.
   Va con el mismo peso visual que el resto de esa línea: es un enlace
   obligatorio, no una llamada a la acción. */
.pie-legal-enlace{color:inherit;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(var(--marfil-rgb),.3);margin-left:6px}
.pie-legal-enlace:hover{color:var(--marfil);text-decoration-color:currentColor}

/* ============================================================
   14 · Planes y tarifa (/planes/)
   ------------------------------------------------------------
   La página la genera scripts/planes-pagina.mjs desde el catálogo
   de netlify/functions/lib/planes.mjs, así que estas clases se
   aplican a un marcado que nadie escribe a mano.

   Las cuatro variables locales de cada tarjeta —fondo, borde, texto
   y acento— son el mismo recurso que usa el banner del portal
   (portal.css): un tema por plan, declarado una vez, y todo lo de
   adentro leyéndolas. Es lo que evita el resultado al que se llega
   solo: cuatro copias de las mismas reglas donde el quinto plan
   hereda el color equivocado en el único sitio que alguien olvidó
   duplicar.
   ============================================================ */
.planes{display:grid;gap:18px;
  /* 300px y no menos: con seis planes, una columna más estrecha da
     cuatro columnas y deja la segunda fila con dos tarjetas sueltas.
     Así son tres y tres, que además es como se agrupan de verdad —los
     de entrada arriba, los de empresa abajo—. */
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  align-items:stretch}

.plan{--pl-fondo:var(--superficie);--pl-borde:var(--linea);--pl-linea:var(--linea);
  --pl-texto:var(--marfil);--pl-tenue:var(--humo);--pl-acento:var(--oro);
  display:flex;flex-direction:column;gap:10px;
  padding:26px 24px 24px;border-radius:var(--radio);
  background:var(--pl-fondo);border:1px solid var(--pl-borde);
  color:var(--pl-texto)}

/* Los temas. Son DOS, y los declara el catálogo (lib/planes.mjs).
   'onix' es el de arriba —el de los cinco planes de lista— y por eso
   vive en la regla base y no en una clase aparte: escribirlo dos veces
   sería tener dos sitios donde cambiar el mismo color.

   Que los cinco se vean iguales es deliberado: lo que los distingue es
   lo que incluyen y cuánto valen, no el color. El dorado queda para
   Enterprise, que es el único sin precio de lista y el único que hay
   que distinguir a primera vista. */
.plan-oro{--pl-fondo:linear-gradient(135deg,var(--champan),var(--oro) 55%,var(--bronce));
  --pl-borde:transparent;--pl-linea:rgba(var(--onix-rgb),.22);
  --pl-texto:var(--onix);--pl-tenue:rgba(var(--onix-rgb),.72);
  --pl-acento:var(--onix)}

.plan-nombre{font-family:var(--font-display);font-size:1.35rem;
  font-weight:var(--peso-titular);letter-spacing:-.01em}
/* La descripción va DEBAJO del precio, y es ella la que abre el cuerpo
   de la tarjeta: por eso el filo separador vive aquí y no sobre el
   precio, que ahora viene pegado al nombre del plan. */
.plan-para{color:var(--pl-tenue);font-size:.9rem;line-height:1.5;
  margin-top:6px;padding-top:14px;border-top:1px solid var(--pl-linea)}

.plan-precio{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px;
  margin-top:10px}
.plan-desde,.plan-periodo{font-size:.85rem;color:var(--pl-tenue)}
.plan-monto{font-family:var(--font-display);font-size:2rem;
  font-weight:var(--peso-titular);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.plan-anual{font-size:.85rem;color:var(--pl-tenue);line-height:1.45;
  font-variant-numeric:tabular-nums;margin-top:2px}
.plan-ahorro{color:var(--pl-acento);font-weight:600;white-space:nowrap}

.plan-incluye{list-style:none;margin:4px 0 0;padding:0;
  display:flex;flex-direction:column;gap:8px;flex:1}
.plan-incluye li{position:relative;padding-left:20px;font-size:.9rem;line-height:1.5}
/* La marca de verificación es un pseudo-elemento y no un SVG por lista:
   son cuatro por tarjeta y seis tarjetas, y el marcado generado queda
   ilegible por 24 iconos idénticos. */
.plan-incluye li::before{content:"";position:absolute;left:2px;top:.52em;
  width:9px;height:5px;border-left:1.5px solid var(--pl-acento);
  border-bottom:1.5px solid var(--pl-acento);transform:rotate(-45deg)}

.plan-dotacion,.plan-extra{font-size:.8rem;color:var(--pl-tenue);line-height:1.5;
  margin-top:2px}
.plan-extra{padding-top:10px;border-top:1px solid var(--pl-linea)}
.plan-dto{color:var(--pl-acento);font-weight:600;white-space:nowrap}
/* Que el sobrecargo no lleve IVA no es un matiz: lo presta otra
   sociedad. Va junto a la cifra, no en la leyenda del final. */
.plan-exento{display:inline-block;margin-top:4px;font-size:.74rem;
  letter-spacing:.02em;color:var(--pl-tenue);opacity:.85}

.plan-cta{margin-top:8px}
/* Sobre el degradado dorado el botón primario del sitio no contrasta:
   se invierte para que siga siendo el elemento más visible de la
   tarjeta y no el menos. */
.plan-oro .plan-cta{background:var(--onix);border-color:var(--onix);color:var(--marfil)}
.plan-oro .plan-cta:hover{background:var(--grafito);border-color:var(--grafito)}

.planes-iva{margin-top:20px;font-size:.82rem;color:var(--humo);
  line-height:1.55;max-width:68ch}

.tarifa{margin:0 auto 22px;max-width:560px;
  border:1px solid var(--niebla);border-radius:var(--radio)}
.tarifa-fila{display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;padding:15px 20px;border-bottom:1px solid var(--niebla)}
.tarifa-fila:last-child{border-bottom:0}
.tarifa-que{color:var(--tinta)}
.tarifa-cuanto{font-family:var(--font-display);font-size:1.15rem;
  font-weight:var(--peso-titular);color:var(--bronce);
  font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
/* Una sola columna de cifras: estos honorarios los presta la sociedad
   de profesionales y no llevan IVA, así que no hay un segundo número
   que mostrar. La nota de abajo lo dice con todas sus letras. */
.tarifa-nota{max-width:560px;margin:0 auto 34px;font-size:.82rem;
  color:var(--piedra);line-height:1.55;text-align:center}
  font-variant-numeric:tabular-nums;line-height:1.4}