/* =========================================================
   VAK PROJECT — CSS LIMPIO
   ========================================================= */


/* =========================================================
   1. VARIABLES
   ========================================================= */

:root {
    --azul-oscuro: #16105a;
    --azul: #363ac1;
    --morado: #6854d0;
    --rosa: #fda4e7;
    --rosa-claro: #f8e5f5;
    --azul-claro: #e6eff8;
    --blanco: #ffffff;
    --gris: #f5f7fb;
    --texto: #23343a;
    --texto-suave: #667085;

    --sombra:
        0 10px 35px rgba(22, 16, 90, 0.10);

    --sombra-hover:
        0 20px 45px rgba(54, 58, 193, 0.20);

    --radio: 24px;
}


/* =========================================================
   2. RESET Y CONFIGURACIÓN GENERAL
   ========================================================= */

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

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

body {
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    color: var(--texto);
    line-height: 1.7;
    overflow-x: hidden;

    background:
        radial-gradient(circle at 10% 10%,
            rgba(253, 164, 231, 0.25),
            transparent 25%),
        radial-gradient(circle at 90% 80%,
            rgba(104, 84, 208, 0.15),
            transparent 25%),
        linear-gradient(135deg,
            #eef4fb,
            #f4f1fb,
            #eef4fb);
}

a {
    -webkit-tap-highlight-color: transparent;
}

section {
    max-width: 1250px;
    margin: auto;
    padding: 100px 5%;
    scroll-margin-top: 150px;
}


/* =========================================================
   3. FONDO DECORATIVO
   ========================================================= */

body::before,
body::after {
    content: "";
    position: fixed;
    border-radius: 50%;
    z-index: -1;
}

body::before {
    width: 350px;
    height: 350px;
    top: 100px;
    left: -180px;

    background: var(--rosa);
    opacity: 0.18;
    filter: blur(10px);

    animation:
        moverBurbuja 12s infinite alternate ease-in-out;
}

body::after {
    width: 400px;
    height: 400px;
    right: -150px;
    bottom: -180px;

    background: var(--morado);
    opacity: 0.12;
    filter: blur(15px);

    animation:
        moverBurbuja 15s infinite alternate-reverse ease-in-out;
}


/* =========================================================
   4. HEADER PRINCIPAL
   ========================================================= */

header {
    position: sticky;
    top: 0;
    z-index: 1000;

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

    padding: 12px 5%;

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

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

    border-bottom:
        1px solid rgba(54, 58, 193, 0.08);

    box-shadow:
        0 5px 25px rgba(22, 16, 90, 0.08);
}


/* ---------- LOGO ---------- */

.logo {
    display: flex;
    align-items: center;
    gap: 12px;

    color: var(--azul-oscuro);
    text-decoration: none;

    font-weight: 700;
    font-size: 1.05rem;
}

.logo img {
    width: 58px;
    height: 58px;

    object-fit: cover;
    border-radius: 50%;
    border: 3px solid white;

    box-shadow:
        0 5px 20px rgba(54, 58, 193, 0.20);

    transition: 0.4s ease;
}

.logo:hover img {
    transform:
        rotate(8deg) scale(1.08);
}


/* ---------- NAVEGACIÓN PRINCIPAL ---------- */

header nav {
    display: flex;
    align-items: center;
    gap: 5px;
}

header nav a {
    position: relative;

    padding: 10px 15px;

    color: var(--texto);
    text-decoration: none;

    font-size: 14px;
    font-weight: 600;

    border-radius: 30px;

    transition: 0.3s ease;
}

header nav a:hover {
    color: white;

    background:
        linear-gradient(135deg,
            var(--azul),
            var(--morado));

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(54, 58, 193, 0.25);
}


/* =========================================================
   5. MENÚ DEL PROYECTO
   ========================================================= */

.MyHeader {
    position: sticky;
    top: 82px;
    z-index: 900;

    padding: 10px 4%;

    overflow-x: auto;

    background:
        linear-gradient(90deg,
            rgba(22, 16, 90, 0.94),
            rgba(54, 58, 193, 0.94),
            rgba(104, 84, 208, 0.94));

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

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

    box-shadow:
        0 10px 35px rgba(22, 16, 90, 0.22);
}

.MyHeader nav {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 5px;
    min-width: max-content;
}

.MyHeader a {
    position: relative;

    display: inline-block;

    padding: 9px 14px;

    color: white;
    text-decoration: none;

    font-size: 13px;

    border-radius: 20px;

    white-space: nowrap;
    overflow: hidden;

    will-change: transform, background;

    transition: 0.3s ease;
}

.MyHeader a::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.18),
            transparent);

    transform: translateX(-120%);

    transition:
        transform 0.5s ease;
}

.MyHeader a:hover {
    background:
        rgba(255, 255, 255, 0.18);

    transform:
        translateY(-2px);
}

.MyHeader a:hover::before {
    transform:
        translateX(120%);
}

.MyHeader b {
    color: var(--rosa);
    font-size: 15px;
}


/* ---------- ELEMENTO ACTIVO ---------- */

.MyHeader a.activo {
    background:
        rgba(255, 255, 255, 0.18) !important;

    color:
        var(--rosa) !important;

    box-shadow:
        inset 0 -3px 0 var(--rosa),
        0 5px 15px rgba(255, 105, 180, 0.08);

    border-radius: 10px;

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

.MyHeader a.activo::before {
    transform: translateX(0);
    opacity: 0.35;
}

.MyHeader a.activo:hover {
    background:
        rgba(255, 255, 255, 0.24) !important;

    color:
        var(--rosa) !important;

    box-shadow:
        inset 0 -3px 0 var(--rosa),
        0 8px 20px rgba(255, 105, 180, 0.12);
}


/* =========================================================
   6. HERO
   ========================================================= */

.hero {
    position: relative;
    isolation: isolate;

    min-height: 88vh;

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

    gap: 60px;

    max-width: 1250px;
    margin: auto;

    padding: 100px 5% 80px;
}

.hero::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -150px;
    top: 30px;

    background:
        radial-gradient(circle,
            rgba(253, 164, 231, 0.35),
            transparent 65%);

    z-index: -1;
}

.hero-texto {
    position: relative;

    width: 55%;

    z-index: 2;

    animation:
        aparecerIzquierda 1s ease forwards;
}

.hero-texto h1 {
    color: var(--azul-oscuro);

    font-size:
        clamp(38px, 5vw, 65px);

    line-height: 1.1;

    font-weight: 800;

    letter-spacing: -2px;

    text-shadow:
        0 10px 30px rgba(22, 16, 90, 0.08);
}

.hero-texto h1 span {
    color: var(--azul);

    background:
        linear-gradient(90deg,
            var(--azul),
            var(--morado));

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-texto h3 {
    display: inline-block;

    margin-top: 25px;
    padding: 8px 18px;

    color: var(--morado);

    font-size: 22px;
    font-weight: 600;

    border-radius: 50px;

    background:
        rgba(104, 84, 208, 0.08);

    border:
        1px solid rgba(104, 84, 208, 0.15);
}

.hero-texto p {
    margin-top: 8px;

    color: var(--texto-suave);

    font-size: 17px;
}


/* ---------- IMAGEN HERO ---------- */

.hero-imagen {
    position: relative;

    width: 45%;

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

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

.hero-imagen img {
    width: min(450px, 90%);

    aspect-ratio: 1;

    object-fit: cover;

    border-radius: 50%;

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

    box-shadow:
        0 25px 60px rgba(54, 58, 193, 0.22);

    transition: 0.5s ease;
}

.hero-imagen img:hover {
    transform:
        scale(1.04) rotate(2deg);

    box-shadow:
        0 30px 70px rgba(253, 164, 231, 0.35);
}

.hero-imagen::before {
    content: "";

    position: absolute;

    width: 110%;
    height: 110%;

    border-radius: 50%;

    border:
        2px dashed rgba(104, 84, 208, 0.25);

    animation:
        girar 18s linear infinite;
}

.hero-imagen::after {
    content: "VAK";

    position: absolute;

    right: 5%;
    bottom: 10%;

    width: 75px;
    height: 75px;

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

    border-radius: 50%;

    background:
        linear-gradient(135deg,
            var(--azul),
            var(--morado));

    color: white;

    font-size: 20px;
    font-weight: 800;

    box-shadow:
        0 15px 30px rgba(54, 58, 193, 0.30);

    animation:
        flotar 3s infinite ease-in-out;
}


/* =========================================================
   7. BOTÓN PRINCIPAL
   ========================================================= */

.boton {
    position: relative;

    display: inline-flex;
    align-items: center;

    gap: 10px;

    margin-top: 30px;
    padding: 15px 30px;

    border-radius: 50px;

    background:
        linear-gradient(135deg,
            var(--azul-oscuro),
            var(--azul));

    color: white;
    text-decoration: none;

    font-weight: 700;

    overflow: hidden;

    box-shadow:
        0 10px 25px rgba(54, 58, 193, 0.25);

    transition: 0.4s ease;
}

.boton::after {
    content: "→";

    font-size: 20px;

    transition:
        transform 0.3s ease;
}

.boton::before {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.35),
            transparent);

    transform:
        skewX(-20deg);

    transition:
        left 0.6s ease;
}

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

    background:
        linear-gradient(135deg,
            var(--morado),
            var(--rosa));

    color:
        var(--azul-oscuro);

    box-shadow:
        0 18px 35px rgba(54, 58, 193, 0.35);
}

