/* Baqueano landing. Un solo tema (Noche), un solo acento (ocre).
   Radios: hojas 28px, tarjetas 16px, controles en pildora. z-index: nav 50, toast 60. */
:root{
  --bg:#15110D; --bg2:#1D1813; --bg3:#28211A; --line:#3B3226;
  --tx:#F2E9DB; --tx2:#BDAF98; --tx3:#968A76;
  --ocre:#D6A23A; --on-ocre:#1A1208;
  --r-card:16px; --r-sheet:28px;
  --gut:clamp(1.25rem,5vw,4.5rem);
  --ease:cubic-bezier(.23,1,.32,1);
  --display:"Big Shoulders Display","Arial Narrow",sans-serif;
  --sans:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--tx);font:400 1.0625rem/1.6 var(--sans);overflow-x:clip}
img{display:block;max-width:100%;height:auto;background:var(--bg3)}
a{color:inherit}
ul,ol{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--ocre);outline-offset:3px;border-radius:6px}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:.98;letter-spacing:.005em}
h2{font-size:clamp(2.3rem,5.4vw,4.8rem);text-wrap:balance}
h3{font-size:clamp(1.5rem,2.4vw,2.1rem)}
.w,.sw{display:inline-block}

/* botones: pildora */
.btn{display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap;background:var(--ocre);color:var(--on-ocre);
  font:600 1rem/1 var(--sans);padding:1rem 1.6rem;border-radius:999px;text-decoration:none;border:1px solid transparent;
  transition:transform .16s var(--ease),background-color .2s ease}
.btn i{font-size:1.25em}
.btn:active{transform:scale(.97)}
.btn--sm{padding:.7rem 1.15rem;font-size:.92rem}
.btn--lg{padding:1.2rem 2rem;font-size:1.1rem}
.btn--ghost{background:rgba(21,17,13,.4);color:var(--tx);border-color:rgba(242,233,219,.5);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:#E4B24D}
  .btn--ghost:hover{background:rgba(242,233,219,.16)}
}

/* menu flotante */
.nav{position:fixed;top:14px;left:50%;translate:-50% 0;z-index:50;width:min(1120px,calc(100% - 28px));height:60px;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 8px 0 18px;border-radius:999px;
  background:rgba(29,24,19,.55);border:1px solid rgba(242,233,219,.14);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);transition:background-color .3s ease}
.nav.is-solid{background:rgba(21,17,13,.92)}
.nav__brand{display:flex;align-items:center;gap:.65rem;font:800 1.5rem/1 var(--display);letter-spacing:.07em;text-decoration:none}
.nav__brand img{width:auto;height:36px;background:none}
.nav__links{display:flex;gap:1.75rem;font-size:.95rem;color:var(--tx2)}
.nav__links a{text-decoration:none;transition:color .2s}
@media (hover:hover){.nav__links a:hover{color:var(--tx)}}
@media (max-width:900px){.nav__links{display:none}}
@media (max-width:520px){.nav .hide-sm{display:none}}

/* portada */
.hero{position:relative;min-height:100dvh;display:grid;align-items:end;overflow:clip;isolation:isolate;background:var(--bg3)}
.hero__media{position:absolute;inset:-6% 0;z-index:-2}
.hero__img{width:100%;height:100%;object-fit:cover;animation:drift 30s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.11) translate3d(-1.2%,.8%,0)}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(21,17,13,.96) 0%,rgba(21,17,13,.74) 42%,rgba(21,17,13,.42) 100%),
             linear-gradient(to right,rgba(21,17,13,.55),rgba(21,17,13,0) 70%)}
