/*
  ============================================================
  ARCHIVO: style.css
  EMPRESA: TRANSPORTES MONTERO LARA
  DESCRIPCIÓN: Hoja de estilos principal. Diseño minimalista,
               elegante, responsivo (mobile-first) y moderno.

  ESTRUCTURA DE ESTE ARCHIVO:
  1. Variables CSS (colores, fuentes, espaciados)
  2. Reset y estilos base
  3. Componentes reutilizables (botones, formularios)
  4. Navbar
  5. Hero Section
  6. Sección Vehículos
  7. Sección Galería
  8. Sección Políticas
  9. Cotizador
  10. Sección Contacto
  11. Footer
  12. Botón flotante WhatsApp
  13. Media Queries (responsivo)
  ============================================================
*/


/* ============================================================
   1. VARIABLES CSS GLOBALES
   Aquí defines la paleta de colores y tipografías del sitio.
   Al cambiar un valor aquí, se actualiza en toda la página.
   ============================================================ */
:root {
  /* ── PALETA DE COLORES PRINCIPAL ── */

  /* Fondos: blanco roto y grises muy suaves */
  --color-bg:           #F7F8FA;  /* Fondo principal de la página */
  --color-bg-alt:       #FFFFFF;  /* Fondo de tarjetas y secciones alternadas */
  --color-bg-section:   #EFF2F5;  /* Fondo de secciones con contraste suave */

  /* Azul pizarra: color principal de acento (botones, íconos, bordes activos) */
  --color-primary:      #4A7FA5;  /* Azul principal — elegante y profesional */
  --color-primary-lt:   #EBF3F9;  /* Versión muy clara del azul (fondos de íconos) */
  --color-primary-dk:   #3A6A8E;  /* Versión más oscura para hover de botones */

  /* Color secundario: tono dorado/arena muy suave para destacar */
  --color-secondary:    #8BA888;  /* Verde salvia suave — serenidad y naturaleza */
  --color-secondary-lt: #EDF2ED;  /* Versión clara del verde para fondos */

  /* Textos */
  --color-text:         #2C3E50;  /* Texto principal — casi negro, no agresivo */
  --color-text-muted:   #7F8C8D;  /* Texto secundario — gris medio */
  --color-text-light:   #BDC3C7;  /* Texto muy suave — notas al pie, hints */

  /* Bordes y divisores */
  --color-border:       #E2E8F0;  /* Bordes de tarjetas y separadores */
  --color-border-focus: #4A7FA5;  /* Borde azul al hacer focus en inputs */

  /* Estados */
  --color-success:      #5CB85C;  /* Verde para mensajes de éxito */
  --color-error:        #D9534F;  /* Rojo suave para errores de validación */

  /* ── TIPOGRAFÍAS ── */
  --font-display:  'Playfair Display', Georgia, serif; /* Para títulos grandes */
  --font-body:     'Inter', -apple-system, sans-serif; /* Para texto corriente */

  /* ── ESCALA DE TAMAÑOS DE FUENTE ── */
  --text-xs:   0.75rem;   /* 12px — notas muy pequeñas */
  --text-sm:   0.875rem;  /* 14px — labels y hints */
  --text-base: 1rem;      /* 16px — texto base del cuerpo */
  --text-lg:   1.125rem;  /* 18px — párrafos destacados */
  --text-xl:   1.25rem;   /* 20px — subtítulos */
  --text-2xl:  1.5rem;    /* 24px — títulos de tarjetas */
  --text-3xl:  1.875rem;  /* 30px — títulos de sección */
  --text-4xl:  2.25rem;   /* 36px — títulos grandes */
  --text-5xl:  3rem;      /* 48px — título del hero */
  --text-6xl:  3.75rem;   /* 60px — hero en pantallas grandes */

  /* ── ESPACIADOS CONSISTENTES ── */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* ── BORDES REDONDEADOS ── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 9999px;  /* Para pastillas y badges circulares */

  /* ── SOMBRAS ── */
  --shadow-sm:  0 1px 3px rgba(44, 62, 80, 0.08), 0 1px 2px rgba(44, 62, 80, 0.04);
  --shadow-md:  0 4px 12px rgba(44, 62, 80, 0.10), 0 2px 6px rgba(44, 62, 80, 0.06);
  --shadow-lg:  0 10px 30px rgba(44, 62, 80, 0.12), 0 4px 10px rgba(44, 62, 80, 0.06);
  --shadow-xl:  0 20px 50px rgba(44, 62, 80, 0.15);

  /* ── TRANSICIONES ── */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* ── ANCHO MÁXIMO DEL CONTENEDOR ── */
  --container-max: 1200px;
  --container-pad: var(--space-6); /* Padding lateral del contenedor */

  /* ── ALTURA DE LA NAVBAR ── */
  --navbar-h: 92px;
}


