/* =====================================================
   OCAMMYS THEME — MAIN STYLESHEET v1.0.0
   ===================================================== */

/* ── 0. PRELOADER: secuencia de arranque ───────────── */
/* El fondo son dos compuertas (arriba/abajo) que se abren al salir.
   Estados iniciales aquí; main.js (GSAP) anima la secuencia. */
.site-preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Último recurso CSS: solo si JS falla completamente */
  animation: preloader-css-hide 0.4s 3.5s ease forwards;
}

body.preloader-active {
  overflow: hidden;
}

@keyframes preloader-css-hide {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* Compuertas: fondo con una retícula de puntos, como una placa técnica */
.preloader-door {
  position: absolute;
  left: 0;
  right: 0;
  height: 50.5%;
  background-color: #07070c;
  background-image: radial-gradient(rgba(192, 132, 252, 0.13) 1px, transparent 1.6px);
  background-size: 22px 22px;
}

.preloader-door--top    { top: 0;    background-position: 0 0; }
.preloader-door--bottom { bottom: 0; background-position: 0 100%; }

.preloader-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 4vh, 40px);
}

/* Foco de luz detrás del logo */
.preloader-content::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 38%;
  width: 150%;
  aspect-ratio: 1.6;
  background: radial-gradient(closest-side, rgba(115, 4, 197, 0.32), rgba(115, 4, 197, 0.08) 60%, transparent);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
}

.preloader-frame {
  position: relative;
  padding: clamp(18px, 3vw, 30px) clamp(22px, 3.6vw, 40px);
}

/* Esquinas de mira (HUD) */
.preloader-corner {
  position: absolute;
  width: clamp(14px, 2vw, 22px);
  height: clamp(14px, 2vw, 22px);
  border: 0 solid #c084fc;
  opacity: 0;
}

.preloader-corner--tl { top: 0;    left: 0;  border-top-width: 2px;    border-left-width: 2px; }
.preloader-corner--tr { top: 0;    right: 0; border-top-width: 2px;    border-right-width: 2px; }
.preloader-corner--bl { bottom: 0; left: 0;  border-bottom-width: 2px; border-left-width: 2px; }
.preloader-corner--br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }

.preloader-logo {
  position: relative;
  width: min(420px, 74vw);
}

.preloader-logo-img {
  display: block;
  width: 100%;
  height: auto;
  /* Oculto hasta que el haz lo escanee */
  clip-path: inset(0 0 100% 0);
}

/* Desdoble de color: el logo como máscara, en magenta y azul */
.preloader-ghost {
  position: absolute;
  inset: 0;
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  mix-blend-mode: screen;
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}

