/*
Theme Name: SienteVital
Theme URI: https://sientevital.cl
Description: Tema hijo de Twenty Twenty-Five para el sitio de SienteVital, centro de psicología y bienestar en Providencia, Santiago. La paleta, tipografía, espaciado y radios de marca viven en theme.json; este archivo solo declara la relación con el tema padre y overrides puntuales de estilos que no son expresables en theme.json.
Author: SienteVital
Template: twentytwentyfive
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.2
Version: 2.3.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sientevital
*/

/* Reserva siempre el espacio de la scrollbar vertical, la tenga o no.
   Sin esto, en navegadores con scrollbar clásica (Windows/Chrome) los
   cálculos de 100vw/50vw quedan más anchos que el viewport real, lo
   que produce overflow horizontal — y ese overflow, en cascada, puede
   forzar una scrollbar horizontal que reduce el alto disponible y
   descuadra cualquier 100vh. Ver sección "SV Full-bleed" más abajo. */
html {
	scrollbar-gutter: stable;
}

/* Red de seguridad: cualquier residuo de overflow horizontal (presente
   o futuro) nunca se vuelve una scrollbar horizontal visible. */
body {
	overflow-x: clip;
}

/* ═══════════════════════════════════════════════════════════
   Sistema proporcional (Etapa 4, ESPEC §1 y §2).

   Tokens: todos en theme.json. Cada medida sale de la mesa de 1920
   con clamp(<mínimo>, V / 19.2 * 1vw, V * 1.3333px): a 1920 vale V,
   de 1280 a 2560 escala con el ancho, sobre 2560 queda fija, y bajo
   1280 baja hasta su mínimo. Un solo vocabulario de espaciado
   (--wp--preset--spacing--sm … xxxxxl, más «margen»); la tabla
   completa, con mínimos y máximos, está al final de APRENDIZAJES.md.
   Ningún componente escribe un color ni un espaciado suelto.
   ═══════════════════════════════════════════════════════════ */

/* Contenedor raíz (ESPEC §1.4): sobre 2560 px el sitio deja de
   crecer y queda centrado sobre el fondo crema del body. */
.wp-site-blocks {
	max-width: var(--wp--custom--ancho-raiz);
	margin-inline: auto;
}

/* Compatibilidad con el tema padre, NO un segundo vocabulario.
   Twenty Twenty-Five escribe su espaciado numérico (20…80) dentro de
   plantillas y patrones que este sitio todavía usa tal cual: el
   artículo (single.html, con post-navigation, comments y more-posts),
   el 404 (hidden-404) y la lista de Recursos (template-query-loop).
   Sin estos nombres esos márgenes valdrían 0. Nada del tema hijo los
   usa (lo vigila 87-theme-json.sh) y se borran cuando esas plantillas
   del padre dejen de usarse. */
:root {
	--wp--preset--spacing--20: var(--wp--preset--spacing--md);
	--wp--preset--spacing--30: var(--wp--preset--spacing--xl);
	--wp--preset--spacing--40: var(--wp--preset--spacing--xxl);
	--wp--preset--spacing--50: var(--wp--preset--spacing--xxxl);
	--wp--preset--spacing--60: var(--wp--preset--spacing--xxxxl);
	--wp--preset--spacing--70: var(--wp--preset--spacing--xxxxxl);
	--wp--preset--spacing--80: var(--wp--preset--spacing--xxxxxl);
}

/* Radios proporcionales (ESPEC §1, «Radios, también proporcionales»).

   El radio y el margen interior de un componente se derivan de SU
   ancho, que no se puede medir con cqw contra sí mismo. Por eso el
   ancho es una variable, --sv-ancho, que fija quien acomoda el
   componente, y de ella salen el ancho real y las tres fracciones:
     --sv-radio            11 %  del ancho (la tarjeta)
     --sv-radio-interior   8,8 % (la imagen de adentro)
     --sv-margen-interior  2,2 % (de la imagen al borde)

   Las tres están registradas como <length>: se calculan UNA vez, en
   el propio componente (con cqw resuelto contra su contenedor, no
   contra él), y los hijos heredan píxeles. Sin registrar, un hijo
   que usara var(--sv-radio-interior) resolvería el cqw contra el
   componente —que también es contenedor— y daría otro número.

   Cómo se usa (.sv-prop-fila, .sv-prop-pista, --sv-ancho suelto): en
   APRENDIZAJES.md, «El sistema proporcional». Sin --sv-ancho el
   componente queda sin radio, y eso se nota a simple vista. */
@property --sv-radio {
	syntax: '<length>';
	inherits: true;
	initial-value: 0px;
}

@property --sv-radio-interior {
	syntax: '<length>';
	inherits: true;
	initial-value: 0px;
}

@property --sv-margen-interior {
	syntax: '<length>';
	inherits: true;
	initial-value: 0px;
}

.sv-prop {
	--sv-radio: calc(var(--sv-ancho) * 0.11);
	--sv-radio-interior: calc(var(--sv-ancho) * 0.088);
	--sv-margen-interior: calc(var(--sv-ancho) * 0.022);
	inline-size: var(--sv-ancho, auto);
	border-radius: var(--sv-radio);
	container-type: inline-size;
}

.sv-prop-interior {
	border-radius: var(--sv-radio-interior);
}

.sv-prop-fila {
	--sv-cols: 3;
	--sv-sep: var(--wp--preset--spacing--lg);
	container-type: inline-size;
}

.sv-prop-fila > .sv-prop,
.sv-prop-fila > .sv-prop-pista > .sv-prop {
	--sv-ancho: calc((100cqw - (var(--sv-cols) - 1) * var(--sv-sep)) / var(--sv-cols));
}

/* Evita que el margin-top del primer bloque de la página (el hero)
   colapse con el contenedor y desaparezca — técnica estándar
   "flow-root" para crear un nuevo contexto de formato de bloque. */
.wp-block-post-content {
	display: flow-root;
	/* El header es fixed y no ocupa lugar en el flujo, así que el «block
	   gap» que WordPress pone entre él y el post-content queda como un
	   hueco vacío. El aire real hacia el header lo da el hero. */
	margin-top: 0 !important;
}

/* Un wp:group que acá pasa a grid o a flex conserva el «block gap» que
   WordPress inyecta entre hermanos, y sus hijos 2..n quedan corridos
   hacia abajo. Todo contenedor de este archivo que haga eso tiene que
   sumarse a esta lista (el porqué, en APRENDIZAJES.md, «El block gap de
   WordPress»). */
.sv-equipo-track > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ═══════════════════════════════════════════════════════════
   Tipografía global — solo lo que theme.json no expresa bien: el
   tracking por tamaño. El peso de los títulos (Montserrat 500, y por
   qué no 700) vive en theme.json y está documentado en APRENDIZAJES.md.
   ═══════════════════════════════════════════════════════════ */

/* Los títulos grandes necesitan tracking apretado y los chicos
   suelto — un solo letter-spacing global se ve mal en ambos
   extremos. El hero (100px) usa 0.1em, definido en su propia
   regla más abajo. */
h1, .has-xx-large-font-size {
	letter-spacing: -0.015em;
}

h2, .has-x-large-font-size {
	letter-spacing: -0.005em;
}

h4, h5, h6, .has-small-font-size, .has-x-small-font-size {
	letter-spacing: 0.01em;
}

/* Estilo de botón «Secundario» del editor: lo registra
   sientevital_block_styles() en functions.php, así que ninguna página lo
   usa hoy pero el editor lo ofrece. Por eso la regla se queda aunque la
   cobertura la dé por muerta. */
.wp-block-button.is-style-secondary .wp-block-button__link {
	background-color: var(--wp--preset--color--azul-primario);
	color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-secondary .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--azul-profundo);
}

/* El ancho de contenido de theme.json es «min(80%, 1400px)»: ese 80 % en
   un teléfono de 375 px dejaría ~61 px de margen vacío por lado, mucho más
   que el resto del sitio. Las secciones ya traen su margen lateral, así
   que acá el ancho pasa al 100 % de lo que la sección dejó libre. Al ser
   custom properties, lo hereda solo cualquier bloque constrained/wide. */
@media (max-width: 768px) {
	:root {
		--wp--style--global--content-size: 100%;
		--wp--style--global--wide-size: 100%;
	}
}

/* Botón flotante de WhatsApp — solo móvil, esquina inferior derecha (ver SV_Bloques_Home.md). */
.sv-whatsapp-float {
	display: none;
}

/* Mismo breakpoint que el resto de los overrides mobile (768px) — antes
   era 782px, un desfase de 14px donde WhatsApp ya aparecía pero el hero
   todavía no pasaba a layout mobile, y podían volver a superponerse. */
@media (max-width: 768px) {
	.sv-whatsapp-float {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		right: 16px;
		bottom: 16px;
		width: 56px;
		height: 56px;
		border-radius: var(--wp--preset--border-radius--pill);
		/* Verde de marca de WhatsApp — no es un color del sistema SV,
		   se deja como hex literal a propósito (ver Hito 1). */
		background-color: #25D366;
		box-shadow: 0 6px 18px rgba(23, 22, 19, 0.18);
		z-index: 200;
	}

	.sv-whatsapp-float svg {
		width: 28px;
		height: 28px;
		fill: var(--wp--preset--color--base);
	}
}

/* ═══════════════════════════════════════════════════════════
   Tarjeta de profesional y carrusel (Etapa 4, ESPEC C9, C10 y §3.1).

   Una sola tarjeta para todo el sitio: sv_team_card() en
   functions.php. La usan el carrusel (sv_carrusel_equipo(), en el
   home y en la página de cada profesional) y la grilla de /equipo/
   (patterns/equipo.php). Diseño: sv-card@150x.png (363 × 569 a
   tamaño real), proporción 0,637.

   Todo lo de adentro escala con la tarjeta: la tarjeta es .sv-prop
   (radio 11 % de su ancho, foto con 8,8 % y a 2,2 % del borde; ver
   «Sistema proporcional» al comienzo de este archivo) y el texto usa
   cqw contra ella. El ancho lo pone la fila (.sv-prop-fila): la
   pista menos las separaciones, entre las columnas de §3.1. Nunca
   un ancho de tarjeta suelto.

   Columnas (§3.1, DECIDIDO por Ki): el carrusel muestra --sv-cols;
   la grilla, --sv-cols-grilla, con el ancho de tarjeta del carrusel
   (desde 1280, 4 centradas con el ancho de 5).
   ═══════════════════════════════════════════════════════════ */

/* ── Estados (ESPEC §7, ratificados por Ki en el punto de control) ──
   - Profesional sin foto: no se muestra (lo filtra
     sv_profesional_tarjetas(), inc/profesional.php). Si no queda nadie,
     rige «sin respuesta del catálogo» (sv_equipo_sin_catalogo()).
   - Nombre largo: hasta --sv-tarjeta-lineas-nombre líneas.
   - Cargo: nunca con puntos suspensivos ni recortado. Una línea sobre
     600 px y hasta dos bajo 600 (PROPUESTO por el orquestador). El límite
     de 7 palabras es del panel de SV-in; el sitio no recorta: si un cargo
     no cabe en su línea, baja a la siguiente y la foto cede el alto
     (PROPUESTO). */
:root {
	--sv-tarjeta-fondo: var(--wp--preset--color--gris-alterno);
	--sv-tarjeta-lineas-nombre: 2;
}

/* Columnas por ancho (§3.1). Los cortes deciden la disposición,
   nunca un tamaño (ESPEC §1.2). */
.sv-equipo-carousel,
.sv-team-grid {
	--sv-cols: 2;
	--sv-cols-grilla: 2;
	--sv-sep: var(--wp--preset--spacing--lg);
}

@media (min-width: 600px) {
	.sv-equipo-carousel,
	.sv-team-grid {
		--sv-cols: 3;
		--sv-cols-grilla: 3;
	}
}

@media (min-width: 900px) {
	.sv-equipo-carousel,
	.sv-team-grid {
		--sv-cols: 4;
		--sv-cols-grilla: 4;
	}
}

@media (min-width: 1280px) {
	.sv-equipo-carousel,
	.sv-team-grid {
		--sv-cols: 5;
		--sv-cols-grilla: 4;
	}
}

/* ── La tarjeta ──
   --sv-tarjeta-ancho es el ancho de la tarjeta en px (registrado como
   <length>: sin registrar, el cqw de --sv-ancho se resolvería otra vez
   contra la propia tarjeta en cada hijo). El círculo del calendario y
   «Ver perfil» salen de él, con las fracciones medidas en
   sv-card@150x.png (544 px de ancho): separación 9 (1,65 %), a 39 del
   borde derecho (7,2 %) y 38 del inferior (7 %).
   Tamaños (ajuste de C9 del 2026-09-22, DECIDIDO por Ki): «Ver perfil»
   vuelve al tamaño de antes del punto de control (alto 10 cqw con piso
   de 24 px, letra 5 cqw con piso de 9, 6 cqw a cada lado) y crece solo
   el círculo, que queda un poco más grande que la píldora: 1,2 veces
   su alto (el 1,2 es PROPUESTO). */
@property --sv-tarjeta-ancho {
	syntax: '<length>';
	inherits: true;
	initial-value: 0px;
}

.sv-team-card {
	--sv-tarjeta-ancho: var(--sv-ancho);
	--sv-tarjeta-pildora: max(24px, 10cqw);
	--sv-tarjeta-circulo: calc(var(--sv-tarjeta-pildora) * 1.2);
	position: relative;
	box-sizing: border-box;
	aspect-ratio: 0.637;
	display: flex;
	flex-direction: column;
	padding: var(--sv-margen-interior) var(--sv-margen-interior) 0;
	background-color: var(--sv-tarjeta-fondo);
	font-family: 'Montserrat', sans-serif;
	text-align: left;
}

/* Toda la tarjeta es el enlace al perfil: un <a> vacío que la cubre
   (va primero en el DOM, debajo de todo). Lo visible pinta encima con
   pointer-events:none, así el clic lo atraviesa y llega al enlace; el
   círculo de agenda es otro enlace, encima de todo. */
.sv-team-card-overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
}

.sv-team-card-overlay:focus-visible {
	outline: 2px solid var(--wp--preset--color--azul-medio);
	outline-offset: -3px;
}

.sv-team-card-photo,
.sv-team-card-nombre,
.sv-team-card-especialidad,
.sv-team-card-acciones {
	position: relative;
	z-index: 1;
	pointer-events: none;
}

.sv-team-card-photo {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}

.sv-team-card-photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
	display: block;
}

.sv-team-card-nombre {
	margin: 6cqw 5cqw 0;
	font-size: max(12px, 6.6cqw);
	font-weight: 400;
	line-height: 1.2;
	color: var(--wp--preset--color--tinta);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--sv-tarjeta-lineas-nombre);
	line-clamp: var(--sv-tarjeta-lineas-nombre);
	overflow: hidden;
	overflow-wrap: anywhere;
}

.sv-team-card-especialidad {
	margin: 1.5cqw 5cqw 0;
	font-size: max(10px, 4.8cqw);
	line-height: 1.35;
	color: var(--wp--preset--color--texto-secundario);
	text-wrap: balance;
}

/* «Ver perfil» (lo que se ve del enlace de toda la tarjeta) y el
   círculo azul con el calendario, a la derecha y abajo. */
.sv-team-card-acciones {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: calc(var(--sv-tarjeta-ancho) * 0.0165);
	margin: auto 0 0;
	padding: 5cqw calc(var(--sv-tarjeta-ancho) * 0.072) calc(var(--sv-tarjeta-ancho) * 0.07);
}

.sv-team-card-perfil,
.sv-team-card-agenda {
	box-sizing: border-box;
	border-radius: var(--wp--preset--border-radius--pill);
	background-color: var(--wp--preset--color--azul-primario);
	color: var(--wp--preset--color--base);
	transition: background-color 160ms ease;
}

.sv-team-card-perfil {
	display: inline-flex;
	align-items: center;
	height: var(--sv-tarjeta-pildora);
	padding: 0 max(8px, 6cqw);
	font-size: max(9px, 5cqw);
	line-height: 1;
	white-space: nowrap;
}

.sv-team-card-agenda {
	pointer-events: auto;
	z-index: 2;
	flex: 0 0 auto;
	width: var(--sv-tarjeta-circulo);
	height: var(--sv-tarjeta-circulo);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* El disco y el ícono son un solo SVG que llena el círculo
	   (sv_team_card(), functions.php): el enlace no pinta fondo. Con el
	   disco como fondo del enlace, Chromium redondeaba a píxeles el SVG
	   y no el disco, y el ícono se corría hasta 0,8 px (lo mide
	   _herramientas/icono-centrado.mjs). */
	background-color: transparent;
}

.sv-team-card-agenda svg {
	width: 100%;
	height: 100%;
	display: block;
	/* El disco toca el borde del viewBox: sin esto, el suavizado de su
	   borde queda recortado y el círculo se ve plano de un lado. */
	overflow: visible;
}

.sv-team-card-disco {
	fill: var(--wp--preset--color--azul-primario);
	transition: fill 160ms ease;
}

