@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;

    /* El contenedor se ajusta al botón en vez de ocupar todo el ancho.
       Sin esto el div se comporta como bloque: la sombra y el borde se estiran
       de lado a lado mientras el botón queda pegado a la izquierda. Se notaba
       sobre todo con el botón personalizado de Google ("Inicia sesión como
       ..."), que es más angosto que el genérico. */
    width: fit-content;
    max-width: 100%;
}

/* --- 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;
    /* Un elemento flex no encoge por debajo de su contenido salvo que se le
       diga: por defecto lleva `min-width: auto`. Sin esto, entre 900 y 1100px
       --el menu movil entra a los 900 y el escritorio ya no cabe-- la barra de
       KUBI empujaba el nombre y el boton de cerrar sesion fuera de la pantalla
       y aparecia scroll horizontal. */
    min-width: 0;
}

.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;
    /* La barra se ajusta a su texto en vez de estirarse hasta un ancho fijo.
       Con `width: 100%; max-width: 370px` quedaba un hueco vacio a la derecha
       de "te oriento", y se leia como un campo a medio llenar en vez de como
       un boton. Reportado el 19-oct. */
    width: auto;
    max-width: 100%;
    /* Cede espacio cuando la fila del nav aprieta, en vez de empujar el nombre
       y el boton de cerrar sesion fuera de la pantalla. Entre 900 y 1100px
       --el menu movil entra a los 900 y el escritorio ya no cabe-- la barra de
       navegacion desbordaba en horizontal. `min-width: 0` es lo que permite
       que un elemento flex encoja por debajo de su contenido. */
    flex: 0 1 auto;
    min-width: 0;
    transition: all 0.3s ease;
    cursor: pointer;
    gap: 8px;
}

/* Al pasar el mouse, la barra entera se realza para que se lea como un
   control clickeable y no como un campo de texto decorativo. Estuvo comentado
   mientras el chat no existia. */
.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;
    /* Ancho medido sobre el propio texto: 31ch es lo que ocupa "Soy KUBI,
       escribeme y te oriento" con holgura. Un input no se autoajusta a su
       placeholder, asi que sin esto hay que darle una medida o se estira.
       `min-width: 0` deja que encoja en pantallas estrechas en vez de
       desbordar la barra de navegacion.

       26ch sale de medir el texto renderizado en Inter contra el ancho de un
       ch, no de tantear: deja una holgura de unos 10px y nada mas. El ch se
       mide sobre el '0', mas ancho que la letra media, asi que 25 se quedaba
       corto por un pelo. */
    width: 26ch;
    min-width: 0;
    max-width: 100%;
    outline: none;
    font-size: 1rem;
    color: var(--texto-oscuro);
    cursor: pointer;
    /* Cuando no cabe, se corta con puntos suspensivos en vez de recortarse a
       seco a mitad de una palabra. */
    text-overflow: ellipsis;
}

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

/* Por debajo de 1100px la barra ya no cabe junto al logo, el menu y el nombre
   de quien entro. Medido: a 1000px el texto se recortaba a 104 de los 236px
   que necesita, y a 860px la barra entera quedaba en 29px.

   Asi que deja de ser una barra y pasa a ser el boton redondo del avatar, que
   abre el mismo chat. Se pierde la invitacion escrita, pero un "Soy KUBI,
   es..." cortado a la mitad no invita a nada. */
@media (max-width: 1100px) {
    /* El centro deja de estirarse y pasa a medir lo que mide el avatar. Sin
       esto se quedaba con `min-width: 0` y `flex-grow: 1`, colapsaba a 6px y
       el avatar se salia encima del nombre de quien entro. */
    .nav-centro {
        flex: 0 0 auto;
        min-width: auto;
    }
    .buscador-ia {
        padding: 4px;
        border-radius: 50%;
        flex: 0 0 auto;
    }
    .buscador-ia input { display: none; }
}

.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;
}

/* El avatar crece con la barra, no por separado: el disparador es
   `.buscador-ia:hover`, asi que ambos reaccionan aunque el mouse este sobre el
   texto. Da la sensacion de un solo bloque vivo. */
.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);
}

.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;
}

/* ===== EL CHAT EN PANTALLAS PEQUEÑAS =====================================
   El panel colgaba del menu de escritorio con `position: absolute`. En movil
   ese menu colapsa en el boton hamburguesa, asi que el chat se iba con el:
   no habia forma de abrirlo.

   Aqui pasa a `fixed` y se comporta como una hoja inferior, que es el patron
   que la gente ya conoce de cualquier chat en el telefono. El disparador lo
   pone chatbot.js como boton flotante. */
@media (max-width: 900px) {
    #chatbot-flotante.chat-desplegable {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        min-width: 0;
        /* El borde de 1px por lado se sumaba al 100% y dejaba el panel 2px mas
           ancho que la pantalla: aparecia desplazamiento horizontal. Medido en
           el navegador a 375px: el panel salia 377. */
        box-sizing: border-box;
        /* dvh y no vh: con vh, la barra del navegador movil tapa el campo de
           escribir justo cuando aparece el teclado. */
        height: 85dvh;
        max-height: 85vh;
        border-radius: 20px 20px 0 0;
        z-index: 100000;   /* por encima del menu desplegado */
    }
}

