/* HERO PROMOCIONES · todo el CSS va dentro de #hero-promociones y con prefijo hp- */

@font-face {
  font-family: 'HP Cormorant';
  src: url('/assets/fonts/cormorant-garamond-latin-300-normal.woff2?v=67c458ec') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'HP Manrope';
  src: url('/assets/fonts/manrope-latin-wght-normal.woff2?v=938c6e80') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
}
/* Respaldos con métricas ajustadas para que el cambio de fuente no mueva nada */
@font-face { font-family: 'HP Serif Fallback'; src: local('Georgia'); size-adjust: 86%; ascent-override: 104%; descent-override: 32%; }
@font-face { font-family: 'HP Sans Fallback'; src: local('Arial'); size-adjust: 104%; ascent-override: 102%; descent-override: 29%; }

#hero-promociones {
  --hp-graphite: #141619;
  --hp-bone: #f3efe7;
  --hp-sand: #cbb797;
  --hp-ink-soft: rgba(243, 239, 231, 0.86);
  --hp-serif: 'HP Cormorant', 'HP Serif Fallback', Georgia, serif;
  --hp-sans: 'HP Manrope', 'HP Sans Fallback', Arial, sans-serif;
  --hp-gutter: clamp(1.25rem, 6vw, 7rem);
  --hp-ease: cubic-bezier(.22, .61, .36, 1);

  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  isolation: isolate;
  background: var(--hp-graphite);
  color: var(--hp-bone);
  font-family: var(--hp-sans);
  -webkit-font-smoothing: antialiased;
  contain: layout paint;
}
#hero-promociones *, #hero-promociones *::before, #hero-promociones *::after { box-sizing: border-box; }

/* ---------- Escenas (dos capas que se cruzan) ---------- */
#hero-promociones .hp-stage { position: absolute; inset: 0; z-index: 0; }
#hero-promociones .hp-layer { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
#hero-promociones .hp-layer.hp-is-current { opacity: 1; visibility: visible; }
#hero-promociones .hp-media { position: absolute; inset: 0; will-change: transform; }
#hero-promociones .hp-media picture { display: contents; }
#hero-promociones .hp-img,
#hero-promociones .hp-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--hp-focus, 50%) 50%;
  display: block; border: 0; margin: 0; max-width: none;
}
#hero-promociones .hp-video { opacity: 0; }
#hero-promociones .hp-video.hp-is-playing { opacity: 1; }

/* ---------- Degradados para leer el texto ---------- */
#hero-promociones .hp-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 11, 13, .5) 0%, rgba(10, 11, 13, .12) 18%, rgba(10, 11, 13, 0) 30%),
    linear-gradient(0deg, rgba(10, 11, 13, .9) 0%, rgba(10, 11, 13, .78) 32%, rgba(10, 11, 13, .5) 55%, rgba(10, 11, 13, .12) 72%, rgba(10, 11, 13, 0) 82%);
}
@media (min-width: 900px) {
  #hero-promociones .hp-shade { background:
    linear-gradient(90deg, rgba(10, 11, 13, .76) 0%, rgba(10, 11, 13, .52) 30%, rgba(10, 11, 13, .2) 50%, rgba(10, 11, 13, 0) 66%),
    linear-gradient(180deg, rgba(10, 11, 13, .5) 0%, rgba(10, 11, 13, 0) 30%),
    linear-gradient(0deg, rgba(10, 11, 13, .72) 0%, rgba(10, 11, 13, .2) 30%, rgba(10, 11, 13, 0) 50%);
  }
}

/* ---------- Grano de película (casi imperceptible) ---------- */
#hero-promociones .hp-grain { position: absolute; inset: -50%; z-index: 2; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: hp-grain 1.2s steps(6) infinite;
}
@keyframes hp-grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

/* ---------- Entrada de cine: barras y velo ---------- */
#hero-promociones .hp-bar { position: absolute; left: 0; right: 0; height: 12vh; height: 12svh; background: #050506; z-index: 6;
  transform: scaleY(0); pointer-events: none; }
