/**
 * Plantilla editorial de articulo (21/09/2026).
 * Paleta y tipografias del kit del sitio, a tamanos pensados para lectura larga:
 * el kit pone los H2 a 54 px, que en un articulo de 1.200 palabras no funciona.
 */

.soma-articulo {
	--soma-tinta: #012D3A;
	--soma-tinta-2: #092543;
	--soma-teal: #007E8E;
	--soma-teal-claro: #E0F5F7;
	--soma-naranja: #F55D2D;
	--soma-texto: #4A4A4A;
	--soma-suave: #F8F9F8;
	--soma-borde: rgba(1, 45, 58, 0.12);
	--soma-lectura: 44rem;   /* ~700 px: 70-75 caracteres por linea */
	--soma-ancho: 68rem;     /* imagenes y tarjetas, mas anchas que el texto */
	--soma-cabecera: 104px;  /* alto de la cabecera fija */

	padding-top: 0;
	color: var(--soma-texto);
	font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 1.125rem;
	line-height: 1.75;
	letter-spacing: normal;
}

.soma-ancho {
	width: min(100% - 2.5rem, var(--soma-ancho));
	margin-inline: auto;
}

/* ---------- Cabecera ---------- */

.soma-articulo__cabecera {
	position: relative;
	padding-top: calc(var(--soma-cabecera) + 2.5rem);
	padding-bottom: 2rem;
	background: linear-gradient(180deg, var(--soma-suave) 0%, #fff 100%);
}

.soma-migas {
	margin-bottom: 1.25rem;
	font-size: .8125rem;
	letter-spacing: .02em;
}

.soma-migas ol {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.soma-migas li + li::before {
	content: "›";
	margin-right: .5rem;
	color: var(--soma-borde);
}

.soma-migas a {
	color: #7A8A90;
	text-decoration: none;
}

.soma-migas li:last-child a {
	color: var(--soma-teal);
}

.soma-migas a:hover {
	color: var(--soma-naranja);
}

.soma-articulo__categoria {
	display: inline-block;
	margin-bottom: 1rem;
	padding: .35rem .85rem;
	border-radius: 999px;
	background: var(--soma-teal-claro);
	color: var(--soma-teal);
	font-family: Montserrat, sans-serif;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
}

.soma-articulo__categoria:hover {
	background: var(--soma-teal);
	color: #fff;
}

.soma-articulo .entry-title {
	max-width: 22ch;
	margin: 0 0 1rem;
	color: var(--soma-tinta);
	font-family: Montserrat, sans-serif;
	font-size: clamp(2rem, 1.2rem + 2.6vw, 3rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -.02em;
}

.soma-articulo__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: 0;
	color: #7A8A90;
	font-size: .875rem;
	letter-spacing: .02em;
}

.soma-articulo__portada {
	width: min(100% - 2.5rem, var(--soma-ancho));
	margin: 2rem auto 0;
}

.soma-articulo__portada img {
	display: block;
	border-radius: 14px;
}

/* Foto apaisada y grande: banner panoramico. */
.soma-articulo__portada.es-banner img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Foto vertical o pequena: entera, centrada y sin ampliar de mas. */
.soma-articulo__portada.es-retrato {
	display: flex;
	justify-content: center;
	max-width: 46rem;
	padding: 1.5rem;
	border-radius: 14px;
	background: var(--soma-suave);
}

.soma-articulo__portada.es-retrato img {
	width: auto;
	max-width: min(100%, 30rem);
	max-height: 26rem;
	height: auto;
	object-fit: contain;
}

/* ---------- Cuerpo ---------- */

.soma-articulo__cuerpo {
	padding-block: 3rem 4rem;
}

.soma-prosa,
.soma-indice,
.soma-cta,
.soma-articulo__etiquetas {
	max-width: var(--soma-lectura);
	margin-inline: auto;
}

.soma-prosa > * {
	margin-block: 0 1.25em;
}

.soma-prosa > *:last-child {
	margin-bottom: 0;
}

.soma-prosa h2,
.soma-prosa h3,
.soma-prosa h4 {
	color: var(--soma-tinta);
	font-family: Archivo, Montserrat, sans-serif;
	letter-spacing: -.01em;
	scroll-margin-top: calc(var(--soma-cabecera) + 1rem);
}

.soma-prosa h2 {
	margin-top: 2.6rem;
	margin-bottom: .9rem;
	font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem);
	font-weight: 600;
	line-height: 1.25;
}

/* Filete corto sobre cada apartado: marca el ritmo sin recargar. */
.soma-prosa h2::before {
	content: "";
	display: block;
	width: 2.5rem;
	height: 3px;
	margin-bottom: 1rem;
	border-radius: 2px;
	background: var(--soma-teal);
}

.soma-prosa h3 {
	margin-top: 2rem;
	margin-bottom: .6rem;
	font-size: clamp(1.2rem, 1.05rem + .5vw, 1.4rem);
	font-weight: 600;
	line-height: 1.3;
}

.soma-prosa p {
	text-wrap: pretty;
}

.soma-prosa strong {
	color: var(--soma-tinta);
	font-weight: 700;
}

.soma-prosa a {
	color: var(--soma-teal);
	text-decoration: underline;
	text-decoration-color: rgba(0, 126, 142, .35);
	text-underline-offset: .18em;
	text-decoration-thickness: 1px;
	transition: color .15s ease, text-decoration-color .15s ease;
}

.soma-prosa a:hover {
	color: var(--soma-naranja);
	text-decoration-color: currentColor;
}

/* Primer parrafo, entradilla */
.soma-prosa > p:first-of-type {
	font-size: 1.1875rem;
	line-height: 1.7;
	color: #3F4A4E;
}

.soma-prosa ul,
.soma-prosa ol {
	padding-left: 1.4rem;
}

.soma-prosa li {
	margin-bottom: .5rem;
}

.soma-prosa ul {
	list-style: none;
	padding-left: 0;
}

.soma-prosa ul li {
	position: relative;
	padding-left: 1.6rem;
}

.soma-prosa ul li::before {
	content: "";
	position: absolute;
	top: .65em;
	left: .3rem;
	width: .4rem;
	height: .4rem;
	border-radius: 2px;
	background: var(--soma-teal);
}

.soma-prosa blockquote {
	margin: 2rem 0;
	padding: 1.25rem 1.5rem;
	border-left: 3px solid var(--soma-teal);
	border-radius: 0 10px 10px 0;
	background: var(--soma-suave);
	color: var(--soma-tinta);
	font-size: 1.1875rem;
	font-style: normal;
}

.soma-prosa blockquote p:last-child {
	margin-bottom: 0;
}

/* Las imagenes del cuerpo respiran mas que el texto. */
.soma-prosa figure,
.soma-prosa .wp-block-image {
	width: min(100%, var(--soma-ancho));
	margin-inline: calc((var(--soma-lectura) - min(100%, var(--soma-ancho))) / 2);
	margin-block: 2.25rem;
}

.soma-prosa figure img,
.soma-prosa .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

.soma-prosa figcaption {
	margin-top: .65rem;
	color: #7A8A90;
	font-size: .8125rem;
	line-height: 1.5;
	text-align: center;
}

.soma-prosa table {
	width: 100%;
	border-collapse: collapse;
	font-size: .9375rem;
}

.soma-prosa th,
.soma-prosa td {
	padding: .65rem .75rem;
	border-bottom: 1px solid var(--soma-borde);
	text-align: left;
}

.soma-prosa th {
	color: var(--soma-tinta);
	font-family: Montserrat, sans-serif;
	font-weight: 600;
}

/* ---------- Indice ---------- */

.soma-indice {
	margin-bottom: 2.5rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--soma-borde);
	border-radius: 12px;
	background: var(--soma-suave);
}

