/* ═══════════════════════════════════════════════════════════════════
   VM TRUCKS — Landing corporativa
   Base clara, tipografía en tamaños normales, dorado del logo
   reservado para botones, íconos y detalles. El negro solo en el pie.
   ═══════════════════════════════════════════════════════════════════ */

/* ───────────────── 1. Reset ───────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }

/* Al limpiar el #ancla, main.js le da foco a la sección de destino.
   Ese foco es solo para lectores de pantalla, no debe dibujar borde. */
[tabindex="-1"]:focus { outline: none; }
img, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
address { font-style: normal; }


/* ───────────────── 2. Tokens ───────────────── */
:root {
  --blanco:   #FFFFFF;
  --gris-1:   #F6F7F9;   /* fondo de secciones alternas */
  --gris-2:   #EEF0F4;   /* hover suave */
  --borde:    #E2E6EC;
  --borde-2:  #CFD5DE;

  --texto:    #1B2330;   /* títulos y texto principal */
  --texto-2:  #5A6472;   /* párrafos */
  --texto-3:  #8B94A3;   /* etiquetas */

  --oro:      #C9962F;
  --oro-osc:  #A87A22;
  --oro-tint: #FBF4E6;
  --oscuro:   #14161A;   /* pie */
  --wa:       #25D366;

  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --head:  'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;

  --ancho:  1180px;
  --pad:    clamp(1rem, 4vw, 2rem);
  --sec:    clamp(3.25rem, 5.5vw, 4.75rem);

  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;

  --sh-sm: 0 1px 2px rgba(16,24,40,.05);
  --sh:    0 2px 8px rgba(16,24,40,.06);
  --sh-md: 0 8px 20px rgba(16,24,40,.08);
  --sh-lg: 0 16px 36px rgba(16,24,40,.12);

  --ease: cubic-bezier(.2,.7,.3,1);
}


/* ───────────────── 3. Base ───────────────── */
body {
  background: var(--blanco);
  color: var(--texto-2);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--head);
  color: var(--texto);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.011em;
}

::selection { background: var(--oro); color: #fff; }

:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; border-radius: 3px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ico {
  width: 20px; height: 20px; flex: 0 0 auto;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

.skip {
  position: absolute; top: -80px; left: var(--pad); z-index: 200;
  background: var(--oro); color: #fff;
  padding: .6rem 1rem; border-radius: var(--r-sm); font-weight: 600;
}
.skip:focus { top: .75rem; }

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


/* ───────────────── 4. Botones ───────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .75rem 1.35rem;
  border-radius: var(--r-sm);
  font-size: .9375rem; font-weight: 600;
  border: 1px solid transparent;
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), box-shadow .2s var(--ease);
  white-space: nowrap;
}
.btn--primary { background: var(--oro); color: #fff; box-shadow: var(--sh-sm); }
.btn--primary:hover { background: var(--oro-osc); box-shadow: var(--sh); }

.btn--ghost { background: var(--blanco); color: var(--texto); border-color: var(--borde-2); }
.btn--ghost:hover { background: var(--gris-1); border-color: var(--texto-3); }

.btn--wa { background: var(--wa); color: #06331A; }
.btn--wa:hover { background: #1FBF5B; }

.btn--sm { padding: .55rem 1rem; font-size: .875rem; }
.btn--block { width: 100%; }


/* ───────────────── 5. Encabezado ───────────────── */
/* Arranca transparente, montado sobre la foto de portada. Al bajar se
   despega y queda fijo con fondo blanco (clase .is-stuck desde main.js). */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease),
              box-shadow .3s var(--ease), backdrop-filter .3s var(--ease);
}
.hdr.is-stuck {
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom-color: var(--borde);
  box-shadow: var(--sh);
}

.hdr__in { display: flex; align-items: center; gap: 1.5rem; height: 68px; }

.hdr__logo { position: relative; display: block; line-height: 0; }
.hdr__logo img { height: 40px; width: auto; transition: opacity .3s var(--ease); }
.hdr__logo-oscuro { position: absolute; top: 0; left: 0; opacity: 0; }
.hdr.is-stuck .hdr__logo-claro  { opacity: 0; }
.hdr.is-stuck .hdr__logo-oscuro { opacity: 1; }

