/**
 * Auto Dealer - Sistema de Diseño
 * ================================
 * Tema claro, profesional, automotriz/B2B
 * Mobile-first, accesible, performant
 */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/inter-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{font-family:"Inter Fallback";src:local("Arial");size-adjust:107.4%;ascent-override:90.2%;descent-override:22.48%;line-gap-override:0%}

/* ==========================================================================
   VARIABLES CSS
   ========================================================================== */

:root {
  /* Colores principales */
  --color-primary: #C8102E;
  --color-primary-dark: #A00D24;
  --color-primary-light: #E8384F;
  --color-primary-subtle: rgba(200, 16, 46, 0.08);
  
  /* Fondos - tema claro */
  --color-bg: #FFFFFF;
  --color-bg-warm: #FAFAF8;
  --color-bg-subtle: #F5F5F3;
  --color-bg-muted: #EEEEEC;
  --color-bg-dark: #1A1A1A;
  --color-bg-dark-elevated: #242424;
  
  /* Texto */
  --color-text: #1A1A1A;
  --color-text-secondary: #4A4A4A;
  --color-text-muted: #6B6B6B;
  --color-text-light: #8A8A8A;
  --color-text-on-dark: #FFFFFF;
  --color-text-on-dark-muted: rgba(255, 255, 255, 0.7);
  
  /* Bordes y líneas */
  --color-border: #E5E5E3;
  --color-border-light: #F0F0EE;
  --color-border-dark: rgba(255, 255, 255, 0.12);
  
  /* Estados */
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  
  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
  --shadow-primary: 0 4px 14px rgba(200, 16, 46, 0.25);
  --shadow-primary-lg: 0 8px 25px rgba(200, 16, 46, 0.3);
  
  /* Tipografía */
  --font-sans: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  
  /* Espaciado */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  
  /* Bordes redondeados */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  
  /* Transiciones */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  
  /* Layout */
  --nav-height: 72px;
  --container-max: 1200px;
  --container-narrow: 800px;
}

/* ==========================================================================
   RESET Y BASE
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Font Awesome carga asíncrono: el ancho reservado evita que el texto salte cuando llega */
.fa-solid,.fa-regular,.fa-brands,.fas,.far,.fab{display:inline-block;width:1.25em;text-align:center}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--space-xl);
  }
}

.container--narrow {
  max-width: var(--container-narrow);
}

/* Secciones */
.section {
  padding-block: var(--space-3xl);
}

.section--sm {
  padding-block: var(--space-2xl);
}

.section--lg {
  padding-block: var(--space-4xl);
}

.section--dark {
  background-color: var(--color-bg-dark);
  color: var(--color-text-on-dark);
}

.section--primary {
  background-color: var(--color-primary);
  color: white;
}

.section--primary .lead {
  color: rgba(255, 255, 255, 0.9);
}

.section--primary .stat__value span {
  color: white;
}

.section--primary .stat__label {
  color: rgba(255, 255, 255, 0.9);
}

/* Sobre fondo rojo: cifras y etiquetas en blanco (antes rojo sobre rojo) */
.section--primary .stat__value {
  color: white;
}

.section--primary .eyebrow {
  color: rgba(255, 255, 255, 0.85);
}

.section--subtle {
  background-color: var(--color-bg-subtle);
}

.section--warm {
  background-color: var(--color-bg-warm);
}

/* ==========================================================================
   NAVEGACIÓN
   ========================================================================== */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-height);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}

.nav.scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--shadow-md);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: var(--space-md);
}

.nav__logo {
  flex-shrink: 0;
}

.nav__logo img {
  height: 36px;
  width: auto;
  filter: drop-shadow(0 0 0.5px rgba(0,0,0,0.15));
}

@media (min-width: 768px) {
  .nav__logo img {
    height: 42px;
  }
}

.nav__links {
  display: none;
  align-items: center;
  gap: var(--space-lg);
}

@media (min-width: 992px) {
  .nav__links {
    display: flex;
  }
}

.nav__link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  padding: var(--space-sm) 0;
  position: relative;
  transition: color var(--duration-fast);
}

.nav__link:hover,
.nav__link:focus-visible {
  color: var(--color-text);
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-normal) var(--ease-out);
}

.nav__link:hover::after,
.nav__link:focus-visible::after {
  transform: scaleX(1);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.nav__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  padding: 8px;
}

@media (min-width: 992px) {
  .nav__toggle {
    display: none;
  }
}

.nav__toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-text);
  border-radius: 1px;
  transition: transform var(--duration-normal) var(--ease-out),
              opacity var(--duration-fast);
}

.nav--open .nav__toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav--open .nav__toggle span:nth-child(2) {
  opacity: 0;
}

.nav--open .nav__toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Menú móvil */
.nav__mobile {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg);
  padding: var(--space-xl);
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--duration-slow) var(--ease-out),
              opacity var(--duration-normal),
              visibility var(--duration-normal);
  overflow-y: auto;
}

.nav--open .nav__mobile {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

.nav__mobile-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.nav__mobile-link {
  font-size: 1.125rem;
  font-weight: 500;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  transition: background var(--duration-fast);
}

.nav__mobile-link:hover {
  background: var(--color-bg-subtle);
}

/* ==========================================================================
   BOTONES
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  transition: all var(--duration-normal) var(--ease-out);
  white-space: nowrap;
}

.btn--sm {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
}

.btn--lg {
  padding: 1rem 2rem;
  font-size: 1rem;
}

.btn--primary {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-primary);
}

.btn--primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  box-shadow: var(--shadow-primary-lg);
  transform: translateY(-2px);
}

.btn--secondary {
  background: var(--color-bg-dark);
  color: white;
  border-color: var(--color-bg-dark);
}

.btn--secondary:hover {
  background: var(--color-bg-dark-elevated);
  transform: translateY(-2px);
}

.btn--outline {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn--outline:hover {
  border-color: var(--color-text);
  background: var(--color-bg-subtle);
}

.btn--outline-light {
  background: transparent;
  color: var(--color-text-on-dark);
  border-color: rgba(255, 255, 255, 0.3);
}

.btn--outline-light:hover {
  border-color: white;
  background: rgba(255, 255, 255, 0.1);
}

.btn--ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
  padding-inline: var(--space-md);
}

.btn--ghost:hover {
  color: var(--color-text);
  background: var(--color-bg-subtle);
}

/* Verde WhatsApp oscurecido: texto blanco a 4.9:1 (antes #25D366, 2:1) */
.btn--whatsapp {
  background: #11823F;
  color: white;
  border-color: #11823F;
}

.btn--whatsapp:hover {
  background: #0E6E35;
  border-color: #0E6E35;
  transform: translateY(-2px);
}

.btn svg,
.btn i {
  flex-shrink: 0;
}

/* ==========================================================================
   TIPOGRAFÍA
   ========================================================================== */

.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.text-5xl { font-size: 3rem; }

.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }

