de la foto, que es el
unico elemento de la tarjeta que envuelve a la imagen.
ENCIMA DE LA FOTO A PROPOSITO, por orden suya: «no quiero anadir nada fuera
de la imagen para que no descuadre ni ocupe mas sitio». Un aviso bajo el
nombre o bajo el precio haria mas alta esa tarjeta y solo esa, y en una
rejilla de alturas iguales eso descuadra la fila entera.
Es la misma pastilla que pinta la tienda con `flor10-insignia-colores.php`:
si se cambia una hay que cambiar la otra, o la portada y la ficha no se
parecen.
VA FUERA DEL ENLACE DE LA FOTO, como hermana suya. Ese enlace es
`aria-hidden` a proposito (va al mismo sitio que el del nombre, y anunciarlo
dos veces es ruido), asi que la pastilla metida DENTRO se escondia con el y
«3 couleurs» quedaba solo para quien ve la pantalla. Se posiciona contra
`.tbb-produkt`, cuya primera fila es la foto: misma esquina, mismo pixel.
El fondo lleva algo de transparencia porque sobre estas fotos, que son casi
todas claras, el alabastro opaco se ve como un parche pegado. */
.tbb-produkt-insignia{position:absolute;left:12px;top:12px;z-index:2;
padding:6px 11px;border-radius:999px;
background:rgba(252,250,246,.94); /* --bg-surface con alfa */
color:var(--accent-strong);
font-family:var(--font-sans);font-size:.6875rem;font-weight:600;
line-height:1;letter-spacing:.05em;text-transform:uppercase;
white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,.14);}
/* En movil la rejilla va a dos columnas: la misma pastilla se come la esquina
de una foto de 160 px. Se encoge, no se quita. */
@media (max-width:47.9375em){
/* 11 px, no 10: el repaso de movil saco el de 10 como texto ilegible. El
hueco sale del relleno, no del cuerpo de la letra. */
.tbb-produkt-insignia{left:8px;top:8px;padding:4px 8px;font-size:.6875rem;
letter-spacing:.04em;}
}
/* Fila de TRES productos dentro de una pagina de texto. La rejilla normal va a
dos columnas en movil, que es lo que pedia el diseno para SEIS piezas; con
tres, la tercera se queda sola y la fila se lee como un descuadre.
MEDIDO a 375 px: dos columnas de 161 px y un hueco de 161 al lado de la
tercera. Aqui va una sola columna, con la foto mas baja (3/2 en vez de
560/680) para que el bloque no se coma la pagina, y tres en fila desde 48em. */
.tbb-produkte-tres .tbb-produkte{grid-template-columns:minmax(0,1fr);}
.tbb-produkte-tres .tbb-produkt-img img{aspect-ratio:3/2;}
@media (min-width:48em){
.tbb-produkte-tres .tbb-produkte{grid-template-columns:repeat(3,minmax(0,1fr));}
.tbb-produkte-tres .tbb-produkt-img img{aspect-ratio:560/680;}
}
.tbb-produkt-name{font-family:var(--font-sans);font-weight:700;font-size:var(--texto);
color:var(--fg1);margin:8px 0 0;line-height:1.35;}
.tbb-produkt-name a{color:inherit;display:inline-block;padding:4px 0;}
.tbb-produkt-name a:hover{color:var(--accent-strong);}
/* Parrafos largos justificados. La clase la pone el build a los que pasan
de dos lineas; ver justificar_parrafos_largos() en build.py.
hyphens:auto funciona porque el lleva lang="de-DE": sin idioma
declarado el navegador no sabe partir las palabras.
En pantallas estrechas se alinea a la izquierda: a unos 44 caracteres por
linea el justificado abre rios de espacio, y por debajo de 45-50 no se
justifica. */
.tbb-justo{text-align:justify;hyphens:auto;}
@media (max-width:47.9375em){.tbb-justo{text-align:left;hyphens:none;}}
.tbb-produkt-preis{font-size:var(--texto);color:var(--accent-strong);font-weight:600;
margin:0;}
@media (min-width:53.75em){
.tbb-produkte{grid-template-columns:repeat(3,minmax(0,560px));gap:28px 14px;}
}
/* Cuatro por fila en escritorio, DOS en movil.
La base `.tbb-produkte` ya da dos columnas en movil, asi que aqui solo hace
falta el escritorio. Las columnas NO se topan en 560 como en la base: con
cuatro caben 1fr, que a 1.240 px de contenedor deja fichas de unos 295 y la
imagen de 560 baja en proporcion sin deformarse. */
.tbb-produkte-cuatro .tbb-produkte{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (min-width:48em){
.tbb-produkte-cuatro .tbb-produkte{grid-template-columns:repeat(4,minmax(0,1fr));}
}
/* Tarjeta de recinto entera pulsable: el `::after` del boton se estira sobre
toda la tarjeta, asi que la foto tambien lleva al detalle. Sigue habiendo UN
solo enlace, con su nombre y una sola parada de teclado.
El `position:relative` va en el , que es el ancestro contra el que se
estira; y el titular sube de capa para que siga siendo seleccionable. */
/* La tarjeta es una columna flexible para que el boton se pegue abajo: si no,
un nombre de recinto de dos lineas baja SU boton y los de la fila dejan de
estar a la misma altura. Los elementos de una fila flex ya se estiran a la
misma altura, asi que con esto los botones quedan alineados.
El fondo, el borde y la sombra estan AQUI y no en el atributo `style`: en
movil la tarjeta se aplana y un estilo en linea no se puede pisar. */
.tbb-ort-card{position:relative;display:flex;flex-direction:column;
background:var(--bg-surface);border-radius:var(--radius-lg);overflow:hidden;
box-shadow:var(--shadow-hairline);border:1px solid var(--border);}
.tbb-ort-card__cuerpo{flex:1;display:flex;flex-direction:column;
align-items:flex-start;padding:20px 22px 22px;}
.tbb-ort-cta{margin-top:auto;display:inline-flex;align-items:center;
background:none;border:1px solid var(--border-strong);
border-radius:var(--radius-sm);padding:12px 16px;min-height:44px;
color:var(--fg1);font-weight:600;font-size:1rem;}
/* La altura de la foto va aqui y no en el atributo `style` de la etiqueta: en
movil, con dos tarjetas por fila, una tarjeta mide unos 158 px de ancho y
170 px de foto encima es una tira. */
.tbb-ort-card__foto{width:100%;height:clamp(118px,20vw,170px);object-fit:cover;
display:block;}
/* La etiqueta del municipio. Con foto se posa sobre ella (la tarjeta es
`position:relative`, y la foto ocupa la parte de arriba); sin foto se queda
en el cuerpo, antes del nombre. */
/* El nombre del recinto. Va en una CLASE y no en un `style` en linea porque
un `style` en linea gana a la hoja sin `!important`, y con el nombre en linea
ni la rejilla compacta ni la lista de movil podian cambiarlo: la regla de
movil llevaba desde el 11-sep sin aplicarse.
Estos valores son los mismos que tenia en linea, o sea que la tarjeta grande
de /cimetieres/ no cambia. */
.tbb-ort-card__nombre{font-family:var(--font-serif);font-weight:600;
font-size:clamp(1.5rem,1.9vw,1.6875rem);line-height:var(--leading-snug);
letter-spacing:var(--tracking-tight);color:var(--fg1);margin:0 0 16px;}
.tbb-ort-card__zona{display:inline-flex;align-items:center;gap:6px;
background:rgba(20,20,20,0.72);color:var(--eterna-alabaster);
font-size:var(--texto-min);font-weight:600;padding:5px 12px;
border-radius:var(--radius-pill);margin:0 0 12px;}
.tbb-ort-card--foto .tbb-ort-card__zona{position:absolute;top:12px;left:12px;
margin:0;z-index:2;}
.tbb-ort-cta::after{content:"";position:absolute;inset:0;z-index:1;}
.tbb-ort-card h2{position:relative;z-index:2;}
.tbb-ort-cta:focus-visible{outline:3px solid var(--accent-strong);outline-offset:2px;}
/* --- Tira de categorias: pastillas, como en el diseno --- */
/* Tira de categorias: UNA SOLA FILA siempre, como el diseno, con las pastillas
repartiendose el ancho sean tres o cuatro.
flex:1 1 0 y min-width:0, NO flex:1 1 100%: un flex-basis del 100% las apila
una debajo de otra. Lo tuve puesto y era el fallo.
La etiqueta puede partirse en dos lineas en pantallas muy estrechas antes que
desbordar, asi que no lleva white-space:nowrap. */
/* Cabecera de la ficha de recinto: foto a la izquierda y titular a la derecha.
En movil va en UNA columna, y esto era un fallo visible.
Estaba con `grid-template-columns:200px 1fr` en estilo en linea. A 375px el
contenedor deja 335: 200 de la foto mas 28 de hueco dejan 107 para el texto,
pero un elemento de rejilla no puede encogerse por debajo de su palabra mas
larga (min-width:auto), asi que la columna del texto se quedaba en 187 y la
cabecera se salia OCHENTA pixeles por la derecha. El nombre del recinto se
cortaba contra el borde de la pantalla.
Detectado el 26-ago-2026 en las dos fichas de detalle, que son la plantilla de
todos los recintos de todas las ciudades. */
.tbb-ort-cabecera{display:grid;grid-template-columns:1fr;gap:18px;
align-items:start;margin-bottom:32px;}
/* Las fotos de PRODUCTO que la fachada usa como decoracion. El `![]()
` lo
escribe WordPress en un fragmento (no puede llevar estilo en linea sin que la
plantilla del mu-plugin sepa de diseno), asi que el tamano vive aqui. */
/* LAS TARJETAS DE CATEGORIA VAN POR PROPORCION, NO POR ALTO FIJO.
Tenian `height:190px`. Con la foto vertical de producto (560x680) dentro de
una caja apaisada, `cover` se comia la pieza por arriba y por abajo; y en
movil era peor, porque la tarjeta pasa a ocupar el ancho entero y el alto
seguia siendo 190. La tienda no tenia ese problema porque usa las fotos
CUADRADAS de categoria a 4/3, y a eso se iguala aqui: misma proporcion en
las dos capas, y el alto lo pone el ancho. */
.tbb-foto-cat{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
display:block;}
/* En una sola columna, 4/3 de ancho completo es una foto enorme antes de poder
leer el nombre de la categoria. Se achata a 16/9, que es lo que hace que se
vean las cuatro tarjetas sin tener que arrastrar. */
@media (max-width:37.4375em){
.tbb-foto-cat{aspect-ratio:16/9;}
}
.tbb-foto-deco{width:100%;height:clamp(240px,30vw,330px);object-fit:cover;
border-radius:var(--radius-lg);display:block;}
.tbb-ort-foto{width:100%;height:190px;object-fit:cover;
border-radius:var(--radius-lg);display:block;}
@media (min-width:34em){
.tbb-ort-cabecera{grid-template-columns:200px 1fr;gap:28px;}
.tbb-ort-foto{width:200px;height:150px;}
}
/* Hero de la portada.
La altura vive aqui y no en el estilo en linea porque un estilo en linea no lo
puede sobrescribir una media query.
En movil baja a 260px por un motivo medido: el banner es de 1519x420 y en una
caja de 375x420 solo se veia el 25% del ancho, una rendija de una foto
panoramica. A 260 de alto se ve el 40%. El fichero tiene 420 de alto, asi que
de el no se puede sacar un recorte vertical: esto es lo mejor que da sin una
foto nueva. */
.tbb-hero{min-height:min(420px,58vh);}
@media (max-width:47.9375em){
.tbb-hero{min-height:260px;}
/* La foto CLARA (prueba del 22-sep-2026) lleva el motivo a la derecha, y en
movil el recorte se come casi todo: medido a 375, del fichero de 1280 solo
se ve la franja 410-870, y la vela esta en 819-1101. O sea, el 18% de la
vela y el resto lino vacio. Corriendo el encuadre al 69% la vela entra en
el cuadro y el texto se queda sobre la parte lisa de la izquierda.
Va atado a `--claro`: al volver a la foto oscura, esta regla no aplica y
no hay que acordarse de quitarla. */
.tbb-hero--claro img{object-position:69% center;}
}
/* Tira de pastillas de categoria.
En movil van UNA POR LINEA, y no es capricho: a 375px el contenedor deja
335px, o sea 103,7px por pastilla con los huecos. El contenido necesita 129 a
136 (circulo de 52, hueco de 10, la etiqueta y 28 de relleno). Como la
pastilla es flex con justify-content:center, el sobrante se salia por los DOS
lados: el circulo de la primera acababa en x=-7, fuera de la pantalla, y el de
la segunda se montaba encima de la primera. Se veia roto.
El diseno no traia variante movil de esta tira (su isMobile solo tocaba el
menu y la parrilla de producto), asi que se resuelve como el resto del sitio:
una columna abajo, tres a partir del corte. */
.tbb-kats{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch;}
.tbb-kat{flex:1 1 100%;min-width:0;display:flex;align-items:center;
justify-content:center;gap:10px;border:1px solid var(--border);
border-radius:var(--radius-pill);background:var(--bg-surface);padding:10px 12px;
transition:border-color 0.15s ease,background 0.15s ease;text-align:center;}
/* En movil, a la IZQUIERDA. Lo pidio ella el 21-sep-2026 despues de verlo asi
en /fleuriste/. Y de paso quita el problema que describe el comentario de
arriba: con `center` el sobrante se reparte por los dos lados y el circulo
se salia por la izquierda; a la izquierda, el sobrante se va entero a la
derecha, que es donde no estorba. De 48em para arriba van tres por fila y
ahi centradas estan bien. */
@media (max-width:47.9375em){
.tbb-kat{justify-content:flex-start;text-align:left;padding:8px 20px 8px 8px;}
}
/* El corte se queda en 48em (768px), y la cuenta manda.
Medido en el navegador con la Mulish 700 cargada de verdad, la etiqueta mas larga
(«Trauergestecke», una sola palabra que NO puede partirse) ocupa 123,4px a 17px,
130,7px a 18px y 138,0px a 19px. La pastilla suma circulo 52, hueco 10, texto, y
24 de relleno.
El 2-sep-2026 la etiqueta subio de 17 a 18px a peticion de la usuaria, y el
relleno bajo de 14 a 12 por lado para dejar sitio.
POR QUE 18 Y NO 19, que era lo que se pidio para el menu:
a 768px con barra de desplazamiento el contenedor NO deja 704 sino 689, porque la
barra se come 15. Cada pastilla sale a 221,7px. A 19px necesita 224,0 y se
desborda 2,3. A 18px necesita 216,7 y sobran 5,0. Para meter 19 habria que subir
el corte por encima de 775, y entonces el iPad en vertical (768, sin barra)
perderia la fila de tres. No compensa por 1px.
TRES TRAMPAS al comprobarlo, y las tres me enganaron:
1. `scrollWidth <= clientWidth` NO detecta este desbordamiento. La pastilla es un
flex con justify-content:center y el sobrante se reparte por los dos lados,
dentro de la pastilla: la tira no se sale y `getBoundingClientRect` de la tira
no acusa nada. Hay que sumar a mano circulo + hueco + ancho del texto +
relleno y compararlo con el ancho de la pastilla, pastilla a pastilla.
2. La cuenta a mano de 768 menos el relleno de la seccion da 704 y es FALSA en
escritorio: hay que restar tambien la barra de desplazamiento. Medir
`.tbb-kats` en el navegador, no calcularlo.
3. Al medir el ancho del texto, `document.fonts.ready` se resuelve ANTES de que
ningun elemento haya usado Mulish, asi que `check()` da false y se mide con la
fuente de RESERVA: dio 120,4px en vez de 123,4. Hay que pedirla con
`document.fonts.load('700 18px Mulish')` y comprobar que `check()` devuelve
true antes de creerse una sola cifra. */
@media (min-width:48em){
.tbb-kat{flex:1 1 0;}
}
.tbb-kat:hover{border-color:var(--accent-strong);background:var(--bg-tint-brass);}
/* Parrafos justificados. `hyphens:auto` NO es opcional al lado del justificado
en aleman: sin el, un «Blumenschmuck» al final de linea abre un rio blanco,
porque el hueco se reparte entre pocas palabras muy largas. Va con el
lang="de" del , que es lo que le dice al navegador con que diccionario
partir. */
/* NO volver a crear una clase `.tbb-just`. Aqui habia una, escrita a mano en el
marcado 29 veces, que hacia lo mismo que `.tbb-justo` PERO SIN la excepcion de
movil de la linea 289; y como se definia 122 lineas mas abajo con la misma
especificidad, ganaba el empate y se llevaba por delante la buena incluso en
los parrafos que llevaban las dos. Resultado medido el 7-sep-2026: 101
parrafos de 10 paginas justificados a 41 caracteres por linea en movil.
Quien justifica es el build, midiendo el parrafo: ver justificar_parrafos_largos
en build.py. Hay una guarda en el build que para si vuelve a aparecer. */
/* --- Rejillas de dos columnas del diseno --- */
.tbb-dos{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,5vw,56px);
align-items:center;}
/* El centrado de arriba es para los bloques de texto + foto, donde la foto se
centra contra el texto. Cuando las dos celdas son texto con encabezado, el
centrado descuadra los titulos entre si (medido: 17 px de desfase en
/ueber-uns/), asi que esos bloques piden esta variante. */
.tbb-dos--arriba{align-items:start;}
/* LOS REGLAMENTOS COMUNALES de /cimetieres/. Clase propia y no `.tbb-dos`,
que la comparten otros ocho bloques y aqui hacen falta dos cosas que alli no:
un reparto 60/40 en la fila de la foto, y que en las filas de dos reglamentos
el titulo, la linea de «S'applique...» y el acordeon empiecen a la MISMA
altura en las dos columnas. Lo segundo no se arregla con align-items: el
desnivel no lo da el bloque entero, lo da que una intro ocupe una linea y la
de al lado dos. Se resuelve con subgrid, que hace que las dos columnas
compartan las tres filas del padre. */
.tbb-reglas{display:grid;grid-template-columns:minmax(0,1fr);
gap:clamp(28px,5vw,56px);align-items:start;}
@supports (grid-template-rows:subgrid){
@media (min-width:53.75em){
.tbb-reglas--par > div{display:grid;grid-template-rows:subgrid;grid-row:span 3;}
}
}
/* LAS CINCO CATEGORIAS EN UNA FILA. Clase propia y no `.tbb-auto260`, que la
comparten otros tres bloques: con `auto-fit` a 260 px caben cuatro y la
quinta se cae sola a la fila de abajo. Por debajo de 64em se deja que
reparta lo que quepa, que en movil cinco en fila no se leen. */
.tbb-cinco{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:clamp(18px,3vw,28px);}
@media (min-width:64em){
.tbb-cinco{grid-template-columns:repeat(5,minmax(0,1fr));}
}
.tbb-auto260{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:clamp(18px,3vw,28px);}
.tbb-auto220{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:clamp(20px,3vw,32px);}
/* LA TARJETA DE DATOS DE LA FICHA DE RECINTO. Cada dato ocupa lo que necesita
y no una columna fija. Antes usaba `.tbb-auto220`, que a 1280 daba tres
columnas IGUALES de 367 px: el telefono gastaba 237 de balde y la direccion
se partia en dos lineas por falta de sitio. Lo pidio ella el 29-09-2026.
Clase propia porque `.tbb-auto220` la comparten otros cinco bloques.
Es flex y no grid a proposito: la tarjeta lleva tres datos o cuatro segun el
recinto (algunos tienen horario), asi que un numero fijo de columnas no
vale. `min-width:0` para que la URL larga pueda partirse dentro de su hueco
en vez de estirar la fila. */
/* El hueco horizontal es MAYOR que el vertical a proposito. Con los 16 px que
habia, el icono del telefono quedaba pegado a la ultima palabra de la
direccion y parecia que la mordia. Vertical no hace falta tanto: las filas
ya se distinguen solas porque cada una empieza con su icono. Medido a 1280:
44 px en horizontal, 22 en vertical. Si se cambian, hay que cambiar
`_PX_GAP` en orte.py, que es con lo que se calcula el reparto en filas. */
.tbb-datos-recinto{display:flex;flex-wrap:wrap;
column-gap:clamp(28px,3.5vw,44px);row-gap:clamp(16px,2vw,22px);}
/* Los datos se estiran hasta los dos bordes solo cuando NINGUNA fila se queda
en dos. Con dos, uno se va a cada extremo y el de la derecha parece suelto:
medido a 1280, en Le Paisible sin telefono el hueco del medio se iba a 541 px,
y en Anderlecht, con la URL abajo, dejaba el telefono pegado al borde. Con
tres en la fila los huecos salen de 100 a 160 px y queda bien. Quien lo
decide es `_reparte_de_borde_a_borde` en orte.py, que simula las filas con
los anchos medidos: el CSS no sabe cuantos datos le caben a una fila. */
.tbb-datos-recinto--repartido{justify-content:space-between;}
/* Y la URL larga baja a su propia fila entera, decidido en orte.py: ver
`_url_en_su_fila`. Asi arriba quedan siempre direccion, horario y telefono. */
.tbb-datos-recinto > .tbb-dato-solo{flex:1 0 100%;}
.tbb-datos-recinto > div{min-width:0;}
/* Los grupos de distrito, uno debajo de otro. Solo aparecen cuando hay mas de
un distrito en los datos: ver `_lista` en orte.py. */
.tbb-ort-grupos{display:grid;grid-template-columns:minmax(0,1fr);
gap:clamp(28px,4vw,44px);}
.tbb-ort-grupo{margin:0;}
/* La lista de recintos NO usa .tbb-auto280, y es por una razon medida: con
`auto-fit` y `1fr` los huecos vacios se colapsan y el ancho entero se reparte
entre los elementos que haya. Con un solo recinto en el verzeichnis, la ficha
salia de 1.176 px de ancho con una foto de 170 de alto, o sea una banda
estirada. Con `auto-fill` y un techo de 360 px la ficha mide lo mismo tanto si
hay una como si hay veinte, y el sobrante queda a la derecha.
360 y no 380 para que a 1.176 quepan TRES por fila: 360*3 + 56 de hueco = 1.136. */
.tbb-ort-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,360px));
gap:clamp(18px,3vw,28px);justify-content:start;}
.tbb-auto280{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:clamp(18px,3vw,28px);}
/* Los recintos SIN agrupar por municipio: flex y no grid, a proposito.
Con `grid` las filas se alinean a la izquierda, asi que 5 tarjetas salian 3
arriba y 2 abajo pegadas al margen. `flex` con `justify-content:center` centra
CADA fila por separado, que es lo que se pidio el 11-sep-2026: 3 y 2,
centradas.
El tope de 360 px es el mismo de .tbb-ort-lista: una tarjeta sola no se
estira a todo el ancho. */
.tbb-ort-rejilla{display:flex;flex-wrap:wrap;justify-content:center;
gap:clamp(18px,3vw,28px);}
.tbb-ort-rejilla > .tbb-ort-card{flex:1 1 280px;max-width:360px;min-width:0;}
/* --- Rejilla COMPACTA: para un directorio largo --- */
/* Medido en /funerariums/ a 1440 px: catorce fichas a 360 px daban una rejilla
de 1.718 px, el 26 % de la pagina, y empujaban los productos hasta el pixel
2.601. Con la tarjeta a ~215 px caben cinco por fila (5-5-4) y la rejilla
queda en 793.
La foto y el nombre bajan CON la tarjeta, que es la parte que importa:
estrechar solo el ancho mandaba 13 de 14 nombres a dos y tres lineas y la
rejilla solo bajaba a 1.277.
Sin @media de anchos: el `flex-basis` ya reparte solo. Medido a 1440 y 1280
salen 5-5-4, a 1024 sale 4-4-4-2 y a 820, 3-3-3-3-2. */
/* SIN BOTON, en las DOS rejillas de recinto. Medida la tarjeta por dentro a
1400 px:
funerariums de 248 px, 72 eran el boton, su hueco y el pie (el 29 %)
cimetieres de 381 px, 90 como minimo, y en la tarjeta de nombre corto
el hueco entre el nombre y el boton llegaba a 82
Y el boton no anadia nada: la tarjeta entera YA era clicable, porque
`.tbb-ort-cta::after` iba con `inset:0` sobre una tarjeta `position:relative`.
Eran botones iguales repetidos encima de un enlace que ya cubria todo.
De paso se va el hueco irregular: el nombre ocupa una, dos o tres lineas
segun el recinto, y con el boton pegado abajo cada tarjeta tenia un vacio
distinto en medio.
El enlace SIGUE ESTANDO: cubre la tarjeta, no se ve, y su nombre accesible lo
da el `aria-label` («Voir les informations sur ...»). En su sitio va una
flecha. Es lo mismo que ya hacia la lista de movil de este componente. */
@media (min-width:48em){
.tbb-ort-rejilla .tbb-ort-card__nombre{margin:0;}
.tbb-ort-rejilla .tbb-ort-cta{
position:absolute;inset:0;margin:0;padding:0;border:0;background:none;
font-size:0;min-height:0;}
.tbb-ort-rejilla .tbb-ort-cta::after{
content:"";position:absolute;inset:auto 20px 20px auto;
width:9px;height:9px;
border-right:2px solid var(--fg3);border-bottom:2px solid var(--fg3);
transform:rotate(-45deg);}
/* Sitio para la flecha debajo del nombre. */
.tbb-ort-rejilla .tbb-ort-card__cuerpo{padding:20px 22px 40px;}
}
/* El ancho de la seccion del listado va POR DELANTE de sus tramos: misma
especificidad, manda la ultima escrita. */
.tbb-ort-listado--ancho{max-width:1240px;}
/* Y lo propio de la rejilla compacta: mas estrecha, foto mas baja y todo mas
apretado, incluida la flecha. */
@media (min-width:48em){
.tbb-ort-rejilla--compacta > .tbb-ort-card{flex:1 1 200px;max-width:218px;}
.tbb-ort-rejilla--compacta .tbb-ort-card__foto{height:clamp(100px,10vw,118px);}
.tbb-ort-rejilla--compacta .tbb-ort-card__cuerpo{padding:12px 14px 26px;}
.tbb-ort-rejilla--compacta .tbb-ort-cta::after{inset:auto 14px 14px auto;}
}
/* SEIS POR FILA, y seis de verdad: rejilla con seis columnas iguales, no flex
con envoltura. Con `flex-wrap` el reparto lo decide el ancho disponible y
basta un zoom o una barra de desplazamiento para que vuelvan a salir cinco;
con `grid-template-columns` son seis siempre. Lo pide /cimetieres/, que tiene
veintiuna fichas: a cinco por fila la ultima llevaba UNA sola.
El `max-width` de la tarjeta se levanta, porque aqui manda la columna. */
@media (min-width:75em){
.tbb-ort-rejilla--6{
display:grid;grid-template-columns:repeat(6,minmax(0,218px));
gap:16px;justify-content:center;}
.tbb-ort-rejilla--6 > .tbb-ort-card{max-width:none;width:auto;}
.tbb-ort-listado--ancho{max-width:1440px;}
}
/* Y SIETE en las pantallas anchas: 21 = 7+7+7, tres filas exactas y 242 px
menos de alto. El corte no es un numero redondo, es el que sale de la
cuenta: siete tarjetas de 218 con 16 de hueco son 1.622 px, y con el aire de
los lados hacen falta 1.686 de ventana. Por debajo de eso la tarjeta se
quedaria en 183 y se parten seis pastillas de municipio en vez de tres, asi
que por debajo se queda en seis. */
@media (min-width:105em){
.tbb-ort-listado--ancho{max-width:1660px;}
.tbb-ort-rejilla--6{grid-template-columns:repeat(7,minmax(0,218px));}
}
/* El nombre de la tarjeta chica, en la rejilla compacta y en la lista de movil.
A 218 px de ancho no cabe un nombre de 27 px, asi que baja a 17. Y a 17 la
Cormorant da una altura de x de 6,54 contra los 9,44 del cuerpo de texto: el
encabezado se leeria MAS PEQUENO que el parrafo, que es el defecto que se
arreglo el 14-sep. Con la Mulish, 17 px dan 8,50 y el 700 pone el resto.
Es el mismo recurso que ya usan los titulos de las preguntas de la FAQ. */
@media (min-width:48em){
.tbb-ort-rejilla--compacta .tbb-ort-card__nombre{
font-family:var(--font-sans);font-weight:700;letter-spacing:0;
font-size:1.125rem;}
}
/* En movil, DOS por fila hasta el telefono mas estrecho: con `flex-basis:280px`
por debajo de 600 px solo cabria una. El corte es el de la casa. */
/* EN MOVIL, LISTA. Medido a 375 px: la rejilla de /funerariums/ ocupaba
1.922 px, el 24 % de una pagina de 7.979, y la de /cimetieres/ 1.046 con solo
cinco tarjetas. Era el bloque mas alto de la pagina.
La misma tarjeta se reordena en fila (foto 64x64, nombre, municipio debajo y
flecha a la derecha) y baja a ~1.100 y ~520 px. Un carrusel seria aun mas
corto, pero esconderia trece de catorce recintos detras de un gesto y esta
pagina es un directorio: se entra buscando UNO.
Quitar este bloque devuelve las dos tarjetas por fila. */
@media (max-width:47.9375em){
.tbb-ort-rejilla{flex-direction:column;flex-wrap:nowrap;gap:10px;}
/* `flex-start` y no `center`: con un nombre de tres lineas la miniatura se
quedaba flotando en mitad de la fila en vez de alinearse con la primera
linea del nombre. */
.tbb-ort-rejilla > .tbb-ort-card{
flex:0 0 auto;max-width:none;width:100%;
flex-direction:row;align-items:flex-start;gap:12px;
padding:12px 40px 12px 12px;box-shadow:none;}
.tbb-ort-rejilla .tbb-ort-card__foto{
flex:0 0 64px;width:64px;height:64px;border-radius:var(--radius-sm);}
.tbb-ort-rejilla .tbb-ort-card__cuerpo{
padding:0;flex:1 1 auto;min-width:0;align-items:flex-start;}
/* El nombre primero y el municipio debajo: es el orden con el que se busca. */
/* Mulish 700 y no la serif: a 18 px la Cormorant da una altura de x de 6,93
contra los 8,50 del cuerpo de movil, o sea un nombre que se leeria mas
pequeno que el texto que tiene al lado. La Mulish da 9,00.
Esta regla apuntaba a `:is(h2,h3,h4)` y no llegaba a aplicarse nunca: el
`style` en linea del `` la ganaba. Por eso el nombre salia a 24 px con
16 px de margen y no a 18 con 0. */
.tbb-ort-rejilla .tbb-ort-card__nombre{
order:1;font-family:var(--font-sans);font-weight:700;letter-spacing:0;
font-size:1.125rem;margin:0;}
.tbb-ort-rejilla .tbb-ort-card__zona{
order:2;position:static;margin:3px 0 0;padding:0;background:none;
color:var(--fg3);font-weight:400;}
/* El enlace cubre la fila entera: el objetivo tactil es la fila, no un boton
de 129 px. El texto se oculta con `font-size:0` (el nombre accesible lo
sigue dando su aria-label) y en su sitio va la flecha. */
.tbb-ort-rejilla .tbb-ort-cta{
position:absolute;inset:0;margin:0;padding:0;border:0;background:none;
font-size:0;min-height:0;}
.tbb-ort-rejilla .tbb-ort-cta::after{
content:"";position:absolute;inset:auto 16px auto auto;top:50%;
width:9px;height:9px;margin-top:-6px;
border-right:2px solid var(--fg3);border-bottom:2px solid var(--fg3);
transform:rotate(-45deg);}
}
/* Rejilla de doce: el titulo ocupa el ancho entero y debajo van dos columnas,
texto de ocho e imagen de cuatro. Una arriba y dos abajo.
El row-gap va aparte del column-gap: el de las filas es el hueco de debajo del
encabezado, y el de las columnas se reparte entre las doce pistas.
`align-items:start` deja la foto pegada arriba en vez de centrada, que con una
columna de cuatro y un texto mas alto dejaba hueco simetrico a los lados. */
.tbb-doce{display:grid;grid-template-columns:minmax(0,1fr);
column-gap:clamp(20px,3vw,32px);row-gap:clamp(22px,3vw,30px);align-items:start;}
.tbb-doce__ancho{grid-column:1/-1;}
/* Los dos botones, centrados solo en movil: apilado y a todo el ancho quedaban
descolgados a la izquierda. El corte es el de la casa, 47.9375em, el mismo que
usan .tbb-justo y el menu. El estilo en linea del div no declara
justify-content, asi que esta regla entra sin necesidad de !important. */
@media (max-width:47.9375em){
.tbb-doce__botones{justify-content:center;}
}
@media (min-width:53.75em){
.tbb-dos{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
/* 60 el texto y 40 la foto, pedido por ella el 24-09-2026. Hay dos: una con
la foto detras del texto y otra con la foto delante, y el nombre dice el
orden en que van las columnas para no tener que ir al HTML a mirarlo. */
.tbb-reglas--texto-foto{grid-template-columns:minmax(0,3fr) minmax(0,2fr);}
.tbb-reglas--foto-texto{grid-template-columns:minmax(0,2fr) minmax(0,3fr);}
/* `row-gap:0` porque el `gap` de .tbb-reglas es para SEPARAR LAS COLUMNAS, y
al partir cada bloque en tres filas para el subgrid ese mismo hueco se
colaba entre el titulo, la linea de «S'applique...» y el acordeon: 56 px
de aire donde antes habia 10. El ritmo de dentro lo ponen los margenes del
h3 y del p, como siempre. En movil no entra esta regla y las dos reglas
siguen separandose con el gap. */
.tbb-reglas--par{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
grid-template-rows:auto auto auto;row-gap:0;}
.tbb-doce{grid-template-columns:repeat(12,minmax(0,1fr));}
.tbb-doce__ocho{grid-column:span 8;}
.tbb-doce__cuatro{grid-column:span 4;}
/* El cartel de la FAQ, pegado arriba. El acordeon de un cimetiere mide
1.034 px con las normas dentro y el cartel 540: sin esto queda medio
millar de pixeles en blanco al lado. `align-self:start` no es
decoracion: en la rejilla el hijo se estira y estirado no se pega. */
.tbb-faq-cartel{position:sticky;top:117px;align-self:start;}
}
/* Los enlaces DENTRO de la prosa, subrayados. Medido el 7-sep-2026: se
distinguian solo por el color (#7B1F2E sobre #57534A), sin subrayado, sin
borde y al mismo peso que el texto. Eso incumple el criterio 1.4.1 de WCAG,
que pide que un enlace en texto corrido no dependa solo del color.
La regla va acotada a este bloque a proposito: los nombres de producto de la
rejilla tambien son enlaces dentro de un
, pero entran por SSI desde el
fragmento de WordPress y ahi el enlace es la tarjeta entera. Subrayarlos
cambiaria un bloque que no es de esta capa. */
/* Tambien los enlaces DENTRO de una respuesta del acordeon: la sexta pregunta
de /kontakt/ lleva seis, y sin subrayado se distinguian solo por el color, que
es lo que prohibe el criterio 1.4.1 de WCAG. */
.tbb-prosa a,
.tbb-faq p a{text-decoration:underline;text-decoration-thickness:1px;
text-underline-offset:3px;text-decoration-color:var(--accent-soft);
transition:text-decoration-color var(--dur-base) var(--ease-out);}
.tbb-prosa a:hover,
.tbb-faq p a:hover{text-decoration-color:var(--accent-strong);}
/* Enlace de cartel indicador. Existe aqui porque la fachada y la tienda son
DOS HOJAS distintas: la version de la tienda se llama .tbb-hub-mas y usarla
aqui dejaba los enlaces sin estilo, servidos como anclas por defecto. */
.tbb-seguir{display:block;margin-top:8px;font-family:var(--font-sans);
font-size:var(--texto-sec);font-weight:700;color:var(--accent-strong);
text-decoration:none;border-bottom:1px solid var(--accent-soft);
padding-bottom:2px;width:fit-content;
transition:border-color var(--dur-base) var(--ease-out);}
.tbb-seguir:hover{border-bottom-color:var(--accent-strong);}
.tbb-hover-lift{transition:transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);}
.tbb-hover-lift:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.tbb-hover-shadow{transition:box-shadow var(--dur-base) var(--ease-out);}
.tbb-hover-shadow:hover{box-shadow:var(--shadow-sm);}
.tbb-btn-accent:hover{background:var(--eterna-brass-700) !important;
box-shadow:var(--shadow-md);}
.tbb-btn-primary:hover{background:var(--primary-hover) !important;}
.tbb-btn-linie:hover{border-color:var(--primary) !important;}
/* --- FAQ en : funciona sin JS y es navegable con teclado --- */
/* La pregunta va en H3 DENTRO del summary: cuelga del H2 de la seccion y le da
al acordeon la jerarquia que le faltaba, sin cambiar como se ve. El H3 va en
linea y hereda del summary, o el bloque rompe la fila del marcador. */
.tbb-faq summary h3.tbb-faq-frage{display:inline;font:inherit;color:inherit;
margin:0;letter-spacing:inherit;line-height:inherit;}
.tbb-faq summary{list-style:none;cursor:pointer;font-family:var(--font-sans);
font-weight:700;font-size:var(--texto);color:var(--fg1);}
.tbb-faq summary::-webkit-details-marker{display:none;}
/* Acordeon a dos columnas. Se usa en las paginas cuyas secciones van a 1.240:
a ese ancho la respuesta de una FAQ se iria a unos 135 caracteres por linea, y
partida en dos columnas se queda en 70. Va como envoltorio y no en .tbb-faq
para no cambiar los acordeones de una columna del resto del sitio. */
.tbb-faq-dos .tbb-faq{display:grid;grid-template-columns:minmax(0,1fr);
gap:0 clamp(24px,3vw,48px);}
@media (min-width:64em){
/* La cabecera pasa de 93 a 150 px: el cartel baja con ella. */
.tbb-faq-cartel{top:174px;}
.tbb-faq-dos .tbb-faq{grid-template-columns:repeat(2,minmax(0,1fr));}
}
/* --- 404: banda de la marca y el numero, al modo de la referencia --- */
.tbb-404{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,4vw,44px);
align-items:center;text-align:center;justify-items:center;}
.tbb-404__marca{display:flex;flex-direction:column;align-items:center;gap:12px;}
.tbb-404__num{font-family:var(--font-serif);font-weight:600;line-height:0.85;
font-size:clamp(4.5rem,11vw,8rem);color:var(--accent-strong);margin:0;
letter-spacing:-0.02em;}
/* El boton, centrado en movil. Lo pidio ella el 22-sep-2026.
El bloque de arriba ya centra el texto en movil (`text-align:center` y
`justify-items:center`), pero el boton no se enteraba: su envoltorio es un
flex a todo el ancho sin `justify-content`, asi que se quedaba pegado a la
izquierda debajo de un titular centrado. Se centra aqui y no en el estilo en
linea del envoltorio porque un estilo en linea no lo puede pisar una media
query. */
.tbb-404__acciones{justify-content:center;}
@media (min-width:48em){
.tbb-404{grid-template-columns:auto minmax(0,1fr);text-align:left;
justify-items:start;gap:clamp(32px,5vw,64px);}
.tbb-404__marca{flex-direction:row;align-items:center;gap:20px;}
/* De 48em para arriba la banda pasa a alinearse a la izquierda, y el boton
tiene que acompanarla. */
.tbb-404__acciones{justify-content:flex-start;}
}
/* --- Barra legal del pie -------------------------------------------------------
La pinta el plugin textos-legales-f10-pro en la tienda. Estas reglas son las
suyas (assets/css/front.css), copiadas para que en la fachada estatica se vea
EXACTAMENTE igual. Si se tocan alli, hay que tocarlas aqui.
Unica diferencia: la familia tipografica, que aqui es la de la marca en vez de
la pila del sistema, porque el resto del sitio ya la usa. */
/* El plugin la pinta en #1a1a1a y las columnas van en #141414: ese salto de
tono se lee como una linea dividiendo el pie. Se igualan los dos. */
.tlf-footer-legal{width:100%;background-color:#141414;padding:12px 0;
font-family:var(--font-sans);font-size:14px;line-height:1.45;}
/* `wrap-reverse` y no `wrap`: en movil el copyright va DEBAJO de los enlaces
legales (2-sep, pedido). El orden del DOM lo manda el plugin de flota,
copyright primero, y no se toca: se invierte solo la presentacion.
Con `wrap-reverse` las lineas se apilan al reves, asi que el copyright, que es
el primer elemento, cae en la linea de abajo. Y cuando todo entra en UNA linea
no cambia nada: el eje principal no se altera, solo el apilado en el eje
cruzado. Medido en linea: a 1240 y 820 el copyright sigue a la izquierda con
`cop_left` identico, y a 560 y 375 pasa a la linea inferior.
Por eso no lleva media query. La alternativa era un `order` bajo un corte, y el
corte habria sido fragil: la barra envuelve cuando el copyright (183px, con
`white-space:nowrap`) mas los enlaces (440px) no caben, o sea a partir de unos
688px de ventana, y ese numero se mueve solo con que cambie el nombre de la
marca, que ademas es provisional.
En la tienda esto se resuelve distinto, con `column-reverse` en el tema hijo,
porque alli el plugin pone el contenedor en `column` por debajo de 768. */
.tlf-footer-legal__contenedor{max-width:1200px;margin:0 auto;padding:0 20px;
display:flex;align-items:center;justify-content:space-between;
flex-wrap:wrap-reverse;gap:10px;}
.tlf-footer-legal__copyright{color:#cccccc;white-space:nowrap;}
.tlf-footer-legal__enlaces{display:flex;align-items:center;flex-wrap:wrap;gap:0;}
.tlf-footer-legal__enlaces a{color:#ffffff;text-decoration:none;padding:2px 8px;
transition:color 0.2s ease;}
/* Hover del pie: el plugin lo trae en #0073aa, el azul de WordPress, que esta
fuera de la paleta. Se cambia por el amarillo de la marca. */
.tlf-footer-legal__enlaces a:hover{color:#FFE070;text-decoration:underline;}
.tlf-footer-legal__separador{color:#888888;padding:0 2px;user-select:none;}
/* Hover de los enlaces de las tres columnas del pie: mismo amarillo. Van con
estilo en linea, asi que el hover tiene que venir de aqui. */
.tbb-footer-inner a:hover{color:#FFE070 !important;}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;}}