/*
 * File: style2.css (Development Sandbox)
 * Description: Main stylesheet for the application.
 * This file uses CSS Layers for better organization and Open-Props for design tokens.
 */

/* ==========================================================================
   1. Design System & Global Variables
   ========================================================================== */

/* Import Open-Props for a robust design system.
 * Using 'layer(design.system)' ensures these foundational styles are loaded first. */
@import "https://unpkg.com/open-props" layer(design.system);

/* Custom Variables (Overrides or additions to Open-Props) */
:root {
    /* Colors */
    --banner-blue: #02b3cc;
    --banner-green: #008080;
    --white: #ffffff;
    --black: #000000;

    /* Font Families */
    --font-primary: "Poppins", sans-serif; /* For general text, if Poppins is desired */
    --font-display: "Great Vibes", cursive; /* For the main banner/display text */
    --font-secondary: "Allura", cursive; /* For header_title and other decorative elements */
    --font-body: "Roboto", sans-serif; /* For body text, if different from primary, or use --font-primary */

    /* Surface/Backgrounds */
    --surface-document: var(--gray-1); /* Lighter background for the entire document */
    --surface-1: var(--white); /* White surface for elements, often used for cards/sections */
    --surface-accent: var(--banner-green); /* For backgrounds that stand out */

    /* Shadows (Using Open-Props naming for consistency) */
    --custom-shadow-color: 0 0% 0%; /* Black shadow base for custom definition */
    --custom-shadow-strength: 0.15; /* 15% opacity */

    /* Animation Easing (Using Open-Props naming for consistency) */
    --ease-in-out: var(--ease-3);
    --ease-spring: var(--ease-spring-3);

    /* NEW: Define a consistent content max-width for most sections, making it wider */
    --content-max-width: var(--size-content-5); /* Increased for a much more open layout */
    --section-horizontal-padding: var(--size-5); /* Increased for more breathing room */
}

/* ==========================================================================
   2. Base & Utility Styles (base layer)
   ========================================================================== */
/* This layer contains global resets, typography, and foundational styles. */
@layer base {
    /* Universal Box Sizing */
    *,
    *::before,
    *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* HTML Base Styles */
    html {
        block-size: 100%; /* Equivalent to 100vh for height in block axis */
        background: var(--surface-document);
        color: var(--gray-10); /* Using Open-Props gray scale for default text color */
        scroll-behavior: smooth; /* Smooth scrolling for anchor links */
    }

    /* Body Base Styles */
    body {
        min-block-size: 100vh; /* Ensure body takes full viewport height */
        font-family: var(--font-body); /* Using the defined body font */
        line-height: var(--font-lineheight-2); /* Good default from Open-Props */
        color: var(--gray-9); /* Default text color */
        overflow-x: hidden; /* Prevent horizontal scroll bar */
        font-size: var(--font-size-1); /* Base font size */
    }

    /* Section Separators */
    section {
        border-block-end: 1px solid var(--gray-2);
        padding-block: var(--size-7); /* Consistent vertical padding */
        /* Crucial for opening up the layout: Centralize and limit section width */
        max-width: var(--content-max-width); /* Apply global content max-width */
        margin-inline: auto; /* Center sections horizontally */
        padding-inline: var(--section-horizontal-padding); /* Apply consistent horizontal padding */
    }

    /* Headings */
    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-primary);
        color: var(--gray-10);
        margin-block-end: var(--size-3);
    }

    h1 {
        text-transform: uppercase;
        font-size: var(--font-size-5);
        letter-spacing: var(--font-letterspacing-5);
        word-break: break-word;
        overflow-wrap: anywhere;
        @supports (text-wrap: balance) {
            text-wrap: balance;
        }
    }

    /* Link Base Styles */
    a {
        color: var(--banner-blue);
        text-decoration: none;
        transition: color 0.2s ease-in-out;
    }

    a:hover {
        color: var(--banner-green);
        text-decoration: underline;
    }

    /* Image Base Styles */
    img {
        max-width: 100%;
        height: auto;
        display: block;
    }

    /* Accessibility helper for screen readers */
    .sr-only {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }
}

