/* ==========================================================================
   Mazda | Colautos del Cafe — design tokens (extraídos del kit real de
   Elementor, wp-content/uploads/elementor/css/post-6.css — mismos valores
   --e-global-color-* que la corporativa, porque el rojo Mazda #910A2D es la
   fuente de la paleta corporativa, no al revés. Tipografía real: fuente de
   marca "Mazda Type" (Regular/Medium/Bold), subida como TTF en el sitio
   WordPress original — no Montserrat como en la corporativa.)
   ========================================================================== */
:root {
  --color-red: #910A2D;       /* rojo Mazda */
  --color-black: #101010;
  --color-blue: #2C5F9E;
  --color-white: #FFFFFF;
  --color-gray-100: #F5F5F5;
  --color-gray-200: #E7E7E7;
  --color-gray-300: #D5D5D5;
  --color-gray-500: #999999;
  --color-text: #101010;
  --color-hover-light: #F2F2F2; /* neutral hover accent for site chrome (header, topbar, footer) — replaces the red brand accent there so persistent nav doesn't compete with in-page red CTAs/highlights */

  --font-base: "Mazda Type", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-medium: "Mazda Type Medium", var(--font-base);
  --font-bold: "Mazda Type Bold", var(--font-base);
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --container-max: 1140px;
  --header-height: 84px;
  --topbar-height: 42px;
  /* Default assumes the page hasn't scrolled yet (topbar + header both
     visible); assets/js/main.js overrides this to the header's actual
     measured bottom edge each time the mobile menu opens, since the
     topbar scrolls away (it isn't sticky) while .site-header stays put —
     a fixed calc() here alone would leave a gap once scrolled. */
  --nav-offset: calc(var(--header-height) + var(--topbar-height));
}

@font-face {
  font-family: "Mazda Type";
  src: url("/assets/fonts/Mazda-Type-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mazda Type Medium";
  src: url("/assets/fonts/Mazda-Type-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mazda Type Bold";
  src: url("/assets/fonts/Mazda-Type-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Reset ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-base);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--color-black); text-decoration: none; font-weight: var(--fw-medium); }
a:hover { color: var(--color-red); }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 16px;
  font-family: var(--font-bold);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--color-black);
}
h1 { font-size: clamp(32px, 5vw, 56px); }
h2 { font-size: clamp(24px, 3.5vw, 36px); }
h3 { font-size: 22px; }
p { margin: 0 0 16px; color: #4a4a4a; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-medium);
  font-weight: var(--fw-medium);
  font-size: 15px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.btn .icon { flex-shrink: 0; }
.btn:hover { background: var(--color-hover-light); color: var(--color-black); }
.btn-outline {
  background: transparent;
  color: var(--color-black);
  border: 1px solid var(--color-black);
}
/* color explicit here too (not just background) — every place this
   renders is class="btn btn-outline" together, and .btn:hover shares this
   selector's specificity, so leaving color unset would make it depend on
   cascade source order instead of being self-contained (see the corporate
   site's now-fixed .btn-outline:hover for the bug this avoids). */
.btn-outline:hover { background: var(--color-hover-light); color: var(--color-black); }
.btn-red { background: var(--color-red); }
.btn-red:hover { background: var(--color-hover-light); color: var(--color-black); }

/* ==========================================================================
   Hybrid model list (/hibridos/)
   ========================================================================== */
.hibrido-model-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.hibrido-model {
  background: var(--color-white);
  padding: 28px;
  border: 1px solid var(--color-gray-200);
}
.hibrido-model h3 { font-size: 18px; margin-bottom: 8px; }
.hibrido-model p { margin-bottom: 16px; }
@media (max-width: 700px) {
  .hibrido-model-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Mazda Collection (/mazda-collection-tienda/)
   ========================================================================== */
.collection-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.collection-chip {
  padding: 8px 18px;
  border: 1px solid var(--color-gray-200);
  border-radius: 999px;
  font-size: 13px;
  color: var(--color-black);
  background: var(--color-white);
}

section { padding: 64px 0; }
.section-tight { padding: 32px 0; }
.text-center { text-align: center; }
/* Fills the viewport below the topbar + header regardless of screen size,
   so the 404 message reads as a real full page instead of a short blurb
   sitting on top of a tall footer. */
.error-fullpage {
  min-height: calc(100vh - var(--header-height) - 42px);
  display: flex;
  align-items: center;
}
.error-fullpage .container { width: 100%; }

/* ==========================================================================
   Generic content tabs — single-panel switcher (Mazda Direct Credit plans,
   reusable anywhere a page needs "pick one of N" content, distinct from
   .vehiculo-filters which filters a grid instead of swapping panels).
   ========================================================================== */
.content-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 32px; margin-bottom: 32px; }
.content-tab {
  background: none;
  border: none;
  padding: 0 0 6px;
  font-family: var(--font-bold);
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-black);
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.content-tab:hover { background: var(--color-hover-light); }
.content-tab.is-active { border-bottom-color: var(--color-black); }
.content-tab-panel { display: none; text-align: left; }
.content-tab-panel.is-active { display: block; animation: contentTabFadeIn 0.4s ease; }
.content-tab-panel ul { margin: 16px 0; }
.content-tab-panel li { margin-bottom: 6px; color: #4a4a4a; }
@keyframes contentTabFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.plan-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; text-align: left; }
.plan-panel-image img { width: 100%; height: auto; border-radius: 12px; display: block; }
.plan-panel-video video { width: 100%; max-height: 520px; border-radius: 12px; display: block; background: var(--color-black); object-fit: cover; margin: 0 auto; }
@media (max-width: 700px) {
  .plan-panel-grid { grid-template-columns: 1fr; gap: 24px; }
  .plan-panel-image, .plan-panel-video { order: -1; }
}

/* ==========================================================================
   Taller (service) subpages — image gallery grid, reused across
   servicio-inmediato, mecanica-especializada, colision, pintuexpress, repuestos.
   ========================================================================== */
.taller-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.taller-gallery img { width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.taller-gallery img.is-portrait { aspect-ratio: 3/4; }
@media (max-width: 900px) {
  .taller-gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .taller-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Mazda Direct Credit (/mazda-direct-credit/)
   ========================================================================== */
.direct-credit-hero { position: relative; overflow: hidden; }
.direct-credit-hero img { width: 100%; height: auto; display: block; }
.direct-credit-hero .btn {
  position: absolute;
  left: 24px;
  bottom: 24px;
  background: var(--color-white);
  color: var(--color-black);
}
.direct-credit-hero .btn:hover { background: var(--color-hover-light); color: var(--color-black); }
@media (max-width: 700px) {
  .direct-credit-hero .btn { position: static; display: inline-block; margin-top: 16px; }
}
.direct-credit-mem-banner { position: relative; overflow: hidden; }
.direct-credit-mem-banner img { width: 100%; height: auto; display: block; }
.direct-credit-mem-banner-text {
  position: absolute;
  left: max(24px, calc((100% - var(--container-max)) / 2 + 24px));
  top: 50%;
  transform: translateY(-50%);
  max-width: 420px;
  color: var(--color-white);
}
.direct-credit-mem-banner-text .eyebrow { color: var(--color-white); }
.direct-credit-mem-banner-text p { color: var(--color-white); margin: 16px 0 0; }
.direct-credit-mem-banner-text .btn { margin-top: 20px; }
@media (max-width: 700px) {
  .direct-credit-mem-banner-text { position: static; transform: none; max-width: none; padding: 24px; background: var(--color-black); }
}
.eyebrow {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-red);
  margin-bottom: 8px;
  display: block;
}

/* ==========================================================================
   Icons (inline SVG, currentColor)
   ========================================================================== */
.icon { width: 20px; height: 20px; flex-shrink: 0; }
.icon-sm { width: 16px; height: 16px; }

/* ==========================================================================
   Top bar — real site runs a black topbar + nav (verified against the live
   WordPress header at mazda.colautosdelcafe.com, body/section bg #101010,
   white logo + white nav text), not the white header this file shipped
   with originally.
   ========================================================================== */
.topbar {
  background: var(--color-black);
  color: var(--color-white);
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.topbar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
}
.topbar-social { display: flex; gap: 14px; align-items: center; justify-self: start; }
.topbar-social a { color: var(--color-white); display: flex; align-items: center; }
.topbar-social a:hover { color: var(--color-hover-light); }
.topbar-social .icon { height: 16px; width: auto; }
.topbar-location {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-white);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  justify-self: center;
}
.topbar-legal { justify-self: end; display: flex; gap: 16px; }
.topbar-legal a { color: var(--color-white); font-weight: var(--fw-medium); letter-spacing: 0.05em; font-size: 12px; opacity: 0.85; }
.topbar-legal a:hover { opacity: 1; }
@media (max-width: 900px) {
  .topbar-location { display: none; }
  .topbar-grid { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  border-bottom: 1px solid rgba(255,255,255,0.1);
  position: sticky;
  top: 0;
  background: var(--color-black);
  z-index: 500;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}
.site-logo img { height: 36px; width: auto; }
.main-nav { display: flex; gap: 22px; align-items: center; }
.main-nav > a {
  font-size: 13px;
  font-family: var(--font-medium);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-white);
}
.main-nav > a:hover { color: var(--color-hover-light); }
.nav-item-dropdown { position: relative; }
.nav-item-dropdown > a {
  font-size: 13px;
  font-family: var(--font-medium);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-white);
}
.nav-item-dropdown:hover > a { color: var(--color-hover-light); }
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  min-width: 260px;
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all 0.15s ease;
}
.nav-item-dropdown:hover .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 18px;
  font-size: 13px;
  text-transform: uppercase;
}
.nav-dropdown a .nav-dropdown-price {
  font-size: 11px;
  font-weight: var(--fw-regular);
  text-transform: none;
  color: var(--color-gray-500);
  white-space: nowrap;
}
@media (max-width: 900px) {
  /* Mobile: submenus (Vehículos, Servicio) render already expanded, not
     behind :hover — :hover doesn't exist on touch, so on a phone these
     were previously unreachable (tapping the label just navigated away
     instead of revealing the model/service links underneath it). */
  .nav-dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: none; box-shadow: none; min-width: 0;
    /* Desktop's white flyout-card background/dark text is wrong here —
       it left a jarring white box sitting inside the dark mobile menu.
       Blend into the dark menu instead. */
    background: transparent;
    padding: 4px 0 8px 12px;
  }
  .nav-dropdown a { color: var(--color-white); }
  .nav-dropdown a .nav-dropdown-price { color: rgba(255,255,255,0.55); }
  .nav-item-dropdown > a { border-bottom: none !important; }
}
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 1;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-white);
  margin: 5px 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
  /* Some mobile Safari builds leave faint sub-pixel artifacts at the tips
     of a rotated thin bar without an explicit centered origin + a forced
     compositor layer — this keeps the X crisp instead of leaving ghost dots. */
  transform-origin: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* Hamburger -> X, so it reads as a close button once the menu is open. */
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Dimmed backdrop behind the open mobile menu — without it the page's own
   content (still fully visible/scrollable right below the short dropdown
   panel) reads as if the menu were a transparent glitch rather than an
   intentional overlay. Sits under .main-nav's z-index but above the page. */
