/*
Theme Name:   Déjà Vü Experience
Theme URI:    https://dejavuexperience.es
Author:       Déjà Vü Experience
Description:  Tema a medida para Déjà Vü Experience, Badajoz. Un solo paquete: portada editable, agenda de eventos y galería de noches con Google Drive, revisión de fotos y subida para fotógrafos. Paleta metálica fría sobre negro, tipografía Archivo variable y movimiento medido.
Version:      2.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  dejavu-experience
Tags:         dark, one-column, custom-logo, custom-menu, featured-images, full-width-template
*/

/* ═══════════════════════════════════════════════════════════════════
   1. TOKENS

   Una sola familia tipográfica (Archivo variable) explotando sus dos
   ejes: anchura 62–125 y grosor 100–900. El display va ancho y pesado;
   el texto, normal. El contraste sale de los ejes, no de mezclar dos
   fuentes parecidas.

   Forma: superficies y fotos a escuadra (radio 0); todo lo que se pulsa,
   en píldora. Es la única regla de radios del tema y no tiene excepciones.
═══════════════════════════════════════════════════════════════════ */

:root {

    /* ── Superficies ─────────────────────────────
       Azules muy oscuros, nunca #000: el negro puro mata la profundidad.
       Toda la escala lleva la misma tinta azul, así que al subir de nivel
       la superficie se aclara sin cambiar de familia de color. */
    --dvx-bg:      #070A10;
    --dvx-bg-2:    #0B0F17;
    --dvx-bg-3:    #121826;
    --dvx-bg-4:    #1A2233;

    /* ── Tinta ───────────────────────────────────
       Rampa de grises azulados. Contraste medido sobre --dvx-bg:
       ink 16.8:1 · ink-2 12.2:1 · ink-3 7.0:1 · ink-4 4.8:1 (AA).
       ink-4 solo en etiquetas de 14px o más. */
    --dvx-ink:     #EEF2F7;
    --dvx-ink-2:   #C2CCDA;
    --dvx-ink-3:   #8E9BAE;
    --dvx-ink-4:   #707E94;

    /* ── Acento ──────────────────────────────────
       Un solo color con dos papeles, porque sobre fondo oscuro un azul no
       puede hacer las dos cosas: el claro se lee bien como texto pero de
       relleno queda blando y acaramelado; el oscuro rellena bien pero como
       texto no contrasta. Así que:

         --dvx-acento        texto y filetes sobre superficie oscura  8.0:1
         --dvx-acento-fondo  relleno de botón, con --dvx-ink encima   7.7:1

       Su único trabajo son las entradas y el marcador de la próxima
       noche. Fuera de ahí, el acento no aparece. */
    --dvx-acento:         #7FA8DB;
    --dvx-acento-fondo:   #2B4C7E;
    --dvx-acento-fondo-2: #37608F;

    /* ── Líneas ──────────────────────────────────
       Tres pesos, tintados hacia el azul de la paleta. */
    --dvx-linea:   rgba(194, 204, 218, .09);
    --dvx-linea-2: rgba(194, 204, 218, .18);
    --dvx-linea-3: rgba(194, 204, 218, .34);

    /* ── Tipografía ──────────────────────────────
       El módulo de galería hereda estas mismas variables. */
    --dvx-fuente: "Archivo", "Archivo Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Anchuras del eje wdth */
    --dvx-ancha:   125;
    --dvx-media:   100;
    --dvx-estrecha: 88;

    /* Escala tipográfica. Los pasos de titular guardan ratio ≥ 1.25. */
    --dvx-t-micro:   0.8125rem;  /* 13px · solo metadatos            */
    --dvx-t-label:   0.875rem;   /* 14px · nav, botones, etiquetas    */
    --dvx-t-body:    1.0625rem;  /* 17px · cuerpo                     */
    --dvx-t-lead:    1.1875rem;  /* 19px · entradillas                */
    --dvx-t-h5:      1.375rem;   /* 22px                              */
    --dvx-t-h4:      1.75rem;    /* 28px                              */
    --dvx-t-h3:      clamp(1.75rem, 1.2rem + 1.8vw, 2.25rem);
    --dvx-t-h2:      clamp(2.25rem, 1.4rem + 2.9vw, 3rem);
    --dvx-t-h1:      clamp(2.75rem, 1.5rem + 4.4vw, 4rem);
    /* El suelo del display es lo que decide si una palabra larga cabe en un
       móvil. A 3.5rem, «EXPERIENCE» en la anchura 125 se salía de la
       pantalla a 400 px: diez letras anchas no entran en 358 px útiles. */
    --dvx-t-display:  clamp(2.25rem, 0.6rem + 8.4vw, 6rem);  /* 36px → 96px */

    /* ── Ritmo ───────────────────────────────────
       Varía a propósito: seccion-lg abre, seccion-sm agrupa. */
    --dvx-seccion:    clamp(5rem, 3rem + 6.5vw, 8.5rem);
    --dvx-seccion-lg: clamp(6.5rem, 3.5rem + 9vw, 11rem);
    --dvx-seccion-sm: clamp(3.5rem, 2.5rem + 3.5vw, 5.5rem);
    --dvx-gutter:     clamp(1.25rem, 0.5rem + 3.2vw, 4rem);
    --dvx-max:        1440px;
    --dvx-max-texto:  68ch;
    --dvx-cabecera:   72px;

    /* Alto del logotipo. functions.php lo sobrescribe con lo que haya en
       Personalizar › Logotipo. */
    --dvx-logo-h:     44px;
    --dvx-logo-h-pie: 56px;

    /* ── Movimiento ──────────────────────────────
       Curvas exponenciales, sin rebote. Las de serie son demasiado
       flojas: no tienen el golpe inicial que hace que algo responda. */
    --dvx-out:     cubic-bezier(.16, 1, .3, 1);
    --dvx-out-2:   cubic-bezier(.25, 1, .5, 1);
    --dvx-in-out:  cubic-bezier(.76, 0, .24, 1);
    --dvx-rapido:  160ms;
    --dvx-medio:   260ms;
    --dvx-lento:   440ms;

    /* ── Radios ──────────────────────────────────
       Superficies a escuadra, controles en píldora. Sin terceras vías. */
    --dvx-r-control: 999px;

    /* ── Capas ───────────────────────────────────
       Escala semántica. Ningún z-index suelto en el resto del archivo.

       La cabecera va POR ENCIMA del panel de menú, no por debajo. Es lo que
       parece al revés y no lo es: el botón de la hamburguesa vive en la
       cabecera y es el que cierra el panel. Si el panel lo tapa, en un móvil
       no queda forma de cerrar el menú, porque no hay tecla Escape. */
    --z-fondo:     0;
    --z-contenido: 1;
    --z-elevado:   10;
    --z-grano:     100;
    --z-panel:     200;
    --z-cabecera:  300;
    --z-lightbox:  400;
}

