@media (max-width: 900px) {

    .nav-menu {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    .hero h1 {
        font-size: clamp(
            44px,
            12vw,
            72px
        );
    }

    .footer-content {
        flex-direction: column;
        align-items: flex-start;
    }

}


@media (max-width: 600px) {

    .navbar,
    .hero-content,
    .footer-content {
        width: calc(100% - 32px);
    }

    .hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .btn {
        width: 100%;
    }

}

@media (max-width: 1000px) {

    .hero-content {
        grid-template-columns: 1fr;

        gap: 70px;

        padding:
            80px 0;
    }

    .hero-copy {
        max-width: 850px;
    }

    .hero-visual {
        justify-self: center;

        width: min(
            100%,
            500px
        );
    }

}


@media (max-width: 600px) {

    .hero {
        min-height: auto;

        padding-top: 90px;
    }

    .hero-content {
        padding:
            70px 0;
    }

    .hero h1 {
        font-size:
            clamp(
                44px,
                13vw,
                64px
            );
    }

    .hero p {
        font-size: 16px;
    }

    .hero-visual {
        width: 90%;
    }

    .visual-core {
        width: 145px;
        height: 145px;
    }

    .visual-core-label {
        font-size: 19px;
    }

    .home-intro {
        padding:
            100px 0;
    }

}

@media (max-width: 700px) {

    .services-section {
        padding:
            100px 0;
    }

    .section-heading {
        margin-bottom:
            60px;
    }

    .service-item {
        grid-template-columns: 1fr;

        gap: 18px;

        padding:
            40px 0;
    }

    .service-item:hover {
        padding-left: 0;
    }

    .service-content p {
        font-size:
            16px;
    }

}

@media (max-width: 900px) {

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

}


@media (max-width: 650px) {

    .why-section,
    .process-section,
    .cta-section {
        padding:
            100px 0;
    }

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

    .why-item {
        min-height:
            auto;
    }

    .process-step {
        grid-template-columns:
            1fr;

        gap:
            16px;

        padding:
            38px 0;
    }

    .cta-content h2 {
        font-size:
            clamp(
                44px,
                13vw,
                64px
            );
    }

}

@media (max-width: 900px) {

    .about-grid {
        grid-template-columns:
            1fr;

        gap:
            60px;
    }

}


@media (max-width: 650px) {

    .page-hero {
        min-height:
            auto;

        padding:
            160px 0
            80px;
    }

    .page-hero h1 {
        font-size:
            clamp(
                48px,
                13vw,
                70px
            );
    }

    .page-hero p {
        font-size:
            17px;
    }

    .about-intro,
    .about-values,
    .about-closing {
        padding:
            100px 0;
    }

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

    .value-card {
        min-height:
            auto;
    }

}

@media (max-width: 900px) {

    .service-detail-item {
        grid-template-columns:
            1fr;

        gap:
            40px;
    }

    .service-approach-grid {
        grid-template-columns:
            1fr;

        gap:
            60px;
    }

}


@media (max-width: 650px) {

    .service-detail-item {
        padding:
            80px 0;
    }

    .service-features {
        grid-template-columns:
            1fr;
    }

    .service-approach {
        padding:
            100px 0;
    }

}

@media (max-width: 900px) {

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

    .solutions-focus-grid {
        grid-template-columns:
            1fr;

        gap:
            70px;
    }

}


@media (max-width: 650px) {

    .solutions-section,
    .solutions-focus {
        padding:
            100px 0;
    }

    .solution-card {
        min-height:
            auto;

        padding:
            34px;
    }

    .solution-number {
        margin-bottom:
            50px;
    }

}

@media (max-width: 900px) {

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

    .projects-philosophy-grid {
        grid-template-columns:
            1fr;

        gap:
            60px;
    }

}


@media (max-width: 650px) {

    .projects-section,
    .projects-philosophy {
        padding:
            100px 0;
    }

    .project-visual {
        min-height:
            240px;
    }

}

@media (max-width: 1000px) {

    .contact-grid {
        grid-template-columns:
            1fr;

        gap:
            80px;
    }

}


@media (max-width: 650px) {

    .contact-section,
    .contact-closing {
        padding:
            100px 0;
    }

    .contact-form {
        grid-template-columns:
            1fr;
    }

    .form-group-full {
        grid-column:
            auto;
    }

    .form-actions {
        flex-direction:
            column;

        align-items:
            stretch;
    }

    .form-note {
        max-width:
            none;
    }

}

@media (max-width: 1000px) {

    .footer-main {
        grid-template-columns:
            repeat(2, 1fr);

        gap:
            60px;
    }

    .footer-brand {
        max-width:
            none;
    }

}


@media (max-width: 650px) {

    .site-footer {
        padding:
            70px 0
            25px;
    }

    .footer-main {
        grid-template-columns:
            1fr;

        gap:
            50px;

        padding-bottom:
            60px;
    }

    .footer-logo {
        height:
            58px;
    }

    .footer-bottom {
        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            18px;
    }

    .footer-legal {
        flex-wrap:
            wrap;
    }

}

/* =========================================================
   Página activa - Menú responsive
========================================================= */

@media (max-width: 900px) {

    .home-intro-grid {
        grid-template-columns:
            1fr;

        gap:
            70px;
    }

    .tech-visual {
        justify-self:
            center;

        width:
            min(100%, 460px);
    }

}

/* =========================================================
   Footer menú móvil
========================================================= */

.mobile-menu-footer {
    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap:
        30px;

    padding-top:
        22px;

    border-top:
        1px solid rgba(255, 255, 255, 0.08);

    opacity:
        0;

    transform:
        translateY(12px);

    transition:
        opacity 0.5s ease 0.38s,
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.38s;
}


.mobile-menu.is-open .mobile-menu-footer {
    opacity:
        1;

    transform:
        translateY(0);
}


.mobile-menu-signature {
    display: flex;
    flex-direction: column;

    gap:
        3px;
}


.mobile-menu-brand {
    font-size:
        11px;

    font-weight:
        600;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;

    color:
        var(--color-primary);
}


.mobile-menu-tagline {
    font-size:
        11px;

    color:
        var(--color-text-muted);
}


.mobile-menu-email {
    position: relative;

    font-size:
        11px;

    color:
        var(--color-text-muted);

    transition:
        color 0.3s ease;
}


.mobile-menu-email:hover {
    color:
        var(--color-text);
}


body.menu-open {
    overflow:
        hidden;
}


@media (max-width: 600px) {

    .tech-visual {
        width:
            88%;
    }

}

@media (max-width: 900px) {

    .cta-home-grid {
        grid-template-columns: 1fr;

        gap: 70px;
    }

    .cta-tech-visual {
        justify-self: center;

        width:
            min(100%, 460px);
    }

}


@media (max-width: 600px) {

    .cta-tech-visual {
        width: 88%;
    }

}

@media (max-width: 900px) {

    .about-closing-grid {
        grid-template-columns: 1fr;

        gap: 70px;
    }

    .thinking-tech {
        justify-self: center;

        width: min(100%, 500px);
    }

}

@media (max-width: 900px) {

    .services-cta-grid {
        grid-template-columns:
            1fr;

        gap:
            70px;
    }

    .project-transform {
        justify-self:
            center;

        width:
            min(100%, 500px);
    }

}

@media (max-width: 900px) {

    .solutions-final-grid {
        grid-template-columns:
            1fr;

        gap: 70px;
    }

    .solution-diagnostic {
        justify-self:
            center;

        width:
            min(100%, 500px);
    }

}


@media (max-width: 600px) {

    .solution-diagnostic {
        height: 270px;

        transform:
            scale(0.88);

        transform-origin:
            center top;
    }

}

/* =========================================================
   Corrección global responsive móvil
========================================================= */

@media (max-width: 600px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }


    .hero {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }


    .hero-content {
        width: calc(100% - 32px);
        max-width: 100%;

        margin-left: auto;
        margin-right: auto;

        grid-template-columns: minmax(0, 1fr);

        gap: 50px;

        padding:
            60px 0 70px;
    }


    .hero-copy {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }


    .hero h1 {
        width: 100%;
        max-width: 100%;

        font-size:
            clamp(
                40px,
                12vw,
                56px
            );

        overflow-wrap: normal;
        word-break: normal;
    }


    .hero p {
        width: 100%;
        max-width: 100%;

        font-size: 16px;
    }


    .hero-eyebrow {
        max-width: 100%;

        font-size: 10px;

        letter-spacing: 0.16em;
    }


    .hero-actions {
        width: 100%;
        max-width: 100%;

        flex-direction: column;

        align-items: stretch;
    }


    .hero-actions .btn {
        width: 100%;
        max-width: 100%;
    }


    .hero-visual {
        width: min(88vw, 340px);
        max-width: 100%;

        justify-self: center;
    }

}