.hdr__nav {
  display: flex; align-items: center; gap: 1.65rem;
  margin-left: auto;
  font-size: .9375rem; font-weight: 500;
}
.hdr__nav a { position: relative; color: rgba(255,255,255,.9); transition: color .2s var(--ease); }
.hdr__nav a:hover { color: #fff; }
.hdr.is-stuck .hdr__nav a { color: var(--texto-2); }
.hdr.is-stuck .hdr__nav a:hover { color: var(--oro-osc); }
.hdr__nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -8px;
  height: 2px; border-radius: 2px; background: var(--oro);
  transform: scaleX(0); transform-origin: center;
  transition: transform .28s var(--ease);
}
.hdr__nav a.is-active { color: #fff; font-weight: 600; }
.hdr.is-stuck .hdr__nav a.is-active { color: var(--texto); }
.hdr__nav a.is-active::after { transform: scaleX(1); }

/* Barra de avance de lectura, pegada al borde inferior del encabezado */
.hdr__progress {
  position: absolute; left: 0; bottom: -1px;
  height: 2px; width: 100%;
  background: var(--oro);
  transform: scaleX(0); transform-origin: left;
}

.hdr__act { display: flex; align-items: center; gap: 1rem; }

.hdr__burger { display: none; width: 40px; height: 40px; padding: 9px; margin-left: auto; }
.hdr__burger span {
  display: block; height: 2px; border-radius: 2px; background: #fff;
  transition: transform .25s var(--ease), opacity .2s var(--ease),
              background-color .3s var(--ease);
}
.hdr.is-stuck .hdr__burger span { background: var(--texto); }
.hdr__burger span + span { margin-top: 5px; }
.hdr__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hdr__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hdr__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ───────────────── 6. Portada ───────────────── */
.hero {
  position: relative;
  display: flex; align-items: center;
  min-height: clamp(430px, 58vh, 545px);
  background: var(--oscuro);
  overflow: hidden;
}
/* Un poco más alta que la portada: ese margen es el que se mueve
   con el efecto de profundidad al hacer scroll, sin dejar huecos. */
.hero__bg {
  position: absolute; left: 0; right: 0; top: -6%;
  width: 100%; height: 112%;
  /* 55% y no el centro: la portada es una franja ancha y baja, así que
     el recorte se queda con una banda horizontal. Bajarlo un poco deja
     dentro el pueblo y la niebla en vez de tanto cielo. Si cambias la
     foto de portada, esta es la perilla que hay que reajustar. */
  object-fit: cover; object-position: 50% 55%;
  will-change: transform;
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(16,19,24,.93) 0%, rgba(16,19,24,.87) 42%,
    rgba(16,19,24,.50) 74%, rgba(16,19,24,.26) 100%);
}
/* Velo superior: el encabezado transparente lleva texto blanco y la foto
   de portada puede ser clara justo ahí. Sin esto el menú se pierde. */
.hero::before {
  content: ''; position: absolute; inset: 0 0 auto 0;
  height: 160px; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(14,17,21,.62), rgba(14,17,21,0));
}
/* El relleno de arriba deja libre la altura del encabezado montado */
.hero__in {
  position: relative; z-index: 2;
  padding-block: calc(68px + clamp(2.75rem, 6vw, 4rem)) clamp(2.75rem, 6vw, 4rem);
}

.hero__eyebrow {
  font-size: .75rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: #E9C77A;
  margin-bottom: .9rem;
}
.hero__title {
  color: #fff;
  font-size: clamp(1.75rem, 3.1vw, 2.5rem);
  line-height: 1.18;
  max-width: 17ch;
}
.hero__lead {
  color: rgba(255,255,255,.82);
  font-size: 1.0625rem;
  max-width: 54ch;
  margin-top: 1rem;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }


