/* =====================================================================
   TEMA NAVIDAD: ADORNOS DE LA PORTADA EN ORDENADOR (desde 1360 px)
   El bastón de caramelo, la escalera de Papá Noel y el anuncio del
   Calendario de Adviento, en la portada y, desde el 2026-11-11 (dueño), en
   las páginas de cada ciudad, que tienen su aspecto (body.pagina-ciudad:
   discotecas/madrid, restaurantes/madrid…). Aparte de navidad.css para que el móvil no los
   espere (dueño, 2026-11-04): etiquetasTema() lo enlaza solo en esas páginas
   ('css_inicio' en site.php, CLASES_ADORNOS_INICIO) con media="(min-width: 1360px)", y una hoja
   cuyo media no se cumple no frena el pintado. Por eso aquí no hay reglas
   para pantallas más estrechas: las que los ocultan están en navidad.css.
   Se carga antes que navidad-nochevieja.css, que oculta la escalera y el
   anuncio en esa fase.
   ===================================================================== */
/* ----- Bastón de caramelo con celo (js/navidad.js: portada, desde 1360 px) -----
   En el margen izquierdo del contenedor (1120 px), centrado en él, a la
   altura de la cabecera de la página; se va con el scroll. El celo es una
   tira translúcida con los extremos dentados que lo cruza en diagonal. Al
   pincharlo (.baston--suelto) el celo se levanta desde su extremo derecho y
   sale volando; la caída la mueve el script. */
.baston {
    position: absolute;
    top: 150px;
    left: calc((100% - var(--ancho)) / 4 - 23px);
    z-index: 41; /* sobre las partículas (40), bajo la cabecera (50) */
    width: 46px;
    height: 153px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    transform: rotate(-8deg);
    will-change: transform;
}
/* En la portada, en el margen izquierdo a la altura del hueco entre el
   buscador y «Más populares» (dueño, 2026-11-04): js/navidad.js lo pone justo
   antes de esa sección, absoluto y sin top (su sitio es el principio del
   contenedor, después del margen de la sección, que se une al del
   contenedor porque es su primer hijo). El hueco: 72 px de la cabecera + 88
   de la sección desde 1360 px; subir el margen y 68 px más lo centra. */
.baston--portada { top: auto; margin-top: calc(-68px - clamp(48px, 8vw, 88px)); }
/* En la de una ciudad, «Más populares» va después de la cabecera, en el mismo
   contenedor: su margen no se une al de este y el bastón empieza al acabar la
   cabecera. El hueco: sus 40 px de abajo + los 88 de la sección; su centro,
   24 px por debajo de ella, y el bastón mide 153. */
.pagina-ciudad .baston--portada { margin-top: -52px; }
.baston__dibujo { display: block; pointer-events: none; }
.baston__celo {
    position: absolute;
    top: 74px;
    left: -12px;
    width: 54px;
    height: 17px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .1) 55%, rgba(255, 255, 255, .22));
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 0 0 .5px rgba(255, 255, 255, .35);
    clip-path: polygon(0 0, 100% 0, 97% 18%, 100% 36%, 97% 54%, 100% 72%, 97% 88%, 100% 100%, 0 100%, 3% 82%, 0 64%, 3% 46%, 0 28%, 3% 12%);
    transform: rotate(-16deg);
    transform-origin: 8% 50%;
    transition: transform 160ms ease;
    pointer-events: none;
}
.baston:hover .baston__celo { transform: rotate(-16deg) translateY(-1px) rotate(-2deg); }
.baston:focus-visible { outline: 2px solid var(--oro); outline-offset: 6px; border-radius: 8px; }
.baston--suelto { cursor: default; }
.baston--suelto .baston__celo { animation: celo-despegar 450ms cubic-bezier(.3, .6, .4, 1) forwards; }
@keyframes celo-despegar {
    0%   { transform: rotate(-16deg); }
    45%  { transform: rotate(-30deg) perspective(120px) rotateY(-50deg); opacity: 1; }
    100% { transform: translate(-26px, -46px) rotate(-70deg) perspective(120px) rotateY(-85deg); opacity: 0; }
}
.baston--fuera { opacity: 0; transition: opacity 300ms ease; }

/* ----- Escalera de Papá Noel (solo CSS, en la portada y las de cada ciudad, desde 1360 px) -----
   Una escalera de cuerda que cuelga de debajo de la cabecera en el margen
   derecho, con Papá Noel trepando, y que se balancea despacio desde arriba
   (solo un transform). Es el ::after del <body>: se va con el scroll. En
   Nochevieja, navidad-nochevieja.css la quita solo de la portada: allí cuelga
   la cuenta atrás, que las de cada ciudad no tienen. */
