/*
 * Components de recursos: targetes, llistats, filtres i fitxa.
 * Depèn dels tokens del tema (tokens.css). Cap color literal fora dels tokens.
 */

/* ═══ Contenidor ═══ */
.tll-container {
	max-width: var(--tll-ample, 1240px);
	margin-inline: auto;
	padding: var(--tll-esp-l) var(--tll-esp-m) var(--tll-esp-xxl);
}

/* ═══ Capçalera d'arxiu ═══ */
.tll-archive-hero {
	position: relative;
	background: var(--tll-verd-clar);
	border-bottom: 1px solid var(--tll-linia);
	padding: clamp(2.5rem, 7vh, 4.5rem) 0 clamp(2rem, 5vh, 3rem);
	margin-bottom: var(--tll-esp-l);
	overflow: hidden;
}
/* Els punts de la marca, molt subtils, com a textura de fons */
.tll-archive-hero::before {
	content: '';
	position: absolute;
	top: 0; right: 0;
	width: 42%; height: 100%;
	background-image:
		radial-gradient(circle, var(--tll-verd) 1.6px, transparent 1.8px),
		radial-gradient(circle, var(--tll-marro) 1.1px, transparent 1.3px);
	background-size: 38px 38px, 54px 54px;
	background-position: 0 0, 19px 19px;
	opacity: .13;
	pointer-events: none;
}
.tll-archive-hero .tll-container { position: relative; }
.tll-archive-hero .tll-container { padding-block: 0; }
.tll-archive-hero h1 {
	font-size: var(--tll-t-xxl);
	line-height: var(--tll-int-titol);
	letter-spacing: -.015em;
	color: var(--tll-titol);
	margin: 0 0 .4rem;
	text-wrap: balance;
}
.tll-archive-hero p { color: var(--tll-text-suau); max-width: var(--tll-ample-text); margin: 0; }

.tll-count {
	font-size: var(--tll-t-s);
	color: var(--tll-text-suau);
	font-weight: 500;
}
.tll-count strong { color: var(--tll-negre); font-weight: 700; }

/* ═══ Filtres ═══ */
.tll-filtres {
	background: var(--tll-fons);
	border: 1px solid var(--tll-linia);
	border-radius: var(--tll-radi);
	padding: var(--tll-esp-m);
	margin-bottom: var(--tll-esp-l);
	box-shadow: var(--tll-ombra-s);
}
.tll-filtres-fila {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--tll-esp-s) var(--tll-esp-m);
	align-items: end;
}
.tll-camp label {
	display: block;
	font-size: var(--tll-t-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--tll-text-suau);
	margin-bottom: .3rem;
}
.tll-camp select,
.tll-camp input[type="search"],
.tll-camp input[type="number"] {
	width: 100%;
	font-family: var(--tll-font-text);
	font-size: var(--tll-t-base);
	padding: .6em .8em;
	border: 1px solid var(--tll-linia);
	border-radius: var(--tll-radi-s);
	background: var(--tll-fons);
	color: var(--tll-text);
}
.tll-camp select:focus-visible,
.tll-camp input:focus-visible {
	outline: 2px solid var(--tll-verd-molt-fosc);
	outline-offset: 1px;
}

/*
 * El color del text d'exemple dels camps es fixa aquí perquè, si no, el tria
 * cada navegador i n'hi ha que el deixen per sota del mínim de contrast. Són
 * quatre camps: el cercador dels filtres, el del panell, el de la pàgina de
 * «no trobat» i el de resultats.
 *
 * L'opacity: 1 no sobra: el Firefox aplica una opacitat pròpia als textos
 * d'exemple que rebaixaria el contrast real per sota del que diu el color.
 */
.tll-camp input::placeholder,
.tll-formulari input::placeholder,
.tll-panell-cerca input::placeholder,
.tll-404-fila input::placeholder {
	color: var(--tll-text-suau);
	opacity: 1;
}

/*
 * El desplegable dels serveis.
 *
 * La fletxa pròpia del navegador es treu i es dibuixa amb un triangle propi,
 * que gira en obrir: el marcador de sèrie es veu diferent a cada navegador i
 * en alguns no es veu gens.
 */
.tll-filtres-plega {
	margin-top: var(--tll-esp-m);
	padding-top: var(--tll-esp-m);
	border-top: 1px dashed var(--tll-linia);
}
.tll-filtres-plega > summary {
	display: flex;
	align-items: center;
	gap: .5rem;
	cursor: pointer;
	font-size: var(--tll-t-s);
	font-weight: 500;
	color: var(--tll-text);
	padding-block: 6px;          /* per arribar als 24 px de dit */
	list-style: none;
}
.tll-filtres-plega > summary::-webkit-details-marker { display: none; }
.tll-filtres-plega > summary::before {
	content: '';
	width: 0; height: 0;
	border: 5px solid transparent;
	border-left-color: var(--tll-text-suau);
	transition: transform var(--tll-transicio);
}
.tll-filtres-plega[open] > summary::before { transform: rotate(90deg) translateX(2px); }
.tll-filtres-plega > summary:focus-visible { outline: 2px solid var(--tll-negre); outline-offset: 2px; }
/* Dins del desplegable la vora de dalt ja la posa el <details>. */
.tll-filtres-plega .tll-filtres-serveis { border-top: 0; padding-top: 0; }

.tll-filtres-serveis {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: var(--tll-esp-m);
	padding-top: var(--tll-esp-m);
	border-top: 1px dashed var(--tll-linia);
}
.tll-xip {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	font-size: var(--tll-t-s);
	padding: .4em .9em;
	border: 1px solid var(--tll-linia);
	border-radius: var(--tll-radi-ple);
	cursor: pointer;
	transition: all var(--tll-transicio);
	background: var(--tll-fons);
	user-select: none;
}
.tll-xip:hover { border-color: var(--tll-verd); color: var(--tll-verd-molt-fosc); }
.tll-xip input { position: absolute; opacity: 0; pointer-events: none; }
/*
 * Verd fosc i no el verd de marca: aquí hi ha text blanc a sobre, i blanc
 * sobre #80bc00 dona 2,30:1 quan el mínim és 4,5:1. Amb el verd fosc puja a
 * 5,63:1 i, de passada, casa amb els botons, que ja el fan servir.
 */
.tll-xip:has(input:checked) {
	background: var(--tll-verd-molt-fosc);
	border-color: var(--tll-verd-molt-fosc);
	color: #fff;
	font-weight: 500;
}
.tll-xip:has(input:focus-visible) { outline: 2px solid var(--tll-negre); outline-offset: 2px; }

