/*
 * responsive.css — Inter Arquitectos
 * Ajustes mínimos para móvil y tablet.
 * No modifica el diseño de escritorio.
 */

/* ── Móvil (hasta 600px) ─────────────────────────────────────── */
@media only screen and (max-width: 600px) {

    /* Acordeón: altura ajustada al título en móvil */
    .st-accordion ul li.nav-item { height: 58px !important; }
    .st-accordion ul li.nav-item.st-open { height: auto !important; }
    h1 { font-size: 2.2em !important; letter-spacing: -1px; line-height: 1em; }

    /* Wrapper con menos margen lateral */
    .wrapper { margin: 2% 3%; width: 94%; }

    /* Columnas: todas al 100% en móvil */
    .one_third, .two_third, .one_fifth,
    .two_fifth, .one { 
        width: 100% !important; 
        float: none !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    /* Quitar borde izquierdo de columna en móvil */
    .left-div { border-left: none; padding-left: 0; }

    /* Portafolio: 2 columnas en móvil */
    .portfolio li.item {
        width: calc(50% - 6px) !important;
        margin-right: 5px !important;
    }
    .portfolio li.item:nth-child(2n) { margin-right: 0 !important; }

    /* Filtro de portafolio: texto más pequeño */
    .filter a { font-size: .55em; padding: .4em .7em .5em; }

    /* Íconos de servicios: 2 por fila */
    .services { width: 50% !important; float: left !important; }

    /* Formulario de contacto */
    .text, .textbig, textarea { width: 96% !important; }

    /* Logo más pequeño */
    .logo img { width: 100px; height: 100px; }
    .logo { margin: 3% 0 -1% 3%; }

    /* Espaciado interior del contenido */
    .fill { padding: 18px 15px 25px; }
}

/* ── Tablet (601px – 900px) ──────────────────────────────────── */
@media only screen and (min-width: 601px) and (max-width: 900px) {

    h1 { font-size: 4.5em; }

    /* Columnas de dos tercios / un tercio → 100% */
    .two_third, .one_third { 
        width: 100% !important; 
        float: none !important;
        margin-right: 0 !important;
    }

    /* Columnas de dos quintos → 48% */
    .two_fifth { 
        width: 48% !important; 
        margin-right: 2% !important;
    }

    /* Última columna de equipo → 100% */
    .one_fifth.lastcols { 
        width: 100% !important; 
        float: none !important;
        margin-right: 0 !important;
    }

    /* Portafolio: 3 columnas en tablet */
    .portfolio li.item { width: 173px !important; }

    /* Íconos de servicios: wrap libre */
    .one_fifth.services { width: 30% !important; float: left !important; }

    .fill { padding: 25px 20px 35px; }
}