/* Qué Hacemos — sitio público. Mobile-first 390×844 (decisión #9): cero
   frameworks, cero DevExtreme. Los colores salen del logo (decisión #33): el
   azul de «UATE» manda; el verde del logo marca lo que está en curso; «hoy»
   lleva el degradado azul-cian de la «g»; claro es la cara principal y el
   oscuro es noche azul, siguiendo al teléfono. Poppins para los títulos y
   Dosis (la letra de «HACEMOS») para los rótulos; el texto corre con la
   fuente del sistema para no cargar nada de más (R201).
   La composición es la del prototipo aprobado el 2026-10-03: la hora manda en
   una franja teñida con el color de la categoría, los momentos caben siempre
   en una barra, y lo que empieza pronto va arriba con su anillo. */

/* Fuentes propias, servidas desde el sitio (CSP font-src 'self'; R201). */
@font-face { font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/poppins-600.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/poppins-700.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/poppins-800.woff2) format("woff2"); }
@font-face { font-family: Dosis; font-style: normal; font-weight: 700 800; font-display: swap; src: url(../fonts/dosis.woff2) format("woff2"); }

/* R7 / QHG-014: los contrastes de estos tokens los mide la suite (WCAG AA,
   4.5:1 en texto normal). Los nombres se conservan: --papel es el fondo de la
   página y --blanco la superficie, también en el tema oscuro. */
