/* Viajapp web app. Same system as the landings: Geist, Tailwind type scale,
   the 0–96 px spacing ladder, Tailwind radii, one easing curve. */
@font-face { font-family: "Geist"; src: url("/fuentes/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --papel: #FBFAF6; --blanco: #FFFFFF; --hundido: #F2F0E9; --regla: #E5E2D8;
  --tinta: #191A16; --tinta60: #5B5D54; --tinta40: #6F7267; --tinta20: #A8AA9F;
  --naranja: #FF5A2B; --naranja-velo: #FFE7DD; --naranja-texto: #B8360A; --verde: #0E5A4E; --verde-velo: #DCEFE8;
  --lima: #D6F24B; /* a vote already asked for: the app's "Pedido" */
  --cobalto: #2B4AC8; --cobalto-velo: #E1E7FB; /* the app's water: beaches */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 40px; --s8: 48px; --s9: 64px; --s10: 80px; --s11: 96px;
  --lateral: 256px;
  --resorte: cubic-bezier(0.34, 1.56, 0.64, 1); /* a little overshoot, for things that land */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--papel); color: var(--tinta); font-family: "Geist", system-ui, sans-serif; font-size: 16px; line-height: 24px; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input { font: inherit; color: inherit; background: none; border: 0; }
button { cursor: pointer; }
h1, h2, h3 { font-weight: 600; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--naranja); outline-offset: 2px; border-radius: 8px; }
.ico { width: 20px; height: 20px; flex: none; }
.ico-s { width: 16px; height: 16px; flex: none; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: fixed; left: var(--s4); top: var(--s4); z-index: 200; padding: var(--s2) var(--s3); border-radius: 8px; background: var(--tinta); color: var(--papel); font-size: 14px; line-height: 20px; font-weight: 600; transform: translateY(-200%); transition: transform 500ms var(--ease); }
.saltar:focus { transform: none; }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); padding: var(--s2) var(--s3); border-radius: 9999px; font-size: 14px; line-height: 20px; font-weight: 600; transition: background-color 500ms var(--ease), transform 500ms var(--ease), color 500ms var(--ease); white-space: nowrap; }
.btn:active { transform: scale(0.98); }
.btn-negro { background: var(--tinta); color: var(--papel); }
.btn-negro:hover { background: #000; }
.btn-naranja { background: var(--naranja); color: var(--tinta); }
.btn-naranja:hover { background: #FF6D42; }
.btn-suave { background: var(--hundido); }
.btn-suave:hover { background: var(--regla); }
.btn-borde { box-shadow: inset 0 0 0 1px var(--regla); background: var(--blanco); }
.btn-borde:hover { background: var(--hundido); }
.btn[aria-pressed="true"] .ico { color: var(--naranja); }
.icono-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 9999px; transition: background-color 500ms var(--ease); }
.icono-btn:hover { background: var(--hundido); }
.chip { display: inline-flex; align-items: center; gap: var(--s1); padding: var(--s1) var(--s3); border-radius: 9999px; background: var(--hundido); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--tinta60); white-space: nowrap; }
.chip-naranja { background: var(--naranja-velo); color: var(--naranja-texto); }
.chip-verde { background: var(--verde-velo); color: var(--verde); }
.filtros { display: flex; flex-wrap: wrap; gap: var(--s2); }
.filtro { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s4); border-radius: 9999px; background: var(--hundido); font-size: 14px; line-height: 20px; font-weight: 600; transition: background-color 500ms var(--ease), color 500ms var(--ease); }
.filtro span { color: var(--tinta60); font-weight: 500; }
.filtro:hover { background: var(--regla); }
.filtro[aria-pressed="true"] { background: var(--tinta); color: var(--papel); }
.filtro[aria-pressed="true"] span { color: var(--tinta20); }

/* ── Login ───────────────────────────────────────────────────────── */
.login { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .login { grid-template-columns: minmax(440px, 5fr) 7fr; } }
.login-panel { display: flex; flex-direction: column; padding: var(--s6) var(--s5); }
@media (min-width: 768px) { .login-panel { padding: var(--s8) var(--s11); } }
.login-marca { display: inline-flex; align-items: center; gap: var(--s2); font-size: 18px; line-height: 28px; font-weight: 600; letter-spacing: -0.02em; }
.login-marca img { width: 32px; height: 32px; border-radius: 8px; }
.login-cuerpo { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--s6); max-width: 400px; padding: var(--s9) 0; }
.login-cuerpo h1 { font-size: 48px; line-height: 1; letter-spacing: -0.045em; color: var(--tinta); padding-bottom: var(--s1); }
.login-cuerpo > p { font-size: 18px; line-height: 28px; color: var(--tinta60); }
.proveedores { display: flex; flex-direction: column; gap: var(--s3); }
.proveedor { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: var(--s3); height: 48px; padding: var(--s2) var(--s3); border-radius: 12px; font-size: 16px; line-height: 24px; font-weight: 600; transition: background-color 500ms var(--ease), transform 500ms var(--ease), box-shadow 500ms var(--ease); }
.proveedor:active { transform: scale(0.98); }
.proveedor svg { width: 20px; height: 20px; }
.proveedor-apple { background: #000; color: #fff; }
.proveedor-apple:hover { background: #1F1F1F; }
.proveedor-google { background: var(--blanco); color: #1F1F1F; box-shadow: inset 0 0 0 1px #DADCE0; }
.proveedor-google:hover { background: #F8F9FA; }
.proveedor[aria-busy="true"] { pointer-events: none; }
.proveedor:disabled:not([aria-busy]) { opacity: 0.45; cursor: default; }
.proveedor[aria-busy="true"] .proveedor-texto { opacity: 0.6; }
.proveedor[aria-busy="true"]::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 40%; background: var(--naranja); animation: barrido 900ms var(--ease) infinite; }
@keyframes barrido { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
/* The way out, like the app's: small, underlined, muted ink, no arrow or brand
   colour. Visible and 44px tall, never hidden (App Review 5.1.1(v)). */
.legal { font-size: 12px; line-height: 16px; color: var(--tinta40); }
.legal a { text-decoration: underline; text-underline-offset: 2px; }
.login-pie { display: flex; gap: var(--s5); font-size: 12px; line-height: 16px; color: var(--tinta40); }
/* Email code: same height and corners as Apple and Google, quieter, and last. */
.proveedor-correo { background: var(--hundido); color: var(--tinta); }
.proveedor-correo:hover { background: var(--regla); }
.proveedor-correo[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--tinta20); }
.correo { display: flex; flex-direction: column; animation: correo-entra 500ms var(--ease); }
@keyframes correo-entra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.correo-paso { display: flex; flex-direction: column; gap: var(--s2); }
.correo-paso[hidden], .correo[hidden] { display: none; }
.correo-rotulo { font-size: 14px; line-height: 20px; font-weight: 600; }
.correo-campo { height: 48px; padding: 0 var(--s4); border-radius: 12px; background: var(--blanco); box-shadow: inset 0 0 0 1px var(--regla); font-size: 16px; line-height: 24px; transition: box-shadow 500ms var(--ease); }
.correo-campo:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--naranja); }
.correo-campo[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--naranja-texto); }
.correo-campo:disabled { opacity: 0.5; }
.correo-codigo { font-size: 24px; letter-spacing: 0.4em; text-align: center; font-variant-numeric: tabular-nums; }
.correo-ayuda { font-size: 14px; line-height: 20px; color: var(--tinta60); }
.correo-ayuda strong { color: var(--tinta); font-weight: 600; overflow-wrap: anywhere; }
.correo-accion { height: 48px; border-radius: 12px; font-size: 16px; line-height: 24px; margin-top: var(--s1); }
.correo-accion[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
.correo-enlaces { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); }
.correo-enlace { min-height: 44px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--tinta60); font-variant-numeric: tabular-nums; text-decoration: underline; text-underline-offset: 2px; }
.correo-enlace:disabled { color: var(--tinta40); text-decoration: none; cursor: default; }
.login-error { display: none; padding: var(--s3) var(--s4); border-radius: 12px; background: var(--naranja-velo); color: var(--naranja-texto); font-size: 14px; line-height: 20px; }
.login-error.on { display: block; }

