#inicio {
  isolation: isolate;
  overflow: hidden;
  height: 100svh;
  min-height: 30rem;
  background: var(--ocean-deep);
}
.aquarium-backdrop, .aquarium-video, .aquarium-video-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.aquarium-backdrop { overflow: hidden; }
.aquarium-video { display: block; object-fit: cover; object-position: center; }
.aquarium-video-shade {
  background: linear-gradient(180deg, #002b5026, transparent 22% 45%, #001b3bb3 100%);
}
.aquarium-caption {
  position: absolute;
  z-index: 10;
  bottom: max(3rem, 9%);
  left: 1rem;
  right: 1rem;
  text-align: center;
  color: var(--hero-foreground);
  pointer-events: none;
}
.aquarium-caption p {
  margin: 0;
  font-size: clamp(.9rem, 1.35vw, 1.2rem);
  font-weight: 500;
  line-height: 1.5;
  text-shadow: 0 2px 12px #001820;
}
.aquarium-title {
  margin: 0 0 .75rem;
  font-family: 'Manrope', sans-serif;
  font-size: clamp(2.6rem, 6.8vw, 5.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.045em;
  text-wrap: balance;
  text-shadow: 0 3px 24px #00172dcc;
}
.aquarium-title span { color: var(--ocean-light); }
.aquarium-caption::before {
  content: '';
  display: block;
  width: 2.5rem;
  height: .2rem;
  margin: 0 auto 1rem;
  border-radius: 1rem;
  background: var(--accent);
}
/* Shopping controls return below the hero without covering the clip. */
body.aquarium-hero-visible .shop-cart-toggle,
body.aquarium-hero-visible main > a[aria-label*="WhatsApp"] {
  visibility: hidden;
  pointer-events: none;
}
#inicio header > div a[href*="wa.me"] { display: none; }
#inicio:has(header + nav) { overflow: visible; z-index: 30; }
@media (max-width: 1279px) {
  #inicio header > nav { display: none; }
  #inicio header > button { display: inline-flex; }
  #inicio header + nav {
    display: flex;
    max-height: calc(100svh - 5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #002b50f5;
  }
  #inicio header > div { margin-left: auto; margin-right: 1rem; }
}
/* Keep the existing mobile stage, with a responsive HTML title. */
@media (max-width: 767px) {
  #inicio { height: calc(5rem + 83.333333vw); min-height: 0; }
  .aquarium-backdrop { top: 5rem; height: calc(100% - 5rem); }
  .aquarium-caption { left: .75rem; right: .75rem; bottom: 1.25rem; }
  .aquarium-title { font-size: clamp(2rem, 8.5vw, 3.5rem); margin-bottom: .5rem; }
  .aquarium-caption::before { margin-bottom: .65rem; }
  .aquarium-caption p { font-size: clamp(.75rem, 3.3vw, .95rem); }
}
@media (min-width: 768px) and (orientation: portrait) {
  #inicio { height: calc(5rem + 75vw); min-height: 0; }
  .aquarium-backdrop { top: 5rem; height: calc(100% - 5rem); }
}
@media (max-height: 500px) and (orientation: landscape) {
  #inicio { height: calc(5rem + 56.25vw); min-height: 0; }
  .aquarium-backdrop { top: 5rem; height: calc(100% - 5rem); }
}