:root{
  --bg:#0B0B0C; --bg2:#121214; --surface:#18181B; --line:#2A2A2E;
  --y:#FFC800; --y2:#E6B300; --y3:#B98F00;
  --ink:#F4F1E8; --mute:#A39F94; --dim:#6E6B63;
  --fd:"Archivo","Arial Black","Impact",sans-serif;
  --fb:"Barlow","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --r:14px; --gutter:clamp(16px,4vw,48px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--fb);font-size:17px;line-height:1.55;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--fd);font-stretch:125%;font-weight:900;line-height:1;margin:0;text-wrap:balance;text-transform:uppercase;letter-spacing:-.01em}
.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--gutter)}
.eyebrow{font:600 12px/1 var(--fb);letter-spacing:.22em;text-transform:uppercase;color:var(--y);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:28px;height:3px;background:var(--y)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:999px;font:700 15px/1 var(--fb);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s,color .2s;position:relative;overflow:hidden}
.btn:active{transform:scale(.97)}
.btn-y{background:var(--y);color:#111;box-shadow:0 10px 30px -10px rgba(255,200,0,.6)}
.btn-y:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(255,200,0,.75)}
.btn-o{border-color:var(--line);color:var(--ink);background:transparent}
.btn-o:hover{border-color:var(--y);color:var(--y)}
.btn-k{background:#111;color:var(--y)}
.btn-k:hover{background:#000;transform:translateY(-2px)}
.btn svg{width:18px;height:18px;flex:none}
:focus-visible{outline:3px solid var(--y);outline-offset:3px}

/* ---------- INTRO ---------- */
#intro{position:fixed;inset:0;background:#070708;z-index:100;display:grid;place-items:center;overflow:hidden;transition:opacity .7s ease,visibility .7s}
#intro.done{opacity:0;visibility:hidden;pointer-events:none}
#intro .stage{position:relative;width:min(70vw,360px);display:flex;flex-direction:column;align-items:center;gap:clamp(14px,3vw,26px)}
#intro .moon{position:relative;width:100%;aspect-ratio:700/614}
#intro .moon img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
#intro .glow{position:absolute;left:50%;top:52%;width:120%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,200,0,.35),rgba(255,200,0,0) 60%);opacity:0;animation:glowIn 1.4s .5s ease forwards}
#intro .emb{clip-path:circle(0% at 50% 60%);animation:moonRise 1.5s .25s cubic-bezier(.2,.8,.2,1) forwards}
#intro .word{width:88%}
#intro .word img{width:100%}
#intro .w1{opacity:0;transform:translateY(24px);animation:up .7s 1.35s cubic-bezier(.2,.8,.2,1) forwards}
#intro .w2{opacity:0;transform:translateY(16px);animation:up .6s 1.7s cubic-bezier(.2,.8,.2,1) forwards;width:78%;margin-top:-4px}
#intro .bar{width:88%;height:3px;background:var(--line);border-radius:3px;overflow:hidden;margin-top:6px}
#intro .bar i{display:block;height:100%;width:0;background:var(--y);animation:bar 2.2s .2s cubic-bezier(.65,0,.35,1) forwards}
#intro .skip{position:absolute;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));background:none;border:1px solid var(--line);color:var(--mute);padding:8px 14px;border-radius:999px;font:600 12px var(--fb);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
#intro .skip:hover{color:var(--y);border-color:var(--y)}
.spark{position:absolute;color:var(--y);width:14px;height:14px;opacity:0;animation:twinkle 1.6s ease-in-out infinite}
@keyframes moonRise{to{clip-path:circle(75% at 50% 60%)}}
@keyframes glowIn{to{opacity:1}}
@keyframes up{to{opacity:1;transform:none}}
@keyframes bar{to{width:100%}}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}

/* ---------- NAV ---------- */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(11,11,12,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
header.scrolled{border-color:var(--line)}
nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{height:40px;width:auto}
.brand b{font:900 22px var(--fd);font-stretch:125%;letter-spacing:.02em;color:var(--y)}
.brand small{display:block;font:600 9px var(--fb);letter-spacing:.2em;color:var(--mute);margin-top:2px}
nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0}
nav ul a{text-decoration:none;font:600 14px var(--fb);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);transition:color .2s}
nav ul a:hover{color:var(--y)}
nav .btn{padding:12px 18px;font-size:13px}
@media (max-width:820px){nav ul{display:none}}

/* ---------- HERO ---------- */
.hero{position:relative;padding-block:clamp(56px,9vw,120px) clamp(48px,7vw,90px);overflow:hidden;isolation:isolate}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(44px,7.2vw,96px);color:var(--ink)}
.hero h1 em{font-style:normal;color:var(--y);position:relative;display:inline-block}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.12em;background:var(--y);transform:scaleX(0);transform-origin:left;animation:line 1s 2.9s cubic-bezier(.2,.8,.2,1) forwards;opacity:.5}
@keyframes line{to{transform:scaleX(1)}}
.hero p{max-width:52ch;color:var(--mute);font-size:clamp(17px,1.6vw,20px);margin:22px 0 32px}
.hero .cta{display:flex;flex-wrap:wrap;gap:14px}
.hero .stats{display:flex;gap:34px;margin-top:44px;flex-wrap:wrap}
.hero .stats div b{display:block;font:900 30px var(--fd);font-stretch:125%;color:var(--y);font-variant-numeric:tabular-nums}
.hero .stats div span{font-size:13px;color:var(--mute);letter-spacing:.08em;text-transform:uppercase}
.hero-art{position:relative;aspect-ratio:1;max-width:520px;margin:0 auto;width:100%}
.hero-art .ring{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(255,200,0,.25);animation:spin 60s linear infinite}
.hero-art .ring.r2{inset:10%;border-style:solid;border-color:rgba(255,200,0,.12);animation-direction:reverse;animation-duration:45s}
.hero-art .halo{position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle,rgba(255,200,0,.28),rgba(255,200,0,0) 65%);filter:blur(10px)}
.hero-art .emb{position:absolute;inset:16%;display:grid;place-items:center;filter:drop-shadow(0 30px 40px rgba(255,200,0,.25));animation:float 6s ease-in-out infinite}
.hero-art .emb img{width:100%}
.hero-art .chip{position:absolute;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 14px;font:600 13px var(--fb);display:flex;gap:10px;align-items:center;box-shadow:0 20px 40px -20px #000;animation:float 7s ease-in-out infinite}
.hero-art .chip i{width:8px;height:8px;border-radius:50%;background:var(--y);box-shadow:0 0 0 4px rgba(255,200,0,.2)}
.hero-art .c1{left:-4%;top:18%;animation-delay:-2s}
.hero-art .c2{right:-4%;top:58%;animation-delay:-4s}
.hero-art .c3{left:8%;bottom:4%;animation-delay:-1s}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.hero-bg{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(60% 50% at 80% 40%,rgba(255,200,0,.10),transparent 70%),
  repeating-linear-gradient(115deg,transparent 0 46px,rgba(255,255,255,.025) 46px 48px)}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-art{max-width:380px;order:-1}.hero-art .chip{display:none}}

