/* ==========================================  
   ESTILOS GENERALES Y FUENTES
========================================== */
/* Importación de Fuentes de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Roboto+Condensed:wght@400;700&display=swap');

/* Variables para facilitar el mantenimiento */
:root {
    --font-lato: 'Lato', sans-serif;
    --font-roboto-condensed: 'Roboto Condensed', sans-serif;
}
.description, 
.subtitle,
.info-card {
    font-family: var(--font-lato);
    font-weight: 400;
}

/* IDs específicos del HTML proporcionado para textos */
#hero-desc,
#hero-slider-desc,
#slide-desc,
#news-desc,
#app1-desc,
#app2-desc,
#app1-subtitle,
#app2-subtitle {
    font-family: var(--font-lato);
    font-weight: 400;
}

/* =========================================
   TÍTULOS
   Lato Bold
   ========================================= */
h1, h2, h3, h4, h5, h6,
.title,
.slide-title {
    font-family: var(--font-lato);
    font-weight: 700;
}

/* IDs específicos del HTML proporcionado para títulos */
#hero-title,
#hero-slider-title,
#slide-title,
#news-title,
#app1-title,
#app2-title {
    font-family: var(--font-lato);
    font-weight: 700;
}

/* =========================================
   BOTONES
   Roboto Condensed Bold
   ========================================= */
.cta-button,
.cta-button-secondary,
.app-btn,
button,
.btn {
    font-family: var(--font-roboto-condensed);
    font-weight: 700;
    text-transform: uppercase; /* Opcional, común en botones */
    text-decoration: none;
    display: inline-block; /* Asegura comportamiento de bloque en línea */
}

/* IDs específicos del HTML proporcionado para botones/enlaces CTA */
#hero-cta,
#app1-btn,
#app2-btn {
    font-family: var(--font-roboto-condensed);
    font-weight: 700;
}

/* =========================================
   MENÚ
   Roboto Condensed Regular
   (Selectores genéricos ya que no hay HTML de menú específico)
   ========================================= */
nav,
.menu,
.navbar,
.nav-link,
.menu-item {
    font-family: var(--font-roboto-condensed);
    font-weight: 400;
}

/* ==========================================  
   HERO SECTION - CON BOOTSTRAP GRID  
========================================== */  
.hero-section {  
    min-height: 100vh;  
    display: flex;  
    align-items: center;  
    padding: 40px 0;  
    background: radial-gradient(circle at 50% 50%, #0f172a 0%, #02050a 100%); 
}  

/* COLUMNA 1 - TEXTO IZQUIERDA */  
.text-column {  
    display: flex;  
    flex-direction: column;  
    justify-content: center;  
    color: white;  
    text-align: left; /* Asegurar alineación por defecto */
}  

.text-column h1 {  
    font-family: 'Lato', sans-serif;  
    font-weight: 700;  
    font-size: 44px;  
    color: white;  
    margin-bottom: 28px;  
    line-height: 1.2;  
}  

.text-column p {  
    font-family: 'Lato', sans-serif;  
    font-weight: 400;  
    font-size: 15px;  
    line-height: 1.8;  
    color: rgba(255, 255, 255, 0.75);  
    margin-bottom: 40px;  
}  

/* BOTÓN NEGRO con borde GRADIENTE DORADO-AZUL */  
.cta-button {  
    font-family: 'Roboto Condensed', sans-serif;  
    font-weight: 700;  
    display: inline-block;  
    padding: 14px 36px;  
    background: linear-gradient(#0a0a0a, #0a0a0a) padding-box,  
                linear-gradient(135deg, #cfa346 0%, #2a4880 50%, #cfa346 100%) border-box;  
    color: white;  
    text-decoration: none;  
    border-radius: 30px;  
    transition: all 0.3s ease;  
    width: fit-content;  
    font-size: 14px;  
    position: relative;  
    border: 2px solid transparent;  
}  
.cta-button:hover {
    color: #cfa346;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(207, 163, 70, 0.3);
}

/* COLUMNA 2 - PERSONAJE CENTRO */  
.character-column {  
    position: relative;  
    height: 80vh;  
    min-height: 600px;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
}  

#canvas-container {  
    width: 100%;  
    height: 100%;  
    position: relative;  
}  

canvas {  
    display: block;  
    width: 100%;  
    height: 100%;  
}  

/* COLUMNA 3 - SLIDER DERECHA */  
.slider-column {  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    padding: 20px;  
}  

/* CARD PRINCIPAL con BORDE GRADIENTE DORADO-AZUL */  
.info-card {  
    background: rgba(20, 30, 40, 0.65);  
    backdrop-filter: blur(12px);  
    border-radius: 32px;  
    padding: 32px;  
    color: white;  
    width: 100%;  
    max-width: 400px;  
    min-height: 500px;  
    position: relative;  
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);  
    display: flex;  
    flex-direction: column;  
    border: 2px solid transparent;  
    background-clip: padding-box;  
    -webkit-box-reflect: below 20px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.2)); 
}  

