/* transelect.cl — rediseño 29-ago-2026.
   Se conserva el rojo de marca (calza con el logo) pero se moderniza todo lo demás:
   tipografía (Inter + Plus Jakarta Sans en vez de Roboto + Open Sans), radios y sombras
   en vez del look plano 2016, menos mayúsculas sostenidas, más aire. */

:root {
  --rojo: #c0282d;
  --rojo-osc: #9c2025;
  --rojo-suave: #fbebec;
  --rojo-linea: #f0c3c5;

  /* Antes "pizarra" (#2b3c4d, azul-grisáceo) y "nav"/"cuerpo"/"apagado" en la misma
     familia fría. Ahora una escala de tinta neutra, mas premium y con mas contraste. */
  --tinta: #16191d;
  --tinta-suave: #3d434a;
  --cuerpo: #5b6169;
  --apagado: #8a9098;
  --linea: #e7e5e2;
  --crema: #f7f5f2;
  --blanco: #fff;

  /* alias de compatibilidad: algunas reglas heredadas siguen usando estos nombres */
  --pizarra: var(--tinta);
  --nav: var(--tinta-suave);
  --oscuro: #14171b;

  --display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --texto: "Inter", "Segoe UI", system-ui, sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --sombra-sm: 0 1px 2px rgba(20,23,27,.05), 0 1px 1px rgba(20,23,27,.04);
  --sombra-md: 0 10px 26px rgba(20,23,27,.08), 0 2px 6px rgba(20,23,27,.05);
  --sombra-lg: 0 24px 56px rgba(20,23,27,.14), 0 6px 18px rgba(20,23,27,.07);

  --max: 1160px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--blanco);
  color: var(--cuerpo);
  font-family: var(--texto);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

.env { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

a { color: var(--rojo); }
a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--rojo);
  outline-offset: 3px;
  border-radius: 4px;
}

.saltar {
  position: absolute; left: -9999px;
  background: var(--rojo); color: var(--blanco);
  padding: 10px 18px; z-index: 100; text-decoration: none;
  font-family: var(--display); font-size: 13px; border-radius: var(--radius-sm);
}
.saltar:focus { left: 12px; top: 12px; }

