/* =========================================================
   CONFIGURACIÓN GENERAL
========================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 120px;
}

body {
    font-family: "Times New Roman", Times, serif;
    background: #D9D9D9;
    color: #111111;
    overflow-x: hidden;
}

button,
input,
textarea,
select {
    font-family: inherit;
}

button {
    cursor: pointer;
}

a {
    text-decoration: none;
    color: inherit;
}


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --azul: #3C78D8;
    --azul-oscuro: #2459A8;
    --azul-claro: #6EA8FE;

    --gris: #D9D9D9;

    --blanco: #FFFFFF;
    --negro: #111111;

    --cristal: rgba(255, 255, 255, 0.45);
    --cristal-fuerte: rgba(255, 255, 255, 0.65);

    --borde-cristal: rgba(255, 255, 255, 0.65);

    --sombra:
        0 20px 50px rgba(0, 0, 0, 0.15);

    --radio: 40px;
}


/* =========================================================
   BARRA DE NAVEGACIÓN
========================================================= */

.barra-navegacion {

    position: fixed;

    top: 18px;
    left: 0;

    width: 100%;

    padding: 0 20px;

    z-index: 1000;
}


.barra-cristal {

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

    min-height: 70px;

    margin: 0 auto;

    padding: 10px 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border-radius: 999px;

    background: var(--cristal);

    border:
        1px solid var(--borde-cristal);

    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);

    box-shadow: var(--sombra);
}


/* =========================================================
   LOGO
========================================================= */

.logo {

    font-size: 18px;

    font-weight: bold;

    white-space: nowrap;

    color: var(--negro);
}


/* =========================================================
   CONTENEDOR DE SECCIONES
========================================================= */

.secciones {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    flex: 1;
}


/* =========================================================
   SECCIÓN BASE
   Cada sección puede modificarse individualmente
========================================================= */

.seccion {

    position: relative;

    display: flex;

    align-items: center;
}


/* =========================================================
   BOTONES PRINCIPALES — REGLA BASE
========================================================= */

.seccion-boton {

    border: none;

    outline: none;

    background: transparent;

    padding: 12px 14px;

    border-radius: 999px;

    font-size: 14px;

    font-weight: bold;

    color: #111111;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}


/* =========================================================
   SECCIONES INDEPENDIENTES
========================================================= */

/*
   Estas clases permiten controlar cada sección
   sin modificar las demás.
*/


/* INICIO */

.inicio-boton {

    text-decoration-line: underline;

    text-decoration-thickness: 2px;

    text-underline-offset: 5px;
}


/* DIVIÉRTETE+ */

.seccion-diviertete { }

.boton-diviertete { }


/* VIDEOS */

.seccion-videos { }

.boton-videos { }


/* TEATRO */

.seccion-teatro { }

.boton-teatro { }


/* EN VIVO */

.seccion-envivo { }

.boton-envivo { }


/* MÚSICA */

.seccion-musica { }

.boton-musica { }


/* MÁS */

.seccion-mas { }

.boton-mas { }


/* NOSOTROS */

.seccion-nosotros { }

.boton-nosotros { }


/* =========================================================
   SECCIÓN ACTIVA
   SE MANTIENE LA REGLA ORIGINAL
========================================================= */

.seccion-boton.activo {

    background: var(--azul);

    color: var(--blanco);
}


/* =========================================================
   HOVER
   SE MANTIENE LA REGLA ORIGINAL
========================================================= */

.seccion-boton:hover {

    background: var(--azul);

    color: var(--blanco);
}


/* =========================================================
   SUBMENÚS PRINCIPALES
========================================================= */

.apartados {

    position: absolute;

    top: calc(100% + 12px);

    left: 50%;

    transform:
        translateX(-50%)
        translateY(-5px);

    min-width: 230px;

    padding: 12px;

    display: flex;

    flex-direction: column;

    gap: 8px;

    border-radius: 28px;

    background: var(--azul-oscuro);

    border:
        1px solid rgba(255, 255, 255, 0.35);

    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.25);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease;

    z-index: 1100;
}


/* =========================================================
   PUENTE INVISIBLE DEL SUBMENÚ
========================================================= */

.seccion::after {

    content: "";

    position: absolute;

    top: 100%;

    left: 0;

    width: 100%;

    height: 12px;

    background: transparent;

    z-index: 1099;
}


/* =========================================================
   MOSTRAR SUBMENÚ
========================================================= */

.seccion:hover > .apartados,
.seccion:focus-within > .apartados {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateX(-50%)
        translateY(0);
}


/* =========================================================
   OPCIONES DEL SUBMENÚ
========================================================= */

.apartados a,
.apartado-boton {

    width: 100%;

    display: block;

    padding: 12px 16px;

    border:
        1px solid rgba(255, 255, 255, 0.28);

    outline: none;

    border-radius: 20px;

    background:
        rgba(255, 255, 255, 0.14);

    color: white;

    text-align: center;

    font-size: 14px;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        border-color 0.2s ease;
}