.tll-filtres-accions {
	display: flex;
	gap: var(--tll-esp-s);
	align-items: center;
	margin-top: var(--tll-esp-m);
	flex-wrap: wrap;
}
.tll-filtres-actius { font-size: var(--tll-t-s); color: var(--tll-text-suau); }
/* Quan el filtre falla. Vermell fosc perquè arribi a 4,5:1 sobre blanc, i amb
   un símbol al davant perquè no depengui només del color. */
.tll-filtres-actius.tll-filtres-error { color: #9a2617; font-weight: 500; }
.tll-filtres-actius.tll-filtres-error::before { content: "⚠ "; }

/* ═══ Graella de targetes ═══ */
.tll-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: clamp(1.25rem, 2.2vw, 2.25rem);
}
.tll-grid[aria-busy="true"] { opacity: .45; transition: opacity var(--tll-transicio); }

/*
 * ═══ Color d'àmbit ═══
 *
 * Qualsevol element amb data-tipus agafa el color oficial del seu àmbit i el
 * deixa a --tll-card-color perquè el facin servir els seus fills. Ho fan servir
 * la targeta, la fitxa i la pàgina de poble: el color que veus al llistat és el
 * mateix que et rep a la fitxa, i així funciona com a pista de context i no com
 * a decoració.
 */
/*
 * El valor per defecte va dins de :where() a posta.
 *
 * Abans es declarava a .tll-card, que té la mateixa especificitat que
 * [data-tipus="…"] i està escrit més avall: guanyava sempre. Resultat: cap
 * targeta rebia mai el color del seu àmbit i totes sortien marrons, incloses
 * les franges de dalt que s'havien fet justament per orientar. :where() val
 * zero d'especificitat, així que qualsevol regla d'àmbit la supera.
 */
:where(.tll-card, .tll-badge, .tll-hero) {
	--tll-card-color: var(--tll-marro);
	--tll-card-color-fosc: var(--tll-marro);
}

/*
 * Cada àmbit porta dos colors: l'oficial del manual, per a franges i fons
 * grans, i la seva versió apta per a text, per a quan porta lletra a sobre o
 * ÉS lletra. Els dos junts perquè qui rep el color no hagi de saber de quin
 * àmbit es tracta per triar el que li convé.
 */
[data-tipus="allotjament"]      { --tll-card-color: var(--tll-c-allotjament);      --tll-card-color-fosc: var(--tll-c-allotjament-fosc); }
[data-tipus="restauracio"]      { --tll-card-color: var(--tll-c-restauracio);      --tll-card-color-fosc: var(--tll-c-restauracio-fosc); }
[data-tipus="productor-comerc"] { --tll-card-color: var(--tll-c-productor-comerc); --tll-card-color-fosc: var(--tll-c-productor-comerc-fosc); }
[data-tipus="ruta"]             { --tll-card-color: var(--tll-c-ruta);             --tll-card-color-fosc: var(--tll-c-ruta-fosc); }
[data-tipus="patrimoni"]        { --tll-card-color: var(--tll-c-patrimoni);        --tll-card-color-fosc: var(--tll-c-patrimoni-fosc); }
[data-tipus="natural"]          { --tll-card-color: var(--tll-c-natural);          --tll-card-color-fosc: var(--tll-c-natural-fosc); }
[data-tipus="identitat"]        { --tll-card-color: var(--tll-c-identitat);        --tll-card-color-fosc: var(--tll-c-identitat-tipus-fosc); }
[data-tipus="esdeveniment"]     { --tll-card-color: var(--tll-c-esdeveniment);     --tll-card-color-fosc: var(--tll-c-esdeveniment-fosc); }
[data-tipus="activitat"]        { --tll-card-color: var(--tll-c-activitat);        --tll-card-color-fosc: var(--tll-c-activitat-fosc); }
[data-tipus="pobles"]           { --tll-card-color: var(--tll-c-pobles);           --tll-card-color-fosc: var(--tll-c-pobles-fosc); }

.tll-card {
	position: relative;
	background: var(--tll-fons);
	border-radius: 2px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(29,29,27,.06);
	transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s cubic-bezier(.2,.7,.3,1);
	display: flex;
	flex-direction: column;
}
/* Franja d'àmbit: substitueix l'etiqueta que tapava una cantonada de la foto. */
.tll-card::before {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: var(--tll-card-color);
	z-index: 2;
}
.tll-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(29,29,27,.11); }
.tll-card:focus-within { outline: 3px solid var(--tll-verd-molt-fosc); outline-offset: 3px; }

.tll-card-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; }

.tll-card-media { position: relative; aspect-ratio: 7 / 5; background: var(--tll-marro-clar); overflow: hidden; }
.tll-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.2,.7,.3,1); }
.tll-card:hover .tll-card-media img { transform: scale(1.06); }
/* Vel inferior perquè el text de la targeta respiri de la foto */
.tll-card-media::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(29,29,27,.28) 0%, transparent 42%);
	opacity: 0; transition: opacity .45s ease;
}
.tll-card:hover .tll-card-media::after { opacity: 1; }
.tll-card-noimg {
	width: 100%; height: 100%;
	background:
		radial-gradient(circle, rgba(143,109,79,.18) 1.5px, transparent 1.6px) 0 0/24px 24px,
		var(--tll-marro-clar);
}

.tll-badge {
	position: absolute;
	top: var(--tll-esp-s);
	left: var(--tll-esp-s);
	background: var(--tll-negre);
	color: #fff;
	font-size: var(--tll-t-xs);
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: .3em .8em;
	border-radius: var(--tll-radi-ple);
	backdrop-filter: blur(4px);
	/*
	 * El fons va en la variant fosca de l'àmbit perquè a sobre hi ha text blanc.
	 * Amb el color oficial no hi arriba cap dels vuit: gastronomia es queda a
	 * 1,75:1 i patrimoni, el millor, a 4,10:1. Els colors oficials es reserven
	 * per a franges i fons sense text.
	 */
	background: var(--tll-card-color-fosc, var(--tll-negre));
}