/* ── Barra superior ───────────────────────────────────────────────────────── */
.barra {
  background: var(--tinta);
  font-family: var(--display); font-size: 12.5px;
}
.barra .env {
  display: flex; flex-wrap: wrap; gap: 6px 24px;
  justify-content: flex-end; align-items: baseline;
  padding-top: 9px; padding-bottom: 9px;
}
.barra span { color: #9aa0a7; margin-right: auto; }
.barra a { color: #d7d9db; text-decoration: none; font-weight: 500; }
.barra a:hover { color: #fff; }
.barra .tel { color: #ff8b8f; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Cabecera ─────────────────────────────────────────────────────────────── */
header.sitio {
  /* Nada de backdrop-filter: junto con position:sticky produce un efecto fantasma
     (contenido duplicado, hueco en blanco) al hacer scroll — reproducido y verificado.
     Fondo solido, sin sorpresas. */
  background: var(--blanco);
  box-shadow: var(--sombra-sm);
  position: sticky; top: 0; z-index: 50;
}
header.sitio .env {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-top: 16px; padding-bottom: 16px;
}
/* ── La marca ──────────────────────────────────────────────────────────────
   Isotipo (SVG en linea) + logotipo en texto. El por que esta en build_sitio.mjs;
   aca solo lo que hace falta para entender el CSS.

   El isotipo hereda `color`, asi que se pinta con `color` y no con `fill`: eso permite
   que la version sobre fondo oscuro sea una clase (.marca.claro) y no otro archivo. */
.marca {
  display: flex; align-items: center; gap: 11px;
  flex-shrink: 0; text-decoration: none; color: var(--rojo);
}
.marca-iso { width: 38px; height: 38px; display: block; flex-shrink: 0; }
.marca-txt { display: flex; flex-direction: column; gap: 1px; }

/* Mayusculas con tracking: el nombre es corto y en caja alta gana presencia sin
   necesitar mas tamano, que es lo que el header no tiene para dar. */
.marca-nombre {
  font-family: var(--display); font-weight: 800;
  font-size: 20px; line-height: 1; letter-spacing: .01em;
  text-transform: uppercase; color: var(--tinta);
}
/* La S en rojo es el juego de la marca (TRAN-S-ELECT), que en caja alta se perderia. */
.marca-nombre b { color: var(--rojo); font-weight: inherit; }

/* La bajada, por fin legible: 9,5px con mucho tracking se lee, a diferencia del lema
   dentro del logo original, que bajo ~150px de ancho era una manchita. */
.marca-lema {
  font-family: var(--texto); font-size: 9.5px; font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--apagado); line-height: 1;
}

/* Version sobre fondo oscuro (pie). Solo cambia el color heredado. */
.marca.claro { color: var(--rojo); }
.marca.claro .marca-nombre { color: var(--blanco); }
.marca.claro .marca-lema { color: rgba(255,255,255,.55); }

.menu-btn {
  display: none;
  font-family: var(--display); font-size: 13px; font-weight: 600;
  background: var(--crema); color: var(--tinta-suave);
  border: 1px solid var(--linea); border-radius: var(--radius-pill); padding: 9px 18px; cursor: pointer;
}
.menu-btn:hover { color: var(--rojo); border-color: var(--rojo-linea); background: var(--rojo-suave); }

nav ul {
  display: flex; flex-wrap: wrap; gap: 2px; list-style: none; margin: 0; padding: 0;
}
/* ⚠ Estos numeros estan MEDIDOS, no elegidos por gusto. Con las acciones a la derecha el
   header tiene que acomodar 7 secciones + 2 botones + la marca. A 14,5px y 14px de padding
   "Contacto" se caia a una segunda fila. Medido en el contenedor completo (1112px de
   contenido utiles): marca 195 + acciones 178 + secciones 633 + huecos 38 = 1044, o sea
   68px de holgura. Si se agranda cualquiera de los tres, hay que volver a medir. */
nav a {
  font-family: var(--display); font-size: 14px; font-weight: 600;
  color: var(--tinta-suave); text-decoration: none;
  padding: 9px 10px; border-radius: var(--radius-pill);
  display: inline-block; transition: background .15s, color .15s;
}
nav a:hover { color: var(--rojo); background: var(--rojo-suave); }
nav a.act { color: var(--rojo); background: var(--rojo-suave); }

/* ── Acciones del header ───────────────────────────────────────────────────
   "Cotizar" y "Reservar" son ACCIONES, no secciones. Antes eran dos <li> mas entre
   otros siete, todos iguales: los dos enlaces que cierran la venta se veian igual que
   "Araucania". Ahora van separados, y en escritorio el `nav` se vuelve una fila con la
   lista pegada a la izquierda y las acciones al extremo derecho. */
#menu { display: flex; align-items: center; gap: 14px; }
#menu ul { flex: 1 1 auto; }
.acciones { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.btn-nav {
  font-family: var(--display); font-size: 13.5px; font-weight: 700;
  text-decoration: none; white-space: nowrap;
  padding: 9px 15px; border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
/* La secundaria: solo contorno, para que no le compita a la primaria. */
.btn-nav.fantasma {
  color: var(--rojo); border-color: var(--rojo-linea); background: var(--blanco);
}
.btn-nav.fantasma:hover { background: var(--rojo-suave); border-color: var(--rojo); }
/* La primaria en solido: es el unico elemento del header con relleno, y por eso el ojo
   la encuentra sin buscarla. */
.btn-nav.solido {
  color: var(--blanco); background: var(--rojo); border-color: var(--rojo);
}
.btn-nav.solido:hover { background: var(--rojo-osc); border-color: var(--rojo-osc); }
/* La pagina activa: hundida, no resaltada. Ya estas ahi, no hay a donde ir. */
.btn-nav.act { box-shadow: inset 0 2px 6px rgba(20,23,27,.18); }

/* ⚠ 1140 y no 1000. El header pide 1044px de contenido para entrar en una fila; a
   1001px de viewport el contenedor deja 953 y "Contacto" se partia. A 1141px deja 1093,
   o sea 49px de holgura. El precio es que los portatiles de 1024-1140 ven el cajon en vez
   del menu extendido, que es el intercambio correcto: un cajon ordenado se lee mejor que
   dos filas apretadas. */
@media (max-width: 1140px) {
  .menu-btn { display: block; }
  header.sitio .env { flex-wrap: wrap; }
  /* En el cajon todo se apila: la lista arriba y las acciones abajo, que es el orden en
     que se lee (primero donde ir, despues que hacer). */
  nav { flex-basis: 100%; display: none; }
  nav.abierto { display: block; }
  #menu { display: none; }
  #menu.abierto { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  nav ul { flex-direction: column; gap: 2px; padding-top: 10px; }
  nav a { padding: 12px 14px; width: 100%; border-radius: var(--radius-sm); }
  /* A ancho completo y en columna: en el cajon no hay razon para que sean chicos, y
     "Reservar" queda como el elemento mas grande de la pantalla. */
  .acciones { flex-direction: column; align-items: stretch; gap: 8px;
              padding-bottom: 6px; border-top: 1px solid var(--linea); padding-top: 12px; }
  .btn-nav { text-align: center; padding: 13px 18px; font-size: 15px; }
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  display: grid; align-items: center;
  min-height: 460px;
  background-image: var(--img);
  background-size: cover; background-position: center 42%;
}
/* El velo del hero, en DOS capas y no en una.
   Antes era un solo degradado diagonal con negro azulado (15,17,20). Dos problemas: el
   azulado peleaba con el rojo de marca y dejaba la foto con un aire gris de fotocopia; y al
   terminar el hero contra la seccion blanca quedaba un corte duro.
   Ahora: un degradado diagonal en negro CALIDO (18,15,14) que acompana al rojo, mas una
   sombra desde abajo que funde el hero con lo que sigue. */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(18,15,14,.55) 0%, rgba(18,15,14,0) 38%),
    linear-gradient(112deg, rgba(18,15,14,.88) 0%, rgba(18,15,14,.60) 52%, rgba(18,15,14,.20) 100%);
}
.hero .env { position: relative; z-index: 1; padding-top: 74px; padding-bottom: 74px; }
/* Un filete rojo sobre el titular: ancla la marca en el hero, que es la unica parte del
   sitio donde el rojo no aparecia por ningun lado. */
.hero h1::before {
  content: ""; display: block;
  width: 46px; height: 3px; border-radius: 2px;
  background: var(--rojo); margin-bottom: 20px;
}
.hero h1 {
  font-family: var(--display); font-weight: 800;
  /* Un poco mas grande y con el interlineado mas cerrado: en el hero el titular es la pieza
     y puede permitirselo. -1,5% de tracking a 52px evita que las mayusculas se separen. */
  font-size: clamp(31px, 4.9vw, 52px); line-height: 1.06;
  color: var(--blanco); margin: 0 0 16px; max-width: 19ch;
  text-wrap: balance; letter-spacing: -.02em;
}
.hero p {
  color: rgba(255,255,255,.82); font-size: 17.5px; line-height: 1.6;
  max-width: 48ch; margin: 0 0 32px;
}

/* ── Cabecera de pagina sin foto ──────────────────────────────────────────── */
.cabecera { background: var(--crema); padding: 60px 0; }
.antetitulo {
  font-family: var(--display); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--rojo); margin: 0 0 12px;
}
.cabecera h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(28px, 4.2vw, 42px); line-height: 1.16;
  color: var(--tinta); margin: 0 0 14px; max-width: 24ch;
  text-wrap: balance; letter-spacing: -.01em;
}
.bajada { max-width: 62ch; margin: 0; font-size: 17px; }

/* ── Botones ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--display); font-size: 14.5px; font-weight: 700;
  letter-spacing: -.005em; text-decoration: none;
  padding: 14px 26px; cursor: pointer; border-radius: var(--radius-pill);
  background: var(--rojo); color: var(--blanco);
  border: 2px solid var(--rojo); box-shadow: var(--sombra-sm);
  transition: background .15s, color .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.btn:hover {
  background: var(--rojo-osc); border-color: var(--rojo-osc); color: var(--blanco);
  transform: translateY(-1px); box-shadow: var(--sombra-md);
}
/* Por defecto va sobre fondo CLARO, que es donde se usa en casi todas partes: el checkout,
   el modal, los formularios. Antes era blanco sobre transparente —pensado solo para el
   hero— y en las tarjetas blancas quedaba INVISIBLE: no se leían ni el botón de WhatsApp,
   ni el de Khipu, ni el de cerrar el modal. */
.btn.fantasma {
  background: transparent; color: var(--rojo);
  border-color: var(--rojo-linea); box-shadow: none;
}
.btn.fantasma:hover {
  background: var(--rojo-suave); color: var(--rojo-osc); border-color: var(--rojo);
  box-shadow: none;
}

/* Sobre el hero, que es una foto oscura, sigue siendo blanco. */
.hero .btn.fantasma {
  color: var(--blanco); border-color: rgba(255,255,255,.55); margin-left: 8px;
}
.hero .btn.fantasma:hover {
  background: rgba(255,255,255,.12); color: var(--blanco); border-color: rgba(255,255,255,.9);
}

/* Deshabilitado, en cualquier parte: antes la regla estaba dentro de .fila-botones y el
   botón de Khipu se movió al checkout, así que dejaba de aplicarle. */
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn[disabled]:hover { transform: none; box-shadow: none; background: transparent; }

/* ── Secciones ────────────────────────────────────────────────────────────── */
section { padding: 72px 0; }
section.gris { background: var(--crema); }

h2 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(24px, 3.1vw, 32px); line-height: 1.2;
  color: var(--tinta); margin: 0 0 8px;
  text-wrap: balance; letter-spacing: -.01em;
}
h3 {
  font-family: var(--display); font-weight: 700; font-size: 17px;
  color: var(--tinta); margin: 0 0 10px; letter-spacing: -.005em;
}
h4 {
  font-family: var(--display); font-weight: 700; font-size: 12.5px;
  color: var(--tinta); margin: 0 0 6px;
  letter-spacing: .07em; text-transform: uppercase;
}

