/* @override 
	https://websdev.communikt.net/lanakovacevic/wp-content/themes/lanakovacevic/style.css?* */

/*
 Theme Name:   LANA KOVACEVIC
 Theme URI:    https://communikt.com
 Description:  Tema hijo de Bricks para la web de Lana Kovačević Kuč.
 Author:       Albert Calzada
 Author URI:   https://communikt.com
 Template:     bricks
 Version:      1.0.0
 Text Domain:  lanakovacevic
*/


:where(p) {
  margin: 0 0 0.8em;
}
.brx-body {
	/*min-height: 100dvh;*/
}

:where(p:last-child) {
  margin-bottom: 0;
}

#wp-admin-bar-editor_mode {
	display: none !important;
}

.subratllat_fi {
	text-decoration-line: underline;
text-decoration-thickness: 0.9px;
text-underline-offset: 5px;
}
.subratllat_fi2 {
	text-decoration-line: underline;
text-decoration-thickness: 1.25px;
text-underline-offset: 3px;
}

* {
	text-decoration-thickness: 0.7px !important;
	text-underline-offset: 2px;
}


a .link_subratllat, a.link_subratllat, .link_subratllat a {
	text-decoration: underline;
}

@layer bricks {
  .alignwide {
    margin-left: 0px;
    max-width: 100%;
    position: relative;
    width: 120%;
  }
}

/* FORM CONTACTO */
.gform_required_legend {
	display: none;
}
/* deshabilitar chrome estils formularis */


input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 0px white inset !important;
	box-shadow: none !important;
	outline: none !important;
	
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
 -webkit-box-shadow: 0 0 0 0px white inset !important;
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: none !important;
  outline: none !important;
  
}
:focus, :focus-visible{
   -webkit-box-shadow: 0 0 0 0px white inset !important;
	box-shadow: none !important;
	outline: none !important;
	/*border-color: #000 !important;*/

}

.gform_wrapper.gravity-theme input:not([type="radio"]):not([type="checkbox"]):not([type="image"]):not([type="file"]) {
    /*line-height: 1 !important;*/

}

.form_lana div.gform_fields input, .form_lana div.gform_fields textarea, .form_lana div.gform_fields select {
		border: 1px solid #cebba5;
  border-radius: 2px;
  transition: all 0.3s ease-in-out;
  align-items: center;
  display: inline-flex;
  gap: 10px;
  justify-content: center;
  letter-spacing: .5px;
  text-align: left;
  width: 100%;
  background-color: #fff;
  line-height: 2em;
  padding-top: 2px;
	padding-bottom: 2px;
  font-size: 16px;
}
.form_lana div.gform_fields input.large , .form_lana div.ginput_complex input {
  height: 45px; -webkit-border-radius: 10px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 10px;
}
.form_lana.form_lana_contact div.gform_fields input.large {

  background-color: #F4F4F4;
}

 .form_lana div.gform_fields textarea {
 	height: 160px;
 	line-height: 1.2em !important;
 	resize: none;
     padding: 15px;
   width: 100% !important;
   min-width: 100% !important;
 }
 .form_lana.form_lana_contact div.gform_fields textarea {
 	 background-color: #F4F4F4;
 }
.form_lana .ginput_container_fileupload input {
width: 100% !important;
}
.form_lana .gfield_description.gfield_consent_description div.gfield_consent_description_text {
	margin-top: 20px;
	padding: 0;
	border-style: none;
}
.form_lana input::-webkit-input-placeholder { /* Edge */
color: #000000;
  	font-weight: 400 !important;
	font-style: normal !important;
	opacity: 1 !important;
	font-size: 15px;
}

.form_lana input:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #000000;
  
  	font-weight: 400 !important;
	font-style: normal !important;
	opacity: 1 !important;
font-size: 15px;
}

