/* ============================================================
   TIPOGRAFÍA DE MARCA — según el manual
   Aminute Regular: títulos principales y frases cortas de gran tamaño.
   Inter: uso general, textos largos y párrafos de letra pequeña.
   Ambas autohospedadas: ni una petición a servidores externos.
   ============================================================ */
@font-face{
  font-family:'Aminute';
  src:url('fonts/aminute.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{font-family:'Inter';src:url('fonts/inter-latin-300-normal.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* ================= TU MARCA COLOMBIA · Portafolio 2026 =================
   Reconstrucción v2 — prioridad: ESTABILIDAD.

   Reglas que se respetan aquí:
   - Ninguna lámina se recorta, recolorea, reposiciona ni escala por encima
     de 1. Todas se muestran planas y completas.
   - Ninguna animación está ligada al scroll. Cada lámina entra una vez y
     se queda quieta para siempre.
   - Sin `will-change` global, sin secciones ancladas, sin parallax.
   ====================================================================== */
:root{
  --tipo-titulo:'Aminute','Poppins',system-ui,sans-serif;
  --tipo-texto:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --negro:#050606;
  --negro-2:#0A0E10;
  --negro-3:#111820;
  --lima:#D6F84A;
  --lima-2:#EFFD43;
  --cyan:#38E4FB;
  --azul:#0A6BFF;
  --blanco:#F4F7F5;
  --nav-h:58px;
  --ar:1.388888;          /* 1500 / 1080 — proporción exacta de la lámina */
  --chrome:150px;         /* nav + etiqueta + respiro inferior */
  --vh:100vh;             /* lo fija JS una sola vez; nunca cambia al scrollear */
}
*{margin:0;padding:0;box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  overflow-x:hidden;
}
/* Sin scroll-snap.
   Con escenas ancladas de 3 a 4 pantallas, el snap por proximidad tiraba del
   scroll hacia la sección vecina y cortaba las animaciones a media reproducción:
   las piezas aparecían un instante y desaparecían. El ritmo lo da ahora la
   altura compacta de cada sección. */
body{
  background:var(--negro);
  color:var(--blanco);
  font-family:var(--tipo-texto);
  /* `clip` recorta el desbordamiento lateral SIN convertir el body en
     contenedor de scroll. Con `hidden`, el body pasaba a ser el scrollport
     de referencia y todos los escenarios anclados quedaban desfasados: las
     piezas entraban y salían a destiempo. */
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
body.lock{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}

body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% 0%,rgba(56,228,251,.06),transparent 60%),
    radial-gradient(100% 60% at 50% 100%,rgba(214,248,74,.05),transparent 60%);
}

/* ================= PRELOADER ================= */
#loader{
  position:fixed;inset:0;z-index:200;background:var(--negro);
  display:grid;place-items:center;transition:opacity .6s ease,visibility .6s;
}
#loader.done{opacity:0;visibility:hidden;pointer-events:none}
.ld-inner{text-align:center;width:min(280px,72vw)}
.ld-iso{width:78px;height:78px;margin:0 auto 24px;border-radius:19px;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
.ld-bar{height:2px;background:rgba(244,247,245,.14);border-radius:2px;overflow:hidden}
.ld-bar span{display:block;height:100%;width:0;background:var(--lima);transition:width .3s linear}
.ld-txt{margin-top:14px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,247,245,.5)}
.ld-txt b{color:var(--lima);font-weight:600}

/* ================= PROGRESO ================= */
#progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:120;background:rgba(244,247,245,.08)}
#progressFill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--lima))}

/* ================= NAV (siempre visible, no se mueve) ================= */
#nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:110;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(14px,3vw,30px);
  background:rgba(5,6,6,.86);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(244,247,245,.07);
}
.nav-brand{display:flex;align-items:center;gap:10px}
.nav-iso{width:32px;height:32px;border-radius:9px}
.nav-name{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(244,247,245,.7)}
.nav-name b{color:var(--lima);font-weight:600}
.nav-right{display:flex;align-items:center;gap:14px}
#chapterTag{
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--negro);
  background:var(--lima);padding:5px 11px;border-radius:100px;font-weight:600;
}
#menuBtn{width:38px;height:38px;display:grid;align-content:center;gap:5px;justify-items:end}
#menuBtn span{display:block;height:2px;width:22px;background:var(--blanco);border-radius:2px;transition:.3s ease}
#menuBtn span:nth-child(2){width:15px}
#menuBtn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#menuBtn.open span:nth-child(2){opacity:0}
#menuBtn.open span:nth-child(3){width:22px;transform:translateY(-7px) rotate(-45deg)}

/* ================= MENÚ ================= */
#menu{
  position:fixed;inset:0;z-index:105;background:rgba(5,6,6,.98);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--nav-h) + 22px) clamp(20px,6vw,80px) 30px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s;
}
#menu.open{opacity:1;visibility:visible}
.menu-kicker{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--lima);margin-bottom:16px}
#menuList{list-style:none;display:flex;flex-direction:column}
#menuList a{
  display:flex;align-items:baseline;gap:14px;padding:clamp(6px,1.1vh,11px) 0;
  border-bottom:1px solid rgba(244,247,245,.08);
  font-size:clamp(21px,4.4vw,38px);font-weight:600;letter-spacing:-.01em;
  transition:color .2s ease;
}
#menuList a i{font-style:normal;font-size:10px;letter-spacing:.12em;color:rgba(244,247,245,.35);min-width:24px}
#menuList a:hover,#menuList a.on{color:var(--lima)}
.menu-foot{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}

.btn{
  display:inline-block;padding:12px 20px;border-radius:100px;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.btn-lima{background:var(--lima);color:var(--negro)}
.btn-lima:hover{background:var(--lima-2)}
.btn-ghost{border:1px solid rgba(244,247,245,.28);color:var(--blanco)}
.btn-ghost:hover{border-color:var(--lima);color:var(--lima)}

/* ================= ESCENAS =================
   Altura fija (var(--vh)) en vez de unidades de viewport dinámicas:
   la barra del navegador móvil ya no puede reajustar la página al scrollear.
   ========================================================================= */
#deck{position:relative;z-index:1}
.scene{
  position:relative;
  height:var(--vh);
  min-height:420px;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:calc(var(--nav-h) + 14px) clamp(12px,3.5vw,64px) 34px;
  contain:layout paint;      /* aísla cada sección: nada de una afecta a otra */
}

.frame{
  position:relative;
  width:min(100%, calc((var(--vh) - var(--chrome)) * var(--ar)));
  max-width:min(1900px, 94vw);
  aspect-ratio:1500 / 1080;   /* reserva el espacio antes de cargar: cero saltos */
  border-radius:clamp(6px,1vw,14px);
  overflow:hidden;
  background-color:var(--negro-2);
  background-size:cover;background-position:center;   /* miniatura de precarga */
  box-shadow:0 24px 70px -30px rgba(0,0,0,.9),0 0 0 1px rgba(244,247,245,.06);
  cursor:zoom-in;
}
.frame img{width:100%;height:100%;display:block;object-fit:contain}


/* etiqueta de lámina */
.cap{
  display:flex;align-items:center;gap:12px;
  width:min(100%, calc((var(--vh) - var(--chrome)) * var(--ar)));
  max-width:min(1900px, 94vw);margin:0 0 11px;
}
.cap-num{font-size:10px;letter-spacing:.18em;color:var(--lima);font-weight:600}
.cap-line{flex:1;height:1px;background:linear-gradient(90deg,rgba(214,248,74,.5),rgba(244,247,245,.08))}
.cap-txt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,247,245,.62);text-align:right}
.cap-txt b{color:var(--blanco);font-weight:500}
.cap-sub{font-style:normal}
.scene--chapter .cap,.scene--hero .cap{display:none}

.cue{
  position:absolute;bottom:18px;z-index:4;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:7px;
  font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:rgba(244,247,245,.45);
}
.cue i{display:block;width:1px;height:28px;background:linear-gradient(180deg,var(--lima),transparent)}

/* ================= ENTRADA (una sola vez, luego queda fija) =================
   Nada de esto vuelve a ejecutarse al scrollear. Ninguna transformación
   supera la escala 1, así que la lámina nunca se sale ni se recorta.
   ========================================================================== */
.scene .cap,.scene .frame{
  opacity:0;
  transition:opacity .75s cubic-bezier(.22,.61,.36,1),
             transform .75s cubic-bezier(.22,.61,.36,1),
             clip-path .85s cubic-bezier(.22,.61,.36,1);
}
.scene .cap{transform:translateY(8px)}

.fx-rise   .frame,.fx-tilt .frame,.fx-finale .frame{transform:translateY(34px)}
.fx-slideR .frame{transform:translateX(46px)}
.fx-slideL .frame{transform:translateX(-46px)}
.fx-zoom   .frame{transform:scale(.965)}
.fx-chapter .frame{transform:scale(.98)}
.fx-wipe   .frame{clip-path:inset(0 100% 0 0)}
.fx-hero   .frame{transform:translateY(14px)}

.scene.in .cap,
.scene.in .frame{
  opacity:1;
  transform:none;
  clip-path:inset(0 0 0 0);
}
.scene.in .frame{transition-delay:.05s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scene .cap,.scene .frame{opacity:1;transform:none;clip-path:none;transition:none}
}

