/* ============================================================
   LAS TRILLIZAS DE ORO Y EL LIBRO MÁGICO
   Landing cinematográfica — hero de video + refuerzo mínimo.
   ============================================================ */

:root {
  --violet-deep: #1b0f2e;
  --gold: #d8b25c;
  --gold-light: #f0d998;
  --ivory: #f6f1e7;

  /* Dorado unificado para TÍTULOS sans-serif (Poppins) en toda la
     web — cálido y elegante, no amarillo. Los párrafos/textos
     informativos siguen en --ivory, sin tocar. */
  --gold-title: #e6c56e;
  --gold-title-shine-1: #fff1a8;
  --gold-title-shine-2: #e6c56e;
  --gold-title-shine-3: #c9973a;

  --font-display: "Cormorant Garamond", serif;
  --font-ui: "Poppins", sans-serif;

  --button-width: clamp(360px, 24vw, 440px);
  --button-gap: 22px;
  --button-ratio: 693 / 174;
  --cta-group-width: calc((var(--button-width) * 2) + var(--button-gap));
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100%;
  overflow-x: hidden;
  background: var(--violet-deep);
  color: var(--ivory);
  font-family: var(--font-ui);
  line-height: 1.5;
}

img {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: var(--violet-deep);
}

.hero::-webkit-scrollbar {
  display: none;
}

.hero-video,
.hero-overlay,
.hero-vignette,
.hero-shadow,
.hero-particles {
  position: fixed;
  inset: 0;
}

.hero-video {
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-overlay,
.hero-vignette,
.hero-shadow,
.hero-particles {
  z-index: 1;
  pointer-events: none;
}

.hero-overlay {
  background:
    radial-gradient(
      ellipse 48% 44% at 50% 36%,
      rgba(20, 8, 28, 0.42) 0%,
      rgba(14, 5, 20, 0.54) 50%,
      rgba(8, 3, 12, 0.76) 100%
    ),
    linear-gradient(
      180deg,
      rgba(10, 5, 18, 0.14) 0%,
      rgba(10, 5, 18, 0.08) 26%,
      rgba(10, 5, 18, 0.28) 62%,
      rgba(8, 3, 12, 0.86) 100%
    );
}

.hero-vignette {
  box-shadow: inset 0 0 18vw rgba(0, 0, 0, 0.5);
}

.hero-shadow {
  background: radial-gradient(
    ellipse 46% 42% at 50% 35%,
    rgba(13, 4, 20, 0.58) 0%,
    rgba(13, 4, 20, 0.34) 52%,
    rgba(13, 4, 20, 0.06) 82%,
    transparent 100%
  );
}

/* Polvo mágico suave */
.hero-particles {
  overflow: hidden;
}

.hero-particles i {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: transparent;
  animation: dustRise 26s linear infinite;
}

.hero-particles i:nth-child(1) {
  box-shadow:
    10vw 86vh 0 0 rgba(240, 217, 152, 0.5),
    26vw 72vh 0 -0.4px rgba(240, 217, 152, 0.38),
    43vw 92vh 0 0 rgba(255, 246, 216, 0.45),
    61vw 66vh 0 -0.5px rgba(240, 217, 152, 0.32),
    78vw 88vh 0 0 rgba(240, 217, 152, 0.42),
    90vw 76vh 0 -0.4px rgba(255, 246, 216, 0.3);
}

.hero-particles i:nth-child(2) {
  animation-duration: 34s;
  animation-delay: -13s;
  box-shadow:
    17vw 78vh 0 -0.4px rgba(240, 217, 152, 0.34),
    34vw 90vh 0 0 rgba(255, 246, 216, 0.4),
    52vw 70vh 0 -0.5px rgba(240, 217, 152, 0.3),
    69vw 84vh 0 0 rgba(240, 217, 152, 0.44),
    85vw 68vh 0 -0.4px rgba(255, 246, 216, 0.32),
    96vw 94vh 0 0 rgba(240, 217, 152, 0.36);
}

@keyframes dustRise {
  0%   { transform: translateY(0); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(-94vh); opacity: 0; }
}

/* ============================================================
   CONTENIDO
   ============================================================ */

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1180px;
  min-height: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  /* Padding simétrico → el bloque queda centrado vertical de verdad,
     con el mismo aire arriba del logo que debajo del footer. */
  padding: clamp(24px, 4vh, 52px) 20px;
}

.hero-glow {
  position: absolute;
  top: -8%;
  left: 50%;
  z-index: -1;

  width: min(920px, 130vw);
  aspect-ratio: 1;
  transform: translateX(-50%);

  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(32px);

  opacity: 0.55;

  background: radial-gradient(
    circle,
    rgba(216, 178, 92, 0.10) 0%,
    rgba(122, 45, 130, 0.06) 36%,
    transparent 68%
  );

  animation: haloBreath 8s ease-in-out 1.4s infinite;
}

@keyframes haloBreath {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 0.8;
  }

  50% {
    transform: translateX(-50%) scale(1.025);
    opacity: 1;
  }
}

/* ============================================================
   LOGO
   ============================================================ */

.logo-wrap {
  position: relative;
  display: flex;
  justify-content: center;
}

.hero-logo {
  width: clamp(220px, 18vw, 300px);
  height: auto;
  margin: 0 0 16px;

  opacity: 1;
  transform: none;

  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.32));

  /* Sin animación de entrada (carga todo junto) — se deja solo el
     brillo ambiente en loop. */
  animation: logoGlowPulse 3.6s ease-in-out 1.3s infinite;
}

@keyframes logoReveal {
  0% {
    opacity: 0;
    transform: translateY(-38px) scale(0.985);
  }

  70% {
    opacity: 1;
    transform: translateY(3px) scale(1.004);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes logoGlowPulse {
  0%,
  100% {
    filter:
      drop-shadow(0 10px 22px rgba(0, 0, 0, 0.32))
      drop-shadow(0 0 16px rgba(240, 217, 152, 0.32));
  }
  50% {
    filter:
      drop-shadow(0 10px 22px rgba(0, 0, 0, 0.32))
      drop-shadow(0 0 32px rgba(240, 217, 152, 0.68));
  }
}

/* ---------- Polvo de hadas alrededor del logo ---------- */
.logo-dust {
  position: absolute;
  inset: 8% -3% 2%;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}

.logo-dust i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff8df 0%, #f0d998 55%, transparent 100%);
  box-shadow: 0 0 7px 1.5px rgba(240, 217, 152, 0.75);
  opacity: 0;
  animation: fairyDustFloat 5.2s ease-in-out infinite;
}

.logo-dust i:nth-child(1)  { top: 10%; left: 6%;  animation-delay: 0s; }
.logo-dust i:nth-child(2)  { top: 68%; left: 12%; animation-delay: 0.7s; width: 3px; height: 3px; }
.logo-dust i:nth-child(3)  { top: 18%; left: 90%; animation-delay: 1.3s; }
.logo-dust i:nth-child(4)  { top: 80%; left: 84%; animation-delay: 1.9s; width: 3px; height: 3px; }
.logo-dust i:nth-child(5)  { top: 42%; left: 2%;  animation-delay: 2.5s; }
.logo-dust i:nth-child(6)  { top: 58%; left: 96%; animation-delay: 0.4s; width: 5px; height: 5px; }
.logo-dust i:nth-child(7)  { top: 4%;  left: 46%; animation-delay: 1.6s; }
.logo-dust i:nth-child(8)  { top: 92%; left: 52%; animation-delay: 2.2s; width: 3px; height: 3px; }
.logo-dust i:nth-child(9)  { top: 30%; left: 64%; animation-delay: 3.0s; }
.logo-dust i:nth-child(10) { top: 66%; left: 32%; animation-delay: 3.6s; width: 3px; height: 3px; }

@keyframes fairyDustFloat {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.6);
  }
  15% {
    opacity: 1;
    transform: translate(2px, -6px) scale(1);
  }
  50% {
    opacity: 0.85;
    transform: translate(-4px, -18px) scale(0.9);
  }
  85% {
    opacity: 0.2;
    transform: translate(4px, -28px) scale(0.5);
  }
  100% {
    opacity: 0;
    transform: translate(0, -34px) scale(0.3);
  }
}

/* ============================================================
   SLOGAN
   ============================================================ */

.hero-slogan-wrap {
  position: relative;
  width: min(var(--cta-group-width), calc(100vw - 40px));
  max-width: var(--cta-group-width);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  overflow: visible;
  padding: 0 0 10px;
  margin-top: -16px;
  margin-bottom: clamp(30px, 3.5vh, 40px);
  cursor: default;
}

.hero-slogan-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 0;

  width: 96%;
  height: 96%;

  transform: translate(-50%, -50%);
  border-radius: 999px;
  pointer-events: none;

  /*
    Primera capa: oscurece suavemente el video detrás del slogan.
    Segunda capa: aporta un halo dorado uniforme, sin focos localizados.
  */
  background:
    radial-gradient(
      ellipse at center,
      rgba(7, 3, 12, 0.54) 0%,
      rgba(10, 4, 16, 0.38) 42%,
      rgba(10, 4, 16, 0.12) 68%,
      transparent 84%
    ),
    radial-gradient(
      ellipse at center,
      rgba(232, 194, 97, 0.08) 0%,
      rgba(232, 194, 97, 0.03) 46%,
      transparent 76%
    );

  filter: blur(18px);
  opacity: 1;
}
.hero-slogan {
  position: relative;
  z-index: 2;

  display: block;
  width: 100%;
  margin: 0;
  padding: 0 4px 8px;

  overflow: visible;

  font-family: var(--font-display);
  font-size: clamp(52px, 3.55vw, 64px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.012em;

  white-space: nowrap;
  text-align: center;

  background: linear-gradient(
    180deg,
    var(--gold-title-shine-1),
    var(--gold-title-shine-2) 55%,
    var(--gold-title-shine-3)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--gold-title);
  -webkit-text-fill-color: transparent;

  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.34),
    0 2px 0 rgba(113, 65, 16, 0.28),
    0 5px 14px rgba(0, 0, 0, 0.34),
    0 0 12px rgba(231, 181, 74, 0.10);

  /* Sin animación de entrada — el brillo queda asentado desde el
     principio, solo la respiración continua sigue en loop. */
  animation: sloganGlowBreathe 4s ease-in-out 0s infinite;

  transition:
    filter .35s ease,
    text-shadow .35s ease;
}

/* Salto de línea forzado para mobile (ver script.js) — oculto acá,
   habilitado dentro de @media (max-width: 700px). */
.slogan-break {
  display: none;
}

/* Cada palabra se devela por separado — pausado y con brillo propio */
.hero-slogan .word {
  display: inline-block;
  white-space: nowrap;

  color: #e4b64f;
  background:
    linear-gradient(
      180deg,
      #fff7d2 0%,
      #f8dc8a 22%,
      #e8b94f 48%,
      #c88b2f 74%,
      #8a5119 100%
    );

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  opacity: 0;
  filter: blur(8px) brightness(1) drop-shadow(0 0 0 rgba(255, 244, 205, 0));
  transform: translateY(10px) scale(0.92) rotate(-1deg);
  transform-origin: 50% 70%;

  animation: wordReveal 1s cubic-bezier(.25, .9, .3, 1) forwards;
  animation-delay: calc(var(--i, 0) * 0.24s + 1.3s);
}

@keyframes wordReveal {
  0% {
    opacity: 0;
    filter: blur(8px) brightness(1) drop-shadow(0 0 0 rgba(255, 244, 205, 0));
    transform: translateY(10px) scale(0.92) rotate(-1deg);
  }

  45% {
    opacity: 1;
    filter: blur(1.5px) brightness(1.55) drop-shadow(0 0 12px rgba(255, 244, 205, 0.55));
    transform: translateY(-1px) scale(1.03) rotate(0.4deg);
  }

  75% {
    opacity: 1;
    filter: blur(0) brightness(1.15) drop-shadow(0 0 6px rgba(240, 199, 94, 0.32));
    transform: translateY(0.5px) scale(0.995) rotate(-0.1deg);
  }

  100% {
    opacity: 1;
    filter: blur(0) brightness(1) drop-shadow(0 0 0 rgba(255, 244, 205, 0));
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

@keyframes sloganGlowBreathe {
  0%,
  100% {
    text-shadow:
      0 1px 0 rgba(255, 249, 220, 0.38),
      0 2px 0 rgba(121, 72, 18, 0.34),
      0 4px 12px rgba(0, 0, 0, 0.34),
      0 0 14px rgba(240, 199, 94, 0.16);
  }

  50% {
    text-shadow:
      0 1px 0 rgba(255, 249, 220, 0.56),
      0 2px 0 rgba(121, 72, 18, 0.34),
      0 4px 12px rgba(0, 0, 0, 0.34),
      0 0 30px rgba(240, 199, 94, 0.42);
  }
}

@keyframes sloganMaterialize {
  0% {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(14px);
    clip-path: inset(0 100% 0 0);
  }

  40% {
    opacity: 1;
    filter: blur(0);
    clip-path: inset(0 100% 0 0);
  }

  65% {
    opacity: 1;
    filter: blur(0);
    clip-path: inset(0 0 0 0);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes sloganSettleGlow {
  0% {
    text-shadow:
      0 1px 0 rgba(255, 249, 220, 0.30),
      0 2px 0 rgba(121, 72, 18, 0.28),
      0 4px 12px rgba(0, 0, 0, 0.34);
  }

  48% {
    text-shadow:
      0 1px 0 rgba(255, 249, 220, 0.50),
      0 2px 0 rgba(121, 72, 18, 0.34),
      0 4px 12px rgba(0, 0, 0, 0.34),
      0 0 20px rgba(240, 199, 94, 0.20);
  }

  100% {
    text-shadow:
      0 1px 0 rgba(255, 249, 220, 0.38),
      0 2px 0 rgba(121, 72, 18, 0.34),
      0 4px 12px rgba(0, 0, 0, 0.34);
  }
}

@keyframes sloganHaloReveal {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.92);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Chispas puntuales al develarse cada palabra */
.word-burst {
  position: absolute;
  z-index: 5;
  width: 5px;
  height: 5px;
  margin: -2.5px;
  border-radius: 50%;
  pointer-events: none;

  background: radial-gradient(circle, #fff8df 0%, #f4d98f 55%, transparent 100%);
  box-shadow: 0 0 8px 2px rgba(240, 217, 152, 0.8);

  opacity: 0;
  animation: wordBurstFly 0.65s ease-out forwards;
}

@keyframes wordBurstFly {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.4);
  }
  22% {
    opacity: 1;
    transform: translate(calc(var(--bx, 0px) * 0.35), calc(var(--by, 0px) * 0.35)) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--bx, 0px), var(--by, 0px)) scale(0.2);
  }
}

/* Sparkles */
.slogan-sparkles {
  position: absolute;
  inset: -26% -10% -30%;
  z-index: 3;
  pointer-events: none;
}

.slogan-sparkles i {
  position: absolute;
  width: 7px;
  height: 7px;
  opacity: 0;

  background:
    linear-gradient(90deg, transparent 44%, rgba(255, 249, 224, 0.95) 50%, transparent 56%),
    linear-gradient(180deg, transparent 44%, rgba(255, 249, 224, 0.95) 50%, transparent 56%),
    radial-gradient(circle, rgba(255, 240, 182, 0.95) 0%, rgba(230, 177, 68, 0.72) 36%, transparent 72%);

  filter:
    drop-shadow(0 0 3px rgba(255, 240, 182, 0.72))
    drop-shadow(0 0 7px rgba(216, 178, 92, 0.35));

  transform: scale(0.35) rotate(0deg);
  animation: sparkleSoft 4.8s ease-in-out infinite;
}

.slogan-sparkles i:nth-child(1)  { top: 2%;  left: 4%;  width: 6px; height: 6px; animation-delay: 1.2s; }
.slogan-sparkles i:nth-child(2)  { top: -6%; left: 22%; width: 5px; height: 5px; animation-delay: 1.85s; }
.slogan-sparkles i:nth-child(3)  { top: 4%;  left: 44%; width: 7px; height: 7px; animation-delay: 1.5s; }
.slogan-sparkles i:nth-child(4)  { top: -8%; left: 63%; width: 5px; height: 5px; animation-delay: 2.05s; }
.slogan-sparkles i:nth-child(5)  { top: 0%;  left: 82%; width: 6px; height: 6px; animation-delay: 1.35s; }
.slogan-sparkles i:nth-child(6)  { top: -4%; left: 96%; width: 6px; height: 6px; animation-delay: 2.35s; }
.slogan-sparkles i:nth-child(7)  { top: 96%; left: 10%; width: 5px; height: 5px; animation-delay: 1.65s; }
.slogan-sparkles i:nth-child(8)  { top: 100%; left: 30%; width: 6px; height: 6px; animation-delay: 2.55s; }
.slogan-sparkles i:nth-child(9)  { top: 94%; left: 50%; width: 7px; height: 7px; animation-delay: 1.75s; }
.slogan-sparkles i:nth-child(10) { top: 102%; left: 70%; width: 5px; height: 5px; animation-delay: 2.75s; }
.slogan-sparkles i:nth-child(11) { top: 92%; left: 90%; width: 6px; height: 6px; animation-delay: 2.15s; }
.slogan-sparkles i:nth-child(12) { top: 40%; left: -6%;  width: 5px; height: 5px; animation-delay: 2.9s; }
.slogan-sparkles i:nth-child(13) { top: 50%; left: 104%; width: 6px; height: 6px; animation-delay: 2.4s; }
.slogan-sparkles i:nth-child(14) { top: 20%; left: 50%;  width: 4px; height: 4px; animation-delay: 3.1s; }

@keyframes sparkleSoft {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.35) rotate(0deg);
  }

  18% {
    opacity: 0.92;
    transform: scale(1) rotate(18deg);
  }

  32% {
    opacity: 0;
    transform: scale(0.45) rotate(34deg);
  }
}

