/* =====================================================================
   BASE — Discotecas España
   Estética nocturna y minimalista. Se enlaza con etiquetaCss('css/base.css').
   Los temas de temporada (css/temas/*.css) solo sobrescriben los tokens
   de :root; no redefinen componentes.
   ===================================================================== */

/* ----- Tokens ----- */
:root {
    color-scheme: dark;

    --fondo: #09090d;
    --fondo-elevado: #101016;
    --superficie: #15151d;
    --borde: #23232d;
    --borde-fuerte: #363641;

    --texto: #ededf2;
    --texto-suave: #a1a1ae;
    --texto-tenue: #868693;

    --acento: #a78bfa;
    /* La luna de la marca (marcaSvg(), img/favicon.svg): degradado y estrella. */
    --marca-claro: #d8ccff;
    --marca-oscuro: #8b5cf6;
    --marca-estrella: #ede9fe;
    --exito: #4ade80;
    --error: #f87171;
    --atencion: #fbbf24; /* avisos que no son un error: locales cerrados */

    --fuente: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --radio: 14px;
    --radio-pequeno: 10px;
    --ancho: 1120px;
    --margen: 16px;
    --transicion: 160ms ease;
}

@media (min-width: 720px) {
    :root { --margen: 24px; }
}

/* ----- Reset mínimo ----- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
/* Al bajar a un ancla (#entradas, #agenda, #acerca-de…) o con scrollIntoView(),
   lo de arriba no queda tapado por la cabecera fija (65 px). El panel no
   tiene .cabecera: sus anclas llevan su propio scroll-margin (panel.css). */
html:has(.cabecera) { scroll-padding-top: 88px; }

/* hidden oculta siempre, aunque la clase dé display (.boton es inline-flex):
   los botones que js/ muestra solo si el navegador puede (Compartir...). */
[hidden] { display: none !important; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--fondo);
    /* Resplandor tenue arriba con el color de acento: lo que más cambia a la vista con cada tema. */
    background-image: radial-gradient(ellipse 900px 420px at 50% -140px, color-mix(in srgb, var(--acento) 14%, transparent), transparent 70%);
    background-repeat: no-repeat;
    color: var(--texto);
    font: 400 1rem/1.6 var(--fuente);
    -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 { margin: 0 0 .5em; line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; }
h1 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem); }
h2 { font-size: 1.25rem; }
p { margin: 0 0 1rem; }

a {
    color: inherit;
    text-decoration-color: var(--borde-fuerte);
    text-underline-offset: 3px;
    transition: color var(--transicion), text-decoration-color var(--transicion);
}
a:hover { color: var(--acento); text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--acento) 35%, transparent); }

/* ----- Utilidades ----- */
.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }
.estrecho { max-width: 400px; margin-inline: auto; }
.texto-suave { color: var(--texto-suave); }
.sin-salto { white-space: nowrap; }
.antetitulo {
    margin-bottom: 12px;
    color: var(--acento);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.pila > * + * { margin-top: 12px; }
.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.lista-simple { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }

/* Etiquetas en fila: estilos musicales, servicios... */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips li {
    padding: 4px 12px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 999px;
    color: var(--texto-suave);
    font-size: .8125rem;
}

/* Bloque con borde para información agrupada. */
.tarjeta {
    padding: 20px;
    background: var(--fondo-elevado);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
}
.tarjeta h2 {
    margin-bottom: 14px;
    color: var(--texto-tenue);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.tarjeta p:last-child { margin-bottom: 0; }

/* Lista etiqueta · valor (datos de la ficha, conexión en el panel). */
.datos { display: grid; gap: 10px; margin: 0; }
.datos div { display: flex; justify-content: space-between; gap: 16px; }
.datos dt { color: var(--texto-suave); }
.datos dd { margin: 0; text-align: right; }
.enlace-volver { display: inline-block; margin-top: 20px; color: var(--texto-suave); font-size: .875rem; text-decoration: none; }

.saltar {
    position: absolute;
    top: -100px;
    left: var(--margen);
    z-index: 100;
    padding: 8px 14px;
    background: var(--texto);
    color: var(--fondo);
    border-radius: var(--radio-pequeno);
}
.saltar:focus { top: 8px; }

/* ----- Cabecera ----- */
.cabecera {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--fondo) 82%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--borde);
    view-transition-name: cabecera; /* fija al pasar de una página a otra */
}
/* En el móvil, sin desenfoque: volver a desenfocar lo de detrás en cada
   paso del scroll da tirones en los Android modestos. */
