/* ======================================= */
/* 1. RESET Y ESTRUCTURA GLOBAL            */
/* ======================================= */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    font-family: 'Segoe UI', Arial, sans-serif;
    color: white;
    line-height: 1.6;
}

/* box-sizing para que el padding no fuerce ancho/alto extra */
* {
    box-sizing: border-box;
}

/* Contenedor principal para centrar todo el contenido */
#app-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 20px 0; /* Espacio de seguridad reducido */
}

/* ======================================= */
/* 2. CAPA DE FONDO                        */
/* ======================================= */
#background-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('recursos/fondo.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
    opacity: 0.85;
}

/* ======================================= */
/* 3. CONTENIDO PRINCIPAL (La Caja Central)*/
/* ======================================= */
#main-content {
    background-color: rgba(0, 0, 0, 0.7);
    padding: 10px 30px;
    border-radius: 12px;
    text-align: center;
    width: 90%;
    max-width: 900px;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* ======================================= */
/* 3.5 CONTENEDOR DEL FORMULARIO           */
/* (Copia el estilo de #main-content)      */
/* ======================================= */
#mailerlite-form-container {
    background-color: rgba(0, 0, 0, 0.7);
    padding: 10px 30px;
    border-radius: 12px;
    text-align: center;
    width: 90%;
    max-width: 900px; /* Mismo ancho que main-content */
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
    z-index: 1;
}

/* ======================================= */
/* 4. ESTILOS DE ELEMENTOS (LOGO, BOTONES, VIDEO) */
/* ======================================= */

/* 👑 Logo 1 (En Main Content) - AHORA DINÁMICO 👑 */
#logo {
    width: 80vw;
    max-width: var(--logo-size-mobile, 400px); /* Lee el tamaño de móvil desde JS */
    height: auto;
    margin: 0 auto var(--logo-space-bottom, 5px) auto; /* Espacio mínimo por debajo */
    display: block;
}

/* 👑 Logo 2 (En Formulario) - AHORA DINÁMICO 👑 */
#logo-form {
    width: 80vw;
    max-width: var(--logo-size-mobile, 400px); /* Lee el tamaño de móvil desde JS */
    height: auto;
    margin: 0 auto var(--logo-space-bottom, 5px) auto;
    display: block;
}

/* 🎬 NUEVO: TEXTO CRÉDITOS DE AUTOR (Estilo Cine) 🎬 */
#author-credits, .author-credits-form {
    font-size: 0.8em;
    color: #b3b3b3; /* Gris suave y elegante */
    text-transform: uppercase;
    letter-spacing: 2px; /* Efecto poster de cine */
    margin-top: 0;
    margin-bottom: 20px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

#video-section {
    width: 100%;
    max-width: 800px;
    margin: 10px auto;
}

    #video-section iframe {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

/* Botones de Idioma */
#language-switcher,
#language-switcher-form {
    margin-bottom: 10px;
}

    #language-switcher button,
    #language-switcher-form button {
        background-color: rgba(255, 255, 255, 0.1);
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.5);
        padding: 5px 10px;
        margin: 0 5px;
        cursor: pointer;
        border-radius: 4px;
        transition: background-color 0.2s;
        font-weight: bold;
    }

        #language-switcher button:hover,
        #language-switcher-form button:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }

        #language-switcher button.active,
        #language-switcher-form button.active {
            background-color: #ff5722;
            border: 1px solid #ff5722;
            color: white;
        }

/* ======================================= */
/* 5. CONTADOR DE SUSCRIPTORES             */
/* ======================================= */

#subscriber-counter {
    margin: 10px 0;
    font-size: 1.2em; /* Fuente base del texto (ej: "capos listos...") */
    font-weight: 300;
    text-align: center; /* Centra todo el bloque */
    line-height: 1.4; /* Espacio entre líneas si se rompe */
}

    /* Forzamos a los <p> a no ser un bloque */
    #subscriber-counter p {
        display: inline;
    }

#counter-display {
    font-size: 2.5em; /* El número será 2.5x más grande que el texto */
    font-weight: 900;
    color: #FFD700;
    margin: 0 8px; /* Espacio horizontal para separar el número */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    line-height: 1;
    vertical-align: middle; /* Se alinea con el texto de los lados */
}

/* ======================================= */
/* 6. BOTÓN DE ACCIÓN                      */
/* ======================================= */
#subscription-area {
    margin-top: 10px;
}