.info-card::before {  
    content: '';  
    position: absolute;  
    top: 0;  
    left: 0;  
    right: 0;  
    bottom: 0;  
    border-radius: 32px;  
    padding: 2px;  
    background: linear-gradient(135deg,  
            #cfa346 0%, /* Dorado */  
            #2a4880 50%, /* Azul claro */  
            #cfa346 100% /* Azul muy claro */  
        );  
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);  
    -webkit-mask-composite: xor;  
    mask-composite: exclude;  
    z-index: -1;  
}  

.info-card h2 {  
    font-family: 'Lato', sans-serif;  
    font-weight: 700;  
    font-size: 24px;  
    margin-bottom: 16px;  
    color: white;  
    flex-shrink: 0;  
}  

.info-card p {  
    font-family: 'Lato', sans-serif;  
    font-weight: 400;  
    font-size: 13px;  
    line-height: 1.7;  
    color: rgba(255, 255, 255, 0.8);  
    margin-bottom: 20px;  
    flex-shrink: 0;  
    min-height: 80px;  
}  

/* IMAGEN DENTRO DEL CARD */  
.card-image {  
    width: 100%;  
    height: 200px;  
    border-radius: 22px;  
    overflow: hidden;  
    margin-bottom: 20px;  
    flex-shrink: 0;  
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);  
}  

.card-image img {  
    width: 100%;  
    height: 100%;  
    object-fit: cover;  
}  

/* INDICADORES DEL SLIDER */  
.slider-indicators {  
    display: flex;  
    justify-content: center;  
    gap: 10px;  
    margin-top: auto;  
    padding-top: 10px;  
}  

.indicator {  
    width: 10px;  
    height: 10px;  
    border-radius: 50%;  
    background: rgba(255, 255, 255, 0.25);  
    cursor: pointer;  
    transition: all 0.3s ease;  
}  

.indicator.active {  
    background: rgba(255, 255, 255, 0.9);  
    transform: scale(1.3); 
    border-radius: 50%;  
}  

.indicator:hover {  
    background: rgba(255, 255, 255, 0.5);  
}  

/* LOADING */  
#loading {  
    font-family: 'Lato', sans-serif;  
    font-weight: 700;  
    position: fixed;  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%);  
    color: white;  
    font-size: 24px;  
    background: rgba(10, 15, 20, 0.95);  
    padding: 30px 50px;  
    border-radius: 20px;  
    z-index: 1000;  
    border: 1.5px solid rgba(255, 255, 255, 0.3);  
}  

/* FOOTER */  
footer {  
    font-family: 'Lato', sans-serif;  
    font-weight: 400;  
    background: rgba(10, 15, 20, 0.9);  
    color: rgba(255, 255, 255, 0.7);  
    padding: 20px 0;  
    text-align: center;  
}  

/* ==========================================  
   SECCIÓN 2 - MAESTRÍA (MAIN CONTAINER)
========================================== */ 
.main-container { 
    position: relative; 
    width: 100%; 
    height: 100vh; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    background-color: #0f172a; /* Fallback color */ 
} 

/* Background & Overlay */ 
.background-layer { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-size: cover; 
    background-position: center; 
    transition: background-image 0.5s ease-in-out; 
    z-index: 0; 
} 

.overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    /* Gradient similar to the image: Dark blue at bottom/left, fading out */ 
    background: linear-gradient(90deg, rgba(12,25,50,0.95) 0%, rgba(12,25,50,0.8) 40%, rgba(12,25,50,0.4) 100%); 
    z-index: 1; 
} 

/* Content Layout */ 
.content-wrapper { 
    position: relative; 
    z-index: 2; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    width: 90%; 
    max-width: 1400px; 
    margin: 0 auto; 
    padding-top: 50px; 
    height: 70%; 
} 

