/* ==========================================================================
   hero.css — banner principal (#inicio)                prefijo: .hero-
   ========================================================================== */

.hero {
  --hero-pb: 1.25rem;
  padding-top: calc(var(--hdr-h) + var(--hdr-top) + 1rem);
  padding-bottom: var(--hero-pb);
}

/* ---------- panel contenedor con brillos, grilla y grano ---------- */
.hero-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* los espacios verticales dependen del alto de pantalla: se comprimen en
     laptops bajas y respiran en monitores altos */
  padding: clamp(1.75rem, 5.5vh, 4.5rem) clamp(1.25rem, .5rem + 3vw, 3.5rem) clamp(1.25rem, 3vh, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background:
    radial-gradient(60% 55% at 88% 18%, rgba(193, 44, 229, .26), transparent 70%),
    radial-gradient(45% 50% at 6% 96%, rgba(79, 124, 255, .18), transparent 70%),
    radial-gradient(70% 45% at 60% 118%, rgba(193, 44, 229, .30), transparent 70%),
    var(--surface);
}

/* Desktop apaisado: el banner ocupa exactamente una pantalla (lo que queda
   debajo del header). Si el contenido no entra, crece en vez de cortarse. */
@media (min-width: 961px) and (orientation: landscape) {
  .hero-panel {
    min-height: calc(100svh - var(--hdr-h) - var(--hdr-top) - 1rem - var(--hero-pb));
  }
}

/* grilla fina que se desvanece hacia los bordes */
.hero-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 4rem 4rem;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000 20%, transparent 75%);
          mask-image: radial-gradient(70% 70% at 50% 40%, #000 20%, transparent 75%);
}

/* grano: da textura a los degradés y evita el "banding" */
.hero-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.hero-grid {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: clamp(2rem, 1rem + 3vw, 4rem);
}

/* ---------- columna de texto ---------- */
.hero-copy { position: relative; z-index: 2; }

.hero-title {
  margin: clamp(1rem, 2.6vh, 1.5rem) 0;
  font-size: var(--fs-hero);
  line-height: 1.02;
  letter-spacing: -0.045em;
}
.hero-title__lead {
  display: block;
  padding-bottom: .22em;            /* mismo motivo que .hero-rotator__word: letras que bajan de la línea */
  margin-bottom: -.22em;
  background: var(--grad-soft);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Rotador: todas las palabras ocupan la misma celda de la grilla, así el
   bloque toma el ancho de la más larga y el layout no salta al cambiar. */
.hero-rotator {
  display: inline-grid;
  padding-bottom: .08em;          /* que no se corten los descendentes */
  white-space: nowrap;
}
.hero-rotator__word {
  grid-area: 1 / 1;
  /* El degradé (background-clip: text) solo pinta dentro de la caja de la
     palabra, que mide una línea justa: sin este aire extra, las letras que
     bajan de la línea (y, g, p, j) quedaban cortadas ("in your hands").
     El margen negativo devuelve ese aire para que el titular no crezca. */
  padding-bottom: .22em;
  margin-bottom: -.22em;
  opacity: 0;
  transform: translateY(45%);
  filter: blur(10px);
  transition: opacity .6s var(--ease-out), transform .7s var(--ease-out), filter .6s var(--ease-out);
}
.hero-rotator__word.is-active { opacity: 1; transform: none; filter: none; }
.hero-rotator__word.is-leaving { opacity: 0; transform: translateY(-45%); filter: blur(10px); }

.hero-lead {
  max-width: 38rem;
  color: var(--text-2);
  font-size: var(--fs-md);
  line-height: 1.65;
}
.hero-lead strong { color: var(--text); font-weight: 600; }

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem;
  margin-top: clamp(1.25rem, 3.6vh, 2.25rem);
}

/* prueba social */
.hero-proof {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(1.25rem, 3.6vh, 2.25rem);
}
.hero-avatars { display: flex; }
.hero-avatars img {
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1.5px rgba(193, 44, 229, .7);
  object-fit: cover;
}
.hero-avatars img + img { margin-left: -.75rem; }
.hero-proof p { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.4; }
.hero-proof strong { display: block; color: var(--text); font-size: var(--fs-base); font-weight: 700; }