/* ================= REELS ================= */
#reels{
  position:relative;z-index:1;
  height:var(--vh);min-height:420px;
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--nav-h) + 14px) clamp(12px,3.5vw,64px) 34px;
  contain:layout paint;
}
.reels-head{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  width:100%;max-width:1360px;margin:0 auto 14px;
}
.reels-kicker{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--lima);font-weight:600}
.reels-line{flex:1;min-width:30px;height:1px;background:linear-gradient(90deg,rgba(214,248,74,.5),rgba(244,247,245,.08))}
.reels-title{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,247,245,.62)}
.reels-title b{color:var(--blanco);font-weight:500}
#soundBtn{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(244,247,245,.24);border-radius:100px;
  padding:7px 13px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--blanco);transition:background .25s ease,border-color .25s ease,color .25s ease;
}
#soundBtn:hover{border-color:var(--lima);color:var(--lima)}
#soundBtn.on{background:var(--lima);border-color:var(--lima);color:var(--negro)}
#soundBtn svg{width:15px;height:15px;fill:currentColor}

.reels-grid{
  display:flex;align-items:center;
  gap:clamp(10px,1.6vw,22px);
  width:100%;max-width:1360px;margin:0 auto;
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:6px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.reels-grid::-webkit-scrollbar{display:none}
.reel{
  position:relative;
  height:calc(var(--vh) - var(--nav-h) - 132px);
  aspect-ratio:9 / 16;
  flex:0 0 auto;scroll-snap-align:center;
  border-radius:13px;overflow:hidden;background:var(--negro-2);
  box-shadow:0 22px 60px -32px rgba(0,0,0,.95),0 0 0 1px rgba(244,247,245,.06);
  opacity:0;transform:translateY(30px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);
  cursor:pointer;
}
#reels.in .reel{opacity:1;transform:none}
#reels.in .reel:nth-child(2){transition-delay:.1s}
#reels.in .reel:nth-child(3){transition-delay:.2s}
.reel video{width:100%;height:100%;object-fit:cover;display:block;background:var(--negro-2)}
.reel-info{
  position:absolute;left:0;right:0;bottom:0;padding:40px 15px 14px;
  background:linear-gradient(180deg,transparent,rgba(5,6,6,.9) 62%);
  pointer-events:none;
}
.reel-info b{display:block;font-size:13px;font-weight:600;letter-spacing:-.01em}
.reel-info span{display:block;font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:rgba(244,247,245,.62);margin-top:3px}
.reel-mute{
  position:absolute;top:10px;right:10px;width:33px;height:33px;border-radius:50%;
  background:rgba(5,6,6,.72);border:1px solid rgba(244,247,245,.2);
  display:grid;place-items:center;transition:background .25s ease,border-color .25s ease;
}
.reel-mute svg{width:15px;height:15px;fill:var(--blanco)}
.reel.sound .reel-mute{background:var(--lima);border-color:var(--lima)}
.reel.sound .reel-mute svg{fill:var(--negro)}
.reel-bar{position:absolute;left:0;bottom:0;height:2px;background:var(--lima);width:0;z-index:2}

@media (max-width:860px){
  .reels-grid{
    justify-content:flex-start;
    overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:6px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .reels-grid::-webkit-scrollbar{display:none}
  .reel{
    width:79vw;height:auto;
    max-height:calc(var(--vh) - var(--nav-h) - 132px);
  }
}

/* ================= OUTRO ================= */
#outro{
  position:relative;z-index:1;
  padding:clamp(56px,9vw,110px) clamp(20px,6vw,80px) 110px;
  border-top:1px solid rgba(244,247,245,.08);
  background:radial-gradient(90% 70% at 50% 0%,rgba(10,107,255,.13),transparent 65%);
}
.outro-kicker{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--lima);margin-bottom:14px}
.outro-title{font-size:clamp(29px,6vw,64px);font-weight:600;line-height:1.42;letter-spacing:-.02em}
.outro-title em{
  font-style:normal;background:var(--lima);color:var(--negro);
  padding:.1em .18em .14em;border-radius:5px;
  line-height:1.1;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.outro-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1px;background:rgba(244,247,245,.1);margin:clamp(30px,5vw,50px) 0 0;
  border:1px solid rgba(244,247,245,.1);border-radius:14px;overflow:hidden;
}
.outro-grid a{background:var(--negro-2);padding:20px 22px;display:block;transition:background .25s ease}
.outro-grid a:hover{background:var(--negro-3)}
.outro-grid span{display:block;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--lima);margin-bottom:7px}
.outro-grid b{font-size:14px;font-weight:400;color:var(--blanco);word-break:break-word}
.outro-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.outro-legal{margin-top:32px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,247,245,.32)}

/* ================= CONTADOR / CTA / HINT ================= */
#counter{
  position:fixed;right:clamp(12px,3vw,26px);bottom:clamp(14px,3vw,26px);z-index:100;
  font-size:11px;letter-spacing:.14em;color:rgba(244,247,245,.5);
  display:flex;gap:4px;align-items:baseline;pointer-events:none;
  transition:opacity .3s ease;
}
#counter b{color:var(--lima);font-weight:600;font-size:14px}
#counter i{font-style:normal;opacity:.4}
#counter.gone{opacity:0}

#waFloat{
  position:fixed;left:clamp(12px,3vw,26px);bottom:clamp(14px,3vw,26px);z-index:100;
  width:48px;height:48px;border-radius:50%;background:var(--lima);
  display:grid;place-items:center;
  box-shadow:0 8px 26px -8px rgba(214,248,74,.5);
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s;
}
#waFloat.show{opacity:1;visibility:visible}
#waFloat.gone{opacity:0;visibility:hidden}
#waFloat:hover{background:var(--lima-2)}
#waFloat svg{width:25px;height:25px;fill:var(--negro)}

#hint{
  position:fixed;left:50%;bottom:78px;transform:translateX(-50%);z-index:100;
  background:rgba(10,14,16,.94);border:1px solid rgba(214,248,74,.3);
  color:rgba(244,247,245,.85);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:9px 15px;border-radius:100px;white-space:nowrap;max-width:92vw;
  overflow:hidden;text-overflow:ellipsis;
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s;pointer-events:none;
}
#hint.show{opacity:1;visibility:visible}

/* ================= LIGHTBOX ================= */
#lb{
  position:fixed;inset:0;z-index:150;background:var(--negro);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;
}
#lb.open{opacity:1;visibility:visible}
#lbStage{width:100%;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:none}
#lbImg{
  max-width:96vw;max-height:88svh;width:auto;height:auto;object-fit:contain;
  transform-origin:center center;transition:transform .22s ease;
  cursor:grab;user-select:none;-webkit-user-drag:none;
}
#lbImg.grabbing{cursor:grabbing;transition:none}
#lbImg.rot{max-width:none;max-height:none;width:min(calc(97vw * 1.388888), 94svh);height:auto}
#lbClose,#lbPrev,#lbNext,#lbRot{
  position:absolute;z-index:2;color:var(--blanco);
  width:46px;height:46px;border-radius:50%;
  background:rgba(10,14,16,.9);border:1px solid rgba(244,247,245,.18);
  display:grid;place-items:center;font-size:26px;line-height:1;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
#lbClose:hover,#lbPrev:hover,#lbNext:hover,#lbRot:hover{background:var(--lima);color:var(--negro);border-color:var(--lima)}
#lbClose{top:14px;right:14px;font-size:30px}
#lbRot{top:14px;right:70px;font-size:18px}
#lbRot svg{width:20px;height:20px;fill:currentColor}
#lbPrev{left:14px;top:50%;transform:translateY(-50%)}
#lbNext{right:14px;top:50%;transform:translateY(-50%)}
#lbCap{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,247,245,.62);
  text-align:center;padding:8px 16px;max-width:min(92vw,760px);line-height:1.5;
  background:rgba(5,6,6,.85);border-radius:100px;
}
#lbCap b{color:var(--lima)}

@media (max-width:900px){ :root{--chrome:max(112px, 16vh)} }
@media (max-width:640px){
  :root{--chrome:104px}
  /* en vertical la lámina horizontal deja mucho aire: se acorta la sección
     para que el recorrido sea más compacto sin recortar nada */
  .scene{height:calc(var(--vh) * .72);min-height:360px;padding:14px 10px 14px}
  .scene--hero{height:var(--vh);padding:calc(var(--nav-h) + 10px) 10px 26px}
  .cap-sub{display:none}
  .cap{margin-bottom:9px}
  .nav-name{display:none}
  .frame{border-radius:8px}
  #lbPrev,#lbNext{width:40px;height:40px;font-size:22px}
  #lbRot{right:64px}
  #lbCap{font-size:9px;bottom:10px;padding:7px 12px}
}

/* ================= PORTADA V4 (composición por capas) =================
   La lámina 1 deja de ser una imagen plana y se reconstruye con sus
   piezas reales extraídas del PDF: fondo, arcos y lockup del logo.
   Motivo: en vertical, una lámina horizontal ocupaba un tercio de la
   pantalla. Así la portada llena el teléfono y se lee como una app.
   Nada se inventa: fondo, arcos y logo son los archivos originales.
   ====================================================================== */
