/* Guagualine, sistema de diseño v6 (26-sep-2026)
   Referencia de producto: Trainline. Software de reservas, no blog.
   Reglas de la casa que mandan sobre la referencia:
   - Botones SIEMPRE en pildora. Campos de formulario SIEMPRE rectos.
   - Nada de borde de color a la izquierda en tarjetas ni avisos.
   - Fondo neutro y UN acento (el verde). Sin degradados de pagina ni sombras duras.
   - Texto en una columna alineada a la izquierda. Rejilla solo para piezas iguales. */
:root {
  --cal-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E");
  --bg: #FFFFFF;
  --page: #F3F6F5;
  --surface: #F3F6F5;
  --surface-2: #F8FAF9;
  --ink: #0E1E25;
  --ink-soft: #51616A;
  --muted: #7B8A91;
  --brand: #00A878;
  --brand-dark: #007F5B;
  --brand-ink: #0A5A44;
  --brand-tint: #E4F5EE;
  --navy: #0B2530;
  --link: #007F5B;
  --line: #E0E6E4;
  --line-strong: #C3CDCA;
  --warn-bg: #FFF6E0;
  --warn-ink: #7A5600;
  --radius: 16px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --shadow: 0 1px 2px rgba(14, 30, 37, .05), 0 2px 10px rgba(14, 30, 37, .05);
  --shadow-float: 0 2px 6px rgba(14, 30, 37, .06), 0 18px 44px rgba(14, 30, 37, .16);
  --font: "Manrope", -apple-system, "Segoe UI", Roboto, sans-serif;
  --container: 1160px;
  --field-h: 52px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; display: block; }

/* Un solo contenedor para cabecera, buscador, cabeceras y contenido: el logo y el
   titular caen en la misma vertical en todas las paginas. */
.wrap, main.wrap, .breadcrumbs.wrap { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
main.wrap > * { max-width: none; }
/* Lectura comoda: la prosa suelta no pasa de 72 caracteres aunque el marco sea ancho. */
main.wrap > p, main.wrap > section > p, .section-sub, .prose p, .prose li { max-width: 72ch; }

h1, h2, h3, h4 { color: var(--ink); line-height: 1.15; font-weight: 700; }
h1 { font-size: 2.5rem; letter-spacing: -0.025em; line-height: 1.1; }
h2 { font-size: 1.75rem; letter-spacing: -0.018em; margin-bottom: .5em; }
h3 { font-size: 1.125rem; letter-spacing: -0.01em; }
@media (max-width: 700px) {
  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.4rem; }
}
.eyebrow { display: inline-block; font-size: .85rem; font-weight: 700; color: var(--brand-dark); margin-bottom: 8px; letter-spacing: 0; text-transform: none; }
section { padding: 40px 0; }
.section-sub { color: var(--ink-soft); margin-bottom: 18px; font-size: 1rem; }

/* ---------- Botones: todos en pildora ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 26px; border: 1px solid transparent; border-radius: 999px;
  background: var(--brand); color: #fff; font: 700 1rem/1 var(--font);
  cursor: pointer; text-align: center; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--brand-dark); color: #fff; text-decoration: none; }
.btn-sm { min-height: 38px; padding: 0 18px; font-size: .9rem; }
.btn-outline, .btn-ghost { background: #fff; color: var(--ink); border-color: var(--line-strong); }
.btn-outline:hover, .btn-ghost:hover { background: #fff; color: var(--ink); border-color: var(--ink); }
.btn-blue, .btn-dark { background: var(--navy); color: #fff; }
.btn-blue:hover, .btn-dark:hover { background: #163a48; }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--brand-tint); color: var(--ink); }

/* ---------- Campos: todos rectos ---------- */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  font-family: var(--font); color: var(--ink); border-radius: 0;
}