/* ============================================================
   2. RESET Y ESTILOS BASE
   Normaliza el comportamiento por defecto del navegador.
   ============================================================ */

/* Box-sizing: hace que padding y border no sumen al tamaño del elemento */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Scroll suave global para todos los saltos de ancla (#sección) */
html {
  scroll-behavior: smooth;
  font-size: 16px; /* Base para cálculos en rem */
}

/* Estilos base del cuerpo de la página */
body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased; /* Fuentes más nítidas en Mac/iOS */
  overflow-x: hidden; /* Evita scroll horizontal accidental */
  overflow-y: auto;
}

/* Anti-flash de i18n: oculta el body hasta que i18n.js aplique el idioma guardado */
html.i18n-loading body {
  visibility: hidden;
}

/* Campo honeypot anti-spam: invisible para personas, presente para bots */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Elimina el estilo por defecto de las listas */
ul, ol { list-style: none; }

/* Elimina el subrayado y hereda el color de texto en los enlaces */
a {
  text-decoration: none;
  color: inherit;
}

/* Imágenes responsivas por defecto */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Botones: elimina el estilo nativo del navegador */
button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font-body);
}

/* Inputs y select: hereda la fuente del body */
input, select, textarea {
  font-family: var(--font-body);
  font-size: var(--text-base);
}


/* ============================================================
   3. COMPONENTES REUTILIZABLES
   ============================================================ */

/* ── CONTENEDOR CENTRADO ── */
/* Se usa en todas las secciones para limitar el ancho y centrar el contenido */
.container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* ── CLASE UTILITARIA: OCULTAR ELEMENTO ── */
/* Se agrega/quita desde JavaScript para mostrar/ocultar secciones */
.hidden {
  display: none !important;
}

/* ── CABECERA DE SECCIÓN GENÉRICA ── */
/* Aplica a todas las secciones: eyebrow, título y descripción */
.section {
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}

.section__header {
  text-align: center;
  margin-bottom: var(--space-12);
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* Etiqueta pequeña sobre el título (ej: "Nuestra Flota") */
.section__eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-primary);
  background-color: var(--color-primary-lt);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}

/* Título principal de cada sección */
.section__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.25;
  margin-bottom: var(--space-4);
}

/* Descripción debajo del título de sección */
.section__desc {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* ── SISTEMA DE BOTONES ── */

/* Botón base: aplica a todos los botones */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: var(--text-base);
  letter-spacing: 0.01em;
  transition: all var(--transition-normal);
  white-space: nowrap;
}

/* Botón primario: azul principal, para acciones principales */
.btn--primary {
  background-color: var(--color-primary);
  color: #FFFFFF;
  border: 2px solid var(--color-primary);
}
.btn--primary:hover {
  background-color: var(--color-primary-dk);
  border-color: var(--color-primary-dk);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Botón secundario: gris suave para acciones secundarias */
.btn--secondary {
  background-color: var(--color-secondary);
  color: #FFFFFF;
  border: 2px solid var(--color-secondary);
}
.btn--secondary:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Botón fantasma: transparente con borde blanco (para el hero sobre fondo oscuro) */
.btn--ghost {
  background-color: transparent;
  color: #FFFFFF;
  border: 2px solid rgba(255, 255, 255, 0.6);
}
.btn--ghost:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: #FFFFFF;
}

/* Botón con solo borde (para tarjetas de vehículos) */
.btn--outline {
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}
.btn--outline:hover {
  background-color: var(--color-primary);
  color: #FFFFFF;
}

/* Botón cancelar: gris neutro discreto */
.btn--cancel {
  background-color: transparent;
  color: var(--color-text-muted);
  border: 2px solid var(--color-border);
}
.btn--cancel:hover {
  background-color: #FEF2F2;
  color: #991B1B;
  border-color: #FCA5A5;
}