/* Left Text Section */ 
.text-section { 
    flex: 1; 
    max-width: 500px; 
    color: #fff; 
    padding-right: 40px; 
    opacity: 0; 
    transform: translateY(20px); 
    animation: fadeInUp 0.8s forwards; 
} 

.slide-title { 
    font-size: 5rem; 
    font-weight: 700; 
    margin-bottom: 20px; 
    line-height: 1.1;
    color:white;
} 

.slide-desc { 
    font-size: 1rem; 
    line-height: 1.6; 
    margin-bottom: 30px; 
    color: #e0e0e0; 
} 

.cta-button-secondary { 
    display: inline-block; 
    padding: 12px 30px; 
    border: 1px solid #d4af37; /* Goldish border */ 
    border-radius: 30px; 
    color: #fff; 
    text-decoration: none; 
    font-weight: 600; 
    background: linear-gradient(90deg, rgba(30,41,59,1) 0%, rgba(51,65,85,1) 100%); 
    transition: all 0.3s ease; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.3); 
} 

.cta-button-secondary:hover { 
    background: #d4af37; 
    color: #0f172a; 
} 

/* Slider Section (Cards) */ 
.slider-section { 
    flex: 1; 
    display: flex; 
    align-items: center; 
    justify-content: flex-start; /* Align to left of this section */ 
    overflow: hidden; /* Hide cards that go off screen */ 
    height: 100%; 
    position: relative; 
} 

.cards-container { 
    display: flex; 
    align-items: center; 
    gap: 20px; 
    transition: transform 0.5s ease; 
    padding-left: 20px; /* Slight offset */ 
} 

.card { 
    width: 220px; 
    height: 320px; 
    border-radius: 20px; 
    background-size: cover; 
    background-position: center; 
    flex-shrink: 0; 
    position: relative; 
    cursor: pointer; 
    transition: all 0.5s ease; 
    opacity: 0.6; 
    transform: scale(0.9); 
} 

.card::after { 
    content: ''; 
    position: absolute; 
    top: 0; left: 0; right: 0; bottom: 0; 
    border-radius: 20px; 
    background: rgba(0,0,0,0.3); 
    transition: all 0.3s; 
} 

/* Active Card Style */ 
.card.active { 
    width: 280px; /* Larger */ 
    height: 400px; 
    opacity: 1; 
    transform: scale(1); 
    border: 4px solid #fff; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.5); 
    z-index: 10; 
} 

.card.active::after { 
    background: rgba(0,0,0,0); /* Remove darkness */ 
} 

/* Pagination */ 
.pagination { 
    position: absolute; 
    bottom: 40px; 
    left: 50%; 
    transform: translateX(-50%); 
    display: flex; 
    gap: 15px; 
    z-index: 10; 
} 

.dot { 
    width: 12px; 
    height: 12px; 
    border-radius: 50%; 
    background-color: #fff; 
    opacity: 0.5; 
    cursor: pointer; 
    transition: all 0.3s; 
} 

.dot.active { 
    background-color: #fbbf24; /* Yellow/Gold */ 
    opacity: 1; 
    transform: scale(1.2); 
} 

/* ==========================================  
   SECCIÓN DE APLICACIONES  
========================================== */  
.apps-section {  
    background: #f8f8f8;  
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 
}  

/* CONTENEDOR GLOBAL */  
.app-global-wrapper {  
    position: relative;  
    width: 100%;  
    min-height: 250px;   
    display: flex; 
    justify-content: flex-end; /* Alinea la tarjeta a la derecha por defecto */ 
    padding: 20px; 
}  

/* Invertir el flujo para el diseño a la derecha */  
.app-global-wrapper.reverse {  
    justify-content: flex-start; /* Alinea la tarjeta a la izquierda */ 
}  

/* Contenedor relativo para posicionar tarjeta y personaje */  
.app-wrapper {  
    position: relative; 
    display: flex;  
    align-items: center;  
    width: 100%;  
    max-width: 500px; /* Ancho máximo de la composición */ 
}  

/* CARD CON CONTENIDO */  
.app-content-card {  
    background: #e6e6e6; /* Gris claro */ 
    border-radius: 40px;  
    padding: 10px 30px 30px 30px;  
    box-shadow: none;   
    position: relative;  
    z-index: 1;   
    width: 100%;  
}  

/* Estilos Específicos de Alineación */ 
.app-content-card.align-right { 
    text-align: right; 
    padding-left: 140px; /* Espacio para icono y personaje a la izquierda */ 
    padding-right: 40px; 
} 