.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  top: var(--nav-offset);
  background: rgba(0,0,0,0.5);
  z-index: 490;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.nav-backdrop.is-open { display: block; opacity: 1; }
body.nav-open { overflow: hidden; }

@media (max-width: 900px) {
  .main-nav {
    position: fixed;
    top: var(--nav-offset);
    left: 0;
    right: 0;
    background: var(--color-black);
    flex-direction: column;
    align-items: stretch;
    padding: 16px 24px 24px;
    gap: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 16px 32px rgba(0,0,0,0.35);
    transform: translateY(-150%);
    transition: transform 0.25s ease;
    max-height: calc(100vh - var(--nav-offset));
    overflow-y: auto;
    z-index: 495;
  }
  .main-nav > a, .nav-item-dropdown > a {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .nav-item-dropdown {
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .main-nav.is-open { transform: translateY(0); }
  .nav-toggle { display: block; }
  .topbar-location { display: none; }
}

/* ==========================================================================
   Hero video
   ========================================================================== */
.hero-video {
  position: relative;
  overflow: hidden;
  background: var(--color-gray-100);
  width: 100%;
  /* Overrides the global `section { padding: 64px 0; }` rule (this IS a
     <section>) — without this, the image's height:100% resolves against
     the padded content box, leaving a 64px gap top and bottom. */
  padding: 0;
  /* Real site runs each of these sections around ~718px tall regardless of
     viewport width (verified via getBoundingClientRect on the live page at
     both 1440x900 and 1920x1080) — full-bleed and immersive, not a capped
     "video snippet" height. clamp() keeps that same full-page feel while
     staying sane on short laptop screens. */
  height: clamp(560px, 82vh, 780px);
}
.hero-video video, .hero-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Subtle continuous Ken Burns loop on the vehicle photo/video only — not on
   .hero-video-safety (the icon strip must stay static). .hero-video's own
   overflow:hidden crops the zoomed-in overflow, so this never shifts layout
   or reveals edges. */
.hero-video > video,
.hero-video > img:not(.hero-video-safety) {
  animation: hero-video-zoom 14s ease-in-out infinite;
}
@keyframes hero-video-zoom {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video > video,
  .hero-video > img:not(.hero-video-safety) { animation: none; }
}
.hero-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0) 70%);
}
.hero-video-caption {
  position: absolute;
  z-index: 2;
  inset: 0;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 32px 24px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  color: var(--color-white);
}
.hero-video-title h1,
.hero-video-title h2 {
  font-family: var(--font-medium);
  font-weight: var(--fw-medium);
  font-size: clamp(30px, 3.6vw, 50px);
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0,0,0,0.7);
  color: var(--color-white);
  margin: 0;
}
.hero-video-tagline {
  color: var(--color-white);
  text-transform: uppercase;
  font-size: clamp(14px, 1.4vw, 20px);
  font-family: var(--font-medium);
  font-weight: var(--fw-medium);
  text-shadow: 0 0 10px rgba(0,0,0,0.7);
  margin: 10px 0 0;
}
.hero-video-cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.hero-video-cta a {
  padding: 14px 28px;
  border: 1px solid rgba(255,255,255,0.7);
  color: var(--color-white);
  font-family: var(--font-medium);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hero-video-cta a:hover { background: rgba(255,255,255,0.15); color: var(--color-white); }
.hero-video-cta a.is-primary { background: var(--color-red); border-color: var(--color-red); }
.hero-video-cta a.is-primary:hover { background: var(--color-hover-light); color: var(--color-red); }
/* Safety-features badge strip — mirrors the live site's per-section overlay
   (background-position: 100% 100%; background-size: 30%), just as a real
   <img> instead of a CSS background so it participates in lazy-loading. */
.hero-video img.hero-video-safety {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: auto;
  top: auto;
  width: 30%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}
@media (max-width: 900px) {
  .hero-video img.hero-video-safety { width: 46%; }
}
@media (max-width: 700px) {
  .hero-video { height: clamp(480px, 78vh, 640px); }
}

/* Legacy carousel support (reused by other pages) */
.hero-carousel {
  position: relative;
  overflow: hidden;
  background: var(--color-gray-100);
  padding: 0;
  margin: 0;
  aspect-ratio: 1920 / 900;
}
/* No forced aspect-ratio/crop — the image displays at its own natural
   proportions instead of being cover-cropped into a fixed box. Mirrors the
   corporate site's single-banner pages (marcas, posventa, seguros,
   noticias...) so a banner like /noticias/'s wide thin strip isn't cropped
   to fit a taller box. */
.hero-carousel--natural { aspect-ratio: auto; height: auto; }
.hero-carousel--natural .hero-slide { position: static; opacity: 1; }
.hero-carousel--natural .hero-slide img { height: auto; object-fit: initial; object-position: initial; }
.hero-slide {
  opacity: 0;
  position: absolute;
  inset: 0;
  z-index: 0;
  transition: opacity 0.6s ease;
}
.hero-slide.is-active { opacity: 1; z-index: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}
.hero-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid var(--color-white);
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.hero-dot.is-active { background: var(--color-white); }

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.85);
  color: var(--color-black);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.hero-arrow .icon { width: 20px; height: 20px; }
