/* --- Responsive Styles --- */

/* --- Tablet (Landscape) & Small Desktops --- */
@media (max-width: 1200px) {
    .container {
        max-width: 960px;
    }
}

@media (max-width: 992px) {
    /* General Section Padding */
    section {
        padding: 60px 0;
    }

    /* Header & Nav */
    .main-header__container {
        padding: 0 30px;
    }

    .main-nav ul li a {
        padding: 0 15px;
    }

    /* Hero Section */
    .hero-solid {
        padding: 280px 0 180px;
    }

    .hero-solid h1 {
        font-size: 3rem;
    }

    /* Alternating Content Sections (Services, Projects) */
    .service-item-alternating,
    .service-item-alternating.reverse,
    .project-item,
    .project-item.reverse {
        flex-direction: column;
        gap: 30px;
    }

    .service-text,
    .project-text {
        padding: 20px;
        text-align: center;
    }

    /* Features Section */
    .features-grid {
        grid-template-columns: 1fr;
        gap: 100px; /* Increase gap for stacked items */
    }

    .feature-box {
        padding: 100px 40px 50px 40px;
    }

    /* Values Section */
    .values-container {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .footer__container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 30px;
    }

    .footer__logo {
        margin: 0 auto 15px;
    }
}

/* --- Mobile (Portrait) --- */
@media (max-width: 768px) {
    /* General Body & Typography */
    body {
        /* padding-top: 120px; --- This is now handled by hero sections */
    }

    section {
        padding: 40px 20px;
    }

    h1, .hero-solid h1, .hero-nosotros h1, .hero-servicios h1, .hero-contacto h1, .hero-galeria h1 {
        font-size: 2.2rem;
        line-height: 1.3;
    }

    h2 {
        font-size: 1.8rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    /* Header & Mobile Navigation */

    .main-header__container {
        padding: 0 20px;
    }

    /* Full-screen Mobile Navigation Overlay */
    .main-nav {
        position: fixed; /* Use fixed for full-screen overlay */
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh; /* Full viewport height */
        background: rgba(10, 49, 72, 0.98); /* Semi-transparent blue from project palette */
        z-index: 1001; /* Sits above content, below hamburger button */
        
        display: flex;
        justify-content: center;
        align-items: center;

        opacity: 0;
        visibility: hidden;
        transform: scale(1.1);
        transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease;
    }

    .main-nav.nav-active {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }

    /* New, more specific styles for refactored mobile menu */
    .main-nav.nav-active .mobile-ul {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto; /* Override desktop height */
    }

    .main-nav.nav-active .mobile-li {
        width: 100%;
        transition: background-color 0.3s ease;
        display: block; /* Override desktop flex */
        height: auto; /* Override desktop height */
        margin: 10px 0;
    }

    .main-nav.nav-active .mobile-li a {
        display: block; /* Override desktop flex */
        padding: 20px;
        color: #fff; /* Override desktop color */
        font-size: 1.5rem;
        font-weight: bold;
        text-transform: uppercase;
        text-align: center;
        text-decoration: none;
        height: auto; /* Override desktop height */
    }

    .main-nav.nav-active .mobile-li:hover {
        background-color: #ef7f16; /* Orange hover from project palette */
    }

    .main-nav.nav-active .mobile-li a:hover {
        background-color: transparent; /* Prevent double hover effect */
    }

    .hamburger-btn {
        display: block;
        background: none;
        border: none;
        cursor: pointer;
        padding: 10px;
        z-index: 1002; /* Ensure hamburger is above the nav overlay */
        position: relative; /* Needed for z-index to work reliably */
    }

    .hamburger-line {
        display: block;
        width: 30px;
        height: 3px;
        background-color: #0a3148; /* Initial color */
        margin: 6px 0;
        transition: 0.4s;
    }

    /* Change hamburger color to white when menu IS active */
    .hamburger-btn.is-active .hamburger-line {
        background-color: #fff;
    }
    
    /* Hamburger animation */
    .hamburger-btn.is-active .hamburger-line:nth-child(1) {
        transform: rotate(-45deg) translate(-7px, 7px);
    }
    .hamburger-btn.is-active .hamburger-line:nth-child(2) {
        opacity: 0;
    }
    .hamburger-btn.is-active .hamburger-line:nth-child(3) {
        transform: rotate(45deg) translate(-7px, -7px);
    }


    /* --- Universal Vertical Stacking for Mobile --- */

    /* Hero Section */
    .hero-solid {
        padding: 350px 20px 280px;
    }

    .hero-buttons {
        margin-top: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .hero-buttons .btn {
        margin: 0;
        width: 100%;
        max-width: 300px;
    }

    /* Intro Section */
    .intro-text p {
        padding: 0 10px;
    }

    /* Features Section */
    .features-boxed {
        padding-top: 50px;
    }
    .features-boxed h2 {
        margin-bottom: 80px;
    }

    /* CTA Banner */
    .cta-banner .container {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .cta-buttons {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
        max-width: 300px;
    }

    .cta-buttons a {
        margin-left: 0;
    }

    /* Detailed Text Section */
    .text-columns {
        grid-template-columns: 1fr;
    }

    /* Values Section */
    .value-box {
        padding: 60px 30px;
    }

    /* Map Section */
    .map-embed {
        height: 350px;
    }

    /* Galeria Page - Libro Section Image fix */
    .image-fade-container {
        height: auto;
        aspect-ratio: 1 / 1;
    }

    /* --- Page Specific Overrides for Mobile --- */

    /* Botones de la sección libro */
    .libro-buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin-top: 30px;
        width: 100%;
    }
    .libro-buttons .btn {
        width: 100%;
        max-width: 300px; /* Match other stacked buttons */
    }

    /* Contacto Page */
    .contacto-wrapper {
        grid-template-columns: 1fr;
    }

    /* Nosotros Page */
    .quienes-somos-content {
        grid-template-columns: 1fr;
    }

    .experiencia-item {
        flex-direction: column;
        gap: 30px; /* Add gap for stacked view */
    }

    .experiencia-item .experiencia-content,
    .experiencia-item .experiencia-image {
        width: 100%;
    }

    .mision-vision .container {
        flex-direction: column;
    }

    .mision-vision-box {
        width: 100%;
    }

    /* Footer Readability */
    .footer__description,
    .footer__link,
    .footer__contact-info {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    /* Further refine for small screens */
    h1, .hero-solid h1, .hero-nosotros h1, .hero-servicios h1, .hero-contacto h1, .hero-galeria h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.6rem;
    }

    .feature-box {
        padding: 90px 20px 40px 20px;
    }

    .project-text, .service-text {
        padding: 15px;
    }

    .project-text h5, .service-text h5 {
        font-size: 1.5rem;
    }
}