/* =====================================================
   NUEVO DISEÑO LANDING PAGE — Alta Academia / IB
   Paleta:
     Primario:  #0254BF  |  Claro: #398AFF  |  Oscuro: #001A3F
     Acento:    #46C1FF  |  Morado: #797CE3  |  Verde: #50CFBC
     Fondo:     #F8F9FE  |  Negro: #000819   |  Caja: #FFFFFF
===================================================== */



/* ===== HERO ===== */
#hero {
    display: flex;
    align-items: center;
    background-color: #F8F9FE !important;
    background-image: none !important;
    min-height: calc(100vh - 80px); 
    padding-top: 150px; 
    padding-bottom: 120px;
    position: relative;
}

#hero .container { width: 100%; }

.hero-row {
    width: 100%;
    display: flex;
    align-items: center;
}

/* ===== TEXTO IZQUIERDA ===== */
.hero-text-col {
    position: relative;
    padding-right: 3rem;
}

.hero-subtitle {
    color: #000819;
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.hero-heading {
    color: #0254BF;
    font-size: 4.2rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 1rem;
    font-family: "Jost", "Poppins", sans-serif;
}

.hero-tagline {
    color: #000819;
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1.6rem;
    background-color: transparent;
}

.hero-description {
    color: #000819;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-top: 3.2rem;
    margin-bottom: 2.2rem;
    border-radius: 12px;
    background-color: #FFFFFF;
    padding: 25px;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 0 25px rgba(70, 193, 255, 0.22);
}

/* ===== ISO CONTAINERS ===== */
.hero-iso {
    position: absolute;
    bottom: -80px;
    left: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0 12px 30px rgba(2, 84, 191, 0.1);
    max-width: 420px;
}

.hero-iso-icon {
    min-width: 48px;
    height: 48px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-iso small {
    color: #000819;
    font-size: 0.82rem;
    line-height: 1.5;
}

.hero-iso-floating {
    color: #000819;
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 25px;
    border-top-left-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0 0 25px rgba(70, 193, 255, 0.22);
    max-width: 420px;
    font-weight: 600;
}

/* ===== IMAGEN DERECHA ===== */
.hero-img-col {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-img-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    text-align: center;
    background-color: transparent;
}

.hero-image {
    max-width: 80%;
    max-height: 70vh;
    object-fit: contain;
    mix-blend-mode: multiply;
    margin: 10px;
}

/* =====================================================
   RESPONSIVE
===================================================== */

/* Tablet grande / laptop pequeño */
@media (max-width: 1199px) {
    .hero-heading  { font-size: 3.2rem; }
    .hero-tagline  { font-size: 1.7rem; }
    .hero-description { font-size: 1.1rem; }  
}

/* Tablet */
@media (max-width: 991px) {
    #hero {
        height: auto;
        padding-top: 110px;
        padding-bottom: 60px;
    }

    .hero-row        { flex-direction: column; }
    .hero-text-col   { text-align: center; padding-right: 0; margin-bottom: 2rem; width: 100%; }
    .hero-img-col    { width: 100%; }
    .hero-heading    { font-size: 2.6rem; }
    .hero-tagline    { font-size: 1.4rem; }
    .hero-description { font-size: 1rem; margin-top: 1.5rem; }
    .hero-iso        { max-width: 100%; position: static; margin-top: 1.5rem; }

    .hero-iso-floating {
        position: static;
        margin-top: 20px;
        border-radius: 16px;
        max-width: 100%;
    }
}

/* Móvil */
@media (max-width: 575px) {
    #hero { padding-top: 90px; padding-bottom: 40px; }

    .hero-heading   { font-size: 2rem; }
    .hero-subtitle  { font-size: 1rem; }
    .hero-tagline   { font-size: 1.1rem; }
    .hero-description { font-size: 0.95rem; padding: 18px; }

    .hero-image { max-width: 100%; max-height: 55vh; }

    .hero-iso-floating { padding: 16px; }
}