/* =========================================
   Variables (acepta ambos nombres)
   ========================================= */
:root{
  /* Colores que puede escribir tu editor de estilo */
  /* Si existe --header-text-color, la usamos; si no, usamos --header-text; si no, fallback negro */
  --hdr-bg:   var(--header-bg, #ffffff);
  --hdr-text: var(--header-text, var(--header-text-color, #0f172a));
}

/* =========================================
   Header
   ========================================= */
.main-header{
  background: var(--hdr-bg);
  color: var(--hdr-text);
}

/* Icono hamburguesa (es texto "☰" => usa color) */
.main-header .hamburger{
  color: var(--hdr-text) !important;
  background: transparent;
  border: 0;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}

/* Logo (por si querés limitar altura) */
.main-header .logo-img{ max-height: 40px; }

/* Links del header en desktop */
.main-header #navMenu a{
  color: var(--hdr-text);
}

/* =========================================
   Menú móvil
   ========================================= */
@media (max-width: 768px){
  .main-header #navMenu{
    background: var(--hdr-bg) !important;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
  }
  .main-header #navMenu a{
    color: var(--hdr-text) !important;
    display: block;
    padding: .75rem 1rem;
    text-decoration: none;
  }
  .main-header #navMenu a:hover{
    background: rgba(0,0,0,.04);
  }
}


/* Asegura que el contenido del header esté centrado */
.main-header .header-content {
  display: flex;
  align-items: center; /* centra verticalmente todo */
}

/* Centra la hamburguesa */
.hamburger {
  font-size: 1.5rem;   /* tamaño de las rayas */
  line-height: 1;      /* evita que el texto empuje hacia abajo */
  padding: 0;          /* elimina extra espacio */
  margin: 0;           /* elimina márgenes raros */
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center; /* centra el ícono dentro del botón */
  height: 100%;        /* ocupa la altura del header */
}


/* Desktop: ocultar hamburguesa */
@media (min-width: 769px){
  .main-header .hamburger{ display: none !important; }
}

/* Móvil: mostrar hamburguesa y controlar el nav */
@media (max-width: 768px){
  .main-header .hamburger{ display: inline-flex !important; }
  .main-header #navMenu{ display: none; }
  .main-header #navMenu.show{ display: block; }
}