/* ==========================================================================
   Descarada · Studio creativo · descaradastudio.com
   Estilos del sitio. Paleta, letras y medidas: spec/direccion-visual.md.
   Nada en pantalla mide menos de 13 px.
   ========================================================================== */

/* ---------- Letras (servidas desde el sitio, sin terceros) ---------- */
@font-face{font-family:"IBM Plex Sans Condensed";font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fuentes/ibm-plex-sans-condensed-700.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans Condensed";font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fuentes/ibm-plex-sans-condensed-600.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans Condensed";font-style:italic;font-weight:400;font-display:swap;src:url("../assets/fuentes/ibm-plex-sans-condensed-400-italica.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fuentes/ibm-plex-sans-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fuentes/ibm-plex-sans-600.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fuentes/ibm-plex-mono-500.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fuentes/ibm-plex-mono-600.woff2") format("woff2")}
@font-face{font-family:"Archivo Black";font-style:normal;font-weight:400;font-display:block;src:url("../assets/fuentes/archivo-black.woff2") format("woff2")}
@font-face{font-family:"Mrs Saint Delafield";font-style:normal;font-weight:400;font-display:block;src:url("../assets/fuentes/firma-bela.woff2") format("woff2")}
/* Respaldo con el ancho de la condensada (Arial Bold al 86 %), para que el titular no salte al llegar la letra */
@font-face{font-family:"Descarada Respaldo";font-weight:700;src:local("Arial Bold"),local("Arial-BoldMT");size-adjust:86%;ascent-override:104%;descent-override:28%}

:root{
  --negro:#16110F; --crema:#F3EDE5; --crema2:#E9E1D5; --rojo:#C8102E; --rojo-vivo:#EF3E56;
  --vino:#5C1420; --gris:#8C8885; --linea:#D9CFC0; --tinta:#453E3A; --tinta2:#5A524D;
  --linea-osc:#3A312D; --texto-osc:#B9AFA4; --texto-osc2:#CBC2B8;
  --disp:"IBM Plex Sans Condensed","Descarada Respaldo","Arial Narrow",system-ui,sans-serif;
  --txt:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --logo:"Archivo Black","Arial Black",sans-serif;
  --firma:"Mrs Saint Delafield","Snell Roundhand",cursive;
  --suave:cubic-bezier(0.16,1,0.3,1); --back:cubic-bezier(0.34,1.56,0.64,1);
  --ancho:1200px; --margen:clamp(20px,5vw,64px); --sec:clamp(88px,11vw,160px);
  --menu:64px;
  /* margen lateral de lo que sangra hasta el borde pero arranca alineado con la rejilla */
  --lateral:max(var(--margen),calc((100% - var(--ancho)) / 2));
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--negro);color-scheme:dark;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--negro);color:var(--crema);font:400 17px/1.62 var(--txt);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video,picture{display:block}
img,video{max-width:100%;height:auto}
a{color:inherit}
b,strong{font-weight:600}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
::selection{background:var(--rojo);color:var(--crema)}
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2px solid var(--foco,var(--rojo-vivo));outline-offset:3px}
main:focus-visible{outline:none}

.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.trazos{position:absolute;width:0;height:0;overflow:hidden}
.ln{display:block}
.nw{white-space:nowrap}
.wrap{width:min(var(--ancho),calc(100% - 2 * var(--margen)));margin-inline:auto}
.sangra{padding-inline:var(--lateral)}

.saltar{position:fixed;left:16px;top:12px;z-index:100;padding:14px 18px;background:var(--crema);color:var(--negro);
  font:600 13px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;translate:0 -200%;transition:translate .25s var(--suave)}
.saltar:focus-visible{translate:none;outline:2px solid var(--rojo);outline-offset:3px}

/* ---------- Tonos de sección ---------- */
.tono-osc{--acento:var(--rojo-vivo);--foco:var(--rojo-vivo);--texto2:var(--texto-osc);--raya:var(--linea-osc);color:var(--crema)}
.tono-claro{--acento:var(--rojo);--foco:var(--rojo);--texto2:var(--tinta);--raya:var(--linea);color:var(--negro);background:var(--crema)}
.tono-rojo{--acento:var(--crema);--foco:var(--crema);--texto2:#FFE4E8;--raya:rgba(243,237,229,.4);color:var(--crema);background:var(--rojo)}

.sec{position:relative;z-index:1;padding-block:var(--sec);overflow-x:clip}

/* ---------- Piezas comunes ---------- */
.etiqueta{display:flex;align-items:center;gap:10px;font:600 13px/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--acento)}
.etiqueta::before{content:"";flex:none;width:24px;height:1px;background:currentColor}
.js .etiqueta.rv::before{scale:0 1;transform-origin:0 50%;transition:scale .7s var(--suave) .2s}
.js .etiqueta.rv.en::before{scale:1 1}

.h2{margin-top:18px;font:700 clamp(36px,5.6vw,72px)/.96 var(--disp);letter-spacing:-.025em;text-wrap:balance}
.bajada{margin-top:24px;max-width:58ch;font-size:clamp(17px,1.4vw,19px);color:var(--texto2);text-wrap:pretty}
.entrada{font:600 clamp(22px,2.4vw,34px)/1.08 var(--disp);letter-spacing:-.015em;text-wrap:balance}