@media (max-width: 600px) {

    .reveal-left,
    .reveal-right {
        transform:
            translateX(0);
    }

    .reveal-left.is-visible,
    .reveal-right.is-visible {
        transform:
            translateX(0);
    }

}

/* =========================================================
   Nosotros - Nuestra misión / Responsive
========================================================= */

@media (max-width: 900px) {

    .mission-grid {
        grid-template-columns:
            minmax(0, 1fr);

        gap:
            80px;
    }

    .mission-content {
        width:
            100%;

        max-width:
            100%;

        min-width:
            0;
    }

    .mission-visual {
        width:
            min(100%, 540px);

        max-width:
            100%;

        justify-self:
            center;
    }

}

@media (max-width: 600px) {

    .about-mission {
        padding:
            100px 0;
    }

    .mission-grid {
        gap:
            60px;
    }

    .mission-content h2 {
        width:
            100%;

        max-width:
            100%;

        font-size:
            clamp(
                38px,
                11vw,
                52px
            );

        line-height:
            1.05;
    }

    .mission-content p {
        width:
            100%;

        max-width:
            100%;

        font-size:
            16px;

        line-height:
            1.8;
    }

    .mission-statement {
        width:
            100%;

        max-width:
            100%;

        margin-top:
            36px;

        padding:
            20px 20px
            20px 24px;
    }

    .mission-visual {
        width:
            100%;

        max-width:
            420px;

        height:
            380px;

        margin:
            0 auto;
    }

}

