* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    max-width: 99%;
}

html {
    scroll-behavior: smooth;
}

body {

    background: #faf7ff;
    color: #333;
    overflow-x: hidden;

}


:root {

    --morado: #7b2cbf;
    --morado-claro: #c77dff;
    --lila: #e9d8fd;
    --azul-francia: #1b4db1;
    --rojo-francia: #ed2939;
    --blanco: #ffffff;
    --gris: #666;

    --sombra:
        0 10px 30px rgba(123, 44, 191, .15);

}



header {

    width: 100%;
    height: 95px;

    background: white;

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

    padding: 0 8%;

    position: fixed;
    top: 0;
    left: 0;

    z-index: 1000;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, .08);

}



/* LOGO */


.logo {

    display: flex;
    align-items: center;
    gap: 15px;

}


.logo img {

    width: 70px;
    height: 70px;

    object-fit: contain;

}


.logo h2 {

    color: var(--morado);

    font-size: 20px;

    font-weight: 700;

}


.logo span {

    font-size: 13px;

    color: #777;

}




/* MENU */


nav ul {

    display: flex;

    list-style: none;

    gap: 30px;

}


nav ul li a {

    text-decoration: none;

    color: #444;

    font-weight: 500;

    transition: .3s;

}



nav ul li a:hover {

    color: var(--morado);

}




.hero {

    min-height: 100vh;

    padding: 150px 8% 80px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    position: relative;

    overflow: hidden;

}


.hero::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    background:
        var(--lila);

    border-radius: 50%;

    right: -180px;
    top: 120px;

    z-index: -1;

}


.hero h1 {

    font-family: Georgia, "Times New Roman", serif;

    font-style: italic;

}

.hero h1 span {

    font-family: Georgia, "Times New Roman", serif;

    font-style: italic;

}

.hero-texto {

    width: 55%;

}


.etiqueta {

    background:
        var(--lila);

    color:
        var(--morado);

    padding: 10px 20px;

    border-radius: 50px;

    font-weight: 600;

    display: inline-block;

    margin-bottom: 20px;

}



.hero h1 {

    font-size: 55px;

    line-height: 1.15;

    color: #333;

    margin-bottom: 25px;

}


.hero h1 span {

    color: var(--morado);

}



.hero p {

    font-size: 18px;

    color: #666;

    line-height: 1.8;

    max-width: 600px;

    margin-bottom: 35px;

}



.boton {


    display: inline-block;

    padding: 15px 35px;


    background:

        linear-gradient(135deg,
            #7b2cbf,
            #c77dff);


    color: white;


    border-radius: 50px;


    text-decoration: none;


    font-weight: 600;


    box-shadow: var(--sombra);


    transition: .3s;


}


.boton:hover {

    transform: translateY(-5px);

}




.hero-imagen {

    width: 40%;

    display: flex;

    justify-content: center;

}



.hero-imagen img {

    width: 380px;

    animation: flotar 4s infinite ease-in-out;

}



@keyframes flotar {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }

}



.resumen {

    padding: 100px 8%;

    text-align: center;

}



.resumen h2 {

    font-size: 40px;

    color: var(--morado);

}



.subtitulo {

    color: #666;

    margin: 15px auto 50px;

}



.cards {


    display: grid;


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


    gap: 30px;


}



.card {

    background: white;

    padding: 35px 25px;

    border-radius: 25px;

    box-shadow: var(--sombra);

    transition: .3s;

}



.card:hover {

    transform: translateY(-10px);

}



.icono {

    width: 75px;

    height: 75px;

    background: var(--lila);

    border-radius: 50%;


    display: flex;

    justify-content: center;

    align-items: center;


    margin: auto;

    font-size: 35px;


}



.card h3 {

    margin: 20px 0 10px;

    color: var(--morado);

}



.card p {

    color: #666;

    line-height: 1.6;

    margin-bottom: 20px;

}



.card a {

    text-decoration: none;

    color: white;

    background: var(--morado);

    padding: 10px 20px;

    border-radius: 30px;

    font-size: 14px;

    transition: .3s;

}



.card a:hover {

    background: #5a189a;

}







.galeria {

    padding: 100px 8%;

    background: #f3e8ff;

    text-align: center;

}



.galeria h2 {

    font-size: 40px;

    color: var(--morado);

}



.galeria p {

    color: #666;

    margin: 15px 0 40px;

}



.galeria-grid {


    display: grid;


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


    gap: 25px;


}



.galeria-grid img {


    width: 100%;

    height: 250px;


    object-fit: cover;


    border-radius: 25px;


    box-shadow: var(--sombra);


    transition: .4s;


}



.galeria-grid img:hover {

    transform: scale(1.05);

}





.proyecto {

    padding: 100px 8%;

    display: flex;

}


.contenedor {

    width: 100%;

    display: flex;

    gap: 40px;

}





.menu-lateral {

    width: 270px;

    background: white;

    padding: 30px 20px;

    border-radius: 30px;

    box-shadow: var(--sombra);

    height: max-content;

    position: sticky;

    top: 120px;

}



.menu-lateral h2 {

    color: var(--morado);

    margin-bottom: 25px;

    text-align: center;

}



.menu-lateral ul {

    list-style: none;

}



.menu-lateral li {

    margin-bottom: 15px;

}



.menu-lateral a {

    text-decoration: none;

    color: #555;

    display: block;

    padding: 12px 15px;

    border-radius: 20px;

    transition: .3s;

    font-size: 14px;

}



.menu-lateral a:hover {

    background: var(--lila);

    color: var(--morado);

    transform: translateX(5px);

}








.contenido {

    flex: 1;

}



.seccion {

    background: white;

    padding: 50px;

    border-radius: 35px;

    margin-bottom: 40px;

    box-shadow: var(--sombra);

}



.seccion h2 {

    color: var(--morado);

    font-size: 35px;

    margin-bottom: 30px;

    text-align: center;

}



.seccion p {

    color: #555;

    line-height: 1.8;

    font-size: 16px;

}

.info {

    display: flex;

    align-items: center;

    gap: 40px;

}



.texto {

    width: 60%;

}



.imagen {

    width: 40%;

}



.imagen img {

    width: 100%;

    border-radius: 30px;

    box-shadow: var(--sombra);

}



.objetivos-grid {


    display: grid;


    grid-template-columns:

        repeat(2, 1fr);


    gap: 30px;


}



.objetivo-card {


    padding: 30px;


    background:

        linear-gradient(135deg,

            #f3e8ff,

            #ffffff);


    border-radius: 25px;


    border-left:

        6px solid var(--morado);


}



.objetivo-card h3 {


    color: var(--morado);


    margin-bottom: 15px;


}


.estadisticas {


    display: grid;


    grid-template-columns:

        repeat(3, 1fr);


    gap: 25px;


    margin: 40px 0;


}



.numero {


    background:

        var(--lila);


    padding: 35px;


    border-radius: 30px;


    text-align: center;


}



.numero h3 {


    font-size: 45px;


    color: var(--morado);


}



.numero span {


    color: #555;


    font-weight: 500;


}



.destacado {


    background:

        linear-gradient(135deg,

            #7b2cbf,

            #c77dff);


    color: white;


}



.destacado h2,

.destacado p {


    color: white;


}



.seccion::before {


    content: "";


    display: block;


    width: 80px;


    height: 5px;


    background:

        linear-gradient(90deg,

            #7b2cbf,

            #c77dff);


    border-radius: 20px;


    margin: 0 auto 25px;


}


.seccion,

.card,

.numero,

.objetivo-card {


    animation:

        aparecer .8s ease;


}



@keyframes aparecer {


    from {

        opacity: 0;

        transform: translateY(30px);

    }


    to {

        opacity: 1;

        transform: translateY(0);

    }


}



#musica {

    background: #faf7ff;

}


.canciones {


    display: grid;


    grid-template-columns:

        repeat(3, 1fr);


    gap: 25px;


}



.cancion {


    background: white;


    border-radius: 25px;


    padding: 20px;


    text-align: center;


    box-shadow: var(--sombra);


    transition: .3s;

    


}



.cancion:hover {


    transform: translateY(-10px);


}



.cancion img {


    width: 120px;


    height: 120px;


    object-fit: cover;


    border-radius: 50%;


    margin-bottom: 15px;


}



.cancion h3 {


    color: var(--morado);


    margin-bottom: 5px;


}



.cancion p {


    font-size: 14px;


}



.cancion span {


    display: block;


    background: var(--lila);


    color: var(--morado);


    padding: 8px;


    border-radius: 20px;


    margin: 15px 0;


    font-size: 13px;


}



.cancion a {


    text-decoration: none;


    background: var(--morado);


    color: white;


    padding: 10px 25px;


    border-radius: 30px;


    display: inline-block;


    font-size: 14px;


}



.juegos {


    display: grid;


    grid-template-columns:

        repeat(4, 1fr);


    gap: 25px;


}



.juego {


    background: white;


    padding: 35px 20px;


    text-align: center;


    border-radius: 30px;


    box-shadow: var(--sombra);


    font-size: 35px;


    transition: .3s;


}



.juego:hover {


    background: var(--morado);


    color: white;


    transform: translateY(-10px);


}



.juego h3 {


    font-size: 22px;


    margin: 15px 0;


}



.juego p {


    font-size: 14px;


}

#leo .info {


    background:

        linear-gradient(135deg,

            #f3e8ff,

            white);


    padding: 35px;


    border-radius: 35px;


}



#leo h3 {


    color: var(--morado);


    font-size: 30px;


}



#leo ul {


    margin-top: 20px;


    list-style: none;


}



#leo li {


    background: white;


    margin: 10px 0;


    padding: 12px;


    border-radius: 20px;


    box-shadow:

        0 5px 15px rgba(0, 0, 0, .08);


}


.frases {


    display: grid;


    grid-template-columns:

        repeat(5, 1fr);


    gap: 20px;


    margin-top: 30px;


}



.frases div {


    background: var(--lila);


    padding: 25px;


    border-radius: 25px;


    text-align: center;


    color: var(--morado);


    font-weight: 600;


    transition: .3s;


}



.frases div:hover {


    transform: scale(1.05);


}


.lugares {


    display: grid;


    grid-template-columns:

        repeat(4, 1fr);


    gap: 25px;


}



.lugar {


    overflow: hidden;


    border-radius: 25px;


    background: white;


    box-shadow: var(--sombra);


}



.lugar img {


    width: 100%;


    height: 220px;


    object-fit: cover;


}



.lugar h3 {


    padding: 20px;


    text-align: center;


    color: var(--morado);


}


