/* Guagualine — clean white design system (v2) */
: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;
  --surface: #F4F5F7;
  --surface-2: #FAFBFC;
  --ink: #14202E;
  --ink-soft: #5A6572;
  --brand: #00A878;
  --brand-dark: #00825D;
  --brand-tint: #E6F7F1;
  --navy: #14202E;
  --link: #0F62D6;
  --line: #D8DCE1;
  --line-strong: #C7CDD2;
  --warn-bg: #FFF8E8;
  --warn-ink: #8A6400;
  --radius: 8px;
  --radius-sm: 8px;
  --shadow: 0 1px 3px rgba(20, 32, 46, 0.06), 0 4px 16px rgba(20, 32, 46, 0.05);
  --font: "Manrope", -apple-system, "Segoe UI", sans-serif;
}
* { 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: hidden;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
main.wrap, .breadcrumbs.wrap { max-width: 980px; }
main.wrap > * { max-width: none; }

h1, h2, h3 { font-weight: 650; letter-spacing: 0; line-height: 1.2; color: var(--ink); }
h1 { font-size: 2rem; line-height: 1.2; }
h2 { font-size: 1.5rem; margin-bottom: 0.5em; }
h3 { font-size: 1.08rem; font-weight: 700; }

/* Header */
.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: 18px; height: 60px; }
.logo { font-weight: 800; font-size: 1.24rem; color: var(--ink); letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; }
.logo:hover { text-decoration: none; }
.logo .logo-word { display: inline; }
.logo .bus-mini { width: 34px; height: auto; flex: none; }
.logo em { font-style: normal; color: var(--brand-dark); }
.main-nav { margin-left: auto; display: flex; gap: 22px; align-items: center; }
.main-nav a { color: var(--ink-soft); font-weight: 600; font-size: 0.92rem; }
.main-nav a:hover { color: var(--ink); text-decoration: none; }
.nav-dd { position: relative; }
.nav-dd summary { list-style: none; cursor: pointer; color: var(--ink-soft); font-weight: 700; font-size: 0.92rem; display: flex; align-items: center; gap: 6px; }
.nav-dd summary::-webkit-details-marker { display: none; }
.nav-dd summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .7; }
.nav-dd[open] summary, .nav-dd summary:hover { color: var(--ink); }
.nav-dd-menu { position: absolute; right: 0; top: calc(100% + 14px); width: 310px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.98); box-shadow: 0 18px 40px rgba(20,32,46,.13); backdrop-filter: blur(10px); }
.nav-dd-menu a { display: block; padding: 11px 12px; border-radius: 9px; color: var(--ink); }
.nav-dd-menu a:hover { background: var(--surface-2); text-decoration: none; }
.nav-dd-menu strong { display: block; font-size: .9rem; }
.nav-dd-menu span { display: block; font-size: .78rem; color: var(--ink-soft); line-height: 1.35; margin-top: 2px; }
.lang-switch { border: 1px solid var(--line); border-radius: 99px; padding: 5px 14px; font-size: 0.82rem; font-weight: 700; color: var(--ink); background: #fff; }
.lang-switch:hover { border-color: var(--ink-soft); text-decoration: none; }
@media (max-width: 760px) {
  .site-header .wrap { height: 58px; gap: 8px; padding: 0 12px; }
  .logo { font-size: 1.08rem; gap: 6px; }
  .logo .bus-mini { width: 28px; }
  .main-nav { gap: 8px; min-width: 0; }
  .main-nav > a { display: none; }
  .nav-dd summary { border: 1px solid var(--line); border-radius: 99px; padding: 6px 11px; font-size: .82rem; }
  .nav-dd-menu { position: fixed; left: 14px; right: 14px; top: 66px; width: auto; max-height: calc(100vh - 88px); overflow: auto; }
  .lang-select { width: 58px; padding: 6px 8px; }
}
@media (max-width: 520px) {
  .wrap, .breadcrumbs { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; }
  .site-header .wrap { max-width: 100%; padding-left: 20px; padding-right: 20px; }
  .main-nav .lang-select { width: 52px; padding: 6px 4px; font-size: .78rem; }
  .prose h1 { font-size: 1.72rem; }
  .prose h2 { font-size: 1.28rem; line-height: 1.22; }
  .operator-context > *, .quick-answer > * { max-width: 100%; }
}

/* Breadcrumbs */
.breadcrumbs {
  max-width: 940px;
  font-size: 0.8rem;
  color: var(--ink-soft);
  padding: 14px 20px 0;
  display: flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
}
.breadcrumbs a { color: var(--ink-soft); }
.breadcrumbs span[aria-current] { color: var(--ink); font-weight: 600; }
.breadcrumbs .sep { margin: 0 7px; color: #C4C9CF; }
.breadcrumbs .bc-full {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hero */
.hero { padding: 22px 0 10px; }
.hero h1 { max-width: 720px; margin-bottom: 8px; }
.hero p.sub { max-width: 560px; color: var(--ink-soft); font-size: 1.06rem; margin-bottom: 30px; }
.eyebrow { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand-dark); margin-bottom: 10px; display: inline-block; }

/* Search card */
.search-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; align-items: end; max-width: 880px; }
.search-card label { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin: 2px 0 5px 4px; }
.search-card select, .search-card input { width: 100%; padding: 12px 14px; border: none; border-radius: var(--radius-sm); font-family: var(--font); font-size: 0.98rem; font-weight: 600; background: var(--surface); color: var(--ink); appearance: auto; }
.search-card select:focus, .search-card input:focus { outline: 2px solid var(--brand); }
.btn { display: inline-block; background: var(--brand); color: #fff; font-family: var(--font); font-weight: 800; font-size: 0.98rem; padding: 13px 26px; border-radius: var(--radius-sm); border: none; cursor: pointer; text-align: center; transition: background 0.15s; }
.btn:hover { text-decoration: none; background: var(--brand-dark); color: #fff; }
.btn-blue { background: var(--navy); color: #fff; }
.btn-blue:hover { background: #23344a; }
.btn-outline { background: #fff; border: 1.5px solid var(--line); color: var(--ink); }
.btn-outline:hover { border-color: var(--ink-soft); background: #fff; }
@media (max-width: 760px) { .search-card { grid-template-columns: 1fr; } }
.search-note { display: none; margin-top: 14px; background: var(--warn-bg); border-radius: var(--radius-sm); padding: 14px 16px; max-width: 880px; font-size: 0.92rem; }
.search-note.show { display: block; }
.search-note strong { display: block; margin-bottom: 4px; }

/* 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; } }

/* Sections */
section { padding: 36px 0; }
.section-sub { color: var(--ink-soft); max-width: 780px; margin-bottom: 16px; font-size: .96rem; }

/* Route cards (home) */
.route-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.route-card { background: #fff; border: 1.5px solid var(--line-strong); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 8px; transition: box-shadow 0.15s, transform 0.1s; box-shadow: 3px 3px 0 rgba(20,32,46,0.9); }
.route-card:hover { text-decoration: none; transform: translate(-1px,-1px); box-shadow: 5px 5px 0 rgba(20,32,46,0.9); }
.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: 0.68rem; 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; } }

/* 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; }

/* 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; }

/* ---------- Escena de carretera del hero ----------
   SVG + CSS puro, sin JS ni librerias: el hero es el LCP y no admite peso.
   Toda la animacion se apaga con prefers-reduced-motion sin perder la escena. */
.gg-scene { display: block; width: 100%; height: auto; }
.gg-dashes { animation: gg-dash 0.62s linear infinite; }
.gg-near { animation: gg-scroll-near 5.2s linear infinite; }
.gg-far { animation: gg-scroll-far 26s linear infinite; }
.gg-body { animation: gg-bob 1.5s ease-in-out infinite; }
.gg-dust { animation: gg-puff 1.5s ease-out infinite; }
.gg-dust2 { animation-delay: 0.45s; }
/* view-box hace que transform-origin se lea en coordenadas del viewBox,
   que es la unica forma fiable de girar una rueda sobre su propio eje. */
.gg-wheel { transform-box: view-box; animation: gg-spin 0.75s linear infinite; }
.gg-wheel-a { transform-origin: 166px 190px; }
.gg-wheel-b { transform-origin: 320px 190px; }

@keyframes gg-dash { to { transform: translateX(-54px); } }
@keyframes gg-scroll-near { to { transform: translateX(-160px); } }
@keyframes gg-scroll-far { to { transform: translateX(-240px); } }
@keyframes gg-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes gg-spin { to { transform: rotate(360deg); } }
@keyframes gg-puff {
  0% { transform: translateX(0) scale(0.6); opacity: 0.5; }
  100% { transform: translateX(-34px) scale(1.5); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .gg-scene * { animation: none !important; }
  .gg-dust { opacity: 0; }
}

/* 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: 1.5px solid var(--line); 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: .68rem; 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 { border-left: 3px solid var(--brand); padding: 2px 0 2px 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: 1.5px solid var(--line); 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: 0.68rem; 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; }
.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 { border-left: 3px solid var(--brand); padding: 2px 0 2px 16px; 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: 0.68rem; 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: 0.68rem; 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: 0.68rem; 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; }
.prose ul, .prose ol { margin: 0 0 14px 22px; }
.prose 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: 980px; }
.guide-shell .breadcrumbs { padding-top: 18px; }
.guide-article { margin-left: auto; margin-right: auto; }
.guide-article .guide-hero { padding: 24px 0 16px !important; }
.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: 980px; }
.resource-hero { padding: 22px 0 10px !important; }
.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); }

/* Footer */
.site-footer { background: var(--surface-2); border-top: 1px solid var(--line); color: var(--ink-soft); margin-top: 50px; padding: 0; font-size: 0.86rem; }
.site-footer .wrap { padding-top: 34px; 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(260px, 1.8fr) repeat(4, minmax(130px, 1fr)); gap: 24px; margin-bottom: 24px; }
.site-footer .logo { color: var(--ink); margin-bottom: 10px; }
.site-footer h4 { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-soft); margin-bottom: 12px; }
.site-footer ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-fine { border-top: 1px solid var(--line); padding-top: 16px; font-size: 0.74rem; color: #9AA2AB; display: flex; flex-direction: column; gap: 5px; }

/* Hero art */
.hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; align-items: center; }
.hero-art .bus-art { width: 100%; max-width: 340px; margin-left: auto; }
@media (max-width: 820px) { .hero-grid { grid-template-columns: 1fr; } .hero-art .bus-art { max-width: 220px; margin: 0; } }

/* 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: 1.5px solid var(--line); 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: 1.5px solid var(--line); 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: 1.5px solid var(--line-strong); border-radius: var(--radius); padding: 22px; box-shadow: 4px 4px 0 rgba(20,32,46,0.9); max-width: 560px; margin-top: 26px; }
.pax-select { padding: 12px 16px; border: 1.5px solid var(--line); 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: 0.68rem; color: var(--ink-soft); }
  .sticky-cta .btn { margin-left: auto; padding: 11px 18px; font-size: 0.92rem; }
  body.has-sticky { padding-bottom: 72px; }
}

/* ==== Landing v3: buscador protagonista ==== */
.hero-lp { padding: 48px 0 40px; background: linear-gradient(180deg, #F7FBF9 0%, #fff 100%); border-bottom: 1px solid var(--line); }
.hero-lp h1 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); margin-bottom: 10px; }
.hero-lp .sub { color: var(--ink-soft); font-size: 1.08rem; max-width: 520px; margin-bottom: 26px; }
.hero-lp .hero-grid { margin-bottom: 26px; }

.sc { background: #fff; border: 1.5px solid var(--line-strong); border-radius: 18px; box-shadow: 5px 5px 0 rgba(20,32,46,0.9); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.sc-row { display: flex; gap: 12px; align-items: stretch; }
.sc-od { align-items: center; }
.sc-field { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sc-field > span { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); padding-left: 2px; }
.sc-field select { width: 100%; padding: 14px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); font-family: var(--font); font-size: 1.02rem; font-weight: 700; background: #fff; color: var(--ink); }
.sc-field select:focus { outline: 2px solid var(--brand); border-color: var(--brand); }
.sc-pax { max-width: 130px; }
.sc-swap { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ink); align-self: flex-end; margin-bottom: 4px; }
.sc-swap:hover { background: var(--ink); color: #fff; }
.sc-swap svg { width: 18px; height: 18px; }
.sc-link { align-self: flex-start; background: none; border: none; color: var(--brand-dark); font-family: var(--font); font-weight: 800; font-size: 0.9rem; cursor: pointer; padding: 2px; }
.sc-link:hover { text-decoration: underline; }
.sc-cta { width: 100%; padding: 16px; font-size: 1.05rem; }
.sc-free { font-size: 0.82rem; color: var(--ink-soft); text-align: center; }
@media (max-width: 700px) {
  .sc-row { flex-direction: column; }
  .sc-swap { align-self: center; margin: -4px 0; transform: rotate(90deg); }
  .sc-pax { max-width: none; }
}
.steps-lp { padding: 40px 0 10px; }

/* ==== 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: 1.5px solid var(--line); 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: 1.5px solid var(--line-strong); 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; }

/* ==== Buscador y landing en móvil (patrón tarjeta agrupada) ==== */
@media (max-width: 700px) {
  .hero-lp { padding: 26px 0 30px; }
  .hero-lp h1 { font-size: 1.72rem; margin-bottom: 8px; }
  .hero-lp .sub { font-size: 0.98rem; margin-bottom: 18px; }
  .hero-lp .hero-grid { margin-bottom: 16px; gap: 14px; }
  .hero-lp .hero-art { display: none; }

  .sc { padding: 12px; gap: 10px; border-radius: 16px; box-shadow: 3px 3px 0 rgba(20,32,46,0.9); }

  /* Origen y destino: una sola tarjeta con separador y swap a la derecha */
  .sc-od { position: relative; flex-direction: column; gap: 0; background: var(--surface); border-radius: 12px; padding: 4px 52px 4px 14px; }
  .sc-od .sc-field { flex-direction: row; align-items: center; gap: 10px; padding: 9px 0; }
  .sc-od .sc-field + .sc-field { border-top: 1px solid #E3E6EA; }
  .sc-od .sc-field > span { width: 54px; flex: none; font-size: 0.7rem; padding: 0; }
  .sc-od .sc-field select { border: none; background: none; padding: 0; font-size: 1.05rem; font-weight: 800; }
  .sc-od .sc-field select:focus { outline: none; text-decoration: underline; }
  .sc-swap { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); margin: 0; width: 34px; height: 34px; background: #fff; }

  /* Fechas y personas: tarjeta de dos columnas */
  .sc-dates { flex-direction: row; flex-wrap: wrap; gap: 0; background: var(--surface); border-radius: 12px; padding: 4px 14px; }
  .sc-dates .sc-field { flex-direction: row; align-items: center; gap: 10px; padding: 9px 0; min-width: 100%; }
  .sc-dates .sc-field + .sc-field { border-top: 1px solid #E3E6EA; }
  .sc-dates .sc-field > span { width: 88px; flex: none; font-size: 0.7rem; padding: 0; }
  .sc-dates .sc-field select { border: none; background: none; padding: 0; font-size: 1.02rem; font-weight: 800; }
  .sc-dates .sc-field select:focus { outline: none; text-decoration: underline; }
  .sc-pax { max-width: none; }

  .sc-cta { padding: 15px; font-size: 1rem; }
  .steps-lp { padding: 26px 0 4px; gap: 10px; }
  .steps-lp .step { padding: 16px; }

  /* Listado de rutas más corto en móvil */
  .route-grid { gap: 10px; }
  .route-card { padding: 16px; }
  .routes-more { display: block; width: 100%; margin-top: 12px; }
}
@media (min-width: 701px) { .routes-more { display: none; } }
.routes-more { background: #fff; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); font-family: var(--font); font-weight: 800; font-size: 0.95rem; padding: 13px; cursor: pointer; color: var(--ink); }

/* 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: 1.5px solid var(--line-strong); } }
.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: 0.66rem; 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: 0.7rem; 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: 1.5px solid var(--line); 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.remove { background: var(--surface-2); color: var(--ink-soft); }

.times { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.time-chip { border: 1.5px solid var(--line); 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: 1.5px solid var(--line-strong); border-radius: var(--radius); padding: 22px; box-shadow: 4px 4px 0 rgba(20,32,46,0.9); 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: 3px 3px 0 rgba(20,32,46,0.9); }
  .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: 2px solid var(--line-strong); border-bottom: 2px solid var(--line-strong); }
  .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 { border-left: 3px solid var(--brand); padding: 2px 0 2px 16px; 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: 1.5px solid var(--line-strong); border-radius: var(--radius); padding: 10px; margin: 6px 0 26px; box-shadow: 4px 4px 0 rgba(20,32,46,0.9); }
.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); }
@media (max-width: 980px) { .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; } .footer-grid > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 620px) {
  .site-footer { margin-top: 36px; }
  .site-footer .wrap { padding: 24px 20px 18px; }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
    row-gap: 0;
    margin-bottom: 18px;
  }
  .footer-grid > div:first-child {
    grid-column: 1 / -1;
    padding-bottom: 18px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
  }
  .footer-grid > div:not(:first-child) { padding: 14px 0; }
  .site-footer .logo { margin-bottom: 8px; }
  .site-footer h4 { margin-bottom: 8px; font-size: 0.68rem; }
  .site-footer ul { gap: 7px; }
  .footer-fine { padding-top: 14px; line-height: 1.45; }
}
@media (max-width: 380px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > div:not(:first-child) { border-bottom: 1px solid var(--line); }
  .footer-grid > div:last-child { border-bottom: none; }
}

/* 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); }
.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: 1.5px solid var(--line-strong); border-radius: var(--radius); box-shadow: 4px 4px 0 rgba(20,32,46,0.9); 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; }

/* Selector de idioma */
.lang-select { border: 1px solid var(--line); border-radius: 99px; padding: 5px 10px; font-family: var(--font); font-size: 0.82rem; font-weight: 700; color: var(--ink); background: #fff; cursor: pointer; }

/* 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; }
/* Movil: la miga completa se sale de pantalla, asi que se colapsa a un unico
   enlace "volver al nivel anterior". El rastro entero sigue en el HTML (SEO) */
.bc-back { display: none; }
@media (max-width: 760px) {
  .breadcrumbs {
    width: 100%;
    max-width: 100%;
    font-size: 0.94rem;
    padding: 8px 20px;
    margin: 0;
    border-bottom: 1px solid var(--line);
    background: #fff;
  }
  .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; text-decoration: none;
    padding: 8px 12px 8px 6px; margin-left: -6px; border-radius: 99px;
  }
  .breadcrumbs .bc-back:active { background: var(--surface); }
  .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; }
}

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

/* Hero landing: buscador a la izquierda, texto y guagua a la derecha */
.hero-duo { display: grid; grid-template-columns: minmax(380px, 480px) minmax(0, 1fr); gap: 48px; align-items: center; }
.hero-duo .hero-copy { order: 2; min-width: 0; }
.hero-duo .hero-copy .sub { max-width: none; }
.hero-duo .sc { order: 1; margin: 0; }
.hero-duo .hero-copy h1 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.hero-duo .hero-copy .hero-art { display: block; margin-top: 26px; max-width: 520px; }
.hero-duo .hero-copy .bus-art { max-width: 260px; margin: 0; }
@media (max-width: 900px) {
  .hero-duo { grid-template-columns: 1fr; gap: 18px; }
  /* La caja de consulta PRIMERO: es lo que la gente viene a hacer. El titular y
     las rutas mas pedidas quedan debajo. El reclamo y el subtitulo son texto de
     escaparate y en una pantalla de movil solo empujan el formulario. */
  .hero-duo .sc { order: 1; }
  .hero-duo .hero-copy { order: 2; }
  .hero-duo .hero-copy .hero-art { display: none; }
  .hero-duo .hero-claim, .hero-duo .hero-copy .sub { display: none; }
  /* El boton se ha ido a la barra fija, asi que la tarjeta terminaba en dos
     lineas de texto sueltas y sin accion. Se queda UNA sola promesa, la del
     tiempo de respuesta, y la tarjeta cierra limpia. */
  .hero-duo .sc { gap: 10px; padding: 16px 14px; }
  .hero-duo .sc-free { display: none; }
  .hero-duo .sc .reply-badge { margin: 0; }
  .hero-duo .sc > p:last-child { margin-top: 2px !important; }
  .hero-duo .hero-copy h1 { font-size: 1.25rem; margin: 0 0 10px; }
  .hero-lp { padding-top: 14px; }
}

/* Buscador: fechas apiladas como Trainline (SOLO escritorio; movil ya apila) */
@media (min-width: 901px) {
  .sc .sc-dates { flex-direction: column; }
  .sc .sc-dates .sc-pax { max-width: none; }
}

/* Buscador mas estrecho, Desde arriba y Hasta debajo (SOLO escritorio) */
@media (min-width: 901px) {
  .hero-duo { grid-template-columns: minmax(330px, 400px) minmax(0, 1fr); }
  .sc .sc-od { position: relative; flex-direction: column; gap: 10px; }
  .sc .sc-od .sc-swap { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); margin: 0; align-self: auto; background: #fff; z-index: 2; }
  .sc .sc-od .sc-field { padding-right: 0; }
}

/* 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: 1.5px solid var(--line); 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: 3px 3px 0 rgba(20,32,46,0.9); }
.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: 1.5px solid var(--line); 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: .66rem; 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: 0.68rem; 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: 901px) { .compare-card-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }

.compare-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1.5px solid var(--line);
  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: 0.68rem;
  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: 0.66rem;
  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: 0.7rem; 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; }
}

/* Claim con keyword sobre el H1 de la home */
.hero-claim { font-size: 0.95rem; font-weight: 700; color: var(--brand-dark); margin-bottom: 10px; line-height: 1.35; }
@media (max-width: 700px) { .hero-claim { font-size: 0.88rem; margin-bottom: 8px; } }

/* 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: 1.5px solid var(--line-strong); border-radius: var(--radius); box-shadow: 4px 4px 0 rgba(20,32,46,0.9); 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; } }

/* Breadcrumb movil: estable, sin overlay ni salto visual */
@media (max-width: 900px) {
  .breadcrumbs {
    position: static;
    top: auto;
    z-index: auto;
    transform: none;
    opacity: 1;
  }
  body.bc-hidden .breadcrumbs { transform: none; opacity: 1; pointer-events: auto; }
}

/* Hero mas compacto en movil: mas contenido sobre el pliegue */
@media (max-width: 700px) {
  .hero-claim { font-size: 0.82rem; line-height: 1.35; margin-bottom: 8px; }
  .hero-copy h1 { font-size: 1.72rem; line-height: 1.16; }
  .hero-copy .sub { font-size: 0.97rem; line-height: 1.45; margin-top: 8px; }
  .hero-lp { padding-top: 14px; }
}

/* Claim del hero: version corta solo en movil */
.hero-claim .hc-short { display: none; }
@media (max-width: 700px) {
  .hero-claim .hc-full { display: none; }
  .hero-claim .hc-short { display: inline; }
}

/* El boton de volver ya trae su propia zona tactil: la barra no necesita tanto aire */
@media (max-width: 760px) {
  .breadcrumbs { padding-top: 4px; padding-bottom: 4px; }
}

/* 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: 1.5px solid var(--line); 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; }
@media (max-width: 700px) {
  .route-grid.list .route-card { grid-template-columns: 1fr auto; }
  .route-grid.list .rc-cities { grid-column: 1 / -1; }
  .route-grid.list .rc-chips { display: none; }
  .route-grid.list .rc-price { align-items: flex-end; }
}

/* 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; }

/* Hero: rutas mas pedidas en vez de ilustracion */
.hero-routes { list-style: none; padding: 0; margin: 18px 0 0; }
.hero-routes li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .93rem; }
.hero-routes a { font-weight: 700; color: var(--ink); }
.hero-routes span { color: var(--ink-soft); font-size: .82rem; white-space: nowrap; }
@media (max-width: 560px) { .hero-routes { grid-template-columns: 1fr; } }

/* 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: .68rem; 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: 1.5px solid var(--line); 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: 1.5px solid var(--line-strong); font-size: .68rem; 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 { padding: 9px 10px; font-size: .88rem; 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: 1.5px solid var(--line-strong); 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: 1.5px solid var(--line-strong);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 16px rgba(20,32,46,.10); }
  .cta-bar .btn { flex: 1 1 auto; padding: 14px 16px; }
  .cta-price { display: flex; flex-direction: column; line-height: 1.15; flex: 0 0 auto; }
  .cta-price span { font-size: .68rem; 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: .66rem; 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: 1.5px solid var(--line-strong); border-radius: var(--radius); box-shadow: 4px 4px 0 rgba(20,32,46,0.9); 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: .68rem; 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: .66rem; }
  .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; }
  .sc-field select, .sc-field input { min-height: 44px; padding: 0 4px; }
  .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: .7rem; 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 funnel: shared frame, quiet forms and visible itinerary context. */
.public-page { font-weight: 400; }
.public-page :is(h1, h2, h3, h4, .logo, .eyebrow, .trip-label, .steps-bar, .cta-price, .cta-route) { letter-spacing: 0; }
.public-page :is(h1, h2, h3, h4) { font-weight: 600; }
.public-page :is(.btn, .return-link, .sc-field select, .trip-row select, .book-fields select, .nav-dd summary, .rc-cities, .hero-routes a) { font-weight: 600; }
.public-page :is(.dp-btn, .sc-link, .sc-field > span, .trip-label, .sum-date, .sum-time, .assist-head, .fact .f-value, .quick-answer .qa-label, .city-card strong, .date-chip strong, .sum-bd-row span) { font-weight: 600; letter-spacing: 0; }
.public-page :is(.resource-card, .book-summary) { border: 1px solid var(--line); border-radius: 8px; box-shadow: none; }
.public-page .cities-h1 { font-size: 2rem; }
.public-page .lead2-main h1 { font-size: 2rem; }
.public-page :is(.sc, .offer, .lead2-side, .step2-card, .route-card, .map-wrap, .map-real, .report-box) {
  border: 1px solid var(--line); border-radius: 8px; box-shadow: none;
}
.public-page :is(.route-card:hover, .city-card:hover) { transform: none; box-shadow: none; }
.public-page :is(.nav-dd-menu, .nav-dd-menu a, .dp-pop, .dp-btn, .dp-d, .trip-card, .map-one, .sc-od, .sc-dates) { border-radius: 8px; }
.public-page :is(.sc-field select, .book-fields input, .book-fields select, .offer-main, .return-link, .date-chip, .view-toggle button, .cta-bar) { border-width: 1px; }
.public-page :is(.step, .quick-answer, .operator-context, .cta-soft, .guarantee) {
  border-radius: 0; border-left: 0; border-right: 0; box-shadow: none;
}
.public-page .quick-answer { margin: 8px 0 16px; padding: 12px 0; background: transparent; }
.public-page .quick-answer p { margin: 0; }
.public-page .lead2-side .lead2-summary { padding: 0; border: 0; border-radius: 0; background: transparent; }
.public-page .offer-buy { background: transparent; }
.public-page .offer-main { border-top-color: var(--line); }
.public-page .lead2-step2 h1 { font-size: 1.5rem; }
.public-page .hero-duo .hero-copy h1 { font-size: 2rem; }
.public-page .guide-article .guide-hero h1 { font-size: 1.9rem; }
.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 .site-header .wrap, .public-page .site-footer .wrap { max-width: 980px; }
.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; }
.footer-group summary { color: var(--ink); font-weight: 600; min-height: 40px; cursor: pointer; }
.footer-group ul { margin-top: 8px; }
.public-page .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 16px 24px; }
.public-page .footer-grid > .footer-brand { grid-column: auto; }
.public-page .footer-legal ul, .public-page .footer-contact ul, .checkout-footer ul { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px 20px; }
.public-page .footer-legal { grid-column: 1 / -1; }
.public-page .footer-contact { grid-column: 1 / -1; }
.public-page .site-footer a { display: inline-flex; align-items: center; min-height: 40px; }
.checkout-footer { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.checkout-footer .footer-legal { flex-basis: 100%; }
.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 .hero-duo .hero-copy h1 { font-size: 1.5rem; }
  .public-page .lead2-step2 h1 { font-size: 1.25rem; }
  .public-page .lead2-main h1, .public-page .cities-h1 { font-size: 1.5rem; }
  .public-page .dp-pop { border-radius: 8px 8px 0 0; }
  .public-page .cta-bar { border-color: var(--line); box-shadow: none; }
  .public-page .sc-od, .public-page .sc-dates { background: transparent; padding-left: 0; }
  .public-page .step2-card { padding: 16px; }
}
@media (max-width: 700px) {
  .public-page .site-header .wrap { width: 100%; max-width: 100%; padding-left: 20px; padding-right: 20px; }
  .public-page .footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; }
  .public-page .footer-grid > .footer-brand { grid-column: 1 / -1; padding: 0 0 8px; border: 0; }
  .public-page .footer-grid > div:not(:first-child) { padding: 8px 0 0; border: 0; }
  .public-page .footer-grid > .footer-group { grid-column: 1 / -1; border-top: 1px solid var(--line); padding: 4px 0; }
  .public-page .footer-group ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
  .public-page .footer-brand p { max-width: 100%; }
  .public-page .footer-grid { margin-bottom: 12px; }
  .public-page .site-footer h4 { margin-bottom: 0; }
  .public-page .footer-fine { padding-top: 12px; }
  .public-page .confirmation-example dl { gap: 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; }
}