/* --- Acceso a KUBI en la cabecera movil ---------------------------------
   Va junto al hamburguesa y no flotando sobre el contenido: flotando tapaba
   las tarjetas al desplazarse, y aqui acompaña a la navegacion, que es donde
   la gente busca las acciones de la pagina. Mismo alto que el hamburguesa
   para que la cabecera no se descuadre. */
.kubi-boton-movil {
    display: none;
    width: 40px;
    height: 40px;
    /* Pegado al hamburguesa: la cabecera reparte el espacio con
       space-between, y sin esto KUBI quedaba flotando a media barra. */
    margin-left: auto;
    margin-right: 10px;
    padding: 0;
    border: 2px solid var(--kubi-300, #7fe3b8);
    border-radius: 10px;
    background: #ffffff;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.2s, transform 0.15s;
}

.kubi-boton-movil img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kubi-boton-movil:hover { border-color: var(--kubi-500, #00cb75); }
.kubi-boton-movil:active { transform: scale(0.94); }

@media (max-width: 900px) {
    /* Aparece exactamente cuando el menu colapsa, que es cuando la barra de
       KUBI del escritorio deja de estar disponible. */
    .kubi-boton-movil { display: block; }
}

/* 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; 
    /* Los saltos de linea del texto se respetan.

       El chat pinta con `textContent`, que es lo que lo protege de que una
       respuesta inyecte HTML. Pero sin esto el navegador colapsa los saltos
       y una lista --las herramientas del portal, por ejemplo-- salia como un
       parrafo corrido, ilegible. `pre-wrap` los respeta y sigue ajustando el
       texto al ancho, asi que no reaparece el desplazamiento horizontal. */
    white-space: pre-wrap;
    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;
}
/* El granate pasa de relleno a borde: el fondo va blanco y el texto negro.
   El logo de n8n es azul marino sobre nodos rosas, asi que se lee mejor sobre
   blanco que sobre el granate. */
.banner-herramienta-n8n {
    background-image: url('../img/herramienta-logo-n8n.webp');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #ffffff;
    border: 2px solid #3d1010;
}
.banner-herramienta-n8n .herramienta-banner-overlay {
    background: transparent;
}
/* El nombre lleva un contorno oscuro para despegarlo de las imagenes de las
   otras tarjetas. Sobre blanco sobra, y ademas emborrona la letra negra. */
.banner-herramienta-n8n .herramienta-banner-nombre {
    color: #111111;
    text-shadow: none;
}
.banner-herramienta-n8n .herramienta-banner-info {
    background: transparent;
    border-color: #3d1010;
    color: #111111;
}
.banner-herramienta-n8n .herramienta-banner-info:hover {
    background: #3d1010;
    border-color: #3d1010;
    color: #ffffff;
}

/* =========================================
   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 antes del primer pintado =====================
   Estas cuatro reglas deciden que se ve mientras la API responde, y por eso
   van en pareja: cada estado oculta explicitamente al otro.

   Por defecto se dibuja el LOGIN. Es lo correcto para quien no tiene sesion y
   tambien lo prudente: ante la duda, no se asoma contenido del portal.

   Con la clase `sesion-activa` --que pone el script en linea del <head> si hay
   pista local de sesion-- se dibuja el portal directamente. Sin esto, el login
   aparecia y desaparecia en cada carga.

   Antes `#pantalla-login` estaba en `display: none` a secas y quien lo hacia
   visible era un script que leia `token_google_ia`, la clave del esquema
   anterior. Al quedar huerfano, el login parpadeaba siempre. */
#pantalla-login { display: flex; }
#contenido-portal { 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));
}


/* =========================================
   ENLACES DE KUBI EN EL CHAT
   =========================================
   No existian: los enlaces se renderizaban en linea, uno pegado al otro y con
   el subrayado azul por defecto del navegador. Se veian como texto roto, no
   como algo pulsable. */

.enlaces-kubi {
    display: flex;
    flex-direction: column;   /* uno por linea, no pegados */
    gap: 10px;
    align-items: flex-start;
    /* Separacion respecto al texto de la respuesta: sin esto el primer boton
       queda pegado al parrafo y parece parte de el. */
    margin-top: 4px;
}

/* El bloque de un modulo bloqueado es una tarjeta, no un boton: necesita mas
   aire alrededor para que se lea como una unidad aparte. */
.enlaces-kubi .modulo-bloqueado-kubi {
    width: 100%;
    margin-top: 2px;
}

.btn-enlace-kubi {
    display: inline-block;
    max-width: 100%;
    padding: 9px 16px;
    border-radius: 20px;
    background: var(--kubi-500, #00cb75);
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;    /* quita el subrayado por defecto */
    line-height: 1.3;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-enlace-kubi:hover {
    background: var(--kubi-600, #00a85f);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 203, 117, 0.3);
}

/* --- Modulo que el usuario todavia no puede abrir --- */
.modulo-bloqueado-kubi {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px dashed var(--kubi-300, #7fe3b8);
    border-radius: 14px;
    background: rgba(0, 203, 117, 0.06);
}

.modulo-bloqueado-titulo {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--texto-oscuro, #1a1a1a);
}

/* El motivo se lee mas apagado: informa, pero lo que invita a actuar es el
   boton del programa que viene debajo. */
.modulo-bloqueado-motivo {
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--kubi-700, #00794a);
    opacity: 0.95;
}

/* La opcion rapida se distingue de la profunda: mismo tamano, menos peso
   visual. Las dos son validas, pero la de a fondo es la recomendada cuando la
   persona pidio mas detalle. */
.btn-enlace-kubi.btn-enlace-rapido {
    background: #ffffff;
    color: var(--kubi-700, #00794a);
    border: 2px solid var(--kubi-300, #7fe3b8);
}

.btn-enlace-kubi.btn-enlace-rapido:hover {
    background: var(--kubi-25, #f2fdf8);
    color: var(--kubi-700, #00794a);
}


/* =========================================
   EL CHAT EN PANTALLAS ANGOSTAS
   =========================================
   Los anchos del panel ya se adaptan, pero el CONTENIDO no: los nombres de los
   modulos son largos --"Guia Detallada: Modulo 2: Nodos Desencadenantes (Starters)"--
   y en un telefono se salian del globo en vez de partirse. */

.enlaces-kubi {
    /* El grupo de botones ocupa el ancho disponible, no el 85% de un globo de
       texto: son controles, no una frase. */
    width: 100%;
    max-width: 100%;
}

.btn-enlace-kubi {
    /* Sin esto un titulo largo estira el boton y desborda el panel. */
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
}

@media (max-width: 900px) {
    /* Menos relleno: en 360px de ancho, 20px por lado se comen el texto. */
    #caja-mensajes { padding: 14px; }
    .mensaje { max-width: 92%; padding: 12px 14px; font-size: 0.93rem; }
    .enlaces-kubi { max-width: 100%; }

    /* La cabecera del chat mas compacta para dejar sitio a la conversacion. */
    #chat-header { padding: 12px 14px; }

    .input-area { padding: 10px 12px; }
    #input-mensaje {
        /* 16px exactos: por debajo, iOS hace zoom al enfocar el campo y
           descuadra toda la pagina. */
        font-size: 16px;
    }
}

/* Pantallas muy angostas: el panel usa casi toda la altura y el texto baja un
   punto, que es lo unico que cabe recortar sin que se lea peor. */
@media (max-width: 400px) {
    #chatbot-flotante.chat-desplegable { height: 90dvh; max-height: 90vh; }
    .mensaje { font-size: 0.9rem; }
    .btn-enlace-kubi { font-size: 0.88rem; padding: 8px 13px; }
}


/* =========================================
   CHAT — SIN DESBORDES
   =========================================
   Aparecia una barra de desplazamiento HORIZONTAL dentro del chat, y el panel
   se salia de la pantalla en el telefono. La causa: los globos y las tarjetas
   no tenian limite de ancho propio, asi que un nombre largo de modulo --o el
   motivo de bloqueo, que cita dos titulos completos-- los estiraba mas alla
   del contenedor. */

#caja-mensajes {
    /* La conversacion se desplaza en vertical y nada mas. */
    overflow-x: hidden;
    overflow-y: auto;
}

.mensaje,
.enlaces-kubi,
.modulo-bloqueado-kubi {
    box-sizing: border-box;
    max-width: 100%;
    /* Palabras sin espacios --una URL, un identificador-- no pueden empujar el
       ancho del contenedor. */
    overflow-wrap: anywhere;
}

.modulo-bloqueado-titulo,
.modulo-bloqueado-motivo {
    overflow-wrap: anywhere;
}

/* El bloque de botones ya ocupa el ancho; sus hijos no deben excederlo. */
.enlaces-kubi > * { max-width: 100%; }

/* Sugerencias de arranque del chat.

   Solo se pintan en una conversacion nueva: ante un campo vacio mucha gente
   no sabe que preguntar y cierra el chat. */
.sugerencias-kubi {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 2px;
}

.sugerencia-kubi {
    background: #ffffff;
    color: var(--kubi-500);
    border: 1px solid var(--kubi-100);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.sugerencia-kubi:hover {
    background: var(--kubi-50, #f0fdf7);
    border-color: var(--kubi-500);
}

/* Voto sobre una respuesta del chat.

   Discreto a proposito: es util para el equipo, no para quien lee. Si pesa
   mas que la respuesta, distrae de lo que la persona vino a buscar. */
.voto-kubi {
    display: flex;
    gap: 4px;
    align-items: center;
    margin: -4px 0 6px 4px;
    font-size: 0.78rem;
    color: var(--texto-suave, #6b7280);
    min-height: 26px;
}

.voto-kubi-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 6px;
    opacity: 0.45;
    transition: opacity 0.2s, background 0.2s;
}

.voto-kubi-btn:hover {
    opacity: 1;
    background: var(--kubi-50, #f0fdf7);
}

.voto-kubi-hecho {
    font-style: italic;
}