/* Escenario, capas y composición · BRIEF 2, 3, 5, 6, 7 */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#000;overflow:hidden}
body{font-family:var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

#stage{position:absolute;left:50%;top:50%;transform-origin:0 0;overflow:hidden;background:var(--hueso);outline:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#stage.booting{visibility:hidden}
#stage.no-cursor{cursor:none}

/* Líneas con máscara (4.2) */
.line{display:block;overflow:hidden;padding-bottom:.08em}
.line>span{display:inline-block}

/* ---------- 1 · escena clara ---------- */
#light{position:absolute;inset:0;background:var(--hueso) url("../assets/images/poster_abejas.jpg") center/cover}
#light video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:50% 70%}
#lt{position:absolute;left:0;right:0;top:300px;text-align:center;font-weight:400;font-size:104px;line-height:1.04;letter-spacing:-.02em;color:var(--tinta)}
#lt .line{padding-bottom:.1em}

/* ---------- 2 · escena oscura ---------- */
#dark{position:absolute;inset:0;background:var(--tinta);visibility:hidden}
#dark .photo-cam{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
#dark .photo{position:absolute;inset:-6%;background:url("../assets/images/bg_closeup_miel.webp") center/cover;animation:kb-bg 34s ease-in-out infinite alternate}
#dark .veil{position:absolute;inset:0;--veil:.6;background:linear-gradient(180deg,
  rgba(18,12,6,calc(var(--veil) + .2)) 0%,
  rgba(18,12,6,calc(var(--veil) + .05)) 38%,
  rgba(18,12,6,calc(var(--veil) - .15)) 60%,
  rgba(18,12,6,calc(var(--veil) + .12)) 100%)}
#comb{position:absolute;mix-blend-mode:overlay;will-change:transform}
#dark .grain{position:absolute;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:overlay;background:url("../assets/images/grain.svg") 0 0/320px 320px repeat}

@keyframes kb-bg{from{transform:scale(1) translate(0,0)}to{transform:scale(1.08) translate(-2%,1.5%)}}
@keyframes kb-cell{to{transform:scale(1.09) rotate(1.5deg)}}

/* Slide 01 · cabecera */
.head{position:absolute;left:0;right:0;top:104px;display:flex;flex-direction:column;align-items:center;gap:26px;color:var(--papel)}
#t1{font-weight:400;font-size:88px;line-height:1.05;letter-spacing:-.022em;text-align:center}
#k1{font-weight:500;font-size:28px;color:var(--albaricoque)}

/* Plano que deriva */
#layer{position:absolute;inset:0;will-change:transform}
#seed{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
#seed path{fill:var(--papel)}

/* Celdas de imagen (5.4) */
.slot{position:absolute;width:222px;height:192.26px}
.slot .glass{position:absolute;inset:0;clip-path:var(--hex);
  background:linear-gradient(160deg,rgba(253,253,253,.22) 0%,rgba(253,253,253,.06) 40%,rgba(29,29,29,.12) 100%);
  -webkit-backdrop-filter:blur(22px) saturate(1.25);backdrop-filter:blur(22px) saturate(1.25)}
.slot .fill{position:absolute;inset:0;clip-path:var(--hex)}
.slot .kb,.slot .img{position:absolute;inset:0}
.slot .img{background-size:cover;background-position:center}
.slot.on .kb{animation:kb-cell 14s ease-in-out infinite alternate}
#slot0 .img{background-image:url("../assets/images/c1_hex_panal_luz.jpg")}
#slot1 .img{background-image:url("../assets/images/c2_naturaleza_musgo.jpg")}
#slot2 .img{background-image:url("../assets/images/c3_hex_alas.jpg")}
#slot3 .img{background-image:url("../assets/images/c4_hex_basalto.jpg")}

/* Ventana corrediza (5.5) */
#win{position:absolute;left:-210px;top:-181.85px;width:420px;height:363.7px;--p:100}
#win .view{position:absolute;inset:0;clip-path:var(--hex)}
#win .open{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 0 0 calc(var(--p) * 1%))}
#win .open i{position:absolute;inset:0;background:var(--hueso) url("../assets/images/poster_abejas.jpg") center 72%/cover;animation:kb-cell 16s ease-in-out infinite alternate}
.fx-p4 #win .open i{left:-3%;right:-3%;translate:calc(var(--p) * -0.126px) 0}
#win .door{position:absolute;inset:0;clip-path:var(--hex);
  background:linear-gradient(90deg,
    rgba(253,253,253,.10) 0,
    rgba(253,253,253,.10) calc(var(--p) * 1%),
    rgba(29,29,29,.22) calc(var(--p) * 1%),
    rgba(29,29,29,0) calc(var(--p) * 1% + 1.4%))}

