/**
 * Cabecera flotante del sitio (logo + menú + carrito + WhatsApp).
 * ============================================================================
 * v1.14.0 — Reemplaza el fragmento que antes se pegaba a mano en un widget
 * "HTML" de Elementor. Se inyecta desde PHP (BPC_Cabecera_Flotante, hook
 * wp_footer) como hijo directo de <body> — así ningún contenedor/sección de
 * Elementor con "overflow: hidden" o alguna transformación puede romper el
 * position:fixed (es lo que le estaba pasando a la versión pegada a mano:
 * quedaba atrapada dentro de un contenedor de Elementor y perdía el efecto
 * flotante, mostrándose como una barra más, empujada por el scroll normal).
 *
 * El logo (.sdo-logo-glossy y sus clases internas cls-1..8/balloon) se dejó
 * con el nombre que trae de fábrica, tal cual lo entregó Irvin — no se tocó
 * nada de esa parte para no arriesgar el efecto de brillo/inflado.
 *
 * v1.14.1 — En el sitio en vivo, el tema/WooCommerce de Irvin le estaba
 * filtrando su propio estilo genérico de <button> (borde rosa/magenta) al
 * botón de hamburguesa, y ese mismo conflicto de especificidad hacía que
 * quedara VISIBLE en escritorio cuando debía estar oculto (display:none
 * perdiendo contra una regla del tema). Por eso, cualquier <button>/<a>
 * dentro de la cabecera ahora resetea explícitamente borde/outline/
 * box-shadow/appearance, y las reglas de mostrar/ocultar el botón de
 * hamburguesa llevan !important — esta barra debe verse igual sin importar
 * qué CSS traiga el tema por su cuenta, que es justo el punto de este
 * componente. De paso, rediseño más minimalista (referencia: apple.com) y
 * línea inferior más gruesa, pedido explícito de Irvin.
 */

/* ===================== Logo (glossy, animado) =====================
   v1.16.0: el dibujo del logo y su animación (.sdo-logo-glossy y las
   clases cls-1..8/balloon) se movieron a assets/css/logo-animado.css —
   ahora es un helper compartido (BPC_Logo::svg()) que también usan el
   login del panel y la barra lateral, no solo esta cabecera. Ese archivo
   se encola junto con este (ver enqueue_assets() en
   class-bpc-cabecera-flotante.php). Aquí solo queda el tamaño final para
   ESTA cabecera en particular, en las reglas de
   .bpc-pub-cabecera__logo-link más abajo, que tienen más especificidad y
   ganan sobre el max-width:450px genérico de logo-animado.css. */

/* ===================== Cabecera ===================== */
.bpc-pub-cabecera {
  --bpc-cab-height: 76px;
  --bpc-cab-bg: rgba(255, 255, 255, 0.66);
  --bpc-cab-bg-scrolled: rgba(255, 255, 255, 0.92);
  --bpc-cab-blur: 18px;
  --bpc-cab-texto: #1f2937;
  --bpc-cab-texto-suave: #6b7280;
  --bpc-cab-acento: #e3a530;
  --bpc-cab-borde: rgba(15, 23, 42, 0.06);

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999999;
  width: 100%;
  box-sizing: border-box;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bpc-cab-bg);
  -webkit-backdrop-filter: blur(var(--bpc-cab-blur)) saturate(160%);
  backdrop-filter: blur(var(--bpc-cab-blur)) saturate(160%);
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
.bpc-pub-cabecera *,
.bpc-pub-cabecera *::before,
.bpc-pub-cabecera *::after {
  box-sizing: border-box;
}
/* Defensa contra estilos genéricos de botón que el tema/WooCommerce de
   Irvin aplica a cualquier <button> del sitio (fue la causa del borde
   rosa que apareció en el botón de hamburguesa) — dentro de la cabecera,
   ningún <button>/<a> hereda nada de eso. */
.bpc-pub-cabecera button,
.bpc-pub-cabecera a {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background-image: none;
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
}
.bpc-pub-cabecera button:focus-visible,
.bpc-pub-cabecera a:focus-visible {
  outline: 2px solid var(--bpc-cab-acento);
  outline-offset: 2px;
}
.bpc-pub-cabecera.is-scrolled {
  --bpc-cab-height: 60px;
  --bpc-cab-bg: var(--bpc-cab-bg-scrolled);
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.06);
}

/* Debajo de la barra de administración de WordPress (visible para usuarios
   con sesión iniciada) en vez de tapada por ella o tapándola — mismos
   puntos de quiebre que usa WordPress para su propia barra. */
body.admin-bar .bpc-pub-cabecera { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .bpc-pub-cabecera { top: 46px; }
}

.bpc-pub-cabecera__inner {
  max-width: 1280px;
  margin: 0 auto;
  height: var(--bpc-cab-height);
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 28px;
  transition: height 0.35s ease;
}