.nosotros {


    padding: 80px 15%;


    text-align: center;


    background:

        linear-gradient(135deg,

            #7b2cbf,

            #c77dff);


    color: white;


}



.nosotros h2 {


    font-size: 40px;


    margin-bottom: 20px;


}



.nosotros p {


    line-height: 1.8;


}



.contacto {


    padding: 80px 10%;


    text-align: center;


}



.contacto h2 {


    color: var(--morado);


    font-size: 35px;


    margin-bottom: 30px;


}



.contacto p {


    margin: 10px;


    color: #555;


}

footer {


    background: #241038;


    color: white;


    padding: 60px 8%;


    display: grid;


    grid-template-columns:

        repeat(4, 1fr);


    gap: 40px;


}



.footer-col h3 {


    margin-bottom: 20px;


    color: #e0aaff;


}



.footer-col a {


    display: block;


    text-decoration: none;


    color: white;


    margin: 12px 0;


    transition: .3s;


}



.footer-col a:hover {


    color: #c77dff;


    transform: translateX(5px);


}



.logo-footer {


    width: 90px;


    margin-bottom: 15px;


}


@media(max-width:1000px) {


    .hero {

        flex-direction: column;

        text-align: center;

    }


    .hero-texto,

    .hero-imagen {

        width: 100%;

    }


    .cards {

        grid-template-columns:

            repeat(2, 1fr);

    }


    .contenedor {

        flex-direction: column;

    }


    .menu-lateral {

        width: 100%;

        position: relative;

        top: 0;

    }


    .canciones,

    .juegos,

    .lugares {

        grid-template-columns:

            repeat(2, 1fr);

    }


    footer {

        grid-template-columns:

            repeat(2, 1fr);

    }


}








@media(max-width:600px) {



    header {

        padding: 15px;

    }


    .logo h2 {

        font-size: 15px;

    }



    nav {

        display: none;

    }



    .hero h1 {


        font-size: 35px;


    }



    .hero-imagen img {


        width: 260px;


    }



    .cards,

    .objetivos-grid,

    .estadisticas,

    .canciones,

    .juegos,

    .frases,

    .lugares,

    footer {


        grid-template-columns:

            1fr;


    }



    .seccion {


        padding: 30px 20px;


    }



    .info {


        flex-direction: column;


    }



    .texto,

    .imagen {


        width: 100%;


    }



    .galeria-grid {


        grid-template-columns: 1fr;


    }



}
.juego {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: .3s;
}

.juego:hover {
    transform: translateY(-8px);
}

.icono-juego {
    font-size: 40px;
    margin-bottom: 15px;
}

/* ==========================================
   EXPERIENCIAS INTERACTIVAS
========================================== */

.experiencias-section {
    width: 90%;
    max-width: 1100px;
    margin: 50px auto;
    padding: 50px 35px;

    background: #ffffff;

    border-radius: 35px;

    box-shadow: 0 15px 40px rgba(120, 60, 180, 0.12);
}


/* ==========================================
   TÍTULO
========================================== */

.experiencias-titulo {
    text-align: center;
    margin-bottom: 40px;
}

.linea-titulo {
    width: 80px;
    height: 5px;

    margin: 0 auto 18px;

    background: linear-gradient(
        90deg,
        #7b2cbf,
        #c77dff
    );

    border-radius: 10px;
}

.experiencias-titulo h2 {
    margin: 0;

    color: #7b2cbf;

    font-size: 32px;

    font-weight: 800;
}

.experiencias-titulo p {
    margin-top: 12px;

    color: #666;

    font-size: 16px;

    line-height: 1.6;
}


/* ==========================================
   CUADRÍCULA
========================================== */

.experiencias-grid {

    display: grid;

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

    gap: 25px;
}


/* ==========================================
   TARJETAS
========================================== */

.experiencia-card {

    text-decoration: none;

    color: inherit;

    background: #ffffff;

    border-radius: 28px;

    padding: 30px 22px;

    min-height: 290px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    border: 1px solid #f0e4ff;

    box-shadow:
        0 10px 30px rgba(110, 50, 170, 0.10);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


/* ==========================================
   EFECTO AL PASAR EL MOUSE
========================================== */

.experiencia-card:hover {

    transform: translateY(-10px);

    border-color: #c77dff;

    box-shadow:
        0 20px 40px rgba(110, 50, 170, 0.20);
}


/* ==========================================
   ICONOS
========================================== */

.experiencia-icono {

    width: 85px;
    height: 85px;

    display: flex;

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

    font-size: 48px;

    background: #f5eaff;

    border-radius: 25px;

    margin-bottom: 18px;

    transition: transform 0.3s ease;
}

.experiencia-card:hover .experiencia-icono {

    transform: scale(1.1) rotate(3deg);
}


/* ==========================================
   TÍTULO DE CADA TARJETA
========================================== */

.experiencia-card h3 {

    color: #3f3f3f;

    font-size: 20px;

    margin: 5px 0 12px;

    line-height: 1.3;
}


/* ==========================================
   DESCRIPCIÓN
========================================== */

.experiencia-card p {

    color: #666;

    font-size: 14px;

    line-height: 1.6;

    margin: 0;

    max-width: 250px;
}


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

.experiencia-boton {

    display: inline-block;

    margin-top: 20px;

    padding: 10px 20px;

    background: #7b2cbf;

    color: white;

    border-radius: 20px;

    font-size: 14px;

    font-weight: bold;

    transition: 0.3s;
}

.experiencia-card:hover .experiencia-boton {

    background: #6420a1;

    transform: scale(1.05);
}


/* ==========================================
   RESPONSIVE - TABLET
========================================== */

@media (max-width: 950px) {

    .experiencias-grid {

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

    }

}


/* ==========================================
   RESPONSIVE - CELULAR
========================================== */

@media (max-width: 600px) {

    .experiencias-section {

        width: 92%;

        padding: 35px 18px;

    }

    .experiencias-grid {

        grid-template-columns: 1fr;

    }

    .experiencias-titulo h2 {

        font-size: 26px;

    }

}

/* ==========================================================
   INTRODUCCIÓN ORGANIZADA
   ========================================================== */

.introduccion-organizada {
    width: 100%;
    box-sizing: border-box;
}


/* TÍTULO */

.introduccion-organizada > h2 {
    text-align: center;
    margin-bottom: 45px;
}


/* ==========================================================
   TEXTO + IMAGEN
   ========================================================== */

.intro-dos-columnas {
    display: grid !important;

    grid-template-columns: minmax(0, 1fr) 320px !important;

    gap: 45px !important;

    width: 100% !important;

    max-width: 1100px !important;

    margin: 0 auto 45px auto !important;

    align-items: center !important;

    box-sizing: border-box !important;
}


/* TEXTO */

.intro-texto {
    min-width: 0 !important;
}

.intro-texto p {
    font-size: 16px !important;

    line-height: 1.75 !important;

    text-align: justify !important;

    margin-bottom: 20px !important;
}


/* ==========================================================
   IMÁGENES LATERALES
   ========================================================== */

.intro-imagen-lateral {
    width: 100% !important;

    display: flex !important;

    justify-content: center !important;

    align-items: center !important;
}


/* CAJA TEMPORAL PARA IMAGEN */

.espacio-imagen {
    width: 100%;

    max-width: 320px;

    min-height: 260px;

    border-radius: 25px;

    border: 2px dashed #a855f7;

    background: linear-gradient(
        135deg,
        #faf5ff,
        #f3e8ff
    );

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 25px;

    box-sizing: border-box;

    color: #7b2cbf;
}


.espacio-imagen span {
    font-size: 55px;

    margin-bottom: 12px;
}


.espacio-imagen p {
    font-size: 18px;

    font-weight: 700;

    margin: 5px 0;
}


.espacio-imagen small {
    font-size: 13px;

    line-height: 1.5;

    opacity: 0.8;
}


/* ==========================================================
   SUBTÍTULO
   ========================================================== */

.intro-subtitulo {
    max-width: 1100px;

    margin: 50px auto 30px auto;

    padding: 0 20px;
}


.intro-subtitulo h3 {
    color: #7b2cbf;

    font-size: 25px;

    margin: 0;
}


/* ==========================================================
   TABLA 1
   ========================================================== */

.tabla-seccion {
    max-width: 1100px;

    margin: 55px auto;

    padding: 30px;

    box-sizing: border-box;
}


.tabla-seccion h3 {
    text-align: center;

    color: #7b2cbf;

    font-size: 25px;

    margin-bottom: 10px;
}


.titulo-tabla {
    text-align: center;

    font-weight: 600;

    margin-bottom: 25px;
}


/* CONTENEDOR DE LA TABLA */

.tabla-contenedor {
    width: 100%;

    overflow-x: auto;
}


/* TABLA */

.tabla-musica {
    width: 100%;

    border-collapse: separate;

    border-spacing: 0;

    border-radius: 18px;

    overflow: hidden;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}


/* FILAS */

.tabla-musica tr:nth-child(odd) {
    background: #faf5ff;
}


.tabla-musica tr:nth-child(even) {
    background: #ffffff;
}


/* CELDAS */

.tabla-musica td {
    padding: 25px;

    border-bottom: 1px solid #e5d5f7;

    font-size: 16px;

    line-height: 1.6;

    text-align: justify;
}


.tabla-musica tr:last-child td {
    border-bottom: none;
}


/* ==========================================================
   NOTAS
   ========================================================== */

.nota-academica {
    margin-top: 20px;

    font-size: 14px;

    line-height: 1.6;

    text-align: justify;

    color: #444;
}


/* ==========================================================
   FIGURA 1
   ========================================================== */

.figura-seccion {
    max-width: 1000px;

    margin: 65px auto;

    padding: 30px;

    box-sizing: border-box;

    text-align: center;
}


.figura-seccion h3 {
    color: #7b2cbf;

    font-size: 25px;

    margin-bottom: 10px;
}


.titulo-figura {
    font-weight: 600;

    margin-bottom: 30px;

    line-height: 1.5;
}


/* ESPACIO DONDE PONES LA IMAGEN */

.espacio-figura {
    width: 100%;

    min-height: 380px;

    border: 2px dashed #a855f7;

    border-radius: 25px;

    background: #faf5ff;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    color: #7b2cbf;

    padding: 30px;

    box-sizing: border-box;
}


.espacio-figura span {
    font-size: 65px;

    margin-bottom: 15px;
}


.espacio-figura p {
    font-size: 20px;

    font-weight: 700;

    margin: 5px;
}


.espacio-figura small {
    font-size: 14px;

    opacity: 0.75;
}


/* ==========================================================
   CUANDO PONGAS LA IMAGEN REAL
   ========================================================== */

.espacio-figura img {
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 500px;
    object-fit: contain;
    border-radius: 15px;
}


/* ==========================================================
   CELULAR
   ========================================================== */

@media (max-width: 750px) {

    .intro-dos-columnas {
        grid-template-columns: 1fr !important;

        gap: 25px !important;
    }


    .intro-imagen-lateral {
        order: -1;
    }


    .intro-texto p {
        font-size: 15px !important;

        line-height: 1.7 !important;
    }


    .espacio-imagen {
        max-width: 100%;

        min-height: 220px;
    }


    .tabla-seccion,
    .figura-seccion {
        padding: 15px;
    }


    .tabla-musica td {
        padding: 18px;

        font-size: 15px;
    }


    .espacio-figura {
        min-height: 280px;
    }

}


/* =====================================================
   RESUMEN
   TEXTO + IMAGEN / DESPUÉS TEXTO COMPLETO
   ===================================================== */

#Résumé .resumen-arriba {
    display: grid !important;

    grid-template-columns: 1fr 350px !important;

    gap: 45px !important;

    align-items: start !important;

    max-width: 1100px !important;

    margin: 35px auto 25px auto !important;
}


/* TEXTO DE ARRIBA */

#Résumé .resumen-texto-inicial {
    min-width: 0 !important;
}

#Résumé .resumen-texto-inicial p {
    font-size: 16px !important;

    line-height: 1.75 !important;

    text-align: justify !important;

    margin: 0 0 20px 0 !important;
}


/* IMAGEN */

#Résumé .resumen-imagen {
    display: flex !important;

    justify-content: center !important;

    align-items: flex-start !important;
}

#Résumé .resumen-imagen img {
    width: 500px !important;
    max-width: 100% !important;
    height: 650px !important;
    object-fit: cover !important;
    border-radius: 25px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.15) !important;
}


/* =====================================================
   RESTO DEL TEXTO — TODO EL ANCHO
   ===================================================== */

#Résumé .resumen-texto-restante {
    max-width: 1100px !important;

    margin: 0 auto !important;

    width: 100% !important;
}

#Résumé .resumen-texto-restante p {
    font-size: 16px !important;

    line-height: 1.75 !important;

    text-align: justify !important;

    margin-bottom: 20px !important;
}


/* CELULAR */

@media (max-width: 750px) {

    #Résumé .resumen-arriba {
        grid-template-columns: 1fr !important;

        gap: 25px !important;
    }

    #Résumé .resumen-imagen {
        order: -1 !important;
    }

}



/* =====================================================
   OBJETIVOS — ORGANIZACIÓN
   ===================================================== */

.objetivos-organizados {
    width: 100%;
    max-width: 1050px;
    margin: auto;
    box-sizing: border-box;
}


/* OBJETIVO GENERAL */

