/*
Theme Name:   San Pablo Inclusivo
Description:  Tema hijo de Hello Elementor para la Plataforma Web de Inclusión de la Municipalidad de San Pablo.
Author:       Simple Soluciones / Awna
Template:     hello-elementor
Version:      0.4.0
Text Domain:  sp-inclusivo
*/

/* ==========================================================================
   Tokens — línea gráfica del afiche «San Pablo se mueve por la inclusión».
   Los colores y la fuente se editan en Elementor › Ajustes del sitio (colores y
   tipografía globales, ver scripts/kit.php); aquí cada token lee su color global,
   con el valor del diseño como respaldo. Van en body porque Elementor define sus
   variables globales en el body (.elementor-kit-N). El alto contraste solo las cambia.
   ========================================================================== */

body {
	--sp-bg: #ffffff;
	--sp-soft: var(--e-global-color-spsuave, #e9f8fc);
	--sp-sky: var(--e-global-color-spceleste, #aceefe);
	--sp-cyan: var(--e-global-color-spcian, #30d8f0);
	--sp-green: var(--e-global-color-spverde, #4cdb87);
	--sp-green-dk: var(--e-global-color-spverdeos, #008048);
	--sp-purple: var(--e-global-color-splila, #9470cf);
	--sp-ink: var(--e-global-color-text, #0b3644);
	--sp-muted: var(--e-global-color-spsecund, #3d5c67);
	--sp-teal: var(--e-global-color-primary, #017395);
	--sp-teal-dk: var(--e-global-color-secondary, #01465c);
	--sp-on-teal: #ffffff;
	--sp-accent: var(--e-global-color-accent, #fc9e01);
	--sp-on-accent: var(--e-global-color-text, #0b3644);
	--sp-line: var(--e-global-color-splineas, #cfe3ea);
	--sp-card: #ffffff;
	--sp-link: var(--e-global-color-spenlaces, #01607c);
	--sp-heading: var(--e-global-color-sptitulos, #01465c);
	--sp-lila: var(--e-global-color-splilacl, #ece4fa);
	--sp-peach: var(--e-global-color-spdurazno, #ffeacb);
	--sp-mint: var(--e-global-color-spmenta, #dcf8e8);
	--sp-hi: var(--e-global-color-spceleste, #aceefe);
	--sp-shadow: 0 18px 40px rgba(1, 70, 92, 0.18);
	--sp-mic-activo: #c2410c;
	--sp-radio: 28px;
	--sp-ancho: 1280px;
	--sp-fuente: var(--e-global-typography-text-font-family, "Atkinson Hyperlegible"), Verdana, Arial, sans-serif;
	--sp-fuente-titulos: var(--e-global-typography-primary-font-family, "Atkinson Hyperlegible"), Verdana, Arial, sans-serif;

	/* Nombres anteriores, usados por el plugin y los formularios */
	--sp-navy: var(--sp-teal);
	--sp-on-navy: var(--sp-on-teal);
	--sp-brand: var(--sp-teal);
	--sp-on-brand: var(--sp-on-teal);
}

html.sp-alto-contraste body {
	--sp-bg: #000000;
	--sp-soft: #000000;
	--sp-sky: #000000;
	--sp-cyan: #ffe14d;
	--sp-green: #000000;
	--sp-green-dk: #000000;
	--sp-purple: #ffe14d;
	--sp-ink: #ffffff;
	--sp-muted: #ffffff;
	--sp-teal: #000000;
	--sp-teal-dk: #000000;
	--sp-on-teal: #ffffff;
	--sp-accent: #ffe14d;
	--sp-on-accent: #000000;
	--sp-line: #ffffff;
	--sp-card: #000000;
	--sp-link: #ffe14d;
	--sp-heading: #ffffff;
	--sp-lila: #000000;
	--sp-peach: #000000;
	--sp-mint: #000000;
	--sp-hi: #ffe14d;
	--sp-shadow: none;
}

/* ---------- Base (orientaciones SENADIS: sans legible, sin cursiva, interlineado 1,5) ---------- */

body {
	background: var(--sp-bg);
	color: var(--sp-ink);
	font-family: var(--sp-fuente);
	font-size: 1.1875rem;
	line-height: 1.5;
}

body > *:not(.sp-sin-zoom):not(.elementor-location-header) {
	zoom: var(--sp-zoom, 1);
}

h1, h2, h3, h4,
.elementor-widget-heading .elementor-heading-title {
	margin: 0;
	font-family: var(--sp-fuente-titulos);
	font-weight: 700;
	line-height: 1.1;
	color: inherit;
	overflow-wrap: break-word;
	hyphens: auto;
}

em,
i:not([class*="fa-"]) {
	font-style: normal;
	font-weight: 700;
}

img {
	max-width: 100%;
}

a {
	color: var(--sp-link);
}

a:hover {
	color: var(--sp-ink);
	text-decoration-thickness: 3px;
}

:focus-visible {
	outline: 4px solid var(--sp-accent);
	outline-offset: 3px;
}

.sp-oculto {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.sp-contenedor {
	max-width: var(--sp-ancho);
	margin: 0 auto;
	padding-inline: 56px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Flecha «»» al final de enlaces y botones */
.sp-flecha::after,
.sp-boton .elementor-button-text::after,
.sp-cabeza-enlace a::after {
	content: "\f101";
	margin-left: 0.5em;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 0.85em;
}

/* ---------- Botones ---------- */

.sp-btn,
.elementor-widget-button .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 54px;
	padding: 0 26px;
	border: 2px solid var(--sp-line);
	border-radius: 999px;
	background: var(--sp-teal-dk);
	color: var(--sp-on-teal);
	font-family: var(--sp-fuente);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.sp-btn:hover,
.elementor-widget-button .elementor-button:hover,
.elementor-widget-button .elementor-button:focus {
	background: var(--sp-teal-dk);
	color: var(--sp-on-teal);
	text-decoration: underline;
}

.sp-btn--acento,
.sp-boton--acento .elementor-button {
	border-color: transparent;
	background: var(--sp-accent);
	color: var(--sp-on-accent);
}

.sp-btn--acento:hover,
.sp-boton--acento .elementor-button:hover,
.sp-boton--acento .elementor-button:focus {
	background: var(--sp-accent);
	color: var(--sp-on-accent);
}

.sp-btn--borde {
	background: transparent;
	border-color: currentColor;
	color: var(--sp-ink);
}

.sp-btn--borde:hover {
	background: transparent;
	color: var(--sp-ink);
}

.sp-btn--icono {
	width: 54px;
	padding: 0;
}

.sp-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 4px 14px;
	border-radius: 999px;
	background: var(--sp-soft);
	color: var(--sp-ink);
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
}

.sp-chip--acento {
	background: var(--sp-accent);
	color: var(--sp-on-accent);
}

.sp-titulo .elementor-heading-title,
h2.sp-titulo {
	font-size: 2.5rem;
	color: var(--sp-heading);
}

.sp-seccion {
	padding-top: 104px;
}

/* ==========================================================================
   Barra de accesibilidad
   ========================================================================== */

.sp-encabezado {
	position: relative;
	z-index: 20;
}

.sp-barra {
	background: var(--sp-teal-dk);
	color: var(--sp-on-teal);
}

.sp-barra .sp-contenedor {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding-block: 8px;
}

.sp-barra__muni {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
}

.sp-barra__herramientas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.sp-barra button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 44px;
	min-height: 44px;
	padding: 0 16px;
	border: 2px solid var(--sp-on-teal);
	border-radius: 999px;
	background: transparent;
	color: var(--sp-on-teal);
	font-family: var(--sp-fuente);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

.sp-barra button:hover {
	background: rgba(255, 255, 255, 0.12);
}

.sp-barra button[data-sp-accion="menos"],
.sp-barra button[data-sp-accion="mas"] {
	padding: 0;
	font-size: 17px;
}

.sp-barra button[aria-pressed="true"] {
	background: var(--sp-accent);
	border-color: var(--sp-accent);
	color: var(--sp-on-accent);
}

.sp-barra button[data-sp-accion="contraste"][aria-pressed="true"] {
	background: #ffe14d;
	border-color: #ffe14d;
	color: #000000;
}

.sp-barra__porcentaje {
	min-width: 52px;
	text-align: center;
	font-size: 16px;
	font-weight: 700;
}

.sp-aviso-lectura {
	background: var(--sp-accent);
	color: var(--sp-on-accent);
	font-weight: 700;
}

.sp-aviso-lectura .sp-contenedor {
	display: flex;
	align-items: center;
	gap: 0.8em;
	padding-block: 0.5em;
}

.sp-aviso-lectura button {
	margin-left: auto;
}

/* ==========================================================================
   Cabecera: logo municipal + menú en píldora.
   En la portada flota sobre el hero; en el resto lleva fondo turquesa.
   ========================================================================== */

.sp-cabecera {
	background: var(--sp-teal);
	color: var(--sp-on-teal);
}

.home .sp-cabecera {
	position: absolute;
	left: 0;
	right: 0;
	background: transparent;
}

.sp-cabecera__marco {
	display: flex;
	align-items: center;
	gap: 24px;
	max-width: var(--sp-ancho);
	margin: 0 auto;
	padding: 22px 56px;
}

.sp-marca {
	display: flex;
	align-items: center;
	gap: 20px;
	color: var(--sp-on-teal);
	text-decoration: none;
}

.sp-marca:hover {
	color: var(--sp-on-teal);
}

.sp-marca img {
	width: auto;
	height: 58px;
}

.sp-marca__sep {
	width: 2px;
	height: 44px;
	background: var(--sp-on-teal);
	opacity: 0.5;
}

.sp-marca__nombre {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.1;
}

.sp-nav {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
	padding: 6px;
	border-radius: 999px;
	background: var(--sp-bg);
	box-shadow: 0 8px 24px rgba(1, 70, 92, 0.16);
}

.sp-nav ul {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-nav a {
	display: inline-block;
	padding: 10px 16px;
	border-radius: 999px;
	color: var(--sp-ink);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.sp-nav a:hover,
.sp-nav .current-menu-item > a {
	background: var(--sp-soft);
}

.sp-nav .sp-nav__cuenta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 2px solid var(--sp-line);
	background: var(--sp-teal);
	color: var(--sp-on-teal);
}

.sp-nav .sp-nav__cuenta:hover {
	background: var(--sp-teal);
	text-decoration: underline;
}

.sp-nav__menu-btn {
	display: none;
	margin-left: auto;
	width: 54px;
	height: 54px;
	border: 2px solid var(--sp-on-teal);
	border-radius: 999px;
	background: transparent;
	color: var(--sp-on-teal);
	font-size: 22px;
	cursor: pointer;
}

/* ==========================================================================
   Portada (clases usadas desde Elementor)
   ========================================================================== */

.sp-hero {
	position: relative;
	overflow: hidden;
	min-height: 820px;
	background: linear-gradient(180deg, var(--sp-sky) 0%, var(--sp-soft) 100%);
}

.sp-hero > .e-con-inner {
	position: relative;
	min-height: 820px;
}

/* Fondo de ondas: ocupa todo el ancho aunque el contenido esté encajonado */
.sp-hero__fondo {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	pointer-events: none;
}

.sp-hero__fondo svg {
	position: absolute;
	top: 0;
	left: 50%;
	width: 100vw;
	height: 100%;
	transform: translateX(-50%);
}

.sp-hero__decor {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	pointer-events: none;
}

.sp-hero__decor .elementor-widget-container {
	position: relative;
	height: 100%;
}

.sp-flechas {
	position: absolute;
	left: 820px;
	top: 128px;
}

/* Fotos del hero: widgets «Imagen» de Elementor (la clase va en el widget, la foto adentro) */
.sp-hero .sp-hero__foto1,
.sp-hero .sp-hero__foto2 {
	position: absolute !important;
	margin: 0 !important;
}

.sp-hero .sp-hero__foto1 {
	right: 72px;
	top: 150px;
	width: 360px !important;
}

.sp-hero .sp-hero__foto2 {
	left: 760px;
	top: 390px;
	width: 210px !important;
}

.sp-hero .sp-hero__foto1 img,
.sp-hero .sp-hero__foto2 img {
	display: block;
	width: 100%;
	border: 8px solid var(--sp-bg);
	object-fit: cover;
}

.sp-hero .sp-hero__foto1 img {
	height: 440px;
	border-radius: 200px 200px 36px 36px;
	object-position: center 30%;
	box-shadow: 0 24px 50px rgba(1, 70, 92, 0.28);
}

.sp-hero .sp-hero__foto2 img {
	height: 210px;
	border-radius: 999px;
	object-position: 15% 50%;
	box-shadow: var(--sp-shadow);
}

/* Las insignias van sobre las fotos; el texto, sobre todo */
.sp-hero .sp-hero__decor {
	z-index: 1;
}

.sp-hero .sp-hero__texto {
	z-index: 2;
}

.sp-insignia {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border: 2px solid var(--sp-line);
	border-radius: 999px;
	background: var(--sp-bg);
	color: var(--sp-teal);
	font-size: 28px;
	box-shadow: 0 10px 24px rgba(1, 70, 92, 0.2);
}

.sp-insignia--1 { right: 430px; top: 230px; width: 68px; height: 68px; font-size: 30px; }
.sp-insignia--2 { right: 30px; top: 110px; width: 60px; height: 60px; font-size: 26px; color: var(--sp-purple); }
.sp-insignia--3 { right: 40px; top: 520px; border: 0; background: var(--sp-accent); color: var(--sp-on-accent); }

.sp-hero__texto {
	position: relative;
	z-index: 1;
	width: 620px !important;
	max-width: 100%;
	color: var(--sp-on-teal);
}

.sp-hero__texto .elementor-heading-title {
	color: var(--sp-on-teal);
}

.sp-hero h1.elementor-heading-title {
	font-size: 66px;
	line-height: 1.02;
	letter-spacing: -0.015em;
}

.sp-hero h1 span {
	color: var(--sp-hi);
}

.sp-hero__lema {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 6px 16px 6px 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	font-size: 17px;
	font-weight: 700;
}

.sp-hero__lema span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	background: var(--sp-accent);
	color: var(--sp-on-accent);
	font-size: 14px;
}

/* ---------- Buscador con dictado (también en el catálogo) ---------- */

.sp-buscador {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 12px;
	padding: 20px;
	border: 2px solid var(--sp-line);
	border-radius: 28px;
	background: var(--sp-bg);
	color: var(--sp-ink);
	box-shadow: 0 18px 40px rgba(1, 70, 92, 0.25);
}

.sp-buscador label {
	font-weight: 700;
}

.sp-buscador__campo {
	display: flex;
	align-items: center;
	padding-left: 18px;
	border: 3px solid var(--sp-teal);
	border-radius: 999px;
	background: var(--sp-bg);
}

.sp-buscador__campo:focus-within {
	border-color: var(--sp-accent);
}

.sp-buscador__campo > i {
	color: var(--sp-muted);
}

.sp-buscador input[type="search"] {
	flex: 1;
	min-width: 0;
	min-height: 60px;
	padding: 0 12px;
	border: 0;
	background: transparent;
	color: var(--sp-ink);
	font-family: var(--sp-fuente);
	font-size: 20px;
	box-shadow: none;
	outline: none;
}

.sp-dictar {
	flex: none;
	width: 50px;
	height: 50px;
	border: 0;
	border-radius: 999px;
	background: var(--sp-soft);
	color: var(--sp-link);
	font-size: 20px;
	cursor: pointer;
}

.sp-dictar[aria-pressed="true"] {
	background: var(--sp-mic-activo);
	color: #ffffff;
	box-shadow: 0 0 0 8px rgba(194, 65, 12, 0.25);
}

.sp-dictar[hidden] {
	display: none;
}

.sp-buscador button[type="submit"] {
	flex: none;
	min-height: 52px;
	margin: 4px;
	padding: 0 26px;
	border: 0;
	border-radius: 999px;
	background: var(--sp-accent);
	color: var(--sp-on-accent);
	font-family: var(--sp-fuente);
	font-size: 20px;
	font-weight: 700;
	cursor: pointer;
}

.sp-buscador button[type="submit"]:hover {
	text-decoration: underline;
}

.sp-dictado-estado {
	margin: 0;
	font-weight: 700;
}

.sp-dictado-estado:empty {
	display: none;
}

.sp-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.sp-chips > span {
	font-size: 16px;
	color: var(--sp-muted);
}

.sp-chips a {
	padding: 4px 14px;
	border-radius: 999px;
	background: var(--sp-soft);
	color: var(--sp-ink);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}

.sp-chips a:hover {
	text-decoration: underline;
}

/* ---------- Accesos (montan sobre el hero) ---------- */

.sp-accesos-seccion {
	position: relative;
	z-index: 2;
	margin-top: -84px;
}

.sp-accesos {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px !important;
}

.sp-acceso {
	display: flex !important;
	flex-direction: column !important;
	gap: 22px !important;
	padding: 26px !important;
	border: 2px solid var(--sp-line);
	border-radius: 28px;
	background: var(--sp-card);
	color: var(--sp-ink);
	text-decoration: none !important;
	box-shadow: 0 18px 40px rgba(1, 70, 92, 0.16);
}

.sp-acceso:hover,
.sp-acceso:focus-visible {
	border-color: var(--sp-teal);
	color: var(--sp-ink);
}

.sp-acceso:hover .elementor-heading-title {
	text-decoration: underline;
}

.sp-acceso .elementor-heading-title {
	font-size: 26px;
	line-height: 1.1;
	color: inherit;
}

.sp-acceso .elementor-heading-title::after {
	content: "\f101";
	float: right;
	margin-top: 0.2em;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 22px;
	color: var(--sp-link);
}

.sp-acceso__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border-radius: 999px;
	color: var(--sp-heading);
	font-size: 27px;
}

.sp-acceso--principal,
.sp-acceso--principal:hover,
.sp-acceso--principal:focus-visible {
	background: var(--sp-teal);
	color: var(--sp-on-teal);
	box-shadow: 0 18px 40px rgba(1, 70, 92, 0.22);
}

.sp-acceso--principal:hover {
	background: var(--sp-teal-dk);
}

.sp-acceso--principal .sp-acceso__icono {
	background: var(--sp-accent);
	color: var(--sp-on-accent);
}

.sp-acceso--principal .elementor-heading-title::after {
	color: inherit;
}

.sp-acceso--catastro .sp-acceso__icono { background: var(--sp-mint); }
.sp-acceso--solicitudes .sp-acceso__icono { background: var(--sp-lila); }
.sp-acceso--talleres .sp-acceso__icono { background: var(--sp-peach); }

/* ---------- Encabezado de sección con enlace ---------- */

.sp-cabeza {
	align-items: flex-end !important;
}

.sp-cabeza-enlace a {
	display: inline-flex;
	align-items: center;
	font-weight: 700;
}

/* ---------- Talleres (fondo celeste con ondas) ---------- */

.sp-talleres {
	background: var(--sp-sky);
}

.sp-onda {
	display: block;
	width: 100%;
	height: 70px;
}

.sp-onda path {
	fill: var(--sp-bg);
}

.sp-talleres__grilla {
	padding-block: 40px 72px !important;
}

.sp-talleres__intro .elementor-heading-title {
	font-size: 44px;
	line-height: 1.05;
	color: var(--sp-heading);
}

.sp-talleres__intro p {
	margin: 0;
}

/* ---------- Así de simple ---------- */

.sp-como__foto {
	position: relative;
}

.sp-como .sp-como__foto img {
	display: block;
	width: 100%;
	height: 400px;
	border-radius: 36px 200px 36px 36px;
	object-fit: cover;
}

/* Insignia con check sobre la foto (la foto es un widget «Imagen» de Elementor) */
.sp-como__foto::after {
	content: "\f00c";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	position: absolute;
	left: -18px;
	bottom: -18px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	border: 6px solid var(--sp-bg);
	border-radius: 999px;
	background: var(--sp-accent);
	color: var(--sp-on-accent);
	font-size: 34px;
}

.sp-como .elementor-heading-title {
	font-size: 44px;
	line-height: 1.05;
	color: var(--sp-heading);
}

.sp-pasos {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: paso;
}

.sp-pasos li {
	display: flex;
	align-items: center;
	gap: 20px;
	font-size: 26px;
	font-weight: 700;
	counter-increment: paso;
}

.sp-pasos li + li {
	position: relative;
	margin-top: 28px;
}

.sp-pasos li + li::after {
	content: "";
	position: absolute;
	left: 32px;
	top: -28px;
	width: 4px;
	height: 28px;
	background: var(--sp-line);
}

.sp-pasos li::before {
	content: counter(paso);
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	border: 2px solid var(--sp-line);
	border-radius: 999px;
	background: var(--sp-teal);
	color: var(--sp-on-teal);
	font-size: 30px;
}

.sp-pasos li:nth-child(2)::before {
	background: var(--sp-purple);
	color: #ffffff;
}

.sp-pasos li:nth-child(3)::before {
	background: var(--sp-green-dk);
	color: #ffffff;
}

/* ---------- Banner de la encuesta ---------- */

.sp-encuesta {
	position: relative;
	overflow: hidden;
	min-height: 260px;
	border: 2px solid var(--sp-line);
	border-radius: 36px;
	background: var(--sp-teal);
	color: var(--sp-on-teal);
}

.sp-encuesta__fondo {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	pointer-events: none;
}

.sp-encuesta__fondo svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.sp-encuesta > .e-con-inner > *:not(.sp-encuesta__fondo),
.sp-encuesta > *:not(.sp-encuesta__fondo) {
	position: relative;
}

.sp-encuesta .elementor-heading-title {
	font-size: 42px;
	line-height: 1.05;
	color: var(--sp-on-teal);
}

.sp-encuesta p {
	margin: 0;
	font-size: 21px;
}

.sp-encuesta .elementor-button {
	min-height: 72px;
	padding: 0 36px;
	font-size: 24px;
	box-shadow: 0 6px 0 rgba(11, 54, 68, 0.25);
}

/* ---------- ¿Te ayudamos? ---------- */

.sp-ayuda__icono {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	border: 2px solid var(--sp-line);
	border-radius: 999px;
	background: var(--sp-soft);
	color: var(--sp-link);
	font-size: 36px;
}

.sp-ayuda p {
	margin: 4px 0 0;
	font-weight: 700;
}

.sp-telefono {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	min-height: 84px;
	padding: 0 36px;
	border: 2px solid var(--sp-line);
	border-radius: 999px;
	background: var(--sp-teal-dk);
	color: var(--sp-on-teal);
	text-decoration: none;
	line-height: 1.15;
}

.sp-telefono:hover {
	color: var(--sp-on-teal);
	text-decoration: underline;
}

.sp-telefono i {
	font-size: 26px;
}

.sp-telefono strong {
	display: block;
	font-size: 32px;
}

/* ==========================================================================
   Pie (créditos según Manual Gráfico SENADIS)
   ========================================================================== */

.sp-pie {
	margin-top: 96px;
}

.sp-pie > svg {
	display: block;
	width: 100%;
	height: 90px;
}

.sp-pie__cuerpo {
	background: var(--sp-teal);
	color: var(--sp-on-teal);
	font-size: 17px;
}

.sp-pie__cuerpo .sp-contenedor {
	display: flex;
	align-items: center;
	gap: 40px;
	padding-block: 16px 36px;
}

.sp-pie__cuerpo img {
	width: auto;
	height: 68px;
}

.sp-pie__creditos {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sp-pie__logo {
	display: flex;
	align-items: center;
	min-height: 60px;
	padding: 0 24px;
	border-radius: 12px;
	background: #ffffff;
	color: #0b3644;
	font-size: 15px;
	font-weight: 700;
}

.sp-pie__base {
	background: var(--sp-teal-dk);
	color: var(--sp-on-teal);
	font-size: 16px;
}

.sp-pie__base .sp-contenedor {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 14px;
}

.sp-pie__base ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-pie a {
	color: var(--sp-on-teal);
}

/* ==========================================================================
   Páginas internas (encabezado + contenido + panel lateral)
   ========================================================================== */

.sp-seccion--primera {
	padding-top: 0;
}

.sp-hero--pagina {
	position: relative;
	overflow: hidden;
	min-height: 0;
	margin-top: 0;
	border-radius: 0 0 36px 36px;
	background: var(--sp-teal);
	color: var(--sp-on-teal);
}

.sp-hero--pagina::after {
	content: "";
	position: absolute;
	right: -40px;
	bottom: -60px;
	width: 320px;
	height: 160px;
	border-radius: 50%;
	background: var(--sp-cyan);
	opacity: 0.45;
	pointer-events: none;
}

.sp-hero--pagina > * {
	position: relative;
	z-index: 1;
}

.sp-hero--pagina .elementor-heading-title {
	color: var(--sp-on-teal);
}

.sp-hero--pagina h1.elementor-heading-title {
	font-size: clamp(2.2rem, 4vw, 3.4rem);
}

.sp-hero .sp-bajada,
.sp-hero .sp-bajada p {
	margin: 0;
	color: var(--sp-on-teal);
	font-size: 1.2rem;
}

.sp-migas {
	font-size: 0.95rem;
	color: var(--sp-on-teal);
}

.sp-migas a {
	color: var(--sp-on-teal);
}

.sp-filtros-encabezado {
	display: flex;
	flex-direction: column;
	gap: 1.2em;
	margin-top: 0.4em;
}

.sp-pagina__principal {
	flex: 999 1 560px !important;
	min-width: 0;
}

.sp-pagina__lateral {
	flex: 1 1 280px !important;
	min-width: 0;
}

.sp-lateral {
	border: 2px solid var(--sp-line);
	border-radius: var(--sp-radio);
	color: var(--sp-ink);
}

.sp-lateral .elementor-heading-title {
	font-size: 1.4rem;
	color: inherit;
}

.sp-lateral p {
	margin: 0;
}

.sp-lateral--lila { background: var(--sp-lila); }
.sp-lateral--borde { background: var(--sp-card); }
.sp-lateral--acento { border-color: transparent; background: var(--sp-peach); }

.sp-lateral .sp-telefono {
	min-height: 64px;
	padding: 0 1.3em;
}

.sp-lateral .sp-telefono strong {
	font-size: 1.3em;
}

.sp-lista-check {
	display: grid;
	gap: 0.5em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-lista-check li {
	position: relative;
	padding-left: 1.6em;
}

.sp-lista-check li::before {
	content: "\f00c";
	position: absolute;
	left: 0;
	top: 0.1em;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	color: var(--sp-green-dk);
}

/* ---------- Fichas de beneficio y taller (plantilla de Hello) ---------- */

.single-sp_beneficio .site-main,
.single-sp_taller .site-main {
	max-width: var(--sp-ancho);
	margin: 0 auto;
	padding: 0 56px;
}

.single-sp_beneficio .page-header,
.single-sp_taller .page-header {
	position: relative;
	overflow: hidden;
	margin: 0 -56px 2em;
	padding: 2.6em 56px 3em;
	border-radius: 0 0 36px 36px;
	background: var(--sp-teal);
	color: var(--sp-on-teal);
}

.single-sp_beneficio .page-header .entry-title,
.single-sp_taller .page-header .entry-title {
	max-width: 22em;
	color: var(--sp-on-teal);
	font-size: clamp(2rem, 4vw, 3.2rem);
}

/* ==========================================================================
   Lectura fácil: textos más simples y menos información secundaria
   ========================================================================== */

html:not(.sp-lectura-facil) .sp-solo-facil {
	display: none !important;
}

html.sp-lectura-facil .sp-no-facil,
html.sp-lectura-facil .sp-meta,
html.sp-lectura-facil .sp-tarjeta__desc {
	display: none !important;
}

html.sp-lectura-facil body {
	line-height: 1.8;
	word-spacing: 0.08em;
}

/* ==========================================================================
   Alto contraste: refuerzos para piezas con colores propios
   ========================================================================== */

html.sp-alto-contraste .elementor-widget-text-editor,
html.sp-alto-contraste .elementor-widget-text-editor * {
	color: #ffffff !important;
}

html.sp-alto-contraste .sp-hero,
html.sp-alto-contraste .sp-talleres {
	background: #000000;
}

html.sp-alto-contraste .sp-hero__fondo,
html.sp-alto-contraste .sp-flechas,
html.sp-alto-contraste .sp-encuesta__fondo,
html.sp-alto-contraste .sp-hero--pagina::after {
	display: none;
}

html.sp-alto-contraste .sp-hero .sp-hero__foto1 img,
html.sp-alto-contraste .sp-hero .sp-hero__foto2 img,
html.sp-alto-contraste .sp-como .sp-como__foto img {
	border-color: #ffffff;
}

html.sp-alto-contraste .sp-hero--pagina,
html.sp-alto-contraste .sp-encuesta {
	border: 2px solid #ffffff;
}

html.sp-alto-contraste .sp-nav {
	border: 2px solid #ffffff;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1180px) {
	.sp-hero .sp-hero__foto2,
	.sp-flechas,
	.sp-insignia {
		display: none;
	}

	.sp-hero .sp-hero__foto1 {
		right: 40px;
		width: 300px !important;
	}

	.sp-hero .sp-hero__foto1 img {
		height: 380px;
	}

	.sp-hero__texto {
		width: 560px !important;
	}

	.sp-nav a {
		padding: 10px 12px;
	}
}

@media (max-width: 900px) {
	.sp-contenedor,
	.sp-cabecera__marco {
		padding-inline: 22px;
	}

	.sp-barra__muni,
	.sp-barra__etiqueta {
		display: none;
	}

	.sp-barra .sp-contenedor {
		justify-content: center;
		padding-inline: 10px;
	}

	.sp-barra__herramientas {
		gap: 6px;
	}

	.sp-barra button {
		padding: 0 12px;
	}

	.sp-cabecera__marco {
		flex-wrap: wrap;
		gap: 12px;
		padding-block: 14px;
	}

	.sp-marca {
		gap: 12px;
	}

	.sp-marca img {
		height: 44px;
	}

	.sp-marca__nombre {
		font-size: 20px;
	}

	.sp-nav__menu-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.sp-nav {
		flex-basis: 100%;
		flex-direction: column;
		align-items: stretch;
		margin-left: 0;
		border-radius: 24px;
	}

	.sp-nav[data-abierto="false"] {
		display: none;
	}

	.sp-nav ul {
		flex-direction: column;
		align-items: stretch;
	}

	.sp-nav a {
		display: block;
	}

	.sp-hero,
	.sp-hero > .e-con-inner {
		min-height: 0;
	}

	.sp-hero .sp-hero__foto1 {
		display: none;
	}

	.sp-hero__texto {
		width: auto !important;
	}

	.sp-hero h1.elementor-heading-title {
		font-size: 44px;
	}

	.sp-accesos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sp-seccion {
		padding-top: 72px;
	}

	.sp-titulo .elementor-heading-title {
		font-size: 2rem;
	}

	.sp-como .elementor-heading-title,
	.sp-talleres__intro .elementor-heading-title,
	.sp-encuesta .elementor-heading-title {
		font-size: 34px;
	}

	.sp-como .sp-como__foto img {
		height: 300px;
	}

	.sp-pie__cuerpo .sp-contenedor,
	.sp-pie__base .sp-contenedor {
		flex-direction: column;
		align-items: flex-start;
	}

	.single-sp_beneficio .site-main,
	.single-sp_taller .site-main {
		padding: 0 22px;
	}

	.single-sp_beneficio .page-header,
	.single-sp_taller .page-header {
		margin-inline: -22px;
		padding-inline: 22px;
	}
}

@media (max-width: 560px) {
	.sp-accesos {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-acceso .elementor-heading-title {
		font-size: 22px;
	}

	.sp-buscador {
		padding: 14px;
	}

	.sp-buscador__campo {
		flex-wrap: wrap;
		padding: 8px;
		border-radius: 24px;
	}

	.sp-buscador button[type="submit"] {
		width: 100%;
	}

	.sp-hero h1.elementor-heading-title {
		font-size: 36px;
	}

	.sp-telefono {
		padding: 0 22px;
	}

	.sp-telefono strong {
		font-size: 26px;
	}
}

.sp-cabeza-enlace {
	margin-left: auto;
}

.sp-lateral .sp-telefono strong {
	font-size: 1.15em;
	white-space: nowrap;
}

/* El hero no lleva relleno lateral (si fuera asimétrico, el fondo centrado se correría):
   el margen va en el bloque de texto. */
.sp-hero__texto {
	margin-left: 56px;
}

@media (max-width: 900px) {
	.sp-hero__texto {
		margin-inline: 22px;
	}
}

/* ¿Te ayudamos?: el bloque de título ocupa el espacio y el teléfono queda al borde derecho */
.sp-ayuda__titulo {
	flex: 1 1 420px !important;
	width: auto !important;
}

.sp-ayuda__telefono {
	margin-left: auto;
}

@media (max-width: 900px) {
	.sp-ayuda__telefono {
		margin-left: 0;
	}
}

/* Celular: logo, nombre y botón de menú en una sola fila */
@media (max-width: 900px) {
	.sp-marca img {
		height: 38px;
	}

	.sp-marca__sep {
		height: 32px;
	}

	.sp-marca__nombre {
		font-size: 17px;
	}

	.sp-nav__menu-btn {
		width: 48px;
		height: 48px;
		font-size: 20px;
	}
}

@media (max-width: 360px) {
	.sp-marca__sep,
	.sp-marca__nombre {
		display: none;
	}
}

@media (max-width: 900px) {
	.sp-marca {
		flex: 0 1 auto;
		min-width: 0;
	}

	.sp-marca__nombre {
		min-width: 0;
		max-width: 6.5em;
		line-height: 1.15;
	}
}

/* ---------- Pie armado en Elementor (plantilla «Pie del sitio») ---------- */

.sp-pie .elementor-widget-text-editor p {
	margin: 0;
}

.sp-pie .sp-pie__logo-muni {
	width: auto !important;
}

.sp-pie .sp-pie__logo-muni img {
	width: auto;
	height: 68px;
}

.sp-pie .sp-pie__creditos {
	flex: 1 1 420px !important;
}

.sp-pie .sp-pie__creditos p + p {
	margin-top: 2px;
}

.sp-pie .elementor-widget.sp-pie__logo {
	display: flex;
	align-items: center;
	min-height: 60px;
	padding: 0 24px;
	border-radius: 12px;
	background: #ffffff;
	color: #0b3644;
}

.sp-pie .elementor-widget.sp-pie__logo,
.sp-pie .elementor-widget.sp-pie__logo * {
	color: #0b3644 !important;
	font-size: 15px;
	font-weight: 700;
}

.sp-pie__base .widget_nav_menu ul,
.sp-pie__base .menu {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-pie .elementor-widget-wp-widget-nav_menu h5 {
	display: none;
}

.sp-pie .elementor-widget.sp-pie__logo {
	align-self: center;
	height: 60px;
	min-height: 0;
}

.sp-pie__base .elementor-widget-wp-widget-nav_menu {
	margin-left: auto;
}

@media (max-width: 900px) {
	.sp-pie__base .elementor-widget-wp-widget-nav_menu {
		margin-left: 0;
	}
}

/* ==========================================================================
   Elementor Pro: cabecera, pie, fichas y tarjetas del Loop Grid
   (plantillas del constructor de temas, ver scripts/tema-pro.php)
   ========================================================================== */

/* La cabecera de Pro no se agranda con el zoom: la barra de accesibilidad siempre se alcanza */
body > .elementor-location-header {
	zoom: 1;
}

/* Cabecera: en la portada flota sobre el hero, justo bajo la barra (60 px) */
.home .elementor-location-header .sp-cabecera {
	position: absolute;
	top: var(--sp-alto-barra, 60px);
	left: 0;
	right: 0;
	z-index: 5;
	background: transparent;
}

.elementor-location-header .sp-encabezado__barra .elementor-widget-container {
	margin: 0;
}

.sp-marca .sp-marca__logo img {
	width: auto;
	height: 58px;
}

.sp-marca .sp-marca__nombre .elementor-heading-title,
.sp-marca .sp-marca__nombre .elementor-heading-title a {
	color: var(--sp-on-teal);
	font-size: 26px;
	line-height: 1.1;
	text-decoration: none;
}

.sp-nav.e-con {
	width: auto;
	margin-left: auto;
}

.sp-nav .elementor-nav-menu--main .elementor-nav-menu {
	flex-wrap: nowrap;
}

.sp-nav .elementor-nav-menu--main .elementor-item {
	padding: 10px 16px;
	border-radius: 999px;
	color: var(--sp-ink);
	font-family: var(--sp-fuente);
	font-size: 1.1875rem;
	font-weight: 700;
	white-space: nowrap;
}

.sp-nav .elementor-nav-menu--main .elementor-item:hover,
.sp-nav .elementor-nav-menu--main .elementor-item.elementor-item-active {
	background: var(--sp-soft);
	color: var(--sp-ink);
}

.sp-nav .elementor-menu-toggle {
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: var(--sp-teal);
	color: var(--sp-on-teal);
	font-size: 22px;
}

.sp-nav .elementor-nav-menu--dropdown {
	border-radius: 20px;
	background: var(--sp-bg);
	box-shadow: var(--sp-shadow);
}

.sp-nav .elementor-nav-menu--dropdown a {
	padding: 14px 20px;
	color: var(--sp-ink);
	font-family: var(--sp-fuente);
	font-weight: 700;
}

.sp-nav .elementor-nav-menu--dropdown a:hover,
.sp-nav .elementor-nav-menu--dropdown a.elementor-item-active {
	background: var(--sp-soft);
	color: var(--sp-ink);
}

/* Pie: menú de Pro */
.sp-pie__menu .elementor-nav-menu--main .elementor-item {
	padding: 4px 0;
	margin: 0 12px;
	color: var(--sp-on-teal);
	font-family: var(--sp-fuente);
	font-size: 16px;
	font-weight: 400;
	text-decoration: underline;
}

.sp-pie__menu .elementor-nav-menu--main .elementor-item:hover {
	color: var(--sp-on-teal);
	text-decoration-thickness: 3px;
}

.sp-pie__base .sp-pie__menu {
	margin-left: auto;
}

.sp-pie .sp-pie__ondas {
	display: block;
	width: 100%;
	height: 90px;
}

.elementor-location-footer .sp-pie {
	margin-top: 96px;
}

/* Fichas: títulos de sección */
.sp-titulo-ficha .elementor-heading-title {
	margin-top: 0.6em;
	font-size: 1.7rem;
	color: var(--sp-heading);
}

.sp-hero--pagina .sp-ficha-beneficio__chips .sp-chip {
	background: var(--sp-bg);
}

.sp-hero--pagina .sp-tarjeta__dato {
	margin: 0;
	color: var(--sp-on-teal);
	font-weight: 700;
}

/* Tarjetas de beneficio (Loop Grid): la banda contiene onda, tema e ícono superpuestos */
.e-loop-item .sp-beneficio {
	height: 100%;
}

.sp-beneficio__banda.e-con {
	position: relative;
	height: 120px;
	padding: 0;
}

.sp-beneficio__banda > .elementor-widget,
.sp-beneficio__banda > .e-con-inner > .elementor-widget {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	margin: 0 !important;
}

.sp-beneficio__onda {
	pointer-events: none;
}

.sp-beneficio__onda svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.sp-beneficio__onda svg path {
	fill: var(--sp-card);
}

.sp-beneficio .elementor-widget-theme-post-title .elementor-heading-title {
	font-size: 25px;
	line-height: 1.2;
}

.sp-beneficio .elementor-widget-theme-post-title a {
	color: var(--sp-ink);
	text-decoration: none;
}

.sp-beneficio .elementor-widget-theme-post-title a:hover {
	text-decoration: underline;
}

.sp-beneficio .sp-tarjeta__desc,
.sp-beneficio .sp-tarjeta__desc p {
	margin: 0;
	color: var(--sp-muted);
}

.sp-beneficio__cuerpo.e-con {
	flex: 1;
	padding: 4px 28px 28px;
}

.sp-beneficio__acciones.e-con {
	margin-top: auto;
	padding-top: 6px;
}

/* Colores alternados: turquesa, verde, lila */
.sp-loop-beneficios .e-loop-item:nth-of-type(3n+2) .sp-beneficio__banda {
	background: var(--sp-green);
	color: var(--sp-heading);
}

.sp-loop-beneficios .e-loop-item:nth-of-type(3n+3) .sp-beneficio__banda {
	background: var(--sp-purple);
	color: #ffffff;
}

/* Catálogo: tarjeta horizontal */
.sp-beneficio--lista.e-con {
	flex-direction: row;
}

.sp-beneficio--lista .sp-beneficio__banda.e-con {
	width: 190px;
	height: auto;
	min-height: 200px;
	flex: none;
}

.sp-beneficio--lista .sp-beneficio__onda {
	display: none;
}

.sp-beneficio--lista .sp-beneficio__cuerpo.e-con {
	padding: 24px 28px;
}

/* Talleres (Loop Grid) */
.sp-loop-talleres .e-loop-item:nth-of-type(2n) .sp-taller__fecha {
	background: var(--sp-green-dk);
	color: #ffffff;
}

.sp-taller.e-con {
	display: grid !important;
	padding: 20px 24px 20px 20px;
}

.sp-taller__info .elementor-widget-theme-post-title .elementor-heading-title {
	font-size: 24px;
	line-height: 1.2;
}

.sp-taller__info .elementor-widget-theme-post-title a {
	color: var(--sp-ink);
	text-decoration: none;
}

@media (max-width: 760px) {
	.sp-beneficio--lista.e-con {
		flex-direction: column;
	}

	.sp-beneficio--lista .sp-beneficio__banda.e-con {
		width: auto;
		min-height: 0;
		height: 96px;
	}

	.sp-marca .sp-marca__logo img {
		height: 38px;
	}

	.sp-marca .sp-marca__nombre .elementor-heading-title,
	.sp-marca .sp-marca__nombre .elementor-heading-title a {
		font-size: 17px;
	}
}

/* Elementor da ancho completo a los contenedores en fila: marca y menú miden lo que necesitan */
.sp-cabecera .sp-marca.e-con,
.sp-cabecera .sp-nav.e-con {
	--width: auto;
	width: auto !important;
	flex: 0 0 auto !important;
}

.sp-nav .elementor-widget-shortcode,
.sp-nav .sp-nav__menu {
	width: auto !important;
	flex: 0 0 auto !important;
}

/* Como en el diseño: el nombre en dos líneas y sin márgenes extra entre ítems del menú */
.sp-marca .sp-marca__nombre {
	max-width: 7.5em !important;
}

.sp-nav .elementor-nav-menu--main .elementor-nav-menu > li,
.sp-nav .elementor-nav-menu--main .elementor-item {
	margin: 0 !important;
}

.sp-nav .elementor-nav-menu--main .elementor-nav-menu {
	gap: 4px;
}

.sp-nav .elementor-nav-menu--main .elementor-item {
	padding: 10px 14px;
	font-size: 18px;
}

.sp-nav .sp-nav__cuenta {
	padding: 10px 16px;
	font-size: 18px;
}

.sp-marca .sp-marca__sep {
	display: block;
}

/* Cabecera de Pro en tablet y celular (el menú pasa a desplegable bajo 1024 px) */
@media (max-width: 1024px) {
	.sp-cabecera {
		position: relative;
	}

	.sp-cabecera .sp-nav.e-con {
		padding: 0;
		gap: 8px;
		background: transparent;
		box-shadow: none;
	}

	/* El desplegable se ubica respecto de toda la cabecera, no de la píldora */
	.sp-nav,
	.sp-nav .sp-nav__menu,
	.sp-nav .sp-nav__menu > .elementor-widget-container {
		position: static !important;
	}

	.sp-nav .elementor-menu-toggle {
		border: 2px solid var(--sp-on-teal);
		background: transparent;
		color: var(--sp-on-teal);
	}

	.sp-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container {
		position: absolute;
		left: 22px;
		right: 22px;
		top: calc(100% - 6px);
		z-index: 30;
		margin: 0;
		padding: 8px;
		border: 2px solid var(--sp-line);
	}

	.sp-nav .sp-nav__cuenta {
		width: 48px;
		height: 48px;
		padding: 0;
		justify-content: center;
		border: 2px solid var(--sp-on-teal);
		background: transparent;
		font-size: 0;
	}

	.sp-nav .sp-nav__cuenta i {
		font-size: 20px;
	}

	.sp-cabecera .sp-marca.e-con {
		flex: 0 1 auto !important;
		min-width: 0;
		gap: 12px;
	}
}

/* ==========================================================================
   Escala de texto compacta: 17 px de base (sobre el mínimo de 12 pt de SENADIS).
   La barra de accesibilidad agranda todo a 115 %, 130 % o 150 % con zoom.
   Va al final para ajustar en un solo lugar los tamaños de tema, plugin y plantillas.
   ========================================================================== */

body {
	font-size: 1.0625rem;
}

body .sp-hero h1.elementor-heading-title { font-size: 52px; }
body .sp-hero__lema { font-size: 15px; }
body .sp-titulo .elementor-heading-title,
body h2.sp-titulo { font-size: 2.1rem; }
body .sp-hero--pagina h1.elementor-heading-title { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
body .sp-hero .sp-bajada,
body .sp-hero .sp-bajada p { font-size: 1.05rem; }

body .sp-acceso .elementor-heading-title { font-size: 22px; }
body .sp-acceso__icono { width: 54px; height: 54px; font-size: 23px; }

body .sp-buscador input[type="search"],
body .sp-buscador button[type="submit"] { font-size: 18px; }
body .sp-buscador input[type="search"] { min-height: 54px; }

body .sp-beneficio h3,
body .sp-beneficio .elementor-widget-theme-post-title .elementor-heading-title { font-size: 21px; }
body .sp-beneficio__icono { font-size: 34px; }
body .sp-beneficio__banda,
body .sp-beneficio__banda.e-con { height: 104px; }

body .sp-taller h3,
body .sp-taller__info .elementor-widget-theme-post-title .elementor-heading-title { font-size: 20px; }
body .sp-taller__fecha strong { font-size: 38px; }
body .sp-taller__fecha { height: 96px; }
body .sp-taller { grid-template-columns: 96px minmax(0, 1fr) auto; }
body .sp-taller__datos { font-size: 15px; }

body .sp-talleres__intro .elementor-heading-title,
body .sp-como .elementor-heading-title { font-size: 36px; }
body .sp-pasos li { font-size: 21px; }
body .sp-pasos li::before { width: 56px; height: 56px; font-size: 24px; }
body .sp-pasos li + li::after { left: 26px; }

body .sp-encuesta .elementor-heading-title { font-size: 34px; }
body .sp-encuesta p { font-size: 18px; }
body .sp-encuesta .elementor-button { min-height: 60px; font-size: 20px; }

body .sp-telefono { min-height: 72px; }
body .sp-telefono strong { font-size: 26px; }
body .sp-ayuda__icono { width: 72px; height: 72px; font-size: 30px; }

body .sp-nav .elementor-nav-menu--main .elementor-item,
body .sp-nav .sp-nav__cuenta { font-size: 16px; }
body .sp-marca .sp-marca__nombre .elementor-heading-title,
body .sp-marca .sp-marca__nombre .elementor-heading-title a { font-size: 22px; }
body .sp-marca .sp-marca__logo img { height: 50px; }

body .sp-titulo-ficha .elementor-heading-title,
body .sp-ficha-beneficio__principal h2 { font-size: 1.5rem; }
body .sp-ficha-beneficio__texto { font-size: 1.05em; }
body .sp-lateral .elementor-heading-title,
body .sp-ficha-beneficio__lateral h2 { font-size: 1.25rem; }

body .sp-seccion { padding-top: 88px; }

@media (max-width: 900px) {
	body .sp-hero h1.elementor-heading-title { font-size: 38px; }
	body .sp-titulo .elementor-heading-title { font-size: 1.8rem; }
	body .sp-talleres__intro .elementor-heading-title,
	body .sp-como .elementor-heading-title,
	body .sp-encuesta .elementor-heading-title { font-size: 30px; }
	body .sp-seccion { padding-top: 64px; }
}

@media (max-width: 760px) {
	body .sp-marca .sp-marca__logo img { height: 38px; }
	body .sp-marca .sp-marca__nombre .elementor-heading-title,
	body .sp-marca .sp-marca__nombre .elementor-heading-title a { font-size: 17px; }
	body .sp-taller { grid-template-columns: 80px minmax(0, 1fr); }
}

@media (max-width: 560px) {
	body .sp-hero h1.elementor-heading-title { font-size: 32px; }
	body .sp-acceso .elementor-heading-title { font-size: 20px; }
	body .sp-telefono strong { font-size: 22px; }
}

/* El fondo de ondas del hero usa 100vw: con zoom no debe provocar barra horizontal */
body {
	overflow-x: clip;
}

body .sp-seccion--primera {
	padding-top: 0;
}

.sp-acciones-sesion {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 1.1em;
}

html.sp-alto-contraste .sp-insignia {
	border-color: #ffffff;
	color: #ffe14d;
}

/* Barra de accesibilidad compacta: botones de 36 px (sobre el mínimo de 24 px de WCAG 2.2 AA) */
body {
	--sp-alto-barra: 48px;
}

body .sp-barra .sp-contenedor {
	padding-block: 6px;
	gap: 6px;
}

body .sp-barra__muni {
	font-size: 14px;
}

body .sp-barra__herramientas {
	gap: 6px;
}

body .sp-barra button {
	min-width: 36px;
	min-height: 36px;
	gap: 6px;
	padding: 0 12px;
	font-size: 14px;
}

body .sp-barra button[data-sp-accion="menos"],
body .sp-barra button[data-sp-accion="mas"] {
	padding: 0;
	font-size: 14px;
}

body .sp-barra__porcentaje {
	min-width: 42px;
	font-size: 14px;
}

/* Pasos del protocolo: frases largas, en texto normal */
body .sp-pasos--protocolo li {
	align-items: flex-start;
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.5;
}

body .sp-pasos--protocolo li::before {
	width: 44px;
	height: 44px;
	font-size: 20px;
	font-weight: 700;
}

body .sp-pasos--protocolo li + li {
	margin-top: 18px;
}

body .sp-pasos--protocolo li + li::after {
	display: none;
}

/* En tablet y celular «Ingresar» es solo el ícono (la escala compacta no debe devolverle el texto) */
@media (max-width: 1024px) {
	body .sp-nav .sp-nav__cuenta {
		font-size: 0;
	}
}

/* Correos y enlaces largos no se salen de las tarjetas */
.sp-lateral a,
.sp-ficha-beneficio__lateral a {
	overflow-wrap: anywhere;
}

/* Enlaces dentro de un párrafo: subrayados, para no depender solo del color (WCAG 1.4.1). */
body p a:not([class*="sp-btn"]):not(.elementor-button) {
	text-decoration: underline;
	text-underline-offset: .15em;
}

/* Foco en dos tonos: contorno oscuro y halo claro, visible sobre fondos claros y oscuros
   (WCAG 2.4.7 y 1.4.11). Gana al contorno negro de 2 px que trae el reset de Hello. */
body :focus-visible,
body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible,
body [tabindex]:not([tabindex="-1"]):focus-visible {
	outline: 3px solid var(--sp-ink);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--sp-bg);
}

/* El buscador muestra el foco en todo el campo, no solo en el texto. */
body .sp-buscador input[type="search"]:focus-visible {
	outline: 0;
	box-shadow: none;
}

.sp-buscador__campo:focus-within {
	border-color: var(--sp-ink);
	box-shadow: 0 0 0 2px var(--sp-bg), 0 0 0 5px var(--sp-ink);
}

/* ==========================================================================
   Páginas internas v2 — pegar AL FINAL de style.css.
   Encabezado como la portada (sp-hero--interna), bloque que monta sobre él (sp-solapa)
   y piezas de contenido. Todo el color sale de las variables --sp-*, así que el alto
   contraste sigue funcionando. Los selectores de shortcodes llevan «body» delante para
   ganarle a sp-core.css, que se carga después.
   ========================================================================== */

/* ---------- Cabecera: flota sobre el encabezado, como en la portada ---------- */

body:has(.sp-hero--interna) .sp-cabecera {
	position: absolute;
	left: 0;
	right: 0;
	background: transparent;
}

body:has(.sp-hero--interna) .elementor-location-header .sp-cabecera {
	top: var(--sp-alto-barra, 48px);
	z-index: 5;
}

/* ---------- Encabezado ---------- */

body .sp-hero--interna,
body .sp-hero--interna > .e-con-inner {
	min-height: 560px;
}

.sp-hero--interna .sp-flechas {
	left: 770px;
	top: 128px;
}

.sp-arco {
	position: absolute;
	right: 96px;
	top: 128px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 320px;
	height: 330px;
	box-sizing: border-box;
	border: 8px solid var(--sp-bg);
	border-radius: 200px 200px 36px 36px;
	background: var(--sp-soft);
	color: var(--sp-heading);
	font-size: 120px;
	box-shadow: 0 24px 50px rgba(1, 70, 92, 0.28);
}

.sp-arco--durazno { background: var(--sp-peach); }
.sp-arco--menta { background: var(--sp-mint); }
.sp-arco--lila { background: var(--sp-lila); }
.sp-arco--suave { background: var(--sp-soft); }

.sp-insignia--a { right: 388px; top: 220px; width: 68px; height: 68px; font-size: 30px; }
.sp-insignia--b { right: 56px; top: 112px; width: 60px; height: 60px; font-size: 26px; color: var(--sp-purple); }
.sp-insignia--c { right: 60px; top: 400px; border: 0; background: var(--sp-accent); color: var(--sp-on-accent); }

/* ---------- Bloque que monta sobre el encabezado ---------- */

body .sp-solapa {
	position: relative;
	z-index: 2;
	margin-top: -96px;
}

body .sp-seccion.sp-seccion--cerca {
	padding-top: 48px;
}

/* ---------- Grillas y tarjetas con ícono ---------- */

.sp-grilla {
	display: grid !important;
	grid-template-columns: repeat(var(--sp-cols, 3), minmax(0, 1fr));
	gap: 18px !important;
}

.sp-grilla--2 { --sp-cols: 2; }
.sp-grilla--3 { --sp-cols: 3; }
.sp-grilla--5 { --sp-cols: 5; }

.sp-mini {
	border: 2px solid var(--sp-line);
	border-radius: var(--sp-radio);
	background: var(--sp-card);
	color: var(--sp-ink);
	box-shadow: 0 18px 40px rgba(1, 70, 92, 0.16);
}

.sp-mini > .elementor-widget-html,
.sp-mini > .e-con-inner > .elementor-widget-html {
	flex: none;
	width: auto !important;
}

.sp-mini__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 999px;
	background: var(--sp-soft);
	color: var(--sp-heading);
	font-size: 23px;
}

.sp-mini__icono--menta { background: var(--sp-mint); }
.sp-mini__icono--lila { background: var(--sp-lila); }
.sp-mini__icono--durazno { background: var(--sp-peach); }
.sp-mini__icono--suave { background: var(--sp-soft); }

.sp-mini .elementor-heading-title {
	font-size: 1.2rem;
	line-height: 1.25;
	color: inherit;
}

.sp-mini p {
	margin: 0;
	font-size: 1rem;
	color: var(--sp-muted);
}

.sp-nota,
.sp-nota p {
	margin: 0;
	color: var(--sp-muted);
}

/* ---------- Franja horizontal (llamado a la acción) ---------- */

.sp-franja {
	border-radius: var(--sp-radio);
	background: var(--sp-soft);
	color: var(--sp-ink);
}

.sp-franja--lila { background: var(--sp-lila); }
.sp-franja--durazno { background: var(--sp-peach); }
.sp-franja--menta { background: var(--sp-mint); }

.sp-franja > .elementor-widget-html,
.sp-franja > .e-con-inner > .elementor-widget-html {
	width: auto !important;
}

.sp-franja__texto {
	flex: 1 1 420px !important;
}

.sp-franja__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 999px;
	background: var(--sp-teal);
	color: var(--sp-on-teal);
	font-size: 30px;
}

.sp-franja--lila .sp-franja__icono { background: var(--sp-purple); color: #ffffff; }
.sp-franja--durazno .sp-franja__icono { background: var(--sp-accent); color: var(--sp-on-accent); }
.sp-franja--menta .sp-franja__icono { background: var(--sp-green-dk); color: #ffffff; }

body .sp-franja .elementor-heading-title {
	font-size: 1.5rem;
	color: var(--sp-heading);
}

.sp-franja p {
	margin: 0;
}

/* ---------- Panel lateral ---------- */

.sp-lateral--suave {
	border-color: transparent;
	background: var(--sp-soft);
}

.sp-lateral ul {
	margin: 0;
	padding-left: 1.2em;
}

.sp-pagina__lateral--bajo {
	padding-top: 120px !important;
}

.sp-pagina__lateral--pegajoso {
	align-self: stretch !important;
}

.sp-indice {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 20px;
	border-radius: var(--sp-radio);
	background: var(--sp-soft);
}

.sp-indice strong {
	padding: 0 12px 8px;
}

.sp-indice a {
	padding: 8px 12px;
	border-radius: 999px;
	color: var(--sp-ink);
	font-weight: 700;
	text-decoration: none;
}

.sp-indice a:hover {
	background: var(--sp-card);
	color: var(--sp-ink);
	text-decoration: underline;
}

.sp-elementor-ancla,
[id].elementor-widget-heading {
	scroll-margin-top: 24px;
}

.sp-sello {
	display: inline-block;
	align-self: flex-start;
	margin: 0 0 0.4em !important;
	padding: 10px 18px;
	border-radius: 18px;
	background: var(--sp-teal-dk);
	color: var(--sp-on-teal);
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.1;
}

mark.sp-pendiente {
	padding: 0 6px;
	border-radius: 6px;
	background: var(--sp-peach);
	color: var(--sp-ink);
	font-weight: 700;
}

/* ---------- Listas con tarjetas (privacidad, protocolo) ---------- */

.sp-datos,
.sp-derechos {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-datos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-derechos { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.sp-datos li,
.sp-derechos li {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
	border-radius: 22px;
	font-size: 1rem;
}

.sp-datos li {
	border: 2px solid var(--sp-line);
}

.sp-derechos li {
	background: var(--sp-soft);
}

.sp-datos strong,
.sp-derechos i {
	color: var(--sp-teal);
}

.sp-derechos i {
	font-size: 22px;
}

.sp-necesidades {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.sp-necesidades li {
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--sp-card);
	font-weight: 700;
}

body .sp-pasos--protocolo li:nth-child(3n+1)::before { background: var(--sp-teal); color: var(--sp-on-teal); }
body .sp-pasos--protocolo li:nth-child(3n+2)::before { background: var(--sp-purple); color: #ffffff; }
body .sp-pasos--protocolo li:nth-child(3n+3)::before { background: var(--sp-green-dk); color: #ffffff; }

/* ---------- Catálogo: temas como mosaicos con ícono ---------- */

body .sp-solapa--catalogo .sp-filtros-encabezado {
	gap: 28px;
	margin-top: 0;
}

body .sp-solapa--catalogo .sp-temas-chips {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
	gap: 10px;
}

body .sp-solapa--catalogo .sp-temas-chips a {
	flex-direction: column;
	justify-content: flex-start;
	gap: 8px;
	min-height: 0;
	padding: 14px 8px;
	border: 2px solid var(--sp-line);
	border-radius: 22px;
	background: var(--sp-card);
	color: var(--sp-ink);
	font-size: 0.9rem;
	line-height: 1.2;
	text-align: center;
}

body .sp-solapa--catalogo .sp-temas-chips a:hover {
	border-color: var(--sp-teal);
}

body .sp-solapa--catalogo .sp-temas-chips a::before {
	content: "\f84c";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 999px;
	background: var(--sp-soft);
	color: var(--sp-heading);
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 20px;
}

body .sp-solapa--catalogo .sp-temas-chips a:nth-child(4n+2)::before { background: var(--sp-mint); }
body .sp-solapa--catalogo .sp-temas-chips a:nth-child(4n+3)::before { background: var(--sp-lila); }
body .sp-solapa--catalogo .sp-temas-chips a:nth-child(4n)::before { background: var(--sp-peach); }

/* Íconos por tema (los mismos de sp_fa_categoria) */
.sp-temas-chips a[href*="categoria=salud-y-pensiones"]::before { content: "\f21e" !important; }
.sp-temas-chips a[href*="categoria=personas-cuidadoras"]::before { content: "\e4f7" !important; }
.sp-temas-chips a[href*="categoria=asistencia-social"]::before { content: "\f49e" !important; }
.sp-temas-chips a[href*="categoria=empleo"]::before { content: "\f0b1" !important; }
.sp-temas-chips a[href*="categoria=vivienda"]::before { content: "\e3af" !important; }
.sp-temas-chips a[href*="categoria=transito"]::before { content: "\f5b6" !important; }
.sp-temas-chips a[href*="categoria=orientacion"]::before { content: "\f24e" !important; }
.sp-temas-chips a[href*="categoria=comunidad"]::before { content: "\e533" !important; }

body .sp-solapa--catalogo .sp-temas-chips a[aria-current="page"] {
	border-color: var(--sp-teal);
	background: var(--sp-teal);
	color: var(--sp-on-teal);
}

body .sp-solapa--catalogo .sp-temas-chips a[aria-current="page"]::before {
	background: var(--sp-accent);
	color: var(--sp-on-accent);
}

/* Catálogo en dos columnas */
body .sp-catalogo-2col .sp-beneficios__lista--lista {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

body .sp-catalogo-2col .sp-beneficio--lista {
	border-radius: 28px;
}

body .sp-catalogo-2col .sp-beneficio--lista .sp-beneficio__banda,
body .sp-catalogo-2col .sp-beneficio--lista .sp-beneficio__banda.e-con {
	width: 120px;
}

body .sp-catalogo-2col .sp-beneficio--lista .sp-beneficio__banda svg {
	display: none;
}

body .sp-catalogo-2col .sp-beneficio--lista .sp-beneficio__icono {
	transform: translate(-50%, -50%);
	font-size: 40px;
}

body .sp-catalogo-2col .sp-beneficio--lista .sp-beneficio__cuerpo {
	gap: 10px;
	padding: 22px 24px;
}

/* El tema va como etiqueta sobre el título */
body .sp-catalogo-2col .sp-beneficio__cuerpo > .sp-beneficio__categoria {
	position: static;
	align-self: flex-start;
	padding: 2px 12px;
	background: var(--sp-soft);
	font-size: 14px;
	text-align: left;
}

body .sp-catalogo-2col .sp-beneficio--lista h3 {
	font-size: 21px;
	line-height: 1.2;
}

body .sp-catalogo-2col .sp-beneficio--lista .sp-tarjeta__desc {
	color: var(--sp-muted);
}

body .sp-catalogo-2col .sp-beneficio--lista .sp-tarjeta__dato {
	color: var(--sp-heading);
	font-weight: 700;
}

body .sp-catalogo-2col .sp-beneficio--lista .sp-beneficio__acciones {
	align-items: center;
	margin-top: auto;
}

.sp-enlace-flecha {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var(--sp-link);
	font-weight: 700;
}

.sp-enlace-flecha i {
	font-size: 0.85em;
}

/* Catálogo: «Lo más buscado» dentro de la tarjeta del buscador y «Elige un tema» encima de los temas */
body .sp-solapa--catalogo .sp-chips {
	margin-top: 14px;
}

body .sp-solapa--catalogo .sp-chips > span {
	color: var(--sp-muted);
}

body .sp-solapa--catalogo .sp-chips a {
	background: var(--sp-soft);
	color: var(--sp-ink);
}

body .sp-temas-titulo {
	margin: 56px 0 20px;
	color: var(--sp-heading);
	font-size: 34px;
	line-height: 1.1;
}

/* Lo más pedido: las tarjetas montan con sombra, numeradas 01, 02, 03 */
body .sp-solapa--tarjetas .sp-beneficio {
	box-shadow: 0 18px 40px rgba(1, 70, 92, 0.16);
}

body .sp-solapa--tarjetas .sp-beneficios__lista {
	counter-reset: pedido;
}

body .sp-solapa--tarjetas .sp-beneficios__lista > li {
	counter-increment: pedido;
}

body .sp-solapa--tarjetas .sp-beneficio__categoria {
	display: none;
}

body .sp-solapa--tarjetas .sp-beneficio__banda::before {
	content: counter(pedido, decimal-leading-zero);
	position: absolute;
	left: 26px;
	top: 20px;
	z-index: 1;
	font-size: 14px;
	font-weight: 700;
}

body .sp-solapa--tarjetas .sp-tarjeta__dato {
	padding: 10px 14px;
	border-radius: 16px;
	background: var(--sp-peach);
	color: var(--sp-ink);
	font-size: 16px;
	font-weight: 700;
}

body .sp-solapa--tarjetas .sp-beneficio__icono {
	top: auto;
	right: 26px;
	bottom: 6px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	border: 6px solid var(--sp-card);
	border-radius: 999px;
	background: var(--sp-peach);
	color: var(--sp-heading);
	font-size: 30px;
}

body .sp-solapa--tarjetas li:nth-child(3n+2) .sp-beneficio__icono { background: var(--sp-mint); }
body .sp-solapa--tarjetas li:nth-child(3n) .sp-beneficio__icono { background: var(--sp-lila); }

/* Dos columnas iguales (Lo más pedido: pasos + «¿Buscas otra cosa?») */
body .sp-columnas--mitad > .e-con-inner {
	gap: 56px;
	align-items: center;
}

body .sp-columnas--mitad .sp-pagina__principal,
body .sp-columnas--mitad .sp-pagina__lateral {
	flex: 1 1 420px !important;
}

body .sp-columnas--mitad .sp-pasos li {
	font-size: 21px;
}

body .sp-columnas--mitad .sp-pasos li::before {
	width: 56px;
	height: 56px;
	font-size: 24px;
}

body .sp-columnas--mitad .sp-pasos li + li::after {
	left: 26px;
}

body .sp-columnas--mitad .sp-lateral {
	gap: 18px;
	padding: 36px;
	border-radius: 36px;
}

/* ---------- Talleres: el próximo taller se destaca ---------- */

body .sp-talleres-destacado :is(.sp-talleres__lista > .sp-taller:first-child, .e-loop-item:first-child .sp-taller) {
	grid-template-columns: 180px minmax(0, 1fr) auto;
	gap: 36px;
	margin-bottom: 12px;
	padding: 36px 40px;
	border-radius: 36px;
	background: var(--sp-teal-dk);
	color: var(--sp-on-teal);
	box-shadow: 0 18px 40px rgba(1, 70, 92, 0.25);
}

body .sp-talleres-destacado :is(.sp-talleres__lista > .sp-taller:first-child, .e-loop-item:first-child .sp-taller) .sp-taller__fecha {
	height: 180px;
	border: 0;
	border-radius: var(--sp-radio);
	background: var(--sp-accent);
	color: var(--sp-on-accent);
}

body .sp-talleres-destacado :is(.sp-talleres__lista > .sp-taller:first-child, .e-loop-item:first-child .sp-taller) .sp-taller__fecha strong {
	font-size: 68px;
}

body .sp-talleres-destacado :is(.sp-talleres__lista > .sp-taller:first-child, .e-loop-item:first-child .sp-taller) .sp-taller__fecha span {
	font-size: 18px;
}

body .sp-talleres-destacado :is(.sp-talleres__lista > .sp-taller:first-child, .e-loop-item:first-child .sp-taller) :is(h2, h3, .elementor-heading-title) {
	font-size: 2rem;
}

body .sp-talleres-destacado :is(.sp-talleres__lista > .sp-taller:first-child, .e-loop-item:first-child .sp-taller) :is(h2 a, h3 a, .elementor-heading-title a, .sp-taller__datos) {
	color: var(--sp-on-teal);
}

body .sp-talleres-destacado :is(.sp-talleres__lista > .sp-taller:first-child, .e-loop-item:first-child .sp-taller) .sp-taller__etiqueta {
	background: var(--sp-sky);
	color: var(--sp-ink);
}

body .sp-talleres-destacado :is(.sp-talleres__lista > .sp-taller:first-child, .e-loop-item:first-child .sp-taller) .sp-btn--acento {
	min-height: 64px;
	padding: 0 32px;
	font-size: 1.15rem;
	box-shadow: 0 6px 0 rgba(11, 54, 68, 0.25);
}

/* Columnas 2/3 + 1/3 (Talleres, Catastro) */
body .sp-seccion--talleres .sp-pagina__principal {
	flex: 2 1 560px !important;
}

body .sp-seccion--talleres .sp-pagina__lateral {
	flex: 1 1 280px !important;
}

body .sp-seccion--talleres .sp-taller {
	grid-template-columns: 96px minmax(0, 1fr) auto;
	gap: 22px;
	padding: 20px 24px 20px 20px;
	border-radius: 28px;
}

body .sp-seccion--talleres .sp-taller__fecha {
	height: 96px;
	border-radius: 22px;
}

body .sp-seccion--talleres .sp-taller h3 {
	font-size: 20px;
}

.sp-aviso-punteado {
	padding: 20px 24px;
	border: 2px dashed var(--sp-line);
	border-radius: 28px;
	color: var(--sp-muted);
}

.sp-aviso-punteado > .elementor-widget-html {
	flex: none;
	width: auto;
	color: var(--sp-teal);
	font-size: 24px;
}

.sp-aviso-punteado p {
	margin: 0;
}

.sp-correo {
	font-weight: 700;
	overflow-wrap: anywhere;
}

/* ---------- Mis solicitudes ---------- */

body .sp-solicitudes-vistoso .sp-mis-solicitudes {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

body .sp-solicitudes-vistoso .sp-mis-solicitudes {
	gap: 28px;
}

body .sp-solicitudes-vistoso :is(.sp-saludo, .sp-form) {
	max-width: none;
	margin: 0;
	padding: 26px 30px;
	border: 2px solid var(--sp-line);
	border-radius: 28px;
	background: var(--sp-card);
	box-shadow: 0 18px 40px rgba(1, 70, 92, 0.16);
}

.sp-saludo {
	display: flex;
	align-items: center;
	gap: 22px;
}

.sp-saludo__icono,
.sp-solicitud__icono {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 999px;
	font-size: 26px;
}

.sp-saludo__icono {
	background: var(--sp-lila);
	color: var(--sp-heading);
}

.sp-saludo__texto {
	flex: 1;
}

.sp-saludo p {
	margin: 0;
	color: var(--sp-muted);
}

body .sp-saludo .sp-saludo__nombre {
	color: var(--sp-ink);
	font-size: 24px;
	font-weight: 700;
}

.sp-saludo > a {
	font-weight: 700;
}

body .sp-solicitudes-vistoso .sp-tarjeta {
	display: flex;
	flex-direction: column;
	gap: 26px;
	padding: 34px 36px;
	border-radius: 36px;
}

body .sp-solicitudes-vistoso .sp-tarjeta p {
	margin: 0;
}

.sp-solicitud__cabeza {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

.sp-solicitud__icono {
	background: var(--sp-teal);
	color: var(--sp-on-teal);
	font-size: 28px;
}

.sp-solicitud__titulo {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 4px;
}

body .sp-solicitud h2 {
	margin: 0;
	color: var(--sp-heading);
	font-size: 28px;
}

body .sp-solicitud .sp-meta {
	color: var(--sp-muted);
}

body .sp-solicitudes-vistoso .sp-estado {
	flex: none;
	padding: 6px 16px;
	border-radius: 999px;
	background: var(--sp-accent);
	color: var(--sp-on-accent);
	font-weight: 700;
}

body .sp-solicitudes-vistoso .sp-solicitud--aprobada .sp-estado { background: var(--sp-green-dk); color: #ffffff; }
body .sp-solicitudes-vistoso :is(.sp-solicitud--rechazada, .sp-solicitud--cerrada) .sp-estado { background: var(--sp-soft); color: var(--sp-ink); }

body .sp-solicitud .sp-solicitud__aviso {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 22px;
	border-radius: 22px;
	background: var(--sp-peach);
}

.sp-solicitud__aviso > i {
	flex: none;
	color: var(--sp-heading);
	font-size: 22px;
}

.sp-solicitud--aprobada .sp-solicitud__aviso { background: var(--sp-mint); }
.sp-solicitud:is(.sp-solicitud--rechazada, .sp-solicitud--cerrada, .sp-solicitud--recibida, .sp-solicitud--en_revision) .sp-solicitud__aviso { background: var(--sp-soft); }

body .sp-solicitudes-vistoso details summary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--sp-link);
	font-size: 17px;
	font-weight: 700;
	text-decoration: underline;
	list-style: none;
	cursor: pointer;
}

body .sp-solicitudes-vistoso details summary::-webkit-details-marker {
	display: none;
}

body .sp-solicitudes-vistoso details summary::after {
	content: "\f078";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 0.85em;
}

body .sp-solicitudes-vistoso details[open] summary::after {
	content: "\f077";
}

body .sp-solicitudes-vistoso details ol {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 14px 0 0;
	padding-left: 22px;
	color: var(--sp-muted);
}

.sp-etapa__fecha {
	color: var(--sp-muted);
	font-size: 15px;
	font-weight: 400;
}

.sp-etapa strong {
	font-size: 18px;
}

@media (max-width: 767px) {
	.sp-saludo,
	.sp-solicitud__cabeza {
		flex-wrap: wrap;
	}
}

/* Avance de la solicitud (sp_render_etapas) */
.sp-etapas {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 8px 0;
	padding: 0;
	list-style: none;
}

.sp-etapa {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	font-weight: 700;
}

.sp-etapa::before {
	content: "";
	position: absolute;
	top: 25px;
	left: 0;
	right: 0;
	height: 6px;
	background: var(--sp-line);
}

.sp-etapa:first-child::before { left: 50%; }
.sp-etapa:last-child::before { right: 50%; }
.sp-etapa--hecha::before { background: var(--sp-green-dk); }

.sp-etapa__icono {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	box-sizing: border-box;
	border: 4px solid var(--sp-bg);
	border-radius: 999px;
	background: var(--sp-soft);
	color: var(--sp-ink);
	font-size: 22px;
	box-shadow: 0 0 0 2px var(--sp-line);
}

.sp-etapa--hecha .sp-etapa__icono {
	background: var(--sp-green-dk);
	color: #ffffff;
	box-shadow: 0 0 0 2px var(--sp-green-dk);
}

.sp-etapa--actual .sp-etapa__icono {
	background: var(--sp-accent);
	color: var(--sp-on-accent);
	box-shadow: 0 0 0 2px var(--sp-accent);
}

/* ---------- Formularios (catastro, ingresar, crear cuenta) ---------- */

body .sp-form-vistoso .sp-form {
	max-width: none;
}

body .sp-form-tarjeta .sp-form {
	padding: 36px;
	border: 2px solid var(--sp-line);
	border-radius: 36px;
	background: var(--sp-card);
	box-shadow: 0 18px 40px rgba(1, 70, 92, 0.2);
}

body .sp-form-vistoso .sp-form fieldset {
	margin: 0 0 1.6em;
	padding: 0;
	border: 0;
}

body .sp-form-vistoso .sp-form legend {
	margin-bottom: 0.6em;
	padding: 0;
	color: var(--sp-heading);
	font-size: 1.25rem;
}

body .sp-form-vistoso .sp-form fieldset p {
	margin: 0;
}

/* Tipo de discapacidad: mosaicos */
body .sp-form-vistoso fieldset:has(input[name$="tipos[]"]) {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

body .sp-form-vistoso fieldset:has(input[name$="tipos[]"]) label,
body .sp-form-vistoso fieldset:has(input[name="dependencia"]) label {
	min-height: 64px;
	padding: 0 18px;
	border: 2px solid var(--sp-line);
	border-radius: 20px;
	background: var(--sp-card);
	font-weight: 700;
	cursor: pointer;
}

body .sp-form-vistoso fieldset:has(input[name="dependencia"]) p + p {
	margin-top: 10px;
}

body .sp-form-vistoso fieldset label:has(input:checked) {
	border-color: var(--sp-teal);
	background: var(--sp-soft);
}

/* Grado: píldoras */
body .sp-form-vistoso fieldset:has(input[name="grado"]) {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

body .sp-form-vistoso fieldset:has(input[name="grado"]) legend {
	width: 100%;
}

body .sp-form-vistoso fieldset:has(input[name="grado"]) label {
	min-height: 52px;
	padding: 0 20px;
	border: 2px solid var(--sp-teal);
	border-radius: 999px;
	font-weight: 700;
	cursor: pointer;
}

body .sp-form-vistoso fieldset:has(input[name="grado"]) label:has(input:checked) {
	background: var(--sp-teal);
	color: var(--sp-on-teal);
}

/* ¿Quién se registra?: dos tarjetas grandes */
body .sp-form-vistoso fieldset:has(input[name="tipo"]) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

body .sp-form-vistoso fieldset:has(input[name="tipo"]) label {
	min-height: 96px;
	padding: 18px 22px;
	border: 3px solid var(--sp-line);
	border-radius: var(--sp-radio);
	background: var(--sp-card);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

body .sp-form-vistoso fieldset:has(input[name="tipo"]) label:has(input:checked) {
	border-color: var(--sp-teal);
	background: var(--sp-teal);
	color: var(--sp-on-teal);
}

body .sp-form-vistoso fieldset label:has(input:checked) input {
	accent-color: var(--sp-accent);
}

/* ---------- Crear cuenta ---------- */

body .sp-form-vistoso .sp-form--registro {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

/* ¿Quién se registra?: dos tarjetas con ícono, texto y marca redonda */
body .sp-form-vistoso .sp-quien {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	border: 0;
}

body .sp-form-vistoso .sp-quien .sp-quien__opcion {
	position: relative;
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 0;
	padding: 28px;
	border: 3px solid var(--sp-line);
	border-radius: 28px;
	background: var(--sp-card);
	color: var(--sp-ink);
	font-weight: 400;
	box-shadow: 0 18px 40px rgba(1, 70, 92, 0.16);
	cursor: pointer;
}

/* El radio sigue ahí para el teclado y el lector de pantalla; se ve la marca redonda */
.sp-quien__opcion input {
	position: absolute;
	opacity: 0;
}

.sp-quien__opcion:has(input:focus-visible) {
	outline: 3px solid var(--sp-accent);
	outline-offset: 3px;
}

.sp-quien__icono {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 999px;
	background: var(--sp-soft);
	color: var(--sp-ink);
	font-size: 28px;
}

.sp-quien__texto {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 4px;
	font-size: 16px;
}

.sp-quien__texto strong {
	font-size: 22px;
	line-height: 1.15;
}

.sp-quien__marca {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 3px solid currentColor;
	border-radius: 999px;
}

body .sp-form-vistoso .sp-quien .sp-quien__opcion:has(input:checked) {
	border-color: var(--sp-teal);
	background: var(--sp-teal);
	color: var(--sp-on-teal);
}

.sp-quien__opcion:has(input:checked) .sp-quien__icono {
	background: var(--sp-accent);
}

.sp-quien__opcion:has(input:checked) .sp-quien__marca::after {
	content: "";
	width: 14px;
	height: 14px;
	border-radius: 999px;
	background: currentColor;
}

/* El título del tipo de discapacidad cambia según quién se registra */
.sp-form--registro:has(input[name="tipo"][value="sp_cuidador"]:checked) .sp-solo-persona,
.sp-form--registro:not(:has(input[name="tipo"][value="sp_cuidador"]:checked)) .sp-solo-cuidador {
	display: none;
}

.sp-registro__tarjeta {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 36px;
	border: 2px solid var(--sp-line);
	border-radius: 36px;
	background: var(--sp-card);
}

body .sp-registro__tarjeta h2 {
	margin: 0;
	color: var(--sp-heading);
	font-size: 28px;
}

body .sp-registro__tarjeta h3,
body .sp-form-vistoso fieldset.sp-registro__tipos:has(input) legend {
	margin: 0;
	color: var(--sp-heading);
	font-size: 21px;
}

body .sp-registro__tarjeta .sp-form-fila > p {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}

body .sp-registro__tarjeta label span,
body .sp-registro__tipos legend span span {
	color: var(--sp-muted);
	font-weight: 400;
}

/* Tipos: seis píldoras en una fila */
body .sp-form-vistoso fieldset.sp-registro__tipos:has(input) {
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 10px;
}

body .sp-form-vistoso fieldset.sp-registro__tipos:has(input) legend {
	margin-bottom: 12px;
}

body .sp-form-vistoso fieldset.sp-registro__tipos:has(input) label {
	justify-content: center;
	min-height: 56px;
	padding: 0 10px;
	border-radius: 999px;
	font-size: 16px;
}

.sp-registro__privacidad {
	margin: 0;
	color: var(--sp-muted);
}

.sp-registro__pie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	padding-top: 8px;
	border-top: 2px solid var(--sp-soft);
}

.sp-registro__pie p {
	margin: 0;
	color: var(--sp-muted);
}

body .sp-form-vistoso .sp-registro__pie button[type="submit"] {
	font-size: 20px;
}

@media (max-width: 1024px) {
	body .sp-form-vistoso fieldset.sp-registro__tipos:has(input) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	body .sp-form-vistoso .sp-quien { grid-template-columns: minmax(0, 1fr); }
	body .sp-form-vistoso fieldset.sp-registro__tipos:has(input) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sp-registro__tarjeta { padding: 24px 20px; }
}

/* Botón de envío destacado */
body .sp-form-vistoso .sp-form button[type="submit"],
body .sp-form-vistoso .sp-form input[type="submit"] {
	min-height: 62px;
	padding: 0 36px;
	border-color: transparent;
	background: var(--sp-accent);
	color: var(--sp-on-accent);
	font-size: 1.15rem;
}

body .sp-form-vistoso .sp-form .login-remember label {
	display: flex;
	align-items: center;
	gap: 0.6em;
	font-weight: 400;
}

/* ---------- Catastro: ya inscrito/a (sp_render_recursos) ---------- */

.sp-recursos {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

body .sp-recursos .sp-recursos__aviso {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
	margin: 0;
	padding: 22px 26px;
	border-radius: 28px;
	background: var(--sp-mint);
	font-size: 18px;
}

.sp-recursos__icono {
	color: var(--sp-green-dk);
	font-size: 26px;
}

.sp-recursos__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-left: auto;
	font-weight: 700;
}

.sp-recursos__bloque {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

body .sp-recursos h2 {
	margin: 0;
	color: var(--sp-heading);
	font-size: 30px;
	line-height: 1.15;
}

body .sp-recursos p {
	margin: 0;
}

.sp-recursos__beneficios {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-recursos__beneficios li {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 24px;
	border: 2px solid var(--sp-line);
	border-radius: 28px;
	background: var(--sp-card);
}

.sp-recursos__beneficio-icono {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 999px;
	background: var(--sp-soft);
	color: var(--sp-heading);
	font-size: 23px;
}

.sp-recursos__beneficios li:nth-child(4n+2) .sp-recursos__beneficio-icono { background: var(--sp-mint); }
.sp-recursos__beneficios li:nth-child(4n+3) .sp-recursos__beneficio-icono { background: var(--sp-lila); }
.sp-recursos__beneficios li:nth-child(4n) .sp-recursos__beneficio-icono { background: var(--sp-peach); }

body .sp-recursos__beneficios h3 {
	margin: 0 0 8px;
	font-size: 20px;
	line-height: 1.2;
}

body .sp-recursos__beneficios h3 a {
	color: var(--sp-ink);
	text-decoration: none;
}

body .sp-recursos__beneficios h3 a:hover {
	text-decoration: underline;
}

.sp-recursos__beneficios p {
	color: var(--sp-muted);
}

.sp-recursos__indicadores {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

body .sp-recursos__indicadores a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 20px;
	border-radius: 999px;
	background: var(--sp-soft);
	color: var(--sp-ink);
	font-weight: 700;
	text-decoration: none;
}

body .sp-recursos__indicadores a:hover {
	background: var(--sp-sky);
}

@media (max-width: 767px) {
	.sp-recursos__beneficios { grid-template-columns: minmax(0, 1fr); }
	.sp-recursos__acciones { margin-left: 0; }
}

/* Ingresar: título en la tarjeta, botón a todo el ancho y «Mostrar» dentro del campo */
body .sp-form-tarjeta .sp-acceso-form {
	padding: 40px;
}

body .sp-acceso-form h2 {
	margin: 0 0 20px;
	color: var(--sp-heading);
	font-size: 30px;
}

body .sp-acceso-form #loginform {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

body .sp-acceso-form #loginform p {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}

body .sp-acceso-form input[type="text"],
body .sp-acceso-form input[type="password"] {
	min-height: 58px;
	border-radius: 16px;
	font-size: 18px;
}

body .sp-acceso-form .login-submit input[type="submit"] {
	width: 100%;
	min-height: 62px;
	border-radius: 999px;
	font-size: 20px;
}

body .sp-acceso-form__olvido {
	margin: 20px 0 0;
	text-align: center;
	font-weight: 700;
}

.sp-clave {
	position: relative;
	display: block;
}

body .sp-clave input[type="password"],
body .sp-clave input[type="text"] {
	padding-right: 8em;
}

body .sp-form .sp-clave__mostrar {
	position: absolute;
	top: 50%;
	right: 8px;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	min-height: 44px;
	padding: 0 16px;
	border: 0;
	border-radius: 999px;
	background: var(--sp-soft);
	color: var(--sp-link);
	font-size: 15px;
	font-weight: 700;
	transform: translateY(-50%);
	cursor: pointer;
}

body .sp-form .sp-clave__mostrar:hover {
	background: var(--sp-sky);
}

/* Tarjetas laterales con ícono y la fila «¿Sin correo?» */
.sp-lateral__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: var(--sp-purple);
	color: #ffffff;
	font-size: 24px;
}

body .sp-lateral--fila {
	flex-direction: row;
	align-items: center;
	gap: 14px;
	padding: 20px 24px;
}

body .sp-lateral--fila > .elementor-widget-html {
	flex: none;
	width: auto;
	color: var(--sp-teal);
	font-size: 24px;
}

body .sp-lateral--fila p {
	margin: 0;
}

/* Ícono de la tarjeta «Tus datos están protegidos» (verde) */
body .sp-lateral--borde .sp-lateral__icono {
	width: 54px;
	height: 54px;
	background: var(--sp-mint);
	color: var(--sp-green-dk);
	font-size: 23px;
}

/* ---------- Catastro: formulario por pasos ---------- */

body .sp-form--pasos {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.sp-form-pasos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-form-pasos li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-radius: 999px;
	background: var(--sp-soft);
	color: var(--sp-ink);
	font-weight: 700;
}

.sp-form-pasos__icono {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: var(--sp-card);
}

.sp-form-pasos li[aria-current="step"] {
	background: var(--sp-teal);
	color: var(--sp-on-teal);
}

.sp-form-pasos li[aria-current="step"] .sp-form-pasos__icono {
	background: var(--sp-accent);
	color: var(--sp-on-accent);
}

.sp-form-pasos li.sp-hecho {
	background: var(--sp-mint);
}

.sp-form-pasos li.sp-hecho .sp-form-pasos__icono {
	background: var(--sp-green-dk);
	color: #ffffff;
}

.sp-paso {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sp-paso[hidden],
.sp-form-nav [hidden] {
	display: none !important;
}

body .sp-paso h2 {
	margin: 0;
	color: var(--sp-heading);
	font-size: 28px;
}

body .sp-paso h2:focus {
	outline: none;
}

body .sp-form--pasos .sp-paso > p,
body .sp-form--pasos .sp-form-fila > p {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}

.sp-form-fila {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

body .sp-form--pasos .sp-legend-nota {
	color: var(--sp-muted);
	font-size: 1rem;
	font-weight: 400;
}

body .sp-form--pasos fieldset:has(input[name="grado"]) legend {
	margin-top: 8px;
	font-size: 21px;
}

body .sp-form--pasos fieldset:has(input[name="grado"]) legend span {
	color: var(--sp-muted);
	font-size: 17px;
	font-weight: 400;
}

/* Apoyos y autorización como tarjetas marcables */
body .sp-form--pasos .sp-apoyos {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

body .sp-form--pasos .sp-apoyos label,
body .sp-form--pasos .sp-consentimiento label {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px;
	border: 2px solid var(--sp-line);
	border-radius: 22px;
	font-size: 18px;
	font-weight: 400;
}

body .sp-form--pasos .sp-consentimiento label {
	align-items: flex-start;
	border-color: transparent;
	background: var(--sp-soft);
	font-size: 17px;
}

body .sp-form--pasos :is(.sp-apoyos, .sp-consentimiento) input[type="checkbox"] {
	width: 26px;
	height: 26px;
}

.sp-form-nav {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	padding-top: 8px;
	border-top: 2px solid var(--sp-soft);
}

.sp-form-nav__paso {
	margin-left: auto;
	color: var(--sp-muted);
	font-size: 16px;
}

body .sp-form-nav .sp-form-nav__atras {
	gap: 10px;
	border: 2px solid var(--sp-ink);
	background: transparent;
	color: var(--sp-ink);
	font-size: 16px;
}

body .sp-form-nav .sp-form-nav__siguiente {
	gap: 10px;
	min-height: 58px;
	border-color: transparent;
	background: var(--sp-accent);
	color: var(--sp-on-accent);
	font-size: 18px;
}

@media (max-width: 767px) {
	.sp-form-pasos,
	.sp-form-fila {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Indicadores ---------- */

body .sp-columnas--arriba > .e-con-inner {
	align-items: stretch;
}

/* Personas por sector: nombre, cantidad y barra */
.sp-sectores {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
	padding: 28px;
	border: 2px solid var(--sp-line);
	border-radius: 28px;
	list-style: none;
}

.sp-sectores li {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sp-sectores__fila {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-weight: 700;
}

.sp-sectores__barra {
	display: block;
	height: 18px;
	border-radius: 999px;
	background: var(--sp-soft);
	overflow: hidden;
}

.sp-sectores__barra > span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--sp-teal);
}

.sp-sectores li:nth-child(3n+2) .sp-sectores__barra > span { background: var(--sp-purple); }
.sp-sectores li:nth-child(3n) .sp-sectores__barra > span { background: var(--sp-green-dk); }

body .sp-aviso-menta {
	border: 0;
	background: var(--sp-mint);
	color: var(--sp-ink);
}

body .sp-aviso-menta > .elementor-widget-html {
	color: var(--sp-green-dk);
	font-size: 26px;
}

html.sp-alto-contraste .sp-sectores__barra > span {
	background: #ffff00;
}

body .sp-aviso-durazno {
	border: 0;
	background: var(--sp-peach);
	color: var(--sp-ink);
}

body .sp-aviso-durazno > .elementor-widget-html {
	color: var(--sp-heading);
}

/* ---------- Páginas institucionales ---------- */

/* Accesibilidad: sello WCAG junto a su explicación */
.sp-nivel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.sp-nivel p {
	margin: 0;
	font-weight: 700;
}

body .sp-nivel .sp-sello {
	margin: 0;
	padding: 10px 18px;
	border-radius: 18px;
	background: var(--sp-heading);
	color: #ffffff;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.1;
}

body .sp-lateral--nivel {
	border-radius: 28px;
}

body .sp-lateral--nivel .elementor-heading-title {
	color: var(--sp-heading);
	font-size: 20px;
}

/* Privacidad: índice fijo a la izquierda */
body .sp-columnas--indice .sp-pagina__lateral {
	order: -1;
	flex: 0 0 260px !important;
}

/* Protocolo: pasos (3/5) y «Atención según tu necesidad» (2/5) */
body .sp-columnas--protocolo .sp-pagina__principal {
	flex: 3 1 480px !important;
}

body .sp-columnas--protocolo .sp-pagina__lateral {
	flex: 2 1 320px !important;
}

@media (max-width: 1024px) {
	body .sp-columnas--indice .sp-pagina__lateral {
		order: 0;
		flex: 1 1 100% !important;
	}
}

body .sp-indicadores-vistoso .sp-indicadores {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

body .sp-indicadores-vistoso .sp-kpis {
	grid-column: 1 / -1;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin: 0;
}

body .sp-indicadores-vistoso .sp-kpis li {
	padding: 28px;
	border-radius: var(--sp-radio);
	background: var(--sp-card);
	font-size: 1.15rem;
	font-weight: 700;
	box-shadow: 0 18px 40px rgba(1, 70, 92, 0.16);
}

body .sp-indicadores-vistoso .sp-kpis strong {
	font-size: 3.4rem;
	line-height: 1;
	margin-bottom: 6px;
}

body .sp-indicadores-vistoso .sp-kpis li:first-child {
	border-color: var(--sp-teal);
	background: var(--sp-teal);
	color: var(--sp-on-teal);
}

body .sp-indicadores-vistoso .sp-kpis li:first-child strong { color: var(--sp-on-teal); }
body .sp-indicadores-vistoso .sp-kpis li:nth-child(2) strong { color: var(--sp-green-dk); }
body .sp-indicadores-vistoso .sp-kpis li:nth-child(3) strong { color: var(--sp-purple); }

body .sp-indicadores-vistoso .sp-indicador {
	margin: 0;
	padding: 24px 28px;
	border: 2px solid var(--sp-line);
	border-radius: var(--sp-radio);
	background: var(--sp-card);
}

body .sp-indicadores-vistoso .sp-indicador h3 {
	margin: 0 0 0.6em;
	font-size: 1.3rem;
	color: var(--sp-heading);
}

body .sp-indicadores-vistoso .sp-barrita {
	height: 0.8rem;
}

body .sp-indicadores-vistoso .sp-meta {
	grid-column: 1 / -1;
}

/* ---------- Alto contraste ---------- */

html.sp-alto-contraste .sp-arco {
	border-color: #ffffff;
	color: #ffe14d;
}

html.sp-alto-contraste .sp-mini,
html.sp-alto-contraste .sp-form-tarjeta .sp-form,
html.sp-alto-contraste .sp-indicadores-vistoso .sp-kpis li,
html.sp-alto-contraste .sp-talleres-destacado .sp-taller {
	border-color: #ffffff;
	box-shadow: none;
}

html.sp-alto-contraste .sp-franja,
html.sp-alto-contraste .sp-indice {
	border: 2px solid #ffffff;
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
	.sp-grilla--5 { --sp-cols: 3; }
	.sp-derechos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	body .sp-catalogo-2col .sp-beneficios__lista--lista { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1180px) {
	.sp-arco { display: none; }
}

@media (max-width: 900px) {
	body .sp-hero--interna,
	body .sp-hero--interna > .e-con-inner { min-height: 0; }
	body .sp-solapa { margin-top: -56px; }
	.sp-grilla--3,
	.sp-grilla--5 { --sp-cols: 2; }
	.sp-pagina__lateral--bajo { padding-top: 0 !important; }
	.sp-datos { grid-template-columns: minmax(0, 1fr); }
	.sp-derechos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body .sp-indicadores-vistoso .sp-indicadores,
	body .sp-indicadores-vistoso .sp-kpis { grid-template-columns: minmax(0, 1fr); }
	body .sp-form-vistoso fieldset:has(input[name$="tipos[]"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body .sp-talleres-destacado :is(.sp-talleres__lista > .sp-taller:first-child, .e-loop-item:first-child .sp-taller) {
		grid-template-columns: 110px minmax(0, 1fr);
		gap: 20px;
		padding: 24px;
	}
	body .sp-talleres-destacado :is(.sp-talleres__lista > .sp-taller:first-child, .e-loop-item:first-child .sp-taller) .sp-taller__fecha { height: 110px; }
	body .sp-talleres-destacado :is(.sp-talleres__lista > .sp-taller:first-child, .e-loop-item:first-child .sp-taller) .sp-taller__fecha strong { font-size: 44px; }
	body .sp-talleres-destacado :is(.sp-talleres__lista > .sp-taller:first-child, .e-loop-item:first-child .sp-taller) .sp-btn { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
	.sp-grilla--2,
	.sp-grilla--3,
	.sp-grilla--5 { --sp-cols: 1; }
	.sp-derechos,
	.sp-etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
	.sp-etapa::before { display: none; }
	body .sp-form-vistoso fieldset:has(input[name="tipo"]),
	body .sp-form-vistoso fieldset:has(input[name$="tipos[]"]) { grid-template-columns: minmax(0, 1fr); }
	body .sp-form-tarjeta .sp-form { padding: 24px 20px; }
	body .sp-solicitudes-vistoso .sp-tarjeta { padding: 24px 20px; }
}