/* Shimmer corregido: más corto y nace fuera del texto */
.slogan-shimmer {
  position: absolute;
  top: 50%;
  left: -6%;
  z-index: 4;

  width: 14%;
  height: 2px;

  pointer-events: none;
  opacity: 0;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.92),
    rgba(255, 235, 165, 0.65),
    transparent
  );

  filter: blur(0.7px);
  mix-blend-mode: screen;

  transform:
    translateY(-50%)
    skewX(-22deg)
    translateX(-140%);

  animation: shimmerPolishedGold 4.6s ease-in-out 4.3s infinite;
}

@keyframes shimmerPolishedGold {
  0%,
  88%,
  100% {
    opacity: 0;
    transform:
      translateY(-50%)
      skewX(-22deg)
      translateX(-140%);
  }

  90% {
    opacity: 0.55;
  }

  95% {
    opacity: 0.55;
    transform:
      translateY(-50%)
      skewX(-22deg)
      translateX(760%);
  }

  97% {
    opacity: 0;
    transform:
      translateY(-50%)
      skewX(-22deg)
      translateX(800%);
  }
}

/* Hover del slogan */
.hero-slogan-wrap:hover .hero-slogan {
  filter: brightness(1.12) saturate(1.08);

  text-shadow:
    0 1px 0 rgba(255, 249, 220, 0.52),
    0 2px 0 rgba(121, 72, 18, 0.32),
    0 5px 14px rgba(0, 0, 0, 0.34),
    0 0 16px rgba(240, 199, 94, 0.18),
    0 0 30px rgba(216, 157, 63, 0.10);
}

.hero-slogan-wrap:hover .slogan-shimmer {
  animation: sloganHoverShine 0.9s ease-out 1;
}

.hero-slogan-wrap:hover .slogan-sparkles i {
  animation: sloganHoverSparkle 1.1s ease-out 1;
}

@keyframes sloganHoverShine {
  0% {
    opacity: 0;
    transform:
      translateY(-50%)
      skewX(-22deg)
      translateX(-140%);
  }

  20% {
    opacity: 0.62;
  }

  75% {
    opacity: 0.62;
    transform:
      translateY(-50%)
      skewX(-22deg)
      translateX(760%);
  }

  100% {
    opacity: 0;
    transform:
      translateY(-50%)
      skewX(-22deg)
      translateX(800%);
  }
}

@keyframes sloganHoverSparkle {
  0% {
    opacity: 0;
    transform: scale(0.35) rotate(0deg);
  }

  30% {
    opacity: 1;
    transform: scale(1) rotate(18deg);
  }

  100% {
    opacity: 0;
    transform: scale(0.4) rotate(44deg);
  }
}

/* ============================================================
   BOTONES
   ============================================================ */

.hero-ctas {
  width: min(var(--cta-group-width), calc(100vw - 40px));

  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;

  gap: var(--button-gap);
  margin-bottom: clamp(46px, 5vh, 58px);

  opacity: 1;
  transform: none;
}

@keyframes ctaReveal {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.magic-button {
  position: relative;
  display: block;

  width: var(--button-width);
  aspect-ratio: var(--button-ratio);
  flex: 0 0 var(--button-width);

  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;

  filter:
    drop-shadow(0 12px 22px rgba(0, 0, 0, 0.40))
    drop-shadow(0 22px 48px rgba(0, 0, 0, 0.22))
    drop-shadow(0 0 18px rgba(232, 201, 123, 0.12));

  transition:
    transform .35s cubic-bezier(.22, 1, .36, 1),
    filter .35s ease;

  animation: btnIdle 7s ease-in-out 4.9s infinite;
}

.magic-button--purple,
.magic-button--gold {
  aspect-ratio: var(--button-ratio);
}

.magic-button--gold {
  animation-delay: 8.3s;
}

.magic-button::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;

  width: 74%;
  height: 24px;

  transform: translateX(-50%);
  border-radius: 50%;

  background: radial-gradient(
    ellipse,
    rgba(0, 0, 0, 0.42),
    transparent 72%
  );

  filter: blur(10px);
  z-index: -1;
  pointer-events: none;
}

.magic-button::after {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 1;

  border-radius: 999px;
  pointer-events: none;

  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.16),
    rgba(255, 255, 255, 0) 42%
  );

  opacity: 0.55;
}

@keyframes btnIdle {
  0%,
  100% {
    transform: translateY(0);

    filter:
      drop-shadow(0 12px 22px rgba(0, 0, 0, 0.40))
      drop-shadow(0 22px 48px rgba(0, 0, 0, 0.22))
      drop-shadow(0 0 18px rgba(232, 201, 123, 0.12))
      brightness(1);
  }

  50% {
    transform: translateY(-2px);

    filter:
      drop-shadow(0 14px 26px rgba(0, 0, 0, 0.42))
      drop-shadow(0 25px 52px rgba(0, 0, 0, 0.24))
      drop-shadow(0 0 20px rgba(232, 201, 123, 0.14))
      brightness(1.02);
  }
}

.magic-button:hover {
  animation: none;

  transform:
    translateY(-4px)
    scale(1.015);

  filter:
    drop-shadow(0 18px 34px rgba(0, 0, 0, 0.45))
    drop-shadow(0 36px 70px rgba(0, 0, 0, 0.30))
    drop-shadow(0 0 26px rgba(232, 201, 123, 0.22))
    brightness(1.05);
}

.magic-button__frame {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  display: block;
  object-fit: fill;
  pointer-events: none;
}

.magic-button__content {
  position: absolute;
  inset: 0;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;
  padding: 0 32px;
}

.magic-button__icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1.5px solid var(--ivory);
  border-radius: 50%;
  background: transparent;
}

.magic-button__icon svg {
  width: 16px;
  height: 16px;
  color: var(--ivory);
}

.magic-button__label {
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: clamp(19px, 1.45vw, 22px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ============================================================
   PORTAL + REDES
   ============================================================ */

.hero-follow {
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;

  margin-bottom: 0;
}

.follow-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  opacity: 1;
  transform: none;
}

.follow-line {
  width: clamp(60px, 7.6vw, 100px);
  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(216, 178, 92, 0.4)
  );
}

.follow-divider .follow-line:last-child {
  background: linear-gradient(
    270deg,
    transparent,
    rgba(216, 178, 92, 0.4)
  );
}

.follow-diamond {
  width: 7px;
  height: 7px;
  flex-shrink: 0;

  transform: rotate(45deg);

  border: 1px solid var(--gold);
  background: var(--gold-light);

  animation: diamondPulse 5.5s ease-in-out 5.6s infinite;
}

@keyframes diamondPulse {
  0%,
  100% {
    transform: rotate(45deg) scale(1);
    box-shadow: 0 0 0 rgba(240, 217, 152, 0);
  }

  8% {
    transform: rotate(45deg) scale(1.15);
    box-shadow: 0 0 11px rgba(240, 217, 152, 0.5);
  }

  20% {
    transform: rotate(45deg) scale(1);
    box-shadow: 0 0 0 rgba(240, 217, 152, 0);
  }
}

.follow-title {
  margin-top: 15px;

  color: var(--gold-title);
  font-family: var(--font-ui);
  font-size: clamp(17px, 1.27vw, 19.5px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.3em;
  text-transform: uppercase;

  text-shadow: 0 0 16px rgba(232, 201, 123, 0.35);

  opacity: 1;
  transform: none;
}

.follow-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  margin-top: clamp(24px, 2.8vh, 34px);
  gap: clamp(34px, 3.8vw, 44px);
  row-gap: 20px;
}

.follow-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;

  color: var(--gold-light);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;

  opacity: 1;
  transform: none;
  filter: blur(0);
}

@keyframes linkReveal {
  from {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(3px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.social-circle {
  position: relative;
  width: 58px;
  height: 58px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  border: 1.5px solid transparent;

  background:
    radial-gradient(circle at 33% 26%, rgba(255, 255, 255, 0.14), transparent 38%) padding-box,
    radial-gradient(circle at 68% 78%, rgba(0, 0, 0, 0.32), transparent 55%) padding-box,
    linear-gradient(160deg, #241333, #1b0f2e 60%) padding-box,
    conic-gradient(
      from 210deg,
      #d6af55,
      #f5d88e,
      #e8c97b,
      #8a6a1f,
      #e8c97b,
      #f5d88e,
      #d6af55
    ) border-box;

  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.4),
    0 0 16px rgba(232, 201, 123, 0.16);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.social-circle::after {
  content: "";
  position: absolute;
  inset: 4px;

  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);

  pointer-events: none;
}

.social-circle::before {
  content: "";
  position: absolute;
  inset: -1.5px;

  border-radius: 50%;

  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 250, 235, 0.95) 10deg,
    transparent 26deg,
    transparent 360deg
  );

  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));

  opacity: 0;
  pointer-events: none;

  animation: ringSweep 6s ease-in-out infinite;
}

.follow-link:nth-child(3) .social-circle::before { animation-delay: 2s; }
.follow-link:nth-child(5) .social-circle::before { animation-delay: 4s; }

@keyframes ringSweep {
  0%,
  85%,
  100% {
    opacity: 0;
    transform: rotate(0deg);
  }

  87% {
    opacity: 1;
  }

  97% {
    opacity: 1;
    transform: rotate(360deg);
  }
}

.social-circle svg {
  position: relative;
  width: 25px;
  height: 25px;

  color: #f5d88e;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

.follow-link:nth-child(3) .social-circle svg {
  width: 22px;
  height: 22px;
}

.follow-name {
  opacity: 0.85;
  transition: opacity 0.25s ease;
}

.follow-link:hover .social-circle {
  transform: translateY(-3px) scale(1.04);

  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.42),
    0 0 22px rgba(232, 201, 123, 0.3);
}

.follow-link:hover .follow-name {
  opacity: 1;
}

