/* ============================================================
   napaAngel — Sistema de movimiento
   Reveal por IntersectionObserver + parallax + microinteracciones.
   Sin JS todo queda visible: el ocultado depende de .motion-on
   ============================================================ */

/* ---------- 1. Reveal al hacer scroll ---------- */
.motion-on .entrada1,
.motion-on .entrada2,
.motion-on .entrada3,
.motion-on .entrada4,
.motion-on .entrada5,
.motion-on .reveal {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity 1.05s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1.05s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Direcciones de entrada */
.motion-on .entrada1 { transform: translate3d(-56px, 0, 0); }
.motion-on .entrada2 { transform: translate3d(56px, 0, 0); }
.motion-on .entrada3 { transform: translate3d(0, 38px, 0) scale(0.985); }
.motion-on .entrada4 { transform: translate3d(0, 32px, 0); }
.motion-on .entrada5 { transform: translate3d(0, 28px, 0); }
.motion-on .reveal   { transform: translate3d(0, 30px, 0); }

/* Estado revelado */
.motion-on .is-visible {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

/* Escalonado para hijos de un contenedor .reveal-stagger */
.motion-on .reveal-stagger > * {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.motion-on .reveal-stagger.is-visible > * {
  opacity: 1;
  transform: none;
}
.motion-on .reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.motion-on .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.17s; }
.motion-on .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.29s; }
.motion-on .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.41s; }
.motion-on .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.53s; }

/* ---------- 2. Entrada del hero (banner) ---------- */
@keyframes naRise {
  from { opacity: 0; transform: translate3d(0, 34px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes naRiseBottle {
  from { opacity: 0; transform: translate3d(0, 60px, 0) scale(0.96); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes naVeil { from { opacity: 1; } to { opacity: 0; } }

.motion-on #banner__contenedor_titulo .banner__contenedor_titulo_titulo,
.motion-on #banner__contenedor_titulo .banner__contenedor_titulo_subtitulo {
  animation: naRise 1.25s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.motion-on #banner__contenedor_titulo .banner__contenedor_titulo_titulo    { animation-delay: 0.30s; }
.motion-on #banner__contenedor_titulo .banner__contenedor_titulo_subtitulo { animation-delay: 0.52s; }
.motion-on #banner__contenedor_botella {
  animation: naRiseBottle 1.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.68s both;
}

/* Velo que se disuelve sobre el video del banner */
.motion-on .containerMainBanner .prelative::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #0d0b09;
  pointer-events: none;
  z-index: 3;
  animation: naVeil 1.5s ease-out 0.15s both;
}

/* ---------- 3. Parallax (posicionado por JS) ---------- */
.na-parallax { will-change: transform; }

/* Flotación continua de la botella de producto */
@keyframes naFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -14px, 0); }
}
.motion-on .imgBotellaVino {
  animation: naFloat 7s ease-in-out infinite;
}

/* ---------- 4. Líneas que se trazan ---------- */
.motion-on .lineaVinos {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.25s;
}
.motion-on .is-visible .lineaVinos,
.motion-on .lineaVinos.is-visible {
  transform: scaleX(1);
}

/* ---------- 5. Microinteracciones ---------- */
.anclaDownload {
  position: relative;
  display: inline-block;
  transition: color 0.35s ease, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.anclaDownload::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.anclaDownload:hover::after,
.anclaDownload:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}
.anclaDownload:hover { transform: translateY(-2px); }

.selectAnio {
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.selectAnio:hover,
.selectAnio:focus {
  box-shadow: 0 0 0 2px rgba(186, 135, 72, 0.28);
}

.btnDisclaimer {
  transition:
    background-color 0.4s ease,
    color 0.4s ease,
    transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.4s ease;
}
.btnDisclaimer:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
}
.btnDisclaimer:active { transform: translateY(-1px) scale(0.985); }

.anclaBlanca {
  transition: color 0.3s ease, opacity 0.3s ease;
}
.anclaBlanca:hover { opacity: 0.72; }

/* Foco visible para accesibilidad */
a:focus-visible,
.btnDisclaimer:focus-visible,
select:focus-visible {
  outline: 2px solid #BA8748;
  outline-offset: 3px;
}

/* ---------- 6. Entrada del disclaimer ---------- */
.motion-on #contenedorInformacionDisclaimer > * {
  animation: naRise 1.15s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.motion-on #contenedorInformacionDisclaimer > *:nth-child(1) { animation-delay: 0.20s; }
.motion-on #contenedorInformacionDisclaimer > *:nth-child(2) { animation-delay: 0.36s; }
.motion-on #contenedorInformacionDisclaimer > *:nth-child(3) { animation-delay: 0.52s; }
.motion-on #contenedorInformacionDisclaimer > *:nth-child(4) { animation-delay: 0.68s; }
.motion-on #contenedorInformacionDisclaimer > *:nth-child(5) { animation-delay: 0.84s; }

/* ---------- 7. Transición de salida entre páginas ---------- */
.na-leaving {
  opacity: 0;
  transition: opacity 0.42s ease;
}

/* ---------- 8. Scroll suave ---------- */
html { scroll-behavior: smooth; }

/* Evita el salto horizontal que provocan los elementos desplazados.
   clip no crea contenedor de scroll (hidden en <body> si lo haria y
   rompe position:sticky), por eso se prefiere y hidden queda de respaldo. */
html { overflow-x: hidden; }
@supports (overflow: clip) {
  html { overflow-x: clip; }
}

/* ---------- 9. Respeto por reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .motion-on .entrada1,
  .motion-on .entrada2,
  .motion-on .entrada3,
  .motion-on .entrada4,
  .motion-on .entrada5,
  .motion-on .reveal,
  .motion-on .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .motion-on #banner__contenedor_titulo .banner__contenedor_titulo_titulo,
  .motion-on #banner__contenedor_titulo .banner__contenedor_titulo_subtitulo,
  .motion-on #banner__contenedor_botella,
  .motion-on .containerMainBanner .prelative::after,
  .motion-on .imgBotellaVino,
  .motion-on #contenedorInformacionDisclaimer > * {
    animation: none !important;
  }
  .motion-on .lineaVinos { transform: scaleX(1) !important; transition: none !important; }
  .na-parallax { transform: none !important; }
}

/* ---------- 10. Fondo base mientras carga la imagen ----------
   Sin esto el disclaimer queda blanco sobre blanco durante la carga
   y el texto es ilegible por un instante. */
.filaContenedorInformacionDisclaimer {
  background-color: #2e1f14;
}
.containerMainBanner {
  background-color: #0d0b09;
}


/* ---------- 11. SEO: jerarquia de encabezados ----------
   Los titulos pasan de <p> a <h1>/<h2>/<h3> para que buscadores y
   asistentes entiendan la estructura. :where() no aporta especificidad,
   asi que TODA clase del sitio (.size155, .lh-80, .mb0, .saint...) sigue
   mandando y el diseno no cambia. El margen replica el de <p>. */
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  margin: 0 0 1rem;
}