:root {
  --noche: #0d0a1c;
  --noche-2: #161230;
  --noche-3: #211b45;
  --linea: #342c66;
  --texto: #f4f1ff;
  --texto-suave: #b7aee0;
  --rosa: #ff4fa3;
  --rosa-suave: #ff4fa31f;
  --violeta: #8b5cf6;
  --lima: #c6ff4f;
  --lima-suave: #c6ff4f1a;
  --ocupado: #2a2350;
  --radio: 16px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
::selection { background: var(--rosa); color: var(--noche); }
html { scrollbar-color: var(--linea) var(--noche); caret-color: var(--rosa); }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--noche); color: var(--texto);
  font-family: "DM Sans", system-ui, sans-serif; font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2, h3, .display { font-family: "Unbounded", sans-serif; line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; }
.precio, .ahora, .total b, .precio-fila, .fila-n, .asiento, #cant, .barra .info b { font-variant-numeric: tabular-nums; }
a { color: inherit; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.suave { color: var(--texto-suave); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--rosa); color: var(--noche); font: inherit; font-weight: 700; font-size: 16px;
  padding: 15px 26px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, opacity 200ms ease;
}
@media (hover: hover) and (pointer: fine) { .btn:hover { background: #ff6bb3; } }
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .35; cursor: not-allowed; transform: none; }
.btn.secundario { background: transparent; border: 1px solid var(--linea); color: var(--texto); }
:focus-visible { outline: 3px solid var(--lima); outline-offset: 2px; }

.logo { font-family: "Unbounded"; font-weight: 800; font-size: 20px; letter-spacing: -.02em; text-decoration: none; }
.logo span { color: var(--rosa); }

/* ---------- Portada ---------- */
.hero { position: relative; padding: 56px 0 72px; overflow: hidden; }
.hero::before { content: ""; position: absolute; right: -240px; top: -200px; width: 720px; height: 720px;
  background: radial-gradient(circle, #8b5cf644 0%, transparent 60%); pointer-events: none; }
.hero .wrap { position: relative; }
.hero h1 { font-size: clamp(36px, 6.4vw, 70px); font-weight: 800; margin: 14px 0 18px; max-width: 820px; }
.hero h1 em { font-style: normal; color: var(--rosa); }
.hero .lead { font-size: 19px; color: var(--texto-suave); max-width: 560px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 30px; }
.chip { background: var(--noche-3); border: 1px solid var(--linea); border-radius: 999px; padding: 8px 14px; font-size: 14px; }
.chip b { color: var(--lima); }

section { padding: 64px 0; }
.titulo { max-width: 660px; margin-bottom: 32px; }
.titulo h2 { font-size: clamp(26px, 4vw, 40px); margin-top: 10px; }
.titulo p { color: var(--texto-suave); margin-top: 10px; font-size: 17px; }

.rutas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ruta-card { background: var(--noche-2); border: 1px solid var(--linea); border-radius: var(--radio); padding: 24px;
  display: flex; flex-direction: column; gap: 14px; text-decoration: none; transition: border-color 200ms ease, transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .ruta-card:hover { border-color: var(--violeta); } }
.ruta-card:active { transform: scale(.985); }
.ruta-card .origen { font-size: 13px; color: var(--texto-suave); font-weight: 700; }
.ruta-card h3 { font-size: 21px; }
.ruta-card .desde-precio { font-size: 13px; color: var(--texto-suave); }
.ruta-card .precio { font-family: "Unbounded"; font-size: 28px; font-weight: 700; color: var(--lima); }
.ruta-card .ir { margin-top: auto; font-weight: 700; color: var(--rosa); display: inline-flex; align-items: center; gap: 6px; }
.ruta-card .ir svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .ruta-card:hover .ir svg { transform: translateX(3px); } }

.linea-mini { display: grid; gap: 4px; font-size: 14px; }
.linea-mini div { display: flex; gap: 10px; }
.linea-mini b { min-width: 52px; }

.incluye-bloque { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: start; }
.incluye-bloque .titulo { margin: 0; }
.incluye { list-style: none; border-top: 1px solid var(--linea); }
.incluye li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--linea); }
.incluye svg { width: 26px; height: 26px; stroke: var(--rosa); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.incluye b { display: block; font-size: 17px; margin-bottom: 2px; }
.incluye span { color: var(--texto-suave); font-size: 15px; }

.faq { max-width: 760px; }
details { border-bottom: 1px solid var(--linea); padding: 18px 0; }
summary { cursor: pointer; font-weight: 700; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-family: "Unbounded"; color: var(--rosa); transition: transform .2s; }
details[open] summary::after { transform: rotate(45deg); }
details p { color: var(--texto-suave); margin-top: 10px; }


/* ---------- Página de ruta ---------- */
.ruta-hero { padding: 24px 0 40px; }
.ruta-hero h1 { font-size: clamp(30px, 5vw, 54px); margin: 12px 0 14px; }
.ruta-hero h1 span { color: var(--rosa); }
.quedan { display: inline-flex; align-items: center; gap: 8px; background: var(--rosa-suave); color: var(--rosa);
  border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: 14px; }
.quedan::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rosa); }