.follow-sep {
  width: 1px;
  height: 54px;
  flex-shrink: 0;

  background: linear-gradient(
    180deg,
    transparent,
    rgba(232, 201, 123, 0.55) 50%,
    transparent
  );

  opacity: 1;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   SUSCRIPCIÓN
   ============================================================ */

.hero-newsletter {
  /* Única fuente de verdad para el ancho del formulario: el subtítulo
     usa la misma variable para arrancar y terminar exactamente donde
     arranca el placeholder y termina la flechita. */
  --newsletter-form-width: 380px;

  width: min(720px, calc(100vw - 48px));

  display: flex;
  flex-direction: column;
  align-items: center;

  margin-top: clamp(24px, 3vh, 32px);
  margin-bottom: clamp(24px, 2.8vh, 32px);

  opacity: 1;
  transform: none;
}

.hero-newsletter .follow-divider {
  margin-bottom: clamp(28px, 3vh, 42px);
}

.newsletter-title {
  margin: 0 0 14px;

  color: var(--gold-title);
  font-family: var(--font-ui);
  font-size: clamp(10px, 0.8vw, 12px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}

.newsletter-title-break {
  display: none;
}

.newsletter-title-break2 {
  display: none;
}

/* Una sola línea siempre, sin scroll: el contenedor completo de
   hero-newsletter (no el ancho más angosto del formulario) le da
   lugar de sobra en desktop/tablet; en mobile el tamaño se achica
   con el viewport (ver @media max-width:700px) para que nunca
   necesite más ancho del que hay disponible. */
.newsletter-text {
  width: 100%;
  margin: 0 auto 10px;

  color: var(--ivory);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
}

.newsletter-form {
  width: 100%;
  max-width: var(--newsletter-form-width);

  display: flex;
  align-items: center;
  gap: 10px;
}

.newsletter-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;

  padding: 0 18px;
  border: 1px solid rgba(216, 178, 92, 0.35);
  border-radius: 999px;
  background: rgba(124, 86, 199, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  color: var(--ivory);
  font-family: var(--font-ui);
  font-size: 13px;
  text-align: center;

  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.newsletter-input::placeholder {
  color: var(--ivory);
  opacity: 0.5;
}

.newsletter-input:focus {
  outline: none;
  border-color: rgba(240, 217, 152, 0.85);
  background: rgba(124, 86, 199, 0.32);
}

/* El navegador pinta el fondo del autocompletado blanco/amarillo por
   default; lo forzamos a un violeta sólido cercano al del campo (el
   blur no se puede replicar dentro del box-shadow del autofill). */
.newsletter-input:-webkit-autofill,
.newsletter-input:-webkit-autofill:hover,
.newsletter-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ivory);
  -webkit-box-shadow: 0 0 0 1000px #3a2159 inset;
  box-shadow: 0 0 0 1000px #3a2159 inset;
  caret-color: var(--ivory);
  transition: background-color 0s 600000s, color 0s 600000s;
}

.newsletter-status {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-left: -4px;
  pointer-events: none;
}

.newsletter-check,
.newsletter-cross {
  position: absolute;
  inset: 0;
  width: 18px;
  height: 18px;

  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.newsletter-check {
  color: #5fd48a;
}

.newsletter-cross {
  color: #e8747a;
}

.newsletter-form.is-valid .newsletter-check,
.newsletter-form.is-invalid .newsletter-cross {
  opacity: 1;
  transform: scale(1);
}

.newsletter-button {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;

  padding: 11px;
  border: 1px solid rgba(216, 178, 92, 0.35);
  border-radius: 50%;
  background: rgba(124, 86, 199, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  color: var(--gold);
  cursor: pointer;

  transition: transform 0.25s ease, color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

.newsletter-button svg {
  width: 100%;
  height: 100%;
}

.newsletter-button:hover {
  color: var(--gold-light);
  background: rgba(124, 86, 199, 0.32);
  transform: translateX(3px);
}

.newsletter-feedback {
  min-height: 1.4em;
  margin: 10px 0 0;

  color: var(--gold-light);
  font-family: var(--font-ui);
  font-size: 12.5px;
}

.newsletter-feedback[data-state="error"] {
  color: #e8a2a2;
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;

  margin-top: 0;

  opacity: 1;
  transform: none;
}

/* Línea divisoria dorada finita */
.footer-rule {
  width: min(var(--cta-group-width), calc(100vw - 40px));
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(216, 178, 92, 0.45) 20%,
    rgba(216, 178, 92, 0.45) 80%,
    transparent
  );
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* El de Records queda como referencia de tamaño (altura base); el de
   TV, al ser más "cuadrado" (relación de aspecto bien distinta:
   ancho/alto ~2.47 contra ~3.64 del de Records), se agranda un poco
   más en altura para que su ANCHO renderizado termine igualando al
   de Records — así se ven parejos en tamaño real, no solo alineados
   por la línea de base. Opacidad más alta para que ambos se noten
   bien sobre el violeta oscuro. */
.footer-logo {
  width: auto;
  height: clamp(24px, 2.2vw, 30px);
  opacity: 0.95;
  filter: drop-shadow(0 0 10px rgba(232, 201, 123, 0.12));
}

.footer-logo-tv {
  width: auto;
  height: calc(clamp(24px, 2.2vw, 30px) * 1.68);
  opacity: 0.95;
  filter: drop-shadow(0 0 10px rgba(232, 201, 123, 0.12));
  /* El archivo de Babidibu TV tiene mucho más aire vacío arriba (el
     ícono de tele sobresale por encima de las letras) que el de
     Records (donde "BABIDIBU" arranca pegado al borde superior de la
     imagen) — al centrar ambas cajas verticalmente, el TEXTO de TV
     queda más abajo que el de Records. translateY en % se recalcula
     solo con la propia altura del logo, así que este mismo ajuste
     sirve en cualquier tamaño (mobile, tablet, desktop) sin tener que
     repetirlo por breakpoint. */
  transform: translateY(-16%);
}

.footer-text {
  color: var(--muted, #b3a4cc);
  font-family: var(--font-ui);
  font-size: clamp(10px, 1vw, 12px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* Desktop: texto pegado a la izquierda, logo pegado a la derecha, a lo ancho */
@media (min-width: 901px) {
  .footer-rule {
    width: 100%;
  }

  .footer-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
}

/* ============================================================
   RESPONSIVE DEFINITIVO
   Un solo bloque por breakpoint. No agregar overrides debajo.
   ============================================================ */

/* ---------------- DESKTOP ---------------- */
/*
  Arquitectura base sin scroll:
  logo / título / botones / espacio / redes / espacio / suscripción / espacio / footer

  El espacio sobrante se reparte entre TRES huecos flexibles (antes de
  redes, antes de suscripción, antes del footer) en vez de uno solo:
  cada hueco tiene su propio piso (igual que antes, no encoge de más en
  pantallas bajas) y su propio techo (no crece sin límite en pantallas
  muy altas), así el aire queda repartido sea cual sea el alto real.
  No hay footer absoluto, translateY ni breakpoints por altura.
*/
@media (min-width: 901px) {
  :root {
    --button-width: clamp(320px, min(24vw, 42dvh), 440px);
    --button-gap: clamp(16px, 1.4vw, 22px);
    --cta-group-width: calc((var(--button-width) * 2) + var(--button-gap));
  }

  .hero {
    height: 100vh;
    height: 100dvh;
    min-height: 100svh;
    overflow-x: hidden;
    overflow-y: hidden;
    align-items: stretch;
  }

  .hero-content {
    box-sizing: border-box;
    width: 100%;
    max-width: 1180px;
    height: 100vh;
    height: 100dvh;
    min-height: 100svh;

    /* El espacio sobrante en pantallas muy altas se reparte entre TRES
       huecos flexibles (antes de redes, antes de suscripción y antes
       del footer) en vez de concentrarse en uno solo: así ningún hueco
       puede volverse desproporcionado sea cual sea el alto de pantalla. */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows:
      auto
      auto
      auto
      minmax(clamp(14px, 2.4dvh, 42px), clamp(28px, 5dvh, 70px))
      auto
      minmax(6px, clamp(6px, 3dvh, 64px))
      auto
      minmax(0px, clamp(0px, 1dvh, 20px))
      auto;

    align-items: center;
    justify-items: center;

    padding:
      clamp(8px, 1.5dvh, 24px)
      20px
      clamp(6px, 1.2dvh, 18px);

    transform: none;
  }

  .logo-wrap,
  .hero-slogan-wrap,
  .hero-ctas,
  .hero-follow,
  .hero-newsletter,
  .site-footer {
    grid-column: 1;
    margin-left: 0;
    margin-right: 0;
  }

  .logo-wrap {
    grid-row: 1;
  }

  .hero-logo {
    width: clamp(250px, min(24vw, 25dvh), 400px);
    margin: 0 0 clamp(12px, 1.8dvh, 22px);
  }

  .hero-slogan-wrap {
    grid-row: 2;
    width: min(var(--cta-group-width), calc(100vw - 40px));
    max-width: var(--cta-group-width);
    margin: 0 0 clamp(16px, 2.2dvh, 28px);
    padding: 0;
    container-type: inline-size;
  }

  .hero-slogan {
    width: 100%;
    font-size: clamp(38px, 6.75cqi, 64px);
    line-height: 1;
    letter-spacing: -0.035em;
    white-space: nowrap;
    text-align: center;
  }

  .hero-ctas {
    grid-row: 3;
    margin: 0;
  }

  /* Botón dorado:
     conserva el mismo tamaño exterior, tipografía e icono que el violeta.
     Solo se compacta el espacio interno para que el texto entre con aire. */
  .magic-button--gold .magic-button__content {
    justify-content: center;
    gap: 8px;
    padding-inline: 18px;
}
.hero-follow {
    grid-row: 5;
    width: 100%;
    margin: 0;
  }

  .follow-title {
    margin-top: clamp(22px, 2.8dvh, 30px);
  }

  .follow-links {
    margin-top: clamp(30px, 3.5dvh, 40px);
  }

  .social-circle {
    width: clamp(48px, 5.4dvh, 58px);
    height: clamp(48px, 5.4dvh, 58px);
  }

  .social-circle svg {
    width: clamp(21px, 2.4dvh, 25px);
    height: clamp(21px, 2.4dvh, 25px);
  }

  .follow-link:nth-child(3) .social-circle svg {
    width: clamp(18px, 2.1dvh, 22px);
    height: clamp(18px, 2.1dvh, 22px);
  }

  .follow-sep {
    height: clamp(44px, 5dvh, 54px);
  }

  .hero-newsletter {
    grid-row: 7;
    width: min(720px, calc(100vw - 48px));
    margin-top: clamp(14px, 1.8dvh, 22px);
    margin-bottom: clamp(14px, 1.8dvh, 22px);
  }

  .hero-newsletter .follow-divider {
    position: relative;
    top: -10px;
    margin-bottom: clamp(8px, 1.4dvh, 24px);
  }

  .newsletter-title {
    margin-bottom: clamp(8px, 1.2dvh, 20px);
  }

  .newsletter-text {
    margin: 0 auto clamp(6px, 1dvh, 16px);
  }

  .site-footer {
    grid-row: 9;
    position: static;
    inset: auto;
    width: 100%;
    margin: 0;
    gap: clamp(4px, 0.6dvh, 12px);
  }

  .footer-rule {
    width: 100%;
  }

  .footer-inner {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}


/* ---------------- TABLET / IPAD ---------------- */
/*
  ARQUITECTURA FINAL PARA IPAD

  En tablet no conviene concentrar todo arriba ni dejar un único hueco central.
  Los cinco bloques principales se distribuyen con space-between:

  logo / slogan / botones / redes / footer

  Así el aire vertical queda repartido de forma uniforme en cualquier iPad.
  No se usan translateY, top, footer absoluto ni filas 1fr.
*/
@media
  (min-width: 701px) and (max-width: 1024px),
  (min-width: 1025px) and (max-width: 1366px) and (orientation: landscape) and (pointer: coarse) {

  :root {
    --button-width: clamp(278px, min(36vw, 36dvh), 348px);
    --button-gap: clamp(14px, 2vw, 22px);
    --cta-group-width: calc((var(--button-width) * 2) + var(--button-gap));
  }

  html,
  body {
    height: 100%;
    overscroll-behavior: none;
  }

  .hero {
    height: 100vh;
    height: 100dvh;
    min-height: 100svh;
    overflow-x: hidden;
    overflow-y: auto;
    align-items: stretch;
  }

  .hero-content {
    box-sizing: border-box;
    width: 100%;
    max-width: 1180px;
    height: 100vh;
    height: 100dvh;
    min-height: 100svh;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    padding:
      max(24px, env(safe-area-inset-top))
      clamp(22px, 4vw, 52px)
      max(18px, env(safe-area-inset-bottom));

    transform: none;
  }

  .logo-wrap,
  .hero-slogan-wrap,
  .hero-ctas,
  .hero-follow,
  .site-footer {
    flex: 0 0 auto;
    margin: 0;
  }

  .logo-wrap {
    padding: 0;
  }

  .hero-logo {
    width: clamp(250px, min(34vw, 25dvh), 350px);
    height: auto;
    margin: 0;
  }

  .hero-slogan-wrap {
    width: min(760px, calc(100vw - 56px));
    max-width: 760px;
    padding: 0;
  }

  .hero-slogan {
    width: 100%;
    font-size: clamp(50px, min(6.2vw, 6.4dvh), 72px);
    line-height: 1;
    letter-spacing: -0.025em;
    white-space: normal;
    text-wrap: balance;
    text-align: center;
  }

  .slogan-break {
    display: block;
  }

  .hero-ctas {
    width: min(var(--cta-group-width), calc(100vw - 48px));
    animation-delay: 1.25s;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: var(--button-gap);
  }

  .hero-follow {
    width: 100%;
  }

  .follow-title {
    margin-top: clamp(12px, 1.4dvh, 18px);
    font-size: clamp(18px, 2.25vw, 22px);
    letter-spacing: 0.26em;
  }

  .follow-links {
    margin-top: clamp(20px, 2.4dvh, 30px);
    gap: clamp(34px, 4.5vw, 50px);
    row-gap: 0;
  }

  .social-circle {
    width: clamp(58px, 6.6vw, 66px);
    height: clamp(58px, 6.6vw, 66px);
  }

  .social-circle svg {
    width: clamp(25px, 2.8vw, 29px);
    height: clamp(25px, 2.8vw, 29px);
  }

  .follow-link:nth-child(3) .social-circle svg {
    width: clamp(22px, 2.5vw, 26px);
    height: clamp(22px, 2.5vw, 26px);
  }

  .follow-name {
    font-size: clamp(15px, 1.7vw, 17px);
  }

  .follow-sep {
    height: clamp(52px, 5.8vw, 62px);
  }

  .newsletter-title {
    font-size: clamp(15px, 1.8vw, 19px);
  }

  .newsletter-text {
    font-size: clamp(14px, 1.5vw, 16px);
    margin: 0 auto 24px;
  }

  .site-footer {
    position: relative;
    inset: auto;
    width: 100%;
    gap: clamp(8px, 1dvh, 12px);
  }

  .footer-rule,
  .footer-inner {
    width: min(760px, calc(100vw - 56px));
  }

  .footer-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}


/* iPad mini — 768 × 1024 */
@media (min-width: 701px) and (max-width: 799px) and (orientation: portrait) {
  :root {
    --button-width: clamp(365px, 49.7vw, 386px);
    --button-gap: 14px;
  }

  .hero-content {
    padding:
      max(18px, env(safe-area-inset-top))
      18px
      max(40px, env(safe-area-inset-bottom));
  }

  .logo-wrap {
    padding-top: clamp(30px, calc(3dvh + 10px), 40px);
  }

  .hero-logo {
    width: clamp(230px, min(34vw, 23dvh), 270px);
  }

  .hero-slogan-wrap {
    width: min(620px, calc(100vw - 36px));
    margin-top: -14px;
    margin-bottom: clamp(27px, 3.1dvh, 36px);
  }

  .hero-slogan {
    font-size: clamp(62px, min(9.6vw, 9.4dvh), 79px);
  }

  .hero-ctas {
    flex-direction: column;
    animation-delay: 2.2s;
  }

  .magic-button {
    flex: 0 0 auto;
  }

  .magic-button__icon {
    width: 41px;
    height: 41px;
    flex: 0 0 41px;
  }

  .magic-button__icon svg {
    width: 18px;
    height: 18px;
  }

  .magic-button__label {
    font-size: 24px;
  }

  .follow-links {
    margin-top: clamp(14px, 1.8dvh, 22px);
  }

  .social-circle {
    width: 74px;
    height: 74px;
  }

  .social-circle svg {
    width: 33px;
    height: 33px;
  }

  .follow-link:nth-child(3) .social-circle svg {
    width: 29px;
    height: 29px;
  }

  .follow-title {
    font-size: 21px;
  }

  .follow-name {
    font-size: 17px;
  }

  .follow-sep {
    height: 50px;
  }
}


/* iPad Air — 820 × 1180 */
@media (min-width: 800px) and (max-width: 899px) and (orientation: portrait) {
  :root {
    --button-width: clamp(392px, 49vw, 420px);
  }

  .hero-content {
    padding-bottom: max(40px, env(safe-area-inset-bottom));
  }

  .logo-wrap {
    padding-top: clamp(30px, calc(3dvh + 10px), 40px);
  }

  .hero-logo {
    width: clamp(265px, min(33vw, 24dvh), 310px);
  }

  .hero-slogan {
    font-size: clamp(62px, min(7.2vw, 7.1dvh), 74px);
  }

  .hero-ctas {
    flex-direction: column;
    animation-delay: 2.2s;
  }

  .magic-button {
    flex: 0 0 auto;
  }

  .magic-button__icon {
    width: 41px;
    height: 41px;
    flex: 0 0 41px;
  }

  .magic-button__icon svg {
    width: 18px;
    height: 18px;
  }

  .magic-button__label {
    font-size: 24px;
  }

  .social-circle {
    width: 64px;
    height: 64px;
  }

  .social-circle svg {
    width: 28px;
    height: 28px;
  }

  .follow-link:nth-child(3) .social-circle svg {
    width: 24px;
    height: 24px;
  }
}


/* iPad Pro — 1024 × 1366 */
@media (min-width: 900px) and (max-width: 1024px) and (orientation: portrait) {
  :root {
    --button-width: clamp(436px, 45.6vw, 467px);
    --button-gap: clamp(18px, 2vw, 22px);
  }

  .hero-content {
    padding:
      max(30px, env(safe-area-inset-top))
      30px
      max(48px, env(safe-area-inset-bottom));
  }

  .logo-wrap {
    padding-top: clamp(30px, calc(3dvh + 10px), 40px);
  }

  .hero-logo {
    width: clamp(310px, 34vw, 348px);
  }

  .hero-slogan-wrap {
    width: min(760px, calc(100vw - 72px));
  }

  .hero-slogan {
    font-size: clamp(76px, 8.1vw, 85px);
    line-height: 0.98;
  }

  .hero-ctas {
    flex-direction: column;
    animation-delay: 2.2s;
  }

  .magic-button {
    flex: 0 0 auto;
  }

  .magic-button__icon {
    width: 41px;
    height: 41px;
    flex: 0 0 41px;
  }

  .magic-button__icon svg {
    width: 18px;
    height: 18px;
  }

  .magic-button__label {
    font-size: 24px;
  }

  .follow-title {
    font-size: 24px;
  }

  .social-circle {
    width: 73px;
    height: 73px;
  }

  .social-circle svg {
    width: 32px;
    height: 32px;
  }

  .follow-link:nth-child(3) .social-circle svg {
    width: 29px;
    height: 29px;
  }

  .follow-name {
    font-size: 17px;
  }

  .follow-sep {
    height: 60px;
  }
}


/* iPad horizontal */
@media
  (min-width: 701px) and (max-width: 1366px)
  and (orientation: landscape)
  and (max-height: 1024px)
  and (pointer: coarse) {

  :root {
    --button-width: clamp(248px, min(29vw, 35dvh), 322px);
    --button-gap: clamp(14px, 1.8vw, 20px);
  }

  .hero-content {
    padding:
      max(14px, env(safe-area-inset-top))
      clamp(24px, 4vw, 52px)
      max(12px, env(safe-area-inset-bottom));
  }

  .hero-logo {
    width: clamp(205px, min(23vw, 24dvh), 270px);
  }

  .hero-slogan-wrap {
    width: min(700px, calc(100vw - 48px));
  }

  .hero-slogan {
    font-size: clamp(40px, min(4.7vw, 5.9dvh), 56px);
  }

  .follow-title {
    margin-top: 9px;
  }

  .follow-links {
    margin-top: clamp(12px, 1.8dvh, 20px);
  }

  .social-circle {
    width: 52px;
    height: 52px;
  }

  .follow-title {
    font-size: 17px;
  }

  .follow-name {
    font-size: 14px;
  }

  .follow-sep {
    height: 46px;
  }

  .footer-logo {
    width: auto;
    height: 24px;
  }

  .footer-logo-tv {
    width: auto;
    height: calc(24px * 1.68);
  }
}


/* ---------------- MOBILE ---------------- */
/* Arquitectura: 5 grupos de alto natural (auto) + 4 separadores fluidos
   (fr) que absorben el espacio sobrante de 100dvh. Sin porcentajes
   rígidos por elemento, sin position:absolute, sin overflow oculto. */
@media (max-width: 700px) {
  :root {
    /* En mobile los botones van apilados (no en fila), así que el ancho
       "del grupo de CTAs" pasa a ser simplemente el ancho de un botón.
       Una sola fórmula: todo lo que depende de --cta-group-width
       (hero-slogan, hero-slogan-wrap, hero-ctas, footer-rule) se ajusta
       solo al redefinir esta variable, sin declarar anchos aparte. */
    --button-width: clamp(240px, min(78vw, 44dvh), 320px);
    --button-gap: clamp(8px, 1.8dvh, 16px);
    --cta-group-width: var(--button-width);
  }

  html, body {
    height: 100%;
    overscroll-behavior: none;
    /* Sin overflow:hidden: si algo no entrara, se puede hacer scroll
       en vez de recortar contenido en silencio. */
  }

  .hero {
    height: 100vh;
    height: 100dvh;
    min-height: 100svh;
    overflow-x: hidden;
    overflow-y: auto;
    align-items: stretch;
  }

  .hero-content {
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 100svh;

    /* El padding entra en la caja (border-box): el Grid de abajo reparte
       únicamente el área interior que queda después de restar el
       safe-area y estos 16px laterales, no los 100dvh completos. */
    padding:
      max(6px, env(safe-area-inset-top)) 16px
      max(8px, env(safe-area-inset-bottom));

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows:
      auto    /* 1: logo-wrap */
      0.05fr  /* 2: separador logo → título */
      auto    /* 3: hero-slogan-wrap */
      0.02fr  /* 4: separador título → botones — reducido para subir todo el bloque inferior */
      auto    /* 5: hero-ctas */
      0.20fr  /* 6: separador botones → portal social — reducido para subir el bloque de redes */
      auto    /* 7: hero-follow */
      0.45fr  /* 8: separador portal → suscripción */
      auto    /* 9: hero-newsletter */
      0.5fr   /* 10: separador suscripción → footer */
      auto    /* 11: site-footer */
      0.45fr; /* 12: aire inferior — fila propia, el footer ya no ancla al borde */

    align-items: center;
    justify-items: center;

    transform: none;
  }

  /* --------------------------------------------------------
     Resets de márgenes/padding heredados: el Grid es el único que
     gobierna la separación ENTRE los 5 grupos. Las separaciones
     DENTRO de cada grupo (p. ej. entre el título "portal mágico" y
     los íconos) se declaran explícitas más abajo, fluidas — nunca
     como márgenes compensatorios recuperando espacio externo.
     -------------------------------------------------------- */
  .logo-wrap,
  .hero-slogan-wrap,
  .hero-ctas,
  .hero-follow,
  .hero-newsletter,
  .site-footer {
    grid-column: 1;
    margin: 0;
  }

  .hero-logo { margin: 0; }
  .hero-slogan-wrap { padding: 0; }

  /* Logo: baja ~20px dentro de la fila 1 (padding en el contenedor,
     no margin en el logo). Es seguro: la fila 1 no tiene vecinos con
     contenido de los que "robar" espacio, así que no genera overlap. */
  .logo-wrap {
    /* Mobile: sube todo el bloque ~24-40px para ganar aire abajo. */
    padding-top: clamp(58px, calc(12dvh - 32px), 88px);
  }

  .logo-wrap        { grid-row: 1; }
  .hero-slogan-wrap { grid-row: 3; width: 100%; max-width: 100%; }
  .hero-ctas        { grid-row: 5; width: 100%; max-width: 100%; }
  .hero-follow      { grid-row: 7; width: 100%; max-width: 100%; }
  .hero-newsletter  { grid-row: 9; width: 100%; max-width: 100%; --newsletter-form-width: min(300px, 100%); }
  .site-footer      { grid-row: 11; width: 100%; max-width: 100%; position: static; }

  .newsletter-title {
    white-space: normal;
    font-size: clamp(11px, 3.4vw, 13px);
  }

  .newsletter-title-break {
    display: block;
  }

  /* Solo en mobile: dos líneas en vez de una sola achicada, con un
     tamaño de letra más cómodo de leer. */
  .newsletter-text {
    width: 100%;
    max-width: var(--newsletter-form-width);
    margin: 0 auto 20px;
    white-space: normal;
    font-size: clamp(12px, 3.2vw, 15px);
    text-wrap: balance;
  }

  /* --------------------------------------------------------
     Botones: apilados, el ancho real lo pone --button-width en
     .magic-button (regla base, sin redeclarar la fórmula acá).
     -------------------------------------------------------- */
  .hero-ctas {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--button-gap);
    justify-items: center;
  }

  .magic-button__content {
    gap: 8px;
    padding: 0 20px;
  }

  .magic-button__icon {
    width: clamp(26px, 8vw, 32px);
    height: clamp(26px, 8vw, 32px);
    flex-basis: clamp(26px, 8vw, 32px);
  }

  .magic-button__icon svg {
    width: clamp(12px, 4vw, 14px);
    height: clamp(12px, 4vw, 14px);
  }

  .magic-button__label {
    font-size: clamp(14px, 4.2vw, 17px);
  }

  /* --------------------------------------------------------
     Logo y título: tamaño fluido dependiente del lado más chico
     entre ancho y alto (min(vw,dvh)) — así responden igual en un
     celular angosto-y-alto que en uno ancho-y-bajo (ej. Duo).
     -------------------------------------------------------- */
  .hero-logo {
    /* Mobile: ~10% más chico para ganar aire vertical. */
    width: clamp(174px, min(47.3vw, 24.8dvh), 273px);
  }

  .hero-slogan {
    font-size: clamp(26px, min(9vw, 5.2dvh), 34px);
    line-height: 1.1;
  }

  /* Salto de línea explícito (ver script.js): garantiza 2 líneas sin
     depender de que el ancho/fuente calcen justo. Oculto en desktop. */
  .slogan-break {
    display: inline;
  }

  /* --------------------------------------------------------
     Portal mágico + redes: separaciones internas fluidas, propias
     del grupo (no recuperan espacio externo del Grid).
     -------------------------------------------------------- */
  .follow-title {
    margin-top: clamp(8px, 1.6dvh, 16px);
    font-size: clamp(11px, 3vw, 13px);
  }

  .follow-links {
    margin-top: clamp(14px, 2.4dvh, 24px);
    gap: 22px;
    row-gap: 0;
  }

  .follow-name {
    display: none;
  }

  .social-circle {
    width: clamp(44px, 12vw, 54px);
    height: clamp(44px, 12vw, 54px);
  }

  .follow-link {
    /* Área táctil mínima de 44px en el link, no en el círculo visible. */
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }

  .follow-sep {
    height: clamp(30px, 6dvh, 46px);
  }

  .footer-rule {
    display: none;
  }

  .footer-inner {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }

  .footer-text {
    flex-basis: 100%;
    text-align: center;
  }

  .footer-logo {
    width: auto;
    height: 20px;
  }

  .footer-logo-tv {
    width: auto;
    height: calc(20px * 1.68);
  }

  /* --------------------------------------------------------
     Sin animación de entrada para logo/botones/portal/redes/footer:
     aparecen al instante al abrir el link. El título letra por letra
     y sus destellos flotantes NO se tocan (siguen animados).
     El logo conserva solo el brillo ambiente; los botones, el
     balanceo ambiente — ninguno de los dos interfiere con el layout
     porque no mueven tamaño/posición del elemento, solo filter/transform
     de baja amplitud sobre su propio eje.
     -------------------------------------------------------- */
  .hero-logo,
  .hero-ctas,
  .magic-button,
  .follow-divider,
  .follow-title,
  .follow-link,
  .follow-sep,
  .site-footer {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .hero-ctas,
  .follow-divider,
  .follow-title,
  .follow-link,
  .follow-sep,
  .site-footer {
    animation: none;
  }

  .hero-logo {
    animation: logoGlowPulse 3.6s ease-in-out 0s infinite;
  }

  .magic-button,
  .magic-button--gold {
    animation: btnIdle 7s ease-in-out 0s infinite;
  }

  /* Mobile: eliminar la línea divisoria entre redes y newsletter */
  .hero-newsletter .follow-divider{
    display:none;
  }

}


/* ============================================================
   ACCESIBILIDAD
   ============================================================ */

@media (hover: none) {
  .hero-slogan-wrap:hover .hero-slogan {
    filter: none;
  }

  .hero-slogan-wrap:hover .slogan-shimmer,
  .hero-slogan-wrap:hover .slogan-sparkles i {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-glow,
  .hero-logo,
  .hero-slogan,
  .hero-slogan-wrap::before,
  .hero-ctas,
  .magic-button,
  .follow-divider,
  .follow-title,
  .follow-link,
  .follow-sep,
  .follow-diamond,
  .hero-newsletter,
  .hero-particles i {
    animation: none !important;
  }

  .hero-logo,
  .hero-slogan,
  .hero-ctas,
  .follow-divider,
  .follow-title,
  .follow-link,
  .follow-sep,
  .hero-newsletter {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .slogan-sparkles,
  .slogan-shimmer,
  .hero-particles {
    display: none !important;
  }
}

/* ============================================================
   AJUSTE FINAL: SIN BRILLO FIJO SOBRE EL SLOGAN
   ============================================================ */

.slogan-shimmer {
  animation: shimmerPolishedGold 4.6s ease-in-out 4.3s infinite;
}

@media (hover: hover) and (pointer: fine) {
  .hero-slogan-wrap:hover .slogan-shimmer {
    animation: sloganHoverShine 0.9s ease-out 1;
  }
}

.magic-button--gold .magic-button__label {
    letter-spacing: 0.01em;
}
/* ==========================================================
   AJUSTE EXCLUSIVO · VIEWPORTS BAJOS (400x700 aprox.)
   No afecta iPhone 12, Pixel 7, Samsung A7, etc.
   ========================================================== */

@media (max-width: 430px) and (max-height: 720px) {

  /* Más aire entre redes y newsletter */
  .hero-newsletter{
    margin-top: 20px;
  }

  /* Separa el título del newsletter de los íconos */
  .newsletter-title{
    margin-top: 8px;
    margin-bottom: 8px;
  }

  /* Un poco más de aire debajo del subtítulo */
  .newsletter-text{
    margin-bottom: 14px;
  }

  /* Ocultar el divisor debajo de los botones solo en este viewport */
  .hero-follow > .follow-divider{
    display: none;
  }

}
/* ============================================================
   BORRADOR VIERNES: secciones de Episodios y Álbum
   Todo lo de acá abajo es nuevo, para las secciones que van
   DESPUÉS del hero (fuera de <section class="hero">, por eso no
   usa el Grid de una sola pantalla — la página pasa a poder
   scrollear más allá del hero, como cualquier landing normal).
   Nombres de clase todos nuevos: no afecta nada de lo existente.
   ============================================================ */

.episodes-section,
.album-section {
  position: relative;
  width: 100%;
  padding: clamp(40px, 6vh, 72px) 20px;
  background: var(--violet-deep);
}

.section-heading {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(32px, 5vh, 52px);
  text-align: center;
}

.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.section-title {
  color: var(--gold-title);
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
}

/* Forzado a 2 líneas exactas ("Las Trillizas de Oro" / "y el Libro
   Mágico" vía <br> en el HTML) — tamaño un poco más contenido que el
   .section-title genérico para que la primera línea no vuelva a
   partirse sola en una tercera línea. */
/* Misma tipografía exacta que el slogan del hero (.hero-slogan):
   serif, peso 500, tracking -0.012em, sin mayúsculas, dorado con el
   mismo stack de sombras, más el glow "respirando" infinito
   (@keyframes sloganGlowBreathe, ya definido para el hero). */
.historia-section__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.012em;
  text-transform: none;

  background: linear-gradient(
    180deg,
    var(--gold-title-shine-1),
    var(--gold-title-shine-2) 55%,
    var(--gold-title-shine-3)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--gold-title);
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.34),
    0 2px 0 rgba(113, 65, 16, 0.28),
    0 5px 14px rgba(0, 0, 0, 0.34),
    0 0 12px rgba(231, 181, 74, 0.10);

  animation: sloganGlowBreathe 4s ease-in-out infinite;
}

/* En desktop, una sola línea (el <br> queda oculto y solo se
   habilita en mobile más abajo). */
.historia-title-break {
  display: none;
}

.section-subtitle {
  color: var(--ivory);
  font-family: var(--font-ui);
  font-size: clamp(19px, 2.4vw, 27px);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.01em;
  opacity: 0.92;
  margin: 6px 0 0;
}

/* ---------- Episodios ---------- */

.episodes-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.6vw, 32px);

  width: min(760px, 100%);
  margin: 0 auto;
}

/* ============================================================
   Acordeón de temporadas — solo se usa (JS lo arma) cuando hay
   episodios de más de una temporada cargados. Con una sola
   temporada, la grilla de episodios se ve exactamente igual que
   siempre (estas clases ni se llegan a crear en el DOM). Cada
   <details> es una temporada; <summary> es el título clickeable
   con la flechita que rota al abrir. Mismo criterio de "todo a la
   vista" que las cards sueltas: adentro de una temporada abierta
   se ven todos los episodios juntos, sin carrusel. */
.season-accordion {
  width: min(1360px, calc(100% - 40px));
  margin: 0 auto;
}

.season-block {
  border-bottom: 1px solid rgba(216, 178, 92, 0.22);
}

.season-block:first-child {
  border-top: 1px solid rgba(216, 178, 92, 0.22);
}

.season-block summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  list-style: none;
  cursor: pointer;
  padding: 22px 10px;
  user-select: none;
}

.season-block summary::-webkit-details-marker {
  display: none;
}

.season-block summary .season-label {
  color: var(--gold-title);
  font-family: var(--font-ui);
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.season-block summary .season-arrow {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--gold);
  transition: transform 0.3s ease;
}

.season-block[open] summary .season-arrow {
  transform: rotate(90deg);
}

.season-block .episodes-grid {
  padding-bottom: 32px;
}

.episode-tile {
  display: flex;
  flex-direction: column;
  gap: 12px;

  padding: 10px;

  text-decoration: none;
  border-radius: 16px;
  border: 1px solid rgba(216, 178, 92, 0.22);
  box-shadow: 0 14px 32px rgba(76, 29, 149, 0.16);

  transition:
    transform .35s cubic-bezier(.22, 1, .36, 1),
    border-color .35s ease,
    box-shadow .35s ease;
}

.episode-tile:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(216, 178, 92, 0.55);
  box-shadow:
    0 18px 40px rgba(76, 29, 149, 0.26),
    0 0 26px rgba(216, 178, 92, 0.14);
}

.episode-tile__thumb {
  position: relative;
  aspect-ratio: 16 / 10;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 14px;
  overflow: hidden;

  border: 1px solid rgba(216, 178, 92, 0.35);
  background:
    radial-gradient(circle at 50% 40%, rgba(216, 178, 92, 0.16), transparent 60%),
    var(--violet-deep);

  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.episode-tile__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.episode-tile__play {
  position: relative;
  z-index: 1;

  width: 52px;
  height: 52px;
  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1.5px solid var(--ivory);
  border-radius: 50%;
  background: rgba(27, 15, 46, 0.55);
}

.episode-tile__play svg {
  width: 20px;
  height: 20px;
  color: var(--ivory);
}

.episode-tile__number {
  color: var(--gold-title);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.episode-tile__title {
  /* El nombre de cada episodio va en blanco, no dorado (pedido
     explícito) — distinto del resto de los títulos sans-serif de la
     web, que sí son dorados. */
  color: var(--ivory);
  font-family: var(--font-ui);
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 700;
  line-height: 1.25;
}

/* Botón rojo estilo YouTube — reemplaza el link de texto simple
   "Ver episodio" para dejar clarísimo que el episodio se ve en
   YouTube (no en un reproductor propio de la web). */
.episode-tile__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: var(--gold-light);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;

  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

.episode-tile:hover .episode-tile__cta {
  transform: translateX(3px);
}

.episode-tile__cta-icon {
  width: 24px;
  height: 17px;
  flex: 0 0 auto;
}

.episode-tile__cta-arrow {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

/* ---------- Álbum ---------- */

.album-section {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  min-height: 100vh;
  min-height: 100dvh;
}

/* Base/piso de luz muy sutil al fondo de la sección, para que no se
   sienta vacía debajo de la composición (tapa + texto + Trixi). */
.album-section::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: -10%;
  width: min(1100px, 90vw);
  height: 220px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    rgba(216, 178, 92, 0.10),
    rgba(124, 58, 237, 0.08) 55%,
    transparent 75%
  );
  filter: blur(30px);
  pointer-events: none;
}

.album-section__heading {
  position: relative;
  z-index: 2;
  margin-bottom: clamp(20px, 3vh, 32px);
}

/* "Nuestra música" quedaba muy chico/perdido con el tamaño genérico
   de eyebrow (el mismo que "Serie original") — acá se lo agranda. */
.album-section__heading .section-eyebrow {
  font-size: clamp(20px, 2vw, 26px);
}

/* Subtítulo blanco debajo de "Nuestra música", mismo tratamiento
   exacto que el párrafo de la sección Historia (.historia-section__body). */
.album-section__subtitle {
  color: var(--ivory);
  font-family: var(--font-ui);
  font-size: clamp(16px, 1.3vw, 18px);
  font-weight: 400;
  line-height: 1.7;
  opacity: 0.9;
  text-align: center;
  max-width: 980px;
  margin: 12px auto 0;
  text-wrap: balance;
}

@media (max-width: 700px) {
  .album-section__subtitle {
    font-size: 14px;
    line-height: 1.6;
  }
}

.album-section__subtitle strong {
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--ivory);
}

/* Halo muy difuso detrás de las Trixi Pop — violeta/fucsia/cyan
   apenas insinuados, nada de estética neón. Va DETRÁS de la imagen
   (z-index más bajo) para darle profundidad sin competir con nada. */
.album-section__trixi-halo {
  position: absolute;
  z-index: 0;
  right: -6%;
  top: 50%;
  transform: translateY(-50%);
  width: 58vw;
  max-width: 700px;
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(circle at 65% 35%, rgba(124, 58, 237, 0.24), transparent 62%),
    radial-gradient(circle at 38% 58%, rgba(217, 70, 239, 0.17), transparent 60%),
    radial-gradient(circle at 76% 72%, rgba(103, 232, 249, 0.20), transparent 55%);
  filter: blur(42px);
  pointer-events: none;
}

/* Destellos finos cyan/violeta/fucsia detrás de las Trixi Pop —
   sutiles, reutilizan la misma animación de brillo del hero. */
.album-section__trixi-sparkles {
  position: absolute;
  z-index: 1;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: min(450px, 30vw);
  aspect-ratio: 1.5 / 1;
  pointer-events: none;
}

.album-section__trixi-sparkles i {
  position: absolute;
  width: 6px;
  height: 6px;
  opacity: 0;
  border-radius: 50%;
  transform: scale(0.35);
  animation: sparkleSoft 5.2s ease-in-out infinite;
}

.album-section__trixi-sparkles i:nth-child(1) { top: 6%;  left: 18%; width: 6px; height: 6px; background: radial-gradient(circle, rgba(103,232,249,0.95), transparent 70%); filter: drop-shadow(0 0 6px rgba(103,232,249,0.6)); animation-delay: .4s; }
.album-section__trixi-sparkles i:nth-child(2) { top: 14%; left: 55%; width: 5px; height: 5px; background: radial-gradient(circle, rgba(217,70,239,0.95), transparent 70%); filter: drop-shadow(0 0 6px rgba(217,70,239,0.6)); animation-delay: 1.4s; }
.album-section__trixi-sparkles i:nth-child(3) { top: 32%; left: 82%; width: 7px; height: 7px; background: radial-gradient(circle, rgba(124,58,237,0.95), transparent 70%); filter: drop-shadow(0 0 6px rgba(124,58,237,0.6)); animation-delay: 2.2s; }
.album-section__trixi-sparkles i:nth-child(4) { top: 58%; left: 8%;  width: 5px; height: 5px; background: radial-gradient(circle, rgba(217,70,239,0.9), transparent 70%);  filter: drop-shadow(0 0 5px rgba(217,70,239,0.55)); animation-delay: 3.1s; }
.album-section__trixi-sparkles i:nth-child(5) { top: 70%; left: 62%; width: 6px; height: 6px; background: radial-gradient(circle, rgba(103,232,249,0.9), transparent 70%);  filter: drop-shadow(0 0 5px rgba(103,232,249,0.55)); animation-delay: .9s; }
.album-section__trixi-sparkles i:nth-child(6) { top: 46%; left: 40%; width: 5px; height: 5px; background: radial-gradient(circle, rgba(124,58,237,0.9), transparent 70%);  filter: drop-shadow(0 0 5px rgba(124,58,237,0.55)); animation-delay: 1.9s; }

/* Trixi Pop con auriculares, escuchando música — ilustración de fondo
   integrada directamente sobre el violeta de la sección (PNG con
   transparencia real, sin card, sin borde, sin recuadro). Se funde
   hacia la izquierda con una máscara degradada para no competir con
   el título ni con el botón. Imagen ya existente del proyecto
   (imagenes/trixi pop music.png), solo comprimida a WebP para web. */
.album-section__trixi-bg {
  position: absolute;
  z-index: 1;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: min(560px, 35vw);
  max-width: none;
  height: auto;
  opacity: 0.86;
  pointer-events: none;

  /* Máscara radial: nítidas en el centro/derecha, se diluyen hacia
     los 4 bordes. Radio vertical más amplio que el intento anterior
     (60% en vez de 46%) para que las piernas se sigan viendo bastante
     antes de fundirse del todo cerca del borde — no un corte, pero
     tampoco un fundido tan temprano que las tape. */
  -webkit-mask-image: radial-gradient(
    ellipse 76% 60% at 66% 40%,
    black 34%,
    rgba(0, 0, 0, 0.55) 68%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 76% 60% at 66% 40%,
    black 34%,
    rgba(0, 0, 0, 0.55) 68%,
    transparent 100%
  );
}

/* Bloque editorial horizontal y compacto: la tapa y el texto ocupan
   prácticamente la misma altura, sueltos sobre el fondo violeta de
   la sección (sin card/panel envolviendo todo). Por encima de las
   Trixi Pop de fondo. */
.album-section__row {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  gap: 28px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.album-section__cover {
  position: relative;
  z-index: 2;
  width: min(295px, 74vw);
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;

  border-radius: 14px;

  /* Borde dorado fino, inspirado en el de las cards de episodios,
     con un glow dorado muy suave para integrarlo mejor. */
  border: 1px solid rgba(216, 178, 92, 0.45);
  box-shadow:
    0 28px 60px rgba(0, 0, 0, 0.55),
    0 12px 26px rgba(0, 0, 0, 0.4),
    0 0 22px rgba(216, 178, 92, 0.16),
    0 0 60px rgba(217, 70, 239, 0.08),
    0 0 60px rgba(103, 232, 249, 0.06);
}

/* Sombra de contacto elíptica debajo de la tapa, para que se sienta
   apoyada sobre el fondo en vez de flotando. */
.album-section__cover::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -18px;
  width: 82%;
  height: 26px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.5), transparent 72%);
  filter: blur(6px);
  z-index: -1;
  pointer-events: none;
}

/* Halo violeta muy sutil detrás de la tapa */
.album-section__cover::before {
  content: "";
  position: absolute;
  inset: -26px;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(103, 232, 249, 0.14), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(217, 70, 239, 0.14), transparent 60%),
    radial-gradient(circle, rgba(124, 58, 237, 0.22), transparent 68%);
  pointer-events: none;
}

/* Destellos finos cyan/violeta/fucsia alrededor de la tapa. */
.album-section__cover-sparkles {
  position: absolute;
  z-index: 2;
  inset: -14%;
  pointer-events: none;
}

.album-section__cover-sparkles i {
  position: absolute;
  opacity: 0;
  border-radius: 50%;
  transform: scale(0.35);
  animation: sparkleSoft 5s ease-in-out infinite;
}

.album-section__cover-sparkles i:nth-child(1) { top: 4%;  left: 8%;  width: 6px; height: 6px; background: radial-gradient(circle, rgba(103,232,249,0.95), transparent 70%); filter: drop-shadow(0 0 6px rgba(103,232,249,0.6)); animation-delay: .6s; }
.album-section__cover-sparkles i:nth-child(2) { top: 88%; left: 12%; width: 5px; height: 5px; background: radial-gradient(circle, rgba(217,70,239,0.95), transparent 70%); filter: drop-shadow(0 0 6px rgba(217,70,239,0.6)); animation-delay: 1.7s; }
.album-section__cover-sparkles i:nth-child(3) { top: 10%; left: 92%; width: 6px; height: 6px; background: radial-gradient(circle, rgba(124,58,237,0.95), transparent 70%); filter: drop-shadow(0 0 6px rgba(124,58,237,0.6)); animation-delay: 2.6s; }
.album-section__cover-sparkles i:nth-child(4) { top: 92%; left: 90%; width: 5px; height: 5px; background: radial-gradient(circle, rgba(103,232,249,0.9), transparent 70%);  filter: drop-shadow(0 0 5px rgba(103,232,249,0.55)); animation-delay: 3.4s; }

.album-section__cover img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}