/* ---------- Franja superior ---------- */
.topstrip { background: var(--navy); color: #DCE8E5; font-size: .84rem; text-align: center; padding: 8px 16px; line-height: 1.35; }
.topstrip a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Cabecera ---------- */
.site-header { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.site-header .wrap { display: flex; align-items: center; gap: 20px; height: 68px; }
.logo { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 1.3rem; letter-spacing: -0.03em; color: var(--ink); }
.logo:hover { text-decoration: none; }
.logo .bus-mini { width: 34px; height: auto; flex: none; }
.logo em { font-style: normal; color: var(--brand); }
.main-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.main-nav > a { color: var(--ink); font-weight: 600; font-size: .95rem; padding: 8px 12px; border-radius: 999px; white-space: nowrap; }
.main-nav > a:hover { background: var(--surface); text-decoration: none; }
.nav-dd { position: relative; }
.nav-dd summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; font-size: .95rem; padding: 8px 12px; border-radius: 999px; }
.nav-dd summary:hover, .nav-dd[open] summary { background: var(--surface); }
.nav-dd summary::-webkit-details-marker { display: none; }
.nav-dd summary::after { content: ""; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .6; }
.nav-dd-menu { position: absolute; right: 0; top: calc(100% + 10px); width: 320px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-float); }
.nav-dd-menu a { display: block; padding: 11px 12px; border-radius: var(--radius-xs); color: var(--ink); }
.nav-dd-menu a:hover { background: var(--surface); text-decoration: none; }
.nav-dd-menu strong { display: block; font-size: .92rem; font-weight: 700; }
.nav-dd-menu span { display: block; font-size: .8rem; color: var(--ink-soft); line-height: 1.35; margin-top: 2px; }
.main-nav a.nav-cg { background: var(--brand); color: #fff; font-weight: 700; padding: 0 16px; min-height: 40px; margin-left: 6px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.main-nav a.nav-cg:hover { background: var(--brand-dark); color: #fff; }
.nav-cg-ico { width: 17px; height: 17px; flex: none; }
.lang-select { height: 40px; border: 1px solid var(--line-strong); border-radius: 999px; padding: 0 12px; font: 700 .85rem var(--font); color: var(--ink); background: #fff; cursor: pointer; }
@media (max-width: 980px) {
  .main-nav > a:not(.nav-cg) { display: none; }
}
@media (max-width: 760px) {
  .site-header .wrap { height: 60px; gap: 8px; padding: 0 16px; }
  .logo { font-size: 1.12rem; gap: 7px; }
  .logo .bus-mini { width: 28px; }
  .nav-dd-menu { position: fixed; left: 12px; right: 12px; top: 68px; width: auto; max-height: calc(100vh - 88px); overflow: auto; }
}

/* ---------- Buscador (tarjeta de la home y barra del resto) ---------- */
.sc { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-float); padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.sc-title { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 2px; }
.sc-row { display: flex; gap: 0; align-items: stretch; }
.sc-field { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; background: #fff; border: 1px solid var(--line-strong); min-height: var(--field-h); padding: 6px 14px; }
.sc-field ~ .sc-field { border-left: 0; }
/* Sin z-index: crearia un contexto de apilado y el calendario (hoja inferior en
   movil) quedaria DEBAJO de su fondo oscuro, sin poder pulsar ningun dia. */
.sc-field:focus-within { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.sc-field > span { font-size: .75rem; font-weight: 600; color: var(--ink-soft); line-height: 1.2; }
.sc-field select { width: 100%; border: 0; background: transparent; padding: 0; font: 700 1rem/1.3 var(--font); color: var(--ink); appearance: none; cursor: pointer; }
.sc-field select:focus { outline: none; }
.sc-field .dp-btn { border: 0; padding: 0; min-height: 0; background: transparent; font-weight: 700; }
.sc-od { flex-direction: column; position: relative; }
.sc-od .sc-field ~ .sc-field { border-left: 1px solid var(--line-strong); border-top: 0; }
.sc-swap { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line-strong); background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.sc-swap:hover { border-color: var(--ink); }
.sc-swap svg { width: 18px; height: 18px; }
.sc-dates { flex-wrap: wrap; }
.sc-dates .sc-field { flex: 1 1 50%; }
.sc-dates .sc-pax { flex: 0 0 26%; }
.sc-field .dp-btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-link { align-self: flex-start; background: none; border: 0; color: var(--brand-dark); font: 700 .92rem var(--font); cursor: pointer; padding: 2px 0; }
.sc-link:hover { text-decoration: underline; }
.sc .cta-bar { margin: 4px 0 0; }
.sc-cta { width: 100%; min-height: 54px; font-size: 1.05rem; }
.sc-free { font-size: .84rem; color: var(--ink-soft); }
.search-note { display: none; margin-top: 12px; background: var(--warn-bg); border-radius: var(--radius-sm); padding: 14px 16px; font-size: .92rem; }
.search-note.show { display: block; }
.search-note strong { display: block; margin-bottom: 4px; }

/* Barra de busqueda en todas las paginas interiores */
.sbar { background: #fff; border-bottom: 1px solid var(--line); padding: 14px 0; }
.sbar .sc { box-shadow: none; padding: 0; border-radius: 0; flex-direction: row; align-items: stretch; gap: 10px; }
.sbar .sc-row { flex: 1 1 auto; }
.sbar .sc-od { flex: 2 1 0; flex-direction: row; }
.sbar .sc-od .sc-field { padding-right: 14px; }
.sbar .sc-od .sc-field ~ .sc-field { border-left: 0; padding-left: 30px; }
.sbar .sc-swap { left: 50%; right: auto; transform: translate(-50%, -50%); width: 34px; height: 34px; }
.sbar .sc-dates { flex: 1.3 1 0; flex-wrap: nowrap; }
.sbar .sc-dates .sc-field { flex: 1 1 auto; }
.sbar .sc-dates .sc-field ~ .sc-field { border-left: 0; }
.sbar .sc-link, .sbar .sc-free, .sbar .reply-badge, .sbar .cta-route { display: none; }
.sbar .cta-bar { margin: 0; position: static; padding: 0; border: 0; box-shadow: none; background: none; display: flex; }
.sbar .sc-cta { width: auto; min-height: var(--field-h); padding: 0 30px; }
.sbar-toggle { display: none; }
.sbar-cb { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
@media (max-width: 900px) {
  .sbar { padding: 10px 0; }
  .sbar-toggle { display: flex; width: 100%; align-items: center; gap: 10px; min-height: 48px; padding: 0 8px 0 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; font: 600 .95rem var(--font); color: var(--ink); cursor: pointer; text-align: left; }
  .sbar-toggle svg { width: 18px; height: 18px; flex: none; color: var(--ink-soft); }
  .sbar-toggle span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sbar-toggle b { flex: none; background: var(--brand); color: #fff; border-radius: 999px; padding: 8px 14px; font-size: .85rem; }
  .sbar .sc { display: none; }
  .sbar-cb:checked ~ .sc { display: flex; }
  .sbar-cb:checked + .sbar-toggle { display: none; }
  .sbar-cb:focus-visible + .sbar-toggle { outline: 2px solid var(--link); outline-offset: 3px; }
  .sbar .sc { flex-direction: column; gap: 10px; padding-top: 2px; }
  .sbar .sc-od { flex-direction: column; }
  .sbar .sc-od .sc-field ~ .sc-field { border-left: 1px solid var(--line-strong); border-top: 0; padding-left: 14px; }
  .sbar .sc-swap { left: auto; right: 12px; transform: translateY(-50%); }
  .sbar .sc-cta { width: 100%; }
}
@media (max-width: 700px) {
  .sc { padding: 16px; }
  .sc-dates .sc-pax { flex: 0 0 25%; }
}

/* ---------- Migas y cabecera de pagina ----------
   La miga y el H1 de las paginas de contenido comparten una banda gris a sangre.
   Se pinta con sombra recortada: no hace falta tocar el HTML de 30 plantillas. */
.breadcrumbs { font-size: .84rem; color: var(--ink-soft); padding-top: 22px; padding-bottom: 0; display: flex; align-items: center; overflow: hidden; }
.breadcrumbs a { color: var(--ink-soft); }
.breadcrumbs a:hover { color: var(--ink); }
.breadcrumbs span[aria-current] { color: var(--ink); font-weight: 600; }
.breadcrumbs .sep { margin: 0 8px; color: var(--line-strong); }
.breadcrumbs .bc-full { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-back { display: none; }
.breadcrumbs, main.wrap > .hero:first-child:not(.has-photo) { background: var(--page); box-shadow: 0 0 0 100vmax var(--page); clip-path: inset(0 -100vmax); }
.hero { padding: 18px 0 30px; }
.hero h1 { max-width: 820px; }
.hero p.sub, .hero .sub { max-width: 640px; color: var(--ink-soft); font-size: 1.08rem; margin-top: 10px; }
main.wrap > .hero:first-child:not(.has-photo) + * { margin-top: 28px; }
@media (max-width: 760px) {
  .breadcrumbs { font-size: .92rem; padding-top: 8px; }
  .breadcrumbs .bc-full { display: none; }
  .breadcrumbs .bc-back { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; color: var(--ink); font-weight: 600; min-height: 40px; }
  .breadcrumbs .bc-chev { width: 17px; height: 17px; flex: 0 0 17px; color: var(--brand); }
  .breadcrumbs .bc-back-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hero { padding: 10px 0 22px; }
}

/* Cabecera con foto: destino a sangre, texto en blanco sobre veladura oscura */
.hero.has-photo { position: relative; isolation: isolate; color: #fff; padding: 64px 0 56px; min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; }
.hero.has-photo::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: -1;
  background: linear-gradient(90deg, rgba(6, 22, 28, .78) 0%, rgba(6, 22, 28, .5) 50%, rgba(6, 22, 28, .15) 100%), var(--ph-l, var(--navy)) center / cover no-repeat;
  background-color: var(--ph-c, var(--navy)); }
.hero.has-photo h1, .hero.has-photo .eyebrow, .hero.has-photo .sub { color: #fff; }
.hero.has-photo .eyebrow { opacity: .9; }
.hero.has-photo .sub { opacity: .92; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; list-style: none; padding: 0; }
.hero-chips li { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); color: #fff; border-radius: 999px; padding: 6px 14px; font-size: .88rem; font-weight: 600; backdrop-filter: blur(6px); }
.hero-chips li b { font-weight: 800; }
.breadcrumbs:has(+ main.wrap > .hero.has-photo:first-child) { padding-bottom: 12px; }
@media (max-width: 760px) {
  .hero.has-photo { padding: 40px 0 34px; min-height: 230px; }
  .hero.has-photo::before { background: linear-gradient(0deg, rgba(6, 22, 28, .82) 0%, rgba(6, 22, 28, .35) 100%), var(--ph-s, var(--ph-l, var(--navy))) center / cover no-repeat; background-color: var(--ph-c, var(--navy)); }
  }

/* ---------- Home ---------- */
/* SIN isolation: crearia un contexto de apilado que encierra la barra fija del
   movil y el calendario (hoja inferior), y las tarjetas de despues los tapaban.
   La foto va en ::before con z-index -1, que pinta sobre el fondo del lienzo. */
.home-hero { position: relative; padding: 56px 0 64px; }
.home-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(6, 22, 28, .15) 0%, rgba(6, 22, 28, .4) 45%, rgba(6, 22, 28, .72) 100%), var(--ph-l, var(--navy)) center / cover no-repeat;
  background-color: var(--ph-c, var(--navy)); }
.home-hero .wrap { display: grid; grid-template-columns: minmax(360px, 440px) minmax(0, 1fr); gap: 56px; align-items: center; }
.home-hero .hh-copy { color: #fff; }
.home-hero h1 { color: #fff; font-size: 2.9rem; letter-spacing: -0.03em; }
.home-hero .hh-sub { text-shadow: 0 1px 12px rgba(0, 0, 0, .35); color: rgba(255, 255, 255, .95); font-size: 1.12rem; margin-top: 14px; max-width: 520px; }
@media (min-width: 901px) { .home-hero .sc { order: -1; } }
@media (max-width: 900px) {
  .home-hero { padding: 0 0 24px; }
  .home-hero::before { height: 190px; bottom: auto; background: linear-gradient(0deg, rgba(6, 22, 28, .7) 0%, rgba(6, 22, 28, .15) 100%), var(--ph-s, var(--ph-l, var(--navy))) center / cover no-repeat; }
  .home-hero .wrap { grid-template-columns: 1fr; gap: 0; }
  .home-hero .hh-copy { order: 1; min-height: 166px; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px 0 14px; }
  .home-hero h1 { font-size: 1.6rem; }
  .home-hero .hh-sub { display: none; }
  .home-hero .sc { order: 2; }
}

/* Empresas que cubrimos: informativo, en texto, sin logos */
.ops-strip { border-bottom: 1px solid var(--line); padding: 22px 0; }
.ops-strip .wrap { display: flex; align-items: center; gap: 10px 28px; flex-wrap: wrap; }
.ops-strip h2 { font-size: .9rem; font-weight: 600; color: var(--ink-soft); margin: 0; letter-spacing: 0; }
.ops-list { display: flex; flex-wrap: wrap; gap: 8px 26px; list-style: none; padding: 0; margin: 0; }
.ops-list li { font-weight: 800; font-size: 1.02rem; color: #5E6D74; letter-spacing: -0.01em; }
.ops-list a { color: inherit; }
.ops-note { flex-basis: 100%; font-size: .78rem; color: var(--muted); margin: 0; }

/* Tarjetas de destino con foto (como las de Trainline "London to Paris") */
.dest-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; list-style: none; padding: 0; margin: 8px 0 0; }
.dest-card > a { display: block; color: var(--ink); }
.dest-card > a:hover { text-decoration: none; }
.dest-card figure { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; background: var(--ph-c, var(--surface)); }
.dest-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.dest-card > a:hover img { transform: scale(1.035); }
.dest-meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 12px; }
.dest-meta strong { display: block; font-size: 1.02rem; font-weight: 700; line-height: 1.3; }
.dest-meta small { display: block; font-size: .85rem; color: var(--ink-soft); margin-top: 2px; }
.dest-price { text-align: right; flex: none; }
.dest-price small { font-size: .78rem; color: var(--ink-soft); }
.dest-price b { display: block; font-size: 1.2rem; font-weight: 800; color: var(--ink); }
.dest-card.no-photo figure { display: grid; place-items: center; color: var(--brand-dark); }
.dest-card.no-photo figure svg { width: 64px; opacity: .6; }
@media (max-width: 900px) { .dest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; } }
@media (max-width: 560px) { .dest-grid { grid-template-columns: 1fr; } }

/* Como funciona: tres pasos numerados */
.how3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; list-style: none; padding: 0; margin: 8px 0 0; counter-reset: how; }
.how3 li { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; counter-increment: how; }
.how3 li::before { content: "0" counter(how); display: block; font-size: .85rem; font-weight: 800; color: var(--brand-dark); margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.how3 h3 { margin-bottom: 6px; }
.how3 p { color: var(--ink-soft); font-size: .95rem; }
@media (max-width: 760px) { .how3 { grid-template-columns: 1fr; gap: 12px; } .how3 li { padding: 18px; } }

/* Bandas a sangre: verde (el pais en guagua) y oscura (concierge) */
.band { position: relative; isolation: isolate; color: #fff; padding: 64px 0; margin: 40px 0; }
.band::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: -1; background: var(--band-bg, var(--brand-ink)); }
.band-dark { --band-bg: var(--navy); }
.band h2 { color: #fff; font-size: 2.1rem; }
.band p { color: rgba(255, 255, 255, .86); max-width: 56ch; font-size: 1.05rem; }
.band .eyebrow { color: #8FE3C4; }
.band-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.band .btn { margin-top: 22px; }
.band-map svg { width: 100%; height: auto; display: block; }
.band-map .isl { fill: rgba(255, 255, 255, .08); stroke: rgba(255, 255, 255, .25); stroke-width: 1.5; }
.band-map .ln { stroke: #5FD3A8; stroke-width: 1.6; opacity: .55; fill: none; }
.band-map .dot { fill: #fff; }
.band-map .dot.big { fill: #8FE3C4; }
.band-map text { fill: rgba(255, 255, 255, .85); font: 700 13px var(--font); }
.band-stats { display: flex; gap: 32px; flex-wrap: wrap; margin-top: 26px; list-style: none; padding: 0; }
.band-stats b { display: block; font-size: 1.9rem; font-weight: 800; color: #fff; letter-spacing: -0.02em; line-height: 1.1; }
.band-stats span { font-size: .85rem; color: rgba(255, 255, 255, .75); }
@media (max-width: 860px) {
  .band { padding: 44px 0; }
  .band h2 { font-size: 1.6rem; }
  .band-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* Chat de ejemplo dentro de la banda oscura: la animacion vive en la tarjeta */
.chat-demo { background: #fff; color: var(--ink); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 10px; max-width: 400px; margin-left: auto; box-shadow: var(--shadow-float); }
.chat-demo .msg { color: var(--ink); font-size: .92rem; max-width: 82%; padding: 10px 14px; border-radius: 16px; font-size: .92rem; line-height: 1.4; opacity: 0; transform: translateY(6px); animation: chat-in .45s cubic-bezier(.34, 1.56, .64, 1) forwards; }
.chat-demo .msg.them { background: var(--surface); align-self: flex-start; border-bottom-left-radius: 4px; }
.chat-demo .msg.us { background: #DCF8E8; align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-demo .msg:nth-child(2) { animation-delay: .5s; }
.chat-demo .msg:nth-child(3) { animation-delay: 1.1s; }
.chat-demo .msg:nth-child(4) { animation-delay: 1.7s; }
.chat-demo .chat-head { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .92rem; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.chat-demo .chat-head i { width: 34px; height: 34px; border-radius: 999px; background: var(--brand); display: grid; place-items: center; color: #fff; font-style: normal; }
.chat-demo .chat-head small { display: block; font-weight: 600; color: var(--brand-dark); font-size: .75rem; }
@keyframes chat-in { to { opacity: 1; transform: none; } }
@media (max-width: 860px) { .chat-demo { margin-left: 0; } }

/* Sin costes ocultos: ventajas con icono */
.perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; list-style: none; padding: 0; margin: 10px 0 0; }
.perks li { display: flex; gap: 14px; align-items: flex-start; }
.perks .t-icon { flex: none; width: 40px; height: 40px; border-radius: 999px; background: var(--brand-tint); color: var(--brand-dark); display: grid; place-items: center; }
.perks .t-icon svg { width: 19px; height: 19px; }
.perks strong { display: block; font-size: 1rem; }
.perks span { display: block; color: var(--ink-soft); font-size: .92rem; line-height: 1.45; margin-top: 2px; }
@media (max-width: 700px) { .perks { grid-template-columns: 1fr; } }

/* Pago seguro */
.pay-strip { display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 8px 0; }
.pay-strip .pay-lock { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .95rem; }
.pay-strip .pay-lock svg { width: 20px; height: 20px; color: var(--brand-dark); }
.pay-marks { display: flex; gap: 10px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.pay-marks li { border: 1px solid var(--line); border-radius: 6px; padding: 5px 11px; font-size: .8rem; font-weight: 800; color: #3B4A52; letter-spacing: .01em; background: #fff; }
.pay-strip p { flex-basis: 100%; font-size: .82rem; color: var(--muted); margin: 0; }

/* Guias con foto */
.guide-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; padding: 0; margin: 8px 0 0; }
.guide-cards a { display: block; color: var(--ink); }
.guide-cards a:hover { text-decoration: none; }
.guide-cards figure { aspect-ratio: 16 / 10; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.guide-cards img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.guide-cards a:hover img { transform: scale(1.035); }
.guide-cards strong { display: block; margin-top: 12px; font-size: 1.02rem; line-height: 1.35; }
@media (max-width: 860px) { .guide-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .guide-cards { grid-template-columns: 1fr; } }

/* Rutas populares por ciudad de salida (listas de enlaces) */
.journeys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.journeys h3 { font-size: 1rem; margin-bottom: 10px; }
.journeys ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }
.journeys a { color: var(--ink-soft); font-size: .92rem; }
.journeys a:hover { color: var(--ink); }
@media (max-width: 860px) { .journeys { grid-template-columns: 1fr 1fr; } }

/* ---------- Resultados de horarios (pagina de ruta) ---------- */
.results { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 10px; }
.res > a, .res > div { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto auto; align-items: center; gap: 20px; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.res > a:hover { text-decoration: none; border-color: var(--line-strong); box-shadow: var(--shadow); }
.res-times { display: flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
.res-times strong { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; }
.res-times .res-arr { color: var(--ink-soft); font-weight: 700; }
.res-times .res-arr small { font-size: .75rem; font-weight: 600; vertical-align: super; }
.res-line { flex: 1; min-width: 24px; height: 2px; background: var(--line-strong); position: relative; }
.res-line::before, .res-line::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 999px; transform: translateY(-50%); background: #fff; border: 2px solid var(--line-strong); }
.res-line::before { left: -2px; } .res-line::after { right: -2px; }
.res-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .88rem; color: var(--ink-soft); min-width: 0; }
.res-meta span:first-child { color: var(--ink); font-weight: 600; }
.res-price { text-align: right; line-height: 1.15; }
.res-price small { display: block; font-size: .75rem; color: var(--ink-soft); }
.res-price b { font-size: 1.3rem; font-weight: 800; }
.res .btn { pointer-events: none; }
.res.is-last > div { background: var(--surface-2); color: var(--muted); }
.res.is-last .res-times strong { color: var(--muted); }
.res .tag-last { font-size: .72rem; font-weight: 700; background: var(--surface); color: var(--ink-soft); padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.res-note { font-size: .8rem; color: var(--ink-soft); margin-top: 10px; max-width: 72ch; }
@media (max-width: 760px) {
  .res > a, .res > div { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 14px 16px; }
  .res-times { grid-column: 1; }
  .res-price { grid-column: 2; grid-row: 1; }
  .res-meta { grid-column: 1 / -1; }
  .res .btn { display: none; }
}

/* ---------- Pie ---------- */
.site-footer { background: var(--page); border-top: 1px solid var(--line); color: var(--ink-soft); margin-top: 64px; font-size: .88rem; }
.site-footer .wrap { padding-top: 44px; padding-bottom: 24px; }
.site-footer a { color: var(--ink-soft); }
.site-footer a:hover { color: var(--ink); }
.footer-grid { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 28px; margin-bottom: 28px; align-items: start; }
.footer-brand p { max-width: 300px; font-size: .85rem; line-height: 1.55; margin-top: 12px; }
.site-footer .logo { color: var(--ink); }
.site-footer h4 { font-size: .9rem; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.site-footer ul { list-style: none; display: flex; flex-direction: column; gap: 8px; line-height: 1.35; }
.footer-pay { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; border-top: 1px solid var(--line); padding: 18px 0; }
.footer-pay .pay-lock { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--ink); font-size: .88rem; }
.footer-pay .pay-lock svg { width: 18px; height: 18px; color: var(--brand-dark); }
.footer-fine { border-top: 1px solid var(--line); padding-top: 18px; font-size: .78rem; color: var(--muted); display: flex; flex-direction: column; gap: 5px; }
.checkout-footer { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.checkout-footer ul { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px 20px; }
.checkout-footer .footer-legal { flex-basis: 100%; }
@media (max-width: 980px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) {
  .site-footer .wrap { padding-top: 30px; }
  .footer-grid { gap: 22px 16px; }
  .site-footer a { display: inline-flex; align-items: center; min-height: 32px; }
}


/* ====== Componentes heredados (v5), ya pasados por el sistema v6 ====== */
/* Tarjetas de ruta, pasos y fila de confianza (repuestos: se usan fuera de la home) */
/* Route cards (home) */
.route-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.route-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 8px; transition: box-shadow 0.15s, transform 0.1s; box-shadow: var(--shadow); }
.route-card:hover { text-decoration: none; transform: translate(-1px,-1px); box-shadow: var(--shadow); }
.route-card .bus-mini { width: 26px; height: auto; }
.rc-times { display: flex; gap: 6px; flex-wrap: wrap; }
.rc-times span { font-size: 0.76rem; font-weight: 700; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; color: var(--ink); }
.rc-times .rc-more { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-dark); }
.route-card .rc-cities { font-weight: 800; font-size: 1.08rem; color: var(--ink); display: flex; align-items: flex-start; gap: 8px; letter-spacing: -0.01em; min-width: 0; }
/* Origen arriba y destino debajo SIEMPRE: si se deja en una linea, unas filas caben y otras
   vuelven en dos y la lista pierde el peine. */
.route-card .rc-pair { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.25; }
.route-card .rc-dest { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.route-card .rc-cities .arrow { color: var(--brand); font-weight: 400; }
.route-card .rc-meta { font-size: 0.82rem; color: var(--ink-soft); display: flex; gap: 14px; flex-wrap: wrap; }
.route-card .rc-price { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: 6px; }
.route-card .rc-price .amount { font-weight: 800; font-size: 1.35rem; color: var(--ink); }
.route-card .rc-price .label { font-size: 0.8rem; color: var(--ink-soft); }
.badge-soon { background: var(--surface); color: var(--ink-soft); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 10px; border-radius: 99px; align-self: center; white-space: nowrap; }
/* How it works */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; counter-reset: step; }
.step { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.step::before { counter-increment: step; content: counter(step); font-weight: 800; font-size: 0.85rem; color: #fff; background: var(--ink); width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.step p { font-size: 0.9rem; color: var(--ink-soft); margin-top: 6px; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }
/* Trust row */
.trust-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 30px 0 8px; }
.trust-item { padding: 6px 4px; }
.trust-item .t-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-dark); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.trust-item .t-icon svg { width: 18px; height: 18px; }
.trust-item strong { display: block; font-size: 0.95rem; margin-bottom: 2px; }
.trust-item span { font-size: 0.84rem; color: var(--ink-soft); line-height: 1.45; display: block; }
@media (max-width: 860px) { .trust-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .trust-row { grid-template-columns: 1fr; gap: 18px; } }

/* Quick answer (AEO) */
.quick-answer { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin: 20px 0; }
.quick-answer .qa-label { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--brand-dark); display: block; margin-bottom: 6px; }
.quick-answer p { font-size: 1rem; }

/* Recomendacion de la pagina "Como llegar": la guagua primero, y se tiene que
   ver antes que la tabla de opciones. */
.bus-first { background: var(--brand-tint); border-radius: var(--radius); padding: 22px 24px; margin: 24px 0; }
.bus-first h2 { margin: 0 0 10px; }
.bus-first p { margin: 0 0 12px; max-width: 68ch; }
.bus-first .btn { margin-top: 4px; }

/* Bloque de seguridad: tono sereno, sin alarma. Blanco con marco, no rojo. */
.safety-note { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; margin: 28px 0; }
.safety-note h2 { margin: 0 0 10px; }
.safety-note p { margin: 0 0 12px; max-width: 68ch; }
.safety-note a { font-weight: 700; }
.safety-tips { margin: 0 0 12px; padding-left: 20px; }
.safety-tips li { margin-bottom: 4px; }
.safety-outro { color: var(--ink-soft); }

/* Verification pill */
.stamp { display: inline-flex; align-items: center; gap: 7px; color: var(--brand-dark); font-size: 0.82rem; font-weight: 700; padding: 6px 14px; border-radius: 99px; background: var(--brand-tint); }
.stamp.seed { background: var(--warn-bg); color: var(--warn-ink); }
.stamp-note { font-size: 0.8rem; color: var(--ink-soft); margin-top: 8px; max-width: 520px; }

/* Nombrar a las empresas que operan no implica acuerdo con ellas: se dice donde
   aparece el nombre, no escondido en el pie. */
.operators-note { margin: 10px 0 0; font-size: 0.82rem; color: var(--ink-soft); max-width: 62ch; }

/* Calendario propio. El <select> sigue debajo como fuente de verdad y como
   respaldo si el JS no llega a ejecutarse. */
.dp { position: relative; }
.dp-native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.dp-btn { width: 100%; text-align: left; background: #fff; border: 1px solid var(--line-strong); border-radius: 10px;
  padding: 13px 14px; font: inherit; font-weight: 800; color: var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dp-btn::after { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; opacity: .45;
  -webkit-mask: var(--cal-icon) center/contain no-repeat; mask: var(--cal-icon) center/contain no-repeat; }
.dp-btn:hover { border-color: var(--brand); }
.dp-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.dp-day::first-letter { text-transform: uppercase; }
.dp-empty { color: var(--ink-soft); font-weight: 400; }

.dp-pop { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: min(322px, 92vw);
  background: rgba(255,255,255,.98); border: 1px solid var(--line); border-radius: 14px; padding: 14px;
  box-shadow: 0 18px 44px rgba(20, 32, 46, .18); backdrop-filter: blur(10px); }
/* En movil el campo va en la columna derecha y el popover se salia por el borde. */
@media (max-width: 620px) { .dp-pop { left: auto; right: 0; } }
/* En movil el calendario se abria dentro de la tarjeta y la barra fija le tapaba
   las ultimas filas. Pasa a hoja inferior, por encima de todo y con scroll propio. */
@media (max-width: 820px) {
  .dp-pop { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%;
    max-height: 78vh; overflow: auto; z-index: 60; border-radius: 16px 16px 0 0;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 30px rgba(20,32,46,.22); }
  .dp-pop .dp-grid { max-width: 360px; margin-left: auto; margin-right: auto; }
  .dp-pop .dp-head { max-width: 360px; margin-left: auto; margin-right: auto; }
  body.dp-open { overflow: hidden; }
  body.dp-open .cta-bar { display: none; }
  body.dp-open::after { content: ""; position: fixed; inset: 0; background: rgba(20,32,46,.35); z-index: 55; }
}
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dp-head strong { font-size: .95rem; }
.dp-head strong::first-letter { text-transform: uppercase; }
.dp-nav { width: 32px; height: 32px; border: 1px solid var(--line); background: #fff; border-radius: 8px;
  font-size: 1.1rem; line-height: 1; cursor: pointer; color: var(--ink); }
.dp-nav:disabled { opacity: .3; cursor: default; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-wd span { text-align: center; font-size: .75rem; font-weight: 700; color: var(--ink-soft);
  text-transform: uppercase; padding-bottom: 6px; }
.dp-d { aspect-ratio: 1; border: 0; background: transparent; border-radius: 9px; font: inherit;
  font-size: .88rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.dp-d:hover:not(.off) { background: var(--brand-tint); }
.dp-d.off { color: #C3C9CF; cursor: default; }
.dp-d.on { background: var(--brand); color: #fff; }

/* Que hacemos: se explica al recibir la solicitud, no despues del cobro */
.what-we-do { background: var(--surface-2); border-radius: var(--radius-sm); padding: 14px 16px; margin: 18px 0 0; text-align: left; }
.what-we-do strong { display: block; font-size: 0.82rem; letter-spacing: .04em; color: var(--brand-dark); margin-bottom: 6px; }
.what-we-do p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); }

/* Telefono con prefijo obligatorio: el select no puede comerse el numero */
/* Prefijo encima del telefono, siempre. En rejilla se salia de la tarjeta. */
.phone-row { display: grid; grid-template-columns: 1fr; gap: 8px; }
.phone-row select, .phone-row input { width: 100%; min-width: 0; }
/* Selector de prefijo: boton + popover con buscador, mismo look que el calendario */
.cc-btn::after { -webkit-mask: none; mask: none; background: none; width: auto; height: auto; content: "▾"; opacity: .55; }
.cc-pop { width: 100%; padding: 10px; }
.cc-q { width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px; font: inherit; font-size: .95rem; margin-bottom: 8px; }
.cc-q:focus { outline: 2px solid var(--brand); border-color: var(--brand); }
.cc-list { max-height: 260px; overflow-y: auto; overscroll-behavior: contain; }
.cc-list hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.cc-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px;
  padding: 8px 10px; font: inherit; font-size: .92rem; color: var(--ink); cursor: pointer; }
.cc-item:hover, .cc-item.sel { background: var(--surface); }
.cc-item .cc-flag { flex: none; font-size: 1.05rem; }
.cc-item .cc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-item .cc-code { flex: none; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.cc-empty { padding: 10px; color: var(--ink-soft); font-size: .9rem; }

/* Firma editorial: quien lo comprueba y cuando */
.byline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 10px 0 0; font-size: 0.82rem; color: var(--ink-soft); }
.byline .by-who { font-weight: 700; color: var(--brand-dark); }
.byline .by-role::before, .byline .by-check::before { content: "·"; margin-right: 10px; opacity: 0.5; }
@media (max-width: 560px) { .byline .by-check { flex-basis: 100%; } .byline .by-check::before { content: none; margin: 0; } }

/* Schedule table */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
table.schedule { width: 100%; border-collapse: collapse; min-width: 520px; }
table.schedule th { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); }
table.schedule td { padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 0.93rem; color: var(--ink-soft); }
table.schedule tr:last-child td { border-bottom: none; }
table.schedule td.time { font-weight: 800; font-size: 1rem; color: var(--ink); }
table.schedule tr.last-departure td { color: #A6ADB5; }
table.schedule tr.last-departure td.time { color: #A6ADB5; }
table.schedule .tag-last { font-size: .75rem; font-weight: 700; background: var(--surface); color: var(--ink-soft); padding: 2px 9px; border-radius: 99px; white-space: nowrap; }
.table-note { font-size: 0.8rem; color: var(--ink-soft); margin-top: 10px; }
/* Tabla de aeropuertos: cifras alineadas a la derecha para comparar de un vistazo,
   y los que no tienen vuelo regular en gris, para que no se lean como iguales. */
table.schedule.ap-table { min-width: 640px; }
/* Tiempo por mes (ciudad y aeropuerto): cuatro columnas sin ancho minimo, enteras a 360 px */
table.schedule.climate-table { min-width: 0; }
table.schedule.climate-table th, table.schedule.climate-table td { padding: 9px 8px; }
table.schedule.climate-table td:not(:first-child), table.schedule.climate-table th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
table.schedule.climate-table td:not(:first-child) { white-space: nowrap; }
/* Horarios de Caribe Tours por terminal: dos columnas sin ancho minimo, la duracion bajo el destino, entera a 360 px */
table.schedule.ct-table { min-width: 0; table-layout: fixed; }
table.schedule.ct-table th:first-child { width: 38%; }
table.schedule.ct-table td { vertical-align: top; padding: 12px 10px; }
table.schedule.ct-table .ct-dur, table.schedule.ct-table .ct-times { display: block; font-size: .85rem; color: var(--ink-soft); margin-top: 2px; overflow-wrap: anywhere; }
.ap-table td.ap-num, .ap-table th:nth-child(5), .ap-table th:nth-child(6) { text-align: right; font-variant-numeric: tabular-nums; }
.ap-table td.ap-num { font-weight: 700; color: var(--ink); }
.ap-table tr.ap-minor td, .ap-table tr.ap-minor td.time, .ap-table tr.ap-minor td.ap-num { color: #A6ADB5; font-weight: 400; }
.src-line { font-size: 0.78rem; color: var(--ink-soft); margin: 8px 0 0; }
.ap-work { background: var(--surface-2); border-radius: var(--radius-sm); padding: 16px 18px; margin: 20px 0; }
.ap-work h3 { margin: 0 0 6px; font-size: 1.02rem; }
.ap-work p { margin: 0; }
.ap-code { font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); letter-spacing: .05em; }
.ap-back { margin-top: 26px; font-weight: 700; }

/* Route facts strip */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 22px 0; }
.fact { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
.fact .f-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); display: block; }
.fact .f-value { font-weight: 800; font-size: 1.02rem; }
@media (max-width: 760px) { .facts { grid-template-columns: repeat(2, 1fr); } }

/* Product cards */
.products { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; align-items: stretch; }
@media (max-width: 820px) { .products { grid-template-columns: 1fr; } }
.ticket { position: relative; border-radius: var(--radius); display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); }
.ticket-pickup { border: 2px solid var(--brand); }
.ticket .t-main { padding: 24px 24px 16px; flex: 1; }
.ticket .t-stub { border-top: 1px solid var(--line); padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ticket-pickup .t-stub { border-top-color: #D2EFE5; }
.ticket .t-kind { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; display: inline-block; padding: 4px 11px; border-radius: 99px; margin-bottom: 12px; background: var(--surface); color: var(--ink-soft); }
.ticket-pickup .t-kind { background: var(--brand-tint); color: var(--brand-dark); }
.ticket h3 { font-size: 1.25rem; margin-bottom: 8px; }
.ticket .t-desc { font-size: 0.92rem; margin-bottom: 14px; color: var(--ink-soft); }
.ticket ul { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 0.9rem; }
.ticket ul li { padding-left: 24px; position: relative; }
.ticket ul li::before { content: ""; position: absolute; left: 0; top: 4px; width: 15px; height: 15px; border-radius: 50%; background: var(--brand-tint) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2300825D" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center/9px no-repeat; }
.ticket .t-price { display: flex; align-items: baseline; gap: 5px; }
.ticket .t-price .from { font-size: 0.76rem; color: var(--ink-soft); }
.ticket .t-price .amount { font-weight: 800; font-size: 1.7rem; color: var(--ink); }
.ticket .t-price .pp { font-size: 0.76rem; color: var(--ink-soft); }
.ticket .t-cutoff { font-size: 0.76rem; color: var(--ink-soft); width: 100%; }
.pay-note { font-size: 0.82rem; color: var(--ink-soft); margin-top: 14px; }

/* Guarantee band */
.guarantee { background: var(--brand-tint); border-radius: var(--radius); padding: 26px; margin: 32px 0; }
.guarantee h2 { color: var(--brand-dark); font-size: 1.25rem; }
.guarantee p { max-width: 900px; font-size: 0.95rem; }
.guarantee .fine { font-size: 0.8rem; color: var(--ink-soft); margin-top: 10px; }

/* Itinerary combined */
.itinerary { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin: 20px 0; }
.itinerary ol { margin: 12px 0 0 20px; display: flex; flex-direction: column; gap: 8px; font-size: 0.93rem; }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 18px 44px 18px 2px; font-weight: 700; font-size: 0.98rem; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 1.3rem; font-weight: 400; color: var(--ink-soft); }
.faq details[open] summary::after { content: "–"; }
.faq .faq-a { padding: 0 2px 18px; color: var(--ink-soft); font-size: 0.93rem; max-width: 900px; }

/* Terminal cards */
.terminal-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .terminal-cards { grid-template-columns: 1fr; } }
.terminal-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.terminal-card h3 { margin-bottom: 6px; }
.terminal-card .addr { font-size: 0.86rem; color: var(--ink-soft); margin-bottom: 10px; }
.terminal-card .how { font-size: 0.86rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; color: var(--ink-soft); }
.terminal-card .how strong { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); display: block; margin-bottom: 3px; }
.map-link { font-size: 0.85rem; font-weight: 700; }

/* Content prose (guides, legal) */
.prose { max-width: none; }
.prose h2 { margin-top: 34px; }
.prose h3 { margin-top: 22px; margin-bottom: 8px; }
.prose p { margin-bottom: 14px; color: #333E4A; }
/* Solo listas de texto: las listas con clase son componentes (tarjetas, rejillas)
   y la sangria las descolocaba respecto al titulo. */
.prose ul:not([class]), .prose ol:not([class]) { margin: 0 0 14px 22px; }
.prose :is(ul, ol):not([class]) > li { margin-bottom: 6px; }
.prose .aff-note { font-size: 0.8rem; color: var(--ink-soft); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; margin: 14px 0; }
.guide-shell .breadcrumbs, .guide-article { max-width: var(--container); }
.guide-shell .breadcrumbs { padding-top: 18px; }
.guide-article { margin-left: auto; margin-right: auto; }
.guide-article .guide-hero h1 { max-width: 720px; }
.guide-article > p:first-of-type { max-width: 820px; font-size: 1.05rem; color: var(--ink-soft); }
.resource-page { max-width: var(--container); }
.resource-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 22px 0 34px; }
.resource-card { display: flex; flex-direction: column; gap: 6px; min-height: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 18px; background: #fff; color: var(--ink); transition: border-color .12s, transform .12s; }
.resource-card:hover { text-decoration: none; border-color: #BFC6CE; transform: translateY(-1px); }
.resource-card strong { font-size: 1.02rem; line-height: 1.25; }
.resource-card small { color: var(--ink-soft); font-weight: 700; }
.resource-card p { color: var(--ink-soft); font-size: .9rem; margin: 4px 0 0; }
.term-card strong { font-size: 1.12rem; }
.operator-page .hero h1 { max-width: 760px; }
.operator-context { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 24px 0; margin: 28px 0; }
.operator-context h2 { margin-top: 0; }
.operator-context h3 { font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand-dark); margin-top: 22px; }
.operator-context p { max-width: 780px; }
.operator-faq { border-top: 1px solid var(--line); padding-top: 26px; margin-top: 30px; }

/* Link lists */
.activity-list { list-style: none; margin: 14px 0 !important; display: flex; flex-direction: column; gap: 8px; }
/* 20 destinos en una sola columna son 20 pantallazos de scroll. En rejilla
   se leen de un vistazo y siguen siendo enlaces normales. */
.activity-list.cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 8px; }
.activity-list.cols li { padding: 11px 14px; font-size: 0.92rem; }
.activity-list li { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 16px; margin: 0 !important; transition: border-color 0.12s; }
.activity-list li:hover { border-color: #C9CED4; }
.activity-list a { font-weight: 700; color: var(--ink); }

/* CTA band */
.cta-band { background: var(--navy); border-radius: var(--radius); color: #fff; padding: 40px 30px; text-align: center; margin: 30px 0; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #B9C2CD; max-width: 520px; margin: 0 auto 20px; }

/* Report form */
.report-box { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; max-width: 640px; }
.report-box input, .report-box textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: var(--font); font-size: 0.93rem; background: #fff; margin-bottom: 10px; color: var(--ink); }
.report-box input:focus, .report-box textarea:focus { outline: 2px solid var(--brand); }
.report-box textarea { min-height: 90px; resize: vertical; }
.report-thanks { display: none; background: var(--brand-tint); color: var(--brand-dark); border-radius: var(--radius-sm); padding: 12px 14px; margin-top: 8px; font-weight: 600; }
.report-thanks.show { display: block; }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* Seed banner */
.seed-banner { background: var(--surface); font-size: 0.8rem; padding: 7px 0; color: var(--ink-soft); }

/* Date strip + chips */
.date-strip, .chip-row { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: thin; max-width: 100%; }
.chip-row { flex-wrap: wrap; }
.date-chip { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; padding: 9px 14px; font-family: var(--font); cursor: pointer; color: var(--ink); min-width: 92px; text-align: left; transition: border-color 0.1s; }
.date-chip strong { font-weight: 800; font-size: 0.9rem; }
.date-chip span { font-size: 0.72rem; color: var(--ink-soft); }
.date-chip:hover { border-color: var(--ink); text-decoration: none; }
.date-chip.sel { border-color: var(--line-strong); border-width: 2px; background: var(--ink); color: #fff; }
.date-chip.sel span { color: #B9C2CD; }
.date-chip:disabled { opacity: 0.45; cursor: not-allowed; text-decoration: line-through; }

/* Checkout */
.book-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 26px; align-items: start; margin-top: 10px; }
.book-grid > * { min-width: 0; }
@media (max-width: 860px) { .book-grid { grid-template-columns: 1fr; } }
.book-h { font-size: 1.02rem; margin: 22px 0 10px; }
.book-h:first-child { margin-top: 0; }
.book-fields { display: flex; flex-direction: column; gap: 10px; max-width: 480px; }
.book-fields input:not([type="checkbox"]):not([type="radio"]), .book-fields select { padding: 13px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-family: var(--font); font-size: 0.95rem; background: #fff; color: var(--ink); min-height: 49px; }
.book-fields select { font-weight: 700; cursor: pointer; appearance: none; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) 21px, calc(100% - 12px) 21px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.book-fields input:focus, .book-fields select:focus { outline: 2px solid var(--brand); border-color: var(--brand); }
.book-summary { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); max-width: 560px; margin-top: 26px; }
.pax-select { padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-family: var(--font); font-size: 1rem; font-weight: 700; background: #fff; color: var(--ink); min-width: 110px; }
.pax-select:focus { outline: 2px solid var(--brand); }
.book-summary h3 { margin-bottom: 8px; }
.bs-line { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 8px; }
.bs-total { font-weight: 800; font-size: 1.8rem; margin-bottom: 14px; }
.book-success { background: var(--brand-tint); border: 1.5px solid var(--brand); border-radius: var(--radius); padding: 28px; margin: 20px 0; }

/* Sticky mobile CTA */
.sticky-cta { display: none; }
@media (max-width: 760px) {
  .sticky-cta { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--line); padding: 10px 16px; gap: 10px; align-items: center; z-index: 60; box-shadow: 0 -4px 16px rgba(20,32,46,0.08); }
  .sticky-cta .sc-price { font-weight: 800; font-size: 1.15rem; color: var(--ink); line-height: 1.1; }
  .sticky-cta .sc-price small { display: block; font-weight: 500; font-size: .75rem; color: var(--ink-soft); }
  .sticky-cta .btn { margin-left: auto; padding: 11px 18px; font-size: 0.92rem; }
  body.has-sticky { padding-bottom: 72px; }
}

/* ==== Formulario de lead ==== */
.lead-wrap { max-width: 900px; padding-bottom: 20px; }
.lead-head { padding: 26px 0 6px; }
.lead-head .eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.lead-head .bus-mini { width: 26px; }
.lead-block { padding: 22px 0; border-bottom: 1px solid var(--line); }
.lead-block:last-of-type { border-bottom: none; }
.lead-hint { font-size: 0.85rem; color: var(--ink-soft); margin: -4px 0 12px; }
.seg { display: inline-flex; background: var(--surface); border-radius: 99px; padding: 4px; gap: 4px; }
.seg-btn { border: none; background: none; font-family: var(--font); font-weight: 800; font-size: 0.92rem; padding: 9px 20px; border-radius: 99px; cursor: pointer; color: var(--ink-soft); }
.seg-btn.sel { background: var(--ink); color: #fff; }
.slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.slot { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; padding: 13px 16px; font-family: var(--font); cursor: pointer; color: var(--ink); text-align: left; }
.slot strong { font-weight: 800; font-size: 0.95rem; }
.slot span { font-size: 0.76rem; color: var(--ink-soft); }
.slot:hover { border-color: var(--ink); }
.slot.sel { border-color: var(--brand); border-width: 2px; background: var(--brand-tint); }
.slot.sel span { color: var(--brand-dark); }
.lead-submit { position: static; background: #fff; border-top: 1px solid var(--line); padding: 16px 0 20px; margin-top: 10px; }
.lead-submit .btn { width: 100%; padding: 16px; font-size: 1.05rem; }
.lead-summary { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 10px; text-align: center; }
.lead-form .book-fields { max-width: none; }

/* Lead form en móvil */
@media (max-width: 700px) {
  .lead-head { padding: 18px 0 2px; }
  .lead-head h1 { font-size: 1.5rem; }
  .lead-block { padding: 18px 0; }
  .slots { grid-template-columns: 1fr 1fr; }
  .lead-submit { padding: 12px 0 16px; margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
  .book-fields input:not([type="checkbox"]):not([type="radio"]) { font-size: 16px; }
}

@media (min-width: 701px) { .lead-submit { position: sticky; bottom: 0; } }
@media (max-width: 700px) { .lead-submit { border-top: 1px solid var(--line); } }
.lead-head .section-sub { font-size: 0.92rem; }

/* ==== Solicitud v4: una pantalla ==== */
.lead2 { max-width: 1200px; padding-top: 18px; padding-bottom: 30px; }
.lead2-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); gap: 32px; align-items: start; }
.lead2-main h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 4px 0 6px; }
.lead2-main .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.lead2-main .eyebrow .bus-mini, .lead2-step2 .eyebrow .bus-mini { width: 26px; }
.lead2-sub { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 18px; }
.lead2-h { font-size: 1.05rem; margin: 22px 0 6px; }
.assist-strip { padding: 10px 0 0; margin: 10px 0 4px; }
.assist-head { display: block; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand-dark); margin-bottom: 6px; }
.assist-strip ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; color: var(--ink-soft); font-size: 0.8rem; }
.assist-strip li { position: relative; padding-left: 14px; }
.assist-strip li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }

.trip-card { background: var(--surface); border-radius: 12px; padding: 4px 16px; }
.trip-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; }
.trip-row + .trip-row { border-top: 1px solid #E3E6EA; }
.trip-label { width: 84px; flex: none; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.trip-row .dp { flex: 1; min-width: 0; }
.trip-row .dp-btn { border: none; background: transparent; padding: 0; border-radius: 0; font-size: 1.02rem; }
.trip-row .dp-btn:hover, .trip-row .dp-btn:focus-visible { outline: none; text-decoration: underline; }
.trip-row select { flex: 1; border: none; background: none; font-family: var(--font); font-size: 1.02rem; font-weight: 800; color: var(--ink); padding: 0; min-width: 0; }
.trip-row select:focus { outline: none; text-decoration: underline; }
/* Fecha y hora en la misma fila: la hora es un select compacto pegado a la derecha */
.trip-row .trip-time { flex: 0 0 auto; width: auto; font-size: .95rem; color: var(--brand-dark); padding: 0 18px 0 8px; border-left: 1px solid #E3E6EA;
  appearance: none; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%235A6572" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>') right center/12px no-repeat; }
.return-actions { display: flex; gap: 10px; align-items: center; margin: 10px 0 18px; }
.return-link { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; border: 1px solid var(--line-strong); border-radius: 99px; background: #fff; color: var(--ink); padding: 8px 16px; font-family: var(--font); font-size: 0.9rem; font-weight: 800; cursor: pointer; }
.return-link:hover { border-color: var(--brand); color: var(--brand-dark); }
.return-link[data-bf-add-return] { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-tint); }
.return-link[data-bf-add-return]:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.return-hint { font-size: 0.84rem; color: var(--ink-soft); margin: 0 0 10px; }
.return-link.remove { background: var(--surface-2); color: var(--ink-soft); }

.times { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.time-chip { border: 1px solid var(--line-strong); border-radius: 99px; background: #fff; padding: 9px 18px; font-family: var(--font); font-weight: 800; font-size: 0.95rem; color: var(--ink); cursor: pointer; }
.time-chip:hover { border-color: var(--ink); }
.time-chip.sel { background: var(--ink); border-color: var(--ink); color: #fff; }
.time-chip.any { color: var(--brand-dark); border-color: var(--brand); }
.time-chip.any.sel { background: var(--brand); border-color: var(--brand); color: #fff; }

.lead2-side { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); position: sticky; top: 78px; }
.lead2-side .btn { width: 100%; padding: 15px; font-size: 1rem; }
.lead2-summary { font-size: 0.82rem; color: var(--ink-soft); margin: 14px 0 10px; }
@media (max-width: 900px) {
  .lead2-grid { grid-template-columns: 1fr; gap: 22px; }
  .lead2-side { position: static; box-shadow: var(--shadow); }
  .lead2-main h1 { font-size: 1.5rem; }
  .times { gap: 7px; }
  .time-chip { padding: 9px 15px; font-size: 0.92rem; }
  .book-fields input:not([type="checkbox"]):not([type="radio"]) { font-size: 16px; }
}
.ap-note { display: block; background: var(--brand-tint); color: var(--brand-dark); font-weight: 600; margin-top: 12px; }

/* ==== Móvil: campos a todo el ancho útil ==== */
@media (max-width: 700px) {
  .lead2 { padding-left: 16px; padding-right: 16px; }
  .lead2-side { margin-left: -16px; margin-right: -16px; padding: 20px 16px; border-radius: 0; border-left: none; border-right: none; box-shadow: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .book-fields { gap: 12px; }
  .book-fields input:not([type="checkbox"]):not([type="radio"]) { width: 100%; padding: 15px 14px; font-size: 16px; }
  .trip-card { padding: 4px 14px; }
  .trip-label { width: 76px; }
  .trip-row select { width: 100%; font-size: 1.05rem; }
  /* En movil la hora baja a su propia linea, alineada con la fecha */
  .trip-row { flex-wrap: wrap; row-gap: 4px; }
  .trip-row .dp { flex: 1 1 calc(100% - 88px); }
  .trip-row .trip-time { flex: 0 0 auto; width: auto; font-size: .92rem; margin-left: 88px; border-left: none; padding-left: 0; }
  .return-actions { margin-top: 12px; }
  .return-link { width: 100%; min-height: 46px; font-size: 1rem; }
  .lead2-side .btn { padding: 17px; font-size: 1.05rem; }
  .assist-strip ul { grid-template-columns: 1fr; }
  .times { gap: 8px; }
  .time-chip { flex: 1 1 auto; min-width: 84px; text-align: center; }
  .report-box { margin-left: -16px; margin-right: -16px; border-radius: 0; border-left: none; border-right: none; }
  .report-box input, .report-box textarea { font-size: 16px; padding: 14px; }
}

/* Bloque de experiencia real (AI-proof) */
.tips { padding-top: 8px; }
.tip { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; margin-bottom: 18px; max-width: 940px; }
.tip h3 { font-size: 1rem; margin-bottom: 4px; }
.tip p { font-size: 0.94rem; color: var(--ink-soft); }

/* ==== Mapa de rutas ==== */
.map-wrap { background: #EAF2F7; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; margin: 6px 0 26px; box-shadow: var(--shadow); }
.map-wrap svg { width: 100%; height: auto; display: block; }
.map-wrap .island { fill: #FFFFFF; stroke: #B9C9D6; stroke-width: 2; }
.map-wrap .rl { fill: none; stroke: var(--brand); stroke-width: 3.5; stroke-linecap: round; opacity: 0.75; transition: stroke-width 0.12s, opacity 0.12s; }
.map-wrap .rl.soon { stroke: #B9C2CD; stroke-dasharray: 7 6; }
.map-wrap a:hover .rl { stroke-width: 6; opacity: 1; }
.map-wrap .mc circle { fill: var(--ink); stroke: #fff; stroke-width: 2.5; transition: r 0.12s; }
.map-wrap .mc text { font-family: var(--font); font-size: 17px; font-weight: 800; fill: var(--ink); paint-order: stroke; stroke: #EAF2F7; stroke-width: 4; }
.map-wrap a:hover .mc circle { fill: var(--brand); }

/* Resumen estilo timeline en la tarjeta */
.lead2-summary { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; }
.sum-leg { padding: 6px 0; }
.sum-leg + .sum-leg { border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 12px; }
.sum-date { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin-bottom: 6px; }
.sum-line { display: flex; gap: 10px; align-items: baseline; }
.sum-time { font-weight: 800; font-size: 1rem; min-width: 52px; color: var(--ink); }
.sum-city { font-weight: 700; font-size: 0.92rem; color: var(--ink); }
.sum-mid { font-size: 0.78rem; color: var(--ink-soft); padding: 3px 0 3px 62px; position: relative; }
.sum-mid::before { content: ""; position: absolute; left: 24px; top: 0; bottom: 0; width: 2px; background: var(--brand); border-radius: 2px; }
.sum-pax { font-size: 0.82rem; font-weight: 700; color: var(--ink-soft); border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; }
.sum-price { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sum-price span { color: var(--ink-soft); font-size: 0.78rem; font-weight: 700; flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.sum-price strong { color: var(--ink); font-size: 1.25rem; font-weight: 900; flex: none; white-space: nowrap; line-height: 1.15; }
/* Precio a medida: la frase es larga, no cabe en una linea con la cifra al lado. */
.sum-price.sum-request { display: block; }
.sum-price.sum-request strong { display: block; font-size: 1.1rem; }
.sum-price.sum-request span { display: block; margin-top: 3px; font-weight: 600; }
.sum-discount { margin-top: 6px; color: var(--brand-dark); font-weight: 800; font-size: 0.78rem; }
.sum-bd { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; display: grid; gap: 7px; }
.sum-bd-row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 12px; }
.sum-bd-row span { font-size: 0.82rem; font-weight: 800; color: var(--ink); }
.sum-bd-row em { grid-column: 1; font-style: normal; font-size: 0.74rem; font-weight: 600; color: var(--ink-soft); }
.sum-bd-row b { grid-column: 2; grid-row: 1 / span 2; font-size: 0.95rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.sum-bd-off span, .sum-bd-off b { color: var(--brand-dark); }
/* El concierge incluido se lee como descuento: en rojo, a peticion de Joan. */
.sum-bd-cg span, .sum-bd-cg b { color: #B4232A; font-weight: 700; }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 5px; }
.sum-total span, .sum-total b { font-size: 0.76rem; font-weight: 700; color: var(--ink-soft); }
.sum-total b { font-variant-numeric: tabular-nums; }
.policy-mini { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.8rem; line-height: 1.45; }

/* Mapa real Leaflet */
.map-real { height: 560px; width: 100%; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin: 6px 0 26px; z-index: 1; }
@media (max-width: 700px) { .map-real { height: 420px; } }
.map-lbl { background: #fff; border: 1.5px solid #14202E; border-radius: 8px; font-family: var(--font); font-weight: 800; font-size: 12px; color: #14202E; padding: 2px 8px; box-shadow: none; }
.map-lbl::before { display: none; }
.leaflet-popup-content { font-family: var(--font); font-weight: 600; }
.leaflet-popup-content a { color: #00825D; }
.related-list small { color: var(--ink-soft); font-weight: 600; margin-left: 8px; }


/* Página de ciudad a todo el ancho + breadcrumb táctil en móvil */
.city-page h2 { margin-top: 30px; }
.city-page .quick-answer p { font-size: 1.05rem; }
.city-page .activity-list { max-width: 940px; }

/* Aire alrededor del boton Solicitar */
.lead2-side .book-fields { margin-bottom: 18px; }
.lead2-side .btn { margin-top: 2px; }

/* Indice de ciudades: titulo compacto + grid ancho */
.cities-index { padding-top: 10px; padding-bottom: 30px; }
.cities-h1 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 6px 0 18px; }
.cities-index .map-real { margin-bottom: 22px; }
.city-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.city-card { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 16px 18px; color: var(--ink); transition: border-color 0.12s, box-shadow 0.15s; }
.city-card:hover { text-decoration: none; border-color: var(--line-strong); box-shadow: var(--shadow); }
.city-card .bus-mini { width: 28px; flex: none; }
.city-card span { display: flex; flex-direction: column; line-height: 1.25; }
.city-card strong { font-weight: 800; font-size: 1.02rem; }
.city-card small { font-size: 0.8rem; color: var(--ink-soft); }
@media (max-width: 700px) { .city-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .city-card { padding: 13px 14px; } .city-card strong { font-size: 0.95rem; } }

/* Ciudades: chips de filtro, mapa al ancho del texto y linea de resultado */
.cities-h2 { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 8px; }
.city-filter { margin: 14px 0 6px; }
.city-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.city-chip { display: inline-flex; align-items: baseline; gap: 7px; background: #fff; border: 1px solid var(--line-strong); border-radius: 99px; padding: 5px 11px; font-family: var(--font); font-weight: 700; font-size: .8rem; color: var(--ink); cursor: pointer; }
.city-chip small { font-size: .75rem; font-weight: 700; color: var(--ink-soft); }
.city-chip:hover { border-color: var(--line-strong); }
.city-chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.city-chip.on small { color: rgba(255,255,255,.8); }
.cities-index .map-real { height: 460px; margin: 14px 0 12px; }
.city-result { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; color: var(--ink-soft); font-size: .88rem; margin: 0 0 8px; }
.city-more { font-weight: 700; color: var(--brand-dark); }
@media (max-width: 700px) { .cities-index .map-real { height: 340px; } .city-chip { padding: 5px 10px; font-size: .78rem; } }

/* ==========================================================================
   Bloque v5: sticky-book, trust-strip, reply-badge, compare-table, about-hero
   Regla dura del proyecto: todo layout de escritorio va dentro de
   @media (min-width: 901px) y todo layout movil dentro de @media (max-width: 700px).
   Nada de grid/columnas sin scope a partir de aqui.
   ========================================================================== */

/* ---- 1. Sticky book (barra fija inferior, SOLO movil) ---- */
.sticky-book { display: none; }
.sticky-book .sb-price { font-weight: 800; font-size: 1.15rem; color: var(--ink); line-height: 1.1; }
.sticky-book .sb-price small { display: block; font-weight: 500; font-size: .75rem; color: var(--ink-soft); }
@media (max-width: 760px) {
  .sticky-book {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 16px rgba(20, 32, 46, 0.08);
    padding: 10px 16px;
    align-items: center;
    gap: 10px;
    z-index: 60;
  }
  .sticky-book .btn { margin-left: auto; padding: 11px 18px; font-size: 0.92rem; }
  body.has-sticky-book { padding-bottom: 76px; }
}

/* ---- 2. Trust strip (3 citas de prueba social) ---- */
.trust-strip { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 22px 0; }
.trust-strip.empty { display: none; }
.trust-quote { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.trust-quote blockquote { font-size: 0.92rem; line-height: 1.5; color: var(--ink); quotes: none; }
.trust-quote blockquote::before,
.trust-quote blockquote::after { content: none; }
.trust-quote cite { display: block; margin-top: 10px; font-style: normal; font-weight: 700; font-size: 0.82rem; color: var(--ink-soft); }
@media (min-width: 901px) {
  .trust-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .trust-strip { grid-template-columns: 1fr; }
}

/* ---- 3. Reply badge (pildora de tiempo de respuesta) ---- */
.reply-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--brand-tint);
  color: var(--brand-dark);
  padding: 7px 14px;
  border-radius: 99px;
  font-size: 0.85rem;
  font-weight: 700;
}
.reply-badge .dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--brand);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0% { opacity: 1; }
  50% { opacity: 0.35; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .reply-badge .dot { animation: none; }
}

/* ---- 4a. Compare table (tabla en escritorio, tarjetas en movil) ---- */
.compare-table { width: 100%; border-collapse: collapse; background: #fff; }
.compare-table caption { text-align: left; font-size: 0.8rem; color: var(--ink-soft); padding-bottom: 8px; }
@media (min-width: 901px) {
  .compare-table { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
  .compare-table th {
    background: var(--surface);
    color: var(--ink);
    text-align: left;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
  }
  .compare-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 0.93rem; color: var(--ink-soft); }
  .compare-table tbody tr:last-child td { border-bottom: none; }
  .compare-table td:first-child { font-weight: 800; color: var(--ink); }
  .compare-table td::before { content: none; }
}
@media (max-width: 900px) {
  .compare-table,
  .compare-table thead,
  .compare-table tbody,
  .compare-table tr,
  .compare-table td { display: block; }
  .compare-table thead { display: none; }
  .compare-table tr {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    margin-bottom: 12px;
    padding: 4px 16px;
  }
  .compare-table tr:last-child { margin-bottom: 0; }
  .compare-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 11px 0;
    font-size: 0.92rem;
    color: var(--ink-soft);
    text-align: right;
  }
  .compare-table td + td { border-top: 1px solid var(--line); }
  .compare-table td::before {
    content: attr(data-label);
    font-weight: 800;
    color: var(--ink);
    text-align: left;
    flex: none;
    max-width: 45%;
  }
}

/* ---- 4b. Compare cards: una ficha por opcion, con ventajas e inconvenientes.
   En escritorio la tabla de arriba ya da precio/tiempo/ideal, asi que la ficha
   se queda con los pros y contras. En movil se oculta la tabla y la ficha
   muestra tambien las especificaciones: un solo bloque por opcion. ---- */
.compare-table-wrap { margin-top: 4px; }
@media (max-width: 900px) { .compare-table-wrap { display: none; } }

.cc-grid-title { margin-bottom: 18px; }
.compare-card-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 701px) { .compare-card-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (min-width: 1080px) {
  .compare-card-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; position: relative; left: 50%; transform: translateX(-50%); width: min(1220px, calc(100vw - 40px)); }
  .compare-card { padding: 20px 18px; }
  .compare-card h3 { font-size: 1.02rem; }
  .compare-card li { font-size: 0.9rem; }
}

.compare-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 22px 20px;
}
.compare-card.featured { border: 2px solid var(--brand); box-shadow: var(--shadow); }
.compare-card.featured::before {
  content: attr(data-badge);
  position: absolute;
  top: -11px;
  left: 18px;
  background: var(--brand);
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 99px;
  white-space: nowrap;
}
.compare-card h3 { font-size: 1.08rem; letter-spacing: -0.01em; }

/* Especificaciones: solo movil, la tabla cubre el escritorio */
.cc-specs { margin-top: 14px; }
.cc-specs > div {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
}
.cc-specs dt {
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  padding-top: 3px;
}
.cc-specs dd { margin: 0; color: var(--ink); line-height: 1.5; }
@media (min-width: 901px) { .cc-specs { display: none; } }

.cc-block { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.cc-h { display: block; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.cc-h.is-pros { color: var(--brand-dark); }
.cc-h.is-cons { color: var(--ink-soft); }
.compare-card ul.pros,
.compare-card ul.cons { list-style: none; margin: 10px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 0.92rem; line-height: 1.5; }
.compare-card ul.pros li,
.compare-card ul.cons li { position: relative; margin: 0; }
.compare-card ul.pros li::before,
.compare-card ul.cons li::before {
  position: absolute;
  left: -22px;
  top: 0;
  width: 16px;
  text-align: center;
  font-weight: 800;
}
.compare-card ul.pros li::before { content: "\2713"; color: var(--brand-dark); }
.compare-card ul.cons li::before { content: "\2013"; color: var(--ink-soft); }
.compare-card ul.cons li { color: var(--ink-soft); }

/* ---- 5. About hero (cabecera de sobre nosotros) ---- */
.about-hero { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; padding: 8px 0 6px; }
.about-hero .about-copy h1 { margin-bottom: 10px; }
.about-hero .about-copy p { color: var(--ink-soft); max-width: 640px; }
.about-photo { display: flex; align-items: center; justify-content: center; }
.about-photo .about-ph {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.4rem;
  overflow: hidden;
  flex: none;
}
.about-photo .about-ph img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.about-photo figcaption { font-size: 0.78rem; color: var(--ink-soft); text-align: center; margin-top: 8px; }

.about-facts { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 18px 0 0; padding: 0; }
.about-facts li { margin: 0; font-size: 0.88rem; color: var(--ink-soft); }
.about-facts li strong { display: block; font-size: 1.05rem; font-weight: 800; color: var(--ink); }

@media (min-width: 901px) {
  .about-hero { grid-template-columns: 1fr 220px; gap: 32px; }
  .about-photo { flex-direction: column; align-items: center; }
  .about-photo .about-ph { width: 180px; height: 180px; font-size: 1.8rem; }
  .about-facts { flex-direction: row; align-items: center; gap: 0; }
  .about-facts li { padding: 0 22px; border-left: 1px solid var(--line); }
  .about-facts li:first-child { padding-left: 0; border-left: none; }
}
@media (max-width: 700px) {
  .about-hero { grid-template-columns: 1fr; gap: 18px; }
  .about-hero .about-photo { order: -1; }
  .about-photo .about-ph { width: 120px; height: 120px; }
  .about-facts { flex-direction: column; gap: 10px; }
  .about-facts li { padding: 0; border-left: none; }
}

/* Checkbox de terminos en el formulario de lead */
.terms-check { display: flex; align-items: flex-start; gap: 10px; font-size: 0.85rem; color: var(--ink-soft); line-height: 1.45; margin: 8px 0 2px; cursor: pointer; }
.terms-check input[type="checkbox"] { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--brand); cursor: pointer; }
.terms-check a { color: var(--link); text-decoration: underline; }

/* Oferta unica en la pagina de ruta */
.offer { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; background: #fff; }
.offer-main { padding: 12px 24px 14px; border-top: 1.5px solid var(--line); }
.offer-main ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 0.88rem; color: var(--ink-soft); }
.offer-main li { padding-left: 22px; position: relative; }
.offer-main li::before { content: ""; position: absolute; left: 0; top: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--brand-tint) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2300825D" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center/10px no-repeat; }
.offer-buy { background: var(--surface-2); padding: 14px 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.offer-price { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.offer-price .from { font-size: 0.82rem; color: var(--ink-soft); }
.offer-price strong { font-size: 1.8rem; font-weight: 800; }
.offer-price .pp { font-size: 0.82rem; color: var(--ink-soft); }
.offer-buy .btn { margin-left: auto; padding: 12px 28px; }
.offer-cutoff { font-size: 0.8rem; color: var(--ink-soft); }
.offer-cutoff::before { content: "·"; margin-right: 7px; }
@media (max-width: 700px) {
  .offer-buy { padding: 14px 16px; }
  .offer-buy .btn { margin-left: 0; width: 100%; }
  .offer-price strong { font-size: 1.6rem; }
  .offer-cutoff { width: 100%; }
  .offer-cutoff::before { content: none; }
  .offer-main { padding: 10px 16px 12px; }
  .offer-main ul { flex-direction: column; gap: 6px; }
}

/* Prosa mas ancha: tipografia acompaña para que la linea siga siendo comoda */
.prose p, .prose li { font-size: 1rem; line-height: 1.6; }
@media (max-width: 700px) { .prose p, .prose li { font-size: 1rem; } }

/* En la pagina de reserva el boton de volver ya nombra la ruta:
   el chip verde repetiria el mismo texto justo debajo */
@media (max-width: 700px) {
  .lead2-main > .eyebrow { display: none; }
  .lead2-main > h1 { margin-top: 2px; }
}

/* Cierre responsive global: las paginas editoriales comparten el mismo marco movil */
@media (max-width: 520px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  .wrap,
  .wrap.prose,
  .breadcrumbs,
  .guide-shell .breadcrumbs,
  .guide-article,
  .resource-page,
  .operator-page {
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
  }
  .wrap.prose,
  .guide-article,
  .resource-page,
  .operator-page {
    padding-left: 20px;
    padding-right: 20px;
  }
  .prose h1,
  .prose h2,
  .prose h3,
  .prose p,
  .prose li,
  .quick-answer,
  .operator-context,
  .resource-card,
  .term-card {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: break-word;
  }
  .wrap.prose > *,
  .guide-article > *,
  .resource-page > *,
  .operator-page > * {
    width: 100%;
    max-width: calc(100vw - 40px);
  }
  .prose h1,
  .prose h2,
  .operator-page .hero h1 {
    font-size: 1.48rem;
    line-height: 1.16;
    overflow-wrap: anywhere;
  }
  .quick-answer,
  .operator-context,
  .activity-list li,
  .related-list li {
    width: 100%;
  }
}

/* CTA sutil al pie de cada pagina */
.cta-soft { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 36px 0 8px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.cta-soft p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
@media (max-width: 560px) { .cta-soft .btn { width: 100%; text-align: center; } }
/* Blog en lista */
.post-list { list-style: none; padding: 0; margin: 8px 0 0; }
.post-list li { padding: 24px 0; border-bottom: 1px solid var(--line); }
.post-list .post-meta { font-size: .78rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; }
.post-list h2 { margin: 6px 0 8px; font-size: 1.32rem; line-height: 1.25; }
.post-list h2 a { color: var(--ink); }
.post-list p { margin: 0 0 10px; color: var(--ink-soft); }
.post-more { font-weight: 700; }

/* Ritmo vertical: la tarjeta de reserva pega al H1, no flota */
/* La tarjeta va pegada al H1: sin el padding de seccion generico (36px) que dejaba un hueco vacio. */
#reservar { margin-top: 0; padding: 6px 0 18px; }
#reservar + section { padding-top: 14px; }
#reservar h2 { font-size: 1.28rem; margin: 0 0 4px; }
#reservar .section-sub { margin-bottom: 12px; }
.pay-note { font-size: .85rem; }

/* Rutas: lista por defecto, cuadricula opcional */
.view-toggle { display: flex; gap: 6px; margin: 0 0 14px; }
.view-toggle button { background: #fff; border: 1px solid var(--line-strong); border-radius: 99px; padding: 6px 14px; font-family: var(--font); font-weight: 700; font-size: .84rem; color: var(--ink-soft); cursor: pointer; }
.view-toggle button.on { border-color: var(--ink); color: var(--ink); }
.route-grid.list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
/* Cada fila es su propia rejilla, asi que las columnas van en medidas FIJAS (px y
   fr sobre el mismo ancho): con flex, una fila con una sola hora encogia la
   columna de horarios y corria la duracion y el precio a la derecha. */
.route-grid.list .route-card { display: grid; grid-template-columns: minmax(0, 1.4fr) 148px minmax(200px, 1fr) 120px 112px; align-items: center; column-gap: 18px; row-gap: 6px; padding: 12px 6px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.route-grid.list .route-card:hover { transform: none; box-shadow: none; background: var(--surface-2); }
.route-grid.list .rc-cities { font-size: 1rem; min-width: 0; }
.route-grid.list .rc-meta { display: block; white-space: nowrap; }
.route-grid.list .rc-chips { min-width: 0; }
.route-grid.list .rc-times { flex-wrap: nowrap; }
.rc-times a.rc-more { text-decoration: none; }
.rc-times a.rc-more:hover { background: var(--brand); color: #fff; }
.route-grid.list .rc-price { margin: 0; padding: 0; border: 0; justify-content: flex-end; }
.route-grid.list .rc-price .amount { font-size: 1.1rem; }
/* Movil (30-sep-2026): siempre lista, sin cuadricula, y cada ruta en UNA fila
   compacta: ciudades y duracion a la izquierda, precio y "Reservar" a la derecha. */
@media (max-width: 700px) {
  .view-toggle { display: none; }
  .route-grid.list .route-card { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cities price" "meta book"; column-gap: 12px; row-gap: 4px; padding: 12px 4px; }
  .route-grid.list .rc-cities { grid-area: cities; grid-column: auto; font-size: .98rem; }
  .route-grid.list .rc-meta { grid-area: meta; }
  .route-grid.list .rc-chips { display: none; }
  .route-grid.list .rc-price { grid-area: price; align-items: flex-end; }
  .route-grid.list .rc-price .amount { font-size: 1rem; }
  .route-grid.list .rc-book { grid-area: book; grid-column: auto; justify-self: end; min-height: 34px; padding: 0 14px; font-size: .82rem; }
}

/* Post de blog: cabecera compacta, cuerpo legible */
.guide-article .guide-hero h1 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.guide-article h2 { font-size: 1.25rem; margin: 26px 0 8px; }
.guide-article p { line-height: 1.62; }
.guide-article strong { font-weight: 700; color: var(--ink); }
.guide-article p a { text-decoration: underline; text-underline-offset: 3px; }
.related-list li a { font-weight: 600; }

/* Rutas: filtros, 10 visibles, boton por fila, mini CTA en horarios */
.routes-bar { display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; margin-bottom: 14px; }
.routes-bar .view-toggle { margin: 0; flex: 0 0 auto; }
.route-filters { display: flex; gap: 8px; flex-wrap: nowrap; margin-left: auto; align-items: center; }
.route-filters label { display: flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.route-filters select { min-width: 0; width: 150px; padding: 7px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-family: var(--font); font-size: .9rem; background: #fff; }
.route-card.more { display: none; }
.route-grid.all .route-card.more { display: flex; }
.route-grid.list.all .route-card.more { display: grid; }
.route-card[hidden] { display: none !important; }
.routes-empty { color: var(--ink-soft); padding: 18px 0; }
.routes-more { margin-top: 14px; width: 100%; }
/* Paginador de la lista de rutas: numeros a la izquierda, "11-20 de 103" a la
   derecha. El rango va en el mismo sitio siempre para que no salte al cambiar. */
.pager { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 18px 0 4px; }
.pager button { min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; font-family: var(--font); font-size: 0.9rem; font-weight: 700; color: var(--ink); cursor: pointer; }
.pager button:hover:not(:disabled) { border-color: var(--line-strong); }
.pager button.on { background: var(--ink); border-color: var(--ink); color: #fff; cursor: default; }
.pager button:disabled { color: #C3C9D0; cursor: default; }
.pager .pg-arrow { font-size: 1.15rem; line-height: 1; }
.pager .pg-gap { color: var(--ink-soft); padding: 0 2px; }
.pager .pg-count { margin-left: auto; font-size: 0.82rem; font-weight: 700; color: var(--ink-soft); }
@media (max-width: 560px) {
  .pager { gap: 5px; }
  .pager button { min-width: 34px; height: 34px; padding: 0 7px; font-size: 0.85rem; }
  /* En movil el rango se va a su propia linea: en la misma no cabe con once numeros. */
  .pager .pg-count { flex-basis: 100%; margin: 4px 0 0; text-align: center; }
}
.route-grid.list .rc-times span:nth-child(n+4):not(.rc-more) { display: none; }

/* Cabecera de la lista: dice que es cada columna */
.route-head { display: none; }
.route-grid.list .route-head { display: grid; grid-template-columns: minmax(0, 1.4fr) 148px minmax(200px, 1fr) 120px 112px; align-items: end; column-gap: 18px; padding: 0 6px 7px; border-bottom: 1px solid var(--line); font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.route-grid.list .route-head .rh-price { text-align: right; }
@media (max-width: 700px) { .route-grid.list .route-head { display: none; } }
.route-grid.list .rc-price { flex-direction: column; align-items: flex-end; gap: 0; }
.route-grid.list .rc-price .label { font-size: .74rem; }
.rc-book { min-height: 38px; padding: 0 14px; font-size: .85rem; flex: 0 0 auto; text-align: center; }
.route-grid:not(.list) .rc-book { margin-top: 6px; text-align: center; }
.route-grid:not(.list) .rc-cities { text-decoration: none; }
.btn-mini { display: inline-block; background: var(--brand); color: #fff; font-weight: 700; font-size: .78rem; padding: 4px 10px; border-radius: 99px; line-height: 1.3; }
.btn-mini:hover { text-decoration: none; filter: brightness(.95); }
.schedule .td-cta { text-align: right; width: 1%; white-space: nowrap; }
@media (max-width: 700px) {
  .routes-bar { flex-wrap: wrap; }
  .route-filters { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .route-filters label { flex: 1 1 30%; flex-direction: column; align-items: stretch; }
  .route-filters select { min-width: 0; width: 100%; }
  .rc-book { grid-column: 1 / -1; text-align: center; }
  .schedule .td-cta { display: none; }
}

/* Minibuses del mapa */
.gg-bus { cursor: pointer; }
.gg-bus svg { width: 30px; height: 17px; display: block; filter: drop-shadow(0 1px 2px rgba(20,32,46,.45)); }
.gg-bus svg rect:first-child { fill: var(--brand-dark); }
.gg-bus svg .w { fill: #EAF7F1; }
.gg-bus svg .t { fill: #14202E; }
.gg-bus:hover svg { filter: drop-shadow(0 2px 5px rgba(20,32,46,.6)); }
.gg-bus-tip { font-weight: 700; font-size: .78rem; }
@media (prefers-reduced-motion: reduce) { .gg-bus { display: none; } }

/* Reserva en dos pasos: primero el viaje, luego los datos */
.steps-bar { list-style: none; display: flex; gap: 10px; margin: 0 0 14px; padding: 0; }
.steps-bar li { display: flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 700; color: var(--ink-soft); }
.steps-bar li + li::before { content: ""; width: 18px; height: 1.5px; background: var(--line-strong); margin-right: 3px; }
.steps-bar li span { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; border: 1px solid var(--line); font-size: .72rem; }
.steps-bar li.on { color: var(--ink); }
.steps-bar li.on span { background: var(--brand); border-color: var(--brand); color: #fff; }
/* Barra de accion del paso 1. En escritorio es un boton normal debajo del
   resumen; en movil se pega al borde inferior para que "Continuar" este SIEMPRE
   a la vista, sin bajar a buscarlo, y lleva el precio al lado. */
.cta-bar { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.cta-bar .btn { flex: 1; }
.cta-price, .cta-route { display: none; }
@media (max-width: 820px) {
  .cta-bar { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; z-index: 50;
    background: #fff; border-top: 1px solid var(--line);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 16px rgba(20,32,46,.10); }
  /* El boton no ocupa todo el ancho: precio a la izquierda, boton compacto a la derecha (Joan, 30-sep-2026) */
  .cta-bar { justify-content: space-between; }
  .lead2-side .cta-bar .btn, .cta-bar .btn { flex: 0 0 auto; width: auto; padding: 14px 26px; margin-left: auto; }
  .cta-price { display: flex; flex-direction: column; line-height: 1.15; flex: 0 0 auto; }
  .cta-price span { font-size: .75rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; }
  .cta-price strong { font-size: 1.05rem; font-weight: 800; white-space: nowrap; }
  .cta-route { display: block; flex: 1 1 auto; min-width: 0; line-height: 1.2; }
  .cta-route span { display: block; font-size: .75rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; }
  .cta-route strong { display: block; font-size: .84rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cta-bar .sc-cta { flex: 0 0 auto; width: auto; padding: 14px 20px; font-size: .98rem; }
  /* Hueco para que la barra no tape el final de la pagina */
  body:has(.cta-bar) { padding-bottom: 86px; }
}
.dur-note { font-size: .78rem; color: var(--ink-soft); margin: 10px 0 0; }
[data-bf-back] { margin-bottom: 8px; }

/* Pagina de datos: resumen a la izquierda, formulario a la derecha.
   En movil manda el formulario: baja a una columna, el resumen se reduce a dos
   lineas encima y todo lo demas (cambiar el viaje, que incluye) se va DEBAJO. */
.lead2-step2 h1 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); margin: 4px 0 10px; }
.step2-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: start; margin-top: 6px; }
.step2-aside [data-bf-back] { margin: 12px 0 0; }
.step2-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.step2-card .btn { width: 100%; margin-top: 14px; }
.step2-extra .assist-strip { margin-top: 14px; }
@media (max-width: 820px) {
  .step2-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 0; }
  /* El aside deja de ser columna y sus dos mitades pasan a ser filas propias,
     asi el formulario puede ponerse el PRIMERO, sin resumen por delante. */
  .step2-aside { display: contents; }
  .step2-card { order: 1; padding: 14px 13px; }
  .lead2-step2 .lead2-summary { order: 2; }
  .step2-extra { order: 3; }
  .step2-aside [data-bf-back] { margin: 10px 0 0; }

  /* Cabecera al minimo: cada pixel de aqui arriba es un campo menos a la vista.
     La ruta se queda (es el contexto), el resto adelgaza. */
  .lead2-step2 .breadcrumbs, .breadcrumbs:has(+ .lead2-step2) { padding-top: 8px; }
  .lead2-step2 { padding-top: 8px; }
  .lead2-step2 .eyebrow { font-size: .75rem; margin: 0 0 1px; }
  .lead2-step2 .eyebrow .bus-mini { display: none; }
  .lead2-step2 h1 { font-size: 1.12rem; line-height: 1.25; margin: 0 0 7px; }
  .lead2-step2 .steps-bar { margin: 0 0 10px; font-size: .72rem; gap: 7px; }
  .lead2-step2 .steps-bar li span { width: 18px; height: 18px; font-size: .75rem; }
  .lead2-step2 .steps-bar li + li::before { width: 12px; }

  /* Formulario mas apretado: mismos campos, menos aire entre ellos. Los inputs
     mantienen 16px de fuente (por debajo, iOS hace zoom al enfocar) y una altura
     comoda para el pulgar. */
  .lead2-step2 .lead-hint { font-size: .8rem; margin: 0 0 10px; }
  .lead2-step2 .book-fields { gap: 8px; }
  .lead2-step2 .book-fields input:not([type="checkbox"]):not([type="radio"]), .lead2-step2 .book-fields select { padding: 11px 13px; min-height: 46px; font-size: 16px; }
  .lead2-step2 .terms-check { font-size: .8rem; margin: 6px 0 0; }
  .lead2-step2 .step2-card .btn { margin-top: 10px; padding: 14px 16px; }
  .lead2-step2 .step2-card > p { margin-top: 8px !important; }
  .lead2-step2 .policy-mini { margin-top: 8px; padding-top: 8px; font-size: .76rem; }
}

/* Explicacion de como contactamos: debajo del boton, no delante de los campos */
.contact-hint { margin: 10px 0 0; }
@media (max-width: 820px) { .lead2-step2 .contact-hint { margin: 8px 0 0; font-size: .8rem; } }

/* ---- Revision de usabilidad movil (3-sep-2026) ----
   Tres fallos que se repetian en TODAS las paginas y que se miden, no se opinan:
   1) Campos por debajo de 16px: iOS hace zoom al enfocarlos y saca al usuario de
      la pagina. Afectaba al selector de idioma y a los filtros de rutas.
   2) Enlaces de 19 a 24 px de alto: por debajo de 40 px el dedo falla. Se les da
      area tactil sin cambiar como se ven.
   3) El logo y el selector de idioma, tambien por debajo de 40 px de alto. */
@media (max-width: 820px) {
  /* El !important es deliberado: es un suelo de accesibilidad, no un estilo. Sin
     el, cualquier regla con clase (.lang-select, .route-filters select) lo pisa y
     vuelve el zoom de iOS. Y 44 px de alto es el minimo para el dedo. */
  select, input, textarea { font-size: 16px !important; min-height: 44px; }
  .lang-select { min-height: 40px; padding: 6px 26px 6px 10px; }
  .logo { min-height: 44px; display: inline-flex; align-items: center; }
  .hero-routes li a, .map-link, .activity-list a, .related-list li a,
  .foot-col a, .foot-links a { display: inline-flex; align-items: center; min-height: 40px; }
  .hero-routes li { padding: 2px 0; }
  .breadcrumbs a { display: inline-flex; align-items: center; min-height: 40px; }
  /* Controles secundarios que igual se pulsan: intercambiar origen y destino,
     añadir vuelta, y el par lista/cuadricula. */
  .sc-swap { width: 42px; height: 42px; }
  .sc-link, .return-link { min-height: 40px; display: inline-flex; align-items: center; }
  .view-toggle button { min-height: 40px; }
  /* Las chips de ciudad de /ciudades son el filtro principal de esa pagina. */
  .city-chip { min-height: 34px; }
  .trip-time, .rc-book { min-height: 40px; }
  /* El boton que abre el calendario: es el control principal del paso 1. */
  .dp-btn { min-height: 44px; display: flex; align-items: center; }
}

/* Pantalla de gracias: codigo grande, una linea y dos acciones */
.ok-code { font-size: 1.5rem; font-weight: 900; letter-spacing: .02em; margin: 2px 0 8px; }
.ok-body { font-size: 1rem; margin: 0 0 14px; }
.ok-actions { display: flex; gap: 10px; margin: 14px 0 12px; flex-wrap: wrap; }
.ok-actions .btn { flex: 1 1 180px; text-align: center; }
.btn-wa { background: #25D366; border-color: #25D366; color: #fff; }
.btn-wa:hover { filter: brightness(.95); }
.ok-note { font-size: .82rem; color: var(--ink-soft); margin: 0 0 10px; }
.ok-more a { font-weight: 700; color: var(--brand-dark); }
@media (max-width: 700px) { .ok-actions { flex-direction: column; } .ok-actions .btn { flex: 1 1 auto; } }

/* Mapa de una sola ruta en su propia pagina. El de la home ensena las 103 y sirve
   para explorar; aqui solo interesa por donde va ESTA. */
.route-map-wrap { margin: 34px 0; }
.route-map-wrap .route-map-sub { color: var(--ink-soft); font-size: .94rem; margin: 0 0 14px; }
.map-one { height: 380px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.leaflet-tooltip.rm-tip { background: var(--ink); color: #fff; border: 0; box-shadow: none;
  font-weight: 700; font-size: .78rem; padding: 3px 8px; }
.leaflet-tooltip.rm-tip::before { display: none; }
@media (max-width: 700px) { .map-one { height: 300px; } }
/* Pueblos de paso: rotulo mas discreto que el de una parada, para que se lea la
   jerarquia de un golpe (salida y llegada mandan, el resto orienta). */
.leaflet-tooltip.rm-way { background: rgba(255,255,255,.94); color: var(--ink); border: 0;
  box-shadow: 0 1px 4px rgba(20,32,46,.18); font-weight: 600; font-size: .75rem; padding: 2px 6px; }
.leaflet-tooltip.rm-way::before { display: none; }
.leaflet-tooltip.rm-way-city { font-weight: 800; font-size: .74rem; color: var(--brand-ink, #0b5); }

.public-page .footer-fine { color: var(--ink-soft); }
.public-page :is(a, button, select, input, textarea, summary):focus-visible {
  outline: 2px solid var(--link); outline-offset: 3px;
}
.public-page :is(button, input, select, textarea, summary) { scroll-margin: 85px 0 110px; }
.public-page:has(.hero-lp) .site-header .wrap, .public-page:has(.hero-lp) .site-footer .wrap { max-width: 1200px; }
.sc-value { font-size: .88rem; line-height: 1.5; color: var(--ink-soft); margin: 0 0 4px; }
.sc-value a { display: inline-block; text-decoration: underline; text-underline-offset: 3px; }
.confirmation-example { padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); scroll-margin-top: 80px; }
.confirmation-example summary { font-weight: 600; cursor: pointer; }
.confirmation-example p { max-width: 680px; font-size: .9rem; margin: 12px 0; color: var(--ink-soft); }
.demo-trip { display: flex; gap: 12px; align-items: center; margin-top: 16px; }
.demo-trip .bus-mini { width: 40px; height: 24px; flex: none; }
.confirmation-example dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 680px; margin: 16px 0; }
.confirmation-example dt { color: var(--ink-soft); font-size: .8rem; }
.confirmation-example dd { font-weight: 600; }
.offer-route { display: block; margin: 16px 0; max-width: 100%; }
.offer-route span { display: block; font-size: .85rem; margin-bottom: 6px; }
.offer-route select { width: 100%; max-width: 540px; min-width: 0; padding: 12px; font: inherit; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.public-page .book-fields { max-width: none; }
.public-page .terms-check input[type="checkbox"] { min-height: 20px; width: 20px; height: 20px; padding: 0; }
.book-fields > label:not(.terms-check), .phone-row > label { font-size: .85rem; font-weight: 500; color: var(--ink); margin-bottom: -4px; }
.book-fields > input + label, .book-fields > .phone-row, .book-fields > .phone-row + label { margin-top: 4px; }
.special-needs { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 6px; }
.special-needs summary { cursor: pointer; font-size: .85rem; font-weight: 500; min-height: 40px; }
.special-needs label { display: block; font-size: .85rem; margin: 8px 0 6px; }
.special-needs textarea { width: 100%; min-height: 90px; resize: vertical; padding: 12px; font: inherit; border: 1px solid var(--line); border-radius: 8px; }
.special-needs p, .request-note { font-size: .8rem; line-height: 1.5; color: var(--ink-soft); margin-top: 8px; }
.contact-trip { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 12px; font-size: .84rem; line-height: 1.5; overflow-wrap: anywhere; }
.contact-trip p { margin: 0 0 4px; }
.contact-trip p:first-child { font-weight: 600; color: var(--ink); }
.contact-trip p:last-child { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.public-page [data-bf-edit] { border: 0; padding: 4px 0; min-height: 40px; background: transparent; border-radius: 0; color: var(--link); }
.date-warning { color: var(--warn-ink); font-size: .85rem; margin-top: 8px; }
.public-page .dp-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) 76px 40px; gap: 4px; }
.public-page .dp-head select { font: inherit; font-size: .85rem; font-weight: 500; padding: 4px; min-width: 0; width: 100%; height: 44px; border: 1px solid var(--line); background: #fff; border-radius: 4px; }
.public-page .dp-head .dp-nav { width: 40px; height: 44px; }
.dp-close { display: block; font: inherit; font-size: .85rem; width: 100%; min-height: 44px; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--link); margin-top: 8px; cursor: pointer; }

.public-page.checkout-page .site-footer { margin-top: 24px; }
.public-page.checkout-page .site-footer .wrap { padding-top: 16px; padding-bottom: 20px; }
.public-page.checkout-page .footer-fine { margin-top: 12px; }
@media (max-width: 820px) {
  .public-page .lead2 { padding-left: 20px; padding-right: 20px; }
  .public-page .lead2-side { margin-left: 0; margin-right: 0; padding: 16px; }
  .public-page .step2-card { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .public-page *, .public-page *::before, .public-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Pack de dia: la tarjeta de precio + CTA, arriba y abajo de la pagina. */
.pack-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #fff; border: 1.5px solid var(--brand); border-radius: var(--radius); padding: 18px 20px; margin: 18px 0 26px; flex-wrap: wrap; }
.pack-price { display: block; font-size: 1.9rem; font-weight: 900; letter-spacing: -.03em; color: var(--ink); line-height: 1.05; }
.pack-per { display: block; font-size: .8rem; color: var(--ink-soft); font-weight: 600; }
.pack-table th { width: 32%; }
@media (max-width: 620px) { .pack-cta .btn { width: 100%; } }


/* Descuento de grupo en el formulario: discreto hasta que aplica de verdad. */
.pax-note { font-size: 0.82rem; color: var(--ink-soft); margin: 6px 0 0; }
.pax-note.is-on { color: var(--brand-dark); font-weight: 700; }


/* Traslado privado en la pagina de ruta: presente pero sin tapar al bus, que
   es el producto que trae a la gente. */
.transfer-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin: 22px 0; background: var(--surface-2); }
.transfer-box h2 { margin: 0 0 8px; font-size: 1.18rem; }
.transfer-box p { margin: 0 0 10px; max-width: 66ch; }
.transfer-note { font-size: 0.84rem; color: var(--ink-soft); }

.cg-price { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--brand-tint); border: 1px solid var(--brand); border-radius: var(--radius); padding: 20px 24px; margin: 20px 0 8px; }
.cg-price strong { font-size: 2.1rem; line-height: 1; color: var(--ink); }
.cg-price span { color: var(--ink-soft); font-size: 0.92rem; flex: 1; min-width: 180px; }
.cg-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
@media (min-width: 760px) { .cg-grid { grid-template-columns: repeat(2, 1fr); } }
.cg-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.cg-card h3 { margin-bottom: 6px; }
.cg-card p { color: var(--ink-soft); font-size: 0.94rem; }
.cg-steps { margin: 14px 0 0; padding-left: 22px; }
.cg-steps li { margin-bottom: 14px; }
.cg-steps p { color: var(--ink-soft); font-size: 0.94rem; margin-top: 2px; }
.cg-guarantee { background: var(--brand-tint); border-radius: var(--radius); padding: 22px 24px; }
.cg-guarantee p { max-width: 66ch; }
.cg-form { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin: 26px 0; }
.cg-form form { display: flex; flex-direction: column; gap: 12px; max-width: 460px; margin-top: 12px; }
.cg-form label { display: flex; flex-direction: column; gap: 5px; font-size: 0.86rem; font-weight: 700; color: var(--ink); }
.cg-form input, .cg-form textarea { font-family: var(--font); font-size: 1rem; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; color: var(--ink); }
.cg-form input:focus, .cg-form textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.cg-form .hp { position: absolute; left: -9999px; }
.cg-note { font-size: 0.82rem; color: var(--ink-soft); }
.cg-msg { font-weight: 700; padding: 11px 14px; border-radius: var(--radius-sm); background: var(--brand-tint); color: var(--brand-dark); }
.cg-msg.is-error { background: var(--warn-bg); color: var(--warn-ink); }

.btn-pay { font-size: 1.05rem; padding: 15px 28px; }
.cg-fine { font-size: 0.8rem; color: var(--ink-soft); margin-top: 10px; max-width: 52ch; }

/* Carrito: pago pendiente recordado en cualquier pagina (16-sep-2026) */
.cart-bar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; background: #fff; color: var(--ink); border: 1.5px solid var(--ink); border-radius: var(--radius); box-shadow: 0 18px 48px rgba(20, 32, 46, .22); font-size: .92rem; }
.cart-bar .cart-head { display: flex; align-items: center; gap: 8px; }
.cart-bar .cart-head strong { font-size: 1rem; }
.cart-bar .cart-head em { font-style: normal; color: var(--ink-soft); font-size: .8rem; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-bar .cart-ico { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 999px; background: var(--brand-tint, #E6F7F1); color: var(--brand-dark); flex: none; }
.cart-bar .cart-item { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px 0; display: flex; flex-direction: column; gap: 2px; }
.cart-bar .cart-item b { font-size: .98rem; }
.cart-bar .cart-item span { color: var(--ink-soft); font-size: .84rem; }
.cart-bar .cart-ref { font-family: ui-monospace, Menlo, monospace; font-size: .72rem !important; }
.cart-bar .cart-total { display: flex; justify-content: space-between; align-items: baseline; }
.cart-bar .cart-total b { font-size: 1.15rem; }

/* En movil la barra fija de "Reservar" ocupa el pie: el pago pendiente va encima, no debajo. */
@media (max-width: 820px) { body.has-cart .cart-bar { bottom: auto; top: 64px; z-index: 55; box-shadow: 0 8px 24px rgba(20,32,46,.25); } }
.cart-bar[hidden] { display: none; }
@media (min-width: 721px) { body:has([data-nav-cart]) .cart-bar { bottom: auto; top: 70px; right: 20px; } }
.cart-bar .cart-pay { display: block; text-align: center; background: var(--brand); color: #fff; font-weight: 800; padding: 13px 16px; border-radius: 99px; text-decoration: none; white-space: nowrap; font-size: 1rem; }
.cart-bar .cart-pay:hover { background: var(--brand-dark); color: #fff; text-decoration: none; }
.cart-bar .cart-wa { color: var(--ink-soft); font-weight: 600; text-decoration: underline; text-align: center; font-size: .85rem; }
.cart-bar .cart-x { background: none; border: 0; color: var(--ink-soft); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 2px 6px; margin-left: auto; }
@media (min-width: 720px) { .cart-bar { left: auto; right: 20px; bottom: 20px; width: 360px; } }


/* Header movil: el desplegable Explorar es la hamburguesa y lleva las tres
   entradas que en escritorio van sueltas. Pago pendiente: punto rojo + fila. */
.nav-dd summary { position: relative; }
.nav-dd .burger { display: none; width: 18px; flex-direction: column; gap: 3.5px; }
.nav-dd .burger i { display: block; height: 2px; background: currentColor; border-radius: 2px; }
.nav-dd-primary { display: none; }
.nav-dd summary.has-pending::before { content: ""; position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: #B4232A; border: 2px solid #fff; }
.nav-dd-menu a.nav-dd-pending { background: #FBECEC; border: 1px solid #F1C3C6; margin-bottom: 6px; }
.nav-dd-menu a.nav-dd-pending strong { color: #B4232A; }
@media (max-width: 760px) {
  .nav-dd summary { padding: 9px 11px; }
  .nav-dd summary .nav-dd-label, .nav-dd summary::after { display: none; }
  .nav-dd .burger { display: flex; }
  .nav-dd-primary { display: block; border-bottom: 1px solid var(--line); margin-bottom: 6px; padding-bottom: 6px; }
  .nav-dd-primary a { font-weight: 700; font-size: .95rem; }
}

/* /concierge/ compacta (16-sep-2026): primera pantalla = H1, precio, boton */
.cg-page .hero { padding: 26px 0 6px; }
.cg-page .cg-price { margin: 12px 0 12px; }
.cg-price .btn { white-space: nowrap; margin-left: auto; }
.cg-facts { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; margin: 0 0 14px; padding: 0; }
.cg-facts li { position: relative; padding-left: 22px; font-size: .93rem; color: var(--ink); line-height: 1.4; }
.cg-facts li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--brand-dark); font-weight: 800; }
.cg-guarantee .btn { display: inline-block; margin-top: 16px; }
@media (max-width: 520px) {
  .cg-page .hero { padding: 14px 0 2px; }
  .cg-page h1 { font-size: 1.5rem; line-height: 1.2; }
  .cg-page section { padding: 16px 0; }
  .cg-page h2 { font-size: 1.22rem; margin-bottom: 6px; }
  .cg-page .faq h2 { font-size: 1.22rem; }
  .cg-page .quick-answer { padding: 12px 14px; font-size: .93rem; }
  .cg-page .quick-answer p { line-height: 1.45; }
  .cg-price { padding: 12px 14px; gap: 8px 12px; }
  .cg-price strong { font-size: 1.6rem; }
  .cg-price .btn { flex-basis: 100%; text-align: center; padding: 12px 14px; }
  .cg-facts { grid-template-columns: 1fr; gap: 5px; }
  .cg-facts li { font-size: .88rem; }
  .cg-price span { flex: 1; min-width: 0; font-size: .82rem; line-height: 1.35; }
  .cg-grid { gap: 8px; margin-top: 10px; }
  .cg-card { padding: 11px 13px; }
  .cg-card h3 { font-size: .98rem; margin-bottom: 2px; }
  .cg-card p { font-size: .88rem; line-height: 1.4; }
  .cg-steps { margin-top: 8px; padding-left: 20px; }
  .cg-steps li { margin-bottom: 8px; }
  .cg-steps p { font-size: .88rem; }
  .cg-guarantee { padding: 16px; }
  .cg-guarantee p { font-size: .93rem; }
  .cg-guarantee .btn { width: 100%; }
}

/* /concierge/: como funciona justo bajo el precio, con el recordatorio del billete */
.cg-how { border-top: 0; padding-top: 8px; }
.cg-remember { margin: 14px 0 0; padding: 10px 14px; background: var(--brand-tint); border-radius: var(--radius-sm); font-size: .92rem; font-weight: 650; color: var(--ink); }
@media (max-width: 520px) { .cg-remember { font-size: .88rem; } }

/* Burbuja admin: atajo al panel en el navegador de Joan */
.admin-bubble { position: fixed; left: 12px; bottom: 12px; z-index: 59; background: var(--ink); color: #fff; font-size: .76rem; font-weight: 700; letter-spacing: .02em; padding: 6px 11px; border-radius: 99px; opacity: .85; text-decoration: none; }
.admin-bubble:hover { opacity: 1; color: #fff; text-decoration: none; }
body:has(.cart-bar) .admin-bubble { bottom: 78px; }

/* Movil: idioma dentro del menu y el menu al final de la barra (17-sep-2026) */
.nav-dd-lang { display: none; }
.nav-dd-close { display: none; }
@media (max-width: 760px) {
  .main-nav > .lang-select { display: none; }
  .main-nav .nav-dd { order: 10; }
  .nav-dd-lang { display: flex; gap: 8px; padding: 10px 12px 4px; border-top: 1px solid var(--line); margin-top: 6px; }
  .nav-dd-lang a { flex: 1; text-align: center; padding: 9px 0; border: 1px solid var(--line); border-radius: 99px; font-weight: 700; font-size: .85rem; color: var(--ink); }
  .nav-dd-lang a.on { background: var(--ink); color: #fff; border-color: var(--ink); }
}

/* Grupo de 5 o mas: casilla para pedir ademas precio de vehiculo privado */
/* Discreta a proposito (Joan, 17-sep-2026): una linea, sin caja de color. */
.charter-check { display: flex; gap: 9px; align-items: flex-start; margin: 2px 0 12px; font-size: 0.84rem; line-height: 1.4; color: var(--ink-soft); cursor: pointer; }
.charter-check input { margin-top: 1px; flex: none; width: 16px; height: 16px; accent-color: var(--brand-dark); }
.charter-check strong { color: var(--ink); font-weight: 650; }

/* Transporte privado: selector de trayecto y lista de casos */
.private-pick { display: block; margin: 14px 0 12px; }
.private-pick span { display: block; font-size: 0.86rem; font-weight: 700; margin-bottom: 5px; }
.private-pick select { width: 100%; max-width: 460px; font-family: var(--font); font-size: 1rem; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; color: var(--ink); }
.cg-who { list-style: none; margin: 10px 0 0; padding: 0; max-width: 66ch; }
.cg-who li { position: relative; padding-left: 22px; margin-bottom: 7px; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.45; }
.cg-who li::before { content: ""; position: absolute; left: 0; top: 0.58em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
@media (max-width: 520px) { .private-pick select { max-width: 100%; } .cg-who li { font-size: .9rem; } }

.cg-links ul { list-style: none; margin: 10px 0 0; padding: 0; }
.cg-links li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.cg-links li:last-child { border-bottom: 0; }
.cg-links a { font-weight: 650; color: var(--ink); }
.cg-links a:hover { color: var(--brand-dark); }

/* Buscador corto de /privado/: solo origen y destino, el resto va en el embudo.
   Acotado a la izquierda: con dos campos, 940px de ancho se lee como un hueco. */
.sc-mini { margin: 6px 0 22px; max-width: 520px; padding: 16px; }
.sc-mini-title { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-dark); margin: 0 0 4px; }
.sc-mini .cta-bar { margin-top: 4px; }
.sc-mini .sc-cta { padding: 14px; font-size: 1rem; }
.sc-mini .sc-free { text-align: left; font-size: 0.78rem; margin-top: 2px; }
.sc-mini .cta-route { display: none; }
/* La barra de la home se queda fija abajo en movil. Aqui el boton vive DENTRO
   de la tarjeta: es un formulario corto, no el buscador principal. */
.sc-mini .cta-bar { position: static; padding: 0; margin: 0; border: 0; box-shadow: none; background: none; display: block; }
.sc-mini .sc-cta { width: 100%; }
@media (max-width: 520px) { .sc-mini { max-width: 100%; padding: 14px; } .sc-mini .cta-bar { position: static; } }

/* Pregunta de privado con tooltip indicativo (no modal) */
.charter-row { position: relative; display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 12px; }
.charter-row .charter-check { margin: 0; flex: 0 1 auto; }
.tip-btn { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; border: 1px solid var(--ink-soft); background: #fff; color: var(--ink-soft); font: 700 12px/1 var(--font); font-style: italic; cursor: pointer; padding: 0; }
.tip-btn:hover, .tip-open .tip-btn { background: var(--ink); border-color: var(--ink); color: #fff; }
.charter-tip { display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; width: min(300px, 100%); padding: 10px 12px; background: var(--ink); color: #fff; font-size: 0.8rem; line-height: 1.45; border-radius: 8px; box-shadow: 0 6px 18px rgba(20,32,46,.18); }
.tip-btn:hover ~ .charter-tip, .tip-btn:focus-visible ~ .charter-tip, .tip-open .charter-tip { display: block; }

/* Concierge: el pago deja de ser el boton principal y pasa a segunda linea */
.cg-second { margin: 10px 0 0; font-size: 0.86rem; color: var(--ink-soft); }
.cg-second a { font-weight: 700; color: var(--ink); text-decoration: underline; }

/* El precio deja de ser el titular de la tarjeta: la entrada es la conversacion */
.cg-price-soft span { flex: 1 1 320px; font-size: 0.95rem; }

/* Boton "Reservar" de cabecera (antes WhatsApp, 30-sep-2026): en movil se queda
   con el texto, corto y en pildora. Ocultar el span dejaba una pildora vacia. */
@media (max-width: 760px) {
  .main-nav a.nav-cg { padding: 0 13px; min-height: 36px; font-size: .88rem; gap: 0; }
}

/* ---------- Ajustes v6 sobre componentes existentes ---------- */
.quick-answer { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; box-shadow: var(--shadow); }
.quick-answer .qa-label, .fact .f-label, table.schedule th, .ticket .t-kind, .trip-label, .assist-head { text-transform: none; letter-spacing: 0; }
.quick-answer .qa-label { font-size: .85rem; font-weight: 700; }
.fact { background: #fff; }
.fact .f-label { font-size: .8rem; font-weight: 600; }
.stamp { font-weight: 600; }
.offer, .lead2-side, .step2-card, .book-summary { border-color: var(--line); }
.map-wrap, .map-real { border: 1px solid var(--line); }
.guarantee { border-radius: var(--radius); }
.cta-band { border-radius: var(--radius); background: var(--navy); }
.faq summary { font-weight: 700; }
.activity-list li { border-color: var(--line); }
.activity-list li:hover { border-color: var(--line-strong); }
.route-grid.list .route-card:hover { background: var(--surface-2); }
.date-chip { border-radius: var(--radius-sm); }
.date-chip.sel { background: var(--ink); border-color: var(--ink); }
.tips .tip h3 { margin-bottom: 4px; }
.public-page .footer-fine { color: var(--muted); }

/* ---------- Reglas duras de la casa (van las ultimas a proposito) ----------
   Botones SIEMPRE en pildora. Campos SIEMPRE rectos. Si una regla anterior dice
   otra cosa, pierde aqui. */
.public-page :is(.btn, .btn-mini, .btn-wa, .btn-pay, .return-link, .time-chip, .seg-btn, .view-toggle button, .pager button, .cart-pay, .dp-close, .dp-nav, .dp-d, .city-chip, .tip-btn) { border-radius: 999px; }
.public-page :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .dp-btn, .cc-q) { border-radius: 0 !important; }
/* El pie apila sus listas en columna: la de medios de pago va en fila */
.site-footer .pay-marks { flex-direction: row; flex-wrap: wrap; gap: 8px; }

/* Creditos de las fotos: en el pie, no encima de la imagen (27-sep-2026) */
.photo-credits a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* Caja del concierge: texto y boton en una linea, alineados al centro */
.cg-price { align-items: center; gap: 12px 24px; }
.cg-price .btn { margin-left: auto; }
@media (max-width: 520px) { .cg-price .btn { margin-left: 0; } }
/* Simetria de la tarjeta: el suelo movil de 44px (select{min-height:44px}) crecia el
   campo de personas y no el de fecha, y las etiquetas quedaban a distinta altura.
   El area tactil la da el campo entero (52px), no el select de dentro. */
.sc-field select, .sc-field .dp-btn { min-height: 24px; height: 24px; line-height: 24px; padding: 0; }
.sc-field .dp { width: 100%; }
/* /privado/: Desde y Hasta lado a lado y el boton en la misma fila, como la barra
   de busqueda (Joan, 27-sep-2026). En movil sigue apilado. */
@media (min-width: 761px) {
  .sc-mini { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 10px; max-width: none; align-items: stretch; }
  .sc-mini .sc-mini-title, .sc-mini .sc-free { grid-column: 1 / -1; }
  .sc-mini .sc-od { flex-direction: row; }
  .sc-mini .sc-od .sc-field ~ .sc-field { border-left: 0; border-top: 1px solid var(--line-strong); padding-left: 32px; }
  .sc-mini .sc-swap { left: 50%; right: auto; transform: translate(-50%, -50%); width: 36px; height: 36px; }
  .sc-mini .cta-bar { display: flex; margin: 0; }
  .sc-mini .sc-cta { width: auto; min-height: var(--field-h); padding: 0 30px; }
}

/* Simetria (27-sep-2026): la miga tenia padding-top 0 en TODAS las paginas porque
   `.breadcrumbs.wrap` (el contenedor) pisaba a `.breadcrumbs`. Aqui gana la miga,
   y la banda gris le da el mismo aire arriba y abajo. */
.breadcrumbs.wrap { padding-top: 16px; padding-bottom: 14px; }
.hero { padding-top: 6px; }
main.wrap > .hero.has-photo:first-child { padding-top: 64px; }
@media (max-width: 760px) {
  .breadcrumbs.wrap { padding-top: 6px; padding-bottom: 6px; }
  main.wrap > .hero.has-photo:first-child { padding-top: 40px; }
}
/* Reserva: la ruta ya esta en la miga, el titulo no la repite encima */
.lead2-main > .eyebrow, .lead2-step2 > .eyebrow { display: none; }
.lead2 { padding-top: 22px; }
/* Buscador compacto (Joan, 27-sep-2026): menos aire y campos mas bajos.
   Las etiquetas se anclan arriba en todos los campos: centradas, el campo de
   fecha (con el calendario dentro) y el de personas no quedaban a la misma altura. */
:root { --field-h: 44px; }
.sc { padding: 14px; gap: 8px; }
.sc-field { justify-content: flex-start; padding: 5px 12px 4px; }
.sc-field > span { font-size: .75rem; line-height: 1.15; }
.sc-field select, .sc-field .dp-btn { font-size: .95rem; height: 21px; min-height: 21px; line-height: 21px; }
.sc-swap { width: 34px; height: 34px; right: 10px; }
.sc-swap svg { width: 16px; height: 16px; }
.sc-link { font-size: .85rem; padding: 0; }
.sc .cta-bar { margin: 2px 0 0; }
.sc-cta { min-height: 44px; font-size: .98rem; }
.sc-free { font-size: .78rem; line-height: 1.35; }
@media (min-width: 901px) { .home-hero .wrap { grid-template-columns: minmax(330px, 400px) minmax(0, 1fr); } }
@media (max-width: 700px) { .sc { padding: 12px; } }
/* El boton de intercambio va ENTRE los dos campos: por eso las reglas usan
   `.sc-field ~ .sc-field` y no `+`, que nunca casaba. */
/* /privado/ en una fila: el campo "Hasta" deja sitio al boton de intercambio
   (36 px centrado en la junta) y el boton verde mide lo mismo que los campos. */
@media (min-width: 761px) {
  .sc.sc-mini .sc-od .sc-field ~ .sc-field { padding-left: 34px; }
  .sc.sc-mini .sc-od .sc-field:first-child { padding-right: 24px; }
  .sc.sc-mini .cta-bar { align-self: stretch; margin: 0; }
  .sc.sc-mini .sc-cta { min-height: 0; height: 100%; }
}
@media (min-width: 901px) { .sbar .sc-od .sc-field ~ .sc-field { padding-left: 40px; } }

/* Tarjetas de ruta en listas (empresa, terminal, aeropuerto), 27-sep-2026 */
.route-tiles { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.rt a { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 100%; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.rt a:hover { text-decoration: none; border-color: var(--line-strong); box-shadow: var(--shadow); }
.rt-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rt-main strong { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.rt-arrow { color: var(--brand); font-weight: 600; }
.rt-main small { font-size: .84rem; color: var(--ink-soft); }
.rt-price { flex: none; text-align: right; line-height: 1.15; }
.rt-price small { display: block; font-size: .72rem; color: var(--ink-soft); }
.rt-price b { font-size: 1.1rem; font-weight: 800; white-space: nowrap; }
@media (max-width: 560px) { .route-tiles { grid-template-columns: 1fr; } }
/* Barra en escritorio (fila): el campo "Hasta" comparte borde con "Desde" por la
   izquierda, pero conserva su borde superior. La regla general de columna
   (`.sc-od .sc-field ~ .sc-field { border-top: 0 }`) se lo quitaba. */
@media (min-width: 901px) { .sbar .sc-od .sc-field ~ .sc-field { border-top: 1px solid var(--line-strong); } }

/* ---------- Repaso general 27-sep-2026 ----------
   Movil: UN solo margen lateral de 16 px para cabecera, barra, migas y contenido.
   Habia tres (16 la cabecera, 20 unas paginas, 24 otras) y nada casaba con el logo. */
@media (max-width: 760px) {
  .wrap, main.wrap, .breadcrumbs.wrap, .site-header .wrap, .sbar .wrap, .site-footer .wrap,
  .wrap.prose, .guide-article, .resource-page, .operator-page, .public-page .lead2 { padding-left: 16px; padding-right: 16px; }
  .wrap.prose > *, .guide-article > *, .resource-page > *, .operator-page > * { max-width: 100%; }
  .public-page .lead2 > *, .step2-grid > *, .step2-aside > * { min-width: 0; max-width: 100%; }
}
@media (max-width: 760px) { .public-page .lead2, .lead2-step2 { padding-top: 16px; } }
/* Creditos de las fotos */
.credits-grid { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px 20px; }
.credits-grid figure { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.credits-grid img { width: 100%; height: 100%; object-fit: cover; }
.credits-grid strong { display: block; margin-top: 10px; font-size: .95rem; }
.credits-grid span { display: block; font-size: .84rem; color: var(--ink-soft); }
.credits-grid span a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* Chips de horarios en la lista de rutas: el "+N" es un enlace y no heredaba el
   formato de los span de hora (salia como un bloque verde estrecho). Todos iguales:
   misma altura, cifras de ancho fijo, y el "+N" con contorno verde. */
.rc-times { display: flex; align-items: center; gap: 6px; }
.rc-times > span, .rc-times > a.rc-more { display: inline-flex; align-items: center; justify-content: center; height: 28px; min-width: 50px; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: .8rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.rc-times > a.rc-more { min-width: 0; background: #fff; border-color: var(--brand); color: var(--brand-dark); text-decoration: none; }
.rc-times > a.rc-more:hover { background: var(--brand); color: #fff; }
/* Menu movil (27-sep-2026): se abria fijo a 68px de la pantalla y, con la franja
   superior encima, tapaba la cabecera y el boton de cerrar. Ahora cuelga de la
   cabecera. Y la cabecera (z 50) empataba con la barra fija de reserva (z 50),
   que tapaba el selector de idioma: sube a 58 y la barra se esconde con el menu. */
@media (max-width: 760px) {
  .site-header { z-index: 58; }
  .site-header .wrap { position: relative; }
  .nav-dd { position: static; }
  /* Menu lateral (Joan, 2-oct-2026): panel que entra por la derecha a toda altura, con boton de cerrar arriba. */
  .nav-dd-menu { position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: min(86vw, 360px); max-height: none; height: 100dvh; border-radius: 0; border: 0; border-left: 1px solid var(--line); padding: 14px 12px 24px; overflow-y: auto; overscroll-behavior: contain; z-index: 60; box-shadow: -16px 0 48px rgba(14, 30, 37, .25); animation: nav-slide .22s ease; }
  @keyframes nav-slide { from { transform: translateX(100%); } to { transform: none; } }
  .nav-dd-close { display: flex; width: 40px; height: 40px; margin: 0 0 6px auto; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: 1.3rem; line-height: 1; cursor: pointer; }
  body:has(.nav-dd[open]) { overflow: hidden; }
  body:has(.nav-dd[open]) :is(.cta-bar, .sticky-book, .cart-bar, .admin-bubble, .gcart) { display: none; }
  body:has(.nav-dd[open])::after { content: ""; position: fixed; inset: 0; background: rgba(14, 30, 37, .28); z-index: 57; }
  .nav-dd-lang { padding: 12px 12px 6px; gap: 8px; }
  .nav-dd-lang a { min-height: 40px; display: flex; align-items: center; justify-content: center; }
}
/* Pie con grupos desplegables en movil (27-sep-2026) */
.fcol > summary { list-style: none; }
.fcol > summary::-webkit-details-marker { display: none; }
@media (min-width: 761px) { .fcol > summary { pointer-events: none; } }
@media (max-width: 760px) {
  .footer-grid { display: block; margin-bottom: 8px; }
  .footer-brand { padding-bottom: 20px; }
  .fcol { border-top: 1px solid var(--line); }
  .fcol:last-child { border-bottom: 1px solid var(--line); }
  .fcol > summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 52px; }
  .fcol > summary h4 { margin: 0; font-size: .95rem; }
  .fcol > summary::after { content: "+"; font-size: 1.3rem; font-weight: 400; color: var(--ink-soft); line-height: 1; }
  .fcol[open] > summary::after { content: "\2013"; }
  .fcol ul { padding: 0 0 12px; gap: 0; }
  .site-footer .fcol a { display: block; min-height: 0; padding: 8px 0; line-height: 1.35; }
  .footer-pay { padding: 16px 0; }
}
/* Pago seguro, en pequeño, bajo el buscador de la home */
.sc-pay { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin: 0; font-size: .75rem; color: var(--ink-soft); line-height: 1.3; }
.sc-pay svg { width: 14px; height: 14px; color: var(--brand-dark); flex: none; }
.sc-pay span:first-of-type { font-weight: 700; color: var(--ink); }
.sc-pay-marks { color: var(--muted); }
/* Vuelta DEBAJO de la ida, a lo ancho (Joan, 27-sep-2026): al lado cortaba las
   fechas y dejaba "Personas" sola en otra linea. Comparte borde con la fila de arriba. */
.sc-dates { flex-wrap: wrap; }
.sc-dates .sc-ret { flex: 1 1 100%; border-left: 1px solid var(--line-strong); border-top: 0; }
.sbar .sc-dates .sc-ret { flex: 1 1 100%; }
/* Paso 2 de la reserva (27-sep-2026): sin duplicados.
   Escritorio: el resumen y "Cambiar el viaje" ya estan a la izquierda, fuera las copias
   de la tarjeta. Movil: el resumen baja debajo del formulario, asi que manda el boton
   de la tarjeta y se esconde el de abajo. El aviso de contacto repetia la nota de
   solicitud: fuera. */
.lead2-step2 .contact-hint { display: none; }
.lead2-step2 .request-note { margin-top: 12px; }
.lead2-step2 .step2-card .reply-badge { font-size: .8rem; padding: 5px 12px; }
.lead2-step2 .step2-card > p[style] { margin-top: 10px !important; }
@media (min-width: 821px) {
  .lead2 { padding-top: 30px; }
  .lead2-step2 h1 { margin-bottom: 12px; }
  .step2-card .contact-trip, .step2-card [data-bf-edit] { display: none; }
  .step2-card .btn { margin-top: 18px; }
}
@media (max-width: 820px) {
  .step2-aside [data-bf-back] { display: none; }
}
/* Comparativa (27-sep-2026): rejilla DENTRO del contenedor (antes se salia a
   1220px y no casaba con el titulo), contras ajenos marcados y los nuestros en positivo. */
@media (min-width: 1080px) {
  .compare-card-grid { position: static; left: auto; transform: none; width: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
}
.compare-card { height: 100%; }
.compare-card ul.cons li { color: var(--ink); }
.compare-card ul.cons li::before { content: "\2715"; color: #B4232A; font-size: .8rem; top: 2px; }
.cc-h.is-cons { color: #B4232A; }
.cc-h.is-note { color: var(--brand-dark); }
.compare-card ul.cons.ours li { color: var(--ink-soft); }
.compare-card ul.cons.ours li::before { content: "\2192"; color: var(--brand-dark); font-size: .95rem; top: 0; }

/* ---------- Blog con formato de WordPress (27-sep-2026) ---------- */
.blog-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 26px; }
.blog-cats button { border: 1px solid var(--line-strong); background: #fff; color: var(--ink); border-radius: 999px; padding: 8px 16px; font: 600 .9rem var(--font); cursor: pointer; }
.blog-cats button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.post-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.pc a { display: flex; flex-direction: column; height: 100%; color: var(--ink); }
.pc a:hover { text-decoration: none; }
.pc figure { aspect-ratio: 16 / 10; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.pc img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.pc a:hover img { transform: scale(1.035); }
.pc-body { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; }
.pc-cat { align-self: flex-start; font-size: .75rem; font-weight: 700; color: var(--brand-dark); background: var(--brand-tint); border-radius: 999px; padding: 3px 10px; text-decoration: none; }
a.pc-cat:hover { text-decoration: none; background: var(--brand); color: #fff; }
.pc-body strong { font-size: 1.12rem; line-height: 1.3; letter-spacing: -0.01em; }
.pc a:hover .pc-body strong { color: var(--brand-dark); }
.pc-ex { color: var(--ink-soft); font-size: .93rem; line-height: 1.5; }
.pc-meta { color: var(--muted); font-size: .82rem; margin-top: auto; }
.pc-featured { grid-column: 1 / -1; }
.pc-featured a { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.pc-featured .pc-body { padding-top: 0; }
.pc-featured .pc-body strong { font-size: 1.75rem; line-height: 1.15; letter-spacing: -0.02em; }
.pc-featured .pc-ex { font-size: 1.02rem; }
.pc[hidden] { display: none; }
@media (max-width: 900px) { .post-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pc-featured a { grid-template-columns: 1fr; gap: 0; } .pc-featured .pc-body { padding-top: 14px; } .pc-featured .pc-body strong { font-size: 1.4rem; } }
@media (max-width: 560px) { .post-cards { grid-template-columns: 1fr; } }

/* Entrada: columna de lectura de 760px alineada a la izquierda del contenedor */
.blog-post .post-head, .blog-post .post-cover, .blog-post .post-content, .blog-post .post-nav { max-width: 760px; }
.post-head { padding: 26px 0 18px; display: flex; flex-direction: column; gap: 12px; }
.post-head h1 { font-size: 2.4rem; line-height: 1.12; }
.post-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--ink-soft); font-size: .9rem; margin: 0; }
.post-byline strong { color: var(--ink); }
.post-avatar { width: 36px; height: 36px; flex: none; border-radius: 999px; background: var(--brand); color: #fff; display: inline-grid; place-items: center; font-weight: 800; font-size: .95rem; }
.post-when { color: var(--muted); }
.post-cover { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; background: var(--surface); margin: 6px 0 8px; }
.post-cover img { width: 100%; height: 100%; object-fit: cover; }
.post-content { font-size: 1.06rem; line-height: 1.75; }
.post-content > p, .post-content h2 + p { max-width: none; color: #26363E; margin-bottom: 18px; }
.post-content h2 { font-size: 1.55rem; margin: 38px 0 12px; scroll-margin-top: 90px; }
.post-content p a { color: var(--brand-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.post-content p a:hover { color: var(--ink); }
.post-content .quick-answer { margin: 22px 0; }
.toc { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 20px; margin: 8px 0 10px; font-size: .95rem; line-height: 1.5; }
.toc strong { display: block; margin-bottom: 8px; }
.toc ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.toc a { color: var(--ink); }
.toc a:hover { color: var(--brand-dark); }
.post-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 30px 0 0; padding-top: 22px; border-top: 1px solid var(--line); }
.post-tags strong { font-size: .9rem; margin-right: 4px; }
.post-tags a { border: 1px solid var(--line-strong); border-radius: 999px; padding: 5px 13px; font-size: .85rem; color: var(--ink); }
.post-tags a:hover { border-color: var(--ink); text-decoration: none; }
.author-box { display: flex; gap: 16px; align-items: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin: 26px 0 0; font-size: .92rem; line-height: 1.55; }
.author-box .post-avatar { width: 48px; height: 48px; font-size: 1.2rem; }
.author-box p { margin: 4px 0 0; color: var(--ink-soft); }
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 34px 0 10px; }
.post-nav a { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; color: var(--ink); }
.post-nav a:hover { border-color: var(--line-strong); text-decoration: none; box-shadow: var(--shadow); }
.post-nav small { color: var(--muted); font-size: .78rem; }
.post-nav strong { font-size: .95rem; line-height: 1.35; }
.post-nav .pn-next { text-align: right; grid-column: 2; }
.post-cards.related { margin-top: 10px; }
@media (max-width: 700px) {
  .post-head h1 { font-size: 1.8rem; }
  .post-content { font-size: 1.02rem; }
  .post-content h2 { font-size: 1.3rem; }
  .post-nav { grid-template-columns: 1fr; }
  .post-nav .pn-next { grid-column: auto; text-align: left; }
}
/* Precio antes de los datos y "no pagas nada" destacado (27-sep-2026) */
.price-now { display: flex; flex-direction: column; gap: 2px; background: var(--brand-tint); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 10px; }
.price-now .pn-label { font-size: .8rem; font-weight: 700; color: var(--brand-ink); }
.price-now strong { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); }
.price-now .pn-detail { font-size: .88rem; color: var(--ink); }
.price-now .pn-note { font-size: .78rem; color: var(--ink-soft); margin-top: 2px; }
.no-pay { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 16px; font-size: .9rem; font-weight: 700; color: var(--brand-ink); line-height: 1.4; }
.no-pay svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--brand-dark); }
.step1-next .no-pay { margin-top: 12px; margin-bottom: 0; font-weight: 600; }
/* Movil: sin franja superior (Joan, 27-sep-2026). La cabecera arranca arriba. */
@media (max-width: 760px) { .topstrip { display: none; } }

/* Franja de empresas: pildoras ordenadas en vez de palabras sueltas que saltan de linea (28-sep) */
.ops-strip { padding: 20px 0; }
.ops-strip .wrap { gap: 12px 20px; }
.ops-list { gap: 8px; }
.ops-list li { font-size: .86rem; font-weight: 700; letter-spacing: 0; color: var(--ink-soft); }
.ops-list li > a, .ops-list li:not(:has(a)) { display: inline-block; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; line-height: 1.2; }
.ops-list li > a:hover { border-color: var(--brand); color: var(--brand-ink); }
.ops-note { font-size: .75rem; }
@media (max-width: 760px) {
  .ops-strip .wrap { flex-direction: column; align-items: flex-start; }
  .ops-list { gap: 6px; }
  .ops-list li { font-size: .8rem; }
  .ops-list li > a, .ops-list li:not(:has(a)) { padding: 6px 12px; }
}

/* Paso 2 en movil, mas compacto (28-sep): el precio en una franja baja, campos
   con menos aire y el cierre (resumen, cambiar viaje, notas) en letra pequena. */
@media (max-width: 820px) {
  /* el suelo de 44 px es para campos de texto: a las casillas las estiraba y
     descolocaba su etiqueta */
  input[type="checkbox"], input[type="radio"] { min-height: 0 !important; }
  .lead2-step2 .price-now { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 10px; padding: 10px 12px; margin-bottom: 8px; }
  .lead2-step2 .price-now .pn-label, .lead2-step2 .price-now .pn-note { flex-basis: 100%; }
  .lead2-step2 .price-now .pn-label { font-size: .74rem; }
  .lead2-step2 .price-now strong { font-size: 1.35rem; line-height: 1.2; }
  .lead2-step2 .price-now .pn-detail { font-size: .8rem; white-space: nowrap; }
  .lead2-step2 .price-now .pn-note { font-size: .72rem; margin-top: 2px; }
  .lead2-step2 .breadcrumbs, .breadcrumbs:has(+ .lead2-step2) { padding-top: 2px; padding-bottom: 2px; }
  .lead2-step2 .breadcrumbs .bc-back, .breadcrumbs:has(+ .lead2-step2) .bc-back { min-height: 36px; }
  .lead2-step2 { padding-top: 10px; }
  .lead2-step2 .no-pay { font-size: .82rem; margin: 0 0 10px; gap: 6px; }
  .lead2-step2 .book-fields { gap: 3px; }
  .lead2-step2 .book-fields label { font-size: .8rem; margin: 8px 0 0; }
  .lead2-step2 .book-fields > label:first-child { margin-top: 0; }
  .lead2-step2 .book-fields input:not([type="checkbox"]):not([type="radio"]), .lead2-step2 .book-fields select { padding: 9px 12px; min-height: 44px; }
  .lead2-step2 .cc-btn { min-height: 44px; padding: 8px 12px; }
  .lead2-step2 .special-needs { padding-top: 8px; }
  .lead2-step2 .special-needs summary { font-size: .82rem; }
  .lead2-step2 .charter-row { margin: 6px 0 4px; align-items: center; }
  .lead2-step2 .charter-check { align-items: center; font-size: .8rem; }
  .lead2-step2 .charter-check input, .lead2-step2 .terms-check input[type="checkbox"] { width: 18px; height: 18px; margin: 0; }
  .lead2-step2 .terms-check { align-items: center; font-size: .78rem; margin: 4px 0 0; }
  .lead2-step2 .contact-trip { margin-top: 10px; padding-top: 8px; font-size: .78rem; }
  .lead2-step2 .step2-card .return-link { width: auto; min-height: 32px; padding: 2px 0; border: 0; background: none; font-size: .82rem; font-weight: 700; color: var(--brand-ink); justify-content: flex-start; }
  .lead2-step2 .step2-card .btn { font-size: .95rem; white-space: normal; line-height: 1.25; padding: 13px 14px; }
  .lead2-step2 .request-note { font-size: .74rem; margin-top: 6px; }
  .lead2-step2 .reply-badge { font-size: .74rem; padding: 3px 10px; }
  .lead2-step2 .policy-mini { font-size: .72rem; line-height: 1.4; }
}

/* Menu movil: de la fila principal solo queda Privado (Joan, 28-sep). Rutas,
   Ciudades y Como llegar ya estan en el buscador y en los accesos de abajo. */
@media (max-width: 820px) { .nav-dd-primary a:not(:last-child) { display: none; } }

/* Paso 1 en movil: menos letra, foco en elegir y continuar (Joan, 28-sep).
   El "no pagas ahora" ya lo dice el aviso .no-pay, la vuelta su propio boton y
   la nota de horas se repite en el paso 2 y en la confirmacion. */
@media (max-width: 820px) {
  .lead2:not(.lead2-step2) .lead2-sub,
  .lead2:not(.lead2-step2) .return-hint,
  .lead2:not(.lead2-step2) .dur-note { display: none; }
  .lead2:not(.lead2-step2) h1 { font-size: 1.25rem; line-height: 1.25; margin: 0 0 8px; }
  .lead2:not(.lead2-step2) .steps-bar { margin: 0 0 12px; }
  .lead2:not(.lead2-step2) .pax-note { font-size: .78rem; }
  /* de la lista de incluido quedan billete, salida y llegada, y WhatsApp */
  .lead2:not(.lead2-step2) .assist-strip li:nth-child(3), .lead2:not(.lead2-step2) .assist-strip li:nth-child(n+5) { display: none; }
}

/* Textos a todo el ancho del contenedor (Joan, 28-sep): los topes de 56 a 72ch
   y de 520 a 900 px cortaban los parrafos a mitad de pantalla y parecia un
   recorte a proposito. Quedan con tope solo formularios, tarjetas y el articulo
   del blog, que tiene columna de lectura propia. */
main.wrap > p, main.wrap > section > p, .section-sub, .prose p, .prose li,
.res-note, .bus-first p, .safety-note p, .stamp-note, .operators-note,
.guarantee p, .faq .faq-a, .guide-article > p:first-of-type, .operator-context p,
.about-hero .about-copy p, .confirmation-example p, .band p, .tip,
.city-page .activity-list, .quick-answer p, .hero p.sub, .hero .sub,
.hero h1, .operator-page .hero h1, .guide-article .guide-hero h1 { max-width: none; }

/* Pie del buscador: pago seguro y respuesta en un solo texto (28-sep) */
.sc-trust { display: flex; align-items: flex-start; gap: 6px; margin: 2px 0 0; font-size: .78rem; color: var(--ink-soft); line-height: 1.4; }
.sc-trust svg { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--brand-dark); }
.sc-trust strong { color: var(--ink); font-weight: 700; }

/* En el panel lateral caben todas las secciones: Rutas, Ciudades y Comparar vuelven a verse (2-oct-2026). */
@media (max-width: 760px) { .nav-dd-primary a:not(:last-child) { display: block; } }

/* Modo carrito (2-oct-2026): la reserva se presenta como una compra. */
.main-nav a.nav-cart { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; min-height: 40px; margin-left: 6px; border: 1.5px solid var(--ink); border-radius: 999px; color: var(--ink); }
.main-nav a.nav-cart[hidden] { display: none; }
.main-nav a.nav-cart b { position: absolute; top: -6px; right: -6px; background: var(--brand); color: #fff; border-radius: 999px; font-size: .66rem; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; }
.lead2-cart { border: 1.5px solid var(--ink) !important; }
.cart-title { display: flex; align-items: center; gap: 8px; font-size: 1rem; }
.cart-title em { font-style: normal; color: var(--ink-soft); font-size: .8rem; margin-left: auto; }
.cart-title .cart-ico { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 999px; background: var(--brand-tint, #E6F7F1); color: var(--brand-dark); }
.lead2-cart .lead2-summary { margin-top: 12px; }
.lead2-cart .cta-bar .btn, .lead2-cart [data-bf-submit] { border-radius: 999px; font-size: 1rem; padding: 13px 16px; }
.lead2-cart [data-bf-submit] { width: 100%; }
@media (min-width: 821px) { .lead2-cart .cta-bar .btn { width: 100%; } }
/* Barra fija movil (Joan, 2-oct-2026): el boton no puede salirse por la derecha; el precio no se parte. */
@media (max-width: 820px) { .lead2-cart .cta-bar .btn { flex: 1 1 auto; width: auto; min-width: 0; padding: 13px 14px; margin-left: 10px; white-space: nowrap; } .cta-price { flex: 0 0 auto; white-space: nowrap; } }

/* Carrito de compra (2-oct-2026): hoja inferior en movil, tarjeta a la derecha en escritorio. */
.gcart-overlay { position: fixed; inset: 0; background: rgba(14, 30, 37, .35); z-index: 70; }
.gcart-overlay[hidden] { display: none; }
.gcart { position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; background: #fff; border-top: 1.5px solid var(--ink); border-radius: 22px 22px 0 0; padding: 10px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -14px 40px rgba(14, 30, 37, .2); font-size: .92rem; max-height: 88dvh; overflow-y: auto; animation: gcart-up .22s ease; }
.gcart[hidden] { display: none; }
@keyframes gcart-up { from { transform: translateY(100%); } to { transform: none; } }
.gcart-grip { width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: 0 auto 10px; }
.gcart-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.gcart-head strong { font-size: 1rem; }
.gcart-head em { font-style: normal; color: var(--ink-soft); font-size: .8rem; }
.gcart-head .cart-ico { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 999px; background: var(--brand-tint, #E6F7F1); color: var(--brand-dark); flex: none; }
.gcart-x { margin-left: auto; background: none; border: 0; font-size: 1.4rem; line-height: 1; color: var(--ink-soft); cursor: pointer; padding: 2px 6px; }
.gcart-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px 0; }
.gcart-item b { display: block; font-size: .98rem; }
.gcart-item span { color: var(--ink-soft); font-size: .82rem; }
.gcart-rm { background: none; border: 0; color: var(--ink-soft); font: inherit; font-size: .78rem; text-decoration: underline; cursor: pointer; padding: 0; flex: none; }
.gcart-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-weight: 600; }
.gcart-row input[type=date] { font: inherit; font-size: .92rem; padding: 7px 10px; border: 1.5px solid var(--line); border-radius: 8px; background: #fff; max-width: 180px; }
.gcart-times { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.gcart-times button { font: inherit; font-size: .8rem; font-weight: 700; border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 5px 10px; cursor: pointer; }
.gcart-times button.on { background: var(--brand-tint, #E6F7F1); border-color: var(--brand); color: var(--brand-dark); }
.gcart-step { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 999px; overflow: hidden; }
.gcart-step button { width: 36px; height: 34px; border: 0; background: #fff; font: inherit; font-size: 1.1rem; font-weight: 800; color: var(--ink-soft); cursor: pointer; }
.gcart-step b { min-width: 34px; text-align: center; font-size: .98rem; }
.gcart-off { color: var(--brand-dark); font-weight: 600; }
.gcart-total { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0 4px; }
.gcart-total b { font-size: 1.25rem; }
.gcart-go { display: block; text-align: center; background: var(--brand); color: #fff; font-weight: 800; font-size: 1rem; padding: 14px 16px; border-radius: 999px; text-decoration: none; margin-top: 8px; }
.gcart-go:hover { background: var(--brand-dark); color: #fff; text-decoration: none; }
.gcart-go[aria-disabled=true] { background: var(--line); color: var(--ink-soft); cursor: not-allowed; }
.gcart-safe { text-align: center; color: var(--ink-soft); font-size: .76rem; margin: 8px 0 0; }
.route-card .rc-book.in-cart { background: var(--ink); border-color: var(--ink); color: #fff; }
body.gcart-open { overflow: hidden; }
@media (min-width: 721px) {
  /* Escritorio (Joan, 2-oct-2026): cajon lateral tipo Shopify, no una burbuja en el aire. */
  .gcart-overlay { background: rgba(14, 30, 37, .45); }
  .gcart { left: auto; right: 0; top: 0; bottom: 0; width: 420px; max-width: 92vw; max-height: none; border: 0; border-left: 1px solid var(--line); border-radius: 0; padding: 0; box-shadow: -18px 0 50px rgba(14, 30, 37, .28); animation: gcart-slide .22s ease; display: flex; flex-direction: column; overflow: hidden; }
  @keyframes gcart-slide { from { transform: translateX(100%); } to { transform: none; } }
  .gcart-grip { display: none; }
  .gcart-head { padding: 18px 20px; border-bottom: 1px solid var(--line); margin: 0; }
  .gcart-head strong { font-size: 1.1rem; }
  .gcart-item, .gcart-row { margin: 0 20px; }
  .gcart-item { padding: 16px 0; }
  .gcart-off { margin: 0 20px; }
  .gcart-total { margin: auto 20px 0; padding: 16px 0 6px; border-top: 1.5px solid var(--ink); }
  .gcart-go { margin: 8px 20px 0; }
  .gcart-safe { margin: 10px 20px 20px; }
  body.gcart-open { overflow: hidden; }
  /* El pago pendiente abre el mismo cajon. */
  body:has([data-nav-cart]) .cart-bar { top: 0; right: 0; bottom: 0; left: auto; width: 420px; max-width: 92vw; border: 0; border-left: 1px solid var(--line); border-radius: 0; padding: 0; box-shadow: -18px 0 50px rgba(14, 30, 37, .28); animation: gcart-slide .22s ease; display: flex; flex-direction: column; z-index: 71; }
  body:has([data-nav-cart]) .cart-bar .cart-head { padding: 18px 20px; border-bottom: 1px solid var(--line); }
  body:has([data-nav-cart]) .cart-bar .cart-item { margin: 0 20px; padding: 16px 0; border-top: 0; }
  body:has([data-nav-cart]) .cart-bar .cart-total { margin: auto 20px 0; padding: 16px 0 6px; border-top: 1.5px solid var(--ink); }
  body:has([data-nav-cart]) .cart-bar .cart-pay { margin: 8px 20px 0; }
  body:has([data-nav-cart]) .cart-bar .cart-wa { margin: 10px 20px 20px; }
  body:has([data-nav-cart]) .cart-bar:not([hidden]) ~ .gcart-overlay, body:has(.cart-bar:not([hidden])) .cart-veil { display: block; }
}
.cart-veil { display: none; position: fixed; inset: 0; background: rgba(14, 30, 37, .45); z-index: 70; }

/* Caja del carrito en el paso de datos y aire en la tarjeta del paso 1 (Joan, 2-oct-2026). */
.cart-box { border: 1.5px solid var(--ink); border-radius: var(--radius); padding: 16px; background: #fff; margin-bottom: 14px; }
.cart-box .lead2-summary { margin-top: 12px; }
.lead2-cart { padding-top: 24px !important; }
.lead2-cart .cart-title, .cart-box .cart-title { margin-bottom: 14px; }
.step2-aside .step2-extra { margin-top: 4px; }

/* Hoja inferior compacta en movil (boceto de Joan, 2-oct-2026). */
.gcart.collapsed { padding-top: 8px; max-height: none; overflow: visible; animation: none; }
.gcart-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 2px 0 8px; cursor: pointer; }
.gcart-meta small { display: block; color: var(--ink-soft); font-size: .76rem; font-weight: 700; }
.gcart-meta b { font-size: 1rem; }
.gcart-meta strong { font-size: 1.25rem; }
.gcart.collapsed .gcart-pax { border-bottom: 0; padding: 4px 0 2px; }
.gcart.collapsed .gcart-go { margin-top: 6px; padding: 12px 16px; }
body.has-cart .sticky-book, body:has(.gcart:not([hidden])) .sticky-book { display: none !important; }
@media (max-width: 820px) {
  body.has-cart .cart-bar.sheet { top: auto; bottom: 0; left: 0; right: 0; border-radius: 22px 22px 0 0; border: 0; border-top: 1.5px solid var(--ink); padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 -14px 40px rgba(14, 30, 37, .2); z-index: 61; }
  .cart-bar.sheet .cart-head { display: none; }
  .cart-bar.sheet .cart-item { border-top: 0; padding-top: 2px; }
  .cart-bar.sheet .cart-x { position: absolute; top: 6px; right: 10px; }
  .cart-bar.sheet { position: fixed; }
}
/* Menu lateral compacto en movil (Joan, 2-oct-2026): sin subtitulos, todo en una pantalla. */
@media (max-width: 760px) {
  .nav-dd-menu { padding: 10px 12px 18px; }
  .nav-dd-close { width: 32px; height: 32px; font-size: 1.1rem; margin-bottom: 2px; }
  .nav-dd-primary { margin-bottom: 4px; padding-bottom: 4px; }
  .nav-dd-primary a { padding: 8px 10px; font-size: .95rem; }
  .nav-dd-menu > a { padding: 8px 10px; }
  .nav-dd-menu > a strong { font-size: .95rem; }
  .nav-dd-menu > a span { display: none; }
  .nav-dd-lang { margin-top: 8px; padding: 10px 10px 0; }
  .nav-dd-lang a { min-height: 38px; }
}

/* Señales de urgencia y escasez (2-oct-2026) y tooltip del concierge. */
.sum-signals { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 0; }
.sum-signals:empty { display: none; }
.sig { display: flex; align-items: flex-start; gap: 8px; font-size: .82rem; line-height: 1.35; color: var(--ink); background: var(--brand-tint, #E6F7F1); border-radius: 8px; padding: 7px 10px; }
.sig svg { flex: none; margin-top: 2px; color: var(--brand-dark); }
.sig-clock { background: #FFF3D6; }
.sig-clock svg { color: #8A6400; }
.sig-bolt { background: #F2F4F6; }
.sig-bolt svg { color: var(--ink); }
.gcart .gcart-sig, .cart-bar .cart-sig { margin: 10px 0 0; }
.gcart.collapsed .gcart-sig .sig:not(:first-child) { display: none; }
.sum-bd-inc .sum-inc { color: var(--brand-dark); background: var(--brand-tint, #E6F7F1); border-radius: 999px; padding: 2px 9px; font-size: .78rem; }
.sum-bd-inc .qi { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-soft); font-size: .68rem; font-style: normal; font-weight: 700; cursor: help; margin-left: 4px; vertical-align: middle; }
.cart-bar .cart-edit { color: var(--brand-dark); font-weight: 700; font-size: .78rem !important; }
@media (min-width: 721px) { body:has([data-nav-cart]) .cart-bar .cart-sig { margin: 0 20px; } }

/* Selector de ciudad propio en el listado de rutas (2-oct-2026). */
.cpick { position: relative; min-width: 0; }
.cpick .cpick-native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.cpick-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-width: 160px; font: inherit; font-size: .9rem; font-weight: 600; color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 8px; padding: 9px 12px; cursor: pointer; text-align: left; }
.cpick-btn i { width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .7; flex: none; }
.cpick.open .cpick-btn { border-color: var(--ink); }
.cpick-pop { position: absolute; left: 0; top: calc(100% + 6px); z-index: 60; width: min(340px, 92vw); background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 16px 44px rgba(14, 30, 37, .18); padding: 8px; }
.cpick-pop[hidden] { display: none; }
.cpick-q { width: 100%; font: inherit; font-size: .92rem; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 8px; margin-bottom: 6px; }
.cpick-q:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.cpick-list { max-height: 320px; overflow-y: auto; overscroll-behavior: contain; }
.cpick-g { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); padding: 10px 10px 4px; }
.cpick-opt { display: block; width: 100%; text-align: left; font: inherit; font-size: .9rem; background: none; border: 0; border-radius: 6px; padding: 9px 10px; cursor: pointer; color: var(--ink); }
.cpick-opt:hover, .cpick-opt:focus { background: var(--surface); outline: none; }
.cpick-opt.on { background: var(--brand-tint, #E6F7F1); color: var(--brand-dark); font-weight: 700; }
@media (max-width: 760px) { .cpick-pop { position: fixed; left: 12px; right: 12px; top: 72px; width: auto; } .cpick-list { max-height: 55vh; } }

/* Carrito en escritorio: aire entre la miga de pan y la tarjeta (Joan, 2-oct-2026). */
@media (min-width: 821px) { .lead2-cart { margin-top: 18px; } }
/* Hoja movil sin señales de urgencia (Joan, 3-oct-2026). */
@media (max-width: 820px) { .gcart .sum-signals, .cart-bar .sum-signals { display: none; } }
/* Hoja movil del pago pendiente, compacta (Joan, 3-oct-2026): ruta, una linea de datos, total y boton. */
@media (max-width: 820px) {
  body.has-cart .cart-bar.sheet { padding: 8px 14px calc(10px + env(safe-area-inset-bottom)); }
  .cart-bar.sheet .cart-item { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 0; padding: 0 0 6px; }
  .cart-bar.sheet .cart-item b { width: 100%; font-size: .95rem; }
  .cart-bar.sheet .cart-item span { font-size: .78rem; }
  .cart-bar.sheet .cart-total { padding: 6px 0 0; font-size: .9rem; }
  .cart-bar.sheet .cart-total b { font-size: 1.05rem; }
  .cart-bar.sheet .cart-pay { margin-top: 6px; padding: 11px 16px; font-size: .95rem; }
  .cart-bar.sheet .cart-wa { display: none; }
}

/* Paso 2 en movil (Joan, 3-oct-2026): formulario y boton primero, el carrito debajo.
   La regla de orden de .lead2-summary dejo de aplicar al envolverlo en .cart-box (modo carrito). */
@media (max-width: 820px) {
  .lead2-step2 .cart-box { order: 2; }
  .lead2-step2 .step2-card .pn-note { display: none; }
  .lead2-step2 .step2-card .sum-signals { display: none; }
  .lead2-step2 .step2-card .contact-trip p + p { display: none; }
}

/* Quiénes somos v2 (3-oct-2026): una columna a la izquierda, escaneable. */
.about2 { max-width: 760px; padding-top: 18px; padding-bottom: 40px; }
.about2 h1 { margin-bottom: 10px; }
.about2 h2 { font-size: 1.3rem; margin: 34px 0 12px; }
.about2 p { color: var(--ink-soft); line-height: 1.6; }
.ab-lead { font-size: 1.08rem; color: var(--ink) !important; max-width: 680px; }
.ab-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 0; padding: 0; }
.ab-facts li { flex: 1 1 0; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin: 0; }
.ab-facts strong { display: block; font-size: 1.5rem; font-weight: 800; color: var(--ink); line-height: 1.1; }
.ab-facts span { font-size: .86rem; color: var(--ink-soft); }
.ab-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ab-steps li { display: flex; gap: 14px; align-items: flex-start; margin: 0; }
.ab-n { flex: none; width: 30px; height: 30px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 800; font-size: .9rem; display: flex; align-items: center; justify-content: center; }
.ab-steps h3 { font-size: 1rem; margin: 3px 0 2px; }
.ab-steps p { margin: 0; font-size: .95rem; }
.ab-inc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ab-inc li { display: flex; gap: 10px; align-items: flex-start; margin: 0; color: var(--ink); }
.ab-inc svg { flex: none; margin-top: 4px; color: var(--brand-dark); }
.ab-box { background: var(--brand-tint, #E6F7F1); border-radius: var(--radius); padding: 18px 20px; margin-top: 30px; }
.ab-box h2 { margin: 0 0 6px; font-size: 1.1rem; }
.ab-box p { margin: 0; color: var(--ink); }
.ab-routes { margin-top: 6px; }
@media (max-width: 600px) { .ab-facts { gap: 8px; } .ab-facts li { padding: 10px 10px; } .ab-facts strong { font-size: 1.2rem; } .ab-facts span { font-size: .74rem; line-height: 1.3; display: block; } .about2 h2 { margin-top: 28px; } }
.about2 .ab-box h2 { margin-top: 0; }

/* Paginacion del blog (4-oct-2026). */
.blog-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 30px 0 10px; }
.blog-pager button { border: 1.5px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-weight: 700; font-size: .9rem; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 999px; cursor: pointer; }
.blog-pager button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.blog-pager button:disabled { opacity: .4; cursor: default; }
.blog-pager button:not(:disabled):not(.on):hover { border-color: var(--ink); }

/* Guias del blog en paginas de ruta y como llegar (4-oct-2026). */
.related-posts { margin: 28px 0 8px; }
.related-posts h2 { font-size: 1.15rem; margin-bottom: 10px; }
.related-posts ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.related-posts li { margin: 0; }
.related-posts a { display: block; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; font-weight: 700; color: var(--ink); text-decoration: none; }
.related-posts a:hover { border-color: var(--ink); }

/* Formulario de privado (4-oct-2026). */
.pv-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin: 0 0 22px; }
.pv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin: 10px 0 14px; }
.pv-grid label { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; font-weight: 700; color: var(--ink-soft); }
.pv-grid input, .pv-grid select, .pv-grid textarea { font: inherit; font-size: .95rem; color: var(--ink); border: 1.5px solid var(--line); border-radius: 0; padding: 10px 12px; background: #fff; width: 100%; }
.pv-grid textarea { resize: vertical; }
.pv-wide { grid-column: 1 / -1; }
.pv-send { width: 100%; margin-top: 10px; }
.pv-msg { margin: 10px 0 0; padding: 12px 14px; border-radius: var(--radius-sm, 8px); font-weight: 600; }
.pv-msg.ok { background: var(--brand-tint, #E6F7F1); color: var(--ink); }
.pv-msg.err { background: #FDEBEB; color: #a52b35; }
@media (max-width: 600px) { .pv-grid { grid-template-columns: 1fr; } .pv-form { padding: 14px; } }

/* Movil (Joan, 4-oct-2026): filtros de rutas en una linea sin duracion, y fuera el titulo
   "Rutas mas pedidas" con su subtitulo. */
@media (max-width: 700px) {
  .hide-m { display: none !important; }
  .route-filters .rf-dur { display: none; }
  .route-filters { flex-wrap: nowrap; gap: 8px; }
  .route-filters label { flex: 1 1 0; min-width: 0; }
}
/* Aviso de idioma por navegador (4-oct-2026): franja fina, sin borde lateral, se va al hacer scroll */
.lang-hint { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; background: var(--brand-tint); color: var(--ink); border-bottom: 1px solid var(--line); font-size: .86rem; line-height: 1.35; padding: 7px 16px; text-align: center; }
.lang-hint a { color: var(--brand-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.lang-hint button { background: none; border: 0; padding: 4px 2px; font: inherit; color: var(--ink-soft); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.lang-hint button:hover { color: var(--ink); }

/* Post del blog mas ancho y limpio (Joan, 4-oct-2026). */
.blog-post .post-head, .blog-post .post-cover, .blog-post .post-content, .blog-post .post-nav { max-width: 960px; }
.blog-post .post-cover { aspect-ratio: 2 / 1; }
@media (min-width: 900px) { .blog-post .toc ol { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; } }