/**
 * ============================================================
 * PROYECTO : manproces.com
 * ARCHIVO  : inicio.css
 * PROPÓSITO: Estilos específicos del homepage (index.html)
 *            Importa los components de página + layout propio
 * UBICACIÓN: assets/css/pages/
 * ------------------------------------------------------------
 * AUTOR DEV: DaKaInnova — contacto@dakainnova.com.mx
 * CLIENTE  : ManProces — info@manproces.com
 * FECHA    : 22/02/2026
 * VERSIÓN  : 1.0
 * ============================================================
 */

/* ── Components de página ─────────────────────────────────── */
@import url('../components/hero.css');
@import url('../components/sections.css');
@import url('../components/scroll-reveal.css');

/* ============================================================
   BLOQUE UNIFICADO: #nosotros + #proceso
   Un solo contenedor con fondo compartido — sin separación visible.
   ============================================================ */
.duo-block {
    position: relative;
    overflow: hidden;

    /* Grid diagonal + base azul uniforme */
    background:
        repeating-linear-gradient(
            -45deg,
            transparent 0px,
            transparent 58px,
            rgba(8, 215, 255, 0.018) 58px,
            rgba(8, 215, 255, 0.018) 59px
        ),
        #07093a;
}

/* Orbs que cubren todo el bloque sin pegarse a ningún borde interno */
.duo-block::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        /* Glow azul — esquina superior izquierda (intro) */
        radial-gradient(ellipse 55% 30% at 5% 15%,
            rgba(5, 105, 237, 0.30) 0%,
            transparent 60%
        ),
        /* Glow cyan — esquina superior derecha (intro) */
        radial-gradient(ellipse 45% 25% at 92% 10%,
            rgba(8, 215, 255, 0.12) 0%,
            transparent 55%
        ),
        /* Glow azul — esquina inferior derecha (proceso) */
        radial-gradient(ellipse 55% 30% at 95% 88%,
            rgba(5, 105, 237, 0.25) 0%,
            transparent 58%
        ),
        /* Glow cyan — esquina inferior izquierda (proceso) */
        radial-gradient(ellipse 45% 25% at 5% 92%,
            rgba(8, 215, 255, 0.09) 0%,
            transparent 52%
        );
}

/* Secciones internas: transparentes para no tapar el fondo del wrapper.
   !important necesario: #nosotros.section--black tiene especificidad ID+class (110)
   que supera a .duo-block .section--black (020) — sin !important no funciona. */
.duo-block .section--black {
    background: transparent !important;
}

.duo-block .section--black::before {
    background: none !important;
}

/* El contenido queda encima del ::before del duo-block */
.duo-block .section {
    position: relative;
    z-index: 1;
}

/* ============================================================
   BLOQUE UNIFICADO: #que-es-nom + #cta-agenda
   Fondo claro compartido — ambas secciones hablan de NOM.
   ============================================================ */
.duo-block--light {
    position: relative;
    overflow: hidden;
    background: #f8fafc;
}

/* Cancelar los orbs del .duo-block::before — no aplican en fondo claro */
.duo-block--light::before {
    background: none;
}

/* Secciones internas transparentes */
.duo-block--light .section--light {
    background: transparent !important;
}

.duo-block--light .section--light::before {
    background: none !important;  /* quita el borde 3px superior de section--light */
}

.duo-block--light .section {
    position: relative;
    z-index: 1;
}

/* CTA agenda sobre fondo claro — texto oscuro */
.duo-block--light .cta-agenda {
    background: transparent;
    padding: var(--space-16) var(--space-6) calc(var(--space-16) + 50px);
}

.duo-block--light .cta-agenda::after {
    background: none;  /* desactiva el spotlight diseñado para fondo oscuro */
}

.duo-block--light .cta-agenda__title {
    color: var(--color-navy);
}

.duo-block--light .cta-agenda__subtitle {
    color: var(--color-text-secondary);
}

.duo-block--light .section-overline {
    color: var(--color-blue-mid);
}

/* Layout split del CTA: título izquierda / beneficios+botones derecha */
.cta-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
    padding: var(--space-4) 0;
}

.cta-split__heading .section-overline {
    display: block;
    margin-bottom: var(--space-3);
}