@media (max-width: 899px) {
    .cabecera {
        background: color-mix(in srgb, var(--fondo) 96%, transparent);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}
.cabecera__fila {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
}

.marca {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
}
.marca svg { width: 24px; height: 24px; flex: none; }
.marca-luna__claro { stop-color: var(--marca-claro); }
.marca-luna__oscuro { stop-color: var(--marca-oscuro); }
.marca-luna__estrella { fill: var(--marca-estrella); }
.marca:hover { color: var(--texto); }
.marca__tenue { color: var(--texto-tenue); font-weight: 400; }

.menu-boton {
    padding: 7px 14px;
    background: transparent;
    border: 1px solid var(--borde-fuerte);
    border-radius: 999px;
    color: var(--texto);
    font: inherit;
    font-size: .875rem;
    cursor: pointer;
}

/* Móvil: el menú se despliega bajo la cabecera con el botón (js/menu.js). */
.menu {
    display: none;
    position: absolute;
    top: 100%;
    left: calc(var(--margen) * -1);
    right: calc(var(--margen) * -1);
    padding: 8px var(--margen) 20px;
    background: var(--fondo);
    border-bottom: 1px solid var(--borde);
    /* Con la cabecera fija, lo que pasara del borde de abajo no se alcanzaría
       nunca (móvil en horizontal, letra grande): el menú hace scroll propio. */
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.menu--abierto { display: block; }
.menu ul { margin: 0; padding: 0; list-style: none; }
.menu a {
    display: block;
    padding: 10px 0;
    color: var(--texto-suave);
    font-size: .9375rem;
    text-decoration: none;
}
.menu a:hover,
.menu a[aria-current="page"] { color: var(--texto); }
.menu__secundario { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--borde); }

/* Enlace al mapa (site.php 'clase' => 'menu__mapa'): un pin delante y, en
   escritorio, forma de botón. */
.menu a.menu__mapa { display: flex; align-items: center; gap: 7px; }
.menu a.menu__mapa::before {
    content: "";
    flex: none;
    width: 15px;
    height: 15px;
    background: var(--acento);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 22s7-6.2 7-12a7 7 0 1 0-14 0c0 5.8 7 12 7 12zm0-9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 22s7-6.2 7-12a7 7 0 1 0-14 0c0 5.8 7 12 7 12zm0-9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Enlaces solo con icono (site.php 'icono' => 'ruleta'): el dibujo es un SVG en
   línea (iconoMenu()) pintado con currentColor = --acento, así que los temas de
   temporada lo tiñen. El texto va dentro, en .visualmente-oculto. */
.menu a.menu__icono { display: flex; align-items: center; }
.icono-ruleta {
    flex: none;
    width: 26px;
    height: 26px;
    color: var(--acento);
    transition: filter var(--transicion);
}
/* La bola, del mismo color, con un borde del fondo para no perderse sobre las casillas al girar la rueda. */
.icono-ruleta__bola { stroke: var(--fondo); stroke-width: 1.1; }
.icono-ruleta__rueda { transform-origin: 50% 50%; }
/* Pasar el ratón o estar en la página: un brillo del acento (no cambia de color). */
.menu a.menu__icono:hover .icono-ruleta,
.menu a.menu__icono[aria-current="page"] .icono-ruleta { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--acento) 65%, transparent)); }
@media (prefers-reduced-motion: no-preference) {
    .menu a.menu__icono:hover .icono-ruleta__rueda { animation: icono-ruleta-giro 2.4s linear infinite; }
}
@keyframes icono-ruleta-giro { to { transform: rotate(360deg); } }
/* «Tarjetas» ('icono' => 'tarjeta'): igual que la ruleta, pero más ancha que alta, y al pasar el ratón da una vuelta. */
.icono-tarjeta {
    flex: none;
    width: 29px;
    height: 19px;
    color: var(--acento);
    transition: filter var(--transicion);
}
.menu a.menu__icono:hover .icono-tarjeta,
.menu a.menu__icono[aria-current="page"] .icono-tarjeta { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--acento) 65%, transparent)); }
@media (prefers-reduced-motion: no-preference) {
    .menu a.menu__icono:hover .icono-tarjeta { animation: icono-tarjeta-vuelta .9s cubic-bezier(.2, .75, .15, 1); }
}
@keyframes icono-tarjeta-vuelta {
    from { transform: perspective(120px) rotateY(0); }
    to { transform: perspective(120px) rotateY(360deg); }
}