.hero-arrow:hover { background: var(--color-white); }
.hero-prev { left: 16px; }
.hero-next { right: 16px; }
@media (max-width: 700px) { .hero-arrow { display: none; } }

/* ==========================================================================
   Page title bar — thin dark breadcrumb strip under the nav, matches the
   live site's litho-page-title-wrap (bg #101010, 12px centered white text).
   ========================================================================== */
.page-title-bar {
  background: var(--color-black);
  color: var(--color-white);
  font-size: 12px;
  text-align: center;
  padding: 10px 10px;
}

/* ==========================================================================
   Vehicle filter tabs (/vehiculos/)
   ========================================================================== */
.vehiculo-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 32px;
  margin: 0 0 32px;
}
.vehiculo-filter {
  background: none;
  border: none;
  padding: 0 0 6px;
  font-family: var(--font-bold);
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-black);
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.vehiculo-filter:hover { background: var(--color-hover-light); }
.vehiculo-filter.is-active { border-bottom-color: var(--color-black); }
.model-grid-empty { text-align: center; color: var(--color-gray-500); padding: 40px 0; display: none; }
.model-grid-item { display: contents; }

/* ==========================================================================
   Model showcase grid (home)
   ========================================================================== */
.model-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-gray-200);
  border: 1px solid var(--color-gray-200);
}
.model-card {
  position: relative;
  background: var(--color-black);
  aspect-ratio: 4/3;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.model-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.model-card:hover img { transform: scale(1.05); }
.model-card-scrim {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 20px 22px;
  background: linear-gradient(0deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0) 100%);
  color: var(--color-white);
}
.model-card-name { font-family: var(--font-bold); font-size: 20px; margin: 0 0 4px; color: var(--color-white); }
.model-card-tagline { font-size: 12px; letter-spacing: 0.03em; color: rgba(255,255,255,0.85); margin-bottom: 4px; }
.model-card-price { font-size: 12px; color: rgba(255,255,255,0.65); margin-bottom: 12px; }
.model-card-cta { display: flex; gap: 10px; }
.model-card-cta a {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-white);
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 2px;
}
.model-card-cta a:hover { background: var(--color-hover-light); color: var(--color-black); }
.model-card-cta a.is-primary { background: var(--color-red); border-color: var(--color-red); }
.model-card-cta a.is-primary:hover { background: var(--color-hover-light); color: var(--color-red); }
@media (max-width: 900px) {
  .model-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .model-grid { grid-template-columns: 1fr; }
}
.model-grid-disclaimer { font-size: 12px; color: var(--color-gray-500); margin-top: 16px; }

/* ==========================================================================
   Video showcase (Mazda CX-50 launch video, before "Últimas noticias")
   ========================================================================== */
.video-showcase { padding: 40px 0; }
.video-showcase-frame {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--color-black);
}
.video-showcase-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-showcase-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.9);
  color: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.video-showcase-play svg { width: 30px; height: 30px; margin-left: 4px; }
.video-showcase-play:hover { background: var(--color-white); transform: scale(1.06); }
.video-showcase-frame.is-playing .video-showcase-play { opacity: 0; pointer-events: none; }
@media (max-width: 700px) {
  .video-showcase-frame { aspect-ratio: 4/3; }
  .video-showcase-play { width: 60px; height: 60px; }
  .video-showcase-play svg { width: 24px; height: 24px; }
}

/* ==========================================================================
   Cards / grids
   ========================================================================== */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.card {
  border: 1px solid var(--color-gray-200);
  border-radius: 4px;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}
.card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.card-body { padding: 20px; }

.banner-link { display: block; position: relative; }
.banner-link img { width: 100%; }

/* ==========================================================================
   Sede / posventa cards (home)
   ========================================================================== */
.sede-card { position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 4/3; }
.sede-card img { width: 100%; height: 100%; object-fit: cover; }
.sede-card-label {
  position: absolute; left: 0; bottom: 0; right: 0;
  padding: 16px 18px;
  background: linear-gradient(0deg, rgba(0,0,0,0.75), rgba(0,0,0,0));
  color: var(--color-white);
  font-family: var(--font-medium);
  font-size: 15px;
  letter-spacing: 0.02em;
}
.sede-card-label span { display: block; font-size: 12px; font-weight: var(--fw-regular); color: rgba(255,255,255,0.75); margin-top: 2px; }

/* Real embedded Google Map under each sede photo (live site runs the
   Elementor google_maps widget here — no API key needed for the plain
   maps.google.com/maps?q=...&output=embed form). */
