/* ==========================================================
   VARIABLES
   ========================================================== */

:root {
    /* Paleta */
    --color-bg: #1a1a1a;
    --color-bg-alt: #141414;
    --color-accent: #1e3a5f;
    --color-accent-light: #3d6690;
    --color-accent-soft: rgba(30, 58, 95, 0.55);
    --color-word-accent: #ffcb11;
    --color-text: #f2f2f2;
    --color-text-muted: #b3b3b3;
    --color-white: #ffffff;

    /* Tipografía */
    --font-heading: 'Oswald', sans-serif;
    --font-body: 'Archivo', sans-serif;

    /* Layout */
    --container-width: 1200px;

    /* Transiciones */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ==========================================================
   RESET Y BASE
   ========================================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
}

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

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

ul {
    list-style: none;
}

button {
    font: inherit;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ==========================================================
   HERO (página de inicio)
   ========================================================== */

.hero {
    position: relative;
    min-height: 100vh;
}

.hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        180deg,
        rgba(26, 26, 26, 0.35) 0%,
        rgba(26, 26, 26, 0.55) 45%,
        rgba(26, 26, 26, 0.88) 80%,
        rgba(26, 26, 26, 1) 100%
    );
}

.hero__content {
    /* Centrado propio e independiente del nav (que ahora vive por su cuenta) */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 100%;
    max-width: 760px;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
}

.hero__divider {
    display: block;
    width: 70px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-accent-light), transparent);
}

.brand-logo__image {
    width: min(90vw, 680px);
    height: auto;
}

/* ==========================================================
   NAVBAR — efecto "Instagram" (glassmorphism)
   ========================================================== */

.navbar {
    position: sticky;
    top: 1rem;
    z-index: 1000;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    border-radius: 999px;
    background-color: rgba(26, 26, 26, 0.55);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid var(--color-word-accent);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    transition: background-color var(--transition-base), border-color var(--transition-base);
}

/* Variante Inicio: va justo después del hero en el flujo, pero un margin-top
   negativo lo "levanta" para que repose superpuesto 20vh arriba del borde
   inferior del hero. Al scrollear se fija al valor de "top" de acá abajo
   y, como ya no vive dentro de .hero, se mantiene fijo el resto del recorrido. */
.navbar--center {
    max-width: 760px;
    margin-top: -15vh;
    top: 15px;
}

.navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.85rem 1.75rem;
}

/* En reposo el menú va centrado (sin logo a la vista) */
.navbar--center .navbar__inner {
    justify-content: center;
}

/* Una vez "pegado" arriba (clase que pone script.js), pasa a verse como un
   header normal: logo a la izquierda, menú a la derecha */
.navbar--center.is-stuck .navbar__inner {
    justify-content: space-between;
}

.navbar__brand {
    display: inline-flex;
    align-items: center;
}

/* El logo del nav de Inicio nace invisible y aparece con fade recién
   cuando el nav queda pegado arriba (ver .is-stuck más arriba). Mientras
   está en reposo va con position:absolute para que NO ocupe espacio en el
   flex — si no, aunque sea invisible, corre el centrado del menú. */
.navbar--center .navbar__brand {
    position: absolute;
    left: 1.75rem;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
}

.navbar--center.is-stuck .navbar__brand {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
}

.navbar__brand-image {
    height: 28px;
    width: auto;
}

.navbar__menu {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2.25rem;
}

/* En reposo (sin scroll) el menú ocupa todo el ancho del nav y reparte
   los items de manera uniforme. Al pegarse arriba vuelve a su tamaño
   natural, centrado con el gap fijo, como estaba antes. */
.navbar--center .navbar__menu {
    width: 100%;
    justify-content: space-between;
    padding: 0 30px;
}

.navbar--center.is-stuck .navbar__menu {
    width: auto;
    justify-content: center;
}

.navbar__link {
    position: relative;
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
    padding: 0.35rem 0.05rem;
    transition: color var(--transition-fast);
}