.album-section__info {
  --button-width: min(280px, 85%);

  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;

  width: min(420px, 100%);
  text-align: center;
}

.album-section__info .magic-button {
  margin-top: 24px;
  animation: albumButtonGlow 3.2s ease-in-out infinite;
}

@keyframes albumButtonGlow {
  0%, 100% {
    filter:
      drop-shadow(0 12px 22px rgba(0, 0, 0, 0.40))
      drop-shadow(0 22px 48px rgba(0, 0, 0, 0.22))
      drop-shadow(0 0 18px rgba(232, 201, 123, 0.16));
  }
  50% {
    filter:
      drop-shadow(0 12px 22px rgba(0, 0, 0, 0.40))
      drop-shadow(0 22px 48px rgba(0, 0, 0, 0.22))
      drop-shadow(0 0 30px rgba(232, 201, 123, 0.4));
  }
}

.album-section__info .magic-button__content {
  padding: 0 22px;
  gap: 10px;
}

.album-section__info .magic-button__icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}

.album-section__info .magic-button__icon svg {
  width: 14px;
  height: 14px;
}

.album-section__info .magic-button__label {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.015em;
}

/* "Disponible en todas las plataformas" + iconos — tercer bloque
   dentro de .album-section__info, que ahora tiene 3 hijos (título,
   botón, plataformas) en vez de 2: con justify-content:space-between
   el botón deja de estar pegado al borde inferior (ahí queda esto)
   y sube un poco, repartiendo mejor la misma altura de la tapa. */
