/* =============================================
   RG HEADER - Estandarizado para todas las páginas
   ============================================= */

/* Header container - siempre fijo y en la misma posición */
.rg-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--surface-container-highest, #e1e3e2);
}

/* Contenedor interno - centrado exactamente igual */
.rg-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .rg-header-inner {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }

  .rg-logo-wrapper {
    min-width: 0;
  }

  .rg-logo-wrapper img {
    max-width: min(52vw, 176px);
  }
}

@media (min-width: 768px) {
  .rg-header-inner {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

/* Logo wrapper - tamaño fijo */
.rg-logo-wrapper {
  height: 2.5rem;
  width: auto;
  display: flex;
  align-items: center;
}

@media (min-width: 768px) {
  .rg-logo-wrapper {
    height: 3.5rem;
  }
}

/* Logo image - tamaño fijo */
.rg-logo-wrapper img {
  height: 100%;
  width: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.rg-logo-wrapper img:hover {
  transform: scale(1.05);
}

/* Mobile menu button - SOLO visible en mobile */
.rg-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem;
  border-radius: 0.75rem;
  color: var(--primary, #064e3b);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
}

/* OCULTAR en desktop - cuando el nav completo es visible */
@media (min-width: 1024px) {
  .rg-menu-btn {
    display: none !important;
  }
}

.rg-menu-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.rg-menu-btn:active {
  transform: scale(0.95);
}

/* Nav desktop - gap fijo */
.rg-nav-desktop {
  display: none;
  gap: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 0.875rem;
  line-height: 1;
}

@media (min-width: 1024px) {
  .rg-nav-desktop {
    display: flex;
    align-items: center;
  }
}

/* Nav link base */
.rg-nav-link {
  color: var(--on-surface-variant, #404944);
  text-decoration: none;
  transition: color 0.3s;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
}

/* Nav link hover */
.rg-nav-link:hover {
  color: var(--primary, #064e3b);
}

/* Nav link activo */
.rg-nav-link.active {
  background: rgba(6, 78, 59, 0.1);
  color: var(--primary, #064e3b);
  font-weight: 700;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
}

/* Cart icon - posición fija */
.rg-cart-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 0.625rem;
  border-radius: 1rem;
  background: #f1f1f1;
  color: var(--primary, #064e3b);
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
  gap: 0.5rem;
}

.rg-cart-icon:hover {
  background: var(--primary, #064e3b);
  color: white;
}

@media (min-width: 768px) {
  .rg-cart-icon {
    padding: 0.75rem;
  }
}

/* WhatsApp button */
.rg-whatsapp-btn {
  margin-left: 2rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  background: #22c55e;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 700;
  font-size: 0.875rem;
  text-decoration: none;
  transition: background-color 0.2s;
}

.rg-whatsapp-btn .material-symbols-outlined {
  width: 1.3rem;
  height: 1.3rem;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: transparent;
  font-size: 0 !important;
  line-height: 1;
}

.rg-whatsapp-btn .material-symbols-outlined::before {
  content: "";
  width: 1rem;
  height: 1rem;
  display: block;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12.04 3.2A8.74 8.74 0 0 0 4.55 16.4l-.95 4 4.1-1.08a8.73 8.73 0 1 0 4.34-16.12Zm0 1.7a7.03 7.03 0 0 1 5.1 11.87 7.05 7.05 0 0 1-8.94.82l-.3-.18-2.02.53.48-1.98-.2-.32a7.03 7.03 0 0 1 5.88-10.74Zm-2.3 3.36c-.16 0-.42.06-.64.31-.22.26-.84.82-.84 2s.86 2.32.98 2.48c.12.16 1.7 2.6 4.12 3.63 2.04.88 2.45.7 2.9.66.44-.04 1.42-.58 1.62-1.14.2-.56.2-1.04.14-1.14-.06-.1-.22-.16-.46-.28l-1.36-.66c-.24-.12-.42-.18-.6.12-.18.3-.68.84-.84 1.02-.16.18-.32.2-.58.08-.26-.12-1.1-.4-2.1-1.3-.78-.7-1.3-1.56-1.46-1.82-.16-.26-.02-.4.12-.54.12-.12.26-.32.4-.48.14-.16.18-.28.28-.46.1-.18.04-.34-.02-.48l-.62-1.5c-.16-.38-.32-.5-.54-.5h-.6Z'/%3E%3C/svg%3E");
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.16));
}

.rg-whatsapp-btn:hover {
  background: #16a34a;
}