/* ============================================================
   TRISTANAUTOS — Hoja de estilos de las páginas interiores
   (fichas de coche en /coches/ y artículos en /blog/).

   El index.html lleva su CSS en línea: una sola petición y pintado
   inmediato. Las páginas interiores no pueden compartir ese <style>,
   así que el armazón común —tokens, cabecera, pie, botones, tarjeta
   de coche— se reproduce aquí TAL CUAL está en index.html.
   Si tocas un token o la cabecera allí, replícalo aquí.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Canales RGB de los colores base. Permiten derivar cualquier transparencia
     del mismo color sin repetir el valor: rgba(var(--red-rgb),.55). */
  --ink-rgb:21,23,28; --red-rgb:200,16,46; --wa-rgb:14,122,62; --bg-rgb:247,246,243;
  --bg:#F7F6F3; --card:#FFFFFF; --ink:#15171C; --muted:#5C6068;
  --line:rgba(var(--ink-rgb),.10); --line-strong:rgba(var(--ink-rgb),.22);
  /* Borde de controles interactivos: 3,4:1 sobre blanco (WCAG 1.4.11).
     --line y --line-strong siguen siendo para separadores decorativos. */
  --line-input:rgba(var(--ink-rgb),.50);
  --red:#C8102E; --red-dark:#A30C25; --red-soft:rgba(var(--red-rgb),.07);
  --wa:#0E7A3E; --wa-dark:#0A5E2F; --wa-ink:#0E7A3E;
  /* Fondo mientras carga una foto: evita el salto de blanco a imagen. */
  --img-bg:#E4E7EC;
  /* Distintivos sobre foto (sello, etiqueta DGT, garantía). Un solo valor:
     antes convivían .90, .92 y .95 para el mismo elemento visual. */
  --chip-bg:rgba(255,255,255,.95);
  --focus-ring:0 0 0 3px rgba(var(--red-rgb),.14);
  --graphite:#14161A; --graphite-2:#202329; --graphite-tx:#A9ADB5;
  --fd:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --fb:'Inter',ui-sans-serif,system-ui,sans-serif;
  --r-sm:8px; --r-md:12px; --r-lg:16px;
  --sh-sm:0 1px 2px rgba(var(--ink-rgb),.05);
  --sh-md:0 1px 2px rgba(var(--ink-rgb),.04),0 16px 32px -20px rgba(var(--ink-rgb),.22);
  --sh-lg:0 2px 6px rgba(var(--ink-rgb),.05),0 32px 64px -32px rgba(var(--ink-rgb),.30);
  --topbar-h:36px; --header-h:68px;
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%235C6068' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--fb);font-size:16px;line-height:1.6;color:var(--ink);
  background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  padding-top:calc(var(--topbar-h) + var(--header-h));overflow-x:hidden;
}
img,svg{display:inline-block;vertical-align:middle}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
fieldset{border:0;min-width:0}
.btn:disabled,.btn:disabled:hover{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}
.container{width:100%;max-width:1200px;margin-inline:auto;padding-inline:16px}
section[id]{scroll-margin-top:calc(var(--topbar-h) + var(--header-h) + 16px)}
.skip-link{position:fixed;top:-60px;left:16px;z-index:2000;background:var(--ink);color:#fff;padding:10px 18px;border-radius:var(--r-sm);text-decoration:none;font-weight:600;font-size:.85rem;transition:top .2s}
.skip-link:focus{top:12px}

/* ---------- Animación entrada ---------- */
.fade-up{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s cubic-bezier(.22,.61,.21,1)}
.fade-up.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .fade-up{opacity:1;transform:none}
}

/* ---------- Tipografía común ---------- */
.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.eyebrow::before{content:"";width:32px;height:2px;background:var(--red);flex:none}
h1,h2,h3{font-family:var(--fd);letter-spacing:-.02em;line-height:1.12;text-wrap:balance}
.sec-head{margin-bottom:40px}
.sec-head .eyebrow{margin-bottom:16px}
/* Por debajo del h1 del hero (clamp hasta 3.3rem): el salto de escala separa
   la promesa principal de los títulos de apartado. */
.sec-title{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700}
.sec-sub{margin-top:12px;color:var(--muted);font-size:1.02rem;max-width:56ch}
.section{padding:clamp(64px,9vw,112px) 0}