.login-foto { position: relative; margin: var(--s4); border-radius: 24px; overflow: hidden; background: var(--tinta); min-height: 44vh; order: -1; }
@media (min-width: 1000px) { .login-foto { order: 0; min-height: calc(100vh - 32px); position: sticky; top: var(--s4); } }
.login-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1400ms var(--ease), transform 7000ms linear; }
.login-foto img.on { opacity: 1; transform: scale(1); }
.historias { position: absolute; left: var(--s5); right: var(--s5); top: var(--s5); display: flex; gap: var(--s1); z-index: 2; }
.historias button { flex: 1; height: 24px; display: flex; align-items: center; }
.historias button span { position: relative; display: block; width: 100%; height: 3px; border-radius: 9999px; background: rgba(255, 255, 255, 0.35); overflow: hidden; }
.historias button span::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0); }
.historias button.hecha span::after { transform: scaleX(1); }
.historias button.activa span::after { animation: historia var(--dur, 5200ms) linear forwards; }
.login-foto.pausada .historias button.activa span::after { animation-play-state: paused; }
@keyframes historia { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.foto-rotulo { position: absolute; left: var(--s5); bottom: var(--s5); z-index: 2; display: flex; flex-direction: column; gap: var(--s1); padding: var(--s4) var(--s5); border-radius: 16px; background: rgba(25, 26, 22, 0.42); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: #fff; max-width: calc(100% - 48px); }
.foto-rotulo strong { font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -0.03em; }
.foto-rotulo span { font-size: 14px; line-height: 20px; opacity: 0.85; }
.foto-rotulo .cambia { display: block; transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.foto-rotulo .cambia.fuera { opacity: 0; transform: translateY(8px); }

/* Focus moves to the view on every route change; it should not draw a ring around the page. */
#vista:focus { outline: none; }

/* ── Shell ───────────────────────────────────────────────────────── */
.shell { min-height: 100vh; }
.lateral { display: none; }
@media (min-width: 1000px) {
  .lateral { position: fixed; left: 0; top: 0; bottom: 0; width: var(--lateral); display: flex; flex-direction: column; gap: var(--s6); padding: var(--s5) var(--s4); border-right: 1px solid var(--regla); background: var(--papel); z-index: 20; }
  .shell-main { margin-left: var(--lateral); }
}
.lateral .login-marca { padding: 0 var(--s3); }
.menu-lateral { display: flex; flex-direction: column; gap: var(--s1); }
.menu-lateral a { position: relative; display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); border-radius: 12px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--tinta60); transition: background-color 500ms var(--ease), color 500ms var(--ease); }
.menu-lateral a:hover { background: var(--hundido); color: var(--tinta); }
.menu-lateral a[aria-current="page"] { background: var(--blanco); color: var(--tinta); box-shadow: 0 1px 2px rgba(25, 26, 22, 0.06), inset 0 0 0 1px var(--regla); font-weight: 600; }
.menu-lateral a[aria-current="page"] .ico { color: var(--naranja); }
.menu-lateral .cuenta-n { margin-left: auto; font-size: 12px; line-height: 16px; color: var(--tinta40); }
.lateral-pie { margin-top: auto; display: flex; flex-direction: column; gap: var(--s3); }
.estado-senal { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3); border-radius: 12px; background: var(--verde-velo); color: var(--verde); font-size: 12px; line-height: 16px; }
.estado-senal strong { display: block; font-size: 14px; line-height: 20px; }
.usuario { display: flex; align-items: center; gap: var(--s3); padding: var(--s2); border-radius: 12px; transition: background-color 500ms var(--ease); }
.usuario:hover { background: var(--hundido); }
.avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9999px; background: var(--tinta); color: var(--papel); font-size: 14px; line-height: 20px; font-weight: 600; flex: none; }
.usuario strong { display: block; font-size: 14px; line-height: 20px; }
.usuario span span { display: block; font-size: 12px; line-height: 16px; color: var(--tinta40); }

.barra { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s5); background: rgba(251, 250, 246, 0.82); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border-bottom: 1px solid transparent; transition: border-color 500ms var(--ease); }
.barra.con-borde { border-color: var(--regla); }
@media (min-width: 768px) { .barra { padding: var(--s3) var(--s8); } }
.barra .login-marca { font-size: 16px; line-height: 24px; }
@media (min-width: 1000px) { .barra .login-marca { display: none; } }
.buscador { flex: 1; max-width: 520px; display: flex; align-items: center; gap: var(--s3); height: 40px; padding: 0 var(--s3); border-radius: 12px; background: var(--hundido); color: var(--tinta60); font-size: 14px; line-height: 20px; text-align: left; transition: background-color 500ms var(--ease); }
.buscador:hover { background: var(--regla); }
.buscador kbd { margin-left: auto; font-family: inherit; font-size: 12px; line-height: 16px; padding: 2px var(--s2); border-radius: 4px; background: var(--blanco); box-shadow: inset 0 0 0 1px var(--regla); color: var(--tinta60); }
@media (max-width: 767px) { .buscador kbd { display: none; } }

.vista-cont { padding: var(--s6) var(--s5) var(--s11); max-width: 1280px; }
@media (min-width: 768px) { .vista-cont { padding: var(--s8) var(--s8) var(--s11); } }
@media (max-width: 999px) { .vista-cont { padding-bottom: calc(var(--s11) + var(--s10)); } }
.vista-entra > * { animation: sube 800ms var(--ease) both; }
.vista-entra > *:nth-child(2) { animation-delay: 60ms; }
.vista-entra > *:nth-child(3) { animation-delay: 120ms; }
.vista-entra > *:nth-child(4) { animation-delay: 180ms; }
.vista-entra > *:nth-child(n+5) { animation-delay: 240ms; }
@keyframes sube { from { opacity: 0; transform: translateY(24px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }

.tabbar { position: fixed; left: var(--s3); right: var(--s3); bottom: var(--s3); z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr); padding: var(--s1); border-radius: 24px; background: rgba(251, 250, 246, 0.88); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); box-shadow: 0 8px 32px rgba(25, 26, 22, 0.12), inset 0 0 0 1px rgba(25, 26, 22, 0.06); }
@media (min-width: 1000px) { .tabbar { display: none; } }
.tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--s2) 0; border-radius: 20px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--tinta40); transition: background-color 500ms var(--ease), color 500ms var(--ease); }
.tabbar a[aria-current="page"] { color: var(--tinta); background: var(--blanco); }
.tabbar a[aria-current="page"] .ico { color: var(--naranja); }

/* ── Headings ────────────────────────────────────────────────────── */
.cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s6); }
.cabeza h1 { font-size: 36px; line-height: 40px; letter-spacing: -0.04em; }
@media (min-width: 768px) { .cabeza h1 { font-size: 48px; line-height: 1; } }
.cabeza p { font-size: 16px; line-height: 24px; color: var(--tinta40); margin-top: var(--s2); }
.titulo-seccion { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); margin: var(--s9) 0 var(--s5); }
.titulo-seccion h2 { font-size: 24px; line-height: 32px; letter-spacing: -0.03em; }
.titulo-seccion a, .titulo-seccion button { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--tinta60); display: inline-flex; gap: var(--s1); align-items: center; }
.titulo-seccion a:hover, .titulo-seccion button:hover { color: var(--naranja-texto); }