.sv-team-card-overlay:hover ~ .sv-team-card-acciones .sv-team-card-perfil {
	background-color: var(--wp--preset--color--azul-profundo);
}

.sv-team-card-agenda:hover .sv-team-card-disco,
.sv-team-card-agenda:focus-visible .sv-team-card-disco {
	fill: var(--wp--preset--color--azul-profundo);
}

.sv-team-card-agenda:focus-visible {
	outline: 2px solid var(--wp--preset--color--azul-medio);
	outline-offset: 2px;
}

/* ── Carrusel (C10) ──
   La pista es el ancho del contenido de la sección: la página menos
   los dos márgenes laterales.

   Flechas en TODOS los anchos (revisión de Ki del 2026-09-22; antes
   se escondían bajo 900 px). Dónde van lo decide el corte, no el
   tamaño (ESPEC §1.2): desde 900 px caben en el margen y van a los
   lados de la pista; bajo 900 el margen mide 18 a 51 px —una flecha
   ahí sería un blanco de 15 px, o se saldría de la página— así que
   van abajo, centradas, en su propia fila. No tapan ninguna tarjeta
   en ningún ancho, y deslizar con el dedo sigue igual.

   El blanco nunca baja de 36 px (el mínimo de WCAG 2.2 es 24). El
   loop infinito lo cierra assets/js/sv-carrusel.js.

   Cuando el equipo entero cabe en la pista —una sola persona en
   varias landings de servicio— no hay nada que recorrer:
   .sv-carrusel-cabe (lo pone el guion, midiendo) centra la fila y
   retira las flechas, con su fila de abajo incluida. */
.sv-carrusel {
	--sv-flecha: max(36px, calc(var(--wp--preset--spacing--margen) * 0.8));
	position: relative;
	width: 100%;
	max-width: none !important;
	margin-inline: 0 !important;
}

.sv-equipo-carousel {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.sv-equipo-carousel::-webkit-scrollbar {
	display: none;
}

.sv-equipo-carousel:focus-visible {
	outline: 2px solid var(--wp--preset--color--azul-medio);
	outline-offset: 4px;
}

.sv-equipo-track {
	display: flex;
	gap: var(--sv-sep);
	width: max-content;
}

/* La fila puede ser un <ul> cuando lo que lleva es una lista (las reseñas del
   home): sv_carrusel() acepta las dos etiquetas, y acá se le sacan las viñetas
   y el sangrado que trae el navegador. */
ul.sv-equipo-track {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Cualquier tarjeta, no solo la de profesional: el carrusel es el del sitio y
   no le importa qué lleva dentro (qué es una tarjeta se lo dice el marcado, en
   data-sv-carrusel-item). */
.sv-equipo-track > * {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

/* Todo el equipo a la vista: la fila se centra en la pista y las dos
   flechas se van (no hay nada que recorrer). */
.sv-carrusel-cabe .sv-equipo-track {
	margin-inline: auto;
}

.sv-carrusel-cabe .sv-equipo-btn {
	display: none;
}

.sv-equipo-btn {
	position: absolute;
	top: 50%;
	z-index: 3;
	width: var(--sv-flecha);
	aspect-ratio: 1;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: var(--wp--preset--border-radius--pill);
	background: transparent;
	color: var(--wp--preset--color--azul-primario);
	cursor: pointer;
}

.sv-equipo-btn svg {
	width: 60%;
	height: 60%;
	display: block;
}

.sv-carrusel-anterior {
	right: calc(100% + var(--wp--preset--spacing--margen) * 0.1);
}

.sv-carrusel-siguiente {
	left: calc(100% + var(--wp--preset--spacing--margen) * 0.1);
}

.sv-equipo-btn:hover {
	color: var(--wp--preset--color--azul-profundo);
}

.sv-equipo-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--azul-medio);
	outline-offset: 2px;
}

/* Bajo 900 px las dos flechas bajan a su propia fila, centradas: en el
   margen no caben sin tapar una tarjeta o sin salirse de la página. */
@media (max-width: 899px) {
	.sv-carrusel {
		padding-bottom: calc(var(--sv-flecha) + var(--wp--preset--spacing--xl));
	}

	/* Sin flechas no se reserva su fila. */
	.sv-carrusel-cabe {
		padding-bottom: 0;
	}

	.sv-equipo-btn {
		top: auto;
		bottom: 0;
		transform: none;
	}

	.sv-carrusel-anterior {
		right: auto;
		left: calc(50% - var(--sv-flecha) - var(--wp--preset--spacing--xl) / 2);
	}

	.sv-carrusel-siguiente {
		left: calc(50% + var(--wp--preset--spacing--xl) / 2);
	}
}

/* Título de una sección con carrusel (home: «Quiénes te acompañan»;
   profesional: «Conoce al equipo»): el título de sección de §2. */
.sv-carrusel-titulo {
	margin: 0 0 var(--wp--preset--spacing--xxxl);
	font-family: 'Montserrat', sans-serif;
	font-size: var(--wp--preset--font-size--titulo-seccion);
	font-weight: 400;
	line-height: 1.15;
	text-transform: uppercase;
	text-align: center;
	color: var(--wp--preset--color--tinta);
}

/* ── Grilla de /equipo/ ──
   Las columnas de §3.1, centradas, cada tarjeta con el ancho del
   carrusel (--sv-cols); la grilla muestra --sv-cols-grilla. */
.sv-team-grid {
	display: grid;
	grid-template-columns: repeat(var(--sv-cols-grilla), auto);
	justify-content: center;
	gap: var(--sv-sep);
	width: 100%;
	max-width: none !important;
	margin-inline: 0 !important;
}

/* Sin catálogo jamás (§7): una línea y «Agendar» en lugar de la grilla. */
.sv-equipo-sin-catalogo {
	text-align: center;
	font-size: var(--wp--preset--font-size--bajada);
	color: var(--wp--preset--color--tinta);
}

.sv-equipo-sin-catalogo p {
	margin: 0 0 var(--wp--preset--spacing--xl);
}

.sv-equipo-sin-catalogo .wp-block-buttons {
	justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
	.sv-equipo-carousel {
		scroll-behavior: auto;
	}

	.sv-team-card-perfil,
	.sv-team-card-disco {
		transition: none;
	}
}

/* ═══════════════════════════════════════════════════════════
   Página de profesional — /equipo/<slug>/ (Etapa 4, ESPEC §5.2:
   C18 → C13 → C10). Marcado: sv_profesional_html(), inc/profesional.php.
   Diseño: sv-pagina-profesionales.pdf (mesa de 1920) y el wireframe
   _profesional.webp (tableta y móvil).

   Medidas de la mesa con la fórmula de ESPEC §1 (V / 19,2 vw, mínimo
   legible, máximo a 2560), declaradas una vez acá:
   - foto 551 × 720 (proporción 0,765), a la izquierda en el margen;
   - la columna de datos empieza en 983: 322 de separación;
   - 150 desde el borde superior de la banda hasta la foto;
   - nombre 55, cargo 24 (bajada), bajada y biografía 21, chips 17.
   La banda (C18) llega a un tercio de la foto: vive dentro de la caja
   de la foto y termina en su 66,667 % contado desde abajo; hacia los
   lados llega a hero-edge-gap del borde de la página (100cqw es el
   contenido de la sección: la página menos dos márgenes).
   Tableta (701–1100): foto y datos mitad y mitad; lo demás a todo el
   ancho debajo. Móvil (≤ 700): la banda es .sv-prof-banda-movil, una
   celda de la grilla que envuelve foto y datos como una tarjeta.
   La composición del fondo es la del hero interior (PROPUESTO: la
   misma quieta, hasta que Ki defina las suyas con el editor).
   ═══════════════════════════════════════════════════════════ */
.sv-prof-cabecera {
	--sv-prof-arriba: clamp(96px, 7.8125vw, 200px);
	--sv-prof-foto: clamp(240px, 28.6979vw, 734.67px);
	--sv-prof-sep: clamp(40px, 16.7708vw, 429.33px);
	--sv-prof-nombre: clamp(30px, 2.8646vw, 73.33px);
	--sv-prof-texto: clamp(16px, 1.0938vw, 28px);
	--sv-prof-borde: var(--wp--custom--hero-edge-gap);
	container-type: inline-size;
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	padding: var(--sv-prof-arriba) var(--wp--preset--spacing--margen) var(--wp--preset--spacing--xxxxxl);
	font-family: var(--wp--preset--font-family--montserrat);
	color: var(--wp--preset--color--azul-profundo);
}

.sv-prof-rejilla {
	--sv-prof-foto-ancho: var(--sv-prof-foto);
	display: grid;
	grid-template-columns: var(--sv-prof-foto) minmax(0, 1fr);
	/* La primera fila mide exactamente el tercio de la foto: los datos
	   van abajo en ella y, si son más altos, crecen hacia arriba, sobre
	   la banda (--sv-prof-arriba deja el lugar), nunca más abajo que ella. */
	grid-template-rows: calc(var(--sv-prof-foto-ancho) / 0.765 / 3) auto;
	grid-template-areas:
		"foto datos"
		"foto cuerpo";
	column-gap: var(--sv-prof-sep);
}

.sv-prof-foto-caja {
	grid-area: foto;
	position: relative;
	align-self: start;
}

.sv-prof-hero-photo {
	display: block;
	width: 100%;
	aspect-ratio: 0.765;
	height: auto;
	object-fit: cover;
	object-position: center 20%;
	/* Radio proporcional a la foto (ESPEC §1.3): 40 de 551 en la mesa,
	   7,26 % del ancho; en vertical, el mismo largo sobre su alto
	   (7,26 % × 0,765 = 5,554 %). */
	border-radius: 7.26% / 5.554%;
}

.sv-prof-banda,
.sv-prof-banda-movil {
	z-index: -1;
	border-radius: var(--wp--preset--border-radius--banda);
	background: var(--wp--preset--color--azul-profundo) var(--sv-prof-banda-fondo) center / cover no-repeat;
}

.sv-prof-banda {
	position: absolute;
	top: calc(var(--sv-prof-borde) - var(--sv-prof-arriba));
	bottom: 66.6667%;
	left: calc(var(--sv-prof-borde) - var(--wp--preset--spacing--margen));
	width: calc(100cqw + 2 * var(--wp--preset--spacing--margen) - 2 * var(--sv-prof-borde));
}

.sv-prof-banda-movil {
	display: none;
	grid-area: 1 / 1 / 3 / -1;
	margin: calc(var(--sv-prof-borde) - var(--sv-prof-arriba)) calc(var(--sv-prof-borde) - var(--wp--preset--spacing--margen)) calc(-1 * var(--wp--preset--spacing--xxl));
}

/* Cargo, nombre y chips: abajo de su celda, dentro de la banda. */
.sv-prof-datos {
	grid-area: datos;
	align-self: unsafe end;
	padding-bottom: var(--wp--preset--spacing--xl);
}

.sv-prof-eyebrow {
	margin: 0 0 0.35em;
	font-size: var(--wp--preset--font-size--bajada);
	font-weight: 400;
	line-height: 1.3;
	color: var(--wp--preset--color--tinta);
}

.sv-prof-hero-nombre {
	margin: 0;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--sv-prof-nombre);
	font-weight: 400;
	line-height: 1.1;
	color: var(--wp--preset--color--tinta);
	overflow-wrap: anywhere;
}

.sv-prof-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--sm);
	margin: var(--wp--preset--spacing--lg) 0 0;
	padding: 0;
	list-style: none;
}

/* Texto chico sobre el blob: en una píldora crema translúcida (C7). */
.sv-prof-tag {
	display: inline-block;
	padding: 0.3em 1.1em;
	border: 1px solid var(--wp--preset--color--azul-profundo);
	border-radius: var(--wp--preset--border-radius--pill);
	background: var(--sv-crema-78);
	font-size: var(--wp--preset--font-size--texto);
	line-height: 1.3;
	color: var(--wp--preset--color--azul-profundo);
	text-decoration: none;
	transition: background-color 140ms ease;
}

.sv-prof-tag:hover {
	background: var(--wp--preset--color--base);
	text-decoration: underline;
}

.sv-prof-tag:focus-visible,
.sv-prof-hero-volver:focus-visible {
	outline: 2px solid var(--wp--preset--color--azul-primario);
	outline-offset: 3px;
}

/* Bajada, botones, biografía y formación. */
.sv-prof-cuerpo {
	grid-area: cuerpo;
	padding-top: var(--wp--preset--spacing--xxxxxl);
	font-size: var(--sv-prof-texto);
	line-height: 1.45;
	color: var(--wp--preset--color--texto-secundario);
}

.sv-prof-hero-desc {
	margin: 0 0 var(--wp--preset--spacing--xxxxxl);
	font-size: inherit;
	line-height: inherit;
}

.sv-prof-hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--xxl);
	font-size: var(--wp--preset--font-size--texto);
}

.sv-prof-hero-actions .sv-boton {
	padding: 0.95em 4.6em;
	text-transform: uppercase;
}

.sv-prof-hero-volver {
	color: var(--wp--preset--color--azul-primario);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.sv-prof-hero-volver:hover {
	color: var(--wp--preset--color--azul-profundo);
}

.sv-prof-bio {
	margin-top: var(--wp--preset--spacing--xxxxxl);
}

.sv-prof-bio p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

.sv-prof-bio p + p {
	margin-top: 0.75em;
}

/* Formación: al final, sin énfasis (Ki, 2026-09-21). */
.sv-prof-formacion {
	margin-top: var(--wp--preset--spacing--xxxl);
}

.sv-prof-formacion-titulo {
	margin: 0 0 0.4em;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--texto);
	font-weight: 500;
	line-height: 1.3;
	color: var(--wp--preset--color--azul-profundo);
}

.sv-prof-formacion-lista {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--texto);
}

/* Tableta: foto y datos mitad y mitad; el cuerpo a todo el ancho. */
@media (max-width: 1100px) {
	/* La columna de datos es más angosta y los chips bajan de línea:
	   más banda sobre la foto para que quepan. */
	.sv-prof-cabecera {
		--sv-prof-arriba: clamp(140px, 20vw, 220px);
	}

	.sv-prof-rejilla {
		--sv-prof-foto-ancho: calc((100cqw - var(--wp--preset--spacing--xxl)) / 2);
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: calc(var(--sv-prof-foto-ancho) / 0.765 / 3) auto auto;
		grid-template-areas:
			"foto datos"
			"foto ."
			"cuerpo cuerpo";
		column-gap: var(--wp--preset--spacing--xxl);
	}

	.sv-prof-foto-caja {
		grid-row: 1 / 3;
	}
}

/* Móvil: una columna; la banda envuelve foto y datos como una tarjeta. */
@media (max-width: 700px) {
	.sv-prof-cabecera {
		--sv-prof-arriba: calc(var(--wp--custom--header-alto) + var(--wp--preset--spacing--xxl));
	}

	.sv-prof-rejilla {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto auto;
		grid-template-areas:
			"foto"
			"datos"
			"cuerpo";
	}

	/* La foto ocupaba todo el ancho de la columna (434 px de alto a 375) y
	   empujaba «AGENDAR» fuera de la primera pantalla. Achicada, guarda su
	   proporción 0,765 y el botón entra (revisión de Ki del 2026-09-22;
	   lo mide _herramientas/agendar-visible.mjs). */
	.sv-prof-foto-caja {
		grid-area: foto;
		width: min(62%, 260px);
	}

	.sv-prof-banda {
		display: none;
	}

	.sv-prof-banda-movil {
		display: block;
	}

	.sv-prof-datos {
		padding: var(--wp--preset--spacing--xl) 0 0;
	}

	.sv-prof-cuerpo {
		margin-top: calc(var(--wp--preset--spacing--xxl) + var(--wp--preset--spacing--xxxl));
		padding-top: 0;
	}
}

/* Sin foto (su página responde por URL directa, PROPUESTO): los datos a
   todo el ancho, con la banda detrás. */
.sv-prof-cabecera--sin-foto .sv-prof-rejilla {
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto auto;
	grid-template-areas:
		"datos"
		"cuerpo";
}

.sv-prof-cabecera--sin-foto .sv-prof-banda-movil {
	display: block;
	grid-area: 1 / 1 / 2 / -1;
}

.sv-prof-cabecera--sin-foto .sv-prof-datos {
	padding-top: var(--wp--preset--spacing--xl);
}

/* ── Agenda (C13) ── */
.sv-prof-agenda-section {
	padding: var(--wp--preset--spacing--xxxxxl) var(--wp--preset--spacing--margen);
	scroll-margin-top: var(--wp--custom--header-alto);
}

.sv-prof-agenda-titulo {
	margin: 0 0 var(--wp--preset--spacing--xxxl);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--titulo-seccion);
	font-weight: 400;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--wp--preset--color--tinta);
}