.text-muted { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
.text-primary { color: var(--color-primary); }

.heading-display {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.heading {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.lead {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

@media (min-width: 768px) {
  .lead {
    font-size: 1.25rem;
  }
}

/* ==========================================================================
   CARDS
   ========================================================================== */

.card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: var(--space-xl);
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-border-light);
}

.card--elevated {
  box-shadow: var(--shadow-md);
  border: none;
}

.card--clickable {
  cursor: pointer;
}

.card--clickable:hover {
  border-color: var(--color-primary);
}

.card--dark {
  background: var(--color-bg-dark);
  border-color: var(--color-border-dark);
  color: var(--color-text-on-dark);
}

.card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  font-size: 1.25rem;
}

.card__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.card__text {
  color: var(--color-text-secondary);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.card--with-image {
  padding: 0;
  overflow: hidden;
}

.card__image-wrap {
  aspect-ratio: 4/3;
  overflow: hidden;
}

.card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.card--with-image:hover .card__image {
  transform: scale(1.05);
}

.card__body {
  padding: var(--space-xl);
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-height);
  overflow: hidden;
}

.hero--light {
  background: linear-gradient(180deg, var(--color-bg-warm) 0%, var(--color-bg) 100%);
}

.hero--dark {
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg video,
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, 
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.75) 50%,
    rgba(255, 255, 255, 0.9) 100%
  );
}

.hero__overlay--video {
  background: linear-gradient(180deg, 
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0.55) 40%,
    rgba(255, 255, 255, 0.75) 100%
  );
}

.hero--dark .hero__overlay {
  background: linear-gradient(180deg, 
    rgba(26, 26, 26, 0.7) 0%,
    rgba(26, 26, 26, 0.8) 100%
  );
}

.hero__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#heroPoster {
  transition: opacity 0.3s ease;
}

.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-md);
}

.hero__subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--color-text-secondary);
  max-width: 600px;
  margin-bottom: var(--space-xl);
  line-height: 1.6;
}

.hero--dark .hero__subtitle {
  color: var(--color-text-on-dark-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

/* ==========================================================================
   AUDIENCE SELECTOR (Home)
   ========================================================================== */

.audience-grid {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 640px) {
  .audience-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .audience-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.audience-card {
  position: relative;
  padding: var(--space-2xl) var(--space-xl);
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xl);
  text-align: center;
  transition: all var(--duration-normal) var(--ease-out);
  cursor: pointer;
  overflow: hidden;
}

.audience-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-normal) var(--ease-out);
}

.audience-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}

.audience-card:hover::before {
  transform: scaleX(1);
}

.audience-card__icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  border-radius: var(--radius-lg);
  margin: 0 auto var(--space-lg);
  font-size: 1.75rem;
  transition: transform var(--duration-normal) var(--ease-out),
              background var(--duration-normal);
}

.audience-card:hover .audience-card__icon {
  background: var(--color-primary);
  color: white;
  transform: scale(1.1);
}

.audience-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.audience-card__text {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-lg);
}

.audience-card__arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  transition: gap var(--duration-normal) var(--ease-out);
}

.audience-card:hover .audience-card__arrow {
  gap: var(--space-sm);
}

/* ==========================================================================
   STATS
   ========================================================================== */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
  }
}

.stat {
  text-align: center;
  padding: var(--space-lg);
}

.stat__value {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1;
  color: var(--color-primary);
}

.stat__value span {
  color: var(--color-text);
}

.section--dark .stat__value span {
  color: var(--color-text-on-dark);
}

.stat__label {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
}

.section--dark .stat__label {
  color: var(--color-text-on-dark-muted);
}

/* Franja de cifras discreta (inicio, público particular) */
.stats-compact.section { padding-block: var(--space-xl); }
.stats-compact .stats-grid { gap: var(--space-sm); max-width: 860px; margin: 0 auto; }
.stats-compact .stat { padding: var(--space-sm); }
.stats-compact .stat__value { font-size: clamp(1.25rem, 2.2vw, 1.625rem); font-weight: 700; }
.stats-compact .stat__label { font-size: 0.75rem; margin-top: 0.25rem; }
.stats-compact__note { margin-top: var(--space-md); }

/* Contador animado - visible by default, animated only as progressive enhancement */
.stat__value[data-count] {
  opacity: 1;
  transform: translateY(0);
}

.js-reveal-enabled .stat__value[data-count] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--duration-slow), transform var(--duration-slow);
}

.js-reveal-enabled .stat__value[data-count].is-visible,
.stat__value[data-count].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   FEATURES GRID
   ========================================================================== */

.features-grid {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.feature {
  display: flex;
  gap: var(--space-md);
}

.feature__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  border-radius: var(--radius-md);
}

.feature__content h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.feature__content p {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

.feature--link {
  min-height: 44px;
  padding: var(--space-sm);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--duration-fast), border-color var(--duration-fast);
}

.feature--link:hover {
  background: var(--color-bg-subtle);
  border-color: var(--color-border);
  color: inherit;
}

.feature--link:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.feature__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
}

.feature__cta i {
  transition: transform var(--duration-fast);
}

.feature--link:hover .feature__cta i.fa-arrow-right,
.feature--link:focus-visible .feature__cta i.fa-arrow-right {
  transform: translateX(3px);
}

/* Services Gallery */
.services-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .services-gallery__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.services-gallery__item {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 3/4;
}

.services-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.services-gallery__item:hover img {
  transform: scale(1.05);
}

a.services-gallery__item {
  display: block;
  cursor: pointer;
  touch-action: manipulation;
}

a.services-gallery__item:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

a.services-gallery__item:focus-visible img {
  transform: scale(1.05);
}

.services-gallery__item figcaption,
.services-gallery__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-sm) var(--space-md);
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
  color: white;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
}

/* ==========================================================================
   SOCIAL PROOF - CLIENT LOGOS
   ========================================================================== */

.logos-wrapper {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.logos-track {
  display: flex;
  gap: var(--space-lg);
  width: max-content;
}

@media (prefers-reduced-motion: no-preference) {
  .logos-track {
    animation: scroll-logos 30s linear infinite;
  }
}

@keyframes scroll-logos {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - var(--space-lg) / 2)); }
}

.logos-track:hover {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .logos-track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
  }
}

.logo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  height: 70px;
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.logo-item img {
  max-height: 45px;
  max-width: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter var(--duration-normal), opacity var(--duration-normal);
}

.logo-item:hover img {
  filter: grayscale(0);
  opacity: 1;
}

/* ==========================================================================
   COOKIE CONSENT BANNER
   ========================================================================== */

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
  padding: var(--space-md);
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--duration-slow) var(--ease-out),
              opacity var(--duration-normal),
              visibility var(--duration-normal);
}

@media (min-width: 768px) {
  .cookie-banner {
    padding: var(--space-lg);
  }
}

.cookie-banner.show {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.cookie-banner__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: center;
  text-align: center;
}

@media (min-width: 768px) {
  .cookie-banner__inner {
    flex-direction: row;
    gap: var(--space-md);
    text-align: left;
  }
}

.cookie-banner__text {
  flex: 1;
  font-size: 0.8125rem;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .cookie-banner__text {
    font-size: 0.9375rem;
    line-height: 1.5;
  }
}

.cookie-banner__text a {
  color: var(--color-primary-light);
  text-decoration: underline;
}

.cookie-banner__actions {
  display: flex;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.cookie-banner__actions .btn--ghost {
  border-color: rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.9);
}

.cookie-banner__actions .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   WHATSAPP FLOATING BUTTON
   ========================================================================== */

.whatsapp-float {
  position: fixed;
  bottom: var(--space-xl);
  right: var(--space-xl);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: #11823F;
  color: white;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 20px rgba(17, 130, 63, 0.4);
  font-size: 1.75rem;
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal);
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(17, 130, 63, 0.5);
}

/* ==========================================================================
   SCROLL REVEAL ANIMATIONS
   ========================================================================== */

/* Reveal animations - ALWAYS visible, subtle enhancement only
   Content must be readable with JS disabled and during slow scrolling.
   Never use opacity below 0.85 to ensure WCAG AA compliance. */
