/* ==========================================================================
   Colautos del Cafe — design tokens (extraídos del kit de Elementor real,
   post-6.css, no de los valores por defecto de Elementor)
   ========================================================================== */
:root {
  --color-red: #910A2D;       /* rojo Mazda — solo para diferenciar "Sedes Mazda" de "Sedes Geely" */
  --color-black: #101010;     /* texto base, fondo de botones */
  --color-blue: #2C5F9E;       /* acento principal del sitio — hover de links, botones */
  --color-orange: #F28C38;
  --color-green: #4A7C59;
  --color-white: #FFFFFF;
  --color-gray-100: #F5F5F5;
  --color-gray-200: #E7E7E7;
  --color-gray-300: #D5D5D5;
  --color-gray-500: #999999;
  --color-text: #101010;

  --font-base: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --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));
}

/* ---- 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-blue); }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 16px;
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  color: var(--color-black);
}
h1 { font-size: clamp(28px, 4.5vw, 48px); }
h2 { font-size: clamp(24px, 3.5vw, 36px); }
h3 { font-size: 22px; }
/* Smaller than a regular h1: used for hub pages (/politicas/, /tyc/) whose
   title sits right above a dense tab layout, not a hero. */
.hub-title { font-size: clamp(22px, 3vw, 30px); }
p { margin: 0 0 16px; color: #4a4a4a; }

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

.btn {
  display: inline-block;
  padding: 14px 32px;
  background: var(--color-black);
  color: var(--color-white);
  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:hover { background: var(--color-blue); color: var(--color-white); }
.btn-outline {
  background: transparent;
  color: var(--color-black);
  border: 1px solid var(--color-black);
}
/* background: transparent is NOT redundant with .btn-outline's own base
   rule above — every place this renders is class="btn btn-outline"
   together, so .btn:hover's background:blue (equal specificity, earlier in
   source) would otherwise win by cascade order and paint this the same
   blue as the now-blue hover text, making the label invisible. */
.btn-outline:hover { background: transparent; border-color: var(--color-blue); color: var(--color-blue); }

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%; }
.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-blue);
  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
   ========================================================================== */
.topbar {
  background: var(--color-white);
  color: var(--color-black);
  font-size: 13px;
  border-bottom: 1px solid var(--color-gray-200);
}
.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-black); display: flex; align-items: center; }
.topbar-social a:hover { color: var(--color-blue); }
/* height-only (width:auto) so each icon scales by its own aspect ratio
   instead of being forced into an identical square box — the .icon
   default of width:20px + height:20px was letterboxing non-square glyphs
   (YouTube's wide mark, in particular) and making them read smaller. */
.topbar-social .icon { height: 16px; width: auto; }
.topbar-location {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-black);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  justify-self: center;
}
.topbar-legal { justify-self: end; display: flex; align-items: center; gap: 28px; }
.topbar-legal a { color: var(--color-black); font-weight: var(--fw-medium); letter-spacing: 0.05em; }
.topbar-legal a:hover { color: var(--color-blue); }
@media (max-width: 900px) {
  .topbar-location { display: none; }
  .topbar-grid { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  border-bottom: 1px solid var(--color-gray-200);
  position: sticky;
  top: 0;
  background: var(--color-white);
  z-index: 500;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}
.site-logo img { height: 32px; width: auto; }
.main-nav { display: flex; gap: 28px; align-items: center; }
.main-nav > a {
  font-size: 14px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.nav-item-dropdown { position: relative; }
.nav-item-dropdown > a {
  font-size: 14px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  min-width: 140px;
  /* Explicit shrink-to-fit instead of relying on the browser's default auto
     width for an absolutely-positioned box: with the flex brand row inside,
     auto sizing was stopping short after the first image, leaving the
     second one hanging outside the white background/border entirely
     (its transparent PNG corners showing the page behind it instead). */
  width: max-content;
  padding: 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: block;
  padding: 8px 18px;
  font-size: 13px;
  text-transform: uppercase;
}
/* Desktop only: brand thumbnails side by side instead of the plain-text
   links. Mobile keeps the text list (.nav-dropdown-text) — a two-up image
   row reads too cramped/small to tap reliably at phone widths.
   ".nav-dropdown a.nav-dropdown-text" (not just ".nav-dropdown-text") on
   purpose: needs to out-specify ".nav-dropdown a"'s display:block above. */
.nav-dropdown a.nav-dropdown-text { display: none; }
.nav-dropdown-brands { display: flex; gap: 10px; padding: 10px; }
/* flex-shrink:0 matters: without it, the global img{max-width:100%} reset
   fights the flex algorithm's auto basis and squishes these down to a
   sliver instead of the intended 110px square. */
.nav-dropdown-brands a {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
}
.nav-dropdown-brands img { width: 158px; height: 158px; display: block; transition: transform 0.15s ease; }
.nav-dropdown-brands a:hover img { transform: scale(1.04); }
.nav-dropdown-brands a span {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-black);
}
.nav-dropdown-brands a:hover span { color: var(--color-blue); }
@media (max-width: 900px) {
  /* Mobile: no toggle, no collapse — Mazda/Geely render already expanded
     under "Nuestras Marcas" the moment the menu opens (the previous
     tap-to-expand chevron was one extra tap the site owner didn't want;
     the submenu used to only open on :hover, which doesn't exist on
     touch at all, so it was unreachable — this is simpler AND fixes that). */
  .nav-dropdown a.nav-dropdown-text { display: block; }
  .nav-dropdown-brands { display: none; }
  .nav-dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: none; box-shadow: none; width: auto;
    padding: 4px 0 8px 12px;
  }
  .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-black);
  margin: 5px 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
