/* Hero: la frambuesa se baña al hacer scroll.
   La escena queda fija mientras los textos suben 1:1 por encima, así nunca hay un tramo quieto.
   Los cuadros vienen con fondo transparente y se posan sobre el rojo de la marca. */

.hero {
  position: relative;
  height: 560svh;
  background: var(--noche-3);
  color: var(--crema);
  --cx: 50%;
  --cy: 50%;
  --fx: 0px; --fy: 0px; --fs: 100px;
  --rosa-r: 0px;
  --pote: 0;
  --corte: 0;
  --fin: 0;
}

.hero__escena {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

/* Fondo rojo casi negro con una luz tenue que sigue a la escena */
.hero__fondo {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(34% 40% at calc(var(--cx) - 6%) calc(var(--cy) - 14%), rgba(255, 190, 180, .05), rgba(255, 190, 180, 0) 70%),
    radial-gradient(62% 62% at var(--cx) var(--cy), var(--noche-1) 0%, var(--noche-2) 48%, var(--noche-3) 100%);
}

/* Palabra gigante detrás del objeto: rojo sobre rojo, como grabado */
.hero__palabras { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero__palabras span {
  position: absolute;
  left: 50%; top: 50%;
  width: 96vw;
  text-align: center;
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(90px, 19vw, 360px);
  line-height: .8;
  color: rgba(120, 18, 38, .5);
  transform: translate(-50%, calc(-50% + var(--y, 0px)));
  opacity: var(--o, 0);
  filter: blur(var(--b, 0px));
  will-change: transform, opacity, filter;
}

.hero__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }

.hero__rosa {
  position: absolute; inset: 0;
  z-index: 4;
  background: var(--rosa-foto);
  clip-path: circle(var(--rosa-r) at var(--cx) var(--cy));
  will-change: clip-path;
}
.hero__rosa::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 50% 38%, rgba(255,255,255,.32), rgba(255,255,255,0) 70%);
}

.hero__mitad {
  position: absolute;
  z-index: 6;
  left: var(--mx); top: var(--my);
  width: var(--mw); height: auto;
  opacity: var(--corte);
  will-change: transform;
  filter: drop-shadow(0 24px 30px rgba(110, 16, 32, calc(var(--fin) * .28)));
}

.hero__pote {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: 7svh;
  height: min(40svh, 390px);
  width: auto;
  transform: translate(-50%, calc((1 - var(--pote)) * 70svh)) rotate(calc((1 - var(--pote)) * -8deg));
  filter: drop-shadow(0 30px 40px rgba(110, 16, 32, .25));
  will-change: transform;
}

.hero__carga {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 9;
  background: rgba(247,239,228,.1);
  transition: opacity .6s var(--ease);
}
.hero__carga span { display: block; height: 100%; width: 0; background: var(--rosa); transition: width .3s linear; }
.hero__carga.listo { opacity: 0; }

/* Textos que suben con el scroll */
.hero__textos { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.beat {
  position: absolute;
  left: 0; right: 0;
  height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--nav-h) + 24px) var(--gutter) clamp(28px, 6svh, 64px);
}
.beat > * { pointer-events: auto; }
.beat--1 { top: 0; }
.beat--2 { top: 115svh; }
.beat--3 { top: 244svh; }
.beat--4 { top: 354svh; }
.beat--5 { top: 460svh; }

.beat__caja { max-width: 600px; }
.beat--1 .beat__caja { max-width: 660px; }
.beat .display { font-size: clamp(54px, 6.2vw, 112px); }
.beat .h3 {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(38px, 3.9vw, 68px);
  line-height: .92;
  margin: 10px 0 12px;
}
.beat .bajada { color: var(--crema); }
.beat .num {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .08em;
  color: var(--rosa);
  display: block;
}
/* cuando entra el rosa, el texto que queda en pantalla pasa a burdeo */
.beat--4 { color: color-mix(in srgb, var(--burdeo-logo) calc(var(--rosa-t, 0) * 100%), var(--crema)); }
.beat.beat--4 .bajada { color: inherit; opacity: 1; }
.beat--4 .num { color: color-mix(in srgb, var(--burdeo-logo) calc(var(--rosa-t, 0) * 100%), var(--rosa)); }

.pista {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  opacity: .78;
}
.pista i { position: relative; width: 1.5px; height: 38px; background: rgba(247,239,228,.22); overflow: hidden; }
.pista i::after { content: ""; position: absolute; left: 0; right: 0; top: -40%; height: 40%; background: var(--crema); animation: pista 2.2s var(--ease-in-out) infinite; }
@keyframes pista { to { top: 100%; } }

.beat--5 { flex-direction: column; justify-content: space-between; align-items: stretch; color: var(--burdeo-logo); padding-top: calc(var(--nav-h) + 2svh); }
.beat5__titulo { text-align: center; font-size: clamp(64px, 10vw, 180px); }
.beat5__pie { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.beat--5 .bajada { color: var(--burdeo-logo); max-width: 21em; font-weight: 500; }
.beat--5 .acciones { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.beat--5 .btn--linea { color: var(--burdeo-logo); }

/* Celular: la escena se centra más arriba y los textos van abajo */
@media (max-width: 760px) {
  .hero { height: 540svh; }
  .beat { padding: calc(var(--nav-h) + 12px) var(--gutter) 30px; }
  .beat--2 { top: 112svh; }
  .beat--3 { top: 236svh; }
  .beat--4 { top: 342svh; }
  .beat--5 { top: 440svh; align-items: stretch; }
  .beat__caja { max-width: none; }
  .beat .display { font-size: clamp(50px, 15vw, 76px); }
  .beat .h3 { font-size: clamp(36px, 11vw, 54px); margin: 8px 0 10px; }
  .beat .bajada { font-size: 16px; }
  .beat--1 .bajada { max-width: 22em; }
  .hero__textos::before {
    content: ""; position: sticky; display: block; top: 58svh; height: 42svh; margin-bottom: -42svh;
    background: linear-gradient(to bottom, rgba(19,3,6,0), rgba(19,3,6,.82));
    opacity: calc(1 - var(--fin));
  }
  .hero__pote { height: 32svh; bottom: 19svh; }
  .beat5__titulo { font-size: clamp(56px, 17vw, 84px); }
  .beat5__pie { flex-direction: column; align-items: stretch; gap: 12px; }
  .beat--5 .bajada { display: none; }
  .beat--5 .acciones .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pista i::after { animation: none; }
}