/* ---------- Tipografias autoalojadas ----------
   Antes venian de fonts.googleapis.com, que bloqueaba el pintado ~1.150 ms
   (DNS + TLS + CSS + fuentes, en cadena). Ahora salen del mismo dominio.
   Ademas evita mandar la IP de cada visitante a Google, que es lo que el
   aviso legal tenia que declarar.
   Solo se incluyen los subsets latin y latin-ext: es lo que necesita el
   espanol. El navegador solo descarga el que haga falta (unicode-range). */

/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/instrument-sans-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/instrument-sans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/instrument-sans-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/instrument-sans-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/martian-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/martian-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/martian-mono-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/martian-mono-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================================
   Tenerife Vaciados, hoja de estilos
   Un solo mundo: el del pasillo. Lienzo umbrío, luz de tarde y el cian de la
   puerta como acento. La película no se acaba en la entrada.
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --canvas:#14100C;
  --panel:#241C13;
  --panel-2:#262019;
  --accent:#5FB3CE;
  --accent-hover:#8ED3E8;
  --accent-deep:#17566B;
  --accent-deep-hover:#1E6E88;
  --accent-muted:rgba(95,179,206,.16);
  --text-primary:#F2ECE0;
  --text-secondary:#A2957F;
  --ink-light:#17130D;
  --ink-light-soft:#5C5344;
  --rule:rgba(242,236,224,.12);
  --rule-strong:rgba(242,236,224,.42);

  --display:"Bricolage Grotesque","Arial Black",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,sans-serif;
  --mono:"Martian Mono",ui-monospace,"Courier New",monospace;

  --s-1:clamp(.78rem,.75rem + .12vw,.86rem);
  --s0:clamp(1rem,.96rem + .2vw,1.08rem);
  --s1:clamp(1.15rem,1.05rem + .45vw,1.4rem);
  --s2:clamp(1.35rem,1.15rem + .9vw,2rem);
  --s3:clamp(2rem,1.5rem + 2.2vw,3.3rem);   /* titular de seccion, con voz */
  --s4:clamp(2.3rem,1.7rem + 2.9vw,4rem);
  --s-band:clamp(2rem,1.5rem + 2.6vw,3.6rem);   /* las frases del hero, todas iguales */

  --gap:clamp(1.4rem,1rem + 2vw,3rem);
  --band-pad:clamp(4rem,3rem + 5.5vw,8.5rem);

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --tshadow:0 1px 2px rgba(8,7,5,.95),0 3px 12px rgba(8,7,5,.78),0 10px 44px rgba(8,7,5,.8);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--canvas);color:var(--text-primary);
  font-family:var(--body);font-size:var(--s0);line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
ul{margin:0;padding:0;list-style:none}
p{margin:0;text-wrap:pretty}
figure{margin:0}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:800;line-height:1;letter-spacing:-.018em;text-wrap:balance}
button{font:inherit;cursor:pointer}

:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--accent);color:#0B0906;padding:12px 20px;font-weight:700;border-radius:0 0 6px 0}
.skip:focus{left:0;top:0}

.wrap{width:min(1200px,100% - 2.6rem);margin-inline:auto}
.wrap--estrecho{width:min(860px,100% - 2.6rem)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.eyebrow{
  font-family:var(--mono);font-size:var(--s-1);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  display:flex;align-items:center;gap:12px;margin-bottom:18px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--accent);flex:none}

.h2{font-size:var(--s3);max-width:20ch;line-height:1.06}
/* Ocho titulares del mismo tamaño hacen que ninguno importe. La pagina
   necesita momentos altos y momentos bajos, no ocho medios. */
.h2--alto{font-size:var(--s4);max-width:16ch;letter-spacing:-.022em;line-height:1.02}
.h2--bajo{font-size:var(--s2);max-width:24ch;letter-spacing:-.005em}
.lede{font-size:var(--s1);color:var(--text-secondary);max-width:46ch;margin-top:22px;line-height:1.5}

/* ---------- 3. El entorno fijo ---------- */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.env__light{
  position:absolute;inset:-20%;
  background:radial-gradient(ellipse 55% 45% at 28% 18%,rgba(214,170,104,.14) 0%,rgba(214,170,104,0) 66%),
             radial-gradient(ellipse 45% 55% at 82% 80%,rgba(95,179,206,.09) 0%,rgba(95,179,206,0) 64%);
  animation:driftLight 96s var(--ease-soft) -22s infinite alternate;
}
@keyframes driftLight{
  from{transform:translate3d(-2.5%,-1.5%,0) scale(1)}
  to{transform:translate3d(3%,2.5%,0) scale(1.07)}
}
.mote{position:absolute;width:4px;height:4px;border-radius:50%;background:rgba(242,236,224,.5);opacity:.4}
.mote:nth-child(2){left:12%;top:26%;animation:mote 74s linear -12s infinite}
.mote:nth-child(3){left:38%;top:64%;animation:mote 88s linear -40s infinite}
.mote:nth-child(4){left:67%;top:18%;animation:mote 96s linear -61s infinite}
.mote:nth-child(5){left:84%;top:52%;animation:mote 80s linear -30s infinite}
.mote:nth-child(6){left:52%;top:86%;animation:mote 92s linear -70s infinite}
@keyframes mote{
  0%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(26px,-42px,0)}
  100%{transform:translate3d(0,0,0)}
}

/* ---------- 4. La línea de zócalo (elemento firma) ---------- */
.rail{
  position:fixed;left:max(14px,calc((100vw - min(1200px,100vw - 2.6rem))/2 - 22px));
  top:0;bottom:0;width:2px;background:var(--rule);z-index:1;pointer-events:none;
}
.rail__fill{position:absolute;left:0;top:0;width:2px;height:0;background:var(--accent);opacity:.6}
.corner{display:block;width:56px;height:34px;margin-bottom:20px;color:var(--rule-strong);overflow:visible}
.corner path{
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-dasharray:120;stroke-dashoffset:120;
  transition:stroke-dashoffset 1.1s var(--ease);
}
.corner.in path,.in .corner path{stroke-dashoffset:0}

/* ---------- 5. Cabecera ---------- */
.header{
  position:sticky;top:0;z-index:120;
  background:color-mix(in srgb,var(--canvas) 86%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease-soft);
}
.header.is-stuck{border-bottom-color:var(--rule)}
.header__in{display:flex;align-items:center;gap:20px;height:70px;
  transition:height .45s var(--ease)}
/* al bajar, la cabecera se recoge: menos barra, mas pagina */
.header.is-stuck .header__in{height:58px}
.header .brand span,.header .btn{transition:opacity .45s var(--ease),transform .45s var(--ease),
  background .22s var(--ease-soft),box-shadow .35s var(--ease)}