/* Métricas de reserva para que el salto al cargar Archivo sea mínimo. */
@font-face {
    font-family: "Archivo Fallback";
    src: local("Arial");
    size-adjust: 96%;
    ascent-override: 92%;
    descent-override: 24%;
    line-gap-override: 0%;
}

/* ═══════════════════════════════════════════════════════════════════
   2. BASE
═══════════════════════════════════════════════════════════════════ */

*,
*::before,
*::after { box-sizing: border-box; }

/* `overflow-x` va aquí y con `clip`, no en el body y no con `hidden`.
   Con `overflow-x: hidden` en el body el navegador fuerza `overflow-y: auto`
   en ese mismo elemento, y el body pasa a ser el contenedor de scroll en
   lugar del documento. Efecto secundario: `scroll-padding-top` deja de
   aplicarse, así que cada salto a un ancla (#agenda, #reservas) metía el
   título por debajo de la cabecera fija. `clip` recorta el desbordamiento
   sin crear contenedor de scroll. */
html {
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;                   /* reserva para navegadores sin clip */
    overflow-x: clip;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--dvx-cabecera) + 1.5rem);
}

body {
    margin: 0;
    background: var(--dvx-bg);
    color: var(--dvx-ink-2);
    font-family: var(--dvx-fuente);
    font-variation-settings: "wdth" var(--dvx-media);
    font-size: var(--dvx-t-body);
    font-weight: 400;
    line-height: 1.7;                     /* texto claro sobre oscuro: +0.05 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

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

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    color: inherit;
}

h1, h2, h3, h4, h5 {
    margin: 0;
    color: var(--dvx-ink);
    font-weight: 500;
    line-height: 1.14;
    text-wrap: balance;
}

p { text-wrap: pretty; }

::selection {
    background: var(--dvx-ink);
    color: var(--dvx-bg);
}

:focus-visible {
    outline: 2px solid var(--dvx-ink);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Se oculta a la vista pero sigue existiendo para lectores de pantalla. */
.dvx-oculto-visual {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* El enlace de salto tiene que poder verse al enfocarlo. En la versión
   anterior estaba oculto siempre, así que nadie podía usarlo. */
.dvx-salto:focus-visible {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: var(--z-panel);
    width: auto;
    height: auto;
    margin: 0;
    padding: .875rem 1.5rem;
    clip-path: none;
    background: var(--dvx-ink);
    color: var(--dvx-bg);
    border-radius: var(--dvx-r-control);
    font-size: var(--dvx-t-label);
    font-weight: 600;
}

.dvx-contenedor {
    width: 100%;
    max-width: var(--dvx-max);
    margin-inline: auto;
    padding-inline: var(--dvx-gutter);
}

/* Grano fijo, sin eventos de puntero y fuera del flujo de scroll: si se
   pone sobre un contenedor que hace scroll, repinta en cada fotograma. */
.dvx-grano {
    position: fixed;
    inset: 0;
    z-index: var(--z-grano);
    pointer-events: none;
    opacity: .035;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════════════
   3. TIPOGRAFÍA DE MARCA
═══════════════════════════════════════════════════════════════════ */

/* Display: ancho y pesado. Es la voz del club y solo se usa en piezas
   grandes: el hero, los días de la agenda, las cifras. */
.dvx-display {
    font-variation-settings: "wdth" var(--dvx-ancha), "wght" 750;
    font-weight: 750;
    letter-spacing: -.005em;
    line-height: .94;
    text-transform: uppercase;
    color: var(--dvx-ink);
}

.dvx-titulo {
    font-size: var(--dvx-t-h2);
    font-variation-settings: "wdth" 112, "wght" 620;
    font-weight: 620;
    letter-spacing: -.015em;
    line-height: 1.06;
    text-transform: uppercase;
}

.dvx-titulo--h3 {
    font-size: var(--dvx-t-h3);
}

/* Cejilla. Una sola por vista, y solo cuando aporta un dato que el
   titular no puede dar. No es decoración de sección. */
.dvx-cejilla {
    display: block;
    margin: 0 0 1.25rem;
    font-size: var(--dvx-t-micro);
    font-variation-settings: "wdth" var(--dvx-media), "wght" 550;
    font-weight: 550;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dvx-ink-3);
}

.dvx-lead {
    max-width: 54ch;
    margin: 0;
    font-size: var(--dvx-t-lead);
    line-height: 1.6;
    color: var(--dvx-ink-2);
}

.dvx-prosa {
    max-width: var(--dvx-max-texto);
}

.dvx-prosa p {
    margin: 0 0 1.35em;
}

.dvx-prosa p:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════════
   4. CONTROLES
═══════════════════════════════════════════════════════════════════ */

.dvx-boton,
.dvx-boton--fantasma,
.dvx-boton--acento {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    min-height: 48px;                     /* objetivo táctil */
    padding: .875rem 1.875rem;
    border: 1px solid transparent;
    border-radius: var(--dvx-r-control);
    background: var(--dvx-ink);
    color: var(--dvx-bg);
    font-size: var(--dvx-t-label);
    font-variation-settings: "wdth" var(--dvx-media), "wght" 620;
    font-weight: 620;
    letter-spacing: .07em;
    line-height: 1;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transition:
        background var(--dvx-rapido) ease,
        color var(--dvx-rapido) ease,
        border-color var(--dvx-rapido) ease,
        transform var(--dvx-rapido) var(--dvx-out);
}

.dvx-boton--fantasma {
    background: transparent;
    color: var(--dvx-ink);
    border-color: var(--dvx-linea-2);
}

.dvx-boton--acento {
    background: var(--dvx-acento-fondo);
    color: var(--dvx-ink);
    border-color: var(--dvx-acento-fondo);
}

@media (hover: hover) and (pointer: fine) {
    .dvx-boton:hover           { background: #FFFFFF; }
    .dvx-boton--fantasma:hover { background: rgba(194, 204, 218, .07); border-color: var(--dvx-linea-3); }
    .dvx-boton--acento:hover   { background: var(--dvx-acento-fondo-2); border-color: var(--dvx-acento-fondo-2); }
}

/* Sin esto los botones no responden al dedo. Es el detalle más barato
   y el que más se nota. */
.dvx-boton:active,
.dvx-boton--fantasma:active,
.dvx-boton--acento:active { transform: scale(.97); }

/* Enlace con flecha. La flecha se mueve con transform, nunca con `gap`:
   animar `gap` obliga al navegador a recalcular la maqueta en cada
   fotograma del hover. */
.dvx-flecha {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    font-size: var(--dvx-t-label);
    font-variation-settings: "wdth" var(--dvx-media), "wght" 600;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--dvx-ink);
}

.dvx-flecha::after {
    content: "";
    width: 1.375rem;
    height: 1px;
    background: currentColor;
    transition: transform var(--dvx-medio) var(--dvx-out);
    transform-origin: left center;
}

@media (hover: hover) and (pointer: fine) {
    .dvx-flecha:hover::after { transform: scaleX(1.55); }
}

.dvx-etiqueta-chip {
    display: inline-flex;
    align-items: center;
    padding: .3125rem .75rem;
    border: 1px solid var(--dvx-linea-2);
    border-radius: var(--dvx-r-control);
    font-size: var(--dvx-t-micro);
    font-variation-settings: "wdth" var(--dvx-media), "wght" 550;
    font-weight: 550;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dvx-ink-3);
}

.dvx-etiqueta-chip--acento {
    border-color: rgba(127, 168, 219, .48);
    color: var(--dvx-acento);
}

/* ═══════════════════════════════════════════════════════════════════
   5. CABECERA
═══════════════════════════════════════════════════════════════════ */

.dvx-cabecera {
    position: fixed;
    inset: 0 0 auto;
    z-index: var(--z-cabecera);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: var(--dvx-cabecera);
    padding: .75rem var(--dvx-gutter);
    background: transparent;
    border-bottom: 1px solid transparent;
    transition:
        background var(--dvx-medio) ease,
        backdrop-filter var(--dvx-medio) ease,
        border-color var(--dvx-medio) ease;
}

.admin-bar .dvx-cabecera { top: 32px; }

/* Al bajar, la cabecera gana fondo. El 92 % no es capricho: con menos, una
   foto clara o un titular grande pasando por detrás se cuela lo suficiente
   para ensuciar el logotipo y el botón, y eso son las dos cosas que siempre
   tienen que poder leerse. El desenfoque mantiene la sensación de cristal. */
.dvx-cabecera.con-fondo {
    background: rgba(7, 10, 16, .92);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-bottom-color: var(--dvx-linea);
}

/* Sin soporte de backdrop-filter, opaca del todo: es preferible perder el
   cristal que perder la legibilidad. */
@supports not (backdrop-filter: blur(1px)) {
    .dvx-cabecera.con-fondo { background: var(--dvx-bg); }
}

/* Con el menú abierto, la cabecera se apoya en el fondo del panel en vez de
   poner el suyo: dos capas translúcidas superpuestas se ven como una banda
   más oscura cruzando el menú. */
.dvx-menu-abierto .dvx-cabecera,
.dvx-menu-abierto .dvx-cabecera.con-fondo {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
}

/* Centinela invisible al principio del documento. Lo observa un
   IntersectionObserver, así no hace falta escuchar el scroll. */
.dvx-centinela {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 40px;
    pointer-events: none;
}

.dvx-marca {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    min-width: 0;
}

/* El logotipo manda sobre su caja: alto fijo, ancho automático. Así un
   logotipo apaisado no queda diminuto por culpa de una restricción de alto
   pensada para uno cuadrado. */
.dvx-marca img {
    height: var(--dvx-logo-h);
    width: auto;
    max-width: min(52vw, 320px);
    object-fit: contain;
}

.dvx-marca__texto {
    font-size: 1.0625rem;
    font-variation-settings: "wdth" var(--dvx-ancha), "wght" 700;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--dvx-ink);
}

