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

/* ---------- Tablets ---------- */

@media (max-width:992px){

    section,
    .container{
        width:min(94%,900px);
    }

    .hero{
        grid-template-columns:1fr;
        text-align:center;
        gap:40px;
        min-height:auto;
        padding:40px 0;
    }

    .hero-foto{
        justify-content:center;
    }

    .hero-info{
        max-width:100%;
    }

    .linea{
        margin:20px auto 30px;
        width:180px;
    }

    .datos{
        align-items:center;
    }

    .sobre-contenedor,
    .impacto-grid,
    .detalle-contenido,
    .research-grid,
    .tecnologias-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    .investigacion-grid,
    .publicaciones-grid,
    .papers-grid,
    .casos-grid,
    .proyectos-grid,
    .objetivos-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .logos-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .contacto-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

}


/* ---------- Móviles ---------- */

@media (max-width:768px){

    body{
        padding-top:72px;
    }

    section,
    .container{
        width:92%;
    }

    .logo-texto{
        display:none;
    }

    .hero{
        padding:20px 0 40px;
    }

    .hero-foto img{
        max-width:220px;
    }

    .hero-info h1{
        font-size:2rem;
    }

    .hero-info h3{
        font-size:.85rem;
    }

    .hero-info p{
        font-size:.95rem;
    }

    .hero-btn{
        width:100%;
        text-align:center;
    }

    .sobre-info{
        border-left:none;
        padding-left:0;
    }

    .investigacion-grid,
    .publicaciones-grid,
    .papers-grid,
    .casos-grid,
    .proyectos-grid,
    .objetivos-grid,
    .logos-grid{
        grid-template-columns:1fr;
    }

    .publicacion,
    .paper-card,
    .invest-card,
    .caso-card,
    .proyecto-card{
        padding:24px;
    }

    .contacto-card{
        padding:35px 25px;
    }

    .hero-banner{
        height:220px;
    }

    .hero-linea h1{
        font-size:2.1rem;
    }

}


/* ---------- Móviles pequeños ---------- */

@media (max-width:480px){

    .hero-info h1{
        font-size:1.7rem;
    }

    .titulo-seccion h2{
        font-size:1.9rem;
    }

    .hero-btn,
    .boton-volver,
    .boton-cv{
        width:100%;
    }

    .contacto-card{
        padding:25px 18px;
    }

}