.fl{flex:none;width:12px;height:12px;transition:translate .3s var(--suave)}
.fl--izq{rotate:180deg}
/* la flecha acompaña: ↓ baja, ↗ sale */
a:hover > .fl,button:hover > .fl{translate:2px -2px}
.btn[href^="#"]:hover > .fl,.enlace[href^="#"]:hover > .fl{translate:0 3px}
.redondo:hover:not([aria-disabled="true"]) > .fl{translate:3px 0}
.redondo:hover:not([aria-disabled="true"]) > .fl--izq{translate:-3px 0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border:1px solid transparent;
  font:600 13px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color .28s var(--suave),color .28s var(--suave),border-color .28s var(--suave)}
.btn--compacto{min-height:44px;padding:0 18px}
.btn--rojo{background:var(--rojo);color:var(--crema)}
.tono-osc .btn--rojo:hover,.menu .btn--rojo:hover{background:var(--crema);color:var(--negro)}
.tono-claro .btn--rojo:hover{background:var(--negro);color:var(--crema)}
.btn--linea{border-color:currentColor;background:transparent;color:inherit}
.btn--linea:hover{background:var(--crema);border-color:var(--crema);color:var(--negro)}
.tono-rojo .btn--linea:hover{color:var(--rojo)}
.btn--negro{background:var(--negro);color:var(--crema)}
.btn--negro:hover{background:var(--crema);color:var(--negro)}
.btn--crema{background:var(--crema);color:var(--negro)}
.btn--crema:hover{background:var(--rojo);color:var(--crema)}

/* enlace de texto: en línea (si baja de renglón, la flecha se queda pegada a la última palabra) */
.enlace{padding-block:14px;font:600 13px/2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:inherit;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px;transition:color .2s,text-decoration-color .2s}
.enlace .fl{display:inline-block;margin-left:8px;vertical-align:-1px}
.enlace:hover{color:var(--acento)}
.enlace:hover .fl{translate:2px -2px}
.enlace[href^="#"]:hover .fl{translate:0 3px}

.redondo{display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--raya);background:transparent;color:inherit;cursor:pointer;
  transition:background-color .25s var(--suave),color .25s var(--suave),border-color .25s var(--suave),opacity .25s}
.redondo .fl{width:14px;height:14px}
.redondo:hover:not([aria-disabled="true"]){background:var(--crema);border-color:var(--crema);color:var(--negro)}
/* sin más piezas hacia ese lado: se apaga con aria-disabled (no con disabled), para que el foco del teclado no se pierda */
.redondo[aria-disabled="true"]{opacity:.35;cursor:default}
.redondo[aria-disabled="true"] > .fl{translate:none}

.mini{min-height:44px;padding:0 14px;border:1px solid var(--raya);background:transparent;color:var(--texto2);cursor:pointer;
  font:600 13px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;transition:background-color .25s var(--suave),color .25s var(--suave),border-color .25s}
.mini:hover{background:var(--negro);border-color:var(--negro);color:var(--crema)}

/* Entradas: suben 24 px y aparecen, una sola vez. Sin JavaScript todo está a la vista. */
.js .rv{--espera:calc(var(--d,0) * 70ms);opacity:0;translate:0 24px;transition:opacity .7s var(--suave) var(--espera),translate .7s var(--suave) var(--espera)}
.js .rv.en{opacity:1;translate:none}

/* ---------- Logotipo (trazos oficiales; 1em = alto de la palabra) ---------- */
.logo{position:relative;display:inline-block;flex:none;padding-right:.8213em;line-height:0;color:inherit;text-decoration:none}
.logo__palabra{width:9.127em;height:1em;fill:currentColor}
.logo__spark{position:absolute;left:9.2344em;top:-.5016em;width:.7798em;height:.7798em;fill:var(--rojo);transition:rotate .62s var(--back)}

/* ---------- Menú ---------- */
.menu{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--menu);color:var(--crema);border-bottom:1px solid transparent;
  transition:translate .5s var(--suave),background-color .35s,border-color .35s}
.menu__dentro{display:flex;align-items:center;gap:clamp(18px,2.6vw,36px);height:100%;width:min(var(--ancho),calc(100% - 2 * var(--margen)));margin-inline:auto}
.menu--solido{background:rgba(22,17,15,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom-color:var(--linea-osc)}
.menu--oculto{translate:0 -101%}
.menu:focus-within{translate:none}
.logo--menu{font-size:19px;margin-top:6px}
.logo--menu::after{content:"";position:absolute;inset:-16px -6px}      /* zona de toque de 44 px sin mover el logotipo */
.menu__nav{display:flex;gap:clamp(18px,2.4vw,34px);margin-left:auto}
.menu__nav a{position:relative;min-width:44px;padding:16px 0;text-align:center;font:600 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--crema);text-decoration:none}
.menu__nav a::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:1px;background:var(--rojo-vivo);scale:0 1;transform-origin:0 50%;transition:scale .35s var(--suave)}
.menu__nav a:hover::after,.menu__nav a[aria-current]::after{scale:1 1}