/* Modificadores de tamaño */
.btn--sm  { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.btn--lg  { padding: var(--space-4) var(--space-8); font-size: var(--text-lg); }

/* Estado deshabilitado del botón */
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ── ESTILOS DE FORMULARIOS ── */

/* Grupo de campo (label + input) */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Etiqueta del campo */
.form-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.form-label i {
  color: var(--color-primary);
  font-size: 0.875rem;
}

/* Input de texto, número, email, datetime */
.form-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-alt);
  color: var(--color-text);
  font-size: var(--text-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none; /* Elimina el estilo nativo en algunos navegadores */
}
.form-input:focus {
  outline: none; /* Quitamos el feo borde azul nativo */
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(74, 127, 165, 0.12);
}
.form-input::placeholder {
  color: var(--color-text-light);
}

/* Texto de ayuda debajo del input */
.form-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}


/* ============================================================
   4. NAVBAR (BARRA DE NAVEGACIÓN)
   ============================================================ */

/* Contenedor principal de la navbar */
.navbar {
  position: fixed;       /* Se queda fija al hacer scroll */
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;         /* Siempre encima del resto del contenido */
  height: var(--navbar-h);
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);     /* Efecto de vidrio esmerilado moderno */
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--transition-normal);
}

/* Cuando el usuario hace scroll, se agrega esta clase desde JS */
.navbar--scrolled {
  box-shadow: var(--shadow-md);
}

/* Interior de la navbar: flex para alinear logo y menú */
.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: var(--space-8);
}

/* Logo / nombre de la empresa */
.navbar__logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  flex-shrink: 0; /* Evita que el logo se encoja en pantallas pequeñas */
}

/* Logo en imagen (assets/img/tml_logo_v3_horizontal.png) */
.navbar__logo-img {
  display: block;
  height: 78px;
  width: auto;
}

/* Menú de navegación (contenedor del ul y el CTA) */
.navbar__menu {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

/* Lista de enlaces del menú */
.navbar__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Enlace individual del menú */
.navbar__link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.navbar__link:hover,
.navbar__link.active {
  color: var(--color-primary);
  background-color: var(--color-primary-lt);
}

/* Botón CTA de la navbar ("Cotizar Viaje") */
.navbar__cta {
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-5);
}

/* ── SELECTOR DE IDIOMA (ES / EN / PT) ── */
.lang-switch {
  display: flex;
  background-color: var(--color-bg-section);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 3px;
  flex-shrink: 0;
}

.lang-switch__btn {
  min-width: 40px;
  min-height: 36px;
  padding: var(--space-1) var(--space-2);
  border-radius: calc(var(--radius-md) - 2px);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  transition: all var(--transition-fast);
}

.lang-switch__btn--active {
  background-color: var(--color-primary);
  color: #FFFFFF;
  box-shadow: var(--shadow-sm);
}

/* Ícono de globo: deja claro que el widget cambia el idioma */
.lang-switch__icon {
  display: flex;
  align-items: center;
  padding-left: var(--space-2);
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

/* ── CÍRCULO DE IDIOMA (solo móvil) ──
   Botón circular siempre visible junto al hamburguesa, para que el
   visitante note el cambio de idioma sin tener que abrir el menú. */
.lang-circle {
  position: relative;
  display: none; /* se muestra solo en móvil, ver media query */
}

.lang-circle__toggle {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background-color: var(--color-bg-section);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast);
}

.lang-circle__toggle:hover {
  background-color: var(--color-primary-lt);
}

.lang-circle__menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 150px;
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: none;
  flex-direction: column;
  z-index: 1100;
}

.lang-circle__menu--open {
  display: flex;
}

/* Sobrescribe el estilo compacto de .lang-switch__btn para verse
   como filas de un menú desplegable en vez de una píldora */
.lang-circle__option.lang-switch__btn {
  min-width: 0;
  width: 100%;
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  border-radius: 0;
  text-align: left;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
}

.lang-circle__option:not(:last-child) {
  border-bottom: 1px solid var(--color-border);
}

/* Botón hamburguesa para menú móvil (oculto en desktop) */
.navbar__toggle {
  display: none; /* Oculto en pantallas grandes */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: var(--space-2);
  background: none;
  border: none;
  cursor: pointer;
}
/* Las 3 líneas del ícono hamburguesa */
.navbar__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-text);
  border-radius: 2px;
  transition: all var(--transition-normal);
}


/* ============================================================
   5. HERO SECTION
   ============================================================ */

/* La sección hero ocupa toda la altura de la pantalla */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: var(--navbar-h); /* Compensa la altura de la navbar fija */
  overflow: hidden;

  /* Respaldo por si el video no carga (navegadores muy antiguos, error de red) */
  background-image: url('../img/PrincipalIMMG.png');
  background-size: cover;
  background-position: center;
}