/* Slide 02 */
.scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(29,29,29,.8) 0%,rgba(29,29,29,.5) 42%,rgba(29,29,29,0) 72%)}
#sl2{position:absolute;left:140px;top:118px;width:1400px;color:var(--papel)}
#sl2 h1{font-weight:400;font-size:108px;line-height:1;letter-spacing:-.028em}
#sl2 ol{list-style:none;margin-top:330px;display:flex;flex-direction:column;gap:30px}
#sl2 li{font-weight:400;font-size:46px;line-height:1.12;letter-spacing:-.012em}

/* Slides 03 y 04 */
.ctitle{position:absolute;left:0;right:0;top:92px;text-align:center;font-weight:400;font-size:80px;line-height:1.04;letter-spacing:-.024em;color:var(--papel)}
.lab3{position:absolute;display:flex;align-items:center;gap:22px;transform:translateY(-50%);font-weight:500;font-size:32px;letter-spacing:-.005em;color:var(--papel);white-space:nowrap}
.lab3 i{display:block;width:60px;height:1px;background:var(--albaricoque);transform-origin:0 50%}
.lab3.l{flex-direction:row-reverse}
.lab3.l i{transform-origin:100% 50%}

/* Speaker y cierre */
#spk{position:absolute;left:0;right:0;top:672px;text-align:center;font-family:var(--serif);font-weight:400;font-size:46px;letter-spacing:-.012em;color:var(--papel)}
#close{position:absolute;left:0;right:0;top:640px;text-align:center;font-weight:400;font-size:86px;line-height:normal;letter-spacing:-.022em;color:var(--papel)}

/* Cifras (5.4) */
.stat{position:absolute;color:var(--papel)}
.stat .num{display:block;overflow:hidden;font-family:var(--serif);font-weight:400;font-size:84px;line-height:1.02;letter-spacing:-.035em}
.stat .num>span{display:inline-block}
.stat .num .d{display:inline-block;text-align:center}
.fx-p2.tnum .stat .num{font-variant-numeric:tabular-nums}
.stat .lab{display:block;margin-top:10px;font-weight:500;font-size:24px}
.stat .sub{display:block;margin-top:4px;font-weight:400;font-size:19px;color:rgba(253,253,253,.62)}

/* ---------- 3 · logo ---------- */
/* El SVG cubre todo el escenario: el viewBox (layout.js) ubica el logo en la caja del brief
   y el ícono nunca se dibuja fuera de su SVG, ni siquiera ampliado en los pasos 11–17. */
#logo{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;color:var(--tinta);pointer-events:none}
#stage.is-dark #logo{will-change:transform}
#logo path{fill:currentColor}

/* ---------- 4 · progreso ---------- */
#progress{position:absolute;left:96px;bottom:48px;width:30px;height:26px}
#progress path{fill:rgba(29,29,29,.18);transition:fill .8s ease}
#stage.is-dark #progress path{fill:rgba(253,253,253,.2)}
#progress path.on,#stage.is-dark #progress path.on{fill:var(--terracota)}

/* ---------- 5 · hint ---------- */
#hint{position:absolute;right:96px;bottom:50px;font-weight:400;font-size:17px;color:rgba(29,29,29,.45)}

/* ---------- Formato 1:1 · escenario 1080×1080 para la pantalla LED de 672 px (BRIEF 20) ----------
   Mínimo ~23 px de diseño (≈14 px reales en la pantalla); cortes de línea originales salvo donde no entran. */
.fmt-1x1 .head{top:72px}
.fmt-1x1 #t1{font-size:64px}
.fmt-1x1 .stat .lab{font-size:26px}
.fmt-1x1 .stat .sub{font-size:23px}
.fmt-1x1 #sl2{left:64px;top:72px;width:952px}
.fmt-1x1 #sl2 ol{margin-top:395px;gap:26px}
.fmt-1x1 .ctitle{top:72px;font-size:60px}
.fmt-1x1 #close{top:553px;line-height:1.04}
.fmt-1x1 #spk{top:656px}
.fmt-1x1 .lab3{font-size:28px;gap:16px}
.fmt-1x1 .lab3 i{width:40px;height:2px}
.fmt-1x1 #progress{left:48px;bottom:40px;width:40px;height:35px}
.fmt-1x1 #hint{right:48px;bottom:44px;font-size:22px}

@media (prefers-reduced-motion: reduce){
  #dark .photo,.slot.on .kb,#win .open i{animation:none}
}