/* ==========================================================
   IECG — NOSOTROS.CSS

   ÍNDICE
   01. VARIABLES
   02. RESET
   03. HEADER
   04. LOGO
   05. NAVEGACIÓN
   06. QUIÉNES SOMOS
   07. MISIÓN Y VISIÓN
   08. IMAGEN DE INGENIERÍA
   09. PILARES
   10. FOOTER
   11. TABLET
   12. MÓVIL
   ========================================================== */


/* ==========================================================
   01. VARIABLES
   ========================================================== */

:root {

    --paper: #f6f5f1;
    --white: #ffffff;

    --ink: #111315;
    --soft: #62645f;

    --blue: #2384bd;
    --deep: #0e2737;

    --line: rgba(17, 19, 21, 0.16);

    --max: 1480px;

    --gutter: clamp(24px, 5vw, 84px);
}


/* ==========================================================
   02. RESET
   ========================================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;

    overflow-x: hidden;
}

body {

    background: var(--paper);

    color: var(--ink);

    font-family: Inter, sans-serif;

    -webkit-font-smoothing: antialiased;

    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

button {

    font: inherit;

    color: inherit;

    background: none;

    border: 0;
}


/* ==========================================================
   03. HEADER
   ========================================================== */

header {
    position: relative;
    z-index: 50;
    width: 100%;
    padding: 22px var(--gutter);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}

header .wrap {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;
}


/* ==========================================================
   04. LOGO
   ========================================================== */

.brand img {
    height: 42px;
    width: auto;
}


/* ==========================================================
   05. NAVEGACIÓN
   ========================================================== */

.primary-nav {
    display: flex;
    align-items: center;
    gap: 34px;
}

.primary-nav ul {
    display: flex;
    align-items: center;
    gap: 34px;

    list-style: none;
}

.primary-nav a {
    position: relative;

    padding: 5px 0;

    font-size: 13px;
    font-weight: 500;
}


/* Línea inferior */

.primary-nav a::after {
    content: "";

    position: absolute;

    left: 0;
    right: 100%;
    bottom: 0;

    height: 1px;

    background: var(--ink);

    transition: right 0.25s ease;
}

.primary-nav a:hover::after,
.primary-nav a.active::after {
    right: 0;
}


/* Texto derecho */

.tagline {
    font-family: "IBM Plex Mono", monospace;

    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: var(--soft);
}


/* Menú móvil */

.menu-toggle {
    display: none;

    width: 34px;
}

.menu-toggle span {
    display: block;

    height: 1px;
    margin: 6px 0;

    background: var(--ink);
}


/* ---------- Panel de menú móvil ---------- */

.mobile-panel {

    position: fixed;
    inset: 0;

    z-index: 200;

    padding: 30px var(--gutter);

    background: var(--paper);

    transform: translateX(100%);

    transition: transform 0.35s ease;
}

.mobile-panel.open {

    transform: none;
}

.mobile-close {

    position: absolute;

    top: 28px;
    right: var(--gutter);

    font-size: 13px;
}

.mobile-panel ul {

    margin-top: 100px;

    list-style: none;
}