.sede-card-full { display: flex; flex-direction: column; }
.sede-map { border-radius: 0 0 6px 6px; overflow: hidden; }
.sede-map iframe { width: 100%; height: 200px; border: 0; display: block; }

/* Real embedded YouTube videos (¡Síguenos en YouTube! section on home) */
.yt-embed { position: relative; aspect-ratio: 16/9; border-radius: 6px; overflow: hidden; background: #000; }
.yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ==========================================================================
   Blog / Noticias
   ========================================================================== */
.blog-card { display: flex; flex-direction: column; height: 100%; }
.blog-card-img { position: relative; overflow: hidden; aspect-ratio: 16/10; background: var(--color-gray-100); }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.blog-card:hover .blog-card-img img { transform: scale(1.05); }
.blog-card-body { padding: 20px 0; flex: 1; display: flex; flex-direction: column; }
.blog-card-date { font-size: 12px; color: var(--color-gray-500); margin-bottom: 8px; letter-spacing: 0.03em; }
.blog-card h3 { font-size: 18px; margin-bottom: 10px; font-family: var(--font-medium); }
.blog-card h3 a { color: var(--color-black); }
.blog-card h3 a:hover { color: var(--color-red); }
/* Hard cap at 4 lines regardless of how long a post's excerpt/first
   paragraph is — keeps every card the same height no matter what future
   noticias get added, instead of relying on writers to hand-trim text. */
.blog-card p {
  font-size: 14px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card-readmore { font-size: 13px; font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.04em; }

/* ==========================================================================
   Footer
   ========================================================================== */
/* Real site footer is also black (#101010) with white/light-gray text —
   verified against the live WordPress footer, same source as the topbar. */
.site-footer {
  background: var(--color-black);
  color: rgba(255,255,255,0.8);
  margin-top: 72px;
  /* Mirrors .site-header's border-bottom — the footer gets the same rule
     on its own top edge instead of on the .container inside it, so it
     spans the full viewport width instead of stopping at the content
     column like the header's does. */
  border-top: 1px solid rgba(255,255,255,0.1);
}
@media (max-width: 700px) { .site-footer { margin-top: 48px; } }

/* Full-bleed section dividers: border-top lives on these wrappers (no
   max-width) instead of on the .container nested inside each one, so every
   divider line spans the full viewport edge-to-edge instead of stopping at
   the content column width. */
.footer-locations {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 48px;
  padding-bottom: 8px;
}
.sedes-group { margin-bottom: 32px; }
.sedes-group-title {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 20px;
  color: var(--color-white);
}

.location-card { font-size: 14px; }
.location-card strong { display: block; margin: 0 0 10px; font-size: 15px; color: var(--color-white); }
.location-card .icon-row { display: flex; gap: 10px; margin-bottom: 10px; }
.location-card .icon-row a {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--color-white);
}
.location-card .icon-row a:hover { border-color: var(--color-hover-light); color: var(--color-hover-light); }
.location-card p { font-size: 13px; color: rgba(255,255,255,0.65); }
.location-card a { color: rgba(255,255,255,0.65); }
.location-card p a { text-decoration: underline; text-decoration-color: rgba(255,255,255,0.3); }
.location-card p a:hover { color: var(--color-hover-light); }

/* One standard schedule for every Mazda location instead of per-card
   hours — shown once, clearly labeled as applying to all sedes. */
.sedes-schedule {
  margin-top: 8px;
  margin-bottom: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.sedes-schedule-title { grid-column: 1 / -1; font-size: 13px; font-weight: var(--fw-semibold); letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-white); margin-bottom: 4px; }
.sedes-schedule strong { display: block; font-size: 14px; margin-bottom: 4px; color: var(--color-white); }
.sedes-schedule p { font-size: 13px; color: rgba(255,255,255,0.65); margin: 0; }
@media (max-width: 700px) {
  .sedes-schedule { grid-template-columns: 1fr; gap: 16px; }
}

.footer-main {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 40px;
  padding-bottom: 40px;
}
.footer-main h5 {
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 16px;
  color: var(--color-white);
}
.footer-main ul li { margin-bottom: 10px; font-size: 14px; }
.footer-main ul li a { color: rgba(255,255,255,0.65); font-weight: var(--fw-regular); }
.footer-main ul li a:hover { color: var(--color-hover-light); }

.footer-social { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.footer-social a {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--color-white); font-weight: var(--fw-regular);
}
.footer-social a .icon { width: 15px; height: 15px; flex-shrink: 0; }
.footer-social a:hover { color: var(--color-hover-light); }

.footer-contact-title { font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 10px; color: var(--color-white); }
.footer-contact-lines { font-size: 13px; margin-bottom: 20px; }
.footer-contact-lines a {
  color: var(--color-white);
}
.footer-contact-lines a:hover { color: var(--color-hover-light); }

.footer-contact-list { font-size: 13px; color: rgba(255,255,255,0.65); margin: 0; }
.footer-contact-list dt { font-weight: var(--fw-semibold); color: var(--color-white); margin-top: 12px; }
.footer-contact-list dt:first-child { margin-top: 0; }
.footer-contact-list dd { margin: 2px 0 0; }
.footer-contact-list a { color: rgba(255,255,255,0.65); word-break: break-word; }
.footer-contact-list a:hover { color: var(--color-hover-light); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 24px;
  padding-bottom: 24px;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
}
.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  text-align: center;
}
.footer-cookie-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-family: inherit;
  color: rgba(255,255,255,0.55);
  text-decoration: underline;
  cursor: pointer;
}
.footer-cookie-link:hover { color: var(--color-hover-light); }
.footer-disclaimer {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 24px;
  padding-bottom: 24px;
  font-size: 12px;
  color: rgba(255,255,255,0.45);
}
.footer-disclaimer p { font-size: 12px; color: rgba(255,255,255,0.45); margin-bottom: 10px; }
.footer-disclaimer a { color: rgba(255,255,255,0.65); }
.footer-disclaimer a:hover { color: var(--color-hover-light); }
.footer-credit { text-align: center; padding-top: 16px; padding-bottom: 16px; font-size: 12px; color: rgba(255,255,255,0.45); }
.footer-credit a { color: rgba(255,255,255,0.65); }
.footer-credit a:hover { color: var(--color-hover-light); }

@media (max-width: 700px) {
  .footer-locations { padding-top: 36px; padding-bottom: 4px; }
  .footer-main { padding-top: 32px; padding-bottom: 32px; }
  .sedes-group { margin-bottom: 24px; }
  .footer-main .grid-4 { gap: 32px; }
  .footer-bottom { padding-top: 20px; padding-bottom: 20px; }
  .footer-bottom-inner { flex-direction: column; gap: 10px; }
}