/* Underline suave al hover / activo */
.navbar__link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background-color: var(--color-word-accent);
    transition: width var(--transition-base);
}

.navbar__link:hover,
.navbar__link:focus-visible {
    color: var(--color-white);
}

.navbar__link:hover::after,
.navbar__link:focus-visible::after,
.navbar__link.is-active::after {
    width: 100%;
}

.navbar__link.is-active {
    color: var(--color-white);
}

/* Botón hamburguesa — estilo reservado, se activa con el JS del próximo paso */
.navbar__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
}

.navbar__toggle-bar {
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background-color: var(--color-white);
}

@media (max-width: 640px) {
    .navbar__inner {
        padding: 0.75rem 1.25rem;
    }

    /* En mobile el menú de links se oculta y se reemplaza por el botón
       hamburguesa; se abre como un panel debajo del nav (ver .is-open,
       clase que pone script.js al tocar el botón). */
    .navbar__toggle {
        display: flex;
    }

    .navbar__menu {
        display: none;
        gap: 1.25rem;
    }

    .navbar__menu.is-open {
        display: flex;
        position: absolute;
        top: calc(100% + 0.75rem);
        left: 0;
        right: 0;
        width: auto;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0.5rem;
        padding: 1rem 1.25rem;
        background-color: rgba(26, 26, 26, 0.92);
        backdrop-filter: blur(14px) saturate(160%);
        -webkit-backdrop-filter: blur(14px) saturate(160%);
        border: 1px solid var(--color-word-accent);
        border-radius: 20px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    }

    /* Sin scroll: el logo sigue oculto, así que el único elemento visible
       en .navbar__inner es el botón hamburguesa — lo mandamos a la
       derecha. Con scroll (is-stuck) manda la regla de más arriba: logo
       a la izquierda, botón a la derecha (justify-content: space-between). */
    .navbar--center .navbar__inner {
        justify-content: flex-end;
    }

    /* Sin scroll el nav no muestra su contorno (fondo/blur/borde/sombra):
       solo se ve el ícono flotando arriba a la derecha. Al hacer scroll
       (is-stuck) recupera el contorno completo de .navbar. */
    .navbar--center {
        background-color: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-color: transparent;
        box-shadow: none;
    }

    .navbar--center.is-stuck {
        background-color: rgba(26, 26, 26, 0.55);
        backdrop-filter: blur(14px) saturate(160%);
        -webkit-backdrop-filter: blur(14px) saturate(160%);
        border-color: var(--color-word-accent);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    }

    /* Sin scroll el nav (invisible) sigue "flotando" superpuesto al hero,
       más abajo de donde arranca la página de verdad. Clavamos el ícono
       en la esquina real de la pantalla (fixed) para que quede arriba de
       donde después aparece el logo, y el panel se abre pegado a él. */
    .navbar--center:not(.is-stuck) .navbar__toggle {
        position: fixed;
        top: 1.25rem;
        right: 1.25rem;
    }

    .navbar--center:not(.is-stuck) .navbar__menu.is-open {
        position: fixed;
        top: 4.5rem;
        left: auto;
        right: 1.25rem;
    }

    .navbar__link {
        font-size: 0.8rem;
    }

    .hero__content {
        max-width: 100%;
    }

    .brand-logo__image {
        width: min(90vw, 520px);
    }
}

/* ==========================================================
   TÍTULO DE SECCIÓN (genérico, reutilizable)
   ========================================================== */

.section-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-white);
    margin-bottom: 2.25rem;
    text-align: center;
}

/* ==========================================================
   ESLOGAN PRINCIPAL (Inicio)
   ========================================================== */

.slogan {
    padding: 5rem 0;
    text-align: center;
    background-color: var(--color-bg);
}

.slogan__text {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-text);
}

.slogan__accent {
    display: block;
    color: var(--color-word-accent);
    font-weight: 700;
}

