/**
 * Artículos — geometría de los contenedores.
 *
 * El diseño de las tarjetas (radios, colores, tipografía, grid y slider móvil)
 * NO está aquí: vive en los snippets globales del sitio (HFCM), que aplican
 * sobre las clases `audience-*`, `slider-*` y `guide-header` que este markup
 * reproduce. Este archivo solo repone lo que Elementor generaba por elemento,
 * con IDs hasheados (`.elementor-2097 .elementor-element-3d70883e`) que dejan
 * de existir al sustituir los contenedores montados a mano por el shortcode.
 *
 * Se usan las custom properties de Elementor (`--display`, `--width`, …) en
 * lugar de propiedades planas porque son las que consumen las reglas `.e-con`
 * de `elementor-frontend.css`: así el valor calculado es idéntico al original.
 *
 * Breakpoints de Elementor en este sitio: móvil <= 767px, desktop >= 768px.
 *
 * Valores portados de las páginas que estaban montadas a mano con Elementor:
 *   - listado  /guias/       (página 2097): 2a97d6fc, 3d70883e, 3121ea2,
 *                            d0daa45, 10dbac53, 137b7985, 33ee71f7, 28171acb,
 *                            2be34b37, 381c7d23
 *   - detalle  /guia-soledad/ (página 2092): 50143ddc, 5b69e627, 27bdf24a,
 *                            329e368f, 1c5ae593, 7e209cc7, 719138a9, 544fc32e,
 *                            664faa08
 */

/* ==========================================================================
   Listado y bloque de relacionadas
   ========================================================================== */

/* Banda del encabezado de sección. */
.omni-articulos__heading {
	--display: flex;
	--min-height: 30px;
	--flex-direction: column;
	--container-widget-width: calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );
	--container-widget-height: initial;
	--container-widget-flex-grow: 0;
	--container-widget-align-self: initial;
	--flex-wrap-mobile: wrap;
	--align-items: center;
	--margin-top: 0px;
	--margin-bottom: 0px;
	--margin-left: 0px;
	--margin-right: 0px;
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	background-color: #ffffff;
}

/* Encabezado de sección: es el subrayado de 2px del diseño. */
.omni-articulos__group-header {
	--display: flex;
	--align-items: center;
	--container-widget-width: calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );
	--border-style: solid;
	--border-top-width: 0px;
	--border-right-width: 0px;
	--border-bottom-width: 2px;
	--border-left-width: 0px;
	--border-color: #7a7a7a5c;
	--border-radius: 0px 0px 0px 0px;
	--margin-top: 60px;
	--margin-bottom: 30px;
	--margin-left: 0px;
	--margin-right: 0px;
	--padding-top: 0px;
	--padding-bottom: 15px;
	--padding-left: 0px;
	--padding-right: 0px;
	border-style: solid;
	border-width: 0 0 2px 0;
	border-color: #7a7a7a5c;
}

.omni-articulos__group-title {
	--align-self: center;
}

.omni-articulos__group-title .elementor-heading-title {
	font-family: "Inter", sans-serif;
	font-size: 22px;
	font-weight: 900;
	color: #2f5f6d;
}

/*
 * Separador entre el encabezado y las tarjetas. No es decorativo: el CSS del
 * sitio lo pinta con `.e-con:has(+ .audience-section) { background-color: #d8efe5 }`,
 * y su margen negativo solapa la banda anterior.
 */
.omni-articulos__spacer {
	--display: flex;
	--min-height: 0px;
	--flex-direction: column;
	--container-widget-width: 100%;
	--container-widget-height: initial;
	--container-widget-flex-grow: 0;
	--container-widget-align-self: initial;
	--flex-wrap-mobile: wrap;
	--margin-top: -20px;
	--margin-bottom: 0px;
	--margin-left: 0px;
	--margin-right: 0px;
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
}

.omni-articulos__section {
	--display: flex;
	--flex-direction: column;
	--container-widget-width: calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );
	--container-widget-height: initial;
	--container-widget-flex-grow: 0;
	--container-widget-align-self: initial;
	--flex-wrap-mobile: wrap;
	--justify-content: center;
	--align-items: center;
	--gap: 0px 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	background-color: #ffffff;
}