.reveal {
  opacity: 1;
  transform: none;
}

/* Subtle reveal: only transform + mild opacity (0.85 to 1), never invisible */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal-enabled .reveal:not(.is-visible) {
    opacity: 0.85;
    transform: translateY(12px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  }
  
  .js-reveal-enabled .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  .js-reveal-enabled .reveal--delay-1 { transition-delay: 50ms; }
  .js-reveal-enabled .reveal--delay-2 { transition-delay: 100ms; }
  .js-reveal-enabled .reveal--delay-3 { transition-delay: 150ms; }
  .js-reveal-enabled .reveal--delay-4 { transition-delay: 200ms; }
}

/* Fallback: ensure full visibility */
.js-reveal-fallback .reveal,
.js-reveal-fallback .reveal:not(.is-visible) {
  opacity: 1 !important;
  transform: none !important;
}

.js-reveal-fallback .stat__value[data-count] {
  opacity: 1 !important;
  transform: none !important;
}

/* Reduced motion: no animations */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal:not(.is-visible) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   FORMS
   ========================================================================== */

.form-group {
  margin-bottom: var(--space-md);
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: var(--space-xs);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-subtle);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

/* Dark form inputs */
.section--dark .form-input,
.section--dark .form-select,
.section--dark .form-textarea {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: white;
}

.section--dark .form-input::placeholder,
.section--dark .form-textarea::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mx-auto { margin-inline: auto; }
.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }

.max-w-prose { max-width: 65ch; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }

.grid { display: grid; }

/* Scroll margin for anchor links */
[id] {
  scroll-margin-top: calc(var(--nav-height) + var(--space-xl));
}

/* ==========================================================================
   HERO CONTACT (número de teléfono debajo de botones)
   ========================================================================== */

.hero__contact {
  margin-top: var(--space-xl);
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

.hero__contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--duration-fast);
}

.hero__contact a:hover {
  color: var(--color-primary);
}

.hero--dark .hero__contact {
  color: var(--color-text-on-dark-muted);
}

.hero--dark .hero__contact a {
  color: white;
}

.hero--dark .hero__contact a:hover {
  opacity: 0.9;
}

/* Hero split layout for service/city pages */
.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

@media (max-width: 768px) {
  .hero-split {
    grid-template-columns: 1fr;
  }
  
  /* En celular primero el título y los botones (primer pantallazo); la foto va debajo y más baja */
  .hero-split__image {
    margin-top: var(--space-lg);
  }
  .hero-split__image img {
    max-height: 40vh;
    object-fit: cover;
  }
}

.hero--compact {
  min-height: auto;
  padding-block: calc(var(--nav-height) + 2rem) 3rem;
}

/* ==========================================================================
   SOLUTIONS GRID (reemplazo del audience router)
   ========================================================================== */

.solutions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .solutions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.solution-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all var(--duration-normal) var(--ease-out);
}

.solution-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.solution-card__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  border-radius: var(--radius-lg);
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-bottom: var(--space-lg);
  transition: all var(--duration-normal) var(--ease-out);
}

.solution-card:hover .solution-card__icon {
  background: var(--color-primary);
  color: white;
  transform: scale(1.05);
}

.solution-card__content {
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.solution-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--space-sm);
  color: var(--color-text);
}

.solution-card__text {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-lg);
}

.solution-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-xl) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex-grow: 1;
}

.solution-card__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.solution-card__list li i {
  color: var(--color-success);
  margin-top: 2px;
  flex-shrink: 0;
}

.solution-card .btn {
  align-self: flex-start;
}

/* ==========================================================================
   FORM VALIDATION ERRORS
   ========================================================================== */

.form-input--error,
.form-select--error,
.form-textarea--error {
  border-color: var(--color-error) !important;
  background-color: rgba(239, 68, 68, 0.04);
}

.form-input--error:focus,
.form-select--error:focus,
.form-textarea--error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

.form-error {
  display: block;
  margin-top: var(--space-xs);
  font-size: 0.8125rem;
  color: var(--color-error);
}

/* ==========================================================================
   FORM CHECKBOX (Ley 1581)
   ========================================================================== */

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  cursor: pointer;
}

.form-checkbox input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.form-checkbox a {
  color: var(--color-primary);
  text-decoration: underline;
}

.form-checkbox a:hover {
  text-decoration: none;
}

/* ==========================================================================
   MOBILE BOTTOM ACTION BAR (replaces floating WhatsApp below 768px)
   ========================================================================== */

.mobile-bottom-bar {
  display: none;
}

@media (max-width: 767.98px) {
  .whatsapp-float {
    display: none !important;
  }
  
  .mobile-bottom-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    padding: var(--space-sm) var(--space-md);
    gap: var(--space-sm);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
  }
  
  .mobile-bottom-bar .btn {
    flex: 1;
    justify-content: center;
  }
  
  body {
    padding-bottom: 72px;
  }
}

/* ==========================================================================
   NAV SECONDARY BUTTON - hide on mobile
   ========================================================================== */

@media (max-width: 767.98px) {
  .nav__actions .btn--ghost {
    display: none;
  }
}

/* ==========================================================================
   WARRANTY TABLE COMPACT (for particulares.html)
   ========================================================================== */

.warranty-table-compact {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.warranty-table-compact th,
.warranty-table-compact td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.warranty-table-compact th {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  background: rgba(255, 255, 255, 0.03);
}

.warranty-table-compact td {
  color: #fff;
}

.warranty-table-compact td strong {
  color: #fff;
}

.warranty-table-compact tbody tr:last-child td {
  border-bottom: none;
}

/* ==========================================================================
   GOOGLE REVIEWS CAROUSEL (greviews)
   ========================================================================== */

.greviews {
  background: var(--color-bg-subtle);
  padding: var(--space-3xl) 0 var(--space-2xl);
  position: relative;
  overflow-x: hidden;
}

.greviews__head {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto var(--space-xl);
}

.greviews__head h2 {
  color: var(--color-text);
}

.greviews__sub {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
}

.greviews__sub a {
  color: var(--color-primary);
}

.greviews__sub a:hover {
  text-decoration: underline;
}

.greviews__carousel-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  position: relative;
  min-height: 200px;
  display: flex;
  align-items: center;
  padding-block: var(--space-md);
}

.greviews__carousel-shell {
  width: 100%;
  min-height: 180px;
}

.greviews__viewport {
  overflow: hidden;
  width: 100%;
  min-height: 180px;
  display: flex;
  align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.greviews__track {
  display: flex;
  width: max-content;
  align-items: stretch;
  padding: var(--space-sm) 0;
  animation: greviews-marquee 70s linear infinite;
}

.greviews__viewport:hover .greviews__track {
  animation-play-state: paused;
}

.greviews__group {
  display: flex;
  align-items: stretch;
  gap: var(--space-lg);
  padding-right: var(--space-lg);
}

@keyframes greviews-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .greviews__viewport {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .greviews__track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    row-gap: var(--space-md);
  }

  .greviews__group {
    flex-wrap: wrap;
    justify-content: center;
    padding-right: 0;
    row-gap: var(--space-md);
  }

  .greviews__group--dup {
    display: none;
  }
}

/* Google Maps style review cards */
.gmap-card {
  --gmap-w: min(260px, calc(100vw - 3rem));
  flex: 0 0 var(--gmap-w);
  width: var(--gmap-w);
  min-width: var(--gmap-w);
  max-width: var(--gmap-w);
  height: 160px;
  min-height: 160px;
  max-height: 160px;
  display: flex;
  flex-direction: column;
  background: white;
  color: #202124;
  border-radius: var(--radius-md);
  padding: 0.5rem 0.75rem 0.6rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--color-border);
  text-align: left;
  overflow: hidden;
}