/* 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;
  /* Fixed positioning is viewport-relative, but the visible header is
     topbar + header stacked (topbar isn't sticky, so at rest it sits
     above the header) — offsetting by --header-height alone left a
     ~42px gap of raw page content between the header and the menu. */
  top: var(--nav-offset);
  background: rgba(16,16,16,0.4);
  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-white);
    flex-direction: column;
    align-items: stretch;
    padding: 8px 24px 24px;
    gap: 4px;
    border-bottom: 1px solid var(--color-gray-200);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 16px 32px rgba(0,0,0,0.12);
    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: 14px 0;
    font-size: 15px;
    border-bottom: 1px solid var(--color-gray-100);
  }
  .nav-item-dropdown { width: 100%; border-bottom: 1px solid var(--color-gray-100); }
  .main-nav.is-open { transform: translateY(0); }
  .nav-toggle { display: block; }
  .topbar-location { display: none; }
}

/* ==========================================================================
   Hero / carousel
   ========================================================================== */
.hero-carousel {
  position: relative;
  overflow: hidden;
  background: var(--color-gray-100);
  padding: 0;
  margin: 0;
  aspect-ratio: 1920 / 900;
}
/* Single-banner pages (marcas, posventa, seguros, noticias, test-drive,
   contacto, trabaja-con-colautos) use this instead of the aspect-ratio
   above: no forced height at all. A fixed pixel height (or a shared
   aspect-ratio) crops a different slice of each banner depending on how
   wide the viewport is, and since these banners aren't all the same
   native proportions, a forced crop looked cropped/inconsistent from
   page to page. Letting height:auto follow each image's own intrinsic
   ratio means the full banner is always visible, on every page, at
   every width — the only thing that can vary is the resulting height. */
.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 picture { display: block; }
.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; }
/* left-anchored, not center: every hero banner in this design system puts
   its title/CTA on the left third and photography on the right, so a
   symmetric center-crop on a container narrower than the banner's native
   ratio clips the title first — anchoring left keeps it in frame. */
.hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: left center; 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; } }

/* ==========================================================================
   Timeline (Quién es Colautos)
   ========================================================================== */
.timeline-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 32px;
  padding: 28px 0;
  border-top: 1px solid var(--color-gray-200);
  align-items: start;
}
.timeline-row:first-of-type { border-top: none; }
.timeline-year {
  font-size: 32px;
  font-weight: var(--fw-semibold);
  color: var(--color-blue);
}
@media (max-width: 600px) {
  .timeline-row { grid-template-columns: 1fr; gap: 8px; }
}

/* Scroll-triggered fade up (assets/js/scroll-reveal.js toggles .is-visible
   per element via IntersectionObserver, the first time each one scrolls
   into view) — mirrors the live site's per-item Elementor fadeInUp. */