#hero-promociones .hp-bar--top { top: 0; transform-origin: 50% 0; }
#hero-promociones .hp-bar--bottom { bottom: 0; transform-origin: 50% 100%; }
#hero-promociones .hp-veil { position: absolute; inset: 0; z-index: 5; background: #050506; opacity: 0; visibility: hidden; pointer-events: none; }

/* ---------- Texto ---------- */
#hero-promociones .hp-content {
  position: absolute; z-index: 4;
  left: var(--hp-gutter); right: var(--hp-gutter);
  bottom: calc(10.5rem + env(safe-area-inset-bottom, 0px));
  max-width: 44rem;
}
#hero-promociones .hp-eyebrow {
  margin: 0 0 1.4rem; font-family: var(--hp-sans); font-weight: 500;
  font-size: .72rem; letter-spacing: .34em; text-transform: uppercase; color: var(--hp-sand);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
}
#hero-promociones .hp-title {
  margin: 0; font-family: var(--hp-serif); font-weight: 300;
  font-size: clamp(2.9rem, 6.6vw, 6.4rem); line-height: 1.02; letter-spacing: -.012em;
  color: var(--hp-bone); text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .25);
}
#hero-promociones .hp-subtitle {
  margin: 1.5rem 0 0; max-width: 32rem; font-weight: 400; text-wrap: balance;
  font-size: clamp(1rem, 1.15vw, 1.12rem); line-height: 1.6; color: var(--hp-ink-soft);
  text-shadow: 0 1px 14px rgba(0, 0, 0, .4);
}
#hero-promociones .hp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.2rem; margin-top: 2.4rem; }
#hero-promociones .hp-btn {
  display: inline-flex; align-items: center; gap: .7rem; min-height: 48px;
  font-family: var(--hp-sans); font-size: .82rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; border-radius: 0; cursor: pointer;
  transition: background-color .4s var(--hp-ease), color .4s var(--hp-ease), border-color .4s var(--hp-ease);
}
#hero-promociones .hp-btn--primary { padding: 0 2rem; background: var(--hp-bone); color: var(--hp-graphite); border: 1px solid var(--hp-bone); }
#hero-promociones .hp-btn--primary:hover { background: #fff; border-color: #fff; box-shadow: 0 0 22px rgba(255,255,255,.45); }
#hero-promociones .hp-btn--link { padding: 0; color: var(--hp-bone); background: none; border: 0; position: relative; }
#hero-promociones .hp-btn--link::after { content: ''; position: absolute; left: 0; right: 1.9rem; bottom: .7rem; height: 1px;
  background: var(--hp-sand); transform-origin: 0 50%; transition: transform .5s var(--hp-ease); }
#hero-promociones .hp-btn--link:hover::after { transform: scaleX(1.18); }
#hero-promociones .hp-arrow { display: inline-block; transition: transform .5s var(--hp-ease); }
#hero-promociones .hp-btn--link:hover .hp-arrow { transform: translateX(.35rem); }

/* ---------- Pie: etiqueta, progreso y pausa ---------- */
#hero-promociones .hp-footer {
  position: absolute; z-index: 4; left: var(--hp-gutter); right: var(--hp-gutter);
  bottom: calc(1.6rem + env(safe-area-inset-bottom, 0px));
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1.1rem 2rem;
}
#hero-promociones .hp-label { grid-column: 1 / -1; min-height: 2.9rem; display: flex; flex-direction: column; gap: .3rem; }
#hero-promociones .hp-label-street { font-size: .7rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--hp-sand); }
#hero-promociones .hp-label-phrase { font-family: var(--hp-serif); font-weight: 300; font-size: 1.32rem; line-height: 1.2; color: var(--hp-bone); }
#hero-promociones .hp-progress { display: flex; gap: .5rem; margin: 0; padding: 0; list-style: none; }
#hero-promociones .hp-progress li { flex: 1 1 0; display: flex; }
#hero-promociones .hp-seg {
  position: relative; flex: 1; height: 24px; padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
}
#hero-promociones .hp-seg::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: rgba(243, 239, 231, .26); }
#hero-promociones .hp-seg-fill { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--hp-bone);
  transform: scaleX(0); transform-origin: 0 50%; }
