/* ==========================================================================
   CASA® — València
   Sistema v4 · la misma retícula, ambientada en 1962: cinta, cassette y
   grabación analógica. Todo geométrico, sin radios. Tipografía pequeña,
   negro por defecto y modo día. Sin dependencias.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --k:#000000;              /* fondo */
  --k-1:#070707;            /* superficie */
  --k-2:#0F0F0F;            /* superficie alta */
  --w:#FFFFFF;              /* tinta */
  --red:#5B000D;            /* rojo de marca, masas */
  --red-ui:#D6001F;         /* rojo de acción */
  --red-ui-h:#F00323;
  --crema:#DDDAAF;

  --i1:rgba(255,255,255,.96);
  --i2:rgba(255,255,255,.54);
  --i3:rgba(255,255,255,.32);
  --hair:rgba(255,255,255,.13);
  --hair2:rgba(255,255,255,.06);
  --grain:.03;
  --shade:rgba(0,0,0,.55);        /* velo sobre imagen */

  --m:clamp(16px,2.6vw,44px);
  --g:clamp(6px,.7vw,10px);
  --u:clamp(18px,2.2vw,40px);
  --nav:clamp(78px,6.4vw,96px);

  --f:"Inter Tight","Inter",-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --e:cubic-bezier(.19,1,.22,1);
  --e2:cubic-bezier(.65,0,.35,1);
}

/* ---------- modo día: papel de la época ---------- */
:root[data-theme="day"]{
  --k:#EDEAE3;
  --k-1:#E5E1D8;
  --k-2:#DCD7CB;
  --w:#000000;
  --i1:rgba(0,0,0,.94);
  --i2:rgba(0,0,0,.56);
  --i3:rgba(0,0,0,.34);
  --hair:rgba(0,0,0,.16);
  --hair2:rgba(0,0,0,.08);
  --grain:.05;
  --shade:rgba(0,0,0,.34);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;border-radius:0}
html{-webkit-text-size-adjust:100%;background:var(--k)}
html,body{margin:0;padding:0}
body{
  background:var(--k);color:var(--i1);font-family:var(--f);
  font-size:clamp(11.5px,.74vw,13px);font-weight:400;line-height:1.46;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1;
  overflow-x:hidden;
  transition:background .5s linear,color .5s linear;
}
img,video,svg,canvas{display:block;max-width:100%}
p{margin:0}
figure,figcaption{margin:0}
h1,h2,h3,h4{margin:0;font-weight:500}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0;margin:0}
button{cursor:pointer}
input[type=checkbox]{accent-color:var(--red-ui);cursor:pointer}
::selection{background:var(--red-ui);color:#fff}
:focus-visible{outline:1px solid var(--red-ui);outline-offset:2px}

/* el grano de la cinta: una capa fija, casi invisible */
body::after{
  content:"";position:fixed;inset:-50%;z-index:92;pointer-events:none;opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- retícula ---------- */
.wrap{padding-inline:var(--m)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--g)}
.c1{grid-column:span 1}.c2{grid-column:span 2}.c3{grid-column:span 3}
.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}
.c7{grid-column:span 7}.c8{grid-column:span 8}.c9{grid-column:span 9}
.c10{grid-column:span 10}.c12{grid-column:span 12}
.at7{grid-column:7/span 4}
.at8{grid-column:8/span 5}
.at9{grid-column:9/span 4}
.at11{grid-column:11/span 2}
@media (max-width:900px){.at7,.at8,.at9,.at11{grid-column:1/-1}}

