/* =============================================================
   base.css — ESTRUCTURA y TIPOGRAFIA compartidas por todo el sitio.

   Regla de oro de este archivo: NO define ni un solo color propio.
   Todo color sale de una variable (var(--algo)) que define el archivo
   de tema de cada pagina. Asi la pagina principal puede ser terracota,
   Nua verde, y Nivara otra cosa, sin tocar ni una linea de aqui.

   La tipografia SI es igual en todas las paginas: es lo que amarra
   que se sientan del mismo autor aunque cambie el color.
   ============================================================= */

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px}
body{
  margin:0;background-color:var(--papel);color:var(--tinta);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.55;font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Bricolage Grotesque",Inter,sans-serif;font-weight:700;letter-spacing:-.025em;margin:0}
h1{font-size:clamp(2.4rem,6.4vw,4.1rem);line-height:1.01}
h2{font-size:clamp(1.7rem,3.4vw,2.45rem);line-height:1.1}
h3{font-size:1.24rem;line-height:1.24;letter-spacing:-.018em}
h4{font-size:1.02rem;letter-spacing:-.012em}
p{margin:0 0 1em;max-width:64ch}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
/* height:auto es clave: si el HTML trae width/height (que sirven para que el
   navegador reserve el espacio y la pagina no brinque al cargar), esos valores
   ganarian sobre aspect-ratio y deformarian la foto. */
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:3px}

/* --- Layout --------------------------------------------------- */
.wrap{max-width:var(--ancho);margin:0 auto;padding:0 20px}
.seccion{padding-top:clamp(52px,7vw,86px);padding-bottom:clamp(52px,7vw,86px)}
/* Ojo: aqui solo se toca el padding vertical. Si escribieramos
   "padding: 60px 0" borrariamos el padding lateral que pone .wrap
   (misma especificidad, y .seccion va despues), y en celular el
   contenido quedaria pegado a los bordes de la pantalla. */
.linea-arriba{border-top:1px solid var(--linea)}
.cabeza{margin-bottom:34px;max-width:66ch}
.cabeza p{margin-top:12px;color:var(--suave)}
.eyebrow{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--acento);margin:0 0 12px}

/* Corte diagonal entre bandas de color */
.diag{clip-path:polygon(0 3vw,100% 0,100% 100%,0 100%);margin-top:-3vw;padding-top:3vw;position:relative;z-index:1}
.diag-i{clip-path:polygon(0 0,100% 3vw,100% 100%,0 100%);margin-top:-3vw;padding-top:3vw;position:relative;z-index:1}

/* --- Header --------------------------------------------------- */
/* "body > header" y no "header" a secas: el selector suelto tambien le pega
   a cualquier <header> anidado (por ejemplo el de una ficha del buscador) y
   le mete fondo y position:sticky. El ">" lo limita al header del sitio. */
body > header{position:sticky;top:0;z-index:40;background:var(--papel-translucido);
  backdrop-filter:saturate(1.3) blur(12px);border-bottom:1px solid var(--linea)}