/* ── Cards ───────────────────────────────────────────────────────── */
.tarjeta { background: var(--blanco); border-radius: 24px; box-shadow: 0 1px 2px rgba(25, 26, 22, 0.04), inset 0 0 0 1px var(--regla); }
.viaje-hoy { display: grid; gap: var(--s5); padding: var(--s5); }
@media (min-width: 900px) { .viaje-hoy { grid-template-columns: 1fr auto; align-items: center; padding: var(--s6); } }
.viaje-hoy .rotulo { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--naranja-texto); letter-spacing: 0.02em; }
.viaje-hoy h2 { font-size: 30px; line-height: 36px; letter-spacing: -0.03em; margin-top: var(--s1); }
.viaje-hoy p { font-size: 14px; line-height: 20px; color: var(--tinta40); margin-top: var(--s1); }
.fotos-viaje { display: flex; margin-top: var(--s4); }
.fotos-viaje img { width: 48px; height: 48px; border-radius: 9999px; object-fit: cover; box-shadow: 0 0 0 3px var(--blanco); }
.fotos-viaje img + img { margin-left: calc(-1 * var(--s3)); }
.faltan { display: flex; align-items: center; gap: var(--s5); }
.faltan-num strong { display: block; font-size: 72px; line-height: 1; font-weight: 600; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.faltan-num span { font-size: 14px; line-height: 20px; color: var(--tinta40); }
.anillo { position: relative; width: 88px; height: 88px; flex: none; }
.anillo svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anillo circle { fill: none; stroke-width: 8; }
.anillo .fondo-anillo { stroke: var(--hundido); }
.anillo .avance { stroke: var(--naranja); stroke-linecap: round; transition: stroke-dashoffset 1200ms var(--ease); }
.anillo b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 18px; line-height: 28px; font-weight: 600; }
.anillo b small { display: block; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--tinta40); text-align: center; margin-top: -8px; }

.carrusel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: var(--s4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s2); scrollbar-width: none; }
.carrusel::-webkit-scrollbar { display: none; }
@media (min-width: 1200px) { .carrusel { grid-auto-columns: calc((100% - 48px) / 4); } }
.ciudad-card { position: relative; scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--s3); }
.ciudad-card .foto { position: relative; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: var(--regla); }
.ciudad-card .foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease); }
.ciudad-card:hover .foto img { transform: scale(1.05); }
.ciudad-card .foto .chip { position: absolute; left: var(--s3); top: var(--s3); background: rgba(251, 250, 246, 0.92); color: var(--tinta); }
.ciudad-card h3 { font-size: 18px; line-height: 28px; letter-spacing: -0.02em; }
.ciudad-card p { font-size: 14px; line-height: 20px; color: var(--tinta40); margin-top: calc(-1 * var(--s3)); }
.grilla-ciudades { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5) var(--s4); }
@media (min-width: 768px) { .grilla-ciudades { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .grilla-ciudades { grid-template-columns: repeat(4, 1fr); } }
.vacio { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: var(--s3); padding: var(--s10) var(--s5); border-radius: 24px; background: var(--hundido); text-align: center; }
.vacio h3 { font-size: 20px; line-height: 28px; }
.vacio p { font-size: 14px; line-height: 20px; color: var(--tinta60); max-width: 360px; }

/* ── City ────────────────────────────────────────────────────────── */
.volver { display: inline-flex; align-items: center; gap: var(--s2); margin-bottom: var(--s5); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--tinta60); transition: gap 500ms var(--ease), color 500ms var(--ease); }
.volver:hover { gap: var(--s3); color: var(--tinta); }
.portada { position: relative; aspect-ratio: 16 / 7; border-radius: 24px; overflow: hidden; background: var(--regla); }
@media (max-width: 767px) { .portada { aspect-ratio: 4 / 3; } }
.portada img { width: 100%; height: 100%; object-fit: cover; }
.portada .foto-rotulo strong { font-size: 48px; line-height: 1; letter-spacing: -0.045em; }
@media (max-width: 767px) { .portada .foto-rotulo strong { font-size: 30px; line-height: 36px; } .portada .foto-rotulo { left: var(--s3); bottom: var(--s3); padding: var(--s3) var(--s4); } }
.ficha-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); margin: var(--s6) 0 var(--s5); }
.ficha-cabeza h1 { font-size: 30px; line-height: 36px; letter-spacing: -0.035em; }
.ficha-cabeza h1 em { font-style: normal; color: var(--naranja-texto); }
.ficha-cabeza p { font-size: 14px; line-height: 20px; color: var(--tinta40); margin-top: var(--s1); }
.acciones { display: flex; gap: var(--s2); flex-wrap: wrap; }

.pestanas { position: relative; display: inline-flex; gap: var(--s1); padding: var(--s1); border-radius: 9999px; background: var(--hundido); margin-bottom: var(--s6); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas button { position: relative; z-index: 1; padding: var(--s2) var(--s4); border-radius: 9999px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--tinta60); transition: color 500ms var(--ease); white-space: nowrap; }
.pestanas button[aria-selected="true"] { color: var(--tinta); }
.pestanas .indicador { position: absolute; top: var(--s1); bottom: var(--s1); left: 0; border-radius: 9999px; background: var(--blanco); box-shadow: 0 1px 3px rgba(25, 26, 22, 0.1); transition: transform 600ms var(--ease), width 600ms var(--ease); }

.dos-col { display: grid; gap: var(--s6); }
@media (min-width: 1100px) { .dos-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.mapa-pegado { position: sticky; top: 88px; }
.mapa-ciudad { width: 100%; aspect-ratio: 1; border-radius: 24px; background: var(--hundido); overflow: hidden; }
.mapa-ciudad svg { width: 100%; height: 100%; display: block; }
.mapa-ciudad .trama { stroke: var(--regla); stroke-width: 1; }
.mapa-ciudad .ruta { fill: none; stroke: var(--naranja); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 7; transition: opacity 500ms var(--ease); }
.pin { cursor: pointer; transition: opacity 500ms var(--ease); }
.pin circle { fill: var(--tinta); stroke: var(--blanco); stroke-width: 3; transition: fill 400ms var(--ease), transform 400ms var(--ease); transform-box: fill-box; transform-origin: center; }
.pin text { fill: var(--papel); font-size: 12px; font-weight: 600; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.pin.on circle { fill: var(--naranja); transform: scale(1.25); }
.pin.apagado { opacity: 0.18; }
/* The real map sits over the drawn one and fades in when its tiles arrive. */
.mapa-ciudad { position: relative; }
.mapa-ciudad > .mapa-vivo { position: absolute; inset: 0; opacity: 0; transition: opacity 600ms var(--ease); }
.mapa-ciudad.vivo .mapa-vivo { opacity: 1; }
.mapa-ciudad > .mapa-vivo, .mapa-vivo .maplibregl-ctrl-attrib { font-family: "Geist", system-ui, sans-serif; }
.mapa-vivo .maplibregl-canvas { outline: none; }
.pin-vivo { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; background: none; border: 0; cursor: pointer; }
.pin-vivo span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tinta); color: var(--papel); border: 2.5px solid var(--blanco); box-shadow: 0 2px 6px rgba(25, 26, 22, 0.25); font-family: "Geist", system-ui, sans-serif; font-size: 12px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; transition: background-color 400ms var(--ease), scale 400ms var(--ease); }
.pin-vivo.on, .pin-vivo:focus-visible { z-index: 1; }
.pin-vivo.on span, .pin-vivo:focus-visible span { background: var(--naranja); scale: 1.2; }
.pin-vivo:focus-visible { outline: 2px solid var(--tinta); outline-offset: 0; border-radius: 50%; }
/* The ranking tab: beaches in the guides' order and neighbourhoods by who travels.
   Beaches wear the app's beach tint (pale blue, cobalt number); neighbourhoods are ink labels. */
