@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700;800;900&display=swap');

/* =========================================
   CONFIGURACIÓN GLOBAL DE TIPOGRAFÍA
   ========================================= */
html, body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale;
    color: #1e293b; 
    line-height: 1.6; /* 🚨 NUEVO: Le da aire a todos los párrafos de la web */
    margin: 0; /* Asegura que no queden bordes blancos en la página */
    background-color: #f8fafc; /* Un fondo gris súper clarito para que las tarjetas blancas resalten */
}

html { scroll-behavior: smooth; }

h1, h2, h3, h4, h5, h6 { font-family: inherit; font-weight: 700; line-height: 1.3; }
button, input, textarea, a { font-family: inherit; }

/* =========================================
   DISEÑO DEL FOOTER (PIE DE PÁGINA) - SIEMPRE CENTRADO
   ========================================= */
.footer-corporativo {
    background-color: #f8fafc;
    border-top: 1px solid #e2e8f0;
    padding: 30px 5%;
    margin-top: 60px;
}

.footer-contenido {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column; /* Apila el logo arriba y el texto abajo */
    align-items: center;    /* Centra todo horizontalmente */
    justify-content: center;
    gap: 10px; /* Un poco de separación entre el logo y el texto */
}

.footer-logo {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -1px;
    flex-wrap: wrap;
    width: fit-content;
}

/* Colores del logo en el footer */
.footer-logo .txt-oscuro { color: #1e293b; }
.footer-logo .txt-verde { color: var(--verde-primario, #00CB75); }
.footer-logo .txt-purpura { color: #7C3AED; }

.footer-corporativo p {
    color: #64748b; 
    font-size: 0.95rem;
    font-weight: 500;
    margin: 0;
    text-align: center;
}



/* =========================================
   PANTALLA DE LOGIN FULLSCREEN (PREMIUM)
   ========================================= */

#pantalla-login {
    /* Cubre toda la pantalla y se queda fijo sobre cualquier cosa */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 999999;

    /* Fondo claro premium usando la paleta KUBI */
    background: linear-gradient(145deg, #ffffff 0%, var(--kubi-25) 60%, var(--kubi-50) 100%);
    
    /* Flexbox para centrar todo perfectamente en medio de la pantalla */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

/* --- LOGO Y MARCA --- */
#pantalla-login .logo-portal {
    display: flex;
    align-items: center;
    gap: 15px; /* Separación entre KUBI y Grupo Prestamype */
    text-decoration: none;
    margin-bottom: 15px;
    animation: aparecerArriba 0.6s ease-out forwards;
}

#pantalla-login .logo-marca {
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    font-size: 3.5rem;
    font-weight: 900;
    letter-spacing: -2px;
    line-height: 1.1;
    width: fit-content;
}

/* Colores específicos del Login (fondo claro) */
#pantalla-login .txt-oscuro {
    color: var(--texto-oscuro);
}

#pantalla-login .txt-verde {
    color: var(--verde-primario, #00CB75);
}

/* La estrella del logo en login */
#pantalla-login .icono-destello {
    width: 32px !important;
    height: 32px !important;
    color: var(--verde-primario, #00CB75);
    margin-left: 4px;
    transform: translateY(-6px);
    filter: drop-shadow(0 0 10px rgba(0, 203, 117, 0.4));
}

/* Texto ACADEMY en el logo del login */
#pantalla-login .logo-academy {
    grid-column: 1 / -1;
    min-width: 0;
    font-size: 0.38em;
    letter-spacing: 0.15em;
    text-align-last: justify;
    text-justify: inter-character;
    color: #00CB75;
    margin-left: 0;
    margin-right: 0;
    padding-bottom: 0;
}

/* La línea divisoria entre KUBI y la empresa */
#pantalla-login .logo-separador {
    width: 2px;
    height: 45px;
    background-color: rgba(30, 41, 59, 0.15);
    border-radius: 2px;
}

#pantalla-login .logo-grupo {
    color: var(--texto-oscuro);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.5px;
}

/* --- TEXTO DE INSTRUCCIÓN --- */
#pantalla-login p {
    color: var(--texto-suave);
    font-size: 1.15rem;
    margin: 0 0 40px 0;
    text-align: center;
    animation: aparecerArriba 0.8s ease-out forwards;
}

/* --- BOTÓN DE GOOGLE --- */
#pantalla-login .g_id_signin {
    animation: aparecerArriba 1s ease-out forwards;
    /* Le ponemos una sombra sutil al botón de Google para que flote sobre el fondo oscuro */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

/* --- ANIMACIONES --- */
@keyframes aparecerArriba {
    from { 
        opacity: 0; 
        transform: translateY(20px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* --- RESPONSIVIDAD PARA CELULARES --- */
@media (max-width: 600px) {
    #pantalla-login .logo-portal {
        flex-direction: column; /* Apila el KUBI y el nombre de la empresa */
        gap: 5px;
        margin-bottom: 25px;
    }
    
    #pantalla-login .logo-separador {
        display: none; /* Ocultamos la rayita en celular porque están apilados */
    }
    
    #pantalla-login .logo-marca {
        font-size: 3rem;
    }
    
    #pantalla-login .icono-destello {
        width: 32px !important;
        height: 32px !important;
    }
    
    #pantalla-login .logo-grupo {
        font-size: 1.2rem;
        color: #cbd5e1;
    }
}

/* =========================================
   VARIABLES DE COLOR (Paleta KUBI)
   ========================================= */
:root {
    --kubi-25:  #E6FFF4;
    --kubi-50:  #CCFFE9;
    --kubi-100: #B3FFDF;
    --kubi-200: #80F0C5;
    --kubi-300: #4DDFAB;
    --kubi-400: #26D092;
    --kubi-500: #00CB75; /* Principal */
    --kubi-600: #00B369;
    --kubi-700: #00975B;
    --kubi-800: #007B4B;
    --kubi-900: #005C39;
    --kubi-950: #003F27;
    
    --texto-oscuro: #1e293b;
    --texto-suave: #475569;
    --borde-suave: #e2e8f0;
}


/* ==========================================
   SISTEMA GLOBAL DE BARRAS DE PROGRESO
   ========================================== */

/* 1. Barra Flotante Superior (Dentro del Curso) */
.barra-progreso-contenedor {
    position: sticky;
    top: 0; 
    left: 0;
    width: 100%;
    height: 6px; /* 👇 Volvemos a hacerla finita y elegante */
    background-color: var(--borde-suave);
    z-index: 1000; 
}

.barra-progreso-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--kubi-400) 0%, var(--kubi-500) 100%);
    z-index: 1;
    transition: width 0.2s ease-out; 
}


/* 2. Mini-Barra (Para tarjetas en index.html o cursos.html) */
.mini-barra-curso-bg {
    width: 100%;
    height: 8px;
    background-color: var(--kubi-50);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 10px;
}

.mini-barra-curso-fill {
    height: 100%;
    width: 0%;
    background-color: var(--kubi-500);
    border-radius: 10px;
    transition: width 0.5s ease-out;
}

.mini-barra-texto {
    font-size: 0.8rem;
    color: var(--texto-suave);
    font-weight: bold;
    margin-top: 5px;
    display: inline-block;
}


/* =========================================
   BARRA DE NAVEGACIÓN (NAVBAR) - DISEÑO AMIGABLE
   ========================================= */
.navbar-comercial {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 4%; 
    background-color: #ffffff;
    position: relative;
    top: 0;
    z-index: 1000;
}

/* Lado Izquierdo (Logo y Enlaces) */
.nav-izq {
    display: flex;
    align-items: center;
    gap: 40px;
}

/* =========================================
   1. LOGO KUBI ACADEMY
   ========================================= */
.logo-portal {
    text-decoration: none;
    display: flex;
    align-items: center;
}

.logo-marca {
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 3px;
    line-height: 1.1;
    width: fit-content;
}

.txt-oscuro { color: var(--texto-oscuro); }
.txt-verde { color: var(--kubi-500); }

.icono-destello {
    width: 14px !important;
    height: 14px !important;
    margin-left: 3px;
    flex-shrink: 0;
    transform: translateY(-8px);
    color: var(--kubi-500);
}

/* Texto "ACADEMY" junto al logo en el nav */
.logo-academy {
    grid-column: 1 / -1;
    min-width: 0;
    font-size: 0.46em;
    font-weight: 800;
    letter-spacing: 0;
    text-align-last: justify;
    text-justify: inter-character;
    text-transform: uppercase;
    color: var(--kubi-500, #00CB75);
    margin-left: 0;
    margin-right: 0;
    padding-bottom: 0;
    white-space: nowrap;
    line-height: 1.2;
}

/* Texto "ACADEMY" en el footer */
.logo-academy-footer {
    grid-column: 1 / -1;
    min-width: 0;
    font-size: 0.46em;
    font-weight: 800;
    letter-spacing: 0;
    text-align-last: justify;
    text-justify: inter-character;
    text-transform: uppercase;
    color: var(--verde-primario, #00CB75);
    margin-left: 0;
    margin-right: 0;
    padding-bottom: 0;
    white-space: nowrap;
    line-height: 1.2;
}

/* Footer-logo como grid para alinear correctamente */
.footer-logo {
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    width: fit-content;
}

/* Estrella SVG exclusiva del footer — misma forma que el navbar pero proporcional a 1.5rem */
.icono-destello-footer {
    width: 11px !important;
    height: 11px !important;
    margin-left: 2px;
    flex-shrink: 0;
    transform: translateY(-6px);
    color: var(--kubi-500);
}

/* ::after ya no necesario — ahora se usa el SVG directo en el HTML del footer */
/* .footer-logo .txt-verde::after { content: '✦'; ... } */

/* =========================================
   2. ENLACES AMIGABLES
   ========================================= */
.nav-enlaces {
    display: flex;
    gap: 15px;
}

.nav-enlaces a {
    text-decoration: none;
    color: var(--texto-suave);
    font-weight: 600;
    font-size: 1.05rem;
    padding: 8px 16px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

/* Efecto hover suave usando los tonos más claros de la paleta */
.nav-enlaces a:hover, .nav-enlaces a.activo {
    color: var(--kubi-700);
    background: var(--kubi-25);
}

/* =========================================
   3. BUSCADOR KUBI (Centro)
   ========================================= */
.nav-centro {
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

.buscador-ia {
    display: flex;
    align-items: center;
    background: white; /* Fondo verde super suave */
    border: 2px solid var(--kubi-100); /* Borde verde claro */
    border-radius: 30px; 
    padding: 6px 20px 6px 6px;
    width: 100%;
    max-width: 370px;
    transition: all 0.3s ease;
    cursor: pointer;
    gap: 8px;
}

/* COMENTADO — efecto hover expansión desactivado
.buscador-ia:hover {
    background: #ffffff;
    border-color: var(--kubi-300);
    box-shadow: 0 4px 15px rgba(0, 203, 117, 0.15);
}
*/

.buscador-ia input {
    border: none;
    background: transparent;
    width: 100%;
    min-width: 200px;
    outline: none;
    font-size: 1rem;
    color: var(--texto-oscuro);
    cursor: pointer;
}

.buscador-ia input::placeholder {
    color: var(--kubi-700);
    opacity: 0.7;
}

.btn-buscar-ia {
    background-color: #ffffff; 
    border: 2px solid var(--kubi-400); 
    border-radius: 50%; 
    min-width: 40px; 
    height: 40px;
    padding: 0; 
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* COMENTADO — efecto hover botón KUBI desactivado
.buscador-ia:hover .btn-buscar-ia {
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(0, 203, 117, 0.3);
    border-color: var(--kubi-500);
}
*/

/* TEMPORAL — chat KUBI desactivado. Para reactivar: eliminar este bloque */
.buscador-ia[data-chat-disabled] { cursor: default; }
.buscador-ia[data-chat-disabled] input { cursor: default; pointer-events: none; }
.buscador-ia[data-chat-disabled] .btn-buscar-ia { pointer-events: none; cursor: default; }
/* FIN TEMPORAL */

.nav-avatar-ia {
    width: 100%;
    height: 100%;
    object-fit: cover; 
}

/* =========================================
   4. USUARIO Y BOTÓN DE CIERRE (Derecha)
   ========================================= */
.nav-der {
    display: flex;
    align-items: center;
    gap: 20px;
}

.nav-saludo {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--kubi-600);
}

.btn-logout-comercial {
    background: #ffffff;
    border: 2px solid var(--kubi-200);
    padding: 10px 24px;
    border-radius: 30px;
    font-weight: bold;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--kubi-600);
}

.btn-logout-comercial:hover {
    color: #ffffff;
    background: var(--kubi-500);
    border-color: var(--kubi-500);
    box-shadow: 0 4px 10px rgba(0, 203, 117, 0.2);
}

/* =========================================
   HAMBURGER MENU MOBILE
   ========================================= */

.btn-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: 2px solid var(--kubi-100);
    border-radius: 10px;
    cursor: pointer;
    padding: 8px;
    transition: border-color 0.2s;
    flex-shrink: 0;
}
.btn-hamburger span {
    display: block;
    width: 18px;
    height: 3px;
    background: var(--kubi-800);
    border-radius: 2px;
    transition: all 0.25s ease;
}
.btn-hamburger.activo span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.btn-hamburger.activo span:nth-child(2) { opacity: 0; }
.btn-hamburger.activo span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.nav-mobile {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border-top: 1px solid var(--kubi-100);
    box-shadow: 0 8px 24px rgba(0, 92, 57, 0.1);
    padding: 20px 5%;
    flex-direction: column;
    gap: 20px;
    z-index: 999;
}
.nav-mobile.abierto { display: flex; }
.nav-mobile-enlaces {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.nav-mobile-enlaces a {
    font-weight: 600;
    color: var(--texto-oscuro);
    padding: 12px 16px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 1rem;
    transition: background 0.2s, color 0.2s;
}
.nav-mobile-enlaces a:hover { background: var(--kubi-25); color: var(--kubi-700); }
.nav-mobile-usuario {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid var(--kubi-50);
    gap: 12px;
}

@media (max-width: 768px) {
    .navbar-comercial { position: relative; }
    .nav-enlaces { display: none; }
    .nav-centro { display: none; }
    .nav-der { display: none; }
    .btn-hamburger { display: flex; }
}

/* =========================================
   5. VENTANA DE CHAT DESPLEGABLE
   ========================================= */
#chatbot-flotante.chat-desplegable {
    position: absolute;
    top: 65px;
    left: 0;
    width: 100%;
    min-width: 400px;
    height: 500px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 92, 57, 0.12); /* Sombra elegante basada en tu verde 900 */
    border: 1px solid var(--kubi-100);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 9999;
}

@media (max-width: 600px) {
    #chatbot-flotante.chat-desplegable { min-width: 0; width: calc(100vw - 8%); left: 0; }
}

/* Cabecera del chat */
#chat-header {
    background: var(--kubi-25);
    border-bottom: 1px solid var(--kubi-100);
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-chat-info {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--texto-oscuro);
    font-weight: 800;
    font-size: 1.1rem;
}

.header-chat-info small {
    display: block;
    font-size: 0.75rem;
    color: var(--kubi-700);
    font-weight: 500;
}

.chat-mini-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid var(--kubi-400);
    background: #ffffff;
}

#btn-cerrar-chat {
    background: #ffffff;
    border: 1px solid var(--borde-suave);
    color: var(--texto-suave);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s;
}

#btn-cerrar-chat:hover {
    background: #fee2e2;
    color: #ef4444; 
    border-color: #fca5a5;
}

/* Área de conversación */
#caja-mensajes {
    flex-grow: 1; 
    overflow-y: auto; 
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background-color: #fdfdfd;
}

/* Burbujas de chat amigables */
.mensaje {
    display: block !important; 
    width: fit-content; 
    word-wrap: break-word; 
    max-width: 85%;
    padding: 14px 18px;
    font-size: 0.95rem;
    line-height: 1.5;
    animation: aparecerMensaje 0.3s ease-out;
}

.mensaje-bot {
    background: #ffffff;
    color: var(--texto-oscuro);
    align-self: flex-start; 
    border: 1px solid var(--kubi-100);
    border-radius: 16px 16px 16px 4px; 
    box-shadow: 0 4px 12px rgba(0, 203, 117, 0.04);
    column-count: 1 !important; 
}

.mensaje-usuario {
    background: var(--kubi-500); 
    color: white;
    align-self: flex-end; 
    border-radius: 16px 16px 4px 16px; 
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 203, 117, 0.25);
}

/* Zona de escritura */
.input-area {
    display: flex;
    padding: 15px;
    background: #ffffff;
    border-top: 1px solid var(--kubi-100);
    gap: 10px;
    align-items: center;
}

#input-mensaje {
    flex: 1;
    padding: 14px 20px;
    border: 1px solid var(--kubi-200);
    border-radius: 30px; 
    outline: none;
    font-size: 0.95rem;
    color: var(--texto-oscuro);
    background: var(--kubi-25);
    transition: all 0.3s;
}

#input-mensaje:focus {
    border-color: var(--kubi-500);
    background: #ffffff;
    box-shadow: 0 0 0 4px var(--kubi-50);
}

#btn-enviar {
    background: var(--kubi-500);
    color: white;
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 10px rgba(0, 203, 117, 0.2);
}

#btn-enviar:hover {
    background: var(--kubi-600);
    transform: scale(1.05);
    box-shadow: 0 6px 14px rgba(0, 203, 117, 0.3);
}

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

/* =========================================
   CARRUSEL DE ANUNCIOS PRINCIPAL - PAGINA PRINCIPAL
   ========================================= */
.banner-carousel-seccion {
    padding: 40px 0 20px 0;
    background-color: #ffffff;
    position: relative;
    overflow: hidden;
}

/* El "Carril" por donde se deslizan las tarjetas */
.carousel-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory; 
    padding: 20px 5%; 
    -ms-overflow-style: none;  
    scrollbar-width: none;  
    scroll-behavior: smooth; /* ⬅️ ESTO HACE QUE SE DESLICE SUAVEMENTE */
}

.punto { 
    width: 10px; 
    height: 10px; 
    border-radius: 50%; 
    background: #e2e8f0; 
    display: inline-block; 
    transition: all 0.3s; 
    cursor: pointer; /* ⬅️ ESTO LE PONE LA MANITO PARA QUE SEPAN QUE ES CLICABLE */
}

.carousel-track::-webkit-scrollbar {
    display: none; /* Oculta la barra de scroll en Chrome/Safari */
}

/* Estructura base de cada tarjeta */
.carousel-card {
    scroll-snap-align: center;
    flex: 0 0 88%; /* Ocupa el 88% de la pantalla, dejando asomar la siguiente */
    max-width: 1000px;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    min-height: 350px;
    transition: transform 0.3s ease;
}

@media (min-width: 1024px) {
    .carousel-card { flex: 0 0 80%; } /* En pantallas grandes ocupa un poco menos */
}

.card-contenido { width: 100%; }
.centralizado { text-align: center; }

/* =========================================
   NUEVO BANNER FOMO PREMIUM
   ========================================= */