.barra{max-width:var(--ancho);margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:18px}
.asesor{display:flex;align-items:center;gap:11px;min-width:0}
.retrato{width:42px;height:42px;border-radius:50%;overflow:hidden;flex:none;box-shadow:0 0 0 1px var(--linea)}
.retrato img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.asesor b{display:block;font-size:.95rem;line-height:1.2;letter-spacing:-.01em}
.asesor span{display:block;font-size:.76rem;color:var(--suave);line-height:1.25}
.nav{margin-left:auto;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{padding:8px 11px;border-radius:9px;font-size:.88rem;font-weight:500;color:var(--suave);white-space:nowrap}
.nav a:hover{background:var(--superficie);color:var(--tinta)}
@media (max-width:900px){.nav{display:none}}

/* Enlace de regreso de las subpáginas. En celular el texto largo
   ("Todos los desarrollos") rompía el encabezado en dos líneas y
   empujaba el botón de WhatsApp fuera de la pantalla. */
.volver{display:inline-flex;align-items:center;gap:7px;font-size:.87rem;font-weight:600;color:var(--suave);flex:none}
.volver:hover{color:var(--marca)}
.volver svg{width:15px;height:15px;fill:currentColor;flex:none}
.volver-corto{display:none}
@media (max-width:700px){
  .volver-largo{display:none}
  .volver-corto{display:inline}
}

/* --- Botones -------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:12px 18px;border-radius:12px;
  font-weight:600;font-size:.94rem;border:1px solid transparent;transition:transform .15s, box-shadow .15s, background .15s}
.btn:hover{transform:translateY(-1px)}
.btn svg{width:18px;height:18px;fill:currentColor;flex:none}
.btn-marca{background:var(--marca);color:var(--marca-txt);box-shadow:var(--sombra-marca)}
.btn-marca:hover{background:var(--marca-fuerte)}
.btn-linea{border-color:var(--linea-fuerte);background:transparent;color:var(--tinta)}
.btn-linea:hover{background:var(--superficie)}
header .btn-marca{margin-left:6px;padding:9px 14px;font-size:.88rem}
@media (max-width:900px){header .btn-marca{margin-left:0}}
.flota{position:fixed;right:16px;bottom:16px;z-index:50;box-shadow:0 12px 30px -10px rgba(0,0,0,.45);
  transition:opacity .25s ease, transform .25s ease}
.flota-oculta{opacity:0;transform:translateY(14px);pointer-events:none}
/* El avatar no se esconde al principio: antes el botón tapaba contenido
   y por eso aparecía al 65% del scroll, pero un avatar de 58px en la
   esquina no molesta y sí da un punto de contacto siempre disponible. */
.flota-avatar.flota-oculta{opacity:1;transform:none;pointer-events:auto}
@media (min-width:901px){.flota{display:none}}

/* --- Piezas reutilizables ------------------------------------- */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0}
.chips li{font-size:.8rem;font-weight:600;padding:5px 11px;border-radius:999px;
  background:var(--chip-fondo);color:var(--chip-txt);border:1px solid var(--chip-linea)}
.estado{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;
  letter-spacing:.02em;padding:5px 11px;border-radius:999px;background:var(--estado-fondo);color:var(--estado-txt)}
.estado::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.dato{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid var(--linea);font-size:.92rem}
.dato span{color:var(--suave)}
.dato b{font-weight:700;text-align:right}
.aclara{font-size:.85rem;color:var(--suave);max-width:62ch}
.porconf{font-size:.78rem;font-weight:600;color:var(--suave);font-style:italic}

/* --- Footer --------------------------------------------------- */
footer{background:var(--pie-fondo);color:var(--pie-txt);padding:46px 0 34px}
.pie{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--pie-linea)}
.pie-datos{display:flex;flex-direction:column;line-height:1.45}
.pie-datos b{font-size:1.05rem}
.pie-datos a{color:var(--pie-suave);font-size:.92rem}
.pie-datos a:hover{color:var(--pie-acento)}
.pie .btn-marca{margin-left:auto}
.legal{margin:20px 0 0;font-size:.76rem;line-height:1.55;color:var(--pie-suave);max-width:none}
.pie-links{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px;font-size:.88rem}
.pie-links a{color:var(--pie-suave)}
.pie-links a:hover{color:var(--pie-acento)}

/* --- Área de toque en celular -------------------------------- */
/* Un enlace de texto mide ~20px de alto; el dedo necesita 44. En celular
   se les da padding vertical para que se puedan tocar sin fallar. */
@media (max-width:700px){
  /* En celular el cargo hacía que el encabezado creciera a cuatro líneas.
     Se queda sólo el nombre, en una línea, y el cargo se lee en la
     portada de todos modos. */
  .asesor span{display:none}
  .asesor b{white-space:nowrap}
  .barra{gap:10px;padding:9px 16px}

  /* En celular el encabezado no alcanza para nombre + chapa + tema +
     WhatsApp: se salía de la pantalla. El botón de WhatsApp del header
     desaparece porque el avatar flotante ya hace ese trabajo y está más
     al alcance del pulgar. Queda nombre, chapa y el interruptor de tema. */
  body > header .btn-marca{display:none}
  .retrato{width:36px;height:36px}
  header .btn-marca{padding:9px 13px;font-size:.84rem}
  .pie-links{gap:4px 16px}
  .pie-links a{padding:9px 0}
  .pie-datos a{padding:7px 0}
  .nav a{padding:12px 11px}
  .volver{padding:8px 0}
}

/* --- Animacion de entrada ------------------------------------- */
/* Por que ".js .reveal" y no ".reveal" a secas:
   si el JavaScript falla (red lenta, bloqueador, error), un ".reveal{opacity:0}"
   dejaria el contenido invisible PARA SIEMPRE. Con esta version, el contenido
   nace visible y solo se esconde cuando el JS ya confirmo que puede animarlo. */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease, transform .5s ease}