.scene--hero{
  padding:0;overflow:hidden;
  height:var(--vh);
}
.hero-bg,.hero-arc,.hero-vig,.hero-in,.hero-top{position:absolute}
.hero-bg{
  inset:0;z-index:0;
  background:var(--negro);
}
.hero-bg img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  opacity:.92;
}
.hero-arc{z-index:1;pointer-events:none;user-select:none}
.hero-arc--tl{
  top:-7%;left:-22%;
  width:min(44vw,330px);height:auto;
  opacity:.9;
  filter:drop-shadow(0 0 22px rgba(214,248,74,.14));
}
.hero-arc--br{
  right:-9%;bottom:16%;
  width:min(15vw,120px);height:auto;
  opacity:.85;
  filter:drop-shadow(0 0 20px rgba(56,228,251,.18));
}
.hero-vig{
  inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(78% 58% at 50% 46%,transparent 0 38%,rgba(5,6,6,.5) 78%,rgba(5,6,6,.88) 100%),
    linear-gradient(180deg,rgba(5,6,6,.72) 0%,transparent 22% 68%,rgba(5,6,6,.9) 100%);
}
.hero-top{
  top:calc(var(--nav-h) + 14px);right:clamp(16px,4vw,44px);z-index:4;
  font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(244,247,245,.55);
}
.hero-in{
  inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:calc(var(--nav-h) + 26px) clamp(20px,6vw,60px) 108px;
}
.hero-logo{
  width:min(82vw,600px);height:auto;
  filter:drop-shadow(0 12px 44px rgba(0,0,0,.55));
}
.hero-claim{
  margin-top:clamp(20px,3.4vh,34px);
  max-width:34ch;
  font-size:clamp(12px,3.3vw,15px);font-weight:300;line-height:1.55;
  color:rgba(244,247,245,.72);
}
.hero-serv{
  list-style:none;
  position:absolute;left:0;right:0;bottom:84px;z-index:4;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:rgba(244,247,245,.09);
  margin:0 clamp(14px,5vw,48px);
  border:1px solid rgba(244,247,245,.09);border-radius:12px;overflow:hidden;
}
.hero-serv li{
  background:rgba(5,6,6,.62);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:9px 11px;text-align:left;
}
.hero-serv b{
  display:block;color:var(--lima);font-weight:600;
  font-size:clamp(10px,2.9vw,12px);letter-spacing:.01em;
}
.hero-serv span{
  display:block;margin-top:2px;
  font-size:clamp(8px,2.2vw,9.5px);line-height:1.35;
  color:rgba(244,247,245,.5);
}

@media (min-width:760px){
  .hero-serv{
    grid-template-columns:repeat(6,minmax(0,1fr));
    background:none;border:0;border-radius:0;gap:0;
    margin:0 clamp(24px,5vw,70px);bottom:104px;
  }
  .hero-serv li{
    background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
    padding:0 16px;border-left:1px solid rgba(244,247,245,.14);
  }
  .hero-serv li:first-child{border-left:0;padding-left:0}
  .hero-serv b{font-size:13px}
  .hero-serv span{font-size:10px;margin-top:5px}
  .hero-arc--tl{width:min(24vw,330px);left:-6%;top:-10%}
  .hero-arc--br{width:min(9vw,130px);right:-2.5%;bottom:14%}
}

/* movimiento ligado al scroll, ejecutado por el compositor.
   Solo en navegadores que lo soportan de forma nativa. */
