/*
 * Bluumi "Somos + Hacemos" — estilos de la plantilla page-somos-hacemos.
 *
 * Portado del diseño estático design/somos-hacemos-plus-html-css. Todo está
 * scopeado bajo .bluumi-shp (el wrapper del patrón) para no filtrar nada al
 * resto del sitio. El header y el footer son template parts globales, así que
 * no se portan sus reglas.
 *
 * Los colores de fondo/texto usan los presets de theme.json cuando el valor
 * coincide exactamente con la paleta del diseño.
 */

/* ---------------------------------------------------------------------------
 * Variables y utilidades (portadas de global.css)
 * ------------------------------------------------------------------------ */

.bluumi-shp {
	/* Alias locales apuntando a los presets del tema. */
	--negro: var(--wp--preset--color--bluumi-negro);
	--verde: var(--wp--preset--color--bluumi-verde);
	--white: var(--wp--preset--color--bluumi-white);

	/* Márgenes responsive del diseño. */
	--margin-sm: 16px;
	--margin-md: 32px;

	/* Rango de la tipografía fluida. */
	--min-screen-size: 430;
	--max-screen-size: 1920;
}

/*
 * El sistema de interpolación del diseño vivía en `*`. Lo bajamos a los
 * descendientes del wrapper (no a un `*` global) para no tocar header, footer
 * ni el resto del sitio. Tiene que declararse en cada elemento y no solo en
 * .bluumi-shp: var() se resuelve en el elemento donde se declara, y son las
 * utilidades (hijos) las que fijan --min/--max-font-size.
 */
.bluumi-shp * {
	--interpolate-diff: calc(var(--max-font-size) - var(--min-font-size));
	--interpolate: clamp(calc(var(--min-font-size) * 1px), calc((var(--min-font-size) * 1px) + var(--interpolate-diff) * ((100vw - calc(var(--min-screen-size) * 1px)) / (var(--max-screen-size) - var(--min-screen-size)))), calc(var(--max-font-size) * 1px));
}

/* Utilidades de texto.
   La escala sigue la tabla del sistema de diseño
   (Documentacion/estilos/bluumi-sistema-de-diseno.md): h1 116/132 peso 200,
   h2 100/114 peso 200, h3 48/59 peso 300, h4 32/47 peso 500. Las utilidades
   del diseño estaban un escalón abajo (100, 48 y 32), así que un <h1> medía
   lo del h2 del manual y un <h2> lo del h3. Los pisos de móvil (430px) son
   los mismos que usa el resto del tema: 51 para los titulares de 100 y 22
   para los de 48. */
.bluumi-shp .h1 {
	color: var(--white);
	--min-font-size: 51; --max-font-size: 116; font-size: var(--interpolate);
	font-family: 'Public Sans';
	font-style: normal;
	font-weight: 200;
	line-height: 1.138;
	letter-spacing: 0px;
}

.bluumi-shp .h2,
/* "La tecnología empieza mucho antes" lleva `.subtitle` y `.h2`: la utilidad
   `.subtitle` se declara más abajo y le ganaba por orden, así que el titular
   de sección se quedaba en 48px. El selector combinado sube la especificidad
   y deja mandar al h2. */
.bluumi-shp .subtitle.h2 {
	color: var(--white);
	--min-font-size: 51; --max-font-size: 100; font-size: var(--interpolate);
	font-family: 'Public Sans';
	font-style: normal;
	font-weight: 200;
	line-height: 1.14;
	letter-spacing: 0px;
}

.bluumi-shp .h3 {
	color: var(--white);
	--min-font-size: 22; --max-font-size: 48; font-size: var(--interpolate);
	font-family: 'Public Sans';
	font-style: normal;
	font-weight: 300;
	line-height: 1.229;
	letter-spacing: 0px;
}