/* ---------- columna visual ---------- */
.hero-visual {
  /* --vis-ar: relación ancho/alto de la composición. 1 = cuadrada; en monitores
     anchos se abre (ver responsive) y los chips se reparten a lo ancho. */
  --vis-ar: 1;
  position: relative;
  aspect-ratio: var(--vis-ar);
  width: 100%;
  /* crece con la columna, pero su alto nunca pasa del 60% de la pantalla */
  max-width: calc(min(36rem, 60vh) * var(--vis-ar));
  justify-self: center;
}

/* órbitas */
.hero-orbit {
  position: absolute;
  inset: 50% auto auto 50%;
  aspect-ratio: 1;               /* el tamaño sale del alto: siempre círculos */
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .08);
  transform: translate(-50%, -50%);
}
.hero-orbit--1 { height: 64%; }
.hero-orbit--2 { height: 86%; border-style: dashed; border-color: rgba(193, 44, 229, .22); }
.hero-orbit--3 { height: 108%; border-color: rgba(255, 255, 255, .05); }

/* un punto de luz recorre cada órbita */
.hero-orbit::after {
  content: "";
  position: absolute;
  top: -.25rem; left: 50%;
  width: .5rem; height: .5rem;
  margin-left: -.25rem;
  border-radius: 50%;
  background: var(--brand-hi);
  box-shadow: 0 0 14px 2px var(--brand);
}
.hero-orbit--1::after { background: var(--gold-hi); box-shadow: 0 0 12px 2px var(--gold); }
.hero-orbit--3::after { background: var(--blue); box-shadow: 0 0 12px 2px var(--blue); }
.hero-orbit--1 { animation: orbit 18s linear infinite; }
.hero-orbit--2 { animation: orbit 30s linear infinite reverse; }
.hero-orbit--3 { animation: orbit 44s linear infinite; }
@keyframes orbit { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* resplandor detrás de la tarjeta */
.hero-halo {
  position: absolute;
  top: 22%; bottom: 22%;
  left: 50%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(193, 44, 229, .55), rgba(79, 124, 255, .15) 55%, transparent 72%);
  filter: blur(30px);
}

/* tarjeta del lanzamiento (demostración: "así se ve tu música") */
.hero-card {
  position: absolute;
  top: 50%; left: 50%;
  width: calc(58% / var(--vis-ar));
  padding: .75rem .75rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(27, 23, 39, .92), rgba(12, 10, 19, .96));
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(193, 44, 229, .12);
  transform: translate(-50%, -50%) rotate(-4deg);
}
.hero-card__cover {
  width: 100%;
  aspect-ratio: 1;
  border-radius: .875rem;
  object-fit: cover;
}
.hero-card__badge {
  position: absolute;
  top: 1.35rem; right: 1.35rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .6rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-pill);
  background: rgba(5, 4, 9, .5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hero-card__badge::before {
  content: "";
  width: .375rem; height: .375rem;
  border-radius: 50%;
  background: var(--brand-hi);
  box-shadow: 0 0 8px var(--brand);
  animation: pulse 2s var(--ease) infinite;
}
.hero-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .875rem;
  padding-inline: .25rem;
}
.hero-card__title { font-size: var(--fs-base); font-weight: 700; line-height: 1.2; }
/* color propio, un punto más claro que --text-3: sobre la tarjeta oscura ese
   token se quedaba justo por debajo del mínimo de contraste (en los dos temas) */
.hero-card__artist { font-size: var(--fs-xs); color: #9891AB; white-space: nowrap; }
.hero-card__play {
  flex-shrink: 0;
  width: 2.375rem; height: 2.375rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--grad-btn);
  box-shadow: 0 0 16px rgba(193, 44, 229, .6);
}
.hero-card__play svg { width: .875rem; height: .875rem; }

/* ecualizador animado */
.hero-eq {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 1.375rem;
  margin-top: .75rem;
  padding-inline: .25rem;
}
.hero-eq i {
  flex: 1;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(0deg, var(--brand-deep), var(--brand-hi));
  transform-origin: bottom;
  transform: scaleY(calc(.25 + var(--i) * .08));   /* altura fija si no hay animación */
  animation: eq 1.1s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -.13s);
}
@keyframes eq {
  0%   { transform: scaleY(.18); }
  100% { transform: scaleY(1); }
}