.album-section__platforms {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.album-section__platforms-label {
  margin: 0;
  color: var(--ivory);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
}

.album-section__platforms-icons {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Logos reales de cada plataforma (ya vienen sin fondo, y los que
   tenían el logo en negro se pasaron a blanco para que se vean sobre
   el violeta). Se muestran a la misma altura, sin recuadro ni
   círculo — cada logo tiene su propia forma/ancho. */
.album-section__platform-icon {
  display: flex;
  align-items: center;
  opacity: 0.85;
  transition: opacity .25s ease, transform .25s ease;
}

.album-section__platform-icon:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.album-section__platform-icon img {
  display: block;
  height: 22px;
  width: auto;
}


.album-section__info .section-divider {
  justify-content: center;
}

/* Mismo tratamiento tipográfico exacto que el título del hero
   (.hero-slogan) — misma serif, peso, tracking, dorado y brillo. */
.album-section__name {
  font-family: var(--font-display);
  font-size: clamp(32px, 2.8vw, 44px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 0;

  background: linear-gradient(
    180deg,
    var(--gold-title-shine-1),
    var(--gold-title-shine-2) 55%,
    var(--gold-title-shine-3)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--gold-title);
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.34),
    0 2px 0 rgba(113, 65, 16, 0.28),
    0 5px 14px rgba(0, 0, 0, 0.34),
    0 0 12px rgba(231, 181, 74, 0.10);
}

.album-section__status {
  color: var(--ivory);
  font-family: var(--font-ui);
  font-size: 14px;
  opacity: 0.85;
  margin: 0;
}

@media (max-width: 700px) {
  /* Una card debajo de la otra en mobile (no 2 columnas apretadas). */
  #serie-section .episodes-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Card "Nuevos episodios": en mobile era vertical y muy alta (240px
     de ancho, contenido centrado en columna). Se la pasa a un
     formato horizontal y bajo, con el mismo ancho que las cards de
     episodios de arriba — texto a la izquierda, logo a la derecha,
     y el botón como una fila propia abajo. */
  #serie-section .episode-tile--soon {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "diamond title"
      ".      line";
    column-gap: 8px;
    row-gap: 3px;
    align-items: center;

    width: 100%;
    max-width: none;
    margin: 8px auto 0;
    padding: 16px 20px;
    text-align: left;
  }

  #serie-section .episode-tile__soon-diamond {
    grid-area: diamond;
    font-size: 15px;
  }

  #serie-section .episode-tile__soon-title {
    grid-area: title;
    font-size: 17px;
    line-height: 1.15;
  }

  #serie-section .episode-tile__soon-title br {
    display: none;
  }

  /* "Cada semana en el canal de" + logo, en la misma línea, como
     parte de la misma frase (el logo pegado justo después del
     texto, no en una columna aparte lejos de la oración). */
  #serie-section .episode-tile__soon-line {
    grid-area: line;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  #serie-section .episode-tile__soon-sub {
    font-size: 10px;
  }

  #serie-section .episode-tile__soon-babidibu {
    width: 72px;
    margin: 0;
    align-self: center;
  }

  #serie-section .episode-tile__soon-visit {
    grid-column: 1 / -1;
    align-self: auto;
    width: 100%;
    margin-top: 12px;
  }
}

/* La card "Nuevos episodios" quedaba en un hueco sin cubrir: el
   layout horizontal de arriba era solo para mobile (hasta 700px) y
   el de 3 columnas de más abajo arranca recién en 901px — entre
   medio (tablet, ~701-900px) cae al diseño viejo, vertical y angosto
   (240px centrado), que ya no está pensado para verse bien. Se le
   da el mismo tratamiento horizontal que en mobile, pero sin tocar
   la grilla de 2 columnas de los episodios (que en ese ancho ya se
   ve bien). */
@media (min-width: 701px) and (max-width: 900px) {
  #serie-section .episode-tile--soon {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "diamond title"
      ".      line";
    column-gap: 8px;
    row-gap: 3px;
    align-items: center;

    width: 100%;
    max-width: none;
    margin: 20px auto 0;
    padding: 18px 22px;
    text-align: left;
  }

  #serie-section .episode-tile__soon-diamond {
    grid-area: diamond;
    font-size: 16px;
  }

  #serie-section .episode-tile__soon-title {
    grid-area: title;
    font-size: 18px;
    line-height: 1.15;
  }

  #serie-section .episode-tile__soon-title br {
    display: none;
  }

  #serie-section .episode-tile__soon-line {
    grid-area: line;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  #serie-section .episode-tile__soon-sub {
    font-size: 11px;
  }

  #serie-section .episode-tile__soon-babidibu {
    width: 78px;
    margin: 0;
    align-self: center;
  }

  #serie-section .episode-tile__soon-visit {
    grid-column: 1 / -1;
    align-self: auto;
    width: 100%;
    margin-top: 14px;
  }
}

@media (max-width: 700px) {
  .album-section__row {
    grid-template-columns: 1fr;
  }

  .album-section__info {
    --button-width: min(360px, 86vw);
  }

  /* En mobile, Trixi Pop de fondo se saca directamente: en pantallas
     chicas restaba legibilidad y no había espacio para que se viera
     bien recortada. */
  .album-section__trixi-bg,
  .album-section__trixi-halo,
  .album-section__trixi-sparkles {
    display: none;
  }

  /* Más aire entre el botón "Escuchar el álbum" y "Disponible en
     todas las plataformas" — quedaban muy pegados. */
  .album-section__platforms {
    margin-top: 20px;
  }

}

/* Tablet angosta (701-900px, ej. iPad/iPad Air en vertical): acá la
   tapa y el texto siguen apilados (una sola columna, como en mobile),
   así que no hay un costado libre donde poner el Trixi Pop como
   3ra columna (eso solo pasa desde 901px, ver más abajo). En vez de
   sacarlo del todo, se lo deja como arte de fondo grande detrás de
   toda la fila (apilada) — más difuminado y por detrás del contenido
   (z-index más bajo), asomando desde abajo. Con estos anchos hay
   suficiente alto de sobra (la sección tiene min-height: 100vh) para
   que entre sin pisar el texto. */
@media (min-width: 701px) and (max-width: 900px) {
  /* En vez de calcular una posición flotante a mano (frágil, y en un
     primer intento terminó superpuesto justo detrás del texto), se
     lo deja como un elemento más del flujo normal: al ser el grid de
     una sola columna, "order" lo manda después de la tapa y el texto
     (que se quedan con su order:0 por defecto) — así nunca se puede
     superponer con nada, entra siempre debajo, sin importar cuánto
     mida el texto en cada pantalla. */
  .album-section__trixi-bg {
    position: static;
    order: 1;
    width: min(420px, 62vw);
    max-width: none;
    height: auto;
    margin: 12px auto 0;
    opacity: 1;
    transform: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .album-section__trixi-halo,
  .album-section__trixi-sparkles {
    display: none;
  }
}

/* Solo cuando el body tiene la clase "has-sections" (borrador viernes,
   con secciones nuevas debajo del hero): el hero deja de "atrapar" el
   scroll con su propio overflow interno, para que la página entera
   pueda scrollear hasta las secciones de Episodios/Álbum. No afecta a
   index.html (esa clase no está ahí). */
body.has-sections .hero {
  overflow: visible !important;
}

/* Mismo alcance que el fix anterior (solo borrador viernes): las capas
   de fondo del hero (video, viñeta, sombra, partículas) son "fixed" a
   toda la pantalla — pensado para cuando el hero ES toda la página.
   Al agregar secciones debajo y permitir scroll, esas capas se quedan
   tapando todo lo de más abajo. Se vuelven "absolute" (ancladas solo
   dentro del hero) nada más en esta página de borrador. */
body.has-sections .hero-video,
body.has-sections .hero-overlay,
body.has-sections .hero-vignette,
body.has-sections .hero-shadow,
body.has-sections .hero-particles {
  position: absolute;
}

/* Solo borrador viernes: como "Cruzá el portal mágico", la suscripción
   y el footer se movieron FUERA del hero (ahora van debajo de Episodios
   y Álbum), el hero-content ya solo tiene 3 hijos (logo, slogan,
   botones) — se centra con flex simple en vez del Grid de 9-10 filas
   pensado para 6 bloques. El Grid original queda intacto para
   index.html (no tiene la clase "has-sections"). */
body.has-sections .hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(20px, 3vh, 40px);
  height: 100%;
  width: 100%;
  max-width: 1180px;
  padding: clamp(24px, 5vh, 56px) 20px 20px;
  box-sizing: border-box;
}

/* Contenedor para el bloque movido (portal social + suscripción +
   footer): mismo fondo violeta que las otras secciones nuevas, y
   centra todo su contenido igual que antes dentro del hero. */