#hero-promociones .hp-seg:hover::before { background: rgba(243, 239, 231, .5); }
#hero-promociones .hp-toggle {
  width: 44px; height: 44px; padding: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  border: 1px solid rgba(243, 239, 231, .38); background: rgba(10, 11, 13, .2); color: var(--hp-bone);
  transition: border-color .4s var(--hp-ease), background-color .4s var(--hp-ease);
}
#hero-promociones .hp-toggle:hover { border-color: var(--hp-bone); background: rgba(10, 11, 13, .4); }
#hero-promociones .hp-toggle svg { width: 14px; height: 14px; fill: currentColor; }
#hero-promociones .hp-toggle .hp-icon-play { display: none; }
#hero-promociones .hp-toggle[aria-pressed='true'] .hp-icon-play { display: block; }
#hero-promociones .hp-toggle[aria-pressed='true'] .hp-icon-pause { display: none; }

/* Foco visible para teclado */
#hero-promociones a:focus-visible,
#hero-promociones button:focus-visible { outline: 2px solid var(--hp-sand); outline-offset: 4px; }
#hero-promociones .hp-seg:focus-visible { outline-offset: 0; }

/* Texto solo para lectores de pantalla */
#hero-promociones .hp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Escritorio ---------- */
@media (min-width: 900px) {
  #hero-promociones .hp-content { bottom: auto; top: 50%; transform: translateY(-46%); }
  #hero-promociones .hp-footer { grid-template-columns: minmax(16rem, 1fr) minmax(18rem, 30rem) auto; align-items: center; }
  #hero-promociones .hp-label { grid-column: auto; }
  #hero-promociones .hp-label-phrase { font-size: 1.45rem; }
}
/* Pantallas bajas en horizontal (móvil girado) */
@media (max-height: 560px) and (orientation: landscape) {
  #hero-promociones .hp-content { top: auto; transform: none; bottom: 5.4rem; }
  #hero-promociones .hp-title { font-size: clamp(2rem, 5vw, 3rem); }
  #hero-promociones .hp-subtitle { margin-top: .8rem; }
  #hero-promociones .hp-actions { margin-top: 1.1rem; }
  #hero-promociones .hp-eyebrow { margin-bottom: .8rem; }
  #hero-promociones .hp-label { display: none; }
}

/* ---------- Estado inicial antes de animar (solo si hay JavaScript) ---------- */
.hp-js #hero-promociones:not(.hp-init) .hp-reveal { opacity: 0; }
.hp-js #hero-promociones:not(.hp-init) .hp-veil { opacity: .92; visibility: visible; }
.hp-js #hero-promociones:not(.hp-init) .hp-bar { transform: scaleY(1); }
/* Red de seguridad: si el JavaScript no llega a ejecutarse, todo aparece igualmente */
.hp-js #hero-promociones:not(.hp-init) .hp-reveal,
.hp-js #hero-promociones:not(.hp-init) .hp-veil,
.hp-js #hero-promociones:not(.hp-init) .hp-bar { animation: hp-failsafe 0s 3.5s forwards; }
@keyframes hp-failsafe { to { opacity: 1; visibility: visible; transform: none; } }
.hp-js #hero-promociones:not(.hp-init) .hp-veil,
.hp-js #hero-promociones:not(.hp-init) .hp-bar { animation-name: hp-failsafe-out; }
@keyframes hp-failsafe-out { to { opacity: 0; visibility: hidden; transform: scaleY(0); } }

/* ---------- Reducir movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  #hero-promociones .hp-grain { animation: none; }
  .hp-js #hero-promociones:not(.hp-init) .hp-bar { transform: scaleY(0); }
  #hero-promociones .hp-btn, #hero-promociones .hp-arrow, #hero-promociones .hp-btn--link::after { transition: none; }
}