/* =========================================================
   VOA CHILE — tema navy + dorado (redisenio sobre mockups de Marianela)
   Tema oscuro fijo (no responde a prefers-color-scheme): la marca pidio
   fondo navy en TODAS las secciones, no es un "modo oscuro" opcional.
   ========================================================= */
:root {
  color-scheme: dark;

  /* Deja transicionar hacia `auto`, que es lo que hace posible animar el
     despliegue de las tarjetas de Destinos sin medir alturas con JavaScript.
     Donde no se soporte, se ignora y el bloque aparece sin animar. */
  interpolate-size: allow-keywords;

  --navy-950: #080b14;
  --navy-900: #0b0f1c;
  --navy-800: #111828;
  --navy-700: #182136;
  --navy-600: #202b47;
  --line: rgba(244, 241, 234, 0.10);
  --line-strong: rgba(244, 241, 234, 0.18);

  --gold: #d4a24c;
  --gold-light: #e9c583;
  --gold-dark: #a97c34;
  --gold-ink: #2a1c07;

  --text: #f4f1ea;
  --text-dim: #aab0c4;
  --text-dimmer: #7c8299;

  --radius-md: 12px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-md: 0 20px 46px rgba(3, 5, 12, 0.55);
  --shadow-gold: 0 16px 34px rgba(212, 162, 76, 0.22);
  --transition: 0.35s cubic-bezier(0.16, 1, 0.3, 1);

  --font-display: 'Archivo', 'Segoe UI', sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--navy-950);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

.container {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text);
  margin: 0;
  letter-spacing: -0.01em;
  font-weight: 800;
}

p { margin: 0; color: var(--text-dim); }
a { color: inherit; }
strong { color: var(--text); }

.gold { color: var(--gold); }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--gold); color: var(--gold-ink); font-weight: 700; padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }

/* =========================================================
   BUTTONS — un radio (pill) para todos, un solo dorado de acento
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  font-family: var(--font-display); font-weight: 700; font-size: 0.9rem;
  letter-spacing: 0.03em; text-transform: uppercase;
  padding: 0.85rem 1.6rem; border-radius: var(--radius-pill);
  text-decoration: none; white-space: nowrap; border: 1px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition);
  cursor: pointer;
}
.btn:active { transform: scale(0.97); }
.btn--primary {
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 55%, var(--gold-dark));
  color: var(--gold-ink);
}
.btn--primary:hover { box-shadow: var(--shadow-gold); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-light); }
.btn--outline-gold { background: transparent; color: var(--gold-light); border-color: var(--gold); }
.btn--outline-gold:hover { background: rgba(212, 162, 76, 0.1); }
.btn--lg { padding: 1.05rem 2.1rem; font-size: 0.95rem; }
.btn--full { width: 100%; }
.btn--sm { padding: 0.6rem 1.15rem; font-size: 0.78rem; }
.btn--nav { display: none; }
@media (min-width: 900px) { .btn--nav { display: inline-flex; } }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--navy-950) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; gap: 1.5rem;
}
.brand { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.brand__logo { display: block; height: 42px; width: auto; }
@media (min-width: 900px) { .brand__logo { height: 48px; } }
.brand--footer .brand__logo { height: 54px; }

.main-nav { display: none; gap: 1.9rem; font-weight: 600; font-size: 0.86rem; letter-spacing: 0.04em; text-transform: uppercase; }
.main-nav a { text-decoration: none; color: var(--text-dim); transition: color var(--transition); position: relative; padding-bottom: 6px; }
.main-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--gold);
  transition: right var(--transition);
}
.main-nav a:hover { color: var(--text); }
.main-nav a.is-active { color: var(--gold-light); }
.main-nav a.is-active::after { right: 0; }
@media (min-width: 900px) { .main-nav { display: flex; } }

.nav-toggle {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius-md);
  border: 1px solid var(--line-strong); background: var(--navy-800); color: var(--text); font-size: 1.25rem; cursor: pointer;
}
@media (min-width: 900px) { .nav-toggle { display: none; } }
/* 10-09: el menu de celular abria y cerraba de golpe y EMPUJABA la pagina
   entera hacia abajo. Las dos cosas salian de la misma linea, que lo alternaba
   con `display`: display no se puede animar, y un elemento en el flujo del
   header desplaza todo lo que viene despues al aparecer.
   Ahora cuelga del header (que es sticky, o sea sirve de ancla) y se anima con
   opacity + transform. `visibility` se apaga recien al terminar la salida: sin
   eso los enlaces siguen siendo enfocables con el menu cerrado. */
.mobile-nav {
  position: absolute; top: 100%; left: 0; right: 0;
  display: flex; flex-direction: column; gap: 1rem; padding: 1.1rem clamp(1.25rem, 4vw, 2.5rem) 1.6rem;
  border-bottom: 1px solid var(--line); background: var(--navy-900);
  box-shadow: 0 18px 34px rgba(0,0,0,0.38);
  transform-origin: top;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s;
}
.mobile-nav a {
  text-decoration: none; font-weight: 700; font-size: 0.88rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text);
}
.mobile-nav a.is-active { color: var(--gold-light); }
/* Sigue en el DOM con display:flex para poder animarlo; lo que lo saca de la
   pantalla, del foco y de los lectores es visibility. */
.mobile-nav[hidden] {
  display: flex;
  opacity: 0; transform: translateY(-8px);
  visibility: hidden; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
@media (prefers-reduced-motion: reduce) {
  .mobile-nav, .mobile-nav[hidden] { transition: none; transform: none; }
}
/* En escritorio no existe: si alguien lo abre en celular y agranda la ventana,
   no puede quedar colgando sobre el contenido. */
@media (min-width: 900px) { .mobile-nav { display: none; } }

/* =========================================================
   EYEBROW (uso restringido: maximo 4 en toda la pagina)
   ========================================================= */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-body); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 1rem;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--gold); display: inline-block; }

