/*==========================================
BANNER
==========================================*/

.banner-media{
    margin-top:90px;

    height:610px;

    background:url("../img/banner-media.jpg") center center/cover;

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.banner-media::before{

    content:"";

    position:absolute;

    width:100%;

    height:100%;

    background:rgba(0,40,90,.55);

}

.banner-media .overlay{

    position:relative;

    color:#fff;

    text-align:center;

    z-index:2;

}

.banner-media h1{

    font-size:100px;

    margin-bottom:20px;

    font-weight:700;

}

.banner-media p{

    font-size:24px;

}


/*==========================================
INTRODUCCIÓN
==========================================*/

.introduccion{

    padding:70px 20px;

    text-align:center;

}

.introduccion h2{

    color:#003366;

    font-size:38px;

    margin-bottom:25px;

}

.introduccion p{

    max-width:1000px;

    margin:auto;

    line-height:1.8;

    font-size:18px;

}


/*==========================================
SECCIONES
==========================================*/

.especialidad{

    margin:80px auto;

}

.especialidad h2{

    color:#003366;

    font-size:40px;

    margin-bottom:35px;

}

.foto-portada{

    width:50%;

    border-radius:18px;

    box-shadow:0 10px 30px rgba(0,0,0,.25);

}

.descripcion{

    margin-top:30px;

}

.descripcion p{

    font-size:18px;

    line-height:1.9;

}


/*==========================================
COMPETENCIAS
==========================================*/

.competencias{

    margin-top:45px;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:25px;

}

.card{

    background:white;

    padding:30px;

    border-radius:18px;

    text-align:center;

    box-shadow:0 10px 25px rgba(0,0,0,.12);

    transition:.35s;

}

.card:hover{

    transform:translateY(-8px);

}

.card i{

    font-size:48px;

    color:#0056a3;

    margin-bottom:18px;

}

.card h3{

    margin-bottom:15px;

    color:#003366;

}


/*==========================================
GALERÍA
==========================================*/

.titulo-galeria{

    text-align:center;

    margin-top:60px;

    margin-bottom:25px;

    color:#003366;

    font-size:34px;

}

.carrusel{

    display:flex;

    gap:20px;

    overflow-x:auto;

    scroll-behavior:smooth;

    padding-bottom:15px;

}

.carrusel img{

    width:320px;

    height:220px;

    border-radius:15px;

    object-fit:cover;

    transition:.35s;

    cursor:pointer;

}

.carrusel img:hover{

    transform:scale(1.05);

}


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

@media(max-width:768px){

.banner-media{

height:300px;

}

.banner-media h1{

font-size:38px;

}

.banner-media p{

font-size:18px;

}

}

/*==================================================
CARRUSEL PROFESIONAL
==================================================*/

.carrusel-profesional{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:20px;

    margin:40px 0;

}

.galeria{

    display:flex;

    justify-content:center;

    gap:20px;

    width:100%;

}

.galeria img{

    width:30%;

    height:220px;

    object-fit:cover;

    border-radius:15px;

    box-shadow:0 8px 20px rgba(0,0,0,.20);

    transition:.3s;

}

.galeria img:hover{

    transform:scale(1.05);

}

.btn-carrusel{

    width:50px;

    height:50px;

    border:none;

    border-radius:50%;

    background:#004b93;

    color:white;

    font-size:28px;

    cursor:pointer;

}

.btn-carrusel:hover{

    background:#002d5a;

}