/* El widget de reservas de SV-in (inc/widget-agenda.php), en la página de
   cada profesional, en /agenda/ y en cada landing con reserva. Sin alto fijo:
   lo pone embed.js con el alto que informa el widget, así que nunca queda una
   ventana con barras (decisión de Ki, 2026-09-21). El mínimo es solo para
   mientras carga.

   **Sin borde** (Ki y Marcela, 2026-09-26): «todos los widget tienen un borde
   gris de la incrustación, eliminarlo; el widget debe quedar completamente
   integrado». Era `1px solid var(--wp--preset--color--borde)` (#D7D4CE) acá
   mismo, y esta es la única regla del sitio que toca al iframe, así que
   quitarlo lo quita en las tres clases de página a la vez. El radio se queda:
   recorta las esquinas del propio widget, que es lo contrario de dibujarle un
   marco alrededor. Lo mide `node _herramientas/widget-sin-marco.mjs`. */
.sv-agenda-widget {
	width: 100%;
	min-height: 360px;
	border: 0;
	border-radius: 20px;
	display: block;
}

/* ── Conoce al equipo (C10) ──
   El título y el carrusel son los de todo el sitio (.sv-carrusel-titulo
   y sv_carrusel_equipo(), «Tarjeta de profesional y carrusel»). El
   grupo es alignfull: el margen lateral lo pone la sección. */
.sv-prof-otros-section {
	padding: var(--wp--preset--spacing--xxxxxl) var(--wp--preset--spacing--margen);
}

.sv-prof-otros-boton {
	margin: var(--wp--preset--spacing--xxxxxl) 0 0;
	text-align: center;
	font-size: var(--wp--preset--font-size--bajada);
}

/* El bloque «FAQ en acordeón» de la Etapa 1 vivía acá y se retiró en la
   Etapa 5 (A13). Marcaba los mismos <details> que C11 con selectores más
   específicos —«.sv-faq-item > summary» (0,1,1) le ganaba a
   «.sv-faq-pregunta» (0,1,0), y «.sv-faq-item > p» a «.sv-faq-respuesta»—
   y les imponía gap de 16 px, Lora de 15 px, el gris secundario, 12 px de
   margen y 18 px de relleno por item, todo fuera de la escala. Ganaba por
   especificidad, no por orden: moverlo de lugar no habría cambiado nada.
   Lo único que aportaba y hacía falta —el divisor de abajo de cada item—
   está ahora en el bloque de C11, con su token.
   Lo vigila _herramientas/acordeon-escala.mjs, que mide en el navegador,
   no en la hoja de estilos: una regla nueva que vuelva a ganarle no se ve
   leyendo el archivo. */

/* ═══════════════════════════════════════════════════════════
   Header (ESPEC C1) y menú móvil (C2) — patterns/header.php.
   Header.svg: 1754 × 80 en la mesa de 1920 (la mesa menos 4,3 % por
   lado), esquinas inferiores de 30, marca 20, menú 17, botón 152 × 40.
   Cada medida sale de theme.json → settings.custom (header-*), con la
   fórmula de ESPEC §1. Hasta 900 px: a todo el ancho y 56 px de alto,
   ☰ | marca | «Agendar» en la misma grilla de tres columnas.
   ═══════════════════════════════════════════════════════════ */
html {
	/* Un ancla (#agenda) no queda tapada por el header fijo. */
	scroll-padding-top: var(--wp--custom--header-alto);
}

.sv-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	box-sizing: border-box;
	margin-inline: auto;
	/* Contra la raíz de 2560: sobre ese ancho no se estira de borde a borde. */
	width: calc(min(100%, var(--wp--custom--ancho-raiz)) - 2 * var(--wp--custom--header-margen));
	height: var(--wp--custom--header-alto);
	padding-inline: var(--wp--custom--header-padding);
	/* En el diseño el contenido va 3 de 80 bajo el centro (el borde de
	   arriba es recto y el de abajo redondeado). */
	padding-block-start: calc(var(--wp--custom--header-alto) * 0.075);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	background: var(--wp--preset--color--header);
	border-radius: 0 0 var(--wp--preset--border-radius--header) var(--wp--preset--border-radius--header);
	box-shadow: var(--wp--preset--shadow--md);
	color: var(--wp--preset--color--texto-menu);
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 400;
	line-height: 1;
}

.sv-header a {
	color: inherit;
	text-decoration: none;
}

.sv-header a:focus-visible,
.sv-menu-boton:focus-visible {
	outline: 2px solid var(--wp--preset--color--azul-primario);
	outline-offset: 4px;
	border-radius: var(--wp--preset--border-radius--pill);
}

.sv-header-marca {
	grid-column: 1;
	justify-self: start;
	font-size: var(--wp--preset--font-size--marca);
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.sv-header-nav {
	grid-column: 2;
}

.sv-header-nav ul,
.sv-menu-panel ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sv-header-nav ul {
	display: flex;
	gap: var(--wp--custom--header-nav-sep);
	font-size: var(--wp--preset--font-size--menu);
	white-space: nowrap;
}

.sv-header-nav a:hover,
.sv-menu-panel a:hover {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.sv-header-agendar {
	grid-column: 3;
	justify-self: end;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: var(--wp--custom--header-boton-ancho);
	height: var(--wp--custom--header-boton-alto);
	padding-inline: var(--wp--preset--spacing--lg);
	border-radius: var(--wp--preset--border-radius--pill);
	background: var(--wp--preset--color--oro);
	font-size: var(--wp--preset--font-size--menu);
	white-space: nowrap;
	transition: background-color 140ms ease;
}

.sv-header .sv-header-agendar:hover {
	background: var(--wp--preset--color--oro-hover);
}

/* Menú móvil: <details> nativo, oculto sobre 900 px. */
.sv-menu {
	display: none;
	grid-column: 1;
	justify-self: start;
}

.sv-menu-boton {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Área de toque de 44 px; el ícono queda alineado con el margen. */
	width: 44px;
	height: 44px;
	margin-inline-start: -10px;
	cursor: pointer;
}

.sv-menu-boton::-webkit-details-marker {
	display: none;
}

.sv-menu-icono {
	position: relative;
	box-sizing: border-box;
	width: 24px;
	height: 16px;
	border-block: 2px solid currentColor;
}

.sv-menu-icono::before,
.sv-menu-icono::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	border-top: 2px solid currentColor;
	transform: translateY(-50%);
	transition: transform 160ms ease;
}

.sv-menu[open] .sv-menu-icono {
	border-color: transparent;
}

.sv-menu[open] .sv-menu-icono::before {
	transform: translateY(-50%) rotate(45deg);
}

.sv-menu[open] .sv-menu-icono::after {
	transform: translateY(-50%) rotate(-45deg);
}

/* El nombre del botón: solo para lectores de pantalla, y solo el del
   estado actual (display:none lo saca también del árbol accesible). */
.sv-menu-abrir,
.sv-menu-cerrar {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.sv-menu:not([open]) .sv-menu-cerrar,
.sv-menu[open] .sv-menu-abrir {
	display: none;
}

/* El panel baja desde el header, a su mismo ancho; mientras está
   abierto, las esquinas redondeadas pasan al panel. */
.sv-menu-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--lg) var(--wp--custom--header-padding) var(--wp--preset--spacing--xxl);
	background: var(--wp--preset--color--header);
	border-radius: 0 0 var(--wp--preset--border-radius--header) var(--wp--preset--border-radius--header);
	box-shadow: var(--wp--preset--shadow--md);
}

.sv-menu-panel ul {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xl);
	/* 20 px en el diseño; es el mínimo legible, crece con la marca. */
	font-size: max(20px, var(--wp--preset--font-size--marca));
}

.sv-header:has(.sv-menu[open]) {
	border-radius: 0;
}

@media (max-width: 900px) {
	.sv-header {
		width: 100%;
	}

	.sv-header-nav {
		display: none;
	}

	.sv-menu {
		display: block;
	}

	.sv-header-marca {
		grid-column: 2;
		justify-self: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sv-menu-icono::before,
	.sv-menu-icono::after,
	.sv-header-agendar {
		transition: none;
	}
}

/* ═══════════════════════════════════════════════════════════
   Footer (ESPEC C14 y C15) — patterns/footer.php, igual en todas
   las páginas: banda de cierre + descripción y enlaces.
   ═══════════════════════════════════════════════════════════ */
.sv-footer {
	margin-block-start: var(--wp--preset--spacing--xxxxxl);
	padding-block-end: var(--wp--preset--spacing--xxl);
	/* El footer no hereda el padding raíz: lo pone él, con el margen lateral. */
	padding-inline: var(--wp--preset--spacing--margen);
	font-family: var(--wp--preset--font-family--montserrat);
	color: var(--wp--preset--color--azul-profundo);
}

/* C14: inset redondeada, blob dinámico. El color y la imagen congelada
   son el respaldo mientras el motor no dibuja (o sin JavaScript). */
.sv-cierre {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	box-sizing: border-box;
	/* Inset: a 0,8 del margen lateral, un poco más ancha que el contenido. */
	margin-inline: calc(var(--wp--preset--spacing--margen) * -0.2);
	min-height: var(--wp--custom--cierre-alto);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--xxl);
	padding: var(--wp--preset--spacing--xxl) var(--wp--preset--spacing--xl);
	border-radius: var(--wp--preset--border-radius--banda);
	background: var(--wp--preset--color--azul-profundo) url("assets/blobs/banda-cierre.webp") center / cover no-repeat;
}

.sv-cierre-fondo {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: block;
	width: 100%;
	height: 100%;
}

.sv-cierre-titulo {
	margin: 0;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--titulo-hero);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: 0;
	text-align: center;
	color: var(--wp--preset--color--base);
}

.sv-cierre-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5em 3em;
	border-radius: var(--wp--preset--border-radius--pill);
	background: var(--wp--preset--color--oro);
	font-size: var(--wp--preset--font-size--bajada);
	line-height: 1.2;
	transition: background-color 140ms ease;
}

.sv-footer .sv-cierre-boton {
	color: var(--wp--preset--color--texto-menu);
}

.sv-cierre-boton:hover {
	background: var(--wp--preset--color--oro-hover);
}

.sv-footer a:focus-visible,
.sv-footer-col > summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--azul-primario);
	outline-offset: 4px;
}

/* C15: descripción + Centro, Legal y Servicios. */
.sv-footer-enlaces {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
	gap: var(--wp--preset--spacing--xl);
	padding-block: var(--wp--preset--spacing--xxxxxl) var(--wp--preset--spacing--xxxxl);
	font-size: var(--wp--preset--font-size--texto);
	line-height: 1.5;
}

/* La frase va en el mismo azul que la dirección y los enlaces de su
   columna (Ki, punto de control 4: en tinta se veía verdosa). */
.sv-footer-frase {
	max-width: 22em;
	margin: 0 0 var(--wp--preset--spacing--lg);
	color: var(--wp--preset--color--azul-profundo);
}

.sv-footer-direccion {
	margin: 0;
}

.sv-footer-col > summary {
	list-style: none;
}

.sv-footer-col > summary::-webkit-details-marker {
	display: none;
}

.sv-footer-titulo {
	margin: 0 0 var(--wp--preset--spacing--md);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--marca);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tinta);
}

.sv-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
}

.sv-footer a {
	color: var(--wp--preset--color--azul-profundo);
	text-decoration: none;
}

.sv-footer-col a:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.sv-footer-copy {
	margin: 0;
	padding-block-start: var(--wp--preset--spacing--lg);
	border-top: 1px solid var(--wp--preset--color--borde);
	font-size: var(--wp--preset--font-size--texto);
	color: var(--wp--preset--color--texto-secundario);
}

/* Sobre 900 px las columnas se ven abiertas y no se pliegan. Sin
   JavaScript, ::details-content lo resuelve donde el navegador lo
   conoce; el guion del patrón cubre a los demás. */
@media (min-width: 901px) {
	.sv-footer-col::details-content {
		content-visibility: visible;
		display: block;
	}

	.sv-footer-col > summary {
		pointer-events: none;
	}
}

/* Hasta 900 px: la descripción arriba y una fila plegable por columna. */
@media (max-width: 900px) {
	.sv-footer-enlaces {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.sv-footer-desc {
		padding-block-end: var(--wp--preset--spacing--xl);
	}

	.sv-footer-col {
		border-top: 1px solid var(--wp--preset--color--borde);
	}

	.sv-footer-col:last-of-type {
		border-bottom: 1px solid var(--wp--preset--color--borde);
	}

	.sv-footer-col > summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 44px;
		padding-block: var(--wp--preset--spacing--md);
		cursor: pointer;
	}

	.sv-footer-col > summary::after {
		content: "";
		width: 0.5em;
		height: 0.5em;
		margin-inline-end: 0.25em;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-25%) rotate(45deg);
	}

	.sv-footer-col[open] > summary::after {
		transform: translateY(25%) rotate(-135deg);
	}

	.sv-footer-titulo {
		margin: 0;
	}

	.sv-footer-copy {
		padding-block-start: 0;
		border-top: 0;
	}

	.sv-footer-col ul {
		padding-block-end: var(--wp--preset--spacing--lg);
	}
}

/* Donde se ve el botón fijo de WhatsApp (hasta 768 px, ver
   .sv-whatsapp-float), el final del footer deja su alto libre: el último
   texto de la página no queda debajo del botón. */
@media (max-width: 768px) {
	.sv-footer {
		padding-block-end: var(--wp--custom--whatsapp-clearance);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sv-cierre-boton {
		transition: none;
	}
}

/* ═══════════════════════════════════════════════════════════
   Home y sus componentes (Etapa 4 · parte 6, ESPEC §5.1).

   C3 hero con blob y barra de bajada · C6 bloque «mirada» ·
   C7 bandas de blob (a todo el ancho e inset) · C8 tarjetas grises,
   variante familias · C11 lista con chevrons · botones en píldora.
   El marcado vive en inc/componentes.php; las demás páginas los
   reutilizan con sus textos.

   Medidas: las de sv-home1.pdf, con la fórmula del comienzo de este
   archivo. Los fondos de blob de assets/blobs/ son PROVISORIOS (Ki los
   define a mano): reemplazarlos es cambiar el .json/.webp, nada de acá.
   ═══════════════════════════════════════════════════════════ */
:root {
	/* Subtítulo de 32 en la mesa («¿Cómo entendemos el bienestar?»,
	   el título de cada familia). */
	--sv-subtitulo: clamp(20px, 1.6667vw, 42.67px);
	/* Alto del hero del home: 1.040 de 6.503 en el PDF (decisión de
	   Ki del 2026-09-20: el alto se fija contra el PDF). */
	--sv-hero-home-alto: clamp(560px, 54.1667vw, 1386.67px);
	/* Collage de la mirada: 654 de ancho en la mesa. */
	--sv-collage-ancho: clamp(280px, 34.0625vw, 872px);
	/* Banda inset de Nuestros servicios: 248 de alto en la mesa. */
	--sv-banda-inset-alto: clamp(120px, 12.9167vw, 330.67px);
	/* Crema translúcida de la barra clara (C3) y de los botones sobre
	   un blob: el 78 % de C3. */
	--sv-crema-78: color-mix(in srgb, var(--wp--preset--color--base) 78%, transparent);
}

/* Las secciones del home se separan con su propio padding: sin el
   margen de bloque que WordPress pone entre hermanos. */
.sv-home > * {
	margin-block: 0;
}

/* ── Botones en píldora ── */
.sv-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 0.6em 1.8em;
	border: 1px solid transparent;
	border-radius: var(--wp--preset--border-radius--pill);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: inherit;
	font-weight: 400;
	line-height: 1.25;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 140ms ease, color 140ms ease;
}

.sv-boton--borde {
	border-color: var(--wp--preset--color--azul-profundo);
	color: var(--wp--preset--color--azul-profundo);
	background: transparent;
}

.sv-boton--claro {
	border-color: var(--wp--preset--color--azul-profundo);
	color: var(--wp--preset--color--azul-profundo);
	background: var(--sv-crema-78);
}

.sv-boton--borde:hover,
.sv-boton--claro:hover {
	background: var(--wp--preset--color--base);
}

.sv-boton--oro {
	background: var(--wp--preset--color--oro);
	color: var(--wp--preset--color--azul-profundo);
}

.sv-boton--oro:hover {
	background: var(--wp--preset--color--oro-hover);
}

.sv-boton--azul {
	background: var(--wp--preset--color--azul-primario);
	color: var(--wp--preset--color--base);
}

.sv-boton--azul:hover {
	background: var(--wp--preset--color--azul-profundo);
}

.sv-boton:focus-visible,
.sv-flecha:focus-visible,
.sv-chip:focus-visible,
.sv-lista-enlace:focus-visible {
	outline: 2px solid var(--wp--preset--color--azul-primario);
	outline-offset: 3px;
}

/* ── C3 · Hero con blob y barra de bajada ── */
.sv-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	margin: var(--wp--custom--hero-edge-gap);
	border-radius: var(--wp--preset--border-radius--banda);
	/* Respaldo mientras el motor no dibuja (o sin JavaScript): el .webp
	   congelado de la misma composición (--sv-hero-fondo lo pone
	   sv_hero_blob()). */
	background: var(--wp--preset--color--azul-profundo) var(--sv-hero-fondo) center / cover no-repeat;
}

