/* ============================================================
   CERTIFICADOS — sistema de diseño
   Fusión Kavak (transaccional) + Cinch (cálido), marca verde Bahía.
   ============================================================ */
@font-face{font-family:'Geist';src:url('/fonts/Geist.woff2') format('woff2');font-weight:300 800;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('/fonts/GeistMono.woff2') format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:'Bricolage Grotesque';src:url('/fonts/Bricolage.woff2') format('woff2');font-weight:300 800;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('/fonts/Hanken.woff2') format('woff2');font-weight:300 800;font-display:swap}

:root{
  --jade:#053B33; --jade-2:#0A4A40; --jade-deep:#032A24;
  --verde:#029E82; --verde-d:#02795F; --verde-050:#E8F6F1; --verde-100:#D3EDE5;
  --ink:#122019; --ink-2:#47574F; --muted:#7C8B84; --line:#E6ECE9; --line-2:#D6DEDA;
  --bg:#FFFFFF; --panel:#FBFCFB; --sand:#F4F1E9; --sand-2:#EDE8DB;
  --ok:#12A150; --star:#F2A900;
  --sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:'Geist','Hanken Grotesk',system-ui,sans-serif;
  --mono:'Geist Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --r:16px; --r-sm:10px; --r-pill:999px;
  --shadow:0 20px 46px -30px rgba(5,40,36,.4);
  --wrap:1220px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15.5px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;line-height:1.06}
.mono{font-family:var(--mono);font-feature-settings:"tnum" 1;letter-spacing:-.01em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}
.eyebrow{font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--verde-d);font-weight:600}
.tnum{font-variant-numeric:tabular-nums}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14.5px;font-weight:600;
  padding:12px 22px;border-radius:var(--r-pill);border:1.5px solid transparent;cursor:pointer;transition:.15s;white-space:nowrap}