.dvx-nav__lista {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dvx-nav__lista a {
    display: block;
    padding: .5rem 1rem;
    border-radius: var(--dvx-r-control);
    font-size: var(--dvx-t-label);
    font-variation-settings: "wdth" var(--dvx-media), "wght" 500;
    font-weight: 500;
    letter-spacing: .05em;
    color: var(--dvx-ink-3);
    transition: color var(--dvx-rapido) ease, background var(--dvx-rapido) ease;
}

@media (hover: hover) and (pointer: fine) {
    .dvx-nav__lista a:hover {
        color: var(--dvx-ink);
        background: rgba(194, 204, 218, .06);
    }
}

/* La píldora de la página activa la pinta WordPress solo con sus clases. */
.dvx-nav__lista .current-menu-item > a,
.dvx-nav__lista .current_page_item > a,
.dvx-nav__lista .current-menu-ancestor > a,
.dvx-nav__lista .current_page_parent > a {
    background: var(--dvx-ink);
    color: var(--dvx-bg);
    font-variation-settings: "wdth" var(--dvx-media), "wght" 620;
    font-weight: 620;
}

.dvx-cabecera__acciones {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
}

.dvx-social {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.dvx-social a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--dvx-linea);
    border-radius: var(--dvx-r-control);
    color: var(--dvx-ink-3);
    transition:
        color var(--dvx-rapido) ease,
        border-color var(--dvx-rapido) ease,
        background var(--dvx-rapido) ease,
        transform var(--dvx-rapido) var(--dvx-out);
}

@media (hover: hover) and (pointer: fine) {
    .dvx-social a:hover {
        color: var(--dvx-ink);
        border-color: var(--dvx-linea-3);
        background: rgba(194, 204, 218, .07);
    }
}

.dvx-social a:active { transform: scale(.94); }

.dvx-social svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

.dvx-cta-cabecera {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    white-space: nowrap;
    padding: .5rem 1.25rem;
    border-radius: var(--dvx-r-control);
    background: var(--dvx-ink);
    color: var(--dvx-bg);
    font-size: var(--dvx-t-label);
    font-variation-settings: "wdth" var(--dvx-media), "wght" 620;
    font-weight: 620;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
    transition: background var(--dvx-rapido) ease, transform var(--dvx-rapido) var(--dvx-out);
}

