/* Hoja de estilos del sitio, compartida por todas las páginas.
   Antes vivía dentro de index.html; se separó al sumar las páginas de
   flotas y repuestos (P-059). */

/* ── TIPOGRAFÍAS ── */
/* Archivos variables de Google Fonts servidos desde el propio dominio. Un archivo
   por familia y subconjunto cubre todos los pesos. Roboto se declara peso por
   peso, igual que lo declaraba Google, para que el 600 siga resolviendo a 700. */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('../fonts/montserrat-latin.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: 'Montserrat'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('../fonts/montserrat-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300; font-stretch: 100%; font-display: swap; src: url('../fonts/roboto-latin.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: 'Roboto'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url('../fonts/roboto-latin.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: 'Roboto'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url('../fonts/roboto-latin.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: 'Roboto'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url('../fonts/roboto-latin.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: 'Roboto'; font-style: normal; font-weight: 300; font-stretch: 100%; font-display: swap; src: url('../fonts/roboto-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url('../fonts/roboto-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url('../fonts/roboto-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url('../fonts/roboto-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* scroll-padding-top: el menú fijo mide 72 px más 1 de borde. Con esto,
   al saltar a una sección, ésta empieza justo debajo del menú en vez de
   quedar con su parte de arriba tapada; y al recorrer la página con el
   teclado, el elemento enfocado no queda escondido detrás del menú. */
html { scroll-behavior: smooth; scroll-padding-top: 73px; }
body { font-family: 'Roboto', sans-serif; color: #2D2D2D; background: #fff; line-height: 1.6; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
/* Títulos repartidos en líneas parejas, sin una palabra sola al final. */
h1, h2, h3 { text-wrap: balance; }
/* Sin la espera que el navegador deja para detectar un doble toque de
   zoom, y un resaltado del color de la casa en vez del gris. */
a, button { touch-action: manipulation; -webkit-tap-highlight-color: rgba(18, 75, 143, 0.15); }

/* ── FOCUS VISIBLE (WCAG 2.1 AA) ── */
:focus-visible {
  outline: 3px solid #7DB919;
  outline-offset: 3px;
  border-radius: 3px;
}
.btn-primary:focus-visible,
.btn-outline:focus-visible,
.btn-wa:focus-visible {
  outline-color: #fff;
}
/* Botones azules sobre fondo claro: el contorno blanco no se vería */
.btn-cta:focus-visible,
.testimonials .btn-primary:focus-visible {
  outline-color: #0d3870;
}

/* ── ENLACE DE SALTO: invisible hasta recibir foco con el teclado ── */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1100;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  background: #124B8F;
  color: #fff;
  padding: 12px 20px;
  border-radius: 6px;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }
#contenido-principal:focus { outline: none; }

/* ── VARIABLES ── */
:root {
  --azul:       #124B8F;
  --azul-dark:  #0d3870;
  /* Fondo del encabezado de las tres páginas (P-082): el azul que se veía en
     el panel del inicio, ahora opaco e igual en todas. */
  --azul-hero:  #123e6b;
  --azul-light: #1a5fad;
  --verde:      #7DB919;
  --verde-dark: #5e8d10;
  --gris:       #2D2D2D;
  --gris-medio: #6b6b6b;
  --gris-claro: #e8edf3;
  --gris-bg:    #f4f6f9;
  --blanco:     #ffffff;
  --radius:     8px;
  --shadow:     0 4px 20px rgba(18,75,143,0.12);
}

/* ── UTILITIES ── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* Rediseño: el título en mayúsculas, alineado a la izquierda, y una línea
   que sigue hasta el borde del contenedor, verde en su primer tramo
   (Rogers-O'Brien). */
.section-title {
  display: flex;
  align-items: center;
  gap: 24px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--azul);
  margin-bottom: 18px;
}
.section-title::after {
  content: '';
  flex: 1 1 64px;
  min-width: 64px;
  height: 3px;
  background: linear-gradient(90deg, var(--verde) 0 64px, var(--gris-claro) 64px);
}
.section-header.center .section-title::after { margin: 0; }
.section-sub {
  font-size: 1.05rem;
  color: var(--gris-medio);
  max-width: 600px;
}
.section-header { margin-bottom: 48px; }
/* "center" quedó del diseño anterior: en el rediseño todo va a la izquierda. */
.section-header.center { text-align: left; }
.section-header.center .section-sub { margin: 0; }

/* ── EYEBROW LABEL ── */
.eyebrow-label {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--azul);
  display: block;
  margin-bottom: 10px;
}
.contact-cta .eyebrow-label { color: rgba(255,255,255,0.8); }

/* ── NAVBAR ── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--blanco);
  border-bottom: 1px solid var(--gris-claro);
  transition: box-shadow 0.3s;
}
.navbar.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.12); }
.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.navbar-logo { display: flex; align-items: center; gap: 12px; }
.navbar-logo img { height: 48px; width: 48px; object-fit: contain; }
.navbar-logo-text {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--azul);
  line-height: 1.2;
}
/* 12 px como mínimo de texto, con el espaciado entre letras bajado de
   0,05em a 0,025em para que la línea mida lo mismo que medía a 0,72rem
   (≈125 px). Con 0,05em pasaba a dos líneas entre 831 y 835 px, donde
   el logo está más apretado, y el bloque se salía del menú. */
.navbar-logo-text span {
  display: block;
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--gris-medio);
  letter-spacing: 0.025em;
}
.navbar-links { display: flex; align-items: center; gap: 32px; }
.navbar-links a {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--gris);
  transition: color 0.2s;
  letter-spacing: 0.02em;
}
.navbar-links a:hover { color: var(--azul); }
.btn-cta {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  background: var(--azul);
  color: var(--blanco);
  padding: 10px 22px;
  border-radius: var(--radius);
  transition: background 0.2s, transform 0.1s;
  white-space: nowrap;
}
.btn-cta:hover { background: var(--azul-dark); transform: translateY(-1px); }
.btn-cta:focus-visible { background: var(--azul-dark); }
/* .navbar-links a (color gris y azul al pasar el mouse) pesa más que .btn-cta */
.navbar-links a.btn-cta,
.navbar-links a.btn-cta:hover { color: var(--blanco); }
/* 44 × 44 px: el mínimo de un objetivo táctil. Antes medía 32 × 24.
   Las rayas quedan centradas, y el margen derecho negativo las deja en
   el mismo lugar que antes, a 4 px del borde del contenedor. Sin
   flex-shrink: a 320 px el logo lo apretaba hasta 42 px. */
.navbar-toggle {
  display: none;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 0;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  margin-right: -6px;
}
.navbar-toggle span { width: 24px; height: 2px; background: var(--gris); border-radius: 2px; display: block; transition: transform 0.3s, opacity 0.3s; }
.navbar-mobile { display: none; flex-direction: column; }
.navbar-mobile.open { display: flex; }
.navbar-mobile a {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--gris);
  padding: 14px 32px;
  border-bottom: 1px solid var(--gris-claro);
  transition: color 0.2s;
}
.navbar-mobile a:hover { color: var(--azul); }

