/* Layout: patio de maniobras de noche — una caja 3D que se abre con el scroll, luego bandas separadas por cinta reflejante,
   tablero de unidades, simulador de tarimas en planta, guía de renta en papel y contacto. Un solo look oscuro, a propósito. */
:root{
  --asfalto:#0d0e0f;      /* fondo */
  --chasis:#16181a;       /* superficies */
  --riel:#24272a;         /* bordes */
  --acero:#9aa1a6;        /* texto secundario */
  --lamina:#eef0f0;       /* texto principal */
  --rojo:#d7192d;         /* rojo Ristar */
  --rojo-hondo:#8f0f1c;
  --papel:#f1ede4;        /* guía de renta */
  --tinta:#1b1b1b;
  --libre:#3fcf73;        /* estado disponible */
  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --stencil:"Saira Stencil One","Big Shoulders Display",Impact,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --gx:max(16px, env(safe-area-inset-left, 0px));
  --gy:max(16px, env(safe-area-inset-right, 0px));
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--asfalto);color:var(--lamina);font-family:var(--body);font-size:16px;line-height:1.55;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--asfalto)}
a{color:inherit}
:focus-visible{outline:2px solid var(--rojo);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding-left:var(--gx);padding-right:var(--gy)}
h1,h2,h3{font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.9;letter-spacing:.005em;text-wrap:balance;margin:0}
.eyebrow{font-family:var(--stencil);font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--rojo)}
.cinta{height:12px;background:repeating-linear-gradient(90deg,var(--rojo) 0 54px,#f3f3f3 54px 108px);box-shadow:0 0 18px rgba(215,25,45,.25)}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-weight:800;font-size:15px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;padding:15px 22px;border:2px solid transparent;cursor:pointer;transition:transform .15s ease, background .2s ease, color .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn-rojo{background:var(--rojo);color:#fff;box-shadow:0 10px 30px -10px rgba(215,25,45,.7)}
.btn-rojo:hover{background:#ec2236}
.btn-linea{border-color:var(--lamina);color:var(--lamina);background:transparent}
.btn-linea:hover{background:var(--lamina);color:var(--asfalto)}
.btn svg{width:20px;height:20px;flex:none}

/* barra de prototipo + nav */
.proto{font-family:var(--mono);font-size:12px;color:var(--asfalto);background:#f2c230;text-align:center;padding-block:6px}
.proto .wrap{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
nav.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(13,14,15,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--riel)}
nav.top .wrap{display:flex;align-items:center;gap:24px;padding-block:10px}
nav.top img{height:34px;width:auto;display:block}
nav.top ul{display:flex;gap:22px;list-style:none;margin:0 0 0 auto;padding:0}
nav.top ul a{text-decoration:none;font-weight:600;font-size:14px;color:var(--acero);letter-spacing:.03em}
nav.top ul a:hover{color:var(--lamina)}
nav.top .btn{padding:10px 16px;font-size:13px}
@media (max-width:860px){nav.top ul{display:none} nav.top .btn{margin-left:auto}}

/* HERO 3D */
#hero{position:relative;height:440vh;background:#2a1820}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
#trailer{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(13,14,15,.82) 0%,rgba(13,14,15,.45) 38%,rgba(13,14,15,0) 62%)}
@media (max-width:760px){.stage::after{background:linear-gradient(0deg,rgba(13,14,15,.92) 0%,rgba(13,14,15,.6) 45%,rgba(13,14,15,0) 70%)}}
.fallback{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.5}
.cap{position:absolute;z-index:2;left:0;right:0;pointer-events:none;transition:opacity .35s ease, transform .35s ease}
.cap .wrap{pointer-events:none}
.cap a,.cap button{pointer-events:auto}
.cap-1{top:16%}
.cap-1 h1{font-size:clamp(54px,8vw,116px);max-width:9ch}
.cap-1 h1 em{font-style:normal;color:var(--rojo);display:block}
.lema{font-family:var(--stencil);font-size:clamp(16px,1.6vw,21px);letter-spacing:.22em;margin:18px 0 6px;color:var(--lamina)}
.cap-1 p.sub{color:var(--acero);max-width:38ch;margin:0 0 26px;font-size:17px}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
.cap-2,.cap-3,.cap-4{bottom:12%}
.cap-2 h2,.cap-3 h2{font-size:clamp(56px,8.4vw,128px)}
.cap-4{top:14%;bottom:auto!important}.cap-4 h2{font-size:clamp(40px,5vw,72px)}.cap-4 p{max-width:30ch!important}
.cap-2 p,.cap-3 p,.cap-4 p{color:var(--acero);max-width:36ch;font-size:18px;margin:10px 0 0}
.cap-4 h2 span{color:var(--rojo)}
.hud{position:absolute;z-index:3;right:var(--gy);bottom:calc(18px + env(safe-area-inset-bottom,0px));font-family:var(--mono);font-size:12px;color:var(--acero);text-align:right;line-height:1.7;letter-spacing:.06em}
.hud b{color:var(--lamina);font-weight:600}
.hud .st{color:var(--rojo)}
.hud .st.abierta{color:var(--libre)}
.scrollcue{position:absolute;z-index:3;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--acero);display:flex;flex-direction:column;align-items:center;gap:8px;transition:opacity .3s}
.scrollcue i{width:2px;height:34px;background:linear-gradient(var(--rojo),transparent);animation:cue 1.6s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(.2);transform-origin:bottom}}
@media (max-width:760px){
  .cap-1{top:auto;bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .cap-1 h1{font-size:clamp(46px,13vw,64px)}
  .cap-1 p.sub{font-size:15px;margin-bottom:18px}
  .cap-2,.cap-3,.cap-4{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .cap-2 h2,.cap-3 h2{font-size:clamp(44px,12vw,60px)}
  .cap-4{top:auto;bottom:calc(70px + env(safe-area-inset-bottom,0px))!important}.cap-4 h2{font-size:clamp(34px,9vw,44px)}
  .hud{display:none}
}

/* bandas */
section.band{padding-block:clamp(72px,10vw,128px)}
.head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px 40px;margin-bottom:44px}
.head h2{font-size:clamp(44px,6.4vw,88px)}
.head p{color:var(--acero);max-width:44ch;margin:0}

/* usos */
.usos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--riel);border-left:1px solid var(--riel)}
.uso{padding:28px 24px 30px;border-right:1px solid var(--riel);border-bottom:1px solid var(--riel);position:relative;min-width:0;transition:background .25s}
.uso:hover{background:var(--chasis)}
.uso .tag{font-family:var(--stencil);font-size:13px;letter-spacing:.16em;color:var(--acero)}
.uso h3{font-size:clamp(32px,3.4vw,40px);margin:56px 0 10px;overflow-wrap:anywhere}
.uso p{color:var(--acero);margin:0;font-size:15px}
.uso svg{position:absolute;top:24px;right:22px;width:38px;height:38px;color:var(--rojo)}
.nota{margin-top:22px;font-family:var(--mono);font-size:13px;color:var(--acero)}
.nota b{color:var(--lamina);font-weight:600}
@media (max-width:900px){.usos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.usos{grid-template-columns:minmax(0,1fr)}.uso h3{margin-top:34px}}

/* tablero */
.tablero-band{background:var(--chasis)}
.grid2{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px;align-items:start}
@media (max-width:900px){.grid2{grid-template-columns:minmax(0,1fr)}}
.board{background:#070808;border:1px solid var(--riel);padding:18px;border-radius:4px;box-shadow:inset 0 0 40px rgba(0,0,0,.8);overflow-x:auto}
.board-top{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--acero);margin-bottom:12px}
.board-top .live{color:#f2c230}
.row{display:flex;gap:18px;padding:7px 0;border-top:1px solid #1a1c1e;white-space:nowrap}
.row.hdr{border-top:0;font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:#5d6468;padding-bottom:4px}
.cell{display:flex;gap:3px}
.cell.c1{width:calc(7 * 21px)} .cell.c2{width:calc(10 * 21px)}
.row.hdr .cell{display:block}
.f{display:inline-grid;place-items:center;width:18px;height:26px;background:linear-gradient(#1b1d1f 49%,#0c0d0e 50%,#151719 51%);color:#f1f1e6;font-family:var(--mono);font-weight:600;font-size:15px;border-radius:2px;box-shadow:0 1px 0 #000}
.f.on{color:var(--libre)} .f.off{color:#ff5a66}
.pros{display:grid;gap:0}

/* ficha técnica: placa de identificación metálica */
.placa{position:relative;background:linear-gradient(135deg,#cfd3d5 0%,#a2a8ac 38%,#d9dcde 58%,#9fa5a9 100%);color:#121416;border-radius:6px;padding:clamp(26px,4vw,44px);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -2px 0 rgba(0,0,0,.25),0 30px 60px -30px rgba(0,0,0,.9)}
.placa::after{content:"";position:absolute;inset:0;border-radius:6px;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 2px,rgba(0,0,0,.03) 2px 4px)}
.rem{position:absolute;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f2f4f5,#7d8387 60%,#4f5458);box-shadow:0 1px 1px rgba(0,0,0,.5)}
.rem.a{top:12px;left:12px}.rem.b{top:12px;right:12px}.rem.c{bottom:12px;left:12px}.rem.d{bottom:12px;right:12px}
.placa-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px 24px;border-bottom:3px solid #121416;padding-bottom:14px;margin-bottom:6px;position:relative;z-index:1}
.placa-top h3{font-size:clamp(30px,4vw,46px);color:#121416}
.placa-top span{font-family:var(--mono);font-size:12px;letter-spacing:.14em}
.specs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative;z-index:1}
.spec{padding:18px 14px 18px 0;border-bottom:1px solid rgba(0,0,0,.28);min-width:0}
.spec small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:#3a3f43;margin-bottom:4px}
.spec b{display:block;font-family:var(--display);font-weight:900;font-size:clamp(24px,2.6vw,34px);line-height:1.05;text-transform:uppercase;overflow-wrap:normal;hyphens:none}
.marcas{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;margin-top:22px}
.marcas small{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:#3a3f43;width:100%}
.marcas span{font-family:var(--stencil);font-size:clamp(17px,1.8vw,22px);letter-spacing:.06em;color:#1b1e21}
@media (max-width:820px){.specs{grid-template-columns:repeat(2,minmax(0,1fr))}.spec b{font-size:20px}}
.pro{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:22px 0;border-top:1px solid var(--riel)}
.pro:first-child{border-top:0;padding-top:0}
.pro .k{font-family:var(--display);font-weight:900;font-size:44px;line-height:1;color:var(--rojo);width:56px}
.pro h3{font-size:28px;margin-bottom:6px}
.pro p{margin:0;color:var(--acero);font-size:15px}

/* simulador */
.sim{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;align-items:start}
@media (max-width:980px){.sim{grid-template-columns:minmax(0,1fr)}}
.trailers{display:grid;gap:26px}
.trl{position:relative;display:flex;align-items:stretch;min-width:0}
.trl .nariz{width:22px;border:3px solid #3a3e42;border-right:0;border-radius:14px 0 0 14px;background:#121416}
.trl .piso{flex:1;min-width:0;display:grid;grid-template-columns:repeat(13,minmax(0,1fr));grid-template-rows:repeat(2,1fr);gap:4px;padding:8px;border:3px solid #3a3e42;border-left-width:2px;background:repeating-linear-gradient(90deg,#1a1408 0 22px,#1e170b 22px 24px);aspect-ratio:13/2.15}
.trl .puertas{width:10px;border:3px solid #3a3e42;border-left:0;background:repeating-linear-gradient(0deg,var(--rojo) 0 10px,#eee 10px 20px)}
.trl .lbl{position:absolute;top:-20px;left:24px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--acero)}
.slot{border:1px dashed #3a3328;border-radius:2px;position:relative}
.tarima{position:absolute;inset:0;border-radius:2px;background:
  repeating-linear-gradient(90deg,#b98a55 0 22%,#8d6438 22% 26%),#b98a55;box-shadow:inset 0 0 0 2px rgba(0,0,0,.25);
  transform:translateY(-40px) scale(1.15);opacity:0;transition:transform .35s cubic-bezier(.2,1.4,.4,1), opacity .2s}
.slot.lleno .tarima{transform:none;opacity:1}
.panel{background:var(--chasis);border:1px solid var(--riel);padding:26px}
.panel label{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--acero);display:block;margin-bottom:10px}
input[type=range]{width:100%;accent-color:var(--rojo);height:30px}
.presets{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 24px}
.chip{font-family:var(--body);font-size:13px;font-weight:600;background:transparent;border:1px solid #3a3e42;color:var(--lamina);padding:8px 12px;cursor:pointer;border-radius:999px}
.chip:hover,.chip[aria-pressed=true]{border-color:var(--rojo);background:rgba(215,25,45,.12)}
.lect{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:22px}
.lect div{border-top:2px solid var(--riel);padding-top:10px}
.lect b{display:block;font-family:var(--display);font-size:46px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.lect span{font-family:var(--mono);font-size:11px;color:var(--acero);letter-spacing:.08em}
.panel .btn{width:100%;justify-content:center}
.ref{font-family:var(--mono);font-size:12px;color:var(--acero);margin-top:18px;line-height:1.6}

/* galeria */
.gal{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;scrollbar-color:var(--rojo) var(--chasis)}
.gal figure{margin:0;flex:0 0 min(320px,78vw);scroll-snap-align:start;position:relative;background:var(--chasis)}
.gal img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.9) contrast(1.05)}
.gal figcaption{position:absolute;left:0;bottom:0;background:var(--asfalto);font-family:var(--stencil);letter-spacing:.14em;font-size:13px;padding:8px 12px}

/* guia de renta */
.cot-band{background:linear-gradient(180deg,var(--asfalto),#140a0b)}
.guia{position:relative;overflow:hidden;max-width:820px;margin:0 auto;background:var(--papel);color:var(--tinta);padding:36px clamp(20px,4vw,48px) 40px;box-shadow:0 30px 80px -20px rgba(0,0,0,.8);
  -webkit-mask:radial-gradient(circle 7px at 50% 0,transparent 98%,#000) 0 0/22px 100% repeat-x;mask:radial-gradient(circle 7px at 50% 0,transparent 98%,#000) 0 0/22px 100% repeat-x}
.guia::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 31px,rgba(0,0,0,.035) 31px 32px)}
.g-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;border-bottom:3px solid var(--tinta);padding-bottom:14px;margin-bottom:22px}
.g-top h2{font-size:clamp(38px,5vw,56px);color:var(--tinta)}
.g-top .meta{font-family:var(--mono);font-size:12px;line-height:1.8;text-align:right}
.g-top .meta b{font-weight:600}
.campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px;position:relative;z-index:1}
.campos .full{grid-column:1/-1}
@media (max-width:600px){.campos{grid-template-columns:1fr}.g-top .meta{text-align:left}}
.campo label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#5b574f;margin-bottom:4px}
.campo input,.campo select,.campo textarea{width:100%;font:500 17px var(--body);color:var(--tinta);background:transparent;border:0;border-bottom:2px solid #2a2a2a;padding:8px 2px;border-radius:0;color-scheme:light}
.campo textarea{resize:vertical;min-height:70px}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-bottom-color:var(--rojo);background:rgba(215,25,45,.05)}
.campo.err input{border-bottom-color:var(--rojo)}
.campo .msg{font-size:13px;color:var(--rojo);min-height:0;margin-top:4px}
.g-pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:30px;position:relative;z-index:1}
.g-pie small{font-family:var(--mono);font-size:12px;color:#5b574f;max-width:40ch}
.sello{position:absolute;right:8%;top:38%;z-index:2;font-family:var(--stencil);font-size:clamp(26px,4vw,40px);color:var(--rojo);border:4px solid var(--rojo);padding:6px 16px;letter-spacing:.08em;transform:rotate(-12deg) scale(2.4);opacity:0;pointer-events:none;mix-blend-mode:multiply}
.sello.on{animation:sello .45s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes sello{to{transform:rotate(-12deg) scale(1);opacity:.9}}

/* contacto */
.contacto{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--riel)}
.contacto > div{padding:28px;border-right:1px solid var(--riel);min-width:0}
.contacto > div:last-child{border-right:0}
.contacto h3{font-size:26px;margin:14px 0 8px}
.contacto p{margin:0 0 14px;color:var(--acero);overflow-wrap:anywhere}
.contacto .big{font-family:var(--display);font-weight:900;font-size:42px;color:var(--lamina);line-height:1;margin-bottom:14px;user-select:all}
.linkx{font-weight:700;color:var(--lamina);text-decoration:none;border-bottom:2px solid var(--rojo);padding-bottom:2px;background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;font-family:var(--body);font-size:15px}
@media (max-width:860px){.contacto{grid-template-columns:1fr}.contacto > div{border-right:0;border-bottom:1px solid var(--riel)}.contacto > div:last-child{border-bottom:0}}

footer{border-top:1px solid var(--riel);padding-block:48px calc(48px + env(safe-area-inset-bottom,0px))}
footer .wrap{display:flex;flex-wrap:wrap;gap:24px 48px;align-items:center;justify-content:space-between}
footer img{height:54px;width:auto}
footer .lema2{font-family:var(--display);font-weight:900;font-size:clamp(30px,4vw,48px);text-transform:uppercase;line-height:1}
footer .lema2 span{color:var(--rojo)}
footer small{display:block;font-family:var(--mono);font-size:12px;color:var(--acero);line-height:1.8}

/* flotante */
.wa{position:fixed;z-index:55;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));width:62px;height:62px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(0,0,0,.7);transition:transform .2s}
.wa:hover{transform:scale(1.08)}
.wa svg{width:32px;height:32px}
.wa::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid #25d366;opacity:.6;animation:ping 2.4s ease-out infinite}
@keyframes ping{from{transform:scale(.85);opacity:.7}to{transform:scale(1.35);opacity:0}}

@media (max-width:600px){.f{width:13px;height:21px;font-size:12px}.cell.c1{width:calc(7 * 15px)}.cell.c2{width:calc(10 * 15px)}.row{gap:10px}.board{padding:12px}.lect b{font-size:36px}}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}