/*
* Plantilla visual del sitio (Task 15), fiel a la plantilla Joomla yoo_vox
* (variación de color "music") que usaba el sitio hasta ahora: fondo
* oscuro texturado, acentos turquesa/petróleo, contenedor de 1300px,
* columnas laterales oscuras y contenido central claro. Mismo aspecto,
* CSS nuevo -sin frameworks, sin CDN-.
*
* Las rutas a imágenes son relativas a este archivo (assets/css/), no a la
* página: por eso 'assets/img/...' y no una ruta absoluta escrita a mano.
*/
:root {
--acento: #3d9fc4;
--acento-oscuro: #165b75;
--caja: #388eaf;
--texto: #d8d8d8;
/* La página ocupa todo el ancho de la pantalla (antes estaba topeada en
1300px y centrada). El .contenedor sigue con su padding lateral, así el
contenido no queda pegado a los bordes. */
--ancho: 100%;
--radio: 8px;
/*
* Los grises del yoo_vox 'music'. No son "parecidos": están MEDIDOS
* pixel por pixel sobre el sitio original renderizado en Chrome
* (docs/capturas/original-home-1400.png) y contra los propios PNG del
* template, que siguen en e:/xampp/htdocs/rdc/templates/yoo_vox/.
*
* Son tres nada más, y esa es la mitad de por qué el original tiene
* profundidad y la migración se veía plana: la migración usaba UN color
* (#141414) con transparencias encima, o sea un solo plano.
*
* --fondo-pagina #232220 la textura page_bg.png del fondo
* --fondo-panel #373635 los envoltorios (franja, columnas, pie)
* --modulo #41403f las cajas de las columnas laterales
*/
--fondo-pagina: #232220;
--fondo-panel: #373635;
--modulo: #41403f;
/*
* La fila de pestañas del menú, del sprite images/menu_level1_item.png
* (290x270, un estado cada 39px). Medido sobre el sprite Y sobre el
* render: la pestaña normal es #232221 plano con una caída oscura en
* los últimos 5px, y la activa es #373635 plano SIN caída -por eso se
* funde con el panel de abajo, que es el mismo color-.
*/
--pestana: #232221;
--pestana-activa: #373635;
--pestana-base: #121111;
--texto-pestana: #969696;
/* El borde de las cajas: 1px negro por fuera y 1px de brillo por
dentro. Es lo que da el relieve, y es de los pocos trucos de 2011 que
sigue siendo el más simple para lograrlo. */
--linea: #000000;
--brillo: #404040;
--brillo-activo: #666666;
--texto-modulo: #b4b4b4;
--fondo-contenido: #faf9f8;
--texto-contenido: #333333;
--borde-panel: rgba(255, 255, 255, .08);
/*
* El color del anillo de foco SOBRE FONDO OSCURO (menú de cabecera,
* columnas laterales, pie). El --acento del sitio (#3d9fc4) sobre la
* pestaña #232221 da 4,3:1, que pasa raspando el 3:1 que pide la guía
* para un indicador no textual; este da 9,4:1 y se ve de lejos, que es
* de lo que se trata un indicador de foco.
*/
--foco-oscuro: #8ed7f5;
--triangulo: #d4241a;
}
/* ---------- Base ---------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
overflow-x: hidden;
}
/*
* El fondo del sitio, que son DOS capas y no una. La migración se había
* traído solo la primera y por eso se veía plano y parejo.
*
* 1. La textura: assets/img/fondo.png, que es byte a byte el mismo
* archivo que images/variations/music/page_bg.png del Joomla original
* (100x100, repetida).
* 2. El halo: en el original es una FOTO, page_bg_img.jpg (1650x600,
* 40 KB, '50% 0 no-repeat'), un degradado radial suave que aclara el
* centro de arriba y le da profundidad a la página.
*
* Acá el halo es un radial-gradient y no la foto, a propósito: 40 KB
* menos, nítido en cualquier pantalla de alta densidad (un JPG de 1650px
* de ancho estirado no lo es) y sin una imagen más que acordarse de meter
* en el paquete. Los topes NO son inventados: salen de muestrear el JPG
* original con GD sobre sus dos ejes -pico #6f6c67 en (52,8%, 0), y de
* ahí hasta el #232220 del fondo en ~660px a los lados y ~600px hacia
* abajo-. Comparados contra el original, los valores intermedios caen
* dentro de 4 unidades sobre 255 en los dos ejes.
*
* El halo va PRIMERO (o sea, encima de la textura) porque en el original
* el JPG vive en #page-body, que es hijo de body y lo tapa.
*/
body {
margin: 0;
overflow-x: hidden;
font-family: Arial, Helvetica, sans-serif;
color: var(--texto);
background-color: var(--fondo-pagina);
background-image:
radial-gradient(660px 600px at 50% 0,
#6f6c67 0%,
#5a5653 32%,
#423f3c 55%,
#2d2c2a 78%,
rgba(45, 44, 42, 0) 100%),
url('../img/fondo.png');
background-repeat: no-repeat, repeat;
background-position: 50% 0, 50% 0;
line-height: 1.6;
}
h1, h3, h5 { color: var(--acento); }
h2, h4, h6 { color: var(--acento-oscuro); }
a {
color: var(--acento);
text-decoration: none;
}
a:hover,
a:focus {
color: var(--acento-oscuro);
text-decoration: underline;
}
img {
max-width: 100%;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.contenedor {
max-width: var(--ancho);
margin: 0 auto;
padding: 0 16px;
}
:focus-visible {
outline: 2px solid var(--acento);
outline-offset: 2px;
}
/* ---------- Encabezado: fecha, logo y fila de pestañas ---------- */
/*
* El encabezado del original NO es una barra de ancho completo: el logo y
* las pestañas se apoyan directamente sobre el fondo de la página -halo
* incluido- y recién abajo empieza el panel. La migración lo tenía como
* franja oscura de borde a borde, que tapaba justo la parte del halo que
* más se ve. Por eso acá no hay ni fondo ni borde: los pone el body.
*
* z-index: la pestaña activa tiene que taparle el borde superior al panel
* de abajo (así se funden en una sola pieza, que es el efecto del
* original). Sin esto el panel, que viene después en el HTML, le pinta
* encima.
*/
.sitio-header {
position: relative;
z-index: 2;
}
/*
* Tres piezas en dos filas, sin tocar el orden del HTML: el logo y el
* botón de hamburguesa arriba, la fila de pestañas abajo -que es como
* está en el original, no el menú al costado del logo-. Con grid-areas el
* botón puede seguir al lado del logo en el teléfono sin mover una línea
* del marcado.
*/
.sitio-header-interior {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"logo boton"
"menu menu";
align-items: center;
/* 8px y no los 16 del .contenedor: en el original el logo y la fila de
pestañas arrancan pegados al borde del panel de abajo, no adentro de
su relleno. */
padding: 6px 8px 0;
}
.sitio-logo {
grid-area: logo;
min-height: 40px;
min-width: 0;
display: flex;
align-items: center;
}
/* El bloque 'logo' trae un título administrativo ("Logo") que en Joomla
nunca se mostraba (el módulo tenía "Mostrar título" apagado): se oculta
acá, no se borra el dato. */
.sitio-logo .bloque-titulo {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.sitio-logo img {
display: block;
width: 436px;
max-width: 100%;
height: auto;
}
/* Respaldo si todavía no hay bloque 'logo' cargado (instalación nueva,
sin datos): usa el mismo archivo que Step 1 copió a assets/img/. */
.sitio-logo:empty::before {
content: '';
display: block;
width: 436px;
max-width: 100%;
height: 70px;
background: url('../img/logo.png') left center / contain no-repeat;
}
/* La fecha de arriba de todo ("Viernes, 21 Agosto 2026"), que arma
fecha_en_castellano(). En el original mide 9px, que hoy es ilegible;
acá va en 11px, que es la mejora más barata de toda la tarea. */
.barra-fecha {
padding: 8px 16px 0;
font-size: 11px;
color: #c8c8c8;
text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}
/* ---------- El botón de hamburguesa ---------- */
.boton-menu {
grid-area: boton;
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 44px;
height: 44px;
padding: 10px;
background: var(--pestana);
border: 1px solid var(--linea);
border-radius: 5px;
box-shadow: inset 0 1px 0 var(--brillo);
cursor: pointer;
}
.boton-menu-barra {
display: block;
height: 2px;
background: var(--texto);
}
/* El botón cambia de aspecto cuando el menú está abierto. Se engancha del
MISMO atributo que assets/js/menu.js ya mantiene sincronizado
(aria-expanded), no de una clase paralela que pudiera desfasarse. */
.boton-menu[aria-expanded="true"] {
background: var(--pestana-activa);
box-shadow: inset 0 1px 0 var(--brillo-activo);
}
.boton-menu[aria-expanded="true"] .boton-menu-barra {
background: #ffffff;
}
.boton-menu:focus-visible {
outline: 2px solid var(--foco-oscuro);
outline-offset: 2px;
}
.boton-menu-texto {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* ---------- La fila de pestañas ---------- */
/*
* Las pestañas del original, sin el sprite.
*
* El original las dibuja con images/menu_level1_item.png (290x270, 1,5 KB,
* un estado cada 39px) recortado en tres pedazos por pestaña: tapa
* izquierda, cuerpo y tapa derecha. Eso obligaba a tres elementos anidados
* por ítem (li > a > span.bg) y se ve borroso en cualquier pantalla de
* alta densidad, porque es un bitmap estirado.
*
* Acá es un border-radius, un borde y un degradado: mismo dibujo, nítido a
* cualquier densidad, un solo elemento y cero bytes de imagen. Los valores
* están medidos sobre el original renderizado, columna por columna:
*
* normal 1px #000 arriba, 1px #404040 de brillo, #232221 plano 27px,
* y una caída a #121111 en los últimos 5px
* activa 1px #000 arriba, 1px #666666 de brillo, #373635 plano hasta
* abajo, SIN caída
*
* Ese "sin caída" no es un detalle: el panel que sigue es #373635, el
* mismo color, así que la pestaña abierta se funde con él y forma una sola
* pieza. Es la idea central del diseño.
*
* Sobre el alto: el CSS del original declara 36px y el sprite pinta 34 de
* esos 36 (las últimas 2 filas de la banda son transparentes, y #menu
* lleva bottom:-2px para que la parte pintada termine justo contra el
* panel). Lo que el visitante ve son 34px, y 34px es lo que se usa acá.
*
* El ancho lo da el contenido, igual que en el original: 20px de relleno a
* cada lado (allá eran 10 de la tapa + 10 del cuerpo) y 5px de separación
* entre pestañas.
*/
.menu-principal {
grid-area: menu;
min-width: 0;
}
.menu-header {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 4px 5px;
margin-top: 10px;
}
.menu-header > li {
position: relative;
}
.menu-header > li > a {
display: block;
height: 34px;
/* 19 y no 20: el original reparte 10+10 de relleno y NO tiene borde en
la caja (el borde se lo dibuja el sprite). Acá el borde de 1px sí
cuenta -box-sizing: border-box-, así que con 20 cada pestaña salía
exactamente 2px más ancha que la del original, las nueve. Con 19 dan
al pixel: INICIO 85,8 / CATALOGO 121,1 / QUIENES SOMOS 167,5. */
padding: 0 19px;
border: 1px solid var(--linea);
border-bottom: 0;
border-radius: 5px 5px 0 0;
background: linear-gradient(to top, var(--pestana-base) 0, var(--pestana) 5px);
box-shadow:
inset 0 1px 0 var(--brillo),
inset 1px 0 0 var(--brillo),
inset -1px 0 0 var(--brillo);
color: var(--texto-pestana);
font-size: 15px;
line-height: 33px;
text-transform: uppercase;
/* El segundo halo, blanco y difuso, es el brillo característico de la
fila; el primero es la sombra dura que despega el texto del fondo. */
text-shadow: 1px 1px 1px rgba(0, 0, 0, 1), 0 0 5px rgba(255, 255, 255, .3);
white-space: nowrap;
}
.menu-header > li > a:hover,
.menu-header > li > a:focus-visible,
.menu-header > li.activo > a,
.menu-header > li.activo-rama > a {
background: var(--pestana-activa);
box-shadow:
inset 0 1px 0 var(--brillo-activo),
inset 1px 0 0 var(--brillo-activo),
inset -1px 0 0 var(--brillo-activo);
color: #ffffff;
text-decoration: none;
}
/*
* La mejora sobre el original, y la única licencia que se toma esta fila:
* la pestaña de la sección abierta lleva además una línea de 3px del
* celeste de la marca arriba.
*
* En el original la única diferencia entre "abierta" y "el mouse está
* encima" es el color del texto, así que apenas movés el mouse dejás de
* saber en qué sección estás. Con la línea, la sección abierta se
* distingue de la pestaña bajo el mouse Y se ve de un vistazo desde lejos.
* La forma, el tamaño, el color de fondo y el texto blanco no cambian:
* sigue siendo la misma pestaña.
*/
.menu-header > li.activo > a,
.menu-header > li.activo-rama > a {
box-shadow:
inset 0 3px 0 var(--acento),
inset 1px 0 0 var(--brillo-activo),
inset -1px 0 0 var(--brillo-activo);
}
/*
* Los 2px que tapan el borde superior del panel de abajo, para que la
* pestaña abierta y el panel sean una sola pieza. Van como pseudo-elemento
* y no como margen negativo porque un margen negativo correría de lugar a
* las pestañas vecinas.
*/
.menu-header > li.activo > a::after,
.menu-header > li.activo-rama > a::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 2px;
background: var(--pestana-activa);
}
/*
* El foco de teclado. El anillo va HACIA ADENTRO (offset negativo): con el
* offset positivo de la regla general se metía debajo de la pestaña
* vecina, que está a 5px, y se veía cortado justo del lado por el que
* venís tabulando.
*/
.menu-header a:focus-visible {
outline: 2px solid var(--foco-oscuro);
outline-offset: -4px;
color: #ffffff;
}
/*
* Submenú de segundo nivel. Los tres menús reales son planos, pero el
* parcial dibuja dos niveles desde siempre y el panel deja armar
* submenús: sin esto, un ítem con hijos los desparramaba como texto suelto
* abajo de la fila.
*
* Se abre con :hover y con :focus-within, no con JavaScript: la CSP del
* sitio es script-src 'self' y, más importante, :focus-within hace que el
* submenú se abra solo al tabular hasta el padre. Un desplegable de 2011
* con onmouseover no se podía recorrer con el teclado.
*/
.menu-header > li > ul {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 20;
min-width: 100%;
padding: 4px 0;
background: var(--modulo);
border: 1px solid var(--linea);
border-radius: 0 5px 5px 5px;
box-shadow: 0 6px 14px rgba(0, 0, 0, .5);
}
.menu-header > li:hover > ul,
.menu-header > li:focus-within > ul {
display: block;
}
.menu-header > li > ul a {
display: block;
padding: 8px 16px;
color: #ffffff;
font-size: .95rem;
white-space: nowrap;
}
.menu-header > li > ul a:hover,
.menu-header > li > ul a:focus-visible {
background: var(--fondo-panel);
color: #ffffff;
text-decoration: none;
}
.menu-header > li > ul .activo > a {
color: var(--acento);
font-weight: bold;
}
/* ---------- Franja de banner (slider / avisos superiores) ---------- */
/*
* El panel no es de ancho completo: es una columna de 1300px sobre el
* fondo de la página, igual que en el original. Con la franja pintada de
* borde a borde -que es como estaba- el halo del fondo quedaba tapado en
* todo el ancho y solo se veía en el encabezado; con el panel acotado, el
* fondo respira a los costados en toda la altura de la página, que es
* justamente lo que le da profundidad al original.
*
* Por eso el color se le pone al CONTENEDOR de adentro (.contenedor ya
* tiene el max-width y el centrado) y no a la franja de afuera. Lo mismo
* hacen .disposicion, .zona-inferior-logos y .sitio-pie-interior, así que
* las cuatro piezas se apilan sin costuras y forman un solo panel
* continuo desde abajo de las pestañas hasta el pie.
*/
.franja-banner {
position: relative;
}
/* El slider de portada (765px) a la izquierda y los avisos de 225px a la
derecha, igual que el módulo "Banner top" del sitio original: una franja
de ancho completo, no una columna más. En una sola línea a partir de
1024px; envuelve antes que eso (mismo criterio que el resto de la
plantilla: sin media query propia hasta que el contenido no entra). */
.franja-banner-interior {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 16px;
padding: 12px 16px;
background: var(--fondo-panel);
border: 1px solid var(--linea);
border-bottom: 0;
/* El brillo de 1px bajo el borde negro: es lo que hace que el panel
parezca tener relieve en vez de estar apoyado. La pestaña abierta lo
tapa con su ::after y por eso las dos piezas se funden. */
box-shadow: inset 0 1px 0 var(--brillo-activo);
}
/* Los dos avisos de 225px, uno al lado del otro, igual que el "float:right;
width:472px" del módulo original: el slider de publicidad (real,
Slide::publicados('publicidad')) y -si hay algo publicado en la
posición 'banner-top'- .franja-banner-radio. */
.franja-banner-publicidad {
display: flex;
flex-wrap: wrap;
flex: 1 1 225px;
min-width: 0;
gap: 16px;
}
.franja-banner-radio {
/* Ancho por contenido, no 225px fijos: el bloque puede traer MÁS de un
aviso (ver el
de más abajo) y cada uno ocupa su lugar en la fila. */
flex: 0 1 auto;
min-width: 0;
}
/*
* El bloque 'banner-top' EDITADO desde el panel: desde el 2026-09-09 ya no
* trae los floats de Joomla sino un
con los avisos uno detrás de otro
* -Radio de Cultura y Catálogo Juan Falú, cada uno un de
* 225x157-. Un
es un bloque: dentro de los 225px que tenía la caja, el
* segundo aviso bajaba a un renglón nuevo y quedaba colgando debajo del
* primero, con un hueco a la izquierda. Con el