.gmap-card__header {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.gmap-card__avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--a-bg, #5f6368);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gmap-card__who {
  flex: 1;
  min-width: 0;
}

.gmap-card__name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.25rem;
}

.gmap-card__name {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
  color: #202124;
  word-break: break-word;
}

.gmap-card__stats {
  margin: 0.1rem 0 0;
  font-size: 0.62rem;
  line-height: 1.3;
  color: #5f6368;
}

.gmap-card__rating-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.25rem;
}

.gmap-card__stars {
  display: inline-flex;
  color: #f4b400;
  font-size: 0.75rem;
  letter-spacing: 0;
}

.gmap-card__text {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.35;
  color: #3c4043;
  flex: 1 1 auto;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   FAQ SECTION
   ========================================================================== */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.faq-item {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--duration-normal);
}

.faq-item:hover {
  border-color: var(--color-border-light);
}

.faq-item[open] {
  border-color: var(--color-primary);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-text);
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question::marker {
  display: none;
  content: "";
}

.faq-icon {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform var(--duration-normal);
}

.faq-item[open] .faq-icon {
  transform: rotate(180deg);
  color: var(--color-primary);
}

.faq-answer {
  padding: 0 var(--space-lg) var(--space-lg);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.faq-answer p {
  margin: 0 0 var(--space-sm);
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

.faq-answer ul {
  margin: var(--space-sm) 0;
  padding-left: var(--space-lg);
}

.faq-answer li {
  margin-bottom: var(--space-xs);
}

.faq-answer a {
  color: var(--color-primary);
  font-weight: 500;
}

.faq-answer a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   DIAGNOSTIC CARDS - Photo header with gradient overlay
   ========================================================================== */

.diag-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--duration-normal), transform var(--duration-normal);
}

.diag-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.diag-card__image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.diag-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.diag-card:hover .diag-card__image img {
  transform: scale(1.05);
}

.diag-card__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 40%, transparent 100%);
  pointer-events: none;
}

.diag-card__header {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-md);
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-sm);
}

.diag-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: white;
  margin: 0;
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.diag-card__price {
  flex-shrink: 0;
  background: var(--color-primary);
  color: white;
  font-size: 0.875rem;
  font-weight: 800;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(200, 16, 46, 0.4);
}

.diag-card__price--quote {
  background: var(--color-text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
}

.diag-card__body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* ¿Para qué sirve? */
.diag-card__purpose-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.25rem;
}

.diag-card__purpose {
  font-size: 0.9375rem;
  color: var(--color-text);
  line-height: 1.5;
  margin-bottom: var(--space-md);
}

/* Qué incluye - visible checklist */
.diag-card__includes-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.5rem;
}

.diag-card__checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-sm);
}

.diag-card__checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
  margin-bottom: 0.35rem;
}

.diag-card__checklist li i {
  color: var(--color-success);
  font-size: 0.75rem;
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.diag-card__note {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin-bottom: var(--space-md);
}

/* Price + CTA footer */
.diag-card__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border-light);
}

.diag-card__footer-price {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--color-primary);
}

.diag-card__footer-price--quote {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.diag-card__cta {
  flex: 1;
  text-align: center;
}

/* Grid layout for diagnostic cards */
.diag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
}

/* Last card (Latonería) can span or center */
.diag-grid .diag-card:last-child:nth-child(odd) {
  justify-self: center;
  max-width: 400px;
}

@media (max-width: 767px) {
  .diag-grid {
    grid-template-columns: 1fr;
  }
  
  .diag-card__image {
    aspect-ratio: 2 / 1;
  }
  
  .diag-grid .diag-card:last-child:nth-child(odd) {
    max-width: none;
    justify-self: stretch;
  }
}

/* Seguimiento block with mockup */
.seguimiento-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-xl);
}
.seguimiento-benefits li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 1rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-sm);
}
.seguimiento-benefits li i {
  color: var(--color-success);
  font-size: 1rem;
}

/* Seguimiento tabs */
.seguimiento-tabs {
  max-width: 500px;
  margin: 0 auto;
}
.seguimiento-tabs__nav {
  display: flex;
  gap: 0;
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-bottom: none;
}
.seguimiento-tabs__btn {
  flex: 1;
  padding: 0.75rem 1rem;
  border: none;
  background: none;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.seguimiento-tabs__btn:hover {
  background: var(--color-bg);
  color: var(--color-text);
}
.seguimiento-tabs__btn--active {
  background: #1a1a1a;
  color: white;
}
.seguimiento-tabs__content {
  background: #1a1a1a;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.seguimiento-tabs__browser {
  background: #1a1a1a;
}
.seguimiento-tabs__bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  background: #2d2d2d;
}
.seguimiento-tabs__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.seguimiento-tabs__dot:first-child { background: #ff5f56; }
.seguimiento-tabs__dot:nth-child(2) { background: #ffbd2e; }
.seguimiento-tabs__dot:nth-child(3) { background: #27ca40; }
.seguimiento-tabs__img {
  display: block;
  width: 100%;
  height: auto;
}
.seguimiento-tabs__caption {
  text-align: center;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.7);
  padding: var(--space-sm) var(--space-md);
  margin: 0;
  background: #1a1a1a;
}

@media (max-width: 767px) {
  .seguimiento-tabs {
    max-width: 100%;
  }
  .seguimiento-tabs__btn {
    font-size: 0.75rem;
    padding: 0.6rem 0.5rem;
  }
}

/* Cómo funciona (particulares) */
.how-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  counter-reset: how-step;
}
@media (min-width: 600px) {
  .how-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .how-steps { grid-template-columns: repeat(3, 1fr); }
}
.how-step {
  position: relative;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  counter-increment: how-step;
}
.how-step::before {
  content: counter(how-step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: var(--space-md);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
}
.how-step__icon {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  color: var(--color-primary);
  font-size: 1.125rem;
  opacity: 0.8;
}
.how-step__title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: var(--space-xs);
}
.how-step__text {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
}
.how-network {
  margin-top: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm) var(--space-lg);
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  text-align: center;
}
.how-network strong { color: var(--color-text); }