.app-content-card.align-left { 
    text-align: left; 
    padding-right: 140px; /* Espacio para icono y personaje a la derecha */ 
    padding-left: 40px; 
} 

/* Ajustes de márgenes para la composición global */ 
.app-global-wrapper .app-content-card { 
    margin-left: 40px;  
} 

.app-global-wrapper.reverse .app-content-card { 
    margin-left: 0; 
    margin-right: 40px;  
} 

/* FONDO AZUL CON ICONO (Absolute) */  
.icon-background {  
    position: absolute;  
    top: 0;  
    width: 100px;   
    height: 100px;  
    z-index: 2;  
    display: flex; 
    align-items: center; 
    justify-content: center; 
}  

/* Posición para Card 1 (Izquierda - Icono a la Izquierda) */  
.icon-background.left {  
    left: 5px; 
    top: 5px;  
    border-bottom-right-radius: 1px; 
    border-bottom-left-radius: 1px; 
}  

/* Posición para Card 2 (Derecha - Icono a la Derecha) */  
.icon-background.right {  
    right: 0;  
    left: auto;  
    /* Radio de bordes detallado según imagen invertida */ 
    border-top-right-radius: 40px; /* Coincide con card */ 
    border-top-left-radius: 15px; 
    border-bottom-left-radius: 40px; /* Curva grande interna */ 
    border-bottom-right-radius: 15px; 
}  

.icon-background svg { 
    width: 50px; 
    height: 50px; 
} 

/* PERSONAJE */  
.character-container {  
    width: 250px;   
    height: 250px;   
    position: absolute;  
    z-index: 10;  
    bottom: -50px;  
}  

.character-container.left {  
    left: -80px;   
}  

.character-container.right {  
    right: -80px;  
}  

.character-container img {  
    width: 100%;  
    height: 100%;  
    object-fit: contain;  
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));  
}  

/* Textos y Botones de Apps */  
.app-content-card h3 {  
    font-size: 28px;   
    color: #111e33; 
    font-weight: 700; 
    margin-top: 10px; 
    margin-bottom: 5px; 
    line-height: 1.2; 
}  

.app-content-card .subtitle {  
    color: #111e33; 
    font-weight: 600; 
    font-size: 16px; 
    margin-bottom: 20px; 
}  

.app-content-card .description {  
    color: #666; 
    font-size: 14px; 
    line-height: 1.5; 
    margin-bottom: 30px;  
}  

/* Alineación de la descripción */ 
.app-content-card.align-right .description { 
    margin-left: auto; 
    margin-right: 0; 
} 
.app-content-card.align-left .description { 
    margin-right: auto; 
    margin-left: 0; 
} 

.app-btn {  
    display: inline-block;  
    width: fit-content;  
    padding: 12px 40px;  
    background: #532d84;  
    color: white; 
    border-radius: 30px; 
    text-decoration: none; 
    font-weight: 600; 
    transition: 0.3s; 
}  

/* Alineación del Botón */ 
.app-content-card.align-right .app-btn { 
    margin-left: auto; 
    margin-right: 0; 
} 
.app-content-card.align-left .app-btn { 
    margin-right: auto; 
    margin-left: 0; 
} 

.app-btn:hover { 
    background: #402068; 
    color: white; 
} 