.regla { width: 44px; height: 4px; background: var(--rojo); border: 0; border-radius: var(--radius-pill); margin: 0 0 26px; }
.centro { text-align: center; }
.centro .regla { margin-left: auto; margin-right: auto; }
.sub { max-width: 64ch; margin: 0 auto 8px; color: var(--cuerpo); }
.centro .sub { margin-left: auto; margin-right: auto; }
/* .cabecera h1 y .bajada traen max-width (24ch / 62ch) para que el texto no estire de pared
   a pared, pero su margen es 0 (no auto): con .centro, el TEXTO queda centrado dentro de esa
   caja angosta, pero la caja misma se queda pegada a la izquierda del contenedor — el título
   se ve desalineado aunque su propio texto esté "centrado". Bug real, visto en /thank-you. */
.centro h1, .centro .bajada, .centro .ayuda { margin-left: auto; margin-right: auto; }

.prosa { max-width: 66ch; }
.prosa p { margin: 0 0 15px; }
.prosa p:last-child { margin-bottom: 0; }

.duo { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: start; }
@media (max-width: 880px) { .duo { grid-template-columns: 1fr; gap: 36px; } }

ul.marcada { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
ul.marcada li { position: relative; padding-left: 24px; }
ul.marcada li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--rojo); font-size: 13px; font-weight: 800; line-height: 1.7;
}

/* Pasos numerados: chip circular en vez de la regla subrayada plana de antes. */
ol.pasos {
  list-style: none; margin: 40px 0 0; padding: 0; counter-reset: paso;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px;
}
@media (max-width: 880px) { ol.pasos { grid-template-columns: 1fr; gap: 28px; } }

ol.pasos li { counter-increment: paso; padding-top: 8px; position: relative; }
ol.pasos li::before {
  content: counter(paso);
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-bottom: 16px;
  border-radius: var(--radius-pill);
  background: var(--rojo); color: var(--blanco);
  font-family: var(--display); font-weight: 800; font-size: 15px;
}
ol.pasos li strong {
  display: block; font-family: var(--display); font-weight: 700; font-size: 17.5px;
  color: var(--tinta); margin-bottom: 7px; letter-spacing: -.005em;
}
ol.pasos li span { display: block; }

.pie { font-size: 13.5px; color: var(--apagado); margin: 16px 0 0; }

.destacado {
  background: var(--rojo-suave); border-radius: var(--radius-md);
  padding: 28px 26px;
}
section.gris .destacado { background: var(--blanco); box-shadow: var(--sombra-sm); }

figure { margin: 0; }
figure img { display: block; width: 100%; border-radius: var(--radius-md); box-shadow: var(--sombra-sm); }

/* ── Tarjetas de servicio ─────────────────────────────────────────────────── */
.tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
@media (max-width: 880px) { .tarjetas { grid-template-columns: 1fr; } }

.servicio, .tarjeta {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radius-lg);
  padding: 30px 28px; display: block; box-shadow: var(--sombra-sm);
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.servicio { text-decoration: none; color: var(--cuerpo); }
.servicio:hover, .tarjeta:hover {
  border-color: var(--rojo-linea); box-shadow: var(--sombra-md); transform: translateY(-3px);
}
.servicio p { margin: 0 0 16px; }
.servicio .mas {
  font-family: var(--display); font-size: 13px; font-weight: 700; color: var(--rojo);
}
.tarjeta p { margin: 0; }
.tarjeta .num {
  display: block;
  font-family: var(--display); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--rojo); margin-bottom: 12px;
}

/* ── Cobertura ────────────────────────────────────────────────────────────── */
.cobertura { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 40px; margin-top: 36px; }
@media (max-width: 760px) { .cobertura { grid-template-columns: 1fr; } }
.cobertura p { margin: 0; font-size: 14px; color: var(--apagado); }
.cobertura > div { border-top: 1px solid var(--linea); padding-top: 14px; }

/* ── Widgets de Bokun ─────────────────────────────────────────────────────── */
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 26px; margin-top: 36px;
}
.card {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radius-lg);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: var(--sombra-sm); transition: box-shadow .18s, transform .18s;
}
.card:hover { box-shadow: var(--sombra-md); transform: translateY(-3px); }
.card .meta { padding: 22px 22px 4px; }
.card h3 {
  font-size: 16px; line-height: 1.35; margin: 0 0 4px;
  letter-spacing: -.005em; text-wrap: balance;
}
.card .dur {
  margin: 0;
  font-family: var(--display); font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--rojo);
}
/* Bokun inyecta su iframe aca dentro. */
.bokunWidget { padding: 10px 14px 16px; }

/* ── Widget de LISTA de Bokun ──────────────────────────────────────────────────
   El min-height va sobre el IFRAME y es el piso de seguridad: Bokun a veces fija el
   alto del marco al de la ventana (~728px) y, con overflow:hidden, recorta el resto sin
   dejar scroll. Con el piso, lo peor que pasa es un poco de blanco al final.
   Los valores llegan inline desde contenido.mjs (medidos por lista). */
.lista-bokun { margin-top: 36px; padding: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--sombra-sm); }
.lista-bokun iframe {
  width: 100%; border: 0; display: block;
  min-height: var(--piso-ancho, 1500px);
}
@media (max-width: 1099px) {
  .lista-bokun iframe { min-height: var(--piso-medio, 2050px); }
}
@media (max-width: 899px) {
  .lista-bokun iframe { min-height: var(--piso-angosto, 4350px); }
}
@media (max-width: 639px) {
  .lista-bokun iframe { min-height: var(--piso-movil, 3400px); }
}

.nota { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radius-lg); padding: 32px 30px; max-width: 74ch; box-shadow: var(--sombra-sm); }
.nota p { margin: 0 0 12px; }
.nota p:last-of-type { margin-bottom: 0; }

