/* =========================================================
= BASE (común) — Mobile First
  Todo lo que está acá aplica a mobile por defecto.
========================================================= */

:root{
  /* colores opcionales (dejé el tuyo) */
  --bt-header-bg: color-mix(in srgb, var(--rojo-aldo-dark, #b80f19) 35%, transparent);
  --bt-border: rgba(228,228,32,.3);
  --bt-white: #fff;
}

/* Barra de header */
.header{
  position: fixed; /* o sticky si preferís */
  top: 0; left: 0; right: 0;
  z-index: 1000;

  display: flex;
  align-items: center;
  justify-content: space-between;

  height: 64px;              /* MOBILE */
  padding: 0 12px;           /* MOBILE */
  background: var(--bt-header-bg);
  border-bottom: 1px solid var(--bt-border);
  color: var(--bt-white);
}

/* Grupo de logos (lado izquierdo) */
.header__logos{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: -33px;
}
.header__logos img{
  display: block;
  height: 123px;              /* MOBILE */
  width: auto;
}

/* Logo partner (derecha) — oculto en mobile */
.header__logo--partner{
  display: none !important;  /* MOBILE por defecto */
}

/* Botón CTA genérico (por si lo usás) */
.boton_especial{
  border: 1px solid var(--bt-white);
  border-radius: 6px;
  text-transform: uppercase;
  padding: 6px 12px;
}

/* Ícono menú (hamburguesa) — visible en mobile */
.burger_button {
  display: inline-flex;
  width: 40px;
  height: 40px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
  background-image: url("../../img/burger.svg"); /* ✅ ruta correcta */
  border: 0;
  cursor: pointer;
  filter: invert(1);
  margin-left: auto;
  padding: 0;
}

/* Si usás una 'X' interna para cerrar el menú, ocultala por defecto */
.mobile-close{ display: none; }

/* ---------- Menú móvil debajo del header (si lo usás) ---------- */
.mobile-nav{
  background: #000;
  border-bottom: 1px solid var(--bt-border);
  
}
.mobile-nav__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;

  background:#000;                           /* mismo tono del header */
  border-top:65px solid rgba(228,228,32,.3);  /* línea amarilla superior */
  border-bottom:1px solid rgba(228,228,32,.3);/* línea amarilla inferior */
  box-shadow:0 2px 6px rgba(0,0,0,.4);       /* leve sombra para separarlo */
}

/* divisiones entre items */
.mobile-nav__list li{
  border-bottom:1px solid rgba(228,228,32,.25);
}

/* enlaces */
.mobile-nav__list a{
  display:block;
  padding:1rem .5rem;
  color:#fff;
  text-decoration:none;
  font-weight:600;
  letter-spacing:.5px;
  text-transform:uppercase;
  transition:background-color .25s ease,color .25s ease;
}

/* hover / activo */
.mobile-nav__list a:hover,
.mobile-nav__list a:focus,
.mobile-nav__list a.is-active,
.mobile-nav__list a[aria-current="page"]{
  background-color:rgba(228,228,32,.1);
  color:#fff;
}

/* último ítem sin borde inferior */
.mobile-nav__list li:last-child{
  border-bottom:none;
}
/* Respetar [hidden] siempre */
.mobile-nav[aria-hidden="true"]{ display:none; }

/* =========================================================
= DESKTOP (>=1101px) — SOLO OVERRIDES
========================================================= */
@media (min-width: 1101px) {
  .header {
    display: grid;
    align-items: center;
    height: 96px;
    padding: 0 24px;
  }

  /* logos (izquierda y partner derecha) */
  .header__logos {
    display: contents; /* permite que los logos se ubiquen según el grid */
  }

  .header__logo {
    grid-column: 1; /* logo principal a la izquierda */
    display: flex;
    align-items: center;
  }

  .header__logo--partner {
    grid-column: 3; /* partner a la derecha */
    justify-self: end;
    display: flex;
    align-items: center;
  }

  /* nav centrado */
  #header__nav {
    grid-column: 2; /* centro */
    justify-self: center;
  }

  #header__nav ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem; /* espacio entre links */
    margin: 0;
    padding: 0;
    list-style: none;
  }
}