.tarifas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 28px; }
.tarifa { background: var(--noche-2); border: 1px solid var(--linea); border-radius: 14px; padding: 16px; position: relative; }
.tarifa .quien { font-size: 13px; color: var(--texto-suave); font-weight: 700; }
.tarifa .antes { font-size: 13px; color: var(--texto-suave); text-decoration: line-through; margin-top: 6px; min-height: 20px; }
.tarifa .ahora { font-family: "Unbounded"; font-size: 20px; font-weight: 700; }
.tarifa .cu { font-size: 12px; color: var(--texto-suave); }
.tarifa .off { position: absolute; top: 12px; right: 12px; background: var(--lima); color: var(--noche);
  font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; }
.tarifa { transition: border-color 200ms ease, background-color 200ms ease; }
.tarifa.activa { border-color: var(--lima); background: var(--lima-suave); }
.tarifas-t { font-family: "Unbounded"; font-size: 17px; margin-top: 8px; }
.anticipado { display: flex; align-items: center; gap: 12px; margin-top: 12px; border: 1px dashed var(--lima); border-radius: 14px; padding: 14px 16px; font-size: 15px; }
.anticipado svg { width: 22px; height: 22px; stroke: var(--lima); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.anticipado b { color: var(--lima); }

/* ---------- Checkout ---------- */
.checkout > * { min-width: 0; }
.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; padding-bottom: 40px; }
.paso { background: var(--noche-2); border: 1px solid var(--linea); border-radius: var(--radio); padding: 22px; margin-bottom: 16px; }
.paso-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.num { width: 30px; height: 30px; border-radius: 8px; background: var(--lima); color: var(--noche);
  display: grid; place-items: center; font-family: "Unbounded"; font-weight: 800; font-size: 15px; flex-shrink: 0; }
.paso-cab h2 { font-size: 19px; }
.oblig { font-size: 13px; color: var(--texto-suave); margin: -6px 0 14px; }

