/* ==========================================================
   Parsea — Estilos de la página
   Solo lo que Tailwind no expresa bien en clases: fondos con
   gradiente, resaltador del titular, acordeón. Todo usa tokens.
   ========================================================== */

/* Encabezado fijo con vidrio esmerilado */
.header-glass {
  background: color-mix(in srgb, var(--bg-surface) 85%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
}

/* Fondo del hero: resplandor aqua arriba + trama de puntos que se desvanece */
.hero {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(56rem 26rem at 50% -6rem, var(--brand-100), transparent 70%),
    var(--bg-page);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(var(--border-strong) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 65%);
  mask-image: linear-gradient(to bottom, #000, transparent 65%);
  pointer-events: none;
}

/* Resaltador aqua detrás de las palabras clave del titular (el texto sigue negro) */
.marker {
  background: linear-gradient(transparent 60%, var(--brand-500) 60%, var(--brand-500) 90%, transparent 90%);
  padding: 0 0.1em;
  margin: 0 -0.1em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Franja oscura de cifras: brillo aqua sutil en una esquina */
.band-dark {
  background:
    radial-gradient(40rem 20rem at 100% 0%, rgb(28 237 205 / 0.12), transparent 70%),
    var(--bg-inverse);
}

/* Acordeón de preguntas: sin triángulo nativo */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }