/* Academia FEP · Inicio (portada) — 9/10/2026.
   Encabezado celeste, fondo «Diagonales del tríptico», tríptico con video en duotono de marca, libro de producción que
   se abre en la entrada y mensaje central. Todo lo de la portada vive bajo .portada; el resto del sitio no cambia,
   salvo el encabezado de Inicio (ver «integración» abajo). Arial / Helvetica y paleta del sitio. Lo maneja js/portada.js. */

/* ============ encabezado celeste, marca y menú en blanco ============ */
:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header,:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header.is-scrolled{--fep-header-sky:#217ab1;--fep-header-hover:#1b6b9e;background:var(--fep-header-sky);border-bottom-color:#16608f;color:#fff;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header.is-scrolled{box-shadow:0 2px 15px #0f223324}
:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header .foundation-header-logo{filter:brightness(0) invert(1)}
:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header .brand-academy{border-left-color:#ffffff8c}
/* Safari: en Inicio, portada.js anima la entrada de «Campus Academia» y cancela esa animación al final; la transición de
   opacidad que editorial.css le da a .brand-academy (pensada para la entrada anterior) lo dejaba invisible */
:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header .brand-academy{transition:none}
:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header .brand-academy strong,:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header .brand-campus-prefix,:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header .academy-cap{color:#fff}
/* el logotipo de Academia (otras rutas) es una imagen con fondo blanco: sobre celeste se muestra su versión en blanco */
:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header .academy-header-logo{background:url("./assets/brand/fep-academia-logotipo-blanco.svg") 50% 50%/contain no-repeat}
:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header .academy-header-logo image{visibility:hidden}
@media(forced-colors:active){:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header .academy-header-logo{background:none}:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header .academy-header-logo image{visibility:visible}}
:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header #nav>a,:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header #nav>a:hover,:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header #nav>a[aria-current]{color:#fff}
:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header #nav>a:not(.nav-campus)::after,:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header.nav-intro-cue #nav>a:not(.nav-campus)::before{background:#fff}
/* «Ingresar usuario»: contorno blanco sobre el mismo celeste (texto blanco 4,7:1) */
:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header #nav>.nav-campus{color:#fff;background:var(--fep-header-sky);border:0;box-shadow:inset 0 0 0 1.5px #ffffffd9}
:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header #nav>.nav-campus::before{border-color:#ffffff66}
:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header #nav>.nav-campus:hover,:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header #nav>.nav-campus[aria-current]{background:var(--fep-header-hover);box-shadow:inset 0 0 0 1.5px #fff}
:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header #nav>.nav-campus>span{background:transparent;color:#fff;border-left-color:#ffffff59}
:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header .menu-toggle{color:#fff;background:transparent}
:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header .menu-toggle:hover,:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header .menu-toggle[aria-expanded=true]{color:#fff;background:var(--fep-header-hover)}
/* menú desplegable (pantallas sin espacio para el menú en línea): panel celeste, opciones blancas */
:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header #nav.open{background:var(--fep-header-sky);border-bottom-color:#ffffff42;box-shadow:0 14px 20px #0f223326}
:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header #nav.open>a:not(.nav-campus):hover,:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header #nav.open>a:not(.nav-campus)[aria-current]{background:var(--fep-header-hover)}
/* cuenta: identidad blanca sobre celeste; el menú de la cuenta sigue blanco con texto oscuro */
:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header .account-trigger{background:var(--fep-header-sky);color:#fff;border-color:#ffffffb8;box-shadow:none}
:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header .account-trigger:hover,:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header .account-trigger[aria-expanded=true]{background:var(--fep-header-hover);color:#fff;border-color:#fff}
:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header .account-trigger :is(.account-name,.account-caption){color:inherit}
:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header .account-avatar{background:#fff;color:#175d89;border-color:#fff}
:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header .account-links{background:#fff;border-color:#b8d3e3;color:#163e57;box-shadow:0 12px 30px #0c38592b}
:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header .account-links :is(a,button){background:transparent;color:#163e57}
:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header .account-links :is(a,button):hover,:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header .account-links [aria-current]{background:#eaf5fc;color:#124f78}
/* foco visible en blanco sobre celeste */
:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header :is(a,button):focus-visible,:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header #nav>a:focus-visible,:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header .nav-campus:focus-visible,:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header .menu-toggle:focus-visible,:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header .account-trigger:focus-visible{outline:3px solid #fff;outline-offset:3px}
:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header .account-links :is(a,button):focus-visible{outline-color:#176b9e}
:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .reading-line{background:#fff}
/* alto contraste del sistema: el logo y el birrete vuelven a su tinta original sobre el fondo del sistema */
@media(forced-colors:active){:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header .foundation-header-logo{filter:none}:is(body[data-route=inicio],html[data-entry=home] body:not([data-route])) .header .academy-cap{color:CanvasText}}
/* entrada de marca: el logo del encabezado espera al que vuela desde el centro */
@media(prefers-reduced-motion:no-preference){
  html[data-entry=home]:is([data-header-intro=pending],[data-header-intro=running]) .header .brand>.foundation-header-logo{opacity:0}
}
.header.brand-in-flight .brand>.foundation-header-logo{opacity:0}
/* encabezado por bloques (Inicio con entrada): durante el vuelo portada.js hace entrar, de izquierda a derecha, Campus
   Academia → navegación → acceso y cuenta, enteros (sin el recorte de la llegada general); aquí sólo esperan ocultos */
html:is([data-header-intro=pending],[data-header-intro=running]) .header.por-bloques :is(.brand-academy,#account-menu,.menu-toggle){opacity:0;transform:translate3d(0,10px,0);clip-path:none}
html:is([data-header-intro=pending],[data-header-intro=running]) .header.por-bloques #nav{opacity:1;transform:none;clip-path:none}
html:is([data-header-intro=pending],[data-header-intro=running]) .header.por-bloques #nav>a{opacity:0;transform:translate3d(0,10px,0)}
html[data-header-intro=reveal] .header.por-bloques :is(.brand-academy,#nav,#account-menu,.menu-toggle){animation:none}

/* ============ medidas comunes de la portada y de su vista previa ============ */
.portada,html[data-entry=home] .initial-view{
  --rail:76px;
  --bw:clamp(300px, min(31vw, 54vh), 540px);           /* ancho del libro abierto (silueta en reposo) */
  --imgw:calc(var(--bw) * 1.4314);                       /* la foto del libro trae aire alrededor de las hojas */
  --imgh:calc(var(--imgw) * .5611);
  --base:calc(var(--rail) + 6px);                        /* la tapa apoya apenas por encima de la línea inferior */
  --hz:calc(var(--base) + var(--imgh) * .375);           /* horizonte: un poco más alto que el borde de las hojas */
}
@media(min-width:621px) and (max-width:999px){.portada,html[data-entry=home] .initial-view{--bw:clamp(300px,min(52vw,54vh),480px)}}
@media(max-width:620px){.portada,html[data-entry=home] .initial-view{--rail:60px;--bw:min(80vw,340px)}}

/* ============ vista previa (antes de que cargue la aplicación): el mismo fondo de la portada, sin nada encima ============ */
html[data-entry=home] .initial-view{position:relative;isolation:isolate;overflow:hidden;min-height:max(640px,calc(100svh - var(--header-height)));
  background:linear-gradient(180deg,#fff 0,#fbfdfe calc((100% - var(--hz)) * .6),#f3f8fb calc(100% - var(--hz) - 30px),#edf3f7 calc(100% - var(--hz) + 30px),#e6edf2 100%)}
html[data-entry=home] .initial-view::before,html[data-entry=home] .initial-view::after{content:"";position:absolute;inset:0 -8% var(--hz);z-index:0;filter:none;height:auto;
  -webkit-mask:linear-gradient(180deg,#000 55%,transparent 100%);mask:linear-gradient(180deg,#000 55%,transparent 100%)}
html[data-entry=home] .initial-view::before{background:linear-gradient(104deg,transparent 0 3%,#2a88c50f 3% 15%,transparent 15% 17.5%,#2a88c509 17.5% 22%,transparent 22% 100%);transform:translateX(-2.5%)}
html[data-entry=home] .initial-view::after{background:linear-gradient(104deg,transparent 0 70%,#2a88c50a 70% 78.5%,transparent 78.5% 80.5%,#2a88c512 80.5% 92%,transparent 92% 100%);transform:translateX(2%)}
@media(max-width:620px){html[data-entry=home] .initial-view{min-height:calc(100svh - var(--header-height))}}

/* ============ portada ============ */
.portada{
  --p-ink:#0d2738;--p-text:#21445a;--p-action:#1d6a9c;--p-action-dark:#175a85;--p-brand:#2a88c5;
  position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;
  min-height:max(640px, calc(100svh - var(--header-height)));
  background:#fff;color:var(--p-ink);font-family:Arial,Helvetica,sans-serif;text-align:left;
  -webkit-font-smoothing:antialiased;
}
.portada :is(img,svg,video){display:block}
.portada :focus-visible{outline:3px solid #0d6aa8;outline-offset:3px;border-radius:6px}
.portada-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.portada .bg-wall,.portada .bg-floor{position:absolute;left:0;right:0}
.portada .bg-wall{top:0;bottom:var(--hz);overflow:hidden;background:linear-gradient(180deg,#fff 0%,#fbfdfe 60%,#f3f8fb 100%)}
.portada .bg-floor{bottom:0;height:var(--hz);background:linear-gradient(180deg,#edf3f7 0%,#e6edf2 100%)}
.portada .bg-wall::before,.portada .bg-wall::after,.portada .bg-floor::before{content:"";position:absolute;pointer-events:none}
/* planos traslúcidos con la inclinación del tríptico, con paralaje lento */
.portada .bg-wall::before,.portada .bg-wall::after{-webkit-mask:linear-gradient(180deg,#000 55%,transparent 100%);mask:linear-gradient(180deg,#000 55%,transparent 100%)}
.portada .bg-wall::before{inset:0 -8%;background:linear-gradient(104deg,transparent 0 3%,#2a88c50f 3% 15%,transparent 15% 17.5%,#2a88c509 17.5% 22%,transparent 22% 100%);animation:portada-deriva-a 26s ease-in-out infinite alternate}
.portada .bg-wall::after{inset:0 -8%;background:linear-gradient(104deg,transparent 0 70%,#2a88c50a 70% 78.5%,transparent 78.5% 80.5%,#2a88c512 80.5% 92%,transparent 92% 100%);animation:portada-deriva-b 32s ease-in-out infinite alternate}
.portada .bg-floor::before{left:0;right:0;top:-30px;height:60px;background:linear-gradient(180deg,#f3f8fb00,#edf3f7)}
@keyframes portada-deriva-a{from{transform:translateX(-2.5%)}to{transform:translateX(2.5%)}}
@keyframes portada-deriva-b{from{transform:translateX(2%)}to{transform:translateX(-2.5%)}}
.portada.is-off .bg-wall::before,.portada.is-off .bg-wall::after{animation-play-state:paused}

/* mensaje */
.portada-stage{position:relative;z-index:3;flex:1;display:flex;align-items:center;justify-content:center;
  padding:clamp(28px,5vh,60px) 0 calc(var(--hz) + clamp(10px,2.2vh,26px))}
.portada-copy{display:flex;flex-direction:column;align-items:center;text-align:center;width:min(760px,calc(100% - 40px))}
.portada .portada-label{display:flex;align-items:center;gap:13px;margin:0;font-size:17px!important;line-height:1.3!important;letter-spacing:.01em}
.portada .lbl-a{font-weight:700;color:#17384f}
.portada .lbl-b{font-weight:400;color:#3a5b70}
.portada .lbl-sep{width:5px;height:5px;border-radius:50%;background:var(--p-brand)}
.portada .portada-title{--fep-h1:clamp(42px,min(5.1vw,8.4vh),76px);margin:clamp(12px,1.9vh,20px) 0 0;max-width:none;
  font-size:var(--fep-h1)!important;line-height:1.02!important;letter-spacing:-.04em!important;font-weight:700!important;color:var(--p-ink);text-wrap:balance}
.portada .portada-title .l1,.portada .portada-title .l2{display:block}
.portada .portada-title em{font-style:normal;color:var(--p-action)}
.portada .portada-lede{margin:clamp(14px,2.2vh,22px) 0 0;max-width:none;font-size:clamp(17px,min(1.4vw,2.5vh),21px)!important;line-height:1.55!important;color:var(--p-text)}
.portada-cta{margin-top:clamp(20px,3.6vh,36px);display:flex;width:min(604px,100%);border-radius:16px;background:#fff;overflow:hidden;
  box-shadow:0 0 0 1px #d4e3ee,0 24px 46px -24px #0d32524d,0 4px 12px -6px #0d32521f}
.portada .cta{flex:1 1 0;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:74px;padding:0 16px 0 24px;text-align:left;text-decoration:none;transition:background-color .2s ease}
.portada .cta-main{background:var(--p-action);color:#fff}
.portada .cta-main:hover{background:var(--p-action-dark)}
.portada .cta-alt{color:var(--p-ink)}
.portada .cta-alt:hover{background:#f3f8fb}
/* el contenedor recorta lo que sobresale: el foco se dibuja hacia adentro (blanco sobre el botón azul) */
.portada .cta:focus-visible{outline:3px solid #0d6aa8;outline-offset:-6px;border-radius:12px}
.portada .cta-main:focus-visible{outline-color:#fff}
.portada .cta-txt{display:flex;flex-direction:column;gap:5px;min-width:0}
.portada .cta small{font-size:12px;font-weight:600;letter-spacing:.015em;line-height:1}
.portada .cta-main small{color:#d6eaf7}
.portada .cta-alt small{color:#4b6274}
.portada .cta b{font-size:17px;font-weight:700;letter-spacing:-.012em;line-height:1.15;white-space:nowrap}
.portada .cta-ico{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.portada .cta-main .cta-ico{background:#ffffff24}
.portada .cta-alt .cta-ico{background:#eaf3fa;color:var(--p-action)}
.portada .cta-ico svg{width:20px;height:20px}
.portada .cta:hover .cta-ico{transform:translateX(2px)}

/* libro: la base de la tapa queda sobre la línea inferior; las cintas cuelgan sobre ella */
.portada-book{position:absolute;z-index:2;left:50%;bottom:calc(var(--base) - var(--imgh) * .1955);width:var(--imgw);aspect-ratio:720/404;transform:translateX(-50%);pointer-events:none}
.book-stage{position:absolute;inset:0}
.book-rest{position:absolute;inset:0;width:100%;height:100%;max-width:none}
/* El recorte raster de la foto contiene escalones de baja opacidad en el borde alto.
   Una curva vectorial, en las mismas coordenadas, limpia sólo esa franja; sin desenfoque
   ni realce que añada halo. Se comparte con los planos de la apertura para evitar un salto. */
.book-rest,.book-top,.book-page,.book-guarda{-webkit-mask-image:url("./assets/brand/libro-contorno-superior.svg");mask-image:url("./assets/brand/libro-contorno-superior.svg");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* apertura (sólo durante la entrada): capas sobre la misma foto.
   foto = mitad derecha quieta (recortada con 1 px de solape y la tela del lomo) · piso = sombra de mesa del cartón
   izquierdo, que aparece al posarse · hoja = cara de la hoja izquierda · canto = las hojas bajo su borde cercano (plano
   vertical) · cartón = borde azul y esquina de la tapa izquierda (se oculta pasada la vertical) · tapa = cartón entelado
   (SVG en el espacio de la foto, plano a −espesor), visible pasada la vertical · sombra = silueta de la hoja
   desenfocada, que se achica hacia el lomo y se apaga al posarse. Al posarse todas muestran la misma foto. */
/* mitad derecha de la foto en tres piezas: la hoja (plano horizontal), su canto con la contratapa y las cintas (plano
   vertical) y el fondo del lomo abierto, que aparece cuando el libro ya se abrió (cerrado lo reemplaza el lomo redondeado) */
.book-rest.is-base{visibility:hidden}
.book-top{clip-path:polygon(49.58% 0%,100% 0%,100% 72.4%,49.58% 72.4%)}
.book-front{clip-path:polygon(49.72% 72%,100% 72%,100% 100%,49.72% 100%);-webkit-mask-size:35.06% 100%,100% 100%;mask-size:35.06% 100%,100% 100%;-webkit-mask-position:73.9144% 0,0 0;mask-position:73.9144% 0,0 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.book-gutter{clip-path:polygon(50.3% 72%,50.3% 79.6%,47.48% 79.6%,47.5% 79.21%,47.64% 77.72%,48.06% 76.73%,48.68% 75.37%,49.58% 73.51%,49.58% 72%)}
.book-top,.book-front,.book-gutter,.book-tailc,.book-spine{will-change:transform,opacity}
.book-open{position:absolute;inset:0;pointer-events:none}
/* con la hoja del lado abierto, la mitad derecha (y todo lo demás) queda por encima de la hoja izquierda */
.book-open.is-late :is(.book-top,.book-guarda-d,.book-front,.book-gutter,.book-board,.book-tail,.book-tailc,.book-spine,.book-cover){z-index:1}
.book-hojas{z-index:2;pointer-events:none}
.book-guarda{will-change:transform,opacity}
.book-layer{position:absolute;inset:0;width:100%;height:100%;max-width:none;transform-origin:0 0}
.book-floor{clip-path:polygon(0.00% 71.66%,17.85% 71.66%,15.28% 81.19%,47.74% 77.48%,47.60% 79.21%,47.53% 81.19%,47.53% 100.00%,0.00% 100.00%);-webkit-mask-image:linear-gradient(#000 79.35%,transparent 79.36%),linear-gradient(90deg,#000 46.9%,transparent 47.53%);mask-image:linear-gradient(#000 79.35%,transparent 79.36%),linear-gradient(90deg,#000 46.9%,transparent 47.53%);opacity:0;will-change:transform,opacity}
.book-page{clip-path:polygon(0% 0%,49.72% 0%,49.72% 73.27%,17.99% 71.78%,0% 71.78%);will-change:transform}
.book-tail{clip-path:polygon(17.85% 71.53%,49.83% 73.02%,49.83% 73.51%,48.78% 75.37%,48.47% 76.16%,18.00% 79.62%);will-change:transform}
.book-board{clip-path:polygon(17.85% 71.66%,18.15% 79.25%,48.53% 75.82%,48.16% 76.73%,47.74% 77.72%,15.28% 81.44%);will-change:transform}
.book-cover{opacity:0;will-change:transform,opacity}
.book-shadow{filter:brightness(0) blur(13px);opacity:0;will-change:transform,opacity;
  -webkit-mask:linear-gradient(90deg,transparent 12%,#000 38%,#000 44%,transparent 47%),linear-gradient(180deg,#000 66%,transparent 74%);
  -webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent 12%,#000 38%,#000 44%,transparent 47%),linear-gradient(180deg,#000 66%,transparent 74%);
  mask-composite:intersect}

/* pie de la portada */
.portada-rail{position:absolute;z-index:3;left:0;right:0;bottom:0;height:var(--rail);display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid #d3e1eb}
.portada .portada-cue{display:inline-flex;align-items:center;gap:12px;margin:0;padding:0;border:0;background:none;font:600 14px/1.2 Arial,Helvetica,sans-serif;color:#17384f;cursor:pointer;white-space:nowrap}
.portada .cue-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#ffffffb3;box-shadow:inset 0 0 0 1.5px #b9cedd;color:var(--p-action);transition:box-shadow .2s ease}
.portada .cue-ico svg{width:18px;height:18px}
.portada .portada-cue:hover .cue-ico{box-shadow:inset 0 0 0 1.5px var(--p-action)}
.portada .portada-sign{margin:0;font-size:12px!important;line-height:1.3!important;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#4b6274;white-space:nowrap}
.portada .portada-sign span{margin:0 12px;color:#9db5c6}

/* ============ tríptico: tres ventanas paralelas sobre un mismo video ============ */
.trip{position:absolute;z-index:4;top:0;right:var(--trip-right,0);width:var(--trip-w,min(36vw,600px));aspect-ratio:2.1;container-type:inline-size;pointer-events:none}
.trip[data-space=tight]{visibility:hidden}
.trip-defs{position:absolute;width:0;height:0;overflow:hidden}
.trip-shadow{position:absolute;inset:0;filter:drop-shadow(0 20px 26px #0d32522e) drop-shadow(0 3px 5px #0d32521a)}
.trip-window{position:absolute;inset:0;clip-path:url(#trip-clip);-webkit-clip-path:url(#trip-clip);background:#165b86;pointer-events:auto;cursor:pointer;overflow:hidden}
/* el video y su póster ya vienen en grises (contraste y brillo incluidos): el duotono es la capa de color */
.trip-media{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.trip-video{opacity:0;transition:opacity .6s ease}
.trip[data-state=playing] .trip-video,.trip[data-state=paused] .trip-video{opacity:1}
.trip-tint{position:absolute;inset:0;background:linear-gradient(118deg,#2a86c2 0%,#1f74ad 46%,#165b86 100%);mix-blend-mode:multiply}
.trip-folds{position:absolute;inset:0;background:linear-gradient(104deg,transparent 0 61%,#aadcf31a 61% 76%,transparent 76%),linear-gradient(104deg,transparent 0 77%,#bbe6f612 77% 100%)}
.trip-veil{position:absolute;inset:0}
.trip-veil.v1{clip-path:polygon(12% 0,54% 0,42% 100%,0 100%);background:linear-gradient(180deg,#0f3d6280,#0f3d6299)}
.trip-veil.v2{clip-path:polygon(55% 0,83% 0,72.2% 90%,44.2% 90%);background:#0f3d6247}
/* registros: dentro de la primera ventana, cada renglón sobre el eje inclinado de la ventana */
.trip-regs{position:absolute;inset:0}
.portada .trip-reg{position:absolute;left:0;width:54%;top:50%;transform:translateY(-54%);display:flex;flex-direction:column;align-items:center;gap:.08em;margin:0;
  color:#fff;font-size:5.1cqw!important;line-height:1.12!important;letter-spacing:-.012em;text-align:center;font-weight:400}
.trip-reg span{display:block;white-space:nowrap;opacity:0;transform:translate(var(--dx,0), .45em);transition:opacity .45s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)}
.trip-reg span:nth-child(1){--dx:1.9cqw;transition-delay:0s}
.trip-reg span:nth-child(2){--dx:0cqw;transition-delay:.06s}
.trip-reg span:nth-child(3){--dx:-1.9cqw;transition-delay:.12s}
.trip-reg.two span:nth-child(1){--dx:.95cqw}.trip-reg.two span:nth-child(2){--dx:-.95cqw}
.trip-reg b{font-weight:700}
.trip[data-reg=fep] .trip-reg[data-reg=fep] span,.trip[data-reg=cuidar] .trip-reg[data-reg=cuidar] span,
.trip[data-reg=formacion] .trip-reg[data-reg=formacion] span,.trip[data-reg=desarrollo] .trip-reg[data-reg=desarrollo] span{opacity:1;transform:translate(var(--dx,0),0)}
.trip-reg.out span{opacity:0;transform:translate(var(--dx,0),-.35em);transition-duration:.3s,.35s;transition-delay:0s}
.trip-mark{position:absolute;left:63.4%;top:43%;width:17cqw;transform:translate(-50%,-50%)}
.trip-mark img{width:100%;height:auto}
.trip-dots{position:absolute;left:5.5cqw;bottom:8.5%;display:flex;gap:.9cqw}
.trip-dots i{position:relative;width:3.2cqw;height:2px;border-radius:2px;background:#ffffff4d;overflow:hidden}
.trip-dots i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left center}
.trip-dots i.done::after{transform:scaleX(1)}
.trip-dots i.on::after{transform:scaleX(var(--p,0))}
/* control del video: aparece sólo con el foco del teclado (Esc también pausa; un clic sobre el tríptico pausa o reanuda) */
.portada .trip-control{position:absolute;right:12px;top:calc(100% + 10px);pointer-events:auto;margin:0;padding:9px 14px;border:0;border-radius:10px;background:#fff;color:var(--p-ink);font:700 13px/1.2 Arial,Helvetica,sans-serif;box-shadow:0 6px 18px #0d325233;
  clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.portada .trip-control:focus-visible{clip-path:none;width:auto;height:auto}

/* ============ entrada de marca ============ */
/* antes de arrancar (foto del libro y logo listos, tope breve) sólo se ve el fondo */
.portada[data-entrada=waiting] :is(.portada-copy,.portada-rail,.trip,.book-stage){opacity:0}
.portada:is([data-entrada=waiting],[data-entrada=running]) :is(.portada-cta,.portada-rail){pointer-events:none}
.portada:is([data-entrada=waiting],[data-entrada=running]) .trip-window{pointer-events:none}
.portada-flight{position:fixed;z-index:45;pointer-events:none;transform-origin:0 0;will-change:transform,opacity}
.portada-flight img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain}
.portada-flight .pf-white{filter:brightness(0) invert(1);opacity:0}

/* ============ tamaños ============ */
@media(max-width:1180px){.portada .cta{padding:0 14px 0 20px}.portada .cta b{font-size:16px}}
@media(min-width:621px) and (max-width:999px){
  .portada-stage{padding-top:calc(var(--trip-h,0px) * .55 + 24px)}
}
@media(max-width:620px){
  .portada{min-height:calc(100svh - var(--header-height))}   /* la primera pantalla es la portada; si no entra, crece */
  .trip{--trip-w:min(66vw,280px);right:0}
  .portada-stage{padding:calc(min(66vw,280px) / 2.1 + 26px) 0 calc(var(--hz) + 18px)}
  .portada .portada-label{font-size:14px!important;gap:9px}
  .portada .portada-title{--fep-h1:clamp(36px,10.4vw,44px);line-height:1.04!important}
  .portada .portada-lede{font-size:16.5px!important}
  .portada .br-d{display:none}
  .portada-cta{flex-direction:column;border-radius:14px}
  .portada .cta{min-height:64px;padding:0 14px 0 18px}
  .portada .cta b{font-size:16px}
  .portada .portada-sign{display:none}
}
@media(prefers-reduced-motion:reduce){
  .portada .bg-wall::before,.portada .bg-wall::after{animation:none}
  .portada :is(.trip-reg span,.trip-video,.cta-ico,.cta,.cue-ico){transition:none}
}
/* Quiénes somos: logo de la Fundación en vector (morado institucional); en alto contraste conserva su placa blanca. */
@media(forced-colors:active){.academy-foundation-link img{forced-color-adjust:none;background:#fff;padding:10px 12px;border-radius:6px}}