/*==================================================
                HERO
==================================================*/

.hero{

    margin-top:110px;

    background:var(--color-fondo);

    padding:90px 20px;

}


.hero-contenedor{

    max-width:1100px;

    margin:auto;

    text-align:center;

}


.hero-titulo{

    font-size:3rem;

    color:var(--color-primario);

    margin-bottom:15px;

}


.hero-subtitulo{

    font-size:1.7rem;

    font-weight:400;

    color:var(--color-secundario);

    margin-bottom:35px;

}


.hero-texto{

    font-size:1.15rem;

    line-height:1.9;

    color:var(--color-gris);

    max-width:900px;

    margin:auto;

}

.hero-boton{

    display:inline-block;

    margin-top:45px;

    padding:15px 40px;

    background:var(--color-primario);

    color:white;

    text-decoration:none;

    border-radius:50px;

    transition:var(--transicion);

    font-size:18px;

}


.hero-boton:hover{

    background:var(--color-secundario);

    transform:translateY(-4px);

}

/*==================================================
            TÍTULOS DE SECCIÓN
==================================================*/

.titulo-seccion{

    text-align:center;

    margin-bottom:60px;

}

.titulo-seccion h2{

    font-size:2.4rem;

    color:var(--color-primario);

    margin-bottom:12px;

    font-weight:500;

}

.titulo-seccion p{

    color:var(--color-gris);

    font-size:1.1rem;

}

/*==================================================
            EVENTOS
==================================================*/

.eventos{

    background:var(--color-blanco);

    padding:140px 20px;

}


.eventos-contenedor{

    position:relative;

    max-width:1100px;

    margin:auto;

}


.evento-slide{

    display:none;

}


.evento-slide.activo{

    display:block;

}


.evento-slide img{

    display:block;

    width:100%;

    border-radius:18px;

    box-shadow:var(--sombra-hover);

    transition:var(--transicion);

}


.evento-slide img:hover{

    transform:scale(1.01);

}


/*==================================================
              BOTONES DEL CARRUSEL
==================================================*/

.carrusel-btn{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    z-index:10;

    width:45px;

    height:45px;

    border:none;

    border-radius:50%;

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

    color:#ffffff;

    font-size:2rem;

    line-height:1;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:var(--transicion);

}


.carrusel-btn:hover{

    background:rgba(0,0,0,.70);

}


.carrusel-anterior{

    left:15px;

}


.carrusel-siguiente{

    right:15px;

}


/*==================================================
                INDICADORES
==================================================*/

.carrusel-indicadores{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    margin-top:20px;

}


.indicador{

    width:10px;

    height:10px;

    padding:0;

    border:none;

    border-radius:50%;

    background:#cfcfcf;

    cursor:pointer;

    transition:var(--transicion);

}


.indicador.activo{

    background:var(--color-primario);

    transform:scale(1.2);

}


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

@media (max-width:768px){

    .carrusel-btn{

        width:38px;

        height:38px;

        font-size:1.6rem;

    }


    .carrusel-anterior{

        left:8px;

    }


    .carrusel-siguiente{

        right:8px;

    }

}
/*==================================================
            ACCESOS RÁPIDOS
==================================================*/

.accesos{

    padding:90px 20px;

    background:var(--color-fondo);

}

.accesos-grid{

    max-width:1200px;

    margin:auto;

    display:grid;

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

    gap:30px;

}

.acceso-card{

    background:var(--color-blanco);

    padding:40px 30px;

    border-radius:18px;

    text-align:center;

    text-decoration:none;

    color:inherit;

    box-shadow:var(--sombra-card);

    transition:all .35s ease;

    border-top:5px solid transparent;

}

.acceso-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--sombra-hover);

    border-top:5px solid var(--color-primario);

}

.acceso-icono{

    font-size:58px;

    margin-bottom:25px;

    transition:.3s;

}

.acceso-card h3{

    color:var(--color-primario);

    margin-bottom:15px;

    font-size:1.4rem;

}

.acceso-card p{

    color:var(--color-gris);

    line-height:1.6;

}

.acceso-card:hover .acceso-icono{

    transform:scale(1.15);

}

/*==================================================
                DIRECTORIO
==================================================*/

.directorio{

    background:#ffffff;

    padding:100px 20px;

}

.grupo-directorio{

    max-width:1200px;

    margin:60px auto;

}

.grupo-titulo{

    font-size:1.8rem;

    color:var(--color-primario);

    border-left:6px solid var(--color-primario);

    padding-left:15px;

    margin-bottom:35px;

}

.directorio-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

}

.coordinacion{

    grid-template-columns:1fr;

    max-width:700px;

}

.tecnicos{

    grid-template-columns:repeat(2,1fr);

}

.card-directorio{

    background:#ffffff;

    padding:30px;

    border-radius:15px;

    box-shadow:var(--sombra-card);

    transition:var(--transicion);

    border-top:5px solid transparent;

}

.card-directorio:hover{

    transform:translateY(-8px);

    box-shadow:var(--sombra-hover);

}

.card-directorio h4{

    color:var(--color-primario);

    margin-bottom:10px;

    font-size:1.3rem;

}

.card-directorio p{

    color:#555;

    margin-bottom:25px;

}

.btn-correo{

    display:inline-block;

    background:var(--color-primario);

    color:#fff;

    text-decoration:none;

    padding:10px 20px;

    border-radius:30px;

    transition:var(--transicion);

}

.btn-correo:hover{

    background:var(--color-secundario);

}

.ingles{
    border-top:5px solid #C62828;
}

.frances{
    border-top:5px solid #1565C0;
}

.aleman{
    border-top:5px solid #F9A825;
}

.italiano{
    border-top:5px solid #43A047;
}

.card-directorio.coordinador,
.card-directorio.tecnico{
    border-top:5px solid var(--color-primario);
}