/* ==========================================================================
   Vehicle detail pages (/vehiculos/<slug>/) — restyled against screenshots
   of the LIVE WordPress ficha (mazda.colautosdelcafe.com/portfolio/<slug>/,
   captured during QA): full-bleed hero with the title overlaid, stacked
   section-divider headings for the marketing copy (not a chip cloud),
   centered color swatches, and a tight edge-to-edge gallery grid. The
   fragments in content/vehiculos/<slug>.html still ship a fixed structure —
   pages/vehiculos.py's transform_fragment() re-wraps just the h1+hero img
   pair into .vehiculo-hero-wrap at build time; everything below that is
   styled in place via these class selectors (all more specific than the
   global `section { padding: 64px 0; }` rule, so no !important needed).
   ========================================================================== */

/* Secondary title band — repeats the model name + tagline on a plain white
   strip right above the stats row (no photo, no overlay — just the title),
   matching the live ficha's second "MAZDA 2 SPORT / LIBERA TU INSTINTO"
   slide reduced to its text-only essentials. */
.vehiculo-title-band {
  background: var(--color-white);
  padding: 40px 24px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vehiculo-title-band-copy { text-align: center; color: var(--color-black); }
.vehiculo-title-band-name {
  font-family: var(--font-medium);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gray-500);
  margin-bottom: 8px;
}
.vehiculo-title-band-tagline {
  font-family: var(--font-bold);
  font-size: clamp(24px, 3.5vw, 40px);
  text-transform: uppercase;
  margin-bottom: 0;
}

.vehiculo-hero-wrap {
  position: relative;
  width: 100%;
  min-height: 70vh;
  max-height: 760px;
  overflow: hidden;
  background: var(--color-black);
}
.vehiculo-hero-wrap .vehiculo-hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vehiculo-hero-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0.05) 70%);
}
.vehiculo-hero-caption {
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 24px 24px 48px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.vehiculo-hero-back { margin: 0 0 16px; }
.vehiculo-hero-back a { color: rgba(255,255,255,0.85); font-size: 13px; font-weight: var(--fw-medium); }
.vehiculo-hero-back a:hover { color: var(--color-white); }
.vehiculo-hero-caption h1 { color: var(--color-white); margin-bottom: 6px; }
.vehiculo-hero-tagline {
  color: rgba(255,255,255,0.9);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 15px;
  font-family: var(--font-medium);
  margin: 0;
}

/* Safety-equipment badge strip, bottom-right of the hero — the exact same
   per-model overlay PNG used on the home page hero (see .hero-video-safety
   in pages/home.py), just rendered here too instead of a separate custom
   graphic, so both pages show the identical Mazda-provided artwork. */
img.vehiculo-hero-safety {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  width: 26%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}
@media (max-width: 700px) {
  img.vehiculo-hero-safety { width: 46%; }
}
@media (max-width: 700px) {
  .vehiculo-hero-wrap { min-height: 56vh; }
}

.vehiculo-marketing,
.vehiculo-seguridad,
.vehiculo-versiones,
.vehiculo-versiones-picker,
.vehiculo-authentic,
.vehiculo-connect,
.vehiculo-color-preview,
.vehiculo-galeria,
.vehiculo-accesorios,
.vehiculo-cotizar {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 48px 24px;
}

/* Stats row — three numbers (transmission/engine) directly under the hero,
   matches the live ficha's "6AT / 1,5L / 2,0L" strip. */
.vehiculo-stats {
  display: flex;
  justify-content: center;
  gap: 64px;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 32px 24px 40px;
  text-align: center;
}
.stat-value { display: block; font-family: var(--font-bold); font-size: clamp(28px, 3.5vw, 42px); }
.stat-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-gray-500); margin-top: 4px; }
@media (max-width: 700px) { .vehiculo-stats { gap: 32px; } }

/* Three-up full-width image row (no text) between the version picker and
   the marketing section. */
.vehiculo-triple { display: grid; grid-template-columns: repeat(3, 1fr); max-width: none; }
.vehiculo-triple img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 700px) { .vehiculo-triple { grid-template-columns: 1fr; } }

/* Version picker — one card per trim, matches "Elige tu versión". */
.vehiculo-versiones-picker { text-align: center; }
.versiones-note { color: var(--color-gray-500); font-size: 14px; margin-bottom: 32px; }
.version-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; text-align: left; }
.version-card { border: 1px solid var(--color-gray-200); padding: 24px; }
.version-card h3 { font-size: 17px; margin-bottom: 8px; }
.version-disclaimer { font-size: 11px; color: var(--color-gray-500); margin-bottom: 10px; }
.version-card p:last-child { font-size: 14px; margin-bottom: 0; }

/* Feature blocks — heading+copy alternating with photo(s), replacing the old
   flat h3-divider dump now that we intersperse the real per-section images. */
.kicker {
  font-family: var(--font-bold);
  font-size: clamp(22px, 2.6vw, 32px);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 4px;
}
.kicker-sub { text-align: center; max-width: none; font-size: 16px; color: var(--color-gray-500); margin-bottom: 40px; }
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 32px 0;
}
.feature-row.reverse .feature-text { order: 2; }
.feature-text h4 {
  font-family: var(--font-bold);
  font-size: clamp(18px, 2vw, 24px);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.feature-text p { font-size: 15px; }
.feature-images { display: grid; gap: 12px; }
.feature-images:has(img:nth-child(2)) { grid-template-columns: 1fr 1fr; }
.feature-images img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 700px) {
  .feature-row, .feature-row.reverse .feature-text { grid-template-columns: 1fr; order: initial; }
}

