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

.banner-directorio{

    margin-top:90px;
    height:340px;

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

    position:relative;

    display:flex;
    justify-content:center;
    align-items:center;

}

.banner-directorio::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,45,95,.60);

}

.overlay{

    position:relative;

    z-index:2;

    text-align:center;

    color:white;

}

.overlay h1{

    font-size:60px;

    margin-bottom:15px;

    font-weight:700;

}

.overlay p{

    font-size:22px;

    max-width:900px;

    margin:auto;

}


/*==========================================
BUSCADOR
==========================================*/

.buscador{

    margin:60px auto 30px;

    text-align:center;

}

.buscador input{

    width:100%;

    max-width:700px;

    padding:18px;

    border-radius:40px;

    border:2px solid #0c4da2;

    font-size:18px;

    outline:none;

    transition:.3s;

}

.buscador input:focus{

    box-shadow:0 0 15px rgba(12,77,162,.30);

}


/*==========================================
BOTONES
==========================================*/

.categorias{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

    margin-bottom:50px;

}

.categorias button{

    background:#0c4da2;

    color:white;

    border:none;

    padding:14px 30px;

    border-radius:30px;

    cursor:pointer;

    transition:.3s;

    font-size:16px;

    font-weight:600;

}

.categorias button:hover{

    background:#003366;

}

.categorias .activo{

    background:#f7b500;

    color:#222;

}


/*==========================================
TARJETAS
==========================================*/

.contenedor-docentes{

    display:grid;

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

    gap:30px;

    margin-bottom:80px;

}

.tarjeta{

    background:white;

    border-radius:18px;

    padding:35px;

    text-align:center;

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

    transition:.35s;

}

.tarjeta:hover{

    transform:translateY(-10px);

    box-shadow:0 18px 40px rgba(0,0,0,.18);

}


/*==========================================
FOTO
==========================================*/

.avatar{

    width:120px;

    height:120px;

    border-radius:50%;

    background:#0c4da2;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:48px;

    font-weight:bold;

    margin:auto;

    margin-bottom:25px;

    overflow:hidden;

    border:5px solid #f2f2f2;

}

.avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

}


/*==========================================
TEXTOS
==========================================*/

.tarjeta h3{

    color:#003366;

    margin-bottom:12px;

    font-size:24px;

}

.tarjeta p{

    color:#555;

    margin:8px 0;

    line-height:1.6;

}

.tarjeta strong{

    color:#003366;

}


/*==========================================
BOTÓN
==========================================*/

.correo{

    display:inline-block;

    margin-top:25px;

    background:#0c4da2;

    color:white;

    text-decoration:none;

    padding:12px 28px;

    border-radius:8px;

    transition:.3s;

    font-weight:600;

}

.correo:hover{

    background:#003366;

}

.correo i{

    margin-right:8px;

}


/*==========================================
FOOTER
==========================================*/

footer{

    background:#003366;

    color:white;

    text-align:center;

    padding:25px;

    margin-top:50px;

}


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

@media(max-width:768px){

.banner-directorio{

height:240px;

margin-top:80px;

}

.overlay h1{

font-size:38px;

}

.overlay p{

font-size:18px;

padding:0 20px;

}

.buscador input{

width:90%;

}

.categorias{

padding:0 15px;

}

.categorias button{

width:100%;

}

.tarjeta{

padding:25px;

}

.avatar{

width:100px;

height:100px;

font-size:38px;

}

}