.js .reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .btn:hover{transform:none}
}

/* --- Menú de secciones para móvil ------------------------------
   En pantallas chicas el menú del header no cabe, así que se mueve abajo,
   al alcance del pulgar. Es un carrusel horizontal: los botones se
   desplazan solos para que el de la seccion actual quede siempre a la
   vista, y una barra deslizante marca dónde estás.
   Las medidas usan env(safe-area-inset-bottom) porque en los iPhone con
   barra de gestos, 0 no es el borde util de la pantalla. */

.navmov{display:none}

@media (max-width:900px){
  .navmov{
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:60;
    /* Oculto durante el pórtico: mientras se ven los logos y las fotos, un
       menú abajo compite con la escena. Aparece junto con la tarjeta del
       asesor, que es cuando ya hay secciones a las que ir. */
    transform:translateY(105%); opacity:0;
    transition:transform .38s cubic-bezier(.4,0,.2,1), opacity .3s ease;
    pointer-events:none;
    background:var(--papel-translucido);
    backdrop-filter:saturate(1.3) blur(14px);
    border-top:1px solid var(--linea);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .navmov.se-ve{transform:none;opacity:1;pointer-events:auto}

  /* Flechas en los extremos. Antes había sólo un degradado y no se
     entendía que el menú se podía desplazar: un degradado se lee como
     decoración, una flecha se lee como instrucción. Cada una aparece
     nada más cuando hay algo hacia ese lado. */
  .navmov-flecha{
    position:absolute; top:0; bottom:0; width:34px; z-index:3;
    display:grid; place-items:center;
    color:var(--acento); background:var(--papel);
    opacity:0; pointer-events:none;
    transition:opacity .2s ease;
  }
  .navmov-flecha svg{width:17px;height:17px;fill:currentColor}
  .navmov-flecha.se-ve{opacity:1;pointer-events:auto}
  .navmov-izq{left:0;  box-shadow:10px 0 12px -6px var(--papel)}
  .navmov-der{right:0; box-shadow:-10px 0 12px -6px var(--papel)}
  .navmov-flecha:active{background:var(--superficie)}

  .navmov-pista{
    position:relative; display:flex; gap:2px;
    overflow-x:auto; scrollbar-width:none;
    scroll-behavior:smooth;
    padding:10px 30px 7px;
    -webkit-overflow-scrolling:touch;
  }
  .navmov-pista::-webkit-scrollbar{display:none}

  .navmov-b{
    flex:none; display:flex; flex-direction:column; align-items:center; gap:3px;
    min-width:66px; padding:6px 10px 5px; border-radius:12px;
    font-size:.68rem; font-weight:600; letter-spacing:-.005em;
    color:var(--suave); white-space:nowrap;
    transition:color .18s ease, background .18s ease;
  }
  .navmov-b svg{width:21px;height:21px;fill:currentColor;opacity:.75;transition:opacity .18s ease}
  .navmov-b.activo{color:var(--acento)}
  .navmov-b.activo svg{opacity:1}
  .navmov-b:active{background:var(--superficie)}

  /* La barra que marca la sección actual. Va arriba y no abajo: en los
     iPhone con barra de gestos, el borde inferior es zona del sistema y ahí
     se perdería. Se mueve con transform (no con left) para que el navegador
     la anime sin recalcular el layout. */
  .navmov-barra{
    position:absolute; top:0; left:0; height:3px; width:0;
    border-radius:0 0 3px 3px; background:var(--marca);
    transform:translateX(0);
    transition:transform .28s cubic-bezier(.4,0,.2,1), width .28s cubic-bezier(.4,0,.2,1);
    pointer-events:none;
  }
  .js .navmov-barra{opacity:1}

  /* El contenido necesita aire abajo para que el menú no tape el pie.
     El menú mide 70px; se reservan 78 para que quede un respiro visible. */
  body.dock-visible{padding-bottom:calc(78px + env(safe-area-inset-bottom))}

  /* El botón flotante de WhatsApp se sube por encima del menú. */
  .flota{bottom:16px; transition:bottom .38s cubic-bezier(.4,0,.2,1)}
  body.dock-visible .flota{bottom:calc(82px + env(safe-area-inset-bottom))}

  /* Al saltar a una sección, que el título no quede debajo del header pegajoso. */
  [id]{scroll-margin-top:72px}
}

/* --- Chapa "Asesor" del encabezado -----------------------------
   Gira sobre su eje vertical como una moneda. La animación dura 7s pero
   el 72% de ese tiempo está quieta: así llama la atención una vez cada
   tantos segundos en lugar de estar moviéndose siempre, que marea.
   Se usa <em> y no <span> porque en móvil hay una regla que esconde los
   <span> del bloque del asesor. */
.chapa{display:inline-block;margin-left:8px;perspective:420px;
  /* Sube 2px: alineada al medio del renglón quedaba casi encimada
     con el cargo de la línea de abajo. */
  vertical-align:middle;position:relative;top:-2px}
.chapa i{
  font-style:normal; display:inline-block;
  padding:3px 9px 3px 10px; border-radius:999px;
  font-size:.56rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
  color:var(--chapa-txt); background:var(--chapa-fondo);
  box-shadow:var(--chapa-sombra);
  transform-style:preserve-3d;
  animation:chapa-gira 7s cubic-bezier(.45,.05,.25,1) 1.4s infinite;
}
@keyframes chapa-gira{
  0%,72%{transform:rotateY(0deg)}
  100%{transform:rotateY(360deg)}
}
@media (hover:hover){
  .chapa:hover i{animation:chapa-gira 1.3s cubic-bezier(.45,.05,.25,1) 0s infinite}
}
@media (prefers-reduced-motion:reduce){
  .chapa i{animation:none}
}
@media (max-width:900px){
  .chapa{margin-left:6px}
  .chapa i{font-size:.5rem;padding:2px 7px 2px 8px;letter-spacing:.12em}
}

/* --- Tarjetas: se levantan al apuntarles -----------------------
   Sólo donde hay cursor. En pantalla táctil el :hover se queda pegado
   tras el toque y la tarjeta se ve elevada sin motivo. */
@media (hover:hover){
  .ficha:hover,.zona:hover,.tarjeta:hover{
    transform:translateY(-4px);
    box-shadow:var(--elev-2),var(--filo);
  }
}

/* --- Botón flotante: el avatar del asesor ----------------------
   Antes era una píldora que decía "Preguntar". Una cara reconocible
   invita más a escribir que un botón con texto, y ocupa menos pantalla. */
.flota-avatar{
  display:grid; place-items:center;
  width:58px; height:58px; padding:0; border-radius:50%;
  background:var(--papel); box-shadow:var(--elev-2);
  position:fixed; right:16px; z-index:50;
}
.flota-avatar img{
  width:52px; height:52px; border-radius:50%; object-fit:cover; object-position:50% 22%;
  display:block;
}
/* El glifo de WhatsApp encima del hombro: sin él, un avatar suelto no
   dice para qué sirve. */
.flota-glifo{
  position:absolute; right:-2px; bottom:-2px;
  width:24px; height:24px; border-radius:50%;
  background:var(--marca); color:var(--marca-txt);
  display:grid; place-items:center;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.flota-glifo svg{width:14px;height:14px;fill:currentColor;display:block}
/* Aro que late una vez cada tanto, para que el ojo lo encuentre. */
.flota-pulso{
  position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 0 var(--marca);
  animation:flota-late 3.4s ease-out 2s infinite;
  pointer-events:none;
}
@keyframes flota-late{
  0%{box-shadow:0 0 0 0 rgba(var(--pulso),.5)}
  55%,100%{box-shadow:0 0 0 16px rgba(var(--pulso),0)}
}
@media (prefers-reduced-motion:reduce){.flota-pulso{animation:none}}
@media (hover:hover){
  .flota-avatar:hover{transform:translateY(-3px)}
}

/* --- PÓRTICO: los tres desarrollos con scroll ------------------
   El riel mide varias pantallas de alto. Dentro, un panel pegado
   (sticky) se queda quieto mientras el riel pasa: así el scroll
   avanza la animación en lugar de mover la escena.
   El JS sólo publica tres números —--p0, --p1, --p2, de 0 a 1— y
   toda la animación se resuelve aquí con esos valores. */

.portico{position:relative}
.portico-riel{height:240vh}
.portico-fijo{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; place-items:center;
  background:var(--papel);
}

/* --- los tres paneles verticales --- */
.portico-paneles{
  position:absolute; inset:0; z-index:1;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:transparent;
}
.pan{position:relative; overflow:hidden; background:transparent}
.pan + .pan{box-shadow:-1px 0 0 var(--linea)}

/* Textura del pórtico: una imagen, no un filtro en vivo.

   Antes eran dos capas de ruido fractal de ocho octavas calculadas por el
   navegador con filtros SVG. Tres problemas: se trababa al scrollear
   porque el navegador las rasterizaba de nuevo cada vez que algo cambiaba;
   al ir semitransparentes dejaban ver el fondo claro de abajo y eso se
   veía como niebla gris; y el filtro dejaba una banda plana en su borde
   superior, el espacio gris debajo del encabezado.

   La textura se genera una sola vez con herramientas/textura_hero.py y se
   sirve como imagen. El navegador sólo pinta un fondo: cero costo. */
.portico-tex{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url('/assets/img/hero/textura-chica.jpg');
  background-size:cover; background-position:center;
}
@media (min-width:701px){
  .portico-tex{background-image:url('/assets/img/hero/textura.jpg')}
}

/* La foto sube desde abajo tapando el logo. clip-path es lo que se anima:
   el navegador lo hace en la tarjeta gráfica, sin recalcular el layout. */
.pan-foto{
  position:absolute; inset:0; z-index:1;
  background-image:var(--foto-chica);
  background-size:cover; background-position:center;
  clip-path:inset(calc(100% - var(--sube,0) * 100%) 0 0 0);
  transform:scale(calc(1 + (1 - var(--sube,0)) * .06));
  transition:none;
}
@media (min-width:601px){ .pan-foto{background-image:var(--foto)} }

/* Velo sobre la foto: el logo es blanco y los nombres son claros, y sobre
   un cielo brillante no se leerían. Entra junto con la foto (--sube) para
   que en el primer acto, cuando el panel está oscuro, no oscurezca nada. */
.pan-foto::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(12,9,7,.10) 0%, rgba(12,9,7,.46) 42%,
    rgba(12,9,7,.62) 74%, rgba(12,9,7,.80) 100%);
  opacity:var(--sube,0);
}