/* Video de fondo del hero (assets/img/WEBTmonterolara.mp4) */
.hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay oscuro sobre el video: asegura legibilidad del texto blanco */
.hero__overlay {
  position: absolute;
  inset: 0; /* top, right, bottom, left = 0 */
  z-index: 0;
  background: linear-gradient(
    135deg,
    rgba(15, 23, 32, 0.86) 0%,
    rgba(26, 42, 58, 0.72) 55%,
    rgba(44, 62, 80, 0.60) 100%
  );
}

/* Contenido del hero (texto y botones) */
.hero__content {
  position: relative; /* Sobre el video y el overlay */
  z-index: 1;
  max-width: 750px;
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

/* Etiqueta bilingüe sobre el título */
.hero__eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-6);
}

/* Título principal del hero */
.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.15;
  margin-bottom: var(--space-4);
}

/* Cursiva en "de Santiago" para diferenciación tipográfica */
.hero__title em {
  font-style: italic;
  color: #A8C8E0; /* Azul claro suave: variante pastel del color primario */
}

/* Subtítulo bilingüe */
.hero__subtitle {
  font-size: var(--text-xl);
  color: rgba(255, 255, 255, 0.85);
  font-weight: 300;
  margin-bottom: var(--space-2);
}

/* Segunda línea de impacto */
.hero__tagline {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: var(--space-8);
}

/* Contenedor de los dos botones de acción */
.hero__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-10);
}

/* Indicadores de confianza en la parte inferior del hero */
.hero__trust {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
}

/* Cada indicador de confianza */
.hero__trust span {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.70);
}

.hero__trust i {
  color: #A8C8E0; /* Ícono en azul claro */
  font-size: 0.875rem;
}


/* ============================================================
   6. SECCIÓN DE VEHÍCULOS
   ============================================================ */

/* Fondo alternado para diferenciar secciones */
.vehicles {
  background-color: var(--color-bg-alt);
}

/* Cuadrícula de 3 columnas para las tarjetas de vehículos */
.vehicles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

/* ── TARJETA DE VEHÍCULO ── */
.vehicle-card {
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden; /* Para que la imagen respete el border-radius */
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  display: flex;
  flex-direction: column;
}

/* Efecto al pasar el cursor sobre la tarjeta */
.vehicle-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

/* Tarjeta destacada (Van — "Recomendado") */
.vehicle-card--featured {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  position: relative;
}

/* Contenedor de la imagen del vehículo */
.vehicle-card__img-wrap {
  position: relative;
  width: 100%;
  height: 220px;   /* Altura fija de la imagen en la tarjeta */
  overflow: hidden;
  background-color: var(--color-bg-section); /* Fondo gris mientras carga */
}

/* Imagen del vehículo */
.vehicle-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Recorta la imagen para que llene el contenedor */
  transition: transform var(--transition-slow);
}
.vehicle-card:hover .vehicle-card__img {
  transform: scale(1.04); /* Pequeño zoom al hacer hover */
}

/* Placeholder si la imagen no existe aún */
.vehicle-card__img-wrap--placeholder {
  background: linear-gradient(135deg, var(--color-bg-section) 0%, var(--color-border) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.vehicle-card__img-wrap--placeholder::after {
  content: '🚗'; /* Ícono temporal hasta colocar la foto real */
  font-size: 3rem;
  opacity: 0.3;
}

/* Badge/etiqueta sobre la imagen (Popular, Recomendado, Premium) */
.vehicle-card__badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  letter-spacing: 0.05em;
}

/* Badge azul para la tarjeta destacada */
.vehicle-card__badge--featured {
  background-color: var(--color-primary);
  color: #FFFFFF;
}

/* Cuerpo de la tarjeta (texto y specs) */
.vehicle-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1; /* Hace que todas las tarjetas tengan la misma altura */
}

/* Nombre del vehículo */
.vehicle-card__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text);
}