/* ---------- tipografía ---------- */
.lbl{
  font-size:clamp(8px,.53vw,9.5px);font-weight:500;line-height:1.5;
  letter-spacing:.14em;text-transform:uppercase;color:var(--i2);
}
.lbl--w{color:var(--w)}
.lbl--r{color:var(--red-ui)}
.num{font-variant-numeric:tabular-nums}
.t-xl{font-size:clamp(24px,3.6vw,62px);font-weight:500;line-height:1.05;letter-spacing:-.034em}
.t-l{font-size:clamp(18px,2.1vw,34px);font-weight:500;line-height:1.12;letter-spacing:-.028em}
.t-m{font-size:clamp(13px,1.25vw,19px);font-weight:500;line-height:1.22;letter-spacing:-.018em}
.t-s{font-size:clamp(11.5px,.92vw,14.5px);font-weight:500;line-height:1.3;letter-spacing:-.01em}
.txt{font-size:clamp(11px,.72vw,12.8px);font-weight:400;line-height:1.54;color:var(--i2);text-wrap:pretty}
.txt b,.txt strong{font-weight:500;color:var(--w)}
.txt+.txt{margin-top:1em}
.center{text-align:center}
.bal{text-wrap:balance}
.hair{border:0;border-top:1px solid var(--hair);margin:0}
.red{color:var(--red-ui)}
.tbd{display:inline-flex;align-items:baseline;gap:8px}
.tbd b{filter:blur(7px);user-select:none;-webkit-user-select:none}
.tbd i{font-style:normal;color:rgba(255,255,255,.5)}

/* ---------- cabecera ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:70;height:var(--nav);
  display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto auto;
  align-items:center;row-gap:clamp(6px,.6vw,9px);
  padding-inline:var(--m);padding-top:clamp(11px,1.1vw,16px);
}
.nav__l{grid-area:1/1;justify-self:start}
.nav__c{grid-area:1/2;justify-self:center}
.nav__r{grid-area:1/3;justify-self:end;display:flex;align-items:center;gap:clamp(12px,1.4vw,22px)}
.nav__buy{grid-area:2/1/3/-1;justify-self:center}
.nav__logo{width:clamp(54px,4.4vw,74px)}
.nav__logo img{width:100%;height:auto}
:root[data-theme="day"] .nav__logo img,
:root[data-theme="day"] .foot__logo img,
:root[data-theme="day"] .load__mark,
:root[data-theme="day"] .ticket__logo,
:root[data-theme="day"] .okmark,
:root[data-theme="day"] .iso{filter:invert(1)}
.lnk{position:relative;display:inline-block;padding-block:3px;font-size:clamp(8px,.53vw,9.5px);
  font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--i1)}
.lnk::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--e)}
.lnk:hover::after,.lnk[aria-current="page"]::after{transform:scaleX(1);transform-origin:0 50%}
.nav__burger{display:none;align-items:center;gap:6px}

/* ---------- la luna: día / noche ---------- */
.moon{display:grid;place-items:center;width:clamp(15px,1.3vw,19px);aspect-ratio:1;
  color:var(--i2);transition:color .3s linear,transform .5s var(--e)}
.moon:hover{color:var(--i1);transform:rotate(-12deg)}
.moon svg{grid-area:1/1;width:100%;height:100%;transition:opacity .4s linear,transform .5s var(--e)}
.moon__d{opacity:0;transform:scale(.6) rotate(-40deg)}
:root[data-theme="day"] .moon__n{opacity:0;transform:scale(.6) rotate(40deg)}
:root[data-theme="day"] .moon__d{opacity:1;transform:none}

/* ---------- mando de esquina: sonido ---------- */
.ctrl{position:fixed;bottom:calc(var(--m) - 2px);z-index:75;display:inline-flex;align-items:center;gap:7px;
  font-size:clamp(8px,.53vw,9.5px);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--i2);
  transition:color .3s linear}
.ctrl:hover{color:var(--i1)}
.ctrl--l{left:var(--m)}
.ctrl--r{right:var(--m)}
.ctrl i{display:block;width:6px;height:6px;background:currentColor;transition:background .3s linear,transform .4s var(--e)}
.ctrl[data-on="1"] i{background:var(--red-ui);transform:scale(1.25)}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:9px}
.eq span{width:2px;height:3px;background:currentColor;transition:height .2s linear}
.ctrl[data-on="1"] .eq span{animation:eq .9s ease-in-out infinite}
.ctrl[data-on="1"] .eq span:nth-child(2){animation-delay:.15s}
.ctrl[data-on="1"] .eq span:nth-child(3){animation-delay:.3s}
@keyframes eq{0%,100%{height:3px}50%{height:9px}}
@media (max-width:620px){.ctrl{font-size:8px}}


