/** Shopify CDN: Minification failed

Line 112:8 Expected identifier but found whitespace
Line 112:9 Unexpected "var("
Line 144:0 Expected "}" to go with "{"

**/
/* ======================================================
   HEADZ Branding CSS - Tipografía + Colores + UI
====================================================== */

/* ------------------------------
   FUENTES
------------------------------ */

/* High Cruiser - Títulos */
@font-face {
  font-family: 'High Cruiser';
  src: url('{{ "HighCruiser-PersonalUseOnly.otf" | asset_url }}') format('opentype');
  font-weight: 400;
  font-style: normal;
}

/* Brockmann - Texto corrido y subtítulos */
@font-face {
  font-family: 'Brockmann';
  src: url('{{ "brockmann-medium-webfont.woff" | asset_url }}') format('woff'),
       url('{{ "brockmann-medium.otf" | asset_url }}') format('opentype'),
       url('{{ "brockmann-medium-webfont.ttf" | asset_url }}') format('truetype');
  font-weight: 400;
  font-style: normal;
}

/* ------------------------------
   JERARQUÍA TIPOGRÁFICA
------------------------------ */

/* Títulos */
h1,h3,h4,h5,h6,.title {
  font-family: 'High Cruiser', sans-serif;
  color: #141414;
}

/* Subtítulos y destacados */
.subtitle, .highlight, h3,a {
  font-family: 'Brockmann', sans-serif;
  font-weight: 700;
  color: #455CFF;
}

/* Texto corrido */
body,  li, span {
  font-family: 'High Cruiser', sans-serif;
  font-weight: 400;
  color: #141414;
}

h2 {
  font-family: 'High Cruiser', sans-serif;
  font-weight: 400;
  color: #141414;
}

/* Citas y textos especiales */
blockquote, .quote, em {
  font-family: 'Brockmann', sans-serif;
  font-style: italic;
  color: #8A8A8F;
}

p{
  font-family: 'Brockmann', sans-serif;
  font-weight: 400;
  color: #141414;
}

/* ------------------------------
   PALETA DE COLORES HEADZ
------------------------------ */
:root {
  --color-primary: #455CFF;   /* Azul eléctrico */
  --color-secondary: #141414; /* Negro profundo */
  --color-accent: #EDE5D4;    /* Beige claro */
  --color-neutral: #8A8A8F;   /* Gris neutro */
  --color-button-text: #FFFFFF;
}

/* ------------------------------
   BOTONES
------------------------------ */
.button, button, input[type="submit"] {
  background-color: var(--color-primary);
  color: var(--color-button-text);
  font-family: 'Brockmann', sans-serif;
  font-weight: 700;
  padding: 0.8rem 1.6rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
}

.button:hover, button:hover, input[type="submit"]:hover {
  background-color: #374BFF;
}

/* ------------------------------
   BADGES / DESTACADOS
------------------------------ */
.badge, .highlight-badge {
  background-color: var(--color-secondary);
  color: var(--color-accent)
/* --- HEADZ: Estilo personalizado del menú principal --- */
.header__menu-item {
  color: rgba(20, 20, 20, 0.9); /* Gris oscuro más visible */
  text-decoration: none; /* Quitamos el subrayado si quieres un look más limpio */
  font-family: 'High Cruiser', sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  transition: all 0.2s ease;
}

.header__menu-item span {
  font-size: 1.5rem;
}

.header__menu-item:hover {
  color: rgb(80, 86, 85); /* gris verdoso HEADZ */
  text-decoration: underline; /* subrayado solo al pasar el ratón */
  text-underline-offset: 0.2rem;
}

.header__menu-item svg {
  width: 1rem;
  height: auto;
  margin-left: 0.6rem;
  fill: currentColor;
  transition: transform 0.2s ease;
}

.header__menu-item[aria-expanded="true"] svg {
  transform: rotate(180deg);
}