/* ============================================================
   Onnix — brand.css
   Capa de MARCA OFICIAL. Se carga al final para prevalecer.

   DIRECTIVA DE MARCA: los colores predominantes de Onnix son
   NEGRO y BLANCO. La identidad es monocroma, sobria y minimalista
   (estética de empresa tecnológica). El azul oficial extraído de la
   referencia se conserva sólo como acento funcional mínimo (foco de
   accesibilidad), no como color dominante.

   --- Paleta oficial detectada en la referencia (Wix), para archivo ---
   Azul de acción  : rgb(0,87,225)  #0057E1   (uso mínimo)
   Rojo Onnix logo : rgb(237,28,36) #ED1C24
   Amarillo Onnix  : rgb(255,203,5) #FFCB05
   Tipografía ref. : "Mundial" (propietaria Wix). Alternativa aprobada
                     (§9.2): Plus Jakarta Sans + Manrope.
   ============================================================ */

:root {
    /* ---- Superficies: negro predominante ---- */
    --bg: #0a0a0a;
    --surface: #141414;
    --surface-2: #1c1c1c;
    --line: #262626;
    --line-2: #3a3a3a;
    --tx: #f5f5f5;
    --tx-muted: #a6a6a6;
    --tx-faint: #6b6b6b;
    --bg-l: #ffffff;
    --surface-l: #fafafa;
    --line-l: #e6e6e6;
    --line-l2: #d2d2d2;
    --tx-l: #0a0a0a;
    --tx-lm: #565656;
    --tx-lf: #8a8a8a;

    --color-background: var(--bg);
    --color-background-soft: var(--surface);
    --color-surface: var(--surface);
    --color-surface-hover: var(--surface-2);

    /* ---- Texto: blanco y grises ---- */
    --color-text: var(--tx);
    --color-text-muted: var(--tx-muted);
    --color-text-dim: var(--tx-faint);
    --color-border: var(--line);
    --color-border-strong: var(--line-2);

    /* ---- "Marca" en blanco (acción principal B&N) ---- */
    --color-primary: var(--tx);
    --color-primary-light: var(--tx);
    --color-primary-dark: var(--tx-l);

    /* ---- Acento neutro (blanco); el azul queda de reserva ---- */
    --color-accent: var(--tx);
    --color-accent-soft: rgba(255, 255, 255, 0.08);
    --brand-blue: #0057e1;   /* azul oficial — uso funcional mínimo */
    --brand-red: #ed1c24;
    --brand-yellow: #ffcb05;

    /* ---- Degradados / brillos neutros ---- */
    --gradient-brand: #ffffff;
    --gradient-glow: radial-gradient(50% 55% at 50% 0%, rgba(255, 255, 255, 0.07) 0%, rgba(10, 10, 10, 0) 68%);
    --shadow-glow: 0 8px 28px rgba(0, 0, 0, 0.5);
}

/* ---- Foco de accesibilidad: única aparición del azul de marca ---- */
:focus-visible {
    outline-color: currentColor;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    letter-spacing: 0;
    text-wrap: balance;
    overflow-wrap: break-word;
}

.section__eyebrow,
.page-hero__eyebrow,
.card__tag,
.chip,
.brand__slogan,
.footer__col-title,
.contact-channel__label {
    font-family: var(--font-mono);
}

.section__eyebrow,
.page-hero__eyebrow {
    letter-spacing: 0.22em;
}

/* ---- Botón primario: blanco sobre negro (firma B&N) ---- */
.btn--primary {
    background: #ffffff;
    color: #0a0c10;
    box-shadow: none;
}

.btn--primary:hover {
    background: #e8ebf0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.skip-link {
    background: var(--tx);
    color: var(--tx-l);
}

.btn--secondary {
    background: transparent;
    border-color: var(--line-2);
}

.section--soft {
    background: var(--bg-l);
    color: var(--tx-l);
}

.section--soft .section__title,
.section--soft .card__title,
.section--soft .sector__title,
.section--soft .family-title,
.section--soft .u-title-sm,
.section--soft .origin__quote,
.section--soft .contact-channel__value,
.section--soft .tech-logo__mark {
    color: var(--tx-l);
}

.section--soft .section__subtitle,
.section--soft .card__text,
.section--soft .sector__text,
.section--soft .u-muted,
.section--soft .clients__note,
.section--soft .contact-channel__label {
    color: var(--tx-lm);
}

.section--soft .section__eyebrow,
.section--soft .card__tag,
.section--soft .link-arrow {
    color: var(--tx-l);
}

.section--soft .section__eyebrow::before {
    background: var(--tx-l);
}

.section--soft .card,
.section--soft .sector,
.section--soft .contact-band__inner,
.section--soft .contact-channel,
.section--soft .tech-logo {
    background: var(--surface-l);
    border-color: var(--line-l);
}

.section--soft .card:hover,
.section--soft .sector:hover,
.section--soft .contact-channel:hover,
.section--soft .tech-logo:hover {
    border-color: var(--line-l2);
}

.section--soft .card__icon,
.section--soft .contact-channel__icon {
    background: var(--line-l);
    border-color: var(--line-l);
    color: var(--tx-l);
}

.section--soft .chip {
    background: var(--surface-l);
    border-color: var(--line-l);
    color: var(--tx-l);
}

.section--soft .btn--primary {
    background: var(--tx-l);
    color: var(--bg-l);
}

.section--soft .btn--primary:hover {
    background: #2a2a2a;
}

.section--soft .btn--secondary {
    color: var(--tx-l);
    border-color: var(--line-l2);
}

/* Retícula del hero en tinte neutro */
.hero__grid-bg {
    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);
}

/* El realce del título del hero permanece en blanco, con subrayado sutil */
.hero__title .accent {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    box-shadow: inset 0 -0.08em 0 rgba(255, 255, 255, 0.22);
    padding-bottom: 0.02em;
}

/* ---- CTA final: bloque blanco con texto negro (alto contraste, B&N) ---- */
.cta-final__card {
    background: #ffffff;
}

.cta-final__card::after {
    background: radial-gradient(60% 120% at 50% 0%, rgba(0, 0, 0, 0.05), transparent 60%);
}

.cta-final__title {
    color: #0a0c10;
}

.cta-final__text {
    color: rgba(10, 12, 16, 0.72);
}

.cta-final .btn--primary {
    background: #0a0c10;
    color: #ffffff;
}

.cta-final .btn--primary:hover {
    background: #1a1d24;
}

.cta-final .btn--secondary {
    border-color: rgba(10, 12, 16, 0.28);
    color: #0a0c10;
}

.cta-final .btn--secondary:hover {
    background: rgba(10, 12, 16, 0.06);
    border-color: #0a0c10;
}