/*
    Ajustes responsive finales. Este archivo se carga el último para mantener
    intacta la composición de escritorio y separar tablet de móvil.
*/

@media (min-width: 769px) and (max-width: 1024px) {
    .SiteHeader {
        padding-inline: 32px;
    }

    .Hero {
        min-height: auto;
        gap: 40px;
        padding: 80px 32px 72px;
    }

    .branding h1 {
        font-size: clamp(88px, 15vw, 132px);
    }

    .branding .llega {
        font-size: clamp(38px, 5.5vw, 52px);
    }

    .Description {
        font-size: 19px;
        line-height: 1.65;
    }

    .HeroFeatures {
        max-width: none;
    }

    .HeroFeatureCard {
        aspect-ratio: auto;
        min-height: 230px;
        padding: 28px;
    }

    .HeroFeatureCard h3 {
        font-size: clamp(28px, 3.6vw, 36px);
    }

    .HeroFeatureCard p {
        font-size: 18px;
        line-height: 1.6;
    }

    .SectionBlock,
    .ServiciosMini {
        padding: clamp(72px, 8vw, 88px) clamp(32px, 4.5vw, 46px);
    }

    .ServiciosMini {
        min-height: auto;
    }

    .ServicioItem {
        min-height: 300px;
        padding: 28px;
    }

    .ServicioItem h3 {
        font-size: clamp(28px, 3.5vw, 34px);
    }

    .ServicioItem p {
        font-size: 18px;
        line-height: 1.6;
    }

    .ZonasSection {
        padding-block: clamp(72px, 8vw, 88px);
    }

    .ServiciosHeader h2,
    .ZonasHeader h2,
    .OpinionesHeader h2,
    .FAQHeader h2,
    .ContactoHeader h2 {
        font-size: clamp(64px, 7vw, 72px);
    }

    .ServiciosHeader p,
    .ZonasHeader p,
    .OpinionesHeader p,
    .FAQHeader p,
    .ContactoHeader p {
        font-size: 19px;
    }

    .ZonaItem h3 {
        font-size: 27px;
    }

    .ZonaItem p,
    .ContactoCard p,
    .ContactoLocationContent p {
        font-size: 18px;
    }

    .OpinionesButton {
        display: none;
    }

    .OpinionesViewport {
        width: calc(100% + 32px);
        overflow: visible;
        padding: 0;
        margin: 0;
    }

    .OpinionesTrack {
        transform: none !important;
        grid-auto-columns: min(62%, 520px);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        padding: 0 32px 12px 0;
        -webkit-overflow-scrolling: touch;
    }


    .OpinionCard {
        min-height: 300px;
        scroll-snap-align: start;
    }

    .OpinionCard p {
        font-size: 18px;
    }

    .OpinionCard strong {
        font-size: 18px;
    }

    .ContactoCard h3,
    .ContactoLocationContent h3 {
        font-size: clamp(28px, 3.5vw, 36px);
    }

    .ContactoLocationMap {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    }

    .SiteFooter {
        padding-inline: 32px;
    }
}