@supports (animation-timeline: view()){
  .scene--hero .hero-bg img{animation:heroBg linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  .scene--hero .hero-in  {animation:heroIn linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  .scene--hero .hero-arc--tl{animation:arcTL linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  .scene--hero .hero-arc--br{animation:arcBR linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
}
@keyframes heroBg{ from{transform:scale(1.06) translateY(0)} to{transform:scale(1.06) translateY(-4%)} }
@keyframes heroIn{ 0%{transform:translateY(0);opacity:1} 60%{transform:translateY(-14px);opacity:1} 100%{transform:translateY(-34px);opacity:1} }
@keyframes arcTL{ from{transform:translate(0,0)} to{transform:translate(-3%,4%)} }
@keyframes arcBR{ from{transform:translate(0,0)} to{transform:translate(3%,-5%)} }

/* entrada al cargar: nada depende del scroll */
.hero-in > *,.hero-serv{opacity:0;transform:translateY(16px)}
.scene--hero.in .hero-in > *,
.scene--hero.in .hero-serv{
  opacity:1;transform:none;
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1);
}
.scene--hero.in .hero-logo{transition-delay:.12s}
.scene--hero.in .hero-claim{transition-delay:.26s}
.scene--hero.in .hero-serv{transition-delay:.38s}
@media (prefers-reduced-motion:reduce){
  .hero-in > *,.hero-serv{opacity:1;transform:none}
}

/* ============================================================
   ESCENA "MAGIA" — la varita desciende y revela el titular
   Escenario anclado de 2.4 pantallas. Todo el movimiento lo
   ejecuta el compositor con animation-timeline, cero JavaScript.
   ============================================================ */
.scene--magia{
  height:calc(var(--vh) * 2.2);
  padding:0;overflow:visible;              /* escena larga: no debe atrapar el snap */
  contain:none;
}
.magia-stage{
  position:sticky;top:0;
  height:var(--vh);width:100%;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--negro);
}
.magia-bg{position:absolute;inset:0;z-index:0}
.magia-bg img{width:100%;height:100%;object-fit:cover;opacity:.6}
.magia-vig{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(72% 56% at 50% 50%,transparent 0 34%,rgba(5,6,6,.62) 76%,rgba(5,6,6,.94) 100%),
    linear-gradient(180deg,rgba(5,6,6,.7),transparent 26% 70%,rgba(5,6,6,.86));
}

/* ---- varita ---- */
.wand{
  position:absolute;z-index:4;
  top:50%;left:50%;
  width:min(66vw,860px);
  aspect-ratio:945 / 249;
  transform-origin:14% 62%;            /* cerca de la punta metálica */
  pointer-events:none;
  will-change:transform;               /* una sola capa, no 31 */
}
.wand img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.wand .rod{z-index:2;filter:drop-shadow(0 22px 40px rgba(0,0,0,.75))}
.wand .ribbon{z-index:3;transform-origin:14% 62%}
.wand-glow{
  position:absolute;left:2%;top:52%;
  width:26%;aspect-ratio:1;transform:translate(-38%,-50%);
  border-radius:50%;z-index:1;
  background:radial-gradient(circle,rgba(214,248,74,.6) 0%,rgba(214,248,74,.22) 34%,transparent 68%);
}

/* ---- titular ---- */
.magia-copy{
  position:relative;z-index:5;
  width:min(1100px,88vw);
  text-align:center;
}
/* velo suave detrás del texto: la varita puede cruzar sin restarle lectura */
.magia-copy::before{
  content:"";position:absolute;z-index:-1;
  inset:-14% -10%;
  background:radial-gradient(62% 56% at 50% 50%,rgba(5,6,6,.93),rgba(5,6,6,.62) 60%,transparent 100%);
  pointer-events:none;
}
.magia-kicker{
  font-size:clamp(26px,6.6vw,62px);font-weight:300;line-height:1;
  letter-spacing:-.02em;color:var(--blanco);
}
.magia-line{display:block}
.magia-word{
  position:relative;display:inline-block;
  font-size:clamp(72px,19vw,190px);font-weight:600;line-height:.92;
  letter-spacing:-.045em;color:var(--blanco);
  margin-top:.02em;
}
.magia-word .spark{
  position:absolute;right:-.16em;top:.06em;
  color:var(--lima);font-size:.3em;line-height:1;
}
.magia-bar{
  display:inline-block;margin-top:clamp(12px,2.4vh,22px);
  background:var(--lima);color:var(--negro);
  padding:8px 18px 9px;border-radius:3px;
  font-size:clamp(11px,2.9vw,19px);font-weight:500;line-height:1;
  transform:rotate(-1.4deg);
}
.magia-text{
  margin:clamp(18px,3vh,34px) auto 0;max-width:52ch;
  font-size:clamp(12px,3vw,15px);font-weight:300;line-height:1.6;
  color:rgba(244,247,245,.66);
}
.magia-text b{color:var(--blanco);font-weight:500}

/* ============ movimiento ligado al scroll ============ */
@supports (animation-timeline: view()){
  .scene--magia{view-timeline:--magia block}
  .magia-stage > *,
  .magia-copy > *{
    animation-timeline:--magia;
    animation-range:contain 0% contain 100%;
    animation-timing-function:linear;
    animation-fill-mode:both;
  }
  .wand       {animation-name:wandFall}
  .wand .ribbon{animation-name:ribbonWhip;animation-timeline:--magia;animation-range:contain 0% contain 100%;animation-fill-mode:both;animation-timing-function:linear}
  .magia-bg img{animation-name:magiaBg}
  .magia-kicker{animation-name:magiaKicker}
  .magia-line:nth-of-type(1){animation-name:magiaWord}
  .magia-line:nth-of-type(2){animation-name:magiaBar}
  .magia-text  {animation-name:magiaText}
}

/* la varita ya está en cuadro desde el primer píxel de scroll:
   antes entraba desde fuera y la escena arrancaba en negro */
@keyframes wandFall{
  0%   {transform:translate(calc(-50% + 38vw), calc(-50% - 38vh)) rotate(-30deg)}
  34%  {transform:translate(calc(-50% +  8vw), calc(-50% - 12vh)) rotate(-9deg)}
  60%  {transform:translate(calc(-50% -  6vw), calc(-50% + 10vh)) rotate(1deg)}
  100% {transform:translate(calc(-50% - 34vw), calc(-50% + 64vh)) rotate(16deg)}
}
/* la cinta va un paso por detrás del tubo: da la sensación de látigo */
@keyframes ribbonWhip{
  0%   {transform:translate(.7%,-.9%) rotate(1.4deg)}
  40%  {transform:translate(-.4%,.3%) rotate(-.8deg)}
  62%  {transform:translate(.4%,.6%)  rotate(1deg)}
  100% {transform:translate(-.7%,-.5%) rotate(-1.4deg)}
}
@keyframes magiaBg{
  0%   {transform:scale(1.12) translateY(-1.5%)}
  100% {transform:scale(1.12) translateY(1.5%)}
}
/* el titular se revela justo cuando la punta lo cruza */
@keyframes magiaKicker{
  0%,12%{opacity:0;clip-path:inset(0 0 100% 0)}
  30%   {opacity:1;clip-path:inset(0 0 0% 0)}
  100%  {opacity:1;clip-path:inset(0 0 0% 0)}
}
@keyframes magiaWord{
  0%,20%{opacity:0;clip-path:inset(0 0 100% 0)}
  44%   {opacity:1;clip-path:inset(0 0 0% 0)}
  100%  {opacity:1;clip-path:inset(0 0 0% 0)}
}
@keyframes magiaBar{
  0%,40%{opacity:0;transform:translateY(18px)}
  58%   {opacity:1;transform:translateY(0)}
  100%  {opacity:1;transform:translateY(0)}
}
/* el párrafo entra cuando la varita ya bajó: no compite con la cinta */
@keyframes magiaText{
  0%,60%{opacity:0;transform:translateY(18px)}
  76%   {opacity:1;transform:translateY(0)}
  100%  {opacity:1;transform:translateY(0)}
}

/* ---- sin soporte: escena de una pantalla, entrada clásica ---- */
@supports not (animation-timeline: view()){
  .scene--magia{height:var(--vh)}
  .wand{transform:translate(calc(-50% - 4vw), calc(-50% + 4vh)) rotate(-3deg)}
  .magia-copy > *{opacity:0;transform:translateY(20px);
    transition:opacity .8s var(--e,cubic-bezier(.22,.61,.36,1)),transform .8s cubic-bezier(.22,.61,.36,1)}
  .scene--magia.in .magia-copy > *{opacity:1;transform:none}
  .scene--magia.in .magia-word{transition-delay:.12s}
  .scene--magia.in .magia-bar{transition-delay:.24s}
  .scene--magia.in .magia-text{transition-delay:.34s}
}
@media (prefers-reduced-motion:reduce){
  .scene--magia{height:var(--vh)}
  .magia-copy > *{opacity:1!important;transform:none!important;clip-path:none!important;animation:none!important}
  .wand{animation:none!important;transform:translate(calc(-50% - 4vw), calc(-50% + 4vh)) rotate(-3deg)}
}
@media (max-width:640px){
  .wand{width:min(118vw,540px)}
  .magia-word{font-size:clamp(64px,23vw,150px)}
}

/* ============================================================
   MOVIMIENTO DE LAS LÁMINAS PLANAS (arquitectura del diagrama)
   Branding ↙ ↓ ↘  ·  Social ← → ← →  ·  Web y Sala: expansión
   Sustituye las transiciones por animación ligada al scroll,
   ejecutada por el compositor. Ninguna escala supera 1.
   ============================================================ */
.fx-diagL .frame{transform:translate(-52px,34px)}
.fx-diagR .frame{transform:translate(52px,34px)}
.fx-expand .frame{clip-path:inset(0 15% 0 15%)}

@supports (animation-timeline: view()){
  .scene:not(.scene--hero):not(.scene--magia):not(.scene--caso):not(.scene--zoom):not(.scene--fotos) .frame,
  .scene:not(.scene--hero):not(.scene--magia):not(.scene--caso):not(.scene--zoom):not(.scene--fotos) .cap{
    transition:none;
    animation-timeline:view();
    animation-range:cover 0% cover 100%;
    animation-timing-function:linear;
    animation-fill-mode:both;
  }
  .scene .cap{animation-name:capIn}
  .fx-rise    .frame,.fx-finale .frame{animation-name:lamRise}
  .fx-diagL   .frame{animation-name:lamDiagL}
  .fx-diagR   .frame{animation-name:lamDiagR}
  .fx-slideL  .frame{animation-name:lamSlideL}
  .fx-slideR  .frame{animation-name:lamSlideR}
  .fx-wipe    .frame{animation-name:lamWipe}
  .fx-expand  .frame{animation-name:lamExpand}
  .fx-chapter .frame{animation-name:lamChapter}
}
@keyframes lamRise{
  0%{opacity:0;transform:translateY(52px)}
  30%,100%{opacity:1}
  30%{transform:translateY(0)} 100%{transform:translateY(-26px)}
}
@keyframes lamDiagL{
  0%{opacity:0;transform:translate(-52px,38px)}
  32%{opacity:1;transform:translate(0,0)}
  100%{opacity:1;transform:translate(0,-24px)}
}
@keyframes lamDiagR{
  0%{opacity:0;transform:translate(52px,38px)}
  32%{opacity:1;transform:translate(0,0)}
  100%{opacity:1;transform:translate(0,-24px)}
}
@keyframes lamSlideL{
  0%{opacity:0;transform:translateX(-76px)}
  32%{opacity:1;transform:translateX(0)}
  100%{opacity:1;transform:translate(0,-20px)}
}
@keyframes lamSlideR{
  0%{opacity:0;transform:translateX(76px)}
  32%{opacity:1;transform:translateX(0)}
  100%{opacity:1;transform:translate(0,-20px)}
}
@keyframes lamWipe{
  0%{opacity:1;clip-path:inset(0 100% 0 0)}
  34%,100%{clip-path:inset(0 0 0 0);opacity:1}
  100%{transform:translateY(-22px)}
}
@keyframes lamExpand{
  0%{opacity:0;clip-path:inset(0 17% 0 17%)}
  38%{opacity:1;clip-path:inset(0 0 0 0)}
  100%{opacity:1;clip-path:inset(0 0 0 0);transform:translateY(-22px)}
}
@keyframes lamChapter{
  0%{opacity:0;transform:scale(.975)}
  30%{opacity:1;transform:scale(1)}
  100%{opacity:1;transform:scale(1) translateY(-30px)}
}
@keyframes capIn{
  0%{opacity:0;transform:translateY(14px)}
  30%{opacity:1;transform:translateY(0)}
  100%{opacity:1;transform:translateY(-34px)}
}

/* ============================================================
   ESCENA "FOTOGRAFÍA" — las copias se despliegan en abanico
   Mismo principio que la varita: escenario anclado y animación
   ligada al scroll ejecutada por el compositor.
   ============================================================ */
.scene--fotos{
  height:calc(var(--vh) * 2.4);
  padding:0;overflow:visible;
  contain:none;
}
.fotos-stage{
  position:sticky;top:0;height:var(--vh);width:100%;
  overflow:hidden;background:var(--negro);
}
.fotos-bg{position:absolute;inset:0;z-index:0}
.fotos-bg img{width:100%;height:100%;object-fit:cover;opacity:.34}
.fotos-vig{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(76% 60% at 50% 50%,transparent 0 30%,rgba(5,6,6,.72) 74%,rgba(5,6,6,.96) 100%);
}
.fotos-title{
  position:absolute;z-index:2;left:0;right:0;top:calc(var(--nav-h) + 12px);
  text-align:center;
  font-size:clamp(38px, min(9vw, 12vh), 118px);font-weight:600;line-height:1;
  letter-spacing:-.04em;color:var(--blanco);
}
.fotos-sub{
  position:absolute;z-index:6;left:0;right:0;bottom:3%;
  text-align:center;padding:10px 6vw 12px;
  background:linear-gradient(180deg,transparent,rgba(5,6,6,.9) 32%,rgba(5,6,6,.94));
  font-size:clamp(9px,2.4vw,12px);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(244,247,245,.55);
}
.fotos-sub b{color:var(--lima);font-weight:600}

.fotos-deck{position:absolute;inset:0;z-index:4;pointer-events:none}
.ph{
  position:absolute;
  left:50%;top:50%;margin:0;
  width:var(--w);
  border-radius:8px;overflow:hidden;
  box-shadow:0 26px 60px -26px rgba(0,0,0,.95),0 0 0 1px rgba(244,247,245,.09);
  transform:translate(-50%,-50%);
}
.ph img{width:100%;height:auto;display:block}

/* posiciones finales del abanico */

@supports (animation-timeline: view()){
  .scene--fotos{view-timeline:--fotos block}
  .fotos-deck .ph,.fotos-title,.fotos-sub,.fotos-bg img{
    animation-timeline:--fotos;
    animation-timing-function:linear;
    animation-fill-mode:both;
  }
  .fotos-bg img{animation-name:magiaBg;animation-range:contain 0% contain 100%}
  .fotos-title{animation-name:fotosTitle;animation-range:contain 0% contain 100%}
  .fotos-sub  {animation-name:fotosSub;animation-range:contain 0% contain 100%}
  .ph{animation-name:phFan}
            }
@keyframes phFan{
  0%  {opacity:0;transform:translate(-50%,-50%) rotate(0deg) scale(.62)}
  14% {opacity:1}
  46% {opacity:1;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--r)) scale(1)}
  100%{opacity:1;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--r)) scale(1)}
}
@keyframes fotosTitle{
  0%,2%{opacity:0;clip-path:inset(0 0 100% 0)}
  22%   {opacity:1;clip-path:inset(0 0 0 0)}
  100%  {opacity:1;clip-path:inset(0 0 0 0);transform:translateY(-18px)}
}
@keyframes fotosSub{
  0%,44%{opacity:0;transform:translateY(14px)}
  62%   {opacity:1;transform:translateY(0)}
  100%  {opacity:1;transform:translateY(0)}
}
@supports not (animation-timeline: view()){
  .scene--fotos{height:var(--vh)}
  .ph{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--r))}
}
@media (prefers-reduced-motion:reduce){
  .scene--fotos{height:var(--vh)}
  .ph{animation:none!important;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--r))}
  .fotos-title,.fotos-sub{animation:none!important;opacity:1!important;clip-path:none!important}
}
@media (max-width:760px){
  .ph{--w:43vw}
              .fotos-title{top:calc(var(--nav-h) + 20px)}
  .fotos-sub{bottom:5%}

}