/* =========================================================
   HERO — home (mockup 3): imagen de fondo, scrim, copy izquierda
   ========================================================= */
/* 09-09: la foto de fondo ahora cubre el hero Y LAS DOS HUINCHAS. Antes vivia
   solo dentro del hero y las huinchas la tapaban con su propio fondo solido,
   asi que en escritorio se veia apenas un tercio de la imagen. Pedido textual:
   "que la foto de fondo se vea completa, y para ello las huinchas de abajo
   deben ser semitransparentes". */
.home-top { position: relative; overflow: hidden; }
.home-top__bg { position: absolute; inset: 0; z-index: 0; }
/* <picture> es inline por defecto: sin esto no ocupa el alto del bloque y la
   foto se desploma. El <img> de adentro es el que lleva el cover. */
.home-top__bg picture { display: block; width: 100%; height: 100%; }
.home-top__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.home-top__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8,11,20,0.92) 0%, rgba(8,11,20,0.7) 38%, rgba(8,11,20,0.26) 68%, rgba(8,11,20,0.5) 100%),
    linear-gradient(0deg, rgba(8,11,20,0.6) 0%, transparent 46%);
}

.hero {
  position: relative; z-index: 1;
  padding-block: clamp(3rem, 9vh, 5rem) clamp(2.5rem, 7vh, 4rem);
  /* ALTO FIJO EN CELULAR, SIN UNIDADES DE VIEWPORT.
     Con `dvh` el hero seguia al viewport EN VIVO: apenas se hace scroll en el
     telefono la barra de URL se retrae, el viewport crece ~70 px y el hero
     crecia con el, corriendo TODO el contenido de abajo bajo el dedo. Eso era
     el "se bugea al hacer scroll".
     `svh` deberia arreglarlo por especificacion, pero no hay forma de
     comprobarlo en un navegador sin barra retractil: la medicion daba igual
     con las dos unidades. Asi que en celular se saca la unidad de viewport de
     raiz y se usan pixeles. No puede saltar porque ya no depende del viewport.
     En >=1024px se sigue usando svh, que ahi es estable y permite cuadrar el
     hero + las dos huinchas en una pantalla. */
  min-height: 520px;
  display: flex; align-items: center;
}
/* Obs.: en PC tiene que verse el hero MAS las dos huinchas de iconos sin
   scrollear. Se acota el alto del hero en vez de dejarlo a pantalla completa;
   en celular se mantiene alto porque ahi el scroll es lo natural. */

/* El rotulo "Transporte y Turismo" va ARRIBA del titular, con el mismo
   tratamiento del de "Nuestros servicios" (pedido de la clienta, 09-09). */
.hero__eyebrow { margin-bottom: 0.9rem; }
/* Obs.: todo el texto principal va a mano izquierda, como en la propuesta.
   El max-width iba aca y, como este div TAMBIEN es .container (que se centra
   solo), dejaba el bloque de 640px en el medio de la pantalla en vez de a la
   izquierda. El ancho se limita en los hijos. */
/* .hero es flex, asi que este div es un flex item: sin width:100% se encoge
   al ancho de su contenido y el margin-inline:auto de .container lo deja en
   el medio. Medido: el titulo arrancaba en x=390 con la ventana en 1440. */
.hero__inner { position: relative; z-index: 1; text-align: left; width: 100%; }
.hero__inner > * { max-width: 660px; margin-inline: 0; }
.hero__title {
  font-size: clamp(2.2rem, 5.4vw, 3.9rem); line-height: 1.04; margin-bottom: 1.4rem;
  text-wrap: balance;
}
/* Obs.: la unica letra dorada del texto principal dice "Transporte y Turismo",
   que es como se describe la empresa en su propio logo. */
.hero__title-linea {
  display: block; font-size: 0.52em; letter-spacing: 0.05em; font-weight: 700;
  margin-top: 0.5rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* =========================================================
   FRANJA DE SERVICIOS RAPIDOS (bajo el hero) — 5 columnas, iconos linea
   ========================================================= */
/* SEMITRANSPARENTE a proposito: la foto del hero pasa por detras. El velo es
   suficiente para que el texto siga legible (se midio contraste sobre la zona
   mas clara de la foto) sin volver a tapar la imagen. */
.quick-services {
  position: relative; z-index: 1;
  background: color-mix(in srgb, var(--navy-900) 74%, transparent);
  backdrop-filter: blur(6px);
  border-block: 1px solid var(--line);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.quick-services__grid {
  display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px) { .quick-services__grid { grid-template-columns: repeat(5, 1fr); } }
.quick-service { text-align: left; }
.quick-service i { font-size: 2rem; color: var(--gold); margin-bottom: 0.9rem; display: block; }
.quick-service h3 { font-size: 1rem; margin-bottom: 0.4rem; }
.quick-service p { font-size: 0.86rem; max-width: 24ch; }

/* =========================================================
   FRANJA DE CONFIANZA + STATS
   ========================================================= */
.trust-strip {
  position: relative; z-index: 1;
  background: color-mix(in srgb, var(--navy-950) 76%, transparent);
  backdrop-filter: blur(6px);
  padding-block: clamp(3rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--line);
}
.trust-strip__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 960px) { .trust-strip__grid { grid-template-columns: 0.9fr 1.3fr; } }
.trust-strip__copy h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2; margin-bottom: 0.8rem; }
.trust-strip__copy p { font-size: 1rem; max-width: 40ch; }
/* Obs.: aca iban 4 iconos genericos; ahora van los 4 tipos de movil con su
   capacidad. Se usan las fotos reales de la flota y no iconos de linea porque
   el set de iconos no distingue un minibus de un bus: seria el mismo dibujo
   dos veces, justo donde el punto es que se noten distintos. */