/* ── CTA ──────────────────────────────────────────────────────────────────── */
.cta { background: var(--tinta); padding: 52px 0; }
.cta .env {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 20px 32px;
}
.cta p { margin: 0; color: #c7cbcf; max-width: 54ch; font-size: 17px; }

/* ── Formulario ───────────────────────────────────────────────────────────── */
.formulario {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 22px 26px; max-width: 760px;
}
@media (max-width: 700px) { .formulario { grid-template-columns: 1fr; } }
.campo.ancho { grid-column: 1 / -1; }
.campo label {
  display: block;
  font-family: var(--display); font-size: 13px; font-weight: 600;
  color: var(--tinta); margin-bottom: 8px;
}
.campo .opc { color: var(--apagado); font-weight: 400; }
.campo select, .campo input, .campo textarea {
  width: 100%; font-family: var(--texto); font-size: 15.5px; color: var(--tinta);
  background: var(--blanco); border: 1.5px solid var(--linea);
  padding: 12px 14px; border-radius: var(--radius-sm);
  transition: border-color .15s, box-shadow .15s;
}
.campo select:hover, .campo input:hover, .campo textarea:hover { border-color: var(--apagado); }
.campo select:focus, .campo input:focus, .campo textarea:focus {
  border-color: var(--rojo); box-shadow: 0 0 0 3px var(--rojo-suave); outline: none;
}
.campo textarea { resize: vertical; }
.ayuda { font-size: 14px; color: var(--apagado); margin: 14px 0 0; max-width: 56ch; }

/* ── Contactos ────────────────────────────────────────────────────────────── */
.contactos { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.contactos li { border-top: 1px solid var(--linea); padding-top: 14px; }
.contactos .et {
  display: block;
  font-family: var(--display); font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--apagado);
  margin-bottom: 3px;
}
.contactos .dato {
  font-family: var(--display); font-size: 20px; font-weight: 700;
  color: var(--tinta); text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.contactos .dato:hover { color: var(--rojo); }

/* ── Pie ──────────────────────────────────────────────────────────────────── */
footer { background: var(--oscuro); color: #9aa0a7; padding: 56px 0 0; font-size: 14.5px; }
footer h4 { color: var(--blanco); }
footer .regla { margin-bottom: 18px; }
footer p { margin: 0 0 9px; }
footer a { color: #b9bec3; text-decoration: none; }
footer a:hover { color: var(--blanco); }
footer .lema {
  font-family: var(--display); font-size: 12.5px; font-weight: 600;
  letter-spacing: .04em; color: #ff8b8f; margin-top: 14px;
}
footer .aviso { font-size: 13px; color: #767c83; margin-top: 12px; }
.cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 44px; }
@media (max-width: 880px) { .cols { grid-template-columns: 1fr; gap: 32px; } }
.lista-pie { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }

.creditos {
  margin-top: 46px; border-top: 1px solid #2a2d31; padding: 18px 0;
  font-family: var(--display); font-size: 12.5px; color: #6b7075;
}
.creditos .env { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ── Botón flotante de WhatsApp ───────────────────────────────────────────── */
.flotante {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25d366; color: #fff;
  box-shadow: var(--sombra-lg);
  transition: transform .15s;
}
.flotante:hover { background: #1eb355; transform: scale(1.06); }
@media print { .flotante, .barra, .flotante { display: none; } }


/* ── Cotizador de rutas ─────────────────────────────────────────────────────
   El resultado se recalcula solo al cambiar cualquier campo, asi que vive en un
   aria-live="polite": un lector de pantalla anuncia el precio nuevo sin robar el foco. */
.cotizador { grid-template-columns: 1fr; gap: 18px; }
.paradas { display: grid; gap: 16px; }
.parada {
  /* dirección · hora de llegada · quitar. Se quitó la comuna (03-sep-2026): la dirección
     del autocompletado ya la trae adentro, así que era un campo redundante. */
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: end;
  border-left: 3px solid var(--linea); padding-left: 16px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.parada:first-child { border-left-color: var(--rojo); }
@media (max-width: 700px) { .parada { grid-template-columns: 1fr; } }

/* Fila de botones (agregar parada / trayecto, y los de pago del checkout). */
.fila-botones { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0; }
.fila-botones .btn[disabled] { opacity: .45; cursor: not-allowed; }
.fila-botones .btn[disabled]:hover { transform: none; box-shadow: var(--sombra-sm); }

/* ── "Arma tu viaje": trayectos ─────────────────────────────────────────────
   Un trayecto es un recorrido continuo con su hora de inicio. La vuelta es otro
   trayecto, con la suya. Se agrupan en una tarjeta para que se lea que las paradas
   de adentro son un solo viaje y no puntos sueltos. */
.trayectos { display: grid; gap: 16px; }
.trayecto {
  background: var(--blanco); border: 1.5px solid var(--linea);
  border-radius: var(--radius-md); padding: 18px 20px 22px;
  display: grid; gap: 16px; box-shadow: var(--sombra-sm);
}
.trayecto-cab {
  display: flex; flex-wrap: wrap; align-items: end; gap: 12px 20px;
  border-bottom: 1px solid var(--linea); padding-bottom: 14px;
}
.trayecto-tit {
  margin: 0; flex: 1 1 auto;
  font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--tinta);
}
.trayecto .hora-inicio { flex: 0 0 auto; min-width: 150px; }
/* El boton de agregar parada vive DENTRO del marco de su trayecto, para poder sumarle
   paradas a un trayecto anterior y no solo al ultimo. */
.trayecto .agregar-parada { justify-self: start; }

/* "Ocupar ultima parada del trayecto anterior" */
.heredar {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: var(--display); font-size: 13.5px; font-weight: 600; color: var(--tinta-suave);
}
.heredar input { accent-color: var(--rojo); width: 17px; height: 17px; cursor: pointer; }
.heredar:hover { color: var(--rojo); }

/* Parada heredada: sus campos los manda el trayecto de arriba, no el cliente. Se bloquean
   —editarlos aca no cambiaria el trayecto anterior y partiria el itinerario en el medio— y
   se marcan en gris para que se lea que estan asi a proposito y no fallados. */
.parada.heredada { border-left-color: var(--apagado); }
.campo select:disabled, .campo input[readonly] {
  background: var(--crema); color: var(--apagado); cursor: not-allowed;
}
.campo select:disabled:hover, .campo input[readonly]:hover { border-color: var(--linea); }

/* ── "Arma tu viaje": autocompletado de direcciones ──────────────────────────
   La lista se ancla al .campo que contiene el input, asi no hace falta calcular
   posiciones: se posiciona sola respecto de su propio contenedor. */
.campo { position: relative; }
.sugerencias {
  position: absolute; z-index: 20; top: 100%; left: 0; right: 0; margin: 4px 0 0;
  list-style: none; padding: 6px;
  background: var(--blanco); border: 1.5px solid var(--linea);
  border-radius: var(--radius-sm); box-shadow: var(--sombra-md);
  max-height: 260px; overflow-y: auto;
}
.sugerencias li {
  padding: 9px 11px; border-radius: 6px; cursor: pointer; line-height: 1.35;
}
.sugerencias li:hover, .sugerencias li.activa { background: var(--rojo-suave); }
.sugerencias strong {
  display: block; font-family: var(--display); font-size: 14px; font-weight: 600;
  color: var(--tinta);
}
.sugerencias span { display: block; font-size: 12.5px; color: var(--apagado); }

/* ── "Arma tu viaje": mapa embebido de la ruta ─────────────────────────────── */
/* ── "Arma tu viaje": las dos columnas ───────────────────────────────────────
   Formulario a la izquierda, mapa pegado a la derecha, resultado debajo del
   formulario. El mapa abarca las DOS filas del grid (formulario + resultado), que es
   lo que le da recorrido para quedarse pegado mientras se hace scroll. */
.armador {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: 28px 32px;
  align-items: start;
}
.armador > #armaviaje { grid-column: 1; grid-row: 1; }
.armador > .armador-mapa { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 100px; }
.armador > .resultado { grid-column: 1; grid-row: 2; max-width: none; margin-top: 0; }

/* Bajo 1000px el header pasa a menu colapsable y el sticky estorba mas que ayuda:
   una sola columna, y el mapa ENTRE el formulario y el resultado — es lo que se quiere
   mirar mientras se arma la ruta. */
@media (max-width: 1000px) {
  .armador { grid-template-columns: 1fr; gap: 24px; }
  .armador > #armaviaje { grid-row: 1; }
  .armador > .armador-mapa { grid-column: 1; grid-row: 2; position: static; }
  .armador > .resultado { grid-column: 1; grid-row: 3; }
}

.mapa-ruta {
  border-radius: var(--radius-md); overflow: hidden;
  border: 1.5px solid var(--linea); box-shadow: var(--sombra-sm);
  background: var(--crema);
}
.mapa-vacio {
  margin: 0; padding: 28px 20px; text-align: center;
  font-size: 14px; color: var(--apagado); background: var(--crema);
}
.mapa-ruta .rotulo,
#checkout-viaje .rotulo {
  margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--linea);
  background: var(--blanco);
  font-family: var(--display); font-size: 12.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--rojo);
}
.mapa-ruta iframe {
  display: block; width: 100%; height: 420px; border: 0;
}
.mapa-ruta iframe[hidden] { display: none; }
@media (max-width: 1000px) { .mapa-ruta iframe { height: 320px; } }
@media (max-width: 560px) { .mapa-ruta iframe { height: 260px; } }

/* ── "Arma tu viaje": snippet flotante con el total ──────────────────────────
   Fijo a la esquina del viewport (no de .env, para poder anclarse ahi). z-index 55:
   por debajo del boton de WhatsApp (60, esquina opuesta, nunca se tocan) y por ENCIMA
   del header sticky (50), porque flota sobre el mientras se hace scroll. `top` deja el
   alto del header + un respiro; medido contra header.sitio (~78px con logo + padding). */
.resumen-flotante {
  position: fixed; top: 94px; right: 20px; z-index: 55;
  background: var(--blanco); border: 1.5px solid var(--rojo-linea);
  border-radius: var(--radius-md); box-shadow: var(--sombra-lg);
  padding: 14px 18px; min-width: 190px; text-align: right;
  transition: transform .15s, opacity .15s;
}
.resumen-flotante[hidden] { display: none; }
.rf-etiqueta {
  margin: 0; font-family: var(--display); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--apagado);
}
.rf-precio {
  margin: 2px 0 8px;
  font-family: var(--display); font-size: 24px; font-weight: 800; color: var(--tinta);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.rf-detalle {
  font-family: var(--display); font-size: 12.5px; font-weight: 700; color: var(--rojo);
  background: none; border: none; padding: 0; cursor: pointer;
}
.rf-detalle:hover { text-decoration: underline; }

/* En movil el header ocupa mas alto (el boton "Menu" y el logo se apilan un poco mas
   apretado) y el snippet se achica para no comerse media pantalla. */
@media (max-width: 1000px) {
  .resumen-flotante { top: 84px; right: 12px; min-width: 150px; padding: 11px 14px; }
  .rf-precio { font-size: 19px; }
}

/* ── "Arma tu viaje": resumen del itinerario ─────────────────────────────────
   Linea de tiempo hito por hito. Cada parada con su hora y cada espera con lo que
   cuesta. Las horas estimadas van con "~" desde el JS. */
.itinerario {
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radius-lg); padding: 28px 26px; margin-bottom: 20px;
  box-shadow: var(--sombra-sm);
}
.itin-fecha {
  font-family: var(--display); font-size: 16px; font-weight: 700;
  color: var(--tinta); margin: 0 0 20px;
}
.itin { list-style: none; margin: 0; padding: 0; }
.itin li { display: grid; grid-template-columns: 74px 1fr; gap: 0 14px; align-items: start; }
.itin-hora {
  font-family: var(--display); font-size: 13.5px; font-weight: 700;
  color: var(--rojo); font-variant-numeric: tabular-nums;
  padding-top: 1px; text-align: right; white-space: nowrap;
}
.itin-dia { font-size: 11px; color: var(--apagado); }
.itin-lugar {
  position: relative; font-size: 15px; color: var(--tinta); line-height: 1.45;
  border-left: 2px solid var(--linea); padding: 0 0 20px 20px;
}
.itin li:last-child .itin-lugar { border-left-color: transparent; padding-bottom: 0; }
.itin-lugar::before {
  content: ""; position: absolute; left: -6px; top: 5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--blanco); border: 2px solid var(--rojo);
}
.itin-lugar em {
  display: block; font-style: normal;
  font-family: var(--display); font-size: 12px; font-weight: 600; color: var(--apagado);
}
/* La espera no es un viaje: circulo apagado y fondo tenue para que se lea distinto. */
.itin-espera .itin-hora { color: var(--cuerpo); }
.itin-espera .itin-lugar::before { background: var(--crema); border-color: var(--apagado); }
.itin-espera .itin-lugar { color: var(--cuerpo); }
.itin-pie {
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--linea);
  font-size: 13.5px; color: var(--apagado);
}
@media (max-width: 560px) {
  .itin li { grid-template-columns: 60px 1fr; gap: 0 10px; }
  .itin-hora { font-size: 12.5px; }
}