.load{position:fixed;inset:0;z-index:100;background:var(--k);display:grid;place-items:center;
  transition:opacity .7s var(--e),visibility .7s}
.load[data-done="1"]{opacity:0;visibility:hidden;pointer-events:none}

/* el loader: el logotipo, que se desenfoca y deja pasar a la web */
.load__mark{width:clamp(130px,15vw,230px);height:auto;
  transition:filter 1s var(--e),opacity 1s var(--e),transform 1s var(--e)}
.load[data-out="1"] .load__mark{filter:blur(26px);opacity:0;transform:scale(1.14)}
:root[data-theme="day"] .load[data-out="1"] .load__mark{filter:invert(1) blur(26px)}

.wipe{position:fixed;inset:0;z-index:90;pointer-events:none;background:var(--k);
  clip-path:inset(100% 0 0 0);transition:clip-path .6s var(--e)}
.wipe[data-on="1"]{pointer-events:all;clip-path:inset(0 0 0 0)}

/* ---------- botones ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-width:clamp(112px,9.4vw,148px);
  padding:clamp(6px,.46vw,8px) clamp(13px,1.2vw,20px);
  background:var(--red-ui);color:#fff;overflow:hidden;
  font-size:clamp(8px,.53vw,9.5px);font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  transition:transform .5s var(--e);will-change:transform;
}
.btn span{position:relative;z-index:2}
.btn::before{content:"";position:absolute;inset:0;background:var(--red-ui-h);
  transform:scaleY(0);transform-origin:50% 100%;transition:transform .5s var(--e)}
.btn:hover::before{transform:scaleY(1)}
.btn--ghost{background:transparent;border:1px solid var(--hair);color:var(--i1)}
.btn--ghost::before{background:var(--w)}
.btn--ghost:hover{color:var(--k)}
.btn--block{width:100%}
.btn[disabled]{opacity:.24;pointer-events:none;filter:grayscale(1)}
.nav__buy{min-width:clamp(100px,8.2vw,126px);padding:clamp(5px,.4vw,7px) clamp(12px,1.1vw,18px)}

/* ---------- apariciones ---------- */
[data-rise]{opacity:0;transform:translateY(10px);transition:opacity 1s var(--e),transform 1s var(--e);transition-delay:var(--d,0ms)}
[data-rise].is-in{opacity:1;transform:none}
.wline{display:block;overflow:hidden}
.wline>i{display:block;font-style:normal;transform:translateY(104%);transition:transform 1s var(--e);transition-delay:var(--d,0ms)}
.is-in .wline>i,.wline.is-in>i{transform:none}
.wd{display:inline-block;overflow:hidden;vertical-align:bottom}
.wd>i{display:inline-block;font-style:normal;transform:translateY(104%);transition:transform .9s var(--e);transition-delay:var(--d,0ms)}
.is-in .wd>i{transform:none}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;height:100svh;min-height:540px;overflow:hidden}
.hero__media{position:absolute;inset:0;overflow:hidden}
.hero__media video,.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.hero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.06) 24%,rgba(0,0,0,.1) 58%,rgba(0,0,0,.84) 100%)}
.hero__cta{position:absolute;inset:0;z-index:3;display:grid;place-items:end center;
  padding-bottom:clamp(140px,22vh,250px)}
.hero__foot{position:absolute;left:var(--m);right:var(--m);bottom:clamp(44px,5vw,70px);z-index:3}
.hero__foot .txt{color:rgba(255,255,255,.78);max-width:58ch}
.hero__top{position:absolute;left:var(--m);right:var(--m);top:calc(var(--nav) + clamp(6px,.8vw,12px));z-index:3;
  display:flex;justify-content:space-between}
.hero__top .lbl{color:rgba(255,255,255,.8)}

/* ==========================================================================
   SECCIÓN
   ========================================================================== */
