/* AJPPM · Presentación de la marca en cuatro escenas.
   Escenario fijo de 1920 x 1080 que se escala a la ventana; cada escena se anima con GSAP (js/presentacion.js).
   Misma mecánica que la propuesta de Aera; la marca es la de AJPPM (negro institucional, Anybody expandida, Inter). */

@font-face{font-family:Anybody;src:url('../assets/fuentes/anybody-150-800.woff2') format('woff2');font-weight:800;font-stretch:150%;font-display:swap}
@font-face{font-family:Anybody;src:url('../assets/fuentes/anybody-120-800.woff2') format('woff2');font-weight:800;font-stretch:120%;font-display:swap}
@font-face{font-family:Inter;src:url('../assets/fuentes/inter-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url('../assets/fuentes/inter-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url('../assets/fuentes/inter-600.woff2') format('woff2');font-weight:600;font-display:swap}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --negro:#0b0f14;--negro-2:#11161d;--mesa:#05070a;--blanco:#fff;--papel:#f5f4ef;--tinta:#111820;
  --gris:#a7b0ba;--gris-p:#5a6470;--gris-m:#e5e7eb;--linea:rgba(255,255,255,.14);--linea-p:#d8d6cf;
  --verde:#006847;--rojo:#ce1126;
  --fd:Anybody,Inter,Arial,sans-serif;--ft:Inter,Arial,sans-serif;
}
html,body{height:100%;background:var(--mesa);overflow:hidden;font-family:var(--ft);color:var(--blanco);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;color-scheme:dark}
[hidden]{display:none!important}
img,svg{display:block}
button,a{font:inherit;color:inherit;touch-action:manipulation}button{background:none;border:0;cursor:pointer}
::selection{background:var(--gris-m);color:var(--negro)}
:focus-visible{outline:2px solid var(--blanco);outline-offset:3px}

/* ══ Escenario ══ */
#escenario{position:fixed;left:50%;top:50%;width:1920px;height:1080px;margin:-540px 0 0 -960px;overflow:hidden;background:var(--negro);transform:scale(var(--s,1))}
.esc{position:absolute;inset:0;visibility:hidden;opacity:0;overflow:hidden;background:var(--negro);color:var(--blanco)}
.esc.papel{background:var(--papel);color:var(--tinta)}
.abs{position:absolute}

/* Marco común de la lámina */
.cab{position:absolute;left:120px;right:120px;top:0;height:76px;display:flex;justify-content:space-between;align-items:center;font-size:17px;color:var(--gris);font-weight:500;border-bottom:1px solid var(--linea);z-index:5}
.papel .cab{color:var(--gris-p);border-color:var(--linea-p)}
.cab b{font-family:var(--fd);font-stretch:150%;font-weight:800;letter-spacing:.04em;color:var(--blanco)}
.papel .cab b{color:var(--tinta)}
.folio{position:absolute;right:120px;bottom:30px;font-size:17px;color:var(--gris);font-weight:500;z-index:5}
.papel .folio{color:var(--gris-p)}
.folio b{color:var(--blanco);font-weight:600}.papel .folio b{color:var(--tinta)}

/* Títulos por líneas: cada línea sube desde su máscara */
.ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.ln>span{display:block}
.titulo{font-family:var(--fd);font-weight:800;font-stretch:120%;line-height:.98;letter-spacing:-.02em}
.display{font-family:var(--fd);font-weight:800;font-stretch:150%;line-height:.95;letter-spacing:-.025em}
.lead{font-size:26px;line-height:1.35;color:var(--gris);font-weight:400}
.papel .lead{color:var(--gris-p)}

/* Diagonales del sistema: verde arriba a la izquierda, roja abajo a la derecha, a 67 grados */
.diag i{position:absolute;width:26px;height:140%;top:-20%;transform:skewX(-23deg);transform-origin:50% 0}
.diag .v{left:-90px;background:var(--verde)}.diag .r{right:-90px;background:var(--rojo)}
.diag.tenue i{opacity:.16}

.franja{display:grid;grid-template-columns:1fr 1fr 1fr;width:228px;height:12px;transform-origin:0 50%}
.franja i:nth-child(1){background:var(--verde)}.franja i:nth-child(2){background:var(--blanco);box-shadow:inset 0 0 0 1px var(--gris-m)}.franja i:nth-child(3){background:var(--rojo)}