/* ---------- Inicio ---------- */
.escenario{position:fixed;left:0;top:0;z-index:0;width:100%;height:100vh;height:100lvh;pointer-events:none;background:var(--negro)}
.escenario::before{content:"";position:absolute;inset:0;background:var(--nebula,none) center/cover no-repeat;opacity:0;transition:opacity 1.4s ease}
.nebula-lista .escenario::before{opacity:1}
.nebula-lista.pasado .escenario::before{opacity:.5}

.hero{position:relative;display:flex;min-height:max(620px,100vh);min-height:max(620px,100svh);overflow:hidden;overflow:clip}
.hero__wrap{position:relative;z-index:1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;
  width:min(var(--ancho),calc(100% - 2 * var(--margen)));margin-inline:auto;padding-block:calc(var(--menu) + 32px) 12vh}
.hero__texto{grid-column:1 / span 6;position:relative}
.hero__texto::before{content:"";position:absolute;inset:-16% -24% -22% -36%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(22,17,15,.78),rgba(22,17,15,0))}
.hero__etiqueta{display:flex;align-items:center;gap:10px;margin-bottom:18px;font:600 13px/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--rojo-vivo)}
.hero__etiqueta::before{content:"";flex:none;width:24px;height:1px;background:currentColor}
.hero__grito{display:block;font:700 clamp(56px,9vw,136px)/.9 var(--disp);letter-spacing:-.025em;color:var(--crema)}
.hero__sub{margin-top:24px;font:600 clamp(22px,2.4vw,32px)/1.08 var(--disp);letter-spacing:-.015em}
.hero__bajada{margin-top:14px;max-width:34em;color:var(--texto-osc2)}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero__sub,.hero__bajada,.hero__ctas{animation:sube .9s var(--suave) both}
.hero__sub{animation-delay:.08s}.hero__bajada{animation-delay:.16s}.hero__ctas{animation-delay:.24s}
@keyframes sube{from{opacity:0;translate:0 16px}to{opacity:1;translate:none}}

.hero__escena{--ancla:min(58vh,44vw);grid-column:7 / span 6;align-self:center;justify-self:center;position:relative}
.hero__objeto{position:relative;display:block;width:var(--ancla);aspect-ratio:1;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hero__objeto:focus-visible{outline:2px solid var(--rojo-vivo);outline-offset:-2px}
/* El póster es el spark oficial dibujado en línea (caja de 124, la del logotipo): llena el ancla, igual que el spark 3D */
.hero__poster{position:absolute;inset:0;width:100%;height:100%;fill:var(--rojo);transition:opacity .3s ease,rotate .62s var(--back)}
.js .hero__poster{opacity:0}
.hero-poster .hero__poster,.hero-2d .hero__poster{opacity:1}
.hero-listo .hero__poster{opacity:0;transition-duration:.2s}

.hero__rotulo{position:absolute;left:50%;top:100%;translate:-50% 0;width:max-content;max-width:min(88vw,560px);margin-top:10px;text-align:center}
.hero__pista{font:600 13px/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gris);transition:opacity .3s ease}
/* la pista espera al objeto: no dice «tóquelo» sobre un hueco vacío mientras llega el fondo */
.js body:not([data-hero]):not(.hero-poster) .hero__pista{opacity:0}
.solo-tactil{display:none}
@media (pointer:coarse){.solo-fino{display:none}.solo-tactil{display:inline}}
.hero__aviso{margin-top:6px;font:500 13px/1.5 var(--mono);letter-spacing:.06em;color:var(--gris)}
.hero__frase{display:none;margin-bottom:12px;font:700 clamp(24px,2.7vw,40px)/1.04 var(--disp);letter-spacing:-.02em;color:var(--crema);
  transition:opacity .22s ease,translate .5s var(--suave),filter .22s ease}
.hero__frase--sale{opacity:0;translate:0 10px;filter:blur(4px)}
html:not(.js) .hero__frase,.hero-2d .hero__frase{display:block}
.hero-2d .hero__escena,html:not(.js) .hero__escena{--ancla:min(46vh,38vw)}
.hero-2d .hero__pausa{top:calc(var(--menu) + 10px);bottom:auto}

.hero__pausa{position:absolute;right:var(--lateral);bottom:28px;z-index:2;height:48px;padding:0 16px;border:1px solid var(--linea-osc);background:rgba(22,17,15,.4);color:var(--crema);cursor:pointer;
  font:600 13px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;transition:background-color .25s var(--suave),color .25s var(--suave),border-color .25s}
.hero__pausa:hover{background:var(--crema);border-color:var(--crema);color:var(--negro)}
.hero__desliza{position:absolute;left:50%;bottom:36px;z-index:1;translate:-50% 0;white-space:nowrap;font:500 13px/1.5 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--texto-osc2);
  animation:parp 1.8s ease-in-out infinite;transition:opacity .6s ease}
.ya-deslizo .hero__desliza{opacity:0;animation:none}
@keyframes parp{0%,100%{opacity:.7}50%{opacity:1}}

/* Orbe de puntos (?fondo=orbe): el mismo contenedor, centrado sobre el ancla, y la frase encima */
.hero[data-fondo="orbe"] .escenario{position:absolute;left:calc(var(--orbe-x,75%) - var(--orbe-lado,80vh) / 2);top:calc(var(--orbe-y,50%) - var(--orbe-lado,80vh) / 2);
  width:var(--orbe-lado,80vh);height:var(--orbe-lado,80vh);pointer-events:auto;background:none}