.capacidad-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem 1.4rem; }
@media (min-width: 640px) { .capacidad-grid { grid-template-columns: repeat(4, 1fr); } }
.capacidad {
  display: flex; flex-direction: column; gap: 0.2rem; min-width: 0;
  padding-left: 1.3rem; border-left: 1px solid var(--line);
}
.capacidad:first-child { border-left: none; padding-left: 0; }
@media (max-width: 639px) {
  .capacidad:nth-child(odd) { border-left: none; padding-left: 0; }
}
/* 09-09: los iconos pasaron de viewBox 32x28 a 44x24, o sea son mas anchos y
   mas bajos. A 42px quedaban diminutos: se suben a 56. */
.capacidad__movil { width: 56px; height: auto; color: var(--gold); margin-bottom: 0.35rem; }
.capacidad strong { font-family: var(--font-display); font-size: 1.02rem; font-weight: 800; }
.capacidad span { font-size: 0.79rem; color: var(--text-dim); line-height: 1.35; }

/* =========================================================
   SECTIONS (generico)
   ========================================================= */
.section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section--alt { background: var(--navy-900); }
.section__head { margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 720px; }
.section__head--wide { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.section__head--wide .section__title { margin-bottom: 0; }
.section__title { font-size: clamp(1.9rem, 3.6vw, 2.7rem); line-height: 1.12; }
.section__title--center { text-align: center; margin-inline: auto; }
.section__note { text-align: center; margin-top: 0.9rem; font-size: 0.88rem; color: var(--text-dimmer); font-style: italic; }

/* =========================================================
   SERVICIOS — 5 tarjetas con foto de fondo + overlay
   ========================================================= */
.service-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .service-grid { grid-template-columns: repeat(5, 1fr); } }
.service-card {
  position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 340px;
  border: 1px solid var(--line); transition: transform var(--transition), box-shadow var(--transition);
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.service-card__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.service-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,11,20,0.15) 0%, rgba(8,11,20,0.55) 55%, rgba(8,11,20,0.92) 100%);
}
.service-card__body { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.6rem 1.4rem; gap: 0.5rem; }
.service-card__icon {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--gold); color: var(--gold); font-size: 1.2rem; margin-bottom: 0.3rem;
}
.service-card__body h3 { color: #fff; font-size: 1.1rem; }
.service-card__body p { color: rgba(244,241,234,0.78); font-size: 0.88rem; }
.service-card__rule { width: 34px; height: 3px; background: var(--gold); border-radius: var(--radius-pill); margin-top: 0.3rem; }

/* =========================================================
   DESTINOS — grilla con ventana desplegable
   Obs.: "ventana desplegable" NO es una pagina interior: el mismo cuadro se
   extiende hacia abajo. <details> hace exactamente eso y sigue funcionando
   con el JavaScript apagado.
   ========================================================= */
/* stretch, no start: con alturas distintas por fila el "Ver mas" de cada
   tarjeta quedaba a distinta altura y la grilla se veia desordenada. */
/* 09-09: EL BUG DEL HUECO. Estaba en `align-items: stretch`, que es el valor
   por defecto del grid: todas las celdas de una fila miden lo mismo que la mas
   alta. Al desplegar UNA tarjeta, las otras dos de su fila crecian igual y
   quedaban con medio metro de vacio abajo.
   Con `start` cada tarjeta mide lo suyo. Para que las CERRADAS sigan pareja
   -que es lo que daba el stretch y se veia bien- se les reserva el alto del
   titulo y la bajada mas largos, mas abajo. */
.destinos-grid { display: grid; gap: 1.4rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 680px)  { .destinos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .destinos-grid { grid-template-columns: repeat(3, 1fr); } }

.destino-card {
  background: var(--navy-800); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column; min-width: 0;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.destino-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.destino-card__media { position: relative; }
.destino-card__media img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; }
.destino-card__sinfoto {
  aspect-ratio: 4 / 3; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
  background: linear-gradient(150deg, var(--navy-700), var(--navy-900));
  color: var(--text-dimmer);
}
.destino-card__sinfoto i { font-size: 2rem; color: var(--gold-dark); }
.destino-card__sinfoto span { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.destino-card__pin {
  position: absolute; top: 0.85rem; left: 0.85rem; display: inline-flex; align-items: center; gap: 0.35rem;
  background: rgba(8,11,20,0.74); backdrop-filter: blur(4px); color: var(--gold-light);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.35rem 0.65rem; border-radius: var(--radius-pill); border: 1px solid rgba(212,162,76,0.35);
}
.destino-card__body { padding: 1.25rem 1.35rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.destino-card__body h3 { font-size: 1.12rem; line-height: 1.25; margin-bottom: 0.55rem; }
.destino-card__bajada { font-size: 0.9rem; }

.destino-card__mas { margin-top: auto; padding-top: 1rem; }
.destino-card__mas > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-display); font-weight: 700; font-size: 0.82rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-light);
  /* 44px de alto minimo: es un control tactil, no una linea de texto. */
  min-height: 44px;
}
.destino-card__mas > summary::-webkit-details-marker { display: none; }
.destino-card__mas > summary:hover { color: var(--gold); }
.destino-card__mas > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--radius-md); }
.destino-card__mas > summary i { transition: transform var(--transition); font-size: 1rem; }
.destino-card__mas[open] > summary i { transform: rotate(180deg); }
.destino-card__cerrar { display: none; }
.destino-card__mas[open] .destino-card__abrir { display: none; }
.destino-card__mas[open] .destino-card__cerrar { display: inline; }
.destino-card__texto {
  display: flex; flex-direction: column; gap: 0.75rem;
  padding-top: 0.9rem; margin-top: 0.2rem; border-top: 1px solid var(--line);
}
.destino-card__texto p { font-size: 0.88rem; }
.destino-card__texto .btn { align-self: flex-start; margin-top: 0.35rem; }