/* Descripción corta */
.vehicle-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* Lista de características (capacidad, maletas, etc.) */
.vehicle-card__specs {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.vehicle-card__specs li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.vehicle-card__specs i {
  width: 16px;
  color: var(--color-primary);
  font-size: 0.8rem;
}

/* Botón de la tarjeta (empujado al fondo con margin-top: auto) */
.vehicle-card__body .btn {
  margin-top: auto;
}


/* ============================================================
   7. GALERÍA DE VIAJES
   ============================================================ */

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

/* ── CARRUSEL ÚNICO (desktop y móvil) ──
   Las tarjetas se generan dinámicamente en script.js (renderGaleria) a
   partir de gallery.json, administrable desde admin.php. El mismo
   carrusel funciona en cualquier cantidad de fotos: en desktop se ven
   ~3 a la vez, en móvil 1, y siempre se puede deslizar con flechas,
   arrastre táctil o los puntos de abajo. */
.gallery__slider-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.gallery__track {
  display: flex;
  gap: var(--space-4);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* ── ÍTEM DE GALERÍA ── */
.gallery-item {
  position: relative;
  flex: 0 0 auto;
  width: calc(33.333% - var(--space-3));
  height: 340px;
  overflow: hidden;
  background-color: var(--color-bg-section);
  border-radius: var(--radius-lg);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.gallery-item:hover img {
  transform: scale(1.06);
}

.gallery-item--placeholder {
  background: linear-gradient(135deg, var(--color-bg-section), var(--color-border));
}
.gallery-item--placeholder::after {
  content: '📷';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  opacity: 0.2;
}

.gallery-item__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(26, 42, 58, 0.75));
  color: #FFFFFF;
  padding: var(--space-6) var(--space-4) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.gallery-item:hover .gallery-item__label {
  opacity: 1;
}

.gallery-item__label i {
  font-size: 0.875rem;
}

.gallery__arrow {
  display: flex;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.85);
  border: none;
  border-radius: var(--radius-full);
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background var(--transition-fast);
}

.gallery__arrow:hover {
  background: #FFFFFF;
}

.gallery__arrow--prev { left: var(--space-3); }
.gallery__arrow--next { right: var(--space-3); }

.gallery__dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.gallery__dot {
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
}

.gallery__dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  transition: all var(--transition-fast);
}

.gallery__dot--active::after {
  background: var(--color-primary);
  width: 24px;
}

/* ============================================================
   8. SECCIÓN POLÍTICAS Y GARANTÍAS
   ============================================================ */

.policies {
  background-color: var(--color-bg-alt);
}

/* Grid de 3 columnas para las tarjetas de política */
.policies__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

/* ── TARJETA DE POLÍTICA ── */
.policy-card {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg);
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.policy-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

/* Ícono de la política */
.policy-card__icon {
  width: 48px;
  height: 48px;
  background-color: var(--color-primary-lt);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: 1.25rem;
  margin-bottom: var(--space-4);
}

/* Título de la política */
.policy-card__title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-3);
  line-height: 1.4;
}

/* Texto de la política */
.policy-card__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* Partes bilingües en cursiva dentro del texto */
.policy-card__text em {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-primary);
  font-style: italic;
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
}


/* ============================================================
   9. COTIZADOR INTELIGENTE
   ============================================================ */

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

/* ── SEGUNDA FILA DEL COTIZADOR: pasajeros y maletas ── */
.quoter__extras {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding: var(--space-5);
  background-color: var(--color-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.number-input {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-bg-alt);
}

.number-input__btn {
  width: 38px;
  height: 42px;
  background: var(--color-bg-section);
  border: none;
  color: var(--color-text);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background var(--transition-fast);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.number-input__btn:hover {
  background: var(--color-primary-lt);
  color: var(--color-primary);
}

.number-input__field {
  border: none !important;
  box-shadow: none !important;
  text-align: center;
  font-weight: 600;
  padding: var(--space-2) var(--space-1) !important;
  width: 100%;
  background: transparent;
  appearance: textfield;
}

.number-input__field::-webkit-outer-spin-button,
.number-input__field::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quoter__note {
  margin-bottom: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.quoter__note-input {
  resize: none;
  line-height: 1.6;
}

.form-label__opcional {
  font-weight: 400;
  color: var(--color-text-light);
  font-size: var(--text-xs);
  margin-left: var(--space-1);
}


/* Tarjeta principal del cotizador: más ancha para alojar el mapa */
.quoter__card {
  max-width: 960px;
  margin: 0 auto;
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
}

/* Botón ocupa el 100% del form-group */
.btn--full {
  width: 100%;
  justify-content: center;
}

/* ── STEPPER DEL COTIZADOR (3 pasos) ── */

.stepper__progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.stepper__step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  color: var(--color-text-light);
  transition: color var(--transition-fast);
}

.stepper__step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  background-color: var(--color-bg-section);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.stepper__step-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: none;
}

.stepper__step--active,
.stepper__step--done {
  color: var(--color-text);
}

.stepper__step--active .stepper__step-num {
  background-color: var(--color-primary);
  color: #FFFFFF;
}

.stepper__step--done .stepper__step-num {
  background-color: var(--color-secondary);
  color: #FFFFFF;
}

/* Cada paso ocupa su contenido; el activo se muestra en flujo normal */
.stepper__panel {
  display: none;
  flex-direction: column;
  gap: var(--space-5);
  animation: fadeInUp 0.3s ease;
}

.stepper__panel--active {
  display: flex;
}

/* Botones del paso: en flujo normal (no fijos), para que el scroll-into-view
   nativo del input enfocado los deje siempre visibles sobre el teclado. */
.stepper__actions {
  display: flex;
  gap: var(--space-4);
  padding-top: var(--space-2);
}

.stepper__actions .btn {
  flex: 1;
  justify-content: center;
}

/* Indicador de cálculo automático de ruta */
.quoter__status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-primary);
}