@media (hover: hover) and (pointer: fine) {
    .dvx-cta-cabecera:hover { background: #FFFFFF; }
}

.dvx-cta-cabecera:active { transform: scale(.97); }

/* ── Botón del menú ───────────────────────── */

.dvx-hamburguesa {
    display: none;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 1px solid var(--dvx-linea-2);
    border-radius: var(--dvx-r-control);
    color: var(--dvx-ink);
    cursor: pointer;
    transition: border-color var(--dvx-rapido) ease, transform var(--dvx-rapido) var(--dvx-out);
}

.dvx-hamburguesa:active { transform: scale(.94); }

/* Geometría explícita para que la aspa cierre bien: cada barra ocupa
   1.5 px de alto más 3.25 px de margen arriba y abajo, o sea 8 px de centro
   a centro. Ese 8 px es exactamente lo que hay que desplazar cada barra
   para que las dos se crucen en el mismo punto. Con un valor aproximado
   (antes 5 px) los trazos se cruzan descentrados y en vez de una X se ve
   un chevron. */
.dvx-hamburguesa span {
    display: block;
    width: 18px;
    height: 1.5px;
    margin: 3.25px auto;
    background: currentColor;
    transition:
        transform var(--dvx-medio) var(--dvx-out),
        opacity var(--dvx-rapido) ease;
}

.dvx-menu-abierto .dvx-hamburguesa span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.dvx-menu-abierto .dvx-hamburguesa span:nth-child(2) { opacity: 0; }
.dvx-menu-abierto .dvx-hamburguesa span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ── Panel móvil ──────────────────────────── */

.dvx-panel {
    position: fixed;
    inset: 0;
    z-index: var(--z-panel);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    padding: calc(var(--dvx-cabecera) + 2rem) var(--dvx-gutter) 3rem;
    background: rgba(7, 10, 16, .97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    /* Se anima con opacidad y transform, no con display: así puede
       transicionar y se puede interrumpir a mitad. */
    opacity: 0;
    transform: translateY(-1.25rem);
    visibility: hidden;
    transition:
        opacity var(--dvx-medio) var(--dvx-out),
        transform var(--dvx-medio) var(--dvx-out),
        visibility 0s linear var(--dvx-medio);
}

.dvx-menu-abierto .dvx-panel {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition-delay: 0s;
}

.dvx-panel__lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dvx-panel__lista li + li { margin-top: .25rem; }

.dvx-panel__lista a {
    display: block;
    padding: .5rem 0;
    font-size: clamp(1.75rem, 7vw, 2.5rem);
    font-variation-settings: "wdth" 115, "wght" 640;
    font-weight: 640;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--dvx-ink-3);
    transition: color var(--dvx-rapido) ease;
}

.dvx-panel__lista .current-menu-item > a,
.dvx-panel__lista .current_page_item > a { color: var(--dvx-ink); }

.dvx-panel__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--dvx-linea);
}

.dvx-panel__pie .dvx-cta-cabecera { min-height: 48px; padding-inline: 1.5rem; }

/* ═══════════════════════════════════════════════════════════════════
   6. HERO

   Compuesto abajo a la izquierda, no centrado: el centrado es el
   reflejo por defecto y aquí la foto tiene que respirar arriba.
═══════════════════════════════════════════════════════════════════ */

.dvx-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100svh;                   /* nunca 100vh: la barra de iOS salta */
    padding: calc(var(--dvx-cabecera) + 4rem) var(--dvx-gutter) clamp(2.5rem, 5vw, 4.5rem);
    overflow: hidden;
}

.dvx-hero__media {
    position: absolute;
    inset: 0;
    z-index: var(--z-fondo);
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.5) saturate(.85);
}

.dvx-hero__velo {
    position: absolute;
    inset: 0;
    z-index: var(--z-contenido);
    background:
        linear-gradient(to top, rgba(7, 10, 16, .97) 0%, rgba(7, 10, 16, .55) 45%, rgba(7, 10, 16, .30) 100%),
        linear-gradient(to right, rgba(7, 10, 16, .75) 0%, transparent 65%);
}

/* Escena sin foto: haces de luz de sala construidos con gradientes.
   No es un rectángulo de color, y no pesa ni un byte de red. */
.dvx-hero__escena {
    position: absolute;
    inset: 0;
    z-index: var(--z-fondo);
    overflow: hidden;
    background:
        radial-gradient(120% 85% at 50% 116%, rgba(96, 138, 196, .22), transparent 62%),
        radial-gradient(90% 70% at 14% -8%,  rgba(158, 186, 216, .26), transparent 64%),
        radial-gradient(75% 72% at 88% 6%,   rgba(110, 146, 190, .20), transparent 60%),
        var(--dvx-bg);
}

.dvx-hero__escena::before {
    content: "";
    position: absolute;
    inset: -35% -15%;
    transform-origin: 50% 0;
    filter: blur(7px);
    background: conic-gradient(from 208deg at 50% 0,
        transparent 0deg,
        rgba(214, 230, 245, .13) 7deg,
        transparent 15deg,
        transparent 27deg,
        rgba(214, 230, 245, .075) 33deg,
        transparent 41deg,
        transparent 55deg,
        rgba(214, 230, 245, .11) 61deg,
        transparent 69deg);
}

.dvx-hero__escena::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(75% 60% at 42% 30%, rgba(7, 10, 16, 0) 0%, rgba(7, 10, 16, .55) 100%),
        linear-gradient(to top, rgba(7, 10, 16, .92) 0%, rgba(7, 10, 16, .18) 55%, transparent 100%);
}

.dvx-hero__contenido {
    position: relative;
    z-index: var(--z-elevado);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: clamp(2rem, 5vw, 4rem);
    width: 100%;
    max-width: var(--dvx-max);
    margin-inline: auto;
}

/* Convierte la columna de texto en contenedor de consulta, para poder
   limitar el titular respecto a SU ancho y no al de la ventana. */
.dvx-hero__texto {
    container-type: inline-size;
    min-width: 0;
}

.dvx-hero__titulo {
    margin: 0;

    /* Tope duro además del clamp.
       Medido en Archivo: una mayúscula ocupa de media 0.82 em de avance, así
       que una palabra de once letras necesita font-size <= ancho/9. En
       unidades de contenedor eso son 11cqi. El clamp por sí solo depende de
       que yo acierte con el ancho de cada móvil; esto no depende de nada.
       En escritorio no estorba: gana siempre el techo de 96px del clamp. */
    font-size: min(var(--dvx-t-display), 11cqi);

    /* Última red: si alguien escribe una palabra aún más larga, se parte en
       dos líneas en lugar de salirse de la pantalla. Cortado nunca. */
    overflow-wrap: break-word;
    font-variation-settings: "wdth" var(--dvx-ancha), "wght" 780;
    font-weight: 780;
    letter-spacing: -.01em;
    line-height: .9;
    text-transform: uppercase;
    text-wrap: balance;
}

/* La segunda línea contrasta por eje de anchura y grosor, no por un
   contorno de texto ni por un degradado. */
.dvx-hero__titulo b {
    display: block;
    font-variation-settings: "wdth" var(--dvx-ancha), "wght" 300;
    font-weight: 300;
    color: var(--dvx-ink-2);
}

.dvx-hero__subtitulo {
    max-width: 34ch;
    margin: 1.5rem 0 0;
    font-size: var(--dvx-t-lead);
    line-height: 1.55;
    color: var(--dvx-ink-2);
}

.dvx-hero__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.75rem;
    margin-top: 2.25rem;
}

/* Ficha de la próxima noche, anclada a la derecha del hero. Da el dato
   que la gente viene a buscar sin robarle sitio al titular. */
.dvx-hero__proxima {
    display: grid;
    gap: .5rem;
    padding: 1.25rem 1.5rem;
    max-width: 17rem;
    border: 1px solid var(--dvx-linea-2);
    border-top: 2px solid var(--dvx-acento);
    background: rgba(18, 24, 38, .55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.dvx-hero__proxima-label {
    font-size: var(--dvx-t-micro);
    font-variation-settings: "wdth" var(--dvx-media), "wght" 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dvx-acento);
}

.dvx-hero__proxima-fecha {
    font-size: var(--dvx-t-h5);
    font-variation-settings: "wdth" 115, "wght" 680;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--dvx-ink);
}