.preloader-ghost--a { background: #f0abfc; }
.preloader-ghost--b { background: #4d6bff; }

/* Haz de escaneo */
.preloader-scan {
  position: absolute;
  left: -8%;
  right: -8%;
  top: 0;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #f0abfc 18%, #ffffff 50%, #f0abfc 82%, transparent);
  box-shadow: 0 0 18px 4px rgba(192, 132, 252, 0.65);
  opacity: 0;
}

/* Lectura de carga: etiqueta, porcentaje y 20 celdas */
.preloader-hud {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  row-gap: 10px;
  width: min(420px, 74vw);
  font-family: 'Montserrat', 'Helvetica Neue', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-text-muted, #9278a8);
  /* Visible desde el primer pintado, sin esperar al JS: da respuesta
     inmediata y adelanta el primer contenido (FCP) */
}

.preloader-hud-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "Encendiendo nuestro multiverso" entero en una línea en teléfonos */
@media (max-width: 600px) {
  .preloader-hud-label {
    font-size: 0.56rem;
    letter-spacing: 0.1em;
  }
}

@media (max-width: 360px) {
  .preloader-hud-label {
    letter-spacing: 0.06em;
  }
}

.preloader-hud-pct {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--color-text, #f4efff);
}

.preloader-cells {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(20, minmax(0, 1fr));
  gap: 3px;
}

.preloader-cells i {
  height: 6px;
  border-radius: 1px;
  background: rgba(192, 132, 252, 0.14);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.preloader-cells i.is-on {
  background: #d58cf5;
  box-shadow: 0 0 8px rgba(240, 171, 252, 0.6);
}

/* El contenido se pinta debajo del preloader (que es opaco) desde el
   principio: así el navegador lo da por mostrado antes (mejor LCP) y las
   compuertas se abren sobre la página ya dibujada. */

/* Movimiento reducido: el logo se ve quieto, sin escaneo ni desdoble */
@media (prefers-reduced-motion: reduce) {
  .site-preloader {
    animation: preloader-css-hide 0.1s 2s ease forwards;
  }
  .preloader-logo-img {
    clip-path: none;
  }
  .preloader-corner {
    opacity: 1;
  }
}

/* ── 1. CUSTOM PROPERTIES ─────────────────────────── */
:root {
  --color-bg:           #050509;
  --color-bg-secondary: #0C0C14;
  --color-primary:      #7304c5;
  --color-accent:       #C084FC;
  --color-cyan:         #a717c4;
  --color-pink:         #F0ABFC;
  --color-royal:        #1a4bde;
  --color-text:         #F4EFFF;
  --color-text-muted:   #9278a8;
  --color-border:       rgba(255, 255, 255, 0.07);

  /* Gradiente iridiscente — el "efecto vidrio/prisma" de la marca */
  --gradient-iridescent: linear-gradient(
    135deg,
    #7304c5  0%,
    #a717c4 28%,
    #f0abfc 50%,
    #c084fc 72%,
    #a717c4 100%
  );

  /* Gradiente sutil para bordes y líneas decorativas — toque royal en el centro */
  --gradient-prism: linear-gradient(
    90deg,
    #7304c5 0%,
    #1a4bde 40%,
    #a717c4 65%,
    #7304c5 100%
  );

  --font-display: 'Montserrat', 'Helvetica Neue', sans-serif;
  --font-heading: 'Montserrat', 'Helvetica Neue', sans-serif;
  --font-body:    'DM Sans', 'Helvetica Neue', Arial, sans-serif;

  --nav-height:      80px;
  --section-pad:     100px;
  --container-max:   1280px;
  --radius:          12px;
  --radius-sm:       6px;

  --ease-out:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in:    cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-inout: cubic-bezier(0.645, 0.045, 0.355, 1.0);
  --t-fast:     0.2s;
  --t-smooth:   0.4s;
}

/* ── 2. RESET & BASE ──────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  /* scroll-behavior: smooth eliminado — conflicto con GSAP ScrollTrigger causa lag */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg, #0A0A0F);
  color: var(--color-text, #F0EBF8);
  line-height: 1.6;
  overflow-x: hidden;
}

body.nav-open {
  overflow: hidden;
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-accent, #C084FC);
  text-decoration: none;
  transition: color var(--t-fast) ease;
}

a:hover {
  color: var(--color-text, #F0EBF8);
}

ul,
ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: 1.1;
  color: var(--color-text, #F0EBF8);
}

button {
  font-family: var(--font-body);
}

:focus-visible {
  outline: 2px solid var(--color-accent, #C084FC);
  outline-offset: 3px;
}

/* ── 3. LAYOUT ────────────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: var(--section-pad) 0;
}

.section-header {
  text-align: center;
  margin-bottom: 64px;
}

.section-eyebrow {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent, #C084FC);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--color-text, #F0EBF8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.section-subtitle {
  font-size: 1.05rem;
  color: var(--color-text-muted, #8B7AAD);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ── 4. BUTTONS ───────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--t-smooth) var(--ease-out),
              color var(--t-smooth) var(--ease-out),
              border-color var(--t-smooth) var(--ease-out),
              box-shadow var(--t-smooth) var(--ease-out),
              transform var(--t-fast) ease;
  text-decoration: none;
  border: 2px solid transparent;
  line-height: 1;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  background-color: var(--color-primary, #7304c5);
  color: var(--color-text, #F0EBF8);
  border-color: var(--color-primary, #7304c5);
}

.btn-primary:hover {
  background-color: transparent;
  color: var(--color-text, #F4EFFF);
  border-color: var(--color-primary, #7304c5);
  box-shadow: 0 0 28px rgba(115, 4, 197, 0.5), 0 0 60px rgba(167, 23, 196, 0.12), 0 0 90px rgba(26, 75, 222, 0.07);
}

.btn-ghost {
  background-color: transparent;
  color: var(--color-text, #F4EFFF);
  border-color: rgba(192, 132, 252, 0.5);
  position: relative;
}

.btn-ghost:hover {
  background-color: rgba(115, 4, 197, 0.15);
  color: var(--color-text, #F4EFFF);
  border-color: var(--color-accent, #C084FC);
  box-shadow: 0 0 24px rgba(192, 132, 252, 0.3), 0 0 48px rgba(167, 23, 196, 0.1);
}

.btn-nominar {
  background-color: transparent;
  color: var(--color-accent, #C084FC);
  border-color: var(--color-accent, #C084FC);
  padding: 10px 22px;
  font-size: 0.78rem;
}

.btn-nominar:hover {
  background: linear-gradient(135deg, #7304c5, #a717c4);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 0 28px rgba(115, 4, 197, 0.45), 0 0 48px rgba(167, 23, 196, 0.15);
}

/* ── 5. NAVBAR ────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background-color: transparent;
  transition: background-color var(--t-smooth) var(--ease-out),
              transform var(--t-smooth) var(--ease-out),
              box-shadow var(--t-smooth) var(--ease-out);
  /* background-color no se puede acelerar: pedirlo solo creaba una capa extra */
  will-change: transform;
}

/* El hero ocupa todo el viewport sin importar el header fixed */
.front-page-main > :first-child {
  margin-top: 0;
}

.site-header.scrolled {
  background-color: rgba(10, 10, 15, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.site-header.hidden {
  transform: translateY(-100%);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
  gap: 32px;
}

.site-logo {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--color-text, #F0EBF8);
  text-decoration: none;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.site-logo span {
  color: var(--color-accent, #C084FC);
}

.site-logo img {
  height: 44px;
  width: auto;
}

.site-logo:hover {
  color: var(--color-text, #F0EBF8);
}

/* ── Custom logo image (WordPress the_custom_logo()) ── */
.site-logo--img {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* El <a> que genera WP (custom-logo-link) */
.site-logo--img .custom-logo-link {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

/* La imagen en sí — navbar */
.site-logo--img .custom-logo-link img,
.site-logo--img .custom-logo {
  height: 58px !important;
  width: auto !important;
  max-width: 210px !important;
  object-fit: contain;
  display: block;
  /* Hace el fondo negro "invisible" sobre fondos oscuros */
  mix-blend-mode: screen;
}

/* Logo en footer: más grande */
.site-logo--footer .custom-logo-link img,
.site-logo--footer .custom-logo {
  height: 100px !important;
  max-width: 300px !important;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
  flex: 1;
  justify-content: center;
}

.primary-nav li {
  list-style: none;
}

.primary-nav a {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted, #8B7AAD);
  text-decoration: none;
  position: relative;
  white-space: nowrap;
  transition: color var(--t-fast) ease;
}

/* Pantallas medianas: "Occamy's Magazine" es largo y el menú se apretaba */
@media (min-width: 1025px) and (max-width: 1279px) {
  .primary-nav {
    gap: 22px;
  }
  .primary-nav a {
    font-size: 0.74rem;
    letter-spacing: 0.04em;
  }
}

.primary-nav a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-accent, #C084FC);
  transition: width var(--t-smooth) var(--ease-out);
}

.primary-nav a:hover,
.primary-nav .current-menu-item a,
.primary-nav .current_page_item a {
  color: var(--color-text, #F0EBF8);
}

.primary-nav a:hover::after,
.primary-nav .current-menu-item a::after {
  width: 100%;
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px;
  flex-shrink: 0;
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-text, #F0EBF8);
  transition: all var(--t-fast) ease;
}

.hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ── Menú móvil ──────────────────────────────────────
   Fondo de retícula de puntos con luz morada (como el preloader). Se abre con
   un barrido en diagonal: el borde izquierdo del recorte entra inclinado desde
   la derecha. Los enlaces suben desde una máscara, en cascada (--i). */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  flex-direction: column;
  padding: 0 20px calc(22px + env(safe-area-inset-bottom));
  overflow-y: auto;
  background-color: #07070c;
  background-image:
    radial-gradient(ellipse 80% 55% at 85% 0%, rgba(115, 4, 197, 0.35), transparent 70%),
    radial-gradient(ellipse 70% 45% at 0% 100%, rgba(167, 23, 196, 0.22), transparent 70%),
    radial-gradient(rgba(192, 132, 252, 0.12) 1px, transparent 1.6px);
  background-size: auto, auto, 22px 22px;
  clip-path: polygon(115% 0, 100% 0, 100% 100%, 130% 100%);
  transition: clip-path 0.6s cubic-bezier(0.77, 0, 0.18, 1);
}

.nav-overlay.active {
  display: flex;
}

.nav-overlay.is-open {
  clip-path: polygon(-30% 0, 100% 0, 100% 100%, -15% 100%);
}

body.nav-open {
  overflow: hidden;
}

/* Barra superior: logo + cerrar, a la altura del header */
.nav-overlay-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  height: var(--nav-height);
}

.nav-overlay-logo img {
  display: block;
  width: auto;
  height: 46px;
}

.nav-overlay-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -8px;
  border: 0;
  background: none;
  color: var(--color-text, #F0EBF8);
  cursor: pointer;
  transform: rotate(-90deg);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.25s, opacity 0.3s ease 0.25s, color var(--t-fast) ease;
}

.nav-overlay.is-open .nav-overlay-close {
  transform: none;
  opacity: 1;
}

.nav-overlay-close:hover {
  color: var(--color-accent, #C084FC);
}

/* Enlaces */
.nav-overlay-links {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  padding: 16px 0 24px;
}

.nav-overlay-links ol {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-overlay-links li + li {
  margin-top: 6px;
}

.nav-overlay-links a {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 4px 0;
  text-decoration: none;
  color: var(--color-text, #F0EBF8);
}

.nav-overlay-num {
  min-width: 2ch;
  padding-top: 0.55em;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--color-text-muted, #9278a8);
  opacity: 0;
  transition: opacity 0.4s ease calc(0.3s + var(--i) * 0.06s), color var(--t-fast) ease;
}

/* La máscara: el texto sube desde debajo de su propia línea */
.nav-overlay-label {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
}

.nav-overlay-label span {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 10vw, 2.7rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  transform: translateY(110%);
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) calc(0.22s + var(--i) * 0.06s);
}

.nav-overlay.is-open .nav-overlay-label span {
  transform: none;
}

.nav-overlay.is-open .nav-overlay-num {
  opacity: 1;
}

/* Al tocar: el texto se rellena con el degradado de la marca */
.nav-overlay-links a:hover .nav-overlay-label span,
.nav-overlay-links a:focus-visible .nav-overlay-label span {
  background: linear-gradient(100deg, #a717c4 0%, #f0abfc 60%, #c084fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.nav-overlay-links a:hover .nav-overlay-num,
.nav-overlay-links a:focus-visible .nav-overlay-num {
  color: var(--color-accent, #C084FC);
}

/* Pie: votar + redes */
.nav-overlay-foot {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease 0.55s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.55s;
}

.nav-overlay.is-open .nav-overlay-foot {
  opacity: 1;
  transform: none;
}

.nav-overlay-cta {
  justify-content: center;
  width: 100%;
  padding-top: 16px;
  padding-bottom: 16px;
}

.nav-overlay-social {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.nav-overlay-social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(192, 132, 252, 0.25);
  border-radius: 50%;
  color: var(--color-text-muted, #9278a8);
  transition: color var(--t-fast) ease, border-color var(--t-fast) ease;
}

.nav-overlay-social a:hover {
  color: #fff;
  border-color: var(--color-accent, #C084FC);
}

.nav-overlay-note {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-text-muted, #9278a8);
}

@media (prefers-reduced-motion: reduce) {
  .nav-overlay,
  .nav-overlay-close,
  .nav-overlay-num,
  .nav-overlay-label span,
  .nav-overlay-foot {
    transition: none !important;
  }
}

/* ── 6. HERO SECTION ──────────────────────────────── */
.hero-section {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg, #050509);
}

/* Glow ambiental izquierdo */
.hero-section::before {
  content: '';
  position: absolute;
  left: -10%;
  top: 20%;
  width: 55%;
  height: 65%;
  background: radial-gradient(
    ellipse at center,
    rgba(115, 4, 197, 0.10) 0%,
    rgba(115, 4, 197, 0.04) 45%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

/* Ribbon holográfico — esquina superior derecha */
.hero-section::after {
  content: '';
  position: absolute;
  right: -8%;
  top: -15%;
  width: 42%;
  height: 75%;
  background: linear-gradient(
    135deg,
    rgba(115, 4, 197, 0.09) 0%,
    rgba(167, 23, 196, 0.07) 25%,
    rgba(240, 171, 252, 0.06) 50%,
    rgba(129, 140, 248, 0.08) 75%,
    rgba(167, 23, 196, 0.05) 100%
  );
  filter: blur(36px);
  transform: rotate(-18deg);
  pointer-events: none;
  z-index: 0;
  border-radius: 40%;
  will-change: transform;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
  min-height: 100vh;
  padding: calc(var(--nav-height) + 60px) 24px 80px;
  max-width: var(--container-max);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(52px, 6.5vw, 96px);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.01em;
  margin-bottom: 28px;
  color: var(--color-text, #F0EBF8);
  text-transform: uppercase;
}

.hero-title-line {
  display: block;
}

.hero-title-accent {
  background: var(--gradient-iridescent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero-desc {
  font-size: 1.1rem;
  color: var(--color-text-muted, #8B7AAD);
  max-width: 420px;
  line-height: 1.75;
  margin-bottom: 40px;
}

.hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Aviso de scroll del hero (sustituye a los botones) */
.hero-scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(28px, 4vw, 44px);
  color: var(--color-text-muted, #9278a8);
}

.hero-scroll-mouse {
  position: relative;
  display: block;
  width: 22px;
  height: 34px;
  border: 2px solid rgba(192, 132, 252, 0.6);
  border-radius: 12px;
}

.hero-scroll-dot {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 4px;
  height: 7px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--color-accent, #C084FC);
  animation: hero-scroll-dot 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes hero-scroll-dot {
  0%   { transform: translateY(0);    opacity: 0; }
  20%  { opacity: 1; }
  70%  { transform: translateY(11px); opacity: 0; }
  100% { transform: translateY(11px); opacity: 0; }
}

.hero-scroll-label {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* Pantallas táctiles: en vez de ratón, un teléfono con el dedo deslizando
   hacia arriba (el gesto real para bajar por la página en el móvil) */
@media (hover: none) and (pointer: coarse) {
  .hero-scroll-mouse {
    width: 20px;
    height: 36px;
    border-radius: 6px;
  }

  /* Altavoz del teléfono */
  .hero-scroll-mouse::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 50%;
    width: 6px;
    height: 2px;
    margin-left: -3px;
    border-radius: 1px;
    background: rgba(192, 132, 252, 0.6);
  }

  /* El dedo: un punto que sube dejando una estela */
  .hero-scroll-dot {
    top: auto;
    bottom: 6px;
    width: 7px;
    height: 7px;
    margin-left: -3.5px;
    border-radius: 50%;
    box-shadow: 0 5px 0 -1px rgba(192, 132, 252, 0.35), 0 10px 0 -2px rgba(192, 132, 252, 0.15);
    animation-name: hero-scroll-swipe;
  }
}

@keyframes hero-scroll-swipe {
  0%   { transform: translateY(0);     opacity: 0; }
  20%  { opacity: 1; }
  70%  { transform: translateY(-16px); opacity: 0; }
  100% { transform: translateY(-16px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-dot {
    animation: none;
    opacity: 1;
  }
}

/* 3D Canvas side */
.hero-visual {
  position: relative;
  height: 100%;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Oculto en desktop, visible solo en mobile vía @media */
.canvas-scroll-zone {
  display: none;
}

#hero-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  min-height: 480px;
  animation: hero-float 3.4s ease-in-out infinite;
}

@keyframes hero-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-16px); }
}

.hero-fallback {
  display: none;
  width: 100%;
  height: 100%;
  min-height: 480px;
  object-fit: contain;
}

body.no-webgl #hero-canvas {
  display: none;
}

body.no-webgl .hero-fallback {
  display: block;
}

/* Imagen fija del trofeo: es lo que se ve hasta que el visor 3D carga
   (slot="poster"). Antes de que exista el visor, es un hijo normal. */
.hero-trophy-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── 7. ABOUT SECTION ─────────────────────────────── */
.about-section {
  background-color: var(--color-bg-secondary, #0C0C14);
}

.about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.about-text h2 {
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  font-weight: 800;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.about-text p {
  color: var(--color-text-muted, #8B7AAD);
  line-height: 1.85;
  font-size: 1.02rem;
  margin-bottom: 16px;
}

.about-text p:last-of-type {
  margin-bottom: 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* ── 8. CATEGORIES SECTION ────────────────────────── */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.category-card {
  background: rgba(8, 8, 14, 0.9);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 36px 28px;
  transition: border-color var(--t-smooth) var(--ease-out),
              box-shadow var(--t-smooth) var(--ease-out),
              transform var(--t-smooth) var(--ease-out);
}

.category-card:hover {
  border-color: rgba(192, 132, 252, 0.45);
  box-shadow: 0 0 32px rgba(115, 4, 197, 0.2),
              inset 0 0 0 1px rgba(167, 23, 196, 0.06);
  transform: translateY(-5px);
}

.category-icon {
  width: 36px;
  height: 36px;
  margin-bottom: 20px;
  display: block;
  color: var(--color-accent, #C084FC);
  flex-shrink: 0;
}

.category-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.category-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--color-text, #F0EBF8);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.category-desc {
  font-size: 0.88rem;
  color: var(--color-text-muted, #8B7AAD);
  line-height: 1.7;
}

/* ── 9. JURY SECTION ──────────────────────────────── */
.jury-section {
  background-color: var(--color-bg-secondary, #0C0C14);
}

.jury-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.jury-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

.jury-card:focus-visible {
  outline: 2px solid var(--color-accent, #C084FC);
  outline-offset: 3px;
}

.jury-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.65s var(--ease-out);
}

.jury-card:hover .jury-card-img,
.jury-card:focus-visible .jury-card-img {
  transform: scale(1.06);
}

/* Placeholder cuando no hay foto */
.jury-card-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1A1428 0%, #0C0C18 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.jury-card-placeholder span {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  color: rgba(240, 235, 248, 0.4);
  text-transform: uppercase;
}

.jury-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 8, 22, 0.94) 0%,
    rgba(10, 8, 22, 0.55) 40%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity var(--t-smooth) var(--ease-out);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
}

.jury-card:hover .jury-card-overlay,
.jury-card:focus-visible .jury-card-overlay {
  opacity: 1;
}

.jury-card-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(to top, rgba(10, 10, 15, 0.9) 0%, transparent 100%);
  transition: opacity var(--t-smooth) var(--ease-out);
}

.jury-card:hover .jury-card-info {
  opacity: 0;
}

.jury-name {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-text, #F0EBF8);
  margin-bottom: 3px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.jury-role {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  color: var(--color-text-muted, #8B7AAD);
  letter-spacing: 0.05em;
}

.jury-name-hover {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--color-text, #F0EBF8);
  line-height: 1;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.jury-role-hover {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  color: rgba(240, 235, 248, 0.75);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── 10. COUNTDOWN SECTION ────────────────────────── */
/* Sin fondo propio ni líneas de borde: la sección comparte el fondo de la página
   y solo la distingue un resplandor que se apaga antes de llegar a los bordes,
   así no se nota dónde empieza ni dónde termina */
.countdown-section {
  padding: clamp(96px, 11vw, 150px) 0;
  background: transparent;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.countdown-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 46% 44% at 50% 54%, rgba(115, 4, 197, 0.30) 0%, rgba(115, 4, 197, 0.10) 50%, transparent 100%),
    radial-gradient(ellipse 30% 26% at 50% 58%, rgba(192, 132, 252, 0.12) 0%, transparent 100%);
  pointer-events: none;
}

.countdown-section .container {
  position: relative;
  z-index: 2;
}

/* Header block */
.countdown-header {
  margin-bottom: 52px;
}

/* Live badge */
.countdown-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-text-muted, #8B7AAD);
  margin-bottom: 18px;
}

.countdown-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34,197,94,0.9);
  flex-shrink: 0;
  animation: live-pulse 1.8s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0 8px rgba(34,197,94,0.9); }
  50%       { opacity: 0.35; box-shadow: 0 0 3px rgba(34,197,94,0.3); }
}

.countdown-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  color: var(--color-text, #F0EBF8);
  margin-bottom: 28px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Kick platform badge */
/* "Solo por Kick", bajo el anuncio de la fecha */
.countdown-platform-wrap {
  text-align: center;
}

.countdown-platform {
  display: inline-flex;
  margin-top: 18px;
  align-items: center;
  gap: 12px;
  padding: 9px 22px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 100px;
}

.countdown-platform-label {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted, #8B7AAD);
}

.countdown-platform-logo {
  height: 24px;
  width: auto;
  display: block;
}

/* Timer */
.countdown-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.cd-item {
  text-align: center;
  min-width: 118px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  padding: 26px 22px 20px;
  position: relative;
  overflow: hidden;
}

.cd-item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(155deg, rgba(124,58,237,0.09) 0%, transparent 55%);
  pointer-events: none;
}

.cd-number {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 7.5vw, 6.2rem);
  font-weight: 700;
  line-height: 1;
  display: block;
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
  background: linear-gradient(155deg, #ffffff 0%, #d8b4fe 45%, #7304c5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cd-unit {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-text-muted, #8B7AAD);
  margin-top: 12px;
  display: block;
}

.cd-separator {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.8rem);
  color: var(--color-royal, #1a4bde);
  line-height: 1;
  opacity: 0.5;
  align-self: center;
  margin-bottom: 20px;
}

.countdown-date {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  color: rgba(139,122,173,0.55);
  letter-spacing: 0.06em;
  margin-top: 20px;
}

.countdown-ended {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--color-accent, #C084FC);
}

/* ── 11. SPONSORS SECTION ─────────────────────────── */
.sponsors-section {
  background-color: var(--color-bg-secondary, #0C0C14);
}

.sponsors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px;
  align-items: center;
}

.sponsor-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: border-color var(--t-smooth) var(--ease-out);
  text-decoration: none;
}

.sponsor-item:hover {
  border-color: var(--color-border);
}

.sponsor-logo {
  max-height: 56px;
  width: auto;
  filter: grayscale(100%) brightness(0.65);
  transition: filter var(--t-smooth) var(--ease-out);
}

.sponsor-item:hover .sponsor-logo,
.sponsor-logo.hovered {
  filter: grayscale(0%) brightness(1);
}

.sponsor-name {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: var(--color-text-muted, #8B7AAD);
  letter-spacing: 0.05em;
}

/* ── 12. BLOG SECTION ─────────────────────────────── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 48px;
}

.blog-section-footer {
  text-align: center;
}

.blog-card {
  background: rgba(8, 8, 14, 0.8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--t-smooth) var(--ease-out),
              transform var(--t-smooth) var(--ease-out),
              box-shadow var(--t-smooth) var(--ease-out);
  display: flex;
  flex-direction: column;
}

.blog-card:hover {
  border-color: rgba(115, 4, 197, 0.55);
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.blog-card-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform 0.65s var(--ease-out);
}

.blog-card:hover .blog-card-img {
  transform: scale(1.04);
}

.blog-card-body {
  padding: 26px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blog-card-cat {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent, #C084FC);
  margin-bottom: 10px;
  display: block;
  text-decoration: none;
}

a.blog-card-cat:hover {
  color: var(--color-text, #F0EBF8);
}

.blog-card-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--color-text, #F0EBF8);
  line-height: 1.25;
}

.blog-card-title a {
  color: var(--color-text, #F0EBF8);
  text-decoration: none;
  transition: color var(--t-fast) ease;
}

.blog-card-title a:hover {
  color: var(--color-accent, #C084FC);
}

.blog-card-excerpt {
  font-size: 0.88rem;
  color: var(--color-text-muted, #8B7AAD);
  line-height: 1.75;
  flex: 1;
  margin-bottom: 20px;
}

.blog-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  gap: 12px;
}

.blog-card-date {
  font-size: 0.78rem;
  color: var(--color-text-muted, #8B7AAD);
  font-family: var(--font-heading);
}

.blog-card-link {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary, #7304c5);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--t-fast) ease;
  flex-shrink: 0;
}

.blog-card-link::after {
  content: '→';
  transition: transform var(--t-fast) ease;
  display: inline-block;
}

.blog-card-link:hover {
  color: var(--color-accent, #C084FC);
}

.blog-card-link:hover::after {
  transform: translateX(5px);
}

/* ── 13. FOOTER ───────────────────────────────────── */
.site-footer {
  background-color: var(--color-bg, #0A0A0F);
  padding: 80px 0 40px;
  position: relative;
}

.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 60px;
  align-items: start;
}

.footer-brand .site-logo {
  font-size: 1.9rem;
  margin-bottom: 18px;
  display: inline-block;
}

.footer-brand .site-logo--img {
  display: block;
  margin-bottom: 18px;
}

.footer-tagline {
  /* Más ancho que el logo y con líneas equilibradas: antes quedaba encajonado
     en el ancho del logo y partía la frase en sitios raros */
  margin-top: 20px;
  color: var(--color-text-muted, #8B7AAD);
  font-size: 0.95rem;
  line-height: 1.65;
  max-width: 38ch;
  text-wrap: balance;
}

.footer-col-title {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text, #F0EBF8);
  margin-bottom: 22px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
}

.footer-links li {
  list-style: none;
}

.footer-links a {
  font-size: 0.9rem;
  color: var(--color-text-muted, #8B7AAD);
  text-decoration: none;
  transition: color var(--t-fast) ease, padding-left var(--t-fast) ease;
  display: inline-block;
}

.footer-links a:hover {
  color: var(--color-accent, #C084FC);
  padding-left: 6px;
}

.footer-social {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-social a {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.88rem;
  color: var(--color-text-muted, #8B7AAD);
  text-decoration: none;
  transition: color var(--t-fast) ease;
}

.footer-social a:hover {
  color: var(--color-accent, #C084FC);
}

.footer-bottom {
  padding-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-copyright {
  font-size: 0.82rem;
  color: var(--color-text-muted, #8B7AAD);
}

.footer-copyright a {
  color: var(--color-text-muted, #8B7AAD);
  text-decoration: none;
}

.footer-copyright a:hover {
  color: var(--color-accent, #C084FC);
}

.footer-privacy {
  font-size: 0.82rem;
  color: var(--color-text-muted, #8B7AAD);
}


/* =======================================================
   15. BLOG LISTING — ARCHIVE / INDEX
   ======================================================= */
.blog-listing-header {
  padding: calc(var(--nav-height) + 72px) 0 56px;
  position: relative;
}

/* Eyebrow alineado a la izquierda */
.blog-listing-header .section-eyebrow {
  justify-content: flex-start;
  margin-bottom: 16px;
}

.blog-listing-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5.5vw, 4.5rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #fff 0%, var(--color-accent) 60%, var(--color-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* Espacio extra para que el clip no corte descenders */
  padding-bottom: 0.12em;
  margin-bottom: 0;
}

.blog-listing-desc {
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 560px;
  margin-top: 20px;
}

.blog-listing-section {
  padding: 0 0 80px;
}

/* Grid — desktop 3 col, con primera card featured */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.posts-grid .blog-card:first-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.posts-grid .blog-card:first-child .blog-card-media {
  height: 100%;
  min-height: 340px;
}

.posts-grid .blog-card:first-child .blog-card-img {
  height: 100%;
}

.posts-grid .blog-card:first-child .blog-card-title {
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
}

/* ── Blog Card ─────────────────────────────────────── */
.blog-card {
  background: rgba(12, 12, 20, 0.7);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    border-color 0.4s var(--ease-out),
    transform    0.4s var(--ease-out),
    box-shadow   0.4s var(--ease-out);
  position: relative;
}

.blog-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(115,4,197,0.06) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}

.blog-card:hover {
  border-color: rgba(115, 4, 197, 0.5);
  transform: translateY(-6px);
  box-shadow:
    0 0 0 1px rgba(115,4,197,0.12),
    0 20px 60px rgba(0,0,0,0.5),
    0 0 40px rgba(115,4,197,0.08);
}

.blog-card:hover::before {
  opacity: 1;
}

.blog-card-media {
  position: relative;
  overflow: hidden;
  display: block;
  flex-shrink: 0;
  height: 220px;
  text-decoration: none;
}

.blog-card-img,
.blog-card-img-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease-out);
}

.blog-card-img-placeholder {
  background: linear-gradient(135deg, rgba(115,4,197,0.2) 0%, rgba(12,12,20,1) 100%);
}

.blog-card:hover .blog-card-img {
  transform: scale(1.06);
}

.blog-card-media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,5,9,0.75) 0%, transparent 55%);
  pointer-events: none;
}

.blog-card-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--font-heading);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  background: var(--color-primary);
  padding: 4px 10px;
  border-radius: 99px;
  pointer-events: none;
  z-index: 2;
}

.blog-card-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
}

.blog-card-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.22;
  margin-bottom: 10px;
  color: var(--color-text);
}

.blog-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.blog-card-title a:hover {
  color: var(--color-accent);
}

.blog-card-excerpt {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  flex: 1;
  margin-bottom: 20px;
}

.blog-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  gap: 12px;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}

.blog-card-meta-sep {
  opacity: 0.5;
}

.blog-card-arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  text-decoration: none;
  flex-shrink: 0;
  transition:
    border-color 0.25s ease,
    color        0.25s ease,
    background   0.25s ease,
    transform    0.25s ease;
}

.blog-card:hover .blog-card-arrow {
  border-color: var(--color-primary);
  color: #fff;
  background: var(--color-primary);
  transform: translateX(3px);
}

/* ── No posts ──────────────────────────────────────── */
.no-posts {
  text-align: center;
  padding: 80px 0;
  color: var(--color-text-muted);
}

/* =======================================================
   16. SINGLE POST
   ======================================================= */

/* Barra de progreso de lectura */
.reading-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  z-index: 9999;
  transition: width 0.1s linear;
  pointer-events: none;
}

/* Hero del post */
.post-hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: flex-end;
  background: var(--color-bg-secondary);
  overflow: hidden;
  padding-bottom: 60px;
}

.post-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  transition: transform 8s ease;
}

.post-hero:hover .post-hero-bg {
  transform: scale(1);
}

.post-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(5,5,9,0.96) 0%,
    rgba(5,5,9,0.7)  40%,
    rgba(5,5,9,0.35) 100%
  );
}

.post-hero-inner {
  position: relative;
  z-index: 2;
  padding-top: calc(var(--nav-height) + 40px);
  max-width: 800px;
}

.post-hero-cat {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 18px;
  transition: color 0.2s ease;
}

.post-hero-cat:hover {
  color: #fff;
}

.post-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 24px;
}

.post-hero-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55);
  flex-wrap: wrap;
}

/* Cuerpo del post */
.post-body-wrap {
  padding: 64px 0 96px;
}

.post-article {
  max-width: 740px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Contenido tipográfico */
.post-content {
  font-size: 1.06rem;
  line-height: 1.9;
  color: rgba(244, 239, 255, 0.8);
}

.post-content > * + * {
  margin-top: 1.5em;
}

.post-content h2,
.post-content h3,
.post-content h4 {
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.15;
  margin-top: 2.5em;
  margin-bottom: 0.6em;
}

.post-content h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
.post-content h3 { font-size: clamp(1.2rem, 2vw, 1.55rem); }
.post-content h4 { font-size: 1.1rem; }

.post-content p { margin-bottom: 0; }

.post-content a {
  color: var(--color-accent);
  text-decoration-line: underline;
  text-decoration-color: rgba(192,132,252,0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}

.post-content a:hover {
  text-decoration-color: var(--color-accent);
}

.post-content blockquote {
  position: relative;
  margin: 2.5em 0;
  padding: 28px 28px 28px 36px;
  border-left: 3px solid var(--color-primary);
  background: rgba(115,4,197,0.07);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-style: italic;
  line-height: 1.55;
}

.post-content blockquote::before {
  content: '\201C';
  position: absolute;
  top: -10px;
  left: 20px;
  font-size: 5rem;
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.4;
  font-family: Georgia, serif;
  font-style: normal;
}

.post-content img {
  border-radius: var(--radius-sm);
  max-width: 100%;
  height: auto;
  margin: 0.5em 0;
}

.post-content ul,
.post-content ol {
  padding-left: 1.5em;
  margin-bottom: 0;
}

.post-content li + li {
  margin-top: 0.4em;
}

.post-content code {
  font-size: 0.9em;
  background: rgba(115,4,197,0.15);
  color: var(--color-accent);
  padding: 2px 7px;
  border-radius: 4px;
}

.post-content pre {
  background: rgba(8,8,14,0.9);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 24px;
  overflow-x: auto;
  font-size: 0.88rem;
  margin: 2em 0;
}

/* Footer del post */
.post-footer {
  margin-top: 64px;
  padding-top: 40px;
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 48px;
}

.post-tag {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: 99px;
  padding: 5px 14px;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.post-tag:hover {
  border-color: var(--color-primary);
  color: var(--color-accent);
}

.post-navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.post-nav-prev,
.post-nav-next {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color 0.25s ease, background 0.25s ease;
  background: rgba(12,12,20,0.5);
}

.post-nav-prev:hover,
.post-nav-next:hover {
  border-color: rgba(115,4,197,0.4);
  background: rgba(115,4,197,0.06);
}

.post-nav-next {
  text-align: right;
}

.post-nav-label {
  font-family: var(--font-heading);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: block;
}

.post-nav-title a {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.2s ease;
  display: block;
  margin-top: 4px;
}

.post-nav-title a:hover {
  color: var(--color-accent);
}

/* =======================================================
   17. SIDEBAR (sin uso activo — estilo de reserva)
   ======================================================= */
.sidebar {
  position: sticky;
  top: calc(var(--nav-height) + 24px);
}

.sidebar-widget {
  background: rgba(8, 8, 14, 0.9);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 26px;
  margin-bottom: 28px;
}

.widget-title {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 18px;
  padding-bottom: 12px;
}

/* =======================================================
   18. PAGINATION
   ======================================================= */
.pagination-wrap {
  margin-top: 64px;
  display: flex;
  justify-content: center;
}

.pagination-wrap .nav-links {
  display: flex;
  gap: 6px;
  align-items: center;
}

.pagination-wrap .page-numbers {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  color: var(--color-text-muted);
  text-decoration: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  transition: all 0.25s ease;
}

.pagination-wrap .page-numbers.dots {
  border-color: transparent;
  width: auto;
  padding: 0 4px;
}

.pagination-wrap .page-numbers:hover,
.pagination-wrap .page-numbers.current {
  color: #fff;
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.pagination-wrap .prev.page-numbers,
.pagination-wrap .next.page-numbers {
  width: auto;
  padding: 0 16px;
  border-radius: 99px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

/* ── 19. FORMS ────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="url"],
textarea,
select {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text, #F0EBF8);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 12px 16px;
  width: 100%;
  transition: border-color var(--t-fast) ease, background-color var(--t-fast) ease;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary, #7304c5);
  background: rgba(115, 4, 197, 0.08);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-muted, #8B7AAD);
  opacity: 0.6;
}

/* =======================================================
   20. COMENTARIOS
   ======================================================= */

/* Lista de comentarios existentes */
.comments-area {
  margin-top: 64px;
  padding-top: 48px;
}

.comments-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 36px;
}

.comment-list {
  list-style: none;
  padding: 0;
  margin: 0 0 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.comment-list .children {
  list-style: none;
  padding: 0;
  margin: 16px 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.comment-body {
  background: rgba(12, 12, 20, 0.7);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px;
  transition: border-color 0.25s ease;
}

.comment-body:hover {
  border-color: rgba(115, 4, 197, 0.3);
}

.comment-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.comment-author img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(115, 4, 197, 0.4);
  flex-shrink: 0;
}

.comment-author .fn {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
  font-style: normal;
}

.comment-author a {
  color: inherit;
  text-decoration: none;
}

.comment-metadata {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.comment-metadata time,
.comment-metadata a {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.comment-metadata a:hover {
  color: var(--color-accent);
}

.comment-content p {
  font-size: 0.95rem;
  line-height: 1.75;
  color: rgba(244, 239, 255, 0.75);
  margin: 0;
}

.reply {
  margin-top: 14px;
}

.comment-reply-link {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: 99px;
  padding: 4px 12px;
  display: inline-block;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.comment-reply-link:hover {
  border-color: var(--color-primary);
  color: var(--color-accent);
}

/* Formulario de respuesta */
.comment-respond {
  margin-top: 48px;
  background: rgba(12, 12, 20, 0.6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 40px;
}

.comment-reply-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

#cancel-comment-reply-link {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: 99px;
  padding: 4px 12px;
  transition: border-color 0.2s ease, color 0.2s ease;
}

#cancel-comment-reply-link:hover {
  border-color: var(--color-primary);
  color: var(--color-accent);
}

.comment-notes {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-bottom: 24px;
  line-height: 1.6;
}

.comment-notes .required {
  color: var(--color-accent);
}

.comment-form {
  display: grid;
  gap: 20px;
}

.comment-form-comment label,
.comment-form-author label,
.comment-form-email label,
.comment-form-url label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.comment-form-comment label .required,
.comment-form-author label .required,
.comment-form-email label .required {
  color: var(--color-accent);
  margin-left: 2px;
}

/* Nombre + Email en dos columnas */
.comment-form-author,
.comment-form-email,
.comment-form-url {
  margin: 0;
}

.comment-form-author,
.comment-form-email {
  display: grid;
  grid-column: span 1;
}

/* Textarea de comentario */
.comment-form-comment textarea {
  resize: vertical;
  min-height: 130px;
}

/* Checkbox de cookies */
.comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
}

.comment-form-cookies-consent input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin-top: 2px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.comment-form-cookies-consent label {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  cursor: pointer;
}

/* Botón submit */
.form-submit {
  margin: 0;
}

.form-submit .submit {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-sm);
  padding: 14px 32px;
  cursor: pointer;
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
  width: auto;
}

.form-submit .submit:hover {
  background: #8f05f0;
  box-shadow: 0 0 28px rgba(115, 4, 197, 0.45);
  transform: translateY(-2px);
}

.form-submit .submit:active {
  transform: translateY(0);
}

/* Layout de dos columnas para los campos de texto */
@media (min-width: 600px) {
  .comment-form {
    grid-template-columns: 1fr 1fr;
  }
  .comment-form-comment,
  .comment-notes,
  .comment-form-cookies-consent,
  .form-submit {
    grid-column: 1 / -1;
  }
}

/* ── 22. UTILITIES ────────────────────────────────── */
.text-center { text-align: center; }
.no-posts { color: var(--color-text-muted, #8B7AAD); text-align: center; padding: 60px 0; font-size: 1.05rem; }

/* GSAP animation setup — hidden until animated */
.section-animate,
.fade-up,
.fade-in {
  opacity: 0;
  transform: translateY(40px);
}

/* :not(.is-revealed) — main.js marca cada tarjeta al terminar su entrada y
   limpia los estilos en línea; así el hover vuelve a controlar transform */
.stagger-cards .card:not(.is-revealed),
.stagger-cards .blog-card:not(.is-revealed),
.stagger-cards .category-card:not(.is-revealed),
.stagger-cards .jury-card:not(.is-revealed),
.stagger-cards .stat-card:not(.is-revealed),
.stagger-cards .sponsor-item:not(.is-revealed) {
  opacity: 0;
  transform: translateY(36px);
}

/* Nominados de la portada: ocultos desde el CSS (antes solo los ocultaba
   GSAP y se alcanzaban a ver un instante antes de animarse) */
.front-page-main .stagger-nominees .nominee-card:not(.is-revealed) {
  opacity: 0;
}

/* Cabeceras de sección: el contenedor no se oculta; entran sus hijos uno a uno */
.section-header.section-animate,
.nominees-header.section-animate,
.countdown-header.section-animate {
  opacity: 1;
  transform: none;
}

.section-header.section-animate > *,
.nominees-header.section-animate > *,
.countdown-header.section-animate > * {
  opacity: 0;
}

/* Páginas internas (no portada): empujar contenido bajo el header fixed */
body:not(.home) .site-main {
  padding-top: var(--nav-height);
}

/* ── 21. ADMIN BAR COMPENSATION ───────────────────── */
.admin-bar .site-header {
  top: 32px;
}
.admin-bar body:not(.home) .site-main {
  padding-top: calc(var(--nav-height) + 32px);
}

@media screen and (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}

/* =======================================================
   RESPONSIVE BREAKPOINTS
   ======================================================= */

/* ── Tablet: 768px – 1024px ───────────────────────── */
@media (max-width: 1024px) {
  :root {
    --section-pad: 72px;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
    min-height: 100vh;
    padding: calc(var(--nav-height) + 48px) 32px 80px;
  }

  .hero-content {
    order: 2;
    align-items: center;
  }

  .hero-visual {
    order: 1;
    min-height: 420px;
    height: 420px;
    margin-bottom: 0;
  }

  #hero-canvas,
  .hero-fallback {
    min-height: 400px;
  }

  .hero-desc {
    margin-left: auto;
    margin-right: auto;
  }

  .about-inner {
    grid-template-columns: 1fr;
    gap: 52px;
  }

  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .jury-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .blog-grid,
  .posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .primary-nav {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .single-layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
  }
}

/* ── Mobile: < 768px ──────────────────────────────── */
@media (max-width: 767px) {
  :root {
    --section-pad: 60px;
    --nav-height:  64px;
  }

  /* ── Hero ── */
  .hero-inner {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    min-height: 100dvh;
    padding: 0;
    gap: 0;
    align-items: stretch;
  }

  /* Trofeo: margin-top explícito para separarlo del nav sin depender de porcentajes */
  .hero-visual {
    order: 1;
    flex: none;
    height: 42dvh;
    margin-top: calc(var(--nav-height) + 44px);
    width: 100%;
    min-height: 0;
    position: relative;
    overflow: hidden;
  }

  /* Degradado inferior que fusiona el trofeo con el fondo */
  .hero-visual::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 38%;
    background: linear-gradient(to bottom, transparent 0%, #050509 100%);
    z-index: 5;
    pointer-events: none;
  }

  /* Texto: ocupa el espacio restante */
  .hero-content {
    order: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 0;
    padding: 16px 20px 28px;
  }

  .hero-title {
    font-size: clamp(28px, 9vw, 42px);
    margin-bottom: 12px;
    text-align: center;
  }

  .hero-desc {
    max-width: 100%;
    font-size: 0.95rem;
    margin-bottom: 24px;
    text-align: center;
  }

  /* CTA apilados y centrados */
  .hero-ctas {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
  }

  .hero-ctas .btn {
    width: 100%;
    max-width: 280px;
    text-align: center;
    justify-content: center;
  }

  #hero-canvas,
  .hero-fallback {
    height: 100%;
    min-height: 0;
  }

  /* ── Zonas laterales de scroll (mobile) ── */
  /* Cubren el 22% izquierdo y derecho del canvas.
     touch-action:pan-y permite hacer scroll vertical
     sin que OrbitControls capture ese toque. */
  .canvas-scroll-zone {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 22%;
    z-index: 10;
    touch-action: pan-y;
    cursor: default;
  }

  .canvas-scroll-zone--left  {
    left: 0;
    background: linear-gradient(to right,  rgba(0, 0, 0, 0.15), transparent);
  }
  .canvas-scroll-zone--right {
    right: 0;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.15), transparent);
  }

  .categories-grid {
    grid-template-columns: 1fr;
  }

  .jury-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Menos aire arriba/abajo del título "Blog" — el hueco entre el nav
     y el contenido, y entre el título y la primera card, era excesivo */
  .blog-listing-header {
    padding: var(--nav-height) 0 12px;
  }

  .blog-listing-header .section-eyebrow {
    margin-bottom: 8px;
  }

  .blog-listing-title {
    font-size: 2.1rem;
  }

  .blog-listing-section {
    padding: 0 0 56px;
  }

  .blog-grid,
  .posts-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 24px;
  }

  /* La card destacada pasa de imagen|texto a apilada, igual que el resto */
  .posts-grid .blog-card:first-child {
    display: flex;
    flex-direction: column;
    grid-column: auto;
  }

  .posts-grid .blog-card:first-child .blog-card-media {
    height: 200px;
    min-height: 0;
  }

  .posts-grid .blog-card:first-child .blog-card-title {
    font-size: 1.3rem;
  }

  .pagination-wrap .nav-links {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 10px;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-tagline {
    max-width: 100%;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  .countdown-timer {
    gap: 10px;
  }

  .cd-item {
    min-width: 78px;
    padding: 20px 14px 16px;
    border-radius: 14px;
  }

  .cd-number {
    font-size: 2.8rem;
  }

  .cd-separator {
    font-size: 1.8rem;
    margin-bottom: 16px;
  }

  .countdown-section {
    padding: 80px 0;
  }

  .countdown-header {
    margin-bottom: 40px;
  }

  .countdown-title {
    margin-bottom: 22px;
  }

  .post-title {
    font-size: 1.8rem;
  }

  .archive-title {
    font-size: 2rem;
  }

  .nav-container {
    padding: 0 16px;
  }

  .container {
    padding: 0 16px;
  }

  /* Logo en navbar mobile */
  .site-logo--img .custom-logo-link img,
  .site-logo--img .custom-logo {
    height: 44px !important;
    max-width: 160px !important;
  }

  /* Logo en footer mobile */
  .site-logo--footer .custom-logo-link img,
  .site-logo--footer .custom-logo {
    height: 78px !important;
    max-width: 260px !important;
  }

}

/* Admin bar móvil: el nav queda a top:46px → necesita más margen */
@media screen and (max-width: 782px) {
  .admin-bar .hero-visual {
    margin-top: calc(var(--nav-height) + 46px + 32px);
    height: 38dvh;
  }
}

/* ── Muy pequeño: < 400px ─────────────────────────── */
@media (max-width: 399px) {
  .hero-visual {
    height: 38dvh;
    margin-top: calc(var(--nav-height) + 36px);
  }

  .hero-title {
    font-size: clamp(24px, 8vw, 32px);
  }

  .cd-number {
    font-size: 2rem;
  }

  .cd-item {
    min-width: 66px;
    padding: 16px 10px 13px;
  }

  .countdown-timer {
    gap: 8px;
  }

  .cd-separator {
    font-size: 1.5rem;
  }

  .btn {
    padding: 12px 22px;
    font-size: 0.76rem;
  }
}

/* ── PARTÍCULAS DE CRISTAL (hero background) ────── */
.hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.crystal-shard {
  position: absolute;
  border-radius: 1px;
  animation: crystal-drift linear infinite;
  will-change: transform;
  /* Sin box-shadow — cada shard tiene su propio compositing layer si se añade shadow */
}

@keyframes crystal-drift {
  0%   { transform: rotate(var(--base-rot, 45deg)) translateY(0px) scale(1); }
  30%  { transform: rotate(calc(var(--base-rot, 45deg) + 90deg)) translateY(-16px) scale(1.06); }
  65%  { transform: rotate(calc(var(--base-rot, 45deg) + 200deg)) translateY(-6px) scale(0.94); }
  100% { transform: rotate(calc(var(--base-rot, 45deg) + 360deg)) translateY(0px) scale(1); }
}

/* Glow puntual en la about-section — punto de atención */
.about-section {
  position: relative;
}
.about-section::before {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 40%;
  height: 60%;
  background: radial-gradient(
    ellipse at center,
    rgba(115, 4, 197, 0.07) 0%,
    transparent 65%
  );
  pointer-events: none;
  z-index: 0;
}
.about-section .container {
  position: relative;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════
   PARALLAX ORBS — Crystal spheres in the page flow that
   move at different scroll speeds to create depth layers.
   ═══════════════════════════════════════════════════════ */

/* Stage is absolute within <main> (position:relative),
   spans the full page so orbs can sit at any vertical %. */
.front-page-main { position: relative; overflow-x: clip; }

#orbs-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 11;
}

.p-orb-wrap {
  position: absolute;
  will-change: transform;
  /* Visibles por defecto: main.js oculta solo las que están más abajo y las
     hace entrar al llegar a ellas. Las del primer pantallazo se pintan con el
     hero (no retrasan el LCP) */
}

/* Horizontal offset via --ox CSS var (set inline per orb, always negative).
   left/right: var(--ox) → negative value pushes orb past the page edge. */
.p-orb-wrap--left  { left:  var(--ox, -50px); }
.p-orb-wrap--right { right: var(--ox, -50px); }

/* ── Orb image ───────────────────────────────────────── */
.p-orb {
  display: block;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  filter:
    drop-shadow(0 0 32px rgba(115, 4, 197, 0.60))
    drop-shadow(0 0 70px rgba(167, 92, 255, 0.25));
  animation: orb-sway var(--sway-d, 6s) ease-in-out infinite;
  animation-delay: var(--sway-del, 0s);
}

/* Ambient sway — only rotate+scale; y handled by GSAP */
@keyframes orb-sway {
  0%,  100% { transform: rotate(-4deg) scale(1.00); }
  50%        { transform: rotate( 4deg) scale(1.05); }
}

/* ── Size variants (≥ 1400px desktop) ───────────────── */
.p-orb--lg { width: 215px; height: 215px; }
.p-orb--md { width: 168px; height: 168px; }
.p-orb--sm { width: 122px; height: 122px; }

/* ── Mid-range desktop (1200 – 1399px): scale down ──── */
@media (min-width: 1200px) and (max-width: 1399px) {
  .p-orb--lg { width: 162px; height: 162px; }
  .p-orb--md { width: 128px; height: 128px; }
  .p-orb--sm { width:  95px; height:  95px; }
}

/* ── Tablet & mobile (< 1200px): todos los orbs, tamaño reducido ── */
@media (max-width: 1199px) {
  #orbs-stage .p-orb-wrap--left  { left:  -58px; }
  #orbs-stage .p-orb-wrap--right { right: -58px; }

  #orbs-stage .p-orb--lg { width: 105px; height: 105px; }
  #orbs-stage .p-orb--md { width:  88px; height:  88px; }
  #orbs-stage .p-orb--sm { width:  70px; height:  70px; }
}

@media (max-width: 767px) {
  #orbs-stage .p-orb-wrap--left  { left:  -44px; }
  #orbs-stage .p-orb-wrap--right { right: -44px; }

  #orbs-stage .p-orb--lg { width: 82px; height: 82px; }
  #orbs-stage .p-orb--md { width: 68px; height: 68px; }
  #orbs-stage .p-orb--sm { width: 54px; height: 54px; }
}

/* =======================================================
   CLIP-PATH FALLBACK
   ======================================================= */
@supports not (clip-path: polygon(0 0)) {
  .clip-shape {
    display: none;
  }
}

/* =======================================================
   PREFERS-REDUCED-MOTION
   ======================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Show all elements immediately */
  .section-animate,
  .fade-up,
  .fade-in,
  .stagger-cards .card,
  .stagger-cards .blog-card,
  .stagger-cards .category-card,
  .stagger-cards .jury-card,
  .stagger-cards .stat-card,
  .stagger-cards .sponsor-item,
  .stagger-nominees .nominee-card,
  .about-word,
  .section-header.section-animate > *,
  .nominees-header.section-animate > *,
  .countdown-header.section-animate > *,
  .stage-title-line,
  .stage-text p,
  .hero-title,
  .hero-desc,
  .hero-ctas,
  #hero-canvas {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =======================================================
   ABOUT V2 — Scrollmotion reveal
   ======================================================= */
.about-inner-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  margin-bottom: 72px;
}

.about-text-col .section-eyebrow {
  justify-content: flex-start;
  margin-bottom: 24px;
}

.about-headline {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.6vw, 4.8rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--color-text);
}

.about-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
}

.about-line--accent .about-word {
  background: var(--gradient-iridescent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.about-word {
  display: inline-block;
  margin-right: 0.22em;
}

.about-desc-col {
  padding-top: 52px;
  display: flex;
  flex-direction: column;
}

.about-desc-col p {
  color: var(--color-text-muted);
  line-height: 1.88;
  font-size: 1.02rem;
  margin-bottom: 20px;
}

.about-desc-col p:last-of-type {
  margin-bottom: 0;
}

/* =======================================================
   NOMINEES SECTION
   ======================================================= */
.nominees-section {
  background-color: var(--color-bg);
  position: relative;
  overflow: hidden;
}

.nominees-header {
  margin-bottom: 52px;
}

.nominees-eyebrow {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 10px;
  display: block;
}

.nominees-cat-title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 7vw, 7.5rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--color-text);
}

/* ── Row ─────────────────────────────────────── */
.nominees-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  align-items: stretch;
  margin-bottom: 48px;
}

/* ── Card ────────────────────────────────────── */
.nominee-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #0c0c15;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition:
    transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
    border-color 0.45s ease,
    box-shadow 0.45s ease;
}

.nominee-card:hover {
  transform: translateY(-10px);
  border-color: rgba(192, 132, 252, 0.55);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(192, 132, 252, 0.18),
    0 0 48px rgba(115, 4, 197, 0.22);
}

.nominee-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ── Image wrapper ───────────────────────────── */
.nominee-img-wrap {
  position: relative;
  width: 100%;
  height: 360px;
  overflow: hidden;
  background: #08080E;
}

.nominee-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  filter: brightness(1) saturate(1);
  transition:
    filter 0.65s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.75s cubic-bezier(0.23, 1, 0.32, 1);
}

.nominee-card:hover .nominee-img,
.nominee-card:focus-visible .nominee-img {
  transform: scale(1.06);
}

/* ── Placeholder ─────────────────────────────── */
.nominee-placeholder {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  filter: brightness(0.85);
  transition: filter 0.65s cubic-bezier(0.23, 1, 0.32, 1);
}

.nominee-card:hover .nominee-placeholder,
.nominee-card:focus-visible .nominee-placeholder {
  filter: brightness(0.65);
}

.nominee-placeholder--1 { background: linear-gradient(165deg, #1e0640 0%, #0a0014 100%); }
.nominee-placeholder--2 { background: linear-gradient(165deg, #1a0030 0%, #0a0018 100%); }
.nominee-placeholder--3 { background: linear-gradient(165deg, #15003e 0%, #240060 100%); }
.nominee-placeholder--4 { background: linear-gradient(165deg, #150025 0%, #0a001e 100%); }
.nominee-placeholder--5 { background: linear-gradient(165deg, #1a0035 0%, #0a0020 100%); }

.nominee-placeholder:not([class*="nominee-placeholder--"]) {
  background: linear-gradient(165deg, #15003e 0%, #240060 100%);
}

.nominee-placeholder-silhouette {
  position: absolute;
  bottom: -8%;
  left: 50%;
  transform: translateX(-50%);
  width: 65%;
  padding-bottom: 85%;
  border-radius: 50% 50% 0 0;
  background: rgba(192, 132, 252, 0.06);
}

.nominee-placeholder-initial {
  position: absolute;
  top: 34%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 900;
  color: rgba(192, 132, 252, 0.15);
  line-height: 1;
  z-index: 1;
}

/* Gradient fade at the bottom for text legibility */
.nominee-img-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 75%;
  background: linear-gradient(
    to top,
    rgba(4, 4, 10, 1) 0%,
    rgba(4, 4, 10, 0.82) 30%,
    rgba(4, 4, 10, 0.22) 62%,
    transparent 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* ── Overlay — solo oscurece levemente la foto ── */
.nominee-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(10, 4, 22, 0);
  transition: background 0.45s ease;
  pointer-events: none;
}

.nominee-card:hover .nominee-overlay {
  background: rgba(0, 0, 0, 0.30);
}

/* ── Info — nombre, handle y botón al pie ─────── */
.nominee-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 14px 16px;
  z-index: 3;
  transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}

.nominee-card:hover .nominee-info {
  transform: translateY(-4px);
}

.nominee-name {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  line-height: 1.2;
  margin: 0 0 4px;
}

.nominee-handle {
  font-family: var(--font-heading);
  font-size: 0.66rem;
  color: rgba(192, 132, 252, 0.85);
  letter-spacing: 0.05em;
  display: block;
}

/* ── Vote button — aparece en la parte baja ────── */
.nominee-vote-btn {
  display: block;
  width: 100%;
  text-align: center;
  max-height: 0;
  margin-top: 0;
  padding: 0;
  overflow: hidden;
  /* Sin backdrop-filter: con un fondo al 88 % el desenfoque no se notaba y
     obligaba a recomponer 30 botones al hacer scroll */
  background: rgba(115, 4, 197, 0.88);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  opacity: 0;
  transition:
    max-height 0.35s ease,
    margin-top 0.35s ease,
    padding 0.35s ease,
    opacity 0.35s ease,
    background 0.2s ease;
}

.nominee-card:hover .nominee-vote-btn,
.nominee-card:focus-visible .nominee-vote-btn {
  max-height: 40px;
  margin-top: 10px;
  padding: 9px 0;
  opacity: 1;
}

.nominee-vote-btn:hover {
  background: var(--color-accent);
}

.nominees-bottom {
  text-align: center;
  padding-bottom: 8px;
}

/* =======================================================
   NOMINEES STAGE — curtain / reveal
   ======================================================= */
.nominees-stage {
  position: relative;
  max-height: 4600px;
  overflow: hidden;
}

.nominees-curtain {
  position: relative;
  margin-top: -520px;
  z-index: 10;
  pointer-events: none;
}

.nominees-curtain-gradient {
  height: 460px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(5, 5, 9, 0.55) 35%,
    rgba(5, 5, 9, 0.88) 65%,
    var(--color-bg) 100%
  );
}

.nominees-curtain-action {
  background: var(--color-bg);
  display: flex;
  justify-content: center;
  padding: 12px 0 64px;
  pointer-events: all;
}

/* ── Reveal button ─────────────────────────────── */
.nominees-reveal-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text);
  outline: none;
  transition: color 0.3s ease;
}

.nominees-reveal-btn::before {
  content: '';
  position: absolute;
  inset: -14px -28px;
  border-radius: 999px;
  background: rgba(115, 4, 197, 0.08);
  border: 1px solid rgba(115, 4, 197, 0.22);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.nominees-reveal-btn:hover::before,
.nominees-reveal-btn:focus-visible::before {
  opacity: 1;
}

.nominees-reveal-btn:hover,
.nominees-reveal-btn:focus-visible {
  color: var(--color-accent);
}

.nominees-reveal-icon {
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
              color 0.3s ease;
}

.nominees-reveal-btn:hover .nominees-reveal-icon,
.nominees-reveal-btn:focus-visible .nominees-reveal-icon {
  transform: translateY(3px);
}

/* =======================================================
   RESPONSIVE — New sections
   ======================================================= */
@media (max-width: 1024px) {
  .about-inner-v2 {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .about-desc-col {
    padding-top: 0;
  }

  .nominees-cat-title {
    font-size: clamp(2.4rem, 5vw, 4rem);
  }

  /* Grid responsivo — sin scroll horizontal */
  .nominees-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
    gap: 10px;
    padding-bottom: 0;
    align-items: flex-start;
  }

  /* Default: 3 por fila (5 → 3+2 centrado; 6 → 3+3) */
  .nominees-row .nominee-card {
    flex: 0 0 calc((100% - 20px) / 3);
  }

  /* 4 nominados: 2 por fila → 2+2 */
  .nominees-row--count-4 .nominee-card {
    flex: 0 0 calc((100% - 10px) / 2);
  }

  /* 1–3 nominados */
  .nominees-row--count-1 .nominee-card { flex: 0 0 min(100%, 260px); }
  .nominees-row--count-2 .nominee-card { flex: 0 0 calc((100% - 10px) / 2); }
  .nominees-row--count-3 .nominee-card { flex: 0 0 calc((100% - 20px) / 3); }

  .nominee-img-wrap {
    height: auto;
    aspect-ratio: 3 / 4;
  }

  .nominees-stage {
    max-height: 4100px;
  }

  .nominees-curtain {
    margin-top: -480px;
  }
}

@media (max-width: 767px) {
  .about-headline {
    font-size: clamp(2rem, 9vw, 3rem);
    line-height: 1.08;
  }

  .nominees-cat-title {
    font-size: clamp(2rem, 9vw, 3rem);
    line-height: 0.92;
  }

  .nominee-info {
    padding: 0 7px 8px;
  }

  .nominee-name {
    font-size: 0.58rem;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
  }

  .nominee-handle {
    font-size: 0.5rem;
  }

  .nominee-vote-btn {
    font-size: 0.5rem;
    letter-spacing: 0.12em;
  }

  .nominees-stage {
    max-height: 3500px;
  }

  .nominees-curtain {
    margin-top: -420px;
  }

  .nominees-curtain-gradient {
    height: 360px;
  }
}

/* =======================================================
   FAQ SECTION
   ======================================================= */
.faq-section {
  background: var(--color-bg);
  position: relative;
}

.faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Item ─────────────────────────────────────────────── */
.faq-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.faq-item.is-open {
  border-color: rgba(192, 132, 252, 0.38);
  box-shadow: 0 0 32px rgba(115, 4, 197, 0.10);
}

/* ── Question button ──────────────────────────────────── */
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 28px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.45;
  transition: color 0.25s ease;
}

.faq-question:hover,
.faq-item.is-open .faq-question {
  color: #c084fc;
}

/* ── +/× icon ─────────────────────────────────────────── */
.faq-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid rgba(192, 132, 252, 0.45);
  position: relative;
  transition:
    transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
    background  0.3s ease,
    border-color 0.3s ease;
}

.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background: #c084fc;
  border-radius: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.faq-icon::before { width: 11px; height: 1.5px; }
.faq-icon::after  { width: 1.5px; height: 11px; }

.faq-item.is-open .faq-icon {
  background: rgba(115, 4, 197, 0.22);
  border-color: #c084fc;
  transform: rotate(45deg);
}

/* ── Answer panel ─────────────────────────────────────── */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}

.faq-item.is-open .faq-answer {
  max-height: 300px;
}

.faq-answer p {
  padding: 0 28px 24px;
  margin: 0;
  color: var(--color-text-muted, #a09ab8);
  font-size: 0.95rem;
  line-height: 1.75;
}

/* ── Buzón de preguntas: compositor tipo chat ─────────── */
@property --ask-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.ask {
  max-width: 820px;
  margin: 72px auto 0;
}

.ask-head {
  text-align: center;
  margin-bottom: 28px;
}

.ask-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent, #C084FC);
}

.ask-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.9);
  animation: live-pulse 1.8s ease-in-out infinite;
}

.ask-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
}

.ask-text {
  margin: 0 auto;
  max-width: 46ch;
  color: var(--color-text-muted, #a09ab8);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Hilo: lo que la persona envía en esta visita (solo en su pantalla) */
.ask-thread {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.ask-thread:not(:empty) {
  margin-bottom: 16px;
}

.ask-bubble {
  max-width: min(78%, 560px);
  padding: 14px 18px 10px;
  border-radius: 20px 20px 6px 20px;
  background: linear-gradient(135deg, #7304c5 0%, #a717c4 55%, #c23bd4 100%);
  color: #fff;
  font-size: 0.98rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-shadow: 0 10px 30px rgba(115, 4, 197, 0.35);
  transform-origin: 100% 100%;
  animation: ask-bubble-in 0.6s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}

.ask-bubble-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.75);
}

.ask-bubble-meta svg {
  width: 16px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes ask-bubble-in {
  0%   { opacity: 0; transform: translateY(40px) scale(0.6); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

/* Compositor */
.ask-box {
  position: relative;
  padding: 20px 20px 14px 24px;
  background: #0c0b12;
  border-radius: 22px;
  isolation: isolate;
}

/* Borde: neutro en reposo, degradado girando mientras se escribe */
.ask-box::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.1);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.ask-box:focus-within::before {
  padding: 1.5px;
  background: conic-gradient(from var(--ask-angle), #F0ABFC, #7304c5, #1a4bde, #a717c4, #F0ABFC);
  animation: ask-spin 4s linear infinite;
}

.ask-box {
  transition: box-shadow 0.5s ease;
}

.ask-box:focus-within {
  box-shadow: 0 0 46px rgba(115, 4, 197, 0.22), 0 0 90px rgba(26, 75, 222, 0.08);
}

@keyframes ask-spin {
  to { --ask-angle: 360deg; }
}

.ask-message {
  display: block;
  width: 100%;
  min-height: 56px;
  max-height: 260px;
  padding: 0;
  background: none;
  border: 0;
  resize: none;
  color: var(--color-text);
  font-family: var(--font-heading);
  /* 16px como mínimo: con menos, iOS hace zoom al enfocar */
  font-size: max(16px, 1.15rem);
  font-weight: 500;
  line-height: 1.5;
}

.ask-message::placeholder {
  color: rgba(146, 120, 168, 0.7);
}

.ask-message:focus,
.ask-message:focus-visible {
  outline: none;
  background: none;
  border: 0;
  box-shadow: none;
}

/* Trampa para bots: fuera de la vista pero presente en el formulario */
.ask-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ask-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}

.ask-name {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
  transition: background-color 0.25s ease;
  max-width: 260px;
}

.ask-name:focus-within {
  background: rgba(255, 255, 255, 0.08);
}

.ask-name-label {
  font-family: var(--font-heading);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent, #C084FC);
}

.ask-name input {
  flex: 1;
  min-width: 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
}

.ask-name input::placeholder {
  color: rgba(146, 120, 168, 0.7);
}

.ask-name input:focus,
.ask-name input:focus-visible {
  outline: none;
  background: none;
  border: 0;
  box-shadow: none;
}

/* Anillo de caracteres (se llena al escribir) */
.ask-ring {
  position: relative;
  width: 30px;
  height: 30px;
  margin-left: auto;
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 1.3, 0.4, 1);
}

.ask-box.has-text .ask-ring {
  opacity: 1;
  transform: none;
}

.ask-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ask-ring circle {
  fill: none;
  stroke-width: 2.5;
}

.ask-ring-track {
  stroke: rgba(255, 255, 255, 0.1);
}

.ask-ring-fill {
  stroke: #C084FC;
  stroke-linecap: round;
  stroke-dasharray: 62.83;
  stroke-dashoffset: calc(62.83 * (1 - var(--ask-fill, 0)));
  transition: stroke-dashoffset 0.2s ease, stroke 0.2s ease;
}

.ask-ring-n {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.62rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #F0ABFC;
}

.ask-box.is-near .ask-ring-fill {
  stroke: #F0ABFC;
}

/* Enviar */
.ask-send {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(244, 239, 255, 0.45);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.2, 1.3, 0.4, 1);
}

.ask-send svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(-90deg);
  transition: transform 0.4s cubic-bezier(0.2, 1.3, 0.4, 1);
}

.ask-box.is-ready .ask-send {
  background: linear-gradient(135deg, #7304c5, #c23bd4);
  color: #fff;
  box-shadow: 0 6px 22px rgba(167, 23, 196, 0.45);
}

.ask-box.is-ready .ask-send:hover {
  transform: scale(1.08);
}

.ask-box.is-ready .ask-send:hover svg {
  transform: rotate(-90deg) translateX(2px);
}

.ask-send:focus-visible {
  outline: 2px solid #F0ABFC;
  outline-offset: 3px;
}

/* Enviando: la flecha sale disparada hacia arriba */
.ask-box.is-sending .ask-send svg {
  animation: ask-launch 0.7s cubic-bezier(0.5, 0, 0.75, 0) infinite;
}

@keyframes ask-launch {
  0%   { transform: rotate(-90deg) translateX(0);    opacity: 1; }
  60%  { transform: rotate(-90deg) translateX(18px); opacity: 0; }
  61%  { transform: rotate(-90deg) translateX(-14px); opacity: 0; }
  100% { transform: rotate(-90deg) translateX(0);    opacity: 1; }
}

.ask-box.is-sending .ask-send {
  cursor: wait;
}

.ask-status {
  min-height: 1.5em;
  margin: 12px 0 0;
  text-align: center;
  font-size: 0.88rem;
  color: var(--color-text-muted, #a09ab8);
}

.ask-status.is-sent {
  color: #c084fc;
}

.ask-status.is-error {
  color: #f0abfc;
}

@media (prefers-reduced-motion: reduce) {
  .ask-box:focus-within::before,
  .ask-bubble,
  .ask-box.is-sending .ask-send svg {
    animation: none;
  }
}

/* ── Mobile ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .faq-question {
    padding: 18px 20px;
    font-size: 0.9rem;
  }
  .faq-answer p {
    padding: 0 20px 20px;
    font-size: 0.88rem;
  }
  .ask {
    margin-top: 56px;
  }
  .ask-title {
    font-size: 1.2rem;
  }
  .ask-box {
    padding: 16px 14px 12px 18px;
    border-radius: 20px;
  }
  .ask-bar {
    gap: 10px;
  }
  .ask-name {
    max-width: none;
  }
  .ask-bubble {
    max-width: 88%;
  }
}

/* =======================================================
   EL GRAN ESCENARIO — My Way (reemplaza a "about" en portada)
   ======================================================= */
.stage-section {
  position: relative;
  overflow: hidden;
}

.stage-section::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 520px;
  background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(115, 4, 197, 0.16) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.stage-section > .container,
.stage-section > .stage-marquee {
  position: relative;
  z-index: 1;
}

/* ── Título ── */
.stage-header {
  text-align: center;
  margin-bottom: clamp(20px, 3vw, 36px);
}

.stage-title {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 4.3vw, 3.3rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--color-text);
  text-wrap: balance;
}

.stage-title-line {
  display: block;
}

/* Título y párrafos entran escalonados (main.js); ocultos hasta entonces */
.stage-title-line,
.stage-text p {
  opacity: 0;
  transform: translateY(26px);
}

.stage-title-accent {
  background: linear-gradient(90deg, #8b2be2 0%, #c084fc 55%, #a717c4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ── Texto ── */
.stage-text {
  max-width: 940px;
  margin: 0 auto clamp(32px, 5vw, 56px);
  text-align: center;
}

.stage-text p {
  color: #cbb2ee;
  font-size: clamp(0.95rem, 1.25vw, 1.08rem);
  line-height: 1.75;
  margin-bottom: 1.4em;
}

.stage-text p:last-child {
  margin-bottom: 0;
}

/* ── Trío: tarjeta My Way + perfil + foto ── */
.stage-trio {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 1.3fr);
  gap: clamp(12px, 1.6vw, 20px);
  align-items: stretch;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.stage-brand-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 240px;
  padding: 24px 20px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background:
    radial-gradient(ellipse 90% 70% at 50% 30%, rgba(192, 132, 252, 0.45) 0%, transparent 70%),
    linear-gradient(160deg, #3b0a70 0%, #7304c5 55%, #2a0652 100%);
  box-shadow:
    inset 0 0 0 4px rgba(10, 4, 20, 0.55),
    inset 0 0 0 5px rgba(255, 255, 255, 0.14),
    0 18px 40px -18px rgba(115, 4, 197, 0.7);
  overflow: hidden;
}

.stage-brand-logo {
  width: min(78%, 240px);
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
}

.stage-brand-caption {
  font-family: var(--font-heading);
  font-size: clamp(0.7rem, 1vw, 0.9rem);
  font-weight: 800;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: #fff;
}

.stage-profile {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(16px, 2vw, 24px);
  border-radius: var(--radius);
  border: 1px solid rgba(192, 132, 252, 0.28);
  background: rgba(20, 10, 36, 0.78);
  color: var(--color-text);
  /* Sin transición ni hover en transform: el parallax de main.js lo controla */
  transition: border-color var(--t-fast) ease, box-shadow var(--t-smooth) ease;
}

.stage-profile:hover {
  color: var(--color-text);
  border-color: rgba(192, 132, 252, 0.7);
  box-shadow: 0 14px 34px -16px rgba(167, 23, 196, 0.75);
}

.stage-profile-handle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
}

.stage-profile-top {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 20px);
}

.stage-profile-avatar {
  flex: 0 0 auto;
  width: clamp(52px, 6vw, 72px);
  height: auto;
  border-radius: 50%;
}

.stage-profile-stats {
  display: flex;
  flex: 1;
  justify-content: space-between;
  gap: 8px;
}

.stage-profile-stat {
  display: flex;
  flex-direction: column;
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--color-text-muted);
}

.stage-profile-stat strong {
  font-family: var(--font-heading);
  font-size: clamp(0.92rem, 1.3vw, 1.1rem);
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
}

.stage-profile-bio {
  display: flex;
  flex-direction: column;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #cbb2ee;
}

.stage-profile-bio strong {
  color: var(--color-text);
  font-size: 0.9rem;
}

.stage-profile-cta {
  align-self: flex-start;
  margin-top: auto;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.stage-trio-photo {
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 200px;
}

.stage-trio-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Banner "Montaje 7ma edición" ── */
.stage-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 24px);
  padding: clamp(10px, 1.6vw, 18px) clamp(16px, 3vw, 32px);
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, #4a0388 0%, #7304c5 50%, #4a0388 100%);
}

.stage-banner-title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 4.4vw, 3rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
}

.stage-banner-arrow {
  flex: 0 0 auto;
  width: clamp(22px, 3.4vw, 44px);
  height: auto;
  color: #e06bff;
  filter: drop-shadow(0 0 6px rgba(224, 107, 255, 0.8));
}

/* ── Render del escenario ── */
.stage-render {
  max-width: 1120px;
  margin: clamp(20px, 3vw, 36px) auto 0;
}

.stage-measure {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 22px);
  width: 78%;
  margin: 0 auto clamp(8px, 1.2vw, 14px);
  color: #fff;
}

.stage-measure-label {
  flex: 0 0 auto;
  font-family: var(--font-heading);
  font-size: clamp(0.78rem, 2.3vw, 1.5rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.stage-measure-line {
  position: relative;
  flex: 1;
  height: 2px;
  background: currentColor;
}

.stage-measure-line::after {
  content: '';
  position: absolute;
  top: 50%;
  border: 6px solid transparent;
  transform: translateY(-50%);
}

.stage-measure-line--left::after {
  left: -2px;
  border-left: 0;
  border-right: 11px solid currentColor;
}

.stage-measure-line--right::after {
  right: -2px;
  border-right: 0;
  border-left: 11px solid currentColor;
}

.stage-render-frame {
  position: relative;
  will-change: transform;
}

/* Resplandor morado bajo el escenario, como luz proyectada en el piso */
.stage-render-frame::after {
  content: '';
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -7%;
  height: 34%;
  z-index: 0;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(140, 30, 230, 0.6) 0%, rgba(115, 4, 197, 0.22) 45%, transparent 72%);
  filter: blur(26px);
  pointer-events: none;
  transition: opacity 1.4s ease 0.35s;
}

/* Los cuatro bordes se funden con la página; "screen" vuelve transparente
   el negro del render para que el resplandor se vea a través del piso */
.stage-render-clip {
  position: relative;
  z-index: 1;
  overflow: hidden;
  mix-blend-mode: screen;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 9%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 9%, #000 88%, transparent 100%);
  mask-composite: intersect;
}

.stage-render-img {
  width: 100%;
  height: auto;
}

/* Encendido: main.js "arma" el render (apagado) y lo enciende al entrar en pantalla.
   Sin JS o con movimiento reducido queda encendido desde el inicio. */
.stage-render--armed .stage-render-img {
  filter: brightness(0.1);
}

.stage-render--armed .stage-render-frame::after {
  opacity: 0;
}

.stage-render--armed.is-lit .stage-render-img {
  filter: none;
  animation: stage-lights-on 1.35s ease-out both;
}

.stage-render--armed.is-lit .stage-render-frame::after {
  opacity: 1;
}

@keyframes stage-lights-on {
  /* Nunca por encima de 1: un pico más alto aclara el fondo del render
     y delata el rectángulo de la imagen */
  0%   { filter: brightness(0.1); }
  10%  { filter: brightness(0.95); }
  18%  { filter: brightness(0.3); }
  32%  { filter: brightness(0.9); }
  42%  { filter: brightness(0.5); }
  100% { filter: brightness(1); }
}


/* ── Franja infinita ── */
.stage-marquee {
  margin: clamp(28px, 4vw, 48px) 0 clamp(16px, 2.4vw, 28px);
  padding: clamp(9px, 1.3vw, 15px) 0;
  background: linear-gradient(90deg, #4a0388 0%, #7304c5 50%, #4a0388 100%);
  overflow: hidden;
}

.stage-marquee-track {
  display: flex;
  width: max-content;
}

.stage-marquee-group {
  display: flex;
  flex: 0 0 auto;
  min-width: 100vw;
  justify-content: space-around;
  animation: stage-marquee 34s linear infinite;
}

.stage-marquee-item {
  flex: 0 0 auto;
  padding: 0 0.7em;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 2.3vw, 1.55rem);
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
}

@keyframes stage-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}

/* ── Slider infinito ── */
.stage-slider {
  position: relative;
}

/* Luz ambiental: la foto activa, muy desenfocada, tiñe el fondo alrededor */
.stage-slider-glow {
  position: absolute;
  inset: 8% -2% -9%;
  z-index: 0;
  filter: blur(44px) saturate(1.7);
  opacity: 0.62;
  pointer-events: none;
}

.stage-slider-glow-layer {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transition: opacity 1.1s ease;
}

.stage-slider-glow-layer.is-on {
  opacity: 1;
}

/* Marco de neón: gradiente de la marca que recorre el borde */
.stage-slider-frame {
  position: relative;
  z-index: 1;
  padding: 2px;
  border-radius: calc(var(--radius) + 2px);
  background: linear-gradient(110deg, #7304c5 0%, #f0abfc 22%, #1a4bde 45%, #a717c4 70%, #7304c5 100%);
  background-size: 300% 100%;
  animation: stage-neon 12s linear infinite;
}

@keyframes stage-neon {
  to { background-position: -150% 0; }
}

.stage-slider-viewport {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-bg-secondary);
  touch-action: pan-y;
  cursor: grab;
}

.stage-slider-viewport.is-dragging {
  cursor: grabbing;
}

.stage-slider-track {
  display: flex;
  height: 100%;
  will-change: transform;
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.stage-slider-track.is-instant {
  transition: none;
}

/* Sombra superior para que las barras y el contador se lean sobre fotos claras */
.stage-slider-viewport::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 30%;
  background: linear-gradient(180deg, rgba(5, 5, 9, 0.6) 0%, transparent 100%);
  pointer-events: none;
}

.stage-slide {
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
}

/* Zoom lento sobre la foto activa (Ken Burns); al salir vuelve a su tamaño */
.stage-slide img {
  transform: scale(1);
  transition: transform 1s ease;
}

.stage-slide.is-active img {
  transform: scale(1.1);
  transition: transform 7s linear;
}

.stage-slide:nth-child(odd) img  { transform-origin: 30% 40%; }
.stage-slide:nth-child(even) img { transform-origin: 70% 60%; }

.stage-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

/* Flechas estilo redes: círculo claro pequeño, solo al pasar el cursor.
   En pantallas táctiles no se muestran — se desliza con el dedo. */
.stage-slider-btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #15101f;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity var(--t-fast) ease, background-color var(--t-fast) ease;
}

.stage-slider-btn svg {
  width: 16px;
  height: 16px;
}

.stage-slider-btn:hover {
  background: #fff;
}

.stage-slider-btn--prev { left: clamp(10px, 1.4vw, 18px); }
.stage-slider-btn--next { right: clamp(10px, 1.4vw, 18px); }

@media (hover: hover) and (pointer: fine) {
  .stage-slider-btn {
    opacity: 0;
  }

  .stage-slider:hover .stage-slider-btn,
  .stage-slider-btn:focus-visible {
    opacity: 1;
  }
}

@media (hover: none) {
  .stage-slider-btn {
    display: none;
  }
}

/* Barras de progreso tipo historias */
.stage-slider-dots {
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  z-index: 2;
  display: flex;
  gap: 5px;
  padding: 2px clamp(10px, 1.4vw, 16px) 0;
}

/* Área táctil de 24px con una barra visible de 3px */
.stage-slider-dot {
  position: relative;
  flex: 1;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.stage-slider-dot::before,
.stage-slider-dot-fill {
  content: '';
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 999px;
}

.stage-slider-dot::before {
  background: rgba(255, 255, 255, 0.36);
}

.stage-slider-dot-fill {
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
}

.stage-slider-dot.is-done .stage-slider-dot-fill {
  transform: scaleX(1);
}

/* El final de esta animación es lo que hace avanzar el slider (main.js) */
.stage-slider-dot.is-active .stage-slider-dot-fill {
  animation: stage-seg-fill var(--slide-ms, 4500ms) linear forwards;
}

.stage-slider.is-paused .stage-slider-dot.is-active .stage-slider-dot-fill {
  animation-play-state: paused;
}

@keyframes stage-seg-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Contador "1/3" */
.stage-slider-count {
  position: absolute;
  top: 30px;
  right: clamp(12px, 1.6vw, 20px);
  z-index: 2;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(10, 4, 20, 0.62);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: #fff;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .stage-trio {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }

  .stage-trio-photo {
    grid-column: 1 / -1;
    aspect-ratio: 21 / 9;
    min-height: 0;
  }
}

@media (max-width: 767px) {
  .stage-text {
    text-align: left;
  }

  .stage-measure {
    width: 92%;
  }

  .stage-slider-viewport {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 599px) {
  .stage-trio {
    grid-template-columns: minmax(0, 1fr);
  }

  .stage-brand-card {
    min-height: 0;
    padding: 28px 20px;
  }

  .stage-brand-logo {
    width: min(56%, 220px);
  }

  .stage-trio-photo {
    aspect-ratio: 16 / 9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage-marquee-group,
  .stage-slider-frame {
    animation: none !important;
  }

  .stage-slide.is-active img {
    transform: none;
  }

  /* Sin avance automático: la barra activa se muestra llena */
  .stage-slider-dot.is-active .stage-slider-dot-fill {
    animation: none !important;
    transform: scaleX(1);
  }
}

/* =======================================================
   CIFRAS + CINTAS DE CATEGORÍAS — portada, tras el hero
   ======================================================= */
.intro-section {
  position: relative;
  padding: clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 88px);
  /* Solo se recorta a los lados (las cintas inclinadas): arriba y abajo la
     luz de las cifras y su onda se derraman sobre el hero sin cortarse */
  overflow-x: clip;
  overflow-y: visible;
  z-index: 1;
}

/* Foco de luz detrás de la frase: centra la atención sin encerrarla en una caja */
.intro-section::before {
  content: '';
  position: absolute;
  top: clamp(20px, 6vw, 90px);
  left: 50%;
  width: min(1100px, 120vw);
  height: clamp(320px, 46vw, 560px);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(115, 4, 197, 0.26) 0%, rgba(115, 4, 197, 0.08) 45%, transparent 70%);
  transform: translateX(-50%);
  pointer-events: none;
}

.intro-section .container {
  position: relative;
  z-index: 1;
  text-align: center;
}

.intro-section .section-eyebrow {
  margin-bottom: clamp(18px, 2.4vw, 30px);
}

/* Cifras: números enormes con acabado cromado. La entrada "impacto" la
   anima main.js (GSAP); aquí van las piezas y su estado de reposo:
   - .intro-stat-value: el número cromado.
   - .intro-stat-ghost: dos copias (magenta y azul) que en el golpe se
     separan y vuelven a juntarse, como una aberración cromática.
   - .intro-stat-wave: la onda de choque que se abre desde el número.
   Las tres capas comparten la misma celda de la rejilla. */
.intro-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 3vw, 48px);
  max-width: 1080px;
  margin: 0 auto;
}

.intro-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.4vw, 18px);
}

.intro-stat-num {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  font-family: var(--font-display);
  font-size: clamp(3rem, 15.5vw, 9.75rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.intro-stat-num > * {
  grid-area: 1 / 1;
}

/* Halo suave detrás del número (redondo, sin bordes) */
.intro-stat-num::before {
  content: '';
  position: absolute;
  inset: -45% -45%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(115, 4, 197, 0.42), rgba(115, 4, 197, 0.16) 40%, rgba(115, 4, 197, 0.05) 70%, transparent);
  pointer-events: none;
}

.intro-stat-value {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #efe9ff 34%, #a99bd0 50%, #f6f3ff 66%, #c9b4f0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.intro-stat-ghost {
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}

.intro-stat-ghost--a {
  color: #f0abfc;
  -webkit-text-fill-color: #f0abfc;
}

.intro-stat-ghost--b {
  color: #4d6bff;
  -webkit-text-fill-color: #4d6bff;
}

/* Fuera de la rejilla: así no estira la celda ni empuja la etiqueta */
.intro-stat-wave {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -0.75em 0 0 -0.75em;
  width: 1.5em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 50%, rgba(240, 171, 252, 0.9) 55%, rgba(167, 23, 196, 0.45) 60%, transparent 68%);
  opacity: 0;
  pointer-events: none;
}

.intro-stat-label {
  font-family: var(--font-heading);
  font-size: clamp(0.62rem, 1.2vw, 0.85rem);
  font-weight: 600;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #cbb2ee;
}

/* main.js: las cintas también esperan; entran lanzadas tras el último golpe */
.intro-section.cats-armed .intro-cats-row {
  opacity: 0;
}

/* main.js: ocultos hasta el impacto (GSAP los muestra con estilos en línea) */
.intro-stats.is-armed .intro-stat-num,
.intro-stats.is-armed .intro-stat-label {
  opacity: 0;
}

@media (max-width: 599px) {
  .intro-stat-label {
    letter-spacing: 0.18em;
    text-indent: 0.18em;
  }
}

/* Texto solo para lectores de pantalla */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Cintas con los nombres de las categorías ── */
.intro-cats {
  display: grid;
  gap: clamp(10px, 1.6vw, 20px);
  margin-top: clamp(56px, 8vw, 104px);
  /* Leve inclinación: rompe la horizontal perfecta sin llamar la atención */
  transform: rotate(-1.4deg) scale(1.02);
  position: relative;
}

/* Desvanecido en los bordes con dos degradados encima (antes era mask-image,
   que obliga al navegador a recomponer toda la cinta en cada cuadro) */
.intro-cats::before,
.intro-cats::after {
  content: '';
  position: absolute;
  top: -10%;
  bottom: -10%;
  z-index: 1;
  width: 11%;
  pointer-events: none;
}

.intro-cats::before {
  left: -1px;
  background: linear-gradient(90deg, var(--color-bg) 0%, transparent 100%);
}

.intro-cats::after {
  right: -1px;
  background: linear-gradient(270deg, var(--color-bg) 0%, transparent 100%);
}

.intro-cats-row {
  display: flex;
  width: max-content;
}

.intro-cats-group {
  display: flex;
  flex: 0 0 auto;
  min-width: 100vw;
  justify-content: space-around;
  animation: stage-marquee 70s linear infinite;
}

.intro-cats-row--reverse .intro-cats-group {
  animation-duration: 82s;
  animation-direction: reverse;
}

.intro-cat {
  position: relative;
  flex: 0 0 auto;
  padding: 0 1.15em;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.8vw, 2.2rem);
  font-weight: 900;
  line-height: 1.25;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Separador entre nombres */
.intro-cat::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -0.17em;
  width: 0.34em;
  height: 0.34em;
  border-radius: 50%;
  background: var(--color-primary);
  transform: translateY(-50%);
}

/* Base: solo el contorno exterior de las letras (mismo truco que la frase).
   Encima va UNA capa de relleno por nombre —blanca en unos, con el degradado
   de la marca en otros— que aparece y desaparece muy despacio. Cada nombre va
   desfasado del vecino, así la cinta siempre mezcla contorno, blanco y
   degradado sin parpadear. (Una capa y no dos: la mitad de animaciones.) */
.intro-cat-text {
  position: relative;
  display: block;
  color: var(--color-bg);
  -webkit-text-fill-color: var(--color-bg);
  -webkit-text-stroke: 2px rgba(192, 132, 252, 0.72);
  paint-order: stroke fill;
}

.intro-cat-text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: intro-cat-fill 14s ease-in-out infinite;
}

/* Blanco: lleva su propio borde blanco para tapar el contorno morado de la base */
.intro-cat:nth-child(odd) .intro-cat-text::after {
  color: var(--color-text);
  -webkit-text-fill-color: var(--color-text);
  -webkit-text-stroke: 2px var(--color-text);
}

/* Degradado de la marca */
.intro-cat:nth-child(even) .intro-cat-text::after {
  -webkit-text-stroke: 0;
  background: var(--gradient-iridescent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.intro-cat:nth-child(4n + 2) .intro-cat-text::after { animation-delay: -3.5s; }
.intro-cat:nth-child(4n + 3) .intro-cat-text::after { animation-delay: -7s; }
.intro-cat:nth-child(4n)     .intro-cat-text::after { animation-delay: -10.5s; }

.intro-cats-row--reverse .intro-cat:nth-child(4n + 1) .intro-cat-text::after { animation-delay: -8.75s; }
.intro-cats-row--reverse .intro-cat:nth-child(4n + 2) .intro-cat-text::after { animation-delay: -12.25s; }
.intro-cats-row--reverse .intro-cat:nth-child(4n + 3) .intro-cat-text::after { animation-delay: -1.75s; }
.intro-cats-row--reverse .intro-cat:nth-child(4n)     .intro-cat-text::after { animation-delay: -5.25s; }

/* Ciclo de 14 s: contorno → relleno → contorno */
@keyframes intro-cat-fill {
  0%, 10%   { opacity: 0; }
  22%, 50%  { opacity: 1; }
  62%, 100% { opacity: 0; }
}

@media (max-width: 599px) {
  .intro-cat-text,
  .intro-cat:nth-child(odd) .intro-cat-text::after {
    -webkit-text-stroke-width: 1.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-cats-group,
  .intro-cat-text::after,
  .stage-compare.is-idle .stage-compare-knob::after {
    animation: none !important;
  }

  /* Estados fijos y repartidos: dos de cada tres con relleno, uno en contorno */
  .intro-cat:nth-child(3n + 1) .intro-cat-text::after,
  .intro-cat:nth-child(3n + 2) .intro-cat-text::after {
    opacity: 1;
  }
}

/* =======================================================
   EL ESCENARIO — My Way (section-escenario-b.php)
   ======================================================= */
/* --pos y --skew las mueve main.js (comparador): viven en la sección para que
   el título y el comparador compartan el mismo corte diagonal */
.showstage-section {
  --pos: 50%;
  --skew: 6%;
  position: relative;
}

.showstage-section .section-header {
  margin-bottom: clamp(28px, 4vw, 52px);
}

.showstage-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--color-text);
}

/* Línea de apoyo: fina y espaciada, como "PREMIOS" en el logotipo */
.showstage-title-lead {
  margin-bottom: clamp(10px, 1.4vw, 20px);
  font-size: clamp(0.68rem, 1.45vw, 1.05rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-wrap: balance;
}

/* "MY WAY": base en contorno limpio (relleno del color del fondo + paint-order)
   y, encima, una capa con el degradado recortada en diagonal */
.showstage-title-name {
  position: relative;
  display: block;
  font-size: clamp(3.6rem, 15.5vw, 12.5rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.035em;
  white-space: nowrap;
  color: var(--color-bg);
  -webkit-text-fill-color: var(--color-bg);
  -webkit-text-stroke: 2px rgba(192, 132, 252, 0.85);
  paint-order: stroke fill;
}

.showstage-title-name::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  -webkit-text-stroke: 0;
  background: linear-gradient(100deg, #7304c5 0%, #a717c4 30%, #f0abfc 62%, #c084fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  clip-path: polygon(
    -2% -10%,
    calc(var(--pos) + var(--skew)) -10%,
    calc(var(--pos) - var(--skew)) 110%,
    -2% 110%
  );
}

@media (max-width: 599px) {
  .showstage-title-name {
    -webkit-text-stroke-width: 1.5px;
  }
}

/* ── Comparador ──
   --pos  = posición del divisor (su centro), en % del ancho
   --skew = inclinación: cuánto se desplaza arriba (+) y abajo (−) respecto al centro
   main.js mueve ambas (definidas en .showstage-section); sin JS queda fijo,
   en diagonal, al 50 %. */
.stage-compare {
  max-width: 1120px;
  margin: 0 auto;
}

.stage-compare-frame {
  position: relative;
  aspect-ratio: 1324 / 696;
  overflow: hidden;
  border: 1px solid rgba(192, 132, 252, 0.35);
  border-radius: var(--radius);
  background: #000;
  box-shadow: 0 24px 60px -30px rgba(115, 4, 197, 0.8);
}

.stage-compare-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-select: none;
  user-select: none;
}

/* Capa de la edición anterior, recortada en diagonal hasta el divisor */
.stage-compare-before {
  position: absolute;
  inset: 0;
  clip-path: polygon(
    0 0,
    calc(var(--pos) + var(--skew)) 0,
    calc(var(--pos) - var(--skew)) 100%,
    0 100%
  );
}

/* Capa de la 7ma edición: debajo de todo */
.stage-compare-after {
  position: absolute;
  inset: 0;
}

/* Cambio de vista: en cada capa la foto nueva se funde ENCIMA de la actual,
   así nunca se asoma el fondo durante el cambio */
.stage-compare-after .stage-compare-img,
.stage-compare-before .stage-compare-img {
  transition: opacity 0.45s ease;
}

.stage-compare-after .stage-compare-img.is-incoming,
.stage-compare-before .stage-compare-img.is-incoming {
  opacity: 0;
}

.stage-compare-label {
  position: absolute;
  bottom: clamp(8px, 1.4vw, 16px);
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(10, 4, 20, 0.68);
  font-family: var(--font-heading);
  font-size: clamp(0.62rem, 1.1vw, 0.78rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  pointer-events: none;
}

/* Por encima de las fotos de su capa (también de la que entra al cambiar de foto) */
.stage-compare-label--before { left: clamp(8px, 1.4vw, 16px); z-index: 1; }
.stage-compare-label--after  { right: clamp(8px, 1.4vw, 16px); }

/* Línea divisoria: misma diagonal que el recorte. El brillo va en el
   contenedor porque clip-path recortaría una sombra puesta en la línea. */
.stage-compare-divider {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 0 6px rgba(224, 107, 255, 0.95));
  pointer-events: none;
}

.stage-compare-line {
  position: absolute;
  inset: 0;
  background: #fff;
  clip-path: polygon(
    calc(var(--pos) + var(--skew) - 1.5px) 0,
    calc(var(--pos) + var(--skew) + 1.5px) 0,
    calc(var(--pos) - var(--skew) + 1.5px) 100%,
    calc(var(--pos) - var(--skew) - 1.5px) 100%
  );
}

.stage-compare-knob {
  position: absolute;
  top: 50%;
  left: var(--pos);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  color: #15101f;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45), 0 0 0 4px rgba(192, 132, 252, 0.35);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Mientras nadie lo ha tocado: onda que sale de la perilla */
.stage-compare.is-idle .stage-compare-knob::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  animation: stage-compare-pulse 1.8s ease-out infinite;
}

@keyframes stage-compare-pulse {
  0%   { transform: scale(1);   opacity: 0.85; }
  100% { transform: scale(2.1); opacity: 0; }
}

/* El control real es un range invisible sobre toda la imagen:
   da arrastre, toque y teclado sin código propio */
.stage-compare-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
  -webkit-appearance: none;
  appearance: none;
}

.stage-compare-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 2px;
  height: 100%;
}

.stage-compare-range::-moz-range-thumb {
  width: 2px;
  height: 100%;
  border: 0;
}

.stage-compare-frame:has(.stage-compare-range:focus-visible) .stage-compare-knob {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

/* Barra bajo el comparador: aviso + miniaturas de la edición anterior */
.stage-compare-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
}

.stage-compare-hint {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.stage-compare-thumbs {
  display: flex;
  gap: 8px;
}

.stage-compare-thumb {
  width: clamp(64px, 9vw, 104px);
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  overflow: hidden;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity var(--t-fast) ease, border-color var(--t-fast) ease;
}

.stage-compare-thumb {
  position: relative;
}

.stage-compare-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mitad izquierda: la edición anterior, cortada en diagonal como el comparador */
.stage-compare-thumb .stage-compare-thumb-before {
  clip-path: polygon(0 0, 62% 0, 38% 100%, 0 100%);
}

.stage-compare-thumb:hover {
  opacity: 0.85;
}

.stage-compare-thumb[aria-pressed="true"] {
  border-color: var(--color-accent);
  opacity: 1;
}

/* Barra de la miniatura activa mientras el comparador avanza solo (main.js):
   al llenarse pasa a la siguiente pareja */
.stage-compare-thumb-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 3px;
  background: linear-gradient(90deg, #7304c5, #f0abfc);
  transform: scaleX(0);
  transform-origin: left center;
}

.stage-compare.is-autoplay .stage-compare-thumb[aria-pressed="true"] .stage-compare-thumb-progress {
  animation: stage-compare-progress 11s linear forwards;
}

.stage-compare.is-autoplay.is-paused .stage-compare-thumb[aria-pressed="true"] .stage-compare-thumb-progress {
  animation-play-state: paused;
}

@keyframes stage-compare-progress {
  to { transform: scaleX(1); }
}

/* ── Reseña de My Way: un párrafo por pareja + tarjeta de Instagram ── */
.showstage-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
  max-width: 1120px;
  margin: clamp(32px, 5vw, 64px) auto 0;
}

/* Contador "01 / 03": las cifras ruedan como un marcador al cambiar */
.showstage-story-count {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: clamp(14px, 2vw, 22px);
  font-family: 'Unbounded', var(--font-heading);
  line-height: 1;
}

.showstage-story-num {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  font-size: clamp(2.2rem, 4.2vw, 3.6rem);
  font-weight: 800;
}

.showstage-story-digits {
  display: flex;
  flex-direction: column;
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.showstage-story-digits span {
  display: block;
  height: 1em;
  background: linear-gradient(100deg, #a717c4 0%, #f0abfc 60%, #c084fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.showstage-story-total {
  font-size: clamp(0.9rem, 1.4vw, 1.1rem);
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

/* Los tres párrafos ocupan la misma celda (la altura es la del más largo).
   Al cambiar de pareja, el que sale se desvanece hacia arriba (0,28 s) y,
   cuando ya no está, el nuevo entra palabra a palabra (--i = posición):
   sube un poco y pasa de desenfocado a nítido. Nunca se ven los dos. */
.showstage-story-paras {
  display: grid;
}

.showstage-story-p {
  grid-area: 1 / 1;
  margin: 0;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.75;
  color: #cbb2ee;
  visibility: hidden;
}

.showstage-story-p.is-active,
.showstage-story-p.is-leaving {
  visibility: visible;
}

.showstage-story-p .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  filter: blur(6px);
}

.showstage-story-p.is-active .w {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition:
    opacity 0.5s ease,
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.55s ease;
  transition-delay: calc(0.32s + var(--i) * 14ms);
}

.showstage-story-p.is-leaving .w {
  opacity: 0;
  transform: translateY(-0.35em);
  filter: blur(4px);
  transition: opacity 0.28s ease, transform 0.28s ease, filter 0.28s ease;
}

.showstage-story .stage-profile {
  height: auto;
}

@media (max-width: 860px) {
  .showstage-story {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .showstage-story-p .w,
  .showstage-story-digits {
    transition: none !important;
  }
}

/* =======================================================
   CATEGORÍAS Y NOMINADOS — presentación (front-page.php)
   ======================================================= */
/* "NOMINADOS" ocupa todo el ancho de la pantalla: main.js calcula el tamaño
   para que llegue de borde a borde (sin JS, el vw de aquí se acerca mucho).
   Es la portada del bloque, por eso va claramente por encima de los nombres
   de categoría. --fill (0–1) descubre el degradado en diagonal, el mismo
   corte de "MY WAY"; lo mueve el scroll. Sin JS queda lleno. */
.nominees-intro {
  position: relative;
  padding: var(--section-pad) 0 0;
}

.nominees-intro-word {
  margin: 0;
  padding: 0 clamp(12px, 2vw, 32px);
  font-family: var(--font-display);
  font-size: 15.2vw;
  font-weight: 900;
  line-height: 0.84;
  letter-spacing: -0.045em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.nominees-intro-word-text {
  --fill: 1;
  position: relative;
  display: inline-block;
  /* Compensa el espaciado negativo tras la última letra para centrarla */
  margin-right: -0.045em;
  color: var(--color-bg);
  -webkit-text-fill-color: var(--color-bg);
  -webkit-text-stroke: 2px rgba(192, 132, 252, 0.75);
  paint-order: stroke fill;
}

.nominees-intro-word-text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  -webkit-text-stroke: 0;
  background: linear-gradient(100deg, #7304c5 0%, #a717c4 30%, #f0abfc 62%, #c084fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  clip-path: polygon(
    -5% -10%,
    calc(var(--fill) * 125% - 5%) -10%,
    calc(var(--fill) * 125% - 20%) 110%,
    -20% 110%
  );
}

/* Debajo, la frase hace de "firma" de la palabra: dos tramos en mayúsculas
   muy espaciadas, uno a cada lado, alineados con los márgenes del contenido
   (.container: el mismo borde que las categorías) para que no queden al
   borde de la pantalla, por donde pasan las esferas. Entran desde su lado
   con el mismo scroll que llena la palabra. */
.nominees-intro-claim {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-top: clamp(14px, 1.8vw, 26px);
  font-family: var(--font-heading);
  font-size: clamp(0.7rem, 1.25vw, 1.05rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--color-text);
}

.nominees-intro-claim-b {
  /* Compensa el espaciado tras la última letra: así acaba bajo la S */
  margin-right: -0.34em;
  background: linear-gradient(100deg, #a717c4 0%, #f0abfc 60%, #c084fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Móvil: una sola línea centrada con los dos tramos; el tamaño va en vw
   para que siempre quepa entera en el ancho del contenido */
@media (max-width: 599px) {
  .nominees-intro-claim {
    justify-content: center;
    gap: 0.9em;
    font-size: 2.4vw;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }

  .nominees-intro-claim-b {
    margin-right: -0.1em;
  }
}

@media (max-width: 599px) {
  .nominees-intro-word-text {
    -webkit-text-stroke-width: 1.5px;
  }
}

/* Entrada "enfoque": aparece desenfocado y se aclara, una sola vez (main.js) */
.focus-in {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .focus-in {
    opacity: 1 !important;
    filter: none !important;
  }
}

@media (max-width: 599px) {
  /* Más alto en móvil para que el comparador no quede como una tira */
  .stage-compare-frame {
    aspect-ratio: 3 / 2;
  }

  .stage-compare-knob {
    width: 40px;
    height: 40px;
  }

  .stage-compare-label-extra {
    display: none;
  }

  .stage-compare-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .stage-compare-hint {
    text-align: center;
  }

  .stage-compare-thumbs {
    justify-content: center;
  }

  .stage-compare-thumb {
    width: 30%;
  }
}

/* =======================================================
   EL SHOW — tablero "Próximamente" (en vez de la cuenta regresiva)
   Reutiliza las casillas .cd-item / .cd-number, una por letra.
   ======================================================= */
.countdown-live-dot--soon {
  background: #f0abfc;
  box-shadow: 0 0 8px rgba(240, 171, 252, 0.9);
  animation-name: soon-pulse;
}

@keyframes soon-pulse {
  0%, 100% { opacity: 1;    box-shadow: 0 0 8px rgba(240, 171, 252, 0.9); }
  50%      { opacity: 0.35; box-shadow: 0 0 3px rgba(240, 171, 252, 0.3); }
}

.countdown-board {
  gap: clamp(14px, 2.6vw, 34px);
}

.countdown-board-word {
  display: flex;
  gap: clamp(5px, 0.8vw, 10px);
}

/* Ancho fijo: las letras cambian mientras el tablero "gira" y no debe bailar */
.cd-item--char {
  width: clamp(40px, 8.4vw, 108px);
  min-width: 0;
  padding: clamp(12px, 2vw, 24px) 0 clamp(10px, 1.7vw, 20px);
  border-radius: clamp(10px, 1.4vw, 18px);
}

.cd-item--char::before {
  border-radius: inherit;
}

.cd-item--char .cd-number {
  font-size: clamp(1.7rem, 5.6vw, 4.8rem);
  font-weight: 800;
}

/* En móvil el tablero va en dos filas: las casillas pueden ser más grandes */
@media (max-width: 599px) {
  .countdown-board {
    flex-direction: column;
    gap: 10px;
  }

  .countdown-board-word {
    gap: 8px;
  }

  .cd-item--char {
    width: 17vw;
    max-width: 78px;
    padding: 16px 0 13px;
    border-radius: 14px;
  }

  .cd-item--char .cd-number {
    font-size: clamp(2rem, 9.5vw, 2.7rem);
  }
}

/* =======================================================
   FOOTER EN MÓVIL — todo alineado al eje central
   ======================================================= */
@media (max-width: 767px) {
  .footer-inner {
    justify-items: center;
    text-align: center;
  }

  .footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer-tagline {
    max-width: 32ch;
    margin-left: auto;
    margin-right: auto;
  }

  .footer-links,
  .footer-social {
    align-items: center;
  }

  .footer-social a {
    justify-content: center;
  }

  .footer-bottom {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
}

/* =======================================================
   RENDIMIENTO — animaciones en bucle solo mientras se ven
   main.js marca con .is-offscreen los bloques que salen de pantalla.
   Sin esto, las ~130 animaciones infinitas de la portada (esferas,
   cintas, partículas, franjas, sello…) seguían corriendo a la vez
   aunque no estuvieran a la vista.
   ======================================================= */
.is-offscreen,
.is-offscreen *,
.is-offscreen *::before,
.is-offscreen *::after {
  animation-play-state: paused !important;
}

/* =======================================================
   FUNDACIÓN — OCCAMY'S Foundation (page-fundacion.php)
   Base oscura del sitio + verde ácido de la fundación.
   Lenguaje: tipografía enorme, bordes rectos, mucho contraste.
   ======================================================= */
.fund-main {
  --fund-green: #a9fd09;
  --fund-green-soft: rgba(169, 253, 9, 0.32);
  padding-top: 0 !important;   /* el hero propio llega hasta arriba, bajo el header */
}

/* Etiqueta de sección: cuadrado verde + texto espaciado */
.fund-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fund-green);
}

.fund-label::before {
  content: '';
  width: 9px;
  height: 9px;
  background: currentColor;
  flex: 0 0 auto;
}

.fund-label--dark {
  color: #0a0a0f;
}

.fund-heading {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4.2vw, 3.4rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--color-text);
  text-wrap: balance;
}

/* ── Portada ── */
.fund-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(100svh, 920px);
  padding: calc(var(--nav-height) + clamp(40px, 7vw, 90px)) 0 clamp(64px, 9vw, 120px);
  overflow: hidden;
  border-bottom: 1px solid var(--fund-green-soft);
}

/* Fondo: remolino verde y morado + grano, como la pieza gráfica de la fundación */
.fund-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 88% 8%, rgba(169, 253, 9, 0.28) 0%, transparent 62%),
    radial-gradient(ellipse 70% 60% at 6% 96%, rgba(115, 4, 197, 0.6) 0%, transparent 66%),
    radial-gradient(ellipse 40% 34% at 62% 78%, rgba(169, 253, 9, 0.1) 0%, transparent 70%),
    var(--color-bg);
}

.fund-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.16;
  mix-blend-mode: overlay;
}

/* Esquineros: marco abierto, en vez de una caja cerrada */
.fund-corner {
  position: absolute;
  width: clamp(28px, 5vw, 64px);
  height: clamp(28px, 5vw, 64px);
  border: 2px solid var(--fund-green);
  pointer-events: none;
}

.fund-corner--tl {
  top: calc(var(--nav-height) + 12px);
  left: clamp(14px, 3vw, 40px);
  border-right: 0;
  border-bottom: 0;
}

.fund-corner--br {
  right: clamp(14px, 3vw, 40px);
  bottom: clamp(14px, 3vw, 40px);
  border-left: 0;
  border-top: 0;
}

.fund-hero .container {
  position: relative;
  z-index: 1;
}

.fund-hero-inner {
  margin-bottom: 0;
  text-align: left;
}

.fund-logo {
  width: clamp(220px, 34vw, 440px);
  height: auto;
  margin-bottom: clamp(28px, 5vw, 56px);
}

.fund-title {
  margin-top: 16px;
  max-width: 17ch;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 7.7vw, 6.5rem);
  text-wrap: balance;
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--color-text);
}

.fund-title-accent {
  display: block;
  color: var(--fund-green);
}

/* ── Bloques de dos columnas (etiqueta + contenido) ── */
.fund-split {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: clamp(28px, 6vw, 96px);
  align-items: start;
}

.fund-split-head {
  position: sticky;
  top: calc(var(--nav-height) + 24px);
}

.fund-split-body p {
  color: #cdc3df;
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.75;
  margin-bottom: 1.4em;
}

.fund-split-body p:last-child {
  margin-bottom: 0;
}

.fund-split-body .fund-lead {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.fund-pull {
  margin: clamp(24px, 4vw, 44px) 0;
  padding: clamp(18px, 3vw, 32px) 0 clamp(18px, 3vw, 32px) clamp(18px, 3vw, 36px);
  border-left: 5px solid var(--fund-green);
}

.fund-split-body .fund-pull p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 2.4rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--color-text);
}

/* ── Misión y visión ── */
.fund-pillars {
  padding-top: 0;
}

.fund-pillars-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
}