.tll-card-body {
	padding: var(--tll-esp-m);
	display: flex;
	flex-direction: column;
	gap: .5rem;
	flex: 1;
}
.tll-card-body h2 {
	font-size: var(--tll-t-m);
	margin: 0;
	line-height: 1.14;
	letter-spacing: 0;
	/* En tinta, no en marró: en una graella de dotze targetes, dotze titulars
	   de color competirien amb el títol de la pàgina. */
	color: var(--tll-titol-petit);
	background-image: linear-gradient(var(--tll-verd), var(--tll-verd));
	background-size: 0% 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size .45s cubic-bezier(.2,.7,.3,1);
	display: inline;
}
.tll-card:hover .tll-card-body h2 { background-size: 100% 2px; }

/* Línia de dalt: tipus (amb el color de l'àmbit) i municipi. */
.tll-card-dalt {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .3rem .5rem;
	margin: 0;
	font-family: var(--tll-font-text);
	font-size: var(--tll-t-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .09em;
	line-height: 1.3;
}
/*
 * El tipus de recurs va en tinta, no en el color del seu àmbit.
 *
 * S'escriu a 12,8 px i en majúscules, i a aquesta mida la norma demana 4,5:1.
 * Cap dels vuit colors oficials hi arriba: el més fluix, gastronomia, es queda
 * a 1,75:1 —groc sobre blanc—, i el millor, patrimoni, a 4,10:1. El color de
 * l'àmbit no es perd de la targeta: el porta la franja de 3 px de dalt, que és
 * fons pla i no ha de complir cap mínim.
 */
.tll-card-tipus { color: var(--tll-titol-petit); }
.tll-card-municipi { color: var(--tll-text-suau); margin: 0; }
/*
 * Sense separador entre tipus i municipi: en una targeta estreta els dos
 * salten de línia i el punt es quedava orfe al començament de la segona.
 * Els distingeixen el color i la separació, que és prou.
 */
.tll-card-dalt { gap: .25rem 1.1rem; }

.tll-card-excerpt { font-size: var(--tll-t-s); color: var(--tll-text-suau); margin: 0; }

.tll-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem .9rem;
	margin-top: auto;
	padding-top: var(--tll-esp-s);
	border-top: 1px solid var(--tll-linia);
	font-size: var(--tll-t-xs);
	color: var(--tll-text-suau);
	font-weight: 500;
}
.tll-card-meta span { display: inline-flex; align-items: center; gap: .3em; }
.tll-card-meta .lluc-icona { width: 1.05em; height: 1.05em; color: var(--tll-marro); }

/* ═══ Sense resultats ═══ */
.tll-buit {
	text-align: center;
	padding: var(--tll-esp-xl) var(--tll-esp-m);
	background: var(--tll-fons-suau);
	border-radius: var(--tll-radi);
	grid-column: 1 / -1;
}
.tll-buit h2 { margin-top: 0; }

/* ═══ Fitxa ═══ */
.tll-fitxa-hero {
	position: relative;
	min-height: clamp(340px, 58vh, 640px);
	display: flex;
	align-items: flex-end;
	background: var(--tll-negre);
	overflow: hidden;
}
/*
 * Quan la fitxa no té foto. Abans la capçalera era un rectangle negre de
 * 340 a 640 px d'alt amb el títol a sota, que llegia com un error de càrrega.
 * Ara és el color de l'àmbit —el mateix que porta la targeta d'on ve el
 * visitant— amb la textura de punts de marca, i més baixa: sense foto no hi ha
 * res a ensenyar i no cal fer esperar el text.
 */
.tll-fitxa-hero:not(:has(img)) {
	min-height: clamp(220px, 32vh, 340px);
	background-color: var(--tll-card-color-fosc, var(--tll-negre));
	background-image: radial-gradient(rgba(255, 255, 255, .14) 1.2px, transparent 1.4px);
	background-size: 14px 14px;
}
.tll-fitxa-hero:not(:has(img))::after { display: none; }
.tll-fitxa-hero img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}
.tll-fitxa-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(16,17,12,.9) 0%, rgba(16,17,12,.42) 40%, rgba(16,17,12,.05) 72%),
		linear-gradient(to right, rgba(16,17,12,.42) 0%, transparent 60%);
}
.tll-fitxa-hero-text {
	position: relative;
	z-index: 1;
	color: #fff;
	max-width: var(--tll-ample);
	margin-inline: auto;
	width: 100%;
	padding: var(--tll-esp-l) var(--tll-esp-m);
}
.tll-fitxa-hero-text h1 {
	color: #fff;
	font-size: var(--tll-t-xxl);
	line-height: var(--tll-int-titol);
	letter-spacing: -.015em;
	margin: .5rem 0 .3rem;
	max-width: 22ch;
	text-wrap: balance;
	text-shadow: 0 2px 36px rgba(0,0,0,.3);
}
.tll-fitxa-hero .tll-badge { position: static; display: inline-block; }
.tll-fitxa-municipi {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	font-size: var(--tll-t-s);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #fff;
	opacity: .95;
}
.tll-fitxa-municipi a { color: #fff; }

.tll-single-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
	gap: var(--tll-esp-xl);
	align-items: start;
}
@media (max-width: 900px) {
	.tll-single-layout { grid-template-columns: 1fr; gap: var(--tll-esp-l); }
}

/*
 * El cos de la fitxa, a mida de text i no de subtítol.
 *
 * Anava tot a --tll-t-m, que és la mida dels subtítols i puja fins a 22 px:
 * llegir-hi tres paràgrafs seguits cansa i, al mòbil, una fitxa mitjana
 * s'estirava un parell de pantalles de més. El primer paràgraf sí que es
 * queda gran, que és el que fa d'entrada.
 */
.tll-single-content { max-width: var(--tll-ample-text); font-size: var(--tll-t-base); }
.tll-single-content > p:first-of-type { font-size: var(--tll-t-m); color: var(--tll-text); }

/* Dades pràctiques */
.tll-dades { margin-top: var(--tll-esp-l); }
/*
 * Títol de secció dins d'una fitxa o d'una pàgina de poble. Feia servir una
 * escala pròpia i estava definit dues vegades amb valors diferents; ara surt
 * del sistema, com la resta.
 *
 * «Més coses a…» hi entra el 4-set: era l'únic títol de secció de la columna
 * principal amb una mida pròpia, i dins d'una mateixa fitxa se'n veien tres de
 * diferents. Els de la barra lateral («Contacte», «Ubicació») sí que van
 * petits i amb l'altra lletra, i és a posta: allà són etiquetes d'un bloc de
 * dades, no capçaleres d'una secció.
 *
 * El «>» de «.tll-relacionats > h2» és necessari: dins d'aquesta secció hi ha
 * targetes, i el títol de cada targeta també és un h2. Amb el selector de
 * descendent —el mateix pes que «.tll-card-body h2» però escrit més avall—
 * guanyava aquest i els títols de les targetes sortien a 35 px.
 */