/*
 * El exterior es solo el portador de la banda de fondo, a todo el ancho. Todo el
 * relleno vertical se queda en el interior.
 *
 * Hace falta neutralizarlo porque `.audience-section` trae `padding-bottom: 56px`
 * en escritorio y `padding-top: 32px !important` en móvil. Con las dos clases en
 * el mismo elemento —como en las páginas montadas a mano— esos valores los
 * anulaba el `padding: 0 / 40px !important` de `.audience-section__inner`; al
 * separarlos volverían a aplicarse y se sumarían a los del interior.
 *
 * Lleva `!important` y dos clases para ganar al `!important` de una clase del
 * snippet del sitio.
 */
.omni-articulos .omni-articulos__section {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Interior: limita el contenido a 1440px y deja la banda a todo el ancho. */
.omni-articulos__inner {
	--display: flex;
	--flex-direction: column;
	--container-widget-width: calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );
	--container-widget-height: initial;
	--container-widget-flex-grow: 0;
	--container-widget-align-self: initial;
	--flex-wrap-mobile: wrap;
	--justify-content: center;
	--align-items: center;
	--gap: 0px 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	--width: 100%;
}

.omni-articulos__grid {
	--display: flex;
	--flex-direction: row;
	--container-widget-width: calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );
	--container-widget-height: 100%;
	--container-widget-flex-grow: 1;
	--container-widget-align-self: stretch;
	--flex-wrap-mobile: wrap;
	--justify-content: center;
	--align-items: stretch;
	--gap: 0px 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
}

.omni-articulos__dots {
	--display: flex;
	--flex-direction: row;
	--container-widget-width: initial;
	--container-widget-height: 100%;
	--container-widget-flex-grow: 1;
	--container-widget-align-self: stretch;
	--flex-wrap-mobile: wrap;
}

/* ==========================================================================
   Tarjeta
   ========================================================================== */

.omni-articulo-card {
	--display: flex;
	--flex-direction: column;
	--container-widget-width: calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );
	--container-widget-height: initial;
	--container-widget-flex-grow: 0;
	--container-widget-align-self: initial;
	--flex-wrap-mobile: wrap;
	--justify-content: flex-start;
	--align-items: center;
	--border-radius: 20px 20px 20px 20px;
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	background-color: #ffffff;
}

/*
 * El CSS del sitio sobrescribe este fondo a #ffffff con !important; se porta el
 * valor original por fidelidad, no porque sea el que acaba viéndose.
 */
.omni-articulo-card__body {
	--display: flex;
	--flex-direction: column;
	--container-widget-width: calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );
	--container-widget-height: initial;
	--container-widget-flex-grow: 0;
	--container-widget-align-self: initial;
	--flex-wrap-mobile: wrap;
	--align-items: center;
	background-color: #e8f5ef;
}

.omni-articulo-card__title {
	text-align: center;
}

.omni-articulo-card__title .elementor-heading-title {
	color: #2f5f6d;
}

.omni-articulo-card__text {
	text-align: center;
}

/* ==========================================================================
   Detalle de artículo
   ========================================================================== */

/* Banda del título. El diseño original la tenía en crema (#f4efe9); el cliente
   la pidió blanca, para que no corte la página entre la imagen y el texto. */
.omni-articulo__title-band {
	--display: flex;
	--min-height: 71px;
	--flex-direction: column;
	--container-widget-width: 100%;
	--container-widget-height: initial;
	--container-widget-flex-grow: 0;
	--container-widget-align-self: initial;
	--flex-wrap-mobile: wrap;
	--justify-content: center;
	background-color: #ffffff;
}

.omni-articulo__title {
	--align-self: center;
}

.omni-articulo__title .elementor-heading-title {
	font-family: "Inter", sans-serif;
	font-size: 22px;
	font-weight: 900;
	color: #2f5f6d;
}

.omni-articulo__subtitle-band {
	--display: flex;
	--flex-direction: column;
	--container-widget-width: 100%;
	--container-widget-height: initial;
	--container-widget-flex-grow: 0;
	--container-widget-align-self: initial;
	--flex-wrap-mobile: wrap;
}