.pan-logo{
  position:absolute; left:50%; top:50%; z-index:2;
  width:var(--logo-ancho,62%); height:auto;
  transform:translate(-50%,-50%);
  /* El SVG va dentro de un <img>, así que no hereda color: el filtro
     lo deja blanco. Sin sombra difusa: en un trazo vectorial nítido
     sólo lo ensuciaba. */
  filter:brightness(0) invert(1);
  /* Los logos entran SOLOS al cargar, no con el scroll: son lo primero
     que ve quien llega. Escalonados 0.28s para que se lean en orden
     —NUA, SEDE, Nivara— en vez de aparecer los tres de golpe. */
  opacity:0;
  animation:pan-entra 1.1s cubic-bezier(.22,.9,.24,1) both;
}
.pan[data-pan="0"] .pan-logo{--logo-ancho:46%; animation-delay:.25s}
.pan[data-pan="1"] .pan-logo{animation-delay:.53s}
.pan[data-pan="2"] .pan-logo{animation-delay:.81s}
@keyframes pan-entra{
  from{opacity:0; transform:translate(-50%,-50%) translateY(30px) scale(.93)}
  to  {opacity:1; transform:translate(-50%,-50%) translateY(0) scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .pan-logo{animation-duration:.01s;animation-delay:0s}
}

/* Los nombres bajo los logos, en el acto 2 */
.portico-nombres{
  z-index:2;
  position:absolute; left:0; right:0; bottom:6vh; margin:0;
  width:100%; justify-self:stretch; align-self:end;
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  text-align:center; pointer-events:none;
  font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
}
.portico-nombres span{
  /* Crema fijo, no el token: estos nombres siempre caen sobre una foto
     oscurecida, nunca sobre el fondo de la página. */
  color:#F2EAE0;
  text-shadow:0 1px 10px rgba(12,9,7,.7);
  opacity:var(--nombres,0);
  transform:translateY(calc((1 - var(--nombres,0)) * 10px));
}

/* --- el contenido, sobre un panel sólido --- */
.portico-contenido{
  position:relative; z-index:3;
  width:min(var(--ancho), calc(100% - 40px));
  background:var(--papel-translucido);
  backdrop-filter:saturate(1.2) blur(14px);
  border:1px solid var(--linea);
  border-radius:18px;
  box-shadow:var(--elev-2),var(--filo);
  padding:clamp(20px,3vw,34px);
  max-height:84svh; overflow:auto;
  opacity:var(--contenido,0);
  transform:translateY(calc((1 - var(--contenido,0)) * 34px));
  pointer-events:var(--contenido-click,none);
}
.portico-contenido .portada-interior{padding:0}

/* --- la pista de "seguir" --- */
.portico-seguir{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  z-index:4; display:grid; justify-items:center; gap:2px;
  font-size:.64rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--portico-nombre);
  opacity:var(--seguir,1);
}
.portico-seguir svg{width:18px;height:18px;fill:currentColor;animation:seguir-late 1.9s ease-in-out infinite}
@keyframes seguir-late{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){.portico-seguir svg{animation:none}}