.tll-dades h2, .tll-galeria h2, .tll-serveis h2, .tll-relacionats > h2,
.tll-municipi-mapa-secc h2, .tll-seccio-titol {
	font-size: var(--tll-t-l);
	line-height: var(--tll-int-titol-petit);
	color: var(--tll-titol-petit);
	margin: 0 0 var(--tll-esp-m);
	padding-bottom: .45rem;
	/*
	 * El subratllat va amb el color de l'àmbit de la fitxa, no en verd: el
	 * verd assenyala allò que es pot clicar i un títol no ho és. A més,
	 * repeteix el color amb què s'ha arribat des del llistat.
	 */
	border-bottom: 2px solid var(--tll-card-color, var(--tll-marro));
	display: inline-block;
}
.tll-dades dl {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: var(--tll-esp-s);
	margin: 0;
}
.tll-dada {
	background: var(--tll-fons-suau);
	border: 1px solid var(--tll-linia);
	border-radius: var(--tll-radi);
	padding: var(--tll-esp-m);
	transition: border-color .3s ease, transform .3s ease;
}
.tll-dada:hover { border-color: var(--tll-verd); transform: translateY(-2px); }
.tll-dada dt {
	display: flex;
	align-items: center;
	gap: .4em;
	font-size: var(--tll-t-xs);
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--tll-text-suau);
	font-weight: 500;
	margin-bottom: .2rem;
}
.tll-dada dt .lluc-icona { color: var(--tll-marro); }
.tll-dada dd {
	margin: 0;
	font-family: var(--tll-font-titol);
	font-weight: 400;
	font-size: clamp(1.15rem, 1.8vw, 1.45rem);
	line-height: 1.15;
	color: var(--tll-negre);
}

/* Serveis */
.tll-serveis { margin-top: var(--tll-esp-l); }
.tll-serveis-llista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: var(--tll-esp-s);
	list-style: none;
	margin: 0;
	padding: 0;
}
.tll-serveis-llista li {
	display: flex;
	align-items: center;
	gap: .5em;
	font-size: var(--tll-t-s);
	color: var(--tll-text);
}
.tll-serveis-llista .lluc-icona { width: 1.6em; height: 1.6em; color: var(--tll-verd-molt-fosc); }

/* Descàrregues */
.tll-descarregues {
	margin-top: var(--tll-esp-l);
	display: flex;
	gap: var(--tll-esp-s);
	flex-wrap: wrap;
}

/* Galeria */
.tll-galeria { margin-top: var(--tll-esp-l); }
/*
 * Dues columnes també al mòbil, i proporció en comptes d'alçada fixa.
 *
 * Amb 160 px de mínim, en una pantalla de 375 no hi cabien dues columnes i la
 * graella queia a una: cada foto sortia com una tira de 327×130, un format que
 * no és el de cap fotografia i que decapitava campanars i gent. Amb 140 px de
 * mínim hi caben les dues, i amb la proporció 4:3 la foto es retalla com una
 * foto i no com una franja.
 */
.tll-galeria-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));
	gap: .5rem;
}
.tll-galeria-grid a { display: block; border-radius: var(--tll-radi-s); overflow: hidden; }
.tll-galeria-grid img {
	width: 100%;
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover; display: block;
	transition: transform var(--tll-transicio);
}
.tll-galeria-grid a:hover img { transform: scale(1.06); }

/* Barra lateral */
.tll-sidebar { position: sticky; top: 100px; display: flex; flex-direction: column; gap: var(--tll-esp-m); }
@media (max-width: 900px) { .tll-sidebar { position: static; } }

.tll-panell {
	background: var(--tll-fons);
	border: 1px solid var(--tll-linia);
	border-radius: var(--tll-radi);
	padding: var(--tll-esp-m);
	box-shadow: var(--tll-ombra-s);
}
.tll-panell h2 {
	font-size: var(--tll-t-base);
	font-family: var(--tll-font-text);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--tll-text-suau);
	margin: 0 0 var(--tll-esp-s);
	border: 0;
	padding: 0;
}
.tll-contacte-item {
	display: flex;
	align-items: flex-start;
	gap: .6em;
	padding: .5rem 0;
	border-bottom: 1px solid var(--tll-linia);
	font-size: var(--tll-t-s);
}
.tll-contacte-item:last-child { border-bottom: 0; }
.tll-contacte-item .lluc-icona { color: var(--tll-marro); margin-top: .15em; }
/*
 * El telèfon, el correu i el web d'una fitxa fan 17 px d'alt i són,
 * literalment, el motiu pel qual algú obre la fitxa des del cotxe. La norma
 * d'accessibilitat demana 24 px per a qualsevol cosa que es toqui amb el dit.
 * Amb encoixinat vertical la zona que respon arriba als 24 sense que el text
 * canviï de mida ni la fitxa creixi de forma visible.
 */
.tll-contacte-item a {
	color: var(--tll-text);
	text-decoration: none;
	display: inline-block;
	padding-block: 4px;
}
.tll-contacte-item a:hover { color: var(--tll-verd-molt-fosc); text-decoration: underline; }
.tll-contacte-item small { color: var(--tll-text-suau); }

.tll-mapa { height: 240px; border-radius: var(--tll-radi-s); background: var(--tll-fons-suau); }

/* Relacionats */
.tll-relacionats { margin-top: var(--tll-esp-xxl); padding-top: var(--tll-esp-l); border-top: 1px solid var(--tll-linia); }
.tll-relacionats h2 { margin-bottom: var(--tll-esp-m); }

/* Paginació */
.tll-paginacio { margin-top: var(--tll-esp-l); display: flex; justify-content: center; }
/* El display:flex de sobre guanyava al [hidden] del navegador —una declaració
   d'autor sempre guanya a una del navegador— i la paginació que el JavaScript
   creia amagar continuava a la vista. */
