/* =============================================================
   TRASLADOS CARBOX — Hoja de estilos principal
   Sistema de diseño: mobile-first, variables CSS, grid/flex.
   Organización:
   1.  Tokens (:root)
   2.  Reset y base
   3.  Tipografía
   4.  Utilidades de layout
   5.  Botones
   6.  Navbar
   7.  Botón flotante WhatsApp
   8.  Hero
   9.  Barra de confianza
   10. Cards de servicio
   11. Secciones alternadas (split)
   12. Showcase de video (facade YouTube)
   13. Features (por qué elegirnos)
   14. Mapa de rutas
   15. Testimonios
   16. CTA final
   17. Footer
   18. Breadcrumbs
   19. Callouts / banners
   20. Documentos
   21. Rutas (cards)
   22. Contacto / formulario
   23. Nosotros
   24. 404
   25. Reveal on scroll
   26. Reduced motion
   ============================================================= */

/* 1. TOKENS ------------------------------------------------- */
:root {
  /* Marca */
  --color-primary:        #0B1E33;
  --color-primary-dark:   #05111F;
  --color-accent:         #E63946;
  --color-accent-dark:    #B82C39;

  /* Neutros */
  --color-bg:             #FAFAFA;
  --color-surface:        #FFFFFF;
  --color-surface-alt:    #F2F4F7;
  --color-text:           #1A1A1A;
  --color-text-muted:     #5A6473;
  --color-border:         #E2E6EC;

  /* Estado */
  --color-success:        #16A34A;
  --color-warning:        #F59E0B;
  --color-whatsapp:       #25D366;

  /* Tipografía */
  --font-display: "Archivo", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  --fs-h1: clamp(2.25rem, 5vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 3.5vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 2.5vw, 1.5rem);
  --fs-body: clamp(1rem, 1.1vw, 1.0625rem);
  --fs-small: 0.875rem;

  /* Espaciado */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* Radios */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* Sombras */
  --shadow-sm: 0 1px 3px rgba(11,30,51,0.06);
  --shadow-md: 0 6px 24px rgba(11,30,51,0.10);
  --shadow-lg: 0 20px 50px rgba(11,30,51,0.15);

  /* Layout */
  --container: 1200px;
  --container-narrow: 820px;
  --nav-h: 72px;

  /* Transiciones */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 200ms var(--ease);
  --t-mid: 300ms var(--ease);
}

/* 2. RESET Y BASE ------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; }

/* Skip link accesibilidad */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 9999;
  background: var(--color-accent);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* Focus states visibles */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* 3. TIPOGRAFÍA --------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.12;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; }

p { max-width: 68ch; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.lead {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  color: var(--color-text-muted);
  max-width: 60ch;
}

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

/* 4. UTILIDADES DE LAYOUT ----------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-md);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--space-2xl); }
.section--tight { padding-block: var(--space-xl); }
.section--alt { background: var(--color-surface-alt); }
.section--dark {
  background: var(--color-primary-dark);
  color: #fff;
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .lead, .section--dark .text-muted { color: rgba(255,255,255,0.78); }

.section-head {
  max-width: 60ch;
  margin-bottom: var(--space-xl);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head p { margin-top: var(--space-sm); }
.section-head--center p { margin-inline: auto; }

.grid { display: grid; gap: var(--space-lg); }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 640px) and (max-width: 899px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* 5. BOTONES ------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  padding: 0.95rem 1.6rem;
  border-radius: var(--radius-md);
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  white-space: nowrap;
  cursor: pointer;
}
.btn svg { width: 1.15em; height: 1.15em; flex-shrink: 0; }

.btn--primary {
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 6px 18px rgba(230,57,70,0.28);
}
.btn--primary:hover { background: var(--color-accent-dark); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(230,57,70,0.34); }

.btn--secondary {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-border);
}
.btn--secondary:hover { border-color: var(--color-primary); transform: translateY(-2px); }

.btn--ghost-light {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 2px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(4px);
}
.btn--ghost-light:hover { background: rgba(255,255,255,0.22); transform: translateY(-2px); }

.btn--whatsapp { background: var(--color-whatsapp); color: #fff; box-shadow: 0 6px 18px rgba(37,211,102,0.3); }
.btn--whatsapp:hover { background: #1da851; transform: translateY(-2px); }

.btn--lg { padding: 1.1rem 2rem; font-size: 1.0625rem; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--color-accent);
}
.link-arrow svg { width: 1em; height: 1em; transition: transform var(--t-fast); }
.link-arrow:hover svg { transform: translateX(4px); }

/* 6. NAVBAR ------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background var(--t-mid), box-shadow var(--t-mid), border-color var(--t-mid);
  border-bottom: 1px solid transparent;
}
.nav.scrolled,
.nav.nav--solid {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  border-bottom-color: var(--color-border);
}
.nav__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.brand { display: inline-flex; align-items: center; gap: 0.55rem; }
.brand__mark { height: 44px; width: auto; flex-shrink: 0; } /* logo CARBOX (wordmark 400x202); ajusta height entre 36-52px si lo necesitas */
.brand__text {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  color: #fff;
  transition: color var(--t-mid);
}
.brand__text small {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-top: 1px;
}
.nav.scrolled .brand__text,
.nav--solid .brand__text { color: var(--color-primary); }
.nav.scrolled .brand__mark .truck-body,
.nav--solid .brand__mark .truck-body { fill: var(--color-primary); }

.nav__links {
  display: none;
  align-items: center;
  gap: 0.35rem;
}
.nav__links a {
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.92);
  transition: color var(--t-fast), background var(--t-fast);
}
.nav__links a:hover { background: rgba(255,255,255,0.14); }
.nav__links a[aria-current="page"] { color: #fff; }
.nav__links a[aria-current="page"]::after {
  content: "";
  display: block;
  height: 2px;
  background: var(--color-accent);
  border-radius: 2px;
  margin-top: 2px;
}
.nav.scrolled .nav__links a,
.nav--solid .nav__links a { color: var(--color-text); }
.nav.scrolled .nav__links a:hover,
.nav--solid .nav__links a:hover { background: var(--color-surface-alt); }
.nav.scrolled .nav__links a[aria-current="page"],
.nav--solid .nav__links a[aria-current="page"] { color: var(--color-primary); }

.nav__cta { display: none; }

.nav__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  align-items: center;
}
.nav__toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform var(--t-fast), opacity var(--t-fast), background var(--t-mid);
}
.nav.scrolled .nav__toggle span,
.nav--solid .nav__toggle span { background: var(--color-primary); }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Drawer móvil */
.nav__drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(320px, 86vw);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--t-mid);
  z-index: 1100;
  padding: calc(var(--nav-h) + var(--space-md)) var(--space-lg) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  overflow-y: auto;
}
.nav__drawer.open { transform: translateX(0); }
.nav__drawer a {
  padding: 0.85rem 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-primary);
  border-bottom: 1px solid var(--color-border);
}
.nav__drawer a[aria-current="page"] { color: var(--color-accent); }
.nav__drawer .btn { margin-top: var(--space-md); }
.nav__overlay {
  position: fixed;
  inset: 0;
  background: rgba(5,17,31,0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-mid), visibility var(--t-mid);
  z-index: 1050;
}
.nav__overlay.open { opacity: 1; visibility: visible; }