.fund-pillar {
  padding: clamp(24px, 3.4vw, 48px);
  border: 1px solid var(--fund-green-soft);
  background: linear-gradient(160deg, rgba(169, 253, 9, 0.05) 0%, transparent 45%);
}

.fund-pillar:nth-child(2) {
  border-color: rgba(192, 132, 252, 0.4);
  background: linear-gradient(160deg, rgba(115, 4, 197, 0.14) 0%, transparent 50%);
}

.fund-pillar:nth-child(2) .fund-label {
  color: var(--color-accent);
}

.fund-pillar-title {
  margin: 16px 0 18px;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.3vw, 1.9rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--color-text);
  text-wrap: balance;
}

.fund-pillar > p:last-child {
  color: #cdc3df;
  font-size: 1rem;
  line-height: 1.72;
}

/* ── Metas de impacto ── */
.fund-goals {
  padding-top: 0;
}

.fund-goals-head {
  margin-bottom: clamp(28px, 4vw, 52px);
}

.fund-goal-list {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.fund-goal {
  display: grid;
  grid-template-columns: clamp(64px, 9vw, 130px) minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(16px, 3vw, 48px);
  align-items: start;
  padding: clamp(26px, 4vw, 52px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

/* Número en contorno limpio (relleno del color del fondo + paint-order) */
.fund-goal-num {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 5rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--color-bg);
  -webkit-text-fill-color: var(--color-bg);
  -webkit-text-stroke: 2px var(--fund-green);
  paint-order: stroke fill;
}

.fund-goal-title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.8rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--color-text);
  text-wrap: balance;
}