/* ── "Arma tu viaje": detalle del presupuesto ────────────────────────────── */
.detalle { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.detalle li {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px;
  padding-bottom: 10px; border-bottom: 1px solid var(--linea);
  font-size: 14.5px; align-items: start;
}
.detalle .ruta-txt { color: var(--cuerpo); line-height: 1.5; }
.detalle .ruta-txt strong { color: var(--tinta); }
.detalle .tramos-txt {
  color: var(--apagado); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.detalle li.suma {
  border-bottom: none; padding-bottom: 0;
  font-family: var(--display); font-weight: 700; color: var(--tinta);
}
.detalle li.suma .tramos-txt { color: var(--tinta); font-size: 16px; }

/* El boton de elegir vehiculo ocupa su propia linea dentro de la tarjeta de opcion. */
.opciones .elegir { grid-column: 1 / -1; justify-self: start; margin-top: 8px; }

.quitar {
  font-family: var(--display); font-size: 12.5px; color: var(--apagado);
  background: transparent; border: 1.5px solid var(--linea); border-radius: var(--radius-pill); padding: 11px 16px;
  cursor: pointer; white-space: nowrap; transition: color .15s, border-color .15s;
}
.quitar:hover { color: var(--rojo); border-color: var(--rojo-linea); background: var(--rojo-suave); }
.btn.chico {
  padding: 10px 20px; font-size: 13px; color: var(--rojo);
  background: var(--blanco); border-color: var(--rojo-linea); box-shadow: none;
}
.btn.chico:hover { background: var(--rojo); color: var(--blanco); border-color: var(--rojo); }

.resultado { margin-top: 32px; max-width: 760px; }
.cotiza-si, .cotiza-no {
  border: 1px solid var(--linea); background: var(--crema); border-radius: var(--radius-lg);
  padding: 28px 26px; box-shadow: var(--sombra-sm);
}
.cotiza-no h3 { margin-bottom: 8px; }
.resultado .ruta {
  font-family: var(--display); font-size: 12.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--rojo); margin: 0 0 16px;
}
.opciones {
  list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px;
}
.opciones li {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 16px;
  background: var(--blanco); padding: 15px 18px; align-items: baseline;
  border: 1.5px solid var(--linea); border-radius: var(--radius-md);
}
.opciones li.mejor { border-color: var(--rojo); background: var(--rojo-suave); }
.opciones .veh { font-family: var(--display); font-weight: 700; color: var(--tinta); }
.opciones .cap { grid-column: 1; font-size: 13.5px; color: var(--apagado); }
.opciones .pre {
  grid-row: 1 / span 2; align-self: center;
  font-family: var(--display); font-size: 20px; font-weight: 800; color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.resultado .pista { font-size: 14px; color: var(--apagado); margin: 0 0 18px; }


/* ══════════════════════════════════════════════════════════════════════════════
   "Arma tu viaje" — piezas del 03-sep-2026
   Van al final a propósito: varias sobrescriben reglas de más arriba y acá el
   cascade las deja ganar sin tener que duplicar selectores.
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── Hora de llegada en cada parada ─────────────────────────────────────────
   Lo que el cliente quiere ver apenas agrega una parada, sin bajar al resumen. */
.eta-caja {
  display: flex; flex-direction: column; align-items: flex-end;
  min-width: 76px; padding-bottom: 12px;
}
.eta-et {
  font-family: var(--display); font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--apagado);
}
.eta {
  font-family: var(--display); font-size: 15px; font-weight: 700;
  color: var(--rojo); font-variant-numeric: tabular-nums;
}

/* El desplegable de hora del 2do trayecto en adelante dice la espera al lado, así que
   necesita más ancho que el <input type="time"> del primero. */
.trayecto select.hora { min-width: 235px; }

@media (max-width: 700px) {
  .parada { grid-template-columns: 1fr; }
  .eta-caja { align-items: flex-start; padding-bottom: 0; }
  .trayecto select.hora { min-width: 0; width: 100%; }
}

/* ── Equipaje ───────────────────────────────────────────────────────────────
   Los dos van sin marcar: mucha gente no lleva maletas, y marcarlos por defecto le
   ofrecería un vehículo más grande y más caro del que necesita. */
.equipaje { display: grid; gap: 9px; }
.equipaje-tit {
  font-family: var(--display); font-size: 13px; font-weight: 600; color: var(--tinta);
}
.equipaje label {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  font-size: 14.5px; color: var(--cuerpo); line-height: 1.45;
}
.equipaje input {
  accent-color: var(--rojo); width: 17px; height: 17px; margin-top: 3px;
  cursor: pointer; flex: 0 0 auto;
}
.equipaje label:hover { color: var(--tinta); }

/* ── Totales del presupuesto ────────────────────────────────────────────────
   El detalle del presupuesto se fundió con el itinerario: la línea de tiempo ya lleva el
   costo de cada espera donde ocurre, así que acá solo van los totales y la ruta no se
   repite dos veces. */
.totales {
  list-style: none; margin: 20px 0 0; padding: 16px 0 0;
  border-top: 1px solid var(--linea); display: grid; gap: 8px;
}
.totales li {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 14.5px; color: var(--cuerpo);
}
.totales li span:last-child {
  font-family: var(--display); font-weight: 700; color: var(--tinta);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Encabezado de trayecto dentro de la línea de tiempo: no es un hito, así que no lleva
   punto ni línea vertical. */
.itin-tramo .itin-lugar { border-left-color: transparent; padding-bottom: 10px; }
.itin-tramo .itin-lugar::before { display: none; }
.itin-tramo .itin-lugar strong {
  font-family: var(--display); font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--rojo);
}

/* ── Checkout en la columna derecha ─────────────────────────────────────────
   Debajo del mapa y dentro del bloque pegado, para que al elegir vehículo la tarjeta de
   pago quede a la vista sin scrollear. */
#checkout-viaje {
  margin-top: 16px; background: var(--blanco);
  border: 1.5px solid var(--rojo-linea); border-radius: var(--radius-md);
  overflow: hidden; box-shadow: var(--sombra-md);
}
#checkout-viaje[hidden] { display: none; }
.checkout-cuerpo { padding: 18px 20px 20px; display: grid; gap: 10px; }
.co-precio {
  margin: 0; font-family: var(--display); font-size: 28px; font-weight: 800;
  color: var(--tinta); line-height: 1.1; font-variant-numeric: tabular-nums;
}
.co-detalle { margin: 0; font-size: 14px; color: var(--cuerpo); line-height: 1.5; }
.co-ref { margin: 0 0 4px; font-size: 12.5px; color: var(--apagado); line-height: 1.45; }
.checkout-cuerpo .btn { text-align: center; margin: 0; }