.objetivo-general {
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 30px;
    margin-bottom: 100px;
    border-radius: 100px;
    box-sizing: border-box;
    background: linear-gradient(135deg, #f3e8ff, #ffffff);
    border-left: 6px solid var(--morado);
}


.objetivo-icono {
    font-size: 45px;
    flex-shrink: 0;
}


.objetivo-general h3 {
    margin-top: 0;
    margin-bottom: 12px;
}


.objetivo-general p {
    margin: 0;

    line-height: 1.7;

    text-align: justify;
}


/* TÍTULO */

.titulo-especificos {
    text-align: center;

    margin: 35px 0 25px;
}


/* TRES OBJETIVOS */

.objetivos-especificos {
    display: grid;

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

    gap: 22px;

    margin-bottom: 45px;
}


.objetivo-card {
    padding: 25px;

    border-radius: 20px;

    box-sizing: border-box;
}


.objetivo-card span {
    display: block;

    font-size: 28px;

    font-weight: bold;

    margin-bottom: 15px;
}


.objetivo-card p {
    margin: 0;

    line-height: 1.7;

    text-align: justify;
}


/* IMAGEN */

.espacio-imagen-proyecto {
    width: 100%;

    display: flex;

    justify-content: center;

    margin: 30px auto;
}


.espacio-imagen-proyecto img {
    width: 500px;

    max-width: 90%;

    height: auto;

    border-radius: 22px;

    object-fit: cover;
}


/* CELULAR */

@media (max-width: 750px) {

    .objetivos-especificos {
        grid-template-columns: 1fr;
    }

    .objetivo-general {
        flex-direction: column;

        align-items: flex-start;
    }

}





/* =====================================================
   JUSTIFICACIÓN — DISEÑO ORGANIZADO
   ===================================================== */

.justificacion-organizada {
    width: 100%;
    max-width: 1050px;
    margin: 35px auto;
    box-sizing: border-box;
}


/* ==========================================
   PARTE SUPERIOR: TEXTO + IMAGEN
   ========================================== */

.justificacion-superior {
    display: grid;

    grid-template-columns: minmax(0, 1fr) 330px;

    gap: 35px;

    align-items: start;

    width: 100%;

    margin-bottom: 25px;
}


/* TEXTO */

.justificacion-texto {
    width: 100%;
}

.justificacion-texto p,
.justificacion-resto p {
    font-size: 16px;

    line-height: 1.75;

    text-align: justify;

    margin-top: 0;

    margin-bottom: 20px;
}


/* ==========================================
   IMAGEN
   ========================================== */

.justificacion-imagen {
    width: 100%;

    display: flex;

    justify-content: center;

    align-items: flex-start;
}

.justificacion-imagen img {
    width: 500px;

    max-width: 100%;

    height: 660px;

    object-fit: cover;

    border-radius: 22px;

    box-shadow: 0 10px 28px rgba(0,0,0,.15);
}


/* ==========================================
   RESTO DEL TEXTO
   ========================================== */

.justificacion-resto {
    width: 100%;
}

.justificacion-resto p {
    width: 100%;
}


/* ==========================================
   CELULAR
   ========================================== */

@media (max-width: 750px) {

    .justificacion-superior {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .justificacion-imagen {
        order: -1;
    }

    .justificacion-imagen img {
        width: 100%;

        max-width: 800px;

        height: auto;
    }

}





/* =====================================================
   MARCO TEÓRICO — BLOQUES DESPLEGABLES
   ===================================================== */

.marco-teorico-organizado {
    width: 100%;
    max-width: 1050px;
    margin: 35px auto;
    box-sizing: border-box;
}


/* ==========================================
   CADA BLOQUE
   ========================================== */

.marco-bloque {
    width: 100%;

    margin-bottom: 18px;

    border-radius: 20px;

    overflow: hidden;

    box-sizing: border-box;
}


/* ==========================================
   TÍTULO DEL DESPLEGABLE
   ========================================== */

.marco-bloque summary {
    cursor: pointer;

    padding: 22px 28px;

    font-size: 18px;

    font-weight: bold;

    list-style: none;

    position: relative;

    transition: 0.3s ease;
}


/* QUITAR TRIÁNGULO ORIGINAL */

.marco-bloque summary::-webkit-details-marker {
    display: none;
}


/* FLECHA */

.marco-bloque summary::after {
    content: "＋";

    position: absolute;

    right: 25px;

    font-size: 22px;

    transition: 0.3s ease;
}


/* CUANDO ESTÁ ABIERTO */

.marco-bloque[open] summary::after {
    content: "−";
}


/* ==========================================
   CONTENIDO
   ========================================== */

.marco-contenido {
    display: grid;

    grid-template-columns: minmax(0, 1fr) 300px;

    gap: 35px;

    padding: 25px 28px 30px;

    align-items: start;

    box-sizing: border-box;
}


/* TEXTO */

.marco-texto {
    width: 100%;
}

.marco-texto p {
    font-size: 16px;

    line-height: 1.75;

    text-align: justify;

    margin-top: 0;

    margin-bottom: 20px;
}


/* ==========================================
   IMAGEN
   ========================================== */

.marco-imagen {
    width: 100%;

    display: flex;

    justify-content: center;

    align-items: flex-start;
}

.marco-imagen img {
    width: 300px;

    max-width: 100%;

    height: 300px;

    object-fit: cover;

    border-radius: 20px;

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


/* ==========================================
   FIGURAS DENTRO DEL MARCO TEÓRICO
   ========================================== */

.marco-contenido .figura-titulo {
    font-weight: bold;

    text-align: center;

    margin-top: 20px;
}

.marco-contenido .figura-nota {
    font-style: italic;

    text-align: justify;

    font-size: 14px;

    line-height: 1.6;
}


/* ==========================================
   CELULAR
   ========================================== */

@media (max-width: 750px) {

    .marco-contenido {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .marco-imagen {
        order: -1;
    }

    .marco-imagen img {
        width: 100%;

        max-width: 400px;

        height: auto;
    }

}








/* =====================================================
   METODOLOGÍA — DISEÑO ORGANIZADO
   ===================================================== */

.metodologia-organizada {
    width: 100%;
    max-width: 1100px;
    margin: 35px auto;
    box-sizing: border-box;
}


/* ==========================================
   TEXTO
   ========================================== */

.metodologia-texto {
    width: 100%;
    margin-bottom: 45px;
}

.metodologia-texto p {
    font-size: 16px;
    line-height: 1.75;
    text-align: justify;
    margin-top: 0;
    margin-bottom: 20px;
}


/* ==========================================
   CUADRÍCULA DE FIGURAS
   ========================================== */

.metodologia-figuras {
    display: grid;

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

    gap: 35px;

    width: 100%;
}


/* ==========================================
   CADA FIGURA
   ========================================== */

.metodologia-figura {
    width: 100%;

    padding: 22px;

    box-sizing: border-box;

    border-radius: 22px;

    text-align: center;
}


/* ==========================================
   ESPACIO / IMAGEN
   ========================================== */

.imagen-placeholder {
    width: 100%;

    height: 280px;

    display: flex;

    justify-content: center;

    align-items: center;

    overflow: hidden;

    border-radius: 18px;

    margin-bottom: 18px;
}


.imagen-placeholder img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 18px;
}


/* ==========================================
   FIGURA
   ========================================== */

.metodologia-figura .figura-titulo {
    margin: 10px 0 8px;

    font-size: 15px;

    line-height: 1.5;

    text-align: left;

    font-weight: bold;
}


/* ==========================================
   NOTA
   ========================================== */

.metodologia-figura .figura-nota {
    margin: 0;

    font-size: 14px;

    line-height: 1.6;

    text-align: justify;

    font-style: italic;
}


/* ==========================================
   CELULAR
   ========================================== */

@media (max-width: 750px) {

    .metodologia-figuras {
        grid-template-columns: 1fr;
    }

    .imagen-placeholder {
        height: 250px;
    }

}





/* =====================================================
   RESULTADOS — GALERÍA DE 10 FIGURAS
   ===================================================== */

.resultados-organizados {
    width: 100%;
    max-width: 1100px;
    margin: 35px auto;
    box-sizing: border-box;
}


/* ==========================================
   TEXTO DE RESULTADOS
   ========================================== */

.resultados-introduccion {
    width: 100%;
    margin-bottom: 45px;
}

.resultados-introduccion p {
    font-size: 16px;
    line-height: 1.75;
    text-align: justify;
    margin-top: 0;
    margin-bottom: 20px;
}


/* ==========================================
   GALERÍA
   ========================================== */

.resultados-grid {
    display: grid;

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

    gap: 30px;

    width: 100%;
}


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

.resultado-card {
    width: 100%;

    overflow: hidden;

    border-radius: 22px;

    box-sizing: border-box;

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


/* EFECTO AL PASAR EL MOUSE */

.resultado-card:hover {
    transform: translateY(-5px);

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


/* ==========================================
   IMAGEN
   ========================================== */

.resultado-card > img {
    display: block;

    width: 100%;

    height: 280px;

    object-fit: contain;

    cursor: pointer;

    border-radius: 18px;
}


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

.resultado-info {
    padding: 18px 20px 20px;
}


/* TÍTULO DE FIGURA */

.resultado-info .figura-titulo {
    margin: 0 0 10px;

    font-size: 15px;

    line-height: 1.5;

    text-align: left;
}


/* NOTA */

.resultado-info .figura-nota {
    margin: 0;

    font-size: 14px;

    line-height: 1.6;

    text-align: justify;

    font-style: italic;
}


/* ==========================================
   CELULAR
   ========================================== */

@media (max-width: 750px) {

    .resultados-grid {
        grid-template-columns: 1fr;
    }

    .resultado-card > img {
        height: auto;

        max-height: 350px;
    }

}


/* --- WIDGET FLOTANTE DE LÉO --- */
.leo-floating-container {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  z-index: 999999 !important;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#leo-avatar-btn {
  width: 85px;
  height: 85px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  background: #ffffff;
  box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

#leo-avatar-btn:hover {
  transform: scale(1.08) rotate(3deg);
}

.leo-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  animation: leoFloat 3s ease-in-out infinite;
}

@keyframes leoFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-7px); }
}

.leo-pulse {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 50%;
  border: 3px solid #7c3aed;
  animation: leoPulse 2s infinite;
}

@keyframes leoPulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* Ventana de Chat */
#leo-chat-box {
  width: 320px;
  height: 420px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: 100px;
  right: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

.leo-chat-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(20px) scale(0.9) !important;
}

.leo-chat-header {
  background: #7c3aed;
  color: white;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.leo-chat-header h3 { margin: 0; font-size: 1rem; }
.leo-chat-header p { margin: 0; font-size: 0.75rem; opacity: 0.85; }

.leo-close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 1.4rem;
  cursor: pointer;
}

.leo-chat-body {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #f9fafb;
}

.leo-msg {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 0.88rem;
}

.leo-bot {
  background: #e5e7eb;
  color: #111827;
  align-self: flex-start;
}

.leo-user {
  background: #7c3aed;
  color: white;
  align-self: flex-end;
}

.leo-chat-footer {
  padding: 8px;
  display: flex;
  gap: 6px;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
}

.leo-chat-footer input {
  flex: 1;
  border: 1px solid #d1d5db;
  padding: 6px 12px;
  border-radius: 20px;
  outline: none;
}

.leo-btn-icon, .leo-btn-send {
  border: none;
  background: #7c3aed;
  color: white;
  border-radius: 20px;
  padding: 6px 12px;
  cursor: pointer;
}







/* ==========================================
   DISCUSIÓN - IMAGEN ENTRE EL TEXTO
========================================== */

.discusion-contenido {
    width: 100%;
    font-size: 17px;
    line-height: 1.8;
    text-align: justify;
}


/* IMAGEN A LA IZQUIERDA */

