/* ==========================================================================
   Associació Catalana del Fetge — fetge.cat
   Ajustes de estilo que Elementor gratis no cubre con controles visuales.
   Editable en Apariencia > Personalizar > CSS adicional.
   ========================================================================== */

:root{
	--fetge-taronja:#EA5B0C;
	--fetge-taronja-fosc:#C44A05;
	/* El taronja de marca sobre blanc fa 3,50:1 i la WCAG AA en demana 4,5.
	   Aquest to és el mateix color una mica més fosc: 5,43 sobre blanc i
	   4,55 sobre el crema fosc. Només per a text petit sobre fons clar. */
	--fetge-enllac:#B54708;
	--fetge-taronja-clar:#FF9147;
	--fetge-crema:#F6F5F1;
	--fetge-crema-fosc:#EDEBE3;
	--fetge-fosc:#221A15;
	--fetge-negre:#1A1310;
	--fetge-suau:#5C4F47;
	/* El taronja de marca sobre blanc dona 3,54:1: val per a
	   text gran pero no per al petit. Aquesta variant fosca es
	   nomes per a TEXT; per a fons de boto i icones, el viu. */
	--fetge-taronja-text:#B5470A;
	--fetge-apagat:#9A8F87;
}

body{ background:var(--fetge-crema); }

/* --- Els enllaços dins del text ---------------------------------------
   El tema els pintava d'un magenta (#CC3366) que no és de la casa, i els
   ja visitats sortien morats: dins d'una targeta blanca cantava molt. Van
   del taronja de la marca, com a la maqueta.

   Les zones que ja tenen color propi (el peu, les capçaleres de color)
   guanyen igualment perquè els seus selectors són més concrets. */
.elementor-widget-text-editor a,
.elementor-widget-theme-post-content a,
.elementor-widget-shortcode .wpcf7 a,
.fetge-cos a{
	color:var(--fetge-enllac);
	text-decoration:underline;
	text-underline-offset:2px;
	text-decoration-thickness:1px;
	text-decoration-color:rgba(181,71,8,.45);
}
.elementor-widget-text-editor a:visited,
.elementor-widget-theme-post-content a:visited,
.elementor-widget-shortcode .wpcf7 a:visited,
.fetge-cos a:visited{ color:var(--fetge-enllac); }
.elementor-widget-text-editor a:hover,
.elementor-widget-theme-post-content a:hover,
.elementor-widget-shortcode .wpcf7 a:hover,
.fetge-cos a:hover{
	color:var(--fetge-taronja-fosc);
	text-decoration-color:currentColor;
}

/* --- Capçalera enganxada a dalt --- */
.fetge-capcalera{
	position:sticky; top:0; z-index:99;
	background:rgba(246,245,241,.92) !important;
	backdrop-filter:blur(12px);
	-webkit-backdrop-filter:blur(12px);
	border-bottom:1px solid rgba(34,26,21,.1);
}