#subscribe-button {
    background-color: #ff5722;
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 1.2em;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s;
    text-transform: uppercase;
}

    #subscribe-button:hover {
        background-color: #e64a19;
        transform: translateY(-2px);
    }

/* 🆕 NUEVO: Aviso de "ya estás suscrito" y su botón de reenganche */
#already-subscribed-message {
    margin-top: 10px;
    text-align: center;
}

    #already-subscribed-message p {
        font-size: 1.1em;
        margin: 0 0 10px 0;
    }

#resubscribe-button {
    background-color: transparent;
    color: #FFD700;
    border: 1px solid #FFD700;
    padding: 8px 16px;
    font-size: 0.9em;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
}

    #resubscribe-button:hover {
        background-color: rgba(255, 215, 0, 0.15);
    }

/* ======================================= */
/* 6.5 ESTILOS PARA EL FORMULARIO BREVO    */
/* ======================================= */

/* 🛑 REGLA QUE ARREGLA LOS TEXTOS NEGROS 🛑 */
#form-injector-inline .ml-form-embedBody,
#mailerlite-form-container .ml-form-embedBody,
#form-injector-inline .ml-form-embedBody p,
#mailerlite-form-container .ml-form-embedBody p,
#form-injector-inline .ml-form-embedBody h4,
#mailerlite-form-container .ml-form-embedBody h4,
#form-injector-inline .ml-form-embedBody label,
#mailerlite-form-container .ml-form-embedBody label,
#form-injector-inline .ml-form-checkboxRow .label-description,
#mailerlite-form-container .ml-form-checkboxRow .label-description,
#form-injector-inline .ml-form-embedPermissionsContent h4,
#mailerlite-form-container .ml-form-embedPermissionsContent h4,
#form-injector-inline .ml-form-embedPermissionsContent p,
#mailerlite-form-container .ml-form-embedPermissionsContent p,
#form-injector-inline .ml-form-embedContent p,
#mailerlite-form-container .ml-form-embedContent p,
#form-injector-inline .ml-form-embedContent h4,
#mailerlite-form-container .ml-form-embedContent h4 {
    color: white !important;
    font-family: 'Segoe UI', Arial, sans-serif !important;
    text-align: left;
}

/* 🛑 REGLAS PARA EL RESTO DEL "PEGOTE" 🛑 */
#form-injector-inline .ml-form-embedWrapper,
#mailerlite-form-container .ml-form-embedWrapper {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#form-injector-inline input[type="email"],
#mailerlite-form-container input[type="email"] {
    width: 100% !important;
    max-width: 400px !important;
    padding: 12px !important;
    margin: 0 auto 10px auto !important;
    border-radius: 6px !important;
    border: 1px solid #ccc !important;
    background-color: white !important;
    color: #333 !important;
    font-size: 1em !important;
    display: block !important;
}

#form-injector-inline button[type="submit"],
#mailerlite-form-container button[type="submit"] {
    background-color: #ff5722 !important;
    color: white !important;
    border: none !important;
    padding: 15px 30px !important;
    font-size: 1.2em !important;
    font-weight: bold !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: background-color 0.3s, transform 0.1s !important;
    text-transform: uppercase !important;
    width: auto !important;
    margin: 0 auto !important;
}

    #form-injector-inline button[type="submit"]:hover,
    #mailerlite-form-container button[type="submit"]:hover {
        background-color: #e64a19 !important;
        transform: translateY(-2px) !important;
    }

#form-injector-inline .ml-form-embedBody a,
#mailerlite-form-container .ml-form-embedBody a {
    color: #FFD700 !important;
    text-decoration: underline !important;
}

/* ======================================= */
/* 7. ENLACE FINAL (Oculto al inicio)      */
/* ======================================= */
#launch-link {
    margin-top: 40px;
    padding: 10px;
}

    #launch-link a {
        color: #FFD700;
        text-decoration: none;
        font-weight: bold;
        font-size: 1.1em;
    }

/* ======================================= */
/* 8. MEDIA QUERIES (Ajustes para PC)      */
/* ======================================= */
@media (min-width: 769px) {
    #logo, #logo-form {
        /* 👑 AHORA EL TAMAÑO EN PC SE LEE DESDE EL JS 👑 */
        max-width: var(--logo-size-pc, 700px);
        width: auto;
    }

    #counter-display {
        font-size: 3em;
    }
}