/* chips de plataformas flotando, con el logo de cada una en la gama violeta */
.hero-chip {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .375rem .85rem .375rem .375rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .8);
  animation: float 6s var(--ease) infinite;
  animation-delay: var(--fd, 0s);
}
.hero-chip__ic {
  width: 1.625rem; height: 1.625rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 25%, rgba(227, 106, 240, .28), rgba(123, 60, 242, .16));
  border: 1px solid rgba(193, 44, 229, .35);
  color: var(--platform-ic);
}
.hero-chip__ic svg { width: .9375rem; height: .9375rem; fill: currentColor; }
.hero-chip--1 { bottom: 14%; left: -2%;  --fd: -1s; }
.hero-chip--2 { top: 14%;  right: -2%;   --fd: -3s; }
.hero-chip--3 { top: 46%;  right: -8%;   --fd: -2s; }
.hero-chip--4 { bottom: 1%; right: 4%;   --fd: -4s; }
.hero-chip--5 { top: 40%;  left: -8%;    --fd: -5s; }

/* tarjeta de regalías — el monto sube en vivo (ver main.js) */
.hero-royalty {
  position: absolute;
  z-index: 4;
  left: -8%;
  top: 3%;
  width: 12.75rem;
  padding: .875rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .9);
  animation: float 7s var(--ease) infinite;
  animation-delay: -2.5s;
}
.hero-royalty__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.hero-royalty__label { font-size: var(--fs-xs); color: var(--text-3); }
.hero-royalty__live {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-hi);
}
.hero-royalty__live::before {
  content: "";
  width: .375rem; height: .375rem;
  border-radius: 50%;
  background: var(--brand-hi);
  box-shadow: 0 0 8px var(--brand);
  animation: pulse 1.6s var(--ease) infinite;
}
.hero-royalty__value {
  position: relative;
  margin-top: .125rem;
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;     /* los dígitos no bailan al cambiar */
}
/* "+US$ 2,40" que aparece sobre la curva y sube en cada pago nuevo */
.hero-royalty__pop {
  position: absolute;
  right: 0; top: -.35rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .9);
  font-size: .6875rem;
  font-weight: 700;
  color: var(--gold-hi);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  animation: pop-up 1.4s var(--ease-out) forwards;
}
@keyframes pop-up {
  0%   { opacity: 0; transform: translateY(.5rem); }
  20%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-.9rem); }
}
.hero-royalty__row { position: relative; display: flex; align-items: center; justify-content: space-between; margin-top: .5rem; }
.hero-royalty__up {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: rgba(202, 148, 36, .14);
  color: var(--gold-hi);
  font-size: .6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hero-royalty__spark { width: 5.25rem; height: 1.75rem; overflow: visible; }
/* la línea se dibuja de izquierda a derecha al arrancar (solo con JS) */
.js .hero-royalty__spark path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.8s var(--ease-out);
}
.js .hero-royalty.is-live .hero-royalty__spark path { stroke-dashoffset: 0; }