.dvx-hero__proxima-nombre {
    font-size: var(--dvx-t-label);
    color: var(--dvx-ink-3);
}

/* ═══════════════════════════════════════════════════════════════════
   7. AGENDA
   Filas editoriales a ancho completo, no una rejilla de tarjetas.
   La foto de cada noche entra por detrás de su propia fila.
═══════════════════════════════════════════════════════════════════ */

.dvx-agenda {
    padding-block: var(--dvx-seccion-lg);
    background: var(--dvx-bg);
}

.dvx-seccion__cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: clamp(2.5rem, 4vw, 4rem);
}

.dvx-agenda__lista {
    border-top: 1px solid var(--dvx-linea-2);
}

.dvx-fila {
    position: relative;
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1.25rem, 3vw, 3rem);
    padding: clamp(1.75rem, 3vw, 2.75rem) 0;
    border-bottom: 1px solid var(--dvx-linea);
    isolation: isolate;
    transition: padding-inline var(--dvx-medio) var(--dvx-out);
}

.dvx-fila__fondo {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    opacity: 0;
    transition: opacity var(--dvx-lento) var(--dvx-out);
}

.dvx-fila__fondo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.42) saturate(.8) blur(2px);
    transform: scale(1.06);
    transition: transform var(--dvx-lento) var(--dvx-out), filter var(--dvx-lento) ease;
}

.dvx-fila__fondo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(7, 10, 16, .92), rgba(7, 10, 16, .45));
}

@media (hover: hover) and (pointer: fine) {
    .dvx-fila:hover .dvx-fila__fondo { opacity: 1; }
    .dvx-fila:hover .dvx-fila__fondo img { transform: scale(1); filter: brightness(.42) saturate(.8) blur(0); }
    .dvx-fila:hover { padding-inline: clamp(1rem, 2vw, 2rem); }
}

.dvx-fila__fecha {
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

.dvx-fila__dia {
    font-size: clamp(2.5rem, 4.5vw, 3.75rem);
    font-variation-settings: "wdth" var(--dvx-ancha), "wght" 700;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: .85;
    font-variant-numeric: tabular-nums;
    color: var(--dvx-ink);
}

.dvx-fila__mes {
    font-size: var(--dvx-t-label);
    font-variation-settings: "wdth" var(--dvx-media), "wght" 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dvx-ink-3);
}

.dvx-fila__cuerpo { min-width: 0; }

.dvx-fila__nombre {
    margin: 0;
    font-size: var(--dvx-t-h4);
    font-variation-settings: "wdth" 108, "wght" 620;
    font-weight: 620;
    letter-spacing: -.01em;
    line-height: 1.12;
    text-transform: uppercase;
}

.dvx-fila__resumen {
    max-width: 58ch;
    margin: .625rem 0 0;
    font-size: var(--dvx-t-body);
    line-height: 1.6;
    color: var(--dvx-ink-3);
}

.dvx-fila__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .625rem;
    margin-top: .875rem;
}

/* Orden de apilado dentro de la fila, que ya crea su propio contexto con
   `isolation: isolate`: la foto detrás, la zona pulsable encima y el botón
   por delante de todo, para que «Entradas» siga siendo pulsable. */
.dvx-fila__enlace::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.dvx-fila__accion {
    position: relative;
    z-index: 2;
    justify-self: end;
}

.dvx-fila--proxima .dvx-fila__dia { color: var(--dvx-acento); }

.dvx-vacio {
    padding: clamp(3rem, 6vw, 5rem) 0;
    border-bottom: 1px solid var(--dvx-linea);
    text-align: center;
}

.dvx-vacio__titulo {
    margin: 0 0 .625rem;
    font-size: var(--dvx-t-h5);
    font-variation-settings: "wdth" 108, "wght" 600;
    text-transform: uppercase;
    color: var(--dvx-ink);
}

.dvx-vacio__texto {
    max-width: 44ch;
    margin: 0 auto;
    color: var(--dvx-ink-3);
}

/* ═══════════════════════════════════════════════════════════════════
   8. NOCHES RECIENTES (tira con anclaje de scroll)
═══════════════════════════════════════════════════════════════════ */

.dvx-noches {
    padding-block: var(--dvx-seccion);
    background: var(--dvx-bg-2);
    overflow: hidden;
}