.header.is-stuck .brand span{opacity:0;transform:translateY(-4px)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.brand svg{width:30px;height:30px;flex:none}
.brand b{font-family:var(--display);font-weight:800;font-size:1.02rem;line-height:1.05;letter-spacing:-.01em}
.brand span{display:block;font-family:var(--mono);font-size:.63rem;font-weight:400;letter-spacing:.16em;color:var(--text-secondary);text-transform:uppercase;margin-top:2px}

.nav{margin-left:auto;display:flex;gap:26px}
.nav a{text-decoration:none;font-size:.93rem;font-weight:500;color:var(--text-secondary);padding:6px 0;position:relative;transition:color .2s var(--ease-soft)}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--accent);transition:width .3s var(--ease)}
.nav a:hover{color:var(--text-primary)}
.nav a:hover::after{width:100%}
/* La seccion en la que esta el lector. Sin esto el menu no dice donde estas. */
.nav a[aria-current="true"]{color:var(--text-primary)}
.nav a[aria-current="true"]::after{width:100%;opacity:.55}

.header .btn{flex:none}
.burger{display:none;width:44px;height:44px;border:2px solid var(--rule-strong);border-radius:6px;background:transparent;place-items:center}
.burger i{display:block;width:18px;height:2px;background:var(--text-primary);position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--text-primary);transition:transform .28s var(--ease)}
.burger i::before{top:-6px}
.burger i::after{top:6px}
.burger[aria-expanded="true"] i{background:transparent}
.burger[aria-expanded="true"] i::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] i::after{transform:translateY(-6px) rotate(-45deg)}

/* ---------- 6. Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--body);font-weight:600;font-size:.98rem;line-height:1.1;
  text-decoration:none;padding:14px 22px;border-radius:7px;border:2px solid transparent;
  transition:transform .22s var(--ease),background .22s var(--ease-soft),color .22s var(--ease-soft),border-color .22s var(--ease-soft);
}
/* El resplandor lleva el tono del acento, no negro generico: una sombra
   negra sobre lienzo casi negro no se ve, y sobre panel ensucia. */
.btn{transition:transform .28s var(--ease),background .22s var(--ease-soft),
  border-color .22s var(--ease-soft),box-shadow .38s var(--ease),color .22s var(--ease-soft)}
.btn svg{transition:transform .34s var(--ease)}
.btn:hover{transform:translateY(-2px) scale(1.018)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:translateY(0) scale(.99)}
.btn--go:hover{box-shadow:0 8px 30px -6px rgba(95,179,206,.42),0 0 0 1px rgba(142,211,232,.28) inset}
.btn--line:hover{box-shadow:0 8px 26px -8px rgba(95,179,206,.30)}
.btn--onfilm:hover{box-shadow:0 8px 26px -8px rgba(242,236,224,.26)}
/* el teléfono no avanza, vibra un poco: es otro gesto */
.btn[href^="tel:"]:hover svg{transform:rotate(-9deg) scale(1.06)}
@media (prefers-reduced-motion:reduce){
  .btn:hover{transform:none}
  .btn:hover svg{transform:none}
}
.btn--go{background:var(--accent-deep);color:#fff}
.btn--go:hover{background:var(--accent-deep-hover)}
.btn--line{border-color:var(--rule-strong);color:var(--text-primary)}
.btn--line:hover{border-color:var(--accent);background:var(--accent);color:#0B0906}
.btn--onfilm{border-color:rgba(244,240,232,.8);color:#F6F2EA}
.btn--onfilm:hover{background:#F6F2EA;color:#14100C;border-color:#F6F2EA}
.btn--wide{width:100%}
@media (pointer:coarse){
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}

/* ---------- 7. El hero con vídeo (aprobado, no tocar) ---------- */
/* El vídeo pasó de 6 a 9,6 segundos. El hero crece en la misma proporción
   para que cada frase conserve su meseta de lectura. */
.hero{position:relative;height:320vh;z-index:2}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#0C0A08}
.poster{
  position:absolute;inset:0;background-size:cover;background-position:center;
  background-color:#0C0A08;
  background-image:
    radial-gradient(ellipse 26% 34% at 50% 44%,rgba(255,231,186,.92) 0%,rgba(255,214,150,.35) 34%,rgba(255,200,130,0) 70%),
    radial-gradient(ellipse 70% 60% at 50% 50%,rgba(58,44,31,.7) 0%,rgba(16,12,9,.98) 78%),
    linear-gradient(180deg,#100C09 0%,#1B140E 42%,#0C0A08 100%);
}
@media (orientation:portrait){
  .poster{
    background-image:
      radial-gradient(ellipse 62% 22% at 50% 42%,rgba(255,231,186,.9) 0%,rgba(255,214,150,.34) 36%,rgba(255,200,130,0) 72%),
      radial-gradient(ellipse 120% 56% at 50% 50%,rgba(58,44,31,.66) 0%,rgba(16,12,9,.98) 80%),
      linear-gradient(180deg,#100C09 0%,#1B140E 44%,#0C0A08 100%);
  }
}
.poster__img{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity .7s var(--ease-soft);
}
.poster__img.on{opacity:1}
.stage video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .6s var(--ease-soft);will-change:transform;transform:translateZ(0);
}
.stage.video-ready video{opacity:1}
.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,9,6,0) 35%,rgba(10,9,6,.62) 100%);
}

.band{
  position:absolute;inset:0;display:flex;align-items:center;
  padding:0 var(--band-pad);opacity:0;pointer-events:none;
  color:#F6F2EA;text-shadow:var(--tshadow);
}
.band .btn{text-shadow:none}
/* La banda entera lleva pointer-events:none para no bloquear el scroll, y eso
   mataba los clics de los botones de dentro. Se reactivan SOLO en la banda que
   esta visible; si se activaran en todas habria botones invisibles clicables. */
.band.is-live{pointer-events:none}
.band.is-live .btn{pointer-events:auto}
.band::before{
  content:"";position:absolute;inset:-4%;pointer-events:none;
  opacity:calc(.25 + .75*var(--k,1));
}
.band--left{justify-content:flex-start}
.band--right{justify-content:flex-end;text-align:right}
.band--center{justify-content:center;align-items:flex-end;text-align:center;padding-bottom:14vh}

.band--left::before{background:radial-gradient(ellipse 54% 68% at 22% 50%,rgba(5,5,8,.8) 0%,rgba(5,5,8,.58) 50%,rgba(5,5,8,0) 80%)}
.band--right::before{background:radial-gradient(ellipse 52% 66% at 78% 50%,rgba(5,5,8,.74) 0%,rgba(5,5,8,.54) 50%,rgba(5,5,8,0) 80%)}
.band--center::before{background:radial-gradient(ellipse 82% 56% at 50% 76%,rgba(5,5,8,.76) 0%,rgba(5,5,8,.54) 48%,rgba(5,5,8,0) 80%)}
.band--deep.band--left::before{background:radial-gradient(ellipse 48% 74% at 20% 50%,rgba(5,5,8,.82) 0%,rgba(5,5,8,.6) 52%,rgba(5,5,8,0) 84%)}
.band--deep.band--center::before{background:radial-gradient(ellipse 94% 62% at 50% 76%,rgba(5,5,8,.86) 0%,rgba(5,5,8,.62) 50%,rgba(5,5,8,0) 86%)}

.band__in{position:relative;z-index:1;max-width:min(30rem,42vw)}
/* No ensanchar. A 54rem el titular invade el vano claro y la auditoría de
   legibilidad de la banda 4 cae de 5.73 a 2.68. */
.band--center .band__in{max-width:min(46rem,80vw)}
.band h2,.band p.big{font-family:var(--display);font-weight:800;font-size:var(--s-band);line-height:.96;letter-spacing:-.022em}
.band .sub{font-size:var(--s1);color:#DCD5C8;margin-top:16px;line-height:1.4;max-width:30ch}
.band--right .sub{margin-left:auto}
.band--center .sub{margin-inline:auto;max-width:44ch;color:#E4DCCE}
.band__cta{display:flex;flex-wrap:wrap;gap:11px;justify-content:center;margin-top:26px}

.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}

.e-drift .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * -26px));
}
.e-clear .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translate(calc((1 - var(--kc)) * var(--jx,0px)),calc((1 - var(--kc)) * var(--jy,0px)))
            rotate(calc((1 - var(--kc)) * var(--jr,0deg)));
}
.e-punch .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);
  opacity:var(--kc);
  transform:scale(calc(.62 + (.38 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)));
}
.e-punch .w.em{--ov:.24;--sd:.16;--ss:2.6}
.e-rise .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.7,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 30px));
}
.band--center .sub{opacity:var(--ks2,1);transform:translateY(calc((1 - var(--ks2,1)) * 18px))}
.band--center .band__cta{opacity:var(--kb,1);transform:translateY(calc((1 - var(--kb,1)) * 16px))}