/* =========================================================
   Nosotros - Trabajemos juntos / Responsive
========================================================= */

@media (max-width: 900px) {

    .about-contact-grid {
        grid-template-columns:
            minmax(0, 1fr);

        gap:
            70px;
    }

    .about-contact-grid .cta-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .contact-channel {
        width:
            min(100%, 520px);

        max-width:
            100%;

        justify-self:
            center;
    }

}

@media (max-width: 600px) {

    .about-contact-grid {
        gap:
            50px;
    }

    .about-contact-grid .cta-content h2 {
        width:
            100%;

        max-width:
            100%;

        font-size:
            clamp(
                40px,
                12vw,
                56px
            );

        line-height:
            1.05;
    }

    .about-contact-grid .cta-content p {
        width:
            100%;

        max-width:
            100%;

        font-size:
            16px;

        line-height:
            1.75;
    }

    .contact-channel {
        width:
            100%;

        max-width:
            340px;

        height:
            250px;

        margin:
            0 auto;
    }

}

/* =========================================================
   Proyectos - Próximo proyecto / Responsive
========================================================= */

@media (max-width: 900px) {

    .projects-next-grid {
        grid-template-columns:
            minmax(0, 1fr);

        gap:
            70px;
    }

    .projects-next-grid .cta-content {
        width:
            100%;

        max-width:
            100%;

        min-width:
            0;
    }

    .next-project-visual {
        width:
            min(100%, 500px);

        max-width:
            100%;

        justify-self:
            center;
    }

}

@media (max-width: 600px) {

    .projects-next-grid {
        gap:
            50px;
    }

    .projects-next-grid .cta-content h2 {
        width:
            100%;

        max-width:
            100%;

        font-size:
            clamp(
                40px,
                12vw,
                56px
            );

        line-height:
            1.05;
    }

    .projects-next-grid .cta-content p {
        width:
            100%;

        max-width:
            100%;

        font-size:
            16px;

        line-height:
            1.75;
    }

    .next-project-visual {
        width:
            100%;

        max-width:
            340px;

        height:
            280px;

        margin:
            0 auto;
    }

}

