/* ==========================================================================
   «Redefine Normal» — «El lazo»
   El símbolo de cuc wear es una sola línea que se dobla sobre sí misma. Un shader WebGL pinta un mundo gris (rejilla de puntos
   iguales: «lo normal») que se derrite en color líquido donde pasas tú; el símbolo (tinta oscura) se llena de color y el scroll
   entra por dentro del trazo hasta que todo es color y aparece «Redefine Normal».
   Tipografía siempre en HTML (nítida). Rules / póster / cierre usan los estilos de redefine.css.
   ========================================================================== */
.lz{--tx:var(--ink);--tx2:var(--ink-2)}

/* ---------- Escenario ---------- */
.lzs{position:relative;height:760svh;background:var(--paper)}
.lzs__stick{position:sticky;top:calc(var(--bar-h) + var(--header-h));height:calc(100svh - var(--bar-h) - var(--header-h));overflow:hidden;background:var(--paper);cursor:crosshair}
.lzs__cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
/* sin WebGL: fondo estático con la paleta de la marca */
.lz--nogl .lzs__stick{background:radial-gradient(60% 70% at 18% 22%,#9AD6C5 0,rgba(154,214,197,0) 70%),radial-gradient(55% 65% at 82% 28%,#F2A5B8 0,rgba(242,165,184,0) 70%),radial-gradient(70% 70% at 60% 90%,#E9C46A 0,rgba(233,196,106,0) 70%),var(--paper)}
.lz--nogl .lzs__cv{display:none}

/* velos: aclaran/oscurecen el fondo detrás de los textos */
.lzs__veil i{position:absolute;inset:0;pointer-events:none;transition:opacity .9s}
.lzs__veil .v1{background:radial-gradient(ellipse 70% 62% at 8% 96%,rgba(241,240,236,.96),rgba(241,240,236,.82) 46%,rgba(241,240,236,0) 100%)}
.lzs__veil .v2{opacity:0;background:radial-gradient(ellipse 84% 80% at 6% 100%,rgba(41,46,51,.72),rgba(41,46,51,.4) 55%,rgba(41,46,51,0) 100%),linear-gradient(to bottom,rgba(41,46,51,.28),rgba(41,46,51,0) 22%)}
.lzs__stick.is-dark .v1{opacity:0}
.lzs__stick.is-dark .v2{opacity:1}
.lzs__stick.is-dark{--tx:#fff;--tx2:rgba(255,255,255,.9)}
.lz--nogl .lzs__veil .v2{display:none}
.lz--nogl .lzs__stick.is-dark{--tx:var(--ink);--tx2:var(--ink-2)}

/* ---------- Interfaz ---------- */
.lzs__hud{position:absolute;inset:0;padding:16px var(--gutter) 0;pointer-events:none}
.lzs__hud button,.lzs__hud a{pointer-events:auto}
.lzs__brand{display:inline-flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin:0;padding:7px 11px;background:var(--paper);color:var(--ink);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.lzs__brand sup{font-size:.8em}
.lzs__brand small{font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:none;color:var(--ink-2)}

.lzs__acts{position:absolute;inset:0;pointer-events:none}
.la{position:absolute;left:var(--gutter);bottom:clamp(74px,10.5vh,106px);width:min(560px,46vw);color:var(--tx);opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s,color .6s}
.la.is-on{opacity:1;visibility:visible;transition-delay:.12s,0s,0s}
.la__k{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tx2);opacity:0;transform:translateY(8px);transition:opacity .6s,transform .8s var(--ease),color .6s}
.la__k::before{content:"";flex:none;width:18px;height:2px;background:var(--c0,var(--terra))}
.la[data-a="0"]{--c0:#9a978f}.la[data-a="1"]{--c0:#1F8A9B}.la[data-a="2"]{--c0:#E4572E}.la[data-a="3"]{--c0:#E9C46A}.la[data-a="4"]{--c0:#F2A5B8}
.la h2{margin:clamp(12px,1.5vw,20px) 0 0;font-size:clamp(34px,4.7vw,80px);font-weight:600;line-height:.96;letter-spacing:-.058em}
.la .w{display:inline-block}
.la .w>i{display:inline-block;font-style:normal;opacity:0;transform:translateY(.4em);transition:opacity .6s,transform .95s var(--ease)}
.la em{font-style:normal}
.la em .w>i{font-weight:300}
.la p,.la .link{opacity:0;transform:translateY(12px);transition:opacity .7s,transform .9s var(--ease),color .6s}
.la p{margin:clamp(12px,1.4vw,20px) 0 0;max-width:44ch;font-size:clamp(14px,1.1vw,16.5px);font-weight:300;line-height:1.62;color:var(--tx2)}
.la .p-t{display:none}
.la .link{margin-top:18px;display:inline-flex;color:var(--tx)}
.la.is-on .la__k,.la.is-on p,.la.is-on .link{opacity:1;transform:none;transition-delay:.12s}
.la.is-on p{transition-delay:.45s}.la.is-on .link{transition-delay:.6s}
.la.is-on .w>i{opacity:1;transform:none;transition-delay:calc(var(--i) * .07s + .18s)}
/* capítulo final: el titular enorme */
.la[data-a="4"]{width:min(1200px,calc(100% - 2 * var(--gutter)));bottom:clamp(66px,9vh,96px)}
.la[data-a="4"] h2{font-size:clamp(54px,12.6vw,214px);line-height:.86;letter-spacing:-.066em;margin-top:clamp(10px,1.2vw,18px)}
.la[data-a="4"] p{max-width:52ch}
.la[data-a="4"] .link{text-decoration:none}

/* medidor: color en pantalla */
.lzs__meter{position:absolute;right:var(--gutter);top:16px;text-align:right;padding:9px 13px 11px;background:var(--paper);color:var(--ink);min-width:168px}
.lzs__meter small{display:block;font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.lzs__meter .v{display:flex;justify-content:flex-end;align-items:baseline;gap:2px;line-height:1;letter-spacing:-.06em;margin-top:6px}
.lzs__meter b{font-size:clamp(38px,4.6vw,76px);font-weight:600;font-variant-numeric:tabular-nums}
.lzs__meter .v span{font-size:clamp(18px,2vw,32px);font-weight:300}
.lzs__meter .bar{height:3px;margin-top:8px;background:rgba(41,46,51,.18);position:relative;overflow:hidden}
.lzs__meter .bar i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#1F8A9B,#6F9CC6,#E9C46A,#E4572E,#F2A5B8)}

/* capítulos */
.lzs__rail{position:absolute;left:var(--gutter);right:var(--gutter);bottom:16px;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,1.2vw,18px)}
.lzs__rail button{display:grid;gap:8px;text-align:left;padding:8px 0 0;font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);cursor:pointer;transition:color .3s}
.lzs__rail i{display:block;height:2px;background:rgba(41,46,51,.22);position:relative;overflow:hidden}
.lzs__rail i::after{content:"";position:absolute;inset:0;background:var(--ink);transform-origin:0 50%;transform:scaleX(var(--f,0))}
.lzs__rail em{font-style:normal;font-weight:600;color:var(--ink);margin-right:6px}
.lzs__rail span{justify-self:start;padding:3px 6px 3px 0;background:var(--paper)}
.lzs__rail button.is-on{color:var(--ink)}
.lzs__hint{position:absolute;right:var(--gutter);bottom:72px;display:flex;gap:10px;align-items:center;padding:8px 14px;background:var(--paper);color:var(--ink);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;transition:opacity .5s}
.lzs__hint .d{width:8px;height:8px;border-radius:50%;background:var(--terra);animation:lzping 1.6s ease-in-out infinite}
.lzs__hint .t-t{display:none}
.lzs__hint.is-off{opacity:0}
@keyframes lzping{50%{transform:scale(1.7);opacity:.4}}

/* cursor: punto que invierte los colores (solo ratón) */
.lzs__cur{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:6;will-change:transform}
.lzs__cur i{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:#fff;mix-blend-mode:difference;opacity:0;transform:scale(.4);transition:opacity .25s,transform .35s var(--ease)}
.lzs__cur.is-on i{opacity:1;transform:scale(1)}
.lzs__cur.is-down i{transform:scale(2.6)}
@media (hover:none){.lzs__cur{display:none}.lzs__stick{cursor:auto}}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .la{width:calc(100% - 2 * var(--gutter))}
}
@media (max-width:700px){
  .lzs{height:700svh}
  .lzs__hud{padding-top:12px}
  .lzs__brand small{display:none}
  .la{bottom:78px}
  .la h2{font-size:clamp(32px,9.4vw,46px)}
  .la p{font-size:14px;max-width:36ch}
  .la .p-m{display:none}.la .p-t{display:block}
  .la[data-a="4"]{bottom:76px}
  .la[data-a="4"] h2{font-size:clamp(50px,17.6vw,92px)}
  .lzs__meter{top:12px;min-width:0;padding:6px 10px 8px}
  .lzs__meter small{font-size:8.5px;letter-spacing:.12em}
  .lzs__meter b{font-size:30px}
  .lzs__rail{bottom:10px;gap:5px}
  .lzs__rail button{font-size:8px;letter-spacing:.08em}
  .lzs__rail em{display:block;margin:0 0 1px}
  .lzs__hint{right:auto;left:var(--gutter);bottom:auto;top:62px;font-size:9px;padding:7px 11px}
  .lzs__hint .t-m{display:none}.lzs__hint .t-t{display:inline}
}
@media (prefers-reduced-motion:reduce){
  .la,.la *{transition:none!important}
  .lzs__hint .d{animation:none}
}

/* capítulo 2 (el símbolo): bloque algo más ancho y titular algo menor para no rozar el logotipo */
@media (min-width:1001px){
  .la[data-a="2"]{width:min(640px,50vw)}
  .la[data-a="2"] h2{font-size:clamp(30px,3.6vw,54px)}
}

/* móvil: velos en degradado desde abajo (más sólidos) para que el texto largo se lea siempre sobre el color */
@media (max-width:700px){
  .lzs__veil .v1{background:linear-gradient(to top,rgba(241,240,236,.98) 0,rgba(241,240,236,.93) 40%,rgba(241,240,236,.55) 56%,rgba(241,240,236,0) 70%)}
  .lzs__veil .v2{background:linear-gradient(to top,rgba(41,46,51,.8) 0,rgba(41,46,51,.62) 40%,rgba(41,46,51,.25) 58%,rgba(41,46,51,0) 70%),linear-gradient(to bottom,rgba(41,46,51,.3),rgba(41,46,51,0) 22%)}
}

/* titulares del escenario: interlineado algo más abierto (varias líneas) */
.la h2{line-height:1.04}
.la[data-a="4"] h2{line-height:.92}