/* --- Tarjetas cerradas, todas del mismo alto -------------------------------
   Sin el stretch del grid, un titulo de dos lineas contra uno de una dejaba
   las tarjetas desparejas. Se RESERVA el alto (min-height), no se recorta
   texto: si algun titulo crece, la tarjeta crece con el.
   Solo desde 680px, que es cuando hay mas de una columna: en celular van una
   debajo de otra y reservar alto seria un hueco al pedo. */
@media (min-width: 680px) {
  .destino-card__body h3 { min-height: calc(1.12rem * 1.25 * 2); }
  .destino-card__bajada  { min-height: calc(0.9rem * 1.65 * 4); }
}

/* --- El despliegue, animado ------------------------------------------------
   <details> no anima por si solo: pasa de display:none a visible de un golpe.
   ::details-content es la caja que envuelve todo menos el <summary>, y con
   interpolate-size se puede transicionar hacia `auto`, que es justo lo que
   antes obligaba a medir el alto con JavaScript.
   Donde el navegador no lo soporte, el bloque simplemente aparece sin animar:
   es el comportamiento de hoy, no se rompe nada. */
.destino-card__mas::details-content {
  block-size: 0;
  overflow: clip;
  opacity: 0;
  transition:
    block-size 0.52s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.34s ease,
    content-visibility 0.52s allow-discrete;
}
.destino-card__mas[open]::details-content { block-size: auto; opacity: 1; }

/* El contenido entra escalonado, no todo de una: el ojo sigue el orden de
   lectura en vez de recibir el bloque completo de golpe. */
@keyframes destino-entra {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.destino-card__mas[open] .destino-card__texto > * {
  animation: destino-entra 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.destino-card__mas[open] .destino-card__texto > *:nth-child(1) { animation-delay: 0.10s; }
.destino-card__mas[open] .destino-card__texto > *:nth-child(2) { animation-delay: 0.17s; }
.destino-card__mas[open] .destino-card__texto > *:nth-child(3) { animation-delay: 0.24s; }
.destino-card__mas[open] .destino-card__texto > *:nth-child(4) { animation-delay: 0.31s; }

/* La linea del borde superior se dibuja de izquierda a derecha en vez de
   aparecer entera. */
.destino-card__texto { border-top: none; position: relative; }
.destino-card__texto::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--line) 55%, transparent 100%);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.06s;
}
.destino-card__mas[open] .destino-card__texto::before { transform: scaleX(1); }

/* La tarjeta abierta se despega del resto: borde dorado tenue y sombra. */
.destino-card:has(.destino-card__mas[open]) {
  border-color: rgba(212, 162, 76, 0.42);
  box-shadow: var(--shadow-md);
}

/* El caret con un rebote corto, en vez del giro plano de antes. */
.destino-card__mas > summary i { transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); }

@media (prefers-reduced-motion: reduce) {
  .destino-card__mas::details-content,
  .destino-card__mas > summary i,
  .destino-card__texto::before { transition: none; }
  .destino-card__mas[open] .destino-card__texto > * { animation: none; }
  .destino-card__mas[open] .destino-card__texto::before { transform: scaleX(1); }
}

/* =========================================================
   FLOTA — dos vehiculos lado a lado
   ========================================================= */
.fleet-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .fleet-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .fleet-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }
.fleet-card__body h3 { margin-bottom: 0.45rem; }
.fleet-card__range { margin-bottom: 0.7rem; }
.fleet-card {
  background: var(--navy-800); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.fleet-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.fleet-card__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; height: auto; }
.fleet-card__body { padding: 1.5rem 1.6rem 1.75rem; }
.fleet-card__range { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.fleet-card__range i { font-size: 1.4rem; color: var(--gold); }
.fleet-card__range strong { font-family: var(--font-display); font-size: 1.15rem; }
.fleet-card__body h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.fleet-card__body p { font-size: 0.92rem; }

/* =========================================================
   NOSOTROS — imagen + lista (unico bloque split de la pagina)
   ========================================================= */
.why-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 960px) { .why-grid { grid-template-columns: 0.85fr 1.15fr; } }
/* 1/1 y no 4/5: la imagen de esta seccion NO es una fotografia, es un grafico
   con texto (los cinco atributos de la marca). Con el recorte 4/5 se comian las
   palabras de los costados y se leia "PERIENCIA" y "PERSONALIZA". Un grafico
   con texto no se puede recortar; el contenedor se adapta a la imagen. */
/* 11-09: fuera el recuadro. El fondo azul NO era CSS -- venia pintado dentro
   del propio WebP, asi que el archivo se recorto en circulo con alfa. Lo que
   queda aca es solo sacar la caja que le ponia el CSS encima: el radio de
   esquina y la sombra rectangular, que sobre una imagen circular se veian como
   una sombra flotando en el aire.
   La sombra pasa a drop-shadow, que sigue la forma REAL de la imagen (el
   circulo) en vez de su caja. */
.why-grid__media {
  position: relative;
  perspective: 1100px;               /* para la inclinacion con el puntero */
}
.why-grid__media img {
  position: relative; z-index: 1;
  aspect-ratio: 1 / 1; object-fit: contain; width: 100%; height: auto;
  border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 18px 38px rgba(0, 0, 0, 0.55));
  transform-style: preserve-3d;
  will-change: transform;
}

/* ENTRADA. La rueda entra girando un poco y creciendo, no subiendo: es un
   circulo, y el gesto que le corresponde es rotar sobre su centro.
   El estado lo pone `.is-visible`, que ya lo aplica el IntersectionObserver del
   sitio sobre .why-grid__media -- no hace falta otro observador. */
html.js .why-grid__media img {
  transform: scale(0.84) rotate(-7deg);
  transition: transform 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.05s;
}
html.js .why-grid__media.is-visible img { transform: scale(1) rotate(0deg); }

/* HALO. Detras del circulo, en el dorado de la marca. Florece al entrar y
   despues respira lento. Va en ::before para no tocar el HTML. */