.hero[data-fondo="orbe"] .escenario::before{content:none}
.hero[data-fondo="orbe"] .hero__wrap{pointer-events:none}
.hero[data-fondo="orbe"] .hero__texto{pointer-events:auto}
.hero[data-fondo="orbe"] .hero__texto::before{content:none}
.hero[data-fondo="orbe"] .hero__poster{display:none}
.hero[data-fondo="orbe"] .hero__frase{display:block;position:absolute;left:50%;bottom:calc(100% + 10px + var(--ancla) / 2);translate:-50% 50%;width:max-content;max-width:min(84vw,calc(var(--ancla) * 1.1));margin:0;
  font-size:clamp(28px,3.3vw,48px);text-shadow:0 0 3px var(--negro),0 0 2px var(--negro);pointer-events:none}
/* el halo oscuro va en una capa aparte: como sombra del texto inflaba su área y cada frase nueva contaba como «la pintura más grande» */
.hero[data-fondo="orbe"] .hero__frase::before{content:"";position:absolute;inset:-.42em -.7em;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(22,17,15,.86),rgba(22,17,15,.6) 58%,rgba(22,17,15,0))}
.hero[data-fondo="orbe"] .hero__frase--sale{translate:-50% calc(50% + 10px)}

/* ---------- Manifiesto ---------- */
/* velo detrás del texto, para que las estrellas no le peleen (no se sale de la sección) */
.manifiesto::before,.como::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 62% 58% at 34% 50%,rgba(22,17,15,.8),rgba(22,17,15,.42) 62%,rgba(22,17,15,0) 100%)}
.manifiesto__titulo{font-size:clamp(40px,6.6vw,96px);max-width:13em}
.js .pal{display:inline-block;opacity:0;translate:0 24px;rotate:3deg;transition:opacity .6s var(--suave) calc(var(--i) * 60ms),translate .6s var(--suave) calc(var(--i) * 60ms),rotate .6s var(--suave) calc(var(--i) * 60ms)}
.js .en .pal{opacity:1;translate:none;rotate:none}
.manifiesto__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:38px;max-width:1000px;margin-top:clamp(32px,4vw,48px)}
.manifiesto__cols p{font-size:clamp(17px,1.4vw,18px);color:var(--texto-osc2)}
.manifiesto__cols b{color:var(--crema)}
.manifiesto__remate{margin-top:clamp(40px,5vw,64px);font:700 clamp(26px,3vw,40px)/1.05 var(--disp);letter-spacing:-.02em;color:var(--rojo-vivo)}
.tachadas{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(36px,4vw,52px);padding-top:22px;border-top:1px solid var(--linea-osc)}
.tachadas li{padding:11px 13px;border:1px solid var(--linea-osc);font:500 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--rojo-vivo);
  background:rgba(22,17,15,.6);transition:translate .4s var(--back),rotate .4s var(--back),opacity .4s,color .4s}
.tachadas s{text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:var(--rojo-vivo)}
/* caídas se apagan sin perder lectura (5,3:1): la palabra pasa a gris cálido y la raya sigue en rojo vivo */
.tachadas li.caida{translate:0 14px;rotate:-4deg;color:var(--texto-osc);opacity:.75}

/* ---------- Descarada × Bela (sobre negro) ---------- */
.bela{background:var(--negro);overflow:hidden;overflow:clip}
.bela__lockup{position:relative;z-index:3;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:clamp(12px,1.7vw,24px);margin-top:26px;font-weight:400;line-height:1}
.logo--bela{font-size:clamp(28.5px,3.774vw,54.1px);color:var(--crema)}
.bela__x{position:relative;top:-.2em;flex:none;width:.56em;height:.56em;font-size:clamp(28.5px,3.774vw,54.1px);color:var(--rojo-vivo);transition:rotate .7s var(--back),opacity .4s}
.bela__x svg{width:100%;height:100%;overflow:visible}
.firma{flex:none;margin:-.14em -.16em calc(-.32em - .05em) calc(6px - .03em);padding:.14em .16em .05em .03em;font:400 clamp(118px,16vw,250px)/1 var(--firma);color:var(--crema);white-space:nowrap}
/* Si el dueño decide que el logotipo de esta sección va sin su spark: añadir la clase «bela--logo-sin-spark» a <section id="bela"> */
.bela--logo-sin-spark .logo--bela{padding-right:0}
.bela--logo-sin-spark .logo--bela .logo__spark{display:none}
/* si la foto es clara arriba, la firma crema se perdería al cruzarla: pasa a rojo vivo (lo decide sitio.js al cargar la foto) */
.bela--foto-clara .firma{color:var(--rojo-vivo)}
.js .bela__x{rotate:-45deg;opacity:0}
.js .bela.en .bela__x{rotate:none;opacity:1;transition-delay:.25s}
.js .firma{clip-path:inset(0 100% 0 0)}
.js .bela.en .firma{clip-path:inset(0 0 0 0);transition:clip-path 1.4s cubic-bezier(.6,.05,.3,1) .3s}

