/* ══════════════════════════════════════════════════
   LadyBox — animations.css
   Todas las animaciones de la página
   ══════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════
   OLAS — hero wave + section dividers
   ══════════════════════════════════════════════════ */

/* ── Hero wave (inferior) ── */
.hero-wave {
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  overflow: hidden;
  line-height: 0;
  pointer-events: none;
  height: 70px;
}
.hero-wave svg {
  display: block;
  width: 100%; height: 100%;
}
.hero-wave .wave-path {
  animation: wave-morph 7s ease-in-out infinite alternate;
}
@keyframes wave-morph {
  0%   { d: path("M0,24 C240,48 480,0 720,24 C960,48 1200,0 1440,24 L1440,48 L0,48 Z"); }
  33%  { d: path("M0,36 C180,6  420,52 720,18 C1020,0 1260,44 1440,14 L1440,48 L0,48 Z"); }
  66%  { d: path("M0,14 C300,52 540,2  720,32 C900,56 1140,4  1440,36 L1440,48 L0,48 Z"); }
  100% { d: path("M0,28 C260,54 500,0  720,38 C940,56 1180,2  1440,20 L1440,48 L0,48 Z"); }
}

/* ── Dividers entre secciones ── */
.wave-divider {
  position: relative;
  height: 80px;
  margin-bottom: -2px;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.wave-divider svg {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 100%;
}

/* Capa trasera — más lenta, más opaca */
.wave-layer--back {
  opacity: .35;
  animation: wave-drift-back 9s ease-in-out infinite alternate;
}
/* Capa media */
.wave-layer--mid {
  opacity: .55;
  animation: wave-drift-mid 7s ease-in-out infinite alternate-reverse;
}
/* Capa frontal — más rápida, más visible */
.wave-layer--front {
  opacity: 1;
  animation: wave-drift-front 5s ease-in-out infinite alternate;
}

/* Colores según la sección destino */

/* → hacia sección blanca (alt) */
.wave-into-alt .wave-layer--back  { fill: var(--rose-pale); }
.wave-into-alt .wave-layer--mid   { fill: color-mix(in srgb, var(--white) 60%, var(--rose-pale)); }
.wave-into-alt .wave-layer--front { fill: var(--white); }

/* → hacia sección rose */
.wave-into-rose .wave-layer--back  { fill: rgba(232,67,122,.18); }
.wave-into-rose .wave-layer--mid   { fill: rgba(232,67,122,.09); }
.wave-into-rose .wave-layer--front { fill: #FFF0F5; }

/* Animaciones de desplazamiento horizontal por capa */
@keyframes wave-drift-back {
  0%   { transform: translateX(0)    scaleY(1); }
  50%  { transform: translateX(-3%)  scaleY(1.08); }
  100% { transform: translateX(2%)   scaleY(.95); }
}
@keyframes wave-drift-mid {
  0%   { transform: translateX(0)   scaleY(1.05); }
  50%  { transform: translateX(4%)  scaleY(.9); }
  100% { transform: translateX(-2%) scaleY(1.1); }
}
@keyframes wave-drift-front {
  0%   { transform: translateX(0)    scaleY(1); }
  50%  { transform: translateX(-2%)  scaleY(1.06); }
  100% { transform: translateX(3%)   scaleY(.97); }
}

/* Dark mode — recolor waves */
[data-theme="dark"] .wave-into-alt .wave-layer--back  { fill: #1E2330; }
[data-theme="dark"] .wave-into-alt .wave-layer--mid   { fill: #1A1F2C; }
[data-theme="dark"] .wave-into-alt .wave-layer--front { fill: #161B24; }

[data-theme="dark"] .wave-into-rose .wave-layer--back  { fill: rgba(232,67,122,.12); }
[data-theme="dark"] .wave-into-rose .wave-layer--mid   { fill: rgba(232,67,122,.07); }
[data-theme="dark"] .wave-into-rose .wave-layer--front { fill: #12070F; }

[data-theme="dark"] .hero-wave .wave-path { fill: #161B24; }

/* ── Fallback para browsers sin d() en CSS ── */
@supports not (d: path("M0,0")) {
  .hero-wave .wave-path,
  .wave-layer {
    animation: wave-slide-x 8s ease-in-out infinite alternate;
  }
  @keyframes wave-slide-x {
    from { transform: scaleY(1)    translateX(0); }
    to   { transform: scaleY(1.1)  translateX(-2%); }
  }
}

/* ── 2. BLOBS HERO — pulso lento ─────────────────── */
.hero::before {
  animation: blob-pulse-a 8s ease-in-out infinite alternate;
}
.hero::after {
  animation: blob-pulse-b 10s ease-in-out infinite alternate;
}

@keyframes blob-pulse-a {
  0%   { transform: scale(1)   translate(0, 0); opacity: 1; }
  50%  { transform: scale(1.15) translate(-30px, 20px); opacity: .8; }
  100% { transform: scale(.9)  translate(20px, -15px); opacity: 1; }
}
@keyframes blob-pulse-b {
  0%   { transform: scale(1)   translate(0, 0); opacity: 1; }
  50%  { transform: scale(1.2) translate(20px, -25px); opacity: .7; }
  100% { transform: scale(.85) translate(-15px, 20px); opacity: 1; }
}

/* ── 3. LOGO — shimmer al hover ──────────────────── */
.logo {
  background: linear-gradient(90deg, var(--rose) 0%, var(--coral) 40%, var(--rose) 80%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: background-position .4s;
}
.logo:hover {
  animation: logo-shimmer 1.2s linear infinite;
}
@keyframes logo-shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ── 4. TRUST STRIP — entrada escalonada ─────────── */
.trust-item {
  animation: fadeUp .6s ease both;
}
.trust-item:nth-child(1) { animation-delay: .5s; }
.trust-item:nth-child(2) { animation-delay: .65s; }
.trust-item:nth-child(3) { animation-delay: .8s; }

/* ── 5. BADGE HERO2 — float mejorado ─────────────── */
.hero-badge2 {
  animation: float-badge 5s ease-in-out infinite;
}
@keyframes float-badge {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%       { transform: translateY(-10px) rotate(1deg); }
}

/* ── 6. SERVICE CARDS — entrada con stagger ─────── */
.service-card {
  animation: card-in .5s ease both;
}
.service-card:nth-child(1) { animation-delay: .1s; }
.service-card:nth-child(2) { animation-delay: .2s; }
.service-card:nth-child(3) { animation-delay: .3s; }
.service-card:nth-child(4) { animation-delay: .4s; }

@keyframes card-in {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* Icono de servicio gira suavemente al hover */
.service-card:hover .service-icon {
  animation: icon-spin .6s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes icon-spin {
  from { transform: rotate(-15deg) scale(.9); }
  to   { transform: rotate(0deg) scale(1); }
}

/* ── 7. BOTONES — pulso al hover ─────────────────── */
.btn--primary:hover {
  animation: btn-pulse .4s ease both;
}
@keyframes btn-pulse {
  0%   { box-shadow: var(--shadow-btn); }
  50%  { box-shadow: 0 0 0 6px rgba(232,67,122,.15), var(--shadow-btn); }
  100% { box-shadow: var(--shadow-btn); }
}

/* CTA cotizar — latido continuo para llamar la atención */
.cotizar-wrap .btn--wa {
  animation: heartbeat 2.8s ease-in-out infinite;
}
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  10%       { transform: scale(1.04); }
  20%       { transform: scale(1); }
  30%       { transform: scale(1.03); }
  40%       { transform: scale(1); }
}
.cotizar-wrap .btn--wa:hover {
  animation: none;
  transform: translateY(-3px);
}

/* ── 8. CONTACT CARDS — icono rebota al hover ────── */
.contact-card:hover .contact-icon {
  animation: bounce-icon .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes bounce-icon {
  from { transform: translateY(0) scale(1); }
  40%  { transform: translateY(-8px) scale(1.1); }
  to   { transform: translateY(0) scale(1); }
}

/* ── 9. SECCIÓN EMPRESA — badge año late ─────────── */
.empresa-year-badge {
  animation: badge-float 4s ease-in-out infinite 1s;
}
@keyframes badge-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* ── 10. CIRCLES PUNTEADOS — ya tienen spin-slow,
    se acelera un poco para que se note más ────────── */
.section--rose::before {
  animation: spin-slow 20s linear infinite !important;
}
.section--rose::after {
  animation: spin-slow 14s linear infinite reverse !important;
}

/* ── 11. DOTS HERO — aparecen en cascada ─────────── */
.hero-dots span {
  animation: dot-pop .4s ease both;
}
.hero-dots span:nth-child(1)  { animation-delay: .6s; }
.hero-dots span:nth-child(2)  { animation-delay: .65s; }
.hero-dots span:nth-child(3)  { animation-delay: .7s; }
.hero-dots span:nth-child(4)  { animation-delay: .75s; }
.hero-dots span:nth-child(5)  { animation-delay: .8s; }
.hero-dots span:nth-child(6)  { animation-delay: .85s; }
.hero-dots span:nth-child(7)  { animation-delay: .9s; }
.hero-dots span:nth-child(8)  { animation-delay: .95s; }
.hero-dots span:nth-child(9)  { animation-delay: 1s; }
.hero-dots span:nth-child(10) { animation-delay: 1.05s; }
.hero-dots span:nth-child(11) { animation-delay: 1.1s; }
.hero-dots span:nth-child(12) { animation-delay: 1.15s; }
.hero-dots span:nth-child(13) { animation-delay: 1.2s; }
.hero-dots span:nth-child(14) { animation-delay: 1.25s; }
.hero-dots span:nth-child(15) { animation-delay: 1.3s; }
.hero-dots span:nth-child(16) { animation-delay: 1.35s; }
.hero-dots span:nth-child(17) { animation-delay: 1.4s; }
.hero-dots span:nth-child(18) { animation-delay: 1.45s; }
.hero-dots span:nth-child(19) { animation-delay: 1.5s; }
.hero-dots span:nth-child(20) { animation-delay: 1.55s; }
.hero-dots span:nth-child(21) { animation-delay: 1.6s; }
.hero-dots span:nth-child(22) { animation-delay: 1.65s; }
.hero-dots span:nth-child(23) { animation-delay: 1.7s; }
.hero-dots span:nth-child(24) { animation-delay: 1.75s; }
.hero-dots span:nth-child(25) { animation-delay: 1.8s; }

@keyframes dot-pop {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}

/* Pulso alterno en los puntos para que "vivan" */
.hero-dots span:nth-child(odd) {
  animation: dot-pop .4s ease both, dot-breathe 3s ease-in-out infinite 2s;
}
.hero-dots span:nth-child(even) {
  animation: dot-pop .4s ease both, dot-breathe 3s ease-in-out infinite 2.5s;
}
@keyframes dot-breathe {
  0%, 100% { opacity: .35; transform: scale(1); }
  50%       { opacity: .7;  transform: scale(1.4); }
}

/* ── 12. NAV LINKS — subrayado animado ya existe,
    añadimos un leve lift al hover ──────────────────── */
.nav a:hover {
  transform: translateY(-1px);
  transition: color .2s, transform .2s;
}

/* ── 13. FOOTER — aparece desde abajo ────────────── */
.site-footer {
  animation: footer-in .6s ease both;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

/* ── 14. SCROLL SUAVE EN CARRUSEL ────────────────── */
.product-carousel__slide img {
  transition: transform .6s ease;
}
.product-carousel__slide img:hover {
  transform: scale(1.03);
}

/* ── RESPETA prefers-reduced-motion ─────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}