.why-grid__media::before {
  content: ""; position: absolute; inset: 4%; border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 162, 76, 0.40), transparent 70%);
  filter: blur(34px);
  opacity: 0; transform: scale(0.7);
  transition: opacity 1.3s ease 0.25s, transform 1.3s ease 0.25s;
  pointer-events: none; z-index: 0;
}
html.js .why-grid__media.is-visible::before { opacity: 1; transform: scale(1); }

/* ANILLO QUE ORBITA. Un arco dorado recorriendo el borde, sin fin.
   Es un conic-gradient recortado a una banda fina con mask: asi queda un anillo
   y no un disco. Se anima con transform (lo mueve el compositor), no con la
   posicion del gradiente, que obligaria a repintar en cada cuadro. */
.why-grid__media::after {
  /* inset 0, NO negativo: sacarlo de la caja hacia afuera hacia que la pagina
     scrollee 57 px de lado a 412 px (medido desarmandolo). Un resplandor no
     puede cambiar el layout -- el brillo de afuera lo hace el drop-shadow de
     mas abajo, que no ocupa espacio. */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from var(--voa-giro),
    transparent 0 52%,
    rgba(212, 162, 76, 0.40) 66%,
    rgba(255, 224, 165, 0.98) 78%,
    #fff3d8 82%,
    rgba(255, 224, 165, 0.98) 86%,
    rgba(212, 162, 76, 0.40) 94%,
    transparent 100%);
  /* La banda del anillo: un pelo mas ancha que antes. Con 1,2% de grosor el
     arco quedaba invisible en pantalla (medido mirando la captura). */
  -webkit-mask: radial-gradient(circle, transparent 0 47.4%, #000 48.8% 51.2%, transparent 52.6%);
          mask: radial-gradient(circle, transparent 0 47.4%, #000 48.8% 51.2%, transparent 52.6%);
  filter: drop-shadow(0 0 9px rgba(212, 162, 76, 0.65));
  opacity: 0; transition: opacity 1s ease 0.7s;
  pointer-events: none; z-index: 2;
}
html.js .why-grid__media.is-visible::after {
  opacity: 1; animation: voa-orbita 9s linear 0.7s infinite;
}

/* Gira el GRADIENTE, no el elemento.
   Rotar el ::after con transform parecia lo obvio y rompia la pagina: el
   elemento es un CUADRADO de 469x469 -- la mascara solo lo hace VER redondo--
   y al rotarlo su caja crece hasta la diagonal (~663 px). A 412 px eso empujaba
   45 px de scroll horizontal. Medido desarmando la animacion.
   Animando el angulo del conic-gradient no hay transform, asi que la caja no se
   mueve. Necesita @property para que el angulo sea interpolable; donde no
   exista, el anillo se queda quieto y el bloque se ve igual. */
@property --voa-giro {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes voa-orbita { to { --voa-giro: 360deg; } }

/* INCLINACION CON EL PUNTERO. Vive en su propia capa a proposito: el wrapper
   ya usa transform para el reveal y el <img> para la entrada. Tres transforms
   en el mismo elemento se pisan; en tres elementos se componen solos. */
.why-orb {
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.why-grid__media:hover .why-orb { transition-duration: 0.12s; }

/* Solo donde hay puntero de verdad. En un telefono no hay hover y el JS ni se
   engancha, asi que esto no le cuesta nada al celular. */
@media (hover: none) { .why-orb { transform: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .why-orb { transform: none !important; transition: none !important; }
}

/* NADA DE ESTO CORRE si el visitante pidio menos movimiento. La imagen se ve
   igual, quieta y completa: la animacion es adorno, no contenido. */
@media (prefers-reduced-motion: reduce) {
  html.js .why-grid__media img,
  html.js .why-grid__media.is-visible img { transform: none !important; transition: none !important; }
  .why-grid__media::after { display: none; }
  .why-grid__media::before { opacity: 1 !important; transform: none !important; transition: none !important; }
}
.why-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-direction: column; }
.why-list li {
  display: flex; gap: 1.1rem; align-items: flex-start; padding-block: 1.2rem;
  border-top: 1px solid var(--line);
}
.why-list li:last-child { border-bottom: 1px solid var(--line); }
.why-list i { font-size: 1.5rem; color: var(--gold); flex-shrink: 0; margin-top: 0.15rem; }
.why-list h3 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.why-list p { font-size: 0.92rem; }

/* =========================================================
   CONTACTO — hero propio + formulario + aside
   ========================================================= */
.contact-hero { position: relative; padding-block: clamp(3.5rem, 7vw, 5.5rem) 0; overflow: hidden; }
.contact-hero__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); grid-template-columns: 1fr; }
@media (min-width: 1040px) { .contact-hero__grid { grid-template-columns: 1.05fr 0.75fr; align-items: start; } }
.contact-hero__copy { max-width: 620px; }
.contact-hero__titulo { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.14; margin-bottom: 1.1rem; }
.contact-hero__copy > p { font-size: 1rem; max-width: 48ch; margin-bottom: 0; }
.contact-hero__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; order: -1; box-shadow: var(--shadow-md); }
.contact-hero__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; height: auto; }
@media (min-width: 1040px) { .contact-hero__media { order: 0; aspect-ratio: auto; } .contact-hero__media img { aspect-ratio: 4 / 5; } }
.contact-hero__plane {
  position: absolute; top: 1.4rem; right: 1.6rem; width: 30px; height: 30px; color: var(--gold-light);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}

.contact-grid { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); grid-template-columns: 1fr; min-width: 0; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 1040px) { .contact-grid { grid-template-columns: 1.3fr 0.9fr; } }
.contact-grid__main { min-width: 0; }