/* ---- abanico de 9 piezas ----
   Escritorio: tres filas de tres. Móvil: dos columnas al tresbolillo,
   con medio paso de desfase para que ninguna quede pegada a su vecina.
   Los desplazamientos verticales van en var(--vh), la misma altura que
   usa el escenario: con vh puros no coinciden cuando el navegador móvil
   muestra su barra. */
.ph{--w:14vw}
.ph--v{--w:5.8vw}
.ph:nth-child(1){--x:-25vw;--y:calc(var(--vh) * -0.185);--r:-5deg}
.ph:nth-child(2){--x:0vw;--y:calc(var(--vh) * -0.197);--r:3deg}
.ph:nth-child(3){--x:25vw;--y:calc(var(--vh) * -0.18);--r:6deg}
.ph:nth-child(4){--x:-25vw;--y:calc(var(--vh) * -0.013);--r:4deg}
.ph:nth-child(5){--x:0vw;--y:calc(var(--vh) * -0.025);--r:-4deg}
.ph:nth-child(6){--x:25vw;--y:calc(var(--vh) * -0.008);--r:-6deg}
.ph:nth-child(7){--x:-25vw;--y:calc(var(--vh) * 0.158);--r:5deg}
.ph:nth-child(8){--x:0vw;--y:calc(var(--vh) * 0.146);--r:-3deg}
.ph:nth-child(9){--x:25vw;--y:calc(var(--vh) * 0.163);--r:7deg}

@supports (animation-timeline: view()){
  .ph:nth-child(1){animation-range:contain 0%  contain 100%}
  .ph:nth-child(2){animation-range:contain 3%  contain 100%}
  .ph:nth-child(3){animation-range:contain 6%  contain 100%}
  .ph:nth-child(4){animation-range:contain 9%  contain 100%}
  .ph:nth-child(5){animation-range:contain 12% contain 100%}
  .ph:nth-child(6){animation-range:contain 15% contain 100%}
  .ph:nth-child(7){animation-range:contain 18% contain 100%}
  .ph:nth-child(8){animation-range:contain 21% contain 100%}
  .ph:nth-child(9){animation-range:contain 24% contain 100%}
}

@media (max-width:760px){
  .ph{--w:37vw}
  .ph--v{--w:14.8vw}
  .ph:nth-child(1){--x:-25vw;--y:calc(var(--vh) * -0.25);--r:-5deg}
  .ph:nth-child(2){--x:25vw;--y:calc(var(--vh) * -0.1875);--r:4deg}
  .ph:nth-child(3){--x:-25vw;--y:calc(var(--vh) * -0.125);--r:5deg}
  .ph:nth-child(4){--x:25vw;--y:calc(var(--vh) * -0.0625);--r:-4deg}
  .ph:nth-child(5){--x:-25vw;--y:calc(var(--vh) * 0);--r:-3deg}
  .ph:nth-child(6){--x:25vw;--y:calc(var(--vh) * 0.0625);--r:6deg}
  .ph:nth-child(7){--x:-25vw;--y:calc(var(--vh) * 0.125);--r:-5deg}
  .ph:nth-child(8){--x:25vw;--y:calc(var(--vh) * 0.1875);--r:3deg}
  .ph:nth-child(9){--x:-25vw;--y:calc(var(--vh) * 0.25);--r:5deg}
  /* escalera uniforme, desplazada hacia arriba para dejar sitio al botón */
                  }

/* ============================================================
   COMPACTACIÓN VERTICAL
   La lámina es horizontal (1500×1080). En un teléfono vertical
   sobraba más de media pantalla de negro entre lámina y lámina.
   Ahora la sección mide lo que mide su contenido, no una pantalla.
   ============================================================ */
@media (max-width:760px){
  .scene:not(.scene--hero):not(.scene--magia):not(.scene--fotos):not(.scene--caso):not(.scene--zoom):not(.scene--portada):not(.scene--valor){
    height:calc((100vw - 20px) / 1.388888 + 104px);
    min-height:0;
  }
}
@media (min-width:761px) and (max-width:1100px){
  .scene:not(.scene--hero):not(.scene--magia):not(.scene--fotos):not(.scene--caso):not(.scene--zoom):not(.scene--portada):not(.scene--valor){
    height:min(var(--vh), calc((100vw - 80px) / 1.388888 + 150px));
    min-height:0;
  }
}

/* --- abanico de 7 piezas, con verticales de proporción propia --- */
@supports (animation-timeline: view()){
    }
@media (max-width:760px){
  .ph--v{--w:17vw}
                }

/* ============================================================
   ESCENA "BENITECH" — el sistema de marca se levanta en escena
   Sustituye la lámina plana del caso. Misma gramática que la
   varita: objeto que entra con el scroll + texto que se revela.
   ============================================================ */
.scene--caso{
  height:calc(var(--vh) * 2.6);
  padding:0;overflow:visible;contain:none;
}
.caso-stage{
  position:sticky;top:0;height:var(--vh);width:100%;
  overflow:hidden;background:var(--negro);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(var(--nav-h) + 22px) clamp(16px,5vw,60px) clamp(24px,4vh,44px);
  gap:clamp(8px,1.6vh,18px);
  text-align:center;
}
.caso-bg{position:absolute;inset:0;z-index:0}
.caso-bg img{width:100%;height:100%;object-fit:cover;opacity:.3}
.caso-vig{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(70% 58% at 50% 46%,transparent 0 28%,rgba(5,6,6,.7) 74%,rgba(5,6,6,.96) 100%),
    linear-gradient(180deg,rgba(5,6,6,.78),transparent 24% 62%,rgba(5,6,6,.92));
}
/* todo el contenido va en flujo: es imposible que una capa se monte sobre otra */
.caso-tag,.caso-title,.caso-art,.caso-copy{position:relative;z-index:3;flex:0 0 auto}
.caso-tag{
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--lima);font-weight:600;
}
.caso-title{
  font-size:clamp(40px,8.4vw,108px);font-weight:600;line-height:1;
  letter-spacing:-.045em;color:var(--blanco);
}
.caso-art{
  width:min(48vw,660px);
  filter:drop-shadow(0 34px 60px rgba(0,0,0,.8));
}
.caso-art{max-height:50vh}
.caso-art img{width:100%;height:auto;max-height:50vh;object-fit:contain;display:block}
.caso-copy{
  width:min(720px,90vw);
  font-size:clamp(11px,2.6vw,14px);font-weight:300;line-height:1.6;
  color:rgba(244,247,245,.72);
}
.caso-copy b{color:var(--blanco);font-weight:500}
.caso-chips{
  display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin-top:11px;
}
.caso-chips span{
  border:1px solid rgba(244,247,245,.2);border-radius:100px;padding:5px 11px;
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,247,245,.62);
}

@supports (animation-timeline: view()){
  .scene--caso{view-timeline:--caso block}
  .caso-stage .caso-bg img,.caso-tag,.caso-title,.caso-art,.caso-copy{
    animation-timeline:--caso;animation-range:contain 0% contain 100%;
    animation-timing-function:linear;animation-fill-mode:both;
  }
  .caso-bg img{animation-name:magiaBg}
  .caso-tag  {animation-name:casoTag}
  .caso-title{animation-name:casoTitle}
  .caso-art  {animation-name:casoArt}
  .caso-copy {animation-name:casoCopy}
}
@keyframes casoTag{
  0%,6%{opacity:0;transform:translateY(10px)}
  20%  {opacity:1;transform:translateY(0)}
  100% {opacity:1;transform:translateY(0)}
}
@keyframes casoTitle{
  0%,10%{opacity:0;clip-path:inset(0 0 100% 0)}
  32%   {opacity:1;clip-path:inset(0 0 0 0)}
  100%  {opacity:1;clip-path:inset(0 0 0 0)}
}
/* el sistema de marca se levanta desde abajo y se asienta */
@keyframes casoArt{
  0%  {opacity:0;transform:translateY(42vh) scale(.86) rotate(3deg)}
  22% {opacity:1}
  52% {opacity:1;transform:translateY(0) scale(1) rotate(0deg)}
  88% {opacity:1;transform:translateY(0) scale(1) rotate(0deg)}
  100%{opacity:1;transform:translateY(-2vh) scale(1) rotate(0deg)}
}
@keyframes casoCopy{
  0%,56%{opacity:0;transform:translateY(16px)}
  72%   {opacity:1;transform:translateY(0)}
  100%  {opacity:1;transform:translateY(0)}
}
@supports not (animation-timeline: view()){
  .scene--caso{height:var(--vh)}
}
@media (prefers-reduced-motion:reduce){
  .scene--caso{height:var(--vh)}
  .caso-art,.caso-title,.caso-tag,.caso-copy{animation:none!important;opacity:1!important;clip-path:none!important}
}
@media (max-width:760px){
  .caso-art{width:94vw}
  .caso-title{font-size:clamp(38px,11vw,58px)}
  .caso-copy{font-size:11.5px;line-height:1.55}
  .caso-chips{margin-top:9px}
  .caso-chips span{padding:4px 9px;font-size:8px}
}

