/* El «30» del aniversario: estático con degradado y brillo; con JavaScript y movimiento permitido, cielo vivo en <canvas> (treinta.js). */
.treinta { position: relative; width: 100%; max-width: 560px; aspect-ratio: 520 / 300; justify-self: center; isolation: isolate; }
.treinta::before { content: ""; position: absolute; inset: -18%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 38% 46% at 66% 50%, rgba(255, 140, 66, .16), transparent 70%), radial-gradient(ellipse 34% 44% at 32% 50%, rgba(95, 227, 245, .12), transparent 70%); filter: blur(10px); }
.treinta .aniversario-seccion__treinta { display: block; width: 100%; max-width: none; height: 100%; transition: opacity .8s ease; }
.treinta .aniversario-seccion__treinta text,
.preparada .treinta .aniversario-seccion__treinta text { font: 800 250px var(--display); letter-spacing: -.04em; fill: url(#treinta-degradado); stroke: none; stroke-dashoffset: 0;
  filter: drop-shadow(0 0 18px rgba(255, 184, 119, .35)) drop-shadow(0 0 42px rgba(95, 227, 245, .18)); }
.treinta__lienzo { position: absolute; inset: -22% -14%; width: 128%; height: 144%; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
.treinta--vivo { cursor: pointer; }
.treinta--vivo .aniversario-seccion__treinta { opacity: 0; }
.treinta--vivo .treinta__lienzo { opacity: 1; }
@media (max-width: 899px) { .treinta { max-width: 360px; } }