/* Selector de idioma (enlaceCambioIdioma(), plantilla.php) y botón del menú, a
   la derecha. En escritorio el menú va pegado a ellos (margin-left: auto). */
.cabecera__acciones { display: flex; align-items: center; gap: 10px; }
.idioma-cambio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 6px 10px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 999px;
    color: var(--texto-suave);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-decoration: none;
}
.idioma-cambio:hover { color: var(--texto); border-color: var(--acento); }

@media (min-width: 900px) {
    .menu-boton { display: none; }
    .menu {
        display: flex;
        position: static;
        align-items: center;
        gap: 22px;
        margin-left: auto;
        padding: 0;
        background: none;
        border: 0;
        max-height: none;
        overflow: visible;
    }
    .menu ul { display: flex; align-items: center; gap: 22px; }
    .menu a { padding: 6px 0; font-size: .875rem; }
    .menu__secundario { margin: 0; padding: 0 0 0 22px; border-top: 0; border-left: 1px solid var(--borde); }
    .menu a.menu__mapa {
        padding: 5px 13px 5px 10px;
        border: 1px solid color-mix(in srgb, var(--acento) 45%, var(--borde-fuerte));
        border-radius: 999px;
        color: var(--texto);
        transition: background var(--transicion), border-color var(--transicion);
    }
    .menu a.menu__mapa:hover,
    .menu a.menu__mapa[aria-current="page"] { background: color-mix(in srgb, var(--acento) 14%, transparent); border-color: var(--acento); }
}

/* Botón «Sonido» (plantilla.php, js/sonido.js): solo en ordenador, pegado al
   borde derecho de la pantalla, fuera de la columna de la cabecera. La fila
   del menú va llena (a 1280 px, 40 px más partían la marca en dos líneas; a
   1000 px se salía por la derecha), así que sale solo donde cabe fuera: desde
   1250 px con las barras, desde 1366 px (los portátiles más comunes) también
   con su texto, a unos 12 px de «EN» en el peor caso. Encendido, las
   barras toman el acento y bailan (data-sonando: ya suena). */