/* ==========================================================================
   3. Layout & Main Components (components layer)
   ========================================================================== */
/* This layer contains styles for main layout sections and components. */
@layer components {
    /* Header Section - Background spans full width */
    .header_title {
        background: linear-gradient(135deg, var(--banner-green) 0%, var(--banner-blue) 100%);
        font-family: var(--font-display);
        color: var(--white);
        min-height: clamp(150px, 20vh, 220px); /* Further reduced height */
        display: grid;
        place-items: center; /* Centers content horizontally and vertically */
        text-align: center; /* Ensures text is centered within its container */
        padding: var(--size-5); /* General padding for the header */
        overflow: hidden; /* Prevent content overflow issues with very large fonts */
    }

    /* Content inside the header - constrained and centered */
    #banner { /* Targeting the div inside header */
        max-width: var(--content-max-width); /* Apply global content max-width to the banner content */
        margin-inline: auto; /* Center the banner content */
        padding-inline: var(--section-horizontal-padding); /* Add horizontal padding to the content */
        width: 100%; /* Ensure it respects padding */
    }

    .header_title h1 {
        font-size: clamp(2.5rem, 8vw + 1rem, 6rem); /* Fluid font size for main title */
        letter-spacing: var(--font-letterspacing-wide);
        line-height: 0.9;
        margin: 0;
        text-transform: none;
        text-shadow: var(--shadow-1);
    }

    /* Sticky Navigation Container - Background spans full width */
    .stuck-top {
        position: sticky;
        top: 0;
        z-index: var(--layer-sticky); /* Ensure it stays above other content */
        background-color: var(--surface-document); /* Default background */
        padding-block: var(--size-2); /* Add some vertical padding */
        transition: background-color 0.3s var(--ease-in-out), box-shadow 0.3s var(--ease-in-out); /* Add box-shadow transition */
        width: 100%; /* Ensure it spans full width */
        box-shadow: none; /* Initially no shadow */
    }

    /* Global Nav Styles - MOBILE FIRST (content-constrained and centered) */
    nav {
        display: flex;
        flex-direction: row; /* Keep as row for alignment of button and links wrapper */
        justify-content: center; /* Center navigation items by default */
        align-items: center;
        background-color: var(--white);
        gap: var(--size-3);
        font-size: var(--font-size-3); /* Slightly larger font size for readability */
        padding: var(--size-3) var(--size-4); /* Increased padding for more height and horizontal space */
        box-shadow: var(--shadow-1);
        border-radius: var(--radius-3);
        max-width: var(--size-content-3); /* Limit nav width for smaller screens */
        margin-inline: auto;
        transition: all 0.3s var(--ease-in-out);
        position: relative; /* Needed for absolute positioning of hamburger menu if used */
    }

    /* Style the nav links wrapper */
    .nav-links {
        display: flex; /* For desktop, they are horizontal */
        flex-direction: row; /* Default for desktop */
        flex-wrap: nowrap;
        gap: var(--size-3);
        align-items: center;
        width: 100%; /* Take full width available in nav */
        justify-content: center; /* Center links on desktop */
    }

    /* Individual Nav Links */
    nav > .nav-links > a { /* Target links inside the new .nav-links wrapper */
        flex-shrink: 0;
        flex-grow: 1; /* Allow links to grow to fill space */
        text-align: center;
        min-width: 80px; /* Minimum width to prevent crushing */
        color: var(--gray-9);
        text-decoration: none;
        padding: var(--size-1) var(--size-2);
        border-bottom: 2px solid transparent; /* Prepare for active state */
        transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;

        &:hover {
            color: var(--banner-green);
            border-color: var(--banner-blue);
        }
    }

    /* JavaScript-toggled class for sticky state on BODY */
    body.nav-sticky .stuck-top { /* Apply shadow directly to stuck-top, not nav */
        background: var(--surface-1);
        box-shadow: var(--shadow-6); /* Stronger shadow when sticky */
        padding-block: var(--size-3); /* Slightly more padding when sticky */
    }

    body.nav-sticky .stuck-top nav { /* Adjust nav when sticky, remove direct shadow */
        border-radius: var(--radius-3);
        margin-inline: var(--size-3); /* Inset margin for smaller screens when sticky */
        padding: var(--size-2) var(--size-4); /* Slightly reduced when sticky for compactness, but still more than before */
        font-size: var(--font-size-2); /* Keep font a bit larger here too */
        transform: translateY(var(--size-3)); /* Lift it slightly from the top */
        box-shadow: none; /* Remove shadow from nav when sticky, apply to wrapper */
    }

    /* Section Layout (General styling for content sections) */
    /* Mobile-first: Most sections will default to column layout and centered text */
    .description,
    .about_us { /* Removed .contactos and .map_section from here */
        display: flex;
        flex-direction: column; /* Stack contents vertically */
        align-items: center; /* Center items horizontally within the section */
        text-align: center; /* Center text by default */
        margin-block: var(--size-5); /* Vertical margin between sections */
    }

    /* Special case for services section, handled with grid on larger screens */
    .servicios {
        display: flex; /* Initially flex for mobile stacking */
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-block: var(--size-5);
        gap: var(--size-5); /* Space between blocks on mobile */
    }

    /* Override text alignment for specific sections if needed */
    .about_us { /* Removed .contactos from here */
        text-align: left; /* Align text to the left within these sections */
        align-items: flex-start; /* Align content to the start */
    }

    /* Kine Description (specific text block within the description section) */
    .Kine_description {
        font-size: var(--font-size-fluid-2);
        max-width: var(--size-content-3); /* Limit width for readability */
        margin-inline: auto; /* Center the description block */
        margin-block-start: var(--size-5); /* Space from section heading */
        margin-block-end: var(--size-5);
        line-height: var(--font-lineheight-3);
        text-align: center; /* Ensure the text within this block is centered */
    }

    .Kine_description h2 {
        font-size: var(--font-size-5);
        margin-bottom: var(--size-3);
        color: var(--banner-green);
    }

    /* Services Section Layout (Specific adjustments) */
    .servicios h2 {
        color: var(--banner-blue);
        width: 100%; /* Ensure h2 spans full width in a flex/grid container */
        text-align: center;
        margin-bottom: var(--size-5); /* Space below the title */
    }

    /* Sidebar within Services */
    .sidebar {
        background-color: var(--gray-1);
        padding: var(--size-5);
        border-radius: var(--radius-2);
        box-shadow: var(--shadow-2);
        width: 100%; /* Full width on mobile */
        max-width: 350px; /* Limit max width even on mobile if content is narrow */
    }

    .kine_list_use {
        list-style: disc;
        margin-left: var(--size-5);
        margin-top: var(--size-3);
        line-height: var(--font-lineheight-3);
    }

    /* Generic Content Blocks within Services */
    .blocks {
        display: flex;
        flex-direction: column;
        width: 100%; /* Full width on mobile */
        padding: var(--size-4);
        background-color: var(--surface-1);
        border-radius: var(--radius-2);
        box-shadow: var(--shadow-1);
        gap: var(--size-3);
        z-index: -1;

        p {
            margin-bottom: var(--size-2);
            line-height: var(--font-lineheight-3);
        }
        ul {
            list-style: disc;
            margin-left: var(--size-5);
            margin-bottom: var(--size-3);
            line-height: var(--font-lineheight-3);
        }
    }

    /* General Image Styles for Sections */
    .section-image {
        max-width: 90%; /* Reduced from 100% for slight padding effect */
        height: auto;
        display: block;
        margin-block: var(--size-5);
        border-radius: var(--radius-2);
        box-shadow: var(--shadow-2);
        object-fit: cover;
        object-position: center;
    }

    /* Specific adjustments for images within certain blocks */
    .Kine_description .section-image {
        max-width: var(--size-content-2); /* Further reduced for the Kine description image */
        margin-inline: auto; /* Center the image */
    }

    .servicios .blocks .section-image,
    .servicios .blocks .service-detail-image {
        margin-block-start: var(--size-4);
        margin-block-end: var(--size-4);
        max-width: 95%; /* Slightly reduced here too */
    }

    .about_us .section-image {
        max-width: var(--size-content-3); /* Reduced for about us image */
        margin-inline: auto;
    }

    /* NEW CONTAINER FOR CONTACT AND MAP SECTIONS */
    .contact-map-container {
        max-width: var(--content-max-width); /* Align with other sections */
        margin-inline: auto; /* Center the container */
        padding-inline: var(--section-horizontal-padding); /* Apply section padding */
        padding-block: var(--size-7); /* Consistent vertical padding for the container */
        border-block-end: 1px solid var(--gray-2); /* Keep the separator line for the combined block */
        display: flex; /* Default to flex column for mobile */
        flex-direction: column;
        gap: var(--size-7); /* Space between sections on mobile */
    }

    /* Adjustments for the contained sections */
    .contact-map-container > section {
        padding-block: 0; /* Remove individual section padding-block when inside container */
        padding-inline: 0; /* Remove individual section padding-inline */
        border-block-end: none; /* Remove individual section border */
        margin-inline: 0; /* Remove individual section margins */
        max-width: none; /* Allow sections to take up container width */
        width: 35%; /* Ensure they fill their grid column */
    }

    /* Specific styles for the Contact section */
    .contactos {
        align-items: flex-start; /* Ensure left alignment */
        text-align: left; /* Ensure text is left aligned */
    }

    /* Specific styles for the Map section */
    .map_section {
        align-items: center; /* Center content within map section */
        text-align: center; /* Center text within map section */
    }

    /* Styling for the Map Overlay (remains largely the same) */
    .map-link-container {
        position: relative;
        max-width: 100%; /* Allow map container to take full width of its column */
        margin-inline: auto; /* Center within column if it's smaller */
        border-radius: var(--radius-2);
        box-shadow: var(--shadow-2);
        overflow: hidden; /* Ensures border-radius applies */
        display: block; /* To apply max-width and margin-inline: auto */
        cursor: pointer;
    }

    .map-link-container a {
        display: block;
        position: relative;
        line-height: 0; /* Remove extra space below image */
        text-decoration: none; /* Remove default link underline */
    }

    .static-map-image {
        width: 100%;
        height: auto; /* Default for mobile, height set in media queries */
        display: block;
        filter: grayscale(80%) brightness(90%); /* Make it less distracting, more subtle */
        transition: filter 0.3s var(--ease-in-out), transform 0.3s var(--ease-in-out);
    }

    .map-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4); /* Dark overlay */
        color: var(--white);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        opacity: 0; /* Hidden by default */
        transition: opacity 0.3s var(--ease-in-out);
        text-align: center;
        font-size: var(--font-size-3);
        font-weight: var(--font-weight-5);
    }

    .map-link-container a:hover .map-overlay {
        opacity: 1; /* Show overlay on hover */
    }

    .map-link-container a:hover .static-map-image {
        filter: grayscale(0%) brightness(100%); /* Colorize and brighten on hover */
        transform: scale(1.02); /* Slight zoom effect */
    }

    .map-text {
        margin-bottom: var(--size-1);
    }

    .map-icon {
        font-size: var(--font-size-5); /* Size for the icon */
    }
    /* END NEW HYBRID MAP SECTION */

    /* Back to Top Button */
    .back_to_top {
        position: fixed; /* Fixed to viewport */
        bottom: var(--size-5);
        right: var(--size-5);
        padding: var(--size-2) var(--size-3);
        background: var(--gray-9);
        color: var(--white);
        border-radius: var(--radius-round);
        cursor: pointer;
        font-weight: var(--font-weight-6);
        transition: all 0.3s var(--ease-in-out); /* Smooth transition for all properties */
        z-index: var(--layer-top);
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        min-width: 44px; /* Ensure sufficient touch target size */
        min-height: 44px;
        opacity: 0; /* Initially hidden */
        visibility: hidden; /* Ensure it's not clickable when hidden */
        transform: translateY(20px); /* Start slightly off-screen */
    }

    .back_to_top.show { /* Class toggled by JavaScript */
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .back_to_top:hover {
        background: var(--banner-green);
        transform: translateY(-5px);
        box-shadow: var(--shadow-3);
    }

    /* Social Media Links in Footer */
    .social-media-links {
        display: flex;
        justify-content: center;
        gap: var(--size-4);
        margin-block: var(--size-5);
    }

    .social-media-links a {
        color: var(--gray-8);
        font-size: var(--font-size-5);
        transition: color 0.3s var(--ease-in-out), transform 0.3s var(--ease-in-out);

        &:hover {
            color: var(--banner-blue);
            transform: scale(1.1);
        }
    }

    /* Footer Styling */
    footer {
        background-color: var(--gray-1);
        color: var(--gray-7);
        text-align: center;
        padding-block: var(--size-5);
        border-top: 1px solid var(--gray-2);
        font-size: var(--font-size-0);
        max-width: var(--content-max-width); /* Align with main sections */
        margin-inline: auto;
        padding-inline: var(--section-horizontal-padding); /* Match section padding */

        .copyright {
            margin-top: var(--size-3);
            font-size: var(--font-size-0);
        }
    }

    /* Hamburger Button Styles (initially hidden on desktop, only appears in media queries) */
    /*
    .hamburger {
        display: none; /* Hidden by default for desktop *\/
        background: transparent;
        border: none;
        cursor: pointer;
        padding: var(--size-2);
        z-index: var(--layer-popover); /* Ensure it's above other elements *\/
        color: var(--gray-9); /* Or an accent color *\/
        font-size: var(--font-size-5); /* Adjust icon size if using FontAwesome *\/
        min-width: 44px; /* Accessibility touch target *\/
        min-height: 44px;
        position: absolute; /* Position it in the corner of the nav *\/
        right: var(--size-3);
        top: 50%;
        transform: translateY(-50%);
    }

    .hamburger-icon {
        display: block;
        width: 28px;
        height: 3px;
        background-color: var(--gray-9); /* Color of the bars *\/
        position: relative;
        transition: background-color 0.3s ease-in-out;
    }

    .hamburger-icon::before,
    .hamburger-icon::after {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-color: var(--gray-9);
        position: absolute;
        transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
    }

    .hamburger-icon::before {
        top: -8px;
    }

    .hamburger-icon::after {
        top: 8px;
    }

    /* Active state (when menu is open) - transforms into an X *\/
    .hamburger[aria-expanded="true"] .hamburger-icon {
        background-color: transparent; /* Hide middle bar *\/
    }

    .hamburger[aria-expanded="true"] .hamburger-icon::before {
        transform: rotate(45deg);
        top: 0;
    }

    .hamburger[aria-expanded="true"] .hamburger-icon::after {
        transform: rotate(-45deg);
        top: 0;
    }
    */
}