/* ── HERO ──
   Rediseño (docs/propuesta-rediseno.md): un panel azul cortado en
   diagonal sobre la foto, con una franja verde en el borde, como el
   cartel de la fachada. El ángulo es el mismo en todos los cortes
   diagonales del rediseño: 180 px de desplazamiento en el alto del panel.
   En celular el panel ocupa todo el ancho y el corte pasa abajo. */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: var(--azul-dark);
}
.hero-bg {
  position: absolute;
  inset: 0;
  background: var(--azul-dark);
}
.hero-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
}
/* F-01 es el frente, con el cartel en el centro de la foto: en escritorio
   la foto ocupa solo el lado derecho, para que el panel no tape el cartel. */
@media (min-width: 901px) {
  .hero-bg img { left: 40%; width: 60%; object-position: 55% 40%; }
}
/* Leve oscurecido del lado de la foto, para que el panel no compita. */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(13,56,112,0) 45%, rgba(13,56,112,0.35) 100%);
}
.hero-panel,
.hero-franja {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  /* Borde del texto + 220 px: el corte nunca pasa por encima del texto. */
  --borde-texto: calc(max(32px, 50vw - 568px) + min(620px, 52vw));
  width: calc(var(--borde-texto) + 220px);
  clip-path: polygon(0 0, 100% 0, calc(100% - 180px) 100%, 0 100%);
  pointer-events: none;
}
.hero-panel {
  z-index: 1;
  background: var(--azul-hero);
}
/* Asoma 12 px por detrás del panel: la línea verde del cartel. */
.hero-franja {
  width: calc(var(--borde-texto) + 232px);
  background: var(--verde);
}
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 88px;
  padding-bottom: 72px;
  /* Ocupa todo el alto libre y centra el texto adentro: así la banda de
     cifras queda pegada al borde inferior, sin la línea de 1,5 px que
     dejaba el redondeo. */
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.hero-content > * { max-width: min(620px, 52vw); }
/* Rótulo técnico: un cuadrado verde y mayúsculas espaciadas. */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blanco);
  margin-bottom: 26px;
}
.hero-badge::before {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--verde);
  flex-shrink: 0;
}
.hero h1 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(2.3rem, 5.4vw, 4.6rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--blanco);
  line-height: 0.98;
  margin-bottom: 26px;
}
/* El nombre va con el tamaño de título y la descripción debajo, más chica
   (pedido de Ramiro, P-080). Las dos líneas quedan dentro del h1. */
.hero h1 span { display: block; }
.hero-h1-sub {
  font-size: clamp(1.15rem, 2.1vw, 1.75rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin-top: 16px;
  color: rgba(255,255,255,0.92);
}
.hero p {
  font-size: 1.08rem;
  color: rgba(255,255,255,0.88);
  margin-bottom: 38px;
  line-height: 1.7;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-primary {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  background: var(--azul);
  color: var(--blanco);
  padding: 14px 28px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s, transform 0.15s;
}
.btn-primary:hover { background: var(--azul-dark); transform: translateY(-2px); }
.btn-primary:focus-visible { background: var(--azul-dark); }
/* Sobre el panel azul, el botón azul lleva borde blanco, como .btn-wa.
   Mayúsculas espaciadas, como los rótulos. */
.hero .btn-primary,
.hero .btn-outline {
  border: 2px solid var(--blanco);
  padding: 14px 26px;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero .btn-primary:hover { background: var(--azul-light); }
.btn-outline {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  background: transparent;
  color: var(--blanco);
  border: 2px solid rgba(255,255,255,0.65);
  padding: 14px 28px;
  border-radius: var(--radius);
  transition: border-color 0.2s, background 0.2s;
}
.btn-outline:hover { border-color: var(--blanco); background: rgba(255,255,255,0.1); }
.hero .btn-outline { border-color: rgba(255,255,255,0.55); }

/* Cifras: banda blanca con números grandes en azul y una raya verde
   arriba de cada uno, separados por líneas finas. */
.hero-stats {
  position: relative;
  z-index: 3;
  background: var(--blanco);
  border-bottom: 1px solid var(--gris-claro);
}
/* Columnas que pueden encogerse y texto que puede partirse: la fila no empuja el ancho de la página, diga lo que diga cada contador. */
.hero-stats-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.stat-item {
  min-width: 0;
  padding: 34px 24px 30px;
  border-right: 1px solid var(--gris-claro);
}
.stat-item:last-child { border-right: none; }
.stat-item::before {
  content: '';
  display: block;
  width: 28px;
  height: 3px;
  background: var(--verde);
  margin-bottom: 16px;
}
.stat-num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(2.2rem, 4vw, 3.3rem);
  letter-spacing: -0.02em;
  color: var(--azul);
  line-height: 1;
  margin-bottom: 8px;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 0.85rem;
  color: var(--gris-medio);
  overflow-wrap: anywhere;
}

/* Entrada del inicio: el panel entra desde la izquierda, la foto se
   acomoda y el texto sube en escalones. Solo CSS: no bloquea la carga,
   y el estado final es el de siempre. Sin movimiento si el sistema lo
   pide (ver MOVIMIENTO REDUCIDO). */
@keyframes entra-panel { from { transform: translateX(-12%); } to { transform: none; } }
@keyframes entra-foto  { from { transform: scale(1.08); } to { transform: none; } }
@keyframes sube        { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* El título es lo primero que se pinta (LCP): solo se desplaza, sin pasar
   por opacidad 0, para no demorar su aparición (CLAUDE.md §5). */
@keyframes sube-titulo { from { transform: translateY(14px); } to { transform: none; } }
.hero-panel  { animation: entra-panel 0.9s cubic-bezier(.2,.7,.2,1) both; }
.hero-franja { animation: entra-panel 0.9s 0.08s cubic-bezier(.2,.7,.2,1) both; }
.hero-bg img { animation: entra-foto 1.8s cubic-bezier(.2,.7,.2,1) both; }
.hero-badge  { animation: sube 0.6s 0.25s ease-out both; }
.hero h1     { animation: sube-titulo 0.7s ease-out both; }
.hero p      { animation: sube 0.7s 0.5s ease-out both; }
.hero-ctas   { animation: sube 0.7s 0.62s ease-out both; }

@media (max-width: 900px) {
  .hero-panel, .hero-franja {
    width: 100%;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 64px), 0 100%);
  }
  .hero-franja { top: 12px; bottom: -12px; width: 100%; }
  .hero-content { padding-bottom: 96px; }
  .hero-content > * { max-width: 620px; }
}

/* ── HUECOS DE FOTO (docs/brief-fotografico.md) ──
   Rectángulo gris con la proporción ya reservada, para que la foto que
   falta no mueva nada cuando llegue. No se publica con huecos visibles. */
.img-slot {
  background: repeating-linear-gradient(
    135deg,
    var(--gris-claro) 0 10px,
    #e4e7ea 10px 20px
  );
  border: 1px dashed var(--gris-medio);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
}
.img-slot span {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gris);
}
/* La foto que ocupa un hueco: misma proporción (en el style del <picture>) y
   el mismo corte diagonal en la esquina inferior derecha. */
