/* =========================================================
   CIVANTIS
   Construction Finance & Infrastructure
   responsive.css
========================================================= */


/* =========================================================
   01. PANTALLAS GRANDES / LAPTOP
   Hasta 1200px
========================================================= */

@media (max-width: 1200px) {

    :root {
        --container-padding: 30px;
        --section-space: 110px;
    }


    /* HEADER */

    .header-container {
        grid-template-columns:
            auto 1fr auto;

        gap: 24px;
    }

    .main-nav {
        gap: 24px;
    }

    .main-nav a {
        font-size: 0.74rem;
    }


    /* HERO */

    .hero-container {
        grid-template-columns:
            minmax(0, 0.95fr)
            minmax(0, 1.05fr);
    }

    .hero-content {
        padding:
            100px 50px 100px 0;
    }

    .hero-visual {
        min-height: 650px;
    }

    .hero-project-data {
        left: 28px;
        right: 28px;
        bottom: 28px;
    }


    /* SECCIONES */

    .section-heading {
        gap: 60px;
    }


    /* PLATAFORMA */

    .platform-container {
        grid-template-columns:
            minmax(320px, 0.9fr)
            minmax(0, 1.1fr);

        min-height: 680px;
    }

    .platform-content {
        padding:
            90px 55px 90px 0;
    }

    .platform-visual {
        min-height: 680px;
    }


    /* AUDIENCIAS */

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


    /* PROYECTOS */

    .project-image {
        height: 420px;
    }


    /* VENTAJA */

    .advantage-container {
        gap: 80px;
    }


    /* CONTACTO */

    .contact-container {
        gap: 80px;
    }

}



/* =========================================================
   02. TABLET
   Hasta 980px
========================================================= */

@media (max-width: 980px) {

    :root {
        --container-padding: 26px;
        --section-space: 90px;
    }


    /* =====================================================
       HEADER
    ===================================================== */

    .site-header {
        position: relative;
    }

    .header-container {
        min-height: auto;

        grid-template-columns:
            1fr auto;

        gap: 20px;

        padding-top: 22px;
        padding-bottom: 22px;
    }

    .logo {
        grid-column: 1;
        grid-row: 1;
    }

    .header-cta {
        grid-column: 2;
        grid-row: 1;
    }

    .main-nav {
        grid-column: 1 / -1;
        grid-row: 2;

        justify-content: flex-start;

        gap: 26px;

        overflow-x: auto;

        padding-top: 6px;
        padding-bottom: 2px;

        scrollbar-width: none;
    }

    .main-nav::-webkit-scrollbar {
        display: none;
    }

    .main-nav a {
        flex: 0 0 auto;

        padding:
            8px 0;

        white-space: nowrap;
    }

    .main-nav a::after {
        bottom: 0;
    }


    /* =====================================================
       HERO
    ===================================================== */

    .hero {
        min-height: auto;
    }

    .hero::before {
        display: none;
    }

    .hero-container {
        min-height: auto;

        grid-template-columns:
            1fr;
    }

    .hero-content {
        padding:
            100px 0 80px;
    }

    .hero-content::before {
        top: 34px;
    }

    .hero h1 {
        max-width: 800px;
    }

    .hero-description {
        max-width: 650px;
    }

    .hero-visual {
        min-height: 560px;
    }


    /* =====================================================
       MÉTRICAS
    ===================================================== */

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

    .metric-item {
        min-height: 200px;

        border-bottom:
            1px solid var(--color-border);
    }

    .metric-item:nth-child(2) {
        border-right: 0;
    }

    .metric-item:nth-child(3),
    .metric-item:nth-child(4) {
        border-bottom: 0;
    }

    .metric-item:nth-child(3) {
        padding-left: 0;
    }


    /* =====================================================
       ENCABEZADOS DE SECCIÓN
    ===================================================== */

    .section-heading {
        grid-template-columns:
            1fr;

        gap: 30px;

        margin-bottom: 60px;
    }

    .section-intro {
        justify-self: start;

        max-width: 620px;
    }


    /* =====================================================
       SOLUCIONES
    ===================================================== */

    .solution-card {
        min-height: 360px;

        padding:
            36px;
    }

    .card-number {
        margin-bottom: 60px;
    }


    /* =====================================================
       PLATAFORMA
    ===================================================== */

    .platform-container {
        grid-template-columns:
            1fr;

        min-height: auto;
    }

    .platform-content {
        padding:
            90px 0;
    }

    .platform-content h2 {
        max-width: 760px;
    }

    .platform-content > p:not(.section-label) {
        max-width: 650px;
    }

    .platform-features {
        max-width: 720px;
    }

    .platform-visual {
        min-height: 560px;

        border-left: 0;

        border-top:
            1px solid var(--color-border-dark);
    }


    /* =====================================================
       AUDIENCIAS
    ===================================================== */

    .audience-card {
        min-height: 290px;
    }


    /* =====================================================
       PROYECTOS
    ===================================================== */

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

    .project-card:last-child {
        grid-column:
            1 / -1;
    }

    .project-card:last-child .project-image {
        height: 500px;
    }

    .project-image {
        height: 420px;
    }


    /* =====================================================
       VENTAJA CIVANTIS
    ===================================================== */

    .advantage-container {
        grid-template-columns:
            1fr;

        gap: 50px;
    }

    .advantage-content {
        padding-top: 0;

        max-width: 700px;
    }

    .advantage::before {
        right: -80px;
        bottom: -190px;

        font-size: 28rem;
    }


    /* =====================================================
       EMPRESA
    ===================================================== */

    .company-container {
        grid-template-columns:
            140px 1fr;

        gap: 50px;
    }


    /* =====================================================
       CONTACTO
    ===================================================== */

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

        gap: 45px;
    }

    .contact-action {
        max-width: 620px;
    }


    /* =====================================================
       FOOTER
    ===================================================== */

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

        gap: 55px;
    }

}