.sec{position:relative;padding-block:clamp(58px,8.4vw,150px)}
.sec--tight{padding-block:clamp(40px,5vw,86px)}
.sec__top{display:flex;justify-content:space-between;gap:var(--g);margin-bottom:clamp(24px,3.2vw,58px)}

/* ---------- declaración + fotos en retícula ---------- */
.intro{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--g);align-items:start}
.intro__say{grid-column:4/span 6;align-self:center;text-align:center;padding-block:var(--u)}
.ph{position:relative;overflow:hidden;background:var(--k-1)}
.ph img,.ph video{width:100%;height:100%;object-fit:cover;
  transform:scale(var(--ken,1));transition:transform .9s var(--e),filter .9s var(--e);filter:saturate(.94)}
.ph:hover img,.ph:hover video{transform:scale(calc(var(--ken,1) * 1.055));filter:saturate(1.08)}
a.ph,a .ph{cursor:pointer}
.ph__go{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:9px 10px;
  display:flex;justify-content:space-between;opacity:0;transform:translateY(6px);
  transition:opacity .5s var(--e),transform .5s var(--e);
  background:linear-gradient(0deg,rgba(0,0,0,.6),transparent)}
a:hover .ph__go,.ph:hover .ph__go{opacity:1;transform:none}
.ph__go span{font-size:clamp(8px,.53vw,9.5px);font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:#fff}
.cap{display:block;margin-top:7px}
.cap b{display:block;font-size:clamp(8px,.53vw,9.5px);font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--w)}
.cap span{display:block;font-size:clamp(8px,.53vw,9.5px);font-weight:400;line-height:1.4;color:var(--i3);margin-top:2px}
.sh{display:block;will-change:transform;color:inherit}
.sh--a{grid-column:1/span 3}
.sh--b{grid-column:10/span 3}
.sh--c{grid-column:1/span 3;margin-top:var(--u)}
.sh--d{grid-column:10/span 3;margin-top:var(--u)}
.ar-45{aspect-ratio:4/5}
.ar-11{aspect-ratio:1/1}
.ar-34{aspect-ratio:3/4}
.ar-169{aspect-ratio:16/9}

/* ---------- la caja que se abre (3D) ---------- */
.case{position:relative;height:300svh}
.case__pin{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center;
  perspective:1500px;perspective-origin:50% 45%}
.case__in{position:relative;width:clamp(210px,25vw,400px);aspect-ratio:1/1.26;
  transform-style:preserve-3d;will-change:transform}
.case__sleeve{position:absolute;inset:0;overflow:hidden;background:var(--k-2);
  border:1px solid var(--hair);box-shadow:0 40px 120px rgba(0,0,0,.6)}
.case__sleeve video,.case__sleeve img{width:100%;height:100%;object-fit:cover}
.case__sleeve .case__mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:56%;height:auto;z-index:2;mix-blend-mode:difference;object-fit:contain}
.case__lid{
  position:absolute;inset:0;transform-origin:0% 50%;transform-style:preserve-3d;
  background:linear-gradient(118deg,rgba(255,255,255,.1),rgba(255,255,255,.03) 42%,rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px);
  will-change:transform;
}
:root[data-theme="day"] .case__lid{
  background:linear-gradient(118deg,rgba(0,0,0,.1),rgba(0,0,0,.03) 42%,rgba(0,0,0,.08));
  border-color:rgba(0,0,0,.2)}
.case__lid::after{content:"";position:absolute;inset:0;
  background:linear-gradient(118deg,transparent 30%,rgba(255,255,255,.22) 46%,transparent 60%)}
.case__spine{position:absolute;left:0;top:0;bottom:0;width:9px;transform-origin:0% 50%;
  transform:rotateY(90deg);background:rgba(255,255,255,.1);border-right:1px solid rgba(255,255,255,.16)}
.case__say{position:absolute;left:var(--m);right:var(--m);bottom:clamp(26px,4vw,70px);z-index:5;
  pointer-events:none;opacity:0;text-align:center}