/* Primer bloque de la página: gana al «primer hijo sin margen» de
   WordPress, que tiene más especificidad que una clase sola. */
.sv-home > .sv-hero {
	margin: var(--wp--custom--hero-edge-gap);
}

.sv-hero-home {
	min-height: var(--sv-hero-home-alto);
}

.sv-hero-fondo {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: block;
	width: 100%;
	height: 100%;
}

/* El lema, centrado en lo que queda bajo el header fijo. */
.sv-hero-cabeza {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--custom--header-alto) var(--wp--preset--spacing--margen) var(--wp--preset--spacing--xl);
}

.sv-hero-titulo {
	margin: 0;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--lema);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: 0;
	text-align: center;
	color: var(--wp--preset--color--base);
}

.sv-barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--xl);
	/* El texto arranca en el margen de la página (el hero ya está a
	   hero-edge-gap del borde). */
	padding: calc(var(--wp--preset--spacing--xxl) * 1.5) calc(var(--wp--preset--spacing--margen) - var(--wp--custom--hero-edge-gap));
	background: var(--sv-crema-78);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--bajada);
	color: var(--wp--preset--color--azul-profundo);
}

.sv-barra-texto {
	margin: 0;
	max-width: 25em;
	font-size: inherit;
	line-height: 1.45;
}

.sv-barra-acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--md);
	/* Revisión de Ki del 2026-09-22: los botones del hero estaban muy
	   grandes. Bajan del tamaño de la bajada al del texto (17 en la mesa,
	   mínimo 15), que es el mínimo legible de ESPEC §2; la bajada de al
	   lado no cambia. La flecha mide 2,5 em, así que baja con ellos. */
	font-size: var(--wp--preset--font-size--texto);
}

/* La flecha: el círculo vacío del PDF, 60 en la mesa (2,5 em de la
   bajada). */
.sv-flecha {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 2.5em;
	aspect-ratio: 1;
	border: 1px solid var(--wp--preset--color--azul-profundo);
	border-radius: var(--wp--preset--border-radius--pill);
	color: var(--wp--preset--color--azul-profundo);
	transition: background-color 140ms ease;
}

.sv-flecha:hover {
	background: var(--wp--preset--color--base);
}

.sv-flecha svg {
	width: 45%;
	height: 45%;
}

@media (max-width: 700px) {
	.sv-barra {
		flex-direction: column;
		align-items: flex-start;
		/* Apilada, la barra se comía más de la mitad del hero (307 de 560 px
		   a 375): su aire vertical vuelve a un paso de la escala. */
		padding-block: var(--wp--preset--spacing--xxl);
	}
}

/* ── C6 · Bloque «mirada» ──
   Dos columnas (el texto arranca a 1.026 en la mesa); el collage de
   las dos fotos del centro debajo del título, la segunda más baja. */
.sv-mirada {
	display: grid;
	grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
	column-gap: var(--wp--preset--spacing--xl);
	align-items: start;
	padding: var(--wp--preset--spacing--xxxxxl) var(--wp--preset--spacing--margen);
	font-family: var(--wp--preset--font-family--montserrat);
	color: var(--wp--preset--color--azul-profundo);
	scroll-margin-top: var(--wp--custom--header-alto);
}

/* C6 sin collage: el bloque 2 de /servicios/ desde la revisión de Ki y Marcela
   del 2026-09-26. Sin las dos fotos y sin los tres participantes, el título y
   su bajada dejan el bloque en ~31 vh a 1280 px, con las tarjetas de servicio
   pegadas al párrafo; el aire se le devuelve con el alto que pidió Ki, «unos
   40 vh en escritorio». **Está en vh, y no en un token de la escala, porque es
   el número de Ki y lo que él nombró es la pantalla.** El contenido se centra
   en lo que sobra en vez de quedar arriba con el hueco abajo. Lo mide
   `node _herramientas/alto-seccion.mjs /servicios/ --selector .sv-mirada --esperado 40`.

   **`box-sizing: border-box` no es decoración acá.** `.sv-mirada` se mide en
   caja de contenido, así que un `min-height: 40vh` a secas le suma encima el
   relleno de sección por los dos lados: medido, el bloque salía en **56,3 vh**
   a 1280 px en vez de 40. Los 40 vh de Ki son los del bloque que se ve,
   relleno incluido. */
@media (min-width: 1024px) {
	.sv-mirada--sin-collage {
		box-sizing: border-box;
		min-height: 40vh;
		align-items: center;
	}
}

.sv-mirada-titulo {
	max-width: 11.5em;
	margin: 0;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--titulo-seccion);
	font-weight: 400;
	line-height: 1.15;
	text-transform: uppercase;
	/* El PDF escribe este título en el azul del texto, no en tinta. */
	color: var(--wp--preset--color--azul-profundo);
}

.sv-collage {
	container-type: inline-size;
	display: grid;
	grid-template-columns: minmax(0, 276fr) minmax(0, 362fr);
	column-gap: 2.45cqw;
	align-items: start;
	width: min(100%, var(--sv-collage-ancho));
	margin-top: calc(var(--wp--preset--spacing--xxxxxl) + var(--wp--preset--spacing--xxxl));
}

.sv-collage-foto {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 4.6cqw;
}

.sv-collage-foto--1 {
	aspect-ratio: 276 / 362;
}

/* La horizontal, 158 más abajo que la vertical en la mesa. */
.sv-collage-foto--2 {
	aspect-ratio: 362 / 278;
	margin-top: 24.2cqw;
}

.sv-mirada-parrafo {
	margin: 0;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--bajada);
	line-height: 1.45;
}

.sv-mirada-parrafo + .sv-mirada-parrafo {
	margin-top: 1.45em;
}

.sv-mirada-subtitulo {
	margin: calc(var(--wp--preset--spacing--xxxxxl) * 2) 0 0;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--sv-subtitulo);
	font-weight: 400;
	line-height: 1.2;
	color: var(--wp--preset--color--azul-profundo);
}

.sv-pilares {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--xl);
	margin-top: var(--wp--preset--spacing--xxxxl);
}

.sv-pilar-titulo {
	margin: 0 0 0.4em;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--bajada);
	font-weight: 500;
	line-height: 1.2;
	color: var(--wp--preset--color--azul-profundo);
}

.sv-pilar-linea {
	margin: 0;
	font-size: var(--wp--preset--font-size--texto);
	line-height: 1.4;
}

.sv-mirada-boton {
	margin: calc(var(--wp--preset--spacing--xxxxxl) + var(--wp--preset--spacing--xxl)) 0 0;
	font-size: var(--wp--preset--font-size--texto);
}

@media (max-width: 800px) {
	.sv-mirada {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--wp--preset--spacing--xxxl);
	}

	.sv-collage {
		margin-top: var(--wp--preset--spacing--xxxl);
	}

	.sv-mirada-subtitulo {
		margin-top: var(--wp--preset--spacing--xxxxl);
	}

	.sv-mirada-boton {
		margin-top: var(--wp--preset--spacing--xxxl);
	}
}

@media (max-width: 600px) {
	.sv-pilares {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ── C7 · Banda de blob a todo el ancho: Quiénes te acompañan ──
   Quieta: la composición congelada como fondo, como la midió la
   búsqueda. Texto blanco solo en el título grande. */
.sv-quienes {
	margin-top: var(--wp--preset--spacing--xxxxl);
	padding: calc(var(--wp--preset--spacing--xxxxxl) + var(--wp--preset--spacing--xl)) var(--wp--preset--spacing--margen) calc(var(--wp--preset--spacing--xxxxxl) + var(--wp--preset--spacing--xxl));
	background: var(--wp--preset--color--azul-profundo) url("assets/blobs/banda-quienes.webp") center / cover no-repeat;
	scroll-margin-top: var(--wp--custom--header-alto);
}

.sv-quienes .sv-carrusel-titulo {
	color: var(--wp--preset--color--base);
}

.sv-quienes .sv-equipo-btn,
.sv-quienes .sv-equipo-btn:hover {
	color: var(--wp--preset--color--base);
}

.sv-quienes-boton {
	margin: var(--wp--preset--spacing--xxxxxl) 0 0;
	text-align: center;
	font-size: var(--wp--preset--font-size--bajada);
}

/* ── C7 · Banda inset: Nuestros servicios ── */
.sv-banda-servicios {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--xl);
	box-sizing: border-box;
	min-height: var(--sv-banda-inset-alto);
	margin: calc(var(--wp--preset--spacing--xxxxxl) + var(--wp--preset--spacing--xxxl)) var(--wp--preset--spacing--margen) 0;
	padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--xxxxl);
	border-radius: var(--wp--preset--border-radius--banda);
	background: var(--wp--preset--color--azul-profundo) url("assets/blobs/banda-servicios.webp") center / cover no-repeat;
	font-size: var(--wp--preset--font-size--bajada);
}

.sv-banda-titulo {
	margin: 0;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--titulo-seccion);
	font-weight: 400;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
}

/* ── C8 · Tarjetas grises, variante familias ──
   Tres en fila; ≤ 900 px, una. Radio 11 % y foto a 2,2 % del borde
   con radio 8,8 % (.sv-prop). Alto: el de la mesa (520 de 550). El
   texto conserva su margen: 7,6 % del ancho de la tarjeta desde su
   borde (42 en la mesa), o sea 5,65 cqw desde el borde de la foto. */
.sv-familias {
	padding: var(--wp--preset--spacing--xxxl) var(--wp--preset--spacing--margen) var(--wp--preset--spacing--xxxxxl);
}

.sv-familias-fila {
	--sv-cols: 3;
	--sv-sep: var(--wp--preset--spacing--xl);
	display: flex;
	gap: var(--sv-sep);
}

.sv-familia {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	min-height: calc(var(--sv-ancho) * 0.9443);
	padding: var(--sv-margen-interior);
	background: var(--wp--preset--color--borde-suave);
	font-family: var(--wp--preset--font-family--montserrat);
	color: var(--wp--preset--color--azul-profundo);
}

.sv-familia-texto {
	padding: 6.5cqw 5.65cqw;
}

.sv-familia-titulo {
	margin: 0;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--sv-subtitulo);
	font-weight: 400;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--wp--preset--color--tinta);
}

.sv-familia-linea {
	margin: var(--wp--preset--spacing--lg) 0 0;
	font-size: var(--wp--preset--font-size--texto);
	line-height: 1.45;
}

.sv-chips {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--sm);
	margin: var(--wp--preset--spacing--xxl) 0 0;
	padding: 0;
	list-style: none;
}

.sv-chip {
	display: inline-block;
	box-sizing: border-box;
	min-width: 51cqw;
	padding: 0.55em 1.65em;
	border-radius: var(--wp--preset--border-radius--pill);
	background: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--texto);
	line-height: 1.25;
	color: var(--wp--preset--color--azul-profundo);
	text-decoration: none;
	transition: background-color 140ms ease;
}

.sv-chip:hover {
	background: var(--wp--preset--color--header);
	text-decoration: underline;
}

.sv-familia-foto {
	display: block;
	object-fit: cover;
	opacity: 0.85;
}

/* Individual: la foto a lo ancho, abajo (526 × 168 en la mesa). */
.sv-familia--individual .sv-familia-foto {
	width: 100%;
	aspect-ratio: 526 / 168;
	margin-top: auto;
}

/* Familias: la foto a la derecha, a todo el alto (168 de ancho). */
/* (El ancho de la columna sale de --sv-ancho: en la regla de la propia
   tarjeta, un cqw se mediría contra la fila, no contra ella.) */
.sv-familia--familias {
	display: grid;
	grid-template-columns: minmax(0, 1fr) calc(var(--sv-ancho) * 0.3055);
	column-gap: var(--wp--preset--spacing--md);
}

/* height 0 + min-height 100 %: la foto llena el alto de la tarjeta sin
   imponer el suyo (la vertical de 334 × 988 la estiraría). */
.sv-familia--familias .sv-familia-foto {
	width: 100%;
	height: 0;
	min-height: 100%;
}

/* Organizaciones: la foto cuadrada abajo a la derecha (214 en la mesa). */
.sv-familia--organizaciones .sv-familia-foto {
	width: 40.7cqw;
	aspect-ratio: 1;
	margin-top: auto;
	align-self: flex-end;
}

@media (max-width: 900px) {
	.sv-familias-fila {
		--sv-cols: 1;
		flex-direction: column;
	}

	/* A una columna, la tarjeta es más ancha que alta en la mesa: el
	   alto lo pone su contenido. */
	.sv-familia {
		min-height: 0;
	}

	.sv-familia--individual .sv-familia-foto,
	.sv-familia--organizaciones .sv-familia-foto {
		margin-top: var(--wp--preset--spacing--xl);
	}
}

/* Bajo 600 px la letra está en su mínimo legible y no escala con la
   tarjeta: la foto de Familias cede ancho y los chips, margen, para que
   cada servicio quepa en una línea. */
@media (max-width: 600px) {
	.sv-familia--familias {
		grid-template-columns: minmax(0, 1fr) calc(var(--sv-ancho) * 0.25);
	}

	.sv-chip {
		min-width: 0;
		padding-inline: 1.1em;
	}
}

/* ── C11 · Lista con chevrons (Recursos del home) ── */
.sv-lista {
	display: grid;
	grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
	column-gap: var(--wp--preset--spacing--xl);
	align-items: start;
	padding: var(--wp--preset--spacing--xxxxxl) var(--wp--preset--spacing--margen);
	font-family: var(--wp--preset--font-family--montserrat);
	color: var(--wp--preset--color--tinta);
}

.sv-lista-titulo {
	margin: 0;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--titulo-seccion);
	font-weight: 400;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--wp--preset--color--tinta);
}

.sv-lista-boton {
	margin: var(--wp--preset--spacing--xxl) 0 0;
	font-size: var(--wp--preset--font-size--texto);
}

.sv-lista-items {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--wp--preset--color--borde);
}

.sv-lista-items > li {
	margin: 0;
	border-bottom: 1px solid var(--wp--preset--color--borde);
}

.sv-lista-enlace {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--xl);
	padding: var(--wp--preset--spacing--xxl) var(--wp--preset--spacing--md);
	font-size: var(--wp--preset--font-size--bajada);
	line-height: 1.2;
	color: var(--wp--preset--color--tinta);
	text-decoration: none;
}

.sv-lista-enlace:hover span {
	text-decoration: underline;
}

.sv-lista-chevron {
	flex: none;
	width: 0.55em;
	height: 1.1em;
	color: var(--wp--preset--color--azul-profundo);
}

@media (max-width: 800px) {
	.sv-lista {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--wp--preset--spacing--xxxl);
	}
}

/* ── Testimonios: reseñas reales de Google (ESPEC §4.7) ──

   Diseño DECIDIDO (2026-09-24) por Ki: encabezado con el promedio grande y
   sus estrellas, y debajo el total enlazado a la ficha; tarjetas con las
   estrellas arriba, el texto al medio y la firma abajo.

   **Corrección de Ki del 2026-09-24, sobre la captura de la parte anterior:**
   en escritorio es un **carrusel**, no un muro de tarjetas de alto libre en
   columnas, y las tarjetas son **todas del mismo alto**. En móvil sigue
   deslizándose con el dedo. El muro fue una contrapropuesta del orquestador
   que nadie ratificó.

   **El carrusel es el del sitio** (.sv-carrusel, «Tarjeta de profesional y
   carrusel» más arriba en este archivo): las mismas flechas, el mismo bucle y
   lo mismo cuando las tarjetas caben —no se clona nada, la fila se centra y
   las flechas se retiran—. Acá solo van las columnas de reseñas y la tarjeta.
   No hay un segundo carrusel, ni flechas propias.

   **Cómo salen todas del mismo alto, sin un número mágico.** El bloque de
   texto tiene un alto FIJO de --sv-resena-lineas líneas —no un máximo— y el
   botón «Leer completa» reserva su lugar siempre (`--sin-uso` lo esconde sin
   sacarlo del flujo). Así una tarjeta de dos líneas y una de veinte miden
   exactamente lo mismo, y el alto de la fila lo decide el número de líneas,
   que es lo que se afinó midiendo. El `align-items: stretch` de la pista es la
   red por si un nombre largo baja a dos líneas.

   **Cuántas líneas, y por qué cinco.** Los doce textos van de 58 a 552
   caracteres. Con cuatro líneas, la mitad de las reseñas pide «Leer completa»
   y la sección se lee como una lista de botones; con seis, la más corta queda
   con cuatro líneas de hueco. Con cinco, cuatro de las doce piden el botón a
   1280 px y el hueco de la más corta son dos líneas y media.

   **Qué pasa al desplegar una reseña.** Crece **solo ella, y hacia abajo**:
   sv-resenas.js fija el alto de la fila en el que ya tenía
   (`--sv-resena-alto` + .sv-carrusel-fijo) y pasa la pista a
   `align-items: flex-start`, así que ninguna tarjeta vecina cambia de alto ni
   de lugar, el encabezado se queda donde estaba y las flechas tampoco se
   mueven. Lo que sigue hacia abajo en la página baja lo que creció esa
   tarjeta, que es lo que hace cualquier cosa que se despliega en su lugar.

   La sección se queda en la página aunque no haya ninguna reseña: entonces el
   patrón dibuja solo .sv-testimonios--reservada, sin contenido, y su alto es
   el padding de .sv-testimonios. A la vista es el aire entre dos secciones. */