@media (min-width: 1360px) {
    body.pagina-inicio::after,
    body.pagina-ciudad::after {
        content: "";
        position: absolute;
        top: 65px; /* la cabecera: 64 px y su borde */
        right: calc((100% - var(--ancho)) / 4 - 40px);
        z-index: 41;
        width: 80px;
        height: 220px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 220'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M18 0C17 60 20 140 17 214M62 0C63 60 60 140 63 214' stroke='%23cfa862' stroke-width='2.6'/%3E%3Cpath d='M18 20H62M18 44H62M18 68H62M18 92H62M18 116H62M18 140H62M18 164H62M17 188H62M17 212H63' stroke='%238a5a2b' stroke-width='4.5'/%3E%3Cpath d='M19 18.6H61M19 42.6H61M19 66.6H61M19 90.6H61M19 114.6H61M19 138.6H61M19 162.6H61M18 186.6H61M18 210.6H62' stroke='%23c08a50' stroke-width='1.2'/%3E%3Cpath d='M26 162V138M50 140V120M28 98L23 70M52 98L57 92' stroke='%23d6202f' stroke-width='9'/%3E%3C/g%3E%3Crect x='20' y='158' width='15' height='9' rx='3.5' fill='%2315151d'/%3E%3Crect x='44' y='134' width='15' height='9' rx='3.5' fill='%2315151d'/%3E%3Cellipse cx='40' cy='112' rx='17' ry='21' fill='%23d6202f'/%3E%3Crect x='23' y='124' width='34' height='7' rx='3.5' fill='%23f4f4f8'/%3E%3Crect x='23.5' y='110' width='33' height='5' fill='%2315151d'/%3E%3Crect x='36' y='108.6' width='8' height='7.8' rx='1' fill='none' stroke='%23f5c451' stroke-width='1.6'/%3E%3Ccircle cx='23' cy='68' r='4.4' fill='%2315151d'/%3E%3Ccircle cx='57.5' cy='92' r='4.4' fill='%2315151d'/%3E%3Ccircle cx='40' cy='84' r='9' fill='%23f5cfa8'/%3E%3Cpath d='M30 85c0 9 4 15 10 15s10-6 10-15c-3 2-6 3-10 3s-7-1-10-3z' fill='%23f4f4f8'/%3E%3Cpath d='M34.5 88.5c2-1.6 3.8-1.6 5.5 0 1.7-1.6 3.5-1.6 5.5 0-1.8 1.3-3.7 1.4-5.5.3-1.8 1.1-3.7 1-5.5-.3z' fill='%23e9e9ef'/%3E%3Ccircle cx='36.6' cy='83' r='1.1' fill='%2315151d'/%3E%3Ccircle cx='43.4' cy='83' r='1.1' fill='%2315151d'/%3E%3Ccircle cx='40' cy='86.2' r='1.6' fill='%23e98f86'/%3E%3Cpath d='M30.5 78C32 69 39 63 47 63c4 0 6 2 7 5-3-1-6 0-8 2 2 2 3 5 3 8z' fill='%23d6202f'/%3E%3Crect x='29' y='75.5' width='22' height='5.5' rx='2.75' fill='%23f4f4f8'/%3E%3Ccircle cx='54.5' cy='67.5' r='3.6' fill='%23f4f4f8'/%3E%3C/svg%3E") center top / contain no-repeat;
        transform-origin: 50% 0;
        animation: escalera-balanceo 5s ease-in-out infinite alternate;
        pointer-events: none;
    }
}
@keyframes escalera-balanceo {
    from { transform: rotate(-2.5deg); }
    to   { transform: rotate(2.5deg); }
}

/* ----- Anuncio del Calendario de Adviento (js/navidad.js: portada, desde 1360 px) -----
   En el margen derecho, bajo la escalera: un calendario de puertecitas con
   un lazo dorado. Al pasar el ratón se abren las seis, una tras otra; quieto,
   la del 17 se entreabre cada 6 s. Colores del calendario (adviento.css). */