/* ---------- respiro: negro y una frase ---------- */
.breath{min-height:clamp(420px,72svh,760px);display:grid;place-items:center;
  padding:clamp(60px,10vw,160px) var(--m);background:var(--k)}
.breath p{max-width:22ch}

/* ---------- galería de cierre ---------- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g)}
.gal>a{display:block;color:inherit}
.gal .ph{aspect-ratio:4/5}
@media (max-width:900px){.gal{grid-template-columns:repeat(2,1fr)}}

/* ---------- el logotipo se amplía y detrás aparece el mockup ---------- */
.word{position:relative;height:330svh}
.word__pin{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
.word__plain{position:absolute;inset:0;opacity:0;will-change:opacity,filter}
.word__plain img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.word__plain::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.3)}
.word__fill{position:absolute;inset:0;
  -webkit-mask:url("../img/logo-casa-w.png") center/0 no-repeat;
          mask:url("../img/logo-casa-w.png") center/0 no-repeat;}
.word__fill img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.word__say{position:absolute;left:var(--m);right:var(--m);bottom:clamp(26px,4vw,70px);z-index:4;
  text-align:center;opacity:0;color:#fff}
.word__rail{position:absolute;left:var(--m);right:var(--m);top:calc(var(--nav) + clamp(6px,.8vw,12px));
  z-index:4;display:flex;justify-content:space-between;opacity:0}

/* ---------- mosaico ---------- */
.mosaic{position:relative;height:300svh}
.mosaic__pin{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
.mosaic__g{position:relative;width:calc(100% - var(--m) * 2);height:calc(100% - var(--m) * 2);
  display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(4,1fr);gap:var(--g)}
.mosaic__i{position:relative;overflow:hidden;will-change:transform,opacity;background:var(--k-1)}
.mosaic__i img,.mosaic__i video{width:100%;height:100%;object-fit:cover}
.mosaic__say{position:absolute;inset:0;z-index:5;display:grid;place-items:center;pointer-events:none;padding-inline:var(--m)}
.mosaic__say p{background:var(--k);padding:clamp(13px,1.5vw,24px) clamp(17px,2vw,34px);max-width:24ch}

/* ---------- dos columnas ---------- */
.duo{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,62px)}
.duo p{font-size:clamp(14px,1.5vw,25px);font-weight:500;line-height:1.18;letter-spacing:-.022em;color:var(--w)}
.duo em{font-style:normal;color:var(--red-ui)}

/* ---------- cifras, sólo tipografía ---------- */
.figures{position:relative;height:200svh}
.figures__pin{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
.figures__bg{position:absolute;inset:0}
.figures__bg img,.figures__bg video{width:100%;height:100%;object-fit:cover;will-change:transform}
.figures__bg::after{content:"";position:absolute;inset:0;background:var(--shade)}
.figures__in{position:relative;z-index:2;width:100%;padding-inline:var(--m);text-align:center}
.figures__in p{color:#fff;text-shadow:0 2px 40px rgba(0,0,0,.5)}
.figures__row{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(16px,2.6vw,54px);
  margin-top:clamp(20px,2.8vw,48px)}
.figures__row span{color:rgba(255,255,255,.72);font-size:clamp(8px,.53vw,9.5px);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase}

/* ---------- tira ---------- */
.strip{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--g)}
.strip figure{margin:0}
.strip .ph{aspect-ratio:4/5}
.strip figcaption{margin-top:7px}
.strip figcaption b{display:block;font-size:clamp(8px,.53vw,9.5px);font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--w)}
.strip figcaption span{display:block;font-size:clamp(8px,.53vw,9.5px);color:var(--i3);margin-top:2px}

/* ---------- texto + fotos ---------- */
.solve{display:grid;grid-template-columns:5fr 7fr;gap:clamp(20px,3vw,58px);align-items:start}
.solve__ph{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--g)}
.solve__ph .ph{aspect-ratio:1}