.imagen-discusion {
    float: left;

    width: 330px;
    height: 300px;

    object-fit: cover;

    margin: 0 30px 20px 0;

    border-radius: 20px;

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


/* TEXTO */

.discusion-contenido p {
    margin: 0;
}


/* LIMPIAR EL FLOAT AL TERMINAR */

.discusion-contenido::after {
    content: "";
    display: block;
    clear: both;
}


/* ==========================================
   CELULAR
========================================== */

@media (max-width: 700px) {

    .imagen-discusion {
        float: none;

        display: block;

        width: 100%;
        height: 250px;

        margin: 0 auto 25px;
    }

    .discusion-contenido {
        font-size: 15px;
        line-height: 1.7;
    }

}







/* ==========================================
   CONCLUSIONES
   IMAGEN ENTRE EL TEXTO
========================================== */

.conclusiones-contenido {
    width: 100%;
    font-size: 17px;
    line-height: 1.8;
    text-align: justify;
}


/* IMAGEN A LA IZQUIERDA */

.imagen-conclusiones {
    float: left;

    width: 330px;
    height: 300px;

    object-fit: cover;

    margin: 0 30px 20px 0;

    border-radius: 20px;

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


/* TEXTO */

.conclusiones-contenido p {
    margin: 0;
}


/* LIMPIAR EL FLOAT */

.conclusiones-contenido::after {
    content: "";
    display: block;
    clear: both;
}


/* ==========================================
   CELULAR
========================================== */

@media (max-width: 700px) {

    .imagen-conclusiones {
        float: none;

        display: block;

        width: 100%;
        height: 250px;

        margin: 0 auto 25px;
    }

    .conclusiones-contenido {
        font-size: 15px;
        line-height: 1.7;
    }

}







/* ==========================================
   REFERENCIAS
   IMAGEN ENTRE EL TEXTO
========================================== */

.referencias-contenido {
    width: 100%;
    font-size: 16px;
    line-height: 1.8;
    text-align: justify;
}


/* IMAGEN A LA IZQUIERDA */

.imagen-referencias {
    float: left;

    width: 330px;
    height: 300px;

    object-fit: cover;

    margin: 0 30px 20px 0;

    border-radius: 20px;

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


/* TEXTO */

.referencias-contenido p {
    margin: 0;
}


/* LIMPIAR EL FLOAT */

.referencias-contenido::after {
    content: "";
    display: block;
    clear: both;
}


/* ==========================================
   CELULAR
========================================== */

@media (max-width: 700px) {

    .imagen-referencias {
        float: none;

        display: block;

        width: 100%;
        height: 250px;

        margin: 0 auto 25px;
    }

    .referencias-contenido {
        font-size: 14px;
        line-height: 1.7;
    }

}





/* ==========================================
   JUSTIFICACIÓN
========================================== */

.justificacion-contenido {

    width: 100%;

    font-size: 17px;

    line-height: 1.8;

    text-align: justify;

    color: inherit;
}


/* ==========================================
   IMAGEN A LA IZQUIERDA
========================================== */

.imagen-justificacion {

    float: left;

    width: 340px;

    height: 310px;

    object-fit: cover;

    margin: 0 32px 20px 0;

    border-radius: 22px;

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

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


/* EFECTO BONITO */

.imagen-justificacion:hover {

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

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


/* ==========================================
   TEXTO
========================================== */

.justificacion-contenido p {

    margin: 0;

}


/* ==========================================
   CITA
========================================== */

.justificacion-contenido em {

    display: inline-block;

    padding: 15px 20px;

    margin: 5px 0;

    border-left:
        4px solid #a855f7;

    background:
        rgba(168, 85, 247, 0.08);

    border-radius:
        0 12px 12px 0;

}


/* ==========================================
   LIMPIAR FLOAT
========================================== */

.justificacion-contenido::after {

    content: "";

    display: block;

    clear: both;

}


/* ==========================================
   CELULAR
========================================== */

@media (max-width: 700px) {

    .imagen-justificacion {

        float: none;

        display: block;

        width: 100%;

        height: 260px;

        margin:
            0 auto 25px;

    }


    .justificacion-contenido {

        font-size: 15px;

        line-height: 1.7;

    }


    .justificacion-contenido em {

        padding: 12px 15px;

    }

}




/* ==========================================
   RESUMEN
========================================== */

.resumen-contenido {

    width: 100%;

    font-size: 17px;

    line-height: 1.8;

    text-align: justify;

    color: inherit;

}


/* ==========================================
   IMAGEN
========================================== */

.imagen-resumen {

    float: left;

    width: 340px;

    height: 300px;

    object-fit: cover;

    margin: 0 32px 20px 0;

    border-radius: 24px;

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

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


/* EFECTO AL PASAR EL MOUSE */

.imagen-resumen:hover {

    transform:
        translateY(-6px)
        scale(1.02);

    box-shadow:
        0 18px 38px
        rgba(0, 0, 0, 0.32);

}


/* ==========================================
   TEXTO
========================================== */

.resumen-contenido p {

    margin: 0;

}


/* ==========================================
   PALABRAS CLAVE
========================================== */

.resumen-contenido strong {

    color: #a855f7;

    font-weight: 700;

}


/* ==========================================
   LIMPIAR FLOAT
========================================== */

.resumen-contenido::after {

    content: "";

    display: block;

    clear: both;

}


/* ==========================================
   CELULAR
========================================== */

@media (max-width: 700px) {

    .imagen-resumen {

        float: none;

        display: block;

        width: 100%;

        height: 250px;

        margin:
            0 auto 25px;

    }


    .resumen-contenido {

        font-size: 15px;

        line-height: 1.7;

    }

}






/* ==========================================
   REFERENCIAS
========================================== */

.referencias-grid {

    width: 100%;

    display: grid;

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

    gap: 22px;

    margin-top: 25px;

}


/* ==========================================
   CARD
========================================== */

.referencia-card {

    position: relative;

    display: flex;

    gap: 18px;

    padding: 24px;

    min-height: 190px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.04)
        );

    border:
        1px solid
        rgba(255,255,255,.15);

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.18);

    backdrop-filter: blur(10px);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;

}


/* EFECTO */

.referencia-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 18px 40px
        rgba(0,0,0,.28);

    border-color:
        rgba(168,85,247,.65);

}


/* ==========================================
   NÚMERO
========================================== */

.numero-ref {

    flex-shrink: 0;

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #c026d3
        );

    color: white;

    font-size: 13px;

    font-weight: 800;

    box-shadow:
        0 6px 18px
        rgba(124,58,237,.35);

}


/* ==========================================
   CONTENIDO
========================================== */

.referencia-contenido {

    flex: 1;

}


.referencia-contenido h3 {

    margin:
        0 0 9px;

    color: #d9a7ff;

    font-size: 17px;

    line-height: 1.4;

}


.referencia-contenido p {

    margin:
        0 0 10px;

    font-size: 14px;

    line-height: 1.65;

    text-align: justify;

}


.referencia-fuente {

    display: block;

    font-size: 13px;

    line-height: 1.5;

    opacity: .78;

    font-style: italic;

}


/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 900px) {

    .referencias-grid {

        grid-template-columns: 1fr;

    }

}


@media (max-width: 600px) {

    .referencia-card {

        padding: 18px;

        gap: 13px;

    }


    .numero-ref {

        width: 40px;

        height: 40px;

        border-radius: 12px;

        font-size: 11px;

    }


    .referencia-contenido h3 {

        font-size: 15px;

    }


    .referencia-contenido p {

        font-size: 13px;

    }

}






/* ==========================================
   INTRODUCCIÓN
========================================== */

.intro-bloque {

    display: grid;

    grid-template-columns: 1.4fr .8fr;

    gap: 35px;

    align-items: center;

    margin:
        35px 0;

}


/* BLOQUES ALTERNADOS */

.intro-bloque.invertido {

    grid-template-columns: .8fr 1.4fr;

}


/* ==========================================
   TEXTO
========================================== */

.intro-texto {

    font-size: 17px;

    line-height: 1.8;

    text-align: justify;

}


.intro-texto p {

    margin-bottom: 20px;

}


.intro-texto em {

    font-style: italic;

}


/* ==========================================
   IMÁGENES
========================================== */

.intro-imagen {

    width: 100%;

    height: 300px;

    border-radius: 24px;

    overflow: hidden;

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

    background:
        rgba(255,255,255,.08);

}


.intro-imagen img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform .4s ease;

}


.intro-imagen:hover img {

    transform:
        scale(1.06);

}


/* ==========================================
   SUBTÍTULO
========================================== */

.intro-subtitulo {

    margin:
        45px 0 25px;

    padding:
        18px 25px;

    border-left:
        5px solid #a855f7;

    border-radius:
        0 15px 15px 0;

    background:
        rgba(168,85,247,.10);

}


.intro-subtitulo h3 {

    margin: 0;

    font-size: 22px;

    color: #d9a7ff;

}


/* ==========================================
   TABLA
========================================== */

.tabla-seccion {

    margin:
        45px 0;

}


.tabla-seccion h3 {

    margin-bottom: 8px;

    color: #d9a7ff;

}


.titulo-tabla {

    margin-bottom: 20px;

    font-style: italic;

}


.tabla-contenedor {

    overflow-x: auto;

    border-radius: 18px;

}


.tabla-musica {

    width: 100%;

    border-collapse: collapse;

}


.tabla-musica td {

    padding: 18px 20px;

    border:
        1px solid
        rgba(255,255,255,.15);

    line-height: 1.6;

    text-align: justify;

}


.tabla-musica tr:hover {

    background:
        rgba(168,85,247,.08);

}


/* ==========================================
   NOTAS
========================================== */

.nota-academica {

    margin-top: 18px;

    font-size: 14px;

    line-height: 1.7;

    opacity: .85;

}


/* ==========================================
   FIGURA
========================================== */

.figura-seccion {

    margin:
        50px 0;

    text-align: center;

}


.titulo-figura {

    margin-bottom: 25px;

    font-style: italic;

}


.espacio-figura {

    width: 100%;

    display: flex;

    justify-content: center;

}


.espacio-figura img {

    max-width: 90%;

    max-height: 500px;

    object-fit: contain;

    border-radius: 18px;

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.2);

}


/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 800px) {

    .intro-bloque,
    .intro-bloque.invertido {

        grid-template-columns: 1fr;

    }


    .intro-imagen {

        height: 250px;

        order: -1;

    }


    .intro-texto {

        font-size: 15px;

        line-height: 1.7;

    }


    .intro-subtitulo h3 {

        font-size: 18px;

    }

}


@media (max-width: 500px) {

    .intro-imagen {

        height: 220px;

    }

    .tabla-musica td {

        padding: 14px;

        font-size: 14px;

    }

}










/* =====================================================
   OBJETIVOS
   ===================================================== */

.seccion-objetivos {
    width: 100%;
    padding: 90px 7%;
    box-sizing: border-box;
}


/* =========================
   TÍTULO
   ========================= */

.titulo-objetivos {
    text-align: center;
    margin-bottom: 55px;
}

.titulo-objetivos span {
    display: flex;
    width: 65px;
    height: 65px;
    margin: 0 auto 15px;

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

    border-radius: 20px;

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

    font-size: 32px;

    backdrop-filter: blur(10px);
}

.titulo-objetivos h2 {
    margin: 0;

    font-size: 43px;
    font-weight: 800;
}

.titulo-objetivos p {
    margin-top: 10px;

    font-size: 17px;

    opacity: 0.8;
}


/* =========================
   OBJETIVO GENERAL
   ========================= */