/* =========================================================
   03. TABLET PEQUEÑA
   Hasta 760px
========================================================= */

@media (max-width: 760px) {

    :root {
        --container-padding: 22px;
        --section-space: 78px;
    }


    /* =====================================================
       TIPOGRAFÍA
    ===================================================== */

    h1 {
        font-size:
            clamp(3.4rem, 13vw, 5.8rem);
    }

    h2 {
        font-size:
            clamp(2.6rem, 10vw, 4.3rem);
    }


    /* =====================================================
       HEADER
    ===================================================== */

    .header-container {
        grid-template-columns:
            1fr;
    }

    .logo,
    .header-cta,
    .main-nav {
        grid-column: 1;
    }

    .logo {
        grid-row: 1;
    }

    .header-cta {
        grid-row: 2;

        justify-self: start;
    }

    .main-nav {
        grid-row: 3;

        width: 100%;

        gap: 24px;
    }


    /* =====================================================
       HERO
    ===================================================== */

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

    .hero-content::before {
        top: 30px;
    }

    .hero-description {
        font-size: 0.98rem;
    }

    .hero-actions {
        width: 100%;
    }

    .hero-actions .btn {
        flex: 1 1 auto;
    }

    .hero-visual {
        min-height: 480px;
    }

    .hero-project-data {
        left: 20px;
        right: 20px;
        bottom: 20px;

        grid-template-columns:
            1fr;

        gap: 8px;

        padding:
            20px;
    }


    /* =====================================================
       MÉTRICAS
    ===================================================== */

    .metrics-header {
        padding:
            34px 0 24px;
    }

    .metric-item {
        min-height: 175px;

        padding:
            30px 24px;
    }

    .metric-number {
        font-size:
            clamp(2.5rem, 9vw, 4rem);
    }


    /* =====================================================
       SOLUCIONES
    ===================================================== */

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

    .solution-card {
        min-height: 330px;
    }

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


    /* =====================================================
       PLATAFORMA
    ===================================================== */

    .platform-content {
        padding:
            75px 0;
    }

    .platform-visual {
        min-height: 470px;
    }


    /* =====================================================
       AUDIENCIAS
    ===================================================== */

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

    .audience-card {
        min-height: 250px;
    }


    /* =====================================================
       PROYECTOS
    ===================================================== */

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

    .project-card:last-child {
        grid-column:
            auto;
    }

    .project-image,
    .project-card:last-child .project-image {
        height: 440px;
    }

    .project-info {
        min-height: 280px;
    }


    /* =====================================================
       EMPRESA
    ===================================================== */

    .company-container {
        grid-template-columns:
            1fr;

        gap: 28px;
    }

    .company-number {
        padding-top: 0;
    }


    /* =====================================================
       FOOTER
    ===================================================== */

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

        row-gap: 45px;
    }

    .footer-column:last-child {
        grid-column:
            1 / -1;
    }

}