.mobile-panel li {

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

.mobile-panel li:last-child {

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

.mobile-panel a {

    display: block;

    padding: 15px 0;

    font-family: Archivo, sans-serif;

    font-size: clamp(2rem, 9vw, 4rem);
}


/* ==========================================================
   06. QUIÉNES SOMOS
   ========================================================== */

.about {

    display: grid;

    grid-template-columns:
        minmax(420px, 0.9fr)
        minmax(500px, 1.1fr);

    min-height: 760px;

    background: var(--paper);
}


/* ---------- Imagen principal ---------- */

.about-image {

    min-height: 760px;

    /*
       TEMPORAL:
       Ingenieros / planos / instalaciones.

       Después ponemos una foto REAL del cliente.
    */

    background:

        linear-gradient(
            rgba(10, 16, 19, 0.12),
            rgba(10, 16, 19, 0.28)
        ),

        url(
            "https://images.unsplash.com/photo-1503387762-592deb58ef4e?q=85&w=1800&auto=format&fit=crop"
        );

    background-size: cover;

    background-position: center;

    filter: grayscale(100%);
}


/* ---------- Contenido ---------- */

.about-content {

    padding:

        clamp(80px, 9vw, 150px)

        var(--gutter)

        clamp(80px, 9vw, 150px)

        clamp(55px, 7vw, 120px);

    display: flex;

    flex-direction: column;

    justify-content: center;
}


/* Etiquetas pequeñas */

.section-label {

    display: block;

    margin-bottom: 30px;

    font-family: "IBM Plex Mono", monospace;

    font-size: 10px;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    color: #24536e;
}


/* Título */

.about h1 {

    font-family: Archivo, sans-serif;

    font-size: clamp(3.5rem, 6vw, 7rem);

    font-weight: 500;

    line-height: 0.9;

    letter-spacing: -0.055em;

    margin-bottom: 55px;
}


/* Texto institucional */

.about-text {

    max-width: 690px;
}

.about-text p {

    color: var(--soft);

    font-size: 0.98rem;

    line-height: 1.75;

    margin-bottom: 22px;
}


/* ==========================================================
   07. MISIÓN Y VISIÓN
   ========================================================== */

.purpose {

    padding:

        clamp(100px, 12vw, 180px)

        var(--gutter);

    background: #fff;
}

.purpose-wrap {

    max-width: var(--max);

    margin: auto;

    display: grid;

    grid-template-columns:
        1.1fr
        0.8fr
        0.8fr;

    gap: clamp(50px, 7vw, 120px);
}


/* ---------- Título ---------- */

.purpose-title h2 {

    max-width: 10ch;

    font-family: Archivo, sans-serif;

    font-size: clamp(2.8rem, 4.5vw, 5rem);

    font-weight: 500;

    line-height: 0.98;

    letter-spacing: -0.045em;
}


/* ---------- Misión / Visión ---------- */

.purpose-item {

    padding-top: 10px;
}

.purpose-number {

    display: block;

    margin-bottom: 35px;

    font-family: "IBM Plex Mono", monospace;

    font-size: 10px;

    color: var(--blue);
}

.purpose-item h3 {

    padding-bottom: 18px;

    margin-bottom: 22px;

    border-bottom: 1px solid var(--line);

    font-family: Archivo, sans-serif;

    font-size: 1.45rem;

    font-weight: 500;
}

.purpose-item p {

    color: var(--soft);

    font-size: 0.95rem;

    line-height: 1.8;
}


/* ==========================================================
   08. IMAGEN DE INGENIERÍA
   ========================================================== */

.engineering-image {

    position: relative;

    min-height: 72svh;

    display: flex;

    align-items: flex-end;

    /*
       AQUÍ QUEREMOS:
       HVAC / TUBERÍAS / INSTALACIONES / MEP
    */

    background:

        url(
            "https://images.unsplash.com/photo-1581092160607-ee22621dd758?q=85&w=2400&auto=format&fit=crop"
        )

        center / cover

        no-repeat;

    filter: grayscale(100%);
}


/* Oscurecimiento */

.engineering-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            180deg,
            rgba(7, 12, 15, 0.08),
            rgba(7, 12, 15, 0.72)
        );
}


/* Texto encima */

.engineering-message {

    position: relative;

    z-index: 2;

    padding:

        0

        var(--gutter)

        clamp(55px, 7vw, 100px);

    color: #fff;
}

.engineering-message span {

    font-family: "IBM Plex Mono", monospace;

    font-size: 10px;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.68);
}

.engineering-message p {

    margin-top: 18px;

    font-family: Archivo, sans-serif;

    font-size: clamp(2.5rem, 5vw, 5.5rem);

    font-weight: 500;

    line-height: 0.98;

    letter-spacing: -0.045em;
}