.contador { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.contador .ctrl { display: flex; align-items: center; border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; }
.contador button { width: 44px; height: 42px; background: transparent; border: 0; color: var(--texto); font-size: 22px; cursor: pointer; }
.contador button:disabled { opacity: .3; cursor: not-allowed; }
.contador output { width: 44px; text-align: center; font-weight: 700; font-size: 17px; border-inline: 1px solid var(--linea); line-height: 42px; }

.pasajero { border-top: 1px dashed var(--linea); padding-top: 14px; margin-top: 14px; }
.pasajero:first-of-type { border: 0; padding-top: 0; margin-top: 0; }
.pasajero-t { font-size: 13px; font-weight: 700; color: var(--texto-suave); margin-bottom: 10px; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.campo { position: relative; }
.campo label { position: absolute; top: -8px; left: 12px; background: var(--noche-2); padding: 0 6px; font-size: 12px; color: var(--texto-suave); }
.campo input { width: 100%; min-width: 0; background: transparent; border: 1px solid var(--linea); border-radius: 10px;
  padding: 14px 14px 12px; color: var(--texto); font: inherit; }
.campo input:focus { border-color: var(--violeta); outline: none; }
.campo input[aria-invalid="true"] { border-color: var(--rosa); }
.campo input::placeholder { color: #8a80bd; }
.campo.completo { grid-column: 1 / -1; }

.fila-accion { display: flex; align-items: center; gap: 14px; width: 100%; border: 1px solid var(--linea);
  border-radius: 12px; padding: 14px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .fila-accion:hover { border-color: var(--violeta); } }
.fila-accion { transition: border-color 200ms ease, transform 160ms var(--ease-out); }
.fila-accion:active { transform: scale(.99); }
.fila-accion .t { font-weight: 700; }
.fila-accion .gratis { color: var(--lima); font-size: 14px; font-weight: 700; }
.fila-accion .flecha { margin-left: auto; width: 20px; height: 20px; stroke: var(--texto-suave); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ico-asiento { width: 40px; height: 40px; flex-shrink: 0; }

.lista-incluye { border: 1px solid var(--linea); border-radius: 12px; }
.lista-incluye > div { display: flex; gap: 14px; padding: 14px; align-items: flex-start; }
.lista-incluye > div + div { border-top: 1px solid var(--linea); }
.lista-incluye svg { width: 26px; height: 26px; stroke: var(--lima); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; margin-top: 2px; }
.lista-incluye b { display: block; }
.lista-incluye span { font-size: 14px; color: var(--texto-suave); }

.opciones { display: grid; gap: 10px; }
.opcion { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--linea); border-radius: 12px; padding: 14px; cursor: pointer; }
.opcion:has(input:checked) { border-color: var(--lima); background: var(--lima-suave); }
.opcion input { accent-color: var(--lima); width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; }
.opcion b { display: flex; align-items: center; gap: 8px; }
.opcion .off { background: var(--lima); color: var(--noche); font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.opcion { transition: border-color 200ms ease, background-color 200ms ease; }
.opcion span { font-size: 14px; color: var(--texto-suave); }
.metodos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.metodo { border: 1px solid var(--linea); border-radius: 999px; padding: 9px 16px; font-weight: 700; font-size: 14px; cursor: pointer; }
.metodo:has(input:checked) { background: var(--texto); color: var(--noche); border-color: var(--texto); }
.metodo input { position: absolute; opacity: 0; pointer-events: none; }
.aviso { font-size: 13px; color: var(--texto-suave); margin-top: 12px; }

/* Resumen */
.resumen { background: var(--noche-2); border: 1px solid var(--linea); border-radius: var(--radio); padding: 22px; position: sticky; top: 16px; }
.resumen h2 { font-size: 18px; margin-bottom: 16px; }
.tramo { margin-bottom: 18px; }
.tramo-fecha { font-size: 13px; font-weight: 700; color: var(--lima); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; }
.timeline { display: grid; grid-template-columns: 52px 18px 1fr; row-gap: 0; font-size: 14px; }
.timeline .hora { font-weight: 700; }
.timeline .punto { position: relative; display: flex; justify-content: center; }
.timeline .punto::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--rosa); background: var(--noche-2); margin-top: 5px; z-index: 1; }
.timeline .punto.linea::after { content: ""; position: absolute; top: 15px; bottom: -5px; width: 2px; background: var(--linea); }
.timeline .lugar { padding-bottom: 14px; }
.timeline .lugar small { display: block; color: var(--texto-suave); font-size: 12px; }
.precio-fila { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; padding: 7px 0; }
.precio-fila .tachado { text-decoration: line-through; color: var(--texto-suave); margin-right: 6px; font-size: 13px; }
.precio-fila.desc { color: var(--lima); font-weight: 700; }
.separador { border-top: 1px solid var(--linea); margin: 10px 0; }
.total { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; }
.total span { font-weight: 700; }
.total b { font-family: "Unbounded"; font-size: 24px; color: var(--texto); }
.hoy { background: var(--rosa-suave); border-radius: 12px; padding: 12px 14px; margin: 12px 0 16px; font-size: 14px; }
.hoy .precio-fila { padding: 2px 0; }
.hoy b { color: var(--rosa); }
.resumen .btn { width: 100%; }
.resumen .nota { font-size: 12px; color: var(--texto-suave); text-align: center; margin-top: 10px; }
.error { color: var(--rosa); font-size: 13px; margin-top: 10px; text-align: center; min-height: 18px; }

/* Barra inferior */
.barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: #0d0a1cf2; backdrop-filter: blur(10px);
  border-top: 1px solid var(--linea); padding: 12px 16px; display: none; align-items: center; justify-content: space-between; gap: 12px; }
.barra .info { font-size: 13px; color: var(--texto-suave); line-height: 1.3; }
.barra .info b { display: block; color: var(--texto); font-size: 17px; }
.barra .btn { padding: 13px 22px; font-size: 15px; }

/* ---------- Modal de asientos ---------- */
.modal { position: fixed; inset: 0; z-index: 50; background: #06040fcc; display: none; align-items: center; justify-content: center; padding: 16px; }
.modal.abierto { display: flex; }
.modal { transition: opacity 200ms ease; }
.modal-caja { transition: transform 240ms var(--ease-out), opacity 200ms ease; }
@starting-style { .modal.abierto { opacity: 0; } .modal.abierto .modal-caja { opacity: 0; transform: translateY(12px) scale(.97); } }
.modal-caja { background: var(--noche-2); border: 1px solid var(--linea); border-radius: 20px; width: 100%; max-width: 440px;
  max-height: calc(100vh - 32px); display: flex; flex-direction: column; overflow: hidden; }
.modal-cab { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--linea); }
.modal-cab h2 { font-size: 17px; }
.modal-cab small { display: block; color: var(--texto-suave); font-size: 13px; font-family: "DM Sans"; font-weight: 500; }
.cerrar { background: transparent; border: 0; color: var(--texto); cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; transition: background-color 200ms ease; }
.cerrar svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; }
@media (hover: hover) and (pointer: fine) { .cerrar:hover { background: var(--noche-3); } }
.modal-leyenda { display: flex; justify-content: center; gap: 16px; padding: 12px; font-size: 12px; color: var(--texto-suave); border-bottom: 1px solid var(--linea); flex-wrap: wrap; }
.modal-leyenda i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 5px; }
.modal-cuerpo { overflow-y: auto; padding: 18px; }
.modal-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--linea); }
.modal-pie .info { font-size: 13px; color: var(--texto-suave); }
.modal-pie .info b { display: block; color: var(--lima); font-size: 15px; }