.bpc-pub-cabecera__logo-link {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
}
.bpc-pub-cabecera__logo-link .sdo-logo-glossy {
  max-width: 108px;
  margin: 0;
  transition: max-width 0.35s ease;
}
.bpc-pub-cabecera.is-scrolled .bpc-pub-cabecera__logo-link .sdo-logo-glossy {
  max-width: 90px;
}

.bpc-pub-cabecera__nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0 auto 0 40px;
  flex: 1 1 auto;
}
.bpc-pub-cabecera__link {
  position: relative;
  padding: 8px 4px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--bpc-cab-texto-suave);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.bpc-pub-cabecera__link::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 3px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--bpc-cab-acento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.bpc-pub-cabecera__link:hover,
.bpc-pub-cabecera__link:focus-visible {
  color: var(--bpc-cab-texto);
}
.bpc-pub-cabecera__link:hover::after,
.bpc-pub-cabecera__link:focus-visible::after {
  transform: scaleX(1);
}

.bpc-pub-cabecera__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
}

/* Estilo minimalista (referencia: apple.com) — solo el ícono, sin círculo
   de fondo ni borde; el hover es un simple cambio de color, sin "levantar"
   el botón. */
.bpc-pub-cabecera__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  color: var(--bpc-cab-texto-suave);
  background: none;
  text-decoration: none;
  transition: color 0.2s ease;
}
.bpc-pub-cabecera__icon-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.bpc-pub-cabecera__icon-btn:hover {
  color: var(--bpc-cab-texto);
}

/* [bpc_whatsapp_boton] trae su propio círculo verde de fábrica (ver
   header-footer-publico.css) — pensado para vivir suelto en una página,
   no dentro de esta barra minimalista. Aquí se neutraliza a solo-ícono
   para que combine con el carrito, y el verde de WhatsApp queda como
   acento de hover en vez de un botón de color permanente. */
.bpc-pub-cabecera__actions .bpc-pub-whatsapp-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  background: none;
  box-shadow: none;
  color: var(--bpc-cab-texto-suave);
}
.bpc-pub-cabecera__actions .bpc-pub-whatsapp-btn:hover {
  color: #25d366;
  filter: none;
  transform: none;
}
.bpc-pub-cabecera__actions .bpc-pub-whatsapp-btn .bpc-icon {
  width: 20px;
  height: 20px;
}

.bpc-pub-cabecera__burger {
  display: none !important;
  width: 22px;
  height: 22px;
  padding: 0;
  background: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}
.bpc-pub-cabecera__burger span {
  display: block;
  width: 20px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--bpc-cab-texto);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.bpc-pub-cabecera__burger.is-active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.bpc-pub-cabecera__burger.is-active span:nth-child(2) { opacity: 0; }
.bpc-pub-cabecera__burger.is-active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ===================== Línea inferior =====================
   Franja estática (sin animación ni brillo) con el degradado de colores
   del propio bouquet de globos del logo. Engrosada en v1.14.1 (pedido
   explícito de Irvin: "que la linea sea más gruesa") — es el único toque
   de color en una cabecera por lo demás minimalista, así que puede cargar
   más peso visual sin volver a sentirse "neón". */
.bpc-pub-cabecera__linea {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    #b2c73b, #f0b53c, #d5531f, #e27688, #3cb0ca, #0b5624
  );
}

/* ===================== Menú móvil ===================== */
@media (max-width: 880px) {
  .bpc-pub-cabecera__inner {
    padding: 0 18px;
    gap: 12px;
  }
  .bpc-pub-cabecera__nav {
    position: fixed;
    top: var(--bpc-cab-height);
    left: 0;
    right: 0;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px 18px 22px;
    background: var(--bpc-cab-bg-scrolled);
    -webkit-backdrop-filter: blur(var(--bpc-cab-blur)) saturate(160%);
    backdrop-filter: blur(var(--bpc-cab-blur)) saturate(160%);
    border-bottom: 1px solid var(--bpc-cab-borde);
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.10);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  body.admin-bar .bpc-pub-cabecera__nav { top: calc(var(--bpc-cab-height) + 32px); }
  @media (max-width: 782px) {
    body.admin-bar .bpc-pub-cabecera__nav { top: calc(var(--bpc-cab-height) + 46px); }
  }
  .bpc-pub-cabecera__nav.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .bpc-pub-cabecera__link {
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 15px;
  }
  .bpc-pub-cabecera__link::after {
    display: none;
  }
  .bpc-pub-cabecera__link:hover,
  .bpc-pub-cabecera__link:focus-visible {
    background: rgba(227, 165, 48, 0.1);
  }
  .bpc-pub-cabecera__burger {
    display: flex !important;
  }
}