.elementor-4996 .elementor-element.elementor-element-67968b1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-72977bb *//* ════════ EXTRA INTERACTIVIDAD — pegar antes de </style> ════════ */

/* 1 — Título del año con latido sutil y brillo que respira */
.year-blue{
  animation: yearPulse 3s ease-in-out infinite;
}
@keyframes yearPulse{
  0%,100%{ text-shadow:0 0 40px rgba(57,168,224,0.6); }
  50%    { text-shadow:0 0 60px rgba(57,168,224,0.95), 0 0 90px rgba(57,168,224,0.4); }
}

/* 2 — Estrellas que “rebotan” en secuencia */
.star{ animation: starBounce 2.4s ease-in-out infinite; }
.stars .star:nth-child(2){ animation-delay:.2s; }
.stars .star:nth-child(3){ animation-delay:.4s; }
@keyframes starBounce{
  0%,100%{ transform:translateY(0) rotate(0); }
  50%    { transform:translateY(-7px) rotate(8deg); }
}

/* 3 — Tarjetas de producto: brillo diagonal al pasar el mouse */
.prod-card{ position:relative; }
.prod-card::after{
  content:""; position:absolute; top:0; left:-75%; width:50%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.13), transparent);
  transform:skewX(-20deg); pointer-events:none; transition:left .6s ease; z-index:2;
}
.prod-card:hover::after{ left:130%; }

/* 4 — Badges con micro-pulso para llamar la atención */
.prod-badge.gold{ animation: badgePop 1.8s ease-in-out infinite; }
@keyframes badgePop{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.08); }
}

/* 5 — Botones WhatsApp: halo que late */
.prod-wa{ position:relative; overflow:hidden; }
.prod-wa::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:0 0 0 0 rgba(37,211,102,0.5); animation: waPing 2.2s ease-out infinite;
}
@keyframes waPing{
  0%  { box-shadow:0 0 0 0 rgba(37,211,102,0.45); }
  70% { box-shadow:0 0 0 10px rgba(37,211,102,0); }
  100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); }
}

/* 6 — Botón principal del cumple: gradiente animado vivo */
.btn-wa-full{
  background-size:200% 100% !important;
  background-image:linear-gradient(90deg,#25D366,#1ebe5d,#25D366) !important;
  animation: gradMove 4s linear infinite;
}
@keyframes gradMove{ to{ background-position:200% 0; } }

/* 7 — Feature cards: realce + ícono que gira un toque */
.cf-item{ transition: transform .25s ease, border-color .25s ease, background .25s ease; cursor:default; }
.cf-item:hover{
  transform:translateY(-4px);
  border-color:rgba(57,168,224,0.4);
  background:rgba(57,168,224,0.06);
}
.cf-item .cf-icon{ transition: transform .35s cubic-bezier(.16,1,.3,1); display:inline-block; }
.cf-item:hover .cf-icon{ transform:scale(1.25) rotate(-8deg); }

/* 8 — Logo del footer: revive al pasar el mouse */
.footer-logo img{ transition: opacity .35s ease, transform .35s ease; }
.footer-logo img:hover{ opacity:.85 !important; transform:scale(1.05); }

/* 9 — Indicador de scroll en el hero (flechita que sube y baja) */
.hero::after{
  content:""; position:absolute; bottom:135px; left:50%;
  width:22px; height:22px; margin-left:-11px;
  border-right:2px solid rgba(255,255,255,0.5);
  border-bottom:2px solid rgba(255,255,255,0.5);
  transform:rotate(45deg); animation: scrollHint 1.8s ease-in-out infinite; z-index:3;
}
@keyframes scrollHint{
  0%,100%{ transform:rotate(45deg) translateY(0); opacity:.5; }
  50%    { transform:rotate(45deg) translateY(8px); opacity:1; }
}

/* 10 — Respetar usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion:reduce){
  .year-blue,.star,.prod-badge.gold,.prod-wa::before,
  .btn-wa-full,.hero::after{ animation:none !important; }
  .prod-card::after{ display:none; }
}/* End custom CSS */