/* ───────────────── 7. Barra de confianza ───────────────── */
.trust { background: var(--blanco); border-bottom: 1px solid var(--borde); }
.trust__in {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-block: 1.4rem;
}
.trust__item { text-align: center; padding-inline: .75rem; }
.trust__item + .trust__item { border-left: 1px solid var(--borde); }
.trust__item strong {
  display: block;
  font-family: var(--head); font-size: 1.4rem; font-weight: 700;
  color: var(--texto); letter-spacing: -.02em;
}
.trust__item span { display: block; font-size: .8125rem; color: var(--texto-3); margin-top: .15rem; }


/* ───────────────── 8. Secciones ───────────────── */
.sec { padding-block: var(--sec); }
.sec--alt { background: var(--gris-1); border-block: 1px solid var(--borde); }

.sec__head { max-width: 640px; margin-bottom: clamp(2rem, 3.5vw, 2.75rem); }
.sec__kicker {
  font-size: .75rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--oro-osc);
  margin-bottom: .55rem;
}
.sec__title { font-size: clamp(1.375rem, 2.1vw, 1.8rem); }
.sec__sub { margin-top: .7rem; font-size: .9375rem; color: var(--texto-2); }


/* ───────────────── 9. Tarjetas ───────────────── */
.cards { display: grid; gap: 1.25rem; }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  padding: 1.5rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.card:hover { border-color: var(--borde-2); box-shadow: var(--sh-md); }
.card__ico {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 9px;
  background: var(--oro-tint);
  color: var(--oro-osc);
  margin-bottom: 1rem;
}
.card h3 { font-size: 1.0625rem; margin-bottom: .4rem; }
.card p { font-size: .9375rem; }


/* ───────────────── 10. Flota ───────────────── */
.unit {
  display: flex; flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.unit:hover { border-color: var(--borde-2); box-shadow: var(--sh-md); }

/* La proporción va sobre la <img>, no sobre el contenedor: como .unit es un
   contenedor flex, un aspect-ratio en el hijo se ignora y cada foto tomaba
   su alto original, dejando las tarjetas disparejas. */
.unit__img { position: relative; flex: 0 0 auto; background: var(--gris-2); overflow: hidden; }
/* La primera foto va en el flujo y define el alto de la tarjeta;
   las demás se apilan encima en absoluto y se cruzan con un fundido. */
.unit__img img {
  position: relative;
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .5s var(--ease), opacity .7s var(--ease);
}
.unit__img .unit__slide {
  position: absolute; inset: 0;
  height: 100%;
  opacity: 0;
}
.unit:hover .unit__img img { transform: scale(1.045); }

/* Botón invisible que cubre la foto y abre la galería */
.unit__open {
  position: absolute; inset: 0; z-index: 5;
  cursor: zoom-in;
  background: transparent;
  transition: background-color .25s var(--ease);
}
.unit__open:hover { background: rgba(20,22,26,.14); }
.unit__open:focus-visible { outline: 2px solid var(--oro); outline-offset: -4px; }

/* Contador de fotos */
.unit__count {
  position: absolute; top: .75rem; right: .75rem; z-index: 6;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem .55rem;
  border-radius: 999px;
  background: rgba(20,22,26,.72);
  color: #fff;
  font-size: .75rem; font-weight: 600;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
}
.unit__count .ico { width: 14px; height: 14px; stroke-width: 2; }

/* Puntos de navegación */
.unit__dots {
  position: absolute; right: .75rem; bottom: .8rem; z-index: 6;
  display: flex; gap: .3rem;
}
.unit__dots button {
  width: 7px; height: 7px; padding: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  box-shadow: 0 0 0 1px rgba(20,22,26,.28);
  transition: background-color .25s var(--ease), width .25s var(--ease);
}
.unit__dots button:hover { background: #fff; }
.unit__dots button.is-on { background: var(--oro); width: 18px; border-radius: 999px; }
.unit__img--empty {
  aspect-ratio: 4 / 3;
  display: grid; place-content: center; gap: .4rem;
  color: var(--texto-3);
  background: repeating-linear-gradient(-45deg, var(--gris-1) 0 10px, var(--gris-2) 10px 20px);
}
.unit__img--empty .ico { width: 26px; height: 26px; margin-inline: auto; }
.unit__img--empty p { font-size: .8125rem; font-weight: 500; }

.unit__badge {
  position: absolute; left: .75rem; bottom: .75rem; z-index: 6;
  background: rgba(255,255,255,.95);
  color: var(--texto);
  font-size: .75rem; font-weight: 700;
  padding: .32rem .6rem;
  border-radius: 999px;
  box-shadow: var(--sh-sm);
}

.unit__body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem; }
.unit__body h3 { font-size: 1.0625rem; margin-bottom: .4rem; }
.unit__body > p { font-size: .9375rem; }

.specs { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .75rem; margin: 1rem 0 1.15rem; }
.specs li {
  position: relative; padding-left: 1.1rem;
  font-size: .8125rem; color: var(--texto-2);
}
.specs li::before {
  content: ''; position: absolute; left: 0; top: .45em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--oro);
}