.btn-verde{background:var(--verde);color:#fff}
.btn-verde:hover{background:var(--verde-d)}
.btn-jade{background:var(--jade);color:#fff}
.btn-jade:hover{background:var(--jade-deep)}
.btn-line{background:#fff;border-color:var(--line-2);color:var(--ink)}
.btn-line:hover{border-color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:#eef3f1}
.btn-lg{padding:15px 28px;font-size:15.5px}
.btn-block{width:100%}

/* topbar */
.topbar{background:var(--jade);color:#cfe6df;font-size:13px}
.topbar .wrap{display:flex;align-items:center;justify-content:center;gap:10px;height:34px;text-align:center;font-size:12.5px}
.topbar svg{width:15px;height:15px;flex-shrink:0;vertical-align:middle}
.topbar b{color:#fff}
.topbar a{color:#9fe0cf;text-decoration:underline;text-underline-offset:2px}

/* header */
header.site{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:saturate(1.3) blur(10px);backdrop-filter:saturate(1.3) blur(10px);
  border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:26px;height:58px}
.logo{display:flex;align-items:center;gap:11px;flex-shrink:0}
.logo-bahia{height:19px;width:auto;display:block}
.logo-sep{width:1px;height:19px;background:var(--line-2);flex-shrink:0}
.logo-word{font-family:var(--font-display);font-weight:700;font-size:18.5px;letter-spacing:-.02em;color:var(--ink);line-height:1}
.logo-word b{color:var(--verde);font-weight:700}
nav.main{display:flex;gap:22px;font-size:14.5px;font-weight:500;color:var(--ink-2)}
nav.main a{padding:6px 0;position:relative}
nav.main a:hover,nav.main a.active{color:var(--verde-d)}
nav.main a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--verde);border-radius:2px}
.hactions{margin-left:auto;display:flex;align-items:center;gap:12px}
.hphone{font-family:var(--mono);font-size:13.5px;color:var(--ink-2);display:flex;align-items:center;gap:7px}
.hphone svg{width:15px;height:15px;color:var(--verde)}
.navtoggle{display:none;background:none;border:0;cursor:pointer;padding:8px;margin-right:-6px;color:var(--ink);align-items:center;justify-content:center;border-radius:9px}
.navtoggle:hover{background:#eef3f1}
.navtoggle svg{width:24px;height:24px;display:block}
.mnav{display:none}
@media(max-width:960px){
  nav.main{display:none}.hphone{display:none}
  .navtoggle{display:inline-flex}
  .mnav{display:block;border-top:1px solid var(--line);background:#fff;padding:6px 22px 16px}
  .mnav[hidden]{display:none}
  .mnav a{display:block;padding:13px 2px;font-size:16px;font-weight:500;color:var(--ink);border-bottom:1px solid var(--line)}
  .mnav a:last-child{border-bottom:none}
  .mnav a.active{color:var(--verde-d)}
  .mnav-phone{display:flex;align-items:center;gap:8px;color:var(--verde-d);font-family:var(--mono);font-size:14px;margin-top:4px}
  .mnav-phone svg{width:16px;height:16px}
}
.mnav-cta{display:none}
@media(max-width:560px){
  header.site .wrap{gap:14px}
  .hactions .btn{display:none}
  .mnav-cta{display:flex;width:100%;margin-top:14px}
}

/* hero */
.hero{position:relative;overflow:hidden;color:#fff;background:linear-gradient(160deg,var(--jade) 0%,var(--jade-2) 60%,var(--jade-deep) 100%)}
.hero-home{display:flex;align-items:center;justify-content:center;text-align:center;min-height:560px;padding:54px 24px 74px;overflow:visible;
  background:linear-gradient(180deg,rgba(4,32,27,.7) 0%,rgba(4,32,27,.28) 42%,rgba(4,32,27,.48) 100%),url('/assets/hero.png') center 60%/cover no-repeat, var(--jade)}
@media(max-width:720px){.hero-home{min-height:auto;padding:48px 16px 60px}}
.hero-c{position:relative;z-index:2;text-align:center;max-width:920px;margin:0 auto;padding:60px 26px 92px;min-height:600px;display:flex;flex-direction:column;align-items:center}
.hero-c .lead{color:#dcefe8;max-width:52ch;margin-left:auto;margin-right:auto}
.hero-search{margin-top:30px;width:100%;max-width:880px;background:rgba(255,255,255,.13);
  backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid rgba(255,255,255,.32);border-radius:22px;box-shadow:0 30px 70px -28px rgba(0,0,0,.5);padding:16px}
.hs-toggle{display:inline-flex;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);border-radius:var(--r-pill);padding:4px;margin-bottom:14px}
.hs-toggle button{border:none;background:transparent;font-family:var(--sans);font-weight:600;font-size:13.5px;color:rgba(255,255,255,.86);padding:9px 20px;border-radius:var(--r-pill);cursor:pointer;transition:.15s}
.hs-toggle button.on{background:#fff;color:var(--verde-d);box-shadow:0 2px 8px rgba(0,0,0,.18)}
.hs-row{display:grid;grid-template-columns:1.3fr 1fr 1fr auto;gap:12px;align-items:center}
.hs-row select{height:56px;border:1px solid rgba(255,255,255,.5);border-radius:14px;color:var(--ink);appearance:none;width:100%;font-family:var(--sans);font-weight:500;font-size:15px;padding:0 38px 0 18px;cursor:pointer;transition:.15s;
  background:rgba(255,255,255,.93) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5L6 8l3.5-3.5' stroke='%23122019' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 16px center}
.hs-row select:hover{background-color:#fff}
.hs-row select:focus{outline:none;border-color:#fff;background-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.4)}
.hs-row .btn{height:56px;white-space:nowrap;font-size:15px;box-shadow:0 8px 20px -8px rgba(2,121,95,.6)}
.hero .badges{justify-content:center;margin-top:22px}
.hero-foot{margin-top:16px}
.hero-foot a{color:#bfe9db;font-weight:600;font-size:14px}
.hero-foot a:hover{color:#fff}
@media(max-width:760px){.hs-row{grid-template-columns:1fr;gap:8px}.hero-c{padding:44px 20px 68px;min-height:auto}}
.hero h1{font-size:clamp(34px,4.7vw,56px);color:#fff}
.hero h1 em{font-style:normal;color:#5fe3c0}
.hero .lead{color:#bcd8d0;font-size:17.5px;max-width:40ch;margin:18px 0 0}
.hero .badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.hbadge{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;
  color:#d6eae4;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-pill);padding:6px 12px}
.hbadge svg{width:13px;height:13px;color:#5fe3c0}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:28px;padding:44px 26px 52px}}

/* search card (Cinch) */
.searchcard{background:#fff;color:var(--ink);border-radius:var(--r);box-shadow:var(--shadow);padding:20px}
.toggle{display:inline-flex;background:var(--sand);border-radius:var(--r-pill);padding:4px;margin-bottom:16px}
.toggle button{border:none;background:transparent;font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink-2);
  padding:8px 16px;border-radius:var(--r-pill);cursor:pointer}
.toggle button.on{background:#fff;color:var(--verde-d);box-shadow:0 2px 6px rgba(5,40,36,.12)}
.field{margin-bottom:12px}
.field label{display:block;font-size:12px;color:var(--muted);margin:0 0 6px 3px;font-weight:500}
.field select,.field input{width:100%;height:50px;border:1.5px solid var(--line-2);border-radius:var(--r-sm);background:#fff;
  padding:0 14px;font-family:var(--sans);font-size:15px;color:var(--ink);appearance:none}
.field.sel{position:relative}
.field.sel::after{content:"";position:absolute;right:16px;bottom:20px;width:9px;height:9px;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:rotate(45deg);pointer-events:none}
.searchcard .foot{margin-top:6px;font-size:13px;color:var(--muted);text-align:center}
.searchcard .foot a{color:var(--verde-d);font-weight:600}

/* trust strip (Cinch reassurance) */
.trust{background:var(--sand);border-bottom:1px solid var(--sand-2)}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:34px 26px}
.trust .t{display:flex;gap:13px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px}
.t-ic{flex-shrink:0;width:40px;height:40px;border-radius:11px;background:var(--verde-050);display:flex;align-items:center;justify-content:center}
.t-ic svg{width:21px;height:21px;color:var(--verde-d)}
.trust .t b{display:block;font-size:14.5px;margin-bottom:2px}
.trust .t span{color:var(--ink-2);font-size:12.5px;line-height:1.42}
@media(max-width:820px){.trust .wrap{grid-template-columns:1fr 1fr;gap:18px}}

/* home benefits — homologado a Kavak (titulo + columnas con divisores) */
.hbenef{background:#fff;padding:56px 0 14px}
.hbenef-title{font-family:var(--font-display);font-weight:600;font-size:clamp(23px,2.7vw,31px);
  letter-spacing:-.022em;line-height:1.14;color:var(--ink);max-width:28ch;margin:0 0 30px}
.hbenef-grid{display:grid;grid-template-columns:repeat(4,1fr);align-items:start;background:#fff;
  border:1px solid var(--line);border-radius:var(--r)}
.hb{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:30px 28px;
  border-right:1px solid var(--line)}
.hb:last-child{border-right:none}
.hb-ic{display:flex;align-items:center;justify-content:center;color:var(--verde-d)}
.hb-ic svg{width:30px;height:30px;color:var(--verde-d)}
.hb-txt b{display:block;font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:0 0 7px}
.hb-txt span{display:block;color:var(--ink-2);font-size:13.5px;line-height:1.52}
@media(max-width:820px){
  .hbenef-grid{grid-template-columns:1fr 1fr}
  .hb{border-bottom:1px solid var(--line)}
  .hb:nth-child(2n){border-right:none}
  .hb:nth-last-child(-n+2){border-bottom:none}
}
@media(max-width:640px){
  .hbenef-grid{grid-template-columns:1fr}
  .hb{flex-direction:row;align-items:flex-start;gap:14px;padding:18px 20px;border-right:none}
  .hb-ic{padding-top:2px}
  .hb-ic svg{width:24px;height:24px}
  .hb:last-child{border-bottom:none}
}

/* sections */
section.pad{padding:60px 0}
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:26px}
.shead h2{font-size:clamp(28px,3.7vw,42px);font-weight:700;letter-spacing:-.027em;line-height:1.04}
.shead p{color:var(--muted);margin:8px 0 0;max-width:52ch;font-size:15px}
.shead .more{color:var(--verde-d);font-weight:600;font-size:14.5px;white-space:nowrap}
@media(max-width:560px){.shead{flex-direction:column;align-items:flex-start;gap:10px}}

/* category tiles (Cinch browse) */
.cats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.cat-tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px 16px 16px;text-align:center;transition:.16s;overflow:hidden}
.cat-tile:hover{border-color:var(--verde-100);box-shadow:var(--shadow);transform:translateY(-3px)}
.cat-car{display:flex;align-items:flex-end;justify-content:center;height:104px;margin-bottom:6px}
.cat-car img{max-height:104px;max-width:96%;width:auto;object-fit:contain;transition:.25s;filter:drop-shadow(0 14px 16px rgba(5,40,36,.18))}
.cat-tile:hover .cat-car img{transform:scale(1.05)}
.cat-tile svg{width:46px;height:30px;color:var(--jade);margin:0 auto 10px}
.cat-tile b{display:block;font-size:15px}
.cat-tile .cat-n{display:block;font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:2px}
@media(max-width:820px){.cats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.cats{grid-template-columns:1fr 1fr}}

/* car card (Kavak) */
.cars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:1000px){.cars{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cars{grid-template-columns:1fr}}
.car{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.16s}
.car:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:var(--line-2)}
.car .ph{aspect-ratio:16/10;background:#eef1ef;position:relative;overflow:hidden}
.car .ph img{width:100%;height:100%;object-fit:cover;transition:.35s}
.car:hover .ph img{transform:scale(1.04)}
.car .badges{position:absolute;top:10px;left:10px;display:flex;gap:6px;flex-wrap:wrap}
.badge{font-family:var(--mono);font-size:10px;letter-spacing:.03em;padding:4px 8px;border-radius:6px;font-weight:500}
.badge.new{background:var(--verde);color:#fff}
.badge.cert{background:rgba(5,40,36,.86);color:#eafff8;display:inline-flex;gap:5px;align-items:center}
.badge.cert svg{width:11px;height:11px}
.car .heart{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.car .heart svg{width:16px;height:16px;color:var(--ink-2)}
.car .b{padding:15px 16px 16px;display:flex;flex-direction:column;flex:1}
.car .t{font-size:16.5px;font-weight:650}
.car .spec{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:4px}
.car .pr{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.car .pr .p{font-family:var(--mono);font-size:22px;font-weight:650;letter-spacing:-.02em}
.car .pr .m{font-family:var(--mono);font-size:13px;color:var(--verde-d);margin-top:1px}
.car .loc{margin-top:10px;font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.car .loc svg{width:12px;height:12px}

/* filter chips + catalog */
.chips{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.chip{font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--ink-2);background:#fff;border:1.5px solid var(--line-2);
  border-radius:var(--r-pill);padding:9px 15px;cursor:pointer;transition:.12s;display:inline-flex;gap:7px;align-items:center}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--jade);color:#fff;border-color:var(--jade)}
.catlayout{display:grid;grid-template-columns:264px 1fr;gap:30px;align-items:start}
@media(max-width:900px){.catlayout{grid-template-columns:1fr}}
.filters{position:sticky;top:88px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:8px 18px}
.filters details{border-bottom:1px solid var(--line);padding:12px 0}
.filters details:last-child{border-bottom:none}
.filters summary{list-style:none;cursor:pointer;font-weight:600;font-size:14.5px;display:flex;justify-content:space-between;align-items:center}
.filters summary::-webkit-details-marker{display:none}
.filters summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:.15s}
.filters details[open] summary::after{transform:rotate(-135deg)}
.filters .opt{display:block;padding:7px 0;font-size:14px;color:var(--ink-2)}
.filters .opt:hover{color:var(--verde-d)}
.filters .opt.on{color:var(--verde-d);font-weight:600}
.catbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.catbar .n{font-family:var(--mono);font-size:13px;color:var(--muted)}
.catbar .n b{color:var(--ink);font-weight:650}
.sortsel{font-family:var(--mono);font-size:13px;border:1.5px solid var(--line-2);border-radius:var(--r-sm);height:42px;padding:0 34px 0 14px;
  background:#fff;appearance:none;color:var(--ink);cursor:pointer}
.pager{display:flex;gap:8px;justify-content:center;margin-top:40px}
.pager a{font-family:var(--mono);font-size:13px;min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--line-2);border-radius:var(--r-sm);color:var(--ink-2)}
.pager a.on{background:var(--jade);color:#fff;border-color:var(--jade)}

/* detail */
.crumb{font-family:var(--mono);font-size:12.5px;color:var(--muted);padding:22px 0 16px}
.crumb a:hover{color:var(--verde-d)}
.dtop{display:grid;grid-template-columns:1.3fr .7fr;gap:34px;align-items:start}
@media(max-width:940px){.dtop{grid-template-columns:1fr;gap:22px}}
.gal .main{aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#eef1ef}
.gal .main img{width:100%;height:100%;object-fit:cover}
.gal .thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:8px}
.gal .thumbs img{aspect-ratio:1;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--line);cursor:pointer}
.gal .thumbs img.on{border-color:var(--verde);box-shadow:0 0 0 1.5px var(--verde)}
.buy{position:sticky;top:90px;background:#fff;border:1px solid var(--line-2);border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.buy .certchip{display:inline-flex;gap:7px;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.03em;
  color:var(--verde-d);background:var(--verde-050);padding:6px 11px;border-radius:var(--r-pill);margin-bottom:14px}
.buy .certchip svg{width:13px;height:13px}
.buy h1{font-size:24px}
.buy .sub{color:var(--muted);font-size:14px;margin-top:3px}
.buy .price{font-family:var(--mono);font-size:36px;font-weight:700;letter-spacing:-.03em;margin-top:16px}
.buy .mo{font-family:var(--mono);font-size:14.5px;color:var(--verde-d);margin-top:2px}
.buy .facts{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.buy .fact{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px 10px}
.buy .acts{display:flex;flex-direction:column;gap:9px}
.buy .note{font-size:12px;color:var(--muted);margin-top:12px;line-height:1.5}

/* inspection / certification */
.insp{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:26px;display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center}
@media(max-width:640px){.insp{grid-template-columns:1fr}}
.seal{width:112px;height:112px;flex-shrink:0}
.insp .cats2{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:640px){.insp .cats2{grid-template-columns:1fr 1fr}}
.insp .c{display:flex;gap:10px}
.insp .c svg{width:18px;height:18px;color:var(--ok);flex-shrink:0;margin-top:1px}
.insp .c b{font-size:14px;display:block}
.insp .c span{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
table.specs{width:100%;border-collapse:collapse}
table.specs td{padding:13px 0;border-bottom:1px solid var(--line);font-size:14.5px}
table.specs td:first-child{color:var(--muted)}
table.specs td:last-child{font-family:var(--mono);text-align:right}

/* financing / calculator */
.calc{display:grid;grid-template-columns:1.1fr .9fr;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden}
@media(max-width:760px){.calc{grid-template-columns:1fr}}
.calc .in{padding:26px;background:#fff}
.calc .out{padding:26px;background:var(--jade);color:#eaf4f0}
.calc .fld{margin-bottom:18px}
.calc .fld .l{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-2);margin-bottom:8px}
.calc .fld .l b{font-family:var(--mono);color:var(--ink)}
.calc input[type=range]{width:100%;accent-color:var(--verde)}
.calc .out .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#8fc4b6}
.calc .out .big{font-family:var(--mono);font-size:42px;font-weight:700;letter-spacing:-.03em;margin:4px 0 12px}
.calc .out .big small{font-size:15px;color:#8fc4b6;font-weight:400}
.calc .out .ln{display:flex;justify-content:space-between;font-family:var(--mono);font-size:13px;color:#bcd8d0;padding:8px 0;border-bottom:1px dashed rgba(255,255,255,.16)}
.calc .out .ln b{color:#fff}

/* steps (certification journey) */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
@media(max-width:820px){.steps{grid-template-columns:1fr 1fr;gap:24px}}
.step{padding:0 26px;border-right:1px solid var(--line)}
.step:first-child{padding-left:0}.step:last-child{border-right:none}
.step .k{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--verde-d)}
.step h3{font-size:19.5px;font-weight:700;margin:8px 0 6px}
.step p{color:var(--ink-2);font-size:14px;margin:0}
/* certificacion — imagenes minimalistas (fondo blanco) + iconos top */
.step-img{display:block;width:100%;max-width:170px;height:120px;object-fit:contain;object-position:left center;margin-bottom:16px}
.inspg{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.inspc{display:flex;align-items:center;gap:20px;background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:22px 24px;box-shadow:0 8px 26px -16px rgba(5,40,36,.30);transition:box-shadow .2s ease,transform .2s ease}
.inspc:hover{box-shadow:0 18px 40px -20px rgba(5,40,36,.36);transform:translateY(-3px)}
.insp-img{width:104px;height:104px;object-fit:contain;flex:0 0 auto}
.inspc b{display:block;font-size:19.5px;font-weight:700;letter-spacing:-.02em;margin-bottom:4px}
.inspc span{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.trust .t>svg{width:24px;height:24px;color:var(--verde-d);flex-shrink:0}
@media(max-width:820px){.step-img{max-width:140px;height:104px}}
@media(max-width:720px){.inspg{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.inspg{grid-template-columns:1fr}}

/* band */
.band{background:var(--jade);color:#eaf4f0;border-radius:var(--r);padding:44px;display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:center}
.band h2{font-size:30px;color:#fff}
.band p{color:#bcd8d0;margin:12px 0 0}
@media(max-width:820px){.band{grid-template-columns:1fr;padding:30px}}

/* footer */
footer.site{background:var(--jade-deep);color:#a9c6bd;margin-top:20px}
footer.site .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;padding:54px 26px 30px}
footer.site h4{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6f8f85;margin:0 0 14px}
footer.site a{display:block;color:#c3d8d0;font-size:14px;padding:5px 0}
footer.site a:hover{color:#5fe3c0}
footer.site .desc{color:#7f9d94;font-size:13.5px;line-height:1.6;max-width:34ch;margin-top:12px}
footer.site .logo{color:#fff}
.footbot{border-top:1px solid rgba(255,255,255,.08)}
.footbot .wrap{display:flex;justify-content:space-between;padding:16px 26px;font-family:var(--mono);font-size:11.5px;color:#6f8f85;flex-wrap:wrap;gap:8px}
@media(max-width:720px){
  footer.site .wrap{grid-template-columns:1fr 1fr;gap:30px 20px;padding:42px 22px 26px}
  footer.site .wrap>div:first-child{grid-column:1/-1}
}
@media(max-width:480px){footer.site .wrap{grid-template-columns:1fr;gap:26px}}

/* whatsapp float */
.wa{position:fixed;right:20px;bottom:20px;z-index:70;width:56px;height:56px;border-radius:50%;background:#1FAF54;
  display:flex;align-items:center;justify-content:center;box-shadow:0 12px 28px -8px rgba(31,175,84,.6)}
.wa svg{width:29px;height:29px;color:#fff}
.c svg{width:19px;height:19px;flex-shrink:0;color:var(--verde-d)}
.btn svg{width:17px;height:17px;flex-shrink:0;vertical-align:-3px}

.empty{padding:60px 0;text-align:center;color:var(--muted);font-family:var(--mono);font-size:14px}


/* ===== HERO buscador premium (workflow diseño) ===== */
/* ============ HERO (fondo real = foto de los 3 SUV; abajo un fallback jade) ============ */

.hs2-inner{
  position:relative; z-index:2;
  width:100%; max-width:900px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center;
}

/* ============ TEXTO ============ */
.hs2-eyebrow{
  margin:0 0 20px;
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:#a6d9cb;
  display:inline-flex; align-items:center; gap:.5em;
}
.hs2-eyebrow .hs2-dot{ color:#5fe3c0; font-weight:400; }

.hs2-title{
  margin:0;
  font-family:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;
  font-weight:600; letter-spacing:-.022em; line-height:1.02;
  font-size:clamp(36px,5.2vw,62px);
  color:#fff;
  text-wrap:balance;
}
.hs2-accent{ color:#5fe3c0; }

.hs2-sub{
  margin:20px 0 0;
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-size:clamp(15.5px,1.7vw,18.5px); font-weight:400; line-height:1.5;
  color:#cadfd8; max-width:52ch;
}

/* ============ BARRA DE BÚSQUEDA (boutique / aerolínea premium) ============ */
.hs2-search{ width:100%; max-width:860px; margin:34px 0 0; }

.hs2-bar{
  display:flex; align-items:stretch; gap:10px;
  padding:9px 9px 9px 12px;
  border-radius:20px;
  background:rgba(255,255,255,.97);
  border:1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  backdrop-filter:blur(18px) saturate(1.15);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,.6) inset,
    0 26px 60px -24px rgba(5,59,51,.72),
    0 8px 22px -14px rgba(4,32,27,.5);
}

.hs2-fields{ display:flex; flex:1 1 auto; align-items:stretch; min-width:0; }

/* Campo individual */
.hs2-field{ position:relative; flex:1 1 0; min-width:0; }

.hs2-field-btn{
  width:100%; height:100%; min-height:58px;
  display:flex; flex-direction:column; justify-content:center; gap:3px;
  padding:9px 14px; border-radius:13px;
  background:transparent; border:0; cursor:pointer; text-align:left;
  font-family:inherit; color:inherit;
  transition:background-color .16s ease, box-shadow .16s ease;
}
.hs2-field-btn:hover{ background:rgba(2,158,130,.06); }
.hs2-field-btn:focus-visible{
  outline:none;
  background:rgba(2,158,130,.07);
  box-shadow:0 0 0 2px rgba(2,158,130,.4);
}

.hs2-field-label{
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-size:10.5px; font-weight:600; letter-spacing:.085em; text-transform:uppercase;
  color:#7C8B84; line-height:1;
}
.hs2-field-value{
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-size:15.5px; font-weight:500; letter-spacing:-.005em; line-height:1.15;
  color:#122019;
  font-variant-numeric:tabular-nums;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  padding-right:16px;
}

/* Chevron */
.hs2-chev{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  color:#9aa8a1; transition:transform .22s cubic-bezier(.4,0,.2,1), color .16s ease;
  pointer-events:none;
}
.hs2-field-btn:hover .hs2-chev{ color:#02795F; }
.hs2-dd.hs2-open .hs2-chev{ transform:translateY(-50%) rotate(180deg); color:#029E82; }

/* Divisor sutil e insetado entre campos */
.hs2-divider{
  flex:0 0 1px; align-self:center;
  width:1px; height:34px;
  background:linear-gradient(180deg,transparent,#E6ECE9 22%,#E6ECE9 78%,transparent);
}

/* ============ PANEL DE OPCIONES (custom, animado) ============ */
.hs2-panel{
  position:absolute; z-index:40; top:calc(100% + 10px); left:0;
  min-width:100%; width:max-content; max-width:280px;
  padding:6px;
  background:#fff;
  border:1px solid #E6ECE9; border-radius:15px;
  box-shadow:0 20px 46px -18px rgba(5,59,51,.34), 0 6px 16px -10px rgba(4,32,27,.24);
  opacity:0; visibility:hidden;
  transform:translateY(-6px) scale(.985); transform-origin:top left;
  transition:opacity .18s ease, transform .2s cubic-bezier(.4,0,.2,1), visibility .18s;
}
.hs2-dd.hs2-open .hs2-panel{
  opacity:1; visibility:visible; transform:translateY(0) scale(1);
}
/* último dropdown abre alineado a la derecha para no salir del viewport */
.hs2-field:last-child .hs2-panel{ left:auto; right:0; transform-origin:top right; }

.hs2-opt{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 12px; border-radius:9px; cursor:pointer;
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-size:14.5px; font-weight:500; color:#122019; line-height:1.2;
  white-space:nowrap;
  transition:background-color .13s ease, color .13s ease;
}
.hs2-opt:hover{ background:#F1F7F4; }
.hs2-opt:focus-visible,
.hs2-opt:focus{ outline:none; background:#EAF4F0; }
.hs2-opt[aria-selected="true"]{ color:#02795F; font-weight:600; }
.hs2-opt[aria-selected="true"]::after{
  content:""; width:15px; height:15px; flex:0 0 auto;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15' fill='none'%3E%3Cpath d='M3 8l3 3 6-6.5' stroke='%23029E82' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.hs2-num{
  font-family:'Geist Mono',ui-monospace,monospace;
  font-variant-numeric:tabular-nums; font-weight:500; letter-spacing:-.01em;
}

/* ============ BOTÓN BUSCAR ============ */
.hs2-submit{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:0 26px; min-height:58px; border:0; border-radius:14px; cursor:pointer;
  background:#029E82; color:#fff;
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-size:15.5px; font-weight:600; letter-spacing:-.005em;
  box-shadow:0 8px 18px -8px rgba(2,121,95,.7), 0 1px 0 0 rgba(255,255,255,.18) inset;
  transition:background-color .16s ease, transform .12s ease, box-shadow .16s ease;
}
.hs2-submit svg{ opacity:.95; }
.hs2-submit:hover{ background:#02795F; box-shadow:0 12px 22px -8px rgba(2,121,95,.78); }
.hs2-submit:active{ transform:translateY(1px); }
.hs2-submit:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.55), 0 0 0 5px rgba(2,158,130,.55); }

/* ============ ENLACE ALTERNO ============ */
.hs2-alt{
  margin-top:20px; display:inline-flex; align-items:center; gap:.4em;
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-size:14.5px; font-weight:600; color:#bfe9db; text-decoration:none;
  transition:color .16s ease;
}
.hs2-alt .hs2-arrow{ transition:transform .18s ease; }
.hs2-alt:hover{ color:#fff; }
.hs2-alt:hover .hs2-arrow{ transform:translateX(3px); }

/* ============ RESPONSIVE ============ */
@media (max-width:720px){
  
  .hs2-bar{ flex-direction:column; gap:0; padding:8px; border-radius:18px; }
  .hs2-fields{ flex-direction:column; }
  .hs2-divider{ display:none; }
  .hs2-field{ width:100%; }
  .hs2-field + .hs2-field .hs2-field-btn{ border-top:1px solid #EEF3F1; }
  .hs2-field-btn{ min-height:56px; border-radius:11px; }
  .hs2-panel{ max-width:none; right:6px; left:6px; width:auto; }
  .hs2-field:last-child .hs2-panel{ left:6px; right:6px; }
  .hs2-submit{ width:100%; margin-top:8px; min-height:54px; }
}

@media (prefers-reduced-motion:reduce){
  .hs2-panel,.hs2-chev,.hs2-submit,.hs2-alt .hs2-arrow,.hs2-field-btn{ transition:none; }
}
/* ===== Promos (tarjetas lifestyle, personas + autos de marca) ===== */
.promos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.promo{position:relative;aspect-ratio:16/12;border-radius:var(--r);overflow:hidden;display:flex;align-items:flex-end;color:#fff;transition:.18s;border:1px solid var(--line)}
.promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.4s}
.promo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,32,27,0) 26%,rgba(4,32,27,.5) 58%,rgba(4,32,27,.93) 100%)}
.promo .promo-txt{position:relative;z-index:2;padding:24px 24px 22px}
.promo h3{color:#fff;font-size:22px}
.promo p{color:#dceee7;font-size:14px;margin:6px 0 12px;max-width:30ch}
.promo-cta{font-weight:600;color:#7fe9cd;font-size:14.5px}
.promo:hover{transform:translateY(-3px);box-shadow:0 24px 50px -26px rgba(5,40,36,.5)}
.promo:hover img{transform:scale(1.05)}
@media(max-width:820px){.promos{grid-template-columns:1fr}}

/* ===== Media hero (páginas de contenido: texto + imagen) ===== */
.mediahero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:60px 0}
.mediahero .mh-txt .eyebrow{color:#8ff0d3}
.mediahero .mh-txt h1{font-size:clamp(30px,4vw,46px);color:#fff;margin-top:12px}
.mediahero .mh-txt .lead{color:#cfe0dc;font-size:17px;margin:16px 0 26px;max-width:46ch}
.mediahero .mh-img{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;box-shadow:0 30px 60px -30px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.12)}
.mediahero .mh-img img{width:100%;height:100%;object-fit:cover}
@media(max-width:820px){.mediahero{grid-template-columns:1fr;gap:28px;padding:40px 0}}

/* ===================================================================
   Fixes auditoría UX/UI móvil (2026-07) — SOLO móvil vía @media / clases
   nuevas. No altera el layout de escritorio ni el diseño verde Bahía.
   =================================================================== */

/* [CRÍTICO] Catálogo: el panel de filtros quedaba position:sticky y las
   cards de autos hacían scroll encimándose sobre él. En móvil (donde
   .catlayout ya es 1 columna, ver max-width:900px) lo pasamos a estático. */
@media(max-width:900px){.catlayout .filters{position:static;top:auto}}

/* [CRÍTICO] Ficha de auto (Especificaciones + Simulación): antes era un
   grid inline 1fr/1fr SIN breakpoint, que inflaba el viewport a ~527px y
   provocaba zoom-out de toda la página. La clase replica el desktop y
   apila a 1 columna en móvil. (markup: functions/auto/[id].js) */
.ficha-cols{display:grid;grid-template-columns:1fr 1fr;gap:44px}
@media(max-width:760px){.ficha-cols{grid-template-columns:1fr;gap:28px}}

/* [CRÍTICO/MAYOR] Contacto: el wrapper hero|formulario y el grid interno
   del formulario eran grids inline 1fr/1fr sin media query → scroll
   horizontal y campos aplastados. Clases con colapso a 1 columna en móvil.
   (markup: functions/contacto.js) */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;padding:20px 0 70px;align-items:start}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr;gap:30px}}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px}
@media(max-width:560px){.contact-form{grid-template-columns:1fr}}

/* [MENOR] Certificación: a 360px las grillas .steps y .trust seguían en
   2 columnas y el layout se expandía ~23px. Baja a 1 columna en pantallas
   muy angostas (mismo patrón que .inspg@480 y .hbenef-grid@520). */
@media(max-width:400px){.steps{grid-template-columns:1fr}.trust .wrap{grid-template-columns:1fr}}

/* ===================================================================
   APP MÓVIL (2026-07) — tab bar inferior + pulido táctil.
   Base para agentes de Componentes. SOLO móvil vía @media / clases
   nuevas. Desktop queda pixel-idéntico (tabbar display:none arriba de 900px).
   CONTRATO:
     · clase barra   = .tabbar   (nav fija abajo, 4 tabs)
     · clase tab      = .tab      (activo = .tab.active + aria-current="page")
     · icono/label    = .tab-ic / .tab-lb
     · breakpoint     = max-width:900px (idéntico a .catlayout)
     · alto barra     = --tabbar-h: 58px  (+ safe-area por debajo)
     · padding body   = calc(var(--tabbar-h) + env(safe-area-inset-bottom))
     · FAB WhatsApp   = .wa reubicado por encima de la barra en móvil
   Una barra de acción fija de página (ej. ficha de auto) debe sentarse
   sobre la tabbar (bottom: calc(var(--tabbar-h) + safe-area)) o reemplazarla.
   =================================================================== */
:root{--tabbar-h:58px}

/* Barra de tabs — oculta en desktop, fija abajo en móvil */
.tabbar{display:none}
@media(max-width:900px){
  .tabbar{
    display:grid;grid-template-columns:repeat(4,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:80;
    background:#fff;border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -6px 20px -14px rgba(5,40,36,.28);
  }
  .tab{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:var(--tabbar-h);padding:8px 4px 6px;
    font-size:10.5px;font-weight:600;letter-spacing:-.005em;color:var(--muted);
    -webkit-tap-highlight-color:transparent;transition:color .15s ease;
  }
  .tab-ic{display:flex;align-items:center;justify-content:center}
  .tab-ic svg{width:23px;height:23px;display:block}
  .tab-lb{line-height:1}
  .tab.active{color:var(--verde-d)}
  .tab:active{color:var(--verde-d)}
  .tab:active .tab-ic{transform:scale(.92)}
  .tab-ic{transition:transform .12s ease}

  /* Espacio para que la barra fija no tape el footer/contenido */
  body{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom))}

  /* FAB de WhatsApp por encima de la tab bar (no encimado) */
  .wa{bottom:calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom))}
}

/* ===== Pulido táctil global (SOLO móvil) ===== */
@media(max-width:900px){
  /* Inputs >=16px para evitar el auto-zoom de iOS al enfocar */
  input,select,textarea{font-size:16px}
  .field select,.field input{font-size:16px}

  /* Áreas táctiles >=44px en controles/links clave */
  .btn{min-height:44px}
  nav.main a{min-height:44px;display:inline-flex;align-items:center}
  .mnav a{min-height:44px;display:flex;align-items:center}
  footer.site a{min-height:40px;display:flex;align-items:center}
  .shead .more{min-height:44px;display:inline-flex;align-items:center}
  .chip{min-height:40px}

  /* Tap states suaves */
  .btn{-webkit-tap-highlight-color:transparent}
  .btn:active{transform:scale(.98)}
  .car:active{transform:scale(.995)}
  .chip:active{transform:scale(.97)}
  .wa:active{transform:scale(.94)}

  /* Momentum scroll en contenedores con desplazamiento */
  .chips,.gal .thumbs{-webkit-overflow-scrolling:touch}
}

/* ===================================================================
   BOTTOM-SHEET de filtros del catálogo (2026-07) — SOLO móvil.
   En desktop los filtros siguen siendo el sidebar sticky (pixel-idéntico):
   trigger/backdrop/head/foot quedan display:none y el aside .filters no se
   toca. En <=900px el aside se convierte en una hoja que sube desde abajo
   con backdrop; se activa con la clase body.fs-open (JS inline del catálogo).
   Cubre la tab bar (z-index 90 > 80) para no chocar con ella.
   =================================================================== */
.fbtn,.fs-head,.fs-foot,.fs-backdrop{display:none}
@media(max-width:900px){
  /* Botón que abre la hoja (en la barra de resultados) */
  .fbtn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;
    border:1.5px solid var(--line-2);border-radius:var(--r-pill);background:#fff;color:var(--ink);
    font-family:var(--sans);font-weight:600;font-size:14px;cursor:pointer;
    -webkit-tap-highlight-color:transparent;order:1}
  .fbtn svg{width:17px;height:17px}
  .fbtn:active{transform:scale(.98)}
  .fbtn-b{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;
    padding:0 5px;border-radius:999px;background:var(--verde);color:#fff;
    font-family:var(--mono);font-size:11px;font-weight:700;line-height:1}
  .catbar form{order:1;margin-left:auto}
  .catbar .n{order:2;flex-basis:100%}

  /* El propio aside .filters pasa a ser la hoja deslizante */
  .catlayout .filters{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:90;width:auto;
    max-height:82vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
    border:none;border-radius:18px 18px 0 0;padding:0 20px 78px;
    box-shadow:0 -22px 50px -24px rgba(5,40,36,.5);
    transform:translateY(102%);transition:transform .34s cubic-bezier(.32,.72,0,1);
    will-change:transform}
  body.fs-open .filters{transform:translateY(0)}

  /* Encabezado sticky con handle + cerrar */
  .fs-head{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:2;
    background:#fff;padding:18px 0 12px;margin-bottom:2px;border-bottom:1px solid var(--line)}
  .fs-head::before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);
    width:38px;height:4px;border-radius:999px;background:var(--line-2)}
  .fs-head .fs-title{font-family:var(--font-display);font-weight:600;font-size:17px;letter-spacing:-.02em}
  .fs-x{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:none;
    background:var(--verde-050);color:var(--verde-d);border-radius:999px;font-size:16px;line-height:1;
    cursor:pointer;-webkit-tap-highlight-color:transparent}
  .fs-x:active{transform:scale(.94)}

  /* Pie sticky con CTA Ver resultados */
  .fs-foot{display:block;position:sticky;bottom:0;z-index:2;background:#fff;margin-top:6px;
    padding:12px 0 calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
  .fs-foot .btn{width:100%}

  /* En la hoja los grupos van expandidos (la hoja hace scroll) */
  .filters details{padding:14px 0}

  /* Backdrop translúcido; cierra al tocar */
  .fs-backdrop{display:block;position:fixed;inset:0;z-index:88;background:rgba(6,28,24,.42);
    opacity:0;pointer-events:none;transition:opacity .3s ease}
  body.fs-open .fs-backdrop{opacity:1;pointer-events:auto}

  /* Bloquea el scroll del fondo con la hoja abierta */
  body.fs-open{overflow:hidden}
}

@media(prefers-reduced-motion:reduce){
  .catlayout .filters{transition:none}
  .fs-backdrop{transition:none}
}

/* ===================================================================
   FICHA DE AUTO (2026-07) — barra de acción fija de compra (SOLO móvil).
   Patrón de página de producto: en la ficha esta barra es la acción
   primaria, así que REEMPLAZA a la tab bar inferior (y al FAB WhatsApp,
   cuya acción ya vive aquí). El scoping es por presencia de .actbar en el
   DOM: .actbar precede a .tabbar y a .wa en <body>, así que el combinador
   de hermano general (~) las oculta SOLO en la ficha, sin tocar otras
   páginas ni el desktop. Reutiliza --tabbar-h y el breakpoint 900px.
   Desktop: .actbar{display:none} (las acciones ya están en .buy).
   =================================================================== */
:root{--actbar-h:66px}
.actbar{display:none}
@media(max-width:900px){
  .actbar{
    display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
    position:fixed;left:0;right:0;bottom:0;z-index:85;
    background:#fff;border-top:1px solid var(--line);
    padding:9px 14px calc(9px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 22px -14px rgba(5,40,36,.30);
  }
  .actbar .btn{min-height:48px;margin:0}
  .actbar .ab-wa{
    display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
    width:48px;height:48px;border-radius:12px;background:#1FAF54;color:#fff;
    -webkit-tap-highlight-color:transparent;
  }
  .actbar .ab-wa svg{width:26px;height:26px}
  .actbar .ab-wa:active{transform:scale(.94)}

  /* La barra de compra es primaria: oculta tab bar + FAB SOLO en la ficha */
  .actbar ~ .tabbar{display:none}
  .actbar ~ .wa{display:none}

  /* Reemplaza el padding-bottom de la tab bar por el de esta barra */
  body:has(.actbar){padding-bottom:calc(var(--actbar-h) + env(safe-area-inset-bottom))}
}

/* ===== Ficha técnica pública estilo Kavak (características + equipamiento) ===== */
.kv-equip{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.kv-eq{display:flex;align-items:center;gap:11px;padding:14px 16px;border:1px solid var(--line-2,#e6ebe8);border-radius:14px;background:#fff}
.kv-eq svg{width:20px;height:20px;color:var(--verde-d,#029E82);flex:none}
.kv-eq b{display:block;font-size:14px;font-weight:600;color:#12201a;line-height:1.25}
.kv-eq span{display:block;font-size:12px;color:#6b7d75}
.kv-acc{border:1px solid var(--line-2,#e6ebe8);border-radius:16px;overflow:hidden;background:#fff}
.kv-cat{border-bottom:1px solid var(--line-2,#eef2f0)}
.kv-cat:last-child{border-bottom:none}
.kv-cat>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;font-weight:700;font-size:16px;color:#12201a}
.kv-cat>summary::-webkit-details-marker{display:none}
.kv-cat>summary::after{content:"";width:9px;height:9px;border-right:2px solid #9fb3aa;border-bottom:2px solid #9fb3aa;transform:rotate(45deg);transition:transform .2s;margin-left:12px;flex:none}
.kv-cat[open]>summary::after{transform:rotate(-135deg)}
.kv-rows{padding:0 20px 16px;display:grid;grid-template-columns:1fr 1fr;gap:0 36px}
.kv-row{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid #f0f4f2;font-size:14px}
.kv-k{color:#6b7d75}
.kv-v{color:#12201a;font-weight:600;text-align:right}
@media(max-width:640px){.kv-rows{grid-template-columns:1fr}}