.boton:hover::after {
    transform:
        translateX(5px);
}

.boton:hover::before {
    left: 140%;
}


/* =========================================================
   8. TÍTULOS Y TEXTOS
   ========================================================= */

.titulo {
    position: relative;

    text-align: center;

    margin-bottom: 55px;
}

.titulo h2 {
    display: inline-block;

    position: relative;

    color: var(--azul-oscuro);

    font-size:
        clamp(32px, 4vw, 48px);

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: -1px;

    text-shadow:
        0 5px 20px rgba(54, 58, 193, 0.10);

    transition:
        transform 0.4s ease;
}

.titulo:hover h2 {
    transform:
        translateY(-3px);
}

.titulo h2::after {
    content: "";

    display: block;

    width: 110px;
    height: 6px;

    margin:
        15px auto 0;

    border-radius: 20px;

    background:
        linear-gradient(90deg,
            var(--azul),
            var(--rosa));

    box-shadow:
        0 5px 15px rgba(104, 84, 208, 0.25);
}

section>p,
section p {
    color: var(--texto);
    font-size: 16px;
}

.contenido {
    max-width: 1100px;
    margin: auto;
}

.contenido p,
section>p {
    width: 100%;

    margin:
        0 auto 25px;

    text-align: justify;

    line-height: 1.9;
}


/* =========================================================
   9. TARJETAS
   ========================================================= */

.cards {
    display: grid;

    grid-template-columns:
        repeat(auto-fit,
            minmax(280px, 1fr));

    gap: 25px;

    max-width: 1100px;

    margin:
        30px auto;
}

.card {
    position: relative;

    padding: 30px;

    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, 0.96),
            rgba(248, 245, 255, 0.90));

    border:
        1px solid rgba(104, 84, 208, 0.12);

    border-radius:
        var(--radio);

    box-shadow:
        var(--sombra);

    overflow: hidden;

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

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

.card::before {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    right: -40px;
    top: -40px;

    background: var(--rosa);

    opacity: 0.25;

    border-radius: 50%;

    transition:
        transform 0.5s ease;
}

.card::after {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(90deg,
            var(--azul),
            var(--morado),
            var(--rosa));

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        transform 0.45s ease;
}

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

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

    border-color:
        rgba(104, 84, 208, 0.25);
}

.card:hover::before {
    transform:
        scale(2);
}

.card:hover::after {
    transform:
        scaleX(1);
}

.card h3 {
    position: relative;

    margin-bottom: 15px;

    color:
        var(--azul-oscuro);

    font-size: 22px;
}

.card p {
    position: relative;

    text-align: justify;

    line-height: 1.8;
}

.card i {
    position: relative;

    display: inline-flex;

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

    width: 50px;
    height: 50px;

    margin-bottom: 15px;

    border-radius: 15px;

    background:
        linear-gradient(135deg,
            var(--azul),
            var(--morado));

    color: white;

    font-size: 20px;

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

    will-change: transform;
}

.card:hover i {
    transform:
        rotate(-5deg) scale(1.12);

    box-shadow:
        0 10px 25px rgba(104, 84, 208, 0.30);
}


/* ---------- SEGUNDO GRUPO DE TARJETAS ---------- */

.cards_2 {
    display: grid;

    grid-template-columns:
        repeat(auto-fit,
            minmax(240px, 1fr));

    gap: 25px;

    max-width: 1100px;

    margin:
        30px auto;

    padding: 0;

    background: transparent;

    box-shadow: none;
}


/* =========================================================
   10. PREGUNTA PROBLEMA
   ========================================================= */

#pregunta {
    text-align: center;
}

.pregunta {
    max-width: 900px;
    margin: auto;
    padding: 45px;

    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.95),
            rgba(248, 229, 245, 0.95));

    border-radius: 30px;
    border-left: 7px solid var(--azul);

    box-shadow: var(--sombra);

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

.pregunta p {
    width: 100%;
    margin: 0;

    text-align: center;

    color: var(--azul-oscuro);

    font-size: 23px;
    font-weight: 600;
    line-height: 1.6;
}


/* =========================================================
   11. IMÁGENES DEL PROYECTO
   ========================================================= */

.organigrama,
.tabla {
    display: block;

    max-width: 90%;
    height: auto;

    margin: 45px auto;

    border-radius: 20px;

    box-shadow:
        0 15px 40px rgba(22, 16, 90, 0.15);

    cursor: zoom-in;

    transition: 0.5s ease;
}

.organigrama {
    width: 750px;
}

.tabla {
    width: 500px;
}

.organigrama:hover,
.tabla:hover {
    transform: scale(1.02);

    filter:
        saturate(1.05) brightness(1.02);

    box-shadow:
        0 20px 50px rgba(54, 58, 193, 0.25);
}


/* =========================================================
   12. FICHAS
   ========================================================= */

.fichas {
    width: 29%;

    margin: 2% 1.5%;

    border-radius: 20px;

    box-shadow:
        0 10px 30px rgba(22, 16, 90, 0.12);

    cursor: zoom-in;

    transition: 0.5s ease;
}

.fichas:hover {
    transform:
        translateY(-12px) rotate(1deg);

    filter:
        saturate(1.05) brightness(1.02);

    box-shadow:
        0 20px 40px rgba(54, 58, 193, 0.25);
}


/* =========================================================
   13. RECURSOS / KAHOOT
   ========================================================= */

.card_3 {
    display: inline-block;
    vertical-align: top;

    width: 22%;
    min-height: 280px;

    margin: 1.3%;
    padding: 20px;

    background: white;

    border:
        2px solid rgba(253, 164, 231, 0.45);

    border-radius: 25px;

    box-shadow: var(--sombra);

    text-decoration: none;

    overflow: hidden;

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

    transition:
        transform 0.4s ease,
        opacity 0.7s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}

.card_3:hover {
    transform:
        translate3d(0, -12px, 0);

    border-color: var(--morado);

    box-shadow:
        0 20px 40px rgba(104, 84, 208, 0.20);
}

.card_3 h4 {
    margin-bottom: 20px;

    color: var(--azul-oscuro);

    font-size: 18px;

    text-align: center;
}

.card_3 img {
    display: block;

    width: 80%;
    height: 160px;

    margin: auto;

    object-fit: cover;

    border-radius: 15px;

    border:
        3px solid var(--rosa-claro);

    transition:
        transform 0.4s ease;
}

.card_3:hover img {
    transform: scale(1.05);
}


/* ---------- ENTRADA ESCALONADA ---------- */

.card_3:nth-of-type(1) {
    transition-delay: 0.05s;
}

.card_3:nth-of-type(2) {
    transition-delay: 0.15s;
}

.card_3:nth-of-type(3) {
    transition-delay: 0.25s;
}

.card_3:nth-of-type(4) {
    transition-delay: 0.35s;
}


/* =========================================================
   14. IFRAMES / VIDEOS
   ========================================================= */

iframe {
    display: block;

    width: min(800px, 90%);
    height: 450px;

    margin: 50px auto;

    border: none;
    border-radius: 25px;

    box-shadow:
        0 20px 50px rgba(22, 16, 90, 0.20);

    transition: 0.4s ease;
}

iframe:hover {
    transform: translateY(-5px);

    box-shadow:
        0 25px 60px rgba(54, 58, 193, 0.25);
}


/* =========================================================
   15. RESULTADOS / GRÁFICAS
   ========================================================= */

.graficas,
.graficas2,
.graficas3 {
    display: flex;
    align-items: center;

    gap: 40px;

    width: 100%;

    margin: 35px 0;
    padding: 35px;

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

    border:
        1px solid rgba(54, 58, 193, 0.08);

    border-radius: 28px;

    box-shadow: var(--sombra);

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

    transition: 0.4s ease;
}

.graficas:hover,
.graficas2:hover,
.graficas3:hover {
    transform: translateY(-5px);

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

.graficas p,
.graficas2 p,
.graficas3 p {
    flex: 1;

    width: auto;

    margin: 0;
    padding: 0;

    text-align: justify;
}

.graficas img,
.graficas2 img,
.graficas3 img {
    width: 38%;
    max-height: 400px;

    object-fit: contain;

    border-radius: 15px;

    cursor: zoom-in;
}


/* =========================================================
   16. KAHOOT / GRÁFICAS COMPARATIVAS
   ========================================================= */

.titlekahoot {
    margin: 50px 0 20px;

    color: var(--azul-oscuro);

    font-size: 24px;
    font-weight: 800;

    text-align: center;
}

.graficax {
    display: grid;

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

    gap: 25px;

    width: 100%;

    margin: 25px 0 50px;
}

.graficax1,
.graficax2 {
    padding: 25px;

    background:
        linear-gradient(135deg,
            #ffffff,
            #f8f5ff);

    border-radius: 25px;

    box-shadow: var(--sombra);

    text-align: center;

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

    transition: 0.4s ease;
}

.graficax1:hover,
.graficax2:hover {
    transform: translateY(-8px);

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

.graficax1 img,
.graficax2 img {
    width: 100%;
    max-height: 400px;

    margin-bottom: 10px;

    object-fit: contain;

    border-radius: 15px;

    cursor: zoom-in;
}

.graficax1 p,
.graficax2 p {
    width: 100%;
    margin: 0;

    color: var(--morado);

    font-weight: 700;

    text-align: center;
}


/* =========================================================
   17. CONCLUSIONES
   ========================================================= */

#conclusiones .cards ul {
    display: grid;

    grid-template-columns:
        repeat(auto-fit,
            minmax(280px, 1fr));

    gap: 25px;

    list-style: none;
}

#conclusiones .card {
    padding: 30px;
}

#conclusiones li {
    line-height: 1.8;
    text-align: justify;
}


