/* --- FUENTES --- */
@font-face {
    font-family: 'AlteHaasGrotesk';
    src: url('AlteHaasGroteskRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'AlteHaasGrotesk';
    src: url('AlteHaasGroteskBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

/* --- ESTILOS GENERALES --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'AlteHaasGrotesk', sans-serif;
    background-color: #5bcbf5; 
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    color: #1a1a1a;
    overflow-x: hidden; 
    line-height: 1.5;
}

/* --- ELEMENTO STICKY: LOGO --- */
.sticky-header {
    position: -webkit-sticky;
    position: sticky;
    top: 50px;               
    z-index: 100;
    width: 100%;
    display: flex;
    justify-content: center; 
    align-items: center;
    margin-bottom: -150px;   
}

/* Permitimos que el enlace reaccione al mouse */
.sticky-header a {
    display: block;
    text-align: center;
    width: 100%;
    max-width: 640px; 
    pointer-events: auto; /* 👈 Clave para que el link sea cliqueable */
}

.sticky-header img {
    width: 90%;             
    height: auto;
    margin: 0 auto;         
    display: block;
    /* Estilizamos la animación de transición */
    transition: transform 0.3s ease; /* 👈 Hace que la rotación sea suave y no un salto brusco */
}

/* Efecto Hover: Rotación al pasar el mouse */
.sticky-header a:hover img {
    transform: rotate(-3deg); /* 👈 ¡MODIFICÁ ACÁ! 
                                 -3deg lo rota un poquito a la izquierda (antihorario). 
                                 Si preferís a la derecha, poné un número positivo (ej: 3deg). */
}

/* --- HERO / PORTADA --- */
.hero-container {
    width: 100vw;           
    position: relative;
    left: 50%;              
    transform: translateX(-50%);
    text-align: center;
    padding-top: 12px;         
    margin-top: 0;          
    overflow: hidden;       
}

.hero-image {
    width: 100%;            
    height: auto;           
    display: block;
    margin: 0 auto;
}

/* --- CONTENEDOR PRINCIPAL --- */
.main-content {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
    z-index: 10;
}

/* --- BLOQUES DE INFORMACIÓN (CAJAS GRANDES DE TEXTO) --- */
.info-box {
    background-color: #e6e6e6;
    padding: 40px 30px;
    margin-bottom: 60px;
    text-align: center;
    font-size: 1.19rem;
    width: 100%;
    max-width: 700px;       
    margin-left: auto;
    margin-right: auto;
}

.info-box p {
    margin-bottom: 25px;
    
}

.info-box p:last-child {
    margin-bottom: 0;
}

/* --- BORDES (SOLO COLOR) --- */
.border-yellow {
    border: 6px solid #f2d41e; 
    max-width: 600px; 
}

.border-orange { 
    border: 6px solid #f37023;
}

.border-magenta { 
    border: 6px solid #ec008c;
}

.border-green { 
    border: 6px solid #00a651; 
}

/* --- ETIQUETAS DE SECCIÓN --- */
.section-tag {
    background-color: #000000;
    color: #ffffff;
    display: inline-block;
    padding: 8px 20px;
    font-weight: bold;
    font-size: 1.3rem;
    text-transform: lowercase;
    transform: rotate(-2deg);
    margin-bottom: 15px;
}

.tag-magenta { border: 4px solid #ec008c; }

.section-subtitle {
    font-size: 1.2rem;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* --- GRILLA DE TARJETAS --- */
.cards-grid {
    display: flex;          
    justify-content: center; 
    gap: 25px;            /* Controla el espacio entre los envoltorios */
    flex-wrap: wrap;        
    margin-bottom: 60px;   
}

/* --- ENVOLTORIO (CAJA + BOTÓN) --- */
.card-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;    /* Centra el botón abajo de la caja */
    width: 260px;           /* El ancho lo domina ahora el envoltorio */
    z-index: 1;
}

/* Escalonado asimétrico del envoltorio SÁBADOS */
.wrapper-orange {
    transform: translateY(30px); 
    z-index: 2;             
}

/* --- CAJAS INTERNAS --- */
.course-card {
    background-color: #e6e6e6;
    padding: 30px 30px;
    text-align: center;
    font-size: 1.1rem;
    width: 100%;            /* Se adapta al envoltorio */
}

.course-card h3 {
    font-size: 1.3rem;
    margin-bottom: 0px;
    font-weight: bold;
}

.course-card p {
    margin-bottom: 0;
    font-size: 1.4rem;
    font-weight: normal;
    line-height: 1.2;
}

/* --- BOTONES DEBAJO DE LAS TARJETAS --- */
.btn-card {
    display: inline-block;
    background-color: #e30613;
    color: #ffffff;
    text-decoration: none;
    padding: 20px 15px;
    font-weight: bold;
    font-size: 1.3rem;      
    border-radius: 50px;
    margin-top: 15px;        /* Espacio de separación entre la caja gris y el botón rojo */
    width: 100%;             
    max-width: 220px;
    line-height: 1.2;
    text-align: center;
    text-transform: lowercase; 
    transition: transform 0.2s ease;
}

.btn-card:hover {
    transform: scale(1.05);
}

/* ==========================================================================
   OBJETOS VOLADORES
   ========================================================================== */
.flying-item {
    position: fixed;     
    z-index: 200;        
    pointer-events: none;
    width: 70px;                  
    height: auto;
    left: 0;                      
    top: 0;                       
    animation-timing-function: linear; 
    animation-iteration-count: infinite;
    animation-fill-mode: backwards; 
}

.fo-1 { 
    animation-name: diagonalHaciaAbajo;
    animation-duration: 30s;      
    animation-delay: 0s;
}

.fo-2 { 
    animation-name: diagonalHaciaArriba;
    animation-duration: 40s; 
    animation-delay: 5s;
}

.fo-3 { 
    animation-name: diagonalCortaRapida;
    animation-duration: 24s; 
    animation-delay: 4s;
}

/* --- RUTAS DE LAS ANIMACIONES --- */
@keyframes diagonalHaciaAbajo {
    0% { transform: translate(-15vw, -15vh) rotate(0deg); }
    50% { transform: translate(50vw, 40vh) rotate(180deg); }
    100% { transform: translate(115vw, 95vh) rotate(360deg); }
}

@keyframes diagonalHaciaArriba {
    0% { transform: translate(-15vw, 110vh) rotate(0deg); }
    50% { transform: translate(45vw, 50vh) rotate(-180deg); }
    100% { transform: translate(115vw, -10vh) rotate(-360deg); }
}

@keyframes diagonalCortaRapida {
    0% { transform: translate(115vw, -10vh) rotate(0deg); }
    50% { transform: translate(55vw, 45vh) rotate(270deg); }
    100% { transform: translate(-15vw, 110vh) rotate(540deg); }
}

/* --- ADAPTACIÓN MOBILE --- */
@media (max-width: 768px) {
    .sticky-header {
        top: 10px;
        margin-bottom: -30px;
    }
    .cards-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px;          /* Más separación vertical para que los botones respiren en celu */
    }
    .card-wrapper {
        width: 100%;
        max-width: 280px;
    }
    .wrapper-orange {
        transform: none;    /* Se desactiva el escalonado en celu para que queden prolijas en fila */
    }
    .info-box {
        padding: 30px 15px;
        font-size: 1rem;
    }
    .flying-item {
        display: none; 
    }
}