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

        :root {
            --primary-purple: hsl(266, 100%, 62%);
            --secondary-purple: #835ab8;
            --light-blue: #B0D3FF;
            --bright-blue: #18B3FF;
            --black-crystal: #1a1a1a;
            --dark-gray: #2d2d2d;
            --light-gray: #f8f9fa;
            --white: #ffffff;
        }

        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            color: var(--black-crystal);
            overflow-x: hidden;
        }
        /*WHATSAPP*/
        /* ===== WhatsApp Float Button ===== */
        .whatsapp-float {
            width: 80px;
            height: 80px;
            position: fixed;
            bottom: 30px; /* Mantiene abajo */
            right: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: linear-gradient(135deg, #25d366, #128c7e);
            text-decoration: none;
            z-index: 1000;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 8px 20px rgba(68, 233, 129, 0.4);
        }

        .whatsapp-float:hover {
            transform: scale(1.2) rotate(10deg);
            box-shadow: 0 20px 40px rgba(76, 212, 126, 0.4);
        }

        .whatsapp-float img {
            width: 60px;
            height: 60px;
            filter: brightness(1.2);
        }

        


@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

        
        
        /* Header */
        header {
            background: linear-gradient(135deg,rgba(22, 22, 22, 0.91),rgba(26, 26, 26, 0.82));
            padding: 1rem 0;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            backdrop-filter: blur(8px);
            padding-left: 10px;
            padding-right: 10px;
            border-radius: 0 0 8px  8px;
        }
        /* ===== Logo illa ===== */
            
        .logo-container {
            display: flex;
            align-items: center;
            gap: 5px;

            cursor: pointer;
            transition: transform 0.3s ease, filter 0.3s ease;
        }

        .logo-container:hover {
            transform: scale(1.05);
            filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.6));
        }

        .logo-img {
            height: 80px;
            width: 80px;
            transition: transform 0.4s ease;
        }

        .logo-container:hover .logo-img {
            transform: rotate(-5deg) scale(1.08);
        }

        .logo-text {
            font-size: 28px;
            line-height: 1;/*UNIR LETRAS DE ARRIBA ABAJO*/
            color: white;
            font-weight: bold;
            letter-spacing: 1px;
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
            text-shadow: 2px 2px 8px rgba(151, 151, 151, 0.7);
            transition: color 0.3s ease, text-shadow 0.3s ease;
        }

        .logo-text1 {
            color: white;
            font-size: 12px;
            
            text-shadow: 2px 2px 5px rgba(151, 151, 151, 0.6);
            transition: color 0.3s ease, text-shadow 0.3s ease;
        }
        .brg{
            
            position: absolute;
            top: 0px;       /* separación desde arriba */
            right: 0px;     /* separación desde la derecha */
            background: #ff4757; /* color rojo */
            color: white;
            font-size: 12px;
            font-weight: bold;
            padding: 4px 8px;
            border-radius: 11px 11px 11px 0;
            box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        
        }

        .logo-container:hover .logo-text,
        .logo-container:hover .logo-text1 {
            color: #B0D3FF; /* Color de la paleta */
            text-shadow: 0 0 15px rgba(176, 211, 255, 0.8);
        }

        .logo-wrapper {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .tipografia {
        display: flex;
        flex-direction: column;
        font-family: Georgia, 'Times New Roman', Times, serif;
        
        }
        /* ======== Dropdown Container ======== */
        .dropdown {
            position: relative;
        }

        /* ======== Menú desplegable con efecto vidrio ======== */
        .dropdown-menu {
            position: absolute;
            top: 100%; /* Cambiado de 120% a 100% para alinearlo con el padre */
            left: 0;
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(12px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.15);
            padding: 10px 0;
            display: none;
            flex-direction: column;
            border-radius: 10px;
            min-width: 180px;
            box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.35);
            animation: dropdownFade 0.3s ease;
            z-index: 1000; /* Asegura que esté por encima */
        }

        /* Mostrar menú cuando se hace hover sobre dropdown o el mismo menú */
        .dropdown:hover .dropdown-menu,
        .dropdown-menu:hover {
            display: flex;
            background: rgba(0, 0, 0, 0.349);
            color: white;
        }

        /* ======== Animación suave ======== */
        @keyframes dropdownFade {
            from {
                opacity: 0;
                transform: translateY(-8px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* ======== Items del menú ======== */
        .dropdown-menu li a {
            color: white;
            padding: 10px 15px;
            display: block;
            font-size: 14px;
            text-decoration: none;
            transition: all 0.3s ease;
            border-radius: 6px;
        }

        /* ======== Hover con glow blanco ======== */
        .dropdown-menu li a:hover {
            background: rgba(255, 255, 255, 0.15);
            color: #B0D3FF;
            box-shadow: 0 0 8px rgba(176, 211, 255, 0.6);
        }


       /*********** MINDY JUEGOS ******************/

/* Fondo del modal */
.mindy-modal {
    display: none; /* Oculto por defecto */
    position: fixed;
    inset: 0 ; /* reemplaza left, top, width y height */
    z-index: 9999;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px); /* Efecto glass */
}

/* Imagen de Mindi */




/* Caja del modal rgba(13, 125, 230, 0.699) */
.mindy-modal-content {
    background-image: url('../Modelo/img/Mindi/flyer-3.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border: 2px solid rgba(71, 13, 230, 0.699);
    border-radius: 20px;
    width: 550px;
    height: 750px;
    margin: 5% auto;
    padding: 25px 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(72, 9, 219, 0.699);
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: fadeIn 0.4s ease-in-out;
    margin-top: 10px;
}

.mindy-modal-content p {
    color: var(--white);
    font-size: 1.2rem;
    margin: 10px 0;
    line-height: 1.5;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.48);
    align-items: start;
}


/* BOTÓN */
.btnm {
    background: linear-gradient(45deg, var(--bright-blue), var(--light-blue));
    color: var(--white);
    padding: 12px 28px;
    border: none;
    border-radius: 50px;
    font-size: 1.15rem;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;

    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 10px 30px rgba(24, 179, 255, 0.3);
    align-self: flex-end; /* lo centra aunque hayan otros elementos */
    margin-bottom: 15px; /* da respiro abajo */
}

.btnm:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(24, 179, 255, 0.5);
}


/* Títulos del modal */
.mindy-modal-content h2 {
    color: var(--white);
    font-size: 3rem;
    align-items: start;
    font-weight: bold;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.4);
    font-family: Georgia, 'Times New Roman', Times, serif;
    display: flex;
    align-items: start;
}

/* Animación de aparición */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
        /* Botón cerrar */
/* Ajustes adicionales para mejorar el diseño en general     */
.mindy-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 30px;
    font-weight:900;
    cursor: pointer;
    color: white;
    
}

        /* Animación */
        @keyframes fadeIn {
            from {opacity: 0; transform: scale(0.9);}
            to {opacity: 1; transform: scale(1);}
        }


        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }


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

        .logo {
            font-size: 1.8rem;
            font-weight: bold;
            color: var(--primary-purple);
            text-shadow: 0 0 10px rgba(139, 69, 255, 0.5);
        }

        .nav-links {
            display: flex;
            list-style: none;
            gap: 2rem;
            align-items: center;
        }

        .nav-links a {
            position: relative;
            color: var(--white);
            text-decoration: none;
            font-weight: 500;
            padding: 6px 10px;
            border-radius: 8px;
            transition: 
                color 0.3s ease,
                background-color 0.3s ease,
                text-shadow 0.3s ease,
                transform 0.3s ease;
        }

        /* Efecto glow elegante al pasar el mouse */
        .nav-links a:hover {
            color: #EAF3FF; /* Blanco ligeramente azulado */
            text-shadow: 0 0 8px rgba(255, 255, 255, 0.7),
                        0 0 15px rgba(176, 211, 255, 0.6);
            background-color: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(6px);
            transform: translateY(-2px) scale(1.05);
        }

        /* Línea luminosa debajo del enlace */
        .nav-links a::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -4px;
            width: 0%;
            height: 2px;
            background: linear-gradient(90deg, #B0D3FF, #ffffff);
            box-shadow: 0 0 6px #B0D3FF;
            transition: width 0.3s ease;
        }

        .nav-links a:hover::after {
            width: 100%;
        }


        /* Hero Section */
        

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><pattern id="grid" width="50" height="50" patternUnits="userSpaceOnUse"><path d="M 50 0 L 0 0 0 50" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>');
            animation: float 20s ease-in-out infinite;
        }

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

        .hero-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: center;
            position: relative;
            z-index: 2;
        }

        .hero-text h1 {
            font-size: 3.5rem;
            color: var(--white);
            margin-bottom: 1rem;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            animation: slideInLeft 1s ease-out;
        }

        .hero-text p {
            font-size: 1.3rem;
            color: var(--light-blue);
            margin-bottom: 2rem;
            animation: slideInLeft 1s ease-out 0.3s both;
        }

        .cta-button {
            background: linear-gradient(45deg, var(--bright-blue), var(--light-blue));
            color: var(--white);
            padding: 1rem 2.5rem;
            border: none;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: bold;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 10px 30px rgba(24, 179, 255, 0.3);
            animation: slideInLeft 1s ease-out 0.6s both;
        }

        .cta-button:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(24, 179, 255, 0.5);
        }

        .hero-mascot {
            text-align: center;
            animation: slideInRight 1s ease-out;
        }

        

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-30px); }
            60% { transform: translateY(-15px); }
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        @keyframes slideInLeft {
            from { opacity: 0; transform: translateX(-50px); }
            to { opacity: 1; transform: translateX(0); }
        }

        @keyframes slideInRight {
            from { opacity: 0; transform: translateX(50px); }
            to { opacity: 1; transform: translateX(0); }
        }


        /* Features Section */
    .features {
        padding: 5rem 0;
        background:
            linear-gradient(
                180deg,
                #f0eeff 0%,        /* lavanda claro — recoge el morado del hero */
                #f7f6fb 35%,       /* gris perla lavanda — zona media suave */
                #ffffff 65%,       /* blanco puro — prepara la transición a Tests */
                #f7f6fb 100%       /* cierra igual que el fondo de .tests-universe */
            );
        position: relative;
    }

    /* Acento radial central muy sutil para dar profundidad */
    .features::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(
            ellipse 70% 50% at 50% 0%,
            rgba(124, 58, 237, .05) 0%,
            transparent 60%
        );
    }

        .section-title {
            text-align: center;
            font-size: 2.5rem;
            color: var(--black-crystal);
            margin-bottom: 3rem;
            position: relative;
        }

        .section-title::after {
            content: '';
            width: 80px;
            height: 4px;
            background: linear-gradient(45deg, var(--primary-purple), var(--bright-blue));
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 2px;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 4rem;
        }

        .feature-card {
            background: var(--white);
            padding: 2.5rem;
            border-radius: 20px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: linear-gradient(45deg, var(--primary-purple), var(--bright-blue));
        }

        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 50px rgba(0,0,0,0.2);
        }

        .feature-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(145deg, var(--light-blue), var(--bright-blue));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            font-size: 2rem;
        }

        .feature-card h3 {
            font-size: 1.5rem;
            color: var(--black-crystal);
            margin-bottom: 1rem;
        }

        .feature-card p {
            color: var(--dark-gray);
            line-height: 1.6;
        }

        /* CTA Section */
        .cta-section {
            background:linear-gradient(135deg,rgba(22, 22, 22, 0.91),rgba(26, 26, 26, 0.82));
            text-align: center;
            position: relative;
        }

        .cta-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>') repeat;
            animation: sparkle 3s linear infinite;
        }

        @keyframes sparkle {
            0% { opacity: 0; }
            50% { opacity: 1; }
            100% { opacity: 0; }
        }

        .cta-content {
            position: relative;
            z-index: 2;
        }

        .cta-section h2 {
            font-size: 2.5rem;
            color: var(--white);
            margin-bottom: 1rem;
        }

        .cta-section p {
            font-size: 1.2rem;
            color: var(--light-blue);
            margin-bottom: 2rem;
        }

        /* Footer */
        footer {
            background: var(--black-crystal);
            color: var(--white);
            padding: 3rem 0 1rem;
            text-align: center;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }

        .footer-section h3 {
            color: var(--primary-purple);
            margin-bottom: 1rem;
        }

        .footer-section a {
            color: var(--light-blue);
            text-decoration: none;
            display: block;
            margin-bottom: 0.5rem;
        }

        .footer-section a:hover {
            color: var(--bright-blue);
        }

        .footer-bottom {
            border-top: 1px solid var(--dark-gray);
            padding-top: 1rem;
            color: var(--light-blue);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .hero-content {
                grid-template-columns: 1fr;
                text-align: center;
                gap: 2rem;
            }

            .hero-text h1 {
                font-size: 2.5rem;
            }

            .mascot {
                width: 200px;
                height: 200px;
            }

            .mascot::before {
                font-size: 5rem;
            }

            .nav-links {
                display: none;
            }

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

@keyframes slideInAlert {
  from { transform: translateX(130%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes slideOutAlert {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(130%); opacity: 0; }
}
@keyframes floatMascot {
  0%,100% { transform: translateY(0) rotate(-2deg); }
  50%     { transform: translateY(-12px) rotate(2deg); }
}
@keyframes shimmerDot {
  0%,100% { opacity: .5; }
  50%     { opacity: 1; }
}

.session-alert-wrap {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  gap: 0;
  pointer-events: none;
  opacity: 0;
  transform: translateX(60px);
  transition: opacity .45s cubic-bezier(.22,.68,0,1.2),
              transform .45s cubic-bezier(.22,.68,0,1.2);
  align-content: flex-end;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  align-items: flex-end;
}

.session-alert-wrap.visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: all;
}

/* Burbuja */
.sa-bubble {
  background: #1a1a2e;
  border-radius: 20px 20px 20px 4px;
  padding: 20px 22px 18px;
  width: 290px;
  box-shadow: 0 12px 40px rgba(99,102,241,.3);
  position: relative;
}
.sa-bubble::after {
  content: '';
  position: absolute;
  top: 185px;
  left: -8px;
  border: 10px solid transparent;
  border-right-color: #1a1a2e;
  border-left: 0;
  border-top: 0;
  transform: scaleY(.6);
}

/* Tag */
.sa-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(99,102,241,.18);
  border: 1px solid rgba(99,102,241,.35);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #a78bfa;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.sa-tag-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #a78bfa;
  animation: shimmerDot 1.8s ease-in-out infinite;
}

.sa-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 5px;
  line-height: 1.3;
}
.sa-sub {
  font-size: 12px;
  color: rgba(255,255,255,.55);
  margin: 0 0 16px;
  line-height: 1.5;
}