@media (max-width: 768px) {
    .SiteHeader {
        min-height: var(--header-h);
        grid-template-rows: var(--header-h) auto;
        padding-left: max(24px, env(safe-area-inset-left));
        padding-right: max(24px, env(safe-area-inset-right));
    }

    .HeaderLogo {
        font-size: 27px;
    }

    .HeaderMenuButton {
        width: 52px;
        height: 52px;
    }

    .Navi {
        max-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .SiteHeader.is-open .Navi {
        max-height: min(480px, calc(100svh - var(--header-h)));
    }

    .Navi a {
        min-height: 62px;
        display: grid;
        align-items: center;
        font-size: 18px;
    }

    .Hero {
        min-height: auto;
        align-content: start;
        gap: 44px;
        padding: clamp(76px, 16vw, 96px) 24px 96px;
    }

    .branding {
        display: grid;
    }

    .branding h1 {
        font-size: clamp(68px, 20vw, 104px);
        letter-spacing: -0.045em;
    }

    .branding .llega {
        margin-top: 6px;
        font-size: clamp(36px, 10vw, 48px);
        letter-spacing: -0.025em;
    }

    .Description {
        max-width: 100%;
        margin-top: 28px;
        font-size: 19px;
        line-height: 1.7;
    }

    .HeroDriver {
        max-width: 100%;
        margin-top: 16px;
        font-size: 17px;
    }

    .ButtonGroup {
        width: 100%;
        grid-auto-flow: row;
        justify-content: stretch;
        gap: 16px;
        margin-top: 34px;
    }

    .ButtonCall,
    .ButtonWReservar,
    .ReservaSubmit {
        min-height: 64px;
        padding-inline: 28px;
        font-size: 18px;
    }

    .HeroFeatures {
        margin-top: 12px;
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .HeroFeatureCard {
        aspect-ratio: auto;
        min-height: 240px;
        gap: 18px;
        padding: 32px;
    }

    .HeroFeatureCard h3 {
        font-size: clamp(30px, 8vw, 36px);
    }

    .HeroFeatureCard p {
        max-width: 100%;
        font-size: 18px;
        line-height: 1.65;
    }

    .SectionBlock {
        padding: 96px 24px;
    }

    .SectionTag {
        padding: 11px 17px;
        font-size: 16px;
    }

    .PageSection,
    .ZonasSection {
        min-height: auto;
    }

    .ServiciosMini {
        gap: 34px;
    }

    .ServiciosList {
        gap: 20px;
    }

    .ServicioItem {
        aspect-ratio: auto;
        min-height: 360px;
        padding: 32px;
    }

    .ServicioItem h3 {
        font-size: 32px;
    }

    .ServicioItem p {
        font-size: 18px;
        line-height: 1.65;
    }

    .ZonasSection {
        align-content: start;
    }

    .ZonasHeader h2,
    .OpinionesHeader h2,
    .FAQHeader h2,
    .ContactoHeader h2,
    .PageSection h2 {
        font-size: clamp(48px, 13vw, 64px);
        line-height: 0.98;
    }

    .ZonasHeader p,
    .OpinionesHeader p,
    .FAQHeader p,
    .ContactoHeader p,
    .ZonasFooter p {
        font-size: 19px;
        line-height: 1.65;
    }

    .ZonasGrid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 18px;
    }

    .ZonaItem {
        min-height: 170px;
        padding: 28px;
    }

    .ZonaItem h3 {
        font-size: 29px;
    }

    .ZonaItem p {
        font-size: 18px;
        line-height: 1.6;
    }

    .ZonaPrincipal {
        min-height: 280px;
    }

    .ZonaPrincipal h3 {
        font-size: clamp(48px, 14vw, 64px);
    }

    .ZonasFooter {
        gap: 20px;
    }

    .OpinionesSection {
        gap: 38px;
    }

    .OpinionesViewport {
        width: calc(100% + 24px);
        overflow: visible;
        padding: 0;
        margin: 0;
    }

    .OpinionesTrack {
        transform: none !important;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        grid-auto-columns: min(92%, 430px);
        gap: 18px;
        padding: 0 24px 14px 0;
        -webkit-overflow-scrolling: touch;
    }


    .OpinionCard {
        scroll-snap-align: start;
        min-height: 370px;
        gap: 28px;
        padding: 32px;
    }

    .FAQItem summary {
        min-height: 84px;
        gap: 16px;
        padding: 24px 28px;
        font-size: 20px;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    .FAQItem p {
        padding: 0 28px 28px;
        font-size: 18px;
        line-height: 1.7;
    }

    .ContactoHeader p,
    .ContactoCard p,
    .ContactoLocationContent p {
        font-size: 18px;
        line-height: 1.7;
    }

    .ContactoCard,
    .ContactoLocationContent {
        gap: 18px;
        padding: 32px;
    }

    .ContactoCard h3,
    .ContactoLocationContent h3 {
        font-size: clamp(32px, 9vw, 42px);
    }

    .ContactoLocationMapFrame,
    .ContactoLocationMapFrame iframe {
        min-height: 340px;
    }

    .OpinionStars {
        font-size: 34px;
        letter-spacing: 4px;
    }

    .OpinionCard p {
        font-size: 19px;
        line-height: 1.7;
    }

    .OpinionCard strong {
        font-size: 19px;
    }

    .OpinionCard span {
        font-size: 17px;
    }

    .FloatingActions {
        right: max(22px, env(safe-area-inset-right));
        bottom: max(22px, env(safe-area-inset-bottom));
        gap: 14px;
    }

    .FloatingButton {
        width: 60px;
        height: 60px;
        font-size: 26px;
    }

    .ReservaOverlay {
        padding: 16px;
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }

    .ReservaModal {
        width: 100%;
        max-height: calc(100svh - 32px);
        overflow-y: auto;
        gap: 22px;
        padding: 32px 28px;
        overscroll-behavior: contain;
    }

    .ReservaModal p {
        font-size: 18px;
        line-height: 1.65;
    }

    .ReservaForm {
        gap: 18px;
    }

    .ReservaField > label {
        font-size: 17px;
    }

    .ReservaForm input,
    .ReservaForm select {
        height: 58px;
        padding-inline: 18px;
        font-size: 18px;
        line-height: 58px;
    }

    .ReservaForm textarea {
        min-height: 126px;
        padding: 16px 18px;
        font-size: 18px;
    }

    .ReservaGeoButton {
        width: 58px;
        height: 58px;
        font-size: 22px;
    }

    .ReservaSuggestionItem,
    .ReservaSuggestionEmpty {
        padding: 14px 16px;
        font-size: 16px;
    }

    .ReservaClose {
        top: 18px;
        right: 18px;
        width: 44px;
        height: 44px;
        font-size: 28px;
    }

    .SiteFooter {
        padding: 40px 24px;
        font-size: 17px;
    }
}

@media (max-width: 480px) {
    .SiteHeader {
        padding-left: max(18px, env(safe-area-inset-left));
        padding-right: max(18px, env(safe-area-inset-right));
    }

    .HeaderLogo {
        font-size: 26px;
    }

    .HeaderMenuButton {
        width: 50px;
        height: 50px;
    }

    .Hero {
        padding: 76px 18px 88px;
    }

    .branding h1 {
        font-size: clamp(68px, 20vw, 88px);
    }

    .SectionBlock {
        padding: 88px 18px;
    }

    .ServicioItem {
        min-height: 340px;
    }

    .ZonaItem {
        min-height: 165px;
    }

    .ZonaPrincipal {
        min-height: 270px;
    }

    .OpinionesViewport {
        width: calc(100% + 18px);
    }

    .OpinionesTrack {
        grid-auto-columns: 94%;
        padding-right: 18px;
    }

    .FloatingActions {
        right: max(18px, env(safe-area-inset-right));
        bottom: max(18px, env(safe-area-inset-bottom));
    }

    .FloatingButton {
        width: 58px;
        height: 58px;
        font-size: 25px;
    }

    .ReservaOverlay {
        padding: 12px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    .ReservaModal {
        max-height: calc(100svh - 24px);
        padding: 28px 22px max(28px, env(safe-area-inset-bottom));
    }

    .ReservaModal h2 {
        padding-right: 44px;
        font-size: clamp(42px, 12vw, 52px);
    }

    .FAQItem summary,
    .FAQItem p,
    .ContactoCard,
    .ContactoLocationContent {
        padding-left: 26px;
        padding-right: 26px;
    }
}

@media (hover: none) and (pointer: coarse) {
    /* Ya no hace falta cancelar aquí elevaciones ni brillos de hover:
       ninguna pieza los tiene. */

    /* En táctil no hay zoom, pero se mantiene la escala de reposo para que
       la imagen no dé un salto si el navegador simula un hover al tocar. */
    .ServicioItem:hover img {
        transform: translateZ(0) scale(1.02);
        opacity: 0.28;
        filter: saturate(0.85) contrast(1.05);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/*
    Escala responsive definitiva
    ----------------------------
    Estas reglas fluidas sustituyen medidas rígidas en móvil y mantienen una
    proporción consistente desde 320 px hasta 768 px.
*/

img,
iframe {
    max-width: 100%;
}

main,
main > section,
main article,
main div {
    min-width: 0;
}

@media (max-width: 768px) {
    :root {
        --mobile-gutter: clamp(16px, 4.5vw, 24px);
        --mobile-section-space: clamp(60px, 13vw, 84px);
        --mobile-card-padding: clamp(20px, 5.5vw, 28px);

        /* En móvil el radio ya no crece con la pantalla: es el mismo de
           todo el sitio, para que las tarjetas se lean igual de planas. */
        --mobile-card-radius: var(--radius);

        /* Escala de móvil, un escalón por debajo de la anterior.
           ------------------------------------------------------
           El cuerpo baja de 18-20px a 16-17px y los titulares pierden
           en torno a un 20%. 16px es el suelo del texto y de todos los
           campos del formulario: por debajo, Safari en iOS hace zoom
           solo al enfocar un input y descoloca la página. */
        --mobile-text: clamp(16px, 2.4vw, 17px);
        --mobile-title: clamp(38px, 10.5vw, 54px);
    }

    html {
        font-size: 100%;
    }

    body {
        width: 100%;
    }

    .SiteHeader {
        min-height: var(--header-h);
        grid-template-rows: var(--header-h) auto;
        padding-left: max(var(--mobile-gutter), env(safe-area-inset-left));
        padding-right: max(var(--mobile-gutter), env(safe-area-inset-right));
    }

    .HeaderLogo {
        font-size: clamp(21px, 6vw, 24px);
    }

    .HeaderMenuButton {
        width: clamp(42px, 11vw, 46px);
        height: clamp(42px, 11vw, 46px);
        flex-shrink: 0;
    }

    .SiteHeader.is-open .Navi {
        max-height: calc(100svh - var(--header-h));
        padding-block: 10px 18px;
    }

    .Navi a {
        min-height: clamp(48px, 12.5vw, 52px);
        padding: 13px 16px;
        font-size: clamp(16px, 4vw, 17px);
    }

    .Hero {
        min-height: auto;
        gap: clamp(28px, 8vw, 40px);
        padding: clamp(52px, 12vw, 72px) var(--mobile-gutter)
            clamp(64px, 15vw, 88px);
    }

    .branding h1 {
        max-width: 100%;
        font-size: clamp(52px, 16vw, 80px);
        overflow-wrap: normal;
    }

    .branding .llega {
        margin-top: 4px;
        font-size: clamp(27px, 8vw, 38px);
    }

    .Description {
        margin-top: clamp(18px, 5vw, 24px);
        font-size: var(--mobile-text);
        line-height: 1.65;
    }

    .HeroDriver {
        margin-top: clamp(12px, 3vw, 16px);
        font-size: calc(var(--mobile-text) - 1px);
    }

    .ButtonGroup {
        gap: 12px;
        margin-top: clamp(22px, 6vw, 30px);
    }

    .ButtonCall,
    .ButtonWReservar,
    .ReservaSubmit {
        width: 100%;
        min-height: clamp(50px, 13vw, 56px);
        padding: 12px 20px;
        font-size: clamp(16px, 4vw, 17px);
        line-height: 1.3;
        text-align: center;
    }

    .HeroFeatures {
        gap: clamp(12px, 3.2vw, 16px);
    }

    .HeroFeatureCard {
        min-height: clamp(180px, 48vw, 220px);
        gap: 13px;
        padding: var(--mobile-card-padding);
        border-radius: var(--mobile-card-radius);
    }

    .HeroFeatureCard h3 {
        font-size: clamp(23px, 6.5vw, 29px);
    }

    .HeroFeatureCard p {
        font-size: var(--mobile-text);
        line-height: 1.6;
    }

    .SectionBlock,
    .ServiciosMini {
        padding: var(--mobile-section-space) var(--mobile-gutter);
    }

    .SectionTag {
        padding: 8px 14px;
        font-size: clamp(13px, 3.4vw, 14px);
    }

    .ServiciosMini,
    .ZonasSection,
    .OpinionesSection,
    .FAQSection,
    .ContactoSection {
        gap: clamp(24px, 6.5vw, 34px);
    }

    .ServiciosHeader h2,
    .ZonasHeader h2,
    .OpinionesHeader h2,
    .FAQHeader h2,
    .ContactoHeader h2,
    .PageSection h2 {
        max-width: 100%;
        font-size: var(--mobile-title);
        line-height: 1;
        overflow-wrap: anywhere;
        text-wrap: balance;
    }

    .ServiciosHeader p,
    .ZonasHeader p,
    .OpinionesHeader p,
    .FAQHeader p,
    .ContactoHeader p,
    .ZonasFooter p {
        font-size: var(--mobile-text);
        line-height: 1.65;
    }

    .ServiciosList,
    .ZonasGrid,
    .FAQList,
    .FAQColumn,
    .ContactoGrid {
        gap: clamp(13px, 3.6vw, 18px);
    }

    .ServicioItem {
        min-height: clamp(240px, 70vw, 310px);
        gap: 10px;
        padding: var(--mobile-card-padding);
        border-radius: var(--mobile-card-radius);
    }

    .ServicioItem h3 {
        font-size: clamp(23px, 6.5vw, 28px);
    }

    .ServicioItem p {
        font-size: var(--mobile-text);
        line-height: 1.6;
    }

    /* Barras del mismo alto que en escritorio, tantas por fila como
       quepan según el ancho del teléfono. */
    .ZonasGrid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        grid-auto-rows: auto;
        gap: 10px;
    }

    .ZonaPrincipal {
        grid-column: 1 / -1;
    }

    .ZonaItem {
        padding: var(--mobile-card-padding);
        border-radius: var(--mobile-card-radius);
    }

    /* El alto de la barra y el radio cerrado los pone zonas.css. Aquí sólo
       hay que anular el `min-height: 170px` heredado, que la estiraba
       hasta convertirla otra vez en un bloque alto. */
    .ZonaItem:not(.ZonaPrincipal) {
        min-height: 62px;
    }

    .ZonaItem h3 {
        font-size: clamp(21px, 6vw, 26px);
        overflow-wrap: anywhere;
    }

    /* El nombre se ajusta al lado de la ficha, no al ancho de la
       pantalla: a 23px "Donostia-San Sebastián" se partía por la mitad
       de una palabra. */
    .ZonaItem:not(.ZonaPrincipal) h3 {
        font-size: clamp(13px, 3.4vw, 15px);
    }

    .ZonaItem p {
        font-size: var(--mobile-text);
    }

    .ZonaPrincipal {
        min-height: clamp(195px, 55vw, 245px);
    }

    .ZonaPrincipal h3 {
        font-size: clamp(37px, 11vw, 53px);
    }

    .OpinionesViewport {
        width: calc(100% + var(--mobile-gutter));
    }

    .OpinionesTrack {
        grid-auto-columns: min(90%, 400px);
        gap: clamp(13px, 3.5vw, 16px);
        padding-right: var(--mobile-gutter);
    }

    .OpinionCard {
        min-height: clamp(265px, 74vw, 320px);
        gap: 20px;
        padding: var(--mobile-card-padding);
        border-radius: var(--mobile-card-radius);
    }

    .OpinionStars {
        font-size: clamp(24px, 6.5vw, 29px);
        letter-spacing: clamp(2px, 0.8vw, 3px);
        white-space: nowrap;
    }

    .OpinionCard p {
        font-size: var(--mobile-text);
        line-height: 1.65;
    }

    .OpinionCard strong {
        font-size: clamp(16px, 4.2vw, 17px);
    }

    .OpinionCard span {
        font-size: clamp(13px, 3.5vw, 14px);
    }

    .FAQItem {
        border-radius: var(--mobile-card-radius);
    }

    .FAQItem summary {
        min-height: clamp(62px, 17vw, 72px);
        gap: 12px;
        padding: clamp(17px, 4.8vw, 22px) var(--mobile-card-padding);
        font-size: clamp(17px, 4.4vw, 19px);
    }

    .FAQItem summary::after {
        font-size: clamp(21px, 5.8vw, 25px);
    }

    .FAQItem p {
        padding: 0 var(--mobile-card-padding) var(--mobile-card-padding);
        font-size: var(--mobile-text);
        line-height: 1.65;
    }

    .ContactoCard,
    .ContactoLocationContent {
        gap: 14px;
        padding: var(--mobile-card-padding);
    }

    .ContactoCard h3,
    .ContactoLocationContent h3 {
        font-size: clamp(24px, 7vw, 32px);
        overflow-wrap: anywhere;
    }

    .ContactoCard p,
    .ContactoLocationContent p {
        font-size: var(--mobile-text);
        line-height: 1.65;
    }

    .ContactoLocationMapFrame,
    .ContactoLocationMapFrame iframe {
        min-height: clamp(220px, 62vw, 290px);
    }

    .FloatingActions {
        right: max(clamp(14px, 4vw, 18px), env(safe-area-inset-right));
        bottom: max(clamp(14px, 4vw, 18px), env(safe-area-inset-bottom));
        gap: 10px;
    }

    .FloatingButton {
        width: clamp(48px, 13vw, 54px);
        height: clamp(48px, 13vw, 54px);
        font-size: clamp(21px, 5.6vw, 24px);
    }

    .ReservaOverlay {
        padding: clamp(10px, 4vw, 18px);
        padding-bottom: max(clamp(10px, 4vw, 18px), env(safe-area-inset-bottom));
    }

    .ReservaModal {
        max-height: calc(100svh - clamp(20px, 8vw, 36px));
        gap: clamp(15px, 4vw, 20px);
        padding: var(--mobile-card-padding);
        padding-bottom: max(var(--mobile-card-padding), env(safe-area-inset-bottom));
        border-radius: var(--mobile-card-radius);
    }

    .ReservaModal h2 {
        padding-right: 40px;
        font-size: clamp(32px, 9vw, 43px);
    }

    .ReservaModal p {
        font-size: var(--mobile-text);
    }

    .ReservaForm,
    .ReservaGrid {
        gap: clamp(12px, 3.4vw, 16px);
    }

    .ReservaField > label {
        font-size: clamp(14px, 3.8vw, 15px);
    }

    /* 16px clavado en los campos: es el mínimo que evita el zoom
       automático de Safari al enfocar. La altura sí baja, que es lo que
       aprieta el formulario; el objetivo táctil sigue por encima de los
       44px recomendados. */
    .ReservaForm input,
    .ReservaForm select {
        height: clamp(48px, 13vw, 54px);
        padding-inline: 16px;
        font-size: 16px;
        line-height: clamp(48px, 13vw, 54px);
    }

    .ReservaForm textarea {
        min-height: clamp(92px, 26vw, 112px);
        padding: 14px 16px;
        font-size: 16px;
    }

    .ReservaGeoButton {
        width: clamp(48px, 13vw, 54px);
        height: clamp(48px, 13vw, 54px);
        font-size: 19px;
    }

    .ReservaSuggestionItem,
    .ReservaSuggestionEmpty {
        padding: 12px 14px;
        font-size: 15px;
    }

    .ReservaClose {
        top: 14px;
        right: 14px;
        width: clamp(36px, 10vw, 40px);
        height: clamp(36px, 10vw, 40px);
        font-size: 24px;
    }

    .SiteFooter {
        padding: clamp(28px, 7vw, 36px) var(--mobile-gutter);
        font-size: clamp(13px, 3.5vw, 15px);
    }
}

@media (max-width: 360px) {
    :root {
        --mobile-gutter: 14px;
        --mobile-card-padding: 18px;
    }

    .branding h1 {
        font-size: clamp(46px, 15vw, 56px);
    }

    .OpinionesTrack {
        grid-auto-columns: 92%;
    }
}

/* En horizontal la barra vuelve a 64px. Antes sólo se corregía el hueco
   del body, así que el scroll seguía frenando a 88px y los saltos desde el
   menú caían 24px por debajo de donde debían. */
@media (max-height: 540px) and (orientation: landscape) {
    :root {
        --header-h: 64px;
    }

    .SiteHeader {
        min-height: 64px;
        grid-template-rows: 64px auto;
    }

    .Hero {
        padding-block: 48px 64px;
    }

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

    .HeroFeatureCard {
        min-height: 210px;
    }

    .SectionBlock,
    .ServiciosMini,
    .ZonasSection {
        padding-block: 64px;
    }
}