/* ==========================================================
   09. PILARES
   ========================================================== */

.pillars {

    padding:

        clamp(100px, 12vw, 180px)

        var(--gutter)

        0;

    background: var(--paper);
}

.pillars-wrap {

    max-width: var(--max);

    margin: auto;

    display: grid;

    grid-template-columns:
        1.1fr
        1fr
        1fr
        1fr;

    gap: clamp(30px, 4vw, 70px);
}


/* ---------- Encabezado ---------- */

.pillars-header h2 {

    max-width: 9ch;

    font-family: Archivo, sans-serif;

    font-size: clamp(2.7rem, 4vw, 4.7rem);

    font-weight: 500;

    line-height: 0.98;

    letter-spacing: -0.045em;
}


/* ---------- Pilar ---------- */

.pillar {

    padding-top: 10px;
}

.pillar-number {

    display: block;

    margin-bottom: 35px;

    font-family: "IBM Plex Mono", monospace;

    font-size: 10px;

    color: var(--blue);
}

.pillar h3 {

    min-height: 74px;

    padding-bottom: 20px;

    margin-bottom: 22px;

    border-bottom: 1px solid var(--line);

    font-family: Archivo, sans-serif;

    font-size: 1.35rem;

    font-weight: 500;

    line-height: 1.2;
}

.pillar p {

    color: var(--soft);

    font-size: 0.93rem;

    line-height: 1.75;
}


/* ==========================================================
   13. FOOTER
   ========================================================== */

.footer {
    background: #0d1215;
    color: rgba(255, 255, 255, 0.75);
}

.footer-inner {
    min-height: 92px;

    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter);

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 28px;

    font-size: 13px;
    white-space: nowrap;
}

.footer a {
    color: inherit;
    text-decoration: none;

    transition: color 0.2s ease;
}

.footer a:hover {
    color: #ffffff;
}


/* LOGO */

.footer-logo {
    display: flex;
    align-items: center;
}

.footer-logo img {
    width: auto;
    height: 27px;
}


/* COPYRIGHT */

.footer-copy {
    color: rgba(255, 255, 255, 0.45);
}




/* ==========================================================
   11. TABLET
   ========================================================== */

@media (max-width: 1050px) {

    /* Header */

    .tagline {

        display: none;
    }


    /* Nosotros */

    .about {

        grid-template-columns:
            0.8fr
            1.2fr;
    }


    /* Misión / Visión */

    .purpose-wrap {

        grid-template-columns:
            1fr
            1fr;
    }

    .purpose-title {

        grid-column: 1 / -1;
    }


    /* Pilares */

    .pillars-wrap {

        grid-template-columns:
            1fr
            1fr;
    }

    .pillars-header {

        grid-column: 1 / -1;
    }


}


/* ==========================================================
   12. MÓVIL
   ========================================================== */

@media (max-width: 760px) {

    /* Header */

    header {

        padding:
            18px
            var(--gutter);
    }

    .primary-nav {

        display: none;
    }

    .menu-toggle {

        display: block;
    }


    /* Logo */

    .brand img {

        height: 34px;
    }


    /* Nosotros */

    .about {

        display: flex;

        flex-direction: column;

        min-height: auto;
    }

    .about-image {

        min-height: 55svh;
    }

    .about-content {

        padding:

            70px

            var(--gutter);
    }

    .about h1 {

        font-size: clamp(
            3.4rem,
            16vw,
            5.2rem
        );

        margin-bottom: 40px;
    }


    /* Misión y Visión */

    .purpose {

        padding:

            80px

            var(--gutter);
    }

    .purpose-wrap {

        grid-template-columns: 1fr;

        gap: 60px;
    }

    .purpose-title {

        grid-column: auto;
    }


    /* Imagen ingeniería */

    .engineering-image {

        min-height: 65svh;
    }


    /* Pilares */

    .pillars {

        padding:

            80px

            var(--gutter)

            0;
    }

    .pillars-wrap {

        grid-template-columns: 1fr;

        gap: 60px;
    }

    .pillars-header {

        grid-column: auto;
    }

    .pillar h3 {

        min-height: auto;
    }


    /* Footer */

    .footer-inner {

        min-height: auto;

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

        padding: 32px var(--gutter);

        white-space: normal;
    }

}
/* ==========================================================
   20. NUESTROS CLIENTES — SECCIÓN ARQUITECTÓNICA
   ========================================================== */