.sonido-boton { display: none; }
@media (min-width: 1250px) {
    /* Se coloca respecto a toda la cabecera (sticky), no a la columna. */
    .cabecera__fila { position: static; }
    .sonido-boton {
        position: absolute;
        top: 50%;
        right: var(--margen);
        transform: translateY(-50%);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        min-width: 40px;
        min-height: 32px;
        padding: 6px 12px;
        background: color-mix(in srgb, var(--fondo) 55%, transparent);
        border: 1px solid var(--borde-fuerte);
        border-radius: 999px;
        color: var(--texto-suave);
        font: inherit;
        font-size: .75rem;
        font-weight: 600;
        line-height: 1;
        letter-spacing: .12em;
        text-transform: uppercase;
        cursor: pointer;
        transition: color var(--transicion), border-color var(--transicion), box-shadow var(--transicion);
    }
    .sonido-boton:hover { color: var(--texto); border-color: var(--acento); }
    .sonido-boton[aria-pressed="true"] {
        color: var(--texto);
        border-color: color-mix(in srgb, var(--acento) 55%, var(--borde-fuerte));
    }
    .sonido-boton[data-sonando] { box-shadow: 0 0 14px -4px color-mix(in srgb, var(--acento) 70%, transparent); }
    .sonido-boton__barras {
        display: inline-flex;
        align-items: flex-end;
        gap: 2px;
        height: 12px;
    }
    .sonido-boton__barras span {
        width: 2px;
        height: 100%;
        background: currentColor;
        border-radius: 1px;
        transform: scaleY(var(--alto));
        transform-origin: 50% 100%;
    }
    .sonido-boton__barras span:nth-child(1) { --alto: .4; }
    .sonido-boton__barras span:nth-child(2) { --alto: .75; }
    .sonido-boton__barras span:nth-child(3) { --alto: 1; }
    .sonido-boton__barras span:nth-child(4) { --alto: .6; }
    .sonido-boton[data-sonando] .sonido-boton__barras { color: var(--acento); }
    /* Solo se anima transform (compuesto, sin repintar); con movimiento reducido, quietas. */
    @media (prefers-reduced-motion: no-preference) {
        .sonido-boton[data-sonando] .sonido-boton__barras span { animation: sonido-barra .49s ease-in-out infinite alternate; }
        .sonido-boton[data-sonando] .sonido-boton__barras span:nth-child(2) { animation-duration: .37s; animation-delay: -.2s; }
        .sonido-boton[data-sonando] .sonido-boton__barras span:nth-child(3) { animation-duration: .61s; animation-delay: -.45s; }
        .sonido-boton[data-sonando] .sonido-boton__barras span:nth-child(4) { animation-duration: .43s; animation-delay: -.1s; }
    }
}
@media (min-width: 1250px) and (max-width: 1365px) {
    .sonido-boton { padding-inline: 0; }
    .sonido-boton__texto {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}
@keyframes sonido-barra {
    from { transform: scaleY(.2); }
    to { transform: scaleY(1); }
}

/* ----- Contenido ----- */
.principal { flex: 1; padding-block: 56px 80px; }

.portada { max-width: 720px; }
.portada p { max-width: 56ch; font-size: 1.125rem; }

/* ----- Botones ----- */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 18px;
    background: var(--texto);
    border: 1px solid var(--texto);
    border-radius: var(--radio-pequeno);
    color: var(--fondo);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}
.boton:hover { background: var(--acento); border-color: var(--acento); color: var(--fondo); }
.boton--secundario { background: transparent; border-color: var(--borde-fuerte); color: var(--texto); }
.boton--secundario:hover { background: var(--superficie); border-color: var(--texto-tenue); color: var(--texto); }
.boton--auto { width: auto; }
/* Con el color de la marca (sigue al tema de temporada, como la luna del logo): «Cerrar sesión» del perfil. */
.boton--marca { background: var(--acento); border-color: var(--acento); color: var(--fondo); }
.boton--marca:hover { background: color-mix(in srgb, var(--acento) 80%, #fff); border-color: color-mix(in srgb, var(--acento) 80%, #fff); color: var(--fondo); }

.boton-texto {
    padding: 0;
    background: none;
    border: 0;
    color: var(--texto-suave);
    font: inherit;
    cursor: pointer;
}
.boton-texto:hover { color: var(--texto); }
/* Primer clic en un botón con data-confirmar (js/confirmar.js): pide el segundo. */
.boton-texto.confirmando { color: var(--error); font-weight: 600; }

form { margin: 0; }

/* ----- Formularios ----- */
.campo { margin-bottom: 16px; }
.campo label { display: block; margin-bottom: 6px; color: var(--texto-suave); font-size: .875rem; }
.campo input,
.campo select,
.campo textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    color: var(--texto);
    font: inherit;
    transition: border-color var(--transicion);
}
.campo textarea { resize: vertical; min-height: 96px; }
.campo input[type="file"] { padding: 10px; color: var(--texto-suave); }
/* Nota bajo un campo (registro y perfil: la fecha de nacimiento). */
.campo > small { display: block; margin-top: 6px; color: var(--texto-tenue); font-size: .8125rem; line-height: 1.5; }
.campo input:hover,
.campo select:hover,
.campo textarea:hover { border-color: var(--borde-fuerte); }
.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; border-color: transparent; }

.casilla { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; cursor: pointer; }
.casilla input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--acento); } /* flex: none: con un texto largo, se encogía */
/* Casilla con una nota debajo del texto (login: «Mantener la sesión iniciada»). */
.casilla--con-nota { align-items: flex-start; margin-bottom: 16px; }
.casilla--con-nota input { flex: none; margin-top: 2px; }
.casilla--con-nota small { display: block; margin-top: 2px; color: var(--texto-tenue); font-size: .8125rem; line-height: 1.5; }