.fund-goal-items {
  display: grid;
  gap: 22px;
}

.fund-goal-items dt {
  margin-bottom: 6px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fund-green);
}

.fund-goal-items dd {
  color: #cdc3df;
  font-size: 1rem;
  line-height: 1.7;
}

/* ── Mensaje: bloque verde a sangre, texto negro ── */
.fund-message {
  padding: clamp(64px, 9vw, 130px) 0;
  background: var(--fund-green);
  color: #0a0a0f;
}

.fund-quote {
  margin-top: clamp(18px, 3vw, 32px);
}

.fund-quote p {
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4.4vw, 3.6rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #0a0a0f;
  text-wrap: balance;
}

.fund-quote p::before { content: '“'; }
.fund-quote p::after  { content: '”'; }

/* Nota tras la cita: la reflexión del mensaje, en tamaño de lectura */
.fund-quote .fund-quote-note {
  max-width: 60ch;
  margin-top: clamp(20px, 3vw, 32px);
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
}

.fund-quote .fund-quote-note::before,
.fund-quote .fund-quote-note::after {
  content: none;
}

.fund-quote .fund-quote-sign {
  margin-bottom: 4px;
  letter-spacing: 0.04em;
  text-transform: none;
}

.fund-quote footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: clamp(24px, 4vw, 44px);
  padding-left: 16px;
  border-left: 4px solid #0a0a0f;
}