.fade-up { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-up.is-visible { opacity: 1; transform: translateY(0); }
.historia-video { display: block; width: 100%; margin-top: 24px; border-radius: 6px; background: var(--color-black); }

/* ==========================================================================
   Actualidad
   ========================================================================== */
.actualidad-section { background: var(--color-gray-100); }
.actualidad-grid { display: grid; grid-template-columns: 2fr 3fr; gap: 56px; align-items: center; }
.actualidad-map { width: 100%; display: block; }
@media (max-width: 900px) {
  .actualidad-grid { grid-template-columns: 1fr; gap: 32px; }
  .actualidad-map { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   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; }
}

/* Home's Manizales/Pereira/Armenia photo row — stays 3-across even on
   phones (just smaller + tighter gap), unlike the generic .grid-3 above
   which collapses to 1 column at narrow widths. */
.sedes-photo-row { grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 600px) {
  .sedes-photo-row { gap: 8px; }
}

.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%; display: block; }
.banner-row { display: flex; }
.banner-row .banner-link { flex: 1 1 0; }
@media (max-width: 700px) {
  /* Side by side these are ~1920x900 banners squeezed into a phone-width
     column each — under 100px tall, text illegible. Stack full-width
     instead; the no-gap edge-to-edge layout is a desktop-width request. */
  .banner-row { flex-direction: column; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--color-white);
  color: var(--color-text);
  margin-top: 72px; /* breathing room no matter what precedes the footer (image banner, form, text...) */
  /* 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 var(--color-gray-200);
}
@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 var(--color-gray-200);
  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;
  color: var(--color-black);
  margin-bottom: 20px;
}

.location-card { font-size: 14px; }
.location-card strong { display: block; margin: 0 0 10px; font-size: 15px; }
.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 var(--color-gray-300);
  color: var(--color-black);
}
.location-card .icon-row a:hover { border-color: var(--color-blue); color: var(--color-blue); }
.location-card p { font-size: 13px; }
.location-card a { color: var(--color-black); }
.location-card p a { text-decoration: underline; text-decoration-color: var(--color-gray-300); }
.location-card p a:hover { color: var(--color-blue); }

/* One standard schedule for every location (Mazda + Geely alike) instead
   of per-card hours — shown once, clearly labeled as company-wide, right
   under both sedes-groups. */
.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-black); margin-bottom: 4px; }
.sedes-schedule strong { display: block; font-size: 14px; margin-bottom: 4px; }
.sedes-schedule p { font-size: 13px; color: #555; margin: 0; }
@media (max-width: 700px) {
  .sedes-schedule { grid-template-columns: 1fr; gap: 16px; }
}

.footer-main {
  border-top: 1px solid var(--color-gray-200);
  padding-top: 40px;
  padding-bottom: 40px;
}
.footer-main h5 {
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer-main ul li { margin-bottom: 10px; font-size: 14px; }
.footer-main ul li a { color: #4a4a4a; font-weight: var(--fw-regular); }
.footer-main ul li a:hover { color: var(--color-blue); }

.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-black); font-weight: var(--fw-regular);
}
.footer-social a .icon { width: 15px; height: 15px; flex-shrink: 0; }
.footer-social a:hover { color: var(--color-blue); }

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

.footer-contact-list { font-size: 13px; color: #4a4a4a; margin: 0; }
.footer-contact-list dt { font-weight: var(--fw-semibold); color: var(--color-black); 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: #4a4a4a; word-break: break-word; }
.footer-contact-list a:hover { color: var(--color-blue); }

.footer-bottom {
  border-top: 1px solid var(--color-gray-200);
  padding-top: 24px;
  padding-bottom: 24px;
  font-size: 13px;
  color: var(--color-gray-500);
}
.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  text-align: center;
}
.footer-disclaimer {
  border-top: 1px solid var(--color-gray-200);
  padding-top: 24px;
  padding-bottom: 24px;
  font-size: 12px;
  color: var(--color-gray-500);
}
.footer-disclaimer p { font-size: 12px; color: var(--color-gray-500); margin-bottom: 10px; }
.footer-credit { text-align: center; padding-top: 16px; padding-bottom: 16px; font-size: 12px; color: var(--color-gray-500); }

@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; }
}

/* ==========================================================================
   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; }

/* Insurance / service category cards */
.category-card { text-align: center; padding: 32px 20px; }
.category-card img { width: 72px; height: 72px; object-fit: contain; margin: 0 auto 16px; }
.category-card h3 { font-size: 17px; margin-bottom: 8px; }
.category-card p { font-size: 14px; }

/* "Conoce nuestros seguros" swaps layout by viewport: the card grid above
   reads better on a narrow phone screen, the icon row + hover-tooltip
   widget below needs desktop pointer/hover to be usable. Breakpoint
   matches .main-nav's own mobile/desktop split (900px) so both switch at
   the same point instead of drifting apart. */