/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--fb);font-weight:600;font-size:.92rem;line-height:1.25;letter-spacing:.005em;
  text-decoration:none;padding:14px 24px;border-radius:var(--r-sm);
  border:1px solid transparent;transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease,color .22s ease;
}
.btn:active{transform:translateY(0)}
.btn svg{flex:none}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 10px 24px -12px rgba(var(--red-rgb),.55)}
.btn-primary:hover{background:var(--red-dark);transform:translateY(-2px);box-shadow:0 16px 32px -14px rgba(var(--red-rgb),.6)}
.btn-outline{border-color:var(--line-strong);color:var(--ink);background:var(--card)}
.btn-outline:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:var(--sh-md)}
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 10px 24px -12px rgba(var(--wa-rgb),.5)}
.btn-wa:hover{background:var(--wa-dark);transform:translateY(-2px);box-shadow:0 16px 32px -14px rgba(var(--wa-rgb),.55)}
.btn-wa svg{width:18px;height:18px;fill:currentColor}
.btn-ghost{border-color:var(--line);color:var(--muted);background:transparent}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn-sm{padding:10px 16px;font-size:.85rem}
.btn-block{width:100%}


/* ---------- Topbar + Header fijos ---------- */
.topwrap{position:fixed;top:0;left:0;right:0;z-index:900}
.topbar{background:var(--card);border-bottom:1px solid var(--line);font-size:.76rem}
.topbar .container{height:var(--topbar-h);display:flex;align-items:center;justify-content:space-between;gap:16px}
.topbar-promises{display:flex;align-items:center;gap:8px;color:var(--muted);letter-spacing:.01em;min-width:0}
.topbar-promises svg{width:12px;height:12px;stroke:var(--red);flex:none}
.topbar-tel{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);text-decoration:none;transition:color .2s}
.topbar-tel:hover{color:var(--red)}
.topbar-tel svg{width:13px;height:13px;stroke:currentColor}
@media (max-width:767px){
  .topbar-promises{display:none}
  .topbar .container{justify-content:center}
}
.site-header{background:rgba(var(--bg-rgb),.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transition:box-shadow .3s ease,background .3s ease}
.site-header.scrolled{background:rgba(var(--bg-rgb),.97);box-shadow:0 12px 32px -18px rgba(var(--ink-rgb),.28)}
.header-inner{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--fd);font-weight:700;font-size:1.3rem;letter-spacing:-.01em;text-decoration:none;line-height:1}
.logo em{font-style:normal;color:var(--red)}
.logo-badge{width:44px;height:44px;border-radius:50%;display:block;box-shadow:0 1px 4px rgba(var(--ink-rgb),.18)}
.main-nav{display:none;align-items:center;gap:28px}
.main-nav a{position:relative;font-size:.88rem;font-weight:500;color:var(--muted);text-decoration:none;padding:6px 0;transition:color .2s}
.main-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.main-nav a:hover,.main-nav a:focus-visible{color:var(--ink)}
.main-nav a:hover::after{transform:scaleX(1)}
.header-actions{display:flex;align-items:center;gap:12px}
.header-cta{display:none}
.burger{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--card);transition:border-color .2s}
.burger:hover{border-color:var(--ink)}
.burger i{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.drawer{
  position:fixed;top:calc(var(--topbar-h) + var(--header-h));left:0;right:0;z-index:890;
  background:var(--card);border-bottom:1px solid var(--line);box-shadow:var(--sh-lg);
  padding:8px 16px 24px;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s;
}
.drawer.open{opacity:1;visibility:visible;transform:none}
.drawer a.drawer-link{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 4px;font-family:var(--fd);font-weight:600;font-size:1.05rem;text-decoration:none;
  border-bottom:1px solid var(--line);transition:color .2s,padding-left .2s;
}
.drawer a.drawer-link:hover{color:var(--red);padding-left:10px}
.drawer a.drawer-link span{color:var(--muted);font-family:var(--fb);font-size:.75rem;font-weight:500}
.drawer .btn{margin-top:20px}
body.drawer-open{overflow:hidden}
@media (min-width:1024px){
  .main-nav{display:flex}
  .header-cta{display:inline-flex}
  .burger{display:none}
  .drawer{display:none}
}


/* ---------- Footer ---------- */
.site-footer{background:var(--graphite);color:var(--graphite-tx);border-top:1px solid var(--graphite-2);padding:56px 0 28px;font-size:.88rem}
.footer-top{display:grid;gap:32px;padding-bottom:32px;border-bottom:1px solid var(--graphite-2)}
@media (min-width:1024px){.footer-top{grid-template-columns:1.3fr 1fr 1fr;gap:48px}}
.footer-logo{display:inline-flex;align-items:center;gap:12px;font-family:var(--fd);font-weight:700;font-size:1.4rem;color:#fff;text-decoration:none;letter-spacing:-.01em}
.footer-logo em{font-style:normal;color:var(--red)}
.footer-logo .logo-badge{width:52px;height:52px;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.footer-claim{margin-top:12px;max-width:36ch;line-height:1.6}
.footer-h{font-family:var(--fd);font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.footer-list{list-style:none;display:grid;gap:10px}
.footer-list a,.footer-list button{color:var(--graphite-tx);text-decoration:none;font-size:.88rem;transition:color .2s;padding:0;text-align:left}
.footer-list a:hover,.footer-list button:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.footer-social{display:flex;gap:12px;margin-top:20px}
.footer-social a{
  width:40px;height:40px;border:1px solid var(--graphite-2);border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s,transform .2s;
}
.footer-social a:hover{border-color:var(--graphite-tx);transform:translateY(-2px)}
.footer-social svg{width:17px;height:17px;fill:var(--graphite-tx);transition:fill .2s}
.footer-social a:hover svg{fill:#fff}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-top:24px;font-size:.78rem}
.footer-bottom .made{color:rgba(169,173,181,.75)}
.footer-credit{margin:16px 0 0;text-align:center;font-size:.78rem;color:rgba(169,173,181,.85)}
.footer-credit a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.footer-credit a:hover{color:var(--red)}


/* ---------- WhatsApp flotante ---------- */
.wa-float{
  position:fixed;right:20px;bottom:20px;z-index:1000;width:56px;height:56px;border-radius:50%;
  background:var(--wa);display:flex;align-items:center;justify-content:center;text-decoration:none;
  box-shadow:0 12px 28px -8px rgba(18,140,75,.55);transition:transform .25s ease,background .25s ease;
}
@media (max-width:479px){
  .wa-float{width:48px;height:48px;right:12px;bottom:12px}
  .wa-float svg{width:24px;height:24px}
  body{padding-bottom:72px}
}
.wa-float:hover{transform:scale(1.08);background:var(--wa-dark)}
.wa-float svg{width:28px;height:28px;fill:#fff}
.wa-float::after{
  content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--wa);
  animation:waPulse 2.6s ease-out 3;pointer-events:none;
}
@keyframes waPulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.45);opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.wa-float::after{animation:none;display:none}}

@media (min-width:768px){.container{padding-inline:24px}}

/* ============================================================
   A partir de aqui, estilos propios del blog
   ============================================================ */

/* ---------- Migas ---------- */
/* El margen de arriba separa las migas de la cabecera fija, que si no las tapa. */
.crumbs{font-size:.8rem;color:var(--muted);margin:16px 0 20px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.crumbs a{text-decoration:none;transition:color .2s}
.crumbs a:hover{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--line-strong)}
.crumbs [aria-current="page"]{color:var(--ink);font-weight:500}

/* ---------- Cabecera de articulo ---------- */
/* El contenedor general son 1200 px, pero un articulo solo ocupa su columna de
   lectura: sin esto el texto se queda pegado a la izquierda y media pantalla
   se ve vacia. 768 = los 68ch del cuerpo mas el padding del contenedor. */
.container-post{max-width:768px}
.post-head{padding:40px 0 32px;border-bottom:1px solid var(--line)}
.post-head h1{font-size:clamp(1.9rem,4.4vw,2.9rem);margin:16px 0 18px;max-width:22ch}
.post-lede{font-size:1.1rem;line-height:1.65;color:var(--muted);max-width:62ch}
/* La ficha tecnica del articulo: fecha, lectura y quien lo firma.
   Va despues del lede para no separar el titular de su resumen. */
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:24px;font-size:.82rem;color:var(--muted)}
.post-meta span+span::before{content:"·";margin-right:10px}
.post-meta b{font-weight:600;color:var(--ink)}

/* ---------- Cuerpo ---------- */
/* 68ch es el limite comodo de lectura; mas ancho obliga a mover la cabeza
   para volver al principio de la linea siguiente. */
.post-body{max-width:68ch;padding:8px 0 56px;font-size:1.05rem;line-height:1.75}
.post-body>*+*{margin-top:22px}
.post-body h2{font-size:clamp(1.4rem,2.6vw,1.75rem);margin-top:56px;padding-top:4px}
.post-body h3{font-size:1.12rem;margin-top:36px}
.post-body h2+p,.post-body h3+p{margin-top:14px}
.post-body a{color:var(--red);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.post-body a:hover{color:var(--red-dark)}
.post-body strong{font-weight:600}
.post-body ul,.post-body ol{padding-left:22px;display:grid;gap:10px}
.post-body li::marker{color:var(--red)}
.post-body li>ul,.post-body li>ol{margin-top:10px}
.post-body hr{border:0;border-top:1px solid var(--line);margin:44px 0}
.post-body figure figcaption{margin-top:8px;font-size:.8rem;color:var(--muted)}

/* Anclas de los H2: sin esto la cabecera fija tapa el titulo al saltar. */
.post-body [id]{scroll-margin-top:calc(var(--topbar-h) + var(--header-h) + 20px)}

/* ---------- Tablas ---------- */
/* Se envuelven en .tabla-wrap porque en movil una tabla de 4 columnas
   no cabe: se desplaza ella sola en vez de romper el ancho de la pagina. */
.tabla-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card)}
.post-body table{border-collapse:collapse;width:100%;font-size:.92rem;min-width:420px}
.post-body caption{caption-side:bottom;padding:12px 16px;font-size:.78rem;color:var(--muted);text-align:left}
.post-body th,.post-body td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.post-body thead th{background:var(--bg);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.post-body tbody tr:last-child td{border-bottom:0}
.post-body td.num,.post-body th.num{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- Avisos ---------- */
.nota{
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--red);
  border-radius:var(--r-sm);padding:18px 20px;font-size:.95rem;
}
.nota p+p{margin-top:12px}
.nota b{font-weight:600}

/* ---------- Indice ---------- */
.toc{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:20px 24px}
.toc h2{font-family:var(--fd);font-size:.78rem!important;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 14px!important}
.toc ol{padding-left:20px;display:grid;gap:8px;font-size:.95rem}
.toc a{color:var(--ink);text-decoration:none}
.toc a:hover{color:var(--red);text-decoration:underline;text-underline-offset:3px}

/* ---------- FAQ ---------- */
.faq-q{font-family:var(--fd);font-size:1.05rem;font-weight:600;margin-top:32px}
.faq-q+p{margin-top:12px}

/* ---------- CTA de cierre ---------- */
.post-cta{
  background:var(--graphite);color:var(--graphite-tx);border-radius:var(--r-lg);
  padding:36px 28px;margin-top:56px;
}
.post-cta h2{font-family:var(--fd);color:#fff;font-size:1.5rem;margin:0 0 12px;letter-spacing:-.02em}
.post-cta p{margin:0 0 24px;max-width:52ch;line-height:1.65;font-size:.98rem}
.post-cta .acciones{display:flex;flex-wrap:wrap;gap:12px}
.post-cta .btn-outline{background:transparent;color:#fff;border-color:var(--graphite-2)}
.post-cta .btn-outline:hover{border-color:#fff;background:transparent;box-shadow:none}

/* ---------- Siguientes lecturas ---------- */
.sig{border-top:1px solid var(--line);padding:40px 0 64px}
.sig h2{font-family:var(--fd);font-size:1.25rem;margin-bottom:24px}

/* ---------- Listado del blog ---------- */
.blog-head{padding:48px 0 8px}
.blog-head h1{font-size:clamp(2rem,4.6vw,3rem);margin:16px 0 16px}
.blog-head p{max-width:60ch;color:var(--muted);font-size:1.08rem;line-height:1.65}
.post-grid{display:grid;gap:20px;padding:32px 0 72px}
@media (min-width:700px){.post-grid{grid-template-columns:1fr 1fr}}
.post-card{
  display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-md);padding:26px 24px;text-decoration:none;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--line-strong)}
.post-card .cat{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.post-card h2{font-size:1.22rem;margin:12px 0 10px;line-height:1.25}
.post-card p{color:var(--muted);font-size:.93rem;line-height:1.6;flex:1}
.post-card .pie{margin-top:18px;font-size:.78rem;color:var(--muted)}
/* El enlace envuelve toda la tarjeta: sin esto el foco se dibuja pegado
   al borde y se confunde con el propio borde de la tarjeta. */
.post-card:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ---------- Reutilizado de index.html: titulares de sección ---------- */


/* ---------- Tipografía común ---------- */
.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.eyebrow::before{content:"";width:32px;height:2px;background:var(--red);flex:none}
h1,h2,h3{font-family:var(--fd);letter-spacing:-.02em;line-height:1.12;text-wrap:balance}
.sec-head{margin-bottom:40px}
.sec-head .eyebrow{margin-bottom:16px}
/* Por debajo del h1 del hero (clamp hasta 3.3rem): el salto de escala separa
   la promesa principal de los títulos de apartado. */
.sec-title{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700}
.sec-sub{margin-top:12px;color:var(--muted);font-size:1.02rem;max-width:56ch}
.section{padding:clamp(64px,9vw,112px) 0}

/* ---------- Reutilizado de index.html: tarjeta de coche ---------- */

.stock-grid{display:grid;gap:24px;grid-template-columns:1fr}
@media (min-width:768px){.stock-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.stock-grid{grid-template-columns:repeat(3,1fr)}}
.car-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-sm);display:flex;flex-direction:column;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.car-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--line-strong)}
.car-card[hidden]{display:none}
.car-media{position:relative;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--line);background:var(--img-bg)}
.car-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}
.car-card:hover .car-media>img{transform:scale(1.035)}
.dgt{
  position:absolute;top:12px;left:12px;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--card);box-shadow:var(--sh-sm);
  font-family:var(--fd);font-weight:700;font-size:.72rem;letter-spacing:.02em;color:var(--ink);
}
.dgt::before{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid transparent}
/* El aro bicolor ECO se recorta con mask; sin la propiedad estándar, Firefox pintaba
   el conic-gradient sólido y tapaba el texto del badge. */