/* El menú de ElementsKit, alineado con el resto */
.fetge-capcalera .elementskit-navbar-nav > li > a{
	color:var(--fetge-fosc) !important;
	font-weight:600; letter-spacing:.02em;
}
.fetge-capcalera .elementskit-navbar-nav > li > a:hover,
.fetge-capcalera .elementskit-navbar-nav > li.current-menu-item > a{
	color:var(--fetge-taronja-text, #B5470A) !important;
}
/* --- Menú principal ---
   Res de destacar una entrada concreta amb :nth-child(): es trenca en quant
   algú reordena el menú i, sobretot, marcar "II Jornades" com a especial no
   té sentit quan l'edició ja ha passat.
   Aquí tots els ítems pesen igual i el que crida l'atenció és només el botó
   de la dreta, que és l'única acció que volem que destaqui. --- */
.fetge-capcalera .elementskit-navbar-nav > li > a{
	position:relative;
	padding:10px 2px !important;
	margin:0 11px;
	font-size:14.5px;
	letter-spacing:.005em;
	transition:color .2s ease;
}
/* Subratllat que creix des del centre en passar-hi per sobre */
.fetge-capcalera .elementskit-navbar-nav > li > a::after{
	content:''; position:absolute; left:50%; right:50%; bottom:2px;
	height:2px; background:var(--fetge-taronja); border-radius:2px;
	transition:left .22s ease, right .22s ease;
}
.fetge-capcalera .elementskit-navbar-nav > li > a:hover::after{ left:0; right:0; }

/* La pàgina on ets: taronja i subratllat fix */
.fetge-capcalera .elementskit-navbar-nav > li.current-menu-item > a,
.fetge-capcalera .elementskit-navbar-nav > li.current_page_item > a,
.fetge-capcalera .elementskit-navbar-nav > li.current-menu-parent > a{
	color:var(--fetge-taronja-text, #B5470A) !important;
}
.fetge-capcalera .elementskit-navbar-nav > li.current-menu-item > a::after,
.fetge-capcalera .elementskit-navbar-nav > li.current_page_item > a::after{
	left:0; right:0;
}

/* El botó de la dreta: l'única cosa amb pes visual */
.fetge-cta-capcalera .elementor-button{
	box-shadow:0 2px 10px rgba(234,91,12,.28);
	transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.fetge-cta-capcalera .elementor-button:hover{
	transform:translateY(-1px);
	box-shadow:0 5px 16px rgba(234,91,12,.38);
}

/* --- Logo invertit al peu --- */
.fetge-logo-invertit img{ filter:brightness(0) invert(1); }

/* --- Peu --- */
.fetge-peu a{ color:rgba(246,245,241,.72); text-decoration:none; }
.fetge-peu a:hover{ color:var(--fetge-taronja-clar); }
.fetge-titol-peu{
	font-size:11px; font-weight:800; letter-spacing:.16em;
	text-transform:uppercase;
}
.fetge-barra-legal{ border-top:1px solid rgba(246,245,241,.12); }

/* --- Targetes reutilitzables --- */
.fetge-targeta{
	background:#fff;
	border:1px solid rgba(34,26,21,.09);
	border-radius:16px;
	transition:box-shadow .25s ease, transform .25s ease;
}
.fetge-targeta:hover{
	box-shadow:0 12px 32px rgba(26,19,16,.12);
	transform:translateY(-2px);
}

/* --- Bloc destacat de l'esdeveniment --- */
.fetge-esdeveniment{
	background:#fff;
	border:1px solid rgba(234,91,12,.3);
	border-radius:18px;
	box-shadow:0 16px 40px rgba(26,19,16,.12);
	margin-top:-32px;
	position:relative;
}

/* --- Xifres grosses de l'Associació --- */
.fetge-xifra .elementor-heading-title{
	font-family:'Source Serif 4',Georgia,serif;
	font-size:38px; font-weight:600; color:var(--fetge-taronja);
	line-height:1;
}

/* --- Llistat de notícies (ElementsKit) --- */
.elementskit-post-image-card{
	border:1px solid rgba(34,26,21,.09);
	border-radius:16px; overflow:hidden; background:#fff;
	transition:box-shadow .25s ease;
}
.elementskit-post-image-card:hover{ box-shadow:0 12px 32px rgba(26,19,16,.12); }
.elementskit-post-image-card .elementskit-entry-thumb img{
	aspect-ratio:16/9; object-fit:cover; width:100%;
}
.elementskit-post-image-card .entry-title a{
	font-family:'Source Serif 4',Georgia,serif;
	font-weight:600; color:var(--fetge-fosc);
}
.elementskit-post-image-card .entry-title a:hover{ color:var(--fetge-taronja-text, #B5470A); }

/* --- Logos de col·laboradors en gris fins que hi passes per sobre --- */
.fetge-collaboradors img{
	filter:grayscale(1); opacity:.6; transition:all .25s ease;
	max-height:56px; width:auto; object-fit:contain;
}
.fetge-collaboradors img:hover,
.fetge-collaboradors a:focus-visible img{ filter:grayscale(0); opacity:1; }
@media (hover: none){ .fetge-collaboradors img{ filter:none; opacity:.92; } }

/* --- Tipografia general de continguts --- */
.entry-content h2, .elementor-widget-theme-post-content h2{
	font-family:'Source Serif 4',Georgia,serif; font-weight:600;
}

/* --- Mòbil --- */
@media (max-width:1024px){
	.fetge-esdeveniment{ margin-top:0; }
	.fetge-capcalera{ position:relative; }
}

/* --- Correccions després de la primera revisió visual --- */

/* El botó de la capçalera no ha de partir-se en tres línies */
.fetge-cta-capcalera .elementor-button{
	white-space:nowrap;
	padding:12px 24px !important;
	font-size:13px !important;
	letter-spacing:.04em !important;
}

/* Columnes del peu en fila a escriptori, apilades al mòbil */
.fetge-peu .e-con-inner > .e-child,
.fetge-peu > .e-con-inner > .e-child{ min-width:240px; }
@media (max-width:880px){
	.fetge-peu .e-child{ width:100% !important; }
}

/* Els enllaços del peu, apagats; només s'encenen en passar-hi per sobre */
.fetge-peu .elementor-widget-text-editor a{
	color:rgba(246,245,241,.72) !important;
	text-decoration:none;
	border-bottom:1px solid rgba(246,245,241,.2);
}
.fetge-peu .elementor-widget-text-editor a:hover{
	color:var(--fetge-taronja-clar) !important;
	border-bottom-color:var(--fetge-taronja-clar);
}

/* El logo del peu, a l'esquerra */
.fetge-logo-invertit .elementor-widget-container{ text-align:left; }

/* A la portada no volem el títol de la pàgina */
.home .page-header, .home .entry-title, .page-id-32 .page-header{ display:none; }

/* --- Targetes de notícies d'ElementsKit, amb els colors de la marca --- */
.elementskit-post-image-card,
.elementskit-post-image-card .elementskit-box-content{
	background:#fff !important;
	border-radius:16px;
}
.elementskit-post-image-card{
	border:1px solid rgba(34,26,21,.09);
	overflow:hidden;
	box-shadow:none;
}
.elementskit-post-image-card .elementskit-entry-header img{
	aspect-ratio:16/9; object-fit:cover; width:100%; height:auto;
}
.elementskit-post-image-card .entry-title,
.elementskit-post-image-card .entry-title a{
	font-family:'Source Serif 4',Georgia,serif !important;
	font-weight:600 !important; font-size:18px !important;
	color:var(--fetge-fosc) !important; line-height:1.3;
}
.elementskit-post-image-card .entry-title a:hover{ color:var(--fetge-taronja-text, #B5470A) !important; }
.elementskit-post-image-card .elementskit-post-body-content{ padding:20px 22px 22px; }
/* El botó "Veure més", com un enllaç i no com un botó blau */
.elementskit-post-image-card .elementskit-btn,
.elementskit-post-image-card .ekit-btn{
	background:transparent !important; color:var(--fetge-taronja-text, #B5470A) !important;
	padding:0 !important; border:none !important; box-shadow:none !important;
	font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.elementskit-post-image-card .elementskit-btn:hover{ color:var(--fetge-taronja-fosc) !important; }
.elementskit-post-image-card .elementskit-entry-meta,
.elementskit-post-image-card .elementskit-post-meta{
	font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
	color:var(--fetge-suau, #5C4F47) !important;
}

/* --- Detalls del hero i la banda de l'esdeveniment --- */
.fetge-eyebrow .elementor-heading-title{
	font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
}
.fetge-badge .elementor-heading-title{
	display:inline-block; background:var(--fetge-taronja); color:var(--fetge-crema);
	border-radius:999px; padding:8px 16px;
	font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
}
.fetge-enllac-fletxa .elementor-button{
	background:transparent !important; padding:0 !important;
	color:var(--fetge-taronja-text, #B5470A) !important; font-size:13px;
}
.fetge-enllacos-linia a, .fetge-mes a{
	color:var(--fetge-taronja-text, #B5470A); font-weight:700; text-decoration:none;
}
.fetge-enllacos-linia a{ margin-right:18px; }

/* --- Els degradats no han d'entrar a la càrrega diferida de fons d'Elementor.
   Sense això la secció es queda sense fons fins que l'usuari hi arriba, i el
   text clar sobre el fons crema queda il·legible durant aquest instant. --- */
.e-con.e-parent.fetge-hero,
.e-con.e-parent.fetge-participa{ background-image:var(--e-con-bg,inherit); }
.fetge-hero{ background-image:linear-gradient(160deg,#9C450C 0%,#F58840 100%) !important; }
.fetge-participa{ background-image:linear-gradient(140deg,#D4560E 0%,#F58840 100%) !important; }

/* --- El cos de la targeta de notícia és .elementskit-post-body (no -content) --- */
.elementskit-post-image-card .elementskit-post-body{ padding:20px 22px 24px; }
.elementskit-post-image-card .entry-title{
	font-family:'Source Serif 4',Georgia,serif !important;
	font-size:18px !important; font-weight:600 !important;
	line-height:1.3; margin:0 0 10px; color:var(--fetge-fosc) !important;
}
.elementskit-post-image-card .entry-title a{ color:inherit !important; }
.elementskit-post-image-card .btn-wraper{ margin-top:8px; }

/* --- ElementsKit amaga el títol a l'estil "post image card": el recuperem.
   Sense títol, la targeta només mostra la foto i un "Veure més" sense context. --- */
.elementskit-post-image-card .entry-title{
	display:block !important;
	font-family:'Source Serif 4',Georgia,serif !important;
	font-size:18px !important; font-weight:600 !important;
	line-height:1.32 !important; margin:0 0 10px !important;
	color:var(--fetge-fosc) !important;
}
.elementskit-post-image-card .entry-title a{ color:inherit !important; }
.elementskit-post-image-card .entry-title a:hover{ color:var(--fetge-taronja-text, #B5470A) !important; }

/* ==========================================================================
   Pàgina de les Jornades
   ========================================================================== */

/* --- Retrats dels ponents, rodons --- */
.fetge-retrat img{
	border-radius:50%; aspect-ratio:1/1; object-fit:cover;
	border:3px solid rgba(234,91,12,.15);
}

/* --- Programa: cada bloc horari --- */
.fetge-programa .fetge-bloc{
	margin:0 0 4px; padding:14px 0;
	border-bottom:1px solid rgba(34,26,21,.09);
	line-height:1.55; font-size:15px; color:var(--fetge-fosc);
}
.fetge-programa .fetge-bloc:last-child{ border-bottom:none; }
.fetge-programa .fetge-hora{
	display:inline-block; min-width:62px;
	font-family:'Source Serif 4',Georgia,serif; font-size:17px;
	color:var(--fetge-taronja-text, #B5470A);
}
.fetge-programa .fetge-tipus{
	display:inline-block; margin-left:6px; padding:3px 10px; border-radius:999px;
	background:rgba(234,91,12,.1); color:#B54708;
	font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
}
.fetge-programa .fetge-ponent{ color:var(--fetge-suau); font-size:13.5px; }
.fetge-programa .fetge-bloc em{ color:var(--fetge-suau, #5C4F47); font-size:13px; }
.fetge-programa .elementor-tab-title{
	font-family:'Albert Sans',sans-serif; font-weight:700; font-size:15px;
}
.fetge-programa .elementor-tab-content{ background:#fff; border-radius:14px; padding:8px 24px; }

/* --- Acordions (fetge i quiz) --- */
.fetge-acordeo .elementor-tab-title,
.fetge-quiz .elementor-tab-title{
	background:#fff; border-radius:12px; margin-bottom:8px;
	padding:16px 20px !important; border:1px solid rgba(34,26,21,.09) !important;
}
.fetge-acordeo .elementor-tab-content,
.fetge-quiz .elementor-tab-content{
	border:none !important; padding:4px 20px 18px !important; font-size:14.5px;
}
.fetge-quiz .fetge-resposta{ color:var(--fetge-taronja-text, #B5470A); }

/* --- Logotips d'entitats --- */
.fetge-logo-entitat img{
	max-height:52px; width:auto; object-fit:contain;
	filter:grayscale(1); opacity:.65; transition:all .25s ease;
}
.fetge-logo-entitat img:hover,
.fetge-logo-entitat a:focus-visible img{ filter:grayscale(0); opacity:1; }
@media (hover: none){ .fetge-logo-entitat img{ filter:none; opacity:.92; } }

/* --- Mapa --- */
.fetge-mapa iframe{ border-radius:18px; border:1px solid rgba(34,26,21,.12); }

/* --- Targetes construides a ma (testimonis, premsa) --- */
.fetge-targeta-entrada{ overflow:hidden; padding:0 !important; }
.fetge-targeta-entrada .fetge-targeta-foto{ margin:0; }
.fetge-targeta-entrada .fetge-targeta-foto img{
	width:100%; aspect-ratio:16/10; object-fit:cover; display:block;
}
.fetge-targeta-entrada > .e-con-inner > .elementor-widget:not(.fetge-targeta-foto),
.fetge-targeta-entrada > .elementor-widget:not(.fetge-targeta-foto){
	padding-left:22px; padding-right:22px;
}
.fetge-targeta-entrada > .e-con-inner > .elementor-widget:last-child,
.fetge-targeta-entrada > .elementor-widget:last-child{ padding-bottom:22px; }
.fetge-data .elementor-heading-title{
	font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
	padding-top:16px;
}
.fetge-cita-hero p{ font-family:'Source Serif 4',Georgia,serif; }

/* --- Avís de pendent de revisió a les pàgines legals --- */
.fetge-avis{
	background:rgba(234,91,12,.08); border-left:3px solid var(--fetge-taronja);
	border-radius:0 10px 10px 0; padding:14px 18px; margin:0 0 24px;
	font-size:14px; color:var(--fetge-cos,#41372F);
}

/* --- Formulari de contacte --- */
.fetge-formulari .wpcf7 label{ font-weight:600; font-size:14px; color:var(--fetge-fosc); }
.fetge-formulari .wpcf7 input[type=text],
.fetge-formulari .wpcf7 input[type=email],
.fetge-formulari .wpcf7 input[type=tel],
.fetge-formulari .wpcf7 input[type=url],
.fetge-formulari .wpcf7 input[type=number],
.fetge-formulari .wpcf7 input[type=date],
.fetge-formulari .wpcf7 select,
.fetge-formulari .wpcf7 textarea{
	width:100%; margin-top:6px; padding:11px 14px;
	border:1px solid rgba(34,26,21,.18); border-radius:10px;
	font-family:'Albert Sans',sans-serif; font-size:15px; background:var(--fetge-crema);
}
.fetge-formulari .wpcf7 input:focus,
.fetge-formulari .wpcf7 textarea:focus{
	outline:none; border-color:var(--fetge-taronja-text, #B5470A);
}
/* rows/cols del CF7 manen sobre l'amplada si no es diu el contrari */
.fetge-formulari .wpcf7 textarea{
	width:100%; min-height:170px; height:auto; resize:vertical;
	line-height:1.6; font-family:'Albert Sans',sans-serif;
}
.fetge-formulari .wpcf7 input[type=submit]{
	background:var(--fetge-taronja); color:var(--fetge-crema); border:none;
	border-radius:999px; padding:13px 32px; cursor:pointer;
	font-weight:700; font-size:14px; letter-spacing:.05em; text-transform:uppercase;
}
.fetge-formulari .wpcf7 input[type=submit]:hover{ background:var(--fetge-taronja-fosc); }
.fetge-formulari .wpcf7-acceptance .wpcf7-list-item{ margin:0; font-size:13.5px; }

/* --- Maquetacio de tots els formularis ---
   CF7 embolcalla cada camp en un <span class="wpcf7-form-control-wrap">, aixi
   que la graella s'ha d'aplicar sobre els <label>, que son els fills directes.

   Aixo abans nomes valia per a la pagina de socis. El <label> ha de ser
   de bloc si o si: mentre era inline, el width:100% dels camps no tenia
   contra que calcular-se i cada camp sortia d'una mida. */
.fetge-formulari .fetge-fila{ margin:0 0 16px; }
.fetge-formulari .fetge-fila label{ display:block; }
.fetge-formulari .fetge-dos,
.fetge-formulari .fetge-tres{ display:grid; gap:16px; align-items:start; }
.fetge-formulari .fetge-dos{ grid-template-columns:1fr 1fr; }
.fetge-formulari .fetge-tres{ grid-template-columns:2fr 1fr 1fr; }
@media (max-width:640px){
	.fetge-formulari .fetge-dos,
	.fetge-formulari .fetge-tres{ grid-template-columns:1fr; }
}
.fetge-formulari .wpcf7-form-control-wrap{ display:block; }
.fetge-formulari select,
.fetge-formulari input[type=date],
.fetge-formulari input[type=tel]{
	width:100%; margin-top:6px; padding:11px 14px;
	border:1px solid rgba(34,26,21,.18); border-radius:10px;
	font-family:'Albert Sans',sans-serif; font-size:15px; background:var(--fetge-crema);
}
.fetge-formulari .fetge-consents,
.fetge-formulari .fetge-consentiments{
	background:rgba(234,91,12,.05); border-radius:10px;
	padding:13px 16px; margin:0 0 10px; font-size:13.5px; line-height:1.6;
}
.fetge-formulari .fetge-consents,
.fetge-formulari .fetge-consentiments em{ color:var(--fetge-suau, #5C4F47); }
.fetge-formulari .fetge-consents,
.fetge-formulari .fetge-consentiments .wpcf7-list-item{ margin:0; }
.fetge-formulari .fetge-consents,
.fetge-formulari .fetge-consentiments label{ display:flex; gap:10px; align-items:flex-start; }

/* Aclariment sota un camp. El fa servir el formulari de voluntariat per
   explicar per què es pregunta si la persona està trasplantada: és una dada
   de salut i preguntar-la sense dir per a què no s'aguanta.

   Va amb --fetge-suau (#5C4F47), que sobre el crema dona 7,2:1. NO amb
   --fetge-apagat (#9A8F87), que dona 2,89:1 i no arriba ni de bon tros al
   4,5:1 que demana l'AA per a text petit. L'apagat serveix per a vores i
   icones decoratives, no per a text que algu ha de llegir. */
.fetge-formulari .fetge-ajuda{
	display:block; margin:7px 0 0;
	font-size:13.5px; line-height:1.55; color:var(--fetge-suau);
}


/* --- Nota destacada (pàgina de socis) --- */
.fetge-nota{
	background:rgba(234,91,12,.07); border-radius:12px;
	padding:16px 20px; margin:0; font-size:15px; line-height:1.6;
	color:var(--fetge-cos,#41372F);
}

/* --- Contingut de les pàgines de servei --- */
.fetge-contingut h3{
	font-family:'Source Serif 4',Georgia,serif; font-weight:600;
	font-size:23px; line-height:1.3; color:var(--fetge-fosc);
	margin:34px 0 12px;
}
.fetge-contingut h3:first-child{ margin-top:0; }
.fetge-contingut p{ margin:0 0 16px; line-height:1.75; }
.fetge-contingut ul{ margin:0 0 20px; padding-left:0; list-style:none; }
.fetge-contingut li{
	position:relative; padding-left:26px; margin-bottom:10px; line-height:1.7;
}
.fetge-contingut li::before{
	content:''; position:absolute; left:6px; top:11px;
	width:7px; height:7px; border-radius:50%; background:var(--fetge-taronja);
}
.fetge-contingut a{ color:var(--fetge-taronja-text, #B5470A); font-weight:600; }

/* --- Blocs de PDF amb visor incrustat --- */
.fetge-bloc-pdf{ padding:26px !important; }
.fetge-any .elementor-heading-title{
	font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
}
.fetge-visor-pdf .pdfemb-viewer{
	border:1px solid rgba(34,26,21,.12); border-radius:12px; overflow:hidden;
	background:var(--fetge-crema);
}
.fetge-visor-pdf .pdfemb-toolbar{
	background:rgba(34,26,21,.04) !important; border-radius:0 0 12px 12px;
}
.fetge-baixar .elementor-button{
	font-size:13px !important; padding:12px 26px !important;
}

/* --- Targetes d'itinerari: la porta d'entrada per a qui arriba perdut --- */
.fetge-itinerari{
	border-left:3px solid var(--fetge-taronja) !important;
	transition:transform .2s ease, box-shadow .2s ease;
}
.fetge-itinerari:hover{
	transform:translateY(-3px);
	box-shadow:0 14px 34px rgba(26,19,16,.13);
}

/* --- Vídeos de YouTube incrustats, responsius --- */
.fetge-video{
	margin:24px 0; border-radius:14px; overflow:hidden;
	background:#000; aspect-ratio:16/9;
	box-shadow:0 10px 30px rgba(26,19,16,.14);
}
.fetge-video iframe{ width:100%; height:100%; border:0; display:block; }

/* ==========================================================================
   Acabats fins del hero, segons el prototip
   ========================================================================== */

/* L'eyebrow porta una ratlla curta a cada costat. Al prototip són dos <span>
   de 32px; aquí es fan amb pseudoelements per no embrutar el marcatge i perquè
   segueixin funcionant si algú edita el text des d'Elementor. */
.fetge-eyebrow .elementor-heading-title{
	display:inline-flex; align-items:center; gap:12px;
	font-size:13px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
}
.fetge-eyebrow .elementor-heading-title::before,
.fetge-eyebrow .elementor-heading-title::after{
	content:''; display:block; width:32px; height:1px; flex:none;
}
.fetge-eyebrow .elementor-heading-title::before{ background:#FFE3C9; }
.fetge-eyebrow .elementor-heading-title::after{ background:var(--fetge-taronja-clar); }
@media (max-width:520px){
	.fetge-eyebrow .elementor-heading-title::before,
	.fetge-eyebrow .elementor-heading-title::after{ width:18px; }
}

/* El text del hero, més estret: al prototip fa tres línies, no dues llargues.
   Una línia de 90 caràcters cansa; una de 60 es llegeix d'una passada.

   Atenció: Elementor 4 ja NO genera el div .elementor-widget-container que
   embolcallava el contingut a les versions anteriors. El <p> penja directament
   del widget, així que la regla ha d'anar sobre el widget i sobre el paràgraf.
   Qualsevol selector que busqui .elementor-widget-container no trobarà res. */
.fetge-hero-text{ max-width:640px; margin-left:auto !important; margin-right:auto !important; }
.fetge-hero-text p{ max-width:640px; margin-left:auto; margin-right:auto; line-height:1.65; }

/* El titular del hero amb el text equilibrat, perquè no quedi una paraula sola
   a l'última línia */
.fetge-hero-titol .elementor-heading-title{
	text-wrap:balance; max-width:880px; margin:0 auto; line-height:1.12;
}

/* La banda de l'esdeveniment puja i trepitja el hero, com al prototip */
.fetge-esdeveniment{
	margin-top:-32px !important;
	border-radius:18px !important;
	position:relative; z-index:2;
}
@media (max-width:1024px){ .fetge-esdeveniment{ margin-top:0 !important; } }

/* --- Selector d'idioma de la capçalera --- */
.fetge-idiomes{
	display:inline-flex; border:1px solid rgba(34,26,21,.2);
	border-radius:999px; overflow:hidden;
	font-size:12px; font-weight:700; letter-spacing:.04em;
}
.fetge-idioma{
	display:block; padding:7px 13px; text-decoration:none;
	color:var(--fetge-suau); background:transparent; transition:all .18s ease;
}
.fetge-idioma:hover{ background:rgba(234,91,12,.1); color:var(--fetge-taronja-text, #B5470A); }
.fetge-idioma.es-actual{
	/* Text fosc i no crema: crema sobre taronja dona 3,21:1 i la norma
	   WCAG AA en demana 4,5:1 per a text petit. Amb el fosc puja a 4,89:1.
	   El taronja fosc #C44A05 tampoc arriba (4,45:1), no serveix. */
	background:var(--fetge-taronja); color:var(--fetge-fosc);
}
/* Si la pàgina no té traducció el botó es veu apagat, però segueix clicant:
   porta a la portada de l'altre idioma. Un botó mort deixava la gent
   atrapada a /es/ sense manera de tornar al català. */
.fetge-idioma.sense-traduccio{ opacity:.45; }
.fetge-idioma.sense-traduccio:hover{
	opacity:.9; background:rgba(234,91,12,.08); color:var(--fetge-taronja-text, #B5470A);
}
.fetge-selector-idioma{ line-height:0; }

/* --- Graella de notícies -----------------------------------------------
   Cinc per fila a l'escriptori. Amb sis targetes grans la secció ocupava
   mitja pantalla i totes semblaven igual d'importants; petites es llegeixen
   com el que són, un índex del que passa a l'entitat. */
.fetge-noticies{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(206px, 1fr));
	gap:18px;
}
.fetge-noticia{
	display:flex; flex-direction:column;
	background:#FFFFFF;
	border:1px solid rgba(34,26,21,.09);
	border-radius:14px; overflow:hidden;
	color:var(--fetge-fosc); text-decoration:none;
	transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.fetge-noticia:hover{
	box-shadow:0 12px 30px rgba(26,19,16,.13);
	border-color:rgba(234,91,12,.28);
	transform:translateY(-3px);
}
.fetge-noticia-foto{
	aspect-ratio:16/10; overflow:hidden;
	background:linear-gradient(150deg,#F5E3D3,#EFE0D2);
}
.fetge-noticia-foto img{
	width:100%; height:100%; object-fit:cover; display:block;
	transition:transform .5s ease;
}
.fetge-noticia:hover .fetge-noticia-foto img{ transform:scale(1.05); }
.fetge-noticia-cos{
	display:flex; flex-direction:column; gap:7px;
	padding:14px 16px 16px; flex:1;
}
.fetge-noticia-data{
	font-size:10px; font-weight:800; letter-spacing:.13em;
	text-transform:uppercase; color:var(--fetge-suau);
}
.fetge-noticia-titol{
	font-family:'Source Serif 4', Georgia, serif;
	font-size:15px; font-weight:600; line-height:1.32; flex:1;
	/* Tres línies com a màxim: si no, una targeta amb un titular llarg
	   estira tota la fila i la graella queda desigualada. */
	display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
	overflow:hidden;
}
.fetge-noticia-mes{
	font-size:11px; font-weight:700; letter-spacing:.09em;
	text-transform:uppercase; color:var(--fetge-taronja-text, #B5470A);
	margin-top:auto; padding-top:6px;
}
@media (max-width:1024px){
	.fetge-noticies{ grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); }
}
@media (max-width:600px){
	.fetge-noticies{ grid-template-columns:repeat(2, 1fr); gap:14px; }
	.fetge-noticia-titol{ font-size:14px; }
}

/* --- Logotips de les entitats amb qui es treballa --------------------- */
.fetge-logos{
	display:flex; flex-wrap:wrap; justify-content:center;
	align-items:center; gap:24px 34px;
	/* Ara es una <ul>, com la del peu */
	list-style:none; margin:0; padding:0;
}
.fetge-logos > li{ margin:0; padding:0; }
.fetge-logos a{
	display:inline-flex; align-items:center; justify-content:center;
	line-height:0;
}
.fetge-logos img{
	height:44px; width:auto; max-width:132px; object-fit:contain;
	/* En gris no competeixen amb la marca de l'entitat; en passar-hi
	   per sobre recuperen el seu color. És el que fa la maqueta. */
	filter:grayscale(1); opacity:.62;
	transition:filter .25s ease, opacity .25s ease;
}
.fetge-logos a:hover img,
.fetge-logos a:focus-visible img{ filter:grayscale(0); opacity:1; }
@media (hover: none){ .fetge-logos img{ filter:none; opacity:.92; } }

/* Graella de la pàgina Treball en xarxa: aquí sí a tot color i amb nom */
.fetge-xarxa{
	display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr));
	gap:16px;
}
.fetge-xarxa-item{
	display:flex; flex-direction:column; align-items:center; gap:12px;
	padding:22px 16px 18px; text-decoration:none;
	background:#FFFFFF; border:1px solid rgba(34,26,21,.09);
	border-radius:14px; transition:all .25s ease;
}
.fetge-xarxa-item:hover{
	border-color:rgba(234,91,12,.32);
	box-shadow:0 10px 26px rgba(26,19,16,.10);
	transform:translateY(-2px);
}
.fetge-xarxa-item img{
	height:56px; width:auto; max-width:100%; object-fit:contain;
}
.fetge-xarxa-nom{
	font-size:12px; line-height:1.4; text-align:center;
	color:var(--fetge-suau);
}
.fetge-xarxa-item:hover .fetge-xarxa-nom{ color:var(--fetge-taronja-text, #B5470A); }
.fetge-xarxa-sense{
	display:flex; align-items:center; justify-content:center;
	padding:22px 16px; border-radius:14px; text-align:center;
	border:1px dashed rgba(34,26,21,.18);
	font-size:12px; color:var(--fetge-suau);
}

/* --- Distintius del peu: segell del Balanç Social i ODS ---------------- */
.fetge-distintius{
	display:flex; align-items:center; gap:26px; flex-wrap:wrap;
}
.fetge-segell img{
	height:86px; width:auto;
	/* El segell és negre sobre blanc; damunt del peu fosc no es veuria.
	   S'inverteix el negre a crema deixant el magenta reconeixible. */
	background:#F6F5F1; border-radius:10px; padding:8px 10px;
}
.fetge-ods{ display:flex; gap:8px; }
.fetge-ods img{
	height:46px; width:46px; border-radius:6px; display:block;
}
.fetge-distintius-text{
	font-size:11px; line-height:1.5; color:rgba(246,245,241,.55);
	max-width:210px;
}
@media (max-width:600px){
	.fetge-distintius{ gap:18px; }
	.fetge-segell img{ height:70px; }
	.fetge-ods img{ height:40px; width:40px; }
}

/* --- Repartiment de la capçalera -------------------------------------
   Els controls d'amplada dels contenidors d'Elementor no s'apliquen en
   aquesta versio: les tres columnes acaben totes amb flex:0 1 auto i el
   menu, que necessita 579 px, en rebia 538 i es partia en dues linies.
   Es reparteix aqui, que es on es pot fer de manera fiable. */
.fetge-capcalera > .e-con-inner,
.fetge-capcalera{ align-items:center; }
.fetge-capcalera > .e-con-inner > .e-child:first-child{
	flex:0 0 auto !important; width:188px !important;
}
.fetge-capcalera > .e-con-inner > .e-child:nth-child(2){
	flex:1 1 auto !important; min-width:0 !important;
}
.fetge-capcalera > .e-con-inner > .fetge-cta-capcalera{
	flex:0 0 auto !important; width:auto !important;
}
.fetge-capcalera .elementskit-navbar-nav{ flex-wrap:nowrap !important; }
.fetge-capcalera .elementskit-navbar-nav > li > a{ white-space:nowrap; }
.fetge-capcalera .fetge-cta-capcalera .elementor-widget-button{ width:auto; }

@media (max-width:1100px){
	/* Abans que el menu es parteixi, que es faci una mica mes petit */
	.fetge-capcalera .elementskit-navbar-nav > li > a{ font-size:12.5px; padding:8px 7px; }
}

/* La marca es un bloc de tres linies i, a mida completa, feia una capçalera
   de 128 px. Amb 58 px d'alt la barra queda com la de la maqueta. */
.fetge-capcalera img{ max-height:58px; width:auto !important; }
.fetge-capcalera > .e-con-inner{ padding-top:10px; padding-bottom:10px; }
.fetge-capcalera .elementskit-navbar-nav > li > a{ padding-top:6px; padding-bottom:6px; }

/* --- Files de capçalera de secció -------------------------------------
   Titol a l'esquerra i "Totes les notícies →" a la dreta, com a la maqueta.
   Els controls de flex dels contenidors d'Elementor no s'apliquen, i el
   titol es quedava amb tota l'amplada empenyent l'enllaç a la línia de sota.

   El selector demana que la fila tingui un contenidor A MES del widget
   .fetge-mes: aixi distingeix la capçalera de secció (títol dins d'un
   contenidor + enllaç) d'una targeta d'itinerari, que també duu .fetge-mes
   pero només widgets a dins. */
.e-con:has(> .e-con):has(> .elementor-widget.fetge-mes){
	flex-direction:row !important;
	align-items:flex-end !important;
	justify-content:space-between !important;
	flex-wrap:wrap; gap:16px;
}
.e-con:has(> .e-con):has(> .elementor-widget.fetge-mes) > .e-con{
	flex:1 1 320px !important; min-width:0 !important;
}
.e-con:has(> .e-con):has(> .elementor-widget.fetge-mes) > .elementor-widget.fetge-mes{
	flex:0 0 auto !important; padding-bottom:4px;
}

/* Aire lateral quan la finestra just voreja els 1240 px de la columna */
@media (max-width:1300px){
	.elementor > .e-con > .e-con-inner{ padding-left:24px; padding-right:24px; }
}

/* --- Franja de finançadors, damunt del peu ----------------------------
   Al web antic aquests logos anaven al peu de totes les pagines. Es manté
   aixi: qui posa diners hi ha de sortir a tot arreu, no nomes a la portada.

   Es distingeix a proposit de la franja "Treballem en xarxa" de la portada:
   aquella son entitats amb qui es col·labora i va dins del cos de la pagina;
   aquesta es un credit de suport i va enganxada al peu, mes petita i mes
   apagada, perque no competeixi amb el contingut. */
.fetge-financadors{
	border-top:1px solid rgba(34,26,21,.08);
	background:var(--fetge-crema, #F6F5F1);
}
.fetge-financadors-dins{
	max-width:1240px; margin:0 auto; padding:34px 24px 38px;
	display:flex; flex-direction:column; align-items:center; gap:22px;
}
.fetge-financadors-titol{
	font-size:11px; font-weight:800; letter-spacing:.2em;
	text-transform:uppercase; color:var(--fetge-suau, #5C4F47);
	opacity:.75;
}
.fetge-financadors-graella{
	/* Reixa i no flex, a proposit. Amb flex les files es reparteixen segons
	   l'amplada REAL de cada logotip —que varia molt: n'hi ha d'apaisats i de
	   gairebe quadrats— i sortien files de 7, 8 i 2. Amb columnes iguals el
	   repartiment es previsible: nou columnes son 9 i 8. */
	display:grid;
	grid-template-columns:repeat(9, 1fr);
	justify-items:center; align-items:center;
	gap:24px 16px;
	list-style:none; margin:0; padding:0; width:100%;
}
.fetge-financadors-graella > li{ margin:0; padding:0; }
.fetge-financadors-graella a,
.fetge-financadors-graella span{
	display:inline-flex; align-items:center; justify-content:center; line-height:0;
}
.fetge-financadors-graella img{
	height:34px; width:auto; max-width:100%; object-fit:contain;
	/* Amb .55 els logotips clars (l'Hospitalet, Godó, la Rovira i Virgili)
	   gairebé desapareixien. El contrast els torna a fer llegibles sense
	   que la franja deixi de ser discreta. Cada logotip porta a mes la seva
	   correccio de densitat, calculada per equilibrar_logos.py. */
	filter:grayscale(1) contrast(1.15); opacity:.78;
	transition:filter .25s ease, opacity .25s ease, transform .25s ease;
}
.fetge-financadors-graella a:hover img,
.fetge-financadors-graella a:focus-visible img{
	filter:grayscale(0); opacity:1; transform:translateY(-1px);
}
/* Sense ratoli no hi ha hover: al mobil i a les tauletes els logotips
   es quedaven grisos per sempre. Alla es veuen a color directament. */
@media (hover: none){
	.fetge-financadors-graella img{ filter:none; opacity:.92; }
}
/* Els que no tenen web no han de semblar clicables */
.fetge-financadors-graella span img{ cursor:default; }

/* Menys columnes a mesura que hi ha menys lloc. Els nombres estan triats
   perque no quedi mai una ultima fila d'un sol logotip: 17 entre 6 son
   6, 6 i 5. */
@media (max-width:1280px){
	.fetge-financadors-graella{ grid-template-columns:repeat(6, 1fr); }
}
@media (max-width:700px){
	.fetge-financadors-dins{ padding:26px 20px 30px; gap:16px; }
	.fetge-financadors-graella{ grid-template-columns:repeat(3, 1fr); gap:20px 12px; }
	.fetge-financadors-graella img{ height:28px; }
}

/* La mateixa graella, pero a tot color i amb nom, per a Treball en xarxa */
.fetge-xarxa-item img[src*="fin-"]{ height:48px; }

/* === EQUILIBRI OPTIC DELS LOGOTIPS (generat) === */
/* Generat per scripts/equilibrar_logos.py. No editar a ma:
   es torna a escriure sencer cada vegada que s'executa.

   Cada logotip es pinta amb una correccio calculada a partir de la
   seva densitat real, per acostar-los tots a una mitjana de 140
   sobre 255. Sense aixo, a la fila en gris uns criden i altres
   desapareixen. Els fitxers no es toquen: a /treball-en-xarxa/ els
   mateixos logotips surten a tot color i sense cap correccio. */
.fetge-logos img[src*="hebron"]{
	filter:grayscale(1) contrast(1.15) brightness(1.18);  /* densitat 67 -> aclarit */
}
.fetge-logos img[src*="banc"]{
	filter:grayscale(1) contrast(1.15) brightness(1.18);  /* densitat 81 -> aclarit */
}
.fetge-financadors-graella img[src*="fin-dipu"]{
	filter:grayscale(1) contrast(1.15) brightness(1.18);  /* densitat 92 -> aclarit */
}
.fetge-logos img[src*="fneth"]{
	filter:grayscale(1) contrast(1.15) brightness(1.18);  /* densitat 101 -> aclarit */
}
.fetge-financadors-graella img[src*="fin-pfizer-1"]{
	filter:grayscale(1) contrast(1.15) brightness(1.18);  /* densitat 111 -> aclarit */
}
.fetge-financadors-graella img[src*="fin-ajb-1"]{
	filter:grayscale(1) contrast(1.15) brightness(1.18);  /* densitat 116 -> aclarit */
}
.fetge-financadors-graella img[src*="fin-terrassa"]{
	filter:grayscale(1) contrast(1.15) brightness(1.18);  /* densitat 118 -> aclarit */
}
.fetge-financadors-graella img[src*="fin-diba-1"]{
	filter:grayscale(1) contrast(1.15) brightness(1.15);  /* densitat 122 -> aclarit */
}
.fetge-logos img[src*="bellvitge"]{
	filter:grayscale(1) contrast(1.15) brightness(1.08);  /* densitat 129 -> aclarit */
}
.fetge-financadors-graella img[src*="fin-adaa"]{
	filter:grayscale(1) contrast(1.15) brightness(1.05);  /* densitat 134 -> aclarit */
}
.fetge-financadors-graella img[src*="fin-lh-2"]{
	filter:grayscale(1) contrast(1.15) brightness(0.96);  /* densitat 147 -> enfosquit */
}
.fetge-logos img[src*="clinic"]{
	filter:grayscale(1) contrast(1.15) brightness(0.92);  /* densitat 152 -> enfosquit */
}
.fetge-financadors-graella img[src*="fin-habitatge-1"]{
	filter:grayscale(1) contrast(1.15) brightness(0.91);  /* densitat 154 -> enfosquit */
}
.fetge-financadors-graella img[src*="fin-dip-1"]{
	filter:grayscale(1) contrast(1.15) brightness(0.91);  /* densitat 154 -> enfosquit */
}
.fetge-financadors-graella img[src*="fin-vila"]{
	filter:grayscale(1) contrast(1.15) brightness(0.87);  /* densitat 160 -> enfosquit */
}
.fetge-financadors-graella img[src*="fin-once"]{
	filter:grayscale(1) contrast(1.15) brightness(0.87);  /* densitat 161 -> enfosquit */
}
.fetge-logos img[src*="elpa"]{
	filter:grayscale(1) contrast(1.15) brightness(0.87);  /* densitat 162 -> enfosquit */
}
.fetge-financadors-graella img[src*="fin-caixa"]{
	filter:grayscale(1) contrast(1.15) brightness(0.85);  /* densitat 165 -> enfosquit */
}
.fetge-logos img[src*="ocatt"]{
	filter:grayscale(1) contrast(1.15) brightness(0.80);  /* densitat 174 -> enfosquit */
}
.fetge-financadors-graella img[src*="fin-mamparas-2"]{
	filter:grayscale(1) contrast(1.15) brightness(0.76);  /* densitat 184 -> enfosquit */
}
.fetge-financadors-graella img[src*="fin-santamans"]{
	filter:grayscale(1) contrast(1.15) brightness(0.76);  /* densitat 184 -> enfosquit */
}
.fetge-financadors-graella img[src*="fin-godo"]{
	filter:grayscale(1) contrast(1.15) brightness(0.73);  /* densitat 193 -> enfosquit */
}
/* === fi de l'equilibri optic === */

/* Text nomes per a lectors de pantalla. El tema el porta, pero el definim
   aqui per no dependre'n. */
.screen-reader-text{
	position:absolute !important; width:1px; height:1px;
	padding:0; margin:-1px; overflow:hidden;
	clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* --- Índex de serveis -------------------------------------------------
   Abans eren sis caixes de text amb un enllaç petit al final que, totes
   sis, anaven a /contacte/. Ara la targeta sencera és l'enllaç i porta a la
   pàgina del servei. La zona clicable passa de ser un renglonet a ser tota
   la fitxa, cosa que en un mòbil es nota molt. */
.fetge-serveis{
	/* Flex i no graella, a proposit. Amb columnes de graella, un grup de dos
	   serveis deixava sempre la tercera columna buida: 419 px de forat a la
	   dreta, tres vegades a la mateixa pagina. Amb flex i justify-content
	   centrat, les files incompletes queden centrades i la targeta conserva
	   la mateixa amplada a tot arreu. */
	display:flex; flex-wrap:wrap; justify-content:center;
	gap:18px;
	list-style:none; margin:14px 0 0; padding:0;
}
.fetge-serveis > li{
	flex:0 1 calc((100% - 36px) / 3);
	min-width:296px;
	margin:0; padding:0; display:flex;
}

.fetge-servei-fitxa{
	display:flex; flex-direction:column; gap:10px; width:100%;
	padding:26px 26px 24px;
	background:#FFFFFF;
	border:1px solid rgba(34,26,21,.09);
	border-radius:16px;
	color:var(--fetge-fosc); text-decoration:none;
	transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.fetge-servei-fitxa:hover{
	border-color:rgba(234,91,12,.3);
	box-shadow:0 14px 34px rgba(26,19,16,.11);
	transform:translateY(-3px);
}
.fetge-servei-cap{
	display:flex; align-items:center; gap:12px;
}
.fetge-servei-icona{
	flex:0 0 auto; width:38px; height:38px; padding:7px;
	border-radius:11px;
	color:var(--fetge-taronja);
	background:rgba(234,91,12,.09);
	transition:background .25s ease, color .25s ease;
}
.fetge-servei-fitxa:hover .fetge-servei-icona{
	background:var(--fetge-taronja); color:#FFFFFF;
}
.fetge-servei-titol{
	font-family:'Source Serif 4', Georgia, serif;
	font-size:19px; font-weight:600; line-height:1.25;
	color:var(--fetge-taronja);
}
.fetge-servei-text{
	font-size:14.5px; line-height:1.6; color:var(--fetge-suau);
}
.fetge-servei-nota{
	font-size:13px; line-height:1.5; font-style:italic;
	color:var(--fetge-suau, #5C4F47);
}
.fetge-servei-crida{
	margin-top:auto; padding-top:10px;
	font-size:12px; font-weight:700; letter-spacing:.09em;
	text-transform:uppercase; color:var(--fetge-taronja-text, #B5470A);
}
@media (max-width:600px){
	.fetge-serveis{ gap:14px; }
	.fetge-serveis > li{ flex:1 1 100%; min-width:0; }
	.fetge-servei-fitxa{ padding:22px 20px 20px; }
}

/* Les targetes de la portada, amb el mateix criteri que les de /noticies/:
   res no es retalla mai. Les classes són diferents perquè les de la portada
   les pinta el shortcode [fetge_noticies] i les de l'arxiu, la plantilla. */
.fetge-noticia-foto{ position:relative; }
.fetge-noticia-foto img{ position:relative; }
.fetge-noticia-foto.es-sencera img{ object-fit:contain; }
.fetge-noticia-foto.es-sencera::before{
	content:''; position:absolute; inset:0;
	background-image:var(--fetge-fons); background-size:cover;
	background-position:center;
	filter:blur(22px) saturate(1.15) brightness(1.04);
	transform:scale(1.25);
	opacity:.6;
}
.fetge-noticia-foto.es-buida{
	background-image:
		url("https://fetge.cat/wp-content/uploads/2026/07/Fetge-Logo-2026-HOR-1.png"),
		linear-gradient(150deg,#F5E3D3,#EFE0D2);
	background-repeat:no-repeat;
	background-position:center;
	background-size:60% auto, cover;
}

/* --- Arxiu de notícies -------------------------------------------------
   /noticies/ és la pàgina d'entrades de WordPress, així que no es pot
   maquetar amb Elementor: mana la plantilla del tema. Es pinta amb una
   plantilla pròpia (novamira-sandbox/arxiu-noticies.php) i s'estila aquí.
   Per això aquestes regles no depenen de cap classe d'Elementor.

   Les targetes tenen classes pròpies (.fetge-ar-*) i NO les que fa servir
   el shortcode [fetge_noticies] de la portada. Abans les compartien, i
   qualsevol retoc a l'arxiu canviava la portada de rebot. */
.fetge-arxiu-dins{
	max-width:1240px; margin:0 auto; padding-left:24px; padding-right:24px;
}
.fetge-arxiu-hero{
	background:linear-gradient(160deg,#9C450C 0%,#CE5810 55%,#F58840 145%);
	color:var(--fetge-crema);
	position:relative; overflow:hidden;
}
/* La claror de la cantonada de dalt a la dreta, com a la resta de capçaleres */
.fetge-arxiu-hero::after{
	content:''; position:absolute; inset:0; pointer-events:none;
	background:radial-gradient(ellipse 60% 50% at 80% 10%,rgba(255,209,166,.28),transparent 60%);
}
.fetge-arxiu-hero .fetge-arxiu-dins{
	padding-top:clamp(56px,7vw,92px); padding-bottom:clamp(48px,6vw,76px);
	text-align:center; max-width:820px; position:relative; z-index:1;
}
.fetge-arxiu-epigraf{
	display:block; font-size:12px; font-weight:800; letter-spacing:.2em;
	text-transform:uppercase; color:rgba(246,245,241,.72); margin-bottom:14px;
}
.fetge-arxiu-hero h1{
	font-family:'Source Serif 4', Georgia, serif;
	font-size:clamp(30px,3.6vw,46px); font-weight:600; line-height:1.15;
	margin:0 0 14px; color:var(--fetge-crema); text-wrap:balance;
}
.fetge-arxiu-hero p{
	margin:0; font-size:16.5px; line-height:1.65; color:rgba(246,245,241,.85);
}
.fetge-arxiu-cos .fetge-arxiu-dins{
	padding-top:40px; padding-bottom:88px;
}

/* --- La notícia destacada ---------------------------------------------
   Caixa fosca a tota amplada: la imatge en una columna i el text a l'altra. */
.fetge-arxiu-destacada .fetge-arxiu-dins{
	padding-top:clamp(36px,4.5vw,56px);
}
.fetge-ar-destacada{
	display:grid;
	/* min() perquè la columna no pugui ser mai més ampla que la caixa: amb
	   minmax(320px,1fr) pelat, per sota de 368 px de pantalla la targeta es
	   retallava per la dreta. */
	grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
	background:var(--fetge-negre); border-radius:20px; overflow:hidden;
	color:var(--fetge-crema); text-decoration:none;
	box-shadow:0 20px 50px rgba(26,19,16,.2);
	transition:box-shadow .25s ease, transform .25s ease;
}
.fetge-ar-destacada:hover{
	box-shadow:0 24px 60px rgba(234,91,12,.25);
	transform:translateY(-2px);
	color:var(--fetge-crema);
}
.fetge-ar-destacada-foto{
	display:block; aspect-ratio:16/10; overflow:hidden; background:#241A15;
}
.fetge-ar-destacada-foto img{
	display:block; width:100%; height:100%; object-fit:cover;
}
/* Quan la imatge és un bàner molt ample —un titular escrit dins d'una tira
   de 780x195, per exemple— retallar-la se n'emporta el text. Aleshores la
   targeta canvia de forma: el bàner va sencer i a tota amplada a dalt, i el
   text a sota. Ho decideix la plantilla mirant la proporció real. */
.fetge-ar-destacada.es-bandera{
	grid-template-columns:1fr;
}
.fetge-ar-destacada.es-bandera .fetge-ar-destacada-foto{
	aspect-ratio:auto;   /* la posa la plantilla, la de la imatge de debò */
	background:transparent;
}
.fetge-ar-destacada.es-bandera .fetge-ar-destacada-foto img{
	height:auto; object-fit:contain;
}
.fetge-ar-destacada-cos{
	display:flex; flex-direction:column; justify-content:center; gap:14px;
	padding:clamp(26px,3.5vw,44px);
}
.fetge-ar-destacada-dalt{
	display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.fetge-ar-marca{
	font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
	color:var(--fetge-negre); background:var(--fetge-taronja-clar);
	border-radius:999px; padding:6px 14px;
}
.fetge-ar-destacada-data{
	font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
	color:rgba(246,245,241,.55);
}
.fetge-ar-destacada-titol{
	font-family:'Source Serif 4', Georgia, serif;
	font-size:clamp(22px,2.6vw,32px); font-weight:600; line-height:1.2;
	color:var(--fetge-crema); text-wrap:balance;
}
.fetge-ar-destacada-resum{
	font-size:14.5px; line-height:1.65; color:rgba(246,245,241,.7);
}
.fetge-ar-destacada-mes{
	font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
	color:var(--fetge-taronja-clar);
}

/* Filtre per any.
   Es diu .fetge-arxiu-any i no .fetge-any perquè .fetge-any ja existia per
   als títols d'any dels blocs de PDF de /pisos-dacollida/ i /transparencia/,
   i les dues regles es trepitjaven. */
.fetge-arxiu-anys{
	display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px;
}
.fetge-arxiu-any{
	display:inline-block; padding:10px 22px; border-radius:999px;
	border:1.5px solid rgba(34,26,21,.18);
	font-size:13px; font-weight:700; letter-spacing:.03em;
	color:#41372F; text-decoration:none;
	transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.fetge-arxiu-any:hover{ border-color:var(--fetge-taronja-text, #B5470A); color:var(--fetge-taronja-text, #B5470A); }
.fetge-arxiu-any.es-actual{
	/* Text fosc, no crema: crema sobre aquest taronja fa 3,21:1 i no arriba
	   al 4,5 que demana la WCAG AA. Amb el fosc, 4,89. */
	background:var(--fetge-taronja); border-color:var(--fetge-taronja-text, #B5470A);
	color:var(--fetge-fosc);
}
.fetge-arxiu-any.es-actual:hover{ color:var(--fetge-fosc); }

/* --- La graella de targetes ------------------------------------------- */
.fetge-ar-graella{
	display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
	gap:20px; list-style:none; margin:0; padding:0;
}
.fetge-ar-graella > li{ margin:0; padding:0; display:flex; }
.fetge-ar-fitxa{
	display:flex; flex-direction:column; width:100%;
	background:#fff; border:1px solid rgba(34,26,21,.09);
	border-radius:16px; overflow:hidden;
	color:var(--fetge-fosc); text-decoration:none;
	transition:box-shadow .25s ease, transform .25s ease;
}
.fetge-ar-fitxa:hover{
	box-shadow:0 12px 32px rgba(26,19,16,.12);
	transform:translateY(-3px);
	color:var(--fetge-fosc);
}
.fetge-ar-foto{
	display:block; position:relative; aspect-ratio:16/9; overflow:hidden;
	background:linear-gradient(150deg,#F5E3D3,#EFE0D2);
}
.fetge-ar-foto img{
	display:block; position:relative; width:100%; height:100%;
	object-fit:cover;
}
/* Tot el que no sigui apaïsat com la caixa es veu SENCER, i el buit del
   costat s'omple amb la mateixa imatge ampliada i desenfocada.
   Així no es retalla mai el text d'un cartell, totes les targetes fan la
   mateixa mida i queda com si fos volgut. El fons és el mateix URL que la
   imatge, o sigui que el navegador la demana un sol cop. */
.fetge-ar-foto.es-sencera img{ object-fit:contain; }
/* Les notícies sense imatge destacada: la marca de l'associació en comptes
   d'un requadre buit, que semblava una imatge que no havia carregat. */
.fetge-ar-foto.es-buida{
	background-image:
		url("https://fetge.cat/wp-content/uploads/2026/07/Fetge-Logo-2026-HOR-1.png"),
		linear-gradient(150deg,#F5E3D3,#EFE0D2);
	background-repeat:no-repeat;
	background-position:center;
	background-size:52% auto, cover;
}
.fetge-ar-foto.es-sencera::before{
	content:''; position:absolute; inset:0;
	background-image:var(--fetge-fons); background-size:cover;
	background-position:center;
	filter:blur(22px) saturate(1.15) brightness(1.04);
	transform:scale(1.25);   /* que el desenfocat no deixi vores clares */
	opacity:.6;
}
.fetge-ar-cos{
	display:flex; flex-direction:column; gap:8px; flex:1;
	padding:20px 22px 22px;
}
.fetge-ar-data{
	font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
	color:var(--fetge-suau, #5C4F47);
}
.fetge-ar-titol{
	font-family:'Source Serif 4', Georgia, serif;
	font-size:18px; font-weight:600; line-height:1.3; color:var(--fetge-fosc);
	display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
	overflow:hidden;
}
.fetge-ar-resum{
	font-size:13.5px; line-height:1.6; color:var(--fetge-suau);
	display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
	overflow:hidden;
}
.fetge-ar-mes{
	font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
	color:var(--fetge-taronja-text, #B5470A); margin-top:auto; padding-top:8px;
}
.fetge-arxiu-buit{
	padding:48px 0; text-align:center; color:var(--fetge-suau); font-size:16px;
}

/* Paginació */
.fetge-paginacio{
	display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
	gap:8px; margin-top:44px;
}
.fetge-paginacio .page-numbers{
	display:inline-flex; align-items:center; justify-content:center;
	min-width:40px; height:40px; padding:0 12px;
	border:1px solid rgba(34,26,21,.14); border-radius:10px;
	font-size:14px; font-weight:600; color:var(--fetge-suau);
	text-decoration:none; transition:all .2s ease;
}
.fetge-paginacio .page-numbers:hover{
	border-color:var(--fetge-taronja-text, #B5470A); color:var(--fetge-taronja-text, #B5470A);
}
.fetge-paginacio .page-numbers.current{
	background:var(--fetge-taronja); border-color:var(--fetge-taronja-text, #B5470A);
	color:var(--fetge-fosc);
}
.fetge-paginacio .page-numbers.dots{ border:0; min-width:24px; }
.fetge-paginacio .prev, .fetge-paginacio .next{ font-weight:700; }

@media (max-width:600px){
	.fetge-ar-graella{ grid-template-columns:1fr; gap:16px; }
	.fetge-arxiu-cos .fetge-arxiu-dins{ padding-top:32px; padding-bottom:56px; }
	.fetge-ar-destacada-titol{ font-size:22px; }
}

/* La franja del butlletí, al final de l'arxiu */
.fetge-arxiu-butlleti{
	background:linear-gradient(140deg,#D4560E,#F58840);
	color:var(--fetge-crema);
}
.fetge-arxiu-butlleti .fetge-arxiu-dins{
	max-width:900px;
	padding-top:clamp(44px,5vw,64px); padding-bottom:clamp(44px,5vw,64px);
	display:flex; flex-wrap:wrap; gap:24px;
	align-items:center; justify-content:space-between;
}
.fetge-butlleti-text{ max-width:480px; }
.fetge-butlleti-titol{
	margin:0; font-family:'Source Serif 4', Georgia, serif;
	font-size:clamp(22px,2.6vw,30px); font-weight:600; line-height:1.25;
	color:var(--fetge-crema);
}
.fetge-butlleti-cos{
	margin:8px 0 0; font-size:15px; line-height:1.6;
	color:var(--fetge-crema);
}
.fetge-butlleti-boto{
	flex:0 0 auto;
	background:#FFE3C9; color:#7A3608;
	padding:15px 32px; border-radius:999px;
	font-weight:800; font-size:13px; letter-spacing:.06em;
	text-transform:uppercase; text-decoration:none;
	transition:background .2s ease;
}
.fetge-butlleti-boto:hover{ background:#FFF0E0; color:#7A3608; }

/* --- Fitxa de document PDF, plegable ----------------------------------
   Abans cada memòria era un visor obert a pàgina sencera. Quatre seguits a
   /pisos-dacollida/ (7.470 px) i vint-i-un a /transparencia/ (9.410 px).
   Ara es veu la llista sencera d'un cop i s'obre el que es vol llegir. */
.fetge-doc{
	background:#FFFFFF;
	border:1px solid rgba(34,26,21,.1);
	border-radius:14px;
	overflow:hidden;
	transition:border-color .2s ease, box-shadow .2s ease;
}
.fetge-doc + .fetge-doc{ margin-top:10px; }
.fetge-doc[open]{
	border-color:rgba(234,91,12,.3);
	box-shadow:0 10px 26px rgba(26,19,16,.09);
}
.fetge-doc-cap{
	display:flex; align-items:center; gap:14px;
	padding:16px 20px; cursor:pointer;
	list-style:none;
}
/* La fletxeta de sèrie de <details> fora: hi posem la nostra */
.fetge-doc-cap::-webkit-details-marker{ display:none; }
.fetge-doc-cap::marker{ content:''; }
.fetge-doc-cap:hover{ background:rgba(234,91,12,.04); }
.fetge-doc-icona{
	flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
	width:40px; height:40px; border-radius:11px;
	color:var(--fetge-taronja); background:rgba(234,91,12,.09);
}
.fetge-doc-text{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
.fetge-doc-titol{
	font-family:'Source Serif 4', Georgia, serif;
	font-size:16.5px; font-weight:600; line-height:1.3; color:var(--fetge-fosc);
}
.fetge-doc-meta{
	font-size:12px; font-weight:700; letter-spacing:.08em;
	text-transform:uppercase; color:var(--fetge-suau, #5C4F47);
}
.fetge-doc-accio{
	flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
	padding:8px 16px; border-radius:999px;
	border:1px solid rgba(234,91,12,.35);
	font-size:12px; font-weight:700; letter-spacing:.08em;
	text-transform:uppercase; color:var(--fetge-taronja-text, #B5470A);
	transition:all .2s ease;
}
.fetge-doc-accio::after{
	content:'▾'; font-size:11px; transition:transform .2s ease;
}
.fetge-doc[open] .fetge-doc-accio::after{ transform:rotate(180deg); }
.fetge-doc-cap:hover .fetge-doc-accio{
	background:var(--fetge-taronja); color:#FFFFFF; border-color:var(--fetge-taronja-text, #B5470A);
}
.fetge-doc-cos{
	padding:0 20px 20px;
	border-top:1px solid rgba(34,26,21,.07);
}
.fetge-doc-cos .pdfemb-viewer{ margin-top:16px; }
.fetge-doc-baixar{
	display:inline-flex; align-items:center; margin-top:14px;
	padding:12px 26px; border-radius:999px;
	background:var(--fetge-taronja); color:#FFFFFF; text-decoration:none;
	font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
	transition:background .2s ease;
}
.fetge-doc-baixar:hover{ background:#C44A05; color:#FFFFFF; }

@media (max-width:600px){
	.fetge-doc-cap{ flex-wrap:wrap; padding:14px 16px; gap:10px; }
	.fetge-doc-text{ flex:1 1 100%; order:2; }
	.fetge-doc-accio{ order:3; }
	.fetge-doc-titol{ font-size:15px; }
	.fetge-doc-cos{ padding:0 14px 16px; }
}

/* --- Contingut migrat del web antic -----------------------------------
   Les pàgines de servei porten el HTML tal com estava al web anterior. No
   es reescriu: és el text que va redactar l'entitat i s'ha de respectar.
   El que sí que es pot fer és presentar-lo com cal.

   Tres coses el delataven com a text enganxat:
     · Els subtítols no eren encapçalaments sinó <p><strong>Text?</strong></p>,
       o sigui text en negreta de la mateixa mida que la resta.
     · Les fotos anaven soltes dins d'un <p>, a la mida original i arrambades
       a l'esquerra, deixant forats de 400 px.
     · Les llistes tenien la pilota grisa per defecte del navegador. */
.fetge-contingut{ font-size:16px; line-height:1.72; color:var(--fetge-suau); }
.fetge-contingut p{ margin:0 0 18px; }

/* Un paràgraf que només conté negreta és, en realitat, un subtítol. */
.fetge-contingut p:has(> strong:only-child),
.fetge-contingut p:has(> b:only-child){
	font-family:'Source Serif 4', Georgia, serif;
	font-size:21px; line-height:1.3; color:var(--fetge-fosc);
	margin:38px 0 14px;
}
.fetge-contingut p:has(> strong:only-child) strong,
.fetge-contingut p:has(> b:only-child) b{ font-weight:600; }
/* El primer no ha de deixar un buit a dalt */
.fetge-contingut > p:first-child:has(> strong:only-child){ margin-top:0; }

/* Llistes: pilota taronja i menys aire entre punts */
.fetge-contingut ul{ margin:0 0 22px; padding:0; list-style:none; }
.fetge-contingut ul li{
	position:relative; padding-left:22px; margin-bottom:9px;
}
.fetge-contingut ul li::before{
	content:''; position:absolute; left:2px; top:.62em;
	width:6px; height:6px; border-radius:50%;
	background:var(--fetge-taronja);
}
.fetge-contingut ol{ margin:0 0 22px; padding-left:22px; }
.fetge-contingut ol li{ margin-bottom:9px; }

/* Imatges: centrades, a l'amplada de la columna i amb cantonada arrodonida.
   Les que són logotips es queden a la seva mida perquè no s'estiren. */
.fetge-contingut p:has(> img:only-child),
.fetge-contingut p:has(> a:only-child > img:only-child){
	display:flex; justify-content:center; margin:26px 0;
}
.fetge-contingut img{
	max-width:100%; height:auto; border-radius:14px; display:block;
}
.fetge-contingut a:has(> img){ display:block; line-height:0; }

/* Enllaços dins del text */
.fetge-contingut a:not(:has(> img)){
	color:var(--fetge-taronja-text, #B5470A); text-decoration:underline;
	text-underline-offset:3px; text-decoration-thickness:1px;
}
.fetge-contingut a:not(:has(> img)):hover{ color:#C44A05; }

/* Restes de l'editor antic: paràgrafs i encapçalaments que només contenen
   un espai dur, i salts de línia repetits. Ocupaven alçada sense dir res. */
.fetge-contingut p:empty,
.fetge-contingut h1:empty, .fetge-contingut h2:empty,
.fetge-contingut h3:empty, .fetge-contingut h4:empty{ display:none; margin:0; }
.fetge-contingut br + br{ display:none; }

/* Encapçalaments de veritat, quan n'hi ha */
.fetge-contingut h2, .fetge-contingut h3, .fetge-contingut h4{
	font-family:'Source Serif 4', Georgia, serif;
	font-weight:600; color:var(--fetge-fosc);
	margin:36px 0 12px; line-height:1.3;
}
.fetge-contingut h2{ font-size:26px; }
.fetge-contingut h3{ font-size:21px; }
.fetge-contingut h4{ font-size:18px; }

/* --- Capçalera al mòbil -----------------------------------------------
   Els tres blocs de la capçalera (marca, menú i el grup CA/ES + botó) es
   posaven un sota l'altre: 232 px d'alçada, un quart de la pantalla ocupat
   abans de començar a llegir. Aquí es tornen a posar en una sola fila. */
@media (max-width:900px){
	.fetge-capcalera > .e-con-inner{
		flex-direction:row !important;
		flex-wrap:nowrap !important;
		align-items:center !important;
		justify-content:space-between !important;
		gap:10px !important;
		padding-top:8px; padding-bottom:8px;
	}
	.fetge-capcalera > .e-con-inner > .e-child:first-child{
		flex:0 0 auto !important; width:142px !important; order:1;
	}
	.fetge-capcalera img{ max-height:44px; }

	/* El grup de la dreta va abans del menú perquè la hamburguesa quedi
	   a l'extrem, que és on la busca el dit. */
	.fetge-capcalera > .e-con-inner > .fetge-cta-capcalera{
		flex:0 0 auto !important; order:2; gap:8px !important;
	}
	.fetge-capcalera > .e-con-inner > .e-child:nth-child(2){
		flex:0 0 auto !important; order:3; width:auto !important;
	}
	.fetge-capcalera .elementor-button{
		padding:10px 16px !important; font-size:12px !important;
	}
	.fetge-idiomes{ font-size:11px; }
	.fetge-idioma{ padding:6px 10px; }
}

/* En pantalles molt estretes el botó de soci sobra a dalt: ja hi és al menú
   i al peu, i aquí només espitja la marca. */
@media (max-width:480px){
	.fetge-capcalera .fetge-cta-capcalera .elementor-widget-button{ display:none; }
	.fetge-capcalera > .e-con-inner > .e-child:first-child{ width:128px !important; }
	.fetge-capcalera img{ max-height:38px; }
}

/* --- Fitxa de testimoni ------------------------------------------------
   Segueix la maqueta de Claude Design. Els testimonis son entrades i no
   pagines, aixi que no els pinta Elementor: el marcatge el genera
   novamira-sandbox/testimoni.php i s'estila aqui. */
.fetge-tm-hero{
	background:linear-gradient(160deg,#1A1310 0%,#3A2317 60%,#EA5B0C 160%);
	color:var(--fetge-crema);
}
.fetge-tm-hero-dins{
	max-width:900px; margin:0 auto;
	padding:clamp(48px,6vw,80px) 24px clamp(120px,14vw,200px);
	display:flex; flex-direction:column; gap:18px;
	align-items:center; text-align:center;
}
.fetge-tm-epigraf{
	margin:0; font-size:12px; font-weight:700; letter-spacing:.14em;
	text-transform:uppercase; color:#FF9147;
}
.fetge-tm-epigraf a{ color:#FF9147; text-decoration:none; }
.fetge-tm-epigraf a:hover{ color:#FFA96B; }
.fetge-tm-hero h1{
	font-family:'Source Serif 4', Georgia, serif; font-weight:600;
	font-size:clamp(32px,4.4vw,54px); margin:0; line-height:1.12;
	color:var(--fetge-crema);
}
.fetge-tm-lead{
	margin:0; font-size:clamp(15px,1.5vw,18px);
	color:rgba(246,245,241,.75); max-width:620px; line-height:1.65;
}

/* La targeta del video puja i trepitja la capcalera */
.fetge-tm-video-fora{
	max-width:960px; margin:clamp(-170px,-11vw,-100px) auto 0;
	padding:0 24px; position:relative; z-index:2;
}
.fetge-tm-video{
	display:block; position:relative; aspect-ratio:16/9; overflow:hidden;
	border-radius:18px; border:1px solid rgba(34,26,21,.12);
	box-shadow:0 24px 60px rgba(26,19,16,.28); background:#1A1310;
}
.fetge-tm-video img{
	width:100%; height:100%; object-fit:cover; opacity:.85; display:block;
	transition:opacity .3s ease, transform .5s ease;
}
.fetge-tm-video:hover img{ opacity:1; transform:scale(1.02); }
.fetge-tm-vel{
	position:absolute; inset:0;
	background:linear-gradient(to top, rgba(26,19,16,.65), transparent 50%);
}
.fetge-tm-play{
	position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
	width:84px; height:84px; border-radius:50%;
	background:var(--fetge-taronja); color:var(--fetge-crema);
	display:flex; align-items:center; justify-content:center;
	font-size:30px; padding-left:6px;
	animation:fetgePlayPulse 2.4s infinite;
}
@keyframes fetgePlayPulse{
	0%,100%{ box-shadow:0 0 0 0 rgba(234,91,12,.5); }
	70%    { box-shadow:0 0 0 22px rgba(234,91,12,0); }
}
@media (prefers-reduced-motion:reduce){
	.fetge-tm-play{ animation:none; }
}
.fetge-tm-peu{
	position:absolute; bottom:20px; left:24px; color:var(--fetge-crema);
	font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.fetge-tm-sense-video{ cursor:default; }

.fetge-tm-cos{
	max-width:760px; margin:0 auto;
	padding:clamp(40px,5vw,64px) 24px 0;
	display:flex; flex-direction:column; gap:22px;
	font-size:17px; line-height:1.8; color:#41372F;
}
.fetge-tm-cos p{ margin:0; }
.fetge-tm-cita{
	margin:8px 0; padding:30px 32px 26px; position:relative;
	background:#FFFFFF; border:1px solid rgba(234,91,12,.25);
	border-radius:16px;
	font-family:'Source Serif 4', Georgia, serif;
	font-size:clamp(20px,2.4vw,26px); font-style:italic; line-height:1.5;
	color:var(--fetge-fosc);
}
.fetge-tm-cometa{
	position:absolute; top:-14px; left:24px; font-size:52px;
	color:var(--fetge-taronja); font-style:normal; line-height:1;
}
.fetge-tm-cita footer{
	font-family:'Albert Sans', system-ui, sans-serif; font-size:13px;
	font-style:normal; font-weight:700; letter-spacing:.08em;
	text-transform:uppercase; color:var(--fetge-taronja-text, #B5470A); margin-top:14px;
}

/* Cronologia */
.fetge-tm-cami{ max-width:760px; margin:0 auto; padding:clamp(40px,5vw,56px) 24px; }
.fetge-tm-epigraf-fosc{
	margin:0 0 24px; font-size:12px; font-weight:800; letter-spacing:.2em;
	text-transform:uppercase; color:var(--fetge-taronja-text, #B5470A);
}
.fetge-tm-fites{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.fetge-tm-fites li{ display:flex; gap:20px; }
.fetge-tm-punt{
	position:relative; flex:0 0 auto; width:14px; margin-top:4px;
	display:flex; flex-direction:column; align-items:center;
}
.fetge-tm-punt::before{
	content:''; width:14px; height:14px; border-radius:50%;
	background:var(--fetge-taronja); border:3px solid rgba(234,91,12,.25);
	flex:0 0 auto; box-sizing:border-box;
}
.fetge-tm-punt::after{
	content:''; width:2px; flex:1; background:rgba(234,91,12,.25);
}
.fetge-tm-fites li:last-child .fetge-tm-punt::after{ background:transparent; }
.fetge-tm-fita{ display:block; padding-bottom:28px; }
.fetge-tm-fita-tit{
	display:block; font-family:'Source Serif 4', Georgia, serif;
	font-size:18px; font-weight:600; color:var(--fetge-fosc);
}
.fetge-tm-fita-txt{
	display:block; font-size:14px; color:var(--fetge-suau);
	line-height:1.6; margin-top:4px;
}
.fetge-tm-tags{ display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 0; }
.fetge-tm-tags span{
	font-size:12px; font-weight:600; color:#B54708;
	background:rgba(255,145,71,.15); border-radius:999px; padding:6px 14px;
}

/* Crida a l'accio */
.fetge-tm-cta{ background:linear-gradient(140deg,#D4560E,#F58840); color:var(--fetge-crema); }
.fetge-tm-cta-dins{
	max-width:900px; margin:0 auto; padding:clamp(44px,5vw,64px) 24px;
	display:flex; flex-wrap:wrap; gap:24px;
	align-items:center; justify-content:space-between;
}
.fetge-tm-cta-tit{
	margin:0; font-family:'Source Serif 4', Georgia, serif;
	font-size:clamp(22px,2.6vw,30px); font-weight:600; line-height:1.25;
}
.fetge-tm-cta-txt{
	margin:8px 0 0; font-size:14.5px; color:rgba(246,245,241,.8); line-height:1.6;
	max-width:480px;
}
.fetge-tm-cta a{
	background:var(--fetge-crema); color:#1A1310; padding:15px 32px;
	border-radius:999px; font-weight:800; font-size:13px;
	letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
	transition:background .2s ease, color .2s ease;
}
.fetge-tm-cta a:hover{ background:#FFFFFF; color:var(--fetge-taronja-text, #B5470A); }

/* Altres histories */
.fetge-tm-altres{ max-width:1240px; margin:0 auto; padding:clamp(48px,6vw,80px) 24px; }
.fetge-tm-altres-cap{
	display:flex; align-items:baseline; justify-content:space-between;
	gap:16px; flex-wrap:wrap; margin-bottom:32px;
}
.fetge-tm-altres-cap h2{
	font-family:'Source Serif 4', Georgia, serif; font-weight:600;
	font-size:clamp(24px,2.8vw,34px); margin:0; color:var(--fetge-fosc);
}
.fetge-tm-altres-cap a{
	font-size:13px; font-weight:700; letter-spacing:.08em;
	text-transform:uppercase; color:var(--fetge-taronja-text, #B5470A); text-decoration:none;
}
.fetge-tm-graella{
	display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
	gap:20px; list-style:none; margin:0; padding:0;
}
.fetge-tm-graella li{ margin:0; display:flex; }
.fetge-tm-graella a{
	display:flex; flex-direction:column; width:100%;
	background:#FFFFFF; border:1px solid rgba(34,26,21,.09);
	border-radius:16px; overflow:hidden; color:var(--fetge-fosc);
	text-decoration:none; transition:box-shadow .25s ease, transform .25s ease;
}
.fetge-tm-graella a:hover{
	box-shadow:0 12px 32px rgba(26,19,16,.12); transform:translateY(-3px);
}
.fetge-tm-mini-foto{
	position:relative; display:block; aspect-ratio:16/10;
	overflow:hidden; background:#EDEBE3;
}
.fetge-tm-mini-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.fetge-tm-mini-play{
	position:absolute; bottom:12px; left:12px; width:36px; height:36px;
	border-radius:50%; background:rgba(234,91,12,.95); color:var(--fetge-crema);
	display:flex; align-items:center; justify-content:center; font-size:13px;
}
.fetge-tm-mini-nom{
	display:block; padding:16px 18px 18px;
	font-family:'Source Serif 4', Georgia, serif; font-size:18px; font-weight:600;
}

@media (max-width:600px){
	.fetge-tm-video-fora{ margin-top:-70px; padding:0 16px; }
	.fetge-tm-play{ width:60px; height:60px; font-size:22px; }
	.fetge-tm-peu{ font-size:11px; left:16px; bottom:14px; }
	.fetge-tm-cita{ padding:26px 22px 22px; }
	.fetge-tm-cta-dins{ padding:36px 20px; }
}

/* El video de la fitxa es un boto, no un enllac: es reprodueix aqui mateix.
   Cal treure-li l'aspecte de boto del navegador. */
button.fetge-tm-video{
	width:100%; padding:0; margin:0; cursor:pointer;
	font:inherit; color:inherit; text-align:left;
	-webkit-appearance:none; appearance:none;
}
button.fetge-tm-video:focus-visible{
	outline:3px solid var(--fetge-taronja); outline-offset:3px;
}
.fetge-tm-reproduint{
	position:relative; aspect-ratio:16/9; overflow:hidden;
	border-radius:18px; border:1px solid rgba(34,26,21,.12);
	box-shadow:0 24px 60px rgba(26,19,16,.28); background:#1A1310;
}
.fetge-tm-reproduint iframe{
	position:absolute; inset:0; width:100%; height:100%; border:0;
}

/* El boto de reproduir: triangle dibuixat, no el caracter ▶.
   El caracter el pinten els navegadors com a emoji —un quadrat blau amb la
   fletxa blanca— i quedava com si algu hi hagues enganxat el boto d'un
   altre web a sobre de la foto. */
.fetge-tm-play{
	padding-left:0;
	background:var(--fetge-taronja);
	box-shadow:0 8px 24px rgba(26,19,16,.3);
	transition:transform .25s ease, background .25s ease;
}
.fetge-tm-play svg{
	display:block; margin-left:3px;   /* el triangle es veu centrat una mica a la dreta */
}
.fetge-tm-video:hover .fetge-tm-play{
	background:#C44A05;
	transform:translate(-50%,-50%) scale(1.06);
}
.fetge-tm-mini-play svg{ display:block; margin-left:1px; }
.fetge-tm-peu{
	display:inline-flex; align-items:center; gap:7px;
}
.fetge-tm-peu::before{
	content:''; width:0; height:0;
	border-left:6px solid currentColor;
	border-top:4px solid transparent;
	border-bottom:4px solid transparent;
}

/* Detalls que faltaven, comuns a tots els formularis */
.fetge-formulari .wpcf7 form{ display:flex; flex-direction:column; gap:0; }
.fetge-formulari .wpcf7 p{ margin:0 0 16px; }
.fetge-formulari .wpcf7 label{ display:block; }
.fetge-formulari .wpcf7 .wpcf7-form-control-wrap{ display:block; width:100%; }
.fetge-formulari .wpcf7 select{
	appearance:none; -webkit-appearance:none;
	background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235C4F47' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat:no-repeat; background-position:right 14px center;
	padding-right:38px;
}
.fetge-formulari .wpcf7 input::placeholder,
.fetge-formulari .wpcf7 textarea::placeholder{
	color:var(--fetge-suau, #5C4F47); opacity:1;
}
/* Els avisos de validacio, amb l'aire que els cal */
.fetge-formulari .wpcf7 .wpcf7-not-valid-tip{
	font-size:13px; color:#B3261E; margin-top:6px;
}
.fetge-formulari .wpcf7 .wpcf7-response-output{
	margin:18px 0 0; padding:13px 16px; border-radius:10px;
	border:1px solid rgba(34,26,21,.18); font-size:14px;
}
.fetge-formulari .wpcf7 form.sent .wpcf7-response-output{
	border-color:#1B7A3D; background:rgba(27,122,61,.07);
}
.fetge-formulari .wpcf7 form.invalid .wpcf7-response-output,
.fetge-formulari .wpcf7 form.failed .wpcf7-response-output{
	border-color:#B3261E; background:rgba(179,38,30,.06);
}
/* Els consentiments: la casella al costat del text, no a sobre */
.fetge-formulari .fetge-consentiments{
	background:rgba(234,91,12,.05); border-radius:12px;
	padding:16px 18px; margin:6px 0 18px;
	display:flex; flex-direction:column; gap:12px;
}
.fetge-formulari .fetge-consentiments p{ margin:0; }
.fetge-formulari .fetge-consentiments .wpcf7-list-item{ margin:0; }
.fetge-formulari .fetge-consentiments label{
	display:flex; gap:11px; align-items:flex-start;
	font-weight:400; font-size:13.5px; line-height:1.6;
	color:var(--fetge-suau);
}
.fetge-formulari .fetge-consentiments input[type=checkbox]{
	width:18px; height:18px; margin:2px 0 0; flex:0 0 auto;
	accent-color:var(--fetge-taronja-text, #B5470A);
}
.fetge-formulari .fetge-consentiments .wpcf7-list-item-label{ font-weight:400; }

/* --- Graelles que es reparteixen soles --------------------------------
   Elementor deixa posar amplades en tant per cent, però l'amplada que hi
   poses val per a totes les mides de pantalla: al mòbil et queden dues
   columnes del 48% en comptes d'una de sencera. Amb graella i auto-fit el
   navegador ja hi posa les columnes que hi caben.

   Compte amb on va la graella: quan un contenidor d'Elementor és "boxed",
   els fills de veritat no pengen d'ell sinó d'un .e-con-inner que hi posa a
   dins per centrar el contingut. Si la graella es queda a fora, la fila
   sencera compta com un sol element i tot s'amuntega a l'esquerra. */
.fetge-graella-2:not(:has(> .e-con-inner)),
.fetge-graella-3:not(:has(> .e-con-inner)),
.fetge-graella-2 > .e-con-inner,
.fetge-graella-3 > .e-con-inner{
	display:grid !important;
	gap:20px !important;
	align-items:stretch;
}
.fetge-graella-2:not(:has(> .e-con-inner)),
.fetge-graella-2 > .e-con-inner{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.fetge-graella-3:not(:has(> .e-con-inner)),
.fetge-graella-3 > .e-con-inner{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
/* Les targetes de dins han d'omplir tota l'alçada de la seva casella */
.fetge-graella-2 .e-con,
.fetge-graella-3 .e-con{ height:100%; }

/* --- Suport psicològic -------------------------------------------------
   Dues peces amb JavaScript: la respiració guiada de la capçalera i les
   situacions que es poden marcar. La resta de la pàgina és Elementor. */
.fetge-psico-capcalera:not(:has(> .e-con-inner)),
.fetge-psico-capcalera > .e-con-inner{
	display:grid !important;
	grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
	gap:clamp(32px,5vw,64px) !important;
	align-items:center;
}

/* La respiració */
.fetge-respira{
	display:flex; align-items:center; justify-content:center;
	min-height:260px; width:100%;
	--respira-escala:1;
}
.fetge-respira-cercle{
	position:relative; width:min(300px,70vw); aspect-ratio:1/1;
	display:flex; align-items:center; justify-content:center;
}
.fetge-respira-anell{
	position:absolute; inset:0; width:100%; height:100%;
	transform:rotate(-90deg);   /* que el traç comenci a dalt */
}
.fetge-respira-anell circle{ fill:none; stroke-width:2.5; }
.fetge-respira-pista{ stroke:rgba(255,227,201,.25); stroke-width:2; }
.fetge-respira-progres{
	stroke:#FFE3C9; stroke-linecap:round;
	stroke-dasharray:295.3; stroke-dashoffset:295.3;
	transition:stroke-dashoffset 1s linear;
}
.fetge-respira-bombolla{
	position:absolute; inset:20%; border-radius:50%;
	background:rgba(255,227,201,.16);
	display:flex; flex-direction:column; align-items:center;
	justify-content:center; text-align:center; padding:14px;
	transform:scale(var(--respira-escala));
	transition:transform 1s ease-in-out;
}
.fetge-respira-bombolla p{ margin:0; color:var(--fetge-crema); }
.fetge-respira-fase{
	font-family:'Source Serif 4',Georgia,serif;
	font-size:19px; font-weight:600; line-height:1.35;
}
.fetge-respira-compte{
	font-family:'Source Serif 4',Georgia,serif;
	font-size:34px; font-weight:600; line-height:1.2; color:#FFE3C9;
	font-variant-numeric:tabular-nums;   /* que no ballin els números */
}
.fetge-respira-nota{
	font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
	color:#FFE3C9; margin-top:8px !important;
	line-height:1.5; text-wrap:balance;   /* que les dues línies quedin iguals */
}
/* Si el navegador demana menys moviment, es queda quiet i prou */
.fetge-respira-quiet .fetge-respira-bombolla,
.fetge-respira-quiet .fetge-respira-progres{ transition:none; }
@media (prefers-reduced-motion: reduce){
	.fetge-respira-bombolla,
	.fetge-respira-progres{ transition:none !important; }
}

/* Les situacions */
.fetge-sents{ width:100%; }
.fetge-sents-llista{
	list-style:none; margin:0; padding:0;
	display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
}
.fetge-sents-fitxa{
	font-family:'Albert Sans',sans-serif;
	font-weight:600; font-size:14.5px; line-height:1.3;
	padding:13px 24px; border-radius:999px; cursor:pointer;
	border:1.5px solid rgba(34,26,21,.18);
	background:var(--fetge-crema); color:#41372F;
	transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.fetge-sents-fitxa:hover{ border-color:var(--fetge-taronja-text, #B5470A); }
.fetge-sents-fitxa:focus-visible{
	outline:3px solid var(--fetge-taronja); outline-offset:3px;
}
.fetge-sents-fitxa[aria-pressed="true"]{
	background:var(--fetge-taronja); border-color:var(--fetge-taronja-text, #B5470A);
	color:var(--fetge-crema);
}
.fetge-sents-resposta{
	margin-top:32px; background:#fff;
	border:1px solid rgba(234,91,12,.3); border-radius:16px;
	padding:26px 30px; text-align:center;
	display:flex; flex-direction:column; align-items:center; gap:12px;
}
.fetge-sents-resposta[hidden]{ display:none; }
.fetge-sents-recompte{
	margin:0; max-width:520px;
	font-family:'Source Serif 4',Georgia,serif;
	font-size:21px; font-weight:600; line-height:1.35; color:var(--fetge-fosc);
}
.fetge-sents-peu{
	margin:0; max-width:480px;
	font-size:14px; line-height:1.6; color:var(--fetge-suau);
}
.fetge-sents-contacte{
	margin:6px 0 0; display:flex; gap:12px; flex-wrap:wrap;
	justify-content:center;
}
.fetge-sents-contacte a{
	padding:12px 26px; border-radius:999px;
	font-size:13px; font-weight:700; white-space:nowrap;
}
.fetge-sents-tel{
	background:var(--fetge-taronja); color:var(--fetge-crema);
}
.fetge-sents-tel:hover{ background:#C44A05; color:var(--fetge-crema); }
.fetge-sents-correu{
	border:1.5px solid var(--fetge-taronja); color:var(--fetge-taronja-text, #B5470A);
}
.fetge-sents-correu:hover{
	background:var(--fetge-taronja); color:var(--fetge-crema);
}

/* Les targetes numerades dels passos */
.fetge-pas-numero .elementor-heading-title{
	font-family:'Source Serif 4',Georgia,serif;
	font-size:52px; font-weight:600; line-height:1;
	color:rgba(234,91,12,.18);
}
/* La icona rodona de dalt de cada targeta de servei */
.fetge-psico-icona .elementor-heading-title{
	display:flex; align-items:center; justify-content:center;
	width:48px; height:48px; border-radius:13px;
	background:linear-gradient(150deg,rgba(234,91,12,.1),rgba(255,145,71,.2));
	font-family:'Source Serif 4',Georgia,serif;
	font-size:22px; font-weight:600; color:var(--fetge-taronja);
}
/* L'etiqueta de sota ("Procés continuat", "Sessions puntuals") */
.fetge-psico-marca .elementor-heading-title{
	display:inline-block;
	font-family:'Albert Sans',sans-serif;
	font-size:12px; font-weight:700; letter-spacing:.1em;
	text-transform:uppercase; color:#B54708;
	background:rgba(255,145,71,.15);
	border-radius:999px; padding:6px 14px;
}
/* Les psicòlogues */
.fetge-psico-qui{ display:flex; gap:14px; align-items:center; }
.fetge-psico-iniciales{
	width:52px; height:52px; border-radius:50%; flex:0 0 auto;
	background:linear-gradient(150deg,#F5E3D3,#EFE0D2);
	display:flex; align-items:center; justify-content:center;
	font-family:'Source Serif 4',Georgia,serif;
	font-size:19px; font-weight:600; color:#B54708;
}
.fetge-psico-qui p{ margin:0; }
.fetge-psico-nom{ font-weight:700; font-size:15px; color:var(--fetge-fosc); }
.fetge-psico-rol{ font-size:13px; color:var(--fetge-suau); }
.fetge-psico-nota{
	border-top:1px solid rgba(34,26,21,.08); padding-top:14px;
	font-size:13.5px; color:var(--fetge-suau); line-height:1.6;
}

/* --- La pàgina que no existeix, i la de resultats -----------------------
   El zero del mig es va dibuixant tot sol i torna a començar: és l'única
   cosa de la pàgina que sí que es regenera. Dura vuit segons, va lent a
   posta, i si el navegador demana menys moviment es queda quiet. */
.fetge-404-dins{
	max-width:900px; margin:0 auto; padding-left:24px; padding-right:24px;
}
.fetge-404-cap{
	background:linear-gradient(160deg,#9C450C 0%,#CE5810 55%,#F58840 145%);
	color:var(--fetge-crema);
	position:relative; overflow:hidden;
	text-align:center;
}
.fetge-404-cap::after{
	content:''; position:absolute; inset:0; pointer-events:none;
	background:radial-gradient(ellipse 60% 50% at 80% 10%,rgba(255,209,166,.28),transparent 60%);
}
.fetge-404-cap .fetge-404-dins,
.fetge-cerca-cap .fetge-404-dins{
	padding-top:clamp(52px,6vw,78px); padding-bottom:clamp(48px,6vw,72px);
	position:relative; z-index:1;
}
.fetge-404-marca{
	margin:0 0 18px; font-size:12.5px; font-weight:800; letter-spacing:.2em;
	text-transform:uppercase; color:#FFF0E2;
}
.fetge-404-xifra{
	display:flex; align-items:center; justify-content:center; gap:6px;
	margin:0 0 20px;
	font-family:'Source Serif 4', Georgia, serif;
	font-size:clamp(84px,13vw,150px); font-weight:600; line-height:1;
	color:var(--fetge-crema);
}
.fetge-404-zero{
	display:block; width:.78em; height:.78em; position:relative;
}
.fetge-404-zero svg{
	display:block; width:100%; height:100%;
	transform:rotate(-90deg);   /* que comenci a dalt */
}
.fetge-404-zero circle{ fill:none; stroke-width:7; }
.fetge-404-pista{ stroke:rgba(255,227,201,.22); }
.fetge-404-traç{
	stroke:#FFE3C9; stroke-linecap:round;
	stroke-dasharray:264;       /* 2·pi·42 */
	stroke-dashoffset:264;
	animation:fetge-regenera 8s ease-in-out infinite;
}
@keyframes fetge-regenera{
	0%   { stroke-dashoffset:264; }
	55%  { stroke-dashoffset:0; }
	78%  { stroke-dashoffset:0; }   /* es queda sencer una estona */
	100% { stroke-dashoffset:264; }
}
@media (prefers-reduced-motion: reduce){
	.fetge-404-traç{ animation:none; stroke-dashoffset:0; }
}
.fetge-404-cap h1,
.fetge-cerca-cap h1{
	overflow-wrap:anywhere;   /* que una cerca llarga sense espais no desbordi */
	font-family:'Source Serif 4', Georgia, serif;
	font-size:clamp(27px,3.4vw,42px); font-weight:600; line-height:1.15;
	margin:0 0 14px; color:var(--fetge-crema); text-wrap:balance;
}
.fetge-404-entrada{
	margin:0 auto; max-width:600px;
	font-size:16.5px; line-height:1.65; color:var(--fetge-crema);
}

.fetge-404-cos .fetge-404-dins,
.fetge-cerca-cos .fetge-404-dins{
	padding-top:52px; padding-bottom:84px;
}
.fetge-404-encap{
	font-family:'Source Serif 4', Georgia, serif;
	font-size:22px; font-weight:600; line-height:1.3;
	margin:0 0 16px; color:var(--fetge-fosc);
}
.fetge-404-encap-2{ margin-top:44px; }

/* El cercador */
.fetge-cercador{
	display:flex; gap:10px; flex-wrap:wrap;
}
.fetge-cercador input[type=search]{
	flex:1 1 260px; min-width:0;
	padding:14px 18px; border-radius:12px;
	/* La vora ha de tenir 3:1 amb el fons: és el que fa veure que hi ha un
	   camp per escriure. Amb el 18% d'opacitat no s'hi arribava. */
	border:1px solid rgba(34,26,21,.42);
	background:#fff; color:var(--fetge-fosc);
	font-family:'Albert Sans', sans-serif; font-size:15px;
	-webkit-appearance:none; appearance:none;
}
.fetge-cercador input[type=search]::placeholder{
	color:var(--fetge-suau); opacity:1;
}
.fetge-cercador input[type=search]:focus{
	outline:3px solid rgba(234,91,12,.35); outline-offset:1px;
	border-color:var(--fetge-taronja-text, #B5470A);
}
.fetge-cercador button{
	flex:0 0 auto; cursor:pointer; border:0;
	padding:14px 32px; border-radius:999px;
	background:var(--fetge-taronja); color:var(--fetge-fosc);
	font-family:'Albert Sans', sans-serif;
	font-size:13px; font-weight:800; letter-spacing:.06em;
	text-transform:uppercase;
	transition:background .2s ease, color .2s ease;
}
.fetge-cercador button:hover{
	background:var(--fetge-taronja-fosc); color:var(--fetge-crema);
}
.fetge-cercador button:focus-visible{
	outline:3px solid var(--fetge-taronja); outline-offset:3px;
}

/* Les seccions on anar */
.fetge-404-seccions{
	display:flex; flex-wrap:wrap; gap:10px;
}
.fetge-404-seccions a{
	display:inline-block; padding:11px 22px; border-radius:999px;
	border:1.5px solid rgba(34,26,21,.18);
	font-size:13.5px; font-weight:700; color:#41372F; text-decoration:none;
	transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.fetge-404-seccions a:hover{
	border-color:var(--fetge-taronja-text, #B5470A); color:var(--fetge-taronja-text, #B5470A);
	background:rgba(234,91,12,.05);
}
.fetge-404-noticies .fetge-noticies{
	grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
}
.fetge-404-peu{
	margin:48px 0 0; padding-top:22px;
	border-top:1px solid rgba(34,26,21,.1);
	font-size:13.5px; line-height:1.65; color:var(--fetge-suau);
	text-wrap:balance;
}

/* Els resultats */
.fetge-cerca-cap{
	background:linear-gradient(160deg,#9C450C 0%,#CE5810 55%,#F58840 145%);
	color:var(--fetge-crema); position:relative; overflow:hidden;
	text-align:center;
}
.fetge-cerca-cap::after{
	content:''; position:absolute; inset:0; pointer-events:none;
	background:radial-gradient(ellipse 60% 50% at 80% 10%,rgba(255,209,166,.28),transparent 60%);
}
.fetge-cerca-recompte{
	margin:0 0 22px; font-size:13.5px; font-weight:800;
	letter-spacing:.1em; text-transform:uppercase; color:#FFF0E2;
}
.fetge-cerca-llista{ list-style:none; margin:0; padding:0; }
.fetge-cerca-llista > li + li{ margin-top:12px; }
.fetge-cerca-fitxa{
	display:flex; flex-direction:column; gap:7px;
	background:#fff; border:1px solid rgba(34,26,21,.09);
	border-radius:14px; padding:22px 24px;
	text-decoration:none; color:var(--fetge-fosc);
	transition:box-shadow .2s ease, border-color .2s ease;
}
.fetge-cerca-fitxa:hover{
	border-color:rgba(234,91,12,.35);
	box-shadow:0 10px 26px rgba(26,19,16,.09);
	color:var(--fetge-fosc);
}
.fetge-cerca-dalt{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.fetge-cerca-tipus{
	font-size:10.5px; font-weight:800; letter-spacing:.12em;
	text-transform:uppercase; color:#7A3608;
	background:rgba(255,227,201,.9); border-radius:999px; padding:4px 11px;
}
.fetge-cerca-data{
	font-size:11px; font-weight:800; letter-spacing:.14em;
	text-transform:uppercase; color:var(--fetge-suau);
}
.fetge-cerca-titol{
	font-family:'Source Serif 4', Georgia, serif;
	font-size:19px; font-weight:600; line-height:1.3;
}
.fetge-cerca-resum{
	font-size:14px; line-height:1.65; color:var(--fetge-suau);
}
.fetge-cerca-buit{
	margin:0 0 26px; font-size:16px; line-height:1.65; color:var(--fetge-suau);
}

@media (max-width:600px){
	.fetge-404-cos .fetge-404-dins,
	.fetge-cerca-cos .fetge-404-dins{ padding-top:36px; padding-bottom:56px; }
	.fetge-cercador button{ width:100%; }
	.fetge-404-noticies .fetge-noticies{ grid-template-columns:1fr; }
}

/* --- Camps dels textos legals que ha de confirmar l'associació ---------
   Es marquen en groc a posta. Una dada identificativa equivocada a l'avís
   legal és pitjor que un buit visible: és el domicili on algú ha d'anar a
   reclamar. Quan l'entitat confirmi les dades, aquestes marques desapareixen
   i aquest bloc es pot esborrar. */
mark.fetge-confirmar{
	background:#FFF3C4; color:#6B5200;
	padding:1px 6px; border-radius:3px;
	font-style:normal; font-weight:600; font-size:.95em;
	box-decoration-break:clone; -webkit-box-decoration-break:clone;
}

/* --- Contingut històric ------------------------------------------------
   Avís per a activitats que ja s'han fet i que es conserven com a arxiu.
   És germà de .fetge-avis però en gris, i el motiu no és estètic: el taronja
   del web vol dir «fes alguna cosa» (botons, avisos pendents). Marcar l'arxiu
   en taronja convertiria mig web en una alarma. El gris diu «això és d'abans»
   i deixa el taronja per al que encara està viu. */
.fetge-historic{
	background:rgba(34,26,21,.05);
	border-left:3px solid var(--fetge-apagat);
	border-radius:0 10px 10px 0;
	padding:14px 18px; margin:0 0 24px;
	font-size:14px; line-height:1.65;
	color:var(--fetge-suau);
}
.fetge-historic strong{ color:var(--fetge-fosc); }
.fetge-historic a{ color:var(--fetge-enllac); }

/* --- La junta directiva ------------------------------------------------
   Cada persona de la junta té la seva història publicada al web. La fitxa
   hi enllaça: explica millor per què hi són que qualsevol descripció. */
.fetge-junta{
	list-style:none; margin:6px 0 0; padding:0;
	display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
	/* Les línies de separació les fan les vores de cada fitxa, no el fons de
	   la graella. Amb el fons, les caselles buides de l'última fila —la junta
	   té deu persones i la graella en posa tres per fila— es veien com un
	   requadre gris al final. */
	gap:0; background:#fff;
	border:1px solid rgba(34,26,21,.09); border-radius:14px; overflow:hidden;
}
.fetge-junta-fitxa{
	display:flex; gap:14px; align-items:center;
	background:#fff; padding:16px 18px; margin:0;
	border-right:1px solid rgba(34,26,21,.09);
	border-bottom:1px solid rgba(34,26,21,.09);
}
.fetge-junta-inicials{
	flex:0 0 auto; width:46px; height:46px; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	background:linear-gradient(150deg,#F5E3D3,#EFE0D2);
	font-family:'Source Serif 4',Georgia,serif;
	font-size:16px; font-weight:600; color:#B54708;
}
.fetge-junta-dades{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.fetge-junta-nom{
	font-weight:700; font-size:15px; line-height:1.3; color:var(--fetge-fosc);
}
.fetge-junta-carrec{
	font-size:11.5px; font-weight:800; letter-spacing:.1em;
	text-transform:uppercase; color:var(--fetge-suau);
}
.fetge-junta-mes{
	font-size:12.5px; font-weight:600; color:var(--fetge-enllac);
	text-decoration:none; margin-top:3px;
}
.fetge-junta-mes:hover{ color:var(--fetge-taronja-fosc); text-decoration:underline; }
@media (max-width:520px){
	.fetge-junta{ grid-template-columns:1fr; }
}

/* --- La referència a la font original ----------------------------------
   Hi ha notícies que resumeixen un article d'un mitjà. L'associació no en
   té l'autorització per republicar-lo sencer, o sigui que el web en fa un
   resum i cita l'original. La referència ha de ser llegible però no ha de
   competir amb el text: va en cos petit, separada per una línia, i amb
   l'enllaç en el color d'enllaç del web perquè es vegi que s'hi pot anar. */
.fetge-font{
	margin:32px 0 0; padding-top:16px;
	border-top:1px solid rgba(34,26,21,.12);
	font-size:14px; line-height:1.6; color:var(--fetge-suau);
}
.fetge-font strong{ color:var(--fetge-fosc); }
.fetge-font em{ font-style:italic; }
.fetge-font a{
	color:var(--fetge-enllac); text-decoration:underline;
	text-underline-offset:2px; word-break:break-word;
}

/* --- Els passos d'un procés --------------------------------------------
   El fa servir la pàgina de voluntariat per explicar què passa des que algú
   omple el formulari fins que fa la primera activitat. És una <ol>: l'ordre
   hi és de debò i qui fa servir un lector de pantalla ha de sentir «1 de 5».
   El número gran és decoratiu (aria-hidden) perquè si no es llegiria dues
   vegades, un cop pel marcador de la llista i un altre pel <span>. */
.fetge-passos{
	list-style:none; margin:22px 0 0; padding:0;
	display:flex; flex-direction:column; gap:0;
	counter-reset:fetge-pas;
}
.fetge-pas{
	display:grid; grid-template-columns:52px 1fr; gap:18px;
	padding:20px 0; align-items:start;
	border-top:1px solid rgba(34,26,21,.10);
}
.fetge-pas:first-child{ border-top:0; padding-top:4px; }
.fetge-pas-num{
	display:flex; align-items:center; justify-content:center;
	width:40px; height:40px; border-radius:50%;
	background:var(--fetge-taronja,#EA5B0C); color:var(--fetge-crema,#F6F5F1);
	font-weight:800; font-size:16px; line-height:1;
}
.fetge-pas-cos{ display:block; }
.fetge-pas-titol{
	display:block; font-family:'Source Serif 4',Georgia,serif;
	font-weight:600; font-size:19px; line-height:1.3;
	color:var(--fetge-fosc,#221A15); margin:0 0 4px;
}
.fetge-pas-text{
	display:block; font-size:15px; line-height:1.65;
	color:var(--fetge-suau,#5C4F47);
}
@media (max-width:520px){
	.fetge-pas{ grid-template-columns:40px 1fr; gap:14px; }
	.fetge-pas-num{ width:32px; height:32px; font-size:14px; }
	.fetge-pas-titol{ font-size:17px; }
}

/* --- La capçalera, amb el menú de set seccions -------------------------
   L'11 d'agost el menú va passar de vuit entrades curtes («Serveis»,
   «Notícies») a set de llargues («Coneixement i divulgació»,
   «Sensibilització», «T'acompanyem»). El contenidor de la capçalera és
   «boxed», o sigui que el contingut està limitat en amplada: el menú no hi
   cabia i es dibuixava a sobre del logotip.

   Tres coses, en aquest ordre:
   1. La capçalera deixa de limitar-se a l'amplada del cos. És una barra de
      navegació: ha de poder fer servir tot l'ample de la finestra.
   2. La columna del logotip no s'encongeix mai; la del menú, sí.
   3. El menú redueix cos i separació a mesura que la finestra s'estreny,
      fins que ElementsKit passa a l'hamburguesa als 1024 px. Entre 1025 i
      1500 px és on el problema es veia. */
.fetge-capcalera > .e-con-inner{
	max-width:1560px;
	flex-wrap:nowrap; align-items:center; gap:20px;
}
.fetge-capcalera > .e-con-inner > .e-con:first-child{ flex:0 0 auto; }
.fetge-capcalera > .e-con-inner > .e-con:last-child{
	flex:1 1 auto; min-width:0; justify-content:flex-end;
}
.fetge-capcalera .elementskit-navbar-nav{ flex-wrap:nowrap; }
.fetge-capcalera .elementskit-navbar-nav > li > a{
	white-space:nowrap;
	padding-left:9px !important; padding-right:9px !important;
	font-size:14px !important;
}
@media (max-width:1500px){
	.fetge-capcalera .elementskit-navbar-nav > li > a{
		font-size:13px !important;
		padding-left:6px !important; padding-right:6px !important;
	}
	.fetge-cta-capcalera .elementor-button{
		padding:11px 16px !important; font-size:12px !important;
	}
}
@media (max-width:1240px){
	.fetge-capcalera .elementskit-navbar-nav > li > a{
		font-size:12.5px !important;
		padding-left:4px !important; padding-right:4px !important;
		letter-spacing:0 !important;
	}
	.fetge-capcalera > .e-con-inner{ gap:12px; }
}
/* Per sota dels 1024 mana l'hamburguesa i tot això no s'aplica. */
@media (max-width:1024px){
	.fetge-capcalera > .e-con-inner{ flex-wrap:wrap; max-width:100%; }
	.fetge-capcalera .elementskit-navbar-nav > li > a{
		font-size:15px !important; padding-left:0 !important;
		padding-right:0 !important; white-space:normal;
	}
}

/* --- L'hamburguesa, abans dels 1024 px ---------------------------------
   Amb set seccions de nom llarg («Coneixement», «Sensibilització»,
   «T'acompanyem»…) el menú horitzontal no cap per sota d'uns 1.280 px. El
   <ul> és més ample que la seva columna, i com que la columna està alineada
   a la dreta, el que sobra surt cap a l'esquerra i es dibuixa a sobre del
   logotip. Reduir el cos de lletra ja no arregla res: a 1.100 px es perdia
   la primera secció sencera.

   Per sota de 1.240 px, doncs, s'avança el que ElementsKit fa als 1.024:
   surt l'hamburguesa i el menú passa a ser un panell lateral. Les regles
   són les seves; només canvia el punt on s'apliquen. La classe d'obertura
   és .active, comprovada al full d'estils del connector: si es canviés,
   el panell s'obriria i no es veuria. */
@media (min-width:1025px) and (max-width:1240px){
	.fetge-capcalera .elementskit-menu-hamburger{ display:block !important; }

	.fetge-capcalera .elementskit-navbar-nav-default.elementskit-menu-offcanvas-elements{
		position:fixed; top:0; left:-100vw; height:100%;
		width:100%; max-width:350px; z-index:100;
		background:var(--fetge-crema,#F6F5F1);
		overflow:hidden auto;
		display:flex; flex-direction:column-reverse; justify-content:flex-end;
		transition:left .4s cubic-bezier(.6,.1,.68,.53);
		box-shadow:0 10px 40px rgba(34,26,21,.18);
	}
	.fetge-capcalera .elementskit-menu-offcanvas-elements.active{ left:0; }

	.fetge-capcalera .elementskit-nav-identity-panel{ display:block; }
	.fetge-capcalera .elementskit-navbar-nav{
		flex-direction:column; align-items:stretch; flex-wrap:wrap; width:100%;
	}
	.fetge-capcalera .elementskit-navbar-nav > li{ width:100%; }
	.fetge-capcalera .elementskit-navbar-nav > li > a{
		font-size:15px !important; white-space:normal;
		padding:13px 20px !important; letter-spacing:.01em !important;
	}
	.fetge-capcalera .elementskit-navbar-nav > li > a::after{ display:none; }
}

/* Les tres barres de l'hamburguesa. ElementsKit només les pinta dins del
   seu propi punt de tall (1.024 px); com que aquí l'avancem als 1.240, el
   botó sortia com un rectangle buit. */
@media (min-width:1025px) and (max-width:1240px){
	.fetge-capcalera button.elementskit-menu-hamburger{
		background:transparent;
		border:1px solid rgba(34,26,21,.22);
		border-radius:8px; padding:10px 9px; width:44px;
		cursor:pointer;
	}
	.fetge-capcalera button.elementskit-menu-hamburger:hover{
		border-color:var(--fetge-taronja,#EA5B0C);
	}
	.fetge-capcalera .elementskit-menu-hamburger-icon{
		display:block; width:100%; height:2px; border-radius:2px;
		background-color:var(--fetge-fosc,#221A15);
	}
	.fetge-capcalera .elementskit-menu-hamburger-icon + .elementskit-menu-hamburger-icon{
		margin-top:5px;
	}
	.fetge-capcalera button.elementskit-menu-hamburger:hover .elementskit-menu-hamburger-icon{
		background-color:var(--fetge-taronja,#EA5B0C);
	}
	/* El botó de tancar el panell */
	.fetge-capcalera button.elementskit-menu-close{
		background:transparent; border:0; font-size:24px;
		color:var(--fetge-fosc,#221A15); padding:14px 18px; cursor:pointer;
	}
}

/* --- El destacat de final de pàgina ------------------------------------
   Els textos que ens ha passat l'associació acaben, en unes quantes
   pàgines, amb una frase que resumeix la idea: «Les tres primeres sessions
   són finançades per l'Associació, perquè demanar ajuda no sigui mai una
   barrera». No és una nota al peu ni un avís: és el rematall, i ha de
   llegir-se com a tal. Per això va en serif i amb la barra taronja, com les
   cites, i no dins d'una caixa d'avís. */
.fetge-destacat{
	margin:14px 0 0; padding:20px 0 20px 24px;
	border-left:3px solid var(--fetge-taronja,#EA5B0C);
	font-family:'Source Serif 4',Georgia,serif;
	font-size:19px; line-height:1.55; color:var(--fetge-fosc,#221A15);
}
@media (max-width:560px){
	.fetge-destacat{ font-size:17px; padding-left:18px; }
}

/* --- Que el panell del menú s'obri de debò -----------------------------
   A 390 px, clicar l'hamburguesa afegia la classe .active al panell però
   el panell es quedava a left:-100vw, o sigui tancat. La regla d'obertura
   d'ElementsKit (.elementskit-menu-offcanvas-elements.active{left:0}) té la
   mateixa especificitat que la que el manté tancat i perd per ordre de
   full: el menú es podia clicar i no passava res.

   Comprovat al navegador: la classe s'afegia, el left no canviava.

   Aquesta regla té més especificitat (hi afegim .fetge-capcalera) i cobreix
   tots dos punts de tall: el nostre, dels 1.240 avall, i el d'ElementsKit,
   dels 1.024 avall. */
@media (max-width:1240px){
	/* El left no s'hi pot fer servir: hi ha una regla d'ElementsKit que el
	   guanya fins i tot contra un !important nostre (comprovat al navegador:
	   la classe .active s'aplica, la visibilitat respon, i el left es queda
	   a -100vw). En comptes de barallar-nos amb la cascada, el left es fixa
	   a 0 i qui obre i tanca el panell és el transform, que no el toca ningú
	   més. De propina, el transform s'anima a la GPU i va més fi. */
	.fetge-capcalera .elementskit-menu-offcanvas-elements{
		left:0 !important;
		transform:translateX(-101%);
		transition:transform .35s cubic-bezier(.4,0,.2,1);
	}
	.fetge-capcalera .elementskit-menu-offcanvas-elements.active{
		transform:translateX(0);
	}
	@media (prefers-reduced-motion:reduce){
		.fetge-capcalera .elementskit-menu-offcanvas-elements{ transition:none; }
	}
	/* I mentre està tancat, que no atrapi el teclat: qui tabula no ha de
	   passar per 22 enllaços que no es veuen. */
	.fetge-capcalera .elementskit-menu-offcanvas-elements:not(.active){
		visibility:hidden;
	}
	.fetge-capcalera .elementskit-menu-offcanvas-elements.active{
		visibility:visible;
	}

	/* --- I que un cop obert es vegi alguna cosa -----------------------
	   El panell s'obria, sí, però sortia com una franja blanca de 74 px
	   tapant la capçalera: el logotip i el selector d'idioma quedaven a
	   sota i la llista de 22 enllaços no es veia enlloc.

	   Comprovat al navegador: el panell mesurava 350x74, la <ul> de dins
	   tenia ALÇADA ZERO amb els seus 22 <li> de 46 px cadascun a dintre,
	   i el logotip continuava al seu lloc (x=70, y=18) però amagat
	   darrere el panell.

	   Dues causes, i totes dues s'han d'arreglar:

	   1. ElementsKit posa height:100% al panell. Sobre un element
	      position:fixed això hauria de ser l'alçada de la finestra, i
	      aquí resolia a 74 px —l'alçada de la capçalera—. Sigui quin
	      sigui el motiu de la cascada, un percentatge en un panell fix és
	      fràgil: es fixa en unitats de finestra i s'acaba la discussió.
	      Es fan servir dvh, que als mòbils descompta la barra del
	      navegador, amb vh de recanvi per als que no el coneixen.

	   2. El panell és flex en columna i la <ul> hi entra amb flex-shrink
	      a 1: com que el contenidor no tenia alçada, la llista
	      s'encongia fins a zero. Amb flex:1 1 auto agafa l'espai que
	      queda, i amb overflow-y:auto la llista llarga es pot recórrer en
	      pantalles baixes en comptes de sortir per sota. */
	.fetge-capcalera .elementskit-menu-offcanvas-elements{
		height:100vh !important;
		height:100dvh !important;
		max-height:100vh;
		max-height:100dvh;
	}
	.fetge-capcalera .elementskit-menu-offcanvas-elements > .elementskit-navbar-nav{
		flex:1 1 auto;
		overflow-y:auto;
		overscroll-behavior:contain;
	}

	/* Els dos botons sortien magenta —rgb(204,51,102), que és el valor per
	   defecte d'ElementsKit i no té res a veure amb la casa—. Sobre el crema
	   de la capçalera cridava més que el botó de fer-se soci, que és el que
	   de debò hi ha de cridar. I les tres ratlles de l'hamburguesa anaven a
	   negre al 50%, que sobre el magenta gairebé no es veien. */
	.fetge-capcalera .elementskit-menu-hamburger,
	.fetge-capcalera .elementskit-menu-close{
		background:transparent !important;
		border:1px solid rgba(34,26,21,.25) !important;
		color:var(--fetge-fosc,#221A15) !important;
		border-radius:8px;
	}
	.fetge-capcalera .elementskit-menu-hamburger .elementskit-menu-hamburger-icon{
		background-color:var(--fetge-fosc,#221A15) !important;
	}
	.fetge-capcalera .elementskit-menu-hamburger:hover,
	.fetge-capcalera .elementskit-menu-close:hover{
		border-color:var(--fetge-taronja,#EA5B0C) !important;
	}
	/* Que es vegi per on va el teclat: sense això, qui navega tabulant no
	   sap mai on és. */
	.fetge-capcalera .elementskit-menu-hamburger:focus-visible,
	.fetge-capcalera .elementskit-menu-close:focus-visible{
		outline:2px solid var(--fetge-taronja,#EA5B0C);
		outline-offset:2px;
	}

	/* Amb el panell obert, el cos no s'ha de poder moure de costat: el
	   panell fa 350 px i en una pantalla de 390 el marge dret provocava
	   una barra de desplaçament horitzontal. */
	body:has(.elementskit-menu-offcanvas-elements.active){
		overflow-x:hidden;
	}
}

/* --- El logotip al mòbil ----------------------------------------------
   No era petit: estava DESCENTRAT. A 390 px la capçalera comença a x=20 i
   el logotip començava a x=70, o sigui amb 50 px de buit a l'esquerra i
   només 77 px d'amplada. Enmig de tant blanc semblava que no hi fos.

   Es fa dues coses: enganxar-lo al marge esquerre —que és on el busca
   tothom— i pujar-lo fins a 112 px. Entre el logotip i el selector
   d'idioma hi queden uns 35 px de respir, prou perquè no es toquin.
   El punt de tall és el mateix que el de l'hamburguesa: mentre hi hagi
   menú desplegable, la capçalera va en aquesta disposició. */
@media (max-width:1240px){
	.fetge-capcalera .elementor-widget-image{
		text-align:left;
	}
	.fetge-capcalera .elementor-widget-image img{
		width:112px !important;
		max-width:112px !important;
		height:auto;
	}
}
@media (max-width:400px){
	/* En les pantalles més estretes, el selector d'idioma i l'hamburguesa
	   no es poden encongir més, o sigui que qui cedeix és el logotip. */
	.fetge-capcalera .elementor-widget-image img{
		width:96px !important;
		max-width:96px !important;
	}
}


/* ------------------------------------------------------------------
   ARTICLES DE DIVULGACIO
   Les dues primeres NO s'han de veure mai en un article publicat: son
   marques de treball. Es pinten cridaneres a proposit, perque si algu
   se'n descuida abans de publicar es vegi de seguida i no passi.
   ------------------------------------------------------------------ */

.fetge-nota-interna,
.fetge-cal-omplir{
	border:2px dashed #B5470A;
	background:#FFF8E6;
	color:#5C4F47;
	padding:14px 18px;
	margin:0 0 22px;
	border-radius:6px;
	font-size:.94em;
	line-height:1.55;
}
.fetge-nota-interna strong,
.fetge-cal-omplir strong{ color:#B5470A; }
.fetge-nota-interna::before{
	content:"NOMES PER A L'EQUIP";
	display:block;
	font-size:.72em;
	letter-spacing:.14em;
	font-weight:700;
	color:#B5470A;
	margin-bottom:6px;
}
.fetge-cal-omplir{ border-color:#5C4F47; }
.fetge-cal-omplir::before{
	content:"FALTA INFORMACIO";
	display:block;
	font-size:.72em;
	letter-spacing:.14em;
	font-weight:700;
	color:#5C4F47;
	margin-bottom:6px;
}
/* Xarxa de seguretat: si una peca surt publicada amb la marca posada,
   almenys queda evident a la pantalla de qui la llegeixi. */
@media print{ .fetge-nota-interna, .fetge-cal-omplir{ display:none; } }

/* El requadre que revisa el Consell dins d'una historia de vida. Va
   visualment separat del relat perque el lector vegi que son dues veus
   diferents: el que explica la persona i el que diu la medicina. */
.fetge-requadre-medic{
	border-left:4px solid #EA5B0C;
	background:#F6F5F1;
	padding:20px 24px;
	margin:32px 0;
	border-radius:0 10px 10px 0;
}
.fetge-requadre-medic h3{
	margin:0 0 12px;
	font-size:1.15em;
	color:#221A15;
}
.fetge-requadre-medic h3::before{
	content:"";
	display:inline-block;
	width:8px; height:8px;
	background:#EA5B0C;
	border-radius:50%;
	margin-right:10px;
	vertical-align:middle;
}
.fetge-requadre-medic ul{ margin-bottom:0; }
.fetge-requadre-medic > *:last-child{ margin-bottom:0; }

/* Les fonts. Petites, seleccionables i amb l'enllac visible: qui les
   vulgui comprovar ha de poder copiar-les sense lluitar-hi. */
.fetge-fonts{
	font-size:.88em;
	line-height:1.5;
	color:#5C4F47;
	padding-left:1.4em;
	text-indent:-1.4em;
	margin:0 0 10px;
}
.fetge-fonts a{ word-break:break-word; }

.fetge-peu-article{
	margin-top:36px;
	padding-top:14px;
	border-top:1px solid rgba(34,26,21,.14);
	font-size:.9em;
	color:#5C4F47;
}


/* ------------------------------------------------------------------
   CONSELL CIENTIFIC
   El president de l'entitat va visualment separat de la resta: es
   l'unic que no es sanitari i no revisa contingut clinic, i barrejar-lo
   a la mateixa llista es el que fa que un comite d'unes jornades sembli
   un consell revisor.
   ------------------------------------------------------------------ */

.fetge-membre{
	border-left:3px solid #EA5B0C;
	background:#F6F5F1;
	padding:14px 20px;
	margin:0 0 12px;
	border-radius:0 8px 8px 0;
}
.fetge-membre-nom{
	margin:0 0 3px;
	font-weight:700;
	font-size:1.05em;
	color:#221A15;
}
.fetge-membre-carrec{
	margin:0;
	font-size:.94em;
	line-height:1.5;
	color:#5C4F47;
}
.fetge-membre-nota{
	margin:8px 0 0;
	font-size:.88em;
	font-style:italic;
	color:#5C4F47;
}
.fetge-membre-entitat{
	border-left-color:#9A8F87;
	margin-top:22px;
}


/* ------------------------------------------------------------------
   TITOLS AL MOBIL
   A la portada castellana, «Acompañamiento, donación y sensibilización
   desde 1995» sortia a cos 40 dins d'una caixa de 257 px: la primera
   paraula, ella sola, media 355 px. El titol es desbordava 98 px i
   arrossegava la pagina de costat. En catala no passava perque
   «Acompanyament» es mes curta, i per aixo nomes es veia en castella.

   Es fan dues coses, i les dues fan falta:

   1. CAP PARAULA POT DESBORDAR, MAI. Amb overflow-wrap la paraula es
      parteix abans que sortir de la caixa. Va sense consulta d'amplada
      perque val per a qualsevol titol que algu escrigui d'ara endavant,
      i el castella i el catala en tenen de llargues: «sensibilitzacio»,
      «trasplantament», «descompensacio». Aixo es la xarxa de seguretat.

   2. I QUE A MES ES VEGI BE. Un titular a cos 60 en una pantalla de 360
      px no cap encara que es parteixi: surten tres paraules per linia
      trencades per la meitat. Amb clamp() la mida puja i baixa amb la
      pantalla i es queda entre uns limits raonables. Als 360 px, l'h1
      passa de 60 a 36 px i l'h2 de 40 a 27, que es on «Acompañamiento,»
      ja hi cap sencera.

   El clamp nomes actua per sota de 600 px: el disseny de sobretaula no
   es toca. */

h1, h2, h3, h4, h5, h6,
.elementor-heading-title{
	overflow-wrap:break-word;
	hyphens:auto;
}

@media (max-width:600px){
	h1, .elementor-widget-heading h1.elementor-heading-title{
		font-size:clamp(1.9rem, 10vw, 3.2rem) !important;
		line-height:1.12 !important;
	}
	h2, .elementor-widget-heading h2.elementor-heading-title{
		font-size:clamp(1.45rem, 7.5vw, 2.4rem) !important;
		line-height:1.2 !important;
	}
	h3, .elementor-widget-heading h3.elementor-heading-title{
		font-size:clamp(1.2rem, 5.6vw, 1.8rem) !important;
		line-height:1.3 !important;
	}
	h4, .elementor-widget-heading h4.elementor-heading-title{
		font-size:clamp(1.05rem, 4.6vw, 1.4rem) !important;
		line-height:1.35 !important;
	}
}


/* ------------------------------------------------------------------
   LA CAPCALERA AL MOBIL: TRES COSES XAFADES
   Les tres es veien aixafades i cadascuna per un motiu diferent.

   1. EL LOGOTIP estava DEFORMAT de debo, no era impressio: proporcio
      real 2,021 i pintada 2,526. Es dibuixava a 96x38 quan, per l'ample
      que te, li tocaven 96x47,5. El motiu es meu: a la regla d'ahir vaig
      posar l'amplada amb !important i l'alcada sense, o sigui que
      l'amplada guanyava i l'alcada la seguia manant una altra regla.

   2. LES TRES RATLLES de l'hamburguesa feien 1 px. En una pantalla de
      mobil aixo es un pel, i el boto sencer feia 28,6 px d'alt, per sota
      dels 44 que es considera el minim per tocar amb el dit sense
      fallar.

   3. ELS BOTONS D'IDIOMA els vaig xafar jo: .fetge-selector-idioma tenia
      line-height:0 —el truc de sempre per treure l'espai en blanc entre
      elements en linia— i aixo s'hereta. Amb 11 px de lletra i 6 px de
      farciment a dalt i a baix, el boto quedava en 12 px d'alt en comptes
      de 23. El line-height:0 es queda al contenidor, que es on fa
      falta, i es torna a posar als botons, que es on feia mal.
   ------------------------------------------------------------------ */

/* 1. El logotip, amb la seva proporcio.

   El height:auto no n'hi havia prou i va costar de veure: qui aixafava el
   logotip no era l'alcada sino un MAX-HEIGHT de 38 px. Amb height:auto el
   navegador calculava els 47,5 px que toquen i despres el max-height els
   retallava a 38, o sigui que la imatge quedava comprimida. Comprovat al
   navegador: llevant nomes el max-height, l'alcada torna sola a 47,5.

   Va sense consulta d'amplada perque la proporcio d'un logotip no es una
   questio de mida de pantalla: no s'ha de deformar mai. */
.fetge-capcalera .elementor-widget-image img{
	height:auto !important;
	max-height:none !important;
}

/* 3. Els botons d'idioma respiren i es poden tocar */
.fetge-selector-idioma .fetge-idioma,
.fetge-idiomes .fetge-idioma{
	line-height:1.2;
}

@media (max-width:1240px){
	/* 2. Les ratlles de l'hamburguesa, visibles i amb prou area de toc */
	.fetge-capcalera .elementskit-menu-hamburger{
		min-width:44px;
		min-height:44px;
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:center;
	}
	.fetge-capcalera .elementskit-menu-hamburger .elementskit-menu-hamburger-icon{
		height:2px !important;
		width:22px !important;
		border-radius:2px;
	}
	.fetge-capcalera .elementskit-menu-hamburger .elementskit-menu-hamburger-icon + .elementskit-menu-hamburger-icon{
		margin-top:5px;
	}
	.fetge-capcalera .elementskit-menu-hamburger .elementskit-menu-hamburger-icon{
		margin-bottom:0 !important;
	}

	/* 3 bis. I el selector, amb area de toc de debo */
	.fetge-capcalera .fetge-idioma{
		padding:9px 14px;
		min-height:36px;
		display:flex;
		align-items:center;
	}
}