*,*::before,*::after{box-sizing:border-box;}
:root{
  /* Fondos */
  --bg-dark-1:#10002F;--bg-dark-1-rgb:16,0,47;
  --bg-dark-2:#18064A;--bg-dark-2-rgb:24,6,74;
  --bg-light-1:#F5F7FB;
  --bg-white:#FFFFFF;--bg-white-rgb:255,255,255;
  /* Acentos */
  --accent-lime:#9BDD5A;--accent-lime-rgb:155,221,90;
  --accent-cyan:#0075A4;--accent-cyan-rgb:0,117,164;
  --accent-blue:#1D5AD8;--accent-blue-rgb:29,90,216;
  --accent-fuchsia:#E63AA4;--accent-fuchsia-rgb:230,58,164;
  --accent-coral:#F36B3D;--accent-coral-rgb:243,107,61;
  --accent-violet:#7C55B3;--accent-violet-rgb:124,85,179;
  /* Textos */
  --text-on-light:#111735;
  --text-on-light-secondary:#536078;
  --text-on-dark:#FFFFFF;
  --text-on-dark-secondary:#B9C0D6;
  /* Bordes */
  --border-on-light:#DDE4F0;
  --border-on-dark:rgba(255,255,255,0.14);
}
/* Compensa el header fijo al saltar a un ancla del nav: sin esto, el navegador
   alinea el borde superior de la seccion contra el viewport y el nav (fixed,
   por encima) tapa justo el arranque. Valor de respaldo antes de que corra el
   JS (nav — mide alto real del header), que pisa esto con el alto exacto del
   nav en cada resolucion. */
html{overflow-x:hidden;scroll-padding-top:88px;}
body{margin:0;background:var(--bg-dark-1);font-family:'Nunito',sans-serif;color:var(--text-on-dark);overflow-x:hidden;}
a{color:#FF8400;text-decoration:none;}
a:hover{color:#FDDD3F;text-decoration:underline;}
::selection{background:var(--accent-violet);color:var(--text-on-dark);}
img{display:block;width:100%;height:100%;object-fit:cover;}

@keyframes bounceArrow{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(6px);}}
@keyframes paccc-bot-float{0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-18px) rotate(2deg);}}
@keyframes revealUp{from{transform:translateY(50px);}to{transform:translateY(0);}}
@keyframes squareFlicker{0%,100%{opacity:0.12;}50%{opacity:0.85;}}

[data-reveal]{animation:revealUp 0.8s cubic-bezier(0.22,0.9,0.3,1) both;}
[data-reveal-card]{animation:revealUp 0.7s cubic-bezier(0.22,0.9,0.3,1) both;}
[data-reveal-card]:nth-child(1){animation-delay:0.05s;}
[data-reveal-card]:nth-child(2){animation-delay:0.15s;}
[data-reveal-card]:nth-child(3){animation-delay:0.25s;}
[data-reveal-card]:nth-child(4){animation-delay:0.35s;}
[data-reveal-card]:nth-child(5){animation-delay:0.45s;}
[data-reveal-card]:nth-child(6){animation-delay:0.55s;}
[data-reveal-card]:nth-child(7){animation-delay:0.65s;}

.squares-layer{position:absolute;inset:0;pointer-events:none;z-index:1;}

/* Pixel texture — decorative flickering pixel-square overlay (hero) */
@keyframes pixelFlicker{0%,100%{opacity:var(--op-a);transform:scale(1);}50%{opacity:var(--op-b);transform:scale(1.12);}}
.pixel-texture{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;mix-blend-mode:normal;}
.pixel-sq{position:absolute;opacity:var(--op-a);animation:pixelFlicker var(--dur) ease-in-out var(--delay) infinite;}
/* Densidad de los cuadraditos decorativos — se reduce en notebook/tablet para
   que no se vean amontonados (el tamano ya escala solo via clamp() en JS).
   El primer recorte (nth-child(4n)) aplica siempre, incluso en desktop ancho. */
.pixel-sq:nth-child(4n){display:none;}
@media (max-width:1600px){.pixel-sq:nth-child(3n){display:none;}}
@media (max-width:1200px){.pixel-sq:nth-child(2n){display:none;}}
@media (max-width:900px){.pixel-texture,.squares-layer{display:none!important;}}

/* Hero CTA — 3 tarjetas lado a lado (2 naranjas + 1 blanca), cada una con
   titulo bold dentro del boton y una bajada chica debajo, fuera del boton. */
