/* CAR RETAIL PY · estilos de las páginas internas (fichas, marcas, categorías, financiación, consignación y 404).
   Antes este bloque se repetía dentro de cada página; ahora es un solo archivo que el navegador guarda. */
:root{--brand-navy:#0b1d4a;--brand-red:#b81f16;--brand-red-hover:#9a1911;--wa-green:#25d366;
--c-bg:#fff;--c-surface:#f4f6fa;--c-card:#fff;--c-ink:#0b1633;--c-ink-2:#4f5a72;--c-line:#e1e6ee;--c-line-2:#c6cedc;--c-price:#0b1633;--c-accent-text:#c8241a;--c-link:#1f4fd1;--c-focus:#2f6bff;--c-header:#0b1d4a;
--shadow:0 1px 2px rgb(11 22 51/.06),0 10px 28px -8px rgb(11 22 51/.14);--font:"Inter","Helvetica Neue",Arial,system-ui,sans-serif;color-scheme:light}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--c-bg:#0b0c10;--c-surface:#121419;--c-card:#15181e;--c-ink:#edf1f8;--c-ink-2:#a8b2c6;--c-line:#23272f;--c-line-2:#313641;--c-price:#fff;--c-accent-text:#ff8378;--c-link:#8fb1ff;--c-focus:#8fb1ff;--c-header:#0a0b0f;--shadow:0 1px 2px rgb(0 0 0/.4),0 12px 30px -10px rgb(0 0 0/.6);color-scheme:dark}}
:root[data-theme="dark"]{--c-bg:#0b0c10;--c-surface:#121419;--c-card:#15181e;--c-ink:#edf1f8;--c-ink-2:#a8b2c6;--c-line:#23272f;--c-line-2:#313641;--c-price:#fff;--c-accent-text:#ff8378;--c-link:#8fb1ff;--c-focus:#8fb1ff;--c-header:#0a0b0f;--shadow:0 1px 2px rgb(0 0 0/.4),0 12px 30px -10px rgb(0 0 0/.6);color-scheme:dark}
:root{--navy:var(--c-ink);--ink:var(--c-ink);--muted:var(--c-ink-2);--line:var(--c-line);--bg2:var(--c-surface);--red:var(--brand-red);--wa:var(--brand-red)}
*{box-sizing:border-box}body{margin:0;font:400 17px/1.6 var(--font);color:var(--c-ink);background:var(--c-bg);font-feature-settings:"cv11","ss01"}:focus-visible{outline:3px solid var(--c-focus);outline-offset:3px;border-radius:4px}
img{max-width:100%;height:auto;display:block}a{color:var(--c-link)}h1,h2,h3{color:var(--c-ink);line-height:1.12;margin:0;letter-spacing:-.02em}
.wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.top{background:var(--c-header)}.top .wrap{display:flex;align-items:center;gap:24px;min-height:72px;flex-wrap:wrap}
.top img{height:52px;width:auto;object-fit:contain}.top .wrap>a{flex:none}.top nav{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap}.top nav a{color:#fff;text-decoration:none;font-weight:500}
.crumbs{font-size:14px;color:var(--muted);padding-block:18px}.crumbs a{color:var(--muted)}
main{padding-bottom:64px}
.car{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:start}
.gal{position:relative;width:min(100%,560px);margin-inline:auto;border-radius:16px;overflow:hidden;background:#0b0f18;box-shadow:0 18px 40px -18px rgb(12 29 68/.45)}
.g-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}.g-track::-webkit-scrollbar{display:none}
.g-slide{position:relative;flex:0 0 100%;aspect-ratio:3/4;scroll-snap-align:center;scroll-snap-stop:always;overflow:hidden;cursor:zoom-in;margin:0}
.g-bg{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;filter:blur(28px) brightness(.55) saturate(1.1)}
.g-img{position:relative;width:100%;height:100%;object-fit:contain}
.g-slide.is-fill .g-img{object-fit:cover}.g-slide.is-fill .g-bg{display:none}
.g-nav{position:absolute;top:50%;translate:0 -50%;width:48px;height:48px;border-radius:50%;border:0;background:rgb(255 255 255/.92);color:#0b1633;display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px rgb(0 0 0/.25);transition:transform .15s}
@media(hover:hover){.g-nav:hover{transform:scale(1.04);background:rgb(255 255 255/.22)}}.g-nav:active{transform:scale(.95)}.g-nav svg{width:22px;height:22px}.g-prev{left:14px}.g-next{right:14px}
.g-count,.g-full{position:absolute;bottom:14px;background:rgb(8 14 30/.72);color:#fff;border-radius:999px;font-size:14px;font-weight:500;backdrop-filter:blur(6px)}
.g-count{left:14px;padding:6px 12px}.g-count b{font-weight:700}
.g-full{right:14px;border:0;padding:7px 14px;display:flex;gap:8px;align-items:center;cursor:pointer;font:inherit;font-size:14px}.g-full svg{width:16px;height:16px}
.g-thumbs{display:flex;gap:8px;margin:10px auto 0;max-width:560px;overflow-x:auto;scrollbar-width:thin;padding-bottom:4px}
.g-thumbs button{flex:0 0 88px;aspect-ratio:1/1;padding:0;border:0;border-radius:10px;overflow:hidden;cursor:pointer;background:#0b0f18;opacity:.55;outline:2px solid transparent;outline-offset:-2px;transition:opacity .15s}
.g-thumbs button:hover{opacity:.85}.g-thumbs button[aria-current=true]{opacity:1;outline-color:var(--red)}.g-thumbs img{width:100%;height:100%;object-fit:cover}
#lb{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#05080f;color:#fff}#lb::backdrop{background:#05080f}
.lb-track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.lb-track::-webkit-scrollbar{display:none}
.lb-track figure{flex:0 0 100%;height:100%;margin:0;scroll-snap-align:center;scroll-snap-stop:always;display:grid;place-items:center;padding:56px 0}
.lb-track img{max-width:100%;max-height:calc(100dvh - 112px);width:auto;height:auto;object-fit:contain}
.lb-close{position:absolute;top:12px;right:12px;width:46px;height:46px;border-radius:50%;border:0;background:rgb(255 255 255/.12);color:#fff;font-size:26px;cursor:pointer}
.lb-count{position:absolute;top:22px;left:20px;font-size:15px}
#lb .g-nav{background:rgb(255 255 255/.14);color:#fff;box-shadow:none}
.tag{display:inline-block;background:var(--red);color:#fff;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:6px}
.tag.used{background:var(--brand-navy)}
.info h1{font-size:clamp(30px,3.4vw,42px);margin:12px 0 6px}.lead{color:var(--muted);margin:0 0 18px}
.price{font-size:clamp(30px,3vw,38px);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--c-price);margin:6px 0 4px}.price small{display:block;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500}
.specs{--gold-ink:color-mix(in srgb,var(--gold,#f2b632) 62%,var(--c-ink));display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;gap:10px;margin:18px 0;padding:0}
.specs div{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-height:92px;padding:14px 16px;border-radius:22px;background:linear-gradient(155deg,color-mix(in srgb,var(--c-ink) 6%,transparent),color-mix(in srgb,var(--c-ink) 2%,transparent));border:1px solid color-mix(in srgb,var(--c-ink) 10%,transparent);box-shadow:inset 0 1px 0 rgb(255 255 255/.10);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s}
.specs div{grid-column:span 2}
.specs div:nth-child(1){grid-row:span 2}
.specs div:nth-child(2),.specs div:nth-child(3){grid-column:span 2}
.specs div::after{content:"";position:absolute;right:-30px;top:-30px;width:90px;height:90px;border-radius:50%;background:radial-gradient(color-mix(in srgb,var(--gold,#f2b632) 22%,transparent),transparent 70%);pointer-events:none}
@media(hover:hover){.specs div:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--gold,#f2b632) 45%,transparent)}}
.specs dt{font-size:12.5px;font-weight:700;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}
.specs dd{margin:0;font-size:clamp(20px,1.9vw,26px);overflow-wrap:break-word;hyphens:auto;font-weight:800;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--gold-ink)}
.specs div:nth-child(1) dd{font-size:clamp(30px,3vw,44px)}
:root[data-theme="dark"] .specs{--gold-ink:var(--gold,#f2b632)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .specs{--gold-ink:var(--gold,#f2b632)}}
@media(max-width:700px){.specs{grid-template-columns:repeat(2,minmax(0,1fr))}.specs div{grid-column:span 1}.specs div:nth-child(1){grid-column:span 2;grid-row:auto}}
@media(prefers-reduced-motion:reduce){.specs div{transition:none}.specs div:hover{transform:none}}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 22px;border-radius:999px;transition:background .2s,border-color .2s;font-weight:700;text-decoration:none;font-size:17px}
.info-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.share{display:inline-flex;align-items:center;gap:8px;min-height:40px;border:1px solid var(--line);background:var(--c-card);border-radius:999px;padding:7px 14px;font:inherit;font-size:14px;font-weight:500;color:var(--c-ink);cursor:pointer}
.share:hover{border-color:var(--c-ink)}.share svg{width:17px;height:17px}
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:20;display:none;align-items:center;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--c-card);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgb(12 29 68/.12);transform:translateY(110%);transition:transform .25s ease}
.sticky-cta.on{transform:none}.sticky-cta div{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.sticky-cta b{font-size:15px;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sticky-cta span{font-weight:800;color:var(--c-price);font-size:16px}
.sticky-cta .btn{min-height:46px;padding:0 18px;font-size:16px;flex:none}
.toast{position:fixed;left:50%;bottom:90px;translate:-50% 20px;background:var(--brand-navy);color:#fff;padding:10px 18px;border-radius:999px;font-size:15px;opacity:0;pointer-events:none;transition:opacity .2s,translate .2s;z-index:30}
.toast.on{opacity:1;translate:-50% 0}
@media(prefers-reduced-motion:reduce){.sticky-cta,.toast{transition:none}}
.bancos{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.bancos h2{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:12px}
.bancos ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.bk{min-height:62px;border:1px solid var(--line);border-radius:10px;background:var(--c-card);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 6px;text-align:center}
.bk-name{font-weight:900;color:var(--navy);font-size:15px;line-height:1.1;letter-spacing:-.01em}.bk-kind{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.bk-more{border-style:dashed;background:var(--bg2)}.bk-more a{display:flex;flex-direction:column;align-items:center;text-decoration:none}.bk-more .bk-name{color:var(--c-link)}
.bk img{max-width:100%;max-height:36px;object-fit:contain}
.bancos p{font-size:14px;color:var(--muted);margin:10px 0 0}
.btn-wa{background:linear-gradient(180deg,color-mix(in srgb,var(--brand-red) 88%,#fff) 0%,var(--brand-red) 55%,var(--brand-red-hover) 100%);color:#fff;box-shadow:0 1px 0 rgb(255 255 255/.18) inset,0 8px 22px -10px color-mix(in srgb,var(--brand-red) 70%,transparent);transition:background .25s,box-shadow .3s,translate .2s ease-out}@media(hover:hover){.btn-wa:hover{background:linear-gradient(180deg,var(--brand-red),var(--brand-red-hover));box-shadow:0 1px 0 rgb(255 255 255/.2) inset,0 12px 28px -10px color-mix(in srgb,var(--brand-red) 80%,transparent)}}.btn-line{border:1.5px solid var(--c-line-2);color:var(--c-ink);margin-top:10px}.btn-line:hover{border-color:var(--c-ink)}
.wa-ic{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--wa-green);flex:none}.wa-ic svg{width:16px;height:16px;fill:#fff}
.box{background:var(--bg2);border-radius:12px;padding:16px 18px;margin-top:18px}
.sec{padding-top:48px}.sec h2{font-size:clamp(24px,2.4vw,30px);margin-bottom:16px}
ul.eq{columns:2;column-gap:32px;padding-left:20px}ul.eq li{break-inside:avoid;margin-bottom:6px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:22px}
.card{border-radius:14px;overflow:hidden;box-shadow:var(--shadow);text-decoration:none;color:inherit;display:flex;flex-direction:column;background:var(--c-card);border:1px solid var(--c-line)}
.card img{aspect-ratio:3/4;object-fit:cover;width:100%}.card div{padding:14px 16px}.card h3{font-size:19px}.card p{margin:4px 0 0;color:var(--muted);font-size:15px}.card b{color:var(--c-price);font-size:19px;font-weight:800}
.prose{max-width:760px}.prose p,.prose li{color:var(--c-ink-2)}.prose h2{margin-top:36px}
table{border-collapse:collapse;width:100%;font-size:16px}th,td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left}th{color:var(--muted);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.foot{background:var(--c-header);color:#c9d3e8;margin-top:56px;font-size:15px}.ft a{color:#dfe6f5;text-decoration:none}.ft a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.ft-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-block:48px 40px;border-bottom:1px solid rgb(255 255 255/.1)}.ft-cta h2{font-size:clamp(28px,3vw,40px);font-weight:800;color:#fff}.ft-cta h2 em{font-style:italic;font-weight:500;color:#ff8378}
.ft .ft-wa{color:#fff;text-decoration:none;padding-inline:26px}.ft .ft-wa:hover{text-decoration:none}
.ft-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px;padding-block:44px}.ft-brand img{height:64px;width:auto}.ft-brand p{margin:14px 0 16px;max-width:32ch;color:#b9c5e0}
.ft-phone{font-size:20px;font-weight:700;color:#fff!important}.ft h3{margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#8e9bbb}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}.ft ul a{display:inline-block;padding-block:4px}
.ft-bottom{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding-block:20px 28px;border-top:1px solid rgb(255 255 255/.1);font-size:14px;color:#8e9bbb}
@media(max-width:900px){.ft .ft-wa{width:100%}.ft-grid{grid-template-columns:1fr 1fr;gap:32px 20px}.ft-brand{grid-column:1/-1}.ft-bottom{flex-direction:column;padding-bottom:96px}}
.fab{position:fixed;right:18px;bottom:18px;width:58px;height:58px;border-radius:50%;background:var(--brand-navy);display:grid;place-items:center;box-shadow:0 10px 28px -6px rgb(11 29 74/.55),0 0 0 1px rgb(255 255 255/.12) inset}
.fab svg{width:30px;height:30px;fill:var(--wa-green)}.fab::after{content:"";position:absolute;top:7px;right:7px;width:11px;height:11px;border-radius:50%;background:var(--wa-green);box-shadow:0 0 0 2px var(--brand-navy)}
.theme-btn{width:40px;height:40px;border-radius:50%;border:1px solid rgb(255 255 255/.28);background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;flex:none}.theme-btn:hover{background:rgb(255 255 255/.12)}.theme-btn svg{width:19px;height:19px}.theme-btn .i-sun{display:none}:root[data-theme="dark"] .theme-btn .i-sun{display:block}:root[data-theme="dark"] .theme-btn .i-moon{display:none}
@media(prefers-color-scheme:dark){:root:not([data-theme]) .theme-btn .i-sun{display:block}:root:not([data-theme]) .theme-btn .i-moon{display:none}}
td a{font-weight:600}
@media(max-width:900px){.car{grid-template-columns:1fr;gap:24px}ul.eq{columns:1}
.top .wrap{flex-wrap:nowrap;gap:14px;min-height:60px}.top img{height:40px}.car>*{min-width:0}.top nav{min-width:0;flex-wrap:nowrap;gap:14px;overflow-x:auto;white-space:nowrap;font-size:15px;scrollbar-width:none;margin-left:auto}
.g-slide{aspect-ratio:3/4}.g-nav{width:38px;height:38px;background:rgb(10 11 15/.38);border:1px solid rgb(255 255 255/.24);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 6px 18px -8px rgb(0 0 0/.55);-webkit-tap-highlight-color:transparent}.g-nav svg{width:16px;height:16px}@media(max-width:700px){.g-nav{width:32px;height:32px}.g-nav svg{width:14px;height:14px}}.g-prev{left:10px}.g-next{right:10px}.g-thumbs button{flex-basis:68px}.g-full span{display:none}.sticky-cta{display:flex}body.has-sticky .fab{opacity:0;pointer-events:none}body.has-sticky{padding-bottom:76px}.fab{transition:opacity .2s}.bancos ul{grid-template-columns:repeat(2,minmax(0,1fr))}.btn{font-size:16px}}

.cmp-btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font:inherit}
.cmp-btn svg{width:17px;height:17px;flex:none}
.cmp-btn[aria-pressed=true]{border-color:var(--brand-red)!important;color:var(--c-accent-text)!important;background:color-mix(in srgb,var(--brand-red) 8%,transparent)!important}
.cmp-tray2{position:fixed;left:50%;bottom:16px;z-index:40;width:min(880px,calc(100% - 24px));display:flex;align-items:center;gap:12px;padding:10px;translate:-50% 150%;transition:translate .3s ease;background:var(--c-card);color:var(--c-ink);border:1px solid var(--c-line-2);border-radius:18px;box-shadow:0 20px 50px -12px rgb(11 22 51/.45)}
.cmp-tray2.on{translate:-50% 0}.cmp-tray2:not(.on){visibility:hidden}
.cmp-tray2 ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;flex:1;min-width:0}
.cmp-tray2 li{position:relative;display:flex;align-items:center;gap:8px;min-height:52px;padding:6px 32px 6px 6px;border:1px solid var(--c-line);border-radius:12px;background:var(--c-surface);font-size:14px;font-weight:600;line-height:1.2}
.cmp-tray2 li img{width:48px;height:40px;object-fit:cover;border-radius:8px;flex:none}
.cmp-tray2 li span{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cmp-tray2 li button{position:absolute;top:50%;right:4px;translate:0 -50%;width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:var(--c-ink-2);font-size:18px;cursor:pointer}
.cmp-tray2 li.is-empty{justify-content:center;padding:6px;border:1.5px dashed var(--c-line-2);background:transparent}.cmp-tray2 li.is-empty a{color:var(--c-ink-2);text-decoration:none;font-weight:500}
.cmp-act{display:flex;align-items:center;gap:6px;flex:none}
.cmp-clear2{border:0;background:none;color:var(--c-ink-2);font:inherit;font-size:14px;text-decoration:underline;cursor:pointer;padding:8px}
.cmp-go2{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border-radius:999px;background:var(--brand-red);color:#fff!important;font-weight:700;text-decoration:none;white-space:nowrap}
.cmp-go2.is-off{background:var(--c-surface);color:var(--c-ink-2)!important}
.cmp-toast{position:fixed;left:50%;bottom:110px;translate:-50% 16px;z-index:41;background:var(--brand-navy);color:#fff;padding:10px 18px;border-radius:999px;font-size:15px;opacity:0;pointer-events:none;transition:opacity .2s,translate .2s;max-width:calc(100% - 32px);text-align:center}
.cmp-toast.on{opacity:1;translate:-50% 0}
body.has-cmp .fab{opacity:0;pointer-events:none}
body.has-cmp .sticky-cta{display:none!important}
@media(max-width:700px){.cmp-tray2{flex-wrap:wrap;bottom:8px}.cmp-tray2 ul{flex-basis:100%}.cmp-act{flex:1;justify-content:space-between}.cmp-tray2 li{padding-right:28px;font-size:13px}.cmp-tray2 li img{display:none}}
@media(prefers-reduced-motion:reduce){.cmp-tray2,.cmp-toast{transition:none}}

.pitch{max-width:760px}.pitch h2{font-size:clamp(26px,2.8vw,36px);margin:6px 0 16px}.pitch p{color:var(--c-ink-2);font-size:18px;margin:0 0 14px}
.kicker{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--c-accent-text);margin:0}
.ideal{background:var(--c-surface);border-left:4px solid var(--brand-red);padding:14px 18px;border-radius:0 12px 12px 0;color:var(--c-ink)!important}
.nota{font-size:16px!important}
.hl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.hl li{background:var(--c-card);border:1px solid var(--c-line);border-radius:14px;padding:18px;display:grid;gap:6px}
.hl b{font-size:18px;color:var(--c-ink)}.hl span{color:var(--c-ink-2);font-size:15px}
.tech{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px}
.tg{border:1px solid var(--c-line);border-radius:14px;padding:6px 18px 10px;background:var(--c-card)}
.tg h3{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-2);margin:12px 0 6px}
.tg dl{margin:0}.tg div{display:grid;grid-template-columns:42% 1fr;gap:12px;padding:9px 0;border-top:1px solid var(--c-line)}
.tg div:first-child{border-top:0}.tg dt{color:var(--c-ink-2);font-size:15px}.tg dd{margin:0;font-weight:600;font-size:15px}
.tg sup a{font-size:11px;margin-left:3px;color:var(--c-link);text-decoration:none}
.cmp-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:var(--c-surface);border-radius:16px;padding:24px 26px;margin-top:48px}
.cmp-cta h2{font-size:22px;margin:0 0 4px}.cmp-cta p{margin:0;color:var(--c-ink-2)}.cmp-cta .btn{margin:0}
.fuentes details{border-top:1px solid var(--c-line);padding-top:12px}.fuentes summary{cursor:pointer;font-weight:700;color:var(--c-ink)}
.fuentes ol{margin:12px 0;padding-left:22px;font-size:15px}.fuentes p{font-size:14px;color:var(--c-ink-2);max-width:760px}
.info-top{flex-wrap:wrap}.info-top .tag{margin-right:auto}.share.cmp-btn{color:var(--c-ink)}
/* Comparador */
.cmp-h1{font-size:clamp(32px,3.6vw,46px);margin:4px 0 6px}
.cmp{--lab:180px;--colmin:180px;margin-top:20px}
.cmp-scroll{overflow-x:auto;padding-bottom:6px}
.cmp-row{display:grid;gap:0;min-width:calc(var(--lab) + var(--n) * var(--colmin))}
.cmp-head{position:sticky;top:0;z-index:2;background:var(--c-bg);padding-bottom:10px;border-bottom:2px solid var(--c-line)}
.cmp-car{position:relative;padding:0 10px;display:grid;align-content:start;gap:6px}
.cmp-ph img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:var(--c-surface)}
.cmp-t{font-weight:800;font-size:17px;color:var(--c-ink);text-decoration:none;line-height:1.2}.cmp-t span{font-weight:500;color:var(--c-ink-2)}
.cmp-p{margin:0;font-size:20px;font-weight:800;color:var(--c-price);font-variant-numeric:tabular-nums}
.cmp-wa{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;border-radius:999px;background:var(--brand-red);color:#fff!important;font-weight:700;font-size:15px;text-decoration:none}
.cmp-wa .wa-ic{width:22px;height:22px}.cmp-wa .wa-ic svg{width:14px;height:14px}
.cmp-x{position:absolute;top:8px;right:18px;width:32px;height:32px;border-radius:50%;border:0;background:rgb(8 12 24/.72);color:#fff;font-size:18px;cursor:pointer;z-index:1}
.cmp-add{align-content:center}
.cmp-pick select{width:100%;min-height:48px;border-radius:12px;border:1.5px dashed var(--c-line-2);background:var(--c-surface);color:var(--c-ink);font:inherit;font-weight:600;padding:0 12px;cursor:pointer}
.cmp-pick.big select{max-width:420px;border-style:solid}
.cmp-lab{padding:12px 10px 12px 0;color:var(--c-ink-2);font-size:15px}
.cmp-head .cmp-lab{display:flex;align-items:flex-end}
.cmp-diff{display:flex;gap:8px;align-items:center;font-weight:600;color:var(--c-ink);cursor:pointer;font-size:15px}.cmp-diff input{width:18px;height:18px;accent-color:var(--brand-red)}
.cmp-g h2{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-2);margin:28px 0 4px}
.cmp-g .cmp-row{border-top:1px solid var(--c-line)}
.cmp-v{padding:12px 10px;font-weight:600;font-size:15px;color:var(--c-ink)}.cmp-v.na{color:var(--c-ink-2);font-weight:400;font-style:italic}
.cmp-v sup{color:var(--c-link);margin-left:2px}
.cmp-row.is-diff .cmp-lab{color:var(--c-ink);font-weight:600}
.cmp-row.is-diff .cmp-lab::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--brand-red);margin:0 8px 2px 0}
.cmp-note{font-size:14px;color:var(--c-ink-2);margin-top:22px;max-width:820px}
.cmp-empty{border:1px dashed var(--c-line-2);border-radius:16px;padding:32px;display:grid;gap:14px;justify-items:start}.cmp-empty h2{margin:0}
.cmp-chosen{list-style:none;padding:0;margin:0;display:flex;gap:8px;flex-wrap:wrap}.cmp-chosen li{border:1px solid var(--c-line);border-radius:999px;padding:4px 6px 4px 14px;display:flex;gap:6px;align-items:center}
.cmp-chosen button{border:0;background:var(--c-surface);border-radius:50%;width:28px;height:28px;cursor:pointer;color:var(--c-ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(max-width:700px){.cmp{--lab:112px;--colmin:150px}.cmp-lab{font-size:13px}.cmp-v{font-size:14px;padding:10px 8px}.cmp-t{font-size:15px}.cmp-p{font-size:17px}.cmp-car{padding:0 6px}.cmp-x{right:12px}
.cmp-lab{position:sticky;left:0;background:var(--c-bg);z-index:1}}

h1,h2,h3{font-family:"Montserrat","Helvetica Neue",Arial,sans-serif;letter-spacing:-.02em}
h1 em,h2 em{font-family:inherit;font-style:normal}.ft-cta h2 em{color:#ff6b5f}
.foot{border-top:4px solid transparent;border-image:linear-gradient(90deg,#d52b1e 0 33.3%,#fff 33.3% 66.6%,#2450b8 66.6%) 1}

.vers{margin:4px 0 18px;padding:12px;border-radius:16px;border:1px solid var(--c-line);background:var(--c-surface)}
.vers-t{margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#6b7280)}
.vers ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.vers li{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:var(--c-card);border:1px solid var(--c-line)}
.vers li span{font-weight:600;font-size:15px}
.vers li b{font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap}
.vers li a{min-height:36px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;background:var(--brand-red);color:#fff;font-weight:700;font-size:14px;text-decoration:none}
@media(max-width:520px){.vers li{grid-template-columns:1fr auto}.vers li a{grid-column:1/-1;justify-content:center}}
/* Botón flotante de WhatsApp: verde en modo día, vidrio oscuro con borde verde en modo noche */
.fab { --fab-bg: linear-gradient(145deg, #34e27f 0%, #1fbf5f 55%, #12904c 100%); --fab-ink: #fff; --fab-ring: rgb(37 211 102 / .45);
  --fab-shadow: 0 14px 30px -10px rgb(18 144 76 / .6), 0 2px 6px rgb(0 0 0 / .12), inset 0 1px 0 rgb(255 255 255 / .35);
  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 45; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; color: var(--fab-ink); background: var(--fab-bg); border: 1px solid transparent; box-shadow: var(--fab-shadow);
  -webkit-tap-highlight-color: transparent; transition: opacity .2s, transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, background .3s, color .3s, border-color .3s; }
.fab svg { width: 29px; height: 29px; fill: currentColor; position: relative; z-index: 1; }
.fab::after { content: none; }
.fab::before { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 2px solid var(--fab-ring); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .fab::before { animation: fab-pulse 3.2s ease-out 1.5s infinite; } }
@keyframes fab-pulse { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(1.45); opacity: 0; } }
@media (hover: hover) { .fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: var(--fab-shadow), 0 0 0 6px rgb(37 211 102 / .14); } }
.fab:active { transform: scale(.94); }
.fab:focus-visible { outline: 3px solid #25d366; outline-offset: 3px; }
:root[data-theme="dark"] .fab { --fab-bg: linear-gradient(145deg, rgb(28 32 40 / .92), rgb(12 14 18 / .92)); --fab-ink: #25d366; --fab-ring: rgb(37 211 102 / .55);
  --fab-shadow: 0 14px 32px -10px rgb(0 0 0 / .75), 0 0 22px -6px rgb(37 211 102 / .45), inset 0 1px 0 rgb(255 255 255 / .08);
  border-color: rgb(37 211 102 / .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fab { --fab-bg: linear-gradient(145deg, rgb(28 32 40 / .92), rgb(12 14 18 / .92)); --fab-ink: #25d366; --fab-ring: rgb(37 211 102 / .55);
  --fab-shadow: 0 14px 32px -10px rgb(0 0 0 / .75), 0 0 22px -6px rgb(37 211 102 / .45), inset 0 1px 0 rgb(255 255 255 / .08);
  border-color: rgb(37 211 102 / .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } }
@media (max-width: 700px) { .fab { width: 54px; height: 54px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); } .fab svg { width: 27px; height: 27px; } }

.hsearch{position:relative;display:flex;align-items:center;flex:0 1 280px;min-width:0}
.hsearch>svg{position:absolute;left:12px;width:17px;height:17px;color:rgb(255 255 255/.75);pointer-events:none}
.hsearch input{width:100%;min-height:40px;padding:0 14px 0 38px;border-radius:999px;border:1px solid rgb(255 255 255/.22);background:rgb(255 255 255/.10);color:#fff;font:500 15px var(--font,Inter,system-ui,sans-serif);outline:none;-webkit-appearance:none;appearance:none;transition:border-color .2s,background .2s}
.hsearch input::placeholder{color:rgb(255 255 255/.7)}
.hsearch input:focus{border-color:rgb(255 255 255/.55);background:rgb(255 255 255/.16)}
.hsearch input::-webkit-search-cancel-button{filter:invert(1)}
.hsearch ul{position:absolute;z-index:80;top:calc(100% + 8px);left:0;right:0;min-width:280px;margin:0;padding:6px;list-style:none;border-radius:16px;background:var(--c-card);border:1px solid var(--c-line);box-shadow:0 24px 50px -18px rgb(0 0 0/.45)}
.hsearch li a{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:10px;color:var(--c-ink);text-decoration:none}
.hsearch li img{width:42px;height:56px;object-fit:cover;border-radius:8px;flex:none}
.hsearch li span{display:flex;flex-direction:column;min-width:0}
.hsearch li b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hsearch li small{font-size:13px;color:var(--muted,#6b7280)}
.hsearch li.on a,.hsearch li a:hover{background:var(--c-surface)}
.hsearch .hq-none{padding:10px 12px;font-size:14px;color:var(--c-ink)}
.hsearch .hq-none a{color:var(--brand-red);font-weight:700}
@media(max-width:800px){.top .wrap{flex-wrap:wrap;row-gap:8px;padding-bottom:10px}.top nav{flex:1 1 0;min-width:0}.top .theme-btn{flex:none}.hsearch{order:10;flex:1 1 100%}.hsearch ul{min-width:0}}
.rel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.rel-head h2{margin:0}
.rel-nav{display:flex;gap:8px;flex:none}
.rel-btn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;padding:0;cursor:pointer;color:var(--c-ink);background:var(--c-card);border:1px solid var(--c-line);transition:background .2s,opacity .2s,transform .15s}
.rel-btn svg{width:16px;height:16px}
.rel-btn:disabled{opacity:.35;cursor:default}
@media(hover:hover){.rel-btn:not(:disabled):hover{background:var(--c-surface)}}
.rel-btn:active{transform:scale(.95)}
.rel-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 54px)/4);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none;padding:4px 2px 14px}
.rel-track::-webkit-scrollbar{display:none}
.rel-track>.card{scroll-snap-align:start}
.rel-track:focus-visible{outline:2px solid var(--brand-red);outline-offset:4px;border-radius:14px}
@media(max-width:1000px){.rel-track{grid-auto-columns:calc((100% - 36px)/3)}}
@media(max-width:700px){.rel-track{grid-auto-columns:78%;gap:14px}.rel-btn{width:32px;height:32px}.rel-btn svg{width:14px;height:14px}}

:root{--brand-navy:#0B1B3A;--brand-blue:#164E9B;--brand-red:#C41E3A;--brand-red-hover:#A8182F;--brand-steel:#6B7280;--wa-green:#25D366;--c-ink:#0E203F;--c-ink-2:#737373;--muted:#737373;--c-accent-text:#AD162F;--c-header:#0B1B3A;--img-bg:#F4F5F7;--action-primary:#0B1B3A;--on-action-primary:#F8F8F8;--font-display:"Montserrat","Helvetica Neue",Arial,sans-serif}
:root[data-theme="dark"]{--brand-blue:#7BA3F0;--c-ink-2:#A9B3C6;--muted:#A9B3C6;--c-accent-text:#F2697F;--img-bg:#121F3D;--action-primary:#F8F8F8;--on-action-primary:#0B1B3A;--c-ink:#F8F8F8}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--brand-blue:#7BA3F0;--c-ink-2:#A9B3C6;--muted:#A9B3C6;--c-accent-text:#F2697F;--img-bg:#121F3D;--action-primary:#F8F8F8;--on-action-primary:#0B1B3A;--c-ink:#F8F8F8}}
h1,h2,h3,.price,.sticky-cta b,.specs dd,.card b{font-family:var(--font-display);font-weight:700;font-stretch:normal;letter-spacing:-.02em}
h1 em,h2 em{color:inherit}.ft-cta h2 em{color:#F2697F}
.btn,.vers li a,.share,.cmp-btn,.rel-btn+.x{border-radius:6px}
.btn,.vers li a{font-size:15px;font-weight:700;letter-spacing:-.02em}
.btn-wa,.btn[href*="wa.me"],.vers li a{background:var(--wa-green);color:#0B1B3A;border:1px solid var(--wa-green);box-shadow:none}
@media(hover:hover){.btn-wa:hover,.btn[href*="wa.me"]:hover,.vers li a:hover{background:#1FBE5B;border-color:#1FBE5B}}
.btn-wa .wa-ic,.btn[href*="wa.me"] .wa-ic{background:transparent;color:#0B1B3A}.btn-wa svg,.btn[href*="wa.me"] svg{fill:#0B1B3A;color:#0B1B3A}
.btn-line{background:transparent;color:var(--action-primary);border:1.5px solid var(--action-primary)}
.btn-primary{background:var(--action-primary);color:var(--on-action-primary);border:1px solid var(--action-primary)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--brand-blue);outline-offset:2px}
.g-slide,.g-main,.card img,.g-thumbs button{background:var(--img-bg)}
.top img{height:44px;width:auto}@media(min-width:1024px){.top img{height:48px}}
.alt-price{display:block;margin-top:2px;font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:13px;font-weight:500;letter-spacing:0;color:var(--c-ink-2)}
.price .alt-price{font-size:15px}
.ft-bottom{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.ft-ig{display:inline-block;margin-top:10px;color:#F8F8F8;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.card{border-radius:16px}
.ft-tel,.ft-ig{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:#F8F8F8}.ft-ig{margin-top:12px;font-weight:600}.ft-ig span{text-decoration:underline;text-underline-offset:3px}
.btn-line[href*="wa.me"],.sticky-cta .btn[href*="wa.me"]+.x{background:transparent;color:var(--action-primary);border:1.5px solid var(--action-primary)}
.btn-line[href*="wa.me"] .wa-ic{color:#1FA855}.btn-line[href*="wa.me"] svg{fill:#1FA855}
.card img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}@media(hover:hover){.card:hover img{transform:scale(1.04)}}
.bk-kind,.cmp-cta p{color:#5E6470}:root[data-theme="dark"] .bk-kind,:root[data-theme="dark"] .cmp-cta p{color:var(--c-ink-2)}@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .bk-kind,:root:not([data-theme="light"]) .cmp-cta p{color:var(--c-ink-2)}}
/* ====================================================================
   CINE UI · capa visual cinemática (modo oscuro, vidrio, Anton + DM Sans)
   Colores del logo: azul #164E9B · rojo #C41E3A · marino #0B1B3A
   Solo cambia la estética: no toca estructura ni funciones.
   ==================================================================== */
/* Modo día (por defecto si el sistema está en claro) */
:root, :root[data-theme="light"] {
  --cx-blue: #164E9B; --cx-blue-hi: #1D5FBC; --cx-red: #C41E3A; --cx-red-hi: #D8324E;
  --font-title: "Anton", "Impact", "Arial Narrow", sans-serif;
  --font-display: "DM Sans", "Segoe UI", Arial, sans-serif; --font-accent: var(--font-display);
  --font: "DM Sans", "Segoe UI", Arial, sans-serif; --serif: var(--font); --sans: var(--font);
  --radius-card: 16px; --radius-btn: 10px;
  --c-bg: var(--cx-bg); --c-surface: var(--cx-surface-solid); --c-surface-2: var(--cx-surface-2); --c-card: var(--cx-surface-solid);
  --c-ink: var(--cx-silver); --c-ink-2: var(--cx-muted); --muted: var(--cx-muted); --ink-muted: var(--cx-muted);
  --c-line: var(--cx-line); --c-line-2: var(--cx-line-2); --c-chip: var(--cx-surface-2);
  --c-price: var(--cx-strong); --c-accent-text: var(--cx-red-text); --c-link: var(--cx-blue-text); --c-focus: var(--cx-blue-text);
  --c-header: rgb(11 12 14 / .96); --c-footer: #08090B;
  --brand-blue: var(--cx-blue-text); --brand-red: var(--cx-red); --brand-red-hover: var(--cx-red-hi); --brand-gold: var(--cx-strong);
  --red: var(--cx-red); --red-hi: var(--cx-red-hi); --gold-ink: var(--cx-strong);
  --action-primary: var(--cx-blue); --on-action-primary: #fff;
  --py-blue: var(--cx-blue-text); --py-red: var(--cx-red-text);
  --cx-bg: #F5F6F8; --cx-surface: rgb(255 255 255 / .96); --cx-surface-solid: #FFFFFF; --cx-surface-2: #EEF0F3;
  --cx-glass: rgb(255 255 255 / .86); --cx-glass-solid: #FFFFFF; --cx-input: #FFFFFF;
  --cx-line: rgb(11 27 58 / .10); --cx-line-2: rgb(11 27 58 / .20);
  --cx-silver: #1B2433; --cx-muted: #5E6470; --cx-strong: #0B1B3A;
  --cx-blue-text: #164E9B; --cx-red-text: #AD162F; --cx-tint: rgb(11 27 58 / .03);
  --cx-glow: 0 0 0 1px rgb(22 78 155 / .16), 0 18px 40px -20px rgb(22 78 155 / .35);
  --img-bg: #EEF0F3; --c-shadow: 0 1px 2px rgb(11 27 58 / .06), 0 14px 30px -16px rgb(11 27 58 / .18);
  color-scheme: light;
}
/* Modo noche */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --cx-bg: #0B0C0E; --cx-surface: rgb(18 20 26 / .95); --cx-surface-solid: #12141A; --cx-surface-2: #181B22;
  --cx-glass: rgb(18 20 26 / .82); --cx-glass-solid: #12141A; --cx-input: #0F1116;
  --cx-line: rgb(255 255 255 / .08); --cx-line-2: rgb(255 255 255 / .16);
  --cx-silver: #E1E4E8; --cx-muted: #A4ABB6; --cx-strong: #fff;
  --cx-blue-text: #7BA3F0; --cx-red-text: #F2697F; --cx-tint: rgb(255 255 255 / .04);
  --cx-glow: 0 0 0 1px rgb(123 163 240 / .18), 0 18px 40px -18px rgb(22 78 155 / .55);
  --img-bg: #15181F; --c-shadow: 0 1px 2px rgb(0 0 0 / .5), 0 16px 34px -14px rgb(0 0 0 / .7);
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --cx-bg: #0B0C0E; --cx-surface: rgb(18 20 26 / .95); --cx-surface-solid: #12141A; --cx-surface-2: #181B22;
  --cx-glass: rgb(18 20 26 / .82); --cx-glass-solid: #12141A; --cx-input: #0F1116;
  --cx-line: rgb(255 255 255 / .08); --cx-line-2: rgb(255 255 255 / .16);
  --cx-silver: #E1E4E8; --cx-muted: #A4ABB6; --cx-strong: #fff;
  --cx-blue-text: #7BA3F0; --cx-red-text: #F2697F; --cx-tint: rgb(255 255 255 / .04);
  --cx-glow: 0 0 0 1px rgb(123 163 240 / .18), 0 18px 40px -18px rgb(22 78 155 / .55);
  --img-bg: #15181F; --c-shadow: 0 1px 2px rgb(0 0 0 / .5), 0 16px 34px -14px rgb(0 0 0 / .7);
  color-scheme: dark;
}
/* Header, menú, hero y footer: siempre oscuros (el logo es claro) */
.top, .menu, .cine, .ft, .foot {
  --cx-silver: #E1E4E8; --cx-muted: #A4ABB6; --cx-strong: #fff; --cx-blue-text: #7BA3F0; --cx-red-text: #F2697F;
  --cx-line: rgb(255 255 255 / .08); --cx-line-2: rgb(255 255 255 / .16); --cx-tint: rgb(255 255 255 / .04);
  --cx-glass: rgb(18 20 26 / .82); --cx-glass-solid: #12141A; --cx-surface-2: #181B22;
  --c-ink: #E1E4E8; --c-ink-2: #A4ABB6; --c-line: rgb(255 255 255 / .08); --c-link: #7BA3F0; color-scheme: dark;
}
html, body { background: var(--cx-bg); color: var(--cx-silver); }
body { font-family: var(--font); overflow-x: clip; }
::selection { background: var(--cx-blue); color: #fff; }
:focus-visible { outline: 2px solid var(--cx-blue-text) !important; outline-offset: 3px; }
.theme-btn { color: #E1E4E8 !important; border: 1px solid rgb(255 255 255 / .2) !important; background: transparent !important; min-width: 44px; min-height: 44px; }
.theme-btn:hover { border-color: #7BA3F0 !important; }

/* ---------- Tipografía ---------- */
h1, h2, .sec-title h2, .h2-copy h1, .ft-cta h2, .cine-title {
  font-family: var(--font-title) !important; font-weight: 400 !important; text-transform: uppercase !important;
  letter-spacing: .01em !important; line-height: 1.02; color: var(--cx-strong); }
h2, .sec-title h2 { font-size: clamp(32px, 4.6vw, 58px) !important; }
h1 em, h2 em, .sec-title h2 em, .ft-cta h2 em { font-style: italic !important; color: var(--cx-blue-text) !important; font-family: var(--font-title) !important; font-weight: 400 !important; }
h3, h4, .offer-body h3, .nos-card h3, .way-card h3, .req-card h3, .cx-name, .diff-item b, .brand-btn b {
  font-family: var(--font) !important; font-weight: 700; letter-spacing: -.01em; }
.num, .vc-price, .vc-cuota b, .sticker b, .offer-body .price, [class*="price"], .diff-item b {
  font-family: var(--font); font-variant-numeric: tabular-nums; }
.kicker, .h2-kicker { font-family: var(--font) !important; color: var(--cx-red-text) !important; letter-spacing: .14em; }
.lead, .sec-title p { color: var(--cx-muted); }

/* ---------- Vidrio (con fondo sólido si el navegador no soporta backdrop-filter) ---------- */
.top, .menu { background: rgb(14 16 20 / .97); border-color: var(--cx-line); }
.cmp-tray, .cmp-dlg, .quiz, .hx-search { background: var(--cx-glass-solid); border-color: var(--cx-line); color: var(--cx-silver); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .top { background: rgb(11 12 14 / .84) !important; -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); }
  .menu { background: rgb(18 20 26 / .82) !important; -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); }
  .cmp-tray, .cmp-dlg, .quiz, .hx-search { background: var(--cx-glass) !important; -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); }
}

/* ---------- Header compacto ---------- */
.top { border-bottom: 1px solid var(--cx-line); box-shadow: none; animation: none; transition: box-shadow .3s var(--ease, ease); }
.top .top-in { transition: min-height .3s ease, padding .3s ease; }
.top .brand img { transition: height .3s ease, width .3s ease; }
.top.is-compact { box-shadow: 0 10px 30px -18px rgb(0 0 0 / .9); }
.top.is-compact .top-in { min-height: 58px; padding-block: 6px; }
.top.is-compact .brand img { height: 38px; width: auto; }
.top .nav a { color: var(--cx-silver); }
.top .nav a:hover { color: #fff; }

/* ---------- Botones ---------- */
.btn, .cine-btn { border-radius: var(--radius-btn) !important; font-family: var(--font) !important; font-weight: 700; letter-spacing: -.01em;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .25s ease, transform .2s ease; }
.btn-primary, .cine-btn-main, .hx-go, .cmp-go, .cmp-go2, .quiz .btn-primary {
  background: var(--cx-blue) !important; color: #fff !important; border-color: var(--cx-blue) !important; }
.btn-primary:hover, .cine-btn-main:hover, .hx-go:hover, .cmp-go:hover { background: var(--cx-blue-hi) !important; box-shadow: var(--cx-glow); }
/* Acción primaria en azul; el rojo queda para badges y detalles */
.btn-red { background: var(--cx-blue) !important; border-color: var(--cx-blue) !important; color: #fff !important; }
.btn-red:hover { background: var(--cx-blue-hi) !important; box-shadow: var(--cx-glow); }
.btn-line, .cine-btn-ghost { background: var(--cx-tint) !important; color: var(--cx-silver) !important; border: 1px solid var(--cx-line-2) !important; }
.btn-line:hover, .cine-btn-ghost:hover { border-color: var(--cx-blue-text) !important; color: var(--cx-strong) !important; background: rgb(22 78 155 / .14) !important; }
@media (hover: hover) { .btn:hover, .cine-btn:hover { transform: translateY(-1px); } }
.btn, .cine-btn, .chip, .type, .brand-btn, .icon-btn, .menu-btn, .cmp-toggle, .req-tabs [role=tab] { min-height: 44px; }

/* ---------- Tarjetas ---------- */
.vcard, .card, .way-card, .req-card, .nos-card, .offer, .brand-btn, .type, .diff-item, .faq details, .ask-sec form, .usado-box, .cx-card, .trend-col {
  background: var(--cx-surface) !important; border: 1px solid var(--cx-line) !important; border-radius: var(--radius-card);
  box-shadow: none; color: var(--cx-silver); transition: border-color .25s ease, box-shadow .3s ease, transform .3s ease; }
@media (hover: hover) {
  .vcard:hover, .card:hover, .way-card:hover, .offer:hover, .brand-btn:hover, .type:hover, .nos-card:hover {
    border-color: rgb(123 163 240 / .32) !important; box-shadow: var(--cx-glow); }
  .vcard:hover, .card:hover, .way-card:hover { transform: translateY(-3px); }
}
.vcard img, .card-img img, .offer-img img, .way-img img { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
@media (hover: hover) { .vcard:hover .card-img img, .card:hover .card-img img, .way-card:hover .way-img img { transform: scale(1.04); } }
.card-img, .offer-img, .way-img { overflow: hidden; background: var(--img-bg); }
.cond, .new { border-radius: 999px; font-weight: 700; letter-spacing: .02em; }
.vc-price, .offer-body .price { color: var(--cx-strong); }
.alt-price { color: var(--cx-muted); }
.brand-btn[aria-pressed="true"], .type[aria-pressed="true"], .chip[aria-pressed="true"] {
  border-color: var(--cx-blue-text) !important; background: rgb(22 78 155 / .18) !important; color: var(--cx-strong) !important; }

/* Chips de filtro */
.chip { background: var(--cx-surface-2) !important; border: 1px solid var(--cx-line-2) !important; color: var(--cx-silver) !important; border-radius: 999px !important; }
.type { padding-block: 10px; }
.type svg .car-body { fill: var(--cx-silver); }
.search .in, .in, .hx-f select, .fld input, .fld select, .ask-sec input, .ask-sec select {
  background: var(--cx-input) !important; color: var(--cx-silver) !important; border: 1px solid var(--cx-line-2) !important; border-radius: 10px; }
.in:focus, .hx-f select:focus, .fld input:focus, .fld select:focus { border-color: var(--cx-blue-text) !important; box-shadow: 0 0 0 3px rgb(123 163 240 / .2); }
.ask-sec input:user-invalid, .ask-sec select:user-invalid { border-color: var(--cx-red-text) !important; }

/* ---------- Secciones ---------- */
.sec, .diff, .ask-sec, #nosotros, .req, .way, .trend, .faq { background: transparent !important; color: var(--cx-silver); }
.diff { position: relative; isolation: isolate; }
.diff::after { display: none !important; }
.diff::before { content: ""; position: absolute; inset: 0; z-index: -1; width: auto; height: auto; right: 0; top: 0; transform: none; opacity: 1; display: block !important;
  background: radial-gradient(60% 80% at 15% 0%, rgb(22 78 155 / .22), transparent 70%), radial-gradient(50% 70% at 90% 100%, rgb(196 30 58 / .14), transparent 70%); }
.diff-item b { font-size: clamp(40px, 6vw, 64px) !important; color: var(--cx-strong); line-height: 1; }
.diff-item span { color: var(--cx-muted); }
.ask-sec, #nosotros, .way { border-block: 1px solid var(--cx-line); }
.faq details summary { color: var(--cx-strong); }
.faq details[open] { border-color: rgb(123 163 240 / .3) !important; }
.trend a, .trend-col a { border-radius: 999px; }
.req-note, .nos-lead, .nos-card p { color: var(--cx-muted); }

/* Requisitos: pestañas */
.req-tabs { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; margin: 0 0 18px; border: 1px solid var(--cx-line); border-radius: 999px; background: var(--cx-surface-2); max-width: 100%; }
@media (max-width: 560px) { .req-tabs { display: grid; width: 100%; } .req-tabs [role=tab] { padding: 0 4px; font-size: 14px !important; } }
.req-tabs [role=tab] { border: 0; background: transparent; color: var(--cx-muted); font: 700 15px/1 var(--font); padding: 0 18px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.req-tabs [role=tab][aria-selected="true"] { background: var(--cx-blue); color: #fff; }
.req-grid.is-tabs { display: block !important; }
.req-grid.is-tabs .req-card { max-width: 760px; }
.req-grid.is-tabs .req-card[hidden] { display: none !important; }

/* ---------- Hero cinemático ---------- */
.cine { background: #0B0C0E !important; isolation: isolate; position: relative; }
.cine-still { display: block !important; position: absolute; inset: 0; z-index: -2; }
.cine-still img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; display: block; }
.cine.has-video .cine-still { opacity: 0; transition: opacity .6s ease; }
.cine-video[hidden] { display: none !important; }
.cine-shade { background:
  radial-gradient(120% 90% at 50% 45%, transparent 35%, rgb(11 12 14 / .78) 100%),
  linear-gradient(180deg, rgb(11 12 14 / .55) 0%, rgb(11 12 14 / .05) 32%, rgb(11 12 14 / .15) 60%, rgb(11 12 14 / .96) 100%) !important; }
.cine-title { color: #fff !important; text-shadow: 0 10px 40px rgb(0 0 0 / .45); }
.cine-title span { color: var(--cx-red) !important; }
.cine-sub { font-family: var(--font) !important; color: #E1E4E8 !important; }
.cine .cine-btn-ghost { background: rgb(255 255 255 / .06) !important; color: #E1E4E8 !important; border-color: rgb(255 255 255 / .24) !important; }
@media (max-width: 760px) {
  .cine-video, .cine-still img { object-position: 50% 62%; }
}

/* ---------- Menú móvil (drawer) ---------- */
html.menu-open, html.menu-open body { overflow: hidden; }
.menu { border-left: 1px solid var(--cx-line) !important; color: var(--cx-silver); }
.menu a { color: var(--cx-silver) !important; border-color: var(--cx-line) !important; }
.menu a:hover { color: #fff !important; }
.menu::backdrop { background: rgb(0 0 0 / .55); }
@supports (backdrop-filter: blur(1px)) { .menu::backdrop { backdrop-filter: blur(3px); } }
@media (prefers-reduced-motion: no-preference) {
  .menu:popover-open { animation: cx-drawer .32s cubic-bezier(.2, .8, .2, 1); }
  @keyframes cx-drawer { from { transform: translateX(28px); opacity: 0; } }
}

/* ---------- Modales ---------- */
.cmp-dlg, .quiz { border: 1px solid var(--cx-line) !important; color: var(--cx-silver); border-radius: 20px; }
.cmp-dlg::backdrop, .quiz::backdrop { background: rgb(0 0 0 / .62); }
@supports (backdrop-filter: blur(1px)) { .cmp-dlg::backdrop, .quiz::backdrop { backdrop-filter: blur(4px); } }
.quiz-bar span, .quiz-bar i, .quiz-bar::after { background: var(--cx-blue) !important; }

/* ---------- Comparador flotante ---------- */
.cmp-tray { border: 1px solid var(--cx-line-2) !important; border-radius: 16px; color: var(--cx-silver); box-shadow: 0 20px 40px -18px rgb(0 0 0 / .9); }

/* ---------- Footer ---------- */
.ft, .foot { background: var(--c-footer) !important; border-top: 1px solid var(--cx-line); }
.ft-cta { border-bottom: 1px solid var(--cx-line); }
.ft a { color: var(--cx-silver); }
.ft nav h3 { color: #fff; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.ft-bottom { color: var(--cx-muted); }
/* Contacto del footer: minimalista, íconos del color del texto */
.ft-social { list-style: none; margin: 16px 0 4px; padding: 0; display: grid; gap: 0; }
.soc { display: inline-flex !important; align-items: center; gap: 10px; min-height: 40px; padding: 0; background: none; border: 0;
  color: var(--cx-silver) !important; text-decoration: none !important; transition: color .2s ease; }
.soc:hover { color: #fff !important; }
.soc:hover .soc-tx b { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.soc-ic { flex: none; width: 18px; height: 18px; display: grid; place-items: center; color: var(--cx-muted); background: none !important; }
.soc-ic svg { width: 18px; height: 18px; }
.soc:hover .soc-ic { color: #fff; }
.soc-tx { display: block; line-height: 1.2; }
.soc-tx small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.soc-tx b { font-size: 15px; font-weight: 500; color: inherit; font-variant-numeric: tabular-nums; }
.ft-phone { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 2px; }
.ft-phone .ft-tel, .ft-phone #copy { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none;
  color: var(--cx-muted); font: 500 14px var(--font); cursor: pointer; text-decoration: none; }
.ft-phone .ft-tel svg { width: 16px; height: 16px; }
.ft-phone .ft-tel:hover, .ft-phone #copy:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Botón flotante de WhatsApp: no tapa el comparador ---------- */
.fab { bottom: calc(16px + env(safe-area-inset-bottom)); right: calc(16px + env(safe-area-inset-right)); }
body:has(.cmp-tray:not([hidden])) .fab { bottom: calc(96px + env(safe-area-inset-bottom)); }

/* ---------- Entradas al hacer scroll ---------- */
html.fx .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1); }
html.fx .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.fx .reveal { opacity: 1; transform: none; transition: none; }
  .vcard, .card, .way-card, .btn, .cine-btn, .soc { transition: none !important; transform: none !important; }
}

#usado .offer { border-radius: 0; border-inline: 0 !important; }
#nosotros, #nosotros p, .nos-card p, .nos-values p, .nos-card span { color: var(--cx-muted) !important; }
#nosotros .nos-card h3, #nosotros b, #nosotros strong { color: var(--cx-strong) !important; }
.trend-col { padding: 16px 18px !important; }
.trend-col h3 { color: var(--cx-strong); margin-top: 0; }
.trend-col a { color: var(--cx-silver) !important; }
.trend-col a:hover { color: var(--cx-strong) !important; }
.ft-social li { margin: 0; }
@media (max-width: 760px) {
  .fab { transition: opacity .25s ease, transform .25s ease; }
  html.at-top .fab { opacity: 0; pointer-events: none; transform: translateY(12px); }
}
.req .sec-title { border: 0 !important; background: none !important; padding: 0 !important; box-shadow: none !important; }
.req-grid.is-tabs { border: 0 !important; background: none !important; padding: 0 !important; box-shadow: none !important; }
/* Fichas: datos clave en plata/blanco, sin dorado */
.specs > div { background: var(--cx-surface) !important; border: 1px solid var(--cx-line) !important; }
.specs dt { color: var(--cx-muted); }
/* Hero: movimiento lento de cámara sobre la foto mientras carga el video (o si no hay video) */
@media (prefers-reduced-motion: no-preference) {
  .cine:not(.has-video) .cine-still img { animation: cx-kenburns 22s ease-in-out infinite alternate; transform-origin: 55% 55%; }
  @keyframes cx-kenburns { from { transform: scale(1.02); } to { transform: scale(1.14) translate(-1.5%, -1%); } }
  .cine.has-video .cine-video { animation: cx-fadein 1.2s ease both; }
  @keyframes cx-fadein { from { opacity: 0; } }
}
.sec-title { background: none !important; border: 0 !important; box-shadow: none !important; }
.sec-title:not(.wrap) { padding-inline: 0 !important; }
.diff h2, .diff-item b { color: var(--cx-strong) !important; }
.diff-item span { color: var(--cx-muted) !important; }
.diff-grid { border: 0 !important; background: none !important; box-shadow: none !important; }

/* ---------- Header sobre el video: transparente, se vuelve vidrio al bajar ---------- */
body:has(.cine) .top:not(.is-compact) {
  background: linear-gradient(180deg, rgb(11 12 14 / .58) 0%, rgb(11 12 14 / .18) 70%, rgb(11 12 14 / 0) 100%) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-bottom-color: transparent !important; box-shadow: none !important; }
body:has(.cine) .top:not(.is-compact) .nav a { text-shadow: 0 1px 14px rgb(0 0 0 / .5); }
.top.is-compact { background: rgb(11 12 14 / .86) !important; }
.top .icon-btn, .top .theme-btn, .top .menu-btn {
  background: rgb(255 255 255 / .06) !important; border: 1px solid rgb(255 255 255 / .16) !important; color: #E1E4E8 !important; border-radius: 999px; }
.top .icon-btn:hover, .top .theme-btn:hover, .top .menu-btn:hover { background: rgb(255 255 255 / .12) !important; border-color: rgb(255 255 255 / .3) !important; }
.top .nav a { position: relative; }
@media (hover: hover) {
  .top .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--cx-red), var(--cx-blue-text)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .25s ease; }
  .top .nav a:hover::after { transform: scaleX(1); }
}
.progress { height: 2px; background: linear-gradient(90deg, var(--cx-red), var(--cx-blue-text)) !important; }

/* ---------- WhatsApp: botón claro de la marca (fondo claro, texto marino, ícono verde) ---------- */
.btn-wa, .btn[href*="wa.me"], .cx-wa, .vers li a, .ft-wa, #ask-send {
  background: #F8F9FB !important; color: #0B1B3A !important; border: 1px solid rgb(11 27 58 / .14) !important;
  box-shadow: 0 1px 2px rgb(11 27 58 / .06), 0 10px 24px -14px rgb(11 27 58 / .45) !important; }
.btn-wa svg, .btn[href*="wa.me"] svg, .cx-wa svg, .ft-wa svg, #ask-send svg { fill: #16A34A !important; color: #16A34A !important; }
.btn-wa .wa-ic, .btn[href*="wa.me"] .wa-ic, .cx-wa .wa-ic, .ft-wa .wa-ic { background: transparent !important; color: #16A34A !important; }
@media (hover: hover) {
  .btn-wa:hover, .btn[href*="wa.me"]:hover, .cx-wa:hover, .vers li a:hover, .ft-wa:hover, #ask-send:hover {
    background: #FFFFFF !important; border-color: rgb(22 163 74 / .55) !important; box-shadow: 0 0 0 3px rgb(22 163 74 / .12), 0 12px 26px -14px rgb(11 27 58 / .5) !important; }
}
html body .fab { --fab-bg: #F8F9FB !important; --fab-ink: #16A34A !important; --fab-ring: rgb(11 27 58 / .16) !important;
  background: #F8F9FB !important; border: 1px solid rgb(11 27 58 / .14) !important; box-shadow: 0 12px 28px -12px rgb(0 0 0 / .55) !important; }
html body .fab svg { fill: #16A34A !important; color: #16A34A !important; }
/* El video arranca detrás del header: la portada sube la altura del header */
body:has(.cine) .cine { margin-top: calc(-1 * var(--top-h, 76px)); padding-top: var(--top-h, 76px); min-height: max(640px, 100svh) !important; }
/* Fichas: sin dorado; el brillo de los datos clave usa el azul de la marca */
.specs, .specs * { --gold: var(--cx-blue-text) !important; --gold-ink: var(--cx-strong) !important; }
/* Video vertical: ya viene encuadrado, se centra en cualquier pantalla vertical */
@media (orientation: portrait) {
  .cine-video, .cine-still img { object-position: 50% 50% !important; }
}
/* Header: el menú completo solo entra desde 1180 px; debajo, botón de menú (tablets y celulares acostados) */
.top .nav a { white-space: nowrap; }
@media (max-width: 1180px) {
  .top .nav, .top .btn-red { display: none !important; }
  .top .menu-btn { display: flex !important; }
  .top-in .icon-btn { margin-left: auto; }
}
/* Celular acostado y pantallas bajas: el hero entra completo */
@media (orientation: landscape) and (max-height: 560px) {
  body:has(.cine) .cine { min-height: max(400px, 100svh) !important; }
  .cine-title { font-size: clamp(40px, 15vh, 96px) !important; }
  .cine-sub { font-size: 16px !important; }
  .cine-btn { min-height: 44px !important; padding-block: 0 !important; }
  .cine-ui { padding-block: 12px !important; }
}
/* Botón flotante: hasta 1180 px aparece después de la portada, para no tapar sus botones */
@media (max-width: 1180px) {
  .fab { transition: opacity .25s ease, transform .25s ease; }
  html.at-top .fab { opacity: 0; pointer-events: none; transform: translateY(12px); }
}
/* "Ver escena" siempre debajo del header, sin superponerse */
.cine-scene { top: 14px !important; }

/* ====================================================================
   SECCIONES · cada bloque con su propio fondo, en dos ritmos:
   - "base" y "alterna": siguen el modo día/noche
   - "escena": bandas oscuras cinemáticas (en los dos modos), como el video
   ==================================================================== */
:root, :root[data-theme="light"] { --sx-alt: #E9ECF1; --sx-alt-2: #EEF1F6; --sx-dot: rgb(11 27 58 / .07); --sx-edge: rgb(11 27 58 / .08); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sx-alt: #121722; --sx-alt-2: #0F131C; --sx-dot: rgb(255 255 255 / .05); --sx-edge: rgb(255 255 255 / .06); } }
:root[data-theme="dark"] { --sx-alt: #121722; --sx-alt-2: #0F131C; --sx-dot: rgb(255 255 255 / .05); --sx-edge: rgb(255 255 255 / .06); }

/* Escenas oscuras: marcas, auto de la semana, por qué, nosotros */
main > .brands, #destacado, main > .diff, #nosotros {
  --cx-bg: #0B0C0E; --cx-surface: rgb(18 20 26 / .78); --cx-surface-solid: #12141A; --cx-surface-2: #181B22;
  --cx-glass: rgb(18 20 26 / .82); --cx-glass-solid: #12141A; --cx-input: #0F1116;
  --cx-line: rgb(255 255 255 / .09); --cx-line-2: rgb(255 255 255 / .18);
  --cx-silver: #E1E4E8; --cx-muted: #A9B0BB; --cx-strong: #fff;
  --cx-blue-text: #7BA3F0; --cx-red-text: #F2697F; --cx-tint: rgb(255 255 255 / .05);
  --cx-glow: 0 0 0 1px rgb(123 163 240 / .2), 0 18px 40px -18px rgb(22 78 155 / .6);
  --img-bg: #15181F; --c-bg: #0B0C0E; --c-surface: #12141A; --c-surface-2: #181B22; --c-card: #12141A;
  --c-ink: #E1E4E8; --c-ink-2: #A9B0BB; --muted: #A9B0BB; --ink-muted: #A9B0BB; --c-line: rgb(255 255 255 / .09); --c-line-2: rgb(255 255 255 / .18);
  --c-price: #fff; --c-accent-text: #F2697F; --c-link: #7BA3F0; --c-focus: #7BA3F0; --brand-blue: #7BA3F0; --py-blue: #7BA3F0; --py-red: #F2697F;
  --brand-gold: #fff; --gold-ink: #fff; color-scheme: dark; color: var(--cx-silver);
}

/* Ritmo vertical parejo en todas las secciones */
main > .sec, main > .diff, main > section.trend { position: relative; isolation: isolate; padding-block: clamp(64px, 8vw, 112px) !important; border: 0 !important; }
main > section + section { box-shadow: inset 0 1px 0 var(--sx-edge); }

/* 1 · Marcas en stock: continúa la portada */
main > .brands { background: linear-gradient(180deg, #0B0C0E 0%, #0D1220 100%) !important; border: 0 !important; }
main > .brands * { color: inherit; }
main > .brands .brand-btn small { color: var(--cx-muted); }

/* 2 · El auto de la semana: escenario con luz azul y piso reflejado */
#destacado { background:
  radial-gradient(55% 60% at 30% 55%, rgb(22 78 155 / .38), transparent 70%),
  radial-gradient(40% 40% at 85% 15%, rgb(196 30 58 / .14), transparent 70%),
  linear-gradient(180deg, #0D1220 0%, #0B0C0E 62%, #08090B 100%) !important; }
#destacado::after { content: ""; position: absolute; inset: auto 0 0; height: 38%; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgb(255 255 255 / .025) 0 1px, transparent 1px 96px), linear-gradient(180deg, transparent, rgb(123 163 240 / .06)); }
#destacado .offer { background: rgb(18 20 26 / .55) !important; border-color: rgb(255 255 255 / .1) !important; }

/* 3 · Autos disponibles: fondo base limpio, protagonismo de las fotos */
#stock { background: var(--cx-bg) !important; }

/* 4 · Tres formas: banda alterna con trazos de la cinta del logo */
#tu-manera { background:
  radial-gradient(70% 90% at 100% 0%, rgb(22 78 155 / .10), transparent 60%),
  radial-gradient(60% 80% at 0% 100%, rgb(196 30 58 / .07), transparent 60%),
  var(--sx-alt) !important; }

/* 5 · Requisitos: base con grilla de puntos (orden, papeles) */
#requisitos { background: radial-gradient(var(--sx-dot) 1px, transparent 1.5px) 0 0 / 22px 22px, var(--cx-bg) !important; }

/* 6 · Por qué: escena oscura con luces roja y azul */
main > .diff { background:
  radial-gradient(50% 90% at 10% 0%, rgb(22 78 155 / .45), transparent 70%),
  radial-gradient(45% 80% at 95% 100%, rgb(196 30 58 / .28), transparent 70%),
  linear-gradient(135deg, #0B1B3A 0%, #0B0C0E 70%) !important; }
main > .diff::before { display: none !important; }

/* 7 · A pedido: alterna con un velo azul */
#pedido { background: linear-gradient(180deg, var(--sx-alt) 0%, var(--sx-alt-2) 100%), var(--sx-alt) !important; }
#pedido::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 70% at 85% 40%, rgb(22 78 155 / .12), transparent 70%); }

/* 8 · Tu usado: base */
#usado { background: var(--cx-bg) !important; }

/* 9 · Te atiende Emanuel: alterna, cálida */
#asesor { background: radial-gradient(60% 90% at 0% 50%, rgb(196 30 58 / .08), transparent 65%), var(--sx-alt) !important; }

/* 10 · Nosotros: escena azul marino */
#nosotros { background:
  radial-gradient(60% 70% at 100% 0%, rgb(123 163 240 / .14), transparent 70%),
  linear-gradient(180deg, #0B1B3A 0%, #0A1430 55%, #0B0C0E 100%) !important; }
#nosotros .nos-card { background: rgb(255 255 255 / .04) !important; border-color: rgb(255 255 255 / .1) !important; }

/* 11 · Preguntas: base */
#preguntas { background: var(--cx-bg) !important; }

/* 12 · Búsquedas populares: alterna, cierre suave hacia el footer */
main > section.trend { background: linear-gradient(180deg, var(--sx-alt) 0%, var(--sx-alt-2) 100%) !important; }

/* ---------- Tipografía editorial: índice numerado en cada sección ---------- */
main { counter-reset: cx-sec; }
main .kicker { display: inline-flex !important; align-items: center; gap: 10px; font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: .18em !important; text-transform: uppercase; margin-bottom: 14px; }
main .kicker::before { counter-increment: cx-sec; content: counter(cx-sec, decimal-leading-zero);
  font: 400 15px/1 var(--font-title); letter-spacing: .04em; color: var(--cx-strong); opacity: .9;
  padding-right: 12px; margin-right: 2px; border-right: 1px solid currentColor; border-image: linear-gradient(180deg, var(--cx-red), var(--cx-blue-text)) 1;
  width: auto !important; height: auto !important; background: none !important; }
.row-title:has(.kicker) { flex-wrap: wrap; }
.row-title .kicker { flex-basis: 100%; }
main > .diff .kicker, #destacado .kicker, #nosotros .kicker { color: var(--cx-red-text) !important; }
/* Títulos: escala más marcada en las escenas */
#destacado h2, main > .diff h2, #nosotros h2 { font-size: clamp(38px, 6vw, 78px) !important; }
.sec-title h2, .row-title h2 { max-width: 16ch; }
main > .diff h2 { max-width: none; }
.lead, .sec-title p, .nos-lead { font-size: clamp(16px, 1.25vw, 19px) !important; line-height: 1.6; max-width: 62ch; }
/* Textos dentro de las escenas oscuras: siempre claros, también en modo día */
#destacado .offer-body, #destacado .offer-body p, #destacado .offer-specs, #destacado .offer-specs * { color: var(--cx-silver) !important; }
#destacado .offer-body h3, #destacado .offer-body .price, #destacado .offer-body b, #destacado .offer-specs b, #destacado .offer-specs dd { color: #fff !important; }
#destacado .offer-body small, #destacado .offer-specs dt, #destacado .alt-price, #destacado .offer-body .kicker { color: var(--cx-muted) !important; }
main > .diff *, #nosotros h3, #nosotros b { color: inherit; }

/* ====================================================================
   TARJETA DE AUTO COMPACTA (menos scroll)
   Escritorio: foto 4:3 + datos en una línea + una fila de acciones.
   Celular: tarjeta horizontal (foto a la izquierda, datos a la derecha).
   ==================================================================== */
.vc2 { display: flex !important; flex-direction: column; overflow: hidden; }
.vc2 .card-img { aspect-ratio: 4 / 3 !important; height: auto !important; position: relative; display: block; }
.vc2 .card-img img, .vc2 .card-img picture, .vc2 .card-img .fit { width: 100% !important; height: 100% !important; }
.vc2 .card-img img { object-fit: cover !important; object-position: 50% 58% !important; }
.vc2 .card-body { display: flex !important; flex-direction: column; gap: 10px; padding: 16px 18px 18px !important; flex: 1; }
.vc2 h3 { margin: 0 !important; font-size: 18px !important; line-height: 1.25; }
.vc2 h3 a { color: var(--cx-strong) !important; text-decoration: none; }
.vc2 h3 small { display: block; margin-top: 3px; font: 500 13px/1.35 var(--font) !important; color: var(--cx-muted) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc2 .vc-meta { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--cx-muted); min-width: 0; }
.vc2 .vc-meta svg { width: 16px; height: 16px; flex: none; color: var(--cx-red-text); }
.vc2 .vc-meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc2 .vc-meta i { font-style: normal; opacity: .5; margin: 0 6px; }
.vc2 .vc-price { margin: 2px 0 0 !important; padding: 0 !important; border: 0 !important; }
.vc2 .vc-cuota { margin: 0 !important; padding: 0 !important; border: 0 !important; }
.vc2 .vc-cuota small { font-size: 11px !important; letter-spacing: .12em; }
.vc2 .vc-cuota b { font-size: clamp(22px, 2vw, 26px) !important; line-height: 1.1; }
.vc2 .vc-actions { margin-top: auto; display: grid; grid-template-columns: 1fr auto 44px; gap: 8px; align-items: stretch; }
.vc2 .vc-wa, .vc2 .vc-ficha { min-height: 44px !important; padding: 0 12px !important; font-size: 14px !important; gap: 6px;
  display: inline-flex !important; align-items: center; justify-content: center; white-space: nowrap; width: auto !important; margin: 0 !important; }
.vc2 .vc-wa svg { width: 18px; height: 18px; flex: none; }
.vc2 .vc-cmp { width: 44px; min-height: 44px; padding: 0 !important; margin: 0 !important; display: inline-grid !important; place-items: center;
  border-radius: var(--radius-btn); border: 1px solid var(--cx-line-2) !important; background: var(--cx-tint) !important; color: var(--cx-silver) !important; cursor: pointer; }
.vc2 .vc-cmp svg { width: 18px; height: 18px; }
.vc2 .vc-cmp:hover { border-color: var(--cx-blue-text) !important; color: var(--cx-strong) !important; }
.vc2 .vc-cmp[aria-pressed="true"] { background: var(--cx-red) !important; border-color: var(--cx-red) !important; color: #fff !important; }
.vc2 .vc-cmp-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vc2 .cond, .vc2 .pics { font-size: 11px !important; padding: 4px 9px !important; }

@media (max-width: 600px) {
  #grid { gap: 12px !important; }
  .vc2 { display: grid !important; grid-template-columns: 40% 1fr; align-items: stretch; }
  .vc2 .card-img { aspect-ratio: auto !important; height: 100% !important; min-height: 200px; }
  .vc2 .card-img img { object-position: 50% 50% !important; }
  .vc2 .card-body { padding: 12px 12px 12px 14px !important; gap: 6px; min-width: 0; }
  .vc2 h3 { font-size: 16px !important; }
  .vc2 h3 small { font-size: 12px !important; }
  .vc2 .vc-meta { font-size: 12px; }
  .vc2 .vc-meta svg { display: none; }
  .vc2 .vc-meta i { margin: 0 4px; }
  .vc2 .vc-cuota b { font-size: clamp(17px, 5vw, 20px) !important; white-space: nowrap; }
  .vc2 .vc-cuota small { font-size: 10px !important; }
  .vc2 .vc-actions { grid-template-columns: 1fr 44px; gap: 6px; }
  .vc2 .vc-ficha { display: none !important; }
  .vc2 .vc-wa { padding: 0 8px !important; font-size: 13px !important; }
  .vc2 .pics { display: none !important; }
  .vc2 .cond { top: 8px !important; left: 8px !important; }
  @media (hover: hover) { .vc2:hover { transform: none; } }
}

/* ====================================================================
   SECCIONES 06 · 07 · 08 — tres superficies distintas (antes se veían iguales)
   06 A pedido ........ escena azul marino #0B1B3A (inmersiva, formulario en vidrio)
   07 Tu usado ........ neutro con textura sutil + tarjeta elevada
   08 Te atiende ...... banda carmesí #C41E3A de alto contraste (llamada a la acción)
   ==================================================================== */
#pedido, #asesor {
  --cx-bg: #0B0C0E; --cx-surface: rgb(18 20 26 / .78); --cx-surface-solid: #12141A; --cx-surface-2: #181B22;
  --cx-glass: rgb(18 20 26 / .82); --cx-glass-solid: #12141A; --cx-input: #0F1116;
  --cx-line: rgb(255 255 255 / .09); --cx-line-2: rgb(255 255 255 / .18);
  --cx-silver: #E1E4E8; --cx-muted: #A9B0BB; --cx-strong: #fff;
  --cx-blue-text: #7BA3F0; --cx-red-text: #F2697F; --cx-tint: rgb(255 255 255 / .05);
  --cx-glow: 0 0 0 1px rgb(123 163 240 / .2), 0 18px 40px -18px rgb(22 78 155 / .6);
  --img-bg: #15181F; --c-bg: #0B0C0E; --c-surface: #12141A; --c-surface-2: #181B22; --c-card: #12141A;
  --c-ink: #E1E4E8; --c-ink-2: #A9B0BB; --muted: #A9B0BB; --ink-muted: #A9B0BB; --c-line: rgb(255 255 255 / .09); --c-line-2: rgb(255 255 255 / .18);
  --c-price: #fff; --c-accent-text: #F2697F; --c-link: #7BA3F0; --c-focus: #7BA3F0; --brand-blue: #7BA3F0; --py-blue: #7BA3F0; --py-red: #F2697F;
  --brand-gold: #fff; --gold-ink: #fff; color-scheme: dark; color: var(--cx-silver);
}
#pedido { background:
  radial-gradient(55% 80% at 88% 30%, rgb(123 163 240 / .22), transparent 70%),
  radial-gradient(40% 60% at 0% 100%, rgb(196 30 58 / .16), transparent 70%),
  linear-gradient(160deg, #0B1B3A 0%, #0A1430 60%, #0B1B3A 100%) !important; }
#pedido::before { display: none !important; }
#pedido form { background: rgb(18 20 26 / .55) !important; border: 1px solid rgb(255 255 255 / .12) !important;
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / .8); }
@supports (backdrop-filter: blur(1px)) { #pedido form { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } }
#pedido .seg button, #pedido [role="radio"], #pedido .opt { color: var(--cx-silver); }

/* 07: neutro con textura (líneas diagonales muy suaves) y la tarjeta elevada */
:root, :root[data-theme="light"] { --sx-neutral: #F1F2F4; --sx-tex: rgb(11 27 58 / .035); --sx-lift: 0 30px 60px -28px rgb(11 27 58 / .35); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sx-neutral: #15181E; --sx-tex: rgb(255 255 255 / .025); --sx-lift: 0 30px 60px -24px rgb(0 0 0 / .85); } }
:root[data-theme="dark"] { --sx-neutral: #15181E; --sx-tex: rgb(255 255 255 / .025); --sx-lift: 0 30px 60px -24px rgb(0 0 0 / .85); }
#usado { background: repeating-linear-gradient(135deg, var(--sx-tex) 0 1px, transparent 1px 14px), var(--sx-neutral) !important; }
#usado .offer { border-radius: var(--radius-card) !important; border-inline: 1px solid var(--cx-line) !important; box-shadow: var(--sx-lift) !important;
  max-width: calc(var(--max, 1200px) - 2 * var(--gutter, 24px)); margin-inline: auto; }
@media (max-width: 760px) { #usado .offer { margin-inline: var(--gutter, 16px); } }

/* 08: banda carmesí con la tarjeta en vidrio y el botón claro de WhatsApp */
#asesor { background:
  radial-gradient(60% 120% at 100% 0%, rgb(255 255 255 / .14), transparent 60%),
  radial-gradient(50% 100% at 0% 100%, rgb(11 27 58 / .45), transparent 70%),
  linear-gradient(120deg, #C41E3A 0%, #A8182F 55%, #7E1124 100%) !important; }
#asesor .adv-in { background: rgb(255 255 255 / .08) !important; border: 1px solid rgb(255 255 255 / .22) !important; box-shadow: 0 24px 50px -28px rgb(0 0 0 / .6) !important; }
#asesor .adv-in::before, #asesor .adv-in::after { display: none !important; }
#asesor h2, #asesor h2 em { color: #fff !important; }
#asesor h2 em { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: rgb(255 255 255 / .55); }
#asesor p { color: rgb(255 255 255 / .88) !important; }
#asesor .kicker { color: #fff !important; }
#asesor .kicker::before { color: #fff; border-image: none; border-right-color: rgb(255 255 255 / .5); }
#asesor .adv-mark { background: #fff !important; color: #C41E3A !important; }
/* Transición: el carmesí entra al azul de Nosotros sin corte duro */
#asesor + #nosotros { box-shadow: inset 0 1px 0 rgb(255 255 255 / .08); }

/* ====================================================================
   CHIPS DE BÚSQUEDA RÁPIDA (reemplazan "Búsquedas populares")
   ==================================================================== */
.hx-chips { display: flex; gap: 8px; margin: 14px 0 0; padding: 2px 0 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(90deg, #000 92%, transparent); }
.hx-chips::-webkit-scrollbar { display: none; }
.hx-chip { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--cx-line-2); background: var(--cx-tint); color: var(--cx-silver) !important; font: 600 14px/1 var(--font);
  text-decoration: none !important; white-space: nowrap; transition: border-color .2s ease, background-color .2s ease, color .2s ease; }
.hx-chip:hover { border-color: var(--cx-blue-text); background: rgb(22 78 155 / .14); color: var(--cx-strong) !important; }
@media (min-width: 900px) { .hx-chips { flex-wrap: wrap; overflow: visible; mask-image: none; } }

/* ====================================================================
   FOTOS: encuadre sin perder ruedas, techo ni parrilla
   Las portadas son 3:4 con el auto entre el 15% y el 85% de la altura.
   - Celular: tarjeta horizontal con la foto en 3:4 exacto (sin recorte).
   - Tablet/escritorio: 1:1 centrado (se ve el 75% central: el auto entero).
   - Comparador: 1:1 centrado sobre fondo neutro.
   ==================================================================== */
.vc2 .card-img { aspect-ratio: 1 / 1 !important; background: var(--img-bg); }
.vc2 .card-img img { object-fit: cover !important; object-position: 50% 50% !important; }
.cx-img { aspect-ratio: 1 / 1 !important; background: var(--img-bg) !important; }
.cx-img img { object-fit: cover !important; object-position: 50% 50% !important; }

/* Celular 360–430: todas las tarjetas con la misma altura */
@media (max-width: 600px) {
  .vc2 { grid-template-columns: auto minmax(0, 1fr) !important; height: 212px; }
  .vc2 .card-img { aspect-ratio: 3 / 4 !important; height: 212px !important; width: auto !important; min-height: 0 !important; }
  .vc2 .card-img img { object-fit: cover !important; object-position: 50% 50% !important; }
  .vc2 .card-body { overflow: hidden; }
  .vc2 h3 a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .vc2 h3 small { margin-top: 2px; }
}

/* ====================================================================
   BARRA "COMPARAR" EN CELULAR: acoplada abajo, compacta y sin tapar contenido
   ==================================================================== */
@media (max-width: 700px) {
  .cmp-tray { left: 0 !important; right: 0 !important; bottom: 0 !important; translate: none !important; width: 100% !important;
    border-radius: 16px 16px 0 0 !important; border-inline: 0 !important; border-bottom: 0 !important;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom)) !important; flex-wrap: nowrap !important; gap: 10px !important; z-index: 45 !important; }
  .cmp-slots { display: flex !important; gap: 6px !important; flex: 1 1 auto !important; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .cmp-slot { flex: none !important; width: 52px; height: 48px; padding: 0 !important; display: block !important; position: relative; border-radius: 10px; overflow: hidden; }
  .cmp-slot img { width: 52px !important; height: 48px !important; object-fit: cover; border-radius: 10px; }
  .cmp-slot span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cmp-slot.is-empty { display: none !important; }
  .cmp-slot button { width: 22px !important; height: 22px !important; min-height: 0 !important; top: 2px !important; right: 2px !important; font-size: 12px; }
  .cmp-actions { flex: none; display: flex; align-items: center; gap: 8px; }
  .cmp-actions .cmp-go { min-height: 44px; padding-inline: 14px; white-space: nowrap; }
  /* El contenido deja lugar para la barra y el botón flotante sube por encima */
  body:has(.cmp-tray:not([hidden])) { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  body:has(.cmp-tray:not([hidden])) .fab { bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
}
/* Textos claros garantizados en las bandas de color (también en modo día) */
#pedido h2, #pedido h2 em { color: #fff !important; }
#pedido h2 em { color: var(--cx-blue-text) !important; }
#pedido .ask-copy p, #pedido .ask-copy li { color: #C9D2E3 !important; }
#pedido label, #pedido .fld span, #pedido small { color: #C9D2E3 !important; }
/* Celulares de 360–380 px: tarjeta un poco más baja para que entren los dos botones */
@media (max-width: 380px) {
  .vc2 { height: 196px !important; }
  .vc2 .card-img { height: 196px !important; }
  .vc2 .card-body { padding: 10px 10px 10px 12px !important; gap: 4px; }
  .vc2 .vc-wa { font-size: 12.5px !important; padding: 0 6px !important; gap: 4px; }
}