@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&family=PT+Sans:wght@400;700&display=swap');



:root {

    --primary-color: #ffffff;

    --secondary-color: #800f39;

    --text-dark: #333;

    --text-light: #fff;

    --gray-light: #f5f5f5;

}



/* =========================================

   1. ESTILOS GENERALES Y RESET

   ========================================= */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

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

    margin: 0;

    padding: 0;

    color: var(--text-dark);

    box-sizing: border-box;

    overflow-x: hidden;

}



h1, h2, h3, h4 {

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

}



/* =========================================

   2. HEADER Y NAVEGACIÓN

   ========================================= */

.top-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    position: relative;

    z-index: 1000;

}



/* Logo */

.nav-logo {

    height: 70px;

    width: auto;

    margin-right: 30px;

}



.main-nav .logo {

    height: 80px;

}

.main-nav .logo-center {

    height: 50px;

}



/* Barra de Navegación */

.main-nav {

    background: linear-gradient(to bottom, #800f39 1%, rgba(150, 42, 76, 0.0) 80%);

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

    display: flex;

    justify-content: flex-start;

    align-items: center;

    padding: 25px 3%;

    box-shadow: 0 2px 5px rgba(255, 255, 255, 0.005);

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 1000;

}



.main-nav.solid {

    background: #800f39;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); 

    padding: 15px 3%;

}



.main-nav .menu-items {

    display: flex;

    gap: 70px;

    list-style: none;

    margin: 0;

    padding: 0;

    align-items: center;

}



.main-nav .menu-items a {

    color: var(--text-light);

    text-decoration: none;

    font-weight: bold;

    text-transform: uppercase;

    font-size: 0.9em;

    letter-spacing: -0.5px;

    white-space: nowrap;

    position: relative;

    top: -5px;

    padding-bottom: 2px;

    padding-top: 4px;

    transition: color 0.3s ease;

}



.main-nav .menu-items a:hover {

    color: #ccc;

}



/* Menú Móvil */

.menu-toggle-top {

    display: block; 

    flex-direction: column;

    justify-content: space-around;

    height: 50px;

    width: 35px;     

    background: none;

    border: none;

    color: var(--text-light);

    font-size: 1.8rem;

    cursor: pointer;

    margin-right: 20px;

    padding: 5px;

}



.top-menu-mobile {

    display: none;

    position: fixed;

    top: 90px;

    left: 0;

    width: 50%;

    background-color: #363535c2;

    padding: 20px 0;

    flex-direction: column; 

    align-items: center;

    gap: 10px;

    z-index: 1001;

}



.top-menu-mobile.active {

    display: flex; 

}



.top-menu-mobile a {

    color: var(--text-light);

    text-decoration: none;

    padding: 10px 0;

    width: 90%;

    text-align: center;

    border-bottom: 1px solid rgba(253, 246, 246, 0.877);

}

/*numero de whapsapp*/

.ws-link {

    /* --- LA SOLUCIÓN DE INGENIERÍA --- */

    white-space: nowrap !important; /* Obliga al texto a mantenerse en una sola línea */

    

    /* Estética */

    color: inherit;

    text-decoration: none !important;

    font-weight: bold;

    display: inline-block; /* Permite que respete márgenes y saltos */

    margin: 2px 0;         /* Un poco de aire arriba y abajo */

    font-size: 0.95rem;    /* Ajusta si se ven muy grandes */

}



.ws-link:hover {

    color: #800f39;

}



.ws-link i {

    margin-right: 6px;

}



/* "Ver Más" */

.menu-ver-mas { position: relative; }

.ver-mas-gatillo { display: none; }

.ver-mas-dropdown {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    flex-direction: row;

    gap: 70px; 

}



/* =========================================

   3. VIDEO SECTION

   ========================================= */

.video-section {

    width: 100%;

    height: 500px;

    position: relative;

    overflow: hidden;

    border-radius: 15px;

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

    margin-bottom: 40px;

    margin-top: 1px;

    z-index: 100;

}



.video-container {

    width: 100%;

    height: 100%;

    position: relative;

}



.responsive-video {

    width: 100%;

    height: 100%;

    object-fit: cover;

    position: absolute;

    top: 0;

    left: 0;

}

/* =========================================
   3. Banner de estudia con nosotros
   ========================================= */
/* Estilos para PC (Escritorio) */
.banner-intermedio-container {
    width: 100%;         
    margin: 0;             
    padding: 0;           
    position: relative;
    z-index: 10;
    margin-top: 0;        
    background-color: #fff;
    overflow: hidden;      
}

.banner-intermedio-container img {
    width: 100%;          
    height: auto;          
    display: block;        
}


/* =========================================

   4. TABS SECTION

   ========================================= */

.tabs-section {

    padding: 60px 20px;

    max-width: none;

    margin: 0 auto;

    position: relative;

}



.tabs-container {

    display: flex;

    flex-direction: column;

}



.tabs-header {

    display: flex;

    justify-content: center;

    border-bottom: 2px solid #6d1a1a;

    margin: 30px 0;

    order: 2;

}





.tab-btn {

    padding: 12px 25px;

    background: none;

    border: none;

    font-family: 'Montserrat';

    font-size: 16px;

    font-weight: 500;

    color: #555;

    cursor: pointer;

    position: relative;

    transition: all 0.3s;

}



.tab-btn.active {

    color: #6d1a1a;

    font-weight: 600;

}



.tab-btn.active::after {

    content: '';

    position: absolute;

    bottom: -2px;

    left: 0;

    width: 100%;

    height: 3px;

    background-color: #6d1a1a;

}



.tab-content {

    opacity: 0;

    padding: 20px 0;

    position: absolute;

    top: 20px;

    left: 20px;

    right: 20px;

    transition: opacity 0.5s ease-in-out;

    pointer-events: none;

}



.tab-content.active {

    opacity: 1;
    position: static;

    pointer-events: auto !important;

}



.tab-grid {

    display: grid;

    grid-template-columns: 1fr;

    gap: 30px;

    align-items: center;

    padding: 20px;

}



.full-image-container {

    width: 100%;

    max-width: 100%;

    overflow: hidden;

}

.full-image-container img {

    width: 100%;

    height: auto;

    display: block;

}



@keyframes fadeInFromBottom {

    from { opacity: 0; transform: translateY(50px); }

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

}

.tab-content.active .anim-bottom {

    animation: fadeInFromBottom 0.8s ease-out forwards;

}



/* BOTÓN "MÁS INFORMACIÓN" */

.full-image-container.relative-container {

    position: relative !important; 

}



.btn-mas-info {

    position: absolute;

    bottom: 20px;

    right: 20px;

    background-color: white; 

    color: #800f39;              

    padding: 15px 30px;        

    border-radius: 5px;        

    font-weight: bold;

    text-decoration: none;

    font-size: 1.2rem;

    box-shadow: 0 4px 6px rgba(0,0,0,0.5); 

    z-index: 9999 !important;

    cursor: pointer !important;

    pointer-events: auto; 

    transition: background 0.3s ease, transform 0.2s;

}



.btn-mas-info:hover {

    background-color: #fefafb; 

    transform: translateY(-2px); 

}





@media (max-width: 768px) {

    .btn-mas-info {

        bottom: 10px;

        right: 10px;    

        padding: 8px 15px;

        font-size: 0.8rem;

    }

}



/* =========================================

   5. CARDS SECTION

   ========================================= */

.cards-section {

    padding: 60px 20px;

    background-color: #f9f9f9;

}



.cards-container {

    display: grid;

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

    gap: 10px; 

    max-width: none;

    margin: 0 auto;

}



.card {

    background-color: white;

    border-radius: 10px;

    overflow: hidden;

    box-shadow: 0 5px 15px rgba(0,0,0,0.1);

    transition: transform 0.3s;

    position: relative;

    display: flex;

    flex-direction: column;

}



.card:hover {

    transform: translateY(-5px);

}



.card-img {

    width: 100%;

    height: 230px;

    overflow: hidden;

    position: relative;

}



.card-img img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: opacity 0.5s ease, transform 0.5s ease;

}



