/* ============================================================================
   BRAND TOKENS — Boca Signworks Group USA
   Medidos del material real del cliente (marca/MARCA.md, 16-sep-2026):
   logo oficial (PDF Illustrator) y tarjeta de presentación. Dos tintas: navy y
   blanco. Los grises son TINTES del navy sobre blanco, no un gris neutro.
   Tipografía: Anton (la del logo, titulares) + Nunito Sans (sustituto libre de
   Avenir, el texto de la tarjeta). El logo se usa tal cual (SVG), nunca se redibuja.
   ========================================================================== */
:root{
  /* Color de marca */
  --navy:#192545;            /* logo entero · 80 % de la tarjeta */
  --white:#FFFFFF;
  --ink:#231F20;             /* negro de imprenta de la tarjeta: texto corrido */

  /* Tintes del navy sobre blanco (mezcla lineal, calculados) */
  --tint-03:#F7F8FA;         /* fondo de sección alterna, muy suave */
  --tint-04:#F6F6F8;         /* fondo de sección alterna (navy 4 %, pasada de calidad 18-sep) */
  --tint-05:#F3F4F7;         /* fondo de chips/estado hover */
  --tint-10:#E8EAEF;         /* bordes suaves, fondos de chip */
  --tint-15:#DCDFE6;         /* bordes de tarjeta */
  --tint-25:#C5C9D3;         /* separadores fuertes */
  --tint-75:#535C74;         /* texto secundario sobre blanco — 6,7:1 */

  /* Sobre navy */
  --on-navy:#FFFFFF;         /* 15,1:1 */
  --on-navy-muted:#CCCFD6;   /* texto secundario sobre navy — 9,7:1 */
  --navy-line:rgba(255,255,255,.16);
  --navy-rgb:25,37,69;       /* para velos: rgba(var(--navy-rgb),α) */
  --shadow:0 6px 24px rgba(25,37,69,.12);

  /* Tipografía: fuentes propias (subconjunto latin de Google Fonts, 18-sep-2026; sin terceros, con preload y swap) */
  --font-display:"Anton","Impact","Arial Narrow Bold",sans-serif;
  --font-text:"Nunito Sans",system-ui,"Segoe UI",Arial,sans-serif;

  /* Sistema de titulares (W33): UN solo criterio en todo el sitio */
  --h-transform:uppercase;
  --h-spacing:.02em;
  --h1:clamp(2.75rem,6vw,5.25rem);   /* héroe de portada: 44–84 px */
  --h1-sub:clamp(2.125rem,4.4vw,3.5rem); /* héroes interiores: 34–56 px */
  --h2:clamp(1.75rem,3.4vw,2.5rem);
  --h3:1.125rem;

  /* Medidas */
  --radius:4px;
  --tap:48px;                /* objetivo táctil mínimo (W9) */
  --wrap:1180px;
  --gutter:20px;             /* aire lateral en teléfono ≥16 px (W20) */
  --header-h:64px;

  /* ---- ROLES (18-sep-2026, encargo tema claro/oscuro): site.css solo usa estos; los tintes de arriba
     son la materia prima. Cambiar de tema = cambiar SOLO este bloque y el de [data-theme="dark"]. ---- */
  --bg:var(--white);          /* fondo de página y cabecera */
  --bg-alt:var(--tint-04);    /* sección alterna */
  --surface:var(--white);     /* tarjetas, fichas, cajón, desplegables, barra inferior */
  --surface-2:var(--tint-05); /* hover de chips/enlaces, estado del formulario */
  --field-bg:var(--white);    /* campos del formulario */
  --text:var(--ink);          /* texto corrido — 15,4:1 */
  --text-2:var(--tint-75);    /* texto secundario — 6,7:1 sobre blanco, 6,4:1 sobre tinte */
  --accent:var(--navy);       /* titulares, enlaces, iconos, bordes activos — 14,3:1 */
  --line:var(--tint-15);      /* bordes de tarjeta */
  --line-soft:var(--tint-10); /* separadores suaves, fondos de placeholder */
  --line-strong:var(--tint-25);/* bordes de campo y chip */
  --btn-bg:var(--navy);       /* botón primario (y skip, flotante, filtro activo, número de paso) */
  --btn-fg:var(--white);
  --btn-hover:#0F1730;
  --focus:var(--navy);        /* anillo de foco (W17) */
  --ia-bg:#F3F5F9;            /* fondo horneado en los objetos 3D y escenas IA */
  --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23192545' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  color-scheme:light;
}
/* ---- TEMA OSCURO: navy profundo de fondo, superficies navy claro, texto blanco/tinte. Los bloques navy
   (héroe, CTA, pie, sección navy) NO cambian: siguen en --navy y se leen como bloques más claros que el fondo.
   Contrastes calculados (WCAG): texto 14,9:1 · texto-2 9,6:1 sobre --bg y 7,4:1 sobre --surface · botón 13,4:1. ---- */
[data-theme="dark"]{
  --bg:#0F172A;
  --bg-alt:#141F3C;
  --surface:#1E2B4F;
  --surface-2:#2A3A66;
  --field-bg:#0F172A;
  --text:#F1F3F7;
  --text-2:#B8BFCF;
  --accent:#FFFFFF;
  --line:rgba(255,255,255,.16);
  --line-soft:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.30);
  --btn-bg:#FFFFFF;
  --btn-fg:#192545;
  --btn-hover:#DDE2EC;
  --focus:#FFFFFF;
  --shadow:0 6px 24px rgba(0,0,0,.45);
  --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  color-scheme:dark;
}
@media (min-width:900px){
  :root{ --header-h:76px; --gutter:32px; }
}

@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/anton-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:200 1000;font-display:swap;src:url(/assets/fonts/nunito-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito Sans";font-style:italic;font-weight:200 1000;font-display:swap;src:url(/assets/fonts/nunito-sans-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}