/* ═══════════════════════════════════════════════════════
   ANIMACIONES
   ═══════════════════════════════════════════════════════ */

/* ═══ Logo barco (header & footer) ═══ */
.site-header__logo svg .boat,
.footer-logo svg .boat {
  animation: boatBob 4.5s ease-in-out infinite;
  transform-origin: 50% 65%;
}
.site-header__logo svg .wave-1,
.footer-logo svg .wave-1 { animation: waveSlide 3s ease-in-out infinite alternate; }
.site-header__logo svg .wave-2,
.footer-logo svg .wave-2 { animation: waveSlide 3.7s ease-in-out infinite alternate-reverse; }

@keyframes boatBob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-2px) rotate(2deg); }
}
@keyframes waveSlide {
  from { transform: translateX(0); }
  to   { transform: translateX(-6px); }
}

/* ═══ Hero — oleaje sinusoidal sincronizado ═══ */
/* Las 3 olas y el barco usan la MISMA animación, con la MISMA duración y easing.
   Resultado: todo el oleaje se mueve en unísono, ciclo completo (no alternate)
   para que la curva sinusoidal fluya sin pausas en los extremos. */
.hero__sea .wave { transform-origin: center; }

.hero__sea .w1,
.hero__sea .w2,
.hero__sea .w3 {
  animation: seaSwell 6s cubic-bezier(.45,0,.55,1) infinite;
}

@keyframes seaSwell {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(3px, -8px); }
  50%  { transform: translate(0, -14px); }
  75%  { transform: translate(-3px, -8px); }
  100% { transform: translate(0, 0); }
}

/* El barco usa la misma animación pero conservando translateX(-50%) (centrado horizontal). */
.hero__boat {
  animation: boatOnWave 6s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes boatOnWave {
  0%   { transform: translateX(calc(-50% + 0px))  translateY(0); }
  25%  { transform: translateX(calc(-50% + 3px))  translateY(-8px); }
  50%  { transform: translateX(calc(-50% + 0px))  translateY(-14px); }
  75%  { transform: translateX(calc(-50% - 3px))  translateY(-8px); }
  100% { transform: translateX(calc(-50% + 0px))  translateY(0); }
}

/* Mecida del casco SINCRONIZADA con el oleaje:
   25% del ciclo → ola desplazada a la derecha → costado derecho del casco SUBE → rotate(-2deg)
   75% del ciclo → ola desplazada a la izquierda → costado derecho del casco BAJA → rotate(2deg)
   Misma duración (6s) y curva (cubic-bezier sinusoidal) que seaSwell. */
.hero__boat .boat-rock {
  transform-origin: 50% 80%;
  animation: boatRock 6s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes boatRock {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-2deg); }
  50%  { transform: rotate(0deg); }
  75%  { transform: rotate(2deg); }
  100% { transform: rotate(0deg); }
}

.hero__sun {
  animation: sunGlow 4s ease-in-out infinite;
}
@keyframes sunGlow {
  0%, 100% { filter: drop-shadow(0 0 30px rgba(255,211,110,.5)); }
  50%      { filter: drop-shadow(0 0 60px rgba(255,211,110,.85)); }
}

/* Nubes derivando hacia la DERECHA en loop continuo (efecto viento marino estable). */
.hero__clouds .cloud-1 { animation: cloudDrift 90s linear infinite; }
.hero__clouds .cloud-2 { animation: cloudDrift 75s linear infinite; animation-delay: -20s; }
.hero__clouds .cloud-3 { animation: cloudDrift 110s linear infinite; animation-delay: -45s; }
.hero__clouds .cloud-4 { animation: cloudDrift 95s linear infinite; animation-delay: -60s; }
.hero__clouds .cloud-5 { animation: cloudDrift 85s linear infinite; animation-delay: -10s; }
@keyframes cloudDrift {
  from { transform: translateX(-12vw); }
  to   { transform: translateX(112vw); }
}

/* Hero text fade-in */
.hero__eyebrow { animation: fadeUp .8s var(--ease) .15s both; }
.hero__title   { animation: fadeUp .9s var(--ease) .3s both; }
.hero__lead    { animation: fadeUp .9s var(--ease) .45s both; }
.hero__cta     { animation: fadeUp .9s var(--ease) .6s both; }
.hero__stats   { animation: fadeUp .9s var(--ease) .75s both; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scrollDot {
  0%   { transform: translateY(0); opacity: 1; }
  80%  { transform: translateY(14px); opacity: 0; }
  100% { opacity: 0; }
}

/* ═══ Reveal on scroll ═══ */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .8s var(--ease) var(--delay, 0ms), transform .8s var(--ease) var(--delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══ WhatsApp pulse ═══ */
@keyframes pulse {
  0%   { transform: scale(1); opacity: .7; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ═══ Reduced motion ═══ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}