.apartados a:hover,
.apartado-boton:hover {

    background:
        rgba(255, 255, 255, 0.28);

    border-color:
        rgba(255, 255, 255, 0.55);

    transform:
        translateY(-2px);
}


/* =========================================================
   SUBMENÚ ANIDADO
========================================================= */

.submenu-anidado {

    position: relative;

    width: 100%;
}


/* =========================================================
   SUBMENÚ DE SERIES INFANTILES
========================================================= */

.apartados-anidados {

    position: absolute;

    top: 0;

    left: calc(100% + 10px);

    min-width: 220px;

    padding: 12px;

    display: flex;

    flex-direction: column;

    gap: 8px;

    border-radius: 28px;

    background: var(--azul-oscuro);

    border:
        1px solid rgba(255, 255, 255, 0.35);

    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.25);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    z-index: 1200;

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
}


/* =========================================================
   PUENTE DEL SUBMENÚ ANIDADO
========================================================= */

.submenu-anidado::after {

    content: "";

    position: absolute;

    top: 0;

    left: 100%;

    width: 10px;

    height: 100%;

    background: transparent;

    z-index: 1199;
}


/* =========================================================
   MOSTRAR SUBMENÚ ANIDADO
========================================================= */

.submenu-anidado:hover > .apartados-anidados,
.submenu-anidado:focus-within > .apartados-anidados {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* =========================================================
   AURA IA
========================================================= */

.aura-ia {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding: 10px 15px;

    border:
        1px solid rgba(255, 255, 255, 0.65);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.35);

    color: var(--negro);

    flex-shrink: 0;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}


.aura-ia:hover {

    background:
        rgba(255, 255, 255, 0.65);

    transform:
        translateY(-2px);
}


.aura-icono {

    width: 25px;
    height: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--azul);

    color: white;

    font-size: 15px;
}


.aura-texto {

    font-weight: bold;

    font-size: 14px;
}


/* =========================================================
   HERO
========================================================= */

.hero {

    min-height: 760px;

    padding:
        130px 20px
        70px;

    display: flex;

    align-items: center;

    justify-content: center;
}


.hero-cristal {

    width: 100%;

    max-width: 1350px;

    min-height: 560px;

    border-radius: 45px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #3C78D8,
            #2459A8 55%,
            #163A70
        );

    box-shadow: var(--sombra);
}


.hero-imagen {

    position: relative;

    min-height: 560px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background-color: #2459A8;

    background-image:
        linear-gradient(
            rgba(20, 50, 90, 0.25),
            rgba(20, 50, 90, 0.50)
        ),
        url("portada.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;
}


/* =========================================================
   DECORACIONES HERO
========================================================= */

.hero-imagen::before {

    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.10);

    top: -120px;

    right: -80px;
}


.hero-imagen::after {

    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.08);

    bottom: -100px;

    left: -80px;
}


/* =========================================================
   HERO OVERLAY
========================================================= */

.hero-overlay {

    position: relative;

    z-index: 2;

    width: min(900px, 90%);

    text-align: center;

    color: white;

    animation:
        aparecerHero 1s ease;
}