.form_lana input::placeholder, .form_lana textarea::placeholder{
color: #000000;
  
  	font-weight: 400 !important;
	font-style: normal !important;
	opacity: 1 !important;
font-size: 15px;
}

 .gfield_consent_description {
	border: none !important;
	padding: 0 !important;
	 color: #000000 !important;	
  	font-weight: normal !important;
	font-style: normal !important;
  margin-top: 0 !important;
  overflow: visible !important;
  margin-bottom: 24px !important;
  font-weight: 300 !important;
  letter-spacing: 0;
  min-height: auto !important;
  height: auto !important;
  max-height: inherit !important;
  font-size: 12px !important;
  line-height: 1.3em !important; 
 } 
 .gfield_consent_description a:hover {
 	text-decoration: underline;
 }
.ginput_container_consent {
	display: flex;
	align-items: center !important;
}
.ginput_container_consent input {
	border: 1px solid #000000 !important;
	border-radius: 0px !important;
	width: 16px !important;
	height: 16px !important;
	min-width: 16px !important;
	min-height: 16px !important;
	max-width: 16px !important;
	max-height: 16px !important;
}

fieldset.gfield--type-consent div.ginput_container.ginput_container_consent:hover, fieldset.gf_campo_check_newsletter .gchoice:hover {
	cursor: pointer;
}
.camp_proteccio_dades {
  margin-top: 50px !important;
}
.camp_proteccio_dades input {
background-color:  #00000000 !important;
}
.camp_proteccio_dades a {text-decoration: underline;}

.form_lana label.gfield_label.gform-field-label {
color: #000;
font-weight: 400;
	font-size: 19px;
  letter-spacing: 0.75px;
  gap: 2px;
  align-content: flex-start;
  align-items: start;
}
.form_lana legend.gfield_label.gform-field-label.gfield_label_before_complex {
	text-transform: uppercase;	font-size: 17px;
}
fieldset.gfield--type-consent div.ginput_container.ginput_container_consent label  {
		letter-spacing: 0;
	margin-left: 5px;
	font-size: 14px !important;
	color: #000000;
	margin-top: 2px;
}


.camp_notas_labelSeccio {
  margin-top: 70px !important;
}
.camp_notas_labelSeccio label{
  font-weight: 400;
  font-size: 24px !important;
  letter-spacing: 0.75px !important;
  margin-bottom: 40px !important;
}

.gfield_required.gfield_required_asterisk {
	color: #000 !important;

}

.gform-theme--framework input[type="checkbox"]:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *))::before { 
color: #000000 !important;

}
.form_lana div.gform_footer {
	margin-top: 10px;
}
.form_subscripcio .form_lana div.gform_footer {
	margin-top: 15px;
	
}
.form_subscripcio fieldset.gfield--type-consent div.ginput_container.ginput_container_consent label  {
		letter-spacing: 0;
	margin-left: 5px;
	font-size: 14px !important;
	color: #fff;
	margin-top: 2px;
}


.txt_protecciondatos label span.gform-field-label__text{
	font: 13px Montserrat;
	letter-spacing: -0.4px;
}
.txt_protecciondatos div.gfield_consent_description_text {
	border-style: none;
	padding: 9px 0;
	margin-top: 15px;

	font: 11px/1.5em Montserrat;
	font-weight: 400;
	color: #000;
	border-top: 1px solid #cecece;
	border-bottom: 1px solid #cecece;
}
.txt_protecciondatos div.gfield_consent_description_text b{
	font-weight: 500;
	
}
.form_lana div.gform_footer button {
	border: 1px solid #000 !important;
  border-radius: 0px !important;transition: all 0.2s ease-in-out !important;
  align-items: center !important;
   display: inline-flex !important;
  gap: 10px !important;
  justify-content: center !important;
  letter-spacing: 2px !important;
  padding: .5em 1em !important;
  text-align: center !important;
  box-shadow: none !important;
background-color: #3b2b21 !important;
width: 100% !important;
font: bold 14px "Montserrat", sans-serif !important;
color: #fff !important;
text-transform: uppercase !important;
}