/* Botones */
.sa-btns { display: flex; gap: 8px; }

.sa-btn-p {
  flex: 1;
  padding: 9px 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: block;
  transition: opacity .15s, transform .15s;
}
.sa-btn-p:hover { opacity: .9; transform: translateY(-1px); }

.sa-btn-s {
  flex: 1;
  padding: 9px 0;
  border-radius: 12px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.75);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: block;
  transition: background .15s;
}
.sa-btn-s:hover { background: rgba(255,255,255,.13); }

/* Botón cerrar */
.sa-close-x {
  position: absolute;
  top: 10px; right: 12px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: none;
  color: rgba(255,255,255,.4);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}
.sa-close-x:hover { background: rgba(255,255,255,.16); color: #fff; }

/* Mascota */
.sa-mascot-wrap {
  width: 68px; height: 68px;
  flex-shrink: 0;
  margin-bottom: -4px;
  margin-left: 10px;
  animation: floatMascot 3s ease-in-out infinite;
  position: relative;
}
.sa-mascot-img {
  width: 68px; height: 68px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #6366f1;
  display: block;
      background: #ffffff36;
}
.sa-mascot-badge {
  position: absolute;
  bottom: 2px; right: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #f97316;
  border: 2px solid #1a1a2e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
}

 footer {
            background: linear-gradient(135deg, #000000 0%, #4e4e4e 100%);
            color: white;
            position: relative;
            overflow: hidden;
        }

        footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><defs><radialGradient id="a" cx="50%" cy="0%" r="100%"><stop offset="0%" style="stop-color:white;stop-opacity:0.1"/><stop offset="100%" style="stop-color:white;stop-opacity:0"/></radialGradient></defs><rect width="100" height="20" fill="url(%23a)"/></svg>') repeat-x;
            opacity: 0.1;
        }

        .footer-content {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr;
            gap: 40px;
            padding: 60px 0 40px;
            position: relative;
            z-index: 1;
        }

        .footer-section {
            animation: fadeInUp 0.8s ease-out;
        }

        .footer-section:nth-child(1) { animation-delay: 0.1s; }
        .footer-section:nth-child(2) { animation-delay: 0.2s; }
        .footer-section:nth-child(3) { animation-delay: 0.3s; }

        .footer-section h3 {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 20px;
            color: #8262e5;
            position: relative;
            padding-bottom: 10px;
        }

        .footer-section h3::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 40px;
            height: 3px;
            background: linear-gradient(90deg, #4badff, #9828e6);
            border-radius: 2px;
        }

        .footer-section p {
            font-size: 14px;
            line-height: 1.7;
            color: #e2e8f0;
            margin-bottom: 20px;
            text-align: justify;
        }

        .footer-section a {
            display: block;
            color: #e2e8f0;
            text-decoration: none;
            margin-bottom: 12px;
            font-size: 15px;
            transition: all 0.3s ease;
            padding: 5px 0;
            position: relative;
        }

        .footer-section a:hover {
            color: #d7cbe2;
            padding-left: 10px;
            transform: translateX(5px);
        }

        .footer-section a::before {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, #4badff, #9828e6);
            transition: width 0.3s ease;
        }

        .footer-section a:hover::before {
            width: 30px;
        }

        .contact-info {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            padding: 8px 0;
        }

        .contact-info i {
            margin-right: 12px;
            font-size: 18px;
            color: #8262e5;
            width: 25px;
        }

        .social-media {
            margin-top: 25px;
        }

        .social-media h4 {
            font-size: 16px;
            margin-bottom: 15px;
            color: #ffffff;
        }

        .social-links {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }

        .social-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            text-decoration: none;
            color: white;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .social-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s;
        }

        .social-btn:hover::before {
            left: 100%;
        }

        .social-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgb(255 255 255);
        }

        .facebook {
        background-color: #1877F2; /* Azul oficial de Facebook */
        }

        .instagram {
        background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af, #515bd4); /* Gradiente de Instagram */
        }

        .linkedin {
        background-color: #0077B5; /* Azul oficial de LinkedIn */
        }

        .tiktok {
        background: linear-gradient(135deg, #000000,  #ffffff2f); /* Negro + colores de TikTok */
        }

        .social-btn i {
            font-size: 25px;
            text-shadow: 0 1px 8px #c0c0c0;
        }

        .footer-bottom {
            background: rgba(0,0,0,0.2);
            padding: 25px 0;
            text-align: center;
            border-top: 1px solid rgba(255,255,255,0.1);
            position: relative;
            z-index: 1;
            max-width: 1750px;
        }

        .footer-bottom p {
            font-size: 14px;
            color: #cbd5e0;
            margin: 0;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .footer-content {
                grid-template-columns: 1fr;
                gap: 30px;
                padding: 40px 0 30px;
            }
            
            .footer-section h3 {
                font-size: 20px;
            }
            
            .social-links {
                justify-content: center;
            }
            
            .container {
                padding: 0 15px;
            }
        }

        @media (max-width: 480px) {
            .footer-section p {
                font-size: 13px;
            }
            
            .social-btn {
                width: 40px;
                height: 40px;
            }
            
            .social-btn i {
                font-size: 18px;
            }
        }
        .close{
            background: #ff0606;
            border-radius:7px;
        }
        /* ═══════════════════════════════════════════════════════════════
   🎨 ESTILOS DEL MODAL DE RECURSOS Y BECAS
   ═══════════════════════════════════════════════════════════════ */

.recursos-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    overflow-y: auto;
    animation: fadeIn 0.3s ease;
}

.recursos-modal.show {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.recursos-modal-content {
    background: #fff;
    border-radius: 20px;
    max-width: 1200px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.4s ease;
}

.recursos-modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 25px 30px;
    border-radius: 20px 20px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
}

.recursos-modal-header h2 {
    margin: 0;
    font-size: 1.8rem;
}

.close-modal {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 2rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.close-modal:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.recursos-modal-body {
    padding: 30px;
}

/* Grid de recursos */
.resources-section {
    width: 100%;
}

.resources-section h3 {
    color: #667eea;
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.resources-section > p {
    color: #666;
    margin-bottom: 30px;
    font-size: 1.1rem;
}

.resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.resource-card {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 15px;
    padding: 25px;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.resource-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.2);
    border-color: #667eea;
}

.resource-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.resource-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}

.resource-description {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 15px;
    line-height: 1.5;
}

.resource-link {
    display: inline-block;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.resource-link:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

.resource-link i {
    margin-left: 5px;
}

/* Consejos de becas */
.scholarship-tips {
    background: linear-gradient(135deg, #fff3cd, #ffeaa7);
    border-left: 4px solid #f59e0b;
    border-radius: 12px;
    padding: 25px;
    margin-top: 30px;
}

.scholarship-tips h4 {
    color: #92400e;
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.scholarship-tips ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.scholarship-tips li {
    color: #78350f;
    padding: 10px 0;
    padding-left: 30px;
    position: relative;
    line-height: 1.6;
}

.scholarship-tips li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #f59e0b;
    font-weight: bold;
    font-size: 1.2rem;
}

/* Animaciones */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .recursos-modal-content {
        width: 100%;
        max-height: 95vh;
        border-radius: 15px;
    }
    
    .recursos-modal-header {
        padding: 20px;
    }
    
    .recursos-modal-header h2 {
        font-size: 1.4rem;
    }
    
    .recursos-modal-body {
        padding: 20px;
    }
    
    .resource-grid {
        grid-template-columns: 1fr;
    }
}

/* Hacer clickeable la tarjeta */
.feature-card[onclick] {
    transition: all 0.3s ease;
}

.feature-card[onclick]:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.3);
}
.social-btn.youtube {
    background-color: #FF0000; /* rojo YouTube */
    color: white;
}
.social-btn.youtube:hover {
    background-color: #cc0000;
}

        
      /* ── CHANGELOG ─────────────────────────────── */

/* Botón de versión en el footer */
#cl-version-btn {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.25);
    color: rgba(255,255,255,.8);
    padding: .3rem .9rem;
    border-radius: 999px;
    font-size: .78rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    transition: background .2s, color .2s;
}
#cl-version-btn:hover {
    background: rgba(255,255,255,.22);
    color: #fff;
}

/* Overlay del modal */
.cl-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: clFadeIn .2s ease;
}
@keyframes clFadeIn  { from { opacity:0 } to { opacity:1 } }
@keyframes clSlideUp { from { transform:translateY(30px); opacity:0 } to { transform:none; opacity:1 } }

/* Modal */
.cl-modal {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 640px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    animation: clSlideUp .25s ease;
    overflow: hidden;
}
.cl-modal-header {
    padding: 1.4rem 1.6rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: linear-gradient(135deg, #6C63FF 0%, #8b5cf6 100%);
    color: #fff;
}
.cl-modal-header h2 { font-size: 1.2rem; font-weight: 700; margin-bottom: .15rem; }
.cl-modal-header p  { font-size: .83rem; opacity: .8; }
.cl-close-btn {
    background: rgba(255,255,255,.2);
    border: none;
    color: #fff;
    width: 32px; height: 32px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    flex-shrink: 0;
}
.cl-close-btn:hover { background: rgba(255,255,255,.35); }
.cl-modal-body {
    padding: 1.2rem 1.6rem;
    overflow-y: auto;
    flex: 1;
}

/* Cards de versión */
.cl-version-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.1rem 1.3rem;
    margin-bottom: 1rem;
    transition: box-shadow .2s;
}
.cl-version-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.cl-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .5rem;
}
.cl-version-num  { font-weight: 700; font-size: 1rem; color: #1e293b; }
.cl-card-fecha   { font-size: .78rem; color: #94a3b8; }
.cl-card-titulo  { font-weight: 600; color: #334155; margin-bottom: .4rem; font-size: .95rem; }
.cl-card-desc    { font-size: .875rem; color: #64748b; line-height: 1.55; white-space: pre-line; }

/* Badges */
.cl-badge         { display:inline-block; padding:.22rem .65rem; border-radius:999px; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.cl-badge-feature { background:#dcfce7; color:#15803d; }
.cl-badge-fix     { background:#fee2e2; color:#b91c1c; }
.cl-badge-mejora  { background:#dbeafe; color:#1d4ed8; }

/* Popup nueva versión */
.cl-new-popup {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9998;
    animation: clSlideUp .35s ease;
}
.cl-popup-inner {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0,0,0,.18);
    padding: 1.1rem 1.3rem;
    max-width: 280px;
    border-top: 4px solid #6C63FF;
}
.cl-popup-badge {
    display: inline-block;
    background: #ede9fe;
    color: #5b21b6;
    font-size: .75rem;
    font-weight: 700;
    padding: .2rem .65rem;
    border-radius: 999px;
    margin-bottom: .5rem;
}
#cl-popup-text {
    font-size: .9rem;
    color: #1e293b;
    font-weight: 600;
    margin-bottom: .8rem;
}
.cl-popup-actions { display:flex; gap:.5rem; }
.cl-popup-btn-ver {
    background: #6C63FF;
    color: #fff;
    border: none;
    padding: .45rem .9rem;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .15s;
}
.cl-popup-btn-ver:hover    { opacity: .85; }
.cl-popup-btn-cerrar {
    background: #f1f5f9;
    color: #374151;
    border: none;
    padding: .45rem .9rem;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
}
:root {
  --pp:   #7c3aed;
  --bb:   #18B3FF;
  --pm:   #a78bfa;
  --bm:   #60a5fa;
  --lb:   #B0D3FF;
  --sp:   rgba(124,58,237,.18);
  --sb:   rgba(24,179,255,.14);

  /* Fondo de sección */
  --bg:        #f5f4f9;        /* gris perla ligeramente morado */
  --bg2:       #ffffff;
  --card-bg:   #ffffff;
  --card-sat:  #f0eefd;        /* tarjetas satélite: blanco violáceo muy suave */
  --text:      #1a0a40;
  --text-muted:#7060a0;
  --border-c:  rgba(124,58,237,.13);
}

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

body {
  font-family: 'Outfit', sans-serif;
  background: #eeedf5;
  color: var(--text);
}

/* ════════════════════════════════
   SECCIÓN
════════════════════════════════ */
.tests-universe {
  padding: 8rem 1.5rem 9rem;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(124,58,237,.07) 0%, transparent 55%),
    radial-gradient(ellipse 45% 45% at 0% 70%, rgba(24,179,255,.06) 0%, transparent 55%),
    radial-gradient(ellipse 45% 45% at 100% 70%, rgba(124,58,237,.05) 0%, transparent 55%),
    linear-gradient(180deg, #f7f6fb 0%, #ffffff 40%, #f3f2fa 100%);
}

/* Puntos de fondo muy suaves */
.tests-universe::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(124,58,237,.08) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, black 0%, transparent 80%);
}

/* ── HEADER ── */
.sec-header {
  text-align: center;
  margin-bottom: 4.5rem;
  position: relative; z-index: 2;
}

.sec-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(124,58,237,.09);
  border: 1px solid rgba(124,58,237,.2);
  color: var(--pp);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  padding: .38rem 1.1rem; border-radius: 999px;
  margin-bottom: 1.3rem;
  font-family: 'Syne', sans-serif;
}

.sec-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--pp);
  box-shadow: 0 0 8px var(--pp);
  animation: blinkDot 2s ease-in-out infinite;
}
@keyframes blinkDot {
  0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(.6)}
}