@keyframes aparecerHero {

    from {

        opacity: 0;

        transform:
            translateY(25px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}


.hero-etiqueta {

    display: inline-block;

    padding: 8px 16px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.20);

    border:
        1px solid rgba(255, 255, 255, 0.35);

    font-size: 13px;

    margin-bottom: 20px;
}


.hero-titulo {

    font-size:
        clamp(40px, 6vw, 78px);

    line-height: 1;

    margin-bottom: 25px;
}


.hero-descripcion {

    max-width: 720px;

    margin:
        0 auto 30px;

    font-size: 19px;

    line-height: 1.5;
}


/* =========================================================
   BOTONES HERO
========================================================= */

.hero-botones {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;
}


.boton-principal,
.boton-secundario {

    border: none;

    padding: 14px 25px;

    border-radius: 999px;

    font-size: 16px;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}


.boton-principal {

    background: white;

    color: var(--azul-oscuro);
}


.boton-secundario {

    background:
        rgba(255, 255, 255, 0.18);

    border:
        1px solid rgba(255, 255, 255, 0.45);

    color: white;
}


.boton-principal:hover,
.boton-secundario:hover {

    transform:
        translateY(-3px);
}


/* =========================================================
   CARRUSEL
========================================================= */

.seccion-carrusel {

    padding: 80px 20px;

    background:
        linear-gradient(
            180deg,
            #D9D9D9,
            #EEEEEE
        );
}


.titulo-seccion {

    text-align: center;

    margin-bottom: 25px;
}


.titulo-seccion h2 {

    font-size: 32px;

    margin-bottom: 8px;
}


.titulo-seccion p {

    font-size: 28px;

    opacity: 0.75;
}


/* =========================================================
   INDICADORES
========================================================= */

.indicadores {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    margin-bottom: 25px;
}


.indicador {

    width: 10px;
    height: 10px;

    border: none;

    border-radius: 50%;

    background:
        rgba(60, 120, 216, 0.35);

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}


.indicador.activo {

    background:
        var(--azul);

    transform:
        scale(1.4);
}


/* =========================================================
   CONTENEDOR CARRUSEL
========================================================= */

.contenedor-carrusel {
    position: relative;
    width: 100%;
    max-width: 1300px;
    margin: auto;
    padding: 0 65px;
    box-sizing: border-box;
}


/* =====================================================
   CARRUSEL
===================================================== */

.carrusel {
    display: flex;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.carrusel::-webkit-scrollbar {
    display: none;
}


/* =====================================================
   TARJETA
===================================================== */

.tarjeta {
    flex: 0 0 calc(100% - 50px);
    min-width: calc(100% - 50px);

    margin: 0 25px;
    padding: 10px;

    box-sizing: border-box;
    scroll-snap-align: center;
}


/* =====================================================
   POSTER
===================================================== */

.poster {
    position: relative;

    min-height: 500px;

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    border-radius: 40px;

    background-color: #2459A8;

    box-shadow: none;

    transition:
        transform 0.25s ease,
        outline 0.25s ease;
}


/* =====================================================
   EFECTO HOVER — SOLO ORDENADOR
===================================================== */

@media (min-width: 901px) {

    .poster:hover {

        outline: 4px solid #3C78D8;

        outline-offset: 5px;

        transform: scale(1.02);

        z-index: 5;

    }

}




/* =========================================================
   POSTERS
========================================================= */

.poster-uno {

    background-image: url("colegio-nova/colegio-nova.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;
}


/* Redes Sociales - Ordenador */
.poster-dos {
    background-image: url("redes/redes-sociales-2.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}


/* Redes Sociales - Móvil */
@media (max-width: 600px) {
    .poster-dos {
        background-image: url("redes/redes-sociales.png");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
}


.poster-tres {

    background-image: url("betala-neta.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;
}


.poster-cuatro {

    background-image: url("lara/banner.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;
}



.poster-cinco {

    background-image: url("primer/portada.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;
}


.poster-seis {

    background-image: url("relatos/portada.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;
}


.poster-siete {

    background-image: url("reacciones/reaccionando-a.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;
}


.poster-ocho {

    background-image: url("redes/icono.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;
}


.poster-nueve {

    background-image: url("musica.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;
}


.poster-diez {

    background-image: url("icono.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;
}



/* =========================================================
   DECORACIONES POSTER
========================================================= */

.poster::before {

    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.08);

    top: -150px;

    right: -100px;
}


.poster::after {

    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.06);

    bottom: -150px;

    left: -100px;
}




/* ==========================================
   EFECTO HOVER DEL CARRUSEL - ORDENADOR
   ========================================== */

@media (min-width: 901px) {

    .contenedor-carrusel {
        padding: 12px 25px;
        box-sizing: border-box;
    }

    .carrusel {
        overflow-x: auto;
        overflow-y: visible;
        padding: 10px 5px;
        box-sizing: border-box;
    }

    .tarjeta {
        overflow: visible;
    }

    .poster {
        position: relative;
        transition:
            outline 0.2s ease,
            transform 0.2s ease;
        z-index: 1;
    }

    .poster:hover {
        outline: 4px solid #3C78D8;
        outline-offset: 5px;
        transform: scale(1.02);
        z-index: 10;
    }

}


/* =========================================================
   FLECHAS
========================================================= */

.flecha-carrusel {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;

    width: 48px;
    height: 48px;

    border: none;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.85);
    color: #3C78D8;

    font-size: 35px;
    line-height: 1;

    cursor: pointer;

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

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.flecha-carrusel:hover {
    transform: translateY(-50%) scale(1.08);
    background: white;
}

.flecha-izquierda {
    left: 5px;
}

.flecha-derecha {
    right: 5px;
}



/* =========================================================
   SECCIONES TEMPORALMENTE OCULTAS
========================================================= */

.oculto-temporal {
    display: none !important;
}


/* =========================================================
   DIVIÉRTETE+ 2.3 — VENTANA DE NOVEDADES
========================================================= */

.modal-version-23 {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

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

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}


/* =========================================================
   VENTANA ABIERTA
========================================================= */

.modal-version-23.activa {

    opacity: 1;

    visibility: visible;
}


/* =========================================================
   CONTENEDOR
========================================================= */

.modal-version-23-contenido {

    position: relative;

    width: min(700px, 100%);

    max-height: 88vh;

    overflow-y: auto;

    padding: 35px;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.88),
            rgba(245,248,255,0.76)
        );

    border: 1px solid rgba(255,255,255,0.8);

    box-shadow:
        0 30px 80px rgba(0,0,0,0.25);

    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);

    transform: translateY(25px) scale(0.97);

    transition:
        transform 0.35s ease;
}


/* =========================================================
   ANIMACIÓN AL ABRIR
========================================================= */

.modal-version-23.activa
.modal-version-23-contenido {

    transform: translateY(0) scale(1);
}


/* =========================================================
   BOTÓN CERRAR
========================================================= */

.modal-version-23-cerrar {

    position: absolute;

    top: 15px;
    right: 15px;

    width: 40px;
    height: 40px;

    border: none;

    border-radius: 50%;

    background: rgba(255,255,255,0.55);

    color: #2459a8;

    font-size: 27px;

    line-height: 1;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}


.modal-version-23-cerrar:hover {

    transform: scale(1.08);

    background: rgba(255,255,255,0.85);
}


/* =========================================================
   ENCABEZADO
========================================================= */

.modal-version-23-encabezado {

    text-align: center;

    margin-bottom: 30px;

    padding-right: 30px;
}


.modal-version-23-etiqueta {

    display: inline-block;

    margin-bottom: 10px;

    padding: 6px 13px;

    border-radius: 50px;

    background: rgba(60,120,216,0.12);

    color: #2459a8;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 1.5px;
}


.modal-version-23-encabezado h2 {

    margin: 0 0 8px;

    color: #183b70;

    font-size: 34px;
}


.modal-version-23-encabezado p {

    margin: 0;

    color: #555;

    font-size: 16px;
}


/* =========================================================
   BLOQUES
========================================================= */

.version-23-bloque {

    position: relative;

    margin-bottom: 18px;

    padding: 22px;

    border-radius: 20px;

    background: rgba(255,255,255,0.52);

    border: 1px solid rgba(255,255,255,0.75);
}


.version-23-numero {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 32px;
    height: 32px;

    margin-bottom: 10px;

    border-radius: 10px;

    background: #3c78d8;

    color: white;

    font-size: 13px;

    font-weight: bold;
}


.version-23-bloque h3 {

    margin: 0 0 10px;

    color: #183b70;

    font-size: 21px;
}


.version-23-bloque p {

    margin: 0 0 12px;

    color: #555;

    line-height: 1.65;

    font-size: 15px;
}


.version-23-bloque p:last-child {

    margin-bottom: 0;
}


/* =========================================================
   ANTES → AHORA
========================================================= */

.version-23-cambio {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    margin: 20px 0;

}


.version-23-anterior,
.version-23-nuevo {

    flex: 1;

    min-width: 0;

    padding: 16px;

    border-radius: 16px;

    text-align: center;

}


.version-23-anterior {

    background: rgba(0,0,0,0.05);
}


.version-23-nuevo {

    background: rgba(60,120,216,0.12);

    border: 1px solid rgba(60,120,216,0.18);
}


.version-23-anterior small,
.version-23-nuevo small {

    display: block;

    margin-bottom: 6px;

    font-size: 10px;

    letter-spacing: 1px;

    font-weight: bold;
}


.version-23-anterior small {

    color: #777;
}


.version-23-nuevo small {

    color: #2459a8;
}


.version-23-anterior strong,
.version-23-nuevo strong {

    display: block;

    font-size: 14px;
}


.version-23-flecha {

    color: #3c78d8;

    font-size: 24px;

    font-weight: bold;
}


/* =========================================================
   BLOQUE FINAL
========================================================= */

.version-23-final {

    margin-top: 10px;

    padding: 24px;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(60,120,216,0.14),
            rgba(110,168,254,0.08)
        );

    text-align: center;
}


.version-23-final h3 {

    margin: 0 0 8px;

    color: #183b70;

    font-size: 20px;
}


.version-23-final p {

    margin: 0;

    color: #555;

    line-height: 1.6;
}


/* =========================================================
   BOTÓN ENTENDIDO
========================================================= */

.modal-version-23-boton {

    display: block;

    width: 100%;

    margin-top: 22px;

    padding: 14px 20px;

    border: none;

    border-radius: 15px;

    background: #3c78d8;

    color: white;

    font-size: 15px;

    font-weight: bold;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}


.modal-version-23-boton:hover {

    transform: translateY(-2px);

    opacity: 0.9;
}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 600px) {

    .modal-version-23 {

        padding: 12px;
    }


    .modal-version-23-contenido {

        padding: 25px 18px;

        border-radius: 23px;

        max-height: 92vh;
    }


    .modal-version-23-encabezado h2 {

        font-size: 28px;
    }


    .version-23-cambio {

        gap: 8px;
    }


    .version-23-anterior,
    .version-23-nuevo {

        padding: 13px 8px;
    }


    .version-23-flecha {

        font-size: 18px;
    }

}


/* =========================================================
   PLAYLISTS DE MÚSICA
========================================================= */

.musica-playlists {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        20px;

    margin-top:
        25px;
}


.musica-playlist {

    padding:
        20px;

    border-radius:
        30px;

    background:
        rgba(255, 255, 255, 0.38);

    border:
        1px solid rgba(255, 255, 255, 0.60);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.10);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.musica-playlist:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 18px 35px rgba(0, 0, 0, 0.15);
}


.musica-playlist-imagen {

    width:
        100%;

    aspect-ratio:
        1 / 1;

    overflow:
        hidden;

    border-radius:
        22px;

    margin-bottom:
        15px;
}


.musica-playlist-imagen img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    display:
        block;
}


.musica-playlist h4 {

    font-size:
        24px;

    color:
        var(--azul);

    margin-bottom:
        5px;
}


.musica-playlist p {

    color:
        #666666;

    font-size:
        16px;
}


/* =========================================================
   BIENVENIDA
========================================================= */

.seccion-bienvenida {

    padding: 80px 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 30px;
}


.bienvenida-tarjeta {

    width: 100%;

    max-width: 1200px;

    border-radius: 40px;

    overflow: hidden;

    box-shadow:
        var(--sombra);
}


.bienvenida-imagen {

    position: relative;

    min-height: 480px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background-color:
        #3C78D8;

    background-image:
        linear-gradient(
            rgba(20, 50, 90, 0.25),
            rgba(20, 50, 90, 0.45)
        ),
        url("portada.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;
}


.bienvenida-contenido {

    position: relative;

    z-index: 2;

    width: min(900px, 90%);

    padding: 60px;

    text-align: center;

    color: white;

    border-radius: 35px;

    background:
        rgba(255, 255, 255, 0.15);

    border:
        1px solid rgba(255, 255, 255, 0.30);

    backdrop-filter: blur(15px);

    -webkit-backdrop-filter: blur(15px);
}


.bienvenida-titulo {

    font-size: 45px;

    margin-bottom: 20px;
}


.bienvenida-info {

    font-size: 19px;

    line-height: 1.6;
}


/* =========================================================
   ESTADO COMPACTO
========================================================= */

.bienvenida-tarjeta.compacta .bienvenida-info {

    display: none;
}


.bienvenida-tarjeta.compacta .bienvenida-titulo {

    transform:
        translateY(5px);
}


/* =========================================================
   BOTÓN ACCEDER
========================================================= */

.boton-acceder {

    border: none;

    padding: 14px 30px;

    border-radius: 999px;

    background:
        var(--azul);

    color: white;

    font-size: 17px;

    box-shadow:
        0 10px 25px rgba(60, 120, 216, 0.25);

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}


.boton-acceder:hover {

    background:
        var(--azul-oscuro);

    transform:
        translateY(-3px);
}


/* =========================================================
   SEGUNDA TARJETA
========================================================= */

.segunda-tarjeta-contenedor {

    width: 100%;

    max-width: 1200px;
}


.segunda-tarjeta {

    width: 100%;

    min-height: 420px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 50px;

    text-align: center;

    border-radius: 40px;

    background:
        linear-gradient(
            135deg,
            #3C78D8,
            #2459A8
        );

    color: white;

    box-shadow:
        var(--sombra);
}


.segunda-tarjeta-contenido {

    width: 100%;

    max-width: 800px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;
}


.segunda-tarjeta-contenido h2 {

    font-size: 64px;

    margin: 15px 0;
}


.segunda-tarjeta-contenido p {

    max-width: 700px;

    font-size: 28px;

    line-height: 1.6;

    margin-bottom: 30px;
}


/* =========================================================
   REDES OFICIALES
========================================================= */

.redes-oficiales {

    width:
        min(1200px, calc(100% - 40px));

    margin: 0 auto;

    padding: 80px 0;
}


.redes-tarjeta {

    width: 100%;

    min-height: 420px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 60px 40px;

    border-radius: 40px;

    background:
        #3C78D8;

    color: #D9D9D9;

    box-shadow:
        var(--sombra);

    overflow: hidden;

    position: relative;
}


.redes-tarjeta::before {

    content: "";

    position: absolute;

    width: 350px;

    height: 350px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.10);

    top: -180px;

    right: -100px;
}


.redes-tarjeta::after {

    content: "";

    position: absolute;

    width: 280px;

    height: 280px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.08);

    bottom: -150px;

    left: -100px;
}


.redes-contenido {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 900px;

    text-align: center;
}


.redes-contenido h2 {

    font-size: 50px;

    margin-bottom: 18px;

    color: #D9D9D9;
}


.redes-contenido p {

    max-width: 700px;

    margin: 0 auto;

    font-size: 29px;

    line-height: 1.5;

    color: #D9D9D9;
}


.redes-iconos {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 22px;

    margin-top: 40px;
}


.red-social {

    width: 75px;

    height: 75px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.18);

    border:
        1px solid rgba(255, 255, 255, 0.45);

    backdrop-filter: blur(15px);

    -webkit-backdrop-filter: blur(15px);

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


.red-social img {

    width: 42px;

    height: 42px;

    object-fit: contain;

    display: block;
}


.red-social:hover {

    background:
        rgba(255, 255, 255, 0.35);

    transform:
        translateY(-5px)
        scale(1.08);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.18);
}


/* =========================================================
   INFORMACIÓN GENERAL
========================================================= */

.informacion-general {

    width:
        min(900px, calc(100% - 40px));

    margin: 0 auto;

    padding: 80px 0;
}


.informacion-general > h2 {

    text-align: center;

    font-size: 38px;

    margin-bottom: 40px;

    color:
        var(--azul);
}


.informacion-general h4 {

    text-align: center;

    font-size: 38px;

    margin-bottom: 35px;
}


/* =========================================================
   TARJETA DE INFORMACIÓN
========================================================= */

.informacion-item {

    width: 100%;

    min-height: 250px;

    padding: 40px 35px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    border-radius: 40px;

    background:
        #D9D9D9;

    border:
        1px solid rgba(255, 255, 255, 0.65);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.12);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.informacion-item h3 {

    color:
        var(--azul);

    font-size: 45px;

    margin-bottom: 15px;
}


.informacion-item p {

    max-width: 850px;

    color:
        #555555;

    font-size: 20px;

    line-height: 1.5;
}


.informacion-item:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.16);
}


/* =========================================================
   BOTONES INFORMACIÓN
========================================================= */

.boton-informacion {

    margin-top: 18px;

    padding: 11px 24px;

    border: none;

    border-radius: 999px;

    background:
        var(--azul);

    color: white;

    font-size: 16px;

    font-weight: bold;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


.boton-informacion:hover {

    background:
        var(--azul-oscuro);

    transform:
        translateY(-3px);
}


.informacion-general a {

    display: block;

    padding: 18px 10px;

    color:
        var(--azul-oscuro);

    font-size: 21px;

    font-weight: bold;

    text-align: center;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


.informacion-general a:hover {

    color:
        var(--azul);

    transform:
        translateX(5px);
}


/* =========================================================
   SEPARADOR
========================================================= */

.separador-linea {

    width: 100%;

    height: 50px;

    margin: 25px 0;

    border-radius: 999px;

    background:
        rgba(60, 120, 216, 0.12);

    border:
        1px solid rgba(255, 255, 255, 0.45);

    backdrop-filter: blur(15px);

    -webkit-backdrop-filter: blur(15px);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.06);
}


/* =========================================================
   ACTUALIZACIÓN
========================================================= */

.actualizacion {

    padding: 30px 20px;

    text-align: center;

    font-size: 16px;
}


.actualizacion strong {

    color:
        var(--azul-oscuro);
}


/* =========================================================
   BOTÓN VOLVER
========================================================= */

.contenedor-volver {

    padding:
        30px 20px 70px;

    display: flex;

    justify-content: center;
}


.boton-volver {

    border:
        1px solid rgba(255, 255, 255, 0.65);

    padding:
        13px 25px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.45);

    backdrop-filter: blur(15px);

    color:
        var(--azul-oscuro);

    font-size: 16px;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


.boton-volver:hover {

    background:
        rgba(255, 255, 255, 0.75);

    transform:
        translateY(-3px);
}


/* =========================================================
   FOOTER
========================================================= */

footer {

    padding:
        45px 20px;

    text-align: center;

    background:
        var(--azul);

    color: white;

    line-height: 1.8;
}


footer p {

    margin-bottom: 5px;
}


footer small {

    display: block;

    margin-top: 10px;

    color:
        #EEFF00;

    font-size: 14px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1250px) {

    .logo {

        font-size: 16px;
    }


    .seccion-boton {

        padding:
            11px 9px;

        font-size: 13px;
    }


    .aura-texto {

        display: none;
    }


    .aura-ia {

        padding: 9px;
    }
}


/* =========================================================
   TABLET / MENÚ COMPACTO
========================================================= */

@media (max-width: 900px) {

    .barra-navegacion {

        top: 10px;

        padding:
            0 10px;
    }


    .barra-cristal {

        min-height: 65px;

        padding:
            8px 12px;

        gap: 10px;

        overflow: visible;
    }

  
    /* =========================================================
   MÓVIL — BLOQUEAR SCROLL HORIZONTAL DE LA PÁGINA
========================================================= */

@media (max-width: 900px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

}


    /* =====================================================
       OCULTAR LOGO
    ===================================================== */

    .logo {

        display: none;
    }


    /* =====================================================
       NAVEGACIÓN HORIZONTAL
    ===================================================== */

    .secciones {

        flex: 1;

        min-width: 0;

        justify-content: flex-start;

        overflow-x: auto;

        scrollbar-width: none;

        gap: 3px;
    }


    .secciones::-webkit-scrollbar {

        display: none;
    }


    .seccion {

        flex-shrink: 0;
    }


    .seccion-boton {

        white-space: nowrap;

        padding:
            10px 11px;

        font-size: 12px;
    }


    /* =====================================================
       DESACTIVAR HOVER EN MÓVIL
    ===================================================== */

    .seccion::after {

        display: none;
    }


    .seccion:hover > .apartados {

        opacity: 0;

        visibility: hidden;

        pointer-events: none;
    }


    .seccion.open > .apartados {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;
    }


    /* =====================================================
       SUBMENÚ PRINCIPAL MÓVIL
    ===================================================== */

    .apartados {

        position: fixed;

        top: 84px;

        left: 50%;

        transform:
            translateX(-50%);

        width:
            min(330px, calc(100vw - 25px));

        max-height: 70vh;

        overflow-y: auto;

        padding: 12px;

        border-radius: 28px;

        background:
            var(--azul-oscuro);

        border:
            1px solid rgba(255, 255, 255, 0.35);

        box-shadow:
            0 20px 45px rgba(0, 0, 0, 0.25);
    }


    .seccion.open > .apartados {

        transform:
            translateX(-50%);
    }


    /* =====================================================
       SUBMENÚ ANIDADO EN MÓVIL
    ===================================================== */

    .submenu-anidado {

        position: relative;
    }


    .apartados-anidados {

        position: static;

        width: 100%;

        min-width: 0;

        margin-top: 7px;

        padding: 8px;

        display: none;

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        box-shadow: none;

        border-radius: 20px;

        background:
            rgba(10, 45, 100, 0.35);

        border:
            1px solid rgba(255, 255, 255, 0.25);
    }


    .submenu-anidado.open > .apartados-anidados {

        display: flex;
    }


    .submenu-anidado::after {

        display: none;
    }


    /* =====================================================
       AURA
    ===================================================== */

    .aura-ia {

        flex-shrink: 0;
    }


    /* =====================================================
       HERO
    ===================================================== */

    .hero {

        min-height: auto;

        padding-top: 105px;
    }


    .hero-cristal,
    .hero-imagen {

        min-height: 520px;
    }


    .hero-titulo {

        font-size:
            clamp(36px, 8vw, 60px);
    }


    /* =====================================================
       CARRUSEL
    ===================================================== */

    .poster {

        min-height: 520px;
    }


    .contenido-poster {

        padding:
            50px 35px;
    }


    .contenido-poster h3 {

        font-size: 40px;
    }


    .flecha-izquierda {

        left: 15px;
    }


    .flecha-derecha {

        right: 15px;
    }


    /* =====================================================
       MÚSICA
    ===================================================== */

    .musica-tarjeta {

        flex-direction:
            column;

        text-align:
            center;

        padding:
            30px;

        gap:
            30px;
    }


    .musica-informacion {

        align-items:
            center;
    }


    .musica-informacion p {

        font-size:
            18px;
    }


    .musica-portada {

        width:
            260px;

        height:
            260px;

        flex-basis:
            260px;
    }


    .musica-playlists {

        grid-template-columns:
            repeat(2, 1fr);
    }
}


/* =========================================================
   MÓVILES
========================================================= */

@media (max-width: 600px) {

    /* =====================================================
       BARRA
    ===================================================== */

    .barra-navegacion {

        top: 7px;

        padding:
            0 7px;
    }


    .barra-cristal {

        min-height: 60px;

        padding:
            7px 10px;

        gap: 5px;
    }


    /* =====================================================
       SECCIONES
    ===================================================== */

    .secciones {

        flex: 1;

        min-width: 0;

        overflow-x: auto;
    }


    .seccion-boton {

        padding:
            9px 9px;

        font-size:
            11px;

        white-space:
            nowrap;
    }


    /* =====================================================
       AURA
    ===================================================== */

    .aura-ia {

        width:
            35px;

        height:
            35px;

        padding:
            0;
    }


    .aura-icono {

        width:
            25px;

        height:
            25px;
    }


    /* =====================================================
       SUBMENÚ
    ===================================================== */

    .apartados {

        top:
            75px;

        width:
            min(330px, calc(100vw - 20px));

        max-height:
            72vh;

        padding:
            10px;

        border-radius:
            24px;
    }


    .apartados a,
    .apartado-boton {

        padding:
            11px 13px;

        font-size:
            13px;
    }


    /* =====================================================
       HERO
    ===================================================== */

    .hero {

        padding:
            90px 12px 45px;
    }


    .hero-cristal {

        min-height:
            500px;

        border-radius:
            30px;
    }


    .hero-imagen {

        min-height:
            500px;
    }


    .hero-overlay {

        width:
            90%;
    }


    .hero-etiqueta {

        font-size:
            10px;

        padding:
            7px 12px;
    }


    .hero-titulo {

        font-size:
            38px;

        line-height:
            1.05;
    }


    .hero-descripcion {

        font-size:
            16px;
    }


    .hero-botones {

        flex-direction:
            column;

        width:
            100%;
    }


    .boton-principal,
    .boton-secundario {

        width:
            100%;

        max-width:
            280px;
    }


    /* =====================================================
   CARRUSEL — MÓVIL
===================================================== */

.seccion-carrusel {

    padding:
        40px 12px;
}


.titulo-seccion h2 {

    font-size:
        45px;
}


.titulo-seccion p {

    font-size:
        25px;
}


/* =====================================================
   POSTER
===================================================== */

.poster {

    min-height:
        250px;

    border-radius:
        35px;

    display:
        flex;

    align-items:
        flex-end;
}


/* =====================================================
   CARRUSEL MÁS ANCHO EN MÓVIL
===================================================== */

.contenedor-carrusel {
    width: 100%;
    padding: 0 5px;
}


/* Tarjeta más ancha */

.tarjeta {
    flex: 0 0 calc(100% - 20px);
    min-width: calc(100% - 20px);
    margin: 0 10px;
    padding: 5px;
}


/* =====================================================
   FLECHAS
===================================================== */

.flecha-carrusel {

    width:
        40px;

    height:
        40px;

    font-size:
        15px;
}


.flecha-izquierda {

    left:
        12px;
}


.flecha-derecha {

    right:
        12px;
}


    /* =====================================================
       MÚSICA
    ===================================================== */

    .seccion-musica {

        padding:
            55px 12px;
    }


    .musica-titulo {

        margin-bottom:
            25px;
    }


    .musica-titulo h2 {

        font-size:
            35px;
    }


    .musica-titulo p {

        font-size:
            16px;
    }


    .musica-tarjeta {

        min-height:
            auto;

        padding:
            22px;

        border-radius:
            30px;
    }


    .musica-portada {

        width:
            210px;

        height:
            210px;

        flex-basis:
            210px;

        border-radius:
            25px;
    }


    .musica-informacion h3 {

        font-size:
            38px;
    }


    .musica-informacion p {

        font-size:
            16px;
    }


    .boton-musica {

        width:
            100%;

        max-width:
            280px;
    }


    .musica-playlists {

        grid-template-columns:
            1fr;

        gap:
            15px;
    }


    .musica-playlist {

        padding:
            15px;

        border-radius:
            25px;
    }


    .musica-playlist-imagen {

        border-radius:
            20px;
    }


    .musica-playlist h4 {

        font-size:
            21px;
    }


    .musica-playlist p {

        font-size:
            15px;
    }


    /* =====================================================
       BIENVENIDA
    ===================================================== */

    .seccion-bienvenida {

        padding:
            55px 12px;
    }


    .bienvenida-tarjeta {

        border-radius:
            30px;
    }


    .bienvenida-imagen {

        min-height:
            430px;

        border-radius:
            30px;
    }


    .bienvenida-contenido {

        width:
            88%;

        padding:
            35px 22px;

        border-radius:
            25px;
    }


    .bienvenida-titulo {

        font-size:
            22px;
    }


    .bienvenida-info {

        font-size:
            16px;
    }


    /* =====================================================
       SEGUNDA TARJETA
    ===================================================== */

    .segunda-tarjeta {

        min-height:
            380px;

        border-radius:
            30px;

        padding:
            35px 22px;
    }


    .segunda-tarjeta-contenido h2 {

        font-size:
            32px;
    }


    .segunda-tarjeta-contenido p {

        font-size:
            18px;
    }


    /* =====================================================
       REDES
    ===================================================== */

    .redes-oficiales {

        width:
            calc(100% - 24px);

        padding:
            55px 0;
    }


    .redes-tarjeta {

        min-height:
            390px;

        padding:
            45px 20px;

        border-radius:
            30px;
    }


    .redes-contenido h2 {

        font-size:
            35px;

        margin-bottom:
            15px;

        color:
            #D9D9D9 !important;
    }


    .redes-contenido p {

        font-size:
            16px;
    }


    .redes-iconos {

        gap:
            14px;

        margin-top:
            30px;
    }


    .red-social {

        width:
            60px;

        height:
            60px;
    }


    .red-social img {

        width:
            34px;

        height:
            34px;
    }


    /* =====================================================
       INFORMACIÓN
    ===================================================== */

    .informacion-general {

        width:
            calc(100% - 24px);

        padding:
            55px 0;
    }


    .informacion-general > h2 {

        font-size:
            30px;
    }


    .informacion-item {

        min-height:
            220px;

        padding:
            30px 22px;

        border-radius:
            30px;
    }


    .informacion-item h3 {

        font-size:
            25px;
    }


    .informacion-item p {

        font-size:
            16px;
    }


    .informacion-general a {

        font-size:
            18px;
    }


    /* =====================================================
       FOOTER
    ===================================================== */

    footer {

        padding:
            35px 15px;

        font-size:
            14px;
    }
}