:root{
    --azul:#1f3f86;
    --azul2:#173575;
    --naranja:#ff6b00;
    --celeste:#55c7dd;
    --amarillo:#f5bd32;
    --verde:#4caf7d;
    --rojo:#e85b5b;
    --gris:#f5f7fb;
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    font-family:'Segoe UI',Arial,sans-serif;
    background:#fff;
    color:#222;
}

a{
    text-decoration:none;
}

/* ============================= */
/* TOPBAR */
/* ============================= */
.topbar{
    background:#303a3d;
    color:#fff;
    font-size:14px;
    padding:8px 0;
}

.topbar span{
    margin-right:22px;
}

/* ============================= */
/* NAVBAR */
/* ============================= */
.navbar{
    background:#fff;
    min-height:88px;
}

.navbar-brand img{
    height:58px; /* EDITAR: alto del logo */
    width:auto;
}

.nav-link{
    font-weight:600;
    color:#333;
    margin:0 8px;
}

.btn-admision{
    background:var(--naranja);
    color:#fff;
    border-radius:30px;
    padding:12px 28px;
    font-weight:800;
}

.btn-admision:hover{
    background:#e95f00;
    color:#fff;
}

/* ============================= */
/* SLIDER */
/* ============================= */
.carousel-item{
    min-height:680px; /* EDITAR: alto del slider */
    background-size:cover;
    background-position:center;
    position:relative;
    color:#fff;
}

.overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.32); /* EDITAR: oscuridad del slider */
    z-index:1;
}

.carousel-content{
    position:relative;
    z-index:2;
    min-height:680px; /* EDITAR: mismo alto que slider */
    display:flex;
    align-items:center;
}

.carousel-content h1{
    font-size:74px; /* EDITAR: tamaño título slider */
    font-weight:900;
    line-height:.95;
    text-transform:uppercase;
    color:#fff;
}

.carousel-content .number{
    color:#fff;
    font-size:34px;
    font-weight:900;
}

.carousel-content p{
    color:#fff;
    font-size:19px;
    max-width:430px;
}

/* ============================= */
/* SECCIONES GENERALES */
/* ============================= */
.section{
    padding:90px 0; /* EDITAR: espacio superior/inferior */
}

.sub-title{
    color:#5cc68b;
    font-weight:800;
    font-size:20px;
    margin-bottom:8px;
}

.title-big{
    font-size:48px; /* EDITAR: títulos grandes */
    font-weight:900;
    margin-bottom:25px;
}

/* ============================= */
/* ABOUT / NUESTRO COLEGIO */
/* ============================= */
.about-section{
    background:#fff;
}

.about-img{
    position:relative;
}

.about-img img{
    width:100%;
    height:470px; /* EDITAR: alto imagen nuestro colegio */
    object-fit:cover;
    border-radius:4px;
}

.about-badge{
    position:absolute;
    right:-40px; /* EDITAR: posición horizontal del badge */
    bottom:45px; /* EDITAR: posición vertical del badge */
    width:190px; /* EDITAR: ancho badge */
    height:190px; /* EDITAR: alto badge */
    background:var(--celeste);
    color:#fff;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-weight:900;
}

.about-badge i{
    font-size:34px;
    margin-bottom:12px;
}

.about-badge strong{
    font-size:38px;
    line-height:1;
}

.about-badge span{
    font-size:17px;
}

.about-author-img{
    width:80px; /* EDITAR: ancho foto autor */
    height:80px; /* EDITAR: alto foto autor */
    object-fit:cover;
}

/* ============================= */
/* COLLAGE */
/* ============================= */
.collage{
    display:grid;
    grid-template-columns:repeat(4,1fr); /* EDITAR: columnas collage */
    grid-auto-rows:300px; /* EDITAR: alto base del collage */
    gap:10px; /* EDITAR: separación */
    grid-auto-flow:dense;
}

.collage .item{
    position:relative;
    overflow:hidden;
}