.foto {
  display: block;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0 100%);
}
.foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── CÓMO TRABAJAMOS ── */
.how-we-work {
  background-color: var(--gris-bg);
  background-image: radial-gradient(circle, rgba(18,75,143,0.07) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  padding: 88px 0 148px;
  position: relative;
}
.how-we-work::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 66px;
  /* --azul: debajo está la libreta, que en el rediseño es un plano azul. */
  background: var(--azul);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
/* Dos columnas: el hueco de foto a la izquierda y los cinco pasos en una
   sola columna a la derecha. minmax(0, 1fr) para que ningún hijo imponga
   un ancho mínimo mayor que su columna (M2c, Tarea 6). */
.how-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}
.how-steps { display: grid; gap: 18px; counter-reset: paso; }
/* Cada paso con su número (01 a 05) grande a la izquierda: numeración
   visual del orden, generada por CSS. */
.how-step {
  position: relative;
  background: var(--blanco);
  border: 1px solid var(--gris-claro);
  padding: 22px 24px 22px 86px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  counter-increment: paso;
}
.how-step::before {
  content: counter(paso, decimal-leading-zero);
  position: absolute;
  left: 22px;
  top: 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 2rem;
  line-height: 1;
  color: var(--azul);
}
.how-step h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--azul);
  margin-bottom: 10px;
}
.how-step p { font-size: 0.93rem; color: var(--gris-medio); line-height: 1.65; }

/* ── LIBRETA DIGITAL ──
   Fondo blanco y sin trama: así la diagonal de "Cómo trabajamos"
   (var(--blanco), P-019) sigue empalmando con lo que tiene abajo. El
   remate propio va pintado de --gris-bg, que es el fondo de la casa de
   repuestos, la sección que quedó debajo en la Tarea 7. La Tarea 13
   recalculó la cadena entera con el orden final y este remate no cambió:
   la casa de repuestos sigue debajo. */
.notebook {
  background: var(--azul);
  color: var(--blanco);
  padding: 88px 0 148px;
  position: relative;
}
.notebook::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 66px;
  background: var(--gris-bg);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
/* Espejo de .how-grid: el texto a la izquierda y el hueco de foto a la
   derecha, para que dos secciones seguidas no repitan la misma
   disposición. minmax(0, 1fr) por la misma razón que en .how-grid. */
.notebook-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}
.notebook .section-title { color: var(--blanco); }
.notebook .section-title::after { background: linear-gradient(90deg, var(--verde) 0 64px, rgba(255,255,255,0.25) 64px); }
.notebook .section-sub { color: rgba(255,255,255,0.85); }
.notebook .img-slot { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.4); }
.notebook .img-slot span { color: var(--blanco); }
.notebook-icon {
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.notebook-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--blanco);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.notebook-lead { font-size: 0.98rem; color: rgba(255,255,255,0.88); line-height: 1.7; }
.notebook-list-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--blanco);
  margin: 26px 0 14px;
}
.notebook-list { list-style: none; display: grid; gap: 12px; }
.notebook-list li {
  position: relative;
  padding-left: 26px;
  font-size: 0.93rem;
  color: rgba(255,255,255,0.88);
  line-height: 1.6;
}
/* Tilde dibujada con bordes CSS, no con un glifo: los subconjuntos de
   fuente que servimos no incluyen los caracteres de símbolos (P-005).
   Sobre el azul va en verde claro: el verde de la casa no contrasta. */
.notebook-list li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 6px;
  height: 11px;
  border: solid #c5ec7f;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ── CASA DE REPUESTOS ──
   Fondo --gris-bg con trama, para cortar las dos secciones blancas
   seguidas. El remate va en --blanco, que es el fondo de Servicios, la
   sección que tiene abajo hoy. */
.parts {
  background-color: var(--gris-bg);
  background-image: radial-gradient(circle, rgba(18,75,143,0.07) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  padding: 88px 0 148px;
  position: relative;
}
.parts::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 66px;
  /* --azul-dark: debajo está flotas, que en el rediseño es un plano azul oscuro. */
  background: var(--azul-dark);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
/* La foto a la izquierda y el texto a la derecha, alternando con la
   libreta, que tiene la foto a la derecha. */
.parts-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}
.parts-text p {
  font-size: 0.98rem;
  color: var(--gris-medio);
  line-height: 1.7;
}
.parts-text p + p { margin-top: 18px; }

/* ── FLOTAS ──
   "Bloque corto y secundario" (spec, Tarea 8): en vez de una sección a
   todo ancho como las demás, un panel de ancho acotado, para que no
   compita con lo que le habla al particular.
   Sin remate diagonal, también con el orden final de la Tarea 13. Debajo
   quedó la franja de marcas, que es --gris-bg, así que acá hay un cambio
   de color sin diagonal. Es a propósito: la franja es una banda, no una
   sección —no lleva id ni entrada en el menú (P-028)— y se separa de lo
   que sigue con su propio borde inferior. Comprobado en captura a 390 y
   1440 px. La regla de P-025 fija el color de los remates que existen; no
   manda crear uno nuevo, y crearlo habría sido una decisión de forma que
   nadie pidió. */
.fleets {
  background: var(--azul-dark);
  padding: 88px 0 148px;
  position: relative;
}
/* Remate diagonal hacia la franja de marcas, que es --gris-bg. Lo pidió
   Ramiro al resolver P-045, ampliando la regla de P-025: todo cambio de
   color entre secciones lleva remate diagonal, y crearlo no es una
   decisión. Misma geometría que los otros seis: 66 px de alto, el mismo
   polígono y el mismo bottom de -2 px; el padding inferior pasa de 88 a
   148 px, como en las demás secciones con remate. Con esta, el sitio tiene
   siete. */
