/* Tema de temporada: Día de Muertos (config/theme.php = 'muertos').
   Va encima de app.css y solo cambia lo que hace falta. Inspirado en el set de Emma:
   cempasúchil sobre pared clara, letrero de neón rosa, calavera de talavera y lotería.
   Colores: cempasúchil #ff8a00, rosa mexicano #e4007c, morado noche #2a1145, turquesa #00a6a6. */

.tema-muertos {
    --fondo: #fff7ec;
    --papel: #ffffff;
    --pelaje-claro: #ffe7c7;
    --pelaje: #ffb44d;
    --pelaje-sombra: #ff8a00;
    --lengua: #e4007c;
    --collar: #b0005f;

    --cempa: #ff8a00;
    --cempa-claro: #ffb627;
    --rosa-mx: #e4007c;
    --noche: #2a1145;
    --noche-2: #46186b;
    --turquesa: #00a6a6;
    --crema: #fff4e6;

    --blog-fondo: #d2f4f1;
    --blog-texto: #006b6b;
    --noticia-fondo: #ffd6ec;
    --noticia-texto: #a3005a;
    --fotos-fondo: #ffe2b8;
    --fotos-texto: #8a3f00;
    --fanart-fondo: #eadcff;
    --fanart-texto: #5b1fa0;
}

.tema-muertos:not(.is-bare) {
    background: var(--fondo);
}

/* ---------- Encabezado con papel picado colgando ---------- */

.tema-muertos .site-header {
    background: rgba(255, 247, 236, 0.94);
    border-bottom: 0;
}

.tema-muertos .site-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 46px;
    background: url("../img/papel-picado-pug.svg") 0 0 / 179px 46px repeat-x;
    pointer-events: none;
    filter: drop-shadow(0 2px 2px rgba(42, 17, 69, 0.12));
}

/* En la portada la guirnalda ya va en el recuadro de Emma: una sola basta. */
.tema-muertos:has(.hero) .site-header::after {
    display: none;
}

.tema-muertos .brand img {
    border-color: var(--cempa);
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--rosa-mx);
}

.tema-muertos .site-nav a:hover,
.tema-muertos .account-button:hover {
    background: #ffe2c2;
}

.tema-muertos .site-nav a[aria-current="page"] {
    background: var(--rosa-mx);
    color: #fff;
}

.tema-muertos main {
    padding-top: 22px;
}

/* La guirnalda del encabezado cuelga encima del inicio de la página. */
.tema-muertos:not(:has(.hero)) main {
    padding-top: 54px;
}

/* ---------- Botones ----------
   Con :where() el tema solo pesa lo mismo que .button de app.css: cambia el botón de siempre, pero los botones que
   tienen su propio color (tarjetas del Club, resultado de la Lotería, "peligro" del panel) lo conservan. Antes el tema
   les ponía fondo morado y se quedaban con su letra oscura: no se leía lo que decían (Ricardo, oct 2026). */

:where(.tema-muertos) .button:where(:not(.button--danger)) {
    background: var(--noche);
    border-color: var(--noche);
}

:where(.tema-muertos) .button:where(:not(.button--danger)):hover {
    background: var(--rosa-mx);
    border-color: var(--rosa-mx);
}

:where(.tema-muertos) .button--ghost {
    background: transparent;
    color: var(--noche);
}

:where(.tema-muertos) .button--ghost:hover {
    background: #ffe2c2;
    border-color: var(--noche);
    color: var(--noche);
}

/* Tarjetas del Club (/club) en colores de temporada, con botón claro y letra oscura para que se lea. */
.tema-muertos .club-games {
    background: var(--noche);
    color: var(--crema);
    box-shadow: 0 6px 0 #160823;
}

.tema-muertos .club-games .button {
    background: var(--cempa-claro);
    border-color: var(--cempa-claro);
    color: var(--noche);
}

.tema-muertos .club-games--tops {
    background: #a3005a;
    box-shadow: 0 6px 0 #6b003b;
}

.tema-muertos .club-games--tops .button {
    background: #ffd6ec;
    border-color: #ffd6ec;
    color: #a3005a;
}