.post-sections-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 4vh, 44px);

  width: 100%;
  padding: clamp(48px, 8vh, 96px) 20px clamp(24px, 4vh, 48px);
  background: var(--violet-deep);
}

.post-sections-footer .hero-content-mirror {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 4vh, 44px);
  width: 100%;
  max-width: 720px;
}

.post-sections-footer .hero-follow,
.post-sections-footer .hero-newsletter,
.post-sections-footer .site-footer {
  position: static;
  width: 100%;
  margin: 0;
}

/* Fix: el botón del álbum reutiliza .magic-button, que trae
   "flex: 0 0 var(--button-width)" pensado para una fila (como en el
   hero). Acá el botón vive en una columna (.album-section__info es
   flex-direction: column), así que ese flex-basis termina fijando la
   ALTURA en vez del ancho, deformando el botón por completo. Se
   neutraliza solo para este caso. */
.album-section__info .magic-button {
  flex: 0 0 auto;
}

/* ---------- Ajustes de escritorio (pantallas grandes) ---------- */
@media (min-width: 901px) {
  /* Grilla pareja de 3 columnas (en vez de 2fr/2fr/1fr, pensado solo
     para 2 episodios + la card fija): así entran bien tantos
     episodios como haya, ocupando cada uno el mismo ancho, y la
     card "Nuevos episodios" siempre al final como una más. */
  #serie-section .episodes-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    width: min(1360px, calc(100% - 40px));
    gap: 32px;
  }

  #serie-section .episode-tile--soon {
    grid-column: auto;
    width: 100%;
    height: 100%;
    margin-top: 0;
  }

  .episode-tile__thumb {
    aspect-ratio: 16 / 9;
  }

  .post-sections-footer .hero-content-mirror {
    max-width: 860px;
  }

  .post-sections-footer .hero-follow .follow-links {
    gap: 28px;
  }
}

/* Antes, la franja 901–1199px (tablets como iPad Pro en horizontal)
   apilaba todo como en mobile porque "no entraba" tapa + texto +
   Trixi lado a lado — pero con las fórmulas proporcionales de abajo
   (vw-based, pensadas para escalar en cualquier ancho) sí entra sin
   apretarse. Se extiende el mismo layout de desktop (2 columnas +
   Trixi al costado) desde 901px en vez de 1200px, para que tablet se
   vea igual que desktop en vez de con el diseño apilado de mobile. */
@media (min-width: 901px) {
  .album-section__row {
    grid-template-columns: min(375px, 23.3vw) minmax(0, min(460px, 36vw));
    /* Ancho de caja más grande que el contenido (cover+info) para
       dejarle a las Trixi Pop —dentro del mismo row, así comparten
       exactamente la misma altura que la tapa— su propio lugar a la
       derecha sin superponerse. El contenido del grid se ancla a la
       izquierda de esta caja más ancha, no se estira. */
    max-width: 1480px;
    justify-content: start;
    align-items: center;
    gap: clamp(32px, 4vw, 52px);
    justify-items: stretch;
    margin: 0 auto;
    padding-left: clamp(0px, 5vw, 90px);
  }

  .album-section__cover {
    /* min(375px, 23.3vw) escala en la misma proporción que el ancho de
       las Trixi Pop (min(560px, 35vw) — 35/1.5 = 23.3), así ambas
       alturas se mantienen igualadas en cualquier ancho de pantalla,
       no solo en uno puntual. */
    width: min(375px, 23.3vw);
  }

  .album-section__info {
    /* Misma altura EXACTA que la tapa (no la del row completo, que es
       mucho más alto porque llena el viewport) — así title arriba y
       botón abajo quedan realmente a la altura del arte de tapa, ni
       más arriba ni más abajo. Misma fórmula que .album-section__cover. */
    height: min(375px, 23.3vw);
    justify-content: space-between;
    align-items: flex-start;
    text-align: left;
    width: 100%;
    max-width: 460px;
  }

  /* Con .album-section__info a la altura exacta de la tapa y
     justify-content:space-between entre sus 3 hijos (título, botón,
     plataformas), el título queda arriba del todo, "Disponible en
     todas las plataformas" abajo del todo, y el botón repartido en
     el medio — ya no pegado al borde inferior. El margin-top fijo de
     antes no hace falta, lo pisa el espacio que reparte space-between. */
  .album-section__info .magic-button {
    margin-top: 0;
  }

  .album-section__platforms {
    align-items: flex-start;
  }

  .album-section__platforms-label {
    text-align: left;
  }

  .album-section__info .section-divider {
    justify-content: flex-start;
  }
}

/* Ajuste fino solo para tablet (901-1199px, ej. iPad Pro apaisado):
   con las proporciones completas de desktop, tapa+texto+Trixi no
   entran sin pisarse (el "row" no llega a su ancho máximo de 1480px
   a este ancho de pantalla). Se achican un poco las 3 piezas (mismo
   layout, mismo criterio de proporción para que tapa y Trixi sigan
   compartiendo la misma altura) y se reduce el padding/gap, así
   entran igual sin superponerse. */
@media (min-width: 901px) and (max-width: 1199px) {
  /* En este rango el Trixi Pop deja de ser una imagen "flotante"
     posicionada aparte (eso es lo que generaba el hueco raro,
     desconectado de la tapa+texto) y pasa a ser una 3ra columna más
     del grid, como la tapa y el texto — así siempre queda pegado al
     contenido real, sin importar cuánto más angosta sea la pantalla
     que el máximo de 1480px pensado para desktop. */
  .album-section__row {
    grid-template-columns: min(300px, 19vw) minmax(0, min(380px, 30vw)) min(260px, 22vw);
    gap: clamp(16px, 2vw, 28px);
    padding-left: clamp(0px, 2vw, 40px);
  }

  .album-section__cover {
    width: min(300px, 19vw);
    grid-column: 1;
  }

  .album-section__info {
    height: min(300px, 19vw);
    max-width: 380px;
    grid-column: 2;
  }

  /* Al ser un item más del grid (no absolute), se cancelan las
     propiedades de posicionamiento "flotante" — la ubica el grid. */
  .album-section__trixi-bg {
    position: static;
    grid-column: 3;
    grid-row: 1;
    width: 100%;
    max-width: none;
    transform: none;
    align-self: center;
    justify-self: center;
  }

  /* El halo/sparkles alrededor estaban calculados para la posición
     "flotante" de antes — ya no calzan con la imagen integrada al
     grid, así que se ocultan acá (son solo un detalle ambiental, no
     hace falta rehacerlos para este rango angosto). */
  .album-section__trixi-halo,
  .album-section__trixi-sparkles {
    display: none;
  }
}

.album-section__volume {
  color: var(--ivory);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 16px 0 0;
}