/* Formularios largos del panel. */
.formulario-ancho { max-width: 760px; margin-inline: auto; }
/* min-width: 0: un fieldset no encoge por debajo de su contenido y, con un
   campo largo, ensanchaba la página en el móvil. */
.grupo-campos { min-width: 0; margin: 0 0 28px; padding: 0; border: 0; }
.grupo-campos legend { margin-bottom: 16px; padding: 0; font-size: 1.125rem; font-weight: 600; }
.subtitulo-campos { margin: 8px 0 10px; color: var(--texto-suave); font-size: .875rem; overflow-wrap: anywhere; } /* «Original: https://…» largos */
.rejilla-campos { display: grid; gap: 0 16px; }
.rejilla-casillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 16px; margin-bottom: 12px; }
@media (min-width: 720px) {
    .rejilla-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.separador {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--texto-tenue);
    font-size: .8125rem;
}
.separador::before,
.separador::after { content: ""; flex: 1; height: 1px; background: var(--borde); }

/* Opciones en tarjeta (radio): p. ej. el selector de temas del panel. */
.opciones { display: grid; gap: 10px; margin: 0 0 20px; padding: 0; border: 0; }
.opcion {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    cursor: pointer;
    transition: border-color var(--transicion);
}
.opcion:hover { border-color: var(--borde-fuerte); color: inherit; }
a.opcion { text-decoration: none; }
.opcion:has(input:checked) { border-color: var(--acento); }
.opcion input { margin: 5px 0 0; accent-color: var(--acento); }
.opcion__titulo { display: block; font-weight: 600; }
.opcion__detalle { display: block; color: var(--texto-suave); font-size: .875rem; }

.etiqueta {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 999px;
    color: var(--texto-suave);
    font-size: .75rem;
    font-weight: 400;
    vertical-align: 2px;
}
.etiqueta--exito {
    color: var(--exito);
    border-color: color-mix(in srgb, var(--exito) 35%, transparent);
    background: color-mix(in srgb, var(--exito) 10%, transparent);
}
/* Local cerrado (negocios.cierre): en la lista del panel. */
.etiqueta--cierre {
    color: var(--atencion);
    border-color: color-mix(in srgb, var(--atencion) 40%, transparent);
    background: color-mix(in srgb, var(--atencion) 10%, transparent);
}

/* ----- Avisos ----- */
.aviso {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid;
    border-radius: var(--radio-pequeno);
    font-size: .9rem;
}
.aviso--error {
    color: var(--error);
    border-color: color-mix(in srgb, var(--error) 35%, transparent);
    background: color-mix(in srgb, var(--error) 8%, transparent);
}
.aviso--exito {
    color: var(--exito);
    border-color: color-mix(in srgb, var(--exito) 35%, transparent);
    background: color-mix(in srgb, var(--exito) 8%, transparent);
}

/* ----- Promoción "+300 puntos" (etiquetaPromocion(), includes/puntos_compras.php) -----
   Dorada en todos los temas: tiene que destacar sobre cualquier foto o flyer.
   El brillo solo mueve un transform (barato en móviles modestos). */
