, así que el club y el pie —que son de todo el sitio— quedan afuera y funcionan como descanso. ══════════════════════════════════════════════════════════ */ .inner--s01{ --black:#070707; --black-soft:#091008; /* negro con contaminación verde */ --black-card:#100A10; /* negro con contaminación magenta */ --black-warm:#100A10; --white-main:#ECEBE5; /* blanco sucio, no blanco */ --white-soft:#C9C7C0; /* Un punto más claro que el gris del sitio: el fondo de la S01 ya no es negro plano —el degradé verde/magenta lo levanta— y el #807E78 de antes caía a 3.97:1 sobre el verde. Con este da 4.85. */ --gray-muted:#8F8D87; --border-dark:#1E1A1E; --border-light:#43404A; --v:#7CFF00; /* verde ácido */ --m:#E000FF; /* magenta eléctrico */ /* El token del dato chico —rótulos, fechas, filetes— es el verde. */ --radio-gold:#7CFF00; --radio-gold-dark:#2C5A00; /* El token de la acción es el magenta. */ --red-main:#E000FF; --red-dark:#C400E0; --red-bright:#7CFF00; } /* ── LA SEÑAL SUCIA ────────────────────────────────────────────────── El fondo no es un degradado: es una transmisión con problemas. Tres capas encima del negro, todas quietas y todas muy por debajo del umbral de "efecto": ::before la contaminación de color —magenta arriba a la derecha, verde abajo a la izquierda— y las líneas horizontales del CRT, de tres píxeles, casi invisibles; ::after el grano analógico, con la misma técnica de feTurbulence que usa el resto del sitio, así que no hay archivo que subir y se ve nítido en cualquier pantalla. Van en

y no en para que el club y el pie sigan limpios. pointer-events:none: se ve, no se toca. */ /* ABSOLUTAS Y NO FIJAS. Con position:fixed las dos capas cubrían la ventana entera, y como

es position:relative su contexto de apilado entero se pinta DESPUÉS del pie, que es estático: el negro opaco de la capa le pasaba por encima y el pie desaparecía. Absolutas terminan donde termina

y el club y el pie quedan intactos. */ .inner--s01{position:relative;background:var(--black)} .inner--s01.inner__main::before{ z-index:-2; /* La contaminación entra por los COSTADOS: magenta desde el borde izquierdo, verde desde el derecho, las dos apagándose antes de llegar al centro para que la columna de lectura quede negra y el texto no compita con nada. */ background: radial-gradient(52% 66% at 0% 34%, rgba(224,0,255,.22) 0%, rgba(224,0,255,0) 72%), radial-gradient(52% 66% at 100% 66%, rgba(124,255,0,.19) 0%, rgba(124,255,0,0) 72%), radial-gradient(44% 44% at 0% 92%, rgba(224,0,255,.12) 0%, rgba(224,0,255,0) 74%), radial-gradient(44% 44% at 100% 8%, rgba(124,255,0,.10) 0%, rgba(124,255,0,0) 74%), repeating-linear-gradient(180deg, rgba(0,0,0,.34) 0 1px, rgba(0,0,0,0) 1px 3px), var(--black); } .inner--s01::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.16; 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"); } /* ── EL HERO ───────────────────────────────────────────────────────── Más imagen y menos texto. El set de la sitcom ocupa la pantalla —jukebox, grafiti, muñecos, los dos personajes en el sillón— y sobre él van el logotipo, el número de temporada y la frase. En tres segundos: esto es una temporada, es un show, es raro, tiene gente adentro. */ .inner--s01 .temp__fondo{ height:clamp(560px,82vh,940px); /* Espejada y muy bajada: la foto no es el fondo, es una marca de agua. El translateX(-50%) es el que la saca a todo el ancho de la pantalla, así que el scaleX se COMPONE con él y no lo reemplaza —solo, la mandaba fuera de cuadro—. */ opacity:.15; transform:translateX(-50%) scaleX(-1); background-position:50% 42%; -webkit-mask-image:linear-gradient(180deg,#000 52%,transparent 100%); mask-image:linear-gradient(180deg,#000 52%,transparent 100%); } /* El velo: la foto es un set lleno de cosas y el texto tiene que ganar. Más oscuro abajo, donde va la sinopsis. */ .inner--s01 .temp__fondo::after{ background:linear-gradient(180deg, rgba(7,7,7,.42) 0%, rgba(7,7,7,.30) 26%, rgba(7,7,7,.72) 72%, rgba(7,7,7,.94) 100%); } .inner--s01 .temp__title--logo img{ filter:drop-shadow(0 6px 0 rgba(224,0,255,.28)) drop-shadow(0 18px 40px rgba(0,0,0,.85)); } /* La línea de datos, como el rótulo de un canal: verde, chica, con la temporada destacada en una plaquita. */ .inner--s01 .temp__meta{color:var(--v);opacity:.9} /* La frase de la temporada es lo segundo que se lee, así que pesa: en matriz de puntos, grande, blanca, con el filete magenta abajo. BigDots no tiene minúsculas de caja baja reales para este uso, así que va en versales, que es como está escrita. */ .inner--s01 .temp__lema{ font-family:"BigDots",var(--f-display),sans-serif; color:var(--white-main); font-size:clamp(19px,2.3vw,32px);letter-spacing:.06em;line-height:1.14; } .inner--s01 .temp__syn{color:var(--white-soft)} /* Los tags, como etiquetas de casete */ .inner--s01 .temp__tags li{ border-color:rgba(124,255,0,.34);color:var(--v); background:rgba(124,255,0,.05); } /* ── OBRAS CENTRALES ──────────────────────────────────────────────── El álbum es verde y la película magenta: se distinguen antes de leer el rótulo. Y los objetos SOBRESALEN de su caja —el casete y el VHS se suben unos píxeles por encima del borde de arriba—, que es lo que saca a la sección de la grilla perfecta y la vuelve gráfica. */ /* MISMA LÓGICA QUE LA S02: tarjeta oscura, filete fino, y el color sólo en los acentos. Lo único que cambia es CUÁL color: donde la S02 usa cobre en las dos, la S01 usa verde en el álbum y magenta en la película. El lado dice el color y el color dice el lado. Los bloques macizos de antes leían fuerte pero se comían todo: el texto tenía que irse a negro para poder leerse, las tapas quedaban flotando sobre plano y la sección no se parecía a la misma sección de la otra temporada. */ .inner--s01 .cierre__obra{background:var(--black-card);overflow:visible} /* Cada tarjeta lleva el color de su lado en el fondo, no sólo en el borde: verde el disco, magenta la película. Muy bajado —el texto sigue leyéndose sobre negro— pero lo suficiente para que las dos dejen de ser dos cajas negras iguales. El tinte entra por el borde de afuera y se apaga hacia el centro, como el fondo de la página. */ .inner--s01 .cierre__obra--disco{ border-color:rgba(124,255,0,.45); background: linear-gradient(100deg, rgba(124,255,0,.14) 0%, rgba(124,255,0,.055) 52%, rgba(124,255,0,.025) 100%), var(--black-card); } .inner--s01 .cierre__obra--film { border-color:rgba(224,0,255,.45); background: linear-gradient(260deg, rgba(224,0,255,.15) 0%, rgba(224,0,255,.06) 52%, rgba(224,0,255,.028) 100%), var(--black-card); } .inner--s01 .cierre__obra--disco .rel__tipo, .inner--s01 .cierre__obra--disco .rel__meta{color:var(--v)} .inner--s01 .cierre__obra--film .rel__tipo{color:var(--m)} /* los botones, cada uno del color de su lado. Texto negro: sobre verde el blanco da 1.09:1 y sobre magenta 3.13:1, los dos por debajo del mínimo de 4.5; en negro son 15.5 y 5.38. */ .inner--s01 .cierre__obra--disco .btn--signal{background:var(--v);border-color:var(--v);color:#070707} .inner--s01 .cierre__obra--disco .btn--signal:hover{background:#8FFF26;border-color:#8FFF26} .inner--s01 .cierre__obra--film .btn--signal{background:var(--m);border-color:var(--m);color:#070707} .inner--s01 .cierre__obra--film .btn--signal:hover{background:#EE33FF;border-color:#EE33FF} /* el secundario, subrayado, toma el color de su lado al pasar */ .inner--s01 .cierre__obra--disco .btn--line:hover{color:var(--v);border-bottom-color:var(--v)} .inner--s01 .cierre__obra--film .btn--line:hover{color:var(--m);border-bottom-color:var(--m)} .inner--s01 .cierre__art--objeto, .inner--s01 .cierre__marco--vhs{ margin-top:0; filter:drop-shadow(0 14px 28px rgba(0,0,0,.6)); } .inner--s01 .cierre__obra{padding:clamp(24px,2.8vw,34px)} /* ── EN PANTALLA ──────────────────────────────────────────────────── Mismo diseño que la S02 —miniatura y texto debajo, sin recuadro ni fondo alrededor— y lo único que cambia es el color: donde la S02 usa cobre, la S01 usa verde. El REPRODUCIR se queda GRIS, igual que en la S02: es la etiqueta de una acción que ya se entiende —toda la tarjeta es clickeable y tiene el play encima—, y en magenta competía con el título en una fila de cuatro. El marco de CRT y las rayas del tubo se sacaron: encerraban cada video en una caja que la S02 no tiene, y las dos secciones tienen que leerse como la misma sección con distinta paleta. */ .inner--s01 .latest__row--temp{gap:clamp(12px,1.3vw,18px)} .inner--s01 .lanz__card:hover .lanz__media{border-color:var(--m)} .inner--s01 .lanz__card:hover .lanz__t{color:var(--white-main)} /* ── PERSONAJES ───────────────────────────────────────────────────── El elenco de la sitcom. La FOTO manda: la ficha es negra, el nombre blanco y el lema fluorescente, y no hay un color por personaje porque los personajes ya vienen coloreados. El filete de arriba arranca verde y pasa a magenta al pasar el mouse: un solo gesto para los seis. */ /* El rótulo de esta sección va en magenta y no en verde: el elenco es lo más "show" de la página y el magenta es el color del espectáculo. Los otros rótulos del sitio siguen en verde. */ .inner--s01 #t-personajes small{color:var(--m)} .inner--s01 .elenco li{ background:var(--black-card);border-color:var(--border-dark); position:relative; } /* Las fichas no reaccionan al mouse: el riel se arrastra, y una ficha que se levanta mientras la estás corriendo pelea con el gesto. */ /* Cada personaje tiene su color, el de su propia identidad, y va en la misma matriz de puntos que la frase del hero. No es la interfaz la que cambia de color —eso sigue siendo verde y magenta— sino el nombre, que es parte del personaje. El gancho lo pone el generador a partir del nombre; uno nuevo entra en blanco hasta que se le asigne el suyo. */ .inner--s01 .elenco b{ font-family:"BigDots",var(--f-display),sans-serif; letter-spacing:.05em;line-height:1.2; color:var(--white-main); } .inner--s01 .elenco li[data-perso="king"] b{color:#7CCE21} .inner--s01 .elenco li[data-perso="night"] b{color:#C50217} .inner--s01 .elenco li[data-perso="umxn"] b{color:#F2671E} .inner--s01 .elenco li[data-perso="cash"] b{color:#F5A621} .inner--s01 .elenco li[data-perso="sexsy"] b{color:#468FE2} .inner--s01 .elenco li[data-perso="beat"] b{color:#ED66FF} /* En la ficha, el ÚNICO color es el nombre. El lema y la descripción van en blanco: con el lema también teñido, cada tarjeta tenía dos colores peleándose y el nombre dejaba de ser lo que destaca. */ .inner--s01 .elenco .perso__l{color:var(--white-soft)} .inner--s01 .elenco .perso__d{color:var(--white-soft)} .inner--s01 .perso__f{filter:saturate(1.08) contrast(1.04)} @media (prefers-reduced-motion:reduce){ .inner--s01 .elenco li:hover, .inner--s01 .lanz__card:hover{transform:none} } /* ── EL CAMINO ────────────────────────────────────────────────────── Guía de programación, no planilla. Cada fila es un episodio: la fecha en verde a la izquierda como el horario de un canal, el título grande en blanco, los datos en gris, y ESCUCHAR en magenta cuando lo apuntás. El bloque deja de estar apagado —esto es contenido, no un archivo muerto— y las filas se prenden al pasar. */ .inner--s01 .temp__sec--archivo{opacity:1;border-top-color:rgba(124,255,0,.22)} .inner--s01 .relista li{ border-top-color:var(--border-dark); transition:background .2s var(--ease); } .inner--s01 .relista li:hover{background:rgba(124,255,0,.045)} .inner--s01 .relista--disco .relista__n{color:var(--v)} .inner--s01 .relista__t{color:var(--white-main)} .inner--s01 .relista--disco .relista__m{color:var(--gray-muted)} .inner--s01 .relista--disco .relista__m a{color:var(--white-soft);border-bottom-color:var(--border-light)} .inner--s01 .relista--disco .relista__m a:hover{color:var(--m);border-bottom-color:var(--m)} .inner--s01 .tk-a--go{color:var(--white-soft);border-color:var(--border-light)} .inner--s01 .tk-a--go:hover{background:var(--m);border-color:var(--m);color:#070707} /* la última línea, el álbum, en verde: es el destino */ .inner--s01 .relista--disco .relista__fin{border-top-color:var(--v)} .inner--s01 .relista--disco .relista__fin .relista__m{color:var(--v)} .inner--s01 .relista--disco .relista__fin .relista__n{color:var(--white-soft)} /* La atmósfera detrás del hero de la temporada. Sale del ancho de la caja —que está limitada a --max y centrada— con dos vw negativos, así llega a los dos bordes de la pantalla como el fondo de la home. Se apaga hacia abajo con una máscara: abajo del bloque el texto pide negro. */ .temp__fondo{ position:absolute;top:0;left:50%;width:100vw;transform:translateX(-50%); height:clamp(420px,58vh,760px);z-index:-1; background-size:cover;background-position:50% 42%;background-repeat:no-repeat; -webkit-mask-image:linear-gradient(180deg,#000 42%,transparent 100%); mask-image:linear-gradient(180deg,#000 42%,transparent 100%); } .temp__fondo.is-empty{display:none} /* el velo: la foto no puede comerse la miga de pan ni el logotipo */ .temp__fondo::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(7,8,8,.62) 0%,rgba(7,8,8,.28) 38%,rgba(7,8,8,.66) 100%); } .inner__title{ font-family:var(--f-display); text-transform:uppercase;line-height:.88;letter-spacing:-.01em; font-size:clamp(46px,10vw,150px);color:var(--white-main); } .inner__line{ margin-top:26px;max-width:52ch;color:var(--white-soft); font-size:clamp(15px,1.6vw,19px); } .inner__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px} .inner__note{ margin-top:46px;font-family:var(--f-ui);font-size:11px;letter-spacing:.2em; text-transform:uppercase;color:var(--gray-muted); } .inner__block{margin-top:clamp(48px,7vh,80px);padding-top:30px;border-top:1px solid var(--border-dark)} .inner__block h2{ font-family:var(--f-display);text-transform:uppercase;color:var(--white-main); font-size:clamp(24px,3.2vw,44px);line-height:1;margin-bottom:16px; } .inner__block p{color:var(--white-soft);max-width:60ch} .inner__block p + p{margin-top:14px} a.u{border-bottom:1px solid rgba(233,229,222,.35);transition:color .25s var(--ease),border-color .25s var(--ease)} /* Listas de texto corrido, para las páginas que explican algo —privacidad, contacto—. Mismo ancho de lectura que los párrafos de al lado. */ .lista-simple{list-style:none;margin:14px 0 0;padding:0;max-width:60ch;color:var(--white-soft)} .lista-simple li{position:relative;padding-left:20px;margin-top:11px;line-height:1.65} .lista-simple li::before{ content:"";position:absolute;left:2px;top:.62em; width:6px;height:1px;background:var(--radio-gold); } .lista-simple code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em; color:var(--white-main);background:var(--black-card); border:1px solid var(--border-dark);border-radius:2px;padding:1px 5px; } a.u:hover{border-color:var(--radio-gold);color:var(--white-main)} /* ══════════════════════════════════════════════════════════ LANDINGS DE CAPTACIÓN Estructura pensada para alguien que llega de Google buscando un sonido, no buscando a Brunio Who: primero se le responde lo que preguntó y recién después aparece la música. ══════════════════════════════════════════════════════════ */ .land{padding-top:clamp(120px,18vh,190px)} /* ── portada ── */ .land__head{position:relative;max-width:74ch} .land__title{ font-family:var(--f-display);text-transform:uppercase;color:var(--white-main); font-size:clamp(40px,7.6vw,104px);line-height:.9;letter-spacing:-.01em; } .land__sub{ margin-top:22px;max-width:56ch;color:var(--white-soft); font-size:clamp(16px,1.7vw,21px);line-height:1.55; } .land__by{ margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px; font-family:var(--f-ui);font-size:11px;letter-spacing:.2em;text-transform:uppercase; color:var(--gray-muted); } .land__by b{color:var(--white-soft);font-weight:500} /* ── índice de la nota ── */ .land__toc{ margin-top:44px;padding:22px 24px;border:1px solid var(--border-dark); background:var(--black-card); } .land__toc p{ font-family:var(--f-ui);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase; color:var(--radio-gold);margin-bottom:14px; } .land__toc ol{list-style:none;display:grid;gap:9px} .land__toc a{ color:var(--white-soft);font-size:15px; border-bottom:1px solid transparent; } .land__toc a:hover{color:var(--white-main);border-bottom-color:var(--radio-gold)} /* ── LAS IMÁGENES DE LAS LANDINGS ──────────────────────────────────── Una landing SEO sin imágenes se lee como un artículo hecho para un buscador. Con ellas entra en el mismo universo que el resto del sitio. El HERO va a todo el ancho de la columna de lectura, sin lazy y con width/height reales: es lo que mide el LCP y lo que haría saltar la página si el navegador no supiera cuánto va a ocupar. Las de adentro del texto van EN EL MEDIO de las secciones, cortando bloques largos, y todas con lazy. */ .land__hero{ margin:clamp(30px,4vh,52px) 0 0; border:1px solid var(--border-dark);background:var(--black-card); overflow:hidden; } /* Con alto libre el hero medía 746px a 1471 —casi una pantalla— y la imagen, estirada a 1327 desde 1600, se veía blanda. Acotado se ve nítido y deja lugar para que empiece el texto. El alto fijo en CSS además vuelve imposible el salto de layout. */ .land__hero img{ width:100%;display:block; height:clamp(240px,42vh,460px);object-fit:cover;object-position:50% 46%; } @media (max-width:620px){ .land__hero img{height:clamp(200px,34vh,300px)} } .land__fig{margin:clamp(28px,4vh,46px) 0} .land__fig img{ width:100%;height:auto;display:block; border:1px solid var(--border-dark);background:var(--black-card); } .land__fig a{display:block;transition:opacity .3s var(--ease)} .land__fig a:hover{opacity:.86} .land__fig figcaption{ margin-top:10px;font-family:var(--f-ui);font-size:11.5px;letter-spacing:.06em; color:var(--gray-muted);line-height:1.5; } /* La pieza del proyecto —una tapa, un póster, un personaje— no se estira al ancho del texto: es un objeto y se lee como tal, con la bajada al lado en pantalla ancha. */ .land__fig--pieza{ display:grid;grid-template-columns:minmax(0,clamp(180px,34%,290px)) minmax(0,1fr); gap:clamp(16px,2.2vw,28px);align-items:center; } .land__fig--pieza figcaption{margin-top:0} @media (max-width:620px){ .land__fig--pieza{grid-template-columns:minmax(0,1fr);gap:12px} .land__fig--pieza figcaption{margin-top:2px} } /* La de apoyo es vertical: se limita para que en el teléfono no ocupe dos pantallas enteras. */ .land__fig--ancha img{max-height:min(78vh,620px);object-fit:cover;object-position:50% 32%} /* ── cuerpo del texto ── */ .land__body{margin-top:clamp(52px,8vh,88px);max-width:68ch} .land__body h2{ font-family:var(--f-display);text-transform:uppercase;color:var(--white-main); font-size:clamp(26px,4vw,50px);line-height:1; margin:clamp(46px,6vh,72px) 0 18px;scroll-margin-top:110px; } .land__body h2:first-child{margin-top:0} .land__body h3{ font-family:var(--f-ui);font-weight:500;text-transform:uppercase;letter-spacing:.12em; font-size:15px;color:var(--radio-gold);margin:34px 0 10px; } .land__body p{color:var(--white-soft);margin-bottom:15px;line-height:1.68} .land__body strong{color:var(--white-main);font-weight:700} .land__body ul{margin:0 0 18px;padding-left:0;list-style:none;display:grid;gap:11px} .land__body ul li{ position:relative;padding-left:22px;color:var(--white-soft);line-height:1.6; } .land__body ul li::before{ content:"";position:absolute;left:2px;top:.62em; width:5px;height:5px;background:var(--radio-gold);transform:rotate(45deg); } .land__body a{color:var(--white-main);border-bottom:1px solid rgba(233,229,222,.32)} .land__body a:hover{border-bottom-color:var(--radio-gold)} /* frase destacada, para cortar el bloque de texto */ .land__pull{ margin:clamp(38px,5vh,58px) 0;padding:26px 0 26px 26px; border-left:2px solid var(--radio-gold); font-family:var(--f-display);text-transform:uppercase; font-size:clamp(21px,2.9vw,34px);line-height:1.08;color:var(--white-main); } /* ── la música, después del texto ── */ .land__music{ margin-top:clamp(60px,9vh,110px);padding:clamp(28px,4vw,46px); border:1px solid var(--border-dark);background:var(--black-card); position:relative;overflow:hidden; } .land__music::before{ content:"";position:absolute;inset:0;z-index:0;opacity:.16; background:url("../assets/img/bg-s02.jpg") 50% 40%/cover no-repeat; } .land__music > *{position:relative;z-index:1} .land__music h2{ font-family:var(--f-display);text-transform:uppercase;color:var(--white-main); font-size:clamp(26px,4vw,46px);line-height:1; } .land__music > p{margin-top:12px;color:var(--white-soft);max-width:52ch} .land__tracks{margin-top:30px;display:grid;gap:0} .land__tk{ display:flex;align-items:center;gap:16px; padding:15px 0;border-top:1px solid var(--border-dark); } .land__tk:last-child{border-bottom:1px solid var(--border-dark)} .land__tk-f{ flex:none;width:52px;font-family:var(--f-ui);font-size:11.5px;letter-spacing:.1em; color:var(--radio-gold); } .land__tk-n{ flex:1;min-width:0;font-family:var(--f-display);text-transform:uppercase; font-size:clamp(18px,2vw,25px);line-height:1.14;color:var(--white-main); } .land__tk-a{flex:none;display:flex;gap:6px} .land__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;align-items:center} /* ── enlaces relacionados al pie de la nota ── */ .land__next{margin-top:clamp(52px,8vh,90px);padding-top:28px;border-top:1px solid var(--border-dark)} .land__next p{ font-family:var(--f-ui);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase; color:var(--radio-gold);margin-bottom:16px; } .land__next ul{list-style:none;display:grid;gap:10px} .land__next a{color:var(--white-soft);border-bottom:1px solid transparent} .land__next a:hover{color:var(--white-main);border-bottom-color:var(--radio-gold)} /* ══════════════════════════════════════════════════════════ ESCUCHAR — el hub de plataformas Es la URL que va en la bio, en las descripciones de YouTube y en cualquier lugar donde haya un solo link disponible. ══════════════════════════════════════════════════════════ */ .hub{max-width:640px;padding-top:clamp(110px,16vh,170px);text-align:center} .hub__art{ width:min(280px,64vw);aspect-ratio:1;margin:0 auto; background:var(--black-card) 50% 50%/cover no-repeat; border:1px solid var(--border-dark); } .hub__title{ font-family:var(--f-display);text-transform:uppercase;color:var(--white-main); font-size:clamp(34px,6vw,64px);line-height:.94;margin-top:26px; } .hub__meta{ margin-top:12px;font-family:var(--f-ui);font-size:11px;letter-spacing:.24em; text-transform:uppercase;color:var(--radio-gold); } .hub__list{list-style:none;margin-top:38px;display:grid;gap:10px;text-align:left} .hub__row{ display:flex;align-items:center;gap:16px; padding:16px 20px;border:1px solid var(--border-dark);background:var(--black-card); font-family:var(--f-ui);font-weight:500;font-size:13px;letter-spacing:.14em; text-transform:uppercase;color:var(--white-main); transition:border-color .25s var(--ease),background .25s var(--ease); } .hub__row:hover{border-color:var(--border-light);background:rgba(233,229,222,.05)} .hub__row svg{width:19px;height:19px;flex:none;fill:currentColor} .hub__row b{flex:1;font-weight:500} .hub__row i{ font-style:normal;font-size:10.5px;letter-spacing:.2em;color:var(--gray-muted); } .hub__row--main{border-color:var(--red-main)} .hub__row--main:hover{background:var(--red-ink);border-color:var(--red-ink);color:#fff} .hub__row[aria-disabled="true"]{opacity:.4;cursor:default} .hub__row[aria-disabled="true"]:hover{border-color:var(--border-dark);background:var(--black-card)} .hub__foot{ margin-top:34px;font-family:var(--f-ui);font-size:11px;letter-spacing:.18em; text-transform:uppercase;color:var(--gray-muted); } .hub__foot a{color:var(--white-soft);border-bottom:1px solid rgba(233,229,222,.3)} .hub__foot a:hover{color:var(--white-main);border-bottom-color:var(--radio-gold)} @media (max-width:640px){ .land__toc{padding:18px 18px} .land__tk{flex-wrap:wrap;gap:8px 12px} .land__tk-n{flex:1 1 100%;order:2} .land__tk-a{order:3;margin-left:auto} .land__tk-f{order:1} } /* ══════════════════════════════════════════════════════════ PÁGINA DE TEMPORADA La ficha completa de una temporada: portada, sinopsis, los temas, los videos y por dónde escucharla. ══════════════════════════════════════════════════════════ */ .temp{padding-top:clamp(118px,17vh,180px)} .temp__top{ /* El póster pide ancho: es la pieza gráfica de la temporada y a 400px terminaba bastante antes que la sinopsis, con un hueco negro al lado del último párrafo. */ --poster:clamp(280px,34vw,510px); display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--poster)); gap:clamp(26px,4vw,54px);align-items:start; } /* El póster va a la derecha y el texto a la izquierda: se lee primero de qué va la temporada y después se mira la pieza. En el HTML el arte sigue primero —lo pide el orden de lectura del generador—, así que el cambio de lado se hace acá y no tocando el marcado. */ .temp__art{grid-column:2;grid-row:1} .temp__top > div:not(.temp__art){grid-column:1;grid-row:1} /* El póster llega hasta abajo de la columna de texto. 4:5 —igual que las tarjetas de la home— es el formato en el que están diseñados, y es su ALTO MÍNIMO: lo pone el ::before, que es lo que la grilla mide para armar la fila. El póster después se estira a lo que mida la fila. Así, si la sinopsis es larga acompaña hasta el final en vez de cortarse a mitad de camino, y si es corta manda el póster y conserva su forma exacta. El recorte, cuando estira, sale parejo de los dos lados: el arte está centrado. */ .temp__art{ align-self:stretch; /* Hasta acá estira y no más. Sin tope, en una pantalla de 1100 la columna de texto se pone angosta y altísima y el póster la seguía: quedaba una tira de 341x690 que le comía el logo por los costados. El estirón es de cierre, no de relleno: el ancho de la columna ya está elegido para que la forma 4:5 dé casi exactamente el alto del texto, y esto cubre los pocos píxeles que sobran. Por eso el tope es apenas 1.32 —un 5% de recorte, repartido entre los dos lados—: a 11% el arte perdía el logo por la derecha y la línea de abajo se cortaba. Se calcula sobre el MISMO ancho que la columna, así que los dos valores no pueden desincronizarse. */ max-height:calc(var(--poster) * 1.32); background:var(--black-card) 50% 50%/cover no-repeat; border:1px solid var(--border-dark); } .temp__art::before{content:"";display:block;aspect-ratio:4/5} /* La tapa de un álbum es cuadrada, no un póster 4:5. Metida en la caja de la temporada perdía un 20% por los costados: en La Frecuencia se comía el logo y la firma de la derecha. Acá manda su forma y no se estira para igualar nada: una tapa recortada deja de ser la tapa. */ .temp__art--tapa{align-self:start;max-height:none} .temp__art--tapa::before{aspect-ratio:1/1} /* El lema: la bajada del título. Va arriba de la sinopsis, en la voz de la temporada —corto y en mayúsculas— para que se lea como una firma y no como un párrafo más. */ .temp__lema{ margin-top:14px;font-family:var(--f-display);text-transform:uppercase; font-size:clamp(16px,1.7vw,22px);letter-spacing:.09em;line-height:1.25; color:var(--radio-gold); } /* "En emisión" cierra la línea de datos. En rojo —el mismo del "On air" del receptor— porque es lo único de esa línea que es un estado y no un dato fijo. El rótulo suelto que había arriba del título ya no existe: ocupaba un renglón para decir una palabra. */ .temp__meta-on{font-weight:inherit;color:var(--red-bright)} .temp__title{ margin-top:12px;font-family:var(--f-display);text-transform:uppercase; color:var(--white-main);font-size:clamp(44px,8vw,112px);line-height:.88; letter-spacing:-.01em; } .temp__meta{ margin-top:14px;font-family:var(--f-ui);font-size:11.5px;letter-spacing:.2em; text-transform:uppercase;color:var(--gray-muted); } /* La sinopsis usa el ancho que hay. 56ch dejaba media pantalla vacía a la derecha en escritorio; 78 es el techo de una línea que todavía se lee cómoda. Sigue siendo un máximo: en pantalla angosta manda el ancho de la columna. */ /* sin tope de medida: la columna ya está limitada por el póster que tiene al lado, así que 78ch la cortaba antes de tiempo y dejaba una franja muerta entre el texto y la foto. */ .temp__syn{margin-top:24px;color:var(--white-soft);font-size:clamp(15px,1.6vw,18px);line-height:1.65} /* La frase que cierra la sinopsis, destacada. Peso 500 y no 700: Roboto Condensed trae 300, 400 y 500 cargados, así que 500 es un peso real y no una negrita sintética, que en condensada se empasta. Sube además al blanco de los títulos para separarse del cuerpo. */ .temp__syn--cierre{font-weight:500;color:var(--white-main)} .temp__tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:24px} .temp__tags li{ padding:8px 14px;border:1px solid var(--border-dark); font-family:var(--f-ui);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase; color:var(--white-soft); } .temp__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;align-items:center} /* Título a la izquierda y la acción de la sección arriba a la derecha, centrada con él. Abajo del todo quedaba perdida después de la grilla. */ .temp__cab{ display:flex;align-items:center;justify-content:space-between; gap:20px;flex-wrap:wrap;margin-bottom:22px; } .temp__cab .temp__h{margin-bottom:0} .temp__cab-a{flex:none} /* La historia y el universo viven en el hero, abajo de la sinopsis. Se separan por tono y no por título: un poco más apagadas y con una línea fina arriba de la primera. Con dos o tres párrafos, darles una sección propia era poner un titular enorme arriba de casi nada. */ .temp__syn--mundo{color:var(--gray-muted)} /* La sinopsis como bajada: cuando es lo único que explica de qué va la temporada, el cuerpo de 18 px la dejaba como una nota al pie del título. */ .temp__syn--lead{font-size:clamp(19px,2.1vw,26px);line-height:1.4;max-width:34ch;color:var(--white-soft)} /* Uno abajo del otro, como en la ficha del álbum: son dos formas distintas de ver lo mismo, no una principal y una secundaria apretada al lado. */ .cierre__btns--apilados{flex-direction:column;align-items:flex-start;gap:14px} /* El título del hero cuando la temporada tiene logotipo. Se limita por ancho y no por alto: los dos logos tienen proporciones muy distintas —el de Brunio's Mind es una tira, el de La Frecuencia casi un cuadrado— y limitando el ancho los dos ocupan la misma columna. */ .temp__title--logo{line-height:0} .temp__title--logo img{ display:block;width:100%;max-width:min(560px,100%);height:auto; } /* ── tratamiento de archivo ── El camino hasta el álbum va al final de la página y en voz más baja: es material histórico, no la puerta de entrada. El álbum que cierra la temporada ya la concentra arriba, así que los singles no compiten por la atención — pero siguen estando enteros, que para eso es un archivo. Se baja el volumen, no se esconde nada: título más chico, todo un poco apagado, y una línea arriba que lo separa del resto de la página. Al pasar el mouse recupera el color: si viniste hasta acá, es porque lo estabas buscando. */ .temp__sec--archivo{ border-top:1px solid var(--border-dark); padding-top:clamp(30px,4vh,54px); opacity:.72;transition:opacity .35s var(--ease); } .temp__sec--archivo:hover, .temp__sec--archivo:focus-within{opacity:1} .temp__sec--archivo .temp__h{font-size:clamp(20px,2.4vw,30px)} .temp__sec--archivo .disco__tapa{max-width:170px} @media (prefers-reduced-motion:reduce){ .temp__sec--archivo{transition:none} } .temp__sec{margin-top:clamp(56px,8vh,96px)} .temp__h{ font-family:var(--f-display);text-transform:uppercase;color:var(--white-main); font-size:clamp(26px,4vw,48px);line-height:1;margin-bottom:22px; } .temp__h small{ display:block;font-family:var(--f-ui);font-size:11px;letter-spacing:.24em; color:var(--radio-gold);margin-bottom:8px; } /* videos */ .temp__vids{list-style:none;display:grid;gap:clamp(14px,1.6vw,22px); grid-template-columns:repeat(auto-fill,minmax(260px,1fr));} .temp__vid{display:block;position:relative} .temp__vid-m{ display:block;aspect-ratio:16/9;position:relative;overflow:hidden; background:var(--black-card) 50% 50%/cover no-repeat;border:1px solid var(--border-dark); } .temp__vid-m::after{ content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:44px;height:44px;border-radius:50%;border:1px solid rgba(233,229,222,.5); background:rgba(7,8,8,.5); transition:background .25s var(--ease),border-color .25s var(--ease); } .temp__vid-m::before{ content:"";position:absolute;z-index:2;left:calc(50% + 2px);top:50%; transform:translate(-50%,-50%); border-left:11px solid var(--white-main); border-top:7px solid transparent;border-bottom:7px solid transparent; } .temp__vid:hover .temp__vid-m::after{background:var(--red-main);border-color:var(--red-main)} .temp__vid-t{ display:block;margin-top:12px;font-family:var(--f-display);text-transform:uppercase; font-size:clamp(17px,1.8vw,22px);line-height:1.12;color:var(--white-main); } .temp__vid-c{ display:block;margin-top:5px;font-family:var(--f-ui);font-size:10.5px; letter-spacing:.2em;text-transform:uppercase;color:var(--gray-muted); } /* dentro de una sección de temporada el bloque "seguir" ya tiene su propio título, no necesita margen ni línea propios */ .temp__sec .land__next{margin-top:0;padding-top:0;border-top:0} @media (max-width:760px){ /* en una columna el arte vuelve arriba: el orden del HTML manda */ .temp__top{grid-template-columns:1fr} /* en una sola columna no hay alto que igualar: manda la forma, y el tope de estiramiento se levanta —si no, recorta el póster sin que haya nada al lado que justifique el recorte */ .temp__art{grid-column:1;grid-row:1;max-width:340px;align-self:start;max-height:none} .temp__top > div:not(.temp__art){grid-column:1;grid-row:2} } /* ══════════════════════════════════════════════════════════ PÁGINA OFICIAL DEL ÁLBUM Comparte casi todo con la página de temporada. Se diferencia en tres cosas: la miga de pan, el subtítulo del título y la ficha de créditos. ══════════════════════════════════════════════════════════ */ .miga{ margin-bottom:clamp(24px,4vh,38px); font-family:var(--f-ui);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase; color:var(--gray-muted);display:flex;flex-wrap:wrap;gap:8px;align-items:center; } /* Debajo del hero necesita su propio aire arriba y un filete que la separe del bloque de identidad. */ .miga--pie{ margin-top:clamp(30px,4vh,52px);padding-top:clamp(16px,2vh,24px); border-top:1px solid var(--border-dark); } .miga a{color:var(--white-soft);border-bottom:1px solid transparent} .miga a:hover{color:var(--white-main);border-bottom-color:var(--radio-gold)} .miga b{color:var(--radio-gold);font-weight:500} .miga span{color:var(--border-light)} .temp__title-b{ display:block;font-size:.42em;letter-spacing:.04em;color:var(--radio-gold); margin-top:.24em; } /* Los créditos reusan la .ficha de style.css. En la home vive dentro de una columna angosta; acá el contenedor es todo el ancho, así que se le fija la etiqueta a la izquierda y el valor pegado al lado, con una línea por fila: ficha técnica, no tabla suelta. */ .temp__sec .ficha{ margin-top:0;padding-top:0;border-top:0;max-width:760px; grid-template-columns:minmax(0,190px) minmax(0,1fr); gap:0 clamp(18px,2vw,30px);align-items:baseline; } .temp__sec .ficha dt, .temp__sec .ficha dd{padding:12px 0;border-top:1px solid var(--border-dark)} .temp__sec .ficha dd{margin:0} .ficha dd em{font-style:italic;text-transform:none;letter-spacing:.02em} .ficha dd a.u{color:inherit} /* ── el "Escuchar →" del tracklist manda al smart link ── */ .tk-a--go{ width:auto;padding:0 14px;gap:7px; font-family:var(--f-ui);font-weight:500;font-size:10.5px;letter-spacing:.18em; text-transform:uppercase;white-space:nowrap; } .tk-a--go:hover{background:var(--red-ink);border-color:var(--red-ink);color:#fff} @media (max-width:560px){ .ficha{grid-template-columns:1fr} } /* ══════════════════════════════════════════════════════════ /brunio-who/ — la página de referencia La información factual del proyecto, en texto real. Es la página que un buscador o un sistema de respuesta va a leer para entender qué es Brunio Who. ══════════════════════════════════════════════════════════ */ .quien__top{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px); gap:clamp(28px,4vw,56px);align-items:start; } .quien__h1{ font-family:var(--f-display);text-transform:uppercase;color:var(--white-main); font-size:clamp(48px,9vw,120px);line-height:.86;letter-spacing:-.01em;margin-top:12px; } .quien__lead{ margin-top:24px;max-width:44ch;color:var(--white-main); font-size:clamp(18px,2.1vw,25px);line-height:1.4; } .quien__lead strong{color:var(--white-main)} .quien__p{margin-top:16px;max-width:56ch;color:var(--white-soft);line-height:1.68} .quien__p strong{color:var(--white-main)} .quien__foto{ aspect-ratio:1;background:var(--black-card) 50% 40%/cover no-repeat; border:1px solid var(--border-dark); } .quien__temp{ padding:22px 0;border-top:1px solid var(--border-dark);max-width:70ch; } .quien__temp:last-of-type{border-bottom:1px solid var(--border-dark)} .quien__temp h3{ font-family:var(--f-display);text-transform:uppercase;color:var(--white-main); font-size:clamp(21px,2.6vw,30px);line-height:1.05; display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px; } .quien__temp h3 em{ font-style:normal;font-family:var(--f-ui);font-weight:500;font-size:10.5px; letter-spacing:.22em;color:var(--radio-gold); } .quien__temp p{margin-top:12px;color:var(--white-soft);line-height:1.66} .quien__temp p + p{margin-top:10px} .quien__qa{max-width:68ch} .quien__qa h3{ font-family:var(--f-display);text-transform:uppercase;color:var(--white-main); font-size:clamp(17px,2vw,22px);line-height:1.14;margin-top:26px; } .quien__qa h3:first-child{margin-top:0} .quien__qa p{margin-top:9px;color:var(--white-soft);line-height:1.66} @media (max-width:820px){ .quien__top{grid-template-columns:1fr} .quien__foto{max-width:380px;order:-1} } /* ══════════════════════════════════════════════════════════ LANDING DE TEMPORADA — bloques nuevos La temporada es el universo; el release es una obra dentro. Por eso "Ahora" muestra el release destacado y "Releases" los lista, pero el tracklist completo vive en la página del álbum: repetirlo acá era la confusión principal del sitio. ══════════════════════════════════════════════════════════ */ /* ── el release destacado ── */ .rel{ display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:clamp(20px,3vw,38px);align-items:center; padding:clamp(20px,2.6vw,30px); border:1px solid var(--border-dark);background:var(--black-card); } .rel__art{ display:block;aspect-ratio:1; background:var(--black-soft) 50% 50%/cover no-repeat; border:1px solid var(--border-dark); transition:border-color .25s var(--ease); } .rel__art:hover{border-color:var(--border-light)} .rel__tipo{ font-family:var(--f-ui);font-size:10.5px;letter-spacing:.22em; text-transform:uppercase;color:var(--radio-gold); } .rel__t{ margin-top:9px;font-family:var(--f-display);text-transform:uppercase; font-size:clamp(24px,3.4vw,40px);line-height:1;color:var(--white-main); } .rel__t a{border-bottom:1px solid transparent;transition:border-color .25s var(--ease)} .rel__t a:hover{border-bottom-color:var(--radio-gold)} .rel__d{margin-top:12px;max-width:48ch;color:var(--white-soft);line-height:1.6} .rel__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;align-items:center} /* ── la lista de releases de la temporada ── */ .relista{list-style:none;display:grid;gap:0} .relista li{ display:flex;align-items:center;gap:16px; padding:15px 0;border-top:1px solid var(--border-dark); } .relista li:last-child{border-bottom:1px solid var(--border-dark)} .relista__n{ flex:none;width:34px;font-family:var(--f-ui);font-size:11.5px; letter-spacing:.1em;color:var(--radio-gold); } .relista__t{ flex:1;min-width:0;font-family:var(--f-display);text-transform:uppercase; font-size:clamp(17px,2vw,24px);line-height:1.14;color:var(--white-main); } .relista__m{ flex:none;font-family:var(--f-ui);font-size:10.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--gray-muted); } .relista__a{flex:none} /* Los videos de la temporada usan la grilla de novedades, pero con auto-fit: fijada en tres columnas, una temporada con cuatro o cinco videos dejaba la última fila a medio llenar y un bloque de negro al lado. Así los que haya se reparten el ancho. */ .latest__row--temp{ grid-template-columns:repeat(var(--n,3),minmax(0,1fr)); gap:clamp(12px,1.3vw,20px); } /* Debajo de cierto ancho una fila de cinco es ilegible: se pasa a dos y después a una, que es donde el video se ve de verdad. */ @media (max-width:1080px){ .latest__row--temp{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:620px){ .latest__row--temp{grid-template-columns:minmax(0,1fr)} } /* Historia y universo. Ya no cuelga del hero: es la sección 5, con su propio título. En pantalla ancha va en dos columnas —son párrafos cortos y así el bloque mide la mitad de alto—, con el tope de ancho duplicado para que cada columna siga midiendo lo que se lee cómodo. */ .uni{max-width:min(100%,140ch);columns:2;column-gap:clamp(28px,4vw,64px)} .uni p{break-inside:avoid} @media (max-width:820px){ .uni{columns:1;max-width:70ch} } /* ── personajes ── Un riel que se arrastra, no una grilla que se apila. Con seis fichas en grilla la sección ocupaba dos filas altísimas; así entran cuatro y media —la mitad de la quinta asoma y avisa que hay más— y la sección mide lo que una fila. Sirve igual para seis personajes que para uno. */ .elenco{ list-style:none;display:flex;gap:clamp(14px,1.8vw,22px); overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;scroll-behavior:smooth; padding-bottom:16px; /* aire para la barra */ /* Sin barra de scroll: el riel ya avisa que hay más con las flechas y con la ficha cortada del final, y la barra le metía una línea gris de sistema abajo de un bloque que es todo diseño. Se sigue arrastrando igual, y con teclado también. */ scrollbar-width:none;cursor:grab; } .elenco::-webkit-scrollbar{display:none} /* El sobrante del final lo pone js/riel.js acá y no como padding: el ancho de la ficha es un 22% de la caja de contenido, así que un padding la achicaría y el cálculo se mordería la cola. Un separador flex no toca esa medida. */ .elenco::after{content:"";flex:0 0 var(--riel-sobra,0px)} .elenco li{ flex:0 0 clamp(230px,22%,330px);scroll-snap-align:start; padding:18px;border:1px solid var(--border-dark);background:var(--black-card); } /* las flechas del riel. Van encima de la primera y la última ficha, centradas con la foto y no con la tarjeta entera: la tarjeta mide distinto según cuánto texto tenga el personaje, la foto no. */ .riel{position:relative} .riel__b{ position:absolute;top:clamp(90px,11vw,150px);z-index:2; width:44px;height:44px;cursor:pointer; border:1px solid var(--border-light);background:rgba(7,8,8,.82); backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px); transition:background .25s var(--ease),border-color .25s var(--ease); } .riel__b[hidden]{display:none} .riel__b:hover{background:var(--radio-gold);border-color:var(--radio-gold)} .riel__b--prev{left:-10px} .riel__b--next{right:-10px} /* la punta de flecha, dibujada con dos bordes */ .riel__b::before{ content:"";position:absolute;inset:0;margin:auto;width:10px;height:10px; border-top:2px solid var(--white-main);border-right:2px solid var(--white-main); } .riel__b--prev::before{transform:translateX(2px) rotate(-135deg)} .riel__b--next::before{transform:translateX(-2px) rotate(45deg)} @media (hover:none){ .riel__b{display:none} } /* en táctil se arrastra */ .elenco b{ display:block;font-family:var(--f-display);text-transform:uppercase; font-size:clamp(20px,2.3vw,27px);line-height:1;color:var(--white-main); letter-spacing:.01em; } .elenco span{ display:block;margin-top:8px;font-family:var(--f-ui);font-size:11px; letter-spacing:.16em;text-transform:uppercase;color:var(--gray-muted); } @media (max-width:860px){ .rel{grid-template-columns:1fr;gap:20px} .rel__art{max-width:260px} .latest__row--temp{grid-template-columns:1fr} .relista li{flex-wrap:wrap;gap:8px 14px} .relista__t{flex:1 1 100%;order:2} .relista__n{order:1} .relista__m{order:3} .relista__a{order:4;margin-left:auto} } /* el hub del artista: dos listas separadas por una nota */ .hub__nota{ margin-top:30px;margin-bottom:12px;text-align:left; font-family:var(--f-ui);font-size:10.5px;letter-spacing:.22em; text-transform:uppercase;color:var(--radio-gold); } .hub__nota--sep{margin-top:34px;padding-top:24px;border-top:1px solid var(--border-dark)} .hub__list + .hub__nota{margin-top:34px} /* ── el álbum final de una temporada: mismo componente que el release destacado, con el marco en dorado para separarlo de los releases intermedios ── */ .rel--final{border-color:var(--radio-gold-dark)} /* ── el cierre de la temporada: el álbum y el cortometraje ── Son las dos obras que la cierran y pesan lo mismo, así que miden lo mismo: mitad y mitad. Las dos tarjetas son gemelas —imagen cuadrada a la izquierda, texto a la derecha— a propósito. Con el video en 16:9 arriba y a todo el ancho quedaba el doble de alto que el disco, y la mitad izquierda se llenaba de aire muerto para emparejar. Con la misma forma, las dos miden lo mismo solas. La tapa del disco NO se recorta —es lo que más importa de un release—; el fotograma del video sí, que para eso es un fotograma. */ .cierre{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,26px)} .cierre__obra{ display:grid;grid-template-columns:clamp(140px,34%,240px) minmax(0,1fr); gap:clamp(16px,2vw,26px);align-items:start; padding:clamp(20px,2.4vw,28px); border:1px solid var(--radio-gold-dark);background:var(--black-card); } .cierre__art, .cierre__marco{ display:block;position:relative;aspect-ratio:1;overflow:hidden; background:var(--black-soft) 50% 50%/cover no-repeat; border:1px solid var(--border-dark); } /* ── El álbum como OBJETO, no como tapa ────────────────────────────── Mismo tratamiento que el VHS de al lado: vertical, entero y sobre negro. La S01 tiene su disco editado en casete de audio, y puesto en el cuadrado de una tapa se le cortaba la caja por los cuatro lados —que es justamente lo que lo hace un casete—. Así las dos obras de la temporada se leen como dos objetos de la misma repisa. */ .cierre__art--objeto{ /* Sin color de fondo: el arte viene recortado, con el negro ya sacado, así que el objeto se apoya directamente sobre lo que haya detrás —el bloque de color de la temporada— en vez de traer su propio rectángulo negro. */ aspect-ratio:5/8;background-size:contain;background-color:transparent; border:0;cursor:pointer; transition:transform .45s cubic-bezier(.16,1,.3,1),filter .45s; } /* Se levanta al pasar, igual que el VHS: los dos son objetos que se agarran, y el gesto dice que el clic lleva a algún lado —al smart link del álbum, el mismo destino que el botón Escuchar de al lado. */ .cierre__art--objeto:hover, .cierre__art--objeto:focus-visible{transform:translateY(-4px) scale(1.015);filter:brightness(1.06)} /* Esta regla existía para que el casete de la S01 quedara sobre negro cuando la tarjeta era negra. Ahora esa tarjeta es un bloque verde y la regla la pisaba: el fondo volvía a negro y el texto —que pasó a negro para leerse sobre el verde— desaparecía. Queda sólo para una temporada que NO traiga su propia paleta. */ .cierre__obra--disco:has(.cierre__art--objeto):not(.inner--s01 *){background:var(--black)} /* negro y no --black-card: la carátula del VHS trae los bordes negros y sobre el gris de la tarjeta se recortaba como un rectángulo pegado encima. Igualados, el casete queda integrado al recuadro. */ .cierre__obra--film{border-color:var(--border-dark);background:var(--black)} /* La obra que todavía no estrenó. Mismo recuadro y mismo peso que la que ya existe: en una temporada en emisión las dos cuentan igual, sólo que una tiene disco y la otra una fecha. El borde punteado y el cobre dicen "esto está por venir" sin necesidad de escribirlo dos veces. */ .cierre__obra--proxima{border-style:dashed;border-color:var(--radio-gold-dark);background:none} .cierre__espera{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px; aspect-ratio:1;border:1px solid var(--radio-gold-dark); background:linear-gradient(160deg,rgba(156,118,80,.06),rgba(7,8,8,0) 62%); text-align:center;padding:16px; } .cierre__espera span{ font-family:var(--f-ui);font-weight:500;font-size:10px;letter-spacing:.26em; text-transform:uppercase;color:var(--radio-gold); } .cierre__espera b{ font-family:var(--f-display);font-weight:400;text-transform:uppercase; font-size:clamp(20px,2.4vw,30px);line-height:1;letter-spacing:.03em; color:var(--white-main); } .cierre__obra--proxima .rel__t{font-size:clamp(20px,2.4vw,30px)} .cierre__obra--film .rel__t{font-size:clamp(20px,2.4vw,30px)} .cierre__marco{cursor:default} /* ── El casete ────────────────────────────────────────────────────────── La carátula del VHS en vez del fotograma de YouTube: es la pieza gráfica de la temporada y dice sola que esto es un objeto de video. Vuelve a ser la puerta al cortometraje —el mismo destino que el botón de abajo—, así que la portada entera es clickeable, que es lo que uno intenta hacer. Vertical y contenida: la carátula es 500×833 y recortarla a cuadrado le cortaba el logo arriba o los personajes abajo. */ .cierre__marco--vhs{ aspect-ratio:5/8;cursor:pointer;background-size:contain;background-color:transparent; border:0;transition:transform .45s cubic-bezier(.16,1,.3,1),filter .45s; } .cierre__marco--vhs:hover, .cierre__marco--vhs:focus-visible{transform:translateY(-4px) scale(1.015);filter:brightness(1.06)} /* El play aparece al pasar: quieto, la carátula se lee como carátula. */ .cierre__marco--vhs .film__play{opacity:0;transition:opacity .3s} .cierre__marco--vhs:hover .film__play, .cierre__marco--vhs:focus-visible .film__play{opacity:1} /* La etiqueta dice qué pasa al hacer clic, para que no dependa del hover. */ .vhs__cinta{ position:absolute;left:0;right:0;bottom:0;padding:9px 12px; background:linear-gradient(transparent,rgba(0,0,0,.86) 42%); font-family:var(--f-display);text-transform:uppercase;letter-spacing:.14em; font-size:11px;color:var(--white-main);text-align:center; opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s; } .cierre__marco--vhs:hover .vhs__cinta, .cierre__marco--vhs:focus-visible .vhs__cinta{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .cierre__marco--vhs,.cierre__marco--vhs .film__play,.vhs__cinta{transition:none} .cierre__marco--vhs:hover{transform:none} } /* Las dos puertas de cada obra. Se envuelven solas cuando no entran: pasa en celular y también en la mitad angosta de un escritorio. */ .cierre__btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px} .cierre__btns .btn{flex:none} @media (max-width:900px){ .cierre{grid-template-columns:1fr} } @media (max-width:520px){ .cierre__obra{grid-template-columns:1fr} .cierre__art,.cierre__marco{max-width:240px} } /* ── fichas de personaje ── */ .perso{display:flex;flex-direction:column} /* Un solo personaje no es un riel: la tarjeta angosta dejaba mil pixeles vacíos al lado y una bio larga cayendo en columna de dieciocho renglones. Sola, la ficha se abre en horizontal —foto a la izquierda, texto a la derecha— como las obras del cierre. */ .elenco:has(> .perso:only-child){overflow:visible;scroll-snap-type:none;padding-bottom:0} .elenco > .perso:only-child{ flex:0 1 min(100%,780px);scroll-snap-align:none; display:grid;grid-template-columns:minmax(0,clamp(190px,26%,270px)) minmax(0,1fr); column-gap:clamp(18px,2.4vw,30px); /* Las dos primeras filas al mínimo y el resto a la tercera: la foto abarca las tres y, sin esto, el alto que le sobra se repartía entre ellas y abría un hueco entre el nombre y la bajada. */ grid-template-rows:min-content min-content 1fr; } /* la foto ocupa la columna entera, alto completo */ .elenco > .perso:only-child .perso__f{ grid-column:1;grid-row:1/-1;aspect-ratio:4/5;align-self:stretch; margin:-18px 0 -18px -18px; border-bottom:0;border-right:1px solid var(--border-dark); } .elenco > .perso:only-child > b, .elenco > .perso:only-child > .perso__l, .elenco > .perso:only-child > .perso__d{grid-column:2} .elenco > .perso:only-child > b{margin-top:2px} .elenco > .perso:only-child > .perso__d{align-self:start;margin-top:9px} @media (max-width:700px){ /* en el teléfono no hay dos columnas que valgan */ .elenco > .perso:only-child{grid-template-columns:minmax(0,1fr)} .elenco > .perso:only-child .perso__f{ grid-column:1;grid-row:1;aspect-ratio:1;margin:-18px -18px 14px; border-right:0;border-bottom:1px solid var(--border-dark); } .elenco > .perso:only-child > b, .elenco > .perso:only-child > .perso__l, .elenco > .perso:only-child > .perso__d{grid-column:1} } .perso__f{ display:block;aspect-ratio:1;margin:-18px -18px 16px; background:var(--black-soft) 50% 40%/cover no-repeat; border-bottom:1px solid var(--border-dark); } .perso__d{ display:block;margin-top:9px;font-size:13.5px;line-height:1.55; color:var(--white-soft);text-transform:none;letter-spacing:0; } /* variantes de una misma obra (vertical, teaser…) */ .lanz__var{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px} .lanz__var a{ font-family:var(--f-ui);font-size:9.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--gray-muted); border:1px solid var(--border-dark);padding:4px 9px; } .lanz__var a:hover{color:var(--white-main);border-color:var(--border-light)} /* ══════════════════ LA DISCOGRAFÍA DE LA TEMPORADA ══════════════════ Once releases en una sola lista corrida no se leen. Van en dos grupos —obras y singles— y dentro de cada uno en orden cronológico. Las obras piden más aire porque son las que importan; los singles entran de a cuatro y se leen como una línea de tiempo. */ .disco__g{ margin-top:clamp(30px,4vh,44px);margin-bottom:16px; font-family:var(--f-ui);font-weight:500;font-size:11px;letter-spacing:.28em; text-transform:uppercase;color:var(--radio-gold); padding-bottom:10px;border-bottom:1px solid var(--border-dark); } .disco__g:first-child{margin-top:0} .disco__row{ list-style:none;display:grid;gap:clamp(16px,2vw,28px); grid-template-columns:repeat(4,minmax(0,1fr)); } .disco__row--obra{grid-template-columns:repeat(3,minmax(0,1fr))} .disco__tapa{ display:block;aspect-ratio:1; background:var(--black-card) 50% 50%/cover no-repeat; border:1px solid var(--border-dark); transition:border-color .25s var(--ease),transform .25s var(--ease); } .disco__tapa:hover{border-color:var(--border-light);transform:translateY(-2px)} /* Sin tapa cargada el cuadro queda vacío, con su borde. No se inventa una imagen ni se pone un cartel de "próximamente". */ .disco__tapa.is-empty{background-image:none} .disco__tipo{ margin-top:12px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px; font-family:var(--f-ui);font-size:10px;letter-spacing:.2em; text-transform:uppercase;color:var(--gray-muted); } .disco__tipo i{width:3px;height:3px;background:var(--radio-gold-dark);transform:rotate(45deg);flex:none} .disco__t{ margin-top:6px;font-family:var(--f-display);text-transform:uppercase; font-size:clamp(16px,1.7vw,22px);line-height:1.1;color:var(--white-main); } .disco__row--obra .disco__t{font-size:clamp(19px,2.2vw,28px)} .disco__en{ margin-top:7px;font-size:12.5px;line-height:1.4;color:var(--gray-muted); } .disco__en a{color:var(--white-soft);border-bottom:1px solid var(--border-light)} .disco__en a:hover{color:var(--white-main);border-bottom-color:var(--radio-gold)} .disco__cta{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center} @media (max-width:1000px){ .disco__row{grid-template-columns:repeat(3,minmax(0,1fr))} .disco__row--obra{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:640px){ .disco__row,.disco__row--obra{grid-template-columns:repeat(2,minmax(0,1fr))} .disco__cta .tk-a{width:100%;justify-content:center} } /* "Ver release" es un enlace de texto, no un segundo botón: si los dos pesan igual, el visitante no sabe cuál es la acción principal. Y con .tk-a heredaba el ancho fijo del botón del tracklist y se superponía. */ .disco__ver{ font-family:var(--f-ui);font-weight:500;font-size:10.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--gray-muted);white-space:nowrap; border-bottom:1px solid var(--border-dark);padding-bottom:2px; } .disco__ver:hover{color:var(--white-main);border-bottom-color:var(--radio-gold)} /* Un release sin URL de plataforma no lleva botón: llevaría a un 404. Se dice, en gris, y listo. */ .disco__falta{ margin-top:12px;font-family:var(--f-ui);font-size:10px;letter-spacing:.18em; text-transform:uppercase;color:var(--border-light); } .rel__meta{ margin-top:10px;font-family:var(--f-ui);font-size:10.5px;letter-spacing:.2em; text-transform:uppercase;color:var(--radio-gold); } /* La lista de singles: con ocho o nueve, la grilla de tapas ocupaba media página. La primera columna es la fecha, así que pide más ancho que los 34px del número que había antes. */ .relista--disco .relista__n{ width:96px;font-size:10px;letter-spacing:.18em;text-transform:uppercase; } .relista--disco .relista__t{font-size:clamp(15px,1.7vw,21px)} .relista--disco .relista__m{ max-width:44ch;text-transform:none;letter-spacing:.01em;font-size:12px; } .relista--disco .relista__m a{color:var(--white-soft);border-bottom:1px solid var(--border-light)} .relista--disco .relista__m a:hover{color:var(--white-main);border-bottom-color:var(--radio-gold)} .relista--disco .disco__falta{margin:0} @media (max-width:720px){ .relista--disco li{flex-wrap:wrap;gap:6px 12px} .relista--disco .relista__t{flex:1 1 100%;order:1} .relista--disco .relista__n{order:2;width:auto} .relista--disco .relista__m{order:3;flex:1 1 100%} .relista--disco .relista__a{order:4;margin-left:auto} } /* El lema del personaje: la línea corta que lo define antes de la descripción larga. */ .perso__l{ display:block;margin-top:6px; font-family:var(--f-ui);font-weight:500;font-size:10px;letter-spacing:.2em; text-transform:uppercase;color:var(--radio-gold); } .perso__l + .perso__d{margin-top:10px} /* La descripción del personaje es un párrafo, no una etiqueta: heredaba el text-transform de .elenco span y un texto largo en mayúsculas no se lee. */ /* Tres columnas fijas, no "las que entren": con auto-fill entraban cinco en pantalla ancha y las fichas quedaban angostas y altas, con el sexto personaje solo abajo. A tres, la foto se ve grande y el texto respira. Vale para las dos temporadas —en S02, con un personaje solo, la ficha ocupa un tercio y no el ancho entero—. */ /* En pantalla chica la ficha ocupa casi todo el ancho y se pasa de a una */ @media (max-width:860px){ .elenco li{flex-basis:min(78%,300px)} } /* La foto arranca pegada al borde de arriba de la ficha: se come el padding con márgenes negativos. Necesita ganarle en especificidad a `.elenco span` (0,1,1), que le metía margin-top:8px y abría un hueco arriba. */ .elenco .perso__f{margin:-18px -18px 16px} .elenco .perso__d{ font-family:var(--f-body);font-size:13.5px;line-height:1.55; letter-spacing:normal;text-transform:none;color:var(--white-soft); } /* La última línea del camino: el álbum que lo cierra. No es un paso más, así que no se pinta como los otros — el filete de cobre arriba y el título en blanco pleno lo marcan como el destino. Va al final aunque sea lo más nuevo: acá el orden lo manda el relato, no la fecha. */ .relista--disco .relista__fin{border-top-color:var(--radio-gold-dark)} .relista--disco .relista__fin .relista__n{color:var(--white-soft)} .relista--disco .relista__fin .relista__t{ font-size:clamp(17px,1.9vw,23px);color:var(--white-main); } .relista--disco .relista__fin .relista__m{ color:var(--radio-gold);letter-spacing:.16em;text-transform:uppercase; font-size:10.5px; } /* ── LA TEMPORADA QUE TODAVÍA NO EMPEZÓ (/temporadas/entra-madness/) ── Una pantalla casi vacía, a propósito. No hay disco, ni videos, ni personajes: hay un nombre y una espera. El aire es el contenido. No lleva arte: el póster que existe todavía dice "TEMPORADA 2". */ .prox__hero{ max-width:var(--max);margin:0 auto; padding:clamp(70px,13vh,150px) var(--gut) clamp(50px,8vh,90px); text-align:center; } .prox__num{ font-family:var(--f-ui);font-weight:500;font-size:11px;letter-spacing:.3em; text-transform:uppercase;color:var(--radio-gold);margin-bottom:18px; } .prox__title{ font-family:var(--f-display);font-weight:400;line-height:.92; font-size:clamp(52px,12vw,150px);letter-spacing:.02em;text-transform:uppercase; color:var(--white-main); } .prox__estado{ display:inline-flex;align-items:center;gap:9px;margin-top:22px; padding:9px 17px;border:1px solid var(--border-dark); font-family:var(--f-ui);font-weight:500;font-size:11px;letter-spacing:.24em; text-transform:uppercase;color:var(--white-soft); } /* el punto late despacio: la temporada no está en el aire, está en camino */ .prox__punto{ width:7px;height:7px;border-radius:50%;background:var(--radio-gold); animation:proxLatir 2.6s var(--ease) infinite; } @keyframes proxLatir{0%,100%{opacity:.35}50%{opacity:1}} @media (prefers-reduced-motion:reduce){ .prox__punto{animation:none;opacity:.8} } .prox__syn{ max-width:56ch;margin:clamp(28px,4vh,44px) auto 0; color:var(--white-soft);font-size:clamp(15px,1.6vw,18px);line-height:1.65; } .prox .temp__tags{justify-content:center;margin-top:26px}