/* ==========================================================================
   MELÍFERA DIGITAL — CAPA VISUAL COMPLEMENTARIA (Fases 1 y 2)
   Variables cromáticas apícolas, texturas biofísicas, acordeón y microinteracciones
   ========================================================================== */

:root {
  /* Paleta cromática de la miel y derivados */
  --honey-50: #fffbeb;
  --honey-100: #fef3c7;
  --honey-200: #fde68a;
  --honey-300: #fcd34d;
  --honey-400: #fbbf24;
  --honey-500: #f59e0b;
  --honey-600: #d97706;
  --honey-700: #b45309;
  --honey-800: #92400e;
  --honey-900: #78350f;
  --honey-950: #451a03;

  /* Cera virgen y opérculo */
  --wax-gold: #eab308;
  --wax-amber: #c2410c;
  --wax-surface: #fdfbf7;

  /* Tonos botánicos y clorofílicos */
  --botanic-700: #2d4a36;
  --botanic-800: #1b2d21;
  --botanic-900: #122017;
  --botanic-950: #0a130e;

  /* Pizarra pétrea y contrastes de colmenar */
  --slate-earth: #292524;
  --slate-dark: #1c1917;
  --slate-carbon: #0c0a09;
}

/* Suavizado y desplazamiento fluido nativo */
html {
  scroll-behavior: smooth;
}

/* Patrón geométrico sutil de celdillas hexagonales */
.honeycomb-pattern {
  background-color: var(--wax-surface);
  background-image: radial-gradient(#d9770618 1.2px, transparent 1.2px), 
                    radial-gradient(#d9770618 1.2px, var(--wax-surface) 1.2px);
  background-size: 28px 28px;
  background-position: 0 0, 14px 14px;
}

/* Barra de navegación con desenfoque vítreo translúcido */
.glass-nav {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(254, 250, 240, 0.88);
  border-bottom: 1px solid rgba(120, 53, 15, 0.1);
}

/* Paneles y tarjetas con efecto vidrio traslúcido */
.glass-panel {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(254, 243, 199, 0.9);
}

.glass-panel-dark {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(18, 32, 23, 0.85);
  border: 1px solid rgba(45, 74, 54, 0.5);
}

/* Microanimaciones biofísicas */
@keyframes bio-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.18);
    opacity: 0.65;
  }
}

.animate-bio-pulse {
  animation: bio-pulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes wing-flutter {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(4deg);
  }
  75% {
    transform: rotate(-4deg);
  }
}

.animate-wing-flutter {
  animation: wing-flutter 0.35s ease-in-out infinite;
}

/* Estilos y transiciones para el menú móvil */
#mobile-menu {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Indicadores de foco accesible para la navegación con teclado */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--honey-600);
  outline-offset: 2px;
}

/* Transiciones táctiles e interactivas para el Bento Grid y Catálogos */
.bento-card, .fenologia-card, .producto-card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s ease;
  will-change: transform, box-shadow;
}

.bento-card:hover, .fenologia-card:hover, .producto-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -8px rgba(180, 83, 9, 0.12);
}

/* Transición suave para respuestas del acordeón FAQ */
.faq-transition {
  transition: max-height 0.3s ease, opacity 0.25s ease;
}

/* Scrollbar personalizada en tonos cera y miel */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--wax-surface);
}

::-webkit-scrollbar-thumb {
  background: var(--honey-300);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--honey-500);
}