.ring{position:absolute;right:26px;bottom:24px;width:44px;height:44px;color:rgba(246,242,234,.75);z-index:3}
.ring circle{stroke-dashoffset:var(--ld,126);transition:stroke-dashoffset .18s linear}
.cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;color:rgba(246,242,234,.72);display:flex;flex-direction:column;align-items:center;gap:7px;font-family:var(--mono);font-size:.67rem;letter-spacing:.18em;text-transform:uppercase}
.cue svg{animation:nudge 2.6s var(--ease-soft) infinite}
@keyframes nudge{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(6px);opacity:1}}
@media (max-height:560px){.cue,.ring{display:none}}

/* ---------- 8. El hero estático ---------- */
.static-hero{display:none;position:relative;min-height:86vh;min-height:86dvh;background:#0C0A08;overflow:hidden;align-items:flex-end}
.static-hero .poster{position:absolute;inset:0}
.static-hero__in{position:relative;z-index:2;padding:0 0 clamp(2.5rem,2rem + 4vw,4.5rem);color:#F6F2EA;text-shadow:var(--tshadow)}
.static-hero h1{font-size:clamp(2.1rem,1.5rem + 3.2vw,2.9rem);line-height:1.04;max-width:17ch}
.static-hero p{font-size:var(--s1);color:#DCD5C8;margin-top:16px;max-width:38ch;line-height:1.45}
.static-hero .band__cta{justify-content:flex-start;margin-top:24px}
.static-hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(6,5,4,.86) 0%,rgba(6,5,4,.45) 42%,rgba(6,5,4,.08) 74%);
}

/* ---------- 9. Secciones ---------- */
.section{scroll-margin-top:86px;position:relative;z-index:2;padding-top:clamp(5.5rem,3.5rem + 7vw,10rem);padding-bottom:clamp(6rem,4rem + 8vw,11rem);background:var(--canvas)}
.section--panel{background:var(--panel)}

/* el corte: un plano del vídeo a sangre, que devuelve la página al pasillo */
.cut{position:relative;z-index:2;height:clamp(360px,60vh,680px);overflow:hidden;background:#0C0A08}
.cut img{width:100%;height:100%;object-fit:cover;opacity:1;transform:scale(1.08);transition:transform 1.6s var(--ease),opacity 1.2s var(--ease-soft)}
.cut.in img{transform:scale(1)}

/* Sombra local en la esquina donde va la frase. Oscurecer la foto entera para
   que se leyera una línea la dejaba apagada; esto sostiene el texto y deja la
   imagen limpia. Mismo recurso que los scrims del hero. */
.cut::before{
  content:"";position:absolute;left:0;bottom:0;z-index:1;pointer-events:none;
  width:min(70rem,92%);height:64%;
  background:radial-gradient(125% 108% at 0% 100%,
    rgba(10,8,5,.86) 0%,rgba(10,8,5,.62) 34%,rgba(10,8,5,.24) 62%,rgba(10,8,5,0) 84%);
}
/* Solo funde los bordes con el lienzo, sin comerse el centro. */
.cut::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,var(--canvas) 0%,rgba(20,16,12,.34) 6%,rgba(20,16,12,0) 26%,rgba(20,16,12,0) 74%,rgba(20,16,12,.30) 94%,rgba(20,16,12,.72) 100%);
}
.cut__line{
  position:absolute;left:clamp(20px,5vw,72px);right:auto;bottom:clamp(24px,5vh,52px);z-index:2;
  display:flex;align-items:center;gap:clamp(12px,1.6vw,20px);max-width:min(46rem,84%);
  font-family:var(--mono);font-size:clamp(.74rem,.62rem + .34vw,.98rem);
  letter-spacing:.24em;text-transform:uppercase;color:#EFE7D8;
  text-shadow:0 1px 14px rgba(8,6,4,.72);
}
.cut__line::before{
  content:"";flex:0 0 auto;width:clamp(30px,4.4vw,64px);height:1px;
  background:var(--accent);transform-origin:left;
  transform:scaleX(var(--kl,0));transition:transform 1s var(--ease) .25s;
}
.cut.in .cut__line::before{--kl:1}