/* ---------- película ---------- */
.film{position:relative;height:200svh}
.film--s{height:150svh}
.film__pin{position:sticky;top:0;height:100svh;overflow:hidden;background:#000}
.film__pin video,.film__pin img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.film__pin::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.44),rgba(0,0,0,0) 32%,rgba(0,0,0,0) 62%,rgba(0,0,0,.76))}
.film__say{position:absolute;left:var(--m);right:var(--m);top:50%;transform:translateY(-50%);z-index:2;
  text-align:center;color:#fff}
.film__edge{position:absolute;left:var(--m);right:var(--m);z-index:2;display:flex;justify-content:space-between}
.film__edge--t{top:calc(var(--nav) + clamp(6px,.8vw,12px))}
.film__edge .lbl{color:rgba(255,255,255,.8)}

/* ---------- fechas ---------- */
.dates{border-top:1px solid var(--hair)}
.date{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(12px,1.8vw,30px);align-items:center;
  padding-block:clamp(14px,1.8vw,28px);border-bottom:1px solid var(--hair);position:relative;overflow:hidden}
.date::before{content:"";position:absolute;inset:0;background:var(--k-2);transform:scaleY(0);transform-origin:50% 100%;
  transition:transform .6s var(--e);z-index:0}
.date:hover::before{transform:scaleY(1)}
.date>*{position:relative;z-index:1}
.date__n{font-size:clamp(26px,3.8vw,66px);font-weight:500;line-height:.9;letter-spacing:-.044em;min-width:2.1ch}
.date__m{display:flex;flex-direction:column;gap:5px}
.date__go{display:flex;align-items:center;gap:9px;white-space:nowrap}
.date__go i{display:block;width:clamp(14px,2vw,32px);height:1px;background:currentColor;transition:width .5s var(--e)}
.date:hover .date__go i{width:clamp(26px,3.4vw,58px)}

/* ---------- cuenta atrás ---------- */
.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g)}
.cd__u{display:flex;flex-direction:column;gap:5px}
.cd__u b{font-size:clamp(20px,2.6vw,44px);font-weight:500;line-height:.92;letter-spacing:-.038em;font-variant-numeric:tabular-nums}

/* ---------- tarjetas ---------- */
.card{background:var(--k-1);border:1px solid var(--hair2);
  padding:clamp(14px,1.5vw,26px);display:flex;flex-direction:column;gap:10px}
.grid>.card{height:100%}
.card--line{background:none;border-color:var(--hair)}
.card--red{background:var(--red);border-color:transparent;color:#fff}
.card--red .txt{color:rgba(255,255,255,.76)}
.card--red .lbl{color:rgba(255,255,255,.66)}
.card__n{font-size:clamp(16px,1.8vw,28px);font-weight:500;line-height:.9;letter-spacing:-.034em;color:var(--red-ui)}
.card--red .card__n{color:var(--crema)}
.card ul li{display:flex;gap:8px;padding-block:6px;border-bottom:1px solid var(--hair2);
  font-size:clamp(11px,.72vw,12.8px);color:var(--i2);line-height:1.42}
.card ul li::before{content:"";flex:none;width:4px;height:4px;margin-top:.52em;background:var(--red-ui)}
.card--red ul li{border-bottom-color:rgba(255,255,255,.16);color:rgba(255,255,255,.78)}
.card--red ul li::before{background:var(--crema)}
.card ul li:last-child{border-bottom:0}

/* ---------- acordeón ---------- */
.acc{border-top:1px solid var(--hair)}
.acc__i{border-bottom:1px solid var(--hair)}
.acc__h{width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--g);
  padding-block:clamp(12px,1.4vw,20px);text-align:left}
.acc__h .tri{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
  border-bottom:9px solid var(--i2);transition:transform .5s var(--e),border-bottom-color .3s linear}
.acc__i[data-on="1"] .acc__h .tri{transform:rotate(180deg);border-bottom-color:var(--red-ui)}
.acc__b{overflow:hidden;height:0;transition:height .6s var(--e)}
.acc__b>div{padding-bottom:clamp(12px,1.4vw,20px)}