.card-img-default {

    position: absolute;

    top: 0;

    left: 0;

}



.card-img-hover {

    opacity: 0;

    position: absolute;

    top: 0;

    left: 0;

    transition: opacity 0.3s ease;

}



.card:hover .card-img-default { opacity: 0; }

.card:hover .card-img-hover { opacity: 1; }



.card-overlay-title {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    display: block;

    justify-content: center;

    align-items: center;

    text-align: left;

    z-index: 10;

    background-color: rgba(0, 0, 0, 0.4); 

    border-radius: 15px 0 15px 0; 

    opacity: 1; 

    transition: opacity 0.3s ease;

}



.card-overlay-title h2 {

    color: white;

    font-size: 1.5em; 

    padding: 10px 15px;

    font-weight: bold;

    text-transform: uppercase;

    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);

    margin: 0;

}

.card:hover .card-overlay-title { opacity: 0.9; }



/* =========================================

   6. NEWS SECTION (SLIDES)

   ========================================= */

.title-section {

    text-align: center;

    position: relative;

    padding: 0 15px;

    height: 44px;

    font-family: "PT Sans", sans-serif;

    font-size: 16px;

}



.slide-cards-section {

    padding: 6px 20px;

    max-width: none;

    margin: 0 auto;

}



.slide-cards-container {

    display: grid;

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

    gap: 30px;

}



