/* ═══════════════════════════════════════════════════════════
   JOESTAR HOME — versión scroll-cinemática
   Tema claro: papel #F3F0E9, tinta #0E1630, acento barro #B86A4B
   ═══════════════════════════════════════════════════════════ */
:root{
  --abismo:#0E1630; --noche:#141F44; --tinta:#25367B;
  --acero:#8894B4; --porcelana:#E9ECF2;
  --barro:#B86A4B; --barro2:#9A5538;
  --papel:#F3F0E9; --papel2:#EBE7DE; --grafito:#2A3350;
  --linea:rgba(14,22,48,.18); --linea2:rgba(14,22,48,.32);
  --texto2:#454F75; --texto3:#525C82;
  --display:'Manrope','Instrument Sans',-apple-system,sans-serif;
  --util:'Jost',sans-serif;
  --texto:'Instrument Sans',-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --gut:clamp(20px,5vw,64px); --max:1180px;
  --ease:cubic-bezier(.2,.7,.3,1);
  --navh:68px;
}
*{box-sizing:border-box}
html{background:#F3F0E9!important;color-scheme:light only;-webkit-text-size-adjust:100%}
body{margin:0;background:#F3F0E9!important;color:#2A3350!important;font-family:var(--texto);font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
#page{background-color:var(--papel);color:var(--grafito)}
main,footer{position:relative;z-index:1}
section{background-color:var(--papel);color:var(--grafito)}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1.5px solid var(--barro);outline-offset:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;margin:0;letter-spacing:-.025em;color:var(--abismo)}
h1{font-size:clamp(34px,5.4vw,62px);line-height:1.06}
h2{font-size:clamp(25px,3.5vw,40px);line-height:1.12}
h3{font-size:clamp(19px,2.2vw,24px);line-height:1.2}
h4{font-size:18px;line-height:1.25}
p{margin:0 0 1.05em}
.lead{font-size:clamp(16.5px,1.5vw,19px);line-height:1.7;color:var(--texto2);max-width:47ch}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--barro);margin:0 0 20px;display:flex;align-items:center;gap:14px}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--linea);max-width:160px}
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--tinta)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- botones ---------- */
.btn{display:inline-block;font-family:var(--util);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--abismo);background:var(--abismo);color:var(--porcelana);padding:12px 22px;border-radius:1px;cursor:pointer;white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.btn:hover{background:var(--barro);border-color:var(--barro);color:#fff}
.btn-barro{background:var(--barro);border-color:var(--barro);color:#fff}
.btn-barro:hover{background:var(--abismo);border-color:var(--abismo)}
.btn-ghost{background:transparent;color:var(--abismo);border-color:var(--linea2)}
.btn-ghost:hover{background:var(--abismo);color:var(--porcelana);border-color:var(--abismo)}
.btn-wa{display:inline-flex;align-items:center;gap:10px;background:#25D366;border:1px solid #25D366;color:#fff;font-family:var(--util);font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:13px 20px;border-radius:999px;transition:background .2s,transform .2s,box-shadow .2s}
.btn-wa svg{width:18px;height:18px;fill:currentColor;flex:0 0 auto}
.btn-wa:hover{background:#1EBE5A;border-color:#1EBE5A;color:#fff;transform:translateY(-1px);box-shadow:0 10px 24px rgba(37,211,102,.35)}

/* ---------- barra de progreso ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:80;background:var(--barro);transform-origin:left;transform:scaleX(0);pointer-events:none}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--navh);transition:background-color .35s,border-color .35s,height .35s,color .35s;border-bottom:1px solid transparent;color:var(--abismo)}
.nav.is-stuck{background-color:rgba(243,240,233,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:var(--linea)}
.nav.is-compact{height:58px}
.nav-in{max-width:var(--max);margin:0 auto;padding:0 var(--gut);height:100%;display:flex;align-items:center;gap:22px}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto}
.brand img{height:30px;width:auto;transition:filter .35s}
.brand span{font-family:var(--util);font-weight:300;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:inherit}
.brand span b{font-weight:500;color:var(--barro)}
.nav-links{display:flex;gap:24px;font-family:var(--util);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta)}
.nav-links a{padding:6px 0;border-bottom:1px solid transparent}
.nav-links a:hover{border-color:var(--barro);color:var(--abismo)}
/* sobre el video: todo en blanco */
.nav.nav--over{color:#fff}
.nav.nav--over .nav-links{color:rgba(255,255,255,.82)}
.nav.nav--over .nav-links a:hover{color:#fff;border-color:#fff}
.nav.nav--over .brand img{filter:brightness(0) invert(1)}
.nav.nav--over .btn{background:#fff;border-color:#fff;color:var(--abismo)}
.nav.nav--over .btn:hover{background:var(--barro);border-color:var(--barro);color:#fff}
@media(max-width:900px){.nav-links{display:none}}
@media(max-width:480px){.brand span{white-space:nowrap;font-size:11px;letter-spacing:.18em}.brand img{height:26px}.nav .btn{padding:10px 12px;font-size:10.5px;letter-spacing:.1em}}

/* ---------- hero con video ---------- */
.hero{position:relative;height:400vh;background:#0B0F1C}
.hero__sticky{position:sticky;top:0;height:100svh;overflow:hidden}
.hero__media{position:absolute;inset:0;background:#0B0F1C}
.hero__media video{width:100%;height:100%;object-fit:cover}
.hero__scrim{position:absolute;inset:0;background:
  linear-gradient(to top,rgba(10,14,28,.84) 0%,rgba(10,14,28,.56) 28%,rgba(10,14,28,.14) 58%,rgba(10,14,28,0) 80%),
  linear-gradient(to bottom,rgba(10,14,28,.42) 0%,rgba(10,14,28,0) 26%)}
.hero__stage{position:absolute;left:0;right:0;bottom:clamp(3.5rem,10vh,7rem);display:grid;max-width:var(--max);margin-inline:auto;padding:0 var(--gut)}
.hero__content,.hero__caps{grid-area:1/1;align-self:end}
.hero__content{color:#fff;will-change:opacity,transform}
.hero__content .eyebrow{color:rgba(255,255,255,.74)}
.hero__content .eyebrow::after{background:rgba(255,255,255,.3)}
.hero h1{color:#fff;max-width:14ch;font-size:clamp(36px,1rem + 5.6vw,76px);letter-spacing:-.035em}
.hero h1 em{font-style:normal;font-weight:500;color:#E3A383}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .line__in{display:block;transform:translateY(105%);transition:transform 1.1s var(--ease)}
.hero h1 .line:nth-child(2) .line__in{transition-delay:.09s}
.is-ready .hero h1 .line__in{transform:none}
.hero__sub{max-width:48ch;margin-top:clamp(1.2rem,2.4vw,1.8rem);color:rgba(255,255,255,.84);font-size:clamp(16px,.95rem + .34vw,18.5px);line-height:1.6}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;margin-top:clamp(1.6rem,3vw,2.4rem)}
.hero .btn-barro:hover{background:#fff;border-color:#fff;color:var(--abismo)}
.hero__meta{margin-top:clamp(1.6rem,3vw,2.6rem);padding-top:16px;border-top:1px solid rgba(255,255,255,.22);display:flex;flex-wrap:wrap;gap:8px 28px;font-family:var(--util);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.hero__caps{pointer-events:none;display:grid}
.hero__cap{grid-area:1/1;font-family:var(--display);font-weight:500;font-size:clamp(28px,1rem + 3vw,58px);letter-spacing:-.035em;line-height:1.08;color:#fff;max-width:16ch;opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease);margin:0}
.hero__cap.is-on{opacity:1;transform:none}
.hero__cap i{font-style:normal;color:#E3A383}
.hero__cue{position:absolute;left:50%;bottom:1.4rem;translate:-50% 0;display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.62);transition:opacity .5s var(--ease);margin:0}
.hero__cue span{display:block;width:1px;height:34px;background:linear-gradient(rgba(255,255,255,.85),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%,100%{opacity:.2;transform:scaleY(.35);transform-origin:top}45%{opacity:1;transform:scaleY(1);transform-origin:top}}

/* ---------- manifiesto ---------- */
.manifesto{position:relative;height:250vh;border-top:1px solid var(--linea)}
.manifesto__sticky{position:sticky;top:0;height:100svh;display:grid;align-content:center;justify-items:start;max-width:var(--max);margin-inline:auto;padding:0 var(--gut)}
.manifesto__text{max-width:26ch;font-family:var(--display);font-weight:500;font-size:clamp(26px,.85rem + 3.2vw,56px);line-height:1.14;letter-spacing:-.03em;margin:0}
.manifesto__text .w{color:#CFCBC2;transition:color .35s ease}
.manifesto__text .w.on{color:var(--abismo)}
.manifesto__text .w.hot{color:var(--barro)}
.manifesto__coda{max-width:46ch;margin:clamp(1.4rem,3vw,2.2rem) 0 0;font-size:clamp(15.5px,.9rem + .3vw,18px);color:var(--texto2);opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.manifesto__coda.on{opacity:1;transform:none}

/* ---------- tres líneas: dibujo fijo + lista ---------- */
.lines{padding:clamp(70px,9vw,110px) 0 clamp(40px,6vw,80px);border-top:1px solid var(--linea)}
.lines__head{margin-bottom:clamp(40px,6vw,80px)}
.lines__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px)}
.stage{position:sticky;top:calc(var(--navh) + 6vh);display:grid;align-content:start;align-self:start;height:fit-content}
.stage__num{display:flex;align-items:baseline;gap:6px;font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--barro);margin-bottom:14px}
.stage__num i{font-style:normal;color:var(--acero)}
.art{grid-area:2/1;border:1px solid var(--linea);background:#FAFAF8;padding:clamp(16px,2.5vw,28px);aspect-ratio:4/3;opacity:0;transform:scale(.985);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.art.art--is-on{opacity:1;transform:none}
.art svg{width:100%;height:100%;display:block;overflow:visible}
/* con imagen: la foto llena el marco y el dibujo se esconde (la img no va en display:none o lazy nunca la pide) */
.art{position:relative}
.art__img{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none;object-fit:cover}
.art.has-img{padding:0;background:var(--papel2)}
.art.has-img .art__img{position:static;width:100%;height:100%;opacity:1}
.art.has-img svg{display:none}
.art svg *{fill:none;stroke:var(--abismo);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.art svg .ac *{stroke:var(--barro)}
.art svg .ac.f *{fill:rgba(184,106,75,.14)}
.art svg .lt *{stroke:var(--acero)}
.art svg .dash *{stroke-dasharray:3 5}
.art svg text{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;fill:var(--acero);stroke:none}
.art__cap{grid-area:3/1;margin:12px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--acero);opacity:0;transition:opacity .5s}
.art--is-on + .art__cap{opacity:1}
.svc-list{list-style:none;margin:0;padding:0}
.svc{padding:clamp(46px,8vh,96px) 0;border-top:1px solid var(--linea);opacity:.36;transition:opacity .45s ease}
.svc:first-child{border-top:0;padding-top:0}
.svc.is-on{opacity:1}
.svc .n{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--barro);margin:0 0 12px}
.svc h3{margin-bottom:12px;font-size:clamp(22px,2.4vw,30px)}
.svc p{color:var(--texto2);font-size:15.5px;margin-bottom:16px;max-width:46ch}
.svc p b{font-weight:500;color:var(--abismo)}
.svc ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.svc li{position:relative;padding-left:18px;font-size:14px;line-height:1.5;color:var(--texto3)}
.svc li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;background:var(--barro);transform:rotate(45deg)}

/* ---------- riel: lo que más nos piden ---------- */
.rail{position:relative;--panels:7;height:calc(var(--panels) * 100vh + 100svh);background-color:var(--papel2)!important;border-top:1px solid var(--linea)}
.rail__sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;align-content:start;padding-top:calc(var(--navh) + 4vh)}
.rail__head{position:relative;max-width:var(--max);width:100%;margin-inline:auto;padding:0 var(--gut);display:flex;justify-content:space-between;align-items:end;gap:20px}
.rail__head h2{max-width:16ch}
.rail__hint{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--acero);display:flex;align-items:center;gap:10px;margin:0 0 8px;white-space:nowrap}
.rail__hint::after{content:"";width:46px;height:1px;background:var(--linea2)}
.rail__track{display:flex;gap:clamp(14px,1.6vw,22px);align-items:center;padding:0 var(--gut);padding-left:max(var(--gut),calc((100vw - var(--max)) / 2 + var(--gut)));will-change:transform}
.rail{--h:clamp(300px,46vh,420px)}
.card{position:relative;flex:0 0 auto;width:clamp(280px,30vw,400px);height:var(--h);background:var(--papel);border:1px solid var(--linea);padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;transition:border-color .3s,transform .4s var(--ease)}
.card:hover{border-color:var(--barro)}
.card .k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--barro);margin:0}
.card__ico{margin-top:auto;margin-bottom:18px;width:clamp(72px,8vw,104px);height:auto}
.card__ico *{fill:none;stroke:var(--abismo);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.card__ico .ac{stroke:var(--barro)}
.card h3{font-size:clamp(19px,1.6vw,23px);margin-bottom:8px}
.card p{margin:0;font-size:14.5px;line-height:1.55;color:var(--texto2)}
/* con imagen: la foto arriba, el icono se esconde, la altura se libera */
/* la imagen no se oculta con display:none porque entonces loading="lazy" nunca la pide */
.card__img{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none;object-fit:cover;margin:0;background:var(--papel2)}
.card.has-img{height:auto;min-height:var(--h);padding-top:0;padding-left:0;padding-right:0}
.card.has-img .card__img{position:static;width:100%;height:auto;aspect-ratio:4/3;opacity:1;margin:0 0 16px}
.card.has-img .card__ico{display:none}
.card.has-img .k{padding:14px clamp(18px,2vw,26px) 0}
.card.has-img h3,.card.has-img p{padding:0 clamp(18px,2vw,26px)}
.card.has-img h3{margin-top:10px}
.card.has-img p:last-child{padding-bottom:clamp(18px,2vw,26px)}

/* ---------- proceso ---------- */
.proc{padding:clamp(70px,9vw,110px) 0;border-top:1px solid var(--linea)}
.proc__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px)}
.proc__aside > div{position:sticky;top:calc(var(--navh) + 8vh)}
.proc__count{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--barro);margin:26px 0 0;display:flex;align-items:baseline;gap:6px}
.proc__count i{font-style:normal;color:var(--acero)}
.proc__rail{position:relative;padding-left:clamp(2rem,4vw,3.2rem)}
.proc__line{position:absolute;left:5px;top:0;bottom:0;width:1px;background:var(--linea)}
.proc__fill{display:block;width:100%;height:0;background:var(--barro)}
.step{position:relative;padding:clamp(22px,3vw,34px) 0;border-top:1px solid var(--linea);opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.step:first-child{border-top:0;padding-top:0}
.step.is-in{opacity:1;transform:none}
.step::before{content:"";position:absolute;left:calc(-1 * clamp(2rem,4vw,3.2rem) + 1px);top:clamp(26px,3vw,38px);width:9px;height:9px;background:var(--papel);border:1.3px solid var(--abismo);transform:rotate(45deg);transition:background .4s,border-color .4s}
.step:first-child::before{top:4px}
.step.is-in::before{background:var(--barro);border-color:var(--barro)}
.step .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--barro);margin:0 0 8px}
.step h4{font-family:var(--util);font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--abismo);margin-bottom:8px}
.step p{font-size:15px;line-height:1.6;color:var(--texto3);margin:0;max-width:52ch}

/* ---------- banda: segundo video a todo lo ancho ---------- */
.band{position:relative;height:clamp(380px,70vh,640px);overflow:hidden;background:#0B0F1C}
.band video,.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,14,28,.7),rgba(10,14,28,.05) 55%)}
.band__text{position:absolute;left:0;right:0;bottom:clamp(28px,5vh,52px);max-width:var(--max);margin-inline:auto;padding:0 var(--gut);color:#fff}
.band__text .eyebrow{color:rgba(255,255,255,.74)}
.band__text .eyebrow::after{background:rgba(255,255,255,.3)}
.band__text p.big{font-family:var(--display);font-weight:500;font-size:clamp(22px,.8rem + 2.4vw,42px);letter-spacing:-.03em;line-height:1.12;max-width:20ch;margin:0}

/* ---------- reglas ---------- */
.rules{padding:clamp(70px,9vw,110px) 0;background-color:#0E1630!important;color:#E9ECF2;border-top:1px solid var(--linea)}
.rules .eyebrow{color:var(--barro)}.rules .eyebrow::after{background:rgba(184,106,75,.4)}
.rules h2{color:#fff}
.rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,88px)}
.rule-list{list-style:none;padding:0;margin:26px 0 0}
.rule-list li{padding:16px 0;border-top:1px solid rgba(136,148,180,.22);color:#B7C0D6;font-size:15.5px}
.rule-list li b{display:block;font-family:var(--util);font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--porcelana);margin-bottom:5px}
.rule-list.no li b{color:var(--barro)}

/* ---------- técnicos ---------- */
.tech{padding:clamp(70px,9vw,110px) 0;border-top:1px solid var(--linea)}
.tech-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linea);border:1px solid var(--linea);margin-top:clamp(34px,5vw,52px)}
.tech-item{background:var(--papel);padding:22px 20px;min-height:170px}
.tech-item b{display:block;font-family:var(--util);font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--abismo);margin-bottom:8px}
.tech-item p{margin:0;font-size:14px;line-height:1.55;color:var(--texto3)}
.tech-fine{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:#5A648C;margin-top:18px;line-height:1.7;max-width:90ch}

/* ---------- negocios ---------- */
.biz{padding:clamp(52px,7vw,76px) 0;background-color:var(--papel2)!important;border-top:1px solid var(--linea)}
.biz-in{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,5vw,60px);align-items:center}
.biz h2{max-width:18ch;font-size:clamp(24px,3.2vw,36px)}
.biz p{color:var(--texto2);max-width:52ch;margin:12px 0 0}

/* ---------- preguntas ---------- */
.faq{padding:clamp(70px,9vw,110px) 0;border-top:1px solid var(--linea)}
.faq__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px)}
.faq__head > div{position:sticky;top:calc(var(--navh) + 8vh)}
.faq-list{border-top:1px solid var(--linea)}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{cursor:pointer;list-style:none;padding:18px 0;display:flex;justify-content:space-between;gap:20px;align-items:center;font-family:var(--display);font-weight:600;font-size:clamp(17px,1.8vw,21px);color:var(--abismo)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-size:18px;color:var(--barro);flex:0 0 auto;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 20px;color:var(--texto2);max-width:70ch;font-size:15.5px}