.soma-indice summary {
	color: var(--soma-tinta);
	cursor: pointer;
	font-family: Montserrat, sans-serif;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .08em;
	list-style: none;
	text-transform: uppercase;
}

.soma-indice summary::-webkit-details-marker {
	display: none;
}

.soma-indice summary::after {
	content: "−";
	float: right;
	color: var(--soma-teal);
	font-size: 1rem;
	line-height: 1;
}

.soma-indice:not([open]) summary::after {
	content: "+";
}

.soma-indice ol {
	margin: 1rem 0 0;
	padding-left: 1.2rem;
	font-size: .9375rem;
	line-height: 1.5;
}

.soma-indice li {
	margin-bottom: .55rem;
	color: var(--soma-teal);
}

.soma-indice li::marker {
	font-size: .8125rem;
}

.soma-indice li:last-child {
	margin-bottom: 0;
}

.soma-indice a {
	color: var(--soma-texto);
	text-decoration: none;
}

.soma-indice a:hover,
.soma-indice a.soma-activo {
	color: var(--soma-teal);
}

/* ---------- CTA ---------- */

.soma-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: center;
	justify-content: space-between;
	margin-top: 3.5rem;
	padding: 2rem;
	border-radius: 16px;
	background: linear-gradient(135deg, #0F5F9E 0%, #092543 100%);
	color: #fff;
}

