/**
 * T3 · Clases de ASPECTO de encabezados (accesibilidad ISM 2025).
 *
 * Los títulos se maquetaron como <div> con clases de TheGem (title-hN, fuente
 * Taviraj) o como encabezados por etiqueta (h4/h5/h6, fuente IBM Plex Sans). Al
 * cambiar la etiqueta a un encabezado semántico (h1/h2/h3...) para cumplir WCAG
 * 1.3.1/2.4.6, se pierde ese aspecto. Estas clases lo reproducen EXACTO (valores
 * medidos del render real en 4 breakpoints) y se fijan con !important.
 *
 *   asp-tN = aspecto de los títulos TheGem (Taviraj)      -> title-hN
 *   asp-eN = aspecto de los encabezados por etiqueta      -> tag hN
 *
 * NO se fija color ni alineación (se heredan del contexto, igual que hoy).
 * Se añaden vía "Clases CSS" del widget.
 */

.elementor-widget-heading[class*="asp-"] .elementor-heading-title {
	font-weight: 500 !important;
	text-transform: none !important;
	margin: 0 !important;
}
.elementor-widget-heading[class*="asp-t"] .elementor-heading-title { font-family: "Taviraj", serif !important; }
.elementor-widget-heading[class*="asp-e"] .elementor-heading-title { font-family: "IBM Plex Sans", sans-serif !important; }

/* ============ TÍTULOS TheGem (Taviraj) ============ */

/* t1 : 50/60/2.5 -> 36/53/1.8 (<=1199) -> 28/42/1.4 (<=767) */
.elementor-widget-heading.asp-t1 .elementor-heading-title { font-size:50px !important; line-height:60px !important; letter-spacing:2.5px !important; }
@media (max-width:1199px){ .elementor-widget-heading.asp-t1 .elementor-heading-title { font-size:36px !important; line-height:53px !important; letter-spacing:1.8px !important; } }
@media (max-width:767px){  .elementor-widget-heading.asp-t1 .elementor-heading-title { font-size:28px !important; line-height:42px !important; letter-spacing:1.4px !important; } }

/* t2 : 36/53/1.8 -> 28/42/1.4 (<=1199) -> 24/38/1.2 (<=767) */
.elementor-widget-heading.asp-t2 .elementor-heading-title { font-size:36px !important; line-height:53px !important; letter-spacing:1.8px !important; }
@media (max-width:1199px){ .elementor-widget-heading.asp-t2 .elementor-heading-title { font-size:28px !important; line-height:42px !important; letter-spacing:1.4px !important; } }
@media (max-width:767px){  .elementor-widget-heading.asp-t2 .elementor-heading-title { font-size:24px !important; line-height:38px !important; letter-spacing:1.2px !important; } }

/* t3 : 28/42/1.4 -> 24/38/1.2 (<=1199) */
.elementor-widget-heading.asp-t3 .elementor-heading-title { font-size:28px !important; line-height:42px !important; letter-spacing:1.4px !important; }
@media (max-width:1199px){ .elementor-widget-heading.asp-t3 .elementor-heading-title { font-size:24px !important; line-height:38px !important; letter-spacing:1.2px !important; } }

/* t4 : 24/38/1.2 -> 20/32/1.0 (<=767). Le faltaba el escalón móvil que sí
   tienen t1/t2/t3: sin él, el H1 (asp-t4) no encogía en móvil y quedaba tan
   grande como el título de sección (que sí encoge), perdiéndose la jerarquía
   que sí hay en escritorio. Solo tamaño y solo móvil: no toca los estilos por
   nivel h1..h5 (etiqueta/orden de Tabulador) ni el escritorio. */
.elementor-widget-heading.asp-t4 .elementor-heading-title { font-size:24px !important; line-height:38px !important; letter-spacing:1.2px !important; }
@media (max-width:767px){ .elementor-widget-heading.asp-t4 .elementor-heading-title { font-size:20px !important; line-height:32px !important; letter-spacing:1px !important; } }

/* t5 : 19/30/0.95 constante */
.elementor-widget-heading.asp-t5 .elementor-heading-title { font-size:19px !important; line-height:30px !important; letter-spacing:0.95px !important; }

/* t2s : title-h2 con tamaño personalizado 24px (Elementor custom typography).
   Mantiene interlineado/tracking de t2 pero fija 24px en todos los breakpoints. */