.bela__cuerpo{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(40px,6vw,72px);margin-top:-40px}
.bela__texto{padding-top:clamp(72px,9vw,120px)}
.bela__texto .entrada{max-width:22ch}
.bela__texto > p:not(.entrada):not(.bela__cta){margin-top:18px;max-width:52ch;color:var(--texto-osc2)}
.creditos{margin-top:32px;border-top:1px solid var(--linea-osc)}
.creditos > div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--linea-osc)}
.creditos dt{font:600 13px/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--rojo-vivo)}
.creditos dd{font-size:16px;line-height:1.45;color:var(--crema)}
.cita{margin-top:38px}
.cita blockquote p{max-width:20ch;font:italic 400 clamp(28px,3vw,40px)/1.12 var(--disp);letter-spacing:-.01em;color:var(--crema)}
.cita figcaption{margin-top:6px;color:var(--texto-osc)}
.bela__cta{margin-top:26px}

.bela__foto{position:relative;align-self:start;aspect-ratio:4 / 5;background:var(--vino);overflow:hidden}
/* en dos columnas el retrato acompaña la lectura: se queda quieto mientras pasan los créditos */
@media (min-width:760px){.bela__foto{position:sticky;top:calc(var(--menu) + 28px)}}
.bela__placa{position:absolute;inset:0;display:grid;place-items:center}
.bela__placa svg{width:44%;height:auto;aspect-ratio:1;fill:var(--crema)}
.bela__foto picture{position:absolute;inset:0}
.bela__foto img{width:100%;height:100%;object-fit:cover;font-size:0;color:transparent}   /* si la foto aún no existe y no hay JavaScript, no se pinta el texto alternativo encima de la placa */
.js .bela__foto img{opacity:0}
.js .bela__foto--con-foto img{opacity:1}
/* el «estrobo» del manual: un disparo de flash, una sola vez y solo sobre la foto (cuando ya está pintada); la placa no destella */
.bela.en .bela__foto--con-foto{animation:estrobo .48s linear both}
@keyframes estrobo{0%{filter:brightness(4) saturate(.4)}30%{filter:brightness(1.9)}45%{filter:brightness(.9)}100%{filter:brightness(1)}}

/* ---------- Trabajos (sala de proyección) ---------- */
.trabajos{background:var(--negro);border-top:1px solid var(--linea-osc);overflow-x:clip}
.caso{margin-top:clamp(56px,7vw,88px)}
.caso__cab{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:24px clamp(40px,6vw,72px);align-items:start;padding-top:40px;border-top:1px solid var(--linea-osc)}
.caso__cliente{font:600 13px/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--rojo-vivo)}
.caso__titulo{margin-top:14px;font:700 clamp(28px,3.7vw,46px)/1 var(--disp);letter-spacing:-.025em;text-wrap:balance}
.caso__reto{font-size:clamp(17px,1.35vw,18px);color:var(--texto-osc)}
.caso__reto b{color:var(--crema)}
.fichas{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.fichas li{padding:10px 12px;border:1px solid var(--linea-osc);font:500 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--texto-osc)}
.carrusel__cab{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:48px;margin-top:clamp(40px,5vw,64px)}
.carrusel__titulo{font:600 13px/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--crema)}
.carrusel__botones{display:flex;gap:8px}
.carrusel__pista{margin-top:14px;font:500 13px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}

/* overflow-y:hidden en las tiras: con overflow-x:auto el eje vertical también queda «auto» y la tira se tragaba el gesto de bajar la página */
.tira{margin-top:18px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--lateral);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tira::-webkit-scrollbar{display:none}
html:not(.js) .tira{scrollbar-width:thin}
.tira:focus-visible{outline-offset:-2px}
.tira__lista{display:flex;gap:16px;width:max-content;padding-bottom:3px}     /* el renglón del número asoma 2 px: que no sobre nada hacia abajo */
.pieza{flex:none;width:clamp(300px,24vw,380px);scroll-snap-align:start}
.pieza img{width:100%;aspect-ratio:4 / 5;object-fit:cover;border:1px solid var(--linea-osc);background:var(--linea-osc)}
.pieza__n{display:block;margin-top:12px;font:500 13px/1 var(--mono);letter-spacing:.14em;color:var(--gris)}