.form_lana div.gform_footer button:hover {
		cursor: pointer;
	transition: all 0.2s ease-in-out !important;
	color: #fff !important;
	  background-color: #000 !important;
}
.form_subscripcio .form_lana input.gform_button.button {
	border: 1px solid #C69214 !important;
  border-radius: 8px !important;
  transition: all 0.2s ease-in-out !important;
  align-items: center !important;
   display: inline-flex !important;
  gap: 10px !important;
  justify-content: center !important;
  letter-spacing: .5px !important;
  padding: .5em 1em !important;
  text-align: center !important;
  box-shadow: none !important;
  width: 150px !important;
font-size: 15px !important;
font-weight: 600 !important;
color: #fff !important;
font-family: "Montserrat", sans-serif !important;
background-color: #C69214 !important;
text-transform: uppercase !important;
}

.form_subscripcio .form_lana input.gform_button.button:hover {
		cursor: pointer;
	transition: all 0.2s ease-in-out !important;
	color: #fff !important;
	  background-color: #000 !important;
}

.form_subscripcio .gform_validation_errors, .form_subscripcio .gform_validation_errors h2, .form_subscripcio .gform_validation_errors span {
	color: #fff !important;
	border-color: #fff !important;
}
.form_subscripcio .gfield_description.validation_message.gfield_validation_message {
	color: #fff !important;
	border-color: #fff !important;
}
.gform-theme--foundation .gform_fields {
	row-gap: 30px !important;
}
.form_subscripcio .gform-theme--foundation .gform_fields {
	row-gap: 14px !important;
}


/* formulario embalses */

/* img zoom */
.wrap_hover_img_zoom:hover .wrap_img_zoom img {
  transform: scale(1.09);
  -webkit-transition: all 0.4s linear !important;
  -moz-transition: all 0.4s linear !important;
  -o-transition: all 0.4s linear !important;
  transition: all 0.4s linear !important;
}
.wrap_hover_img_zoom .wrap_img_zoom {
	overflow: hidden;
}
.wrap_hover_img_zoom .wrap_img_zoom img {
  transform: scale(1);
  -webkit-transition: all 0.4s linear !important;
  -moz-transition: all 0.4s linear !important;
  -o-transition: all 0.4s linear !important;
  transition: all 0.4s linear !important;
}

textarea::placeholder{ 
	color: #000 ;
}




/* -----------------------------------------------------------------------------
 * CSS excepcional del proyecto.
 *
 * Norma (Biblia §6.9): aquí SOLO va lo que no tiene control nativo en Bricks
 * —HTML interno de post-content, hovers de enlaces internos, sub-elementos sin
 * controles, flex-direction y gaps que las clases globales no emiten—. Todo lo
 * demás (tipografía, colores, padding, borde, radio, display) va en los ajustes
 * nativos del elemento o de la clase global, para que sea revisable desde el
 * builder.
 *
 * Prefijo de clases del proyecto: lk-
 * -------------------------------------------------------------------------- */

/* 1. Variables y base
 * -------------------------------------------------------------------------- */

/* 2. Cabecera y navegación
 * -------------------------------------------------------------------------- */

/* Rótulos de las redes sociales: se leen, no se ven.
 *
 * El elemento `social-icons` de Bricks no tiene control de aria-label, pero sí
 * un campo «Label» que renderiza un <span> dentro del enlace. Ocultándolo con
 * la técnica de sólo-lectores queda un nombre accesible de verdad —texto real
 * y traducible, mejor que un aria-label— sin romper el diseño (hand-off §10).
 *
 * ⚠️ Efecto colateral: cualquier «Label» que se escriba en ese elemento será
 * invisible. Es deliberado: en esta web las redes van solo con icono. */