.scene--zoom{
  height:calc(var(--vh) * 3.4);
  padding:0;overflow:visible;contain:none;
}
/* ============================================================
   ESCENA "REDES SOCIALES" — zoom en mitad del scroll
   Columna en flujo: título, descripción, pieza y rótulo.
   Nada está posicionado en absoluto, así que nada puede
   montarse encima de otra cosa por alto que sea el teléfono.
   ============================================================ */
.zoom-stage{
  position:sticky;top:0;height:var(--vh);width:100%;
  overflow:hidden;background:var(--negro);
  display:flex;flex-direction:column;align-items:center;
  padding:calc(var(--nav-h) + 18px) clamp(12px,3.5vw,44px) clamp(18px,3.5vh,36px);
  text-align:center;
}
.zoom-bg{position:absolute;inset:0;z-index:0}
.zoom-bg img{width:100%;height:100%;object-fit:cover;opacity:.26}
.zoom-vig{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(76% 62% at 50% 50%,transparent 0 30%,rgba(5,6,6,.7) 74%,rgba(5,6,6,.96) 100%);
}
.zoom-title,.zoom-desc,.zoom-frame,.zoom-caps{position:relative;z-index:3;width:100%}
.zoom-title{
  font-size:clamp(30px,6.4vw,76px);font-weight:600;line-height:1;
  letter-spacing:-.04em;color:var(--blanco);flex:0 0 auto;
}
.zoom-desc{
  margin:clamp(8px,1.5vh,15px) auto 0;max-width:min(680px,90vw);
  font-size:clamp(11px,2.6vw,14px);font-weight:300;line-height:1.6;
  color:rgba(244,247,245,.7);flex:0 0 auto;
}
.zoom-desc b{color:var(--blanco);font-weight:500}
/* las dos piezas comparten el mismo marco: se relevan sin mover nada */
.zoom-frame{
  flex:1 1 auto;min-height:0;
  display:flex;align-items:center;justify-content:center;
  margin:clamp(6px,1.4vh,16px) 0;
}
.zoom-item{
  position:absolute;
  width:min(58vw,800px);
  filter:drop-shadow(0 30px 56px rgba(0,0,0,.8));
}
.zoom-item img{width:100%;height:auto;max-height:46vh;object-fit:contain;display:block}
.zoom-item--b{z-index:2}
.zoom-caps{flex:0 0 auto;height:1.7em;position:relative}
.zoom-cap{
  position:absolute;left:0;right:0;top:0;margin:0;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(244,247,245,.75);
}
.zoom-cap b{color:var(--lima);font-weight:600}

@supports (animation-timeline: view()){
  .scene--zoom{view-timeline:--zoom block}
  .zoom-stage .zoom-bg img,.zoom-title,.zoom-desc,.zoom-item,.zoom-cap{
    animation-timeline:--zoom;animation-range:contain 0% contain 100%;
    animation-timing-function:linear;animation-fill-mode:both;
  }
  .zoom-bg img{animation-name:magiaBg}
  .zoom-title  {animation-name:zoomTitle}
  .zoom-desc   {animation-name:zoomDesc}
  .zoom-item--a{animation-name:zoomA}
  .zoom-item--b{animation-name:zoomB}
  .zoom-cap--a {animation-name:capA}
  .zoom-cap--b {animation-name:capB}
}
@keyframes zoomTitle{
  0%,3%{opacity:0;clip-path:inset(0 0 100% 0)}
  16%  {opacity:1;clip-path:inset(0 0 0 0)}
  100% {opacity:1;clip-path:inset(0 0 0 0)}
}
@keyframes zoomDesc{
  0%,7%{opacity:0;transform:translateY(12px)}
  22%  {opacity:1;transform:translateY(0)}
  100% {opacity:1;transform:translateY(0)}
}
/* primera pieza: llega desde el fondo, se planta, aguanta y se retira */
@keyframes zoomA{
  0%  {opacity:0;transform:scale(.5)}
  11% {opacity:1}
  24% {opacity:1;transform:scale(1)}
  50% {opacity:1;transform:scale(1)}
  56% {opacity:0;transform:scale(1.16)}
  100%{opacity:0;transform:scale(1.2)}
}
/* segunda pieza: entra cuando la primera ya se fue, y aguanta hasta el final */
@keyframes zoomB{
  0%,58%{opacity:0;transform:scale(.5)}
  67%   {opacity:1}
  78%   {opacity:1;transform:scale(1)}
  100%  {opacity:1;transform:scale(1)}
}
@keyframes capA{
  0%,15%{opacity:0;transform:translateY(10px)}
  26%   {opacity:1;transform:translateY(0)}
  50%   {opacity:1;transform:translateY(0)}
  55%   {opacity:0;transform:translateY(-8px)}
  100%  {opacity:0}
}
@keyframes capB{
  0%,65%{opacity:0;transform:translateY(10px)}
  76%   {opacity:1;transform:translateY(0)}
  100%  {opacity:1;transform:translateY(0)}
}
@supports not (animation-timeline: view()){
  .scene--zoom{height:var(--vh)}
  .zoom-item--b,.zoom-cap--b{display:none}
}
@media (prefers-reduced-motion:reduce){
  .scene--zoom{height:var(--vh)}
  .zoom-item--b,.zoom-cap--b{display:none}
  .zoom-item,.zoom-title,.zoom-desc,.zoom-cap{
    animation:none!important;opacity:1!important;clip-path:none!important;transform:none!important}
}
@media (max-width:760px){
  .zoom-item{width:97vw}
  .zoom-item img{max-height:42vh}
  .zoom-title{font-size:clamp(28px,7.6vw,46px)}
  .zoom-desc{font-size:11px;line-height:1.5}
  .zoom-cap{font-size:9px;letter-spacing:.15em}
}

/* ============================================================
   ESCENAS ANCLADAS: display:block obligatorio
   `.scene` es un contenedor flex centrado verticalmente. Al heredarlo,
   el escenario sticky quedaba centrado dentro de una sección de varias
   pantallas, es decir arrancaba (alto - 1 pantalla) / 2 más abajo:
   1266 px en el caso de Redes. Esa era la franja negra al entrar y la
   razón de que las piezas parecieran durar poco: media escena se
   consumía antes de que el anclaje empezara.
   ============================================================ */
.scene--magia,.scene--caso,.scene--zoom,.scene--fotos{
  display:block;
  align-items:initial;justify-content:initial;
}

/* ============================================================
   PORTADAS DE CAPÍTULO — construidas, no lámina plana
   Piezas reales enviadas por Andrés: textura sobre gris de marca,
   arco propio de cada capítulo, isotipo y barra lima. El título va
   en HTML, así que escala con la pantalla en vez de encogerse.
   Aquí, y solo aquí, vive el enlace a Tu Marca app.
   ============================================================ */