/*
 * El subtítulo va alineado a la izquierda y al mismo ancho que el cuerpo, no
 * centrado ni acotado: comparte banda con el cuerpo, así que basta con no
 * ponerle tope para que ambos tengan los mismos bordes. `text-align` se declara
 * sobre el párrafo y no solo sobre el contenedor para que no dependa de que
 * ninguna regla del sitio alinee los `p` por su cuenta.
 */
.omni-articulo__subtitle,
.omni-articulo__subtitle .elementor-heading-title {
	text-align: left;
}

.omni-articulo__subtitle .elementor-heading-title {
	font-family: "Inter", sans-serif;
	font-size: 18px;
	color: #2e2e2c;
}

/*
 * Medida del título.
 *
 * Va centrado dentro de una banda de 1170px. Sin tope, un título largo ocuparía
 * la línea entera y crecería hacia los dos lados. 600px es la medida que el
 * propio sitio usa para sus líneas centradas (el texto del CTA de
 * `/como-funciona/`); es el único número que hay que tocar para hacerlo más
 * ancho o más estrecho.
 */
.omni-articulo__title .elementor-heading-title {
	max-width: 600px;
	margin-inline: auto;
}

/*
 * Hero: banda con la imagen de fondo.
 *
 * La plantilla no pinta el fondo, sino que emite las dos URLs como variables en
 * el propio elemento (`--omni-articulo-hero` y `--omni-articulo-hero-movil`), y
 * es esta hoja la que elige por ancho. Ventajas de hacerlo así: el navegador
 * descarga solo la imagen que aplica —no pide los fondos de declaraciones
 * sobrescritas— y el salto a móvil vive con el resto de breakpoints en vez de
 * repartirse entre PHP y CSS.
 *
 * Si un artículo no tiene imagen destacada no se emite ninguna variable, el
 * `var()` queda sin resolver y `background-image` cae a `none`, que es justo lo
 * que se quiere.
 */
.omni-articulo__hero {
	background-image: var( --omni-articulo-hero );
	--display: flex;
	--min-height: 500px;
	--flex-direction: row;
	--container-widget-width: calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );
	--container-widget-height: 100%;
	--container-widget-flex-grow: 1;
	--container-widget-align-self: stretch;
	--flex-wrap-mobile: wrap;
	--align-items: center;
	--gap: 0px 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	--background-transition: 0.3s;
	--overlay-opacity: 0.5;
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	background-color: #2fe8d526;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.omni-articulo__meta-band,
.omni-articulo__body-band {
	--display: flex;
	--flex-direction: column;
	--container-widget-width: 100%;
	--container-widget-height: initial;
	--container-widget-flex-grow: 0;
	--container-widget-align-self: initial;
	--flex-wrap-mobile: wrap;
}

/* Línea de autoría y fecha, con el mismo subrayado de 2px que los encabezados. */
.omni-articulo__meta {
	--display: flex;
	--flex-direction: row;
	--container-widget-width: initial;
	--container-widget-height: 100%;
	--container-widget-flex-grow: 1;
	--container-widget-align-self: stretch;
	--flex-wrap-mobile: wrap;
	--border-style: solid;
	--border-top-width: 0px;
	--border-right-width: 0px;
	--border-bottom-width: 2px;
	--border-left-width: 0px;
	--border-color: #7a7a7a5c;
	--border-radius: 0px 0px 0px 0px;
	/*
	 * El diseño original separaba esta línea 60px de lo anterior, que entonces
	 * era la imagen. Ahora lo anterior es el subtítulo y 60px dejaban demasiado
	 * aire; sumaban además los 10px de relleno por defecto de cada banda.
	 */
	--margin-top: 24px;
	--margin-bottom: 30px;
	--margin-left: 0px;
	--margin-right: 0px;
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	border-style: solid;
	border-width: 0 0 2px 0;
	border-color: #7a7a7a5c;
}

.omni-articulo__body {
	--display: flex;
	--flex-direction: column;
	--container-widget-width: 100%;
	--container-widget-height: initial;
	--container-widget-flex-grow: 0;
	--container-widget-align-self: initial;
	--flex-wrap-mobile: wrap;
}

