cuando quiera (opcional). */
.pago-tarjeta {
border: 2px solid var(--borde);
border-radius: var(--radio);
background: var(--superficie);
min-height: 56px;
padding: 16px 16px;
}
.pago-tarjeta:focus-within { border-color: var(--foco); }
/* 3) MIS PREFERENCIAS (#/mis-preferencias) — el estado («activa», «expirada»…)
se pinta como TEXTO PELADO dentro de `.estados`, que es solo un contenedor
flex. En «Mis reservas», justo al lado, `.estados` lleva la pastilla
`
`: las dos listas se ven distintas sin motivo.
ARREGLO PREFERIDO (1 línea de markup en app.js, es PIEL, no lógica):
estadoPreferenciaTxt() envuelve el texto en la pastilla de la casa —
`return '' + txt + '';`
(el mapa de estadosReserva ya trae `activa: ['pendiente', …]`).
MIENTRAS ESO NO SE HAGA, este CSS lo iguala sin tocar el JS. Va acotado al
contenedor de preferencias, así que no puede afectar a «Mis reservas». */
#preferencias-contenedor .tarjeta-tour .estados {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: var(--radio-pill);
background: var(--tinte);
color: var(--texto);
font-size: var(--fs-micro);
font-weight: 700;
letter-spacing: .02em;
}
#preferencias-contenedor .tarjeta-tour .estados:empty { display: none; }
/* ============================================================
BANNER DE NOVEDAD (19-sep-2026) — «somos nuevos, cuéntanos si algo está roto»
Fondo petróleo (oscuro de marca) + letras en el verde de marca: --tinte-exito
sobre --c-petroleo = 7,42:1 (AA, medido). Botón: píldora blanca (blanco sobre
petróleo = 8,6:1, AAA). Foco blanco (el teal sobre petróleo da 2,0:1).
Solo tokens (Regla 1). El texto va envuelto en su propio (Regla 13).
============================================================ */
.banner-novedad { background: var(--energia-acento); color: var(--c-petroleo); border-top: 1px solid rgba(0,0,0,.14); } /* (21-sep-2026) a juego con el titular del hero; tinta OSCURA: AA sobre ámbar */
.banner-novedad-fila { display: flex; align-items: center; gap: var(--sp-2) var(--sp-4); padding-block: 0; flex-wrap: wrap; } /* (21-sep-2026 · noche) banda FINA: el alto lo pone el contenido (el enlace, 40 px) — sin relleno propio */
.banner-novedad-ico { display: inline-flex; align-items: center; flex: 0 0 auto; color: var(--c-petroleo); font-size: 1.25rem; }
.banner-novedad-texto { flex: 1 1 18rem; min-width: 0; margin: 0; font-size: var(--fs-base); line-height: var(--lh-apretado); } /* interlineado de banda, no de párrafo */
.banner-novedad-texto strong { font-weight: 700; }
/* El alto de la banda lo pone el enlace: 40 px (`--tactil-compacto`; el mínimo legal de WCAG AA es 24).
Probado y DESCARTADO el truco de que el enlace desbordara la banda con márgenes negativos: medido,
esos píxeles se los queda el vecino (arriba la cabecera, abajo el hero) y el objetivo no era real. */
.banner-novedad-cta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tactil-compacto); } /* (21-sep-2026) texto-enlace: manda .btn-enlace */
.banner-novedad-cta:focus-visible { outline-offset: -6px; } /* el contorno se queda DENTRO de la banda */
.banner-novedad :focus-visible { outline-color: var(--c-petroleo); } /* (21-sep-2026) sobre ámbar, el contorno blanco no se veía */
@media (max-width: 720px) {
.banner-novedad-cta { width: 100%; }
}
/* ============================================================
SEÑAL ESTRUCTURAL DE INTERACTIVIDAD (19-sep-2026) — raíz, no parche
Los WebViews móviles (Instagram/Facebook en iOS) solo sintetizan el
`click` en elementos que el motor considera interactivos: sin
`cursor: pointer`, un clic DELEGADO (document.addEventListener) puede
morir antes de llegar al manejador. Se declara UNA vez para todo lo
pulsable, en vez de elemento por elemento (política «no parches»).
============================================================ */
button, [role="button"], [role="radio"], [role="tab"], [role="option"], summary, select,
.btn, .chip, .anotacion-opcion, .anotacion-boton, .anotacion-flotante,
.tarjeta-tour, .tarjeta-tour a, .tarjeta-reserva { cursor: pointer; }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; }
/* Enlace estirado de la tarjeta de descubrimiento (19-sep-2026): TODA la tarjeta lleva al
tour. Antes solo el título y la foto eran pulsables; tocar el texto no hacía nada, y en
móvil (o en el navegador de Instagram) eso se siente como «no es clicable». Es la del
título cubriendo la tarjeta: nativo, sin JS ni onclick (política «no parches»). */
.tarjeta-tour.enlaza-todo { position: relative; }
.tarjeta-tour.enlaza-todo .titulo a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tarjeta-tour.enlaza-todo :is(.chip, button, .btn) { position: relative; z-index: 1; }
/* ---------- Ventana de confirmación del alta de guía (20-sep-2026) ----------
Solo tokens: el velo y la tarjeta siguen el mismo lenguaje que el resto de capas modales. */
.ventana-solicitud { position: fixed; inset: 0; z-index: 9998; background: var(--velo-modal); display: flex; align-items: center; justify-content: center; padding: var(--sp-4); }
.ventana-caja { background: var(--superficie); color: var(--texto); border: 1px solid var(--borde-suave); border-radius: var(--radio-m); box-shadow: var(--sombra-modal); padding: var(--sp-5); max-width: 460px; width: 100%; display: flex; flex-direction: column; gap: var(--sp-4); }
.ventana-titulo { margin: 0; font-size: var(--fs-titulo); display: flex; align-items: center; gap: var(--sp-2); }
.ventana-titulo .ico { color: var(--c-exito); flex: 0 0 auto; }
.ventana-texto { margin: 0; color: var(--texto-suave); }
.ventana-acciones { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.ventana-acciones .btn { flex: 1 1 auto; min-height: 44px; }
@media (max-width: 420px) { .ventana-acciones { flex-direction: column; } .ventana-acciones .btn { width: 100%; } }
/* ============================================================
RONDA 19 · AA del modo oscuro (21-sep-2026) — SOLO AÑADIDO
Medido con el navegador de verdad (6 pantallas × 2 temas, letra a++):
en oscuro el sobretítulo quedaba petróleo sobre el fondo oscuro (1,76:1)
y el texto del CTA del banner, claro sobre el ámbar de la banda (1,52:1;
«claro sobre ámbar» está prohibido por la casa). Mismo patrón que la
fila-resumen.mejor: en una banda ámbar el texto va petróleo también en
oscuro, y sobre fondo oscuro el sobretítulo va ámbar (--energia-acento,
como en .banda-petroleo). Con estas dos líneas: 0 fallos AA.
Metro que lo vigila: 08-web/qa-aa-oscuro.py (corre en la suite).
============================================================ */
:root[data-tema="oscuro"] .sobretitulo { color: var(--energia-acento); }
.banner-novedad .banner-novedad-cta { color: var(--c-petroleo); }
/* ============================================================
RONDA 20 · Velo de las tarjetas de ciudad (22-sep-2026) — SOLO AÑADIDO
El velo de la tarjeta (.destino::after) estaba fijo abajo: con letra grande
las letras crecían fuera de él (hasta 87 % del fondo por debajo de 3:1).
Ahora hay un velo anclado al bloque de texto (.destino .texto::before, arriba)
que crece con él. Y en la banda 721-1060 px con letra a++ las 5 columnas
dejaban tarjetas de 146 px: «Mánchester» (147 px de tinta) se cortaba 17 px
por el borde; con 4 columnas la caja de texto pasa a ~160 px.
Medido con qa-a11y-publica.py (píxel a píxel, portada × 390/880 × claro/a++).
============================================================ */
@media (min-width: 721px) and (max-width: 1060px) {
html[data-fuente="a++"] .rejilla-destinos { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
/* ==========================================================================
(21-sep-2026) Banda 700–1100 px con letra grande: la fila de «Salidas de hoy» tiene 5 columnas
fijas (96 + 160 + 220 + 130 = 606 px más huecos) y al crecer la letra el título se queda en 25 px
con palabras de 66-87 px que se salen de su caja. Solo en ESA banda y SOLO con la letra grande se
usa la rejilla de dos columnas que el móvil ya usa; el estado normal (a 390, 880 y 1440) no cambia.
========================================================================== */
@media (min-width: 721px) and (max-width: 1100px) {
html[data-fuente="a++"] .lista-salidas-hoy li { grid-template-columns: 72px minmax(0, 1fr); }
html[data-fuente="a++"] .lista-salidas-hoy li > :nth-child(n+3) { grid-column: 2; }
}
/* ============================================================
(23-sep-2026) Petición de los amigos de Ale:
· bloques del guion en párrafos cortos y listas legibles (un bloque de
20+ líneas seguidas es anti-neurodivergente);
· el botón de Stripe muestra que trabaja (girador) — «no reaccionaba».
============================================================ */
.bloques-guion p { margin: 0 0 var(--sp-5); }
.bloques-guion > :last-child { margin-bottom: 0; }
.bloques-guion .fuentes-linea { margin-top: var(--sp-2); }
.lista-guion { margin: 0 0 var(--sp-5); padding-left: 1.25em; }
.lista-guion li { margin-bottom: var(--sp-2); }
.lista-guion li:last-child { margin-bottom: 0; }
.girando {
display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em;
margin-right: .5em; border: 2px solid currentColor; border-top-color: transparent;
border-radius: 50%; animation: girando .8s linear infinite;
}
@keyframes girando { to { transform: rotate(360deg); } }
:root[data-reducir-movimiento="true"] .girando { animation: none; }
@media (prefers-reduced-motion: reduce) { .girando { animation: none; } }
/* ===== PREFERENCIAS DE GUÍA (G10): rejilla del diseño original (27-sep-2026, Ale · opción A)
El resumen de nivel/puntos en SU columna, a la DERECHA; los pasos 1-6 en dos columnas.
Antes, en una sola columna, los pares etiqueta/valor se estiraban a 999 px de hueco. ===== */
.gpref-rejilla { display: grid; grid-template-columns: minmax(0, 340px) minmax(0,1fr); gap: var(--sp-5); align-items: start; }
.gpref-aside { grid-column: 1; grid-row: 1; display: grid; gap: var(--sp-5); align-content: start; }
.gpref-pasos { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: minmax(0,1fr); gap: var(--sp-5); align-content: start; }
@media (max-width: 1100px) {
.gpref-rejilla { grid-template-columns: minmax(0,1fr); }
.gpref-aside { grid-column: 1; grid-row: 1; }
.gpref-pasos { grid-column: 1; grid-row: 2; }
}
/* ============================================================
Cortina de arranque de la portada (05-oct-2026)
Lo primero que ve quien entra mientras descargan los ~22 scripts de la SPA:
composición de marca sobre el petróleo del hero real (antes: un titular
suelto sobre gris — «horrible», Ale). Solo CSS: sin JS, sin romper la CSP.
navegar() sustituye #app entero y la cortina desaparece por sí sola.
============================================================ */
.cortina { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); padding: var(--sp-8) var(--sp-5); text-align: center; background: var(--c-petroleo); color: var(--c-blanco); }
.cortina-caja { display: inline-flex; align-items: center; background: var(--c-blanco); border-radius: var(--radio-s); padding: 4px 8px; }
.cortina h1 { margin: var(--sp-3) 0 0; font-size: var(--fs-display); font-weight: 800; letter-spacing: var(--ls-titulo); line-height: 1.05; color: inherit; max-width: 16ch; }
.cortina-claim { margin: 0; font-size: 1.375rem; opacity: .95; max-width: 44ch; }
.cortina-pulso { display: inline-flex; gap: 7px; margin-top: var(--sp-4); }
.cortina-pulso span { width: 7px; height: 7px; border-radius: 50%; background: var(--c-blanco); opacity: .3; animation: cortina-latido 1.2s ease-in-out infinite; }
.cortina-pulso span:nth-child(2) { animation-delay: .2s; }
.cortina-pulso span:nth-child(3) { animation-delay: .4s; }
@keyframes cortina-latido { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cortina-pulso span { animation: none; } }
html[data-reducir-movimiento="true"] .cortina-pulso span { animation: none; }