/* ==========================================================
   QUIÉNES SOMOS — teaser (Inicio)
   ========================================================== */

.about-teaser {
    padding: 5rem 0;
}

.about-teaser__inner {
    max-width: 720px;
    text-align: center;
    margin: 0 auto;
}

.about-teaser__text {
    color: var(--color-text-muted);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.about-teaser__link {
    display: inline-block;
    color: var(--color-word-accent);
    font-weight: 600;
    font-size: 0.95rem;
    transition: color var(--transition-fast);
}

.about-teaser__link:hover {
    color: var(--color-white);
}



/* ==========================================================
   NÚMEROS / STATS (Inicio)
   ========================================================== */

.stats {
    padding: 4rem 0;
    background-color: var(--color-bg-alt);
}

.stats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

.stat-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background-color: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 2.5rem 1.75rem;
    text-align: center;
}

/* Ícono decorativo arriba del valor/label de cada tarjeta. El SVG usa
   stroke="currentColor", así que toma el amarillo de acá sin repetirlo. */
.stat-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 auto 1.25rem;
    color: var(--color-word-accent);
}

.stat-card__icon svg {
    width: 100%;
    height: 100%;
}

.stat-card__value {
    display: block;
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-word-accent);
    margin-bottom: 0.5rem;
}

.stat-card__label {
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

.stat-card--text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.stat-card__label--lg {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    line-height: 1.4;
    color: var(--color-text);
    letter-spacing: 0.02em;
}

@media (max-width: 640px) {
    .stats__grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   CÓMO TRABAJAMOS — proceso de 5 pasos (Inicio)
   ========================================================== */

.process {
    padding: 5rem 0;
}

.process__list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 720px;
    margin: 0 auto;
}

.process-step {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.process-step__number {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--color-word-accent);
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-word-accent);
}

.process-step__title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 0.35rem;
}

.process-step__text {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ==========================================================
   Compensación Inicio: el nav "roba" 20vh con margin-top
   negativo para superponerse al hero; este margen en <main>
   devuelve ese espacio para que el resto del contenido no se
   corra hacia arriba.
   ========================================================== */

.page--home .page-content {
    margin-top: 20vh;
}

/* ==========================================================
   IMAGEN DE FONDO — Quiénes somos + Nuestra misión (Nosotros)
   ========================================================== */

.nosotros-hero {
    position: relative;
    overflow: hidden;
}

.nosotros-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.nosotros-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        180deg,
        rgba(26, 26, 26, 0.55) 0%,
        rgba(26, 26, 26, 0.7) 45%,
        rgba(26, 26, 26, 0.92) 100%
    );
}

.nosotros-hero__content {
    position: relative;
    z-index: 2;
}

/* ==========================================================
   ENCABEZADO DE PÁGINA (Nosotros / Soluciones)
   ========================================================== */

.page-header {
    padding: 6rem 0 3rem;
    text-align: center;
}

.page-header__title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 0.5rem;
    color: var(--color-white);
}

.page-header__subtitle {
    color: var(--color-text-muted);
    font-size: 1rem;
}

.page--nosotros .page-header__title {
    color: var(--color-word-accent);
}

.page--soluciones .page-header {
    padding: 2.5rem 0 0;
}

.content-section {
    padding: 2rem 0 5rem;
    min-height: 30vh;
}

/* ==========================================================
   NUESTRA MISIÓN (Nosotros)
   ========================================================== */

.mission {
    padding: 4rem 0 6rem;
}

.mission__inner {
    max-width: 720px;
    text-align: center;
    margin: 0 auto;
}

.mission__text {
    color: var(--color-text-muted);
    font-size: 1.05rem;
    line-height: 1.9;
}

/* ==========================================================
   EL PROBLEMA QUE RESOLVEMOS (Nosotros)
   ========================================================== */

.problem {
    padding: 6rem 0;
    background-color: var(--color-bg-alt);
}

.problem__inner {
    max-width: 720px;
    text-align: center;
    margin: 0 auto;
}

