/* Opción A · Telón: foto a sangre con transiciones líquidas; entra detrás de una cortina de cuero */
.ha { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: var(--cuero); color: var(--hueso); }
.ha-media { position: absolute; inset: 0; }
.ha-base, .ha-gl { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% 55%; }
.ha-gl { opacity: 0; transition: opacity .6s; }
.ha.gl-listo .ha-gl { opacity: 1; }
@supports (animation-timeline: scroll()) {
  .ha-media { animation: ha-sale linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  .ha-texto, .ha-control { animation: ha-texto linear both; animation-timeline: scroll(root); animation-range: 0 70vh; }
}
@keyframes ha-sale { to { transform: translateY(22vh) scale(1.06); } }
@keyframes ha-texto { to { transform: translateY(-8vh); opacity: 0; } }
.ha-velo { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(15,10,7,.62) 0%, rgba(15,10,7,.18) 14%, rgba(15,10,7,0) 26%, rgba(15,10,7,0) 48%, rgba(15,10,7,.72) 100%); }

.ha-texto { position: absolute; left: var(--gutter); bottom: clamp(36px, 8vh, 84px); max-width: min(62vw, 900px); }
.ha h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(42px, 6.6vw, 112px); line-height: .98; letter-spacing: -.01em; margin: 0 0 clamp(20px, 3vh, 32px); }
.ha-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 40px; }
.ha-pie p { margin: 0; max-width: 24em; color: rgba(242,238,231,.82); }
.acciones { display: flex; align-items: center; gap: 26px; }
.boton.claro { background: var(--hueso); color: var(--cuero); }
.boton.claro:hover { background: #fff; }

.ha-control { position: absolute; right: var(--gutter); bottom: clamp(36px, 8vh, 84px); width: min(26vw, 320px); }
.ha-leyenda { font-family: var(--serif); font-size: 15px; margin: 0 0 14px; color: rgba(242,238,231,.85); min-height: 1.4em; }
.ha-barras { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ha-barras button { display: block; width: 100%; padding: 10px 0; border: 0; background: none; }
.ha-barras i { display: block; height: 1px; background: rgba(242,238,231,.3); position: relative; overflow: hidden; }
.ha-barras i::after { content: ''; position: absolute; inset: 0; background: var(--hueso); transform: scaleX(0); transform-origin: left; }
.ha-barras .hecha i::after { transform: none; }
.ha-barras .activa i::after { animation: ha-corre var(--dur, 6s) linear forwards; }
@keyframes ha-corre { to { transform: none; } }

/* cortina de cuero con el logo: se abre una sola vez */
.telon { display: none; }
.js .telon { display: grid; place-items: center; position: absolute; inset: 0; z-index: 30; background: #1b120d url(../img/cuero-fondo.webp) center / cover; transition: transform 1.35s var(--curva-2); }
.telon::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(242,238,231,.15); }
.telon-logo { width: min(46vw, 420px); aspect-ratio: 1715 / 414; background: var(--hueso); -webkit-mask: url(../img/logo.png) center / contain no-repeat; mask: url(../img/logo.png) center / contain no-repeat; opacity: 0; transform: translateY(14px); animation: telon-logo 1s var(--curva) .15s forwards; transition: transform 1.2s var(--curva-2), opacity .6s; }
@keyframes telon-logo { to { opacity: 1; transform: none; } }
.ha.abierto .telon { transform: translateY(-100%); }
.ha.abierto .telon-logo { transform: translateY(-18vh); opacity: 0; }
.js .ha .ha-media { transform: scale(1.14); }
.js .ha.abierto .ha-media { transform: none; transition: transform 2.6s var(--curva); }
.js .ha .linea-m > span, .js .ha .aparece { transition-delay: calc(var(--d, 0) * 120ms + 1250ms) !important; }
.js .ha:not(.abierto) .entra.ok .linea-m > span { transform: translateY(135%); }
.js .ha:not(.abierto) .entra.ok .aparece { opacity: 0; }
.quieto .telon { display: none !important; }
body.telon-activo { overflow: hidden; }

@media (max-width: 860px) {
  .ha-texto { right: var(--gutter); max-width: none; bottom: 104px; }
  .ha h1 { font-size: clamp(36px, 10vw, 56px); }
  .ha-pie { gap: 18px; }
  .ha-control { left: var(--gutter); right: var(--gutter); width: auto; bottom: 30px; }
  .ha-leyenda { display: none; }
  .ha-velo { background: linear-gradient(180deg, rgba(15,10,7,.55) 0%, rgba(15,10,7,0) 20%, rgba(15,10,7,.12) 38%, rgba(15,10,7,.66) 62%, rgba(15,10,7,.86) 100%); }
}