.soma-cta__texto {
	flex: 1 1 18rem;
}

.soma-cta__titulo {
	margin: 0 0 .4rem;
	font-family: Montserrat, sans-serif;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.25;
}

.soma-cta__bajada {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.6;
	opacity: .85;
}

.soma-cta__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

.soma-btn {
	display: inline-flex;
	gap: .5rem;
	align-items: center;
	padding: .8rem 1.4rem;
	border-radius: 999px;
	font-family: Montserrat, sans-serif;
	font-size: .9375rem;
	font-weight: 600;
	text-decoration: none;
	transition: transform .15s ease, background .15s ease;
}

.soma-btn:hover {
	transform: translateY(-1px);
}

.soma-btn svg {
	width: 1.1em;
	height: 1.1em;
	fill: currentColor;
}

.soma-btn--wa {
	background: var(--soma-naranja);
	color: #fff;
}

.soma-btn--wa:hover {
	background: #e14e20;
	color: #fff;
}

.soma-btn--tel {
	border: 1px solid rgba(255, 255, 255, .45);
	color: #fff;
}

.soma-btn--tel:hover {
	background: rgba(255, 255, 255, .12);
	color: #fff;
}

/* ---------- Etiquetas y relacionados ---------- */

.soma-articulo__etiquetas {
	margin-top: 2rem;
	font-size: .8125rem;
}

.soma-articulo__etiquetas a {
	display: inline-block;
	margin: 0 .4rem .4rem 0;
	padding: .3rem .7rem;
	border: 1px solid var(--soma-borde);
	border-radius: 999px;
	color: #7A8A90;
	text-decoration: none;
}

.soma-articulo__etiquetas a:hover {
	border-color: var(--soma-teal);
	color: var(--soma-teal);
}

.soma-relacionados {
	padding: 3.5rem 0 4.5rem;
	background: var(--soma-suave);
}

.soma-relacionados > h2 {
	width: min(100% - 2.5rem, var(--soma-ancho));
	margin: 0 auto 1.75rem;
	color: var(--soma-tinta);
	font-family: Archivo, Montserrat, sans-serif;
	font-size: 1.5rem;
	font-weight: 600;
}

.soma-relacionados .elementor-posts-container {
	width: min(100% - 2.5rem, var(--soma-ancho));
	margin-inline: auto;
}

