/* ========================================== 
   ESTILOS GENERALES Y FUENTES 
========================================== */ 
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Roboto+Condensed:wght@400;700&display=swap'); 
 
:root { 
    --fs-hero-title: clamp(2rem, 4.3vw, 6.5rem); 
    --fs-section-title: clamp(1.8rem, 4vw, 6.2rem); 
    --fs-body: clamp(0.5rem, 1.1vw, 2rem); 
    --font-lato: 'Lato', sans-serif; 
    --font-roboto-condensed: 'Roboto Condensed', sans-serif; 
} 


/* ========================================= 
   TIPOGRAFÍA Y ELEMENTOS GLOBALES
   ========================================= */ 
.unisalle-title, .unisalle-slide-title, #unisalle-hero-title, #unisalle-hero-slider-title, #unisalle-news-title, #unisalle-app1-title, #unisalle-app2-title { 
    font-family: var(--font-lato); 
    font-weight: 700; 
} 
 
.unisalle-description, .unisalle-subtitle, .unisalle-info-card, #unisalle-hero-desc, #unisalle-hero-slider-desc, #unisalle-slide-desc, #unisalle-news-desc, #unisalle-app1-desc, #unisalle-app2-desc, #unisalle-app1-subtitle, #unisalle-app2-subtitle { 
    font-family: var(--font-lato);
    font-size: var(--fs-body) !important; 
    font-weight: 400; 
} 
 
#unisalle-hero-title, .unisalle-slide-title, .unisalle-title { 
    font-size: var(--fs-hero-title) !important; 
} 
 
.unisalle-description { 
    font-size: var(--fs-body) !important; 
} 
 
/* BOTONES */ 
.unisalle-cta-button, .unisalle-cta-button-secondary, .unisalle-app-btn, button, .unisalle-btn, #unisalle-hero-cta, #unisalle-app1-btn, #unisalle-app2-btn { 
    font-family: var(--font-roboto-condensed); 
    font-weight: 700; 
    text-transform: uppercase; 
    text-decoration: none; 
    display: inline-block; 
} 

/* ==========================================  
   HERO SECTION
========================================== */  
.unisalle-hero-section {  
    display: flex;  
    align-items: center;  
    padding: 0px 40px;  
    background: radial-gradient(circle at 50% 50%, #0f172a 0%, #02050a 100%);  
    position: relative; /* Importante para el scroll indicator */
    min-height: 80vh; /* Mostrar parte de la siguiente sección */
}  
 
/* SCROLL DOWN INDICATOR */
.unisalle-scroll-down {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    width: 2rem;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

.unisalle-scroll-down span {
    position: absolute;
    top: 0;
    left: 50%;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
    animation: sdb05 1.5s infinite;
    opacity: 0;
    box-sizing: border-box;
}

.unisalle-scroll-down span:nth-of-type(1) {
    top: -16px;
    animation-delay: 0s;
}
.unisalle-scroll-down span:nth-of-type(2) {
    top: 0;
    animation-delay: .15s;
}
.unisalle-scroll-down span:nth-of-type(3) {
    top: 16px;
    animation-delay: .3s;
}

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

/* Columna Texto Hero */ 
.unisalle-text-column {  
    display: flex;  
    flex-direction: column;  
    justify-content: center;  
    color: white;  
    text-align: left; 
}  
 
.unisalle-text-column h1 {  
    color: white;  
    margin-bottom: 28px;  
    line-height: 1.2;  
}  
 
.unisalle-text-column p {  
    line-height: 1.8;  
    color: rgba(255, 255, 255, 0.75);  
}  
 
.unisalle-cta-button {  
    padding: 14px 36px;  
    background: linear-gradient(#0a0a0a, #0a0a0a) padding-box,  
                linear-gradient(135deg, #cfa346 0%, #2a4880 50%, #cfa346 100%) border-box;  
    color: white;  
    border-radius: 30px;  
    transition: all 0.3s ease;  
    width: fit-content;  
    font-size: var(--fs-body);
    position: relative;  
    border: 2px solid transparent;  
}  
.unisalle-cta-button:hover {  
    color: #cfa346;  
    transform: translateY(-2px);  
    box-shadow: 0 4px 15px rgba(207, 163, 70, 0.3);  
}  
 
/* Columna Personaje */ 
.unisalle-character-column {  
    position: relative;  
    height: 80vh;  
    min-height: 600px;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
}  
 
#unisalle-canvas-container {  
    width: 100%;  
    height: 100%;  
    position: relative;  
}  
 
canvas {  
    display: block;  
    width: 100%;  
    height: 100%;  
}  

/* Columna Slider */
.unisalle-slider-column {  
    display: flex;  
    align-items: center;  
    justify-content: center;  
}  
 
.unisalle-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: 1px solid transparent;  
    background-clip: padding-box;  
}  
 
.unisalle-info-card::before {  
    content: '';  
    position: absolute;  
    top: 0; left: 0; right: 0; bottom: 0;  
    border-radius: 32px;  
    padding: 1px;  
    background: linear-gradient(135deg, #cfa346 0%, #2a4880 50%, #cfa346 100%);  
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);  
    -webkit-mask-composite: xor;  
    mask-composite: exclude;  
    z-index: -1;  
} 
 
.unisalle-info-card2 {  
    background: rgba(20, 30, 40, 0.65);  
    backdrop-filter: blur(12px);  
    border-radius: 32px;  
    padding: 4px;  
    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: 0.5px solid transparent;  
    background-clip: padding-box;  
}  
 
.unisalle-info-card2::before {  
    content: '';  
    position: absolute;  
    top: 0; left: 0; right: 0; bottom: 0;  
    border-radius: 32px;  
    padding: 2px;  
    background: linear-gradient(135deg, #cfa346 0%, #2a4880 50%, #cfa346 100%);  
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);  
    -webkit-mask-composite: xor;  
    mask-composite: exclude;  
    z-index: -1;  
} 
 
.unisalle-info-card h2 {  
    font-size: 34px;  
    margin-bottom: 16px;  
    color: white;  
    flex-shrink: 0;  
}  
 
.unisalle-info-card p {  
    font-size: 18px;  
    line-height: 1.7;  
    color: rgba(255, 255, 255, 0.8);  
    margin-bottom: 20px;  
    flex-shrink: 0;  
    min-height: 80px;  
}  
 
.unisalle-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);  
}  
 