@media (min-width: 980px) {
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__toggle { display: none; }
}

/* 7. BOTÓN FLOTANTE WHATSAPP -------------------------------- */
.wa-float {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 900;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--color-whatsapp);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37,211,102,0.4);
  transition: transform var(--t-fast);
  animation: wa-pulse 5s var(--ease) infinite;
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 32px; height: 32px; }
@keyframes wa-pulse {
  0%, 92%, 100% { box-shadow: 0 8px 24px rgba(37,211,102,0.4); }
  94% { box-shadow: 0 8px 24px rgba(37,211,102,0.4), 0 0 0 0 rgba(37,211,102,0.5); }
  98% { box-shadow: 0 8px 24px rgba(37,211,102,0.4), 0 0 0 16px rgba(37,211,102,0); }
}

/* 8. HERO --------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(92vh, 820px);
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
  isolation: isolate; /* crea contexto de apilamiento: el video (z-index negativo) queda por ENCIMA del color de respaldo, no tapado */
  background-color: var(--color-primary-dark); /* respaldo mientras el video carga */
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, rgba(11,30,51,0.85), rgba(11,30,51,0.55));
}
.hero__content {
  padding-block: calc(var(--nav-h) + var(--space-xl)) var(--space-2xl);
  max-width: 60ch;
}
.hero h1 { color: #fff; }
.hero__sub {
  font-size: clamp(1.0625rem, 1.8vw, 1.375rem);
  color: rgba(255,255,255,0.9);
  margin-top: var(--space-md);
  max-width: 52ch;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
.hero__scroll {
  position: absolute;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.75);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hero__scroll svg { width: 22px; height: 22px; animation: bob 1.8s var(--ease) infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* Hero compacto (páginas internas) */
.page-hero {
  position: relative;
  color: #fff;
  background: var(--color-primary);
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 20%, rgba(230,57,70,0.18), transparent 45%),
    linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
}
.page-hero__inner {
  position: relative;
  padding-block: calc(var(--nav-h) + var(--space-xl)) var(--space-xl);
}
.page-hero h1 { color: #fff; max-width: 18ch; }
.page-hero p { color: rgba(255,255,255,0.82); margin-top: var(--space-sm); }

/* 9. BARRA DE CONFIANZA ------------------------------------- */
.trust-bar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.trust-bar__inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--color-border);
  border-inline: 1px solid var(--color-border);
}
.trust-item {
  background: var(--color-surface);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: var(--space-md);
}
.trust-item svg { width: 28px; height: 28px; color: var(--color-accent); flex-shrink: 0; }
.trust-item span { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--color-primary); }
@media (min-width: 760px) {
  .trust-bar__inner { grid-template-columns: repeat(4, 1fr); }
}

/* 10. CARDS DE SERVICIO ------------------------------------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-surface-alt); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }
.card__body { padding: var(--space-md); display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.card__body h3 { margin: 0; }
.card__body p { font-size: 0.95rem; color: var(--color-text-muted); flex: 1; }
.card__body .link-arrow { margin-top: 0.25rem; }

/* 11. SECCIONES ALTERNADAS (SPLIT) -------------------------- */
.split {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}
@media (min-width: 880px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
  .split--reverse .split__media { order: 2; }
}
.split + .split { margin-top: var(--space-2xl); }
.split__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__body h2 { margin-bottom: var(--space-sm); }
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: var(--space-md);
}
.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.98rem;
}
.feature-list li svg {
  width: 22px;
  height: 22px;
  color: var(--color-success);
  flex-shrink: 0;
  margin-top: 1px;
}
.split__body .btn, .split__body .link-arrow { margin-top: var(--space-md); }

/* 12. SHOWCASE DE VIDEO (facade YouTube) -------------------- */
.video-showcase { display: grid; gap: var(--space-lg); }
@media (min-width: 920px) {
  .video-showcase { grid-template-columns: 1.6fr 1fr; align-items: center; }
}
.video-facade {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  background: var(--color-primary-dark);
  box-shadow: var(--shadow-lg);
  border: 0;
  width: 100%;
}
.video-facade img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: opacity var(--t-fast), transform 400ms var(--ease); }
.video-facade:hover img { opacity: 1; transform: scale(1.03); }
.video-facade__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-facade__play svg { width: 76px; height: 76px; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.4)); transition: transform var(--t-fast); }
.video-facade:hover .video-facade__play svg { transform: scale(1.1); }
.video-facade__label {
  position: absolute;
  left: var(--space-md);
  bottom: var(--space-md);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  background: rgba(11,30,51,0.6);
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-sm);
  backdrop-filter: blur(4px);
}
.video-facade iframe { width: 100%; height: 100%; border: 0; }
.video-secondary { margin-top: var(--space-md); }
.video-secondary .video-facade { box-shadow: var(--shadow-md); }