.form-card {
  background: var(--navy-800); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem); min-width: 0;
}
#requestForm { display: flex; flex-direction: column; gap: 1.15rem; min-width: 0; }
.field-row { display: grid; gap: 1.15rem; grid-template-columns: 1fr 1fr; min-width: 0; }
.field { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.field label { font-weight: 600; font-size: 0.86rem; color: var(--text); }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 0.95rem; padding: 0.75rem 0.95rem;
  border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--navy-900);
  color: var(--text); width: 100%; min-width: 0; box-sizing: border-box;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-dimmer); opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold);
}
.field__error { display: none; color: #ff9b8a; font-size: 0.8rem; }
.field.is-invalid input, .field.is-invalid select { border-color: #d9645a; }
.field.is-invalid .field__error { display: block; }

/* Campo trampa del antispam: fuera de pantalla, no display:none, porque hay
   bots que ignoran lo que esta oculto con display. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-estado {
  margin: 0; font-size: 0.9rem; padding: 0.85rem 1rem; border-radius: var(--radius-md);
  border: 1px solid var(--line-strong); background: var(--navy-900);
}
.form-estado[hidden] { display: none; }
.form-estado.is-ok { border-color: rgba(212,162,76,0.55); color: var(--gold-light); }
.form-estado.is-error { border-color: #d9645a; color: #ffb3a6; }

.btn--submit { display: flex; flex-direction: column; gap: 0.2rem; padding-block: 1.1rem; }
.btn--submit__label { display: flex; align-items: center; gap: 0.6rem; font-size: 1rem; }
.btn--submit__hint { font-family: var(--font-body); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.02em; text-transform: none; color: var(--gold-ink); opacity: 0.75; }

.trust-badges { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, 1fr); margin-top: clamp(2rem, 4vw, 2.75rem); }
@media (min-width: 720px) { .trust-badges { grid-template-columns: repeat(4, 1fr); } }
.trust-badge { display: flex; flex-direction: column; gap: 0.5rem; }
.trust-badge i { font-size: 1.6rem; color: var(--gold); }
.trust-badge h3 { font-size: 0.92rem; }
.trust-badge p { font-size: 0.8rem; }

.contact-grid__side { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.aside-card {
  background: var(--navy-800); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.6rem 1.7rem;
}
.aside-card h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 1rem; }

.whatsapp-card { display: flex; flex-direction: column; gap: 0.3rem; }
.whatsapp-card__top { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.4rem; }
.whatsapp-card__icon {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--gold); color: var(--gold-ink); font-size: 1.4rem; flex-shrink: 0;
}
.whatsapp-card__top p { font-size: 0.9rem; color: var(--text); font-weight: 600; }
.whatsapp-card__number { text-decoration: none; font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; color: var(--text); }
.whatsapp-card__number:hover { color: var(--gold-light); }
.whatsapp-card span { font-size: 0.82rem; color: var(--text-dimmer); }

/* Obs.: del mapa se sacaron el titulo y el boton; la tarjeta queda solo con
   el mapa, asi que no necesita el relleno de una tarjeta con texto. */
.map-card { padding: 0.75rem; overflow: hidden; }
.map-card .mapa { width: 100%; height: auto; display: block; border-radius: var(--radius-md); }
.mapa__santiago {
  font-family: 'Archivo', 'Segoe UI', sans-serif; font-size: 11px; font-weight: 800;
  letter-spacing: 0.14em; fill: #fff6e0;
}
.mapa__ciudad {
  font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif; font-size: 9px; font-weight: 600;
  fill: #c3ccdf;
}

.mini-fleet { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1rem; }
.mini-fleet__item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; height: auto; border-radius: var(--radius-md); margin-bottom: 0.5rem; }
.mini-fleet__item .mini-fleet__range { display: flex; align-items: center; gap: 0.4rem; font-family: var(--font-display); font-weight: 700; font-size: 0.88rem; margin-bottom: 0.25rem; }
.mini-fleet__item .mini-fleet__range i { color: var(--gold); font-size: 1rem; }
.mini-fleet__item p { font-size: 0.78rem; }

/* =========================================================
   FOOTER + MARQUEE DE LOGOS (unico marquee de la pagina)
   ========================================================= */
.site-footer { background: var(--navy-950); color: var(--text-dim); border-top: 1px solid var(--line); }
.trust-bar { padding-block: clamp(2.25rem, 5vw, 3.25rem); overflow: hidden; border-bottom: 1px solid var(--line); }
.trust-bar__title { text-align: center; margin: 0 0 1.6rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dimmer); }
.trust-bar__viewport {
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.trust-bar__track {
  display: flex; align-items: stretch; width: max-content; margin: 0; padding: 0.25rem 0; list-style: none;
  /* 09-09: de 24s a 45s. La clienta pidio "bajar un poco la velocidad" y a 24s
     con 21 logos no alcanzaba a leerse ninguno. */
  animation: trust-scroll 45s linear infinite;
}
.trust-bar__item { flex: 0 0 auto; display: flex; margin-right: 1rem; }
@keyframes trust-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.trust-logo {
  display: flex; flex-direction: column; gap: 0.25rem; min-width: 210px; padding: 1rem 1.4rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; color: var(--text);
}
.trust-logo small { font-weight: 500; font-size: 0.66rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dimmer); }

/* 09-09: FUERA LA CHAPITA BLANCA. La clienta mando una referencia (agencia de
   transporte) con los logos en gris claro directo sobre el fondo oscuro, sin
   caja. Los archivos se reprocesaron a silueta gris con fondo transparente
   -ver herramientas/monocromar_logos.py-, asi que ya no hace falta la chapita
   que los unificaba.
   El gris queda al 62% de opacidad y sube a 100% al pasar el mouse: es el
   gesto de "clientes" sin que los logos compitan con el contenido. */