/* "Un vehículo que respira..." — big statement + two flanking photos. */
.vehiculo-authentic { text-align: center; }
.vehiculo-authentic p { max-width: 720px; margin: 0 auto 32px; }
.authentic-images { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.authentic-images img { width: 100%; height: auto; display: block; }
@media (max-width: 700px) { .authentic-images { grid-template-columns: 1fr; } }

/* Mazda Connect — dark section, full-bleed image carousel with a small
   non-obscuring caption card in the bottom-right of each slide. */
.vehiculo-connect { background: var(--color-black); color: var(--color-white); max-width: none; padding: 48px 0; }
.vehiculo-connect > h2 { text-align: center; color: var(--color-white); margin-bottom: 32px; }
.connect-carousel { position: relative; max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
.connect-slides { position: relative; height: 560px; overflow: hidden; }
.connect-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.connect-slide.is-active { opacity: 1; visibility: visible; }
.connect-card {
  background: rgba(255,255,255,0.92);
  color: var(--color-black);
  padding: 24px 28px;
  max-width: 340px;
  margin: 0 32px 32px 0;
}
.connect-card h3 { font-size: 16px; text-transform: uppercase; color: var(--color-black); margin-bottom: 8px; }
.connect-card p { font-size: 13px; line-height: 1.5; color: #333; margin-bottom: 0; }
.connect-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: none;
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.connect-nav .icon { width: 18px; height: 18px; }
.connect-nav:hover { background: rgba(255,255,255,0.3); }
.connect-prev { left: 40px; }
.connect-next { right: 40px; }
.connect-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.connect-dot { width: 8px; height: 8px; padding: 0; border-radius: 50%; background: rgba(255,255,255,0.35); border: none; cursor: pointer; }
.connect-dot.is-active { background: var(--color-white); }
@media (max-width: 700px) {
  .connect-slides { height: 420px; }
  .connect-card { max-width: none; margin: 0 16px 16px; padding: 16px 20px; }
  .connect-prev { left: 16px; }
  .connect-next { right: 16px; }
}

/* Color preview — swatch name + big studio render. */
.vehiculo-color-preview { text-align: center; }
.vehiculo-color-preview h4 { font-family: var(--font-bold); font-size: clamp(18px, 2vw, 24px); text-transform: uppercase; margin-bottom: 4px; }
.vehiculo-color-preview h3 { font-size: 16px; color: var(--color-gray-500); margin-bottom: 24px; }
.vehiculo-color-preview img { max-width: 100%; height: auto; }

.vehiculo-cta-row {
  padding-top: 0;
  padding-bottom: 48px;
}
.vehiculo-cta-row .container {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Intro summary — kicker + short paragraph right under the 3-photo strip,
   ahead of the "ficha técnica / contacta un asesor" CTA row. */
.vehiculo-intro { text-align: center; padding-bottom: 24px; }
.vehiculo-intro .kicker { margin-bottom: 16px; }
.vehiculo-intro-copy { max-width: 640px; margin: 0 auto; color: var(--color-gray-500); }

.vehiculo-seguridad h2,
.vehiculo-versiones h2,
.vehiculo-galeria h2,
.vehiculo-cotizar h2 {
  font-size: clamp(22px, 3vw, 28px);
}

.seguridad-lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.seguridad-lista li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--color-gray-100);
  border-radius: 6px;
}
.seguridad-lista img { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; }
.seguridad-lista span { font-size: 13px; font-weight: var(--fw-medium); color: var(--color-black); line-height: 1.3; }
@media (max-width: 900px) { .seguridad-lista { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .seguridad-lista { grid-template-columns: 1fr; } }

.vehiculo-versiones h2 { text-align: center; }
.vehiculo-versiones h3 {
  font-size: 16px;
  font-family: var(--font-medium);
  text-align: center;
  margin: 28px 0 16px;
}
.vehiculo-versiones h3:first-of-type { margin-top: 0; }

/* 360° version/color viewer — drag to rotate through 24 preloaded frames,
   per version × color × exterior/interior, self-hosted from the real Mazda
   Colombia photo set (see content fragment for the exact matrix). */
.v360 { max-width: 720px; margin: 0 auto; text-align: center; }
.v360-toggle-row { margin-bottom: 20px; }
.v360-toggle { display: inline-flex; gap: 24px; border-bottom: 1px solid var(--color-gray-200); padding-bottom: 10px; }
.v360-toggle-btn {
  background: none; border: none; cursor: pointer; padding: 4px 2px;
  font-family: var(--font-medium); font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-gray-500);
}
.v360-toggle-btn.is-active { color: var(--color-red); border-bottom: 2px solid var(--color-red); padding-bottom: 8px; }
.v360-versions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font-size: 13px; letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 20px; }
.v360-version-btn { background: none; border: none; cursor: pointer; color: var(--color-gray-500); font-family: var(--font-medium); font-size: 13px; letter-spacing: 0.03em; text-transform: uppercase; padding: 2px; }
.v360-version-btn.is-active { color: var(--color-black); }
.v360-sep { color: var(--color-gray-200); }
.v360-colors { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; }
.v360-color-btn { background: none; border: none; padding: 3px; cursor: pointer; border-radius: 50%; }
.v360-color-swatch { display: block; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); }
.v360-color-btn.is-active { box-shadow: 0 0 0 2px var(--color-white), 0 0 0 3px var(--color-black); }
.v360-stage { position: relative; }
.v360-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--color-gray-500); margin-bottom: 8px; }
.v360-badge .icon { width: 16px; height: 16px; }
.v360-frame { cursor: grab; touch-action: none; user-select: none; }
.v360-frame.is-grabbing { cursor: grabbing; }
.v360-frame img { width: 100%; height: auto; display: block; pointer-events: none; }
.v360-hint {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  font-size: 12px; color: var(--color-gray-500); background: rgba(255,255,255,0.85);
  padding: 4px 10px; border-radius: 999px; transition: opacity 0.3s ease; pointer-events: none;
}
.v360-hint.is-hidden { opacity: 0; }
@media (max-width: 700px) {
  .v360-versions { font-size: 12px; }
}

/* Color swatches: the dot itself is painted client-side from data-color-rgb
   by assets/js/main.js (see initColorSwatches) since attr()-as-color has no
   real browser support — no change needed to the content fragments. Real
   site centers this row ("DISPONIBLE EN ESTOS COLORES"), so we do too. */
.colores-lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  margin-bottom: 8px;
}
.colores-lista li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 84px;
  text-align: center;
}
.colores-lista li::before {
  content: "";
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--swatch-color, var(--color-gray-300));
  border: 1px solid rgba(0,0,0,0.12);
}
.colores-lista span { font-size: 11px; color: #4a4a4a; line-height: 1.3; }

/* Tight, edge-to-edge 2-up grid — matches the live gallery's layout instead
   of a rounded-corner 4-up card grid. */
.vehiculo-galeria { scroll-margin-top: var(--header-height); }
.vehiculo-galeria h2 { text-align: center; }
.galeria-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}
.galeria-grid img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}


.taller-zigzag-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; text-align: left; margin-bottom: 56px; }
.taller-zigzag-row:last-child { margin-bottom: 0; }
.taller-zigzag-row.is-reversed .taller-zigzag-image { order: -1; }
.taller-zigzag-row img { width: 100%; height: auto; border-radius: 12px; display: block; }
@media (max-width: 700px) {
  .taller-zigzag-row { grid-template-columns: 1fr; gap: 20px; margin-bottom: 32px; }
  .taller-zigzag-row.is-reversed .taller-zigzag-image { order: 0; }
}

/* Accessories — compact in-page block (not a subpage), matching the live
   Mazda Colombia "Accesorios" tab content but condensed to a handful of
   cards + a legal disclaimer pointed at Colautos, our own dealership. */
.vehiculo-accesorios { text-align: center; }
.vehiculo-accesorios h2 { margin-bottom: 8px; }
.vehiculo-accesorios-intro { max-width: 640px; margin: 0 auto 32px; color: var(--color-gray-500); }
.accesorios-subtitle {
  text-align: left;
  font-size: 13px;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-gray-500);
  margin: 32px 0 16px;
}
.accesorios-subtitle:first-of-type { margin-top: 0; }
.accesorios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
  text-align: left;
}
.accesorio-card img { width: 100%; aspect-ratio: 1/1; object-fit: contain; background: var(--color-gray-100); }
.accesorio-card h4 { font-size: 14px; text-transform: uppercase; margin: 12px 0 4px; }
.accesorio-card p { font-size: 13px; color: var(--color-gray-500); margin-bottom: 0; }
.vehiculo-accesorios-disclaimer { font-size: 11px; color: var(--color-gray-500); max-width: 760px; margin: 32px auto 0; }