.problem__lead {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--color-word-accent);
    margin-bottom: 2.5rem;
}

.problem__card {
    text-align: left;
    border: 1px solid var(--color-word-accent);
    border-radius: 12px;
    padding: 2rem 2.25rem;
    margin-bottom: 2.5rem;
}

.problem__card-title {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--color-white);
    margin-bottom: 1.25rem;
}

.problem__list {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.problem__list-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: var(--color-text);
    font-size: 0.98rem;
}

.problem__list-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--color-word-accent);
}

.problem__list-icon svg {
    width: 100%;
    height: 100%;
}

.problem__text {
    color: var(--color-text-muted);
    font-size: 1.05rem;
    line-height: 1.9;
    margin-bottom: 2rem;
}

.problem__emphasis {
    color: var(--color-white);
    font-weight: 600;
}

.problem__text--highlight {
    color: var(--color-white);
    font-weight: 600;
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .problem__card {
        padding: 1.75rem 1.5rem;
    }
}

/* ==========================================================
   NUESTROS PILARES (Nosotros)
   ========================================================== */

.pillars {
    padding: 6rem 0;
}

.pillars__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
}

.pillar-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background-color: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 2.5rem 1.75rem;
    text-align: center;
}

.pillar-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 auto 1.25rem;
    color: var(--color-word-accent);
}

.pillar-card__icon svg {
    width: 100%;
    height: 100%;
}

.pillar-card__title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-white);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.pillar-card__text {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

@media (max-width: 640px) {
    .pillars__grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   QUÉ HACEMOS (Nosotros)
   ========================================================== */

.industries {
    padding: 6rem 0;
    background-color: var(--color-bg-alt);
}

.industries__intro {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 1.05rem;
    margin-bottom: 2.5rem;
}

.industries__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}

.industry-card {
    border: 1px solid var(--color-word-accent);
    background-color: var(--color-word-accent);
    border-radius: 12px;
    padding: 1.75rem 1.5rem;
    text-align: center;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #000000;
}

@media (max-width: 640px) {
    .industries__grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   POR QUÉ ELEGIRNOS (Nosotros)
   ========================================================== */

.why-us {
    padding: 6rem 0;
}

.why-us__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem 2.5rem;
    max-width: 780px;
    margin: 0 auto;
}

.why-us__item {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    color: var(--color-text);
    font-size: 1rem;
}

.why-us__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--color-word-accent);
}

.why-us__icon svg {
    width: 100%;
    height: 100%;
}

/* ==========================================================
   NUESTRO ENFOQUE (Soluciones)
   ========================================================== */

.approach {
    padding: 2rem 0 5rem;
}

.approach__inner {
    max-width: 760px;
    text-align: center;
    margin: 0 auto;
}

.approach__title {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-word-accent);
    margin-bottom: 2rem;
    line-height: 1.35;
}

.approach__text {
    color: var(--color-text-muted);
    font-size: 1.05rem;
    line-height: 1.9;
    margin-bottom: 1.75rem;
}

.approach__text--highlight {
    color: var(--color-white);
    font-weight: 600;
    margin-bottom: 0;
}

/* ==========================================================
   NOS ACOMPAÑAN — logos de partners (Soluciones)
   ========================================================== */

.partners {
    padding: 2rem 0 6rem;
}

.partners__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}

.partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 60px;
    overflow: hidden;
}

.partner-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

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

.site-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 3rem 0 1.5rem;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.site-footer__title {
    display: block;
    font-family: var(--font-heading);
    font-size: 1rem;
    letter-spacing: 0.02em;
    margin-bottom: 0.75rem;
    color: var(--color-white);
}

.site-footer__text {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.site-footer__links li {
    margin-bottom: 0.5rem;
}

.site-footer__links a {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    transition: color var(--transition-fast);
}

.site-footer__links a:hover {
    color: var(--color-white);
}

.site-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 1.25rem;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.8rem;
}