.bus { border: 2px solid var(--linea); border-radius: 44px 44px 20px 20px; padding: 18px 16px 16px; max-width: 320px; margin: 0 auto; }
.bus-frente { display: flex; justify-content: space-between; align-items: center; padding: 0 4px 12px; margin-bottom: 12px; border-bottom: 1px dashed var(--linea); }
.volante { width: 30px; height: 30px; border: 3px solid var(--texto-suave); border-radius: 50%; position: relative; }
.volante::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--texto-suave); transform: translate(-50%, -50%); }
.bus-frente span { font-size: 11px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.asientos { display: grid; grid-template-columns: 1fr 1fr 30px 1fr 1fr; gap: 8px; align-items: center; }
.fila-n { text-align: center; font-size: 12px; color: var(--texto-suave); font-weight: 700; }
.asiento { aspect-ratio: 1; border-radius: 12px 12px 6px 6px; border: 1.5px solid var(--violeta); background: transparent;
  color: var(--texto); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, transform 160ms var(--ease-out); display: grid; place-items: center; }
@media (hover: hover) and (pointer: fine) { .asiento:hover:not(:disabled) { background: #8b5cf633; } }
.asiento:active:not(:disabled) { transform: scale(.94); }
.asiento svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.asiento[aria-pressed="true"] { background: var(--rosa); border-color: var(--rosa); color: var(--noche); }
.asiento:disabled { background: var(--ocupado); border-color: var(--ocupado); color: #6b62a3; cursor: not-allowed; }
.asiento.indiv { border-style: dashed; }
.zona { border: 1px dashed var(--linea); border-radius: 10px; font-size: 10px; color: var(--texto-suave);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 700; display: grid; place-items: center; align-self: stretch; }


/* =================== Sitio completo =================== */
a { text-underline-offset: 3px; }
.saltar { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--lima); color: var(--noche);
  padding: 10px 16px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.saltar:focus { top: 12px; }
.btn-sm { padding: 10px 18px; font-size: 14px; }
.btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pendiente { background: var(--rosa-suave); color: var(--rosa); border-radius: 6px; padding: 0 6px; font-weight: 700; }

/* Cabecera */
.cabecera { position: sticky; top: 0; z-index: 30; background: #0d0a1ce6; backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linea); }
.cabecera-in { display: flex; align-items: center; gap: 24px; height: 68px; }
.menu { display: flex; gap: 4px; margin-left: auto; }
.menu a { text-decoration: none; font-weight: 500; font-size: 15px; padding: 8px 12px; border-radius: 10px; color: var(--texto-suave);
  transition: color 150ms ease, background-color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .menu a:hover { color: var(--texto); background: var(--noche-3); } }
.menu a[aria-current="page"] { color: var(--texto); }
.burger { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--linea);
  background: transparent; color: var(--texto); cursor: pointer; place-items: center; }
.burger svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; }

/* Portada */
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.sec-rutas { padding-top: 16px; }
.pasos-lista { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--linea); }
.pasos-lista li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 24px 24px 24px 0; }
.pasos-lista li + li { border-left: 1px solid var(--linea); padding-left: 24px; }
.pasos-lista svg, .valores svg, .canal > svg { width: 28px; height: 28px; stroke: var(--lima); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pasos-lista b { display: block; font-size: 17px; margin-bottom: 4px; }
.pasos-lista span { color: var(--texto-suave); font-size: 15px; }
.enlace { display: inline-flex; align-items: center; gap: 8px; color: var(--rosa); font-weight: 700; text-decoration: none; margin-top: 20px; }
.enlace svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .enlace:hover svg { transform: translateX(3px); } }
.cierre { text-align: center; padding: 88px 0; }
.cierre h2 { font-size: clamp(32px, 5vw, 56px); margin-bottom: 24px; }
.cierre em { font-style: normal; color: var(--rosa); }

/* Páginas internas */
.pag-hero { padding: 56px 0 40px; }
.pag-hero h1 { font-size: clamp(34px, 5.5vw, 60px); font-weight: 800; max-width: 860px; }
.pag-hero h1 em { font-style: normal; color: var(--rosa); }
.pag-hero .lead { font-size: 18px; color: var(--texto-suave); max-width: 640px; margin-top: 16px; }
.pag-hero .lead a { color: var(--rosa); }
.pag-hero.centro { text-align: center; padding: 120px 0; }
.pag-hero.centro .lead { margin: 16px auto 28px; }
.actualizado { font-size: 13px; color: var(--texto-suave); margin-top: 14px; }
section.sin-top { padding-top: 8px; }

.indice-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.indice-chips a { text-decoration: none; font-weight: 700; font-size: 14px; border: 1px solid var(--linea); padding: 8px 14px; border-radius: 999px;
  transition: border-color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .indice-chips a:hover { border-color: var(--violeta); } }

.ayuda { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; align-items: start; padding-bottom: 72px; }
.ayuda-grupo { padding: 0 0 40px; grid-column: 1; scroll-margin-top: 88px; }
.ayuda-grupo h2 { font-size: 22px; margin-bottom: 4px; }
.ayuda-legal { grid-column: 2; grid-row: 1 / span 4; position: sticky; top: 92px; background: var(--noche-2); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 20px; display: grid; gap: 4px; }
.ayuda-legal h2 { font-size: 15px; margin-bottom: 8px; }
.ayuda-legal a { display: flex; align-items: center; gap: 10px; padding: 10px 0; text-decoration: none; font-size: 15px; }
.ayuda-legal a + a { border-top: 1px solid var(--linea); }
.ayuda-legal svg { width: 20px; height: 20px; stroke: var(--lima); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

.linea-tiempo { list-style: none; max-width: 760px; }
.linea-tiempo li { display: grid; grid-template-columns: 52px 1fr; gap: 20px; position: relative; padding-bottom: 32px; }
.linea-tiempo li:not(:last-child)::before { content: ""; position: absolute; left: 25px; top: 52px; bottom: 0; width: 2px; background: var(--linea); }
.lt-ico { width: 52px; height: 52px; border-radius: 16px; background: var(--noche-2); border: 1px solid var(--linea); display: grid; place-items: center; }
.lt-ico svg { width: 24px; height: 24px; stroke: var(--rosa); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.linea-tiempo h2 { font-size: 19px; margin: 12px 0 6px; }
.linea-tiempo p { color: var(--texto-suave); max-width: 62ch; }

.evento { display: flex; gap: 20px; align-items: center; margin-bottom: 20px; }
.evento-fecha { width: 76px; height: 76px; border-radius: 18px; background: var(--rosa); color: var(--noche); display: grid; place-content: center; text-align: center; flex-shrink: 0; }
.evento-fecha b { font-family: "Unbounded"; font-size: 28px; line-height: 1; }
.evento-fecha span { font-weight: 700; text-transform: uppercase; font-size: 13px; }
.evento h2 { font-size: 26px; }
.evento p { color: var(--texto-suave); }
.quedan-lite { display: inline-block; margin-top: 6px; color: var(--lima); font-weight: 700; font-size: 14px; }
.privado { display: flex; justify-content: space-between; align-items: center; gap: 32px; background: var(--noche-2);
  border: 1px solid var(--linea); border-radius: 24px; padding: 36px; }
.privado h2 { font-size: clamp(22px, 3vw, 30px); margin-bottom: 10px; }
.privado p { color: var(--texto-suave); max-width: 60ch; }
.privado .btn { flex-shrink: 0; }

.texto-largo { max-width: 68ch; }
.texto-largo p { font-size: 18px; color: var(--texto-suave); margin-bottom: 18px; }
.texto-largo p:first-child { color: var(--texto); font-size: 20px; }
.valores { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--linea); }
.valores li { padding: 24px 20px 0 0; display: grid; gap: 8px; }
.valores li + li { padding-left: 20px; border-left: 1px solid var(--linea); }
.valores b { font-size: 17px; }
.valores span { color: var(--texto-suave); font-size: 15px; }

.canales { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.canal { background: var(--noche-2); border: 1px solid var(--linea); border-radius: var(--radio); padding: 24px; display: grid; gap: 6px; align-content: start; text-decoration: none;
  transition: border-color 200ms ease; }
a.canal { border-color: var(--rosa); }
.canal b { font-size: 18px; margin-top: 10px; }
.canal span { color: var(--texto-suave); }
.canal .canal-cta { color: var(--rosa); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; }
.canal .canal-cta svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.canal .canal-nota { font-size: 13px; }
.pqrs { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; }
.pqrs .titulo { margin: 0; }
.incluye a { color: var(--rosa); }
.datos-empresa h2 { font-size: 20px; margin-bottom: 16px; }
.datos-empresa dl { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--linea); }
.datos-empresa dl div { padding: 16px 16px 0 0; }
.datos-empresa dt { font-size: 13px; color: var(--texto-suave); }
.datos-empresa dd { font-weight: 700; }

/* Legales */
.legal { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: start; padding-bottom: 80px; }
.legal-indice { position: sticky; top: 92px; display: grid; gap: 2px; border-left: 1px solid var(--linea); }
.legal-indice a { text-decoration: none; font-size: 14px; color: var(--texto-suave); padding: 6px 0 6px 16px; margin-left: -1px; border-left: 2px solid transparent;
  transition: color 150ms ease, border-color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .legal-indice a:hover { color: var(--texto); border-left-color: var(--rosa); } }
.legal-texto { max-width: 70ch; }
.legal-texto section { padding: 0 0 36px; scroll-margin-top: 88px; }
.legal-texto h2 { font-size: 20px; margin-bottom: 12px; }
.legal-texto p, .legal-texto li { color: var(--texto-suave); font-size: 16px; line-height: 1.7; }
.legal-texto p + p, .legal-texto p + ul, .legal-texto ul + p { margin-top: 12px; }
.legal-texto ul { padding-left: 20px; display: grid; gap: 6px; }
.legal-texto li::marker { color: var(--rosa); }
.legal-texto b { color: var(--texto); }
.legal-texto a { color: var(--rosa); }

/* Página de ruta */
.cambiar-ruta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.cambiar-ruta a { text-decoration: none; font-weight: 700; font-size: 13px; border: 1px solid var(--linea); padding: 8px 14px; border-radius: 999px; }
.cambiar-ruta a[aria-current="page"] { background: var(--texto); color: var(--noche); border-color: var(--texto); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--texto-suave); margin-bottom: 12px; cursor: pointer; }
.check input { accent-color: var(--lima); width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; }
.check input[aria-invalid="true"] { outline: 2px solid var(--rosa); outline-offset: 2px; }
.check a { color: var(--texto); }

/* Pie */
.pie { border-top: 1px solid var(--linea); padding: 56px 0 120px; background: var(--noche); }
.pie-top { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 48px; }
.pie-marca p { color: var(--texto-suave); margin: 10px 0 18px; }
.pie-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.pie-cols h2 { font-family: "DM Sans"; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-suave); margin-bottom: 12px; }
.pie-cols a { display: block; text-decoration: none; font-size: 15px; padding: 5px 0; transition: color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .pie-cols a:hover { color: var(--rosa); } }
.pie-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; margin-top: 48px; padding-top: 24px;
  border-top: 1px solid var(--linea); font-size: 13px; color: var(--texto-suave); }