.brxe-social-icons .repeater-item a > span {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* 3. Contenido
 * -------------------------------------------------------------------------- */

/* Títulos de obra citados dentro de un párrafo: «Un camí d'Educació per a la
 * Pau», «La música com a eina de transformació social». Cambian de familia sin
 * salir del texto corrido. Van dentro de un rich text, así que no hay elemento
 * de Bricks al que aplicarles una clase global. */
.lk-work-title {
	font-family: "EB Garamond", Georgia, serif;
	font-style: italic;
	font-size: 1.18em;
	color: var(--lk-brown);
}

/* Tarjetas de acceso: toda la superficie clicable con un solo enlace.
 *
 * El enlace de acción («Descobreix el conte →») se estira sobre la tarjeta con
 * un pseudo-elemento. Así el HTML tiene UN enlace por tarjeta —no tres al mismo
 * sitio, que es ruido para quien navega con lector de pantalla— y el ratón
 * puede pulsar en cualquier parte.
 *
 * ⚠️ La especificidad importa: Bricks emite las clases globales como
 * `.lk-card.brxe-block` (0,2,0), así que estas reglas se escriben con el mismo
 * peso o más. */
.lk-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Al pasar por encima de la tarjeta, la imagen sube el brillo y el filete del
 * enlace pasa de terracota a tinta. Sin escalados ni sombras nuevas: la
 * dirección es plana a propósito. */
.lk-card:hover .lk-card__img {
	filter: brightness(1.03);
}

.lk-card:hover .lk-card__link {
	border-bottom-color: var(--lk-ink);
}

/* La foto del cuento sí lleva el viraje cálido combinado con el brillo del
 * hover; el resto solo el brillo. */
.lk-card:hover .lk-photo--warm.lk-card__img {
	filter: var(--photo-warm-filter) brightness(1.03);
}

/* Respetar la preferencia de movimiento reducido. */
@media (prefers-reduced-motion: reduce) {
	.lk-card__img,
	.lk-card__link {
		transition: none;
	}
}

/* 4. Proyectos educativos (listado y ficha)
 * -------------------------------------------------------------------------- */

/* Todo lo de aquí abajo se acota con `.page-projectes`, la clase que el plugin
 * pone en el <body> de la página de la sección y de las cuatro fichas
 * (`includes/frontend/projecte-video.php`). Ninguna de estas reglas se escapa
 * al resto del sitio.
 *
 * Son las cosas que NO tienen control nativo en Bricks: la alternancia de las
 * filas, el cuadrado de salvia, el color de la cabecera, el HTML interno del
 * post-content y la fachada del vídeo. Todo lo demás —tipografía, colores,
 * espaciado, rejillas y sus breakpoints— está en los ajustes de cada elemento,
 * donde se puede revisar y tocar desde el builder. */

/* 4.1 La cabecera, opaca y clara
 * ----------------------------------------------------------------------------
 * Tercera variante de cabecera del sitio, y la regla es simple: la cabecera se
 * adapta a lo que tiene debajo. En la portada es transparente sobre la foto del
 * hero, en el cuento es opaca sobre la apertura oscura, y aquí —que no hay hero
 * fotográfico— es opaca clara con un filete que la separa del crema.
 *
 * Sigue en overlay, como en todo el sitio: lo que cambia es el color, no la
 * posición. Por eso la sección de apertura le reserva su hueco con padding
 * superior (Biblia §11.c).
 *
 * BricksExtras pinta el fondo de la fila con
 * `background: var(--x-overlay-header-background) !important`, así que en vez
 * de pelear con ese !important se redefine la variable, que es lo que ese
 * !important lee. */
.page-projectes #brx-header {
	--x-overlay-header-background: var(--lk-white-warm);
}

.page-projectes #brx-header .lk-header {
	border-bottom: var(--rule) solid var(--lk-line-soft);
}

/* La marca y el lema, que en el resto del sitio van sobre oscuro. */
.page-projectes #brx-header .lk-header__wordmark {
	color: var(--lk-ink);
}

.page-projectes #brx-header .lk-header__tagline {
	color: var(--lk-earth);
}

/* La navegación. Bricks emite estos colores como `#brxe-<id> .bricks-nav-menu`,
 * de especificidad (1,1,2): estos selectores suman cuatro clases y ganan sin
 * !important. */