.fleets::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 66px;
  background: var(--gris-bg);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.fleets-panel {
  max-width: 860px;
  margin: 0 auto;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  border-left: 4px solid var(--verde);
  padding: 40px 44px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0 100%);
}
.fleets .section-title { color: var(--blanco); }
.fleets .section-title::after { background: linear-gradient(90deg, var(--verde) 0 64px, rgba(255,255,255,0.2) 64px); }
/* Sobre el azul oscuro, el botón azul lleva borde blanco, como en el inicio. */
.fleets .btn-primary { border: 2px solid var(--blanco); }
.fleets-panel .section-title { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.fleets-panel .section-header { margin-bottom: 22px; }
.fleets-lead { font-size: 0.95rem; color: rgba(255,255,255,0.88); line-height: 1.7; }
.fleets-list { list-style: none; display: grid; gap: 10px; margin: 20px 0 26px; }
.fleets-list li {
  position: relative;
  padding-left: 26px;
  font-size: 0.93rem;
  color: rgba(255,255,255,0.88);
  line-height: 1.6;
}
/* Misma tilde de bordes que la libreta, y por el mismo motivo: los
   subconjuntos de fuente no traen los caracteres de símbolos (P-005). */
.fleets-list li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 6px;
  height: 11px;
  border: solid #c5ec7f;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ── SERVICES ── */
.services {
  padding: 88px 0 148px;
  background: var(--blanco);
  background-image: radial-gradient(circle, rgba(18,75,143,0.045) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  position: relative;
}
.services::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 66px;
  background: var(--gris-bg);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.service-card {
  background: var(--blanco);
  border: 1px solid var(--gris-claro);
  border-top: 3px solid var(--azul);
  padding: 26px 22px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
  transition: border-color 0.2s, transform 0.2s;
}
.service-card:hover {
  border-color: var(--azul);
  transform: translateY(-3px);
}
.service-icon {
  width: 44px;
  height: 44px;
  background: var(--gris-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: background 0.2s;
}
.service-card:hover .service-icon { background: var(--azul); }
.service-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--azul);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.2s;
}
.service-card:hover .service-icon svg { stroke: var(--blanco); }
.service-card-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--azul-dark);
  margin-bottom: 8px;
  line-height: 1.3;
}
.service-card p { font-size: 0.8rem; color: var(--gris-medio); line-height: 1.55; }

/* ── BRANDS STRIP ──
   Rediseño (P-062): logos en el azul de la casa. Las tres marcas foco,
   fijas y más grandes; las demás pasan en una cinta continua, al estilo
   de la franja de clientes de Aurora. La cinta lleva el grupo de logos
   dos veces y su posición se toma módulo el ancho de un grupo, así el
   empalme no se ve.
   La mueve sitio.js: avanza sola, se frena con el mouse encima o con el
   foco del teclado, y se puede arrastrar (o deslizar con el dedo o el
   trackpad, o correr con las flechas) para los dos lados.
   Sin JavaScript o con movimiento reducido no se mueve: los logos quedan
   en filas y el grupo repetido no se muestra. */
.brands-strip {
  background: var(--gris-bg);
  border-top: 1px solid var(--gris-claro);
  border-bottom: 1px solid var(--gris-claro);
  padding: 34px 0 30px;
  overflow: hidden;
}
.brands-strip-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 22px 40px;
}
.brands-intro {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--azul);
  white-space: nowrap;
}
.brands-intro::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--verde);
  flex-shrink: 0;
}
.brands-foco {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 44px;
  flex-wrap: wrap;
}
.brands-foco img { height: 52px; width: auto; }
/* En escritorio las marcas principales ocupan toda la fila, así quedan en el
   centro de la página y no en el de su columna; el rótulo queda a la
   izquierda, en la misma fila. */
@media (min-width: 769px) {
  .brands-strip-inner > .brands-intro:first-child { grid-row: 1; grid-column: 1; }
  .brands-foco { grid-row: 1; grid-column: 1 / -1; }
  .brands-intro--secondary { grid-row: 2; grid-column: 1; }
  .brands-cinta { grid-row: 2; grid-column: 2; }
}
.brands-cinta {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}
.brands-ventana {
  overflow: hidden;
  flex: 1;
  min-width: 0;
  /* Los logos aparecen y se van por los bordes, sin corte seco. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.brands-pista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 40px;
}
.brands-grupo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 40px;
}
.brands-grupo img { height: 30px; width: auto; }
/* Dodge es un logotipo apaisado: a 30 px de alto dominaba la fila. */
.brands-grupo img.logo-ancho { height: 18px; }
.brands-grupo[aria-hidden="true"] { display: none; }
:where(.js) .brands-ventana {
  cursor: grab;
  /* El desplazamiento vertical de la página sigue siendo del navegador;
     el horizontal lo toma la cinta. */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
:where(.js) .brands-ventana.arrastrando { cursor: grabbing; }
:where(.js) .brands-ventana img { -webkit-user-drag: none; pointer-events: none; }
:where(.js) .brands-pista {
  flex-wrap: nowrap;
  width: max-content;
  gap: 0;
  will-change: transform;
}
:where(.js) .brands-grupo { flex-wrap: nowrap; padding-right: 48px; gap: 48px; }
:where(.js) .brands-grupo[aria-hidden="true"] { display: flex; }

/* ── SERVICE TABS ── */
.services-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 36px;
}
/* Marcas de las direcciones #servicios-<pestaña>: sin tamaño, arriba de
   todo de la fila de pestañas, fuera del acomodo de la fila. */
.services-tabs { position: relative; }
.ancla-pestana { position: absolute; top: 0; left: 0; }
.tab-btn {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--blanco);
  color: var(--azul);
  border: 1.5px solid var(--gris-claro);
  padding: 11px 18px;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.tab-btn:hover { border-color: var(--azul); }
.tab-btn.active {
  background: var(--azul);
  color: #fff;
  border-color: var(--azul);
}
.tab-panel { display: none; }
/* Tres columnas en escritorio para las cinco pestañas (decisión de Ramiro,
   2026-09-28). Cuatro de las cinco tienen tres tarjetas y en una grilla de
   cuatro dejaban un hueco a la derecha. Mecánica, que tiene cinco, queda
   en 3 + 2, que es exactamente como ya estaba: antes lo conseguía una
   regla propia con :where(#tab-mecanica), y ahora sale de esta base sin
   necesitar excepción.
   Esto reemplaza la decisión de P-012 de dejar "Repuestos" en cuatro
   columnas, tomada cuando esa pestaña tenía cuatro tarjetas.
   Con el cambio quedaron sin objeto **cinco** reglas, que se borraron: las
   tres de #tab-repuestos que implementaban P-012, la de #tab-mecanica y la
   de .tab-panel.active del media query de 1200 px, que pasó a decir lo
   mismo que esta base. Ramiro no enumeró ninguna de las cinco: las tres
   primeras tenían que caer para que la instrucción se cumpliera, y las dos
   últimas quedaron inertes. El borrado es decisión propia: ver P-048.
   (La de #tab-mecanica llevaba el id dentro de :where() para pesar lo
   mismo que .tab-panel.active, y que los media queries de 768 y 480 px la
   ganaran por orden sin repetirla en cada uno. Se anota acá porque ese
   motivo vivía en el comentario que se fue con ella.) */
.tab-panel.active {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* ── CONTACT CTA ── */
/* Cierre del rediseño: la fachada (F-07) a todo el ancho, difuminada, con
   el azul encima. Arriba la capa es azul pleno, para que empalme con el
   remate diagonal de la zona de cobertura, que es --azul (P-025). */
.contact-cta { position: relative; overflow: hidden; background: var(--azul); padding: 104px 0 96px; }
.contact-fondo img {
  position: absolute;
  inset: -24px;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  object-fit: cover;
  filter: blur(10px) saturate(0.9);
  z-index: 0;
}
/* Capa azul por encima de la foto (la foto va antes en el HTML). */
.contact-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, var(--azul) 0, rgba(18,75,143,0.84) 140px, rgba(13,56,112,0.88) 100%);
}
.contact-cta .container { position: relative; z-index: 2; }
.contact-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.contact-map {
  margin-top: 32px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.12);
}
.contact-map iframe {
  display: block;
  width: 100%;
  height: 260px;
  border: 0;
}
/* F-07, junto al mapa (Tarea 12): el frente del taller, para que quien
   llega por primera vez lo reconozca. Misma altura que el mapa, con la
   esquina inferior derecha cortada en diagonal, como el cartel. */