.anuncio-adviento {
    position: absolute;
    top: 300px;
    right: max(12px, calc((100% - var(--ancho)) / 4 - 54px)); /* inclinado sobresale: con menos, scroll lateral a 1360 px */
    z-index: 41;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 108px;
    padding: 20px 10px 12px;
    background: linear-gradient(160deg, #222a5c, #121736);
    border: 1px solid color-mix(in srgb, var(--oro) 55%, transparent);
    border-radius: 14px;
    box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .9), inset 0 0 0 3px rgba(0, 0, 0, .25);
    color: #fff7e6;
    text-align: center;
    text-decoration: none;
    transform: rotate(2deg);
    transition: transform 200ms ease, box-shadow 200ms ease;
}
/* En la portada, delante de la sección «Esta semana» (en las de cada ciudad,
   «Fiestas esta semana en …»; js/navidad.js): sin top,
   se queda donde empieza ella. El right sigue contando desde la ventana: el
   contenedor no está posicionado. */
/* Su margen: el de la sección (portada.css), para que empiece con el título. */
.anuncio-adviento--semana { top: auto; margin-top: calc(clamp(48px, 8vw, 88px) + 2px); }
.anuncio-adviento:hover { color: #fff7e6; transform: rotate(0) translateY(-3px); box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .9), 0 0 0 1px var(--oro); }
.anuncio-adviento:focus-visible { outline: 2px solid var(--oro); outline-offset: 4px; }
/* El lazo: una cinta dorada que asoma por arriba con un nudo de dos bucles. */
.anuncio-adviento__lazo {
    position: absolute;
    top: -13px;
    left: calc(50% - 22px);
    width: 44px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 24'%3E%3Cpath d='M22 12C17 2 5 0 4 6s9 9 18 6zM22 12c5-10 17-12 18-6s-9 9-18 6z' fill='%23f5c451'/%3E%3Cpath d='M20 12l-6 11 4-1 2 2 2-12zM24 12l6 11-4-1-2 2-2-12z' fill='%23d9a93a'/%3E%3Ccircle cx='22' cy='12' r='3.4' fill='%23ffe6a3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.anuncio-adviento__titulo { color: var(--oro); font-size: .75rem; font-weight: 800; line-height: 1.15; letter-spacing: .02em; text-transform: uppercase; }
.anuncio-adviento__puertas { display: grid; grid-template-columns: repeat(2, 38px); gap: 5px; perspective: 300px; }
.anuncio-adviento__casilla { position: relative; height: 30px; border-radius: 5px; background: radial-gradient(circle at 50% 45%, #3a2a0b, #120d04 75%); }
.anuncio-adviento__premio { display: grid; place-items: center; height: 100%; color: var(--oro); font-size: .9rem; }
.anuncio-adviento__puerta {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 5px;
    background: var(--puerta);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--oro) 60%, transparent);
    color: #fff7e6;
    font-size: .8125rem;
    font-weight: 800;
    transform-origin: 0 50%;
    transition: transform 380ms cubic-bezier(.3, .7, .3, 1), color 120ms linear;
}
.anuncio-adviento__casilla--0 { --puerta: linear-gradient(155deg, #b3263a, #8e1b25); }
.anuncio-adviento__casilla--1 { --puerta: linear-gradient(155deg, #1d7a4e, #13532f); }
.anuncio-adviento__casilla--2 { --puerta: linear-gradient(155deg, #3a4a98, #2b3878); }
.anuncio-adviento:hover .anuncio-adviento__puerta { transform: rotateY(-105deg); color: transparent; } /* abierta, el número no se ve del revés */
.anuncio-adviento__casilla:nth-child(2) .anuncio-adviento__puerta { transition-delay: 60ms; }
.anuncio-adviento__casilla:nth-child(3) .anuncio-adviento__puerta { transition-delay: 120ms; }
.anuncio-adviento__casilla:nth-child(4) .anuncio-adviento__puerta { transition-delay: 180ms; animation: adviento-asoma 6s ease-in-out 2s infinite; }
.anuncio-adviento__casilla:nth-child(5) .anuncio-adviento__puerta { transition-delay: 240ms; }
.anuncio-adviento__casilla:nth-child(6) .anuncio-adviento__puerta { transition-delay: 300ms; }
.anuncio-adviento:hover .anuncio-adviento__puerta { animation: none; }
@keyframes adviento-asoma {
    0%, 78%, 100% { transform: none; }
    86%, 92%      { transform: rotateY(-48deg); }
}
.anuncio-adviento__texto { font-size: .75rem; line-height: 1.3; }
.anuncio-adviento__fechas { color: var(--oro); font-size: .6875rem; font-weight: 700; line-height: 1.25; }
.anuncio-adviento__boton {
    margin-top: 2px;
    padding: 5px 12px;
    background: var(--marca-oscuro); /* blanco sobre él, 6,6:1 (sobre --acento, 4,4) */
    border-radius: 999px;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
}