.bluumi-shp .h4 {
	color: var(--white);
	font-size: 32px;
	font-family: 'Public Sans';
	font-style: normal;
	font-weight: 500;
	line-height: 1.469;
	letter-spacing: 0px;
}

.bluumi-shp .text1 {
	color: var(--white);
	--min-font-size: 15; --max-font-size: 20; font-size: var(--interpolate);
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: 0px;
}

.bluumi-shp .text2 {
	color: var(--white);
	font-size: 20px;
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: 0px;
}

/* Objeto de sección: contenedor flex con el gutter lateral del diseño. */
.bluumi-shp .section {
	display: flex;
	flex-direction: column;
	padding: 0 24px;
}

/* Imagen "input" del diseño: circular. wp:image envuelve la imagen en un
   figure, así que el redondeo también tiene que aplicar al <img>. */
.bluumi-shp .input,
.bluumi-shp .input img {
	border-radius: 50%;
}

/* ---------------------------------------------------------------------------
 * Wrapper (equivalente al `body` del diseño)
 * ------------------------------------------------------------------------ */

.bluumi-shp {
	container: shp / inline-size;
	display: flex;
	flex-direction: column;
	color: var(--white);
	font-family: 'Inter';
	letter-spacing: 0px;
	text-align: center;
	background-color: var(--negro);
	/* El diseño está construido sobre un canvas fijo de 1920px (el mismo
	   --bluumi-design-width del home). Antes topábamos el ancho del patrón a
	   1920 y lo centrábamos, pero eso dejaba cualquier fondo cortado en
	   pantallas más anchas (el fondo vive en la caja de la fila). Ahora el
	   patrón ocupa todo el ancho y el canvas de 1920 se reconstruye como
	   padding interno de cada fila: `--bleed` es el aire que sobra a cada lado.
	   En pantallas <= 1920 vale 0, así que el render no cambia. */
	width: 100%;
	margin-inline: 0;
	--bleed: max(0px, calc((100cqw - var(--bluumi-design-width, 1920px)) / 2));
	/* El diseño ponía overflow:auto en body. Acá el scroll lo maneja la página,
	   así que recortamos lo que desborde (los círculos con blur) sin crear un
	   scroll interno. */
	overflow: hidden;
}

/* Las filas ocupan todo el ancho —así un fondo llega de lado a lado— pero su
   contenido se queda dentro del canvas de 1920 centrado. Se excluye el CTA:
   ya tiene su propio ancho (754px) y se centra solo. */
.bluumi-shp > *:not(.bluumi-row-cta) {
	padding-inline: var(--bleed);
}

/*
 * WordPress aplica el blockGap del tema como margin-block-start a los hijos de
 * los grupos flow (incluido el propio wrapper). El diseño espacia con `gap` (y
 * algunos márgenes propios), así que lo anulamos con :where() —especificidad
 * mínima— para no pisar los márgenes del propio diseño (col-left, col-right,
 * cards, etc.).
 */
.bluumi-shp > *,
.bluumi-shp :where(.col2, .col3, .col4, .col5, .col6, .col7, .col9, .col-top, .column-a, .column-b, .column-col-top, .row1, .row2, .card) > * {
	margin-block-start: 0;
}

/*
 * El reset del diseño (reset.css) no se porta. Limpiamos los márgenes por
 * defecto de títulos, párrafos y figures dentro del scope para que el espaciado
 * lo controle `gap`; las reglas específicas de más abajo (con más especificidad)
 * siguen ganando.
 */