/* 10-09: Marianela aviso que "hay un par de logos que no se notan para nada,
   se pierden totalmente". No era el color: medido, la diferencia entre 0.62 y
   1.0 de opacidad es casi nula en pantalla. Era la CAJA.
   Con 168x72 el area util quedaba en 139x59 (ratio 2.36) y `object-fit:
   contain` hace que un logo horizontal tope por ancho y llene, mientras uno
   vertical topa por alto y queda angosto: komatsu (255x50) pintaba 139px de
   ancho y huechuraba (96x150) solo 38. Un tercio del tamano, al lado.
   Subir el alto de la caja deja crecer a los verticales sin tocar a los
   horizontales, que ya topaban por ancho. */
.trust-logo--real {
  display: flex; align-items: center; justify-content: center;
  width: 176px; height: 104px; padding: 0.4rem 0.9rem;
  background: none; border: none; border-radius: 0; overflow: hidden;
  opacity: 0.85; transition: opacity var(--transition);
}
.trust-logo--real:hover { opacity: 1; }
.trust-logo--real img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Los sellos institucionales a sangre ya no necesitan tratamiento aparte: al
   quedar todos monocromados, el color solido dejo de ser el problema. */
.trust-logo--real.trust-logo--fullbleed { padding: 0.4rem 0.9rem; }
.trust-logo--real.trust-logo--fullbleed img { width: 100%; height: 100%; object-fit: contain; }

.site-footer__grid { display: grid; gap: 2.25rem; grid-template-columns: 1fr; padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.5rem; }
@media (min-width: 720px)  { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1000px) { .site-footer__grid { grid-template-columns: 1.3fr 1fr 0.8fr 1.1fr; } }
/* Obs.: medios de pago en el pie de pagina. La imagen viene con fondo
   blanco, asi que va sobre una chapita clara en vez de flotar sobre el
   navy y dejar un rectangulo suelto. */
/* La imagen de medios de pago viene con su propio fondo, asi que no se le
   pone otro encima: quedaba un marco dentro de otro marco. */
.site-footer__pagos img { height: auto; border-radius: var(--radius-md); max-width: 280px; }
.site-footer__grid p { color: var(--text-dimmer); margin-top: 0.75rem; font-size: 0.9rem; max-width: 32ch; }
.site-footer__grid h4 { color: var(--text); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; }
.site-footer__grid a { display: block; text-decoration: none; color: var(--text-dim); font-size: 0.92rem; margin-bottom: 0.6rem; }
.site-footer__grid a:hover { color: var(--gold-light); }
.site-footer__copy { text-align: center; font-size: 0.8rem; color: var(--text-dimmer); padding-block: 1.4rem; border-top: 1px solid var(--line); }

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
html.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
html.js .reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal--delay-1.is-visible { transition-delay: 0.08s; }
.reveal--delay-2.is-visible { transition-delay: 0.16s; }
.reveal--delay-3.is-visible { transition-delay: 0.24s; }
.reveal--delay-4.is-visible { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-visible { opacity: 1 !important; transform: none !important; transition: none !important; }
  .trust-bar__track { animation: none; }
}

/* =========================================================
   TAMANO TACTIL — 44px minimos en pantallas de dedo
   Va al final a proposito: con la misma especificidad gana la ultima regla.
   ========================================================= */
@media (pointer: coarse) {
  .brand { min-height: 44px; }
  .btn { min-height: 44px; }
  .btn--sm { min-height: 44px; padding-block: 0.7rem; }
  .nav-toggle { width: 46px; height: 46px; }
  .main-nav a, .mobile-nav a { min-height: 44px; display: inline-flex; align-items: center; }
  .whatsapp-card__number { min-height: 44px; display: inline-flex; align-items: center; }
  .site-footer__grid a { min-height: 44px; display: flex; align-items: center; margin-bottom: 0.2rem; }
}

/* =========================================================
   INICIO EN UNA PANTALLA (PC)
   Obs. 5: al abrir la pagina en PC tienen que verse el hero y las dos
   huinchas sin scrollear. VA AL FINAL A PROPOSITO: .quick-services y
   .trust-strip se declaran mas arriba con la misma especificidad, y con
   especificidad pareja gana la ultima regla del archivo. Escrito antes,
   este bloque no hacia nada (medido: la huincha 2 terminaba en y=1027
   con la ventana en 900).
   ========================================================= */
@media (min-width: 1024px) {
  /* El alto sale de una cuenta, no de un gusto: 100dvh menos el header (72px)
     menos lo que miden las dos huinchas (~360px medidos con Chrome). */
  /* svh por lo mismo que arriba: en una tablet en vertical tambien hay barra
     que se retrae, y aca el alto es fijo, asi que un dvh haria saltar la
     pagina entera. */
  .hero { min-height: 0; height: clamp(300px, calc(100svh - 440px), 520px); padding-block: 0; }
  .quick-services { padding-block: 1.5rem; }
  .quick-service i { font-size: 1.6rem; margin-bottom: 0.45rem; }
  .quick-service h3 { font-size: 0.95rem; margin-bottom: 0.2rem; }
  .quick-service p { font-size: 0.8rem; line-height: 1.45; }
  .trust-strip { padding-block: 1.6rem; }
  .trust-strip__copy h2 { font-size: 1.5rem; margin-bottom: 0.35rem; }
  .trust-strip__copy p { font-size: 0.92rem; }
  .trust-strip__grid { gap: 2rem; }
}

/* =========================================================
   OBSERVACIONES 2 (09-09-2026) — lo que quedo del documento de Marianela
   ========================================================= */

/* 1. EL TITULO QUE SE COMIA LA BARRA.
   En celular, al tocar "Destinos" o "Servicios" el titulo quedaba TAPADO por
   la barra negra del logo, que es sticky y mide 72px. El navegador lleva el
   ancla al borde de la ventana sin saber que hay algo fijo encima; esto le
   reserva ese alto. Es tambien lo que hace que "Cotizar este tour" aterrice
   en el formulario y no debajo de la barra. */