.elementor-widget-heading.asp-t2s .elementor-heading-title { font-size:24px !important; line-height:53px !important; letter-spacing:1.2px !important; }
@media (max-width:1199px){ .elementor-widget-heading.asp-t2s .elementor-heading-title { line-height:42px !important; letter-spacing:1.2px !important; } }
@media (max-width:767px){  .elementor-widget-heading.asp-t2s .elementor-heading-title { line-height:38px !important; letter-spacing:1.2px !important; } }

/* ============ ENCABEZADOS por ETIQUETA (IBM Plex Sans) ============ */

/* e4 : 24/38/1.2 -> 16/32/0.8 (<=1199) -> 8/16/0.4 (<=767)
   Revisión móvil 360px (2026-07-07): 8px era ilegible en pantalla real; se
   sube a 16/24/0.7 en <=767px. Solo cambia el bloque de móvil. */
.elementor-widget-heading.asp-e4 .elementor-heading-title { font-size:24px !important; line-height:38px !important; letter-spacing:1.2px !important; }
@media (max-width:1199px){ .elementor-widget-heading.asp-e4 .elementor-heading-title { font-size:16px !important; line-height:32px !important; letter-spacing:0.8px !important; } }
@media (max-width:767px){  .elementor-widget-heading.asp-e4 .elementor-heading-title { font-size:16px !important; line-height:24px !important; letter-spacing:0.7px !important; } }

/* e5 : 19/30/0.95 -> 16/32/0.8 (<=1199) -> 8/16/0.4 (<=767)
   Revisión móvil 360px (2026-07-07): 8px era ilegible en pantalla real; se
   sube a 15/22/0.7 en <=767px. Solo cambia el bloque de móvil. */
.elementor-widget-heading.asp-e5 .elementor-heading-title { font-size:19px !important; line-height:30px !important; letter-spacing:0.95px !important; }
@media (max-width:1199px){ .elementor-widget-heading.asp-e5 .elementor-heading-title { font-size:16px !important; line-height:32px !important; letter-spacing:0.8px !important; } }
@media (max-width:767px){  .elementor-widget-heading.asp-e5 .elementor-heading-title { font-size:15px !important; line-height:22px !important; letter-spacing:0.7px !important; } }

/* e6 : 16/25/0.8 constante */
.elementor-widget-heading.asp-e6 .elementor-heading-title { font-size:16px !important; line-height:25px !important; letter-spacing:0.8px !important; }

/* e4c : como e4 pero SIN reducción responsive (24/38/1.2 constante). Para títulos
   cuyo tamaño no cambiaba entre breakpoints en el original (p.ej. héroes). */
.elementor-widget-heading.asp-e4c .elementor-heading-title { font-size:24px !important; line-height:38px !important; letter-spacing:1.2px !important; }

/* e5c : como e5 pero constante (19/30/0.95 en todos los breakpoints). */
.elementor-widget-heading.asp-e5c .elementor-heading-title { font-size:19px !important; line-height:30px !important; letter-spacing:0.95px !important; }

/* ============================================================
 * Encabezados <hN> DENTRO de un widget "Editor de texto"
 * ------------------------------------------------------------
 * Caso: un título maquetado como etiqueta suelta (<h5>...) dentro
 * de un widget text-editor (p. ej. el bloque de dirección de
 * "Servicios Centrales" en Contacta), no como widget de encabezado.
 * El sistema asp- de arriba solo alcanza .elementor-widget-heading,
 * así que aquí se replica el MISMO aspecto para <hN> dentro de
 * .elementor-text-editor. La clase se pone en el widget de TEXTO
 * (Avanzado > Clases CSS); dentro se cambia la etiqueta al nivel
 * semántico correcto (p. ej. H3) y esta clase le conserva el look.
 * Mismos valores medidos que las clases equivalentes de arriba.
 * ============================================================ */

/* La clase se pone DIRECTA en la etiqueta dentro del editor: <h3 class="asp-e5c">.
   OJO: aquí NO se anula el margen (a diferencia del sistema asp- de widgets),
   porque dentro de un editor de texto el margen inferior del título es lo que
   crea la separación con la dirección. Se conserva el margen natural del h5. */
.elementor-text-editor :is(h1,h2,h3,h4,h5,h6).asp-e5,
.elementor-text-editor :is(h1,h2,h3,h4,h5,h6).asp-e5c {
	font-family: "IBM Plex Sans", sans-serif !important;
	font-weight: 500 !important;
	text-transform: none !important;
}

/* e5 : 19/30/0.95 -> 16/32/0.8 (<=1199) -> 15/22/0.7 (<=767) — encoge, igual que asp-e5
   (mismo ajuste de legibilidad móvil del 2026-07-07 aplicado arriba) */