.unisalle-card-image img {  
    width: 100%;  
    height: 100%;  
    object-fit: cover;  
}  
 
/* SLIDER INDICATORS */ 
.unisalle-slider-indicators {  
    display: flex;  
    justify-content: center;  
    gap: 10px;  
    margin-top: auto;  
    padding-top: 10px;  
}  
 
.unisalle-indicator {  
    width: 10px;  
    height: 10px;  
    border-radius: 50%;  
    background: rgba(255, 255, 255, 0.25);  
    cursor: pointer;  
    transition: all 0.3s ease;  
}  
 
.unisalle-indicator.unisalle-active {  
    background: rgba(255, 255, 255, 0.9);  
    transform: scale(1.3);  
}  
 
.unisalle-indicator:hover {  
    background: rgba(255, 255, 255, 0.5);  
}  
 
/* LOADING */ 
/* LOADING MINIMALISTA */ 
#unisalle-loading { 
    font-family: 'Lato', sans-serif; 
    font-weight: 700; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    color: rgba(255, 255, 255, 0.0); /* Texto transparente por si acaso */
    font-size: 0px; /* Ocultar texto */
    /* Quitamos el fondo y el borde para que no se vea el cuadro */
    background: transparent; 
    padding: 0; 
    border: none; 
    z-index: 1000; 
    /* Opcional: Agregar un spinner simple con CSS si quisieras, 
       pero por ahora esto lo hará invisible */
}
 
/* ==========================================  
   SECCIÓN 2 - MAESTRÍA (MAIN CONTAINER)  
========================================== */  
.unisalle-main-container {  
    position: relative;  
    width: 100%;  
    min-height: 85vh; /* Usamos min-height para adaptabilidad */
    display: flex;  
    flex-direction: column;  
    justify-content: center;  
    background-color: #0f172a;  
    overflow: hidden;
}  
 
.unisalle-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;  
}  
 
.unisalle-overlay {  
    position: absolute;  
    top: 0; left: 0; width: 100%; height: 100%;  
    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;  
}  
 
.unisalle-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;  
    min-height: 70vh;  
}  
 