/* ==========================================  
   SECCIÓN 3 - NOTICIA DEL MES  
========================================== */ 
.noticia-section { 
    background: linear-gradient(135deg, #0a1b2b 0%, #000000 100%); 
    min-height: 100vh; 
    display: flex; 
    align-items: center; 
} 

.noticia-content { 
    display: flex; 
    width: 100%; 
    min-height: 100vh; 
} 

/* Video Container */ 
.video-container { 
    flex: 0 0 50%; 
    width: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

.video-container iframe { 
    width: 100%;
    height: 100%;
    max-height: 80vh; 
    border-radius: 8px; 
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); 
} 

/* Text Container */ 
.text-container { 
    flex: 0 0 50%; 
    width: 50%; 
    color: #ffffff; 
    padding: 60px 80px; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
} 

.title { 
    font-size: 52px; 
    font-weight: 700; 
    margin-bottom: 30px; 
    color: #ffffff; 
    line-height: 1.2; 
} 

.subtitle { 
    font-size: 16px; 
    font-weight: 400; 
    margin-bottom: 30px; 
    color: #e0e0e0; 
    line-height: 1.7; 
} 

.description { 
    font-size: 16px; 
    color: white; 
    line-height: 1.8; 
} 


/* ==========================================  
   ANIMACIONES GENERALES
========================================== */ 
@keyframes fadeInUp { 
    to { 
        opacity: 1; 
        transform: translateY(0); 
    } 
} 

.fade-in { 
    animation: fadeIn 0.5s forwards; 
} 

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

/* ==========================================  
   RESPONSIVE DESIGN (MEDIA QUERIES)
========================================== */ 

/* Large (LG) - 992px to 1199px */  
@media (max-width: 1199px) {  
    .text-column {  
        text-align: center;  
        align-items: center;  
    }  

    .character-column {  
        height: 60vh;  
        min-height: 500px;  
    }  

    .info-card {  
        max-width: 480px;  
        min-height: 550px;  
    }  

    .card-image {  
        height: 300px;  
    }  
}  

/* Medium (MD) - 768px to 991px */  
@media (max-width: 991px) {  
    .text-column h1 {  
        font-size: 36px;  
    }  

    .text-column p {  
        font-size: 14px;  
    }  

    .character-column {  
        height: 55vh;  
        min-height: 450px;  
    }  

    .info-card {  
        max-width: 100%;  
        min-height: 520px;  
        padding: 26px;  
    }  

    .info-card h2 {  
        font-size: 22px;  
    }  

    .card-image {  
        height: 280px;  
    }
    
    /* Sección 3 Responsive */
    .noticia-content { 
        flex-direction: column; 
        min-height: auto; 
    } 

    .video-container, 
    .text-container { 
        flex: 1; 
        width: 100%; 
    } 

    .video-container { 
        padding: 30px; 
    } 

    .text-container { 
        padding: 50px 40px; 
    } 

    .title { 
        font-size: 40px; 
    } 
    
    /* Slider Section Responsive */
    .content-wrapper { 
        flex-direction: column; 
        justify-content: center; 
        text-align: center; 
        padding-top: 20px; 
    } 
     
    .text-section { 
        padding-right: 0; 
        margin-bottom: 30px; 
        max-width: 100%;
    } 
 
    .slide-title { 
        font-size: 3rem; 
    } 
     
    .slider-section { 
        width: 100%; 
        justify-content: center; 
    } 
     
    .cards-container { 
        padding-left: 0; 
    } 
}  

/* Small (SM) - 576px to 767px */  
@media (max-width: 767px) {  
    .text-column h1 {  
        font-size: 32px;  
    }  

    .character-column {  
        height: 50vh;  
        min-height: 400px;  
    }  

    .info-card {  
        min-height: 500px;  
        padding: 24px;  
    }  

    .info-card h2 {  
        font-size: 20px;  
    }  

    .card-image {  
        height: 250px;  
    }
    
    /* App Section Responsive */
    .app-global-wrapper {  
        justify-content: center !important;  
        padding: 0 15px;  
        margin-bottom: 60px; 
    }  
     
    .app-global-wrapper.reverse { 
        justify-content: center !important; 
    } 
 
    .app-wrapper {  
        flex-direction: column;  
        max-width: 100%; 
    }  
     
    .app-global-wrapper .app-content-card, 
    .app-global-wrapper.reverse .app-content-card { 
        margin: 0; 
        padding-top: 60px; 
        padding-left: 30px !important; 
        padding-right: 30px !important; 
        text-align: center !important; /* Centrado en móvil */ 
    } 
     
    .app-content-card .description,  
    .app-content-card .app-btn { 
        margin: 0 auto !important; /* Centrado en móvil */ 
    } 
      
    .icon-background {  
        width: 80px; 
        height: 80px; 
    } 
     
    .icon-background svg { 
        width: 40px; 
        height: 40px; 
    } 
 
    .character-container {  
        position: relative;  
        width: 200px;  
        height: 200px;  
        bottom: auto;  
        left: auto !important;  
        right: auto !important;  
        margin: -40px auto 0 auto; 
        order: -1;  
    }  
}


.nav-container {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #051429; 
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 80px;
    padding-bottom: 12px;
    border-bottom: 4px solid #dcae44;
    padding-left: 40px;
    padding-right: 40px;
    width: fit-content;
    position: relative;
}

.nav-links a {
    text-decoration: none;
    color: #8cb9f2;
    font-size: 19px;
    font-weight: 500;
}

.dropdown-toggle::after{
    color:#d7a941;
}
.icon {
    color: #d7a941 !important;
}