#hero-cta-wrap{display:flex;justify-content:center;align-items:flex-start;gap:20px;margin-top:14px;flex-wrap:wrap}
.hero-cta-item{display:flex;flex-direction:column;align-items:center;gap:10px;flex:1 1 220px;max-width:260px}
.hero-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:59px;
  padding:11px 20px;
  border-radius:16px;
  font-family:'Nunito',sans-serif;
  font-size:16px;
  font-weight:800;
  line-height:1.2;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:0.02em;
  border:none;
  box-shadow:0 8px 18px rgba(0,0,0,0.3);
  cursor:pointer;
  transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.25s ease,filter 0.25s ease;
}
.hero-cta--orange{
  background:linear-gradient(to bottom,#FF8400,#E53E30);
  color:#FFFFFF;
}
.hero-cta--yellow{
  background:linear-gradient(to bottom,#0075A4,#00405A);
  color:#FFFFFF;
}
.hero-cta:hover{
  text-decoration:none;
  transform:translateY(-3px) scale(1.03);
  filter:brightness(1.06);
  box-shadow:0 12px 24px rgba(0,0,0,0.35);
}
.hero-cta:active{
  transform:translateY(1px) scale(0.97);
  box-shadow:0 8px 18px rgba(0,0,0,0.4);
}
.hero-cta-caption{
  font-family:'Nunito',sans-serif;
  font-size:13px;
  font-weight:600;
  color:var(--text-on-dark-secondary);
  text-align:center;
}


/* nav */
/* Header — capa oscura sutil y uniforme sobre el hero por defecto (el video
   pasa detras y sin esto el contraste cae segun el fotograma); al scrollear
   (.is-scrolled, agregado por JS) pasa a fondo solido + blur, con transicion
   suave. Fixed (no sticky) para que el video del hero arranque detras, sin
   franja que lo corte. */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:6px 40px;background:rgba(var(--bg-dark-1-rgb),0.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid transparent;transition:background 0.3s ease,backdrop-filter 0.3s ease,border-color 0.3s ease;gap:12px;}
.nav.is-scrolled{background:rgba(var(--bg-dark-1-rgb),0.88);backdrop-filter:blur(10px);border-bottom-color:var(--border-on-dark);}
.nav-links{display:flex;align-items:center;gap:6px;}
.nav-links a{padding:8px 9px;border-radius:8px;color:rgba(255,255,255,0.72);background:transparent;font-size:14.5px;font-weight:500;text-decoration:none;white-space:nowrap;transition:color 150ms ease,background-color 150ms ease,transform 150ms ease;}
@media (hover:hover){
  .nav-links a:hover{color:var(--text-on-dark);background-color:rgba(255,255,255,0.08);transform:translateY(-1px);text-decoration:none;}
}
.nav-links a:focus-visible{color:var(--text-on-dark);background-color:rgba(255,255,255,0.1);outline:2px solid #FF8400;outline-offset:2px;}
.nav-track-link{font-family:'Nunito',sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.02em;white-space:nowrap;}
.nav-track-link:hover{text-decoration:underline;}
.nav-track-link.nav-track-link--orange{color:#FF8400;}
.nav-track-link.nav-track-link--yellow{color:#FDDD3F;}
@media (prefers-reduced-motion:reduce){.nav{transition:none;}}

.nav-burger{display:none;flex-direction:column;justify-content:center;gap:4px;width:26px;height:26px;background:none;border:none;cursor:pointer;padding:0;flex-shrink:0;margin-left:auto;}
.nav-burger span{display:block;width:100%;height:2px;background:var(--text-on-dark);border-radius:2px;transition:transform 0.25s ease,opacity 0.25s ease;}
.nav-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-burger.is-open span:nth-child(2){opacity:0;}
.nav-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav-mobile-panel{display:none;flex-direction:column;gap:2px;padding:8px 20px 20px;background:rgba(var(--bg-dark-1-rgb),0.97);}
.nav-mobile-panel a{color:var(--text-on-dark-secondary);font-size:16px;font-weight:600;padding:14px 0;border-bottom:1px solid rgba(255,255,255,0.08);}
.nav-mobile-panel .nav-track-link{padding:12px 0;font-size:14px;}
/* Nav — desde 1280px inclusive se muestra la navegacion desktop completa;
   por debajo, menu hamburguesa (spec del brief de header/hero). */
@media (max-width:1279px){
  .nav{flex-wrap:wrap;padding:14px 20px;}
  .inl-1{width:auto;margin-inline:0;min-width:0;}
  .inl-2{min-width:0;}
  .nav-links{display:none;}
  .nav-burger{display:flex;}
  .nav-mobile-panel{flex-basis:100%;width:100%;}
  .nav-mobile-panel.is-open{display:flex;}
}

@media (max-width:900px){
  /* Mobile usa el mismo hero "overlay" que desktop (foto cover a pantalla
     completa + contenido superpuesto abajo) — ya es la base para todos los
     anchos, aca solo se ajustan tamanos/paddings para pantallas chicas. */
  /* En mobile el hero deja de ser un overlay a 100svh (foto absoluta +
     contenido pegado abajo, con el hueco intermedio que sobra segun la
     resolucion) y pasa a flujo normal: foto primero, contenido justo
     despues. Asi el alto del hero es simplemente nav + foto + contenido,
     sin espacio muerto ni arriba ni abajo del texto/CTA. --nav-h lo fija
     script.js con el alto real del header; el valor fijo es solo respaldo
     antes de que corra el JS. */
  #hero-section{display:block!important;min-height:0!important;}
  #hero-video-wrap{position:relative!important;inset:auto!important;margin-top:var(--nav-h,80px)!important;}
  #hero-photo{display:none!important;}
  #hero-photo-mobile{position:relative!important;display:block!important;width:100%!important;height:auto!important;object-fit:contain!important;}
  #hero-content{padding-block:14px!important;width:92%!important;margin-top:-20px!important;}
  #hero-headline{font-size:clamp(24px,7vw,32px)!important;line-height:1.12!important;white-space:normal!important;width:auto!important;max-width:100%!important;position:static!important;left:auto!important;transform:none!important;margin:0 auto!important;}
  #hero-segline{margin-top:8px!important;}
  #hero-segline > div{width:48px!important;height:3px!important;}
  .inl-20{font-size:14px!important;margin-top:8px!important;}
  #hero-cta-wrap{flex-direction:column;align-items:center;gap:12px;margin-top:10px!important;}
  .hero-cta-item{flex:0 0 auto;width:100%;max-width:360px;}
  .hero-cta{font-size:15px!important;padding:12px 20px!important;min-height:60px!important;}
  .hero-cta-caption{font-size:12px;}
  .hero-institutional-lockup{margin-top:10px!important;}
  .hero-institutional-lockup img{height:18px!important;}

  /* El salto pedagogico — la foto de fondo con fusion se reemplaza por una foto normal arriba del texto */
  /* padding-top:0 (no clamp) — la foto es lo primero que se ve y va pegada
     al borde superior de la seccion, sin el padding estandar de arriba
     (que si aplica abajo/costados); mismo criterio que #manifiesto. */
  #narrative-section{padding:0 20px clamp(56px,10vw,80px)!important;}
  #narrative-photo,#narrative-photo-overlay{display:none!important;}
  #narrative-photo-mobile{display:block!important;border-radius:0!important;width:100vw!important;margin-left:calc(-50vw + 50%)!important;margin-right:calc(-50vw + 50%)!important;margin-bottom:24px!important;}
  #narrative-spacer{display:none!important;}
  #narrative-title{font-size:clamp(28px,9vw,36px)!important;}
}

.paccc-segments{display:flex;align-items:flex-end;position:relative;z-index:2;margin-bottom:0;max-width:1920px;margin-inline:auto;}
.paccc-seg{cursor:pointer;flex:1;text-align:center;position:relative;}
.paccc-seg-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:34px;letter-spacing:0.01em;line-height:1;margin-bottom:24px;color:var(--seg-color);}
.paccc-seg-line{position:relative;height:7px;background:var(--seg-color);transition:opacity 0.2s;}
.paccc-seg-dot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:32px;height:32px;border-radius:50%;background:var(--bg-dark-2);border:4px solid var(--seg-color);}
.paccc-seg.active .paccc-seg-line .paccc-seg-dot{width:40px;height:40px;background:var(--seg-color);}
.paccc-seg.active .paccc-seg-label{display:flex;align-items:center;justify-content:center;width:100%;height:52px;margin-bottom:14px;background:linear-gradient(180deg,var(--seg-color) 0%,rgba(var(--seg-color-rgb),0) 100%);color:var(--seg-color);border-radius:16px 16px 0 0;}

.nav-arrow-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:34px;height:34px;border-radius:50%;background:var(--accent-violet);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,0.35);transition:filter 0.2s;}
.nav-arrow-btn:hover{filter:brightness(1.15);}


.shorts-modal.is-open{display:flex;}

/* Testimonios — mobile */

/* Creaciones con IA — galería masonry editorial, 4 columnas verticales alternadas */
/* Metadatos de cada creacion — siempre visibles (no solo al hover, para que
   funcionen igual en mobile/touch), overlay compacto sobre la franja inferior
   de la imagen. Padding y tipografia deliberadamente ajustados (extremo mas
   chico de los rangos pedidos) para no superar ~30% del alto incluso en las
   imagenes mas panoramicas de la galeria (aspect ~1.78). */
@keyframes creacionesUp{from{transform:translateY(0);}to{transform:translateY(-50%);}}
@keyframes creacionesDown{from{transform:translateY(-50%);}to{transform:translateY(0);}}

/* Lightbox de la galería de Creaciones */
.creaciones-lightbox.is-open{display:flex;}

/* Reconocimientos — composicion editorial: fila 1 de 4, fila 2 de 3 centrada */
.reconocimientos-inner{position:relative;z-index:2;max-width:1600px;margin-inline:auto;padding-inline:clamp(40px,5vw,72px);}
.reconocimientos-intro{text-align:center;max-width:720px;margin:0 auto;}
.reconocimientos-featured{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-top:clamp(48px,4vw,56px);}
.reconocimientos-secondary{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-top:20px;}
.reconocimientos-featured .award-card,.reconocimientos-secondary .award-card{flex:1 1 calc(25% - 15px);min-width:200px;max-width:calc(25% - 15px);}

.award-card{display:flex;flex-direction:column;align-items:center;text-align:center;box-sizing:border-box;background:color-mix(in srgb,var(--bg-dark-2) 88%,white 6%);border:1px solid rgba(255,255,255,0.10);border-radius:18px;box-shadow:0 18px 44px rgba(8,6,36,0.3);transition:transform 280ms ease,border-color 280ms ease,background 280ms ease;min-height:clamp(240px,17vw,264px);padding:clamp(28px,2vw,32px);gap:16px;}
.award-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,0.18);background:color-mix(in srgb,var(--bg-dark-2) 82%,white 9%);}
@media (prefers-reduced-motion:reduce){.award-card{transition:none;}.award-card:hover{transform:none;}}

.award-logo-stage{display:flex;align-items:center;justify-content:center;width:100%;flex-shrink:0;height:88px;overflow:hidden;}
.award-logo-stage.is-small{height:84px;}
.award-logo-stage.is-large{height:114px;}
.award-logo-stage img{display:block;width:auto;height:auto;max-width:100%;max-height:88px;object-fit:contain;}
.award-logo-stage.is-small img{max-height:84px;}
.award-logo-stage.is-large img{max-height:114px;}

.award-body{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;justify-content:center;}
.award-institution{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;letter-spacing:0.08em;color:rgba(255,255,255,0.55);}
.award-name{font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--text-on-dark);font-size:clamp(18px,1.4vw,21px);line-height:1.3;}
.award-description{font-family:'Nunito',sans-serif;font-weight:400;color:rgba(255,255,255,0.68);font-size:14px;line-height:1.45;}

/* Reconocimientos — tablet: 2 columnas equilibradas; la ultima tarjeta (7ma,
   fila impar) queda centrada sola en su fila gracias al justify-content:center
   ya presente en .reconocimientos-featured/secondary, sin reglas extra. */
@media (max-width:1023px) and (min-width:641px){
  .reconocimientos-featured .award-card,.reconocimientos-secondary .award-card{flex-basis:calc(50% - 10px);max-width:calc(50% - 10px);min-width:180px;}
  .award-card{min-height:230px;padding:24px;}
}

/* Reconocimientos — desktop/tablet: contenedor unico de mobile queda oculto */
.reconocimientos-mobile-rail{display:none;}

/* Reconocimientos — mobile: un unico rail horizontal con las 7, sin grillas */
@media (max-width:640px){
  .reconocimientos-inner{padding-inline:20px;}
  .reconocimientos-featured,.reconocimientos-secondary{display:none;}
  .reconocimientos-mobile-rail{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:14px;margin-top:36px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;}
  .reconocimientos-mobile-rail::-webkit-scrollbar{display:none;}
  .reconocimientos-mobile-rail .award-card{flex:0 0 84vw;max-width:84vw;scroll-snap-align:center;}
  .award-card{padding:20px 14px;min-height:210px;gap:14px;}
  .award-logo-stage,.award-logo-stage.is-small,.award-logo-stage.is-large{height:68px;}
  .award-logo-stage img,.award-logo-stage.is-small img,.award-logo-stage.is-large img{max-height:68px;}
  .award-name{font-size:clamp(15px,4vw,17px);}
  .award-description{font-size:13.5px;}
}