@media (max-width: 920px) {
  .menu { position: fixed; inset: 68px 0 auto 0; flex-direction: column; gap: 0; margin: 0; padding: 8px 16px 20px;
    background: var(--noche); border-bottom: 1px solid var(--linea);
    opacity: 0; transform: translateY(-8px); pointer-events: none; visibility: hidden;
    transition: opacity 200ms ease, transform 240ms var(--ease-out), visibility 0s linear 240ms; }
  .menu.abierto { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity 200ms ease, transform 240ms var(--ease-out); }
  .menu a { font-size: 18px; padding: 14px 4px; border-bottom: 1px solid var(--linea); border-radius: 0; }
  .burger { display: grid; }
  .cab-cta { margin-left: auto; }
  .burger { margin-left: 0; }
  .pasos-lista, .valores, .canales { grid-template-columns: 1fr; }
  .pasos-lista li + li, .valores li + li { border-left: 0; padding-left: 0; border-top: 1px solid var(--linea); }
  .valores li { padding-bottom: 20px; }
  .ayuda, .legal, .pqrs, .pie-top { grid-template-columns: minmax(0, 1fr); }
  .ayuda-legal { grid-column: 1; grid-row: auto; position: static; }
  .legal-indice { display: none; }
  .privado { flex-direction: column; align-items: flex-start; padding: 24px; }
  .pie-cols { grid-template-columns: 1fr 1fr; }
  .datos-empresa dl { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 920px) {
  .checkout { grid-template-columns: minmax(0, 1fr); }
  .resumen { position: static; }
  .rutas { grid-template-columns: 1fr; }
  .incluye-bloque { grid-template-columns: 1fr; gap: 24px; }
  .tarifas { grid-template-columns: 1fr 1fr; }
  .barra { display: flex; }
}
@media (max-width: 520px) {
  section { padding: 52px 0; }
  .campos { grid-template-columns: 1fr; }
  .hero .lead { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* Resumen simplificado */
.precio-fila small { display: block; font-size: 13px; color: var(--texto-suave); margin-top: 2px; }
.ahorro-linea { text-align: right; color: var(--lima); font-weight: 700; font-size: 14px; min-height: 0; margin: -2px 0 4px; }
.ahorro-linea:empty { display: none; }
.hoy[hidden] { display: none; }

/* Salidas en la página de ruta */
.gratis-txt { color: var(--lima); font-weight: 700; }
.salidas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0 10px; }
.salida { background: var(--noche-2); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px 20px; display: grid; gap: 12px; }
.salida-t { font-size: 13px; font-family: "DM Sans"; text-transform: uppercase; letter-spacing: .08em; color: var(--lima); display: flex; gap: 8px; flex-wrap: wrap; }
.salida-t span { color: var(--texto); letter-spacing: .04em; }
.salida-sale { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.salida-hora { font-family: "Unbounded"; font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.salida-sale small { display: block; color: var(--texto-suave); font-size: 13px; margin-top: 2px; }
.salida-llega { font-size: 14px; color: var(--texto-suave); border-top: 1px dashed var(--linea); padding-top: 10px; }
.salida-llega b { color: var(--texto); }
.salidas-nota { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--texto-suave); margin-bottom: 28px; }
.salidas-nota svg { width: 18px; height: 18px; stroke: var(--lima); fill: none; stroke-width: 2; stroke-linecap: round; flex-shrink: 0; }
@media (max-width: 720px) { .salidas { grid-template-columns: 1fr; } }

/* Mapa desplegable del punto de salida */
.salida-mapa { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 12px 6px 10px;
  border: 1px solid var(--linea); border-radius: 999px; background: transparent; color: var(--rosa);
  font: inherit; font-weight: 700; font-size: 13px; cursor: pointer;
  transition: transform 160ms var(--ease-out), border-color 150ms ease, background-color 150ms ease; }
.salida-mapa svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .salida-mapa:hover { border-color: var(--rosa); } }
.salida-mapa:active { transform: scale(.97); }
.salida-mapa[aria-expanded="true"] { background: var(--rosa-suave); border-color: var(--rosa); }

.mapa-box { display: grid; gap: 8px; clip-path: inset(0 0 0 0 round 12px);
  transition: clip-path 280ms var(--ease-out), opacity 200ms ease; }
@starting-style { .mapa-box { clip-path: inset(0 0 100% 0 round 12px); opacity: 0; } }
.mapa-box[hidden] { display: none; }
.mapa-marco { aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--noche-3); border: 1px solid var(--linea); }
.mapa-marco iframe { width: 100%; height: 100%; border: 0; display: block; filter: invert(.9) hue-rotate(180deg) saturate(.6); }
.mapa-box a { font-size: 13px; color: var(--texto-suave); justify-self: end; }
@media (prefers-reduced-motion: reduce) {
  .mapa-box { transition: opacity 200ms ease; }
  @starting-style { .mapa-box { clip-path: none; opacity: 0; } }
}
.salida-sale small.salida-dir { color: var(--texto); font-size: 14px; font-weight: 500; margin-top: 4px; }
.salida-hora small { font-family: "DM Sans"; font-size: 14px; font-weight: 700; color: var(--texto-suave); margin-left: 4px; }
.timeline { grid-template-columns: 76px 18px 1fr; }
.salida-hora { display: inline-flex; align-items: baseline; white-space: nowrap; }

/* Horarios de ida */
.salidas-sub { color: var(--texto-suave); font-size: 14px; margin-top: 4px; }
.horarios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0 4px; }
.horario { position: relative; display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: 14px;
  background: var(--noche-2); cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease, transform 160ms var(--ease-out); }
