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

@media (max-width:1100px){

    /* Menú móvil */
    .nav-toggle{ display:block; }

    /* backdrop-filter crearía un contenedor para el menú fijo */
    .nav-open .navbar{
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
    }

    nav{
        position:fixed;
        inset:0;
        z-index:1000;
        flex-direction:column;
        justify-content:center;
        align-items:flex-start;
        gap:20px;
        padding:100px var(--gutter) 40px;
        background:var(--paper);
        opacity:0;
        visibility:hidden;
        transition:opacity .35s, visibility .35s;
    }

    .nav-open nav{
        opacity:1;
        visibility:visible;
    }

    nav a{
        font-family:var(--font-serif);
        font-size:34px;
        font-weight:600;
        letter-spacing:-.03em;
        color:var(--fg);
    }

    .nav-cta{
        margin-top:14px;
        padding:14px 24px;
        font-family:var(--font-sans) !important;
        font-size:17px !important;
        letter-spacing:0 !important;
    }

    main > section.quote{ grid-template-columns:1fr; }
    .quote-intro{ position:static; }

    .hero-inner{ grid-template-columns:1fr; }
    .gauge{ max-width:560px; }

    .steps{
        grid-template-columns:repeat(2, minmax(0,1fr));
        row-gap:56px;
    }
}

@media (max-width:900px){

    .principles{
        grid-template-columns:1fr;
        margin-top:64px;
    }

    .principles li,
    .principles li + li{
        padding:30px 0;
        border-left:none;
        border-bottom:1px solid var(--line);
    }

    .service-row{
        grid-template-columns:52px minmax(0,1fr) 38px;
        gap:6px 12px;
        padding:24px 0;
    }

    .service-desc{
        grid-column:2 / 3;
        grid-row:2;
        font-size:15px;
    }

    .service-plus{
        grid-column:3;
        grid-row:1 / span 2;
    }

    .service-detail-inner{
        grid-template-columns:1fr;
        padding:0 0 0 64px;
    }

    .case-list{ grid-template-columns:1fr; }

    .case,
    .case:nth-child(even){
        padding:40px 0 44px;
        border-left:none;
    }

    .case-meta{ margin-bottom:30px; }

    .compare-row{
        grid-template-columns:1fr 1fr;
        gap:6px 20px;
    }

    .compare-row > span:first-child{ grid-column:1 / -1; }
    .compare-headrow > span:first-child{ display:none; }

    .contact-row{
        grid-template-columns:1fr;
        gap:6px;
    }

    .results{ grid-template-columns:repeat(2, minmax(0,1fr)); }
    .results li:nth-child(3){ border-left:none; }
    .results li:nth-child(n+3){ border-top:1px solid var(--line); }

    .guard-grid{ grid-template-columns:1fr 1fr; }
    .guard-item:nth-child(3){ border-left:none; }
    .guard-item:nth-child(n+3){ border-top:1px solid var(--line); }
}

@media (max-width:600px){

    body{ font-size:16px; }

    .hero-buttons .btn{ width:100%; }

    .dimension span{ font-size:10px; letter-spacing:.14em; }

    .gauge{ padding:24px 20px 22px; box-shadow:8px 8px 0 rgba(21,19,27,.1); }

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

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

    .quote-actions .btn{ width:100%; }

    .budget-scale span:nth-child(even){ visibility:hidden; }

    .service-detail-inner{ padding-left:0; }

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

    .results li,
    .results li + li{
        border-left:none;
        border-top:1px solid var(--line);
    }

    .results li:first-child{ border-top:none; }

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

    .guard-item,
    .guard-item + .guard-item{
        border-left:none;
        border-top:1px solid var(--line);
    }

    .guard-item:first-child{ border-top:none; }

    .blocks i{ width:34px; }

    .wa-float{
        width:52px;
        height:52px;
        right:16px;
    }
}