.collage img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.4s;
}

.collage .item:hover img{
    transform:scale(1.08);
}

.collage .tall{
    grid-row:span 2; /* EDITAR: alto vertical */
}

.collage .wide{
    grid-column:span 2; /* EDITAR: ancho horizontal */
}

.collage .big{
    grid-column:span 2;
    grid-row:span 2;
}

.teacher-card{
    color:#fff;
    padding:45px; /* EDITAR: espacio interno bloque color */
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.teacher-card h3{
    font-size:34px; /* EDITAR: título bloque color */
    font-weight:900;
}

.teacher-card small{
    letter-spacing:2px;
    text-transform:uppercase;
    font-weight:700;
}

/* ============================= */
/* CONFIANZA */
/* ============================= */
.trust{
    background:#fff;
    padding:95px 0; /* EDITAR: espacio sección confianza */
    position:relative;
}

.skill-bar{
    margin-bottom:18px;
}

.skill-bar span{
    display:flex;
    justify-content:space-between;
    font-weight:800;
    margin-bottom:7px;
}

.progress{
    height:15px; /* EDITAR: alto barras */
    border-radius:20px;
    background:#e9ecef;
    overflow:hidden;
}

.trust-img-wrap{
    position:relative;
    min-height:440px; /* EDITAR: alto bloque imágenes confianza */
}

.trust-img-1{
    position:absolute;
    left:40px; /* EDITAR: posición imagen 1 */
    top:30px;
    width:280px; /* EDITAR: ancho imagen 1 */
    height:420px; /* EDITAR: alto imagen 1 */
    object-fit:cover;
}

.trust-img-2{
    position:absolute;
    right:20px; /* EDITAR: posición imagen 2 */
    top:80px;
    width:310px; /* EDITAR: ancho imagen 2 */
    height:390px; /* EDITAR: alto imagen 2 */
    object-fit:cover;
}

.stat-box{
    position:absolute;
    left:285px; /* EDITAR: posición stats */
    top:135px;
    background:#fff;
    width:95px; /* EDITAR: ancho stats */
    box-shadow:0 10px 30px rgba(0,0,0,.15);
    text-align:center;
    padding:14px 6px;
    z-index:3;
}

.stat-box div{
    border-bottom:1px solid #eee;
    padding:10px 0;
    font-weight:900;
    color:#111;
}

.stat-box div:last-child{
    border-bottom:0;
}

.stat-box small{
    font-size:11px;
}

.mini-features{
    margin-top:50px;
}

.mini-feature{
    display:flex;
    gap:14px;
    align-items:center;
}

.mini-feature i{
    font-size:32px; /* EDITAR: tamaño iconos inferiores */
    color:var(--naranja);
}

.mini-feature h6{
    font-weight:900;
    margin:0;
}

/* ============================= */
/* BENEFICIOS */
/* ============================= */
.why-section{
    background:#f2f6fb;
    padding:90px 0;
}

.why-card{
    min-height:260px; /* EDITAR: alto cards */
    padding:42px 28px;
    border-radius:30px;
    color:#fff;
    text-align:center;
    box-shadow:0 18px 35px rgba(0,0,0,.13);
    transition:.3s;
}

.why-card:hover{
    transform:translateY(-10px);
}

.why-card i{
    width:82px; /* EDITAR: círculo icono */
    height:82px;
    border-radius:50%;
    background:#fff;
    color:#222;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 20px;
    font-size:34px;
}

.why-card h4{
    font-size:28px;
    font-weight:900;
}

.why-card p{
    font-size:17px;
    margin:0;
}

/* ============================= */
/* TESTIMONIOS */
/* ============================= */
.testimonials{
    background:#f7f8fc;
    padding:90px 0;
}

.testimonial{
    background:#fff;
    border-radius:25px;
    padding:42px 30px;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    text-align:center;
    min-height:315px; /* EDITAR: alto testimonial */
}

.testimonial img{
    width:105px; /* EDITAR: ancho foto testimonio */
    height:105px; /* EDITAR: alto foto testimonio */
    object-fit:cover;
    border-radius:50%;
    border:6px solid #f1f1f1;
    margin-bottom:18px;
}

.testimonial p{
    font-size:18px;
    font-style:italic;
}

/* ============================= */
/* CTA */
/* ============================= */
.cta{
    background:linear-gradient(90deg,var(--naranja),#ff9b2f);
    color:#fff;
    padding:75px 0; /* EDITAR: alto CTA */
    text-align:center;
}

.cta h2{
    font-size:48px;
    font-weight:900;
}

/* ============================= */
/* FOOTER */
/* ============================= */
.footer{
    background:var(--azul);
    color:#fff;
    margin-top:110px;
    position:relative;
    padding:210px 0 0; /* EDITAR: alto superior footer */
}

.footer-logo{
    position:absolute;
    top:-95px; /* EDITAR: posición logo footer */
    left:50%;
    transform:translateX(-50%);
    text-align:center;
}

.footer-logo .shield{
    width:165px; /* EDITAR: ancho escudo */
    height:190px; /* EDITAR: alto escudo */
    background:#fff;
    border-radius:90px 90px 25px 25px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:auto;
    box-shadow:0 8px 25px rgba(0,0,0,.25);
}

.footer-logo .shield i{
    font-size:85px;
    color:var(--azul);
}

.footer-logo h3{
    margin-top:15px;
    font-size:28px;
    font-weight:900;
    line-height:1;
}

.footer h2{
    font-size:52px;
    font-weight:300;
    margin-bottom:35px;
}

.footer p,
.footer li,
.footer a{
    font-size:21px;
    font-weight:600;
    margin-bottom:18px;
    color:#fff;
}

.socials a{
    width:58px;
    height:58px;
    border:3px solid #fff;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    margin-right:10px;
    font-size:22px;
}

.footer-bottom{
    margin-top:60px;
    border-top:1px solid rgba(255,255,255,.35);
    text-align:center;
    padding:30px 15px;
    font-size:20px;
    font-weight:600;
}

/* ============================= */
/* RESPONSIVE */
/* ============================= */
@media(max-width:991px){

    .topbar .container{
        flex-direction:column;
        text-align:center;
        gap:6px;
    }

    .topbar span{
        display:block;
        margin:3px 0;
    }

    .navbar{
        min-height:auto;
    }

    .navbar-collapse{
        padding:18px 0;
    }

    .carousel-item,
    .carousel-content{
        min-height:520px;
        text-align:center;
    }

    .carousel-content h1{
        font-size:46px;
    }

    .carousel-content p{
        margin:auto;
        font-size:17px;
    }

    .section{
        padding:60px 0;
    }

    .title-big{
        font-size:36px;
    }

    .about-img img{
        height:330px;
    }

    .about-badge{
        right:15px;
        bottom:15px;
        width:140px;
        height:140px;
    }

    .about-badge strong{
        font-size:30px;
    }

    .collage{
        grid-template-columns:1fr;
        grid-auto-rows:330px;
    }

    .collage .wide,
    .collage .tall,
    .collage .big{
        grid-column:auto;
        grid-row:auto;
    }

    .trust-img-wrap{
        min-height:auto;
    }

    .trust-img-1,
    .trust-img-2,
    .stat-box{
        position:relative;
        left:auto;
        right:auto;
        top:auto;
        width:100%;
        height:300px;
        margin-bottom:15px;
    }

    .stat-box{
        height:auto;
    }

    .mini-feature{
        margin-bottom:15px;
    }

    .cta h2{
        font-size:34px;
    }

    .footer{
        padding-top:180px;
    }

    .footer h2{
        font-size:38px;
    }

    .footer p,
    .footer li,
    .footer a{
        font-size:17px;
    }

    .socials a{
        width:48px;
        height:48px;
        font-size:18px;
        margin-bottom:10px;
    }
}