.dvx-tira {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(clamp(15rem, 78vw, 22rem), 1fr);
    gap: 2px;
    padding-inline: var(--dvx-gutter);
    margin-inline: calc(var(--dvx-gutter) * -1);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.dvx-tira::-webkit-scrollbar { display: none; }

.dvx-tira > * { scroll-snap-align: start; }

/* En pantallas anchas ya no hace falta arrastrar. */
@media (min-width: 1100px) {
    .dvx-tira {
        grid-auto-flow: row;
        grid-template-columns: repeat(3, 1fr);
        overflow: visible;
        padding-inline: 0;
        margin-inline: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   9. RESERVAS
   Único bloque centrado del documento: es el cierre, y ahí el mensaje
   sí es la composición.
═══════════════════════════════════════════════════════════════════ */

.dvx-reservas {
    position: relative;
    padding-block: var(--dvx-seccion-lg);
    overflow: hidden;
    text-align: center;
    background:
        radial-gradient(75% 55% at 50% 0%, rgba(140, 172, 210, .13), transparent 62%),
        radial-gradient(60% 50% at 50% 108%, rgba(96, 138, 196, .11), transparent 60%),
        var(--dvx-bg);
    border-top: 1px solid var(--dvx-linea);
}

.dvx-reservas__contenido {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 1.5rem;
    max-width: 46rem;
    margin-inline: auto;
}

.dvx-reservas__titulo {
    margin: 0;
    font-size: var(--dvx-t-h1);
    font-variation-settings: "wdth" var(--dvx-ancha), "wght" 720;
    font-weight: 720;
    letter-spacing: -.015em;
    line-height: .98;
    text-transform: uppercase;
}

.dvx-reservas__titulo b {
    display: block;
    font-variation-settings: "wdth" var(--dvx-ancha), "wght" 300;
    font-weight: 300;
    color: var(--dvx-ink-2);
}

.dvx-reservas__texto {
    max-width: 48ch;
    margin: 0;
    font-size: var(--dvx-t-lead);
    line-height: 1.6;
    color: var(--dvx-ink-2);
}

.dvx-reservas__acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: .5rem;
}

.dvx-reservas__nota {
    margin: .5rem 0 0;
    font-size: var(--dvx-t-label);
    color: var(--dvx-ink-4);
}

/* ═══════════════════════════════════════════════════════════════════
   10. PÁGINAS, ENTRADAS Y LISTADOS
═══════════════════════════════════════════════════════════════════ */

.dvx-principal { min-height: 60vh; }

.dvx-cabecera-pagina {
    padding-block: calc(var(--dvx-cabecera) + clamp(3.5rem, 7vw, 6.5rem)) clamp(2rem, 4vw, 3.5rem);
}

.dvx-cabecera-pagina__titulo {
    margin: 0;
    font-size: var(--dvx-t-h1);
    font-variation-settings: "wdth" var(--dvx-ancha), "wght" 740;
    font-weight: 740;
    letter-spacing: -.015em;
    line-height: .96;
    text-transform: uppercase;
}

.dvx-cabecera-pagina .dvx-lead { margin-top: 1.25rem; }

.dvx-contenido {
    padding-bottom: var(--dvx-seccion);
    font-size: var(--dvx-t-body);
    line-height: 1.75;
    color: var(--dvx-ink-2);
}

.dvx-contenido > * { max-width: var(--dvx-max-texto); }

.dvx-contenido > .alignwide,
.dvx-contenido > .alignfull,
.dvx-contenido > .dvg-galeria,
.dvx-contenido > figure { max-width: none; }

.dvx-contenido h2,
.dvx-contenido h3,
.dvx-contenido h4 {
    font-variation-settings: "wdth" 108, "wght" 620;
    font-weight: 620;
    letter-spacing: -.01em;
    text-transform: uppercase;
}

.dvx-contenido h2 { font-size: var(--dvx-t-h3); margin: 2.75rem 0 1rem; }
.dvx-contenido h3 { font-size: var(--dvx-t-h4); margin: 2.25rem 0 .75rem; }
.dvx-contenido h4 { font-size: var(--dvx-t-h5); margin: 2rem 0 .625rem; }

.dvx-contenido p { margin: 0 0 1.35em; }

.dvx-contenido a {
    color: var(--dvx-ink);
    text-decoration: underline;
    text-decoration-color: var(--dvx-linea-3);
    text-underline-offset: .3em;
    transition: text-decoration-color var(--dvx-rapido) ease;
}

.dvx-contenido a:hover { text-decoration-color: var(--dvx-ink); }

.dvx-contenido blockquote {
    margin: 2.25rem 0;
    padding-left: 1.5rem;
    border-left: 1px solid var(--dvx-linea-3);
    font-size: var(--dvx-t-h5);
    line-height: 1.5;
    color: var(--dvx-ink);
}

.dvx-contenido ul,
.dvx-contenido ol { padding-left: 1.25rem; }
.dvx-contenido li { margin-bottom: .5rem; }
.dvx-contenido img,
.dvx-contenido figure { margin-block: 1.75rem; }

.dvx-contenido figcaption {
    margin-top: .625rem;
    font-size: var(--dvx-t-label);
    color: var(--dvx-ink-3);
}

/* Plantilla a ancho total: manda el bloque, no el ancho de lectura. */
.dvx-ancho-total .dvx-contenido { padding-bottom: 0; }
.dvx-ancho-total .dvx-contenido > * { max-width: none; }

/* ── Listados de entradas y archivos ─────── */

.dvx-lista-entradas {
    display: grid;
    gap: 2px;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

.dvx-entrada {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    padding: clamp(1.5rem, 2.5vw, 2.25rem);
    background: var(--dvx-bg-3);
    transition: background var(--dvx-medio) ease;
}

@media (hover: hover) and (pointer: fine) {
    .dvx-entrada:hover { background: var(--dvx-bg-4); }
}

.dvx-entrada__fecha {
    font-size: var(--dvx-t-micro);
    font-variation-settings: "wdth" var(--dvx-media), "wght" 550;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dvx-ink-3);
}

.dvx-entrada__titulo {
    margin: 0;
    font-size: var(--dvx-t-h5);
    font-variation-settings: "wdth" 108, "wght" 620;
    text-transform: uppercase;
}

.dvx-entrada__texto {
    margin: 0;
    font-size: var(--dvx-t-body);
    color: var(--dvx-ink-3);
}

.dvx-entrada__espaciador { flex: 1 1 auto; }

/* ── Ficha de un evento ──────────────────── */

.dvx-evento-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--dvx-linea-2);
}

.dvx-evento-meta div {
    display: grid;
    gap: .25rem;
}

.dvx-evento-meta dt {
    font-size: var(--dvx-t-micro);
    font-variation-settings: "wdth" var(--dvx-media), "wght" 550;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dvx-ink-3);
}

.dvx-evento-meta dd {
    margin: 0;
    font-size: var(--dvx-t-body);
    color: var(--dvx-ink);
}


/* ═══════════════════════════════════════════════════════════════════
   11. INCRUSTADOS: MAPA Y ENTRADAS

   Los dos son marcos de terceros, así que comparten el mismo trato: sin
   borde propio, sobre una superficie del tema, con proporción reservada
   para que no provoquen salto de maqueta al cargar (CLS).
═══════════════════════════════════════════════════════════════════ */

.dvx-mapa {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--dvx-bg-3);
    border: 1px solid var(--dvx-linea);
}

.dvx-mapa iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Versión oscura, opcional desde el Personalizador. Integra el mapa con el
   tema a cambio de desaturarlo, así que no se aplica por defecto: un mapa
   tiene que leerse como mapa antes que combinar. */
.dvx-mapa--oscuro iframe {
    filter: invert(.9) hue-rotate(180deg) saturate(.7) contrast(.9) brightness(1.05);
}

@media (prefers-contrast: more) {
    /* Con contraste alto manda la legibilidad. */
    .dvx-mapa--oscuro iframe { filter: none; }
}

.dvx-mapa--alto { aspect-ratio: 4 / 3; }

@media (max-width: 640px) {
    .dvx-mapa,
    .dvx-mapa--alto { aspect-ratio: 1 / 1; }
}

/* ── Entradas (NANAIT) ───────────────────── */

.dvx-entradas {
    margin-top: clamp(2rem, 4vw, 3rem);
}

.dvx-entradas__marco {
    display: block;
    width: 100%;
    min-height: 30rem;
    border: 1px solid var(--dvx-linea);
    background: var(--dvx-bg-3);
    color-scheme: light dark;
}

.dvx-entradas__nota {
    margin: .875rem 0 0;
    font-size: var(--dvx-t-label);
    color: var(--dvx-ink-4);
}

.dvx-entradas__nota a {
    color: var(--dvx-ink-3);
    text-decoration: underline;
    text-decoration-color: var(--dvx-linea-3);
    text-underline-offset: .25em;
}

.dvx-entradas__nota a:hover { color: var(--dvx-ink); }

/* ═══════════════════════════════════════════════════════════════════
   12. PÁGINA DE CONTACTO
═══════════════════════════════════════════════════════════════════ */

.dvx-contacto {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: clamp(2.5rem, 5vw, 5rem);
    padding-bottom: var(--dvx-seccion);
}

.dvx-contacto__datos {
    display: grid;
    gap: 0;
}