/* ======================================= */
/* 9. AJUSTES DE ESPACIO PARA MODO 0       */
/* (Con márgenes "apretados")              */
/* ======================================= */

.mode-0 #main-content {
    justify-content: flex-start !important; /* El "bazooka" */
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Reducción constante del vídeo */
.mode-0 #video-section {
    margin: 5px auto;
    max-width: 600px;
}

/* I-1 & I-2: Apretamos el contador */
.mode-0 #subscriber-counter {
    margin: 5px 0;
}

/* I-3: Apretamos el espacio sobre el formulario */
.mode-0 #form-injector-inline .ml-form-embedBody {
    padding-top: 10px !important;
}

/* I-3 (bis): Apretamos el subtítulo */
.mode-0 #form-injector-inline .ml-form-embedContent {
    margin-bottom: 10px !important;
}

/* I-4: Apretamos el texto de privacidad */
.mode-0 #form-injector-inline .ml-form-embedPermissionsContent.privacy-policy {
    margin-bottom: 5px !important;
}

/* I-5: Apretamos la casilla de 'Acepto' */
.mode-0 #form-injector-inline .ml-form-checkboxRow {
    margin-bottom: 10px !important;
}

/* I-6: Apretamos el espacio bajo el botón */
.mode-0 #form-injector-inline .ml-form-embedSubmit {
    margin-bottom: 0 !important; /* Lo ponemos a 0 */
}


/* 🛑 REGLAS DE COMPACTACIÓN (SI HAY OVERFLOW) 🛑 */

.mode-0.is-compact #logo {
    max-width: 500px;
    margin-bottom: 0;
}

.mode-0.is-compact #subscriber-counter {
    font-size: 1em;
    margin: 5px 0;
}

.mode-0.is-compact #counter-display {
    font-size: 2em;
    margin: 0 5px;
}

/* Estilo para el texto de privacidad */
.mode-0 #form-injector-inline .ml-form-embedPermissions {
    margin-top: 5px !important; /* <-- Tu 5px */
    margin-bottom: 0 !important;
}

    /* Hacemos el texto de privacidad un poco más pequeño */
    .mode-0 #form-injector-inline .ml-form-embedPermissions p {
        font-size: 0.8em !important;
        text-align: center !important;
        color: #999 !important;
    }

/* ======================================= */
/* 10. CLASE UTILITARIA PARA OCULTAR       */
/* ======================================= */
.hidden {
    display: none !important;
}

/* =======================================================
   11. MÓDULO A: CARRUSEL DE IMÁGENES (SIN RECORTES)
   ======================================================= */
#carousel-section {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* Formato panorámico para PC */
    margin: 20px auto;
    overflow: hidden;
    border-radius: 8px;
    background-color: transparent;
}

/* Magia para Móviles: Si la pantalla es estrecha, cambia a formato cuadrado */
@media (max-width: 768px) {
    #carousel-section {
        aspect-ratio: 1 / 1;
    }
}

#carousel-section .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* 🛑 CONTAIN: La imagen se encoge hasta caber 100% entera, sin cortarse */
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

    #carousel-section .slide.active {
        opacity: 1;
    }

/* =======================================================
   12. MÓDULO B: MESA DE CARTAS VOLADORAS (EFECTOS MÚLTIPLES)
   ======================================================= */
#cards-section {
    position: relative;
    width: calc(100% + 60px);
    /* El -30px a la izquierda, junto con los 60px extra de ancho de arriba, ensancha
       la mesa 30px por cada lado hasta el borde real del fondo oscuro de #main-content,
       cancelando su padding de 30px sin tocar nada más de la maquetación */
    margin: 30px 0 30px -30px;
    /* La altura dinámica controlada por JavaScript (versión MÓVIL por defecto) */
    min-height: var(--table-height-mobile, 280px);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.card-item {
    position: absolute;
    /* El ancho dinámico controlado por JavaScript (versión MÓVIL por defecto) */
    width: var(--card-size-mobile, 180px);
    height: auto;
    opacity: 0;
    animation-fill-mode: forwards; /* Se quedan clavadas al terminar */
    filter: drop-shadow(-5px 10px 10px rgba(0,0,0,0.6)); /* Sombra realista 3D */
    /* 🔥 NUEVO: REDONDEO DE ESQUINAS (Se inyecta desde JS, versión MÓVIL por defecto) 🔥 */
    border-radius: var(--card-radius-mobile, 6px);
}