/* 13. FEATURES (POR QUÉ ELEGIRNOS) -------------------------- */
.feature {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.feature__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: rgba(230,57,70,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
}
.feature__icon svg { width: 26px; height: 26px; }
.feature h3 { font-size: 1.1rem; margin: 0; }
.feature p { font-size: 0.92rem; color: var(--color-text-muted); margin: 0; }

/* En sección oscura */
.section--dark .feature {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
}
.section--dark .feature h3 { color: #fff; }
.section--dark .feature p { color: rgba(255,255,255,0.72); }

/* 14. MAPA DE RUTAS ----------------------------------------- */
.map-section { position: relative; }
.map-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1rem, 4vw, var(--space-xl));
  box-shadow: var(--shadow-sm);
}
.mx-map { width: 100%; height: auto; }
.mx-map .mx-land { fill: var(--color-surface-alt); stroke: var(--color-border); stroke-width: 1.5; }
.mx-map .route-1 { fill: none; stroke: var(--color-primary); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 6 8; }
.mx-map .route-2 { fill: none; stroke: var(--color-accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 6 8; }
.mx-map .city-dot { fill: var(--color-primary); }
.mx-map .city-dot--accent { fill: var(--color-accent); }
.mx-map .city-label { font-family: var(--font-body); font-size: 13px; font-weight: 600; fill: var(--color-text); }
.mx-map .hub { fill: var(--color-accent); }
.mx-map .hub-ring { fill: none; stroke: var(--color-accent); stroke-width: 2; opacity: 0.5; animation: ping 2.4s var(--ease) infinite; transform-origin: center; transform-box: fill-box; }
@keyframes ping { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.4); opacity: 0; } }

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-md);
  justify-content: center;
}
.map-legend span { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 600; }
.map-legend i { width: 22px; height: 4px; border-radius: 2px; display: inline-block; }
.map-legend .l1 { background: var(--color-primary); }
.map-legend .l2 { background: var(--color-accent); }
.map-legend .l3 { width: 12px; height: 12px; border-radius: 50%; background: var(--color-accent); }

/* Cards de ruta detalladas */
.route-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.route-card__head {
  padding: var(--space-md);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.route-card--1 .route-card__head { background: var(--color-primary); }
.route-card--2 .route-card__head { background: var(--color-accent-dark); }
.route-card__head h3 { color: #fff; margin: 0; font-size: 1.2rem; }
.route-card__head .badge {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.2);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}
.route-states { padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); }
.route-state { display: grid; grid-template-columns: 130px 1fr; gap: var(--space-sm); align-items: baseline; padding-bottom: var(--space-sm); border-bottom: 1px dashed var(--color-border); }
.route-state:last-child { border-bottom: 0; padding-bottom: 0; }
.route-state strong { color: var(--color-primary); font-family: var(--font-display); font-size: 0.95rem; }
.route-state span { color: var(--color-text-muted); font-size: 0.92rem; }
@media (max-width: 520px) { .route-state { grid-template-columns: 1fr; gap: 2px; } }