.sv-testimonios {
	/* El alto de la tarjeta, en líneas de texto. Es el único número de esta
	   sección que se afinó a ojo puesto sobre la medición, y está acá solo. */
	--sv-resena-lineas: 5;
	padding: var(--wp--preset--spacing--xxxxxl) var(--wp--preset--spacing--margen);
	font-family: var(--wp--preset--font-family--montserrat);
}

.sv-testimonios-cabeza {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--md);
}

/* El promedio real y el total de la ficha completa, que es la condición de Ki:
   mostrar doce reseñas sin decir que son de veintisiete se acerca a la
   publicidad engañosa. Los dos números vienen del archivo; si no vienen, no se
   dibuja nada acá — no se calcula un promedio con las que se pintan. */
.sv-testimonios-resumen {
	text-align: right;
}

.sv-testimonios-nota {
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
}

.sv-testimonios-cifra {
	font-size: var(--wp--preset--font-size--titulo-seccion);
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--azul-profundo);
}

.sv-testimonios-estrellas {
	color: var(--wp--preset--color--oro);
	font-size: var(--wp--preset--font-size--bajada);
	letter-spacing: 0.06em;
}

.sv-testimonios-total {
	margin: var(--wp--preset--spacing--sm) 0 0;
	font-size: var(--wp--preset--font-size--texto);
	color: var(--wp--preset--color--texto-secundario);
}

.sv-testimonios-enlace {
	color: var(--wp--preset--color--azul-profundo);
	text-decoration: underline;
}

/* El aire entre el encabezado y el carrusel (antes lo daba .sv-testimonios-pista,
   que ya no existe: la pista es la del carrusel del sitio). */
.sv-testimonios .sv-carrusel {
	margin-top: var(--wp--preset--spacing--xxxl);
}

/* ── Columnas de reseñas ──
   No son las de la tarjeta de profesional (§3.1): una reseña es texto, y con
   cinco columnas a 1280 px no se lee. Los cortes deciden la disposición, nunca
   un tamaño (ESPEC §1.2). Bajo 600 px hay una tarjeta y un poco de la
   siguiente: 1,15 columnas es lo que deja asomar el borde de la que viene, que
   es lo que ya hacía la fila deslizable de móvil. */
.sv-carrusel--resenas .sv-equipo-carousel {
	--sv-cols: 1.15;
}

@media (min-width: 600px) {
	.sv-carrusel--resenas .sv-equipo-carousel {
		--sv-cols: 2;
	}
}

@media (min-width: 1024px) {
	.sv-carrusel--resenas .sv-equipo-carousel {
		--sv-cols: 3;
	}
}

/* Con tres columnas, una mesa de 1920 deja tarjetas de 551 px y la reseña más
   corta ocupa **una** línea de cinco: el hueco se ve antes que el texto. Con
   cuatro, la tarjeta mide 409 px —el mismo cuerpo de lectura que a 1280— y el
   peor hueco baja a tres líneas. Medido con resenas-vista.mjs, no a ojo. */
@media (min-width: 1600px) {
	.sv-carrusel--resenas .sv-equipo-carousel {
		--sv-cols: 4;
	}
}

/* ── La tarjeta ──
   .sv-prop le pone el ancho de su columna, el radio proporcional (11 % de su
   propio ancho) y el contenedor; la caja es el elemento de la fila y la tarjeta
   la llena, para que el alto igualado llegue al recuadro que se ve. */
.sv-resena-caja {
	display: flex;
}

.sv-resena {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
	/* Sin esto, el 100 % se mide contra el contenido y la tarjeta sobresale de su
	   caja por el borde y los dos márgenes interiores: 295 px dentro de una fila
	   de 261, y la pista le corta el borde de abajo con su overflow. A la vista es
	   una tarjeta sin borde inferior —no un error de tamaño—, y eso es lo que hace
	   que cueste verlo. El tema no fija box-sizing en ninguna regla global: va
	   componente por componente. */
	box-sizing: border-box;
	inline-size: 100%;
	block-size: 100%;
	padding: var(--wp--preset--spacing--xl);
	border: 1px solid var(--wp--preset--color--borde-suave);
	border-radius: var(--sv-radio);
	background: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--texto);
	color: var(--wp--preset--color--tinta);
}

.sv-resena p {
	margin: 0;
}

/* Las estrellas van en el amarillo de marca, como pidió Ki. Medido: ese oro
   (#ffc73c) sobre la tarjeta (#FEFBF7) da 1,41:1, bajo el 4,5:1 de AA. Lo que
   sostiene la decisión es que la nota no se lee solo de ahí: cada tarjeta
   lleva el aria-label «5 de 5 estrellas» para el lector de pantalla, y el
   promedio de la ficha va escrito en números en el encabezado. Queda anotado
   en el retorno de la parte como la única falla de contraste propia. */
.sv-resena-estrellas {
	color: var(--wp--preset--color--oro);
	letter-spacing: 0.1em;
}

/* El texto va completo en el HTML —es lo que lo hace indexable— y se recorta al
   alto de la tarjeta; las que pasan de ahí abren con «Leer completa», ahí mismo
   y sin sacar a nadie de la página (Ki, 2026-09-24). Quién necesita el botón lo
   decide el navegador midiendo, no el PHP contando letras.

   `block-size` fijo, no `max-block-size`: es lo que hace que todas las tarjetas
   midan igual (ver la cabecera de esta sección). `1.5em` es exactamente una
   línea, porque el interlineado es 1,5. */
.sv-resena-texto {
	/* La tipografía de lectura del sitio (Lora), no la de interfaz: es el texto
	   que alguien escribió, y se lee como se lee el resto del contenido (Ki). */
	font-family: var(--wp--preset--font-family--lora);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--sv-resena-lineas);
	block-size: calc(var(--sv-resena-lineas) * 1.5em);
	overflow: hidden;
	line-height: 1.5;
	white-space: pre-line;
}

.sv-resena--abierta .sv-resena-texto {
	-webkit-line-clamp: none;
	block-size: auto;
	overflow: visible;
}

.sv-resena-mas {
	align-self: flex-start;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--wp--preset--font-size--14);
	color: var(--wp--preset--color--azul-profundo);
	text-decoration: underline;
	cursor: pointer;
}

/* Una tarjeta cuyo texto cabe entero no necesita el botón, pero sí necesita
   dejarle su lugar: si desapareciera del flujo, esa tarjeta mediría menos que
   sus vecinas y el alto igualado se perdería. `visibility: hidden` lo saca de
   la vista, del orden de tabulación y del árbol de accesibilidad, y le deja el
   espacio. Lo pone y lo quita assets/js/sv-resenas.js, midiendo. */
.sv-resena-mas--sin-uso {
	visibility: hidden;
}

/* La firma: círculo con las iniciales en azul sobre el gris de tarjeta —no una
   foto de perfil (Ki, 2026-09-24)—, con el nombre arriba y la fecha abajo. El
   círculo abarca las dos filas; sin fecha, la segunda queda en cero. */
.sv-resena-persona {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: var(--wp--preset--spacing--sm);
	align-items: center;
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--sm);
}

.sv-resena-iniciales {
	grid-row: 1 / 3;
	display: grid;
	place-items: center;
	inline-size: 2.8em;
	block-size: 2.8em;
	border-radius: 50%;
	background: var(--wp--preset--color--gris-alterno);
	color: var(--wp--preset--color--azul-profundo);
	font-size: 0.85em;
	font-weight: 600;
}

.sv-resena-nombre {
	grid-column: 2;
	font-weight: 500;
	color: var(--wp--preset--color--texto-secundario);
}

.sv-resena-fecha {
	grid-column: 2;
	font-size: 0.85em;
	color: var(--wp--preset--color--texto-secundario);
}

/* ── Con una reseña desplegada ──
   La fila queda clavada en el alto que tenía y deja de igualar: solo la tarjeta
   abierta crece, y hacia abajo. El número lo mide sv-resenas.js antes de abrir
   —no hay forma de saberlo en CSS— y lo deja en --sv-resena-alto. */
.sv-carrusel--resenas.sv-carrusel-fijo .sv-equipo-track {
	align-items: flex-start;
}

.sv-carrusel--resenas.sv-carrusel-fijo .sv-resena-caja {
	block-size: var(--sv-resena-alto);
}

.sv-carrusel--resenas.sv-carrusel-fijo .sv-resena-caja--abierta {
	block-size: auto;
}

/* Las flechas van centradas contra la fila, y con una reseña abierta la fila
   crece: sin esto bajarían con ella y dejarían de estar donde estaban
   (consistencia espacial, docs/REGLAS_DE_DISENO_UI.md de SV-in). Bajo 900 px
   viven abajo de la fila y ahí sí acompañan lo que creció, que es justamente
   donde tienen que estar. */
@media (min-width: 900px) {
	.sv-carrusel--resenas.sv-carrusel-fijo .sv-equipo-btn {
		top: calc(var(--sv-resena-alto) / 2);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sv-boton,
	.sv-flecha,
	.sv-chip {
		transition: none;
	}
}

/* ═══════════════════════════════════════════════════════════
   Servicios, Equipo y Agenda (Etapa 4 · parte 8, ESPEC §5.4,
   §5.5 y §5.9).

   C4 hero interior · C19 declaración centrada · C8 tarjetas
   numeradas (etapas y valores) · C11 variante acordeón ·
   «Quiénes somos» · /agenda/ directo al widget.

   El marcado vive en inc/componentes.php; las tres páginas solo
   ponen sus textos.
   ═══════════════════════════════════════════════════════════ */
:root {
	/* Hero interior: 480 de alto en la mesa (ESPEC C4, «máx. 480 px
	   a 1920»). El mínimo deja al título y a la barra de bajada. */
	--sv-hero-interior-alto: clamp(280px, 25vw, 640px);
	/* Número grande de una tarjeta numerada: 48 en la mesa. */
	--sv-numero: clamp(28px, 2.5vw, 64px);
}

/* Las secciones de una página se separan con su propio padding,
   igual que en el home: sin el margen que WordPress pone entre
   bloques hermanos. */
.sv-pagina > * {
	margin-block: 0;
}

/* Primer bloque de la página: gana al «primer hijo sin margen» de
   WordPress, que pesa más que una clase sola. */
.sv-pagina > .sv-hero {
	margin: var(--wp--custom--hero-edge-gap);
}

/* ── C4 · Hero interior ──
   La misma pieza del home (sv_hero_blob()) con el blob quieto: acá
   solo cambian el alto y el tamaño del título. */
.sv-hero-interior {
	min-height: var(--sv-hero-interior-alto);
}

.sv-hero-interior .sv-hero-titulo {
	font-size: var(--wp--preset--font-size--titulo-hero);
}

/* ── C19 · Declaración centrada (misión y visión de /equipo/) ── */
.sv-declaracion {
	padding: calc(var(--wp--preset--spacing--xxxxxl) * 2) var(--wp--preset--spacing--margen);
}

/* C19 en dos partes (Ki, 2026-09-26): la entrada grande en dos líneas y el
   cuerpo debajo en seis, en escritorio. El ancho es proporcional como todo el
   sitio —750 px en la mesa de 1920, tope 1000 a 2560— y de ahí salen los
   cortes: con las dos partes midiendo lo mismo de ancho, la relación se
   mantiene sola a 1280, 1440, 1920 y 2560. Lo mide
   `_herramientas/lineas-declaracion.mjs`, porque dónde corta una palabra no se
   lee del CSS. */
.sv-declaracion-entrada,
.sv-declaracion-texto {
	margin: 0 auto;
	font-family: var(--wp--preset--font-family--montserrat);
	line-height: 1.5;
	text-align: center;
	color: var(--wp--preset--color--azul-profundo);
}

.sv-declaracion-entrada {
	/* 43 px en la mesa de 1920 (Ki, 2026-09-26): el mismo tamaño que un título
	   de sección, así que sale del token, no de un número suelto. */
	max-width: min(100%, 31em);
	font-size: var(--wp--preset--font-size--titulo-seccion);
	margin-bottom: var(--wp--preset--spacing--xxl);
}

.sv-declaracion-texto {
	/* 32 px en la mesa de 1920 (Ki, 2026-09-26). No hay token de ese tamaño:
	   `bajada` llega a 24 y su tope de 32 es a 2560. Va con la fórmula
	   proporcional del sitio (ESPEC §1) y con el mínimo legible de la bajada.
	   PROPUESTO: si otra pantalla lo necesita, esto pasa a ser un token. */
	max-width: min(100%, 39em);
	font-size: clamp(20px, 1.6667vw, 42.67px);
}

/* ── Título de sección ──
   El mismo de «Cómo empezar», «Nuestros valores» y «Quiénes
   somos» (.sv-carrusel-titulo es el de las secciones con
   carrusel; este es el de las demás). */
.sv-seccion-titulo {
	margin: 0 0 var(--wp--preset--spacing--xxxl);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--titulo-seccion);
	font-weight: 400;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--wp--preset--color--tinta);
}

/* ── C8 · Tarjetas numeradas (etapas y valores) ──
   Misma tarjeta; lo que cambia es cuántas llenan la fila, y eso
   lo dice --sv-cols: las que no caben bajan y quedan centradas.
   Radio 11 % del ancho de la tarjeta (.sv-prop). */
.sv-numeradas {
	padding: var(--wp--preset--spacing--xxxxxl) var(--wp--preset--spacing--margen);
	font-family: var(--wp--preset--font-family--montserrat);
	color: var(--wp--preset--color--azul-profundo);
	scroll-margin-top: var(--wp--custom--header-alto);
}

.sv-numeradas-fila {
	--sv-sep: var(--wp--preset--spacing--xl);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sv-sep);
}

.sv-etapas .sv-numeradas-fila {
	--sv-cols: 3;
}

.sv-valores .sv-numeradas-fila {
	--sv-cols: 5;
}

.sv-numerada {
	box-sizing: border-box;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	/* El margen del texto sale del ancho de la tarjeta, no de un cqw:
	   en la regla de la propia tarjeta el cqw mide la fila. */
	padding: calc(var(--sv-ancho) * 0.065) calc(var(--sv-ancho) * 0.0565);
	background: var(--wp--preset--color--borde-suave);
}

.sv-numerada-num {
	margin: 0 0 var(--wp--preset--spacing--xxxl);
	font-size: var(--sv-numero);
	font-weight: 300;
	line-height: 1;
	color: var(--wp--preset--color--texto-secundario);
}

/* El título y su línea, al pie de la tarjeta: el auto se come el
   alto sobrante cuando una tarjeta de la fila es más alta. */
.sv-numerada-titulo {
	margin: auto 0 0;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--bajada);
	font-weight: 400;
	line-height: 1.2;
	color: var(--wp--preset--color--tinta);
}

.sv-etapas .sv-numerada-titulo {
	text-transform: uppercase;
}

.sv-numerada-linea {
	margin: var(--wp--preset--spacing--lg) 0 0;
	font-size: var(--wp--preset--font-size--texto);
	line-height: 1.45;
}

.sv-numeradas-boton {
	margin: var(--wp--preset--spacing--xxxxl) 0 0;
	font-size: var(--wp--preset--font-size--texto);
}

/* Columnas de ESPEC §3, C8: etapas 3 → 1; valores 5 → 3 + 2 → 2 + 2 + 1. */
@media (max-width: 1100px) {
	.sv-valores .sv-numeradas-fila {
		--sv-cols: 3;
	}
}

@media (max-width: 900px) {
	.sv-etapas .sv-numeradas-fila {
		--sv-cols: 1;
	}
}

@media (max-width: 700px) {
	.sv-valores .sv-numeradas-fila {
		--sv-cols: 2;
	}
}

/* Un cuarto escalón, de la revisión de Ki y Marcela del 2026-09-26: a 375 px
   «Responsabilidad social» se salía de su tarjeta de valor. Ki ofreció dos
   caminos —bajarle puntos al título solo en ese ancho, o evitar ahí la doble
   columna— y **lo decidió la medición**: con dos columnas se salen también dos
   líneas de cuerpo («Tomar responsabilidad personal y social…» y «Habitamos un
   entramado de interdependencias,»), y esas están en `texto`, que a 375 px ya
   está en su mínimo de 15 px. O sea: achicar el título no alcanzaba, porque el
   que no cabe no es solo el título. Con una columna la caja pasa de 140 px a
   más de 300 y entra todo sin tocar ningún tamaño.

   El corte en 480 px es de esta tanda, no de Ki (**PROPUESTO**): a 414 px la
   palabra más larga deja 2 px de sobra, así que el límite real está cerca de
   420 y 480 lo cruza con margen. Lo mide, en los doce anchos,
   `node _herramientas/texto-en-tarjeta.mjs`. */
