/* Busillo landing — hoja de estilos compartida por todas las páginas.
   Mismos tokens visuales que la app (src/theme/tokens.ts): superficies
   blancas muy redondeadas sobre fondo hueso, acento rojo/terracota, Onest. */

:root {
  --bg: #F6F6F3;
  --surface: #FFFFFF;
  --surface2: #F1F1ED;
  --border: #E9E9E4;
  --ink: #15161B;
  --ink2: #5C5E64;
  --ink-muted: #6E6F74;
  --accent: #C1440E;
  --accent-dim: #8F3009;
  --accent-soft: #FBEAE0;
  --accent-ink: #FFFFFF;
  --bad: #E14536;
  --bad-soft: #FCEAE7;
  --warn: #DB8A15;
  --warn-soft: #FAEFD9;
  --good: #1F8A4C;
  --good-soft: #E7F5EC;
  --notice-bg: #FFF8DE;
  --notice-border: #F0E1A0;
  --notice-text: #8A6D1D;
  --radius-lg: 26px;
  --radius-md: 20px;
  --radius-sm: 13px;
  --radius-pill: 999px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --max-width: 1080px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Onest', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--accent-dim); }

/* Jose: líneas equilibradas cuando un bloque salte a varias líneas ("como
   cubos"), sin ser un justificado de verdad. CSS nativo, mejora
   progresiva — donde el navegador no lo soporte, se ve como antes, no
   rompe nada. Regla base para que las páginas nuevas la hereden solas, no
   parche caso a caso. `balance` recalcula el corte para líneas parejas
   (limitado a ~4-6 líneas en los navegadores que lo soportan, por eso va
   en títulos y no en párrafos largos); `pretty` evita la última línea
   huérfana de una sola palabra en párrafos largos, sin ese límite. */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Foco de teclado: red de seguridad global — algunos elementos ya tienen
   su propio estado de foco (ej. form.waitlist input), esto no lo pisa,
   solo asegura que ninguno se quede sin ningún indicador visible. */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  left: 0;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

header.site { padding: var(--space-lg) 0; }

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  color: var(--ink);
}

.brand .name { font-weight: 800; font-size: 20px; letter-spacing: -0.01em; }

nav.main-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  position: relative;
}

/* Menú móvil — checkbox oculto + <label> como botón, sin JS para
   abrir/cerrar (nav-more.js solo cierra al elegir un enlace o al pulsar
   fuera). Oculto en escritorio; ver el breakpoint más abajo. */
.nav-toggle-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--surface2);
  cursor: pointer;
  flex: none;
}
.nav-toggle .icon-close { display: none; }
.nav-toggle-input:checked ~ .nav-toggle .icon-menu { display: none; }
.nav-toggle-input:checked ~ .nav-toggle .icon-close { display: block; }

nav.main-nav .links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  align-items: center;
  justify-content: flex-end;
}

nav.main-nav .links a {
  color: var(--ink2);
  text-decoration: none;
  font-weight: 600;
  font-size: 14.5px;
  white-space: nowrap;
}

nav.main-nav .links a:hover { color: var(--ink); }

nav.main-nav .links a.cta {
  background: var(--accent);
  color: var(--accent-ink);
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  flex: none;
}

nav.main-nav .links a.cta:hover { background: var(--accent-dim); }

/* Dropdown "Más" en el nav — <details>/<summary> nativo, sin JS para
   abrir/cerrar (accesible por teclado y lector de pantalla de serie). */
.nav-more { position: relative; flex: none; }
.nav-more summary {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--ink2);
  font-weight: 600;
  font-size: 14.5px;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.nav-more summary::-webkit-details-marker { display: none; }
.nav-more summary:hover { color: var(--ink); }
.nav-more summary svg { transition: transform 0.15s ease; }
.nav-more[open] summary svg { transform: rotate(180deg); }
.nav-more-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 28px rgba(0,0,0,0.1);
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  min-width: 190px;
  z-index: 20;
}
.nav-more-menu a {
  color: var(--ink2);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
}
.nav-more-menu a:hover { background: var(--surface2); color: var(--ink); }

/* Breadcrumbs */
.breadcrumbs {
  font-size: 13.5px;
  color: var(--ink-muted);
  margin: var(--space-sm) 0 var(--space-xl);
}
.breadcrumbs a { color: var(--ink-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent-dim); text-decoration: underline; }
.breadcrumbs .sep { margin: 0 6px; }

/* Hero (home) */
.hero { padding: clamp(24px, 8vw, 72px) 0 clamp(40px, 8vw, 72px); text-align: center; }

.hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xxl); align-items: center; }

/* El teléfono va ligeramente girado sobre una forma orgánica de fondo (en
   vez de plano/centrado) — mismo tratamiento en el hero y en "cómo
   funciona", ambos comparten .hero-visual. El anillo punteado guiña a una
   ruta de bus. */
/* overflow:hidden a propósito: la forma orgánica de fondo (::before) rotada
   -8deg puede desbordar unos px el ancho del contenedor justo en el tramo
   ~860-900px (el punto exacto donde .hero-grid pasa a dos columnas y este
   contenedor se estrecha) — bug real encontrado con scrollWidth>clientWidth
   a 900px de viewport, invisible a simple vista pero provoca scroll
   horizontal. El teléfono nunca llega a rozar el borde, así que recortar
   aquí no afecta a nada visible. */
.hero-visual { display: flex; justify-content: center; position: relative; padding: clamp(20px, 5vw, 36px) 0; overflow: hidden; }
.hero-visual::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(320px, 74vw);
  height: min(320px, 74vw);
  /* Antes color plano — al recortarlo overflow:hidden dejaba un borde recto
     y duro contra el fondo (Jose: "se nota el corte del box"). Degradado
     radial que se desvanece a transparente antes de llegar al borde, así
     el recorte nunca es visible, se note o no lo tape overflow:hidden. */
  background: radial-gradient(circle, var(--accent-soft) 0%, var(--accent-soft) 52%, transparent 76%);
  border-radius: 44% 56% 62% 38% / 48% 42% 58% 52%;
  transform: translate(-50%, -50%) rotate(-8deg);
  z-index: 0;
}
.hero-visual::after {
  content: "";
  position: absolute;
  top: 6%;
  right: 8%;
  width: 96px;
  height: 96px;
  border: 2px dashed var(--accent);
  border-radius: 50%;
  opacity: 0.3;
  z-index: 0;
}
/* Silueta de la Giralda como fondo del hero principal (no de "cómo
   funciona", que reutiliza .hero-visual sin esta clase extra) — guiño local
   sutil, muy baja opacidad, detrás del blob y del teléfono. Vive dentro de
   .hero-visual, que ya tiene overflow:hidden, así que un desbordamiento aquí
   se recorta solo y no puede causar el bug de scroll horizontal a 900px
   documentado arriba. */
.hero-visual-main .hero-landmark {
  position: absolute;
  z-index: 0;
  right: 4%;
  left: auto;
  bottom: 2%;
  width: min(140px, 34vw);
  height: auto;
  color: var(--accent);
  opacity: 0.16;
  pointer-events: none;
}
@media (min-width: 900px) {
  /* Centrada en altura se veía flotando, sin apoyo (Jose) — una torre
     necesita "suelo". Vuelve a anclarse abajo, como el resto del site
     (ver footer-skyline, siempre apoyado), pero ahora sangrando más hacia
     la derecha para quedar fuera de detrás del teléfono; el degradado del
     blob ya no tiene borde duro (fix anterior), así que el solape con la
     sombra del móvil ya no debería ensuciarse. */
  .hero-visual-main .hero-landmark { right: -6%; bottom: 0; top: auto; transform: none; width: min(120px, 30vw); }
}

.hero-visual .phone-mock {
  --tilt: -6deg;
  position: relative;
  z-index: 1;
  transform: rotate(var(--tilt));
  animation: phone-in 0.8s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}
.hero-visual .phone-mock.phone-mock-sm {
  --tilt: 5deg;
  animation-delay: 0.08s;
}
/* "Cómo funciona" tiene dos .phone-mock-sm en la misma página (Paso 1 y
   Paso 3) — sin este modificador ambos heredan el mismo --tilt de la regla
   de arriba y quedan al mismo lado, así que la página se lee como el mismo
   bloque repetido dos veces. El del Paso 3 gira al lado contrario; ver
   .how-grid-reverse (más abajo) para el cambio de columna que lo acompaña. */
.hero-visual .phone-mock.phone-mock-sm.phone-mock-alt {
  --tilt: -7deg;
}
@keyframes phone-in {
  from { opacity: 0; transform: translateY(22px) rotate(var(--tilt)) scale(0.94); }
  to { opacity: 1; transform: translateY(0) rotate(var(--tilt)) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual .phone-mock { animation: none; }
}

/* Flotación continua — en un wrapper aparte (.phone-float) para no pelear
   por la propiedad transform con el giro/entrada de .phone-mock, que vive
   en el elemento de dentro. */
.phone-float { animation: phone-float 4.8s ease-in-out infinite; }
.phone-float-sm { animation-delay: 0.35s; animation-duration: 5.4s; }
@keyframes phone-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) {
  .phone-float { animation: none; }
}
@media (min-width: 900px) {
  /* Antes tenía right:-2% (sangrado deliberado fuera de .hero-visual) —
     provocaba scroll horizontal real en anchuras donde .wrap no tiene
     margen de sobra (ej. justo en 900px, o en columnas más estrechas que
     el hero de la home como .how-grid). Se queda dentro del contenedor. */
  .hero-visual::after { top: 2%; right: 2%; }
}

@media (min-width: 900px) {
  .hero { text-align: left; }
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: clamp(24px, 4vw, 56px); }
  .hero-content .badge,
  .hero-content h1,
  .hero-content p.lead,
  .hero-content form.waitlist,
  .hero-content .form-note { margin-left: 0; margin-right: 0; }
  .hero-content .waitlist-fields { justify-content: flex-start; }
  .hero-content .waitlist-consent { margin-left: 0; }
  .hero-content .form-status { text-align: left; }
}

/* Mockup de teléfono — recreaciones en HTML/CSS de pantallas reales de la
   app (no capturas: así el acento coincide siempre con el resto de la web
   y no depende de que la app esté actualizada). */
.phone-mock {
  width: min(300px, 78vw);
  background: #111114;
  border-radius: 42px;
  padding: 12px;
  box-shadow: 0 40px 70px -20px rgba(21,22,27,0.35), 0 12px 24px rgba(21,22,27,0.12);
  flex: none;
}
.phone-screen { position: relative; border-radius: 30px; overflow: hidden; background: var(--bg); aspect-ratio: 420 / 900; }
.phone-screen img { width: 100%; display: block; }
.phone-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 22px;
  background: #111114;
  border-radius: 0 0 14px 14px;
  z-index: 3;
}
.phone-mock-sm { width: min(230px, 60vw); border-radius: 34px; padding: 9px; }
.phone-mock-sm .phone-screen { border-radius: 24px; }

/* Recreación: pantalla de inicio con trayecto guardado — llena la pantalla
   completa (header + contenido que crece + barra de pestañas fija abajo),
   como la app real, no solo la tarjeta del trayecto suelta. */
