/* --- ESTILOS DE BANNERS Y OMNISEND --- */
.banner-cookies-contenedor, .popup-omnisend-contenedor-slidein, .popup-contenedor-exit { font-family: 'Poppins', sans-serif; }

/* Banners Cookies */
.banner-cookies-contenedor { position: fixed; bottom: 0; left: 0; width: 100%; background-color: rgba(242, 240, 226, 0.8); backdrop-filter: blur(4px); border-top: 3px #f2f0e2 solid; color: #1c1c1c; padding: 30px; z-index: 999999; box-sizing: border-box; transform: translateY(100%); transition: transform 0.5s ease-out; }
.banner-cookies-contenedor.visible { transform: translateY(0%); }
.banner-cookies-contenido { display: flex; justify-content: space-between; align-items: center; max-width: 65%; margin: 0 auto; gap: 20px; }
.banner-cookies-texto { margin: 0; font-size: 14px; flex-grow: 1; line-height: 1.8em; }
.banner-cookies-texto a { color: #751d2d; text-decoration: underline; font-weight: bold; }
.banner-cookies-boton { background-color: #751d2d; color: #f2f0e2; border: none; padding: 12px 25px; font-weight: bold; text-transform: uppercase; cursor: pointer; border-radius: 0; flex-shrink: 0; transition: background-color 0.3s ease; }
.banner-cookies-boton:hover { background-color: #bda161; color: #1c1c1c; }
@media (max-width: 767px) { .banner-cookies-contenido { flex-direction: column; text-align: center; max-width: 90%; } .banner-cookies-boton { width: 100%; margin-top: 15px; } }

/* Slide-in */
.popup-omnisend-contenedor-slidein { width: 95%; max-width: 800px; background-color: rgba(246, 245, 236, 0.80); backdrop-filter: blur(4px); border: 3px solid #f2f0e2; position: fixed; z-index: 99999; bottom: 20px; left: 50%; transform: translate(-50%, 150%); opacity: 0; visibility: hidden; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease, visibility 0s linear 0.6s; }
.popup-omnisend-contenedor-slidein.visible { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease; }
.popup-omnisend-contenido { padding: 30px; }
.popup-omnisend-cerrar { position: absolute; top: 10px; right: 15px; background: none; border: none; font-size: 28px; line-height: 1; color: #751d2d; cursor: pointer; padding: 0; }
.popup-omnisend-cerrar:hover { color: #1c1c1c; }

/* Exit Intent */
.popup-contenedor-exit { position: fixed; z-index: 99999; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(117, 29, 45, 0.75); backdrop-filter: blur(5px); display: none; justify-content: center; align-items: center; }
.popup-contenedor-exit.visible { display: flex; }
.popup-contenido-exit { background-color: #f2f0e2; padding: 40px; max-width: 800px; width: 95%; position: relative; }
.popup-cerrar-exit { position: absolute; top: 10px; right: 15px; background: none; border: none; font-size: 30px; line-height: 1; color: #f2f0e2; cursor: pointer; padding: 0; }
.popup-cerrar-exit:hover { color: #1c1c1c; }

/* Omnisend Fixes */
[id^="omnisend-form-"] input[type="text"]:focus::placeholder, [id^="omnisend-form-"] input[type="email"]:focus::placeholder { color: transparent !important; transition: color 0.2s ease-out; }
[id^="omnisend-form-"] button[type="submit"] { transition: background-color 0.3s ease, transform 0.3s ease !important; }
[id^="omnisend-form-"] button[type="submit"]:hover { background-color: #5a1724 !important; transform: scale(1.03); cursor: pointer; }

/* --- QUIZ PALABRA DEL DÍA --- */
.popup-palabra-overlay {
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(28, 28, 28, 0.40); /* Fondo plano semi-transparente */
    backdrop-filter: blur(8px); /* Fondo difuminado */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
    box-sizing: border-box;
}
.popup-palabra-overlay.visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease;
}

.popup-palabra-contenedor-modal {
    width: 95%;
    max-width: 650px; /* Más ancho en PC */
    background-color: #F2F0E3; /* Pergamino plano */
    box-sizing: border-box;
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border: none; /* Quita los bordes de color / contorno exterior */
}
.popup-palabra-overlay.visible .popup-palabra-contenedor-modal {
    transform: scale(1);
}

.popup-palabra-cerrar {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: #F2F0E3; /* Blanco sobre Burdeos */
    cursor: pointer;
    padding: 0;
    z-index: 10;
}
.popup-palabra-cerrar:hover {
    color: #BDBBB1;
}

.popup-palabra-header {
    background-color: #751D2D; /* Burdeos */
    color: #F2F0E3;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 2px solid #BDBBB1; /* Separador suave del manual */
}
.popup-palabra-header.success {
    background-color: #751D2D; /* Burdeos */
    border-bottom: 2px solid #BDBBB1;
}
.popup-palabra-isotipo {
    height: 20px;
    width: auto;
}
.popup-palabra-titulo {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.12em;
    font-family: 'Poppins', sans-serif;
}

.popup-palabra-cuerpo {
    padding: 65px 25px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrado horizontal */
    text-align: center; /* Centrado de texto */
    gap: 20px;
    max-height: 75vh;
    overflow-y: auto;
    box-sizing: border-box;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0px, black 55px, black calc(100% - 55px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0px, black 55px, black calc(100% - 55px), transparent 100%);
    scrollbar-width: thin;
    scrollbar-color: rgba(117, 29, 45, 0.4) rgba(28, 28, 28, 0.05);
}

/* Scrollbar del popup al estilo Chrono */
.popup-palabra-cuerpo::-webkit-scrollbar {
    width: 6px;
}
.popup-palabra-cuerpo::-webkit-scrollbar-track {
    background: rgba(28, 28, 28, 0.05);
    border-radius: 0 !important;
}
.popup-palabra-cuerpo::-webkit-scrollbar-thumb {
    background-color: rgba(117, 29, 45, 0.4);
    border-radius: 0 !important;
}
.popup-palabra-cuerpo::-webkit-scrollbar-thumb:hover {
    background-color: rgba(117, 29, 45, 0.7);
}
.popup-palabra-pista {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #1C1C1C;
    font-weight: 500;
    text-align: center; /* Centrado explícito */
    width: 100%;
}

/* Imagen de pista adaptada y centrada */
.popup-palabra-media-img {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px 0;
    border: none; /* Sin borde de color */
}
.popup-palabra-media-img img {
    max-width: 100%;
    max-height: 260px;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Reproductor de Audio Personalizado */
.popup-palabra-media-audio {
    width: 100%;
    box-sizing: border-box;
}
.popup-palabra-audio-custom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 5px 0;
    background-color: rgba(28, 28, 28, 0.04);
    padding: 10px 15px;
    border: none; /* Sin borde/barra lateral */
}
.popup-palabra-audio-play-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}
.popup-palabra-audio-play-btn:hover {
    transform: scale(1.08);
}
.popup-palabra-audio-play-btn img {
    width: 100%;
    height: 100%;
    display: block;
}
.popup-palabra-audio-label {
    font-size: 12px;
    font-weight: 700;
    color: #751D2D; /* Burdeos */
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
}

.popup-palabra-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 5px;
    width: 100%;
    align-items: center; /* Centrar elementos del formulario */
}
.popup-palabra-input-group {
    display: flex;
    width: 100%;
    max-width: 460px; /* Bounded width on desktop */
    border: 2px solid #BDBBB1; /* Borde suave del manual */
    box-sizing: border-box;
    background-color: #FFFFFF;
}
.popup-palabra-input-group input[type="text"] {
    flex-grow: 1;
    border: none;
    background-color: transparent;
    padding: 12px 16px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #1C1C1C;
    outline: none;
    width: 50%;
}
.popup-palabra-input-group input[type="text"]::placeholder {
    color: #BDBBB1;
}
.popup-palabra-submit-btn {
    background-color: #751D2D;
    color: #F2F0E3;
    border: none; /* Sin borde de color */
    padding: 12px 24px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    font-size: 12px;
    letter-spacing: 0.06em;
    transition: background-color 0.2s, color 0.2s;
    font-family: 'Poppins', sans-serif;
}
.popup-palabra-submit-btn:hover {
    background-color: #1C1C1C;
    color: #F2F0E3;
}
.popup-palabra-error {
    margin: 4px 0 0 0;
    color: #751D2D;
    font-size: 12px;
    font-weight: 600;
}

.popup-palabra-cuerpo.success {
    text-align: center;
    gap: 20px;
    padding: 65px 25px;
}
.popup-palabra-revelada {
    margin: 0 auto;
    font-size: 28px;
    color: #751D2D;
    letter-spacing: 0.08em;
    font-weight: 700;
    border-bottom: 2px solid #BDBBB1; /* Separador continuo suave */
    padding-bottom: 10px;
    font-family: 'Poppins', sans-serif;
    display: inline-block;
}
.popup-palabra-significado {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #1C1C1C;
    text-align: justify;
}
.popup-palabra-acciones {
    display: flex;
    gap: 15px;
    width: 100%;
    margin-top: 10px;
}
.popup-palabra-btn-sabermas {
    flex: 1;
    background-color: #751D2D;
    color: #F2F0E3;
    border: none; /* Sin borde de color */
    padding: 12px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    font-size: 12px;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
    font-family: 'Poppins', sans-serif;
}
.popup-palabra-btn-sabermas:hover {
    background-color: #1C1C1C;
    color: #F2F0E3;
}
.popup-palabra-btn-cerrar-exito {
    flex: 1;
    background-color: #BDBBB1; /* Gris suave */
    color: #1C1C1C;
    border: none; /* Sin borde de color */
    padding: 12px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.2s, color 0.2s;
    font-family: 'Poppins', sans-serif;
}
.popup-palabra-btn-cerrar-exito:hover {
    background-color: #1C1C1C;
    color: #F2F0E3;
}

/* Animación de Sacudida */
@keyframes quizShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}
.popup-palabra-input-group.shake {
    animation: quizShake 0.4s ease-in-out;
}

@media (max-width: 767px) {
    .popup-palabra-contenedor-modal {
        width: 90%; /* Ajuste exacto en móvil */
        margin: 0 auto;
    }
    .popup-palabra-header {
        padding: 12px 16px;
    }
    .popup-palabra-titulo {
        font-size: 11px !important;
        max-width: 78%;
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .popup-palabra-cerrar {
        font-size: 22px !important;
        top: 9px;
        right: 12px;
    }
    .popup-palabra-cuerpo {
        padding: 42px 18px;
        gap: 15px;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0px, black 35px, black calc(100% - 35px), transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0px, black 35px, black calc(100% - 35px), transparent 100%);
    }
    .popup-palabra-revelada {
        font-size: 22px;
    }
    .popup-palabra-pista {
        font-size: 13px;
    }
    /* Quitar borde al escribir respuesta y usar sólo borde inferior en móvil */
    .popup-palabra-input-group {
        border: none !important;
        border-bottom: 2px solid #BDBBB1 !important;
        background-color: transparent !important;
        max-width: 100%;
    }
    .popup-palabra-input-group input[type="text"] {
        padding: 10px 0 !important;
    }
    .popup-palabra-submit-btn {
        padding: 10px 16px !important;
        border: none !important;
    }
}