.sec-title {
  font-size: clamp(2.1rem, 4.8vw, 3.4rem);
  font-weight: 800; line-height: 1.06;
  letter-spacing: -.03em; margin-bottom: 1rem;
  color: var(--text);
  font-family: 'Syne', sans-serif;
}

.sec-title mark {
  background: linear-gradient(135deg, var(--pp) 0%, var(--bb) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sec-sub {
  color: var(--text-muted);
  font-size: 1.05rem; line-height: 1.75;
  max-width: 510px; margin: 0 auto;
}

/* ════════════════════════════════
   SISTEMA SOLAR
════════════════════════════════ */
.solar-system {
  position: relative;
  max-width: 1200px;
  margin: 0 auto 5rem;
  min-height: 660px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Halo suave detrás de ECRIPT */
.solar-glow {
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(124,58,237,.11) 0%,
    rgba(24,179,255,.07) 40%,
    transparent 70%);
  filter: blur(50px);
  animation: glowPulse 5s ease-in-out infinite;
  pointer-events: none; z-index: 0;
}
@keyframes glowPulse {
  0%,100%{transform:scale(1);opacity:.8} 50%{transform:scale(1.2);opacity:1}
}

/* Anillos orbitales */
.orbit-ring {
  position: absolute; border-radius: 50%;
  border: 1px dashed rgba(124,58,237,.1);
  pointer-events: none;
  animation: rotateSlow linear infinite;
}
.orbit-ring:nth-child(1){ width:560px;height:560px;animation-duration:42s; }
.orbit-ring:nth-child(2){ width:710px;height:710px;animation-duration:68s;animation-direction:reverse;border-color:rgba(24,179,255,.07); }

@keyframes rotateSlow{ from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

/* ─── ECRIPT CENTRAL ─── */
.ecript-star {
  position: relative; z-index: 10;
  width: 390px; flex-shrink: 0;
}

.ecript-wrap {
  position: relative; border-radius: 32px;
  cursor: pointer; padding: 2.5px;
  background: linear-gradient(135deg, var(--pp), var(--bb), #c084fc, var(--pp));
  background-size: 300% 300%;
  animation: borderSpin 5s linear infinite;
  box-shadow:
    0 0 0 1px rgba(124,58,237,.08),
    0 28px 70px rgba(124,58,237,.22),
    0 8px 28px rgba(24,179,255,.16);
  transition: transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .45s;
}
.ecript-wrap:hover {
  transform: translateY(-12px) scale(1.015);
  box-shadow:
    0 0 0 1px rgba(124,58,237,.2),
    0 44px 90px rgba(124,58,237,.3),
    0 14px 44px rgba(24,179,255,.22);
}

@keyframes borderSpin {
  0%  {background-position:0% 50%}
  50% {background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* Interior: blanco puro con toque de lavanda */
.ecript-body {
  background: linear-gradient(160deg, #ffffff 0%, #faf8ff 45%, #f4f1ff 100%);
  border-radius: 30px;
  padding: 2.8rem 2.1rem 2.4rem;
  text-align: center;
  position: relative; overflow: hidden;
}

/* Aura sutil interna */
.ecript-body::before {
  content: '';
  position: absolute;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,.06) 0%, transparent 70%);
  top: -130px; left: 50%; transform: translateX(-50%);
  animation: auraPulse 5s ease-in-out infinite;
  pointer-events: none;
}
.ecript-body::after {
  content: '';
  position: absolute;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(24,179,255,.05) 0%, transparent 70%);
  bottom: -70px; right: 8%;
  animation: auraPulse 5s ease-in-out infinite .8s;
  pointer-events: none;
}
@keyframes auraPulse {
  0%,100%{opacity:.7;transform:translateX(-50%) scale(1)}
  50%    {opacity:1 ;transform:translateX(-50%) scale(1.3)}
}

/* Partículas */
.e-particles{ position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:30px; }
.ep{
  position:absolute; border-radius:50%;
  animation:particleRise linear infinite; opacity:0;
}
@keyframes particleRise{
  0%  {transform:translateY(100%) scale(0);opacity:0}
  15% {opacity:.4}
  85% {opacity:.08}
  100%{transform:translateY(-130%) scale(2);opacity:0}
}

/* Badge NUEVO */
.e-badge{
  display:inline-flex;align-items:center;gap:.4rem;
  background:linear-gradient(135deg,var(--pp),var(--bb));
  color:#fff;font-size:.6rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;
  padding:.28rem .9rem;border-radius:999px;
  margin-bottom:1.5rem;position:relative;z-index:1;
  box-shadow:0 4px 18px rgba(124,58,237,.35);
  animation:badgePop 2.5s ease-in-out infinite;
  font-family:'Syne',sans-serif;
}
.e-badge-dot{width:5px;height:5px;border-radius:50%;background:#fff;animation:blinkDot 1s ease-in-out infinite;}
@keyframes badgePop{
  0%,100%{box-shadow:0 4px 18px rgba(124,58,237,.35)}
  50%    {box-shadow:0 4px 28px rgba(24,179,255,.55)}
}

/* Icono */
.e-icon{
  width:82px;height:82px;
  background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(24,179,255,.1));
  border:1.5px solid rgba(124,58,237,.2);
  border-radius:22px;
  display:flex;align-items:center;justify-content:center;font-size:2.5rem;
  margin:0 auto 1.2rem;
  position:relative;z-index:1;
  box-shadow:0 6px 22px rgba(124,58,237,.16);
  animation:iconFloat 5s ease-in-out infinite;
}
@keyframes iconFloat{
  0%,100%{transform:translateY(0) rotate(-1.5deg)}
  50%    {transform:translateY(-9px) rotate(1.5deg)}
}

.e-cat{
  display:inline-block;font-size:.6rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.13em;
  color:var(--bb);background:rgba(24,179,255,.1);
  border:1px solid rgba(24,179,255,.22);
  padding:.2rem .8rem;border-radius:6px;
  margin-bottom:.9rem;position:relative;z-index:1;
  font-family:'Syne',sans-serif;
}

.e-title{
  font-size:4rem;font-weight:800;line-height:1;
  margin-bottom:.5rem;position:relative;z-index:1;
  letter-spacing:.05em;
  background:linear-gradient(135deg,var(--pp) 0%,var(--bb) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;background-size:200% 200%;
  animation:titleShimmer 4s ease-in-out infinite;
  font-family:'Syne',sans-serif;
}
@keyframes titleShimmer{
  0%,100%{background-position:0% 50%}
  50%    {background-position:100% 50%}
}

.e-fullname{
  font-size:.73rem;color:rgba(80,50,150,.45);
  font-style:italic;margin-bottom:1.1rem;
  position:relative;z-index:1;line-height:1.55;
}

.e-divider{
  width:38px;height:2px;margin:0 auto 1.1rem;
  background:linear-gradient(90deg,transparent,var(--pp),var(--bb),transparent);
  position:relative;z-index:1;
}

.e-desc{
  font-size:.88rem;color:rgba(60,30,120,.6);
  line-height:1.75;margin-bottom:1.4rem;
  position:relative;z-index:1;
}
.e-desc strong{color:var(--pp);font-weight:700;}

/* Pills */
.e-pills{
  display:flex;flex-wrap:wrap;gap:.4rem;
  justify-content:center;margin-bottom:1.8rem;
  position:relative;z-index:1;
}
.e-pill{
  display:inline-flex;align-items:center;gap:.3rem;
  background:rgba(124,58,237,.07);
  border:1px solid rgba(124,58,237,.14);
  border-radius:8px;padding:.35rem .75rem;
  font-size:.72rem;color:rgba(60,30,120,.65);
  transition:all .25s;font-weight:500;
}
.e-pill:hover{background:rgba(124,58,237,.15);border-color:rgba(124,58,237,.3);color:var(--pp);}
.e-pill-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}

/* CTA */
.e-cta{
  display:inline-flex;align-items:center;gap:.7rem;
  background:linear-gradient(135deg,var(--pp),var(--bb));
  color:#fff;border:none;cursor:pointer;
  padding:1rem 2.3rem;border-radius:15px;
  font-size:.96rem;font-weight:700;letter-spacing:.025em;
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 8px 28px var(--sp),0 3px 14px var(--sb);
  position:relative;z-index:1;margin-bottom:.85rem;overflow:hidden;
  font-family:'Syne',sans-serif;
}
.e-cta::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.16) 0%,transparent 60%);
  opacity:0;transition:opacity .3s;
}
.e-cta:hover{transform:scale(1.06) translateY(-3px);box-shadow:0 16px 44px var(--sp),0 6px 22px var(--sb);}
.e-cta:hover::before{opacity:1;}
.e-cta:hover .cta-arr{transform:translateX(5px);}
.cta-arr{transition:transform .3s;display:inline-flex;}

.e-note{
  font-size:.7rem;color:rgba(100,70,180,.4);
  display:flex;align-items:center;justify-content:center;
  gap:.4rem;position:relative;z-index:1;
}

/* ════════════════════════════════
   SATÉLITES
════════════════════════════════ */
.satellites-wrap{
  position:absolute;inset:0;
  pointer-events:none;
  display:flex;align-items:center;justify-content:center;
}

.sat-col{
  position:absolute;
  display:flex;flex-direction:column;gap:1rem;
  pointer-events:all;
}
.sat-col--left { right:calc(50% + 215px); }
.sat-col--right{ left :calc(50% + 215px); }

/* Tarjeta satélite — fondo blanco, difuminada */
.sat-card{
  width:205px;
  background: #ffffff;
  border:1px solid rgba(124,58,237,.1);
  border-radius:18px;
  padding:1.1rem 1rem;
  display:flex;align-items:flex-start;gap:.8rem;
  cursor:pointer;
  filter:blur(2.5px) saturate(.4) opacity(.5);
  transform:scale(.93);
  transition:all .4s cubic-bezier(.34,1.56,.64,1);
  position:relative;overflow:hidden;
  box-shadow:0 4px 18px rgba(124,58,237,.08);
}
.sat-card::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--pp),var(--bb));
  transform:scaleX(0);transform-origin:left;transition:transform .3s;
}
.sat-card:hover{
  filter:blur(0) saturate(1) opacity(1);
  transform:scale(1.04);
  box-shadow:0 12px 36px var(--sp);
  border-color:rgba(124,58,237,.25);
}
.sat-card:hover::after{transform:scaleX(1);}