.unisalle-text-section {  
    flex: 1;  
    max-width: 500px;  
    color: #fff;  
    padding-right: 40px;  
    opacity: 0;  
    transform: translateY(20px);  
    animation: fadeInUp 0.8s forwards;  
}  
 
.unisalle-slide-title {  
    margin-bottom: 20px;  
    line-height: 1.1;  
    color: white;  
}  
 
.unisalle-slide-desc {  
    margin-bottom: 30px;  
    color: #e0e0e0;  
}  
 
.unisalle-cta-button-secondary {  
    display: inline-block;  
    padding: 12px 30px;  
    border: 1px solid #d4af37;  
    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); 
    font-size: var(--fs-body) !important; 
}  
.unisalle-cta-button-secondary:hover {  
    background: #d4af37;  
    color: #0f172a;  
}  
 
.unisalle-slider-section {  
    flex: 1;  
    display: flex;  
    align-items: center;  
    justify-content: flex-start;  
    overflow: hidden;  
    height: 100%;  
    position: relative;  
}  
 
.unisalle-cards-container {  
    display: flex;  
    align-items: center;  
    gap: 20px;  
    transition: transform 0.5s ease;  
    padding-left: 20px;  
    padding-top: 20px; /* Evitar corte de sombra/borde al escalar */
    padding-bottom: 20px;
}  
 
.unisalle-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);  
}  
 
.unisalle-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;  
}  
 
.unisalle-card.unisalle-active {  
    width: 280px;  
    opacity: 1;  
    transform: scale(1);  
    border: 4px solid #fff;  
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);  
    z-index: 10;  
}  
 
.unisalle-card.unisalle-active::after {  
    background: rgba(0,0,0,0);  
}  
 
.unisalle-pagination {  
    position: absolute;  
    bottom: 40px;  
    left: 50%;  
    transform: translateX(-50%);  
    display: flex; 
    align-items: center;  
    gap: 15px;  
    z-index: 10;  
}  
 
.unisalle-dot {  
    width: 12px;  
    height: 12px;  
    border-radius: 50%;  
    background-color: #fff;  
    opacity: 0.5;  
    cursor: pointer;  
    transition: all 0.3s;  
}  
.unisalle-dot.unisalle-active {  
    background-color: #fbbf24;  
    opacity: 1;  
    transform: scale(1.2);  
}  
 
/* ==========================================  
   SECCIÓN 3 - NOTICIA DEL MES  
========================================== */  
.unisalle-noticia-section {  
    background: linear-gradient(135deg, #0a1b2b 0%, #000000 100%);  
    min-height: 77vh;  
    display: flex;  
    align-items: center;  
}  
 
.unisalle-noticia-content {  
    display: flex;  
    width: 100%;  
    min-height: 70vh;  
}  
 
.unisalle-video-container {  
    flex: 0 0 50%;  
    width: 50%;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
}  
 
.unisalle-video-container iframe {  
    width: 100%;  
    height: 100%;  
    max-height: 100vh;  
    border-radius: 8px;  
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);  
}  
 
.unisalle-text-container {  
    flex: 0 0 50%;  
    width: 50%;  
    color: #ffffff;  
    padding: 60px 80px;  
    display: flex;  
    flex-direction: column;  
    justify-content: center;  
}  
 
.unisalle-title {  
    margin-bottom: 30px;  
    color: #ffffff;  
    line-height: 1.2;  
}  
 
.unisalle-subtitle {  
    font-size: 16px;  
    margin-bottom: 30px;  
    color: #e0e0e0;  
    line-height: 1.7;  
}  
 
.unisalle-description {  
    color: white;  
    line-height: 1.8;  
}  
 
/* ==========================================  
   SECCIÓN 4 - APLICACIONES  
========================================== */  
.unisalle-apps-section {  
    background: #f8f8f8;  
    padding: 40px 0;
}  
 
.unisalle-app-global-wrapper {  
    position: relative;  
    width: 100%;  
    min-height: 250px;  
    height: 100%;  
    display: flex;  
    justify-content: flex-end;  
    padding: 20px;  
}  
 
.unisalle-app-global-wrapper.unisalle-reverse {  
    justify-content: flex-start;  
}  
 
.unisalle-app-wrapper {  
    position: relative;  
    display: flex;  
    align-items: center;  
    width: 100%;  
    height: 100%;  
    max-width: 500px;  
}  
 