/* PACCC mobile carousel — one vertical card per stage, hidden on desktop */
.paccc-mobile-only{display:none;}
@media (max-width:900px){
  .paccc-segments,#paccc-detail{display:none;}
  .paccc-mobile-only{display:block;}
  #paccc{padding:clamp(56px,10vw,80px) 20px!important;}
  #paccc-title{font-size:clamp(28px,9vw,36px)!important;}
  #reconocimientos-title{font-size:clamp(28px,9vw,36px)!important;}
  #manifiesto-title{font-size:clamp(28px,9vw,36px)!important;}
  #reconocimientos{padding:clamp(56px,10vw,80px) 0!important;}
}
.paccc-mobile-dots{display:flex;justify-content:center;gap:8px;margin-bottom:18px;}
.paccc-mobile-methodology{text-align:center;font-family:'Barlow Condensed',sans-serif;font-weight:500;font-size:38px;letter-spacing:0.02em;color:var(--text-on-dark);margin-bottom:16px;}
.paccc-mobile-methodology span{font-weight:500;}
.paccc-mobile-methodology-p{color:var(--accent-violet);}
.paccc-mobile-methodology-a{color:var(--accent-fuchsia);}
.paccc-mobile-methodology-c1{color:var(--accent-cyan);}
.paccc-mobile-methodology-c2{color:var(--accent-coral);}
.paccc-mobile-methodology-c3{color:var(--accent-lime);}
.paccc-mobile-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.3);transition:background 0.25s ease,transform 0.25s ease;flex-shrink:0;}
.paccc-mobile-dot.active{background:var(--dot-color,#fff);transform:scale(1.35);}
.paccc-mobile-carousel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:4px 24px 12px;margin:0 -24px;scrollbar-width:none;}
.paccc-mobile-carousel::-webkit-scrollbar{display:none;}
/* display:flex;flex-direction:column + .paccc-mobile-card-body{flex:1}: sin
   esto el body quedaba "shrink-wrap" (alto = solo lo que ocupa su texto), y
   la letra de fondo (position:absolute, bottom:0 respecto al body) llegaba
   al final del TEXTO en vez de al final real de la card — como cada card
   tiene un largo de texto distinto, quedaban todas las letras a alturas
   distintas. Con body a flex:1 siempre llena el alto real de la card
   (todas las cards ya miden lo mismo por el align-items:stretch por
   default del carousel), y "bottom:0" de la letra cae siempre en el mismo
   lugar. */
.paccc-mobile-card{display:flex;flex-direction:column;scroll-snap-align:center;flex:0 0 84%;max-width:400px;background:color-mix(in srgb,#0D0B56 82%,black 18%);border:1px solid rgba(255,255,255,0.16);border-top:8px solid var(--card-color,#fff);border-radius:20px;overflow:hidden;}
.paccc-mobile-card-photo{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:#000;flex-shrink:0;}
.paccc-mobile-card-photo img{width:100%;height:100%;object-fit:cover;}
.paccc-mobile-card-body{flex:1;position:relative;padding:22px 22px 26px;overflow:hidden;}
/* Letra grande de fondo, misma letra/color que la tab de esa etapa en
   desktop: ocupa el espacio que sobra debajo del texto corto. El
   mask-image la funde de invisible (donde pasa detras del titulo/texto) a
   visible mas abajo, en la zona vacia, para no restar legibilidad. */
/* Solo bottom:0 (sin top ni flex): la caja mide lo que ocupa su propia
   linea de texto y esa altura se apoya sola contra el borde inferior — un
   bottom negativo para "empujarla" mas terminaba recortando el propio
   glifo contra el overflow:hidden de la card, no solo el espacio de sobra
   del line-height. Degradado real (no opacidad): background-clip:text con
   un gradiente de transparente a solido del color de la etapa. */
/* line-height:1 (no 0.75): con la caja de linea mas chica que el alto real
   del glifo, la "C" se recortaba abajo contra el overflow:hidden de la
   card en vez de solo acortar el margen de sobra. Degradado mas gradual
   (0% a 100%, sin tramo intermedio) + opacity:0.6 en todo el elemento para
   que ninguna parte quede 100% solida, ni siquiera abajo. */
.paccc-mobile-card-letter{position:absolute;left:18px;right:18px;bottom:0;z-index:0;font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:0.01em;font-size:min(56vw,260px);line-height:1;opacity:0.6;pointer-events:none;color:transparent;background-image:linear-gradient(to bottom,transparent 0%,var(--card-color,#fff) 100%);-webkit-background-clip:text;background-clip:text;}
.paccc-mobile-card-badge,.paccc-mobile-card-title,.paccc-mobile-card-intro,.paccc-mobile-card-long,.paccc-mobile-crea-list{position:relative;z-index:1;}
.paccc-mobile-card-badge{display:inline-block;font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:clamp(45px,12vw,51px);line-height:1;letter-spacing:0.04em;padding-bottom:10px;margin-bottom:14px;border-bottom:3px solid currentColor;}
.paccc-mobile-card-title{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:clamp(26px,7vw,32px);line-height:1;margin-bottom:12px;color:var(--card-color,#fff);}
.paccc-mobile-card-intro{font-size:clamp(16px,4.2vw,18px);font-weight:700;line-height:1.5;color:var(--text-on-dark);text-transform:uppercase;margin-bottom:10px;}
.paccc-mobile-card-long{font-size:clamp(16px,4.2vw,18px);line-height:1.6;color:var(--text-on-dark-secondary);}
.paccc-mobile-crea-list{display:none;margin-top:14px;flex-direction:column;gap:10px;}
.paccc-mobile-crea-list.is-visible{display:flex;}
.paccc-mobile-crea-list div{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;text-transform:uppercase;color:var(--text-on-dark);}
.paccc-mobile-crea-list img{width:24px;height:24px;object-fit:contain;flex-shrink:0;}

/* ===== Contacto — rediseno visual (solo estetica, sin tocar campos/logica) ===== */
.contacto-section{position:relative;overflow:hidden;padding:clamp(110px,9vw,130px) clamp(40px,5vw,80px);background:var(--bg-dark-1);}
#contacto-grid{position:relative;z-index:2;max-width:1560px;margin-inline:auto;display:grid;grid-template-columns:43fr 57fr;gap:clamp(72px,6vw,96px);align-items:start;}

.contacto-info{max-width:650px;}
.contacto-eyebrow{display:inline-flex;align-items:flex-end;gap:10px;}
.contacto-eyebrow span{font-family:'Barlow Condensed',sans-serif;font-size:clamp(13px,0.8vw,15px);font-weight:650;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.92);line-height:1;}

.contacto-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(44px,2.7vw,58px);line-height:1.02;letter-spacing:-0.02em;color:var(--text-on-dark);margin-top:20px;max-width:650px;}
.contacto-title-accent{color:#FF8400;}
.contacto-bar{display:flex;width:220px;height:4px;margin-top:10px;}
.contacto-bar div{flex:1;}

.contacto-desc{font-family:'Nunito',sans-serif;font-size:clamp(16px,1.1vw,19px);line-height:1.55;font-weight:400;color:var(--text-on-dark-secondary);margin-top:24px;max-width:580px;}

.contacto-benefits{display:flex;flex-direction:column;gap:12px;margin:32px 0 0;max-width:580px;}
.contacto-benefit{display:flex;align-items:flex-start;gap:14px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);border-radius:14px;padding:16px 18px;box-sizing:border-box;}
.contacto-benefit-icon{width:38px;height:38px;border-radius:10px;background:rgba(255,132,0,0.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.contacto-benefit-icon svg{display:block;}
.contacto-benefit-body{display:flex;flex-direction:column;gap:4px;min-width:0;}
.contacto-benefit-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15.5px;line-height:1.3;color:var(--text-on-dark);margin:0;}
.contacto-benefit-text{font-family:'Nunito',sans-serif;font-size:13.5px;line-height:1.45;color:var(--text-on-dark-secondary);}

.contacto-email-alt{margin-top:30px;font-size:clamp(15px,0.85vw,17px);color:var(--text-on-dark-secondary);}
.contacto-email-alt a{color:#FF8400;font-weight:700;transition:color 0.22s ease;}
.contacto-email-alt a:hover{color:var(--accent-cyan);}

.contacto-card{background:var(--bg-dark-2);border:1px solid rgba(255,255,255,0.10);border-radius:24px;padding:clamp(32px,3vw,42px);box-shadow:0 40px 80px -34px rgba(var(--accent-blue-rgb),0.28);}
.contacto-card-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(20px,1.3vw,24px);color:var(--text-on-dark);margin-bottom:24px;}

#contacto-form{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin-bottom:20px;}
.contacto-field-full{grid-column:1 / -1;}

.contacto-field-group{display:flex;flex-direction:column;gap:6px;min-width:0;}
.contacto-field-group label{font-family:'Nunito',sans-serif;font-size:13px;font-weight:600;color:var(--text-on-dark-secondary);line-height:1.3;}
.contacto-field-optional{font-weight:400;color:rgba(255,255,255,0.42);}

/* Contacto — simplificacion visual del formulario a 5 campos: los demas
   quedan ocultos (display:none) sin borrarse del DOM para no tocar logica,
   destino ni validaciones. El orden visual se resuelve con `order` sobre
   el grid existente (no requiere reordenar el markup). */
.cf-hide{display:none;}
.cf-o1{order:1;}
.cf-o2{order:2;}
.cf-o3{order:3;}
.cf-o4{order:4;}
.cf-o5{order:5;}

#contacto-form input,#contacto-form select,#contacto-form textarea{width:100%;height:50px;padding:0 16px;border-radius:11px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);color:var(--text-on-dark);font-size:16px;font-family:'Nunito',sans-serif;box-sizing:border-box;transition:border-color 0.22s ease,box-shadow 0.22s ease;}
#contacto-form select{color:var(--text-on-dark-secondary);}
#contacto-form textarea{height:auto;min-height:104px;padding-top:13px;padding-bottom:13px;resize:none;}
#contacto-form input::placeholder,#contacto-form textarea::placeholder{color:var(--text-on-dark-secondary);opacity:0.85;}
#contacto-form input:hover,#contacto-form select:hover,#contacto-form textarea:hover{border-color:rgba(255,255,255,0.22);}
#contacto-form input:focus,#contacto-form select:focus,#contacto-form textarea:focus{outline:none;border-color:var(--accent-cyan);box-shadow:0 0 0 1px var(--accent-cyan),0 0 0 6px rgba(var(--accent-cyan-rgb),0.16);}

.contacto-honeypot{position:absolute;width:0;height:0;padding:0;border:0;opacity:0;pointer-events:none;}

.contacto-error{order:6;grid-column:1 / -1;margin:0 0 14px;padding:12px 16px;border-radius:11px;background:rgba(var(--accent-coral-rgb),0.12);border:1px solid rgba(var(--accent-coral-rgb),0.35);color:var(--text-on-dark);font-family:'Nunito',sans-serif;font-size:14px;font-weight:600;line-height:1.4;}

.contacto-submit{order:7;grid-column:1 / -1;width:100%;height:58px;padding:0 15px;border-radius:14px;background:#FF8400;color:#FFFFFF;font-size:17px;font-weight:700;border:none;font-family:'Nunito',sans-serif;cursor:pointer;box-shadow:0 12px 24px -12px rgba(255,132,0,0.4);transition:filter 0.22s ease,transform 0.22s ease,box-shadow 0.22s ease;}
.contacto-submit:hover{filter:brightness(1.06);transform:translateY(-2px);box-shadow:0 16px 28px -12px rgba(255,132,0,0.45);}
.contacto-submit:active{transform:translateY(0);}
.contacto-submit:disabled{cursor:not-allowed;filter:brightness(0.9);transform:none;}

.contacto-success{text-align:center;padding:32px 8px;}
.contacto-success-icon{width:56px;height:56px;margin:0 auto 16px;display:block;}
.contacto-check-circle{fill:none;stroke:#FF8400;stroke-width:2;}
.contacto-check-mark{fill:none;stroke:#FF8400;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.contacto-success-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;color:var(--text-on-dark);margin:0 0 8px;}
.contacto-success-body{font-family:'Nunito',sans-serif;font-size:15px;line-height:1.5;color:var(--text-on-dark-secondary);margin:0;}
.contacto-agenda-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:22px;height:52px;padding:0 26px;border-radius:100px;background:#FF8400;color:var(--text-on-light);font-family:'Nunito',sans-serif;font-weight:700;font-size:15px;text-decoration:none;transition:filter 0.22s ease,transform 0.22s ease;}
.contacto-agenda-btn:hover{filter:brightness(1.06);transform:translateY(-2px);text-decoration:none;color:var(--text-on-light);}

@media (prefers-reduced-motion:reduce){.contacto-email-alt a,#contacto-form input,#contacto-form select,#contacto-form textarea,.contacto-submit{transition:none;}}

@media (max-width:1440px){
  .contacto-section{padding-inline:clamp(32px,4vw,56px);}
  #contacto-grid{gap:clamp(48px,4.5vw,72px);}
}

@media (max-width:1040px){
  #contacto-grid{grid-template-columns:1fr;}
  .contacto-info{max-width:640px;}
  .contacto-card{margin-inline:auto;width:100%;max-width:760px;}
}

@media (max-width:768px){
  .contacto-section{padding:clamp(64px,10vw,76px) clamp(20px,5vw,24px);}
  #contacto-grid{gap:clamp(40px,8vw,48px);}
  .contacto-info,.contacto-card{max-width:100%;}
  .contacto-title{font-size:clamp(28px,9vw,36px);line-height:1.02;}
  .contacto-desc{font-size:16px;}
  .contacto-benefits{gap:10px;max-width:100%;}
  .contacto-benefit{padding:14px 16px;}
  .contacto-card{padding:clamp(22px,5vw,24px);border-radius:19px;}
  #contacto-form{grid-template-columns:1fr;gap:14px;}
  .contacto-field-group{grid-column:1;}
  #contacto-form input,#contacto-form select,#contacto-form textarea{min-height:50px;height:auto;}
  #contacto-form textarea{min-height:116px;}
}

/* ===== Footer — rediseno visual (solo estetica, sin tocar hrefs/logica) ===== */
.footer-section{position:relative;overflow:hidden;padding:68px clamp(40px,5vw,80px) 32px;background:radial-gradient(ellipse 900px 260px at 50% 0%,rgba(29,90,216,0.10),rgba(29,90,216,0) 70%),color-mix(in srgb,var(--bg-dark-1) 90%,black 10%);border-top:1px solid rgba(160,185,255,0.12);}

.footer-grid{position:relative;z-index:1;max-width:1600px;margin-inline:auto;display:grid;grid-template-columns:minmax(300px,1.8fr) minmax(130px,0.8fr) minmax(160px,0.9fr) minmax(190px,1fr);gap:clamp(32px,4vw,64px);align-items:start;}

.footer-brand{min-width:0;}
.footer-logos{display:flex;align-items:center;gap:14px;margin-bottom:20px;}
.footer-logo-er{height:clamp(40px,2.4vw,52px);width:auto;object-fit:contain;display:block;}
.footer-logo-divider{width:1px;height:30px;background:var(--border-on-dark);flex-shrink:0;}
.footer-logo-lottie{height:clamp(52px,3.5vw,64px);width:auto;aspect-ratio:3000/1200;background:transparent;}
.footer-logo-lottie svg{display:block;}
.footer-brand-text{font-size:16px;line-height:1.55;color:var(--text-on-dark-secondary);max-width:430px;margin-bottom:20px;}
.footer-support-logos{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-bottom:24px;}
.footer-support-logos img{height:42px;width:auto;object-fit:contain;display:block;}

.footer-social{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.footer-social a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;transition:transform 0.22s ease,opacity 0.22s ease;}
.footer-social a img{width:34px;height:34px;object-fit:contain;}
.footer-social a:hover{transform:translateY(-2px);opacity:0.82;}
.footer-social a:focus-visible{outline:2px solid var(--accent-cyan);outline-offset:3px;border-radius:4px;}

.footer-heading{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:rgba(255,255,255,0.92);margin-bottom:19px;}

.footer-links{display:flex;flex-direction:column;gap:2px;}
.footer-links a{display:flex;align-items:center;min-height:34px;font-size:16px;line-height:1.4;color:var(--text-on-dark-secondary);transition:color 0.22s ease,transform 0.22s ease;}
.footer-links a:hover{color:var(--accent-cyan);transform:translateX(2px);}
.footer-links a:focus-visible{outline:2px solid var(--accent-cyan);outline-offset:3px;border-radius:3px;}

.footer-email{display:inline-block;font-size:16px;line-height:1.4;color:#FF8400;font-weight:700;overflow-wrap:anywhere;transition:color 0.22s ease;}
.footer-email:hover{color:var(--accent-cyan);}
.footer-email:focus-visible{outline:2px solid var(--accent-cyan);outline-offset:3px;border-radius:3px;}

.footer-bottom{max-width:1600px;margin-inline:auto;margin-top:44px;padding-top:26px;border-top:1px solid rgba(255,255,255,0.08);display:grid;grid-template-columns:auto minmax(0,1fr);gap:32px;font-size:14px;line-height:1.45;color:color-mix(in srgb,var(--text-on-dark-secondary) 85%,transparent);}
.footer-bottom > div:last-child{text-align:right;max-width:480px;margin-left:auto;}
.footer-privacy-note{display:flex;justify-content:flex-end;align-items:flex-start;gap:8px;}
.footer-privacy-icon{flex-shrink:0;margin-top:2px;stroke:#FF8400;}

@media (prefers-reduced-motion:reduce){.footer-social a,.footer-links a,.footer-email{transition:none;}}

/* Footer — tablet 769-1023px */
@media (max-width:1023px) and (min-width:769px){
  .footer-section{padding:60px 40px 32px;}
  .footer-grid{grid-template-columns:minmax(0,1.4fr) minmax(220px,1fr);grid-template-areas:"brand contact" "nav legal";column-gap:48px;row-gap:38px;}
  .footer-brand{grid-area:brand;}
  .footer-col-contact{grid-area:contact;}
  .footer-col-nav{grid-area:nav;}
  .footer-col-legal{grid-area:legal;}
  .footer-bottom{grid-template-columns:1fr;gap:10px;}
  .footer-bottom > div:last-child{text-align:left;max-width:100%;margin-left:0;}
  .footer-privacy-note{justify-content:flex-start;}
}

/* Footer — mobile hasta 768px */
@media (max-width:768px){
  .footer-section{padding:52px clamp(20px,5vw,24px) 24px;}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;row-gap:0;}
  .footer-brand{grid-column:1/-1;order:1;}
  .footer-logos{margin-bottom:18px;}
  .footer-logo-er{height:clamp(40px,10vw,52px);}
  .footer-logo-divider{height:26px;}
  .footer-logo-lottie{height:clamp(48px,12vw,64px);}
  .footer-brand-text{font-size:16px;line-height:1.5;max-width:100%;margin-bottom:18px;}
  .footer-support-logos{gap:18px;margin-bottom:22px;}
  .footer-support-logos img{height:34px;}
  .footer-col-contact{grid-column:1/-1;order:2;margin-top:38px;}
  .footer-col-nav{order:3;margin-top:34px;}
  .footer-col-legal{order:4;margin-top:34px;}
  .footer-links a{min-height:36px;font-size:16px;}
  .footer-links{gap:5px;}
  .footer-bottom{grid-template-columns:1fr;gap:11px;margin-top:32px;padding-top:22px;font-size:13.5px;}
  .footer-bottom > div:last-child{text-align:left;max-width:100%;margin-left:0;}
  .footer-privacy-note{justify-content:flex-start;}
}

/* ===== Reglas migradas desde estilos inline de index.html ===== */
.inl-1{width:100%;max-width:1920px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between}
.inl-2{display:flex;align-items:center;gap:0px}
.inl-3{height:clamp(40px,2.4vw,52px);width:auto;object-fit:contain}
.inl-4{width:1px;height:26px;background:rgba(255,255,255,0.35)}
.inl-5{height:clamp(22px,1.3vw,28px);width:auto;object-fit:contain}
.nav-logo-lottie{height:clamp(52px,3.5vw,64px);width:auto;aspect-ratio:3000/1200;background:transparent;}
.nav-logo-lottie svg{display:block;}
@media (max-width:1279px){
  .inl-3{height:clamp(40px,10vw,52px);}
  .nav-logo-lottie{height:clamp(48px,12vw,64px);}
}
/* Hero — la altura es la estandar de cada resolucion (100svh, no depende del
   video) y arranca detras del header (fixed/transparente, ver .nav). min-height
   usa svh (con fallback a vh) para evitar el salto de la barra de direcciones
   en mobile. */
#hero-section{position:relative;overflow:hidden;background:var(--bg-dark-2);min-height:100vh;min-height:100svh;display:flex;align-items:flex-end}
#hero-video-wrap{position:absolute;inset:0;overflow:hidden}
/* La foto (vertical en mobile — FCSanJuan-mob.webp — y panoramica en
   desktop) SIEMPRE se ve al 100% del ancho, sin recorte, anclada al borde
   superior (height:auto respeta su proporcion real). Como el hero mantiene
   su altura estandar (100svh) y la foto no se estira para llenarla, lo que
   sobra abajo queda transparente y deja ver el propio fondo oscuro de
   #hero-section (mismo color que el final del degrade), que es donde vive
   el texto. El script.js mide el hueco real (alto del hero menos alto de la
   foto, a cualquier ancho) y posiciona/dimensiona el degrade para que
   arranque justo en el borde inferior de la foto, sin costura visible. */
#hero-photo{position:absolute;top:calc(var(--nav-h,90px) - 60px);left:0;width:100%;height:auto;object-fit:contain;z-index:0}
#hero-photo-mobile{display:none}
/* Tinte parejo sobre toda la foto (sin bordes/geometria propia, asi que no
   puede generar ninguna linea o corte visible): 0.32 no alcanzaba para que
   el texto se leyera bien con fotos claras/con detalle de fondo, sobre
   todo en resoluciones de notebook mas bajas donde la foto ocupa casi toda
   la altura del hero. Subido a 0.5. */
.inl-6{position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(var(--bg-dark-1-rgb),0.15)}
#hero-bottom-fade{position:absolute;left:0;right:0;bottom:0;z-index:1;pointer-events:none;transform:translateZ(0);will-change:transform}
#hero-content{position:relative;z-index:2;width:min(90%,900px);margin-inline:auto;text-align:center;box-sizing:border-box;padding-block:22px}
#hero-headline{position:relative;left:50%;transform:translateX(-50%);width:max-content;max-width:none;margin:0;font-family:'Space Grotesk',sans-serif;font-weight:700;line-height:1.08;color:var(--text-on-dark);text-shadow:0 4px 24px rgba(0,0,0,0.5);font-size:clamp(28px,3.6vw,48px);white-space:nowrap}
.inl-13{color:#FF8400}
#hero-segline{display:flex;justify-content:center;gap:0;margin:12px 0 0}
.inl-14{width:90px;height:4px;background:#E53E30}
.inl-15{width:90px;height:4px;background:#FF8400}
.inl-16{width:90px;height:4px;background:#FDDD3F}
.inl-17{width:90px;height:4px;background:#FFFFFF}
.inl-18{width:90px;height:4px;background:#E53E30}
.inl-19{width:90px;height:4px;background:#FF8400}
.inl-20{max-width:640px;margin:12px auto 0;font-size:15px;font-weight:400;line-height:1.4;color:rgba(255,255,255,0.78);text-align:center}
.hero-institutional-lockup{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.hero-institutional-lockup img{height:30px;width:auto;object-fit:contain}

#narrative-section{position:relative;overflow:hidden;padding:clamp(72px,6vw,112px) 64px;background:#0D0B56}
#narrative-photo{position:absolute;left:0;top:0;width:59%;height:100%;object-fit:cover;object-position:left center;z-index:0;-webkit-mask-image:linear-gradient(to right,#000 0%,#000 38%,rgba(0,0,0,0.88) 52%,rgba(0,0,0,0.45) 70%,transparent 100%);mask-image:linear-gradient(to right,#000 0%,#000 38%,rgba(0,0,0,0.88) 52%,rgba(0,0,0,0.45) 70%,transparent 100%)}
#narrative-photo-overlay{position:absolute;left:0;top:0;width:59%;height:100%;z-index:1;pointer-events:none;background:linear-gradient(to right,rgba(13,11,86,0) 0%,rgba(13,11,86,0) 34%,#0D0B56 100%)}
#narrative-pixel-texture{z-index:1}
#narrative-row{position:relative;z-index:2;max-width:1920px;margin-inline:auto;display:flex}
#narrative-spacer{flex:1}
.inl-22{flex:1;display:flex;justify-content:flex-start}
.inl-23{width:min(100%,680px);display:flex;flex-direction:column;align-items:flex-start;text-align:left}
#narrative-photo-mobile{display:none;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:16px;margin-bottom:24px}
.inl-24{display:inline-flex;align-items:flex-end;gap:10px}
.eyebrow-isotype{width:28.6px;height:28.6px;object-fit:contain;flex-shrink:0;display:block;align-self:flex-end;vertical-align:middle}
.inl-30{font-family:'Barlow Condensed',sans-serif;font-size:clamp(14px,0.8vw,16px);font-weight:650;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.9);line-height:1}
#narrative-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(44px,2.7vw,58px);line-height:1.02;max-width:680px;color:var(--text-on-dark);margin-top:18px}
.inl-31{color:#FF8400}
.inl-32{display:flex;width:220px;height:4px;margin-top:10px}
.inl-33{flex:1;background:#E53E30}
.inl-34{flex:1;background:#FF8400}
.inl-35{flex:1;background:#FDDD3F}
.inl-36{flex:1;background:#FFFFFF}
.inl-37{flex:1;background:#E53E30}
.inl-38{flex:1;background:#FF8400}
.inl-39{font-family:'Nunito',sans-serif;font-weight:650;font-size:clamp(19px,1.15vw,23px);line-height:1.35;color:var(--text-on-dark);max-width:560px;margin-top:26px}
.inl-40{color:#FF8400}
.inl-41{color:#FF8400}
.inl-42{font-family:'Nunito',sans-serif;font-weight:400;font-size:clamp(16px,0.95vw,19px);line-height:1.55;color:rgba(255,255,255,0.78);max-width:680px;margin-top:22px}
#paccc{position:relative;overflow:hidden;padding:clamp(50px,4vw,80px) 64px clamp(72px,6vw,112px);background:var(--bg-dark-1)}
.inl-53{position:relative;z-index:2;max-width:1920px;margin-inline:auto}
.inl-54{text-align:center;max-width:900px;margin:0 auto clamp(38px,3vw,56px)}
.inl-55{display:inline-flex;align-items:flex-end;justify-content:center;gap:10px}
.inl-61{font-family:'Barlow Condensed',sans-serif;font-size:clamp(14px,0.8vw,16px);font-weight:650;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.9);line-height:1}
#paccc-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(44px,2.7vw,58px);line-height:1.02;letter-spacing:-0.025em;color:var(--text-on-dark);margin-top:18px}
.inl-62{display:flex;justify-content:center;width:220px;height:4px;margin:10px auto 0}
.inl-63{flex:1;background:#E53E30}
.inl-64{flex:1;background:#FF8400}
.inl-65{flex:1;background:#FDDD3F}
.inl-66{flex:1;background:#FFFFFF}
.inl-67{flex:1;background:#E53E30}
.inl-68{font-family:'Nunito',sans-serif;font-size:clamp(22px,1.4vw,30px);font-weight:700;line-height:1.2;margin-top:26px}
.inl-69{color:#FF8400}
.inl-70{color:var(--text-on-dark)}
.inl-71{font-family:'Nunito',sans-serif;font-size:clamp(17px,1vw,20px);line-height:1.55;font-weight:400;color:rgba(255,255,255,0.76);max-width:900px;margin:20px auto 0}
.inl-73{--seg-color:var(--accent-violet);--seg-color-rgb:var(--accent-violet-rgb)}
.inl-74{--seg-color:var(--accent-fuchsia);--seg-color-rgb:var(--accent-fuchsia-rgb)}
.inl-75{--seg-color:var(--accent-cyan);--seg-color-rgb:var(--accent-cyan-rgb)}
.inl-76{--seg-color:var(--accent-coral);--seg-color-rgb:var(--accent-coral-rgb)}
.inl-77{--seg-color:var(--accent-lime);--seg-color-rgb:var(--accent-lime-rgb)}
#paccc-detail{position:relative;border:1px solid var(--border-on-dark);border-top:none;border-radius:0 0 20px 20px;background:#0D0B56;max-width:1920px;margin-inline:auto}
#paccc-prev{left:-17px;top:50%;z-index:5}
.inl-79{width:14px;height:14px;object-fit:contain;transform:rotate(180deg)}
#paccc-next{right:-17px;left:auto;top:50%;z-index:5}
.inl-80{width:14px;height:14px;object-fit:contain}
.inl-81{position:relative;height:500px;border-radius:0 0 20px 20px;overflow:hidden}
#paccc-detail-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
/* La imagen ocupa todo el panel de fondo; este degrade la oscurece del lado
   izquierdo (donde vive el texto) y abajo, para que el texto quede legible
   sin importar que tan clara sea la foto de cada etapa. */
.inl-83{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(13,11,86,0.9) 0%,rgba(13,11,86,0.75) 30%,rgba(13,11,86,0.15) 60%,rgba(13,11,86,0) 80%),linear-gradient(to right,rgba(13,11,86,0.85) 0%,rgba(13,11,86,0.55) 32%,rgba(13,11,86,0) 58%)}
#paccc-bot{display:none;position:absolute;top:48px;left:64px;width:100px;height:auto;z-index:2;filter:drop-shadow(0 14px 22px rgba(0,0,0,0.45)) saturate(1.6);animation:paccc-bot-float 3.2s cubic-bezier(0.45,0,0.55,1) infinite}
.inl-84{position:absolute;left:0;bottom:28px;z-index:2;padding:0 64px;max-width:min(88%,920px);display:flex;align-items:flex-end;gap:56px}
.paccc-detail-text{max-width:clamp(360px,38vw,640px)}
#paccc-detail-badge{display:inline-block;font-family:'Space Grotesk',sans-serif;font-size:clamp(60px,4.2vw,78px);line-height:1;font-weight:800;letter-spacing:0.04em;padding-bottom:10px;margin-bottom:14px;border-bottom:4px solid currentColor}
#paccc-detail-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(42px,3.2vw,64px);font-weight:800;line-height:1;margin-bottom:16px}
#paccc-detail-intro{font-size:clamp(18px,1.15vw,22px);font-weight:700;line-height:1.6;color:var(--text-on-dark);text-transform:uppercase;margin-bottom:10px}
#paccc-detail-long{font-size:clamp(17px,1.1vw,21px);line-height:1.7;color:var(--text-on-dark-secondary)}
/* Segunda columna del panel (solo etapa "Crea"): grilla de iconos al lado
   del texto, no apilada debajo — evita que 7 items empujen la altura del
   panel (fijo en 568px, .inl-81) mas alla de lo que entra. */
#paccc-crea-list{display:none;grid-template-columns:1fr 1fr;gap:14px 20px;flex-shrink:0}
.paccc-crea-item{display:flex;align-items:center;gap:12px;font-size:clamp(12px,0.8vw,14px);font-weight:700;text-transform:uppercase;color:var(--text-on-dark)}
.paccc-crea-icon{width:32px;height:32px;object-fit:contain;flex-shrink:0}
/* Color tomado del borde real de logros.jpg (background-size:contain en
   #identidad-hero-img deja franjas arriba/abajo con el fondo de la seccion —
   con este valor el limite entre imagen y fondo no se nota). */
/* Sin solape con el titulo/bajada de arriba: a cualquier ancho, si el texto
   envuelve a mas lineas se vuelve mas alto, y un margen negativo fijo termina
   tapandolo (paso con -190px y de nuevo con -40px). El titulo y la bajada
   tienen que quedar siempre completos arriba de la imagen — pegada, sin
   espacio, pero nunca superpuesta. El aspect-ratio de la caja (2020/629) es
   el de la imagen real (logros.jpg mide 2020x629px) — antes usaba una
   proporcion distinta (1697/591) y con background-size:contain esa
   diferencia dejaba una franja vacia (letterboxing) arriba y abajo del
   personaje dentro de la caja: eso era el hueco entre el texto y la
   imagen, no un margen. Con el aspect-ratio real no sobra espacio en
   ningun ancho. */
/* EXPERIENCIA — dos filas de miniaturas en scroll horizontal infinito,
   sentidos opuestos, reutilizando .shorts-thumb/.shorts-frame/.shorts-play-icon
   (mismo componente/click-to-open-modal que ya usa Voces). Mismo patron de
   clonado + animacion que las columnas de Creaciones, pero en X en vez de Y. */
@keyframes experienciaLeft{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes experienciaRight{from{transform:translateX(-50%);}to{transform:translateX(0);}}

/* VOCES — 3 testimonios, mismo tamaño, uno al lado del otro (sin destacado).
   Cada tarjeta usa un <video> nativo (controls, con su propio audio) en vez
   del modal de YouTube — mismo patron ya probado en el panel de FlexClass
   (primeVideoFrame busca un frame real post-fundido como poster, ver
   script.js). */
/* Divisor de segmentos de color a todo el ancho de la card, en el corte
   exacto entre el video y el texto (no es hijo de .voces-card-body, que
   tiene padding horizontal — va como hermano suyo, a ancho completo). */
.voces-card-bar .bar-violet{background:var(--accent-violet)}
.voces-card-bar .bar-fuchsia{background:var(--accent-fuchsia)}
.voces-card-bar .bar-cyan{background:var(--accent-cyan)}
.voces-card-bar .bar-coral{background:var(--accent-coral)}
.voces-card-bar .bar-lime{background:var(--accent-lime)}
/* Etiqueta simple (sin fondo tipo pill): blanco, mayusculas, bien espaciada.
   El color por rol se lo lleva .voces-card-role de abajo, no la etiqueta. */
/* Titulo y bajada en una sola linea a partir de un ancho comodo (evita el
   corte a 2 lineas que quedaba con los max-width mas angostos de antes); por
   debajo de este punto vuelven a bajar de linea con normalidad en vez de
   desbordar. */

/* Imagen mobile: oculta en desktop/intermedio, se muestra full-bleed arriba de
   todo solo por debajo del breakpoint de apilado (misma tecnica que
   #narrative-photo-mobile). */

/* Contenedor visual unico: foto panoramica de fondo, cards superpuestas sobre
   la zona izquierda (desenfocada) de la imagen, franja de cierre abajo. Antes
   la foto (flujo normal) definia el alto y las cards se ubicaban encima con
   position:absolute — si el contenido de las cards necesitaba mas alto del
   que la foto daba a cierto ancho, se cortaba/superponia. Ahora es al reves:
   #resultados-stats queda en flujo normal (su alto real, el que el contenido
   necesite, define el alto del contenedor) y la foto pasa a absolute+cover
   detras, adaptandose a esa altura — el contenido nunca se corta, en el peor
   caso la foto se recorta un poco mas (ya autorizado). */
/* Cards bien anchas: avanzan sobre la imagen (permitido, no hay overlay que
   cubrir). Las tres comparten el mismo ancho (no se dimensionan por
   contenido) para que midan siempre igual de ancho, con su propio alto
   natural cada una segun lo que su texto necesite. */
/* Ancho fijo en ch (escala con el font-size fluido) tomando "+10.000" como
   referencia — la caja mas ancha de las 3 — para que las tres midan igual y
   el texto arranque siempre en la misma columna. */

/* Franja de cierre: footer a todo el ancho DEBAJO de la foto (no superpuesta),
   dentro del mismo contenedor redondeado. */

/* El layout superpuesto (foto de fondo + cards encima) es content-driven:
   #resultados-stats esta en flujo normal y define el alto real del marco
   (#resultados-frame-photo-wrap no tiene alto propio), la foto va detras en
   position:absolute + object-fit:cover adaptandose a ese alto — el
   contenido nunca se corta, en el peor caso la foto se recorta un poco mas.
   Por eso se puede mantener este mismo layout (cards ENCIMA de la foto,
   igual que en desktop) hasta anchos bastante angostos, angostando las
   cards (y por lo tanto haciendolas mas altas, ya que el texto envuelve a
   mas lineas) en vez de saltar a un diseño aparte — solo por debajo de
   640px (telefono) pasa al formato apilado (foto arriba, cards blancas
   sueltas abajo), donde una card superpuesta ya no entra comoda. */

/* Resultados — telefono: la fila horizontal (icono | numero | texto) queda
   muy apretada en pantallas angostas, con el texto exprimido en una columna
   chica. Se reordena a 2 filas: icono+numero arriba, texto abajo a todo el
   ancho — los separadores verticales dejan de tener sentido en ese layout. */

/* Sin imagen de fondo — color solido turquesa de la paleta (ya es el
   background de #passport-section, ver --accent-cyan). */
/* Overlays removidos a pedido — la imagen se ve sin ningun tinte encima. */

/* Flipbook del Pasaporte al Futuro — spread de 2 paginas con animacion de
   vuelta de hoja (bisagra 3D real, sin curvatura de papel). Logica completa
   (paginacion, flip, fallback fade en los cortes de seccion) en script.js. */
/* Paginas con sticker ya pegado (piloto: pagina 3): segunda imagen superpuesta
   a la base, oculta por defecto, que hace un crossfade de opacidad al
   activarla con el boton — nunca reemplaza el <img> base para no perder la
   transicion suave. */
.passport-sticker-img.is-visible{opacity:1}
/* Etiqueta unica que asoma por fuera del libro, arriba del lomo (no vive
   dentro de .passport-page, que tiene overflow:hidden y la recortaria) —
   togglea el sticker de las dos hojas del spread a la vez (setSide ya deja
   sin src el lado que no tiene variante con sticker, asi que ahi no pasa
   nada visualmente). La flecha rebota en loop para llamar la atencion sin
   mover el boton entero. */
@keyframes passportStickerArrowBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){.passport-sticker-img{transition:none}.passport-sticker-toggle-arrow{animation:none}}
/* Tapa: se ve como una unica pagina centrada (no como un spread con un lado
   vacio) — solo se aplica a la tapa (spread 0), no a la retiracion. La
   transicion tapa<->pagina 1-2 pasa a un fundido simple (ver script.js) en
   vez del flip 3D, para no tener que animar tambien el ancho del libro. */
#passport-book.is-cover .passport-page--left,
/* Lado sin pagina (tapa/retiracion): en vez de un <img> vacio (que en algunos
   navegadores rendereaba el icono de "imagen rota"), un cartel con flecha —
   opcionalmente con texto questa anticipa que sigue (ej. la seccion de
   stickers despues de la retiracion). */
/* El display:flex de arriba (regla de autor) le gana en cascada al [hidden]
   por defecto del navegador (regla de user-agent) aunque tengan la misma
   especificidad — sin esto, blankEl.hidden=true en script.js no ocultaba
   nada y el cartel "Planchas de stickers" quedaba visible sobre las paginas
   reales de la seccion de stickers. */
/* Selector reforzado (dos clases) para ganarle en especificidad a
   ".passport-page img" (width/height:100%,cover) — sin esto el icono se
   estiraba a toda la hoja en vez de respetar su tamaño chico. */
@keyframes passportBlankArrow{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}
/* Flechas prev/next afuera del libro, siempre al costado (nunca pisan las
   hojas, en ninguna resolucion): el libro es un flex item que se achica
   fluido (flex:1 1 0%, min-width:0) para dejarles lugar a los botones, en vez
   de un breakpoint fijo que podria no alcanzar en algun ancho intermedio. */

/* Boton "ver a pantalla completa" del flipbook — abre #passport-fs-modal */

/* Visor a pantalla completa del Pasaporte — mismo patron que .creaciones-lightbox */
.passport-fs-modal.is-open{display:flex;}
/* Antes las imagenes tenian height:82vh fijo + max-width:47vw: si el ancho
   resultante a esa altura superaba el 47vw disponible, el flex-item por
   default no se achica mas alla de su tamano intrinseco (min-width:auto de
   flexbox) y overflow:hidden terminaba recortando la pagina derecha en vez
   de achicarla. Con max-height (no height fija) + width/height:auto +
   min-width:0 el navegador siempre encoge la imagen entera para entrar en la
   caja, sin recortar nunca. */
/* Mismo efecto de vuelta de hoja 3D que el flipbook normal (.passport-flip),
   pero superpuesto sobre .passport-fs-content en vez de #passport-book — el
   ancho real de cada hoja en pantalla completa varia (object-fit:contain), pero
   como las dos hojas de un spread comparten el mismo tamaño intrinseco, el
   50%/50% sigue siendo exacto. Solo corre en desktop/tablet (ver JS,
   canFlipFullscreen): en mobile .passport-fs-content pasa a columna y un hinge
   horizontal no tendria sentido geometrico, asi que ahi se sigue usando el
   cambio instantaneo de siempre. */
/* Cada hoja va en su propia caja relativa (en vez de <img> sueltas) para que
   la foto con stickers pueda superponerse exacto arriba de la foto base y
   hacer el crossfade — sin esto no hay como saber el tamano real que le
   toco a esa imagen puntual (varia con object-fit:contain). min-width:0 en
   la caja (no solo en la img) evita el mismo recorte que describe el
   comentario de arriba, ahora que el flex-item es la caja y no la imagen. */
/* Lado sin pagina con aviso (ej. "Planchas de stickers" antes de esa
   seccion): sin imagen que le de tamaño a la caja (shrink-to-fit normal),
   .is-blank la fija al mismo alto/proporcion que una hoja real, con el mismo
   fondo #0B0742 que usa .passport-page en el flipbook chico. */
/* Tapa (spread 0): se ve como una unica pagina centrada, igual que en el
   flipbook normal (#passport-book.is-cover) — el lado sin pagina se oculta
   del todo en vez de mostrarse como caja en blanco. */
/* La foto con stickers no tiene ese fondo: en las hojas donde no existe (sin
   src) quedaria un rectangulo solido tapando por completo la foto base de
   abajo apenas se activa el boton, en vez de no mostrar nada. */
/* Visor a pantalla completa del Pasaporte en telefono + vertical: el spread
   de 2 paginas esta pensado para horizontal (como el flipbook chico, que
   nunca apila — ver #passport-book, siempre 50%/50% lado a lado). Achicar
   ese spread para que entre en un telefono vertical (columna apilada, cada
   pagina angosta) queda ilegible y descolocado — la solucion estandar de
   este tipo de visor (comic/PDF reader mobile) es pedir que roten el
   telefono en vez de forzar el contenido: se oculta el spread y se muestra
   un cartel, y en cuanto rota a horizontal aparece el mismo layout que ya
   usa desktop/tablet, sin ningun ajuste extra. La media query usa
   orientation (no max-width): un telefono en horizontal sigue siendo
   "chico" en px pero ya tiene el ancho de sobra para el spread side-by-side. */
/* Segundo aviso, mas especifico, que JS destapa (quita [hidden]) recien
   despues de unos segundos con el modal abierto y sin lograr pasar a
   horizontal — evita mostrar de entrada un mensaje sobre el bloqueo de
   rotacion a alguien que todavia ni giro el telefono. */
@keyframes passportRotateHint{0%,100%{transform:rotate(0deg);}50%{transform:rotate(-90deg);}}
@media (max-width:900px) and (orientation:portrait){
  .passport-fs-modal.is-open{display:flex;}
}
/* Seguridad — mismo patron visual que Evidencia (#resultados): foto
   enmarcada con las tarjetas superpuestas y franja de cierre debajo; en
   Seguridad las 3 tarjetas van una al lado de la otra (no apiladas) porque
   son mas altas (icono+titulo+descripcion+checklist) que las de Evidencia. */
#security{position:relative;overflow:hidden;padding:clamp(72px,6vw,112px) 64px;background:var(--bg-light-1);color:var(--bg-dark-2);border-top:1px solid var(--border-on-light);border-bottom:1px solid var(--border-on-light)}
.security-inner{position:relative;z-index:2;max-width:1920px;margin-inline:auto}
.security-head{text-align:center;max-width:900px;margin:0 auto 56px}
.security-eyebrow{display:inline-flex;align-items:flex-end;justify-content:center;gap:10px}
.security-eyebrow span{font-family:'Barlow Condensed',sans-serif;font-size:clamp(14px,0.8vw,16px);font-weight:650;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-on-light-secondary);line-height:1}
#security-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(44px,2.7vw,58px);line-height:1.02;letter-spacing:-0.025em;margin-top:18px}
.security-bar{display:flex;justify-content:center;width:220px;height:4px;margin:10px auto 0}
.security-bar .bar-violet{flex:1;background:#E53E30}
.security-bar .bar-fuchsia{flex:1;background:#FF8400}
.security-bar .bar-cyan{flex:1;background:#FDDD3F}
.security-bar .bar-coral{flex:1;background:#FFFFFF}
.security-bar .bar-lime{flex:1;background:#E53E30}
.security-desc{font-family:'Nunito',sans-serif;font-size:clamp(17px,1vw,20px);line-height:1.55;font-weight:400;color:var(--text-on-light-secondary);max-width:780px;margin:20px auto 0}

#security-frame-photo-mobile{display:none}

#security-frame{position:relative;max-width:1500px;margin:0 auto;border-radius:24px;overflow:hidden;box-shadow:0 24px 56px rgba(17,23,53,0.10)}
#security-frame-photo-wrap{position:relative}
#security-frame-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* Igual que #resultados-stats: columna angosta apoyada sobre la izquierda de
   la foto, dejando el resto de la imagen visible a la derecha (no ocupar
   todo el ancho del marco). */
#security-cards{position:relative;z-index:1;display:flex;flex-direction:column;gap:clamp(10px,1.4vw,20px);width:clamp(340px,68%,860px);padding:clamp(18px,3vw,40px)}
.security-card{display:flex;align-items:center;flex-shrink:0;gap:clamp(12px,1.4vw,22px);background:var(--bg-white);border-top:4px solid var(--card-accent);border-radius:14px;box-shadow:0 8px 22px rgba(17,23,53,0.10);padding:clamp(16px,1.6vw,22px) clamp(18px,2vw,26px)}
.security-card--lime{--card-accent:#FF8400}
.security-card--cyan{--card-accent:var(--accent-cyan)}
.security-card--fuchsia{--card-accent:var(--accent-fuchsia)}
.security-card-icon{width:clamp(68px,6vw,104px);height:clamp(68px,6vw,104px);flex-shrink:0;background-color:var(--card-accent);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.security-card-icon--05{-webkit-mask-image:url('assets/img/icon-05.png');mask-image:url('assets/img/icon-05.png')}
.security-card-icon--06{-webkit-mask-image:url('assets/img/icon-06.png');mask-image:url('assets/img/icon-06.png')}
.security-card-icon--07{-webkit-mask-image:url('assets/img/icon-07.png');mask-image:url('assets/img/icon-07.png')}
.security-card-divider{align-self:stretch;width:2px;background:var(--border-on-light);flex-shrink:0}
.security-card-body{min-width:0}
.security-card-heading{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(18px,1.1vw,21px);line-height:1.2;color:var(--card-accent)}
.security-card-desc{font-family:'Nunito',sans-serif;text-transform:uppercase;font-size:clamp(13px,0.75vw,14px);font-weight:600;color:var(--text-on-light-secondary);margin-top:10px;margin-bottom:12px}
.security-card-list{display:flex;flex-direction:column;gap:8px}
.security-card-item{display:flex;align-items:center;gap:10px}
.security-check{width:20px;height:20px;border-radius:50%;background:var(--card-accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.security-card-item div:last-child{font-family:'Nunito',sans-serif;font-size:clamp(14px,0.8vw,16px);color:var(--bg-dark-2)}

/* Mismo criterio que Evidencia: #security-cards es content-driven (flujo
   normal, define el alto real del marco; la foto va detras adaptandose) —
   se puede mantener el layout superpuesto (cards ENCIMA de la foto, igual
   que en desktop) hasta anchos angostos, angostando las cards en vez de
   saltar a un diseño aparte. Solo por debajo de 640px (telefono) pasa al
   formato apilado. */
@media (max-width:640px){
  #security{padding:0 20px clamp(56px,10vw,80px)!important;}
  #security-title{font-size:clamp(28px,9vw,36px)!important;line-height:1.02!important;}
  #security-frame{max-width:100%!important;margin:0!important;border-radius:0!important;overflow:visible!important;box-shadow:none!important;}
  #security-frame-photo-mobile{display:block!important;width:100vw!important;height:auto!important;max-height:280px!important;aspect-ratio:16/9!important;object-fit:cover!important;margin-left:calc(-50vw + 50%)!important;margin-right:calc(-50vw + 50%)!important;margin-top:0!important;margin-bottom:24px!important;}
  #security-frame-photo{display:none!important;}
  #security-cards{position:static!important;width:100%!important;padding:0!important;gap:16px!important;}
  .security-card{width:100%!important;align-items:flex-start!important;}
  .security-card-icon{width:40px!important;height:40px!important;}
}
#reconocimientos{position:relative;overflow:hidden;padding:clamp(72px,6vw,112px) 0;background:var(--bg-dark-2);border-top:1px solid var(--border-on-dark);border-bottom:1px solid var(--border-on-dark)}
.inl-297{display:inline-flex;align-items:flex-end;justify-content:center;gap:10px}
.inl-303{font-family:'Barlow Condensed',sans-serif;font-size:clamp(14px,0.8vw,16px);font-weight:650;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.9);line-height:1}
#reconocimientos-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(44px,2.7vw,58px);line-height:1.02;letter-spacing:-0.02em;color:var(--text-on-dark);margin-top:18px}
.inl-305{display:flex;justify-content:center;width:220px;height:4px;margin:10px auto 0}
.inl-306{flex:1;background:#E53E30}
.inl-307{flex:1;background:#FF8400}
.inl-308{flex:1;background:#FDDD3F}
.inl-309{flex:1;background:#FFFFFF}
.inl-310{flex:1;background:#E53E30}
.inl-311{font-family:'Nunito',sans-serif;font-size:clamp(16px,1.15vw,20px);line-height:1.55;font-weight:400;color:var(--text-on-dark-secondary);max-width:720px;margin:20px auto 0}
.inl-316{flex:1;background:#E53E30}
.inl-317{flex:1;background:#FF8400}
.inl-318{flex:1;background:#FDDD3F}
.inl-319{flex:1;background:#FFFFFF}
.inl-320{flex:1;background:#E53E30}

/* Copy pass — descripcion de Creaciones con IA (mismo patron que #videos-desc) */

/* Copy pass — seccion Manifiesto, separada de #security. Mismo patron visual
   (fondo claro, bloque de titulo centrado) que #resultados y el #security original. */
/* Foto de fondo sin recortar: se dimensiona solo por el alto de la seccion
   (width:auto, sin object-fit:cover), asi se ve completa y se angosta. El
   contenedor usa como background el color exacto del pixel del borde derecho
   de la foto (#00C6E8, tomado de la imagen); como ese color solido ya es el
   fondo de toda la seccion, alcanza con difuminar el propio borde derecho de
   la foto a transparente (mask-image) para que la transicion sea gradual en
   vez de un corte — no hace falta un overlay separado. */
#manifiesto{padding:clamp(90px,9vw,130px) 64px;background:#FF7735;color:var(--text-on-dark);position:relative;overflow:hidden;display:flex;align-items:center;min-height:clamp(420px,42vw,560px)}
#manifiesto-photo{position:absolute;left:0;top:0;height:100%;width:auto;z-index:0;opacity:1;-webkit-mask-image:linear-gradient(to right,#000 0%,#000 72%,transparent 96%);mask-image:linear-gradient(to right,#000 0%,#000 72%,transparent 96%)}
/* Overlay turquesa mas oscuro (mismo tono que el fondo de la seccion,
   #00C6E8, oscurecido) entre la foto y el texto: donde la foto todavia no
   se desvanecio del todo (brazo/pelo de la docente, justo detras del
   titulo/eyebrow) el texto blanco perdia contraste. */
#manifiesto-overlay{position:absolute;inset:0;z-index:1;background:rgba(0,0,0,0.12);pointer-events:none;}
#manifiesto-photo-mobile{display:none}
/* Mismo mecanismo que #narrative-row (El salto pedagogico): spacer al 50%
   + columna de texto al 50%, en vez de justify-content:flex-end (que
   pegaba el texto pegado al borde derecho, mucho mas a la derecha que en
   Hero). */
.manifiesto-inner{position:relative;z-index:2;max-width:1920px;width:100%;margin-inline:auto;display:flex}
#manifiesto-spacer{flex:1}
/* .manifiesto-title-col (flex:1, sin tope) mide el 50% real de la fila,
   igual que .inl-22 en Hero — .manifiesto-title-block (con su max-width
   propio) queda alineado a la izquierda ADENTRO de esa mitad, no ocupando
   toda la mitad. Ponerle flex:1 directo al -block (con max-width) no
   funcionaba: el sobrante que no usaba por el tope se lo terminaba
   llevando el spacer igual, y quedaba en el mismo lugar pegado a la derecha. */
.manifiesto-title-col{flex:1;display:flex;justify-content:flex-start}
.manifiesto-title-block{text-align:left;max-width:560px}
.manifiesto-eyebrow{display:inline-flex;align-items:flex-end;justify-content:flex-start;gap:10px}
.manifiesto-eyebrow span{font-family:'Barlow Condensed',sans-serif;font-size:clamp(14px,0.8vw,16px);font-weight:650;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.85);line-height:1}
#manifiesto-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(44px,2.7vw,58px);line-height:1.02;letter-spacing:-0.02em;margin-top:18px}
.manifiesto-bar{display:flex;justify-content:flex-start;width:220px;height:4px;margin:10px 0 0}
.manifiesto-desc{font-family:'Nunito',sans-serif;font-size:clamp(17px,1vw,20px);line-height:1.55;font-weight:400;color:rgba(255,255,255,0.85);max-width:520px;margin:22px 0 0}

@media (max-width:900px){
  #manifiesto{display:block;min-height:0;padding:0 0 clamp(56px,10vw,80px);background:var(--bg-light-1);color:var(--bg-dark-2);}
  #manifiesto-photo{display:none;}
  #manifiesto-overlay{display:none;}
  #manifiesto-photo-mobile{display:block;width:100vw;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:left center;margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);margin-bottom:28px;}
  .manifiesto-inner{display:block;padding:0 20px;}
  #manifiesto-spacer{display:none;}
  .manifiesto-title-block{text-align:center;max-width:100%;}
  .manifiesto-eyebrow{justify-content:center;}
  .manifiesto-eyebrow span{color:rgba(0,0,0,0.6);}
  #manifiesto-title{color:var(--bg-dark-2);}
  .manifiesto-bar{justify-content:center;margin:14px auto 0;}
  .manifiesto-desc{color:var(--text-on-light-secondary);margin:20px auto 0;max-width:100%;}
}

.bar-violet{flex:1;background:#E53E30}
.bar-fuchsia{flex:1;background:#FF8400}
.bar-cyan{flex:1;background:#FDDD3F}
.bar-coral{flex:1;background:#FFFFFF}
.bar-lime{flex:1;background:#E53E30}