/* ---------- Videoclips (debajo de la tapa del álbum) ---------- */
.album-section__videoclips {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

/* .album-section__videoclips-title usa la clase compartida
   "section-title" (misma tipografía que "El Álbum") — no hace falta
   pisarle nada acá. */

@media (max-width: 700px) {
  .album-section__videoclips {
    order: 3;
  }
}

/* ============================================================
   BORRADOR VIERNES: barra de navegación
   ============================================================ */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;

  background: rgba(15, 8, 26, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(216, 178, 92, 0.25);

  transition: transform 0.35s ease;
}

/* Se esconde al hacer scroll hacia abajo (ver script.js) — solo en
   desktop, controlado por JS con un chequeo de ancho de pantalla. */
.site-nav--hidden {
  transform: translateY(-100%);
}

/* Franja angosta e invisible pegada al borde superior: sigue ahí
   aunque la nav esté escondida (translateY la saca de la pantalla),
   así el mouse la puede "hoverear" para traer la nav de vuelta. */
.site-nav-hover-zone {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 16px;
  z-index: 51;
  pointer-events: auto;
}

/* Como la barra ahora es "fixed" (fuera del flujo normal), se le
   deja ese mismo espacio arriba de todo lo demás para que no quede
   tapado debajo. */
body.has-sections {
  padding-top: 70px;
}

@media (max-width: 700px) {
  body.has-sections {
    padding-top: 62px;
  }
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;

  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 20px;
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__links a,
.site-nav__soon {
  color: var(--gold-light);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav__links a:hover {
  color: var(--ivory);
}

.site-nav__soon {
  color: rgba(246, 241, 231, 0.4);
  cursor: default;
}

.site-nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;

  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.site-nav__burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--ivory);
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}

.site-nav__burger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-nav__burger.is-open span:nth-child(2) {
  opacity: 0;
}

.site-nav__burger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.site-nav__mobile {
  display: none;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}

.site-nav__mobile.is-open {
  max-height: 400px;
}

.site-nav__mobile li {
  border-top: 1px solid rgba(216, 178, 92, 0.15);
}

.site-nav__mobile a,
.site-nav__mobile .site-nav__soon {
  display: block;
  padding: 16px 20px;
  color: var(--gold-light);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

/* Que un link ancla (#album-section, etc.) no deje la sección tapada
   detrás de la barra fija. */
#album-section,
#episodes-section {
  scroll-margin-top: 76px;
}

@media (max-width: 700px) {
  .site-nav__links {
    display: none;
  }

  .site-nav__burger {
    display: flex;
  }

  .site-nav__mobile {
    display: flex;
  }

  .site-nav__inner {
    justify-content: space-between;
    padding: 14px 20px;
  }

  /* En mobile la nav queda fija arriba de todo, y como el hero tiene
     un video/gradiente de fondo con position:fixed propio, el blur
     no alcanza a taparlo del todo al scrollear rápido — se ve el
     fondo "pasando" detrás de la barra. Acá se la deja opaca del
     todo para que no se transparente nada. También se saca el
     backdrop-filter (blur): con el fondo ya sólido no hace falta, y
     en algunos celulares esa combinación (fixed + blur) parpadea o
     deja ver el contenido de atrás por una fracción de segundo
     durante el scroll rápido, aunque el color de fondo esté bien. */
  .site-nav {
    background: rgb(15, 8, 26);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Como la barra de navegación ahora ocupa espacio arriba del hero
   (no está superpuesta), se le resta esa altura al hero para que
   siga entrando en una pantalla completa al cargar la página. Solo
   en el borrador (body.has-sections) — index.html no tiene navbar. */
body.has-sections .hero {
  height: calc(100vh - 70px);
  height: calc(100dvh - 70px);
  min-height: calc(100svh - 70px);
}

/* En mobile el hero queda forzado a una altura fija (pantalla completa
   menos la navbar) aunque el contenido (logo + título + botones) sea
   más bajo que eso — el sobrante quedaba como un bloque negro vacío
   antes de la siguiente sección. Acá se deja que el hero se achique
   al alto real de su contenido; el fondo (video/overlay) es
   "absolute" dentro del hero (ver arriba), así que se ajusta con él
   sin dejar ningún hueco. */
@media (max-width: 700px) {
  body.has-sections .hero {
    height: auto;
    min-height: auto;
  }

  body.has-sections .hero-content {
    height: auto;
    min-height: auto;
    padding-bottom: clamp(28px, 5vh, 48px);
  }

  /* Pista de scroll al final del hero: solo mobile, para que se note
     claramente que el hero termina ahí (video + texto + botones) y
     que hay que seguir bajando para ver la sección de Serie. */
  body.has-sections .hero-scroll-cue {
    display: flex;
    justify-content: center;
    margin-top: clamp(18px, 3vh, 28px);
  }
}

.hero-scroll-cue {
  display: none;
}

.hero-scroll-cue__arrow {
  width: 16px;
  height: 16px;
  border-right: 2px solid rgba(216, 178, 92, 0.75);
  border-bottom: 2px solid rgba(216, 178, 92, 0.75);
  transform: rotate(45deg);
  animation: heroScrollCueBounce 1.8s ease-in-out infinite;
}

@keyframes heroScrollCueBounce {
  0%, 100% {
    transform: rotate(45deg) translate(0, 0);
    opacity: 0.45;
  }
  50% {
    transform: rotate(45deg) translate(5px, 5px);
    opacity: 1;
  }
}


/* Hero: claim secundario (arriba del título principal nuevo) */
.hero-claim {
  width: 100%;
  color: var(--ivory);
  font-family: var(--font-ui);
  font-size: clamp(19px, 2.4vw, 25px);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-align: center;
  opacity: 0.9;
  margin: 0 0 clamp(14px, 1.8vh, 20px);
}

/* ============================================================
   BORRADOR VIERNES: eyebrow / season (La serie, Álbum)
   ============================================================ */
.section-eyebrow {
  color: var(--gold-title);
  font-family: var(--font-ui);
  font-size: clamp(14px, 1.6vw, 18px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.section-season {
  color: var(--ivory);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.7;
  margin: 6px 0 0;
}

/* La sección "episodes-section" se llamaba así en un borrador
   anterior; ahora es "serie-section" pero reutiliza exactamente el
   mismo CSS de layout que ya existía (misma clase .episodes-section
   de padding/fondo), así que no hace falta duplicar esas reglas. */
.serie-section {
  position: relative;
  width: 100%;
  padding: clamp(48px, 8vh, 96px) 20px;
  background: var(--violet-deep);

  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- Card secundaria "Nuevos episodios cada semana" ---------- */
.episode-tile--soon {
  /* Es un item más del grid de episodios: en mobile/tablet ocupa toda
     la fila propia debajo (grid-column: 1/-1); en desktop (901px+, ver
     media query de arriba) se acomoda al lado como 3ra columna angosta. */
  grid-column: 1 / -1;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;

  width: min(240px, 100%);
  margin: 8px auto 0;
  padding: 22px 18px;

  position: relative;
  overflow: hidden;

  text-align: center;
  border: 1px solid rgba(216, 178, 92, 0.32);
  border-radius: 14px;

  /* Overlay oscuro + violeta arriba de la imagen, para que el texto
     dorado siga leyéndose bien sea cual sea la foto de fondo. */
  background:
    linear-gradient(180deg, rgba(20, 10, 33, 0.55), rgba(20, 10, 33, 0.82)),
    radial-gradient(circle at 50% 20%, rgba(216, 178, 92, 0.10), transparent 60%),
    url('imagenes/proximos_episodios_web.jpg') center / cover no-repeat,
    rgba(38, 20, 61, 0.55);

  box-shadow:
    inset 0 0 24px rgba(216, 178, 92, 0.05),
    0 14px 32px rgba(76, 29, 149, 0.16);
}

.episode-tile__soon-diamond {
  position: relative;
  color: var(--gold);
  font-size: 18px;
}

.episode-tile__soon-title {
  color: var(--gold-title);
  font-family: var(--font-ui);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.2;
}

/* Wrapper de "Cada semana en el canal de" + logo: en desktop/tablet
   no cambia nada (display: contents lo saca del flujo, los hijos
   siguen siendo ítems directos del flex column de siempre); solo en
   mobile (ver media query) pasa a ser una fila propia para que el
   logo quede pegado a la frase, como parte de ella. */
.episode-tile__soon-line {
  display: contents;
}

.episode-tile__soon-sub {
  color: var(--ivory);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.9;
}

.episode-tile__soon-babidibu {
  width: 148px;
  height: auto;
  margin-top: 6px;
}

/* Botón chico para entrar directo al canal, sin esperar a que suba
   un episodio nuevo — la card en sí no es un link (todavía no hay
   nada que ver), pero esto sí lleva a algo real ahora mismo. */
.episode-tile__soon-visit {
  align-self: stretch;
  width: 100%;
  margin-top: auto;
  padding: 8px 20px;
  border: 1px solid rgba(216, 178, 92, 0.55);
  border-radius: 999px;
  background: rgba(216, 178, 92, 0.28);

  color: var(--ivory);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;

  transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
  animation: soonVisitPulse 2.6s ease-in-out infinite;
}

.episode-tile__soon-visit:hover {
  background: rgba(216, 178, 92, 0.4);
  border-color: rgba(216, 178, 92, 0.85);
  transform: translateY(-2px);
  animation-play-state: paused;
}

/* Pulso suave y constante para invitar al click — sin ser agresivo,
   solo un "respiro" de brillo/escala en el fondo y el borde. */
@keyframes soonVisitPulse {
  0%, 100% {
    background: rgba(216, 178, 92, 0.28);
    border-color: rgba(216, 178, 92, 0.55);
    box-shadow: 0 0 0 rgba(216, 178, 92, 0);
    transform: scale(1);
  }
  50% {
    background: rgba(216, 178, 92, 0.42);
    border-color: rgba(216, 178, 92, 0.9);
    box-shadow: 0 0 14px rgba(216, 178, 92, 0.35);
    transform: scale(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  .episode-tile__soon-visit {
    animation: none;
  }
}

/* ============================================================
   Álbum: portada placeholder (Volumen 2 todavía no subida)
   ============================================================ */
.album-section__cover-placeholder {
  aspect-ratio: 1 / 1;
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px dashed rgba(246, 241, 231, 0.25);
  border-radius: 14px;

  background:
    radial-gradient(circle at 30% 30%, rgba(217, 70, 239, 0.10), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(103, 232, 249, 0.10), transparent 55%),
    var(--violet-deep);

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);

  color: var(--ivory);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.5;
  opacity: 0.7;
}

.album-section__cover-placeholder small {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 500;
  opacity: 0.7;
  text-transform: none;
  letter-spacing: 0.02em;
}

/* ============================================================
   HISTORIA
   ============================================================ */
/* Layout apilado y centrado: título + párrafo arriba (ocupando el
   mismo ancho que la fila de cards), la fila de cards debajo — en
   vez de intentar una fila lado a lado que en muchos anchos de
   escritorio terminaba envolviendo igual, con el texto angosto y
   descentrado respecto de las cards. */
.historia-section {
  width: 100%;
  padding: clamp(48px, 8vh, 96px) 20px;
  background: var(--violet-deep);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(32px, 5vh, 56px);
}

.historia-section__text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  gap: 14px;
  width: min(920px, 100%);
}

.historia-section__text .section-divider {
  justify-content: center;
}

.historia-section__body {
  color: var(--ivory);
  font-family: var(--font-ui);
  font-size: clamp(16px, 1.3vw, 18px);
  font-weight: 400;
  line-height: 1.7;
  opacity: 0.9;
  margin: 0;
}

.historia-section__body strong {
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--ivory);
}

/* Las 3 cards se estiran a la misma altura que la columna de texto
   (título + párrafo) en vez de quedar como iconitos chicos sueltos. */
.historia-section__visual {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(14px, 2vw, 28px);
  flex-wrap: wrap;
}

.historia-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.historia-slot__image {
  position: relative;
  flex: 1 1 auto;
  width: clamp(150px, 15vw, 240px);
  min-height: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(216, 178, 92, 0.3);
  border-radius: 14px;
  overflow: hidden;

  background:
    radial-gradient(circle at 50% 35%, rgba(216, 178, 92, 0.10), transparent 60%),
    linear-gradient(160deg, rgba(46, 24, 74, 0.7), rgba(27, 15, 46, 0.55));

  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
  transition:
    transform .4s cubic-bezier(.22, 1, .36, 1),
    border-color .4s ease,
    box-shadow .4s ease;
  animation: historiaCardGlow 5s ease-in-out infinite;
}

/* Marco fino dorado en las esquinas — asoma apenas al pasar el
   mouse, para que la card se sienta "enmarcada" sin recargarla. */
.historia-slot__image::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 2;
  border: 1px solid rgba(216, 178, 92, 0);
  border-radius: 9px;
  pointer-events: none;
  transition: border-color .4s ease, inset .4s ease;
}

.historia-slot:hover .historia-slot__image {
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(216, 178, 92, 0.6);
  box-shadow:
    0 22px 44px rgba(0, 0, 0, 0.4),
    0 0 26px rgba(216, 178, 92, 0.18);
}

.historia-slot:hover .historia-slot__image::before {
  inset: 6px;
  border-color: rgba(216, 178, 92, 0.5);
}

/* Brillo del borde "respirando" muy sutil, todo el tiempo, no solo
   al pasar el mouse. */
@keyframes historiaCardGlow {
  0%, 100% {
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
  }
  50% {
    box-shadow:
      0 16px 36px rgba(0, 0, 0, 0.35),
      0 0 20px rgba(216, 178, 92, 0.14);
  }
}

/* Desfasadas entre sí para que no "respiren" las 3 al unísono. */
.historia-slot:nth-of-type(1) .historia-slot__image { animation-delay: 0s; }
.historia-slot:nth-of-type(2) .historia-slot__image { animation-delay: 1.2s; }
.historia-slot:nth-of-type(3) .historia-slot__image { animation-delay: 2.4s; }

/* Destello diagonal que recorre la card cada tanto — una franja de
   luz angosta, sutil, no una animación de "cargando". */
.historia-slot__image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;

  background: linear-gradient(
    115deg,
    transparent 40%,
    rgba(255, 255, 255, 0.16) 48%,
    rgba(255, 244, 210, 0.28) 50%,
    rgba(255, 255, 255, 0.16) 52%,
    transparent 60%
  );

  transform: translateX(-140%);
  animation: historiaCardShine 6s ease-in-out infinite;
}

.historia-slot:nth-of-type(1) .historia-slot__image::after { animation-delay: .6s; }
.historia-slot:nth-of-type(2) .historia-slot__image::after { animation-delay: 1.8s; }
.historia-slot:nth-of-type(3) .historia-slot__image::after { animation-delay: 3s; }

@keyframes historiaCardShine {
  0%, 18% {
    transform: translateX(-140%);
  }
  38%, 100% {
    transform: translateX(140%);
  }
}

/* object-fit: contain (no recortar) — las fotos originales son
   horizontales (3 personas en fila); si se recortan para llenar una
   card vertical solo queda una persona en el medio. Mostrando la
   foto completa, apoyada sobre un fondo degradé a tono, se ve
   prolija y sigue leyéndose como una card vertical. */
.historia-slot__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

/* Cápsula fina alrededor del nombre — borde dorado sutil, no un
   botón pesado. */
.historia-slot__label {
  display: inline-block;
  padding: 6px 18px;
  border: 1px solid rgba(216, 178, 92, 0.4);
  border-radius: 999px;

  color: var(--gold-title);
  font-family: var(--font-ui);
  font-size: clamp(14px, 1.3vw, 17px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Botón "Conocé más" — mismo lenguaje visual que el CTA de las
   cards de episodio (texto + flechita), para que quede clarísimo
   que la card no es solo una foto, hay más para ver adentro. */
.historia-slot__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  background: none;
  border: none;
  padding: 4px 2px;
  cursor: pointer;

  color: var(--gold-light);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  transition: transform 0.25s ease, color 0.25s ease;
}

.historia-slot__more svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  transition: transform 0.25s ease;
}

.historia-slot__more:hover {
  color: var(--gold);
}

.historia-slot__more:hover svg {
  transform: translateX(3px);
}

/* ============================================================
   Modales "Conocé más" (Trillizas / Libro Mágico / Trixipop)
   ============================================================ */
.lore-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.lore-modal.is-open {
  display: flex;
}

.lore-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 5, 18, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.lore-modal__panel {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: 85vh;
  overflow-y: auto;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding: clamp(32px, 4vw, 48px) clamp(24px, 4vw, 40px) clamp(28px, 4vw, 40px);
  border-radius: 18px;
  border: 1px solid rgba(216, 178, 92, 0.35);

  background:
    radial-gradient(circle at 20% 0%, rgba(216, 178, 92, 0.08), transparent 55%),
    linear-gradient(160deg, #241333, #1b0f2e 65%);

  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.55),
    0 0 40px rgba(216, 178, 92, 0.1);

  animation: loreModalIn 0.3s cubic-bezier(.22, 1, .36, 1);
}

/* Retrato circular con marco dorado — mismo lenguaje que las cards
   de la sección Historia (marco + glow), para que el modal se sienta
   una extensión de la card en la que se hizo click, no una ventana
   de texto suelta y genérica. */
.lore-modal__media {
  width: 112px;
  height: 112px;
  flex-shrink: 0;
  margin-bottom: 4px;

  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(216, 178, 92, 0.55);

  background: radial-gradient(circle at 50% 30%, rgba(216, 178, 92, 0.14), transparent 65%), var(--violet-deep);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.45),
    0 0 26px rgba(216, 178, 92, 0.16);
}

.lore-modal__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}

.lore-modal__divider {
  margin: 14px 0 12px;
}

@keyframes loreModalIn {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.lore-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;

  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(216, 178, 92, 0.12);
  border: 1px solid rgba(216, 178, 92, 0.35);
  border-radius: 50%;
  color: var(--gold-light);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;

  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.lore-modal__close:hover {
  background: rgba(216, 178, 92, 0.24);
  border-color: rgba(216, 178, 92, 0.6);
  transform: rotate(90deg);
}

.lore-modal__title {
  align-self: stretch;
  margin: 0 0 18px;
  text-align: center;

  color: var(--gold-title);
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 600;
  line-height: 1.2;
  text-shadow: 0 0 18px rgba(232, 201, 123, 0.35);
}

.lore-modal__body {
  align-self: stretch;
  margin: 0;
  color: var(--ivory);
  font-family: var(--font-ui);
  font-size: clamp(15px, 1.6vw, 17px);
  font-weight: 400;
  line-height: 1.7;
  text-align: left;
  opacity: 0.92;
}

.lore-modal__body + .lore-modal__traits {
  margin-top: 18px;
}

.lore-modal__traits + .lore-modal__body {
  margin-top: 18px;
}

/* Lista de las 3 fuerzas (Alma / Mente / Cuerpo) — cada una en su
   propia fila, con un diamante dorado como viñeta (mismo lenguaje
   que el separador de títulos), para que se lean como conceptos
   distintos y no como una frase corrida más. */
.lore-modal__traits {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 14px clamp(16px, 3vw, 22px);
  list-style: none;

  border: 1px solid rgba(216, 178, 92, 0.22);
  border-radius: 12px;
  background: rgba(216, 178, 92, 0.05);
}

.lore-modal__trait {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.lore-modal__trait-diamond {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  transform: rotate(45deg) translateY(-2px);
  border: 1px solid var(--gold);
  background: var(--gold-light);
}

.lore-modal__trait-text {
  color: var(--ivory);
  font-family: var(--font-ui);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.5;
  opacity: 0.92;
}

.lore-modal__trait-text strong {
  color: var(--gold-title);
  font-weight: 700;
}

/* Cada fuerza con su propio color (mismo trío rosa/violeta/cian que
   ya se usa en los halos de fondo de las secciones), para que se
   distingan de un vistazo en vez de ser 3 líneas iguales. */
.lore-modal__trait--alma .lore-modal__trait-diamond {
  border-color: #ff23aa;
  background: #ff8ad4;
}
.lore-modal__trait--alma .lore-modal__trait-text strong {
  color: #ff8ad4;
}

.lore-modal__trait--mente .lore-modal__trait-diamond {
  border-color: #8e46ff;
  background: #c9a8ff;
}
.lore-modal__trait--mente .lore-modal__trait-text strong {
  color: #c9a8ff;
}

.lore-modal__trait--cuerpo .lore-modal__trait-diamond {
  border-color: #19dcff;
  background: #9aeeff;
}
.lore-modal__trait--cuerpo .lore-modal__trait-text strong {
  color: #9aeeff;
}

body.lore-modal-open {
  overflow: hidden;
}

/* Desktop: cada fuerza (Alma / Mente / Cuerpo) entra en un solo
   renglón — se ensancha un poco el modal (solo acá, mobile/tablet
   quedan igual) para que alcance el ancho real del texto más largo,
   y se fuerza a no partir la línea. En mobile/tablet, más angosto,
   se sigue partiendo en 2-3 líneas como corresponde a ese ancho. */
@media (min-width: 901px) {
  .lore-modal__panel {
    width: min(620px, 100%);
  }

  .lore-modal__trait-text {
    white-space: nowrap;
  }
}

/* Círculo dorado con la flecha adentro, en vez de una flecha suelta
   flotando entre las cards. */
.historia-arrow {
  align-self: center;
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;

  width: clamp(40px, 3.6vw, 52px);
  height: clamp(40px, 3.6vw, 52px);
  border-radius: 50%;
  border: 1.5px solid rgba(216, 178, 92, 0.5);

  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.08), transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(216, 178, 92, 0.14), transparent 70%),
    rgba(27, 15, 46, 0.6);

  color: var(--gold);
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 400;
  line-height: 1;

  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.35),
    0 0 16px rgba(216, 178, 92, 0.16);

  animation: historiaArrowGlow 3.4s ease-in-out infinite;
}

@keyframes historiaArrowGlow {
  0%, 100% {
    border-color: rgba(216, 178, 92, 0.5);
    box-shadow:
      0 10px 22px rgba(0, 0, 0, 0.35),
      0 0 16px rgba(216, 178, 92, 0.16);
  }
  50% {
    border-color: rgba(216, 178, 92, 0.85);
    box-shadow:
      0 10px 22px rgba(0, 0, 0, 0.35),
      0 0 24px rgba(216, 178, 92, 0.34);
  }
}

@media (max-width: 700px) {
  .historia-section {
    flex-direction: column;
    align-items: center;
  }

  .historia-section__text {
    align-items: center;
    text-align: center;
  }

  .historia-section__text .section-divider {
    justify-content: center;
  }

  .historia-section__visual {
    flex-direction: column;
    align-items: center;
  }

  .historia-slot__image {
    width: min(220px, 60vw);
    height: 220px;
    flex: 0 0 auto;
  }

  /* La caja cuadrada de mobile recorta mucho más que la de desktop
     (fotos verticales dentro de un marco 1:1) — con el mismo 30% de
     antes, el sujeto real (las chicas, el libro) quedaba muy abajo
     en el recuadro y se cortaba por debajo. Se baja la ventana de
     recorte para mostrar más de la mitad inferior de cada foto. */
  .historia-slot__image img {
    object-position: 50% 70%;
  }

  .historia-arrow {
    transform: rotate(90deg);
  }

  .historia-title-break {
    display: block;
  }
}

/* El título nuevo del hero ("Cada página abre un portal...") tiene 2
   líneas de texto más largas que el slogan original de una sola
   línea — se le permite que cada línea pueda achicarse/ajustar en
   vez de forzar nowrap (que lo cortaba en pantallas angostas). Solo
   en el borrador (index.html sigue con su slogan corto sin tocar). */
body.has-sections .hero-slogan {
  white-space: normal;
}

/* El sistema de tamaños del hero original tiene muchísimos breakpoints
   (por ancho Y por alto) pensados para el slogan corto de una sola
   línea del sitio en vivo. El título nuevo del borrador (2 oraciones,
   2 líneas fijas) es más largo y en varios de esos breakpoints
   terminaba envolviéndose en más de 2 líneas. Se fuerza acá un
   tamaño chico pero seguro con !important, para que gane siempre sin
   importar cuál de esas reglas viejas aplique en cada caso. */
@media (max-width: 700px) {
  body.has-sections .hero-slogan {
    font-size: clamp(28px, 7.2vw, 40px) !important;
  }
}

@media (min-width: 701px) {
  body.has-sections .hero-slogan {
    font-size: clamp(50px, 4.6vw, 80px) !important;
  }
}

/* El cálculo en vw de arriba asume que el ancho del grupo de botones
   crece siempre igual que el viewport, pero esa medida real depende
   también de la ALTURA de la ventana (hay breakpoints viejos que
   achican los botones en ventanas bajas sin achicar el ancho). Eso
   hacía que en ciertas resoluciones (ej. MacBook Air) el título se
   viera gigante y se envolviera en 4 líneas. Se reemplaza el cálculo
   por unidades de container query (cqw), que miden el ancho REAL del
   contenedor del título (que ya es igual al ancho del grupo de
   botones) en vez de adivinarlo a partir del viewport. */
body.has-sections .hero-slogan-wrap {
  container-type: inline-size;
}

/* La frase "Tres hermanas..." tiene que quedar siempre en 1 sola
   línea y siempre más chica que el título de abajo, en cualquier
   tamaño de pantalla — se calcula igual que el título, en base al
   ancho real de este mismo contenedor (cqw), con margen de sobra
   para que nunca llegue a envolverse. */
body.has-sections .hero-claim {
  white-space: nowrap;
}

@supports (container-type: inline-size) {
  body.has-sections .hero-claim {
    font-size: clamp(10px, 3cqw, 26px) !important;
  }
}

@supports (container-type: inline-size) {
  @media (min-width: 701px) {
    body.has-sections .hero-slogan {
      font-size: clamp(50px, 9.2cqw, 84px) !important;
    }
  }
}

/* ============================================================
   AJUSTES: pasada de pulido (hero, jerarquías, spacing)
   Todo scoped a body.has-sections — index.html no se toca.
   ============================================================ */

/* Logo más grande y más arriba (menos aire muerto entre la nav y el logo) */
body.has-sections .hero-logo {
  width: clamp(286px, 24.2vw, 374px);
  margin-bottom: 10px;
}

.hero-slogan__line {
  display: block;
}

/* Separador visual claro entre Álbum e Historia */
.section-boundary-divider {
  width: min(240px, 60%);
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(216, 178, 92, 0.55),
    transparent
  );
}

/* Más aire entre Redes y Suscripción (estaban muy pegadas) */
.post-sections-footer .hero-newsletter {
  margin-top: clamp(24px, 5vh, 48px);
}

/* ============================================================
   REDISEÑO: card del newsletter (solo esta sección — el
   .hero-newsletter del hero, que no pasa por .post-sections-footer,
   no se toca). Card moderna y limpia (sin marco ornamental), con
   halos de luz difusos detrás hechos solo con CSS. */

/* .hero-newsletter pasa a ser únicamente el contenedor que posiciona
   los halos; el fondo, borde y sombra de la card viven en
   .newsletter-card, pintada después (encima) de los halos, así el
   centro de cada halo queda tapado y solo se ve el brillo que
   sobresale alrededor del borde de la card. */