.mock-home { font-family: 'Onest', system-ui, sans-serif; height: 100%; display: flex; flex-direction: column; }
.mock-home-body { flex: 1; padding: 40px 16px 14px; display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.mock-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  box-shadow: 0 8px 20px -14px rgba(21,22,27,0.25);
}
.mock-topbar-id { display: flex; align-items: center; gap: 10px; }
.mock-avatar { width: 34px; height: 34px; border-radius: 11px; background: var(--accent); display: flex; align-items: center; justify-content: center; flex: none; }
.mock-avatar svg { width: 20px; height: 20px; }
.mock-gear { position: relative; width: 28px; height: 28px; border-radius: 999px; background: var(--surface2); display: flex; align-items: center; justify-content: center; flex: none; }
.mock-gear svg { width: 13px; height: 13px; }
.mock-gear::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  border: 1.5px solid var(--surface);
}
.mock-eyebrow { font-size: 9px; font-weight: 800; letter-spacing: 0.05em; color: var(--ink-muted); text-transform: uppercase; }
.mock-hola { font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; line-height: 1.15; }
.mock-date { font-size: 9px; color: var(--ink-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.mock-section { display: flex; flex-direction: column; gap: 8px; }
.mock-section-head { display: flex; align-items: baseline; justify-content: space-between; }
.mock-label { font-size: 10px; font-weight: 800; letter-spacing: 0.04em; color: var(--ink-muted); text-transform: uppercase; }
.mock-add { font-size: 10px; font-weight: 800; color: var(--accent-dim); }
.mock-trip-card { background: var(--surface); border-radius: 16px; padding: 14px; box-shadow: 0 2px 10px rgba(21,22,27,0.05); }
.mock-trip-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.mock-trip-badge { width: 22px; height: 22px; border-radius: 7px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }
.mock-trip-name { font-size: 12.5px; font-weight: 800; color: var(--ink); }
.mock-trip-sub { font-size: 9px; color: var(--ink-muted); font-weight: 600; }
.mock-trip-time { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.mock-trip-time .big { font-size: 28px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.mock-trip-time .pill { font-size: 8.5px; font-weight: 800; background: var(--surface2); color: var(--ink-muted); padding: 3px 8px; border-radius: 999px; text-transform: uppercase; }
.mock-trip-next { font-size: 10px; color: var(--ink-muted); font-weight: 600; }
.mock-nudge { background: var(--accent-soft); color: var(--accent-dim); font-size: 10px; font-weight: 600; line-height: 1.4; padding: 11px; border-radius: 14px; }
.mock-fav-row {
  background: var(--surface);
  border-radius: 14px;
  padding: 11px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 2px 10px rgba(21,22,27,0.05);
}
.mock-fav-icon { width: 26px; height: 26px; border-radius: 8px; background: var(--surface2); display: flex; align-items: center; justify-content: center; flex: none; }
.mock-fav-icon svg { width: 14px; height: 14px; }
.mock-fav-name { font-size: 11.5px; font-weight: 700; color: var(--ink); }
.mock-fav-sub { font-size: 9px; color: var(--ink-muted); font-weight: 600; }
.mock-fav-eta { margin-left: auto; font-size: 12.5px; font-weight: 800; color: var(--accent-dim); font-variant-numeric: tabular-nums; text-align: right; }
.mock-fav-eta small { display: block; font-size: 7.5px; font-weight: 700; color: var(--ink-muted); text-transform: uppercase; }
/* Fila de trayecto bloqueado (/planes/) — el límite del plan gratis
   mostrado como UI real en vez de solo descrito en la tarjeta de precios. */
.mock-fav-row-locked { opacity: 0.5; }
.mock-fav-row-locked .mock-fav-name { color: var(--ink-muted); }
.mock-limit-note { margin-top: auto; background: var(--accent-soft); color: var(--accent-dim); font-size: 10px; font-weight: 700; text-align: center; padding: 10px; border-radius: 12px; }

/* Barra de pestañas fija abajo, como la navegación real de la app */
.mock-tabbar { flex: none; display: flex; border-top: 1px solid var(--border); background: var(--surface); padding: 9px 4px 12px; }
.mock-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--ink-muted); }
.mock-tab svg { width: 15px; height: 15px; }
.mock-tab span { font-size: 6.8px; font-weight: 800; }
.mock-tab.active { color: var(--accent-dim); }

/* Recreación: pantalla de mapa con la ruta */
.mock-map-wrap { height: 100%; display: flex; flex-direction: column; }
.mock-map-topbar { flex: none; display: flex; align-items: center; gap: 10px; padding: 40px 16px 12px; background: var(--bg); }
.mock-map-back { width: 26px; height: 26px; border-radius: 999px; background: var(--surface); display: flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 1px 4px rgba(21,22,27,0.08); }
.mock-map-back svg { width: 13px; height: 13px; }
.mock-map-title { font-size: 13px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.mock-map { position: relative; flex: 1; background: #EDEDE6; overflow: hidden; }
.mock-map svg.mock-map-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.mock-map-block { fill: #E1E1D6; }
.mock-map-route { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.mock-map-pin { fill: var(--accent); stroke: #fff; stroke-width: 3; }
.mock-map-pin-origin { fill: #fff; stroke: var(--accent); stroke-width: 4; }
.mock-map-card {
  position: absolute;
  left: 12px; right: 12px; bottom: 16px;
  background: var(--surface);
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 24px rgba(21,22,27,0.12);
}

/* Recreación: pantalla de una parada con las líneas que paran ahí y el
   tiempo de espera de cada una (/prensa/) — deliberadamente distinta de
   .mock-home (trayecto guardado personal) y .mock-map (una ruta): esta
   pantalla enseña la profundidad del dato (varias líneas, una parada real)
   en vez de la rutina de una persona, tono más apropiado para una sala de
   prensa que para el hero de la home. Reutiliza .mock-map-topbar/-back
   (misma cabecera "con flecha atrás" que .mock-map-wrap) en vez de duplicar
   esas reglas. */
.mock-stop-wrap { height: 100%; display: flex; flex-direction: column; font-family: 'Onest', system-ui, sans-serif; background: var(--bg); }
.mock-stop-head { flex: none; padding: 0 16px 12px; }
.mock-stop-sub { font-size: 10.5px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-muted); }
.mock-stop-list { flex: 1; padding: 0 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.mock-stop-row { background: var(--surface); border-radius: 14px; padding: 12px 13px; display: flex; align-items: center; gap: 11px; box-shadow: 0 2px 10px rgba(21,22,27,0.05); }
.mock-stop-badge { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11.5px; font-weight: 800; flex: none; }
.mock-stop-dest { min-width: 0; flex: 1; }
.mock-stop-dest-name { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.mock-stop-dest-sub { font-size: 9px; color: var(--ink-muted); font-weight: 600; margin-top: 1px; }
.mock-stop-eta { margin-left: auto; font-size: 14px; font-weight: 800; color: var(--accent-dim); font-variant-numeric: tabular-nums; text-align: right; flex: none; }
.mock-stop-eta small { display: block; font-size: 7.5px; font-weight: 700; color: var(--ink-muted); text-transform: uppercase; }
.mock-stop-foot { flex: none; padding: 0 16px 16px; }

/* Recreación: pantalla de bloqueo con el aviso "sal ya" (por-que-busillo,
   sección "Rutinas, no búsquedas") — la prueba visual de que Busillo avisa
   sola, sin que hayas abierto la app. Deliberadamente oscura (frente a
   .mock-home/.mock-map, ambas claras) para que se lea de un vistazo como
   una pantalla distinta, no la misma app abierta con otro contenido dentro. */
.mock-lock {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 46px 16px 20px;
  background:
    radial-gradient(120% 60% at 50% 8%, rgba(193,68,14,0.35), transparent 60%),
    linear-gradient(180deg, #1b1c21, #101014 70%);
  color: #fff;
  font-family: 'Onest', system-ui, sans-serif;
  text-align: center;
}
.mock-lock-time { font-size: 42px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; margin-top: 10px; }
.mock-lock-date { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: rgba(255,255,255,0.6); margin-top: 8px; }
.mock-lock-notif {
  width: 100%;
  margin-top: auto;
  background: #fff;
  border-radius: 18px;
  padding: 12px 13px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  text-align: left;
  box-shadow: 0 16px 34px rgba(0,0,0,0.4);
}
.mock-lock-notif-icon { width: 30px; height: 30px; border-radius: 9px; background: var(--accent); display: flex; align-items: center; justify-content: center; flex: none; }
.mock-lock-notif-icon svg { width: 17px; height: 17px; }
.mock-lock-notif-body { min-width: 0; flex: 1; }
.mock-lock-notif-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mock-lock-notif-head .app { font-size: 9px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-muted); }
.mock-lock-notif-head .when { font-size: 9px; font-weight: 600; color: var(--ink-muted); flex: none; }
.mock-lock-notif-title { font-size: 12.5px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; margin: 3px 0 2px; }
.mock-lock-notif-text { font-size: 10.5px; color: var(--ink2); line-height: 1.4; }
.mock-lock-hint { margin-top: 12px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.03em; color: rgba(255,255,255,0.55); }

/* Recreación: notificación push real (home #que-es) — el mecanismo central
   del producto, el aviso de "sal ya", no aparecía en ningún sitio de la
   home salvo como texto ("Aviso de sal ya"); esto lo enseña en vez de
   solo describirlo. Deliberadamente NO es un tercer .phone-mock (el hero y
   "cómo funciona" ya usan ese marco) — una escena de pantalla bloqueada sin
   bisel de teléfono rompe el ritmo visual en vez de repetir el mismo marco
   una tercera vez seguida, y timestamp real conecta con "22:13" del hero. */
.notif-scene {
  position: relative;
  width: min(300px, 78vw);
  aspect-ratio: 3 / 4;
  border-radius: 34px;
  overflow: hidden;
  background: radial-gradient(120% 90% at 22% 0%, #2c2015 0%, #18140f 45%, #111114 100%);
  box-shadow: 0 40px 70px -20px rgba(21,22,27,0.35), 0 12px 24px rgba(21,22,27,0.12);
  padding: clamp(22px, 5vw, 32px) 18px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
}
.notif-scene-glow {
  position: absolute;
  top: -22%;
  left: 50%;
  width: 220px;
  height: 220px;
  background: var(--accent);
  opacity: 0.35;
  filter: blur(50px);
  border-radius: 50%;
  transform: translateX(-50%);
}
.notif-clock { position: relative; text-align: center; color: #fff; margin-bottom: clamp(26px, 7vw, 40px); }
.notif-clock-time { display: block; font-size: clamp(38px, 8.5vw, 50px); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.notif-clock-date { display: block; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.6); margin-top: 6px; }
.notif-bubble {
  position: relative;
  width: 100%;
  background: rgba(255,255,255,0.95);
  border-radius: 18px;
  padding: 14px;
  display: flex;
  gap: 11px;
  box-shadow: 0 16px 32px rgba(0,0,0,0.28);
  animation: notif-in 0.6s cubic-bezier(0.16, 0.84, 0.44, 1) 0.3s both;
}
@keyframes notif-in {
  from { opacity: 0; transform: translateY(-14px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .notif-bubble { animation: none; } }
.notif-bubble-icon { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--accent); display: flex; align-items: center; justify-content: center; }
.notif-bubble-icon svg { width: 20px; height: 20px; }
.notif-bubble-body { min-width: 0; flex: 1; }
.notif-bubble-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.notif-bubble-app { font-size: 10px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-muted); }
.notif-bubble-time { font-size: 10px; font-weight: 600; color: var(--ink-muted); flex: none; }
.notif-bubble-title { font-size: 14.5px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 2px; }
.notif-bubble-text { font-size: 12.5px; color: var(--ink2); line-height: 1.4; }

/* Layout de #que-es — texto a un lado, escena de notificación al otro, en
   vez del patrón "h2 + párrafo centrado" que repiten el resto de cabeceras
   de sección de la home (comparativa, funciones, planes...). row-reverse a
   partir de 860px a propósito: el hero ya pone el texto a la izquierda y
   el visual a la derecha, y "cómo funciona" (más abajo) repite ese mismo
   orden — invertirlo aquí crea un ritmo alterno en vez de tres secciones
   seguidas con la imagen siempre al mismo lado. En móvil se apila
   centrado, como el resto de la página. */
.intro-grid { display: flex; flex-direction: column; align-items: center; gap: var(--space-xxl); text-align: center; }
.intro-copy { max-width: 560px; }
.intro-copy h2 { font-size: clamp(24px, 3.4vw, 34px); font-weight: 800; letter-spacing: -0.01em; margin: 0 0 var(--space-md); }
.intro-copy p { color: var(--ink2); font-size: 17px; margin: 0 0 var(--space-md); }
.intro-copy p:last-child { margin-bottom: 0; }
.intro-copy .accent { color: var(--accent-dim); font-weight: 600; }
@media (min-width: 860px) {
  .intro-grid { flex-direction: row-reverse; align-items: center; text-align: left; justify-content: center; gap: clamp(32px, 5vw, 64px); }
  .intro-copy { text-align: left; }
}

.how-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xxl); align-items: center; }
@media (min-width: 900px) {
  .how-grid { grid-template-columns: 1fr 0.6fr; }
}
/* Variante para el segundo .how-grid de "cómo funciona" (Paso 3): además
   del giro opuesto (.phone-mock-alt, arriba), pasa el teléfono al lado
   izquierdo — texto y móvil se alternan de lado entre pasos en vez de
   apilar el mismo patrón dos veces seguidas. */
.how-grid-reverse { grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .how-grid-reverse { grid-template-columns: 0.6fr 1fr; }
  .how-grid-reverse > .hero-visual { order: -1; }
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-soft);
  color: var(--accent-dim);
  font-weight: 600;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-xl);
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

h1 {
  font-size: clamp(30px, 5vw, 50px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 var(--space-lg);
}
.hero h1 { max-width: 820px; margin-left: auto; margin-right: auto; }

.hero p.lead {
  font-size: clamp(17px, 2vw, 20px);
  color: var(--ink2);
  max-width: 560px;
  margin: 0 auto var(--space-xxl);
}

.page-lead { color: var(--ink2); font-size: 17px; max-width: 700px; margin: 0 0 var(--space-xl); }
/* Acento inline dentro de un párrafo de intro — para no reservar el span
   de acento solo a titulares grandes (.maker-hero-quote .accent,
   .question-swap .q-right .accent). Úsalo con moderación, una vez por
   párrafo como mucho. */
.page-lead .accent { color: var(--accent-dim); font-weight: 600; }

/* Páginas "landing" (planes, preguntas, sobre-busillo, por-que-busillo,
   prensa, kit-de-prensa, alternativa-a-moovit, autobus-universidad) se
   centran igual que la home, en vez de leer como un artículo/documento
   alineado a la izquierda. Las páginas de catálogo (líneas, paradas,
   tarjetas, tarifas, cómo-llegar) NO llevan esta clase a propósito y se
   quedan con su alineación a la izquierda actual — comparten .page-h2/
   .page-lead pero no deben recentrarse. */
.landing-page > .breadcrumbs { text-align: center; }
.landing-page h1.page-h2,
.landing-page h2.page-h2 { text-align: center; max-width: 700px; margin-left: auto; margin-right: auto; }
.landing-page > .page-lead,
.landing-page .page-lead { text-align: center; margin-left: auto; margin-right: auto; }
.landing-page > h1 { text-align: center; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.landing-page > .breadcrumbs, .landing-page > .faq-eyebrow,
.maker-hero, .question-swap, .matchup-hero, .press-hero, .kit-manifest, .faq-chat, .flow-hero,
.landing-page > h1 {
  animation: fade-up 0.7s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}
.landing-page > .page-lead:not(.press-hero-lead) { animation: fade-up 0.7s cubic-bezier(0.16, 0.84, 0.44, 1) 0.06s both; }
@media (prefers-reduced-motion: reduce) {
  .landing-page > .breadcrumbs, .landing-page > .faq-eyebrow, .maker-hero, .question-swap,
  .matchup-hero, .press-hero, .kit-manifest, .faq-chat, .flow-hero, .landing-page > h1,
  .landing-page > .page-lead { animation: none; }
}

form.waitlist {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 460px;
  margin: 0 auto;
}

.waitlist-fields {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  justify-content: center;
}

form.waitlist input[type="email"] {
  flex: 1 1 260px;
  padding: 15px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  outline: none;
  min-width: 0;
}

form.waitlist input[type="email"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.waitlist-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-muted);
  line-height: 1.5;
  text-align: left;
  max-width: 420px;
  margin: 0 auto;
}
.waitlist-consent input[type="checkbox"] {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  accent-color: var(--accent);
}
.waitlist-consent a { color: inherit; text-decoration: underline; }
.waitlist-consent a:hover { color: var(--accent-dim); }

.btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 26px;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
  text-decoration: none;
}
.btn-accent:hover { background: var(--accent-dim); }

/* Botón secundario (borde, sin relleno) — para cuando un CTA acompaña a un
   .btn-accent y no debe competir visualmente con él (ver /prensa/). */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13.5px 24.5px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
  text-decoration: none;
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent-dim); }

.form-note { font-size: 13px; color: var(--ink-muted); margin-top: var(--space-md); }

.form-status { font-size: 14px; font-weight: 600; margin-top: var(--space-md); min-height: 20px; }
.form-status[data-state="ok"] { color: var(--accent-dim); }
.form-status[data-state="err"] { color: var(--bad); }

section { padding: clamp(40px, 7vw, 72px) 0; }
section.tight { padding: clamp(24px, 4vw, 40px) 0; }

.section-head { text-align: center; max-width: 620px; margin: 0 auto var(--space-xxl); }
.section-head h2 { font-size: clamp(24px, 3.4vw, 34px); font-weight: 800; letter-spacing: -0.01em; margin: 0 0 var(--space-md); }
.section-head p { color: var(--ink2); font-size: 17px; margin: 0; }

h2.page-h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 800; letter-spacing: -0.01em; margin: var(--space-xxl) 0 var(--space-md); }
h2.page-h2:first-child { margin-top: 0; }

/* Compare cards (home) */

/* Feature grid (home) */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-lg); }
.feature { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-xl); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.feature .icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--accent-soft); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-lg); }
.feature .icon svg { width: 22px; height: 22px; }
.feature .icon .num { font-weight: 800; font-size: 18px; color: var(--accent-dim); }
.feature h3 { font-size: 17px; font-weight: 700; margin: 0 0 8px; }
.feature p { margin: 0; color: var(--ink2); font-size: 14.5px; }
/* .feature se diseñó para <div> — cuando toda la tarjeta es un <a> (como
   en /autobus-eventos-sevilla/), sin esto hereda el azul/subrayado de
   enlace por defecto en vez del texto normal de la tarjeta. */