/* Slogan Auto Dealer Partner */
.partner-slogan {
  border-left: 3px solid var(--color-primary);
  padding-left: var(--space-md);
  margin-bottom: var(--space-lg);
}
.partner-slogan__title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-text);
}
.partner-slogan__title strong { color: var(--color-primary); }
.partner-slogan__text {
  margin-top: 0.25rem;
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}
.hero--dark .partner-slogan__title { color: #fff; }
.hero--dark .partner-slogan__title strong { color: #ff6b7d; }


/* Galería de sedes propias */
.sede-galeria { margin-top: var(--space-2xl); }
.sede-galeria__title { display: flex; align-items: center; gap: var(--space-sm); font-size: 1.125rem; font-weight: 700; margin-bottom: var(--space-md); }
.sede-galeria__grid { display: grid; grid-template-columns: repeat(var(--galeria-cols, 4), 1fr); gap: var(--space-sm); list-style: none; padding: 0; margin: 0; }
.sede-galeria__item a { display: block; overflow: hidden; border-radius: var(--radius-md); aspect-ratio: 4 / 3; background: #f1f1f1; outline-offset: 3px; }
.sede-galeria__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.sede-galeria__item a:hover img, .sede-galeria__item a:focus-visible img { transform: scale(1.05); }
.sede-galeria__item a:focus-visible { outline: 2px solid var(--color-primary); }
@media (max-width: 900px) { .sede-galeria__grid { --galeria-cols: 3 !important; grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .sede-galeria__grid { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .sede-galeria__item img { transition: none; } }

/* Hero flotas: overlay más liviano para que se vea el mapa verde; lado del texto más oscuro */
.hero--dark .hero__overlay--mapa {
  background: linear-gradient(90deg,
    rgba(20, 20, 20, 0.72) 0%,
    rgba(20, 20, 20, 0.5) 45%,
    rgba(20, 20, 20, 0.22) 100%
  );
}
@media (max-width: 768px) {
  .hero--dark .hero__overlay--mapa { background: rgba(20, 20, 20, 0.55); }
}

/* CRO: CTA blanco sobre secciones rojas (evita rojo sobre rojo) */
.section--primary .btn--primary{background:#fff;color:var(--color-primary);border-color:#fff;box-shadow:none}
.section--primary .btn--primary:hover,.section--primary .btn--primary:focus-visible{background:#f5f5f5;color:var(--color-primary);border-color:#f5f5f5}

/* CRO: hero inicio más compacto y con video más visible */
.hero--light{min-height:min(88vh,760px)}
.hero__overlay--video{opacity:.55}
.hero__proof{display:inline-block;margin-top:var(--space-md);padding:.45em .9em;border-radius:1rem;background:rgba(255,255,255,.9);font-size:.95rem;font-weight:600;color:var(--color-text)}
#inicio.hero--light .hero__subtitle{color:var(--color-text);text-shadow:0 0 14px #fff,0 0 4px #fff}
#inicio.hero--light .hero__contact{text-shadow:0 0 10px #fff,0 0 3px #fff}
.hero__proof i{color:var(--color-primary);margin-right:.35em}

/* Calificación Google (sede Cali) */
.google-rating{display:inline-flex;align-items:center;gap:.35em;font-weight:600;color:var(--color-text,#1f2937)}
.google-rating__star{color:#f5a623}
.google-rating--sm{font-size:.875rem;margin-top:.25rem}

/* ===== Motion ===== */
/* Todo lo animado depende de html.js (lo pone el <head> y lo retira motion.js si falla
   o si el usuario prefiere menos movimiento). Sin JS el contenido se ve completo. */
:root { --ease-motion: cubic-bezier(.22, 1, .36, 1); }

/* Transiciones entre páginas (View Transitions API, sin router) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .22s ease-in both; }
::view-transition-new(root) { animation: vt-in .38s var(--ease-motion) both; }
@keyframes vt-out { to { opacity: 0; transform: translate3d(0, -10px, 0); } }
@keyframes vt-in { from { opacity: 0; transform: translate3d(0, 14px, 0); } }

/* Revelados por sección: data-reveal="up|left|right|zoom|clip" */
html.js .reveal:not(.is-visible) { opacity: 0; transform: translate3d(0, 12px, 0); }
html.js .reveal[data-reveal="left"]:not(.is-visible) { transform: translate3d(-20px, 0, 0); }
html.js .reveal[data-reveal="right"]:not(.is-visible) { transform: translate3d(20px, 0, 0); }
html.js .reveal[data-reveal="zoom"]:not(.is-visible) { transform: scale(.92); }
html.js .reveal[data-reveal="clip"]:not(.is-visible) { opacity: 1; transform: translate3d(0, 16px, 0); clip-path: inset(0 0 100% 0); }
html.js .reveal[data-reveal="clip"]:not(.reveal-done) { clip-path: inset(0 0 0 0); }
html.js .reveal:not(.reveal-done) {
  transition: opacity .5s var(--ease-motion), transform .5s var(--ease-motion), clip-path .5s var(--ease-motion);
}
html.js .reveal.is-visible:not(.reveal-done) { will-change: opacity, transform; }
html.js .hero .reveal{opacity:1!important;transform:none!important}

/* Hero: titular palabra por palabra (máscara) */
.hero__title .mw, .hero h1 .mw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.mw__i { display: inline-block; }
.is-split .mw__i { animation: mw-in .4s var(--ease-motion) calc(var(--i) * 25ms) backwards; }
@keyframes mw-in { from { opacity: 0; transform: translate3d(0, 105%, 0); } }
.hero.is-in .hero-seq { animation: seq-in .4s var(--ease-motion) var(--hd, 0ms) backwards; }
.hero.is-in .hero-seq--media { animation: media-in .45s var(--ease-motion) var(--hd, 0ms) backwards; }
@media (max-width:768px){.mw__i,.hero-seq,.hero-seq--media{animation:none!important}}
@keyframes seq-in { from { opacity: 0; transform: translate3d(0, 18px, 0); } }
@keyframes media-in { from { opacity: 0; transform: scale(.96); clip-path: inset(6% round var(--radius-lg)); } }
.hero__bg { transform-origin: 50% 0; }

/* Contadores: ancho reservado y cifras tabulares para evitar saltos */
.count-num { display: inline-block; font-variant-numeric: tabular-nums; }
:root [data-count] .count-num { color: inherit; }

/* Tarjetas: tilt 3D suave + luz que sigue al cursor (solo escritorio, clase puesta por JS) */
.tilt { position: relative; }
.tilt.is-tilting { transition: transform .12s linear, box-shadow .4s var(--ease-motion), border-color .3s; }
:root .tilt:hover {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(0, -6px, 0);
  box-shadow: 0 24px 44px -20px rgba(26, 26, 26, .28), 0 10px 18px -12px rgba(200, 16, 46, .2);
}
.tilt::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(200, 16, 46, .08), rgba(255, 255, 255, 0) 45%);
  opacity: 0; transition: opacity .4s var(--ease-motion);
}
.tilt:hover::after { opacity: 1; }

/* Botón primario: brillo al pasar + efecto magnético (JS) */
.btn--primary { position: relative; overflow: hidden; isolation: isolate; }
.btn--primary::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%);
  transform: translate3d(-120%, 0, 0);
}
.section--primary .btn--primary::after { background: linear-gradient(110deg, transparent 30%, rgba(200, 16, 46, .14) 50%, transparent 70%); }
@media (hover: hover) {
  .btn--primary:hover::after { transform: translate3d(120%, 0, 0); transition: transform .8s var(--ease-motion); }
}
.magnetic { transform: translate3d(var(--bx, 0px), var(--by, 0px), 0); }
:root .magnetic:hover { transform: translate3d(var(--bx, 0px), calc(var(--by, 0px) - 2px), 0); }
.btn--primary:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.section--primary .btn--primary:focus-visible { outline-color: #fff; }

/* Galerías de sedes: zoom + velo al pasar */
.sede-galeria__item a { position: relative; cursor: zoom-in; }
.sede-galeria__item a::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(26, 26, 26, 0) 45%, rgba(26, 26, 26, .38));
  opacity: 0; transition: opacity .4s var(--ease-motion);
}
.sede-galeria__item img { transition: transform .7s var(--ease-motion); }
.sede-galeria__item a:hover img, .sede-galeria__item a:focus-visible img { transform: scale(1.08); }
.sede-galeria__item a:hover::after, .sede-galeria__item a:focus-visible::after { opacity: 1; }

/* Lightbox (<dialog>) */
.lb {
  width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0; padding: 0; border: 0;
  background: transparent; color: #fff; display: grid; place-items: center;
  opacity: 0; transition: opacity .26s ease; touch-action: pan-y pinch-zoom;
}
.lb:not([open]) { display: none; }
.lb::backdrop { background: rgba(14, 14, 14, .9); opacity: 0; transition: opacity .26s ease; }
.lb.is-in, .lb.is-in::backdrop { opacity: 1; }
.lb__fig { margin: 0; padding: 4.5rem 4.5rem 2rem; transform: scale(.94); transition: transform .34s var(--ease-motion); }
.lb.is-in .lb__fig { transform: none; }
.lb__img { display: block; max-width: min(92vw, 1400px); max-height: 78vh; margin: 0 auto; border-radius: var(--radius-md); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); transition: opacity .2s ease; }
.lb.is-loading .lb__img { opacity: .35; }
.lb__cap { margin-top: .9rem; text-align: center; font-size: .9375rem; color: rgba(255, 255, 255, .85); }
.lb__count { position: fixed; top: 1.4rem; left: 1.4rem; margin: 0; font-size: .875rem; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .75); }
.lb__btn {
  position: fixed; display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; background: rgba(255, 255, 255, .08);
  color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; transition: background .2s ease;
}
.lb__btn:hover { background: rgba(255, 255, 255, .2); }
.lb__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lb__prev { left: 1rem; top: 50%; margin-top: -24px; }
.lb__next { right: 1rem; top: 50%; margin-top: -24px; }
.lb__close { top: 1rem; right: 1rem; }
html.lb-open { overflow: hidden; }
@media (max-width: 640px) {
  .lb__fig { padding: 4rem .75rem 5.5rem; }
  .lb__prev, .lb__next { top: auto; bottom: 1.25rem; margin-top: 0; }
}

/* Header: compacto con desenfoque al bajar, se oculta al bajar rápido y vuelve al subir */
.nav { transition: transform .45s var(--ease-motion), background .25s ease, box-shadow .25s ease; }
.nav__inner, .nav__logo img { transition: transform .45s var(--ease-motion); }
.nav.nav--compact {
  transform: translate3d(0, -10px, 0);
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  box-shadow: 0 10px 30px -18px rgba(26, 26, 26, .35);
}
.nav--compact .nav__inner { transform: translate3d(0, 5px, 0); }
.nav--compact .nav__logo img { transform: scale(.88); transform-origin: 0 50%; }
.nav.nav--hidden { transform: translate3d(0, -100%, 0); }
.nav.nav--hidden:focus-within { transform: translate3d(0, -10px, 0); }
.nav.nav--open { transform: none; }
.nav:has(.nav__mobile.is-open) { transform: none; }

/* Barra de progreso de lectura */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1001; height: 3px; pointer-events: none;
  background: var(--color-primary); transform: scaleX(0); transform-origin: 0 50%;
}

/* Franja de valores entre el hero y la siguiente sección */
.marquee {
  position: relative; overflow: hidden; padding: .95rem 0;
  --marquee-bg: var(--color-bg);
  background: var(--marquee-bg); border-block: 1px solid var(--color-border);
}
.marquee::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--marquee-bg), transparent 8%, transparent 92%, var(--marquee-bg));
}
.marquee::before {
  content: ''; position: absolute; top: 0; left: 0; z-index: 1; width: 35%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
  animation: marquee-line 6s var(--ease-in-out) infinite;
}
.marquee__track { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.marquee:hover .marquee__track, .marquee:hover::before { animation-play-state: paused; }
.marquee__group { display: flex; flex-shrink: 0; }
.marquee__group span {
  display: inline-flex; align-items: center; gap: 2.25rem; padding-right: 2.25rem;
  font-size: .9375rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap; color: var(--color-text-secondary);
}
.marquee__group span::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); }
.marquee--fleet { --marquee-bg: #0f1a14; border-color: rgba(255, 255, 255, .08); }
.marquee--fleet::before { background: linear-gradient(90deg, transparent, #34c27a, transparent); }
.marquee--fleet .marquee__group span { color: rgba(255, 255, 255, .86); }
.marquee--fleet .marquee__group span::after { background: #34c27a; }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }
@keyframes marquee-line { from { transform: translate3d(-100%, 0, 0); } to { transform: translate3d(290%, 0, 0); } }
@media(max-width:768px){.marquee__track,.marquee::before{animation:none}}

/* Menos movimiento / impresión: todo visible al instante */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html.js .reveal, html.js .reveal:not(.is-visible) { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .marquee__track, .marquee::before, .mw__i, .hero-seq { animation: none !important; }
  .nav { transform: none !important; }
}
@media print {
  html.js .reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .scroll-progress, .marquee { display: none !important; }
}

/* Destello metalizado sobre el silueta del auto (zona superior del logo) */
.logo-shine {
  position: relative;
  display: inline-block;
  line-height: 0;
  vertical-align: middle;
}

.logo-shine > img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}

.logo-shine__sweep {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 54%;
  overflow: hidden;
  pointer-events: none;
  border-radius: 2px;
  mix-blend-mode: screen;
}

.logo-shine__sweep::after {
  content: "";
  position: absolute;
  top: -25%;
  left: -95%;
  width: 42%;
  height: 150%;
  background: linear-gradient(
    102deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 22%,
    rgba(255, 255, 255, 0.72) 46%,
    rgba(210, 218, 232, 0.45) 52%,
    rgba(255, 255, 255, 0.14) 64%,
    transparent 100%
  );
  transform: skewX(-16deg);
  filter: blur(0.4px);
  animation: logo-car-shine 5.8s cubic-bezier(0.45, 0.05, 0.25, 1) infinite;
  animation-delay: 0.8s;
}

@keyframes logo-car-shine {
  0%,
  14% {
    left: -95%;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  46% {
    left: 155%;
    opacity: 1;
  }
  52%,
  100% {
    left: 155%;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-shine__sweep::after {
    animation: none;
    opacity: 0;
  }
}

/* Contraste del texto del hero claro sobre la foto */
.hero--light .hero__subtitle{color:#111;font-weight:500;text-shadow:0 0 18px #fff,0 0 8px #fff,0 0 2px #fff}
.hero--light .hero__content,.hero--light .hero__inner{position:relative}
#inicio.hero--light .hero__overlay--video{opacity:1;background:linear-gradient(90deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.72) 38%,rgba(255,255,255,.18) 68%,rgba(255,255,255,0) 100%)}
@media (max-width:768px){#inicio.hero--light .hero__overlay--video{background:linear-gradient(180deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.7) 60%,rgba(255,255,255,.35) 100%)}}
.hero--light .hero__subtitle{font-weight:600}

.iva{font-size:max(.75em,11px);font-weight:400;opacity:.85;margin-left:.15em;white-space:nowrap;}
.diag-card__price .iva{opacity:1;}
.sw-shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-xl,2rem);}
.sw-shot{margin:0;}
.sw-shot img{width:100%;height:auto;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.18);border:1px solid rgba(0,0,0,.08);display:block;}
.sw-shot figcaption{margin-top:.6rem;font-size:.9rem;color:var(--color-text-secondary);text-align:center;}

/* ==========================================================================
   Barra inferior móvil: aparece solo cuando los botones del hero ya no se ven
   (js/mobile-bar.js, diferido, pone .mbb--lista y .mbb--oculta). Con JS, la barra arranca oculta
   hasta que el script decide (así el script no bloquea el render). body ya reserva 72px abajo: no hay salto.
   ========================================================================== */
@media (max-width: 767.98px) {
  .mobile-bottom-bar {
    padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom, 0px));
    transition: transform .25s ease, box-shadow .25s ease, visibility 0s linear 0s;
    will-change: transform;
  }
  .mobile-bottom-bar.mbb--oculta,
  html.js .mobile-bottom-bar:not(.mbb--lista) {
    transform: translateY(calc(100% + 12px));
    box-shadow: none;
    visibility: hidden;
    transition: transform .25s ease, box-shadow .25s ease, visibility 0s linear .25s;
  }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-bottom-bar, .mobile-bottom-bar.mbb--oculta { transition: none; }
}

/* Hero: ciudades en dos partes (propios / aliados); en celular, una debajo de la otra */
@media (max-width: 600px) {
  .hero .eyebrow__sep { display: none; }
  .hero .eyebrow__aliados { display: block; margin-top: .2em; opacity: .85; }
}

/* Hero (index): «Diagnósticos desde $91.500 IVA incluido» nunca se parte; la nota va debajo en celular */
.hero__proof-precio { white-space: nowrap; }
.hero__proof .iva { font-size: .72em; }
@media (max-width: 600px) {
  .hero__proof-sep { display: none; }
  .hero__proof-nota { display: block; font-weight: 500; font-size: .9em; margin-top: .1em; }
}

/* Anuncio del carro 3D en el inicio (index.html): imagen fija + botón a particulares.html#carro-3d */
.c3d-teaser{padding:var(--space-2xl,3rem) 0;background:var(--color-bg)}
.c3d-teaser__card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:var(--space-xl);
  max-width:1000px;margin:0 auto;padding:var(--space-lg) var(--space-xl);border:1px solid var(--color-border);
  border-radius:var(--radius-xl);background:#fff;box-shadow:var(--shadow-lg)}
.c3d-teaser__media{position:relative;display:block;border-radius:var(--radius-lg);overflow:hidden}
.c3d-teaser__media img{display:block;width:100%;height:auto;aspect-ratio:860/570;mix-blend-mode:multiply}
.c3d-teaser__dot{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--color-primary);
  border:3px solid #fff;box-shadow:0 0 0 0 rgba(200,16,46,.5),0 2px 6px rgba(0,0,0,.25);animation:c3dTeaserPulso 2.2s ease-out infinite}
.c3d-teaser__dot:nth-of-type(2){animation-delay:.7s}
.c3d-teaser__dot:nth-of-type(3){animation-delay:1.4s}
@keyframes c3dTeaserPulso{0%{box-shadow:0 0 0 0 rgba(200,16,46,.5),0 2px 6px rgba(0,0,0,.25)}70%,100%{box-shadow:0 0 0 12px rgba(200,16,46,0),0 2px 6px rgba(0,0,0,.25)}}
@media (prefers-reduced-motion:reduce){.c3d-teaser__dot{animation:none}}
.c3d-teaser__title{font-size:clamp(1.5rem,1.1rem + 1.6vw,2rem);line-height:1.2;margin:0 0 var(--space-sm);color:var(--color-text)}
.c3d-teaser__copy{margin:0 0 var(--space-lg);color:var(--color-text-secondary);font-size:1.0625rem;line-height:1.55}
@media (max-width:768px){
  .c3d-teaser{padding:var(--space-xl) 0}
  .c3d-teaser__card{grid-template-columns:1fr;gap:var(--space-md);padding:var(--space-lg)}
  .c3d-teaser__text{text-align:center}
  .c3d-teaser__btn{width:100%;justify-content:center}
}

/* Carro 3D (particulares): reserva del escenario antes de que llegue css/carro-3d.css y de que se pida la imagen fija */
.c3d__stage{position:relative;aspect-ratio:4/3;background:var(--color-bg-subtle)}
.c3d__poster:not([src]){visibility:hidden}
@media (max-width:900px){.c3d__stage{aspect-ratio:1/1;max-height:70vh}}

/* Nav móvil 360–399 px: logo, «Agendar cita» y menú caben sin desbordar; el menú no se encoge */
.nav__toggle{flex-shrink:0}
.nav__actions{flex-shrink:0}
@media (max-width:399.98px){
  .nav__inner{gap:var(--space-sm)}
  .nav__logo{flex-shrink:1;min-width:0}
  .nav__logo img{height:30px;max-width:100%;object-fit:contain}
  .nav__actions{gap:6px}
}
/* Móvil: las entradas laterales (data-reveal left/right) suben en vertical, para no crear scroll horizontal */
@media (max-width:767.98px){
  html.js .reveal[data-reveal="left"]:not(.is-visible),
  html.js .reveal[data-reveal="right"]:not(.is-visible){transform:translate3d(0,12px,0)}
}
html{overflow-x:clip}

/* Nuestra red: tarjetas de sede (propia o aliada), generadas desde assets/data/sedes.json */
.red-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:var(--space-lg)}
.red-card{display:flex;flex-direction:column;gap:var(--space-md);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-lg);min-width:0}
.red-card--propia{border-top:4px solid var(--color-primary)}
.red-tag{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:4px 10px;border-radius:var(--radius-full);font-size:.75rem;font-weight:700;letter-spacing:.02em;line-height:1.4}
.red-tag--propia{background:var(--color-primary);color:#fff}
.red-tag--aliada{background:var(--color-bg-muted);color:var(--color-text)}
.red-card__title{margin:0;font-size:1.125rem;font-weight:700;line-height:1.3;color:var(--color-text);overflow-wrap:anywhere}
.red-card__city{margin:2px 0 0;font-size:.875rem;color:var(--color-text-muted)}
.red-card__info{display:flex;flex-direction:column;gap:var(--space-sm);margin:0;padding:0;list-style:none}
.red-card__info li{display:flex;gap:var(--space-sm);font-size:.9375rem;color:var(--color-text-secondary);overflow-wrap:anywhere}
.red-card__info i{width:16px;flex-shrink:0;margin-top:.2em;color:var(--color-primary)}
.red-card__actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:auto}
.red-card__actions .btn{flex:1 1 auto;min-height:44px}
.red-city{margin-top:var(--space-2xl);scroll-margin-top:96px}
.red-city:first-child{margin-top:0}
.red-city__title{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-sm);margin:0 0 var(--space-lg);font-size:1.5rem;font-weight:800;color:var(--color-text)}
.red-city__count{font-size:.9375rem;font-weight:500;color:var(--color-text-muted)}
.red-block{margin-top:var(--space-2xl)}
.red-block__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-sm) var(--space-lg);margin-bottom:var(--space-lg)}
.red-block__title{margin:0;font-size:1.375rem;font-weight:800;color:var(--color-text)}
.red-nota{display:flex;gap:var(--space-md);align-items:flex-start;padding:var(--space-lg);border-radius:var(--radius-lg);background:var(--color-primary-subtle);color:var(--color-text);margin:0 auto var(--space-2xl);max-width:860px}
.red-nota i{color:var(--color-primary);font-size:1.25rem;margin-top:.15em;flex-shrink:0}
.red-nota p{margin:0}
.red-nota p+p{margin-top:var(--space-xs)}
.red-mapa + .red-nota{margin-top:var(--space-2xl)}
.red-lista-title{margin:0 0 var(--space-lg)}
.red-mapa-title{margin:0 0 var(--space-lg)}