/* servicios: lista editorial, no tarjetas */
.svc-list{margin-top:46px;border-top:1px solid var(--rule)}
.svc-row{
  position:relative;display:grid;grid-template-columns:auto 1fr auto;
  gap:clamp(1rem,2.4vw,3rem);align-items:center;
  padding:clamp(1.4rem,1rem + 1.6vw,2.6rem) 0;border-bottom:1px solid var(--rule);
  transition:padding-left .45s var(--ease);
}
.svc-row:hover{padding-left:16px}
.svc-row::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--accent);transition:width .55s var(--ease)}
.svc-row:hover::after{width:100%}
.svc-row__n{font-family:var(--mono);font-size:clamp(1rem,.72rem + 1.1vw,1.75rem);font-weight:600;
  color:var(--accent);opacity:.45;letter-spacing:.06em;align-self:start;padding-top:.06em;
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.svc-row:hover .svc-row__n{opacity:1;transform:translateY(-2px)}
.svc-row h3{font-size:clamp(1.35rem,1.05rem + 1.35vw,2.1rem);line-height:1.08;letter-spacing:-.022em}
.svc-row p{color:var(--text-secondary);font-size:.98rem;margin-top:11px;max-width:50ch}
.svc-row__thumb{
  width:clamp(88px,12vw,148px);aspect-ratio:4/3;border-radius:8px;overflow:hidden;flex:none;
  opacity:.46;filter:saturate(.6);
  transition:opacity .45s var(--ease),filter .45s var(--ease),transform .55s var(--ease);
}
.svc-row:hover .svc-row__thumb{opacity:1;filter:none;transform:scale(1.05)}
.svc-row__thumb img{width:100%;height:100%;object-fit:cover}

/* el día: una línea de tiempo, no numeritos */
.clock{position:relative;margin-top:56px;display:grid;grid-template-columns:repeat(4,1fr)}
.clock::before{content:"";position:absolute;left:0;right:0;top:6px;height:1px;background:var(--rule)}
.clock__fill{position:absolute;left:0;top:6px;height:1px;background:var(--accent);width:0;transition:width 1.8s var(--ease)}
.clock.in .clock__fill{width:100%}
.beat{position:relative;padding-right:clamp(.8rem,2vw,2rem)}
/* display:block obligatorio: un span en línea ignora el ancho y el alto y el
   punto sale como una barrita. */
.beat__dot{display:block;width:13px;height:13px;border-radius:50%;background:var(--canvas);border:2px solid var(--accent);margin:-6px 0 30px;position:relative}
.beat__t{display:block;font-family:var(--mono);font-size:.71rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.beat h3{font-size:clamp(1.1rem,.9rem + .7vw,1.5rem);line-height:1.1;margin-bottom:9px}
.beat p{color:var(--text-secondary);font-size:.95rem;max-width:30ch}

/* por qué: frases grandes, no cajas */
.claims{margin-top:46px}
.claim{
  padding:clamp(1.5rem,1.1rem + 2vw,3rem) 0;border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,3vw,3.4rem);align-items:start;
}
.claim:last-child{border-bottom:0}
.claim__mark{font-family:var(--display);font-weight:800;font-size:clamp(2rem,1.6rem + 1.6vw,3.2rem);line-height:.62;color:var(--accent);opacity:.5}
.claim q{display:block;font-family:var(--display);font-weight:600;font-size:clamp(1.25rem,1.05rem + 1.05vw,1.9rem);line-height:1.22;letter-spacing:-.018em;quotes:none}
.claim p{color:var(--text-secondary);margin-top:14px;font-size:1rem;max-width:54ch}
.claim--primera{padding-top:0}
.claim--primera q{font-size:clamp(1.6rem,1.25rem + 1.75vw,2.5rem);line-height:1.14;letter-spacing:-.026em}
.claim--primera .claim__mark{font-size:clamp(2.6rem,2rem + 2.2vw,4rem);opacity:.62}
.claim--primera p{font-size:1.06rem;margin-top:20px}

/* calculadora */
.calc{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--gap);align-items:center;margin-top:44px}
.calc__panel{background:var(--panel-2);border:1px solid var(--rule);border-radius:14px;padding:clamp(1.5rem,1.1rem + 1.5vw,2.4rem)}
.calc__read{display:flex;align-items:baseline;gap:10px;font-family:var(--mono);font-variant-numeric:tabular-nums}
.calc__num{font-size:clamp(2.4rem,1.8rem + 2.6vw,3.6rem);font-weight:600;line-height:1;color:var(--accent)}
.calc__unit{font-size:.88rem;color:var(--text-secondary)}
.calc__what{font-family:var(--display);font-weight:800;font-size:var(--s2);margin-top:6px;line-height:1.05}
.calc__slider{width:100%;margin-top:26px;accent-color:var(--accent);height:34px}
.calc__ticks{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--text-secondary);text-transform:uppercase;margin-top:2px}
.calc__note{font-size:.9rem;color:var(--text-secondary);margin-top:18px}
.calc__cta{margin-top:20px}
.van{width:100%;height:auto;color:var(--rule-strong)}
.van__box{fill:var(--accent);opacity:.85;transition:transform .5s var(--ease)}
.van__frame{fill:none;stroke:currentColor;stroke-width:2.5}

/* trabajos: escalonados, no una fila uniforme */
/* ---------- Comparador antes / despues ----------
   La capa de arriba se recorta con clip-path segun --p. Solo se anima el
   recorte, que no provoca reflow. Arrastrable, con teclado y con foco visible. */
.ba{
  --p:50%;
  position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;
  border:1px solid var(--rule);background:#0C0A08;margin-top:34px;
  touch-action:pan-y;user-select:none;
}
.ba img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  -webkit-user-drag:none;pointer-events:none;
}
.ba__clip{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba__handle{
  position:absolute;top:0;bottom:0;left:var(--p);width:52px;
  transform:translateX(-50%);background:transparent;border:0;padding:0;
  cursor:ew-resize;touch-action:none;z-index:3;
}
.ba__handle::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;
  transform:translateX(-50%);background:var(--accent);
  box-shadow:0 0 0 1px rgba(8,7,5,.45);
}
.ba__knob{
  position:absolute;left:50%;top:50%;width:46px;height:46px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:var(--accent);color:#0B0906;
  display:grid;place-items:center;
  box-shadow:0 6px 20px -6px rgba(8,7,5,.8);
  transition:transform .22s var(--ease);
}
.ba__handle:hover .ba__knob{transform:translate(-50%,-50%) scale(1.08)}
.ba__handle:focus-visible{outline:none}
.ba__handle:focus-visible .ba__knob{outline:3px solid var(--accent-hover);outline-offset:3px}
.ba__tag{
  position:absolute;bottom:14px;z-index:2;pointer-events:none;
  font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;padding:6px 12px;border-radius:99px;
  background:rgba(8,7,5,.62);color:#F2ECE0;backdrop-filter:blur(6px);
}
.ba__tag--a{left:14px}
.ba__tag--b{right:14px}
.ba__tag--ej{top:14px;bottom:auto;left:14px;background:rgba(8,7,5,.48);color:rgba(242,236,224,.72)}
.ba__hint{
  margin-top:12px;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-secondary);
}
@media (max-width:560px){
  .ba{aspect-ratio:4/3}
  .ba__knob{width:52px;height:52px}
}