/* Fade lateral en columnas */
.sat-col--left::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to right,rgba(247,246,251,.75) 0%,transparent 100%);
  pointer-events:none;z-index:2;border-radius:18px;
}
.sat-col--right::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to left,rgba(247,246,251,.75) 0%,transparent 100%);
  pointer-events:none;z-index:2;border-radius:18px;
}

.sat-icon{
  width:40px;height:40px;flex-shrink:0;
  border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;
}
.sat-body{flex:1;min-width:0;}
.sat-tag{
  font-size:.55rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--pp);background:rgba(124,58,237,.1);
  padding:.1rem .45rem;border-radius:4px;
  display:inline-block;margin-bottom:.3rem;
  font-family:'Syne',sans-serif;
}
.sat-name{font-size:.88rem;font-weight:700;color:var(--text);margin-bottom:.15rem;font-family:'Syne',sans-serif;}
.sat-desc{font-size:.68rem;color:var(--text-muted);line-height:1.45;}
.sat-btn{
  display:inline-block;margin-top:.45rem;
  font-size:.65rem;font-weight:700;color:var(--pp);
  background:none;border:none;cursor:pointer;padding:0;
  transition:color .2s;letter-spacing:.04em;font-family:'Syne',sans-serif;
}
.sat-btn:hover{color:var(--bb);}

.sat-card--soon{opacity:.25!important;pointer-events:none!important;filter:blur(5px) saturate(.15) opacity(.25)!important;}

/* ════════════════════════════════
   BADGES FLOTANTES
════════════════════════════════ */
.floating-badges{position:absolute;inset:0;pointer-events:none;z-index:5;}
.f-badge{
  position:absolute;
  background:#ffffff;
  border:1px solid rgba(124,58,237,.18);
  border-radius:12px;padding:.5rem .9rem;
  font-size:.72rem;font-weight:600;
  color:rgba(60,30,120,.75);
  box-shadow:0 4px 16px rgba(124,58,237,.1);
  white-space:nowrap;
  animation:floatBadge ease-in-out infinite;
}
.f-badge span{margin-right:.3rem;}
.f-badge:nth-child(1){top:10%;left:4%;animation-duration:4.5s;animation-delay:0s;}
.f-badge:nth-child(2){top:16%;right:4%;animation-duration:5s;animation-delay:.8s;}
.f-badge:nth-child(3){bottom:18%;left:5%;animation-duration:4s;animation-delay:.4s;}
.f-badge:nth-child(4){bottom:12%;right:4%;animation-duration:5.5s;animation-delay:1.2s;}
@keyframes floatBadge{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-8px)}
}

/* ════════════════════════════════
   FILA INFERIOR
════════════════════════════════ */
.bottom-row{max-width:1200px;margin:0 auto;}

/* Máscara fade lateral sobre el grid completo */
.row-grid-wrap {
  position: relative;
}
.row-grid-wrap::before,
.row-grid-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  pointer-events: none;
  z-index: 2;
}
.row-grid-wrap::before {
  left: 0;
  background: linear-gradient(to right, rgba(247,246,251,1) 0%, transparent 100%);
}
.row-grid-wrap::after {
  right: 0;
  background: linear-gradient(to left, rgba(247,246,251,1) 0%, transparent 100%);
}

.bottom-row-title{
  text-align:center;font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.18em;
  color:rgba(100,70,160,.35);
  margin-bottom:1.4rem;
  display:flex;align-items:center;gap:1rem;
  font-family:'Syne',sans-serif;
}
.bottom-row-title::before,.bottom-row-title::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,58,237,.18),transparent);
}

.row-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.9rem;}

/* ── Difuminado progresivo desde los extremos hacia el centro ── */
.row-grid .row-card:nth-child(1) { filter: blur(2px) opacity(.45) saturate(.4); transform: scale(.94); }
.row-grid .row-card:nth-child(2) { filter: blur(1px) opacity(.7)  saturate(.7); transform: scale(.97); }
.row-grid .row-card:nth-child(3) { filter: none; opacity:1; transform: scale(1); }
.row-grid .row-card:nth-child(4) { filter: none; opacity:1; transform: scale(1); }
.row-grid .row-card:nth-child(5) { filter: blur(1px) opacity(.7)  saturate(.7); transform: scale(.97); }
.row-grid .row-card:nth-child(6) { filter: blur(2.5px) opacity(.38) saturate(.3); transform: scale(.93); pointer-events:none; }

/* Al hacer hover en cualquier tarjeta, se despeja */
.row-grid .row-card:nth-child(1):hover,
.row-grid .row-card:nth-child(2):hover,
.row-grid .row-card:nth-child(5):hover { filter: none; opacity:1; transform: scale(1.03); }

/* La 6 (próximamente) nunca se desfumina */
.row-grid .row-card:nth-child(6) { cursor: default !important; }

.row-card{
  background:#ffffff;
  border:1px solid rgba(124,58,237,.1);
  border-radius:16px;padding:1.3rem 1rem;
  text-align:center;cursor:pointer;
  transition:all .4s cubic-bezier(.34,1.56,.64,1), filter .4s ease;
  position:relative;overflow:hidden;
  box-shadow:0 2px 12px rgba(124,58,237,.07);
}
.row-card::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--pp),var(--bb));
  transform:scaleX(0);transform-origin:left;transition:transform .3s;
}
.row-card:hover{transform:translateY(-7px);box-shadow:0 16px 38px var(--sp);border-color:rgba(124,58,237,.22);}
.row-card:hover::after{transform:scaleX(1);}

.rc-icon{width:48px;height:48px;border-radius:14px;margin:0 auto .85rem;display:flex;align-items:center;justify-content:center;font-size:1.45rem;}
.rc-tag{font-size:.56rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--pp);background:rgba(124,58,237,.1);padding:.1rem .45rem;border-radius:4px;display:inline-block;margin-bottom:.4rem;font-family:'Syne',sans-serif;}
.rc-name{font-size:.85rem;font-weight:700;color:var(--text);margin-bottom:.3rem;font-family:'Syne',sans-serif;}
.rc-desc{font-size:.68rem;color:var(--text-muted);line-height:1.45;margin-bottom:.75rem;}
.rc-btn{
  display:inline-flex;align-items:center;gap:.25rem;
  background:rgba(124,58,237,.09);color:var(--pp);
  border:1px solid rgba(124,58,237,.18);cursor:pointer;
  padding:.38rem .85rem;border-radius:999px;
  font-size:.66rem;font-weight:700;transition:all .2s;
  font-family:'Syne',sans-serif;
}
.rc-btn:hover{background:linear-gradient(135deg,var(--pp),var(--bb));color:#fff;border-color:transparent;}
.rc-btn:disabled{opacity:.3;cursor:default;pointer-events:none;}

.row-card--soon{opacity:.4;pointer-events:none;cursor:default;}
.row-card--soon .rc-tag{color:rgba(100,80,150,.3);background:rgba(124,58,237,.05);}

/* ════════════════════════════════
   MODAL AUTH
════════════════════════════════ */
.auth-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(240,238,252,.55);
  backdrop-filter:blur(22px) saturate(180%);
  display:none;align-items:center;justify-content:center;
  padding:1rem;animation:fadeIn .2s ease;
}
.auth-overlay.show{display:flex;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.auth-box{
  background:#ffffff;
  border:1.5px solid rgba(124,58,237,.2);
  border-radius:30px;
  padding:3.2rem 2.6rem 2.8rem;
  max-width:430px;width:100%;
  text-align:center;
  box-shadow:
    0 0 0 1px rgba(124,58,237,.06),
    0 36px 90px rgba(124,58,237,.2),
    0 8px 32px rgba(24,179,255,.1);
  animation:boxIn .4s cubic-bezier(.34,1.56,.64,1);
  position:relative;overflow:hidden;
}
.auth-box::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--pp),var(--bb),var(--pp));
  background-size:200% 100%;
  animation:shimmerLine 3s linear infinite;
}
@keyframes shimmerLine{0%{background-position:0%}100%{background-position:200%}}
@keyframes boxIn{from{transform:translateY(35px) scale(.94);opacity:0}to{transform:none;opacity:1}}

/* Icono del modal */
.auth-mascot-wrap{position:relative;width:88px;height:88px;margin:0 auto 1.5rem;}
.auth-mascot-ring{
  position:absolute;inset:-6px;border-radius:50%;
  padding:2px;
  background:linear-gradient(135deg,var(--pp),var(--bb));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:destination-out;
  mask-composite:exclude;
  animation:rotateSlow 4s linear infinite;
}
.auth-mascot-icon{
  width:88px;height:88px;border-radius:50%;
  background:linear-gradient(135deg,rgba(124,58,237,.1),rgba(24,179,255,.08));
  border:1px solid rgba(124,58,237,.2);
  display:flex;align-items:center;justify-content:center;font-size:2.6rem;
  box-shadow:0 0 0 8px rgba(124,58,237,.06),0 0 40px rgba(124,58,237,.12);
}

.auth-box h2{font-size:1.7rem;font-weight:800;color:var(--text);margin-bottom:.55rem;font-family:'Syne',sans-serif;}
.auth-box>p{font-size:.95rem;color:var(--text-muted);line-height:1.7;margin-bottom:2rem;}
.auth-box strong{color:var(--pp);font-weight:700;}

.auth-actions{display:flex;flex-direction:column;gap:.8rem;}
.auth-btn{
  display:block;padding:1rem;border-radius:14px;
  text-decoration:none;font-size:.95rem;font-weight:700;
  letter-spacing:.025em;transition:all .28s;
  font-family:'Syne',sans-serif;
}
.auth-btn--primary{
  background:linear-gradient(135deg,var(--pp),var(--bb));
  color:#fff;box-shadow:0 7px 24px rgba(124,58,237,.3);
}
.auth-btn--primary:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(124,58,237,.4);}
.auth-btn--secondary{
  background:rgba(124,58,237,.07);
  border:1.5px solid rgba(124,58,237,.2);
  color:var(--pp);
}
.auth-btn--secondary:hover{background:rgba(124,58,237,.13);border-color:rgba(124,58,237,.38);}

.auth-close{
  position:absolute;top:18px;right:20px;
  background:rgba(124,58,237,.08);border:none;
  width:34px;height:34px;border-radius:50%;
  font-size:1.1rem;cursor:pointer;color:var(--text-muted);
  display:flex;align-items:center;justify-content:center;transition:all .22s;
}
.auth-close:hover{background:rgba(124,58,237,.16);color:var(--pp);transform:rotate(90deg);}

.auth-note{margin-top:1.1rem;font-size:.7rem;color:rgba(100,70,160,.4);display:flex;align-items:center;justify-content:center;gap:.35rem;}

/* ════════════════════════════════
   RESPONSIVE
════════════════════════════════ */
@media(max-width:1100px){
  .sat-col--left {right:calc(50% + 198px);}
  .sat-col--right{left :calc(50% + 198px);}
  .sat-card{width:185px;}
}
@media(max-width:900px){
  .solar-system{flex-direction:column;min-height:auto;}
  .satellites-wrap{display:none;}
  .floating-badges{display:none;}
  .ecript-star{width:100%;max-width:400px;}
  .row-grid{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:640px){
  .row-grid{grid-template-columns:repeat(2,1fr);}
  .ecript-star{max-width:340px;}
}
@media(max-width:420px){
  .row-grid{grid-template-columns:1fr;}
}
       /* =====================================================
   AVATAR NAVBAR SYSTEM — agregar a estiloPrincipal.css
   (o en un <style> en el <head> del HTML)
   ===================================================== */

/* ── Zona de autenticación ── */
.auth-zone {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

/* ── Botones para invitados ── */
.auth-guest {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-nav-login,
.btn-nav-register {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
}

.btn-nav-login {
    color: #ffffff;
    background: rgba(255,255,255,0.1);
    border: 1.5px solid rgba(255,255,255,0.25);
    backdrop-filter: blur(8px);
}

.btn-nav-login:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.5);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

.btn-nav-register {
    color: #1a1a1a;
    background: linear-gradient(135deg, #ffffff, #e8f4ff);
    border: 1.5px solid transparent;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.btn-nav-register:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
}

.btn-nav-login i,
.btn-nav-register i {
    font-size: 13px;
}

/* ── Avatar wrapper ── */
.avatar-wrapper {
    position: relative;
}

/* ── Botón avatar ── */
.avatar-btn {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2.5px solid rgba(255,255,255,0.3);
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    padding: 0;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4);
}

.avatar-btn:hover {
    transform: scale(1.1);
    border-color: rgba(255,255,255,0.6);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.6);
}

.avatar-btn.active {
    border-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.3), 0 6px 20px rgba(124, 58, 237, 0.5);
}

.avatar-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.avatar-initials {
    color: white;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    user-select: none;
    font-family: Georgia, serif;
}