/* ==========================================================================
   CTA de cierre del artículo
   ==========================================================================

   Clona el bloque con el que el sitio cierra sus páginas (`form-slab` →
   `form-box` → `form-box__content`, ver `/como-funciona/`), así que los colores,
   la caja blanca, la tipografía y el botón `button-primary` los pone el CSS del
   sitio. Aquí solo se repone la geometría que Elementor generaba por elemento.

   Portado de `/como-funciona/`: efee491, 968823c, f336c2e, 10ff30a, 19784e0
   y 692b771.
   ========================================================================== */

.omni-articulo__cta-band {
	--display: flex;
	--flex-direction: column;
	--container-widget-width: calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );
	--container-widget-height: initial;
	--container-widget-flex-grow: 0;
	--container-widget-align-self: initial;
	--flex-wrap-mobile: wrap;
	--justify-content: center;
	--align-items: center;
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	/*
	 * `.form-slab` declara el fondo como `rgba(115, 210, 171, 0.25)`, pero el CSS
	 * por elemento lo pisaba con este valor sólido, que es el mismo color
	 * resuelto sobre blanco. Se porta tal cual para no depender de qué haya
	 * debajo.
	 */
	background-color: #e8f5ef;
}

.omni-articulo__cta-box {
	--display: flex;
	--flex-direction: column;
	--container-widget-width: calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );
	--container-widget-height: initial;
	--container-widget-flex-grow: 0;
	--container-widget-align-self: initial;
	--flex-wrap-mobile: wrap;
	--justify-content: center;
	--align-items: center;
}

.omni-articulo__cta-content {
	--display: flex;
	--flex-direction: column;
	--container-widget-width: calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );
	--container-widget-height: initial;
	--container-widget-flex-grow: 0;
	--container-widget-align-self: initial;
	--flex-wrap-mobile: wrap;
	--justify-content: center;
	--align-items: center;
	--padding-top: 0px;
	--padding-bottom: 8px;
	--padding-left: 0px;
	--padding-right: 0px;
}

.omni-articulo__cta-title,
.omni-articulo__cta-text {
	text-align: center;
}

/*
 * Solo familia y color: el tamaño y el peso los pone el CSS del sitio con la
 * regla de etiqueta `h2` (32px en escritorio, 20px a partir de 640px, ambas con
 * `!important`), así que declararlos aquí sería código muerto. La familia y el
 * color llegarían igualmente heredados de `.form-title`; se dejan explícitos
 * como red de seguridad.
 */
.omni-articulo__cta-title .elementor-heading-title {
	font-family: "Inter", sans-serif;
	color: #2f5f6d;
}

.omni-articulo__cta-action > .elementor-widget-container {
	margin: 0;
}

/*
 * Etiqueta larga o corta según el ancho. `.button-primary` lleva
 * `white-space: nowrap` y en móvil pasa a `width: 100%`, así que el texto largo
 * se saldría de la pastilla. El corte va a 640px, el mismo punto en el que el
 * CSS del sitio cambia el botón a ancho completo.
 */
.omni-articulo__cta-label--short {
	display: none;
}

/* ==========================================================================
   Dirección de los contenedores flex — nota de especificidad
   ==========================================================================

   Elementor declara sus propios valores por defecto para estas variables:

     .elementor-element { --flex-direction: initial; --align-self: initial; … }
     .e-con.e-flex      { --flex-direction: column; … }

   La primera tiene una clase, así que las reglas de arriba (también de una
   clase) empatan con ella y ganan por orden de carga, porque esta hoja se
   encola después de `elementor-frontend`.

   La segunda tiene DOS clases y gana a cualquier regla de una sola, de modo que
   `--flex-direction` hay que repetirlo aquí con especificidad suficiente. Solo
   afecta a los contenedores que necesitan dirección `row`: los que van en
   `column` ya coinciden con el valor por defecto de Elementor.

   En las páginas montadas a mano esto no se notaba porque el selector que
   genera Elementor lleva tres clases:
   `.elementor-2097 .elementor-element.elementor-element-c9cc632`.

   Síntoma cuando falta: los dots del slider móvil se apilan en vertical.
   ========================================================================== */

.e-con.e-flex.omni-articulos__grid,
.e-con.e-flex.omni-articulos__dots,
.e-con.e-flex.omni-articulo__hero,
.e-con.e-flex.omni-articulo__meta {
	--flex-direction: row;
}