.contact-foto img {
  display: block;
  width: 100%;
  height: 260px;
  margin-top: 32px;
  object-fit: cover;
  object-position: center 40%;
  border-radius: 12px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), calc(100% - 48px) 100%, 0 100%);
}
/* Las tres redes, una al lado de la otra, con separación suficiente para
   que cada enlace sea un objetivo táctil propio. */
.contact-redes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}
.contact-redes a { text-decoration: underline; text-underline-offset: 3px; }
.contact-text h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 3rem);
  text-transform: uppercase;
  color: var(--blanco);
  margin-bottom: 16px;
  line-height: 1.2;
}
.contact-text p { font-size: 1rem; color: rgba(255,255,255,0.8); line-height: 1.75; margin-bottom: 28px; }
.btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  background: var(--azul);
  color: var(--blanco);
  border: 2px solid var(--blanco);
  padding: 14px 30px;
  border-radius: var(--radius);
  transition: background 0.2s, transform 0.15s;
}
.btn-wa:hover { background: var(--azul-dark); transform: translateY(-2px); }
.btn-wa:focus-visible { background: var(--azul-dark); }
.btn-wa svg { width: 22px; height: 22px; fill: var(--blanco); flex-shrink: 0; }
.contact-data { display: flex; flex-direction: column; gap: 18px; }
.contact-item { display: flex; align-items: center; gap: 14px; font-size: 0.95rem; color: rgba(255,255,255,0.82); }
.contact-item-icon {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-item-icon svg { width: 20px; height: 20px; fill: none; stroke: var(--verde); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.contact-item-label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* 80 %: sobre la fachada difuminada del cierre, al 64 % algunos rótulos
     quedaban debajo de 4,5:1 según la parte de la foto que les tocara. */
  color: rgba(255,255,255,0.8);
  margin-bottom: 2px;
}
.contact-item strong { color: var(--blanco); font-weight: 500; font-family: 'Roboto', sans-serif; }

/* ── FOOTER ── */
footer { background: var(--azul-dark); padding: 60px 0 0; position: relative; overflow: hidden; }
/* Las letras de la marca, gigantes y casi transparentes, cortadas por el
   borde inferior (Holt). Decorativas: ocultas a lectores de pantalla. */
.footer-marca {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(6rem, 26vw, 22rem);
  line-height: 0.78;
  letter-spacing: -0.04em;
  color: rgba(255,255,255,0.06);
  margin: 28px 0 -0.06em;
  user-select: none;
  white-space: nowrap;
}
.footer-accent-bar {
  height: 4px;
  background: linear-gradient(90deg, var(--verde) 0%, var(--azul-light) 60%, var(--verde) 100%);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
.footer-brand img { height: 52px; width: 52px; object-fit: contain; margin-bottom: 14px; }
.footer-brand-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: var(--blanco);
  margin-bottom: 3px;
}
.footer-tagline { font-size: 0.88rem; color: rgba(255,255,255,0.55); font-style: italic; line-height: 1.55; }
.footer-col-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--verde);
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col li a { font-size: 0.87rem; color: rgba(255,255,255,0.62); transition: color 0.2s; }
.footer-col li a:hover { color: var(--blanco); }
.footer-col p { font-size: 0.87rem; color: rgba(255,255,255,0.62); line-height: 1.7; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-bottom p { font-size: 0.8rem; color: rgba(255,255,255,0.55); }

/* ── ANIMATIONS ── */
/* Solo con la clase .js en <html>, que pone el script del <head>: si el
   JavaScript no corre, el contenido se ve igual, sin animación. La clase
   va dentro de :where() para no sumar especificidad: con .js a secas,
   .fade-in.visible le ganaba a .t-card:hover y las reseñas dejaban de
   levantarse al pasar el mouse. */
:where(.js) .fade-in { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
:where(.js) .fade-in.visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }

/* ── TESTIMONIALS ── */
.testimonials {
  background-color: var(--gris-bg);
  background-image: radial-gradient(circle, rgba(18,75,143,0.07) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  padding: 88px 0 148px;
  position: relative;
}
/* Pintado de --blanco porque la Tarea 11 metió la zona de cobertura
   debajo, que es blanca. Antes iba en --azul, por contacto. */
.testimonials::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 66px;
  background: var(--blanco);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

/* ── ZONA DE COBERTURA ──
   Sección corta: un encabezado y un párrafo centrado. El remate va en
   --azul, que es el fondo de contacto, la sección de abajo. */
.coverage {
  background: var(--blanco);
  padding: 88px 0 148px;
  position: relative;
}
.coverage::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 66px;
  background: var(--azul);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.coverage-text {
  max-width: 860px;
  font-size: clamp(1.15rem, 2.1vw, 1.5rem);
  color: var(--gris);
  line-height: 1.6;
}
/* Texto que se llena al bajar: solo con JavaScript (la clase .llenando la
   pone el script). Sin él, el párrafo se ve completo en su color. */
/* Gris de partida: el más claro que llega a 4,5:1 sobre blanco (#767676,
   4,54:1). Así ninguna palabra queda ilegible mientras se llena. */
.llenando .palabra { color: #767676; transition: color 0.35s ease; }
.llenando .palabra.llena { color: var(--gris); }

/* Mapa de cobertura (Holt): el texto a la izquierda y el mapa a la
   derecha. El SVG lo genera tools/generar-mapa-cobertura.mjs. */
.coverage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 48px;
  align-items: center;
}
.coverage-mapa { margin: 0; }
.mapa { display: block; width: 100%; height: auto; }
.mapa-punto { fill: var(--azul); stroke: var(--blanco); stroke-width: 2; }
.mapa-punto.es-principal { fill: var(--verde); stroke: var(--azul-dark); }
.mapa-taller circle { fill: var(--azul); stroke: var(--blanco); stroke-width: 3; }
.mapa-taller .mapa-pulso { fill: var(--azul); stroke: none; transform-box: fill-box; transform-origin: center; animation: pulso-mapa 2.4s ease-out infinite; }
/* Mapa de cobertura con base geográfica (OpenStreetMap). */
.mapa-caja { position: relative; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%); }
.mapa-tierra { fill: #eef1f4; }
.mapa-limite-depto { fill: none; stroke: #c3ccd6; stroke-width: 1.2; stroke-dasharray: 5 4; }
.mapa-limite-prov { fill: none; stroke: #a9b5c3; stroke-width: 2; stroke-dasharray: 10 4 2 4; }
.mapa-rio { fill: none; stroke: #9cc3e8; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mapa-rio--principal { stroke: #7fb0e0; stroke-width: 3.5; }
.mapa-tren { fill: none; stroke: #9aa4af; stroke-width: 1.3; stroke-dasharray: 2 3; }
.mapa-ruta-borde { fill: none; stroke: #c5ced9; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.mapa-ruta { fill: none; stroke: #ffffff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mapa-ruta-borde.mapa-ruta--troncal { stroke: #b3bfcc; stroke-width: 8; }
.mapa-ruta.mapa-ruta--troncal { stroke: #fff6d6; stroke-width: 5; }
.mapa-radio { fill: none; stroke: var(--azul); stroke-width: 2; stroke-dasharray: 8 7; opacity: 0.55; }
.mapa-atribucion { position: absolute; right: 46px; bottom: 6px; pointer-events: none; white-space: nowrap; font-size: 12px; color: var(--gris-medio); }
.mapa-norte { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: var(--blanco); border: 1.5px solid var(--gris-claro); border-radius: 50%; }
@keyframes pulso-mapa { from { opacity: 0.5; transform: scale(1); } to { opacity: 0; transform: scale(3.2); } }
/* Nombres en HTML sobre el mapa, de tamaño fijo: nunca bajan de 12 px.
   El lugar de cada uno lo eligió el generador para que no se pisen. */
.mapa-et, .mapa-km, .mapa-norte {
  position: absolute;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 0 3px var(--blanco), 0 0 3px var(--blanco), 0 0 2px var(--blanco);
}
/* Cada nombre lleva un fondo blanco translúcido de etiqueta: así se lee igual
   cuando cruza una ruta, un río o un límite de la base. */
.mapa-et { font: 400 12px/15px 'Roboto', sans-serif; color: #4a4f55; background: rgba(255,255,255,0.82); padding: 0 3px; border-radius: 2px; }
.mapa-et.es-principal { font: 800 13px/17px 'Montserrat', sans-serif; color: var(--azul-dark); }
.mapa-km { font: 600 12px/1 'Roboto', sans-serif; color: var(--azul); transform: translate(-50%, -50%); }
.mapa-norte { font: 800 14px/1 'Montserrat', sans-serif; color: var(--azul); transform: translate(-50%, -50%); }
/* El generador pone el desplazamiento de cada nombre: --td en escritorio y
   --tm (solo las principales) en pantallas más angostas. */
.mapa-et { transform: var(--td); }
/* La lista completa: en escritorio solo para lectores de pantalla (el
   mapa ya muestra los 42 nombres); en pantallas más angostas, visible. */
.mapa-lista {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Los puntos y los nombres aparecen de adentro hacia afuera (--i es el
   orden por distancia) cuando el mapa entra en pantalla. Sin JavaScript
   se ven todos de entrada. */
:where(.js) .coverage-mapa.fade-in { opacity: 1; transform: none; }
:where(.js) .coverage-mapa .mapa-punto { opacity: 0; transform: scale(0.3); transform-box: fill-box; transform-origin: center; transition: opacity 0.4s, transform 0.4s cubic-bezier(.2,.7,.2,1.4); transition-delay: calc(var(--i) * 45ms); }
:where(.js) .coverage-mapa .mapa-et { opacity: 0; transition: opacity 0.4s; transition-delay: calc(var(--i) * 45ms + 150ms); }
:where(.js) .coverage-mapa.visible .mapa-punto { opacity: 1; transform: none; }
:where(.js) .coverage-mapa.visible .mapa-et { opacity: 1; }
/* Por debajo de 1200 px el mapa se achica: quedan solo los nombres de
   las 10 principales, con el acomodo calculado para celular, y la lista
   completa pasa a verse debajo. */
@media (max-width: 1199px) {
  .mapa-et:not(.es-principal) { display: none; }
  .mapa-et.es-principal { font: 700 12px/15px 'Roboto', sans-serif; }
  .mapa-et.es-principal { transform: var(--tm); }
  .mapa-lista {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    list-style: none;
    margin-top: 20px;
    columns: 3 120px;
    column-gap: 16px;
    font-size: 0.8rem;
    line-height: 1.7;
    color: var(--gris-medio);
  }
}
@media (max-width: 900px) {
  .coverage-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
.google-badge-fila { display: flex; }
.google-badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--blanco);
  border-radius: 100px;
  padding: 10px 22px 10px 14px;
  box-shadow: 0 2px 20px rgba(18,75,143,0.12);
  margin-bottom: 52px;
}
.google-score-num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 1.7rem;
  color: var(--gris);
  line-height: 1;
}
.google-stars-row { display: flex; gap: 1px; align-items: center; }
.g-star { color: #FBBC04; font-size: 1.1rem; line-height: 1; }
/* Estrellas en SVG: mismo ancho que ocupaba el carácter ★ que reemplazan, para que nada alrededor se mueva. */
.g-star, .t-star { display: block; height: 1em; fill: currentColor; flex-shrink: 0; }
.g-star { width: 14.671875px; }
.t-star { width: 13.328125px; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.google-count-text { font-size: 0.8rem; color: var(--gris-medio); white-space: nowrap; }
/* Dos por dos en escritorio (Tarea 10): con cuatro reseñas, tres columnas
   dejaban una tarjeta suelta abajo. */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 44px;
}
.t-card {
  background: var(--blanco);
  border: 1px solid var(--gris-claro);
  border-top: 3px solid var(--azul);
  padding: 26px 22px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.25s, border-color 0.25s;
}
.t-card:hover {
  transform: translateY(-4px);
  border-color: var(--azul);
}
.t-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.t-stars { display: flex; gap: 2px; }
.t-star { color: #FBBC04; font-size: 1rem; line-height: 1; }
.t-google-g { opacity: 0.45; flex-shrink: 0; }
.t-text {
  font-size: 0.88rem;
  color: var(--gris-medio);
  line-height: 1.72;
  flex: 1;
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.t-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--gris-claro);
}
.t-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--blanco);
  flex-shrink: 0;
}
.t-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--azul);
  line-height: 1.2;
}
.t-date { font-size: 0.75rem; color: var(--gris-medio); }
.testimonials-actions {
  display: flex;
  justify-content: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}
.btn-google-review {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  background: var(--blanco);
  color: var(--gris);
  border: 2px solid var(--gris-claro);
  padding: 13px 24px;
  border-radius: var(--radius);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.btn-google-review:hover {
  border-color: var(--azul);
  box-shadow: 0 4px 16px rgba(18,75,143,0.12);
  transform: translateY(-1px);
}

/* ── RESPONSIVE ── */
@media (max-width: 1200px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 900px) {
  /* Foto arriba y pasos abajo: a partir de acá las dos columnas no entran. */
  .how-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  /* Ídem la libreta: texto arriba y foto abajo. */
  .notebook-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  /* Ídem la casa de repuestos: foto arriba y texto abajo. */
  .parts-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .contact-inner { grid-template-columns: 1fr; gap: 44px; }
  .hero-stats-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-item:nth-child(2) { border-right: none; }
}
/* El menú de escritorio mide 668,5 px fijos y no se achica: el que cede es
   el logo, que se planta en 97,6 px. Con el ítem "Flotas" que agrega P-032,
   el borde del botón cae en 798,1 px, así que por debajo de 798 la página
   desbordaba y entre 798 y 830 el botón quedaba pegado al borde, sin el
   aire de 32 px del contenedor. Decisión de Ramiro (2026-09-28): las dos
   cosas juntas, el corte del menú móvil hasta 830 px y el espaciado más
   compacto por debajo de 1000 px. Medido de 320 a 1300 px de a 1 px: cero
   desbordes y ningún ancho con el menú sin su aire. */
/* Paso intermedio hasta 1200 px, por el ítem "Repuestos": el hueco entre
   enlaces baja de 32 a 22 px antes del modo compacto de Ramiro (< 1000 px). */
@media (max-width: 1200px) {
  .navbar-links { gap: 22px; }
}
/* Con "Repuestos" (P-059) el menú suma un ítem: en el modo compacto de
   Ramiro, además del hueco menor, la letra baja un poco y el botón se angosta,
   para que todo entre desde 831 px sin cambiar los cortes. */
@media (max-width: 1000px) {
  .navbar-links { gap: 14px; }
  .navbar-links a { font-size: 0.8rem; }
  .btn-cta { padding: 10px 16px; }
}
/* Menú móvil hasta 900 px: decisión de Ramiro del 2026-10-07 (P-069), al
   sumar "Repuestos". Con 8 ítems, entre 831 y ~860 px el menú de escritorio
   no entraba y el nombre del logo se salía del menú. Antes el corte era
   830 px (2026-09-28). */
@media (max-width: 900px) {
  .navbar-links { display: none; }
  .navbar-toggle { display: flex; }
}
@media (max-width: 768px) {
  .tab-panel.active { grid-template-columns: repeat(2, 1fr); }
  .brands-strip-inner { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .brands-foco { gap: 28px; }
  .brands-foco img { height: 36px; }
  .brands-intro + .brands-foco, .brands-intro + .brands-cinta { margin-bottom: 10px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { display: grid; grid-template-columns: auto 1fr; gap: 0 16px; align-items: start; }
  .footer-brand img { grid-row: 1 / 4; width: 44px; height: 44px; }
  .footer-brand picture { grid-row: 1 / 4; }
  .section-title { font-size: 1.65rem; }
}
@media (max-width: 480px) {
  .container { padding: 0 20px; }
  /* .container pisa el padding de .hero-content (mismo peso, regla
     posterior): se repone el aire de arriba y abajo del inicio. */
  .hero .hero-content { padding-top: 56px; padding-bottom: 96px; }
  .tab-panel.active { grid-template-columns: 1fr; }
  .how-step { padding: 20px 18px 20px 70px; }
  .how-step::before { left: 16px; font-size: 1.7rem; }
  .hero-stats-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-ctas { flex-direction: column; }
  .btn-primary, .btn-outline { justify-content: center; }
  .footer-bottom { flex-direction: column; gap: 6px; text-align: center; }
  .contact-inner { gap: 36px; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .google-badge { flex-wrap: wrap; justify-content: center; max-width: 100%; row-gap: 4px; }
  .google-count-text { flex-basis: 100%; text-align: center; }
}
/* Por debajo de 390 px, el número de los contadores se achica con el ancho de la pantalla:
   de 1,9rem a 390 px hasta 1,4rem a 320 px, para que las palabras actuales entren enteras.
   overflow-wrap: anywhere (en .stat-num) queda como red para textos que no entren de ninguna forma. */
@media (max-width: 389.98px) {
  .stat-num { font-size: clamp(1.4rem, 11.43vw - 0.886rem, 1.9rem); }
}

/* ══════════════════════ PÁGINAS DE REPUESTOS Y FLOTAS ══════════════════════
   Mismo lenguaje que la home: planos azules, cortes diagonales, mayúsculas
   contundentes. Cada cambio de color entre secciones lleva su remate
   diagonal, del color de la sección de abajo (P-025, P-045). */

/* Encabezado de página: plano azul con el borde inferior cortado en
   diagonal, con el mismo ángulo que los remates. */
.pagina-hero {
  background: var(--azul-hero);
  color: var(--blanco);
  padding: 80px 0 136px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 66px), 0 100%);
}
.pagina-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
}
.pagina-hero h1 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(2.3rem, 5vw, 4rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.98;
  margin-bottom: 26px;
  animation: sube-titulo 0.7s ease-out both;
}
.pagina-hero p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.88);
}
.pagina-hero p + p { margin-top: 14px; }
.pagina-hero .btn-primary { border: 2px solid var(--blanco); margin-top: 30px; }
.pagina-hero .img-slot { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.4); }
.pagina-hero .img-slot span { color: var(--blanco); }

/* Remate genérico: la sección lleva aire abajo y una diagonal del color de
   la sección siguiente (--remate). */
.con-remate { position: relative; padding-bottom: 148px; }
.con-remate::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 66px;
  background: var(--remate);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

/* ── Repuestos: categorías ── */
.categorias { background: var(--blanco); padding-top: 40px; }
.categorias.con-remate { --remate: var(--gris-bg); }
.categorias-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
/* Cuatro rubros (P-077): en anchos medios van de a dos. */
@media (max-width: 1200px) {
  .categorias-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.categoria {
  position: relative;
  background: var(--gris-bg);
  border-top: 3px solid var(--azul);
  padding: 32px 28px 30px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
}
.categoria .service-icon { background: var(--blanco); }
.categoria-num {
  position: absolute;
  top: 22px;
  right: 26px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 2.4rem;
  line-height: 1;
  color: rgba(18,75,143,0.12);
}
.categoria-titulo {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--azul-dark);
  margin-bottom: 10px;
}
.categoria p { font-size: 0.95rem; line-height: 1.65; color: var(--gris-medio); }

/* ── Repuestos: deslizante de productos (HB Body) ── */
.productos { background: var(--gris-bg); padding-top: 72px; --remate: var(--azul); }
.productos-header {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 32px;
}
.productos-header .section-title { flex: 1; margin-bottom: 0; }
.productos-flechas { display: none; gap: 8px; flex-shrink: 0; }
:where(.js) .productos-flechas { display: flex; }
.productos-flecha {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blanco);
  border: 1.5px solid var(--azul);
  color: var(--azul);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, opacity 0.2s;
}
.productos-flecha svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.productos-flecha:hover { background: var(--azul); color: var(--blanco); }
.productos-flecha:focus-visible { outline-color: var(--azul-dark); }
.productos-flecha[disabled] { opacity: 0.35; cursor: default; background: var(--blanco); color: var(--azul); }
/* La fila arranca alineada con el contenedor y se va por el borde derecho,
   para que se note que sigue. */
.productos-pista {
  --margen: max(32px, calc((100% - 1200px) / 2 + 32px));
  list-style: none;
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margen);
  padding: 6px var(--margen) 28px;
  scrollbar-width: thin;
  scrollbar-color: var(--azul) var(--gris-claro);
}
.productos-pista:focus-visible { outline-offset: -3px; }
.producto {
  flex: 0 0 clamp(250px, 24vw, 290px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--blanco);
  border-top: 3px solid var(--azul);
  padding: 18px 18px 22px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}
.producto .img-slot { margin-bottom: 6px; padding: 10px; overflow: hidden; }
/* Hueco de la foto del producto mientras no llega (P-077): "Próximamente"
   cruzado en diagonal, como una faja. */
.producto .img-slot .proximamente {
  display: block;
  flex: 0 0 140%;
  padding: 8px 0;
  transform: rotate(-24deg);
  background: var(--azul);
  color: var(--blanco);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-align: center;
}
.producto-cat {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-medio);
}
.producto-nombre {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--azul-dark);
}
.producto-num { font-size: 0.75rem; color: var(--gris-medio); font-variant-numeric: tabular-nums; }
/* El ícono de WhatsApp de los botones de estas páginas viene sin tamaño. */
.btn-primary svg { width: 18px; height: 18px; flex-shrink: 0; fill: currentColor; }
.producto-btn {
  margin-top: auto;
  justify-content: center;
  font-size: 0.85rem;
  padding: 12px 16px;
}
.productos-pista + * { margin-top: 0; }