.unisalle-app-content-card {  
    background: #e6e6e6;  
    border-radius: 40px;  
    padding: 10px 30px 30px 30px;  
    box-shadow: none;  
    position: relative;  
    z-index: 1;  
    width: 100%;  
    height: 100%;  
    display: flex;  
    flex-direction: column;  
    justify-content: center;  
}  
 
.unisalle-app-content-card.unisalle-align-right {  
    text-align: right;  
    padding-left: 140px;  
    padding-right: 40px;  
}  
 
.unisalle-app-content-card.unisalle-align-left {  
    text-align: left;  
    padding-right: 140px;  
    padding-left: 40px;  
}  
 
.unisalle-app-global-wrapper .unisalle-app-content-card {  
    margin-left: 40px;  
}  
.unisalle-app-global-wrapper.unisalle-reverse .unisalle-app-content-card {  
    margin-left: 0;  
    margin-right: 40px;  
}  
 
.unisalle-icon-background {  
    position: absolute;  
    top: 0;  
    width: 100px;  
    height: 100px;  
    z-index: 2;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
}  
 
.unisalle-icon-background.left {  
    left: 5px;  
    top: 5px;  
    border-bottom-right-radius: 1px;  
    border-bottom-left-radius: 1px;  
}  
 
.unisalle-icon-background.right {  
    right: 0;  
    left: auto;  
    border-top-right-radius: 40px;  
    border-top-left-radius: 15px;  
    border-bottom-left-radius: 40px;  
    border-bottom-right-radius: 15px;  
}  
 
.unisalle-character-container {  
    width: 250px;  
    height: 250px;  
    position: absolute;  
    z-index: 10;  
    bottom: -50px;  
}  
.unisalle-character-container.left { left: -80px; }  
.unisalle-character-container.right { right: -80px; }  
 
.unisalle-character-container img {  
    width: 100%;  
    height: 100%;  
    object-fit: contain;  
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));  
}  
 
.unisalle-app-content-card h3 {  
    font-size: 40px;  
    color: #111e33;  
    margin-top: 10px;  
    margin-bottom: 5px;  
    line-height: 1.2;  
}  
 
.unisalle-app-content-card .unisalle-subtitle {  
    color: #111e33;  
    font-weight: 600;  
    font-size: 16px;  
    margin-bottom: 20px;  
}  
 
.unisalle-app-content-card .unisalle-description {  
    color: #666;  
    font-size: 20px;  
    line-height: 1.5;  
    margin-bottom: 30px;  
}  
 
.unisalle-app-content-card.unisalle-align-right .unisalle-description { margin-left: auto; margin-right: 0; }  
.unisalle-app-content-card.unisalle-align-left .unisalle-description { margin-right: auto; margin-left: 0; }  
 
.unisalle-app-btn {  
    display: inline-block;  
    width: fit-content;  
    padding: 12px 40px;  
    background: #532d84;  
    color: white;  
    border-radius: 30px;  
    transition: 0.3s;  
}  
 
.unisalle-app-content-card.unisalle-align-right .unisalle-app-btn { margin-left: auto; margin-right: 0; }  
.unisalle-app-content-card.unisalle-align-left .unisalle-app-btn { margin-right: auto; margin-left: 0; }  
 
.unisalle-app-btn:hover {  
    background: #402068;  
    color: white;  
}  
 
/* ANIMACIONES */ 
@keyframes fadeInUp {  
    to { opacity: 1; transform: translateY(0); }  
}  
.unisalle-fade-in { animation: fadeIn 0.5s forwards; }  
@keyframes fadeIn {  
    from { opacity: 0; transform: translateY(10px); }  
    to { opacity: 1; transform: translateY(0); }  
}  
 
/* ==========================================  
   MEDIA QUERIES (RESPONSIVE)
========================================== */  

/* PANTALLAS GRANDES Y EXTRA GRANDES (Desktop) */ 
@media (max-width: 1399px) { 
    .unisalle-content-wrapper { 
        width: 95%; 
    } 
} 
 