.bluumi-shp :where(h1, h2, h3, h4, p, figure, .wp-block-image) {
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * Secciones (portadas de somos-hacemos-plus.css)
 * ------------------------------------------------------------------------ */

.bluumi-shp .subtitle {
	color: var(--white);
	--min-font-size: 22; --max-font-size: 48; font-size: var(--interpolate);
	font-family: 'Public Sans';
	font-style: normal;
	font-weight: 300;
	line-height: 1.229;
	letter-spacing: 0px;
	text-align: left;
}

/* column-a */
.bluumi-shp .column-a {
	display: flex;
	flex-direction: column;
	gap: 52px;
	flex-shrink: 0;
}

.bluumi-shp .column-col-top {
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.bluumi-shp .column-subtitle1 {
	color: var(--white);
	font-size: 32px;
	font-family: 'Public Sans';
	font-style: normal;
	font-weight: 500;
	line-height: 1.469;
	letter-spacing: 0px;
	text-align: left;
}

.bluumi-shp .column-subtitle2 {
	color: var(--white);
	font-size: 48px;
	font-family: 'Public Sans';
	font-style: normal;
	font-weight: 300;
	line-height: 1.229;
	letter-spacing: 0px;
	text-align: left;
}

.bluumi-shp .column-text1 {
	text-align: left;
}
/* end column-a */

/* column-b */
.bluumi-shp .column-b {
	display: flex;
	flex-direction: column;
	gap: 15px;
	flex-grow: 1;
}

.bluumi-shp .column-subtitle3 {
	color: var(--white);
	font-size: 32px;
	font-family: 'Public Sans';
	font-style: normal;
	font-weight: 500;
	line-height: 1.469;
	letter-spacing: 0px;
	text-align: left;
}

.bluumi-shp .column-text2 {
	text-align: left;
}
/* end column-b */

/* Hero */
.bluumi-shp .col2 {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	/* El hero de esta página mide lo mismo que el resto de los heroes del sitio:
	   el token de `style.css` (100vh escritorio, 100svh en móvil). */
	min-height: var(--bluumi-hero-height);
	/* Si el editor carga una imagen en el fondo del hero, se comporta como la de la
	   home: llena la caja recortando (cover, nunca deforma) y sin repetirse.
	   Ojo: el fondo tiene que estar en ESTE grupo, no en `.bluumi-shp` (el padre
	   envuelve la página entera, 3.646px, y `cover` agrandaba la foto ~2,7x). */
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.bluumi-shp .col3 {
	position: relative; z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 44px;
	/* El diseño reserva 308px arriba y abajo sobre el canvas de 1920. Tal cual,
	   en móvil/tablet deja 308px de aire contra el header y otros 308px antes de
	   la sección siguiente. Escalamos proporcional al viewport (16vw = 308px a
	   1920) con un piso para que no se pierda todo el aire. */
	padding: clamp(88px, 16vw, 308px) 160px clamp(56px, 16vw, 308px);
}

/* El grupo interior del hero es donde el editor carga la foto de fondo, así que
   lleva dos ajustes para que el hero ocupe todo el ancho y todo su alto:
   1. llena el alto de la fila (si no, abajo queda una franja por la que asoma el
      fondo de la página) y su fondo nunca se repite ni se deforma;
   2. en pantallas más anchas que el canvas de 1920 sale del padding `--bleed` de
      la fila con márgenes negativos y devuelve ese aire como padding propio: el
      fondo llega de lado a lado y los textos quedan exactamente donde estaban.
      El corte es 1281px porque por debajo el padding lateral competiría con los
      --margin-md/--margin-sm de las bandas de 1280 y 576. */
.bluumi-shp .col2 > .col3 {
	flex: 1 1 auto;
	/* El aire de arriba del diseño (clamp(88px, 16vw, 308px)) se medía con la barra
	   en el flujo. Como ahora la barra es fija y flota sobre el hero, se le suma su
	   altura: el título queda a la misma distancia que antes y en la misma
	   proporción que en la home. */
	padding-top: calc(var(--bluumi-header-height) + clamp(88px, 16vw, 308px));
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

@media screen and (min-width: 1281px) {
	.bluumi-shp .col2 > .col3 {
		margin-inline: calc(-1 * var(--bleed));
		padding-inline: calc(160px + var(--bleed));
	}
}

/* Fundido del hero: el mismo degradado que la home. Vive en la FILA (`.col2`) y no
   en el grupo interior porque una caja absoluta con `inset: 0` toma el *padding
   box*: así cubre TODO el hero, incluido el padding vertical que el editor le ponga
   a la fila. Estando en el grupo interior, ese padding quedaba fuera del fundido y
   el fondo asomaba sin degradar por abajo.
   El texto sigue por encima: el grupo interior lleva `z-index: 1`. */
.bluumi-shp .col2::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(21, 29, 36, 0) var(--bluumi-hero-fade-start, 53%),
		var(--negro) var(--bluumi-hero-fade-end, 87%)
	);
}

/* El grupo interior se queda con su propio fundido SOLO si la foto está ahí dentro
   (es el único caso en que la fila no la tapa). Si no, se sumarían dos degradados y
   el fundido se vería más cerrado que el de la home. */
.bluumi-shp .col2 > .col3::before {
	content: none;
}

.bluumi-shp .col2 > .col3[style*="background-image"]::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(21, 29, 36, 0) var(--bluumi-hero-fade-start, 53%),
		var(--negro) var(--bluumi-hero-fade-end, 87%)
	);
}