.unit__body .btn { margin-top: auto; }

.unit--help { background: var(--blanco); border-style: dashed; }
.unit--help .unit__body { justify-content: center; gap: .5rem; padding: 1.75rem 1.5rem; }
.unit--help p { font-size: .9375rem; }


/* ───────────────── 11. Ventajas ───────────────── */
.adv {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: center;
}
.adv__media {
  border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--borde);
  aspect-ratio: 4 / 4.6;
}
.adv__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 68%; }

.adv__list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 1.75rem; margin-top: 1.75rem; }
.adv__list li { display: flex; gap: .8rem; }
.adv__list .ico { color: var(--oro); margin-top: .15rem; }
.adv__list h3 { font-size: .9375rem; margin-bottom: .2rem; }
.adv__list p { font-size: .875rem; }


/* ───────────────── 12. Destinos ───────────────── */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: .45rem .95rem;
  font-size: .875rem; font-weight: 500;
  color: var(--texto-2);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.chips li:hover { border-color: var(--oro); color: var(--texto); }
.chips__note { margin-top: 1.5rem; font-size: .9375rem; color: var(--texto-3); }
.chips__note a { color: var(--oro-osc); font-weight: 600; }
.chips__note a:hover { text-decoration: underline; }


/* ───────────────── 13. Opiniones ───────────────── */
.quote {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  padding: 1.5rem;
  display: flex; flex-direction: column; gap: .9rem;
}
.quote__stars { color: var(--oro); font-size: .9375rem; letter-spacing: .12em; }
.quote blockquote { color: var(--texto); font-size: .9375rem; flex: 1; }
.quote__who { border-top: 1px solid var(--borde); padding-top: .9rem; }
.quote__who strong { display: block; font-size: .875rem; color: var(--texto); font-weight: 600; }
.quote__who span { display: block; font-size: .8125rem; color: var(--texto-3); margin-top: .1rem; }