.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,20px);margin-top:44px;align-items:start}
.shot{position:relative;aspect-ratio:3/4;border-radius:12px;overflow:hidden;border:1px solid var(--rule);background:var(--panel)}
.shot:nth-child(even){margin-top:clamp(22px,5vw,62px)}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.shot:hover img{transform:scale(1.05)}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:34px 14px 13px;font-size:.86rem;font-weight:600;color:#F6F2EA;background:linear-gradient(transparent,rgba(8,6,4,.92))}

/* zonas: cinta en movimiento, no pastillas */
.belt{overflow:hidden;padding:18px 0;border-block:1px solid var(--rule);margin-top:38px}
.belt__track{display:flex;width:max-content;animation:beltmove 52s linear infinite}
.belt__g{display:flex;align-items:center;gap:28px;padding-right:28px}
.belt__g span{font-family:var(--display);font-weight:600;font-size:clamp(1.05rem,.9rem + .8vw,1.65rem);white-space:nowrap;color:var(--text-primary);opacity:.72}
.belt__g span.on{color:var(--accent);opacity:1}
.belt__g i{width:6px;height:6px;background:var(--accent);transform:rotate(45deg);flex:none;opacity:.55}
@keyframes beltmove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.belt:hover .belt__track{animation-play-state:paused}

/* preguntas */
/* Las preguntas, abiertas. El acordeon es el patron de plantilla mas
   reconocible que hay, y encima esconde justo lo que convence: seis titulares
   que no dicen nada hasta que los pulsas. En dos columnas caben a la vista. */
.faq{margin-top:48px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(2rem,5vw,5.5rem);row-gap:clamp(2rem,3.4vw,3.4rem)}
.qa{min-width:0;position:relative;padding-top:22px;border-top:1px solid var(--rule)}
/* el filete se tiñe de acento en el que estas leyendo */
.qa::before{content:"";position:absolute;top:-1px;left:0;height:1px;width:0;
  background:var(--accent);transition:width .55s var(--ease)}
.qa:hover::before{width:100%}
.qa__q{
  font-family:var(--display);font-weight:600;font-size:var(--s1);
  line-height:1.22;letter-spacing:-.01em;margin:0 0 12px;
  text-wrap:balance;
}
.qa__a{margin:0;color:var(--text-secondary);max-width:52ch;line-height:1.6}

@media (max-width:760px){
  .faq{grid-template-columns:1fr;row-gap:1.8rem}
}

/* formulario */
.quote{display:grid;grid-template-columns:.82fr 1.18fr;gap:var(--gap);align-items:start;margin-top:12px}
.contacts{display:grid;gap:12px;margin-top:26px}
.contacts a{display:flex;gap:13px;align-items:center;text-decoration:none;padding:15px 17px;border:1px solid var(--rule);border-radius:11px;transition:border-color .22s var(--ease-soft),background .22s var(--ease-soft),transform .22s var(--ease)}
.contacts a:hover{border-color:var(--accent);background:var(--accent-muted);transform:translateX(4px)}
.contacts svg{color:var(--accent);flex:none}
.contacts b{display:block;font-size:1.02rem;font-family:var(--mono);font-weight:600;overflow-wrap:anywhere}
.contacts small{color:var(--text-secondary);font-size:.84rem;font-family:var(--body)}