a.feature { text-decoration: none; color: inherit; display: block; }
a.feature:hover { border-color: var(--accent); }

/* Pasos numerados ("Cómo funciona"): número relleno + tarjeta con más
   presencia que la grid de iconos genérica, para que se note que es una
   secuencia, no una lista suelta. */
.feature-step { position: relative; overflow: hidden; }
.feature-step::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
}
.feature-step:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(21,22,27,0.1); border-color: transparent; }
.feature-step .icon { background: var(--accent); width: 40px; height: 40px; border-radius: 999px; }
.feature-step .icon .num { color: #fff; font-size: 17px; }

/* Cuarta card de la secuencia: no es un paso, es el CTA — cierra la
   secuencia invitando a apuntarse en vez de dejarla en el paso 3. */
.feature-step-cta {
  background: var(--accent);
  border-color: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.feature-step-cta::before { display: none; }
.feature-step-cta:hover { box-shadow: 0 16px 32px rgba(193,68,14,0.28); }
.feature-step-cta h3 { color: #fff; }
.feature-step-cta p { color: rgba(255,255,255,0.82); margin-bottom: var(--space-md); }
.feature-step-cta .btn-white {
  display: inline-flex;
  align-self: flex-start;
  background: #fff;
  color: var(--accent-dim);
  font-weight: 700;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  text-decoration: none;
}
.feature-step-cta .btn-white:hover { background: var(--bg); }

/* /planes/ — variante de .feature con el icono al lado del texto en vez de
   encima, para romper la simetría de dos cards idénticas en fila. */
.feature-side { display: flex; align-items: flex-start; gap: var(--space-md); }
.feature-side .icon { margin-bottom: 0; flex: none; }
.feature-side-text { flex: 1 1 auto; min-width: 0; }
.feature-side-text h3 { margin-top: 0; }
@media (max-width: 560px) {
  .feature-side { flex-direction: column; align-items: flex-start; }
  .feature-side .icon { margin-bottom: var(--space-lg); }
}

.info-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 40px); max-width: 760px; margin: 0 auto; }
.info-block h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 800; margin: 0 0 var(--space-md); }
.info-block p { color: var(--ink2); font-size: 15.5px; margin: 0 0 var(--space-md); }
.info-block p:last-child { margin-bottom: 0; }

/* Datos TUSSAM/GTFS (home #horarios-tussam) - las cifras reales (.press-stat,
   reutilizado del kit de prensa) van primero, en fila horizontal a todo el
   ancho, como el momento "1:1" de la sección; debajo, prosa + los dos
   enlaces como tarjetas-tile en vez de <a> sueltas dentro del párrafo. */
.tussam-stats { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin: 0 0 var(--space-xl); }
@media (min-width: 600px) {
  .tussam-stats { grid-template-columns: repeat(3, 1fr); }
}
.tussam-body { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: start; }
@media (min-width: 760px) {
  .tussam-body { grid-template-columns: 1.3fr 1fr; }
}
.tussam-copy { color: var(--ink2); font-size: 15.5px; }
.tussam-copy p { margin: 0 0 var(--space-md); }
.tussam-copy p:last-child { margin-bottom: 0; }
.tussam-links { display: flex; flex-direction: column; gap: var(--space-md); }
.tussam-link { display: flex; align-items: center; gap: var(--space-md); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-lg); text-decoration: none; color: var(--ink); transition: border-color 0.15s ease, transform 0.15s ease; }
.tussam-link:hover { border-color: var(--accent); transform: translateY(-1px); }
.tussam-link-icon { flex: none; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--accent-soft); display: flex; align-items: center; justify-content: center; }
.tussam-link-icon svg { width: 20px; height: 20px; }
.tussam-link-body { flex: 1; min-width: 0; }
.tussam-link-body strong { display: block; font-size: 15px; font-weight: 700; }
.tussam-link-body small { display: block; color: var(--ink-muted); font-size: 12.5px; margin-top: 2px; line-height: 1.4; }
.tussam-link-chev { flex: none; color: var(--ink-muted); }

/* Barra de confianza (home #confianza) - aviso legal real, pero como
   franja slim con icono, no como callout grande de documentacion. */
.trust-bar { display: flex; align-items: flex-start; gap: var(--space-md); max-width: 720px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-lg) var(--space-xl); }
.trust-bar svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--ink-muted); }
.trust-bar p { margin: 0; color: var(--ink-muted); font-size: 13.5px; line-height: 1.7; }

.trust { text-align: center; max-width: 640px; margin: 0 auto; }
.trust p { color: var(--ink-muted); font-size: 13.5px; line-height: 1.7; }

.cta-final { text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(32px, 6vw, 56px) var(--space-xl); }
.cta-final h2 { font-size: clamp(24px, 3.4vw, 32px); font-weight: 800; margin: 0 0 var(--space-sm); }
.cta-final p.lead { color: var(--ink2); font-size: 16px; max-width: 480px; margin: 0 auto var(--space-xl); }

/* Disclaimer / note box, reused on línea + tarjeta pages */
.disclaimer-box {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-xl);
  font-size: 13.5px;
  color: var(--ink-muted);
  line-height: 1.7;
  /* margin-top Y margin-bottom a propósito — no basta con espaciar por
     debajo: si lo que precede a la caja (una tabla, un grid) no tiene su
     propio margen inferior, se pegan igualmente. Este bug se ha repetido
     varias veces por arreglar solo un lado. */
  margin: var(--space-lg) 0;
}
.disclaimer-box:first-child { margin-top: 0; }
.disclaimer-box:last-child { margin-bottom: 0; }
.disclaimer-box strong { color: var(--ink2); }

/* Índice de /blog/ — lista cronológica simple, no una grid de tarjetas: un
   blog con pocos posts serios se lee mejor como lista que como catálogo. */
.blog-list { display: flex; flex-direction: column; gap: var(--space-lg); margin: var(--space-lg) 0; }
.blog-list-item {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.blog-list-item:hover { border-color: var(--accent); transform: translateY(-2px); }
.blog-list-date { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: var(--space-sm); }
.blog-list-title { font-size: clamp(19px, 2.4vw, 23px); font-weight: 800; margin: 0 0 var(--space-sm); text-wrap: balance; }
.blog-list-desc { color: var(--ink2); font-size: 15px; line-height: 1.6; margin: 0; }

/* Página /estado/ — tabla de estado mantenida a mano, no un dashboard en vivo */
.status-overall {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--good-soft);
  color: var(--good);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-xl);
  font-weight: 700;
  font-size: 15px;
  margin: var(--space-lg) 0 var(--space-xl);
}
.status-overall svg { flex: none; }

.status-board {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: var(--space-sm) 0;
  margin: 0 0 var(--space-xl);
}
.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-xl) var(--space-xs);
}
.status-row:not(:first-child) { border-top: 1px solid var(--border); padding-top: var(--space-lg); }
.status-row-main { display: flex; align-items: center; gap: var(--space-sm); }
.status-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.status-dot-ok { background: var(--good); }
.status-dot-degraded { background: var(--warn); }
.status-dot-down { background: var(--bad); }
.status-row-name { font-weight: 600; }
.status-badge { font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-pill); white-space: nowrap; }
.status-badge-ok { background: var(--good-soft); color: var(--good); }
.status-badge-degraded { background: var(--warn-soft); color: var(--warn); }
.status-badge-down { background: var(--bad-soft); color: var(--bad); }
.status-row-detail { margin: 0; padding: 0 var(--space-xl) var(--space-md); color: var(--ink-muted); font-size: 13px; line-height: 1.6; }

.status-overall-pending, .status-overall-down { background: var(--bad-soft); color: var(--bad); }
.status-overall-degraded { background: var(--warn-soft); color: var(--warn); }