.objetivo-general {

    max-width: 1150px;

    margin: 0 auto 60px;

    padding: 40px;

    display: grid;

    grid-template-columns: 1.3fr 0.8fr;

    gap: 45px;

    align-items: center;

    border-radius: 30px;

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

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

    backdrop-filter: blur(15px);

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


/* TEXTO */

.objetivo-general-texto {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.etiqueta-objetivo {

    width: fit-content;

    padding: 8px 16px;

    margin-bottom: 15px;

    border-radius: 30px;

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

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.objetivo-general-texto h3 {

    margin: 0 0 15px;

    font-size: 28px;
}

.objetivo-general-texto p {

    margin: 0;

    font-size: 16px;

    line-height: 1.8;

    text-align: justify;
}


/* =========================
   ESPACIO PARA IMAGEN
   ========================= */

.imagen-objetivo {

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;
}

.marco-imagen {

    width: 100%;

    height: 280px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 25px;

    border: 2px dashed rgba(255, 255, 255, 0.45);

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

    transition: 0.3s ease;
}

.marco-imagen:hover {

    transform: scale(1.02);

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

.marco-imagen span {

    font-size: 55px;

    margin-bottom: 10px;
}

.marco-imagen p {

    margin: 0;

    font-size: 14px;

    opacity: 0.7;
}


/* =========================
   SUBTÍTULO
   ========================= */

.subtitulo-objetivos {

    max-width: 1150px;

    margin: 0 auto 30px;

    display: flex;

    align-items: center;

    gap: 12px;
}

.subtitulo-objetivos span {

    font-size: 25px;
}

.subtitulo-objetivos h3 {

    margin: 0;

    font-size: 27px;
}


/* =========================
   CARDS
   ========================= */

.objetivos-especificos {

    max-width: 1150px;

    margin: auto;

    display: grid;

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

    gap: 25px;
}

.objetivo-card {

    position: relative;

    padding: 32px;

    min-height: 300px;

    box-sizing: border-box;

    border-radius: 25px;

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

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

    backdrop-filter: blur(12px);

    overflow: hidden;

    transition: all 0.3s ease;
}

.objetivo-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
}


/* NÚMERO */

.numero-objetivo {

    position: absolute;

    top: 18px;

    right: 22px;

    font-size: 14px;

    font-weight: 800;

    opacity: 0.45;
}


/* ICONO */

.icono-objetivo {

    width: 65px;

    height: 65px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 20px;

    border-radius: 18px;

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

    font-size: 30px;
}


/* TÍTULO CARD */

.objetivo-card h3 {

    margin: 0 0 15px;

    font-size: 21px;
}


/* TEXTO JUSTIFICADO */

.objetivo-card p {

    margin: 0;

    font-size: 15px;

    line-height: 1.75;

    text-align: justify;

    opacity: 0.9;
}


/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 950px) {

    .objetivo-general {

        grid-template-columns: 1fr;

    }

    .imagen-objetivo {

        order: -1;
    }

    .marco-imagen {

        height: 230px;
    }

    .objetivos-especificos {

        grid-template-columns: 1fr;
    }
}


@media (max-width: 600px) {

    .seccion-objetivos {

        padding: 60px 5%;
    }

    .titulo-objetivos h2 {

        font-size: 34px;
    }

    .objetivo-general {

        padding: 25px;

        gap: 25px;
    }

    .objetivo-general-texto h3 {

        font-size: 23px;
    }

    .objetivo-card {

        padding: 25px;

    }

}









/* =====================================================
   SECCIÓN OBJETIVOS
   ===================================================== */

.seccion-objetivos {
    width: 100%;
    padding: 90px 7%;
    box-sizing: border-box;
}


/* =====================================================
   TÍTULO PRINCIPAL
   ===================================================== */

.titulo-objetivos {
    text-align: center;
    margin-bottom: 55px;
}

.icono-titulo-objetivos {
    width: 65px;
    height: 65px;

    margin: 0 auto 15px;

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

    border-radius: 20px;

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

    font-size: 32px;

    backdrop-filter: blur(10px);
}

.titulo-objetivos h2 {
    margin: 0;

    font-size: 43px;
    font-weight: 800;
}

.titulo-objetivos p {
    margin: 10px 0 0;

    font-size: 17px;

    opacity: 0.8;
}


/* =====================================================
   OBJETIVO GENERAL
   ===================================================== */

.objetivo-general {
    max-width: 1150px;

    margin: 0 auto 65px;

    padding: 40px;

    display: grid;

    grid-template-columns: 1.15fr 0.85fr;

    gap: 45px;

    align-items: center;

    box-sizing: border-box;

    border-radius: 30px;

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

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

    backdrop-filter: blur(15px);

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


/* TEXTO GENERAL */

.objetivo-general-texto {
    display: flex;
    flex-direction: column;
}

.etiqueta-objetivo {
    width: fit-content;

    padding: 8px 16px;

    margin-bottom: 15px;

    border-radius: 30px;

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

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.objetivo-general-texto h3 {
    margin: 0 0 15px;

    font-size: 28px;

    line-height: 1.25;
}

.objetivo-general-texto p {
    margin: 0;

    font-size: 16px;

    line-height: 1.8;

    text-align: justify;

    opacity: 0.9;
}


/* =====================================================
   IMAGEN DEL OBJETIVO GENERAL
   ===================================================== */

.imagen-objetivo {
    width: 100%;

    height: 300px;

    overflow: hidden;

    border-radius: 25px;

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

    border: 2px solid rgba(255, 255, 255, 0.18);
}

.imagen-objetivo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.4s ease;
}

.imagen-objetivo:hover img {
    transform: scale(1.05);
}


/* =====================================================
   TÍTULO OBJETIVOS ESPECÍFICOS
   ===================================================== */

.titulo-especificos {
    max-width: 1050px;

    margin: 0 auto 30px;

    display: flex;

    align-items: center;

    gap: 15px;
}

.titulo-especificos > span {
    width: 50px;
    height: 50px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 15px;

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

    font-size: 24px;
}

.titulo-especificos h3 {
    margin: 0 0 5px;

    font-size: 28px;
}

.titulo-especificos p {
    margin: 0;

    font-size: 14px;

    opacity: 0.7;
}


/* =====================================================
   LISTA DE OBJETIVOS
   ===================================================== */

.lista-objetivos {
    max-width: 1050px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    gap: 25px;
}


/* =====================================================
   TARJETA DE OBJETIVO ESPECÍFICO
   ===================================================== */

.objetivo-especifico {
    position: relative;

    width: 100%;

    min-height: 230px;

    display: grid;

    grid-template-columns: 280px 1fr;

    align-items: center;

    gap: 35px;

    padding: 25px 35px 25px 25px;

    box-sizing: border-box;

    border-radius: 28px;

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

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

    backdrop-filter: blur(12px);

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

    transition: all 0.3s ease;
}

.objetivo-especifico:hover {
    transform: translateY(-5px);

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

    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.16);
}


/* =====================================================
   NÚMERO
   ===================================================== */

.numero-objetivo {
    position: absolute;

    top: 18px;
    right: 25px;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 1px;

    opacity: 0.45;
}


/* =====================================================
   IMAGEN DE CADA OBJETIVO
   ===================================================== */

.imagen-especifico {
    width: 100%;

    height: 180px;

    overflow: hidden;

    border-radius: 22px;

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

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

.imagen-especifico img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.4s ease;
}

.objetivo-especifico:hover .imagen-especifico img {
    transform: scale(1.05);
}


/* =====================================================
   CONTENIDO
   ===================================================== */

.contenido-especifico {
    padding-right: 20px;
}

.icono-especifico {
    width: 52px;
    height: 52px;

    margin-bottom: 12px;

    display: flex;

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

    border-radius: 15px;

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

    font-size: 25px;
}

.contenido-especifico h3 {
    margin: 0 0 12px;

    font-size: 22px;

    line-height: 1.3;
}

.contenido-especifico p {
    margin: 0;

    font-size: 15px;

    line-height: 1.75;

    text-align: justify;

    opacity: 0.88;
}


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

@media (max-width: 850px) {

    .objetivo-general {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .imagen-objetivo {
        height: 260px;
    }

    .objetivo-especifico {
        grid-template-columns: 220px 1fr;

        gap: 25px;
    }

    .imagen-especifico {
        height: 170px;
    }

}


/* =====================================================
   CELULAR
   ===================================================== */

@media (max-width: 650px) {

    .seccion-objetivos {
        padding: 60px 5%;
    }


    .titulo-objetivos h2 {
        font-size: 34px;
    }


    .objetivo-general {
        padding: 25px;

        border-radius: 24px;
    }

    .objetivo-general-texto h3 {
        font-size: 23px;
    }

    .objetivo-general-texto p {
        font-size: 15px;
    }


    .imagen-objetivo {
        height: 220px;
    }


    .titulo-especificos h3 {
        font-size: 23px;
    }


    .objetivo-especifico {
        grid-template-columns: 1fr;

        padding: 20px;

        gap: 20px;
    }


    .imagen-especifico {
        width: 100%;

        height: 210px;
    }


    .contenido-especifico {
        padding-right: 0;
    }


    .contenido-especifico h3 {
        font-size: 20px;
    }

}







/* =====================================================
   SECCIÓN OBJETIVOS
   ===================================================== */

.objetivos-section {
    width: 100%;
    max-width: 1200px;
    margin: auto;

    padding: 80px 30px;

    box-sizing: border-box;
}


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

.objetivos-header {
    text-align: center;
    margin-bottom: 50px;
}

.objetivos-icon {
    width: 60px;
    height: 60px;

    margin: 0 auto 15px;

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

    border-radius: 18px;

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

    font-size: 30px;
}

.objetivos-header h2 {
    margin: 0;

    font-size: 42px;
    font-weight: 800;
}

.objetivos-header p {
    margin-top: 8px;

    font-size: 16px;

    opacity: 0.75;
}


/* =====================================================
   OBJETIVO GENERAL
   ===================================================== */

.objetivo-general-box {

    width: 100%;

    display: grid;

    grid-template-columns: 1fr 400px;

    gap: 40px;

    align-items: center;

    padding: 35px;

    margin-bottom: 60px;

    box-sizing: border-box;

    border-radius: 28px;

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

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

    backdrop-filter: blur(12px);
}


.objetivo-general-info {
    padding: 10px;
}


.objetivo-label {

    display: inline-block;

    padding: 7px 15px;

    margin-bottom: 15px;

    border-radius: 20px;

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

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 1px;
}


.objetivo-general-info h3 {

    margin: 0 0 15px;

    font-size: 27px;
}


.objetivo-general-info p {

    margin: 0;

    font-size: 16px;

    line-height: 1.8;

    text-align: justify;
}


/* IMAGEN GENERAL */

.objetivo-general-img {

    width: 100%;
    height: 280px;

    overflow: hidden;

    border-radius: 22px;
}


.objetivo-general-img img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


/* =====================================================
   TÍTULO ESPECÍFICOS
   ===================================================== */

.especificos-header {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 30px;
}


.especificos-icon {

    width: 50px;
    height: 50px;

    display: flex;

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

    border-radius: 15px;

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

    font-size: 23px;
}


.especificos-header h3 {

    margin: 0;

    font-size: 28px;
}


.especificos-header p {

    margin: 4px 0 0;

    font-size: 14px;

    opacity: 0.7;
}


/* =====================================================
   TARJETAS ESPECÍFICAS
   ===================================================== */

.especifico-box {

    width: 100%;

    min-height: 210px;

    display: grid;

    grid-template-columns: 270px 1fr;

    gap: 35px;

    align-items: center;

    padding: 25px;

    margin-bottom: 22px;

    box-sizing: border-box;

    border-radius: 25px;

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

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

    backdrop-filter: blur(10px);

    transition: 0.3s ease;
}


.especifico-box:hover {

    transform: translateY(-4px);

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


/* =====================================================
   IMÁGENES ESPECÍFICAS
   ===================================================== */

.especifico-img {

    width: 270px;
    height: 160px;

    overflow: hidden;

    border-radius: 20px;
}


.especifico-img img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: 0.4s ease;
}


.especifico-box:hover .especifico-img img {

    transform: scale(1.05);
}


/* =====================================================
   TEXTO ESPECÍFICO
   ===================================================== */

.especifico-info {

    position: relative;

    padding-right: 35px;
}


.numero {

    display: block;

    margin-bottom: 8px;

    font-size: 13px;

    font-weight: bold;

    opacity: 0.5;
}


.especifico-info h3 {

    margin: 0 0 12px;

    font-size: 22px;
}


.especifico-info p {

    margin: 0;

    font-size: 15px;

    line-height: 1.75;

    text-align: justify;

    opacity: 0.9;
}


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

@media (max-width: 850px) {

    .objetivo-general-box {

        grid-template-columns: 1fr;

    }

    .objetivo-general-img {

        height: 250px;

    }

}


/* =====================================================
   CELULAR
   ===================================================== */

@media (max-width: 650px) {

    .objetivos-section {

        padding: 60px 18px;

    }


    .objetivos-header h2 {

        font-size: 34px;

    }


    .objetivo-general-box {

        padding: 22px;

        gap: 25px;

    }


    .objetivo-general-info h3 {

        font-size: 23px;

    }


    .objetivo-general-img {

        height: 210px;

    }


    .especifico-box {

        grid-template-columns: 1fr;

        gap: 20px;

        padding: 20px;

    }


    .especifico-img {

        width: 100%;

        height: 200px;

    }


    .especifico-info {

        padding-right: 0;

    }


    .especifico-info h3 {

        font-size: 20px;

    }

}



/* =========================================================
   OBJETIVOS — DISEÑO MODERNO
========================================================= */

.objetivos {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 100px 35px;
}


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

.objetivos-titulo {
    text-align: center;
    margin-bottom: 75px;
}

.objetivos-badge {
    width: 72px;
    height: 72px;

    margin: 0 auto 20px;

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

    border-radius: 22px;

    background: rgba(255,255,255,.14);

    font-size: 35px;

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

.objetivos-titulo h2 {
    margin: 0;

    font-size: 48px;
    font-weight: 850;

    letter-spacing: -1px;
}

.objetivos-titulo p {
    margin: 12px 0 0;

    font-size: 17px;

    opacity: .72;
}


/* =========================================================
   OBJETIVO GENERAL
========================================================= */

.general {

    display: grid;

    grid-template-columns: 1fr 430px;

    gap: 55px;

    align-items: center;

    padding: 45px;

    margin-bottom: 85px;

    border-radius: 35px;

    background: rgba(255,255,255,.10);

    border: 1px solid rgba(255,255,255,.18);

    backdrop-filter: blur(18px);

    box-shadow:
        0 25px 60px rgba(0,0,0,.12);
}


/* TEXTO */

.general-texto {

    padding: 10px 5px;
}

.tag {

    display: inline-block;

    padding: 9px 17px;

    margin-bottom: 20px;

    border-radius: 50px;

    background: rgba(255,255,255,.16);

    font-size: 11px;

    font-weight: 850;

    letter-spacing: 1.8px;
}


.general h3 {

    max-width: 600px;

    margin: 0 0 20px;

    font-size: 31px;

    line-height: 1.25;
}


.general p {

    max-width: 620px;

    margin: 0;

    font-size: 16px;

    line-height: 1.9;

    text-align: justify;

    opacity: .88;
}


/* IMAGEN */

.general-imagen {

    width: 100%;
    height: 320px;

    overflow: hidden;

    border-radius: 28px;

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

.general-imagen img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .5s ease;
}

.general-imagen:hover img {

    transform: scale(1.06);
}


/* =========================================================
   TÍTULO ESPECÍFICOS
========================================================= */

.especificos-titulo {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 45px;
}

.especificos-titulo > span {

    width: 60px;
    height: 60px;

    display: flex;

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

    border-radius: 20px;

    background: rgba(255,255,255,.14);

    font-size: 28px;
}

.especificos-titulo h3 {

    margin: 0;

    font-size: 31px;
}

.especificos-titulo p {

    margin: 7px 0 0;

    font-size: 15px;

    opacity: .7;
}


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

.especificos {

    display: flex;

    flex-direction: column;

    gap: 28px;
}


/* =========================================================
   TARJETAS
========================================================= */

.especifico {

    position: relative;

    display: grid;

    grid-template-columns: 300px 1fr;

    min-height: 250px;

    gap: 45px;

    align-items: center;

    padding: 30px;

    border-radius: 30px;

    background: rgba(255,255,255,.085);

    border: 1px solid rgba(255,255,255,.16);

    backdrop-filter: blur(14px);

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

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


.especifico:hover {

    transform: translateY(-7px);

    background: rgba(255,255,255,.13);

    box-shadow:
        0 25px 50px rgba(0,0,0,.14);
}


/* =========================================================
   NÚMERO
========================================================= */

.especifico-numero {

    position: absolute;

    top: 20px;
    right: 25px;

    font-size: 13px;

    font-weight: 850;

    opacity: .35;
}


/* =========================================================
   IMAGEN
========================================================= */

.especifico-imagen {

    width: 300px;
    height: 190px;

    overflow: hidden;

    border-radius: 24px;

    box-shadow:
        0 12px 30px rgba(0,0,0,.14);
}

.especifico-imagen img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .5s ease;
}

.especifico:hover .especifico-imagen img {

    transform: scale(1.07);
}


/* =========================================================
   CONTENIDO
========================================================= */

.especifico-contenido {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 20px 45px 20px 0;
}


.especifico-icono {

    width: 58px;
    height: 58px;

    display: flex;

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

    margin-bottom: 18px;

    border-radius: 18px;

    background: rgba(255,255,255,.14);

    font-size: 27px;
}


.especifico h4 {

    margin: 0 0 15px;

    font-size: 24px;

    line-height: 1.3;
}


.especifico p {

    max-width: 650px;

    margin: 0;

    font-size: 15.5px;

    line-height: 1.9;

    text-align: justify;

    opacity: .86;
}


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

@media (max-width: 900px) {

    .general {

        grid-template-columns: 1fr;

    }

    .general-imagen {

        height: 280px;

    }

    .especifico {

        grid-template-columns: 240px 1fr;

        gap: 30px;

    }

    .especifico-imagen {

        width: 240px;
        height: 180px;

    }

}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 650px) {

    .objetivos {

        padding: 70px 18px;

    }

    .objetivos-titulo {

        margin-bottom: 50px;

    }

    .objetivos-titulo h2 {

        font-size: 38px;

    }

    .general {

        padding: 25px;

        gap: 30px;

        border-radius: 27px;

    }

    .general h3 {

        font-size: 25px;

    }

    .general p {

        font-size: 15px;

        line-height: 1.8;

    }

    .general-imagen {

        height: 230px;

    }

    .especificos-titulo h3 {

        font-size: 25px;

    }

    .especifico {

        grid-template-columns: 1fr;

        padding: 22px;

        gap: 25px;

        border-radius: 27px;

    }

    .especifico-imagen {

        width: 100%;

        height: 220px;

    }

    .especifico-contenido {

        padding: 0 5px 15px;

    }

    .especifico h4 {

        font-size: 22px;

    }

    .especifico p {

        font-size: 15px;

        line-height: 1.8;

    }

}








/* =========================================================
   RESULTADOS
========================================================= */

.resultados {

    width: 100%;

    max-width: 1150px;

    margin: auto;

    padding: 100px 30px;

}


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

.resultados-header {

    text-align: center;

    margin-bottom: 70px;

}


.resultados-badge {

    display: inline-block;

    padding: 10px 20px;

    margin-bottom: 20px;

    border-radius: 50px;

    background: rgba(255,255,255,.12);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

}


.resultados-header h2 {

    margin: 0;

    font-size: 50px;

    line-height: 1.1;

    font-weight: 850;

}


.resultados-header p {

    margin-top: 15px;

    font-size: 17px;

    opacity: .7;

}


/* =========================================================
   INTRODUCCIÓN
========================================================= */

.resultados-intro {

    display: grid;

    grid-template-columns: 70px 1fr;

    gap: 25px;

    padding: 35px;

    margin-bottom: 75px;

    border-radius: 30px;

    background: rgba(255,255,255,.08);

    border: 1px solid rgba(255,255,255,.15);

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

    backdrop-filter: blur(15px);

}


.intro-icon {

    width: 65px;

    height: 65px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 20px;

    background: rgba(255,255,255,.14);

    font-size: 30px;

}


.resultados-intro p {

    margin: 0 0 18px;

    font-size: 16px;

    line-height: 1.9;

    text-align: justify;

}


.resultados-intro p:last-child {

    margin-bottom: 0;

}


/* =========================================================
   BLOQUES DE ENCUESTA
========================================================= */

.bloque-seccion {

    display: flex;

    align-items: center;

    gap: 25px;

    margin: 90px 0 40px;

}


.bloque-numero {

    width: 65px;

    height: 65px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 20px;

    background: rgba(255,255,255,.13);

    font-size: 18px;

    font-weight: 900;

}


.bloque-tag {

    font-size: 11px;

    font-weight: 850;

    letter-spacing: 2px;

    opacity: .55;

}


.bloque-seccion h3 {

    margin: 7px 0;

    font-size: 31px;

}


.bloque-seccion p {

    margin: 0;

    font-size: 15px;

    opacity: .65;

}


.bloque-seccion.final {

    margin-top: 110px;

}


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

.resultado-card {

    position: relative;

    padding: 42px;

    margin-bottom: 45px;

    border-radius: 32px;

    background: rgba(255,255,255,.075);

    border: 1px solid rgba(255,255,255,.15);

    box-shadow: 0 20px 55px rgba(0,0,0,.09);

    backdrop-filter: blur(16px);

    transition: .35s ease;

}


.resultado-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 30px 70px rgba(0,0,0,.14);

}


/* =========================================================
   PARTE SUPERIOR
========================================================= */

.resultado-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 22px;

}


.figura-numero {

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 2px;

    opacity: .6;

}


.figura-tipo {

    padding: 7px 13px;

    border-radius: 50px;

    background: rgba(255,255,255,.09);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

}


/* =========================================================
   PREGUNTA
========================================================= */

.pregunta-figura {

    max-width: 850px;

    margin: 0 0 30px;

    font-size: 26px;

    line-height: 1.45;

}


/* =========================================================
   ESPACIO PARA IMAGEN
========================================================= */

.figura-visual {

    position: relative;

    width: 100%;

    min-height: 390px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 35px;

    box-sizing: border-box;

    border-radius: 27px;

    background: rgba(0,0,0,.08);

    border: 1px dashed rgba(255,255,255,.20);

    overflow: hidden;

}


.figura-visual::before {

    content: "FIGURA";

    position: absolute;

    top: 20px;

    left: 25px;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

    opacity: .25;

}


.figura-visual img {

    max-width: 100%;

    max-height: 480px;

    width: auto;

    height: auto;

    display: block;

    object-fit: contain;

    border-radius: 14px;

    cursor: zoom-in;

    transition: .35s ease;

}


.figura-visual img:hover {

    transform: scale(1.025);

}


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

.btn-ver-figura {

    position: absolute;

    right: 20px;

    bottom: 20px;

    border: none;

    padding: 11px 17px;

    border-radius: 50px;

    background: rgba(20,20,30,.8);

    color: white;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;

    backdrop-filter: blur(8px);

    transition: .3s ease;

}


.btn-ver-figura:hover {

    transform: translateY(-3px);

    background: rgba(20,20,30,.95);

}


/* =========================================================
   NOTA
========================================================= */

.figura-nota {

    margin-top: 18px;

    padding: 18px 22px;

    border-left: 3px solid rgba(255,255,255,.35);

    font-size: 13px;

    line-height: 1.75;

    text-align: justify;

    opacity: .72;

}


.figura-nota strong {

    opacity: 1;

}


.figura-nota span {

    opacity: .8;

}


/* =========================================================
   ANÁLISIS
========================================================= */

.resultado-analisis {

    margin-top: 30px;

    padding: 25px 28px;

    border-radius: 22px;

    background: rgba(255,255,255,.055);

}


.resultado-analisis span {

    display: block;

    margin-bottom: 10px;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2px;

    opacity: .5;

}


.resultado-analisis p {

    margin: 0;

    font-size: 15.5px;

    line-height: 1.9;

    text-align: justify;

}


.resultado-analisis strong {

    font-weight: 850;

}


/* =========================================================
   VISOR DE IMAGEN GRANDE
========================================================= */

.visor-imagen {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 40px;

    background: rgba(0,0,0,.88);

    backdrop-filter: blur(10px);

    opacity: 0;

    visibility: hidden;

    transition: .3s ease;

}


.visor-imagen.activo {

    opacity: 1;

    visibility: visible;

}


.visor-imagen img {

    max-width: 92vw;

    max-height: 88vh;

    object-fit: contain;

    border-radius: 15px;

    box-shadow: 0 30px 100px rgba(0,0,0,.5);

}


.cerrar-visor {

    position: fixed;

    top: 25px;

    right: 30px;

    width: 45px;

    height: 45px;

    border: none;

    border-radius: 50%;

    background: rgba(255,255,255,.15);

    color: white;

    font-size: 20px;

    cursor: pointer;

    z-index: 2;

}


.cerrar-visor:hover {

    background: rgba(255,255,255,.25);

}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 700px) {

    .resultados {

        padding: 70px 18px;

    }


    .resultados-header h2 {

        font-size: 38px;

    }


    .resultados-intro {

        grid-template-columns: 1fr;

        padding: 25px;

    }


    .bloque-seccion {

        gap: 17px;

    }


    .bloque-numero {

        width: 52px;

        height: 52px;

    }


    .bloque-seccion h3 {

        font-size: 24px;

    }


    .resultado-card {

        padding: 25px 20px;

        border-radius: 25px;

    }


    .pregunta-figura {

        font-size: 21px;

    }


    .figura-visual {

        min-height: 280px;

        padding: 20px;

    }


    .figura-visual img {

        max-height: 350px;

    }


    .btn-ver-figura {

        bottom: 12px;

        right: 12px;

        font-size: 10px;

        padding: 9px 12px;

    }


    .resultado-analisis {

        padding: 20px;

    }

}