.bluumi-shp .title-somos {
	text-align: left;
}

/* Intro */
.bluumi-shp .col4 {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Aire de sección de la escala del sistema (96px escritorio / 64px móvil). */
	padding: var(--space-8) 423px;
}

.bluumi-shp .col5 {
	width: 100%;
	max-width: 1280px;
	display: flex;
	flex-direction: column;
	gap: 44px;
}

.bluumi-shp .subtitle-lorem-ipsum {
	min-height: 120px;
	display: flex;
	align-items: center;
	flex-shrink: 0;
	text-align: left;
}

.bluumi-shp .text-lorem-ipsum {
	text-align: left;
}

/* Fila proyecto 1 */
.bluumi-shp .row1 {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 102px;
	background-color: var(--negro);
	overflow: hidden;
	/* Las dos filas de proyecto comparten las dos fotos grandes: la de la fila 1
	   cierra la fila por abajo y la de la fila 2 la abre por arriba, así que el
	   aire de arriba lo pone solo esta fila y el de abajo solo la fila 2. Antes
	   las dos llevaban `--space-8` en los dos lados y entre las fotos quedaban
	   192px (96 + 96) en lugar de tocarse, como en el diseño. El `padding`
	   lateral lo pone la container query cuando se apilan. */
	padding-block: var(--space-8) 0;
}

.bluumi-shp .img-circle2 {
	/* El círculo se ancla al canvas de 1920, no al ancho real de la fila: por eso
	   se descuenta el aire que agregamos a cada lado (`--bleed`) para que quede
	   exactamente donde lo puso el diseño. */
	position: absolute; top: 47px; right: calc(1454px + var(--bleed));
	filter: blur(28.5px);
	width: calc(100% - 1454px - 2 * var(--bleed));
	max-width: 770px;
}

.bluumi-shp .col-left {
	position: relative; z-index: 1;
	margin-top: 322px;
	width: 691px;
}

.bluumi-shp .col-left .column-col-top {
	margin-right: 8px;
}

.bluumi-shp .mansera-proyecto1 {
	width: 960px;
	flex-shrink: 0;
}

/* Fila proyecto 2.
   Es espejo exacto de la fila 1 (mismo inset, gap y ancho de texto) para que
   las dos filas queden simétricas dentro del canvas:
   fila 1 = [texto 691] [gap 102] [imagen 960] con justify-content:flex-end;
   fila 2 = [imagen 960] [gap 102] [texto 691] con justify-content:flex-start.
   El inset resultante es el mismo en ambos lados (167px sobre 1920 y 152px
   cuando la barra de scroll deja el canvas en 1905). */
.bluumi-shp .row2 {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 102px;
	background-color: var(--negro);
	/* Espejo de `.row1`: acá la foto abre la fila, así que el aire de arriba lo
	   pone la fila 1 y el de abajo esta. Ver la nota de `.row1`. */
	padding-block: 0 var(--space-8);
}