/* ---------- MARQUEE ---------- */
.stripe{background:var(--y);color:#111;padding:14px 0;overflow:hidden;transform:rotate(-1.2deg) scale(1.03);margin-block:20px 60px;border-block:3px solid #111}
.stripe .track{display:flex;gap:0;width:max-content;animation:marquee 28s linear infinite}
.stripe span{font:900 20px var(--fd);font-stretch:125%;letter-spacing:.06em;text-transform:uppercase;padding:0 22px;white-space:nowrap;display:flex;align-items:center;gap:22px}
.stripe span::after{content:"◆";font-size:11px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- SECTIONS ---------- */
section{padding-block:clamp(56px,7vw,100px)}
.sec-head{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;margin-bottom:42px}
.sec-head h2{font-size:clamp(32px,4.5vw,56px);margin-top:14px}
.sec-head p{color:var(--mute);max-width:44ch;margin:0}
@media (max-width:700px){.sec-head{grid-template-columns:1fr}}

.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.cat{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px 24px;text-decoration:none;overflow:hidden;transition:transform .3s,border-color .3s;display:flex;flex-direction:column;gap:14px;min-height:230px}
.cat::before{content:"";position:absolute;inset:auto -30% -50% auto;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,200,0,.25),transparent 65%);opacity:0;transition:opacity .4s}
.cat:hover{transform:translateY(-6px);border-color:rgba(255,200,0,.5)}
.cat:hover::before{opacity:1}
.cat .ic{width:52px;height:52px;border-radius:12px;background:#111;border:1px solid var(--line);display:grid;place-items:center;color:var(--y);transition:transform .3s,background .3s}
.cat:hover .ic{transform:rotate(-8deg) scale(1.08);background:var(--y);color:#111}
.cat .ic svg{width:26px;height:26px}
.cat h3{font-size:22px;color:var(--ink)}
.cat p{margin:0;color:var(--mute);font-size:15px;flex:1}
.cat .more{font:700 12px var(--fb);letter-spacing:.12em;text-transform:uppercase;color:var(--y);display:flex;gap:8px;align-items:center}
.cat .more::after{content:"→";transition:transform .3s}
.cat:hover .more::after{transform:translateX(6px)}

.why{background:var(--bg2);border-block:1px solid var(--line)}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.why-item{padding:30px 26px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);position:relative}
.why-item .num{font:900 54px/1 var(--fd);font-stretch:125%;color:transparent;-webkit-text-stroke:1.5px var(--y);margin-bottom:18px}
.why-item h3{font-size:20px;margin-bottom:10px}
.why-item p{margin:0;color:var(--mute);font-size:15px}
@media (max-width:820px){.why-grid{grid-template-columns:1fr}}

/* ofertas */
.offers{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
.offer{border-radius:var(--r);padding:34px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:320px;border:1px solid var(--line);background:var(--surface)}
.offer.big{background:linear-gradient(135deg,#1c1a10,#0f0f10 60%)}
.offer .tag{position:absolute;top:22px;left:22px;background:var(--y);color:#111;font:900 12px var(--fd);font-stretch:125%;letter-spacing:.1em;padding:8px 12px;border-radius:6px;text-transform:uppercase}
.offer h3{font-size:clamp(28px,3.4vw,40px);margin-bottom:10px}
.offer p{margin:0 0 20px;color:var(--mute)}
.offer .price{font:900 46px/1 var(--fd);font-stretch:125%;color:var(--y);margin-bottom:14px;font-variant-numeric:tabular-nums}
.offer .price s{font-size:20px;color:var(--dim);margin-left:10px}
.offer .art{position:absolute;right:-8%;top:-10%;width:55%;opacity:.12;filter:blur(.3px)}
.offer .art img{width:100%}
.offer-col{display:grid;gap:18px}
.offer.sm{min-height:150px;padding:26px}
.offer.sm h3{font-size:22px}
.offer.sm .price{font-size:30px}
@media (max-width:820px){.offers{grid-template-columns:1fr}}

/* cotiza */
.quote{background:var(--y);color:#111;position:relative;overflow:hidden}
.quote .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;position:relative}
.quote .eyebrow{color:#111}.quote .eyebrow::before{background:#111}
.quote h2{font-size:clamp(36px,5vw,64px);margin-top:14px}
.quote p{color:#3a3410;max-width:44ch}
.quote .bigemb{position:absolute;right:-6%;top:-12%;width:44%;filter:brightness(0);opacity:.08;pointer-events:none}
.qform{background:#111;color:var(--ink);border-radius:20px;padding:30px;display:grid;gap:14px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);position:relative}
.qform label{font:600 12px var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);display:grid;gap:8px}
.qform input,.qform select,.qform textarea{width:100%;background:var(--surface);border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:13px 14px;font:500 15px var(--fb);letter-spacing:0;text-transform:none}
.qform input:focus,.qform select:focus,.qform textarea:focus{border-color:var(--y);outline:none}
.qform textarea{min-height:84px;resize:vertical}
.qform .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qform .btn{justify-content:center;margin-top:6px}
.qform .note{font-size:12px;color:var(--dim);margin:0;text-align:center}
.qform .prev{background:#0b0b0c;border:1px dashed var(--line);border-radius:10px;padding:12px 14px;font-size:13px;color:var(--mute);white-space:pre-wrap;display:none}
.qform .prev.on{display:block}
@media (max-width:820px){.quote .wrap{grid-template-columns:1fr}.qform .row{grid-template-columns:1fr}}

/* ubicación */
.loc{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:30px}
.card h3{font-size:22px;margin-bottom:18px;display:flex;gap:12px;align-items:center}
.card h3 svg{width:22px;height:22px;color:var(--y)}
.hours{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.hours li{display:flex;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid var(--line);font-size:15px}
.hours li span:last-child{color:var(--y);font-weight:600;font-variant-numeric:tabular-nums}
.contact{display:grid;gap:14px}
.contact div{display:flex;gap:14px;align-items:flex-start}
.contact div svg{width:20px;height:20px;color:var(--y);flex:none;margin-top:3px}
.contact b{display:block;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.contact span{user-select:all;font-size:17px}
.mapbox{margin-top:18px;border-radius:12px;height:170px;background:
  linear-gradient(rgba(255,200,0,.06),rgba(255,200,0,.06)),
  repeating-linear-gradient(0deg,transparent 0 28px,rgba(255,255,255,.06) 28px 29px),
  repeating-linear-gradient(90deg,transparent 0 28px,rgba(255,255,255,.06) 28px 29px),var(--bg);
  display:grid;place-items:center;position:relative;overflow:hidden;border:1px solid var(--line)}
.mapbox .pin{width:18px;height:18px;border-radius:50%;background:var(--y);box-shadow:0 0 0 8px rgba(255,200,0,.2);position:relative}
.mapbox .pin::after{content:"";position:absolute;inset:-18px;border-radius:50%;border:2px solid var(--y);animation:ping 2s ease-out infinite}
.mapbox small{position:absolute;bottom:10px;left:12px;color:var(--mute);font-size:12px}
@keyframes ping{0%{transform:scale(.3);opacity:1}100%{transform:scale(1.4);opacity:0}}
@media (max-width:820px){.loc{grid-template-columns:1fr}}

footer{border-top:1px solid var(--line);padding-block:40px calc(40px + env(safe-area-inset-bottom,0px));color:var(--mute);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer .brand img{height:34px}

/* whatsapp flotante */
.wa{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:60;width:60px;height:60px;border-radius:50%;background:#25D366;display:grid;place-items:center;color:#fff;box-shadow:0 14px 30px -8px rgba(37,211,102,.6);text-decoration:none;transition:transform .2s}
.wa:hover{transform:scale(1.08)}
.wa svg{width:30px;height:30px}
.wa::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:ping 2.2s ease-out infinite}

/* reveal */
.rv{transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.pre{opacity:0;transform:translateY(26px)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.rv.pre{opacity:1;transform:none}#intro{display:none}}

/* ================= EXTRAS MULTIPÁGINA ================= */
.btn-sm{padding:11px 18px;font-size:12px}
.fine{font-size:13px;color:var(--dim);margin:22px 0 0}
.pill{display:inline-block;background:rgba(255,200,0,.12);color:var(--y);border:1px solid rgba(255,200,0,.3);border-radius:999px;padding:4px 11px;font-size:12px;font-weight:600;margin:2px 6px 2px 0;white-space:nowrap}

/* nav móvil */
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer;flex-direction:column;gap:5px;margin-left:auto}
.burger span{display:block;width:24px;height:2px;background:var(--ink);transition:transform .3s,opacity .3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
nav ul a.active{color:var(--y)}
@media (max-width:820px){
  .burger{display:flex}
  nav .btn{display:none}
  nav ul{display:none;position:absolute;left:0;right:0;top:72px;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:8px 0}
  nav ul.open{display:flex}
  nav ul li a{display:block;padding:14px var(--gutter)}
}

/* cabecera interna */
.page-head{padding-block:clamp(48px,7vw,90px) clamp(32px,4vw,56px);border-bottom:1px solid var(--line);position:relative;overflow:hidden;background:radial-gradient(50% 60% at 85% 50%,rgba(255,200,0,.08),transparent 70%)}
.page-head::after{content:"";position:absolute;right:-6%;top:-30%;width:38%;aspect-ratio:1;background:url(../img/emblem.png) center/contain no-repeat;opacity:.07;pointer-events:none}
.page-head h1{font-size:clamp(40px,6vw,80px);margin-top:14px}
.page-head p{color:var(--mute);max-width:56ch;margin:18px 0 0;font-size:18px}

/* marcas */
.brands{padding-block:40px 20px}
.brand-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px;margin-top:22px}
.brand-row span{font:900 18px var(--fd);font-stretch:125%;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);padding:10px 18px;border:1px solid var(--line);border-radius:8px;transition:color .3s,border-color .3s,transform .3s}
.brand-row span:hover{color:var(--y);border-color:rgba(255,200,0,.5);transform:translateY(-2px)}

/* pasos */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative}
.step{padding:30px 26px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);position:relative;overflow:hidden}
.step .num{position:absolute;right:18px;top:12px;font:900 64px/1 var(--fd);font-stretch:125%;color:transparent;-webkit-text-stroke:1.5px rgba(255,200,0,.35)}
.step .ic{width:52px;height:52px;border-radius:12px;background:var(--y);color:#111;display:grid;place-items:center;margin-bottom:18px}
.step .ic svg{width:26px;height:26px}
.step h3{font-size:22px;margin-bottom:10px}
.step p{margin:0;color:var(--mute);font-size:15px}
@media (max-width:820px){.steps{grid-template-columns:1fr}}

/* testimonios */
.testi{background:var(--bg2);border-block:1px solid var(--line)}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tcard{margin:0;padding:28px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);display:flex;flex-direction:column;gap:16px;position:relative}
.tcard::before{content:"“";position:absolute;right:22px;top:6px;font:900 90px/1 var(--fd);color:rgba(255,200,0,.12)}
.tcard .stars{display:flex;gap:3px;color:var(--y)}
.tcard .stars svg{width:16px;height:16px}
.tcard blockquote{margin:0;font-size:16px;color:var(--ink);flex:1}
.tcard figcaption b{display:block;font-size:15px}
.tcard figcaption span{font-size:13px;color:var(--mute)}
@media (max-width:820px){.tgrid{grid-template-columns:1fr}}

/* ---------- CATÁLOGO ---------- */
.catalog{padding-top:36px}
.ptabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.ptabs button{background:var(--surface);border:1px solid var(--line);color:var(--mute);border-radius:999px;padding:10px 16px;font:600 13px var(--fb);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;display:flex;gap:8px;align-items:center;transition:all .2s}
.ptabs button em{font-style:normal;background:#111;color:var(--dim);border-radius:999px;padding:2px 8px;font-size:11px}
.ptabs button:hover{color:var(--ink);border-color:var(--y)}
.ptabs button.on{background:var(--y);color:#111;border-color:var(--y)}
.ptabs button.on em{background:#111;color:var(--y)}
.psearch{position:relative;margin-bottom:30px}
.psearch svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--mute)}
.psearch input{width:100%;background:var(--surface);border:1px solid var(--line);color:var(--ink);border-radius:12px;padding:15px 16px 15px 48px;font:500 16px var(--fb)}
.psearch input:focus{border-color:var(--y);outline:none}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.pc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,border-color .3s,box-shadow .3s}
.pc:hover{transform:translateY(-6px);border-color:rgba(255,200,0,.5);box-shadow:0 30px 50px -30px rgba(255,200,0,.35)}
.pc.hide{display:none}
.pc-vis{position:relative;background:radial-gradient(70% 70% at 50% 60%,rgba(255,200,0,.14),transparent 70%),#121214;padding:22px;display:grid;place-items:center;border-bottom:1px solid var(--line)}
.pc-vis .pv{width:110px;height:128px;filter:drop-shadow(0 16px 20px rgba(0,0,0,.6));transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.pc:hover .pc-vis .pv{transform:translateY(-6px) rotate(-3deg) scale(1.04)}
.ptag{position:absolute;left:14px;top:14px;background:var(--y);color:#111;font:900 11px var(--fd);font-stretch:125%;letter-spacing:.1em;padding:6px 10px;border-radius:6px;text-transform:uppercase}
.ptag.static{position:static;display:inline-block;align-self:flex-start}
.pc-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.pc-brand{font:700 11px var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--y)}
.pc h3{font-size:19px;color:var(--ink);text-transform:none;letter-spacing:0;font-stretch:110%}
.pc-spec{margin:0;font-size:13px;color:var(--mute)}
.pc-use{margin:4px 0 0;font-size:14px;color:var(--ink);opacity:.85;flex:1}
.pc-sizes{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pc-sizes span{font-size:12px;font-weight:600;color:var(--mute);border:1px solid var(--line);border-radius:6px;padding:3px 8px}
.pc-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.pc-price{font:900 22px/1 var(--fd);font-stretch:125%;color:var(--y);font-variant-numeric:tabular-nums}
.pc-price small{display:block;font:600 10px var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:3px}
.pempty{text-align:center;color:var(--mute);padding:40px 0}

/* tabla guía */
.ptable{width:100%;border-collapse:collapse;font-size:15px}
.ptable th,.ptable td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.ptable th{font:700 12px var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);background:#111}
.ptable td:first-child{font-weight:700;color:var(--ink)}
.ptable tr:last-child td{border-bottom:0}
.tscroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}

/* nosotros */
.story{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.story p{color:var(--mute);font-size:18px}
.story .stats{display:flex;gap:34px;margin-top:30px;flex-wrap:wrap}
.story .stats b{display:block;font:900 30px var(--fd);font-stretch:125%;color:var(--y)}
.story .stats span{font-size:13px;color:var(--mute);letter-spacing:.08em;text-transform:uppercase}
.story .emb{position:relative;aspect-ratio:1;max-width:440px;margin:0 auto;width:100%;display:grid;place-items:center}
.story .emb img{width:80%;filter:drop-shadow(0 30px 40px rgba(255,200,0,.25));animation:float 6s ease-in-out infinite}
.story .emb::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(255,200,0,.25);animation:spin 60s linear infinite}
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.timeline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative}
.timeline::before{content:"";position:absolute;left:0;right:0;top:11px;height:2px;background:var(--line)}
.timeline li{padding-top:34px;position:relative}
.timeline li::before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;background:var(--y);box-shadow:0 0 0 5px var(--bg)}
.timeline b{font:900 26px var(--fd);font-stretch:125%;color:var(--y);display:block;margin-bottom:8px}
.timeline h3{font-size:18px;margin-bottom:8px}
.timeline p{margin:0;color:var(--mute);font-size:15px}
.faq{display:grid;gap:10px;max-width:820px}
.faq details{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:0 22px;transition:border-color .3s}
.faq details[open]{border-color:rgba(255,200,0,.5)}
.faq summary{cursor:pointer;padding:18px 0;font:700 17px var(--fb);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:900 22px var(--fd);color:var(--y);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0 0 18px;color:var(--mute)}
@media (max-width:820px){.story{grid-template-columns:1fr}.timeline{grid-template-columns:1fr;gap:26px}.timeline::before{left:7px;right:auto;top:0;bottom:0;width:2px;height:auto}.timeline li{padding:0 0 0 34px}}

/* contacto */
.qlist{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.qlist li{display:flex;gap:12px;align-items:center;font-weight:600}
.qlist svg{width:22px;height:22px;flex:none}
.zones{display:flex;flex-wrap:wrap;gap:0;margin-top:6px}

/* banda CTA */
.cta-band{background:var(--y);color:#111;padding-block:clamp(40px,5vw,70px)}
.cta-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cta-band h2{font-size:clamp(28px,4vw,48px)}
.cta-band p{margin:12px 0 0;color:#3a3410;max-width:52ch}

/* footer */
footer .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:32px;align-items:start}
footer h4{font:700 12px var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin:0 0 14px}
footer .fabout{margin:14px 0 0;max-width:34ch;font-size:14px}
footer .flinks{list-style:none;margin:0;padding:0;display:grid;gap:9px}
footer .flinks a{text-decoration:none;transition:color .2s}
footer .flinks a:hover{color:var(--y)}
footer .fcontact li{display:flex;gap:10px;align-items:flex-start;line-height:1.4}
footer .fcontact svg{width:16px;height:16px;flex:none;color:var(--y);margin-top:3px}
footer .fbottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:36px;padding-top:22px;border-top:1px solid var(--line);font-size:13px;color:var(--dim)}
@media (max-width:900px){footer .fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){footer .fgrid{grid-template-columns:1fr}}

/* nosotros: promesa, lobo, pilares */
.bigquote{margin:0;padding:28px 30px;border-left:4px solid var(--y);background:var(--bg);border-radius:0 var(--r) var(--r) 0;font:700 20px/1.45 var(--fb);color:var(--ink)}
.wolf{background:radial-gradient(50% 60% at 25% 50%,rgba(255,200,0,.12),transparent 70%),var(--bg)}
.wolf .lead{font:900 22px var(--fd);font-stretch:125%;color:var(--y);text-transform:uppercase;letter-spacing:.02em}
.wolf .motto{font:700 17px/1.5 var(--fb);color:var(--ink);border-top:1px solid var(--line);padding-top:18px;margin-top:24px}
.closing{margin:36px 0 0;font:700 22px/1.4 var(--fb);color:var(--ink);max-width:40ch;text-wrap:balance}
.contact span+span{display:block}
.contact span a{color:var(--y)}
.values.v5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1000px){.values.v5{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.values.v5{grid-template-columns:1fr}}
.cats9{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.cats9{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cats9{grid-template-columns:1fr}}
.hero h1{font-size:clamp(38px,5.6vw,74px)}
.hero h1 em{display:inline}

/* ================= MÁS AMARILLO ================= */
/* bloques oscuros más cálidos */
body{background:radial-gradient(70% 40% at 50% 0%,rgba(255,200,0,.10),transparent 70%),var(--bg)}
.cat,.pc,.why-item,.step,.tcard,.card,.offer,.qform,.faq details{border-color:rgba(255,200,0,.22)}
.cat,.why-item,.step,.card,.offer{background:linear-gradient(160deg,#1c1a12,#141416 70%)}
.cat .ic{background:var(--y);color:#111;border-color:transparent}
.cat:hover .ic{background:#111;color:var(--y)}
.why-item .num{-webkit-text-stroke:0;color:var(--y);opacity:.9}
.hero-bg{background:radial-gradient(55% 60% at 78% 45%,rgba(255,200,0,.22),transparent 70%),radial-gradient(40% 40% at 5% 90%,rgba(255,200,0,.10),transparent 70%),repeating-linear-gradient(115deg,transparent 0 46px,rgba(255,200,0,.05) 46px 48px)}
section + section:not(.sec-y):not(.cta-band){border-top:3px solid var(--y)}
.testi{border-block:0}

/* bloques amarillos */
.sec-y{background:#FFC800;color:#111;position:relative;
  --bg:#FFC800; --bg2:#F7BF00; --surface:#FFD447; --line:rgba(0,0,0,.18); --ink:#111; --mute:#3d3510; --dim:#5a5020; --y:#111}
.sec-y + .sec-y{border-top:3px solid #111}
.sec-y .eyebrow{color:#111}.sec-y .eyebrow::before{background:#111}
.sec-y h1,.sec-y h2,.sec-y h3{color:#111}
.sec-y .cat,.sec-y .why-item,.sec-y .step,.sec-y .tcard,.sec-y .card,.sec-y .faq details{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.18)}
.sec-y .cat:hover,.sec-y .why-item:hover,.sec-y .step:hover{border-color:#111}
.sec-y .cat::before{background:radial-gradient(circle,rgba(0,0,0,.12),transparent 65%)}
.sec-y .cat .ic,.sec-y .step .ic{background:#111;color:#FFC800}
.sec-y .cat:hover .ic{background:#fff;color:#111}
.sec-y .step .num{color:transparent;-webkit-text-stroke:1.5px rgba(0,0,0,.35)}
.sec-y .why-item .num{color:#111;opacity:1}
.sec-y .btn-y{background:#111;color:#FFC800;box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.sec-y .btn-o{border-color:rgba(0,0,0,.35);color:#111}.sec-y .btn-o:hover{border-color:#111;background:#111;color:#FFC800}
.sec-y .brand-row span{color:#111;border-color:rgba(0,0,0,.3);background:rgba(255,255,255,.18)}
.sec-y .brand-row span:hover{background:#111;color:#FFC800;border-color:#111}
.sec-y .tcard::before{color:rgba(0,0,0,.12)}
.sec-y .tcard .stars{color:#111}
.sec-y .tcard blockquote{color:#111}
.sec-y .pill{background:rgba(0,0,0,.08);color:#111;border-color:rgba(0,0,0,.3)}
.sec-y .tscroll{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.2)}
.sec-y .ptable th{background:#111;color:#FFC800}
.sec-y .ptable td{border-color:rgba(0,0,0,.15)}
.sec-y .bigquote{background:#111;color:#FFC800;border-left-color:#fff}
.sec-y .closing{color:#111}
.sec-y .faq summary::after{color:#111}
.sec-y .faq details[open]{border-color:#111}
.sec-y .ptag{background:#111;color:#FFC800}
.sec-y .fine{color:#3d3510}
.sec-y .more{color:#111}
.sec-y img[src$="emblem.png"]{filter:brightness(0)}
.page-head.sec-y{border-bottom:0;background:radial-gradient(50% 60% at 85% 50%,rgba(0,0,0,.08),transparent 70%),#FFC800}
.page-head.sec-y::after{filter:brightness(0);opacity:.10}
.page-head.sec-y p{color:#3d3510}
.page-head.sec-y + section{padding-top:clamp(40px,5vw,70px)}
.hero-art .c3{left:auto;right:2%;bottom:2%}
.benefits + .stripe{margin-top:34px}
.stripe + section::before{display:none}
.promo{padding-block:0}
@media (max-width:900px){
  .promo{padding-bottom:52px;background:#0B0B0C}
  .promo .arr{bottom:8px}
  .promo .dots{bottom:20px}
  .promo .bar{bottom:0}
  .promo .slide.img{aspect-ratio:16/9}
}
/* proporción fija del carrusel: banners de 1920 x 800 px encajan exacto */
.promo .slides{height:auto;aspect-ratio:1920/800;max-height:760px}
@media (max-width:900px){.promo .slide.img{aspect-ratio:1080/608}}
.promo + .hero{padding-top:clamp(40px,6vw,80px)}
.promo + .hero::before{display:none}
/* celular: banner completo, sin recorte */
@media (max-width:900px){
  .promo .slide.img{aspect-ratio:1920/800}
  .promo .slide.img .pic img{object-fit:contain}
  .promo{padding-bottom:46px}
}

/* ---- celular: sin desborde horizontal ---- */
html{overflow-x:hidden}
body{overflow-x:clip;position:relative}
.hero-grid>*{min-width:0}
h1,h2{overflow-wrap:anywhere}
@media (max-width:600px){
  .hero h1{font-size:clamp(26px,8.2vw,40px)}
  .stripe{transform:none;margin-block:0 40px}
  .hero-art{max-width:300px}
}
a.mapbox{text-decoration:none;color:inherit;cursor:pointer;transition:border-color .3s}
a.mapbox:hover{border-color:var(--y)}
footer .fcontact a{text-decoration:none;color:inherit}
footer .fcontact a:hover{color:var(--y)}
/* contacto en celular */
.loc>*,.card,.qform,.story>*{min-width:0;max-width:100%}
.contact>div{display:flex;gap:14px;align-items:flex-start}
.contact>div>div{display:block;min-width:0}
.contact span{display:block;overflow-wrap:anywhere;user-select:text}
.hours li span:first-child{min-width:0}
.card{overflow:hidden}
.mapbox{max-width:100%}
.pc-vis .pimg{width:130px;height:130px;object-fit:contain;filter:drop-shadow(0 16px 20px rgba(0,0,0,.6));transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.pc:hover .pc-vis .pimg{transform:translateY(-6px) scale(1.04)}

/* ================= ELEMENTOS DEL RUBRO ================= */
/* siluetas de vehículos en el hero */
.hero{min-height:0}
.hero-cars{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.hero-cars .car{position:absolute;color:var(--y);opacity:.22}
.hero-cars .sedan{width:min(58vw,720px);left:-6%;top:16%;opacity:.11;animation:drive 1.2s cubic-bezier(.2,.8,.2,1) 2.8s both}
.hero-cars .pickup{width:min(44vw,540px);right:-8%;bottom:2%;opacity:.16;animation:drive 1.4s cubic-bezier(.2,.8,.2,1) 3s both}
.hero-cars .moto{width:min(18vw,200px);left:46%;bottom:4%;opacity:.16;animation:drive2 1s cubic-bezier(.2,.8,.2,1) 3.2s both}
@keyframes drive{from{transform:translateX(120px);opacity:0}to{transform:none}}
@keyframes drive2{from{transform:translateX(-120px);opacity:0}to{transform:none}}
.speed{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(255,200,0,.35),transparent);background-size:220px 100%;background-repeat:no-repeat;animation:speed 2.4s linear infinite;opacity:.6}
.speed.s1{top:34%;animation-delay:0s}.speed.s2{top:52%;animation-delay:-.8s}.speed.s3{top:68%;animation-delay:-1.6s}
@keyframes speed{from{background-position:-220px 0}to{background-position:calc(100% + 220px) 0}}
/* carretera */
.road{position:absolute;left:0;right:0;bottom:0;height:34px;border-top:2px solid rgba(255,200,0,.35);background:linear-gradient(180deg,rgba(255,200,0,.08),transparent);overflow:hidden;z-index:-1}
.road .lane{position:absolute;left:0;right:0;top:14px;height:3px;background:repeating-linear-gradient(90deg,var(--y) 0 40px,transparent 40px 80px);opacity:.55;animation:lane 1.2s linear infinite}
@keyframes lane{to{transform:translateX(-80px)}}

/* botella echando aceite */
.hero-art .pour{position:absolute;left:-12%;bottom:-8%;width:50%;height:auto;z-index:2;overflow:visible;filter:drop-shadow(0 20px 30px rgba(0,0,0,.6))}
.pour .bottle{transform-origin:60px 100px;transform:translate(83px,-152px) rotate(-125deg);animation:tilt 1.6s cubic-bezier(.2,.8,.2,1) 2.9s both}
@keyframes tilt{from{transform:translate(83px,-152px) rotate(-95deg)}to{transform:translate(83px,-152px) rotate(-125deg)}}
.pour .stream{stroke-dasharray:400;stroke-dashoffset:400;animation:streamIn 1.1s ease-out 4.2s forwards}
.pour .glint{stroke-dasharray:14 60;animation:streamIn 1.1s ease-out 4.2s forwards,glint 1.2s linear 5.3s infinite}
@keyframes streamIn{to{stroke-dashoffset:0}}
@keyframes glint{from{stroke-dashoffset:74}to{stroke-dashoffset:0}}
.pour .drop{opacity:0;animation:fall 1.4s ease-in 5.4s infinite}
.pour .d2{animation-delay:6.1s}
@keyframes fall{0%{opacity:0;transform:translate(6px,-40px)}10%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translate(10px,70px)}}
.pour .pool{transform-origin:100px 322px;transform:scale(0);animation:poolIn 1.2s cubic-bezier(.2,.8,.2,1) 5s forwards}
@keyframes poolIn{to{transform:scale(1)}}
.pour .ripple{transform-origin:100px 322px;opacity:0;animation:ripple 2.6s ease-out 5.6s infinite}
.pour .r2{animation-delay:6.9s}
@keyframes ripple{0%{transform:scale(.4);opacity:.7}100%{transform:scale(1.5);opacity:0}}
@media (max-width:900px){.hero-art .pour{width:46%;left:-4%}.hero-cars .pickup,.hero-cars .moto{width:min(18vw,200px);left:46%;bottom:4%;opacity:.16;animation:drive2 1s cubic-bezier(.2,.8,.2,1) 3.2s both}.hero-cars .sedan{width:min(58vw,720px);left:-6%;top:16%;opacity:.11;animation:drive 1.2s cubic-bezier(.2,.8,.2,1) 2.8s both}}

/* separadores tipo huella de llanta */
section + section:not(.sec-y):not(.cta-band){border-top:0;position:relative}
section + section:not(.sec-y):not(.cta-band)::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;background:repeating-linear-gradient(-55deg,var(--y) 0 10px,transparent 10px 22px);opacity:.9}
.sec-y + .sec-y{border-top:0}
.sec-y + .sec-y::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;background:repeating-linear-gradient(-55deg,#111 0 10px,transparent 10px 22px)}

/* textura en bloques amarillos */
.sec-y{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='none' stroke='%23000' stroke-width='2' opacity='.09'><path d='M30 18c-8 12-14 20-14 28a14 14 0 0 0 28 0c0-8-6-16-14-28z'/><path d='M88 66l12 7v14l-12 7-12-7V73z'/><circle cx='88' cy='80' r='5'/><path d='M22 92h14l4-6h6l4 6h14' /><path d='M84 24l10-10M78 30l16-16'/></g></svg>");background-size:120px 120px}
.page-head.sec-y{background-image:radial-gradient(50% 60% at 85% 50%,rgba(0,0,0,.08),transparent 70%),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='none' stroke='%23000' stroke-width='2' opacity='.09'><path d='M30 18c-8 12-14 20-14 28a14 14 0 0 0 28 0c0-8-6-16-14-28z'/><path d='M88 66l12 7v14l-12 7-12-7V73z'/><circle cx='88' cy='80' r='5'/><path d='M22 92h14l4-6h6l4 6h14' /><path d='M84 24l10-10M78 30l16-16'/></g></svg>");background-size:auto,120px 120px}
.cta-band{position:relative;overflow:hidden}
.cta-band .car{position:absolute;right:-4%;bottom:-8px;width:min(46vw,520px);color:#111;opacity:.14;pointer-events:none}
.cta-band .wrap{position:relative}

/* gota como marcador en la cabecera de sección */
.eyebrow::before{width:22px;height:22px;background:none;border:0;content:"";background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C7 9 5 13 5 16a7 7 0 0 0 14 0c0-3-2-7-7-14z' fill='%23FFC800'/></svg>") center/contain no-repeat}
.sec-y .eyebrow::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C7 9 5 13 5 16a7 7 0 0 0 14 0c0-3-2-7-7-14z' fill='%23111111'/></svg>")}
@media (prefers-reduced-motion:reduce){.pour .bottle,.pour .stream,.pour .pool{animation:none}.pour .stream{stroke-dashoffset:0}.pour .pool{transform:scale(1)}.hero-cars .car{animation:none}}

/* ================= CARRUSEL DE PROMOCIONES ================= */
.promo{position:relative;overflow:hidden;background:var(--bg);border-bottom:3px solid var(--y)}
.promo .slides{position:relative;height:clamp(300px,44vw,640px)}
.promo .slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility .8s;display:flex;align-items:center}
.promo .slide.on{opacity:1;visibility:visible;z-index:1}
.promo .slide.dark{background:radial-gradient(60% 70% at 78% 50%,rgba(255,200,0,.18),transparent 70%),repeating-linear-gradient(115deg,transparent 0 46px,rgba(255,200,0,.05) 46px 48px),#0B0B0C;color:var(--ink)}
.promo .slide.yellow{background:radial-gradient(60% 70% at 78% 50%,rgba(0,0,0,.10),transparent 70%),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='none' stroke='%23000' stroke-width='2' opacity='.09'><path d='M30 18c-8 12-14 20-14 28a14 14 0 0 0 28 0c0-8-6-16-14-28z'/><path d='M88 66l12 7v14l-12 7-12-7V73z'/><circle cx='88' cy='80' r='5'/><path d='M22 92h14l4-6h6l4 6h14' /><path d='M84 24l10-10M78 30l16-16'/></g></svg>"),#FFC800;background-size:auto,120px 120px,auto;color:#111}
.promo .slide.yellow .eyebrow{color:#111}
.promo .slide.yellow .eyebrow::before{filter:brightness(0)}
.promo .slide.yellow h2,.promo .slide.yellow h2 em{color:#111}
.promo .slide.yellow h2 em{background:#111;color:#FFC800;padding:0 .15em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.promo .slide.yellow p{color:#3d3510}
.promo .slide.yellow .btn-y{background:#111;color:#FFC800}
.promo .slide.yellow .btn-o{border-color:rgba(0,0,0,.35);color:#111}
.promo .slide.yellow .btn-o:hover{background:#111;color:#FFC800;border-color:#111}
.slide-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.slide-bg .car{position:absolute;right:-6%;bottom:-4%;width:min(70vw,820px);color:var(--y);opacity:.10}
.slide-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center;width:100%;position:relative;padding-block:40px}
.slide-txt h2{font-size:clamp(34px,4.6vw,62px);margin-top:16px}
.slide-txt h2 em{font-style:normal;color:var(--y)}
.slide-txt p{max-width:48ch;font-size:clamp(16px,1.4vw,19px);color:var(--mute);margin:18px 0 26px}
.slide-txt .cta{display:flex;flex-wrap:wrap;gap:12px}
.slide.on .slide-txt>*{animation:up .7s cubic-bezier(.2,.8,.2,1) both}
.slide.on .slide-txt>*:nth-child(2){animation-delay:.1s}.slide.on .slide-txt>*:nth-child(3){animation-delay:.2s}.slide.on .slide-txt>*:nth-child(4){animation-delay:.3s}
.slide-txt>*{opacity:0;transform:translateY(20px)}
.slide.on .slide-txt>*{opacity:1;transform:none}
.slide-art{position:relative;min-height:320px;display:grid;place-items:center}
.slide.on .slide-art{animation:artIn .9s cubic-bezier(.2,.8,.2,1) .15s both}
@keyframes artIn{from{opacity:0;transform:translateX(40px) scale(.96)}to{opacity:1;transform:none}}
/* arte por slide */
.art-pour{position:relative;width:100%;max-width:460px;aspect-ratio:1}
.art-pour .emb-s{position:absolute;right:0;top:4%;width:74%;filter:drop-shadow(0 30px 40px rgba(255,200,0,.25));animation:float 6s ease-in-out infinite}
.art-pour .pour{position:absolute;left:-8%;bottom:-6%;width:52%;overflow:visible;filter:drop-shadow(0 20px 30px rgba(0,0,0,.6))}
.art-pour .pour .bottle{animation-delay:.6s}.art-pour .pour .stream,.art-pour .pour .glint{animation-delay:1.6s,2.7s}.art-pour .pour .pool{animation-delay:2.2s}.art-pour .pour .ripple{animation-delay:2.8s}.art-pour .pour .r2{animation-delay:4.1s}.art-pour .pour .drop{animation-delay:2.8s}.art-pour .pour .d2{animation-delay:3.5s}
.bline{width:100%;max-width:560px;filter:drop-shadow(0 20px 30px rgba(0,0,0,.35))}
.slide.on .bline .bt{animation:popIn .6s cubic-bezier(.2,.8,.2,1) both}
.slide.on .bline .b1{animation-delay:.1s}.slide.on .bline .b2{animation-delay:.2s}.slide.on .bline .b3{animation-delay:.3s}.slide.on .bline .b4{animation-delay:.4s}
@keyframes popIn{from{opacity:0;transform:translateY(30px)}}
.hl{width:100%;max-width:520px}
.hl .beam{opacity:0;animation:beam 2.2s ease-in-out .4s infinite alternate}
.hl .b2{animation-delay:.9s}
@keyframes beam{to{opacity:1}}
.art-fleet{position:relative;width:100%;max-width:520px;aspect-ratio:2/1}
.art-fleet .car{position:absolute;color:#111}
.art-fleet .pickup{width:82%;right:0;bottom:0;opacity:.95;animation:drive 1s cubic-bezier(.2,.8,.2,1) .3s both}
.art-fleet .moto{width:30%;left:-6%;bottom:-2%;opacity:.8;animation:drive2 1s cubic-bezier(.2,.8,.2,1) .6s both}
.slide.yellow .art-fleet .car{color:#111}
/* slides de imagen */
.promo .slide.img{background:#0B0B0C;overflow:hidden}
.promo .slide.img .blur{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;filter:blur(28px) brightness(.55);pointer-events:none}
.promo .slide.img .pic{position:relative;display:block;width:100%;height:100%}
.promo .slide.img .pic img{width:100%;height:100%;object-fit:contain;display:block}
.promo .slide.img.on .pic{animation:artIn .9s cubic-bezier(.2,.8,.2,1) both}
/* controles */
.promo .arr{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:48px;height:48px;border-radius:50%;border:2px solid rgba(255,200,0,.5);background:rgba(11,11,12,.6);color:var(--y);font:400 30px/1 var(--fb);cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(6px);transition:background .2s,transform .2s}
.promo .arr:hover{background:var(--y);color:#111}
.promo .prev{left:14px}.promo .next{right:14px}
.promo .dots{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;display:flex;gap:8px}
.promo .dots button{width:10px;height:10px;border-radius:999px;border:0;background:rgba(255,200,0,.35);cursor:pointer;padding:0;transition:width .3s,background .3s}
.promo .dots button.on{width:30px;background:var(--y)}
.promo .slide.yellow ~ .dots button{background:rgba(0,0,0,.3)}
.promo .bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.08);z-index:3}
.promo .bar i{display:block;height:100%;width:0;background:var(--y);transition:width .2s linear}
.promo.paused .bar i{opacity:.5}
@media (max-width:900px){
  .promo .slides{height:auto}
  .promo .slide{position:relative;inset:auto;display:none}
  .promo .slide.on{display:flex}
  .promo .slide.img{aspect-ratio:1920/800}
  .promo .slide.img .pic img{object-fit:contain}
  .slide-grid{grid-template-columns:1fr;padding-block:36px 56px;gap:18px}
  .slide-art{min-height:0;order:-1}
  .art-pour{max-width:280px}.bline{max-width:340px}.hl{max-width:320px}.art-fleet{max-width:340px}
  .promo .arr{width:38px;height:38px;font-size:24px;top:auto;bottom:10px;transform:none}
  .promo .prev{left:auto;right:64px}.promo .next{right:16px}
  .promo .dots{left:var(--gutter);transform:none;bottom:22px}
}
/* beneficios */
.benefits{background:var(--bg2);padding-block:0;border-bottom:1px solid var(--line)}
.bgrid{display:grid;grid-template-columns:repeat(4,1fr)}
.benefits .b{padding:26px 22px;border-right:1px solid var(--line);display:grid;grid-template-columns:44px 1fr;gap:4px 14px;align-items:center;transition:background .3s}
.benefits .b:last-child{border-right:0}
.benefits .b:hover{background:rgba(255,200,0,.06)}
.benefits .b svg{width:40px;height:40px;color:var(--y);grid-row:span 2}
.benefits .b b{font:700 15px var(--fb);color:var(--ink)}
.benefits .b span{font-size:13px;color:var(--mute)}
@media (max-width:900px){.bgrid{grid-template-columns:1fr 1fr}.benefits .b:nth-child(2){border-right:0}.benefits .b:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media (max-width:480px){.bgrid{grid-template-columns:1fr}.benefits .b{border-right:0;border-bottom:1px solid var(--line)}}