.bloque-ranking + .bloque-ranking { margin-top: var(--s8); }
.bloque-ranking h2 { font-size: 24px; line-height: 32px; letter-spacing: -0.03em; }
.bloque-ranking .bajada { margin-top: var(--s2); color: var(--tinta60); }
.lista-ranking { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s5); }
.fila-ranking { display: grid; grid-template-columns: 32px 1fr; gap: var(--s4); align-items: start; width: 100%; padding: var(--s4); border-radius: 16px; text-align: left; background: var(--blanco); box-shadow: inset 0 0 0 1px var(--regla); transition: box-shadow 400ms var(--ease), background-color 400ms var(--ease); }
.fila-ranking:hover, .fila-ranking.on { box-shadow: inset 0 0 0 2px var(--cobalto); }
.fila-ranking .n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9999px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.n-playa { background: var(--cobalto-velo); color: var(--cobalto); }
.n-barrio { background: var(--hundido); }
.n-barrio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tinta); }
.fila-ranking .nm { display: block; font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; }
.para-quien { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s2); }
.para-quien span { padding: 2px var(--s2); border-radius: 8px; background: var(--hundido); color: var(--tinta60); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.fila-ranking .frase { display: block; margin-top: var(--s2); }
.fila-ranking .dias { display: block; margin-top: var(--s1); font-size: 14px; line-height: 20px; color: var(--tinta60); }
.bloque-ranking .fuente { margin-top: var(--s3); font-size: 13px; line-height: 18px; color: var(--tinta40); }
.filtros-ranking { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.lista-dormir { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s4); }
.lista-dormir li { display: flex; align-items: center; gap: var(--s3); font-weight: 600; }
.lista-dormir li .n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9999px; background: var(--tinta); color: var(--papel); font-size: 13px; font-variant-numeric: tabular-nums; }
.lista-dormir li small { font-weight: 500; color: var(--tinta40); }
.lista-dormir .ayuda { font-weight: 500; color: var(--tinta60); }
.bloque-ranking + .llamado-app { margin-top: var(--s6); }
.mapa-ranking .mapa-espera { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); padding: var(--s6); text-align: center; font-size: 14px; line-height: 20px; color: var(--tinta60); }
.pin-playa span { background: var(--cobalto-velo); color: var(--cobalto); }
.pin-playa.on span, .pin-playa:focus-visible span { background: var(--cobalto); color: var(--blanco); }
.pin-barrio { padding: 4px 10px; border-radius: 9999px; background: var(--tinta); color: var(--papel); border: 2px solid var(--blanco); box-shadow: 0 2px 6px rgba(25, 26, 22, 0.25); font-family: "Geist", system-ui, sans-serif; font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; transition: background-color 400ms var(--ease), scale 400ms var(--ease); }
.pin-barrio.on, .pin-barrio:focus-visible { background: var(--naranja); color: var(--tinta); scale: 1.1; z-index: 1; }
.pin-barrio:focus-visible, .pin-playa:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.mapa-vivo .maplibregl-ctrl-group { border-radius: 12px; box-shadow: 0 1px 3px rgba(25, 26, 22, 0.12); overflow: hidden; }
.mapa-vivo .maplibregl-ctrl-attrib { font-size: 11px; background: rgba(251, 250, 246, 0.85); }
.mapa-vivo .maplibregl-cooperative-gesture-screen { font-size: 15px; background: rgba(25, 26, 22, 0.55); }
/* The Mapa tab: the real world replaces the drawn one, at its own height. */
.mapa-mundo > .mapa-mundo-vivo { position: absolute; inset: 0; opacity: 0; transition: opacity 600ms var(--ease); font-family: "Geist", system-ui, sans-serif; }
.mapa-mundo.vivo { overflow: hidden; }
.mapa-mundo.vivo > .mapa-lienzo { display: none; }
.mapa-mundo.vivo > .mapa-mundo-vivo { position: relative; opacity: 1; height: clamp(420px, 64vh, 680px); }
.mapa-mundo-vivo .maplibregl-canvas { outline: none; }
.mapa-mundo-vivo .maplibregl-ctrl-group { border-radius: 12px; box-shadow: 0 1px 3px rgba(25, 26, 22, 0.12); overflow: hidden; }
.mapa-mundo-vivo .maplibregl-ctrl-attrib { font-size: 11px; background: rgba(251, 250, 246, 0.85); }
.mapa-mundo-vivo .maplibregl-cooperative-gesture-screen { font-size: 15px; background: rgba(25, 26, 22, 0.55); }
.pin-mundo { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; background: none; border: 0; cursor: pointer; transition: opacity 500ms var(--ease); }
.pin-mundo i { width: 14px; height: 14px; border-radius: 50%; background: var(--naranja); border: 2px solid var(--blanco); box-shadow: 0 1px 4px rgba(25, 26, 22, 0.3); transition: scale 400ms var(--ease); }
.pin-mundo.proximo i { width: 12px; height: 12px; background: var(--papel); border: 2px solid var(--tinta); }
.pin-mundo.on, .pin-mundo:focus-visible { z-index: 1; }
.pin-mundo.on i, .pin-mundo:focus-visible i { scale: 1.6; }
.pin-mundo:focus-visible { outline: 2px solid var(--tinta); outline-offset: -2px; border-radius: 50%; }
.pin-mundo.apagado { opacity: 0.15; pointer-events: none; }
.tip-mundo .maplibregl-popup-content { padding: var(--s2); border-radius: 20px; background: var(--blanco); box-shadow: 0 12px 32px rgba(25, 26, 22, 0.16); font-family: "Geist", system-ui, sans-serif; }
.tip-mundo .maplibregl-popup-tip { display: none; }
.tip-mundo img, .tip-mundo .sin-foto { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }
.tip-mundo strong { display: block; padding: var(--s2) var(--s2) 0; font-size: 16px; line-height: 24px; color: var(--tinta); }
.tip-mundo span:not(.sin-foto) { display: block; padding: 0 var(--s2) var(--s1); font-size: 12px; line-height: 16px; color: var(--tinta40); }
.punto-lugar { fill: var(--tinta20); }

.lista-lugares { display: flex; flex-direction: column; }
.fila-lugar { display: grid; grid-template-columns: 40px 1fr auto; gap: var(--s4); align-items: center; padding: var(--s4) var(--s3); border-radius: 16px; text-align: left; width: 100%; transition: background-color 400ms var(--ease); }
.fila-lugar + .fila-lugar { box-shadow: 0 -1px 0 var(--hundido); }
.fila-lugar:hover, .fila-lugar.on { background: var(--blanco); box-shadow: inset 0 0 0 1px var(--regla); }
.fila-lugar .n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9999px; background: var(--tinta); color: var(--papel); font-size: 14px; line-height: 20px; font-weight: 600; transition: background-color 400ms var(--ease); }
.fila-lugar.on .n, .fila-lugar:hover .n { background: var(--naranja); color: var(--tinta); }
.fila-lugar .nm { display: block; font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; }
.fila-lugar .meta { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; font-size: 12px; line-height: 16px; color: var(--tinta40); margin-top: 2px; }
.estrellas { display: inline-flex; align-items: center; gap: 2px; color: var(--tinta60); font-weight: 600; }
.estrellas .ico-s { width: 12px; height: 12px; color: var(--naranja); }
.candado { display: inline-flex; align-items: center; gap: var(--s1); font-size: 12px; line-height: 16px; color: var(--tinta40); }
/* The essentials the app keeps for buyers: same row, nothing to open. */
.fila-lugar.bloqueada { cursor: default; }
.fila-lugar.bloqueada:hover { background: none; box-shadow: none; }
.fila-lugar.bloqueada + .fila-lugar, .fila-lugar + .fila-lugar.bloqueada { box-shadow: 0 -1px 0 var(--hundido); }
.fila-lugar.bloqueada .n, .fila-lugar.bloqueada:hover .n { background: var(--hundido); color: var(--tinta40); }
.fila-lugar.bloqueada .nm { color: var(--tinta60); }
/* What the app adds, said once at the end of a tab. */
.llamado-app { display: grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items: start; margin-top: var(--s5); padding: var(--s5); }
.llamado-app .icono { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--naranja-velo); color: var(--naranja-texto); }
.llamado-app h3 { font-size: 18px; line-height: 28px; letter-spacing: -0.02em; }
.llamado-app p { font-size: 14px; line-height: 20px; color: var(--tinta60); margin-top: 2px; }
.llamado-app .btn-tienda { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 900px) { .llamado-app { grid-template-columns: auto 1fr auto; align-items: center; } .llamado-app .btn-tienda { grid-column: auto; } }
.dias-plan { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); list-style: none; padding: 0; }
.dias-plan li { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s5); }
.dias-plan small { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--naranja-texto); }
.dias-plan strong { font-size: 18px; line-height: 28px; letter-spacing: -0.02em; }
.dias-plan span { font-size: 14px; line-height: 20px; color: var(--tinta60); }
.tramo { display: flex; align-items: center; gap: var(--s2); padding: var(--s1) 0 var(--s1) 26px; font-size: 12px; line-height: 16px; color: var(--tinta40); }
.tramo::before { content: ""; height: 20px; margin-right: var(--s3); border-left: 2px dotted var(--tinta20); }

