/* ══════════════════════════════════════════════════════════ BRUNIO WHO — Centro de transmisión Paleta y tipografías del LOOK & FEEL oficial del proyecto. ══════════════════════════════════════════════════════════ */ :root{ --black:#070808; /* fondo principal */ --black-soft:#0B0D0D; /* bloques / secciones */ --black-card:#111211; /* cards y paneles */ --black-warm:#151311; /* fondos con textura */ --white-main:#E9E5DE; /* títulos */ --white-soft:#CFCAC1; /* texto secundario */ --gray-muted:#8B8984; /* metadata */ --red-main:#D84032; /* botones y titulares */ /* El MISMO rojo, apenas más oscuro, para las superficies que llevan texto blanco encima. #D84032 con blanco da 4.47:1 y el mínimo de WCAG para texto es 4.5: pasaba raspando por abajo. #D23D2F da 4.72:1, con margen, y a simple vista es el mismo rojo —seis puntos de 255 en el canal rojo—. No se tocó --red-main porque también es el rojo de los brillos, del punto del logo y de los bordes: ahí oscurecerlo no arregla nada y apaga la marca. La regla es simple: si encima va texto blanco, --red-ink; si no, --red-main. */ --red-ink:#D23D2F; /* rojo con texto blanco encima (4.72:1) */ --red-dark:#A92820; /* hover / rojo apagado */ --red-bright:#F04A38; /* glow, señal, detalle */ --red-deep:#661B18; /* sombras rojas */ --border-dark:#292824; --border-light:#5C5850; --radio-gold:#9C7650; /* detalles de radio / vintage */ --radio-gold-dark:#5E452F; --cold:#7E93A2; /* identidad fría S01 */ --f-display:"Bebas Neue","Oswald",Impact,sans-serif; --f-ui:"Oswald",system-ui,sans-serif; --f-body:"Roboto Condensed",system-ui,sans-serif; --gut:clamp(20px,5vw,72px); /* Ritmo vertical de las secciones. Antes cada una traía el suyo —90, 81, 90, 90, 63— y encima medido en vh, así que el aire cambiaba al redimensionar la ventana a lo alto y dos secciones vecinas nunca coincidían. Un solo token, en vw, y todas respiran igual. --pad-sec-corta es para los bloques de poco contenido: el club tenía tanto fondo como el manifiesto y ahí sí sobraba negro. */ --pad-sec:clamp(52px,5.4vw,88px); --pad-sec-corta:clamp(30px,3.1vw,40px); --max:1520px; --ease:cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} /* Un ancla no puede caer debajo del encabezado fijo. La regla valía sólo para
, pero en las temporadas el id vive en el

—la sección se identifica con aria-labelledby— y #t-videos quedaba tapado. Vale para cualquier cosa con id a la que se llegue por ancla. 104 y no 88: la barra mide 88 y con eso el título quedaba pegado abajo del borde. Los 16 de más son el aire que lo hace legible. */ section[id],h2[id],h3[id],[id^="t-"]{scroll-margin-top:104px} body{ margin:0;background:var(--black);color:var(--white-main); font-family:var(--f-body);font-size:16.5px;line-height:1.6; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img,video,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} h1,h2,h3{margin:0;font-weight:400} p,figure,blockquote{margin:0} ul,ol{margin:0;padding:0;list-style:none} button,input{font:inherit;color:inherit} .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--red-ink);color:#fff;padding:12px 18px;font-family:var(--f-ui);font-size:12px} .skip:focus{left:12px;top:12px} :focus-visible{outline:2px solid var(--red-bright);outline-offset:3px} /* grano de película */ body::after{ content:"";position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.14; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); animation:grain 6s steps(6) infinite; } @keyframes grain{ 0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-4%)} 60%{transform:translate(-3%,-3%)}80%{transform:translate(4%,2%)}100%{transform:translate(0,0)} } /* ── átomos ───────────────────────────────────────────── */ .kicker{ font-family:var(--f-ui);font-weight:500;font-size:11.5px;letter-spacing:.26em; text-transform:uppercase;color:var(--gray-muted); } .kicker--signal{color:var(--red-bright)} .kicker--gold{color:var(--radio-gold)} .btn{ display:inline-flex;align-items:center;justify-content:center; font-family:var(--f-ui);font-weight:500;font-size:13px;letter-spacing:.19em;text-transform:uppercase; padding:16px 30px;border:1px solid transparent;white-space:nowrap;max-width:100%; transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease); } .btn--signal{background:var(--red-ink);color:#fff;border-color:var(--red-ink)} .btn--signal:hover{background:var(--red-dark);border-color:var(--red-dark)} .btn--ghost{border-color:rgba(233,229,222,.42)} .btn--ghost:hover{background:var(--white-main);color:var(--black);border-color:var(--white-main)} .btn--line{padding:16px 4px;border-bottom:1px solid rgba(233,229,222,.3);color:var(--white-soft)} .btn--line:hover{color:var(--white-main);border-bottom-color:var(--radio-gold)} /* el punto rojo que late: lo usan el receptor, la franja de temas y las tarjetas de temporada. El badge del hero que lo estrenó ya no está. */ .onair-tag__dot{ width:7px;height:7px;border-radius:50%;background:var(--red-bright);flex:none; box-shadow:0 0 0 0 rgba(240,74,56,.6);animation:pulse 2.4s var(--ease) infinite; } @keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(240,74,56,.55)} 70%{box-shadow:0 0 0 10px rgba(240,74,56,0)} 100%{box-shadow:0 0 0 0 rgba(240,74,56,0)} } /* encabezados de sección */ .shead{ max-width:var(--max);margin:0 auto clamp(38px,5vw,72px);padding:0 var(--gut); position:relative; } .shead__idx{ font-family:var(--f-ui);font-size:11.5px;letter-spacing:.3em;color:var(--radio-gold); margin-bottom:14px; } .shead__idx::after{content:"";display:inline-block;width:44px;height:1px;background:var(--border-dark);margin-left:14px;vertical-align:middle} .shead__title{ font-family:var(--f-display);text-transform:uppercase; font-size:clamp(46px,8.4vw,124px);line-height:.9;letter-spacing:.01em; } .shead__sub{margin-top:16px;color:var(--white-soft);font-size:clamp(15px,1.6vw,19px);max-width:38ch} .shead--tight{margin-bottom:clamp(28px,3.5vw,48px)} .shead--tight .shead__title{font-size:clamp(38px,5.6vw,88px)} /* ══════════════════ NAVEGACIÓN ══════════════════ */ .nav{position:fixed;inset:0 0 auto;z-index:80;transition:background .4s var(--ease)} .nav.is-stuck{background:rgba(7,8,8,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)} .nav__inner{ max-width:var(--max);margin:0 auto;padding:0 var(--gut); height:88px;display:flex;align-items:center;gap:clamp(18px,4vw,54px); } /* La marca de la barra es tipográfica y no el graffiti: en Bebas —la display de todo el sitio— deja de ser un objeto pegado arriba y pasa a ser parte del sistema. El graffiti sigue firmando donde firma: el pie, los smart-links y la página de la radio. baseline y no center: el punto es un elemento vacío, y alineado por la base se apoya sobre el renglón en vez de flotar a media altura. */ /* La marca de la barra es tipográfica y no el graffiti: en Bebas —la display de todo el sitio— deja de ser un objeto pegado arriba y pasa a ser parte del sistema. El graffiti sigue firmando donde firma: el pie, los smart-links y la página de la radio. El cuerpo va 12% abajo del que tenía: como firma del header no compite con el título del hero, que es quien manda en esa pantalla. */ .nav__logo{ display:inline-flex;align-items:baseline;margin-right:auto; font-family:var(--f-display);text-transform:uppercase; font-size:clamp(23px,2.8vw,35px);letter-spacing:.1em;line-height:1; color:var(--white-main);transition:color .3s var(--ease); } .nav__logo:hover{color:#fff} /* El punto medio delante del nombre, como una cabecera de diario. Es un carácter y no un círculo dibujado: se sienta solo a la altura del ojo de la mayúscula y acompaña el cuerpo del texto sin tener que ajustarlo en cada breakpoint. */ .nav__dot{ font-style:normal;color:var(--red-main);margin-right:.24em; transition:color .3s var(--ease); } .nav__logo:hover .nav__dot{color:var(--red-bright)} .nav__links{display:flex;gap:clamp(16px,2.4vw,34px)} .nav__links a{ font-family:var(--f-ui);font-size:12px;letter-spacing:.18em;text-transform:uppercase; color:var(--white-soft);position:relative;padding:4px 0;transition:color .3s var(--ease); } .nav__links a::after{ content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--radio-gold); transition:width .35s var(--ease); } .nav__links a:hover{color:var(--white-main)} .nav__links a:hover::after{width:100%} .nav__cta{ font-family:var(--f-ui);font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase; padding:11px 20px;border:1px solid rgba(233,229,222,.32);transition:.3s var(--ease); } .nav__cta:hover{background:var(--white-main);color:var(--black);border-color:var(--white-main)} .nav__burger{display:none;background:none;border:0;padding:10px;cursor:pointer} .nav__burger span{display:block;width:24px;height:1.5px;background:var(--white-main);transition:transform .35s var(--ease)} .nav__burger span+span{margin-top:6px} .nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)} .nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)} .menu{position:fixed;inset:0;z-index:79;background:var(--black);display:flex;flex-direction:column;justify-content:center;gap:8px;padding:100px var(--gut) 40px} .menu[hidden]{display:none} .menu__links{display:flex;flex-direction:column;gap:2px} .menu__links a{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(34px,10vw,58px);line-height:1.14} .menu__cta{margin-top:32px;align-self:flex-start;font-family:var(--f-ui);font-weight:500;font-size:13px;letter-spacing:.2em;text-transform:uppercase;padding:15px 26px;background:var(--red-ink);color:#fff} .menu__foot{margin-top:auto;font-family:var(--f-ui);font-size:11.5px;letter-spacing:.2em;color:var(--gray-muted);text-transform:uppercase} /* ══════════════════ MÓDULO 1 — HERO ══════════════════ */ .hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;isolation:isolate;padding:104px 0 40px} .hero__bg{ position:absolute;inset:0;z-index:-3;background:var(--black); background-size:cover; /* La imagen viene recentrada: la cabeza quedó al 50% del ancho, así que el fondo se centra y listo. Antes estaba al 60% y había que corregirlo con background-position y un espejo; las dos muletas se fueron. */ background-position:50% 50%; animation:heroIn 2.2s var(--ease) both; } @keyframes heroIn{from{transform:scale(1.05);opacity:0}to{transform:none;opacity:1}} .hero__bg:not(.has-media)::before{ content:"";position:absolute;inset:0; background: radial-gradient(120% 90% at 16% 88%, rgba(102,27,24,.5) 0%, rgba(102,27,24,0) 58%), linear-gradient(180deg,#101014 0%,#0A0A0C 45%,var(--black) 100%); } .hero__bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .hero__veil{ position:absolute;inset:0;z-index:-2; background: linear-gradient(180deg,rgba(7,8,8,.34) 0%,rgba(7,8,8,.04) 22%,rgba(7,8,8,.55) 80%,var(--black) 100%), linear-gradient(90deg,rgba(7,8,8,.5) 0%,rgba(7,8,8,.05) 40%,rgba(7,8,8,.5) 72%,rgba(7,8,8,.82) 100%); } /* grilla: mensaje + receptor arriba, franja de temas abajo */ .hero__grid{ max-width:var(--max);width:100%;margin:0 auto;padding:0 var(--gut); /* Dos columnas iguales. El hueco del MEDIO no es el gap: a 1471 el gap medía 26px y el hueco visible 154, porque el texto va centrado en su columna y el receptor en la suya, y las dos holguras se sumaban ahí. Como el aire total está fijo, sacárselo al medio es dárselo a los costados —o quitárselo al aire, ensanchando los módulos—. Se hizo lo segundo: el receptor ocupa su columna entera y el gap se parte al medio. El hueco baja de 154 a 69. Y de paso el receptor vuelve a terminar en la misma calle que la franja de temas, que cuelga de esta misma grilla y por eso no se puede encoger sin encogerla a ella también. */ display:grid;grid-template-columns:1fr 1fr; /* start y no stretch: el receptor mide lo que mide. Estirado a la altura de la columna del título le quedaba un hueco muerto abajo. */ /* start: el logotipo arranca a la misma altura que el receptor. Centrado contra una columna más alta caía 42px y el hero perdía el golpe de entrada. El receptor mide lo que mide (align-self). */ gap:clamp(10px,.9vw,14px);align-items:start; } /* La franja cuelga de la grilla del hero, así que el gap de la grilla le servía de separación. Ese gap es CHICO a propósito —cierra el hueco entre el texto y el receptor— y un solo valor vale para los dos ejes, así que al cerrarlo horizontalmente la franja quedó pegada a lo de arriba. El aire vertical se lo pone ella. */ .strip{grid-column:1/-1;margin-top:clamp(30px,3.6vw,60px)} /* panel base: caja oscura, borde fino, profundidad */ .panel{ position:relative; background:linear-gradient(180deg,rgba(17,18,17,.3),rgba(7,8,8,.5)); border:1px solid rgba(233,229,222,.11); backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px); box-shadow:inset 0 1px 0 rgba(233,229,222,.06),0 40px 90px -50px #000; } /* El mensaje no es una caja: vive sobre la imagen, alineado al gutter como el logo. La caja queda sólo para el receptor, que es el aparato. */ .hero__msg{padding-right:clamp(20px,3vw,52px)} /* La bajada que nombra la cosa. Ancho corto a propósito: leída en dos renglones tiene el peso de una bajada; a todo el ancho se lee como párrafo y compite con el logotipo. */ .hero__lead{ margin-top:clamp(16px,2vh,24px);max-width:min(100%,590px); font-family:var(--f-body);font-size:clamp(18.5px,1.62vw,23px); line-height:1.38;color:var(--white-main); } .panel--rx{ padding:clamp(18px,1.7vw,24px);display:flex;flex-direction:column; border-color:rgba(156,118,80,.34); background:linear-gradient(180deg,rgba(21,19,17,.72),rgba(7,8,8,.84)); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); } .hero__title{margin:clamp(12px,1.6vh,20px) 0 0;line-height:0} .hero__title img{ /* Con tope: llenando la columna entera el logotipo pasaba a ser todo el hero. Cortado a 620px deja respirar el bloque de texto de abajo y le devuelve al fondo el espacio de la derecha. */ width:min(100%,620px);height:auto; /* El PNG trae exactamente 3% de aire transparente a la izquierda, así que el logotipo quedaba sangrado y las tres líneas de abajo arrancaban antes que él. Se descuenta ese aire —en proporción, no en píxeles, para que valga en cualquier tamaño— y el trazo de la L y de la F cae en el mismo eje que la S de "Sintonizaste". */ margin-left:calc(min(100%,620px) * -.03); filter:drop-shadow(0 14px 34px rgba(0,0,0,.7)); } /* dónde escucharlo: fichas con la marca de cada plataforma */ .sprite{position:absolute;width:0;height:0;overflow:hidden} .hero__plat{margin-top:20px} .hero__plat-l{ font-family:var(--f-ui);font-size:10px;letter-spacing:.22em;text-transform:uppercase; color:var(--gray-muted);margin-bottom:10px; } .hero__plat-row{display:flex;flex-wrap:wrap;gap:8px} .plat{ display:inline-flex;align-items:center;gap:8px; padding:8px 13px;border:1px solid rgba(233,229,222,.16);background:rgba(7,8,8,.4); font-family:var(--f-ui);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--white-soft);cursor:pointer; transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease); } .plat:hover{color:var(--white-main);border-color:var(--border-light);background:rgba(233,229,222,.06)} .plat__i{width:15px;height:15px;flex:none;fill:currentColor} /* mientras no tenga URL se ve, pero no lleva a ningún lado */ .plat[data-sin-link]{cursor:default;opacity:.5} .plat[data-sin-link]:hover{color:var(--white-soft);border-color:rgba(233,229,222,.16);background:rgba(7,8,8,.4)} /* las menos usadas van sólo con el icono, sin nombre */ .plat--icon{padding:8px;width:33px;justify-content:center;gap:0} /* en px y no en ch, igual que el lema: 48ch daban 379 y la frase pide 449 para entrar en un renglón. Partida en dos se leía como párrafo suelto en vez de bajada. */ .hero__line{margin-top:9px;max-width:min(100%,590px);color:var(--gray-muted);font-size:clamp(16px,1.35vw,19.5px);line-height:1.45} /* la segunda gris va pegada a la primera: son dos partes de la misma descripción, no dos bloques */ .hero__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px} /* ── Las dos puertas del hero ──────────────────────────────────────── Enlaces subrayados y no cajas. Dos botones macizos arriba de todo rompían el tono del resto de la página, que resuelve TODAS sus acciones con texto y un filete —"Ver álbum", "Escuchar", "Álbum completo"—. Los recuadros se leían pegados de otro sitio. La jerarquía la sostiene el filete y no el relleno: el principal va en blanco pleno con dos píxeles de rojo abajo, el segundo en hueso apagado con la línea tenue de siempre. Se distinguen sin que ninguno grite. */ .hero .btn{font-size:13.5px;padding:0} .hero__actions{gap:clamp(22px,2.6vw,40px)} .hero .btn--line{padding:14px 2px 9px;gap:.55em} .hero__cta--main{ color:var(--white-main); border-bottom-width:2px;border-bottom-color:var(--red-main); } .hero__cta--main:hover{color:#fff;border-bottom-color:var(--red-bright)} .hero__cta:not(.hero__cta--main):hover{border-bottom-color:var(--radio-gold)} /* ── el bloque del hero, centrado ──────────────────────────────────── El logotipo y el texto comparten eje. Ojo con el logotipo: el PNG no es simétrico —trae 3% de aire transparente a la izquierda y 1% a la derecha—, así que centrando la CAJA el trazo queda casi un 1% corrido a la derecha. Se compensa moviendo la caja esa mitad exacta, calculada sobre el mismo ancho que usa la imagen para que valga en cualquier pantalla. Medido en el render: el centro del trazo cae sobre el centro del texto. */ .hero__msg{padding-right:0;text-align:center} .hero__lead,.hero__line{margin-left:auto;margin-right:auto} .hero__actions{justify-content:center} /* margin auto y no text-align: el reset del sitio pone display:block a todas las imágenes, así que centrar el texto del contenedor no movía el logotipo un píxel —quedaba pegado al margen izquierdo. */ .hero__title img{position:relative;left:calc(min(100%,620px) * -.0097);margin:0 auto} /* ── COMPARTIR LA TRANSMISIÓN ──────────────────────────────────────── /radio/ no es una sección del sitio: es la transmisión sola, para pasarle a alguien. Por eso no está en el menú y sí en los dos lugares donde la persona ya está escuchando —la cabecera del receptor y el dock— más el pie, que es donde se busca lo que uno ya sabe que existe. El botón nunca queda mudo: en el teléfono abre el menú nativo, en la computadora copia el link, y si el navegador no tiene ninguna de las dos muestra el link para copiarlo a mano. Lo resuelve js/compartir.js. */ /* Sirve para el de la home y para cualquier