/* Fundido suavizado: 65 paradas con la curva cubic-bezier(.42, 0, .32, 1),
   cantidad 1. Para todo texto que vaya sobre una captura o un vídeo.
   PROCEDENCIA: la técnica es de Jhey Tompkins (web/notas-referencias-opus55-2026-09-25.md,
   apéndice B), y entra porque es la gemela web del fundido de la app: una rampa, nunca
   un corte a escuadra (regla «FUNDIDO de scroll en iOS» del CLAUDE.md, fundidoScrollTema
   en TemaApp.swift). El color por defecto es el centro del FondoNocturno (TemaApp.swift:86).
   Generado con .claude/scripts/web/fundido-suavizado.py: no se edita a mano. */
:root {
  --fundido-paradas:
    rgb(0 0 0 / 0.00000) 0.000%,
    rgb(0 0 0 / 0.00047) 1.562%,
    rgb(0 0 0 / 0.00193) 3.125%,
    rgb(0 0 0 / 0.00445) 4.688%,
    rgb(0 0 0 / 0.00810) 6.250%,
    rgb(0 0 0 / 0.01298) 7.812%,
    rgb(0 0 0 / 0.01916) 9.375%,
    rgb(0 0 0 / 0.02674) 10.938%,
    rgb(0 0 0 / 0.03584) 12.500%,
    rgb(0 0 0 / 0.04655) 14.062%,
    rgb(0 0 0 / 0.05899) 15.625%,
    rgb(0 0 0 / 0.07328) 17.188%,
    rgb(0 0 0 / 0.08952) 18.750%,
    rgb(0 0 0 / 0.10783) 20.312%,
    rgb(0 0 0 / 0.12829) 21.875%,
    rgb(0 0 0 / 0.15096) 23.438%,
    rgb(0 0 0 / 0.17588) 25.000%,
    rgb(0 0 0 / 0.20301) 26.562%,
    rgb(0 0 0 / 0.23226) 28.125%,
    rgb(0 0 0 / 0.26348) 29.688%,
    rgb(0 0 0 / 0.29640) 31.250%,
    rgb(0 0 0 / 0.33070) 32.812%,
    rgb(0 0 0 / 0.36598) 34.375%,
    rgb(0 0 0 / 0.40180) 35.938%,
    rgb(0 0 0 / 0.43774) 37.500%,
    rgb(0 0 0 / 0.47337) 39.062%,
    rgb(0 0 0 / 0.50831) 40.625%,
    rgb(0 0 0 / 0.54226) 42.188%,
    rgb(0 0 0 / 0.57498) 43.750%,
    rgb(0 0 0 / 0.60631) 45.312%,
    rgb(0 0 0 / 0.63614) 46.875%,
    rgb(0 0 0 / 0.66441) 48.438%,
    rgb(0 0 0 / 0.69111) 50.000%,
    rgb(0 0 0 / 0.71625) 51.562%,
    rgb(0 0 0 / 0.73986) 53.125%,
    rgb(0 0 0 / 0.76200) 54.688%,
    rgb(0 0 0 / 0.78272) 56.250%,
    rgb(0 0 0 / 0.80209) 57.812%,
    rgb(0 0 0 / 0.82017) 59.375%,
    rgb(0 0 0 / 0.83702) 60.938%,
    rgb(0 0 0 / 0.85272) 62.500%,
    rgb(0 0 0 / 0.86731) 64.062%,
    rgb(0 0 0 / 0.88087) 65.625%,
    rgb(0 0 0 / 0.89345) 67.188%,
    rgb(0 0 0 / 0.90509) 68.750%,
    rgb(0 0 0 / 0.91585) 70.312%,
    rgb(0 0 0 / 0.92578) 71.875%,
    rgb(0 0 0 / 0.93492) 73.438%,
    rgb(0 0 0 / 0.94331) 75.000%,
    rgb(0 0 0 / 0.95099) 76.562%,
    rgb(0 0 0 / 0.95799) 78.125%,
    rgb(0 0 0 / 0.96434) 79.688%,
    rgb(0 0 0 / 0.97009) 81.250%,
    rgb(0 0 0 / 0.97524) 82.812%,
    rgb(0 0 0 / 0.97984) 84.375%,
    rgb(0 0 0 / 0.98391) 85.938%,
    rgb(0 0 0 / 0.98747) 87.500%,
    rgb(0 0 0 / 0.99054) 89.062%,
    rgb(0 0 0 / 0.99315) 90.625%,
    rgb(0 0 0 / 0.99530) 92.188%,
    rgb(0 0 0 / 0.99704) 93.750%,
    rgb(0 0 0 / 0.99835) 95.312%,
    rgb(0 0 0 / 0.99928) 96.875%,
    rgb(0 0 0 / 0.99982) 98.438%,
    rgb(0 0 0 / 1.00000) 100.000%;
}
.fundido-abajo, .fundido-arriba { position: relative; }
.fundido-abajo::after, .fundido-arriba::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--fundido-alto, 40%);
  background: var(--fundido-color, #0D1226);
  pointer-events: none;
}
.fundido-abajo::after {
  bottom: 0;
  -webkit-mask-image: linear-gradient(to bottom, var(--fundido-paradas));
  mask-image: linear-gradient(to bottom, var(--fundido-paradas));
}
.fundido-arriba::before {
  top: 0;
  -webkit-mask-image: linear-gradient(to top, var(--fundido-paradas));
  mask-image: linear-gradient(to top, var(--fundido-paradas));
}