/* =========================================================
   04. MÓVIL
   Hasta 560px
========================================================= */

@media (max-width: 560px) {

    .header-container {
        grid-template-columns:
            1fr auto;

        column-gap: 14px;
        row-gap: 16px;
    }

    .logo {
        grid-column: 1;
        grid-row: 1;
    }

    .header-cta {
        grid-column: 2;
        grid-row: 1;

        justify-self: end;
    }

    .main-nav {
        grid-column: 1 / -1;
        grid-row: 2;

        width: 100%;
    }

}



/* =========================================================
   05. MÓVILES MUY PEQUEÑOS
   Hasta 390px
========================================================= */

@media (max-width: 390px) {

    :root {
        --container-padding: 16px;
    }


    /* HEADER */

    .main-nav {
        gap: 19px;
    }


    /* HERO */

    .hero h1 {
        font-size:
            clamp(2.8rem, 14vw, 3.7rem);
    }

    .hero-visual {
        min-height: 380px;
    }


    /* SOLUCIONES */

    .solution-card {
        padding:
            25px 20px;
    }


    /* PLATAFORMA */

    .platform-visual {
        min-height: 340px;
    }


    /* PROYECTOS */

    .project-image,
    .project-card:last-child .project-image {
        height: 315px;
    }

    .project-info {
        padding:
            22px 20px;
    }


    /* FOOTER */

    .footer-logo {
        font-size: 1.2rem;
    }

}



/* =========================================================
   06. ORIENTACIÓN HORIZONTAL EN MÓVIL
========================================================= */

@media (
    max-width: 900px
)
and (
    orientation: landscape
)
and (
    max-height: 600px
) {

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

    .hero-visual {
        min-height: 420px;
    }

}

/* =========================================================
   AJUSTE HERO — LAPTOP / TABLET HORIZONTAL
   Evita que palabras largas invadan la imagen
========================================================= */

@media (min-width: 981px) and (max-width: 1200px) {

    .hero-container {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);
    }

    .hero-content {
        min-width: 0;

        padding:
            100px 32px 100px 0;
    }

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

        font-size:
            clamp(3.6rem, 5.8vw, 4.35rem);

        line-height: 0.97;
        letter-spacing: -0.05em;

        text-wrap: balance;
    }

}



/* =========================================================
   PROYECTO CONCEPTUAL / NEXORA
   RESPONSIVE
========================================================= */


/* LAPTOP */

@media (max-width: 1200px) {

    .nexora-project-inner {
        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(300px, 0.9fr);

        gap: 70px;
    }

}


/* TABLET */

@media (max-width: 980px) {

    .nexora-project-inner {
        grid-template-columns:
            1fr;

        gap: 45px;

        align-items: start;
    }

    .nexora-project-copy {
        max-width: 650px;

        justify-self: start;

        padding-bottom: 0;
    }

    .nexora-project h2 {
        max-width: 760px;
    }

}


/* TABLET PEQUEÑA */

@media (max-width: 760px) {

    .nexora-project-inner {
        gap: 38px;
    }

    .nexora-project::before {
        right: -70px;
        bottom: -150px;

        font-size: 24rem;
    }

}


/* MÓVIL */

@media (max-width: 560px) {

    .nexora-project-inner {
        gap: 32px;
    }

    .project-label {
        font-size: 0.62rem;

        letter-spacing: 0.14em;
    }

    .nexora-project h2 {
        margin-top: 18px;
    }

    .nexora-project-copy p {
        font-size: 0.9rem;

        line-height: 1.75;
    }

    .nexora-project .text-link {
        margin-top: 26px;
    }

    .nexora-project::before {
        right: -65px;
        bottom: -100px;

        font-size: 18rem;
    }

}


/* MÓVILES MUY PEQUEÑOS */

@media (max-width: 390px) {

    .nexora-project::before {
        right: -55px;
        bottom: -70px;

        font-size: 15rem;
    }

}