/* ==========================================================================
   Sangrado del contenedor que envuelve al shortcode
   ==========================================================================

   Las secciones montadas a mano eran contenedores de primer nivel, hijos
   directos de `.elementor`, así que llegaban de borde a borde. La salida del
   shortcode vive dentro de un contenedor de Elementor, y todo contenedor trae
   10px de padding por defecto:

     .e-con { --padding-left: var(--container-default-padding-left, 10px); … }

   Eso deja un margen blanco a los lados que corta el fondo de la sección, y en
   móvil se ve como un cerco alrededor de las tarjetas.

   Estas variables se heredan, así que aquí se cancela exactamente el padding
   horizontal que haya aplicado el contenedor más cercano, sea el de por defecto
   o uno puesto a mano. Si el contenedor tiene padding 0, esto vale 0 y no hace
   nada. Fuera de un contenedor de Elementor (el bloque de relacionadas del
   detalle) no hay variable que heredar y el fallback deja el margen en 0.

   El padding vertical no se cancela a propósito: un margen negativo arriba y
   abajo solaparía los widgets vecinos. Para quitarlo, pon el padding del
   contenedor a 0 en Elementor.
   ========================================================================== */

.omni-articulos {
	margin-inline-start: calc( -1 * var( --padding-inline-start, 0px ) );
	margin-inline-end: calc( -1 * var( --padding-inline-end, 0px ) );
}

/* ==========================================================================
   Desktop (>= 768px)
   ========================================================================== */

@media (min-width: 768px) {

	.omni-articulos__heading,
	.omni-articulo__hero {
		--content-width: 1440px;
	}

	.omni-articulos__group-header {
		--width: 1316px;
	}

	.omni-articulos__grid,
	.omni-articulo-card,
	.omni-articulo-card__body {
		--width: 100%;
	}

	/*
	 * El diseño original ponía la línea de fecha a 1150px mientras el resto de
	 * bandas van al ancho de contenido del kit (1170px), así que su subrayado
	 * quedaba 10px más corto por cada lado que el texto del cuerpo. Se deja al
	 * mismo ancho que las demás para que todo comparta bordes.
	 */

	/* La columna del CTA ocupa el 60% de la caja blanca. */
	.omni-articulo__cta-content {
		--width: 60%;
	}
}

/* ==========================================================================
   Tablet y móvil
   ========================================================================== */

@media (max-width: 1024px) {

	/*
	 * Sin relleno superior: en el diseño original la imagen iba después del
	 * título y ese relleno empujaba su contenido hacia abajo. Ahora la imagen
	 * abre la página y lo único que hacía era dejar un hueco encima.
	 */
	.omni-articulo__hero {
		--padding-top: 0px;
		--padding-bottom: 0px;
		--padding-left: 25px;
		--padding-right: 25px;
	}
}

@media (max-width: 767px) {

	.omni-articulos__group-header {
		--margin-top: 20px;
		--margin-bottom: 20px;
		--margin-left: 0px;
		--margin-right: 0px;
	}

	/*
	 * 500px de imagen en un móvil se come la pantalla entera antes de que
	 * aparezca una sola línea de texto. 240px es la altura que el propio sitio
	 * da a su zona de imagen en móvil; es el único número a tocar si se quiere
	 * más o menos alta.
	 */
	.omni-articulo__hero {
		--min-height: 240px;
		--padding-top: 0px;
		--padding-bottom: 0px;
		--padding-left: 20px;
		--padding-right: 20px;
		/*
		 * El fallback anidado es lo que hace que el campo sea opcional: si el
		 * artículo no tiene imagen de móvil, se usa la destacada.
		 */
		background-image: var( --omni-articulo-hero-movil, var( --omni-articulo-hero ) );
	}
}

@media (min-width: 1025px) {

	.omni-articulo__hero {
		background-attachment: scroll;
	}
}

/*
 * 640px es el breakpoint móvil del CSS del sitio, no el de Elementor: es donde
 * `.button-primary` pasa a `width: 100%`, así que es donde el texto largo del
 * CTA deja de caber.
 */
@media (max-width: 640px) {

	.omni-articulo__cta-label--long {
		display: none;
	}

	.omni-articulo__cta-label--short {
		display: inline;
	}
}