@media (max-width:600px){
  /* Menos recorrido en celular: el buscador ya queda lejos y no conviene
     agregarle tres pantallas de animación. */
  .portico-riel{height:190vh}
  .portico-nombres{font-size:.54rem;letter-spacing:.12em;bottom:5vh}
  .pan-logo{--logo-ancho:80%}
  .pan[data-pan="0"] .pan-logo{--logo-ancho:62%}
  .portico-contenido{max-height:78svh;border-radius:14px}
}

/* Sin JavaScript el pórtico no puede animar: se muestra el estado final
   para que nadie se quede mirando una pantalla vacía. */
.no-js .portico-riel{height:auto}
.no-js .portico-fijo{position:static;height:auto;padding:28px 0}
.no-js .pan-foto{clip-path:none}
.no-js .pan-logo,.no-js .portico-nombres span{opacity:1;transform:translate(-50%,-50%)}
.no-js .portico-contenido{opacity:1;transform:none;pointer-events:auto}
.no-js .portico-seguir{display:none}
.no-js .navmov{transform:none;opacity:1;pointer-events:auto}


/* --- Pórtico de una sola columna (subpáginas) -------------------
   La versión de la principal son tres paneles; aquí es uno solo, con la
   misma textura, el mismo logo entrando al cargar y la misma foto subiendo.
   Sólo cambia la rejilla y el tamaño del logo, que al tener toda la
   pantalla puede ir más chico en proporción. */