/* 🃏 NUEVO: En PC usamos el tamaño y redondeo grandes de las cartas. Esta regla va
   DESPUÉS de las reglas base de arriba a propósito: con la misma especificidad,
   la que aparece más abajo en el archivo es la que gana en pantallas anchas. */
@media (min-width: 769px) {
    #cards-section {
        min-height: var(--table-height-pc, 545px);
    }

    .card-item {
        width: var(--card-size-pc, 350px);
        border-radius: var(--card-radius-pc, 18px);
    }
}

/* 🥷 EFECTO 1: ESTRELLA NINJA (Giro extremo y rápido) */
.effect-ninja {
    animation-timing-function: ease-out; /* Frena de golpe al clavarse */
    animation-duration: 0.6s; /* Es muy rápido y agresivo */
}

    .effect-ninja.card-left {
        animation-name: ninjaInLeft;
    }

    .effect-ninja.card-right {
        animation-name: ninjaInRight;
    }

@keyframes ninjaInLeft {
    /* Viene de fuera, gigante, y dando 3 vueltas completas (-1080deg) */
    0% {
        transform: translate(-150vw, -100px) rotate(-1080deg) scale(1.5);
        opacity: 0;
    }

    100% {
        transform: translate(0, 0) rotate(var(--final-rot)) scale(1);
        opacity: 1;
    }
}

@keyframes ninjaInRight {
    0% {
        transform: translate(150vw, -100px) rotate(1080deg) scale(1.5);
        opacity: 0;
    }

    100% {
        transform: translate(0, 0) rotate(var(--final-rot)) scale(1);
        opacity: 1;
    }
}

/* 🛝 EFECTO 2: COLUMPIO (Suave y con rebote) */
.effect-swing {
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15); /* Efecto muelle/rebote */
    animation-duration: 1.2s; /* Más pausado */
}

    .effect-swing.card-left {
        animation-name: swingInLeft;
    }

    .effect-swing.card-right {
        animation-name: swingInRight;
    }

@keyframes swingInLeft {
    0% {
        transform: translate(-200vw, -100px) rotate(-90deg);
        opacity: 0;
    }

    100% {
        transform: translate(0, 0) rotate(var(--final-rot));
        opacity: 1;
    }
}

@keyframes swingInRight {
    0% {
        transform: translate(200vw, -100px) rotate(90deg);
        opacity: 0;
    }

    100% {
        transform: translate(0, 0) rotate(var(--final-rot));
        opacity: 1;
    }
}

/* =======================================================
   13. SECCIÓN: FICHA TÉCNICA
   ======================================================= */
#tech-specs-section {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin: 10px 0 20px 0;
    font-size: 1.2em;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

.spec-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .spec-item img {
        width: var(--icon-size, 32px);
        height: auto;
    }

/* =======================================================
   14. MÓDULO C: CÓMO SE JUEGA
   ======================================================= */
#how-to-play-section {
    background-color: rgba(255, 255, 255, 0.05); /* Cristal oscuro transparente */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px 30px;
    margin: 20px 0;
    text-align: center;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
}

    #how-to-play-section h2 {
        color: #FFD700;
        margin-top: 0;
        font-size: 1.6em;
        text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    }

.rules-intro {
    font-size: 1.1em;
    margin-bottom: 25px;
    color: #e0e0e0;
}

#how-to-play-section h3 {
    font-size: 1.4em;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
    padding-bottom: 10px;
    display: inline-block;
}

.rules-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Columnas iguales para PC */
    gap: 20px;
    text-align: left;
}

.rule-box {
    background-color: rgba(0, 0, 0, 0.4);
    padding: 20px;
    border-radius: 8px;
    border-top: 3px solid #ff5722;
    transition: transform 0.2s;
}

    .rule-box:hover {
        transform: translateY(-5px);
    }

    .rule-box h4 {
        margin-top: 0;
        color: #FFD700;
        font-size: 1.2em;
        margin-bottom: 10px;
    }

    .rule-box p {
        margin: 0;
        font-size: 0.95em;
        line-height: 1.5;
        color: #d1d1d1;
    }

/* Magia para Móviles */
@media (max-width: 768px) {
    .rules-grid {
        grid-template-columns: 1fr; /* 1 Sola columna para móvil */
    }

    #tech-specs-section {
        flex-direction: column; /* Apila la ficha técnica en móvil si no cabe */
        gap: 10px;
    }
}