.bluumi-shp .mansera-proyecto2 {
	width: 960px;
	flex-shrink: 0;
}

.bluumi-shp .col-right {
	margin-top: 336px;
	width: 691px;
}

.bluumi-shp .col-right .column-text1 {
	margin-right: 18px;
}

/* Valores (col6) */
.bluumi-shp .col6 {
	align-items: center;
	gap: 59px;
	padding-block: var(--space-8);
}

.bluumi-shp .col-top {
	width: 100%;
	max-width: 1572px;
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.bluumi-shp .subtitle-nuestra-historia {
	text-align: left;
}

.bluumi-shp .col7 {
	container: col7 / inline-size;
	width: 100%;
	max-width: 1572px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px 24px;
	margin-inline: auto;
}

/* card */
.bluumi-shp .card,
.bluumi-shp .card1,
.bluumi-shp .card2,
.bluumi-shp .card3,
.bluumi-shp .card4 {
	margin: 0 !important;
	width: 100%;
	display: flex;
	align-items: flex-start;
	gap: 20px;
	background-color: rgba(255, 255, 255, 0.07);
	padding: 22px 28px 28px 28px;
}

/* El stats row trae `margin-top: 51px` del home. Acá el ritmo vertical lo marca
   el `gap: 44px` de .col3, así que se neutraliza para no sumar los dos. */
.bluumi-shp .bluumi-stats-row {
	margin-top: 0;
}

/* Icono de cada card: los cuatro al mismo tamaño (71x71 del diseño). Antes solo
   existía la regla de `.card-icon2`, así que las cards que usan `.card-icon`
   mostraban el PNG a su tamaño natural (138px) y quedaban más grandes que la de
   Compromiso. Se fija el tamaño del contenedor y de la imagen para que no
   dependa del tamaño del archivo ni de su relación de aspecto. */
.bluumi-shp .card-icon,
.bluumi-shp .card-icon2 {
	width: 71px;
	flex-shrink: 0;
	aspect-ratio: 1 / 1;
}

.bluumi-shp .card-icon img,
.bluumi-shp .card-icon2 img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Diferencia de margen del diseño entre las dos variantes. */
.bluumi-shp .card-icon {
	margin-top: 6px;
}

.bluumi-shp .card-icon2 {
	margin-top: 5px;
}

.bluumi-shp .col8 {
	gap: 14px;
}

/* Fondos europeos (col9) */
.bluumi-shp .col9 {
	gap: 10px;
	--min-font-size: 15; --max-font-size: 18; font-size: var(--interpolate);
	font-weight: 700;
	line-height: 2;
	background-color: var(--negro);
	padding-block: var(--space-8);
}

.bluumi-shp .logo {
	width: 100%;
	flex-shrink: 0;
	align-self: center;
}

.bluumi-shp .text-top {
	margin-left: 100px; margin-right: 99px;
	text-align: center;
}

.bluumi-shp .logos {
	margin-top: 25px;
	max-width: 1268px;
}

.bluumi-shp .text-europa-se-siente {
	margin-top: 25px;
}

.bluumi-shp .logotipo-pyme-digital {
	margin-left: 1px;
	max-width: 321px;
}

/* ---------------------------------------------------------------------------
 * Patrón "Bluumi Equipo" insertado en la página
 * ------------------------------------------------------------------------ */

/*
 * La sección viene del home, donde es un bloque suelto y funciona porque ahí
 * `max-width: 1920` + `margin: 0 auto` la centran dentro de un contenedor de
 * flujo normal. Dentro de esta página el wrapper es un flex column, así que esa
 * misma combinación hace otra cosa:
 *
 * - `margin: 0 auto` en el eje cruzado apaga el `stretch`: el ancho pasa a ser
 *   "lo que mida el contenido". El carrusel (4 slides que Swiper fija en
 *   píxeles) empuja ese ancho hacia arriba y la sección deja de acompañar al
 *   viewport, o sea que no se achica en pantallas chicas.
 * - `max-width: 1920` la vuelve a topar, así que en pantallas más anchas el
 *   fondo se corta y el contenido queda metido hacia adentro.
 *
 * Se le devuelve el comportamiento de fila del resto de la página: ancho
 * completo, sin tope, y el aire del canvas lo aporta el `padding-inline:
 * var(--bleed)` que ya recibe todo hijo del wrapper. `min-width: 0` es el que
 * la deja encogerse por debajo del ancho mínimo del carrusel, que es lo que hoy
 * la clava en escritorio.
 */
.bluumi-shp .bluumi-equipo {
	max-width: none;
	align-self: stretch;
	margin-inline: 0;
	min-width: 0;
}

/* ---------------------------------------------------------------------------
 * Breakpoints (márgenes / paddings)
 * ------------------------------------------------------------------------ */

@media screen and (max-width: 1280px) {
	.bluumi-shp .col3 {
		padding-inline: var(--margin-md);
	}
	.bluumi-shp .col4 {
		padding-inline: var(--margin-md);
	}
	.bluumi-shp .col-left .column-col-top {
		margin-inline: 0;
	}
	.bluumi-shp .col-right .column-text1 {
		margin-inline: 0;
	}
	.bluumi-shp .card {
		padding-inline: var(--margin-sm);
	}
	.bluumi-shp .card1 {
		margin-inline: 0;
	}
	.bluumi-shp .card2 {
		margin-inline: 0;
	}
	.bluumi-shp .card3 {
		padding-inline: var(--margin-sm);
		margin-inline: 0;
	}
	.bluumi-shp .card4 {
		margin-inline: 0;
	}
	.bluumi-shp .text-top {
		margin-inline: 0;
	}
}

@media screen and (max-width: 576px) {
	.bluumi-shp .col3 {
		padding-inline: var(--margin-sm);
	}
	.bluumi-shp .col4 {
		padding-inline: var(--margin-sm);
	}
}

/* ---------------------------------------------------------------------------
 * Container queries (filas flex)
 * ------------------------------------------------------------------------ */

@container shp (width < 1752px) {
	.bluumi-shp .row1 {
		flex-direction: column;
		align-items: center;
		gap: 100px;
		padding: var(--space-8) 24px;
	}
	.bluumi-shp .row1 > * {
		margin-top: unset !important;
		text-align: center;
	}
	.bluumi-shp .row1 > .col-left {
		width: 100%;
		max-width: 691px;
	}
	.bluumi-shp .row1 > .col-left > * {
		text-align: unset;
	}
	.bluumi-shp .row1 > .mansera-proyecto1 {
		width: 100%;
		max-width: 960px;
	}
}

@container shp (width < 1752px) {
	.bluumi-shp .row2 {
		flex-direction: column;
		align-items: center;
		gap: 100px;
		padding: var(--space-8) 24px;
	}
	.bluumi-shp .row2 > * {
		margin-top: unset !important;
		text-align: center;
	}
	.bluumi-shp .row2 > .mansera-proyecto2 {
		width: 100%;
		max-width: 960px;
	}
	.bluumi-shp .row2 > .col-right {
		/* En apilado el texto va antes que la imagen, para mantener el ritmo
		   texto → imagen → texto → imagen de todo el mobile. */
		order: -1;
		width: 100%;
		max-width: 691px;
	}
	.bluumi-shp .row2 > .col-right > * {
		text-align: unset;
	}
}

/*
 * Apilado general del patrón (contenedor `shp` < 1752px). Va en la query del
 * contenedor PADRE: un contenedor no puede verse afectado por su propia
 * container query, así que `.col7` nunca podría apilarse desde `@container col7`.
 */
@container shp (width < 1752px) {
	.bluumi-shp .col7 {
		grid-template-columns: 1fr;
	}
}


/* ---------------------------------------------------------------------------
 * Solo editor de bloques (Gutenberg). En el front nada de esto aplica.
 *
 * 1) El canvas del editor carga el CSS del admin de WordPress, que define una
 *    clase genérica `.card` (tarjetas del escritorio) con `max-width: 520px`.
 *    Nuestro patrón usa `class="card"`, así que esa regla se filtraba y dejaba
 *    las 4 tarjetas a media celda. La anulamos solo acá.
 * 2) El canvas del editor es más angosto que los 1752px que necesita el diseño,
 *    así que las filas y la grilla se apilaban. Forzamos el ancho de diseño: el
 *    editor scrollea en horizontal y se ve el layout real de escritorio.
 *    (Si preferís el modo apilado mientras editás, borrá estas 3 declaraciones.)
 * ------------------------------------------------------------------------ */
.editor-styles-wrapper .bluumi-shp .card,
.block-editor-block-list__layout .bluumi-shp .card {
	max-width: none !important;
}

.editor-styles-wrapper .bluumi-shp,
.block-editor-block-list__layout .bluumi-shp {
	min-width: 1760px;
}

/* ---------------------------------------------------------------------------
 * Hero armado con el bloque Portada (core/cover)
 * ---------------------------------------------------------------------------
 * El hero de la página puede armarse como Portada en vez de .col2/.col3. Cuando
 * es el primer bloque del patrón, se lo viste como el resto de los heroes del
 * sitio: el alto del token (100vh en escritorio, 100svh en móvil) y el mismo
 * fundido a negro del pie.
 *
 * El editor le pone al Portada un `min-height` propio en el `style` inline; por
 * eso el alto real lo manda el contenedor INTERNO (hijo): al medir 100vh, el
 * cover crece con él y el `min-height` inline deja de ser el techo.
 * ------------------------------------------------------------------------ */
.bluumi-shp > .wp-block-cover:first-child {
	padding: 0;
	background-color: var(--negro);
}

.bluumi-shp > .wp-block-cover:first-child > .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
	width: 100%;
	min-height: var(--bluumi-hero-height);
}