.horario input { position: absolute; opacity: 0; pointer-events: none; }
.horario b { font-family: "Unbounded"; font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.horario span { font-size: 13px; color: var(--texto-suave); }
.horario em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--lima); }
@media (hover: hover) and (pointer: fine) { .horario:hover { border-color: var(--violeta); } }
.horario:active { transform: scale(.97); }
.horario:has(input:checked) { border-color: var(--rosa); background: var(--rosa-suave); }
.horario:has(input:focus-visible) { outline: 3px solid var(--lima); outline-offset: 2px; }
.horario.lleno { opacity: .45; cursor: not-allowed; }
.salida-nota { font-size: 13px; color: var(--rosa); font-weight: 700; margin-top: -4px; }
.salida-llega a { color: var(--texto); font-weight: 700; }
.ahora small { font-family: "DM Sans"; font-size: 12px; font-weight: 700; color: var(--texto-suave); }
@media (max-width: 720px) { .horarios { grid-template-columns: 1fr 1fr; } }
.ahora small { display: block; margin-top: 2px; }

/* Logo EDC */
.rumbo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; padding-left: 14px; border-left: 1px solid var(--linea); }
.rumbo span { font-size: 12px; color: var(--texto-suave); font-weight: 500; }
.rumbo img { height: 30px; width: auto; display: block; }
.hero-edc { width: clamp(120px, 22vw, 190px); height: auto; display: block; margin-bottom: 20px; }
.evento-logo { width: 96px; height: auto; flex-shrink: 0; }
@media (max-width: 520px) { .rumbo span { display: none; } .rumbo { padding-left: 10px; } .rumbo img { height: 26px; } .cabecera-in { gap: 12px; } }