.page-projectes #brx-header .lk-header__nav .bricks-nav-menu > li > a {
	color: var(--lk-ink-soft);
}

.page-projectes #brx-header .lk-header__nav .bricks-nav-menu > li.current-menu-item > a,
.page-projectes #brx-header .lk-header__nav .bricks-nav-menu > li.current-menu-ancestor > a,
.page-projectes #brx-header .lk-header__nav .bricks-nav-menu > li.current_page_parent > a {
	color: var(--lk-ink);
	border-bottom-color: var(--lk-clay);
}

.page-projectes #brx-header .lk-header__nav .bricks-nav-menu > li > a:hover {
	border-bottom-color: var(--lk-clay);
}

.page-projectes #brx-header .lk-header__social .icon {
	color: var(--lk-brown);
}

/* El botón deja de ser el invertido (claro sobre oscuro) y pasa a sólido
 * oscuro, que es lo que se lee sobre un fondo claro. */
.page-projectes #brx-header .lk-header__cta {
	background-color: var(--lk-ink);
	color: var(--lk-white-warm);
}

/* 4.2 El cuadrado de salvia del antetítulo de lugar
 * ----------------------------------------------------------------------------
 * `--lk-sage` (#C3CDBF) está en la paleta desde el primer día reservado para
 * «etiquetas de proyectos de cooperación». Estas son esas páginas y es el único
 * sitio de la web donde ese color tiene sentido.
 *
 * ⚠️ Sobre blanco solo llega a 1,9:1, así que NO puede llevar texto: se usa
 * como cuadrado de 6 px delante de la etiqueta, decorativo y sin contenido, de
 * modo que no lo anuncia ningún lector de pantalla. */
.page-projectes .proj-place {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.page-projectes .proj-place::before {
	content: "";
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	background-color: var(--lk-sage);
}

/* 4.3 Las filas del listado: alternancia y zona de clic
 * ----------------------------------------------------------------------------
 * Las filas pares llevan la miniatura a la derecha. Se hace con `order` sobre
 * el hijo directo del grid —invertir solo las columnas no se vería, porque las
 * dos miden casi lo mismo (Biblia §12.n·3)— y con `:nth-child(even)` a secas,
 * que puede hacerse porque el loop vive dentro de su propio contenedor y sus
 * únicos hermanos son las demás filas.
 *
 * El `.brx-query-trail` que Bricks añade al final del loop no estorba: no lleva
 * la clase `.proj-row`, así que nunca casa (Biblia §12.k).
 *
 * Aguanta cualquier número de proyectos: con 5, 6 u 8 la alternancia sigue. */
.page-projectes .proj-row:nth-child(even) .proj-row__media {
	order: 2;
}

/* El filete entre filas va como borde SUPERIOR de todas menos la primera. Es la
 * única forma de que la última no arrastre un filete suelto al final del
 * listado: el `.brx-query-trail` de Bricks va detrás del último ítem en el HTML
 * servido y desaparece en el front, así que `:last-child` no es de fiar
 * (Biblia §12.k). Con `+` no hace falta saber cuántas filas hay. */
.page-projectes .proj-row + .proj-row {
	border-top: var(--rule) solid var(--lk-line-soft);
}

/* Las filas son el destino de las anclas del índice. La cabecera va en overlay,
 * así que sin esto el título de la fila quedaría justo debajo de ella al saltar:
 * son sus 114 px más un respiro. */
.page-projectes .proj-row {
	scroll-margin-top: 138px;
}

/* Cada fila lleva su propio aire arriba y abajo, que es lo que separa una de
 * otra. Pero la PRIMERA no lo necesita —ya lo pone el padding de la sección— y
 * la ÚLTIMA tampoco, o el listado acaba con un hueco que no dice nada.
 *
 * El doble selector es el que aguanta los dos DOM que hay (Biblia §12.k): en el
 * HTML que sirve el servidor, el `.brx-query-trail` de Bricks va detrás del
 * último ítem y `:last-of-type` no casa; en el front el JS lo borra y entonces
 * sí. Con las dos reglas funciona en los dos, y también dentro del builder. */
.page-projectes .proj-row:first-child {
	padding-top: 0;
}

.page-projectes .proj-row:last-of-type,
.page-projectes .proj-row:has(+ .brx-query-trail) {
	padding-bottom: 0;
}

/* La última fila de la ficha de datos no lleva filete: el borde de una lista
 * sirve para separar filas, y debajo de la última no hay nada que separar. */
.page-projectes .proj-fitxa__dades dl > div:last-of-type,
.page-projectes .proj-fitxa__dades dl > div:has(+ .brx-query-trail) {
	border-bottom: 0;
}

/* Toda la fila es un enlace, no solo el título: un destino de tabulación y un
 * anuncio de lector de pantalla por proyecto, no tres al mismo sitio. */
.page-projectes .proj-row:hover .proj-row__img {
	filter: brightness(0.94);
}

.page-projectes .proj-row:hover .proj-play {
	background-color: var(--proj-play-bg-hover);
}

.page-projectes .proj-row:hover .lk-action-link {
	color: var(--lk-brown);
	border-bottom-color: var(--lk-brown);
}

/* 4.4 El botón de reproducción
 * ----------------------------------------------------------------------------
 * En el listado es decorativo (`aria-hidden`): la fila entera ya es un enlace a
 * la ficha y el círculo solo dice «esto es un vídeo». En la ficha sí es un
 * <button> de verdad, y es el que carga el reproductor. */
.page-projectes .proj-play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	pointer-events: none;
}