/* ── Modal del aviso de las 15 horas ───────────────────────────────────────── */
.modal {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(20,23,27,.55);
  display: grid; place-items: center; padding: 24px;
}
.modal[hidden] { display: none; }
.modal-caja {
  background: var(--blanco); border-radius: var(--radius-lg);
  padding: 30px 28px; max-width: 470px; box-shadow: var(--sombra-lg);
}
.modal-caja h3 { margin: 0 0 12px; }
.modal-caja p { margin: 0 0 12px; font-size: 15px; }
.modal-detalle { color: var(--tinta); font-weight: 500; }
.modal-caja .fila-botones { margin-bottom: 0; }

/* Desglose del checkout: una línea por concepto, para que se lea que la espera NO es uno
   de los tramos. En una sola frase ("3 tramos + espera") parecía que sí. */
.co-desglose { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 9px; }
.co-desglose li {
  display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
  font-size: 13.5px; color: var(--cuerpo); line-height: 1.4;
}
.co-desglose li span:last-child {
  font-family: var(--display); font-weight: 700; color: var(--tinta);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.co-desglose em {
  display: block; font-style: normal; font-size: 11.5px; color: var(--apagado);
}
.co-desglose .co-total {
  border-top: 1px solid var(--linea); padding-top: 9px; margin-top: 2px;
  font-family: var(--display); font-weight: 700; color: var(--tinta); font-size: 15px;
}

/* Al abrirse el checkout, el mapa se encoge para que la tarjeta de pago QUEPA COMPLETA en
   pantalla sin scrollear (requisito de Leopoldo). Medido: con el mapa en 420px, mapa +
   checkout sumaban 944px y se cortaba el botón de WhatsApp en un viewport de 860px.
   A esa altura el mapa ya cumplió su función —el cliente eligió— así que sacrificarle alto
   es lo correcto. */
.armador-mapa.con-checkout .mapa-ruta iframe { height: 230px; }

/* Checkout compacto, por lo mismo. */
.checkout-cuerpo { padding: 15px 18px 17px; gap: 8px; }
.co-precio { font-size: 25px; }
.co-desglose { gap: 7px; }
.checkout-cuerpo .btn { padding: 11px 20px; font-size: 13.5px; }

/* En pantallas bajas se encoge más todavía. */
@media (max-height: 780px) {
  .armador-mapa.con-checkout .mapa-ruta iframe { height: 170px; }
}

/* Con el checkout abierto, la barra lateral se limita al alto del viewport y el MAPA
   absorbe lo que sobre. Así la tarjeta de pago cabe completa en cualquier pantalla, en vez
   de depender de alturas fijas que calzan en un viewport y se cortan en otro (probado:
   con el mapa fijo en 230px todavía se pasaba 10px en 860px de alto). */
.armador-mapa.con-checkout {
  display: flex; flex-direction: column;
  max-height: calc(100vh - 118px);
  /* ⚠ Sin esto el contenido que no cabe (mapa + checkout + "compartir" abierto) se
     derramaba FUERA de esta caja en vez de recortarse (overflow por defecto es visible).
     Y como esta caja es position:sticky, ese sobrante se pintaba POR ENCIMA de la
     seccion siguiente al hacer scroll —el orden de pintado de CSS pone los elementos
     posicionados despues que los bloques normales, sin importar el orden del documento—,
     mezclando visualmente el boton de compartir con el texto de "Para qué nos contratan".
     Reproducido y verificado: la caja medía 642px de alto pero su contenido real medía
     859px con el desglose completo + compartir abiertos. Con scroll propio en vez de
     desborde, nunca puede pintar fuera de sus propios límites. */
  overflow-y: auto;
}
.armador-mapa.con-checkout .mapa-ruta {
  flex: 1 1 auto; display: flex; flex-direction: column; min-height: 130px;
}
.armador-mapa.con-checkout .mapa-ruta iframe {
  flex: 1 1 auto; height: auto; min-height: 90px;
}
.armador-mapa.con-checkout #checkout-viaje { flex: 0 0 auto; }

/* En móvil no hay barra pegada ni límite de alto: se apila y se scrollea normal. */
@media (max-width: 1000px) {
  .armador-mapa.con-checkout { max-height: none; display: block; }
  .armador-mapa.con-checkout .mapa-ruta iframe { height: 320px; min-height: 0; }
}

/* Pantallas bajas (portátiles de 13", ~700px de alto útil): no alcanza para el mapa Y la
   tarjeta de pago. Manda la tarjeta —es el requisito— así que el mapa se esconde mientras
   el checkout está abierto y vuelve al cerrarlo. Medido: a 700px, con el mapa en su piso
   de 90px, el checkout todavía se pasaba 22px. */
@media (min-width: 1001px) and (max-height: 820px) {
  .armador-mapa.con-checkout .mapa-ruta { display: none; }
  .armador-mapa.con-checkout #checkout-viaje { margin-top: 0; }
}

/* ── Cotizador: lo que entendimos de la dirección ────────────────────────────
   Se quitó el <select> de comuna y la zona se deduce de la dirección, así que hay que
   MOSTRAR qué se entendió: si la detección se equivoca, el cliente lo ve antes de pagar
   en vez de después. */
.detectado {
  display: block; margin-top: 6px; min-height: 18px;
  font-family: var(--display); font-size: 12.5px; font-weight: 600;
}
.detectado.bueno { color: var(--rojo); }
.detectado.bueno::before { content: "Detectamos: "; color: var(--apagado); font-weight: 500; }
.detectado.malo { color: var(--apagado); font-weight: 500; }

/* La parada del cotizador es una sola columna (dirección) más el botón de quitar. */
#cotizador .parada { grid-template-columns: 1fr auto; }
@media (max-width: 700px) { #cotizador .parada { grid-template-columns: 1fr; } }

/* Sin el rótulo "Llegada" (03-sep-2026), la caja de la hora se centra con el campo de
   dirección en vez de quedar colgada arriba. */
.eta-caja { justify-content: center; padding-bottom: 10px; }
.eta-et { display: none; }

/* "Aproximadamente:" acompaña al título de equipaje en la misma línea, para no repetirlo
   en cada checkbox. */
.equipaje-aprox { font-weight: 500; color: var(--apagado); }

/* ── Compartir la cotización ─────────────────────────────────────────────────
   En móvil aparece además "Compartir…", que abre la hoja nativa del sistema: es la única
   vía real para Instagram, que no acepta texto desde la web. En escritorio queda
   "Copiar", que cubre lo mismo pegando a mano. */
.compartir { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--linea); }
.compartir-tit {
  display: block; margin-bottom: 8px;
  font-family: var(--display); font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--apagado);
}
.compartir-botones { display: flex; flex-wrap: wrap; gap: 7px; }
.compartir-botones .btn { padding: 8px 14px; font-size: 12.5px; margin: 0; }