.tll-paginacio[hidden] { display: none; }
.tll-paginacio .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 2.4em; height: 2.4em;
	padding: 0 .5em; margin: 0 .15em;
	border-radius: var(--tll-radi-s);
	text-decoration: none;
	font-size: var(--tll-t-s); font-weight: 500;
	color: var(--tll-text);
}
.tll-paginacio .page-numbers:hover { background: var(--tll-verd-clar); }
/* Text blanc a sobre: verd fosc (5,63:1) i no el verd de marca (2,30:1). */
.tll-paginacio .page-numbers.current { background: var(--tll-verd-molt-fosc); color: #fff; }

/* ═══ Pàgina de municipi ═══ */
.tll-municipi-nuclis {
	color: #fff;
	opacity: .9;
	font-size: var(--tll-t-m);
	margin: .2rem 0 0;
}
.tll-entradeta {
	font-size: var(--tll-t-l);
	font-family: var(--tll-font-titol);
	line-height: 1.3;
	color: var(--tll-marro);
	margin: 0 0 var(--tll-esp-m);
}
.tll-video { margin: var(--tll-esp-l) 0; }
.tll-video iframe { width: 100%; aspect-ratio: 16/9; height: auto; border-radius: var(--tll-radi); }

.tll-xifres { list-style: none; margin: 0; padding: 0; }
.tll-xifres li { border-bottom: 1px solid var(--tll-linia); }
.tll-xifres li:last-child { border-bottom: 0; }
.tll-xifres a {
	display: flex;
	align-items: baseline;
	gap: .6em;
	padding: .55rem 0;
	text-decoration: none;
	color: var(--tll-text);
}
.tll-xifres a:hover { color: var(--tll-verd-molt-fosc); }
.tll-xifres strong {
	font-family: var(--tll-font-titol);
	font-size: var(--tll-t-l);
	color: var(--tll-verd-molt-fosc);
	min-width: 1.6em;
	text-align: right;
}
.tll-xifres span { font-size: var(--tll-t-s); }

/* El títol el defineix la regla comuna de títols de secció; aquí, només el marge. */
.tll-municipi-mapa-secc { margin-top: var(--tll-esp-xl); }
.tll-municipi-mapa {
	height: clamp(320px, 45vh, 480px);
	border-radius: var(--tll-radi);
	overflow: hidden;
	border: 1px solid var(--tll-linia);
}

.tll-municipi-grup { margin-top: var(--tll-esp-xl); }
.tll-municipi-grup-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tll-esp-m);
	flex-wrap: wrap;
	margin-bottom: var(--tll-esp-m);
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--tll-linia);
}
.tll-municipi-grup-head h2 { margin: 0; font-size: var(--tll-t-l); }

/* ═══ Índex de pobles ═══ */
.tll-pobles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: var(--tll-esp-m);
}
.tll-poble {
	display: block;
	text-decoration: none;
	color: inherit;
	border-radius: var(--tll-radi);
	overflow: hidden;
	background: var(--tll-fons);
	box-shadow: var(--tll-ombra-s);
	transition: transform var(--tll-transicio), box-shadow var(--tll-transicio);
}
.tll-poble:hover { transform: translateY(-4px); box-shadow: var(--tll-ombra-l); }
.tll-poble-media { aspect-ratio: 4/3; overflow: hidden; background: var(--tll-marro-clar); }
.tll-poble-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.tll-poble:hover .tll-poble-media img { transform: scale(1.06); }
.tll-poble-text { padding: var(--tll-esp-s) var(--tll-esp-m) var(--tll-esp-m); }
.tll-poble-text h3 { margin: 0; font-size: var(--tll-t-m); }
.tll-poble-nuclis { margin: .15rem 0 0; font-size: var(--tll-t-xs); color: var(--tll-text-suau); }
.tll-poble-total {
	margin: .4rem 0 0;
	font-size: var(--tll-t-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .09em;
	/* El color de l'àmbit «Pobles i ruralitat», no el verd: el verd és el que
	   assenyala allò que es pot clicar, i aquí el que es clica és tota la peça.
	   En la versió fosca, perquè a 12,8 px l'oficial es queda a 4,03:1. */
	color: var(--tll-c-pobles-fosc);
}
.tll-nota { font-size: var(--tll-t-s); color: var(--tll-text-suau); margin: 0; }

/* ═══ Cercador ═══ */
.tll-lupa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px; height: 42px;
	border: 0;
	background: transparent;
	color: var(--tll-negre);
	cursor: pointer;
	border-radius: 50%;
	transition: background var(--tll-transicio);
}
.tll-lupa:hover { background: var(--tll-verd-clar); color: var(--tll-verd-molt-fosc); }
.tll-lupa .lluc-icona { width: 22px; height: 22px; }

.tll-panell-cerca {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(29, 29, 27, .55);
	backdrop-filter: blur(3px);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 12vh var(--tll-esp-m) var(--tll-esp-m);
}
.tll-panell-cerca[hidden] { display: none; }
.tll-panell-cerca-caixa {
	background: var(--tll-fons);
	border-radius: var(--tll-radi-l);
	padding: var(--tll-esp-l);
	width: min(640px, 100%);
	box-shadow: var(--tll-ombra-l);
}
.tll-panell-cerca h2 { margin: 0 0 var(--tll-esp-m); font-size: var(--tll-t-l); }
.tll-panell-cerca form { display: flex; gap: .6rem; }
.tll-panell-cerca input[type="search"] {
	flex: 1;
	font-family: var(--tll-font-text);
	font-size: var(--tll-t-m);
	padding: .7em 1em;
	border: 1px solid var(--tll-linia);
	border-radius: var(--tll-radi-s);
}
.tll-panell-cerca input[type="search"]:focus-visible { outline: 2px solid var(--tll-verd-molt-fosc); outline-offset: 1px; }
.tll-panell-cerca-tanca {
	background: none; border: 0; cursor: pointer;
	color: var(--tll-text-suau); font-size: var(--tll-t-s);
	margin-top: var(--tll-esp-s);
}
.tll-panell-cerca-tanca:hover { color: var(--tll-negre); }

/* Als resultats de cerca el títol necessita més aire per sobre. */
.tll-resultats .tll-seccio-titol { margin-top: var(--tll-esp-l); }
.tll-resultats-altres ul { list-style: none; padding: 0; margin: 0; }
.tll-resultats-altres li {
	padding: .7rem 0;
	border-bottom: 1px solid var(--tll-linia);
	display: flex; align-items: center; gap: .6rem;
}
.tll-etiqueta-tipus {
	font-size: var(--tll-t-xs);
	text-transform: uppercase;
	letter-spacing: .05em;
	background: var(--tll-marro-clar);
	color: var(--tll-marro);
	padding: .15em .6em;
	border-radius: var(--tll-radi-ple);
}
.tll-suggeriments { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin-top: var(--tll-esp-m); }