/* ---------- formularios ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field input,.field select,.field textarea{
  width:100%;padding:clamp(9px,.78vw,13px) 12px;background:var(--k-1);border:1px solid var(--hair);
  color:var(--w);font-size:clamp(11px,.74vw,12.8px);
  transition:border-color .3s linear,background .3s linear}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red-ui);background:var(--k-2);outline:none}
.field input::placeholder,.field textarea::placeholder{color:var(--i3)}
.field select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--i2) 50%),linear-gradient(135deg,var(--i2) 50%,transparent 50%);
  background-position:calc(100% - 17px) calc(50% + 1px),calc(100% - 12px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}

.sum__row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sum__row .txt{margin:0}

/* ---------- pie ---------- */
.foot{padding-top:clamp(40px,5.4vw,92px);padding-bottom:clamp(40px,5vw,70px);border-top:1px solid var(--hair)}
.foot__logo img{width:100%;height:auto;opacity:.95}
.foot__row{display:flex;justify-content:space-between;gap:var(--g);flex-wrap:wrap;margin-top:clamp(22px,2.8vw,46px)}
.foot__col{display:flex;flex-direction:column;gap:7px}
.foot__col a:hover{color:var(--w)}
.foot__end{display:flex;justify-content:space-between;gap:var(--g);margin-top:clamp(22px,3vw,48px);
  padding-top:13px;border-top:1px solid var(--hair2);flex-wrap:wrap}

/* ---------- menú móvil ---------- */
.sheet{position:fixed;inset:0;z-index:69;background:var(--k);display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:var(--m);clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--e);pointer-events:none}
.sheet[data-on="1"]{clip-path:inset(0 0 0 0);pointer-events:all}
.sheet a{font-size:clamp(26px,8.4vw,48px);font-weight:500;line-height:1.12;letter-spacing:-.038em;color:var(--w)}
.sheet__f{position:absolute;left:var(--m);right:var(--m);bottom:calc(var(--m) + 26px);display:flex;justify-content:space-between}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .strip{grid-template-columns:repeat(3,1fr)}
  .mosaic__g{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr)}
  .mosaic__i{grid-column:auto !important;grid-row:auto !important}
}
@media (max-width:900px){
  :root{--m:16px;--g:7px}
  .duo{grid-template-columns:1fr}
  .solve{grid-template-columns:1fr}
  .c3,.c4{grid-column:span 6}
  .c5,.c6,.c7,.c8,.c9,.c10{grid-column:span 12}
  .intro{grid-template-columns:repeat(2,1fr)}
  .intro__say{grid-column:1/-1;order:-1;padding-block:0 var(--u)}
  .sh--a,.sh--b,.sh--c,.sh--d{grid-column:auto;margin-top:0}
  .sh--c,.sh--d{margin-top:var(--g)}
  .sh{transform:none !important}
  .hero__media::after{background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.12) 22%,
    rgba(0,0,0,.2) 50%,rgba(0,0,0,.92) 100%)}
  .case{height:240svh}
  .word{height:260svh}
}
@media (max-width:620px){
  /* en móvil: la luna a la izquierda, el logotipo en medio, el menú a la derecha */
  .nav__l{display:none}
  .nav__r{grid-area:1/1;justify-self:start}
  .nav__r .lnk{display:none}
  .nav__burger{display:inline-flex;grid-area:1/3;justify-self:end}
  .date{grid-template-columns:auto 1fr}
  .date__go{grid-column:1/-1;margin-top:7px}
  .c2,.c3,.c4{grid-column:span 12}
  .strip{grid-template-columns:repeat(2,1fr)}
  .cd{grid-template-columns:repeat(2,1fr)}
  .mosaic{height:200svh}
  .mosaic__g{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(4,1fr)}
  .figures__row{gap:12px 22px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  [data-rise]{opacity:1;transform:none}
  .wline>i,.wd>i{transform:none}
  .figures,.film,.case,.word{height:auto}
  .figures__pin,.film__pin,.case__pin,.word__pin{position:relative;height:100svh}
  body::after{display:none}
}