/* TABLETS Y ESCRITORIOS PEQUEÑOS (< 1200px) */ 
@media (max-width: 1199px) { 
    /* Hero: Texto centrado */ 
    .unisalle-text-column { 
        text-align: center; 
        align-items: center; 
        margin-bottom: 2rem; 
    } 
    
    .unisalle-character-column { 
        height: 50vh; 
        min-height: 400px; 
    } 
    
    .unisalle-info-card, .unisalle-info-card2 {  
        max-width: 480px;  
        min-height: 550px;  
    }  
    
    /* Sección Maestría */
    .unisalle-content-wrapper { 
        flex-direction: column; 
        justify-content: center; 
        padding-top: 2rem; 
    } 
 
    .unisalle-text-section { 
        max-width: 80%; 
        text-align: center; 
        padding-right: 0; 
        margin-bottom: 2rem; 
    } 
 
    .unisalle-slider-section { 
        width: 100%; 
        justify-content: center; 
        overflow: visible; /* Permitir ver cards laterales */ 
    } 
} 
 
/* TABLETS PEQUEÑAS (< 991px) */ 
@media (max-width: 991px) { 
    /* Sección Noticias: Columna vertical */ 
    .unisalle-noticia-content { 
        flex-direction: column; 
    } 
    .unisalle-video-container, .unisalle-text-container { 
        width: 100%; 
        flex: auto; 
    } 
    .unisalle-video-container { 
        padding: 20px; 
        min-height: 300px; 
    } 
    .unisalle-text-container { 
        padding: 30px 20px; 
    } 
 
    .unisalle-character-column { 
        height: 55vh; 
        min-height: 450px; 
    } 

    /* Ajuste info cards */
    .unisalle-info-card, .unisalle-info-card2 { 
        max-width: 100%; 
        min-height: 520px; 
        padding: 26px; 
    } 
    
    /* Maestría responsive adjustments */
    .unisalle-slide-title { font-size: 3rem; }
    .unisalle-cards-container { padding-left: 0; }
} 
 
/* MÓVILES (< 767px) - CAMBIOS CRÍTICOS */ 
@media (max-width: 767px) { 
    
    /* 1. Héroe */ 
    .unisalle-hero-section { 
        padding: 20px; 
        padding-top: 60px; /* Espacio superior */ 
        flex-direction: column; /* Asegurar columna */
    } 
    
    .unisalle-character-column { 
        height: 400px; 
        margin-bottom: 20px; 
    } 
    
    /* Info Card en móvil más compacta */
    .unisalle-info-card, .unisalle-info-card2 {
        min-height: auto;
        padding: 20px;
    }
    .unisalle-card-image {
        height: 200px;
    }
 
    /* 2. Sección Apps */ 
    .unisalle-app-global-wrapper, .unisalle-app-global-wrapper.unisalle-reverse { 
        flex-direction: column; 
        justify-content: center !important; 
        padding: 0; 
        margin-bottom: 4rem; 
        height: auto !important; 
    } 
 
    .unisalle-app-wrapper { 
        flex-direction: column; 
        width: 100%; 
        height: auto !important; 
    } 
 
    .unisalle-app-content-card, 
    .unisalle-app-content-card.unisalle-align-right, 
    .unisalle-app-content-card.unisalle-align-left { 
        margin: 0 !important; 
        padding: 80px 20px 40px 20px !important; 
        text-align: center !important; 
        width: 100%; 
        height: auto !important; 
    } 
 
    .unisalle-icon-background.left, .unisalle-icon-background.right { 
        left: 50%; 
        transform: translateX(-50%); 
        top: -30px; 
        right: auto; 
        border-radius: 50%; 
        width: 80px; 
        height: 80px; 
        box-shadow: 0 5px 15px rgba(0,0,0,0.2); 
    } 
 
    .unisalle-character-container, 
    .unisalle-character-container.left, 
    .unisalle-character-container.right { 
        position: relative; 
        top: auto; bottom: auto; left: auto !important; right: auto !important; 
        width: 180px; 
        height: 180px; 
        margin: -30px auto 0 auto; 
        order: 2; 
    } 
    
    .unisalle-app-btn { 
        margin: 0 auto !important; 
        display: block; 
    } 
 
    /* 3. Maestría Slider Móvil */ 
    .unisalle-card { 
        width: 180px; 
        height: 260px; 
    } 
    .unisalle-card.unisalle-active { 
        width: 200px; 
        height: 300px; 
    }
    
    /* Textos en móvil */
    .unisalle-app-content-card h3 { font-size: 28px; }
    .unisalle-app-content-card .unisalle-description { font-size: 16px; }
}