.seg-mobile-only { display: block; }
.seg-desktop-only { display: none; }
@media (min-width: 901px) {
  .seg-mobile-only { display: none; }
  .seg-desktop-only { display: block; }
}

/* Seguros icon row (desktop) — zigzag row of icons that reveal a
   description cloud on hover/focus. */
.seg-icons-root {
  --seg-icon-size: 70px;
  --seg-zigzag: 10px;
  --seg-fg: #111;
  --seg-muted: #333;
  --seg-cloud: #ffffff;
  --seg-cloud-ring: rgba(0, 0, 0, 0.14);
  position: relative;
  isolation: isolate;
}
.seg-icons-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  width: 100%;
  padding: 8px 0 10px;
}
.seg-icons-chip {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
  border: none;
  background: transparent;
  cursor: default;
  transition: transform 0.25s ease;
}
.seg-icons-row .seg-icons-chip:nth-child(odd) { transform: translateY(calc(-1 * var(--seg-zigzag))); }
.seg-icons-row .seg-icons-chip:nth-child(even) { transform: translateY(var(--seg-zigzag)); }
.seg-icons-chip:focus { outline: none; }
.seg-icons-chip:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 3px; border-radius: 12px; }
.seg-icons-chip img { display: block; width: var(--seg-icon-size); height: var(--seg-icon-size); object-fit: contain; pointer-events: none; transition: transform 0.28s cubic-bezier(0.34, 1.2, 0.64, 1); }
.seg-icons-chip:hover img, .seg-icons-chip:focus-visible img { transform: scale(1.08); }

.seg-icons-pop {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: calc(100% + 12px);
  width: max-content;
  max-width: min(360px, 88vw);
  min-width: min(280px, 88vw);
  text-align: justify;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-8px) scale(0.97);
  transform-origin: 50% 0%;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.26s cubic-bezier(0.34, 1.15, 0.64, 1);
}
.seg-icons-pop__inner {
  display: block;
  padding: 18px 20px 20px;
  background-image: linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%);
  border: 1px solid var(--seg-cloud-ring);
  border-radius: 22px 24px 26px 22px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.seg-icons-pop__title {
  display: block;
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  color: var(--seg-fg);
}
.seg-icons-pop__desc {
  display: block;
  font-size: 15px;
  line-height: 1.5;
  color: var(--seg-muted);
}
.seg-icons-chip:hover, .seg-icons-chip:focus-visible { z-index: 2; }
.seg-icons-chip:hover .seg-icons-pop, .seg-icons-chip:focus-visible .seg-icons-pop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* ==========================================================================
   Brand cards (Marcas)
   ========================================================================== */
.brand-card { display: block; }
.brand-card img { width: 100%; max-width: 285px; height: auto; margin: 0 auto; display: block; transition: transform 0.2s ease; }
.brand-card:hover img { transform: scale(1.015); }
/* Marcas intro row: text 50%, Mazda 25%, Geely 25%, all in one row so both
   brand links are reachable without scrolling past the copy. Smaller image
   cap than the default .brand-card so a 25%-wide column doesn't force the
   row taller than the text block next to it. */
.marcas-intro-grid { grid-template-columns: 2fr 1fr 1fr; align-items: center; }
.marcas-intro-grid .brand-card img { max-width: 220px; }
@media (max-width: 900px) {
  .marcas-intro-grid { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .marcas-intro-grid > :first-child { grid-column: 1 / -1; }
}
/* Overrides the generic .grid-2 -> 1-column rule at 600px: Mazda/Geely stay
   side by side even on phones (smaller images, but easier to compare/scan
   than a long single-column stack). */
@media (max-width: 600px) {
  .brand-grid.brand-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ==========================================================================
   Insurer logo marquee (Seguros - Respaldo Experto)
   ========================================================================== */
/* Infinite-feeling scroll: the track holds the logo set twice back-to-back
   and animates exactly -50%, so the moment the first copy scrolls fully out
   of view the second copy is in the identical position — the loop point is
   invisible. mask-image fades both edges so logos entering/leaving don't
   pop in abruptly. Paused on hover so a visitor can actually read a logo. */
.insurer-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.insurer-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 64px;
  animation: insurer-scroll 28s linear infinite;
}
.insurer-marquee:hover .insurer-track { animation-play-state: paused; }
.insurer-logo { flex: 0 0 auto; height: 44px; display: flex; align-items: center; }
.insurer-logo img { height: 100%; width: auto; max-width: 160px; object-fit: contain; display: block; }
@keyframes insurer-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .insurer-track { animation: none; }
}