.scene--portada{
  display:block;
  padding:0;overflow:hidden;
  height:var(--vh);
}
.pt-stage{
  position:relative;height:100%;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:calc(var(--nav-h) + 20px) clamp(16px,5vw,60px) clamp(22px,4vh,44px);
  background:#26262a;
  overflow:hidden;
}
.pt-bg{position:absolute;inset:0;z-index:0}
.pt-bg img{width:100%;height:100%;object-fit:cover}
.pt-vig{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(78% 62% at 50% 48%,rgba(5,6,6,.28) 0 34%,rgba(5,6,6,.72) 76%,rgba(5,6,6,.93) 100%),
    linear-gradient(180deg,rgba(5,6,6,.6),transparent 26% 66%,rgba(5,6,6,.8));
}
.pt-arc{
  position:absolute;z-index:2;top:-6%;left:-8%;
  width:min(30vw,330px);height:auto;pointer-events:none;
}
.pt-iso,.pt-title,.pt-bar{position:relative;z-index:3}
.pt-iso{width:clamp(46px,7vw,74px);height:auto;margin-bottom:clamp(14px,3vh,34px)}
.pt-title{
  font-size:clamp(46px,10.5vw,132px);font-weight:600;line-height:1;
  letter-spacing:-.045em;color:var(--blanco);
}
.pt-bar{
  display:inline-block;margin-top:clamp(12px,2.2vh,20px);
  background:var(--lima);color:var(--negro);
  padding:8px 16px 9px;border-radius:6px;
  font-size:clamp(11px,2.7vw,18px);font-weight:600;line-height:1.25;
  max-width:min(92vw,860px);
}
/* enlace a la app: compacto, opaco y anclado abajo */
.pt-cta{
  position:absolute;z-index:4;
  left:50%;bottom:clamp(16px,3vh,30px);
  transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 8px 7px 14px;border-radius:100px;
  background:#0A0E10;
  border:1px solid rgba(214,248,74,.6);
  box-shadow:0 8px 24px -12px rgba(0,0,0,.9);
  font-size:clamp(10px,2.4vw,12px);font-weight:600;letter-spacing:.06em;
  color:var(--blanco);white-space:nowrap;
  transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.pt-cta:hover{background:var(--lima);border-color:var(--lima);color:var(--negro)}
.pt-cta:hover svg{background:var(--negro);fill:var(--lima)}
.pt-cta svg{
  width:22px;height:22px;flex:0 0 auto;border-radius:50%;
  background:var(--lima);fill:var(--negro);padding:6px;
  transition:background .25s ease,fill .25s ease;
}
.pt-foot{display:none}

@supports (animation-timeline: view()){
  .scene--portada{view-timeline:--portada block}
  .scene--portada .pt-arc,
  .scene--portada .pt-iso,
  .scene--portada .pt-title,
  .scene--portada .pt-bar,
  .scene--portada .pt-cta{
    animation-timeline:--portada;animation-range:cover 0% cover 100%;
    animation-timing-function:linear;animation-fill-mode:both;
  }
  .scene--portada .pt-arc  {animation-name:ptArc}
  .scene--portada .pt-iso  {animation-name:ptIso}
  .scene--portada .pt-title{animation-name:ptTitle}
  .scene--portada .pt-bar  {animation-name:ptBar}
  .scene--portada .pt-cta  {animation-name:ptCta}
}
@keyframes ptArc{
  0%  {opacity:0;transform:translate(-4%,-6%)}
  22% {opacity:1;transform:translate(0,0)}
  100%{opacity:1;transform:translate(2%,5%)}
}
@keyframes ptIso{
  0%,8%{opacity:0;transform:translateY(14px)}
  26%  {opacity:1;transform:translateY(0)}
  100% {opacity:1;transform:translateY(-10px)}
}
@keyframes ptTitle{
  0%,12%{opacity:0;clip-path:inset(0 0 100% 0)}
  34%   {opacity:1;clip-path:inset(0 0 0 0)}
  100%  {opacity:1;clip-path:inset(0 0 0 0);transform:translateY(-14px)}
}
@keyframes ptBar{
  0%,20%{opacity:0;transform:translateY(16px)}
  38%   {opacity:1;transform:translateY(0)}
  100%  {opacity:1;transform:translateY(-12px)}
}
@keyframes ptCta{
  0%,24%{opacity:0;transform:translate(-50%,16px)}
  42%   {opacity:1;transform:translate(-50%,0)}
  100%  {opacity:1;transform:translate(-50%,0)}
}
@media (prefers-reduced-motion:reduce){
  .scene--portada :where(.pt-arc,.pt-iso,.pt-title,.pt-bar,.pt-cta){
    animation:none!important;opacity:1!important;clip-path:none!important;transform:none!important}
}
@media (max-width:640px){
  .pt-arc{width:44vw;top:-3%;left:-14%}
  .pt-title{font-size:clamp(40px,12.5vw,68px)}
  .pt-bar{font-size:11.5px;padding:7px 13px 8px}
}

/* mensaje final, al cerrar el portafolio */
#outroApp{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:clamp(26px,4vh,38px);
  font-size:clamp(11px,2.6vw,13px);letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--lima);
  transition:gap .25s ease,color .25s ease;
}
#outroApp:hover{gap:12px;color:var(--lima-2)}
#outroApp svg{width:20px;height:20px;fill:var(--negro);background:var(--lima);border-radius:50%;padding:5px}
.outro-legal{margin-top:clamp(18px,2.6vh,26px)}

/* teléfonos de pantalla corta: la misma coreografía, con piezas más
   pequeñas y el abanico desplazado para que quepa entre título y línea */
@media (max-width:760px) and (max-height:720px){
  .ph{--w:28vw}
  .ph--v{--w:11vw}
  .fotos-title{font-size:clamp(30px,9vw,40px)}
}

/* pantallas anchas pero bajas (portátiles de 720 px): el titular crecía por
   ancho mientras las filas se calculan por alto, y se tocaban */
@media (min-width:761px) and (max-height:820px){
  .ph{--w:15.5vw}
  .ph--v{--w:6.4vw}
}

/* ============================================================
   MODO ZOOM
   Mientras el usuario tiene la página ampliada, el escenario anclado
   deja de estarlo: si sigue pegado al viewport no se puede recorrer la
   pieza con el dedo, y esa es la sensación de que la página "se pega".
   Todo queda en su estado final, legible y estático. Al soltar el zoom
   se restituye y se vuelve a la sección donde estaba.
   ============================================================ */
html.zoomed .scene--magia,
html.zoomed .scene--caso,
html.zoomed .scene--zoom,
html.zoomed .scene--fotos{height:var(--vh)}
html.zoomed .magia-stage,
html.zoomed .caso-stage,
html.zoomed .zoom-stage,
html.zoomed .fotos-stage{position:static;height:var(--vh)}

html.zoomed :where(.frame,.cap,.ph,.zoom-item,.zoom-title,.zoom-desc,.zoom-cap,
  .caso-art,.caso-title,.caso-tag,.caso-copy,.magia-kicker,.magia-line,.magia-text,
  .fotos-title,.fotos-sub,.pt-arc,.pt-iso,.pt-title,.pt-bar,.pt-cta,
  .hero-in > *,.hero-serv,.reel,.hero-bg img,.magia-bg img,.caso-bg img,.zoom-bg img,.fotos-bg img){
  animation:none !important;
  opacity:1 !important;
  clip-path:none !important;
  transform:none !important;
}
html.zoomed .ph{
  transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--r)) !important;
}
html.zoomed .wand{
  animation:none !important;
  transform:translate(calc(-50% - 4vw), calc(-50% + 4vh)) rotate(-3deg) !important;
}
html.zoomed .zoom-item--b,
html.zoomed .zoom-cap--b{display:none}
html.zoomed .pt-cta{transform:translateX(-50%) !important}
html.zoomed .magia-copy::before{opacity:.85}

/* selector de idioma */
#lang{
  display:inline-flex;align-items:center;
  border:1px solid rgba(244,247,245,.24);border-radius:100px;
  overflow:hidden;background:rgba(5,6,6,.5);
}
#lang button{
  padding:5px 10px;
  font-size:10px;letter-spacing:.12em;font-weight:600;
  color:rgba(244,247,245,.6);
  transition:background .2s ease,color .2s ease;
}
#lang button.on{background:var(--lima);color:var(--negro)}
#lang button:not(.on):hover{color:var(--blanco)}
@media (max-width:420px){
  #lang button{padding:5px 8px;font-size:9px;letter-spacing:.08em}
  .nav-right{gap:9px}
  #chapterTag{padding:5px 9px;letter-spacing:.12em}
}

/* ============================================================
   PROPUESTA DE VALOR — seis tarjetas que se despliegan
   Reemplaza la lámina plana 3. Fondo claro, como la lámina
   original: el contraste con el resto del deck es intencional.
   Las tarjetas se abren hacia el lector, una tras otra.
   ============================================================ */
.scene--valor{display:block;padding:0;overflow:visible;contain:none;height:calc(var(--vh) * 2.3)}
.val-stage{
  position:sticky;top:0;height:var(--vh);width:100%;
  overflow:hidden;background:var(--negro);
  display:flex;flex-direction:column;align-items:center;
  padding:calc(var(--nav-h) + 20px) clamp(14px,4vw,54px) clamp(20px,4vh,40px);
  perspective:1400px;
}
/* misma textura que las portadas de capítulo */
.val-bg{position:absolute;inset:0;z-index:0}
.val-bg img{width:100%;height:100%;object-fit:cover;opacity:.5}
.val-stage::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(80% 62% at 50% 46%,transparent 0 30%,rgba(5,6,6,.66) 76%,rgba(5,6,6,.94) 100%),
    radial-gradient(60% 46% at 100% 100%,rgba(214,248,74,.08),transparent 62%),
    radial-gradient(56% 42% at 0% 0%,rgba(56,228,251,.08),transparent 62%);
}
.val-head{position:relative;z-index:2;text-align:center;flex:0 0 auto}
.val-kicker{
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(244,247,245,.55);font-weight:600;
}
.val-title{
  margin-top:6px;
  font-size:clamp(30px, min(6.4vw, 8.5vh), 68px);font-weight:600;line-height:1;
  letter-spacing:-.035em;color:var(--blanco);
}
.val-title b{color:var(--lima);font-weight:600}

.val-grid{
  position:relative;z-index:2;
  flex:1 1 auto;min-height:0;
  width:100%;max-width:1180px;
  margin-top:clamp(12px,2.4vh,26px);
  display:grid;gap:clamp(8px,1.4vw,16px);
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(2,1fr);
}
.val-card{
  background:rgba(244,247,245,.045);
  border:1.5px solid rgba(244,247,245,.8);
  border-radius:16px;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  padding:clamp(12px,1.8vw,22px);
  display:flex;flex-direction:column;
  transform-origin:top center;
  box-shadow:0 14px 34px -22px rgba(0,0,0,.9);
  min-height:0;overflow:hidden;
}
.val-card h3{
  font-size:clamp(15px, min(2.1vw, 2.9vh), 30px);font-weight:600;line-height:1.02;
  letter-spacing:-.03em;color:var(--blanco);
}
.val-card p{
  margin-top:clamp(6px,1vh,12px);
  font-size:clamp(10px, min(1.05vw, 1.62vh), 15px);line-height:1.45;
  color:rgba(244,247,245,.68);font-weight:300;
}
.val-n{
  align-self:flex-start;margin-bottom:6px;
  font-size:9px;letter-spacing:.2em;font-weight:700;color:var(--negro);
  background:var(--lima);border-radius:100px;padding:3px 8px;
}