@media (max-width: 480px) {
	.sv-valores .sv-numeradas-fila {
		--sv-cols: 1;
	}
}

/* ── C11, variante acordeón (preguntas frecuentes) ──
   La misma rejilla y los mismos divisores de la lista con chevrons; cada
   pregunta es un <details> nativo, y el acordeón entero se dibuja con los
   tokens de la escala. El aire de cada fila sale del relleno del summary
   y de la respuesta: el item no pone relleno propio, y el borde de arriba
   lo pone la lista, una sola vez (los dos juntos dibujaban una línea de
   2 px donde el resto de la lista tiene 1). Lo mide, en el navegador,
   _herramientas/acordeon-escala.mjs. */
.sv-faq-items {
	border-top: 1px solid var(--wp--preset--color--borde);
}

.sv-faq-item {
	border-bottom: 1px solid var(--wp--preset--color--borde);
}

.sv-faq-pregunta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--xl);
	padding: var(--wp--preset--spacing--xxl) var(--wp--preset--spacing--md);
	list-style: none;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--bajada);
	line-height: 1.2;
	color: var(--wp--preset--color--tinta);
}

.sv-faq-pregunta::-webkit-details-marker {
	display: none;
}

.sv-faq-pregunta:hover span {
	text-decoration: underline;
}

.sv-faq-pregunta:focus-visible {
	outline: 2px solid var(--wp--preset--color--azul-primario);
	outline-offset: -2px;
}

.sv-faq-item[open] .sv-lista-chevron {
	transform: rotate(90deg);
}

.sv-faq-respuesta {
	max-width: 46em;
	margin: 0;
	padding: 0 var(--wp--preset--spacing--md) var(--wp--preset--spacing--xxl);
	font-size: var(--wp--preset--font-size--texto);
	line-height: 1.6;
	color: var(--wp--preset--color--azul-profundo);
}

/* ── /servicios/: las familias en grande ──
   Es la sección de servicios de la página, no un cierre bajo una
   banda como en el home: arriba lleva el aire de una sección. */
.sv-pagina-servicios .sv-familias {
	padding-top: var(--wp--preset--spacing--xxxxxl);
}

/* ── /equipo/: «Quiénes somos» (la grilla de C9, §3.1) ── */
.sv-quienes-somos {
	padding: var(--wp--preset--spacing--xxxxxl) var(--wp--preset--spacing--margen);
	scroll-margin-top: var(--wp--custom--header-alto);
}

/* ── /agenda/: directo al widget (ESPEC §5.9) ──
   Sin hero ni contenedor: el espacio bajo el header fijo lo pone
   esta sección, porque acá no hay hero que lo limpie. */
.sv-agenda-pagina {
	padding: calc(var(--wp--custom--header-alto) + var(--wp--preset--spacing--xxxxl)) var(--wp--preset--spacing--margen) var(--wp--preset--spacing--xxxxxl);
}

/* La línea gris bajo el widget (C13), acá y en la landing. */
.sv-nota-reagendar {
	margin: var(--wp--preset--spacing--lg) 0 0;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--texto);
	line-height: 1.45;
	color: var(--wp--preset--color--texto-secundario);
}

.sv-nota-reagendar a {
	color: var(--wp--preset--color--azul-profundo);
}

@media (prefers-reduced-motion: reduce) {
	.sv-faq-item .sv-lista-chevron {
		transition: none;
	}
}

/* ═══════════════════════════════════════════════════════════
   Enfoque, Recursos y lectura (Etapa 4 · parte 9, ESPEC §5.6
   y §5.7).

   C17 círculo de Enfoque · C7 con pilares translúcidos ·
   C16 esqueleto de lectura (el artículo, y desde la parte 10 los
   legales y las páginas simples).

   El marcado vive en inc/componentes.php; cada página solo pone
   sus textos.

   La geometría de C17 es la de la zona 5 de
   _herramientas/pruebas/fixtures/composiciones-blob.html, que es
   contra la que se midió el contraste de la composición
   circulo-enfoque. Los dos topes que esa página tenía más bajos
   que la fórmula (alto de la sección y aire superior) suben acá
   al máximo de ESPEC §1, para que el círculo no quede recortado
   a 2560 px; la página de prueba se actualizó igual. A 375, 768
   y 1280 px no cambia nada; a 1920 px, 10 px de alto.
   ═══════════════════════════════════════════════════════════ */
:root {
	/* C17, medido en el wireframe «enfoque»: círculo de 900 de
	   diámetro y sección de 1190 de alto en la mesa de 1920. */
	--sv-circulo-diametro: clamp(300px, 46.875vw, 1200px);
	--sv-circulo-alto: clamp(620px, 61.9792vw, 1586.67px);
	--sv-circulo-aire: clamp(120px, 10.4167vw, 266.67px);
}

/* ── C17 · Círculo de Enfoque (propuesta de Ki) ──
   Sin contenedor: el círculo es un fondo absoluto y el texto va
   encima. Es la única zona del sitio con texto oscuro sobre un
   blob, así que acá no hay píldora ni velo. */
.sv-circulo {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	box-sizing: border-box;
	min-height: var(--sv-circulo-alto);
	padding: var(--sv-circulo-aire) var(--wp--preset--spacing--margen) var(--wp--preset--spacing--xxxxxl);
	overflow: hidden;
	font-family: var(--wp--preset--font-family--montserrat);
}

.sv-circulo-blob {
	position: absolute;
	left: 50%;
	top: 55%;
	transform: translate(-50%, -50%);
	width: var(--sv-circulo-diametro);
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--wp--preset--color--gris-alterno);
	background-position: center;
	background-size: cover;
}

.sv-circulo-titulo {
	position: relative;
	grid-column: 1 / -1;
	align-self: end;
	margin: 0 0 0 12%;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--titulo-hero);
	font-weight: 400;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--wp--preset--color--tinta);
}

.sv-circulo-der {
	position: relative;
	grid-column: 2;
	font-size: var(--wp--preset--font-size--bajada);
	line-height: 1.35;
	color: var(--wp--preset--color--texto-secundario);
}

.sv-circulo-parrafo {
	margin: 0;
	max-width: 24em;
}

.sv-circulo-frase {
	margin: var(--wp--preset--spacing--xxxxl) 0 0;
	font-size: var(--wp--preset--font-size--titulo-seccion);
	line-height: 1.2;
	color: var(--wp--preset--color--tinta);
}

.sv-circulo-izq {
	position: relative;
	grid-column: 1;
	grid-row: 3;
	margin-left: 12%;
	font-size: var(--wp--preset--font-size--texto);
}

/* ≤ 800 px: apilado, con el círculo detrás del título (ESPEC C17). */
@media (max-width: 800px) {
	.sv-circulo {
		grid-template-columns: minmax(0, 1fr);
	}

	.sv-circulo-titulo {
		margin-left: 0;
	}

	.sv-circulo-der,
	.sv-circulo-izq {
		grid-column: 1;
		grid-row: auto;
		margin-left: 0;
		margin-top: var(--wp--preset--spacing--xxl);
	}

	.sv-circulo-blob {
		top: 32%;
	}
}

/* ── C7 con pilares translúcidos (C8) ──
   El título grande va en blanco sobre el blob; el texto chico no,
   que para eso están las tarjetas crema al 82 % (ESPEC C7). */
.sv-pilares-banda {
	box-sizing: border-box;
	background-color: var(--wp--preset--color--azul-profundo);
	background-image: var(--sv-banda-fondo);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	font-family: var(--wp--preset--font-family--montserrat);
	scroll-margin-top: var(--wp--custom--header-alto);
}

.sv-pilares-banda--ancha {
	padding: var(--wp--preset--spacing--xxxxxl) var(--wp--preset--spacing--margen);
	text-align: center;
}

.sv-pilares-banda--inset {
	margin: var(--wp--preset--spacing--xxxxxl) var(--wp--preset--spacing--margen);
	padding: var(--wp--preset--spacing--xxxxl);
	border-radius: var(--wp--preset--border-radius--banda);
}

.sv-pilares-banda-titulo {
	margin: 0 0 var(--wp--preset--spacing--xxxl);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--titulo-seccion);
	font-weight: 400;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
}

.sv-pilares-banda--inset .sv-pilares-banda-titulo {
	max-width: 16em;
}

.sv-pilares-banda-fila {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--xl);
	text-align: left;
}

.sv-pilar-banda {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--xxl);
	border-radius: var(--wp--preset--border-radius--banda);
	background: rgb(254 251 247 / 82%);
	font-size: var(--wp--preset--font-size--texto);
	line-height: 1.45;
	color: var(--wp--preset--color--azul-profundo);
}

.sv-pilar-banda-titulo {
	margin: 0 0 var(--wp--preset--spacing--sm);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--bajada);
	font-weight: 400;
	line-height: 1.2;
	color: var(--wp--preset--color--tinta);
}

.sv-pilar-banda-linea {
	margin: 0;
}

@media (max-width: 900px) {
	.sv-pilares-banda-fila {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── C16 · Esqueleto de lectura ──
   Sin contenedor: el índice a la izquierda y el texto ancho a la
   derecha. La página no tiene hero, así que el espacio bajo el
   header fijo lo pone esta sección (igual que /agenda/), y el
   aire del final es parte del diseño (ESPEC C16). */
.sv-lectura {
	display: grid;
	/* La proporción del wireframe: el índice se lleva una parte y el
	   texto 2,2 — así los dos escalan con el ancho, sin número fijo. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
	column-gap: var(--wp--preset--spacing--xxxxl);
	align-items: start;
	padding: calc(var(--wp--custom--header-alto) + var(--wp--preset--spacing--xxxxxl)) var(--wp--preset--spacing--margen) calc(var(--wp--preset--spacing--xxxxxl) * 2);
	font-family: var(--wp--preset--font-family--montserrat);
	color: var(--wp--preset--color--texto-secundario);
}

.sv-lectura-indice {
	position: sticky;
	top: calc(var(--wp--custom--header-alto) + var(--wp--preset--spacing--lg));
	align-self: start;
	font-size: var(--wp--preset--font-size--texto);
}

.sv-lectura-nota {
	margin: 0 0 var(--wp--preset--spacing--md);
	font-size: var(--wp--preset--font-size--texto);
	line-height: 1.45;
	color: var(--wp--preset--color--texto-secundario);
}

.sv-lectura-indice-titulo {
	margin: 0 0 var(--wp--preset--spacing--md);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--texto);
	font-weight: 500;
	line-height: 1.35;
	text-transform: none;
	letter-spacing: 0;
	color: var(--wp--preset--color--tinta);
}

/* Sobre 800 px la píldora no existe: el <summary> se oculta y la
   lista se ve siempre, esté el <details> abierto o cerrado. */
.sv-lectura-actual {
	display: none;
}

.sv-lectura-items {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--wp--preset--color--borde-suave);
}

.sv-lectura-items li {
	margin: 0;
}

.sv-lectura-enlace {
	display: block;
	padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--sm);
	border-bottom: 1px solid var(--wp--preset--color--borde-suave);
	font-size: var(--wp--preset--font-size--texto);
	line-height: 1.35;
	text-decoration: none;
	color: var(--wp--preset--color--azul-profundo);
}

.sv-lectura-enlace:hover,
.sv-lectura-enlace:focus-visible {
	text-decoration: underline;
}

.sv-lectura-enlace--actual {
	font-weight: 600;
	color: var(--wp--preset--color--tinta);
}

.sv-lectura-texto {
	max-width: 62em;
	font-size: var(--wp--preset--font-size--texto);
	line-height: 1.75;
	color: var(--wp--preset--color--texto-secundario);
}

.sv-lectura-titulo {
	margin: 0 0 var(--wp--preset--spacing--xxxl);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--titulo-seccion);
	font-weight: 400;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: 0;
	color: var(--wp--preset--color--tinta);
}

.sv-lectura-texto p {
	margin: 0 0 1.3em;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--texto);
	line-height: 1.75;
}

.sv-lectura-texto h2,
.sv-lectura-texto h3 {
	margin: 2.4em 0 0.9em;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--bajada);
	font-weight: 500;
	line-height: 1.25;
	text-transform: none;
	letter-spacing: 0;
	color: var(--wp--preset--color--tinta);
}

.sv-lectura-texto ul,
.sv-lectura-texto ol {
	margin: 0 0 1.3em;
	padding-left: 1.4em;
}

.sv-lectura-texto li {
	margin-bottom: 0.5em;
}

.sv-lectura-texto a {
	color: var(--wp--preset--color--azul-profundo);
}

.sv-lectura-texto table {
	width: 100%;
	margin-bottom: 1.3em;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--texto);
}

.sv-lectura-texto th,
.sv-lectura-texto td {
	padding: var(--wp--preset--spacing--md);
	border: 1px solid var(--wp--preset--color--borde-suave);
	text-align: left;
	vertical-align: top;
}

/* Una tabla de cuatro columnas no cabe bajo 600 px: se desplaza
   dentro de su propia caja en vez de sacarle una barra horizontal a
   la página entera (Etapa 4 · parte 10, la de cookies). El contenido
   no se pierde, así que el barrido lo acepta. */
.sv-lectura-tabla {
	margin-bottom: 1.3em;
	overflow-x: auto;
}

.sv-lectura-tabla table {
	margin-bottom: 0;
}

/* El «Resumen» con que abre cada documento legal, y los dos filetes
   que lo separan del resto. Los trae el .md y no se tocan: acá solo
   se les da el tono del sitio (PROPUESTO, parte 10: ESPEC §5.8 no
   dice nada de ninguno de los dos). */
.sv-lectura-texto blockquote {
	margin: 0 0 1.3em;
	padding-left: var(--wp--preset--spacing--xl);
	border-left: 2px solid var(--wp--preset--color--azul-profundo);
	color: var(--wp--preset--color--tinta);
}

.sv-lectura-texto blockquote p:last-child {
	margin-bottom: 0;
}

.sv-lectura-texto hr {
	height: 0;
	margin: var(--wp--preset--spacing--xxl) 0;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--borde-suave);
}

/* ≤ 800 px: el índice pasa a una píldora plegable arriba que
   muestra el documento actual (ESPEC C16). */
@media (max-width: 800px) {
	.sv-lectura {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--wp--preset--spacing--xxxl);
	}

	.sv-lectura-indice {
		position: static;
	}

	.sv-lectura-indice-titulo {
		margin-bottom: var(--wp--preset--spacing--sm);
	}

	/* Con píldora, el rótulo del índice sobra: la píldora ya dice
	   qué documento es. */
	.sv-lectura-indice:has(.sv-lectura-plegable--pildora) .sv-lectura-indice-titulo {
		display: none;
	}

	.sv-lectura-plegable--pildora .sv-lectura-actual {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--md);
		padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--xl);
		border: 1px solid var(--wp--preset--color--borde-suave);
		border-radius: var(--wp--preset--border-radius--pill);
		font-weight: 500;
		line-height: 1.3;
		color: var(--wp--preset--color--tinta);
		cursor: pointer;
		list-style: none;
	}

	.sv-lectura-actual::-webkit-details-marker {
		display: none;
	}

	.sv-lectura-plegable--pildora .sv-lectura-actual::after {
		content: "";
		flex: 0 0 auto;
		width: 0.5em;
		height: 0.5em;
		margin-top: -0.25em;
		border-right: 1px solid currentcolor;
		border-bottom: 1px solid currentcolor;
		transform: rotate(45deg);
	}

	.sv-lectura-plegable--pildora[open] .sv-lectura-actual::after {
		margin-top: 0.25em;
		transform: rotate(-135deg);
	}

	.sv-lectura-plegable--pildora:not([open]) .sv-lectura-items {
		display: none;
	}

	.sv-lectura-plegable--pildora .sv-lectura-items {
		margin-top: var(--wp--preset--spacing--md);
	}
}

/* ── /recursos/: C4 y la lista completa (ESPEC §5.7) ──
   La lista es la página entera, no el cierre de una sección con
   otras cosas encima: se queda con el aire del final. */
.sv-pagina-recursos .sv-lista {
	padding-bottom: calc(var(--wp--preset--spacing--xxxxxl) * 2);
}

/* ═══════════════════════════════════════════════════════════
   Landing de servicio (Etapa 4 · parte 11, ESPEC §5.3).

   C5 hero con foto y velo · C12 franja de datos · C6 collage sin
   título · C13 la reserva (o el formulario de organizaciones) ·
   C8 etapas · C7 inset con los pilares · C10 quienes atienden el
   servicio · C11 acordeón.

   El marcado vive en inc/landing.php y en inc/componentes.php;
   cada patterns/servicio-*.php solo pone sus datos.
   ═══════════════════════════════════════════════════════════ */

/* ── C5 · Hero con foto del servicio ──
   La foto es el LCP de la página (investigación §4): va como <img>
   con prioridad alta, no como fondo. El velo es un hermano, así
   que el título se lee aunque la foto todavía no haya cargado. */