/*
 * Sense cursives, i no és un descuit.
 *
 * La tipografia de marca és la Rubik i la Rubik no en porta: el navegador se
 * la inventava inclinant les lletres rectes. Es nota, sobretot en els títols
 * grans, i el manual d'identitat no la contempla enlloc. El que anava en
 * cursiva —els nuclis d'un municipi, les notes al peu, el text mentre carrega
 * el temps— ja es distingeix per la mida i pel color gris.
 */

/* ═══ Biblioteca de fullets ═══ */
.tll-fullets-nav {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: var(--tll-esp-l);
}
.tll-fullets-nav .tll-xip { text-decoration: none; color: var(--tll-text); }
/* Igual que els xips de filtre: text blanc, per tant verd fosc. */
.tll-xip--actiu {
	background: var(--tll-verd-molt-fosc);
	border-color: var(--tll-verd-molt-fosc);
	color: #fff !important;
	font-weight: 500;
}

/*
 * La graella es reparteix sola i només obeeix el panell a l'ordinador.
 *
 * El nombre de columnes que es tria a l'Elementor s'aplicava a TOTES les
 * mides: amb 4 columnes, al mòbil sortien quatre targetes de 61 px i els
 * títols es partien lletra a lletra. El panell ara escriu una variable, i la
 * variable només es llegeix a partir de 1.025 px; per sota, la graella hi posa
 * les columnes que hi caben i cap no baixa de 240 px.
 */
.tll-fullets-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
	gap: var(--tll-esp-m);
}
@media (min-width: 1025px) {
	.tll-fullets-grid {
		grid-template-columns: repeat(var(--tll-fullets-columnes, 4), minmax(0, 1fr));
	}
}

.tll-fullet {
	display: flex;
	flex-direction: column;
	background: var(--tll-fons);
	border: 1px solid var(--tll-linia);
	border-radius: var(--tll-radi);
	overflow: hidden;
	transition: transform var(--tll-transicio), box-shadow var(--tll-transicio);
}
.tll-fullet:hover { transform: translateY(-3px); box-shadow: var(--tll-ombra); }

.tll-fullet-portada {
	position: relative;
	aspect-ratio: 3 / 4;
	background: var(--tll-marro-clar);
	overflow: hidden;
}
.tll-fullet-portada img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.tll-fullet-sense-portada {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	font-family: var(--tll-font-titol);
	font-size: 2rem;
	color: var(--tll-marro);
	opacity: .5;
	letter-spacing: .1em;
}
.tll-fullet-any {
	position: absolute;
	top: var(--tll-esp-s);
	right: var(--tll-esp-s);
	background: var(--tll-negre);
	color: #fff;
	font-size: var(--tll-t-xs);
	font-weight: 500;
	padding: .2em .7em;
	border-radius: var(--tll-radi-ple);
}

.tll-fullet-cos {
	padding: var(--tll-esp-m);
	display: flex;
	flex-direction: column;
	gap: .5rem;
	flex: 1;
}
/* El títol és un <h2> al marcat (fullets.php) i aquí es demanava un <h3>: la
   regla no s'aplicava mai i el títol agafava la mida d'h2 del tema —fins a
   51 px dins d'una targeta de 240 px—. Hi són els dos perquè no torni a
   passar si algun dia canvia el nivell del titular. */
.tll-fullet-cos h2,
.tll-fullet-cos h3 { margin: 0; font-size: var(--tll-t-m); line-height: 1.25; }
.tll-fullet-descripcio { margin: 0; font-size: var(--tll-t-s); color: var(--tll-text-suau); }
.tll-fullet-meta {
	margin: 0;
	display: flex;
	gap: .8rem;
	font-size: var(--tll-t-xs);
	color: var(--tll-text-suau);
	text-transform: uppercase;
	letter-spacing: .04em;
}
.tll-fullet-cos .lluc-boto { margin-top: auto; align-self: flex-start; font-size: var(--tll-t-xs); }

/* ── Mapa de la comarca ───────────────────────────────────────────────────
   El dibuix ja porta els seus colors com a variables del tema, així que aquí
   només cal col·locar-lo i donar-li el peu. */
/* La figura ocupa tot l'ample i centra el seu contingut. Es fa així i no amb
   «margin: 0 auto» perquè el maquetador fixa el marge a zero i el mapa quedava
   enganxat a l'esquerra. */