.page-projectes .lk-video__play {
	pointer-events: auto;
	cursor: pointer;
	border: 0;
	padding: 0;
	transition: var(--transition-fast);
}

.page-projectes .lk-video__play:hover {
	transform: translate(-50%, -50%) scale(1.04);
}

/* 4.5 La fachada del vídeo
 * ----------------------------------------------------------------------------
 * Hasta que alguien pulsa, ahí solo hay una imagen servida desde este sitio. El
 * <iframe> de YouTube se inserta al hacer clic (`assets/js/kt-video-facade.js`):
 * así la página no pone cookies de terceros antes de que se consientan, que es
 * un requisito y no una optimización.
 *
 * El reproductor ocupa exactamente el mismo hueco que la fachada, así que al
 * cargarlo no se mueve nada de la página. */
.page-projectes .lk-video {
	position: relative;
	aspect-ratio: var(--proj-aspect-video);
	background-color: var(--proj-video-bg);
}

.page-projectes .lk-video__iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Foco visible sobre la banda oscura: el contorno claro, como en el cuento. */
.page-projectes .lk-video :focus-visible,
.page-projectes .lk-video__play:focus-visible {
	outline: 2px solid var(--lk-white-warm);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.page-projectes .lk-video__play {
		transition: none;
	}

	.page-projectes .lk-video__play:hover {
		transform: translate(-50%, -50%);
	}
}

/* 4.6 El texto de la ficha
 * ----------------------------------------------------------------------------
 * El cuerpo va en el editor nativo de WordPress, así que su HTML interno no
 * tiene elementos de Bricks a los que aplicar una clase: se estila aquí, que es
 * la excepción que la norma del proyecto sí contempla. */
.page-projectes .brxe-post-content p {
	margin: 0 0 26px;
	text-wrap: pretty;
}

.page-projectes .brxe-post-content > *:last-child {
	margin-bottom: 0;
}

/* La cita destacada. La necesita el proyecto 04, que trae una declaración de
 * la clienta de casi 500 caracteres: puesta como un párrafo más se lee como
 * texto corrido y se pierde que es una voz distinta.
 *
 * El estilo existe en la plantilla aunque solo una ficha lo use, y está pensado
 * para no desequilibrar las que no lo tienen: un filete de terracota y la
 * cursiva, sin caja ni fondo. */