.sv-hero-landing .sv-hero-foto,
.sv-hero-landing .sv-hero-velo {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: block;
	width: 100%;
	height: 100%;
}

/* El <picture> (cuando la foto trae recorte de móvil) no dibuja caja
   propia: el que se posiciona sigue siendo el <img> de arriba. */
.sv-hero-landing picture {
	display: contents;
}

/* El encuadre lo pone cada landing en --sv-hero-foco (sv_hero_blob()):
   depende de dónde quedan las personas en su foto, y el contenedor
   pasa de 0,649:1 a 375 px a 3,31:1 a 2560 px —medido, no supuesto—,
   así que el recorte se mueve con él. */
.sv-hero-landing .sv-hero-foto {
	object-fit: cover;
	object-position: var(--sv-hero-foco, 50% 50%);
}

/* Bajo 768 px manda el recorte de móvil (el <source> del <picture>)
   con su propio foco: el mismo valor no sirve para una franja ancha
   y para un vertical. */
@media (max-width: 767px) {
	.sv-hero-landing .sv-hero-foto {
		object-position: var(--sv-hero-foco-movil, var(--sv-hero-foco, 50% 50%));
	}
}

/* El alto mínimo propio de la zona del título (clamp(200px, 15.625vw,
   400px)) existía porque la barra de bajada se sumaba encima y a 375 px
   se comía la foto. Sin barra (Ki, 2026-09-24) la cabeza es el hero
   entero, y --sv-hero-interior-alto (280 a 640) manda siempre sobre
   aquel mínimo: se retira en vez de apuntalarse. */

/* De oscuro a transparente de izquierda a derecha (ESPEC C5). El velo
   existe solo para que el título se lea, y por eso es el más suave que
   deja el título sobre 4,5:1 en las diez landings, a 1280 y a 375 px.
   Medido con contraste.mjs (Etapa 4 · Heroes): con 66/55/45 % la peor
   —/psiquiatria-adultos/ a 375 px— cae a 4,43:1; con estas
   sube a 4,74:1 y la mejor llega a 7,4:1. La que manda no es ninguna
   de las tres con foto propia, sino una de las siete que todavía usan
   la foto provisional de su familia: si esas fotos cambian, hay que
   volver a medir acá.

   Gris oscuro neutro, sin tinte (Ki, 2026-09-24): antes era el tinta
   #002E25 al 82/68/56 %, que es verde azulado y teñía la foto. El gris
   no sale de la paleta de ESPEC §2 —que no tiene un neutro— y por eso
   vive acá, con su valor a la vista y en un solo lugar para las diez. */
.sv-hero-landing .sv-hero-velo {
	--sv-velo: 38 38 38;
	background: linear-gradient(
		90deg,
		rgb(var(--sv-velo) / 70%) 0%,
		rgb(var(--sv-velo) / 58%) 45%,
		rgb(var(--sv-velo) / 48%) 100%
	);
}

/* ── C12 · Franja de datos ──
   4 celdas con divisores; 2 × 2 bajo 900 y una columna bajo 480
   (ESPEC C12). Los divisores salen del borde izquierdo de cada
   celda, así que no hay que contar cuántas hay. */
.sv-datos {
	padding: var(--wp--preset--spacing--xxxxl) var(--wp--preset--spacing--margen) 0;
	font-family: var(--wp--preset--font-family--montserrat);
	color: var(--wp--preset--color--azul-profundo);
	scroll-margin-top: var(--wp--custom--header-alto);
}

.sv-datos-fila {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	border-block: 1px solid var(--wp--preset--color--borde-suave);
}

.sv-dato {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--xxl) var(--wp--preset--spacing--xl);
	border-left: 1px solid var(--wp--preset--color--borde-suave);
}

.sv-dato:first-child {
	border-left: 0;
	padding-left: 0;
}

.sv-dato-rotulo {
	margin: 0 0 var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--texto);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--azul-primario);
}

.sv-dato-texto {
	margin: 0;
	font-size: var(--wp--preset--font-size--texto);
	line-height: 1.45;
}

.sv-dato-enlace {
	color: var(--wp--preset--color--azul-primario);
}

@media (max-width: 900px) {
	.sv-datos-fila {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sv-dato:nth-child(odd) {
		border-left: 0;
		padding-left: 0;
	}

	.sv-dato:nth-child(n + 3) {
		border-top: 1px solid var(--wp--preset--color--borde-suave);
	}
}

@media (max-width: 480px) {
	.sv-datos-fila {
		grid-template-columns: minmax(0, 1fr);
	}

	.sv-dato {
		border-left: 0;
		padding-left: 0;
	}

	.sv-dato + .sv-dato {
		border-top: 1px solid var(--wp--preset--color--borde-suave);
	}
}

/* ── C6 · El collage de la landing, sin título ──
   El wireframe «landing» no le pone título a este bloque: el
   collage arranca arriba de todo, a la altura del primer párrafo. */
.sv-mirada--sin-titulo .sv-collage {
	margin-top: 0;
}

/* ── C13 · La reserva, dentro de la página ──
   Sin remarketing en el rubro (investigación §2), la reserva tiene
   que ocurrir en esta misma visita: el widget va acá, no detrás de
   un enlace a /agenda/. */
.sv-landing-agenda {
	padding: var(--wp--preset--spacing--xxxxxl) var(--wp--preset--spacing--margen);
	scroll-margin-top: var(--wp--custom--header-alto);
}

/* ── C7 · El texto de la banda inset ──
   Sobre un blob, en blanco va solo el título grande (C7): este
   texto va en la barra crema translúcida, como las tarjetas. */
.sv-pilares-banda-texto {
	box-sizing: border-box;
	max-width: 42em;
	margin: calc(0px - var(--wp--preset--spacing--xxl)) 0 var(--wp--preset--spacing--xxxl);
	padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--xxl);
	border-radius: var(--wp--preset--border-radius--banda);
	background: rgb(254 251 247 / 82%);
	font-size: var(--wp--preset--font-size--texto);
	line-height: 1.45;
	color: var(--wp--preset--color--azul-profundo);
}

/* ── C10 · Quiénes te acompañan, sobre crema ──
   La misma sección del home, sin la banda de blob (ESPEC §5.3:
   «sobre crema, solo quienes atienden el servicio, sin bajada»). */
.sv-quienes-servicio {
	padding: var(--wp--preset--spacing--xxxxxl) var(--wp--preset--spacing--margen);
	text-align: center;
	scroll-margin-top: var(--wp--custom--header-alto);
}

.sv-quienes-servicio-boton {
	margin: var(--wp--preset--spacing--xxxxl) 0 0;
	text-align: center;
	font-size: var(--wp--preset--font-size--bajada);
}

/* ── El formulario de organizaciones (C13, variante) ── */
.sv-formulario {
	padding: var(--wp--preset--spacing--xxxxxl) var(--wp--preset--spacing--margen);
	font-family: var(--wp--preset--font-family--montserrat);
	color: var(--wp--preset--color--azul-profundo);
	scroll-margin-top: var(--wp--custom--header-alto);
}

.sv-formulario-campos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--xl);
	max-width: 48em;
}

.sv-campo {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
	margin: 0;
	font-size: var(--wp--preset--font-size--texto);
}

.sv-campo--ancho,
.sv-formulario-boton {
	grid-column: 1 / -1;
}

.sv-campo label {
	font-weight: 500;
}

.sv-campo input,
.sv-campo textarea {
	box-sizing: border-box;
	width: 100%;
	padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
	border: 1px solid var(--wp--preset--color--borde-suave);
	border-radius: var(--wp--preset--border-radius--banda);
	background: var(--wp--preset--color--base);
	font-family: inherit;
	font-size: inherit;
	line-height: 1.45;
	color: inherit;
}

.sv-campo textarea {
	resize: vertical;
}

.sv-campo input:focus-visible,
.sv-campo textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--azul-primario);
	outline-offset: 2px;
}

.sv-campo-error,
.sv-formulario-error {
	color: var(--wp--preset--color--azul-profundo);
	font-weight: 600;
}

.sv-formulario-error {
	margin: 0 0 var(--wp--preset--spacing--xl);
}

.sv-formulario-listo,
.sv-formulario-nota {
	margin: var(--wp--preset--spacing--xl) 0 0;
	max-width: 42em;
	font-size: var(--wp--preset--font-size--texto);
	line-height: 1.45;
}

.sv-formulario-listo {
	margin-top: 0;
	font-size: var(--wp--preset--font-size--bajada);
}

.sv-formulario-nota a {
	color: var(--wp--preset--color--azul-primario);
}

.sv-formulario-boton {
	margin: 0;
}

.sv-formulario-boton .sv-boton {
	border: 0;
	cursor: pointer;
	font-family: inherit;
}

/* El campo trampa: existe en el HTML y no se ve ni se tabula. No
   va con display:none —algunos bots lo saltan— sino fuera de la
   vista, en una caja de 1 px. */
.sv-trampa {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (max-width: 700px) {
	.sv-formulario-campos {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ═══════════════════════════════════════════════════════════
   Consentimiento de cookies (Etapa 5 · parte 1, ESPEC §1 y §2)

   Complianz dibuja su aviso con sus propias medidas en píxeles fijos y su
   propia paleta. Acá se le pasan los tokens del sitio. Dos detalles del
   mecanismo, porque sin ellos esto no funciona:

   - **Las variables van en `.cmplz-cookiebanner`, no en `:root`.** El
     complemento las define en `:root` desde una hoja que se imprime DESPUÉS
     de esta (su CSS sale en `wp_head` a prioridad 10; las hojas encoladas
     salen antes), así que en `:root` le ganaría él. Definidas en el propio
     elemento, ganan siempre: una variable se resuelve desde el ancestro más
     cercano que la declare.
   - **Lo que no es una variable se sobreescribe con la clase repetida**
     (`.cmplz-cookiebanner.cmplz-cookiebanner`), por la misma razón de orden.

   Y lo que decide la posición: **bajo 768 px el botón flotante de WhatsApp es
   fijo abajo a la derecha** (56 px + 16 de margen = 72 px de alto ocupado).
   El aviso de fábrica va pegado al borde inferior y a todo el ancho, o sea
   justo encima de ese botón: acá se levanta a 88 px del borde y se deja como
   una tarjeta con margen, que además es lo que ya hace en escritorio.
   ═══════════════════════════════════════════════════════════ */

.cmplz-cookiebanner,
.cmplz-manage-consent-container {
	--cmplz_text_font_size: var(--wp--preset--font-size--texto);
	--cmplz_link_font_size: var(--wp--preset--font-size--texto);
	--cmplz_button_font_size: var(--wp--preset--font-size--texto);
	--cmplz_category_body_font_size: var(--wp--preset--font-size--texto);
	--cmplz_title_font_size: var(--wp--preset--font-size--marca);
	--cmplz_category_header_title_font_size: var(--wp--preset--font-size--texto);
	--cmplz_category_header_active_font_size: var(--wp--preset--font-size--menu);
	/* De fábrica es `green`, un color que no existe en el sistema. */
	--cmplz_category_header_always_active_color: var(--wp--preset--color--azul-profundo);
	--cmplz_banner_margin: var(--wp--preset--spacing--lg);
	font-family: var(--wp--preset--font-family--montserrat);
}

/* El cuerpo del sitio es Lora; el aviso es interfaz, como el header y el menú. */
.cmplz-cookiebanner.cmplz-cookiebanner,
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-title,
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-message,
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-btn,
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-link,
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-category-title,
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-description {
	font-family: var(--wp--preset--font-family--montserrat);
}

.cmplz-cookiebanner.cmplz-cookiebanner {
	padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--xxl);
	left: var(--wp--preset--spacing--xl);
	bottom: var(--wp--preset--spacing--xl);
}

.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-divider {
	margin-inline: calc(-1 * var(--wp--preset--spacing--xxl));
}

/* Botones: alto proporcional con piso de 44 px, que es el mínimo cómodo para
   el dedo, y el mismo para los tres — rechazar cuesta lo mismo que aceptar
   (política de cookies §4). */
.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
	min-height: clamp(44px, 2.8646vw, 73.33px);
	font-weight: 500;
	letter-spacing: 0.01em;
}

.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-title {
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--tinta);
}

.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-categories .cmplz-category {
	background-color: var(--wp--preset--color--gris-alterno);
	border-radius: var(--wp--preset--spacing--lg);
}

/* Foco visible, con el mismo tratamiento que el resto del sitio. */
.cmplz-cookiebanner .cmplz-btn:focus-visible,
.cmplz-cookiebanner .cmplz-link:focus-visible,
.cmplz-cookiebanner .cmplz-category-toggle:focus-visible,
.sv-footer-cookies:focus-visible {
	outline: 2px solid var(--wp--preset--color--azul-primario);
	outline-offset: 3px;
}

@media (max-width: 768px) {
	.cmplz-cookiebanner.cmplz-cookiebanner {
		left: var(--wp--preset--spacing--xl);
		right: var(--wp--preset--spacing--xl);
		width: auto;
		/* 56 px del botón de WhatsApp + 16 de su margen + 16 de aire. */
		bottom: 88px;
		/* `dvh` y no `vh`: en Safari, `100vh` es el alto con las barras
		   ESCONDIDAS, así que con las barras a la vista este tope quedaba
		   más alto que la pantalla y el aviso se salía por arriba (iPhone SE
		   de Ki, 2026-10-01). `vh` queda de respaldo para quien no tenga
		   `dvh`. Lo mide `_herramientas/aviso-desplegado.mjs`. */
		max-height: calc(100vh - 104px);
		max-height: calc(100dvh - 104px);
	}

	/* El complemento le pone al cuerpo del aviso `min-width: 300px` desde los
	   350 px de pantalla, pensando en un aviso pegado a los bordes. Con el
	   aviso hecho tarjeta —32 px de margen y 40 de relleno— eso no cabe: a
	   360 px el contenido quiere 300 y tiene 286, y el aviso se desplaza en
	   horizontal por dentro. Medido a los doce anchos de ESPEC §1.5. */
	.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-body {
		min-width: 0;
	}
}

/* En el celular, el aviso compacto que aprobó Ki (2026-10-01). Con los tres
   botones apilados a todo el ancho y el texto a 15 px ocupaba el 92 % de un
   iPhone SE y se salía por arriba. Ahora:

   - «Rechazar», «Elegir» y «Aceptar» en UNA fila, en ese orden y del mismo
     tamaño: rechazar sigue costando lo mismo que aceptar. El orden es visual;
     el del teclado sigue siendo el del complemento (Aceptar, Rechazar,
     Elegir), que solo cambia tocando su HTML.
   - Las dos políticas en la línea de abajo, más chicas.
   - Texto y botones a 13 px y título a 15. **El texto no se acorta:** es el
     aprobado, y cabe entero sin desplazar desde 320 × 568.
   - Si alguna vez no cupiera, se desplaza el texto y nunca los botones: la
     fila del cuerpo es la única que cede (`minmax(0, 1fr)`).

   Las clases que se reubican con la grilla son de Complianz 7.5.5; si una
   versión futura las cambia, `aviso-desplegado.mjs` lo agarra midiendo la
   fila de botones en tres teléfonos. */
@media (max-width: 600px) {
	.cmplz-cookiebanner.cmplz-cookiebanner {
		--cmplz_text_font_size: var(--wp--preset--font-size--x-small);
		--cmplz_button_font_size: var(--wp--preset--font-size--x-small);
		--cmplz_link_font_size: 0.75rem;
		--cmplz_title_font_size: 0.9375rem;
		left: var(--wp--preset--spacing--lg);
		right: var(--wp--preset--spacing--lg);
		padding: var(--wp--preset--spacing--xl);
		gap: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-rows: auto minmax(0, 1fr) auto auto;
		overflow: hidden;
	}

	.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-divider {
		display: none;
	}

	.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-header,
	.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-body,
	.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-documents {
		grid-column: 1 / -1;
		margin: 0;
	}

	.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-body {
		min-height: 0;
		overflow-y: auto;
	}

	.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-message {
		line-height: 1.5;
	}

	/* Los tres botones pasan a ser celdas de la grilla del aviso. */
	.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons {
		display: contents;
	}

	.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
		width: 100%;
		min-height: 40px;
		height: auto;
		margin: 0;
		padding-inline: 4px;
		font-size: var(--cmplz_button_font_size);
	}

	.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-deny {
		grid-row: 3;
		grid-column: 1;
	}

	/* Al abrir «Elegir», ese botón se esconde y aparece «Guardar mi
	   elección» en su lugar. Sin ubicarlo, la grilla lo ponía encima de
	   «Aceptar». Es el único de los tres que no cabe en una línea. */
	.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-view-preferences,
	.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-save-preferences {
		grid-row: 3;
		grid-column: 2;
	}

	.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-save-preferences {
		white-space: normal;
		line-height: 1.2;
	}

	.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-accept {
		grid-row: 3;
		grid-column: 3;
	}

	.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-documents ul {
		justify-content: center;
		gap: var(--wp--preset--spacing--xl);
		margin: 0;
	}

	.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-documents .cmplz-link {
		font-size: var(--cmplz_link_font_size);
	}
}