.vehiculo-cotizar { background: var(--color-gray-100); border-radius: 8px; }
.vehiculo-cotizar h2 { text-align: center; }
.vehiculo-cotizar iframe {
  display: block;
  width: 100%;
  border-radius: 8px;
  background: var(--color-white);
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}

/* Standalone "Cotizar <modelo>" page (/vehiculos/<slug>/cotizar-<slug>/) */
.cotizar-iframe-wrap {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  background: var(--color-white);
}
.cotizar-iframe-wrap iframe { display: block; }

/* ==========================================================================
   Lead form (GoHighLevel embed)
   ========================================================================== */
.lead-form-wrap {
  max-width: 640px;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
.lead-form-wrap iframe { border-radius: 8px; }

/* ==========================================================================
   Cookie consent — full-screen preference modal (mirrors the corporate
   site's mechanism at colautosdelcafe.com; accents re-skinned to Mazda red
   instead of corp blue)
   ========================================================================== */
.cookie-hidden { display: none !important; }
body.cookie-locked { overflow: hidden; }

.cookie-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 16, 16, 0.6);
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
}
.cookie-overlay.is-open { opacity: 1; visibility: visible; }

.cookie-modal {
  position: relative;
  background: var(--color-white);
  color: var(--color-text);
  width: 100%;
  max-width: 720px;
  max-height: 88vh;
  overflow-y: auto;
  border-radius: 4px;
  padding: 44px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32);
}
.cookie-close {
  display: none;
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: var(--color-gray-500);
  cursor: pointer;
  padding: 4px;
}
.cookie-overlay.is-closable .cookie-close { display: block; }
.cookie-close:hover { color: var(--color-red); }

.cookie-skip {
  float: right;
  background: none;
  border: none;
  font-size: 13px;
  text-decoration: underline;
  color: var(--color-black);
  cursor: pointer;
  padding: 0;
  margin-left: 16px;
}
.cookie-skip:hover { color: var(--color-red); }

.cookie-view h2 {
  font-size: 22px;
  margin: 0 0 16px;
  padding-right: 140px;
  color: var(--color-black);
}
.cookie-view hr { border: none; border-top: 1px solid var(--color-gray-200); margin: 0 0 20px; }
.cookie-view p { font-size: 14px; color: #4a4a4a; margin-bottom: 14px; }
.cookie-view p:last-child { margin-bottom: 0; }
.cookie-view a { color: var(--color-red); text-decoration: underline; font-weight: var(--fw-regular); }

.cookie-modal-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0; }
.cookie-modal-actions .btn { flex: 1; min-width: 220px; text-align: center; padding: 14px 20px; }

.cookie-modal-links { font-size: 12.5px; line-height: 1.7; }

.cookie-cat-list { display: flex; flex-direction: column; gap: 20px; margin-bottom: 24px; }
.cookie-cat { border-top: 1px solid var(--color-gray-200); padding-top: 16px; }
.cookie-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.cookie-cat-head strong { font-size: 14.5px; color: var(--color-black); }
.cookie-cat p { font-size: 13px; margin-bottom: 0; }

.cookie-cat-note {
  margin-top: 10px !important;
  padding: 10px 12px;
  background: var(--color-gray-100);
  border-left: 3px solid var(--color-red);
  font-size: 12px !important;
  color: #4a4a4a;
}
.cookie-cat-note a { color: var(--color-red); font-weight: var(--fw-semibold); text-decoration: underline; }

.cookie-cat-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-white);
  background: var(--color-black);
  border-radius: 20px;
  padding: 5px 12px;
}

.cookie-toggle {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 50px;
  height: 30px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cookie-toggle input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}