.clients {
    position: relative;
    overflow: hidden;

    padding: 120px 0;

    color: #fff;

    background:
        linear-gradient(
            90deg,
            rgba(10, 14, 18, .88) 0%,
            rgba(10, 14, 18, .72) 45%,
            rgba(10, 14, 18, .42) 100%
        ),
        url("assets/shared/clientes-bg.jpg");

    background-size: cover;
    background-position: center;
}


/* detalle técnico sutil */

.clients::after {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size: 45px 45px;

    pointer-events: none;
}


/* CONTENEDOR */

.clients-wrap {
    position: relative;
    z-index: 2;

    width: min(100% - 80px, 1180px);

    margin: 0 auto;

    display: grid;

    grid-template-columns: .85fr 1.5fr;

    gap: 90px;

    align-items: center;
}


/* TEXTO */

.clients-title {
    max-width: 390px;
}

.clients-label {
    display: block;

    margin-bottom: 25px;

    font-family: 'IBM Plex Mono', monospace;

    font-size: 9px;

    letter-spacing: .22em;

    text-transform: uppercase;

    color: rgba(255,255,255,.55);
}

.clients-title h2 {
    margin: 0 0 30px;

    font-family: 'Archivo', sans-serif;

    font-size: clamp(3rem, 4.5vw, 4.6rem);

    font-weight: 500;

    line-height: .88;

    letter-spacing: -.06em;

    color: #fff;
}

.clients-title p {
    max-width: 350px;

    margin: 0 0 18px;

    font-family: 'Inter', sans-serif;

    font-size: 11px;

    line-height: 1.7;

    color: rgba(255,255,255,.72);
}


/* ==========================================================
   CLIENTES
   ========================================================== */

.client-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

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

    border-left: 1px solid rgba(255,255,255,.22);

    background: rgba(255,255,255,.055);

    backdrop-filter: blur(8px);
}

.client-cell {
    min-height: 135px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 25px 15px;

    border-right: 1px solid rgba(255,255,255,.22);

    border-bottom: 1px solid rgba(255,255,255,.22);

    transition:
        background .3s ease,
        opacity .3s ease;
}

.client-cell:hover {
    background: rgba(255,255,255,.13);
}

.client-wordmark {
    font-family: 'Archivo', sans-serif;

    font-size: 14px;

    font-weight: 600;

    letter-spacing: -.02em;

    text-align: center;

    color: rgba(255,255,255,.82);
}

.client-wordmark small {
    display: block;

    margin-top: 5px;

    font-family: 'IBM Plex Mono', monospace;

    font-size: 7px;

    font-weight: 400;

    letter-spacing: .1em;

    text-transform: uppercase;

    color: rgba(255,255,255,.42);
}


/* ==========================================================
   MÓVIL
   ========================================================== */

@media (max-width: 780px) {

    .clients {
        padding: 80px 0;
    }

    .clients-wrap {
        width: calc(100% - 40px);

        grid-template-columns: 1fr;

        gap: 45px;
    }

    .clients-title {
        max-width: 100%;
    }

    .clients-title h2 {
        font-size: clamp(2.8rem, 13vw, 4rem);
    }

    .clients-title p {
        max-width: 100%;
    }

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

    .client-cell {
        min-height: 110px;
    }

}