/* ==========================================================================
   4. Scroll-Driven Animations (animations layer) - RESTORED
   ========================================================================= */
@layer animations {
    nav > .nav-links > a.active { /* Updated selector for active link */
        color: var(--banner-green); /* Example: Active link color */
        border-color: var(--banner-green); /* Example: Active link underline color */
        font-weight: var(--font-weight-6);
    }

    /* Define keyframes for the highlight animation */
    @keyframes highlight {
        0%, 100% {
            border-block-end-color: transparent; /* No underline */
        }
        25%, 75% {
            border-block-end-color: var(--banner-blue); /* Underline appears */
        }
    }

    /* Apply scroll-linked animation only if browser supports it */
    @supports (animation-timeline: scroll()) {
        body {
            /* Define a timeline scope for each section ID */
            timeline-scope: --section-kine, --section-servicios, --section-about, --section-contact, --section-map; /* Added map section */
        }

        /* Assign each navigation link its corresponding section's scroll timeline */
        nav > .nav-links > a[href="#kine"] { animation-timeline: --section-kine; }
        nav > .nav-links > a[href="#servicios"] { animation-timeline: --section-servicios; }
        nav > .nav-links > a[href="#about"] { animation-timeline: --section-about; }
        nav > .nav-links > a[href="#contact"] { animation-timeline: --section-contact; }
        nav > .nav-links > a[href="#map"] { animation-timeline: --section-map; } /* Added map section link */

        /* Apply the highlight animation to all nav links */
        nav > .nav-links > a {
            animation: highlight linear both; /* Use linear timing, 'both' keeps start/end states */
            animation-range: entry 25% cover 50%; /* Animation plays when 25% of section enters, completes by 50% cover */
            border-block-end: 2px solid transparent; /* Ensure a transparent border exists initially */
        }
    }
}


