/* ==========================================================================
   HZ AUTOPARTES · Tokens de marca
   Fuente de verdad del sistema visual. Lo usan el sitio, el manual,
   los carruseles, el material de mostrador y la propuesta.

   PALETA: verde y blanco de Atlético Nacional.
   #00AA4D y #00943D salen del sitio oficial del club (atlnacional.com.co)
   y coinciden con el muestreo del escudo oficial. El resto de la escala
   se deriva de esos dos, manteniendo el tono (H ≈ 146°).
   ========================================================================== */

:root {
  /* --- Color · verdes Nacional ----------------------------------------- */
  --hz-verde:        #00AA4D;  /* PRIMARIO. El verde del club. */
  --hz-verde-hondo:  #00943D;  /* El verde profundo del club. */
  --hz-verde-motor:  #004A20;  /* Fondos profundos y barras de sección. */
  --hz-verde-texto:  #006B2D;  /* Verde legible sobre blanco (6.8:1). */
  --hz-verde-senal:  #2FE17C;  /* Acento sobre negro (18:1). */
  --hz-verde-suave:  #C9F3DA;  /* Fondos de bloque claro. */
  --hz-verde-velo:   rgba(0,170,77,.12);

  /* --- Color · neutros -------------------------------------------------- */
  --hz-negro:   #0A0C0A;  /* Fondo oscuro principal. */
  --hz-carbon:  #131813;  /* Bloque oscuro secundario. */
  --hz-grafito: #29302B;  /* Bordes y separadores en oscuro. */
  --hz-plata:   #C9CFD4;  /* Texto secundario sobre oscuro. */
  --hz-acero:   #6E7873;  /* Texto secundario sobre claro. */
  --hz-humo:    #F4F6F5;  /* Fondo claro. */
  --hz-linea:   #E2E7E4;  /* Separadores en claro. */
  --hz-blanco:  #FFFFFF;  /* El blanco del club: no es relleno, es color. */

  /* --- Color · funcional ------------------------------------------------ */
  --hz-alerta:  #E23A2E;  /* Rojo. Solo precio, urgencia o agotado. Max 5%. */
  --hz-wa:      #25D366;  /* Verde WhatsApp. Solo en botones de WhatsApp. */

  /* --- Tipografia ------------------------------------------------------- */
  --hz-display: "Anton", "Barlow Condensed", "Arial Narrow", sans-serif;
  --hz-titulo:  "Barlow Condensed", "Arial Narrow", sans-serif;
  --hz-texto:   "Barlow", "Segoe UI", system-ui, sans-serif;

  /* Escala tipografica (ratio 1.25) */
  --t-xs: .75rem; --t-sm: .875rem; --t-md: 1rem;   --t-lg: 1.25rem;
  --t-xl: 1.563rem; --t-2xl: 1.953rem; --t-3xl: 2.441rem;
  --t-4xl: 3.052rem; --t-5xl: 3.815rem;

  /* --- Espaciado (base 8) ------------------------------------------------ */
  --e-1: 8px;  --e-2: 16px; --e-3: 24px; --e-4: 32px;
  --e-5: 48px; --e-6: 64px; --e-7: 96px; --e-8: 128px;

  /* --- Forma ------------------------------------------------------------- */
  --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 22px; --r-full: 999px;
  --hz-skew: -9deg;                    /* La inclinacion del logotipo. */

  /* --- Movimiento -------------------------------------------------------
     Nada se mueve con `linear` ni con `ease`. Todo sale de estas tres
     curvas, que imitan masa: arranca rapido y frena largo. */
  --curva:       cubic-bezier(.32, .72, 0, 1);   /* la de siempre */
  --curva-suave: cubic-bezier(.16, 1, .3, 1);    /* entradas largas */
  --curva-firme: cubic-bezier(.65, 0, .35, 1);   /* ida y vuelta */
  --hz-sombra: 0 10px 30px rgba(0,74,32,.20);
  --hz-sombra-alta: 0 22px 60px rgba(0,74,32,.30);

  /* --- Rejilla tecnica (textura de fondo de marca) ----------------------- */
  --hz-rejilla:
    linear-gradient(rgba(0,170,77,.09) 1px, transparent 1px) 0 0/34px 34px,
    linear-gradient(90deg, rgba(0,170,77,.09) 1px, transparent 1px) 0 0/34px 34px;

  /* --- Degradado de marca ------------------------------------------------ */
  --hz-degradado: linear-gradient(135deg, #2FE17C 0%, #00AA4D 46%, #004A20 100%);
}

/* Modo oscuro: el sistema ya es oscuro por defecto en las piezas.
   Aqui solo se ajustan los documentos de lectura. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hz-humo:   #0E1210;
    --hz-linea:  #242B26;
    --hz-blanco: #0A0C0A;
    --hz-acero:  #9AA49E;
    --hz-verde-texto: #2FE17C;
  }
}
:root[data-theme="dark"] {
  --hz-humo:   #0E1210;
  --hz-linea:  #242B26;
  --hz-blanco: #0A0C0A;
  --hz-acero:  #9AA49E;
  --hz-verde-texto: #2FE17C;
}

/* ==========================================================================
   Primitivas reutilizables
   ========================================================================== */

.hz-etiqueta {                      /* Etiqueta de categoria inclinada */
  display: inline-block;
  font: 700 var(--t-sm)/1 var(--hz-titulo);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 7px 14px 6px;
  background: var(--hz-verde);
  color: #fff;
  transform: skewX(var(--hz-skew));
}
.hz-etiqueta > span { display: inline-block; transform: skewX(calc(var(--hz-skew) * -1)); }

.hz-titular {
  font: 400 clamp(2rem, 6vw, var(--t-5xl))/.94 var(--hz-display);
  text-transform: uppercase;
  letter-spacing: -.01em;
}

.hz-chevron::after {                /* El signo de direccion de la marca */
  content: "\203A\203A";
  font-family: var(--hz-titulo);
  font-weight: 700;
  margin-left: .4em;
  color: var(--hz-verde-senal);
}

.hz-barra-diagonal {                /* Separador de seccion */
  height: 10px;
  background: repeating-linear-gradient(
    115deg, var(--hz-verde) 0 22px, var(--hz-verde-motor) 22px 44px);
}

.hz-sello {                         /* Sello de garantia / respaldo */
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 var(--t-xs)/1 var(--hz-titulo);
  letter-spacing: .12em; text-transform: uppercase;
  padding: 9px 16px;
  border: 1.5px solid var(--hz-verde);
  border-radius: var(--r-full);
  color: var(--hz-verde-texto);
}