:root{
  --navy:#1d343f; --navy-2:#162b35; --navy-3:#0f2029;
  --yellow:#ebc21a; --yellow-2:#f7d84a;
  --ink:#1d343f; --muted:#5d6d75; --line:#e2e7ea; --soft:#f3f5f6; --bg:#fff;
  --danger:#d9363e; --ok:#1f9d55;
  --radius:18px;
  /* Tokens de color */
  --surface:#fff; --field:#fff; --text-2:#3e525b; --ink-strong:#1a1f24; --line-2:#c5ced3; --zebra:#fafbfb;
  --warn-bg:#fffaea; --ok-bg:#f1fbf5; --accent-text:#a8880b; --who-y:#7a6308; --sh:29,52,63;
  --glass:rgba(255,255,255,.78); --gridc:rgba(29,52,63,.06); --dotc:rgba(29,52,63,.12);
  --btn:var(--navy); --btn-ink:#fff; --sec:var(--navy); --oncard:#fff; --oncard-ink:var(--navy); --oncard-text:#2c4652;
  --tile:var(--navy); --tile-ink:#fff; --sel-bg:var(--navy); --sel-ink:var(--yellow); --ctl:var(--navy); --you-bg:var(--navy);
  color-scheme:light;
  --wide:125%;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;overflow-x:clip}