.slide-card {

    background-color: white;

    border-radius: 10px;

    overflow: hidden;

    box-shadow: 0 5px 15px rgba(0,0,0,0.1);

    position: relative;

}



.slide-card-img {

    height: 200px;

    overflow: hidden;

}

.slide-card-img img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.slide-card-content {

    padding: 20px;

    position: relative;

    overflow: hidden;

}



.slide-card h3 {

    color: #6d1a1a;

    margin-bottom: 10px;

}



.slide-card .hidden-text {

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background-color: rgba(109, 26, 26, 0.9);

    color: white;

    padding: 20px;

    transition: left 0.3s ease;

    display: flex;

    align-items: center;

}

.slide-card:hover .hidden-text { left: 0; }



/* =========================================

   7. WIDGETS (CHAT & CURSOR)

   ========================================= */

/*.cursor-seguidor {
    width: 30px;
    height: 30px;
    background-color: transparent;
    border: 2px solid #800f39;
    border-radius: 50%;
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease-out;
    z-index: none !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
.punto-seguidor {
    width: 6px;
    height: 6px;
    background-color: #800f39;
    border-radius: 50%;
} */


.chatbot-container {

    position: fixed;

    bottom: 25px;

    right: 30px;

    z-index: 1000;

    width: 350px;

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

    /* --- SOLUCIÓN A CAPA FANTASMA --- */

    pointer-events: none;

}



.chatbot-toggle {

    background-color: #800f39;

    color: white;

    border: none;

    border-radius: 50%;

    width: 60px;

    height: 60px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

    transition: all 0.3s;

    margin-left: auto;

    /* --- HABILITAR CLIC EN EL BOTÓN --- */

    pointer-events: auto;

}



.chatbot-toggle:hover { transform: scale(1.1); }



.chatbot-box {

    background-color: white;

    border-radius: 15px;

    box-shadow: 0 5px 15px rgba(235, 10, 10, 0.2);

    overflow: hidden;

    display: flex;

    flex-direction: column;

    height: 450px;

    transform: translateY(20px);

    opacity: 0;

    transition: all 0.3s;

    pointer-events: none;

}

.chatbot-box.active {

    display: flex;

    transform: translateY(0);

    opacity: 1;

    pointer-events: auto;

}