.post-sections-footer .hero-newsletter {
  position: relative;
  isolation: isolate;
}

.post-sections-footer .hero-newsletter::before,
.post-sections-footer .hero-newsletter::after,
.post-sections-footer .newsletter-halo {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  filter: blur(20px);
}

/* Halo violeta, centrado detrás de la card */
.post-sections-footer .hero-newsletter::before {
  left: 50%;
  top: 50%;
  width: clamp(420px, 60vw, 760px);
  height: clamp(340px, 46vw, 560px);
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(142, 70, 255, 0.32) 0%,
    rgba(142, 70, 255, 0.15) 30%,
    rgba(142, 70, 255, 0.05) 50%,
    transparent 72%
  );
}

/* Halo fucsia, sector inferior izquierdo */
.post-sections-footer .hero-newsletter::after {
  left: -10%;
  bottom: -16%;
  width: clamp(320px, 44vw, 520px);
  height: clamp(320px, 44vw, 520px);
  background: radial-gradient(
    circle,
    rgba(255, 35, 170, 0.32) 0%,
    rgba(255, 35, 170, 0.16) 25%,
    rgba(255, 35, 170, 0.06) 45%,
    transparent 70%
  );
}

/* Halo cian, sector inferior derecho */
.post-sections-footer .newsletter-halo--cyan {
  right: -10%;
  bottom: -18%;
  width: clamp(320px, 44vw, 520px);
  height: clamp(320px, 44vw, 520px);
  background: radial-gradient(
    circle,
    rgba(25, 220, 255, 0.28) 0%,
    rgba(25, 220, 255, 0.13) 30%,
    rgba(25, 220, 255, 0.05) 50%,
    transparent 72%
  );
}

/* Ángulo animable para el destello que recorre el borde — sin esto,
   la conic-gradient de abajo no puede animarse de forma continua
   (saltaría de golpe en vez de girar). Si el navegador no soporta
   @property, el borde queda con el degradé dorado fijo (sin girar),
   nunca roto. */
@property --newsletter-border-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes newsletterBorderSpin {
  to {
    --newsletter-border-angle: 360deg;
  }
}

.post-sections-footer .newsletter-card {
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: 540px;
  padding: clamp(24px, 4vh, 36px) clamp(20px, 4vw, 32px);

  display: flex;
  flex-direction: column;
  align-items: center;

  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 45%),
    #241735;
  border: 1.5px solid rgba(216, 178, 92, 0.22);
  border-radius: 24px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}

/* Destello que recorre el borde: un anillo aparte (no reemplaza el
   borde fijo de arriba), hecho con conic-gradient + máscara doble en
   "xor" para que solo quede visible la franja fina del contorno, y
   girando encima de la card con el ángulo animado de --newsletter-
   border-angle. */
.post-sections-footer .newsletter-card::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  z-index: 2;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;

  background: conic-gradient(
    from var(--newsletter-border-angle),
    transparent 0deg,
    rgba(255, 241, 199, 0.95) 12deg,
    rgba(216, 178, 92, 0.5) 34deg,
    transparent 80deg,
    transparent 360deg
  );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  animation: newsletterBorderSpin 5s linear infinite;
}

/* Toda esta sección (portal social + suscripción + footer) ocupa un
   viewport completo propio, y la parte de suscripción se agranda
   bastante respecto del tamaño heredado del hero (ahí era chico a
   propósito para entrar en un espacio muy ajustado; acá sobra
   lugar). También se separa el bloque de texto del form, que
   quedaba pegado. */
.post-sections-footer {
  min-height: 100vh;
  min-height: 100dvh;
  justify-content: flex-start;
}

@media (max-width: 700px) {
  /* En mobile el contenido (redes + card del newsletter + logos)
     casi nunca llega a llenar un viewport completo — forzarlo dejaba
     un colchón de espacio vacío debajo de los logos del footer. Se
     achica al alto real del contenido, igual que se hizo con el
     hero. */
  .post-sections-footer {
    min-height: auto;
  }
}

.post-sections-footer .follow-title {
  font-family: var(--font-ui);
  font-weight: 700;
}

.post-sections-footer .newsletter-title {
  font-family: var(--font-ui);
  font-size: clamp(14px, 1.2vw, 17px);
  font-weight: 600;
  line-height: 1.4;
  white-space: normal;
  max-width: 480px;
  margin: 0 auto 14px;
}

/* Forzado a 2 líneas ("Entrá al universo de" / "Las Trillizas de Oro
   y el Libro Mágico") en desktop — el <br> ya existe en el HTML,
   solo hay que habilitarlo acá (por defecto está oculto, pensado
   para otro breakpoint del hero). En mobile (ver @media abajo) pasa
   a 3 líneas más grandes, con el segundo <br> también habilitado. */
.post-sections-footer .newsletter-title-break {
  display: block;
}

.post-sections-footer .newsletter-text {
  font-family: var(--font-ui);
  font-size: clamp(13px, 1vw, 14px);
  font-weight: 400;
  white-space: normal;
  margin: 0 auto 28px;
}

/* En desktop la bajada entra en un solo renglón. En mobile (ver
   @media abajo) se permite que use 2 líneas, con letra más grande. */
@media (min-width: 701px) {
  .post-sections-footer .newsletter-text {
    white-space: nowrap;
  }
}

@media (max-width: 700px) {
  .post-sections-footer .newsletter-card {
    max-width: 340px;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 22px;
    padding-bottom: 16px;
  }

  /* Título en 3 líneas cortas en vez de 2 largas — permite agrandar
     bastante la letra sin que ninguna línea se pase del ancho de la
     card. Se habilita el segundo <br> (oculto en desktop). */
  .post-sections-footer .newsletter-title-break2 {
    display: block;
  }

  .post-sections-footer .newsletter-title {
    font-size: 16px;
    white-space: nowrap;
  }

  /* La bajada blanca pasa a 2 líneas (no 1 forzada), con letra más
     grande ahora que hay lugar de sobra. */
  .post-sections-footer .newsletter-text {
    font-size: 13px;
    white-space: normal;
  }

  /* El espacio reservado para el mensaje de éxito/error (que casi
     siempre está vacío) sumado al padding de abajo dejaba un
     colchón grande debajo del input — se lo achica en mobile. */
  .post-sections-footer .newsletter-feedback {
    min-height: 0;
    margin-top: 6px;
    font-size: 11px;
  }
}

.post-sections-footer .newsletter-form {
  --newsletter-form-width: 420px;
  gap: 14px;
}

.post-sections-footer .newsletter-input {
  height: 54px;
  font-size: 15px;
}

.post-sections-footer .newsletter-button {
  width: 54px;
  height: 54px;
}

/* ============================================================
   PULIDO: sección "Serie" — jerarquía tipográfica más fuerte
   (solo esta sección; no toca el título de Historia ni de Álbum,
   que comparten la clase .section-title).
   ============================================================ */
/* Mismo tratamiento tipográfico exacto que el título del hero
   (.hero-slogan): misma serif, mismo peso, mismo tracking, mismo
   dorado y el mismo brillo — para que se sienta continuidad visual
   inmediata entre el hero y esta sección. Solo cambia el tamaño
   (más chico, es un título de sección, no el hero). */
#serie-section .section-eyebrow {
  font-size: clamp(20px, 2vw, 26px);
}

#serie-section .season-flourish .section-season {
  color: #fff;
  opacity: 1;
}

#serie-section .section-title {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.012em;
  text-transform: none;
  max-width: 680px;

  background: linear-gradient(
    180deg,
    var(--gold-title-shine-1),
    var(--gold-title-shine-2) 55%,
    var(--gold-title-shine-3)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--gold-title);
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.34),
    0 2px 0 rgba(113, 65, 16, 0.28),
    0 5px 14px rgba(0, 0, 0, 0.34),
    0 0 12px rgba(231, 181, 74, 0.10);
}

#serie-section .season-flourish {
  margin-top: 10px;
}

#serie-section .season-flourish .section-season {
  margin: 0;
}

/* ---------- Acentos ornamentales del encabezado de "Serie" ---------- */
.mini-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}

.mini-divider__line {
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 178, 92, 0.55));
}

.mini-divider .mini-divider__line:last-child {
  background: linear-gradient(90deg, rgba(216, 178, 92, 0.55), transparent);
}

.mini-divider__diamond {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  transform: rotate(45deg);
  border: 1px solid var(--gold);
  background: var(--gold-light);
}

.season-flourish {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.season-flourish__line {
  width: 24px;
  height: 1px;
  background: rgba(216, 178, 92, 0.4);
}

/* ============================================================
   SISTEMA DE HALOS DE FONDO (fucsia / violeta / cyan)
   ============================================================
   Manchas de luz difusas para que los fondos vacíos de Serie,
   Música, Historia y el bloque final (redes + newsletter + footer)
   tengan más atmósfera — el hero queda afuera a propósito, ya tiene
   su propio tratamiento de fondo (video + partículas).

   FIX (revisión): la primera versión usaba z-index:-1 para los
   halos. Aunque en teoría un z-index negativo pinta encima del
   fondo propio de la sección (no detrás), en la práctica quedaban
   opacados por blur(90px) + opacity baja + alfas bajos del propio
   gradiente — resultado: prácticamente invisibles. Ahora:
     - los halos van con z-index: 0 (no negativo),
     - el CONTENIDO real de cada sección (heading, grid, cards, etc.)
       pasa a position:relative + z-index:1 o más, así siempre queda
       por encima aunque el halo tenga z-index 0,
     - blur mucho más bajo (20px, no 90-100px) para que el color se
       note en vez de disolverse,
     - alfas más altos en los propios stops del radial-gradient,
     - tamaños grandes en px (450-900px), no vw chicos.
   ============================================================ */

.serie-section,
.album-section,
.historia-section,
.post-sections-footer {
  position: relative;
  isolation: isolate;
}

.bg-halo {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  filter: blur(20px);
}

.bg-halo--fuchsia {
  background: radial-gradient(
    circle,
    rgba(255, 35, 170, 0.32) 0%,
    rgba(255, 35, 170, 0.16) 25%,
    rgba(255, 35, 170, 0.06) 45%,
    transparent 70%
  );
}

.bg-halo--violet {
  background: radial-gradient(
    circle,
    rgba(142, 70, 255, 0.32) 0%,
    rgba(142, 70, 255, 0.15) 30%,
    rgba(142, 70, 255, 0.05) 50%,
    transparent 72%
  );
}

.bg-halo--cyan {
  background: radial-gradient(
    circle,
    rgba(25, 220, 255, 0.28) 0%,
    rgba(25, 220, 255, 0.13) 30%,
    rgba(25, 220, 255, 0.05) 50%,
    transparent 72%
  );
}

/* ---------- Serie: fucsia lateral izquierdo + violeta suave a la derecha ---------- */
.serie-section__halo-a { top: -10%;  left: -14%;  width: clamp(340px, 50vw, 620px); height: clamp(340px, 50vw, 620px); }
.serie-section__halo-b { top: 20%;   right: -16%; width: clamp(380px, 55vw, 720px); height: clamp(380px, 55vw, 720px); }
.serie-section__halo-c { bottom: -14%; right: 10%; width: clamp(300px, 40vw, 480px); height: clamp(300px, 40vw, 480px); }

/* ---------- Música: cyan detrás del arte de tapa (izquierda), violeta grande detrás de las Trixi (derecha), fucsia como acento abajo ---------- */
.album-section__halo-a { top: 8%;    left: 8%;   width: clamp(360px, 46vw, 640px); height: clamp(360px, 46vw, 640px); }
.album-section__halo-b { top: 4%;    right: -12%; width: clamp(420px, 58vw, 900px); height: clamp(420px, 58vw, 900px); }
.album-section__halo-c { bottom: -12%; left: 30%; width: clamp(300px, 40vw, 480px); height: clamp(300px, 40vw, 480px); }

/* ---------- Historia: cyan arriba a la derecha, violeta a la izquierda, fucsia como acento abajo ---------- */
.historia-section__halo-a { top: -12%; right: -10%; width: clamp(340px, 48vw, 620px); height: clamp(340px, 48vw, 620px); }
.historia-section__halo-b { top: 30%;  left: -16%;  width: clamp(380px, 52vw, 680px); height: clamp(380px, 52vw, 680px); }
.historia-section__halo-c { bottom: -16%; left: 25%; width: clamp(300px, 38vw, 460px); height: clamp(300px, 38vw, 460px); }

/* ---------- Redes + newsletter + footer: violeta suave en el centro, cyan lateral ---------- */
.post-sections-footer__halo-a { top: 6%;  left: 50%;  width: clamp(420px, 60vw, 820px); height: clamp(420px, 60vw, 820px); transform: translateX(-50%); }
.post-sections-footer__halo-b { top: 14%; right: -14%; width: clamp(340px, 46vw, 600px); height: clamp(340px, 46vw, 600px); }
.post-sections-footer__halo-c { display: none; }

@media (max-width: 700px) {
  /* En mobile, sigue siendo grande relativo a la pantalla (para que
     efectivamente se note), pero un poco más contenido para no
     empujar el layout ni tapar cards con su borde. */
  .bg-halo {
    filter: blur(16px);
  }
}

/* ============================================================
   DESTELLOS MÁGICOS (fucsia / violeta / cyan / dorado)
   ============================================================
   Capa decorativa independiente por sección (fuera del hero, que
   tiene su propio tratamiento). Solo puntitos de luz simples —
   nada de cruces ni formas raras — que se encienden y apagan de a
   poco (parpadeo suave), como los que ya existían cerca de las
   Trixi Pop. Sutiles, no un fondo lleno de estrellas.

   z-index:1 (nunca negativo): por encima de los halos (z-index:0),
   por debajo del contenido real de cada sección (z-index:2). */
.magic-sparkles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.sparkle {
  position: absolute;
  opacity: 0;
  animation: sparkleBlink 5s ease-in-out infinite;
}

.sparkle--fuchsia { color: #ff3bbd; }
.sparkle--violet  { color: #9b63ff; }
.sparkle--cyan    { color: #38e4ff; }
.sparkle--gold    { color: #f4d77d; }

.sparkle--point {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 7px currentColor;
}

.sparkle--point-sm { width: 3px; height: 3px; box-shadow: 0 0 5px currentColor; }
.sparkle--point-lg { width: 6px; height: 6px; box-shadow: 0 0 8px currentColor; }
.sparkle--point-blur { filter: blur(1px); }

@keyframes sparkleBlink {
  0%, 100% {
    opacity: 0;
    transform: scale(0.6);
  }
  50% {
    opacity: 0.8;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sparkle {
    animation: none;
    opacity: 0.5;
  }
}

/* ============================================================
   FADES entre secciones
   ============================================================
   Como todas estas secciones comparten el mismo violeta de fondo
   (--violet-deep), el corte entre una y otra debería ser invisible —
   pero los halos de arriba, al quedar recortados justo en el borde
   de cada sección (por su "overflow: hidden"), podían dejar un corte
   duro y recto donde el color del halo se corta de golpe. Estas
   franjas finas en degradé (mismo violeta → transparente) tapan
   apenas ese borde, así la transición entre secciones se siente
   difuminada en vez de una línea recta. */
.serie-section::before,
.historia-section::before,
.post-sections-footer::before,
.album-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  height: clamp(110px, 18vh, 240px);
  /* Se mantiene sólido (mismo violeta que el fondo) durante la
     primera mitad de la franja, y recién ahí empieza a desvanecer —
     así tapa por completo el borde recortado del halo (que llega con
     bastante intensidad hasta el límite de la sección) en vez de
     dejarlo entreverse a través de un degradé lineal simple. */
  background: linear-gradient(
    to bottom,
    var(--violet-deep) 0%,
    var(--violet-deep) 45%,
    transparent 100%
  );
  pointer-events: none;
}

.serie-section::after,
.historia-section::after,
.post-sections-footer::after,
.album-section__fade-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  height: clamp(110px, 18vh, 240px);
  background: linear-gradient(
    to top,
    var(--violet-deep) 0%,
    var(--violet-deep) 45%,
    transparent 100%
  );
  pointer-events: none;
}

.serie-section::after,
.historia-section::after,
.post-sections-footer::after {
  content: "";
}

/* El hero no tiene fondo violeta (es video oscuro), así que el fade
   genérico de arriba no alcanza a disimular la costura hero → Serie.
   Acá se pisa ESE fade puntual con uno propio que arranca casi negro
   (el mismo tono al que ya llega el overlay del hero en su borde
   inferior) y recién más abajo pasa a violeta — la costura deja de
   verse como un corte de golpe entre negro y violeta. */
body.has-sections .serie-section::before {
  background: linear-gradient(
    to bottom,
    rgba(8, 3, 12, 0.92) 0%,
    var(--violet-deep) 85%,
    var(--violet-deep) 100%
  );
}