:root {
    color-scheme: light dark;
    --tinta: #0f2440;
    --papel: #f7f9fc;
    --blanco: #ffffff;
    --acento: #2456cc;        /* azul del logo · 6.41 sobre blanco · 5.3 sobre suave */
    --acento-suave: #e6effb;
    --verde: #017a2c;         /* verde del logo · 5.50 sobre blanco · 4.88 sobre suave */
    --verde-suave: #e3f6ea;
    --ambar: #7a6700;         /* 5.18 sobre ámbar-suave */
    --ambar-suave: #fff8c7;
    --rojo: #b3261e;
    --rojo-suave: #fbe9e7;
    --gris: #5f6f88;          /* 5.10 sobre blanco · 4.9 sobre papel */
    --texto: #3d4b63;
    --linea: #e3e9f3;
    --linea-2: #cfdcf3;
    --elevada: #eef3fa;
    --sobre-acento: #ffffff;
    --cabecera: #ffffff;
    --pronto: #0f2440;
    --barra: rgba(247, 249, 252, .92);
    --sombra: 0 1px 2px rgba(15, 36, 64, .05), 0 8px 20px -14px rgba(15, 36, 64, .3);
    --sombra-boton: 0 12px 22px -12px rgba(36, 86, 204, .7);
    --grad-hoy: linear-gradient(100deg, #2456cc 0%, #1f7fe0 55%, #199ddb 100%);
    --grad-boton: linear-gradient(120deg, #2456cc 0%, #1b74d8 100%);
    /* El momento elegido: azul del logo con letra blanca, de día y de noche
       (6.41 y 4.63 en los extremos). */
    --grad-momento: linear-gradient(100deg, #2456cc 0%, #1b74d8 100%);
    --espectro: linear-gradient(90deg, #01e9ec, #2183d5, #3c2fc1, #cd50fa, #e650af, #fd4a41, #ff941f, #ffdf05, #beec52, #61d042);
    --titulos: Poppins, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --rotulos: Dosis, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --sistema: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --cat: var(--acento);
    --cat-tinte: var(--acento-suave);
    /* Íconos de trazo, como máscara (img-src 'self' data:): toman el color del texto. */
    --ico-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
    --ico-marca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12a1 1 0 0 1 1 1v17l-7-4.5L5 21V4a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
    --ico-marca-llena: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12a1 1 0 0 1 1 1v17l-7-4.5L5 21V4a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
    --ico-compartir: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v13M7 8l5-5 5 5'/%3E%3Cpath d='M5 13v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6'/%3E%3C/svg%3E");
    --ico-visto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* Noche azul: el mismo azul de la caja del logo, no negro. */
@media (prefers-color-scheme: dark) {
    :root {
        --tinta: #f3f6fb;
        --papel: #081b36;
        --blanco: #0f2447;
        --acento: #6fb0ff;
        --acento-suave: #163058;
        --verde: #4fd27b;
        --verde-suave: #163a24;
        --ambar: #ffd84a;
        --ambar-suave: #3a3410;
        --rojo: #ff8f86;
        --rojo-suave: #3f2222;
        --gris: #a9b8d1;
        --texto: #d6e0f0;
        --linea: #22406e;
        --linea-2: #2b4a7a;
        --elevada: #163058;
        --sobre-acento: #081b36;
        --cabecera: #081b36;
        --pronto: #13305d;
        --barra: rgba(8, 27, 54, .92);
        --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 24px -16px rgba(0, 0, 0, .7);
        --sombra-boton: 0 12px 24px -12px rgba(111, 176, 255, .5);
        --grad-hoy: linear-gradient(100deg, #6fb0ff 0%, #4fc8ff 55%, #2fe3ff 100%);
        --grad-boton: linear-gradient(120deg, #6fb0ff 0%, #2fd3ff 100%);
    }
}

/* El espectro de la «g», repartido entre las 10 categorías del catálogo
   (la clase la pone CategoriaCss.ClaseDe a partir del nombre; en la tarjeta va en
   el enlace y :has() la sube al <li>). */
.cat-musica, .tarjeta:has(.cat-musica) { --cat: #3c2fc1; --cat-tinte: #ebe9fb; }
.cat-cultura-y-arte, .tarjeta:has(.cat-cultura-y-arte) { --cat: #8f36cc; --cat-tinte: #f4e9fb; }
.cat-cine-y-teatro, .tarjeta:has(.cat-cine-y-teatro) { --cat: #b8327f; --cat-tinte: #fbe8f3; }
.cat-gastronomia, .tarjeta:has(.cat-gastronomia) { --cat: #7a6700; --cat-tinte: #fff8c7; }
.cat-deportes, .tarjeta:has(.cat-deportes) { --cat: #0b7a86; --cat-tinte: #dffbfc; }
.cat-talleres-y-cursos, .tarjeta:has(.cat-talleres-y-cursos) { --cat: #4e7300; --cat-tinte: #f2fbd9; }
.cat-ferias-y-festivales, .tarjeta:has(.cat-ferias-y-festivales) { --cat: #b04f00; --cat-tinte: #fff0df; }
.cat-fe-y-comunidad, .tarjeta:has(.cat-fe-y-comunidad) { --cat: #1d63b8; --cat-tinte: #e6effb; }
.cat-vida-nocturna, .tarjeta:has(.cat-vida-nocturna) { --cat: #4a22ba; --cat-tinte: #ece6f9; }
.cat-turismo-y-aire-libre, .tarjeta:has(.cat-turismo-y-aire-libre) { --cat: #1b7a44; --cat-tinte: #e3f5ea; }
@media (prefers-color-scheme: dark) {
    .cat-musica, .tarjeta:has(.cat-musica) { --cat: #b9b3ff; --cat-tinte: #1f1f5e; }
    .cat-cultura-y-arte, .tarjeta:has(.cat-cultura-y-arte) { --cat: #e0b3ff; --cat-tinte: #33174f; }
    .cat-cine-y-teatro, .tarjeta:has(.cat-cine-y-teatro) { --cat: #ff8fcf; --cat-tinte: #3d1a32; }
    .cat-gastronomia, .tarjeta:has(.cat-gastronomia) { --cat: #ffdf05; --cat-tinte: #3a3410; }
    .cat-deportes, .tarjeta:has(.cat-deportes) { --cat: #5ff0f5; --cat-tinte: #0f3a3f; }
    .cat-talleres-y-cursos, .tarjeta:has(.cat-talleres-y-cursos) { --cat: #d4f57a; --cat-tinte: #2a3a12; }
    .cat-ferias-y-festivales, .tarjeta:has(.cat-ferias-y-festivales) { --cat: #ffb259; --cat-tinte: #3f2a12; }
    .cat-fe-y-comunidad, .tarjeta:has(.cat-fe-y-comunidad) { --cat: #79b3ff; --cat-tinte: #10294d; }
    .cat-vida-nocturna, .tarjeta:has(.cat-vida-nocturna) { --cat: #c9b3ff; --cat-tinte: #221447; }
    .cat-turismo-y-aire-libre, .tarjeta:has(.cat-turismo-y-aire-libre) { --cat: #7ddc9a; --cat-tinte: #10311f; }
}

/* R7 / QHG-015: indicador de foco diseñado, ≥3:1 contra papel y blanco. */
:focus-visible {
    outline: 3px solid var(--tinta);
    outline-offset: 2px;
    border-radius: 4px;
}
.chip.activo:focus-visible,
.boton-principal:focus-visible {
    outline-color: var(--tinta);
    outline-offset: 3px;
}

/* Enlace para saltar al contenido: primer foco de la página. */
.saltar-al-contenido {
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: 100;
    padding: 10px 16px;
    color: var(--sobre-acento);
    background: var(--acento);
    border-radius: 0 0 10px 0;
    font-weight: 700;
    text-decoration: none;
}
.saltar-al-contenido:focus { left: 0; }

/* Lo oculto se oculta SIEMPRE (R18, UXA-10). */
[hidden] { display: none !important; }

/* R18, UXA-11: la barra fija de la ficha no tapa lo que tiene el foco. */
html { scroll-padding-bottom: 96px; scroll-padding-top: 48px; }

/* Texto solo para lectores de pantalla. */
.solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    color: var(--tinta);
    background: var(--papel);
    font: 15.5px/1.5 var(--sistema);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--titulos); letter-spacing: -0.02em; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: var(--acento); }

/* Rótulos: la letra de «HACEMOS» del logo, en mayúsculas espaciadas. */
.rotulo,
.chips-titulo,
.dato-titulo,
.dia-encabezado,
.ficha-categoria,
.heroe-fecha {
    font-family: var(--rotulos);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gris);
}

/* ── Cabecera ────────────────────────
   No se adhiere al deslizar: nada flota sobre los resultados (R254). */
.cabecera { background: var(--cabecera); }
.cabecera-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: min(760px, 100%);
    margin-inline: auto;
    padding: 8px 8px 8px 18px;
}
.marca {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    color: var(--tinta);
    font-family: var(--titulos);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 10px;
}
/* En las listas va el logo completo; adentro, el camino de vuelta con la «g». */
.marca-logo img { display: block; width: auto; height: 46px; }
.marca-icono { display: block; width: 30px; height: 30px; }
.marca svg { width: 20px; height: 20px; margin-inline: -4px -2px; }
.enlaces-cabecera { display: flex; gap: 2px; }
/* Botones de ícono (44 px), con su nombre para lectores. */
.enlace-guardados {
    min-height: 44px;
    min-width: 44px;
    border-radius: 999px;
    color: var(--tinta);
    text-decoration: none;
}
.enlace-guardados > * { grid-area: 1 / 1; }
.enlace-guardados svg { width: 22px; height: 22px; }
.enlace-guardados:hover { background: var(--elevada); }
/* Cuántos planes hay guardados en este navegador: lo pone el JS. */
.globo {
    align-self: start;
    justify-self: end;
    min-width: 17px;
    height: 17px;
    margin: 5px 4px 0 0;
    padding: 0 4px;
    border-radius: 9px;
    color: var(--sobre-acento);
    background: var(--acento);
    box-shadow: 0 0 0 2px var(--cabecera);
    font: 700 10.5px/17px var(--sistema);
    text-align: center;
}
/* La firma de la casa: el espectro de la «g» como una línea fina bajo la cabecera. */
.espectro { height: 3px; background: var(--espectro); }

.contenido {
    width: min(760px, 100%);
    margin-inline: auto;
    padding: 10px 18px 72px;
    overflow-wrap: anywhere;
}
/* Las listas usan todo el ancho; la ficha y las páginas de texto, columna de lectura. */
.contenido:has(> .filtros),
body:has(.filtros) .cabecera-fila,
body:has(.filtros) .pie { width: min(1180px, 100%); }

/* ── Héroe (portada) ──────────────────────── */
.heroe { padding: 6px 0 0; }
.heroe-fecha { margin: 0 0 8px; font-size: 13px; letter-spacing: .16em; }
.heroe-fecha::first-letter { text-transform: uppercase; }
.heroe h1 {
    margin: 0;
    font-size: 36px;
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.035em;
}
/* «hoy» lleva el degradado azul-cian de la «g». */
.heroe h1 em {
    font-style: normal;
    background: var(--grad-hoy);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.heroe-promesa { margin: 8px 0 0; color: var(--texto); font-size: 15px; line-height: 1.4; }
.encabezado-momento { padding: 6px 0 0; }
.encabezado-momento h1 {
    margin: 0;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
}
/* En las listas, el título ES el momento: lleva el azul de la marca. */
.encabezado-momento:has(+ .filtros) h1 {
    width: fit-content;
    background: var(--grad-boton);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.contador { margin: 4px 0 0; color: var(--texto); font-size: 15px; font-weight: 600; }
.contador b { color: var(--acento); font-family: var(--titulos); }
/* R205: en la portada la cifra del momento va en grande. */
.contador-heroe b { font-size: 30px; line-height: 1; vertical-align: -3px; }
.contador-extras { font-size: 13.5px; font-weight: 500; color: var(--gris); }

/* ── Chips / filtros (filas que se deslizan, sin barra nativa) ── */
.filtros { margin-top: 12px; display: grid; gap: 0; }
.chips {
    /* R18, R257: contiene sus textos ocultos (absolute) para que no ensanchen la página. */
    position: relative;
    display: flex;
    gap: 8px;
    align-items: center;
    overflow-x: auto;
    padding: 6px;
    margin-inline: -6px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.chips::-webkit-scrollbar { display: none; }
/* Las filas van juntas: comparten su relleno (el anillo de foco cabe entero en el de cada una). */
.chips:not(.chips-momento) + .chips { margin-top: -6px; }
/* R223: un degradado en el borde avisa que la fila sigue. */
.chips.desborda-der {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}
.chips.desborda-izq {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent);
}
.chips.desborda-izq.desborda-der {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
}
.chips-titulo { flex: 0 0 auto; }
.chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    color: var(--tinta);
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.chip b { font-size: 12.5px; font-weight: 600; color: var(--gris); }
.chip.activo { color: var(--sobre-acento); background: var(--acento); border-color: var(--acento); }
.chip.activo b { color: var(--sobre-acento); opacity: .85; }
/* Gratis se reconoce de un vistazo: el verde del logo. */
.chip-gratis { color: var(--verde); background: var(--verde-suave); border-color: transparent; }
.chip-gratis b { color: var(--verde); }
.chip-quitar { border-style: dashed; color: var(--acento); }
.chip-cerca { cursor: pointer; font: inherit; font-weight: 600; font-size: 14px; }
.chip-cerca:disabled { opacity: .6; cursor: wait; }
/* R217: el momento en «Buscás» se nombra pero no se quita. */
.chip-fijo { background: var(--elevada); border-color: var(--elevada); }

/* Los momentos: una barra donde siempre caben los cuatro (y «Cerca», si el
   teléfono sabe dónde está), cada uno con cuántos planes tiene. */
.chips-momento {
    gap: 2px;
    margin: 0 0 6px;
    padding: 4px;
    border: 1px solid var(--linea);
    border-radius: 20px;
    background: var(--blanco);
    box-shadow: var(--sombra);
}
.chips-momento .chip {
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    padding: 5px 8px;
    border: 0;
    border-radius: 16px;
    background: none;
    font-family: var(--titulos);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}
.chips-momento .chip b { font: 600 12px/1.2 var(--sistema); }
.chips-momento .chip.activo { color: #fff; background: var(--grad-momento); }
.chips-momento .chip.activo b { color: #fff; opacity: .88; }
.chips-momento .chip-cerca { flex: 0 1 auto; font-size: 12px; color: var(--texto); }
.chips-momento .chip-cerca span { font-size: 15px; line-height: 1.1; }

.alcance-cerca { margin: 4px 0 0; color: var(--gris); font-size: 13.5px; }
.alcance-cerca a { color: var(--tinta); }
.aviso-geo {
    margin: 2px 0 6px;
    padding: 10px 14px;
    color: var(--ambar);
    background: var(--ambar-suave);
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 600;
}
.distancia { color: var(--verde); font-weight: 700; }

/* ── «Empieza pronto» (lo más próximo en la portada) ─────── */
.empieza-pronto { margin-top: 8px; }
.proximo {
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: 14px;
    align-items: center;
    padding: 14px 16px 17px 20px;
    border-radius: 22px;
    color: #fff;
    background: var(--espectro) bottom / 100% 3px no-repeat,
        radial-gradient(120% 140% at 100% 0%, rgba(31, 127, 224, .55), transparent 55%),
        var(--pronto);
    box-shadow: 0 22px 40px -24px rgba(15, 36, 64, .8);
    text-decoration: none;
}
.proximo-cuerpo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.proximo .rotulo { display: flex; align-items: center; gap: 8px; color: #9fd0ff; font-size: 12.5px; letter-spacing: .14em; }
.proximo .rotulo::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6ff0a0;
    box-shadow: 0 0 0 4px rgba(111, 240, 160, .2);
}
.proximo h3 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.25; color: #fff; }
.proximo-meta { margin: 0; font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, .8); }
.proximo-meta b { color: #fff; }
/* El anillo del logo convertido en reloj: se cierra a medida que el plan se acerca. */
.anillo { display: grid; width: 72px; height: 72px; }
.anillo > * { grid-area: 1 / 1; }
.anillo svg { width: 72px; height: 72px; }
.anillo-pista { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 2; }
.anillo-arco { fill: none; stroke-width: 2; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 12px 12px; }
.anillo-texto { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.anillo-texto b { font-family: var(--titulos); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; }
.anillo-texto small { margin-top: 2px; font-size: 11px; color: rgba(255, 255, 255, .72); }

/* R3: el mapa de terceros se pide, no se impone. */
.mapa-caja {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 128px;
    margin-top: 10px;
    border-radius: 14px;
    background-color: var(--elevada);
    background-image: repeating-linear-gradient(0deg, var(--linea) 0 1px, transparent 1px 28px), repeating-linear-gradient(90deg, var(--linea) 0 1px, transparent 1px 28px);
}
.boton-mapa {
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    color: var(--tinta);
    background: var(--blanco);
    border: 1px solid var(--linea-2);
    border-radius: 999px;
    padding: 0 18px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--sombra);
}
.mapa-nota { margin: 0; color: var(--gris); font-size: 12.5px; }
.mapa-caja-cargada { display: block; height: auto; margin-top: 0; background: none; }
.mapa-ficha {
    width: 100%;
    height: 220px;
    margin-top: 10px;
    border: 1px solid var(--linea);
    border-radius: 14px;
}

/* R5: paginación de la lista principal. */
.paginacion { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 22px; }
.paginacion .chip { padding: 0 22px; border-color: var(--linea-2); font-family: var(--titulos); font-size: 15px; }
.pagina-actual { color: var(--gris); font-size: 13.5px; font-weight: 600; }

/* ── Lista agrupada por día ──────────────────────── */
.grupo-dia { margin-top: 10px; }
/* R228: el día queda a la vista mientras se recorre su grupo. */
.dia-encabezado {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    background: var(--papel);
    padding: 10px 0 8px;
    margin: 0 0 4px;
    font-size: 13.5px;
    letter-spacing: .16em;
    color: var(--tinta);
}
.dia-encabezado::first-letter { text-transform: uppercase; }
.dia-cuantos { flex: none; font: 500 13px/1 var(--sistema); letter-spacing: 0; text-transform: none; color: var(--gris); }
.franja-extra { margin-top: 30px; }
.franja-extra h2 { margin: 0 0 12px; font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--tinta); }

.lista-eventos { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
/* La tarjeta: a la izquierda la hora, grande, sobre el tinte de su categoría;
   a la derecha la categoría, el título, el lugar y sus etiquetas. */
.tarjeta {
    /* R230: dos columnas — el enlace y, a su derecha, «Guardar». Sin
       posicionamiento absoluto: el botón no puede tapar el título. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: 20px;
    box-shadow: var(--sombra);
    overflow: hidden;
}
.tarjeta:hover { border-color: var(--linea-2); }
.tarjeta-enlace {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 14px;
    min-height: 112px;
    color: inherit;
    text-decoration: none;
}
/* ── Decisión #43: la fotito al principio ────────────────────────
   Cuando el evento tiene afiche, la tarjeta empieza por él: un CUADRADO de
   96×96 arriba (de los 247 afiches copiados el 2026-10-24, 133 eran apaisados
   y 84 cuadrados: el cuadrado es el recorte que menos daña, y es el formato
   que todas las fuentes ya producen) y, debajo, la hora como talón de la
   entrada, teñida por su categoría —la franja de siempre, sin texto encima de
   la foto—. Así una tarjeta con foto y una sin foto son la misma familia: la
   columna de color es el ancla de las dos. La miniatura es WebP de ~10 KB, con
   carga perezosa y tamaño fijo (sin saltos). Sin afiche, la tarjeta queda
   exactamente como estaba. Elegida por Gerson entre dos prototipos. */
.tarjeta-enlace:has(.tarjeta-mini) {
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    min-height: 140px;
}
.tarjeta-mini {
    grid-column: 1;
    grid-row: 1 / 3;
    display: block;
    width: 96px;
    height: 96px;
    object-fit: cover;
    background: var(--cat-tinte);
}
.tarjeta-enlace:has(.tarjeta-mini) .tarjeta-hora {
    grid-column: 1;
    grid-row: 3;
    justify-content: flex-start;
    padding: 8px 4px 10px 8px;
}
.tarjeta-enlace:has(.tarjeta-mini) .tarjeta-hora time { font-size: 19px; }
.tarjeta-enlace:has(.tarjeta-mini) .hora-hasta { font-size: 19px; word-spacing: 70px; }
.tarjeta-enlace:has(.tarjeta-mini) .tarjeta-banda { grid-column: 2; grid-row: 1; }
.tarjeta-enlace:has(.tarjeta-mini) .tarjeta-cuerpo { grid-column: 2; grid-row: 2 / 4; }
/* Al tocar, la tarjeta responde (como una app): leve y rápido. */
.tarjeta { transition: transform .12s ease, border-color .12s ease; }
.tarjeta:active { transform: scale(.985); }
.tarjeta-hora {
    grid-column: 1;
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 12px 4px 12px 8px;
    text-align: center;
    /* El filete de la categoría va como capa de fondo, sin posicionar nada. */
    background: linear-gradient(var(--cat), var(--cat)) left / 4px 100% no-repeat, var(--cat-tinte);
}
.tarjeta-hora time {
    font-family: var(--titulos);
    font-weight: 700;
    font-size: 21px;
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.hora-fin { font-size: 12px; line-height: 1.2; color: var(--texto); }
.hora-horario { display: inline-block; color: var(--tinta); font-size: 12px; font-weight: 700; line-height: 1.25; }
/* En curso: el verde del logo, en la franja entera. */
.hora-horario.en-curso {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--verde);
    font-family: var(--rotulos);
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}
/* «hasta 21:00»: la palabra arriba, en pequeño, y la hora abajo, en grande.
   El texto va seguido en el marcado; el espacio ancho lo parte en dos líneas
   y ::first-line achica la primera. */
.hora-hasta {
    display: block;
    font-family: var(--titulos);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    word-spacing: 80px;
}
.hora-hasta::first-line { font-family: var(--sistema); font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--texto); }
.hora-horario.en-curso::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--verde); }
.tarjeta-hora:has(.en-curso) { background: linear-gradient(var(--verde), var(--verde)) left / 4px 100% no-repeat, var(--verde-suave); }
/* Promoción: la cifra ocupa el lugar de la hora. */
.promo-cifra { font-family: var(--titulos); font-size: 22px; line-height: 1; letter-spacing: -0.02em; color: var(--cat); }
.promo-hasta { font-weight: 500; color: var(--texto); }
.hora-por-confirmar { display: inline-block; color: var(--ambar); font-size: 12px; font-weight: 700; line-height: 1.25; }
/* La categoría, en su color, arriba del título. */
.tarjeta-banda {
    grid-column: 2;
    grid-row: 1;
    padding-top: 13px;
    color: var(--cat);
    font-family: var(--rotulos);
    font-weight: 700;
    font-size: 12.5px;
    line-height: 1.2;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.tarjeta-cuerpo { grid-column: 2; grid-row: 2; min-width: 0; padding: 4px 0 14px; }
.tarjeta-cuerpo h3,
[data-lista-guardados] h2 { margin: 0 0 6px; font-size: 16.5px; font-weight: 600; line-height: 1.28; }
.tarjeta-meta { margin: 0; color: var(--gris); font-size: 14px; line-height: 1.35; }
.tarjeta-meta::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 4px;
    vertical-align: -2px;
    background: currentColor;
    -webkit-mask: var(--ico-pin) center / contain no-repeat;
    mask: var(--ico-pin) center / contain no-repeat;
}
.tarjeta-precio { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.precio,
.audiencias,
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
}
.precio { color: var(--tinta); background: var(--elevada); }
.audiencias { padding-block: 2px; color: var(--texto); border: 1px solid var(--linea); }
.tarjeta-confianza { margin: 8px 0 0; color: var(--gris); font-size: 12px; }
.badge-gratis { color: var(--verde); background: var(--verde-suave); }
.badge-cancelado { color: var(--rojo); background: var(--rojo-suave); }
.badge-agotado { color: var(--tinta); background: var(--linea); }
.badge-pendiente { color: var(--ambar); background: var(--ambar-suave); }

/* «Guardar» en su propia columna: un círculo con el marcador. */
.guardar-tarjeta {
    align-self: start;
    width: 44px;
    min-height: 44px;
    margin: 6px 6px 0 0;
    justify-content: center;
    color: var(--gris);
    background: var(--blanco) padding-box;
    border: 3px solid transparent;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px var(--linea);
    font-size: 20px;
    cursor: pointer;
}
.guardar-tarjeta[aria-pressed="true"] { color: var(--sobre-acento); background: var(--acento) padding-box; box-shadow: none; }
@supports ((-webkit-mask-image: none) or (mask-image: none)) {
    .guardar-tarjeta [data-icono-estado] {
        display: block;
        width: 18px;
        height: 18px;
        font-size: 0;
        background: currentColor;
        -webkit-mask: var(--ico-marca) center / contain no-repeat;
        mask: var(--ico-marca) center / contain no-repeat;
    }
    .guardar-tarjeta[aria-pressed="true"] [data-icono-estado] { -webkit-mask-image: var(--ico-marca-llena); mask-image: var(--ico-marca-llena); }
}
/* Cancelada: se nota sin bajar el contraste del texto (R18, UXA-02). */
.tarjeta.cancelada { border-style: dashed; }
.tarjeta.cancelada h3,
.tarjeta.cancelada time { text-decoration: line-through; color: var(--gris); }
.tarjeta.cancelada .tarjeta-hora { background: linear-gradient(var(--rojo), var(--rojo)) left / 4px 100% no-repeat, var(--elevada); }
.tarjeta.cancelada .tarjeta-banda { color: var(--gris); }

/* Guardados: la lista que arma el JS (título y «Quitar»). */
[data-lista-guardados] .tarjeta { align-items: center; }
[data-lista-guardados] .tarjeta-enlace { grid-template-columns: minmax(0, 1fr); min-height: 0; }
[data-lista-guardados] .tarjeta-cuerpo { grid-column: 1; grid-row: 1; padding: 16px 0 16px 18px; }
[data-lista-guardados] h2 { margin: 0; }
.quitar-guardado {
    margin: 0 12px;
    padding: 0 14px;
    color: var(--tinta);
    background: var(--blanco);
    border: 1px solid var(--linea-2);
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

/* ── Estado vacío honesto ──────────────────────── */
.estado-vacio {
    margin-top: 20px;
    padding: 28px 20px;
    text-align: center;
    background: var(--blanco);
    border: 1px dashed var(--linea-2);
    border-radius: 20px;
}
.estado-vacio h1, .estado-vacio h2 { margin: 0 0 8px; font-size: 20px; font-weight: 700; }
.estado-vacio p { margin: 12px 0 6px; color: var(--gris); }
.estado-vacio .chips { justify-content: center; flex-wrap: wrap; overflow: visible; }

/* ── Ficha ──────────────────────── */
.ficha-portada {
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    border-radius: 22px;
    margin-top: 4px;
    border: 1px solid var(--linea);
}
/* La cabecera del plan lleva el tinte de su categoría: la tarjeta, crecida. */
.ficha-encabezado {
    margin-top: 10px;
    padding: 22px 20px 20px;
    border-radius: 26px;
    background: var(--cat-tinte);
    background: linear-gradient(var(--cat), var(--cat)) bottom / 100% 4px no-repeat,
        radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--cat) 26%, transparent), transparent 60%),
        var(--cat-tinte);
}
.ficha-categoria { margin: 0 0 8px; color: var(--cat); font-size: 13px; letter-spacing: .1em; }
.ficha-encabezado h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.025em;
}
/* El día en una hoja de calendario y la hora en grande. */
.cuando-grande { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.hoja {
    flex: none;
    width: 62px;
    overflow: hidden;
    border-radius: 14px;
    background: var(--blanco);
    box-shadow: 0 10px 20px -14px rgba(15, 36, 64, .6);
    text-align: center;
}
.hoja span {
    display: block;
    padding: 4px 0 3px;
    color: var(--sobre-acento);
    background: var(--cat);
    font-family: var(--rotulos);
    font-weight: 700;
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.hoja b { display: block; padding: 3px 0 6px; font-family: var(--titulos); font-weight: 700; font-size: 26px; line-height: 1; }
.ficha-hora { display: flex; flex-direction: column; gap: 3px; min-width: 0; margin: 0; }
/* La hora no se parte: .contenido permite cortar en cualquier punto (R18, UXA-09). */
.ficha-hora b { white-space: nowrap; font-family: var(--titulos); font-weight: 700; font-size: 24px; line-height: 1.1; letter-spacing: -0.02em; }
.ficha-hora span { font-size: 14px; line-height: 1.35; color: var(--texto); }
.ficha-hora span::first-letter { text-transform: uppercase; }
.ficha-descripcion { margin: 14px 0 0; color: var(--texto); font-size: 15px; }
.ficha-encabezado .badge { margin: 12px 6px 0 0; }

/* Tres claves de un vistazo: cuánto cuesta, para quién y qué más. */
.claves {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}
.clave {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 13px 6px;
    border: 1px solid var(--linea);
    border-radius: 16px;
    background: var(--blanco);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
}
.clave svg { width: 22px; height: 22px; color: var(--acento); }
.clave-gratis { border-color: transparent; background: var(--verde-suave); color: var(--verde); }
.clave-gratis svg { color: var(--verde); }

/* Los datos esenciales, en una sola tarjeta con un renglón por dato. */
.ficha-esencial {
    margin-top: 14px;
    padding: 2px 18px;
    border: 1px solid var(--linea);
    border-radius: 22px;
    background: var(--blanco);
}
.dato {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    padding: 15px 0;
    border-top: 1px solid var(--linea);
}
.dato:first-child { border-top: 0; }
.dato-icono {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    color: var(--acento);
    background: var(--acento-suave);
}
.dato-icono svg { width: 20px; height: 20px; }
.dato p { margin: 5px 0 0; font-size: 15px; }
.dato-titulo { display: block; }
.dato b { font-weight: 600; }
.fechas { margin: 5px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 15px; }
.fecha-cancelada { text-decoration: line-through; color: var(--gris); }
.fechas li::first-letter { text-transform: uppercase; }
/* La hora baja entera a la línea siguiente antes que partirse a media cifra. */
.fechas b { display: inline-block; }
.fechas .badge { margin-left: 4px; }
.condicion { color: var(--gris); font-size: 13.5px; }
.enlace-mapa {
    gap: 6px;
    margin: 10px 8px 0 0;
    padding: 0 14px;
    color: var(--tinta);
    background: var(--blanco);
    border: 1px solid var(--linea-2);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
/* R036: cada contacto se toca por separado. */
.contacto { display: flex; flex-wrap: wrap; gap: 0 18px; }
.verificado { color: var(--verde); font-weight: 600; }
.verificado::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 5px;
    vertical-align: -2px;
    background: currentColor;
    -webkit-mask: var(--ico-visto) center / contain no-repeat;
    mask: var(--ico-visto) center / contain no-repeat;
}
.nota-cambios { color: var(--gris); font-size: 12.5px; }

.ficha-detalle { margin-top: 26px; }
.ficha-detalle h2 { font-size: 20px; font-weight: 700; line-height: 1.2; margin: 0 0 8px; }
.ficha-detalle p { margin: 0; white-space: pre-line; color: var(--texto); line-height: 1.65; }

/* Acciones al pie, siempre al alcance del pulgar: el CTA jamás queda tapado (R242). */
.ficha-acciones {
    position: sticky;
    bottom: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    margin: 26px -18px 0;
    padding: 12px 18px 14px;
    border-top: 1px solid var(--linea);
    background: var(--barra);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
.boton-principal {
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    text-align: center;
    color: var(--sobre-acento);
    background: var(--grad-boton);
    border: 0;
    border-radius: 16px;
    font-family: var(--titulos);
    font-size: 15.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--sombra-boton);
}
.boton-principal.deshabilitado { background: var(--gris); box-shadow: none; cursor: default; }
.boton-secundario {
    padding: 10px 18px;
    color: var(--tinta);
    background: var(--blanco);
    border: 1px solid var(--linea-2);
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
}
.boton-secundario[aria-pressed="true"] { color: var(--sobre-acento); background: var(--acento); border-color: var(--acento); }
.sin-accion { margin: 0; color: var(--gris); font-size: 14px; }

/* ── Login / pie ──────────────────────── */
.panel-login { max-width: 400px; margin: 24px auto; }
.panel-login h1 { font-size: 28px; font-weight: 800; line-height: 1.1; }
.panel-login form { display: grid; gap: 8px; }
.panel-login label { font-weight: 700; font-size: 14px; }
.panel-login input, .panel-login textarea {
    padding: 11px 14px;
    color: var(--tinta);
    background: var(--blanco);
    border: 1px solid var(--gris);
    border-radius: 12px;
    font-size: 16px;
}
.panel-login button:not([class]) {
    margin-top: 10px;
    padding: 13px;
    color: var(--sobre-acento);
    background: var(--grad-boton);
    border: 0;
    border-radius: 16px;
    font-family: var(--titulos);
    font-size: 15.5px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--sombra-boton);
}
.error-validacion { color: var(--rojo); font-size: 13px; }

.pie {
    width: min(760px, 100%);
    margin-inline: auto;
    padding: 24px 18px 36px;
    color: var(--gris);
    font-size: 13.5px;
    border-top: 1px solid var(--linea);
}
.pie-logo { margin-bottom: 2px; }
.pie-logo img { display: block; width: auto; height: 30px; }
.pie p { margin: 0; }
.pie-nota { padding-bottom: 6px; }
.pie-enlaces { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-bottom: 4px; }
.pie-enlaces a { color: var(--texto); font-weight: 600; text-decoration: none; }
.pie .pie-puerta { margin: 2px 0 6px; color: var(--texto); }
.pie-puerta strong { color: var(--tinta); }
.pie-puerta a { color: var(--acento); font-weight: 700; text-decoration: none; }
.panel-login textarea { font-family: inherit; resize: vertical; }

/* ── Versión y crédito FNMN (pie) + su diálogo ────────────── */
.credito-fnmn { border: none; background: none; padding: 0; font: inherit; color: inherit; cursor: default; }
.dialogo-fnmn {
    max-width: 420px;
    width: calc(100% - 48px);
    border: 1px solid var(--linea);
    border-radius: 16px;
    padding: 28px 24px;
    background: var(--blanco);
    color: var(--tinta);
    box-shadow: 0 12px 40px rgba(15, 36, 64, .25);
    text-align: center;
}
.dialogo-fnmn::backdrop { background: rgba(8, 27, 54, .55); }
.dialogo-fnmn h2 { margin: 0 0 16px; font-size: 1.4rem; }
.dialogo-fnmn blockquote { margin: 0 0 14px; font-style: italic; color: var(--gris); line-height: 1.55; }
.firma-fnmn { margin: 0 0 18px; font-weight: 600; color: var(--acento); }
.cerrar-fnmn { border: 1px solid var(--linea-2); border-radius: 999px; background: var(--blanco); color: var(--tinta); padding: 8px 22px; font: inherit; font-weight: 700; cursor: pointer; }
.cerrar-fnmn:hover { border-color: var(--acento); color: var(--acento); }

/* ── Páginas legales (R062/R063) ──────────────────────── */
.legal { width: min(640px, 100%); margin-inline: auto; }
.legal h1 { font-size: 28px; font-weight: 800; margin: 8px 0 18px; }
.legal h2 { font-size: 17px; font-weight: 700; margin: 26px 0 8px; }
.legal p, .legal li { line-height: 1.65; }
.legal ul { padding-left: 20px; }
.legal a { color: var(--acento); }
.legal-resumen { font-size: 16px; padding: 12px 14px; border-radius: 12px; background: var(--verde-suave); color: var(--verde); }
.legal-pendiente { padding: 12px 14px; border-radius: 12px; background: var(--ambar-suave); color: var(--ambar); }
.legal-datos { list-style: none; padding: 0; }
.legal-datos li { margin: 4px 0; }
.legal-vecinas { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--linea); color: var(--gris); }

/* ── Área táctil mínima (R265) ────────────────────────
   44×44 px es el mínimo con el que un dedo acierta sin ampliar (WCAG 2.2,
   2.5.8). Va al final a propósito, para ganar sobre los paddings de arriba. */
.chip,
.chip-cerca,
.boton-mapa,
.boton-principal,
.boton-secundario,
.quitar-guardado,
.cerrar-fnmn,
.saltar-al-contenido,
.panel-login button,
.panel-login input,
.boton-peligro,
.casilla,
.enlace-emisor,
.enlace-accion,
.enlace-mapa,
.enlace-guardados,
.marca,
.guardar-tarjeta,
.pie-enlaces a,
.pie-logo,
.proximo {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
/* «Empieza pronto» conserva su rejilla; los íconos de la cabecera apilan su
   globo; el logo del pie es un enlace de bloque. */
.proximo { display: grid; }
.enlace-guardados { display: inline-grid; place-items: center; }
.pie-logo { display: inline-flex; }
.legal p a, .legal li a { min-height: 0; display: inline; }
.credito-fnmn { min-height: 0; display: inline; }
.pie-enlaces, .paginacion { gap: 8px; }

/* La barra de la ficha: Guardar a la izquierda, la acción al centro y
   Compartir a la derecha, con botones altos para el pulgar. */
.ficha-acciones .boton-principal { grid-column: 2; grid-row: 1; min-height: 52px; }
.ficha-acciones .boton-secundario {
    grid-row: 1;
    gap: 8px;
    min-height: 52px;
    padding: 0 16px;
    border-radius: 16px;
    font-family: var(--titulos);
    font-size: 15px;
}
.ficha-acciones [data-guardar] { grid-column: 1; }
.ficha-acciones [data-compartir] { grid-column: 3; }
.ficha-acciones .sin-accion { grid-column: 1 / -1; grid-row: 1; }
.ficha-acciones:has(.sin-accion) .boton-secundario { grid-row: 2; }
/* Sin acción en línea, «Guardar» toma su lugar; sin JavaScript (Guardar y
   Compartir no existen), la acción ocupa la barra entera. */
.ficha-acciones:not(:has(.boton-principal)) [data-guardar] { grid-column: 1 / 3; }
.ficha-acciones:has([data-guardar][hidden]) .boton-principal { grid-column: 1 / 3; }
.ficha-acciones:has([data-guardar][hidden]):has([data-compartir][hidden]) .boton-principal { grid-column: 1 / -1; }
.contenido:has(> .ficha > .ficha-acciones) { padding-bottom: 0; }
@supports ((-webkit-mask-image: none) or (mask-image: none)) {
    .ficha-acciones .boton-secundario::before {
        content: "";
        flex: none;
        width: 20px;
        height: 20px;
        background: currentColor;
        -webkit-mask: var(--ico-marca) center / contain no-repeat;
        mask: var(--ico-marca) center / contain no-repeat;
    }
    .ficha-acciones [data-guardar][aria-pressed="true"]::before { -webkit-mask-image: var(--ico-marca-llena); mask-image: var(--ico-marca-llena); }
    /* «Cerca» lleva el pin de trazo de la casa en vez del emoji. */
    .chips-momento .chip-cerca span[aria-hidden] {
        width: 17px;
        height: 17px;
        font-size: 0;
        background: currentColor;
        -webkit-mask: var(--ico-pin) center / contain no-repeat;
        mask: var(--ico-pin) center / contain no-repeat;
    }
    /* La acción manda: toma cuatro partes de la barra y «Guardar», una. En
       un teléfono a «Guardar» solo le cabe el ícono: su nombre baja a una
       segunda línea que queda fuera del botón (sigue ahí para lectores); con
       sitio, se lee entero. */
    .ficha-acciones { grid-template-columns: minmax(52px, 1fr) minmax(min-content, 4fr) 52px; }
    .ficha-acciones [data-guardar] {
        flex-wrap: wrap;
        align-content: flex-start;
        justify-content: center;
        height: 52px;
        padding: 0 12px;
        line-height: 52px;
        overflow: hidden;
    }
    .ficha-acciones [data-guardar]::before { height: 52px; }
    /* Compartir es un ícono; su nombre sigue ahí para lectores. Cuando el JS
       confirma «Enlace copiado», el texto vuelve a verse. */
    .ficha-acciones [data-compartir] { width: 52px; padding: 0; justify-content: center; font-size: 0; }
    .ficha-acciones [data-compartir]::before { -webkit-mask-image: var(--ico-compartir); mask-image: var(--ico-compartir); }
    .ficha-acciones [data-compartir]:has(span) { width: auto; padding: 0 14px; font-size: 14px; }
}

/* ── Promociones y beneficios (F7) ──────────────────────── */
.tarjeta-emisor { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.badge-emisor { padding-block: 2px; color: var(--texto); background: none; border: 1px dashed var(--linea-2); }
/* El rótulo de patrocinio se lee como advertencia, no como destacado. */
.badge-patrocinado { color: var(--tinta); background: var(--linea); }
.condiciones-promo { list-style: none; padding: 0; margin: 10px 0 0; }
.condiciones-promo li { display: flex; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--linea); line-height: 1.45; }
.condiciones-promo li:last-child { border-bottom: 0; }
.condicion-tipo { flex: 0 0 96px; font-family: var(--rotulos); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.condicion-valor { font-family: var(--titulos); font-weight: 700; }
.enlace-emisor { color: var(--acento); font-weight: 700; }

/* ── Cuenta (F8) ──────────────────────── */
.panel-cuenta h2 { margin: 26px 0 6px; font-size: 17px; font-weight: 700; }
.nota-cuenta { color: var(--gris); font-size: 14.5px; line-height: 1.5; }
.panel-cuenta form.en-linea { display: inline-block; margin: 4px 8px 4px 0; }
.casilla { display: flex; align-items: flex-start; gap: 10px; font-weight: 400 !important; font-size: 14.5px; line-height: 1.4; }
.casilla input { width: 22px; height: 22px; flex: 0 0 22px; }
.borrar-cuenta { display: grid; gap: 8px; margin-top: 8px; }
.boton-peligro {
    justify-content: center;
    padding: 12px 16px;
    color: #ffffff;
    background: var(--rojo);
    border: 0;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.aviso-pruebas {
    padding: 10px 14px;
    color: var(--ambar);
    background: var(--ambar-suave);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
}
.lista-simple { padding-left: 18px; line-height: 1.8; }
.oferta-sumar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin: 12px 0; padding: 12px 14px; border: 1px dashed var(--linea-2); border-radius: 14px; background: var(--blanco);
}
.oferta-sumar[hidden] { display: none; }
.validation-summary-valid { display: none; }

/* ── Pantallas anchas: el breakpoint reacomoda, no oculta (R256) ── */
@media (min-width: 700px) {
    .lista-eventos { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
    .cabecera-fila { padding: 10px 24px 10px 32px; }
    .marca-logo img { height: 52px; }
    .contenido { padding: 22px 32px 80px; }
    .pie { padding: 28px 32px 44px; }
    .heroe h1 { font-size: 58px; }
    .encabezado-momento h1 { font-size: 44px; }
    .heroe-promesa, .contador { font-size: 17px; }
    .chips-momento { max-width: 560px; }
    .contenido:has(> .filtros) .lista-eventos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .grupo-dia { margin-top: 24px; }
    /* Lo que empieza pronto sube al lado del héroe. */
    .contenido:has(> .empieza-pronto) { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); column-gap: 56px; align-items: end; }
    .contenido:has(> .empieza-pronto) > * { grid-column: 1 / -1; }
    .contenido:has(> .empieza-pronto) > .heroe { grid-column: 1; grid-row: 1; }
    .contenido:has(> .empieza-pronto) > .empieza-pronto { grid-column: 2; grid-row: 1; margin-top: 0; }
    .proximo { grid-template-columns: minmax(0, 1fr) 92px; padding: 26px 26px 29px; }
    .proximo h3 { font-size: 22px; }
    .anillo, .anillo svg { width: 92px; height: 92px; }
    .anillo-texto b { font-size: 28px; }
    .ficha-encabezado h1 { font-size: 36px; }
}