/* Horario escogido: que se note */
.horario::after { content: ""; position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--linea); transition: background-color 150ms ease, border-color 150ms ease; }
.horario:has(input:checked) { background: var(--rosa); border-color: var(--rosa); }
.horario:has(input:checked) b, .horario:has(input:checked) span, .horario:has(input:checked) em { color: var(--noche); }
.horario:has(input:checked)::after { background: var(--noche) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff4fa3' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 13px no-repeat; border-color: var(--noche); }
.salidas .salida:first-child { transition: opacity 200ms ease, transform 240ms var(--ease-out); }
@starting-style { .salidas .salida:first-child { opacity: 0; transform: translateY(6px); } }

/* Tabla de precios (informativa, no seleccionable) */
.precios-lista { list-style: none; margin: 12px 0 0; border-top: 1px solid var(--linea); }
.precios-lista li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; padding: 14px 2px; border-bottom: 1px solid var(--linea); }
.tf-quien b { display: block; font-size: 16px; }
.tf-quien span, .tf-precio span { font-size: 13px; color: var(--texto-suave); }
.tf-precio { text-align: right; }
.tf-precio b { display: block; font-family: "Unbounded"; font-size: 18px; font-variant-numeric: tabular-nums; }
.tf-ahorro { grid-column: 1 / -1; justify-self: start; font-size: 12px; font-weight: 700; color: var(--lima); }
.horarios { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) {
  .horarios { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .horario { padding: 10px 10px 10px; }
  .horario b { font-size: 14px; }
  .horario::after { width: 16px; height: 16px; top: 8px; right: 8px; background-size: 10px; }
}
.horario::after { top: auto; bottom: 10px; }
@media (max-width: 720px) { .horario::after { top: auto; bottom: 8px; } }

/* Pago en línea */
.estado-pago { margin: 20px 0 0; padding: 16px 18px; border-radius: var(--radio); border: 1px solid var(--linea); background: var(--noche-2); display: grid; gap: 4px; }
.estado-pago b { font-size: 17px; }
.estado-pago span { color: var(--texto-suave); font-size: 14px; }
.estado-pago.ok { border-color: var(--lima); background: var(--lima-suave); }
.estado-pago.error { border-color: var(--rosa); background: var(--rosa-suave); }
.estado-pago ul { list-style: none; display: grid; gap: 8px; margin-top: 8px; }
.estado-pago a { display: inline-block; background: var(--lima); color: var(--noche); font-weight: 700; padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.bold-caja { margin-top: 12px; text-align: center; font-size: 14px; color: var(--texto-suave); display: grid; gap: 10px; justify-items: center; }
.bold-caja[hidden] { display: none; }

/* Pagar en un paso */
.pagar { display: grid; gap: 10px; }
.pagar[hidden] { display: none; }
.pagar-t { font-weight: 700; font-size: 15px; margin-top: 4px; }
.pagar .btn { width: 100%; }
.pagar .btn img { width: 20px; height: 20px; filter: invert(1); }
.pagar .btn.secundario img { filter: invert(1) brightness(2); }
.logos-pago { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: -2px; }
.logos-pago[hidden] { display: none; }
.logos-pago img { width: 22px; height: 22px; filter: invert(1); opacity: .85; }
.logos-pago span { font-size: 11px; font-weight: 700; letter-spacing: .02em; border: 1px solid var(--linea); border-radius: 6px; padding: 3px 6px; color: var(--texto); }
.pagar-nota { font-size: 12px; color: var(--texto-suave); text-align: center; margin-top: -4px; }
.seguro { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--texto-suave); }
.seguro svg { width: 14px; height: 14px; stroke: var(--lima); fill: none; stroke-width: 2; stroke-linecap: round; flex-shrink: 0; }
.pagar .btn { font-size: 15px; padding: 14px 18px; }
.logos-pago { gap: 5px; }
.logos-pago img { width: 20px; height: 20px; }
.logos-pago span { font-size: 10px; padding: 2px 5px; }
@media (max-width: 520px) { .pagar .btn { font-size: 14px; padding: 14px 10px; gap: 8px; } }

/* Botones con el diseño de cada marca */
.pagar-btn.btn-bold, .pagar-btn.btn-mp { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  height: 48px; border: 0; cursor: pointer; transition: transform 160ms var(--ease-out), filter 150ms ease; }
.pagar-btn.btn-bold[hidden], .pagar-btn.btn-mp[hidden] { display: none; }
.pagar-btn.btn-bold:active, .pagar-btn.btn-mp:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .pagar-btn.btn-bold:hover, .pagar-btn.btn-mp:hover { filter: brightness(1.08); } }
/* Bold: mismo estilo de su botón oficial (dark-L) */
.btn-bold { background: linear-gradient(270deg, #ff2947 13.86%, #121e6c 83.33%); color: #fff; border-radius: 32px;
  font-family: Montserrat, sans-serif; font-weight: 500; font-size: 14px; line-height: 20px; padding: 0 24px; }
.btn-bold img { width: 59px; height: 20px; filter: none !important; }
/* Mercado Pago: celeste oficial #009EE3 */
.btn-mp { background: #009ee3; color: #fff; border-radius: 8px; font-family: Montserrat, sans-serif; font-weight: 600; font-size: 15px; padding: 0 16px; }
.btn-mp img { width: 26px; height: 26px; filter: invert(1) !important; }
.pagar-btn:disabled { opacity: .6; cursor: progress; }
@media (max-width: 520px) { .btn-mp { font-size: 14px; } }
.btn-mp, .btn-bold { white-space: nowrap; }