/* 15. TESTIMONIOS ------------------------------------------- */
.quote-block {
  text-align: center;
  max-width: 50ch;
  margin-inline: auto;
}
.quote-block svg { width: 48px; height: 48px; color: var(--color-accent); margin-inline: auto; margin-bottom: var(--space-md); opacity: 0.5; }
.quote-block blockquote {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.25;
  color: var(--color-primary);
}
.section--dark .quote-block blockquote { color: #fff; }
.quote-block cite { display: block; margin-top: var(--space-md); font-style: normal; font-weight: 600; color: var(--color-text-muted); }

.testimonial {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.testimonial__stars { color: var(--color-warning); display: flex; gap: 2px; }
.testimonial__stars svg { width: 18px; height: 18px; }
.testimonial p { font-size: 0.98rem; }
.testimonial cite { font-style: normal; font-weight: 700; color: var(--color-primary); font-size: 0.9rem; }

/* 16. CTA FINAL --------------------------------------------- */
.cta-final { text-align: center; }
.cta-final h2 { color: #fff; max-width: 20ch; margin-inline: auto; }
.cta-final p { color: rgba(255,255,255,0.8); margin: var(--space-sm) auto var(--space-lg); }
.cta-final .btn { margin-inline: auto; }

/* 17. FOOTER ------------------------------------------------ */
.footer {
  background: var(--color-primary-dark);
  color: rgba(255,255,255,0.7);
  padding-block: var(--space-xl) var(--space-lg);
  font-size: 0.95rem;
}
.footer__grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}
@media (min-width: 680px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; } }
.footer h4 {
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}
.footer ul { display: flex; flex-direction: column; gap: 0.55rem; }
.footer a:hover { color: #fff; }
.footer .brand__text { color: #fff; }
.footer__tagline { margin: var(--space-sm) 0 var(--space-md); max-width: 32ch; }
.footer__contact li { display: flex; align-items: flex-start; gap: 0.55rem; }
.footer__contact svg { width: 18px; height: 18px; color: var(--color-accent); flex-shrink: 0; margin-top: 3px; }
.social { display: flex; gap: 0.6rem; margin-top: var(--space-sm); }
.social a {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast);
}
.social a:hover { background: var(--color-accent); }
.social svg { width: 20px; height: 20px; color: #fff; }
.footer__sub {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
}
.footer__sub a { text-decoration: underline; text-underline-offset: 3px; }

/* 18. BREADCRUMBS ------------------------------------------- */
.breadcrumb { font-size: 0.85rem; margin-bottom: var(--space-sm); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.breadcrumb li { display: flex; align-items: center; gap: 0.4rem; color: rgba(255,255,255,0.6); }
.breadcrumb a { color: rgba(255,255,255,0.85); }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: #fff; font-weight: 600; }
.breadcrumb svg { width: 14px; height: 14px; opacity: 0.6; }

/* 19. CALLOUTS / BANNERS ------------------------------------ */
.callout {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 5px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
}
.callout h3 { display: flex; align-items: center; gap: 0.5rem; margin-bottom: var(--space-sm); }
.callout h3 svg { width: 24px; height: 24px; color: var(--color-primary); }
.callout ul { display: flex; flex-direction: column; gap: 0.5rem; }
.callout li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.96rem; }
.callout li svg { width: 20px; height: 20px; color: var(--color-success); flex-shrink: 0; margin-top: 2px; }

.banner-warning {
  background: rgba(245,158,11,0.1);
  border: 1px solid rgba(245,158,11,0.4);
  border-left: 5px solid var(--color-warning);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-weight: 600;
  color: #92400e;
}
.banner-warning svg { width: 28px; height: 28px; color: var(--color-warning); flex-shrink: 0; }

/* Listas con check (genéricas) */
.check-list { display: grid; gap: 0.7rem; }
@media (min-width: 600px) { .check-list--2 { grid-template-columns: repeat(2, 1fr); } }
.check-list li { display: flex; align-items: flex-start; gap: 0.6rem; }
.check-list li svg { width: 22px; height: 22px; color: var(--color-success); flex-shrink: 0; margin-top: 2px; }

/* 20. DOCUMENTOS ------------------------------------------- */
.doc-grid { display: grid; gap: var(--space-lg); }
@media (min-width: 760px) { .doc-grid--2 { grid-template-columns: 1fr 1fr; } }
.req-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}
.req-box h3 { margin-bottom: var(--space-md); }

/* 21. (rutas usa estilos de mapa/route-card ya definidos) --- */

/* 22. CONTACTO / FORMULARIO --------------------------------- */
.contact-grid { display: grid; gap: var(--space-xl); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 0.85fr 1.15fr; } }

.contact-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
.contact-item__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(11,30,51,0.06);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-item__icon svg { width: 22px; height: 22px; }
.contact-item h3 { font-size: 1rem; margin-bottom: 2px; }
.contact-item a, .contact-item p { font-size: 0.95rem; color: var(--color-text-muted); display: block; }
.contact-item a:hover { color: var(--color-accent); }

.form-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.form-wrap__head {
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-md) var(--space-lg);
}
.form-wrap__head h2 { color: #fff; font-size: 1.35rem; }
.form-wrap__head p { color: rgba(255,255,255,0.8); font-size: 0.9rem; margin-top: 2px; }
.form-wrap iframe { width: 100%; min-height: 720px; border: 0; display: block; }

.map-embed {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  aspect-ratio: 16 / 7;
}
.map-embed iframe { width: 100%; height: 100%; border: 0; }

/* 23. NOSOTROS --------------------------------------------- */
.value-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.value-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.value-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(11,30,51,0.06);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.value-card__icon svg { width: 28px; height: 28px; }
.value-card h3 { font-size: 1.05rem; margin: 0; }
.value-card p { font-size: 0.9rem; color: var(--color-text-muted); margin: 0; }

.mv-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  border-top: 5px solid var(--color-accent);
}
.mv-box h3 { display: flex; align-items: center; gap: 0.6rem; margin-bottom: var(--space-sm); }
.mv-box h3 svg { width: 26px; height: 26px; color: var(--color-accent); }

.fleet-grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .fleet-grid { grid-template-columns: repeat(3, 1fr); } }
.fleet-grid img { border-radius: var(--radius-md); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; box-shadow: var(--shadow-sm); }

.team-grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }
.team-card { text-align: center; }
.team-card img { border-radius: var(--radius-md); aspect-ratio: 1; object-fit: cover; width: 100%; margin-bottom: var(--space-xs); }
.team-card strong { display: block; color: var(--color-primary); font-family: var(--font-display); }
.team-card span { font-size: 0.85rem; color: var(--color-text-muted); }

/* 24. 404 -------------------------------------------------- */
.error-page {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--nav-h) + var(--space-xl)) var(--space-md) var(--space-xl);
}
.error-page .code {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(5rem, 18vw, 11rem);
  line-height: 1;
  color: var(--color-primary);
  letter-spacing: -0.04em;
}
.error-page .code span { color: var(--color-accent); }
.error-page p { margin: var(--space-sm) auto var(--space-lg); }

/* 25. REVEAL ON SCROLL ------------------------------------- */
.reveal {
  opacity: 1;
  transform: none;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal--delay-1 { transition-delay: 80ms; }
.reveal--delay-2 { transition-delay: 160ms; }
.reveal--delay-3 { transition-delay: 240ms; }

/* 26. REDUCED MOTION --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* 27. SEO / GEO — bloques de contenido añadidos ------------- */
/* Respuesta rápida: resumen citable para Google y asistentes de IA */
.answer-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 5px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  box-shadow: var(--shadow-sm);
}
.answer-box h2 { font-size: var(--fs-h3); margin-bottom: var(--space-xs); }
.answer-box p { max-width: none; }
.answer-box p + p { margin-top: var(--space-xs); }

/* Pasos: cómo funciona */
.steps { display: grid; gap: var(--space-md); counter-reset: paso; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-md) var(--space-md);
  counter-increment: paso;
}
.step::before {
  content: counter(paso);
  position: absolute; top: -18px; left: var(--space-md);
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-accent); color: #fff;
  font-family: var(--font-display); font-weight: 800;
}
.step h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.step p { font-size: 0.95rem; color: var(--color-text-muted); }