.dias { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s5); }
.dia-btn { display: flex; flex-direction: column; align-items: flex-start; padding: var(--s3) var(--s4); border-radius: 16px; background: var(--hundido); text-align: left; transition: background-color 500ms var(--ease), color 500ms var(--ease); }
.dia-btn small { font-size: 12px; line-height: 16px; color: var(--tinta60); font-weight: 500; }
.dia-btn strong { font-size: 14px; line-height: 20px; }
.dia-btn:hover { background: var(--regla); }
.dia-btn[aria-pressed="true"] { background: var(--tinta); color: var(--papel); }
.dia-btn[aria-pressed="true"] small { color: var(--tinta20); }

.guia-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s4); }
.guia-item { display: flex; flex-direction: column; gap: var(--s5); padding: var(--s5); min-height: 160px; justify-content: space-between; }
.guia-item h3 { font-size: 18px; line-height: 28px; letter-spacing: -0.02em; }
.clima { padding: var(--s5); margin-top: var(--s4); }
.clima h3 { font-size: 18px; line-height: 28px; }
.clima p { font-size: 14px; line-height: 20px; color: var(--tinta40); }
.clima-barras { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s1); align-items: end; height: 160px; margin-top: var(--s5); }
.clima-barras div { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.clima-barras .barra-t { border-radius: 8px; background: var(--hundido); transition: background-color 400ms var(--ease); }
.clima-barras div:hover .barra-t, .clima-barras div.ahora .barra-t { background: var(--naranja); }
.clima-barras span { font-size: 12px; line-height: 16px; color: var(--tinta40); text-align: center; margin-top: var(--s2); }
.clima-barras b { font-size: 12px; line-height: 16px; text-align: center; margin-bottom: var(--s1); font-weight: 600; }
@media (min-width: 600px) { .clima-barras { gap: var(--s2); } }
/* Twelve temperatures do not fit on a small phone; the bars and the month still do. */
@media (max-width: 479px) { .clima-barras b { display: none; } }

/* A city whose photo is not licensed yet gets a type tile. */
.sin-foto { display: flex; align-items: flex-end; width: 100%; height: 100%; padding: var(--s4); background: var(--tinta); color: var(--naranja); font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.03em; }
.globo-tip .sin-foto { aspect-ratio: 4 / 3; border-radius: 16px; }

/* `hidden` must win over the display these two set, or a closed dialog stays in the page. */
.cajon[hidden], .paleta[hidden] { display: none; }

/* ── Drawer ──────────────────────────────────────────────────────── */
.velo { position: fixed; inset: 0; z-index: 60; background: rgba(25, 26, 22, 0.32); opacity: 0; pointer-events: none; transition: opacity 600ms var(--ease); }
.velo.on { opacity: 1; pointer-events: auto; }
.cajon { position: fixed; z-index: 61; top: var(--s3); right: var(--s3); bottom: var(--s3); width: min(440px, calc(100vw - 24px)); display: flex; flex-direction: column; border-radius: 24px; background: var(--papel); box-shadow: 0 24px 64px rgba(25, 26, 22, 0.24); transform: translateX(calc(100% + 24px)); transition: transform 700ms var(--ease); overflow: hidden; }
.cajon.on { transform: none; }
.cajon-cabeza { display: flex; justify-content: space-between; align-items: center; padding: var(--s4) var(--s4) 0 var(--s5); }
.cajon-cuerpo { flex: 1; overflow-y: auto; padding: var(--s4) var(--s5) var(--s6); display: flex; flex-direction: column; gap: var(--s5); }
.cajon-cuerpo h2 { font-size: 30px; line-height: 36px; letter-spacing: -0.035em; }
.cajon-meta { font-size: 14px; line-height: 20px; color: var(--tinta40); margin-top: var(--s1); }
.datos-lugar { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.datos-lugar div { padding: var(--s3); border-radius: 16px; background: var(--hundido); }
.datos-lugar small { display: block; font-size: 12px; line-height: 16px; color: var(--tinta60); }
.datos-lugar strong { font-size: 16px; line-height: 24px; }
.nota-bloqueada { position: relative; padding: var(--s5); border-radius: 16px; background: var(--blanco); box-shadow: inset 0 0 0 1px var(--regla); overflow: hidden; }
.nota-bloqueada .borroso { font-size: 16px; line-height: 24px; color: var(--tinta60); filter: blur(5px); user-select: none; }
.nota-bloqueada .sobre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3); text-align: center; padding: var(--s5); background: rgba(255, 255, 255, 0.55); }
.nota-bloqueada .sobre p { font-size: 14px; line-height: 20px; font-weight: 600; }

/* ── Trip ────────────────────────────────────────────────────────── */
.viaje-grilla { display: grid; gap: var(--s5); }
@media (min-width: 1100px) { .viaje-grilla { grid-template-columns: 3fr 2fr; align-items: start; } }
.itinerario-viaje { padding: var(--s5); }
.etapa { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--s4); align-items: center; padding: var(--s3) 0; }
.etapa + .etapa { border-top: 1px solid var(--hundido); }
.etapa img { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; }
.etapa h3 { font-size: 18px; line-height: 28px; }
.etapa p { font-size: 14px; line-height: 20px; color: var(--tinta40); }
.herramientas { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
.herramienta { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s4); text-align: left; transition: transform 500ms var(--ease), box-shadow 500ms var(--ease); }
.herramienta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(25, 26, 22, 0.08), inset 0 0 0 1px var(--regla); }
.herramienta .icono { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--hundido); }
.herramienta strong { display: block; font-size: 14px; line-height: 20px; }
.herramienta span { font-size: 12px; line-height: 16px; color: var(--tinta40); }
.checklist { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s4); }
.checklist h2 { font-size: 16px; line-height: 24px; padding: 0 var(--s2) var(--s2); }
.check { display: flex; align-items: center; gap: var(--s3); padding: var(--s2); border-radius: 12px; font-size: 14px; line-height: 20px; text-align: left; width: 100%; transition: background-color 400ms var(--ease); }
.check:hover { background: var(--hundido); }
.check .caja { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--regla); transition: background-color 400ms var(--ease), box-shadow 400ms var(--ease); flex: none; }
.check .caja .ico-s { opacity: 0; transform: scale(0.5); transition: opacity 400ms var(--ease), transform 400ms var(--ease); color: var(--blanco); }
.check[aria-checked="true"] .caja { background: var(--verde); box-shadow: none; }
.check[aria-checked="true"] .caja .ico-s { opacity: 1; transform: none; }
.check[aria-checked="true"] .t { color: var(--tinta40); text-decoration: line-through; }
.check small { margin-left: auto; font-size: 12px; line-height: 16px; color: var(--tinta40); }