/* ---------- barra de métricas ---------- */
.hero-stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(1.5rem, 4vh, 4rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(5, 4, 9, .45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero-stat {
  padding: clamp(.9rem, 2.4vh, 1.4rem) 1rem;
  text-align: center;
}
.hero-stat + .hero-stat { border-left: 1px solid var(--line); }
.hero-stat__num {
  display: block;
  font-size: clamp(1.75rem, min(1.3rem + 1.4vw, 4.4vh), 2.75rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.hero-stat__label {
  display: block;
  margin-top: .3rem;
  color: var(--text-3);
  font-size: var(--fs-sm);
  font-weight: 500;
}

/* ---------- responsive ---------- */

/* Monitores anchos (1920×1080 y similares): la pantalla es más ancha que alta,
   así que la composición también. La tarjeta mantiene su tamaño y los chips,
   las órbitas y las regalías se abren hacia los costados para usar el ancho. */
@media (min-width: 1500px) and (orientation: landscape) {
  .hero-visual { --vis-ar: 1.3; }
  .hero-chip--3 { right: -3%; }            /* que no roce el borde del panel */
}

/* Laptops de poca altura (1366×657, 1280×720…): se compacta todo un poco para
   que el banner siga entrando en una pantalla, sin sacar contenido. */
@media (min-width: 961px) and (orientation: landscape) and (max-height: 800px) {
  .hero-panel { padding-top: clamp(1.25rem, 4vh, 4.5rem); }
  .hero-title { font-size: clamp(2.5rem, min(6vw - .25rem, 8.2vh), 6rem); }
  .hero-lead { font-size: var(--fs-base); line-height: 1.55; }
  .hero-ctas, .hero-proof { margin-top: clamp(1rem, 3vh, 1.75rem); }
  .hero-avatars img { width: 2.375rem; height: 2.375rem; }
  .hero-stats { margin-top: clamp(1rem, 3vh, 2rem); }
  .hero-stat { padding: .7rem 1rem; }
  .hero-stat__num { font-size: clamp(1.5rem, 4vh, 2.25rem); }
  .hero-stat__label { font-size: var(--fs-xs); margin-top: .15rem; }
}

@media (max-width: 1100px) {
  .hero-chip--3 { right: -3%; }
  .hero-chip--5 { left: -3%; }
}

@media (max-width: 960px) {
  /* minmax(0,…): la columna no puede ensancharse por contenido que no se parte (botones, titular) */
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { text-align: center; }
  .hero-copy .eyebrow { margin-inline: auto; }
  .hero-lead { margin-inline: auto; }
  .hero-ctas, .hero-proof { justify-content: center; }
  .hero-visual { max-width: 27.5rem; margin-top: 1rem; }
}

@media (max-width: 640px) {
  .hero-panel { border-radius: var(--r-lg); padding-top: 2.5rem; }
  .hero-title { font-size: clamp(2.1rem, 9.6vw, 2.75rem); margin: 1.25rem 0; }
  .hero-lead { font-size: var(--fs-base); }
  .hero-copy .eyebrow { font-size: var(--fs-xs); padding-right: .75rem; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; justify-content: space-between; }
  .hero-ctas .btn--ghost { justify-content: center; }
  .hero-proof { flex-direction: column; gap: .6rem; text-align: center; }
  .hero-visual { max-width: 21.25rem; }
  .hero-card { width: 66%; }
  .hero-card__badge { top: 1.1rem; right: 1.1rem; font-size: .5625rem; padding: .25rem .5rem; }
  .hero-chip { font-size: 11px; padding: .3rem .7rem .3rem .3rem; }
  .hero-chip__ic { width: 1.375rem; height: 1.375rem; }
  .hero-chip__ic svg { width: .8125rem; height: .8125rem; }
  .hero-chip--2, .hero-chip--5 { display: none; }
  .hero-chip--3 { top: 44%; right: -6%; }
  .hero-chip--4 { bottom: -4%; right: 0; }
  .hero-chip--1 { bottom: 12%; left: -6%; }
  .hero-royalty { width: 9.5rem; left: -7%; top: -3%; padding: .625rem .7rem; }
  .hero-royalty__live { font-size: 0; gap: 0; }           /* en mobile queda solo el punto */
  .hero-royalty__value { font-size: var(--fs-base); }
  .hero-royalty__spark { width: 3.25rem; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-stat:nth-child(3) { border-left: 0; }
  .hero-stat:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .hero-stat__label { font-size: var(--fs-xs); }
}

/* teléfonos chicos (360 px o menos): los chips de la derecha se meten para no
   recortarse, y el botón principal puede usar dos líneas en vez de desbordar */
@media (max-width: 400px) {
  .hero-ctas .btn--orb {
    white-space: normal;
    height: auto;
    min-height: var(--btn-h);
    padding-block: .35rem;
    line-height: 1.25;
    text-align: left;
  }
  .hero-chip--3 { right: 0; }
  .hero-chip--4 { right: 0; bottom: -5%; }
  .hero-chip--1 { left: -2%; }
  .hero-royalty { left: -3%; }
}