/* El desglose por trayecto: el nombre arriba y los tramos en chico debajo, para que el
   total se vea sumar en vez de aparecer suelto. */
.co-desglose em { display: block; font-style: normal; font-size: 11.5px; color: var(--apagado); }

/* ── El monto por persona ────────────────────────────────────────────────────
   Se COBRA por vehículo, no por persona — eso no cambia y sigue dicho en la nota. Esto es
   la división, que en un grupo grande es más elocuente que el total. Va siempre en
   secundario para que no compita con el precio real. */
.rf-persona {
  margin: -2px 0 8px;
  font-family: var(--display); font-size: 12.5px; font-weight: 600; color: var(--apagado);
  font-variant-numeric: tabular-nums;
}
.opciones .pre { text-align: right; line-height: 1.15; }
.pre-persona {
  display: block; margin-top: 2px;
  font-family: var(--display); font-style: normal; font-size: 11.5px; font-weight: 600;
  color: var(--apagado);
}
.co-persona {
  margin: -4px 0 2px;
  font-family: var(--display); font-size: 13px; font-weight: 600; color: var(--apagado);
  font-variant-numeric: tabular-nums;
}

/* La marca ya no es un <img> (ver .marca mas arriba), asi que la regla del ancho minimo
   del logo desaparecio: el problema que resolvia —el lema ilegible bajo 150px— ya no
   existe, porque el lema es texto y se esconde solo.

   En pantallas muy angostas se esconde el lema y se encoge el nombre: el isotipo sigue
   identificando la marca, que es justo para lo que se dibujo. */