.promo-puntos {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    overflow: hidden;
    padding: 5px 11px 5px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #fff1a8 0%, #fbbf24 45%, #f59e0b 100%);
    box-shadow: 0 0 0 1px rgb(255 255 255 / .35) inset, 0 6px 18px -6px rgb(245 158 11 / .7);
    color: #241503;
    line-height: 1;
    white-space: nowrap;
}
.promo-puntos::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .65) 50%, transparent 65%);
    transform: translateX(-110%);
    animation: promo-brillo 4.5s ease-in-out 1s infinite;
    pointer-events: none;
}
@keyframes promo-brillo {
    0%, 70% { transform: translateX(-110%); }
    100% { transform: translateX(110%); }
}
.promo-puntos__cifra { font-size: 1rem; font-weight: 800; letter-spacing: -0.02em; }
.promo-puntos__unidad { font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
/* Encima de la foto de una tarjeta de local, o abajo del flyer de una fiesta (arriba van la fecha y "Hoy"). */
.promo-puntos--tarjeta { position: absolute; top: 10px; left: 10px; z-index: 1; }
.promo-puntos--evento { position: absolute; bottom: 10px; left: 10px; z-index: 1; }
/* El aviso de la cabecera de la ficha y de la fiesta (avisoPromocion(), includes/ficha.php):
   un <details> con el sello, la fecha de fin y el icono a la vista; al abrirlo, las condiciones. */
.promo-aviso { margin: 16px 0 0; color: var(--texto-suave); font-size: .9375rem; }
.promo-aviso summary {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
    cursor: pointer;
}
.promo-aviso summary::-webkit-details-marker { display: none; }
.promo-aviso__icono { display: inline-grid; place-items: center; color: var(--texto-tenue); transition: color var(--transicion); }
.promo-aviso summary:hover .promo-aviso__icono,
.promo-aviso[open] .promo-aviso__icono { color: #fbbf24; } /* el dorado del sello */
.promo-aviso__texto { max-width: 60ch; margin: 8px 0 0; }

/* ----- Pie ----- */
/* content-visibility: el navegador no lo pinta hasta que se acerca al scroll. */
.pie {
    content-visibility: auto;
    contain-intrinsic-size: auto 520px;
    padding-block: 48px 32px;
    border-top: 1px solid var(--borde);
    color: var(--texto-suave);
    font-size: .875rem;
}
.pie__rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
.pie__intro { grid-column: 1 / -1; max-width: 380px; }
.pie__marca { margin-bottom: 8px; color: var(--texto); font-weight: 600; }
.pie h2 {
    margin-bottom: 12px;
    color: var(--texto-tenue);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.pie ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pie a { text-decoration: none; }
.pie__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--borde);
    color: var(--texto-tenue);
    font-size: .8125rem;
}
.pie__legal p { margin: 0; }
.pie__redes { display: flex; gap: 16px; }
/* Aviso legal, privacidad, cookies y términos: discretos pero en todas las
   páginas (site.php 'footer.enlaces_legales'). */
.pie .pie__avisos { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .75rem; }
.pie__avisos a { color: var(--texto-tenue); }
.pie__avisos a:hover { color: var(--texto-suave); }

@media (min-width: 900px) {
    .pie__rejilla { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); }
    .pie__intro { grid-column: auto; }
}

/* ----- Maquetación de páginas interiores ----- */
.texto-tenue { color: var(--texto-tenue); }
.cabecera-seccion {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px 24px;
    margin-bottom: 20px;
}
.cabecera-seccion h1,
.cabecera-seccion h2 { margin: 0; }
.cabecera-seccion a:not(.boton) { color: var(--texto-suave); font-size: .875rem; text-decoration: none; }
.fila-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.bloque { margin-top: 40px; }
.enlaces-cuenta { margin-top: 24px; font-size: .875rem; line-height: 2; }
/* Bajo "Continuar con Google": crear la cuenta así también acepta los términos (aceptacionCuenta()). */
.nota-cuenta { margin: 10px 0 0; color: var(--texto-tenue); font-size: .8125rem; line-height: 1.5; }
.rejilla-paneles { display: grid; gap: 16px; align-items: start; }
@media (min-width: 900px) {
    .rejilla-paneles { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}
.rejilla-secciones { display: grid; gap: 10px; margin-top: 24px; }
@media (min-width: 720px) {
    .rejilla-secciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Filtros de listados (buscador, panel). */
.filtros {
    display: grid;
    gap: 0 12px;
    align-items: end;
    margin: 8px 0 20px;
}
.filtros .boton { margin-bottom: 16px; }
@media (min-width: 720px) {
    .filtros { grid-template-columns: minmax(0, 2fr) repeat(auto-fit, minmax(150px, 1fr)); }
}

/* ----- Tablas ----- */
/* position: relative: el «Acciones» visualmente-oculto (position: absolute) de las
   cabeceras se recorta aquí; sin ella, ensanchaba toda la página en el móvil. */
.tabla-envoltorio { position: relative; overflow-x: auto; margin-bottom: 16px; border: 1px solid var(--borde); border-radius: var(--radio); }
.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla th,
.tabla td { padding: 12px 14px; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }
.tabla thead th { color: var(--texto-tenue); font-size: .75rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.tabla tbody tr:last-child > * { border-bottom: 0; }
.tabla a { text-decoration: none; }
.tabla__acciones { display: flex; flex-wrap: wrap; gap: 6px 14px; white-space: nowrap; }
.tabla__acciones a,
.tabla__acciones .boton-texto { color: var(--texto-suave); font-size: .875rem; }

/* ----- Cifras y listas de movimientos (perfil, Mi página de RRPP, panel) -----
   Lo que es solo del perfil va en css/perfil.css, que carga solo perfil.php. */
.cifra { margin-bottom: 16px; font-size: 2.5rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }

.lista-movimientos,
.lista-suscriptores { margin: 20px 0 0; padding: 0; list-style: none; }
.lista-movimientos li,
.lista-suscriptores li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-top: 1px solid var(--borde);
    font-size: .9rem;
}
.lista-suscriptores { max-height: 480px; overflow-y: auto; }

/* Fotos existentes en el formulario de edición de negocios. */
.fotos-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 16px; }
.fotos-panel__foto { display: grid; gap: 6px; font-size: .8125rem; }
.fotos-panel__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radio-pequeno); background: var(--superficie); }
.fotos-panel__foto .casilla { margin: 0; }

