/* ================================================
   SISTEMA DE ANIMACIONES — Comercializadora Caces de Oro
   ================================================ */

/* Scroll suave global */
html {
  scroll-behavior: smooth;
}

/* ---- Scroll Reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-55px);
  transition: opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-right {
  opacity: 0;
  transform: translateX(55px);
  transition: opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active,
.reveal-left.active,
.reveal-right.active {
  opacity: 1;
  transform: translate(0, 0);
}

/* ---- Stagger para grillas de productos ---- */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-stagger.active > * { opacity: 1; transform: translateY(0); transition-delay: 0.80s; }
.reveal-stagger.active > *:nth-child(1)  { transition-delay: 0.00s; }
.reveal-stagger.active > *:nth-child(2)  { transition-delay: 0.08s; }
.reveal-stagger.active > *:nth-child(3)  { transition-delay: 0.16s; }
.reveal-stagger.active > *:nth-child(4)  { transition-delay: 0.24s; }
.reveal-stagger.active > *:nth-child(5)  { transition-delay: 0.32s; }
.reveal-stagger.active > *:nth-child(6)  { transition-delay: 0.40s; }
.reveal-stagger.active > *:nth-child(7)  { transition-delay: 0.48s; }
.reveal-stagger.active > *:nth-child(8)  { transition-delay: 0.54s; }
.reveal-stagger.active > *:nth-child(9)  { transition-delay: 0.60s; }
.reveal-stagger.active > *:nth-child(10) { transition-delay: 0.65s; }
.reveal-stagger.active > *:nth-child(11) { transition-delay: 0.70s; }
.reveal-stagger.active > *:nth-child(12) { transition-delay: 0.74s; }
.reveal-stagger.active > *:nth-child(13) { transition-delay: 0.78s; }
.reveal-stagger.active > *:nth-child(14) { transition-delay: 0.80s; }
.reveal-stagger.active > *:nth-child(15) { transition-delay: 0.82s; }
.reveal-stagger.active > *:nth-child(16) { transition-delay: 0.84s; }
.reveal-stagger.active > *:nth-child(17) { transition-delay: 0.86s; }
.reveal-stagger.active > *:nth-child(18) { transition-delay: 0.88s; }
.reveal-stagger.active > *:nth-child(19) { transition-delay: 0.90s; }
.reveal-stagger.active > *:nth-child(20) { transition-delay: 0.92s; }
.reveal-stagger.active > *:nth-child(21) { transition-delay: 0.94s; }

/* ================================================
   ANIMACIONES DE ENTRADA — HOME
   ================================================ */

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-36px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideFromLeft {
  from { opacity: 0; transform: translateX(-70px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideFromRight {
  from { opacity: 0; transform: translateX(70px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes floatY {
  0%, 100% { transform: translateY(0px) scale(1.1); }
  50%       { transform: translateY(-10px) scale(1.1); }
}

/* Logos de la home */
.Comercializadora {
  animation: fadeDown 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;
}

.brand div:first-child {
  animation: slideFromLeft 1s cubic-bezier(0.4, 0, 0.2, 1) 0.35s both;
}

.brand div:last-child {
  animation: slideFromRight 1s cubic-bezier(0.4, 0, 0.2, 1) 0.35s both;
}

.brand div:first-child:hover .LaGenia-logo {
  animation: floatY 2.2s ease-in-out infinite;
}

.brand div:last-child:hover .CacesDeOro-logo {
  animation: floatY 2.2s ease-in-out infinite;
}

/* ================================================
   HEADER STICKY AL SCROLL
   ================================================ */

header {
  transition: background-color 0.4s ease,
              backdrop-filter 0.4s ease,
              box-shadow 0.4s ease;
}

header.header--scrolled {
  background-color: rgba(255, 246, 211, 0.96) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.13);
}

/* ================================================
   CARDS DE PRODUCTOS — La Genia
   ================================================ */

.recipe-card {
  overflow: hidden;
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

.recipe-card .recipe-img {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  display: block;
  width: 100%;
}

.recipe-card:hover {
  transform: translateY(-16px);
  box-shadow: 0 28px 56px rgba(0, 0, 0, 0.18) !important;
}

.recipe-card:hover .recipe-img {
  transform: scale(1.08);
}

/* ================================================
   CARDS DE PRODUCTOS — Caces de Oro
   ================================================ */

.product-item {
  overflow: hidden;
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.38s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.product-item img {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  display: block;
}

.product-item:hover {
  transform: translateY(-12px) !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2) !important;
}

.product-item:hover img {
  transform: scale(1.09);
}

/* ================================================
   BOTONES — Ripple y mejoras
   ================================================ */

.btn,
button[type="submit"],
.promo-banner__btn,
.boton-descargar {
  position: relative;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease !important;
}

.btn::after,
button[type="submit"]::after,
.promo-banner__btn::after,
.boton-descargar::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
  opacity: 0;
}

.btn:hover::after,
button[type="submit"]:hover::after,
.promo-banner__btn:hover::after,
.boton-descargar:hover::after {
  width: 320px;
  height: 320px;
  opacity: 1;
}

.btn:hover,
button[type="submit"]:hover,
.boton-descargar:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.btn:active,
button[type="submit"]:active {
  transform: scale(0.97) translateY(0);
}

/* ================================================
   FORMULARIOS
   ================================================ */

input,
textarea {
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

input:focus,
textarea:focus {
  outline: none;
  border-color: #FF7F00 !important;
  box-shadow: 0 0 0 3px rgba(255, 127, 0, 0.18);
}

/* ================================================
   ACCESIBILIDAD — Focus visible
   ================================================ */

:focus-visible {
  outline: 3px solid #FF7F00;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ================================================
   ÍCONO FLOTANTE (WhatsApp)
   ================================================ */

.floating-icon {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s ease;
}

.floating-icon:hover {
  transform: scale(1.18) rotate(6deg) !important;
}

/* ================================================
   ÍCONOS SOCIALES
   ================================================ */

.social-icon img,
.contacto a img {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              filter 0.25s ease;
}

.social-icon:hover img,
.contacto a:hover img {
  transform: scale(1.25) translateY(-4px);
  filter: brightness(1.3) drop-shadow(0 4px 8px rgba(0,0,0,0.25));
}

/* ================================================
   PROMO BADGE — Pulso
   ================================================ */

@keyframes badgePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 127, 0, 0.5); }
  50%       { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255, 127, 0, 0); }
}

.promo-banner__badge {
  animation: badgePulse 2.8s ease-in-out infinite;
}

/* ================================================
   LOADER — Fade out suave
   ================================================ */

#loader {
  transition: opacity 0.45s ease;
}

#loader.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* ================================================
   TABLA Caces de Oro
   ================================================ */

.tabla-beneficios tbody tr {
  transition: background-color 0.2s ease;
}

/* ================================================
   MENU NAV — Micro-interacciones
   ================================================ */

.menu a {
  transition: color 0.2s ease, transform 0.2s ease !important;
}

.footer-links a,
.footer-social a {
  transition: color 0.25s ease, transform 0.25s ease;
}

.footer-links a:hover,
.footer-social a:hover {
  transform: translateX(4px);
}

/* ================================================
   MÓVIL — mostrar items directamente sin stagger
   ================================================ */

@media (max-width: 768px) {
  .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ================================================
   RESPETA preferencias de movimiento reducido
   ================================================ */

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .reveal-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .Comercializadora,
  .brand div:first-child,
  .brand div:last-child {
    animation: none;
  }

  .promo-banner__badge {
    animation: none;
  }

  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}