/* Punto verde de estado */
.avatar-status {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 11px;
    height: 11px;
    background: #22c55e;
    border-radius: 50%;
    /* z-index: 999; */
    border: 2px solid #1a1a1a;
    animation: pulseOnline 2.5s ease-in-out infinite;
}

@keyframes pulseOnline {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
    50%       { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); }
}

/* ── Dropdown ── */
.avatar-dropdown {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    width: 260px;
    background: rgba(15, 15, 20, 0.96);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px;
    box-shadow:
        0 20px 60px rgba(0,0,0,0.5),
        0 0 0 1px rgba(255,255,255,0.05),
        inset 0 1px 0 rgba(255,255,255,0.1);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px) scale(0.96);
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 9999;
}

.avatar-dropdown.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

/* Header del dropdown */
.dropdown-user-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 14px;
}

.dropdown-avatar-big {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.15);
}

.dropdown-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.dropdown-initials {
    color: white;
    font-size: 16px;
    font-weight: 700;
    font-family: Georgia, serif;
}

.dropdown-user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.dropdown-name {
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-username {
    color: rgba(255,255,255,0.45);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Divider */
.dropdown-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    margin: 0 12px;
}

/* Opciones */
.dropdown-options {
    list-style: none;
    padding: 6px 0;
    margin: 0;
}

.dropdown-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 0;
    width: 100%;
    border: none;
    background: none;
}

.dropdown-option:hover {
    background: rgba(255,255,255,0.07);
    color: #ffffff;
    padding-left: 20px;
}

.upload-trigger {
    cursor: pointer;
}

.option-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255,255,255,0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.dropdown-option:hover .option-icon {
    background: rgba(124, 58, 237, 0.3);
    color: #a78bfa;
}

.option-label {
    flex: 1;
}

.option-arrow {
    color: rgba(255,255,255,0.2);
    font-size: 11px;
    transition: all 0.2s ease;
}

.dropdown-option:hover .option-arrow {
    color: rgba(255,255,255,0.5);
    transform: translateX(3px);
}

/* Cerrar sesión */
.dropdown-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    color: #f87171;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    transition: all 0.2s ease;
    background: rgba(248, 113, 113, 0.04);
    margin: 4px 0 0;
}

.dropdown-logout:hover {
    background: rgba(248, 113, 113, 0.12);
    color: #fca5a5;
    padding-left: 22px;
}

.dropdown-logout i {
    font-size: 14px;
}

/* ── Upload loading state ── */
.avatar-btn.uploading {
    pointer-events: none;
}

.avatar-btn.uploading::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: #ffffff;
    animation: spinAvatar 0.8s linear infinite;
}

@keyframes spinAvatar {
    to { transform: rotate(360deg); }
}

/* ── Toast de confirmación ── */
.profile-toast {
    position: fixed;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15,15,20,0.95);
    backdrop-filter: blur(12px);
    color: #ffffff;
    padding: 12px 22px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
    z-index: 99999;
    transition: bottom 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.profile-toast.show {
    bottom: 30px;
}

.profile-toast i {
    color: #22c55e;
    font-size: 16px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .btn-nav-login span,
    .btn-nav-register span {
        display: none;
    }

    .btn-nav-login,
    .btn-nav-register {
        width: 38px;
        height: 38px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }

    .avatar-dropdown {
        right: -10px;
        width: 240px;
    }
}




/* ── CHANGELOG ULTRA MODERN DESIGN ─────────────────────────────── */

/* 1. Botón flotante en el footer */
#eb-mod-version-btn {
    position: relative;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
/* Efecto de luz que pasa por el botón */
#eb-mod-version-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: 0.5s;
}
#eb-mod-version-btn:hover::before { left: 100%; }
#eb-mod-version-btn:hover {
    background: rgba(124,58,237,0.2);
    border-color: #7c3aed;
    box-shadow: 0 0 15px rgba(124,58,237,0.4);
}

/* 2. Overlay Oscuro con Blur */
.eb-mod-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 20, 0.85);
    backdrop-filter: blur(12px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}
.eb-mod-overlay.eb-open {
    opacity: 1;
    visibility: visible;
}

/* 3. Modal Principal (Glassmorphism) */
.eb-mod-modal {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    width: 100%;
    max-width: 640px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), 
                inset 0 1px 0 rgba(255,255,255,0.1);
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    color: #fff;
}
.eb-mod-overlay.eb-open .eb-mod-modal {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* 4. Header con Gradiente Neón */
.eb-mod-header {
    position: relative;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, rgba(124,58,237,0.2), rgba(24,179,255,0.2));
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
/* Línea de luz inferior */
.eb-mod-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--pp, #7c3aed), var(--bb, #18B3FF), transparent);
    opacity: 0.7;
}
.eb-mod-header h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-shadow: 0 2px 10px rgba(124,58,237,0.5);
}
.eb-mod-header p {
    font-size: 0.85rem;
    margin-top: 0.3rem;
    opacity: 0.7;
    color: #cbd5e1;
}
.eb-mod-close {
    position: absolute;
    top: 1.2rem; right: 1.2rem;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.2s;
}
.eb-mod-close:hover {
    background: rgba(255,255,255,0.2);
    transform: rotate(90deg);
}

/* 5. Cuerpo del Modal */
.eb-mod-body {
    padding: 1.5rem 2rem 2rem;
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(124,58,237,0.5) transparent;
}
.eb-mod-body::-webkit-scrollbar { width: 6px; }
.eb-mod-body::-webkit-scrollbar-thumb { background: rgba(124,58,237,0.5); border-radius: 10px; }

/* 6. Sistema de Tarjetas (Grid Inteligente) */
.eb-mod-grid {
    display: grid;
    gap: 1.5rem;
}