/* ══ Escena 1 · Portada ══ */
.p-lockup{left:150px;top:150px;width:660px;height:660px}
.p-texto{left:940px;top:330px;width:880px}
.p-texto h1{font-size:84px}
.p-esencia{margin-top:36px;font-size:30px;max-width:30ch}
.p-fecha{margin-top:28px;font-size:17px;color:var(--gris)}
.p-pista{left:120px;bottom:34px;font-size:16px;color:var(--gris);display:flex;align-items:center;gap:10px}
.p-pista svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ══ Escena 2 · La marca ══ */
.m-titulo{left:120px;top:128px;width:1100px;font-size:54px}
.m-verbos{left:120px;top:290px;width:800px;list-style:none}
.m-verbos li{display:grid;grid-template-columns:34px 1fr;column-gap:24px;align-items:start;padding:18px 0;border-top:1px solid var(--linea)}
.m-verbos li:last-child{border-bottom:1px solid var(--linea)}
.m-verbos i{display:block;width:16px;height:40px;margin-top:4px;transform:skewX(-23deg);background:var(--blanco)}
.m-verbos li:nth-child(1) i{background:var(--verde)}.m-verbos li:nth-child(3) i{background:var(--rojo)}
.m-verbos b{display:block;font-family:var(--fd);font-stretch:120%;font-weight:800;font-size:34px;line-height:1}
.m-verbos span{display:block;margin-top:8px;font-size:19px;line-height:1.35;color:var(--gris);max-width:44ch}
.m-iso{left:1060px;top:250px;width:740px;height:528px}
.m-lectores{left:120px;top:760px;width:800px;display:grid;grid-template-columns:1fr 1fr;column-gap:40px}
.m-lectores article{padding-top:18px;border-top:1px solid var(--linea)}
.m-lectores h3{font-family:var(--fd);font-stretch:120%;font-weight:800;font-size:24px;line-height:1;margin-bottom:12px}
.m-lectores p{font-size:17px;line-height:1.4;color:var(--gris)}
.m-promesas{left:1060px;top:830px;width:740px;display:grid;gap:14px}
.m-promesas li{list-style:none;display:grid;grid-template-columns:1fr auto;align-items:baseline;padding:12px 0;border-top:1px solid var(--linea)}
.m-promesas b{font-family:var(--fd);font-stretch:150%;font-weight:800;font-size:28px;line-height:1}
.m-promesas span{font-size:17px;color:var(--gris)}