/* ── Maps ────────────────────────────────────────────────────────── */
.mapa-mundo { position: relative; border-radius: 24px; background: var(--hundido); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.mapa-mundo::-webkit-scrollbar { display: none; }
/* On a phone the world keeps a size you can tap, and slides sideways. */
.mapa-lienzo { position: relative; min-width: 760px; }
.mapa-mundo svg { width: 100%; height: auto; display: block; }
.mapa-mundo .tierra path { fill: #E2DED3; stroke: var(--hundido); stroke-width: 0.6; transition: fill 500ms var(--ease); }
.mapa-mundo .ciudad-pin { cursor: pointer; }
.mapa-mundo .ciudad-pin circle { fill: var(--naranja); stroke: var(--blanco); stroke-width: 1.5; transition: transform 400ms var(--ease); transform-box: fill-box; transform-origin: center; }
.mapa-mundo .ciudad-pin:hover circle, .mapa-mundo .ciudad-pin.on circle { transform: scale(1.8); }
.globo-tip { position: absolute; z-index: 3; width: 200px; pointer-events: none; opacity: 0; transform: translate(-50%, calc(-100% - 16px)) scale(0.96); transition: opacity 400ms var(--ease), transform 400ms var(--ease); padding: var(--s2); }
.globo-tip.on { opacity: 1; transform: translate(-50%, calc(-100% - 16px)); }
.globo-tip.abajo { transform: translate(-50%, 16px) scale(0.96); }
.globo-tip.abajo.on { transform: translate(-50%, 16px); }
.globo-tip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }
.globo-tip strong { display: block; padding: var(--s2) var(--s2) 0; font-size: 16px; line-height: 24px; }
.globo-tip span { display: block; padding: 0 var(--s2) var(--s1); font-size: 12px; line-height: 16px; color: var(--tinta40); }
.pasaporte .tierra path { cursor: pointer; }
.pasaporte .tierra path:hover { fill: #D3CFC2; }
.pasaporte .tierra path.visitado { fill: var(--naranja); }
.pasaporte .tierra path.visitado:hover { fill: #FF6D42; }
.pasaporte-grilla { display: grid; gap: var(--s5); }
@media (min-width: 1100px) { .pasaporte-grilla { grid-template-columns: 2fr 1fr; align-items: start; } }
/* Grid items default to min-width: auto; the scrolling map would stretch the column past the screen. */
.pasaporte-grilla > *, .viaje-grilla > *, .dos-col > * { min-width: 0; }
.pasaporte-num { padding: var(--s5); }
.sin-mancha { margin-top: var(--s6); }
.sin-mancha h2 { font-size: 20px; line-height: 28px; letter-spacing: -0.02em; }
.sin-mancha p { font-size: 14px; line-height: 20px; color: var(--tinta40); margin: var(--s1) 0 var(--s4); }
.sin-mancha .filtro { font-weight: 500; }
.sin-mancha .filtro[aria-pressed="true"] { background: var(--naranja); color: var(--tinta); }
.pasaporte-num > strong { font-size: 72px; line-height: 1; font-weight: 600; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.pasaporte-num p { font-size: 14px; line-height: 20px; color: var(--tinta40); margin-top: var(--s2); }
.continentes { display: flex; flex-direction: column; gap: var(--s4); margin-top: var(--s6); }
.continente { display: flex; flex-direction: column; gap: var(--s2); font-size: 14px; line-height: 20px; }
.continente div:first-child { display: flex; justify-content: space-between; }
.continente div:first-child span { color: var(--tinta40); font-variant-numeric: tabular-nums; }
.progreso { height: 6px; border-radius: 9999px; background: var(--hundido); overflow: hidden; }
.progreso i { display: block; height: 100%; border-radius: inherit; background: var(--naranja); transition: width 900ms var(--ease); }
.visitados { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }

/* The passport's search box. */
.marcar-pais { display: flex; gap: var(--s2); margin-bottom: var(--s2); }
.marcar-pais .buscador { min-width: 0; } /* lets the field shrink so the button stays on screen */
.marcar-error { min-height: 20px; margin-bottom: var(--s3); font-size: 14px; line-height: 20px; color: var(--naranja-texto); }

img.avatar { object-fit: cover; padding: 0; }
.nota-cuenta { display: flex; gap: var(--s2); align-items: flex-start; padding: var(--s3) var(--s4); border-radius: 16px; background: var(--hundido); font-size: 14px; line-height: 20px; color: var(--tinta60); }
.nota-cuenta .ico-s { margin-top: 2px; }
.confirmar { margin: var(--s1) var(--s2) var(--s2); padding: var(--s4); border-radius: 16px; background: var(--naranja-velo); display: flex; flex-direction: column; gap: var(--s3); font-size: 14px; line-height: 20px; }
.confirmar[hidden] { display: none; }
.confirmar-error { color: var(--naranja-texto); font-weight: 600; }
.confirmar-error:empty { display: none; }
.ajuste:disabled { cursor: default; }
.ajuste:disabled .interruptor { opacity: 0.5; }

/* Without signal: the download card, and a chip in the bar while offline. */
.sin-red .barra::after { content: "Sin conexión"; margin-left: auto; padding: var(--s1) var(--s3); border-radius: 9999px; background: var(--hundido); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--tinta60); }

/* ── Account ─────────────────────────────────────────────────────── */
.vos-grilla { display: grid; gap: var(--s5); max-width: 880px; }
.perfil { display: flex; align-items: center; gap: var(--s4); padding: var(--s5); }
.perfil .avatar { width: 64px; height: 64px; font-size: 24px; line-height: 32px; }
.perfil h2 { font-size: 24px; line-height: 32px; letter-spacing: -0.03em; }
.perfil p { font-size: 14px; line-height: 20px; color: var(--tinta40); display: flex; align-items: center; gap: var(--s1); }
.plan { display: grid; gap: var(--s5); padding: var(--s6); border-radius: 24px; background: var(--tinta); color: var(--papel); }
@media (min-width: 768px) { .plan { grid-template-columns: 1fr auto; align-items: center; } }
.plan h2 { font-size: 30px; line-height: 36px; letter-spacing: -0.035em; }
.plan p { font-size: 16px; line-height: 24px; color: rgba(251, 250, 246, 0.72); margin-top: var(--s2); max-width: 480px; }
.ajustes { padding: var(--s2); }
.ajuste { display: flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--s4); border-radius: 16px; width: 100%; text-align: left; transition: background-color 400ms var(--ease); }
.ajuste:hover { background: var(--hundido); }
.ajuste strong { display: block; font-size: 16px; line-height: 24px; }
.ajuste span { display: block; font-size: 14px; line-height: 20px; color: var(--tinta60); }
.ajuste .icono { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--hundido); flex: none; }
.interruptor { margin-left: auto; position: relative; width: 44px; height: 26px; border-radius: 9999px; background: var(--regla); flex: none; transition: background-color 500ms var(--ease); }
.interruptor::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 9999px; background: var(--blanco); box-shadow: 0 1px 3px rgba(25, 26, 22, 0.2); transition: transform 500ms var(--ease); }
[aria-checked="true"] > .interruptor { background: var(--verde); }
[aria-checked="true"] > .interruptor::after { transform: translateX(18px); }
.salir { color: var(--naranja-texto); }
.salir .icono { background: var(--naranja-velo); }

/* ── Command palette ─────────────────────────────────────────────── */
.paleta { position: fixed; z-index: 81; left: 50%; top: 12vh; width: min(600px, calc(100vw - 24px)); border-radius: 24px; background: var(--papel); box-shadow: 0 32px 80px rgba(25, 26, 22, 0.3), inset 0 0 0 1px var(--regla); overflow: hidden; opacity: 0; transform: translate(-50%, -8px) scale(0.98); pointer-events: none; transition: opacity 400ms var(--ease), transform 500ms var(--ease); }
.paleta.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.paleta-velo { z-index: 80; }
.paleta-campo { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--regla); }
.paleta-campo input { flex: 1; font-size: 18px; line-height: 28px; outline: none; }
.paleta-lista { max-height: 50vh; overflow-y: auto; padding: var(--s2); }
.paleta-item { cursor: pointer; display: flex; align-items: center; gap: var(--s3); width: 100%; padding: var(--s2) var(--s3); border-radius: 12px; text-align: left; font-size: 14px; line-height: 20px; }
.paleta-item img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; }
.paleta-item .icono { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: var(--hundido); }
.paleta-item small { display: block; font-size: 12px; line-height: 16px; color: var(--tinta40); }
.paleta-item[aria-selected="true"] { background: var(--blanco); box-shadow: inset 0 0 0 1px var(--regla); }
.paleta-item kbd { margin-left: auto; font-family: inherit; font-size: 12px; line-height: 16px; color: var(--tinta40); }
.paleta-grupo { padding: var(--s3) var(--s3) var(--s1); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--tinta40); }
.paleta-vacia { padding: var(--s6) var(--s5); text-align: center; font-size: 14px; line-height: 20px; color: var(--tinta40); }