body{font-family:Archivo,system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
@media (max-width:560px){.wrap{padding:0 16px}}
.wide{font-stretch:var(--wide)}

/* ---------- Header ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:40;transition:background .3s,box-shadow .3s,backdrop-filter .3s}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:78px}
.nav.scrolled{background:var(--glass);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 1px 0 var(--line)}
.nav img{height:34px;width:auto}
@media (max-width:560px){.nav img{height:22px}.nav .wrap{height:62px;gap:10px}}
.pill{position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:999px;font:800 13px Archivo,sans-serif;font-stretch:var(--wide);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink);background:var(--surface);isolation:isolate}
.pill::before{content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-2;background:conic-gradient(from var(--a,0deg),var(--yellow),#fff3b0,var(--yellow) 30%,var(--yellow) 70%,#fff3b0,var(--yellow));animation:spin 4s linear infinite}
.pill::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--surface);z-index:-1}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 0 rgba(235,194,26,.7);animation:ping 1.8s infinite}
.pill{white-space:nowrap}
@media (max-width:560px){.pill{padding:8px 12px;font-size:9.5px;letter-spacing:.1em;gap:6px}}
@media (max-width:360px){.pill .dot{display:none}}
@property --a{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes spin{to{--a:360deg}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(235,194,26,.7)}80%,100%{box-shadow:0 0 0 9px rgba(235,194,26,0)}}

/* ---------- Hero ---------- */
.hero{position:relative;padding:150px 0 70px;overflow:hidden}
.hero .grid{position:absolute;inset:0;background-image:linear-gradient(var(--gridc) 1px,transparent 1px),linear-gradient(90deg,var(--gridc) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 70% 60% at 70% 30%,#000 10%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 70% 30%,#000 10%,transparent 75%);animation:gridmove 22s linear infinite;pointer-events:none}
@keyframes gridmove{to{background-position:56px 56px,56px 56px}}
.hero .orb{position:absolute;width:520px;height:520px;border-radius:50%;right:-140px;top:40px;background:radial-gradient(circle,rgba(235,194,26,.32),rgba(235,194,26,0) 65%);filter:blur(10px);animation:float 12s ease-in-out infinite;pointer-events:none}
@keyframes float{50%{transform:translate(-60px,40px) scale(1.08)}}
.hero h1{position:relative;margin:0;font-weight:900;font-stretch:var(--wide);line-height:.92;letter-spacing:-.02em;font-size:clamp(44px,9.2vw,118px);text-transform:uppercase}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.04em}
.hero h1 .line > span{display:inline-block;transform:translateY(105%);animation:rise 1s cubic-bezier(.2,.8,.2,1) forwards}
.hero h1 .l2 > span{animation-delay:.18s;color:var(--yellow);background:linear-gradient(100deg,var(--yellow) 0%,var(--yellow) 40%,#fff6c4 50%,var(--yellow) 60%,var(--yellow) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:rise 1s .18s cubic-bezier(.2,.8,.2,1) forwards,shine 5s 1.4s ease-in-out infinite}
@keyframes rise{to{transform:none}}
@keyframes shine{0%{background-position:100% 0}60%,100%{background-position:-50% 0}}
.tagline{position:relative;margin:26px 0 34px;font-size:clamp(15px,1.8vw,21px);font-weight:300;letter-spacing:.24em;color:var(--muted);opacity:0;animation:fadeup .8s .6s forwards}
@media (max-width:560px){.tagline{letter-spacing:.1em}}
.ctas{position:relative;display:flex;gap:12px;flex-wrap:wrap;opacity:0;animation:fadeup .8s .8s forwards}
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.btn{appearance:none;border:0;border-radius:999px;padding:17px 30px;font:800 15px Archivo,sans-serif;font-stretch:var(--wide);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:12px;text-decoration:none;position:relative;overflow:hidden;transition:transform .2s,box-shadow .3s,background .2s}
.btn .arr{transition:transform .25s}
.btn:hover .arr{transform:translateX(5px)}
.btn:active{transform:scale(.98)}
.btn-navy{background:var(--btn);color:var(--btn-ink);box-shadow:0 10px 30px -10px rgba(var(--sh),.6)}
.btn-navy::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);transform:translateX(-100%);transition:transform .7s}
.btn-navy:hover::after{transform:translateX(100%)}
.btn-navy:hover{box-shadow:0 14px 40px -10px rgba(var(--sh),.7),0 0 0 4px rgba(235,194,26,.35)}
.btn-yellow{background:var(--yellow);color:var(--navy);box-shadow:0 10px 30px -10px rgba(235,194,26,.8)}
.btn-yellow:hover{box-shadow:0 14px 44px -8px rgba(235,194,26,.95)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-sm{padding:12px 18px;font-size:12px}
@media (max-width:560px){.btn{padding:15px 22px;font-size:13px}}

/* Fotos tipo cámara */
.shots{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:64px}
@media (max-width:700px){.shots{grid-template-columns:1fr;gap:14px}}
.shot{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:16/10;background:var(--navy);box-shadow:0 20px 50px -24px rgba(var(--sh),.55);transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0));transition:transform .25s ease-out,box-shadow .3s}
.shot:hover{box-shadow:0 26px 60px -20px rgba(var(--sh),.65)}
/* Estudio virtual: pared azul con marcas amarillas (como el estudio CDECAR) y piso */
.stage{position:absolute;inset:0;background:
  radial-gradient(60% 50% at 50% 38%,rgba(255,255,255,.16),transparent 70%),
  linear-gradient(180deg,#34507a 0%,#2c466c 62%,#1b2c45 62.2%,#cfd5d9 62.4%,#e9ecee 100%)}
.stage::before{content:"";position:absolute;inset:0 0 37.6% 0;background-image:linear-gradient(rgba(0,0,0,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.1) 1px,transparent 1px);background-size:100% 18px,46px 18px;opacity:.6}
.stage::after{content:"";position:absolute;left:17%;right:17%;bottom:9%;height:10%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);filter:blur(4px)}
.stage i{position:absolute;height:6%;width:13%;background:var(--yellow);border-radius:2px;box-shadow:0 0 14px rgba(235,194,26,.35)}
.stage .t1{left:6%;top:16%;transform:rotate(-58deg)}
.stage .t2{left:24%;top:22%;transform:rotate(-30deg)}
.stage .t3{left:43%;top:10%;transform:rotate(55deg)}
.stage .t4{left:61%;top:24%}
.stage .t5{left:80%;top:14%;transform:rotate(70deg)}
.shot .car{position:absolute;left:15%;width:70%;bottom:11%;height:auto;filter:drop-shadow(0 18px 18px rgba(0,0,0,.35));transform-origin:50% 100%;transition:transform .8s cubic-bezier(.2,.8,.2,1);animation:carin 1.2s .3s cubic-bezier(.2,.8,.2,1) backwards}
.shot:hover .car{transform:translateY(-6px) scale(1.04)}
@keyframes carin{from{opacity:0;transform:translateX(-8%) scale(.96);filter:blur(6px) drop-shadow(0 18px 18px rgba(0,0,0,.35))}}
.shot .vf{position:absolute;inset:12px;pointer-events:none;
  background:
   linear-gradient(var(--yellow),var(--yellow)) top left/20px 2px, linear-gradient(var(--yellow),var(--yellow)) top left/2px 20px,
   linear-gradient(var(--yellow),var(--yellow)) top right/20px 2px, linear-gradient(var(--yellow),var(--yellow)) top right/2px 20px,
   linear-gradient(var(--yellow),var(--yellow)) bottom left/20px 2px, linear-gradient(var(--yellow),var(--yellow)) bottom left/2px 20px,
   linear-gradient(var(--yellow),var(--yellow)) bottom right/20px 2px, linear-gradient(var(--yellow),var(--yellow)) bottom right/2px 20px;
  background-repeat:no-repeat;opacity:.9}
.shot .focus{position:absolute;left:50%;top:55%;width:54px;height:54px;margin:-27px 0 0 -27px;border:1.5px solid rgba(255,255,255,.85);border-radius:6px;opacity:0;pointer-events:none}
.shot.snap .focus{animation:focus 1s ease-out}
@keyframes focus{0%{opacity:0;transform:scale(1.8)}40%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0}}
.shot .flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.shot.snap .flash{animation:flash .55s .55s ease-out}
@keyframes flash{0%{opacity:.95}100%{opacity:0}}
.shot .hud{position:absolute;left:18px;right:18px;bottom:14px;display:flex;justify-content:space-between;font:600 11px ui-monospace,Menlo,monospace;letter-spacing:.08em;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6);pointer-events:none}
.badge{position:absolute;left:16px;top:16px;display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;background:rgba(15,32,41,.82);backdrop-filter:blur(6px);color:#fff;font:600 13px Archivo,sans-serif;font-stretch:var(--wide);letter-spacing:.12em}
.badge i{width:8px;height:8px;border-radius:50%;background:#ff7a1a;animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.shot .scan{position:absolute;left:0;right:0;height:30%;top:-30%;background:linear-gradient(180deg,transparent,rgba(235,194,26,.18) 80%,rgba(235,194,26,.55));mix-blend-mode:screen;animation:scan 4.5s linear infinite;pointer-events:none}
.shot:nth-child(2) .scan{animation-delay:1.5s}.shot:nth-child(3) .scan{animation-delay:3s}
@keyframes scan{to{top:100%}}

/* ---------- Marquee ---------- */
.marquee{background:var(--yellow);color:var(--navy);overflow:hidden;white-space:nowrap;padding:16px 0;font-weight:900;font-stretch:var(--wide);font-size:15px;letter-spacing:.14em;text-transform:uppercase;transform:rotate(-1.2deg) scale(1.02);position:relative;z-index:2;margin:10px 0 -14px}
.marquee .track{display:inline-flex;gap:36px;animation:marq 32s linear infinite;padding-left:36px}
.marquee span::after{content:"";display:inline-block;width:9px;height:9px;background:var(--navy);transform:rotate(45deg);margin-left:36px;vertical-align:middle}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- Sección oscura ---------- */
.dark{position:relative;background:var(--sec);color:#fff;padding:110px 0 100px;overflow:hidden;isolation:isolate}
.dark .texture{position:absolute;inset:0;z-index:-2;opacity:.55;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='turbulence' baseFrequency='.0043 .0086' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .06 0 0 0 0 .13 0 0 0 0 .17 -1.6 0 0 0 1.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:700px 700px;animation:drift 60s linear infinite}
@keyframes drift{to{background-position:-700px -1400px}}
.dark .spot{position:absolute;inset:0;z-index:-1;background:radial-gradient(500px circle at var(--mx,50%) var(--my,30%),rgba(235,194,26,.13),transparent 60%);transition:background .1s;pointer-events:none}
.dark h2{text-align:center;margin:0 0 44px;font-weight:900;font-stretch:var(--wide);font-size:clamp(32px,5.4vw,64px);letter-spacing:.02em;text-transform:uppercase;line-height:1}
.dark h2.y{color:var(--yellow);margin-top:96px;text-shadow:0 0 40px rgba(235,194,26,.35)}

.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative}
@media (max-width:820px){.steps3{grid-template-columns:1fr}}
.steps3::before{content:"";position:absolute;left:8%;right:8%;top:50%;height:2px;background:linear-gradient(90deg,transparent,var(--yellow),transparent);background-size:200% 100%;animation:flow 3s linear infinite;opacity:.6;z-index:0}
@media (max-width:820px){.steps3::before{display:none}}
@keyframes flow{from{background-position:200% 0}to{background-position:-200% 0}}
.scard{position:relative;z-index:1;background:var(--oncard);color:var(--oncard-ink);border-radius:var(--radius);padding:30px 28px 32px;overflow:hidden;transition:transform .3s,box-shadow .3s}
.scard::after{content:"";position:absolute;left:0;top:0;height:4px;width:0;background:var(--yellow);transition:width 1s .3s cubic-bezier(.2,.8,.2,1)}
.scard.in::after{width:100%}
.scard:hover{transform:translateY(-6px);box-shadow:0 24px 50px -20px rgba(0,0,0,.5),0 0 0 2px var(--yellow)}
.scard .n{font-weight:900;font-stretch:var(--wide);font-size:58px;line-height:1;letter-spacing:.02em}
.scard .n em{font-style:normal;-webkit-text-stroke:2px var(--oncard-ink);color:transparent}
.scard h3{margin:14px 0 8px;font-size:24px;font-weight:800;font-stretch:115%;letter-spacing:.04em;line-height:1.1}
.scard p{margin:0;font-weight:700;font-size:15px;color:var(--oncard-text);letter-spacing:.02em}
.scard .ico{position:absolute;right:22px;top:26px;width:44px;height:44px;opacity:.12}

.bens{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:760px){.bens{grid-template-columns:1fr}}
.ben{display:flex;gap:18px;align-items:center;background:var(--oncard);color:var(--oncard-ink);border-radius:var(--radius);padding:22px;transition:transform .3s,box-shadow .3s}
.ben:hover{transform:translateY(-4px);box-shadow:0 20px 40px -18px rgba(0,0,0,.5)}
.ben .tile{flex:none;width:60px;height:60px;border-radius:14px;background:var(--tile);display:grid;place-items:center;position:relative;transition:box-shadow .3s}
.ben:hover .tile{box-shadow:0 0 0 4px rgba(235,194,26,.4),0 0 24px rgba(235,194,26,.55)}
.ben .tile svg{width:28px;height:28px;stroke:var(--tile-ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.ben:hover .tile svg{stroke:var(--yellow)}
.ben h4{margin:0 0 4px;font-size:20px;font-weight:800;font-stretch:112%;letter-spacing:.04em}
.ben p{margin:0;font-size:15px;font-weight:600;color:var(--oncard-text)}

/* ---------- Formulario ---------- */
.formsec{position:relative;padding:110px 0 90px;background:var(--soft);overflow:hidden}
.formsec .grid{position:absolute;inset:0;background-image:radial-gradient(var(--dotc) 1px,transparent 1.5px);background-size:22px 22px;mask-image:linear-gradient(180deg,#000,transparent 70%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);pointer-events:none}
.sechead{position:relative;text-align:center;max-width:720px;margin:0 auto 40px}
.kicker{display:inline-block;font:800 12px Archivo,sans-serif;font-stretch:var(--wide);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);background:rgba(235,194,26,.25);padding:7px 14px;border-radius:999px;margin-bottom:16px}
.sechead h2{margin:0 0 12px;font-weight:900;font-stretch:var(--wide);font-size:clamp(30px,4.6vw,52px);line-height:1;text-transform:uppercase}
.sechead h2 b{color:var(--yellow)}
.sechead p{margin:0;color:var(--muted);font-size:17px}

.card{position:relative;scroll-margin-top:90px;max-width:860px;margin:0 auto;background:var(--surface);border-radius:24px;box-shadow:0 30px 80px -30px rgba(var(--sh),.35),0 0 0 1px var(--line);padding:36px}
@media (max-width:560px){.card{padding:22px 18px;border-radius:20px}}
.progress{display:flex;gap:6px;margin-bottom:12px}
.progress i{flex:1;height:6px;border-radius:3px;background:var(--line);position:relative;overflow:hidden}
.progress i::after{content:"";position:absolute;inset:0;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.progress i.on::after{transform:scaleX(1)}
.progress i.cur::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);animation:sweep 1.6s infinite}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.steplabel{font:800 12px Archivo,sans-serif;font-stretch:var(--wide);color:var(--muted);text-transform:uppercase;letter-spacing:.14em;margin-bottom:26px}
.step{display:none}
.step.active{display:block;animation:stepin .45s cubic-bezier(.2,.8,.2,1)}
@keyframes stepin{from{opacity:0;transform:translateX(24px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.step h2{font-size:26px;margin:0 0 6px;font-weight:900;font-stretch:115%;letter-spacing:.01em}
.sub{color:var(--muted);margin:0 0 24px}

.field{margin-bottom:18px}
.field > label,.qlabel{display:block;font-weight:700;font-size:15px;margin-bottom:7px}
.req{color:var(--danger)}
input[type=text],input[type=tel],input[type=email],input[type=number],input[type=date],select,textarea{
  width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;font:16px Archivo,sans-serif;background:var(--field);color:var(--ink);outline:none;transition:border .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{border-color:var(--yellow);box-shadow:0 0 0 4px rgba(235,194,26,.22)}
textarea{min-height:96px;resize:vertical}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.grid2{grid-template-columns:1fr}}
.invalid{border-color:var(--danger)!important;animation:shake .35s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.err{color:var(--danger);font-size:13px;margin-top:5px;display:none;font-weight:600}
.field.has-err .err{display:block}

.opts{display:grid;gap:9px}
.opts.cols{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.opt{display:flex;align-items:center;gap:11px;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;font-size:15px;font-weight:500;transition:border .2s,background .2s,transform .15s}
.opt:hover{border-color:var(--line-2)}
.opt:active{transform:scale(.99)}
.opt input{accent-color:var(--ctl);width:18px;height:18px;margin:0;flex:none}
.opt:has(input:checked){border-color:var(--yellow);background:rgba(235,194,26,.12);box-shadow:0 0 0 3px rgba(235,194,26,.15)}
.hidden{display:none!important}

.vinrow{display:flex;gap:10px;position:relative}
.vinrow input{text-transform:uppercase;letter-spacing:.14em;font-family:ui-monospace,Menlo,monospace;font-weight:600}
@media (max-width:560px){.vinrow{flex-direction:column}}
.vinwrap{position:relative;flex:1;border-radius:12px;overflow:hidden}
.vinwrap.scanning::after{content:"";position:absolute;top:0;bottom:0;width:30%;background:linear-gradient(90deg,transparent,rgba(235,194,26,.55),transparent);animation:vscan 1s linear infinite;pointer-events:none}
@keyframes vscan{from{left:-30%}to{left:100%}}
.vehbox{border:1.5px solid rgba(31,157,85,.35);background:linear-gradient(135deg,var(--ok-bg),var(--surface));border-radius:14px;padding:18px;margin:4px 0 20px;animation:stepin .4s}
.vehbox .ok{color:var(--ok);font-weight:800;margin-bottom:12px;letter-spacing:.02em}
.vehgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.vehgrid > div{font-size:15px;opacity:0;animation:fadeup .4s forwards}
.vehgrid > div:nth-child(2){animation-delay:.06s}.vehgrid > div:nth-child(3){animation-delay:.12s}.vehgrid > div:nth-child(4){animation-delay:.18s}.vehgrid > div:nth-child(5){animation-delay:.24s}.vehgrid > div:nth-child(6){animation-delay:.3s}
.vehgrid small{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.vehgrid input{padding:8px 10px;font-size:14px}
.note{background:var(--soft);border-radius:12px;padding:14px 16px;font-size:14px;color:var(--text-2);margin:0 0 18px;border-left:3px solid var(--ink)}
.note.warn{background:var(--warn-bg);border-left-color:var(--yellow)}
.note b{color:var(--ink)}
.money{position:relative}
.money span{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:800;font-size:20px}
.money em{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--muted);font-style:normal;font-size:13px;font-weight:700;letter-spacing:.1em}
.money input{padding-left:36px;padding-right:62px;font-size:24px;font-weight:900;font-stretch:115%}

.doclist{list-style:none;padding:0;margin:0 0 18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px}
.doclist li{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border:1.5px dashed var(--line);border-radius:12px;font-size:14px;font-weight:500}
.doclist li::before{content:"";flex:none;width:18px;height:18px;margin-top:1px;border-radius:5px;background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ebc21a' stroke-width='3'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat}

.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.slot{padding:11px 0;border:1.5px solid var(--line);border-radius:10px;background:var(--field);font:700 14px Archivo,sans-serif;cursor:pointer;color:var(--ink);transition:all .2s;opacity:0;animation:fadeup .35s forwards}
.slot:hover:not([disabled]){border-color:var(--ink);transform:translateY(-2px)}
.slot.sel{background:var(--sel-bg);color:var(--sel-ink);border-color:var(--sel-bg);box-shadow:0 0 0 4px rgba(235,194,26,.35)}
.slot[disabled]{opacity:.32!important;cursor:not-allowed;text-decoration:line-through}
.hours{font-size:14px;color:var(--muted);margin-top:10px}

.summary{border:1.5px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:18px}
.summary div{display:flex;justify-content:space-between;gap:16px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:15px}
.summary div:nth-child(odd){background:var(--zebra)}
.summary div:last-child{border-bottom:0}
.summary span{color:var(--muted)}
.summary b{text-align:right}

.nav-btns{display:flex;justify-content:space-between;gap:12px;margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.nav-btns .btn{min-width:150px}
@media (max-width:560px){.nav-btns .btn{flex:1;min-width:0}}

/* Ticket */
.ticket{text-align:center}
.tk{position:relative;max-width:480px;margin:0 auto 24px;background:var(--navy);color:#fff;border-radius:20px;padding:30px 26px 26px;overflow:hidden;text-align:center}
.tk::before,.tk::after{content:"";position:absolute;top:58%;width:28px;height:28px;border-radius:50%;background:var(--surface)}
.tk::before{left:-14px}.tk::after{right:-14px}
.tk .cut{border-top:2px dashed rgba(255,255,255,.25);margin:20px -26px 18px}
.tk .ok{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--yellow);color:var(--navy);font-size:32px;font-weight:900;animation:pop .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(0)}}
.tk h2{margin:16px 0 6px;color:#fff;font-size:24px}
.folio{display:inline-block;font:700 16px ui-monospace,Menlo,monospace;color:var(--yellow);letter-spacing:.12em}
.tinfo{display:grid;gap:6px;font-size:17px}
.tinfo b{color:var(--yellow);font-stretch:112%}
.checks{text-align:left;max-width:360px;margin:0 auto 22px;display:grid;gap:6px;font-weight:600}
.checks div::before{content:"✓ ";color:var(--ok);font-weight:900}
.tactions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
.confetti{position:fixed;top:-12px;width:9px;height:14px;z-index:60;pointer-events:none;animation:fall linear forwards}
@keyframes fall{to{transform:translate(var(--dx),110vh) rotate(var(--r))}}

.spinner{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:rot .7s linear infinite;display:inline-block}
@keyframes rot{to{transform:rotate(360deg)}}

/* ---------- CTA final + footer ---------- */
.final{padding:80px 0 30px}
.final .row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.final h2{margin:0;font-weight:900;font-stretch:var(--wide);font-size:clamp(36px,5.6vw,64px);line-height:.95;text-transform:uppercase;color:var(--ink-strong)}
.final h2 span{color:var(--yellow);display:block}
.foot{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:44px;padding:22px 0 30px;font-size:15px;font-weight:600;color:var(--text-2)}
.foot a{text-decoration:none}
.foot .web{color:var(--accent-text);letter-spacing:.06em}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--navy);color:#fff;padding:14px 20px;border-radius:14px;font-size:14px;z-index:70;max-width:calc(100% - 32px);display:none;box-shadow:0 12px 40px -10px rgba(0,0,0,.5);border-left:4px solid var(--yellow)}


/* ---------- Hero: texto complementario ---------- */
.lead{position:relative;max-width:620px;margin:-14px 0 32px;font-size:17px;color:var(--text-2);opacity:0;animation:fadeup .8s .7s forwards}
.lead b{color:var(--ink)}

/* ---------- Nosotros nos encargamos ---------- */
.dowe{padding:100px 0 40px}
.h2l{margin:0 0 14px;font-weight:900;font-stretch:var(--wide);font-size:clamp(30px,4.6vw,52px);line-height:1;text-transform:uppercase}
.h2l b{color:var(--yellow)}
.subl{margin:0 0 40px;color:var(--muted);font-size:17px;max-width:640px}
.dowe .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:900px){.dowe .grid4{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.dowe .grid4{grid-template-columns:1fr}}
.dw{position:relative;border:1.5px solid var(--line);border-radius:var(--radius);padding:24px 22px;background:var(--surface);overflow:hidden;transition:border-color .3s,transform .3s}
.dw::before{content:"";position:absolute;inset:auto -40% -60% auto;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(235,194,26,.35),transparent 70%);opacity:0;transition:opacity .4s}
.dw:hover{border-color:var(--yellow);transform:translateY(-4px)}
.dw:hover::before{opacity:1}
.dw .k{font:800 12px ui-monospace,Menlo,monospace;color:var(--accent-text);letter-spacing:.12em}
.dw h4{margin:10px 0 6px;font-size:19px;font-weight:800;font-stretch:112%}
.dw p{margin:0;font-size:15px;color:var(--muted)}
.dw.you{background:var(--you-bg);border-color:var(--you-bg);color:#fff}
.dw.you p{color:#c9d4d9}.dw.you .k{color:var(--yellow)}

/* ---------- El camino de tu auto ---------- */
.journey{padding:70px 0 100px}
.tl{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-top:10px}
.tl::before,.tl::after{content:"";position:absolute;left:calc(100%/14);right:calc(100%/14);top:27px;height:3px;border-radius:2px;background:var(--line)}
.tl::after{background:linear-gradient(90deg,var(--yellow),var(--yellow-2));right:auto;width:0;transition:width 2.4s cubic-bezier(.4,0,.2,1);box-shadow:0 0 12px rgba(235,194,26,.8)}
.tl.in::after{width:calc(100% - 100%/7)}
.tl .st{position:relative;z-index:1;text-align:center}
.tl .dotx{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;background:var(--surface);border:3px solid var(--line);display:grid;place-items:center;font-size:22px;transition:border-color .4s,box-shadow .4s,transform .4s;transition-delay:calc(var(--i)*.33s)}
.tl.in .dotx{border-color:var(--yellow);box-shadow:0 0 0 6px rgba(235,194,26,.15)}
.tl .st:last-child .dotx{background:var(--navy);border-color:var(--navy)}
.tl.in .st:last-child .dotx{box-shadow:0 0 0 6px rgba(29,52,63,.15),0 0 26px rgba(235,194,26,.6);animation:beat 2s 2.6s infinite}
@keyframes beat{50%{transform:scale(1.08)}}
.tl h5{margin:0 0 4px;font-size:14px;font-weight:800;font-stretch:112%;text-transform:uppercase;letter-spacing:.05em}
.tl p{margin:0;font-size:13px;color:var(--muted);line-height:1.4}
.tl .who{display:inline-block;margin-top:6px;font:700 10px Archivo,sans-serif;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:var(--soft);color:var(--muted)}
.tl .who.y{background:rgba(235,194,26,.22);color:var(--who-y)}
@media (max-width:900px){
  .tl{grid-template-columns:1fr;gap:0}
  .tl::before,.tl::after{left:27px;right:auto;top:28px;bottom:28px;width:3px;height:auto}
  .tl::after{height:0;transition:height 2.4s cubic-bezier(.4,0,.2,1)}
  .tl.in::after{width:3px;height:calc(100% - 56px)}
  .tl .st{display:grid;grid-template-columns:56px 1fr;gap:16px;text-align:left;padding-bottom:22px;align-items:start}
  .tl .dotx{margin:0}
  .tl .st > div{padding-top:6px}
}

/* ---------- Prepara tu cita ---------- */
.prep{position:relative;background:var(--sec);color:#fff;padding:100px 0;overflow:hidden;isolation:isolate}
.prep::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse at 20% 0%,#000,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 20% 0%,#000,transparent 70%)}
.prep .h2l{color:#fff}
.prep .subl{color:#b9c7cd}
.prep .cols{display:grid;grid-template-columns:1.25fr 1fr;gap:22px}
@media (max-width:860px){.prep .cols{grid-template-columns:1fr}}
.glass{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:28px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.glass h3{margin:0 0 18px;font-size:20px;font-weight:800;font-stretch:115%;letter-spacing:.03em;display:flex;align-items:center;gap:10px}
.glass h3 i{font-style:normal;width:34px;height:34px;border-radius:10px;background:var(--yellow);color:var(--navy);display:grid;place-items:center;font-size:17px}
.docs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.docs li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:#e3eaed;opacity:0;transform:translateX(-12px);transition:opacity .5s,transform .5s;transition-delay:calc(var(--i)*.08s)}
.in .docs li{opacity:1;transform:none}
.docs li::before{content:"";flex:none;width:20px;height:20px;margin-top:1px;border-radius:6px;border:1.5px solid var(--yellow);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ebc21a' stroke-width='3'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat}
.glass .fine{margin:18px 0 0;padding-top:16px;border-top:1px dashed rgba(255,255,255,.18);font-size:13px;color:#a9b9c0}
.sched{display:grid;gap:10px;margin-bottom:18px}
.sched div{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.05);font-size:15px}
.sched b{color:var(--yellow);font-weight:800;text-align:right}
.alert{display:flex;gap:12px;padding:14px;border-radius:12px;background:rgba(235,194,26,.12);border:1px solid rgba(235,194,26,.35);font-size:14px;color:#f3e7b5;margin-bottom:18px}
.alert::before{content:"";flex:none;width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ebc21a' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat}
.bring{display:flex;flex-wrap:wrap;gap:8px}
.bring span{padding:7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.2);font-size:13px;font-weight:600}

/* ---------- Preguntas frecuentes ---------- */
.faq{padding:90px 0 20px}
.faq .list{max-width:860px;margin:0 auto;display:grid;gap:12px}
.faq details{border:1.5px solid var(--line);border-radius:16px;background:var(--surface);transition:border-color .3s,box-shadow .3s}
.faq details[open]{border-color:var(--yellow);box-shadow:0 14px 40px -24px rgba(var(--sh),.4)}
.faq summary{list-style:none;cursor:pointer;padding:20px 22px;font-weight:800;font-size:17px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:32px;height:32px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font-size:20px;font-weight:600;transition:transform .3s,background .3s}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--yellow);color:var(--navy)}
.faq .ans{padding:0 22px 20px;color:var(--text-2);font-size:15.5px;animation:fadeup .35s}
.faq .ans p{margin:0 0 8px}


/* Íconos de línea (sin emojis) */
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;vertical-align:-4px}
.tl .dotx .ic{width:24px;height:24px;color:var(--ink)}
.tl .st:last-child .dotx .ic{color:var(--yellow)}
.glass h3 i .ic{width:19px;height:19px;color:var(--navy)}
.bring span{display:inline-flex;align-items:center;gap:7px}
.bring .ic{width:16px;height:16px;color:var(--yellow)}
.tinfo > div{display:flex;align-items:center;justify-content:center;gap:9px}
.tinfo .ic{color:var(--yellow)}
#icsBtn .ic{width:16px;height:16px}

/* Aparición al hacer scroll */
[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
[data-reveal].in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .marquee .track{animation:none}
}

.nav-r{display:flex;align-items:center;gap:10px}
.nav .wrap > a{flex:none}
.nav img{width:auto;max-width:none}
@media (max-width:440px){.nav .pill{display:none}}

/* Aviso de confirmación por WhatsApp */
.hint{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:13px;color:var(--muted)}
.hint .wa-ic{width:15px;height:15px}
.wa-ic{flex:none;fill:none;stroke:#1fa855;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wa-box{display:flex;gap:12px;align-items:flex-start;text-align:left;padding:14px 16px;margin:0 0 18px;border-radius:14px;background:#effbf3;border:1.5px solid rgba(31,168,85,.35);font-size:15px;color:#1f4a33}
.wa-box .wa-ic{width:24px;height:24px;margin-top:1px}
.wa-box b{color:#14532d}
.wa-box a{color:#14532d;font-weight:700}
.wa-done{max-width:480px;margin:0 auto 22px;animation:fadeup .5s .3s backwards}

input[readonly]{background:var(--soft);color:var(--muted);cursor:default}