.form{background:var(--panel-2);border:1px solid var(--rule);border-radius:14px;padding:clamp(1.5rem,1.1rem + 1.6vw,2.5rem)}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.field{display:flex;flex-direction:column;gap:6px}
.field--full{grid-column:1 / -1}
.field label{font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary)}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:1rem;color:var(--text-primary);background:var(--canvas);
  border:1px solid var(--rule-strong);border-radius:7px;padding:12px 13px;width:100%;
  transition:border-color .2s var(--ease-soft),box-shadow .2s var(--ease-soft);
}
.field textarea{min-height:104px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-muted)}
.field ::placeholder{color:#7C7264}
.form__err{color:#F2857A;font-size:.87rem;font-weight:600;min-height:1.2em;margin-top:12px}
/* Al mandar se abre otra app y la pagina se queda igual: sin este aviso
   parece que el boton no ha hecho nada. */
.form__ok{
  display:none;align-items:flex-start;gap:10px;margin-top:14px;padding:13px 15px;
  border:1px solid var(--accent);border-radius:9px;background:var(--accent-muted);
  font-size:.9rem;color:var(--text-primary);
}
.form__ok.on{display:flex}
.form__ok svg{color:var(--accent);flex:none;margin-top:2px}
.form__actions{display:grid;gap:9px;margin-top:16px}
.form__note{font-size:.83rem;color:var(--text-secondary);text-align:center;margin-top:12px}

/* pie */
.footer{position:relative;z-index:2;background:#0E0B08;color:var(--text-secondary);padding-top:clamp(3rem,2rem + 3vw,4.5rem)}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--gap);padding-bottom:40px}
.footer h4{font-family:var(--display);font-weight:600;color:var(--text-primary);font-size:1rem;margin-bottom:16px}
.footer ul{display:grid;gap:10px}
.footer a{text-decoration:none;transition:color .2s var(--ease-soft)}
.footer a:hover{color:var(--accent)}
.footer .brand b{color:var(--text-primary)}
.footer__desc{margin-top:16px;max-width:36ch;font-size:.94rem}
.footer__bot{border-top:1px solid var(--rule);padding-block:20px;display:flex;flex-wrap:wrap;gap:9px 24px;justify-content:space-between;font-size:.83rem}
.footer__legal{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.footer__legal a{text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px}
.footer__legal a:hover{border-bottom-color:var(--accent)}

/* barra móvil */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:130;display:none;grid-template-columns:1fr 1fr;background:#0E0B08;border-top:2px solid var(--accent);padding-bottom:env(safe-area-inset-bottom)}
.mbar a{display:flex;align-items:center;justify-content:center;gap:8px;padding:15px 8px;text-decoration:none;font-weight:600;font-size:.94rem;min-height:44px}
.mbar a:first-child{color:var(--text-primary)}
.mbar a:last-child{background:var(--accent-deep);color:#fff}

/* ---------- 10. Entradas al hacer scroll ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.stagger > *{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.stagger.in > *{opacity:1;transform:none}
.stagger.in > *:nth-child(1){transition-delay:0ms}
.stagger.in > *:nth-child(2){transition-delay:80ms}
.stagger.in > *:nth-child(3){transition-delay:160ms}
.stagger.in > *:nth-child(4){transition-delay:240ms}
.stagger.done > *:nth-child(1),
.stagger.done > *:nth-child(2),
.stagger.done > *:nth-child(3),
.stagger.done > *:nth-child(4){transition-delay:0s}

.alive{position:relative}
.alive::after{content:"";position:absolute;left:0;top:0;width:36px;height:2px;background:var(--accent);opacity:0;transition:opacity .6s var(--ease-soft)}
.alive.on::after{animation:breathe 7s var(--ease-soft) -2s infinite;opacity:1}
@keyframes breathe{0%,100%{opacity:.25;transform:scaleX(1)}50%{opacity:.85;transform:scaleX(1.5)}}

/* Los hijos de una rejilla traen min-width:auto y un texto largo e irrompible
   ensancha la columna por encima del contenedor. Esto lo corta de raíz. */
.quote > *,.calc > *,.shots > *,.clock > *,.svc-row > *,.form__grid > *{min-width:0}

/* ---------- 11. Puertas del hero estático ----------
   Antes eran cinco y cuatro apagaban el hero en cualquier móvil, para no
   hacerle descargar los 4,6 MB del vídeo. Ahora el móvil tiene su propia copia
   de 853 KB, así que ve la misma animación. Sólo quedan los dos casos en los
   que el scrub sigue sin tener sentido. */

/* Móvil apaisado y bajo: el escenario es sticky a 100vh y con menos de 560 px
   de alto las frases del hero no caben. */
@media (orientation:landscape) and (pointer:coarse) and (max-height:560px){
  .hero{display:none}
  .static-hero{display:flex}
}
/* Quien ha pedido menos movimiento en su sistema no quiere un vídeo atado al
   scroll; eso es accesibilidad, no una preferencia de estilo. */
@media (prefers-reduced-motion:reduce){
  .hero{display:none}
  .static-hero{display:flex}
}

/* ---------- 12. Responsive ---------- */
@media (max-width:1000px){
  .clock{grid-template-columns:1fr 1fr;gap:0 0}
  .clock::before,.clock__fill{display:none}
  .beat{padding:0 1.2rem 2.2rem 0}
  .beat__dot{margin-bottom:16px}
  .calc{grid-template-columns:1fr}
  .quote{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr 1fr}
  .shots{grid-template-columns:1fr 1fr}
  .band__in{max-width:min(30rem,60vw)}
}
@media (max-width:820px){
  .nav{position:fixed;inset:70px 0 auto;background:var(--canvas);flex-direction:column;gap:0;padding:10px 22px 24px;border-bottom:1px solid var(--rule);transform:translateY(-135%);transition:transform .38s var(--ease);z-index:110}
  .nav.open{transform:translateY(0)}
  .nav a{padding:15px 0;font-size:1.08rem;border-bottom:1px solid var(--rule);color:var(--text-primary)}
  .nav a::after{display:none}
  .burger{display:grid}
  .header .btn--go{display:none}
  .rail{display:none}
  .svc-row{grid-template-columns:auto 1fr;gap:.9rem 1.2rem}
  .svc-row__thumb{display:none}
  .claim{grid-template-columns:1fr;gap:.4rem}
  .claim__mark{font-size:2.4rem}
  .mbar{display:grid}
  body{padding-bottom:62px}
}
@media (max-width:560px){
  .clock{grid-template-columns:1fr}
  .form__grid{grid-template-columns:1fr}
  .shots{grid-template-columns:1fr 1fr}
  .shot:nth-child(even){margin-top:0}
  .footer__top{grid-template-columns:1fr}
  .contacts b{font-size:.84rem}
}

/* ---------- 13. Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0s !important;
  }
  html{scroll-behavior:auto}
  .rv,.stagger > *{opacity:1;transform:none}
  .corner path{stroke-dashoffset:0}
  .cut img{transform:none}
  .clock__fill{width:100%}
  .mote{display:none}
}

body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* ---------- 14. Páginas de texto (legal, 404) ----------
   Mismo mundo que la portada, sin el vídeo. Medida de lectura corta y
   jerarquía por tamaño, no por cajas. */
.doc{max-width:68ch;margin-top:38px}
.doc h3{font-size:clamp(1.2rem,1rem + .9vw,1.7rem);margin-top:42px;margin-bottom:14px;line-height:1.14}
.doc h3:first-child{margin-top:0}
.doc p{color:var(--text-secondary);margin-bottom:14px}
.doc ul{display:grid;gap:9px;margin:14px 0 20px;color:var(--text-secondary)}
.doc li{position:relative;padding-left:20px}
.doc li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--accent);transform:rotate(45deg);opacity:.7}
.doc a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s var(--ease-soft)}
.doc a:hover{border-bottom-color:var(--accent)}
.doc b{color:var(--text-primary);font-weight:600}
/* Los datos que solo puede rellenar el cliente van marcados, no inventados. */
.doc mark{background:var(--accent-muted);color:var(--text-primary);font-family:var(--mono);font-size:.86em;padding:2px 7px;border-radius:4px}
.back{display:inline-flex;align-items:center;gap:9px;margin-top:44px;font-weight:600;text-decoration:none;color:var(--text-primary);transition:gap .25s var(--ease)}
.back:hover{gap:15px}
.back svg{color:var(--accent)}

/* 404 */
.lost{min-height:70vh;min-height:70dvh;display:grid;align-content:center}
.lost__code{font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.lost h1{font-size:clamp(2.4rem,1.6rem + 4.4vw,4.6rem);line-height:.98;max-width:16ch}
.lost__cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:32px}


/* ---------- La foto de la calculadora ----------
   Antes habia una furgoneta dibujada a linea, sola en un hueco enorme. Al lado
   de fotografias reales cantaba como imagen prestada. */
/* El contenedor lleva la proporcion, no la imagen: una altura en porcentaje
   solo resuelve si el padre tiene altura definida, y sin esto la marea se
   quedaba clavada. */
.calc__photo{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;border:1px solid var(--rule);margin:0}
.calc__photo img{width:100%;height:100%;object-fit:cover;display:block}
.calc__fill{
  position:absolute;left:0;right:0;bottom:0;height:var(--f,40%);
  background:linear-gradient(180deg,rgba(95,179,206,.06) 0%,rgba(95,179,206,.46) 100%);
  border-top:2px solid rgba(142,211,232,.9);
  transition:height .55s var(--ease);pointer-events:none;
}
.calc__photo figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:30px 16px 13px;
  font-family:var(--mono);font-size:.6rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:#F2ECE0;
  background:linear-gradient(transparent,rgba(8,7,5,.82));
}

/* ---------- Carrusel 3D con el fondo tomado de la foto ----------
   La tarjeta del frente se muestra completa y las laterales giran hacia dentro.
   El resplandor de detras saca sus dos colores de la propia imagen activa,
   leidos con un canvas de 20x26px, asi que el fondo cambia con cada foto. */
.gcar{position:relative;margin-top:40px;--g1:rgba(138,122,99,.55);--g2:rgba(61,52,40,.40);
  width:min(1560px,calc(100vw - 2.6rem));
  margin-left:calc((100% - min(1560px,100vw - 2.6rem)) / 2)}
.gcar__glow{
  position:absolute;left:50%;top:48%;width:min(1000px,104%);height:min(520px,104%);
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 50% 42%,var(--g1) 0%,var(--g2) 46%,transparent 74%);
  filter:blur(58px);
  transition:background 1s var(--ease-soft);
}
.gcar__stage{
  position:relative;z-index:1;height:clamp(390px,60vh,660px);
  perspective:1400px;perspective-origin:50% 50%;
  touch-action:pan-y;
}
.gcar__card{
  position:absolute;top:50%;left:50%;margin:0;
  width:clamp(260px,27vw,430px);aspect-ratio:3/4;
  border-radius:14px;overflow:hidden;background:#1a150f;
  box-shadow:0 30px 70px -30px rgba(10,8,5,.7);
  transform:translate(-50%,-50%) translateX(var(--x,0)) translateZ(var(--z,0)) rotateY(var(--r,0deg)) scale(var(--s,1));
  opacity:var(--o,1);
  transform-style:preserve-3d;will-change:transform,opacity;
  transition:transform .75s var(--ease),opacity .75s var(--ease),box-shadow .5s var(--ease);
  cursor:pointer;
}
.gcar__card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.gcar__card figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:36px 16px 15px;
  font-size:.92rem;font-weight:600;color:#F2ECE0;text-align:left;
  background:linear-gradient(transparent,rgba(8,7,5,.9));
  opacity:0;transition:opacity .5s var(--ease-soft);
}
.gcar__card.is-front{cursor:default;box-shadow:0 46px 92px -34px rgba(10,8,5,.85)}
.gcar__card.is-front figcaption{opacity:1}
.gcar__card:focus-visible{outline:3px solid var(--accent-deep);outline-offset:4px}