.fund-quote cite {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.fund-quote footer span {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── Cierre ── */
.fund-closing {
  padding: clamp(56px, 8vw, 110px) 0;
  text-align: center;
}

.fund-closing-logo {
  width: clamp(180px, 24vw, 300px);
  height: auto;
  margin: 0 auto clamp(22px, 3vw, 34px);
  opacity: 0.92;
}

.fund-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 2px solid var(--fund-green);
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text);
}

.fund-link:hover {
  color: var(--fund-green);
}

.fund-link svg {
  transition: transform var(--t-fast) ease;
}

.fund-link:hover svg {
  transform: translate(2px, -2px);
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .fund-split,
  .fund-pillars-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .fund-split-head {
    position: static;
  }

  .fund-goal {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .fund-goal-items {
    margin-top: 8px;
  }
}

@media (max-width: 599px) {
  .fund-hero {
    min-height: 0;
  }

  .fund-goal-num {
    -webkit-text-stroke-width: 1.5px;
  }

  .fund-quote p {
    max-width: none;
  }
}

/* Táctiles (iOS): sin desenfoque animado palabra por palabra; el blur
   obliga a repintar cada palabra en cada fotograma de la transición */
@media (hover: none) and (pointer: coarse) {
  .showstage-story-p .w,
  .showstage-story-p.is-active .w,
  .showstage-story-p.is-leaving .w {
    filter: none;
  }
}

/* ── RIF junto a las marcas (exigencia del SENIAT) ─────────
   Discreto pero legible: mayúsculas espaciadas en tono suave */
.site-rif,
.site-logo .site-rif {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.56rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(203, 178, 238, 0.72);
}

.nav-overlay-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.showstage-rif {
  margin: clamp(12px, 1.4vw, 18px) 0 0;
  font-family: var(--font-heading);
  font-size: clamp(0.6rem, 0.9vw, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(203, 178, 238, 0.72);
}

.stage-profile-bio .stage-profile-rif {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: #a58fc6;
}


/* ══ Rendimiento en teléfonos y tablets ══════════════════════════
   Mismo aspecto, menos trabajo para la GPU al hacer scroll */
@media (hover: none) and (pointer: coarse) {
  /* El desenfoque de lo que pasa por detrás del header se recalculaba en
     cada fotograma del scroll; con el fondo casi opaco se ve igual */
  .site-header.scrolled {
    background-color: rgba(10, 10, 15, 0.95);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* Esferas: el resplandor era un doble drop-shadow que la GPU recalculaba
     en cada fotograma de su vaivén. Como son redondas, un degradado radial
     detrás da el mismo halo y no cuesta nada */
  .p-orb {
    filter: none;
  }

  .p-orb-wrap::before {
    content: '';
    position: absolute;
    inset: -42%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(115, 4, 197, 0.5) 30%, rgba(167, 92, 255, 0.16) 62%, transparent 100%);
    pointer-events: none;
  }
}

/* ══ MODO PRÓXIMAMENTE ═══════════════════════════════════════════
   Portada de una sola pantalla: header, título "Muy pronto" con el
   trofeo y una franja de pie. Reutiliza el hero (mismas animaciones
   y el mismo visor 3D) */
body.is-coming-soon.home {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

body.is-coming-soon.home .soon-main {
  flex: 1;
  display: flex;
}

.soon-hero {
  flex: 1;
  display: flex;
}

.soon-hero .hero-inner {
  flex: 1;
  width: 100%;
  min-height: 0;
  padding-bottom: 32px;
}

.soon-eyebrow {
  margin: 0 0 26px;
}

/* ── Mini título: ticket de la 7ma edición ──
   Las muescas salen de una máscara (dos círculos recortados en la unión) */
.soon-ticket {
  --cut: 64px;
  position: relative;
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  border-radius: 10px;
  -webkit-mask:
    radial-gradient(circle 6px at var(--cut) 0, #0000 97%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle 6px at var(--cut) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle 6px at var(--cut) 0, #0000 97%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle 6px at var(--cut) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
}

.soon-ticket-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cut);
  padding: 10px 0;
  background: linear-gradient(140deg, #7304c5 0%, #a717c4 55%, #e07ef0 100%);
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 900;
  line-height: 1;
  color: #fff;
}

/* "ma" volado, como ordinal */
.soon-ticket-num span {
  align-self: flex-start;
  margin: 2px 0 0 1px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.soon-ticket-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 10px 20px 10px 16px;
  background: rgba(255, 255, 255, 0.06);
  text-align: left;
}

.soon-ticket-kicker {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #F0ABFC;
}

.soon-ticket-name {
  font-family: var(--font-heading);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text);
  white-space: nowrap;
}

/* Destello que recorre el ticket una vez, cuando ya entró */
.soon-ticket::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: soon-ticket-shine 1.4s cubic-bezier(0.45, 0, 0.2, 1) 1.6s 1 forwards;
  pointer-events: none;
}

@keyframes soon-ticket-shine {
  to { transform: translateX(120%); }
}

.soon-title {
  font-size: clamp(72px, 9.5vw, 156px);
  line-height: 0.86;
  margin-bottom: 30px;
}

.soon-content .hero-desc {
  max-width: 470px;
  margin-bottom: 30px;
}

/* Lo que viene: tres casillas "Por revelar" */
.soon-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 470px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.soon-steps li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px 13px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  text-align: left;
}