/* ---------- contacto ---------- */
.cta{background-color:#0E1630!important;color:#E9ECF2!important;padding:clamp(70px,9vw,110px) 0;border-top:1px solid var(--linea)}
.cta .eyebrow{color:var(--barro)}.cta .eyebrow::after{background:rgba(184,106,75,.4)}
.cta h2{color:#fff;max-width:14ch}
.cta .lead{color:#B7C0D6}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px)}
.field{margin-bottom:18px}
label{display:block;font-family:var(--util);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--acero);margin-bottom:7px}
input,select,textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(136,148,180,.38);color:var(--porcelana);font-family:var(--texto);font-size:15.5px;padding:9px 0;border-radius:0;transition:border-color .25s}
select{appearance:none;cursor:pointer}
select option{background:var(--abismo);color:var(--porcelana)}
textarea{resize:vertical;min-height:74px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--barro)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sent{font-family:var(--util);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--barro);margin-top:16px;display:none}
.contact-list{list-style:none;padding:0;margin:30px 0 0}
.contact-list li{padding:14px 0;border-top:1px solid rgba(136,148,180,.2)}
.contact-list span{display:block;font-family:var(--util);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--acero);margin-bottom:4px}
.cta .btn-send{width:100%;padding:15px;background:var(--barro);border-color:var(--barro);color:#fff}
.cta .btn-send:hover{background:#fff;border-color:#fff;color:var(--abismo)}

/* ---------- WhatsApp flotante ---------- */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:70;display:flex;align-items:center;gap:10px;background:#25D366;color:#fff;padding:12px 18px 12px 13px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.35);font-family:var(--util);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .35s,transform .35s var(--ease),box-shadow .2s,background .2s}
.wa-float.is-on{opacity:1;transform:none;pointer-events:auto}
.wa-float svg{width:26px;height:26px;fill:#fff;flex:0 0 auto}
.wa-float:hover{background:#1EBE5A;color:#fff;transform:translateY(-2px);box-shadow:0 16px 36px rgba(0,0,0,.4)}

footer{background-color:#0E1630!important;color:#E9ECF2;padding:52px 0 40px;text-align:center;border-top:1px solid rgba(136,148,180,.16)}
footer img{height:84px;margin:0 auto 10px;opacity:.85;width:auto}
.foot-brand{font-family:var(--util);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--barro);margin:0 0 22px}
.foot-links{display:flex;justify-content:center;flex-wrap:wrap;gap:24px;font-family:var(--util);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--acero)}
.foot-fine{margin-top:22px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:rgba(136,148,180,.55)}

/* ---------- aparición ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal[data-delay="1"]{transition-delay:.12s}
.reveal[data-delay="2"]{transition-delay:.24s}
.reveal.is-in{opacity:1;transform:none}

/* ═══════════ responsive ═══════════ */
@media(max-width:1000px){
  .lines__grid{grid-template-columns:1fr}
  .stage{display:none}
  .svc{opacity:1}
  .svc .art{position:relative;opacity:1;transform:none;margin-bottom:22px;aspect-ratio:3/2}
  .proc__grid{grid-template-columns:1fr}
  .proc__aside > div{position:static}
  .proc__count{display:none}
  .faq__grid{grid-template-columns:1fr;gap:28px}
  .faq__head > div{position:static}
}
@media(max-width:900px){
  .tech-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .rules-grid{grid-template-columns:1fr;gap:50px}
  .biz-in{grid-template-columns:1fr}.biz .btn{display:block;text-align:center}
  .cta-grid{grid-template-columns:1fr;gap:52px}.row2{grid-template-columns:1fr}
}
@media(max-width:760px){
  /* El hero deja de fijarse: video 16:9 en bucle y el texto debajo sobre papel */
  .hero{height:auto;background:var(--papel)}
  .hero__sticky{position:static;height:auto;overflow:visible}
  .hero__media{position:relative;inset:auto;margin-top:var(--navh);background:#0B0F1C}
  .hero__media video{height:auto;aspect-ratio:16/9}
  .hero__scrim,.hero__caps,.hero__cue{display:none}
  .hero__stage{position:static;padding:34px var(--gut) 44px}
  .hero__content{color:var(--abismo);opacity:1!important;transform:none!important;pointer-events:auto!important}
  .hero__content .eyebrow{color:var(--barro)}
  .hero__content .eyebrow::after{background:var(--linea)}
  .hero h1{color:var(--abismo);font-size:clamp(34px,8.6vw,48px)}
  .hero h1 em{color:var(--barro)}
  .hero h1 .line__in{transform:none}
  .hero__sub{color:var(--texto2)}
  .hero__meta{border-top-color:var(--linea);color:var(--tinta)}
  .hero .btn-barro:hover{background:var(--abismo);border-color:var(--abismo);color:#fff}
  .nav{background-color:rgba(243,240,233,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:var(--linea)}
  .nav.nav--over{color:var(--abismo)}
  .nav.nav--over .brand img{filter:none}
  .nav.nav--over .btn{background:var(--abismo);border-color:var(--abismo);color:var(--porcelana)}
  .manifesto{height:210vh}
  /* El riel se vuelve carrusel */
  .rail{height:auto;padding:clamp(56px,10vw,80px) 0}
  .rail__sticky{position:static;height:auto;overflow:visible;padding-top:0;display:block}
  .rail__head{margin-bottom:26px}
  .rail__hint{display:none}
  .rail__track{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:12px;transform:none!important;padding-left:var(--gut)}
  .rail__track::-webkit-scrollbar{height:3px}
  .rail__track::-webkit-scrollbar-thumb{background:var(--linea2)}
  .rail{--h:300px}
  .card{scroll-snap-align:start;width:min(82vw,340px)}
  .band{height:300px}
}
@media(max-width:600px){.tech-grid{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .reveal,.step{opacity:1;transform:none}
  .hero h1 .line__in{transform:none}
  .svc{opacity:1}
  .manifesto{height:auto}
  .manifesto__sticky{position:static;height:auto;padding-block:7rem}
  .manifesto__text .w{color:var(--abismo)}
  .manifesto__coda{opacity:1;transform:none}
  .hero{height:auto;background:var(--papel)}
  .hero__sticky{position:static;height:auto}
  .hero__media{position:relative;inset:auto;margin-top:var(--navh)}
  .hero__media video{height:auto;aspect-ratio:16/9}
  .hero__scrim,.hero__caps,.hero__cue{display:none}
  .hero__stage{position:static;padding:34px var(--gut) 44px}
  .hero__content{color:var(--abismo)}
  .hero__content .eyebrow{color:var(--barro)}
  .hero h1{color:var(--abismo)}.hero h1 em{color:var(--barro)}
  .hero__sub{color:var(--texto2)}
  .hero__meta{border-top-color:var(--linea);color:var(--tinta)}
  .nav{background-color:rgba(243,240,233,.92);border-color:var(--linea)}
  .nav.nav--over{color:var(--abismo)}
  .nav.nav--over .brand img{filter:none}
  .rail{height:auto;padding:5rem 0}
  .rail__sticky{position:static;height:auto;overflow:visible;padding-top:0;display:block}
  .rail__hint{display:none}
  .rail__track{overflow-x:auto;transform:none!important;flex-wrap:wrap}
  .wa-float{opacity:1;transform:none;pointer-events:auto}
}