@media (max-width: 420px) {
  .marca-lema { display: none; }
  .marca-nombre { font-size: 18px; }
  .marca-iso { width: 34px; height: 34px; }
}

/* Rescate de una cotizacion por codigo. Va arriba del armador: es lo primero que busca
   quien llega con un codigo en la mano, no algo que descubra despues de armar un viaje. */
.rescate {
  max-width: 620px;
  margin: 0 auto 2rem;
  padding: 1rem 1.2rem;
  background: var(--crema);
  border: 1px solid var(--linea);
  border-radius: 10px;
}
.rescate label {
  display: block;
  font-size: .92rem;
  font-weight: 600;
  margin-bottom: .5rem;
}
.rescate-fila { display: flex; gap: .6rem; align-items: stretch; }
.rescate-fila input {
  flex: 1 1 auto;
  min-width: 0;
  padding: .6rem .8rem;
  font: inherit;
  /* El codigo es alfanumerico corto y se dicta por telefono: mayusculas y algo de
     separacion entre letras lo hacen mas facil de leer y de comparar. */
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: var(--blanco);
}
.rescate-fila .btn { flex: 0 0 auto; white-space: nowrap; }
.rescate-aviso { display: block; margin-top: .5rem; font-size: .85rem; min-height: 1.1em; }
.rescate-aviso.malo { color: var(--rojo); }
.rescate-aviso.bueno { color: #1a7f45; }

/* El codigo dentro de la tarjeta de checkout. Arranca oculto y aparece cuando el VPS
   responde, para no mostrar un hueco mientras viaja por red. */
.co-codigo {
  margin: .9rem 0 0;
  padding: .8rem .9rem;
  background: var(--crema);
  border: 1px dashed var(--linea);
  border-radius: 8px;
}
.cc-et { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--apagado); }
.cc-fila { display: flex; gap: .6rem; align-items: center; margin: .35rem 0; flex-wrap: wrap; }
.cc-valor {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--tinta);
}
.cc-ayuda { display: block; font-size: .8rem; color: var(--cuerpo); line-height: 1.4; }

@media (max-width: 520px) {
  .rescate-fila { flex-wrap: wrap; }
  .rescate-fila .btn { width: 100%; }
}

/* Nota del tipo de cambio, bajo el boton de PayPal. PayPal no acepta CLP, asi que el cargo
   va en USD y hay que decirlo ANTES de que el cliente vea otra cifra en la pasarela. */
.co-cambio {
  margin: -2px 0 0; font-size: 12px; line-height: 1.5; color: var(--cuerpo);
}
.co-cambio strong { color: var(--tinta); }

/* Pago con tarjeta (Getnet). El div existe siempre y se llena solo si el pago en linea esta
   en produccion: en sandbox no se le ofrece al cliente, ver pagoEnLineaVivo() en el VPS. */
.co-getnet:empty { display: none; }
.co-getnet { display: grid; gap: 6px; }
.co-getnet .btn { text-align: center; margin: 0; }


/* ── Por que elegirnos ──────────────────────────────────────────────────────
   Reemplaza la <ul class="marcada"> de vistos rojos. Cada cualidad es una fila con su
   icono, un titulo y una linea que la explica: antes eran cinco enunciados sueltos que
   habia que creer, ahora cada uno dice por que. */
.cualidades { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.cualidades li {
  display: grid; grid-template-columns: 38px 1fr; gap: 13px;
  align-items: start; padding: 12px 12px 12px 0;
  border-radius: var(--radius-sm);
}
/* El icono en su propia pastilla: le da un ancla visual a la fila y separa el dibujo del
   texto sin necesitar una linea divisoria. */
.cualidades .ico {
  width: 38px; height: 38px; padding: 8px;
  border-radius: 10px; background: var(--rojo-suave); color: var(--rojo);
  box-sizing: border-box;
}
.cualidades span { display: block; font-size: 14.5px; line-height: 1.5; color: var(--cuerpo); }
.cualidades b {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: 15px; color: var(--tinta); margin-bottom: 1px;
}
/* La unica cualidad que de verdad los diferencia de un taxi va destacada. El resto lo
   ofrece cualquiera; esta es la que cambia la decision de un grupo. */
.cualidades li.destacada {
  background: var(--rojo-suave); padding-left: 12px;
  border: 1px solid var(--rojo-linea);
}
.cualidades li.destacada .ico { background: var(--blanco); }

.h3-sep { margin-top: 34px; }

/* Fichas: segmentos de cliente, no caracteristicas. Se recorren de un vistazo. */
.fichas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.fichas li {
  font-family: var(--display); font-size: 13px; font-weight: 600;
  color: var(--tinta-suave); background: var(--crema);
  border: 1px solid var(--linea); border-radius: var(--radius-pill);
  padding: 7px 14px;
}

/* La marca del pie. No es un enlace (ya estas en el sitio y el logo del header lleva a la
   portada), asi que va como <div>: un enlace que no lleva a ninguna parte nueva es ruido
   para quien navega con teclado. */
.pie-marca { margin-bottom: 16px; }
.pie-marca .marca-iso { width: 34px; height: 34px; }
.pie-marca .marca-nombre { font-size: 18px; }

/* ── Reseñas de Google (07-sep-2026) ──────────────────────────────────────────
   Dos estados: vacío (invita a dejar la primera reseña) y con tarjetas reales. Nunca
   coexisten — build_sitio.mjs elige uno según si RESENAS_GOOGLE.lista tiene algo. */
.resenas-vacio {
  max-width: 52ch; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.resenas-vacio .ico {
  width: 40px; height: 40px; padding: 9px; color: var(--rojo);
  background: var(--rojo-suave); border-radius: 12px;
}
.resenas-vacio p { font-size: 15px; color: var(--cuerpo); line-height: 1.6; margin: 0; }

.resenas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px; margin-top: 8px;
}
.resena {
  background: var(--crema); border: 1px solid var(--linea); border-radius: var(--radius-md);
  padding: 22px 20px; display: flex; flex-direction: column; gap: 10px;
}
.resena-estrellas { color: var(--rojo); font-size: 15px; letter-spacing: 2px; }
.resena-texto { font-size: 14.5px; color: var(--tinta-suave); line-height: 1.6; margin: 0; flex: 1 1 auto; }
.resena-autor { font-family: var(--display); font-size: 13px; font-weight: 700; color: var(--tinta); margin: 0; }
.resena-autor span { font-weight: 500; color: var(--apagado); }