/* ============================================================
   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;

  --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: 0;
  transform: translateY(-38px) scale(0.985);

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

  animation:
    logoReveal 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.12s forwards,
    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;
  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: 0;

  animation: sloganHaloReveal 1.1s ease-out 1.15s forwards;
}
.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;

  color: #e4b64f;

  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:
    sloganSettleGlow 1.2s ease-out 3.75s forwards,
    sloganGlowBreathe 4s ease-in-out 4.95s 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: 0;
  transform: translateY(18px) scale(0.985);

  animation: ctaReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) 3.9s forwards;
}

@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: 600;
  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: 0;
  transform: translateY(12px);

  animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 4.8s forwards;
}

.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-light);
  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: 0;
  transform: translateY(12px);

  animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 4.88s forwards;
}

.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: 0;
  transform: translateY(12px);
  filter: blur(3px);

  animation: linkReveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.follow-link:nth-child(1) { animation-delay: 5s; }
.follow-link:nth-child(3) { animation-delay: 5.08s; }
.follow-link:nth-child(5) { animation-delay: 5.16s; }

@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: 0;
  animation: fadeIn 0.6s ease 3.1s forwards;
}

@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: 0;
  transform: translateY(12px);
  animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 5.1s forwards;
}

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

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

  color: var(--gold-light);
  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;
}

/* 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: 0;
  transform: translateY(12px);
  animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 5.3s forwards;
}

/* 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 es más bajo que el de TV (proporción real de cada
   archivo): se alinea por abajo para que ambos "pisen" la misma
   línea en vez de quedar centrado con aire de más debajo. */
.footer-logo {
  align-self: flex-end;
}

.footer-logo,
.footer-logo-tv {
  width: clamp(95px, 8vw, 115px);
  height: auto;
  opacity: 0.72;
  filter: drop-shadow(0 0 10px rgba(232, 201, 123, 0.12));
}

.footer-logo-tv {
  width: calc(clamp(95px, 8vw, 115px) * 1.155);
}

.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,
  .footer-logo-tv {
    width: 83px;
    height: auto;
  }

  .footer-logo-tv {
    width: calc(83px * 1.155);
  }
}


/* ---------------- 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,
  .footer-logo-tv {
    width: 73px;
    height: auto;
  }

  .footer-logo-tv {
    width: calc(73px * 1.155);
  }

  /* --------------------------------------------------------
     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;
  }

}