/* ══ Escena 3 · El sistema ══ */
.s-titulo{left:120px;top:126px;width:1680px;font-size:60px}
.s-tablero{left:120px;top:250px;width:620px;height:620px;background:var(--blanco);box-shadow:inset 0 0 0 1px var(--linea-p);overflow:hidden}
.s-tablero .guia{position:absolute;top:-10%;height:120%;width:1px;background:rgba(17,24,32,.22);transform:rotate(-23deg);transform-origin:50% 0}
.s-tablero .g1{left:44%}.s-tablero .g2{left:72%}
.s-tablero svg{position:absolute;left:17%;top:22%;width:66%;height:auto}
.s-angulo{position:absolute;right:28px;bottom:22px;font-family:var(--fd);font-stretch:120%;font-weight:800;font-size:54px;line-height:1;color:var(--tinta)}
.s-angulo sup{font-size:.5em;vertical-align:top}
.s-etq{font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-p)}
.s-versiones{left:840px;top:250px;width:960px}
.s-versiones ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:14px}
.s-versiones .caja{height:150px;display:grid;place-items:center;padding:22px;background:var(--negro);box-shadow:inset 0 0 0 1px var(--linea)}
.s-versiones .caja.clara{background:var(--blanco);box-shadow:inset 0 0 0 1px var(--linea-p)}
.s-versiones .caja img{max-width:82%;max-height:100px}
.s-versiones .caja.ancha img{max-width:92%}
.s-versiones figcaption{margin-top:10px;font-size:15px;color:var(--gris-p);line-height:1.35}
.s-versiones figcaption b{display:block;color:var(--tinta);font-weight:600}
.s-color{left:840px;top:530px;width:960px}
.s-color ul{list-style:none;display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1fr;gap:14px;margin-top:14px;height:120px}
.s-color li{display:flex;flex-direction:column;justify-content:space-between;padding:14px 16px;font-size:15px;font-weight:600}
.s-color li b{font-weight:500;font-size:14px;letter-spacing:.06em;opacity:.95}
.c-negro{background:var(--negro);color:var(--blanco);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.c-blanco{background:var(--blanco);color:var(--negro);box-shadow:inset 0 0 0 1px var(--linea-p)}
.c-gris{background:var(--gris-m);color:var(--negro)}.c-verde{background:var(--verde);color:var(--blanco)}.c-rojo{background:var(--rojo);color:var(--blanco)}
.s-regla{margin-top:14px;font-size:17px;color:var(--gris-p)}
.s-tipo{left:840px;top:760px;width:960px}
.s-familias{display:grid;grid-template-columns:1.25fr 1fr;column-gap:48px;margin-top:10px;align-items:end}
.s-familias strong{display:block;font-family:var(--fd);font-stretch:150%;font-weight:800;font-size:80px;line-height:.9;letter-spacing:-.03em;color:var(--tinta)}
.s-familias em{display:block;font-family:var(--ft);font-style:normal;font-weight:600;font-size:72px;line-height:.9;letter-spacing:-.03em;color:var(--tinta)}
.s-familias p{margin-top:12px;font-size:17px;line-height:1.4;color:var(--gris-p);max-width:40ch}

/* ══ Escena 4 · Aplicaciones y cierre ══ */
.a-titulo{left:120px;top:130px;width:780px;font-size:38px}
.a-lead{left:120px;top:250px;width:680px;font-size:22px}
.a-botones{left:120px;top:410px;display:flex;gap:16px}
.boton{display:inline-flex;align-items:center;gap:10px;height:60px;padding:0 28px;background:var(--blanco);color:var(--negro);text-decoration:none;font-weight:600;font-size:18px;transition:transform .16s cubic-bezier(.23,1,.32,1)}
.boton:active{transform:scale(.97)}
.boton.borde{background:transparent;color:var(--blanco);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.a-nota{left:120px;top:500px;width:680px;font-size:16px;color:var(--gris);line-height:1.5}
.a-cierre{left:120px;top:800px;width:720px;font-size:46px}
.a-franja{left:120px;top:928px}
.a-mosaico{left:880px;top:118px;width:920px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.a-mosaico figure{aspect-ratio:1/1;overflow:hidden;background:var(--negro-2)}
.a-mosaico img{width:100%;height:100%;object-fit:cover}
.a-pie{left:880px;top:752px;font-size:14px;color:var(--gris);letter-spacing:.06em;text-transform:uppercase;font-weight:600}

/* ══ Escena 5 · Video ══ */
#e-video{background:#000}
#e-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.v-play{position:absolute;left:120px;top:100px;display:inline-flex;align-items:center;gap:18px;height:84px;padding:0 40px 0 20px;border-radius:100px;background:var(--blanco);color:var(--negro);font-family:var(--fd);font-stretch:120%;font-weight:800;font-size:26px;z-index:3;transition:transform .2s cubic-bezier(.23,1,.32,1),opacity .3s}
.v-play:active{transform:scale(.97)}
.v-play i{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:var(--negro)}
.v-play svg{width:20px;height:20px;fill:var(--blanco)}
#e-video.reproduciendo .v-play,#e-video.reproduciendo .v-pie{opacity:0;pointer-events:none}
.v-pie{position:absolute;left:120px;bottom:40px;display:flex;gap:18px;align-items:baseline;font-size:18px;color:var(--gris);z-index:3;transition:opacity .4s}
.v-pie b{font-family:var(--fd);font-stretch:150%;font-weight:800;color:var(--blanco);letter-spacing:.04em}
#e-video .folio{z-index:3}

/* ══ Controles ══ */
#controles{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:14px;background:rgba(5,7,10,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--linea);border-radius:100px;padding:8px 10px 8px 8px;color:var(--blanco);font-size:13px;transition:opacity .4s,transform .4s;max-width:calc(100vw - 32px)}
#controles.dormido{opacity:0;transform:translate(-50%,12px);pointer-events:none}
.ctl{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--gris);transition:background .2s,color .2s}
.ctl:hover{background:rgba(255,255,255,.08);color:var(--blanco)}
.ctl svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ctl:disabled{opacity:.3;cursor:default}.ctl:disabled:hover{background:none}
#reproducir{height:36px;border-radius:100px;background:var(--blanco);color:var(--negro);display:flex;align-items:center;gap:8px;padding:0 16px 0 12px;font-weight:600;font-size:13px}
#reproducir:active{transform:scale(.97)}
#marcas{display:flex;gap:6px;align-items:center}
.marca{width:34px;height:5px;border-radius:4px;background:rgba(255,255,255,.16);position:relative;overflow:hidden;padding:0}
.marca::after{content:"";position:absolute;inset:-8px 0}
.marca.vista{background:rgba(255,255,255,.55)}
.marca.actual{background:rgba(255,255,255,.22)}
.marca__lleno{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--blanco)}
.marca.actual .marca__lleno{width:var(--p,100%)}
#contador{font-size:13px;color:var(--gris);min-width:48px;text-align:center}
body.en-inicio #controles{opacity:0!important;pointer-events:none}
@media (max-width:900px){#contador{display:none}.marca{width:18px}}
@media (max-height:520px){#controles{bottom:8px;padding:4px 6px 4px 4px;gap:10px}.ctl{width:32px;height:32px}#reproducir{height:32px;font-size:12px}}

/* ══ Pantalla de inicio ══ */
#inicio{position:absolute;inset:0;z-index:35;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:var(--negro)}
#inicio.ver{display:flex}
#inicio .inicio__iso{width:150px;height:auto;margin-bottom:34px}
#inicio .inicio__sub{font-family:var(--fd);font-stretch:150%;font-weight:800;font-size:22px;letter-spacing:.06em;color:var(--blanco);margin-bottom:8px}
#inicio .inicio__que{font-size:22px;color:var(--gris);margin-bottom:44px}
#inicio .inicio__boton{display:inline-flex;align-items:center;gap:18px;height:84px;padding:0 44px 0 22px;border-radius:100px;background:var(--blanco);color:var(--negro);font-family:var(--fd);font-stretch:120%;font-weight:800;font-size:28px;letter-spacing:-.01em;transition:transform .2s cubic-bezier(.23,1,.32,1),box-shadow .2s}
#inicio .inicio__boton:hover{transform:translateY(-2px);box-shadow:0 18px 50px rgba(0,0,0,.5)}
#inicio .inicio__boton:active{transform:scale(.98)}
#inicio .inicio__boton i{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--negro)}
#inicio .inicio__boton svg{width:20px;height:20px;fill:var(--blanco)}
#inicio .inicio__manual{margin-top:30px;font-size:18px;color:var(--blanco);text-decoration:underline;text-underline-offset:4px}
#inicio .inicio__nota{margin-top:30px;font-size:15px;color:var(--gris)}

/* ══ Aviso para teléfono en vertical ══ */
#rotar{position:fixed;inset:0;z-index:60;background:rgba(5,7,10,.96);color:var(--blanco);display:none;place-items:center;text-align:center;padding:32px 16px}
#rotar.ver{display:grid}
#rotar svg{width:56px;height:56px;margin:0 auto 18px;fill:none;stroke:var(--blanco);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#rotar p{font-family:var(--fd);font-stretch:120%;font-weight:800;font-size:24px;line-height:1.2;max-width:320px;margin:0 auto 10px}
#rotar small{display:block;font-size:15px;color:var(--gris);max-width:300px;margin:0 auto 22px;line-height:1.5}
#rotar button{border:1px solid rgba(255,255,255,.3);border-radius:100px;padding:10px 22px;font-size:15px}

@media (prefers-reduced-motion:reduce){
  #controles,.ctl,#reproducir,.boton,#inicio .inicio__boton{transition:none}
}

/* Exportación a PDF (?pdf=1): sin controles ni pista de navegación */
.pdf #controles,.pdf .p-pista,.pdf #rotar,.pdf .a-botones,.pdf .a-nota{display:none!important}
.pdf .a-cierre{top:430px}.pdf .a-franja{top:558px}