.portico-solo .portico-paneles{grid-template-columns:1fr}
.portico-solo .pan[data-pan="0"] .pan-logo{--logo-ancho:22%}
.portico-solo .portico-nombres{grid-template-columns:1fr}

/* La tarjeta de las subpáginas se angosta a la medida de su propio texto.
   El por qué: la tarjeta heredaba --ancho (1140px), pero el texto de
   adentro está topado en 60ch el lede y 20ch el título —unos 620px de
   línea más larga— así que sobraban ~350px a la derecha, un tercio del
   ancho útil, y se veía como un hueco.

   No se centró el texto para taparlo: centrar mueve el punto donde el ojo
   regresa en cada renglón y el lede de cuatro líneas se lee más lento.
   Además partiría el hueco en dos en lugar de quitarlo. Angostar la
   tarjeta lo elimina, deja la alineación a la izquierda, y como la
   tarjeta ya va centrada en pantalla el bloque completo queda centrado.

   Un solo número para ajustar. Si se quiere más ancha, se sube aquí. */
.portico-solo .portico-contenido{--tarjeta-ancho:760px;
  width:min(var(--tarjeta-ancho), calc(100% - 40px))}
@media (max-width:600px){
  .portico-solo .pan[data-pan="0"] .pan-logo{--logo-ancho:44%}
}


/* --- Foto del pórtico en tres tamaños --------------------------
   El panel de una subpágina va a TODO lo ancho, no en una columna de un
   tercio: en un monitor de 1600 px necesita ~2700 px reales, y la imagen
   de la principal (1100 de ancho) se estiraba 2.5 veces.

   Tres archivos y no uno: un celular no tiene por qué bajar 623 KB de una
   foto de 2560 px que nunca va a ver. Se sirve el que corresponde y ya. */
.portico-solo .pan-foto{background-image:var(--foto-chica)}
@media (min-width:601px){
  .portico-solo .pan-foto{background-image:var(--foto-media, var(--foto))}
}
@media (min-width:1500px){
  .portico-solo .pan-foto{background-image:var(--foto)}
}