/* =========================================================
   Nosotros - Pilares misión / Responsive móvil
========================================================= */

@media (max-width: 600px) {

    .mission-visual {
        width: 100%;
        max-width: 340px;

        height: 360px;

        margin:
            0 auto;
    }


    /* Pilares más angostos */

    .mission-pillar {
        width: 29%;
    }


    .mission-pillar-problem {
        left: 0;
    }


    .mission-pillar-solution {
        left: 50%;

        transform:
            translateX(-50%);
    }


    .mission-pillar-evolution {
        right: 0;
    }


    /* Cuerpo del pilar */

    .pillar-body {
        height: 220px;
    }


    /* Etiquetas */

    .pillar-label {
        margin-top:
            24px;

        padding:
            0 4px;
    }


    .pillar-label strong {
        font-size:
            11px;

        letter-spacing:
            0.06em;

        white-space:
            nowrap;
    }


    .pillar-label span {
        margin-top:
            7px;

        font-size:
            11px;
    }


    /* Conexiones adaptadas al nuevo ancho */

    .mission-connection {
        bottom:
            190px;
    }


    .mission-connection-1 {
        left:
            29%;

        width:
            21%;
    }


    .mission-connection-2 {
        right:
            29%;

        width:
            21%;
    }

}

/* =========================================================
   Menú móvil - Pantallas pequeñas
========================================================= */

@media (max-width: 600px) {

    .mobile-menu-inner {
        width:
            calc(100% - 48px);

        padding:
            92px 0 22px;
    }


    .mobile-nav a {
        grid-template-columns:
            34px
            minmax(0, 1fr)
            24px;

        min-height:
            53px;
    }


    .mobile-nav-label {
        font-size:
            clamp(
                26px,
                8vw,
                32px
            );
    }


    .mobile-menu-footer {
        gap:
            18px;
    }

    .mobile-menu-logo {
        width:
            60%;

        margin:
            16px auto 24px;
    }

}


@media (max-height: 680px) {

    .mobile-menu-inner {
        padding-top:
            88px;
    }


    .mobile-nav a {
        min-height:
            49px;
    }


    .mobile-nav-label {
        font-size:
            25px;
    }


    .mobile-menu-tagline {
        display:
            none;
    }

}

/* =========================================================
   Nosotros - Fundador / Responsive
========================================================= */

@media (max-width: 900px) {

    .founder-grid {
        grid-template-columns:
            minmax(0, 1fr);

        gap:
            80px;
    }


    .founder-visual {
        width:
            min(100%, 440px);

        justify-self:
            center;
    }


    .founder-content {
        width:
            100%;

        max-width:
            680px;
    }

}


@media (max-width: 600px) {

    .founder-section {
        padding:
            100px 0;
    }


    .founder-grid {
        gap:
            65px;
    }


    .founder-visual {
        width:
            88%;

        max-width:
            360px;
    }


    .founder-photo-frame {
        padding:
            12px;
    }


    .founder-photo-frame::before {
        inset:
            22px -14px -14px 22px;
    }


    .founder-photo-line-1,
    .founder-photo-line-2,
    .founder-photo-node {
        display:
            none;
    }


    .founder-content h2 {
        font-size:
            clamp(
                38px,
                11vw,
                52px
            );
    }


    .founder-content > p {
        font-size:
            16px;

        line-height:
            1.75;
    }


    .founder-signature {
        margin-top:
            38px;
    }


    .founder-name {
        font-size:
            38px;
    }

}

/* =========================================================
   Modal legal / Responsive
========================================================= */

@media (max-width: 600px) {

    .legal-modal {
        padding:
            14px;
    }


    .legal-modal-panel {
        width:
            100%;

        max-height:
            90vh;

        max-height:
            90dvh;

        padding:
            62px 26px 40px;
    }


    .legal-modal-close {
        top:
            20px;

        right:
            20px;
    }


    .legal-modal-content h2 {
        font-size:
            clamp(
                34px,
                10vw,
                46px
            );
    }


    .legal-modal-body {
        margin-top:
            36px;

        font-size:
            15px;

        line-height:
            1.75;
    }


    .legal-modal-body section {
        padding:
            25px 0;
    }

}