/* ========================================================================== CX 36 Radio Centenario — header, footer y reproductor Plugin radio36. Todas las reglas viven dentro de #r36-header / #r36-footer (prefijo r36- en clases y variables) para no tocar el tema y que el tema no nos toque. El diseño es «El bloque de la 36» (v0.9.17, elegido por el dueño el 2026-10-11 en ~/Desktop/radio36-logo-style.html): el cuadrado rojo del logo es la unidad estructural — bloques rojos de esquinas rectas, tipografía condensada (Barlow Condensed) en versalitas y filetes de 1px. ========================================================================== */ #r36-header, #r36-footer, #r36-popup, #r36-portada, #r36-seccion, #r36-nota-pie, #r36-seguir, #r36-compartir, #r36-grilla, #r36-contacto, #r36-colabora, #r36-programas, #r36-secciones, #r36-ct, #r36-pg, #r36-bu { --r36-ink: #111214; --r36-gris: #5c6067; --r36-filete: #e3e4e6; --r36-papel: #fff; --r36-papel2: #f6f6f4; --r36-red: #b42120; --r36-red-d: #8f1a19; --r36-red-wash: #fdf5f4; /* el verde del logo (muestreado del CABEZAL): lo usa la banda COLABORÁ del celular. El oscuro es el hover. */ --r36-verde: #3f6f3a; --r36-verde-d: #335c30; --r36-cond: "Barlow Condensed", "Arial Narrow", sans-serif; --r36-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --r36-mono: ui-monospace, Menlo, monospace; color: var(--r36-ink); font-family: var(--r36-sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-align: left; } #r36-header *, #r36-footer *, #r36-portada *, #r36-seccion *, #r36-nota-pie *, #r36-seguir *, #r36-compartir *, #r36-grilla *, #r36-contacto *, #r36-colabora *, #r36-programas *, #r36-secciones *, #r36-ct *, #r36-pg *, #r36-bu * { box-sizing: border-box; } #r36-header img, #r36-footer img { display: block; max-width: 100%; height: auto; } #r36-header a, #r36-footer a, #r36-grilla a, #r36-contacto a, #r36-colabora a, #r36-programas a, #r36-secciones a, #r36-ct a, #r36-pg a, #r36-bu a { color: inherit; text-decoration: none; } #r36-header button, #r36-footer button, #r36-grilla button, #r36-contacto button, #r36-colabora button, #r36-programas button, #r36-secciones button, #r36-ct button, #r36-pg button, #r36-bu button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-appearance: none; appearance: none; text-align: left; } #r36-header ul, #r36-footer ul, #r36-grilla ul, #r36-contacto ul, #r36-colabora ul, #r36-programas ul, #r36-secciones ul { margin: 0; padding: 0; list-style: none; } #r36-header p, #r36-footer p, #r36-grilla p, #r36-contacto p, #r36-colabora p, #r36-programas p, #r36-secciones p, #r36-ct p, #r36-pg p, #r36-bu p { margin: 0; } #r36-header h1, #r36-header h2, #r36-header h3, #r36-footer h1, #r36-footer h2, #r36-footer h3, #r36-grilla h1, #r36-contacto h1, #r36-colabora h1, #r36-programas h1, #r36-secciones h1, #r36-grilla h2, #r36-contacto h2, #r36-colabora h2, #r36-programas h2, #r36-secciones h2, #r36-grilla h3, #r36-contacto h3, #r36-colabora h3, #r36-programas h3, #r36-secciones h3, #r36-ct h1, #r36-ct h2, #r36-ct h3, #r36-pg h1, #r36-pg h2, #r36-pg h3, #r36-bu h1, #r36-bu h2, #r36-bu h3 { margin: 0; font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 700; } #r36-header .r36-wrap, #r36-footer .r36-wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; } #r36-header .r36-ic, #r36-footer .r36-ic { width: 17px; height: 17px; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } #r36-header .r36-fill, #r36-footer .r36-fill { fill: currentColor; stroke: none; } #r36-header .r36-audio, #r36-footer .r36-audio { display: none; } /* ---------- el bloque: la unidad estructural ---------- */ /* En las páginas del plugin ya no se usa para el rótulo del título (decía lo mismo que el h1); queda para la chapa de «Al aire» y la tira del encabezado. */ #r36-header .r36-bk, #r36-footer .r36-bk, #r36-grilla .r36-bk, #r36-pg .r36-bk { display: inline-block; background: var(--r36-red, #b42120); color: #fff; font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 600; font-size: 13px; line-height: 1; letter-spacing: .16em; text-transform: uppercase; padding: 8px 10px 7px; white-space: nowrap; } /* ---------- punto que late ---------- */ /* Ojo: adentro de un @keyframes los selectores son 0%/70%/100%, sin ids. Con los ids delante el bloque entero era inválido y el navegador lo descartaba: por eso el punto «en vivo» nunca latió en producción. */ @keyframes r36-pulse { 0% { transform: scale(.55); opacity: .85; } 70% { transform: scale(1.35); opacity: 0; } 100% { transform: scale(1.35); opacity: 0; } } #r36-header .r36-dot, #r36-footer .r36-dot, #r36-grilla .r36-dot, #r36-contacto .r36-dot, #r36-colabora .r36-dot, #r36-programas .r36-dot, #r36-secciones .r36-dot, #r36-pg .r36-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--r36-red, #b42120); position: relative; flex: none; } #r36-header .r36-dot::after, #r36-footer .r36-dot::after, #r36-grilla .r36-dot::after, #r36-contacto .r36-dot::after, #r36-colabora .r36-dot::after, #r36-programas .r36-dot::after, #r36-secciones .r36-dot::after, #r36-pg .r36-dot::after { content: ""; position: absolute; inset: -4px; border: 1px solid var(--r36-red, #b42120); border-radius: 50%; opacity: 0; animation: r36-pulse 2.6s ease-out infinite; } /* sobre superficies rojas el punto y su aro van en blanco */ #r36-header .r36-sig--audio .r36-dot, #r36-footer .r36-sig--audio .r36-dot { background: #fff; } #r36-header .r36-sig--audio .r36-dot::after, #r36-footer .r36-sig--audio .r36-dot::after { border-color: #fff; } @media (prefers-reduced-motion: reduce) { #r36-header .r36-dot::after, #r36-footer .r36-dot::after, #r36-grilla .r36-dot::after, #r36-contacto .r36-dot::after, #r36-colabora .r36-dot::after, #r36-programas .r36-dot::after, #r36-secciones .r36-dot::after, #r36-pg .r36-dot::after { animation: none; } } /* ---------- ecualizador (5 barras, suena cuando está al aire el audio) ---------- */ @keyframes r36-eq { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1); } } #r36-header .r36-eq, #r36-footer .r36-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; } #r36-header .r36-eq i, #r36-footer .r36-eq i { display: block; width: 3px; background: currentColor; height: 5px; } #r36-header .r36-eq i:nth-child(2), #r36-footer .r36-eq i:nth-child(2) { height: 10px; } #r36-header .r36-eq i:nth-child(3), #r36-footer .r36-eq i:nth-child(3) { height: 6px; } #r36-header .r36-eq i:nth-child(4), #r36-footer .r36-eq i:nth-child(4) { height: 11px; } #r36-header .r36-eq i:nth-child(5), #r36-footer .r36-eq i:nth-child(5) { height: 4px; } html.r36-sonando #r36-header .r36-eq i, html.r36-sonando #r36-footer .r36-eq i { animation: r36-eq 1s ease-in-out infinite; } html.r36-sonando #r36-header .r36-eq i:nth-child(2), html.r36-sonando #r36-footer .r36-eq i:nth-child(2) { animation-delay: .15s; } html.r36-sonando #r36-header .r36-eq i:nth-child(3), html.r36-sonando #r36-footer .r36-eq i:nth-child(3) { animation-delay: .3s; } html.r36-sonando #r36-header .r36-eq i:nth-child(4), html.r36-sonando #r36-footer .r36-eq i:nth-child(4) { animation-delay: .45s; } html.r36-sonando #r36-header .r36-eq i:nth-child(5), html.r36-sonando #r36-footer .r36-eq i:nth-child(5) { animation-delay: .6s; } /* con movimiento reducido las barras quedan quietas (auditoría D6): es la única animación del plugin que no tenía corte. Va acá, después de las reglas que la encienden: igual especificidad, gana el orden. */ @media (prefers-reduced-motion: reduce) { html.r36-sonando #r36-header .r36-eq i, html.r36-sonando #r36-footer .r36-eq i { animation: none; } } /* en pausa el ecualizador no se muestra */ #r36-header .r36-eq, #r36-footer .r36-eq { visibility: hidden; } html.r36-sonando #r36-header .r36-eq, html.r36-sonando #r36-footer .r36-eq { visibility: visible; } /* ---------- play / pausa ---------- */ #r36-header .r36-ic-pause, #r36-footer .r36-ic-pause { display: none; } html.r36-sonando #r36-header .r36-ic-play, html.r36-sonando #r36-footer .r36-ic-play { display: none; } html.r36-sonando #r36-header .r36-ic-pause, html.r36-sonando #r36-footer .r36-ic-pause { display: block; } /* ========================================================================== PANTALLA DE CARGA Vive fuera de #r36-header (la imprime el encabezado antes de abrirlo), así que cada var() lleva su respaldo: las variables del plugin están definidas en los contenedores, no en el body. ========================================================================== */ #r36-carga { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: var(--r36-papel, #fff); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .3s; } body.r36-cargando #r36-carga { opacity: 1; visibility: visible; transition: opacity .2s ease, visibility 0s; } body.r36-listo #r36-carga { opacity: 0; visibility: hidden; } /* red de seguridad sin JS: a los 9 s se va sola (antes 4 s: el control de «el CSS llegó» del JS necesita ese margen para reintentar y, si hace falta, recargar) */ @keyframes r36-se-va { to { opacity: 0; visibility: hidden; } } body.r36-cargando #r36-carga { animation: r36-se-va 0s linear 9s forwards; } #r36-carga .r36-carga-in { display: grid; justify-items: center; gap: 22px; padding: 24px; } /* el logo, arriba: aparece cuando la aguja se detiene */ #r36-carga .r36-carga-marca { height: 52px; display: grid; place-items: center; opacity: 0; transform: translateY(5px); } #r36-carga .r36-carga-marca img { height: 52px; width: auto; display: block; } #r36-carga .r36-carga-word { font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: .01em; text-transform: uppercase; color: var(--r36-ink, #111214); } #r36-carga .r36-carga-word b { color: var(--r36-red, #b42120); } /* ---- la sintonía, abajo: la escala de AM con la aguja ---- */ #r36-carga .r36-carga-sinto { display: grid; justify-items: center; gap: 10px; } #r36-carga .r36-carga-banda { font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 700; font-size: 12px; line-height: 1; letter-spacing: .24em; text-transform: uppercase; color: var(--r36-gris, #5c6067); } #r36-carga .r36-carga-escala { position: relative; width: min(264px, 72vw); height: 46px; overflow: hidden; background: linear-gradient(180deg, #fff, #fbfbfa); border-top: 1px solid var(--r36-filete, #e3e4e6); border-bottom: 1px solid var(--r36-filete, #e3e4e6); } #r36-carga .r36-carga-marcas { position: absolute; inset: 0 0 auto 0; height: 12px; background: repeating-linear-gradient(90deg, rgba(17, 18, 20, .42) 0 1px, transparent 1px 8px); } #r36-carga .r36-carga-marcas-largas { position: absolute; inset: 0 0 auto 0; height: 18px; background: repeating-linear-gradient(90deg, rgba(17, 18, 20, .75) 0 1px, transparent 1px 48px); } #r36-carga .r36-carga-nros { position: absolute; inset: 20px 0 0 0; display: flex; justify-content: space-between; padding: 0 6px; } #r36-carga .r36-carga-nros span { font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 600; font-size: 12.5px; line-height: 1; letter-spacing: .1em; color: var(--r36-gris, #5c6067); } /* el 1250 se enciende cuando la aguja se detiene */ #r36-carga .r36-carga-nros span.r36-carga-fija { color: var(--r36-red, #b42120); font-weight: 700; opacity: 0; } #r36-carga .r36-carga-aguja { position: absolute; top: 0; bottom: 0; left: 3%; width: 2px; background: var(--r36-red, #b42120); } #r36-carga .r36-carga-aguja::after { content: ""; position: absolute; bottom: -1px; left: -4px; width: 10px; height: 10px; background: var(--r36-red, #b42120); transform: rotate(45deg); } body.r36-cargando #r36-carga .r36-carga-aguja { animation: r36-carga-sintoniza 1.3s cubic-bezier(.35, .05, .3, 1) forwards; } body.r36-cargando #r36-carga .r36-carga-nros span.r36-carga-fija { animation: r36-carga-fija .3s ease-out 1.15s forwards; } body.r36-cargando #r36-carga .r36-carga-marca { animation: r36-carga-llega .5s ease-out 1.3s forwards; } @keyframes r36-carga-sintoniza { 0% { left: 3%; } 52% { left: 80%; } /* barre hasta el fondo… */ 66% { left: 56%; } /* …vuelve */ 78% { left: 67%; } /* …y corrige */ 90% { left: 61%; } 100% { left: 63.5%; } /* queda en 1250 */ } @keyframes r36-carga-fija { to { opacity: 1; } } @keyframes r36-carga-llega { to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { body.r36-cargando #r36-carga .r36-carga-aguja, body.r36-cargando #r36-carga .r36-carga-nros span.r36-carga-fija, body.r36-cargando #r36-carga .r36-carga-marca { animation: none; } #r36-carga .r36-carga-aguja { left: 63.5%; } #r36-carga .r36-carga-nros span.r36-carga-fija { opacity: 1; } #r36-carga .r36-carga-marca { opacity: 1; transform: none; } } /* ========================================================================== «SEGUIR ESCUCHANDO» Barra que aparece sólo si el navegador bloqueó reanudar la radio al cambiar de página (el tema recarga entero en cada clic y el audio no puede arrancar sin un toque). Vive fuera de los contenedores del plugin —como la pantalla de carga—, así que cada color va literal: las variables no llegan hasta acá. ========================================================================== */ /* «La señal no responde»: hermana de «seguir escuchando», con el mismo cuerpo oscuro y un filete rojo arriba. Aparece cuando el audio no llega a sonar y da una salida (el YouTube en vivo). La enciende el JS: body.r36-sin-senal. */ #r36-aviso { display: none; } body.r36-sin-senal #r36-aviso { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: #111214; color: #fff; font: 500 13px/1.35 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; box-shadow: 0 -6px 18px rgba(17, 18, 20, .18); border-top: 3px solid #b42120; } /* si están las dos, manda el aviso: la de «seguir» ya no tiene sentido */ body.r36-sin-senal #r36-continuar { display: none !important; } #r36-aviso .r36-aviso-txt { flex: 1 1 auto; min-width: 0; } #r36-aviso .r36-aviso-web { display: inline-flex; align-items: center; flex: none; background: none; color: #fff; text-decoration: none; border: 1px solid rgba(255, 255, 255, .45); padding: 10px 12px; font: 700 13px/1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .1em; text-transform: uppercase; } #r36-aviso .r36-aviso-web:hover { background: rgba(255, 255, 255, .12); } #r36-aviso .r36-aviso-x { flex: none; background: none; border: 0; color: #fff; cursor: pointer; font: 400 17px/1 Inter, sans-serif; padding: 8px 10px; } #r36-aviso .r36-aviso-x:hover { color: #f0a7a6; } #r36-continuar { display: none; } body.r36-pide-seguir #r36-continuar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: #111214; color: #fff; font: 500 13px/1.35 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; box-shadow: 0 -6px 18px rgba(17, 18, 20, .18); } #r36-continuar .r36-seguir-txt { flex: 1 1 auto; min-width: 0; } #r36-continuar .r36-seguir-btn { flex: none; background: #b42120; color: #fff; border: 0; cursor: pointer; font: 700 13px/1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .12em; text-transform: uppercase; padding: 11px 13px; } #r36-continuar .r36-seguir-btn:hover { background: #8f1a19; } /* la salida definitiva: la ventana que no se corta nunca */ #r36-continuar .r36-seguir-web { display: inline-flex; align-items: center; text-decoration: none; flex: none; background: none; border: 1px solid rgba(255, 255, 255, .45); color: #fff; cursor: pointer; font: 600 11px/1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .12em; text-transform: uppercase; padding: 10px 11px; white-space: nowrap; } #r36-continuar .r36-seguir-web:hover { background: rgba(255, 255, 255, .14); } #r36-continuar .r36-seguir-x { flex: none; background: none; border: 0; color: rgba(255, 255, 255, .6); font-size: 14px; padding: 6px 8px; cursor: pointer; } /* ========================================================================== BARRA DE PROGRESO DE LA NAVEGACIÓN SIN RECARGA (ver el ajuste «Navegación sin recarga»; vive fuera de los contenedores) ========================================================================== */ #r36-nav-barra { display: none; } body.r36-navegando #r36-nav-barra { display: block; position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 9998; background: #b42120; transform-origin: 0 50%; animation: r36-nav-avanza 1.1s ease-out infinite; } @keyframes r36-nav-avanza { 0% { transform: scaleX(.04); } 60% { transform: scaleX(.72); } 100% { transform: scaleX(.96); } } /* ========================================================================== ENCABEZADO ========================================================================== */ #r36-header { background: var(--r36-papel, #fff); position: relative; z-index: 20; } /* * Aire entre el encabezado y el contenido del tema. En la portada, la tira caía * pegada a la foto grande de la primera noticia y el pasaje se sentía brusco * (reportado el 2026-10-11). En las páginas que dibuja el plugin no hace falta: * el contenido ya trae su propio aire (#r36-main). */ body:not(.r36-doc-body) #r36-header { padding-bottom: 18px; } /* * La barra del celular (.r36-mb, ver r36_movil()): se dibuja siempre y sólo se * muestra en celular. En escritorio queda display:none —así que tampoco entra en * el orden de foco— y el encabezado es exactamente el de antes. Los estilos * están todos en el bloque de celular, más abajo. */ #r36-header .r36-mb { display: none; } /* * El botón «Volver arriba» (ver r36_header()): sale oculto y el JS lo enciende * con .r36-arriba--ver cuando el visitante bajó. Sin JS no se ve nunca —no * serviría—, así que la regla base es display:none y todo el aspecto vive en el * bloque de celular, más abajo: en escritorio no hay botón flotante. */ #r36-arriba { display: none; } /* nivel 1 · marca: logo, bloque del dial y el par de señales */ #r36-header .r36-hd-top, #r36-footer .r36-hd-top { border-bottom: 1px solid var(--r36-filete, #e3e4e6); } #r36-header .r36-hd-top-in, #r36-footer .r36-hd-top-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 14px; } /* La frecuencia al lado del logo: sólo en la vista web (pedido del cliente, 2026-10-17). Es una marca: el nombre accesible del logo no la incluye. */ #r36-header .r36-frec { font: 700 15px/1 var(--r36-cond, sans-serif); letter-spacing: .06em; color: var(--r36-ink, #111214); padding-left: 14px; border-left: 1px solid var(--r36-filete, #e3e4e6); white-space: nowrap; } #r36-header .r36-brand, #r36-footer .r36-brand { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 0 0 auto; } #r36-header .r36-brand-logo, #r36-footer .r36-brand-logo { height: 46px; width: auto; flex: none; min-width: 0; } #r36-header .r36-brand-word, #r36-footer .r36-brand-word { font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: .01em; text-transform: uppercase; color: var(--r36-ink, #111214); white-space: nowrap; } #r36-header .r36-brand-word--sm, #r36-footer .r36-brand-word--sm { font-size: 21px; } #r36-header .r36-brand-word b, #r36-footer .r36-brand-word b { color: var(--r36-red, #b42120); font-weight: 800; } /* el par de señales: bloque rojo (audio) + bloque con filete (YouTube) */ #r36-header .r36-sigpair, #r36-footer .r36-sigpair { display: flex; align-items: stretch; gap: 10px; flex: none; } #r36-header .r36-sig, #r36-footer .r36-sig { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 6px 14px; text-align: left; } #r36-header .r36-sig--audio, #r36-footer .r36-sig--audio { background: var(--r36-red, #b42120); color: #fff; } #r36-header .r36-sig--audio:hover, #r36-footer .r36-sig--audio:hover { background: var(--r36-red-d, #8f1a19); } #r36-header .r36-sig--video, #r36-footer .r36-sig--video { border: 1px solid var(--r36-ink, #111214); background: var(--r36-papel, #fff); color: var(--r36-ink, #111214); } #r36-header .r36-sig--video:hover, #r36-footer .r36-sig--video:hover { background: var(--r36-papel2, #f6f6f4); } #r36-header .r36-sigchip, #r36-footer .r36-sigchip { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; flex: none; } #r36-header .r36-siglab, #r36-footer .r36-siglab { display: inline-flex; align-items: center; gap: 7px; font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 700; font-size: 16px; line-height: 1; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; } #r36-header .r36-sigsub, #r36-footer .r36-sigsub { display: block; font-size: 11px; font-weight: 500; line-height: 1.2; margin-top: 2px; opacity: .85; white-space: nowrap; } /* nivel 2 · navegación — sin filete abajo: la tira se separa por TONO */ #r36-header .r36-hd-nav, #r36-footer .r36-hd-nav { border-bottom: 0; } #r36-header .r36-hd-nav-in, #r36-footer .r36-hd-nav-in { display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: space-between; gap: 12px; } #r36-header .r36-nav, #r36-footer .r36-nav { min-width: 0; flex: 1 1 auto; } #r36-header .r36-mainnav, #r36-footer .r36-mainnav { display: flex; align-items: stretch; flex-wrap: nowrap; width: 100%; } #r36-header .r36-mainnav li, #r36-footer .r36-mainnav li { margin: 0; display: flex; } #r36-header .r36-mainnav a, #r36-footer .r36-mainnav a { display: inline-flex; align-items: center; font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 600; font-size: 15px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: var(--r36-ink, #111214); padding: 13px 11px; white-space: nowrap; } #r36-header .r36-mainnav a:hover, #r36-footer .r36-mainnav a:hover { background: var(--r36-papel2, #f6f6f4); } /* el ítem de la página actual lleva el cuadrado rojo adelante */ #r36-header .r36-mainnav li.current-menu-item > a, #r36-header .r36-mainnav li.current_page_item > a, #r36-header .r36-mainnav li.current-menu-ancestor > a, #r36-footer .r36-mainnav li.current-menu-item > a, #r36-footer .r36-mainnav li.current_page_item > a, #r36-footer .r36-mainnav li.current-menu-ancestor > a { font-weight: 700; } #r36-header .r36-mainnav li.current-menu-item > a::before, #r36-header .r36-mainnav li.current_page_item > a::before, #r36-header .r36-mainnav li.current-menu-ancestor > a::before, #r36-footer .r36-mainnav li.current-menu-item > a::before, #r36-footer .r36-mainnav li.current_page_item > a::before, #r36-footer .r36-mainnav li.current-menu-ancestor > a::before { content: ""; width: 9px; height: 9px; background: var(--r36-red, #b42120); margin-right: 8px; flex: none; } /* Colaborá (el último ítem del menú) cierra la fila */ #r36-header .r36-mainnav > li:last-child, #r36-footer .r36-mainnav > li:last-child { margin-left: auto; } #r36-header .r36-mainnav > li:last-child > a, #r36-footer .r36-mainnav > li:last-child > a { background: var(--r36-red, #b42120); color: #fff; padding-left: 16px; padding-right: 16px; font-weight: 700; } #r36-header .r36-mainnav > li:last-child > a:hover, #r36-footer .r36-mainnav > li:last-child > a:hover { background: var(--r36-red-d, #8f1a19); } #r36-header .r36-mainnav a.cta, #r36-footer .r36-mainnav a.cta { color: #fff; } /* desplegables: panel liviano, fondo papel y filete de 1px */ #r36-header .r36-mainnav li { position: relative; } #r36-header .r36-mainnav .menu-item-has-children > a::after, #r36-header .r36-mainnav .page_item_has_children > a::after { content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-1px) rotate(45deg); margin-left: 7px; opacity: .65; flex: none; } #r36-header .r36-mainnav .sub-menu { position: absolute; top: 100%; left: 0; z-index: 30; display: none; min-width: 232px; margin: 0; padding: 7px 0; background: var(--r36-papel, #fff); border: 1px solid var(--r36-filete, #e3e4e6); } #r36-header .r36-mainnav li:hover > .sub-menu, #r36-header .r36-mainnav li:focus-within > .sub-menu { display: block; } #r36-header .r36-mainnav .sub-menu li { display: block; } #r36-header .r36-mainnav .sub-menu a { display: block; padding: 9px 18px; font-family: var(--r36-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--r36-ink, #111214); } #r36-header .r36-mainnav .sub-menu a:hover { color: var(--r36-red, #b42120); background: var(--r36-papel2, #f6f6f4); } #r36-header .r36-mainnav .sub-menu .sub-menu { top: -8px; left: 100%; } #r36-header .r36-navtools, #r36-footer .r36-navtools { display: flex; align-items: center; gap: 18px; flex: none; } #r36-header .r36-navtools a, #r36-footer .r36-navtools a, #r36-header .r36-navtools button, #r36-footer .r36-navtools button { display: inline-flex; color: var(--r36-gris, #5c6067); transition: color .15s; } #r36-header .r36-navtools a:hover, #r36-footer .r36-navtools a:hover, #r36-header .r36-navtools button:hover, #r36-footer .r36-navtools button:hover { color: var(--r36-red, #b42120); } #r36-header .r36-navtools .r36-vr, #r36-footer .r36-navtools .r36-vr { width: 1px; height: 20px; background: var(--r36-filete, #e3e4e6); } /* ---------- la etiqueta de las herramientas (hover y foco de teclado) ---------- */ #r36-header .r36-tip { position: relative; } #r36-header .r36-tip-txt { display: none; } #r36-header .r36-tip::after { content: attr(data-r36-tip); position: absolute; top: calc(100% + 10px); right: 0; z-index: 40; background: var(--r36-ink, #111214); color: #fff; font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 600; font-size: 12px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; padding: 7px 9px; white-space: nowrap; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .15s ease, transform .15s ease; } #r36-header .r36-tip:hover::after, #r36-header .r36-tip:focus-visible::after { opacity: 1; transform: none; } /* nivel 3 · la tira «Al aire»: banda de fondo lavado (se separa del menú por tono, no por una línea — el dueño marcó la barrita como poco estética, 2026-10-11) con el bloque rojo AL AIRE + el punto que late + el programa */ #r36-header .r36-ribbon, #r36-footer .r36-ribbon { background: var(--r36-papel2, #f6f6f4); } #r36-header .r36-ribbon-in, #r36-footer .r36-ribbon-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 22px; padding-top: 9px; padding-bottom: 9px; } #r36-header .r36-ribbon-left, #r36-footer .r36-ribbon-left { display: inline-flex; align-items: center; gap: 10px; min-width: 0; } #r36-header .r36-prog, #r36-footer .r36-prog { font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-style: normal; font-weight: 700; font-size: 17px; line-height: 1.1; letter-spacing: .05em; text-transform: uppercase; color: var(--r36-ink, #111214); } #r36-header .r36-ribbon-right, #r36-footer .r36-ribbon-right { font-size: 12.5px; font-weight: 500; color: var(--r36-gris, #5c6067); white-space: nowrap; } /* cuando no hay programa al aire: «A continuación · · 13:00» */ #r36-header .r36-ribbon-hora, #r36-footer .r36-ribbon-hora { font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 600; font-size: 15px; line-height: 1; letter-spacing: .06em; color: var(--r36-gris, #5c6067); white-space: nowrap; } /* el reproductor de la tira: en escritorio vive en las herramientas, no acá */ #r36-header .r36-ribbon-player { display: none; } /* ========================================================================== PIE ========================================================================== */ #r36-footer { background: var(--r36-papel, #fff); border-top: 1px solid var(--r36-filete, #e3e4e6); position: relative; z-index: 20; } #r36-header .r36-ft-top, #r36-footer .r36-ft-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 26px; padding-bottom: 26px; border-bottom: 1px solid var(--r36-filete, #e3e4e6); flex-wrap: wrap; } #r36-header .r36-ft-brand, #r36-footer .r36-ft-brand { display: flex; align-items: center; gap: 14px; min-width: 0; } #r36-header .r36-ft-brand img, #r36-footer .r36-ft-brand img { height: 38px; width: auto; flex: none; } #r36-header .r36-ft-brand .r36-vr, #r36-footer .r36-ft-brand .r36-vr { width: 1px; height: 34px; background: var(--r36-filete, #e3e4e6); flex: none; } #r36-header .r36-meta, #r36-footer .r36-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; } #r36-header .r36-kick, #r36-footer .r36-kick { font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 700; font-size: 14px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; color: var(--r36-ink, #111214); } #r36-header .r36-tag, #r36-footer .r36-tag { font-size: 12px; font-weight: 500; color: var(--r36-gris, #5c6067); } #r36-header .r36-sigpair--sm .r36-sig, #r36-footer .r36-sigpair--sm .r36-sig { min-height: 44px; padding: 4px 12px; } #r36-header .r36-sigpair--sm .r36-siglab, #r36-footer .r36-sigpair--sm .r36-siglab { font-size: 14px; } #r36-header .r36-sigpair--sm .r36-sigchip, #r36-footer .r36-sigpair--sm .r36-sigchip { width: 20px; height: 20px; } #r36-header .r36-ft-grid, #r36-footer .r36-ft-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; padding-top: 30px; padding-bottom: 36px; } /* los títulos de columna son bloques rojos */ #r36-header .r36-fc h2, #r36-footer .r36-fc h2, #r36-header .r36-fc h3, #r36-footer .r36-fc h3 { display: inline-block; background: var(--r36-red, #b42120); color: #fff; font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 600; font-size: 13px; line-height: 1; letter-spacing: .16em; text-transform: uppercase; padding: 8px 10px 7px; margin: 0 0 14px; white-space: nowrap; } #r36-header .r36-ftnav, #r36-footer .r36-ftnav { display: block; } #r36-header .r36-fc li, #r36-footer .r36-fc li { margin-bottom: 9px; } #r36-header .r36-fc a, #r36-footer .r36-fc a { font-size: 14.5px; color: var(--r36-ink, #111214); transition: .15s; } #r36-header .r36-fc a:hover, #r36-footer .r36-fc a:hover { color: var(--r36-red, #b42120); text-decoration: underline; text-underline-offset: 3px; } #r36-footer .r36-ftnav > li:last-child > a { color: var(--r36-verde, #3f6f3a); font-weight: 600; } #r36-header .r36-plain, #r36-footer .r36-plain { font-size: 14.5px; color: var(--r36-gris, #5c6067); line-height: 1.55; } #r36-header .r36-about, #r36-footer .r36-about { font-size: 14px; line-height: 1.6; color: var(--r36-gris, #5c6067); margin-bottom: 12px; max-width: 30ch; } #r36-header .r36-socials, #r36-footer .r36-socials { display: flex; align-items: center; gap: 18px; } #r36-header .r36-socials a, #r36-footer .r36-socials a { display: inline-flex; color: var(--r36-ink, #111214); transition: .15s; } #r36-header .r36-socials a:hover, #r36-footer .r36-socials a:hover { color: var(--r36-red, #b42120); } #r36-header .r36-ft-note, #r36-footer .r36-ft-note { font-size: 11px; color: var(--r36-gris, #5c6067); line-height: 1.6; padding: 15px 0 18px; border-top: 1px solid var(--r36-filete, #e3e4e6); } #r36-header .r36-ft-legal, #r36-footer .r36-ft-legal { border-top: 1px solid var(--r36-filete, #e3e4e6); } #r36-header .r36-ft-legal-in, #r36-footer .r36-ft-legal-in { display: flex; align-items: center; justify-content: center; gap: 10px 22px; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; } #r36-header .r36-cp, #r36-footer .r36-cp { font-size: 12.5px; font-weight: 500; color: var(--r36-gris, #5c6067); } #r36-header .r36-links, #r36-footer .r36-links { display: flex; gap: 20px; font-size: 12.5px; color: var(--r36-gris, #5c6067); } #r36-header .r36-links a:hover, #r36-footer .r36-links a:hover { color: var(--r36-red, #b42120); } #r36-header .r36-cr, #r36-footer .r36-cr { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--r36-gris, #5c6067); } /* las acciones de la fila de marca del pie: las señales y el botón de colaborá, a la derecha (en celular el par de señales no se muestra) */ #r36-header .r36-ft-acciones, #r36-footer .r36-ft-acciones { margin-left: auto; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } #r36-header .r36-ft-colabora, #r36-footer .r36-ft-colabora { display: inline-block; color: #fff; font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 700; font-size: 13px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; padding: 9px 12px; white-space: nowrap; } /* el del PIE va en el VERDE del logo, igual que el Colaborá de la barra del celular (pedido del 2026-10-12); el del encabezado sigue en el rojo de marca */ #r36-header .r36-ft-colabora { background: var(--r36-red, #b42120); } #r36-footer .r36-ft-colabora { background: var(--r36-verde, #3f6f3a); display: inline-flex; align-items: center; justify-content: center; min-height: 50px; min-width: 158px; } #r36-header .r36-ft-colabora:hover { background: var(--r36-red-d, #8f1a19); color: #fff; } #r36-footer .r36-ft-colabora:hover { background: var(--r36-verde-d, #335c30); color: #fff; } #r36-header .r36-cr-logo, #r36-footer .r36-cr-logo { display: inline-flex; align-items: center; color: var(--r36-ink, #111214); transition: color .15s ease; } #r36-header .r36-cr-logo:hover, #r36-footer .r36-cr-logo:hover { color: var(--r36-red, #b42120); } #r36-header .r36-cr-svg, #r36-footer .r36-cr-svg { height: 24px; width: auto; display: block; } /* ========================================================================== ENCABEZADO DE ESCRITORIO — «Dos niveles: Acciones / Navegación» (>1100px) Mockup aprobado: nav-movil/escritorio-2-niveles.html Tres franjas finas: marca + acciones · la tira «Al aire» · navegación tipográfica. Todo va SÓLO en escritorio: a ≤1100px manda la barra del celular (.r36-mb) y este encabezado queda display:none, igual que antes. ========================================================================== */ @media (min-width: 1101px) { /* * El encabezado se vuelve una columna para poder ORDENAR las franjas sin * mover el HTML: la tira «Al aire» (franja 2) va entre la marca y la * navegación. En celular no se toca: sigue en bloque, con la tira al final, * abajo de la barra. */ #r36-header.r36-hd--movil { display: flex; flex-direction: column; } #r36-header.r36-hd--movil .r36-hd-top { order: 1; } #r36-header.r36-hd--movil .r36-ribbon { order: 2; } #r36-header.r36-hd--movil .r36-hd-nav { order: 3; } /* ---------- FRANJA 1 · marca + acciones ---------- */ #r36-header .r36-hd-top-in { gap: 22px; padding-top: 16px; padding-bottom: 16px; } #r36-header .r36-hd-top .r36-brand-logo { height: 55px; } #r36-header .r36-acts { display: flex; align-items: stretch; gap: 10px; flex: none; } /* la acción fuerte: el MISMO botón de audio del sitio (.js-r36-play), en bloque rojo */ #r36-header .r36-acts .r36-sig { min-height: 54px; padding: 6px 16px; gap: 12px; } #r36-header .r36-acts .r36-sigchip--audio { width: 24px; height: 24px; border: 1.6px solid rgba(255, 255, 255, .6); border-radius: 50%; } #r36-header .r36-acts .r36-siglab { font-size: 17px; letter-spacing: .07em; } #r36-header .r36-acts .r36-sigsub { font-size: 11px; margin-top: 3px; } #r36-header .r36-act { display: inline-flex; align-items: center; gap: 12px; min-height: 54px; font-family: var(--r36-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif); } /* Ver en YouTube: filete de 1px, discreto, con su ícono y su subtítulo */ #r36-header .r36-act--yt { border: 1px solid var(--r36-ink, #111214); background: var(--r36-papel, #fff); color: var(--r36-ink, #111214); padding: 6px 15px; } #r36-header .r36-act--yt:hover { background: var(--r36-papel2, #f6f6f4); } /* Colaborá: verde de marca, siempre a la vista, y con el MISMO ancho que las otras dos acciones de la fila (eran 172 / 171 / 110 y quedaba desalineado). */ #r36-header .r36-act--colab { background: var(--r36-verde, #3f6f3a); color: #fff; padding: 6px 16px; justify-content: center; min-width: 172px; } #r36-header .r36-act--colab:hover { background: var(--r36-verde-d, #335c30); } #r36-header .r36-lab { display: flex; align-items: center; gap: 8px; font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 700; font-size: 17px; line-height: 1; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; } #r36-header .r36-lab--sm { font-size: 15px; } #r36-header .r36-lab--colab { font-size: 16px; letter-spacing: .14em; } #r36-header .r36-sub { display: block; font-size: 11px; font-weight: 500; line-height: 1.25; margin-top: 3px; opacity: .85; white-space: nowrap; } #r36-header .r36-chip { width: 24px; height: 24px; border-radius: 50%; border: 1.6px solid rgba(255, 255, 255, .6); display: inline-flex; align-items: center; justify-content: center; flex: none; } #r36-header .r36-chip--yt { width: auto; height: auto; border: 0; border-radius: 0; } #r36-header .r36-chip--yt svg { width: 22px; height: 22px; display: block; } /* ---------- FRANJA 2 · la tira «Al aire» ---------- Es la MISMA tira del celular (r36_ahora_info / .r36-ribbon): acá sólo se la deja como franja 2, fina y alineada al wrap. No se re-estiliza. */ /* ---------- FRANJA 3 · navegación tipográfica ---------- */ #r36-header .r36-hd-nav { position: relative; z-index: 30; border-bottom: 1px solid var(--r36-filete, #e3e4e6); } #r36-header .r36-hd-nav-in { justify-content: flex-start; align-items: center; gap: 24px; min-height: 64px; } /* principales: grandes, en tinta; el actual, subrayado en rojo */ #r36-header .r36-primary { display: flex; align-items: stretch; gap: 34px; flex: none; } #r36-header .r36-primary a { position: relative; display: inline-flex; align-items: center; padding: 20px 0; font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 700; font-size: 21px; line-height: 1; letter-spacing: .05em; text-transform: uppercase; color: var(--r36-ink, #111214); white-space: nowrap; } #r36-header .r36-primary a:hover { color: var(--r36-red, #b42120); } /* El subrayado del ítem actual NO se dibuja: lo pidió el dueño el 2026-10-12 («¿es necesario que inicio quede subrayado?»). Ojo: el marcador de «estás acá» no desapareció, sigue en el marcado como aria-current="page" —lo pone marcarActual()— y es lo que leen los lectores de pantalla. Si alguien echa de menos el subrayado, es esto y no un olvido. */ #r36-header .r36-hd-nav-in > .r36-vr { width: 1px; height: 26px; background: var(--r36-filete, #e3e4e6); flex: none; } /* grupos: más chicos, en gris, con su flecha */ #r36-header .r36-groups { display: flex; align-items: center; gap: 24px; flex: none; } #r36-header .r36-grp > button { display: inline-flex; align-items: center; gap: 7px; padding: 20px 0; font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 600; font-size: 15px; line-height: 1; letter-spacing: .07em; text-transform: uppercase; color: var(--r36-gris, #5c6067); white-space: nowrap; } #r36-header .r36-grp > button:hover { color: var(--r36-ink, #111214); } #r36-header .r36-grp .chev { transition: transform .18s; } #r36-header .r36-grp:hover > button, #r36-header .r36-grp:focus-within > button, #r36-header .r36-grp.is-open > button { color: var(--r36-ink, #111214); } #r36-header .r36-grp:hover .chev, #r36-header .r36-grp:focus-within .chev, #r36-header .r36-grp.is-open .chev { transform: rotate(180deg); } /* mega-menú: panel a todo el ancho, plano (sin sombra), alineado al wrap */ #r36-header .r36-mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; background: var(--r36-papel, #fff); border-bottom: 1px solid var(--r36-filete, #e3e4e6); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s; } #r36-header .r36-grp:hover .r36-mega, #r36-header .r36-grp:focus-within .r36-mega, #r36-header .r36-grp.is-open .r36-mega { opacity: 1; visibility: visible; transform: none; } #r36-header .r36-mega-in { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 40px; padding-top: 26px; padding-bottom: 30px; } #r36-header .r36-mega-t { margin: 0; font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 700; font-size: 24px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: var(--r36-ink, #111214); } #r36-header .r36-mega-n { font-size: 12.5px; line-height: 1.55; color: var(--r36-gris, #5c6067); margin: 9px 0 0; } #r36-header .r36-mega-all { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 700; font-size: 13px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; color: var(--r36-ink, #111214); border-bottom: 2px solid var(--r36-ink, #111214); padding-bottom: 3px; } #r36-header .r36-mega-all:hover { color: var(--r36-red, #b42120); border-color: var(--r36-red, #b42120); } #r36-header .r36-mega .r36-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 26px; align-content: start; } #r36-header .r36-mega .r36-links a { display: block; padding: 11px 0; border-top: 1px solid #efefec; font-family: var(--r36-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif); font-size: 13.5px; font-weight: 500; line-height: 1.3; color: var(--r36-ink, #111214); } #r36-header .r36-mega .r36-links a:hover { color: var(--r36-red, #b42120); } /* herramientas a la derecha: las de siempre (buscar, reproductor, redes) */ #r36-header .r36-hd-nav-in .r36-navtools { margin-left: auto; } /* ---------- v0.9.108 · LA FRANJA NO SE PARTE Y ENTRA A 1100 ---------- Medido con el logo real: a 1120 la franja se partía en dos renglones y COLABORÁ caía abajo (faltaban ~12 px; en el sitio entraba por 3 px, así que estaba al borde). El ancho de la fila NO se toca acá: el build tiene una guardia (#5) porque pisarlo rompió el centrado cinco veces. */ /* la franja NO se parte en dos renglones: si algo no entra se aprieta (abajo), nunca se envuelve (a 1120 se partía y COLABORÁ caía abajo) */ #r36-header .r36-hd-top-in { flex-wrap: nowrap; } /* entre 1101 y 1300 el encabezado es más angosto: el grupo se aprieta un poco (discos 40, rótulos 19, aires 10/14) para que las cuatro piezas entren sin desbordar y sin partirse */ @media (max-width: 1300px) { #r36-header .r36-signals { gap: 10px; } #r36-header .r36-centro { gap: 14px; } #r36-header .r36-signals .r36-sigchip { width: 40px; height: 40px; } #r36-header .r36-signals .r36-siglab { font-size: 19px; } } /* ---------- v0.9.109 · EL ENCABEZADO UN POCO MÁS ANCHO ---------- Pedido del dueño: «quedó muy compacto todo en esa fila, dales un poco más de espacio para los costados que están vacíos». Con 1160 las piezas (logo 220 + par 344 + dato 296 + COLABORÁ 172) más sus aires dejaban la franja llena al milímetro (~34 px de aire por lado), así que el único aire posible era más ancho: con 1320 son ~114 px por lado. SÓLO el encabezado (el pie sigue en 1160) y se conservan el centrado (`margin: 0 auto`, de la regla del wrap) y los costados de 20 px: lo único que cambia es el tope. La guardia #5 del build lo permite desde acá (y sigue frenando los casos peligrosos: un ancho del 100% o «none», que sí rompen el centrado). */ #r36-header .r36-hd-top-in, #r36-header .r36-hd-nav-in { max-width: 1320px; } /* ---------- v0.9.106 · EL PAR DE SEÑALES Y EL DATO EN VIVO, EN LA FRANJA DE LA MARCA ---------- La franja de la marca pasa a tener tres cosas: el logo, EL PAR de señales (audio en disco rojo / video en disco de tinta: mismo chip, mismo alto y el mismo peso, la de audio como ancla) con el DATO EN VIVO al lado, y COLABORÁ cerrando. El grupo del par + el dato queda CENTRADO entre el logo y el cierre: los márgenes automáticos reparten el aire a los dos lados. En escritorio la tira «Al aire» ya no se imprime —su dato vive acá—; el pie y el celular no se tocan (ellos siguen con r36_sigpair() y con la tira). */ #r36-header .r36-centro { display: flex; align-items: center; gap: 20px; margin: 0 auto; min-width: 0; } #r36-header .r36-hd-top-in .r36-act--colab { margin-left: 0; } /* el par: el color lo lleva el disco, no la caja */ #r36-header .r36-signals { display: flex; align-items: center; gap: 14px; flex: none; } #r36-header .r36-signals .r36-sig { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 2px 0; background: none; border: 0; color: var(--r36-ink, #111214); } #r36-header .r36-signals .r36-sig--video { background: none; border: 0; } #r36-header .r36-signals .r36-sig--audio:hover, #r36-header .r36-signals .r36-sig--video:hover { background: none; } #r36-header .r36-signals .r36-sigchip { width: 44px; height: 44px; border-radius: 50%; flex: none; color: #fff; } #r36-header .r36-signals .r36-sigchip--audio { background: var(--r36-red, #b42120); } #r36-header .r36-signals .r36-sigchip--video { background: var(--r36-ink, #111214); } #r36-header .r36-signals .r36-sig--audio:hover .r36-sigchip--audio { background: var(--r36-red-d, #8f1a19); } #r36-header .r36-signals .r36-sig--audio .r36-sigchip svg { margin-left: 3px; } #r36-header .r36-signals .r36-siglab { display: block; font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 700; font-size: 21px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: var(--r36-ink, #111214); } /* Sin la opacidad general del .r36-sigsub (.85): acá el gris sobre blanco daba 4.44:1 y AA pide 4.5 (medido el 2026-10-12). Crudo queda en 6.32:1. */ #r36-header .r36-signals .r36-sigsub { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 600; line-height: 1; color: var(--r36-gris, #5c6067); opacity: 1; } /* el dato en vivo, al lado del par (usa el mismo .r36-prog que refresca el JS) */ #r36-header .r36-air { display: flex; align-items: center; gap: 18px; min-width: 0; } #r36-header .r36-air-tx { margin: 0; min-width: 0; } #r36-header .r36-air-l1 { display: flex; align-items: center; gap: 9px; } #r36-header .r36-air-lab { font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 700; font-size: 13px; line-height: 1; letter-spacing: .18em; text-transform: uppercase; color: var(--r36-ink, #111214); white-space: nowrap; } #r36-header .r36-air .r36-prog { font-family: var(--r36-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif); font-size: 16.5px; font-weight: 600; font-style: normal; line-height: 1.2; color: var(--r36-ink, #111214); white-space: nowrap; } #r36-header .r36-air-fecha { display: block; margin-top: 5px; font-size: 13px; font-weight: 400; line-height: 1.2; color: var(--r36-gris, #5c6067); white-space: nowrap; } /* en escritorio la tira no se imprime: su dato vive en la franja de la marca */ #r36-header .r36-ribbon { display: none; } /* ---------- v0.9.107 · LA FILA DE LA MARCA QUEDA PEGADA ARRIBA ---------- Al scrollear, la fila del logo y las señales se queda arriba y la navegación se va con el contenido. Es el mismo camino que el celular (ver más abajo): el
se vuelve `display:contents` para que la fila se pegue contra el body y el pegado dure TODO el scroll —si el header conservara su caja, el sticky se soltaría a los ~170px—. Consecuencias, todas repuestas acá: el
ya no pinta su fondo (lo pinta cada fila, si no en la nota asomaría el gris del tema) y el aire de 18px que le daba al contenido lo repone la navegación como margen, con el hueco pintado con el papel. */ #r36-header.r36-hd--movil { display: contents; } /* le gana a la del bloque de escritorio, que lo deja en flex */ #r36-header .r36-hd-top { position: sticky; top: 0; z-index: 900; background: var(--r36-papel, #fff); } #r36-header .r36-hd-nav { background: var(--r36-papel, #fff); } /* con la barra de administración puesta, la fila se pega debajo de ella */ body.admin-bar #r36-header .r36-hd-top { top: 32px; } /* el aire de 18px del encabezado, repuesto por la navegación (la última fila visible en escritorio): margen + hueco pintado con el papel */ body:not(.r36-doc-body) #r36-header .r36-hd-nav { margin-bottom: 18px; } body:not(.r36-doc-body) #r36-header .r36-hd-nav::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 18px; background: var(--r36-papel, #fff); pointer-events: none; } } /* ========================================================================== PÁGINAS QUE DIBUJA EL PLUGIN — cabecera común ========================================================================== */ #r36-grilla, #r36-contacto, #r36-colabora, #r36-programas, #r36-secciones { max-width: 1080px; margin: 0 auto; } /* El contenedor que abre r36_pagina_abre(): es el bloque de la página, y cuelga de .r36-wrap (el que centra y da los costados). */ #r36-grilla.r36-pagina, #r36-contacto.r36-pagina, #r36-colabora.r36-pagina, #r36-programas.r36-pagina, #r36-secciones.r36-pagina { display: block; } /* La cabecera de página: la regla de 2 px abajo enmarca el pasaje del encabezado al contenido (antes el título flotaba sobre el vacío) y el ancho de 1080 hace que la página use el mismo espacio que el encabezado y el pie, en vez de quedar como una franja de 860 con 370 px de vacío a cada lado. */ #r36-grilla .r36-cabeza, #r36-contacto .r36-cabeza, #r36-colabora .r36-cabeza, #r36-programas .r36-cabeza, #r36-secciones .r36-cabeza { padding-bottom: 26px; border-bottom: 2px solid var(--r36-ink, #111214); margin-bottom: 34px; } /* los textos largos siguen con tope de lectura, aunque la página sea más ancha */ #r36-colabora .r36-prosa p { max-width: 68ch; } #r36-grilla .r36-panel-meta, #r36-grilla .r36-rows { max-width: 100%; } #r36-grilla .r36-h1, #r36-contacto .r36-h1, #r36-colabora .r36-h1, #r36-programas .r36-h1, #r36-secciones .r36-h1 { font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 800; font-size: clamp(46px, 7vw, 84px); line-height: .95; letter-spacing: -.005em; text-transform: uppercase; color: var(--r36-ink, #111214); margin-top: 18px; overflow-wrap: break-word; } #r36-grilla .r36-bajada, #r36-contacto .r36-bajada, #r36-colabora .r36-bajada, #r36-programas .r36-bajada, #r36-secciones .r36-bajada { margin-top: 16px; max-width: 62ch; font-size: 17px; color: var(--r36-gris, #5c6067); } /* ========================================================================== PROGRAMACIÓN — pestañas por día y la jornada como renglones ========================================================================== */ #r36-grilla .r36-tabs-dias { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 26px; } #r36-grilla .r36-tab-dia { display: inline-flex; align-items: center; font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 600; font-size: 15px; line-height: 1; letter-spacing: .08em; text-transform: uppercase; color: var(--r36-ink, #111214); padding: 10px 13px; border: 1px solid var(--r36-filete, #e3e4e6); background: var(--r36-papel, #fff); text-decoration: none; white-space: nowrap; transition: color .18s ease, border-color .18s ease, background-color .18s ease; } #r36-grilla .r36-tab-dia:hover { background: var(--r36-papel2, #f6f6f4); } /* la pestaña de hoy lleva su minibloque */ #r36-grilla .r36-tab-dia--hoy::after { content: "Hoy"; margin-left: 8px; background: var(--r36-red, #b42120); color: #fff; font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 600; font-size: 10px; line-height: 1; letter-spacing: .1em; padding: 4px 5px; } #r36-grilla .r36-paneles-dia { padding-bottom: 10px; } #r36-grilla .r36-panel-dia { display: none; scroll-margin-top: 90px; margin-top: 4px; } #r36-grilla .r36-panel-dia--hoy { display: block; } #r36-grilla .r36-panel-dia:target { display: block; } /* el de hoy deja de estar abierto cuando se eligió otro día */ #r36-grilla:has(.r36-panel-dia:target) .r36-panel-dia--hoy:not(:target) { display: none; } /* la pestaña elegida (sin JS: una regla por día) */ #r36-grilla:not(:has(.r36-panel-dia:target)) .r36-tab-dia--hoy, #r36-grilla:has(#r36-dia-0:target) .r36-tab-dia[href="#r36-dia-0"], #r36-grilla:has(#r36-dia-1:target) .r36-tab-dia[href="#r36-dia-1"], #r36-grilla:has(#r36-dia-2:target) .r36-tab-dia[href="#r36-dia-2"], #r36-grilla:has(#r36-dia-3:target) .r36-tab-dia[href="#r36-dia-3"], #r36-grilla:has(#r36-dia-4:target) .r36-tab-dia[href="#r36-dia-4"], #r36-grilla:has(#r36-dia-5:target) .r36-tab-dia[href="#r36-dia-5"], #r36-grilla:has(#r36-dia-6:target) .r36-tab-dia[href="#r36-dia-6"] { background: var(--r36-red, #b42120); border-color: var(--r36-red, #b42120); color: #fff; } #r36-grilla:not(:has(.r36-panel-dia:target)) .r36-tab-dia--hoy::after, #r36-grilla:has(#r36-dia-0:target) .r36-tab-dia[href="#r36-dia-0"]::after, #r36-grilla:has(#r36-dia-1:target) .r36-tab-dia[href="#r36-dia-1"]::after, #r36-grilla:has(#r36-dia-2:target) .r36-tab-dia[href="#r36-dia-2"]::after, #r36-grilla:has(#r36-dia-3:target) .r36-tab-dia[href="#r36-dia-3"]::after, #r36-grilla:has(#r36-dia-4:target) .r36-tab-dia[href="#r36-dia-4"]::after, #r36-grilla:has(#r36-dia-5:target) .r36-tab-dia[href="#r36-dia-5"]::after, #r36-grilla:has(#r36-dia-6:target) .r36-tab-dia[href="#r36-dia-6"]::after { background: #fff; color: var(--r36-red, #b42120); } #r36-grilla .r36-panel-cab, #r36-pg .r36-panel-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 20px; } #r36-grilla .r36-panel-titulo, #r36-pg .r36-panel-titulo { font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 700; font-size: clamp(24px, 3vw, 32px); line-height: 1; letter-spacing: .02em; text-transform: uppercase; color: var(--r36-ink, #111214); } #r36-grilla .r36-panel-tag, #r36-pg .r36-panel-tag { display: inline-flex; align-items: center; gap: 7px; background: var(--r36-red, #b42120); color: #fff; font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 600; font-size: 10px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; padding: 4px 5px; } #r36-grilla .r36-panel-tag .r36-dot, #r36-pg .r36-panel-tag .r36-dot { width: 6px; height: 6px; background: #fff; } #r36-grilla .r36-panel-tag .r36-dot::after, #r36-pg .r36-panel-tag .r36-dot::after { border-color: #fff; } #r36-grilla .r36-panel-meta, #r36-pg .r36-panel-meta { font-size: 13px; font-weight: 500; color: var(--r36-gris, #5c6067); margin: 16px 0 4px; } /* Al desplegarse, el día entra con un movimiento corto */ @keyframes r36-aparece { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } #r36-grilla .r36-panel-dia--hoy, #r36-grilla .r36-panel-dia:target { animation: r36-aparece .3s cubic-bezier(.2, .7, .2, 1) both; } @media (prefers-reduced-motion: reduce) { #r36-grilla .r36-panel-dia--hoy, #r36-grilla .r36-panel-dia:target { animation: none; } } /* los renglones de la jornada */ #r36-grilla .r36-rows, #r36-pg .r36-rows { border-top: 1px solid var(--r36-filete, #e3e4e6); margin-top: 14px; } #r36-grilla .r36-fila, #r36-pg .r36-fila { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 2px; border-bottom: 1px solid var(--r36-filete, #e3e4e6); } #r36-grilla .r36-hora, #r36-pg .r36-hora { font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 700; font-size: 18px; line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; color: var(--r36-ink, #111214); } #r36-grilla .r36-hora b, #r36-pg .r36-hora b { display: block; font-weight: 700; } #r36-grilla .r36-hora-fin, #r36-pg .r36-hora-fin { display: block; font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 500; font-size: 13px; line-height: 1.1; color: var(--r36-gris, #5c6067); } #r36-grilla .r36-programa, #r36-pg .r36-programa { font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 600; font-size: 19px; line-height: 1.15; letter-spacing: .03em; text-transform: uppercase; color: var(--r36-ink, #111214); min-width: 0; } #r36-grilla .r36-nota, #r36-pg .r36-nota { display: block; font-family: var(--r36-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif); font-weight: 400; font-size: 12.5px; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--r36-gris, #5c6067); margin-top: 2px; } #r36-grilla .r36-aire, #r36-pg .r36-aire { display: inline-flex; align-items: center; gap: 7px; justify-self: end; } /* la franja al aire, marcada: lavado rojo, el filete rojo que sangra en el margen (sin desalinear las horas) y la hora de inicio en rojo */ #r36-grilla .r36-fila--vivo, #r36-pg .r36-fila--vivo { background: var(--r36-red-wash, #fdf5f4); box-shadow: inset 5px 0 0 var(--r36-red, #b42120); margin-left: -10px; padding-left: 10px; } #r36-grilla .r36-fila--vivo .r36-hora, #r36-pg .r36-fila--vivo .r36-hora { color: var(--r36-red, #b42120); } #r36-grilla .r36-fila--vivo .r36-hora-fin, #r36-pg .r36-fila--vivo .r36-hora-fin { color: var(--r36-gris, #5c6067); } #r36-grilla .r36-fila--vivo .r36-programa, #r36-pg .r36-fila--vivo .r36-programa { font-weight: 700; } /* ========================================================================== CONTACTO ========================================================================== */ #r36-contacto .r36-filas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin: 0; } #r36-contacto .r36-dato { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; align-items: center; margin: 0; padding: 18px 2px; border-bottom: 1px solid var(--r36-filete, #e3e4e6); } #r36-contacto dt { font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 600; font-size: 13px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--r36-gris, #5c6067); } #r36-contacto dd { margin: 0; font-size: 17px; line-height: 1.5; color: var(--r36-ink, #111214); } #r36-contacto dd a { text-decoration: underline; text-underline-offset: 3px; } #r36-contacto dd a:hover { color: var(--r36-red, #b42120); } /* WhatsApp es la acción: bloque rojo */ #r36-contacto dd a[href*="wa.me"] { display: inline-block; background: var(--r36-red, #b42120); color: #fff; font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 700; font-size: 14px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; padding: 11px 14px; text-decoration: none; vertical-align: middle; } #r36-contacto dd a[href*="wa.me"]:hover { background: var(--r36-red-d, #8f1a19); color: #fff; } /* El cierre: las redes de la radio en cuadrados (pedido del cliente, 2026-10-17). Cuadrados de 48 con filete de 1 px, ícono en tinta y el acento en rojo recién al pasar el mouse o al enfocar; el nombre va en texto oculto porque un ícono solo no dice a dónde lleva. El bloque cierra la página CENTRADO —rótulo arriba y cuadrados debajo—, no alineado a la izquierda con la tabla: pegado a la columna de los rótulos quedaba como una fila más sin serlo. En el modal va igual, con el aire de la ficha y su filete arriba. */ #r36-contacto .r36-redes, #r36-ct .r36-redes { display: flex; flex-direction: column; align-items: center; gap: 12px; } #r36-contacto .r36-redes { padding-top: 30px; } #r36-ct .r36-redes { padding: 16px 18px 20px; border-top: 1px solid #efefec; } #r36-contacto .r36-redes-k, #r36-ct .r36-redes-k { margin: 0; font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 700; font-size: 12.5px; line-height: 1; letter-spacing: .16em; text-transform: uppercase; color: var(--r36-gris, #5c6067); } #r36-contacto .r36-redes-l, #r36-ct .r36-redes-l { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; } #r36-contacto .r36-red, #r36-ct .r36-red { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--r36-filete, #e3e4e6); background: var(--r36-papel, #fff); color: var(--r36-ink, #111214); transition: color .15s, border-color .15s, background .15s; } #r36-contacto .r36-red:hover, #r36-contacto .r36-red:focus-visible, #r36-ct .r36-red:hover, #r36-ct .r36-red:focus-visible { color: var(--r36-red, #b42120); border-color: var(--r36-red, #b42120); background: var(--r36-red-wash, #fdf5f4); } #r36-contacto .r36-red-ic, #r36-ct .r36-red-ic { width: 22px; height: 22px; display: block; } /* ========================================================================== COLABORÁ — «dos vías» (la B del mockup aprobado el 2026-10-12): arriba «Cómo aportar» con las dos vías EN PARALELO (izquierda, Mercado Pago con sus montos; derecha, la transferencia con sus cuentas), separadas por un filete vertical de 1px; abajo, el relato a lo ancho con el texto centrado. En el celular las dos vías caen una debajo de la otra. ========================================================================== */ /* los bloques del mismo rango se separan parejo */ #r36-colabora .r36-bloque + .r36-bloque { margin-top: 46px; } /* las dos vías, en paralelo; la segunda lleva el filete vertical que las separa */ #r36-colabora .r36-vias { display: grid; grid-template-columns: 1fr 1fr; } #r36-colabora .r36-via { min-width: 0; } #r36-colabora .r36-via:first-child { padding-right: 54px; } #r36-colabora .r36-via + .r36-via { padding-left: 54px; border-left: 1px solid var(--r36-filete, #e3e4e6); } /* el sub-rótulo de cada vía: condensado, mayúsculas y un filete abajo */ #r36-colabora .r36-sub-rot { font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 700; font-size: 15px; line-height: 1; letter-spacing: .13em; text-transform: uppercase; color: var(--r36-ink, #111214); margin: 0 0 18px; padding-bottom: 9px; border-bottom: 1px solid var(--r36-filete, #e3e4e6); } /* --- montos de Mercado Pago: las mismas piezas, dentro de la vía izquierda --- */ #r36-colabora .r36-aporte { margin: 0; } #r36-colabora .r36-montos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } /* en la vía la grilla de montos es de dos columnas (como el mockup) */ #r36-colabora .r36-via .r36-montos { grid-template-columns: repeat(2, minmax(0, 1fr)); } #r36-colabora .r36-monto { display: flex; flex-direction: column; gap: 10px; padding: 20px 16px; border: 1px solid var(--r36-filete, #e3e4e6); background: var(--r36-papel, #fff); transition: background .15s ease, color .15s ease, border-color .15s ease; } #r36-colabora .r36-monto-cifra { font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 800; font-size: 34px; line-height: 1; color: var(--r36-ink, #111214); font-variant-numeric: tabular-nums; } #r36-colabora .r36-monto-accion { font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 600; font-size: 13px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; color: var(--r36-gris, #5c6067); } #r36-colabora .r36-monto:hover { background: var(--r36-red, #b42120); border-color: var(--r36-red, #b42120); color: #fff; } #r36-colabora .r36-monto:hover .r36-monto-cifra, #r36-colabora .r36-monto:hover .r36-monto-accion { color: #fff; } /* la opción abierta, en fila ancha */ #r36-colabora .r36-libre { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 10px; padding: 18px; border: 1px solid var(--r36-filete, #e3e4e6); background: var(--r36-papel, #fff); } #r36-colabora .r36-libre-lab { display: block; font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 600; font-size: 12px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--r36-gris, #5c6067); } #r36-colabora .r36-libre-tit { display: block; margin-top: 3px; font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 800; font-size: 26px; line-height: 1; text-transform: uppercase; color: var(--r36-ink, #111214); } #r36-colabora .r36-libre-go { display: inline-block; background: var(--r36-red, #b42120); color: #fff; font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 600; font-size: 14px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; padding: 12px 14px; white-space: nowrap; } #r36-colabora .r36-libre:hover { background: var(--r36-papel2, #f6f6f4); } #r36-colabora .r36-libre:hover .r36-libre-go { background: var(--r36-red-d, #8f1a19); } #r36-colabora .r36-aporte-nota { margin-top: 12px; font-size: 13px; color: var(--r36-gris, #5c6067); } /* el relato va solo, a lo ancho, con el texto CENTRADO */ #r36-colabora .r36-lab { display: inline-block; background: var(--r36-red, #b42120); color: #fff; font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 600; font-size: 13px; line-height: 1; letter-spacing: .16em; text-transform: uppercase; padding: 8px 10px 7px; margin: 0 0 16px; white-space: nowrap; } #r36-colabora .r36-prosa p { font-size: 15.5px; line-height: 1.65; color: var(--r36-ink, #111214); margin-top: 14px; } #r36-colabora .r36-prosa p:first-child { margin-top: 0; } /* el texto del relato, centrado (pedido del dueño): el bloque sigue con tope de lectura (68ch, arriba) pero se centra en la página y el texto dentro de él */ #r36-colabora .r36-relato .r36-prosa p { text-align: center; margin-left: auto; margin-right: auto; } #r36-colabora .r36-cierre { margin-top: 20px; font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 700; font-size: 24px; line-height: 1.2; letter-spacing: .02em; text-transform: uppercase; color: var(--r36-ink, #111214); } /* el cierre del relato va centrado como el texto que lo antecede */ #r36-colabora .r36-relato .r36-cierre { text-align: center; } /* --- CUENTAS: tabla de columnas fijas. El rótulo manda el ancho (col fija) y el número y el botón arrancan en la MISMA x en las tres filas, sin importar lo largo del dato ni del botón (el defecto del 2026-10-12: con el
de dos columnas cada número caía en una x distinta). El ancho lo pone la vía. --- */ #r36-colabora .r36-cuentas { table-layout: fixed; width: 100%; border-collapse: collapse; } #r36-colabora .r36-cuentas .r36-c-lab { width: 142px; } #r36-colabora .r36-cuentas .r36-c-num { width: auto; } #r36-colabora .r36-cuentas .r36-c-acc { width: 90px; } #r36-colabora .r36-cuentas tr { border-top: 1px solid var(--r36-filete, #e3e4e6); } #r36-colabora .r36-cuentas tbody tr:last-child { border-bottom: 1px solid var(--r36-filete, #e3e4e6); } #r36-colabora .r36-cuentas th { text-align: left; font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 700; /* El nombre del dato (PESOS, DÓLARES, DESDE EL EXTERIOR): en tinta y más grande. Gris y chico quedaba de susurro y dejaba un hueco muerto entre el rótulo y el número, que se leía como «desalineado» (reportado el 2026-10-12). El espaciado entre letras baja a .04em para que el rótulo más largo entre en la columna sin partirse en tres renglones. */ font-size: 16px; line-height: 24px; letter-spacing: .04em; text-transform: uppercase; color: var(--r36-ink, #111214); padding: 15px 16px 15px 0; vertical-align: middle; } #r36-colabora .r36-cuentas td.r36-cuenta { line-height: 24px; padding: 15px 16px 15px 0; vertical-align: middle; } /* El número de cuenta no se parte: a 390 px la columna de la etiqueta lo dejaba en dos líneas («001548389–» / «00001») y la tabla se veía despareja (2026-10-17). */ #r36-colabora .r36-cuentas td.r36-cuenta { white-space: nowrap; } #r36-colabora .r36-cuentas td.r36-acc { text-align: right; white-space: nowrap; padding: 15px 0; vertical-align: middle; } #r36-colabora .r36-num { font-family: var(--r36-mono, ui-monospace, Menlo, monospace); font-weight: 600; font-size: 16px; letter-spacing: .02em; white-space: nowrap; } #r36-colabora .r36-copiar { font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 600; font-size: 11px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; color: var(--r36-ink, #111214); border: 1px solid var(--r36-ink, #111214); padding: 7px 9px; white-space: nowrap; transition: background .15s ease, color .15s ease, border-color .15s ease; } #r36-colabora .r36-copiar:hover { background: var(--r36-red, #b42120); border-color: var(--r36-red, #b42120); color: #fff; } #r36-colabora .r36-banco-nota { margin-top: 12px; font-size: 13px; line-height: 1.55; color: var(--r36-gris, #5c6067); } /* ========================================================================== PROGRAMAS — el renglón como unidad ========================================================================== */ #r36-programas .r36-programas { display: block; margin-top: 30px; } #r36-programas .r36-prog-cab { display: grid; grid-template-columns: 64px minmax(0, 1fr) 40px 240px; gap: 0 18px; align-items: end; padding: 0 0 10px; border-bottom: 1px solid var(--r36-filete, #e3e4e6); font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 600; font-size: 12px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--r36-gris, #5c6067); } #r36-programas .r36-prog-cab span:last-child { text-align: right; } #r36-programas .r36-programa { display: grid; grid-template-columns: 64px minmax(0, 1fr) 40px 240px; gap: 0 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--r36-filete, #e3e4e6); text-decoration: none; transition: background-color .25s ease; } #r36-programas .r36-programa:hover { background: var(--r36-papel2, #f6f6f4); } #r36-programas .r36-prog-num { font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 800; font-size: 30px; line-height: 1; color: var(--r36-ink, #111214); width: 52px; text-align: center; padding: 6px 0; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; transition: background .2s ease, color .2s ease; } #r36-programas .r36-programa:hover .r36-prog-num { background: var(--r36-red, #b42120); color: #fff; } #r36-programas .r36-prog-nombre { font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 700; font-size: clamp(21px, 3vw, 29px); line-height: 1; letter-spacing: .02em; text-transform: uppercase; color: var(--r36-ink, #111214); } #r36-programas .r36-prog-arr { justify-self: center; font-size: 22px; color: var(--r36-gris, #5c6067); width: 32px; text-align: center; transition: background .2s ease, color .2s ease; } #r36-programas .r36-programa:hover .r36-prog-arr { background: var(--r36-red, #b42120); color: #fff; } #r36-programas .r36-prog-placa { width: 240px; aspect-ratio: 3 / 1; overflow: hidden; border: 1px solid var(--r36-filete, #e3e4e6); background: var(--r36-papel, #fff); display: flex; align-items: center; justify-content: center; padding: 6px; justify-self: end; } #r36-programas .r36-prog-placa img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; } #r36-programas .r36-prog-placa--vacia { border: 0; aspect-ratio: auto; } /* ========================================================================== SECCIONES — el índice en fichas Cada sección con la foto de su última nota, cuántas notas tiene y cuándo fue la última. El índice deja de ser una lista de nombres: dice algo, y de paso se ve de un vistazo qué secciones están vivas. ========================================================================== */ #r36-secciones .r36-ix { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; } /* v0.9.142 · el índice es una lista (auditoría C12): el
  • es el ítem de la grilla y, al ser grid también, la ficha se estira a lo alto de la fila como cuando era hija directa — si no, las tarjetas de una misma fila quedaban con el borde de distinto largo. */ #r36-secciones .r36-ix > li { display: grid; } #r36-secciones .r36-ix-ficha { display: grid; grid-template-columns: 132px 1fr auto; gap: 16px; align-items: center; padding: 14px; border: 1px solid var(--r36-filete, #e3e4e6); border-left: 4px solid var(--r36-red, #b42120); background: var(--r36-papel, #fff); transition: background .15s ease, border-color .15s ease; } #r36-secciones .r36-ix-ficha:hover { background: var(--r36-red-wash, #fdf5f4); border-color: var(--r36-red, #b42120); } #r36-secciones .r36-ix-foto { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--r36-papel2, #f6f6f4); } #r36-secciones .r36-ix-foto img { width: 100%; height: 100%; object-fit: cover; display: block; } #r36-secciones .r36-ix-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; } #r36-secciones .r36-ix-nom { font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 700; font-size: 25px; line-height: 1.05; letter-spacing: .03em; text-transform: uppercase; color: var(--r36-ink, #111214); } #r36-secciones .r36-ix-ficha:hover .r36-ix-nom { color: var(--r36-red, #b42120); } #r36-secciones .r36-ix-meta { font-size: 12px; color: var(--r36-gris, #5c6067); letter-spacing: .03em; } #r36-secciones .r36-ix-ult { font-size: 13px; line-height: 1.3; opacity: .75; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #r36-secciones .r36-ix-ir { display: flex; align-items: center; gap: 6px; font-family: var(--r36-cond, "Barlow Condensed", "Arial Narrow", sans-serif); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--r36-red, #b42120); white-space: nowrap; } #r36-secciones .r36-ix-ir span { font-size: 17px; line-height: 1; } @media (max-width: 1018px) { #r36-secciones .r36-ix { grid-template-columns: 1fr; } } @media (max-width: 640px) { #r36-secciones .r36-ix-ficha { grid-template-columns: 96px 1fr; gap: 12px; } #r36-secciones .r36-ix-ir { display: none; } #r36-secciones .r36-ix-nom { font-size: 21px; } } /* ========================================================================== DOCUMENTO PROPIO (contacto, colaborá, programas, secciones y grilla) ========================================================================== */ .r36-doc-body { margin: 0; background: var(--r36-papel, #fff); color: var(--r36-ink, #111214); font-family: var(--r36-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif); } /* v0.9.122 · el aire de arriba baja de 44 a 20: la franja de navegación ya deja sus 18px de respiro, así que el contenido arrancaba a 62 del menú (medido el 2026-10-12). Con 20 queda en 38, que es lo que el dueño eligió al verlo. */ #r36-main { padding: 20px 0 56px; } /* El ancho y los costados del contenido de nuestras páginas. Se pide por DOS clases —la del y la del — porque al navegar sin recarga el puede quedar con las clases del tema (el JS ahora las sincroniza, pero así la regla no depende de eso). Y el modelo de caja va explícito: el del tema pone border-box y el nuestro content-box, así que el cuerpo quedaba 20px más ancho de cada lado que el encabezado (medido el 2026-10-12). */ .r36-doc .r36-wrap, .r36-doc-body .r36-wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; } /* Cinturón y tirantes contra el desborde horizontal. Acá NO va ningún max-width en las filas que además llevan .r36-wrap (hd-top-in, hd-nav-in, ribbon-in): son las que centran el encabezado; pisarlo descentra todo. */ #r36-header, #r36-footer { max-width: 100%; } /* si alguna vez el tema dibuja el título de la página, no lo queremos acá */ body.r36-grilla-pagina .td-page-title, body.r36-grilla-pagina .tdb-page-title, body.r36-grilla-pagina .entry-title { display: none !important; } /* el botón viejo «EN VIVO» embebido en la portada queda escondido */ body.r36-activo a.live-button { display: none !important; } body.r36-activo .live-button { display: none !important; } /* * La fuente de iconos del tema de ESCRITORIO también hace falta en el celular * (2026-10-11). El tema móvil no encola los CSS del tema de escritorio, así que * la familia que declara `td_legacy_main.css` (@font-face de `newspaper-icons`) * no existe en el teléfono; pero los bloques de la nota igual piden glifos de esa * familia (el indicador de la foto destacada, la flecha de la barra superior) y * se dibujan como marcas grises sueltas: es lo que el dueño veía "rotas". Se * declara acá, con los archivos del propio tema (la ruta es relativa a este CSS). */ @font-face { font-family: 'newspaper-icons'; src: url('../../td-composer/legacy/Newspaper/assets/images/icons/newspaper-icons.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'newspaper'; src: url('../../td-composer/legacy/Newspaper/assets/images/icons/newspaper-icons.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } /* * El encabezado del tema móvil no alcanza con ocultarlo: hay que ponerle el alto * en 0 (2026-10-11). Su JS trae un «affix» que al scrollear lo fija y le agrega al * elemento siguiente un padding-top igual al alto del encabezado, y al volver * arriba lo saca: * * tdAffix.init("td-header-wrap") * … _menu.css("position","fixed"), _nextElement.css("padding-top", _menuHeight) * * Como nosotros lo ocultamos con display:none, ese padding quedaba como una franja * BLANCA entre el encabezado y el contenido: aparecía al bajar y desaparecía al * volver al encabezado — exactamente lo que reportó el dueño (2026-10-11). jQuery * mide el alto aunque el elemento esté oculto (hace el truco de mostrarlo un * instante), así que display:none no alcanza: con el alto, los márgenes y los * rellenos en 0, el affix calcula 0 y no agrega nada. (Este affix está sólo en el * JS del celular; el de escritorio no toca el padding.) */ #td-outer-wrap > .td-header-wrap { height: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; border-top: 0 !important; border-bottom: 0 !important; overflow: hidden !important; } /* * La pantalla de carga está VISIBLE POR DEFECTO: la declara el bloque crítico que * el plugin imprime con estilos en línea, y es lo que tapa el HTML crudo cuando * este archivo todavía viaja (el caso del celular en la primera visita). El JS la * esconde agregando una de estas clases: r36-listo al terminar la carga, o * r36-sin-carga cuando al visitante no le toca verla. Van las dos acá también, * como red por si el bloque crítico no estuviera. */ body.r36-listo #r36-carga, body.r36-sin-carga #r36-carga { opacity: 0; visibility: hidden; } /* * Dos placas del tema que quedaron en el cuerpo de la portada: «Colaborá con * Radio 36» (COLABORA-WEB.png) y «Streaming, clic aquí» (streaming.png). El * dueño pidió sacarlas (2026-10-11). No se toca la página: se ocultan por CSS * desde el plugin, por el bloque que las contiene (leídos del HTML servido) y, * como red, por la dirección del archivo. OJO: el tema carga las imágenes en * diferido y la dirección real vive en data-img-url, no en src. */ body.home .tdi_70, body.home .tdi_71 { display: none !important; } body.home img[data-img-url*="COLABORA-WEB"], body.home img[data-img-url*="streaming.png"], body.home img[src*="COLABORA-WEB"], body.home img[src*="streaming.png"] { display: none !important; } /* * La nota: la columna muerta y el ancho (2026-10-11, corregido el mismo día y * pasado a selectores por clase al borrar un bloque de la plantilla). * * La plantilla de la nota del tema trae una columna a la derecha (la `span4` de * la fila) cuyo ÚNICO contenido es un bloque de HTML crudo con el reproductor * viejo: un