/* Bajo 360 px la fila de tres no tiene aire: «Rechazar» tocaba su borde y las
   políticas se partían en dos líneas. */
@media (max-width: 359px) {
	.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
		padding-inline: 2px;
		letter-spacing: 0;
	}

	.cmplz-cookiebanner.cmplz-cookiebanner {
		left: var(--wp--preset--spacing--md);
		right: var(--wp--preset--spacing--md);
	}

	.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-documents ul {
		gap: var(--wp--preset--spacing--md);
	}

	.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-documents .cmplz-link {
		white-space: nowrap;
	}

	/* A 13 px se partía en tres líneas y los tres botones quedaban redondos. */
	.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-buttons .cmplz-save-preferences {
		font-size: 0.75rem;
	}
}

/* Bajo 425 px el complemento esconde el título del aviso para ahorrar alto.
   No se puede: el aviso es un `role="dialog"` y su `aria-labelledby` apunta
   justo a ese título, así que sin él el diálogo se queda sin nombre
   accesible. Se repone. */
@media (max-width: 425px) {
	.cmplz-cookiebanner.cmplz-cookiebanner .cmplz-header .cmplz-title {
		display: block;
	}
}

/* El enlace «Configuración de cookies» del pie (política de cookies §4). Es un
   botón porque abre un diálogo, y se ve como los demás enlaces de su columna. */
.sv-footer-cookies {
	appearance: none;
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
	font: inherit;
	line-height: inherit;
	text-align: start;
	color: var(--wp--preset--color--azul-profundo);
	cursor: pointer;
}

.sv-footer-cookies:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* ═══════════════════════════════════════════════════════════
   Landing de Terapia de pareja (/terapia-de-pareja/, con noindex;
   hilo landing-parejas, 2026-09-30).

   Diseño de Benjamín (Landing-page-parejas, v3) ajustado por Ki al
   resto del sitio: header y relación con el hero como siempre,
   tarjetas grises, títulos de sección en mayúsculas y sin
   antetítulos salvo el del hero. El marcado vive en
   inc/landing-parejas.php; lo nuevo que podría reutilizarse (el
   hero de dos columnas) en inc/componentes.php.
   ═══════════════════════════════════════════════════════════ */

/* Objetivos táctiles de 48 px o más en toda la página (DEV-08 del
   handoff). Los botones del sitio miden menos en su mínimo de letra;
   acá se les pone piso, sin cambiarlos en las demás páginas. */
.sv-pagina-landing-parejas .sv-boton {
	min-height: 48px;
}

/* ── C4 a dos columnas (sv_hero_columnas()) ──
   Es C4 —blob quieto, margen y esquinas del hero, header fijo
   encima— con el texto a la izquierda y la foto a la derecha. No
   tiene alto fijo: crece con lo que lleva (Ki, 2026-09-30). */
.sv-hero-columnas {
	display: grid;
	grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
	align-items: center;
	column-gap: var(--wp--preset--spacing--xxxxl);
	row-gap: var(--wp--preset--spacing--xxxl);
	/* Arriba, lo justo para que el header no tape el antetítulo; abajo, un
	   paso de la escala. Con el aire de antes la franja de datos quedaba
	   cortada en pantallas 16:9 (Ki, 2026-10-01: «que la banda de abajo no
	   quede cortada»); lo mide _herramientas/pliegue-landing.mjs. */
	padding:
		calc(var(--wp--custom--header-alto) + var(--wp--preset--spacing--xl))
		calc(var(--wp--preset--spacing--margen) - var(--wp--custom--hero-edge-gap))
		var(--wp--preset--spacing--xxl);
	font-family: var(--wp--preset--font-family--montserrat);
	color: var(--wp--preset--color--base);
}

.sv-hero-columnas-antetitulo {
	margin: 0 0 var(--wp--preset--spacing--xl);
	font-size: var(--wp--preset--font-size--texto);
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

.sv-hero-columnas-titulo {
	margin: 0;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--titulo-hero);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: 0;
	color: var(--wp--preset--color--base);
}

.sv-hero-columnas-bajada {
	max-width: 30em;
	margin: var(--wp--preset--spacing--xxl) 0 0;
	font-size: var(--wp--preset--font-size--bajada);
	line-height: 1.45;
}

.sv-hero-columnas-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--md);
	margin-top: var(--wp--preset--spacing--xxxl);
	font-size: var(--wp--preset--font-size--texto);
}

.sv-hero-columnas-nota {
	margin: var(--wp--preset--spacing--xl) 0 0;
	font-size: var(--wp--preset--font-size--texto);
	line-height: 1.45;
}

.sv-hero-columnas-foto {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1078 / 941;
	object-fit: cover;
	border-radius: var(--wp--preset--border-radius--banda);
}

@media (max-width: 800px) {
	.sv-hero-columnas {
		grid-template-columns: minmax(0, 1fr);
		padding-top: calc(var(--wp--custom--header-alto) + var(--wp--preset--spacing--xxl));
	}
}

/* En móvil, un solo llamado en el hero y a todo el ancho (validación
   UX del diseño: «sin CTA secundario en hero móvil»). «Conocer
   profesionales» sigue en escritorio; bajo 700 px el equipo está a
   unos pasos más abajo. */
@media (max-width: 700px) {
	.sv-hero-parejas .sv-boton--claro {
		display: none;
	}

	.sv-hero-parejas .sv-boton--oro {
		flex: 1 1 100%;
	}
}

/* «Conocer profesionales» va sobre el blob oscuro del hero: con el crema
   translúcido de .sv-boton--claro, el azul del texto quedaba en 2,5:1
   (medido con ajustar-blobs.mjs). Opaco, sobre crema, llega a 9:1. */
.sv-hero-parejas .sv-boton--claro {
	background: var(--wp--preset--color--base);
}

/* ── Situaciones: el bloque de Benjamín (Ki, 2026-10-01) ──
   Fotos a la izquierda y texto a la derecha, centrados en alto y con
   poco aire: acá los textos son cortos, y el collage alto del home los
   dejaba flotando. ≤ 800 px, una columna con las fotos arriba. */
.sv-situaciones-bloque {
	display: grid;
	grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
	align-items: center;
	gap: var(--wp--preset--spacing--xxxxl);
	padding: var(--wp--preset--spacing--xxxxl) var(--wp--preset--spacing--margen);
	font-family: var(--wp--preset--font-family--montserrat);
	color: var(--wp--preset--color--azul-profundo);
	scroll-margin-top: var(--wp--custom--header-alto);
}

/* Dos fotos lado a lado; la segunda, más baja y corrida hacia abajo,
   como en el diseño. */
.sv-situaciones-fotos {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
	gap: var(--wp--preset--spacing--lg);
}

.sv-situaciones-foto {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: var(--wp--preset--border-radius--banda);
}

.sv-situaciones-foto--1 {
	aspect-ratio: 5 / 6;
}

.sv-situaciones-foto--2 {
	aspect-ratio: 1 / 1;
	margin-top: 12%;
}

.sv-situaciones-titulo {
	margin: 0;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--titulo-seccion);
	font-weight: 400;
	line-height: 1.2;
	color: var(--wp--preset--color--tinta);
}

.sv-situaciones-parrafo {
	max-width: 40em;
	margin: var(--wp--preset--spacing--xl) 0 0;
	font-size: var(--wp--preset--font-size--texto);
	line-height: 1.6;
}

@media (max-width: 800px) {
	.sv-situaciones-bloque {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--xxl);
	}
}

/* Las situaciones: píldoras sin enlace —nombran, no llevan a ninguna
   parte—, en el verde claro del diseño de Benjamín (el pistacho de la
   paleta, aclarado con el crema). En móvil, una bajo otra. */
.sv-situaciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--md);
	margin: var(--wp--preset--spacing--xxl) 0 0;
	padding: 0;
	list-style: none;
}

.sv-situacion {
	box-sizing: border-box;
	padding: 0.6em 1.4em;
	border-radius: var(--wp--preset--border-radius--pill);
	background: color-mix(in srgb, var(--wp--preset--color--pistacho) 55%, var(--wp--preset--color--base));
	font-size: var(--wp--preset--font-size--texto);
	line-height: 1.3;
	color: var(--wp--preset--color--azul-profundo);
}

.sv-mas .sv-situaciones {
	margin-top: var(--wp--preset--spacing--md);
}

/* El botón que abre el resto de una lista plegable: un <summary> con
   aspecto de enlace y su signo, de 48 px de alto para el dedo. */
.sv-mas-boton {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	min-height: 48px;
	margin-top: var(--wp--preset--spacing--md);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--texto);
	color: var(--wp--preset--color--azul-primario);
	cursor: pointer;
	list-style: none;
}

.sv-mas-boton::-webkit-details-marker {
	display: none;
}

.sv-mas-boton::after {
	content: "+";
	font-size: 1.25em;
	line-height: 1;
}

.sv-mas[open] > .sv-mas-boton::after {
	content: "−";
}

.sv-mas-boton:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.sv-mas-boton:focus-visible {
	outline: 2px solid var(--wp--preset--color--azul-primario);
	outline-offset: 3px;
}

/* Sobre 700 px la lista se ve entera: el guion la abre y acá se
   esconde el botón (solo si el guion corrió; sin él, el botón queda). */
@media (min-width: 701px) {
	.sv-mas-js .sv-mas > .sv-mas-boton {
		display: none;
	}

	.sv-mas-js .sv-mas .sv-situaciones {
		margin-top: var(--wp--preset--spacing--md);
	}
}

@media (max-width: 700px) {
	.sv-situaciones {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Una línea bajo el título de sección («Un recorrido simple…»). Se
   acerca al título: es su bajada, no un párrafo aparte. */
.sv-seccion-bajada {
	max-width: 42em;
	margin: calc(0px - var(--wp--preset--spacing--xxl)) 0 var(--wp--preset--spacing--xxxl);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--texto);
	line-height: 1.45;
	color: var(--wp--preset--color--azul-profundo);
}

/* ── Quiénes los acompañan: tarjeta horizontal de profesional ──
   Foto a la izquierda y texto a la derecha, en el gris de tarjeta.
   Dos por fila; bajo 900 px, una. El radio es el de las bandas
   (40 en la mesa), no el 11 % de C9: en una tarjeta ancha ese 11 %
   daría 60 px o más (PROPUESTO). */
.sv-acompanan {
	padding: var(--wp--preset--spacing--xxxxxl) var(--wp--preset--spacing--margen);
	font-family: var(--wp--preset--font-family--montserrat);
	color: var(--wp--preset--color--azul-profundo);
	scroll-margin-top: var(--wp--custom--header-alto);
}

.sv-acompanan-fila {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--xl);
}

.sv-acompana {
	display: grid;
	grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
	align-items: start;
	gap: var(--wp--preset--spacing--xxl);
	padding: var(--wp--preset--spacing--xl);
	border-radius: var(--wp--preset--border-radius--banda);
	background: var(--wp--preset--color--borde-suave);
}

.sv-acompana-foto {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 20%;
	border-radius: calc(var(--wp--preset--border-radius--banda) * 0.7);
}

.sv-acompana-nombre {
	margin: var(--wp--preset--spacing--md) 0 0;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--bajada);
	font-weight: 400;
	line-height: 1.2;
	color: var(--wp--preset--color--tinta);
}

.sv-acompana-cargo {
	margin: var(--wp--preset--spacing--sm) 0 0;
	font-size: var(--wp--preset--font-size--texto);
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--azul-primario);
}

/* N° de Registro en la Superintendencia de Salud: chico y en gris, bajo el
   cargo (Ki, 2026-10-01). El gris de texto sobre el gris de tarjeta da 5,6:1. */
.sv-acompana-registro {
	margin: var(--wp--preset--spacing--sm) 0 0;
	font-size: var(--wp--preset--font-size--texto);
	line-height: 1.35;
	color: var(--wp--preset--color--texto-secundario);
}

.sv-acompana-linea {
	margin: var(--wp--preset--spacing--lg) 0 0;
	font-size: var(--wp--preset--font-size--texto);
	line-height: 1.5;
}

.sv-acompana-boton {
	margin: var(--wp--preset--spacing--xl) 0 0;
	font-size: var(--wp--preset--font-size--texto);
}

@media (max-width: 900px) {
	.sv-acompanan-fila {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 480px) {
	.sv-acompana {
		grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
		gap: var(--wp--preset--spacing--xl);
	}
}

/* ── Modalidad y valores (solo en esta landing: precios y Fonasa) ──
   Cuatro tarjetas grises en fila; 2 × 2 bajo 900 px; una bajo 480. */
.sv-valores-parejas,
.sv-calificacion {
	padding: var(--wp--preset--spacing--xxxxxl) var(--wp--preset--spacing--margen) 0;
	font-family: var(--wp--preset--font-family--montserrat);
	color: var(--wp--preset--color--azul-profundo);
	scroll-margin-top: var(--wp--custom--header-alto);
}

.sv-valores-fila {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--xl);
}

.sv-valor {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--xxl);
	border-radius: var(--wp--preset--border-radius--banda);
	background: var(--wp--preset--color--borde-suave);
}

.sv-valor-rotulo {
	margin: 0 0 var(--wp--preset--spacing--md);
	font-size: var(--wp--preset--font-size--texto);
	font-weight: 600;
	color: var(--wp--preset--color--azul-primario);
}

.sv-valor-texto {
	margin: 0;
	font-size: var(--wp--preset--font-size--texto);
	line-height: 1.45;
}

.sv-valor-precio {
	margin: 0;
	font-size: var(--wp--preset--font-size--titulo-seccion);
	font-weight: 400;
	line-height: 1.1;
	color: var(--wp--preset--color--tinta);
}

.sv-valor-unidad {
	font-size: var(--wp--preset--font-size--texto);
	color: var(--wp--preset--color--azul-profundo);
}

.sv-valor-nota {
	margin: var(--wp--preset--spacing--md) 0 0;
	font-size: var(--wp--preset--font-size--texto);
	line-height: 1.45;
}

@media (max-width: 900px) {
	.sv-valores-fila {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.sv-valores-fila {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── Calificación en Google ──
   Una tarjeta gris a lo ancho: promedio y estrellas a la izquierda,
   «Ver reseñas» a la derecha. Las estrellas van en el tinta del
   diseño de Benjamín y no en el oro de Testimonios: sobre el gris,
   el oro queda en 1,4:1 (PROPUESTO). Bajo 700 px, apilado. */
.sv-calificacion-caja {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--xl);
	padding: var(--wp--preset--spacing--xxl) var(--wp--preset--spacing--xxxl);
	border-radius: var(--wp--preset--border-radius--banda);
	background: var(--wp--preset--color--borde-suave);
}

.sv-calificacion-nota {
	display: flex;
	align-items: baseline;
	gap: 0.4em;
	margin: 0;
	color: var(--wp--preset--color--tinta);
}

.sv-calificacion-cifra {
	font-size: var(--wp--preset--font-size--titulo-seccion);
	line-height: 1;
}

.sv-calificacion-estrellas {
	font-size: var(--wp--preset--font-size--bajada);
	letter-spacing: 0.08em;
}

.sv-calificacion-rotulo {
	margin: var(--wp--preset--spacing--sm) 0 0;
	font-size: var(--wp--preset--font-size--texto);
	font-weight: 600;
}

.sv-calificacion-linea {
	margin: var(--wp--preset--spacing--sm) 0 0;
	font-size: var(--wp--preset--font-size--texto);
	line-height: 1.45;
}

.sv-calificacion-boton {
	margin: 0;
	flex: 0 0 auto;
	font-size: var(--wp--preset--font-size--texto);
}

@media (max-width: 700px) {
	.sv-calificacion-caja {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* El resto de las preguntas, dentro de su <details>: la misma lista. */
.sv-faq-mas > .sv-mas-boton {
	margin-top: var(--wp--preset--spacing--lg);
}

/* ── La frase del cierre en la landing (R7, Ki 2026-09-30: «armonizar
   mejor, tal vez achicar un poco la letra») ──
   «Una conversación distinta puede comenzar aquí» tiene 45 caracteres
   contra los 33 de «Tu primera sesión es el comienzo»: con la misma letra
   ocupaba 5 líneas a 375 px y 6 a 320, y estiraba la banda. Al 80 % y, en
   móvil, sin el corte forzado, ocupa lo mismo que la del resto del sitio
   (medido con el mismo guion en las dos páginas). */
.sv-landing-parejas .sv-cierre-titulo {
	font-size: calc(var(--wp--preset--font-size--titulo-hero) * 0.8);
}

@media (max-width: 600px) {
	.sv-landing-parejas .sv-cierre-titulo br {
		display: none;
	}
}

/* La franja de datos de la landing sube hacia el hero (Ki, 2026-10-01): con
   el aire de las demás landings quedaba bajo el pliegue en pantallas 16:9. */
.sv-datos-parejas {
	padding-top: var(--wp--preset--spacing--xl);
}