/* =========================================================
   18. REFERENCIAS
   ========================================================= */

#referencias {
    max-width: 1400px;
}


/* ---------- ETIQUETA ---------- */

.seccion-etiqueta {
    display: inline-block;

    padding: 7px 16px;
    margin-bottom: 15px;

    border-radius: 50px;

    background:
        rgba(104, 84, 208, 0.08);

    color: var(--morado);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


/* ---------- SUBTÍTULO ---------- */

.subtitulo-referencias {
    max-width: 650px;

    margin:
        20px auto 0 !important;

    color:
        var(--texto-suave) !important;

    font-size:
        15px !important;

    text-align:
        center !important;
}


/* ---------- CONTROLES ---------- */

.referencias-controles {
    max-width: 950px;

    margin:
        0 auto 40px;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 18px;
}


/* ---------- BUSCADOR ---------- */

.referencias-buscador {
    position: relative;

    width:
        min(600px, 100%);
}

.referencias-buscador i {
    position: absolute;

    left: 18px;
    top: 50%;

    color: var(--morado);

    transform:
        translateY(-50%);
}

.referencias-buscador input {
    width: 100%;

    padding:
        15px 20px 15px 48px;

    outline: none;

    border:
        1px solid rgba(104, 84, 208, 0.18);

    border-radius: 50px;

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

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

    color: var(--texto);

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

    font-size: 14px;

    box-shadow:
        0 10px 30px rgba(22, 16, 90, 0.06);

    transition: 0.3s ease;
}

.referencias-buscador input:focus {
    border-color:
        var(--morado);

    box-shadow:
        0 10px 35px rgba(104, 84, 208, 0.16);

    transform:
        translateY(-2px);
}

.referencias-buscador input::placeholder {
    color: #98a0b3;
}


/* ---------- FILTROS ---------- */

.referencias-filtros {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 8px;
}

.filtro {
    padding:
        9px 16px;

    border:
        1px solid rgba(104, 84, 208, 0.16);

    border-radius: 50px;

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

    color: var(--texto-suave);

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

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    transition:
        all 0.3s ease;

    -webkit-tap-highlight-color:
        transparent;
}

.filtro:hover {
    transform:
        translateY(-2px);

    border-color:
        var(--morado);

    color:
        var(--morado);
}

.filtro.activo {
    border-color:
        transparent;

    background:
        linear-gradient(135deg,
            var(--azul),
            var(--morado));

    color: white;

    box-shadow:
        0 8px 20px rgba(54, 58, 193, 0.22);
}


/* ---------- CONTADOR ---------- */

.contador-referencias {
    margin:
        0 !important;

    color:
        var(--texto-suave) !important;

    font-size:
        13px !important;

    text-align:
        center !important;
}

.contador-referencias strong {
    color:
        var(--morado);
}


/* ---------- GRID ---------- */

.referencias-grid {
    display: grid;

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

    gap: 24px;

    max-width: 1150px;

    margin:
        50px auto 0;
}


/* ---------- TARJETA DE REFERENCIA ---------- */

.referencia {
    position: relative;

    display: grid;

    grid-template-columns:
        48px 55px 1fr;

    gap: 18px;

    padding: 28px;

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

    border:
        1px solid rgba(104, 84, 208, 0.12);

    border-radius: 24px;

    box-shadow:
        0 12px 35px rgba(22, 16, 90, 0.08);

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

    overflow: hidden;

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

.referencia::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 4px;
    height: 100%;

    background:
        linear-gradient(180deg,
            var(--azul),
            var(--morado),
            var(--rosa));
}

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

    border-color:
        rgba(104, 84, 208, 0.30);

    box-shadow:
        0 25px 55px rgba(54, 58, 193, 0.16);
}


/* ---------- NÚMERO ---------- */

.referencia-numero {
    padding-top: 5px;

    color:
        var(--texto-suave);

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


/* ---------- ICONO ---------- */

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

    display: flex;

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

    border-radius: 16px;

    background:
        linear-gradient(135deg,
            var(--azul),
            var(--morado));

    color: white;

    font-size: 20px;

    box-shadow:
        0 10px 25px rgba(54, 58, 193, 0.22);

    transition:
        transform 0.4s ease;

    will-change: transform;
}

.referencia:hover .referencia-icono {
    transform:
        rotate(-6deg) scale(1.08);
}


/* ---------- TIPO ---------- */

.referencia-tipo {
    display: inline-block;

    margin-bottom: 7px;

    color:
        var(--morado);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.2px;
}


/* ---------- AUTOR ---------- */

.referencia h3 {
    margin:
        0 0 10px;

    color:
        var(--azul-oscuro);

    font-size: 17px;

    line-height: 1.45;
}


/* ---------- DESCRIPCIÓN ---------- */

.referencia p {
    margin:
        0 0 18px;

    color:
        var(--texto-suave);

    font-size: 14px;

    line-height: 1.7;

    text-align: left;
}


/* ---------- BOTÓN ---------- */

.referencia-boton {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        9px 15px;

    border-radius: 50px;

    background:
        rgba(54, 58, 193, 0.08);

    color:
        var(--azul);

    text-decoration: none;

    font-size: 12px;
    font-weight: 700;

    transition:
        all 0.3s ease;

    -webkit-tap-highlight-color:
        transparent;
}

.referencia-boton:hover {
    background:
        linear-gradient(135deg,
            var(--azul),
            var(--morado));

    color: white;

    transform:
        translateX(4px);
}

.referencia-boton i {
    transition:
        transform 0.3s ease;
}

.referencia-boton:hover i {
    transform:
        translateX(3px) rotate(-5deg);
}


/* ---------- FILTRADO ---------- */

.referencia.oculta {
    display: none;
}

.referencia.mostrada {
    animation:
        aparecerReferencia 0.45s ease both;
}