.videos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:clamp(56px,7vw,96px)}
.clip{scroll-margin-top:calc(var(--menu) + 16px)}
.clip__marco{position:relative;aspect-ratio:9 / 16;overflow:hidden;background:var(--linea-osc);border:1px solid var(--linea-osc)}
.clip__poster,.clip__poster img,.clip video{position:absolute;inset:0;width:100%;height:100%}
.clip__poster img,.clip video{object-fit:cover}
/* con JavaScript el video solo se pinta mientras anda o está en pausa: antes y al terminar se ve el póster */
.js .clip video{opacity:0}
.js .clip--andando video{opacity:1}
.clip__poster img{transition:scale 1.2s var(--suave)}
.clip:hover .clip__poster img{scale:1.03}
.clip__play{position:absolute;inset:0;display:grid;place-items:center;width:100%;padding:0;border:0;background:none;cursor:pointer}
.clip__play svg{width:64px;height:64px;padding:17px 15px 17px 19px;border-radius:50%;background:var(--crema);fill:var(--negro);transition:scale .35s var(--back),background-color .25s}
.clip__play:hover svg{scale:1.08;background:#fff}
/* aro de foco que no depende de la foto: crema sobre una franja negra */
.clip__play:focus-visible{outline:2px solid var(--crema);outline-offset:-6px;box-shadow:inset 0 0 0 4px var(--negro)}
.clip--andando .clip__play{display:none}
.clip__rot{padding-top:16px}
.clip__rot h3{font:600 clamp(19px,1.7vw,23px)/1.12 var(--disp);letter-spacing:-.015em;color:var(--crema);text-wrap:balance}
.clip__rot p{margin-top:8px;font:500 13px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}

/* ---------- Cómo trabajamos ---------- */
.paneles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(40px,5vw,56px);border-right:1px solid var(--linea-osc);border-bottom:1px solid var(--linea-osc)}
/* cada panel pinta su raya arriba y a la izquierda: así las rayas interiores no dependen del panel vecino */
.panel{padding:clamp(26px,3vw,38px) clamp(22px,2.8vw,36px) clamp(30px,3.4vw,44px);border-top:1px solid var(--linea-osc);border-left:1px solid var(--linea-osc);
  background:rgba(22,17,15,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.panel__n{display:block;font:600 13px/1 var(--mono);letter-spacing:.2em;color:var(--rojo-vivo)}
.panel h3{margin-top:16px;font:700 clamp(24px,2.6vw,32px)/1.04 var(--disp);letter-spacing:-.02em;color:var(--crema)}
.panel p{margin-top:12px;max-width:46ch;font-size:16.5px;color:var(--texto-osc)}

/* ---------- Qué hacemos ---------- */
.servs{margin-top:clamp(40px,5vw,56px);border-top:1px solid var(--linea)}
.serv{display:grid;grid-template-columns:64px minmax(0,1.1fr) minmax(0,1.4fr);gap:26px;align-items:start;padding:26px 0;border-bottom:1px solid var(--linea);
  transition:background-color .3s,padding-left .3s var(--suave)}
.js .serv.rv{transition:opacity .7s var(--suave) var(--espera),translate .7s var(--suave) var(--espera),background-color .3s,padding-left .3s var(--suave)}
@media (hover:hover){.serv:hover{background:#fff;padding-left:12px}}      /* solo con mouse: tras un toque se quedaba pegado */
.serv__n{padding-top:8px;font:600 13px/1.5 var(--mono);letter-spacing:.12em;color:var(--rojo)}
.serv h3{font:600 clamp(23px,2.7vw,31px)/1.04 var(--disp);letter-spacing:-.02em}
.serv p{font-size:16.5px;color:var(--tinta)}

/* ---------- El feed nuevo ---------- */
.feed{background:var(--crema2);padding-bottom:0;overflow-x:clip}
.feed__cab{max-width:62ch}
.feed__arroba{margin-top:16px;font:600 15px/1.4 var(--mono);letter-spacing:.14em;color:var(--rojo)}
.feed .bajada{margin-top:14px}
.cifras{display:flex;flex-wrap:wrap;gap:clamp(22px,4vw,48px);margin-top:28px}
.cifras > div{display:flex;flex-direction:column-reverse;gap:6px}
.cifras dd{font:700 clamp(34px,4vw,52px)/1 var(--disp);letter-spacing:-.025em}
.cifras dt{font:600 13px/1.3 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--tinta2)}
.feed__enlace{margin-top:16px}
.pasarela__mandos{display:flex;justify-content:flex-end;margin-top:8px}
.pasarela{margin-top:clamp(20px,3vw,36px);padding-top:26px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.pasarela::-webkit-scrollbar{display:none}
.pasarela__cinta{display:flex;align-items:flex-start;width:max-content;padding:0 var(--lateral) clamp(64px,8vw,104px)}
.polaroid{flex:none;margin-right:16px;padding:11px 11px 13px;background:#fff;box-shadow:0 18px 40px -22px rgba(22,17,15,.55);transition:scale .45s var(--suave),translate .45s var(--suave)}
.polaroid img{width:auto;max-width:none;height:clamp(200px,25vw,310px)}
.polaroid span{display:block;margin-top:12px;font:500 13px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;text-align:center;color:var(--tinta2)}
.pasarela--anda{overflow:hidden}
.pasarela--anda .pasarela__cinta{padding-inline:0;animation:pasarela 40s linear infinite}
.pasarela--anda .polaroid{animation:vaiven 7s ease-in-out infinite}
.pasarela--anda .polaroid:nth-child(3n+1){animation-duration:7.6s;animation-delay:-1.2s}
.pasarela--anda .polaroid:nth-child(3n+2){animation-duration:6.3s;animation-delay:-3.4s}
.pasarela--anda .polaroid:nth-child(3n){animation-duration:8.4s;animation-delay:-2.1s}
.pasarela--anda .polaroid:nth-child(4n){animation-duration:9.1s;animation-delay:-4.6s}
.pasarela--anda:focus-visible .pasarela__cinta,.pasarela--anda:focus-visible .polaroid,
.pasarela--pausa .pasarela__cinta,.pasarela--pausa .polaroid{animation-play-state:paused}
/* detenerse y levantar la foto al pasar por encima: solo con mouse (en celular un toque la dejaba detenida) */
@media (hover:hover){
  .pasarela--anda .polaroid:hover{scale:1.04;translate:0 -10px}
  .pasarela--anda:hover .pasarela__cinta,.pasarela--anda:hover .polaroid{animation-play-state:paused}
}
@keyframes pasarela{to{transform:translateX(-50%)}}
@keyframes vaiven{0%,100%{rotate:-2.6deg}50%{rotate:2.6deg}}

/* ---------- Cómo se contrata ---------- */
.planes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px;align-items:stretch;margin-top:clamp(40px,5vw,56px)}
.plan{display:flex;flex-direction:column;gap:16px;padding:32px 28px 22px;border:1px solid var(--linea);background:#fff;
  transition:transform .4s var(--suave),box-shadow .4s var(--suave)}
.js .plan.rv{transition:opacity .7s var(--suave) var(--espera),translate .7s var(--suave) var(--espera),transform .4s var(--suave),box-shadow .4s var(--suave)}
@media (hover:hover){.plan:hover{transform:translateY(-6px);box-shadow:0 18px 40px -24px rgba(22,17,15,.45)}}
.plan__k{font:600 13px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--rojo)}
.plan__nombre{font:700 clamp(27px,3.2vw,38px)/1 var(--disp);letter-spacing:-.025em}
.plan__para{font-size:16px;line-height:1.5;color:var(--tinta2)}
.plan__lista{display:grid;gap:9px}
.plan__lista li{position:relative;padding-left:20px;font-size:16px;line-height:1.5}
.plan__lista li::before{content:"";position:absolute;left:0;top:11px;width:10px;height:2px;background:var(--rojo)}
.plan__valor{margin-top:auto;padding-top:16px;border-top:1px solid var(--linea);font:600 13px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.plan__valor--vacio{font:400 15px/1.5 var(--txt);letter-spacing:0;text-transform:none;color:var(--tinta2)}
.plan .enlace{align-self:flex-start;margin-top:-4px}
.contratar__cta{margin-top:clamp(32px,4vw,48px)}

/* ---------- Cierre ---------- */
.cierre{overflow:hidden;overflow:clip}
.cierre .wrap{position:relative}
.cierre__agua{position:absolute;right:-16vw;top:50%;translate:0 -50%;width:min(72vw,780px);height:auto;aspect-ratio:1;fill:var(--crema);opacity:.08;pointer-events:none;transition:rotate .62s var(--back)}
.cierre__titulo{margin-top:18px;font:700 clamp(48px,9vw,128px)/.92 var(--disp);letter-spacing:-.03em}
.cierre__texto{margin-top:26px;max-width:46ch;font-size:18px;color:#FFE4E8}
.cierre__botones{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.cierre__nota{margin-top:clamp(40px,5vw,64px);font:600 13px/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--crema)}

/* ---------- Pie ---------- */
.pie{position:relative;z-index:1;padding-block:clamp(64px,8vw,104px) 28px;background:var(--negro);overflow-x:clip}
.pie__arriba{display:flex;flex-wrap:wrap;justify-content:space-between;gap:48px clamp(40px,8vw,120px)}
.logo--pie{--h:clamp(26px,8.4vw,50px);font-size:var(--h);margin-top:calc(var(--h) * .5)}
/* lema del lockup oficial: mayúscula = 0,19 de la del logotipo, a 0,46 de esa altura bajo la línea base (y nunca menos de 13 px) */
.logo__lema{display:block;margin-top:calc(var(--h) * .381);font:600 max(13px,calc(var(--h) * .263))/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--rojo-vivo);white-space:nowrap}
.pie__lema{margin-top:clamp(26px,3vw,36px);max-width:15em;font:600 clamp(20px,2vw,26px)/1.12 var(--disp);letter-spacing:-.015em;color:var(--crema)}
.pie__nav{display:flex;flex-wrap:wrap;gap:8px clamp(36px,6vw,80px);align-items:flex-start}
.pie__nav a{display:inline-flex;align-items:center;gap:9px;min-width:44px;padding:13px 0;font:600 13px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--crema);text-decoration:none;transition:color .2s}
.pie__nav a:hover{color:var(--rojo-vivo)}
.pie__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 32px;margin-top:clamp(48px,6vw,80px);padding-top:20px;border-top:1px solid var(--linea-osc);
  font:500 13px/1.7 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}

/* ---------- Botón flotante de WhatsApp (celular) ---------- */
.flotante{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;display:none;align-items:center;gap:10px;height:56px;padding:0 18px 0 16px;
  background:var(--rojo);color:var(--crema);font:600 13px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  box-shadow:0 14px 34px -12px rgba(22,17,15,.7);opacity:0;translate:0 18px;pointer-events:none;visibility:hidden;
  transition:opacity .35s ease,translate .45s var(--suave),bottom .35s var(--suave),visibility 0s linear .45s}
.flotante svg{width:22px;height:22px}
.flotante--visible{opacity:1;translate:none;pointer-events:auto;visibility:visible;transition-delay:0s}
/* mientras anda un video se esconde: así nunca tapa sus controles */
.video-activo .flotante{opacity:0;translate:0 18px;pointer-events:none;visibility:hidden;transition-delay:0s,0s,0s,.45s}
.flotante:focus-visible{outline-color:var(--crema)}

/* ==========================================================================
   Tablet y celular
   ========================================================================== */
@media (max-width:1023px){
  /* reading-flow: el foco del teclado sigue el orden que se ve (primero el objeto, que aquí va arriba); donde no existe, no hace nada */
  .hero__wrap{display:flex;flex-direction:column;align-items:stretch;padding-block:calc(var(--menu) + 2svh) 44px;reading-flow:flex-visual}
  .hero__escena,.hero-2d .hero__escena,html:not(.js) .hero__escena{--ancla:min(52svh,60vw)}
  .hero__escena{order:-1;align-self:flex-end;display:flex;flex-direction:column;align-items:center}
  .hero__rotulo{position:relative;left:auto;top:auto;translate:none;width:auto;max-width:calc(100vw - 2 * var(--margen));margin-bottom:22px}
  .hero__pista{letter-spacing:.12em;text-wrap:balance}
  /* respaldo 2D: la frase reserva sus dos renglones; si no, al pasar de uno a dos el titular y toda la página saltaban 25 px */
  .hero-2d .hero__frase{display:flex;flex-direction:column;justify-content:flex-end;min-height:2.08em}
  .hero__texto::before{inset:-10% -30% -14% -30%}
  .hero__pausa{top:calc(var(--menu) + 10px);bottom:auto}
  .hero__desliza{display:none}
  .pieza{width:min(72vw,340px)}
  .caso__cab{grid-template-columns:1fr}
}
@media (min-width:600px) and (max-width:959px){
  /* dos columnas: si queda una propuesta sola en la última fila, ocupa todo el ancho */
  .planes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plan:last-child:nth-child(odd){grid-column:1 / -1}
}
@media (max-width:899px){
  :root{--menu:56px}
  .menu__nav{display:none}
  .menu .btn{margin-left:auto}
  .logo--menu{font-size:16.5px;margin-top:5px}
  .flotante:not([hidden]){display:inline-flex}
  .manifiesto__cols{grid-template-columns:1fr;gap:20px}
  .paneles{grid-template-columns:1fr}
  .serv{grid-template-columns:44px minmax(0,1fr);gap:8px 16px}
  .serv p{grid-column:2}
}
@media (max-width:759px){
  /* Bela: «DESCARADA* ×» arriba, la firma enorme a la derecha montada sobre el borde del retrato */
  .bela__lockup{column-gap:10px;margin-top:18px}
  .logo--bela,.bela__x{font-size:28.5px}
  .firma{flex:1 0 100%;margin:calc(18px - .14em) 0 calc(-.34em - .05em);padding-right:.16em;text-align:right;font-size:clamp(118px,34vw,170px)}
  .bela__cuerpo{display:flex;flex-direction:column-reverse;gap:34px;margin-top:0}
  .bela__texto{padding-top:0}
  .bela__foto{align-self:stretch}
  .creditos > div{grid-template-columns:1fr;gap:4px}
  .bela__cta .btn{display:flex}
  /* videos en tira horizontal, no en una columna de tres videos altísimos */
  .videos{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--lateral);scrollbar-width:none}
  .videos::-webkit-scrollbar{display:none}
  .js .videos .clip.rv{translate:none}       /* dentro de la tira los videos solo aparecen (sin subir 24 px): nada sobra hacia abajo */
  .clip{flex:none;width:min(78vw,360px);scroll-snap-align:start}
  .pie__nav{flex-direction:column}
}
@media (max-width:599px){
  body{font-size:16px}
  .hero__escena{--ancla:min(82vw,44svh);align-self:center}
  .hero-2d .hero__escena,html:not(.js) .hero__escena{--ancla:min(64vw,34svh)}
  .hero__grito{font-size:clamp(56px,15.5vw,76px)}
  .hero__ctas .btn{flex:1 1 100%}
  .hero__etiqueta .solo-ancho{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .cierre__botones .btn,.contratar__cta .btn{flex:1 1 100%;display:flex}
  .carrusel__botones{display:none!important}
  .polaroid img{height:150px}
  .polaroid{margin-right:12px;padding:8px 8px 10px}
  .polaroid span{margin-top:9px}
  .pie__base{flex-direction:column}
}
@media (max-width:359px){
  /* celulares muy angostos (320 px): todo sigue cabiendo sin desbordar */
  .menu__dentro{gap:12px}
  .menu .btn{padding:0 12px}
  .logo--bela,.bela__x{font-size:24px}
  .hero__etiqueta{letter-spacing:.12em}
}

/* ==========================================================================
   Reducir movimiento: todo quieto y a la vista
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js .rv,.js .pal{opacity:1;translate:none;rotate:none}
  .js .etiqueta.rv::before{scale:1 1}
  .fl{translate:none!important}
  .js .firma{clip-path:none}
  .js .bela__x{rotate:none;opacity:1}
  .bela.en .bela__foto--con-foto{animation:none}
  .tachadas li.caida{translate:none;rotate:none}
  .hero__desliza{animation:none;opacity:1}
  .clip:hover .clip__poster img{scale:none}
}

@media print{
  .menu,.flotante,.escenario,.hero__pausa,.hero__desliza,.clip__play{display:none!important}
  .js .rv,.js .pal{opacity:1!important;translate:none!important}
}