@media (max-width:760px){.hero::after{background:linear-gradient(to top,rgba(21,17,13,.97) 0%,rgba(21,17,13,.86) 55%,rgba(21,17,13,.68) 100%)}}
.hero h1,.hero__sub,.hero__radio span{text-shadow:0 2px 3px rgba(0,0,0,.55),0 4px 28px rgba(0,0,0,.65)}
.hero__body{width:100%;max-width:1500px;margin-inline:auto;padding:100px var(--gut) clamp(2.5rem,8vh,5.5rem)}
.hero__logo{width:auto;height:clamp(54px,6.5vw,80px);margin-bottom:.9rem;background:none;filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))}
.hero h1{font-size:clamp(2.7rem,6.6vw,6.4rem);max-width:10.5em;text-wrap:balance}
.js .hero h1 .w{opacity:0}
.hero h1 .w:last-child{color:var(--ocre)}
.hero__sub{margin-top:1.1rem;max-width:40rem;font-size:clamp(1.05rem,1.55vw,1.3rem);line-height:1.4}
.hero__feats{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem;max-width:46rem}
.hero__feats li{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .95rem;border-radius:999px;font-size:.92rem;font-weight:500;line-height:1;
  background:rgba(21,17,13,.82);border:1px solid rgba(242,233,219,.34);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero__feats i{font-size:1.15rem;color:var(--ocre)}
.hero__radio{display:flex;align-items:flex-start;gap:.6rem;margin-top:.9rem;max-width:40rem;font-size:.98rem;line-height:1.4}
.hero__radio i{font-size:1.3rem;color:var(--ocre);margin-top:.05rem}
.hero__radio em{align-self:center;flex-shrink:0;font:500 .66rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ocre);
  padding:.35rem .6rem;border:1px solid rgba(214,162,58,.6);border-radius:999px;font-style:normal}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}

/* el problema */
.stmt{padding:clamp(6rem,16vh,11rem) var(--gut) clamp(4rem,10vh,8rem);background:var(--bg)}
.stmt__a{max-width:21em;font:500 clamp(1.9rem,4.4vw,3.8rem)/1.14 var(--sans);text-wrap:pretty}
.js .stmt__a .sw{opacity:.2}
.stmt__b{margin-top:clamp(1.5rem,4vw,3rem);font:800 clamp(3rem,9vw,8rem)/.92 var(--display);color:var(--ocre)}

/* la historia: escenario fijo */
.story{position:relative;z-index:3}
.story__pin{position:relative;height:100dvh;overflow:hidden;isolation:isolate;background:var(--bg3)}
.story__bg{position:absolute;inset:0;z-index:-2}
.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform,opacity}
.story__veil{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(21,17,13,.93),rgba(21,17,13,.3) 58%,rgba(21,17,13,.5)),
             linear-gradient(to right,rgba(21,17,13,.66),transparent 62%)}
.story__txt{position:absolute;left:var(--gut);bottom:clamp(3rem,10vh,6.5rem);width:min(34vw,500px);display:grid}
.ch{grid-area:1/1}
.ch h2{font-size:clamp(2.3rem,4.8vw,4.4rem)}
.ch p{margin-top:1rem;font-size:clamp(1.02rem,1.45vw,1.22rem);max-width:30rem}
.story__progress{position:absolute;left:50%;bottom:24px;translate:-50% 0;display:flex;gap:8px}
.story__progress i{display:block;width:30px;height:3px;border-radius:2px;background:rgba(242,233,219,.3);transition:background-color .3s ease}
.story__progress i.on{background:var(--ocre)}
.js .ch:not(:first-child){opacity:0;visibility:hidden}
.js .bg:not(:first-child){opacity:0;visibility:hidden}