.tema-muertos .club-games--huesito {
    background: #8a3f00;
    box-shadow: 0 6px 0 #5c2a00;
}

.tema-muertos .club-games--huesito .button {
    background: #ffe2b8;
    border-color: #ffe2b8;
    color: #8a3f00;
}

.tema-muertos .club-games:hover .button,
.tema-muertos .club-games:focus-visible .button {
    background: #fff;
    border-color: #fff;
}

/* ---------- Portada: noche de ofrenda ---------- */

.tema-muertos .hero {
    isolation: isolate;
    padding-top: 84px;
    background:
        radial-gradient(120% 90% at 85% 15%, rgba(228, 0, 124, 0.35), transparent 60%),
        radial-gradient(90% 70% at 0% 100%, rgba(255, 138, 0, 0.28), transparent 60%),
        linear-gradient(160deg, var(--noche-2), var(--noche) 70%);
    color: var(--crema);
    box-shadow: 0 10px 0 var(--cempa);
}

/* Pétalos que flotan despacio */
.tema-muertos .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("../img/petalos.svg") 0 0 / 240px;
    opacity: 0.4;
    animation: petalos 60s linear infinite;
}

/* Guirnalda de papel picado arriba */
.tema-muertos .hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 70px;
    background: url("../img/papel-picado-pug.svg") 0 0 / 273px 70px repeat-x;
    pointer-events: none;
}

@keyframes petalos {
    from { background-position: 0 0; }
    to { background-position: 120px 480px; }
}

.hero-temporada {
    display: none;
}

.tema-muertos .hero-temporada {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 5px 14px 5px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 244, 230, 0.25);
    color: var(--crema);
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.tema-muertos .hero-temporada::before {
    content: "";
    width: 22px;
    height: 22px;
    background: url("../img/cempasuchil-v2.svg") center / contain no-repeat;
}

.tema-muertos .hero-hi {
    color: var(--cempa-claro);
}

.tema-muertos .hero-name {
    color: #fff;
    text-shadow:
        0 0 0.06em #fff,
        0 0 0.14em rgba(255, 79, 154, 0.9),
        0 0 0.32em rgba(228, 0, 124, 0.75);
}

.tema-muertos .hero-text p,
.tema-muertos .hero-social p {
    color: #f6e7ff;
}

.tema-muertos .hero-social strong {
    color: #fff;
}

.tema-muertos .hero-actions .button {
    background: var(--cempa);
    border-color: var(--cempa);
    color: var(--noche);
}

.tema-muertos .hero-actions .button:hover {
    background: var(--cempa-claro);
    border-color: var(--cempa-claro);
}

.tema-muertos .hero-actions .button--ghost {
    background: transparent;
    border-color: rgba(255, 244, 230, 0.7);
    color: var(--crema);
}

.tema-muertos .hero-actions .button--ghost:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
    color: #fff;
}

.tema-muertos .hero-social .social-link {
    background: rgba(255, 255, 255, 0.14);
    --icono-hueco: var(--noche-2);
}

.tema-muertos .hero-social .social-link:hover {
    background: var(--rosa-mx);
    --icono-hueco: var(--rosa-mx);
}

/* Fotos como los cuadros del set: marco negro, paspartú blanco y flores alrededor. */
.tema-muertos .hero-photos::before {
    background: radial-gradient(closest-side, rgba(255, 182, 39, 0.35), rgba(255, 138, 0, 0) 70%);
}

.tema-muertos .hero-photo {
    border: 5px solid #fff;
    outline: 4px solid #17101c;
    border-radius: 6px;
    box-shadow: 0 10px 22px rgba(10, 0, 20, 0.45);
}

.hero-flor {
    display: none;
}

.tema-muertos .hero-flor {
    display: block;
    position: absolute;
    z-index: 2;
    width: 15%;
    aspect-ratio: 1;
    background: url("../img/cempasuchil-v2.svg") center / contain no-repeat;
    filter: drop-shadow(0 3px 4px rgba(10, 0, 20, 0.35));
    animation: flor 0.6s cubic-bezier(0.34, 1.4, 0.64, 1) both;
    pointer-events: none;
}