.soon-step-name {
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text);
}

/* "Por revelar" con un brillo que lo recorre, uno tras otro */
.soon-step-state {
  font-size: 0.78rem;
  color: var(--color-text-muted, #9278a8);
  background: linear-gradient(100deg, #9278a8 35%, #F0ABFC 50%, #9278a8 65%) 0 0 / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: soon-shine 4.5s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.5s);
}

@keyframes soon-shine {
  0%, 55% { background-position: 100% 0; }
  85%, 100% { background-position: 0 0; }
}

/* ── Pie en una franja ── */
.site-footer--soon {
  padding: 20px 0 24px;
}

.soon-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.soon-footer-social {
  display: flex;
  align-items: center;
  gap: 8px;
}

.soon-footer-label {
  margin-right: 6px;
  font-family: var(--font-heading);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent, #C084FC);
}

.soon-footer-social a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--color-text-muted, #9278a8);
  background: rgba(255, 255, 255, 0.04);
  transition: color 0.25s ease, background-color 0.25s ease;
}

.soon-footer-social a:hover {
  color: #fff;
  background: rgba(115, 4, 197, 0.45);
}

.soon-footer-social svg {
  width: 16px;
  height: 16px;
}

.soon-footer-legal {
  flex: 1;
  margin: 0;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--color-text-muted, #9278a8);
}

.soon-footer-legal a,
.soon-footer-privacy {
  color: var(--color-text-muted, #9278a8);
  text-decoration: underline;
  text-decoration-color: rgba(192, 132, 252, 0.4);
  text-underline-offset: 3px;
}

.soon-footer-privacy {
  font-size: 0.78rem;
  white-space: nowrap;
}

.soon-footer-legal a:hover,
.soon-footer-privacy:hover {
  color: var(--color-text);
}

@media (max-width: 1024px) {
  .soon-content {
    align-items: center;
  }
  .soon-steps li {
    text-align: center;
  }
  .soon-footer {
    flex-direction: column;
    gap: 12px;
  }
}

@media (max-width: 767px) {
  .soon-hero .hero-inner {
    height: auto;
    min-height: 0;
    padding: 0;
  }
  .soon-hero .hero-visual {
    height: 28dvh;
    margin-top: calc(var(--nav-height) + 12px);
  }
  .soon-content {
    padding: 0 20px 12px;
  }
  .soon-eyebrow {
    margin-bottom: 14px;
  }
  .soon-ticket {
    --cut: 54px;
  }
  .soon-ticket-num {
    font-size: 1.6rem;
    padding: 8px 0;
  }
  .soon-ticket-text {
    padding: 8px 16px 8px 14px;
  }
  .soon-ticket-name {
    font-size: 0.74rem;
  }
  .soon-title {
    font-size: clamp(44px, 13.5vw, 70px);
    margin-bottom: 12px;
  }
  .soon-content .hero-desc {
    margin-bottom: 14px;
    font-size: 0.86rem;
    line-height: 1.55;
  }
  .soon-steps {
    gap: 6px;
    margin-bottom: 14px;
  }
  .soon-steps li {
    padding: 10px 6px 9px;
    gap: 4px;
  }
  .soon-step-name {
    font-size: 0.6rem;
    letter-spacing: 0.08em;
  }
  .soon-step-state {
    font-size: 0.68rem;
  }
  .site-footer--soon {
    padding: 8px 0 14px;
  }
  .soon-footer {
    gap: 6px;
  }
  .soon-footer-social a {
    width: 30px;
    height: 30px;
  }
  .soon-footer-legal,
  .soon-footer-privacy {
    font-size: 0.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .soon-ticket::after,
  .soon-step-state {
    animation: none;
  }
}

/* ══ Trofeo: sin "cuadrado" alrededor ════════════════════════════
   En algunos teléfonos Android el lienzo 3D pinta su fondo con un negro
   que no es transparente y se veía su rectángulo sobre el resplandor
   morado del hero. Además, en móvil un degradado a negro sólido tapaba la
   base. Ahora los bordes del área del trofeo se desvanecen con una
   máscara: se funde con el fondo, sea del color que sea */
#hero-canvas {
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-composite: intersect;
}

@media (max-width: 767px) {
  .hero-visual::after {
    display: none;
  }

  /* Elipse: si un teléfono pinta el fondo del 3D en negro, queda como una
     sombra suave detrás del trofeo, sin esquinas ni bordes rectos */
  .hero-visual {
    -webkit-mask-image: radial-gradient(ellipse 50% 54% at 50% 46%, #000 58%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 54% at 50% 46%, #000 58%, transparent 100%);
  }

  /* La máscara del contenedor ya funde los bordes */
  #hero-canvas {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ══ POLÍTICA DE PRIVACIDAD ═════════════════════════════════════
   Portada con el título de la marca, resumen en cuatro puntos e
   índice fijo a la izquierda (en escritorio) que marca la sección
   que se está leyendo */
.legal-main {
  position: relative;
  padding-bottom: clamp(64px, 8vw, 120px);
}

.legal-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--nav-height) + clamp(56px, 8vw, 110px)) 0 clamp(36px, 5vw, 64px);
}

/* Resplandor de la marca detrás del título */
.legal-hero::before {
  content: '';
  position: absolute;
  top: -20%;
  left: 50%;
  width: min(1100px, 140vw);
  height: 120%;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 45% 55% at 30% 40%, rgba(115, 4, 197, 0.28), transparent 70%),
    radial-gradient(ellipse 35% 45% at 75% 30%, rgba(26, 75, 222, 0.14), transparent 70%);
  pointer-events: none;
}