.gcar__ctrl{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:18px;margin-top:26px}
.gcar__nav{
  width:46px;height:46px;flex:none;border-radius:50%;
  border:1px solid rgba(23,19,13,.24);background:rgba(255,255,255,.46);
  display:grid;place-items:center;color:var(--ink-light);
  transition:background .22s var(--ease-soft),border-color .22s var(--ease-soft),transform .22s var(--ease);
}
.gcar__nav:hover{background:#fff;border-color:rgba(23,19,13,.45);transform:translateY(-2px)}
.gcar__dots{display:flex;align-items:center;gap:9px}
.gcar__dot{
  width:9px;height:9px;padding:0;border:0;border-radius:99px;cursor:pointer;
  background:rgba(23,19,13,.22);transition:background .3s var(--ease-soft),width .3s var(--ease);
}
.gcar__dot[aria-current="true"]{background:var(--accent-deep);width:24px}
.gcar__count{
  font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.14em;
  color:var(--ink-light-soft);font-variant-numeric:tabular-nums;min-width:5.5em;text-align:right;
}
@media (max-width:560px){
  .gcar__card{width:min(72vw,270px)}
  .gcar__count{display:none}
}
@media (prefers-reduced-motion:reduce){
  .gcar__card{transition:none}
  .gcar__glow{transition:none}
}

/* El carrusel vive en su propio panel oscuro dentro de la seccion clara.
   El resplandor sacado de la foto solo se lee sobre fondo oscuro: sobre el
   hueso se volvia barro invisible. Y de paso mete una capa mas de ritmo. */
.gcar{
  padding:clamp(1.6rem,1.1rem + 2vw,3rem) 0 clamp(1.4rem,1rem + 1.4vw,2.2rem);
  border-radius:18px;overflow:hidden;background:#161108;
  box-shadow:0 30px 70px -40px rgba(10,8,5,.6);
}
.gcar__glow{filter:blur(70px)}
.gcar__nav{
  border-color:rgba(242,236,224,.26);background:rgba(242,236,224,.07);color:#F2ECE0;
}
.gcar__nav:hover{background:rgba(242,236,224,.17);border-color:rgba(242,236,224,.5)}
.gcar__dot{background:rgba(242,236,224,.26)}
.gcar__dot[aria-current="true"]{background:var(--accent)}
.gcar__count{color:rgba(242,236,224,.52)}
.gcar__card:focus-visible{outline-color:var(--accent)}

/* ---------- Destello al pasar el raton ----------
   Portado de GlareHover (react-bits, MIT). El original es CSS puro: una capa
   con un degradado diagonal cuya posicion de fondo viaja de esquina a esquina.
   Aqui no hace falta ni una linea de JavaScript.
   Solo en punteros de raton: en tactil el :hover se queda pegado. */
@media (hover:hover) and (pointer:fine){
  .gcar__card::before,
  .svc-row::before{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
    border-radius:inherit;
    background:linear-gradient(-45deg,
      rgba(255,246,228,0) 60%,
      var(--glare,rgba(255,246,228,.34)) 70%,
      rgba(255,246,228,0) 78%,
      rgba(255,246,228,0) 100%);
    background-size:250% 250%;
    background-repeat:no-repeat;
    background-position:-100% -100%;
    transition:background-position 750ms ease;
  }
  .gcar__card:hover::before,
  .svc-row:hover::before{background-position:100% 100%}

  /* sobre foto se permite mas luz; sobre texto tiene que ser un susurro */
  .gcar__card{--glare:rgba(255,246,228,.42)}
  .svc-row{--glare:rgba(255,246,228,.10)}
}
@media (prefers-reduced-motion:reduce){
  .gcar__card::before,.svc-row::before{transition:none}
}

/* ---------- Zonas, ahora una tira y no una seccion ----------
   Ocupaba una pantalla entera para decir una lista de municipios. Contencion:
   la informacion se queda, el espacio se devuelve. */
.tira-zonas{
  position:relative;z-index:2;background:var(--panel);
  padding-block:clamp(2.2rem,1.6rem + 2vw,3.4rem);
  scroll-margin-top:86px;
}
.tira-zonas__t{
  font-family:var(--mono);font-size:var(--s-1);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  margin-bottom:16px;
}
.tira-zonas .belt{margin-top:0}

/* ===================== RESEÑAS =====================
   Dos columnas: a la izquierda el título se queda pegado mientras suben las
   reseñas. Evita la rejilla de tarjetas iguales, que es lo que hace que una
   sección de reseñas parezca una plantilla. */
.resenas{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(2rem,5vw,6rem);align-items:start}
.resenas__intro{position:sticky;top:110px}
.resenas__cta{margin-top:clamp(1.6rem,3vw,2.6rem)}
.resenas__cta p{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-secondary);margin:0 0 14px;
}