.tema-muertos .hero-flor--1 { left: 25%; top: -1%; animation-delay: 0.7s; }
.tema-muertos .hero-flor--2 { right: -2%; top: 30%; width: 13%; animation-delay: 0.8s; }
.tema-muertos .hero-flor--3 { left: -3%; top: 52%; width: 12%; animation-delay: 0.9s; }
.tema-muertos .hero-flor--4 { left: 40%; bottom: 0; width: 12%; animation-delay: 1s; }
.tema-muertos .hero-flor--5 { right: 30%; top: -4%; width: 10%; animation-delay: 1.1s; }
.tema-muertos .hero-flor--6 { left: 36%; top: 40%; width: 9%; animation-delay: 1.2s; }

@keyframes flor {
    from { opacity: 0; transform: scale(0.3) rotate(-60deg); }
    to { opacity: 1; transform: scale(1) rotate(0); }
}

.tema-muertos .hero-neon {
    background: #17101c;
    box-shadow: 0 0 0 2px rgba(255, 79, 154, 0.35), 0 8px 18px rgba(10, 0, 20, 0.5);
}

@media (min-width: 720px) {
    .tema-muertos .hero {
        padding-top: 112px;
    }

    .tema-muertos .hero::after {
        height: 96px;
        background-size: 374px 96px;
    }
}

/* ---------- Listado ---------- */

.tema-muertos .feed-heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tema-muertos .feed-heading::before,
.tema-muertos .page-head h1::before {
    content: "";
    flex: none;
    width: 1.1em;
    height: 1.1em;
    background: url("../img/cempasuchil-v2.svg") center / contain no-repeat;
}

.tema-muertos .page-head h1 {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tema-muertos .card {
    border-color: #ffe2c2;
    box-shadow: 0 6px 0 var(--pelaje);
}

.tema-muertos .card:hover,
.tema-muertos .card:focus-within {
    box-shadow: 0 9px 0 var(--rosa-mx);
}

.tema-muertos .card-media--empty {
    background-image: url("../img/petalos.svg");
    background-size: 200px;
}

.tema-muertos .pager-pages a[aria-current="page"] {
    background: var(--cempa);
    color: var(--noche);
}

/* ---------- Pie: noche con flores ---------- */

.tema-muertos .site-footer {
    position: relative;
    margin-top: 40px;
    background:
        linear-gradient(180deg, rgba(70, 24, 107, 0.6), rgba(42, 17, 69, 0.75)),
        url("../img/petalos.svg") 0 0 / 240px,
        linear-gradient(180deg, var(--noche-2), var(--noche));
    color: var(--crema);
}

.tema-muertos .site-footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 60px;
    background: url("../img/papel-picado-pug.svg") 0 0 / 234px 60px repeat-x;
}

.tema-muertos .site-footer-inner {
    padding-top: 80px;
}

.tema-muertos .site-footer .tail {
    display: none;
}

.muertos-flores {
    display: none;
}

.tema-muertos .muertos-flores {
    display: flex;
    justify-content: center;
    align-items: end;
    gap: 2px;
    margin-bottom: 10px;
}

.tema-muertos .muertos-flores i {
    width: 34px;
    aspect-ratio: 1;
    background: url("../img/cempasuchil-v2.svg") center / contain no-repeat;
}

.tema-muertos .muertos-flores i:nth-child(2) {
    width: 46px;
}

.tema-muertos .site-footer .social-link {
    background: rgba(255, 255, 255, 0.12);
    --icono-hueco: var(--noche-2);
}

.tema-muertos .site-footer .social-link:hover {
    background: var(--rosa-mx);
    --icono-hueco: var(--rosa-mx);
}

.tema-muertos .site-footer-small {
    color: #d9c6ea;
}

/* ---------- Menos movimiento si así lo pide el teléfono ---------- */

@media (prefers-reduced-motion: reduce) {
    .tema-muertos .hero::before,
    .tema-muertos .hero-flor {
        animation: none;
    }
}