.dgt-eco::before{
  border-color:transparent;background:conic-gradient(#2E7BC2 0 50%,#3FA34D 50% 100%) border-box;padding:3px;
  -webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
@supports not ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
  .dgt-eco::before{background:none;border-color:#2E7BC2}
}
.dgt-c::before{border-color:#3FA34D}
/* El aro es decorativo: la etiqueta se identifica por el texto y por el aria-label,
   así que el amarillo de la B no necesita cumplir contraste. */
.dgt-0::before{border-color:#2E7BC2}
.dgt-b::before{border-color:#E0A800}
.chip-gar{
  position:absolute;top:12px;right:12px;background:var(--chip-bg);border:1px solid var(--line);
  border-radius:6px;padding:5px 10px;font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
  box-shadow:var(--sh-sm);
}
.car-body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.car-name{font-family:var(--fd);font-weight:600;font-size:1.12rem;letter-spacing:-.01em;line-height:1.25}
.car-specs{font-size:.84rem;color:var(--muted)}
.car-specs span+span::before{content:"·";margin:0 8px;color:var(--line-strong)}
.chip-work{
  align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
  background:var(--bg);border:1px solid var(--line);border-radius:6px;
  padding:5px 10px;font-size:.75rem;font-weight:600;color:var(--ink);
}
.chip-work svg{width:12px;height:12px;stroke:var(--red)}
.car-price-row{margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.car-price{display:flex;align-items:baseline;gap:8px}
.car-price b{font-family:var(--fd);font-weight:700;font-size:1.5rem;letter-spacing:-.02em}
.car-price small{font-size:.72rem;color:var(--muted)}
.car-card .btn{margin-top:14px}
.stock-footnote{margin-top:20px;font-size:.78rem;color:var(--muted)}

/* ============================================================
   FICHA DE COCHE (/coches/*.html)
   ============================================================ */
.ficha{padding:32px 0 72px}
.ficha-grid{display:grid;gap:32px;align-items:start}
@media (min-width:1024px){
  .ficha-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px}
}

/* ---------- Galería ----------
   Sin JavaScript: la tira es un scroller con scroll-snap y las miniaturas son
   anclas a cada foto. Funciona con teclado, con lector de pantalla y con el JS
   desactivado, y no hay que mantener ningún visor. */
.galeria{display:grid;gap:12px}
.galeria-tira{
  display:grid;grid-auto-flow:column;grid-auto-columns:100%;
  gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;
  border-radius:var(--r-lg);border:1px solid var(--line);background:var(--img-bg);
  scrollbar-width:thin;
}
.galeria-tira>figure{position:relative;scroll-snap-align:start;margin:0}
/* height:auto es obligatorio: si no, el atributo height del <img> gana al
   aspect-ratio y la foto sale estirada. */
.galeria-tira img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.galeria-contador{
  position:absolute;right:12px;bottom:12px;
  background:rgba(var(--ink-rgb),.72);color:#fff;
  border-radius:var(--r-sm);padding:4px 10px;font-size:.72rem;font-weight:600;
}
.galeria-minis{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.galeria-minis a{
  flex:none;width:88px;border-radius:var(--r-sm);overflow:hidden;
  border:1px solid var(--line);background:var(--img-bg);line-height:0;
  transition:border-color .2s ease;
}
.galeria-minis a:hover{border-color:var(--ink)}
.galeria-minis a:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.galeria-minis img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.galeria-aviso{font-size:.78rem;color:var(--muted)}

/* ---------- Resumen y llamada a la acción ---------- */
@media (min-width:1024px){
  .ficha-resumen{position:sticky;top:calc(var(--topbar-h) + var(--header-h) + 24px)}
}
.ficha-marca{font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.ficha-titulo{font-size:clamp(1.6rem,3.4vw,2.15rem);margin:10px 0 14px}
.ficha-sumario{font-size:.9rem;color:var(--muted)}
.ficha-sumario span+span::before{content:"·";margin:0 8px;color:var(--line-strong)}
.ficha-precio{
  margin:24px 0;padding:20px 24px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);
}
.ficha-precio b{display:block;font-family:var(--fd);font-weight:700;font-size:2.2rem;letter-spacing:-.02em}
.ficha-precio small{display:block;margin-top:6px;font-size:.82rem;color:var(--muted)}
.ficha-acciones{display:grid;gap:12px}
.ficha-incluye{list-style:none;display:grid;gap:10px;margin-top:24px;font-size:.88rem}
.ficha-incluye li{display:flex;align-items:flex-start;gap:10px;color:var(--muted)}
.ficha-incluye svg{width:14px;height:14px;stroke:var(--red);flex:none;margin-top:3px}
.ficha-incluye b{color:var(--ink);font-weight:600}

/* ---------- Ficha técnica ---------- */
.ficha-bloque{margin-top:48px}
.ficha-bloque>h2{font-size:1.25rem;margin-bottom:20px}
.especificaciones{
  display:grid;gap:0;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
}
@media (min-width:600px){.especificaciones{grid-template-columns:1fr 1fr}}
.especificaciones>div{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:14px 20px;border-bottom:1px solid var(--line);font-size:.92rem;
}
@media (min-width:600px){
  .especificaciones>div:nth-last-child(-n+2):nth-child(odd){border-bottom:0}
  .especificaciones>div:nth-child(odd){border-right:1px solid var(--line)}
}
.especificaciones>div:last-child{border-bottom:0}
.especificaciones dt{color:var(--muted)}
.especificaciones dd{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}

/* ---------- Equipamiento ---------- */
.equipamiento{list-style:none;display:grid;gap:10px;font-size:.94rem}
@media (min-width:600px){.equipamiento{grid-template-columns:1fr 1fr;gap:10px 32px}}
.equipamiento li{display:flex;align-items:flex-start;gap:10px}
.equipamiento svg{width:13px;height:13px;stroke:var(--red);flex:none;margin-top:5px}

.ficha-desc p{max-width:68ch;line-height:1.75;color:var(--ink)}
.ficha-desc p+p{margin-top:16px}

/* ---------- Otros coches ---------- */
/* padding-block, no el atajo: `padding` borraria el padding-inline de .container. */
.otros{border-top:1px solid var(--line);padding-block:56px 72px}
.otros h2{font-size:1.25rem;margin-bottom:24px}