/* =====================================================
   VISOR DE FIGURAS AMPLIADAS
===================================================== */

.visor-figuras {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba(8, 8, 20, 0.94);

    backdrop-filter: blur(15px);

    display: flex;

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

    padding: 30px;

    box-sizing: border-box;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition: opacity .3s ease,
                visibility .3s ease;

    z-index: 999999;

}


/* CUANDO SE ABRE */

.visor-figuras.mostrar {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}


/* IMAGEN GRANDE */

.visor-figuras img {

    display: block;

    max-width: 92%;

    max-height: 88%;

    width: auto;

    height: auto;

    object-fit: contain;

    border-radius: 18px;

    box-shadow:
        0 25px 80px rgba(0,0,0,.6);

    animation: aparecerFigura .3s ease;

}


/* ANIMACIÓN */

@keyframes aparecerFigura {

    from {

        transform: scale(.85);

        opacity: 0;

    }

    to {

        transform: scale(1);

        opacity: 1;

    }

}


/* BOTÓN CERRAR */

.cerrar-figura {

    position: absolute;

    top: 25px;

    right: 30px;

    width: 50px;

    height: 50px;

    border: none;

    border-radius: 50%;

    background: rgba(255,255,255,.15);

    color: white;

    font-size: 22px;

    font-weight: bold;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: .3s ease;

}