.status-strips { display: flex; flex-direction: column; gap: var(--space-md); margin-bottom: var(--space-sm); }
.status-history-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.status-uptime { font-weight: 700; color: var(--good); font-variant-numeric: tabular-nums; }
.status-strip { display: flex; gap: 2px; height: 22px; }
.status-tick { flex: 1 1 0; min-width: 2px; border-radius: 2px; background: var(--border); }
.status-tick-ok { background: var(--good); }
.status-tick-degraded { background: var(--warn); }
.status-tick-down { background: var(--bad); }
.status-tick-pending { background: var(--border); }
.status-history-note { color: var(--ink-muted); font-size: 12.5px; margin: var(--space-sm) 0 var(--space-lg); }
.status-incidents { margin: 0; padding-left: 20px; color: var(--ink2); font-size: 13.5px; line-height: 1.8; }
.status-incidents strong { color: var(--ink); }

@media (max-width: 480px) {
  .status-row { flex-wrap: wrap; }
}

/* Página /cambios/ — registro de versiones reales, no un changelog inventado */
.changelog-list { display: flex; flex-direction: column; gap: var(--space-lg); margin-bottom: var(--space-xl); }
.changelog-entry { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); padding: var(--space-lg) var(--space-xl); }
.changelog-entry-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.changelog-version { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.changelog-current { background: var(--accent-soft); color: var(--accent-dim); font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: var(--radius-pill); }
.changelog-status { color: var(--ink-muted); font-size: 12.5px; font-style: italic; }
.changelog-summary { margin: 0; color: var(--ink2); font-size: 14.5px; line-height: 1.7; }

/* Search box (líneas hub) */
.search-box {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 6px 6px 6px 20px;
  max-width: 420px;
  margin: 0 auto var(--space-xxl);
}
.search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search-box svg { flex: none; opacity: 0.5; }
.search-box input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  padding: 10px 0;
  min-width: 0;
}

/* Line badge */
.line-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.01em;
  flex: none;
  text-decoration: none;
}

/* Rutas "cómo llegar" — de dónde sale cada línea hasta el sitio */
.route-list { display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-xxl); }
.route-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  flex-wrap: wrap;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.route-row:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.route-from, .route-to { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.route-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); }
.route-place { font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.route-arrow { color: var(--accent); font-weight: 800; flex: none; }
@media (max-width: 640px) {
  .route-row { gap: var(--space-sm); }
  .route-arrow { display: none; }
}

/* Líneas grid */
.line-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-md); }
.line-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  /* Altura mínima uniforme — nombres de línea de 1 y 3 líneas conviven en
     la misma cuadrícula; sin esto cada fila tiene una altura distinta
     según lo largo que sea el nombre más largo de esa fila en concreto. */
  min-height: 106px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.line-row:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* display:flex column fuerza a name/sub a apilarse en dos líneas siempre —
   sin esto son spans inline sueltos y, cuando el nombre es corto (ej. línea
   "Aeropuerto"), el subtítulo continúa en la MISMA línea en vez de debajo
   ("Aeropuerto AEROPUERTO ⇄ PLAZA DE ARMAS" pegados), leyendo distinto según
   lo largo que sea cada nombre en vez de un patrón título/subtítulo fijo. */
.line-row .meta { display: flex; flex-direction: column; min-width: 0; }
.line-row .meta .name { font-weight: 700; font-size: 14.5px; line-height: 1.3; }
.line-row .meta .sub { font-size: 12.5px; color: var(--ink-muted); margin-top: 2px; }
.line-grid-empty { text-align: center; color: var(--ink-muted); padding: var(--space-xxl) 0; display: none; }

/* Tarjetas rápidas de estadio (/autobus-dia-de-partido-sevilla/) — reutiliza
   .feature (fondo, borde, icono) y solo añade el grid de 2 columnas y el
   envoltorio de línea-badges. max-width + margin:auto para quedar centrado
   dentro de .landing-page, igual que el resto de bloques con ancho propio. */
/* Toda la tarjeta es un <a> (no solo el texto "Ver todas las paradas" al
   final) — mismo patrón que .route-row/.night-line-row en el resto del
   sitio: más fácil de tocar, y resuelve de raíz el bug de espaciado que
   había (el link suelto sin separación de las badges de arriba) en vez de
   parchear solo el margen. */
.stadium-quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-lg); max-width: 760px; margin: var(--space-lg) auto var(--space-xxl); text-align: left; }
/* Cualificadas con la etiqueta (a.___, p.___), no solo la clase: esta
   tarjeta también lleva la clase genérica .feature (para heredar el fondo/
   borde/hover), y a.feature{display:block}/.feature p{margin:0} tienen la
   misma o más especificidad que .stadium-quick-card/.stadium-quick-lines a
   secas — sin la etiqueta, esas reglas genéricas ganaban en el cascade y
   rompían el layout flex y el margen entre los badges y el CTA (bug real,
   reportado por Jose: la línea separadora se pegaba a los badges sin hueco
   ninguno). */
a.stadium-quick-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.stadium-quick-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(21,22,27,0.08); }
.stadium-quick-card h3 { margin: 0 0 var(--space-sm); font-size: 17px; }
p.stadium-quick-lines { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--space-lg); }
.stadium-quick-cta { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: var(--space-md); border-top: 1px solid var(--border); font-size: 13.5px; font-weight: 700; color: var(--accent-dim); }
.stadium-quick-cta span { transition: transform 0.15s ease; }
.stadium-quick-card:hover .stadium-quick-cta span { transform: translateX(3px); }

/* Schedule table (línea page) */
.schedule-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.schedule-table th, .schedule-table td { text-align: left; padding: 12px 18px; font-size: 14.5px; }
.schedule-table th { background: var(--surface2); color: var(--ink-muted); font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.03em; }
.schedule-table tr:not(:last-child) td { border-bottom: 1px solid var(--border); }
.schedule-table td.mono { font-variant-numeric: tabular-nums; font-weight: 600; }
.table-scroll { overflow-x: auto; border-radius: var(--radius-md); }
/* Móvil: el padding de 18px por lado deja las cabeceras de 3-4 columnas
   (p.ej. "Salidas/día (ambos sentidos)" en /datos-tussam-sevilla/) casi
   pegadas al borde de .table-scroll — se detecta con un scroll horizontal
   real pero sin ninguna señal visual de que lo haya. No arregla tablas
   anchas de verdad (para eso está .matchup-table, que se rediseña en vez
   de apretar), solo da algo más de aire a las que están cerca del límite. */
@media (max-width: 480px) {
  .schedule-table th, .schedule-table td { padding: 10px 12px; }
  .schedule-table th { font-size: 11px; letter-spacing: 0.02em; }
}

/* Fare table (tarifas) */
/* white-space:nowrap solo en <td> (el precio en sí, siempre corto, ej.
   "35,30 €") — en <th> forzaba también los rótulos largos ("Precio (IVA y
   SOV incluidos)", "Con descuento (RD Ley 17/25)") a una sola línea, así que
   la tabla entera se ensanchaba muy por encima de 390px y el texto quedaba
   cortado visualmente contra el borde de .table-scroll sin ninguna pista de
   que hacía falta deslizar. Dejando que el <th> envuelva, la tabla entera
   cabe sin scroll horizontal en móvil. */
.fare-table th:not(:first-child), .fare-table td:not(:first-child) { text-align: right; }
.fare-table td:not(:first-child) { white-space: nowrap; }
.fare-table td.propuesto { color: var(--warn); }
.fare-note { color: var(--ink-muted); font-size: 13.5px; line-height: 1.6; margin: var(--space-md) 0 var(--space-xxl); }

/* Banner secundario de lista de espera en páginas de catálogo (cómo-llegar)
   — deliberadamente ligero (un link, no un formulario embebido con
   checkbox de consentimiento) para no competir visualmente con el
   contenido de datos de la página; el formulario real vive en /#apuntate. */
.inline-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.15s ease;
}
.inline-cta:hover { background: color-mix(in srgb, var(--accent-soft) 70%, var(--accent) 10%); }
.inline-cta-action { color: var(--accent-dim); white-space: nowrap; }

/* Comparison table (home) */
.compare-table th:not(:first-child), .compare-table td:not(:first-child) { text-align: center; white-space: nowrap; }
.compare-table td.yes { color: var(--accent-dim); font-weight: 700; }
.compare-table td.no { color: var(--ink-muted); }
.compare-table td.maybe { color: var(--warn); font-weight: 600; }

/* .matchup-table (/alternativa-a-moovit-sevilla/) — same visual language as
   .compare-table, but with its own mobile behaviour: the plain 3-column
   .compare-table needs 734px of content (long "No — ..." sentences with
   white-space:nowrap) and was silently clipping the whole "Moovit /
   Citymapper" column inside .table-scroll below ~800px — including at
   768px, invisible unless you noticed the table was horizontally
   scrollable. On THIS page the table IS the argument, so below 800px it
   switches to stacked rows (criterion, then each answer on its own line
   with a data-label prefix) instead of relying on a silent side-scroll. */
@media (max-width: 800px) {
  .matchup-table, .matchup-table tbody, .matchup-table tr, .matchup-table td { display: block; width: 100%; }
  .matchup-table thead { display: none; }
  /* .schedule-table's own rule puts the row divider on every <td> of a
     non-last row; in stacked mode that would draw it after each of the 3
     stacked cells instead of once per row — cancel it everywhere except the
     final (Moovit/Citymapper) cell, which becomes the one divider per row. */
  .matchup-table td { padding: 0 18px; border-bottom: none !important; }
  .matchup-table td:first-child { padding-top: var(--space-md); padding-bottom: 8px; font-weight: 700; font-size: 14.5px; color: var(--ink); }
  .matchup-table td:not(:first-child) { text-align: left; white-space: normal; padding-top: 6px; }
  .matchup-table td:last-child { padding-bottom: var(--space-md); border-bottom: 1px solid var(--border) !important; }
  .matchup-table tr:last-child td:last-child { border-bottom: none !important; }
  .matchup-table td:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
    margin-bottom: 2px;
  }
}

.direction-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-xl);
}
.direction-block h2 { font-size: 18px; font-weight: 700; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.direction-block .stops-note { color: var(--ink-muted); font-size: 13.5px; margin: 0 0 var(--space-lg); }
.direction-block .sched-block { padding-top: var(--space-lg); border-top: 1px solid var(--border); }
.direction-block .sched-block:first-of-type { padding-top: 0; border-top: none; }

/* Hero "hoy" — próxima salida real, arriba del todo, sin tener que bajar a
   buscar cuál de los 3-4 bloques de horario es el de hoy. */
.today-hero {
  background: linear-gradient(155deg, var(--accent-soft), var(--surface) 70%);
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin: var(--space-lg) 0 var(--space-xxl);
}
.today-hero-day {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-dim);
  margin-bottom: var(--space-md);
}
.today-hero-rows { display: flex; flex-direction: column; gap: var(--space-md); }
.today-hero-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding-top: var(--space-md);
  border-top: 1px solid rgba(0,0,0,0.06);
}
.today-hero-row:first-child { padding-top: 0; border-top: none; }
.today-hero-context { font-weight: 700; font-size: 14.5px; color: var(--ink); }
.today-hero-time { display: flex; align-items: baseline; gap: 8px; }
.today-hero-next { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent-dim); }
.today-hero-eta { font-size: 12.5px; color: var(--ink-muted); font-weight: 600; }
.today-hero-empty { font-size: 13.5px; color: var(--ink-muted); font-weight: 600; }

.line-stat-row { display: flex; gap: var(--space-lg); flex-wrap: wrap; margin: var(--space-lg) 0 var(--space-xxl); }
.line-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); flex: 1 1 160px; }
.line-stat .num { font-size: 22px; font-weight: 800; }
.line-stat .lbl { font-size: 12.5px; color: var(--ink-muted); margin-top: 2px; }

/* Lista de líneas nocturnas en /autobus-nocturno-sevilla/ — panel oscuro
   (mismo gradiente que .mock-lockscreen, un guiño real a "es de noche", no
   decoración porque sí) con filas clicables reales a /lineas/<slug>/, cada
   una con dos paradas intermedias reales calculadas del feed. Jose pidió
   explícitamente que la lista fuera clicable y explicara el recorrido, no
   solo un aviso de frecuencia — esto sustituye a un gráfico de barras que
   no le convenció. Unas pocas "estrellas" vía radial-gradient, sutiles. */