/* --- Responsive Design Blocks (Media Queries) --- */
@layer components {

    /* Small screens / Phones (Default styles already handle this) */
    @media (max-width: 767px) { /* Apply hamburger menu for mobile */
        /*
        nav {
            justify-content: flex-end; /* Push button to right *\/
            padding-right: var(--size-6); /* Make space for the button *\/
        }

        .hamburger {
            display: block; /* Show hamburger button on small screens *\/
        }

        .nav-links {
            display: none; /* Hide navigation links by default on small screens *\/
            flex-direction: column; /* Stack links vertically when shown *\/
            position: absolute;
            top: 100%; /* Position below the nav bar *\/
            left: 0;
            width: 100%;
            background-color: var(--white); /* Background for the dropdown menu *\/
            box-shadow: var(--shadow-2);
            padding: var(--size-4);
            border-radius: var(--radius-2);
            gap: var(--size-4);
            transform: translateY(var(--size-2)); /* Small drop-down effect *\/
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
        }

        .nav-links.active { /* Class toggled by JS when menu is open *\/
            display: flex; /* Show the links *\/
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        */

        /* Image adjustments for very small screens */
        .section-image {
            max-width: 95%; /* Make images slightly wider on smaller screens again */
        }

        .Kine_description .section-image {
            max-width: 85%; /* Keep Kine image a bit smaller on very small screens */
        }
    }


    /* Medium screens / Tablets (768px and up) */
    @media (min-width: 768px) {
        nav {
            flex-direction: row; /* Horizontal layout on tablets for nav wrapper */
            gap: var(--size-5);
            font-size: var(--font-size-3);
            flex-wrap: nowrap;
            justify-content: center; /* Center the nav content now that hamburger is hidden */
            padding: var(--size-2) var(--size-4); /* Adjust padding */
            max-width: var(--size-content-4); /* Allow nav to be wider on tablets */
        }

        /* Services section: Use CSS Grid for robust 2-column layout */
        .servicios {
            display: grid; /* Change to grid for desktop */
            grid-template-columns: 1fr 2fr; /* Sidebar (1 part), Blocks (2 parts) */
            grid-template-areas:
                "title title" /* h2 spans both columns */
                "sidebar content"; /* Sidebar on left, Blocks on right */
            gap: var(--size-7); /* Space between grid columns and rows */
            align-items: start; /* Align grid items to the start */
            text-align: left; /* Ensure text is left-aligned within the grid items */
        }

        .servicios h2 {
            grid-area: title; /* Assign h2 to the 'title' area */
            text-align: center; /* Center the title over both columns */
            margin-bottom: var(--size-5);
        }

        .sidebar {
            grid-area: sidebar; /* Assign sidebar to its area */
            max-width: none; /* Remove mobile max-width */
            width: auto; /* Let grid control width */
        }

        .blocks {
            grid-area: content; /* Assign blocks to its area */
            max-width: none; /* Remove mobile max-width */
            width: auto; /* Let grid control width */
        }

        /* Kine Description: Allow for a slightly wider max-width */
        .Kine_description {
            max-width: var(--size-content-4); /* Widen for tablets */
        }

        /* Ensure nav links are always displayed on tablet and above */
        .nav-links {
            display: flex !important; /* Override display:none from mobile styles */
            position: static; /* Reset positioning */
            width: auto;
            background: transparent;
            box-shadow: none;
            padding: 0;
            opacity: 1;
            visibility: visible;
            transform: none;
            flex-direction: row; /* Always row on desktop */
            gap: var(--size-5); /* Adjust gap for wider screens */
        }

        /* Hide hamburger button on tablet and above */
        .hamburger {
            display: none !important;
        }

        /* Contact and Map Container: Side-by-side on tablets */
        .contact-map-container {
            display: grid; /* Switch to grid on larger screens */
            grid-template-columns: 1fr 1.2fr; /* Contact takes 1 part, Map takes 1.2 parts */
            gap: var(--size-7); /* Adjust gap between the two columns */
            align-items: start; /* Align content to the top of the grid row */
        }

        /* Adjust map image height for side-by-side view */
        .static-map-image {
            height: 250px; /* Adjust height for the new smaller map */
            object-fit: cover;
        }

        /* General Image adjustments for tablet */
        .section-image {
            max-width: 80%; /* Slightly smaller on tablets */
        }

        .Kine_description .section-image {
            max-width: var(--size-content-1); /* Even smaller for Kine image on tablet */
        }

        .about_us .section-image {
            max-width: var(--size-content-2); /* Smaller for about us image on tablet */
        }

        .servicios .blocks .section-image,
        .servicios .blocks .service-detail-image {
            max-width: 90%; /* Slightly smaller within blocks */
        }
    }

    /* Large screens / Desktops (1024px and up) */
    @media (min-width: 1024px) {
        .header_title {
            min-height: 250px; /* Adjust as needed for desktop */
        }

        nav {
            padding: var(--size-4) var(--size-7);
            gap: var(--size-7);
            max-width: var(--size-content-5);
        }

        body.nav-sticky .stuck-top nav {
            margin-inline: var(--size-fluid-4); /* Adjusted margin for large screens */
            padding: var(--size-3) var(--size-6);
        }

        /* Section horizontal padding and max-width for larger displays */
        section {
            padding-inline: var(--size-fluid-4);
        }

        /* Services section adjustments for very large screens */
        .servicios {
            grid-template-columns: 1fr 3fr; /* Sidebar takes less, content more */
            gap: var(--size-8); /* More gap between sidebar and blocks */
        }

        /* Adjust map image height for very large screens if desired */
        .static-map-image {
            height: 300px; /* Slightly taller for larger desktops */
        }

        /* General Image adjustments for desktop */
        .section-image {
            max-width: 70%; /* Further reduced for large screens */
        }

        .Kine_description .section-image {
            max-width: var(--size-content-0); /* Smallest for Kine image on large screens */
        }

        .about_us .section-image {
            max-width: var(--size-content-1); /* Smaller for about us image on large screens */
        }
        .servicios .blocks .section-image,
        .servicios .blocks .service-detail-image {
            max-width: 80%; /* Smaller within blocks on large screens */
        }
    }

    /* Extra-large screens (1440px and up) */
    @media (min-width: 1440px) {
        .header_title {
            min-height: 280px; /* Adjust as needed for extra large */
        }

        nav {
            max-width: var(--size-content-5);
        }

        body.nav-sticky .stuck-top nav {
            margin-inline: var(--size-fluid-5);
        }

        /* General Image adjustments for extra large screens */
        .section-image {
            max-width: 60%; /* Even smaller for extra large screens */
        }
        .Kine_description .section-image {
            max-width: var(--size-content-negative-1); /* Very small for Kine image */
        }
        .about_us .section-image {
            max-width: var(--size-content-0); /* Smaller for about us image */
        }
        .servicios .blocks .section-image,
        .servicios .blocks .service-detail-image {
            max-width: 70%; /* Smaller within blocks */
        }
    }
}

/* --- DEBUGGING OVERFLOW --- */
/* Temporarily add borders to all elements to find what's overflowing */
/*
* {
    outline: 1px solid red !important;
}
*/