.chatbot-header {

    background-color: #333;

    color: white;

    padding: 15px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.chatbot-messages {

    flex-grow: 1;

    padding: 15px;

    overflow-y: auto;

    background-color: #f9f9f9;

}



.message-container {

    display: flex;

    flex-direction: column;

    margin-bottom: 15px;

    animation: fadeIn 0.3s ease-out;

    pointer-events: none;

}



.user-question {

    align-self: flex-end;

    background-color: #800f39;

    color: white;

    border-radius: 18px 18px 0 18px;

    padding: 10px 15px;

    max-width: 80%;

    margin-bottom: 5px;

}



.bot-answer {

    align-self: flex-start;

    background-color: #e6e6e6;

    color: #333;

    border-radius: 18px 18px 18px 0;

    padding: 12px 15px;

    max-width: 80%;

}



.quick-questions {

    display: flex;

    flex-direction: column;

    padding: 10px;

    background-color: #f9f9f9;

    border-top: 1px solid #eee;

    max-height: 200px; 

    overflow-y: auto;

}



.quick-question {

    background-color: white;

    border: 1px solid #ddd;

    border-radius: 20px;

    padding: 10px 15px;

    margin: 5px 0;

    cursor: pointer;

    transition: all 0.2s;

    font-size: 13px;

    text-align: left;

}

.quick-question:hover {

    background-color: #f0f0f0;

    border-color: #800f39;

    color: #800f39;

}



.chatbot-footer {

    padding: 10px;

    text-align: center;

    font-size: 12px;

    color: #777;

    background-color: #f5f5f5;

}



@keyframes fadeIn {

    from { opacity: 0; transform: translateY(10px); }

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

}



.back-to-top {

    position: fixed;

    bottom: 20px;

    right: 20px;

    width: 45px;

    height: 45px;

    background-color: #800f39;

    color: white;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    cursor: pointer;

    opacity: 0;

    visibility: hidden;

    transition: all 0.3s;

    z-index: 999;

    border: none;

}

.back-to-top.active { opacity: 1; visibility: visible; }



/* =========================================

   8. FOOTER SECTION

   ========================================= */

.footer {

    width: 100% !important; 

    max-width: none !important;

    margin-left: 0 !important;

    margin-right: 0 !important;

    background-color: #191919;

    color: #ffffff;           

    box-sizing: border-box; 

    display: grid;

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

    gap: 30px;

    justify-content: center;

    padding: 40px 5%; 

}



.footer .col {

    padding: 0 15px;

    border-right: 1px solid rgb(255, 255, 255); 

}



.footer .col:last-child {

    border-right: none;

}



.footer h3 {

    color: var(--text-light);

    border-bottom: 2px solid #800f39; 

    padding-bottom: 10px;

    margin-bottom: 15px;

}



.footer p, .footer a {

    color: var(--gray-light);

    text-decoration: none;

    display: block;

    margin-bottom: 5px;

}



.footer .news-item {

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

    padding: 10px 0;

}

.footer .news-item p {

    font-weight: bold;

}



.footer .social-intro-text {

    margin-bottom: 25px;

    text-align: left;

}



.footer .social-icons {

    display: flex;

    flex-direction: row; 

    gap: 15px;

    align-items: center;

}



.footer .social-icons img {

    width: 55px;

    height: 55px;

}



.footer-logo-social {

    text-align: left; 

}



.footer .logo-container {

    display: flex;

    flex-direction: column;

    align-items: flex-start; 

    margin-bottom: 20px;

}



.footer .footer-logo {

    width: 100px; 

    height: auto;

    margin-bottom: 10px;

}



.footer .logo-container h3 {

    text-align: left;

    border-bottom: none; 

}



/* =========================================
   9. RESPONSIVE (AJUSTE: CABECERA EST�TICA)
   ========================================= */

@media (max-width: 768px) {
    /* 1. CABECERA: Se cambia a 'absolute' para que no siga el scroll */
    .main-nav {
        position: absolute; /* CAMBIO: Ahora se queda fija en el top del documento */
        top: 0;
        left: 0;
        width: 100%;
        height: 70px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 5%;
        z-index: 1001;
        background: linear-gradient(to bottom, #800f39 1%, rgba(150, 42, 76, 0.0) 80%) !important;
        box-shadow: none; 
        transition: background 0.3s ease;
    }
    
    .top-menu-mobile {
        z-index: 1200 !important; /* Mayor al 1001 de la navegaci�n */
        position: fixed !important; 
    }
    .menu-toggle-top {
        z-index: 1300 !important; 
    }

    .nav-logo-link {
        order: 2; 
        margin-right: 0;
    }

    .nav-logo {
        height: 45px; 
        width: auto;
    }

    .menu-toggle-top {
        order: 1; 
        margin-right: 0;
        display: flex;
        align-items: center;
    }

    /* 2. VIDEO (Al tope, bajo el difuminado) */
    .video-section {
        margin-top: 0; 
        height: 250px;
        position: relative;
        z-index: 100;
        margin-bottom: 0;
        border-radius: 0; 
    }

    .responsive-video {
        height: 100%;
        object-fit: cover;
    }

    /* 3. BOTONERA 3x2 (Se queda est�tica con el resto del header) */
    .main-nav .menu-items {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr); 
        gap: 8px;
        width: 100%;
        position: absolute;
        top: 250px; 
        left: 0;
        background-color: #f9f9f9; 
        padding: 15px;
        box-sizing: border-box;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    .main-nav .menu-items li:first-child {
        display: none;
    }

    .main-nav .menu-items a {
        background-color: white;
        color: #800f39 !important;
        border: 1px solid #ddd;
        border-radius: 6px;
        padding: 12px 2px;
        font-size: 0.68rem;
        text-align: center;
        display: block;
        font-weight: 700;
        text-transform: uppercase;
        top: 0; 
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    /* 4. EMPUJAR EL CONTENIDO (CALENDARIO / CARDS) */
    .tabs-section {
        margin-top: 150px; 
        padding: 20px 10px;
    }

    .cards-container, 
    .slide-cards-container {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .footer {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer .col {
        border-right: none;
        border-bottom: 1px solid #333;
        padding-bottom: 20px;
    }
    
}


/* Ajustes para pantallas muy peque�as */
@media (max-width: 480px) {
    .video-section {
        height: 200px;
    }
    .main-nav .menu-items {
        top: 200px; 
    }
    .main-nav .menu-items a {
        font-size: 0.62rem;
        padding: 10px 1px;
    }
    .tabs-section {
        margin-top: 140px;
    }
}

/* ============================================================
   DISE�O FINAL: HEADER ARRIBA (L:Hamburguesa, R:Logo) + MENU ABAJO
   ============================================================ */
@media (max-width: 768px) {
    /* 1. Contenedor del Nav: Fijo y con flujo vertical descendente */
    .paginas-internas .main-nav {
        position: fixed !important;
        top: 0 !important;
        left: 0;
        width: 100%;
        display: flex !important;
        flex-direction: column !important; /* Asegura: Header ARRIBA, Botones ABAJO */
        padding: 0 !important;
        background: #800f39 !important;
        z-index: 1100 !important;
        height: auto !important;
    }

    /* 2. FILA SUPERIOR: Logo y Bot�n de Hamburguesa */
    .paginas-internas .nav-logo-link {
        order: 1 !important; /* Posici�n 1 */
        display: block !important;
        margin: 12px auto 6px auto !important; /* Centrado con aire */
        text-align: center;
        
    }

    .paginas-internas .nav-logo {
        height: 50px !important;
        width: auto;
    }

    .paginas-internas .menu-toggle-top {
        order: 1 !important;
        position: absolute !important;
        top: 18px !important; /* Alineado verticalmente con el logo */
        left: 15px !important; /* Hamburguesa a la izquierda */
        margin: 0 !important;
        font-size: 1.6rem;
    }

    /* 3. FILA INFERIOR: Men� de Navegaci�n 3x2 */
    .paginas-internas .main-nav .menu-items {
        order: 2 !important; /* Posici�n 2 (Debajo del logo) */
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        width: 100% !important;
        padding: 5px 10px 15px 10px !important;
        background-color: #800f39 !important;
        position: static !important;
        margin: 0 !important;
    }

    /* Estilo de los botones blancos para m�xima legibilidad */
    .paginas-internas .main-nav .menu-items a {
        background-color: white !important;
        color: #800f39 !important;
        border: 1px solid #ddd;
        border-radius: 6px;
        padding: 12px 2px;
        font-size: 0.68rem;
        text-align: center;
        display: block;
        font-weight: 700;
        text-transform: uppercase;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    /* Ocultar el link de 'Inicio' en m�vil como en el dise�o base */
    .paginas-internas .main-nav .menu-items li:first-child {
        display: none !important;
    }

    /* 4. LA CLAVE DE DISE�O: Empuje de contenido */
    /* Evita que el header interno se oculte detr�s del nav fijo */
    body.paginas-internas {
        padding-top: 195px !important; /* Espacio calculado para el bloque completo */
        display: block !important;
    }

    /* Reset de m�rgenes para asegurar que el contenido empiece limpio */
    .paginas-internas .tabs-section,
    .paginas-internas main,
    .paginas-internas section:first-of-type {
        margin-top: 0 !important;
        position: relative !important;
    }
}

/* =========================================
   10. BANNER INTERMEDIO (NUEVO)
   ========================================= */

/* Ajustes Responsive (M�vil) */
@media (max-width: 768px) {
    
    .banner-intermedio-container {
        margin-top: 160px; /* Ajusta este valor si los botones tapan la imagen */
        margin-bottom: 20px;
        padding: 0 10px; /* Un poco de aire a los lados en m�vil */
    }

    .tabs-section {
        margin-top: 0 !important; /* Reseteamos el margen antiguo */
        padding-top: 20px;
    }
}