.night-lines-panel {
  background:
    radial-gradient(1.5px 1.5px at 8% 15%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 22% 65%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 40% 30%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1.5px 1.5px at 58% 80%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 75% 20%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1.5px 1.5px at 90% 55%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1px 1px at 96% 85%, rgba(255,255,255,0.3), transparent),
    linear-gradient(180deg, #2b2f3a 0%, #15161b 62%, #0e0f13 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-lg);
  margin: var(--space-lg) 0 var(--space-xl);
}
.night-line-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.09);
  transition: opacity 0.15s ease;
}
.night-line-row:last-child { border-bottom: none; }
.night-line-row:hover { opacity: 0.82; }
.night-line-row-badge { flex: none; }
.night-line-row-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.night-line-row-dest { color: #fff; font-size: 14.5px; font-weight: 700; }
.night-line-row-path { color: rgba(255,255,255,0.6); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.night-line-row-freq { color: rgba(255,255,255,0.42); font-size: 11px; }
.night-line-row-arrow { flex: none; color: rgba(255,255,255,0.4); font-size: 16px; }

@media (max-width: 560px) {
  .night-line-row-path { white-space: normal; }
}

.prevnext { display: flex; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-xxl); flex-wrap: wrap; }
.prevnext a { flex: 1 1 200px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); text-decoration: none; color: var(--ink); }
.prevnext a:hover { border-color: var(--accent); }
.prevnext .dir { font-size: 12px; color: var(--ink-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.prevnext .lbl { font-weight: 700; margin-top: 2px; }
.prevnext a.next { text-align: right; }

/* Línea page */
.line-title-row { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-sm); flex-wrap: wrap; }

/* Mapa (Leaflet) */
.map-box {
  width: 100%;
  height: 260px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface2);
  margin: var(--space-lg) 0 var(--space-xxl);
  z-index: 0;
}
.map-box.map-tall { height: 360px; }
.leaflet-tooltip { font-family: 'Onest', system-ui, sans-serif; font-weight: 600; font-size: 12.5px; border: none; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.leaflet-container { border-radius: var(--radius-lg); font-family: 'Onest', system-ui, sans-serif; }
.map-legend { display: inline-flex; align-items: center; gap: 6px; margin-right: var(--space-lg); }
.map-legend .dot { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }

.sched-block { margin-bottom: var(--space-xl); }
.sched-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-sm); }
.sched-head h3 { font-size: 15px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; }
.sched-range { font-size: 12.5px; color: var(--ink-muted); }

/* Highlight de horario (schedule-highlight.js): bloque de hoy vs. otros
   días, y dentro del de hoy, salida pasada / la próxima / futuras. */
.today-badge {
  display: inline-flex;
  align-items: center;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}
.sched-other-day { opacity: 0.55; }

.time-list { display: flex; flex-wrap: wrap; gap: 6px; }
.time-chip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 9px;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink2);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.time-chip.time-past { background: transparent; border-color: transparent; color: var(--ink-muted); opacity: 0.6; }
.time-chip.time-next {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.stops-details { margin-top: var(--space-xl); }
.stops-details summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--accent-dim);
  padding: var(--space-md) 0;
}
.stops-details .direction-block { margin-top: var(--space-md); margin-bottom: var(--space-xl); }
.stops-details h2 { font-size: 15px; font-weight: 700; margin: 0 0 var(--space-sm); }

.stop-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.stop-list li { display: flex; justify-content: space-between; gap: var(--space-md); padding: 10px 18px; font-size: 14px; }
.stop-list li:not(:last-child) { border-bottom: 1px solid var(--border); }
.stop-list .stop-name { color: var(--ink); text-decoration: none; }
.stop-list .stop-name:hover { color: var(--accent-dim); text-decoration: underline; }
.stop-list .stop-offset { color: var(--ink-muted); font-variant-numeric: tabular-nums; font-size: 12.5px; flex: none; }

/* Tarjetas */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-lg); }
.card-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-lg); }
.card-mock {
  height: 90px;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: var(--space-sm) var(--space-md);
}
.card-mock .chip { width: 26px; height: 18px; border-radius: 4px; background: rgba(255,255,255,0.55); position: absolute; top: 14px; left: 16px; }
.card-mock .label { color: #fff; font-weight: 700; font-size: 12.5px; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.card-tile h2 { font-size: 15.5px; font-weight: 700; margin: 0 0 6px; }
.card-tile p { font-size: 13.5px; color: var(--ink2); margin: 0; }
/* Selector con dos clases (.card-tile .card-price), no solo .card-price: la
   regla genérica ".card-tile p { margin: 0 }" de arriba tiene más
   especificidad que una sola clase y ganaba, anulando este margen — el
   precio y el párrafo de contexto quedaban pegados sin ningún hueco entre
   ellos en las 13 tarjetas que tienen precio. */
.card-tile .card-price { display: flex; align-items: baseline; gap: 6px; margin: 0 0 6px; flex-wrap: wrap; }
.card-price .price-main { font-size: 16px; font-weight: 800; color: var(--accent-dim); }
.card-price .price-disc { font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.card-group-head { font-size: 13px; font-weight: 700; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.04em; margin: var(--space-xxl) 0 var(--space-md); }
.card-group-head:first-of-type { margin-top: 0; }

/* FAQ — <details>/<summary> nativo, mismo patrón que "Horarios TUSSAM" del
   nav (sin JS). Cada <details> es independiente, no un grupo exclusivo. */
.faq-list { max-width: 760px; margin: 0 auto var(--space-lg); }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-lg) var(--space-xl); margin-bottom: var(--space-md); }
.faq-item:last-child { margin-bottom: 0; }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  list-style: none;
  cursor: pointer;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent-dim); }
.faq-item .faq-chev { flex: none; color: var(--ink-muted); transition: transform 0.15s ease; }
.faq-item[open] .faq-chev { transform: rotate(180deg); }
.faq-item[open] summary { margin-bottom: 10px; }
.faq-item p { font-size: 14.5px; color: var(--ink2); margin: 0; }
/* Frase clave resaltada dentro de una respuesta (un puñado, no las 14 —
   ver comentario en build-landing-paginas.mjs) — más oscura que el resto
   del párrafo en vez de acento naranja, para que siga leyendo como
   énfasis dentro del texto y no como otro CTA. */
.faq-item p strong { color: var(--ink); font-weight: 700; }
.faq-group { max-width: 760px; margin: 0 auto var(--space-xxl); }
.faq-group:last-child { margin-bottom: 0; }
.faq-group-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--accent-dim); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 var(--space-md); }
.faq-group-head svg { flex: none; }
.faq-group .faq-list { margin: 0; max-width: none; }

/* Pricing cards (planes) — nunca una cifra concreta, solo cualitativo */
.pricing-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); margin: var(--space-lg) auto var(--space-xxl); max-width: 760px; }
@media (min-width: 700px) {
  .pricing-grid { grid-template-columns: 1fr 1fr; align-items: stretch; }
}
.pricing-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-xl); position: relative; }
.pricing-card-featured { border-color: var(--accent); background: linear-gradient(160deg, var(--accent-soft), var(--surface) 65%); box-shadow: 0 20px 40px -22px rgba(193,68,14,0.3); }
.pricing-card-ribbon { position: absolute; top: -13px; left: var(--space-xl); background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 12px; border-radius: var(--radius-pill); }
.pricing-card-name { font-size: 12.5px; font-weight: 800; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 var(--space-sm); }
.pricing-card-featured .pricing-card-name { color: var(--accent-dim); }
.pricing-card-price { font-size: 19px; font-weight: 700; color: var(--ink); margin: 0 0 var(--space-md); letter-spacing: -0.01em; line-height: 1.35; }
/* Cifra orientativa de precio — no un compromiso cerrado, ver docs/
   estrategia-monetizacion.md. Etiqueta "orientativo" siempre visible junto
   al número para que nunca se lea como precio final. */
.pricing-card-estimate { display: inline-flex; align-items: baseline; gap: 8px; background: var(--accent-soft); border-radius: var(--radius-sm); padding: 6px 12px; margin: 0 0 8px; }
.pricing-card-estimate-value { font-size: 15px; font-weight: 800; color: var(--accent-dim); letter-spacing: -0.01em; }
.pricing-card-estimate-tag { font-size: 10.5px; font-weight: 600; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.03em; }
/* Cifra real (precio del billete suelto TUSSAM) junto a la estimación, para
   que "menos que un billete de bus" no se quede en frase vaga sin repetir
   el párrafo entero de justificación del precio en otro sitio de la página
   (antes se repetía la misma comparación tres veces en /planes/). */
.pricing-card-note { font-size: 12px; color: var(--ink-muted); margin: 0 0 var(--space-lg); }
.pricing-card-includes { font-size: 12.5px; font-weight: 800; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 var(--space-md); }
.pricing-feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.pricing-feature { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--ink2); line-height: 1.4; }
.pricing-feature svg { flex: none; margin-top: 1px; }
.pricing-feature.muted { color: var(--ink-muted); }

/* Objeción de precio (/planes/) — "¿pagar por algo tan simple?" respondida
   de frente, justo después del .compare-visual que hace evidente lo poco
   que cambia sobre el papel (4 pasos -> 1). Icono a un lado, pregunta+
   respuesta al otro, mismo idioma visual que .see-more (círculo de icono +
   texto en accent-soft) pero componente propio: esto no enlaza a otra
   página, es una objeción real resuelta con un hecho del producto, no un
   puntero de lectura. */
.objection-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  max-width: 700px;
  margin: var(--space-xl) auto var(--space-xxl);
  padding: var(--space-lg) var(--space-xl);
  background: var(--accent-soft);
  border-radius: var(--radius-lg);
  text-align: left;
}
.objection-mark {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-dim);
}
.objection-q { margin: 0 0 6px; font-size: 15px; font-weight: 700; font-style: italic; color: var(--ink2); }
.objection-a { margin: 0; font-size: 15px; color: var(--ink); line-height: 1.55; }
.objection-a strong { color: var(--accent-dim); }
@media (max-width: 560px) {
  .objection-card { flex-direction: column; align-items: flex-start; }
}

/* Hero editorial (sobre-busillo, por-que-busillo) */
.editorial-hero { max-width: 760px; margin: 0 0 var(--space-xl); }
.editorial-hero .lead-lg { font-size: clamp(18px, 2.2vw, 21px); color: var(--ink2); line-height: 1.55; margin: 0; }

.pull-quote {
  margin: var(--space-xxl) auto;
  padding: 2px 0 2px var(--space-xl);
  border-left: 4px solid var(--accent);
  font-size: clamp(19px, 2.4vw, 25px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 680px;
}

/* Comparación visual antes/después — para páginas que atacan un pain point
   concreto (por-qué-busillo, alternativa-a-moovit). No es .compare-table
   (esa es tabular con Sí/No); esta es una escena de dos pasos a pasos, para
   mostrar de un vistazo que un lado tiene 4 pasos y el otro tiene 1. */
.compare-visual { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: var(--space-lg); margin: var(--space-lg) auto var(--space-xxl); max-width: 820px; }
.compare-panel { border-radius: var(--radius-lg); padding: var(--space-xl); border: 1px solid var(--border); }
.compare-panel-before { background: var(--surface2); }
.compare-panel-after { background: var(--accent-soft); border-color: transparent; }
.compare-panel-label { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); margin: 0 0 var(--space-md); }
.compare-panel-after .compare-panel-label { color: var(--accent-dim); }
.compare-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.compare-steps li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink2); line-height: 1.3; }
.compare-steps li.compare-step-done { font-size: 16.5px; font-weight: 700; color: var(--ink); margin-top: 2px; }
.compare-step-num { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: var(--ink-muted); }
.compare-steps li.compare-step-done .compare-step-num,
.compare-steps li.compare-step-done svg { flex: none; }
.compare-arrow { display: flex; align-items: center; justify-content: center; color: var(--ink-muted); }
@media (max-width: 640px) {
  .compare-visual { grid-template-columns: 1fr; }
  .compare-arrow { transform: rotate(90deg); width: 100%; }
}

/* "Sigue leyendo" — pointer corto a otra página relacionada, icono a un
   lado y texto al otro (sobre-busillo, por-que-busillo). Para los párrafos
   que solo enlazan a otra página en vez de desarrollar un argumento propio:
   sin esto se leían como un h2+párrafo centrado más, igual que el resto de
   secciones de la página — este bloque los distingue como lo que son, un
   puntero, y rompe una fila de secciones idénticas. */
.see-more {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  max-width: 700px;
  margin: var(--space-xl) auto var(--space-xxl);
  padding: var(--space-lg) var(--space-xl);
  background: var(--accent-soft);
  border-radius: var(--radius-lg);
  text-align: left;
}
.see-more-icon {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-dim);
}
.see-more-title { font-size: clamp(17px, 2vw, 20px); font-weight: 800; letter-spacing: -0.01em; margin: 0 0 4px; color: var(--ink); }
.see-more-text { margin: 0; color: var(--ink2); font-size: 15px; line-height: 1.5; }
.see-more-text a { font-weight: 700; }
@media (max-width: 560px) {
  .see-more { flex-direction: column; text-align: center; }
}