/* pantalla de la app (se escala con su ancho) */
.ui{position:absolute;container-type:inline-size;right:var(--gut);top:50%;transform:translateY(-50%);
  width:min(53vw,900px);aspect-ratio:16/9;display:grid;grid-template-columns:17% 1fr;overflow:hidden;
  background:#15110D;border:8px solid #0B0907;border-radius:22px;box-shadow:0 40px 90px rgba(0,0,0,.55)}
.ui i,.ui b,.ui span,.ui em{font-style:normal}
.ui__side{display:grid;grid-template-rows:auto 1fr 1fr 1fr;gap:1.5cqw;padding:1.7cqw;background:#15110D}
.ui__link{display:grid;gap:.7cqw;font:800 1.9cqw/1 var(--display);letter-spacing:.08em;color:#BDAF98}
.ui__ruler{display:block;height:2.4cqw;background:repeating-linear-gradient(90deg,#968A76 0 .22cqw,transparent .22cqw 1.15cqw);
  mask:linear-gradient(to bottom,transparent 35%,#000 35%);-webkit-mask:linear-gradient(to bottom,transparent 35%,#000 35%);position:relative}
.ui__ruler::after{content:"";position:absolute;left:18%;top:0;width:.7cqw;height:100%;background:#D6A23A;border-radius:.3cqw;animation:marker 2.6s ease-in-out infinite alternate}
@keyframes marker{to{left:34%}}
.ui__btn{display:grid;align-content:center;justify-items:center;gap:.4cqw;border-radius:1.4cqw;font:800 2.35cqw/1 var(--display);letter-spacing:.02em}
.ui__btn i{font-size:3.4cqw;line-height:1}
.ui__btn--p{background:#D6A23A;color:#1A1208}
.ui__btn--a{background:#5CC8D6;color:#12190F}
.ui__btn--e{background:#6B2020;color:#F2E9DB}
.ui__map{position:relative;background:#ECE4D3;overflow:hidden}
.ui__map::before{content:"";position:absolute;inset:-4%;background:url(../assets/topo-dia.svg) center/cover;opacity:.6}
.ui__map svg{position:absolute;inset:0;width:100%;height:100%}
.rider .dot{stroke:#ECE4D3;stroke-width:4}
.rider[data-n="0"] .dot{fill:#84550A}
.rider[data-n="1"] .dot{fill:#436640}
.rider[data-n="2"] .dot{fill:#0B6F82}
.rider[data-n="3"] .dot{fill:#5B4E3A}
.rider .halo{fill:#B3261E;opacity:0;transform-box:fill-box;transform-origin:center;animation:halo 1.6s ease-out infinite}
.rider .ini{font:800 20px var(--display);fill:#F2E9DB;text-anchor:middle}
.rider .nm{paint-order:stroke;stroke:#ECE4D3;stroke-width:6px;stroke-linejoin:round;font:600 22px var(--sans);fill:#231B10}
.rider .rd{font:500 19px var(--sans);fill:#5B4E3A}
.flow{fill:none;stroke:#ECE4D3;stroke-width:3;stroke-dasharray:2 16;stroke-linecap:round;animation:flow 1.1s linear infinite}
@keyframes flow{to{stroke-dashoffset:-18}}
@keyframes halo{0%{transform:scale(.6);opacity:.55}100%{transform:scale(1.7);opacity:0}}
.ui__turn,.ui__toast,.ui__chat{position:absolute;opacity:0;visibility:hidden}
.ui__turn{left:3cqw;right:3cqw;top:2.4cqw;display:flex;align-items:center;gap:2cqw;padding:1.6cqw 2.2cqw;border-radius:1.6cqw;background:#1D1813;color:#F2E9DB}
.ui__turn i{font-size:5cqw;color:#5CC8D6}
.ui__turn b{display:block;font:800 4.4cqw/1 var(--display)}
.ui__turn span{font:500 2cqw/1.2 var(--sans);color:#BDAF98}
.ui__toast{left:50%;bottom:3cqw;translate:-50% 0;display:flex;align-items:center;gap:1cqw;padding:1.1cqw 2.2cqw;border-radius:999px;
  background:#1D1813;color:#FF8A8D;font:600 2.3cqw/1 var(--sans);white-space:nowrap}
.ui__toast i{font-size:2.8cqw}
.ui__chat{left:3cqw;bottom:3cqw;display:grid;gap:.5cqw;padding:1.4cqw 2.2cqw;border-radius:1.4cqw;background:#1D1813;color:#F2E9DB;font:500 2.2cqw/1.2 var(--sans)}
.ui__chat em{font:800 2cqw/1 var(--display);letter-spacing:.06em;color:#FF4D4F}
.ui__off{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:1.2cqw;text-align:center;
  background:#27272B;color:#E6E6E9;opacity:0;visibility:hidden}
.ui__off i{font-size:9cqw;line-height:1;color:#9A9AA2}
.ui__off b{font:600 4.4cqw/1.1 var(--sans)}
.ui__off span{font:400 2.5cqw/1.3 var(--sans);color:#9A9AA2}
.ui__alert{position:absolute;inset:0;display:grid;grid-template-columns:34% 1fr;align-items:center;gap:3cqw;padding:3cqw 5cqw;background:#000;color:#FF4D4F;opacity:0;visibility:hidden}
.alert__ring{position:relative;aspect-ratio:1;width:100%}
.alert__ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.alert__ring circle{fill:none;stroke-width:5}
.alert__ring .r0{stroke:#3A1416}
.alert__ring .r1{stroke:#FF4D4F;stroke-dasharray:100;stroke-dashoffset:0;stroke-linecap:round}
.alert__n{position:absolute;inset:0;display:grid;place-items:center;font:800 11cqw/1 var(--display)}
.alert__txt{display:grid}
.alert__a,.alert__b{grid-area:1/1}
.alert__b{opacity:0;color:#34C759}
.alert__txt h4{font-size:6.6cqw}
.alert__txt p{margin-top:1.2cqw;font:400 2.5cqw/1.3 var(--sans);color:#FF9B93}
.alert__b p{color:#9BE3AE}
.alert__ok{display:inline-block;margin-top:2.2cqw;padding:1.4cqw 3.4cqw;border-radius:999px;background:#34C759;color:#000;font:800 3cqw/1 var(--display)}

/* para todos */
.todos{position:relative;z-index:3;min-height:100dvh;display:grid;align-content:space-between;gap:3rem;overflow:clip;isolation:isolate;
  padding:clamp(6rem,14vh,9rem) 0 clamp(5rem,12vh,8rem);background:var(--bg3)}
.todos__bg{position:absolute;inset:0;z-index:-2}
.todos__img{position:absolute;inset:-12% 0;width:100%;height:124%;object-fit:cover;max-width:none}
.todos::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(21,17,13,.88),rgba(21,17,13,.55) 45%,rgba(21,17,13,.88))}
.todos__in{padding:0 var(--gut)}
.todos h2{font-size:clamp(2.8rem,8vw,7.6rem);max-width:9em;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.js .todos h2 .sw{opacity:.2}
.marq{overflow:hidden;white-space:nowrap}
.marq__t{display:inline-flex;gap:3.5rem;padding-left:3.5rem;font:800 clamp(3.4rem,10vw,9rem)/1 var(--display);text-transform:uppercase;animation:marq 42s linear infinite}
.marq__t .o{color:transparent;-webkit-text-stroke:2px var(--tx)}
@keyframes marq{to{transform:translateX(-50%)}}

/* hojas */
.sheet{position:relative;z-index:4;margin-top:-28px;background:var(--bg2);border-radius:var(--r-sheet) var(--r-sheet) 0 0;
  padding:clamp(4.5rem,10vw,8rem) var(--gut);box-shadow:0 -22px 50px rgba(0,0,0,.4)}
.sheet__in{max-width:1300px;margin-inline:auto}
.js .rv{opacity:0;transform:translateY(24px)}

/* como funciona */
.pasos{position:relative;display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:clamp(1.5rem,4vw,4rem);margin-top:clamp(2.5rem,6vw,5rem)}
.pasos__line{position:absolute;left:0;right:0;top:26px;height:1px;background:var(--ocre);transform-origin:left}
.pasos li{position:relative;padding-top:76px}
.pasos li i{position:absolute;top:0;left:0;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
  background:var(--bg2);border:1px solid var(--ocre);color:var(--ocre);font-size:1.6rem}
.pasos p{margin-top:.6rem;color:var(--tx2);max-width:24rem}
@media (max-width:760px){
  .pasos{grid-template-columns:1fr;gap:2.25rem}
  .pasos__line{left:26px;right:auto;top:0;bottom:0;width:1px;height:auto;transform-origin:top}
  .pasos li{padding:0 0 0 76px}
}

/* que incluye: grilla con ritmo (7/5, 4/4/4, 12) */
.incluye{background:var(--bg2)}
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem;margin-top:clamp(2rem,5vw,3.5rem)}
.b{padding:clamp(1.4rem,2.6vw,2.2rem);border-radius:var(--r-card);background:var(--bg3);border:1px solid var(--line);display:grid;align-content:start;gap:.5rem}
.b i{font-size:2rem;color:var(--ocre);line-height:1;margin-bottom:.6rem}
.b p{color:var(--tx2);max-width:34rem}
.b--map{grid-column:span 7;background:#2C2314;border-color:rgba(214,162,58,.35);min-height:15rem}
.b--ruta{grid-column:span 5}
.b--gps,.b--chat,.b--caida{grid-column:span 4}
.b--chat{background:var(--bg);border-color:var(--line)}
.b--emer{grid-column:span 12;grid-template-columns:auto 1fr;gap:1.5rem;align-items:center;background:#2B1514;border-color:rgba(255,77,79,.35)}
.b--emer i{font-size:3rem;color:#FF6B6E;margin:0}
.b--emer h3{font-size:clamp(1.8rem,3.4vw,2.8rem)}
@media (max-width:860px){
  .bento{grid-template-columns:1fr}
  .b,.b--map,.b--ruta,.b--gps,.b--chat,.b--caida,.b--emer{grid-column:auto}
}

/* en camino */
.camino{background:var(--bg)}
.lista{display:grid;gap:2rem;margin-top:clamp(2rem,5vw,3.5rem);max-width:46rem}
.lista li{display:grid;grid-template-columns:auto 1fr;gap:1.25rem;align-items:start}
.lista li>i{font-size:2.2rem;color:var(--ocre);line-height:1}
.lista h3{font-size:1.8rem}
.lista p{margin-top:.25rem;color:var(--tx2)}

/* cierre */
.cierre{position:relative;z-index:4;margin-top:-28px;background:var(--bg3);border-radius:var(--r-sheet) var(--r-sheet) 0 0;
  padding:clamp(5rem,14vw,10rem) var(--gut) 2rem}
.cierre__logo{width:auto;height:64px;margin-bottom:2rem;background:none}
.cierre h2{font-size:clamp(2.6rem,7vw,6.4rem);max-width:12em;margin-bottom:2.5rem}
.cierre footer{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:clamp(4rem,10vw,8rem)}
.cierre small{font:400 .75rem/1.4 var(--mono);color:var(--tx3)}
.cierre .ia{font-size:.625rem}

/* aviso */
.toast{position:fixed;left:50%;bottom:24px;translate:-50% 0;z-index:60;max-width:calc(100% - 32px);padding:.85rem 1.3rem;border-radius:999px;
  background:var(--tx);color:var(--bg);font:500 .92rem/1.3 var(--sans);opacity:0;transform:translateY(10px);
  transition:opacity .25s ease,transform .35s var(--ease);pointer-events:none}
.toast.on{opacity:1;transform:none}

/* celular: la pantalla va arriba, el texto abajo */
@media (max-width:900px){
  .ui{right:auto;left:50%;top:88px;width:min(92vw,560px);transform:translateX(-50%)}
  .story__txt{width:calc(100% - 2 * var(--gut));bottom:clamp(2.5rem,7vh,4.5rem)}
  .ch h2{font-size:clamp(2.1rem,9vw,3rem)}
}

/* Movimiento reducido: la animación ambiente sigue pero más lenta y de menor recorrido. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero__img{animation-duration:70s}
  .marq__t{animation-duration:80s}
  .flow{animation-duration:2.4s}
}


/* capacidades: cuatro pilares */
.lead{margin-top:1.25rem;max-width:44rem;color:var(--tx2);font-size:1.15rem}
.pilares{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:clamp(2rem,5vw,3.5rem)}
.pilar{display:flex;flex-direction:column;gap:.9rem;padding:clamp(1.4rem,2vw,2rem);border:1px solid var(--line);border-radius:var(--r-card);background:var(--bg3)}
.pilar>i{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid var(--ocre);color:var(--ocre);font-size:1.6rem}
.pilar>p{color:var(--tx2);font-size:1rem;line-height:1.55}
.pilar ul{display:grid;gap:.55rem;margin-top:auto;padding-top:1rem;border-top:1px solid var(--line);font-size:.95rem;color:var(--tx)}
.pilar ul li{position:relative;padding-left:1.35rem;line-height:1.4}
.pilar ul li::before{content:"";position:absolute;left:0;top:.5em;width:.5rem;height:.5rem;border-radius:50%;background:var(--ocre)}
@media (max-width:1100px){.pilares{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.pilares{grid-template-columns:1fr}}

/* usos: empresas y grupos */
.usos{background:var(--bg2)}
.usos__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem);margin-top:clamp(2rem,5vw,3.5rem)}
.uso{padding-top:1.5rem;border-top:2px solid var(--ocre)}
.uso>p{margin-top:.8rem;color:var(--tx2);max-width:30rem}
.uso ul{display:grid;gap:1.1rem;margin-top:1.6rem}
.uso li{padding-bottom:1.1rem;border-bottom:1px solid var(--line);color:var(--tx2);line-height:1.5}
.uso li b{display:block;color:var(--tx);font-weight:600;margin-bottom:.2rem}
@media (max-width:760px){.usos__cols{grid-template-columns:1fr}}


/* nota discreta bajo "como funciona" */
.nota{display:grid;gap:.6rem;max-width:44rem;margin-top:clamp(2.5rem,6vw,4.5rem);padding-left:1.1rem;border-left:2px solid var(--ocre)}
.nota p{color:var(--tx2);font-size:1rem;line-height:1.55}
.nota p+p{color:var(--tx3);font-size:.9rem}
.nota sup{color:var(--ocre);margin-right:.15rem}