.legal-hero-inner {
  position: relative;
  text-align: center;
}

.legal-eyebrow {
  margin: 0 0 18px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-accent, #C084FC);
}

.legal-title {
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-size: clamp(42px, 7.5vw, 112px);
  font-weight: 900;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--color-text);
}

.legal-title-line {
  display: block;
}

.legal-title-accent {
  background: var(--gradient-iridescent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.legal-lead {
  max-width: 60ch;
  margin: 0 auto 22px;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.7;
  color: #cbb2ee;
  text-wrap: balance;
}

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-text-muted, #9278a8);
}

/* ── Resumen: cuatro compromisos ── */
.legal-promises {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 clamp(48px, 6vw, 88px);
  padding: 0;
  list-style: none;
}

.legal-promises li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 22px 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
}

.legal-promise-num {
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1;
  background: var(--gradient-iridescent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.legal-promises strong {
  font-family: var(--font-heading);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--color-text);
}

.legal-promises li > span:last-child {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-text-muted, #a09ab8);
}

/* ── Índice + texto ── */
.legal-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.legal-toc {
  position: sticky;
  top: calc(var(--nav-height) + 24px);
}

.legal-toc-title {
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent, #C084FC);
}

.legal-toc ol {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.legal-toc a {
  display: flex;
  gap: 12px;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--color-text-muted, #9278a8);
  text-decoration: none;
  transition: color 0.25s ease, background-color 0.25s ease;
}

.legal-toc a span {
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.75;
  color: rgba(192, 132, 252, 0.55);
}

.legal-toc a:hover,
.legal-toc a.is-active {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.05);
}

.legal-toc a.is-active span {
  color: #F0ABFC;
}

.legal-body {
  max-width: 760px;
}

.legal-section {
  scroll-margin-top: calc(var(--nav-height) + 24px);
  padding-bottom: clamp(36px, 4vw, 56px);
}

.legal-section h2 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-text);
}

.legal-num {
  flex-shrink: 0;
  font-size: 0.8em;
  background: var(--gradient-iridescent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.legal-section h3 {
  margin: 28px 0 10px;
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: 700;
  color: #e9dcff;
}

.legal-section p,
.legal-section li {
  font-size: 1rem;
  line-height: 1.8;
  color: #bfaedb;
}

.legal-section p {
  margin: 0 0 14px;
}

.legal-section ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.legal-section ul li {
  position: relative;
  padding-left: 22px;
}

/* Viñeta: un pequeño rombo con el degradado de la marca */
.legal-section ul li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: linear-gradient(135deg, #F0ABFC, #7304c5);
  transform: rotate(45deg);
}

.legal-section strong {
  color: var(--color-text);
  font-weight: 600;
}

.legal-section a {
  color: #e2b6ff;
  text-decoration: underline;
  text-decoration-color: rgba(240, 171, 252, 0.45);
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.legal-section a:hover {
  color: #fff;
}

.legal-section code {
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.86em;
  color: #F0ABFC;
}

/* Tabla de almacenamiento (rejilla, sin líneas) */
.legal-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 18px 0 8px;
}

.legal-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 170px;
  gap: 18px;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.92rem;
  line-height: 1.6;
  color: #bfaedb;
}

.legal-row--head {
  padding-top: 0;
  padding-bottom: 4px;
  background: none;
  font-family: var(--font-heading);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent, #C084FC);
}

/* Contacto destacado al final */
.legal-contact {
  position: relative;
  padding: 26px 28px;
  border-radius: 18px;
  background:
    radial-gradient(ellipse 60% 120% at 0% 0%, rgba(115, 4, 197, 0.22), transparent 70%),
    rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(192, 132, 252, 0.22);
}

.legal-contact p {
  margin: 0;
  font-size: 1.05rem;
  color: var(--color-text);
}

.legal-contact .legal-contact-id {
  margin-top: 12px;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted, #9278a8);
}

@media (max-width: 1024px) {
  .legal-promises {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .legal-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  /* En tablet y móvil el índice va arriba, en dos columnas, sin fijar */
  .legal-toc {
    position: static;
    padding: 20px 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
  }
  .legal-toc ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px;
  }
  .legal-body {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .legal-promises {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .legal-promises li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 16px;
    padding: 18px;
  }
  .legal-promise-num {
    grid-row: span 2;
    margin: 0;
    font-size: 1.4rem;
  }
  .legal-toc ol {
    grid-template-columns: minmax(0, 1fr);
  }
  .legal-section p,
  .legal-section li {
    font-size: 0.95rem;
    line-height: 1.75;
  }
  .legal-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .legal-row--head {
    display: none;
  }
  .legal-contact {
    padding: 22px 20px;
  }
}

@media (max-width: 767px) {
  .legal-row span[role="cell"]:last-child::before {
    content: 'Duración: ';
    color: var(--color-accent, #C084FC);
  }
}

/* ══ OCCAMY'S MAGAZINE ═══════════════════════════════════════════
   Formato de revista digital / blog de noticias:
   - mancheta compacta (fecha, nombre, lema, secciones);
   - portada con la noticia principal y la columna "Lo último";
   - filas de blog con miniatura;
   - artículo con columna lateral "Sigue leyendo".
   Misma piel que el resto del sitio: fondo oscuro, degradado
   iridiscente, rombo de acento y sin líneas divisorias */

.mag-grad {
  background: var(--gradient-iridescent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ── Mancheta ── */
.mag-masthead {
  position: relative;
  padding: calc(var(--nav-height) + clamp(32px, 4vw, 56px)) 0 0;
}

.mag-masthead::before {
  content: '';
  position: absolute;
  inset: 0 0 -60px;
  background:
    radial-gradient(ellipse 45% 70% at 15% 30%, rgba(115, 4, 197, 0.22), transparent 70%),
    radial-gradient(ellipse 30% 50% at 85% 10%, rgba(26, 75, 222, 0.1), transparent 70%);
  pointer-events: none;
}

.mag-masthead .container {
  position: relative;
}

.mag-masthead-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted, #9278a8);
}

.mag-masthead-tagline {
  color: var(--color-accent, #C084FC);
}

.mag-masthead-name {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--color-text);
}

.mag-masthead-name--small {
  margin-bottom: 18px;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}

.mag-masthead-name a {
  color: inherit;
  text-decoration: none;
}

.mag-masthead-desc {
  max-width: 62ch;
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: #bfaedb;
}

.mag-archive-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-text);
}

.mag-archive-kicker {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent, #C084FC);
}

.mag-archive-desc {
  max-width: 62ch;
  margin: 0;
  color: #bfaedb;
}

/* Secciones */
.mag-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 26px;
}

.mag-tab {
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-text-muted, #a09ab8);
  text-decoration: none;
  transition: color 0.25s ease, background-color 0.25s ease;
}

.mag-tab:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.08);
}

