/* Página Nosotros — ver inc/nosotros.php
 *
 * IMPORTANTE: todo va acotado a `.main-content`, que es el contenedor del cuerpo
 * de la página. El footer del sitio es una "sección global" de Salient y vive en
 * el mismo `.container-wrap`, montado también con filas de WPBakery: sin esa
 * acotación, una regla pensada para el texto de la página le cambia el ancho al
 * footer y lo deja pegado a la izquierda.
 */

/*
 * En móvil las dos columnas se apilan en el orden del código: primero los seis
 * párrafos de "Donde empieza Kubari" y, tras casi una pantalla de scroll, la
 * foto de Daniela y Jordi. Quien abre la página desde el móvil no llega a verlos.
 * Se invierte el orden solo aquí: la foto primero y el texto debajo.
 *
 * Se apunta a la fila por lo que contiene (un h1 y una imagen) y no por su id,
 * porque los que genera WPBakery cambian cada vez que se guarda la página.
 */
@media (max-width: 999px) {

	.page-id-37 .main-content .wpb_row .row_col_wrap_12:has(.kubari-foto-fundadores) {
		display: flex;
		flex-direction: column-reverse;
	}

	/* Con el orden invertido, la columna de texto queda debajo de la foto. El tema
	   le pone un margen superior NEGATIVO (pensado para cuando iba al lado), que
	   aquí la sube encima de la imagen y tapa el titular. De ahí el !important. */
	.page-id-37 .main-content .wpb_row .row_col_wrap_12:has(.kubari-foto-fundadores) > .wpb_column:first-child {
		margin-top: clamp(1.5rem, 5vw, 2.5rem) !important;
	}
}

/*
 * Medida de línea. La sección "¿Y por qué Kubari?" ocupa la columna entera y sus
 * párrafos llegaban a 1040 px, unos 130 caracteres por línea.
 */
.page-id-37 .main-content .nectar-split-heading p {
	max-width: var(--kub-medida);

	/* Centrar la columna de texto. Donde el párrafo ya mide lo mismo que su
	   contenedor (el primer bloque, las bios) esto no cambia nada. */
	margin-left: auto;
	margin-right: auto;

	/* La bio de Jordi son dos frases dentro del mismo bloque separadas por un
	   salto de línea: el shortcode las sacaba una al lado de la otra y solo
	   pintaba del color de marca la primera. El efecto line-reveal reescribe el
	   marcado y deja estilos en línea, por eso aquí hace falta forzar. */
	display: block !important;
	width: 100% !important;
	color: #00828e !important;
}

.page-id-37 .main-content .nectar-split-heading p + p {
	margin-top: 0.75rem;
}

/* El contenedor que genera el efecto es un flex en fila: por eso las dos frases
   de una misma bio se colocaban en horizontal. */
.page-id-37 .main-content .nectar-split-heading.markup-generated {
	flex-direction: column;
}

/* El interlineado lo fija Salient por clase de tamaño (font_size_1vw), que gana
   por especificidad; es el único sitio donde hace falta forzarlo. */
.page-id-37 .main-content .nectar-split-heading[class*="font_size_"] p {
	line-height: 1.5 !important;
}

/*
 * Ancho de lectura. El .container de Salient llega a 2000 px, así que a partir
 * de 1500 las líneas pasaban de 90 caracteres. Se ciñe a 1180, el mismo ancho
 * al que se ajustó la tienda nueva.
 */
@media (min-width: 1400px) {

	.page-id-37 .main-content .wpb_row .row_col_wrap_12 {
		max-width: 1180px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* El titular del primer bloque bajó a h2 al ceder el h1 al rótulo, pero manda
   lo mismo dentro de la página: conserva el tamaño que tenía. */
.page-id-37 .main-content .nectar-split-heading h2 {
	font-size: clamp(2rem, 3.4vw, 3.625rem);
	line-height: 1.12;
}

/* Salvo los nombres de Daniela y Jordi, que son de otro nivel. */
.page-id-37 .main-content .row_col_wrap_12_inner .nectar-split-heading h2 {
	font-size: clamp(1.5rem, 2.2vw, 1.9rem);
}

/*
 * La foto del primer bloque y su columna de texto.
 *
 * Las dos columnas ya medían lo mismo (el tema las iguala), pero la foto se
 * quedaba en su altura natural y dejaba 225 px de hueco debajo. Se estira a la
 * altura de la columna recortando por los lados, que es donde solo hay pared.
 *
 * Solo en escritorio: en móvil las columnas se apilan y la foto va entera.
 */
@media (min-width: 1000px) {

	.page-id-37 .main-content .wpb_column:has(.kubari-foto-fundadores) .vc_column-inner,
	.page-id-37 .main-content .wpb_column:has(.kubari-foto-fundadores) .wpb_wrapper,
	.page-id-37 .main-content .img-with-aniamtion-wrap:has(.kubari-foto-fundadores),
	.page-id-37 .main-content .img-with-aniamtion-wrap:has(.kubari-foto-fundadores) .inner,
	.page-id-37 .main-content .img-with-aniamtion-wrap:has(.kubari-foto-fundadores) .hover-wrap,
	.page-id-37 .main-content .img-with-aniamtion-wrap:has(.kubari-foto-fundadores) .hover-wrap-inner {
		height: 100%;
	}

	.page-id-37 .main-content .kubari-foto-fundadores {
		height: 100%;
		object-fit: cover;
		object-position: center;
	}
}

/*
 * Carrusel del final de la página. Las celdas del ticker de Salient dejan a cada
 * foto su alto natural, así que la fila salía descuadrada (330, 339, 402 px…).
 * Todas al mismo alto, recortando en vez de deformar.
 */
.page-id-37 .main-content .nectar-flickity .cell img {
	width: 100%;
	/* !important porque mientras la foto no ha cargado, el tema le pone al hueco
	   la altura del marcador de posición y el carrusel da un salto al llegar. */
	height: clamp(260px, 26vw, 380px) !important;
	object-fit: cover;
	object-position: center;
}

/*
 * Cabecera en color plano (Daniela, 26-08). La fila ya llevaba el #00828E de
 * marca como color de fondo; encima iba el patrón, que WPBakery no pinta como
 * background sino como un <img class="row-bg-img"> dentro de un <picture>. Al
 * ocultarlo queda el color, que es lo que se pidió.
 *
 * Se filtra por el nombre del fichero para no tocar ninguna otra fila con imagen
 * de fondo, y sirve igual para la versión inglesa, que es otra fila con el mismo
 * patrón. Para recuperar la textura, quitar esta regla.
 */
.page-id-37 .row-bg-img[src*="PATRON-WEB-KUBARI"] {
	display: none;
}