/* ── Flotas: cifras, condiciones y casos ── */
.flotas-cifras .stat-label { max-width: 26ch; }
.flotas-cifras-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.condiciones { background: var(--blanco); padding-top: 88px; --remate: var(--gris-bg); }
.condiciones-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.condicion {
  background: var(--blanco);
  border: 1px solid var(--gris-claro);
  border-left: 4px solid var(--verde);
  padding: 28px 26px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}
.condicion p {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.4;
  color: var(--azul-dark);
}
.casos { background: var(--gris-bg); padding-top: 88px; --remate: var(--azul); }
.casos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 20px;
}
.caso {
  background: var(--blanco);
  border-top: 3px solid var(--azul);
  padding: 26px 26px 28px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}
.caso-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.caso-num { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 1.6rem; line-height: 1; color: var(--azul); }
.caso-sector {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--azul);
  background: var(--gris-bg);
  padding: 5px 10px;
}
.caso-datos { display: grid; gap: 14px; }
.caso-dato dt {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris-medio);
  margin-bottom: 2px;
}
.caso-dato dd { font-size: 0.95rem; line-height: 1.45; color: var(--gris); }
.caso-dato--grande dd {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--azul);
}
/* En flotas, debajo de la libreta va la zona de cobertura (blanca), no la
   casa de repuestos como en la home. */
