/*
 * Cross-device responsive foundation
 * Loaded after each page's original styles.
 */

html {
    width: 100%;
    max-width: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;
}

body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

@supports (overflow: clip) {
    html,
    body {
        overflow-x: clip;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

header,
nav,
main,
section,
article,
aside,
footer,
form,
fieldset,
.container,
.header-container,
.nav-container,
.section-container,
.content-container,
.footer-container {
    min-width: 0;
}

img,
picture,
video,
canvas {
    max-width: 100%;
    height: auto;
}

iframe,
embed,
object {
    max-width: 100%;
}

svg {
    max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
blockquote,
figcaption,
label,
a,
button {
    max-width: 100%;
    overflow-wrap: break-word;
}

input,
select,
textarea,
button {
    min-width: 0;
    max-width: 100%;
    font-family: inherit;
}

textarea {
    resize: vertical;
}

table {
    max-width: 100%;
}

pre {
    max-width: 100%;
    overflow-x: auto;
}

a,
button,
input,
select,
textarea,
summary {
    touch-action: manipulation;
}

.hero-grid > *,
.about-grid > *,
.contact-grid > *,
.faq-grid > *,
.service-grid > *,
.services-grid > *,
.features-grid > *,
.process-grid > *,
.testimonials-grid > *,
.footer-grid > *,
.local-grid > *,
.local-detail-grid > *,
.benefits-grid > *,
.cities-grid > *,
.cards > *,
.stats-grid > *,
.stats-container > * {
    min-width: 0;
}

@media (max-width: 1024px) {
    .container,
    .header-container,
    .nav-container,
    .section-container,
    .content-container,
    .footer-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: max(20px, env(safe-area-inset-left)) !important;
        padding-right: max(20px, env(safe-area-inset-right)) !important;
    }

    .nav-desktop {
        display: none !important;
    }

    .menu-icon {
        display: flex !important;
    }

    .nav-mobile,
    .mobile-menu {
        height: 100vh;
        height: 100dvh;
        max-height: 100dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .hero-grid,
    .about-grid,
    .contact-grid,
    .faq-grid,
    .local-detail-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .services-grid,
    .features-grid,
    .coverage-grid,
    .testimonials-grid,
    .process-grid,
    .footer-grid,
    .local-grid,
    .benefits-grid,
    .cities-grid,
    .commune-link-grid,
    .local-insight-grid,
    .experts-grid,
    .gallery-grid,
    .hair-fit-grid,
    .conversion-cards,
    .cards,
    .links-grid,
    .service-grid,
    .trust-grid,
    .beneficios-grid,
    .catalogo-grid-real,
    .legal-grid,
    .products-grid,
    .power-features-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767px) {
    html {
        scroll-padding-top: 88px;
    }

    .container,
    .header-container,
    .nav-container,
    .section-container,
    .content-container,
    .footer-container {
        padding-left: max(16px, env(safe-area-inset-left)) !important;
        padding-right: max(16px, env(safe-area-inset-right)) !important;
    }

    .services-grid,
    .features-grid,
    .coverage-grid,
    .testimonials-grid,
    .process-grid,
    .footer-grid,
    .local-grid,
    .benefits-grid,
    .cities-grid,
    .commune-link-grid,
    .local-insight-grid,
    .experts-grid,
    .gallery-grid,
    .hair-fit-grid,
    .conversion-cards,
    .cards,
    .links-grid,
    .service-grid,
    .trust-grid,
    .beneficios-grid,
    .catalogo-grid-real,
    .legal-grid,
    .products-grid,
    .power-features-grid,
    .form-row {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .stats-grid,
    .stats-container,
    .hero-stats,
    .about-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .hero-buttons,
    .cta-buttons,
    .button-group,
    .actions {
        flex-wrap: wrap;
    }

    .hero-buttons > *,
    .cta-buttons > *,
    .button-group > * {
        min-width: 0;
    }
}

@media (max-width: 480px) {
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    .container,
    .header-container,
    .nav-container,
    .section-container,
    .content-container,
    .footer-container {
        padding-left: max(14px, env(safe-area-inset-left)) !important;
        padding-right: max(14px, env(safe-area-inset-right)) !important;
    }

    .stats-grid,
    .stats-container,
    .hero-stats,
    .about-stats {
        gap: 10px !important;
    }
}

@media (max-height: 540px) and (orientation: landscape) {
    .nav-mobile,
    .mobile-menu {
        padding-top: 72px !important;
    }

    .contact-button,
    .whatsapp-float,
    .floating-btn,
    .back-to-top {
        transform: scale(.86);
        transform-origin: bottom right;
    }
}

@media (hover: none) and (pointer: coarse) {
    a:hover,
    button:hover,
    .btn:hover,
    .card:hover {
        transform: none;
    }
}

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

/* Site-specific adjustments: retiraahora */
@media (max-width: 1024px) {
    .header .menu-toggle {
        display: flex !important;
    }

    .header .nav-menu {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 20px !important;
    }

    .header .nav-menu.active {
        display: flex !important;
    }

    .header .btn-cta {
        display: none !important;
    }
}