/* ── Toast ───────────────────────────────────────────────────────── */
.aviso { max-width: calc(100vw - 32px); text-wrap: balance; position: fixed; z-index: 90; left: 50%; bottom: var(--s5); display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s4) var(--s2) var(--s2); border-radius: 9999px; background: var(--tinta); color: var(--papel); font-size: 14px; line-height: 20px; font-weight: 500; box-shadow: 0 12px 32px rgba(25, 26, 22, 0.25); opacity: 0; transform: translate(-50%, 24px) scale(0.96); transition: opacity 500ms var(--ease), transform 600ms var(--ease); pointer-events: none; }
.aviso.on { opacity: 1; transform: translate(-50%, 0); }
.aviso.con-accion.on { pointer-events: auto; }
.aviso-deshacer { min-height: 36px; margin-left: var(--s1); padding: 0 var(--s3); border-radius: 9999px; color: var(--papel); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.aviso .ok { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9999px; background: var(--naranja); color: var(--tinta); }
@media (max-width: 999px) { .aviso { bottom: calc(var(--s11) + var(--s2)); } }

/* ── Skeleton ────────────────────────────────────────────────────── */
.esqueleto { border-radius: 16px; background: var(--hundido); animation: pulso 1400ms var(--ease) infinite alternate; }
@keyframes pulso { from { opacity: 1; } to { opacity: 0.45; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; }
  .historias button.activa span::after { transform: scaleX(1); }
}

/* ═══ Motion ═════════════════════════════════════════════════════════ */
/* Photos fade in when they arrive. */
.shell #vista img:not(.avatar), .globo-tip img { opacity: 0; transition: opacity 600ms var(--ease), transform 1200ms var(--ease); }
.shell #vista img.cargada, .globo-tip img.cargada { opacity: 1; }

/* Rows come in one after the other; pins land on the map, then the route appears. */
.lista-lugares .fila-lugar { animation: sube 600ms var(--ease) backwards; animation-delay: calc(var(--n, 0) * 35ms); }
.pin-vivo { animation: aparece 300ms var(--ease) backwards; animation-delay: calc(var(--n, 0) * 45ms); }
.pin circle { animation: aterriza 520ms var(--resorte) backwards; animation-delay: calc(var(--n, 0) * 45ms + 120ms); }
.pin text { animation: aparece 300ms var(--ease) backwards; animation-delay: calc(var(--n, 0) * 45ms + 300ms); }
.mapa-ciudad .ruta { animation: aparece 900ms var(--ease) backwards 500ms; }
@keyframes aterriza { from { transform: scale(0); } }
@keyframes aparece { from { opacity: 0; } }

/* The ring draws itself; later changes slide from where it is. */
.anillo .avance { animation: anillo 1400ms var(--ease) backwards 200ms; }
@keyframes anillo { from { stroke-dashoffset: var(--L); } }

/* A saved bookmark pops; a marked country pulses. */
.btn[aria-pressed="true"] .ico { animation: salta 520ms var(--resorte); }
@keyframes salta { 0% { transform: scale(0.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.pasaporte .tierra path.recien { animation: pulso-pais 900ms var(--ease); }
@keyframes pulso-pais { 0% { filter: brightness(1.5) saturate(1.3); } 100% { filter: none; } }

/* The drawer's contents follow it in. */
.cajon.on .cajon-cuerpo > * { animation: sube 600ms var(--ease) backwards; }
.cajon.on .cajon-cuerpo > *:nth-child(2) { animation-delay: 60ms; }
.cajon.on .cajon-cuerpo > *:nth-child(3) { animation-delay: 120ms; }
.cajon.on .cajon-cuerpo > *:nth-child(n+4) { animation-delay: 180ms; }

/* Buttons answer the pointer. */
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.fila-lugar:active { transform: scale(0.99); }
.ciudad-card .foto { transition: transform 700ms var(--ease), box-shadow 700ms var(--ease); }
.ciudad-card:hover .foto { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(25, 26, 22, 0.12); }

/* The active section's highlight slides between links. */
.menu-lateral { position: relative; }
.menu-lateral a { z-index: 1; }
.menu-lateral a[aria-current="page"], .menu-lateral a[aria-current="true"] { background: transparent; box-shadow: none; color: var(--tinta); font-weight: 600; }
.menu-lateral a[aria-current="true"] .ico { color: var(--naranja); }
.nav-indicador { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; }
.menu-lateral .nav-indicador { right: 0; border-radius: 12px; background: var(--blanco); box-shadow: 0 1px 2px rgba(25, 26, 22, 0.06), inset 0 0 0 1px var(--regla); }
.tabbar { position: fixed; }
.tabbar .nav-indicador { top: var(--s1); bottom: var(--s1); border-radius: 20px; background: var(--blanco); box-shadow: 0 1px 3px rgba(25, 26, 22, 0.1); }
.tabbar a { position: relative; z-index: 1; }
.tabbar a[aria-current="page"] { background: transparent; }
.con-indicador .nav-indicador { transition: transform 550ms var(--ease), height 550ms var(--ease), width 550ms var(--ease), opacity 300ms var(--ease); }

/* Carousels: arrows where there is a pointer to use them. */
.carrusel-marco { position: relative; }
.carrusel-btn { position: absolute; top: calc(50% - 44px); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 9999px; background: rgba(251, 250, 246, 0.92); box-shadow: 0 4px 16px rgba(25, 26, 22, 0.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity 400ms var(--ease), transform 400ms var(--ease); z-index: 2; }
.carrusel-btn.ant { left: calc(-1 * var(--s3)); }
.carrusel-btn.sig { right: calc(-1 * var(--s3)); }
.carrusel-marco:hover .carrusel-btn:not(:disabled), .carrusel-btn:focus-visible { opacity: 1; }
.carrusel-btn:active { transform: scale(0.94); }
.carrusel-btn:disabled { pointer-events: none; }
@media (hover: none) { .carrusel-btn { display: none; } }

/* ═══════════════════════════════════════════════════════════════════
   Trips you build and share, and the destinations that are coming
   ═══════════════════════════════════════════════════════════════════ */
.btn { min-height: 44px; }
.btn-chico { align-self: flex-start; min-height: 40px; }
.btn-whatsapp { background: #1F8A4C; color: var(--blanco); }
.btn-whatsapp:hover { background: #18733E; }
.btn[disabled] { opacity: 0.45; cursor: default; }
.proximo-card .foto img { filter: saturate(0.92); }
.proximo-card .foto .chip { background: var(--tinta); color: var(--papel); }
.proximo-card h3 a { color: inherit; text-decoration: none; }
.proximos { margin-top: var(--s9); scroll-margin-top: 80px; }
.proximos-bajada { margin: calc(-1 * var(--s3)) 0 var(--s5); color: var(--tinta60); max-width: 60ch; }
.llamado-app a.enlace { color: var(--naranja-texto); text-decoration: underline; text-underline-offset: 3px; }
.proximos-nota { margin-top: var(--s5); font-size: 13px; line-height: 18px; color: var(--tinta40); max-width: 60ch; }
.proximo-card .pedidos { min-height: 20px; margin: 2px 0 var(--s2); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--tinta60); font-variant-numeric: tabular-nums; }
.proximo-card [data-pedir][aria-pressed="true"], .ficha-cabeza [data-pedir][aria-pressed="true"] { background: var(--lima); color: #191A16; border-color: var(--lima); }
.credito-foto { margin-top: var(--s2); font-size: 12px; line-height: 16px; color: var(--tinta40); }
.credito-foto a { color: inherit; }
.ciudad-pin.proximo circle { fill: var(--papel); stroke: var(--tinta); stroke-width: 1.4; stroke-dasharray: 2 1.6; }
.ciudad-pin.proximo.on circle, .ciudad-pin.proximo:focus-visible circle { fill: var(--naranja-velo); stroke: var(--naranja-texto); }

.mis-viajes { display: flex; flex-direction: column; gap: var(--s4); }
.viaje-fila { display: grid; grid-template-columns: auto 1fr; gap: var(--s4) var(--s5); align-items: center; padding: var(--s5); text-decoration: none; color: inherit; }
.viaje-fila .fotos-viaje { margin-top: 0; }
.viaje-fila h2 { font-size: 22px; line-height: 28px; letter-spacing: -0.02em; }
.viaje-fila p { font-size: 14px; line-height: 20px; color: var(--tinta60); margin-top: 2px; }
.viaje-fila .rotulo { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--naranja-texto); }
.viaje-fila .acciones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s2); }
.viaje-fila.borrador { box-shadow: inset 0 0 0 1.5px var(--naranja-velo), 0 1px 2px rgba(25, 26, 22, 0.04); }
@media (min-width: 900px) { .viaje-fila { grid-template-columns: auto 1fr auto; } .viaje-fila .acciones { grid-column: auto; } }
.sumados-n { display: inline-flex; align-items: center; gap: var(--s1); font-weight: 600; color: var(--verde) !important; }

.armar { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 1100px) { .armar { grid-template-columns: minmax(0, 1fr) 340px; } .armar-resumen { position: sticky; top: 88px; } }
.armar-col { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.armar-datos { display: grid; gap: var(--s4); padding: var(--s5); }
@media (min-width: 700px) { .armar-datos { grid-template-columns: 1fr 220px; } }
.campo { display: flex; flex-direction: column; gap: var(--s2); font-size: 14px; line-height: 20px; font-weight: 600; }
.campo small { font-weight: 400; color: var(--tinta40); }
.campo input, .sumar-destino input, .dias-armar input { height: 48px; padding: 0 var(--s4); border-radius: 12px; background: var(--blanco); box-shadow: inset 0 0 0 1px var(--regla); font-size: 16px; line-height: 24px; font-weight: 400; font-family: inherit; color: var(--tinta); min-width: 0; width: 100%; transition: box-shadow 400ms var(--ease); }
.campo input:focus-visible, .sumar-destino input:focus-visible, .dias-armar input:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--naranja-texto); }
#v-titulo { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }

.etapas-armar { display: flex; flex-direction: column; gap: var(--s3); list-style: none; padding: 0; }
.etapa-armar { padding: var(--s4); }
.etapa-cabeza { display: grid; grid-template-columns: 56px 1fr; gap: var(--s3) var(--s4); align-items: center; }
.etapa-cabeza > img { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; }
.etapa-nombre h3 { font-size: 18px; line-height: 24px; letter-spacing: -0.02em; display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.etapa-nombre p { font-size: 13px; line-height: 18px; color: var(--tinta40); }
.etapa-nombre .chip { background: var(--tinta); color: var(--papel); }
.paso-dias { display: inline-flex; align-items: center; gap: var(--s1); padding: var(--s1); border-radius: 9999px; background: var(--hundido); justify-self: start; }
.paso-dias button { width: 44px; height: 44px; border-radius: 9999px; font-size: 20px; line-height: 1; font-weight: 600; transition: background-color 400ms var(--ease); }
.paso-dias button:hover:not(:disabled) { background: var(--blanco); }
.paso-dias button:disabled { opacity: 0.35; cursor: default; }
.paso-dias output { min-width: 64px; text-align: center; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.etapa-acciones { display: flex; gap: var(--s1); justify-self: end; }
.etapa-acciones button:disabled { opacity: 0.3; cursor: default; }
.rota-arriba { transform: rotate(90deg); }
.rota-abajo { transform: rotate(-90deg); }
@media (min-width: 700px) { .etapa-cabeza { grid-template-columns: 56px 1fr auto auto; } .etapa-acciones { justify-self: auto; } }
.dias-armar { list-style: none; padding: 0; margin-top: var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.dias-armar li { display: grid; grid-template-columns: 56px 1fr; gap: var(--s3); align-items: center; }
.dias-armar label { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--naranja-texto); text-transform: uppercase; letter-spacing: 0.04em; }
.dias-armar input { height: 44px; font-size: 15px; }

.sumar-destino { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5); }
.ayuda { font-size: 13px; line-height: 18px; color: var(--tinta40); }
.opciones-destino { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s2); margin-top: var(--s2); }
.opcion-destino { display: grid; grid-template-columns: 44px 1fr auto; gap: var(--s3); align-items: center; padding: var(--s2); border-radius: 14px; text-align: left; transition: background-color 400ms var(--ease); min-height: 60px; }
.opcion-destino:hover { background: var(--hundido); }
.opcion-destino img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.opcion-destino strong { display: block; font-size: 15px; line-height: 20px; }
.opcion-destino small { display: block; font-size: 12px; line-height: 16px; color: var(--tinta40); }

.armar-resumen { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s5); }
.armar-resumen .rotulo { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--naranja-texto); letter-spacing: 0.02em; }
.armar-resumen h2 { font-size: 26px; line-height: 32px; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.armar-resumen p { font-size: 14px; line-height: 20px; color: var(--tinta60); }
.armar-resumen .ruta { color: var(--tinta); font-weight: 600; }
.armar-resumen > .btn { width: 100%; }
.armar-error { color: var(--naranja-texto) !important; font-weight: 600; }
.armar-error:empty { display: none; }
.link-viaje { display: flex; flex-direction: column; gap: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--regla); }
.link-viaje input { font-size: 14px !important; }
.link-viaje .acciones { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* On a phone the summary rides above the tab bar, so "Guardar y compartir" is always at hand. */
@media (max-width: 1099px) {
  .armar-resumen { position: sticky; bottom: 88px; z-index: 20; gap: var(--s2); padding: var(--s3) var(--s4); box-shadow: 0 -8px 24px -12px rgba(25, 26, 22, 0.25), inset 0 0 0 1px var(--regla); }
  .armar-resumen > .rotulo, .armar-resumen > h2, .armar-resumen > .ruta { display: none; }
}
.btn[aria-busy="true"] { opacity: 0.6; cursor: progress; }
/* The App Store badge: same face as the landing's (.btn-tienda in l/landing.css). */
.btn-tienda { display: inline-flex; align-items: center; gap: var(--s3); min-height: 44px; padding: 8px var(--s4) 8px var(--s3); border-radius: 12px; background: var(--tinta); color: var(--papel); text-align: left; cursor: pointer; transition: background-color 500ms var(--ease), transform 500ms var(--ease); }
.btn-tienda:hover { background: #000; }
.btn-tienda:active { transform: scale(0.98); }
.btn-tienda .ico { width: 22px; height: 22px; margin-top: -2px; }
.btn-tienda-txt { display: flex; flex-direction: column; font-size: 16px; line-height: 19px; font-weight: 600; letter-spacing: -0.01em; }
.btn-tienda-txt small { font-size: 10px; line-height: 12px; font-weight: 500; letter-spacing: 0; opacity: 0.8; }
.btn-tienda.claro { background: var(--papel); color: var(--tinta); }
.btn-tienda.claro:hover { background: #fff; }
.sumados-lista { list-style: none; padding: 0; display: flex; flex-direction: column; }
.sumados-lista li { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 44px; font-size: 14px; border-top: 1px solid var(--hundido); }