/* Entrada Individual */
.eb-mod-entry {
    position: relative;
    padding-left: 28px;
    animation: fadeInUp 0.5s ease forwards;
    opacity: 0;
}
.eb-mod-entry:nth-child(1) { animation-delay: 0.1s; }
.eb-mod-entry:nth-child(2) { animation-delay: 0.2s; }
.eb-mod-entry:nth-child(3) { animation-delay: 0.3s; }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Línea de tiempo lateral (Glow) */
.eb-mod-entry::before {
    content: '';
    position: absolute;
    left: 0; top: 8px;
    bottom: -1.5rem;
    width: 2px;
    background: linear-gradient(to bottom, var(--pp, #7c3aed), transparent);
    opacity: 0.3;
}
.eb-mod-entry:last-child::before { display: none; }

/* Punto de tiempo (Dot) */
.eb-mod-dot {
    position: absolute;
    left: -4px; top: 10px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10px var(--pp, #7c3aed), 0 0 20px var(--bb, #18B3FF);
}

/* Tarjeta Interna (Glass Card) */
.eb-mod-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 1.2rem 1.5rem;
    transition: all 0.3s ease;
    margin: 20px;
}
.eb-mod-card:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(124,58,237,0.3);
    transform: translateX(5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* Tipografía de la tarjeta */
.eb-mod-head-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}
.eb-mod-ver {
    font-weight: 800;
    font-size: 1rem;
    background: linear-gradient(90deg, #fff, #cbd5e1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.eb-mod-date {
    font-size: 0.75rem;
    color: #64748b;
}
.eb-mod-badge {
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
}
.badge-feat { color: #a78bfa; border-color: rgba(167,139,250,0.3); }
.badge-fix  { color: #f87171; border-color: rgba(248,113,113,0.3); }
.badge-mej  { color: #38bdf8; border-color: rgba(56,189,248,0.3); }

.eb-mod-title {
    font-size: 1rem;
    font-weight: 600;
    color: #e2e8f0;
    margin-bottom: 0.3rem;
}
.eb-mod-desc {
    font-size: 0.85rem;
    color: #94a3b8;
    line-height: 1.5;
    white-space: pre-line;
}

/* 7. Popup Notificación (Floating) */
.eb-mod-popup {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 9998;
    transform: translateY(100px) scale(0.8);
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.eb-mod-popup.eb-show {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
}
.eb-mod-popup-box {
    background: rgba(20, 20, 30, 0.9);
    border: 1px solid rgba(124,58,237,0.3);
    border-radius: 20px;
    padding: 1.5rem;
    width: 320px;
    color: #fff;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 30px rgba(124,58,237,0.15);
    backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
}
/* Decoración de fondo */
.eb-mod-popup-box::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(124,58,237,0.15) 0%, transparent 60%);
    animation: rotate 10s linear infinite;
}
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.eb-mod-pop-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--bb, #18B3FF);
    font-weight: 700;
    margin-bottom: 0.5rem;
    position: relative; z-index: 1;
}
#eb-mod-pop-text {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1.2rem;
    position: relative; z-index: 1;
    line-height: 1.4;
}
.eb-mod-pop-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--pp, #7c3aed), var(--bb, #18B3FF));
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative; z-index: 1;
    width: 100%;
    justify-content: center;
}
.eb-mod-pop-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(124,58,237,0.4);
}
@media (max-width: 768px) {
    .logo-img{
        width: 50px;
        height: 50px;
    }
    .logo-text{
        font-size:20px;
    }
    .logo-text1 {
        font-size: 10px;
    }
    .hero-text p{
        font-size:14px;
    }
    .cta-button{
         font-size:16px;
    }
    .whatsapp-float{
        width: 60px;
        height: 60px;
    }
    .whatsapp-float img{
         width: 40px;
        height: 40px;
    }
    .mindy{
        width: 60px;
        height: 60px;
        bottom: 100px;
    }
    .mindy img {
        width: 50px;
        height: 50px;
    }
    .sa-bubble{
        width: 240px;
        height: 190px;
    }
    .sa-tag{
        font-size:8px;
    }
    .sa-title{
        font-size:13px;
    }
    .sa-sub{
        font-size:11px;
    }
     .tests-universe { padding: 4rem 1rem 5rem; }
 
    .sec-title { font-size: 1.8rem; }
    .sec-sub   { font-size: .9rem; }
 
    .solar-system {
        flex-direction: column;
        min-height: auto;
        padding: 0;
    }
 
    .satellites-wrap { display: none; }
    .floating-badges { display: none; }
    .orbit-ring      { display: none; }
    .solar-glow      { display: none; }
 
    .ecript-star { width: 100%; max-width: 100%; }
 
    .ecript-wrap {
        border-radius: 20px;
        box-shadow: 0 12px 36px rgba(124,58,237,.2);
    }
 
    .ecript-body { padding: 2rem 1.4rem 1.8rem; border-radius: 18px; }
 
    .e-title    { font-size: 3rem; }
    .e-icon     { width: 68px; height: 68px; font-size: 2rem; }
    .e-desc     { font-size: .83rem; }
    .e-cta      { width: 100%; justify-content: center; padding: .9rem 1.5rem; }
 
    /* Fila inferior — 2 columnas */
    .bottom-row-title { font-size: .62rem; }
    .row-grid         { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
 
    /* Quitar difuminado en móvil — todos visibles */
    .row-grid .row-card:nth-child(1),
    .row-grid .row-card:nth-child(2),
    .row-grid .row-card:nth-child(5) {
        filter: none;
        opacity: 1;
        transform: scale(1);
    }
 
    .row-card { padding: 1rem .8rem; border-radius: 14px; }
    .rc-icon  { width: 40px; height: 40px; font-size: 1.2rem; margin-bottom: .6rem; }
    .rc-name  { font-size: .8rem; }
    .rc-desc  { font-size: .65rem; }
    .rc-btn   { font-size: .62rem; padding: .3rem .7rem; }
 
    /* ── FEATURES ── */
    .features { padding: 3rem 0; }
    .section-title { font-size: 1.8rem; }
 
    .features-grid {
        grid-template-columns: 1fr;
        gap: 1.2rem;
        margin-top: 2.5rem;
    }
 
    .feature-card { padding: 1.8rem 1.4rem; }
 
    /* ── SESSION ALERT ── */
    .session-alert-wrap {
        top: auto;
        bottom: 140px;
        right: 12px;
        left: 12px;
        flex-direction: column-reverse;
        align-items: flex-end;
    }
 
    .sa-bubble {
        width: 100%;
        max-width: 310px;
    }
 
    .sa-bubble::after { display: none; }
 
    .sa-tag   { font-size: 9px; }
    .sa-title { font-size: 13px; }
    .sa-sub   { font-size: 11px; margin-bottom: 12px; }
 
    .sa-mascot-wrap {
        width: 54px; height: 54px;
        margin-bottom: 4px;
        margin-left: 0;
    }
    .sa-mascot-img { width: 54px; height: 54px; }
 
    /* ── WHATSAPP & MINDY botones flotantes ── */
    .whatsapp-float {
        width: 58px; height: 58px;
        bottom: 20px; right: 16px;
    }
    .whatsapp-float img { width: 42px; height: 42px; }
 
    .mindy {
        width: 58px; height: 58px;
        bottom: 90px; right: 16px;
    }
    .mindy img { width: 48px; height: 48px; }
 
    .mindia-bubble {
        width: 58px; height: 58px;
        bottom: 168px; right: 16px;
    }
 
    /* ── MODAL MINDY ── */
    .mindy-modal-content {
        width: 95%;
        height: auto;
        min-height: 400px;
        margin: 10px auto;
        padding: 20px 15px;
    }
    .mindy-modal-content h2 { font-size: 2rem; }
    .mindy-modal-content p  { font-size: 1rem; }
 
    /* ── MODAL AUTH ── */
    .auth-box {
        padding: 2.2rem 1.5rem 2rem;
        border-radius: 22px;
    }
    .auth-box h2 { font-size: 1.4rem; }
    .auth-box > p { font-size: .85rem; }
    .auth-btn { padding: .85rem; font-size: .88rem; }
 
    /* ── MODAL RECURSOS ── */
    .recursos-modal-content {
        width: 100%;
        border-radius: 14px;
        max-height: 92vh;
    }
    .recursos-modal-header h2 { font-size: 1.2rem; }
    .recursos-modal-body      { padding: 16px; }
    .resource-grid            { grid-template-columns: 1fr; }
 
    /* ── CHANGELOG POPUP ── */
    .eb-mod-popup {
        bottom: 1rem;
        right: .8rem;
        left: .8rem;
    }
    .eb-mod-popup-box { width: 100%; }
 
    .eb-mod-overlay { padding: .8rem; }
    .eb-mod-modal   { border-radius: 18px; max-height: 92vh; }
    .eb-mod-header  { padding: 1.2rem 1.3rem; }
    .eb-mod-body    { padding: 1rem 1.2rem 1.5rem; }
 
    /* ── FOOTER ── */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 36px 1rem 24px;
    }
 
    .footer-section h3   { font-size: 18px; }
    .footer-section p    { font-size: 13px; }
    .footer-section a    { font-size: 13px; }
 
    .social-links   { justify-content: center; }
    .social-btn     { width: 40px; height: 40px; }
    .social-btn i   { font-size: 18px; }
 
    .footer-bottom { padding: 18px 1rem; }
    .footer-bottom p { font-size: 12px; }

 
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 1.5rem;
        padding: 1.5rem 1rem;
    }
 
    .hero-text h1  { font-size: 2rem; line-height: 1.2; }
    .hero-text p   { font-size: 1rem; }
 
    .cta-button {
        font-size: 1rem;
        padding: .85rem 2rem;
    }
 
    .mascot {
        width: 200px; height: 200px;
        margin: 0 auto;
    }
    .mascot-name { font-size: 1.1rem; }
 

}


  /* ── HERO ── */
  .hero {
    display: flex;
    align-items: center;
    justify-content: center; 
    padding: 80px 24px 60px;   
    height: 100vh;
    background: linear-gradient(135deg, var(--primary-purple) 0%, var(--bright-blue) 100%);
    position: relative;
    overflow: hidden;
    
  }
  .hero-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  width: 100%;
  max-width: 1100px;
  position: relative;
  z-index: 1;
}

  /* Mesh gradient background */
 
  .hero::after {
    content: '';
    position: absolute;
    bottom: -80px; left: -60px;
    width: 400px; height: 400px;
    background: radial-gradient(ellipse, rgba(45,212,191,0.07) 0%, transparent 65%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
  }

  /* Floating decorative dots */
  .hero-dots {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
  }
  .hero-dots span {
    position: absolute;
    border-radius: 50%;
    opacity: 0.18;
  }
  .hero-dots span:nth-child(1) { width: 8px; height: 8px; background: var(--purple); top: 15%; left: 8%; animation: float1 6s ease-in-out infinite; }
  .hero-dots span:nth-child(2) { width: 5px; height: 5px; background: var(--teal); top: 35%; left: 14%; animation: float2 8s ease-in-out infinite; }
  .hero-dots span:nth-child(3) { width: 10px; height: 10px; background: var(--purple-light); top: 65%; left: 5%; animation: float1 7s ease-in-out infinite 1s; }
  .hero-dots span:nth-child(4) { width: 6px; height: 6px; background: var(--teal); top: 20%; left: 50%; animation: float2 9s ease-in-out infinite .5s; }
  @keyframes float1 { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
  @keyframes float2 { 0%,100%{ transform:translateY(0) translateX(0); } 50%{ transform:translateY(-8px) translateX(6px); } }

  .hero-left {
    flex: 1;
  
    position: relative;
    z-index: 1;
  }
  .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #9dcfff70;
    color:#ebf8ff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 22px;
    border: 1px solid #ddd6fe;
    animation: fadeSlideDown .7s ease both;
  }
  @keyframes fadeSlideDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
  .hero-badge svg { width: 14px; height: 14px; }
  .hero h1 {
    font-size: 2.9rem;
    font-weight: 900;
    line-height: 1.13;
    color: white;
    margin-bottom: 16px;
    animation: fadeSlideUp .7s ease .1s both;
  }
  @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
  .hero h1 span {
    color: #97ddfff2;
    position: relative;
  }
  .hero h1 span::after {
    content: '';
    position: absolute;
    left: 0; bottom: -2px;
    width: 100%; height: 3px;
    background:linear-gradient(90deg, #c3bdfd, #ffffff);
    border-radius: 3px;
    opacity: 0.5;
  }
  .hero p {
    font-size: 0.97rem;
    color: #dfd6fe;
    margin-bottom: 24px;
    line-height: 1.75;
    max-width: 390px;
    animation: fadeSlideUp .7s ease .2s both;
  }
  .hero-features {
    display: flex;
    gap: 20px;
    margin-bottom: 32px;
    flex-wrap: wrap;
    animation: fadeSlideUp .7s ease .3s both;
  }
  .hero-feature {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.84rem;
    font-weight: 700;
    color:white;
  }
  .hero-feature svg { width: 16px; height: 16px; color: #7fc8ff; }
  .hero-cta {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 28px;
    animation: fadeSlideUp .7s ease .4s both;
  }
  .btn-hero {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 28px;
    background: linear-gradient(45deg, var(--bright-blue), var(--light-blue));
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 18px rgb(255 255 255 / 35%);
    transition: box-shadow .2s, transform .15s;
    position: relative;
    overflow: hidden;
    
  }
  .btn-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0);
    transition: background .2s;
  }
  .btn-hero:hover { box-shadow: 0 8px 28px rgba(91,79,233,0.48); transform: translateY(-2px); }
  .btn-hero:active { transform: translateY(0); }
  .btn-hero svg { width: 18px; height: 18px; }
  
  .btn-secondary {
    /*display: inline-flex;*/
    display:none;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    background: transparent;
    color: #fffffff5;
    border: 1.5px solid #ffffff69;
    border-radius: 10px;
    font-family: 'Nunito', sans-serif;
    font-size: 0.97rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s;
  }
  .btn-secondary:hover { border-color: #7dc8ff; color: #ffffff; background: #7dc8ffb8; }
  .hero-social {
    display: flex;
    align-items: center;
    gap: 10px;
    animation: fadeSlideUp .7s ease .5s both;
  }
  .hero-avatars { display: flex; }
  .hero-avatars span {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2.5px solid #6a63ff;
    overflow: hidden;
    background: linear-gradient(135deg, #37baff, #a0cfff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    color: #fff;
    margin-left: -8px;
}
  .hero-avatars span:first-child { margin-left: 0; }
  .hero-social-text { font-size: 0.85rem; font-weight: 700; color: white; }
  .hero-social-text small { display: block; font-size: 0.78rem; font-weight: 600; color: #ffffffa8; }

  /* Hero right */
  .hero-right {
    flex: 0 0 460px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    animation: fadeSlideUp .8s ease .15s both;
    min-height: 460px;
  }

  /* ── Burbuja de fondo tipo blob morado difuso ── */
  .hero-bubble {
    position: relative;
    width: 520px;
    height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero-bubble::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 55%, #655d83 0%, #a78bfa 25%, #c7cdff 50%, rgba(129, 140, 248, 0.25) 70%, #ffffff4a 85%);
    border-radius: 58% 42% 52% 48% / 44% 56% 44% 56%;
    filter: blur(2px);
    animation: bubbleMorph 8s ease-in-out infinite;
  }
  /* segundo blob más suave para profundidad */
  .hero-bubble::after {
    content: '';
    position: absolute;
    inset: 8%;
    background: radial-gradient(ellipse at 48% 52%,
      rgba(237,233,255,0.85) 0%,
      rgba(196,181,253,0.5) 50%,
      transparent 80%
    );
    border-radius: 45% 55% 60% 40% / 55% 45% 55% 45%;
    filter: blur(8px);
    animation: bubbleMorph2 10s ease-in-out infinite 2s;
  }
  @keyframes bubbleMorph {
    0%,100% { border-radius: 58% 42% 52% 48% / 44% 56% 44% 56%; }
    33%      { border-radius: 44% 56% 60% 40% / 56% 44% 52% 48%; }
    66%      { border-radius: 52% 48% 44% 56% / 48% 52% 60% 40%; }
  }
  @keyframes bubbleMorph2 {
    0%,100% { border-radius: 45% 55% 60% 40% / 55% 45% 55% 45%; }
    50%      { border-radius: 60% 40% 45% 55% / 45% 55% 42% 58%; }
  }

  /* Área central para la imagen de Mindi */
  .mindi-slot {
    position: relative;
    z-index: 5;
   
    height: 480px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  /* placeholder hasta tener la imagen */
  .mindi-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.35;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--purple);
    letter-spacing: .08em;
    text-transform: uppercase;
    flex-direction: column;
    gap: 8px;
  }
  .mindi-placeholder svg { width: 48px; height: 48px; opacity: 0.5; }

  /* ── Iconos flotantes ── */
  .hero-icon-float {
    position: absolute;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .3s ease, box-shadow .3s ease;
    z-index: 10;
    cursor: default;
  }
  /* Iconos morados sólidos (cerebro, diploma x2) */
  .fi-solid {
    background: linear-gradient(135deg, #7B70F0 0%, #5B4FE9 100%);
    box-shadow: 0 6px 22px rgba(91,79,233,0.35);
  }
  .fi-solid svg { color: #fff; }
  /* Icono blanco con borde suave (zapatilla/carrera) */
  .fi-white {
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 18px rgba(91,79,233,0.18);
    border: 1px solid rgba(196,181,253,0.4);
  }
  .fi-white svg { color: #6054ea; }

  /* Posiciones exactas como en la referencia */
  /* Cerebro — arriba izquierda */
  .fi-1 {
    width: 58px; height: 58px;
    top: 62px; left: -10px;
    animation: floatIcon1 5.5s ease-in-out infinite;
  }
  /* Diploma — arriba derecha */
  .fi-2 {
    width: 50px; height: 50px;
    top: 38px; right: 20px;
    animation: floatIcon2 6.5s ease-in-out infinite .7s;
  }
  /* Zapatilla / carrera — centro derecha */
  .fi-3 {
    width: 46px; height: 46px;
    top: 50%; right: -8px;
    transform: translateY(-50%);
    animation: floatIcon3 7s ease-in-out infinite 1.4s;
  }
  /* Diploma — abajo izquierda */
  .fi-4 {
    width: 54px; height: 54px;
    bottom: 70px; left: -14px;
    animation: floatIcon1 6s ease-in-out infinite 2s;
  }
  .fi-1 svg, .fi-2 svg, .fi-3 svg, .fi-4 svg { width: 27px; height: 27px; }

  @keyframes floatIcon1 { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-11px); } }
  @keyframes floatIcon2 { 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-9px) rotate(6deg); } }
  @keyframes floatIcon3 {
    0%,100%{ transform:translateY(-50%); }
    50%{ transform:translateY(calc(-50% - 9px)); }
  }
  .hero-icon-float:hover { box-shadow: 0 8px 28px rgba(91,79,233,0.45) !important; transform: scale(1.13) !important; }
  .fi-3:hover { transform: translateY(-50%) scale(1.13) !important; }

  /* ── Chat card ── */
  .hero-chat-card {
    position: absolute;
    bottom: 20px;
    right: -24px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 8px 36px rgba(91,79,233,0.16), 0 2px 8px rgba(0,0,0,0.06);
    padding: 16px 18px 14px;
    width: 228px;
    z-index: 20;
    border: 1px solid rgba(196,181,253,0.35);
    animation: cardFloat 4.5s ease-in-out infinite 1.2s;
  }
  @keyframes cardFloat { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
  .chat-card-header {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 7px;
  }
  .chat-avatar {
    width: 34px; height: 34px;
    background: linear-gradient(135deg, #7B70F0, #5B4FE9);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 0.78rem; font-weight: 800;
    flex-shrink: 0;
  }
  .chat-card-header span { font-size: 0.88rem; font-weight: 800; color: var(--text-dark); }
  .chat-card-header .chat-sparkle {
    margin-left: auto;
    width: 26px; height: 26px;
    background: var(--purple-soft);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
  }
  .hero-chat-card p { font-size: 0.8rem; color: var(--text-mid); line-height: 1.55; margin-bottom: 11px; }
  .btn-chat {
    width: 100%;
    padding: 9px;
    background: linear-gradient(135deg, #7B70F0 0%, #5B4FE9 100%);
    color: #fff;
    border: none;
    border-radius: 9px;
    font-family: 'Nunito', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .2s, transform .15s;
    letter-spacing: .01em;
  }
  .btn-chat:hover { opacity: 0.9; transform: translateY(-1px); }


   @media (max-width: 1100px) {
    .tests-grid { grid-template-columns: repeat(3, 1fr); }
    .hero { padding: 56px 48px 48px; }
    .section-tests, .section-why, .stats-bar { padding-left: 48px; padding-right: 48px; }
    .stats-bar { margin: 0 48px; }
    .cta-banner { padding: 40px 48px; }
  }
  @media (max-width: 860px) {
    nav { padding: 0 24px; }
    .nav-links { display: none; }
        .hero {
        flex-direction: column;
        padding: 120px 24px 40px;
        text-align: center;
        height: auto;
    }
        .hero-chat-card {
       
        padding: 10px;
        font-size: 9px;
    }
    .hero-left { max-width: 100%; }
    .hero p {         font-size: 12px; }
    .hero-features { justify-content: center; }
    .hero-cta { justify-content: center; }
    .hero-social { justify-content: center; }
    .hero-right { flex: none; min-height: 360px; }
    .hero-bubble { width: 320px; height: 320px; }
    .mindi-slot { width: 210px; height: 260px; }
    .hero-chat-card { right: -16px; bottom: 0; width: 190px; }
    .fi-1 { width: 46px; height: 46px; top: 44px; left: -6px; }
    .fi-2 { width: 40px; height: 40px; top: 24px; right: 14px; }
    .fi-3 { width: 38px; height: 38px; right: -4px; }
    .fi-4 { width: 44px; height: 44px; bottom: 50px; left: -10px; }
    .tests-grid { grid-template-columns: repeat(2, 1fr); }
    .section-tests { padding: 48px 24px 40px; }
    .stats-bar { margin: 0 24px; grid-template-columns: repeat(2, 1fr); }
    .stat-item:nth-child(2) { border-right: none; }
    .stat-item:nth-child(3) { border-top: 1.5px solid var(--border); }
    .section-why { grid-template-columns: 1fr; padding: 48px 24px; gap: 36px; }
    .cta-banner { flex-direction: column; padding: 36px 24px; text-align: center; }
    .cta-banner-left { flex-direction: column; text-align: center; }
  }
@media (max-width: 540px) {
    .hero h1 {
        font-size: 2.1rem;
    }
}
.section-spacer { height: 64px; }
  .section-why {
    padding: 72px 72px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 68px;
    align-items: center;
    background: #fff;
  }
  .why-image-wrap {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
  }
    .why-image {
    width: 100%;
    aspect-ratio: 5 / 4.5;
    background:linear-gradient(135deg, #ffffff 0%, #ffffff 60%, #a5b4fc00 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
    #vido{
        width: 100%;
        height: 80%;
    }
    .why-image-person {
    width: 100%;
    height: 100%;
    background: url('https://img.youtube.com/vi/106AMFtyHyw/maxresdefault.jpg') center/cover no-repeat;
    border-radius: 12px;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    background-position: center;
    background-size: contain;

    /* 🔥 FIX */
    pointer-events: none;
}
  .why-play-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 56px; height: 56px;
    background: rgba(255,255,255,0.92);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 18px rgba(0,0,0,0.15);
    cursor: pointer;
    z-index: 3;
    transition: transform .25s, box-shadow .25s;
  }
  #videoContainer iframe{
    width:100%;
    height:100%;
    border:none;
    border-radius:12px;
}
  .why-play-btn:hover { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 6px 24px rgba(0,0,0,0.2); }
  .why-play-btn svg { width: 20px; height: 20px; color: var(--purple); margin-left: 3px; }
  .why-label {
    position: absolute;
    bottom: 20px; left: 20px; right: 20px;
    background: rgba(255,255,255,0.96);
    border-radius: 12px;
    padding: 12px 15px;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 3;
  }
  .why-label-icon {
    width: 38px; height: 38px;
    background: #ccd7fe;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .why-label-icon svg { width: 20px; height: 20px; color: #5e52ea; }
  .why-label-text strong { font-size: 0.9rem; font-weight: 800; display: block; color: var(--text-dark); }
  .why-label-text span { font-size: 0.78rem; color: var(--text-light); }
  .why-label-emoji { margin-left: auto; font-size: 1.1rem; }

  .why-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #ede9ff;
    color: #5b4fe9;
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 5px 13px;
    border-radius: 20px;
    margin-bottom: 18px;
    border: 1px solid #ddd6fe;
  }
  .why-right h2 {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 14px;
    color: #8262e5;
  }
  .why-right h2 span { color: var(--purple); }
  .why-right > p {
    font-size: 0.93rem;
    color: var(--text-mid);
    margin-bottom: 24px;
    line-height: 1.75;
  }
  .why-features { list-style: none; margin-bottom: 30px; display: flex; flex-direction: column; gap: 12px; }
  .why-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-dark);
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: background .2s, border-color .2s;
  }
  .why-features li:hover { background: #ddd6fe6b; border-color: #ddd6fe; }
  .why-check {
    width: 24px; height: 24px;
    background: #ede9ff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background .2s, transform .2s;
  }
  .why-features li:hover .why-check { background: #5b4fe9; transform: scale(1.1); }
  .why-features li:hover .why-check svg { color: #fff; }
  .why-check svg { width: 13px; height: 13px;    color: #5b4fe9; transition: color .2s; }
  .btn-about {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    background: linear-gradient(135deg, #7B70F0 0%, #5B4FE9 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 3px 14px rgba(91,79,233,0.28);
    transition: box-shadow .2s, transform .15s;
  }
  .btn-about:hover { box-shadow: 0 6px 22px rgba(91,79,233,0.42); transform: translateY(-2px); }

.recursos-modal {
    display: none;
}

.recursos-modal.show {
    display: flex;
}
@media (max-width: 860px) {
    .section-why {
        grid-template-columns: 1fr;
        padding: 48px 24px;
        gap: 36px;
    }
}

/* ── Reset local ── */
.eb-sec *, .eb-sec *::before, .eb-sec *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.eb-sec {
  font-family: 'Outfit', 'Arial', sans-serif;
  color: #1a0a40;
}
 
/* ── Variables locales ── */
.eb-sec {
  --ebp:   #7c3aed;
  --ebb:   #18B3FF;
  --ebbg:  #f5f4fb;
  --ebbg2: #ffffff;
  --ebmu:  #7060a0;
  --ebbd:  rgba(124,58,237,.13);
  --ebsh:  0 8px 28px rgba(124,58,237,.13);
  --ebsh2: 0 18px 52px rgba(124,58,237,.2);
  --ebr:   16px;
}
 
/* ══════════════════════════════
   SECCIÓN 1 — HISTORIAS
══════════════════════════════ */
.eb-sec.eb-historias {
  background: #ffffff;
  padding: 5rem 4rem;
  position: relative;
  overflow: hidden;
}
.eb-sec.eb-historias::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,.06) 0%, transparent 70%);
  pointer-events: none;
}
 
/* ── header ── */
.eb-sec-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: .5rem;
}
.eb-sec-header h2 {
  font-size: 1.65rem;
  font-weight: 800;
  color: #8262e5;
  line-height: 1.15;
}
.eb-see-all {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--ebp);
  font-size: .83rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: gap .2s;
}
.eb-see-all:hover { gap: 9px; }
.eb-sec-sub {
  color: var(--ebmu);
  font-size: .9rem;
  margin-bottom: 2.2rem;
  max-width: 480px;
}
 
/* ── slider wrapper ── */
.eb-slider-wrap {
  position: relative;
}
.eb-slider-track {
  display: flex;
  gap: 18px;
  overflow: hidden;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
}
 
/* ── historia card ── */
.eb-hcard {
  flex-shrink: 0;
  width: calc(25% - 14px);
  background: var(--ebbg2);
  border-radius: var(--ebr);
  border: 1px solid var(--ebbd);
  overflow: hidden;
  transition: transform .3s, box-shadow .3s;
  cursor: pointer;
  opacity: 0;
  transform: translateY(28px);
  animation: ebFadeUp .55s ease forwards;
}
.eb-hcard:hover {
  transform: translateY(-6px);
  box-shadow: var(--ebsh2);
}
.eb-hcard:nth-child(1){ animation-delay:.05s }
.eb-hcard:nth-child(2){ animation-delay:.12s }
.eb-hcard:nth-child(3){ animation-delay:.19s }
.eb-hcard:nth-child(4){ animation-delay:.26s }
 
@keyframes ebFadeUp {
  to { opacity:1; transform:translateY(0) }
}
 
.eb-hcard-top {
  padding: 18px 18px 0;
  min-height: 168px;
  position: relative;
  overflow: hidden;
}
.eb-hcat {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}
.eb-cat-soft  { background:#DBEAFE; color:#2563EB }
.eb-cat-psico { background:#FCE7F3; color:#DB2777 }
.eb-cat-dis   { background:#D1FAE5; color:#059669 }
.eb-cat-mkt   { background:#FEF3C7; color:#D97706 }
 
.eb-hcard-name   { font-size: .95rem; font-weight: 800; margin-bottom: 3px; color:#1a0a40 }
.eb-hcard-rol    { font-size: .78rem; color: var(--ebmu); margin-bottom: 8px }
.eb-hcard-inicio { font-size: .73rem; color: var(--ebmu) }
.eb-hcard-sal    { font-size: .8rem; color: var(--ebp); font-weight: 700; margin-top: 4px }
 
.eb-hcard-emoji {
  position: absolute;
  bottom: 0; right: 14px;
  font-size: 3.4rem;
  line-height: 1;
}
.eb-quote {
  position: absolute;
  top: 10px; right: 70px;
  font-size: 44px;
  color: rgba(124,58,237,.09);
  font-family: Georgia, serif;
  line-height: 1;
}
 
.eb-hcard-bottom {
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(124,58,237,.07);
}
.eb-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  color: var(--ebmu);
}
.eb-progress-bar {
  flex: 1;
  height: 4px;
  background: rgba(124,58,237,.1);
  border-radius: 99px;
  overflow: hidden;
}
.eb-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ebp), var(--ebb));
  border-radius: 99px;
  transition: width 1.2s ease .4s;
}
 
/* ── arrows ── */
.eb-arrows {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  justify-content: flex-end;
}
.eb-arrow-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--ebbd);
  background: var(--ebbg2);
  cursor: pointer;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
  color: #1a0a40;
}
.eb-arrow-btn:hover {
  background: var(--ebp);
  color: #fff;
  border-color: var(--ebp);
  transform: scale(1.08);
}
 
/* ══════════════════════════════
   SECCIÓN 2 — GUÍAS
══════════════════════════════ */
.eb-sec.eb-guias {
  background: #f5f4fb;
  padding: 3.5rem 4rem;
  display:none;
}
.eb-guias-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-top: 2rem;
}
.eb-gcard {
  background: var(--ebbg2);
  border: 1px solid var(--ebbd);
  border-radius: var(--ebr);
  padding: 22px 18px;
  transition: all .3s;
  cursor: pointer;
  opacity: 0;
  transform: translateY(22px);
  animation: ebFadeUp .55s ease forwards;
  position: relative;
  overflow: hidden;
}
.eb-gcard::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ebp), var(--ebb));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s;
}
.eb-gcard:hover::after { transform: scaleX(1) }
.eb-gcard:hover {
  transform: translateY(-5px);
  box-shadow: var(--ebsh2);
  border-color: rgba(124,58,237,.25);
}
.eb-gcard:nth-child(1){ animation-delay:.06s }
.eb-gcard:nth-child(2){ animation-delay:.13s }
.eb-gcard:nth-child(3){ animation-delay:.20s }
.eb-gcard:nth-child(4){ animation-delay:.27s }
.eb-gcard:nth-child(5){ animation-delay:.34s }
 
