/* La Pachanguera 95.1 FM — https://www.lapachanguera951.com * Código desarrollado y mantenido por Pragmatic Business Solutions. * Contacto: Johnny Gonzalez */ /* =========================================================================== La Pachanguera 95.1 FM Type: Ubuntu. Scale: large — this is a party station, not a bank. Player: fixed bottom bar, the pattern every major Latin American station uses (Tropicana, Olímpica, Exa), so it reads as a radio immediately. =========================================================================== */ /* `hidden` tiene que esconder. NO es una regla de más: `[hidden]{display:none}` la pone el NAVEGADOR, y cualquier regla de autor con `display` le gana sin error y sin aviso — el código pone `hidden = true`, el elemento se queda en pantalla y nadie se entera. Ya mordió dos veces: el contador decía «0 ESCUCHANDO POR LA WEB» con nadie conectado, y la barra de progreso del programa al aire se veía en las 14 vistas del sitio con el relleno en 0. Medido el 16/09 en Chromium, elemento por elemento: de los 18 que el código esconde de verdad, a 4 no les funcionaba. Va GLOBAL y no acotada a cada uno porque a la cuarta vez acotar deja de ser prudencia: se midió qué cambia en las 7 páginas por 2 anchos y lo único que se mueve es #ahora-barra y su hijo. ANTES DE PONER ESTO hubo que sacar el reloj de adentro de #clima (build.py): con la regla puesta y /api/clima caído, esconder el clima se llevaba el reloj y la fecha, y el cintillo quedaba vacío. Si algún día hace falta un elemento que lleve `hidden` y aun así se vea, el arreglo no es aflojar esto: es no usar `hidden` para eso. */ [hidden]{display:none !important} :root{ --amarillo:#FFF100; --rosa:#FF3C77; --azul:#00418B; --campo:#00489C; --rayo:#1068C2; --halo:#B3E0FF; --rosa-fuerte:#C2185B; /* pink that passes AA behind body text */ --hondo:#012A62; --hondo2:#01214E; --pad: clamp(20px, 4.5vw, 56px); --borde: max(var(--pad), calc((100vw - var(--max)) / 2)); /* the one content edge */ --max: 1180px; --rep: 86px; /* height of the fixed player bar */ /* El botón «Saludos y pedidos», que flota ARRIBA de la barra. Su alto vive acá y no suelto en la regla porque el `padding-bottom` del body lo necesita: si no, el botón taparía el final del contenido de cada página y nadie lo notaría salvo justo al final de un scroll. */ --fab: 48px; --fab-sep: 14px; /* hueco entre el botón y la barra */ --fab-gap: 8px; /* hueco entre «Al aire» y «Saludos» */ --fabs: var(--fab); /* una fila en escritorio */ --hoja: 88svh; /* alto máximo de la hoja del diálogo */ } *{box-sizing:border-box} html{scroll-behavior:smooth; -webkit-text-size-adjust:100%} body{ margin:0; min-height:100svh; color:#fff; background:var(--campo); font-family:Ubuntu, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:clip; display:flex; flex-direction:column; /* `clip` Y NO `hidden`, POR EL MISMO MOTIVO QUE `html` — y acá se tardó 26 renglones más en aprender. Medido el 16/09 contra el sitio vivo, a 390 px: con `hidden` el `.cabezal` daba `top = -scrollY` en las OCHO rutas, o sea que el encabezado que tiene que acompañar al rodar se iba con la página. `overflow-x:hidden` en el `body` lo vuelve su propio contenedor de desplazamiento, y un `position:sticky` de adentro se pega a algo que no rueda. Es exactamente lo que el comentario de `html`, unos renglones más abajo, explica que hay que evitar: el arreglo se hizo allá y este `hidden` quedó acá haciendo el daño que aquel texto vino a prevenir. `clip` recorta igual —comprobado: sigue sin desborde horizontal— sin crear el contenedor. Este `overflow-x` NO alcanza solo, y conviene saber por qué antes de agregarle otro: `.rays` es `position:fixed`, así que se ubica contra el VIEWPORT y no contra el body — el recorte del body no lo toca. El recorte que sirve está en `html`, más abajo. */ padding-bottom: calc(var(--rep) + var(--fabs) + var(--fab-sep) + env(safe-area-inset-bottom, 0px)); /* Una sola palabra larguísima —una URL pegada, un nombre sin espacios— no puede estirar la página. Sin esto, un texto del panel con un token de 70 caracteres desbordaba /locutores/ en 9000 px. `overflow-wrap` `anywhere` y no `break-word`: los dos parten la palabra al pintar, pero solo `anywhere` reduce el ancho mínimo intrínseco, que es lo que hace que un contenedor flex o grid deje de estirarse. Con `break-word` el desborde de 9000 px seguía igual. */ overflow-wrap:anywhere} img{max-width:100%; height:auto} a{color:inherit} h1,h2,h3{line-height:1.05; margin:0} /* ---- backdrop -------------------------------------------------------- */ /* EL SITIO DESBORDABA EN HORIZONTAL ENTRE 810 Y 870 px, en producción, y nadie lo había medido. Medido el 16/09 barriendo de 360 a 1000 de a 10: el culpable no era la barra de navegación sino `.rays`, un adorno de 240vmax que a ciertas proporciones se pasa del borde y deja barra de desplazamiento lateral. Va `clip` y no `hidden` A PROPÓSITO: `overflow-x:hidden` en `html` crea un contenedor de desplazamiento y **rompe `position:sticky`** — y esta hoja lo usa en dos lugares, `.cabezal` (el encabezado que acompaña al rodar) y `.trafico-mapa`. `clip` recorta sin crear ese contenedor, así que los dos siguen pegados donde tienen que estar. Y se descubrió por el lado largo: se pidió medir si entraba un séptimo enlace en la barra. El comentario de `build.py` nombraba 1280 y 360 — y el defecto vive en el medio. Una lista de anchos a medir es una lista blanca de preguntas: lo que no está en la lista, no se pregunta. */ html{overflow-x:clip} .rays{ position:fixed; left:50%; top:20%; width:240vmax; height:240vmax; transform:translate(-50%,-50%); z-index:0; pointer-events:none; opacity:.40; background:repeating-conic-gradient(from 0deg at 50% 50%, var(--rayo) 0deg 2.6deg, transparent 2.6deg 7.5deg); -webkit-mask-image:radial-gradient(closest-side,#000 6%,rgba(0,0,0,.5) 30%,transparent 68%); mask-image:radial-gradient(closest-side,#000 6%,rgba(0,0,0,.5) 30%,transparent 68%); animation:turn 260s linear infinite; } @keyframes turn{to{transform:translate(-50%,-50%) rotate(360deg)}} .glow{ position:fixed; left:50%; top:18%; width:min(160vw,1240px); aspect-ratio:1; transform:translate(-50%,-50%); z-index:0; pointer-events:none; background:radial-gradient(circle,rgba(150,210,255,.40) 0%,rgba(0,72,156,0) 62%); } /* ---- header ---------------------------------------------------------- */ .cabezal{ position:sticky; top:0; z-index:40; background:rgba(1,36,88,.82); backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,.16); padding-top:env(safe-area-inset-top,0px); } .cabezal-fila{display:flex; align-items:center; gap:18px; padding-block:12px; padding-inline:var(--borde)} /* ---- Septiembre, Mes de la Patria -------------------------------------- */ /* the top band: weather on the left, the seasonal message centred. It stays after September, carrying the weather on its own. */ /* EL RENGLÓN RESERVA SU ALTO, Y ESO ES UN CLS DE 0,136 A 1024x768. Ver `parches/cintillo-sin-salto.aplicar-estilo-css.py`. `#clima` nace visible (para no meter 298 px de golpe cuando llega el dato) y `pintarClima(null)` lo esconde si `/api/clima` no contesta. Al esconderlo el renglón perdía 4,80 px de alto —`.clima` mide 27,19 y es su hijo más alto— y la página entera se corría para arriba. Medido en las NUEVE rutas: 40,19 con clima y 35,39 sin él, idéntico en todas. NO ES UN `min-width`: `hidden` es `display:none` y a una caja que no se dibuja no se le aplica ningún ancho. Medido, un `min-width:374px` en `.clima` subía el CLS del camino de error de 0,1005 a 0,2679, porque agranda la caja mientras se ve y el reloj salta más lejos cuando desaparece. A/B de 7 corridas por lado, camino de error: mediana 0,0318 -> 0,0066 a 1440x900 y 0,1356 -> 0,0081 a 1024x768. El número es bimodal y las dos modas bajan; a 1024x768 la alta cruza el umbral de 0,1 (0,136 -> 0,098). Con el clima puesto es un no-op. EL NÚMERO ES UNA MEDICIÓN Y TIENE QUIEN LO VIGILE: si alguien cambia la tipografía del cintillo, el alto natural se pasa de éste y deja de reservar lo suficiente **sin quejarse**. Lo atrapa `pruebas/medir-cintillo-salto.mjs`, que compara el renglón con `#clima` y sin él. */ .cintillo{display:flex; align-items:center; gap:14px; flex-wrap:nowrap; padding:6px var(--borde); background:#fff; color:#0A2A5E; min-height:40.19px; border-bottom:1px solid rgba(1,36,88,.18)} .patria{display:flex; align-items:center; gap:10px; min-width:0; margin-left:auto; text-align:right} /* ---- the "this is not live traffic" notice ----------------------------- */ .aclaracion{background:rgba(255,241,0,.12); border:1.5px solid rgba(255,241,0,.5); border-left-width:6px; border-radius:16px; padding:clamp(18px,2.2vw,26px); font-size:16.5px; line-height:1.6; color:#EAF4FF; max-width:78ch} .aclaracion strong{color:var(--amarillo); display:block; margin-bottom:6px; font-size:17.5px} .aclaracion a{color:var(--amarillo); font-weight:700; display:inline-flex; align-items:center; min-height:44px} /* ---- El Tráfico: avisos on the left, map on the right ------------------ */ .trafico-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(18px,2.6vw,34px); align-items:start} .trafico-mapa{position:sticky; top:150px} @media (max-width:920px){ .trafico-grid{grid-template-columns:1fr} .trafico-mapa{position:static; order:-1} /* map first on a phone */ } /* ---- map band above the footer ----------------------------------------- */ .mapa-franja{position:relative; z-index:2; padding:clamp(30px,4vw,56px) 0 clamp(20px,3vw,36px)} .mapa-titulo{font-size:clamp(24px,3.2vw,38px); margin-bottom:clamp(16px,2vw,26px)} .mapa-mas{margin-left:auto; text-decoration:none; font-size:14px; font-weight:700; color:var(--amarillo); display:inline-flex; align-items:center; min-height:44px} .mapa-mas:hover{text-decoration:underline} /* ---- map ---------------------------------------------------------------- */ .mapa-caja{position:relative; border-radius:22px; overflow:hidden; border:1px solid rgba(255,255,255,.24); box-shadow:0 18px 44px rgba(0,8,36,.34)} .mapa{height:clamp(300px,50vh,520px); width:100%; background:#04306F} .mapa-controles{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 16px; background:rgba(1,36,88,.9); border-top:1px solid rgba(255,255,255,.18)} .mapa-check{display:inline-flex; align-items:center; gap:9px; min-height:44px; font-size:14.5px; font-weight:700; cursor:pointer} .mapa-check input{width:20px; height:20px; accent-color:var(--rosa); cursor:pointer} .mapa-nota{font-size:13px; color:var(--halo)} .mapa-credito{margin:10px 0 0; font-size:12.5px; color:#AFCCEE} .leaflet-container{font-family:inherit} .leaflet-control-zoom a{width:44px; height:44px; line-height:44px; font-size:20px} .leaflet-control-attribution{display:none} /* credited below the map instead */ .mapa-credito a{color:var(--halo); display:inline-flex; align-items:center; min-height:44px} .leaflet-popup-content{font-size:14px; line-height:1.5; margin:12px 14px} .leaflet-popup-content b{display:block; font-size:15.5px; margin-bottom:4px} /* ---- servicio list ------------------------------------------------------ */ .reportes{list-style:none; margin:0 0 26px; padding:0; display:grid; gap:12px} .reporte{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; background:rgba(1,36,88,.5); border:1px solid rgba(255,255,255,.2); border-radius:18px; padding:18px 20px; cursor:pointer; transition:border-color .15s ease, transform .15s ease} .reporte:hover{border-color:rgba(255,255,255,.5); transform:translateY(-2px)} .reporte.activo{border-color:var(--amarillo)} .rep-tipo{display:inline-flex; align-items:center; align-self:start; background:var(--c); color:var(--t,#fff); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:6px 11px; border-radius:999px; white-space:nowrap} .reporte h3{font-size:18px; font-weight:700; margin-bottom:5px; line-height:1.25} .reporte p{margin:0 0 6px; font-size:15px; color:#CFE6FF; line-height:1.5} .rep-meta{font-size:13px; color:var(--halo)} @media (max-width:560px){ .reporte{grid-template-columns:1fr} } /* ---- weather ----------------------------------------------------------- */ .clima{display:inline-flex; align-items:center; gap:8px; flex:none} .clima-ico{display:inline-flex; width:20px; height:20px; color:#0A2A5E} .clima-ico svg{width:20px; height:20px} .clima-temp{font-size:15px; font-weight:700; line-height:1} .clima-desc{font-size:12.5px; color:#3C5F96; white-space:nowrap} .reloj-sep{color:rgba(10,42,94,.32); font-weight:400} .reloj{display:inline-flex; align-items:baseline; gap:7px; white-space:nowrap} .reloj b{font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:.01em} .reloj span{font-size:12.5px; color:#3C5F96} /* The band must stay one line. Drop detail in order of importance as it narrows: the date, then the forecast text, then the celebration subtitle. */ @media (max-width:1100px){ .reloj span{display:none} } @media (max-width:1000px){ .clima-desc{display:none} } @media (max-width:900px){ .patria-txt em{display:none} } @media (max-width:600px){ .patria-txt b{font-size:11.5px} } @media (max-width:620px){ .reloj, .reloj-sep{display:none} } /* Y el alto del renglón sigue el MISMO corte, porque es el mismo hecho: acá `.reloj-sep` deja de existir, y con él la caja de línea que hacía los 27,19 px de `.clima`, que baja a los 20 del icono. Medido: el renglón mide 33,00 con clima y 30,00 sin él. El corte no es un aparato, es esta regla. */ @media (max-width:620px){ .cintillo{min-height:33px} } .patria-bandera{display:inline-flex; flex-direction:column; width:26px; height:17px; border-radius:2px; overflow:hidden; flex:none; box-shadow:0 0 0 1px rgba(10,42,94,.25)} .patria-bandera i{display:block; height:33.34%} .patria-bandera i:nth-child(1),.patria-bandera i:nth-child(3){background:#0067C6} .patria-bandera i:nth-child(2){background:#fff} .patria-txt{display:flex; flex-wrap:nowrap; align-items:baseline; justify-content:flex-end; gap:4px 10px; line-height:1.3; min-width:0} .patria-txt b,.patria-txt em{white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .patria-txt b{font-size:14px; font-weight:700; letter-spacing:.01em} .patria-txt em{font-style:normal; font-size:13px; color:#3C5F96} @media (max-width:560px){ .cintillo{padding:6px 12px; gap:10px} .patria{gap:9px} .patria-txt b{font-size:12.5px} .patria-txt em{font-size:11.5px} } .marca{display:flex; align-items:center; gap:15px; text-decoration:none; margin-right:auto; min-height:56px} .marca img{width:clamp(88px,7.4vw,124px); height:auto; aspect-ratio:1; object-fit:contain; filter:drop-shadow(0 5px 14px rgba(0,10,40,.55))} .nav{display:flex; gap:6px} .nav a{display:flex; align-items:center; min-height:48px; padding:0 18px; text-decoration:none; font-size:14.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; border-radius:999px; white-space:nowrap} .nav a:hover{background:rgba(255,255,255,.14)} .nav a[aria-current="page"]{background:var(--amarillo); color:#04306F} .nav a:focus-visible,.marca:focus-visible{outline:3px solid var(--amarillo); outline-offset:3px} .menu{display:none; width:52px; height:52px; padding:0; cursor:pointer; background:none; border:1px solid rgba(255,255,255,.4); border-radius:14px} .menu span{display:block; width:21px; height:2.5px; background:#fff; margin:4.5px auto; border-radius:2px} /* ---- on-air strip ------------------------------------------------------ */ .alaire{position:relative; z-index:30; background:linear-gradient(90deg,#04306F,#0A54AE 55%,#04306F); border-bottom:1px solid rgba(255,255,255,.18)} .alaire-in{width:100%; padding:14px var(--borde); display:flex; align-items:center; gap:16px} .alaire-foto{width:70px; height:70px; flex:none; border-radius:16px; object-fit:cover; border:2.5px solid var(--amarillo); background:#04306F; box-shadow:0 6px 18px rgba(0,10,40,.45)} .alaire-txt{display:flex; flex-direction:column; gap:3px; min-width:0; margin-right:auto} .alaire-badge{display:inline-flex; align-items:center; gap:7px; align-self:flex-start; background:var(--rosa-fuerte); color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; padding:4px 10px; border-radius:999px} .alaire-badge .dot{width:7px; height:7px; border-radius:50%; background:#fff} body.playing .alaire-badge .dot{animation:blip 1.6s ease-out infinite} .alaire-nom{font-size:clamp(18px,2.2vw,25px); font-weight:700; font-style:italic; letter-spacing:-.02em; line-height:1.12; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .alaire-det{font-size:14px; color:var(--halo); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .alaire-sig{font-size:13.5px; color:#CFE6FF; text-align:right; line-height:1.4; padding-left:16px; border-left:1px solid rgba(255,255,255,.22)} .alaire-sig b{display:block; color:#fff; font-weight:700; font-size:15px} .alaire-btn{flex:none; display:inline-flex; align-items:center; gap:10px; cursor:pointer; min-height:52px; padding:0 22px 0 18px; border-radius:999px; border:none; background:var(--amarillo); color:#04306F; font-family:inherit; font-size:15.5px; font-weight:700; transition:transform .14s ease} .alaire-btn:hover{transform:scale(1.04)} .alaire-btn:focus-visible{outline:3px solid #fff; outline-offset:3px} .alaire-btn svg{width:22px; height:22px; fill:#04306F} .alaire-btn .pause{display:none} body.playing .alaire-btn .play{display:none} body.playing .alaire-btn .pause{display:block} .alaire > .progreso{height:5px; background:rgba(255,255,255,.2); display:block} .alaire > .progreso > span{display:block; height:5px; width:0; background:linear-gradient(90deg,var(--amarillo),var(--rosa)); transition:width .6s linear} @media (max-width:860px){ .alaire-sig{display:none} .alaire-btn span{display:none} .alaire-btn{padding:0; width:52px; justify-content:center} } @media (max-width:520px){ .alaire-in{gap:12px; padding:11px var(--pad)} .alaire-foto{width:54px; height:54px; border-radius:13px} } /* ---- live listener count ---------------------------------------------- */ /* La regla acotada `.oyentes[hidden]{display:none !important}` que vivía acá se fue: la cubre la regla global `[hidden]` del principio del archivo, que se puso el 16/09 después de medir las consecuencias que esta misma nota decía que no se habían mirado. Un remiendo que sobrevive a su motivo tapa el próximo. El display de autor de abajo es el que hacía falta ganarle. */ .oyentes{display:inline-flex; align-items:center; gap:7px; flex:none; padding:7px 13px; border-radius:999px; white-space:nowrap; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3)} .oyentes-punto{width:8px; height:8px; border-radius:50%; background:#5BE38B; flex:none; box-shadow:0 0 0 0 rgba(91,227,139,.7); animation:blip 2s ease-out infinite} .oyentes b{font-size:16px; font-weight:700; line-height:1} .oyentes-t{font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--halo)} @media (max-width:1024px){ .oyentes-t{display:none} } /* in the player bar it sits just left of the play button */ .reproductor .oyentes{margin-right:4px} @media (max-width:1024px){ .alaire .oyentes .oyentes-t{display:none} } @media (max-width:520px){ .alaire .oyentes{padding:6px 10px} } /* on phones it keeps just the dot and the number — the label is the first thing to go, never the count itself */ @media (max-width:860px){ .reproductor .oyentes .oyentes-t{display:none} .reproductor .oyentes{padding:6px 11px; margin-right:2px} } /* ---- layout ---------------------------------------------------------- */ main{position:relative; z-index:2; flex:1; width:100%} .wrap{width:100%; padding-inline:var(--borde)} .franja{padding:clamp(38px,5vw,76px) 0} .eyebrow{margin:0 0 12px; font-size:13px; letter-spacing:.22em; text-transform:uppercase; font-weight:700; color:var(--amarillo)} h1{font-size:clamp(36px,5.1vw,68px); font-weight:700; font-style:italic; letter-spacing:-.035em; line-height:1.18; text-shadow:0 6px 30px rgba(0,12,48,.55)} h2{font-size:clamp(30px,4.4vw,58px); font-weight:700; font-style:italic; letter-spacing:-.025em; line-height:1.14} .titulo{margin-bottom:clamp(24px,3vw,44px)} /* the highlight block, straight off the station's own key art */ .resalte{background:var(--rosa); color:#fff; padding:.02em .14em; border-radius:8px; box-decoration-break:clone; -webkit-box-decoration-break:clone; text-shadow:none} h2 .resalte{background:var(--amarillo); color:#04306F} .lede{margin:22px 0 0; color:#E8F3FF; font-size:clamp(17px,2.1vw,22px); line-height:1.58; max-width:44ch} .eyebrow{margin:0 0 16px; font-size:clamp(12px,1.3vw,15px); letter-spacing:.26em; text-transform:uppercase; font-weight:700; color:var(--amarillo)} /* ---- hero ------------------------------------------------------------ */ .hero{position:relative; overflow:hidden; display:grid; grid-template-columns:1.02fr .98fr; align-items:center; gap:clamp(6px,1.2vw,20px); min-height:min(62vh,660px); /* right gutter matches --borde so the art stops on the same grid as the nav and the on-air strip; the text column supplies its own left pad */ padding:clamp(24px,3vw,44px) var(--borde) clamp(32px,4vw,60px)} .hero-txt{width:100%; padding-right:clamp(16px,2vw,28px)} .cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:28px} .btn-play{display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:72px; cursor:pointer; border:none; border-radius:999px; padding:0 32px 0 24px; background:var(--rosa); color:#fff; font-family:inherit; font-size:20px; font-weight:700; box-shadow:0 16px 38px rgba(255,60,119,.4); transition:transform .15s ease} .btn-play:hover{transform:translateY(-3px)} .btn-play:focus-visible{outline:3px solid var(--amarillo); outline-offset:4px} .btn-play svg{width:34px; height:34px; fill:#fff; flex:none} .btn-play .pause{display:none} body.playing .btn-play .play{display:none} body.playing .btn-play .pause{display:block} .btn-ghost{display:inline-flex; align-items:center; justify-content:center; min-height:72px; text-decoration:none; border:3px solid rgba(255,255,255,.6); border-radius:999px; padding:0 28px; font-size:18px; font-weight:700} .btn-ghost-oscuro{border-color:#04306F; color:#04306F} .btn-ghost-oscuro:hover{background:#04306F; color:#fff; border-color:#04306F} .btn-ghost:hover{background:rgba(255,255,255,.15); border-color:#fff} .btn-ghost:focus-visible{outline:3px solid var(--amarillo); outline-offset:4px} .hero-img{position:relative; margin:0; display:flex; align-items:center; justify-content:center} /* LA IMAGEN CUBRE TODA SU CAJA. Pedido del dueño 2026-09-16: «ensure the image cover all of the original high and width». Con `contain` y el carrusel estirando las diapositivas a la misma altura, una banda ancha (2048x1037) quedaba flotando con azul vacío arriba y abajo. */ .hero-img img{position:relative; display:block; width:100%; max-width:none; height:100%; max-height:min(58vh,650px); object-fit:cover; border-radius:5px; margin-inline:0; box-shadow:0 18px 44px rgba(0,8,36,.34)} /* ---- destacados -------------------------------------------------------- */ .destacados{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,24px)} .dest{position:relative; display:block; text-decoration:none; overflow:hidden; border-radius:28px; padding:clamp(26px,3vw,40px); min-height:clamp(240px,26vw,320px); background:#04306F; border:1px solid rgba(255,255,255,.22); transition:transform .18s ease, box-shadow .18s ease} .dest:hover{transform:translateY(-6px); box-shadow:0 26px 54px rgba(0,8,36,.5)} .dest:focus-visible{outline:4px solid var(--amarillo); outline-offset:4px} .dest-n{position:absolute; right:.04em; bottom:-.24em; font-size:clamp(96px,12vw,168px); font-weight:700; font-style:italic; line-height:1; color:rgba(255,255,255,.13); pointer-events:none} .dest h3{position:relative; font-size:clamp(25px,2.8vw,36px); font-weight:700; font-style:italic; letter-spacing:-.02em; line-height:1.02; margin-bottom:16px} .dest p{position:relative; margin:0; font-size:17px; line-height:1.5; color:#CFE6FF} .dest p b{display:inline-block; margin-top:4px; font-size:21px; color:var(--amarillo)} .dest-rosa{background:var(--rosa-fuerte); border-color:rgba(255,255,255,.45)} .dest-rosa p{color:#fff} .dest-rosa p b{color:var(--amarillo)} .dest-amarillo{background:var(--amarillo); border-color:rgba(4,48,111,.3); color:#04306F} .dest-amarillo .dest-n{color:rgba(4,48,111,.14)} .dest-amarillo p{color:#0B3A7C} .dest-amarillo p b{color:#04306F} /* ---- eventos y dinámicas ---------------------------------------------- */ .agenda{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(14px,1.8vw,22px)} /* EN LA PORTADA, `auto-fit` NO SIRVE. Con UNA sola tarjeta —el caso normal el día que la emisora publique su primer boletín— `auto-fit` colapsa las columnas vacías y esa tarjeta se estira a todo el ancho: medido, 1100 px de alto en la portada. `auto-fill` conserva las columnas, así que una tarjeta sola queda del tamaño de una tarjeta. En `/boletin/`, `/eventos/` y `/chismes/` se deja `auto-fit` como estaba: ahí la grilla ES la página. */ #lo-ultimo .agenda{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))} /* LO QUE SUENA, en la barra del aire. Va ARRIBA del nombre del programa y con el mismo peso: es lo que la persona vino a saber. En amarillo de marca porque tiene que distinguirse del programa sin leerlo — y `[hidden]` manda, que es cómo el sitio vuelve solo a la parrilla cuando la consola calla. */ .alaire-suena{display:block; font-weight:800; color:var(--amarillo,#FFE000); font-size:clamp(15px,1.5vw,18px); line-height:1.2; margin:0 0 2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:46ch} .alaire-suena[hidden]{display:none} /* «Sigue · …» en el reproductor de abajo. Más chico que el renglón de arriba: es contexto, no el dato principal, y en un teléfono no puede empujar al botón de play fuera de la pantalla. */ .rep-sig{display:block; font-size:12px; line-height:1.25; opacity:.82; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:42ch} .rep-sig[hidden]{display:none} .evento{background:#04306F; border:1px solid rgba(255,255,255,.22); border-radius:26px; overflow:hidden; display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease} .evento:hover{transform:translateY(-5px); box-shadow:0 24px 50px rgba(0,8,36,.46)} .evento-img{position:relative; margin:0; aspect-ratio:3/2; background:#02265C} .evento-img img{width:100%; height:100%; object-fit:cover; display:block} .evento-cuerpo{padding:clamp(22px,2.4vw,30px); display:flex; flex-direction:column; gap:10px} .ejemplo{position:absolute; top:12px; left:12px; z-index:2; background:rgba(2,26,64,.86); color:var(--amarillo); border:1px solid var(--amarillo); font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; padding:5px 11px; border-radius:999px; backdrop-filter:blur(4px)} .evento .fecha{font-size:13px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--amarillo)} .evento h3{font-size:clamp(22px,2.4vw,30px); font-weight:700; font-style:italic; letter-spacing:-.02em; line-height:1.1} .evento p{margin:0; font-size:16.5px; color:#CFE6FF; line-height:1.55} .evento .lugar{font-size:14.5px; color:var(--halo)} .vacio-agenda{background:#04306F; border:2px dashed rgba(255,255,255,.34); border-radius:26px; padding:clamp(28px,4vw,48px); text-align:center} .vacio-agenda h3{font-size:clamp(23px,2.6vw,32px); font-weight:700; font-style:italic; margin-bottom:12px} .vacio-agenda p{margin:0 auto 22px; max-width:46ch; font-size:17px; color:#CFE6FF; line-height:1.6} /* ---- closing colour block --------------------------------------------- */ .cierre{background:var(--amarillo); color:#04306F; padding:clamp(52px,8vw,110px) 0; text-align:center; position:relative; z-index:2} .cierre-k{margin:0 0 18px; font-size:clamp(12px,1.3vw,15px); letter-spacing:.26em; text-transform:uppercase; font-weight:700} .cierre-h{margin:0; font-size:clamp(52px,11vw,150px); font-weight:700; font-style:italic; letter-spacing:-.04em; line-height:.88; text-transform:uppercase} .cierre-l{margin:22px auto 34px; max-width:40ch; font-size:clamp(17px,2vw,21px); line-height:1.5} /* ---- programación: one compact table, one line per programme ----------- */ .visualmente-oculto{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap} .tabla-caja{border-radius:22px; overflow:hidden; border:1px solid rgba(255,255,255,.22); background:rgba(1,36,88,.5)} .parrilla-tabla{width:100%; border-collapse:collapse; font-size:16px} .parrilla-tabla th{text-align:left; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--halo); font-weight:700; padding:14px 18px; background:rgba(1,22,56,.6); border-bottom:1px solid rgba(255,255,255,.2)} .parrilla-tabla td{padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.12); vertical-align:middle} .parrilla-tabla tr:last-child td{border-bottom:none} .fila{transition:background .2s ease} .fila:hover{background:rgba(255,255,255,.06)} /* the time of day colours the row — a stripe on the left and the dot */ .punto{display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--franja); margin-right:10px; vertical-align:middle; box-shadow:0 0 0 3px color-mix(in srgb, var(--franja) 28%, transparent)} .fila td:first-child{box-shadow:inset 4px 0 0 var(--franja)} .col-hora{white-space:nowrap; font-weight:700; font-variant-numeric:tabular-nums; font-size:15px; color:#EAF4FF} .col-prog b{font-weight:700; font-size:17px} .col-loc,.col-dias{color:#CFE6FF; white-space:nowrap} .pill-franja{display:inline-block; padding:5px 11px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; background:color-mix(in srgb, var(--franja) 26%, transparent); border:1px solid color-mix(in srgb, var(--franja) 60%, transparent); color:var(--franja-txt, #fff); white-space:nowrap} .franja-madrugada{--franja:#7C6BFF; --franja-txt:#D6D0FF} .franja-manana {--franja:#FFC44D; --franja-txt:#FFE1A3} .franja-tarde {--franja:#FF8A5B; --franja-txt:#FFD0BC} .franja-noche {--franja:#4FA8FF; --franja-txt:#C4E2FF} /* the programme on air right now */ .al-aire{display:none} .fila.live{background:var(--rosa-fuerte)} .fila.live td{border-bottom-color:rgba(255,255,255,.3)} .fila.live .col-hora,.fila.live .col-loc,.fila.live .col-dias{color:#fff} .fila.live .al-aire{display:inline-block; margin-left:10px; vertical-align:middle; background:var(--amarillo); color:#04306F; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:4px 9px; border-radius:999px} /* EL LAVADO BAJA DE .22 A .16, Y NO ES LA PÍLDORA QUE DECÍA EL INFORME. Ver `parches/contraste-aa.aplicar-estilo-css.py`. La «Tarde» común mide 6,06:1 y está bien; la que quedaba en 4,25:1 es ÉSTA, la de la fila al aire, blanco sobre blanco-al-22% encima de `--rosa-fuerte`. Coincidió con «Tarde» porque ésa era la franja del programa al aire en ese momento. Con .16 mide 4,70:1, medido por píxeles. El borde al 50 % es el que dibuja la píldora; el relleno sólo la separa de la fila. */ .fila.live .pill-franja{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.5); color:#fff} @media (max-width:760px){ .parrilla-tabla, .parrilla-tabla tbody{display:block} .parrilla-tabla thead{display:none} .fila{display:grid; grid-template-columns:auto 1fr; gap:2px 10px; padding:13px 16px; border-bottom:1px solid rgba(255,255,255,.14); box-shadow:inset 4px 0 0 var(--franja); align-items:baseline} .parrilla-tabla td{padding:0; border:none; display:block} .fila td:first-child{box-shadow:none} .col-hora{grid-column:1; font-size:13.5px} .col-franja{grid-column:2; justify-self:end} .col-prog{grid-column:1 / -1; margin-top:3px} .col-prog b{font-size:17px} .col-loc{grid-column:1 / -1; font-size:13.5px; color:var(--halo)} .col-loc::before{content:"con "} .col-dias{grid-column:1 / -1; font-size:13.5px; color:var(--halo); margin-top:-2px} .pill-franja{font-size:10px; padding:4px 9px} } /* ---- programación ---------------------------------------------------- */ .cabecera{padding:clamp(36px,4.6vw,68px) 0 clamp(8px,1vw,18px)} .ejemplo.ejemplo-fila{position:static; display:inline-block; margin-left:8px; vertical-align:middle; backdrop-filter:none} .nota{margin-top:36px; border-radius:20px; padding:22px 26px; background:rgba(1,36,88,.5); border:1px solid rgba(255,255,255,.2); font-size:16.5px} .nota p{margin:0} .nota a{color:var(--amarillo); font-weight:700; display:inline-block; padding:10px 4px; min-height:44px; line-height:24px} /* ---- locutores ------------------------------------------------------- */ .perfil{display:grid; grid-template-columns:minmax(300px,460px) 1fr; gap:clamp(24px,4vw,46px); align-items:start; background:rgba(1,36,88,.5); border:1px solid rgba(255,255,255,.22); border-radius:28px; padding:clamp(22px,3.4vw,38px)} .perfil figure{margin:0; position:relative} .perfil figure img{border-radius:26px; display:block; width:100%} .perfil p{margin:0; font-size:clamp(17.5px,1.9vw,21px); line-height:1.6; color:#E8F3FF} .shows{list-style:none; margin:26px 0; padding:0; display:flex; flex-direction:column; gap:12px} .shows li{display:flex; flex-wrap:wrap; gap:6px 16px; align-items:baseline; border-bottom:1px solid rgba(255,255,255,.18); padding-bottom:12px} .shows span{font-weight:700; font-size:clamp(19px,2vw,24px)} .shows em{font-style:normal; font-size:14.5px; color:var(--amarillo); font-weight:700} /* ---- locutor list ------------------------------------------------------ */ .perfiles{display:flex; flex-direction:column; gap:clamp(18px,2.4vw,30px); padding-bottom:clamp(30px,4vw,56px)} /* ---- contacto -------------------------------------------------------- */ .tarjetas{display:grid; grid-template-columns:repeat(auto-fit,minmax(282px,1fr)); gap:18px} .tarjeta{background:rgba(1,36,88,.5); border:1px solid rgba(255,255,255,.22); border-radius:24px; padding:28px} .tarjeta h2{font-size:22px; margin-bottom:12px} .tarjeta p{margin:0 0 12px; font-size:16.5px; color:#E8F3FF} .tarjeta a{color:var(--amarillo); font-weight:700} /* .tarjeta a would otherwise paint the WhatsApp button's label yellow on yellow */ .tarjeta .wa{color:#04306F} .tarjeta p > a,.tarjeta a[href^="mailto"]{display:inline-block; padding:10px 4px; min-height:44px; line-height:24px; word-break:break-word} .redes{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 16px} .redes a{text-decoration:none; font-weight:700; color:var(--amarillo); display:inline-flex; align-items:center; min-height:44px; min-width:44px} .wa{display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:56px; text-decoration:none; background:var(--amarillo); color:#04306F; font-weight:700; font-size:17px; padding:0 26px; border-radius:999px; box-shadow:0 12px 30px rgba(0,14,48,.42)} .wa:hover{filter:brightness(1.07)} /* ---- contact form ------------------------------------------------------ */ .formulario{background:rgba(1,36,88,.55); border:1px solid rgba(255,255,255,.24); border-radius:28px; padding:clamp(24px,3.4vw,44px); margin-bottom:clamp(18px,2.4vw,30px)} .formulario h2{font-size:clamp(26px,3.4vw,40px); margin-bottom:10px} .form-intro{margin:0 0 26px; font-size:17px; color:#E8F3FF; max-width:48ch; line-height:1.55} .campos{display:grid; grid-template-columns:1fr 1fr; gap:16px} .campo{display:flex; flex-direction:column; gap:8px} .campo-ancho{grid-column:1 / -1} .campo > span{font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--amarillo)} .campo input,.campo select,.campo textarea{ font-family:inherit; font-size:16.5px; color:#fff; min-height:54px; background:rgba(1,22,56,.72); border:1.5px solid rgba(255,255,255,.3); border-radius:14px; padding:14px 16px; width:100%} .campo textarea{min-height:140px; resize:vertical; line-height:1.55} .campo select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,#B3E0FF 50%), linear-gradient(135deg,#B3E0FF 50%,transparent 50%); background-position:calc(100% - 22px) 24px, calc(100% - 15px) 24px; background-size:7px 7px,7px 7px; background-repeat:no-repeat} .campo select option{background:#04306F; color:#fff} .campo input::placeholder,.campo textarea::placeholder{color:rgba(199,225,255,.5)} .campo input:focus,.campo select:focus,.campo textarea:focus{ outline:none; border-color:var(--amarillo); box-shadow:0 0 0 3px rgba(255,241,0,.25)} .form-nota{margin:14px 0 0; font-size:14px; color:var(--halo)} .trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden} .form-pie{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:26px} .form-pie .btn-play{padding:0 36px} .form-estado{margin:18px 0 0; font-size:16px; font-weight:700; min-height:1.4em} .form-estado.ok{color:var(--amarillo)} .form-estado.mal{color:#FFD2DF} .formulario.enviando{opacity:.75; pointer-events:none} /* ---- nota de voz ------------------------------------------------------ */ /* Acá mucha gente manda audio y no escribe. Este bloque tiene que verse tan importante como la caja del mensaje, no como un extra escondido abajo. */ .grabar{margin:22px 0 0; padding:18px 20px; border-radius:16px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.22)} .grabar-cab{display:flex; gap:13px; align-items:flex-start; margin-bottom:14px} .grabar-icono{font-size:26px; line-height:1.1; flex:0 0 auto} .grabar-cab b{display:block; font-size:16.5px; margin-bottom:3px} .grabar-ayuda{display:block; font-size:13.5px; color:var(--halo); line-height:1.45} .grabar-fila{display:flex; gap:13px; align-items:center; flex-wrap:wrap} .btn-grabar,.btn-borrar{font-family:inherit; font-size:15px; font-weight:700; border-radius:999px; cursor:pointer; min-height:44px; padding:0 22px; border:2px solid var(--amarillo); background:transparent; color:var(--amarillo)} .btn-grabar:hover,.btn-borrar:hover{background:var(--amarillo); color:#04306F} .btn-grabar.grabando{background:var(--rosa); border-color:var(--rosa); color:#fff} .btn-borrar{border-color:rgba(255,255,255,.35); color:var(--halo); font-size:14px; padding:0 16px} .grabar-reloj{font-variant-numeric:tabular-nums; font-weight:700; font-size:17px; min-width:3.2em} /* El reproductor no puede estirar la página en un teléfono. */ .grabar-oir{flex:1 1 200px; min-width:0; max-width:100%; height:40px} .grabar-estado{margin:12px 0 0; font-size:14px; color:var(--halo); min-height:1.3em} .grabar-estado.mal{color:#FFD2DF} @media (max-width:640px){ .campos{grid-template-columns:1fr} .grabar{padding:15px} .grabar-fila{gap:10px} .grabar-oir{flex-basis:100%} } /* ---- footer ---------------------------------------------------------- */ .pie{position:relative; z-index:2; margin-top:clamp(24px,3vw,48px); background:var(--hondo2); border-top:1px solid rgba(255,255,255,.14)} .pie-deco{position:relative; height:clamp(120px,15vw,180px); margin-top:-1px; overflow:hidden; pointer-events:none} .pie-deco .cinta{position:absolute; left:0; bottom:0; width:100%; height:100%} .pie-deco .flor{position:absolute; left:-10px; bottom:0; width:clamp(126px,17vw,200px); filter:drop-shadow(0 10px 24px rgba(0,20,60,.5))} .pie-cuerpo{width:100%; padding:clamp(18px,2.4vw,32px) var(--borde) clamp(16px,2vw,24px); display:grid; grid-template-columns:1.5fr 1fr 1.3fr 1.3fr; gap:clamp(16px,2.4vw,32px)} .pie-logo{width:clamp(140px,12vw,188px); height:auto; display:block; margin-bottom:8px; filter:drop-shadow(0 6px 18px rgba(0,10,40,.5))} .pie-col h3{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--amarillo); font-weight:700; margin:0 0 6px} .pie-col ul{list-style:none; margin:0; padding:0} .pie-col li{margin:0; line-height:1.2} .pie-col li a{display:inline; text-decoration:none; font-size:15px; line-height:1.2; color:#E4F1FF} .pie-col li a:hover{color:var(--amarillo)} .pie-nota,.pie-dir{margin:6px 0 0; font-size:13.5px; color:#A9C8EC; line-height:1.4} .social{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px} .social a{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none; text-decoration:none; color:#fff; border:1.5px solid rgba(255,255,255,.4); border-radius:50%; transition:background .15s ease, border-color .15s ease, transform .15s ease} .social a:hover{transform:translateY(-2px)} .social a:hover{background:rgba(255,255,255,.17); border-color:#fff} .social a:focus-visible{outline:3px solid var(--amarillo); outline-offset:3px} .pie-legal{width:100%; padding:12px var(--borde) 18px; border-top:1px solid rgba(255,255,255,.14); font-size:13px; color:#9FC0E8} .pie-legal-fila{display:flex; flex-wrap:wrap; gap:4px 20px; justify-content:space-between} .pie-credito{margin:8px 0 0; text-align:center; font-size:13px; color:#9FC0E8} .pie-credito a{color:var(--halo); font-weight:700; text-decoration:underline; text-underline-offset:3px; display:inline; padding:0} .pie-credito a:hover{color:var(--amarillo)} /* Acceso al panel: solo en el pie, y deliberadamente discreto — es para el equipo de la estación, no para el oyente. */ .pie-sep{margin:0 4px; opacity:.55} .pie-credito a.pie-panel{font-weight:400; text-decoration-thickness:1px; text-underline-offset:3px; opacity:.85} .pie-credito a.pie-panel:hover{opacity:1} .pie-legal-links{display:flex; flex-wrap:wrap; gap:0 10px; justify-content:center; margin:6px 0 0; font-size:13px; line-height:1.2} .pie-legal-links a{color:var(--halo); font-weight:700; text-decoration:underline; text-underline-offset:3px; padding:0; display:inline} .pie-legal-links a:hover{color:var(--amarillo)} .legal-cab .wrap{max-width:40rem; margin-inline:auto; text-align:center} .legal-franja .wrap{display:flex; justify-content:center} .legal{ width:100%; max-width:40rem; margin-inline:auto; color:#F4F9FF; background:rgba(1,22,56,.5); border:1px solid rgba(255,255,255,.14); border-radius:22px; padding:clamp(18px,2.4vw,36px) clamp(16px,2.4vw,36px); text-align:left} .legal-nav{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; margin:0 0 12px; font-size:14px; font-weight:700; line-height:1.35} .legal-nav a{color:var(--amarillo); text-decoration:underline; text-underline-offset:3px; padding:0; min-height:0; display:inline} .legal-nav a[aria-current="page"]{color:#fff; text-decoration:none} .legal-meta{margin:0 0 18px; color:var(--halo); font-size:14px; line-height:1.45} .legal h2{font-size:clamp(20px,2.2vw,26px); line-height:1.3; margin:26px 0 10px; color:#fff; letter-spacing:0} .legal h2:first-of-type{margin-top:8px} .legal p{margin:0 0 14px; line-height:1.7; font-size:17px; color:#EAF3FF} .legal ul{margin:0 0 16px; padding-left:1.25em} .legal li{margin:0 0 8px; line-height:1.6} .legal strong{color:#fff} .legal a{color:var(--amarillo); font-weight:700} .legal-indice{list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px} .legal-indice li{margin:0; padding:12px 14px; border-radius:14px; background:rgba(1,22,56,.35); border:1px solid rgba(255,255,255,.14)} .legal-indice a{color:var(--amarillo); font-weight:700} .legal-cierre{margin-top:24px; padding-top:16px; border-top:1px solid rgba(255,255,255,.16); color:var(--halo); font-size:14.5px; line-height:1.55} .acepto{margin:16px 0 10px; padding:14px 16px; border-radius:16px; border:1px solid rgba(255,241,0,.5); background:rgba(1,22,56,.45)} .acepto-txt{margin:0 0 10px; font-size:14.5px; color:#EAF3FF; line-height:1.45} .acepto-txt a{color:var(--amarillo); font-weight:700} .acepto-btn{min-height:48px; padding:0 18px; font-weight:800} .acepto-btn[aria-pressed="true"]{background:var(--amarillo); color:#01214E; border-color:var(--amarillo)} .acepto .form-estado{margin:8px 0 0} .mk-legal{margin:0 0 22px; color:var(--halo); font-size:14.5px; max-width:42em} .mk-legal a{color:var(--amarillo); font-weight:700} .mk-descargo{margin:0 0 18px; padding:14px 16px; border-radius:16px; background:rgba(1,22,56,.55); border:1px solid rgba(255,241,0,.55); max-width:52em} .mk-descargo p{margin:0 0 8px; color:#fff; font-size:15px; line-height:1.45} .mk-descargo p:last-child{margin:0} .mk-descargo a{color:var(--amarillo); font-weight:700} /* ---- the fixed player bar -------------------------------------------- */ .reproductor{ position:fixed; left:0; right:0; bottom:0; z-index:60; background:linear-gradient(180deg, rgba(1,33,78,.96), rgba(1,25,60,.99)); border-top:2px solid var(--amarillo); backdrop-filter:blur(16px); padding-bottom:env(safe-area-inset-bottom,0px); box-shadow:0 -12px 34px rgba(0,8,30,.42); } .rep-caja{width:100%; height:var(--rep); padding:0 var(--borde); display:flex; align-items:center; gap:16px} .rep-logo{width:58px; height:58px; flex:none; object-fit:contain; filter:drop-shadow(0 3px 10px rgba(0,10,40,.5))} .rep-txt{display:flex; flex-direction:column; min-width:0; margin-right:auto; line-height:1.25} .rep-k{font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; white-space:nowrap; color:var(--halo); display:inline-flex; align-items:center; gap:8px} .rep-k .dot{width:9px; height:9px; border-radius:50%; background:rgba(255,241,0,.42); flex:none} body.playing .rep-k .dot{background:var(--amarillo); animation:blip 1.6s ease-out infinite} @keyframes blip{0%{box-shadow:0 0 0 0 rgba(255,241,0,.75)}100%{box-shadow:0 0 0 13px rgba(255,241,0,0)}} .rep-v{font-size:18px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .rep-btn{flex:none; width:62px; height:62px; border-radius:50%; cursor:pointer; padding:0; border:4px solid var(--amarillo); background:var(--rosa); color:#fff; display:grid; place-items:center; transition:transform .15s ease; box-shadow:0 10px 26px rgba(255,60,119,.42)} .rep-btn:hover{transform:scale(1.06)} .rep-btn:focus-visible{outline:4px solid var(--amarillo); outline-offset:4px} .rep-btn svg{width:26px; height:26px; fill:#fff; pointer-events:none} .rep-btn .pause{display:none} body.playing .rep-btn .play{display:none} body.playing .rep-btn .pause{display:block} body.loading .rep-btn{animation:latir 1.1s ease-in-out infinite} /* interrupted by another app: the button invites a tap back rather than looking like an ordinary stopped state */ body.interrumpido .rep-btn, body.interrumpido .alaire-btn{box-shadow:0 0 0 3px rgba(255,241,0,.55)} body.interrumpido .rep-k .dot{background:var(--amarillo)} @keyframes latir{50%{transform:scale(.93); opacity:.75}} /* ---- fallbacks ------------------------------------------------------- */ .sin-js{width:100%; padding:16px var(--borde); text-align:center; background:rgba(255,241,0,.15); font-size:16px} .sin-js a{color:var(--amarillo); font-weight:700} .directo{display:inline-flex; align-items:center; min-height:44px; margin-top:12px; color:var(--amarillo); font-weight:700; font-size:16px} /* ---- responsive ------------------------------------------------------ */ @media (max-width:1040px){ .pie-cuerpo{grid-template-columns:1fr 1fr} } @media (max-width:920px){ .parrilla{grid-template-columns:1fr} .dias-tabs{display:flex} .dia{display:none} .dia.activo{display:block} .perfil{grid-template-columns:1fr} .perfil figure{max-width:320px} } @media (max-width:980px){ .destacados{grid-template-columns:1fr} .dest{min-height:0} } @media (max-width:800px){ .hero{grid-template-columns:1fr; min-height:0; padding-top:0; gap:0; padding-right:0} .hero-txt{padding:clamp(28px,6vw,44px) var(--pad) 0} .hero-img{order:-1} .hero-img img{width:100%; margin-inline:0; max-height:none; border-radius:5px} .nav{position:absolute; top:100%; right:var(--pad); flex-direction:column; gap:3px; background:#04306F; border:1px solid rgba(255,255,255,.24); border-radius:18px; padding:9px; min-width:212px; box-shadow:0 20px 46px rgba(0,8,34,.55)} .nav:not(.abierto){display:none} .menu{display:block} } @media (max-width:640px){ :root{--rep:78px} .pie-cuerpo{grid-template-columns:1fr; gap:16px} .pie-legal{flex-direction:column; gap:6px} .marca img{width:74px} } @media (max-width:480px){ .rep-logo{width:50px; height:50px} .rep-btn{width:56px; height:56px} .rep-v{font-size:16px} .social a span{display:none} .social a{padding:0; width:52px; height:52px; border-radius:50%} } @media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}} /* Mapa de /eventos/. Reusa la caja del mapa de El Tráfico, pero más bajo: acá el mapa acompaña a las tarjetas, no es el contenido principal. */ .mapa-eventos-caja{margin-top:26px} .mapa-eventos-caja .mapa{height:min(46vh,380px)} .evento[data-i]{cursor:pointer} .evento.activo{outline:3px solid var(--amarillo); outline-offset:3px} @media (max-width:700px){ .mapa-eventos-caja .mapa{height:300px} } /* ------------------------------------------------------------- pauta ----- */ /* Los espacios de publicidad. Cuando no hay anuncio el contenedor va `hidden` y no ocupa nada: el sitio no debe verse "con huecos" sin pauta vendida. */ .pauta{position:relative; min-width:0} .pauta img{display:block; width:100%; height:auto; border-radius:10px} .pauta a{display:block; text-decoration:none} .pauta-tag{position:absolute; top:5px; right:7px; font-size:10px; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:99px; background:rgba(2,18,48,.62); color:#E7EFFA; pointer-events:none} .pauta-banda{width:100%; margin:0 0 6px} .pauta-banda img{border-radius:0; max-height:110px; object-fit:cover} .pauta-chica{flex:0 0 auto; max-width:190px} .pauta-chica img{max-height:52px; object-fit:contain} .pauta-chica .pauta-tag{font-size:9px; top:2px; right:3px; padding:1px 5px} .pauta-pagina{margin:8px 0 22px} .pauta-pagina img{max-height:220px; object-fit:cover} .pauta-popup{border:0; border-radius:16px; padding:10px; max-width:min(92vw,460px); box-shadow:0 30px 80px rgba(0,8,30,.55)} .pauta-popup::backdrop{background:rgba(2,12,34,.62)} .pauta-cerrar{position:absolute; top:-10px; right:-10px; width:34px; height:34px; border-radius:50%; border:2px solid #fff; background:var(--azul, #00418B); color:#fff; cursor:pointer; display:grid; place-items:center; box-shadow:0 6px 18px rgba(0,0,0,.35)} @media (max-width:760px){ .pauta-chica{max-width:120px} .pauta-chica img{max-height:40px} .pauta-banda img{max-height:74px} } /* LA BANDA ANCHA, entre el encabezado y «Al aire» (ver site/build.py). Alto FIJO a propósito, que es lo único que la distingue de `.pauta-banda`: así el hueco crece UNA sola vez y de un tamaño conocido cuando aparece el anuncio, en vez de crecer dos —una al mostrarse y otra al cargar la imagen—. Sin anuncio no ocupa nada, y eso lo hace el `hidden` del marcado con la regla global de arriba; acá NO hay ningún `min-height`. */ .pauta-ancha{width:100%; margin:0; height:110px} .pauta-ancha img{border-radius:0; width:100%; height:100%; object-fit:cover} @media (max-width:760px){ .pauta-ancha{height:78px} } /* ======================================================================= BOTÓN SIEMPRE VISIBLE + DIÁLOGO PARA ESCRIBIRLE A LA RADIO ======================================================================= Por qué el botón está acá y no adentro de la barra del reproductor: MEDIDO en navegador, a 320 px quedan 16 px libres entre el texto «En vivo · 95.1 FM» y el botón de play (26 px a 390 px). No cabe nada. Así que flota justo encima, alineado al mismo borde derecho que el play. Las tres cosas que lo mantienen honesto: 1. Se cuelga de `--rep`, la MISMA variable de la que cuelga el alto de la barra. Si la barra cambia de alto, el botón se mueve con ella; no hay dos números que se puedan desincronizar. 2. `z-index` 55 contra 60 de la barra, A PROPÓSITO. La geometría ya los separa; esto es el seguro: si algún día se cruzan, gana la barra, que es lo que el dueño dijo que no se puede tapar. 3. Su alto entra en el `padding-bottom` del body (arriba), así que no tapa el final del contenido de ninguna página. ======================================================================= */ .fabs{ position:fixed; z-index:55; right:var(--borde); bottom:calc(var(--rep) + env(safe-area-inset-bottom, 0px) + var(--fab-sep)); display:flex; flex-direction:row; align-items:center; gap:var(--fab-gap); } .fab-escribir, .fab-aire{ display:inline-flex; align-items:center; gap:9px; min-height:var(--fab); padding:0 18px; font-family:inherit; font-size:15px; font-weight:700; line-height:1.15; cursor:pointer; border-radius:999px; box-shadow:0 10px 26px rgba(0,8,30,.5); transition:transform .15s ease; } .fab-escribir{ /* `--rosa-fuerte` Y NO `--rosa`: con #FF3C77 el rótulo de 15 px mide 3,41:1 y AA pide 4,5 (18,66 px sería texto grande y pediría 3,0, pero ensanchar el botón rompe el cálculo de 320 px de `.kick-nuevo`). Con #C2185B mide 5,68:1, medido por píxeles en el sitio público. Es el mismo rosa que `:root` declara como el que pasa AA, no uno nuevo. Ver `parches/contraste-aa.aplicar-estilo-css.py`. */ color:#fff; background:var(--rosa-fuerte); border:2.5px solid var(--amarillo); } .fab-aire{ color:var(--azul); background:var(--amarillo); border:2.5px solid #fff; font-weight:800; } .fab-escribir:hover, .fab-aire:hover{transform:translateY(-2px)} .fab-escribir:focus-visible, .fab-aire:focus-visible{ outline:4px solid var(--amarillo); outline-offset:3px} .fab-aire:focus-visible{outline-color:#fff} .fab-escribir svg, .fab-aire svg{flex:none} /* Con el diálogo abierto los botones sobran: el foco está adentro y la página de atrás es inerte. Se esconden para que no asomen por debajo. */ body:has(.dlg-escribir[open]) .fabs{opacity:0; pointer-events:none} @media (max-width: 620px){ :root{ --fabs: calc(var(--fab) * 2 + var(--fab-gap)); } .fabs{flex-direction:column; align-items:flex-end} } /* Y la página de atrás no se desplaza mientras se escribe. */ body:has(.dlg-escribir[open]){overflow:hidden} /* ---- «Kick acaba de ponerse en vivo» ----------------------------------- Ver `parches/kick-nuevo.aplicar-estilo-css.py`. Acá está SÓLO la geometría y la tinta; el comportamiento vive en `app.js` y lo escribe otro parche. NO PUEDE TAPAR NINGÚN CONTROL, y abajo hay dos fijos: la barra del reproductor (`--rep`, donde vive el botón de escuchar) y el botón flotante «Saludos y pedidos» (`.fab-escribir`, 198x48, a `--fab-sep` de la barra). A 320 px no entran los dos a lo ancho: el ancho utilizable es 280 px y el botón flotante se lleva 198. Por eso hasta 620 px este aviso se apila ARRIBA del botón, y de ahí para arriba va a su izquierda. El corte es el ancho en que los dos entran, no el nombre de un aparato. Las medidas salen de las variables que ya existen y no de números copiados: el día que la barra cambie de alto, esto se mueve solo. */ .kick-nuevo{ position:fixed; z-index:56; /* sobre el `.fab-escribir` (55), bajo el reproductor (60): nunca lo tapa */ left:var(--borde); bottom:calc(var(--rep) + env(safe-area-inset-bottom, 0px) + var(--fab-sep) + var(--fabs) + 10px); max-width:min(380px, calc(100vw - 2 * var(--borde))); display:flex; align-items:center; gap:10px; padding:10px 10px 10px 14px; background:linear-gradient(180deg,#04306F,#01214E); border:1.5px solid rgba(83,252,24,.55); border-radius:14px; box-shadow:0 10px 26px rgba(0,8,30,.5); /* UNA INVITACIÓN, NO UNA ALARMA: entra despacio y no salta. */ opacity:1; transform:none; transition:opacity .18s ease, transform .18s ease; } .kick-nuevo[hidden]{display:none} @starting-style{ .kick-nuevo{opacity:0; transform:translateY(6px)} } @media (prefers-reduced-motion: reduce){ .kick-nuevo{transition:none} } .kick-nuevo-txt{margin:0; font-size:14.5px; line-height:1.3; color:#E8F3FF} .kick-nuevo-txt b{color:#53FC18} .kick-nuevo-btn{ flex:none; min-height:44px; padding:0 16px; font:inherit; font-weight:700; font-size:14.5px; line-height:1.15; color:#04306F; background:#53FC18; border:0; border-radius:999px; cursor:pointer} .kick-nuevo-btn:hover{filter:brightness(1.08)} .kick-nuevo-btn:focus-visible{outline:3px solid var(--amarillo); outline-offset:2px} .kick-nuevo-cerrar{ flex:none; min-width:44px; min-height:44px; padding:0; display:inline-flex; align-items:center; justify-content:center; font:inherit; font-size:20px; line-height:1; color:#BFD8F5; background:transparent; border:0; border-radius:10px; cursor:pointer} .kick-nuevo-cerrar:hover{color:#fff; background:rgba(255,255,255,.12)} .kick-nuevo-cerrar:focus-visible{outline:3px solid var(--amarillo); outline-offset:-2px} /* Desde 620 px los dos entran a lo ancho: el aviso baja al renglón del botón flotante y se le queda a la izquierda, sin llegar nunca hasta él. */ @media (min-width: 620px){ .kick-nuevo{ bottom:calc(var(--rep) + env(safe-area-inset-bottom, 0px) + var(--fab-sep)); max-width:min(380px, calc(100vw - 2 * var(--borde) - 198px - 16px)); } } /* Con el diálogo de «Saludos y pedidos» abierto, el aviso sobra: el foco está adentro y la página de atrás es inerte. Misma regla que el botón flotante. */ body:has(.dlg-escribir[open]) .kick-nuevo{opacity:0; pointer-events:none} /* ---- el diálogo: hoja que sube en el teléfono, panel centrado en pantalla -- */ .dlg-escribir{ border:0; padding:0; background:transparent; color:#fff; width:100%; max-width:560px; max-height:var(--hoja); margin:auto auto 0; /* pegado abajo: ahí está el pulgar */ overscroll-behavior:contain; } .dlg-escribir::backdrop{background:rgba(1,14,40,.74)} .dlg-escribir-in{ max-height:var(--hoja); overflow-y:auto; -webkit-overflow-scrolling:touch; background:linear-gradient(180deg,#04306F,#01214E); border:1px solid rgba(255,255,255,.22); border-top:3px solid var(--amarillo); border-radius:22px 22px 0 0; padding:16px 16px calc(20px + env(safe-area-inset-bottom, 0px)); } .dlg-escribir-cab{display:flex; align-items:flex-start; gap:12px; margin-bottom:16px} .dlg-escribir-cab h2{font-size:clamp(20px,5.2vw,26px); margin:0; line-height:1.2} .dlg-escribir-lede{margin:6px 0 0; font-size:14px; color:var(--halo); line-height:1.45} .dlg-escribir-x{ flex:none; margin-left:auto; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; cursor:pointer; color:#fff; background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.34); } .dlg-escribir-x:hover{background:rgba(255,255,255,.22)} .dlg-escribir-x:focus-visible{outline:3px solid var(--amarillo); outline-offset:2px} /* Adentro del diálogo el formulario no lleva su propia caja: la caja es el diálogo. Y una sola columna, siempre: el panel mide 560 px como mucho. */ .dlg-escribir .formulario{background:none; border:0; border-radius:0; padding:0; margin:0} .dlg-escribir .campos{grid-template-columns:1fr} .dlg-escribir .form-pie{margin-top:20px} .dlg-escribir .form-pie .btn-play{width:100%} @media (min-width:760px){ .dlg-escribir{margin:auto} .dlg-escribir-in{border-radius:22px; border-top-width:3px; padding:24px} } /* ---- los tres motivos -------------------------------------------------- Son `` de verdad, tapados con .visualmente-oculto y NO con display:none — que los sacaría del orden de tabulación. Así el valor viaja en `asunto` sin JavaScript, las flechas navegan entre ellos y el lector de pantalla los anuncia como grupo. */ .motivos{border:0; padding:0; margin:0 0 18px; min-width:0} .motivos legend{padding:0; margin-bottom:10px; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--amarillo)} /* auto-fit y no un número: hoy son dos motivos y ayer eran tres. La fila se acomoda sola a los que haya, sin que agregar uno sea rehacer la regla. */ .motivos-fila{display:grid; grid-template-columns:repeat(auto-fit,minmax(84px,1fr)); gap:8px} .motivo{display:block; min-width:0} .motivo-cara{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; min-height:78px; padding:10px 5px; text-align:center; font-size:13px; font-weight:700; line-height:1.22; color:#fff; background:rgba(1,22,56,.72); border:1.5px solid rgba(255,255,255,.3); border-radius:14px; cursor:pointer; transition:background .12s ease; } .motivo-cara svg{flex:none} .motivo:hover .motivo-cara{background:rgba(255,255,255,.14)} .motivo input:checked + .motivo-cara{ background:var(--rosa); border-color:var(--amarillo); box-shadow:0 6px 18px rgba(255,60,119,.35)} .motivo input:focus-visible + .motivo-cara{outline:3px solid var(--amarillo); outline-offset:3px} /* ---- videos: la fachada ------------------------------------------------ Ver `parches/videos-portada.aplicar-estilo-css.py` para qué se reusa, por qué `.evento-img` no, y por qué los tres huecos miden 16/9. */ .vid{padding:0; overflow:hidden; display:flex; flex-direction:column} /* La caja es un