#top, #servicios, #destinos, #nosotros, #flota, #contacto, #cotiza {
  scroll-margin-top: 88px;
}

/* 2. LOS TITULOS DE SERVICIOS, TODOS A LA MISMA ALTURA.
   Las bajadas tienen largos distintos ("Comodidad y seguridad en tu trayecto"
   contra tres lineas), asi que cada tarjeta ponia su titulo donde le tocaba.
   Con grid dentro de la tarjeta, el icono, el titulo, el texto y la linea
   quedan en cuatro filas fijas: los titulos se alinean aunque el texto de
   abajo mida distinto. Pedido textual: "que los titulos esten a la misma
   altura todos". */
.service-card__body {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  /* Una columna de ancho completo, explicita. La regla base de la tarjeta
     trae `justify-content: flex-end` de cuando era flex; en grid eso empuja
     la columna a la DERECHA cuando el texto es corto, y la tarjeta de
     Aeropuerto (la bajada mas corta) quedaba corrida al medio en movil. */
  grid-template-columns: 1fr;
  justify-content: stretch;
  align-content: start;
}

/* 3. BOTON FLOTANTE DE WHATSAPP, en las dos versiones.
   Verde de marca de WhatsApp (#25D366). Va sobre todo lo demas pero por
   debajo del menu movil desplegado, para no quedar encima del menu. */
/* 10-09: se sumo Instagram al lado del de WhatsApp, como se le prometio a la
   clienta. Los dos viven ahora en `.flotantes`: la posicion la pone el
   contenedor una sola vez, en vez de darle a cada boton un `bottom` calculado
   a mano que se descuadra en cuanto uno cambie de tamano. */
.flotantes {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 45;
  display: flex; flex-direction: column; gap: 0.7rem;
}
.wa-flotante, .ig-flotante {
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff; text-decoration: none;
  box-shadow: 0 10px 26px rgba(0,0,0,0.42);
  transition: transform var(--transition), box-shadow var(--transition);
}
.wa-flotante svg, .ig-flotante svg { width: 32px; height: 32px; display: block; }
.wa-flotante:hover, .ig-flotante:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0,0,0,0.5); }
.wa-flotante:focus-visible, .ig-flotante:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
/* El degradado real de Instagram: es lo que lo hace reconocible de un vistazo. */
.ig-flotante {
  color: #fff; text-decoration: none;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  box-shadow: 0 10px 26px rgba(0,0,0,0.42);
  transition: transform var(--transition), box-shadow var(--transition);
}
@media (min-width: 900px) {
  .flotantes { right: 1.6rem; bottom: 1.6rem; gap: 0.8rem; }
  .wa-flotante, .ig-flotante { width: 60px; height: 60px; }
  .wa-flotante svg, .ig-flotante svg { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-flotante, .wa-flotante:hover,
  .ig-flotante, .ig-flotante:hover { transition: none; transform: none; }
}

/* 4. EL ICONO DE WHATSAPP DE LA BOTONERA "HABLEMOS", mas grande.
   Estaba al tamano del texto y se perdia; ahora manda el icono. */
.btn--nav i.ph-whatsapp-logo,
.mobile-nav .btn i.ph-whatsapp-logo { font-size: 1.45em; line-height: 1; }

/* 4.b LA FOTO DE FONDO, SOLO DETRAS DEL HERO EN CELULAR.
   El pedido decia "en version WEB queremos que la foto de fondo se vea
   completa". En celular las dos huinchas se apilan y el bloque queda de ~1400
   px de alto contra 412 de ancho: con object-fit: cover la foto se reduce a
   una tira vertical de cielo y cordillera, sin ciudad. Medido en Chrome a 412
   px, no supuesto.
   Asi que en celular la foto vuelve a vivir SOLO detras del hero y las
   huinchas recuperan su fondo solido, que es como estaba antes. */
@media (max-width: 899px) {
  .home-top__bg { display: none; }
  .hero::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: url("/assets/img/home-version-mobile.webp") center 62% / cover no-repeat;
  }
  .hero::after {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background:
      linear-gradient(0deg, rgba(8,11,20,0.94) 0%, rgba(8,11,20,0.45) 46%, rgba(8,11,20,0.66) 100%);
  }
  .quick-services { background: var(--navy-900); backdrop-filter: none; }
  .trust-strip { background: var(--navy-950); backdrop-filter: none; }
}

/* 5. EL FORMULARIO, MAS ARRIBA.
   Entre el titulo "Cuentanos tu viaje" y el formulario quedaba un hueco muy
   grande, sobre todo por la foto de al lado. Se acorta la foto en escritorio
   y se recorta el aire entre bloques. */
@media (min-width: 900px) {
  .contact-hero__media img { aspect-ratio: 16 / 10; }
  .contact-hero__grid { gap: 2.25rem; margin-bottom: 0.5rem; }
  .contact-hero { padding-block: clamp(2.5rem, 4.5vw, 3.5rem) 0; }
}

/* --- Redes sociales del pie ------------------------------------------------
   Usuarios confirmados por Marianela el 10-09. El link de Instagram que mando
   traia `?stkn=`, que es un token de SU sesion: se publica limpio. Su Facebook
   no tiene nombre de usuario propio, solo el id numerico, que si es estable. */
.site-footer__redes { display: flex; gap: 1.1rem; margin-top: 0.8rem; }
.site-footer__grid .site-footer__redes a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-bottom: 0; min-height: 44px;
  color: var(--text-dim); text-decoration: none; font-size: 0.88rem;
  transition: color var(--transition);
}
.site-footer__grid .site-footer__redes a:hover { color: var(--gold-light); }
.site-footer__redes svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* La firma del pie. Va con link dofollow a gogodevs.cl, igual que en
   medina4x4 y puastatuajes: esos enlaces son parte del SEO del sitio propio. */
.site-footer__copy a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.site-footer__copy a:hover { color: var(--gold-light); }