/*
Theme Name: Red Terrassa
Theme URI: https://redterrassa.com
Description: Child theme oficial de Red Terrassa para Nectarblocks.
Author: Red Terrassa
Version: 0.43.0
Requires at least: 6.5
Requires PHP: 8.0
Template: nectar-blocks-theme
Text Domain: redterrassa
Update URI: https://github.com/edugarlao/red-terrassa
*/
/* Tipografia de marca, alojada en el propio servidor.
Archivo para titulares: es una grotesca ancha, de origen editorial, y su eje
de anchura (62-125%) permite apretar o ensanchar un titular sin cambiar de
fuente. Manrope para el texto, que ya estaba decidido.
Ninguna de las dos se pide a Google: un @import al CDN envia la IP del
visitante a un tercero en cada carga, y eso es un tratamiento de datos que
no podemos justificar. Las dos son variables, de modo que los cuatro
ficheros cubren todos los pesos y anchuras. */
@font-face {
font-family: "Archivo";
font-style: normal;
font-weight: 400 900;
font-stretch: 62% 125%;
font-display: swap;
src: url("assets/fonts/archivo-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Archivo";
font-style: normal;
font-weight: 400 900;
font-stretch: 62% 125%;
font-display: swap;
src: url("assets/fonts/archivo-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url("assets/fonts/manrope-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url("assets/fonts/manrope-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
--rt-color-rojo: #f71920;
--rt-color-rojo-accesible: #c9141e;
--rt-color-tinta: #1d1d1f;
--rt-color-gris: #62646a;
--rt-color-fondo: #f4f5f6;
--rt-color-blanco: #ffffff;
--rt-radius-sm: 0.5rem;
--rt-radius-md: 1rem;
--rt-radius-pill: 999px;
--rt-shadow-soft: 0 1rem 3rem rgb(29 29 31 / 10%);
--rt-font-body: "Manrope", Inter, system-ui, sans-serif;
--rt-font-heading: "Archivo", "Archivo Expanded", Helvetica, Arial, sans-serif;
/* Los titulares van anchos a proposito: es lo que les da el aire industrial. */
--rt-heading-stretch: 112%;
/* Sistema de movimiento. Una curva y tres duraciones para todo el sitio: si
cada pieza se mueve a su aire, el conjunto parece improvisado. */
--rt-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--rt-dur-fast: 0.18s;
--rt-dur: 0.42s;
--rt-dur-slow: 0.75s;
/* Altura reservada para la cabecera al fijar elementos con sticky. */
--rt-header-offset: 6.5rem;
}
/* Los titulares llevan la anchura de Archivo. El eje de anchura es lo que
distingue la tipografia de marca de cualquier grotesca: sin el, Archivo se
parece a todas las demas. */
h1, h2, h3, h4, h5, h6,
.rt-places__figure, .rt-events__figure, .rt-hoods__figure, .rt-hood__figure,
.rt-hood__subtitle, .rt-filtro, .rt-event-card__figure--plain span {
font-stretch: var(--rt-heading-stretch);
}
/* Una seccion a todo ancho que abre la pagina tiene que tocar la cabecera. El
tema reserva 48 px de aire sobre el contenido, que estan bien cuando lo
primero es texto y sobran cuando lo primero es una foto a sangre: deja una
franja clara entre el menu y el hero que se ve como un error. Lo decide el
envoltorio del tema, fuera del alcance del constructor, asi que se corrige
aqui. `:has()` limita la regla a las paginas que de verdad abren asi. */
@supports not selector(:has(*)) {
body.home #nectar-content-wrap { padding-top: 0; }
}
/* ============================================================
Actualidad
Misma familia que la agenda y el índice de barrios: mismo
encabezado, misma regla de dos píxeles, misma línea roja que
crece al pasar por encima. Lo que cambia es la jerarquía:
aquí manda el medio, no la fecha. Una guía que recoge lo que
otros escriben tiene que decir quién lo escribió antes de que
el lector empiece el titular, no después.
============================================================ */
.rt-news { margin:0 auto; padding:clamp(2rem,5vw,4rem) 0; max-width:min(100%,74rem); }
.rt-news__head { display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1.25rem; margin-bottom:clamp(1.5rem,3vw,2.25rem); }
.rt-news__eyebrow { flex:1 0 100%; display:flex; align-items:center; gap:.5rem; margin:0; color:var(--rt-color-rojo-accesible); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.14em; }
.rt-news__eyebrow::before { content:""; width:.5rem; height:.5rem; border-radius:999px; background:var(--rt-color-rojo); box-shadow:0 0 0 .25rem rgb(247 25 32 / 18%); }
.rt-news h2 { flex:1 1 auto; margin:0; color:var(--rt-color-tinta); font-family:var(--rt-font-heading); font-size:clamp(2.2rem,5vw,4rem); font-weight:800; letter-spacing:-.07em; line-height:.94; }
.rt-news__stat { display:flex; align-items:baseline; gap:.4rem 1rem; margin:0; flex-wrap:wrap; }
.rt-news__figure { color:var(--rt-color-tinta); font-family:var(--rt-font-heading); font-size:clamp(2.4rem,3.4vw,3.2rem); font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.06em; line-height:1; }
.rt-news__unit { align-self:end; padding-bottom:.35rem; color:var(--rt-color-gris); font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
.rt-news__intro { flex:1 0 100%; max-width:52ch; margin:0; color:var(--rt-color-gris); font-size:.95rem; line-height:1.55; }
.rt-news__list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.75rem,3.5vw,2.75rem) clamp(1.5rem,3vw,2.25rem); margin:0; padding:clamp(1.5rem,3vw,2.25rem) 0 0; list-style:none; border-top:2px solid var(--rt-color-tinta); }
.rt-news-card { position:relative; display:flex; }
.rt-news-card::after { content:""; position:absolute; right:0; bottom:-1px; left:0; height:2px; background:var(--rt-color-rojo); transform:scaleX(0); transform-origin:left; transition:transform var(--rt-dur) var(--rt-ease); }
.rt-news-card:hover::after,.rt-news-card:focus-within::after { transform:scaleX(1); }
.rt-news-card__link { display:flex; flex-direction:column; flex:1 1 auto; padding-bottom:1.15rem; border-bottom:1px solid rgb(29 29 31 / 12%); color:inherit; text-decoration:none; }
/* Las fotos llegan de seis medios distintos y en proporciones
distintas, así que el hueco manda y la imagen se recorta. */
.rt-news-card__figure { display:block; margin:0 0 1rem; aspect-ratio:16/10; border-radius:.9rem; overflow:hidden; background:var(--rt-color-fondo); }
.rt-news-card__figure img { display:block; width:100%; height:100%; object-fit:cover; }
.rt-news-card__body { display:flex; flex-direction:column; flex:1 1 auto; }
.rt-news-card__meta { display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem .6rem; margin-bottom:.5rem; }
.rt-news-card__medio { color:var(--rt-color-rojo-accesible); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }
.rt-news-card__cuando { color:var(--rt-color-gris); font-size:.72rem; font-weight:700; font-variant-numeric:tabular-nums; }
.rt-news-card__title { display:block; margin:0 0 .45rem; color:var(--rt-color-tinta); font-family:var(--rt-font-heading); font-size:clamp(1.05rem,1.45vw,1.28rem); font-weight:800; letter-spacing:-.04em; line-height:1.16; transition:color var(--rt-dur-fast) var(--rt-ease); }
.rt-news-card:hover .rt-news-card__title,.rt-news-card:focus-within .rt-news-card__title { color:var(--rt-color-rojo-accesible); }
.rt-news-card__excerpt { display:block; color:var(--rt-color-gris); font-size:.88rem; line-height:1.5; }
.rt-news-card__foot { display:flex; flex-wrap:wrap; gap:.35rem .5rem; margin-top:auto; padding-top:.7rem; }
.rt-news-card__firma { color:var(--rt-color-gris); font-size:.74rem; font-style:italic; }
.rt-news-card__tema { padding:.1rem .5rem; border:1px solid rgb(29 29 31 / 16%); border-radius:999px; color:var(--rt-color-gris); font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
/* Sin foto la tarjeta no se queda coja: el titular crece y ocupa
el sitio que la imagen habría tenido. */
.rt-news-card--sin-foto .rt-news-card__title { font-size:clamp(1.15rem,1.8vw,1.5rem); }
.rt-news__aviso { max-width:60ch; margin:clamp(1.75rem,3vw,2.5rem) 0 0; color:var(--rt-color-gris); font-size:.8rem; line-height:1.5; }
@media (max-width:900px) { .rt-news__list { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .rt-news__list { grid-template-columns:1fr; } }
/* ============================================================
El modulo de hoy
Monta sobre el hero y rompe su borde inferior a proposito:
es lo primero que hay que leer despues del titular, y una
pieza que pisa el borde se mira antes que una que espera su
turno. El azul profundo es el unico color frio de la web y
solo vive aqui: es lo que hace que el dia resalte sin llenar
la pagina de colores.
============================================================ */
:root {
--rt-color-dia: #0b4f71;
--rt-color-dia-clara: #8ec9e8;
}
.rt-today {
position: relative;
z-index: 5;
max-width: min(100%, 74rem);
/* Monta sobre el hero lo justo para romperle el borde. Con mas solape
tapaba la entrada del hero, que es el texto que explica de que va la
web: pisar el borde llama la atencion, pisar el texto es un estorbo. */
margin: clamp(-4rem, -5vw, -2.5rem) auto 0;
border-radius: 1.25rem;
overflow: hidden;
background: var(--rt-color-dia);
box-shadow: 0 1.5rem 3.5rem rgb(11 10 14 / 28%);
color: #eef7fc;
}
.rt-today__grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr) auto;
gap: 1px;
background: rgb(255 255 255 / 16%);
}
.rt-today__cell { background: var(--rt-color-dia); padding: clamp(1.25rem, 2.5vw, 1.9rem); }
.rt-today__k { margin: 0 0 .5rem; color: var(--rt-color-dia-clara); font-size: .66rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.rt-today__temp,
.rt-today__cifra {
margin: 0;
color: #fff;
font-family: var(--rt-font-heading);
font-size: clamp(2.6rem, 6vw, 3.6rem);
font-stretch: var(--rt-heading-stretch);
font-weight: 800;
font-variant-numeric: tabular-nums;
letter-spacing: -.04em;
line-height: .9;
}
.rt-today__temp { display: flex; align-items: baseline; gap: .1rem .5rem; flex-wrap: wrap; }
.rt-today__grado { font-size: .7em; }
.rt-today__temp small { color: var(--rt-color-dia-clara); font-family: var(--rt-font-body); font-size: .9rem; font-weight: 700; font-stretch: normal; letter-spacing: 0; }
.rt-today__dato { max-width: 22ch; margin: .45rem 0 0; color: #d3e9f5; font-size: .88rem; line-height: 1.4; }
.rt-today__accion { display: flex; background: var(--rt-color-dia); }
.rt-today__boton {
display: flex; align-items: center; gap: .75rem;
padding: 0 clamp(1.25rem, 2.5vw, 2rem);
background: var(--rt-color-rojo);
color: #fff; font-size: .92rem; font-weight: 800; letter-spacing: -.01em;
text-decoration: none; white-space: nowrap;
transition: background var(--rt-dur-fast) var(--rt-ease);
}
.rt-today__boton:hover, .rt-today__boton:focus-visible { background: var(--rt-color-rojo-accesible); color: #fff; }
.rt-today__flecha { transition: transform var(--rt-dur) var(--rt-ease); }
.rt-today__boton:hover .rt-today__flecha { transform: translateX(.35rem); }
@media (max-width: 1000px) {
.rt-today__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rt-today__accion { grid-column: 1 / -1; }
.rt-today__boton { width: 100%; justify-content: center; padding-block: 1.1rem; }
}
@media (max-width: 560px) {
.rt-today { margin-top: -2rem; }
.rt-today__grid { grid-template-columns: 1fr; }
}
/* Quien pide menos movimiento no ve ninguno. No es un adorno accesorio: el
movimiento involuntario provoca mareo a parte del publico. */
@media (prefers-reduced-motion: reduce) {
*,*::before,*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
html { scroll-behavior: auto; }
}
/* --- Utilidades de movimiento -------------------------------------------
Las apariciones van ligadas al scroll con animation-timeline, sin una sola
linea de JavaScript. Todo vive dentro de @supports: donde no haya soporte,
el contenido esta visible y quieto, que es el estado correcto por defecto. */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
@keyframes rt-rise {
from { opacity: 0; transform: translateY(1.5rem); }
to { opacity: 1; transform: none; }
}
.rt-reveal {
animation: rt-rise var(--rt-dur-slow) var(--rt-ease) both;
animation-timeline: view();
/* Entra mientras sube por el ultimo tercio y termina antes del centro,
de modo que se lee ya asentado y no en movimiento. */
animation-range: entry 5% cover 28%;
}
}
}
/* Subrayado que se dibuja de izquierda a derecha en lugar de aparecer. */
.rt-underline {
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 0 1px;
transition: background-size var(--rt-dur) var(--rt-ease);
}
a:hover .rt-underline,a:focus-visible .rt-underline,.rt-underline:hover { background-size: 100% 1px; }
/* Marco que recorta el zoom de su imagen. El zoom lo hace la imagen; el marco
solo lo contiene, que es lo que evita que el borde tiemble. */
.rt-zoom { overflow: hidden; }
.rt-zoom img { transition: transform var(--rt-dur-slow) var(--rt-ease); }
.rt-zoom:hover img,.rt-zoom:focus-within img { transform: scale(1.06); }
/* Sin `scroll-behavior: smooth`, y a proposito.
Se puso para que los saltos a un ancla no fueran secos, pero el precio lo
paga todo el mundo en cada golpe de rueda: el navegador anima tambien el
desplazamiento normal y la pagina se siente pastosa. Un salto instantaneo a
un ancla no molesta a nadie; un scroll que arrastra, si. */
body {
background: var(--rt-color-blanco);
color: var(--rt-color-tinta);
font-family: var(--rt-font-body);
}
::selection {
background: var(--rt-color-rojo);
color: var(--rt-color-blanco);
}
:where(a, button, input, select, textarea):focus-visible {
outline: 3px solid var(--rt-color-rojo);
outline-offset: 3px;
}
img {
height: auto;
}
/* Equipamientos: el mismo molde que el indice de barrios. Antes era un
recuadro granate con tarjetas dentro y un tope duro de doce, es decir, un
escaparate sobre los ciento sesenta y tantos lugares que publica la ciudad.
Ahora es un listado: reglas finas, el nombre a la izquierda y el barrio
enfrente, agrupado por sector cuando se piden todos. */
.rt-places { max-width:78rem; margin:clamp(1.5rem,3vw,2.75rem) auto clamp(3rem,6vw,5rem); padding:0 1.25rem; }
.rt-places__head { display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:1.5rem clamp(2rem,5vw,4rem); margin:0 0 clamp(1.75rem,3.5vw,2.75rem); }
.rt-places__eyebrow { flex:1 0 100%; display:flex; align-items:center; gap:.5rem; margin:0; color:var(--rt-color-rojo-accesible); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.14em; }
.rt-places__eyebrow::before { content:""; width:.5rem; height:.5rem; border-radius:999px; background:var(--rt-color-rojo); box-shadow:0 0 0 .25rem rgb(247 25 32 / 18%); }
.rt-places h2 { flex:1 1 auto; max-width:none; margin:0; color:var(--rt-color-tinta); font-family:var(--rt-font-heading); font-size:clamp(2.2rem,5vw,4rem); font-weight:800; letter-spacing:-.07em; line-height:.94; }
.rt-places__stat { display:flex; flex-wrap:wrap; align-items:end; gap:.35rem clamp(1.5rem,3vw,2.5rem); margin:0; }
.rt-places__figure { flex:0 0 auto; color:var(--rt-color-tinta); font-family:var(--rt-font-heading); font-size:clamp(2.4rem,3.4vw,3.2rem); font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.06em; line-height:1; }
.rt-places__unit { flex:0 0 auto; align-self:end; padding-bottom:.35rem; color:var(--rt-color-gris); font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
.rt-places__intro { flex:1 0 100%; max-width:52ch; margin:0; color:var(--rt-color-gris); font-size:.95rem; line-height:1.55; }
/* El sector encabeza su grupo y lleva su cifra al otro extremo: en un listado
largo es lo que permite saltar directo a lo que se busca. */
.rt-places__sector { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin:clamp(2rem,4vw,3rem) 0 0; padding-bottom:.6rem; color:var(--rt-color-tinta); font-family:var(--rt-font-heading); font-size:clamp(1.15rem,1.7vw,1.5rem); font-weight:800; letter-spacing:-.04em; }
.rt-places__sector-count { color:var(--rt-color-gris); font-size:.9rem; font-weight:800; font-variant-numeric:tabular-nums; }
.rt-places__sector + .rt-places__list { border-top-color:var(--rt-color-tinta); }
.rt-places__list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(1.5rem,4vw,3.5rem); margin:0; padding:0; border-top:2px solid var(--rt-color-tinta); }
.rt-places .rt-places__list,.rt-places .rt-places__list > li { list-style:none; }
.rt-places .rt-places__list > li::marker { content:""; }
.rt-places .rt-places__list > li::before { display:none; content:none; }
.rt-place { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:.15rem 1rem; padding:1.05rem .35rem; border-bottom:1px solid rgb(29 29 31 / 12%); transition:padding-left var(--rt-dur) var(--rt-ease); }
.rt-place::after { content:""; position:absolute; right:0; bottom:-1px; left:0; height:2px; background:var(--rt-color-rojo); transform:scaleX(0); transform-origin:left; transition:transform var(--rt-dur) var(--rt-ease); }
.rt-place:hover::after,.rt-place:focus-within::after { transform:scaleX(1); }
.rt-place:hover,.rt-place:focus-within { padding-left:.9rem; }
.rt-place__name { grid-column:1; margin:0; color:var(--rt-color-tinta); font-family:var(--rt-font-heading); font-size:clamp(1rem,1.2vw,1.12rem); font-weight:700; letter-spacing:-.03em; line-height:1.2; transition:color var(--rt-dur-fast) var(--rt-ease); }
.rt-place:hover .rt-place__name,.rt-place:focus-within .rt-place__name { color:var(--rt-color-rojo-accesible); }
.rt-place__name a { color:inherit; text-decoration:none; }
.rt-place__address { grid-column:1; margin:0; color:var(--rt-color-gris); font-size:.84rem; line-height:1.4; }
.rt-place__sector { grid-column:1; margin:.1rem 0 0; color:var(--rt-color-gris); font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.rt-places__source { margin:clamp(1.5rem,3vw,2.25rem) 0 0; color:var(--rt-color-gris); font-size:.8rem; line-height:1.5; }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
/* Misma aparicion que las entradas del indice; rt-hood-in se declara mas
abajo bajo estas dos mismas condiciones. */
.rt-place { animation:rt-hood-in var(--rt-dur) var(--rt-ease) both; animation-timeline:view(); animation-range:entry 0% cover 16%; }
}
}
/* Cabecera creada con Theme Builder. */
header.nectar_template__header_navigation {
position: relative;
border-bottom: 1px solid #e7e8ea;
background: var(--rt-color-blanco);
}
header.nectar_template__header_navigation > .wp-block-group {
align-items: center;
gap: clamp(1.25rem, 3vw, 3rem);
min-height: 5.75rem;
}
header.nectar_template__header_navigation .wp-block-site-logo img {
display: block;
width: 4.5rem !important;
max-width: 4.5rem !important;
}
#block-HIq4wYwkZ8 .wp-block-page-list {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
}
#block-HIq4wYwkZ8 .wp-block-navigation-item__content {
border-radius: var(--rt-radius-pill);
color: var(--rt-color-tinta) !important;
font-size: 0.9375rem;
font-weight: 650;
padding: 0.5rem 0.625rem;
}
#block-HIq4wYwkZ8 .wp-block-navigation-item__content:hover,
#block-HIq4wYwkZ8 .current-menu-item > .wp-block-navigation-item__content {
background: #fff0f0;
color: var(--rt-color-rojo-accesible) !important;
}
body.home #nectar-content-wrap {
background: var(--rt-color-fondo);
padding: clamp(1.75rem, 4vw, 3rem) 0 clamp(4rem, 10vw, 8rem);
}
/* ...salvo cuando la portada abre con una seccion a sangre. Ese aire lo puso
esta misma hoja cuando la portada empezaba con un titular; con una foto a
todo ancho deja una franja clara entre el menu y el hero que se ve como un
error. El fondo se conserva: lo unico que sobra es el espacio de arriba. */
body.home #nectar-content-wrap:has(> .nectar-content > .wp-block-nectar-blocks-row.alignfull:first-child) {
padding-top: 0;
}
body.home #nectar-content-wrap .nectar-content {
margin: 0 auto;
}
/* Aqui habia una regla que daba color, familia, tamano, peso y un ancho
maximo de 32ch a **todos** los bloques de texto de la portada. Tenia
sentido cuando la portada era un titular y un parrafo sueltos. Desde que
esta construida con el constructor pisa cada texto de cada seccion y se
pelea con lo que se decida en el panel: el titular de «Lo que hay dentro»
salia en Manrope de 30 px y partido en columna estrecha, en vez de en
Archivo al tamano de su bloque. Una hoja no debe decidir por bloques que
todavia no existen. */
/* Agenda: el mismo molde que el indice de barrios -- antetitulo, titular y
cifra sobre la linea base, regla fina y ninguna caja de color -- mas la
imagen que publica la fuente, que es lo que de verdad distingue un acto de
otro en una rejilla de veinticuatro. Antes era un recuadro naranja con
tarjetas dentro, un lenguaje que no comparte con el resto del sitio. */
.rt-events { max-width:78rem; margin:clamp(1.5rem,3vw,2.75rem) auto clamp(3rem,6vw,5rem); padding:0 1.25rem; }
.rt-events__head { display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:1.5rem clamp(2rem,5vw,4rem); margin:0 0 clamp(1.75rem,3.5vw,2.75rem); }
.rt-events__eyebrow { flex:1 0 100%; display:flex; align-items:center; gap:.5rem; margin:0; color:var(--rt-color-rojo-accesible); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.14em; }
.rt-events__eyebrow::before { content:""; width:.5rem; height:.5rem; border-radius:999px; background:var(--rt-color-rojo); box-shadow:0 0 0 .25rem rgb(247 25 32 / 18%); }
.rt-events h2 { flex:1 1 auto; margin:0; color:var(--rt-color-tinta); font-family:var(--rt-font-heading); font-size:clamp(2.2rem,5vw,4rem); font-weight:800; letter-spacing:-.07em; line-height:.94; }
.rt-events__stat { display:flex; align-items:end; gap:.35rem clamp(1.5rem,3vw,2.5rem); margin:0; }
.rt-events__figure { flex:0 0 auto; color:var(--rt-color-tinta); font-family:var(--rt-font-heading); font-size:clamp(2.4rem,3.4vw,3.2rem); font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.06em; line-height:1; }
.rt-events__unit { flex:0 0 auto; align-self:end; padding-bottom:.35rem; color:var(--rt-color-gris); font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
.rt-events__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.75rem,3.5vw,2.75rem) clamp(1.5rem,3vw,2.25rem); padding-top:clamp(1.5rem,3vw,2.25rem); border-top:2px solid var(--rt-color-tinta); }
.rt-event-card { position:relative; display:flex; flex-direction:column; padding-bottom:1.15rem; border-bottom:1px solid rgb(29 29 31 / 12%); background:none; box-shadow:none; min-height:0; }
/* La misma linea roja que crece bajo la entrada senalada en el indice. */
.rt-event-card::after { content:""; position:absolute; right:0; bottom:-1px; left:0; height:2px; background:var(--rt-color-rojo); transform:scaleX(0); transform-origin:left; transition:transform var(--rt-dur) var(--rt-ease); }
.rt-event-card:hover::after,.rt-event-card:focus-within::after { transform:scaleX(1); }
/* La imagen llega en proporciones distintas -- carteles verticales y fotos
apaisadas en la misma rejilla -- asi que el hueco manda y la imagen se
recorta. Deformarlas para que encajen estropearia los carteles. */
.rt-event-card__figure { margin:0 0 1.1rem; aspect-ratio:4/3; border-radius:.9rem; background:var(--rt-color-fondo); }
.rt-event-card__figure img { display:block; width:100%; height:100%; object-fit:cover; }
/* El enlace ocupa el hueco entero: si no, sólo se podría tocar la franja que
la imagen deje libre, que en una foto recortada es ninguna. */
.rt-event-card__figure a { display:block; width:100%; height:100%; }
.rt-event-card__figure--plain { display:grid; place-items:center; }
.rt-event-card__figure--plain span { color:rgb(29 29 31 / 14%); font-family:var(--rt-font-heading); font-size:clamp(2rem,4vw,3rem); font-weight:800; letter-spacing:-.06em; }
.rt-event-card__body { display:flex; flex-direction:column; flex:1 1 auto; }
.rt-event-card h3 { margin:0 0 .5rem; color:var(--rt-color-tinta); font-family:var(--rt-font-heading); font-size:clamp(1.1rem,1.5vw,1.35rem); font-weight:800; letter-spacing:-.04em; line-height:1.14; transition:color var(--rt-dur-fast) var(--rt-ease); }
.rt-event-card:hover h3,.rt-event-card:focus-within h3 { color:var(--rt-color-rojo-accesible); }
.rt-event-card h3 a { color:inherit; text-decoration:none; }
.rt-event-card__place { margin:0; color:var(--rt-color-gris); font-size:.88rem; line-height:1.45; }
/* Agenda: la fecha manda, porque es lo que decide si un acto sirve o no. */
.rt-event-card__date { margin:0 0 .45rem; color:var(--rt-color-rojo-accesible); font-size:.74rem; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:.09em; text-transform:uppercase; }
.rt-event-card__meta { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:.85rem 0 0; padding-top:.2rem; }
.rt-event-card__category { margin:0; color:var(--rt-color-gris); font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.rt-event-card__free { padding:.2rem .55rem; border-radius:var(--rt-radius-pill); background:#dff5ed; color:#076145; font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.rt-event-card__price { margin:0; color:var(--rt-color-gris); font-size:.8rem; font-weight:700; }
.rt-events__source { margin:clamp(1.5rem,3vw,2.25rem) 0 0; color:var(--rt-color-gris); font-size:.8rem; line-height:1.5; }
.rt-events--empty { max-width:78rem; margin:clamp(2rem,5vw,4.5rem) auto; padding:1.5rem; border-radius:1.1rem; background:var(--rt-color-fondo); box-shadow:none; }
.rt-events--empty p { margin:0; color:var(--rt-color-gris); font-size:1rem; font-weight:600; }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
/* Reutiliza rt-hood-in, declarado mas abajo bajo estas mismas dos
condiciones: las tarjetas aparecen igual que las entradas del indice. */
.rt-event-card { animation:rt-hood-in var(--rt-dur) var(--rt-ease) both; animation-timeline:view(); animation-range:entry 0% cover 14%; }
}
}
/* De tableta, dos columnas: con tres, la imagen se queda sin tamano util. */
@media (max-width: 1100px) {
.rt-events__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* El barrio de un equipamiento: dato de contexto, enfrente del nombre. */
.rt-place__barrio { grid-column:2; grid-row:1; align-self:baseline; margin:0; color:var(--rt-color-rojo-accesible); font-size:.72rem; font-weight:800; letter-spacing:.06em; text-align:right; text-transform:uppercase; }
/* Indice de barrios: encabezado fijo a la izquierda mientras los cuarenta y
dos nombres corren a la derecha. Un listado largo con su titulo perdido
arriba obliga a recordar que se esta leyendo; asi el contexto no se va. */
.rt-hoods { max-width:78rem; margin:clamp(1.5rem,3vw,2.75rem) auto clamp(3rem,6vw,5rem); padding:0 1.25rem; }
/* Titulo a la izquierda y cifras a la derecha, sobre la misma linea base: el
dato acompana al titular en lugar de empujarlo hacia abajo. */
.rt-hoods__head { display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:1.5rem clamp(2rem,5vw,4rem); margin:0 0 clamp(1.75rem,3.5vw,2.75rem); }
/* El antetitulo ocupa su propia linea para que el titular quede a la
izquierda y las cifras enfrente, y no al reves. */
.rt-hoods__eyebrow { flex:1 0 100%; display:flex; align-items:center; gap:.5rem; margin:0; color:var(--rt-color-rojo-accesible); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.14em; }
.rt-hoods h1 { flex:1 1 auto; }
.rt-hoods__eyebrow::before { content:""; width:.5rem; height:.5rem; border-radius:999px; background:var(--rt-color-rojo); box-shadow:0 0 0 .25rem rgb(247 25 32 / 18%); }
.rt-hoods h1 { margin:0; color:var(--rt-color-tinta); font-family:var(--rt-font-heading); font-size:clamp(2.2rem,5vw,4rem); font-weight:800; letter-spacing:-.07em; line-height:.94; }
/* Las cifras mandan; la unidad las acompaña debajo, en pequeño. */
.rt-hoods__stat { display:flex; flex-wrap:wrap; align-items:end; gap:.35rem clamp(1.5rem,3vw,2.5rem); margin:0; }
.rt-hoods__figure { flex:0 0 auto; color:var(--rt-color-tinta); font-family:var(--rt-font-heading); font-size:clamp(2.4rem,3.4vw,3.2rem); font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.06em; line-height:1; }
.rt-hoods__unit { flex:0 0 auto; align-self:end; padding-bottom:.35rem; color:var(--rt-color-gris); font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
.rt-hoods__intro { flex:1 0 100%; max-width:52ch; margin:0; color:var(--rt-color-gris); font-size:.95rem; line-height:1.55; }
.rt-hoods__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:clamp(1.5rem,4vw,3.5rem); margin:0; padding:0; border-top:2px solid var(--rt-color-tinta); }
.rt-hoods .rt-hoods__grid,.rt-hoods .rt-hoods__grid > li { list-style:none; }
.rt-hoods .rt-hoods__grid > li::marker { content:""; }
.rt-hoods .rt-hoods__grid > li::before { display:none; content:none; }
.rt-hood-card { position:relative; display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:1.05rem .35rem; border-bottom:1px solid rgb(29 29 31 / 12%); transition:padding-left var(--rt-dur) var(--rt-ease); }
/* La linea roja crece bajo la entrada senalada, sobre la regla fina gris. */
.rt-hood-card::after { content:""; position:absolute; right:0; bottom:-1px; left:0; height:2px; background:var(--rt-color-rojo); transform:scaleX(0); transform-origin:left; transition:transform var(--rt-dur) var(--rt-ease); }
.rt-hood-card:hover::after,.rt-hood-card:focus-within::after { transform:scaleX(1); }
.rt-hood-card:hover,.rt-hood-card:focus-within { padding-left:.9rem; }
.rt-hood-card h3 { margin:0; color:var(--rt-color-tinta); font-family:var(--rt-font-heading); font-size:clamp(1rem,1.2vw,1.12rem); font-weight:700; letter-spacing:-.03em; line-height:1.2; transition:color var(--rt-dur-fast) var(--rt-ease); }
.rt-hood-card__count { flex:none; margin:0; color:var(--rt-color-gris); font-size:.92rem; font-weight:800; font-variant-numeric:tabular-nums; transition:color var(--rt-dur-fast) var(--rt-ease),transform var(--rt-dur) var(--rt-ease); }
.rt-hood-card:hover h3,.rt-hood-card:focus-within h3 { color:var(--rt-color-rojo-accesible); }
.rt-hood-card:hover .rt-hood-card__count,.rt-hood-card:focus-within .rt-hood-card__count { color:var(--rt-color-tinta); transform:scale(1.12); }
.rt-hood-card a { display:contents; color:inherit; text-decoration:none; }
.rt-hoods__source { margin:clamp(1.5rem,3vw,2.25rem) 0 0; color:var(--rt-color-gris); font-size:.8rem; line-height:1.5; }
.rt-hoods--empty { display:block; color:var(--rt-color-gris); }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
@keyframes rt-hood-in { from { opacity:0; transform:translateY(.9rem); } to { opacity:1; transform:none; } }
.rt-hood-card { animation:rt-hood-in var(--rt-dur) var(--rt-ease) both; animation-timeline:view(); animation-range:entry 0% cover 16%; }
}
}
/* --- Cabecera ------------------------------------------------------------
La cabecera la construye Nectarblocks y su configuracion vive en los
atributos de sus bloques, no en clases reutilizables: su CSS se genera en el
editor al guardar y se guarda en la meta del propio template. Por eso los
retoques finos van aqui, apuntando a sus clases reales, y no editando la
plantilla: lo editado por REST no regeneraria ese CSS.
Todo lo de abajo esta acotado al header para no alcanzar otros menus. */
/* Barra de avance de lectura. Cuelga del body y no del header porque el header
es relative: asi la barra queda fija arriba pase lo que pase con el. */
@supports (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) {
body::after {
content: "";
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 3px;
background: linear-gradient(90deg, var(--rt-color-rojo), #ff6b5e);
transform: scaleX(0);
transform-origin: 0 50%;
animation: rt-avance linear both;
animation-timeline: scroll(root);
pointer-events: none;
}
@keyframes rt-avance { to { transform: scaleX(1); } }
/* Con sesion abierta, la barra de WordPress ocupa la franja superior y
taparia el avance. Solo lo ve quien administra, pero verlo mal es peor
que no tenerlo. */
body.admin-bar::after { top: 32px; }
@media screen and (max-width: 782px) {
body.admin-bar::after { top: 46px; }
}
}
}
/* La cabecera venia limitada a 1400px con sesenta pixeles de margen a cada
lado, de modo que quedaba mas estrecha que el resto de la pagina y se leia
como recortada. A ancho completo se apoya en los bordes de la ventana y el
aire pasa a ser relleno interior, que es lo que hace que una cabecera
parezca acabada y no una caja centrada. */
header.nectar_template__header_navigation.container {
width: 100%;
max-width: 100%;
margin-inline: 0;
padding-inline: clamp(1.25rem, 3.5vw, 3.5rem);
}
/* La franja junto al logo y junto a la lupa es el relleno lateral de la
cabecera: la fila interior ya ocupa todo el area de contenido, de modo que
en esos dos margenes asoma el fondo de la cabecera y no el de la fila. Con
dos fondos distintos -y el de la fila volviendose traslucido al bajar- la
juntura se ve.
La solucion es que el fondo lo lleve solo la cabecera, que es la que abarca
todo el ancho. El !important es necesario y no un atajo: Nectarblocks genera
el estilo de sus bloques con el id del bloque, y un selector de id gana a
cualquier combinacion de clases. Editar esa regla en el constructor no es
opcion, porque su CSS se guarda en la meta del template y no se regenera
desde aqui. */
header.nectar_template__header_navigation > .nectar-blocks-row {
background-color: transparent !important;
backdrop-filter: none !important;
box-shadow: none !important;
}
/* La cabecera se encoge al bajar. Nectarblocks trae configurado un estado
"scrolled" en los atributos de su bloque, pero no llega a aplicarse: el
header no cambia de clase al desplazarse, comprobado en produccion. En vez
de depender de una clase que no aparece, el encogido se liga al scroll con
el mismo mecanismo que el resto del sitio, sin JavaScript.
Va de cero a 180 px de recorrido: lo que se tarda en empezar a leer. */
@supports (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
/* El fondo traslucido, el desenfoque y la sombra pasan aqui, a la cabecera
entera, para que no haya juntura: es el mismo efecto que Nectarblocks
tenia configurado en la fila, aplicado donde si cubre todo el ancho. */
/* El fondo, el desenfoque y la sombra viven en un pseudoelemento y no en la
cabecera, y es deliberado: backdrop-filter sobre la propia cabecera la
convierte en bloque contenedor, y entonces el panel del menu movil -que
es position:fixed y cuelga de ella- se queda encerrado en sus 105 px de
alto en lugar de cubrir la pantalla. Medido en produccion el 16-sep: el
panel salia de 176 px con 478 px de contenido dentro. El efecto visual
es identico; lo que cambia es quien lo pinta. */
@keyframes rt-cabecera {
from { padding-block: 1rem; }
to { padding-block: .3rem; }
}
@keyframes rt-cabecera-fondo {
from { background-color: rgb(255 255 255 / 100%); box-shadow: 0 0 0 rgb(29 29 31 / 0%); }
to { background-color: rgb(255 255 255 / 88%); box-shadow: 0 .55rem 2rem rgb(29 29 31 / 9%); }
}
header.nectar_template__header_navigation.container {
background-color: transparent;
animation: rt-cabecera linear both;
animation-timeline: scroll(root);
animation-range: 0 180px;
}
header.nectar_template__header_navigation.container::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
pointer-events: none;
animation: rt-cabecera-fondo linear both;
animation-timeline: scroll(root);
animation-range: 0 180px;
}
@keyframes rt-logo-cabecera {
from { width: 4.5rem; }
to { width: 3.1rem; }
}
header.nectar_template__header_navigation .wp-block-nectar-blocks-image img {
animation: rt-logo-cabecera linear both;
animation-timeline: scroll(root);
animation-range: 0 180px;
}
}
}
/* El menu venia en peso normal a 15px, que en una cabecera sobre blanco se lee
flojo. Con mas peso y el tracking justo gana presencia sin crecer. */
header.nectar_template__header_navigation .wp-block-navigation-item__content {
font-weight: 600;
letter-spacing: -.012em;
transition: color var(--rt-dur-fast) var(--rt-ease);
}
header.nectar_template__header_navigation .wp-block-navigation-item:hover > .wp-block-navigation-item__content { color: var(--rt-color-rojo-accesible); }
/* La pagina en la que estas se dice con peso y color, no solo con el fondo que
pinta Nectarblocks: ese fondo tambien sigue al raton. */
header.nectar_template__header_navigation .current-menu-item > .wp-block-navigation-item__content,
header.nectar_template__header_navigation .current-menu-ancestor > .wp-block-navigation-item__content {
color: var(--rt-color-rojo-accesible);
font-weight: 700;
}
/* El logo responde al raton, discreto: es un enlace a la portada y conviene
que lo parezca. */
header.nectar_template__header_navigation .wp-block-nectar-blocks-image img {
transition: transform var(--rt-dur) var(--rt-ease);
}
header.nectar_template__header_navigation .wp-block-nectar-blocks-image a:hover img,
header.nectar_template__header_navigation .wp-block-nectar-blocks-image a:focus-visible img { transform: scale(1.06); }
/* Buscador: el icono se tine al acercarse y el foco se ve, que es lo que falta
casi siempre en las cabeceras. */
header.nectar_template__header_navigation .nectar-blocks-search button:hover,
header.nectar_template__header_navigation .nectar-blocks-search a:hover { color: var(--rt-color-rojo-accesible); }
header.nectar_template__header_navigation a:focus-visible,
header.nectar_template__header_navigation button:focus-visible {
outline: 2px solid var(--rt-color-rojo);
outline-offset: 3px;
border-radius: .35rem;
}
/* Vista aerea del barrio: una banda ancha antes del encabezado. El zoom lo
hace la imagen dentro de su marco, con .rt-zoom del sistema de movimiento. */
.rt-hood-photo { position:relative; box-sizing:border-box; max-width:78rem; margin:clamp(1.25rem,2.5vw,2rem) auto 0; padding:0 1.25rem; }
.rt-hood-photo img { display:block; width:100%; height:clamp(11rem,26vw,20rem); object-fit:cover; border-radius:1.25rem; background:var(--rt-color-fondo); }
/* El credito va sobre la imagen, en su esquina, para no robar aire al titular
que viene justo debajo. El degradado lo mantiene legible sobre cualquier
tejado. */
.rt-hood-photo figcaption { position:absolute; right:0; bottom:0; left:0; padding:2.5rem 1.25rem .8rem; border-radius:0 0 1.25rem 1.25rem; background:linear-gradient(transparent,rgb(0 0 0 / 55%)); color:#fff; font-size:.72rem; text-align:right; }
.rt-hood-photo figcaption a { color:#fff; text-decoration:underline; text-underline-offset:.15em; }
/* Pagina de un barrio. Misma reja que el indice para que se reconozca como la
misma familia: encabezado fijo a la izquierda, contenido a la derecha. */
.rt-hood { display:grid; grid-template-columns:minmax(0,19rem) minmax(0,1fr); column-gap:clamp(2rem,6vw,6rem); max-width:78rem; margin:clamp(1.75rem,3vw,2.75rem) auto clamp(3rem,6vw,5rem); padding:0 1.25rem; }
.rt-hood__head { position:sticky; top:var(--rt-header-offset); align-self:start; padding-bottom:2rem; }
.rt-hood--unknown { margin-top:clamp(2rem,5vw,4rem); }
.rt-hood__eyebrow { margin:0 0 1rem; font-size:.8rem; font-weight:700; }
.rt-hood__eyebrow a { display:inline-flex; gap:.4rem; color:var(--rt-color-rojo-accesible); text-decoration:none; }
.rt-hood h2 { margin:0; color:var(--rt-color-tinta); font-family:var(--rt-font-heading); font-size:clamp(2.2rem,4vw,3.4rem); font-weight:800; letter-spacing:-.07em; line-height:.96; }
.rt-hood__stat { display:flex; flex-wrap:wrap; align-items:end; gap:.35rem .9rem; margin:1.75rem 0 0; }
.rt-hood__figure { color:var(--rt-color-tinta); font-family:var(--rt-font-heading); font-size:clamp(2.4rem,3.4vw,3.2rem); font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.06em; line-height:1; }
.rt-hood__unit { padding-bottom:.35rem; color:var(--rt-color-gris); font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
.rt-hood__list { margin:0; padding:0; border-top:2px solid var(--rt-color-tinta); }
.rt-hood .rt-hood__list,.rt-hood .rt-hood__list > li { list-style:none; }
.rt-hood .rt-hood__list > li::marker { content:""; }
.rt-hood .rt-hood__list > li::before { display:none; content:none; }
.rt-hood-place { position:relative; padding:1.35rem .35rem; border-bottom:1px solid rgb(29 29 31 / 12%); transition:padding-left var(--rt-dur) var(--rt-ease); }
.rt-hood-place::after { content:""; position:absolute; right:0; bottom:-1px; left:0; height:2px; background:var(--rt-color-rojo); transform:scaleX(0); transform-origin:left; transition:transform var(--rt-dur) var(--rt-ease); }
.rt-hood-place:hover::after,.rt-hood-place:focus-within::after { transform:scaleX(1); }
.rt-hood-place:hover,.rt-hood-place:focus-within { padding-left:.9rem; }
.rt-hood-place h3 { margin:0 0 .35rem; color:var(--rt-color-tinta); font-family:var(--rt-font-heading); font-size:clamp(1.05rem,1.4vw,1.25rem); font-weight:700; letter-spacing:-.03em; line-height:1.2; }
.rt-hood-place h3 a { color:inherit; text-decoration:none; }
.rt-hood-place:hover h3 a,.rt-hood-place h3 a:focus-visible { color:var(--rt-color-rojo-accesible); }
.rt-hood-place__address { margin:0; color:var(--rt-color-gris); font-size:.9rem; line-height:1.45; }
.rt-hood-place__sector { margin:.45rem 0 0; color:var(--rt-color-rojo-accesible); font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.09em; }
.rt-hood__source,.rt-hood__empty { grid-column:2; margin:clamp(1.25rem,3vw,2rem) 0 0; color:var(--rt-color-gris); font-size:.82rem; line-height:1.55; }
.rt-hood--unknown { grid-template-columns:1fr; }
.rt-hood--unknown .rt-hood__head { position:static; }
.rt-hood--unknown .rt-hood__empty { grid-column:1; max-width:46ch; font-size:1rem; }
/* En la pagina de un barrio, el titulo de la pagina indice y su entradilla
sobran: el encabezado ya es el nombre del barrio. Se ocultan desde el body,
que es lo unico que sabe en que vista estamos. */
/* La cabecera de la plantilla sobra en toda la seccion: el encabezado real lo
pone el shortcode. Se retira la fila entera y no solo su titulo, porque
conserva ochenta pixeles de relleno aunque este vacia. */
.rt-pagina-barrios .row.page-header-no-bg,
.rt-pagina-barrios .section-title { display:none; }
.rt-pagina-barrios .nectar-blocks-text:first-of-type { display:none; }
/* Actividades del barrio, debajo de sus equipamientos. */
.rt-hood__agenda { grid-column:2; margin-top:clamp(2.5rem,5vw,4rem); }
.rt-hood__subtitle { margin:0 0 1.25rem; color:var(--rt-color-tinta); font-family:var(--rt-font-heading); font-size:clamp(1.4rem,2vw,1.85rem); font-weight:800; letter-spacing:-.045em; }
.rt-hood-event { position:relative; padding:1.35rem .35rem; border-bottom:1px solid rgb(29 29 31 / 12%); transition:padding-left var(--rt-dur) var(--rt-ease); }
.rt-hood-event::after { content:""; position:absolute; right:0; bottom:-1px; left:0; height:2px; background:var(--rt-color-rojo); transform:scaleX(0); transform-origin:left; transition:transform var(--rt-dur) var(--rt-ease); }
.rt-hood-event:hover::after,.rt-hood-event:focus-within::after { transform:scaleX(1); }
.rt-hood-event:hover,.rt-hood-event:focus-within { padding-left:.9rem; }
.rt-hood-event__date { margin:0 0 .3rem; color:var(--rt-color-rojo-accesible); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.09em; }
.rt-hood-event h3 { margin:0 0 .3rem; color:var(--rt-color-tinta); font-family:var(--rt-font-heading); font-size:clamp(1.05rem,1.4vw,1.25rem); font-weight:700; letter-spacing:-.03em; line-height:1.25; }
.rt-hood-event h3 a { color:inherit; text-decoration:none; }
.rt-hood-event:hover h3 a,.rt-hood-event h3 a:focus-visible { color:var(--rt-color-rojo-accesible); }
.rt-hood-event__venue { margin:0; color:var(--rt-color-gris); font-size:.9rem; }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.rt-hood-place,.rt-hood-event { animation:rt-hood-in var(--rt-dur) var(--rt-ease) both; animation-timeline:view(); animation-range:entry 0% cover 16%; }
}
}
@media (max-width: 1100px) {
.rt-hood { grid-template-columns:1fr; }
.rt-hood__head { position:static; padding-bottom:0; margin-bottom:2.25rem; }
.rt-hood__source,.rt-hood__empty,.rt-hood__agenda { grid-column:1; }
}
@media (max-width: 1100px) {
.rt-hoods { grid-template-columns:1fr; }
.rt-hoods__head { position:static; padding-bottom:0; margin-bottom:2.25rem; }
.rt-hoods__source { grid-column:1; }
}
@media (max-width: 767px) {
.rt-places { padding-inline:1rem; }
.rt-places__head { display:block; }.rt-places__stat { margin-top:1rem; }.rt-places__intro { margin-top:1rem; }
.rt-places__list { grid-template-columns:1fr; }
.rt-hoods { padding-inline:1rem; }
.rt-hoods__grid { grid-template-columns:1fr; }
.rt-hoods h2 { letter-spacing:-.05em; }
.rt-events { padding-inline:1rem; }.rt-events__head { display:block; }.rt-events__stat { margin-top:1rem; }.rt-events__grid { grid-template-columns:1fr; }
header.nectar_template__header_navigation > .wp-block-group {
min-height: 4.75rem;
}
header.nectar_template__header_navigation .wp-block-site-logo img {
width: 3.5rem !important;
max-width: 3.5rem !important;
}
}
/* ---------------------------------------------------------------------------
Menu de movil y tablet
Lo abre el menu fuera de lienzo del propio tema, no nosotros. Hasta la 0.6.1
aqui habia un archivo de JavaScript que abria a mano el panel de WordPress,
y ese camino estaba cerrado de antemano: Nectarblocks le pone a ese panel la
clase `nectar-hidden-mobile`, que su hoja `nectar-blocks-core.css` esconde
con `@media (max-width:767px){display:none}`. Es decir, justo en el movil.
El panel bueno -`#slide-out-widget-area`- ya venia en cada pagina y su
disparador ya estaba enganchado por el tema. Lo unico que fallaba era que
llegaba sin enlaces, y eso se arregla en `functions.php` por el filtro que
el plugin declara para ello. Aqui solo queda el diseno.
--------------------------------------------------------------------------- */
/* El umbral esta medido, no elegido: la cabecera necesita 1111 px para el
logo, los ocho enlaces, el buscador y su relleno lateral. Por debajo de eso
el menu en linea no cabe, y 1200 deja fuera tambien la tablet apaisada, que
ronda los 1080-1194. */
@media (max-width: 1200px) {
/* La lista en linea se va; su sitio lo ocupa el panel. */
#nectar-nav header.nectar_template__header_navigation .wp-block-navigation__responsive-container { display: none !important; }
/* El boton, del tamano de un dedo y con el color de la tinta. Va con
#nectar-nav por delante y no es adorno: Nectarblocks esconde este boton
con display:none !important y el id de su bloque, y un id gana a
cualquier cantidad de clases aunque lleven !important. */
#nectar-nav header.nectar_template__header_navigation .nectar-ocm-trigger-open {
display: grid !important;
place-items: center;
width: 2.75rem !important;
height: 2.75rem !important;
margin-inline-start: auto;
color: var(--rt-color-tinta);
transition: color var(--rt-dur-fast) var(--rt-ease);
}
#nectar-nav header.nectar_template__header_navigation .nectar-ocm-trigger-open:hover { color: var(--rt-color-rojo-accesible); }
}
/* Por encima del umbral no hay panel ni hamburguesa. */
@media (min-width: 1201px) {
#nectar-nav header.nectar_template__header_navigation .nectar-ocm-trigger-open { display: none !important; }
}
/* El panel: fondo tinta y los enlaces en el cuerpo del titular, con la misma
regla fina que separa los barrios y los actos. Un menu a pantalla completa
es toda la navegacion del sitio en un movil, asi que se lee como una
portada y no como una lista de ajustes. */
#slide-out-widget-area.slide-out-from-right {
width: min(30rem, 100vw) !important;
padding: clamp(4.75rem, 14vw, 7rem) clamp(1.25rem, 6vw, 3.5rem) clamp(2rem, 6vw, 3.5rem) !important;
background: var(--rt-color-tinta) !important;
color: var(--rt-color-blanco);
}
#slide-out-widget-area .inner-wrap,
#slide-out-widget-area .inner { width: 100%; }
#slide-out-widget-area .off-canvas-menu-container ul.menu {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
border-top: 2px solid rgb(255 255 255 / 90%);
}
/* La segunda lista solo existe cuando hay enlaces secundarios; vacia, su
borde superior dejaria una raya suelta al final del panel. */
#slide-out-widget-area .off-canvas-menu-container ul.menu.secondary-header-items:empty { display: none; }
#slide-out-widget-area .off-canvas-menu-container ul.menu > li {
width: 100%;
margin: 0;
border-bottom: 1px solid rgb(255 255 255 / 16%);
}
#slide-out-widget-area .off-canvas-menu-container ul.menu > li > a {
display: block;
width: 100%;
padding: clamp(.7rem, 2.6vw, 1.1rem) .15rem !important;
background: none !important;
color: var(--rt-color-blanco) !important;
/* Con !important y por el motivo de siempre: el tema genera el tamano de
este menu desde sus propias opciones y gana a cualquier combinacion de
clases. Medido: sin esto el menu sale a 15 px. */
font-family: var(--rt-font-heading) !important;
font-size: clamp(1.55rem, 6.5vw, 2.4rem) !important;
font-weight: 800 !important;
letter-spacing: -.05em !important;
line-height: 1.12 !important;
text-decoration: none;
transition: color var(--rt-dur-fast) var(--rt-ease), padding-left var(--rt-dur) var(--rt-ease);
}
#slide-out-widget-area .off-canvas-menu-container ul.menu > li > a:hover,
#slide-out-widget-area .off-canvas-menu-container ul.menu > li:focus-within > a { padding-left: .8rem !important; }
/* Sobre fondo oscuro manda el rojo de marca: el accesible esta calculado para
leerse sobre blanco y aqui se apaga. */
#slide-out-widget-area .off-canvas-menu-container ul.menu > li.current-menu-item > a { color: var(--rt-color-rojo) !important; }
/* Los hijos, un escalon por debajo y sin competir con su madre. */
#slide-out-widget-area .off-canvas-menu-container ul.sub-menu { margin: 0 0 .6rem; padding: 0 0 0 .9rem; list-style: none; }
#slide-out-widget-area .off-canvas-menu-container ul.sub-menu > li { border: 0; }
#slide-out-widget-area .off-canvas-menu-container ul.sub-menu > li > a {
display: block;
padding: .3rem .15rem !important;
color: rgb(255 255 255 / 72%) !important;
font-size: 1.05rem !important;
font-weight: 600 !important;
letter-spacing: -.01em !important;
text-decoration: none;
}
#slide-out-widget-area .off-canvas-menu-container ul.sub-menu > li > a:hover { color: var(--rt-color-blanco) !important; }
#slide-out-widget-area .slide_out_area_close {
position: absolute;
top: clamp(1.1rem, 4vw, 1.9rem);
right: clamp(1.1rem, 4vw, 1.9rem);
display: grid;
place-items: center;
width: 2.9rem;
height: 2.9rem;
border-radius: var(--rt-radius-pill);
background: var(--rt-color-rojo-accesible);
color: var(--rt-color-blanco);
transition: background var(--rt-dur-fast) var(--rt-ease), transform var(--rt-dur) var(--rt-ease);
}
#slide-out-widget-area .slide_out_area_close:hover { background: var(--rt-color-rojo); transform: rotate(90deg); }
#slide-out-widget-area a:focus-visible { outline: 3px solid var(--rt-color-rojo); outline-offset: 3px; }
/* El velo de detras, a tono con la tinta en vez del gris del tema. */
#slide-out-widget-area-bg.slide-out-from-right { background: rgb(10 11 20 / 55%) !important; backdrop-filter: blur(3px); }
/* Los enlaces entran escalonados, con la curva del sitio. Sin JavaScript: el
retraso lo lleva cada uno por su posicion. */
@media (prefers-reduced-motion: no-preference) {
@keyframes rt-menu-in { from { opacity: 0; transform: translateY(.8rem); } to { opacity: 1; transform: none; } }
#slide-out-widget-area.open .off-canvas-menu-container ul.menu > li {
animation: rt-menu-in var(--rt-dur) var(--rt-ease) both;
animation-delay: calc(60ms * var(--rt-orden, 0));
}
#slide-out-widget-area.open .off-canvas-menu-container ul.menu > li:nth-child(1) { --rt-orden: 1; }
#slide-out-widget-area.open .off-canvas-menu-container ul.menu > li:nth-child(2) { --rt-orden: 2; }
#slide-out-widget-area.open .off-canvas-menu-container ul.menu > li:nth-child(3) { --rt-orden: 3; }
#slide-out-widget-area.open .off-canvas-menu-container ul.menu > li:nth-child(4) { --rt-orden: 4; }
#slide-out-widget-area.open .off-canvas-menu-container ul.menu > li:nth-child(5) { --rt-orden: 5; }
#slide-out-widget-area.open .off-canvas-menu-container ul.menu > li:nth-child(6) { --rt-orden: 6; }
#slide-out-widget-area.open .off-canvas-menu-container ul.menu > li:nth-child(7) { --rt-orden: 7; }
#slide-out-widget-area.open .off-canvas-menu-container ul.menu > li:nth-child(8) { --rt-orden: 8; }
}
/* ---------------------------------------------------------------------------
Filtros de la agenda
Sin cajas y sin fondos: cada opcion es texto con la linea roja del sitio,
la misma que marca un barrio al pasar por encima. La cifra grande del
encabezado cuenta lo filtrado en vivo, y eso es lo que ata el filtro al
resto de la pieza en lugar de dejarlo pegado encima.
--------------------------------------------------------------------------- */
.rt-filtros { display:flex; flex-wrap:wrap; align-items:flex-start; gap:clamp(1.1rem,3vw,2.5rem); margin:0 0 clamp(1.25rem,3vw,2rem); }
.rt-filtros__grupo { display:flex; flex-direction:column; gap:.4rem; }
.rt-filtros__titulo { margin:0; color:var(--rt-color-gris); font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.rt-filtros__opciones { display:flex; flex-wrap:wrap; gap:.15rem 1.1rem; }
.rt-filtros__grupo--suelto { justify-content:flex-end; padding-top:1.15rem; }
.rt-filtro { display:inline-flex; align-items:baseline; gap:.35rem; padding:.1rem 0; border:0; background:none; color:var(--rt-color-gris); font-family:var(--rt-font-heading); font-size:clamp(.95rem,1.15vw,1.05rem); font-weight:700; letter-spacing:-.02em; line-height:1.3; cursor:pointer; transition:color var(--rt-dur-fast) var(--rt-ease); }
.rt-filtro:hover { color:var(--rt-color-tinta); }
.rt-filtro__n { color:var(--rt-color-gris); font-size:.74rem; font-weight:800; font-variant-numeric:tabular-nums; opacity:.75; }
/* El activo se marca con la linea roja llena, no con un fondo: es el mismo
gesto que ya hace .rt-underline al pasar el raton, sostenido. */
.rt-filtro.is-activo { color:var(--rt-color-tinta); }
.rt-filtro.is-activo .rt-underline { background-size:100% 2px; background-image:linear-gradient(var(--rt-color-rojo),var(--rt-color-rojo)); }
.rt-filtro.is-activo .rt-filtro__n { color:var(--rt-color-rojo-accesible); opacity:1; }
/* Una opcion que ahora mismo no daria ningun acto se apaga, pero no se va: si
desapareciera, la barra bailaria a cada clic y habria que releerla entera. */
.rt-filtro.is-vacio { opacity:.32; cursor:default; }
.rt-filtro[aria-disabled="true"] .rt-underline { background-size:0 1px; }
.rt-filtro:focus-visible { outline:3px solid var(--rt-color-rojo); outline-offset:3px; }
.rt-filtros__limpiar { margin-left:auto; align-self:flex-end; padding:.1rem 0 .3rem; border:0; border-bottom:1px solid rgb(29 29 31 / 25%); background:none; color:var(--rt-color-gris); font-size:.78rem; font-weight:700; letter-spacing:.02em; cursor:pointer; transition:color var(--rt-dur-fast) var(--rt-ease),border-color var(--rt-dur-fast) var(--rt-ease); }
.rt-filtros__limpiar:hover { color:var(--rt-color-rojo-accesible); border-color:var(--rt-color-rojo); }
.rt-filtros__vacio { margin:clamp(1.5rem,4vw,3rem) 0; color:var(--rt-color-gris); font-size:1rem; font-weight:600; }
/* Una tarjeta escondida por el filtro no deja hueco en la rejilla. */
.rt-event-card[hidden] { display:none; }
@media (max-width: 767px) {
.rt-filtros { gap:1rem; }
.rt-filtros__grupo { flex:1 0 100%; }
.rt-filtros__grupo--suelto { padding-top:0; }
.rt-filtros__limpiar { margin-left:0; }
}
/* ---------------------------------------------------------------------------
Comercio. Los ramos del censo, no las 7.752 fichas.
La tarjeta la manda la cifra: en un directorio lo primero que se quiere
saber es cuantos hay, y despues como se llaman tres de ellos. Los ramos a
los que va la gente -bares, tiendas, alimentacion- llevan el filete rojo;
la venta al por mayor y la industria estan, pero no piden la vista.
--------------------------------------------------------------------------- */
.rt-shops { margin:0 auto; padding:clamp(2rem,5vw,4rem) 0; max-width:min(100%,74rem); }
.rt-shops__head { display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1.25rem; margin-bottom:clamp(1.5rem,3vw,2.25rem); }
.rt-shops__eyebrow { flex:1 0 100%; display:flex; align-items:center; gap:.5rem; margin:0; color:var(--rt-color-rojo-accesible); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.14em; }
.rt-shops__eyebrow::before { content:""; width:.5rem; height:.5rem; border-radius:999px; background:var(--rt-color-rojo); box-shadow:0 0 0 .25rem rgb(247 25 32 / 18%); }
.rt-shops h2 { flex:1 1 auto; margin:0; color:var(--rt-color-tinta); font-family:var(--rt-font-heading); font-size:clamp(2.2rem,5vw,4rem); font-weight:800; letter-spacing:-.07em; line-height:.94; }
.rt-shops__stat { display:flex; align-items:baseline; gap:.4rem 1rem; margin:0; flex-wrap:wrap; }
.rt-shops__figure { color:var(--rt-color-tinta); font-family:var(--rt-font-heading); font-size:clamp(2.4rem,3.4vw,3.2rem); font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.06em; line-height:1; }
.rt-shops__unit { align-self:end; padding-bottom:.35rem; color:var(--rt-color-gris); font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
.rt-shops__intro { flex:1 0 100%; max-width:52ch; margin:0; color:var(--rt-color-gris); font-size:.95rem; line-height:1.55; }
.rt-shops__list { display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:clamp(.9rem,2vw,1.4rem); margin:0; padding:clamp(1.5rem,3vw,2.25rem) 0 0; list-style:none; border-top:2px solid var(--rt-color-tinta); }
.rt-shop-card { display:flex; }
.rt-shop-card__link { display:grid; grid-template-columns:1fr auto; align-content:start; gap:.2rem .75rem; flex:1 1 auto; padding:1.1rem 1.15rem 1.2rem; border-radius:14px; background:var(--rt-color-fondo); color:inherit; text-decoration:none; transition:background var(--rt-dur-fast) var(--rt-ease),transform var(--rt-dur-fast) var(--rt-ease); }
.rt-shop-card__link:hover,.rt-shop-card__link:focus-visible { background:#e7e7ec; transform:translateY(-2px); }
.rt-shop-card__link:focus-visible { outline:3px solid var(--rt-color-rojo); outline-offset:3px; }
.rt-shop-card__name { align-self:center; color:var(--rt-color-tinta); font-family:var(--rt-font-heading); font-size:1.02rem; font-weight:800; letter-spacing:-.02em; line-height:1.15; }
.rt-shop-card__count { align-self:center; color:var(--rt-color-gris); font-family:var(--rt-font-heading); font-size:1.5rem; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.04em; line-height:1; }
.rt-shop-card__sample { grid-column:1 / -1; margin-top:.5rem; color:var(--rt-color-gris); font-size:.8rem; line-height:1.4; }
/* El filete rojo distingue el ramo que se busca del que solo esta. */
.rt-shop-card--calle .rt-shop-card__link { border-top:3px solid var(--rt-color-rojo); border-radius:3px 3px 14px 14px; }
.rt-shop-card--calle .rt-shop-card__count { color:var(--rt-color-rojo-accesible); }
.rt-shops__aviso { margin:clamp(1.5rem,3vw,2.25rem) 0 0; max-width:56ch; color:var(--rt-color-gris); font-size:.8rem; line-height:1.5; }
/* --- Comercio: la ficha, que es lo que se venia a buscar ------------------
La primera version mandaba al archivo de termino del tema, que solo pinta
el titulo: se llegaba a una lista de nombres sin telefono ni direccion. La
ficha lleva delante lo que sirve para ir o para llamar.
--------------------------------------------------------------------------- */
.rt-shops__subtitle { margin:clamp(2rem,4vw,3rem) 0 .9rem; color:var(--rt-color-tinta); font-family:var(--rt-font-heading); font-size:1.1rem; font-weight:800; letter-spacing:-.02em; }
.rt-shops__chips { display:flex; flex-wrap:wrap; gap:.5rem; margin:0; padding:0; list-style:none; }
.rt-shops__chip { display:inline-flex; align-items:baseline; gap:.45rem; padding:.42rem .8rem; border-radius:var(--rt-radius-pill); background:var(--rt-color-fondo); color:var(--rt-color-tinta); font-size:.84rem; font-weight:700; text-decoration:none; transition:background var(--rt-dur-fast) var(--rt-ease); }
.rt-shops__chip:hover,.rt-shops__chip:focus-visible { background:#e7e7ec; }
.rt-shops__chip-count { color:var(--rt-color-gris); font-size:.74rem; font-variant-numeric:tabular-nums; }
.rt-shops__back { color:var(--rt-color-rojo-accesible); font-weight:800; text-decoration:none; letter-spacing:0; text-transform:none; font-size:.82rem; }
.rt-shops__back:hover { text-decoration:underline; }
.rt-shops__fichas { display:grid; grid-template-columns:repeat(auto-fill,minmax(17rem,1fr)); gap:clamp(.8rem,1.8vw,1.15rem); margin:0; padding:clamp(1.5rem,3vw,2.25rem) 0 0; list-style:none; border-top:2px solid var(--rt-color-tinta); }
.rt-shop { display:flex; flex-direction:column; gap:.3rem; padding:1.05rem 1.1rem 1.1rem; border-radius:14px; background:var(--rt-color-fondo); }
.rt-shop__name { margin:0; color:var(--rt-color-tinta); font-family:var(--rt-font-heading); font-size:1rem; font-weight:800; letter-spacing:-.02em; line-height:1.2; }
.rt-shop__what { margin:0; color:var(--rt-color-gris); font-size:.78rem; line-height:1.35; }
.rt-shop__where { display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .55rem; margin:.15rem 0 0; font-size:.84rem; line-height:1.4; }
.rt-shop__address { color:var(--rt-color-tinta); }
.rt-shop__hood { color:var(--rt-color-gris); font-size:.76rem; font-weight:700; text-decoration:none; border-bottom:1px solid rgb(29 29 31 / 22%); }
.rt-shop__hood:hover { color:var(--rt-color-rojo-accesible); border-color:var(--rt-color-rojo); }
.rt-shop__actions { display:flex; flex-wrap:wrap; gap:.4rem; margin:.55rem 0 0; }
.rt-shop__actions:empty { display:none; }
.rt-shop__action { padding:.3rem .65rem; border:1px solid rgb(29 29 31 / 16%); border-radius:var(--rt-radius-pill); background:var(--rt-color-blanco); color:var(--rt-color-tinta); font-size:.78rem; font-weight:700; text-decoration:none; transition:border-color var(--rt-dur-fast) var(--rt-ease),color var(--rt-dur-fast) var(--rt-ease); }
.rt-shop__action:hover,.rt-shop__action:focus-visible { border-color:var(--rt-color-rojo); color:var(--rt-color-rojo-accesible); }
.rt-shop__action--phone { font-variant-numeric:tabular-nums; }
.rt-shops__pages { display:flex; align-items:center; gap:1rem; margin:clamp(1.5rem,3vw,2.25rem) 0 0; }
.rt-shops__page { color:var(--rt-color-rojo-accesible); font-size:.86rem; font-weight:800; text-decoration:none; }
.rt-shops__page:hover { text-decoration:underline; }
.rt-shops__page-count { color:var(--rt-color-gris); font-size:.8rem; font-variant-numeric:tabular-nums; }
.rt-shops__vacio { margin:clamp(1.5rem,4vw,3rem) 0; color:var(--rt-color-gris); font-size:1rem; font-weight:600; }
/* --- Trabajo y formacion --------------------------------------------------
Dos listados con el mismo esqueleto que los demas. El curso con la
inscripcion abierta va marcado: de los treinta que se dan en Terrassa solo
unos pocos admiten apuntarse hoy, y sin marcarlo habria que abrirlos todos.
--------------------------------------------------------------------------- */
.rt-jobs,.rt-courses { margin:0 auto; padding:clamp(2rem,5vw,4rem) 0; max-width:min(100%,74rem); }
.rt-jobs__head,.rt-courses__head { display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1.25rem; margin-bottom:clamp(1.5rem,3vw,2.25rem); }
.rt-jobs__eyebrow,.rt-courses__eyebrow { flex:1 0 100%; display:flex; align-items:center; gap:.5rem; margin:0; color:var(--rt-color-rojo-accesible); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.14em; }
.rt-jobs__eyebrow::before,.rt-courses__eyebrow::before { content:""; width:.5rem; height:.5rem; border-radius:999px; background:var(--rt-color-rojo); box-shadow:0 0 0 .25rem rgb(247 25 32 / 18%); }
.rt-jobs h2,.rt-courses h2 { flex:1 1 auto; margin:0; color:var(--rt-color-tinta); font-family:var(--rt-font-heading); font-size:clamp(2.2rem,5vw,4rem); font-weight:800; letter-spacing:-.07em; line-height:.94; }
.rt-jobs__stat,.rt-courses__stat { display:flex; align-items:baseline; gap:.4rem 1rem; margin:0; flex-wrap:wrap; }
.rt-jobs__figure,.rt-courses__figure { color:var(--rt-color-tinta); font-family:var(--rt-font-heading); font-size:clamp(2.4rem,3.4vw,3.2rem); font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.06em; line-height:1; }
.rt-jobs__unit,.rt-courses__unit { align-self:end; padding-bottom:.35rem; color:var(--rt-color-gris); font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
.rt-jobs__intro,.rt-courses__intro { flex:1 0 100%; max-width:52ch; margin:0; color:var(--rt-color-gris); font-size:.95rem; line-height:1.55; }
.rt-jobs__list { display:grid; grid-template-columns:repeat(auto-fill,minmax(19rem,1fr)); gap:clamp(1.2rem,2.5vw,1.8rem); margin:0; padding:clamp(1.5rem,3vw,2.25rem) 0 0; list-style:none; border-top:2px solid var(--rt-color-tinta); }
.rt-job-card { position:relative; display:flex; }
.rt-job-card__link { display:flex; flex-direction:column; gap:.3rem; flex:1 1 auto; padding-bottom:1.1rem; border-bottom:1px solid rgb(29 29 31 / 12%); color:inherit; text-decoration:none; }
.rt-job-card__title { color:var(--rt-color-tinta); font-family:var(--rt-font-heading); font-size:1.05rem; font-weight:800; letter-spacing:-.02em; line-height:1.2; transition:color var(--rt-dur-fast) var(--rt-ease); }
.rt-job-card__company { color:var(--rt-color-rojo-accesible); font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.rt-job-card__excerpt { color:var(--rt-color-gris); font-size:.86rem; line-height:1.45; }
.rt-job-card__foot { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin-top:.35rem; }
.rt-job-card__tag { padding:.2rem .55rem; border-radius:var(--rt-radius-pill); background:var(--rt-color-fondo); color:var(--rt-color-gris); font-size:.72rem; font-weight:700; }
.rt-job-card__when { margin-left:auto; color:var(--rt-color-gris); font-size:.74rem; }
.rt-job-card:hover .rt-job-card__title,.rt-job-card:focus-within .rt-job-card__title { color:var(--rt-color-rojo-accesible); }
.rt-courses__list { display:grid; grid-template-columns:repeat(auto-fill,minmax(18rem,1fr)); gap:clamp(.9rem,2vw,1.35rem); margin:0; padding:clamp(1.5rem,3vw,2.25rem) 0 0; list-style:none; border-top:2px solid var(--rt-color-tinta); }
.rt-course-card { display:flex; flex-direction:column; gap:.3rem; padding:1.1rem 1.15rem 1.2rem; border-radius:14px; background:var(--rt-color-fondo); }
.rt-course-card--abierta { background:var(--rt-color-blanco); border-top:3px solid var(--rt-color-rojo); border-radius:3px 3px 14px 14px; box-shadow:0 .4rem 1.4rem rgb(29 29 31 / 8%); }
.rt-course-card__flag { align-self:flex-start; padding:.16rem .55rem; border-radius:var(--rt-radius-pill); background:var(--rt-color-rojo-accesible); color:#fff; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.rt-course-card__title { color:var(--rt-color-tinta); font-family:var(--rt-font-heading); font-size:1rem; font-weight:800; letter-spacing:-.02em; line-height:1.2; }
.rt-course-card__centre { color:var(--rt-color-gris); font-size:.78rem; font-weight:700; }
.rt-course-card__when { color:var(--rt-color-tinta); font-size:.84rem; }
.rt-course-card__foot { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin-top:.35rem; }
.rt-course-card__tag { padding:.2rem .55rem; border-radius:var(--rt-radius-pill); background:var(--rt-color-blanco); color:var(--rt-color-gris); font-size:.72rem; font-weight:700; }
.rt-course-card--abierta .rt-course-card__tag { background:var(--rt-color-fondo); }
.rt-course-card__phone { margin-left:auto; color:var(--rt-color-rojo-accesible); font-size:.8rem; font-weight:800; font-variant-numeric:tabular-nums; text-decoration:none; }
.rt-course-card__phone:hover { text-decoration:underline; }
.rt-course-card__where { color:var(--rt-color-gris); font-size:.76rem; }
.rt-jobs__aviso,.rt-courses__aviso { margin:clamp(1.5rem,3vw,2.25rem) 0 0; max-width:56ch; color:var(--rt-color-gris); font-size:.8rem; line-height:1.5; }
/* --- La ficha: lo que faltaba al final de cada enlace ---------------------
Nuestros contenidos guardan los datos en metadatos y dejan el cuerpo vacio,
asi que la plantilla del tema no tenia nada que pintar y la ficha de un
acto salia con el titulo y poco mas. El enlace al original va arriba y como
boton: en una guia que recoge, mandar a quien lo publica no es cortesia, es
la unica forma de que siga habiendo a donde mandar.
--------------------------------------------------------------------------- */
.rt-ficha { margin:clamp(1.5rem,4vw,2.75rem) auto; max-width:min(100%,46rem); }
.rt-ficha__datos { margin:0; padding:0; border-top:2px solid var(--rt-color-tinta); }
.rt-ficha__fila { display:grid; grid-template-columns:minmax(6.5rem,10rem) 1fr; gap:.4rem 1.25rem; padding:.85rem 0; border-bottom:1px solid rgb(29 29 31 / 12%); }
.rt-ficha__fila dt { margin:0; color:var(--rt-color-gris); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; line-height:1.6; }
.rt-ficha__fila dd { margin:0; color:var(--rt-color-tinta); font-size:1rem; line-height:1.5; }
.rt-ficha__fila dd a { color:var(--rt-color-rojo-accesible); font-weight:700; text-decoration:none; border-bottom:1px solid currentColor; }
.rt-ficha__fila dd a:hover { color:var(--rt-color-tinta); }
.rt-ficha__accion { margin:clamp(1.25rem,3vw,2rem) 0 0; }
.rt-ficha__boton { display:inline-flex; align-items:center; gap:.6rem; padding:.85rem 1.5rem; border-radius:var(--rt-radius-pill); background:var(--rt-color-rojo-accesible); color:#fff; font-family:var(--rt-font-heading); font-size:1rem; font-weight:800; letter-spacing:-.01em; text-decoration:none; transition:background var(--rt-dur-fast) var(--rt-ease),transform var(--rt-dur-fast) var(--rt-ease); }
.rt-ficha__boton:hover,.rt-ficha__boton:focus-visible { background:var(--rt-color-tinta); color:#fff; transform:translateY(-1px); }
.rt-ficha__boton:focus-visible { outline:3px solid var(--rt-color-rojo); outline-offset:3px; }
.rt-ficha__boton span { transition:transform var(--rt-dur-fast) var(--rt-ease); }
.rt-ficha__boton:hover span { transform:translateX(3px); }
.rt-ficha__aviso { margin:1.1rem 0 0; max-width:56ch; color:var(--rt-color-gris); font-size:.8rem; line-height:1.55; }
@media (max-width: 559px) {
.rt-ficha__fila { grid-template-columns:1fr; gap:.1rem; }
.rt-ficha__boton { width:100%; justify-content:center; }
}
/* El horario, cuando lo hay: es lo que se mira antes de ir. */
.rt-shop__hours { margin:.2rem 0 0; color:var(--rt-color-tinta); font-size:.78rem; line-height:1.4; }
/* --- Ocio: seis puertas, no una pagina de cuatro kilometros ---------------
Una seccion con mil quinientas fichas seguidas no se recorre: se abandona.
Cada puerta dice cuanto hay detras y lleva a su pagina. La cifra manda,
porque es lo que decide si merece la pena entrar.
--------------------------------------------------------------------------- */
.rt-doors { margin:0 auto; padding:clamp(1.5rem,4vw,3rem) 0; max-width:min(100%,74rem); }
/* Quince puertas seguidas son un muro, asi que van por bloques -comer, salir,
moverse, apuntarse- con un rotulo pequeno delante. El rotulo es tipografia y
no otra caja de color: lo que tiene que destacar son las puertas. */
.rt-doors__group { margin:clamp(1.8rem,3.5vw,2.6rem) 0 clamp(.7rem,1.5vw,1rem); padding-bottom:.55rem; border-bottom:1px solid rgb(29 29 31 / 14%); color:var(--rt-color-gris); font-family:var(--rt-font-heading); font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.14em; }
.rt-doors__group:first-child { margin-top:0; }
.rt-doors__list { display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:clamp(.9rem,2vw,1.3rem); margin:0; padding:0; list-style:none; }
.rt-door { display:flex; }
.rt-door__link { position:relative; display:flex; flex-direction:column; gap:.35rem; flex:1 1 auto; min-height:13rem; padding:1.5rem 1.6rem 3.2rem; border-radius:20px; background:var(--rt-color-fondo); color:var(--rt-color-tinta); text-decoration:none; overflow:hidden; transition:transform var(--rt-dur-fast) var(--rt-ease),box-shadow var(--rt-dur-fast) var(--rt-ease); }
.rt-door__link:hover,.rt-door__link:focus-visible { transform:translateY(-3px); box-shadow:0 1rem 2.4rem rgb(29 29 31 / 14%); }
.rt-door__link:focus-visible { outline:3px solid var(--rt-color-rojo); outline-offset:3px; }
.rt-door__name { font-family:var(--rt-font-heading); font-size:clamp(1.5rem,2.4vw,1.9rem); font-weight:800; letter-spacing:-.04em; line-height:1.05; }
.rt-door__count { display:flex; align-items:baseline; gap:.4rem; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; opacity:.72; }
.rt-door__count strong { font-family:var(--rt-font-heading); font-size:1.7rem; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.04em; text-transform:none; }
.rt-door__line { margin-top:auto; max-width:30ch; font-size:.88rem; line-height:1.45; opacity:.82; }
.rt-door__go { position:absolute; right:1.5rem; bottom:1.35rem; font-size:1.5rem; line-height:1; transition:transform var(--rt-dur-fast) var(--rt-ease); }
.rt-door__link:hover .rt-door__go { transform:translateX(5px); }
.rt-door--rojo .rt-door__link { background:var(--rt-color-rojo-accesible); color:#fff; }
.rt-door--tinta .rt-door__link { background:var(--rt-color-tinta); color:#fff; }
.rt-door--azul .rt-door__link { background:#0b4f71; color:#fff; }
.rt-door--claro .rt-door__link { background:var(--rt-color-fondo); }
/* --- Cartelera: el cartel grande y las sesiones delante -------------------
Quien mira una cartelera ya sabe si le interesa la pelicula; lo que no sabe
es a que hora la ponen. Por eso van las sesiones y no la sinopsis, y por eso
las de hoy se distinguen de un vistazo.
--------------------------------------------------------------------------- */
.rt-cine { margin:0 auto; padding:clamp(2rem,5vw,4rem) 0; max-width:min(100%,74rem); }
.rt-cine__head { display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1.25rem; margin-bottom:clamp(1.5rem,3vw,2.25rem); }
.rt-cine__eyebrow { flex:1 0 100%; display:flex; align-items:center; gap:.5rem; margin:0; color:var(--rt-color-rojo-accesible); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.14em; }
.rt-cine__eyebrow::before { content:""; width:.5rem; height:.5rem; border-radius:999px; background:var(--rt-color-rojo); box-shadow:0 0 0 .25rem rgb(247 25 32 / 18%); }
.rt-cine h2 { flex:1 1 auto; margin:0; color:var(--rt-color-tinta); font-family:var(--rt-font-heading); font-size:clamp(2.2rem,5vw,4rem); font-weight:800; letter-spacing:-.07em; line-height:.94; }
.rt-cine__stat { display:flex; align-items:baseline; gap:.4rem 1rem; margin:0; flex-wrap:wrap; }
.rt-cine__figure { color:var(--rt-color-tinta); font-family:var(--rt-font-heading); font-size:clamp(2.4rem,3.4vw,3.2rem); font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.06em; line-height:1; }
.rt-cine__unit { align-self:end; padding-bottom:.35rem; color:var(--rt-color-gris); font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
.rt-cine__intro { flex:1 0 100%; max-width:52ch; margin:0; color:var(--rt-color-gris); font-size:.95rem; line-height:1.55; }
.rt-cine__list { display:grid; gap:clamp(1.2rem,2.5vw,2rem); margin:0; padding:clamp(1.5rem,3vw,2.25rem) 0 0; list-style:none; border-top:2px solid var(--rt-color-tinta); }
.rt-film { display:grid; grid-template-columns:minmax(8rem,11rem) 1fr; gap:clamp(1rem,2.5vw,1.8rem); padding-bottom:clamp(1.2rem,2.5vw,2rem); border-bottom:1px solid rgb(29 29 31 / 12%); }
.rt-film:last-child { border-bottom:0; padding-bottom:0; }
/* El cartel va de fondo: el cargador diferido del tema reescribe cualquier
![]()
del contenido y con las externas del cine se queda a medias. */
.rt-film__poster { display:block; overflow:hidden; border-radius:12px; background:var(--rt-color-fondo) center/cover no-repeat; aspect-ratio:2 / 3; transition:transform var(--rt-dur) var(--rt-ease); }
.rt-film:hover .rt-film__poster { transform:scale(1.03); }
.rt-film__body { display:flex; flex-direction:column; gap:.45rem; min-width:0; }
.rt-film__title { margin:0; font-family:var(--rt-font-heading); font-size:clamp(1.3rem,2.4vw,1.8rem); font-weight:800; letter-spacing:-.04em; line-height:1.08; }
.rt-film__title a { color:var(--rt-color-tinta); text-decoration:none; background-image:linear-gradient(var(--rt-color-rojo),var(--rt-color-rojo)); background-repeat:no-repeat; background-position:0 100%; background-size:0 2px; transition:background-size var(--rt-dur) var(--rt-ease),color var(--rt-dur-fast) var(--rt-ease); }
.rt-film__title a:hover,.rt-film__title a:focus-visible { color:var(--rt-color-rojo-accesible); background-size:100% 2px; }
.rt-film__meta { margin:0; color:var(--rt-color-gris); font-size:.82rem; line-height:1.45; }
.rt-film__room { margin:.1rem 0 0; color:var(--rt-color-gris); font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.rt-film__days { display:flex; flex-direction:column; gap:.3rem; margin:.4rem 0 0; padding:0; list-style:none; }
.rt-film__day { display:grid; grid-template-columns:minmax(5.5rem,7rem) 1fr; align-items:center; gap:.5rem 1rem; padding:.42rem .6rem; border-radius:10px; }
.rt-film__day--hoy { background:var(--rt-color-rojo-accesible); color:#fff; }
.rt-film__date { font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.rt-film__times { display:flex; flex-wrap:wrap; gap:.35rem; }
.rt-film__time { display:inline-flex; align-items:baseline; gap:.22rem; padding:.16rem .55rem; border-radius:var(--rt-radius-pill); background:var(--rt-color-fondo); color:var(--rt-color-tinta); font-size:.86rem; font-weight:800; font-variant-numeric:tabular-nums; }
.rt-film__day--hoy .rt-film__time { background:rgb(255 255 255 / 92%); }
.rt-film__time small { font-size:.6rem; font-weight:800; letter-spacing:.04em; opacity:.62; }
.rt-cine__aviso { margin:clamp(1.5rem,3vw,2.25rem) 0 0; max-width:60ch; color:var(--rt-color-gris); font-size:.8rem; line-height:1.55; }
.rt-cine__aviso strong { color:var(--rt-color-tinta); }
@media (max-width: 559px) {
.rt-film { grid-template-columns:1fr; }
.rt-film__poster { max-width:9rem; }
.rt-film__day { grid-template-columns:1fr; gap:.25rem; }
}
/* Los ramos de Comercio y los ambitos de Entidades usan el molde de puerta,
pero conservan la regla de arriba que separa el encabezado del listado. La
combinacion se escribe explicita para no depender del orden de las hojas. */
.rt-doors__list.rt-shops__list { grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:clamp(.9rem,2vw,1.3rem); padding-top:clamp(1.5rem,3vw,2.25rem); border-top:2px solid var(--rt-color-tinta); }
.rt-doors__list.rt-shops__list .rt-door__link { min-height:11rem; padding-bottom:2.9rem; }
/* Una puerta destacada lleva filete, no bloque de color: de veintidos ramos,
diez son «de calle», y pintarlos todos en rojo es un muro. */
.rt-door--destacada .rt-door__link { border-top:3px solid var(--rt-color-rojo); border-radius:3px 3px 20px 20px; }
.rt-door--destacada .rt-door__count strong { color:var(--rt-color-rojo-accesible); }
/* La otra sala de la ciudad. No se recoge su cartelera, pero se enlaza: el
visitante tiene derecho a saber que existe. */
.rt-cine__otro { margin:.9rem 0 0; max-width:60ch; padding:.9rem 1.1rem; border-left:3px solid var(--rt-color-rojo); border-radius:0 10px 10px 0; background:var(--rt-color-fondo); color:var(--rt-color-gris); font-size:.84rem; line-height:1.55; }
.rt-cine__otro strong { display:block; color:var(--rt-color-tinta); }
.rt-cine__otro a { display:inline-block; margin-top:.4rem; color:var(--rt-color-rojo-accesible); font-weight:800; text-decoration:none; border-bottom:1px solid currentColor; }
.rt-cine__otro a:hover { color:var(--rt-color-tinta); }
/* --- El tablero de Hoy ----------------------------------------------------
Antes era una tira de cuatro celdas que contaba cifras: «3 actos», «5 en
cartel». Una cifra sola no ayuda a decidir nada. Ahora cada celda ensena lo
que hay -la hora y el titulo-, y para que quepa hace falta la densidad de un
panel: cuerpo pequeno, jerarquia por peso y color, y ninguna caja vacia.
Las celdas se dibujan solo si tienen contenido, asi que la rejilla se
autoajusta: tres franjas un martes de febrero, seis un viernes de fiesta.
--------------------------------------------------------------------------- */
.rt-board { display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1px; margin:0 auto; max-width:min(100%,74rem); background:rgb(29 29 31 / 12%); border:1px solid rgb(29 29 31 / 12%); border-radius:16px; overflow:hidden; }
.rt-board > * { padding:1.1rem 1.2rem; background:var(--rt-color-blanco,#fff); }
.rt-board__now { display:flex; flex-direction:column; gap:.15rem; background:var(--rt-color-tinta); color:#fff; }
.rt-board__date { margin:0; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; opacity:.72; }
.rt-board__temp { margin:.1rem 0 0; font-family:var(--rt-font-heading); font-size:3.4rem; font-weight:800; line-height:.9; letter-spacing:-.06em; font-variant-numeric:tabular-nums; }
.rt-board__temp span { font-size:1.6rem; vertical-align:super; opacity:.6; }
.rt-board__sky { display:flex; flex-wrap:wrap; gap:.35rem .7rem; margin:.25rem 0 0; font-size:.85rem; }
.rt-board__minmax { font-variant-numeric:tabular-nums; opacity:.62; }
.rt-board__rain { margin:.45rem 0 0; padding:.2rem .5rem; align-self:flex-start; border-radius:var(--rt-radius-pill,999px); background:#0b4f71; font-size:.74rem; font-weight:800; }
.rt-board__k { margin:0 0 .5rem; color:var(--rt-color-rojo-accesible); font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.13em; }
.rt-board__list { display:flex; flex-direction:column; gap:.4rem; margin:0; padding:0; list-style:none; }
.rt-board__list li { display:grid; grid-template-columns:auto 1fr; gap:.5rem; align-items:baseline; font-size:.88rem; line-height:1.35; }
.rt-board__list--plain li, .rt-board__list--news li { grid-template-columns:1fr; }
.rt-board__list a { color:var(--rt-color-tinta); text-decoration:none; border-bottom:1px solid transparent; }
.rt-board__list a:hover, .rt-board__list a:focus-visible { border-bottom-color:var(--rt-color-rojo); }
.rt-board__time { font-family:var(--rt-font-heading); font-size:.9rem; font-weight:800; font-variant-numeric:tabular-nums; color:var(--rt-color-rojo-accesible); }
.rt-board__medio { display:block; font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--rt-color-gris); }
.rt-board__until { font-size:.74rem; color:var(--rt-color-gris); font-variant-numeric:tabular-nums; }
.rt-board__big { margin:0 0 .4rem; font-family:var(--rt-font-heading); font-size:2.4rem; font-weight:800; line-height:.95; letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
.rt-board__big small { display:block; font-family:var(--rt-font-body); font-size:.7rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--rt-color-gris); }
.rt-board__quiet { margin:0; font-size:.88rem; color:var(--rt-color-gris); }
.rt-board__more { display:inline-block; margin-top:.7rem; font-size:.74rem; font-weight:800; letter-spacing:.04em; color:var(--rt-color-gris); text-decoration:none; }
.rt-board__more:hover { color:var(--rt-color-rojo-accesible); }
/* El aviso lleva filete y no bloque de color: DECISIONES 57. Es una franja
que casi nunca aparece, y cuando aparece tiene que distinguirse sin gritar. */
.rt-board__cell--aviso { border-left:3px solid var(--rt-color-rojo); }
.rt-board__cell--wide { grid-column:span 2; }
.rt-board__cta { display:flex; align-items:flex-end; }
.rt-board__boton { display:inline-flex; align-items:center; gap:.4rem; padding:.55rem 1rem; border-radius:var(--rt-radius-pill,999px); background:var(--rt-color-rojo-accesible); color:#fff; font-size:.82rem; font-weight:800; text-decoration:none; }
.rt-board__boton:hover { background:var(--rt-color-tinta); }
@media (max-width: 719px) {
.rt-board { grid-template-columns:1fr; }
.rt-board__cell--wide { grid-column:auto; }
.rt-board__temp { font-size:2.8rem; }
}
/* --- El barrio, con lo que hay debajo ------------------------------------
Hasta el 18-sep esta pagina era una foto y una lista de equipamientos
teniendo detras 1.599 fichas de comercio solo en el Centre. Las puertas van
con la cifra delante, que es lo que decide si merece la pena entrar, y las
vacias no se dibujan.
------------------------------------------------------------------------- */
.rt-hood__vida, .rt-hood__prensa { margin-top:clamp(1.6rem,3vw,2.4rem); }
.rt-hood__doors { display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:.7rem; margin:0; padding:0; list-style:none; }
.rt-hood-door a { display:flex; flex-direction:column; gap:.1rem; padding:.9rem 1rem; border-radius:14px; background:var(--rt-color-fondo); color:var(--rt-color-tinta); text-decoration:none; transition:transform var(--rt-dur-fast) var(--rt-ease); }
.rt-hood-door a:hover, .rt-hood-door a:focus-visible { transform:translateY(-2px); }
.rt-hood-door__n { font-family:var(--rt-font-heading); font-size:1.8rem; font-weight:800; line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.rt-hood-door__k { font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--rt-color-gris); }
.rt-hood__list--news { display:flex; flex-direction:column; gap:.6rem; margin:0; padding:0; list-style:none; }
.rt-hood__list--news li { font-size:.92rem; line-height:1.4; }
.rt-hood-news__medio { display:block; font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--rt-color-gris); }
.rt-hood__list--news a { color:var(--rt-color-tinta); text-decoration:none; }
/* --- Farmacias: el estado antes que el nombre ----------------------------
Quien busca una farmacia la busca ahora y con prisa, asi que lo que tiene
que leerse primero no es el nombre sino si esta abierta. El rotulo de grupo
lleva punto de color -verde abierta, gris cerrada- y la hora de cierre va en
negrita debajo del nombre.
------------------------------------------------------------------------- */
.rt-farma__grupo { display:flex; align-items:center; gap:.5rem; margin:clamp(1.6rem,3vw,2.2rem) 0 .9rem; font-family:var(--rt-font-heading); font-size:.8rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:var(--rt-color-gris); }
.rt-farma__grupo::before { content:""; width:.55rem; height:.55rem; border-radius:999px; background:currentColor; }
.rt-farma__grupo--abierta { color:#1a7f47; }
.rt-farma__grupo--abierta::before { box-shadow:0 0 0 .22rem rgb(26 127 71 / 18%); }
.rt-farma__hasta { margin:.15rem 0 .35rem; font-size:.84rem; font-weight:800; color:#1a7f47; font-variant-numeric:tabular-nums; }
.rt-farma__horario { margin:.4rem 0 0; font-size:.78rem; line-height:1.45; color:var(--rt-color-gris); }
.rt-farma__proxima { margin:clamp(1.2rem,2.5vw,1.8rem) 0 0; padding:.9rem 1.1rem; border-left:3px solid var(--rt-color-rojo); border-radius:0 12px 12px 0; background:var(--rt-color-fondo); font-size:.92rem; line-height:1.5; }
/* --- El mapa de barrios --------------------------------------------------
Cinco tramos del rojo de marca, del mas claro al pleno. El color dice
cuanto hay dentro, no cual es: un mapa con un color por barrio es bonito y
no informa de nada. Los barrios sin fichas van en gris y no se pueden
pulsar, porque llevarian a una pagina vacia.
------------------------------------------------------------------------- */
.rt-map { margin:0 auto; padding:clamp(2rem,5vw,4rem) 0; max-width:min(100%,74rem); }
.rt-map__head { margin-bottom:clamp(1.2rem,2.5vw,1.8rem); }
.rt-map__eyebrow { display:flex; align-items:center; gap:.5rem; margin:0 0 .3rem; color:var(--rt-color-rojo-accesible); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.14em; }
.rt-map__eyebrow::before { content:""; width:.5rem; height:.5rem; border-radius:999px; background:var(--rt-color-rojo); box-shadow:0 0 0 .25rem rgb(247 25 32 / 18%); }
.rt-map h2 { margin:0; font-family:var(--rt-font-heading); font-size:clamp(2rem,4.5vw,3.4rem); font-weight:800; letter-spacing:-.06em; line-height:.96; }
.rt-map__intro { margin:.6rem 0 0; max-width:52ch; color:var(--rt-color-gris); font-size:.95rem; line-height:1.55; }
.rt-map__svg { display:block; width:100%; max-width:36rem; height:auto; margin:0 auto; }
.rt-map__zona path { fill:var(--rt-color-fondo); stroke:#fff; stroke-width:1.6; transition:fill var(--rt-dur-fast) var(--rt-ease); }
.rt-map__zona--1 path { fill:#fbdcdd; }
.rt-map__zona--2 path { fill:#f6a9ac; }
.rt-map__zona--3 path { fill:#ef6d72; }
.rt-map__zona--4 path { fill:#d62b32; }
.rt-map__zona--5 path { fill:#9e1116; }
.rt-map__zona--vacia path { fill:#e9e9ea; }
a.rt-map__zona:hover path, a.rt-map__zona:focus-visible path { fill:var(--rt-color-tinta); }
a.rt-map__zona:focus-visible { outline:3px solid var(--rt-color-rojo); outline-offset:2px; }
.rt-map__pie { margin:clamp(1.2rem,2.5vw,1.8rem) auto 0; max-width:60ch; color:var(--rt-color-gris); font-size:.8rem; line-height:1.55; }
.rt-map__pie strong { color:var(--rt-color-tinta); }
/* --- El buscador: bajo, y con el campo como protagonista -----------------
La primera version gastaba media pantalla en un titulo enorme para decir
«Buscar» encima de un campo que ya lo dice. Ahora el rotulo es una etiqueta
pequena, el campo es la pieza grande y todo lo demas se aprieta: mismo
contenido, la mitad de alto.
El movimiento sale de las utilidades que ya tiene el tema -`rt-reveal` para
la aparicion ligada al scroll y `rt-underline` para el subrayado que se
dibuja-, asi que no entra ni una linea de JavaScript nueva.
------------------------------------------------------------------------- */
.rt-find { margin:0 auto; padding:clamp(1rem,2.5vw,1.8rem) 0; max-width:min(100%,58rem); }
.rt-find__label { display:block; margin-bottom:.45rem; color:var(--rt-color-gris); font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.14em; }
.rt-find__row { display:flex; align-items:center; gap:.4rem; padding:.3rem .3rem .3rem .9rem; border:1px solid rgb(29 29 31 / 18%); border-radius:var(--rt-radius-pill,999px); background:#fff; transition:border-color var(--rt-dur-fast) var(--rt-ease),box-shadow var(--rt-dur-fast) var(--rt-ease); }
.rt-find__row:focus-within { border-color:var(--rt-color-tinta); box-shadow:0 0 0 4px rgb(247 25 32 / 12%); }
.rt-find__lupa { display:flex; color:var(--rt-color-gris); }
.rt-find__input { flex:1 1 auto; min-width:0; padding:.55rem .2rem; border:0; background:none; font-size:1rem; font-family:inherit; color:var(--rt-color-tinta); }
.rt-find__input:focus { outline:none; }
.rt-find__input::-webkit-search-cancel-button { cursor:pointer; }
.rt-find__boton { flex:0 0 auto; padding:.5rem 1.1rem; border:0; border-radius:var(--rt-radius-pill,999px); background:var(--rt-color-rojo-accesible); color:#fff; font-size:.84rem; font-weight:800; font-family:inherit; cursor:pointer; transition:background var(--rt-dur-fast) var(--rt-ease); }
.rt-find__boton:hover { background:var(--rt-color-tinta); }
.rt-find__ayuda { display:flex; flex-wrap:wrap; gap:.35rem; margin:.5rem 0 0; padding-left:.9rem; color:var(--rt-color-gris); font-size:.78rem; }
.rt-find__ayuda a { padding:.05rem .5rem; border-radius:var(--rt-radius-pill,999px); background:var(--rt-color-fondo); color:var(--rt-color-tinta); font-weight:700; text-decoration:none; transition:background var(--rt-dur-fast) var(--rt-ease); }
.rt-find__ayuda a:hover { background:var(--rt-color-rojo-accesible); color:#fff; }
.rt-find__vacio { margin:.8rem 0 0; padding-left:.9rem; color:var(--rt-color-gris); font-size:.84rem; }
.rt-find__resumen { margin:1.1rem 0 0; padding-left:.9rem; font-size:.92rem; color:var(--rt-color-gris); }
.rt-find__resumen strong { color:var(--rt-color-tinta); font-family:var(--rt-font-heading); font-size:1.15rem; }
.rt-find__grupo { margin-top:.9rem; padding:.8rem .9rem; border-radius:14px; background:var(--rt-color-fondo); }
.rt-find__k { display:flex; align-items:baseline; gap:.45rem; margin:0 0 .45rem; font-family:var(--rt-font-heading); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:var(--rt-color-gris); }
.rt-find__k span { padding:.02rem .4rem; border-radius:var(--rt-radius-pill,999px); background:#fff; color:var(--rt-color-tinta); font-size:.68rem; font-variant-numeric:tabular-nums; }
.rt-find__list { display:flex; flex-direction:column; gap:.3rem; margin:0; padding:0; list-style:none; }
.rt-find__list li { display:flex; flex-wrap:wrap; align-items:baseline; gap:.15rem .5rem; font-size:.9rem; line-height:1.35; }
.rt-find__list a { color:var(--rt-color-tinta); text-decoration:none; font-weight:700; }
.rt-find__donde { color:var(--rt-color-gris); font-size:.8rem; }
.rt-find__mas { display:inline-block; margin-top:.45rem; font-size:.74rem; font-weight:800; color:var(--rt-color-gris); text-decoration:none; }
.rt-find__mas:hover { color:var(--rt-color-rojo-accesible); }
/* --- El reparto por tipo dentro de Donde comer -------------------------- */
.rt-eat__tipos { display:flex; flex-wrap:wrap; gap:.5rem; margin:clamp(1rem,2vw,1.4rem) 0 .7rem; }
.rt-eat__tipo { display:flex; align-items:baseline; gap:.4rem; padding:.45rem .9rem; border-radius:var(--rt-radius-pill,999px); background:var(--rt-color-fondo); color:var(--rt-color-tinta); text-decoration:none; transition:background var(--rt-dur-fast) var(--rt-ease); }
.rt-eat__tipo:hover { background:var(--rt-color-tinta); color:#fff; }
.rt-eat__tipo-n { font-family:var(--rt-font-heading); font-size:1.05rem; font-weight:800; font-variant-numeric:tabular-nums; }
.rt-eat__tipo-k { font-size:.78rem; font-weight:700; }
.rt-eat__ojo { margin:0 0 clamp(1rem,2vw,1.4rem); max-width:66ch; padding:.7rem .9rem; border-left:3px solid var(--rt-color-rojo); border-radius:0 10px 10px 0; background:var(--rt-color-fondo); color:var(--rt-color-gris); font-size:.8rem; line-height:1.5; }
.rt-eat__ojo strong { color:var(--rt-color-tinta); }
/* --- El titulo que a los archivos les faltaba --------------------------- */
.rt-archive-head { margin:0 auto clamp(1rem,2.5vw,1.6rem); max-width:min(100%,74rem); }
.rt-archive-head__title { margin:0; font-family:var(--rt-font-heading); font-size:clamp(2rem,4.5vw,3.4rem); font-weight:800; letter-spacing:-.06em; line-height:.98; text-wrap:balance; }
.rt-archive-head__count { margin:.35rem 0 0; color:var(--rt-color-gris); font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; }
.rt-archive-head__count strong { color:var(--rt-color-rojo-accesible); font-family:var(--rt-font-heading); font-size:1.2rem; font-variant-numeric:tabular-nums; }
/* --- La tarjeta dibujada, para lo que no tiene foto ---------------------
Comercio, restaurantes, entidades, equipamientos y farmacias estan al 0 %
de imagenes. El SVG lo pinta el plugin; aqui solo se le dice que llene su
hueco igual que lo llenaria una foto, para que una rejilla mezclada no
salga con las filas descuadradas. */
.rt-tarjeta__marco { display:block; overflow:hidden; width:100%; height:100%; line-height:0; }
.rt-tarjeta { display:block; width:100%; height:100%; object-fit:cover; }
/* El zoom al pasar por encima es el mismo que ya tiene la Agenda: si una
tarjeta dibujada no lo hiciera, se leeria como que esa ficha no se puede
abrir. */
.rt-zoom:hover .rt-tarjeta,
.rt-zoom:focus-within .rt-tarjeta { transform:scale(1.04); }
.rt-tarjeta { transition:transform var(--rt-dur) var(--rt-ease); }
@media (prefers-reduced-motion:reduce) { .rt-tarjeta { transition:none; } }
/* La tira de barrios dentro de una puerta de ramo: es el camino a «Bares en
Ca n'Aurell» y a las demás páginas de barrio × categoría. Va separada del
listado por una regla, porque no es parte de la lista sino otra pregunta. */
.rt-shops__barrios--dentro { margin:1.2rem 0 1.6rem; padding-top:1.2rem; border-top:1px solid rgb(29 29 31 / 10%); }
/* --- Útil como teléfonos de interés -------------------------------------
Quien entra aquí no quiere saber dónde está la oficina: quiere llamar. El
teléfono deja de ser un dato más y pasa a ser lo segundo que se lee. */
.rt-place__tel { margin:.2rem 0 0; font-family:var(--rt-font-heading); font-size:1.05rem; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.rt-place__tel a { color:var(--rt-color-rojo-accesible); text-decoration:none; }
.rt-place__tel a:hover, .rt-place__tel a:focus-visible { text-decoration:underline; }
/* En móvil el número es el objetivo táctil principal: 44px de alto mínimo es
lo que un pulgar acierta sin fallar. */
@media (max-width:767px) { .rt-place__tel a { display:inline-block; min-height:44px; line-height:44px; } }
.rt-place__nota { margin:.15rem 0 0; color:var(--rt-color-gris); font-size:.82rem; line-height:1.4; }
.rt-places__fijos { margin:0 0 1.6rem; }
.rt-place--urgente { border-left:4px solid var(--rt-color-rojo); padding-left:.9rem; }
.rt-place--urgente .rt-place__tel { font-size:1.6rem; }
/* --- El mapa de barrio ---------------------------------------------------
Fondo del ICGC y pines nuestros encima, en un SVG que se estira con él. El
SVG va en position:absolute sobre la imagen y con el mismo viewBox, de modo
que un pin cae siempre en el mismo sitio del callejero a cualquier ancho. */
.rt-mapa { margin:0 0 clamp(1.4rem,3vw,2.4rem); }
.rt-mapa__head { display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:.8rem; margin:0 0 .8rem; }
.rt-mapa__title { margin:0; font-family:var(--rt-font-heading); font-size:clamp(1.3rem,2.6vw,1.9rem); font-weight:800; letter-spacing:-.04em; }
.rt-mapa__form { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.rt-mapa__label { color:var(--rt-color-gris); font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; }
/* El `color` va explícito y no es adorno: el tema pinta los `select` en blanco
dentro de la ficha de barrio, así que sin esta línea salen las 23 opciones
en blanco sobre blanco. Se veía como un campo vacío, y fue lo único que la
comprobación en vivo encontró que ninguna prueba en seco podía encontrar. */
.rt-mapa__select { padding:.45rem .6rem; border:1px solid rgb(29 29 31 / 18%); border-radius:var(--rt-radius-sm); background:var(--rt-color-blanco); color:var(--rt-color-tinta); font-family:inherit; font-size:.9rem; }
.rt-mapa__select option { background:var(--rt-color-blanco); color:var(--rt-color-tinta); }
.rt-mapa__boton { padding:.45rem .9rem; border:0; border-radius:var(--rt-radius-pill); background:var(--rt-color-tinta); color:var(--rt-color-blanco); font-family:inherit; font-size:.85rem; font-weight:700; cursor:pointer; }
.rt-mapa__quitar { color:var(--rt-color-rojo-accesible); font-size:.82rem; font-weight:700; }
.rt-mapa__lienzo { position:relative; overflow:hidden; border-radius:var(--rt-radius-md); background:var(--rt-color-fondo); }
.rt-mapa__fondo, .rt-mapa__pines { position:absolute; inset:0; width:100%; height:100%; }
.rt-mapa__fondo { object-fit:cover; }
/* Cada pin es un de verdad: sin JavaScript, con teclado y con foco
visible, que es lo que lo hace usable sin ratón. */
.rt-mapa__pin { cursor:pointer; }
/* **El pin ya no crece al pasar por encima.** Eduardo: «cuando te pones sobre
los iconos hacen un movimiento raro». En un barrio caben treinta y pico
pines y muchos se tocan, asi que al mover el raton por encima unos crecian
mientras otros encogian: el mapa entero temblaba. Y un pin que crece tapa a
su vecino justo cuando estas intentando acertarle.
Ahora **no se mueve nada**: se resalta. El pin activo gana un halo blanco y
el resto se apaga, que dice lo mismo -este es el que vas a pulsar- sin tocar
ni una coordenada. De paso desaparece el otro riesgo, que era mezclar un
`transform` de CSS con el `transform="translate(...)"` que cada pin lleva
como atributo: si el de CSS llega a ganar, se lleva por delante la posicion. */
.rt-mapa__pin > g path { transition:stroke-width var(--rt-dur-fast) var(--rt-ease), opacity var(--rt-dur-fast) var(--rt-ease); }
.rt-mapa__pines:hover .rt-mapa__pin > g path { opacity:.45; }
.rt-mapa__pin:hover > g path,
.rt-mapa__pin:focus-visible > g path { opacity:1; stroke-width:5; }
.rt-mapa__pin:focus-visible { outline:3px solid var(--rt-color-tinta); outline-offset:2px; }
@media (prefers-reduced-motion:reduce) { .rt-mapa__pin > g path { transition:none; } }
.rt-mapa__leyenda { display:flex; flex-wrap:wrap; gap:.4rem 1rem; margin:.7rem 0 0; padding:0; list-style:none; }
.rt-mapa__leyenda-item { display:flex; align-items:center; gap:.35rem; color:var(--rt-color-gris); font-size:.8rem; font-weight:700; }
.rt-mapa__recorte { margin:.5rem 0 0; color:var(--rt-color-gris); font-size:.82rem; line-height:1.45; }
.rt-mapa__credito { margin:.35rem 0 0; color:var(--rt-color-gris); font-size:.72rem; }
/* --- Qué se resuelve sin salir del barrio -------------------------------
Tres columnas en escritorio y dos en móvil: la rejilla se lee de un vistazo
y es lo que hace la pregunta contestable sin leer línea a línea. */
.rt-servicios { margin:0 0 clamp(1.4rem,3vw,2.4rem); padding:clamp(1rem,2.4vw,1.5rem); border-radius:var(--rt-radius-md); background:var(--rt-color-fondo); }
.rt-servicios__head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.6rem; margin:0 0 .9rem; }
.rt-servicios__title { margin:0; font-family:var(--rt-font-heading); font-size:clamp(1.15rem,2.4vw,1.6rem); font-weight:800; letter-spacing:-.04em; }
.rt-servicios__figure { color:var(--rt-color-rojo-accesible); font-family:var(--rt-font-heading); font-size:1.7rem; font-weight:800; font-variant-numeric:tabular-nums; }
.rt-servicios__unit { color:var(--rt-color-gris); font-size:.8rem; font-weight:700; }
.rt-servicios__list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.4rem .9rem; margin:0; padding:0; list-style:none; }
@media (max-width:767px) { .rt-servicios__list { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.rt-servicio { display:flex; align-items:baseline; gap:.4rem; font-size:.92rem; }
.rt-servicio__marca { color:#0f7a4a; font-weight:800; }
.rt-servicio__cuenta { color:var(--rt-color-gris); font-size:.8rem; font-variant-numeric:tabular-nums; }
/* Lo que el barrio NO tiene se apaga pero no se esconde: la ausencia es media
respuesta y es justo la que interesa a quien se está mudando. */
.rt-servicio--no { color:var(--rt-color-gris); }
.rt-servicio--no .rt-servicio__marca { color:#b3261e; }
.rt-servicios__nota { margin:.9rem 0 0; color:var(--rt-color-gris); font-size:.74rem; line-height:1.45; }
/* --- Accesos rápidos y «Tu barrio» --------------------------------------
Los accesos se envuelven en vez de hacer scroll horizontal: una fila que se
desplaza esconde la mitad de las puertas en móvil, que es donde más se usan. */
.rt-accesos { margin:0 0 clamp(1.2rem,2.6vw,2rem); }
.rt-accesos__title { margin:0 0 .7rem; font-family:var(--rt-font-heading); font-size:clamp(1.1rem,2.2vw,1.5rem); font-weight:800; letter-spacing:-.04em; }
/* `align-items:stretch` y el `list-style` en el `li`, no en el `ul`: el tema
pone el disco en el elemento, así que ponerlo en la lista no lo quita, y las
puertas salían con un punto suelto al lado. Y sin el `stretch` las que
llevan cifra medían 89px y las que no 53px, con lo que la fila quedaba
desalineada justo en la primera pantalla. */
.rt-accesos__list { display:flex; flex-wrap:wrap; align-items:stretch; gap:.55rem; margin:0; padding:0; list-style:none; }
.rt-accesos__list > li { margin:0; padding:0; list-style:none; }
.rt-accesos__list > li::before, .rt-accesos__list > li::marker { content:none; }
.rt-acceso { display:flex; }
.rt-acceso__link { display:flex; flex:1; flex-direction:column; justify-content:center; gap:.1rem; min-height:44px; padding:.6rem 1.15rem; border:1px solid transparent; border-radius:var(--rt-radius-pill); background:var(--rt-color-fondo); color:var(--rt-color-tinta); text-decoration:none; transition:transform var(--rt-dur-fast) var(--rt-ease); }
/* Sobre blanco, el gris de fondo casi no se ve: un borde lo convierte en un
botón en vez de en un texto suelto. */
.rt-acceso--claro .rt-acceso__link { border-color:rgb(29 29 31 / 14%); }
.rt-acceso__link:hover, .rt-acceso__link:focus-visible { transform:translateY(-2px); }
.rt-acceso__name { font-family:var(--rt-font-heading); font-size:.95rem; font-weight:800; letter-spacing:-.02em; }
.rt-acceso__line { font-size:.74rem; font-weight:700; opacity:.72; font-variant-numeric:tabular-nums; }
.rt-acceso--rojo .rt-acceso__link { background:var(--rt-color-rojo-accesible); color:var(--rt-color-blanco); }
.rt-acceso--tinta .rt-acceso__link { background:var(--rt-color-tinta); color:var(--rt-color-blanco); }
.rt-acceso--azul .rt-acceso__link { background:#0b4f71; color:var(--rt-color-blanco); }
@media (prefers-reduced-motion:reduce) { .rt-acceso__link { transition:none; } }
.rt-tubarrio { margin:0 0 clamp(1.4rem,3vw,2.4rem); }
.rt-tubarrio__title { margin:0 0 .3rem; font-family:var(--rt-font-heading); font-size:clamp(1.3rem,2.8vw,2rem); font-weight:800; letter-spacing:-.05em; }
.rt-tubarrio__intro { margin:0 0 .8rem; max-width:52ch; color:var(--rt-color-gris); font-size:.95rem; line-height:1.55; }
.rt-tubarrio__form { display:flex; flex-wrap:wrap; gap:.5rem; }
.rt-tubarrio__select { flex:1 1 14rem; padding:.6rem .7rem; border:1px solid rgb(29 29 31 / 18%); border-radius:var(--rt-radius-sm); background:var(--rt-color-blanco); color:var(--rt-color-tinta); font-family:inherit; font-size:1rem; }
.rt-tubarrio__select option { background:var(--rt-color-blanco); color:var(--rt-color-tinta); }
.rt-tubarrio__boton { min-height:44px; padding:.6rem 1.2rem; border:0; border-radius:var(--rt-radius-pill); background:var(--rt-color-rojo-accesible); color:var(--rt-color-blanco); font-family:var(--rt-font-heading); font-size:.95rem; font-weight:800; cursor:pointer; }
/* --- La respuesta por intención, encima de los resultados ----------------
Va destacada porque es un atajo, y en tinta y no en rojo porque no es una
alerta: es una sugerencia, y los resultados de debajo siguen valiendo. */
.rt-intencion { margin:0 0 1.2rem; border-radius:var(--rt-radius-md); background:var(--rt-color-tinta); }
.rt-intencion__eyebrow { margin:0; padding:.9rem 1.1rem 0; color:rgb(255 255 255 / 62%); font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.13em; }
.rt-intencion__link { display:flex; flex-direction:column; gap:.15rem; padding:.2rem 1.1rem 1rem; color:var(--rt-color-blanco); text-decoration:none; }
.rt-intencion__title { font-family:var(--rt-font-heading); font-size:clamp(1.2rem,2.6vw,1.7rem); font-weight:800; letter-spacing:-.04em; }
.rt-intencion__link:hover .rt-intencion__title, .rt-intencion__link:focus-visible .rt-intencion__title { text-decoration:underline; }
.rt-intencion__line { color:rgb(255 255 255 / 76%); font-size:.88rem; line-height:1.45; }
/* --- La página de fuentes ------------------------------------------------
Es la que hay que poder enseñar el día que alguien pregunte, así que se lee
como una tabla aunque sea una lista: una fila por fuente, con la licencia
siempre en el mismo sitio. */
.rt-fuentes__intro { max-width:62ch; color:var(--rt-color-gris); font-size:.95rem; line-height:1.6; }
.rt-fuentes__subtitle { margin:1.8rem 0 .7rem; font-family:var(--rt-font-heading); font-size:1.15rem; font-weight:800; letter-spacing:-.03em; }
.rt-fuentes__list { display:grid; gap:.7rem; margin:1rem 0 0; padding:0; list-style:none; }
.rt-fuente { padding:.85rem 1rem; border-radius:var(--rt-radius-sm); background:var(--rt-color-fondo); }
.rt-fuente__name { margin:0; font-family:var(--rt-font-heading); font-size:1.02rem; font-weight:800; letter-spacing:-.02em; }
.rt-fuente__alimenta { margin:.1rem 0 0; font-size:.88rem; }
.rt-fuente__meta, .rt-fuente__estado { display:flex; flex-wrap:wrap; gap:.3rem .8rem; margin:.3rem 0 0; color:var(--rt-color-gris); font-size:.78rem; }
.rt-fuente__licencia { padding:.05rem .45rem; border-radius:var(--rt-radius-pill); background:rgb(29 29 31 / 8%); font-weight:700; }
.rt-fuente__cifra { color:var(--rt-color-tinta); font-weight:800; font-variant-numeric:tabular-nums; }
.rt-fuentes__nota { margin:1.6rem 0 0; padding:1rem 1.1rem; border-left:4px solid var(--rt-color-rojo); }
.rt-fuentes__nota p { margin:.4rem 0 0; font-size:.9rem; line-height:1.55; }
/* --- Los encabezados de sección de la portada magazine -------------------
Un diario separa secciones con una regla y un antetítulo, no con un título
más grande: el titular más grande de la página tiene que ser una noticia,
no la palabra «Actualidad». */
.rt-portada-head { margin:clamp(2rem,4vw,3.2rem) 0 clamp(.9rem,2vw,1.4rem); padding-top:clamp(.8rem,1.6vw,1.2rem); border-top:2px solid var(--rt-color-tinta); }
.rt-portada-head__eyebrow { display:flex; align-items:center; gap:.45rem; margin:0 0 .15rem; color:var(--rt-color-rojo-accesible); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.14em; }
.rt-portada-head__eyebrow::before { content:""; width:.45rem; height:.45rem; border-radius:999px; background:var(--rt-color-rojo); }
.rt-portada-head__title { margin:0; font-family:var(--rt-font-heading); font-size:clamp(1.5rem,3.2vw,2.4rem); font-weight:800; letter-spacing:-.05em; line-height:1.02; }
/* La cartelera son carteles de cine: van en vertical porque esa es su
proporción, y recortados a apaisado le cortan la cabeza al protagonista,
que es literalmente lo que vende la película. */
/* --- Las rejillas de la portada magazine, escritas a mano ----------------
**Y esto es una excepción que hay que justificar, porque normalmente el CSS
de un bloque lo escribe el constructor.**
Nectarblocks genera el CSS por bloque en el JavaScript del editor, y sólo
al tocar un control real del panel: un bloque insertado por REST se sirve
sin `--columns` y la rejilla sale a una sola columna. La receta conocida es
abrir la página en el editor y cambiar un valor. Funciona, pero deja la
portada dependiendo de que alguien se acuerde de hacerlo cada vez que se
toque un bloque desde fuera, y eso es una trampa que se cobra sola.
Como los cuatro bloques llevan identificador propio y estable
-`rt-portada-*` en vez del `block-XXXX` aleatorio del editor-, su rejilla se
puede escribir aquí y deja de depender de nada. Los puntos de corte y los
nombres de variable son los mismos que genera el constructor, comprobados
contra la rejilla de `/agenda/`, así que si un día se toca desde el panel
el resultado es idéntico y no hay pelea entre las dos hojas. */
#rt-portada-principal { --columns:1; --grid-spacing:0px; }
#rt-portada-secundarias { --columns:3; --grid-spacing:20px; }
#rt-portada-agenda { --columns:4; --grid-spacing:24px; }
#rt-portada-cartelera { --columns:6; --grid-spacing:18px; }
@media (max-width:1024px) {
#rt-portada-secundarias { --columns:3; --grid-spacing:16px; }
#rt-portada-agenda { --columns:2; --grid-spacing:20px; }
#rt-portada-cartelera { --columns:3; --grid-spacing:16px; }
}
@media (max-width:767px) {
/* Las secundarias bajan a una y no a dos: con el texto encima de la foto,
dos columnas en un móvil dejan el titular en cuatro palabras por línea. */
#rt-portada-secundarias { --columns:1; --grid-spacing:16px; }
#rt-portada-agenda { --columns:1; --grid-spacing:18px; }
/* La cartelera sí aguanta dos: un cartel se reconoce por la imagen y el
título va debajo, así que no hay nada que se parta. */
#rt-portada-cartelera { --columns:2; --grid-spacing:12px; }
}
/* La proporción de cada imagen, por la misma razón que lo anterior. */
/* La pieza principal va a 16:9 y a todo el ancho: en un diario lo que
distingue la portada del resto no es un tratamiento distinto, es el tamaño. */
#rt-portada-principal .nectar-blocks-post-grid__item__featured-media { aspect-ratio:16/9; }
#rt-portada-principal .nectar-blocks-post-grid__item__title { font-size:clamp(1.6rem,4vw,3rem); line-height:1.02; letter-spacing:-.05em; }
#rt-portada-secundarias .nectar-blocks-post-grid__item__featured-media,
#rt-portada-agenda .nectar-blocks-post-grid__item__featured-media { aspect-ratio:4/3; }
#rt-portada-cartelera .nectar-blocks-post-grid__item__featured-media { aspect-ratio:2/3; }
/* --- La pieza principal de la portada ------------------------------------
Foto a la izquierda y titular a la derecha en escritorio, apilado en móvil.
Es la maqueta de portada de diario de toda la vida, y aquí se escribe a mano
porque la disposición equivalente del constructor —`content-side`— depende
de una capa de CSS que sólo genera su editor: montada desde fuera dejaba la
imagen a 0 px de alto y medio folio en blanco debajo. */
.rt-hero-noticia { margin:0 0 clamp(1.4rem,3vw,2.2rem); }
.rt-hero-noticia__link { display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(1rem,2.4vw,2rem); align-items:center; color:inherit; text-decoration:none; }
@media (max-width:860px) { .rt-hero-noticia__link { grid-template-columns:1fr; } }
.rt-hero-noticia__figura { margin:0; overflow:hidden; border-radius:var(--rt-radius-md); background:var(--rt-color-fondo); aspect-ratio:16/10; }
.rt-hero-noticia__figura img { width:100%; height:100%; object-fit:cover; transition:transform var(--rt-dur) var(--rt-ease); }
.rt-hero-noticia__link:hover .rt-hero-noticia__figura img { transform:scale(1.03); }
@media (prefers-reduced-motion:reduce) { .rt-hero-noticia__figura img { transition:none; } }
.rt-hero-noticia__medio { margin:0 0 .3rem; color:var(--rt-color-rojo-accesible); font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.13em; }
/* El titular más grande de la portada tiene que ser una noticia, y por eso
este cuerpo es mayor que el de cualquier encabezado de sección. */
.rt-hero-noticia__titular { margin:0; font-family:var(--rt-font-heading); font-size:clamp(1.6rem,3.6vw,2.9rem); font-weight:800; letter-spacing:-.05em; line-height:1; text-wrap:balance; }
.rt-hero-noticia__link:hover .rt-hero-noticia__titular { text-decoration:underline; text-underline-offset:.12em; }
.rt-hero-noticia__entradilla { margin:.6rem 0 0; max-width:48ch; color:var(--rt-color-gris); font-size:1rem; line-height:1.55; }
/* =========================================================================
LA PORTADA: cabecera partida y mosaico
=========================================================================
Eduardo: «la foto del hero ya no me gusta que sea completa, tendría que
ocupar solo la mitad de página en desktop». Tiene razón y no es sólo gusto:
una foto a pantalla completa son diez segundos de scroll antes de la primera
respuesta útil, y esto es una guía, no un folleto. */
.rt-cabecera { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,3.5vw,3rem); align-items:center; margin:0 0 clamp(2rem,4vw,3rem); }
@media (max-width:900px) {
/* En móvil la foto va **debajo** del texto, no encima: en una pantalla
estrecha lo primero tiene que ser lo que se puede pulsar. */
.rt-cabecera { grid-template-columns:1fr; gap:1.4rem; }
.rt-cabecera__figura { order:2; }
}
.rt-cabecera__antetitulo { margin:0 0 .35rem; color:var(--rt-color-rojo-accesible); font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.14em; }
.rt-cabecera__titulo { margin:0; font-family:var(--rt-font-heading); font-size:clamp(2.4rem,5.6vw,4.4rem); font-weight:800; letter-spacing:-.06em; line-height:.94; text-wrap:balance; }
.rt-cabecera__entradilla { margin:.7rem 0 1.2rem; max-width:46ch; color:var(--rt-color-gris); font-size:1.02rem; line-height:1.55; }
.rt-cabecera__figura { margin:0; overflow:hidden; border-radius:var(--rt-radius-md); aspect-ratio:4/5; background:var(--rt-color-fondo); }
@media (max-width:900px) { .rt-cabecera__figura { aspect-ratio:16/9; } }
.rt-cabecera__figura img { width:100%; height:100%; object-fit:cover; }
/* El buscador dentro de la cabecera no necesita su propio aire ni su rótulo
en mayúsculas: ya está debajo de un titular que dice de qué va esto. */
.rt-cabecera .rt-find { margin:0 0 .9rem; }
.rt-cabecera .rt-find__label { font-size:.7rem; }
.rt-cabecera .rt-accesos { margin:0; }
/* --- El mosaico ----------------------------------------------------------
Una pieza grande a la izquierda y tres encajadas a la derecha. La jerarquía
la da el tamaño, que es lo único que la da en una portada de papel. */
.rt-mosaico { display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(2,minmax(0,1fr)); gap:14px; height:clamp(26rem,42vw,34rem); }
.rt-tesela--1 { grid-column:1/3; grid-row:1/3; }
.rt-tesela--2 { grid-column:3/5; grid-row:1/2; }
.rt-tesela--3 { grid-column:3/4; grid-row:2/3; }
.rt-tesela--4 { grid-column:4/5; grid-row:2/3; }
/* Con menos de cuatro piezas con foto el mosaico encoge en vez de dejar
huecos: un hueco en una rejilla se lee como un error de carga. */
.rt-mosaico--3 .rt-tesela--3 { grid-column:3/5; }
.rt-mosaico--2 .rt-tesela--2 { grid-row:1/3; }
.rt-mosaico--1 .rt-tesela--1 { grid-column:1/5; }
@media (max-width:900px) {
/* Dos columnas y alturas propias: en móvil una rejilla de altura fija deja
las teselas de abajo en una franja de tres centímetros. */
.rt-mosaico { grid-template-columns:repeat(2,1fr); grid-template-rows:auto; height:auto; gap:10px; }
.rt-mosaico .rt-tesela { grid-column:auto !important; grid-row:auto !important; aspect-ratio:1/1; }
.rt-mosaico .rt-tesela--1 { grid-column:1/3 !important; aspect-ratio:16/10; }
}
.rt-tesela { position:relative; display:block; overflow:hidden; border-radius:var(--rt-radius-md); background:var(--rt-color-tinta); color:var(--rt-color-blanco); text-decoration:none; }
.rt-tesela__foto { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform var(--rt-dur-slow) var(--rt-ease); }
.rt-tesela:hover .rt-tesela__foto, .rt-tesela:focus-visible .rt-tesela__foto { transform:scale(1.05); }
@media (prefers-reduced-motion:reduce) { .rt-tesela__foto { transition:none; } }
/* El velo hace legible el titular sobre cualquier foto. Va de transparente a
casi negro y sólo en la mitad de abajo, que es donde está el texto: un velo
uniforme apaga la foto entera y entonces daba igual ponerla. */
.rt-tesela__velo { position:absolute; inset:0; background:linear-gradient(to top, rgb(11 10 12 / 88%) 0%, rgb(11 10 12 / 55%) 32%, rgb(11 10 12 / 0%) 68%); }
.rt-tesela__texto { position:absolute; inset:auto 0 0 0; display:flex; flex-direction:column; gap:.2rem; padding:clamp(.8rem,1.6vw,1.4rem); }
.rt-tesela__medio { color:#ff8f93; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.13em; }
.rt-tesela__titular { font-family:var(--rt-font-heading); font-weight:800; letter-spacing:-.035em; line-height:1.08; text-wrap:balance; }
.rt-tesela--1 .rt-tesela__titular { font-size:clamp(1.3rem,2.4vw,2.05rem); }
.rt-tesela--2 .rt-tesela__titular { font-size:clamp(1rem,1.5vw,1.3rem); }
.rt-tesela--3 .rt-tesela__titular, .rt-tesela--4 .rt-tesela__titular { font-size:clamp(.9rem,1.15vw,1.05rem); }
/* En las dos pequeñas el titular se corta a tres líneas: mejor cortado que
desbordando la tesela y tapando la foto entera. */
.rt-tesela--3 .rt-tesela__titular, .rt-tesela--4 .rt-tesela__titular { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.rt-tesela:hover .rt-tesela__titular { text-decoration:underline; text-underline-offset:.14em; }
.rt-tesela__cuando { color:rgb(255 255 255 / 72%); font-size:.72rem; font-weight:700; }
.rt-mosaico__mas { margin:.8rem 0 0; font-size:.9rem; font-weight:700; }
.rt-mosaico__mas a { color:var(--rt-color-tinta); text-decoration:none; }
/* Sin la celda de titulares, la llamada a la acción ocupa **la fila entera**.
`grid-column:auto/-1` no valía: la colocación automática la dejaba en la
última columna con tres celdas grises a su izquierda, que es exactamente el
hueco que se quería quitar. Un hueco en una rejilla se lee como un error de
carga, no como aire. */
.rt-board__cta { grid-column:1/-1; display:flex; align-items:center; justify-content:flex-end; }
/* --- Las tarjetas de sección --------------------------------------------
Foto, nombre, cifra, explicación y botón. Sustituyen a las pastillas de
colores y a la rejilla de ocho puertas: decían lo mismo y sin foto. */
.rt-secciones { margin:0 0 clamp(1.6rem,3.5vw,2.6rem); }
.rt-secciones__list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(.9rem,2vw,1.5rem); margin:0; padding:0; list-style:none; }
@media (max-width:1024px) { .rt-secciones__list { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) { .rt-secciones__list { grid-template-columns:1fr; } }
.rt-seccion { margin:0; padding:0; list-style:none; }
.rt-seccion::before, .rt-seccion::marker { content:none; }
/* La tarjeta entera es el enlace, y el botón de dentro es un `span`: un enlace
dentro de otro no es HTML válido ni se puede tabular bien. */
.rt-seccion__link { display:flex; flex-direction:column; height:100%; overflow:hidden; border:1px solid rgb(29 29 31 / 10%); border-radius:var(--rt-radius-md); background:var(--rt-color-blanco); color:inherit; text-decoration:none; transition:transform var(--rt-dur) var(--rt-ease), box-shadow var(--rt-dur) var(--rt-ease); }
.rt-seccion__link:hover, .rt-seccion__link:focus-visible { transform:translateY(-4px); box-shadow:var(--rt-shadow-soft); }
@media (prefers-reduced-motion:reduce) { .rt-seccion__link { transition:none; } }
.rt-seccion__figura { margin:0; overflow:hidden; aspect-ratio:16/10; background:var(--rt-color-fondo); }
.rt-seccion__figura img { width:100%; height:100%; object-fit:cover; transition:transform var(--rt-dur-slow) var(--rt-ease); }
.rt-seccion__link:hover .rt-seccion__figura img { transform:scale(1.05); }
@media (prefers-reduced-motion:reduce) { .rt-seccion__figura img { transition:none; } }
/* `margin-top:auto` en el botón: con líneas de distinto largo, los botones se
quedaban a alturas distintas y la rejilla parecía descuadrada. */
.rt-seccion__texto { display:flex; flex:1; flex-direction:column; gap:.25rem; padding:clamp(.9rem,1.8vw,1.2rem); }
.rt-seccion__nombre { margin:0; font-family:var(--rt-font-heading); font-size:1.15rem; font-weight:800; letter-spacing:-.035em; }
.rt-seccion__cifra { margin:0; color:var(--rt-color-rojo-accesible); font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; font-variant-numeric:tabular-nums; }
.rt-seccion__linea { margin:.25rem 0 0; color:var(--rt-color-gris); font-size:.92rem; line-height:1.5; }
.rt-seccion__boton { margin-top:auto; padding-top:.8rem; color:var(--rt-color-tinta); font-size:.88rem; font-weight:800; }
.rt-seccion__link:hover .rt-seccion__boton { color:var(--rt-color-rojo-accesible); }
.rt-secciones__credito { margin:.9rem 0 0; color:var(--rt-color-gris); font-size:.72rem; }
/* --- Nuestros componentes declaran su propia letra ----------------------
**Y esto no es celo: es que se rompió.** Medido el 18-sep en la portada,
tres piezas nuestras se estaban pintando con tipografías que no son
nuestras, heredadas de los ajustes globales que la importación de demos
sobrescribió el 17-sep:
.rt-find__label → Schibsted Grotesk (el rótulo del buscador, arriba
del todo de la portada)
.rt-find__boton → Aspekta
.rt-tubarrio__boton → Aspekta
Ninguna de las tres declaraba `font-family`, así que caía en la tipografía
global de «label» y de «botón» del constructor. La lección ya estaba escrita
—importar una demo se lleva por delante los ajustes del sitio— y esto es la
misma historia un año después: **un componente nuestro no debe depender de
un global que cualquier importación puede pisar.** */
.rt-find__label,
.rt-find__input,
.rt-find__ayuda { font-family: var(--rt-font-body); }
/* La clase va **doblada** a propósito. El tema pinta los botones con
`button[type="submit"]`, que pesa más que una clase sola —un elemento más un
atributo gana a una clase—, así que mi primera versión no ganaba y los
botones seguían en Aspekta. Doblar la clase sube el peso sin recurrir a
`!important`, que es lo que hay que evitar: un `!important` aquí obligaría a
otro `!important` la próxima vez. */
.rt-find__boton.rt-find__boton,
.rt-tubarrio__boton.rt-tubarrio__boton,
.rt-mapa__boton.rt-mapa__boton { font-family: var(--rt-font-heading); }
/* El texto para lectores de pantalla también declara su letra: es invisible,
pero el navegador **se descarga igualmente la fuente** que le toque. «Elige
tu barrio» estaba bajándose Schibsted Grotesk entera para no verse. */
.screen-reader-text { font-family: var(--rt-font-body); }
/* =========================================================================
QUE RESPIRE
=========================================================================
Eduardo: «quiero que todo el diseño respire, veo que en muchos sitios está
todo pegado». Medido antes de tocar nada, y tenía razón: el patrón se repite
en toda la web.
.rt-seccion__texto relleno 19,2 px huecos internos 4,0 px
.rt-board__cell relleno 17,6 px lista con hueco 6,4 px
.rt-shop relleno 16,8 px huecos internos 4,8 px
.rt-shop__actions hueco 6,4 px
Un relleno de 17 px y un hueco interno de 5 px es lo que hace que una ficha
con cuatro líneas se lea como un bloque de texto en vez de como cuatro
datos. Y los saltos entre secciones de la portada iban a 217, 51 y 98 px:
no es que fueran cortos, es que **no había ritmo**.
Se arregla con una escala y no subiendo números a ojo, que es lo que deja
una web con veinte medidas distintas y ninguna razón detrás. */
:root {
--rt-espacio-3xs: .25rem; /* 4 */
--rt-espacio-2xs: .5rem; /* 8 */
--rt-espacio-xs: .75rem; /* 12 */
--rt-espacio-sm: 1rem; /* 16 */
--rt-espacio-md: 1.5rem; /* 24 */
--rt-espacio-lg: 2rem; /* 32 */
--rt-espacio-xl: 3rem; /* 48 */
/* El salto entre secciones: el único que crece con la pantalla, porque en
un móvil 72 px de aire es media pantalla perdida. */
--rt-espacio-seccion: clamp(2.75rem, 6vw, 4.5rem);
}
/* --- El ritmo de la portada --------------------------------------------- */
.rt-portada-head { margin:var(--rt-espacio-seccion) 0 var(--rt-espacio-md); padding-top:var(--rt-espacio-sm); }
.rt-cabecera { margin-bottom:var(--rt-espacio-seccion); }
.rt-secciones, .rt-tubarrio, .rt-mapa { margin-bottom:var(--rt-espacio-seccion); }
.rt-mosaico__mas { margin-top:var(--rt-espacio-sm); }
/* --- Las tarjetas de sección -------------------------------------------- */
.rt-secciones__list { gap:var(--rt-espacio-md); }
.rt-seccion__texto { padding:var(--rt-espacio-md); gap:var(--rt-espacio-2xs); }
.rt-seccion__linea { margin-top:var(--rt-espacio-2xs); line-height:1.6; }
.rt-seccion__boton { padding-top:var(--rt-espacio-md); }
/* --- El tablero del día -------------------------------------------------
El hueco de la lista sube de 6 a 12 px: sus elementos son de dos y tres
líneas, y con 6 px entre ellos no se sabe dónde acaba un acto y empieza el
siguiente. */
.rt-board__cell, .rt-board__now { padding:var(--rt-espacio-md); }
.rt-board__list { display:flex; flex-direction:column; gap:var(--rt-espacio-xs); }
.rt-board__more { margin-top:var(--rt-espacio-sm); }
/* --- Las fichas de comercio y de equipamiento ---------------------------- */
.rt-shop { padding:var(--rt-espacio-md) var(--rt-espacio-md) var(--rt-espacio-md); gap:var(--rt-espacio-2xs); }
.rt-shops__fichas { gap:var(--rt-espacio-md); }
.rt-shop__actions { gap:var(--rt-espacio-2xs); margin-top:var(--rt-espacio-xs); }
.rt-place { padding:var(--rt-espacio-md) var(--rt-espacio-2xs); }
.rt-hood-place, .rt-hood-event { padding:var(--rt-espacio-md) var(--rt-espacio-2xs); }
/* --- El mosaico ---------------------------------------------------------- */
.rt-mosaico { gap:var(--rt-espacio-sm); }
.rt-tesela__texto { padding:var(--rt-espacio-md); gap:var(--rt-espacio-3xs); }
/* --- Los servicios del barrio y el mapa ---------------------------------- */
.rt-servicios { padding:var(--rt-espacio-md); margin-bottom:var(--rt-espacio-seccion); }
.rt-servicios__list { gap:var(--rt-espacio-2xs) var(--rt-espacio-md); }
.rt-mapa__head { margin-bottom:var(--rt-espacio-sm); }
/* --- El texto, que también respira --------------------------------------
Un párrafo a 1,5 de interlineado se lee; a 1,6 se lee sin esfuerzo, y la
diferencia son dos píxeles por línea. */
.rt-seccion__linea, .rt-cabecera__entradilla, .rt-hero-noticia__entradilla,
.rt-fuentes__intro, .rt-shops__aviso { line-height:1.6; }
/* El logo envuelto en su enlace: sin esto el `` es en línea y el bloque de
dentro se descuadra medio píxel, que en una cabecera se ve. */
.rt-enlace-bloque { display:block; text-decoration:none; }
/* =========================================================================
HOY, EN CIFRAS
=========================================================================
Eduardo, viendo el tablero anterior: «vamos a definir bien qué es hoy en la
home... yo lo que haría es poner números, como si fueran mini cards».
Lo que cambia de verdad no es el tamaño: es **qué se lee primero**. En el
tablero, lo primero era un rótulo -«AGENDA»- y el dato venía después. Aquí
la cifra va delante y grande, y el rótulo debajo y pequeño, porque «4» y
«actos hoy» en ese orden se entienden sin leer la segunda línea. */
.rt-hoy { margin:0 0 var(--rt-espacio-lg); }
.rt-hoy__dia { margin:0 0 var(--rt-espacio-xs); color:var(--rt-color-gris); font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.14em; }
/* `auto-fit` y no un número de columnas: las tarjetas que no tienen cifra
honesta no se pintan, así que la fila puede traer dos, tres o cuatro. Con un
número fijo, el día que el servicio del tiempo esté caído quedaría un hueco
gris, que se lee como un error de carga. */
.rt-hoy__list { display:grid; grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr)); gap:var(--rt-espacio-xs); margin:0; padding:0; list-style:none; }
.rt-hoy__item { display:flex; }
.rt-hoy__caja { display:flex; flex:1; flex-direction:column; justify-content:center; gap:.1rem; padding:var(--rt-espacio-sm) var(--rt-espacio-md); border:1px solid rgb(29 29 31 / 10%); border-radius:var(--rt-radius-md); background:var(--rt-color-blanco); color:inherit; text-decoration:none; }
.rt-hoy__link { transition:border-color var(--rt-dur-fast) var(--rt-ease), transform var(--rt-dur-fast) var(--rt-ease); }
.rt-hoy__link:hover { border-color:var(--rt-color-tinta); transform:translateY(-2px); }
/* `tabular-nums` para que 4 y 24 ocupen lo mismo y la fila no baile al
refrescarse el dato. */
.rt-hoy__cifra { font-family:var(--rt-font-heading); font-size:clamp(1.9rem,3.6vw,2.6rem); font-weight:800; line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.rt-hoy__que { color:var(--rt-color-gris); font-size:.84rem; line-height:1.3; }
/* El tiempo es lo único que no lleva enlace, y sin un color propio parecería
una tarjeta rota. */
.rt-hoy__item--tiempo .rt-hoy__cifra { color:var(--rt-color-rojo-accesible); }
.rt-hoy__mas { margin:var(--rt-espacio-sm) 0 0; }
/* =========================================================================
LAS FRANJAS: FOTO A UN LADO, ALGO QUE HACER AL OTRO
=========================================================================
Dos usos de la misma pieza -el buscador y los barrios-, y por eso un solo
bloque de estilos. La foto y el texto van al 50 % porque la acción de dentro
-un campo de búsqueda, un desplegable- necesita ancho de verdad: a un tercio
el buscador queda como una ranura. */
.rt-franja { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(1.5rem,3.5vw,3rem); margin:0 0 var(--rt-espacio-seccion); padding:clamp(1.2rem,2.6vw,2rem); border-radius:var(--rt-radius-md); }
.rt-franja--fondo { background:var(--rt-color-fondo); }
.rt-franja--claro { background:var(--rt-color-blanco); border:1px solid rgb(29 29 31 / 10%); }
/* Con la foto a la derecha se invierte el orden visual, no el del HTML: quien
navega con teclado o escuchando sigue leyendo título, texto y acción. */
.rt-franja--derecha .rt-franja__figura { order:2; }
.rt-franja__figura { margin:0; overflow:hidden; border-radius:var(--rt-radius-sm); aspect-ratio:4/3; background:rgb(29 29 31 / 6%); }
.rt-franja__figura img { width:100%; height:100%; object-fit:cover; }
.rt-franja__antetitulo { margin:0 0 .3rem; color:var(--rt-color-rojo-accesible); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.14em; }
.rt-franja__titulo { margin:0; font-family:var(--rt-font-heading); font-size:clamp(1.7rem,3.4vw,2.6rem); font-weight:800; letter-spacing:-.04em; line-height:1.02; text-wrap:balance; }
.rt-franja__entradilla { margin:.6rem 0 0; max-width:44ch; color:var(--rt-color-gris); font-size:1rem; line-height:1.6; }
.rt-franja__accion { margin-top:var(--rt-espacio-sm); }
/* Las dos piezas prestadas traen su propio aire de cuando vivían solas en la
página; dentro de la franja sobra. */
.rt-franja .rt-find { margin:0; padding:0; max-width:none; }
.rt-franja .rt-tubarrio { margin:0; padding:0; background:none; }
.rt-franja .rt-tubarrio__form { margin:0; }
@media (max-width:900px) {
/* La foto, debajo: en una pantalla estrecha lo primero tiene que ser lo que
se puede pulsar. Es la misma regla que ya sigue la cabecera. */
.rt-franja { grid-template-columns:1fr; gap:1.2rem; }
.rt-franja__figura,
.rt-franja--derecha .rt-franja__figura { order:2; aspect-ratio:16/9; }
}
/* =========================================================================
LOS BOTONES, MENOS REDONDOS
=========================================================================
Eduardo: «me gustan más los botones con menos radius, que tengan pero no tan
redondeados».
Un radio propio en vez de cambiar `--rt-radius-pill`, porque la pastilla
**sigue haciendo falta** donde de verdad es una pastilla: las etiquetas, los
contadores y el botón circular de la cabecera, que es un círculo y con 10 px
de radio sería un cuadrado con las esquinas mordidas. */
:root { --rt-radius-boton: .6rem; }
.rt-ficha__boton,
.rt-board__boton,
.rt-mapa__boton,
.rt-tubarrio__boton,
.rt-find__boton,
.rt-find__row,
.rt-boton { border-radius:var(--rt-radius-boton); }
/* El campo de búsqueda y su botón comparten caja: si el de fuera se cuadra y
el de dentro no, queda un cerco blanco en las esquinas. */
.rt-find__row { border-radius:calc(var(--rt-radius-boton) + .2rem); }
/* --- El botón compartido -------------------------------------------------
Nace con las cifras del día. Hasta ahora cada pieza traía su propio botón
-`rt-ficha__boton`, `rt-board__boton`, `rt-mapa__boton`-, todos iguales y
escritos tres veces; lo nuevo se apoya en éste. */
.rt-boton { display:inline-flex; align-items:center; gap:.45rem; min-height:44px; padding:.62rem 1.2rem; background:var(--rt-color-rojo-accesible); color:var(--rt-color-blanco); font-family:var(--rt-font-heading); font-size:.92rem; font-weight:800; text-decoration:none; transition:background var(--rt-dur-fast) var(--rt-ease), transform var(--rt-dur-fast) var(--rt-ease); }
.rt-boton:hover { background:var(--rt-color-tinta); color:var(--rt-color-blanco); transform:translateY(-1px); }
/* El fantasma es para cuando el botón acompaña y no manda: bajo las cifras del
día, un botón rojo a todo color competiría con ellas. */
.rt-boton--fantasma { background:transparent; border:1px solid rgb(29 29 31 / 22%); color:var(--rt-color-tinta); }
.rt-boton--fantasma:hover { background:var(--rt-color-tinta); border-color:var(--rt-color-tinta); color:var(--rt-color-blanco); }
/* Las cifras dentro de la cabecera no necesitan su propio aire: ya lo pone
la rejilla de dos columnas que las contiene. */
.rt-cabecera .rt-hoy { margin:0; }
/* =========================================================================
EL PIE
=========================================================================
Eduardo: «el pie de página optimízalo, que quede muy chulo, puedes añadir
algún detalle de diseño».
**Por qué esto es CSS y no constructor** (DECISIONES 31 pide justificarlo):
el pie es la sección global `nectar_sections` 2734, y su editor es el mismo
que el de las plantillas, que rebota a la portada -probado dos veces el
18-sep-. Lo que sí se hizo por REST es lo que tenía que ser contenido: fuera
el enlace a `/hoy/`, que se retiró esta mañana, y el logotipo grande dejó de
ser un `