.dvx-contacto__bloque {
    display: grid;
    gap: .375rem;
    padding-block: 1.375rem;
    border-bottom: 1px solid var(--dvx-linea);
}

.dvx-contacto__bloque:first-child { padding-top: 0; }

.dvx-contacto__clave {
    font-size: var(--dvx-t-micro);
    font-variation-settings: "wdth" var(--dvx-media), "wght" 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dvx-ink-3);
}

.dvx-contacto__valor {
    margin: 0;
    font-size: var(--dvx-t-lead);
    line-height: 1.45;
    color: var(--dvx-ink);
}

.dvx-contacto__valor a { color: inherit; }

.dvx-contacto__valor a:hover { text-decoration: underline; text-underline-offset: .25em; }

.dvx-contacto__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

@media (max-width: 900px) {
    .dvx-contacto { grid-template-columns: minmax(0, 1fr); }
    .dvx-contacto__mapa { order: -1; }
}

/* ═══════════════════════════════════════════════════════════════════
   13. PIE
═══════════════════════════════════════════════════════════════════ */

.dvx-pie {
    padding-block: clamp(3.5rem, 6vw, 5.5rem) 2.25rem;
    background: var(--dvx-bg);
    border-top: 1px solid var(--dvx-linea);
}

.dvx-pie__superior {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 4rem);
    margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.dvx-pie__marca img {
    height: var(--dvx-logo-h-pie);
    width: auto;
    max-width: min(80vw, 380px);
    object-fit: contain;
    margin-bottom: 1.25rem;
}

.dvx-pie__marca h2 {
    margin: 0 0 1.25rem;
    font-size: 1.375rem;
    font-variation-settings: "wdth" var(--dvx-ancha), "wght" 700;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.dvx-pie__marca p {
    max-width: 34ch;
    margin: 0;
    font-size: var(--dvx-t-body);
    line-height: 1.65;
    color: var(--dvx-ink-3);
}

.dvx-pie__columna h3 {
    margin: 0 0 1.25rem;
    font-size: var(--dvx-t-micro);
    font-variation-settings: "wdth" var(--dvx-media), "wght" 600;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dvx-ink-3);
}

.dvx-pie__columna ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dvx-pie__columna li + li { margin-top: .625rem; }

.dvx-pie__columna a,
.dvx-pie__columna span {
    font-size: var(--dvx-t-body);
    line-height: 1.5;
    color: var(--dvx-ink-3);
}

.dvx-pie__columna a { transition: color var(--dvx-rapido) ease; }

@media (hover: hover) and (pointer: fine) {
    .dvx-pie__columna a:hover { color: var(--dvx-ink); }
}

/* El mapa del pie va más apaisado que el de Contacto: ahí es un dato de
   apoyo, no el contenido principal de la página. */
.dvx-pie__mapa {
    margin-bottom: 2.25rem;
    aspect-ratio: 24 / 7;
}

@media (max-width: 900px) { .dvx-pie__mapa { aspect-ratio: 16 / 9; } }
@media (max-width: 640px) { .dvx-pie__mapa { aspect-ratio: 4 / 3; } }

.dvx-pie__inferior {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--dvx-linea);
}

.dvx-pie__inferior p {
    margin: 0;
    font-size: var(--dvx-t-label);
    color: var(--dvx-ink-4);
}

.dvx-pie__redes {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.dvx-pie__redes a {
    font-size: var(--dvx-t-label);
    font-variation-settings: "wdth" var(--dvx-media), "wght" 550;
    letter-spacing: .06em;
    color: var(--dvx-ink-4);
    transition: color var(--dvx-rapido) ease;
}

@media (hover: hover) and (pointer: fine) {
    .dvx-pie__redes a:hover { color: var(--dvx-ink); }
}

/* ═══════════════════════════════════════════════════════════════════
   14. PAGINACIÓN
═══════════════════════════════════════════════════════════════════ */

.dvx-paginas,
.dvx-contenido .navigation.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    max-width: none;
    margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

.dvx-contenido .navigation.pagination .screen-reader-text { display: none; }

.dvx-paginas a,
.dvx-paginas > span,
.dvx-contenido .page-numbers {
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
    padding-inline: .875rem;
    border: 1px solid var(--dvx-linea);
    border-radius: var(--dvx-r-control);
    font-size: var(--dvx-t-label);
    color: var(--dvx-ink-3);
    text-decoration: none;
    transition: color var(--dvx-rapido) ease, border-color var(--dvx-rapido) ease;
}

@media (hover: hover) and (pointer: fine) {
    .dvx-paginas a:hover,
    .dvx-contenido a.page-numbers:hover {
        color: var(--dvx-ink);
        border-color: var(--dvx-linea-3);
    }
}

.dvx-contenido .page-numbers.current,
.dvx-paginas > span[aria-current] {
    background: var(--dvx-ink);
    border-color: var(--dvx-ink);
    color: var(--dvx-bg);
}

/* ═══════════════════════════════════════════════════════════════════
   15. MOVIMIENTO

   Regla del tema: el contenido es visible por defecto. El revelado solo
   mejora algo que ya se ve, nunca lo condiciona. Si el JS no llega, si
   la pestaña está en segundo plano o si es un renderizador sin scroll,
   la página se lee igual. Antes no: `.dvx-revelar` nacía con opacity 0
   y la sección se quedaba en blanco.
═══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {

    /* Solo se atenúa si el JS ha confirmado que puede revelarlo. */
    .dvx-js .dvx-revelar {
        opacity: 0;
        transform: translateY(1.25rem);
        transition:
            opacity var(--dvx-lento) var(--dvx-out),
            transform var(--dvx-lento) var(--dvx-out);
    }

    .dvx-js .dvx-revelar.visible {
        opacity: 1;
        transform: none;
    }

    /* Entrada del hero: una sola secuencia orquestada, escalonada 70ms.
       clip-path revela el titular como si subiera de una ranura. */
    .dvx-hero__titulo {
        animation: dvx-revelar-titulo 1s var(--dvx-out) both;
        clip-path: inset(0 0 0 0);
    }

    .dvx-hero__subtitulo { animation: dvx-subir .9s var(--dvx-out) .14s both; }
    .dvx-hero__acciones  { animation: dvx-subir .9s var(--dvx-out) .21s both; }
    .dvx-hero__proxima   { animation: dvx-subir .9s var(--dvx-out) .28s both; }
    .dvx-hero .dvx-cejilla { animation: dvx-subir .9s var(--dvx-out) .07s both; }

    /* El barrido de los haces solo corre si hay permiso de movimiento. */
    .dvx-hero__escena::before {
        animation: dvx-barrido 26s var(--dvx-in-out) infinite alternate;
    }
}

@keyframes dvx-revelar-titulo {
    from {
        clip-path: inset(0 0 105% 0);
        transform: translateY(1.5rem);
    }
    to {
        clip-path: inset(0 0 -10% 0);
        transform: none;
    }
}