.resenas__lista{display:flex;flex-direction:column;gap:clamp(1rem,2vw,1.6rem)}
.resena{
  position:relative;padding:clamp(1.6rem,1.2rem + 1.6vw,2.6rem) clamp(1.4rem,1.1rem + 1.4vw,2.4rem);
  border:1px solid var(--rule);border-radius:14px;background:#1B140D;
  transition:border-color .5s var(--ease),transform .5s var(--ease);
}
/* el escalón rompe la columna: sin esto son tres cajas idénticas */
.resena:nth-child(2){margin-left:clamp(0px,3vw,44px)}
.resena:nth-child(3){margin-left:clamp(0px,6vw,88px)}
.resena:hover{border-color:var(--rule-strong);transform:translateY(-3px)}

.resena__mark{
  position:absolute;top:clamp(.5rem,1vw,.9rem);right:clamp(1rem,1.6vw,1.8rem);
  font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,1.8rem + 2vw,4rem);
  line-height:.62;color:var(--accent);opacity:.22;pointer-events:none;
}
.resena__estrellas{display:flex;gap:5px;margin-bottom:14px}
.resena__estrellas i{
  width:13px;height:13px;flex:0 0 auto;background:var(--rule-strong);
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.resena__estrellas i.on{background:var(--accent)}

.resena__q{
  margin:0;font-size:clamp(1.02rem,.96rem + .3vw,1.22rem);line-height:1.5;
  color:var(--text-primary);max-width:44ch;
}
.resena__pie{margin-top:clamp(1rem,2vw,1.5rem);display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.resena__quien{font-weight:600;color:var(--text-primary)}
.resena__meta{font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-secondary)}

/* Estado de espera. Se ve que es un hueco, no una reseña. */
.resena--vacia{border-style:dashed;background:transparent}
.resena--vacia .resena__q,
.resena--vacia .resena__quien,
.resena--vacia .resena__meta{color:var(--text-secondary);opacity:.6}
.resena--vacia .resena__mark{opacity:.1}
.resenas__aviso{
  margin:clamp(.6rem,1.4vw,1.2rem) 0 0;max-width:46ch;
  font-family:var(--mono);font-size:.72rem;line-height:1.7;letter-spacing:.04em;color:var(--text-secondary);
}

@media (max-width:860px){
  .resenas{grid-template-columns:1fr;gap:clamp(1.6rem,5vw,2.4rem)}
  .resenas__intro{position:static}
  .resena:nth-child(2),.resena:nth-child(3){margin-left:0}
}

/* ===================== PALABRA ROTATORIA =====================
   Portado a mano de RotatingText (react-bits). El original usa motion/react;
   aquí son transiciones CSS con el retardo puesto por letra desde el JS.
   Cero librerías. */
.rota{
  position:relative;display:inline-block;vertical-align:bottom;
  color:var(--accent);white-space:nowrap;overflow:hidden;
  /* sitio para las colas de la g y la q, sin que el recorte se las coma */
  padding-bottom:.14em;margin-bottom:-.14em;
}
.rota__live{display:inline-block}
.rota__c{
  display:inline-block;white-space:pre;
  transform:translateY(var(--y,0));opacity:var(--o,1);
  transition:transform .42s var(--ease),opacity .34s linear;
  transition-delay:var(--d,0ms);
}
/* Con movimiento reducido cambia la palabra con un fundido y sin desplazamiento:
   la información se conserva, el movimiento no. */
@media (prefers-reduced-motion:reduce){
  .rota__c{transform:none;transition:opacity .3s linear;transition-delay:0ms}
}

/* ===================== EL DÍA, APILADO =====================
   Portado a mano del apilado con sticky del prompt del portafolio 3D. Allí eran
   tarjetas de proyecto; aquí son los cuatro momentos de un vaciado, que es
   contenido secuencial de verdad: la técnica cuenta la historia en vez de
   decorarla. Solo en escritorio — en móvil las cuatro ya se apilan solas y
   añadir scroll donde más cuesta sería un mal cambio. */
@media (min-width:861px) and (prefers-reduced-motion:no-preference){
  .clock{display:block;margin-top:60px}
  .clock::before,.clock__fill{display:none}
  .clock .beat__dot{display:none}

  .beat{
    position:sticky;top:calc(112px + var(--i,0) * 16px);
    padding:clamp(2rem,1.4rem + 2.2vw,3.2rem) clamp(2rem,1.4rem + 2.4vw,3.6rem);
    background:var(--panel-2);border:1px solid var(--rule);border-radius:20px;
    box-shadow:0 24px 60px -30px rgba(0,0,0,.9);
    transform:scale(var(--s,1));transform-origin:50% 0;
    will-change:transform;overflow:hidden;
  }
  /* Al taparse se oscurece con un velo. Bajarle la opacidad la volveria
     transparente y se verian las tarjetas de debajo a traves del texto. */
  .beat::after{
    content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
    background:var(--canvas);opacity:var(--velo,0);transition:opacity .15s linear;
  }
  /* el hueco entre tarjetas ES el presupuesto de scroll del apilado */
  .beat:not(:last-child){margin-bottom:26vh}

  .beat__t{font-size:.78rem;margin-bottom:16px}
  .beat h3{font-size:clamp(1.6rem,1rem + 1.9vw,2.9rem);line-height:1.04;letter-spacing:-.02em;margin-bottom:14px}
  .beat p{font-size:1.05rem;max-width:46ch}
  /* el número del momento, al margen, como en la lista de servicios */
  .beat::before{
    content:"0" counter(momento);counter-increment:momento;
    position:absolute;top:clamp(2rem,1.4rem + 2.2vw,3.2rem);right:clamp(2rem,1.4rem + 2.4vw,3.6rem);
    font-family:var(--mono);font-size:clamp(1rem,.72rem + 1.1vw,1.75rem);
    font-weight:600;color:var(--accent);opacity:.32;
  }
  .clock{counter-reset:momento}
}


/* ---------- Utilidades ----------
   Sustituyen a los atributos style= que antes iban en el HTML. Se sacaron de
   ahi para que la Content-Security-Policy pueda usar style-src 'self' sin
   'unsafe-inline'. El JS sigue tocando estilos por CSSOM (element.style),
   que la CSP no bloquea. */
.u-push-right{margin-left:auto}
.u-no-border-top{border-top:0}