/* Preguntas frecuentes (acordeón nativo, sin JS) */
.faq { display: flex; flex-direction: column; gap: 0.75rem; }
.faq details {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0 var(--space-md);
}
.faq details[open] { box-shadow: var(--shadow-sm); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: var(--space-sm) 2rem var(--space-sm) 0;
  position: relative;
  font-family: var(--font-display); font-weight: 700; color: var(--color-primary);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; line-height: 1; color: var(--color-accent);
}
.faq details[open] summary::after { content: "–"; }
.faq summary h3 { display: inline; font-size: 1.02rem; font-weight: 700; }
.faq .faq__a { padding-bottom: var(--space-md); color: var(--color-text-muted); }
.faq .faq__a p + p, .faq .faq__a ul { margin-top: 0.5rem; }
.faq .faq__a ul { list-style: disc; padding-left: 1.2rem; }
.faq .faq__a a { color: var(--color-accent-dark); text-decoration: underline; }
.faq-group + .faq-group { margin-top: var(--space-xl); }
.faq-group > h2 { font-size: var(--fs-h3); margin-bottom: var(--space-md); }

/* Tabla comparativa */
.table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.compare-table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 0.95rem; }
.compare-table th, .compare-table td { padding: 0.85rem 1rem; text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.compare-table thead th { background: var(--color-primary); color: #fff; font-family: var(--font-display); }
.compare-table tbody th { color: var(--color-primary); font-weight: 700; width: 28%; }
.compare-table tr:last-child th, .compare-table tr:last-child td { border-bottom: 0; }

/* Enlaces a rutas populares */
.route-links { display: grid; gap: var(--space-sm); }
@media (min-width: 640px) { .route-links { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .route-links { grid-template-columns: repeat(3, 1fr); } }
.route-link {
  display: flex; flex-direction: column; gap: 0.25rem;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-md);
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.route-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-accent); }
.route-link strong { font-family: var(--font-display); color: var(--color-primary); font-size: 1.05rem; }
.route-link span { font-size: 0.9rem; color: var(--color-text-muted); }

/* Prosa (párrafos de contenido largo) */
.prose p + p { margin-top: var(--space-sm); }
.prose h2 { margin-top: var(--space-lg); margin-bottom: var(--space-sm); }
.prose a { color: var(--color-accent-dark); text-decoration: underline; }

/* Rutas populares en el footer */
.footer__routes {
  margin-top: var(--space-lg); padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-size: 0.88rem;
}
.footer__routes strong { color: #fff; font-weight: 600; }

/* Evita desbordamiento horizontal de la barra de confianza en móviles */
.trust-bar__inner > * { min-width: 0; }
@media (max-width: 759px) {
  .trust-item { padding: var(--space-sm); gap: 0.5rem; }
  .trust-item svg { width: 22px; height: 22px; }
  .trust-item span { font-size: 0.85rem; }
  .answer-box { padding: var(--space-md); }
}
.prose a.btn { color: #fff; text-decoration: none; }

/* 28. MAPA GEOGRÁFICO DE RUTAS (México real) ---------------- */
.map-wrap--geo {
  background: radial-gradient(120% 90% at 30% 20%, #10304F 0%, #0B1E33 55%, #071524 100%);
  border-color: rgba(255,255,255,0.06);
  box-shadow: var(--shadow-lg);
}
.map-wrap--geo .map-legend span { color: rgba(255,255,255,0.88); }
.map-wrap--geo .map-legend .l1 { background: #38BDF8; box-shadow: 0 0 8px rgba(56,189,248,.8); }
.map-wrap--geo .map-legend .l2 { background: #E63946; box-shadow: 0 0 8px rgba(230,57,70,.8); }
.map-wrap--geo .map-legend .l3 { background: #E63946; box-shadow: 0 0 0 3px rgba(255,255,255,.9); }
.mx-geo { width: 100%; height: auto; display: block; overflow: visible; }
.mx-geo__neighbor { fill: rgba(255,255,255,0.06); stroke: rgba(255,255,255,0.12); stroke-width: 0.8; }
.mx-geo__states path { fill: #163A5E; stroke: rgba(255,255,255,0.14); stroke-width: 0.7; stroke-linejoin: round; transition: fill 200ms; }
.mx-geo__states path:hover { fill: #1B4670; }
.mx-geo__outline { fill: none; stroke: rgba(255,255,255,0.42); stroke-width: 1.3; stroke-linejoin: round; }
.mx-geo__sea { font-family: var(--font-body); font-size: 12px; font-style: italic; letter-spacing: .14em; text-transform: uppercase; fill: rgba(255,255,255,0.28); }
.mx-geo__label { font-family: var(--font-body); font-size: 12.5px; font-weight: 600; fill: #fff; paint-order: stroke; stroke: #071524; stroke-width: 3.5px; stroke-linejoin: round; }
.mx-geo__route { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; animation: mxDash 25s linear infinite; }
.mx-geo__route--red { stroke: rgba(230,57,70,0.95); stroke-dasharray: 7 6; filter: drop-shadow(0 0 3px rgba(230,57,70,.75)); }
.mx-geo__route--blue { stroke: rgba(56,189,248,0.95); stroke-dasharray: 5 5; animation-direction: reverse; filter: drop-shadow(0 0 3px rgba(56,189,248,.75)); }
.mx-geo__route--thin { stroke-width: 1.8; opacity: .8; }
.mx-geo__dot { fill: #fff; animation: mxGlowW 2.5s infinite alternate; }
.mx-geo__dot--blue { fill: #38BDF8; animation-name: mxGlowB; }
.mx-geo__dot--red { fill: #FF6B75; animation-name: mxGlowR; }
.mx-geo__hub { fill: #fff; }
.mx-geo__hub-ring { fill: #E63946; animation: mxGlowR 2s infinite alternate; }
.mx-geo__pulse { fill: none; stroke: #E63946; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: ping 2.4s var(--ease) infinite; }
@keyframes mxDash { to { stroke-dashoffset: -1000; } }
@keyframes mxGlowW { from { filter: drop-shadow(0 0 2px rgba(255,255,255,.5)); } to { filter: drop-shadow(0 0 7px rgba(255,255,255,1)); } }
@keyframes mxGlowB { from { filter: drop-shadow(0 0 2px rgba(56,189,248,.6)); } to { filter: drop-shadow(0 0 8px rgba(56,189,248,1)); } }
@keyframes mxGlowR { from { filter: drop-shadow(0 0 3px rgba(230,57,70,.6)); } to { filter: drop-shadow(0 0 10px rgba(230,57,70,1)); } }
@media (max-width: 640px) {
  .mx-geo__label { font-size: 25px; stroke-width: 6px; }
  .mx-geo__label--minor { display: none; }
  .mx-geo__dot { r: 7px; }
  .mx-geo__sea { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mx-geo__route, .mx-geo__dot, .mx-geo__hub-ring, .mx-geo__pulse { animation: none; }
}
/* Botones largos no desbordan en móvil */
.btn { max-width: 100%; }
@media (max-width: 480px) { .btn--lg { white-space: normal; text-align: center; } }

/* 29. COTIZADOR "BOLETO DE RUTA" (contacto) ----------------- */
.quote-ticket {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: 0 30px 60px -20px rgba(11,30,51,.35), 0 0 0 1px var(--color-border);
  overflow: hidden;
}
.quote-ticket__head {
  position: relative;
  color: #fff;
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  background:
    radial-gradient(circle at 85% -10%, rgba(230,57,70,.45), transparent 45%),
    radial-gradient(circle at 0% 120%, rgba(56,189,248,.25), transparent 45%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 22px),
    linear-gradient(135deg, #0B1E33, #10304F);
}
.quote-ticket__tag {
  display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase; color: #fff;
  background: var(--color-accent); padding: .3rem .65rem; border-radius: 999px; margin-bottom: .75rem;
}
.quote-ticket__head h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.1rem); }
.quote-ticket__head p { color: rgba(255,255,255,.78); margin-top: .35rem; max-width: 34ch; font-size: .95rem; }
.quote-ticket__stamp {
  position: absolute; top: var(--space-md); right: var(--space-md);
  width: 96px; height: 96px; border-radius: 50%;
  border: 2px dashed rgba(255,255,255,.55);
  display: grid; place-items: center; text-align: center;
  font-family: var(--font-display); font-weight: 800; font-size: .6rem; line-height: 1.2;
  letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.85);
  transform: rotate(-12deg);
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.06);
}

/* Ruta en vivo */
.quote-route { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: .9rem; margin-top: var(--space-lg); }
.quote-route__end small { display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.quote-route__end strong {
  display: block; font-family: var(--font-display); font-size: clamp(1.05rem, 2.2vw, 1.35rem); color: #fff;
  max-width: 13ch; line-height: 1.15; overflow-wrap: break-word;
  transition: color 250ms;
}
.quote-route__end strong.is-empty { color: rgba(255,255,255,.35); }
.quote-route__end--right { text-align: right; }
.quote-route__track { position: relative; height: 34px; min-width: 90px; }
.quote-route__line {
  position: absolute; left: 0; right: 0; bottom: 6px; height: 2px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 8px, transparent 8px 14px);
}
.quote-route__line::before, .quote-route__line::after {
  content: ""; position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%;
  transform: translateY(-50%); background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.15);
}
.quote-route__line::before { left: -4px; }
.quote-route__line::after { right: -4px; background: var(--color-accent); box-shadow: 0 0 0 4px rgba(230,57,70,.3); }
.quote-route__truck {
  position: absolute; bottom: 8px; left: 0; width: 44px; height: 22px;
  transform: translateX(0); transition: left 900ms cubic-bezier(.5,0,.2,1);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.35));
}
.quote-route[data-progress="1"] .quote-route__truck { left: calc(35% - 22px); }
.quote-route[data-progress="2"] .quote-route__truck { left: calc(100% - 44px); animation: truckBounce .5s ease-in-out 3; }
@keyframes truckBounce { 50% { transform: translateY(-3px); } }

/* Perforación tipo boleto */
.quote-ticket__perf { position: relative; height: 0; border-top: 2px dashed var(--color-border); margin: 0 22px; }
.quote-ticket__perf::before, .quote-ticket__perf::after {
  content: ""; position: absolute; top: -15px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-border);
}
.quote-ticket__perf::before { left: -36px; }
.quote-ticket__perf::after { right: -36px; }

/* Formulario */
.quote-form { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }
.quote-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.quote-step legend {
  display: flex; align-items: center; gap: .6rem; padding: 0; margin-bottom: .85rem;
  font-family: var(--font-display); font-weight: 700; color: var(--color-primary); font-size: 1.02rem;
}
.quote-step legend span {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: var(--color-primary); color: #fff; font-size: .85rem;
}
.quote-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.quote-options--2 { grid-template-columns: repeat(2, 1fr); }
.quote-option { position: relative; cursor: pointer; }
.quote-option input { position: absolute; opacity: 0; pointer-events: none; }
.quote-option__card {
  height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .2rem;
  padding: 1rem .5rem .85rem; border-radius: var(--radius-md);
  border: 2px solid var(--color-border); background: var(--color-surface-alt); color: var(--color-primary);
  transition: border-color 200ms, background 200ms, transform 200ms, box-shadow 200ms;
}
.quote-option__card svg { width: 48px; height: 32px; margin-bottom: .3rem; color: #9AA6B6; transition: color 200ms, transform 300ms; }
.quote-option__card strong { font-family: var(--font-display); font-size: .95rem; }
.quote-option__card small { font-size: .75rem; color: var(--color-text-muted); }
.quote-option:hover .quote-option__card { transform: translateY(-2px); border-color: #C9D1DC; }
.quote-option input:focus-visible + .quote-option__card { outline: 3px solid rgba(230,57,70,.35); outline-offset: 2px; }
.quote-option input:checked + .quote-option__card {
  border-color: var(--color-accent); background: #FFF5F6; box-shadow: 0 10px 24px -12px rgba(230,57,70,.55);
}
.quote-option input:checked + .quote-option__card svg { color: var(--color-accent); transform: translateX(4px); }
.quote-option input:checked + .quote-option__card::after {
  content: "✓"; position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--color-accent); color: #fff; font-weight: 800; font-size: .8rem; display: grid; place-items: center;
  box-shadow: 0 0 0 3px var(--color-surface);
}
.quote-grid { display: grid; gap: .8rem; }
@media (min-width: 560px) { .quote-grid { grid-template-columns: 1fr 1fr; } .quote-field--full { grid-column: 1 / -1; } }
.quote-field { display: flex; flex-direction: column; gap: .35rem; }
.quote-field span { font-size: .8rem; font-weight: 600; color: var(--color-text-muted); }
.quote-field input, .quote-field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--color-text);
  background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
  padding: .7rem .85rem; transition: border-color 200ms, box-shadow 200ms;
}
.quote-field textarea { resize: vertical; min-height: 64px; }
.quote-field input:focus, .quote-field textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(11,30,51,.08); }
.quote-field input.is-invalid { border-color: var(--color-accent); box-shadow: 0 0 0 4px rgba(230,57,70,.12); }
.quote-form__error { color: var(--color-accent-dark); font-weight: 600; font-size: .9rem; }
.quote-form__submit {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; padding: 1.05rem 1.25rem; border: 0; border-radius: var(--radius-md); cursor: pointer;
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: #fff;
  background: linear-gradient(135deg, #25D366, #128C4A); box-shadow: 0 14px 28px -12px rgba(18,140,74,.7);
  transition: transform 200ms, box-shadow 200ms;
}
.quote-form__submit svg { width: 22px; height: 22px; }
.quote-form__submit::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  animation: quoteShine 3.5s ease-in-out infinite;
}
.quote-form__submit:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -12px rgba(18,140,74,.8); }
@keyframes quoteShine { 60%, 100% { transform: translateX(120%); } }
.quote-form__alt { text-align: center; font-size: .82rem; color: var(--color-text-muted); margin: -.25rem auto 0; }
.quote-form__alt a { color: var(--color-primary); font-weight: 600; text-decoration: underline; }
@media (max-width: 520px) {
  .quote-ticket__head, .quote-form { padding: var(--space-md); }
  .quote-ticket__stamp { display: none; }
  .quote-route { grid-template-columns: 1fr 1fr; grid-template-areas: "o d" "t t"; row-gap: .5rem; }
  .quote-route__end:first-child { grid-area: o; }
  .quote-route__end--right { grid-area: d; }
  .quote-route__track { grid-area: t; }
  .quote-route__end strong { max-width: none; font-size: 1.1rem; }
  .quote-option__card strong { font-size: .85rem; }
  .quote-options { gap: .5rem; }
  .quote-option__card { padding: .8rem .3rem .7rem; }
  .quote-option__card small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .quote-route__truck { transition: none; }
  .quote-form__submit::after, .quote-route[data-progress="2"] .quote-route__truck { animation: none; }
}

/* Lista de teléfonos con nombre (contacto) */
.phone-list { display: flex; flex-direction: column; gap: .15rem; margin-top: .35rem; }
.contact-item a.phone-row {
  display: flex; align-items: baseline; gap: .75rem; padding: .35rem .5rem; margin: 0 -.5rem;
  border-radius: var(--radius-sm); font-size: .93rem; transition: background 150ms;
}
.phone-row__name { font-weight: 600; color: var(--color-primary); white-space: nowrap; flex-shrink: 0; }
.phone-row__num { margin-left: auto; color: var(--color-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.contact-item a.phone-row:hover { background: rgba(11,30,51,.05); }
.contact-item a.phone-row:hover .phone-row__num { color: var(--color-accent); }
@media (max-width: 480px) {
  .contact-item a.phone-row { flex-direction: column; align-items: flex-start; gap: 0; padding: .4rem .5rem; }
  .phone-row__num { margin-left: 0; }
}
.contact-item > div { min-width: 0; }

/* =============================================================
   30. OPTIMIZACIÓN RESPONSIVE v2 (celular + escritorio)
   Ajustes agregados sobre el sistema existente. Todo lo de aquí
   sobrescribe reglas anteriores; para revertir, borra esta sección
   (y el bloque .mobile-cta del HTML).
   ============================================================= */

/* -- Tipografía y espaciado fluidos: menos scroll en celular,
      mismo aire en escritorio -- */
:root {
  --fs-h1: clamp(2rem, 1.35rem + 3.2vw, 3.75rem);
  --fs-h2: clamp(1.6rem, 1.2rem + 2vw, 2.5rem);
  --space-xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);
  --space-2xl: clamp(3.5rem, 2.5rem + 4.5vw, 6rem);
  --mobile-cta-h: 64px;
}
.grid { gap: clamp(1rem, 0.5rem + 2vw, 2.5rem); }
a, button, summary, label { touch-action: manipulation; }

/* -- HERO: alineado con el logo/contenedor, titular en 2-3 líneas -- */
.hero { min-height: min(92vh, 820px); }
@supports (height: 100svh) { .hero { min-height: min(92svh, 820px); } }
.hero__content { max-width: var(--container); }
.hero h1 { max-width: 14em; }
.hero__sub { max-width: 46ch; }
@media (max-width: 520px) {
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }
}
@media (max-height: 700px), (max-width: 520px) { .hero__scroll { display: none; } }
@media (min-width: 980px) {
  .brand__mark { height: 52px; }
}

/* -- Barra de confianza: 2x2 hasta tablet, 4 columnas alineadas
      al contenedor en escritorio -- */
.trust-bar__inner { max-width: var(--container); margin-inline: auto; }
@media (min-width: 760px) and (max-width: 1023px) {
  .trust-bar__inner { grid-template-columns: repeat(2, 1fr); }
  .trust-item { justify-content: center; }
}
@media (min-width: 1024px) { .trust-item { justify-content: center; } }

/* -- Menú móvil: el botón (X) queda visible encima del panel -- */
body.menu-open .nav {
  z-index: 1200;
  background: transparent;
  box-shadow: none;
  border-bottom-color: transparent;
  backdrop-filter: none;
}
body.menu-open .nav__toggle span { background: var(--color-primary); }
.nav__drawer { padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom)); }

/* -- "Por qué elegir": icono a la izquierda en celular (menos alto) -- */
@media (max-width: 639px) {
  .feature {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 0.9rem;
    row-gap: 0.2rem;
    align-items: start;
    padding: 1rem 1.1rem;
  }
  .feature__icon { width: 44px; height: 44px; grid-row: span 2; }
  .feature__icon svg { width: 22px; height: 22px; }
  .feature h3 { align-self: center; }
  /* En una sola columna los retrasos escalonados solo hacen esperar */
  .reveal--delay-1, .reveal--delay-2, .reveal--delay-3 { transition-delay: 0ms; }
  .card__media { aspect-ratio: 16 / 9; }
}

/* -- Áreas táctiles de al menos 44px en pantallas touch -- */
@media (pointer: coarse) {
  .footer ul { gap: 0; }
  .footer ul a,
  .footer__contact a,
  .footer__sub a { display: inline-block; padding-block: 0.6rem; }
  .footer__contact li { align-items: center; }
  .footer__contact svg { margin-top: 0; }
  .footer__routes { gap: 0 1.1rem; }
  .footer__routes a { display: inline-block; padding-block: 0.6rem; }
  .breadcrumb a { display: inline-block; padding: 0.7rem 0.15rem; margin: -0.7rem -0.15rem; }
  .link-arrow { min-height: 44px; }
  .contact-item a.phone-row { padding-block: 0.55rem; }
}

/* -- Textos que quedaban por debajo de 12px -- */
.route-card__head .badge { font-size: 0.75rem; }
.quote-route__end small { font-size: 0.72rem; }

/* -- Barra fija de acción en celular: Llamar + WhatsApp -- */
.mobile-cta { display: none; }
@media (max-width: 759px) {
  .mobile-cta {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 950;
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 0.6rem;
    padding: 0.6rem max(0.75rem, env(safe-area-inset-left)) calc(0.6rem + env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-right));
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -6px 20px rgba(11,30,51,0.08);
    transition: transform var(--t-mid);
  }
  .mobile-cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 46px;
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
  }
  .mobile-cta svg { width: 20px; height: 20px; flex-shrink: 0; }
  .mobile-cta__call { color: var(--color-primary); border: 2px solid var(--color-border); background: var(--color-surface); }
  .mobile-cta__wa { color: #fff; background: var(--color-whatsapp); box-shadow: 0 6px 16px rgba(37,211,102,0.3); }
  body.menu-open .mobile-cta { transform: translateY(110%); }
  /* El botón redondo se sustituye por la barra */
  .wa-float { display: none; }
  body { padding-bottom: calc(var(--mobile-cta-h) + env(safe-area-inset-bottom)); }
  .footer { padding-bottom: var(--space-lg); }
}
@media (prefers-reduced-motion: reduce) { .mobile-cta { transition: none; } }

/* -- Pantallas grandes: un poco más de ancho útil -- */
@media (min-width: 1600px) {
  :root { --container: 1280px; }
}

/* -- Contacto: evita que un texto largo (correo) ensanche la columna -- */
.contact-grid > * { min-width: 0; }
.contact-item { overflow-wrap: break-word; }
@media (max-width: 379px) { .mobile-cta__long { display: none; } }
@media (max-width: 679px) {
  .footer__routes strong { flex-basis: 100%; }
}

/* Accesibilidad y cotización: revisión 2026-09-27 */
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #2166ad; outline-offset: 4px; }
.nav__drawer:not(.open) { visibility: hidden; }
.nav__drawer.open { visibility: visible; }
.quote-enable { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 1.5rem; }
.quote-ready { padding: 1rem; border: 2px solid #14754a; border-radius: 12px; background: #f0faf4; }
.quote-ready p { margin-bottom: .75rem; }
.quote-field input[aria-invalid="true"], .quote-field textarea[aria-invalid="true"] { border-color: #b51929; }
.quote-option input[aria-invalid="true"] + .quote-option__card { border-color: #b51929; }
.quote-option input:focus-visible + .quote-option__card { outline: 3px solid #2166ad; outline-offset: 3px; }
.quote-route__end { min-width: 0; }
.quote-route__end strong { overflow-wrap: anywhere; }
.quote-form__alt a, .container--narrow p a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }
.quote-form__submit, .btn--primary { background-color: #c92436; }
.btn--whatsapp, .mobile-cta__wa { background-color: #08783e; color: #fff; }
.hero__pause { position: absolute; right: 1.5rem; bottom: 1rem; z-index: 4; padding: .65rem 1rem; min-height: 44px; border: 1px solid #fff; border-radius: 8px; background: #0b1e33; color: #fff; cursor: pointer; }
.nojs-nav { position: relative; z-index: 110; padding: 1rem; background: #fff; color: #0b1e33; }
.nojs-nav a { display: inline-block; padding: .5rem; }
.preparation-list { padding-left: 1.5rem; }
.preparation-list li { margin: .75rem 0; }
.container--narrow > h2 { margin-bottom: 1rem; }
.container--narrow > p { margin-bottom: 1rem; }
@media (max-width: 759px) { .hero__pause { display: none; } }