/* Hero de /prensa/ — momento de apertura propio. En móvil, apilado y
   centrado como el resto de la página. A partir de 900px pasa a dos
   columnas (texto a la izquierda, mockup de teléfono a la derecha) — el
   mismo recurso "al lado del texto" que ya usa el hero de la home, en vez
   de forzar el layout de dos columnas a leerse como bloque centrado. La
   página en conjunto sigue siendo centrada (.press-hero tiene su propio
   margin:auto); es solo esta sección la que gana ritmo con el mockup. */
.press-hero {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--space-xl);
  margin: 0 auto var(--space-xl);
  max-width: 700px;
}
.press-hero-content { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-lg); }
.press-hero-head h1 { margin-bottom: var(--space-md); }
.press-hero-lead { color: var(--ink2); font-size: clamp(16px, 2vw, 18px); max-width: 520px; margin: 0 auto var(--space-xl); text-align: center; }
.press-hero-cta { display: flex; gap: var(--space-sm); flex-wrap: wrap; justify-content: center; }
/* Firma de credibilidad bajo los CTA — el "quién soy" que un periodista
   busca en una sala de prensa: no un tercer botón (competiría con los dos
   CTA reales), una línea de confianza que reutiliza la firma ya establecida
   en /sobre-busillo/ (misma persona, mismo texto). */
.press-hero-signoff { color: var(--ink-muted); font-size: 13.5px; max-width: 480px; margin: var(--space-lg) auto 0; }
.press-hero-signoff a { color: var(--ink2); font-weight: 600; }

/* Mockup del hero de prensa: una forma orgánica propia en --accent-soft
   (mismo lenguaje que .hero-visual de la home, sin copiar exactamente su
   anillo punteado — evita que se lea como el tercer calco del mismo
   fondo). Pantalla mostrada: .mock-stop (ver más abajo), no repetida en
   ningún otro sitio del site. */
.press-hero-visual { position: relative; display: flex; justify-content: center; padding: clamp(10px, 4vw, 26px) 0; overflow: hidden; }
.press-hero-visual::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(250px, 66vw);
  height: min(250px, 66vw);
  background: var(--accent-soft);
  border-radius: 42% 58% 60% 40% / 46% 40% 60% 54%;
  transform: translate(-50%, -50%) rotate(10deg);
  z-index: 0;
}
.press-hero-visual .phone-mock {
  --tilt: 4deg;
  position: relative;
  z-index: 1;
  transform: rotate(var(--tilt));
  animation: phone-in 0.8s cubic-bezier(0.16, 0.84, 0.44, 1) 0.1s both;
}
@media (prefers-reduced-motion: reduce) { .press-hero-visual .phone-mock { animation: none; } }
@media (min-width: 900px) {
  .press-hero { grid-template-columns: 1.1fr 0.9fr; max-width: 1080px; gap: clamp(24px, 4vw, 56px); }
  .press-hero-content { align-items: flex-start; text-align: left; }
  .press-hero-content .press-hero-lead,
  .press-hero-content .press-hero-signoff { margin-left: 0; margin-right: 0; text-align: left; }
  .press-hero-cta { justify-content: flex-start; }
}

/* Puente entre el lead personal y el press-stats de /sobre-busillo/ — sin
   esto el bloque de cifras aparecía justo después del párrafo sin ninguna
   frase que lo conecte con "lo hago yo sola", y leía como una tarjeta de
   prensa reciclada en vez de la prueba de que el proyecto es serio pese a
   ser de una persona. Sin max-width propio, no necesita margin:auto. */
.press-stats-label { text-align: center; font-size: 14.5px; font-weight: 700; color: var(--ink-muted); margin: var(--space-lg) 0 0; }

/* Datos clave (prensa, sobre-busillo) — más presencia que line-stat-row */
.press-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); margin: var(--space-lg) 0 var(--space-xxl); }
@media (min-width: 700px) { .press-stats { grid-template-columns: repeat(4, 1fr); } }
.press-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-xl) var(--space-lg); text-align: center; }
.press-stat .num { font-size: clamp(22px, 3vw, 32px); font-weight: 800; color: var(--accent-dim); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.press-stat .lbl { font-size: 12.5px; color: var(--ink-muted); font-weight: 600; margin-top: 4px; }

/* Ficha rápida (/prensa/) — lo que un periodista escanea en 10 segundos:
   filas etiqueta/valor con línea divisoria, no otro .card-grid de cajas
   blancas ni una tabla de datos genérica. */
.press-factsheet { max-width: 640px; margin: var(--space-lg) auto var(--space-xxl); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; text-align: left; }
.press-factsheet-row { display: flex; align-items: baseline; gap: var(--space-md); padding: 14px var(--space-xl); border-top: 1px solid var(--border); }
.press-factsheet-row:first-child { border-top: none; }
.press-factsheet-label { flex: 0 0 150px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted); }
.press-factsheet-value { flex: 1; font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.5; }
.press-factsheet-value a { color: var(--accent-dim); font-weight: 700; }
@media (max-width: 560px) {
  .press-factsheet-row { flex-direction: column; gap: 4px; }
  .press-factsheet-label { flex: none; }
}

/* Ángulos de la historia (/prensa/) — no una prosa continua sobre "por qué
   existe" (eso ya lo cuentan /sobre-busillo/ y /por-que-busillo/ con su
   propio tono), sino ganchos concretos pensados para quien decide si cubrir
   la noticia o no. Lista dividida por bordes superiores, no otra grid de
   tarjetas blancas — variedad de ritmo frente al resto de bloques de la
   página. */
.press-angles { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); max-width: 860px; margin: var(--space-lg) auto var(--space-xxl); text-align: left; }
@media (min-width: 700px) { .press-angles { grid-template-columns: 1fr 1fr; } }
.press-angle { display: flex; gap: var(--space-md); padding-top: var(--space-lg); border-top: 2px solid var(--border); }
.press-angle-num { flex: none; font-size: 13px; font-weight: 800; color: var(--accent-dim); font-variant-numeric: tabular-nums; padding-top: 2px; }
.press-angle-head { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 6px; }
.press-angle-text { font-size: 14px; color: var(--ink2); line-height: 1.55; margin: 0; }
.press-angle-text strong { color: var(--ink); }

/* Bloque citable (boilerplate de prensa) — tipografía de cita, no gris como disclaimer-box */
.quote-block { position: relative; max-width: 740px; margin: var(--space-lg) auto var(--space-xxl); padding: var(--space-xl) var(--space-xl) var(--space-xl) 54px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); font-size: 16.5px; line-height: 1.65; color: var(--ink); }
.quote-block::before {
  content: "\201C";
  position: absolute;
  left: 16px;
  top: 2px;
  font-size: 54px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  font-family: Georgia, 'Times New Roman', serif;
}
/* Frase clave del boilerplate resaltada dentro del bloque citable — rompe la
   monotonía del párrafo gris uniforme y engancha con el h1 de /prensa/ ("La
   hora de salida, calculada..."), no un span decorativo suelto. */
.quote-block .accent { color: var(--accent-dim); font-weight: 700; }

/* Enlace a /prensa/kit-de-prensa/ desde /prensa/ — tarjeta con presencia
   propia en vez de un enlace suelto dentro de un page-lead. */
.press-kit-plug {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  background: var(--accent-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin: var(--space-lg) 0 var(--space-xxl);
  flex-wrap: wrap;
}
.press-kit-plug-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.press-kit-plug-body { flex: 1 1 260px; min-width: 0; }
.press-kit-plug-body p { margin: 0; color: var(--ink2); font-size: 14.5px; }
.press-kit-plug .btn-accent { flex: none; }
@media (max-width: 560px) {
  .press-kit-plug .btn-accent { width: 100%; }
}
/* Miniaturas reales del logo (no un icono genérico de carpeta) — mismo
   fondo a cuadros que .press-kit-preview en la propia página del kit, para
   que /prensa/ enseñe de un vistazo lo que hay al otro lado del enlace. */
.press-kit-plug-preview { display: flex; gap: 8px; flex: none; }
.press-kit-preview-sm {
  /* Rectangular, no cuadrada: el logotipo completo es apaisado (538×214) y
     un cuadrado de 56px lo dejaba reducido a una tira ilegible. El ancho es
     fijo (no auto) para no desbordar en móvil, pero suficiente para que
     las tres miniaturas — icono cuadrado y logotipo apaisado — se lean. */
  width: 84px;
  height: 56px;
  padding: 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  flex: none;
}

/* Manifiesto de descarga (/prensa/kit-de-prensa/) — cifras reales (número
   de archivos, peso total) leídas del propio disco en el script de build,
   como ancla de la apertura de la página en vez de un <h1>+lead a secas. */
.kit-manifest {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin: 0 auto var(--space-xxl);
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
}
.kit-manifest-item { display: flex; flex-direction: column; }
.kit-manifest-item .num { font-size: 19px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.kit-manifest-item .lbl { font-size: 11.5px; font-weight: 700; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 1px; }
.kit-manifest-sep { width: 1px; align-self: stretch; background: var(--border); flex: none; }

/* Kit de prensa (/prensa/kit-de-prensa/) — descargas de logo con vista de
   "asset real": fondo a cuadros (convención de PNG/SVG transparente) en vez
   de la card-grid blanca genérica que usa el resto del sitio para contenido
   suelto. */
.press-kit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-lg); margin: var(--space-lg) 0 var(--space-xxl); }
.press-kit-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.press-kit-preview {
  height: 172px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  background-color: var(--surface);
  background-image:
    linear-gradient(45deg, var(--surface2) 25%, transparent 25%),
    linear-gradient(-45deg, var(--surface2) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--surface2) 75%),
    linear-gradient(-45deg, transparent 75%, var(--surface2) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}
.press-kit-preview img { width: 100%; height: 100%; object-fit: contain; }
.press-kit-body {
  padding: var(--space-lg);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.press-kit-name { font-size: 15px; font-weight: 700; margin: 0; }
.press-kit-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.press-kit-format {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-dim);
  background: var(--accent-soft);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
}
.press-kit-dims { font-size: 12.5px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.press-kit-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 2px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--surface2);
  color: var(--ink);
  font-weight: 700;
  font-size: 13.5px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.press-kit-download:hover { background: var(--accent); color: var(--accent-ink); }
.press-kit-download svg { flex: none; }

/* Frase puente entre "Logo" y "Paleta de color" — sin esto la página era
   tres tramos seguidos de "h2 + grid" con el mismo ritmo exacto (logo, color,
   cita). El dato es real (ver docs/brand-identity.md: el terracota se eligió
   deliberadamente distinto del rojo de TUSSAM) y útil para quien escribe
   sobre Busillo, no relleno de transición. */
.press-palette-intro { max-width: 560px; margin: 0 auto var(--space-lg); text-align: center; color: var(--ink2); font-size: 14.5px; line-height: 1.5; }
.press-palette-intro .accent { color: var(--accent-dim); font-weight: 700; }

/* Paleta de color (/prensa/kit-de-prensa/) — swatches con su propio
   tratamiento (bloque de color grande + hex + uso real), no line-stat-row
   reutilizado de las estadísticas de línea. Flexbox con wrap (no CSS Grid):
   con 5 swatches, un grid `auto-fill` crea columnas fantasma vacías que
   `1fr` estira igual que las reales, así que la fila de swatches queda
   pegada a la izquierda con un hueco vacío a la derecha (bug real
   reportado: la paleta se veía descentrada en 1280px, y el swatch huérfano
   "Fondo" se quedaba pegado a la izquierda de su propia fila en
   768px/390px). Grid no puede centrar una fila incompleta por sí solo —
   `justify-content` en un grid centra las columnas de la plantilla entera,
   no el contenido real de cada fila. Flexbox sí centra cada fila (completa
   o suelta) de forma independiente, y el `max-width` en `.press-swatch`
   evita que un swatch suelto en su propia fila crezca a todo el ancho (el
   bug de auto-fit que esto reemplaza). */
.press-palette { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); margin: var(--space-lg) 0 var(--space-xxl); }
.press-swatch { flex: 1 1 148px; max-width: 200px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.press-swatch-color { height: 84px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); }
.press-swatch-body { padding: var(--space-md) var(--space-lg); }
.press-swatch-name { font-size: 14px; font-weight: 700; }
.press-swatch-hex { font-size: 13px; font-weight: 600; color: var(--ink-muted); font-variant-numeric: tabular-nums; text-transform: uppercase; margin-top: 2px; }
.press-swatch-use { font-size: 12px; color: var(--ink-muted); margin-top: 6px; line-height: 1.4; }