.bluumi-shp > .wp-block-cover:first-child::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(21, 29, 36, 0) var(--bluumi-hero-fade-start, 53%), var(--negro) var(--bluumi-hero-fade-end, 87%));
}

/* ---------------------------------------------------------------------------
 * Ritmo vertical de las páginas interiores
 * ---------------------------------------------------------------------------
 * Todas las secciones comparten el mismo aire vertical: `--space-8` (96px) en
 * escritorio y `--space-7` (64px) en móvil, la separación entre secciones del
 * sistema de diseño (Documentacion/estilos/bluumi-sistema-de-diseno.md).
 *
 * Antes cada bloque traía el valor del diseño estático —80px en la intro,
 * 130px en valores, 80/56px en fondos, 24px en las filas de proyecto— y encima
 * el editor guardaba otros paddings inline. Resultado: la misma página cambiaba
 * de aire en cada sección y cada página tenía un ritmo distinto.
 *
 * El hero (`.wp-block-cover`) queda fuera: su alto lo manda `--bluumi-hero-height`
 * y el fundido del pie necesita pegarse a la sección siguiente.
 * ------------------------------------------------------------------------ */

.bluumi-shp > .wp-block-columns {
	/* El aire de esta fila lo escribe el editor en el `style` del bloque
	   (112px en /somos/), así que hay que pisarlo con `!important`. */
	padding-block: var(--space-8) !important;
}

@media screen and (max-width: 600px) {
	.bluumi-shp .col4,
	.bluumi-shp .col6,
	.bluumi-shp .col9,
	.bluumi-shp .row1,
	.bluumi-shp .row2,
	.bluumi-shp > .wp-block-columns {
		padding-block: var(--space-7) !important;
	}
}