/**
 * BAIRS — Capa de estandarización de plantillas
 * ------------------------------------------------------------------
 * Unifica el "marco" de TODAS las plantillas internas (hero, eyebrow,
 * título, subtítulo, ritmo de secciones) para que el sitio se sienta uno solo.
 *
 * Antes cada plantilla maquetó su hero por separado:
 *   · cyberseguridad → retícula 40px + scan-line, contenido CENTRADO  (la outlier)
 *   · tpa / aseguradoras / servicios → contenido CENTRADO
 *   · nosotros / cobertura / home / línea comercial → contenido a la IZQUIERDA
 *   · retículas de 40/64/80/96px y máscaras a 30/50/70%
 *
 * Canon adoptado = patrón editorial a la IZQUIERDA (igual que la home):
 * una sola retícula con máscara radial, mismos eyebrow/título/subtítulo.
 *
 * Se prefija con `body.inner-page` para ganar especificidad sobre los
 * `*-modern.css` SIN depender del orden de carga. Revertir = quitar el
 * enqueue `bairs-standard` en inc/enqueue.php (no se pierde nada más).
 */

/* ─────────────────────────────────────────────────────────────
   1. Hero — caja base idéntica en todas las plantillas
   ───────────────────────────────────────────────────────────── */
body.inner-page .cyberseguridad-hero,
body.inner-page .tpa-hero,
body.inner-page .nosotros-hero,
body.inner-page .cobertura-hero,
body.inner-page .aseguradoras-hero,
body.inner-page .servicios-hero-parallax {
    justify-content: flex-start;   /* editorial: contenido anclado a la izquierda */
    align-items: center;           /* centrado vertical dentro del 100vh */
    padding: clamp(7rem, 12vw, 11rem) clamp(1.5rem, 6vw, 6rem) clamp(3rem, 6vw, 5rem);
}

/* ─────────────────────────────────────────────────────────────
   2. Hero overlay — UNA sola retícula con máscara radial idéntica
   ───────────────────────────────────────────────────────────── */
body.inner-page .cyberseguridad-hero::before,
body.inner-page .tpa-hero::before,
body.inner-page .nosotros-hero::before,
body.inner-page .cobertura-hero::before,
body.inner-page .aseguradoras-hero::before,
body.inner-page .servicios-hero-parallax::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(circle at 28% 45%, #000 0%, transparent 72%);
    mask-image: radial-gradient(circle at 28% 45%, #000 0%, transparent 72%);
    z-index: 1;
}

/* Cyberseguridad: eliminar la scan-line que la diferenciaba del resto */
body.inner-page .cyberseguridad-hero::after {
    content: none;
    background: none;
}

/* ─────────────────────────────────────────────────────────────
   3. Hero content — alineado a la izquierda, mismo ancho de medida
   ───────────────────────────────────────────────────────────── */
body.inner-page .cyberseguridad-hero-content,
body.inner-page .tpa-hero-content,
body.inner-page .nosotros-hero-content,
body.inner-page .cobertura-hero-content,
body.inner-page .aseguradoras-hero-content,
body.inner-page .servicios-hero-content {
    position: relative;
    z-index: 2;
    max-width: 780px;
    margin: 0 auto 0 0;   /* ancla a la izquierda */
    text-align: left;
}

/* ─────────────────────────────────────────────────────────────
   4. Hero title — misma escala, peso, tracking y caja
   ───────────────────────────────────────────────────────────── */
body.inner-page .cyberseguridad-hero-title,
body.inner-page .tpa-hero-title,
body.inner-page .nosotros-hero-title,
body.inner-page .cobertura-hero-title,
body.inner-page .aseguradoras-hero-title,
body.inner-page .servicios-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4rem);
    line-height: 1.05;
    font-weight: var(--fw-bold, 700);
    letter-spacing: -0.025em;
    text-transform: uppercase;
    text-wrap: balance;
    color: #ffffff;
    margin: 0 0 1rem;
}

/* ─────────────────────────────────────────────────────────────
   5. Hero eyebrow — mono, mismo tracking y separación
   ───────────────────────────────────────────────────────────── */
body.inner-page .cyberseguridad-hero-eyebrow,
body.inner-page .tpa-hero-eyebrow,
body.inner-page .nosotros-hero-eyebrow,
body.inner-page .cobertura-hero-eyebrow,
body.inner-page .aseguradoras-hero-eyebrow,
body.inner-page .servicios-hero-eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-primary-soft, #38bdf8);
    display: inline-block;
    margin-bottom: var(--space-4, 16px);
}

/* ─────────────────────────────────────────────────────────────
   6. Hero copy (subtítulo / descripción) — misma medida y color
   ───────────────────────────────────────────────────────────── */
body.inner-page .cyberseguridad-hero-subtitle,
body.inner-page .tpa-hero-subtitle,
body.inner-page .nosotros-hero-subtitle,
body.inner-page .nosotros-hero-desc,
body.inner-page .cobertura-hero-text1,
body.inner-page .cobertura-hero-text2,
body.inner-page .servicios-hero-subtitle {
    font-family: var(--font-body);
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.6;
    font-weight: var(--fw-regular, 400);
    color: rgba(255, 255, 255, 0.82);
    max-width: 60ch;
    margin: 0 0 0.75rem;
    text-align: left;
}

/* ─────────────────────────────────────────────────────────────
   7. Secciones de contenido — fondo en paleta oscura (no navy)
   Cyber y TPA usaban #003366; se alinean al sistema (#0f141b).
   (Aseguradoras conserva su mapa sobre claro: el canvas lo requiere.)
   ───────────────────────────────────────────────────────────── */
body.inner-page .cyberseguridad-content-section,
body.inner-page .tpa-content-section {
    background: var(--color-bg-1, #0f141b);
}