/* Enlaces dentro de chips (ciudades destacadas). */
.chips a { color: inherit; text-decoration: none; }
.chips li:has(a):hover { border-color: var(--acento); color: var(--texto); }
.chips--grandes li { padding: 8px 16px; font-size: .9375rem; }

/* ----- Newsletter (pie y newsletter.php) ----- */
.form-newsletter { margin-top: 12px; }
.form-newsletter__fila { display: flex; gap: 8px; }
.form-newsletter input[type="email"] {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    color: var(--texto);
    font: inherit;
}
/* Con sesión, el email es el de la cuenta y no se puede cambiar (formularioNewsletter()). */
.form-newsletter input[readonly] { color: var(--texto-suave); cursor: default; }
.form-newsletter .boton { padding: 10px 14px; font-size: .875rem; }
.form-newsletter__nota { margin: 10px 0 0; color: var(--texto-suave); font-size: .8125rem; }
.form-newsletter__estado { color: var(--texto-suave); font-size: .875rem; }
.form-newsletter__estado strong { color: var(--texto); font-weight: 600; }
.pie__intro h2 { margin-top: 24px; }

/* La pregunta tras ganar puntos (preguntaNewsletter(), js/pregunta-newsletter.js): en
   su sitio en compra.php; en los juegos, flotando abajo, sobre las partículas del
   tema (40) y bajo el menú y el aviso de cookies. */
.pregunta-newsletter {
    position: relative;
    margin-block: 20px;
    padding: 18px 20px;
    background: var(--superficie);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio);
}
.pregunta-newsletter__titulo { margin: 0 0 4px; color: var(--texto); font-weight: 600; }
.pregunta-newsletter__nota { margin: 0; color: var(--texto-suave); font-size: .875rem; }
.pregunta-newsletter__mensaje { margin: 12px 0 0; }
.pregunta-newsletter--flotante {
    position: fixed;
    z-index: 45;
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: 440px;
    margin: 0 auto;
    padding-right: 48px;
    box-shadow: 0 12px 32px rgb(0 0 0 / .45);
}
.pregunta-newsletter__cerrar {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 50%;
    color: var(--texto-suave);
    font-size: 1.375rem;
    line-height: 1;
    cursor: pointer;
}
.pregunta-newsletter__cerrar:hover { color: var(--texto); }
.pregunta-newsletter__cerrar:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ----- Partículas de los temas de temporada (js/particulas.js) ----- */
.particulas {
    position: fixed;
    inset: 0;
    z-index: 40;
    overflow: hidden;
    pointer-events: none;
}
.particula {
    position: absolute;
    top: 0;
    user-select: none;
    animation: caer linear infinite;
}
.particula svg { display: block; }
@keyframes caer {
    from { transform: translate3d(0, -10vh, 0) rotate(0deg); }
    to   { transform: translate3d(0, 110vh, 0) rotate(160deg); }
}