/* Mapa de la red: silueta de Colombia de los materiales de flotas, pines e interacción del agendamiento de flotas (js/red-mapa.js) */
.red-mapa{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-lg)}
.red-mapa [hidden]{display:none!important}
.red-mapa__step{margin:0 0 var(--space-sm);font-size:.875rem;font-weight:700;color:var(--color-text)}
.red-mapa__step span{margin-left:6px;font-weight:500;color:var(--color-text-muted)}
.red-mapa__chiplist{display:flex;flex-wrap:wrap;gap:var(--space-sm)}
.red-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--color-border);border-radius:var(--radius-full);background:var(--color-bg);color:var(--color-text);font:inherit;font-size:.9375rem;font-weight:600;cursor:pointer;transition:border-color .15s,background-color .15s,color .15s}
.red-chip:hover{border-color:var(--color-primary)}
.red-chip:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px}
.red-chip[aria-pressed="true"]{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.red-chip__n{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--radius-full);background:var(--color-primary-subtle);color:var(--color-primary);font-size:.75rem;font-weight:800}
.red-chip[aria-pressed="true"] .red-chip__n{background:rgba(255,255,255,.22);color:#fff}
.red-chip--reset{background:var(--color-bg-subtle)}
.red-mapa__frame{min-width:0;padding:var(--space-md) var(--space-sm) var(--space-sm);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg-warm);overflow:hidden}
.red-mapa__stage{position:relative;width:100%;max-width:300px;margin:0 auto;aspect-ratio:877/1280}
.red-mapa__sil{display:block;width:100%;height:100%;opacity:.94;filter:drop-shadow(0 10px 24px rgba(200,16,46,.28))}
.red-mapa__lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.red-mapa__lines line{stroke:#fff;stroke-width:2;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.red-pin__real{position:absolute;left:var(--x);top:var(--y);width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border:2px solid #111827;border-radius:50%;background:#fff;pointer-events:none}
.red-pin{position:absolute;left:var(--x);top:var(--y);z-index:2;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.red-pin__n{position:relative;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:2px solid #111827;border-radius:50%;background:#fff;color:var(--color-primary);font-size:12px;font-weight:700;line-height:1;box-shadow:0 2px 8px rgba(0,0,0,.35);transition:transform .15s,width .15s,height .15s}
.red-pin__label{position:absolute;top:50%;left:calc(50% + 18px);transform:translateY(-50%);padding:2px 8px;border-radius:var(--radius-full);background:rgba(255,255,255,.94);color:#111827;font-size:.75rem;font-weight:800;white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,.18);pointer-events:none}
.red-pin--izq .red-pin__label{left:auto;right:calc(50% + 18px)}
.red-pin:hover .red-pin__n{transform:scale(1.1)}
.red-pin:focus-visible{outline:none}
.red-pin:focus-visible .red-pin__n{outline:3px solid #fff;outline-offset:2px}
.red-pin[aria-pressed="true"]{z-index:3}
.red-pin[aria-pressed="true"] .red-pin__n{width:34px;height:34px;border-color:#fff;background:var(--color-primary);color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.55),0 3px 10px rgba(0,0,0,.4)}
.red-pin[aria-pressed="true"] .red-pin__label{background:#111827;color:#fff}
.red-mapa__caption{margin:var(--space-sm) 0 0;font-size:.75rem;line-height:1.45;color:var(--color-text-muted);text-align:center}
.red-mapa__panel{min-width:0}
.red-mapa__hint{display:flex;gap:var(--space-md);align-items:flex-start;padding:var(--space-lg);border:1px dashed var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg-subtle);color:var(--color-text-secondary)}
.red-mapa__hint i{flex-shrink:0;margin-top:.15em;font-size:1.25rem;color:var(--color-primary)}
.red-mapa__hint p{margin:0}
.red-mapa__hint strong{display:block;margin-bottom:var(--space-xs);color:var(--color-text)}
.red-mapa__hint > div{flex:1;min-width:0}
.red-mapa__resumen{display:none;margin:var(--space-lg) 0 0;padding:0;list-style:none;border-top:1px solid var(--color-border)}
.red-mapa__resumen button{display:flex;align-items:center;gap:var(--space-sm);width:100%;min-height:52px;padding:0 var(--space-xs);border:0;border-bottom:1px solid var(--color-border);background:none;color:var(--color-text);font:inherit;font-weight:700;text-align:left;cursor:pointer}
.red-mapa__resumen button:hover,.red-mapa__resumen button:focus-visible{color:var(--color-primary)}
.red-mapa__resumen button:focus-visible{outline:3px solid var(--color-primary);outline-offset:-3px}
.red-mapa__resumen-n{flex:1;font-size:.875rem;font-weight:500;color:var(--color-text-muted)}
.red-mapa__resumen i{font-size:.75rem;color:var(--color-primary)}
.red-mapa__city{scroll-margin-top:96px}
.red-mapa__city:focus{outline:none}
.red-mapa__sedes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:var(--space-md)}
.red-sede{display:flex;flex-direction:column;gap:var(--space-sm);min-width:0;padding:var(--space-md) var(--space-lg) var(--space-lg);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg)}
.red-sede--propia{border-top:4px solid var(--color-primary)}
.red-sede__title{margin:0;font-size:1.0625rem;font-weight:700;line-height:1.3;color:var(--color-text);overflow-wrap:anywhere}
.red-sede .red-card__actions{margin-top:var(--space-xs)}
@media (min-width:900px){
  .red-mapa{grid-template-columns:minmax(300px,360px) minmax(0,1fr);column-gap:var(--space-2xl);align-items:start}
  .red-mapa__chips{grid-column:1/-1}
  .red-mapa__stage{max-width:320px}
  .red-mapa__resumen{display:block}
}
@media (prefers-reduced-motion:no-preference){
  .red-mapa__city:not([hidden]){animation:red-mapa-in .25s ease-out}
  .red-mapa:not(.is-open) .red-pin__n::after{content:"";position:absolute;inset:-6px;border:2px solid rgba(255,255,255,.8);border-radius:50%;animation:red-pin-pulso 2.4s ease-out infinite}
}
@keyframes red-mapa-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes red-pin-pulso{0%{opacity:.9;transform:scale(.85)}70%,100%{opacity:0;transform:scale(1.5)}}
.red-lista{margin-top:var(--space-xl);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg)}
.red-lista summary{display:flex;align-items:center;gap:var(--space-sm);min-height:48px;padding:0 var(--space-lg);font-weight:700;color:var(--color-text);cursor:pointer;list-style:none}
.red-lista summary::-webkit-details-marker{display:none}
.red-lista summary::before{content:"+";display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--color-primary-subtle);color:var(--color-primary);font-weight:800}
.red-lista[open] summary::before{content:"−"}
.red-lista summary:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-lg)}
.red-lista__body{padding:0 var(--space-lg) var(--space-lg)}
.red-lista__city{margin:var(--space-lg) 0 var(--space-sm);font-size:1rem;font-weight:800;color:var(--color-text)}
.red-lista__city:first-child{margin-top:var(--space-sm)}
.red-lista__city span{margin-left:6px;font-size:.875rem;font-weight:500;color:var(--color-text-muted)}
.red-lista__items{display:flex;flex-direction:column;gap:var(--space-sm);margin:0;padding-left:1.1rem;font-size:.9375rem;color:var(--color-text-secondary);overflow-wrap:anywhere}
.red-lista__items strong{color:var(--color-text)}
.red-lista__tag{display:inline-block;margin-left:4px;padding:0 8px;border-radius:var(--radius-full);background:var(--color-bg-muted);color:var(--color-text);font-size:.75rem;font-weight:700}
.red-lista__more{margin:var(--space-lg) 0 0;font-size:.9375rem}

/* Menú móvil abierto: sin backdrop-filter en .nav, porque crea un bloque contenedor y el panel fijo quedaba dentro de los 72 px de la barra */
.nav.nav--open{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--color-bg)}