.cta-split__title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-navy);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-5);
}

/* Tratamiento tipográfico: 3 niveles de énfasis */
.cta-split__title .title-light {
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
}

.cta-split__title .title-bold {
    font-weight: var(--font-weight-extrabold);
    color: var(--color-navy);
}

.cta-split__title .title-accent {
    font-weight: var(--font-weight-extrabold);
    color: var(--color-blue-mid);
}

.cta-split__subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

/* Separador vertical entre columnas */
.cta-split__divider {
    display: none;
}

/* Lista de beneficios */
.cta-split__benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-8) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.cta-benefit {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-navy);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid rgba(11, 18, 149, 0.08);
}

.cta-benefit:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.cta-benefit__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: rgba(5, 105, 237, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-blue-mid);
    font-size: 0.9rem;
}

.cta-split__actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .cta-split {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }
    .cta-split__title { font-size: var(--font-size-3xl); }
}

@media (max-width: 600px) {
    .cta-split__actions { flex-direction: column; }
    .cta-split__actions .btn { width: 100%; }
}

/* ============================================================
   SECCIÓN: INTRO (layout propio, sin fondo)
   ============================================================ */
.intro-section {
    text-align: center;
    padding: var(--space-24) var(--space-6);
    position: relative;
    overflow: hidden;
    /* Fondo heredado de section--black — misma base que #proceso
       para que ambas secciones sean visualmente un solo bloque continuo.
       Los glow orbs de intro.css añaden carácter sin romper la unión. */
}

.intro-section__highlight {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-white);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-6);
}

.intro-section__highlight span {
    color: var(--color-cyan);
}

.intro-section__text {
    max-width: 680px;
    margin: 0 auto var(--space-10);
    font-size: var(--font-size-base);
    color: rgba(255,255,255,0.65);
    line-height: var(--line-height-relaxed);
}

/* ============================================================
   SECCIÓN: PROCESO 3 PASOS
   ============================================================ */
.process-section {
    position: relative;
    overflow: hidden;
}

/* Halo suave detrás del encabezado del proceso */
.process-section .section-header {
    position: relative;
}

.process-section .section-header::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 480px;
    height: 180px;
    background: radial-gradient(
        ellipse 80% 80% at 50% 50%,
        rgba(8, 215, 255, 0.11) 0%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
}

/* Glow sutil en el texto del título */
.process-section .section-title {
    position: relative;
    z-index: 1;
    text-shadow:
        0 0 40px rgba(8, 215, 255, 0.30),
        0 2px 10px rgba(0, 0, 0, 0.40);
}

/* Layout horizontal: 3 cards en fila con conectores entre ellos */
.process-steps {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin-top: var(--space-10);
}

.process-steps .card--step {
    flex: 1;
}

/* Flecha conectora entre pasos */
.step-connector {
    flex: 0 0 40px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 30px;   /* alinea con el círculo numerado */
    color: rgba(8, 215, 255, 0.45);
    font-size: 1.3rem;
    pointer-events: none;
    user-select: none;
}

/* Responsive: vertical en tablets y móviles */
@media (max-width: 900px) {
    .process-steps {
        flex-direction: column;
        align-items: center;
        gap: var(--space-6);
    }
    .process-steps .card--step {
        width: 100%;
        max-width: 480px;
    }
    .step-connector {
        display: none;
    }
}

/* ============================================================
   GLOW ORBS ÚNICOS POR SECCIÓN — "Character Lighting"
   Cada sección oscura tiene personalidad propia gracias a la
   posición de sus radial-gradients, pero comparten la misma
   paleta y el mismo grid diagonal → se ven como UNA SOLA página.
   ============================================================ */

/* ── #que-es-nom — Glow lateral derecho, acento cyan izquierdo */
#que-es-nom.section--dark::before {
    background:
        radial-gradient(ellipse 65% 70% at 92% 50%,
            rgba(5, 105, 237, 0.32) 0%,
            transparent 65%
        ),
        radial-gradient(ellipse 45% 50% at 5% 30%,
            rgba(8, 215, 255, 0.10) 0%,
            transparent 60%
        );
}