/* ───────────────── 14. Cotización ───────────────── */
.quote-grid {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: 1.5rem; align-items: start;
}
.panel {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--sh);
}
.panel .sec__sub { margin-bottom: 1.75rem; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.grid-2, .grid-3 { margin-bottom: 1rem; }

.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.grid-2 .field, .grid-3 .field { margin-bottom: 0; }
.field label { font-size: .8125rem; font-weight: 600; color: var(--texto); }
.field .opt { font-weight: 400; color: var(--texto-3); }

.field input, .field select, .field textarea {
  width: 100%;
  background-color: var(--blanco);
  border: 1px solid var(--borde-2);
  border-radius: var(--r-sm);
  padding: .65rem .8rem;
  font-size: .9375rem;
  color: var(--texto);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field textarea { resize: vertical; min-height: 84px; }
.field ::placeholder { color: var(--texto-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--oro);
  box-shadow: 0 0 0 3px rgba(201,150,47,.16);
}
.field input.is-error, .field select.is-error {
  border-color: #D0503A;
  box-shadow: 0 0 0 3px rgba(208,80,58,.13);
}
.field select {
  appearance: none; cursor: pointer; padding-right: 2.2rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--texto-3) 50%),
    linear-gradient(135deg, var(--texto-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.hint { margin-top: .7rem; font-size: .8125rem; color: var(--texto-3); min-height: 1.3em; }
.hint.is-error { color: #C0432D; }

.panel--info { background: var(--blanco); }
.info__title { font-size: 1.0625rem; margin-bottom: 1rem; }
.info__tels { display: flex; flex-direction: column; gap: .1rem; margin-bottom: 1.5rem; }
.info__tels a {
  display: flex; align-items: center; gap: .55rem;
  padding: .55rem 0;
  font-size: .9375rem; font-weight: 600; color: var(--texto);
  border-bottom: 1px solid var(--borde);
  transition: color .2s var(--ease);
}
.info__tels .ico { width: 16px; height: 16px; color: var(--oro); }
.info__tels a:hover { color: var(--oro-osc); }
.info__block { margin-bottom: 1.35rem; }
.info__label {
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-3); margin-bottom: .35rem;
}
.info__block address, .info__block p { font-size: .875rem; line-height: 1.55; }

/* ── Redes sociales (pie y tarjeta de contacto) ── */
.redes { display: flex; gap: .5rem; }
.redes a {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--borde);
  border-radius: 50%;
  color: var(--texto-2);
  transition: color .2s var(--ease), border-color .2s var(--ease),
              background-color .2s var(--ease), transform .2s var(--ease);
}
.redes a:hover {
  color: var(--oro-osc);
  border-color: var(--oro);
  background: var(--oro-tint);
  transform: translateY(-2px);
}
.redes .ico { width: 17px; height: 17px; }
.ico--marca { fill: currentColor; stroke: none; }

/* ── Sobre la foto de portada ── */
.hero__redes {
  display: flex; align-items: center; gap: 1rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.hero__redes > span {
  position: relative; padding-right: 1.5rem;
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.hero__redes > span::after {
  content: ''; position: absolute; right: .5rem; top: 50%;
  width: 14px; height: 1px; background: rgba(255,255,255,.32);
}
.redes--hero { gap: 1rem; }
.redes--hero a {
  width: auto; height: auto;
  border: 0; color: rgba(255,255,255,.85);
}
.redes--hero a:hover { background: none; color: var(--oro); transform: translateY(-2px); }
.redes--hero .ico { width: 22px; height: 22px; }

/* ── En el pie van sin círculo: encerrados se veían flotando ── */
.ftr .redes { margin-top: 1.35rem; gap: 1.15rem; }
.ftr .redes a {
  width: auto; height: auto;
  border: 0; color: rgba(255,255,255,.72);
}
.ftr .redes a:hover { color: var(--oro); background: none; transform: translateY(-2px); }
.ftr .redes .ico { width: 20px; height: 20px; }


/* ───────────────── 15. Pie ───────────────── */
.ftr { background: var(--oscuro); color: rgba(255,255,255,.62); padding-top: clamp(2.5rem, 5vw, 3.5rem); }
.ftr__in {
  display: grid; grid-template-columns: 1.9fr 1fr 1fr;
  gap: 2rem;
  padding-bottom: 2.25rem;
}
.ftr__col h4 {
  color: #fff; font-size: .8125rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: .9rem;
}
.ftr__col a, .ftr__col address, .ftr__col p { display: block; font-size: .875rem; line-height: 1.7; }
.ftr__col a { transition: color .2s var(--ease); }
.ftr__col a:hover { color: var(--oro); }
.ftr__col--brand img { height: 40px; width: auto; margin-bottom: 1rem; }
.ftr__col--brand p { max-width: 34ch; }

.ftr__legal {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-block: 1.25rem;
  font-size: .8125rem;
  color: rgba(255,255,255,.45);
}


/* ───────────────── 16. WhatsApp flotante ───────────────── */
.wa {
  position: fixed; right: clamp(.85rem, 2vw, 1.5rem); bottom: clamp(.85rem, 2vw, 1.5rem);
  z-index: 90;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--wa);
  box-shadow: 0 6px 18px rgba(37,211,102,.4);
  transition: transform .2s var(--ease);
}
.wa svg { width: 28px; height: 28px; fill: #06331A; }
.wa:hover { transform: scale(1.06); }


/* ───────────────── 17. Galería ───────────────── */
.lb {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(15,18,22,.9);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 1rem;
  padding: clamp(3.5rem, 7vw, 4.5rem) clamp(.75rem, 3vw, 2rem);
}
.lb[hidden] { display: none; }
.lb__img { max-width: 100%; max-height: 82svh; margin-inline: auto; border-radius: var(--r-sm); }
.lb__close {
  position: absolute; top: 1rem; right: 1.25rem;
  width: 42px; height: 42px; font-size: 1.9rem; line-height: 1; color: #fff;
}
.lb__nav {
  width: 44px; height: 44px; border-radius: 50%;
  font-size: 1.7rem; line-height: 1; color: #fff;
  border: 1px solid rgba(255,255,255,.3);
  transition: background-color .2s var(--ease);
}
.lb__nav:hover { background: rgba(255,255,255,.14); }
.lb__count {
  position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
  font-size: .8125rem; color: rgba(255,255,255,.65);
}


/* ═════════════════ 18. Responsive ═════════════════ */

@media (max-width: 1080px) {
  .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adv { grid-template-columns: minmax(0, 1fr); }
  .adv__media { aspect-ratio: 16 / 9; max-height: 340px; }
  .quote-grid { grid-template-columns: minmax(0, 1fr); }
  .ftr__in { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 920px) {
  .hdr__nav {
    position: fixed; inset: 68px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: .5rem var(--pad) 1.25rem;
    background: var(--blanco);
    border-bottom: 1px solid var(--borde);
    box-shadow: var(--sh-md);
    transform: translateY(-130%);
    transition: transform .3s var(--ease);
  }
  .hdr__nav.is-open { transform: none; }
  /* Dentro del panel blanco los enlaces van oscuros, aunque el
     encabezado esté en su estado transparente */
  .hdr .hdr__nav a, .hdr.is-stuck .hdr__nav a {
    padding: .85rem 0; border-bottom: 1px solid var(--borde);
    font-size: 1rem; color: var(--texto);
  }
  .hdr__nav a::after { display: none; }
  .hdr__burger { display: block; }
  .hdr__act { margin-left: auto; }
  body.nav-open { overflow: hidden; }

  /* Cuatro datos: dos y dos, con el divisor solo entre columnas */
  .trust__in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 0; }
  .trust__item:nth-child(odd) { border-left: 0; }
}

@media (max-width: 700px) {
  html { scroll-padding-top: 78px; }
  .hero { min-height: 0; }
  /* Se conserva la altura del encabezado montado: sin el calc(), el menú
     tapaba el arranque del texto de la portada. */
  .hero__in {
    padding-block: calc(68px + clamp(2.5rem, 9vw, 3.5rem)) clamp(2.5rem, 9vw, 3.5rem);
  }
  .hero__title { max-width: none; }
  .hero__cta .btn { flex: 1 1 auto; }
  .adv__list { grid-template-columns: minmax(0, 1fr); gap: 1.15rem; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 .field:last-child { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .cards--3 { grid-template-columns: minmax(0, 1fr); }
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .specs { grid-template-columns: minmax(0, 1fr); }
  .ftr__in { grid-template-columns: 1fr; gap: 1.75rem; }
  .lb { grid-template-columns: minmax(0, 1fr); }
  .lb__nav { position: absolute; bottom: 3rem; }
  .lb__nav--prev { left: 20%; }
  .lb__nav--next { right: 20%; }
}


/* ═════════════════ 19. Movimiento reducido ═════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}


/* ═════════════════ 20. Efectos al hacer scroll ═════════════════
   Solo se aplican cuando <html> tiene la clase .js, que el script del
   <head> agrega si el navegador los soporta y el visitante no pidió
   "reducir movimiento". Sin esa clase el contenido se ve siempre. */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* La portada entra un poco más marcada porque no hay scroll todavía */
.js .hero [data-reveal] { transform: translateY(24px); }

/* Las fotos de la flota entran con un acercamiento mínimo */
.js .unit[data-reveal] { transform: translateY(18px) scale(.985); }
.js .unit[data-reveal].is-in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js .hero [data-reveal],
  .js .unit[data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero__bg { transform: none !important; }
}


/* ═════════════════ 21. Impresión ═════════════════ */
@media print {
  .hdr, .wa, .lb, .btn, .unit__open, .unit__dots, .unit__count { display: none !important; }
  .unit__slide { display: none !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  body { color: #000; }
  .sec--alt, .hero { background: #fff !important; }
  .hero::after { display: none; }
  .hero__title, .hero__lead, .hero__eyebrow { color: #000 !important; }
}


/* ═════════════════ 22. Cortina de bienvenida ═════════════════

   Se muestra una sola vez por sesión, y solo si el navegador aguanta
   los efectos. Exige las DOS clases en <html>:

     .js         la pone el script del <head>, y su failsafe de 2.5 s
                 la QUITA si main.js nunca llegó a correr
     .splash-on  solo aparece cuando la persona no la había visto

   Faltando cualquiera de las dos, la cortina ni se dibuja. Ese es el
   seguro: si el JavaScript falla, la página se ve completa en lugar
   de quedarse en negro. Y quien pidió "reducir movimiento" nunca
   recibe .js, así que tampoco ve cortina — sale gratis. */

.splash { display: none; }

html.js.splash-on .splash {
  display: grid; place-items: center;
  position: fixed; inset: 0;
  z-index: 300;            /* encima del encabezado (100), la galería
                              (150) y el enlace de salto (200) */
  background: var(--oscuro);
  transition: transform .4s ease-in;
}

html.js.splash-on .splash.is-out { transform: translateY(-100%); }

.splash__in { display: grid; justify-items: center; gap: 1.15rem; }
.splash__in img { width: min(210px, 52vw); height: auto; }

/* La línea dorada se dibuja sola bajo el logo */
.splash__linea {
  display: block; width: 0; height: 2px;
  background: var(--oro);
  animation: splash-linea .55s .1s ease-out forwards;
}
@keyframes splash-linea { to { width: min(210px, 52vw); } }

/* La página no se mueve detrás de la cortina. El scroll se devuelve
   en cuanto empieza a levantarse, no al final, para que no se sienta
   trabada. Si el failsafe quita .js, esto se libera solo. */
html.js.splash-on { overflow: hidden; }
html.js.splash-on.splash-fin { overflow: visible; }


/* ═════════════════ 23. Rutas escolares ═════════════════

   Esta sección entra en la alternancia normal blanco/gris, sin color
   propio. Llegó a tener fondo crema para destacar como oferta aparte,
   pero era un cuarto color que aparecía una sola vez en toda la página
   y nunca volvía: se sentía fuera de lugar más que especial.

   La regla de fondos de la landing es: sección CON tarjetas va en gris
   (.sec--alt), porque las tarjetas son blancas con borde de 1px y sobre
   blanco se pierden; sección SIN tarjetas va en blanco.

   Aquí la tarjeta es una sola y trae box-shadow propio, así que se
   sostiene sobre el blanco sin necesitar el gris.

   El grid es auto-fit a propósito: hoy que hay una sola ruta ocupa
   todo el ancho, y cuando agregues la segunda se parten en columnas
   solas. Agregar rutas no debería obligar a tocar este archivo. */

.rutas {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.ruta {
  display: flex; flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  box-shadow: var(--sh-sm);
}

.ruta__top {
  display: flex; flex-wrap: wrap;
  align-items: baseline; justify-content: space-between;
  gap: .5rem 1rem;
  padding-bottom: 1rem; margin-bottom: 1.15rem;
  border-bottom: 1px solid var(--borde);
}
.ruta__top h3 { font-size: 1.375rem; }
.ruta__zona { font-size: .9375rem; color: var(--texto-2); }

.ruta__turnos {
  font-size: .8125rem; font-weight: 600;
  color: var(--oro-osc); background: var(--oro-tint);
  padding: .35rem .75rem; border-radius: 999px;
  white-space: nowrap;
}

.ruta__label {
  font-size: .75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-3);
  margin-bottom: .65rem;
}

/* Mismo patrón que .specs de la flota: dos columnas con viñeta dorada */
.ruta__paradas {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .4rem .9rem; margin-bottom: 1.4rem;
}
.ruta__paradas li {
  position: relative; padding-left: 1.1rem;
  font-size: .875rem; color: var(--texto-2);
}
.ruta__paradas li::before {
  content: ''; position: absolute; left: 0; top: .5em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--oro);
}

.ruta .btn { margin-top: auto; }

/* En pantallas chicas "Metro Agrícola Oriental" no cabe en media
   columna, así que las paradas pasan a una sola. */
@media (max-width: 560px) {
  .ruta { padding: 1.25rem; }
  .ruta__paradas { grid-template-columns: minmax(0, 1fr); }
}


/* ═════════════════ 24. Galería de viajes ═════════════════

   Fondo oscuro por dos razones: las fotos resaltan más sobre negro,
   y así la sección no entra en la alternancia blanco/gris del resto
   — meterla ahí habría obligado a voltear la clase de las secciones
   siguientes. Queda gris → negro → blanco, y hace eco con la portada.

   El mosaico lo arma main.js desde GALERIAS.viajes. Si esa lista
   está vacía la sección lleva hidden y nada de esto se dibuja. */

.sec--galeria { background: var(--oscuro); }
.sec--galeria .sec__kicker { color: var(--oro); }
.sec--galeria .sec__title  { color: var(--blanco); }
.sec--galeria .sec__sub    { color: rgba(255,255,255,.72); }

/* auto-fill, no auto-fit: con pocas fotos preferimos que queden de su
   tamaño y no que se estiren a lo ancho de la pantalla. */
.viajes {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.viajes__btn {
  display: block; width: 100%; padding: 0;
  border-radius: var(--r); overflow: hidden;
  background: #222;
  /* Cuadrado a propósito: la mitad de las fotos son verticales y la
     otra mitad horizontales. Un 4:3 le cortaría el 44% del alto a las
     verticales; el cuadrado reparte el recorte parejo entre las dos.
     De todos modos, al abrir el visor se ve la foto completa. */
  aspect-ratio: 1 / 1;
  cursor: zoom-in;
}
.viajes__btn img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .45s var(--ease), opacity .25s var(--ease);
}
.viajes__btn:hover img,
.viajes__btn:focus-visible img { transform: scale(1.06); opacity: .92; }

@media (max-width: 560px) {
  .viajes { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
}

/* El acercamiento es decorativo: si pidieron menos movimiento, fuera. */
@media (prefers-reduced-motion: reduce) {
  .viajes__btn img { transition: none; }
  .viajes__btn:hover img,
  .viajes__btn:focus-visible img { transform: none; }
}


/* ═════════════════ 25. Carrusel de reseñas ═════════════════

   Las tarjetas las arma main.js con lo que devuelve resenas.php. Con la
   lista vacía la sección lleva hidden y nada de esto se dibuja.

   La pista se desplaza con translateX y el ancho de cada tarjeta se fija
   en porcentaje según cuántas caben, para que el movimiento sea de una
   tarjeta a la vez y no de un pixel a la vez. */

.carrusel { position: relative; overflow: hidden; }

.carrusel__pista {
  display: flex; gap: 1.25rem;
  transition: transform .5s var(--ease);
  will-change: transform;
}

.carrusel__pista > li {
  flex: 0 0 calc((100% - 2.5rem) / 3);
  display: flex;
}

.carrusel .quote { width: 100%; }

.carrusel__nav {
  display: flex; align-items: center; justify-content: center;
  gap: 1.25rem; margin-top: 1.5rem;
}

.carrusel__btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--borde-2); background: var(--blanco);
  color: var(--texto-2); font-size: 1.35rem; line-height: 1;
  display: grid; place-items: center;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.carrusel__btn:hover { border-color: var(--oro); color: var(--oro-osc); }

.carrusel__cuenta {
  font-size: .8125rem; color: var(--texto-3);
  font-variant-numeric: tabular-nums; min-width: 4ch; text-align: center;
}

@media (max-width: 920px) {
  .carrusel__pista > li { flex: 0 0 calc((100% - 1.25rem) / 2); }
}
@media (max-width: 700px) {
  .carrusel__pista > li { flex: 0 0 100%; }
}

/* El deslizamiento es decorativo: quien pidió menos movimiento no lo recibe */
@media (prefers-reduced-motion: reduce) {
  .carrusel__pista { transition: none; }
}