/* Hero */

.hero { background: var(--bg) !important; }
.hero::before {
  content: "";
  position: absolute;
  inset: 35% -15% 0;
  transform-origin: 50% 100%;
  z-index: -1;
  background:
    radial-gradient(70% 55% at 50% 100%, rgba(173, 224, 234, 0.55), transparent 70%),
    radial-gradient(50% 38% at 50% 100%, rgba(233, 223, 207, 0.9), transparent 80%);
  pointer-events: none;
  animation: tide 9s ease-in-out infinite alternate;
}
@keyframes tide {
  from { translate: 0 6%; scale: 1 0.96; }
  to { translate: 0 0; scale: 1.04 1.04; }
}
.hero__inner {
  height: 100vh;
  height: 100svh;
  padding-top: calc(var(--nav-h) + clamp(20px, 5vh, 64px));
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero__copy {
  flex: none;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  will-change: transform, opacity;
}
.hero__title img { width: clamp(210px, 34vw, 420px); }
.hero__tag {
  margin-top: 0.5em;
  font-size: clamp(0.9375rem, 1.4vw, 1.125rem);
  letter-spacing: 0.01em;
  color: var(--navy);
}
.hero__lead {
  margin-top: clamp(18px, 3.4vh, 36px);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.3vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.026em;
  font-weight: 700;
  text-wrap: balance;
}
.hero__sub {
  margin-top: 12px;
  max-width: 36ch;
  font-size: clamp(1rem, 1.4vw, 1.1875rem);
  line-height: 1.45;
  color: var(--text-2);
  text-wrap: balance;
}
.hero__copy .btn { margin-top: clamp(18px, 3vh, 30px); }

.hero__visual {
  flex: 1 0 44vh;
  min-height: 0;
  width: 100%;
  margin-top: clamp(20px, 4vh, 44px);
  display: flex;
  justify-content: center;
  will-change: transform;
}
.hero__visual img {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: top center;
  filter: drop-shadow(0 30px 40px rgba(2, 74, 125, 0.16));
}

/* Móvil en horizontal: en vertical no cabe, texto y producto lado a lado */
@media (orientation: landscape) and (max-height: 540px) {
  .hero__inner {
    flex-direction: row;
    justify-content: center;
    gap: clamp(24px, 5vw, 64px);
    padding-top: calc(var(--nav-h) + 12px);
    padding-bottom: 12px;
    text-align: left;
  }
  .hero__copy { flex: 0 1 auto; align-self: center; align-items: flex-start; }
  .hero__title img { width: clamp(150px, 24vw, 260px); }
  .hero__lead { margin-top: 10px; font-size: clamp(1.25rem, 3vw, 1.75rem); }
  .hero__sub { margin-top: 8px; font-size: 0.9375rem; max-width: 40ch; }
  .hero__copy .btn { margin-top: 14px; min-height: 42px; }
  .hero__visual { flex: 0 0 auto; width: auto; height: 100%; margin-top: 0; }
}

.intro {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 1100ms var(--ease-out), transform 1200ms var(--ease-out);
}
.is-loaded .intro { opacity: 1; transform: none; }
.is-loaded .intro:nth-child(2) { transition-delay: 90ms; }
.is-loaded .intro:nth-child(3) { transition-delay: 180ms; }
.is-loaded .intro:nth-child(4) { transition-delay: 260ms; }
.is-loaded .intro:nth-child(5) { transition-delay: 340ms; }

.hero__visual img {
  opacity: 0;
  transform: translate3d(0, 12%, 0);
  transition: opacity 1400ms var(--ease-out) 250ms, transform 1800ms var(--ease-out) 250ms;
}
.is-loaded .hero__visual img { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .intro, .hero__visual img { transform: none !important; transition: opacity 400ms ease; }
}

.is-loaded .hero__visual img { animation: float 7s ease-in-out 2s infinite; }