/* ─── Bloque 10 de la portada: sedes / cobertura nacional ──────────────────────
 *
 * Copiado del `LocationsCTA` de la home del referente Next.js: banda clara a todo el ancho,
 * texto a la izquierda y a la derecha un boceto a lápiz de la recepción de un showroom que
 * NO se recorta ni se enmarca — se funde con el fondo.
 *
 * Los dos trucos que hacen que se funda, y que no se pueden expresar en los controles de
 * Elementor:
 *
 *   1. `mix-blend-mode: multiply`. El boceto es trazo negro sobre blanco puro. En multiply el
 *      blanco desaparece (multiplicar por 1 deja el fondo intacto) y solo queda el grafito.
 *      Sin esto se ve un rectángulo blanco recortado sobre el gris de la banda.
 *   2. Una máscara en degradado, para que el borde por donde el dibujo se encuentra con el
 *      texto no sea una línea recta.
 *
 * La dirección de la máscara CAMBIA con el breakpoint, y es obligatorio: en escritorio la
 * fila es horizontal y el dibujo entra desde la derecha, así que se desvanece hacia la
 * izquierda; en tablet y móvil la fila se apila y el dibujo queda DEBAJO del texto, así que
 * el degradado tiene que ir hacia arriba. Con el de escritorio en móvil se borraría justo el
 * lado que da al texto y el logo del muro quedaría al aire.
 */

/* El boceto es una CAPA DE FONDO que cubre la banda entera, no una imagen en una columna al
 * lado del texto (decisión de José el 2026-08-06: la versión en columna se leía como una foto
 * pegada encima, no como el fondo del panel). Es lo que hace el referente, donde la imagen es
 * `absolute` sobre 70vw.
 *
 * Sigue siendo un `<img>` de verdad y no un `background-image`, para conservar el `alt`, el
 * `srcset` y el `lazy`: el aspecto de fondo lo dan `position: absolute` + `object-fit: cover`.
 * Con `background-image` se perderían las tres cosas y habría que usar `background-blend-mode`
 * en lugar de `mix-blend-mode`.
 */
.pt-sedes {
	position: relative;
	overflow: hidden;
	min-height: 560px;          /* sitio para que el boceto se lea; sin esto lo marca el texto */
}

.pt-sedes__capa {
	position: absolute;
	inset: 0;
	z-index: 0;
	padding: 0;
}

/* La cadena widget → contenedor del widget tiene que heredar el alto, o el `height: 100%` del
 * `<img>` se resuelve contra una caja de alto automático y la imagen no llega a los bordes.
 */
.pt-sedes__capa,
.pt-sedes__capa .pt-sedes__img,
.pt-sedes__capa .pt-sedes__img > .elementor-widget-container {
	height: 100%;
}