.elementor-text-editor :is(h1,h2,h3,h4,h5,h6).asp-e5 { font-size:19px !important; line-height:30px !important; letter-spacing:0.95px !important; }
@media (max-width:1199px){ .elementor-text-editor :is(h1,h2,h3,h4,h5,h6).asp-e5 { font-size:16px !important; line-height:32px !important; letter-spacing:0.8px !important; } }
@media (max-width:767px){  .elementor-text-editor :is(h1,h2,h3,h4,h5,h6).asp-e5 { font-size:15px !important; line-height:22px !important; letter-spacing:0.7px !important; } }

/* e5c : 19/30/0.95 constante (no encoge) — igual que asp-e5c */
.elementor-text-editor :is(h1,h2,h3,h4,h5,h6).asp-e5c { font-size:19px !important; line-height:30px !important; letter-spacing:0.95px !important; }

/* e3 : encabezado por ETIQUETA a tamaño de h3 (IBM Plex, sans-serif).
   Valores MEDIDOS del original en producción (título "Asistencia sanitaria en
   territorio nacional..." de Área de Asistencia Sanitaria):
     escritorio : 28/42/1.4, margen vertical 31.64px
     <=1199      : 24/38/1.2, margen vertical 27.12px (constante hasta móvil)
   Se preservan los márgenes superior e inferior del original (espaciado del título). */
.elementor-text-editor :is(h1,h2,h3,h4,h5,h6).asp-e3 {
	font-family: "IBM Plex Sans", sans-serif !important;
	font-weight: 500 !important;
	text-transform: none !important;
	font-size: 28px !important; line-height: 42px !important; letter-spacing: 1.4px !important;
	margin-top: 31.64px !important; margin-bottom: 31.64px !important;
}
@media (max-width:1199px){
	.elementor-text-editor :is(h1,h2,h3,h4,h5,h6).asp-e3 {
		font-size: 24px !important; line-height: 38px !important; letter-spacing: 1.2px !important;
		margin-top: 27.12px !important; margin-bottom: 27.12px !important;
	}
}

/* e4c : IBM Plex, aspecto h4 CONSTANTE. Medido en local: 24/38/1.2 en todos los
   breakpoints; margen vertical 24px (0 arriba si es el primer elemento de la caja). */
.elementor-text-editor :is(h1,h2,h3,h4,h5,h6).asp-e4c {
	font-family: "IBM Plex Sans", sans-serif !important;
	font-weight: 500 !important;
	text-transform: none !important;
	font-size: 24px !important; line-height: 38px !important; letter-spacing: 1.2px !important;
	margin-top: 24px !important; margin-bottom: 24px !important;
}
.elementor-text-editor > :is(h1,h2,h3,h4,h5,h6).asp-e4c:first-child { margin-top: 0 !important; }

/* first-child de asp-e3 en caja de texto: sin margen superior (como el original).
   No afecta a Asistencia Sanitaria (su título NO es primer elemento: tiene margen sup.). */
.elementor-text-editor > :is(h1,h2,h3,h4,h5,h6).asp-e3:first-child { margin-top: 0 !important; }

/* e5b : IBM Plex, aspecto h5 CONSTANTE para títulos dentro de caja de texto.
   Medido: 19/30/0.95 constante, margen vertical 9.5px (0 arriba si es primer elemento).
   Clase PROPIA para no alterar 'asp-e5c' (la usa Contacta, que se deja intacta). */
.elementor-text-editor :is(h1,h2,h3,h4,h5,h6).asp-e5b {
	font-family: "IBM Plex Sans", sans-serif !important;
	font-weight: 500 !important;
	text-transform: none !important;
	font-size: 19px !important; line-height: 30px !important; letter-spacing: 0.95px !important;
	margin-top: 9.5px !important; margin-bottom: 9.5px !important;
}
.elementor-text-editor > :is(h1,h2,h3,h4,h5,h6).asp-e5b:first-child { margin-top: 0 !important; }

/* graf : leyenda de gráfico en Arial dentro de bloque HTML ("GRÁFICO NN · …").
   Aspecto h3 en Arial, responsive (28/42/1.4 → 24/38/1.2), márgenes 20/0/8 del original. */
.asp-graf {
	font-family: Arial, sans-serif !important;
	font-weight: 500 !important;
	font-size: 28px !important; line-height: 42px !important; letter-spacing: 1.4px !important;
	margin: 20px 0 8px !important;
}
@media (max-width:1199px){ .asp-graf { font-size: 24px !important; line-height: 38px !important; letter-spacing: 1.2px !important; } }