@media (max-width: 767px) {
	.soma-articulo {
		--soma-cabecera: 88px;
		font-size: 1.0625rem;
	}

	.soma-articulo__cabecera {
		padding-top: calc(var(--soma-cabecera) + 1.5rem);
	}

	.soma-articulo__cuerpo {
		padding-block: 2rem 3rem;
	}

	.soma-prosa figure,
	.soma-prosa .wp-block-image {
		margin-inline: 0;
	}

	.soma-cta {
		padding: 1.5rem;
	}

	.soma-btn {
		flex: 1 1 100%;
		justify-content: center;
	}
}

/* ---------- Cabecera del sitio en las paginas que pinta el tema ----------
   El logo y el menu son blancos porque en las paginas de Elementor hay un hero
   oscuro detras. Aqui el fondo es claro, asi que la barra necesita su fondo
   solido desde el principio, sin esperar al scroll. */

body:not(.elementor-page) .head-backg,
body.single-post .head-backg {
	background: linear-gradient(135deg, rgba(15, 95, 158, .92) 0%, rgba(9, 37, 67, .92) 100%);
	border: 1px solid rgba(59, 80, 125, .65);
}

body:not(.elementor-page) .head-backg img,
body.single-post .head-backg img {
	filter: none;
	-webkit-filter: none;
}

/* ---------- Articulos relacionados ----------
   Las tarjetas comparten marcado con el listado del blog, pero aquel CSS esta
   atado al documento 4009, asi que aqui van sus propios estilos con los mismos
   valores: rejilla de 3, miniatura 0.66 y los colores del kit. */

.soma-relacionados .elementor-posts-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 35px 30px;
}

.soma-relacionados .elementor-post {
	margin: 0;
}

.soma-relacionados .elementor-post__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 4px 20px rgba(1, 45, 58, .08);
}

.soma-relacionados .elementor-post__thumbnail__link {
	display: block;
	position: relative;
	width: 100%;
}

.soma-relacionados .elementor-post__thumbnail {
	position: relative;
	padding-bottom: calc(.66 * 100%);
	overflow: hidden;
}

.soma-relacionados .elementor-post__thumbnail img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: auto;
	transform: translate(-50%, -50%) scale(1.01);
}

.soma-relacionados .elementor-post__thumbnail.elementor-fit-height img {
	width: auto;
	height: 100%;
}

.soma-relacionados .elementor-post__badge {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	margin: 20px;
	padding: .3rem .7rem;
	border-radius: 999px;
	background: rgba(1, 45, 58, .72);
	color: #fff;
	font-family: Montserrat, sans-serif;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.soma-relacionados .elementor-post__text {
	flex: 1 0 auto;
	padding: 20px 22px 0;
}

.soma-relacionados .elementor-post__title {
	margin: 0 0 .6rem;
	font-family: Montserrat, sans-serif;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
}

.soma-relacionados .elementor-post__title a {
	color: var(--soma-tinta-2);
	text-decoration: none;
}

.soma-relacionados .elementor-post__title a:hover {
	color: var(--soma-teal);
}

.soma-relacionados .elementor-post__excerpt p {
	margin: 0 0 1rem;
	color: var(--soma-texto);
	font-size: .875rem;
	line-height: 1.6;
}

.soma-relacionados .elementor-post__read-more {
	display: inline-block;
	margin-bottom: 1.25rem;
	color: var(--soma-naranja);
	font-family: Montserrat, sans-serif;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-decoration: none;
	text-transform: uppercase;
}

.soma-relacionados .elementor-post__read-more:hover {
	color: var(--soma-tinta);
}

.soma-relacionados .elementor-post__meta-data {
	margin-top: auto;
	padding: .8rem 22px;
	border-top: 1px solid var(--soma-borde);
	color: #9AA5A9;
	font-size: .75rem;
}

.soma-relacionados .elementor-post__meta-data span + span::before {
	content: "•";
	margin: 0 .4rem;
}

@media (max-width: 1024px) {
	.soma-relacionados .elementor-posts-container {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.soma-relacionados .elementor-posts-container {
		grid-template-columns: 1fr;
	}

	.soma-relacionados .elementor-post__thumbnail {
		padding-bottom: calc(.5 * 100%);
	}
}