.cookie-toggle-track {
  position: absolute;
  inset: 0;
  background: #E4E4E7;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
  transition: background-color 0.25s ease, box-shadow 0.15s ease;
}
.cookie-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  background: var(--color-white);
  border-radius: 50%;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.14);
  transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1), width 0.15s ease;
}
.cookie-toggle:hover .cookie-toggle-track { background: #d4d4d8; }
.cookie-toggle input:checked + .cookie-toggle-track { background: var(--color-red); }
.cookie-toggle:hover input:checked + .cookie-toggle-track { background: #7a0925; }
.cookie-toggle input:checked + .cookie-toggle-track .cookie-toggle-thumb { transform: translateX(20px); }
.cookie-toggle input:active + .cookie-toggle-track .cookie-toggle-thumb { width: 30px; }
.cookie-toggle input:checked:active + .cookie-toggle-track .cookie-toggle-thumb { transform: translateX(14px); }
.cookie-toggle input:focus-visible + .cookie-toggle-track { box-shadow: 0 0 0 3px rgba(145, 10, 45, 0.35); }
@media (prefers-reduced-motion: reduce) {
  .cookie-toggle-track, .cookie-toggle-thumb { transition: none; }
}

@media (max-width: 640px) {
  .cookie-modal { padding: 32px 22px; max-height: 92vh; }
  .cookie-view h2 { padding-right: 0; font-size: 19px; }
  .cookie-skip { float: none; display: block; margin: 0 0 16px; }
  .cookie-modal-actions .btn { min-width: 100%; }
}

/* ==========================================================================
   /tyc/ — Términos y Condiciones de Promociones (mirrors the corporate
   site's .policy-* + .post-body typography; accent re-skinned to Mazda red)
   ========================================================================== */
.hub-title { font-size: clamp(22px, 3vw, 30px); }

/* ==========================================================================
   Blog / Noticias — .blog-card-category below is the only addition here;
   everything else lives with the original .blog-card rules further up
   this file (mirrors the corporate site's .blog-card + .post-* +
   .sidebar-*, accent re-skinned to Mazda red). No brand switcher on the
   post sidebar — see build.py's post_sidebar_html, this site only ever
   shows its own Mazda locations.
   ========================================================================== */
.blog-card-category {
  position: absolute; top: 12px; left: 12px;
  background: var(--color-white);
  color: var(--color-red);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 2px;
}

/* Single post */
.post-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 24px; }

.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.post-main { min-width: 0; }

.post-hero { aspect-ratio: 16/9; overflow: hidden; border-radius: 8px; background: var(--color-gray-100); margin-bottom: 32px; }
.post-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-meta {
  display: flex; align-items: center; gap: 14px;
  font-size: 13px; color: var(--color-gray-500);
  margin-bottom: 16px;
}
.post-meta .post-category {
  color: var(--color-red);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
}
.post-body video { max-width: 420px; width: 100%; border-radius: 6px; display: block; margin: 0 auto; background: var(--color-gray-100); }
.post-body blockquote {
  border-left: 3px solid var(--color-red);
  padding: 4px 0 4px 24px;
  margin: 32px 0;
  font-size: 19px;
  font-weight: var(--fw-medium);
  color: var(--color-black);
  font-style: italic;
}
.post-body a { color: var(--color-red); text-decoration: underline; }

/* Post sidebar */
.post-sidebar {
  position: sticky;
  top: calc(var(--header-height) + 24px);
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.sidebar-block > h4 {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-black);
}
.sidebar-block-link {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 14px;
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
}
.sidebar-block-link .icon { width: 13px; height: 13px; transition: transform 0.15s ease; }
.sidebar-block-link:hover { color: var(--color-red); }
.sidebar-block-link:hover .icon { transform: translateX(3px); }

.sidebar-sede { padding: 12px 0; border-top: 1px solid var(--color-gray-200); }
.sidebar-sede:first-of-type { border-top: none; padding-top: 0; }
.sidebar-sede-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.sidebar-sede-head strong { font-size: 13px; }
.sidebar-sede .icon-row { display: flex; gap: 8px; flex-shrink: 0; }
.sidebar-sede .icon-row a { color: var(--color-gray-500); }
.sidebar-sede .icon-row a:hover { color: var(--color-red); }
.sidebar-sede .icon-row .icon { width: 15px; height: 15px; }
.sidebar-sede p { font-size: 12.5px; color: #666; margin: 0; }

.sidebar-news-item { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--color-gray-200); }
.sidebar-news-item:first-of-type { border-top: none; padding-top: 0; }
.sidebar-news-item img { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.sidebar-news-date { display: block; font-size: 10.5px; color: var(--color-gray-500); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 3px; }
.sidebar-news-item h4 { font-size: 13.5px; font-weight: var(--fw-medium); margin: 0; line-height: 1.35; color: var(--color-black); }
.sidebar-news-item:hover h4 { color: var(--color-red); }

.sidebar-explore { display: flex; flex-direction: column; gap: 2px; }
.sidebar-explore-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0;
  font-size: 13.5px;
  font-weight: var(--fw-medium);
  color: var(--color-black);
}
.sidebar-explore-link .icon { width: 13px; height: 13px; color: var(--color-gray-500); transition: transform 0.15s ease; flex-shrink: 0; }
.sidebar-explore-link:hover { color: var(--color-red); }
.sidebar-explore-link:hover .icon { transform: translateX(3px); color: var(--color-red); }

@media (max-width: 760px) {
  .post-layout { grid-template-columns: 1fr; gap: 40px; }
  .post-sidebar { position: static; }
}

.post-body { max-width: 760px; margin: 0 auto; }
.post-main .post-body { max-width: none; margin: 0; }
.post-body p { font-size: 16px; line-height: 1.8; color: #333; margin-bottom: 22px; }
.post-body figure { margin: 32px 0; }
.post-body img { width: 100%; border-radius: 6px; display: block; }
.post-body ul { margin: 0 0 22px; padding-left: 22px; list-style: disc; }
.post-body li { margin-bottom: 8px; font-size: 16px; color: #333; }
.post-body strong { font-weight: var(--fw-semibold); }
.post-body h3 { font-size: 20px; margin: 40px 0 14px; padding-top: 24px; border-top: 1px solid var(--color-gray-200); }
.post-body h3:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.post-body table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 14px; }
.post-body td, .post-body th { border: 1px solid var(--color-gray-200); padding: 8px 12px; text-align: left; }

.policy-layout { display: grid; grid-template-columns: 280px 1fr; gap: 48px; align-items: start; }
.policy-tabs { position: sticky; top: calc(var(--header-height) + 24px); display: flex; flex-direction: column; gap: 2px; }
.policy-tab {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: #555;
  border-left: 2px solid var(--color-gray-200);
  border-radius: 0;
}
.policy-tab:hover { color: var(--color-black); background: var(--color-gray-100); }
.policy-tab.is-active { color: var(--color-red); border-left-color: var(--color-red); background: var(--color-gray-100); font-weight: var(--fw-semibold); }
.policy-panel { display: none; }
.policy-panel.is-active { display: block; }
@media (max-width: 900px) {
  .policy-layout { grid-template-columns: 1fr; gap: 24px; }
  .policy-tabs { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .policy-tab { border-left: none; border-bottom: 2px solid var(--color-gray-200); padding: 8px 4px; }
  .policy-tab.is-active { border-left: none; border-bottom-color: var(--color-red); background: none; }
}

/* ==========================================================================
   Sticky side nav — quick-action rail (right) + "Regresar a Colautos" (left).
   Matches the live mazda.colautosdelcafe.com sitewide widget. Desktop only:
   on tablet/mobile it would collide with the bottom nav / thumb reach, so it
   hides below 1024px same as the live site.
   ========================================================================== */
@media (max-width: 1024px) {
  .sticky-nav, .sticky-nav-left { display: none !important; }
}
.sticky-nav {
  position: fixed; top: 50%; right: 0;
  transform: translateY(-50%);
  display: flex; flex-direction: column; z-index: 1950;
}
.sticky-nav .sticky-nav__item {
  background: #101010;
  border-left: 3px solid #000;
  color: #fff !important;
  text-decoration: none;
  margin: 5px 0; padding: 10px 12px;
  display: flex; align-items: center;
  transform: translateX(70%);
  transition: transform 0.3s ease, opacity 0.3s ease;
  border-radius: 40px 0 0 40px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  width: auto;
}
.sticky-nav .sticky-nav__item:hover { transform: translateX(0); background-color: #1c1c1c; }
.sticky-nav .sticky-nav__item.accent { border-left-color: var(--color-red); }
.sticky-nav .sticky-nav__item .cont { margin-right: 10px; flex-shrink: 0; }
.sticky-nav .sticky-nav__item .desc { font-size: 14px; white-space: nowrap; opacity: 0; transition: opacity 0.2s ease; }
.sticky-nav .sticky-nav__item:hover .desc { opacity: 1; }

.sticky-nav-left {
  position: fixed; top: 50%; left: 0;
  transform: translateY(-50%);
  display: flex; flex-direction: column; z-index: 1950;
}
.sticky-nav-left .sticky-nav__item {
  background: #101010;
  border-right: 3px solid var(--color-red);
  color: #fff !important;
  text-decoration: none;
  margin: 5px 0; padding: 10px 12px;
  display: flex; align-items: center;
  transform: translateX(-70%);
  transition: transform 0.3s ease, opacity 0.3s ease;
  border-radius: 0 40px 40px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  width: auto;
}
.sticky-nav-left .sticky-nav__item:hover { transform: translateX(0); background-color: #1c1c1c; }
.sticky-nav-left .sticky-nav__item .cont { margin-left: 10px; flex-shrink: 0; order: 2; }
.sticky-nav-left .sticky-nav__item .desc { font-size: 14px; white-space: nowrap; opacity: 0; transition: opacity 0.2s ease; order: 1; }
.sticky-nav-left .sticky-nav__item:hover .desc { opacity: 1; }

.sticky-nav img, .sticky-nav-left img { width: 32px; height: 32px; }