.cerrar-figura:hover {

    transform: rotate(90deg) scale(1.1);

    background: rgba(255,255,255,.25);

}


/* =====================================================
   IMÁGENES DE LAS FIGURAS
===================================================== */

.figura-visual img {

    cursor: zoom-in;

    transition: transform .3s ease;

}


.figura-visual img:hover {

    transform: scale(1.02);

}


/* =====================================================
   CELULAR
===================================================== */

@media (max-width: 700px) {

    .visor-figuras {

        padding: 15px;

    }

    .visor-figuras img {

        max-width: 96%;

        max-height: 85%;

    }

    .cerrar-figura {

        top: 15px;

        right: 15px;

        width: 42px;

        height: 42px;

        font-size: 18px;

    }

}













/* =====================================================
   METODOLOGÍA
===================================================== */

.metodologia {
    width: 100%;
    max-width: 1250px;
    margin: 80px auto;
    padding: 30px;
}


/* ENCABEZADO */

.metodologia-encabezado {
    text-align: center;
    margin-bottom: 45px;
}

.metodologia-etiqueta {
    display: inline-block;
    padding: 9px 18px;
    border-radius: 30px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
}

.metodologia-encabezado h2 {
    font-size: clamp(38px, 5vw, 62px);
    margin: 15px 0 10px;
}

.metodologia-encabezado p {
    max-width: 700px;
    margin: auto;
    line-height: 1.8;
    opacity: .85;
}


/* INTRODUCCIÓN */

.metodologia-introduccion {
    display: flex;
    gap: 25px;
    align-items: flex-start;
    padding: 35px;
    border-radius: 30px;
    background: rgba(255,255,255,0.10);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255,255,255,0.15);
    margin-bottom: 35px;
}

.intro-icono {
    min-width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.15);
    border-radius: 20px;
    font-size: 30px;
}

.metodologia-introduccion h3 {
    margin: 0 0 12px;
    font-size: 25px;
}

.metodologia-introduccion p {
    line-height: 1.8;
    margin-bottom: 12px;
}


/* DATOS */

.datos-metodologia {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin: 35px 0 55px;
}

.dato {
    text-align: center;
    padding: 28px 18px;
    border-radius: 25px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.15);
    transition: .3s;
}

.dato:hover {
    transform: translateY(-7px);
}

.dato span {
    font-size: 30px;
}

.dato strong {
    display: block;
    font-size: 32px;
    margin: 8px 0;
}

.dato p {
    margin: 0;
    opacity: .8;
}


/* CARACTERÍSTICAS */

.bloque-metodologia {
    margin-bottom: 60px;
}

.bloque-metodologia h3 {
    font-size: 28px;
    margin-bottom: 25px;
}

.caracteristicas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.caracteristicas > div {
    padding: 28px;
    border-radius: 25px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
}

.caracteristicas span {
    font-size: 27px;
}

.caracteristicas h4 {
    font-size: 21px;
    margin: 10px 0;
}

.caracteristicas p {
    line-height: 1.7;
    margin: 0;
    opacity: .82;
}


/* TÍTULO ACTIVIDADES */

.titulo-actividades {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 70px 0 35px;
}

.titulo-actividades > span {
    font-size: 45px;
}

.titulo-actividades h3 {
    font-size: 32px;
    margin: 0;
}

.titulo-actividades p {
    margin: 5px 0 0;
    opacity: .75;
}


/* TARJETAS DE ACTIVIDADES */

.actividad {
    position: relative;
    margin-bottom: 35px;
    padding: 35px;
    border-radius: 32px;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 15px 40px rgba(0,0,0,.12);
    overflow: hidden;
    transition: .35s;
}

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

.actividad-contenido {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.numero-actividad {
    position: absolute;
    top: 18px;
    right: 25px;
    font-size: 50px;
    font-weight: 900;
    opacity: .08;
}

.tipo-actividad {
    display: inline-block;
    padding: 7px 13px;
    border-radius: 20px;
    background: rgba(255,255,255,.12);
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
}

.actividad-texto h3 {
    font-size: 32px;
    margin: 16px 0;
}

.actividad-texto p {
    line-height: 1.8;
    opacity: .88;
}


/* HABILIDADES */

.habilidades {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 20px;
}

.habilidades span {
    padding: 8px 13px;
    border-radius: 20px;
    background: rgba(255,255,255,.12);
    font-size: 13px;
}


/* FIGURAS */

.figura-metodologia {
    margin: 0;
}

.imagen-contenedor {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    cursor: pointer;
    background: rgba(0,0,0,.15);
}

.imagen-contenedor img {
    width: 100%;
    height: 310px;
    object-fit: cover;
    display: block;
    transition: .4s;
}

.imagen-contenedor:hover img {
    transform: scale(1.05);
}

.ver-imagen {
    position: absolute;
    bottom: 15px;
    right: 15px;
    padding: 9px 14px;
    border-radius: 20px;
    background: rgba(0,0,0,.65);
    color: white;
    font-size: 13px;
    backdrop-filter: blur(8px);
}

.figura-metodologia figcaption {
    padding: 18px 5px 0;
    line-height: 1.6;
    font-size: 14px;
}

.figura-metodologia figcaption strong {
    font-weight: 800;
}

.figura-metodologia figcaption small {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.7;
    opacity: .75;
}


/* ENCUESTAS */

.encuestas-metodologia {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin: 60px 0;
}

.encuesta-card {
    padding: 35px;
    border-radius: 28px;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.13);
}

.encuesta-card span {
    font-size: 35px;
}

.encuesta-card h3 {
    font-size: 25px;
    margin: 15px 0 10px;
}

.encuesta-card p {
    line-height: 1.8;
    opacity: .8;
}


/* CIERRE */

.cierre-metodologia {
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 35px;
    border-radius: 30px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.16);
}

.cierre-icono {
    font-size: 45px;
}

.cierre-metodologia h3 {
    margin: 0 0 10px;
    font-size: 25px;
}

.cierre-metodologia p {
    margin: 0;
    line-height: 1.8;
    opacity: .85;
}


/* =====================================================
   VISOR DE IMÁGENES GRANDES
===================================================== */

.visor-imagen {
    position: fixed;
    inset: 0;
    z-index: 99999;

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

    padding: 30px;

    background: rgba(0,0,0,.88);
    backdrop-filter: blur(12px);

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

    transition: .3s;
}

.visor-imagen.activo {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.visor-imagen img {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;

    border-radius: 18px;

    box-shadow: 0 20px 80px rgba(0,0,0,.6);
}


.cerrar-visor {
    position: absolute;
    top: 25px;
    right: 30px;

    width: 48px;
    height: 48px;

    border: none;
    border-radius: 50%;

    background: white;
    color: #222;

    font-size: 22px;
    cursor: pointer;

    z-index: 2;

    transition: .25s;
}

.cerrar-visor:hover {
    transform: rotate(90deg) scale(1.08);
}


.sin-scroll {
    overflow: hidden;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 900px) {

    .datos-metodologia {
        grid-template-columns: repeat(2, 1fr);
    }

    .actividad-contenido {
        grid-template-columns: 1fr;
    }

    .caracteristicas {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .metodologia {
        padding: 15px;
    }

    .metodologia-introduccion {
        flex-direction: column;
        padding: 25px;
    }

    .datos-metodologia {
        grid-template-columns: 1fr 1fr;
    }

    .actividad {
        padding: 22px;
    }

    .actividad-texto h3 {
        font-size: 25px;
    }

    .imagen-contenedor img {
        height: 240px;
    }

    .encuestas-metodologia {
        grid-template-columns: 1fr;
    }

    .cierre-metodologia {
        flex-direction: column;
        text-align: center;
    }

}







/* =====================================================
   EVIDENCIAS
===================================================== */

.evidencias {
    max-width: 1250px;
    margin: 90px auto;
    padding: 30px;
}


/* ENCABEZADO */

.evidencias-header {
    text-align: center;
    margin-bottom: 65px;
}

.evidencias-tag {
    display: inline-block;
    padding: 9px 18px;
    border-radius: 30px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
}

.evidencias-header h2 {
    font-size: clamp(40px, 6vw, 65px);
    margin: 15px 0;
}

.evidencias-header p {
    max-width: 720px;
    margin: auto;
    line-height: 1.8;
    opacity: .8;
}


/* ETAPA */

.evidencia-etapa {
    margin-bottom: 75px;
}

.etapa-titulo {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    margin-bottom: 30px;
}

.etapa-numero {
    min-width: 65px;
    height: 65px;

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

    border-radius: 20px;

    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);

    font-size: 22px;
    font-weight: 900;
}

.etapa-titulo span {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    opacity: .7;
}

.etapa-titulo h3 {
    font-size: 32px;
    margin: 6px 0;
}

.etapa-titulo p {
    margin: 0;
    max-width: 800px;
    line-height: 1.7;
    opacity: .78;
}


/* GALERÍA */

.galeria-evidencias {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}


/* CARD */

.evidencia-card {
    margin: 0;

    padding: 15px;

    border-radius: 27px;

    background: rgba(255,255,255,.09);

    border: 1px solid rgba(255,255,255,.14);

    box-shadow: 0 15px 40px rgba(0,0,0,.12);

    transition: .35s;
}

.evidencia-card:hover {
    transform: translateY(-8px);
}


/* FOTO */

.foto-evidencia {
    position: relative;

    height: 260px;

    border-radius: 20px;

    overflow: hidden;

    cursor: pointer;

    background: rgba(0,0,0,.2);
}

.foto-evidencia img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: .4s;
}