/* ── MAPA DE GOOGLE MAPS ── */
.quoter__map-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-6);
  animation: fadeInUp 0.4s ease;
}

/* El div del mapa necesita altura fija para que Google Maps lo renderice */
.quoter__map {
  width: 100%;
  height: 380px;
  display: block;
  background-color: var(--color-bg-section);
}

/* Panel de estadísticas debajo del mapa */
.quoter__route-info {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-4) var(--space-6);
  background-color: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}

/* Cada stat: ícono + label + valor */
.route-stat {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.route-stat > i {
  font-size: 1.1rem;
  color: var(--color-primary);
  width: 20px;
  text-align: center;
}

.route-stat > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.route-stat__label {
  font-size: var(--text-xs);
  color: var(--color-text-light);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.route-stat__value {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  font-family: var(--font-display);
}

/* ── SELECTOR DE MONEDA ── */
.quoter__currency {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  background-color: var(--color-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.quoter__currency-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
}

/* Contenedor del switch CLP / USD */
.currency-switch {
  display: flex;
  background-color: var(--color-bg-section);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 3px;
}

/* Botón de moneda individual */
.currency-switch__btn {
  padding: var(--space-2) var(--space-4);
  border-radius: calc(var(--radius-md) - 2px);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  transition: all var(--transition-fast);
}

/* Botón activo (seleccionado) */
.currency-switch__btn--active {
  background-color: var(--color-primary);
  color: #FFFFFF;
  box-shadow: var(--shadow-sm);
}

/* ── RESULTADO DEL CÁLCULO ── */
.quoter__result {
  text-align: center;
  padding: var(--space-8) var(--space-6);
  background: linear-gradient(135deg, var(--color-primary-lt), rgba(139, 168, 136, 0.1));
  border-radius: var(--radius-lg);
  border: 1px solid rgba(74, 127, 165, 0.2);
  margin-bottom: var(--space-6);
  animation: fadeInUp 0.3s ease; /* Animación de entrada suave */
}

/* Etiqueta sobre el precio */
.quoter__result-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

/* Precio grande */
.quoter__result-price {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

/* Nota al pie del precio */
.quoter__result-note {
  font-size: var(--text-xs);
  color: var(--color-text-light);
}

/* Animación fadeInUp para el resultado */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ============================================================
   10. SECCIÓN DE CONTACTO
   ============================================================ */

.contact {
  background-color: var(--color-bg-alt);
}

/* Resumen del viaje cotizado (arriba del formulario) */
.contact__summary {
  max-width: 700px;
  margin: 0 auto var(--space-8);
  background: linear-gradient(135deg, var(--color-primary-lt), var(--color-secondary-lt));
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  border: 1px solid rgba(74, 127, 165, 0.2);
  font-size: var(--text-sm);
  color: var(--color-text);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

/* ── FORMULARIO DE CONTACTO ── */
.contact__form {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Fila del formulario: 2 columnas lado a lado */
.contact__form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

/* ── SELECTOR DE MÉTODO DE CONTACTO ── */
.contact__method-selector {
  display: flex;
  gap: var(--space-3);
}

/* Cada opción de método (radio button personalizado) */
.method-option {
  flex: 1;
  cursor: pointer;
}

/* Ocultamos el radio button nativo */
.method-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Etiqueta visual del método */
.method-option__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  transition: all var(--transition-fast);
  background-color: var(--color-bg);
}

/* Estado activo del método seleccionado */
.method-option input[type="radio"]:checked + .method-option__label {
  border-color: var(--color-primary);
  background-color: var(--color-primary-lt);
  color: var(--color-primary);
}

/* Ícono de WhatsApp en verde */
.method-option .fa-whatsapp {
  color: #25D366;
}

.contact__form-submit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.contact__form-submit .btn {
  width: 100%;
  max-width: 380px;
  justify-content: center;
}

/* Texto legal pequeño debajo del botón */
.contact__disclaimer {
  font-size: var(--text-xs);
  color: var(--color-text-light);
  text-align: center;
}


/* ============================================================
   11. FOOTER
   ============================================================ */

.footer {
  background-color: var(--color-text); /* Fondo oscuro (casi negro) */
  color: rgba(255, 255, 255, 0.65);
}

/* Footer más compacto: 2 columnas, brand izquierda, contacto derecha */
.footer__inner {
  padding-top: var(--space-8);
  padding-bottom: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

/* Contacto alineado a la derecha */
.footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: right;
}

.footer__contact p {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.footer__contact i {
  width: 16px;
  color: var(--color-primary);
  order: 1; /* mueve el ícono a la derecha del texto */
}

.footer__contact a {
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--transition-fast);
  order: 0; /* texto va primero */
}

.footer__contact a:hover { color: #FFFFFF; }

.footer__nav-title {
  text-align: right;
}

/* Columna de contacto del footer */
.footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__contact p {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.footer__contact i {
  width: 16px;
  color: var(--color-primary);
}

.footer__contact a {
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--transition-fast);
}
.footer__contact a:hover { color: #FFFFFF; }

/* Barra de copyright */
.footer__copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--space-5) var(--space-6);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.35);
}

/* ── Crédito del desarrollador en el footer ── */
.footer__dev {
  margin-right: 70px;
  color: var(--color-primary);
  font-size: var(--text-xs);
}

.footer__dev-tag {
  font-family: 'Courier New', monospace;
  font-weight: 900;
  color: var(--color-primary);
  transition: color var(--transition-fast);
}

.footer__dev a:hover .footer__dev-tag {
  color: #243dbc;
}

/* ============================================================
   12. BOTÓN FLOTANTE DE WHATSAPP
   ============================================================ */

/* Botón verde fijo en la esquina inferior derecha */
.whatsapp-float {
  position: fixed !important;
  bottom: var(--space-6) !important;
  right: var(--space-6) !important;
  z-index: 9999 !important;
  width: 56px;
  height: 56px;
  background-color: #25D366; /* Verde oficial de WhatsApp */
  border-radius: var(--radius-full);
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 1.5rem;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.45);
  transition: all var(--transition-normal);
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.55);
}

/* Tooltip que aparece al hacer hover sobre el botón */
.whatsapp-float__tooltip {
  position: absolute;
  right: 70px;
  background-color: var(--color-text);
  color: #FFFFFF;
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

/* Triángulo del tooltip */
.whatsapp-float__tooltip::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: var(--color-text);
  border-right: 0;
}

.whatsapp-float:hover .whatsapp-float__tooltip {
  opacity: 1;
}

/* ── MÉTODOS DE PAGO ── */
.payment__methods {
  max-width: 700px;
  margin: 0 auto var(--space-8);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
}

.payment__title {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.payment__title i {
  color: var(--color-primary);
}

/* Imagen centrada de los métodos de pago */
.payment__visual {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-2) 0 var(--space-4);
}

.payment__visual img {
  max-width: 380px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.payment__note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.payment__note i {
  color: var(--color-primary);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .payment__methods {
    padding: var(--space-4);
  }
  .payment__visual img {
    max-width: 280px;
  }
}

/* ============================================================
   13. MEDIA QUERIES (DISEÑO RESPONSIVO)
   Breakpoints:
   - < 1024px: Tablet (2 columnas donde había 3)
   - < 768px: Móvil (1 columna, menú hamburguesa)
   ============================================================ */

/* ── TABLET (menos de 1024px) ── */
@media (max-width: 1024px) {

  /* Reducir tamaño del título del hero en tablet */
  .hero__title {
    font-size: var(--text-4xl);
  }

  /* Vehículos: de 3 columnas a 1 fila de 3 (mismo, pero con menos gap) */
  .vehicles__grid {
    gap: var(--space-4);
  }

  /* Políticas: de 3 a 2 columnas */
  .policies__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Galería: ~2 tarjetas visibles a la vez en tablet */
  .gallery-item {
    width: calc(50% - var(--space-2));
    height: 300px;
  }

  /* Footer: de 3 a 2 columnas */
  .footer__inner {
    grid-template-columns: 1fr 1fr;
  }

  /* Cotizador: extras en 2 columnas */
  .quoter__extras {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── MÓVIL (menos de 768px) ── */
    /* En desktop el select se oculta */
  .currency-select-mobile {
    display: none;
  }

@media (max-width: 768px) {

  /* Reducir variables en móvil */
  :root {
    --container-pad: var(--space-4);
  }

  /* ── Navbar en móvil ── */
  /* Mostrar botón hamburguesa */
  .navbar__toggle {
    display: flex;
  }

  /* Reduce el blur de la navbar en móvil: menos carga para gama baja */
  .navbar {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  /* El selector de idioma compacto de desktop se oculta; se usa el círculo */
  .lang-switch--desktop {
    display: none;
  }

  .lang-circle {
    display: block;
  }

  /* El menú se convierte en un panel desplegable */
  .navbar__menu {
    position: fixed;
    top: var(--navbar-h);
    left: 0;
    right: 0;
    background-color: #FFFFFF;
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-4);
    gap: var(--space-2);
    box-shadow: var(--shadow-lg);
    /* Oculto por defecto, se muestra con JS al presionar hamburguesa */
    display: none;
  }
  .navbar__menu.navbar__menu--open {
    display: flex;
  }

  /* Lista de enlaces: vertical en móvil */
  .navbar__list {
    flex-direction: column;
    align-items: stretch;
  }
  .navbar__link {
    display: block;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
  }
  .navbar__cta {
    text-align: center;
  }

  /* ── Hero en móvil ── */
  .hero__title {
    font-size: var(--text-3xl);
  }
  .hero__subtitle {
    font-size: var(--text-base);
  }
  .hero__actions {
    flex-direction: column;
  }
  .hero__trust {
    gap: var(--space-4);
  }

  /* ── Secciones: reducir padding ── */
  .section {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }

  /* ── Vehículos: 1 columna ── */
  .vehicles__grid {
    grid-template-columns: 1fr;
  }

  /* ── Galería: 1 tarjeta a la vez en móvil ── */
  .gallery-item {
    width: 100%;
    height: 280px;
  }

  /* ── Políticas: 1 columna ── */
  .policies__grid {
    grid-template-columns: 1fr;
  }

  /* ── Cotizador: 1 columna ── */
  .quoter__card {
    padding: var(--space-6);
  }
  .stepper__actions {
    flex-direction: column;
  }
  .quoter__extras {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    padding: var(--space-4);
  }

  .quoter__extras .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .quoter__extras .form-label {
    min-height: 40px;
    align-items: flex-start;
  }

  .quoter__extras .number-input {
    height: 44px;
  }

  .quoter__extras .number-input__btn {
    width: 44px;
    height: 44px;
  }
  /* ── Contacto: 1 columna ── */
  .contact__form-row {
    grid-template-columns: 1fr;
  }
  .contact__summary {
    grid-template-columns: 1fr;
  }

  /* ── Footer: 1 columna ── */
  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
  }

  .footer__contact {
    text-align: left;
  }

  .footer__contact p {
    justify-content: flex-start;
  }

  .footer__contact i {
    order: 0;
  }

  .footer__contact a {
    order: 1;
  }

  .footer__nav-title {
    text-align: left;
  }

  /* ── Títulos de sección más pequeños ── */
  .section__title {
    font-size: var(--text-2xl);
  }

  .quoter__currency {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .currency-switch {
    display: none; /* Oculta los botones en móvil */
  }

  /* Select desplegable, solo visible en móvil */
  .currency-select-mobile {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
    font-family: Inter, sans-serif;
    color: var(--color-text);
    background-color: #fff;
    cursor: pointer;
  }
}

/* ── Pantallas muy pequeñas (menos de 480px) ── */
@media (max-width: 480px) {
  .hero__title {
    font-size: var(--text-2xl);
  }
  .quoter__result-price {
    font-size: var(--text-3xl);
  }
}


/* ============================================================
   14. PÁGINA "TRABAJA CON NOSOTROS" (trabaja-con-nosotros.html)
   Reutiliza .hero, .section, .quoter__card y .contact__form-row
   ya definidos arriba; aquí solo se agrega lo específico de la
   lista de requisitos y el hero secundario más compacto.
   ============================================================ */

.driver-hero {
  min-height: 60vh;
  padding-bottom: var(--space-16);
}

.requirements__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-16);
}

.requirement-card {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-alt);
}

.requirement-card__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background-color: var(--color-primary-lt);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: 1.25rem;
}

.requirement-card__title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.requirement-card__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

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

@media (max-width: 768px) {
  .driver-hero {
    min-height: auto;
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }
  .requirements__grid {
    grid-template-columns: 1fr;
  }
}