/* Solo para la guía de Doomsday: no afecta al resto de Fuera de Plano */
.doomsday-guide { --dg-panel:#141417; --dg-panel2:#1b1b20; --dg-line:#303037; --dg-muted:#a8a8b2; --dg-red:#e50914; color:#ececf1; }
.doomsday-guide * { box-sizing:border-box; }
/* ANCHO DE LA GUÍA DOOMSDAY */

.doomsday-guide .guide-wrap {
    width: calc(100% - 40px);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}.doomsday-guide .guide-hero { min-height:440px; position:relative; display:flex; align-items:end; background:linear-gradient(90deg,rgba(0,0,0,.92),rgba(0,0,0,.45)),url('imagenes/entradas/preparate-para-doomsday/fondo.jpg') center/cover; border-bottom:1px solid var(--dg-line); padding:70px 0 55px; }
.doomsday-guide .guide-eyebrow { color:#ff525c; font-family:'IBM Plex Mono',monospace; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; }
.doomsday-guide .guide-hero h1 { font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:clamp(2.6rem,6vw,5.2rem); line-height:1.05; margin:12px 0 20px; max-width:900px; }
.doomsday-guide .guide-hero h1 em { color:var(--dg-red); font-style:normal; }
.doomsday-guide .guide-lead { font-size:1.13rem; max-width:770px; line-height:1.65; }
.doomsday-guide .guide-meta { color:#c5c5ca; font-size:.85rem; margin-top:22px; }
.doomsday-guide .guide-progress { position:sticky; top:0; z-index:20; background:rgba(11,11,13,.96); border-bottom:1px solid var(--dg-line); backdrop-filter:blur(8px); }
.doomsday-guide .guide-progress .guide-wrap { display:flex; align-items:center; gap:14px; padding-block:12px; }
.doomsday-guide .guide-bar { flex:1; height:9px; background:var(--dg-panel2); border-radius:30px; overflow:hidden; }
.doomsday-guide .guide-bar i { display:block; width:0; height:100%; background:linear-gradient(90deg,#e50914,#ff626c); transition:width .25s; }
.doomsday-guide .guide-count { white-space:nowrap; color:var(--dg-muted); font-size:.85rem; }
.doomsday-guide .guide-count b { color:white; }
.doomsday-guide .guide-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:14px; margin:38px 0 12px; }
.doomsday-guide .guide-fact { background:var(--dg-panel); border:1px solid var(--dg-line); border-radius:10px; padding:16px; }
.doomsday-guide .guide-fact b { display:block; font-size:1.7rem; }
.doomsday-guide .guide-fact span { color:var(--dg-muted); text-transform:uppercase; font-size:.76rem; letter-spacing:.08em; }
.doomsday-guide .guide-note { color:var(--dg-muted); font-size:.9rem; }
.doomsday-guide section { padding:40px 0 10px; }
.doomsday-guide section > h2 { font-size:clamp(1.7rem,3vw,2.2rem); margin:0 0 16px; }
.doomsday-guide section > h2::after { content:''; display:block; width:54px; height:4px; margin-top:10px; background:var(--dg-red); }
.doomsday-guide .guide-week { background:var(--dg-panel); border:1px solid var(--dg-line); border-radius:12px; overflow:hidden; margin:22px 0; }
.doomsday-guide .guide-week-head { padding:20px 24px; border-bottom:1px solid var(--dg-line); background:linear-gradient(90deg,rgba(229,9,20,.16),transparent 75%); }
.doomsday-guide .guide-week-num { color:#ff525c; text-transform:uppercase; font-family:'IBM Plex Mono',monospace; font-size:.75rem; letter-spacing:.08em; }
.doomsday-guide .guide-week-title { font-size:1.3rem; font-weight:700; margin:4px 0; }
.doomsday-guide .guide-week-sub { color:var(--dg-muted); font-size:.9rem; }
.doomsday-guide .guide-items { list-style:none; padding:0; margin:0; }
.doomsday-guide .guide-items li+li { border-top:1px solid var(--dg-line); }
.doomsday-guide label.guide-item { display:grid; grid-template-columns:26px minmax(0,1fr); align-items:start; gap:15px; padding:17px 24px; cursor:pointer; }
.doomsday-guide label.guide-item:hover { background:var(--dg-panel2); }
.doomsday-guide .guide-item input[type='checkbox'] { appearance:none; width:22px; height:22px; margin:3px 0 0; border:2px solid #777782; border-radius:5px; background:transparent; cursor:pointer; display:grid; place-items:center; }
.doomsday-guide .guide-item input[type='checkbox']::after { content:''; width:10px; height:6px; border-left:2px solid white; border-bottom:2px solid white; transform:rotate(-45deg) scale(0); transition:transform .12s; margin-top:-3px; }
.doomsday-guide .guide-item input[type='checkbox']:checked { background:var(--dg-red); border-color:var(--dg-red); }
.doomsday-guide .guide-item input[type='checkbox']:checked::after { transform:rotate(-45deg) scale(1); }
.doomsday-guide .guide-item input[type='checkbox']:focus-visible { outline:2px solid #ff626c; outline-offset:3px; }
.doomsday-guide .guide-title-row { display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; }
.doomsday-guide .guide-t { font-weight:700; color:#fff; }
.doomsday-guide .guide-y,.doomsday-guide .guide-d { color:var(--dg-muted); font-size:.85rem; }
.doomsday-guide .guide-d { margin-left:auto; }
.doomsday-guide .guide-why { display:block; color:#c4c4cc; font-size:.93rem; margin-top:5px; }
.doomsday-guide label.guide-item:has(input:checked) .guide-t { color:var(--dg-muted); text-decoration:line-through; text-decoration-color:var(--dg-red); }
.doomsday-guide .guide-pick { background:linear-gradient(135deg,#1b0b0e,var(--dg-panel)); border:1px solid #512126; border-radius:12px; padding:26px; margin-top:16px; }
.doomsday-guide .guide-pick .guide-label { color:#ff525c; font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.1em; font-size:.8rem; }
.doomsday-guide .guide-pick h3 { margin:8px 0; }
.doomsday-guide .guide-todo { color:var(--dg-muted); font-style:italic; }
@media(max-width:650px){.doomsday-guide .guide-hero{min-height:360px;padding:50px 0 40px}.doomsday-guide label.guide-item{padding:16px}.doomsday-guide .guide-d{margin-left:0;width:100%}}
@media(prefers-reduced-motion:reduce){.doomsday-guide .guide-bar i,.doomsday-guide .guide-item input::after{transition:none}}

/* REDUCIR EL ANCHO DE LA GUÍA DOOMSDAY */

body main.wrap {
    width: 100% !important;
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

/* Mantener las tarjetas dentro del ancho */
body main.wrap .week,
body main.wrap .facts,
body main.wrap section {
    max-width: 100%;
    box-sizing: border-box;
}

/* BOTÓN REPRODUCIR EN DISNEY+ */

.doomsday-guide .guide-watch {
    padding: 0 24px 18px 65px;
}

.doomsday-guide .guide-watch-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: #0063e5;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.2s, transform 0.2s;
}

.doomsday-guide .guide-watch-btn:hover {
    background: #0483ee;
    color: #fff;
    transform: translateY(-2px);
}

@media (max-width: 650px) {
    .doomsday-guide .guide-watch {
        padding-left: 57px;
    }
}

/* INTRODUCCIÓN DOOMSDAY */

.doomsday-guide .guide-intro {
    padding: 55px 0 35px;
}

.doomsday-guide .guide-intro h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 400;
    margin: 0 0 28px;
    color: #fff;
}

.doomsday-guide .guide-intro p {
    font-size: 1.08rem;
    line-height: 1.85;
    color: #d0d0d5;
    margin-bottom: 22px;
}

.doomsday-guide .guide-intro strong {
    color: #fff;
}

.doomsday-guide .guide-intro .guide-intro-end {
    border-left: 4px solid #e50914;
    padding: 12px 0 12px 22px;
    margin-top: 35px;
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
}

/* VERDE DOCTOR DOOM */

.doomsday-guide .guide-intro h2 .doom-green {
    color: #3f8f50;
}

/* DOOMSDAY EN VERDE EN EL TÍTULO PRINCIPAL */

.doomsday-guide .guide-hero h1 em {
    color: #3f8f50;
    font-style: normal;
}

.doomsday-guide .guide-countdown {
    text-align: center;
    padding: 45px 0;
}

.doomsday-guide .guide-countdown-video {
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 25px auto;
    background: #000;
    border: 1px solid #3f8f50;
    border-radius: 10px;
    overflow: hidden;
}

.doomsday-guide .guide-countdown-video iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ==================================
   ANIMACIÓN FINAL DOOMSDAY
================================== */

.doom-complete {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    background: rgba(0, 0, 0, 0.96);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity .5s, visibility .5s;
}

.doom-complete.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* RESPLANDOR VERDE */

.doom-complete::before {
    content: "";
    position: absolute;
    width: 650px;
    height: 650px;

    background: radial-gradient(
        circle,
        rgba(40, 180, 75, .32),
        rgba(20, 80, 35, .12) 40%,
        transparent 70%
    );

    animation: doom-pulse 3s ease-in-out infinite;
}

/* CONTENIDO */

.doom-complete-content {
    position: relative;
    z-index: 2;
    width: min(90%, 700px);
    text-align: center;

    transform: scale(.8);
    opacity: 0;

    transition: transform .7s, opacity .7s;
}

.doom-complete.active .doom-complete-content {
    transform: scale(1);
    opacity: 1;
}

.doom-symbol {
    font-size: 85px;
    color: #54c878;
    text-shadow: 0 0 35px #1c9b45;
    animation: doom-pulse 2s infinite;
}

.doom-overline {
    color: #63d987;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .8rem;
    letter-spacing: 3px;
    margin: 20px 0;
}

.doom-complete h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 400;
    line-height: 1;
    color: white;
}

.doom-complete h2 span {
    display: block;
    color: #54c878;
    text-shadow: 0 0 30px rgba(84, 200, 120, .5);
}

.doom-message {
    color: #c6c6c6;
    font-size: 1.1rem;
    line-height: 1.8;
    margin: 25px 0 35px;
}

/* BOTÓN */

#doom-close {
    background: transparent;
    color: #63d987;
    border: 1px solid #63d987;
    padding: 13px 35px;

    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;

    transition: .3s;
}

#doom-close:hover {
    background: #63d987;
    color: #071009;
    box-shadow: 0 0 25px rgba(99, 217, 135, .5);
}

/* PARTÍCULAS */

.doom-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.doom-particle {
    position: absolute;
    bottom: -30px;

    width: 5px;
    height: 5px;
    border-radius: 50%;

    background: #65e68b;
    box-shadow: 0 0 12px #4fdf7c;

    animation: doom-rise linear forwards;
}

/* ANIMACIONES */

@keyframes doom-rise {
    from {
        transform: translateY(0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    to {
        transform: translateY(-110vh);
        opacity: 0;
    }
}

@keyframes doom-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: .6;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .doom-complete,
    .doom-complete-content {
        transition: none;
    }

    .doom-complete::before,
    .doom-symbol,
    .doom-particle {
        animation: none;
    }
}

/* BOTONES DE ENTRADAS DOOMSDAY */

.doom-tickets {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin: 30px 0 20px;
}

.doom-ticket-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 14px 24px;
    border-radius: 6px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    transition: transform .25s, box-shadow .25s;
}

/* Infinity Vision: morado */

.doom-ticket-premium {
    background: #673ab7;
    color: #fff;
    border: 1px solid #9575cd;
}

.doom-ticket-premium:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 0 25px rgba(103, 58, 183, .5);
}

/* Entrada normal: verde Doom */

.doom-ticket-normal {
    background: #3f8f50;
    color: #fff;
    border: 1px solid #63d987;
}

.doom-ticket-normal:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 0 25px rgba(63, 143, 80, .5);
}

/* Botón secundario */

.doom-back-btn {
    margin-top: 8px;
    background: transparent !important;
    border: none !important;
    color: #a5a5a5 !important;
    font-size: .75rem;
    cursor: pointer;
}

.doom-back-btn:hover {
    color: #fff !important;
}

@media (max-width: 550px) {
    .doom-tickets {
        flex-direction: column;
    }

    .doom-ticket-btn {
        width: 100%;
    }
}

/* INVITACIÓN A CINESA */

.doom-cinema-invite {
    max-width: 580px;
    margin: 25px auto 10px;
    text-align: center;
}

.doom-cinema-invite h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.8rem;
    font-weight: 400;
    color: #63d987;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.doom-cinema-invite p {
    color: #c6c6c6;
    font-size: 0.95rem;
    line-height: 1.65;
    margin-bottom: 12px;
}

.doom-cinema-invite strong {
    color: #fff;
}

.doom-cinema-invite .doom-cinema-question {
    color: #63d987;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 1px;
    margin-top: 20px;
}

/* =========================================
   DOOMSDAY - PANTALLA FINAL RESPONSIVE
========================================= */

/* La ventana ocupa la pantalla y permite desplazarse */
.doom-complete {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    overflow-x: hidden;
    overflow-y: auto;

    padding: 35px 20px;
    background: rgba(0, 0, 0, 0.97);
}

/* Todo el contenido centrado y más compacto */
.doom-complete-content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 650px;

    margin: auto;
    padding: 15px 0 25px;

    text-align: center;
}

/* Símbolo superior */
.doom-symbol {
    font-size: 45px;
    line-height: 1;
    margin-bottom: 8px;
}

/* Texto pequeño superior */
.doom-overline {
    font-size: 0.7rem;
    letter-spacing: 3px;
    margin: 8px 0 18px;
}

/* TÍTULO PRINCIPAL */
.doom-complete h2 {
    font-family: 'Bebas Neue', sans-serif;

    font-size: clamp(2.5rem, 5vw, 4.3rem);
    line-height: 0.98;

    margin: 0 0 20px;
    font-weight: 400;
}

.doom-complete h2 span {
    display: block;
    margin-top: 4px;
}

/* Mensaje del maratón */
.doom-message {
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 22px;
}

/* INVITACIÓN A CINESA */
.doom-cinema-invite {
    max-width: 550px;
    margin: 0 auto 15px;
}

.doom-cinema-invite h3 {
    font-size: 1.55rem;
    line-height: 1.1;
    margin: 0 0 12px;
}

.doom-cinema-invite p {
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 10px;
}

.doom-cinema-invite .doom-cinema-question {
    font-size: 0.8rem;
    margin: 15px 0 5px;
}

/* BOTONES */
.doom-tickets {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 12px;
    margin: 20px 0 12px;
}

.doom-ticket-btn {
    min-height: 46px;
    padding: 12px 18px;
    font-size: 0.78rem;
}

/* Volver a la guía */
.doom-back-btn {
    display: inline-block;
    margin: 8px 0 0;
    padding: 8px 12px;
    font-size: 0.75rem;
}

/* PANTALLAS PEQUEÑAS */
@media (max-width: 600px) {

    .doom-complete {
        padding: 20px 16px;
    }

    .doom-complete-content {
        padding: 10px 0 20px;
    }

    .doom-symbol {
        font-size: 35px;
    }

    .doom-complete h2 {
        font-size: clamp(2.2rem, 9vw, 3.2rem);
    }

    .doom-overline {
        font-size: 0.6rem;
        letter-spacing: 2px;
    }

    .doom-cinema-invite h3 {
        font-size: 1.4rem;
    }

    .doom-tickets {
        flex-direction: column;
        align-items: stretch;
    }

    .doom-ticket-btn {
        width: 100%;
    }
}

/* PELÍCULA DE LA SEMANA */

.doomsday-guide .guide-pick h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.3rem;
    font-weight: 400;
    color: #fff;
    margin: 12px 0 22px;
}

.doomsday-guide .guide-pick p {
    color: #d0d0d5;
    font-size: 1.05rem;
    line-height: 1.85;
    margin: 0 0 20px;
}

.doomsday-guide .guide-pick strong {
    color: #fff;
}

.doomsday-guide .guide-pick em {
    color: #e5e5e5;
}

.doomsday-guide .guide-pick .guide-label {
    color: #e50914;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.75rem;
}

/* PÓSTER DE LA PELÍCULA DE LA SEMANA */

.doomsday-guide .guide-pick {
    display: flow-root;
}

.doomsday-guide .guide-pick-poster {
    float: left;

    width: 185px;
    max-width: 35%;
    height: auto;

    margin: 0 25px 15px 0;

    border-radius: 6px;
    object-fit: cover;
}

/* Adaptación a móviles */

@media (max-width: 600px) {

    .doomsday-guide .guide-pick-poster {
        width: 125px;
        max-width: 40%;
        margin: 0 15px 12px 0;
    }

}