.foto-evidencia:hover img {
    transform: scale(1.08);
}


/* BOTÓN VER */

.foto-evidencia span {
    position: absolute;

    bottom: 12px;
    right: 12px;

    padding: 8px 13px;

    border-radius: 20px;

    background: rgba(0,0,0,.7);

    color: white;

    font-size: 12px;

    backdrop-filter: blur(8px);
}


/* TEXTO */

.evidencia-card figcaption {
    padding: 17px 7px 5px;

    line-height: 1.5;
}

.evidencia-card figcaption strong {
    display: block;

    font-size: 16px;

    margin-bottom: 8px;
}

.evidencia-card figcaption small {
    display: block;

    font-size: 13px;

    line-height: 1.7;

    opacity: .7;
}


/* =====================================================
   VISOR GRANDE
===================================================== */

.visor-evidencia {
    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

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

    padding: 30px;

    background: rgba(0,0,0,.9);

    backdrop-filter: blur(12px);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition: .3s;
}

.visor-evidencia.mostrar {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}

.visor-evidencia img {
    max-width: 92vw;
    max-height: 88vh;

    object-fit: contain;

    border-radius: 18px;

    box-shadow: 0 20px 80px rgba(0,0,0,.6);
}


/* CERRAR */

.cerrar-evidencia {
    position: absolute;

    top: 25px;
    right: 30px;

    width: 48px;
    height: 48px;

    border: none;

    border-radius: 50%;

    background: white;

    color: #222;

    font-size: 22px;

    cursor: pointer;

    z-index: 2;

    transition: .3s;
}

.cerrar-evidencia:hover {
    transform: rotate(90deg) scale(1.1);
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 900px) {

    .galeria-evidencias {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 600px) {

    .evidencias {
        padding: 15px;
    }

    .galeria-evidencias {
        grid-template-columns: 1fr;
    }

    .etapa-titulo {
        flex-direction: column;
    }

    .etapa-titulo h3 {
        font-size: 27px;
    }

    .foto-evidencia {
        height: 280px;
    }

}











/* =====================================================
   🤖 CHATBOT DE LÉO
===================================================== */

.leo-chat-section {
    width: 100%;
    padding: 70px 20px;
}


.leo-chat-container {
    max-width: 1100px;
    margin: auto;

    display: grid;
    grid-template-columns: 280px 1fr;

    gap: 35px;

    align-items: center;
}


/* =====================================================
   LÉO
===================================================== */

.leo-chat-personaje {
    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 300px;
}


.leo-chat-personaje img {
    width: 230px;
    max-width: 100%;

    height: auto;

    object-fit: contain;

    filter: drop-shadow(0 15px 20px rgba(0,0,0,.15));
}


/* =====================================================
   CAJA DEL CHAT
===================================================== */

.leo-chat-box {

    background: rgba(255,255,255,.96);

    border-radius: 28px;

    padding: 25px;

    box-shadow:
        0 15px 45px rgba(60,30,100,.12);

    border: 1px solid rgba(120,80,180,.12);

    overflow: hidden;
}


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

.leo-chat-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;

    padding-bottom: 18px;

    border-bottom: 1px solid #eee;
}


.leo-chat-header h2 {

    margin: 0;

    font-family: "Poppins", sans-serif;

    font-size: 24px;

    font-weight: 800;
}


.leo-chat-header p {

    margin: 5px 0 0;

    font-size: 13px;

    color: #777;
}


.leo-online {

    white-space: nowrap;

    font-size: 12px;

    font-weight: 700;

    color: #6d3fc0;
}


/* =====================================================
   MENSAJES
===================================================== */

.leo-mensajes {

    height: 330px;

    overflow-y: auto;

    padding: 20px 5px;

    display: flex;

    flex-direction: column;

    gap: 14px;
}


/* =====================================================
   BURBUJAS
===================================================== */

.mensaje {

    max-width: 80%;

    padding: 13px 16px;

    border-radius: 18px;

    font-size: 14px;

    line-height: 1.6;

    animation: aparecerLeo .25s ease;
}


.mensaje p {

    margin: 5px 0 0;
}


.mensaje.leo {

    align-self: flex-start;

    background: #f0e9ff;

    color: #3f2868;

    border-bottom-left-radius: 5px;
}


.mensaje.usuario {

    align-self: flex-end;

    background: #6f42c1;

    color: white;

    border-bottom-right-radius: 5px;
}


@keyframes aparecerLeo {

    from {

        opacity: 0;

        transform: translateY(8px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* =====================================================
   SUGERENCIAS
===================================================== */

.leo-sugerencias {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 15px;
}


.leo-sugerencias button {

    border: 1px solid #ddd;

    background: white;

    border-radius: 20px;

    padding: 8px 12px;

    font-family: "Montserrat", sans-serif;

    font-size: 11px;

    cursor: pointer;

    transition: .2s;
}


.leo-sugerencias button:hover {

    transform: translateY(-2px);

    border-color: #7651c8;

    color: #7651c8;

    box-shadow: 0 5px 15px rgba(80,50,130,.12);
}


/* =====================================================
   INPUT
===================================================== */

.leo-input-area {

    display: flex;

    gap: 10px;

    background: #f7f5fb;

    padding: 7px;

    border-radius: 18px;
}


#leoPregunta {

    flex: 1;

    border: none;

    outline: none;

    background: transparent;

    padding: 12px;

    font-family: "Montserrat", sans-serif;

    font-size: 13px;
}


#leoPregunta::placeholder {

    color: #999;
}


/* =====================================================
   BOTÓN ENVIAR
===================================================== */

.leo-enviar {

    width: 45px;

    height: 45px;

    border: none;

    border-radius: 14px;

    background: #6f42c1;

    color: white;

    font-size: 20px;

    cursor: pointer;

    transition: .2s;
}


.leo-enviar:hover {

    transform: scale(1.05);

    background: #59319f;
}


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

@media (max-width: 800px) {

    .leo-chat-container {

        grid-template-columns: 1fr;

    }

    .leo-chat-personaje {

        min-height: 180px;

    }

    .leo-chat-personaje img {

        width: 170px;

    }

}


@media (max-width: 500px) {

    .leo-chat-section {

        padding: 40px 12px;

    }

    .leo-chat-box {

        padding: 18px;

        border-radius: 22px;

    }

    .leo-chat-header {

        flex-direction: column;

        align-items: flex-start;

    }

    .leo-mensajes {

        height: 280px;

    }

}







/* =====================================================
   🤖 LÉO CHATBOT
===================================================== */

#leo-chatbot {

    position: fixed;

    right: 25px;

    bottom: 25px;

    z-index: 99999;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

}


/* =====================================================
   BOTÓN DEL MUÑECO
===================================================== */

#leo-boton {

    width: 72px;

    height: 72px;

    border: none;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #8b5cf6,
            #6d28d9
        );

    box-shadow:
        0 10px 25px rgba(72, 35, 130, 0.35);

    font-size: 36px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: 0.3s ease;

    animation: leoFlota 3s ease-in-out infinite;

}


#leo-boton:hover {

    transform:
        scale(1.1)
        rotate(3deg);

    box-shadow:
        0 15px 35px rgba(72, 35, 130, 0.45);

}


/* =====================================================
   ANIMACIÓN
===================================================== */

@keyframes leoFlota {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-8px);

    }

}


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

#leo-ventana {

    position: absolute;

    right: 0;

    bottom: 88px;

    width: 370px;

    max-width: calc(100vw - 30px);

    height: 560px;

    background: #ffffff;

    border-radius: 24px;

    overflow: hidden;

    box-shadow:
        0 20px 60px rgba(41, 20, 70, 0.25);

    border:
        1px solid rgba(139, 92, 246, 0.15);

    display: none;

    flex-direction: column;

    animation: aparecerLeo 0.3s ease;

}


#leo-ventana.activo {

    display: flex;

}


@keyframes aparecerLeo {

    from {

        opacity: 0;

        transform:
            translateY(20px)
            scale(0.95);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* =====================================================
   CABECERA
===================================================== */

.leo-cabecera {

    min-height: 82px;

    padding: 15px 18px;

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #9333ea
        );

    color: white;

    display: flex;

    align-items: center;

    gap: 12px;

}


.leo-avatar {

    width: 48px;

    height: 48px;

    background: white;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 27px;

}


.leo-cabecera h3 {

    margin: 0;

    font-size: 20px;

    font-weight: 800;

}


.leo-cabecera span {

    display: block;

    font-size: 12px;

    margin-top: 3px;

    opacity: 0.9;

}


.leo-cerrar {

    margin-left: auto;

    border: none;

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

    color: white;

    width: 34px;

    height: 34px;

    border-radius: 50%;

    font-size: 24px;

    cursor: pointer;

}


.leo-cerrar:hover {

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

}


/* =====================================================
   MENSAJES
===================================================== */

#leo-mensajes {

    flex: 1;

    padding: 18px;

    overflow-y: auto;

    background:
        linear-gradient(
            180deg,
            #faf8ff,
            #ffffff
        );

}


.mensaje {

    max-width: 85%;

    padding: 12px 15px;

    margin-bottom: 12px;

    border-radius: 17px;

    font-size: 14px;

    line-height: 1.55;

    word-wrap: break-word;

}


.mensaje.leo {

    background: #f0e9ff;

    color: #3d285f;

    border-bottom-left-radius: 5px;

    margin-right: auto;

}


.mensaje.usuario {

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #9333ea
        );

    color: white;

    border-bottom-right-radius: 5px;

    margin-left: auto;

}


/* =====================================================
   SUGERENCIAS
===================================================== */

.leo-sugerencias {

    display: flex;

    gap: 7px;

    padding: 10px 12px;

    overflow-x: auto;

    background: white;

    border-top:
        1px solid #eee;

}


.leo-sugerencias button {

    white-space: nowrap;

    border: 1px solid #d8c8ff;

    background: #faf7ff;

    color: #6d28d9;

    padding: 8px 11px;

    border-radius: 20px;

    cursor: pointer;

    font-size: 12px;

    transition: 0.2s;

}


.leo-sugerencias button:hover {

    background: #ede5ff;

    transform: translateY(-2px);

}


/* =====================================================
   CAJA DE ESCRIBIR
===================================================== */

.leo-escribir {

    display: flex;

    gap: 8px;

    padding: 12px;

    background: white;

    border-top:
        1px solid #eee;

}


#leo-input {

    flex: 1;

    border:
        2px solid #eee;

    border-radius: 20px;

    padding: 11px 15px;

    outline: none;

    font-size: 14px;

    font-family: inherit;

    transition: 0.2s;

}


#leo-input:focus {

    border-color:
        #8b5cf6;

    box-shadow:
        0 0 0 3px rgba(
            139,
            92,
            246,
            0.1
        );

}


.leo-escribir > button {

    width: 43px;

    height: 43px;

    border: none;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #9333ea
        );

    color: white;

    font-size: 18px;

    cursor: pointer;

    transition: 0.2s;

}


.leo-escribir > button:hover {

    transform: scale(1.08);

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 600px) {

    #leo-chatbot {

        right: 15px;

        bottom: 15px;

    }


    #leo-boton {

        width: 70px;

        height: 70px;

        font-size: 31px;

    }


    #leo-ventana {

        width: calc(100vw - 30px);

        height: 520px;

        bottom: 78px;

    }

}






#leo-boton img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    display: block;
    border-radius: 50%;
}

.leo-avatar img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.mensaje-leo-img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
}

.mensaje-leo-contenido {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}