/* marca.css — IDENTIDAD DE MARCA IMPREX · paleta oficial: NARANJA · AZUL · BLANCO · NEGRO.
   Fuente ÚNICA de color del ambiente de producción (tienda + tableros). Se enlaza en cada página:
     <link rel="stylesheet" href="/assets/marca.css">
   Los componentes usan estas variables (--accent, --surface, etc.); cambiar la marca = tocar solo aquí.
   Estilo: minimalista. Naranja = acción/acento. Azul = secundario/destacados. Blanco/negro = fondo/texto. */

:root{
  /* Neutros (blanco / negro) */
  --bg:#f6f7f9; --surface:#ffffff; --surface-2:#f1f3f6;
  --ink:#14181d; --muted:#5b646f; --faint:#8a939e;
  --border:#e6e8ec; --border-strong:#d2d7de;
  /* Naranja de marca = ACENTO principal */
  --accent:#f1541e; --accent-strong:#cf430f; --accent-ink:#ffffff; --accent-soft:#fce7de;
  /* Azul de marca = secundario / promos / info */
  --navy:#123e63; --navy-ink:#ffffff; --navy-soft:#e4edf4;
  --promo:#123e63; --promo-soft:#e4edf4;
  /* Señales funcionales (mínimas) */
  --ok:#2e7d52; --ok-soft:#e2f1e9; --warn:#c6410f; --warn-soft:#fbe7dd;
  --shadow:0 1px 2px rgba(20,24,29,.06), 0 10px 26px -14px rgba(20,24,29,.22);
  --sheet-sh:0 -8px 40px -12px rgba(20,24,29,.28);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#161922; --surface:#1f2430; --surface-2:#2a303e;
  --ink:#f4f6fa; --muted:#aeb7c4; --faint:#828d9c;
  --border:#333a48; --border-strong:#48505f;
  --accent:#ff6a30; --accent-strong:#ff8a55; --accent-ink:#160a04; --accent-soft:#33210f;
  --navy:#5b97cf; --navy-ink:#08151f; --navy-soft:#18314a;
  --promo:#5b97cf; --promo-soft:#18314a;
  --ok:#4ec489; --ok-soft:#173226; --warn:#ff7a3d; --warn-soft:#33200f;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 32px -16px rgba(0,0,0,.65);
  --sheet-sh:0 -8px 44px -10px rgba(0,0,0,.7);
}}
:root[data-theme="dark"]{
  --bg:#161922; --surface:#1f2430; --surface-2:#2a303e;
  --ink:#f4f6fa; --muted:#aeb7c4; --faint:#828d9c;
  --border:#333a48; --border-strong:#48505f;
  --accent:#ff6a30; --accent-strong:#ff8a55; --accent-ink:#160a04; --accent-soft:#33210f;
  --navy:#5b97cf; --navy-ink:#08151f; --navy-soft:#18314a;
  --promo:#5b97cf; --promo-soft:#18314a;
  --ok:#4ec489; --ok-soft:#173226; --warn:#ff7a3d; --warn-soft:#33200f;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 32px -16px rgba(0,0,0,.65);
  --sheet-sh:0 -8px 44px -10px rgba(0,0,0,.7);
}

/* Logo de marca = ISOTIPO (cohete naranja, se lee en claro y oscuro) + palabra "IMPREX" como texto
   que hereda el color del tema (--ink). Siempre legible. Estructura:
     <a class="marca" href="/tienda" aria-label="IMPREX">
       <img src="/assets/img/imprex-icon.png" alt="" onerror="this.style.display='none'">
       <span class="wm">IMPREX</span>
     </a> */
.marca{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--ink);font-family:"Archivo",system-ui,sans-serif;font-weight:800;font-size:1.2rem;letter-spacing:-.01em}
.marca img{height:1.85rem;width:auto;display:block}
.marca .wm{line-height:1}