.pt-sedes .pt-sedes__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
	mix-blend-mode: multiply;
	opacity: .9;

	/* Un solo degradado, y ahora sí como el del referente: la imagen cubre la banda, así que
	 * arriba, abajo y a la derecha está a ras de los bordes y no hay canto que tapar. Solo hace
	 * falta apagarla por la IZQUIERDA, que es donde va el texto.
	 *
	 * Los porcentajes están MEDIDOS, no elegidos a ojo. El texto acaba en x=653 de 1440, o sea
	 * el 45,3 %. Con el degradado llegando a opaco en el 52 % el párrafo caía sobre el rayado y
	 * medía **4,38:1, por debajo de AA** (medido ocultando el texto y muestreando el fondo real
	 * bajo su rectángulo, no dentro de los glifos: ver trampa 36). Por eso la máscara se queda
	 * **totalmente transparente hasta el 46 %** —el ancho exacto de la columna de texto— y solo
	 * a partir de ahí sube: así el párrafo se lee sobre el color plano de la banda (5,89:1) y no
	 * hay que ensuciar el `#5A5A5A` de marca. El tramo de 46 % a 74 % es largo a propósito, para
	 * que la entrada del dibujo no se vea como una línea vertical.
	 */
	-webkit-mask-image: linear-gradient(to right, transparent 46%, rgba(0,0,0,.3) 58%, #000 74%);
	        mask-image: linear-gradient(to right, transparent 46%, rgba(0,0,0,.3) 58%, #000 74%);
}

/* El texto va por encima de la capa. Y es esta fila la que lleva el ancho máximo, porque el
 * contenedor de Elementor pasó a `content_width: full` para que la capa pudiera ir a los bordes
 * (ver el comentario en build-portada-sedes.py).
 */
.pt-sedes__sobre {
	position: relative;
	z-index: 1;
	max-width: 1320px;
	margin: 0 auto;
	width: 100%;
}

/* En tablet y móvil el texto ocupa TODO el ancho, así que un degradado horizontal no sirve: el
 * párrafo se quedaba encima del rayado y medía 2,57:1 a 1024 px y 2,45:1 a 390 px, menos de la
 * mitad de AA. Y bajar la opacidad de la imagen tampoco basta — la tinta más oscura del boceto
 * sigue dando ~3,9:1 al 22 % de opacidad.
 *
 * Así que el reparto pasa de horizontal a VERTICAL: el dibujo ocupa la franja de abajo, a
 * sangre y sin marco —sigue leyéndose como fondo del panel, que es lo que se pedía— y el texto
 * la de arriba, sobre el color plano de la banda. El hueco de abajo lo abre el
 * `padding_bottom` de 300/330 px que pone `build-portada-sedes.py`.
 *
 * El corte del degradado va medido contra ese hueco: el texto acaba en el 61 % de la altura de
 * la banda, o sea el 39 % contando desde abajo (que es de donde cuenta `to top`), así que la
 * máscara tiene que estar del todo transparente antes del 42 %.
 */
@media (max-width: 1024px) {
	.pt-sedes {
		min-height: 0;
	}

	/* La capa deja de cubrir la banda entera y se confina a la franja de abajo. Es lo que hace
	 * falta para poder ELEGIR qué se ve: la proporción del boceto (978x676, 1,45) y la de la
	 * banda en tablet (1024x711, 1,44) son casi idénticas, así que con `inset: 0` el `cover` no
	 * recorta nada y la franja visible de abajo caía justo en el suelo y la base del mostrador
	 * —líneas genéricas, sin el muro del logo, que es lo que identifica la marca—. Con la capa
	 * a 300 px de alto la proporción pasa a 3,4 y el `cover` sí recorta, así que
	 * `object-position` decide el encuadre.
	 */
	.pt-sedes__capa {
		top: auto;
		bottom: 0;
		height: 300px;
	}
	.pt-sedes .pt-sedes__img img {
		object-position: 62% 42%;      /* el muro con el logotipo y el mostrador */
		-webkit-mask-image: linear-gradient(to top, #000 0%, #000 34%, transparent 100%);
		        mask-image: linear-gradient(to top, #000 0%, #000 34%, transparent 100%);
	}
}

@media (max-width: 767px) {
	.pt-sedes__capa {
		height: 320px;
	}
	.pt-sedes .pt-sedes__img img {
		object-position: 66% 44%;
	}
}

/* ─── Página /sedes/ — el directorio ──────────────────────────────────────────
 *
 * Contenido clásico (no Elementor), así que aquí va toda la maqueta. Se apoya en
 * `wgl-container` del theme para alinear con el header y el footer: NO se recrea con un
 * 1170px propio, que quedaría 15 px desalineado (trampa 16).
 */

.pt-sedes-dir {
	padding: 0 0 20px;
}

/* Banda negra a sangre con el H1 y la entradilla.
 *
 * No es decoración: el header del theme es transparente y su logo y su menú son BLANCOS. Al
 * apagar la sección `page_title` (que era la que ponía una foto oscura detrás) caían sobre el
 * fondo blanco de la página y desaparecían — trampa 17, el mismo problema que ya tuvieron las
 * fichas de proyecto. La banda les devuelve el fondo sobre el que están diseñados.
 *
 * Se sale del `wgl-container` con el truco de `50% - 50vw`: el contenido sigue alineado con el
 * header y el footer, pero el fondo llega a los dos bordes. Y `padding-top: 190px` para que el
 * H1 no se meta debajo del header, que al ser transparente no reserva su alto.
 */
.pt-sedes-dir__hero {
	background: #000000;
	color: #FFFFFF;
	margin: 0 calc(50% - 50vw) 64px;
	padding: 190px calc(50vw - 50%) 78px;
}

.pt-sedes-dir__hero h1 {
	color: #FFFFFF;
	margin: 0 0 26px;
	max-width: 15em;
}

/* Escala de prosa canónica del child theme — ver el bloque de `producto.css` (`.pt-prosa p`).
 * Intro sobre banda oscura: 1rem, igual que el hub de mobiliario y el lead de las landings. */
.pt-sedes-dir__intro {
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.7;
	color: #D8D8D8;
	max-width: 660px;
	margin: 0;
}

.pt-sedes-dir__intro strong {
	color: #FFFFFF;
	font-weight: 500;
}

/* El theme abre 40 px de blanco entre el borde de la página y el contenido con un shorthand
 * global `#main { padding: 40px 0 }` (trampa 19). Con la banda negra a ras eso se ve como una
 * franja blanca sobre el negro. 1 id + 1 clase + 1 tipo le gana sin `!important`.
 */
body.pt-page-sedes #main {
	padding-top: 0;
}

/* Dos sedes en la misma ciudad van una al lado de la otra; una sola ocupa su ancho natural.
 * `flex-wrap` + ancho mínimo: a 2 columnas con 30 px de hueco el ancho es `calc(50% - 15px)`,
 * no `- 10px` (trampa 27). El H2 ocupa fila entera para que las tarjetas empiecen debajo.
 */
.pt-sedes-dir__ciudad {
	border-top: 1px solid #DDDDDD;
	padding: 34px 0 6px;
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.pt-sedes-dir__ciudad h2 {
	flex: 0 0 100%;
	margin: 0 0 22px;
	font-size: 30px;
	letter-spacing: -.02em;
}

.pt-sede {
	flex: 1 1 calc(50% - 15px);
	min-width: 280px;
	margin-bottom: 28px;
}

.pt-sede h3,
.pt-sede__rotulo {
	margin: 0 0 12px;
	font-size: 17px;
	font-weight: 600;
	color: #1A1A1A;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.pt-sede__dir,
.pt-sede__datos {
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.75;
	color: #5A5A5A;
}

.pt-sede__et {
	display: inline-block;
	min-width: 74px;
	color: #1A1A1A;
	font-weight: 500;
}

.pt-sede__enlaces {
	margin: 16px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .08em;
}

.pt-sede__enlaces a {
	color: #1A1A1A;
	border-bottom: 1px solid #B3B3B3;
	padding-bottom: 2px;
}
.pt-sede__enlaces a:hover {
	color: #BC090E;              /* rojo Parasoles */
	border-bottom-color: #BC090E;
}

/* El `max-width` va en los hijos, no en la sección: puesto en la sección se lleva por delante
 * el `border-top`, que quedaba más corto que los filetes de las ciudades de arriba.
 */
.pt-sedes-dir__nota {
	border-top: 1px solid #DDDDDD;
	margin-top: 20px;
	padding: 34px 0 0;
}
.pt-sedes-dir__nota h2 {
	margin: 0 0 18px;
	font-size: 26px;
}
.pt-sedes-dir__nota p {
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.7;
	color: #5A5A5A;
	max-width: 760px;
}

.pt-sedes-dir__cta {
	display: inline-block;
	margin-top: 12px;
	background: #000000;
	color: #FFFFFF;
	padding: 18px 44px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .16em;
}
.pt-sedes-dir__cta:hover {
	background: #1A1A1A;
	color: #FFFFFF;
}

@media (max-width: 767px) {
	/* El header móvil es más bajo que el de escritorio (logo + hamburguesa, sin menú), así que
	 * 190 px de aire sobran: dejan la banda medio vacía antes del H1.
	 */
	.pt-sedes-dir__hero { padding-top: 120px; padding-bottom: 54px; margin-bottom: 40px; }
	.pt-sedes-dir__hero h1 { max-width: none; }
	/* El intro ya entra a 1rem en escritorio desde el ajuste de escala: no hace falta bajarlo aquí. */
	.pt-sedes-dir__ciudad h2 { font-size: 25px; }
	.pt-sede { flex: 1 1 100%; }
	.pt-sedes-dir__cta { padding: 16px 30px; width: 100%; text-align: center; }
}