.pagina-flotas .notebook::after { background: var(--blanco); }

@media (max-width: 900px) {
  .pagina-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .categorias-grid, .condiciones-grid { grid-template-columns: minmax(0, 1fr); }
  .flotas-cifras-inner { grid-template-columns: minmax(0, 1fr); }
  .flotas-cifras .stat-item { border-right: none; border-bottom: 1px solid var(--gris-claro); }
  .flotas-cifras .stat-item:last-child { border-bottom: none; }
  .flotas-cifras .stat-label { max-width: none; }
}
@media (max-width: 600px) {
  .productos-header { flex-wrap: wrap; }
  .productos-header .section-title { flex-basis: 100%; }
  .productos-header .section-title::after { display: none; }
}
@media (max-width: 480px) {
  .pagina-hero { padding-top: 56px; padding-bottom: 112px; }
  .productos-pista { --margen: 20px; }
}

/* ── MOVIMIENTO REDUCIDO ──
   Quien pidió reducir el movimiento en su sistema: sin aparición al
   desplazarse, sin desplazamiento suave y sin el levantamiento de botones
   y tarjetas al pasar el mouse. Va al final de la hoja a propósito: sus
   selectores pesan lo mismo que las reglas que anulan y ganan por orden. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  :where(.js) .fade-in,
  :where(.js) .fade-in.visible { opacity: 1; transform: none; transition: none; }
  .btn-cta:hover, .btn-primary:hover, .btn-wa:hover, .btn-google-review:hover,
  .service-card:hover, .t-card:hover { transform: none; }
  .hero-panel, .hero-franja, .hero-bg img, .hero-badge, .hero h1, .hero p, .hero-ctas, .pagina-hero h1 { animation: none; }
  .productos-pista { scroll-behavior: auto; }
  .mapa-taller .mapa-pulso { animation: none; opacity: 0; }
  :where(.js) .coverage-mapa .mapa-punto { opacity: 1; transform: none; transition: none; }
  /* Los nombres conservan su desplazamiento (--td/--tm): solo se anula la entrada. */
  :where(.js) .coverage-mapa .mapa-et { opacity: 1; transition: none; }
  /* La cinta de marcas queda quieta: logos en filas, sin la copia del
     empalme y sin arrastre. */
  :where(.js) .brands-pista { flex-wrap: wrap; width: auto; gap: 18px 40px; will-change: auto; }
  :where(.js) .brands-grupo { flex-wrap: wrap; padding-right: 0; gap: 18px 40px; }
  :where(.js) .brands-grupo[aria-hidden="true"] { display: none; }
  :where(.js) .brands-ventana { cursor: auto; touch-action: auto; }
  .brands-ventana { -webkit-mask-image: none; mask-image: none; }
}