.tll-mapa-comarca {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.tll-mapa-comarca svg { display: block; width: 100%; max-width: 560px; height: auto; }
.tll-mapa-comarca .g { cursor: pointer; }
.tll-mapa-peu {
	margin-top: var(--tll-esp-s);
	text-align: center;
	font-size: var(--tll-t-s);
	color: var(--tll-text-suau);
}
/* L'avís dels dos dits: només surt al mòbil, i el posa el JavaScript. */
.tll-mapa-avis {
	margin: .5rem 0 0;
	font-size: var(--tll-t-xs);
	color: var(--tll-text-suau);
	text-align: center;
}
.tll-mapa-credit { display: block; margin-top: .25rem; font-size: var(--tll-t-xs); opacity: .8; }
.tll-mapa-credit a { color: inherit; }

/* La icona de l'àmbit, a sobre del títol de la pàgina. */
.tll-icona-ambit img { width: 72px; height: auto; }

/*
 * La capçalera de les pàgines d'àmbit.
 *
 * El color acompanya: la targeta verda porta a un llistat amb la franja verda.
 * La classe la posa `wp llucanes estructura` a la secció de capçalera (Avançat
 * → Classes CSS, així l'editora la veu i la pot treure). El fons és un tint
 * del 10 % del color de l'àmbit, i el títol és la variant fosca del mateix
 * color barrejada al 50 % amb el verd molt fosc del text: la variant fosca sola
 * (la dels distintius, pensada per portar text blanc a sobre) no arriba a
 * 4,5:1 sobre el tint al patrimoni. Amb la barreja, el pitjor cas queda per
 * sobre de 4,6:1 a tots els àmbits (calculat sobre tokens.css; al 12 % es
 * quedava just a 4,5 al natural). Les pàgines sense àmbit no porten cap
 * «tll-ambit-*» i es queden com estaven.
 */
.tll-ambit-gastronomia { --tll-ambit: var(--tll-c-gastronomia); --tll-ambit-fosc: var(--tll-c-gastronomia-fosc); }
.tll-ambit-natural { --tll-ambit: var(--tll-c-natural); --tll-ambit-fosc: var(--tll-c-natural-fosc); }
.tll-ambit-patrimoni { --tll-ambit: var(--tll-c-patrimoni); --tll-ambit-fosc: var(--tll-c-patrimoni-fosc); }
.tll-ambit-pobles { --tll-ambit: var(--tll-c-pobles); --tll-ambit-fosc: var(--tll-c-pobles-fosc); }
.tll-ambit-actiu { --tll-ambit: var(--tll-c-actiu); --tll-ambit-fosc: var(--tll-c-actiu-fosc); }
.tll-ambit-fires { --tll-ambit: var(--tll-c-fires); --tll-ambit-fosc: var(--tll-c-fires-fosc); }
.tll-ambit-identitat { --tll-ambit: var(--tll-c-identitat); --tll-ambit-fosc: var(--tll-c-identitat-fosc); }
.tll-ambit-esdeveniments { --tll-ambit: var(--tll-c-esdeveniments); --tll-ambit-fosc: var(--tll-c-esdeveniments-fosc); }
.tll-ambit-allotjament { --tll-ambit: var(--tll-c-allotjament); --tll-ambit-fosc: var(--tll-c-allotjament-fosc); }
.elementor-section.tll-capcalera-pagina[class*="tll-ambit-"] {
	background: color-mix(in srgb, var(--tll-ambit) 10%, #fff);
	border-top: 8px solid var(--tll-ambit);
	border-radius: 0 0 var(--tll-radi, 12px) var(--tll-radi, 12px);
}
/* El «.elementor» del davant no és decoració: el tema posa
   «.elementor .elementor-widget-heading .elementor-heading-title { color: … }»
   en un estil que es carrega DESPRÉS d'aquest full. Amb el mateix pes i
   anant després, guanyava ell i aquesta regla no s'aplicava mai. */
.elementor .tll-capcalera-pagina[class*="tll-ambit-"] .elementor-heading-title,
.tll-capcalera-pagina[class*="tll-ambit-"] .elementor-heading-title {
	/*
	 * S'enfosqueix el color de l'àmbit amb NEGRE, no barrejant-lo amb el verd.
	 *
	 * Amb el verd, els vuit àmbits acabaven tots al mateix racó del cercle
	 * cromàtic i els títols sortien oliva o mostassa: el color deixava de dir
	 * de quin àmbit era la pàgina, que és l'única cosa per la qual hi és.
	 * Enfosquint amb negre el to es manté i el contrast fins i tot puja: el
	 * pitjor cas passa de 4,60:1 (patrimoni) a 5,47:1, calculat sobre el tint
	 * del 10 % que fa de fons i sobre els colors de tokens.css.
	 */
	color: color-mix(in srgb, var(--tll-ambit-fosc) 78%, var(--tll-negre));
}
@supports not (background: color-mix(in srgb, red 10%, #fff)) {
	.elementor-section.tll-capcalera-pagina[class*="tll-ambit-"] { background: transparent; }
}

@media (max-width: 640px) { .tll-icona-ambit img { width: 56px; } }

/* ── El recorregut d'una ruta ─────────────────────────────────────────────── */
.tll-ruta { margin: var(--tll-esp-l) 0; }
.tll-ruta-mapa {
	height: 380px;
	border-radius: var(--tll-radi);
	overflow: hidden;
	background: var(--tll-verd-clar);
}
.tll-ruta-perfil { margin-top: .75rem; cursor: crosshair; }
.tll-ruta-perfil svg { display: block; width: 100%; height: 150px; }
.tll-perfil-llegenda {
	display: flex;
	justify-content: space-between;
	margin: .25rem 0 0;
	font-size: var(--tll-t-xs);
	color: var(--tll-text-suau);
}
@media (max-width: 640px) {
	.tll-ruta-mapa { height: 260px; }
	.tll-ruta-perfil svg { height: 110px; }
}

/* ── Seccions d'una pàgina índex ──────────────────────────────────────────── */
.tll-subpagines {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--tll-esp-m);
	margin: var(--tll-esp-m) 0;
}
.tll-subpagina {
	display: block;
	padding: 1.4rem 1.5rem;
	background: var(--tll-fons-suau);
	border: 1px solid var(--tll-linia);
	border-radius: var(--tll-radi);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--tll-transicio), transform var(--tll-transicio);
}
.tll-subpagina:hover,
.tll-subpagina:focus-visible {
	border-color: var(--tll-verd);
	transform: translateY(-2px);
}
.tll-subpagina h2 {
	margin: 0 0 .4rem;
	font-size: var(--tll-t-m);
	color: var(--tll-titol);
}
.tll-subpagina p { margin: 0; font-size: var(--tll-t-s); line-height: 1.6; color: var(--tll-text-suau); }
@media (max-width: 780px) { .tll-subpagines { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tll-subpagines { grid-template-columns: 1fr; } }

/* ── Formulari de contacte ────────────────────────────────────────────────── */
.tll-contacte { max-width: 44rem; margin: var(--tll-esp-m) 0; }
.tll-formulari .tll-camp { margin-bottom: 1.1rem; }
.tll-formulari label { display: block; margin-bottom: .35rem; font-weight: 500; font-size: var(--tll-t-s); }
.tll-formulari input[type="text"],
.tll-formulari input[type="email"],
.tll-formulari textarea {
	width: 100%;
	padding: .7em .9em;
	border: 1px solid var(--tll-linia);
	border-radius: var(--tll-radi-s, 4px);
	font: inherit;
	background: #fff;
}
.tll-formulari input:focus-visible,
.tll-formulari textarea:focus-visible {
	outline: 2px solid var(--tll-verd-molt-fosc);
	outline-offset: 1px;
	border-color: var(--tll-verd-molt-fosc);
}
.tll-camp--consentiment label { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; }
.tll-camp--consentiment input { margin-top: .25rem; flex: 0 0 auto; }
.tll-formulari-nota { font-size: var(--tll-t-s); color: var(--tll-text-suau); margin: 0 0 1.2rem; }

/* El parany per a robots: fora de la vista però no «display:none», que alguns
   programes ja detecten, i sense que cap lector de pantalla hi caigui. */
.tll-parany { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.tll-avis { padding: .9rem 1.1rem; border-radius: var(--tll-radi-s, 4px); margin-bottom: 1.2rem; }
.tll-avis--be { background: var(--tll-verd-clar); border-left: 4px solid var(--tll-verd-molt-fosc); }
.tll-avis--malament { background: #fdf0ee; border-left: 4px solid #b3261e; }

/* ── Vídeos de tercers, fins que no es demanen ────────────────────────────── */
.tll-incrustat {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--tll-verd-clar, #f2f8e6);
	border-radius: var(--tll-radi);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .75rem;
	padding: 1.5rem;
	text-align: center;
}
/* El cartell d'un mapa incrustat: format de mapa, no de vídeo, i l'iframe
   que el substitueix ocupa el mateix lloc. */
.tll-incrustat--mapa { aspect-ratio: 4 / 3; max-height: 480px; }
.tll-incrustat--mapa iframe { width: 100%; height: 100%; border: 0; }
.tll-incrustat iframe { width: 100%; height: 100%; border: 0; }
.tll-incrustat-boto {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	background: var(--tll-verd-molt-fosc);
	color: #fff;
	border: 0;
	border-radius: var(--tll-radi-ple, 999px);
	padding: .8em 1.6em;
	font: inherit;
	font-weight: 500;
	cursor: pointer;
	transition: background var(--tll-transicio);
}
.tll-incrustat-boto:hover { background: var(--tll-verd-bosc); }
.tll-incrustat-play {
	width: 0; height: 0;
	border-left: 12px solid currentColor;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
}
.tll-incrustat-nota {
	margin: 0;
	max-width: 42ch;
	font-size: var(--tll-t-s);
	color: var(--tll-text-suau);
}

/* La frase d'entrada d'una secció: el que a la web antiga era un <h4> mal usat. */
.tll-entrada {
	font-size: var(--tll-t-m);
	line-height: 1.6;
	color: var(--tll-titol);
	max-width: var(--tll-ample-text, 62ch);
}

/* ── Pàgina de «no trobat» ────────────────────────────────────────────────── */
.tll-404 { padding-block: var(--tll-esp-xl) var(--tll-esp-xl); }
.tll-404 > section { margin-top: var(--tll-esp-l); }
.tll-404-formulari label { display: block; margin-bottom: .5rem; font-weight: 500; }
.tll-404-fila { display: flex; gap: .75rem; flex-wrap: wrap; max-width: 34rem; }
.tll-404-fila input[type="search"] {
	flex: 1 1 16rem;
	padding: .7em .9em;
	border: 1px solid var(--tll-linia);
	border-radius: var(--tll-radi-s, 4px);
	font: inherit;
}

/* ── El bloc d'història de «Coneix el Lluçanès» ───────────────────────────
   La Marta demana al seu document «algun mòdul diferent» per a la pinzellada
   d'història. Es diferencia NOMÉS amb el fons: ha de llegir-se com una part del
   web, no com una peça encastada.

   Hi havia un filet marró de 46 px a dalt a l'esquerra, i estava escrit dues
   vegades —sobre la secció i sobre el contenidor de dins—, o sigui que se'n
   dibuixaven dos: un a la cantonada i l'altre a sobre de la primera lletra del
   títol. Fora els dos (7-set, decisió d'en Lorenzo). El fons ja fa la feina de
   distingir el bloc, i una ratlla petita a tocar d'un titular gran es llegeix
   com un error, no com una decoració. */
.tll-bloc-historia {
	background: var(--tll-marro-clar, #f7f3ee);
	border-radius: var(--tll-radi);
	padding: var(--tll-esp-l) var(--tll-esp-m);
}
.tll-bloc-historia h2 { margin-top: 0; }
.tll-bloc-historia h3 { margin-top: var(--tll-esp-m); color: var(--tll-marro-fosc); }

/* ── Les pàgines legals ───────────────────────────────────────────────────
   Avís legal i política de galetes: text llarg, seguit i d'obligada lectura.
   Amb la mida de titular de la resta del web, un titolet com «Quins tipus de
   cookies utilitza aquesta pàgina web?» ocupava tres ratlles i la pàgina
   semblava un cartell. Aquí els titolets van a mida de subtítol i el text
   entre titolets s'airieja, que és el que fa que un document així es pugui
   llegir de dalt a baix. */
.tll-pagina-legal h2 { font-size: var(--tll-t-m); margin-top: var(--tll-esp-l); }
.tll-pagina-legal h3 { font-size: var(--tll-t-base); font-weight: 500; margin-top: var(--tll-esp-m); }
.tll-pagina-legal :is(p, li) { font-size: var(--tll-t-base); }
.tll-pagina-legal li { margin-bottom: .5em; }

/* ═══ El visor de fotos ═══
   <dialog> natiu: el navegador posa el fons i gestiona el focus. */
.tll-visor {
	border: 0;
	padding: 0;
	max-width: min(96vw, 1400px);
	max-height: 96vh;
	background: transparent;
	color: #fff;
}
.tll-visor::backdrop { background: rgba(29, 29, 27, .92); }
.tll-visor-figura { margin: 0; display: grid; justify-items: center; gap: .6rem; }
.tll-visor img { max-width: 96vw; max-height: 84vh; object-fit: contain; border-radius: var(--tll-radi); }
.tll-visor figcaption { font-family: var(--tll-font-text); font-size: var(--tll-t-s); text-align: center; max-width: 60ch; }
.tll-visor-compte { margin: .2rem 0 0; text-align: center; font-size: var(--tll-t-xs); color: rgba(255, 255, 255, .75); }
.tll-visor-tanca,
.tll-visor-fletxa {
	position: fixed;
	z-index: 2;
	min-width: 48px; min-height: 48px;
	border: 0;
	border-radius: var(--tll-radi-ple);
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
}
.tll-visor-tanca { top: 16px; right: 16px; }
.tll-visor-fletxa { top: 50%; transform: translateY(-50%); }
.tll-visor-anterior { left: 16px; }
.tll-visor-seguent { right: 16px; }
.tll-visor-tanca:hover, .tll-visor-fletxa:hover { background: rgba(255, 255, 255, .28); }
.tll-visor-tanca:focus-visible, .tll-visor-fletxa:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* A la graella, que es vegi que les fotos són clicables. */
.tll-galeria-grid a { display: block; cursor: zoom-in; border-radius: var(--tll-radi); overflow: hidden; }
.tll-galeria-grid a:focus-visible { outline: 3px solid var(--tll-verd-molt-fosc); outline-offset: 2px; }