.card-fomo-moderno {
    background: linear-gradient(135deg, #ffffff 0%, #E6FFF4 60%, #CCFFE9 100%);
    color: #003F27;
    border: 1px solid #80F0C5;
    position: relative;
    overflow: hidden;
}

.card-fomo-moderno::before {
    content: '';
    position: absolute;
    bottom: -80px;
    left: 38%;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(0,203,117,0.10) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.fomo-contenido-split {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    width: 100%;
}

.fomo-info { flex: 1; }

.fomo-badge {
    display: inline-block;
    background: #CCFFE9;
    color: #00975B;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 15px;
    border: 1px solid #4DDFAB;
    letter-spacing: 0.5px;
}

.card-fomo-moderno h2 {
    font-size: 2.2rem;
    line-height: 1.2;
    margin: 0 0 15px 0;
    color: #003F27;
}

.txt-resalte-verde {
    color: var(--kubi-500);
}

.card-fomo-moderno p {
    color: #334155;
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 25px;
    max-width: 90%;
}

/* Botones del Banner */
.fomo-botones {
    display: flex;
    gap: 15px;
}

.btn-fomo-primario {
    background: var(--kubi-500);
    color: var(--kubi-950); /* Texto oscuro para máximo contraste */
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 203, 117, 0.3);
}

.btn-fomo-primario:hover {
    background: var(--kubi-400); /* Brilla un poco más al pasar el mouse */
    transform: translateY(-2px);
}

.btn-fomo-secundario {
    background: rgba(255,255,255,0.05);
    color: white;
    border: 1px solid rgba(255,255,255,0.2);
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-fomo-secundario:hover {
    background: rgba(255,255,255,0.1);
    border-color: white;
}

/* Lado Derecho: Reloj y Cupos */
.fomo-urgencia {
    flex: 0 0 350px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.caja-reloj-moderno {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 20px;
}

.reloj-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #cbd5e1;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.pulso-rojo {
    width: 8px;
    height: 8px;
    background-color: #ef4444;
    border-radius: 50%;
    animation: latido 1.5s infinite;
}

@keyframes latido {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.reloj-grid-moderno {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

/* Cajas del reloj más integradas */
.tiempo-box-mod {
    background: var(--kubi-950);
    border: 1px solid var(--kubi-800);
    border-radius: 8px;
    padding: 10px 5px;
    text-align: center;
}

.tiempo-box-mod span {
    display: block;
    font-size: 1.5rem;
    font-weight: 900;
    color: white;
}

.tiempo-box-mod small {
    color: #94a3b8;
    font-size: 0.7rem;
    text-transform: uppercase;
}

.caja-cupos-moderno {
    background: rgba(255, 255, 255, 0.80);
    border: 1px solid #80F0C5;
    border-radius: 16px;
    padding: 15px;
    text-align: center;
    font-size: 1.1rem;
    color: #003F27;
    backdrop-filter: blur(4px);
}

/* =========================================
   SECCIÓN DETALLES DEL PROGRAMA
   ========================================= */
.seccion-constructores {
    margin: 60px 0;
    padding: 0 4%;
}

.constructores-header {
    text-align: center;
    margin-bottom: 40px;
}

.constructores-header h2 {
    color: #1e293b;
    font-size: 2rem;
    margin-bottom: 15px;
}

.constructores-header p {
    color: #475569;
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
}

.fomo-grid-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    background: white;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1.5px solid var(--kubi-200);
    margin-bottom: 50px;
}

.contador-tiempo {
    border-right: 1px solid #e2e8f0;
    padding-right: 30px;
}

.titulo-reloj {
    color: #64748b;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9rem;
    margin-bottom: 15px;
    display: block;
}

.reloj-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 15px;
}

.tiempo-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 15px 5px;
    text-align: center;
}

.tiempo-box span {
    display: block;
    font-size: 2rem;
    font-weight: 900;
    color: #1e293b;
}

.fecha-limite {
    color: #00CB75;
    font-weight: bold;
    font-size: 0.95rem;
    margin: 0;
}

.fomo-cta-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.alerta-cupos {
    display: inline-block;
    color: #ef4444;
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.cupos-numero span:first-child {
    font-size: 2.5rem;
    font-weight: 900;
    color: #1e293b;
}

.total-cupos {
    font-size: 1.2rem;
    color: #94a3b8;
    font-weight: bold;
}

.fomo-cta-group p {
    color: #64748b;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.btn-fomo-hero {
    background: #00CB75;
    color: #0f172a;
    padding: 15px 30px;
    border-radius: 30px;
    font-size: 1.2rem;
    font-weight: 800;
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(0, 203, 117, 0.2);
}

.btn-fomo-hero:hover {
    background: #00a860;
    transform: scale(1.02);
}

/* Beneficios del programa */
.incentivos-titulo {
    text-align: center;
    color: #1e293b;
    font-size: 1.6rem;
    margin-bottom: 30px;
}

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

.incentivo-card {
    background: #f8fafc;
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    transition: transform 0.3s;
}

.incentivo-card:hover {
    transform: translateY(-5px);
    background: white;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.inc-icono {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.incentivo-card h4 {
    color: #0f172a;
    font-size: 1.15rem;
    margin: 0 0 10px 0;
}

.incentivo-card p {
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

/* Responsividad para Móviles */
@media (max-width: 768px) {
    .fomo-contenido-split { flex-direction: column; text-align: center; }
    .fomo-botones { flex-direction: column; }
    .fomo-urgencia { width: 100%; flex: auto; }
    .fomo-grid-main { grid-template-columns: 1fr; }
    .contador-tiempo { border-right: none; border-bottom: 1px solid #e2e8f0; padding-right: 0; padding-bottom: 20px; margin-bottom: 20px; }
    .incentivos-grid { grid-template-columns: 1fr; }
}


/* -----------------------------------------
   TARJETA 2: HERO TEXT (El Mensaje)
   ----------------------------------------- */
/* =========================================
   DISEÑO DIVIDIDO (TEXTO E IMAGEN)
   ========================================= */

/* Separación entre el texto y la imagen */
.card-hero {
    background: linear-gradient(135deg, #ffffff 0%, #E6FFF4 60%, #CCFFE9 100%);
    border: 1px solid #80F0C5;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    overflow: hidden;
}

.card-hero::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(0,203,117,0.10) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* El texto toma el 55% del espacio y se alinea a la izquierda */
.card-hero .card-contenido {
    width: 55%;
    text-align: left;
}

.card-hero h1 {
    color: #003F27;
    font-size: 2.1rem;
    line-height: 1.25;
    font-weight: 800;
    margin: 0 0 18px 0;
}

.card-hero p {
    color: #334155;
    font-size: 1.05rem;
    line-height: 1.75;
    margin: 0;
}

.texto-resaltado {
    color: #00CB75;
}

/* El contenedor de la imagen toma el 40% restante */
.card-imagen {
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* La imagen se adapta al tamaño sin salirse */
.card-imagen img {
    max-width: 100%;
    height: auto;
    border-radius: 16px; /* Le da unos bordes redondeados elegantes a la imagen */
    object-fit: contain;
}

/* =========================================
   RESPONSIVO PARA CELULARES
   ========================================= */
@media (max-width: 768px) {
    .card-hero {
        flex-direction: column-reverse; /* Pone el texto arriba y la imagen abajo */
        padding: 30px 20px;
        gap: 20px;
    }
    
    .card-hero .card-contenido {
        width: 100%;
        text-align: center; /* En celular se ve mejor centrado de nuevo */
    }
    
    .card-imagen {
        width: 80%; /* Para que la imagen no ocupe toda la pantalla en celular */
        margin: 0 auto;
    }
}
/* -----------------------------------------
   TARJETA 3: BENEFICIOS (DISEÑO ORBITAL CENTRADO)
   ----------------------------------------- */
.card-beneficios {
    background: linear-gradient(135deg, #ffffff 0%, #E6FFF4 50%, #CCFFE9 100%);
    border: 1px solid #80F0C5;
    position: relative;
    overflow: hidden;
}

.card-beneficios::before {
    content: '';
    position: absolute;
    top: -70px;
    right: -70px;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(0,203,117,0.10) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.card-beneficios h2 {
    color: #003F27;
    margin: 0 0 10px 0;
    font-size: 2.2rem;
    font-weight: 800;
}

.beneficios-header {
    text-align: center;
    margin-bottom: 35px;
}

.sub-ben { color: #00975B; font-size: 1.05rem; margin: 0; font-weight: 500; }

/* El contenedor que divide en 3 partes */
.beneficios-layout-central {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    width: 100%;
}

.columna-ben {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1; /* Ambas columnas laterales toman el mismo espacio */
}

/* La imagen central */
.columna-centro-img {
    flex: 0 0 260px; /* Tamaño fijo perfecto para que la imagen no se aplaste */
    display: flex;
    justify-content: center;
}

.img-beneficios {
    width: 100%;
    max-width: 250px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 15px 25px rgba(0, 203, 117, 0.15)); /* Sombra verde elegante */
    transition: transform 0.4s ease;
}

.img-beneficios:hover {
    transform: translateY(-8px) scale(1.03); /* La imagen "flota" al pasar el mouse */
}

/* Estilo de las mini-tarjetas */
.ben-item {
    background: rgba(255,255,255,0.85);
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(0, 203, 117, 0.08);
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid #CCFFE9;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}

.ben-item:hover {
    border-color: #00CB75;
    box-shadow: 0 10px 28px rgba(0, 203, 117, 0.20);
    transform: translateY(-3px);
    background: white;
}

/* Direcciones opuestas para que "apunten" al centro */
.ben-item-izq {
    text-align: right;
}

.ben-item-der {
    text-align: left;
}

/* Los recuadros de los emojis */
.ben-icono {
    font-size: 1.8rem;
    background: linear-gradient(135deg, #CCFFE9, #80F0C5);
    color: #005C39;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 203, 117, 0.20);
}

.ben-texto strong { color: #003F27; display: block; margin-bottom: 5px; font-size: 1.1rem; font-weight: 700; }
.ben-texto p { margin: 0; font-size: 0.9rem; color: #475569; line-height: 1.4; }

/* -----------------------------------------
   RESPONSIVO (Para Celulares y Tablets)
   ----------------------------------------- */
@media (max-width: 900px) {
    .beneficios-layout-central {
        flex-direction: column; /* Apila todo hacia abajo */
        gap: 20px;
    }
    
    .columna-centro-img {
        order: -1; /* Obliga a la imagen a ir hasta arriba */
        margin-bottom: 10px;
    }
    
    /* En celular, revertimos las tarjetas izquierdas para que se vean normales */
    .ben-item-izq {
        flex-direction: row-reverse;
        text-align: left;
    }
}

.btn-accion-primaria { background: #00CB75; color: white; padding: 12px 25px; border-radius: 8px; text-decoration: none; font-weight: bold; display: inline-block; transition: background 0.3s; }
.btn-accion-primaria:hover { background: #00a860; }



/* =========================================
   PUNTOS DE PROGRESO DINÁMICOS
   ========================================= */
.carousel-indicadores-dinamicos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 25px;
}

.punto-dinamico {
    width: 12px; /* Estado inactivo (redondo pequeño) */
    height: 12px;
    background-color: #e2e8f0;
    border-radius: 20px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: width 0.4s ease, background-color 0.4s ease;
}

.punto-dinamico:hover {
    background-color: #cbd5e1;
}

/* Cuando el punto está activo, se estira */
.punto-dinamico.activo {
    width: 60px; /* Se convierte en una barra ancha */
    background-color: rgba(0, 203, 117, 0.2); /* Fondo verde clarito */
}

/* La barra verde oscura que se va llenando dentro del punto estirado */
.punto-relleno {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%; /* Inicia vacía */
    background-color: var(--verde-primario, #00CB75);
    border-radius: 20px;
    /* La transición del 'width' la controlamos con JS para sincronizarla con los 5 segundos */
}

/* El "Carril" por donde se deslizan las tarjetas */
.carousel-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory; 
    padding: 20px 5%; 
    -ms-overflow-style: none;  
    scrollbar-width: none;  
    /* 🚨 ELIMINAMOS EL SCROLL-BEHAVIOR DE AQUÍ PARA QUE EL JS LO CONTROLE 🚨 */
}



/* =========================================
   SECCIÓN DE CURSOS (ESTILO LISTAS)
   ========================================= */

.seccion-cursos-lista {
    padding-left: 4%;
    padding-right: 4%;
}

.cursos-header-izq {
    margin-bottom: 30px;
    text-align: left;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.cursos-columnas-grid {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    padding: 20px 0 40px 0;
}

.curso-columna {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.columna-fondo {
    flex-grow: 1;
    background-color: var(--kubi-25);
    border: 1px solid var(--kubi-100);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
}

.columna-fondo:hover {
    transform: translateY(-2px);
}

/* =========================================
   RUTA DE APRENDIZAJE — Roles y Conectores
   ========================================= */
.curso-columna {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rol-badge {
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    padding: 7px 20px;
    border-radius: 20px;
    margin: 0 auto 12px auto;
    width: fit-content;
    display: inline-block;
}

.rol-explorer  { background: #E6FFF4; color: #00975B; border: 1.5px solid #4DDFAB; }
.rol-builder   { background: #EEF2FF; color: #4338CA; border: 1.5px solid #818CF8; }
.rol-automator { background: #FFF7ED; color: #C2410C; border: 1.5px solid #FB923C; }

/* Colores diferenciados por rol */
.columna-explorer {
    background: linear-gradient(160deg, #f8fffc 0%, #E6FFF4 100%);
    border: 1.5px solid #B3FFDF;
    box-shadow: 0 6px 24px rgba(0, 203, 117, 0.07);
}
.columna-explorer:hover { border-color: #4DDFAB; box-shadow: 0 10px 32px rgba(0, 203, 117, 0.13); }
.columna-explorer .columna-titulo { color: #007B4B; }
.columna-explorer .mini-card-meta { color: #00975B; }
.columna-explorer .columna-header { border-bottom-color: #80F0C5; }

.columna-builder {
    background: linear-gradient(160deg, #fafafe 0%, #EEF2FF 100%);
    border: 1.5px solid #C7D2FE;
    box-shadow: 0 6px 24px rgba(99, 102, 241, 0.07);
}
.columna-builder:hover { border-color: #818CF8; box-shadow: 0 10px 32px rgba(99, 102, 241, 0.13); }
.columna-builder .columna-titulo { color: #4338CA; }
.columna-builder .mini-card-meta { color: #6366F1; }
.columna-builder .columna-header { border-bottom-color: #A5B4FC; }

.columna-automator {
    background: linear-gradient(160deg, #fffdfb 0%, #FFF7ED 100%);
    border: 1.5px solid #FED7AA;
    box-shadow: 0 8px 32px rgba(194, 65, 12, 0.22);
}
.columna-automator:hover { border-color: #FB923C; box-shadow: 0 12px 40px rgba(194, 65, 12, 0.38); }
.columna-automator .columna-titulo { color: #C2410C; }
.columna-automator .columna-header { border-bottom-color: #FDBA74; }

/* Doble clase para ganar especificidad sobre .fondo-proximamente { border: none } */
.fondo-proximamente.columna-automator {
    border: 1.5px solid #FED7AA;
    box-shadow: 0 8px 36px rgba(194, 65, 12, 0.28);
}
.fondo-proximamente.columna-automator:hover {
    border-color: #FB923C;
    box-shadow: 0 12px 40px rgba(194, 65, 12, 0.38);
}

/* Flecha SVG entre columnas */
.ruta-conector {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    padding-top: 46px;
}

.conector-svg {
    width: 52px;
    height: 24px;
    overflow: visible;
    flex-shrink: 0;
}

/* --- TÍTULO DEL CURSO --- */
.columna-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    padding-bottom: 15px;
    margin-bottom: 10px;
    border-bottom: 2px dashed var(--kubi-200); 
}

.columna-titulo {
    font-size: 1.15rem;
    color: #1e293b;
    font-weight: 800;
    line-height: 1.4;
    margin: 0;
}

.flecha-verde { 
    color: var(--verde-primario, #00CB75); 
    font-size: 1.5rem; 
    font-weight: bold;
    transition: transform 0.3s ease; 
}
/* Animación de la flecha al pasar el mouse por toda la columna */
.columna-fondo:hover .flecha-verde { 
    transform: translateX(5px); 
}

/* -----------------------------------------
   MINI TARJETAS DE CURSO (HORIZONTALES)
   ----------------------------------------- */
.mini-card-curso {
    background: #ffffff;
    border-radius: 12px; 
    padding: 12px; /* Redujimos un poco el padding para que la imagen domine */
    display: flex;
    align-items: center;
    gap: 16px; /* Separación entre la imagen y el texto */
    text-decoration: none;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.mini-card-curso {
    cursor: default;
}

.mini-card-curso:hover {
    box-shadow: none;
    border-color: #e2e8f0;
    transform: none;
}

.mini-card-curso:hover .mini-card-imagen img {
    transform: none;
}

/* 🚨 NUEVO: CAJA CONTENEDORA DE LA IMAGEN 🚨 */
.mini-card-imagen {
    width: 80px;  /* Ancho fijo para la miniatura */
    height: 60px; /* Alto fijo tipo "Video de YouTube" */
    border-radius: 8px;
    overflow: hidden; /* Evita que la foto se salga de las esquinas redondas */
    flex-shrink: 0; /* Evita que la caja se aplaste si el título es muy largo */
    background: #f1f5f9; /* Fondo gris por si la imagen tarda en cargar */
}

.mini-card-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recorta la imagen perfectamente sin deformarla */
    transition: transform 0.3s ease;
}

/* Efecto sutil de zoom en la foto al pasar el mouse */
.mini-card-curso:hover .mini-card-imagen img {
    transform: scale(1.08);
}

/* --- TEXTOS DEL MÓDULO --- */
.mini-card-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mini-card-meta {
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
    color: var(--kubi-600); 
}  

.mini-card-info h4 {
    color: #1e293b;
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

/* =========================================
   COLUMNA 3: PRÓXIMAMENTE (IMAGEN COMO FONDO)
   ========================================= */
.fondo-proximamente {
    /* 🚨 MAGIA VISUAL: Combinamos un degradado oscuro con la imagen en la misma línea 🚨 */
    background-image: linear-gradient(
        to bottom,
        rgba(15, 23, 42, 0.3), /* Arriba más transparente para ver la foto */
        rgba(15, 23, 42, 0.85) /* Abajo más oscuro para que el texto resalte perfectamente */
    ), url('../img/Fondo_Mantenimiento.webp');
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
    
    border: none; 
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden; 
    min-height: 300px; 
}

.estado-construccion {
    width: 100%;
    height: 100%;
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    text-align: center;
    box-sizing: border-box;
    
    /* 🚨 ELIMINAMOS LA CAJA OSCURA INTERIOR 🚨 */
    /* Borramos el background: rgba(...) y el backdrop-filter que creaban ese cuadro marcado */
}

.estado-construccion h4 {
    color: #ffffff; 
    font-size: 1.6rem; /* Un poco más grande para darle jerarquía */
    font-weight: 800;
    margin: 0 0 10px 0;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6); 
}

.estado-construccion p {
    color: #f8fafc; 
    font-size: 1.05rem;
    margin: 0;
    line-height: 1.5;
    text-shadow: 0 2px 5px rgba(0,0,0,0.6);
}
/* =========================================
   SECCIÓN DE DOBLE TARJETA (MÓDULOS)
   ========================================= */
.seccion-doble-banner {
    padding: 60px 5%;
    background-color: #ffffff;
}

.doble-banner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 30px;
    align-items: stretch;
}

/* Tarjetas Base */
.banner-card {
    border-radius: 24px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    transition: transform 0.3s ease;
}
.banner-card:hover { transform: translateY(-5px); }

.banner-header { margin-bottom: 25px; }
.banner-tag { display: inline-block; padding: 6px 15px; border-radius: 20px; font-weight: bold; font-size: 0.85rem; margin-bottom: 15px; }
.tag-verde { background: var(--kubi-800); color: var(--kubi-100); }
/* Convertimos la etiqueta azul en un verde amigable */
.tag-azul { background: var(--kubi-50); color: var(--kubi-700); }

.banner-card h2 { font-size: 1.8rem; margin: 0 0 10px 0; line-height: 1.3; font-weight: 800; }
.banner-card p { font-size: 1rem; line-height: 1.5; margin: 0; }
.banner-footer { margin-top: auto; padding-top: 25px; } /* Empuja los botones abajo */

/* Variante Oscura (Súper-Equipo) */
.banner-oscuro { background-color: var(--kubi-950); color: white; }
.banner-oscuro h2 { color: #ffffff; }
.banner-oscuro p { color: var(--kubi-100); }

.equipo-grid-mini { display: grid; gap: 15px; margin-bottom: 20px; }
.tarjeta-equipo-mini { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 12px; border-left: 4px solid transparent; }
.borde-verde { border-left-color: var(--kubi-500); }
/* Convertimos el borde azul en verde agua */
.borde-azul { border-left-color: var(--kubi-300); }
.tarjeta-equipo-mini h3 { font-size: 1.1rem; color: white; margin: 0 0 5px 0; }
.tarjeta-equipo-mini p { font-size: 0.9rem; color: #94a3b8; }

.nota-clave-banner { 
    background: var(--kubi-900); 
    border: 1px solid var(--kubi-700); 
    border-radius: 12px; 
    padding: 15px; 
    display: flex; 
    gap: 15px; 
    align-items: center; 
}

.nota-icono-bg { font-size: 1.8rem; }
.nota-contenido h4 { color: var(--kubi-400); margin: 0 0 5px 0; font-size: 1rem; }
.highlight-prompt { background: var(--kubi-800); color: var(--kubi-200); padding: 2px 6px; border-radius: 4px; font-weight: bold; }

.btn-banner-primario { 
    display: inline-block; 
    background: var(--kubi-500); 
    color: var(--kubi-950); 
    font-weight: 800; 
    padding: 12px 20px; 
    border-radius: 8px; 
    text-decoration: none; 
    transition: background 0.3s; 
}
.btn-banner-primario:hover { background: var(--kubi-400); color: var(--kubi-950); }

/* Variante Clara (Ruta Ágil) */
.banner-claro { background-color: #f8fafc; border: 1px solid #e2e8f0; }
.banner-claro h2 { color: #1e293b; }
.banner-claro p { color: #475569; }

.pasos-interactivos-grid { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; }
.paso-card-int { background: white; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; cursor: pointer; transition: all 0.3s; }
.paso-card-int:hover { border-color: var(--kubi-400); }
.paso-card-int.activo { border-color: var(--kubi-500); box-shadow: 0 4px 12px rgba(0, 203, 117, 0.1); }

.paso-cabecera { display: flex; align-items: center; padding: 12px 15px; gap: 12px; }
.paso-num-int { background: #e2e8f0; color: #475569; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: bold; font-size: 0.9rem; transition: all 0.3s; }
.paso-card-int.activo .paso-num-int { background: var(--kubi-500); color: white; }
.paso-card-int.activo .paso-icono-toggle { transform: rotate(180deg); color: var(--kubi-500); }
.paso-titulo-grupo h4 { margin: 0; font-size: 1rem; color: #1e293b; }
.paso-icono-toggle { margin-left: auto; font-size: 0.8rem; color: #94a3b8; transition: transform 0.3s; }

/* Ocultar y mostrar contenido del acordeón */
.paso-contenido { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; background: #f1f5f9; }
.paso-card-int.activo .paso-contenido { max-height: 200px; } /* Se abre suavemente */
.paso-contenido-inner { padding: 15px; font-size: 0.9rem; color: #475569; }
.paso-contenido-inner p { margin-bottom: 8px; }

.btn-banner-secundario { 
    display: inline-block; 
    background: transparent; 
    border: 2px solid var(--kubi-500); 
    color: var(--kubi-700); 
    font-weight: bold; 
    padding: 12px 20px; 
    border-radius: 8px; 
    text-decoration: none; 
    transition: all 0.3s; 
}
.btn-banner-secundario:hover { background: var(--kubi-50); color: var(--kubi-800); }

/* =========================================
   SISTEMA DE PESTAÑAS (RUTAS DE APRENDIZAJE)
   ========================================= */

/* Hacemos que los elementos del menú parezcan botones */
.sidebar-menu li {
    cursor: pointer;
    transition: all 0.3s ease;
}

.sidebar-menu li:hover:not(.activo) {
    background-color: #f8fafc;
    transform: translateX(5px);
}

/* Clases para ocultar y mostrar los carruseles de cursos */
.track-oculto {
    display: none !important;
}

.track-visible {
    display: flex; /* Ocultamos y mostramos respetando el flex del carrusel */
    animation: fadeInRuta 0.5s ease forwards;
}

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

/* Tarjetas Cuadradas del Carrusel */
.curso-card-square {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.curso-card-square:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 203, 117, 0.12);
    border-color: var(--kubi-300);
}

/* Contenedor actualizado */
.card-header-img {
    height: 140px;
    width: 100%;
    overflow: hidden; /* Evita que la imagen se desborde del borde redondeado de la tarjeta */
}

/* NUEVA REGLA: Comportamiento de la imagen */
.card-header-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Hace que la imagen llene todo el espacio disponible sin deformarse ni estirarse */
    display: block;
}


.card-body-square {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.badge-micro {
    font-size: 0.75rem;
    color: var(--kubi-600); 
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.card-body-square h4 {
    font-size: 1.1rem;
    color: #1e293b;
    margin: 0 0 10px 0;
    line-height: 1.3;
}

.card-body-square p {
    font-size: 0.9rem;
    color: #475569;
    margin: 0 0 20px 0;
    line-height: 1.4;
    flex-grow: 1;
}

.btn-outline-purpura {
    text-align: center;
    display: block;
    border: 1px solid var(--kubi-500);
    color: var(--kubi-600);
    padding: 10px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.3s;
}

.btn-outline-purpura:hover {
    background: var(--kubi-500);
    border-color: var(--kubi-500);
    color: white;
}

/* Responsivo para celulares (El menú pasa arriba y el carrusel abajo) */
@media (max-width: 900px) {
    .cursos-layout { flex-direction: column; }
    .cursos-sidebar { width: 100%; }
}


/* =========================================
   HERO HERRAMIENTAS (REPLICA DEL DISEÑO INMERSIVO) - HERRAMIENTAS SECCION
   ========================================= */

html, body.pagina-herramientas, body.pagina-cursos, body.pagina-contacto{
    background-color: #ffffff !important;
}


.hero-herramientas-premium {
    /* 🚨 Asegúrate de poner una imagen acorde a la sección de herramientas 🚨 */
    background-image: url('../img/Fondo_Herramientas.webp'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #ffffff;
    
    border-radius: 60px; 
    margin: 30px 4%; 
    padding: 100px 6%; 
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center; 
}

/* El velo oscuro (Idéntico al de cursos) */
.hero-herramientas-premium .hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to right, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.3) 100%);
    z-index: 1;
}

.hero-herramientas-contenido {
    position: relative;
    z-index: 2; 
    max-width: 100%;
}

/* --- Lista Horizontal de Atributos (Herramientas) --- */
.atributo-herramienta {
    color: var(--kubi-200); 
    font-weight: 800;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 8px; 
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9); 
}

/* --- Títulos y Párrafos --- */
.hero-herramientas-contenido h1 {
    font-size: 3.8rem; 
    font-weight: 900;
    margin: 0 0 20px 0;
    line-height: 1.15;
    letter-spacing: -1px;
    
    background: linear-gradient(135deg, #ffffff 0%, var(--kubi-400) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6)); 
}

.hero-herramientas-contenido p {
    font-size: 1.25rem;
    color: #F8FAFC; 
    line-height: 1.6;
    margin: 0;
    max-width: 100%;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9); 
}

/* --- Responsividad para Celulares --- */
@media (max-width: 900px) {
    .hero-herramientas-premium { 
        padding: 60px 5%; 
        border-radius: 30px; 
        background: linear-gradient(to bottom, rgba(15, 23, 42, 0.8) 0%, rgba(15, 23, 42, 0.6) 100%), url('../img/Fondo_Herramientas.webp') center/cover no-repeat;
    }
    .hero-herramientas-premium .hero-overlay { display: none; }
    
    .hero-herramientas-contenido h1 { font-size: 2.5rem; }
    .hero-herramientas-contenido p { font-size: 1.1rem; }
    .atributo-herramienta { font-size: 0.85rem; }
}


/* =========================================
   SECCIÓN: 4 REGLAS DE ORO (BURBUJAS)
   ========================================= */

.seccion-reglas-oro {
    padding: 60px 5% 20px 5%;
    max-width: 1400px;
    margin: 0 auto;
    text-align: center; /* Centra el título principal */
}

.titulo-reglas-oro {
    font-size: 2rem;
    font-weight: 800;
    color: var(--kubi-950);
    margin-bottom: 40px;
    letter-spacing: -0.5px;
}

/* La cuadrícula horizontal de 4 columnas */
.grid-burbujas-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 burbujas del mismo tamaño */
    gap: 25px;
    align-items: stretch; /* Asegura que todas midan lo mismo de alto */
}

/* Diseño de la burbuja (estilo imagen adjunta) */
.burbuja-regla {
    background-color: #ffffff; 
    border: 1px solid var(--borde-suave);
    border-radius: 35px; 
    padding: 30px 25px;
    text-align: left; 
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0,0,0,0.01); 
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.burbuja-regla:hover {
    transform: translateY(-5px); 
    border-color: var(--kubi-300);
    box-shadow: 0 10px 25px rgba(0, 203, 117, 0.06);
}
.burbuja-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.burbuja-header .card-icono {
    font-size: 1.8rem;
}

.burbuja-header h3 {
    margin: 0;
    font-size: 1.15rem;
    color: #0f172a;
    font-weight: 800;
    line-height: 1.3;
}

/* --- Estilos internos de la regla --- */
.card-cuerpo {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Empuja el ejemplo hacia abajo si sobra espacio */
}

.mal-uso {
    color: #ef4444; /* Rojo para lo que NO se debe hacer */
    font-weight: 600;
    font-size: 0.95rem;
    margin: 0 0 10px 0;
}

.buen-uso {
    color: var(--kubi-600); 
    font-weight: 600;
    font-size: 0.95rem;
    margin: 0 0 20px 0;
    line-height: 1.4;
}


.ejemplo-prompt {
    background: #ffffff; /* El ejemplo va en blanco para resaltar dentro del gris */
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 15px;
    margin-top: auto; /* Lo pega al fondo de la burbuja */
}

/* --- Responsividad --- */
/* En Laptops pequeñas o Tablets, lo pasamos a 2x2 para que no se aplaste el texto */
@media (max-width: 1100px) {
    .grid-burbujas-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* En celulares, lo ponemos en 1 sola columna */
@media (max-width: 600px) {
    .grid-burbujas-4 {
        grid-template-columns: 1fr;
    }
    .titulo-reglas-oro {
        font-size: 1.6rem;
    }
}

.btn-copiar {
    background: #e2e8f0; border: none; padding: 4px 10px; border-radius: 6px;
    font-size: 0.75rem; font-weight: bold; color: #475569; cursor: pointer; transition: all 0.2s;
}
.btn-copiar:hover { 
    background: var(--kubi-50);
    color: var(--kubi-700);
}
.texto-prompt { font-style: italic; color: #334155; }

/* =========================================
   NIVELES DE HERRAMIENTAS (DISEÑO BURBUJAS HORIZONTALES)
   ========================================= */

.contenedor-herramientas-niveles {
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 5%;
    display: flex;
    flex-direction: column;
    gap: 40px; /* Separación entre cada gran burbuja de nivel */
}

/* --- Gran Burbuja Contenedora de Nivel --- */
.burbuja-nivel {
    border-radius: 35px; /* Sigue el mismo estilo redondeado de las Reglas de Oro */
    padding: 40px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}
/* 1. Grandes bloques contenedores de cada Nivel */
.burbuja-nivel.fondo-nivel-1 { background-color: var(--kubi-25); border: 1px solid var(--kubi-100); } 
.burbuja-nivel.fondo-nivel-2 { background-color: var(--kubi-50); border: 1px solid var(--kubi-200); } 
.burbuja-nivel.fondo-nivel-3 { background-color: var(--kubi-100); border: 1px solid var(--kubi-300); }

/* =========================================
   NIVELES DE HERRAMIENTAS - PROGRESIÓN VERDE KUBI
   ========================================= */

/* --- Fondos de las Grandes Burbujas de Nivel (Evolución de tonos pastel limpios) --- */
.fondo-nivel-1 { 
    background-color: var(--kubi-25); /* Verde menta ultra suave y amigable */
    border: 1px solid var(--kubi-100); 
} 
.fondo-nivel-2 { 
    background-color: var(--kubi-50); /* Verde menta un paso más marcado, muy fresco */
    border: 1px solid var(--kubi-200); 
} 
.fondo-nivel-3 { 
    background-color: var(--kubi-100); /* Verde agua suave, denota una sección especial */
    border: 1px solid var(--kubi-300); 
}


/* --- Linas decorativas superiores en las Tarjetas Blancas --- */
.borde-verde { border-top-color: var(--kubi-400); }
.borde-naranja { border-top-color: var(--kubi-600); }
.borde-rojo { border-top-color: var(--kubi-800); }

/* Cabecera del Nivel */
.nivel-header {
    margin-bottom: 30px;
}

.nivel-header h2 { 
    font-size: 1.5rem; 
    color: #1e293b; 
    margin-bottom: 10px; 
    display: flex; 
    align-items: center; 
    gap: 12px;
    font-weight: 800;
}

.nivel-header p { 
    color: #475569; 
    margin: 0; 
    font-size: 1.05rem; 
    line-height: 1.5;
}

/* Badges de Niveles */
.badge-nivel {
    padding: 6px 14px; 
    border-radius: 20px; 
    font-size: 0.8rem; 
    font-weight: 800; 
    letter-spacing: 1px;
}

/* --- Cuadrícula Interna de Herramientas --- */
.grid-herramientas-burbuja {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

/* 2. Estructura Base de las Tarjetas Blancas (Estilo Limpio) */
.card-herramienta-clean {
    background: #ffffff; 
    border-radius: 20px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    border: 1px solid transparent; 
}

.card-herramienta-clean:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.06);
}
/* 🟢 Personalización: NIVEL 1 */
.card-herramienta-clean.borde-verde { 
    border-top: 5px solid var(--kubi-400); 
    border-inline: 1px solid var(--kubi-100);
    border-bottom: 1px solid var(--kubi-100);
}

.card-herramienta-clean.borde-verde .card-herramienta-header h3 { color: var(--kubi-900); }
.card-herramienta-clean.borde-verde:hover { 
    transform: translateY(-5px);
    border-color: var(--kubi-400);
    box-shadow: 0 12px 25px rgba(0, 203, 117, 0.08);
}

.btn-herramienta.btn-verde { background: var(--kubi-500); color: var(--kubi-950); }
.btn-herramienta.btn-verde:hover { background: var(--kubi-600); color: white; }


/* 🍏 Personalización: NIVEL 2 */
.card-herramienta-clean.borde-naranja { 
    border-top: 5px solid var(--kubi-600); 
    border-inline: 1px solid var(--kubi-200);
    border-bottom: 1px solid var(--kubi-200);
}
.card-herramienta-clean.borde-naranja .card-herramienta-header h3 { color: var(--kubi-950); }
.card-herramienta-clean.borde-naranja:hover { 
    transform: translateY(-5px);
    border-color: var(--kubi-600);
    box-shadow: 0 12px 25px rgba(0, 179, 105, 0.1);
}
.btn-herramienta.btn-naranja { background: var(--kubi-600); color: white; }
.btn-herramienta.btn-naranja:hover { background: var(--kubi-700); }


/* =========================================
   NIVELES DE HERRAMIENTAS - PROGRESIÓN INTUITIVA
   ========================================= */

/* 1. Grandes bloques contenedores de cada Nivel */
.burbuja-nivel.fondo-nivel-1 { background-color: var(--kubi-25); border: 1px solid var(--kubi-100); } 
.burbuja-nivel.fondo-nivel-2 { background-color: var(--kubi-50); border: 1px solid var(--kubi-200); } 
.burbuja-nivel.fondo-nivel-3 { background-color: var(--kubi-100); border: 1px solid var(--kubi-300); }

/* Badges superiores de cada Nivel */
.badge-verde { background: var(--kubi-500); color: white; }
.badge-naranja { background: var(--kubi-700); color: white; } /* Reutilizamos clase de tu HTML */
.badge-rojo { background: var(--kubi-900); color: white; }    /* Reutilizamos clase de tu HTML */


/* 2. Estructura Base de las Tarjetas Blancas (Estilo Limpio) */
.card-herramienta-clean {
    background: #ffffff; 
    border-radius: 20px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    border: 1px solid transparent; 
}

/* --- Botones --- */
.btn-herramienta {
    display: block; 
    text-align: center; 
    color: white; 
    text-decoration: none;
    padding: 12px; 
    border-radius: 12px; 
    font-weight: bold; 
    transition: opacity 0.3s;
    font-size: 0.95rem;
}

.btn-herramienta:hover { opacity: 0.85; }


/* 🟢 Personalización: NIVEL 1 */
.card-herramienta-clean.borde-verde { 
    border-top: 5px solid var(--kubi-400); 
    border-inline: 1px solid var(--kubi-100);
    border-bottom: 1px solid var(--kubi-100);
}
.card-herramienta-clean.borde-verde .card-herramienta-header h3 { color: var(--kubi-900); }
.card-herramienta-clean.borde-verde:hover { 
    transform: translateY(-5px);
    border-color: var(--kubi-400);
    box-shadow: 0 12px 25px rgba(0, 203, 117, 0.08);
}
.btn-herramienta.btn-verde { background: var(--kubi-500); color: var(--kubi-950); }
.btn-herramienta.btn-verde:hover { background: var(--kubi-600); color: white; }


/* 🍏 Personalización: NIVEL 2 */
.card-herramienta-clean.borde-naranja { 
    border-top: 5px solid var(--kubi-600); 
    border-inline: 1px solid var(--kubi-200);
    border-bottom: 1px solid var(--kubi-200);
}
.card-herramienta-clean.borde-naranja .card-herramienta-header h3 { color: var(--kubi-950); }
.card-herramienta-clean.borde-naranja:hover { 
    transform: translateY(-5px);
    border-color: var(--kubi-600);
    box-shadow: 0 12px 25px rgba(0, 179, 105, 0.1);
}
.btn-herramienta.btn-naranja { background: var(--kubi-600); color: white; }
.btn-herramienta.btn-naranja:hover { background: var(--kubi-700); }


/* 🌲 Personalización: NIVEL 3 */
.card-herramienta-clean.borde-rojo { 
    border-top: 5px solid var(--kubi-800); 
    border-inline: 1px solid var(--kubi-300);
    border-bottom: 1px solid var(--kubi-300);
}
.card-herramienta-clean.borde-rojo .card-herramienta-header h3 { color: var(--kubi-950); }
.card-herramienta-clean.borde-rojo:hover { 
    transform: translateY(-5px);
    border-color: var(--kubi-800);
    box-shadow: 0 12px 25px rgba(0, 115, 75, 0.12);
}
.btn-herramienta.btn-rojo { background: var(--kubi-800); color: white; }
.btn-herramienta.btn-rojo:hover { background: var(--kubi-900); }

.btn-herramienta.btn-guia-rapida {
    background: white;
    color: var(--kubi-700);
    border: 2px solid var(--kubi-300);
    font-weight: 600;
    opacity: 1;
}
.btn-herramienta.btn-guia-rapida:hover {
    background: var(--kubi-25);
    color: var(--kubi-900);
    border-color: var(--kubi-500);
    box-shadow: 0 4px 14px rgba(0, 203, 117, 0.25);
    opacity: 1;
}

.card-herramienta-header { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    margin-bottom: 15px; 
}
.card-icono { font-size: 1.8rem; }
.card-herramienta-header h3 { font-size: 1.2rem; color: #1e293b; margin: 0; font-weight: 800;}

.card-cuerpo { 
    flex-grow: 1; 
    font-size: 0.95rem; 
    color: #475569; 
    margin-bottom: 25px;
    line-height: 1.5;
}

.card-cuerpo p { margin: 0 0 10px 0; }
.card-cuerpo p:last-child { margin-bottom: 0; }
/* Textos globales en negrita dentro del cuerpo */
.card-cuerpo strong { color: var(--kubi-950); }


/* --- Responsividad --- */
@media (max-width: 768px) {
    .burbuja-nivel { padding: 30px 20px; border-radius: 25px;}
    .nivel-header h2 { font-size: 1.3rem; flex-direction: column; align-items: flex-start;}
}

/* =========================================
   VARIABLES Y NAVBAR ESMERALDA - CONTACTO
   ========================================= */
:root {
    --esmeralda-primario: #2D8E5F;
    --esmeralda-oscuro: #1e6341;
    --esmeralda-claro: #e4f3ec;
    --fondo-pizarra: #2c313c; /* El fondo oscuro de la parte izquierda de tu imagen */
}

/* Modificamos los colores de la barra solo para esta página */
.nav-esmeralda .txt-esmeralda { color: var(--esmeralda-primario);}
.nav-esmeralda .icono-destello-esmeralda { color: var(--esmeralda-primario); }

.nav-esmeralda .nav-enlaces a.activo {
    color: var(--esmeralda-primario) !important; 
    background: var(--esmeralda-claro) !important;
}

.nav-esmeralda .nav-enlaces a:hover { color: var(--esmeralda-primario); }
.nav-esmeralda .btn-buscar-ia { border-color: var(--esmeralda-primario); background-color: var(--esmeralda-primario); }
.nav-esmeralda .buscador-ia:hover { border-color: var(--esmeralda-primario); box-shadow: 0 0 0 4px rgba(45, 142, 95, 0.1); }
.nav-esmeralda .nav-saludo { color: var(--esmeralda-primario); }
.nav-esmeralda .btn-logout-comercial { border-color: var(--esmeralda-primario); color: var(--esmeralda-primario); }
.nav-esmeralda .btn-logout-comercial:hover { background: var(--esmeralda-primario); color: white; }


/* =========================================
   SECCION CONTACTO COE
   ========================================= */

.hero-contacto-banner-premium {
    /* 🚨 Asegúrate de poner una imagen acorde a la sección de herramientas 🚨 */
    background-image: url('../img/Fondo_Contacto.webp'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    border-radius: 60px; 
    margin: 30px 4%; 
    padding: 100px 6%; 
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    display: flex;
    align-items: center; 
}

/* El velo oscuro (Idéntico al de cursos) */
.hero-contacto-banner-premium .hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to right, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.3) 100%);
    z-index: 1;
}

.hero-contacto-contenido {
    position: relative;
    z-index: 2; 
    max-width: 100%;
}


/* --- Títulos y Párrafos --- */
.hero-contacto-contenido h1 {
    font-size: 3.8rem; 
    font-weight: 900;
    margin: 0 0 10px 0; /* Reducido ligeramente para espaciar mejor */
    line-height: 1.15;
    letter-spacing: -1px;
    
    /* Integrado con el color KUBI */
    background: linear-gradient(135deg, #ffffff 0%, var(--kubi-400) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6)); 
}

.hero-contacto-contenido h3 {
    font-size: 1.8rem; /* ✏️ EDITADO: Corregido de 3.8rem a 1.8rem para que no compita con el H1 */
    font-weight: 700;
    margin: 0 0 15px 0;
    line-height: 1.3;
    
    background: linear-gradient(135deg, #ffffff 0%, var(--kubi-200) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6)); 
}

.hero-contacto-contenido p {
    font-size: 1.25rem;
    color: #F8FAFC; 
    line-height: 1.6;
    margin: 0;
    max-width: 100%;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9); 
}

/* --- Responsividad para Celulares --- */
@media (max-width: 900px) {
    .hero-contacto-banner-premium { 
        padding: 60px 5%; 
        border-radius: 30px; 
        background: linear-gradient(to bottom, rgba(15, 23, 42, 0.8) 0%, rgba(15, 23, 42, 0.6) 100%), url('../img/Fondo_Contacto.webp') center/cover no-repeat;
    }
    .hero-contacto-banner-premium .hero-overlay { display: none; }
    
    .hero-contacto-contenido h1 { font-size: 2.5rem; }
    .hero-contacto-contenido h3 { font-size: 0.85rem; }
    .hero-contacto-contenido p { font-size: 1.1rem; }
}


/* =========================================
   SECCIÓN DE CONTACTO Y CRITERIOS (LAYOUT 2 COLUMNAS)
   ========================================= */
.contenedor-contacto-2col {
    margin: 40px 4% 80px 4%;
    padding: 0;
}

.grid-contacto-2col {
    display: grid;
    grid-template-columns: 20fr 80fr;
    gap: 0;
    align-items: stretch;
    background: #ffffff;
    border-radius: 28px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    overflow: hidden;
}

/* --- Títulos Genéricos para ambas burbujas --- */
.titulo-seccion-contacto {
    color: #1e293b;
    font-size: 1.6rem;
    margin: 0 0 8px 0;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.sub-seccion-contacto {
    color: #64748b;
    margin-bottom: 25px;
    font-size: 1.05rem;
    line-height: 1.5;
}

/* =========================================
   BURBUJA IZQUIERDA (Desvíos) - DISEÑO AMIGABLE
   ========================================= */
.burbuja-contacto-izq {
    padding: 40px 20px;
    border-right: 1px solid #e2e8f0;
    background: #f8fafc;
}

.header-desvios {
    padding: 0 8px;
    margin-bottom: 30px;
    text-align: left;
}

/* Tarjetas internas amigables */
.tarjeta-contacto-interna {
    background: #ffffff;
    padding: 36px 44px;
    border-radius: 20px;
    margin-bottom: 32px;
    min-height: 160px;
    border: 1px solid #f1f5f9;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tarjeta-contacto-interna:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 8px 25px rgba(0,0,0,0.06); /* Sombra un poco más fuerte al pasar el mouse */
}

.tarjeta-contacto-interna:last-child { 
    margin-bottom: 0; 
}

/* Agrupación de Icono + Título */
.tarjeta-header {
    display: flex;
    align-items: center;
    gap: 15px; /* Espacio entre el icono y el título */
}

/* Iconos circulares con colores pastel */
.tarjeta-icono {
    font-size: 1.9rem;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.icono-azul { background-color: #E6F0FF; color: #0056b3; } /* Fondo azul pastel */
.icono-verde { background-color: var(--kubi-50, #E6FFF4); color: var(--kubi-800, #007B4B); } /* Fondo verde pastel de la marca */

.tarjeta-header h4 {
    color: #1e293b;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
}

.tarjeta-contacto-interna p {
    color: #64748b;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

.enlace-desvio {
    display: inline-flex;
    align-self: flex-start;
    background: linear-gradient(135deg, #007B4B, #00CB75);
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    padding: 12px 20px;
    border-radius: 10px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 3px 10px rgba(0, 203, 117, 0.2);
    margin-top: 6px;
}

.enlace-desvio:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 203, 117, 0.3);
    color: #ffffff;
}

/* =========================================
   ENLACES Y BOTÓN DE POLÍTICA (DENTRO DE LA TARJETA)
   ========================================= */
.grupo-enlaces-privacidad {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 12px;
    margin-top: 5px;
    align-items: center;
}

.btn-politica-popup {
    background: #ffffff;
    color: #1e293b;
    border: 1.5px solid #cbd5e1;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    width: auto;
    align-self: flex-start;
    transition: all 0.2s ease;
    box-shadow: none;
    margin-top: 6px;
}

.btn-politica-popup:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* =========================================
   VENTANA POP-UP INMERSIVA (MODAL PDF)
   ========================================= */
.modal-pdf-overlay {
    position: fixed !important; /* Fuerza a que flote sobre toda la pantalla */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.7); /* Fondo oscuro */
    backdrop-filter: blur(5px);
    z-index: 99999; /* Por encima de TODO */
    display: none; /* Se oculta hasta que el usuario hace clic */
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* La tarjeta blanca central */
.modal-pdf-contenido {
    background-color: #ffffff;
    width: 100%;
    max-width: 1000px; 
    height: 85vh; /* Ocupa casi todo el alto de la pantalla */
    border-radius: 20px; 
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

/* Cabecera (Título y botón X) */
.modal-pdf-header {
    padding: 20px 30px;
    background-color: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.modal-pdf-header h3 {
    margin: 0;
    color: #1e293b;
    font-size: 1.3rem;
    font-weight: 800;
    flex: 1;
}

/* Botón X exclusivo del modal PDF */
.btn-cerrar-pdf {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #64748b;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: bold;
    flex-shrink: 0;
    transition: all 0.2s ease;
    padding: 0;
    line-height: 1;
}

.btn-cerrar-pdf:hover {
    background: #fee2e2;
    color: #ef4444;
    border-color: #fca5a5;
}

/* Contenedor del PDF */
.modal-pdf-cuerpo {
    flex-grow: 1; /* Ocupa todo el espacio sobrante de la tarjeta blanca */
    width: 100%;
    height: 100%;
    background-color: #f1f5f9;
}

/* El iframe del documento PDF */
.modal-pdf-cuerpo iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* =========================================
   BURBUJA DERECHA (Criterios + Formulario)
   ========================================= */
.burbuja-contacto-der {
    padding: 40px 44px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Cuadrícula de Criterios (2x2 para ahorrar espacio vertical) */
.lista-criterios-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.lista-criterios-grid li {
    background: var(--kubi-25);
    padding: 16px;
    border-radius: 14px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--texto-suave);
    border-left: 4px solid var(--kubi-500);
}

.lista-criterios-grid li strong {
    color: #1e293b;
    font-size: 1rem;
    display: block;
    margin-bottom: 5px;
}

/* Separador elegante entre Criterios y Formulario */
.separador-burbuja {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 28px 0;
}

/* Diseño del Formulario */
.formulario-coe {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-grupo-doble {
    display: flex;
    gap: 15px;
}

.input-contacto {
    width: 100%;
    padding: 16px;
    border: 2px solid #d1d5db;
    background-color: #f8fafc;
    border-radius: 12px;
    font-size: 1rem;
    font-family: inherit;
    color: #1e293b;
    box-sizing: border-box;
    transition: all 0.3s;
}

.input-contacto:focus {
    outline: none;
    border-color: var(--kubi-400); /* ✏️ EDITADO: Borde verde amigable */
    background-color: white;
    box-shadow: 0 0 0 4px var(--kubi-50); /* Anillo de luz verde muy estético */
}

.textarea-contacto { resize: vertical; }

.btn-enviar-contacto {
    background: var(--kubi-500); /* ✏️ EDITADO: El botón ahora rige con el color principal */
    color: var(--kubi-950); /* Texto oscuro premium para un contraste perfecto AAA */
    border: none;
    padding: 16px;
    font-size: 1.05rem;
    font-weight: 800;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(0, 203, 117, 0.2);
}

.btn-enviar-contacto:hover {
    background: var(--kubi-600);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 179, 105, 0.3);
}

/* Subtítulo personalizado del formulario */
.subtitulo-formulario-coe {
    font-size: 0.95rem;
    color: var(--texto-suave);
    margin-bottom: 20px;
    line-height: 1.6;
}
.subtitulo-formulario-coe span {
    font-weight: 700;
    color: var(--kubi-700);
}

/* Tarjeta de identidad del remitente */
.identidad-remitente {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--kubi-25);
    border: 1px solid var(--kubi-100);
    border-radius: 14px;
    padding: 12px 16px;
    margin-bottom: 20px;
}
.identidad-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--kubi-500);
    color: #005C39;
    font-weight: 900;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.identidad-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.identidad-nombre {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--texto-oscuro);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.identidad-correo {
    font-size: 0.8rem;
    color: var(--texto-suave);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.identidad-badge {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--kubi-700);
    background: var(--kubi-50);
    border: 1px solid var(--kubi-100);
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Hint de ayuda bajo el textarea */
.hint-campo {
    display: block;
    font-size: 0.78rem;
    color: var(--texto-suave);
    margin-top: 6px;
    font-style: italic;
}

/* =========================================
   RESPONSIVIDAD (Móviles)
   ========================================= */
@media (max-width: 950px) {
    .grid-contacto-2col {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }
    .burbuja-contacto-izq {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
        padding: 28px 24px;
    }
    .burbuja-contacto-der {
        padding: 28px 24px;
    }
    .form-grupo-doble { flex-direction: column; }
    .lista-criterios-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .lista-criterios-grid { grid-template-columns: 1fr; }
}

/* =========================================
   COMPARTIDO: módulos de curso + páginas de herramientas
   (body.pagina-modulo y body.pagina-herramientas)
   Clases: .contenedor-modulo, .modulo-header, .badge-curso-badge,
           .bloque-texto, .card-super-equipo, .card-copiloto,
           .card-regla-oro, .card-3r, .navegacion-modulos-premium
   ========================================= */

.contenedor-modulo {
    max-width: 800px; /* Ancho óptimo para lectura */
    margin: 40px auto;
    padding: 0 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.modulo-header {
    margin-bottom: 30px;
}

.modulo-header h1 {
    font-size: 1.8rem;
    color: #1e293b;
    margin-bottom: 15px;
}

.linea-marca, .linea-purpura {
    border: none;
    height: 4px;
    background: var(--kubi-500);
    width: 100%;
    border-radius: 2px;
}

/* Cajas de Imagen Placeholder */
.caja-imagen-placeholder {
    background-color: var(--kubi-25); /* Verde menta súper suave en lugar de gris */
    border: 1px dashed var(--kubi-200); /* Borde sutil */
    width: 100%;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px; /* Más redondeado, más amigable */
    margin: 30px 0;
    overflow: hidden; /* Para que la imagen no rompa los bordes curvos */
}

.caja-imagen-placeholder span {
    color: #ef4444; /* Rojo llamativo como en el boceto */
    font-weight: 900;
    font-size: 1.8rem;
    text-transform: lowercase;
}
/* 🚨 REGLA PARA CONTROLAR LA IMAGEN DENTRO DE LA CAJA 🚨 */
.caja-imagen-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Hace que la imagen llene la caja perfectamente sin aplastarse ni estirarse */
    border-radius: 8px; /* OBLIGATORIO: Para que la imagen no se salga por las esquinas redondeadas de la caja */
}

/* Tipografía de lectura */
.bloque-texto {
    margin: 30px 0;
}

.subtitulo-modulo {
    color: #1e293b;
    font-size: 1.4rem;
    margin-bottom: 15px;
}

.bloque-texto p {
    color: #475569;
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 15px;
}

/* Grid Zig-Zag */
.grid-zigzag {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: stretch;
    margin: 40px 0;
}

.grid-img {
    height: 100%; /* Para que iguale el alto de la tarjeta */
    margin: 0;
}

/* Para alternar el orden en pantallas grandes */
.zigzag-invertido .grid-img {
    order: 1;
}
.zigzag-invertido .card-concepto {
    order: 2;
}

/* Tarjetas de Conceptos (Cerebro y Músculo) */
.card-concepto {
    padding: 25px;
    border-radius: 16px; /* Bordes más suaves */
    border: 1px solid transparent;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

.card-header-concepto {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.card-header-concepto h4 {
    margin: 0;
    font-size: 1.2rem;
}

.concepto-destacado {
    font-weight: 600;
    margin-bottom: 15px;
}

.card-concepto ul {
    padding-left: 20px;
    color: #475569;
    line-height: 1.6;
}

.card-concepto li {
    margin-bottom: 10px;
}

/* Variación IA (Azul/Celeste) */
.card-cerebro {
    background-color: var(--kubi-25);
    border-color: var(--kubi-100);
}
.card-cerebro h4, .card-cerebro .concepto-destacado { color: var(--kubi-900); }

/* Variación Automatización (Naranja/Amarillo suave) */
.card-musculo {
    background-color: var(--kubi-50);
    border-color: var(--kubi-200);
}
.card-musculo h4, .card-musculo .concepto-destacado { color: var(--kubi-950); }

/* =========================================
   CAJA DEL RETO INTERACTIVO (Entregable Textual)
   ========================================= */
.caja-reto {
    background: var(--kubi-25);
    border: 2px dashed var(--kubi-300);
    border-radius: 16px;
    padding: 30px;
    margin: 50px 0;
}

.reto-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.reto-header h3 {
    margin: 0;
    color: var(--kubi-900);
}

.reto-instrucciones {
    background: #ffffff;
    padding: 15px;
    border-radius: 8px;
    margin: 20px 0;
    font-size: 0.95rem;
    color: var(--texto-suave);
    border: 1px solid var(--borde-suave);
}

.reto-textarea {
    width: 100%;
    height: 150px;
    padding: 15px;
    border: 1px solid var(--kubi-200);
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    resize: vertical;
    margin-bottom: 15px;
    box-sizing: border-box;
    transition: all 0.3s;
}

.reto-textarea:focus {
    outline: none;
    border-color: var(--kubi-400);
    box-shadow: 0 0 0 4px var(--kubi-50); /* Resplandor KUBI al escribir */
}

.btn-kubi-lg {
    background: var(--kubi-500);
    color: var(--kubi-950); /* Texto oscuro para contraste AAA */
    border: none;
    padding: 14px 25px;
    font-size: 1.1rem;
    font-weight: 800;
    border-radius: 30px; /* Estilo pastilla moderno */
    cursor: pointer;
    transition: all 0.3s;
    width: 100%;
    max-width: 300px;
    display: block;
    margin: 0 auto;
    box-shadow: 0 4px 15px rgba(0, 203, 117, 0.2);
}

.btn-kubi-lg:hover:not(:disabled) {
    background: var(--kubi-600);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 179, 105, 0.3);
}

.btn-kubi-lg:disabled {
    background: #94a3b8;
    cursor: not-allowed;
}

.texto-sutil-progreso {
    text-align: center;
    color: var(--texto-suave);
    font-size: 0.85rem;
    margin-top: 15px;
    margin-bottom: 0;
}

/* =========================================
   ZONA DE SUBIDA DE ARCHIVOS
   ========================================= */
.caja-subida-archivo {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    padding: 20px;
    border: 2px dashed var(--kubi-300);
    border-radius: 8px;
    background: #ffffff;
}

.btn-subida-custom {
    background-color: var(--kubi-50);
    color: var(--kubi-800);
    border: 1px solid var(--kubi-200);
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-subida-custom:hover {
    background-color: var(--kubi-100);
    border-color: var(--kubi-400);
}

.texto-archivo-seleccionado {
    font-size: 0.85rem;
    color: var(--texto-suave);
    margin-top: 10px;
    margin-bottom: 0;
    font-style: italic;
}


/* =========================================
   POP-UP MODAL DE FELICITACIÓN (KUBI UX)
   ========================================= */
.modal-progreso-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(30, 41, 59, 0.6); /* Fondo oscuro translúcido */
    z-index: 2000; /* Por encima de la barra fija y el nav */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    backdrop-filter: blur(5px); /* Desenfoque elegante del fondo */
    animation: fadeInModal 0.25s ease-out;
}

.caja-felicitacion-modal {
    background: #ffffff;
    border: 3px solid var(--kubi-300); /* Borde verde KUBI */
    border-radius: 20px;
    padding: 40px 30px 33px 30px;
    max-width: 580px;
    width: 100%;
    position: relative;
    box-shadow: 0 20px 40px rgba(0, 92, 57, 0.12); /* Sombra teñida de verde oscuro */
    text-align: center;
    box-sizing: border-box;
    animation: scaleInModal 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* Botón flotante de cierre (Cruz) */
.btn-cerrar-modal {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--kubi-25);
    border: 1px solid var(--kubi-100);
    color: var(--texto-suave);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-weight: bold;
    font-size: 0.9rem;
    line-height: 1;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

/* Mantenemos el efecto hover de rotación y color rojo que configuramos */
.btn-cerrar-modal:hover {
    background: #fee2e2;
    color: #ef4444;
    border-color: #fca5a5;
    transform: rotate(90deg);
}

.icono-fiesta {
    font-size: 3.5rem;
    margin-bottom: 10px;
}

.caja-felicitacion-modal h3 {
    font-size: 1.8rem;
    color: var(--texto-oscuro);
    margin-top: 0;
    margin-bottom: 10px;
}

.texto-destacado-exito {
    font-weight: 700;
    color: var(--kubi-700);
    font-size: 1.1rem;
    margin-bottom: 15px;
}

/* Botones Premium del Modal */
.navegacion-modulos-premium {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-nav-outline {
    text-decoration: none;
    border: 2px solid var(--kubi-200);
    color: var(--kubi-700);
    padding: 10px 22px;
    border-radius: 30px; /* Bordes redondeados amigables */
    font-weight: bold;
    transition: all 0.2s;
}

.btn-nav-outline:hover {
    background: var(--kubi-25);
    border-color: var(--kubi-400);
    color: var(--kubi-900);
}

.btn-nav-solid {
    text-decoration: none;
    background: var(--kubi-500);
    color: var(--kubi-950);
    padding: 10px 24px;
    border-radius: 30px;
    font-weight: bold;
    transition: all 0.2s;
    box-shadow: 0 4px 10px rgba(0, 203, 117, 0.2);
}

.btn-nav-solid:hover {
    background: var(--kubi-600);
    color: white;
    transform: translateY(-2px);
}

/* Animaciones del Modal */
@keyframes fadeInModal {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes scaleInModal {
    from { transform: scale(0.92); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Botones de Navegación Premium */
.navegacion-modulos-premium {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    border-top: 1px solid var(--borde-suave); /* Línea divisoria súper limpia */
    padding-top: 30px;
}

/* Estilo base de los botones (Aumentamos la negrita) */
.btn-nav-outline, .btn-nav-solid {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Botón Volver (Color más vivo y oscuro) */
.btn-nav-outline {
    background-color: transparent;
    color: var(--texto-suave); 
    border: 2px solid var(--borde-suave); /* Borde gris neutro por defecto */
}

.btn-nav-outline:hover {
    background-color: var(--kubi-25);
    color: var(--kubi-800); /* Verde muy oscuro para máximo contraste */
    border-color: var(--kubi-400); /* Borde verde brillante al hacer hover */
}

/* Botón Siguiente (Sólido KUBI Principal) */
.btn-nav-solid:hover {
    background-color: var(--kubi-600); /* Un verde más intenso al pasar el mouse */
    transform: translateY(-2px); /* Se levanta un poquito */
    box-shadow: 0 6px 20px rgba(0, 203, 117, 0.4);
}

/* Comportamiento de las Flechas 🏹 */
.btn-flecha {
    display: inline-block; /* 🚨 CRÍTICO: Para que la flecha se mueva horizontalmente */
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

/* Animación: Flecha hacia la derecha en el botón Siguiente */
.btn-nav-solid:hover .btn-flecha {
    transform: translateX(5px);
}

/* Animación de la flecha del botón volver */
.btn-nav-outline:hover .btn-flecha {
    transform: translateX(-5px);
}

/* Responsividad para móviles */
@media (max-width: 768px) {
    .navegacion-modulos-premium {
        flex-direction: column-reverse; /* El botón principal queda arriba en móviles */
        gap: 15px;
    }
    
    .btn-nav-outline, .btn-nav-solid {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }
    
    .caja-felicitacion {
        padding: 30px 20px;
    }
}

/* =========================================
   NUEVAS TARJETAS: SÚPER-EQUIPO Y COPILOTO
   ========================================= */

/* Tarjeta 1: Estilo claro con borde izquierdo grueso */
.card-super-equipo, .card-copiloto {
    padding: 30px;
    border-radius: 16px;
    margin: 30px 0;
    box-shadow: 0 4px 20px rgba(0, 203, 117, 0.03);
    border: 1px solid var(--kubi-100);
}

.card-super-equipo {
    background: linear-gradient(135deg, #ffffff 0%, var(--kubi-25) 100%);
}

.card-super-equipo h4 {
    color: #1e293b;
    font-size: 1.25rem;
    margin-top: 0;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-super-equipo p {
    color: #334155;
    font-size: 1.05rem;
    margin-bottom: 15px;
}

.card-super-equipo ul {
    color: #334155;
    font-size: 1.05rem;
    padding-left: 20px;
    line-height: 1.6;
    margin: 0;
}

.card-super-equipo li {
    margin-bottom: 12px;
}

/* Tarjeta 2: Estilo oscuro, texto centrado */
.card-copiloto {
    background-color: #ffffff;
    border: 1px solid var(--kubi-200);
    border-left: 6px solid var(--kubi-500); /* La línea gruesa verde KUBI a la izquierda */
    border-radius: 12px;
    padding: 30px;
    margin: 40px 0;
    box-shadow: 0 4px 15px rgba(0, 203, 117, 0.05); /* Sombra elegante */
}

.card-copiloto h4 {
    color: var(--kubi-800); /* Verde muy oscuro y legible para el título */
    font-size: 1.3rem;
    margin-top: 0;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-copiloto p {
    color: var(--texto-suave); /* Gris oscuro que no cansa la vista */
    line-height: 1.7;
    font-size: 1.05rem;
    margin-bottom: 15px;
}

.card-copiloto p:last-child {
    margin-bottom: 0;
}

.card-copiloto strong {
    color: var(--texto-oscuro); /* Las negritas resaltan casi en negro */
    font-weight: 700;
}

/* Responsividad para móviles */
@media (max-width: 768px) {
    .card-super-equipo, .card-copiloto {
        padding: 25px 20px; /* Reducimos padding en pantallas pequeñas */
    }
    .card-copiloto p {
        max-width: 100%;
    }
}

/* =========================================
   DISEÑO MÓDULO 2 (Filtros, 3R, Candidato)
   ========================================= */

/* Tarjeta: Regla de Oro (Tono Ámbar/Advertencia amigable) */
.card-regla-oro {
    background-color: #fffbeb; /* Amarillo muy suave */
    border-left: 6px solid #f59e0b; /* Borde lateral ámbar */
    padding: 30px;
    border-radius: 8px;
    margin: 40px 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

.card-oro-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.icono-oro { font-size: 1.8rem; }

.card-oro-header h4 {
    color: #92400e;
    font-size: 1.25rem;
    margin: 0;
}

.cita-destacada {
    font-style: italic;
    font-weight: bold;
    color: #b45309;
    font-size: 1.15rem;
    margin-bottom: 15px;
}

.card-regla-oro ul {
    padding-left: 20px;
    margin-bottom: 15px;
    color: #451a03;
    line-height: 1.6;
}

.card-regla-oro p { color: #451a03; line-height: 1.6; margin-bottom: 10px; }

/* Grid a 2 Columnas (Core vs Logística) */
.grid-dos-columnas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin: 30px 0;
}

.card-core, .card-logistica {
    padding: 25px;
    border-radius: 12px;
    background: white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border-top: 4px solid transparent;
}

.borde-rojo { border-top-color: #ef4444; }
.borde-verde { border-top-color: #10b981; }

.card-core h4 { color: #b91c1c; font-size: 1.2rem; margin-top: 0; margin-bottom: 15px; }
.card-logistica h4 { color: #047857; font-size: 1.2rem; margin-top: 0; margin-bottom: 15px; }

.card-core p, .card-logistica p { color: #475569; line-height: 1.6; margin: 0; }

/* Grid a 3 Columnas (Las 3 R) */
.grid-tres-columnas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 30px 0 40px 0;
}

.card-3r {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 25px 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    transition: transform 0.3s ease;
    text-align: center;
}

.card-3r:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 203, 117, 0.12);
    border-color: var(--kubi-300);
}

.header-3r {
    margin-bottom: 15px;
}

.icono-3r {
    font-size: 2.2rem;
    display: block;
    margin-bottom: 10px;
}

.header-3r h4 {
    color: #1e293b;
    margin: 0 0 5px 0;
    font-size: 1.2rem;
}

.header-3r small {
    color: var(--kubi-600);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

.card-3r p { color: #475569; font-size: 0.95rem; line-height: 1.6; margin: 0; }

/* Herramientas especializadas M4 con video */
.lista-herramientas-m4 {
    display: flex;
    flex-direction: column;
    gap: 36px;
    margin: 30px 0 40px 0;
}
.item-herramienta-m4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}
.info-herramienta-m4.card-3r { padding: 16px 20px; }
.info-herramienta-m4.card-3r:hover { transform: none; }
.info-herramienta-m4 {
    text-align: left;
}
.info-herramienta-m4 .header-3r {
    text-align: left;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.info-herramienta-m4 .icono-3r { display: inline; margin-bottom: 0; }
.info-herramienta-m4 .header-3r small { margin-left: 6px; white-space: nowrap; }
.info-herramienta-m4 .header-3r h4 { flex: 1; min-width: 0; }
.video-herramienta-m4 {
    border-radius: 14px;
    overflow: hidden;
    align-self: stretch;
    background: #0f172a;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.video-herramienta-m4 iframe { width: 100%; height: 100%; border: none; display: block; }
.item-herramienta-m4--invertido .info-herramienta-m4 { order: 2; }
.item-herramienta-m4--invertido .video-herramienta-m4 { order: 1; }
@media (max-width: 768px) {
    .item-herramienta-m4 { grid-template-columns: 1fr; }
    .item-herramienta-m4--invertido .info-herramienta-m4 { order: 1; }
    .item-herramienta-m4--invertido .video-herramienta-m4 { order: 2; }
}

/* Tarjeta: El Candidato Ideal (Azul/Púrpura Elegante) */
.card-candidato-ideal {
    background: linear-gradient(135deg, #1e293b, #0f172a); /* Fondo oscuro premium */
    border-radius: 12px;
    padding: 30px;
    margin: 40px 0;
    text-align: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.candidato-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.icono-candidato { font-size: 1.8rem; }

.candidato-header h4 {
    color: #38bdf8; /* Azul claro llamativo */
    margin: 0;
    font-size: 1.3rem;
}

.texto-ejemplo {
    color: #f8fafc;
    font-size: 1.2rem;
    line-height: 1.7;
    margin: 0;
    font-weight: 500;
}

.texto-ejemplo em {
    color: #a78bfa; /* Púrpura suave para resaltar las etiquetas dentro de la cita */
    font-style: normal;
    background: rgba(167, 139, 250, 0.15);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Responsividad Módulo 2 */
@media (max-width: 768px) {
    .grid-dos-columnas, .grid-tres-columnas {
        grid-template-columns: 1fr; /* Todo en una sola columna en móvil */
    }
}

/* =========================================
   DISEÑO MÓDULO 3 (Balanza, Quick Win, Fórmula)
   ========================================= */

/* Tarjetas de Balanza (Impacto vs Esfuerzo) */
.card-balanza {
    padding: 25px;
    border-radius: 12px;
    background: white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border-top: 4px solid transparent;
}

.card-balanza.borde-azul { border-top-color: #3b82f6; }
.card-balanza.borde-naranja { border-top-color: #f97316; }

.card-balanza h4 {
    color: #1e293b;
    font-size: 1.2rem;
    margin-top: 0;
    margin-bottom: 15px;
}

.card-balanza p {
    color: #475569;
    line-height: 1.6;
    margin: 0;
}

/* Tarjeta Ejemplo Quick Win (Verde) */
.card-ejemplo-verde {
    background-color: #ecfdf5; /* Verde esmeralda muy claro */
    border-left: 6px solid #10b981;
    border-radius: 8px;
    padding: 25px;
    margin: 40px 0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.ejemplo-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.icono-ejemplo { font-size: 1.5rem; }

.card-ejemplo-verde h4 {
    color: #065f46;
    font-size: 1.2rem;
    margin: 0;
}

.card-ejemplo-verde p {
    color: #064e3b;
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
    font-style: italic;
}

/* Caja de Fórmula Reveladora */
.card-formula {
    background: linear-gradient(to right, #f8fafc, #f1f5f9);
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    margin: 30px 0;
    position: relative;
}

.etiqueta-formula {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #7C3AED;
    color: white;
    padding: 4px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 1px;
}

.math-formula {
    font-size: 1.3rem;
    color: #1e293b;
    font-weight: 600;
    display: inline-block;
    background: white;
    padding: 15px 25px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.math-formula small {
    color: #64748b;
    font-weight: normal;
}

.math-formula .signo {
    color: #7C3AED;
    font-weight: 900;
    margin: 0 10px;
}

/* Mejoras para el Formulario del Reto */
.form-reto {
    margin-top: 25px;
}

.grupo-input {
    margin-bottom: 25px;
    text-align: left;
}

.grupo-input label {
    display: block;
    font-weight: bold;
    color: #1e293b;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.grupo-input small {
    display: block;
    color: #64748b;
    margin-bottom: 10px;
    font-size: 0.95rem;
}

.reto-input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    box-sizing: border-box;
    transition: 0.3s;
}

.reto-input:focus {
    outline: none;
    border-color: #7C3AED;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.grid-evaluacion {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.eval-box {
    background: white;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

/* Responsividad para móviles */
@media (max-width: 768px) {
    .math-formula {
        font-size: 1rem;
        padding: 15px 10px;
    }
    .grid-evaluacion {
        grid-template-columns: 1fr;
    }
}


/* =========================================
   TIPOGRAFÍA DE LECTURA (Encabezado)
   ========================================= */
.bloque-texto {
    margin: 30px 0 40px 0; /* Un poco de margen inferior antes de la cuadrícula */
    text-align: left; /* Asegura alineación a la izquierda */
    max-width: 900px; /* Limita el ancho del texto para una lectura cómoda */
}

.subtitulo-modulo {
    color: #1e293b;
    font-size: 1.6rem; /* Un poco más grande para darle presencia */
    margin-bottom: 15px;
    font-weight: 800;
}

.bloque-texto p {
    color: #475569;
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 15px;
}

/* =========================================
   MÓDULO: EL PROMPT PERFECTO (AJUSTADO A 800PX)
   ========================================= */

/* 1. Contenedor principal alineado con el resto de tus módulos */
.contenedor-prompt-asimetrico {
    margin: 30px 0;
    text-align: left;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* 2. Respetamos tu Tipografía de lectura para el encabezado */
.bloque-texto {
    margin: 30px 0;
    text-align: left;
}

.subtitulo-modulo {
    color: #1e293b;
    font-size: 1.4rem;
    margin-bottom: 15px;
    font-weight: bold;
}

.bloque-texto p {
    color: #475569;
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 15px;
}

/* 3. Cuadrícula ajustada para el ancho de 800px */
.grid-prompt-asimetrico {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 25px; 
    margin-top: 20px;
    align-items: stretch; /* Hace que la caja derecha copie la altura de la izquierda */
}
/* --- COLUMNA IZQUIERDA (Tarjetas de reglas) --- */
.columna-reglas-prompt {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Separación más ajustada entre tarjetas */
}

.card-regla-mini {
    background: #f8fafc; 
    border-radius: 12px; /* Bordes un poco más sutiles para este tamaño */
    padding: 20px;
    border-left: 5px solid transparent; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    transition: transform 0.2s ease;
}

.card-regla-mini:hover {
    transform: translateX(3px); 
}

/* Colores de acento para cada regla */
.borde-prompt-1 { border-left-color: #3b82f6; } 
.borde-prompt-2 { border-left-color: #10b981; } 
.borde-prompt-3 { border-left-color: #f59e0b; } 
.borde-prompt-4 { border-left-color: #7C3AED; }

.regla-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.icono-prompt { font-size: 1.3rem; }

.regla-header h4 {
    color: #1e293b;
    margin: 0;
    font-size: 1.05rem;
    font-weight: bold;
}

.card-regla-mini p {
    color: #475569;
    margin: 0 0 10px 0;
    font-size: 0.95rem;
    line-height: 1.4;
}

.prompt-ejemplo-mini {
    background: #ffffff;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    font-size: 0.85rem;
    color: #334155;
    line-height: 1.5;
}

.prompt-ejemplo-mini em {
    font-style: normal;
    color: #64748b;
}

/* --- COLUMNA DERECHA (Imagen) --- */
.columna-imagen-prompt {
    background-color: transparent; 
    border-radius: 16px; 
    box-shadow: 0 8px 20px rgba(0,0,0,0.06); 
    position: relative; 
    overflow: hidden;
}

.imagen-prompt-destacada {
    position: absolute;
    
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    
    width: 100%; 
    height: 100%;
    
    object-fit: contain; 
}
/* =========================================
   RESPONSIVIDAD (Móviles)
   ========================================= */
@media (max-width: 768px) {
    .grid-prompt-asimetrico {
        grid-template-columns: 1fr; /* Apila las tarjetas y la imagen en celulares */
    }
    
    .columna-imagen-prompt {
        min-height: 250px; 
    }
}


/* Botón Custom de Subida de Archivos */
.caja-subida-archivo {
    text-align: center;
    margin-top: 30px;
    padding: 30px;
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
}

.input-archivo-oculto {
    display: none; /* Ocultamos el input feo por defecto del navegador */
}

.btn-subida-custom {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: white;
    color: var(--kubi-700);
    border: 2px solid var(--kubi-400);
    padding: 12px 25px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.btn-subida-custom:hover {
    background: var(--kubi-500);
    color: var(--kubi-950);
    transform: translateY(-2px);
}

.texto-archivo-seleccionado {
    margin-top: 15px;
    font-size: 0.95rem;
    color: #64748b;
}

.chip-archivo-seleccionado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    color: #065f46;
    border-radius: 20px;
    padding: 5px 10px 5px 8px;
    font-size: 0.82rem;
    font-weight: 500;
    max-width: 100%;
    margin-top: 8px;
}

.chip-archivo-nombre {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.chip-archivo-cancelar {
    background: none;
    border: none;
    cursor: pointer;
    color: #059669;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 0 0 2px;
    font-weight: bold;
    transition: color 0.15s;
}

.chip-archivo-cancelar:hover {
    color: #dc2626;
}

/* Responsividad para móviles */
@media (max-width: 768px) {
    .grid-prompt-4 {
        grid-template-columns: 1fr; /* Una columna en móvil */
    }
    .card-workspace-studio {
        padding: 25px 15px;
    }
}

/* =========================================
   GALERÍA DE PROMPTS (CUADRÍCULA 2x2)
   ========================================= */

.header-galeria {
    margin-bottom: 30px;
}

/* 1. Contenedor Grid (Reemplaza al carrusel) */
.grid-prompts {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Crea exactamente 2 columnas del mismo tamaño */
    gap: 30px; /* Separación agradable entre tarjetas */
    width: 100%;
}

/* 2. Tarjetas de Prompt */
.card-prompt-ejemplo {
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    border-top: 5px solid var(--kubi-500);
    height: 100%; /* Para que todas midan lo mismo en su fila */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición suave */
}

/* Efecto hover interactivo */
.card-prompt-ejemplo:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 203, 117, 0.15);
}

.prompt-card-header {
    display: flex;
    align-items: center;
    padding: 20px 25px;
}

.prompt-card-header h5 {
    margin: 0;
    font-size: 1.3rem;
    color: #1e293b;
    font-weight: 800;
    margin-left: 12px;
}

.prompt-icon {
    font-size: 1.8rem;
}

/* Caja de Prompt Estilo "Terminal/Consola" */
.caja-prompt-interactiva {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    border-radius: 0 0 16px 16px;
    padding: 25px;
    position: relative;
    flex-grow: 1; /* Empuja el contenido para llenar el alto de la tarjeta */
}

.texto-prompt {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #334155;
    margin-top: 35px; /* Espacio para que el botón no tape el texto */
}

/* Etiquetas coloridas para la fórmula */
.tag-prompt {
    color: var(--kubi-800);
    font-weight: 800;
    background: var(--kubi-50);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.95rem;
}

/* =========================================
   RESPONSIVIDAD (Celulares)
   ========================================= */
@media (max-width: 900px) {
    .grid-prompts {
        grid-template-columns: 1fr; /* En pantallas pequeñas, pasa de 2 columnas a 1 sola (una debajo de la otra) */
        gap: 20px;
    }
}

/* =========================================
   DISEÑO MÓDULO 1 - CURSO 2 (Workspace Studio)
   ========================================= */

/* Etiqueta indicadora del Curso 2 */
.badge-curso-badge {
    display: inline-block;
    background: var(--kubi-50);  /* Fondo verde clarito KUBI */
    color: var(--kubi-800);      /* Texto verde oscuro KUBI para contraste alto */
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
    border: 1px solid var(--kubi-200); /* Borde sutil para darle forma */
}

/* Tarjetas de Beneficios (Grid) */
.card-beneficio-ws {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 30px 25px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-beneficio-ws:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(124, 58, 237, 0.08); /* Sombra púrpura */
    border-color: #c4b5fd;
}

.icono-beneficio {
    font-size: 2.2rem;
    display: block;
    margin-bottom: 15px;
}

.card-beneficio-ws h4 {
    color: #1e293b;
    font-size: 1.25rem;
    margin: 0 0 10px 0;
}

.card-beneficio-ws p {
    color: #475569;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

/* Diseño Lógica: Trigger -> Action */
.contenedor-logica-automatizacion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 30px 0;
}

.caja-logica {
    flex: 1;
    background: white;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    position: relative;
    border-top: 5px solid;
}

.caja-trigger { border-top-color: #f59e0b; } /* Ámbar para el Trigger */
.caja-action { border-top-color: #10b981; }  /* Verde para la Acción */

.logica-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.logica-icon { font-size: 1.5rem; }

.caja-logica h5 {
    font-size: 1.2rem;
    color: #1e293b;
    margin: 0;
}

.caja-logica p {
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 15px;
}

.logica-ejemplo {
    background: #f8fafc;
    border-left: 3px solid #cbd5e1;
    padding: 10px 15px;
    font-size: 0.9rem;
    color: #334155;
    border-radius: 0 4px 4px 0;
}

.flecha-conexion {
    font-size: 2.5rem;
    color: #94a3b8;
    font-weight: bold;
}

.texto-centrado {
    text-align: center;
    color: #7C3AED;
    font-size: 1.1rem;
}

/* Enlace destacado en instrucciones */
.enlace-destacado {
    color: #3b82f6;
    font-weight: bold;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.enlace-destacado:hover { color: #2563eb; }

/* Responsividad para la lógica Trigger->Action */
@media (max-width: 768px) {
    .contenedor-logica-automatizacion {
        flex-direction: column;
    }
    .flecha-conexion {
        transform: rotate(90deg); /* La flecha apunta hacia abajo en celular */
        margin: -10px 0;
    }
}

/* =========================================
   REPRODUCTOR DE YOUTUBE EMBEBIDO
   ========================================= */

.contenedor-video-youtube {
    width: 100%;
    max-width: 800px; /* Mantiene el mismo ancho de lectura del texto */
    margin: 40px auto; /* Lo separa del párrafo de arriba */
    border-radius: 20px; /* Bordes suaves estilo burbuja */
    overflow: hidden; /* Corta las esquinas del iframe para respetar el borde */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Sombra elegante */
    
    /* 🚨 Aspect Ratio asegura que el video no se aplaste en celulares 🚨 */
    aspect-ratio: 16 / 9;
    background-color: #1e293b; /* Color oscuro mientras carga el video */
}

.contenedor-video-youtube iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* =========================================
   MÓDULO 2 - CURSO 2: TU GUÍA PERSONAL (Ejemplo CREA Destacado)
   ========================================= */

.tarjeta-ejemplo-crea-destacada {
    background-color: #f8fafc; /* Fondo muy suave y limpio */
    border: 1px solid #e2e8f0;
    border-radius: 25px; /* Bordes amigables y redondeados */
    padding: 35px 40px;
    margin-top: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.header-ejemplo-crea {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.icono-bombilla {
    font-size: 1.8rem;
    background-color: #fffbeb; /* Fondo amarillo muy pálido para la bombilla */
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.header-ejemplo-crea h4 {
    color: #1e293b;
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0;
}

/* Caja simulando un chat o un prompt escrito */
.texto-ejemplo-crea {
    background-color: #ffffff;
    padding: 20px 25px;
    border-radius: 15px;
    border-left: 5px solid var(--kubi-500, #00CB75); /* Acento visual verde de la marca */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
    margin-bottom: 20px;
}

.texto-ejemplo-crea p {
    color: #334155;
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
    font-style: italic; /* Le da un toque de cita o texto escrito */
}

.texto-ejemplo-crea strong {
    color: var(--kubi-700, #00975B); /* Resalta las partes de la fórmula (C, R, E, A) en verde oscuro */
    font-style: normal;
    background-color: var(--kubi-50, #E6FFF4);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9rem;
    margin: 0 2px;
}

.nota-cierre-crea {
    color: #64748b;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 25px;
}

/* Botón de Repaso Amigable */
.btn-repaso-crea {
    display: inline-block;
    background-color: white;
    color: var(--kubi-700, #00975B);
    border: 2px solid var(--kubi-200, #80F0C5);
    padding: 12px 25px;
    border-radius: 30px; /* Estilo píldora */
    font-size: 0.95rem;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.2s ease;
    text-align: center;
}

.btn-repaso-crea:hover {
    background-color: var(--kubi-50, #E6FFF4);
    border-color: var(--kubi-400, #26D092);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 203, 117, 0.1);
}

/* Responsividad para móviles */
@media (max-width: 768px) {
    .tarjeta-ejemplo-crea-destacada {
        padding: 25px 20px;
    }
    .btn-repaso-crea {
        width: 100%; /* Botón de ancho completo en celulares */
        box-sizing: border-box;
    }
}

/* Header del Flujo 1 */
.header-flujo {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    color: white;
    padding: 30px;
    border-radius: 12px;
    margin: 50px 0 30px 0;
    text-align: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.header-flujo h2 {
    color: #38bdf8;
    margin: 0 0 15px 0;
}

.header-flujo p {
    color: #cbd5e1;
    margin: 0;
    font-size: 1.05rem;
}

/* Fases Paso a Paso */
.contenedor-fases {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
}

.card-fase {
    display: flex;
    background: white;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    border: 1px solid #e2e8f0;
    gap: 20px;
}

.fase-numero {
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    background: #e2e8f0;
    color: #475569;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 900;
}

.bg-trigger { background: #fef3c7; color: #d97706; }
.bg-action { background: #d1fae5; color: #059669; }
.bg-purpura { background: #ede9fe; color: #7C3AED; }

.fase-detalle {
    flex-grow: 1;
}

.fase-detalle h4 {
    margin: 0 0 10px 0;
    font-size: 1.25rem;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 10px;
}

.badge-herramienta {
    font-size: 0.8rem;
    background: #f1f5f9;
    padding: 3px 8px;
    border-radius: 12px;
    color: #475569;
    font-weight: bold;
}

.fase-nota {
    font-size: 0.9rem;
    color: #64748b;
    font-style: italic;
    margin-bottom: 15px;
}

.fase-detalle ul {
    margin: 0;
    padding-left: 20px;
    color: #334155;
    line-height: 1.6;
}

.fase-detalle li {
    margin-bottom: 10px;
}
.fase-detalle li strong {
    color: #1e293b;
}

/* Caja Prueba en la Vida Real */
.caja-prueba-real {
    background: #ecfdf5;
    border: 2px dashed #10b981;
    border-radius: 12px;
    padding: 25px 30px;
    margin: 30px 0;
}

.prueba-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.prueba-icon { font-size: 1.5rem; }

.caja-prueba-real h4 {
    color: #065f46;
    margin: 0;
    font-size: 1.2rem;
}

.caja-prueba-real p {
    color: #064e3b;
    line-height: 1.6;
    margin: 0;
}

/* Responsividad para Móviles */
@media (max-width: 768px) {
    .grid-crea {
        grid-template-columns: 1fr;
    }
    .card-fase {
        flex-direction: column;
        gap: 15px;
    }
    .fase-numero {
        width: 40px;
        height: 40px;
        font-size: 1.3rem;
    }
}

/* =========================================
   DISEÑO MÓDULO 3 - CURSO 2 (IA, Forms, Gmail)
   ========================================= */

/* Nuevos colores para los números de Fase */
.bg-forms {
    background: #f3e8ff; 
    color: #7e22ce; /* Morado de Google Forms */
}

.bg-gmail {
    background: #fee2e2;
    color: #b91c1c; /* Rojo de Gmail */
}

/* Efecto Mágico para la Fase de Inteligencia Artificial */
.bg-ia-magic {
    background: linear-gradient(135deg, #3b82f6, #ec4899); /* Degradado Azul a Rosa */
    color: white;
    box-shadow: 0 4px 10px rgba(236, 72, 153, 0.3);
}

/* Tarjeta especial para Tip de Mantenimiento */
.card-tip-mantenimiento {
    background: #f1f5f9;
    border-left: 6px solid #64748b; /* Gris azulado corporativo */
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.tip-mantenimiento-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.tip-icon {
    font-size: 1.8rem;
}

.tip-mantenimiento-header h4 {
    color: #334155;
    font-size: 1.25rem;
    margin: 0;
}

.card-tip-mantenimiento p {
    color: #475569;
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

.card-tip-mantenimiento ul {
    padding-left: 20px;
    color: #334155;
    line-height: 1.6;
    margin: 0;
}

.card-tip-mantenimiento li {
    margin-bottom: 10px;
}

.card-tip-mantenimiento li strong {
    color: #0f172a;
}

/* =========================================
   DISEÑO MÓDULO 4 - CURSO 2 (Línea de Tiempo y Graduación)
   ========================================= */

/* Línea de Tiempo (Timeline Vertical) */
.timeline-ruta {
    position: relative;
    padding-left: 45px;
    margin: 40px 0;
}

/* La línea vertical que conecta todo */
.timeline-ruta::before {
    content: '';
    position: absolute;
    left: 17px;
    top: 20px;
    bottom: 20px;
    width: 3px;
    background: #cbd5e1;
    border-radius: 3px;
    z-index: 0;
}

.timeline-item {
    position: relative;
    margin-bottom: 40px;
    background: white;
    padding: 25px 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    border: 1px solid #e2e8f0;
    z-index: 1;
    transition: transform 0.3s ease;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-item:hover {
    transform: translateX(5px);
    border-color: #c4b5fd;
}

/* Iconos circulares que flotan sobre la línea */
.timeline-icon {
    position: absolute;
    left: -45px;
    top: 20px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 0 0 4px #f8fafc; /* Simula un borde hueco alrededor de la línea */
    z-index: 2;
}

.timeline-contenido h4 {
    color: #1e293b;
    font-size: 1.25rem;
    margin: 0 0 10px 0;
}

.timeline-contenido p {
    color: #475569;
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

.timeline-contenido ul {
    padding-left: 20px;
    color: #475569;
    line-height: 1.6;
}

.timeline-contenido li {
    margin-bottom: 8px;
}

.timeline-ejemplo {
    background: #f8fafc;
    border-left: 4px solid #7C3AED;
    padding: 12px 15px;
    font-size: 0.95rem;
    color: #334155;
    border-radius: 0 8px 8px 0;
    margin-bottom: 15px;
}

/* Caja de Graduación Premium */
.caja-graduacion {
    background: linear-gradient(135deg, #f5f3ff 0%, #faf5ff 100%);
    border: 2px dashed #c084fc;
    border-radius: 16px;
    padding: 40px;
    margin: 60px 0;
    text-align: center;
}

.graduacion-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 5px;
}

.graduacion-icono {
    font-size: 2.5rem;
    animation: flotar 3s ease-in-out infinite;
}

.caja-graduacion h3 {
    color: #7C3AED;
    font-size: 1.8rem;
    margin: 0;
}

.graduacion-subtitulo {
    color: #9333ea;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1rem;
    margin-bottom: 20px;
}

.caja-graduacion > p {
    color: #334155;
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto 20px auto;
}

/* Estilo de Cierre "Oro" */
.caja-oro {
    background: linear-gradient(to bottom, #ffffff, #fffbeb);
    border-color: #fde68a;
    box-shadow: 0 10px 30px rgba(245, 158, 11, 0.1);
}

.caja-oro .texto-destacado-exito {
    color: #b45309;
}

.btn-oro {
    background: linear-gradient(to right, #eab308, #d97706);
    color: white !important;
    box-shadow: 0 4px 15px rgba(217, 119, 6, 0.3);
}

.btn-oro:hover {
    background: linear-gradient(to right, #ca8a04, #b45309);
    box-shadow: 0 6px 20px rgba(217, 119, 6, 0.4);
}

/* Responsividad para la Línea de Tiempo */
@media (max-width: 768px) {
    .timeline-ruta {
        padding-left: 35px;
    }
    .timeline-ruta::before {
        left: 12px;
    }
    .timeline-icon {
        left: -35px;
        width: 30px;
        height: 30px;
        font-size: 1rem;
    }
    .timeline-item {
        padding: 20px;
    }
    .caja-graduacion {
        padding: 25px 20px;
    }
}

/* ============================================================
   STAT CARDS — Programa Top Automators
   ============================================================ */

.stat-programa {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 24px;
    background: var(--kubi-25);
    border-radius: 10px;
}

.stat-programa:first-child {
    border-right: 1.5px solid var(--kubi-100);
    border-radius: 10px 0 0 10px;
}

.stat-programa:last-child {
    border-radius: 0 10px 10px 0;
}

.stat-programa-numero {
    font-size: 3.2rem;
    font-weight: 900;
    color: var(--kubi-500);
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -1px;
}

.stat-programa-etiqueta {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 10px;
}

.stat-programa-desc {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.55;
    max-width: 260px;
    margin: 0 auto;
}

@media (max-width: 600px) {
    .fomo-grid-main {
        grid-template-columns: 1fr;
    }
    .stat-programa {
        padding: 24px 16px;
    }
    .stat-programa + .stat-programa {
        border-top: 1.5px solid var(--kubi-100);
    }
    .stat-programa:first-child {
        border-right: none;
        border-radius: 10px 10px 0 0;
    }
    .stat-programa:last-child {
        border-radius: 0 0 10px 10px;
    }
}

/* ============================================================
   BANNER BIENVENIDA HUB — ¿Qué encontrarás aquí?
   ============================================================ */

.seccion-doble-banner {
    padding: 40px 4% 20px;
}

.bienvenida-banner-card {
    background: linear-gradient(135deg, var(--kubi-25) 0%, #ffffff 60%, #f0fdf8 100%);
    border: 1.5px solid var(--kubi-100);
    border-radius: 24px;
    padding: 52px 56px;
    box-shadow: 0 4px 32px rgba(0, 203, 117, 0.08), 0 1px 4px rgba(0,0,0,0.04);
    position: relative;
    overflow: hidden;
}

.bienvenida-banner-card::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(0,203,117,0.10) 0%, transparent 70%);
    pointer-events: none;
}

.bienvenida-inner {
    position: relative;
    z-index: 1;
}

.bienvenida-encabezado {
    text-align: center;
    margin-bottom: 44px;
}

.bienvenida-tag {
    display: inline-block;
    background: var(--kubi-500);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 16px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.bienvenida-titulo {
    font-size: 2rem;
    font-weight: 800;
    color: var(--kubi-950);
    margin: 0 0 10px;
    line-height: 1.2;
}

.bienvenida-subtitulo {
    font-size: 1.05rem;
    color: #475569;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
}

.bienvenida-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.bienvenida-item {
    background: #ffffff;
    border: 1px solid var(--kubi-100);
    border-radius: 16px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    transition: box-shadow 0.2s, transform 0.2s;
}

.bienvenida-item:hover {
    box-shadow: 0 6px 24px rgba(0, 203, 117, 0.14);
    transform: translateY(-3px);
}

.bienvenida-item-icono {
    width: 52px;
    height: 52px;
    background: var(--kubi-25);
    border: 1.5px solid var(--kubi-100);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
}

.bienvenida-item-texto h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--kubi-900);
    margin: 0 0 6px;
}

.bienvenida-item-texto p {
    font-size: 0.88rem;
    color: #64748b;
    margin: 0;
    line-height: 1.55;
}

.bienvenida-item-texto strong {
    color: var(--kubi-700);
}

.bienvenida-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.btn-bienvenida-primario {
    display: inline-block;
    background: var(--kubi-500);
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 13px 32px;
    border-radius: 50px;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
}

.btn-bienvenida-primario:hover {
    background: var(--kubi-600);
    transform: translateY(-1px);
}

.btn-bienvenida-secundario {
    display: inline-block;
    background: transparent;
    color: var(--kubi-700);
    font-size: 0.95rem;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 50px;
    border: 2px solid var(--kubi-300);
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}

.btn-bienvenida-secundario:hover {
    background: var(--kubi-25);
    border-color: var(--kubi-500);
}

@media (max-width: 1024px) {
    .bienvenida-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .bienvenida-banner-card {
        padding: 32px 20px;
    }
    .bienvenida-titulo {
        font-size: 1.5rem;
    }
    .bienvenida-grid {
        grid-template-columns: 1fr;
    }
}


/* ================================================
   Herramientas — Sección unificada (herramientas.html)
   ================================================ */
.seccion-herramientas-unificada {
    padding: 0;
}

.herramientas-titulo-unificado {
    text-align: center;
    font-size: 2rem;
    font-weight: 800;
    color: var(--kubi-950);
    margin: 0 0 40px 0;
}

.grid-herramientas-unificado {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.card-herramienta-nueva {
    background: white;
    border: 1.5px solid var(--kubi-100);
    border-radius: 16px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.card-herramienta-nueva:hover {
    box-shadow: 0 6px 24px rgba(0, 203, 117, 0.13);
    border-color: var(--kubi-300);
}

.herramienta-nueva-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.herramienta-nueva-icono {
    font-size: 1.8rem;
    background: var(--kubi-25);
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    flex-shrink: 0;
}

.herramienta-nueva-nombre {
    font-size: 1rem;
    font-weight: 800;
    color: var(--kubi-950);
    margin: 0;
}

.herramienta-nueva-desc {
    font-size: 0.9rem;
    color: #475569;
    margin: 0;
    line-height: 1.5;
    flex: 1;
}

.btn-abrir-herramienta-nueva {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background: var(--kubi-500);
    color: white;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease;
    margin-top: auto;
}

.btn-abrir-herramienta-nueva:hover {
    background: var(--kubi-700);
    color: white;
}

.card-herramienta-cta {
    grid-column: span 2;
    background: linear-gradient(135deg, var(--kubi-25) 0%, #f0fdf4 100%);
    border: 2px solid var(--kubi-200);
    border-radius: 16px;
    padding: 28px 36px;
    display: flex;
    align-items: center;
    gap: 24px;
    text-decoration: none;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.card-herramienta-cta:hover {
    box-shadow: 0 8px 32px rgba(0, 203, 117, 0.18);
    border-color: var(--kubi-400);
}

.cta-herramienta-icono {
    font-size: 2.5rem;
    flex-shrink: 0;
}

.cta-herramienta-texto {
    flex: 1;
}

.cta-herramienta-titulo {
    font-size: 1rem;
    font-weight: 800;
    color: var(--kubi-900);
    margin: 0 0 4px 0;
}

.cta-herramienta-subtexto {
    font-size: 0.85rem;
    color: var(--kubi-700);
    margin: 0;
}

.cta-herramienta-flecha {
    font-size: 1.6rem;
    color: var(--kubi-500);
    font-weight: 700;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .grid-herramientas-unificado {
        grid-template-columns: repeat(2, 1fr);
    }
    .card-herramienta-cta {
        grid-column: span 2;
    }
}

@media (max-width: 500px) {
    .grid-herramientas-unificado {
        grid-template-columns: 1fr;
    }
    .card-herramienta-cta {
        grid-column: span 1;
        flex-direction: column;
        text-align: center;
    }
}

/* ── Módulos bloqueados (cursos.html) ── */
.curso-card-square.modulo-bloqueado {
    filter: grayscale(100%);
    opacity: 0.55;
}
.curso-card-square.modulo-bloqueado .btn-outline-purpura {
    cursor: not-allowed;
}

/* Header de sección de Curso 2 bloqueado */
.cabecera-curso-bloqueado {
    filter: grayscale(100%);
    opacity: 0.5;
}

/* Toast de aviso — módulo/curso bloqueado */
.aviso-modulo-bloqueado {
    position: fixed;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #ffffff;
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    z-index: 9999;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    max-width: 480px;
    text-align: center;
    opacity: 1;
    transition: opacity 0.4s ease;
    animation: bloqueoFadeIn 0.3s ease;
}
@keyframes bloqueoFadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(16px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* ===== INICIO: NUEVA PAGINA DE INICIO (index.html) ===== */

/* --- Saludo de bienvenida --- */
.seccion-saludo {
    padding: 48px 60px 32px;
    background: #ffffff;
}
.saludo-titulo {
    font-size: 2.4rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 8px;
}
.saludo-titulo .saludo-nombre {
    color: #00CB75;
}
.saludo-subtitulo {
    font-size: 1.15rem;
    color: #64748b;
    margin: 0;
    font-weight: 500;
}

.saludo-descripcion {
    margin-top: 10px;
    font-size: 1rem;
    color: #475569;
    line-height: 1.75;
    font-weight: 400;
}

.saludo-descripcion strong {
    color: #0f172a;
    font-weight: 600;
}

.desc-highlight {
    color: #00CB75;
    font-weight: 700;
}

/* --- Secciones Programas y Herramientas --- */
.seccion-programas {
    padding: 40px 60px 60px;
    background: #ffffff;
}
.seccion-herramientas-inicio {
    padding: 40px 60px 60px;
    background: #ffffff;
}
.seccion-titulo-seccion {
    font-size: 1.8rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: 0.06em;
    margin: 0 0 32px;
    text-transform: uppercase;
}

/* --- Banners de programas apilados verticalmente --- */
.programas-banners-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* --- Banner base --- */
.programa-banner {
    border-radius: 20px;
    overflow: hidden;
    min-height: 220px;
    position: relative;
    display: flex;
    align-items: flex-end;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.programa-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.18);
}
.programa-banner-contenido {
    position: relative;
    z-index: 2;
    padding: 28px 32px;
    width: 100%;
}
.programa-banner-contenido h3 {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin: 0;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.programa-banner-subtitulo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0 !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,0.75) !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4) !important;
}
.programa-banner-subtitulo::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 14px;
    background: var(--kubi-500);
    border-radius: 2px;
    flex-shrink: 0;
}
.programa-banner-contenido p {
    font-size: 1.05rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
    line-height: 1.5;
}

/* Overlay base — cubre el 100% del banner con posición absoluta */
.programa-banner .hero-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
}

/* Banner TOP AUTOMATORS */
.banner-top-automators {
    background-image: url('../img/Fondo_Top_Automators_Prestamype.webp');
    background-size: cover;
    background-position: center;
}
.banner-top-automators .hero-overlay {
    background: linear-gradient(to right, rgba(15, 23, 42, 0.82) 0%, rgba(15, 23, 42, 0.35) 100%);
}

/* Banner DATA NOVA */
.banner-data-nova {
    background-image: url('../img/fondo_datanova.webp');
    background-size: cover;
    background-position: center;
    cursor: default !important; /* AÑADIDO: Quita la manito de clic */
}
.banner-data-nova:hover {
    transform: none !important; 
    box-shadow: none !important;
}

.banner-data-nova .hero-overlay {
    background: linear-gradient(to right, rgba(15, 23, 42, 0.82) 0%, rgba(15, 23, 42, 0.35) 100%);
}

/* Banner PROXIMAMENTE */
.banner-proximamente {
    background-image: url('../img/cursos-proximos.webp');
    background-size: cover;
    background-position: center;
    align-items: center;
    cursor: default !important;
}
/* AÑADIDO: Este bloque bloquea cualquier movimiento o sombra al pasar el mouse */
.banner-proximamente:hover {
    transform: none !important;
    box-shadow: none !important;
}

.banner-proximamente .hero-overlay {
    background: linear-gradient(to right, rgba(15, 23, 42, 0.88) 0%, rgba(15, 23, 42, 0.45) 100%);
}
.banner-proximamente .programa-banner-contenido p {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1.3;
}

/* Banners bloqueados - escala de grises */
.banner-data-nova,
.banner-proximamente {
    filter: grayscale(100%);
    opacity: 0.72;
}


/* --- Grid herramientas 4 col en index --- */
.herramientas-inicio-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.herramientas-inicio-grid .herramienta-card-destacada {
    grid-column: span 2;
}

/* --- Banners herramientas (index) --- */
.herramienta-banner-card {
    border-radius: 16px;
    overflow: hidden;
    min-height: 160px;
    position: relative;
    display: flex;
    align-items: flex-start;
    background: #0f1a14;
    cursor: pointer;
    user-select: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.herramienta-banner-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
.herramienta-banner-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.herramienta-banner-contenido {
    position: relative;
    z-index: 2;
    padding: 20px 20px 16px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 160px;
    justify-content: space-between;
}
.herramienta-banner-nombre {
    font-size: 0.88rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.04em;
    text-shadow:
        -1px -1px 0 rgba(0, 0, 0, 0.8),
         1px -1px 0 rgba(0, 0, 0, 0.8),
        -1px  1px 0 rgba(0, 0, 0, 0.8),
         1px  1px 0 rgba(0, 0, 0, 0.8);
    margin: 0;
    text-transform: uppercase;
}
.herramienta-banner-info {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    background: rgba(0, 0, 0, 0.22);
    border: 1.5px solid rgba(0, 0, 0, 0.55);
    border-radius: 20px;
    padding: 5px 14px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    align-self: flex-start;
    position: relative;
    z-index: 3;
}
.herramienta-banner-info:hover {
    background: rgba(0, 0, 0, 0.38);
    color: #ffffff;
}
/* Workspace Studio — 2 columnas */
.herramienta-banner-destacada {
    grid-column: span 2;
}
/* Overlays + imágenes por herramienta */
.banner-herramienta-gemini {
    background-image: url('../img/herramienta-logo-gemini.webp');
    background-size: cover;
    background-position: center;
}
.banner-herramienta-gemini .herramienta-banner-overlay {
    background: linear-gradient(135deg, rgba(135, 206, 250, 0.26) 0%, rgba(66, 165, 245, 0.10) 100%);
}
.banner-herramienta-gemini .herramienta-banner-info {
    background: rgba(66, 133, 244, 0.12);
    border-color: rgba(0, 0, 0, 0.22);
    color: rgba(255, 255, 255, 0.80);
}
.banner-herramienta-gemini .herramienta-banner-info:hover {
    background: rgba(66, 133, 244, 0.30);
    border-color: rgba(0, 0, 0, 0.35);
    color: #fff;
}
.banner-herramienta-notebook {
    background-image: url('../img/herramienta-logo-notebook.webp');
    background-size: cover;
    background-position: center;
}
.banner-herramienta-notebook .herramienta-banner-overlay {
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.28) 0%, rgba(90, 90, 90, 0.12) 100%);
}
.banner-herramienta-notebook .herramienta-banner-info {
    background: rgba(80, 80, 80, 0.15);
    border-color: rgba(0, 0, 0, 0.22);
    color: rgba(255, 255, 255, 0.80);
}
.banner-herramienta-notebook .herramienta-banner-info:hover {
    background: rgba(80, 80, 80, 0.32);
    border-color: rgba(0, 0, 0, 0.35);
    color: #fff;
}
.banner-herramienta-gems {
    background-image: url('../img/herramienta-logo-gems.webp');
    background-size: cover;
    background-position: center;
}
.banner-herramienta-gems .herramienta-banner-overlay {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(135, 220, 250, 0.20) 100%);
}
.banner-herramienta-gems .herramienta-banner-info {
    background: rgba(135, 206, 250, 0.22);
    border-color: rgba(0, 0, 0, 0.22);
    color: rgba(10, 60, 160, 0.90);
}
.banner-herramienta-gems .herramienta-banner-info:hover {
    background: rgba(135, 206, 250, 0.42);
    border-color: rgba(0, 0, 0, 0.35);
    color: rgba(5, 40, 120, 1);
}
.banner-herramienta-sites {
    background-image: url('../img/herramienta-logo-sites.webp');
    background-size: cover;
    background-position: center;
}
.banner-herramienta-sites .herramienta-banner-overlay {
    background: linear-gradient(135deg, rgba(13, 71, 161, 0.68) 0%, rgba(66, 165, 245, 0.22) 100%);
}
.banner-herramienta-sites .herramienta-banner-info {
    background: rgba(66, 165, 245, 0.12);
    border-color: rgba(0, 0, 0, 0.22);
    color: rgba(255, 255, 255, 0.80);
}
.banner-herramienta-sites .herramienta-banner-info:hover {
    background: rgba(66, 165, 245, 0.30);
    border-color: rgba(0, 0, 0, 0.35);
    color: #fff;
}
.banner-herramienta-workspace {
    background-image: url('../img/herramienta-logo-studio.webp');
    background-size: cover;
    background-position: center;
}
.banner-herramienta-workspace .herramienta-banner-overlay {
    background: linear-gradient(135deg, rgba(135, 206, 250, 0.60) 0%, rgba(180, 150, 255, 0.25) 100%);
}
.banner-herramienta-workspace .herramienta-banner-info {
    background: rgba(180, 150, 255, 0.12);
    border-color: rgba(0, 0, 0, 0.22);
    color: rgba(30, 20, 70, 0.80);
}
.banner-herramienta-workspace .herramienta-banner-info:hover {
    background: rgba(180, 150, 255, 0.28);
    border-color: rgba(0, 0, 0, 0.35);
    color: rgba(20, 10, 60, 1);
}
.banner-herramienta-appsheet {
    background-image: url('../img/herramienta-logo-appsheet.webp');
    background-size: calc(100% - 10px) auto;
    background-position: center;
}
.banner-herramienta-appsheet .herramienta-banner-overlay {
    background: linear-gradient(135deg, rgba(13, 71, 161, 0.68) 0%, rgba(0, 172, 230, 0.22) 100%);
}
.banner-herramienta-appsheet .herramienta-banner-info {
    background: rgba(0, 172, 230, 0.12);
    border-color: rgba(0, 0, 0, 0.22);
    color: rgba(10, 30, 80, 0.80);
}
.banner-herramienta-appsheet .herramienta-banner-info:hover {
    background: rgba(0, 172, 230, 0.28);
    border-color: rgba(0, 0, 0, 0.35);
    color: rgba(5, 20, 70, 1);
}
.banner-herramienta-appsscript {
    background-image: url('../img/herramienta-logo-appscript.webp');
    background-size: cover;
    background-position: center;
}
.banner-herramienta-appsscript .herramienta-banner-overlay {
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.65) 0%, rgba(255, 220, 50, 0.22) 100%);
}
.banner-herramienta-appsscript .herramienta-banner-info {
    background: rgba(255, 140, 0, 0.12);
    border-color: rgba(0, 0, 0, 0.22);
    color: rgba(80, 30, 0, 0.80);
}
.banner-herramienta-appsscript .herramienta-banner-info:hover {
    background: rgba(255, 140, 0, 0.28);
    border-color: rgba(0, 0, 0, 0.35);
    color: rgba(70, 25, 0, 1);
}
/* n8n — 3 columnas */
.herramienta-banner-n8n-wide {
    grid-column: span 4;
}
.banner-herramienta-n8n {
    background-image: url('../img/herramienta-logo-n8n.webp');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #3d1010;
}
.banner-herramienta-n8n .herramienta-banner-overlay {
    background: rgba(100, 20, 10, 0.12);
}
.banner-herramienta-n8n .herramienta-banner-info {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.35);
    color: rgba(255, 255, 255, 0.85);
}
.banner-herramienta-n8n .herramienta-banner-info:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
}

/* =========================================
   1. CARD BASE HERRAMIENTAS MINI
   ========================================= */
.herramienta-card-mini {
    background: #ffffff; /* EDITADO: Bajamos 1 nivel (más claro y fresco) */
    color: var(--texto-oscuro); 
    border: 1.5px solid var(--kubi-400); /* EDITADO: Borde ajustado al nuevo fondo */
    border-radius: 16px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center; 
    gap: 8px;
    box-shadow: 0 4px 10px rgba(0, 203, 117, 0.08); 
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.herramienta-card-mini:hover {
    box-shadow: 0 8px 24px rgba(0, 203, 117, 0.4);
    transform: translateY(-4px);
}

/* Estilos de Tipografía e Íconos */
.herramienta-mini-icono {
    font-size: 2.5rem; /* Íconos más grandes para que destaquen */
    line-height: 1;
    margin-bottom: 5px;
}
.herramienta-mini-nombre {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 10px 0;
    letter-spacing: -0.3px;
}
/* =========================================
   2. EXCEPCIÓN: WORKSPACE STUDIO (Card Destacada)
   ========================================= */
.herramienta-card-mini.herramienta-card-destacada {
    background: var(--kubi-800); /* EDITADO: Bajamos 1 nivel de oscuridad */
    color: #ffffff !important;   /* Forzamos el texto a blanco */
    border-color: var(--kubi-900);
    
    display: grid;
    grid-template-columns: 1fr auto; 
    grid-template-rows: 1fr 1fr;   
    align-items: center;
    padding: 24px 32px; 
    gap: 0 30px; 
}

/* Ícono en la fila superior, empujado hacia abajo */
.herramienta-destacada-izq {
    grid-column: 1;
    grid-row: 1;
    text-align: center;
    align-self: end; /* Lo baja al centro de la tarjeta */
    margin-bottom: 4px;
}
.herramienta-destacada-icono {
    font-size: 3rem; 
}

/* Título en la fila inferior, empujado hacia arriba */
.herramienta-card-destacada .herramienta-destacada-nombre {
    grid-column: 1;
    grid-row: 2;
    text-align: center;
    font-size: 1.5rem; 
    margin: 0;
    align-self: start; 
    color: #ffffff !important; /* EDITADO: Forzamos el blanco para que se pueda leer bien */
}

/* Botones centrados abarcando toda la altura */
.herramienta-card-destacada .herramienta-acciones {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center; /* EDITADO: Esto garantiza el centrado vertical perfecto */
    width: 220px; 
    justify-content: center;
    margin-top: 0;
}

.herramienta-card-destacada:hover {
    box-shadow: 0 10px 32px rgba(0, 92, 57, 0.3); /* Sombra oscura acorde a su fondo */
    border-color: var(--kubi-700);
}

/* =========================================
   3. BOTONES Y JERARQUÍA VISUAL
   ========================================= */

.herramienta-acciones {
    display: flex;
    flex-direction: column; 
    gap: 16px; /* EDITADO: Subimos a 16px para separar bien los botones */
    width: 100%;
    margin-top: auto;
}

/* BOTÓN PRINCIPAL (ABRIR HERRAMIENTA) - Normales */
.btn-herramienta-mini {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    background: var(--kubi-600); /* EDITADO: Verde más fuerte para contrastar */
    color: #ffffff !important;   /* EDITADO: Forzamos el texto blanco para que no desaparezca */
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 800; 
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* El botón principal dentro de Workspace (que es verde) pasa a ser blanco */
.herramienta-card-destacada .btn-herramienta-mini {
    background: #ffffff !important;
    color: var(--kubi-950) !important; /* EDITADO: Esto arregla el texto desaparecido y lo pone oscuro */
}

.btn-herramienta-mini:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* BOTÓN SECUNDARIO (MÁS INFORMACIÓN) - Normales */
.btn-herramienta-guiado {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    background: transparent;     
    color: var(--kubi-800) !important;   /* EDITADO: Texto verde oscuro para lectura clara */
    border: 1.5px solid var(--kubi-400); /* EDITADO: Borde verde más notorio */
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* El botón secundario dentro de Workspace (que es verde) */
.herramienta-card-destacada .btn-herramienta-guiado {
    background: rgba(255, 255, 255, 0.1) !important; 
    color: #ffffff !important; 
    border-color: rgba(255, 255, 255, 0.5) !important; 
}

.btn-herramienta-guiado:hover {
    background: rgba(0, 203, 117, 0.1); /* Hover suave para las normales */
    border-color: var(--kubi-500);
    transform: scale(1.03);
}
.herramienta-card-destacada .btn-herramienta-guiado:hover {
    background: rgba(255, 255, 255, 0.25) !important; 
    border-color: #ffffff !important;
    transform: scale(1.03); /* AÑADIDO: Aseguramos que también se mueva en esta card */
}

/* =========================================
   CURSOS.HTML — NUEVO LAYOUT
   ========================================= */

/* Saludo */
.seccion-saludo-cursos {
    padding: 0 0 24px;
    max-width: none;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}

.saludo-subtitulo-cursos {
    font-size: 1.1rem;
    color: var(--texto-suave, #475569);
    margin: 4px 0 0;
}

/* Layout 70/30 */
.cursos-layout-principal {
    display: flex;
    gap: 32px;
    padding: 48px 60px 80px;
    max-width: 1400px;
    margin: 0 auto;
    align-items: flex-start;
}

.cursos-col-principal {
    flex: 1 1 0;
    min-width: 0;
}

.cursos-col-resumen {
    flex: 0 0 300px;
    position: sticky;
    top: 100px;
}

/* Sección Mi Progreso */
.seccion-mi-progreso {
    margin-bottom: 48px;
}

.seccion-titulo-cursos {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--texto-oscuro, #1e293b);
    margin: 0 0 16px;
}

/* Banner módulo pendiente */
.banner-modulo-pendiente {
    display: flex;
    align-items: center;
    gap: 28px;
    background: linear-gradient(135deg, var(--kubi-950, #003F27) 0%, var(--kubi-800, #007B4B) 100%);
    border-radius: 20px;
    padding: 32px 36px;
    position: relative;
    overflow: hidden;
}

.banner-modulo-pendiente::before {
    content: '';
    position: absolute;
    top: -40px;
    right: 160px;
    width: 200px;
    height: 200px;
    background: rgba(255,255,255,0.04);
    border-radius: 50%;
}

.pendiente-info {
    flex: 1;
    min-width: 0;
}

.pendiente-label {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--kubi-50, #CCFFE9);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.banner-modulo-pendiente h3 {
    font-size: 1.3rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 16px;
    line-height: 1.3;
}

.pendiente-barra-bg {
    background: rgba(255,255,255,0.2);
    border-radius: 6px;
    height: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}

.pendiente-barra-fill {
    background: var(--kubi-500, #00CB75);
    height: 100%;
    border-radius: 6px;
    transition: width 0.6s ease;
}

.pendiente-texto-pct {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.75);
    margin: 0 0 20px;
}

.btn-retomar-aprendizaje {
    display: inline-block;
    background: var(--kubi-500, #00CB75);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 11px 22px;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
}

.btn-retomar-aprendizaje:hover {
    background: var(--kubi-800, #007B4B);
    transform: translateY(-1px);
}

.pendiente-modulo-img {
    width: 130px;
    height: 130px;
    object-fit: contain;
    border-radius: 14px;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 16px rgba(0,0,0,0.3));
}

/* Sección lista módulos Curso 1 */
.seccion-curso-lista {
    margin-top: 8px;
}

.curso-lista-cabecera {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.bloque-curso-numero {
    display: inline-block;
    background: var(--kubi-700);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 5px 14px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}
.bloque-curso-titulo {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--texto-oscuro, #1e293b);
    margin: 0;
    flex: 1;
}

.modulos-lista {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Fila de módulo */
.modulo-fila {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    padding: 22px 24px;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.modulo-fila:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
    border-color: var(--kubi-500, #00CB75);
}

.modulo-fila-info {
    flex: 1;
    min-width: 0;
}

.modulo-fila-info h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--texto-oscuro, #1e293b);
    margin: 6px 0 6px;
}

.modulo-fila-info p {
    font-size: 0.88rem;
    color: var(--texto-suave, #475569);
    margin: 0 0 10px;
    line-height: 1.5;
}

.modulo-fila-btn {
    display: inline-block;
    margin-top: 10px;
}

.modulo-fila-img {
    width: 88px;
    height: 88px;
    object-fit: contain;
    border-radius: 12px;
    flex-shrink: 0;
}

/* Estado bloqueado para .modulo-fila */
.modulo-fila.modulo-bloqueado {
    opacity: 0.6;
    filter: grayscale(0.5);
    pointer-events: auto;
}

/* Resumen lateral */
.resumen-curso-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 18px;
    padding: 28px 24px;
}

.resumen-titulo {
    font-size: 1rem;
    font-weight: 700;
    color: var(--texto-oscuro, #1e293b);
    margin: 0 0 16px;
}

.resumen-curso-badge-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.resumen-curso-nombre {
    font-size: 0.85rem;
    color: var(--texto-suave, #475569);
    font-weight: 500;
}

.resumen-modulos-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.resumen-modulo-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.resumen-modulo-icono {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.resumen-modulo-texto {
    font-size: 0.85rem;
    color: var(--texto-suave, #475569);
    line-height: 1.45;
}

.resumen-modulo-item.resumen-modulo-completado .resumen-modulo-icono {
    color: var(--kubi-500, #00CB75);
}

.resumen-modulo-item.resumen-modulo-completado .resumen-modulo-texto {
    color: var(--texto-oscuro, #1e293b);
    font-weight: 600;
}

/* Links navegables en sidebar */
.resumen-curso-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-wrap: wrap;
    border-radius: 6px;
    transition: opacity 0.15s;
}

.resumen-curso-link:hover { opacity: 0.8; }
.resumen-curso-link:hover .resumen-curso-nombre { color: var(--kubi-800, #007B4B); }

a.resumen-modulo-texto {
    text-decoration: none;
    color: var(--texto-suave, #475569);
    transition: color 0.15s;
}

a.resumen-modulo-texto:hover {
    color: var(--kubi-800, #007B4B);
    text-decoration: underline;
}

.resumen-modulo-item.resumen-modulo-completado a.resumen-modulo-texto {
    color: var(--texto-oscuro, #1e293b);
    font-weight: 600;
}

/* Sticky ajustado para dos tarjetas */
.cursos-col-resumen {
    top: 80px;
}

/* Sidebar unificado */
.resumen-seccion-curso {
    margin-bottom: 4px;
}

.resumen-divisor {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 16px 0;
}

.resumen-seccion-curso .resumen-modulos-lista {
    margin-top: 12px;
}

/* Formulario contacto.html — campos pre-llenados y feedback */
.input-readonly {
    background: #f1f5f9;
    color: var(--texto-suave, #475569);
    cursor: not-allowed;
}

.label-contacto {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--texto-oscuro, #1e293b);
    margin-bottom: 6px;
}

.form-grupo-etiqueta {
    margin-bottom: 16px;
}

.feedback-exito {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 14px;
    font-size: 0.9rem;
}

.feedback-error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 14px;
    font-size: 0.9rem;
}

/* ===== FIN: NUEVA PAGINA DE INICIO ===== */

/* =========================================
   MÓDULO 1 — DISEÑO MEJORADO (body.pagina-modulo)
   Exclusivo para modulo1.html — nueva estructura de cards con header/body.
   Usa :has() para no afectar la estructura antigua de herramienta-*.html
   ========================================= */

/* --- Mito vs Realidad --- */
.mito-realidad-card {
    display: flex;
    gap: 16px;
    margin: 24px 0 20px;
    flex-wrap: wrap;
}
.mito-col,
.realidad-col {
    flex: 1 1 220px;
    border-radius: 12px;
    padding: 18px 20px;
}
.mito-col {
    background: #FEF2F2;
    border-left: 4px solid #EF4444;
}
.realidad-col {
    background: #F0FDF4;
    border-left: 4px solid #00CB75;
}
.mito-etiqueta,
.realidad-etiqueta {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 20px;
    padding: 3px 10px;
    margin-bottom: 10px;
}
.mito-etiqueta {
    background: #FEE2E2;
    color: #B91C1C;
}
.realidad-etiqueta {
    background: #DCFCE7;
    color: #166534;
}
.mito-col p,
.realidad-col p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--texto-oscuro);
}

/* --- Súper-equipo: header verde sólido (solo cuando usa estructura header/body) --- */
.card-super-equipo:has(.card-super-equipo-header) {
    padding: 0;
    background: #ffffff;
    border: none;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 123, 75, 0.12);
    margin: 30px 0;
}
.card-super-equipo-header {
    background: linear-gradient(135deg, #007B4B, #00CB75);
    padding: 22px 30px;
}
.card-super-equipo-header h4 {
    color: #ffffff;
    font-size: 1.25rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.card-super-equipo-body {
    padding: 25px 30px;
}
.card-super-equipo-body p {
    color: #334155;
    font-size: 1.05rem;
    margin-bottom: 15px;
    line-height: 1.6;
}
.card-super-equipo-body ul {
    color: #334155;
    font-size: 1.05rem;
    padding-left: 20px;
    line-height: 1.6;
    margin: 0;
}
.card-super-equipo-body li {
    margin-bottom: 12px;
}
.card-super-equipo-body li::marker {
    color: #00CB75;
}

/* --- Copiloto: header/body genérico (solo cuando usa estructura header/body) --- */
.card-copiloto:has(.card-copiloto-header) {
    padding: 0;
    border: none;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    margin: 40px 0;
}
.card-copiloto-header {
    padding: 22px 30px;
}
.card-copiloto-header h4 {
    color: #ffffff;
    font-size: 1.25rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.card-copiloto-body {
    padding: 25px 30px;
}
.card-copiloto-body p {
    color: var(--texto-suave);
    line-height: 1.7;
    font-size: 1.05rem;
    margin-bottom: 15px;
}
.card-copiloto-body p:last-child {
    margin-bottom: 0;
}
.card-copiloto-body strong {
    color: var(--texto-oscuro);
    font-weight: 700;
}

/* --- Variante ✈️ Piloto: navy → índigo --- */
.card-copiloto-piloto .card-copiloto-header {
    background: linear-gradient(135deg, #0F172A, #1D4ED8);
}
.card-copiloto-piloto .card-copiloto-body {
    background: #F0F9FF;
}

/* --- Variante 🤖 Gemini: azul tech --- */
.card-copiloto-gemini .card-copiloto-header {
    background: linear-gradient(135deg, #0369A1, #0EA5E9);
}
.card-copiloto-gemini .card-copiloto-body {
    background: #ffffff;
}

/* --- Grid de modelos Gemini --- */
.gemini-modelos-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 18px;
}
@media (min-width: 640px) {
    .gemini-modelos-grid {
        flex-direction: row;
    }
    .gemini-modelo-card {
        flex: 1;
    }
}
.gemini-modelo-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 12px;
    border-left: 4px solid;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gemini-modelo-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
.gemini-flash {
    background: #FFFBEB;
    border-color: #F59E0B;
}
.gemini-pro {
    background: #EEF2FF;
    border-color: #6366F1;
}
.gemini-modelo-icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}
.gemini-modelo-card h5 {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--texto-oscuro);
}
.gemini-modelo-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 20px;
    margin-bottom: 8px;
}
.gemini-flash .gemini-modelo-tag {
    background: #FEF3C7;
    color: #92400E;
}
.gemini-pro .gemini-modelo-tag {
    background: #E0E7FF;
    color: #3730A3;
}
.gemini-modelo-card p {
    margin: 0;
    font-size: 0.92rem;
    color: var(--texto-suave);
    line-height: 1.5;
}

/* --- Puente hacia la práctica --- */
.puente-practica {
    background: var(--kubi-25);
    border-left: 4px solid var(--kubi-500);
    border-radius: 8px;
    padding: 16px 20px;
    margin: 20px 0 10px;
}
.puente-practica p {
    margin: 0;
    color: var(--texto-suave);
    font-style: italic;
    font-size: 1.02rem;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .mito-realidad-card {
        flex-direction: column;
    }
    .card-copiloto-header,
    .card-super-equipo-header {
        padding: 18px 20px;
    }
    .card-copiloto-body,
    .card-super-equipo-body {
        padding: 20px;
    }
}

/* ===== FIN: MÓDULO 1 DISEÑO MEJORADO ===== */

/* =========================================
   CONTACTO — CANAL DE ATENCIÓN
   ========================================= */

/* Sub-grid: formulario (60%) + canal (40%) */
.formulario-canal-grid {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 28px;
    align-items: start;
}

/* --- Canal de Atención: columna --- */
.canal-atencion-col {
    padding-top: 4px;
}

/* --- Cards de canal --- */
.canal-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.canal-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
}
.canal-card.canal-chat {
    border-top: 3px solid #00CB75;
}
.canal-card.canal-email {
    border-top: 3px solid #0EA5E9;
}

.canal-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Avatar circular con iniciales */
.canal-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #007B4B, #00CB75);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Ícono de email */
.canal-icono-email {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #E0F2FE;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.canal-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.canal-nombre {
    font-weight: 700;
    font-size: 0.95rem;
    color: #1e293b;
}
.canal-rol {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 500;
}
.canal-handle {
    font-size: 0.8rem;
    color: #64748b;
    word-break: break-all;
}

/* Botones de canal */
.btn-canal {
    display: block;
    text-align: center;
    padding: 10px 14px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: opacity 0.2s ease, transform 0.1s ease;
}
.btn-canal:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}
.btn-canal-chat {
    background: linear-gradient(135deg, #007B4B, #00CB75);
    color: #ffffff;
}
.btn-canal-email {
    background: linear-gradient(135deg, #0369A1, #0EA5E9);
    color: #ffffff;
}

/* Badge de tiempo de respuesta */
.canal-badge-tiempo {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #F0FDF4;
    border: 1px solid #86EFAC;
    border-radius: 12px;
    padding: 14px 16px;
}
.tiempo-icono {
    font-size: 1.4rem;
    flex-shrink: 0;
}
.tiempo-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tiempo-label {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tiempo-valor {
    font-size: 0.95rem;
    font-weight: 700;
    color: #007B4B;
}

/* Responsive: apilar verticalmente en pantallas pequeñas */
@media (max-width: 900px) {
    .formulario-canal-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== FIN: CONTACTO CANAL DE ATENCIÓN ===== */

/* =========================================
   MÓDULO 2 — BLOCKQUOTE + TABLA 3R
   ========================================= */

/* --- Blockquote Regla de Oro --- */
.blockquote-regla-oro {
    position: relative;
    background: #fef3c7;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    padding: 16px 20px 16px 48px;
    margin: 18px 0;
    font-style: italic;
    font-size: 1.05rem;
    color: #92400e;
    line-height: 1.7;
}
.blockquote-regla-oro::before {
    content: '\201C';
    position: absolute;
    left: 14px;
    top: 8px;
    font-size: 2.8rem;
    color: #f59e0b;
    font-style: normal;
    line-height: 1;
    font-family: Georgia, serif;
}

/* --- Tabla 3R --- */
.tabla-3r-wrapper {
    overflow-x: auto;
    margin: 30px 0 40px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.tabla-3r {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    font-size: 0.97rem;
}
.tabla-3r thead tr {
    background: #1e293b;
    color: #ffffff;
}
.tabla-3r thead th {
    padding: 14px 20px;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.tabla-3r tbody tr {
    background: #ffffff;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s ease;
}
.tabla-3r tbody tr:nth-child(even) {
    background: #f8fafc;
}
.tabla-3r tbody tr:hover {
    background: #f0fdf4;
}
.tabla-3r tbody td {
    padding: 16px 20px;
    vertical-align: middle;
    text-align: center;
    line-height: 1.55;
}
.tabla-3r tbody td:first-child {
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
}
.tabla-3r tbody td:nth-child(2) {
    text-align: center;
}
.tabla-3r tbody td:last-child {
    color: var(--texto-suave);
}

/* --- Tag condición --- */
.tag-condicion {
    display: inline-block;
    background: var(--kubi-25);
    color: var(--kubi-800);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 0.78rem;
    font-weight: 600;
}

/* ===== FIN: MÓDULO 2 DISEÑO MEJORADO ===== */

/* ===== MÓDULO 3: Técnicas de Expertos ===== */
.seccion-tecnicas-m3 { margin: 40px 0; }
.grid-tecnicas-m3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 24px;
}
.card-tecnica-m3 {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
}
.tecnica-m3-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 22px;
    font-weight: 800;
    color: #ffffff;
}
.tecnica-m3-header span { font-size: 1.4rem; }
.tecnica-m3-header h4 { margin: 0; font-size: 1rem; color: #ffffff; }
.card-tecnica-zero .tecnica-m3-header   { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.card-tecnica-few .tecnica-m3-header    { background: linear-gradient(135deg, #10b981, #059669); }
.card-tecnica-cadena .tecnica-m3-header { background: linear-gradient(135deg, #7C3AED, #5b21b6); }
.tecnica-m3-body {
    padding: 20px 22px;
    background: #ffffff;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tecnica-m3-body p { color: #475569; font-size: 0.95rem; line-height: 1.6; margin: 0; }
.tecnica-m3-body em { font-style: normal; font-weight: 700; color: #1e293b; }
.tecnica-ejemplo-codigo {
    background: #f1f5f9;
    border-left: 3px solid #10b981;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.88rem;
    color: #334155;
    font-family: monospace;
    line-height: 1.7;
}
.card-tecnica-zero .tecnica-ejemplo-codigo   { border-left-color: #3b82f6; }
.card-tecnica-cadena .tecnica-ejemplo-codigo { border-left-color: #7C3AED; }
.tecnica-frase-clave {
    background: linear-gradient(135deg, #f5f3ff, #ede9fe);
    border-left: 3px solid #7C3AED;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 700;
    color: #5b21b6;
    text-align: center;
}

/* ===== MÓDULO 3: Asistente Multimedia ===== */
.seccion-multimedia-m3 { margin: 40px 0; }
.card-ejemplo-m3 {
    background: #fff;
    border-left: 3px solid #e2e8f0;
    border-radius: 0 8px 8px 0;
    padding: 9px 12px;
    font-size: 0.84rem;
    font-style: italic;
    color: #475569;
    margin-top: 2px;
    line-height: 1.55;
}
.card-ejemplo-m3 strong {
    display: block;
    font-style: normal;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}
.seccion-bolsillo .card-ejemplo-m3        { border-left-color: #6366f1; }
.seccion-bolsillo .card-ejemplo-m3 strong { color: #4338ca; }
.seccion-procesos .card-ejemplo-m3        { border-left-color: #059669; }
.seccion-procesos .card-ejemplo-m3 strong { color: #047857; }
.grid-multimedia-m3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 20px;
}
.card-multimedia-m3 {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.card-multimedia-m3:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.08); }
.multimedia-icono { font-size: 2rem; }
.card-multimedia-m3 h5 { margin: 0; font-size: 1rem; font-weight: 700; color: #1e293b; }
.card-multimedia-m3 p { margin: 0; font-size: 0.9rem; color: #64748b; line-height: 1.55; }
.tip-multimedia-m3 {
    background: var(--kubi-25, #f0fdf4);
    color: var(--kubi-800, #007B4B);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    margin-top: 4px;
}

/* Responsive Módulo 3 */
@media (max-width: 900px) {
    .grid-tecnicas-m3 { grid-template-columns: 1fr; }
    .grid-multimedia-m3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .grid-multimedia-m3 { grid-template-columns: 1fr; }
}
/* ===== FIN: MÓDULO 3 ===== */

/* ===== ICONOS RESUMEN DE CURSO ===== */
.resumen-modulo-icono svg {
    width: 20px;
    height: 20px;
    display: block;
}
.icono-pendiente  { color: #F59E0B; }
.icono-bloqueado  { color: #94A3B8; }
.icono-completado { color: #00CB75; }

/* ===== CONTACTO — Layout vertical 3 secciones ===== */
.contenedor-contacto-vertical {
    margin: 40px auto 80px auto;
    max-width: 960px;
    padding: 0 24px;
}
.seccion-contacto {
    padding: 40px 0;
    border-bottom: 1px solid #e2e8f0;
}
.seccion-contacto:last-of-type {
    border-bottom: none;
}
.desvios-grid,
.canal-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 20px;
}
.canal-cards-grid {
    margin-bottom: 20px;
}
@media (max-width: 768px) {
    .desvios-grid, .canal-cards-grid { grid-template-columns: 1fr; }
}

/* ===== CONTACTO — Secciones desvío sin burbuja ===== */
.seccion-desvio {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ===== CONTACTO — Criterios COE ===== */
.criterios-lista {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 12px;
}
.criterio-linea {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 12px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    text-align: center;
    line-height: 1.4;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.criterio-linea:hover {
    background: #f0fdf4;
    border-color: var(--kubi-300, #80F0C5);
}
@media (max-width: 900px) {
    .criterios-lista { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .criterios-lista { grid-template-columns: 1fr; }
}

/* ===== SESIÓN — estado pre-render (movido de index.html inline style) ===== */
#pantalla-login { display: none; }
html.sesion-activa #pantalla-login { display: none !important; }
html.sesion-activa #contenido-portal { display: block !important; }

/* ===== HERRAMIENTAS MINI — index.html cards ===== */
.herramienta-mini-icono {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 4px;
    text-align: center;
    width: 100%;
}
.herramienta-mini-nombre {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--texto-oscuro, #1e293b);
    margin: 0 0 auto;
}
.btn-herramienta-mini {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1.5px solid var(--kubi-500);
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--kubi-700);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}
.btn-herramienta-mini:hover {
    background: var(--kubi-500);
    color: #ffffff;
}
.herramienta-destacada-izq {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.herramienta-destacada-icono {
    font-size: 2.4rem;
    line-height: 1;
}
.herramienta-destacada-nombre {
    font-size: 1.05rem;
}
.btn-herramienta-destacada {
    background: var(--kubi-700);
    color: #ffffff;
    border-color: var(--kubi-700);
}
.btn-herramienta-destacada:hover {
    background: var(--kubi-800);
    color: #ffffff;
}

/* ===== TOP AUTOMATORS — Accesos rápidos del programa ===== */
.cursos-col-accesos {
    flex: 1 1 auto;
    position: sticky;
    top: 100px;
    align-self: flex-start;
}
.accesos-programa-card {
    background: transparent;
    border: none;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
    justify-content: flex-start;
}
.accesos-titulo {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--texto-suave, #64748b);
    margin: 0 0 4px;
}
.btn-acceso-programa {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #F0FFF8;
    border: 1.5px solid var(--kubi-300);
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.btn-acceso-programa:hover {
    background: var(--kubi-50, #CCFFE9);
    border-color: var(--kubi-500);
    transform: translateX(3px);
}
.btn-acceso-icono { font-size: 1.1rem; flex-shrink: 0; }
.btn-acceso-texto {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--kubi-800);
    line-height: 1.3;
}

@media (max-width: 1024px) {
    .seccion-saludo-cursos {
        flex-direction: column;
        gap: 16px;
    }
    .accesos-programa-card {
        flex-direction: column;
        width: 100%;
    }
    .btn-acceso-programa {
        width: 100%;
    }
}

/* ===== MALLA CURRICULAR / CRONOGRAMA — TOP AUTOMATORS ===== */
.main-programa {
    background: #eef5f1;
    min-height: calc(100vh - 80px);
    padding: 0 0 60px;
}
body.pagina-modulo .main-programa {
    background: #ffffff;
}
.regresar-contenedor {
    display: flex;
    justify-content: center;
    padding: 40px 0 20px;
}
.btn-regresar {
    background: transparent;
    color: var(--kubi-700, #00975B);
    border: 2px solid var(--kubi-300, #4DDFAB);
    border-radius: 10px;
    padding: 12px 48px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    letter-spacing: 0.02em;
}
.btn-regresar:hover {
    background: var(--kubi-500, #00CB75);
    color: #ffffff;
    border-color: var(--kubi-500, #00CB75);
}

.prog-page-header {
    background: #ffffff;
    border-bottom: 2px solid #CCE8D8;
    padding: 20px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.prog-header-left { display: flex; align-items: center; gap: 16px; }
.prog-header-left img { height: 60px; display: block; }
.prog-header-divider { width: 4px; height: 4px; border-radius: 50%; background: #AAE0C0; }
.prog-header-center {
    flex: 1;
    text-align: center;
    padding: 0 20px;
}
.prog-hc-title {
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: #0B2418;
    letter-spacing: -0.02em;
    line-height: 1;
}
.prog-hc-sub {
    font-size: 0.95rem;
    font-weight: 700;
    color: #00B369;
    margin-top: 2px;
}
.prog-hc-comp {
    font-size: 0.9rem;
    font-weight: 800;
    color: #26D092;
    letter-spacing: -0.01em;
}
.prog-hc-desc {
    font-size: 0.75rem;
    color: #5a6b62;
    margin-top: 6px;
    font-weight: 500;
    border-top: 1px dashed #CCE8D8;
    padding-top: 6px;
    line-height: 1.5;
}
.prog-header-right { display: flex; align-items: center; gap: 10px; }
.prog-header-right img { height: 72px; display: block; }
.prog-ed-tag {
    font-size: 0.85rem;
    font-weight: 700;
    color: #007B4B;
    background: #CCFFE9;
    padding: 4px 10px;
    border-radius: 100px;
}

.prog-content {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 32px 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Level cards */
.lcard {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,40,20,0.10);
    border: 1.5px solid #B8E8CA;
}
.lcard-body { display: flex; }
.lcard-side {
    width: 172px;
    min-width: 172px;
    background: #F0FBF4;
    border-right: 1.5px solid #CCE8D8;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 12px 16px;
    gap: 11px;
}
.lnum {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: #003F27;
    color: #fff;
    font-size: 23px;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    box-shadow: 0 2px 8px rgba(0,40,20,0.25);
}
.licon {
    width: 78px; height: 78px;
    border-radius: 50%;
    border: 2.5px solid #2DBE6C;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
}
.licon svg { width: 44px; height: 44px; color: #003F27; }
.lname { display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; }
.nivel-lbl { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #007B4B; }
.nivel-val { font-size: 18px; font-weight: 800; color: #003F27; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.1; }
.lcourse { font-size: 11px; color: #007B4B; font-weight: 600; text-align: center; line-height: 1.45; font-style: italic; padding: 0 2px; }

.lcard-main { flex: 1; padding: 13px 12px 0; display: flex; flex-direction: column; gap: 8px; }
.mods-grid { display: grid; gap: 8px; }
.mods-4 { grid-template-columns: repeat(4, 1fr); }
.mods-5 { grid-template-columns: repeat(5, 1fr); }
.mcard {
    background: #F7FDF9;
    border: 1px solid #CCE8D8;
    border-radius: 10px;
    padding: 9px 9px 10px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 3px;
    text-align: center;
}
.mcard .mnum { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #007B4B; margin-bottom: 1px; }
.mcard .mtitle { font-size: 13px; font-weight: 700; color: #0B2418; line-height: 1.35; }
.mcard .mdesc { font-size: 11.5px; color: #4A5E52; line-height: 1.5; margin-top: 2px; }

.lstrip {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background: #D0EEDD;
    border-top: 1.5px solid #AAE0C0;
    margin: auto -12px 0;
}
.lstrip-cell { padding: 10px 14px; border-right: 1px solid #AAE0C0; }
.lstrip-cell:last-child { border-right: none; }
.strip-lbl {
    font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em;
    color: #003F27; margin-bottom: 6px; display: flex; align-items: center; gap: 5px;
}
.strip-lbl svg { width: 11px; height: 11px; flex: 0 0 auto; }
.strip-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.strip-list li {
    font-size: 11px; color: #1A3D2B; font-weight: 500; line-height: 1.5;
    padding-left: 10px; position: relative;
}
.strip-list li::before { content: '•'; position: absolute; left: 0; color: #007B4B; font-weight: 700; }
.strip-list li strong { font-weight: 700; color: #003F27; }
.strip-txt { font-size: 11px; color: #1A3D2B; font-weight: 500; line-height: 1.65; }

/* Eval table */
.eval-wrap {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,40,20,0.10);
    border: 1.5px solid #B8E8CA;
}
.eval-hd { background: #003F27; padding: 11px 20px; text-align: center; }
.eval-hd h2 { font-size: 13.5px; font-weight: 800; color: #fff; letter-spacing: 0.08em; text-transform: uppercase; }
.eval-tbl { width: 100%; border-collapse: collapse; }
.eval-tbl th {
    background: #CCF0DE; color: #003F27; font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 14px;
    text-align: center; border: 1px solid #AAE0C0;
}
.eval-tbl td { padding: 9px 13px; font-size: 12px; color: #1A3D2B; border: 1px solid #D4EEE0; vertical-align: top; line-height: 1.55; }
.eval-tbl .td-nivel { font-weight: 800; font-size: 13px; color: #003F27; text-align: center; background: #F0FBF4; }
.eval-tbl .td-dash { text-align: center; color: #aabcb4; font-size: 14px; vertical-align: middle; }

/* ===== COMPROMISO ===== */
.compromiso {
  background: #F0FBF4;
  border-radius: 16px;
  padding: 20px 26px;
  border: 1.5px solid #B8E8CA;
  box-shadow: 0 2px 12px rgba(0,40,20,0.06);
}
.compromiso-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.compromiso-icon {
  font-size: 20px;
  flex: 0 0 auto;
}
.compromiso-title {
  font-family: 'Poppins', sans-serif;
  font-size: 14.5px;
  font-weight: 800;
  color: #003F27;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.compromiso-desc {
  font-size: 12.5px;
  color: #1A3D2B;
  margin-bottom: 16px;
  line-height: 1.5;
  font-weight: 500;
}
.compromiso-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.compromiso-item {
  background: #fff;
  border: 1px solid #CCE8D8;
  border-radius: 12px;
  padding: 16px;
}
.compromiso-item h4 {
  font-family: 'Poppins', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: #007B4B;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.compromiso-item h4 svg {
  width: 16px;
  height: 16px;
  color: #26D092;
}
.compromiso-item p {
  font-size: 11.5px;
  color: #4A5E52;
  line-height: 1.55;
}
.compromiso-item p strong {
  color: #003F27;
  font-weight: 700;
}
.compromiso-item p em {
  display: inline-block;
  margin-top: 8px;
  font-size: 10.5px;
  color: #007B4B;
  font-style: normal;
  font-weight: 700;
  background: #E6FFF4;
  padding: 4px 8px;
  border-radius: 6px;
}
@media (max-width: 800px) {
  .compromiso-list {
    grid-template-columns: 1fr;
  }
}

/* Layout dividido para tarjeta Asistencia */
.asistencia-split {
  display: flex;
  align-items: center; /* Centra verticalmente */
  justify-content: space-between; /* Texto a la izq, botón a la der */
  gap: 16px;
}
.asistencia-texto {
  flex: 1;
}
.asistencia-texto p {
  font-size: 11.5px;
  color: #4A5E52;
  line-height: 1.55;
}
.asistencia-texto p strong {
  color: #003F27;
  font-weight: 700;
}
.asistencia-texto em {
  display: inline-block;
  margin-top: 8px;
  font-size: 10.5px;
  color: #007B4B;
  font-style: normal;
  font-weight: 700;
  background: #E6FFF4;
  padding: 4px 8px;
  border-radius: 6px;
}

/* Botón de Asistencia Actualizado (Oscuro) */
.btn-asistencia {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: #007B4B; /* Fondo verde oscuro */
  color: #ffffff; /* Texto blanco */
  border: none;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap; /* Evita que el texto salte de línea */
  flex: 0 0 auto; /* Evita que el botón se reduzca de tamaño */
}
.btn-asistencia:hover {
  background: #005C39;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 63, 39, 0.25);
}
.btn-asistencia svg {
  width: 14px;
  height: 14px;
}

/* Ajuste móvil para que el botón baje si la pantalla es muy pequeña */
@media (max-width: 500px) {
  .asistencia-split {
    flex-direction: column;
    align-items: flex-start;
  }
  .btn-asistencia {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
  }
}

/* El Grupo */
.grupo {
    background: #007B4B; border-radius: 16px; padding: 16px 26px;
    display: flex; align-items: center; gap: 20px;
    box-shadow: 0 2px 14px rgba(0,40,20,0.14);
}
.grupo .g-trophy { font-size: 42px; flex: 0 0 auto; }
.grupo-body { flex: 1; }
.grupo-title {
    font-size: 13.5px; font-weight: 800; color: #fff; text-transform: uppercase;
    letter-spacing: 0.07em; margin-bottom: 8px; text-align: center;
}
.grupo-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.grupo-list li { font-size: 12.5px; color: #CCF5E0; font-weight: 500; padding-left: 13px; position: relative; line-height: 1.5; }
.grupo-list li::before { content: '•'; position: absolute; left: 0; color: #80F0C5; font-weight: 700; }

/* Cronograma */
.prog-sheet {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0,40,25,0.08), 0 12px 32px rgba(0,40,25,0.10);
    padding: 28px 36px 26px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.prog-legend {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    background: #E6FFF4; border: 1px solid #CCFFE9; border-radius: 10px; padding: 9px 16px;
}
.prog-legend-item { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: #3d4d44; font-weight: 500; }
.prog-legend-sw { width: 10px; height: 10px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.3); flex: 0 0 auto; }

.prog-months-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.prog-month-block { border: 1px solid #CCFFE9; border-radius: 12px; overflow: hidden; }
.prog-month-title {
    background: #003F27; color: #fff; font-size: 13.5px; font-weight: 700;
    padding: 9px 14px; display: flex; align-items: center; justify-content: space-between;
}
.prog-month-title .yr { font-size: 10px; font-weight: 500; color: #80F0C5; }
.prog-cal-table { width: 100%; border-collapse: collapse; }
.prog-cal-table th {
    font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    color: #007B4B; background: #E6FFF4; padding: 5px 4px; text-align: center;
    border-bottom: 1px solid #CCFFE9;
}
.prog-cal-table td { width: 20%; height: 70px; vertical-align: top; padding: 4px; border: 1px solid #E6FFF4; position: relative; }
.prog-cal-table td.empty { background: #fafdfb; }
.prog-day-num { font-size: 9.5px; font-weight: 600; color: #8a9a92; display: block; margin-bottom: 2px; }
.prog-day-cell.has-event .prog-day-num { color: #0B2418; }

.prog-ev {
    font-size: 10px; line-height: 1.2; font-weight: 600; color: #fff;
    border-radius: 4px; padding: 3px 5px; display: flex; align-items: center;
    justify-content: space-between; gap: 4px; cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
    border: 1px solid rgba(0,0,0,0.35); width: 100%; text-align: left; background: none;
    font-family: 'Inter', sans-serif;
}
.prog-ev.n1 { background: #00975B; }
.prog-ev.n2 { background: #26D092; color: #003F27; }
.prog-ev.n3 { background: #80F0C5; color: #003F27; }
.prog-ev.acc { background: #CCFFE9; color: #003F27; }
.prog-ev.close { background: #003F27; }
.prog-ev.mentor { background: #00B369; }
.prog-ev.final { background: #005C39; }
.prog-ev:hover { filter: brightness(1.08); transform: translateY(-1px); }
.prog-ev .ev-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prog-ev .eye { flex: 0 0 auto; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; opacity: 0.85; }
.prog-ev .eye svg { width: 13px; height: 13px; display: block; }

.prog-path-summary { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.prog-ps-card { border: 1px solid #CCFFE9; border-radius: 10px; padding: 11px 14px; display: flex; align-items: center; gap: 11px; }
.prog-ps-num { width: 26px; height: 26px; border-radius: 50%; background: #00CB75; color: #003F27; font-weight: 700; font-size: 11.5px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.prog-ps-card h4 { font-size: 12.5px; font-weight: 700; color: #0B2418; }
.prog-ps-card p { font-size: 9.8px; font-weight: 700; color: #5a6b62; margin-top: 1px; }

/* Modal cronograma */
.prog-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,40,25,0.45);
    backdrop-filter: blur(4px); display: none; align-items: center;
    justify-content: center; z-index: 1000; padding: 24px;
}
.prog-modal-overlay.open { display: flex; }
.prog-modal-card {
    background: #fff; border-radius: 20px; width: 100%; max-width: 460px;
    max-height: 82vh; overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0,40,25,0.22), 0 4px 16px rgba(0,40,25,0.10);
    animation: progModalIn 0.22s ease;
}
@keyframes progModalIn {
    from { opacity: 0; transform: translateY(16px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.prog-modal-head {
    padding: 20px 24px 16px; border-bottom: 1px solid #E6FFF4;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
    border-radius: 20px 20px 0 0;
}
.prog-modal-tag {
    display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: #fff; padding: 4px 10px; border-radius: 100px; margin-bottom: 8px;
}
.prog-modal-head h3 { font-size: 17px; font-weight: 700; color: #0B2418; line-height: 1.3; }
.prog-modal-close {
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: none;
    background: #E6FFF4; color: #007B4B; font-size: 14px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: background 0.15s;
}
.prog-modal-close:hover { background: #CCFFE9; }
.prog-modal-body { padding: 18px 24px 24px; }
.prog-modal-meta {
    display: flex; align-items: center; gap: 8px; background: #E6FFF4;
    border: 1px solid #CCFFE9; border-radius: 10px; padding: 10px 13px; margin-bottom: 12px;
}
.prog-modal-meta svg { width: 15px; height: 15px; flex: 0 0 auto; color: #007B4B; }
.prog-modal-meta-text { font-size: 12.5px; font-weight: 600; color: #003F27; display: flex; flex-direction: column; }
.prog-modal-meta-text .d { font-weight: 500; color: #5a6b62; font-size: 11px; margin-top: 1px; }
.prog-modal-detail { font-size: 13.5px; line-height: 1.7; color: #3d4d44; }
.prog-modal-curso {
    display: flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border: 1px solid #86efac; border-radius: 10px;
    padding: 10px 14px; margin-bottom: 14px;
    font-size: 12.5px; font-weight: 700; color: #15803d; flex-wrap: wrap;
}
.prog-modal-curso strong { font-weight: 800; letter-spacing: 0.02em; }
.prog-modal-curso .curso-sep { opacity: 0.45; font-weight: 400; margin: 0 2px; }
.curso-icon { width: 20px; height: 20px; object-fit: contain; flex: 0 0 auto; }
.mod-bloque { display: flex; flex-direction: column; gap: 3px; margin-bottom: 4px; }
.mod-chip {
    display: inline-block; background: #CCFFE9; color: #003F27;
    font-size: 10px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 100px; width: fit-content;
}
.mod-titulo-texto { font-size: 14px; font-weight: 700; color: #0B2418; line-height: 1.4; }
.mod-sep { height: 10px; }
.mod-intro-texto { font-size: 13px; color: #3d4d44; margin: 0 0 10px 0; }
.mod-intro-bold { font-weight: 700; color: #0B2418; }
.prog-modal-tips {
    margin-top: 14px;
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border: 1px solid #fcd34d; border-radius: 10px; padding: 12px 14px;
}
.prog-modal-tips-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
    color: #92400e; margin-bottom: 7px;
}
.prog-modal-tips-texto { font-size: 12.5px; color: #78350f; line-height: 1.6; margin: 0; }

@media (max-width: 980px) { .prog-months-row { grid-template-columns: 1fr; } .prog-path-summary { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .prog-content { padding: 16px; } .prog-page-header { flex-direction: column; text-align: center; } }

/* Video módulo — reproductor HTML5 standalone */
.video-modulo-wrapper {
    margin: 24px 0 28px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    background: #000;
    aspect-ratio: 16 / 9;
}

.video-modulo {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 14px;
}

.banner-top-automator {
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(135deg, #005f3c, #008f5d);
    color: #fff;
    border-radius: 16px;
    padding: 28px 32px;
    margin-top: 16px;
    margin-bottom: 8px;
    font-size: 1rem;
}
.banner-top-automator .top-automator-icono {
    font-size: 2.8rem;
    flex-shrink: 0;
}
.banner-top-automator strong {
    font-size: 1.15rem;
    display: block;
    margin-bottom: 4px;
}
.banner-top-automator p {
    margin: 0;
    opacity: 0.9;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* === CALIFICACIONES — BADGES INLINE === */
.modulo-nota-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.nota-curso-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    padding: 5px 16px;
    border-radius: 20px;
    color: #fff;
    font-size: 1.24rem;
    font-weight: 800;
    margin-left: 12px;
    vertical-align: middle;
    flex-shrink: 0;
}

.nota-modulo-badge {
    display: inline-block;
    background: #f1f5f9;
    color: #1e293b;
    font-size: 1.07rem;
    font-weight: 700;
    border-radius: 10px;
    padding: 4px 13px;
}

.nivel-builder-icono {
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4.5rem;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 16px rgba(0,0,0,0.3));
}