.eb-gcard-icon {
  width: 46px; height: 46px;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 15px;
}
.eb-gcard-title {
  font-size: .9rem;
  font-weight: 800;
  color: #1a0a40;
  line-height: 1.3;
  margin-bottom: 9px;
}
.eb-gcard-desc {
  font-size: .77rem;
  color: var(--ebmu);
  line-height: 1.6;
  margin-bottom: 16px;
}
.eb-gcard-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ebp);
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  transition: gap .2s;
}
.eb-gcard-link:hover { gap: 8px }
 
/* ══════════════════════════════
   SECCIÓN 3 — SALARIOS + FAQ
══════════════════════════════ */
.eb-sec.eb-bottom {
  background: var(--ebbg);
  padding: 5rem 4rem;
  display:none;
}
.eb-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 68px;
  align-items: start;
}
 
/* ── salarios ── */
.eb-sal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}
.eb-sal-header h2 {
  font-size: 1.3rem;
  font-weight: 800;
  color: #8262e5;
  margin-bottom: 4px;
}
.eb-sal-header p {
  font-size: .8rem;
  color: var(--ebmu);
}
.eb-sal-icon {
  width: 46px; height: 46px;
  background: linear-gradient(135deg, var(--ebp),#d0b4ff);.eb-faq-q
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  animation: ebBounce 3s ease-in-out infinite;
  border-radius: 25px;
}
@keyframes ebBounce {
  0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)}
}
.bx {
    color: #ffffff;
    font-size: 35px;

}
 