/* Cierre de contacto (/prensa/kit-de-prensa/) — un periodista que aterriza
   directo en el kit (enlace compartido, búsqueda) sin pasar antes por
   /prensa/ no tenía ningún gancho para escribir salvo el email suelto del
   disclaimer de licencia del logo, que habla de condiciones de uso, no de
   "quiero preguntarte algo". Cierra la página con la misma CTA que abre
   /prensa/, en vez de terminar en seco justo después del bloque de cita. */
.press-contact-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin: 0 0 var(--space-xxl);
  flex-wrap: wrap;
}
.press-contact-cta-body { flex: 1 1 260px; min-width: 0; }
.press-contact-cta-body h2 { margin: 0 0 4px; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.press-contact-cta-body p { margin: 0; color: var(--ink2); font-size: 14.5px; }
.press-contact-cta .btn-accent { flex: none; }
@media (max-width: 560px) {
  .press-contact-cta .btn-accent { width: 100%; }
}


/* /preguntas/ — antes el hero tenía una insignia circular abstracta con la
   cifra "14" dentro (el mismo tipo de decoración que Jose pidió sustituir
   por recreaciones concretas, como el mockup "sal ya"). Esta es la
   recreación concreta: una pregunta real y su respuesta real, tal cual
   existen más abajo en el acordeón — comprobado en build time, nunca
   parafraseada — mostradas como un intercambio directo, la prueba visual
   de "sin departamento de atención". No es un .phone-mock (ya hay varios
   en el sitio); una tarjeta de conversación es un tipo de recreación
   distinto, no otro teléfono más. */
.faq-chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 340px;
  margin: 0 auto;
  transform: rotate(1.5deg);
}
.faq-chat-bubble {
  border-radius: 18px;
  padding: 12px 15px;
  font-size: 13.5px;
  line-height: 1.45;
  box-shadow: 0 10px 24px -8px rgba(21,22,27,0.15);
}
.faq-chat-q {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
  font-weight: 700;
  color: var(--ink);
}
.faq-chat-a {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.faq-chat-sign { display: block; margin-top: 8px; font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,0.75); }

/* /preguntas/ — nav de temas generada del mismo array que las preguntas
   y el JSON-LD, para escanear/saltar sin tener que bajar toda la lista. */
.faq-eyebrow { font-size: 13px; font-weight: 800; color: var(--accent-dim); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 var(--space-sm); text-align: center; }
.faq-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto var(--space-xxl); max-width: 700px; }
.faq-jump a {
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink2);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.faq-jump a:hover { border-color: var(--accent); color: var(--accent-dim); }

/* Hero de /sobre-busillo/ — la cita (extraída del propio texto de la
   página, no inventada) hace de titular en vez de un h1 genérico +
   párrafo; la firma deja claro que es una persona real, no una marca. */
.maker-hero { max-width: 780px; margin: 0 auto var(--space-xl); text-align: center; }
.maker-hero-quote { font-size: clamp(24px, 4.2vw, 38px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; margin: 0 0 var(--space-lg); }
.maker-hero-quote .accent { color: var(--accent-dim); }
.maker-sign { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13.5px; color: var(--ink-muted); font-weight: 600; }
.maker-sign .line { flex: none; width: 26px; height: 2px; background: var(--border); }

/* Hero de /por-que-busillo/ — visualiza el argumento entero (la pregunta
   equivocada tachada, la correcta en grande) como h1, en vez de contarlo
   en prosa antes de llegar al argumento real. */
.question-swap { max-width: 780px; margin: 0 auto var(--space-md); text-align: center; }
.question-swap .q-eyebrow { display: block; font-size: 13px; font-weight: 800; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-md); }
.question-swap .q-wrong { display: block; font-size: clamp(19px, 2.8vw, 25px); font-weight: 700; color: var(--ink-muted); text-decoration: line-through; text-decoration-color: var(--border); text-decoration-thickness: 2px; margin-bottom: 8px; }
.question-swap .q-arrow { display: block; color: var(--accent); font-size: 20px; line-height: 1; margin: 2px 0 10px; }
.question-swap .q-right { display: block; font-size: clamp(28px, 4.6vw, 44px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.18; color: var(--ink); }
.question-swap .q-right .accent { color: var(--accent-dim); }

/* Hero de /alternativa-a-moovit-sevilla/ — enfrentamiento directo
   Busillo-vs-competencia como primer elemento visual de la página,
   antes incluso del compare-visual de pasos. */
.matchup-hero { display: flex; align-items: center; gap: var(--space-lg); margin: 0 auto var(--space-xl); flex-wrap: wrap; max-width: 620px; justify-content: center; }
.matchup-side { flex: 1 1 200px; min-width: 0; }
.matchup-side .name { font-size: clamp(21px, 3.6vw, 30px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.matchup-side .tag { font-size: 13.5px; color: var(--ink-muted); font-weight: 600; margin-top: 6px; }
.matchup-side-busillo { text-align: right; }
.matchup-side-busillo .name { color: var(--accent-dim); }
.matchup-side-them .name { color: var(--ink-muted); }
.matchup-vs { flex: none; width: 50px; height: 50px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; font-size: 12.5px; display: flex; align-items: center; justify-content: center; }
@media (max-width: 640px) {
  .matchup-hero { flex-direction: column; align-items: center; text-align: center; }
  /* En fila, flex:1 1 200px da una base de ANCHO — en columna esa misma
     base se lee como ALTO con flex-grow:1, así que cada lado se estira a
     ~200px de alto y deja huecos enormes entre bloques. Sin base/grow en
     columna, cada lado ocupa solo lo que su contenido necesita. */
  .matchup-side { flex: none; }
  .matchup-side-busillo { text-align: center; }
}

/* Duelo de pantallas de /alternativa-a-moovit-sevilla/ — sustituye el
   .compare-visual de pasos de texto (ese sigue usándose tal cual en
   /planes/) por dos fragmentos de pantalla real enfrentados: un buscador
   genérico esquematizado a propósito en gris, sin marca ni texto real —
   para leerse como "podría ser cualquier app en cualquier ciudad" — contra
   el fragmento real de Busillo, con los mismos tokens que .mock-home. No es
   un cuarto .phone-mock de pantalla completa (home/mapa/lock-screen ya
   cubren ese formato); es un recorte más pequeño pensado para colocarse en
   pareja, sin repetir el bisel de teléfono. */
.app-duel { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: var(--space-lg); margin: var(--space-lg) auto var(--space-xxl); max-width: 760px; }
.app-duel-panel { display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; }
.app-duel-label { margin: 0; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); text-align: center; }
.app-duel-label-busillo { color: var(--accent-dim); }
.app-duel-vs { display: flex; align-items: center; justify-content: center; color: var(--ink-muted); }
.app-duel-screen { flex: 1; min-height: 224px; border-radius: var(--radius-lg); padding: var(--space-lg); display: flex; flex-direction: column; }
.app-duel-screen-generic { background: var(--surface2); border: 1px solid var(--border); gap: 9px; }
.duel-field { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 9px 13px; color: var(--ink-muted); }
.duel-field svg { flex: none; }
.duel-field span { font-size: 12px; font-weight: 600; }
.duel-btn { align-self: flex-start; margin: 3px 0; font-size: 10.5px; font-weight: 800; color: var(--ink-muted); background: var(--border); border-radius: 999px; padding: 7px 15px; }
.duel-skel { height: 9px; border-radius: 999px; background: var(--border); }
.duel-skel + .duel-skel { margin-top: 8px; }
.duel-skel-1 { width: 92%; }
.duel-skel-2 { width: 78%; }
.duel-skel-3 { width: 58%; }
.app-duel-screen-busillo { background: var(--bg); border: 1px solid var(--border); justify-content: center; gap: 10px; }
.duel-hint { margin: 2px 0 0; font-size: 10.5px; font-weight: 700; color: var(--ink-muted); text-align: center; }
@media (max-width: 640px) {
  .app-duel { grid-template-columns: 1fr; }
  .app-duel-vs { transform: rotate(90deg); }
}

/* /autobus-universidad-sevilla/ — selector de campus, para que la página
   se use como herramienta ("elige el tuyo") en vez de leerse como lista
   de datos suelta. Los 5 campus de la US tienen ya su propia guía de
   "cómo llegar" grounded en GTFS, así que las 5 tarjetas pesan lo mismo
   — nada de un nivel "principal" y otro "secundario" fingido. flex-wrap
   centrado (no CSS grid con auto-fit) a propósito: con 5 tarjetas, un
   grid de columnas fijas deja la fila final con una columna vacía a la
   derecha si no llena la rejilla (3+2, 4+1...); flex con
   justify-content:center evita ese hueco envolviendo cada fila alrededor
   de su propio centro. */
.campus-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); margin: var(--space-lg) auto var(--space-xl); max-width: 900px; }
.campus-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex: 1 1 260px;
  max-width: 320px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.campus-card:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.campus-card .pin { flex: none; width: 38px; height: 38px; border-radius: var(--radius-md); background: var(--accent-soft); display: flex; align-items: center; justify-content: center; }
.campus-card .pin svg { width: 19px; height: 19px; }
.campus-card .meta { flex: 1; min-width: 0; }
.campus-card .meta .name { font-weight: 700; font-size: 14.5px; }
.campus-card .meta .sub { font-size: 12.5px; color: var(--ink-muted); margin-top: 2px; }
.campus-card .go { flex: none; display: flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--ink-muted); white-space: nowrap; }
.campus-card .go svg { width: 14px; height: 14px; }
.campus-card:hover .go { color: var(--accent-dim); }

/* /autobus-erasmus-sevilla/ — bloque de introducción en inglés, único en
   todo el sitio (el resto de la web es 100% español a propósito, ver
   AGENTS.md/informe del agente). No es un .disclaimer-box: comunica
   contenido real ("esta página es para ti"), no un aviso legal, así que
   tiene su propio tratamiento — badge de idioma + borde de acento en vez
   del gris neutro del disclaimer. */
.intl-intro { background: var(--surface); border: 1.5px solid var(--accent-soft); border-left: 4px solid var(--accent); border-radius: var(--radius-lg); padding: var(--space-lg) var(--space-xl); margin: var(--space-lg) auto var(--space-xl); max-width: 720px; }
.intl-intro-badge { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-dim); background: var(--accent-soft); border-radius: 999px; padding: 3px 10px; margin-bottom: 8px; }
.intl-intro p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink2); text-align: left; }

/* /como-funciona/ — apertura de la página: una mini ruta con 3 paradas
   (Guardas / Calcula / Avisa) en vez de empezar directo en prosa. Guiño al
   mismo motivo "ruta de bus" que ya usa el anillo punteado de .hero-visual. */
.flow-hero { display: flex; justify-content: space-between; align-items: flex-start; position: relative; max-width: 420px; margin: var(--space-xl) auto var(--space-xxl); padding: 0 6px; }
.flow-hero-track {
  position: absolute;
  top: 19px;
  left: 38px;
  right: 38px;
  height: 2px;
  background-image: linear-gradient(to right, var(--border) 0 8px, transparent 8px 16px);
  background-size: 16px 2px;
  background-repeat: repeat-x;
  z-index: 0;
}
.flow-hero-stop { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; }
.flow-hero-dot { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px -6px rgba(193,68,14,0.5); flex: none; }
.flow-hero-label { font-size: 12.5px; font-weight: 800; color: var(--ink2); text-align: center; }

/* Paso 1 — lista de instrucciones numeradas para "guardar un trayecto",
   distinta de .compare-steps (esa es para antes/después) y de .campus-grid
   (esa es para elegir una tarjeta). Números en círculo vía counter, sin
   marcador de <ol> nativo. */
.setup-steps { list-style: none; counter-reset: setup; margin: 0 0 var(--space-lg); padding: 0; display: flex; flex-direction: column; gap: 12px; max-width: 520px; }
.setup-steps li { counter-increment: setup; position: relative; padding-left: 34px; font-size: 15px; line-height: 1.5; color: var(--ink2); }
.setup-steps li::before {
  content: counter(setup);
  position: absolute;
  left: 0;
  top: 1px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-dim);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.setup-steps li strong { color: var(--ink); }

/* Recreación NUEVA de pantalla: guardar un trayecto (chips de línea +
   paradas seleccionables + botón de guardar) — pantalla distinta de
   .mock-home/.mock-map, reutiliza la topbar de .mock-map-topbar porque es
   el mismo patrón de "atrás + título" que ya existe. */
