/* =========================================================
   ¡Nos fuimos! · estilos
   Relieve suave (neumorfismo), como el portafolio y la app de inspección,
   con la paleta de las chivas colombianas: azul, amarillo, rojo y verde.
   Para cambiar colores, edita :root y las zonas.
   ========================================================= */

@font-face { font-family: "Nunito Sans"; font-weight: 200 1000; font-display: swap; src: url("/fonts/nunito-sans-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Baloo 2"; font-weight: 400 800; font-display: swap; src: url("/fonts/baloo-2-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Shrikhand"; font-weight: 400; font-display: swap; src: url("/fonts/shrikhand-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Shrikhand"; font-weight: 400; font-display: swap; src: url("/fonts/shrikhand-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF; }

:root {
  /* Paleta de la chiva */
  --azul: #1F3FBF;
  --amarillo: #FFC21F;
  --rojo: #E5332A;
  --verde: #149A5B;
  --tinta: #13204A;
  --rosa: #FF4F8B;
  --violeta: #6A2BC0;
  --g-amarillo: linear-gradient(150deg, #FFE066 0%, #FFB020 100%);
  --g-rosa: linear-gradient(150deg, #FF7AA8 0%, #E5332A 100%);
  --g-verde: linear-gradient(150deg, #3FE0A8 0%, #0F8A55 100%);
  --g-azul: linear-gradient(150deg, #6F8BFF 0%, #2A2FB8 100%);
  --noche: #13204A;
  --g-cielo: linear-gradient(180deg, #140F5C 0%, #2B23A8 36%, #6E2CC0 62%, #E8458B 84%, #FF9A3C 100%);
  --grad: linear-gradient(135deg, #FFD545 0%, #FFC21F 50%, #FFA61A 100%);
  --glow: 0 10px 26px rgba(255, 170, 30, .38);

  /* Zona clara (por defecto) */
  --bg: #EEF2FB; --hi: #FFFFFF; --lo: #C3CCE3;
  --text: #13204A; --muted: #4F5A7C; --line: #D3DAEC; --accent: #1F3FBF;

  --raise:   9px 9px 20px var(--lo), -8px -8px 18px var(--hi);
  --raise-s: 5px 5px 12px var(--lo), -5px -5px 12px var(--hi);
  --press:   inset 5px 5px 10px var(--lo), inset -5px -5px 10px var(--hi);

  --head: "Baloo 2", "Segoe UI", system-ui, sans-serif;
  --body: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  --marca: "Shrikhand", Georgia, serif;
  --ancho: 1180px;
  --margen: clamp(16px, 4vw, 40px);
}

/* Zona cielo: atardecer caribeño. Las piezas en relieve se vuelven vidrio esmerilado. */
.zona-cielo {
  --bg: rgba(255, 255, 255, .12); --hi: rgba(255, 255, 255, .3); --lo: rgba(4, 40, 70, .4);
  --text: #FFFFFF; --muted: #E8FBFF; --line: rgba(255, 255, 255, .26); --accent: var(--amarillo);
  --raise:   0 18px 44px rgba(4, 40, 70, .32), inset 0 1px 0 rgba(255, 255, 255, .35);
  --raise-s: 0 8px 22px rgba(4, 40, 70, .28), inset 0 1px 0 rgba(255, 255, 255, .32);
  --press:   inset 0 3px 9px rgba(4, 40, 70, .38), inset 0 -1px 0 rgba(255, 255, 255, .18);
  position: relative; isolation: isolate; overflow: hidden;
  background: radial-gradient(700px 360px at 76% 92%, rgba(255, 228, 92, .28), transparent 65%), linear-gradient(180deg, #0B6FA8 0%, #1597C2 45%, #22B8C8 75%, #6FDCCB 100%);
  color: var(--text);
}
/* Estrellas en la parte alta del cielo */
.zona-cielo::before {
  content: ""; position: absolute; inset: 0 0 45% 0; z-index: -2; pointer-events: none; opacity: 0;
  background:
    radial-gradient(1.6px 1.6px at 8% 14%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 19% 32%, #fff 50%, transparent 52%),
    radial-gradient(1.8px 1.8px at 31% 9%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 44% 24%, #fff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 57% 12%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 66% 38%, #fff 50%, transparent 52%),
    radial-gradient(1.8px 1.8px at 78% 18%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 89% 30%, #fff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 95% 8%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 52% 44%, #fff 50%, transparent 52%);
}
.zona-cielo .raised, .zona-cielo .inset { -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
.zona-cielo .raised { border: 1px solid rgba(255, 255, 255, .12); }
.paisaje { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(210px, 32vw, 460px); z-index: -1; pointer-events: none; }
.paisaje svg, .paisaje img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }

/* La ruta del paisaje aparece una vez al cargar: Bogotá, Medellín, Cartagena */
.ruta-linea { opacity: 0; animation: aparecer 1.2s ease-out .4s forwards; }
.ruta-pin { opacity: 0; animation: aparecer .5s ease-out forwards; }
.ruta-pin:nth-of-type(1) { animation-delay: .3s; }
.ruta-pin:nth-of-type(2) { animation-delay: .9s; }
.ruta-pin:nth-of-type(3) { animation-delay: 1.5s; }
@keyframes aparecer { to { opacity: 1; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: radial-gradient(900px 600px at 100% 30%, rgba(255, 79, 139, .10), transparent 70%), radial-gradient(800px 600px at 0% 75%, rgba(47, 212, 154, .10), transparent 70%), radial-gradient(700px 500px at 50% 100%, rgba(255, 176, 32, .10), transparent 70%), var(--bg); background-attachment: fixed; color: var(--text); font-family: var(--body); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: var(--head); letter-spacing: -0.01em; line-height: 1.05; }
a { color: inherit; }
img, svg { display: block; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; }
[hidden] { display: none !important; }
.envoltura { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.raised { background: var(--bg); box-shadow: var(--raise); }
.inset  { background: var(--bg); box-shadow: var(--press); }
.led { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--amarillo); box-shadow: 0 0 8px var(--amarillo); }

/* ---------- Franja de chiva ---------- */
.franja { height: 10px; background: linear-gradient(to bottom, var(--amarillo) 0 30%, var(--rojo) 30% 50%, var(--azul) 50% 65%, var(--verde) 65% 100%); }

/* ---------- Encabezado: barra píldora en relieve ---------- */
.encabezado { padding-top: 16px; }
.barra { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 64px; padding: 8px 10px 8px 14px; border-radius: 999px; }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.marca-logo { width: 40px; height: 40px; border-radius: 12px; box-shadow: var(--raise-s); }

/* Logo vivo: la chiva vibra, las líneas de velocidad titilan y salen notas musicales como humo */
.logo-vivo { position: relative; display: inline-block; flex: none; margin-right: 14px; animation: pasear 3.6s ease-in-out infinite; }
.logo-vivo .marca-logo { display: block; width: 58px; height: auto; overflow: visible; border-radius: 0; box-shadow: none; }
.logo-vivo .rueda { transform-box: fill-box; transform-origin: center; animation: girar .7s linear infinite; }
.humo-logo { left: 10px; top: 2px; }
@keyframes pasear { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(14px); } }
@keyframes girar { to { transform: rotate(360deg); } }
.logo-vivo .cuerpo { animation: motor .42s ease-in-out infinite alternate; }
.logo-vivo .velocidad path { animation: titilar .9s ease-in-out infinite; }
.logo-vivo .velocidad path:nth-child(2) { animation-delay: .3s; }
.logo-vivo .velocidad path:nth-child(3) { animation-delay: .6s; }
@keyframes motor { from { transform: translateY(0); } to { transform: translateY(-1.2px); } }
@keyframes titilar { 0%, 100% { opacity: 1; transform: translateX(0); } 50% { opacity: .35; transform: translateX(-2px); } }

.humo { position: absolute; left: 4px; top: 2px; width: 0; height: 0; pointer-events: none; }
.nota { position: absolute; left: 0; top: 0; width: 15px; height: 15px; opacity: 0; animation: humo 2.7s ease-out infinite; }
.nota.n1 { color: var(--amarillo); }
.nota.n2 { color: var(--rosa); width: 17px; height: 17px; animation-delay: .9s; }
.nota.n3 { color: #2FD49A; animation-delay: 1.8s; }
@keyframes humo {
  0%   { opacity: 0; transform: translate(0, 0) scale(.5) rotate(0deg); }
  15%  { opacity: 1; }
  60%  { opacity: .85; transform: translate(-12px, -14px) scale(1) rotate(-14deg); }
  100% { opacity: 0; transform: translate(-6px, -24px) scale(1.1) rotate(10deg); }
}
.marca-nombre { font-family: var(--marca); font-size: 1.45rem; line-height: 1; color: var(--amarillo); }
.barra-enlace { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; text-decoration: none; font-weight: 600; font-size: .95rem; padding: 10px 18px; border-radius: 999px; box-shadow: var(--raise-s); transition: box-shadow .2s, color .2s; }
.barra-enlace .ico { width: 18px; height: 18px; color: var(--accent); }
.barra-enlace:hover { color: var(--amarillo); }
.barra-enlace:active { box-shadow: var(--press); }

/* ---------- Botones píldora con ícono y divisor ---------- */
.pill { display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 26px 0 6px; border: 0; border-radius: 999px; font-weight: 650; font-size: 1.02rem; text-decoration: none; cursor: pointer; background: var(--bg); box-shadow: var(--raise-s); position: relative; overflow: hidden; transition: transform .15s, box-shadow .2s; }
.pill:hover { transform: translateY(-2px); }
.pill:active { transform: translateY(0) scale(.98); box-shadow: var(--press); }
.pill-ico { display: grid; place-items: center; width: 46px; height: 40px; border-right: 1.5px solid var(--line); color: var(--accent); }
.pill-primary { background: var(--grad); color: var(--tinta); box-shadow: var(--raise-s), var(--glow); }
.pill-primary .pill-ico { color: var(--tinta); border-right-color: rgba(19, 32, 74, .22); }
.pill-primary::after { content: ""; position: absolute; inset: 0; transform: translateX(-120%) skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transition: transform .7s ease; }
.pill-primary:hover::after { transform: translateX(160%) skewX(-20deg); }
.pill[disabled] { opacity: .65; cursor: wait; transform: none; }

/* ---------- Portada ---------- */
.portada { padding-bottom: clamp(170px, 22vw, 300px); }
.portada-cuerpo { padding-top: clamp(36px, 6vw, 72px); display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 14px; border-radius: 999px; font-size: .9rem; font-weight: 500; color: var(--muted); }
.titular { margin-top: 22px; font-weight: 800; font-size: clamp(2.8rem, 6vw, 5rem); color: #FFFFFF; text-shadow: 0 4px 0 var(--rojo), 0 0 34px rgba(255, 228, 92, .55); }
.bajada { margin-top: 22px; max-width: 40ch; font-size: clamp(1.05rem, 1.5vw, 1.22rem); color: var(--muted); }

/* La frase que se llena, dentro de un panel en relieve */
.panel-frase { padding: clamp(22px, 3.2vw, 36px); border-radius: 34px; }
.frase { font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 2.25; font-weight: 500; }
.frase label { white-space: nowrap; }
.campo { appearance: none; border: 0; border-radius: 999px; background: var(--bg); box-shadow: var(--press); color: var(--amarillo); font-weight: 700; padding: 4px 16px; line-height: 1.5; }
.campo::placeholder { color: rgba(255, 214, 102, .6); }
.campo:focus { outline: none; }
.campo:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }
.campo-ciudad { width: 8.5em; max-width: 100%; }
select.campo { cursor: pointer; padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, var(--amarillo) 50%), linear-gradient(135deg, var(--amarillo) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
select.campo option { color: var(--tinta); background: #fff; font-weight: 500; }

.gustos-grupo { border: 0; padding: 0; margin: 22px 0 0; }
.gustos-titulo { display: block; font-weight: 600; margin-bottom: 12px; }
.gustos-lista { display: flex; flex-wrap: wrap; gap: 10px; }
.gusto { position: relative; }
.gusto input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.gusto span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: var(--bg); box-shadow: var(--raise-s); font-size: .95rem; font-weight: 600; transition: box-shadow .2s, color .2s; }
.gusto span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background .2s, box-shadow .2s; }
.gusto input:checked + span { box-shadow: var(--press); color: var(--amarillo); }
.gusto input:checked + span::before { background: var(--amarillo); box-shadow: 0 0 8px var(--amarillo); }
.gusto input:focus-visible + span { outline: 3px solid var(--amarillo); outline-offset: 3px; }

.notas { margin-top: 22px; display: grid; gap: 8px; }
.notas label { font-weight: 600; }
.notas .opcional { font-weight: 400; color: var(--muted); }
.notas input { border: 0; border-radius: 16px; background: var(--bg); box-shadow: var(--press); padding: 14px 16px; }
.notas input::placeholder { color: var(--muted); opacity: .8; }
.notas input:focus { outline: none; }
.notas input:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }

.acciones { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }
.nota-pie { color: var(--muted); font-size: .92rem; }
.error { margin-top: 18px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px; font-weight: 600; color: #FFFFFF; background: var(--rojo); box-shadow: var(--raise-s); }

/* ---------- Secciones claras ---------- */
.seccion { padding-block: clamp(48px, 7vw, 92px); }
.seccion-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; margin-bottom: clamp(26px, 3.4vw, 40px); }
.seccion-titulo { font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 800; }
.seccion-cabeza p { color: var(--muted); max-width: 42ch; }

.recibes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.recibe { padding: 28px; border-radius: 28px; transition: box-shadow .35s, transform .35s; }
.recibe:hover { box-shadow: var(--press); transform: translateY(2px); }
.recibe h3 { font-size: 1.08rem; font-weight: 700; }
.recibe p { margin-top: 8px; color: var(--muted); }
.llave { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; margin-bottom: 22px; box-shadow: var(--raise-s); transition: transform .35s; }
.llave .ico { width: 26px; height: 26px; }
.recibe:hover .llave { transform: rotate(-6deg) scale(1.06); }
.llave-amarillo { background: var(--g-amarillo); color: var(--tinta); box-shadow: var(--raise-s), 0 10px 24px rgba(255, 176, 32, .35); }
.llave-rojo { background: var(--g-rosa); color: #fff; box-shadow: var(--raise-s), 0 10px 24px rgba(255, 79, 139, .35); }
.llave-verde { background: var(--g-verde); color: #fff; box-shadow: var(--raise-s), 0 10px 24px rgba(20, 154, 91, .32); }

.espera { padding: clamp(28px, 4vw, 48px); border-radius: 34px; box-shadow: 0 24px 60px rgba(43, 35, 168, .3); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.espera p { margin-top: 10px; color: var(--muted); }
.espera .seccion-titulo { color: #FFFFFF; text-shadow: 0 3px 0 var(--rojo); }
.espera::before { inset: 0; bottom: 0; opacity: .6; }
.espera-form { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.espera-form input { flex: 1 1 220px; min-height: 56px; border: 0; border-radius: 999px; background: var(--bg); box-shadow: var(--press); padding: 0 22px; }
.espera-form input:focus { outline: none; }
.espera-form input:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }
.espera-form input::placeholder { color: var(--muted); }
.espera-msg { margin-top: 12px; font-weight: 600; min-height: 1.5em; }
.espera-msg.ok { color: var(--verde); }
.espera-msg.mal { color: var(--rojo); }

.pie { color: var(--muted); font-size: .9rem; }
.pie .envoltura { padding-block: 8px 36px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------- Armando el viaje: la chiva cruza la franja ---------- */
.armando { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--margen); padding-bottom: clamp(120px, 20vw, 260px); }
.armando-caja { width: min(620px, 100%); padding: clamp(26px, 5vw, 44px); border-radius: 36px; text-align: center; }
.armando h2 { font-family: var(--marca); font-weight: 400; letter-spacing: 0; font-size: clamp(2.4rem, 7vw, 3.6rem); color: var(--amarillo); }
.armando-texto { margin-top: 10px; color: var(--muted); min-height: 1.6em; }
.carretera { margin-top: 28px; height: 110px; border-radius: 24px; position: relative; overflow: hidden; }
.carretera .franja { position: absolute; left: 14px; right: 14px; bottom: 16px; border-radius: 6px; }
.chiva-viaje { position: absolute; bottom: 26px; left: -120px; width: 110px; animation: rodar 3.2s linear infinite; }
.chiva { display: block; width: 110px; height: auto; animation: motor .3s ease-in-out infinite alternate; }
.humo-chiva { left: 12px; top: 8px; }
.humo-chiva .nota { width: 18px; height: 18px; animation-duration: 1.8s; }
.humo-chiva .nota.n2 { width: 20px; height: 20px; animation-delay: .6s; }
.humo-chiva .nota.n3 { animation-delay: 1.2s; }
@keyframes rodar { to { transform: translateX(calc(min(620px, 100vw) + 120px)); } }

/* ---------- Página del viaje ---------- */
.viaje-titular { padding-block: clamp(28px, 4vw, 48px) clamp(150px, 19vw, 260px); }
.viaje-cabeza .paisaje { height: clamp(150px, 20vw, 290px); }
.viaje-destino { margin-top: 20px; font-weight: 800; font-size: clamp(2.6rem, 6.4vw, 4.8rem); color: #FFFFFF; text-shadow: 0 4px 0 var(--rojo), 0 0 34px rgba(255, 228, 92, .55); }
.viaje-resumen { margin-top: 16px; max-width: 62ch; color: var(--muted); font-size: 1.1rem; }
.datos { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; }
.datos li { padding: 8px 18px; border-radius: 999px; background: var(--bg); box-shadow: var(--press); font-weight: 600; font-size: .95rem; }
.datos strong { color: #FFE45C; }

.aviso { margin-top: 28px; display: flex; gap: 12px; align-items: center; padding: 14px 20px; border-radius: 20px; font-weight: 600; }
.aviso .led { background: #E0A100; box-shadow: 0 0 8px #FFB000; }

.viaje-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(22px, 3vw, 40px); padding-block: 32px 56px; align-items: start; }
.mapa-caja { position: sticky; top: 18px; padding: 12px; border-radius: 30px; }
.mapa { height: min(70vh, 600px); border-radius: 20px; overflow: hidden; background: var(--bg); }
.mapa-nota { margin: 10px 8px 2px; font-size: .85rem; color: var(--muted); }

/* Cómo llegar: opciones de transporte desde el origen */
.llegar { padding: clamp(22px, 3vw, 30px); border-radius: 30px; margin-bottom: 28px; }
.llegar h2 { font-size: 1.25rem; font-weight: 700; }
.llegar-resumen { margin-top: 8px; color: var(--muted); }
.llegar-opciones { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.opcion { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 16px; border-radius: 22px; }
.opcion-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--g-azul); color: #fff; box-shadow: var(--raise-s); }
.opcion-mejor .opcion-ico { background: var(--g-amarillo); color: var(--tinta); box-shadow: var(--raise-s), 0 8px 20px rgba(255, 176, 32, .35); }
.opcion-medio { font-weight: 700; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.opcion-tag { font-size: .75rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--g-verde); color: #fff; }
.opcion-detalle { color: var(--muted); font-size: .95rem; }
.opcion-datos { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-weight: 600; font-size: .9rem; }
.llegar-nota { margin-top: 14px; font-size: .85rem; color: var(--muted); }

/* Cada día es un tiquete de bus en relieve: talón de color y cuerpo con el horario */
.tiquetes { display: grid; gap: 28px; }
.tiquete { --color: var(--g-amarillo); --sobre: var(--tinta); display: grid; grid-template-columns: 96px minmax(0, 1fr); border-radius: 30px; background: var(--bg); box-shadow: var(--raise); position: relative; }
.tiquete-talon { background: var(--color); color: var(--sobre); border-radius: 30px 0 0 30px; display: flex; flex-direction: column; align-items: center; padding: 22px 8px; position: relative; }
/* Perforación: línea punteada y dos muescas hundidas */
.tiquete-talon::after { content: ""; position: absolute; top: 18px; bottom: 18px; right: -1px; border-right: 3px dotted rgba(19, 32, 74, .28); }
.muesca { position: absolute; left: 96px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: var(--bg); box-shadow: var(--press); z-index: 1; }
.muesca-arriba { top: -13px; clip-path: inset(50% 0 0 0); }
.muesca-abajo { bottom: -13px; clip-path: inset(0 0 50% 0); }
.talon-dia { font-weight: 700; font-size: .9rem; }
.talon-num { font-family: var(--head); font-weight: 800; font-size: 2.8rem; line-height: 1; margin-top: 4px; }
.tiquete-cuerpo { padding: 22px clamp(16px, 2.6vw, 28px) 24px; }
.tiquete-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.tiquete-titulo { font-family: var(--head); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.tiquete-zona { margin-top: 4px; color: var(--muted); font-weight: 600; font-size: .92rem; }
.ver-mapa { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; padding: 8px 14px; border-radius: 999px; background: var(--bg); box-shadow: var(--raise-s); font-weight: 600; font-size: .88rem; color: var(--accent); }
.ver-mapa .ico { width: 16px; height: 16px; }
.ver-mapa:active { box-shadow: var(--press); }

.paradas { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 18px; }
.parada { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 12px; }
.parada-hora { font-weight: 750; font-variant-numeric: tabular-nums; padding-top: 1px; }
.parada-titulo { font-weight: 700; display: flex; align-items: center; gap: 10px; }
.parada-num { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--color); color: var(--sobre); font-size: .78rem; font-weight: 800; box-shadow: 2px 2px 5px var(--lo), -2px -2px 5px var(--hi); }
.parada-desc { margin-top: 4px; color: var(--muted); }
.parada-pie { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; font-size: .84rem; font-weight: 600; }
.parada-pie span { padding: 3px 12px; border-radius: 999px; box-shadow: var(--press); }
.parada-costo { color: var(--verde); }
.parada-tipo { color: var(--muted); }

.extra { margin-top: 30px; display: grid; gap: 22px; }
.extra-caja { padding: 26px 28px; border-radius: 28px; }
.extra h2 { font-size: 1.25rem; font-weight: 700; }
.extra p, .extra li { color: var(--muted); }
.extra p { margin-top: 10px; }
.extra ul { margin: 12px 0 0; padding-left: 1.2em; display: grid; gap: 8px; }
.viaje-acciones { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px; align-items: center; }
.copiado { font-weight: 600; color: var(--verde); }

/* Marcadores del mapa */
.pin { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 3px solid #FFFFFF; background: var(--color, var(--amarillo)); color: var(--sobre, var(--tinta)); font: 800 12px/1 var(--body); box-shadow: 0 3px 8px rgba(19, 32, 74, .35); }
.leaflet-popup-content { font-family: var(--body); }
.leaflet-container { font-family: var(--body); }

.estado-vacio { padding-block: 80px; text-align: center; }
.estado-vacio h1 { font-size: 2rem; font-weight: 800; }
.estado-vacio p { margin: 12px auto 26px; color: var(--muted); max-width: 40ch; }

/* Colores por día (ciclo de la chiva) */
.dia-c0 { --color: var(--g-amarillo); --sobre: var(--tinta); }
.dia-c1 { --color: var(--g-rosa); --sobre: #FFFFFF; }
.dia-c2 { --color: var(--g-verde); --sobre: #FFFFFF; }
.dia-c3 { --color: var(--g-azul); --sobre: #FFFFFF; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .portada-cuerpo { grid-template-columns: 1fr; }
  .titular { max-width: none; }
  .viaje-cuerpo { grid-template-columns: 1fr; }
  .mapa-caja { position: static; order: -1; }
  .mapa { height: 300px; }
  .recibes, .espera { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .barra { padding: 6px 8px 6px 10px; min-height: 58px; }
  .marca-logo { width: 36px; height: 36px; }
  .logo-vivo .marca-logo { width: 50px; height: auto; }
  .logo-vivo { margin-right: 10px; }
  @keyframes pasear { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(9px); } }
  .marca-nombre { font-size: 1.25rem; }
  .barra-enlace { padding: 8px 12px; font-size: .88rem; }
  .solo-ancho { display: none; }
  .portada { padding-bottom: 170px; }
  .frase { line-height: 2.4; }
  .frase label { white-space: normal; }
  .campo-ciudad { width: 100%; }
  .tiquete { grid-template-columns: 68px minmax(0, 1fr); }
  .muesca { left: 68px; }
  .talon-num { font-size: 2.1rem; }
  .talon-dia { font-size: .78rem; }
  .parada { grid-template-columns: 1fr; gap: 4px; }
  .pill { min-height: 52px; padding-right: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .pill-primary::after { display: none; }
  .chiva-viaje { animation: none; left: calc(50% - 55px); }
  .chiva, .logo-vivo, .logo-vivo .cuerpo, .logo-vivo .rueda, .logo-vivo .velocidad path { animation: none; }
  .nota { display: none; }
  .ruta-linea, .ruta-pin { animation: none; opacity: 1; }
}
@media print {
  body { background: #fff; }
  .encabezado, .viaje-acciones, .mapa-caja, .aviso, .pie { display: none !important; }
  .zona-cielo { --bg: #fff; --text: #13204A; --muted: #4F5A7C; background: #fff; }
  .zona-cielo::before, .paisaje { display: none; }
  .viaje-destino { color: var(--azul); }
  .viaje-cuerpo { grid-template-columns: 1fr; }
  .tiquete, .datos li, .parada-pie span { box-shadow: none; border: 1px solid #D3DAEC; }
  .tiquete { break-inside: avoid; }
}

/* Dos secciones seguidas no suman su espacio */
.seccion + .seccion { padding-top: 0; }

/* Barra superior blanca con borde translúcido (halo de vidrio) sobre el fondo azul noche */
.zona-cielo .barra {
  --bg: #F6F8FE; --hi: #FFFFFF; --lo: #C9D1E6;
  --text: #13204A; --muted: #4F5A7C; --line: #D3DAEC; --accent: #1F3FBF;
  --raise-s: 4px 4px 10px var(--lo), -4px -4px 10px var(--hi);
  --press: inset 4px 4px 8px var(--lo), inset -4px -4px 8px var(--hi);
  background: rgba(255, 255, 255, .94);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 0 0 7px rgba(255, 255, 255, .16), 0 0 0 1px rgba(255, 255, 255, .35), 0 16px 40px rgba(3, 7, 26, .45);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
.zona-cielo .barra .marca-nombre { color: var(--azul); }
.zona-cielo .barra .barra-enlace { color: var(--tinta); background: var(--bg); }
.zona-cielo .barra .barra-enlace:hover { color: var(--azul); }

/* Vía al pie de la barra: asfalto gris con línea punteada que corre; la chiva rueda encima */
.zona-cielo .barra { position: relative; padding-bottom: 14px; }
.zona-cielo .barra::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, #FFFFFF 0 18px, transparent 18px 34px) 0 calc(100% - 6px) / 34px 2px repeat-x,
    linear-gradient(#3A4150, #3A4150) 0 100% / 100% 14px no-repeat;
  animation: carril .7s linear infinite;
}
@keyframes carril { to { background-position: -34px calc(100% - 6px), 0 100%; } }
.zona-cielo .barra > * { position: relative; z-index: 1; }
.zona-cielo .barra .marca { align-self: stretch; }
.zona-cielo .barra .logo-vivo { align-self: flex-end; margin-bottom: -12px; }
@media (prefers-reduced-motion: reduce) { .zona-cielo .barra::after { animation: none; } }

/* Paisaje neón en miniatura dentro de la barra (mismo estilo del fondo) */
.zona-cielo .barra > .barra-escena { position: absolute; left: 0; right: 0; top: 0; bottom: 14px; width: 100%; height: calc(100% - 14px); z-index: 0; pointer-events: none; overflow: hidden; }
@media (max-width: 900px) { .zona-cielo .barra > .barra-escena { display: none; } }

/* ===== Formulario estilo pase de abordar: tarjeta blanca, avión que cruza y línea de corte ===== */
.zona-cielo .panel-frase {
  --bg: #FFFFFF; --hi: #FFFFFF; --lo: #C9D3EC;
  --text: #13204A; --muted: #5B6B95; --line: #D3DAEC; --accent: #1F3FBF;
  --raise-s: 4px 4px 9px #CDD6EC, -4px -4px 9px #FFFFFF;
  --press: inset 3px 3px 7px #C9D3EC, inset -3px -3px 7px #FFFFFF;
  position: relative; overflow: hidden;
  color: var(--text); background: #FFFFFF; border: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 0 0 7px rgba(255, 255, 255, .22), 0 26px 54px rgba(4, 40, 70, .38);
  padding-top: 50px;
}
.zona-cielo .panel-frase .campo { background-color: #EEF3FF; color: var(--azul); }
.zona-cielo .panel-frase .campo::placeholder { color: #8FA3D6; }
.zona-cielo .panel-frase select.campo { background-image: linear-gradient(45deg, transparent 50%, var(--azul) 50%), linear-gradient(135deg, var(--azul) 50%, transparent 50%); }
.zona-cielo .panel-frase .campo:focus-visible, .zona-cielo .panel-frase .notas input:focus-visible { outline-color: var(--azul); }
.zona-cielo .panel-frase .gusto span { background-color: #F3F6FD; }
.zona-cielo .panel-frase .gusto input:checked + span { background-color: var(--azul); color: #FFFFFF; box-shadow: 0 8px 18px rgba(31, 63, 191, .35); animation: pop .35s ease-out; }
.zona-cielo .panel-frase .gusto input:checked + span::before { background: var(--amarillo); box-shadow: 0 0 8px var(--amarillo); }
.zona-cielo .panel-frase .notas input { background-color: #EEF3FF; }
.zona-cielo .panel-frase .notas input::placeholder { color: #8FA3D6; opacity: 1; }
.zona-cielo .panel-frase .acciones { border-top: 2px dashed var(--line); padding-top: 22px; }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }

/* Avión de papel que cruza el borde superior del pase */
.vuelo { position: absolute; left: 0; right: 0; top: 16px; height: 20px; pointer-events: none; }
.vuelo::before { content: ""; position: absolute; left: 26px; right: 26px; top: 9px; border-top: 2px dotted #B9C6E8; }
.vuelo svg { position: absolute; top: 0; width: 22px; height: 20px; animation: volar 3.2s ease-in-out infinite; }
@keyframes volar { 0% { left: 18px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: calc(100% - 40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .vuelo svg { animation: none; left: calc(50% - 11px); }
  .zona-cielo .panel-frase .gusto input:checked + span { animation: none; }
}

/* ===== Pase de viaje (formulario principal) ===== */
.pase {
  --borde: #D3DAEC; --pista: #EEF3FF; --suave: #5B6B95;
  position: relative; background: #FFFFFF; color: var(--tinta); border-radius: 30px;
  padding: 28px 32px 26px;
  box-shadow: 0 0 0 7px rgba(255, 255, 255, .22), 0 26px 54px rgba(4, 40, 70, .38);
}
.pase-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pase-marca { font-family: var(--marca); font-size: 1.45rem; color: var(--azul); line-height: 1; }
.pase-tipo { font-weight: 800; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); }

.pase-ruta { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); align-items: end; gap: 10px; }
.ciudad label { display: block; font-weight: 700; font-size: .85rem; color: var(--suave); }
.ciudad-destino { text-align: right; }
.ciudad input {
  width: 100%; margin-top: 6px; border: 0; border-bottom: 3px solid var(--borde); background: transparent;
  font-family: var(--head); font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.2; color: var(--azul);
  padding: 0 0 6px; border-radius: 0; transition: border-color .2s;
}
.ciudad-destino input { text-align: right; }
.ciudad input::placeholder { color: #AEB9D6; }
.ciudad input:focus { outline: none; border-bottom-color: var(--azul); }
.ciudad input:focus-visible { outline: none; }
.ruta-avion { position: relative; height: 48px; margin-bottom: 8px; }
.ruta-avion svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ruta-avion .avion { width: 24px; height: 24px; left: 10px; top: auto; bottom: 0; animation: despegar 3.6s ease-in-out infinite; }
@keyframes despegar {
  0%   { transform: translate(0, 0) rotate(-35deg); opacity: 0; }
  12%  { opacity: 1; }
  50%  { transform: translate(44px, -32px) rotate(0deg); }
  88%  { opacity: 1; }
  100% { transform: translate(86px, 0) rotate(35deg); opacity: 0; }
}

.pase-fila { margin-top: 16px; display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 12px; }
.pase-fila-gustos { align-items: start; }
.pase-fila-gustos .pase-etiqueta { padding-top: 10px; }
.pase-etiqueta { font-weight: 700; font-size: .9rem; color: var(--suave); }
.pista { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: var(--pista); }
.pista-dias { gap: 14px; }
.paso { width: 40px; height: 40px; border: 0; border-radius: 50%; background: #FFFFFF; color: var(--azul); font-size: 1.3rem; font-weight: 800; cursor: pointer; box-shadow: 0 4px 10px rgba(31, 63, 191, .16); transition: transform .12s; }
.paso:hover { transform: scale(1.08); }
.paso:active { transform: scale(.94); }
.paso:disabled { opacity: .4; cursor: default; transform: none; }
.dias-valor { font-family: var(--head); font-weight: 800; font-size: 1.3rem; min-width: 5ch; text-align: center; }
.dias-valor.salto { animation: pop .3s ease-out; }

.seg { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; font-weight: 700; transition: background .2s, color .2s, box-shadow .2s; }
.seg i, .gustos-pase i { font-style: normal; }
.seg input:checked + span { background: var(--azul); color: #FFFFFF; box-shadow: 0 6px 16px rgba(31, 63, 191, .35); animation: pop .3s ease-out; }
.seg input:focus-visible + span { outline: 3px solid var(--amarillo); outline-offset: 2px; }

.gustos-pase { display: flex; flex-wrap: wrap; gap: 10px; }
.gustos-pase .gusto span { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; background: var(--pista); border: 1.5px solid transparent; font-weight: 600; box-shadow: none; transition: background .2s, border-color .2s; }
.gustos-pase .gusto span::before { display: none; }
.gustos-pase .gusto input:checked + span { background: #FFF3C4; border-color: var(--amarillo); color: var(--tinta); box-shadow: none; animation: pop .35s ease-out; }

.pase-nota { margin-top: 14px; }
.pase-nota summary { display: inline-block; cursor: pointer; font-weight: 700; font-size: .9rem; color: var(--azul); list-style: none; }
.pase-nota summary::-webkit-details-marker { display: none; }
.pase-nota input { width: 100%; margin-top: 10px; border: 0; border-radius: 14px; background: var(--pista); padding: 12px 14px; color: var(--tinta); }
.pase-nota input::placeholder { color: #8FA3D6; }
.pase-nota input:focus { outline: 3px solid var(--azul); outline-offset: 1px; }

/* Línea de corte con muescas a los lados */
.perforacion { position: relative; margin: 22px -32px 18px; border-top: 2px dashed var(--borde); }
.perforacion::before, .perforacion::after { content: ""; position: absolute; top: -14px; width: 26px; height: 26px; border-radius: 50%; background: #1BA6C8; }
.perforacion::before { left: -13px; }
.perforacion::after { right: -13px; }
.pase-pie { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.codigo-barras { width: 168px; height: 44px; background: repeating-linear-gradient(90deg, #13204A 0 2px, transparent 2px 4px, #13204A 4px 5px, transparent 5px 7px, #13204A 7px 10px, transparent 10px 12px, #13204A 12px 13px, transparent 13px 16px); }
.pase .error { margin-top: 16px; }

@media (max-width: 560px) {
  .pase { padding: 22px 18px 20px; }
  .pase-ruta { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); }
  .ruta-avion .avion { left: 0; }
  @keyframes despegar { 0% { transform: translate(0, 0) rotate(-35deg); opacity: 0; } 12% { opacity: 1; } 50% { transform: translate(20px, -26px) rotate(0deg); } 88% { opacity: 1; } 100% { transform: translate(40px, 0) rotate(35deg); opacity: 0; } }
  .pase-fila { grid-template-columns: 1fr; gap: 6px; }
  .pase-fila-gustos .pase-etiqueta { padding-top: 0; }
  .pista { border-radius: 22px; }
  .seg span { padding: 8px 12px; }
  .perforacion { margin-inline: -18px; }
  .codigo-barras { width: 110px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .ruta-avion .avion { animation: none; transform: translate(44px, -32px); }
  .seg input:checked + span, .gustos-pase .gusto input:checked + span, .dias-valor.salto { animation: none; }
}

/* Más ancho para el pase en la portada, para que las opciones quepan en una línea */
.portada-cuerpo { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }
.pase-fila { grid-template-columns: 100px minmax(0, 1fr); }
.seg span { padding: 8px 14px; gap: 7px; font-size: .97rem; }
@media (max-width: 960px) { .portada-cuerpo { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .pase-fila { grid-template-columns: 1fr; }
  .ciudad input { font-size: 1.4rem; }
}

/* ===== Fácil de usar para todas las edades =====
   Texto más grande, objetivos táctiles de 48 px, mejor contraste y etiquetas más visibles. */
body { font-size: 1.125rem; }
.pase { --suave: #3F4C74; }
.pase-etiqueta, .ciudad label { font-size: 1rem; color: var(--suave); }
.ciudad input::placeholder { color: #7A88B0; }
.pase-ayuda { margin-top: 10px; font-size: .98rem; color: #3F4C74; }
.paso { width: 48px; height: 48px; font-size: 1.5rem; }
.seg span { min-height: 48px; font-size: 1.05rem; }
.gustos-pase .gusto span { min-height: 48px; font-size: 1.05rem; }
.pase-nota summary { min-height: 44px; display: inline-flex; align-items: center; font-size: 1rem; }
.pase .pill { min-height: 58px; font-size: 1.1rem; }
.ciudad input[aria-invalid="true"] { border-bottom-color: var(--rojo); }
.pase .error { font-size: 1.02rem; }
.ver-mapa { min-height: 44px; font-size: .95rem; }
.parada-costo, .opcion-datos .parada-costo { color: #0B6E3F; }
.parada-pie { font-size: .92rem; }
.parada-desc, .opcion-detalle { font-size: 1rem; }
.armando-ayuda { margin-top: 8px; font-size: .98rem; color: var(--muted); }

/* ===== Barra "Atardecer caribeño": degradado naranja a rosado, letra Pacifico, desierto y mar ===== */
@font-face { font-family: "Pacifico"; font-weight: 400; font-display: swap; src: url("/fonts/pacifico-latin-400-normal.woff2") format("woff2"); }
.zona-cielo .barra {
  --bg: #FFFFFF; --text: #FFFFFF; --accent: #C8326E;
  background: linear-gradient(90deg, #FF8A3C 0%, #FF6F6A 45%, #FF5F7E 70%, #E8458B 100%);
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .2), 0 16px 38px rgba(90, 20, 50, .38);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.zona-cielo .barra::after {
  background:
    repeating-linear-gradient(90deg, #FFFFFF 0 18px, transparent 18px 34px) 0 calc(100% - 6px) / 34px 2px repeat-x,
    linear-gradient(#5A2340, #5A2340) 0 100% / 100% 14px no-repeat;
}
.zona-cielo .barra .marca-nombre { font-family: "Pacifico", cursive; font-size: 1.7rem; line-height: 1.2; color: #FFFFFF; text-shadow: 0 2px 0 rgba(120, 20, 50, .35); padding-bottom: 4px; }
.zona-cielo .barra .barra-enlace { background: #FFFFFF; color: #C8326E; box-shadow: 0 6px 16px rgba(120, 20, 50, .25); }
.zona-cielo .barra .barra-enlace .ico { color: #C8326E; }
.zona-cielo .barra .barra-enlace:hover { color: #9E1F55; }
.velero { animation: mecer 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center bottom; }
@keyframes mecer { 0%, 100% { transform: translate(860px, 22px) rotate(-3deg); } 50% { transform: translate(866px, 23px) rotate(3deg); } }
@media (max-width: 900px) { .zona-cielo .barra > .barra-escena { display: block; opacity: .7; } }
@media (max-width: 560px) { .zona-cielo .barra .marca-nombre { font-size: 1.4rem; } }
@media (prefers-reduced-motion: reduce) { .velero { animation: none; } }

/* ===== Ajuste visual general: zona clara en arena cálida, tarjetas blancas y acentos coral ===== */
:root {
  --bg: #FFF7EC; --hi: #FFFFFF; --lo: #EBD9C4;
  --text: #13204A; --muted: #574F6B; --line: #EEDFCC; --accent: #C8326E;
  --coral: #F0566E;
  --sombra-calida: 0 12px 32px rgba(150, 80, 30, .10), 0 2px 6px rgba(150, 80, 30, .06);
}
body {
  background:
    radial-gradient(900px 600px at 100% 30%, rgba(255, 111, 106, .10), transparent 70%),
    radial-gradient(800px 600px at 0% 75%, rgba(31, 181, 201, .10), transparent 70%),
    #FFF7EC;
  background-attachment: fixed;
}
main .raised, main .tiquete {
  background: #FFFFFF; border: 1px solid #F3E6D6; box-shadow: var(--sombra-calida);
}
main .inset { background: #FFF4E6; box-shadow: inset 0 1px 3px rgba(150, 80, 30, .10); }
.recibe:hover { box-shadow: 0 18px 40px rgba(150, 80, 30, .16); transform: translateY(-3px); }
.recibe .llave { border: 0; }
.seccion-titulo { color: var(--tinta); }
.seccion-cabeza p, .recibe p { color: var(--muted); }

/* Página del viaje */
.muesca { background: #FFF7EC; box-shadow: inset 0 2px 3px rgba(150, 80, 30, .12); }
.tiquete-talon::after { border-right-color: rgba(19, 32, 74, .22); }
.parada-pie span { background: #FFF4E6; box-shadow: none; }
.parada-lugar { color: var(--tinta); }
.ver-mapa { background: #FFF0F2; color: var(--accent); box-shadow: none; }
.ver-mapa:hover { background: #FFE2E8; }
.ver-mapa:active { box-shadow: inset 0 2px 4px rgba(200, 50, 110, .2); }
.aviso.raised { background: #FFF3C4; border-color: #FFDF80; color: #5A4300; }
.aviso .led { background: #E59A00; box-shadow: 0 0 8px #FFB000; }
.mapa-caja.inset { background: #FFFFFF; box-shadow: var(--sombra-calida); border: 1px solid #F3E6D6; }
.mapa { background: #EAF6F8; }
main .pill:not(.pill-primary) { background: #FFFFFF; box-shadow: var(--sombra-calida); border: 1px solid #F3E6D6; }
main .pill:not(.pill-primary) .pill-ico { color: var(--accent); border-right-color: #F3E6D6; }
.extra h2, .llegar h2 { color: var(--tinta); }

/* Chips sobre el cielo: más contraste */
.zona-cielo .chip.inset { background: rgba(255, 255, 255, .2); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.zona-cielo .datos li { background: rgba(255, 255, 255, .2); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }

/* Lista de espera: campo blanco y botón coral sólido */
.espera-form input { background: #FFFFFF; color: var(--tinta); box-shadow: 0 6px 16px rgba(4, 40, 70, .18); }
.espera-form input::placeholder { color: #6E7C9C; }
.espera .pill { background: linear-gradient(135deg, #FF8A3C, #E8458B); color: #FFFFFF; box-shadow: 0 10px 24px rgba(200, 50, 110, .35); border: 0; }
.espera .pill .pill-ico { color: #FFFFFF; border-right-color: rgba(255, 255, 255, .4); }
.espera p { color: #F2FCFF; }

/* Pie */
.pie { color: #6B5F55; }
/* Correcciones: íconos de color y botón de la lista de espera */
main .llave.raised { border: 0; }
main .llave-amarillo.raised { background: var(--g-amarillo); box-shadow: 0 10px 22px rgba(255, 176, 32, .35); }
main .llave-rojo.raised { background: var(--g-rosa); box-shadow: 0 10px 22px rgba(255, 79, 139, .32); }
main .llave-verde.raised { background: var(--g-verde); box-shadow: 0 10px 22px rgba(20, 154, 91, .3); }
main .espera .pill, main .espera .pill:not(.pill-primary) { background: linear-gradient(135deg, #FF8A3C, #E8458B); color: #FFFFFF; border: 0; box-shadow: 0 10px 24px rgba(200, 50, 110, .35); }
main .espera .pill .pill-ico { color: #FFFFFF; border-right-color: rgba(255, 255, 255, .45); }

/* Lilita One disponible para títulos */
@font-face { font-family: "Lilita One"; font-weight: 400; font-display: swap; src: url("/fonts/lilita-one-latin-400-normal.woff2") format("woff2"); }
/* El título de la portada queda en dos líneas: "¿Pa' dónde / vamos?" */
.portada .titular { max-width: none; font-size: clamp(2.8rem, 4.8vw, 4.8rem); line-height: 1; text-wrap: balance; }

/* ===== Portada centrada: título arriba y pase de viaje debajo ===== */
.portada-cuerpo { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 28px; }
.portada .titular {
  font-family: "Lilita One", var(--head); font-weight: 400; letter-spacing: .01em;
  color: #FFFFFF; text-shadow: 5px 5px 0 #E5332A;
  font-size: clamp(2.8rem, 5.6vw, 5.4rem); line-height: 1; max-width: none;
}
.portada .bajada { margin-inline: auto; max-width: 46ch; }
.portada .pase { width: 100%; max-width: 780px; text-align: left; }
.zona-cielo .viaje-destino { font-family: "Lilita One", var(--head); font-weight: 400; letter-spacing: .01em; color: #FFFFFF; text-shadow: 5px 5px 0 #E5332A; }
@media (max-width: 560px) {
  .portada .titular, .zona-cielo .viaje-destino { text-shadow: 4px 4px 0 #E5332A; }
  .portada-cuerpo { gap: 20px; }
}

/* ===== Barra blanca con halo de vidrio ===== */
.zona-cielo .barra {
  --bg: #FFFFFF; --text: #13204A; --accent: #C8326E;
  background: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 0 0 7px rgba(255, 255, 255, .28), 0 16px 38px rgba(4, 30, 60, .4);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.zona-cielo .barra::after {
  background:
    repeating-linear-gradient(90deg, #FFFFFF 0 18px, transparent 18px 34px) 0 calc(100% - 6px) / 34px 2px repeat-x,
    linear-gradient(#3A4150, #3A4150) 0 100% / 100% 14px no-repeat;
}
.zona-cielo .barra .marca-nombre { color: #C8326E; text-shadow: none; }
.zona-cielo .barra .barra-enlace { background: #13204A; color: #FFFFFF; box-shadow: 0 6px 16px rgba(19, 32, 74, .25); }
.zona-cielo .barra .barra-enlace .ico { color: var(--amarillo); }
.zona-cielo .barra .barra-enlace:hover { color: #FFFFFF; background: #1F3FBF; }

/* ===== Portada en dos columnas: título a la izquierda y pase de viaje a la derecha ===== */
.portada-cuerpo { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); justify-items: stretch; text-align: left; gap: clamp(28px, 4.5vw, 60px); align-items: center; }
.portada .titular { font-size: clamp(2.8rem, 5.2vw, 4.8rem); line-height: 1; }
.portada .titular .linea { display: block; white-space: nowrap; }
.portada .bajada { margin-inline: 0; max-width: 34ch; }
.portada .pase { width: 100%; max-width: none; }
.pista-mascota .seg span { gap: 10px; }
@media (max-width: 960px) {
  .portada-cuerpo { grid-template-columns: 1fr; }
  .portada .bajada { max-width: 46ch; }
}
/* Pase más compacto para que quepa con la fila de mascota */
.portada .pase { padding: 22px 28px 20px; }
.portada .pase-ruta { margin-top: 14px; grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr); }
.portada .pase-ayuda { margin-top: 8px; }
.portada .pase-fila { margin-top: 10px; grid-template-columns: 104px minmax(0, 1fr); }
.portada .pista { gap: 4px; padding: 5px; }
.portada .seg span { min-height: 44px; padding: 0 12px; font-size: 1rem; gap: 6px; }
.portada .gustos-pase { gap: 7px; }
.portada .gustos-pase .gusto span { min-height: 44px; padding: 0 14px; font-size: .95rem; gap: 8px; }
.portada .pase-nota { margin-top: 10px; }
@media (max-width: 560px) {
  .portada .pase { padding: 18px 16px; }
  .portada .pase-fila { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 560px) {
  .portada .pase-ruta { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); }
  .portada .ciudad input { font-size: 1.3rem; }
}

/* ===== Encabezado libre: logo y nombre directamente sobre el cielo ===== */
.zona-cielo .barra.barra-libre {
  background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  min-height: 76px; padding: 10px 0; border-radius: 0;
}
.zona-cielo .barra.barra-libre::after { display: none; }
.zona-cielo .barra-libre .marca { align-self: center; }
.zona-cielo .barra-libre .logo-vivo { align-self: center; margin-bottom: 0; }
.zona-cielo .barra-libre .marca-nombre { font-family: "Pacifico", cursive; font-size: 2rem; line-height: 1.25; color: #FFFFFF; text-shadow: none; padding-bottom: 6px; }
.zona-cielo .barra-libre .barra-enlace { min-height: 48px; padding: 0 22px; background: #FFFFFF; color: #13204A; font-weight: 800; box-shadow: 0 8px 22px rgba(4, 30, 60, .25); }
.zona-cielo .barra-libre .barra-enlace .ico { color: #C8326E; }
.zona-cielo .barra-libre .barra-enlace:hover { background: #FFF3C4; color: #13204A; }
.portada .chip.inset { gap: 8px; font-weight: 800; }
@media (max-width: 560px) {
  .zona-cielo .barra-libre .marca-nombre { font-size: 1.55rem; }
  .zona-cielo .barra-libre .barra-enlace { padding: 0 16px; }
}

/* ===== Cielo de atardecer en toda la app ===== */
.zona-cielo { background: radial-gradient(700px 360px at 76% 92%, rgba(255, 228, 92, .35), transparent 65%), linear-gradient(180deg, #3B2A8F 0%, #B83A8E 38%, #FF6F6A 66%, #FFB15C 86%, #FFD58A 100%); }
.zona-cielo::before { opacity: .9; }
.portada .titular, .zona-cielo .viaje-destino { text-shadow: 5px 5px 0 #3B2A8F; }
.zona-cielo .chip.inset { background: rgba(255, 255, 255, .16); }
.pase .seg input:checked + span { background: #3B2A8F; box-shadow: 0 6px 16px rgba(59, 42, 143, .35); }
.pase .pase-marca { color: #B83A8E; }
.zona-cielo .barra-libre .barra-enlace, .zona-cielo .barra-libre .barra-enlace .ico { color: #B83A8E; }
@media (max-width: 560px) { .portada .titular, .zona-cielo .viaje-destino { text-shadow: 4px 4px 0 #3B2A8F; } }
.perforacion::before, .perforacion::after { background: #E8607A; }
.armando h2 { font-family: "Pacifico", cursive; color: #FFFFFF; text-shadow: 4px 4px 0 #3B2A8F; line-height: 1.3; }
.armando .armando-texto { color: #FFFFFF; font-weight: 700; }

/* ===== Presupuesto en pesos ===== */
.portada .pase-fila-valor { margin-top: 8px; }
.presu-valor label { display: block; font-weight: 800; font-size: .98rem; color: var(--tinta); }
.presu-valor label span { display: block; font-weight: 600; font-size: .85rem; color: var(--suave); }
.campo-plata { display: flex; align-items: center; gap: 8px; margin-top: 6px; min-height: 52px; padding: 0 16px; border-radius: 16px; background: var(--pista); border: 2px solid transparent; transition: border-color .2s, background .2s; }
.campo-plata:focus-within { border-color: #3B2A8F; background: #FFFFFF; }
.campo-plata:has(input[aria-invalid="true"]) { border-color: #E5332A; background: #FFF2F1; }
.campo-plata input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: transparent; outline: none; font-family: var(--head); font-weight: 800; font-size: 1.3rem; color: var(--tinta); }
.campo-plata input::placeholder { color: #8390AE; }
.plata-signo { font-family: var(--head); font-weight: 800; font-size: 1.3rem; color: #3B2A8F; }
.plata-moneda { font-weight: 800; font-size: .85rem; color: var(--suave); }
.presu-ayuda { margin-top: 4px; font-size: .85rem; color: var(--suave); }
.presu-caja { margin-bottom: 22px; }
.presu-ok { border-left: 6px solid #149A5B !important; }
.presu-no { border-left: 6px solid #E59A00 !important; }
@media (max-width: 560px) { .portada .pase-fila-valor > .pase-etiqueta { display: none; } }
.presu-valor { min-width: 0; }
.campo-plata input { width: 100%; }
@media (max-width: 560px) { .portada .pase-fila { grid-template-columns: minmax(0, 1fr); } }

/* ===== Enlaces de aliados: dónde dormir y tours ===== */
.dormir { border-left: 6px solid #3B2A8F !important; }
.dormir-boton { margin-top: 16px; }
.parada-pie a.parada-reserva {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px;
  background: #3B2A8F; color: #FFFFFF; text-decoration: none; font-weight: 700;
  transition: background .2s, transform .15s;
}
.parada-pie a.parada-reserva:hover { background: #B83A8E; transform: translateY(-1px); }
.parada-pie a.parada-reserva:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }
.parada-reserva .ico { width: 15px; height: 15px; }
@media print { .parada-reserva, .dormir { display: none !important; } }

/* ===== Pie con enlaces legales ===== */
.pie-enlaces { display: flex; gap: 16px; flex-wrap: wrap; }
.pie-enlaces a { color: inherit; font-weight: 700; text-underline-offset: 3px; }
.pie-enlaces a:hover { color: var(--accent); }
.espera-legal { margin-top: 10px; font-size: .82rem; opacity: .92; max-width: 62ch; }
.espera-legal a { color: inherit; font-weight: 700; }

/* ===== Páginas legales ===== */
.legal-cabeza { padding-bottom: clamp(28px, 4vw, 44px); }
.legal-cabeza .barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.legal-logo { width: 56px; height: auto; }
.legal-titulo {
  margin-top: clamp(14px, 3vw, 28px); font-family: "Lilita One", var(--head); font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; color: #FFFFFF; text-shadow: 4px 4px 0 #3B2A8F; text-wrap: balance;
}
main .legal { max-width: 820px; margin: clamp(24px, 4vw, 40px) auto 48px; padding: clamp(22px, 4vw, 44px); border-radius: 30px; }
.legal h2 { margin-top: 30px; font-size: 1.25rem; font-weight: 800; color: var(--tinta); }
.legal p, .legal li { color: var(--muted); line-height: 1.65; }
.legal p { margin-top: 10px; }
.legal ul { margin: 10px 0 0; padding-left: 1.2em; display: grid; gap: 8px; }
.legal strong { color: var(--tinta); }
.legal a { color: var(--accent); font-weight: 700; text-underline-offset: 3px; }
.legal-intro { font-size: 1.08rem; color: var(--tinta) !important; margin-top: 0 !important; }
.legal-fecha { font-size: .9rem; font-weight: 700; }
@media (max-width: 560px) { .legal-logo { width: 44px; } }

/* ===== Botón Enviar por WhatsApp ===== */
main .pill.pill-wa, main .pill.pill-wa:not(.pill-primary) { background: #149A5B; color: #FFFFFF; border: 0; box-shadow: 0 10px 24px rgba(20, 154, 91, .3); text-decoration: none; }
main .pill.pill-wa .pill-ico { color: #FFFFFF; border-right-color: rgba(255, 255, 255, .4); }
main .pill.pill-wa:hover { background: #0F8A55; }
@media print { .pill-wa { display: none !important; } }