@keyframes dvx-subir {
    from { opacity: 0; transform: translateY(1.125rem); }
    to   { opacity: 1; transform: none; }
}

@keyframes dvx-barrido {
    from { transform: rotate(-7deg); }
    to   { transform: rotate(7deg); }
}

/* Movimiento reducido: se conserva lo que ayuda a entender (opacidad,
   color) y se quita todo desplazamiento. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }

    .dvx-revelar { opacity: 1 !important; transform: none !important; }
    .dvx-hero__escena::before { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   16. RESPONSIVE
═══════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
    .dvx-pie__superior { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dvx-pie__marca    { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
    .dvx-hero__contenido {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    /* Apilada, la ficha pasa a una sola línea horizontal: en vertical
       añadía tres renglones y el hero se salía de pantalla. */
    .dvx-hero__proxima {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: .375rem .875rem;
        max-width: none;
        justify-self: stretch;
        padding-block: 1rem;
    }

    .dvx-hero__proxima-label { width: 100%; }
    .dvx-hero__proxima-fecha { font-size: var(--dvx-t-lead); }
}

@media (max-width: 900px) {
    /* La navegación pasa al panel, pero la llamada a la acción se queda
       visible: en la versión anterior desaparecía y el móvil perdía el
       único camino a reservar. */
    .dvx-nav,
    .dvx-cabecera > .dvx-cabecera__acciones .dvx-social { display: none; }

    .dvx-hamburguesa { display: grid; }

    .dvx-fila {
        grid-template-columns: 5.5rem minmax(0, 1fr);
        align-items: start;
    }

    .dvx-fila__accion {
        grid-column: 2;
        justify-self: start;
        margin-top: .25rem;
    }
}

/* Navegadores sin consultas de contenedor (anteriores a 2023): se tira del
   clamp, con un suelo más bajo para compensar la falta de tope. */
@supports not (container-type: inline-size) {
    @media (max-width: 640px) {
        .dvx-hero__titulo { font-size: clamp(1.875rem, 0.4rem + 7.2vw, 3.25rem); }
    }
}

@media (max-width: 640px) {

    /* 13 px en mayúsculas y con espaciado ancho se lee peor en una pantalla
       a un brazo de distancia. */
    :root { --dvx-t-micro: 0.875rem; }

    /* ── Hero ──────────────────────────────
       En móvil el hero es lo que más se rompe: el titular es el bloque más
       ancho del sitio y la pantalla, el más estrecho. Se ataca por los dos
       lados, tamaño y eje de anchura. */

    .dvx-hero {
        /* 4rem de aire sobre el título sobran cuando solo hay 633 px de
           alto: empujaban el contenido fuera de la pantalla. */
        padding-top: calc(var(--dvx-cabecera) + 1.25rem);
        padding-bottom: 2rem;

        /* En escritorio el contenido va abajo, apoyado en la foto. En un
           móvil alto y estrecho eso deja medio pantallazo vacío arriba y el
           bloque parece caído. Centrado vertical queda equilibrado. */
        justify-content: center;
    }

    .dvx-hero__contenido { gap: 1.5rem; }

    /* La anchura baja de 125 a 100. Es la ventaja de una fuente variable:
       la misma letra ocupa menos sin cambiar de tipografía ni recurrir a
       partir la palabra con guiones. */
    .dvx-hero__titulo {
        font-variation-settings: "wdth" 100, "wght" 780;
        letter-spacing: -.02em;
        line-height: .95;
    }

    .dvx-hero__titulo b {
        font-variation-settings: "wdth" 100, "wght" 300;
    }

    .dvx-hero__subtitulo {
        max-width: none;
        margin-top: 1rem;
        font-size: var(--dvx-t-body);
        line-height: 1.5;
    }

    .dvx-hero__acciones {
        gap: .75rem;
        margin-top: 1.5rem;
    }

    .dvx-hero__proxima { padding: .875rem 1rem; }

    .dvx-cta-cabecera { padding-inline: .875rem; }

    /* ── Objetivos táctiles ────────────────
       Con el dedo, un enlace de 24 px de alto se falla. Todo lo pulsable
       sube a 44 px, el mínimo que recomiendan tanto Apple como las WCAG.
       En escritorio no hace falta: el ratón apunta fino. */

    .dvx-flecha {
        min-height: 44px;
        align-items: center;
    }

    /* En el pie los enlaces medían 19 px de alto y estaban separados 10 px:
       casi imposible acertar sin ampliar la página. */
    .dvx-pie__columna li + li { margin-top: 0; }

    .dvx-pie__columna li a,
    .dvx-pie__columna li > span,
    .dvx-pie__columna li address {
        display: flex;
        align-items: center;
        min-height: 44px;
    }

    .dvx-pie__redes a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .dvx-marca { min-height: 44px; align-items: center; }

    .dvx-fila {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .dvx-fila__accion { grid-column: 1; }

    .dvx-hero__acciones .dvx-boton,
    .dvx-hero__acciones .dvx-boton--fantasma,
    .dvx-reservas__acciones .dvx-boton,
    .dvx-reservas__acciones .dvx-boton--fantasma { width: 100%; }

    .dvx-pie__superior { grid-template-columns: minmax(0, 1fr); }
    .dvx-pie__inferior { justify-content: flex-start; }
}

/* Móviles estrechos: 360 px es de los anchos más comunes en Android y ahí
   la fila de la cabecera no cabía. Logotipo + «Reservar mesa» + hamburguesa
   sumaban 367 px en 320 px útiles, así que el botón del menú se salía de la
   pantalla. Se compacta todo en lugar de esconder la llamada a la acción,
   que es el único camino a la reserva desde el móvil. */
@media (max-width: 420px) {
    .dvx-cabecera { gap: .5rem; }

    .dvx-marca img { height: 34px; max-width: 104px; }
    .dvx-marca__texto { font-size: .9375rem; letter-spacing: .08em; }

    .dvx-cabecera__acciones { gap: .5rem; }

    .dvx-cta-cabecera {
        padding-inline: .875rem;
        font-size: .8125rem;
        letter-spacing: .04em;
    }

    .dvx-hamburguesa { width: 40px; height: 40px; }
}

@media (max-width: 782px) {
    .admin-bar .dvx-cabecera { top: 46px; }
}

/* ═══════════════════════════════════════════════════════════════════
   17. IMPRESIÓN
═══════════════════════════════════════════════════════════════════ */

@media print {
    .dvx-cabecera,
    .dvx-panel,
    .dvx-grano,
    .dvx-hero__escena,
    .dvx-hero__media { display: none; }

    body { background: #FFFFFF; color: #000000; }
    .dvx-hero { min-height: auto; }
    h1, h2, h3, .dvx-hero__titulo { color: #000000; }
}