@keyframes aparecerReferencia {

    from {
        opacity: 0;

        transform:
            translateY(15px) scale(0.98);
    }

    to {
        opacity: 1;

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

/* =========================================================
   19. FOOTER
   ========================================================= */

footer {
    margin-top: 50px;

    padding: 35px 20px;

    color: white;

    text-align: center;

    background:
        linear-gradient(135deg,
            var(--azul-oscuro),
            var(--morado));

    border-radius:
        30px 30px 0 0;

    box-shadow:
        0 -10px 30px rgba(22, 16, 90, 0.12);
}

footer p {
    margin: 0;

    font-size: 14px;

    opacity: 0.9;
}

/* =========================================================
   19. ANIMACIONES DE ENTRADA
   ========================================================= */

/* Clases utilizadas por JavaScript */
.scroll-animado {
    opacity: 0;
    transform: translate3d(0, 45px, 0);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}

.scroll-animado.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}


/* ---------- ANIMACIONES DEL HERO ---------- */

@keyframes aparecerIzquierda {
    from {
        opacity: 0;
        transform: translateX(-80px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes flotar {

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

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

@keyframes moverBurbuja {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(40px, -30px);
    }
}

@keyframes girar {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   20. BARRA DE PROGRESO
   ========================================================= */

.barra-progreso {
    position: fixed;
    top: 0;
    left: 0;

    width: 0%;
    height: 4px;

    background:
        linear-gradient(90deg,
            var(--rosa),
            var(--azul),
            var(--morado));

    z-index: 9999;

    box-shadow:
        0 0 10px rgba(104, 84, 208, 0.5);

    transition: width 0.05s linear;
}


/* =========================================================
   21. BOTÓN VOLVER ARRIBA
   ========================================================= */

.boton-arriba {
    position: fixed;

    right: 25px;
    bottom: 25px;

    width: 50px;
    height: 50px;

    border: none;
    border-radius: 50%;

    background:
        linear-gradient(135deg,
            var(--azul),
            var(--morado));

    color: white;
    font-size: 25px;

    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    transform: translateY(20px);

    transition: 0.4s ease;

    z-index: 6000;

    box-shadow:
        0 10px 25px rgba(54, 58, 193, 0.30);

    -webkit-tap-highlight-color: transparent;
}

.boton-arriba.mostrar {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.boton-arriba:hover {
    transform: translateY(-5px);

    background:
        linear-gradient(135deg,
            var(--rosa),
            var(--morado));

    color: var(--azul-oscuro);

    box-shadow:
        0 15px 35px rgba(104, 84, 208, 0.35);
}


/* =========================================================
   22. MICROINTERACCIONES
   ========================================================= */

.boton,
.referencia-boton,
.filtro {
    -webkit-tap-highlight-color: transparent;
}

.boton:active,
.referencia-boton:active,
.filtro:active {
    transform: scale(0.96);
}


/* =========================================================
   23. RESPONSIVE — TABLETS
   ========================================================= */

@media (max-width: 950px) {

    /* ---------- REFERENCIAS ---------- */

    .referencias-grid {
        grid-template-columns: 1fr;
        max-width: 750px;
    }
}


@media (max-width: 900px) {

    /* ---------- HEADER ---------- */

    header {
        flex-direction: column;
        gap: 12px;
        padding: 12px 20px;
    }

    .MyHeader {
        top: 105px;
    }


    /* ---------- HERO ---------- */

    .hero {
        flex-direction: column;
        gap: 35px;
        text-align: center;
        padding-top: 70px;
    }

    .hero-texto,
    .hero-imagen {
        width: 100%;
    }

    .hero-texto h1 {
        font-size:
            clamp(36px,
                7vw,
                52px);
    }

    .hero-texto p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-imagen img {
        width: min(400px, 70%);
    }


    /* ---------- GRÁFICAS ---------- */

    .graficas,
    .graficas2,
    .graficas3 {
        flex-direction: column;
        gap: 30px;
    }

    .graficas img,
    .graficas2 img,
    .graficas3 img {
        width: 70%;
    }


    /* ---------- RECURSOS ---------- */

    .card_3 {
        width: 45%;
    }


    /* ---------- REFERENCIAS ---------- */

    .referencia {
        grid-template-columns:
            40px 55px 1fr;
    }
}


/* =========================================================
   24. RESPONSIVE — MÓVILES
   ========================================================= */

@media (max-width: 600px) {

    body {
        font-size: 14px;
    }


    /* ---------- HEADER ---------- */

    header {
        padding: 10px 15px;
    }

    .logo {
        font-size: 0.9rem;
    }

    .logo img {
        width: 48px;
        height: 48px;
    }

    header nav {
        width: 100%;

        overflow-x: auto;
        flex-wrap: nowrap;

        justify-content: flex-start;

        padding-bottom: 3px;
    }

    header nav a {
        flex: 0 0 auto;

        font-size: 12px;

        padding: 7px 10px;
    }


    /* ---------- MENÚ DEL PROYECTO ---------- */

    .MyHeader {
        top: 112px;
        padding: 7px 5px;
    }

    .MyHeader nav {
        gap: 3px;
        justify-content: flex-start;
    }

    .MyHeader a {
        font-size: 11px;
        padding: 8px 10px;
    }

    .MyHeader a.activo {
        box-shadow:
            inset 0 -2px 0 var(--rosa);
    }


    /* ---------- HERO ---------- */

    .hero {
        min-height: auto;

        padding:
            55px 18px;

        gap: 35px;
    }

    .hero-texto h1 {
        font-size:
            clamp(31px,
                10vw,
                40px);

        line-height: 1.12;
        letter-spacing: -1px;
    }

    .hero-texto h3 {
        font-size: 16px;
        padding: 7px 14px;
    }

    .hero-texto p {
        font-size: 14px;
    }

    .hero-imagen {
        margin-top: 20px;
    }

    .hero-imagen img {
        width: min(300px, 80vw);
    }

    .hero-imagen::after {
        width: 58px;
        height: 58px;
        font-size: 15px;
    }


    /* ---------- SECCIONES ---------- */

    section {
        padding: 65px 17px;
        scroll-margin-top: 145px;
    }

    .titulo {
        margin-bottom: 30px;
    }

    .titulo h2 {
        font-size:
            clamp(28px,
                8vw,
                36px);
    }

    .contenido p,
    section>p {
        text-align: left;
        font-size: 15px;
        line-height: 1.8;
    }


    /* ---------- PREGUNTA ---------- */

    .pregunta {
        padding: 30px 20px;
    }

    .pregunta p {
        font-size: 18px;
    }


    /* ---------- IMÁGENES ---------- */

    .organigrama,
    .tabla {
        max-width: 100%;
    }

    .fichas {
        width: 90%;
        margin: 5%;
    }


    /* ---------- RECURSOS ---------- */

    .card_3 {
        display: block;
        width: 90%;
        margin: 20px auto;
    }


    /* ---------- VIDEOS ---------- */

    iframe {
        width: 100%;
        height: 240px;
        margin: 35px auto;
    }


    /* ---------- GRÁFICAS ---------- */

    .graficas,
    .graficas2,
    .graficas3 {
        padding: 18px;
        gap: 25px;
        border-radius: 20px;
    }

    .graficas img,
    .graficas2 img,
    .graficas3 img {
        width: 100%;
    }


    /* ---------- KAHOOT ---------- */

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


    /* ---------- REFERENCIAS ---------- */

    .referencias-controles {
        gap: 14px;
        margin-bottom: 30px;
    }

    .referencias-buscador {
        width: 100%;
    }

    .referencias-buscador input {
        font-size: 13px;

        padding:
            13px 15px 13px 43px;
    }

    .referencias-filtros {
        width: 100%;

        overflow-x: auto;

        justify-content: flex-start;
        flex-wrap: nowrap;

        padding:
            4px 2px 8px;

        scrollbar-width: none;
    }

    .referencias-filtros::-webkit-scrollbar {
        display: none;
    }

    .filtro {
        flex: 0 0 auto;
    }

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

    .referencia {
        grid-template-columns:
            32px 44px 1fr;

        gap: 10px;

        padding: 18px;
        border-radius: 20px;
    }

    .referencia-numero {
        font-size: 11px;
    }

    .referencia-icono {
        width: 42px;
        height: 42px;

        border-radius: 13px;

        font-size: 16px;
    }

    .referencia h3 {
        font-size: 14px;
        line-height: 1.4;
    }

    .referencia p {
        font-size: 12px;
        line-height: 1.6;
    }

    .referencia-boton {
        font-size: 11px;
        padding: 8px 12px;
    }


    /* ---------- BOTÓN ARRIBA ---------- */

    .boton-arriba {
        right: 15px;
        bottom: 15px;

        width: 45px;
        height: 45px;

        font-size: 20px;
    }
}


/* =========================================================
   25. ACCESIBILIDAD
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;
    }
}


/* =========================================================
   26. METODOLOGÍA
   ========================================================= */

#metodologia p {
    text-align: justify;
}

/* =========================================================
   🤖 VAKI — MASCOTA INTERACTIVA
   ========================================================= */


/* =========================================================
   📦 CONTENEDOR GENERAL
   ========================================================= */

.vaki-container {
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 5000;

    font-family:
        'Poppins',
        Arial,
        Helvetica,
        sans-serif;

    /* Movimiento suave al aparecer/desaparecer "Volver arriba" */
    transition:
        bottom 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: bottom;
}

/* =========================================================
   🐾 BOTÓN DE VAKI — MASCOTA THANOS
   ========================================================= */

.vaki-boton {

    position: relative;

    width: 125px;
    height: 165px;

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

    padding: 0;

    border: none;
    background: transparent;

    cursor: pointer;

    z-index: 5002;

    -webkit-tap-highlight-color: transparent;

    transition:
        transform 0.35s ease,
        filter 0.35s ease;
}


/* =========================================================
   👑 MASCOTA THANOS
   ========================================================= */

.vaki-mascota {

    position: relative;

    z-index: 2;

    width: 125px;
    height: 160px;

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

    background: transparent;

    border-radius: 0;

    box-shadow: none;

    overflow: visible;

    animation:
        vakiFlotar 3.2s ease-in-out infinite;

    transform-origin: bottom center;

    transition:
        transform 0.35s ease,
        filter 0.35s ease;
}


/* =========================================================
   🖼️ IMAGEN COMPLETA DE THANOS
   ========================================================= */

.vaki-mascota img {

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: bottom center;

    display: block;

    border-radius: 0;

    pointer-events: none;
    user-select: none;

    filter:
        drop-shadow(0 8px 12px rgba(22, 16, 90, 0.22));

    transition:
        transform 0.35s ease,
        filter 0.35s ease;
}

/* =========================================================
   🗨️ GLOBO DE BIENVENIDA
   ========================================================= */

.vaki-saludo {

    position: absolute;

    right: 74px;
    top: -5px;

    width: max-content;
    max-width: 190px;

    padding: 10px 14px;

    border-radius:
        16px 16px 4px 16px;

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

    color:
        var(--azul-oscuro);

    border:
        1px solid rgba(104, 84, 208, 0.15);

    box-shadow:
        0 10px 25px rgba(22, 16, 90, 0.16);

    backdrop-filter:
        blur(12px);

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

    font-family:
        'Poppins',
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        11px;

    font-weight:
        700;

    line-height:
        1.4;

    text-align:
        center;

    white-space:
        nowrap;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(8px) scale(0.85);

    transform-origin:
        bottom right;

    pointer-events:
        none;

    z-index:
        10;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease,
        transform 0.35s ease;
}


/* =========================================================
   🔻 COLITA DEL GLOBO
   ========================================================= */

.vaki-saludo::after {

    content: "";

    position: absolute;

    right: -7px;
    bottom: 10px;

    width: 14px;
    height: 14px;

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

    border-top:
        1px solid rgba(104, 84, 208, 0.15);

    border-right:
        1px solid rgba(104, 84, 208, 0.15);

    transform:
        rotate(45deg);
}


/* =========================================================
   👋 SALUDO INICIAL
   ========================================================= */

.vaki-container.vaki-entrada .vaki-saludo {

    animation:
        vakiSaludoEntrada 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s forwards;
}


.vaki-container.vaki-entrada .vaki-mascota {

    animation:
        vakiEntradaMascota 1s cubic-bezier(0.34, 1.56, 0.64, 1) both,
        vakiFlotar 3.2s ease-in-out 1s infinite;
}


@keyframes vakiSaludoEntrada {

    0% {

        opacity: 0;

        visibility: visible;

        transform:
            translateY(12px) scale(0.7);
    }

    70% {

        opacity: 1;

        transform:
            translateY(-3px) scale(1.05);
    }

    100% {

        opacity: 1;

        visibility: visible;

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


@keyframes vakiEntradaMascota {

    0% {

        opacity: 0;

        transform:
            translateY(30px) scale(0.75) rotate(-5deg);
    }

    60% {

        opacity: 1;

        transform:
            translateY(-7px) scale(1.05) rotate(3deg);
    }

    100% {

        opacity: 1;

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


/* =========================================================
   💬 EL GLOBO SE MANTIENE UN MOMENTO
   ========================================================= */

.vaki-container.vaki-entrada .vaki-saludo {

    animation:
        vakiSaludoEntrada 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s forwards;
}


/* =========================================================
   ✨ HOVER — THANOS COBRA VIDA
   ========================================================= */

.vaki-boton:hover {

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

    filter:
        brightness(1.04);
}


.vaki-boton:hover .vaki-mascota {

    transform:
        rotate(-3deg) scale(1.07);
}


.vaki-boton:hover .vaki-mascota img {

    filter:
        drop-shadow(0 12px 20px rgba(104, 84, 208, 0.32));
}


.vaki-boton:hover .vaki-saludo {

    opacity: 1;

    visibility: visible;

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


/* =========================================================
   👀 REACCIÓN AL HACER CLIC
   ========================================================= */

.vaki-boton:active {

    transform:
        scale(0.96);
}


.vaki-boton:active .vaki-mascota {

    transform:
        scale(0.94) rotate(5deg);
}


.vaki-boton:active .vaki-mascota img {

    filter:
        drop-shadow(0 5px 10px rgba(104, 84, 208, 0.25));
}


/* =========================================================
   🌊 PULSO — ADAPTADO A LA NUEVA MASCOTA
   ========================================================= */

.vaki-pulso {

    position: absolute;

    width: 82px;
    height: 82px;

    left: 50%;
    bottom: 12px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    border:
        2px solid rgba(253, 164, 231, 0.55);

    opacity: 0;

    pointer-events: none;

    z-index: 1;

    animation:
        pulsoVaki 2.8s infinite;
}


@keyframes pulsoVaki {

    0% {

        transform:
            translateX(-50%) scale(0.75);

        opacity:
            0.55;
    }

    70% {

        transform:
            translateX(-50%) scale(1.35);

        opacity:
            0;
    }

    100% {

        transform:
            translateX(-50%) scale(1.35);

        opacity:
            0;
    }
}

/* =========================================================
   💫 BRILLO
   ========================================================= */

.vaki-boton::before {

    content: "";

    position: absolute;

    inset: -5px;

    border-radius: 50%;

    border:
        2px solid rgba(253, 164, 231, 0.55);

    opacity: 0;

    transform:
        scale(0.8);

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


.vaki-boton:hover::before {

    opacity: 1;

    transform:
        scale(1.08);
}


/* =========================================================
   🌊 PULSO
   ========================================================= */

.vaki-pulso {

    position: absolute;

    inset: 0;

    border-radius: 50%;

    border:
        2px solid rgba(253, 164, 231, 0.7);

    animation:
        pulsoVaki 2.5s infinite;
}


@keyframes pulsoVaki {

    0% {

        transform:
            scale(1);

        opacity:
            0.8;
    }

    70% {

        transform:
            scale(1.25);

        opacity:
            0;
    }

    100% {

        transform:
            scale(1.25);

        opacity:
            0;
    }
}


/* =========================================================
   👑 CORONA / DETALLE
   ========================================================= */

.vaki-corona {

    position: absolute;

    top: -4px;
    right: -3px;

    width: 25px;
    height: 25px;

    display: flex;

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

    border-radius: 50%;

    background:
        var(--rosa);

    font-size: 13px;

    box-shadow:
        0 5px 12px rgba(253, 164, 231, 0.4);

    animation:
        coronaFlotar 2s infinite ease-in-out;
}


@keyframes coronaFlotar {

    0%,
    100% {

        transform:
            translateY(0) rotate(0deg);
    }

    50% {

        transform:
            translateY(-4px) rotate(8deg);
    }
}

/* =========================================================
   💬 VENTANA DE CHAT — POSICIÓN SEGURA
   ========================================================= */

.vaki-chat {

    position: fixed;

    right: 25px;
    bottom: 25px;

    width: 350px;

    height: min(
        700px,
        calc(100vh - 100px)
    );

    max-height:
        calc(100vh - 100px);

    overflow: hidden;

    display: flex;
    flex-direction: column;

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

    border:
        1px solid rgba(104, 84, 208, 0.15);

    border-radius:
        25px;

    box-shadow:
        0 25px 60px rgba(22, 16, 90, 0.20);

    backdrop-filter:
        blur(18px);

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

    opacity:
        0;

    visibility:
        hidden;

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

    transform-origin:
        bottom right;

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

/* =========================================================
   💬 CHAT ABIERTO
   ========================================================= */

.vaki-chat.abierto {

    opacity:
        1;

    visibility:
        visible;

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


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

.vaki-chat-header {

    min-height: 72px;

    display: flex;

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

    padding:
        15px 18px;

    box-sizing: border-box;

    color:
        white;

    background:
        linear-gradient(
            135deg,
            var(--azul-oscuro),
            var(--azul),
            var(--morado)
        );

    flex-shrink: 0;
}


/* ---------- INFORMACIÓN ---------- */

.vaki-header-info {

    display: flex;

    align-items: center;

    gap:
        11px;
}


.vaki-header-info strong {

    display: block;

    font-size:
        16px;
}


.vaki-header-info span {

    display: block;

    margin-top:
        1px;

    font-size:
        10px;

    opacity:
        0.8;
}


/* ---------- MINI AVATAR ---------- */

.vaki-mini-avatar {

    width: 42px;
    height: 42px;

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

    border-radius: 50%;

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

    overflow: hidden;

    flex-shrink: 0;
}


.vaki-mini-avatar img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    border-radius: 50%;
}


/* ---------- CERRAR ---------- */

.vaki-cerrar {

    width: 30px;
    height: 30px;

    border: none;

    border-radius: 50%;

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

    color:
        white;

    font-size:
        23px;

    line-height:
        1;

    cursor:
        pointer;

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


.vaki-cerrar:hover {

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

    transform:
        rotate(90deg);
}


/* =========================================================
   📜 CUERPO DEL CHAT
   ========================================================= */

.vaki-chat-body {

    flex: 1;

    min-height: 0;

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

    padding:
        20px 12px 20px 20px;

    box-sizing: border-box;

    scrollbar-width:
        thin;

    scrollbar-color:
        var(--morado) transparent;
}

/* =========================================================
   📜 BARRA DE DESPLAZAMIENTO
   ========================================================= */

.vaki-chat-body::-webkit-scrollbar {

    width:
        7px;
}


.vaki-chat-body::-webkit-scrollbar-track {

    background:
        transparent;
}


.vaki-chat-body::-webkit-scrollbar-thumb {

    background:
        linear-gradient(180deg,
            var(--azul),
            var(--morado));

    border-radius:
        20px;
}


.vaki-chat-body::-webkit-scrollbar-thumb:hover {

    background:
        linear-gradient(180deg,
            var(--morado),
            var(--rosa));
}


/* =========================================================
   💬 MENSAJE DE VAKI
   ========================================================= */

.vaki-mensaje {

    display: flex;

    align-items:
        flex-start;

    gap:
        10px;

    margin-bottom:
        20px;
}


.vaki-avatar-mensaje {

    flex-shrink:
        0;

    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        linear-gradient(135deg,
            var(--azul),
            var(--morado));

    font-size:
        19px;
}


.vaki-burbuja {

    position:
        relative;

    max-width:
        245px;

    padding:
        12px 15px;

    color:
        var(--texto);

    background:
        var(--gris);

    border-radius:
        5px 18px 18px 18px;

    font-size:
        13px;

    line-height:
        1.6;
}


/* =========================================================
   🎯 OPCIONES PRINCIPALES
   ========================================================= */

.vaki-opciones {

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;
}


.vaki-opcion {

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        11px 13px;

    border:
        1px solid rgba(104, 84, 208, 0.12);

    border-radius:
        15px;

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

    color:
        var(--texto);

    text-align:
        left;

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

    cursor:
        pointer;

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


.vaki-opcion>span {

    width:
        38px;

    height:
        38px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

    background:
        rgba(104, 84, 208, 0.09);

    font-size:
        18px;
}


.vaki-opcion strong {

    display:
        block;

    font-size:
        12px;

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


.vaki-opcion small {

    display:
        block;

    margin-top:
        2px;

    color:
        var(--texto-suave);

    font-size:
        10px;
}


.vaki-opcion:hover {

    transform:
        translateX(5px);

    border-color:
        rgba(104, 84, 208, 0.30);

    background:
        rgba(248, 229, 245, 0.75);

    box-shadow:
        0 8px 20px rgba(54, 58, 193, 0.10);
}


/* =========================================================
   ✨ INDICADOR
   ========================================================= */

.vaki-indicador {

    margin-top:
        16px;

    padding-top:
        12px;

    border-top:
        1px solid rgba(104, 84, 208, 0.08);

    color:
        var(--texto-suave);

    font-size:
        10px;

    text-align:
        center;
}


/* =========================================================
   🧠 TEST VAK
   ========================================================= */

.vaki-test {

    display:
        none;
}


.vaki-test.activo {

    display:
        block;

    animation:
        aparecerTest 0.4s ease both;
}


@keyframes aparecerTest {

    from {

        opacity:
            0;

        transform:
            translateY(15px);
    }

    to {

        opacity:
            1;

        transform:
            translateY(0);
    }
}


/* =========================================================
   📊 PROGRESO DEL TEST
   ========================================================= */

.vaki-test-progreso {

    margin-bottom:
        20px;
}


.vaki-test-progreso>span {

    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--texto-suave);

    font-size:
        10px;

    font-weight:
        700;

    text-align:
        right;
}


.vaki-progreso-fondo {

    width:
        100%;

    height:
        7px;

    overflow:
        hidden;

    border-radius:
        20px;

    background:
        rgba(104, 84, 208, 0.10);
}


.vaki-progreso-barra {

    width:
        12.5%;

    height:
        100%;

    border-radius:
        20px;

    background:
        linear-gradient(90deg,
            var(--azul),
            var(--morado),
            var(--rosa));

    transition:
        width 0.4s ease;
}


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

.vaki-pregunta {

    margin-bottom:
        20px;

    text-align:
        center;
}


.vaki-pregunta-icono {

    width:
        48px;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0 auto 12px;

    border-radius:
        15px;

    background:
        rgba(104, 84, 208, 0.09);

    font-size:
        22px;
}


.vaki-pregunta h3 {

    color:
        var(--azul-oscuro);

    font-size:
        15px;

    line-height:
        1.5;
}


/* =========================================================
   🎯 RESPUESTAS DEL TEST
   ========================================================= */

.vaki-respuestas {

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;
}


.vaki-respuesta {

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        12px 14px;

    border:
        1px solid rgba(104, 84, 208, 0.13);

    border-radius:
        14px;

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

    color:
        var(--texto);

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

    font-size:
        12px;

    font-weight:
        600;

    text-align:
        left;

    cursor:
        pointer;

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


.vaki-respuesta span {

    width:
        30px;

    height:
        30px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    background:
        rgba(104, 84, 208, 0.08);

    font-size:
        15px;
}


.vaki-respuesta:hover {

    transform:
        translateX(5px);

    border-color:
        var(--morado);

    background:
        rgba(248, 229, 245, 0.8);

    box-shadow:
        0 7px 18px rgba(54, 58, 193, 0.10);
}


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

.vaki-volver {

    margin-top:
        15px;

    padding:
        7px 12px;

    border:
        none;

    border-radius:
        50px;

    background:
        rgba(104, 84, 208, 0.08);

    color:
        var(--morado);

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

    font-size:
        10px;

    font-weight:
        700;

    cursor:
        pointer;

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


.vaki-volver:hover {

    background:
        rgba(104, 84, 208, 0.15);

    transform:
        translateX(-3px);
}


/* =========================================================
   🏆 RESULTADO DEL TEST
   ========================================================= */

.vaki-resultado {

    width:
        100%;

    padding:
        24px;

    text-align:
        center;

    border-radius:
        24px;

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

    border:
        1px solid rgba(104, 84, 208, 0.12);

    box-shadow:
        0 12px 30px rgba(22, 16, 90, 0.08);

    animation:
        vakiResultadoEntrada 0.6s ease both;
}


@keyframes vakiResultadoEntrada {

    from {

        opacity:
            0;

        transform:
            translateY(20px) scale(0.97);
    }

    to {

        opacity:
            1;

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


/* ---------- ICONO ---------- */

.vaki-resultado-icono {

    width:
        65px;

    height:
        65px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0 auto 12px;

    border-radius:
        20px;

    background:
        linear-gradient(135deg,
            var(--azul),
            var(--morado));

    font-size:
        28px;

    box-shadow:
        0 10px 25px rgba(54, 58, 193, 0.20);
}


/* ---------- ETIQUETA ---------- */

.vaki-resultado-etiqueta {

    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--texto-suave);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        1.5px;
}


/* ---------- TÍTULO ---------- */

.vaki-resultado h3 {

    margin:
        0 0 8px;

    color:
        var(--azul-oscuro);

    font-size:
        25px;

    font-weight:
        800;
}


.vaki-resultado-titulo {

    margin:
        0 0 8px;

    color:
        var(--morado);

    font-size:
        14px;

    font-weight:
        700;
}


.vaki-resultado-descripcion {

    max-width:
        300px;

    margin:
        0 auto 20px;

    color:
        var(--texto-suave);

    font-size:
        12px;

    line-height:
        1.7;
}


/* =========================================================
   📊 PUNTAJES
   ========================================================= */

.vaki-puntajes {

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

    margin:
        20px 0;

    text-align:
        left;
}


.vaki-puntaje {

    width:
        100%;
}


.vaki-puntaje-info {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin-bottom:
        5px;

    color:
        var(--texto);

    font-size:
        11px;

    font-weight:
        700;
}


.vaki-puntaje-info strong {

    color:
        var(--morado);
}


.vaki-puntaje-fondo {

    width:
        100%;

    height:
        9px;

    overflow:
        hidden;

    border-radius:
        20px;

    background:
        #edf0f6;
}


.vaki-puntaje-barra {

    height:
        100%;

    border-radius:
        20px;

    transition:
        width 1s ease;
}


/* ---------- VISUAL ---------- */

.vaki-puntaje-barra.visual {

    background:
        linear-gradient(90deg,
            #8b5cf6,
            #c084fc);
}


/* ---------- AUDITIVO ---------- */

.vaki-puntaje-barra.auditivo {

    background:
        linear-gradient(90deg,
            #3b82f6,
            #60a5fa);
}


/* ---------- KINESTÉSICO ---------- */

.vaki-puntaje-barra.kinestesico {

    background:
        linear-gradient(90deg,
            #22c55e,
            #86efac);
}


/* =========================================================
   💡 RECOMENDACIONES
   ========================================================= */

.vaki-recomendaciones {

    margin-top:
        22px;

    padding:
        18px;

    text-align:
        left;

    border-radius:
        18px;

    background:
        rgba(104, 84, 208, 0.06);

    border:
        1px solid rgba(104, 84, 208, 0.10);
}


.vaki-recomendaciones h4 {

    margin:
        0 0 12px;

    color:
        var(--azul-oscuro);

    font-size:
        14px;
}


.vaki-recomendaciones ul {

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;

    margin:
        0;

    padding:
        0;

    list-style:
        none;
}


.vaki-recomendaciones li {

    color:
        var(--texto-suave);

    font-size:
        11px;

    line-height:
        1.6;
}


/* =========================================================
   🔄 REPETIR TEST
   ========================================================= */

.vaki-repetir {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    margin-top:
        20px;

    padding:
        10px 18px;

    border:
        none;

    border-radius:
        50px;

    background:
        linear-gradient(135deg,
            var(--azul),
            var(--morado));

    color:
        white;

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

    font-size:
        11px;

    font-weight:
        700;

    cursor:
        pointer;

    box-shadow:
        0 8px 20px rgba(54, 58, 193, 0.20);

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


.vaki-repetir:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 25px rgba(54, 58, 193, 0.28);
}


/* =========================================================
   🎨 RESULTADOS SEGÚN ESTILO
   ========================================================= */

.resultado-visual {

    border-top:
        4px solid #8b5cf6;
}


.resultado-visual .vaki-resultado-icono {

    background:
        linear-gradient(135deg,
            #8b5cf6,
            #c084fc);
}


.resultado-auditivo {

    border-top:
        4px solid #3b82f6;
}


.resultado-auditivo .vaki-resultado-icono {

    background:
        linear-gradient(135deg,
            #3b82f6,
            #60a5fa);
}


.resultado-kinestesico {

    border-top:
        4px solid #22c55e;
}


.resultado-kinestesico .vaki-resultado-icono {

    background:
        linear-gradient(135deg,
            #22c55e,
            #86efac);
}


.resultado-mixto {

    border-top:
        4px solid var(--rosa);
}


.resultado-mixto .vaki-resultado-icono {

    background:
        linear-gradient(135deg,
            var(--azul),
            var(--rosa));
}


/* =========================================================
   🎮 FASE 4 — MINI-RETOS
   ========================================================= */

.vaki-retos {

    display:
        none;

    width:
        100%;

    margin-top:
        20px;

    padding:
        22px;

    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, 0.96),
            rgba(248, 245, 255, 0.94));

    border:
        1px solid rgba(104, 84, 208, 0.15);

    border-radius:
        24px;

    box-shadow:
        0 12px 35px rgba(22, 16, 90, 0.10);

    animation:
        aparecerReto 0.5s ease both;
}


.vaki-retos.activo {

    display:
        block;
}


/* =========================================================
   🎮 ENCABEZADO DEL RETO
   ========================================================= */

.vaki-reto-header {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin-bottom:
        20px;
}


.vaki-reto-icono {

    width:
        52px;

    height:
        52px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        16px;

    background:
        linear-gradient(135deg,
            var(--azul),
            var(--morado));

    color:
        white;

    font-size:
        23px;

    box-shadow:
        0 10px 25px rgba(54, 58, 193, 0.25);

    animation:
        flotarReto 3s infinite ease-in-out;
}


.vaki-reto-etiqueta {

    display:
        block;

    margin-bottom:
        3px;

    color:
        var(--morado);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        1.5px;
}


.vaki-reto-header h3 {

    margin:
        0;

    color:
        var(--azul-oscuro);

    font-size:
        18px;

    line-height:
        1.35;
}


/* =========================================================
   💬 MENSAJE DEL RETO
   ========================================================= */

.vaki-reto-mensaje {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    margin-bottom:
        20px;
}


.vaki-reto-mensaje .vaki-burbuja {

    flex:
        1;

    font-size:
        13px;

    line-height:
        1.6;
}


/* =========================================================
   🧠 PREGUNTA DEL RETO
   ========================================================= */

.vaki-reto-pregunta {

    position:
        relative;

    margin-bottom:
        18px;

    padding:
        18px;

    background:
        rgba(104, 84, 208, 0.07);

    border:
        1px solid rgba(104, 84, 208, 0.12);

    border-radius:
        18px;

    text-align:
        center;
}


.vaki-reto-numero {

    display:
        inline-block;

    margin-bottom:
        8px;

    padding:
        5px 12px;

    border-radius:
        50px;

    background:
        linear-gradient(135deg,
            var(--azul),
            var(--morado));

    color:
        white;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.8px;
}


.vaki-reto-pregunta p {

    margin:
        0;

    color:
        var(--azul-oscuro);

    font-size:
        15px;

    font-weight:
        700;

    line-height:
        1.5;
}


/* =========================================================
   🎯 OPCIONES DEL RETO
   ========================================================= */

.vaki-reto-opciones {

    display:
        grid;

    grid-template-columns:
        1fr;

    gap:
        10px;

    margin-bottom:
        18px;
}


.vaki-reto-opcion {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    width:
        100%;

    padding:
        13px 15px;

    border:
        1px solid rgba(104, 84, 208, 0.14);

    border-radius:
        16px;

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

    color:
        var(--texto);

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

    font-size:
        13px;

    font-weight:
        600;

    text-align:
        left;

    cursor:
        pointer;

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


.vaki-reto-opcion span {

    width:
        35px;

    height:
        35px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        11px;

    background:
        rgba(104, 84, 208, 0.09);

    font-size:
        17px;

    transition:
        transform 0.3s ease;
}


.vaki-reto-opcion:hover {

    transform:
        translateY(-3px);

    border-color:
        var(--morado);

    background:
        rgba(104, 84, 208, 0.07);

    box-shadow:
        0 8px 20px rgba(104, 84, 208, 0.13);
}


.vaki-reto-opcion:hover span {

    transform:
        scale(1.12) rotate(-5deg);
}


/* ---------- CORRECTA ---------- */

.vaki-reto-opcion.correcta {

    border-color:
        #6fcf97;

    background:
        rgba(111, 207, 151, 0.12);

    color:
        #237a4b;

    pointer-events:
        none;
}


/* ---------- INCORRECTA ---------- */

.vaki-reto-opcion.incorrecta {

    border-color:
        #e98b9a;

    background:
        rgba(233, 139, 154, 0.10);

    color:
        #a43c50;

    animation:
        sacudirReto 0.35s ease;
}


/* =========================================================
   ⭐ RESULTADO DEL RETO
   ========================================================= */

.vaki-reto-resultado {

    display:
        none;

    padding:
        20px;

    margin-top:
        15px;

    border-radius:
        20px;

    background:
        linear-gradient(135deg,
            rgba(253, 164, 231, 0.14),
            rgba(104, 84, 208, 0.10));

    border:
        1px solid rgba(104, 84, 208, 0.14);

    text-align:
        center;

    animation:
        aparecerReto 0.45s ease both;
}


.vaki-reto-resultado.mostrar {

    display:
        block;
}


.vaki-reto-resultado-icono {

    margin-bottom:
        5px;

    font-size:
        38px;

    animation:
        aparecerEstrella 0.6s ease both;
}


.vaki-reto-resultado h3 {

    margin:
        0 0 6px;

    color:
        var(--azul-oscuro);

    font-size:
        19px;
}


.vaki-reto-resultado p {

    margin:
        5px 0;

    color:
        var(--texto-suave);

    font-size:
        13px;

    line-height:
        1.6;
}


/* ---------- PUNTOS ---------- */

.vaki-reto-puntos {

    display:
        inline-block;

    margin-top:
        10px;

    padding:
        8px 18px;

    border-radius:
        50px;

    background:
        linear-gradient(135deg,
            var(--azul),
            var(--morado));

    color:
        white;

    font-size:
        14px;

    font-weight:
        800;

    box-shadow:
        0 8px 20px rgba(54, 58, 193, 0.20);
}


/* =========================================================
   🔘 CONTROLES DEL RETO
   ========================================================= */

.vaki-reto-controles {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        18px;

    flex-wrap:
        wrap;
}


.vaki-reto-siguiente {

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        11px 18px;

    border:
        none;

    border-radius:
        50px;

    background:
        linear-gradient(135deg,
            var(--azul),
            var(--morado));

    color:
        white;

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

    font-size:
        12px;

    font-weight:
        700;

    cursor:
        pointer;

    box-shadow:
        0 8px 20px rgba(54, 58, 193, 0.20);

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


.vaki-reto-siguiente.mostrar {

    display:
        inline-flex;
}


.vaki-reto-siguiente:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 25px rgba(54, 58, 193, 0.28);
}


.vaki-reto-controles .vaki-volver {

    margin:
        0;
}


/* =========================================================
   🎮 BOTÓN — HACER MINI-RETO
   ========================================================= */

.vaki-reto-iniciar {

    width:
        100%;

    max-width:
        320px;

    margin:
        20px auto 5px;

    padding:
        14px 24px;

    border:
        none;

    border-radius:
        16px;

    background:
        linear-gradient(135deg,
            #6854d0,
            #363ac1);

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        16px;

    font-weight:
        700;

    cursor:
        pointer;

    box-shadow:
        0 8px 20px rgba(54, 58, 193, 0.25);

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


.vaki-reto-iniciar:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 26px rgba(54, 58, 193, 0.35);

    filter:
        brightness(1.08);
}


.vaki-reto-iniciar:active {

    transform:
        translateY(-1px);

    box-shadow:
        0 6px 14px rgba(54, 58, 193, 0.25);
}


/* =========================================================
   ✨ ANIMACIONES
   ========================================================= */

@keyframes aparecerReto {

    from {

        opacity:
            0;

        transform:
            translateY(15px) scale(0.98);
    }

    to {

        opacity:
            1;

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


@keyframes aparecerEstrella {

    from {

        opacity:
            0;

        transform:
            scale(0.5) rotate(-15deg);
    }

    to {

        opacity:
            1;

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


@keyframes sacudirReto {

    0%,
    100% {

        transform:
            translateX(0);
    }

    25% {

        transform:
            translateX(-5px);
    }

    75% {

        transform:
            translateX(5px);
    }
}


@keyframes flotarReto {

    0%,
    100% {

        transform:
            translateY(0);
    }

    50% {

        transform:
            translateY(-5px);
    }
}


/* =========================================================
   🏆 PROGRESO DEL ESTUDIANTE
   ========================================================= */

.vaki-progreso-estudiante {

    padding:
        18px 20px 20px;

    border-top:
        1px solid rgba(104, 84, 208, 0.10);

    background:
        rgba(248, 245, 255, 0.70);
}


/* ---------- TÍTULO ---------- */

.vaki-progreso-titulo {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        15px;
}


.vaki-progreso-titulo>span {

    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

    background:
        rgba(104, 84, 208, 0.10);

    font-size:
        19px;
}


.vaki-progreso-titulo strong {

    display:
        block;

    color:
        var(--azul-oscuro);

    font-size:
        13px;
}


.vaki-progreso-titulo small {

    display:
        block;

    margin-top:
        2px;

    color:
        var(--texto-suave);

    font-size:
        9px;
}


/* =========================================================
   📊 ESTADÍSTICAS
   ========================================================= */

.vaki-estadisticas {

    display:
        grid;

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

    gap:
        8px;

    margin-bottom:
        14px;
}


.vaki-estadistica {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        9px 7px;

    border:
        1px solid rgba(104, 84, 208, 0.09);

    border-radius:
        12px;

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


.vaki-estadistica>span {

    font-size:
        16px;
}


.vaki-estadistica strong {

    display:
        block;

    color:
        var(--azul-oscuro);

    font-size:
        13px;

    line-height:
        1;
}


.vaki-estadistica small {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--texto-suave);

    font-size:
        8px;
}


/* =========================================================
   🧠 ESTILO GUARDADO
   ========================================================= */

.vaki-estilo-guardado {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        15px;

    padding:
        11px 12px;

    border:
        1px solid rgba(104, 84, 208, 0.10);

    border-radius:
        14px;

    background:
        linear-gradient(135deg,
            rgba(104, 84, 208, 0.07),
            rgba(253, 164, 231, 0.08));
}


.vaki-estilo-guardado>span {

    font-size:
        20px;
}


.vaki-estilo-guardado small {

    display:
        block;

    color:
        var(--texto-suave);

    font-size:
        9px;
}


.vaki-estilo-guardado strong {

    display:
        block;

    margin-top:
        2px;

    color:
        var(--morado);

    font-size:
        12px;
}


/* =========================================================
   🏅 LOGROS
   ========================================================= */

.vaki-logros h4 {

    margin:
        0 0 9px;

    color:
        var(--azul-oscuro);

    font-size:
        12px;
}


.vaki-logros-lista {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;
}


.vaki-sin-logros {

    padding:
        10px;

    border-radius:
        11px;

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

    color:
        var(--texto-suave);

    font-size:
        9px;

    line-height:
        1.5;

    text-align:
        center;
}


/* =========================================================
   🐾⬆️ VAKI — POSICIÓN FINAL Y SEGURA
   ========================================================= */

/* ---------------------------------------------------------
   POSICIÓN NORMAL DE VAKI
   --------------------------------------------------------- */

.vaki-container {
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 5000;

    transform: translateY(0);

    transition:
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);

    will-change: transform;
}


/* ---------------------------------------------------------
   🐾 CUANDO APARECE "VOLVER ARRIBA"
   --------------------------------------------------------- */

/*
   SOLO se mueve la mascota.
   La ventana de chat NO se mueve con ella.
*/



/* =========================================================
   💬 VENTANA DE CHAT — CONFIGURACIÓN DEFINITIVA
   ========================================================= */

.vaki-chat {
    position: fixed;

    right: 25px;
    bottom: 25px;

    width: 350px;

    /*
       La ventana nunca podrá ser más alta que el espacio
       disponible en la pantalla.
    */
    height: min(
        700px,
        calc(100vh - 50px)
    );

    max-height:
        calc(100vh - 50px);

    min-height: 0;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    box-sizing: border-box;

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

    border:
        1px solid rgba(104, 84, 208, 0.15);

    border-radius:
        25px;

    box-shadow:
        0 25px 60px rgba(22, 16, 90, 0.20);

    backdrop-filter:
        blur(18px);

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

    opacity:
        0;

    visibility:
        hidden;

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

    transform-origin:
        bottom right;

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


/* ---------------------------------------------------------
   💬 CHAT ABIERTO
   --------------------------------------------------------- */

.vaki-chat.abierto {
    opacity:
        1;

    visibility:
        visible;

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


/* ---------------------------------------------------------
   ⬆️ CHAT CUANDO APARECE "VOLVER ARRIBA"
   --------------------------------------------------------- */

/*
   El chat baja solamente lo necesario.
   No utilizamos transform aquí porque eso podía provocar
   que la ventana terminara cortándose.
*/

body:has(.boton-arriba.mostrar) .vaki-chat {
    bottom: 75px;

    height:
        min(
            700px,
            calc(100vh - 100px)
        );

    max-height:
        calc(100vh - 100px);
}


/* =========================================================
   📜 CUERPO DEL CHAT
   ========================================================= */

.vaki-chat-body {
    flex:
        1 1 auto;

    min-height:
        0;

    height:
        auto;

    max-height:
        none;

    overflow-y:
        auto;

    overflow-x:
        hidden;

    padding:
        20px 12px 20px 20px;

    box-sizing:
        border-box;

    scrollbar-width:
        thin;

    scrollbar-color:
        var(--morado) transparent;
}


/* =========================================================
   📱 RESPONSIVE — VAKI
   ========================================================= */

@media (max-width: 600px) {

    .vaki-container {
        right:
            15px;

        bottom:
            15px;

        transform:
            translateY(0);

        transition:
            transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    }


    /* Mascota cuando aparece Volver arriba */




    /* -----------------------------------------------------
       💬 CHAT EN CELULAR
       ----------------------------------------------------- */

    .vaki-chat {

        right:
            15px;

        bottom:
            15px;

        width:
            calc(100vw - 30px);

        height:
            min(
                78vh,
                calc(100vh - 30px)
            );

        max-height:
            calc(100vh - 30px);

        border-radius:
            22px;
    }


    /*
       Cuando aparece "Volver arriba":
       dejamos una separación razonable sin sacar
       la ventana de la pantalla.
    */

    body:has(.boton-arriba.mostrar) .vaki-chat {
    right:
        15px;

    bottom:
        65px;

    height:
        min(
            78vh,
            calc(100vh - 85px)
        );

    max-height:
        calc(100vh - 85px);
}


    .vaki-chat-body {

        flex:
            1 1 auto;

        min-height:
            0;

        max-height:
            none;

        height:
            auto;

        padding:
            17px 6px 17px 17px;
    }
}


/* =========================================================
   💻 PANTALLAS CON POCA ALTURA
   ========================================================= */

@media (max-height: 700px) and (min-width: 601px) {

    .vaki-chat {

        bottom:
            20px;

        height:
            calc(100vh - 40px);

        max-height:
            calc(100vh - 40px);
    }


    body:has(.boton-arriba.mostrar) .vaki-chat {

        bottom:
            75px;

        height:
            calc(100vh - 100px);

        max-height:
            calc(100vh - 100px);
    }
}


/* =========================================================
   📱💻 POCA ALTURA + CELULAR
   ========================================================= */

@media (max-width: 600px) and (max-height: 700px) {

    .vaki-chat {

        right:
            10px;

        bottom:
            10px;

        width:
            calc(100vw - 20px);

        height:
            calc(100vh - 20px);

        max-height:
            calc(100vh - 20px);
    }


    body:has(.boton-arriba.mostrar) .vaki-chat {

        right:
            10px;

        bottom:
            55px;

        width:
            calc(100vw - 20px);

        height:
            calc(100vh - 70px);

        max-height:
            calc(100vh - 70px);
    }


    .vaki-chat-body {

        min-height:
            0;

        max-height:
            none;
    }
}


/* =========================================================
   🎨 VAKI — CAMBIO SEGÚN ESTILO DE APRENDIZAJE
   ========================================================= */


/* ---------------------------------------------------------
   🟣 VISUAL
   --------------------------------------------------------- */

.vaki-container.estilo-visual .vaki-mascota img {

    filter:
        drop-shadow(
            0 10px 18px
            rgba(139, 92, 246, 0.45)
        );
}

.vaki-container.estilo-visual .vaki-saludo {

    border-color:
        rgba(139, 92, 246, 0.25);
}


/* ---------------------------------------------------------
   🔵 AUDITIVO
   --------------------------------------------------------- */

.vaki-container.estilo-auditivo .vaki-mascota img {

    filter:
        drop-shadow(
            0 10px 18px
            rgba(59, 130, 246, 0.45)
        );
}

.vaki-container.estilo-auditivo .vaki-saludo {

    border-color:
        rgba(59, 130, 246, 0.25);
}


/* ---------------------------------------------------------
   🟢 KINESTÉSICO
   --------------------------------------------------------- */

.vaki-container.estilo-kinestesico .vaki-mascota img {

    filter:
        drop-shadow(
            0 10px 18px
            rgba(34, 197, 94, 0.45)
        );
}

.vaki-container.estilo-kinestesico .vaki-saludo {

    border-color:
        rgba(34, 197, 94, 0.25);
}


/* ---------------------------------------------------------
   🧠 MIXTO
   --------------------------------------------------------- */

.vaki-container.estilo-mixto .vaki-mascota img {

    filter:
        drop-shadow(
            0 10px 18px
            rgba(253, 164, 231, 0.50)
        );
}

/* =========================================================
   🤖 VAKI — SEPARACIÓN DEL BOTÓN "VOLVER ARRIBA"
   ========================================================= */

body:has(.boton-arriba.mostrar) .vaki-boton {
    transform: translateY(-55px);
}