/* ── #industrias — Haz cenital desde arriba-centro, acento bottom-right */
#industrias.section--black::before {
    background:
        radial-gradient(ellipse 80% 55% at 50% 0%,
            rgba(5, 105, 237, 0.28) 0%,
            transparent 60%
        ),
        radial-gradient(ellipse 55% 45% at 95% 95%,
            rgba(8, 215, 255, 0.12) 0%,
            transparent 55%
        ),
        radial-gradient(ellipse 40% 35% at 0% 100%,
            rgba(11, 18, 149, 0.30) 0%,
            transparent 60%
        );
}

/* ── #por-que-elegirnos ahora es section--light, sin orb dark — */

/* ── #nosotros (intro-section) — Mantiene su propio fondo premium ── */
/* El background de intro-section en CSS ya sobreescribe section--dark */
/* El ::before queda vacío → transparente → sin interferencia          */

/* #nosotros y #proceso viven dentro de .duo-block —
   sus backgrounds los maneja el contenedor compartido.
   Estas reglas quedaron vacías a propósito. */

/* ── #servicios (section--black) — Glow lateral izquierdo dominante */
#servicios.section--black::before {
    background:
        radial-gradient(ellipse 55% 65% at 0% 40%,
            rgba(5, 105, 237, 0.25) 0%,
            transparent 60%
        ),
        radial-gradient(ellipse 45% 40% at 100% 15%,
            rgba(8, 215, 255, 0.09) 0%,
            transparent 55%
        );
}

/* ── #mision-vision (section--dark) — Glow cálido simétrico */
#mision-vision.section--dark::before {
    background:
        radial-gradient(ellipse 60% 70% at 25% 50%,
            rgba(5, 105, 237, 0.20) 0%,
            transparent 55%
        ),
        radial-gradient(ellipse 60% 70% at 75% 50%,
            rgba(8, 215, 255, 0.08) 0%,
            transparent 55%
        );
}

/* ============================================================
   SECCIÓN: SERVICIOS
   ============================================================ */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

@media (max-width: 1024px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
}

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

/* ============================================================
   SECCIÓN: INDUSTRIAS
   ============================================================ */
.industries-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

@media (max-width: 900px) {
    .industries-grid { grid-template-columns: repeat(2, 1fr); }
}

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

/* ============================================================
   SECCIÓN: CTA AGENDA
   ============================================================ */
.cta-agenda {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: var(--space-20) var(--space-6);
    /* Hereda fondo de section--dark (grid diagonal + navy)
       Solo añadimos glow spotligh central de acento */
}

.cta-agenda::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 80% at 50% 50%,
            rgba(8, 215, 255, 0.10) 0%,
            transparent 60%
        ),
        radial-gradient(ellipse 45% 50% at 15% 80%,
            rgba(5, 105, 237, 0.22) 0%,
            transparent 55%
        );
    pointer-events: none;
    z-index: 0;
}

.cta-agenda > .container {
    position: relative;
    z-index: 1;
}

.cta-agenda__title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-white);
    margin-bottom: var(--space-4);
    line-height: var(--line-height-tight);
}

.cta-agenda__subtitle {
    font-size: var(--font-size-base);
    color: rgba(255,255,255,0.65);
    margin-bottom: var(--space-8);
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    line-height: var(--line-height-relaxed);
}

.cta-agenda__actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================================
   SECCIÓN: INTRO-STATS (opcional — métricas de confianza)
   ============================================================ */
.stats-row {
    display: flex;
    justify-content: center;
    gap: var(--space-12);
    flex-wrap: wrap;
    padding: var(--space-10) var(--space-6);
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.stat-item {
    text-align: center;
}

.stat-item__number {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-cyan);
    line-height: 1;
    margin-bottom: var(--space-1);
}

.stat-item__label {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.5);
}

/* ============================================================
   RESPONSIVE GLOBAL DE PÁGINA
   ============================================================ */
@media (max-width: 768px) {
    .intro-section__highlight { font-size: var(--font-size-4xl); }
    .cta-agenda__title         { font-size: var(--font-size-3xl); }
    .cta-agenda__actions       { flex-direction: column; align-items: center; }
    .cta-agenda__actions .btn  { width: 100%; max-width: 320px; }
    .stats-row                 { gap: var(--space-8); }
}