.mock-setup { height: 100%; display: flex; flex-direction: column; font-family: 'Onest', system-ui, sans-serif; }
.mock-setup-body { flex: 1; padding: 14px 16px; display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.mock-setup-section { display: flex; flex-direction: column; gap: 8px; }
.mock-setup-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.mock-setup-chip { font-size: 11px; font-weight: 800; padding: 6px 12px; border-radius: 999px; background: var(--surface2); color: var(--ink-muted); }
.mock-setup-chip.selected { background: var(--accent); color: #fff; }
.mock-setup-stop { display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: 14px; padding: 10px 12px; box-shadow: 0 2px 10px rgba(21,22,27,0.05); border: 1.5px solid transparent; margin-bottom: 8px; }
.mock-setup-stop:last-child { margin-bottom: 0; }
.mock-setup-stop.selected { border-color: var(--accent); background: var(--accent-soft); }
.mock-setup-stop-radio { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border); flex: none; position: relative; }
.mock-setup-stop.selected .mock-setup-stop-radio { border-color: var(--accent); }
.mock-setup-stop.selected .mock-setup-stop-radio::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--accent); }
.mock-setup-stop-name { font-size: 11.5px; font-weight: 700; color: var(--ink); }
.mock-setup-stop-sub { font-size: 9px; color: var(--ink-muted); font-weight: 600; }
.mock-setup-cta { flex: none; margin: 0 16px 16px; background: var(--accent); color: #fff; text-align: center; font-size: 12.5px; font-weight: 800; padding: 12px; border-radius: 14px; }

/* /autobus-erasmus-sevilla/ — pantalla de "buscar sin saber nada todavía",
   reutiliza la topbar de .mock-map-topbar (mismo motivo que .mock-setup:
   una sola topbar reciclada en vez de tres casi-iguales) pero es una
   pantalla nueva, no una variación de .mock-setup ni de ninguna otra ya
   usada en el sitio — el momento que ilustra (escribir una búsqueda sin
   tener ni idea de qué existe) no se parece a "elegir tu línea habitual"
   ni a "ver el mapa de tu ruta guardada". */
.mock-search { height: 100%; display: flex; flex-direction: column; font-family: 'Onest', system-ui, sans-serif; }
.mock-search-body { flex: 1; padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.mock-search-field { display: flex; align-items: center; gap: 8px; background: var(--surface2); border-radius: 12px; padding: 10px 12px; }
.mock-search-field span { font-size: 12px; font-weight: 700; color: var(--ink); }
.mock-search-cursor { display: inline-block; width: 1.5px; height: 12px; background: var(--ink-muted); margin-left: 2px; vertical-align: -1px; }
.mock-search-results { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.mock-search-result { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1.5px solid var(--border); border-radius: 14px; padding: 9px 12px; box-shadow: 0 2px 10px rgba(21,22,27,0.05); }
.mock-search-result.highlight { border-color: var(--accent); background: var(--accent-soft); }
.mock-search-result .pin-ico { width: 26px; height: 26px; border-radius: 8px; background: var(--surface2); display: flex; align-items: center; justify-content: center; flex: none; }
.mock-search-result.highlight .pin-ico { background: #fff; }
.mock-search-result-name { font-size: 11.5px; font-weight: 700; color: var(--ink); }
.mock-search-result-sub { font-size: 9px; color: var(--ink-muted); font-weight: 600; }

/* Paso 2 — el cálculo como una ecuación visual (andar + margen + trayecto =
   hora de salida), y la variación por calendario (laborable/sábado/festivo)
   como chips. Ambas cifras son de un ejemplo ilustrativo (rotulado en el
   HTML), no un horario real de ninguna línea. */
.calc-caption { text-align: center; font-size: 12.5px; color: var(--ink-muted); font-weight: 600; margin: 0 auto var(--space-lg); max-width: 620px; }
.calc-strip { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-sm); margin: 0 auto var(--space-xxl); max-width: 820px; }
.calc-term { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); min-width: 108px; }
.calc-term-icon { width: 26px; height: 26px; border-radius: 9px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; margin-bottom: 2px; }
.calc-term-icon svg { width: 15px; height: 15px; }
.calc-term-value { font-size: 19px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.calc-term-label { font-size: 11px; font-weight: 600; color: var(--ink-muted); text-align: center; }
.calc-op { font-size: 22px; font-weight: 800; color: var(--ink-muted); flex: none; }
.calc-op-eq { color: var(--accent); }
.calc-result { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--accent); color: #fff; border-radius: var(--radius-md); padding: var(--space-md) var(--space-xl); min-width: 120px; }
.calc-result-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.85; }
.calc-result-value { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }

.calc-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-md); max-width: 640px; margin: 0 auto var(--space-xxl); }
.calc-day { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--surface2); border-radius: var(--radius-md); padding: var(--space-md); text-align: center; }
.calc-day-badge { font-size: 10px; font-weight: 800; color: var(--accent-dim); background: var(--accent-soft); padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.03em; }
.calc-day-name { font-size: 12.5px; font-weight: 700; color: var(--ink2); margin-top: 4px; }
.calc-day-time { font-size: 20px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* Paso 3 — recreación NUEVA de pantalla: el móvil bloqueado en el momento
   exacto del aviso, no la home ni el mapa (ya usadas en otras páginas). Fondo
   oscuro real de pantalla de bloqueo, con la notificación como única pieza
   con color de marca. */
.mock-lockscreen { height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 54px 16px 20px; background: linear-gradient(180deg, #2b2f3a 0%, #15161b 62%, #0e0f13 100%); }
.mock-lockscreen-clock { text-align: center; }
.mock-lockscreen-time { font-size: 50px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; }
.mock-lockscreen-date { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.62); margin-top: 6px; }
.mock-lockscreen-notif { background: rgba(255,255,255,0.95); border-radius: 16px; padding: 12px 14px; box-shadow: 0 14px 30px rgba(0,0,0,0.35); animation: notif-in 0.6s cubic-bezier(0.16,0.84,0.44,1) 0.5s both; }
.mock-lockscreen-notif-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.mock-lockscreen-notif-icon { width: 16px; height: 16px; border-radius: 5px; overflow: hidden; flex: none; }
.mock-lockscreen-notif-icon svg { width: 100%; height: 100%; display: block; }
.mock-lockscreen-notif-app { font-size: 10.5px; font-weight: 800; color: var(--ink); text-transform: uppercase; letter-spacing: 0.02em; }
.mock-lockscreen-notif-now { font-size: 10px; color: var(--ink-muted); margin-left: auto; }
.mock-lockscreen-notif-title { font-size: 13px; font-weight: 800; color: var(--ink); margin-bottom: 2px; }
.mock-lockscreen-notif-body { font-size: 11px; color: var(--ink2); line-height: 1.35; margin: 0; }
@keyframes notif-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .mock-lockscreen-notif { animation: none; }
}

footer.site { padding: var(--space-xxl) 0 0; border-top: 1px solid var(--border); margin-top: var(--space-xl); background: var(--surface2); }
footer.site p { color: var(--ink-muted); font-size: 13.5px; margin: 0; }
footer.site a { color: var(--ink-muted); }

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  padding-bottom: var(--space-xxl);
}
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 1.3fr repeat(4, 1fr); gap: var(--space-lg); }
}
.footer-brand { display: flex; flex-direction: column; gap: var(--space-sm); }
.footer-brand .brand { color: var(--ink); }
.footer-brand .name { font-size: 18px; }
.footer-tagline { max-width: 34ch; line-height: 1.5; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col-head { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); margin-bottom: 2px; }
.footer-col a { text-decoration: none; font-size: 14px; }
.footer-col a:hover { color: var(--ink); text-decoration: underline; }

/* Skyline decorativo del footer — Giralda, Torre del Oro y Puente de
   Triana en silueta, un guiño local sutil (Jose: que los sevillanos sientan
   el proyecto como suyo). Puramente ornamental, aria-hidden; sin max-width
   propio (vive dentro de .wrap, que ya centra). */
.footer-skyline {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(24px, 6vw, 56px);
  padding: var(--space-md) 0 var(--space-lg);
  color: var(--accent-dim);
  opacity: 0.55;
}
.footer-skyline svg { display: block; height: auto; }
.footer-skyline .landmark-giralda { width: clamp(24px, 5vw, 34px); }
.footer-skyline .landmark-torre-oro { width: clamp(32px, 6vw, 46px); }
.footer-skyline .landmark-puente { width: clamp(84px, 20vw, 140px); }

.footer-bottom { border-top: 1px solid var(--border); padding: var(--space-lg) 0; display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); align-items: center; justify-content: space-between; }
.footer-bottom p { font-size: 12.5px; margin: 0; }
.footer-legal-links { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.footer-legal-links a { color: var(--ink-muted); }
.footer-legal-links a:hover { color: var(--accent-dim); text-decoration: underline; }

@media (max-width: 640px) {
  /* flex-direction:column hace que flex-basis pase a leerse como ALTO, no
     ancho — sin este reset, el input heredaba "flex: 1 1 260px" del layout
     en fila y se estiraba a 260px de alto en vez de ancho. */
  .waitlist-fields { flex-direction: column; }
  form.waitlist .waitlist-fields .btn-accent,
  form.waitlist .waitlist-fields input[type="email"] { flex: none; width: 100%; height: auto; }
  .prevnext a.next { text-align: left; }

  .nav-toggle { display: flex; }
  nav.main-nav .links {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 32px rgba(0,0,0,0.14);
    padding: var(--space-md);
    gap: 2px;
    z-index: 30;
  }
  .nav-toggle-input:checked ~ .links { display: flex; }
  nav.main-nav .links a,
  nav.main-nav .nav-more summary {
    width: 100%;
    padding: 11px 6px;
    border-radius: var(--radius-sm);
  }
  nav.main-nav .links a:hover,
  nav.main-nav .nav-more summary:hover { background: var(--surface2); }
  nav.main-nav .links a.cta { text-align: center; margin-top: var(--space-xs); }
  .nav-more { width: 100%; }
  .nav-more-menu {
    position: static;
    box-shadow: none;
    border: none;
    padding: 0 0 4px var(--space-md);
    margin: 0;
    min-width: 0;
  }
}

/* Zona muerta 641-860px: el nav de escritorio (6 enlaces + dropdown + CTA)
   no cabe en una fila hasta ~865px, pero el hamburger solo se activaba a
   640px — entre medias (768px incluido, uno de los anchos que hay que
   comprobar siempre) el nav se partía en dos líneas sin ningún estilo
   pensado para ese estado: marca sola arriba, enlaces + botón CTA sueltos
   a la izquierda debajo. Bug real, no cosmético, encontrado a propósito en
   la franja de transición entre breakpoints. Repite aquí las mismas reglas
   del hamburger (no toca el bloque de 640px de arriba — form.waitlist y
   .prevnext no necesitan cambiar en esta franja) para que el nav sea o una
   fila completa o el menú móvil, nunca algo a medias. */
@media (max-width: 880px) {
  .nav-toggle { display: flex; }
  nav.main-nav .links {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 32px rgba(0,0,0,0.14);
    padding: var(--space-md);
    gap: 2px;
    z-index: 30;
  }
  .nav-toggle-input:checked ~ .links { display: flex; }
  nav.main-nav .links a,
  nav.main-nav .nav-more summary {
    width: 100%;
    padding: 11px 6px;
    border-radius: var(--radius-sm);
  }
  nav.main-nav .links a:hover,
  nav.main-nav .nav-more summary:hover { background: var(--surface2); }
  nav.main-nav .links a.cta { text-align: center; margin-top: var(--space-xs); }
  .nav-more { width: 100%; }
  .nav-more-menu {
    position: static;
    box-shadow: none;
    border: none;
    padding: 0 0 4px var(--space-md);
    margin: 0;
    min-width: 0;
  }
}

/* Aviso de TUSSAM (landing/assets/avisos.js) — fijo abajo, centrado, sin
   animación de entrada a propósito (Jose: "un ticket pero sin movimiento")
   y sin botón para cerrarlo: solo aparece cuando hay un aviso real que
   afecta a líneas concretas, así que se queda visible mientras dure en
   vez de poder descartarse. */
.avisos-pill {
  position: fixed;
  left: 50%;
  bottom: var(--space-lg);
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  max-width: min(480px, calc(100vw - var(--space-xl)));
  padding: 12px 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--notice-border);
  background: var(--notice-bg);
  box-shadow: 0 10px 30px rgba(20, 20, 10, 0.12);
}
.avisos-pill-badges { display: flex; flex-wrap: wrap; gap: 6px; flex: none; }
.avisos-pill-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11.5px;
  font-weight: 800;
}
.avisos-pill-body { min-width: 0; text-align: left; }
.avisos-pill-eyebrow {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--notice-text);
  opacity: 0.75;
  margin-bottom: 1px;
}
.avisos-pill-title {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--notice-text);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.avisos-pill-title:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .avisos-pill { left: var(--space-md); right: var(--space-md); transform: none; max-width: none; }
}