/* Radio Alguien · entrada «Sintonía»: ruido → señal → alguien, con el sistema de puntos de la marca. */
.al-ra-pre { display: none; }
html.al-radio-entrando { overflow: hidden; }
html.al-radio-entrando .al-ra-pre { display: grid; }
.al-ra-pre[hidden] { display: none !important; }
.al-ra-pre { position: fixed; inset: 0; z-index: 10050; place-items: center; padding: 30px 24px; overflow: hidden;
  background: #0b0710; color: #f4efe9; opacity: 1; transition: opacity .55s ease, visibility .55s ease; }
/* luz de marca: violeta arriba y un borde bermellón abajo, muy tenues */
.al-ra-pre::before { content: ""; position: absolute; inset: -20%; pointer-events: none;
  background: radial-gradient(42% 38% at 50% 40%, rgba(126,23,190,.30), transparent 70%), radial-gradient(36% 26% at 58% 88%, rgba(233,59,36,.12), transparent 70%);
  opacity: .7; transition: opacity 1.2s ease; }
.al-ra-pre[data-fase="alguien"]::before { opacity: 1; }
.al-ra-pre.al-ra-pre-sale { opacity: 0; visibility: hidden; pointer-events: none; }
.al-ra-pre-centro { position: relative; width: min(100%, 560px); text-align: center; transition: transform .55s ease; }
.al-ra-pre-sale .al-ra-pre-centro { transform: translateY(-10px); }

.al-ra-pre-k { display: inline-flex; align-items: center; gap: 10px; font: 500 .62rem/1.6 var(--texto-f, Arial, sans-serif); letter-spacing: .26em; text-transform: uppercase; color: #cfa8ef; }
.al-ra-pre-k::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #E93B24; box-shadow: 0 0 0 4px rgba(233,59,36,.18); }

.al-ra-pre-escena { position: relative; width: min(100%, 440px); margin: 22px auto 18px; }
.al-ra-pre-lienzo { display: block; width: 100%; height: clamp(200px, 33vh, 290px); -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 80%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 80%, transparent 100%); }
.al-ra-pre-aire { position: relative; transform: translateY(6px); display: inline-flex; align-items: center; gap: 9px; margin: 8px 0 0; padding: 6px 13px 6px 11px;
  border: 1px solid rgba(207,168,239,.28); border-radius: 99px; background: rgba(11,7,16,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font: 500 .6rem/1 var(--texto-f, Arial, sans-serif); letter-spacing: .2em; text-transform: uppercase; color: rgba(244,239,233,.7); white-space: nowrap;
  opacity: 0; transition: opacity .6s ease .35s, transform .6s ease .35s; }
.al-ra-pre-aire i { width: 6px; height: 6px; border-radius: 50%; background: #E93B24; animation: al-ra-aire 1.1s ease-in-out infinite alternate; }
.al-ra-pre-aire b { font: italic 400 .98rem/1 var(--serif, Georgia, serif); letter-spacing: 0; text-transform: none; color: #f4efe9; }
.al-ra-pre-listo .al-ra-pre-aire { opacity: 1; transform: none; }

.al-ra-pre h2 { color: #f4efe9; font: 500 clamp(2.5rem, 6.4vw, 4rem)/1 var(--display, Arial, sans-serif); letter-spacing: -.055em; margin: 18px 0 12px; }
.al-ra-pre h2 em { font-family: var(--serif, Georgia, serif); font-weight: 400; letter-spacing: -.02em; background: linear-gradient(100deg, #cfa8ef 10%, #b46be6 55%, #f0503a 110%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.al-ra-pre-lema { font: italic 400 1.05rem/1.5 var(--serif, Georgia, serif); color: rgba(244,239,233,.74); margin: 0 0 20px; }
.al-ra-pre-estado { color: rgba(244,239,233,.55); font: 500 .62rem/1.5 var(--texto-f, Arial, sans-serif); letter-spacing: .2em; text-transform: uppercase; min-height: 1.5em; margin: 0; transition: color .5s ease; }
.al-ra-pre-listo .al-ra-pre-estado { color: #cfa8ef; }

.al-ra-pre-saltar { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; padding: 7px 7px 7px 20px; border: 1px solid rgba(244,239,233,.22); border-radius: 99px; background: transparent; color: #f4efe9;
  font: 500 .62rem/1 var(--texto-f, Arial, sans-serif); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: background .3s ease, border-color .3s ease, color .3s ease; }
.al-ra-pre-saltar svg { width: 28px; height: 28px; padding: 7px; border-radius: 50%; background: #7E17BE; color: #fff; box-sizing: border-box; transition: transform .3s ease; }
.al-ra-pre-saltar:hover { background: #f4efe9; border-color: #f4efe9; color: #0b0710; }
.al-ra-pre-saltar:hover svg { transform: translateX(3px); }
.al-ra-pre-saltar:focus-visible { outline: 2px solid #cfa8ef; outline-offset: 4px; }

@keyframes al-ra-aire { from { opacity: .45; } to { opacity: 1; } }
@media (max-height: 650px) { .al-ra-pre-lienzo { height: 150px; } .al-ra-pre-escena { margin: 12px auto 10px; } .al-ra-pre h2 { margin-top: 14px; } .al-ra-pre-lema { margin-bottom: 12px; } .al-ra-pre-saltar { margin-top: 12px; } }
@media (max-width: 420px) { .al-ra-pre-lema { font-size: .98rem; } }
/* con «reducir movimiento» la entrada sigue: el lienzo se mueve más lento y solo se quitan los desplazamientos */
@media (prefers-reduced-motion: reduce) { .al-ra-pre-centro, .al-ra-pre-aire { transition-property: opacity; } .al-ra-pre-sale .al-ra-pre-centro { transform: none; } }