.page-projectes .brxe-post-content blockquote {
	margin: 30px 0;
	padding: 0 0 0 28px;
	border-left: var(--rule) solid var(--lk-clay);
}

.page-projectes .brxe-post-content blockquote p {
	margin: 0 0 16px;
	font-family: "EB Garamond", Georgia, serif;
	font-style: italic;
	font-size: var(--display-proj-quote);
	line-height: var(--lh-quote);
	color: var(--lk-ink);
}

.page-projectes .brxe-post-content blockquote cite {
	display: block;
	font-family: Karla, system-ui, sans-serif;
	font-size: var(--text-button);
	font-style: normal;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--ls-nav);
	color: var(--lk-muted-light);
}

/* 4.7 Ajustes de móvil
 * ----------------------------------------------------------------------------
 * Los anchos son los breakpoints reales de Bricks en este sitio (991 y 767), no
 * los del hand-off (1199 y 1023): así estas reglas colapsan a la vez que las
 * rejillas, que sí están puestas con los controles por breakpoint del builder.
 * El día que se ajusten los breakpoints del sitio, hay que ajustar también
 * estos dos números. */
@media (max-width: 969px) {
	/* En una sola columna la miniatura va SIEMPRE arriba: alternar en vertical
	 * no se lee como un zigzag, se lee como un desorden. */
	.page-projectes .proj-row:nth-child(even) .proj-row__media {
		order: 0;
	}

	/* La ficha de datos pasa a ser una caja con borde y se coloca ANTES del
	 * texto: son cuatro o cinco datos y, leídos primero, ahorran contexto. */
	.page-projectes .proj-fitxa__dades {
		padding: 18px 20px;
		border: var(--rule) solid var(--lk-line-soft);
	}

	.page-projectes .brxe-post-content blockquote {
		margin: 24px 0;
		padding-left: 20px;
	}
}

/* 5. Pie
 * -------------------------------------------------------------------------- */


/* ============================================================================
   PIE OSCURO — páginas con la clase .footer_oscuro en el <body>
   ============================================================================
   El pie del sitio es CLARO por defecto (plantilla 47). Las páginas que lo
   quieran oscuro solo tienen que llevar la clase `footer_oscuro` en el body:
   Bricks → Page settings → CSS classes (body). Hoy la lleva la portada.

   Sobre la especificidad: Bricks emite los estilos de cada elemento como
   `#brxe-<id>` (1,0,0), así que aquí se encadena `#brx-footer` con las clases
   del pie. Eso da (1,2,0) o más y gana sin recurrir a `!important`, y sin
   depender de los ids de los elementos, que cambiarían si algún día se rehace
   el pie desde el builder.

   Las clases `lk-footer__*` las pone el generador BUILD/14 sobre la plantilla.
   ========================================================================== */

.footer_oscuro #brx-footer .lk-footer {
	background-color: var(--lk-ink);
	border-top-color: transparent;
}

.footer_oscuro #brx-footer .lk-footer__brand {
	color: var(--lk-white-warm);
}

.footer_oscuro #brx-footer .lk-footer__meta {
	color: var(--text-invert-soft);
}

.footer_oscuro #brx-footer .lk-footer__nav .bricks-nav-menu > li > a {
	color: var(--nav-on-dark);
}

.footer_oscuro #brx-footer .lk-footer__label {
	color: var(--lk-clay);
}

.footer_oscuro #brx-footer .lk-footer__email {
	color: var(--lk-pink);
}

.footer_oscuro #brx-footer .lk-footer__social .icon {
	color: var(--lk-white-warm);
}

.footer_oscuro #brx-footer .lk-footer__rule {
	background-color: var(--rule-on-dark);
}

.footer_oscuro #brx-footer .lk-footer__copy {
	color: var(--text-invert-faint);
}

.footer_oscuro #brx-footer .lk-footer__legal {
	color: var(--text-invert-soft);
}