@supports (animation-timeline: view()){
  .scene--valor{view-timeline:--valor block}
  .val-head,.val-card{
    animation-timeline:--valor;animation-timing-function:linear;animation-fill-mode:both;
  }
  .val-head{animation-name:valHead;animation-range:contain 0% contain 100%}
  .val-card{animation-name:valFold}
  .val-card:nth-child(1){animation-range:contain 6%  contain 100%}
  .val-card:nth-child(2){animation-range:contain 12% contain 100%}
  .val-card:nth-child(3){animation-range:contain 18% contain 100%}
  .val-card:nth-child(4){animation-range:contain 24% contain 100%}
  .val-card:nth-child(5){animation-range:contain 30% contain 100%}
  .val-card:nth-child(6){animation-range:contain 36% contain 100%}
}
@keyframes valHead{
  0%,2%{opacity:0;transform:translateY(16px)}
  18%  {opacity:1;transform:translateY(0)}
  100% {opacity:1;transform:translateY(0)}
}
/* la tarjeta se abre hacia el lector, como una hoja plegada */
@keyframes valFold{
  0%  {opacity:0;transform:rotateX(-72deg) translateY(-6px)}
  16% {opacity:1}
  34% {opacity:1;transform:rotateX(0deg) translateY(0)}
  100%{opacity:1;transform:rotateX(0deg) translateY(0)}
}
@supports not (animation-timeline: view()){
  .scene--valor{height:var(--vh)}
}
@media (prefers-reduced-motion:reduce){
  .scene--valor{height:var(--vh)}
  .val-head,.val-card{animation:none!important;opacity:1!important;transform:none!important}
}
html.zoomed .val-head,html.zoomed .val-card{
  animation:none!important;opacity:1!important;transform:none!important}
html.zoomed .val-stage{position:static;height:var(--vh)}

@media (max-width:860px){
  .val-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr)}
  .val-card{border-radius:13px;border-width:1.4px;padding:11px 12px}
  .val-card h3{font-size:clamp(14px, min(4.3vw, 2.6vh), 22px)}
  .val-card p{font-size:clamp(9.5px, min(2.7vw, 1.5vh), 13px);line-height:1.4;margin-top:6px}
  .val-n{font-size:8px;padding:2px 7px;margin-bottom:5px}
}

/* volver al inicio */
#toTop{
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 20px;border-radius:100px;
  border:1px solid rgba(244,247,245,.28);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:var(--blanco);transition:.25s var(--ease);
}
#toTop:hover{border-color:var(--lima);color:var(--lima)}
#toTop svg{width:16px;height:16px;fill:currentColor}

/* teléfonos de pantalla corta: la tarjeta manda, el texto se ajusta a ella */
@media (max-width:860px) and (max-height:700px){
  .val-stage{padding-top:calc(var(--nav-h) + 12px)}
  .val-title{font-size:clamp(26px, min(6vw, 7vh), 40px)}
  .val-grid{gap:7px;margin-top:10px}
  .val-card{padding:9px 10px;border-radius:11px}
  .val-card h3{font-size:clamp(12.5px, min(3.9vw, 2.4vh), 17px)}
  .val-card p{font-size:clamp(8.6px, min(2.45vw, 1.35vh), 11px);line-height:1.34;margin-top:5px}
  .val-n{font-size:7.5px;padding:2px 6px;margin-bottom:4px}
}

/* botón principal del cierre: pesa más que los demás */
.btn-xl{
  padding:18px 30px;
  font-size:clamp(12px,3vw,15px);letter-spacing:.09em;
  border-radius:100px;
  box-shadow:0 14px 34px -14px rgba(214,248,74,.55);
}
.outro-actions{align-items:center}

/* ============================================================
   MÚSICA
   El reproductor de Spotify no puede sonar sin que el visitante
   toque la página: los navegadores bloquean el audio automático.
   Lo que se hace es dejarlo listo y lanzarlo en el primer gesto
   (un toque o un scroll), que es lo más cercano a "automático"
   que permite la plataforma.
   ============================================================ */
#musicBtn{
  width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(244,247,245,.24);
  background:rgba(5,6,6,.5);
  transition:background .25s ease,border-color .25s ease;
}
#musicBtn svg{width:15px;height:15px;fill:rgba(244,247,245,.65);transition:fill .25s ease}
#musicBtn[aria-pressed="true"]{background:var(--lima);border-color:var(--lima)}
#musicBtn[aria-pressed="true"] svg{fill:var(--negro)}
#musicBtn.sonando svg{animation:notaLatido 1.6s ease-in-out infinite}
@keyframes notaLatido{0%,100%{opacity:1}50%{opacity:.45}}

#musicPanel{
  position:fixed;z-index:112;
  top:calc(var(--nav-h) + 8px);right:clamp(10px,3vw,26px);
  width:min(420px,92vw);
  border-radius:14px;overflow:hidden;
  background:rgba(10,14,16,.96);
  border:1px solid rgba(244,247,245,.14);
  box-shadow:0 20px 50px -22px rgba(0,0,0,.95);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .28s ease,visibility .28s,transform .28s ease;
}
#musicPanel.open{opacity:1;visibility:visible;transform:none}
#musicPanel iframe{display:block;width:100%;border:0}
@media (max-width:420px){
  #musicBtn{width:29px;height:29px}
  #musicBtn svg{width:13px;height:13px}
}

/* acceso a la galería desde la escena de fotografía */
.fotos-cta{
  position:absolute;z-index:6;left:50%;bottom:calc(3% + 66px);
  transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 10px 9px 17px;border-radius:100px;
  background:#0A0E10;border:1px solid rgba(214,248,74,.6);
  box-shadow:0 10px 28px -14px rgba(0,0,0,.9);
  font-size:clamp(10px,2.5vw,12.5px);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--blanco);white-space:nowrap;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.fotos-cta:hover{background:var(--lima);color:var(--negro);border-color:var(--lima)}
.fotos-cta svg{
  width:22px;height:22px;flex:0 0 auto;border-radius:50%;
  background:var(--lima);fill:var(--negro);padding:6px;
  transition:background .25s ease,fill .25s ease;
}
.fotos-cta:hover svg{background:var(--negro);fill:var(--lima)}
@keyframes fotosCta{
  0%,40%{opacity:0;transform:translate(-50%,14px)}
  56%   {opacity:1;transform:translate(-50%,0)}
  100%  {opacity:1;transform:translate(-50%,0)}
}
@supports (animation-timeline: view()){
  .fotos-cta{
    animation-name:fotosCta;animation-timeline:--fotos;
    animation-range:contain 0% contain 100%;
    animation-timing-function:linear;animation-fill-mode:both;
  }
}
html.zoomed .fotos-cta{animation:none!important;opacity:1!important;transform:translateX(-50%)!important}
@media (max-width:760px){
  .fotos-cta{bottom:calc(4% + 66px)}
}

/* portátiles de 720 px: piezas más pequeñas y filas más separadas para que
   quepan las tres filas, el botón y la línea de categorías */
@media (min-width:761px) and (max-height:820px){
  .ph{--w:12vw}
  .ph--v{--w:5vw}
  .ph:nth-child(1){--y:calc(var(--vh) * -0.195)}
  .ph:nth-child(2){--y:calc(var(--vh) * -0.207)}
  .ph:nth-child(3){--y:calc(var(--vh) * -0.19)}
  .ph:nth-child(4){--y:calc(var(--vh) * -0.008)}
  .ph:nth-child(5){--y:calc(var(--vh) * -0.02)}
  .ph:nth-child(6){--y:calc(var(--vh) * -0.003)}
  .ph:nth-child(7){--y:calc(var(--vh) * 0.155)}
  .ph:nth-child(8){--y:calc(var(--vh) * 0.143)}
  .ph:nth-child(9){--y:calc(var(--vh) * 0.16)}
}

/* teléfonos de 640 px: el abanico cede lo justo para el botón de galería */
@media (max-width:760px) and (max-height:700px){
  .ph{--w:27vw}
  .ph--v{--w:10.8vw}
  .ph:nth-child(1){--y:calc(var(--vh) * -0.222)}
  .ph:nth-child(2){--y:calc(var(--vh) * -0.1665)}
  .ph:nth-child(3){--y:calc(var(--vh) * -0.111)}
  .ph:nth-child(4){--y:calc(var(--vh) * -0.0555)}
  .ph:nth-child(5){--y:calc(var(--vh) * 0)}
  .ph:nth-child(6){--y:calc(var(--vh) * 0.0555)}
  .ph:nth-child(7){--y:calc(var(--vh) * 0.111)}
  .ph:nth-child(8){--y:calc(var(--vh) * 0.1665)}
  .ph:nth-child(9){--y:calc(var(--vh) * 0.222)}
}

/* ---- Aminute en los títulos grandes ----
   La familia solo tiene Regular, así que se fija el peso en 400 y se
   suelta el tracking: con negativo se apelmaza, es una letra ancha. */
.hero-claim,
.magia-kicker,.magia-word,
.caso-title,
.zoom-title,
.fotos-title,
.pt-title,
.val-title,
.outro-title,
.lam-title,
.reel-info b{
  font-family:var(--tipo-titulo);
  font-weight:400;
  letter-spacing:-.005em;
}
.magia-word{font-weight:400}