/* ==========================================================================
   Blog / Noticias
   ========================================================================== */
.blog-card { display: flex; flex-direction: column; height: 100%; }
.blog-card-img { position: relative; overflow: hidden; aspect-ratio: 16/10; }
.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-category {
  position: absolute; top: 12px; left: 12px;
  background: var(--color-white);
  color: var(--color-blue);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 2px;
}
.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: 19px; margin-bottom: 10px; }
.blog-card h3 a { color: var(--color-black); }
.blog-card h3 a:hover { color: var(--color-blue); }
/* 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; }

/* 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-blue);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
}
/* .post-body is shared with /politicas/ (post-body drives its typography
   too), where its own max-width:760px/margin:auto centers the text inside
   that page's narrower content column. Scope the width reset to blog posts
   only so the policies layout is untouched. */
.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 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-blue);
  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 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 sidebar */
.post-sidebar {
  position: sticky;
  top: calc(var(--header-height) + 24px);
  display: flex;
  flex-direction: column;
  gap: 32px;
}
/* Direct-child selector on purpose: only the block's own section title
   (e.g. "Últimas noticias") should get the uppercase label treatment.
   A descendant selector here would also catch the <h4> used for each
   article title inside .sidebar-news-item, forcing headline text into
   caps and inheriting this border as a second, spurious divider line. */
.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-blue); }
.sidebar-block-link:hover .icon { transform: translateX(3px); }

/* No card here on purpose — same plain, borderless treatment as
   sidebar-explore below, just a section title + list. */
.sidebar-sedes-switch { display: flex; border: 1px solid var(--color-gray-300); border-radius: 20px; padding: 3px; margin-bottom: 20px; width: fit-content; }
.sidebar-sedes-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 16px;
  padding: 7px 18px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.sidebar-sedes-tab.is-active { background: var(--color-black); }
.sidebar-sedes-tab img { height: 15px; width: auto; display: block; }
.sidebar-sedes-tab .tab-logo-white { display: none; }
.sidebar-sedes-tab.is-active .tab-logo-dark { display: none; }
.sidebar-sedes-tab.is-active .tab-logo-white { display: block; }
.sidebar-sedes-panel { display: none; }
.sidebar-sedes-panel.is-active { display: block; }
.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-blue); }
.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-blue); }

/* Deliberately no card border here (unlike sidebar-sedes/-news above) —
   this is a plain link list, not another boxed widget. */
.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-blue); }
.sidebar-explore-link:hover .icon { transform: translateX(3px); color: var(--color-blue); }

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

/* Policies tabs (/politicas/) */
.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-blue); border-left-color: var(--color-blue); 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-blue); background: none; }
}
.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 h4 { font-size: 15px; margin: 24px 0 10px; text-transform: uppercase; letter-spacing: 0.03em; color: #444; }
.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; }
.post-body ul li a { font-weight: var(--fw-regular); color: var(--color-black); }
.post-body ul li a:hover { color: var(--color-blue); }

/* ==========================================================================
   Cookie consent — full-screen preference modal
   ========================================================================== */
.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);
  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-blue); }

.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-blue); }

.cookie-view h2 {
  font-size: 22px;
  margin: 0 0 16px;
  padding-right: 140px;
}
.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-blue); 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; }
.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-blue);
  font-size: 12px !important;
  color: #4a4a4a;
}
.cookie-cat-note a { color: var(--color-blue); 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-black); }
.cookie-toggle:hover input:checked + .cookie-toggle-track { background: #2b2b2b; }
.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(44, 95, 158, 0.35); }
@media (prefers-reduced-motion: reduce) {
  .cookie-toggle-track, .cookie-toggle-thumb { transition: none; }
}

.footer-cookie-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-family: inherit;
  color: var(--color-gray-500);
  text-decoration: underline;
  cursor: pointer;
}
.footer-cookie-link:hover { color: var(--color-blue); }

@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%; }
}

/* ==========================================================================
   WhatsApp float button
   ========================================================================== */
/* Official WhatsApp logo (upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg,
   2026-07-29 — the real brand mark, not a hand-drawn stand-in) — it
   already carries its own green circle + shadow, so the button itself no
   longer needs a background circle behind it. */
.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1900;
  transition: transform 0.15s ease;
}
.whatsapp-float:hover { transform: scale(1.06); }
.whatsapp-float img { width: 100%; height: 100%; display: block; }