/* ─────────────────────────────────────────────────────────────────────────
   Carteles azules sobre las imágenes (headings en posición absoluta con fondo
   #2BA8E4). Venían anclados con `top: 80%` (75% el de 2 líneas) → como cada
   imagen tiene distinta altura y los carteles distinto alto, la distancia a la
   BASE variaba. Se anclan por ABAJO para que TODOS queden a la misma distancia
   de la base de su imagen (los de 2+ líneas crecen hacia arriba desde esa base).
   Se enganchan por la clase `.cartel-img`, que añade `tag_carteles.php` en la BD
   a los carteles azules SIN transform (excluye el hero "Conoce el nuevo…").
   No se usa `.elementor-absolute` a secas porque hay otros headings absolutos
   que NO son carteles (hero, etiquetas sin fondo) y no deben moverse.
   ───────────────────────────────────────────────────────────────────────── */
.elementor-widget-heading.cartel-img {
	top: auto !important;
	bottom: 30px !important;
}
/* El wrapper que contiene [imagen + cartel] no debe estirarse más alto que su
   imagen: en layouts con fila flex (Home) las columnas se estiran a la más alta
   y el cartel (anclado abajo) caía en el hueco, POR DEBAJO de la imagen. Al no
   estirarse, el wrapper = alto de la imagen y el cartel queda dentro, a 30px de
   la base. Se selecciona el wrapper por contener un .cartel-img. */
.e-con:has(> .elementor-widget-heading.cartel-img),
.elementor-column:has(> .elementor-widget-wrap > .elementor-widget-heading.cartel-img) {
	align-self: flex-start;
}
/* Algunos tiles llevan un spacer entre la imagen y el cartel dentro del mismo
   wrapper (p.ej. "Estructura del ISM" en Home). Ese spacer hace el wrapper más
   alto que la imagen y el cartel (anclado abajo) cae fuera. Se neutraliza solo
   dentro de wrappers de cartel, para que el wrapper = alto de la imagen. */
.e-con:has(> .elementor-widget-heading.cartel-img) > .elementor-widget-spacer {
	display: none !important;
}
/* Al ocultar ese spacer se perdía la separación de sección que daba (debajo de
   la fila de tiles, antes de "Normativa"). Se restituye como margen inferior de
   la FILA que contiene carteles Y algún spacer (patrón Home). La fila de fotos de
   Organización NO tiene spacer, así que no se ve afectada. Simétrico para ambas
   tiles y también en móvil (la fila pasa a columna y el margen queda debajo). */
.e-con:has(> .e-con > .elementor-widget-heading.cartel-img):has(.elementor-widget-spacer) {
	margin-bottom: 45px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Home: separación alrededor de los títulos de sección (Presentación del nuevo
   site, Organización, Datos generales, Medios). Venían con spacers de 50px
   (default), inconsistentes con otros de 25px, dejando demasiado hueco arriba y
   abajo del título. Se igualan a 25px (la mitad). NO se toca el espacio ENCIMA
   de "Presentación" (no tiene spacer, ya está bien). "Medios" ya iba a 25px.
   Aplica a escritorio y móvil (estos spacers no tienen override por breakpoint).
   ───────────────────────────────────────────────────────────────────────── */
.elementor-element-4ae589d,  /* debajo de "Presentación del nuevo site" */
.elementor-element-e07dd46,  /* encima de "Organización" */
.elementor-element-aabe9d6,  /* debajo de "Organización" */
.elementor-element-cb14a46,  /* encima de "Datos generales" */
.elementor-element-6e4e361 { /* debajo de "Datos generales" */
	--spacer-size: 25px !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   Subpáginas: el primer título (H1) iba pegado al hero. El hero es
   [cartel + imagen + spacer] y la regla de arriba (ocultar spacers dentro de
   wrappers de cartel, para meter el cartel dentro de la imagen) ocultaba también
   ese spacer, que daba la separación título↔foto. Se restituye dando margen
   superior. Como el título es ABSOLUTO (no se mueve con margin propio), se da
   margen INFERIOR al HERO (que sí está en el flujo): empuja hacia abajo el título
   y su contenido, sin tocar el cartel (absoluto dentro del hero). Se distingue del
   patrón de tiles de Home porque en el hero el SPACER es el ÚLTIMO hijo
   ([cartel, imagen, spacer]); en los tiles el cartel va tras el spacer, y la fila
   de fotos de Organización no tiene spacer. Restituye la separación (~el spacer
   oculto de 50px) título↔foto. */
.e-con:has(> .elementor-widget-heading.cartel-img):has(> .elementor-widget-spacer:last-child) {
	margin-bottom: 45px !important;
}