/* =====================================================
RESPONSIVE.CSS — ADAPTACIÓN A PANTALLAS
-------------------------------------------------------

Breakpoints utilizados:

900px → tablets / pantallas medianas
600px → móviles

Aquí solo viven reglas responsive.
Nada de estilos base.

===================================================== */


/* ---------- TABLETS ---------- */

@media (max-width:900px){

.content-grid{
grid-template-columns:1fr 1fr;
}

}


/* ---------- MÓVILES ---------- */

@media (max-width:600px){

/* Header pasa a formato vertical */

.site-header{
display:block;
width:100%;
padding-top:45px;
padding-bottom:20px;
background:var(--color-surface);
box-sizing:border-box;
}

/* Logo centrado */

.logo img{
display:block;
margin:0 auto;
height:40px;
width:auto;
}


/* Navegación en bloques */

@media (max-width: 800px) {
    .site-nav {
        display: flex;
        flex-wrap: wrap;          /* permite varias filas */
        justify-content: center;   /* centra los enlaces */
        padding: var(--space-2);
        gap: 0;
    }

    .site-nav > li {             /* apunta a los <li> directos */
        flex: 0 0 33.33%;        /* 3 enlaces por fila */
        text-align: center;      
        list-style: none;        
        margin: 0;               
    }
}


/* Grid de contenido */

.content-grid{
grid-template-columns:1fr;
}


/* Ocultar menú extra si existe */

.menu{
display:none;
}

}