.eb-sal-row {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
  opacity: 0;
  transform: translateX(-18px);
  animation: ebSlideR .5s ease forwards;
}
.eb-sal-row:nth-child(1){ animation-delay:.1s }
.eb-sal-row:nth-child(2){ animation-delay:.18s }
.eb-sal-row:nth-child(3){ animation-delay:.26s }
.eb-sal-row:nth-child(4){ animation-delay:.34s }
.eb-sal-row:nth-child(5){ animation-delay:.42s }
 
@keyframes ebSlideR {
  to { opacity:1; transform:translateX(0) }
}
 
.eb-sal-label {
  font-size: .82rem;
  font-weight: 700;
  color: #1a0a40;
  white-space: nowrap;
}
.eb-bar-track {
  background: rgba(124,58,237,.1);
  border-radius: 99px;
  height: 8px;
  overflow: hidden;
}
.eb-bar-fill {
  height: 100%;
  border-radius: 99px;
  width: 0;
  transition: width 1.1s cubic-bezier(.4,0,.2,1) .5s;
}
.eb-sal-range {
  font-size: .74rem;
  color: var(--ebmu);
  white-space: nowrap;
}
.eb-see-more-sal {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ebp);
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  margin-top: 6px;
  transition: gap .2s;
}
.eb-see-more-sal:hover { gap: 8px }
 
/* ── faq ── */
.eb-faq-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.2rem;
}
.eb-faq-header h2 {
  font-size: 1.3rem;
  font-weight: 800;
  color: #8262e5;
}
.eb-faq-icon {
  width: 46px; height: 46px;
  background: linear-gradient(135deg, var(--ebp),#d0b4ff);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.eb-faq-item {
  border: 1px solid rgb(178 149 255);
  border-radius: 12px;
  margin-bottom: 9px;
  overflow: hidden;
  background: #8262e5;
  transition: box-shadow .2s;
}
.eb-faq-item:hover {
  box-shadow: 0 4px 18px rgba(124,58,237,.1);
}
.eb-faq-q {
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: .84rem;
  font-weight: 700;
  color: #ffffff;
  user-select: none;
  gap: 10px;
}
.eb-faq-chevron {
  font-size: 17px;
  transition: transform .3s;
  color: var(--ebmu);
  flex-shrink: 0;
  display: block;
}
.eb-faq-item.eb-open .eb-faq-chevron {
  transform: rotate(180deg);
  color: var(--ebp);
}
.eb-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .25s;
  font-size: .81rem;
  color: #000000;
  line-height: 1.65;
  padding: 0 18px;
  background: #ffffffde;
}
.eb-faq-a.eb-open {
  max-height: 180px;
  padding: 0 18px 15px;
}
/* ══════════════════════════════
   CONTENEDOR GENERAL
══════════════════════════════ */
.conten {
  padding: 20px;
  background: #f5f4fb;
}
.eb-faq-icon img {
  width: 28px;
  height: 28px;
  filter: brightness(0) invert(1); /* blanco */
  opacity: 0.9;
}
/* ══════════════════════════════
   MINDI CTA
══════════════════════════════ */
.eb-sec.eb-mindi-cta {
  background: linear-gradient(135deg, #5B47E0 0%, #7C3AED 100%);
  padding: 3rem 3.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: relative;
  overflow: visible;
  border-radius: 16px;
}

/* BURBUJA DECORATIVA */
.eb-sec.eb-mindi-cta::before {
  content: '';
  position: absolute;
  top: -80px;
  right: 180px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  pointer-events: none;
}

/* ══════════════════════════════
   PERSONAJE (MINDIA)
══════════════════════════════ */
.eb-mindi-char {
  position: absolute;
  bottom: 0;              /* 👈 clave */
  left: 30px;
  z-index: 5;
  bottom: 60px;
}

/* ICONO CHAT */
.eb-mindi-chat-badge {
  position: absolute;
  top: 10px;
  left: -10px;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  backdrop-filter: blur(4px);
  filter: unset;
 animation: floatMindi 4s ease-in-out infinite;
}

/* IMAGEN */
.IA {
  width: 180px; /* 👈 tamaño tipo referencia */
  display: block;
  transform: translateY(25px); /* 👈 “apoya” abajo */
  filter: drop-shadow(0 10px 25px rgba(0,0,0,0.25));
  animation: floatMindi 4s ease-in-out infinite;
}

/* ANIMACIÓN SUAVE */
@keyframes floatMindi {
  0%,100% { transform: translateY(25px); }
  50% { transform: translateY(15px); }
}

/* ══════════════════════════════
   TEXTO
══════════════════════════════ */
.eb-mindi-text {
  flex: 1;
  margin-left: 160px; /* 👈 espacio para la imagen */
  z-index: 2;
}

.eb-mindi-text h2 {
  color: #fff;
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 6px;
  line-height: 1.2;
}

.eb-mindi-text h2 em {
  font-style: italic;
  font-weight: 600;
}

.eb-mindi-text p {
  color: rgba(255,255,255,.8);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ══════════════════════════════
   BOTÓN
══════════════════════════════ */
.eb-mindi-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: #5B47E0;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 800;
  padding: 12px 22px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  z-index: 2;
  transition: all .25s ease;
}

/* HOVER PRO */
.eb-mindi-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(0,0,0,.25);
}

/* ESTRELLA */
.eb-mindi-btn-star {
  font-size: 16px;
  animation: spinStar 4s linear infinite;
}

@keyframes spinStar {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.eb-faq-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
}

.eb-faq-chevron .icon {
  width: 22px;
  height: 22px;
  stroke: #ffffff;
  stroke-width: 2.5;
  fill: none;
  transition: all .3s ease;
  opacity: 0.8;
}

/* HOVER */
.eb-faq-header:hover .icon {
  opacity: 1;
  transform: translateY(2px);
}
 
/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media(max-width:1100px) {
  .eb-guias-grid { grid-template-columns: repeat(3,1fr) }
  .eb-hcard { width: calc(33.33% - 12px) }
}
@media(max-width:860px) {
  .eb-sec.eb-historias,
  .eb-sec.eb-guias,
  .eb-sec.eb-bottom { padding: 3.5rem 1.4rem }
  .eb-sec.eb-mindi-cta { padding: 2.8rem 1.4rem; flex-direction:column; text-align:center; border-radius:12px;}
  .eb-bottom-grid { grid-template-columns:1fr; gap:40px }
  .eb-guias-grid { grid-template-columns: repeat(2,1fr) }
  .eb-hcard { width: 82vw }
  .eb-sec-header { flex-direction:column; gap:6px; align-items:flex-start }
  .eb-mindi-text h2 { font-size:1.25rem }
}
@media(max-width:540px) {
  .eb-guias-grid { grid-template-columns: 1fr }
}
 @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap');

  /* ── ENTORNO ── */
  .eb-modern-sec {
    font-family: 'Outfit', sans-serif;
    position: relative;
    background-color: #ffffff; /* Fondo lavanda muy suave */
    padding: 6rem 0;
    overflow: hidden;
    
    display:none;/*******************************************************/
  }

  /* Malla de gradientes de fondo (Mesh Gradient Effect) */
  .eb-modern-sec::before, .eb-modern-sec::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 0;
    opacity: 0.6;
    animation: floatBg 20s infinite alternate;
  }
  .eb-modern-sec::before {
    width: 600px; height: 600px;
    background: #e0d1ff82; top: -200px; left: -100px;
  }
  .eb-modern-sec::after {
    width: 500px; height: 500px;
    background: #c4f0ff78; bottom: -150px; right: -100px;
    animation-delay: -10s;
  }

  @keyframes floatBg {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(50px, 50px) scale(1.1); }
  }

  /* Contenido */
  .eb-modern-container {
    position: relative;
    z-index: 2;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 2rem;
  }

  /* ── HEADER ── */
  .eb-modern-header {
    text-align: center;
    margin-bottom: 4rem;
  }
  .eb-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.1);
    padding: 8px 16px;
    border-radius: 50px;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(124, 58, 237, 0.15);
  }
  .eb-title-mod {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    color: #11052c;
    line-height: 1.1;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
  }
  .eb-title-mod span {
    background: linear-gradient(135deg, #7c3aed, #18B3FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .eb-subtitle-mod {
    font-size: 1.1rem;
    color: #64748b;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
  }

  /* ── SLIDER ── */
  .eb-slider-area {
    position: relative;
    padding: 10px 0;
  }
  .eb-slider-track-mod {
    display: flex;
    gap: 28px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 30px 5px; /* Espacio para resplandor */
  }
  .eb-slider-track-mod::-webkit-scrollbar { display: none; }

  /* ═══════════ TARJETA MODERNA (GLASS) ═══════════ */
  .eb-card-mod {
    flex-shrink: 0;
    width: 320px;
    scroll-snap-align: start;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 28px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 
      0 4px 6px -1px rgba(0,0,0,0.02),
      0 20px 50px -12px rgba(124, 58, 237, 0.15);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
  }
  
  /* Efecto "Glow" al pasar el mouse */
  .eb-card-mod::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 30px;
    padding: 2px;
    background: linear-gradient(135deg, rgba(255,255,255,0), rgba(255,255,255,0));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    transition: background 0.4s;
    pointer-events: none;
  }
  .eb-card-mod:hover::before {
    background: linear-gradient(135deg, #7c3aed, #18B3FF);
  }
  .eb-card-mod:hover {
    transform: translateY(-10px);
    box-shadow: 
      0 20px 25px -5px rgba(0, 0, 0, 0.05),
      0 30px 60px -15px rgba(124, 58, 237, 0.2);
  }

  /* 1. Header Interno */
  .eb-card-hd {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 1.5rem;
  }
  .eb-avatar-mod {
    width: 72px;
    height: 72px;
    border-radius: 20px; /* Cuadrado redondeado = más moderno */
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 8px 16px rgba(0,0,0,0.05);
    color: #1a0a40;
    position: relative;
    z-index: 1;
    overflow: hidden;
  }
  .eb-avatar-mod img {
    width: 100%; height: 100%; object-fit: cover;
  }
  
  .eb-info-mod h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: #11052c;
    margin-bottom: 4px;
  }
  .eb-info-mod p {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
  }

  /* 2. Stats Flotantes */
  .eb-stats-wrap {
    display: flex;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    padding: 12px;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255,255,255,0.6);
  }
  .eb-stat-block {
    text-align: center;
    flex: 1;
    border-right: 1px solid rgba(0,0,0,0.05);
  }
  .eb-stat-block:last-child { border: none; }
  
  .eb-s-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #94a3b8;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
  }
  .eb-s-val {
    font-size: 1rem;
    font-weight: 800;
    color: #1e293b;
  }
  .eb-val-money {
    color: #10b981;
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
  }

  /* 3. Consejo (Quote) */
  .eb-quote-box {
    margin-top: auto;
    position: relative;
    padding-left: 14px;
    border-left: 3px solid rgba(124, 58, 237, 0.3);
  }
  .eb-quote-txt {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.6;
    font-weight: 400;
    font-style: italic;
  }
  .eb-quote-icon {
    position: absolute;
    top: -10px; right: 0;
    font-size: 2.5rem;
    color: rgba(124, 58, 237, 0.1);
    font-family: serif;
    line-height: 1;
  }

  /* ── NAVEGACIÓN ── */
  .eb-nav-modern {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 3rem;
  }
  .eb-btn-nav {
    width: 50px; height: 50px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: #7c3aed;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
  }
  .eb-btn-nav:hover {
    background: #7c3aed;
    color: #fff;
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 10px 30px rgba(124, 58, 237, 0.25);
  }

  /* Responsive */
  @media (max-width: 768px) {
    .eb-card-mod { width: 290px; padding: 1.5rem; }
    .eb-modern-sec { padding: 4rem 0; }
  }
  @media (max-width: 860px) {
    .IA {
        width: 170px;
    }
    .eb-mindi-char {
        left: 12px;
        top: 12px;
    }
}