/* ==========================================================================
   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;
  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;
  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; }
.hero-card__artist { font-size: var(--fs-xs); color: var(--text-3); 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%; }
}