.mag-tab.is-active {
  color: #fff;
  background: linear-gradient(135deg, #7304c5, #a717c4);
}

/* Título de bloque: rombo + mayúsculas espaciadas */
.mag-block-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text);
}

.mag-block-title::before {
  content: '';
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 2px;
  background: linear-gradient(135deg, #F0ABFC, #7304c5);
  transform: rotate(45deg);
}

.mag-content {
  position: relative;
  padding-top: clamp(36px, 4vw, 52px);
  padding-bottom: clamp(72px, 9vw, 120px);
}

/* ── Piezas (artículo en sus formatos) ── */
.mag-item {
  position: relative;
}

.mag-item-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  background: #0c0b12;
  isolation: isolate;
}

.mag-item-img,
.mag-item-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.mag-item-placeholder {
  background:
    radial-gradient(ellipse 60% 70% at 30% 35%, rgba(115, 4, 197, 0.55), transparent 70%),
    radial-gradient(ellipse 50% 60% at 75% 70%, rgba(240, 171, 252, 0.25), transparent 70%),
    #0c0b12;
}

.mag-item-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.mag-item-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0;
  font-size: 0.78rem;
  color: var(--color-text-muted, #9278a8);
}

.mag-item-section {
  font-family: var(--font-heading);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #F0ABFC;
}

.mag-item-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.32;
  text-wrap: balance;
}

.mag-item-title a {
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.3s ease;
}

/* Toda la pieza es el enlace */
.mag-item-title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.mag-item-title a:focus-visible {
  outline: none;
}

.mag-item:focus-within .mag-item-media {
  outline: 2px solid #F0ABFC;
  outline-offset: 3px;
}

.mag-item-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-text-muted, #a09ab8);
}

.mag-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  font-size: 0.8rem;
  color: rgba(146, 120, 168, 0.95);
}

@media (hover: hover) {
  .mag-item:hover .mag-item-img {
    transform: scale(1.05);
  }
  .mag-item:hover .mag-item-title a {
    color: #F0ABFC;
  }
}

/* Noticia principal */
.mag-item--lead {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mag-item--lead .mag-item-media {
  aspect-ratio: 16 / 9;
  border-radius: 20px;
}

.mag-item--lead .mag-item-title {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.5vw, 2.2rem);
  font-weight: 800;
  line-height: 1.15;
}

.mag-item--lead .mag-item-excerpt {
  font-size: 1.02rem;
  color: #cbb2ee;
}

/* Titular compacto con miniatura */
.mag-item--side {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.mag-item--side .mag-item-media {
  aspect-ratio: 1;
  border-radius: 12px;
}

.mag-item--side .mag-item-body {
  gap: 6px;
}

.mag-item--side .mag-item-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.96rem;
  line-height: 1.35;
}

/* Fila de blog */
.mag-item--row {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 36px);
}

.mag-item--row .mag-item-media {
  aspect-ratio: 3 / 2;
}

.mag-item--row .mag-item-title {
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
}

/* Tarjeta vertical */
.mag-item--grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Portada del Magazine ── */
.mag-front {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(28px, 4vw, 56px);
}

.mag-latest {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.025);
}

.mag-latest .mag-block-title {
  margin-bottom: 4px;
}

.mag-feed {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 3.5vw, 44px);
  margin-top: clamp(56px, 6vw, 80px);
}

.mag-feed .mag-block-title {
  margin-bottom: -8px;
}

.mag-content > .mag-feed:first-child {
  margin-top: 0;
}

/* Entrada al aparecer en pantalla */
.mag-reveal {
  transition: opacity 0.8s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.mag-anim .mag-reveal:not(.is-in) {
  opacity: 0;
  transform: translateY(26px);
}

.mag-anim .mag-reveal:not(.is-in) .mag-item-img {
  transform: scale(1.1);
}

/* Paginación */
.mag-pagination {
  margin-top: clamp(56px, 6vw, 80px);
}

.mag-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.mag-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted, #a09ab8);
  text-decoration: none;
  transition: color 0.25s ease, background-color 0.25s ease;
}

.mag-pagination a.page-numbers:hover {
  color: #fff;
  background: rgba(115, 4, 197, 0.45);
}

.mag-pagination .page-numbers.current {
  color: #fff;
  background: linear-gradient(135deg, #7304c5, #a717c4);
}

.mag-empty {
  max-width: 520px;
  margin: 24px auto 0;
  text-align: center;
  color: var(--color-text-muted, #a09ab8);
}

.mag-empty-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-text);
}

.mag-empty .btn {
  margin-top: 20px;
}

/* ── Artículo ── */
.mag-single {
  position: relative;
  padding: calc(var(--nav-height) + clamp(32px, 4vw, 56px)) 0 clamp(72px, 9vw, 120px);
}

.mag-single::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 520px;
  background: radial-gradient(ellipse 45% 70% at 15% 10%, rgba(115, 4, 197, 0.2), transparent 70%);
  pointer-events: none;
}

.mag-single-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
  gap: clamp(40px, 5vw, 80px);
}

.mag-article {
  min-width: 0;
  max-width: 780px;
}

.mag-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(192, 132, 252, 0.55);
}

.mag-crumbs a {
  color: var(--color-text-muted, #9278a8);
  text-decoration: none;
  transition: color 0.2s ease;
}

.mag-crumbs a:hover {
  color: var(--color-text);
}

.mag-crumbs .mag-crumbs-section {
  color: #F0ABFC;
}

.mag-article-title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.4vw, 2.85rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-wrap: balance;
}

.mag-article-lead {
  margin: 0 0 22px;
  font-size: clamp(1.05rem, 1.4vw, 1.18rem);
  line-height: 1.65;
  color: #cbb2ee;
}

.mag-article-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  padding: 12px 14px 12px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
}

.mag-article-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mag-avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(140deg, #7304c5, #a717c4 55%, #e07ef0);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 900;
  color: #fff;
}

.mag-article-byline {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 0.9rem;
}

.mag-article-byline a {
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
}

.mag-article-byline a:hover {
  color: #F0ABFC;
}

.mag-article-when {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--color-text-muted, #9278a8);
}

.mag-article-cover {
  margin: 28px 0 0;
}

.mag-article-cover-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 18px;
}

.mag-article-cover figcaption {
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--color-text-muted, #9278a8);
}

/* Compartir */
.mag-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.mag-share-label {
  margin-right: 4px;
  font-family: var(--font-heading);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted, #9278a8);
}

.mag-share-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-muted, #a09ab8);
  cursor: pointer;
  transition: color 0.25s ease, background 0.25s ease, transform 0.35s cubic-bezier(0.2, 1.3, 0.4, 1);
}

.mag-share-btn svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mag-share-btn:hover,
.mag-share-btn:focus-visible,
.mag-share-copy.is-copied {
  color: #fff;
  background: linear-gradient(135deg, #7304c5, #c23bd4);
  outline: none;
}

.mag-share-btn:hover {
  transform: scale(1.08);
}

.mag-share-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: 8px;
  background: #F0ABFC;
  font-family: var(--font-heading);
  font-size: 0.66rem;
  font-weight: 700;
  white-space: nowrap;
  color: #12061f;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.mag-share-copy.is-copied .mag-share-tip {
  opacity: 1;
}

/* Texto */
.mag-prose {
  margin-top: 36px;
  font-size: 1.1rem;
  line-height: 1.85;
  color: #d4c6ec;
}

.mag-prose > * + * {
  margin-top: 1.3em;
}

.mag-prose p {
  margin-bottom: 0;
}

/* Primer párrafo con letra capital en el color de la marca */
.mag-prose > p:first-child {
  font-size: 1.2rem;
  line-height: 1.75;
  color: #efe6ff;
}

.mag-prose > p:first-child::first-letter {
  float: left;
  margin: 0.08em 0.12em 0 0;
  font-family: var(--font-display);
  font-size: 3.5em;
  font-weight: 900;
  line-height: 0.8;
  color: #C084FC;
}

.mag-prose h2,
.mag-prose h3,
.mag-prose h4 {
  font-family: var(--font-display);
  line-height: 1.22;
  color: var(--color-text);
  text-wrap: balance;
}

.mag-prose h2 {
  margin-top: 1.9em;
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  font-weight: 800;
}

.mag-prose h3 {
  margin-top: 1.7em;
  font-size: 1.25rem;
  font-weight: 700;
}

.mag-prose h4 {
  margin-top: 1.5em;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #e9dcff;
}

.mag-prose h2 + *,
.mag-prose h3 + *,
.mag-prose h4 + * {
  margin-top: 0.65em;
}

.mag-prose a {
  color: #e2b6ff;
  text-decoration: underline;
  text-decoration-color: rgba(240, 171, 252, 0.45);
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.mag-prose a:hover {
  color: #fff;
  text-decoration-color: #F0ABFC;
}

.mag-prose strong {
  color: var(--color-text);
  font-weight: 600;
}

.mag-prose em {
  color: #f3d9ff;
}

.mag-prose ul,
.mag-prose ol {
  display: flex;
  flex-direction: column;
  gap: 0.55em;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

.mag-prose li {
  position: relative;
  padding-left: 1.6em;
}

.mag-prose ul li::before {
  content: '';
  position: absolute;
  left: 0.2em;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: linear-gradient(135deg, #F0ABFC, #7304c5);
  transform: rotate(45deg);
}

.mag-prose ol {
  counter-reset: mag-ol;
}

.mag-prose ol li {
  counter-increment: mag-ol;
  padding-left: 2.1em;
}

.mag-prose ol li::before {
  content: counter(mag-ol, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1em;
  font-family: var(--font-display);
  font-size: 0.85em;
  font-weight: 800;
  color: #C084FC;
}

/* Cita destacada: panel suave con comillas en degradado */
.mag-prose blockquote {
  position: relative;
  margin: 1.8em 0;
  padding: 1.4em 1.5em 1.3em 1.5em;
  border: 0;
  border-radius: 18px;
  background:
    radial-gradient(ellipse 60% 120% at 0% 0%, rgba(115, 4, 197, 0.2), transparent 70%),
    rgba(255, 255, 255, 0.03);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.4rem);
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-text);
}

.mag-prose blockquote::before {
  content: '\201C';
  display: block;
  height: 0.5em;
  margin-bottom: 0.2em;
  font-size: 3em;
  line-height: 1;
  background: var(--gradient-iridescent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mag-prose blockquote p {
  margin: 0;
}

.mag-prose blockquote cite {
  display: block;
  margin-top: 0.9em;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent, #C084FC);
}

.mag-prose figure {
  margin-left: 0;
  margin-right: 0;
}

.mag-prose img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 14px;
}

.mag-prose figcaption,
.mag-prose .wp-element-caption {
  margin-top: 10px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--color-text-muted, #9278a8);
}

.mag-prose iframe,
.mag-prose video,
.mag-prose .wp-block-embed__wrapper > * {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 0;
  border-radius: 14px;
}

.mag-prose .wp-block-embed.is-type-video iframe,
.mag-prose .wp-has-aspect-ratio iframe {
  height: auto;
  aspect-ratio: 16 / 9;
}

/* Separador: rombos en vez de una línea */
.mag-prose hr {
  width: 7px;
  height: 7px;
  margin: 2.4em auto;
  border: 0;
  border-radius: 2px;
  background: linear-gradient(135deg, #F0ABFC, #7304c5);
  transform: rotate(45deg);
  box-shadow: 18px -18px 0 -0.5px rgba(192, 132, 252, 0.6), -18px 18px 0 -0.5px rgba(192, 132, 252, 0.6);
}

.mag-prose table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
  font-size: 0.95rem;
}

.mag-prose th,
.mag-prose td {
  padding: 10px 14px;
  text-align: left;
  background: rgba(255, 255, 255, 0.03);
}

.mag-prose th {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent, #C084FC);
  background: none;
}

.mag-prose code {
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.88em;
  color: #F0ABFC;
}

/* Pie del artículo */
.mag-article-foot {
  margin-top: 44px;
}

.mag-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}

.mag-tags a {
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.82rem;
  color: var(--color-text-muted, #a09ab8);
  text-decoration: none;
}

.mag-tags a:hover {
  color: #fff;
  background: rgba(115, 4, 197, 0.45);
}

.mag-share-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  padding: 18px 20px;
  border-radius: 18px;
  background:
    radial-gradient(ellipse 50% 140% at 0% 50%, rgba(115, 4, 197, 0.22), transparent 70%),
    rgba(255, 255, 255, 0.03);
}

.mag-share-end-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-text);
}

/* Columna lateral */
.mag-aside {
  position: sticky;
  top: calc(var(--nav-height) + 28px);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.mag-aside-block {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.025);
}

.mag-aside-block .mag-block-title {
  margin-bottom: 2px;
}

.mag-tabs--aside {
  margin-top: 0;
}

/* ── Tablet ── */
@media (max-width: 1024px) {
  .mag-front {
    grid-template-columns: minmax(0, 1fr);
  }
  .mag-single-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .mag-article {
    max-width: none;
  }
  .mag-aside {
    position: static;
  }
}

/* ── Móvil ── */
@media (max-width: 767px) {
  .mag-masthead-tagline {
    display: none;
  }
  .mag-tabs:not(.mag-tabs--aside) {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-right: -20px;
    padding-right: 20px;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .mag-tabs::-webkit-scrollbar {
    display: none;
  }
  .mag-latest {
    padding: 18px;
  }
  .mag-item--row {
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
  }
  .mag-item--row .mag-item-media {
    aspect-ratio: 1;
    border-radius: 12px;
  }
  .mag-item--row .mag-item-title {
    font-size: 1.02rem;
  }
  .mag-item--row .mag-item-excerpt {
    display: none;
  }
  .mag-article-bar {
    padding: 12px;
  }
  .mag-prose {
    font-size: 1.04rem;
    line-height: 1.8;
  }
  .mag-prose > p:first-child {
    font-size: 1.12rem;
  }
  .mag-aside-block {
    padding: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mag-reveal,
  .mag-item-img {
    transition: none;
  }
}

/* "Lo último" numerado: 01, 02, 03 sobre la miniatura */
.mag-latest {
  counter-reset: mag-latest;
}

.mag-latest .mag-item--side {
  counter-increment: mag-latest;
}

.mag-latest .mag-item--side .mag-item-media::after {
  content: counter(mag-latest, decimal-leading-zero);
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 4px 7px 3px;
  border-radius: 0 10px 0 0;
  background: linear-gradient(135deg, #7304c5, #a717c4);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  color: #fff;
}

/* Feed cronológico: separador por día con el rombo de la marca */
.mag-feed-date {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 -14px;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent, #C084FC);
}

.mag-feed-date::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #F0ABFC;
  box-shadow: 0 0 10px rgba(240, 171, 252, 0.8);
}

/* El Magazine gestiona su propio espacio bajo el header: la regla general
   de páginas interiores lo duplicaba y en el listado dejaba una franja
   plana detrás del header, sin el resplandor de la cabecera */
body:not(.home) .site-main.mag-main {
  padding-top: 0;
}

body:not(.home) .site-main.mag-single {
  padding-top: calc(var(--nav-height) + clamp(32px, 4vw, 56px));
}

/* ══ HERO: focos de escenario ═════════════════════════════════════
   Sustituye a los cuadraditos flotantes. Tres haces de luz caen sobre
   el trofeo (main.js los apunta a su centro) y un brillo de piso lo
   asienta. Solo degradados recortados y transform: la animación la
   hace la GPU sin repintar. */
.hero-section::before,
.hero-section::after,
.hero-particles {
  display: none;
}

.hero-lights {
  --bw: min(560px, 46vw);
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.hero-lights.is-ready {
  opacity: 1;
}

/* Bruma morada alrededor del trofeo; se desvanece hacia el borde de abajo
   para no dejar un corte recto contra la sección siguiente */
.hero-haze {
  position: absolute;
  inset: 0;
  background: radial-gradient(70vmax 70vmax at var(--cx, 72%) var(--cy, 50%), rgba(115, 4, 197, 0.2), rgba(115, 4, 197, 0.05) 45%, transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}

.hero-beam-wrap {
  position: absolute;
  width: var(--bw);
  margin-left: calc(var(--bw) / -2);
  transform-origin: 50% 0;
}

.hero-beam {
  position: absolute;
  inset: 0;
  transform-origin: 50% 0;
  clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(240, 171, 252, 0.26) 0%, rgba(192, 132, 252, 0.1) 42%, rgba(115, 4, 197, 0.03) 64%, transparent 76%);
  animation: hero-beam-sway 11s ease-in-out infinite alternate;
  will-change: transform;
}

.hero-beam-wrap--c .hero-beam {
  opacity: 0.55;
  animation-duration: 14s;
  animation-delay: -4s;
}

.hero-beam-wrap--r .hero-beam {
  background: linear-gradient(180deg, rgba(129, 140, 248, 0.24) 0%, rgba(115, 4, 197, 0.1) 42%, rgba(26, 75, 222, 0.03) 64%, transparent 76%);
  animation-duration: 12.5s;
  animation-delay: -7s;
  animation-direction: alternate-reverse;
}

@keyframes hero-beam-sway {
  from { transform: rotate(-2.6deg); }
  to   { transform: rotate(2.6deg); }
}

/* Brillo de piso bajo el trofeo */
.hero-floor {
  position: absolute;
  left: var(--cx, 72%);
  top: var(--floor-y, 80%);
  width: var(--floor-w, 60vw);
  height: calc(var(--floor-w, 60vw) * 0.28);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(192, 132, 252, 0.34), rgba(115, 4, 197, 0.12) 55%, transparent);
}

@media (max-width: 767px) {
  .hero-lights {
    --bw: 78vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-beam {
    animation: none;
  }
}