/* ----- Texto pedido desde el panel -----
   El ojo de "Fachada y menú" abre la web con ?ver=: el texto se resalta
   (marcaFachada()) y abajo un aviso dice cuál es o por qué no sale
   (avisoVerFachada()). Solo para quien puede editar la fachada. */
[data-ver-fachada] {
    scroll-margin-top: 8px; /* más los 88 px de scroll-padding de html */
    outline: 2px dashed var(--acento);
    outline-offset: 6px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--acento) 18%, transparent);
    animation: ver-fachada 900ms ease-out 2;
}
@keyframes ver-fachada { from { outline-offset: 16px; } }
/* Con un texto pedido se pinta todo: los bloques con content-visibility: auto
   cambian de alto al pintarse y dejarían el texto fuera de la vista. */
body:has([data-ver-fachada]) :is(.pie, .bloque-portada, .ficha__relacionados) { content-visibility: visible; }

body:has(.aviso-ver) { padding-bottom: 88px; }
.aviso-ver {
    position: fixed;
    right: var(--margen);
    bottom: 16px;
    left: var(--margen);
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 640px;
    margin-inline: auto;
    padding: 12px 16px;
    background: var(--fondo-elevado);
    border: 1px solid color-mix(in srgb, var(--acento) 55%, var(--borde-fuerte));
    border-radius: var(--radio-pequeno);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
    color: var(--texto-suave);
    font-size: .875rem;
    line-height: 1.45;
}
.aviso-ver p { flex: 1; margin: 0; }
.aviso-ver strong { color: var(--texto); font-weight: 600; }
.aviso-ver a { flex: none; color: var(--texto-suave); }
.aviso-ver__falta { display: none; }
body:not(:has([data-ver-fachada])) .aviso-ver__esta { display: none; }
body:not(:has([data-ver-fachada])) .aviso-ver__falta { display: inline; }

/* ----- Aviso del otro idioma -----
   «This page is also available in English» (avisoIdioma(), plantilla.php):
   fijo abajo, para no mover la página al aparecer; lo enseña js/idioma.js. */
.aviso-idioma {
    position: fixed;
    right: var(--margen);
    bottom: 16px;
    left: var(--margen);
    z-index: 70;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    max-width: 520px;
    margin-inline: auto;
    padding: 12px 44px 12px 16px;
    background: var(--fondo-elevado);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio);
    box-shadow: 0 16px 48px rgb(0 0 0 / .55);
    color: var(--texto);
    font-size: .9375rem;
}
.aviso-idioma p { flex: 1 1 200px; margin: 0; }
.aviso-idioma__cerrar {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--texto-suave);
    font: inherit;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}
.aviso-idioma__cerrar:hover { color: var(--texto); }

/* ----- Transiciones entre páginas -----
   Paso suave de una página a otra (View Transitions entre documentos, sin
   JavaScript), como en una app. Donde no se admite, la carga de siempre. */
@view-transition { navigation: auto; }

/* ----- Movimiento reducido ----- */
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    .particulas { display: none; }
    .promo-puntos::after { animation: none; }
    *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* ----- Página 404 (mostrarNoEncontrado()) ----- */
.no-encontrado {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block: 48px 72px;
    text-align: center;
}
.no-encontrado__cifra {
    margin: 0 0 8px;
    font-size: clamp(6rem, 4rem + 12vw, 11rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.06em;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--borde-fuerte);
    user-select: none;
}
/* El cero, encendido como un neón con el color de acento del tema. */
.no-encontrado__cifra span {
    color: var(--acento);
    -webkit-text-stroke: 0;
    text-shadow: 0 0 24px color-mix(in srgb, var(--acento) 55%, transparent),
                 0 0 64px color-mix(in srgb, var(--acento) 30%, transparent);
    animation: neon-404 4s ease-in-out infinite;
}
@keyframes neon-404 {
    0%, 100% { opacity: 1; }
    46% { opacity: 1; }
    48% { opacity: .35; }
    50% { opacity: 1; }
    52% { opacity: .5; }
    54% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .no-encontrado__cifra span { animation: none; }
}
.no-encontrado__texto { max-width: 440px; }
.no-encontrado__acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
}
.no-encontrado__atajos { justify-content: center; margin-top: 28px; }
.no-encontrado__atajos a { text-decoration: none; }