/*
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.0
Requires PHP: 7.2
Version: 1.8.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;
}

/* 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;
	/* Anula el "block gap" que WordPress inserta automáticamente entre
	   el template-part del header y el post-content (son hermanos en
	   el markup del template). Como el header es fixed y no ocupa
	   espacio real en el flujo, ese margen quedaba como un hueco vacío
	   sin ningún elemento visible que lo justificara — el gap real
	   hacia el header lo da el propio margen del hero (o el padding-top
	   en templates/page.html), no este. */
	margin-top: 0 !important;
}

/* Desde que .sv-scroll-bg se agregó como primer hijo de .wp-site-blocks
   (antes del header template-part, ver templates/front-page.html), el
   header dejó de ser el :first-child real — así que la regla global de
   WordPress que cancela el margin-block-start del primer hijo ya no lo
   alcanza. Su block-gap normal (1.2rem) volvió a aparecer y, como el
   header wrapper está vacío en el flujo (su contenido es fixed), ese
   margen colapsa hacia arriba y empuja TODO el sitio 19.2px hacia
   abajo — el hueco en blanco que se ve antes del header. .sv-scroll-bg
   también es fixed/sin altura real, así que cualquier cosa que venga
   justo después de él no debería tener gap propio. */
.sv-scroll-bg + .wp-block-template-part,
.sv-scroll-bg-inner + .wp-block-template-part {
	margin-block-start: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   SV Grid — anula los márgenes de "block gap" que WordPress
   inyecta entre hermanos en layout flow.

   WP genera globalmente:
     :where(.is-layout-flow) > *            { margin-block-start: 1.2rem }
     :where(.is-layout-flow) > :first-child { margin-block-start: 0 }

   Cuando un wp:group con layout "default" (= is-layout-flow) se
   convierte en `display: grid` desde acá, esos márgenes NO
   desaparecen: siguen aplicándose a los hijos 2..n, que en una
   grilla de columnas quedan desplazados hacia abajo respecto al
   primero. Ese es el motivo real de que "Cuerpo / Mente /
   Entorno" y el par título+párrafo se vieran desalineados.

   :where() tiene especificidad 0, así que una clase simple le
   gana sin necesidad de !important.

   CONVENCIÓN: cualquier contenedor de este archivo que pase a
   display:grid o display:flex sobre un wp:group DEBE agregarse
   a esta lista. ═══════════════════════════════════════════════ */
.sv-intro-grid > *,
.sv-bienestar-grid > *,
.sv-equipo-track > *,
.sv-biblioteca-grid > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ═══════════════════════════════════════════════════════════
   Tipografía global del sitio.

   Decisión de peso: Montserrat 500 para todos los títulos, en
   vez del 700 que tenía theme.json. El manual de marca
   (lenguaje-visual.md §4) prescribe "seminegrita a negrita para
   títulos", pero eso está anclado a las piezas de dato de
   LinkedIn, donde el contraste entre un numeral ultradelgado y
   un titular negrita es la firma tipográfica. Para el sitio web
   el mismo documento (§6.1) solo pide "jerarquía de Montserrat
   para títulos y Lora para bajadas", sin fijar peso — ahí está
   el margen que permite 500 sin contradecir el manual.

   El peso vive en theme.json (elements.heading.fontWeight), no
   acá, para que aplique también al editor de bloques. Esta
   sección solo agrega lo que theme.json no expresa bien:
   tracking por tamaño y medida de línea de lectura.
   ═══════════════════════════════════════════════════════════ */

/* 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;
}

/* Medida de línea de lectura: lenguaje-visual.md §6.2 pide
   "Lora en medida de línea cercana a 65 caracteres". 34em en
   Lora deja ~62-68 caracteres según el texto. Solo aplica a
   párrafos de cuerpo dentro de contenido, no a bajadas de
   sección centradas ni a texto de tarjetas. */
.sv-measure {
	max-width: 34em;
}

/* Etiquetas / eyebrows. Único lugar donde el sitio usa
   mayúsculas: categorías y etiquetas cortas. Peso 500 (no 700)
   para no reintroducir la negrita que se acaba de sacar. */
.sv-eyebrow {
	font-family: 'Montserrat', sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0;
}

/* Estilo de botón "Secundario" — sólido azul primario, texto sobre fondo claro (ver Sistema Visual, sección Componentes > Botones). */
.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);
}


/* Marcador de posición para fotos reales pendientes (equipo, hero, etc). */
.sv-image-slot {
	overflow: hidden;
}

/* whatsapp-clearance y header-clearance ya no viven acá: se
   movieron a theme.json → settings.custom (WordPress las expone
   como --wp--custom--whatsapp-clearance, --wp--custom--header-clearance).
   Son constantes de diseño del sitio completo, no implementación de
   un componente — un solo lugar editable en vez de dos bloques
   :root sueltos a 2000 líneas de distancia (ver
   SV_Flujo_Trabajo_Lecciones.md, Hito 1).

   El ancho de columna compartido por el sitio (antes
   --wp--custom--content-col, 1100px fijo) se retiró: era un token
   propio duplicando algo que WordPress ya expone nativamente.
   Ahora es theme.json → settings.layout.contentSize/wideSize
   ("min(80%, 1400px)", los dos iguales a propósito — un solo ancho
   para todo el sitio, sin distinguir texto/wide), que WordPress
   expone como var(--wp--style--global--content-size) y
   var(--wp--style--global--wide-size). Los bloques wp:group con
   layout:{"type":"constrained"} sin un contentSize propio ya lo
   heredan solos — no hace falta repetirlo por pattern (ver
   SV_Flujo_Trabajo_Lecciones.md, ajuste de anchos post-Hito 4). */

/* El 80% de arriba es proporcional al viewport a CUALQUIER ancho —
   en un teléfono de 375px de ancho da columnas de ~252px con
   ~61px de margen vacío a cada lado, mucho más de lo que el resto
   del sitio usa en mobile. .sv-full-section (la sección del home)
   ya trae 30px de padding lateral propio en mobile (ver la lista de
   secciones más abajo), así que acá no hace falta restar nada más
   — basta con quitar el 80% y usar el 100% del espacio que la
   sección ya dejó disponible. Como son custom properties, cualquier
   bloque que use var(--wp--style--global--content-size) (todos los
   wp:group con layout:constrained/wide) hereda el valor nuevo
   automáticamente, sin tocar cada pattern. */
@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);
	}
}

/* Grilla de la Biblioteca: las tarjetas ocupan solo su ancho real en vez de
   reservar columnas vacías cuando hay menos de 3 artículos publicados. */
.sv-biblioteca-grid .wp-block-post-template {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.sv-biblioteca-grid .wp-block-post-template > li {
	flex: 0 1 320px;
	list-style: none;
}

/* Grilla de servicios: 4 columnas fijas no colapsan solas en mobile
   (a diferencia de wp:columns, wp:group con layout "grid" no es responsive
   por defecto). Mobile-first: la mayoría del tráfico es móvil. */
@media (max-width: 960px) {
	.sv-servicios-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* En mobile las 8 tarjetas de servicio NO pasan a una columna: 8
   filas se pasaban ~677px de los 100svh de la sección y el
   overflow:hidden recortaba las últimas tarjetas. En dos columnas
   son 4 filas y entran. Se compacta la tarjeta en el mismo tramo
   para que quepan sin recortar copy aprobado. */
@media (max-width: 600px) {
	.sv-servicios-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px !important;
	}

	.sv-servicios-section {
		padding-top: max(var(--wp--preset--spacing--xxl), calc(var(--wp--custom--header-clearance) + 12px)) !important;
		padding-bottom: var(--wp--preset--spacing--xxl) !important;
	}

	/* Las tarjetas son wp:group con padding inline desde el bloque,
	   así que el override necesita !important. */
	.sv-servicios-grid > .wp-block-group {
		padding: 12px !important;
		border-radius: 14px !important;
	}

	/* El blockGap interno de la tarjeta (8px entre cada uno de sus
	   4 elementos) sumaba 24px por tarjeta y ~96px en las 4 filas.
	   Bajarlo es lo que termina de meter la seccion en el viewport
	   sin sacrificar copy aprobado. */
	.sv-servicios-grid > .wp-block-group > * {
		margin-block-start: 3px !important;
	}

	.sv-servicios-grid > .wp-block-group > *:first-child {
		margin-block-start: 0 !important;
	}

	.sv-servicios-grid .has-small-font-size {
		font-size: 11px !important;
		line-height: 1.35 !important;
	}

	.sv-servicios-grid .has-medium-font-size {
		font-size: 13px !important;
		line-height: 1.3 !important;
	}

	.sv-servicios-section > .wp-block-heading {
		font-size: 24px !important;
		margin-bottom: 6px !important;
	}

	.sv-servicios-section > p {
		font-size: 14px !important;
		line-height: 1.5 !important;
		margin-bottom: 18px !important;
	}
}

/* ═══════════════════════════════════════════════════════════
   Utilidad SV Full-bleed — para CUALQUIER bloque que deba ocupar
   el ancho total del viewport, sin importar en qué nivel de
   anidamiento de contenedores WordPress esté (post-content
   constrained, wp:group align:full, template-part, etc).
   Deliberadamente NO depende de que WordPress cancele el padding
   de los contenedores ancestros de forma perfecta
   (useRootPaddingAwareAlignments) — ese mecanismo ya demostró ser
   frágil en este proyecto (ver notas del hero más abajo). Solo
   depende de que los ancestros estén centrados vía margin:auto,
   que es el comportamiento nativo y estable de los layouts
   constrained/wide de WordPress.

   Requiere las reglas de seguridad de scrollbar declaradas al
   inicio de este archivo (html{scrollbar-gutter:stable},
   body{overflow-x:clip}).

   Uso:
   - Full-bleed a ras (como footer/header si lo necesitaran):
       class="sv-full-bleed"
   - Full-bleed con aire simétrico en los 4 lados (como el hero):
       redeclarar --sv-edge-gap en la propia regla del bloque.
   ═══════════════════════════════════════════════════════════ */
.sv-full-bleed {
	--sv-edge-gap: 0px;
	width: calc(100vw - (var(--sv-edge-gap) * 2));
	margin-left: calc(50% - 50vw + var(--sv-edge-gap));
	margin-right: var(--sv-edge-gap);
}

/* ═══════════════════════════════════════════════════════════
   Fondo de sitio con fade continuo por scroll (home) — en vez
   de que cada sección tenga su propio bloque de color con un
   corte horizontal duro hacia la siguiente, una sola capa fija
   detrás de todo el sitio va cambiando de color plano a medida
   que se hace scroll, con fundido entre etapas. Las secciones
   individuales (ver .sv-full-section y patterns/home-*.php) ya
   NO declaran su propio background-color — quedan transparentes
   y dejan ver esta capa.

   8 secciones de 100vh cada una = 12.5% del scroll total cada
   una. El fundido ocurre durante la PRIMERA sección de cada par
   entrante (ej.: pasa mientras se hace scroll por Método, y ya
   llega sólido a Servicios) — así cada par queda sólido durante
   sus dos secciones, sin gradiente perpetuo.

   Usa animation-timeline: scroll() (CSS Scroll-Driven
   Animations, sin JS) — soporte amplio en Chrome/Edge/Safari a
   mediados de 2026, Firefox todavía detrás de una flag. El
   @supports de abajo (punto siguiente) da un fallback de color
   sólido sin fundido para no romper el contraste de texto en
   navegadores sin soporte. */
.sv-scroll-bg {
	position: fixed;
	inset: 0;
	z-index: -1;
	background-color: var(--wp--preset--color--base);
}

@supports (animation-timeline: scroll()) {
	.sv-scroll-bg {
		animation: sv-bg-fade linear;
		animation-timeline: scroll(root);
		animation-range: 0% 100%;
	}
}

@keyframes sv-bg-fade {
	0%     { background-color: var(--wp--preset--color--base); }
	25%    { background-color: var(--wp--preset--color--base); }
	37.5%  { background-color: var(--wp--preset--color--pistacho); }
	50%    { background-color: var(--wp--preset--color--pistacho); }
	62.5%  { background-color: var(--wp--preset--color--azul-claro); }
	75%    { background-color: var(--wp--preset--color--azul-claro); }
	87.5%  { background-color: var(--wp--preset--color--azul-profundo); }
	100%   { background-color: var(--wp--preset--color--azul-profundo); }
}

/* Fallback sin animation-timeline: scroll() — le da a cada
   sección su color sólido (comportamiento de bloques de hoy,
   sin fundido) en vez de dejar el texto claro/oscuro pensado
   para el fondo animado sobre el fondo base fijo de arriba,
   que rompería el contraste. Las secciones en Base no necesitan
   clase — ya coinciden con el valor por defecto de .sv-scroll-bg. */
@supports not (animation-timeline: scroll()) {
	.sv-section-pistacho { background-color: var(--wp--preset--color--pistacho); }
	.sv-section-celeste  { background-color: var(--wp--preset--color--azul-claro); }
	.sv-section-oscuro   { background-color: var(--wp--preset--color--azul-profundo); }
}

/* ─────────────────────────────────────────────────────────
   Fondo de fundido por scroll — páginas secundarias (Equipo,
   Servicios, Método, Biblioteca y el resto de páginas que usan
   templates/page-hero.html, templates/page.html o
   templates/home.html). Mismo mecanismo que .sv-scroll-bg del
   home (ver arriba: fixed, z-index:-1, detrás de todo, animado
   por scroll-timeline con fallback de color sólido por sección),
   pero con solo 3 paradas en vez de las 4 del home — estas
   páginas son más cortas y no tienen la sección pistacho.

   0% color base, 50% azul claro, 87.5%-100% azul profundo (el
   mismo azul del footer, que ya trae la clase .sv-section-oscuro
   — así el footer deja de verse blanco en toda página que no
   sea el home). Por diseño en % del scroll total de la página,
   no en píxeles: cada página mide distinto y esto no depende de
   ese largo. */
.sv-scroll-bg-inner {
	position: fixed;
	inset: 0;
	z-index: -1;
	background-color: var(--wp--preset--color--base);
}

@supports (animation-timeline: scroll()) {
	.sv-scroll-bg-inner {
		animation: sv-bg-fade-inner linear;
		animation-timeline: scroll(root);
		animation-range: 0% 100%;
	}
}

@keyframes sv-bg-fade-inner {
	0%     { background-color: var(--wp--preset--color--base); }
	50%    { background-color: var(--wp--preset--color--azul-claro); }
	87.5%  { background-color: var(--wp--preset--color--azul-profundo); }
	100%   { background-color: var(--wp--preset--color--azul-profundo); }
}

/* Cada sección del home mide un viewport como piso (ver min-height
   más abajo, no overflow:hidden — eso se sacó cuando el alto fijo
   recortaba contenido en viewports bajos, ver el comentario de
   min-height). El alto real de cada sección en escritorio se edita
   más abajo, sección "Alto de cada sección — solo escritorio". */
.sv-full-section {
	/* min-height y NO height: la seccion mide un viewport como
	   PISO, pero puede crecer si su contenido no cabe. Con height
	   fijo + overflow:hidden, en un viewport bajo (probado a
	   1440x700, medida de laptop muy comun) el contenido centrado
	   se pasaba hasta 88px y se recortaba, y ademas el titulo se
	   metia hasta 106px por debajo del header fijo. Recortar
	   contenido es peor que perder la equivalencia exacta de "una
	   seccion = una ventana": el fade de fondo por scroll degrada
	   bien porque interpola sobre el scroll total, no sobre los
	   limites de cada seccion. */
	min-height: 50vh;    /* fallback */
	min-height: 100svh;   /* mejora progresiva, mismo patrón que .hero-wrapper */
	/* El header es fixed y tapa la franja superior de CUALQUIER
	   seccion. Sin esta reserva, el contenido centrado verticalmente
	   se mete por debajo de el. max() para no reducir el padding de
	   diseno donde ya es mayor.

	   !important porque el padding-top viene inline en el style=""
	   de cada wp:group, y un inline le gana a cualquier regla de
	   hoja de estilos sin importar la especificidad. */
	padding-top: max(var(--wp--preset--spacing--xxxxxl), calc(var(--wp--custom--header-clearance) + 16px)) !important;
	display: flex;
	/* column + justify-content (no align-items): los hijos de cada
	   sección (heading, paragraph, grid...) siguen apilados uno debajo
	   del otro como siempre — flex acá es solo para centrar ese bloque
	   completo verticalmente dentro del viewport, no para ponerlos en
	   fila. */
	flex-direction: column;
	justify-content: center;
}

/* ─────────────────────────────────────────────────────────
   Alto de cada sección — SOLO ESCRITORIO (>768px).
   Por defecto todas heredan min-height:100vh de .sv-full-section
   de arriba. Para que una sección use un alto distinto, agregar
   su min-height acá (100vh = el alto completo de la ventana, 50vh
   = la mitad, 150vh = una vez y media, etc.). En mobile todas
   siguen fijas en 100svh — no se tocan acá, ver el bloque
   @media (max-width:768px) más abajo si hace falta cambiar eso
   también.

   Es min-height, no height: si el contenido de una sección no
   entra en el valor que le pongas, la sección crece para que nada
   se recorte — el número de acá es un piso, no un techo fijo. Con
   valores muy chicos (por ejemplo 40vh) puede que no quede espacio
   suficiente debajo del header fijo para el contenido; probar en
   el navegador después de cambiar.

   OJO — esto puede desalinear el fade de fondo por scroll: el
   @keyframes sv-bg-fade de más arriba cambia de color en puntos
   fijos (25%, 50%, 75% del scroll total de la página), asumiendo
   que cada par de secciones mide lo mismo que las demás. Si las
   alturas dejan de ser todas 100vh, el cambio de color deja de
   caer justo en el borde entre secciones — se corre en proporción
   a cuánto se alejó esa sección de 100vh. No es un bug, es
   matemática: si hace falta que el fade siga calzando exacto con
   los bordes reales, ese cálculo de porcentajes hay que rehacerlo
   a mano después de fijar las alturas acá. ───────────────────── */
@media (min-width: 769px) {
	.sv-intro-section       { min-height: 75vh; }
	.sv-equipo-section      { min-height: 100vh; }
	.sv-servicios-section   { min-height: 100vh; }
	.sv-testimonios-section { min-height: 100vh; }
	.sv-biblioteca-section  { min-height: 100vh; }
	.sv-cierre-section      { min-height: 100vh; }
	/* El footer ya no está en esta lista: dejó de usar
	   .sv-full-section/.sv-footer-section al reconstruirse solo con
	   bloques nativos (ver patterns/footer.php) — mide lo que su
	   contenido pide, no un piso de viewport. */
}

/* ─────────────────────────────────────────────────────────
   Padding inferior de cada sección — SOLO ESCRITORIO (>768px).
   El min-height de arriba es un piso, nunca un techo: si el
   CONTENIDO de una sección ya pide más alto que el valor que le
   pusiste, ese min-height más chico no hace nada (así se mide en
   el navegador: Equipo pide ~108vh y Servicios ~101vh de alto
   propio antes de este padding — bajarles el min-height por debajo
   de eso no cambia nada hasta que el contenido mismo baje). Este
   padding-bottom es uno de los ingredientes de ese alto propio —
   bajarlo acá le da más margen al min-height de arriba.

   El padding-top NO se edita acá a propósito: ya está en su mínimo
   seguro (la reserva para no quedar tapado por el header fijo, ver
   --wp--custom--header-clearance en la regla base de .sv-full-section,
   más arriba) — bajarlo arriesga que el título de la sección quede
   debajo del header.

   Si después de achicar este padding una sección sigue sin poder
   bajar del alto que querés, lo que falta recortar es el contenido
   mismo (gap entre bloques, tamaño de las tarjetas, tamaños de
   letra) — eso es específico de cada sección, no algo genérico acá.

   !important por la misma razón que el resto de .sv-full-section:
   el valor por defecto viene inline en el style="" de cada
   wp:group (WordPress lo pone ahí, no en una clase), y un inline
   le gana a cualquier regla de hoja de estilos sin !important, sin
   importar la especificidad. */
@media (min-width: 769px) {
	.sv-intro-section       { padding-bottom: 50px !important; }
	.sv-equipo-section      { padding-bottom: 50px !important; }
	.sv-servicios-section   { padding-bottom: 50px !important; }
	.sv-testimonios-section { padding-bottom: 50px !important; }
	.sv-biblioteca-section  { padding-bottom: 50px !important; }
	.sv-cierre-section      { padding-bottom: 50px !important; }
	/* Footer fuera de esta lista por el mismo motivo que en el
	   bloque de min-height de arriba. */
}

/* Los hijos de la sección son flex items (por el display:flex de
   arriba), y WordPress les aplica margin-inline:auto para
   centrarlos dentro del contentSize. En un contenedor flex ese
   margin auto GANA sobre el estiramiento por defecto, así que el
   hijo deja de tomar el ancho disponible y colapsa al ancho de su
   contenido: por eso un bloque quedaba a 645px (el contentSize
   del tema padre) mientras el de al lado ocupaba los 1100px de la
   sección, y los bordes izquierdos no calzaban entre sí.

   width:100% le devuelve el ancho de referencia; el max-width que
   pone WordPress lo recorta al contentSize y el margin auto lo
   centra. Resultado: todos los hijos comparten el mismo eje.

   Se excluye .alignfull porque esos bloques escapan a propósito
   con márgenes negativos, y fijarles un width explícito los haría
   desbordar por la derecha. */
.sv-full-section > *:not(.alignfull) {
	width: 100%;
}

/* ─────────────────────────────────────────────────────────
   Introducción / Mirada sistémica (home) — título a la
   izquierda, párrafo en una sola tipografía a la derecha (sin
   mezclar tamaños/opacidades entre los 3 párrafos, como antes),
   y abajo un bloque de 3 columnas (Cuerpo/Mente/Entorno) sobre
   "¿Cómo entendemos el bienestar?". Ver patterns/home-equipo.php.
   Todos los tamaños de letra de acá son editables directo (sin
   clamp/fórmula) — la versión mobile está en el mismo bloque
   @media (max-width: 768px) que el resto del sitio, más abajo en
   este archivo. */
.sv-intro-grid {
	display: grid;
	/* minmax en vez de 500px fijo: con un ancho fijo la columna
	   del título no puede encogerse y, entre ~900px y 1100px de
	   viewport, empujaba la columna de texto fuera del
	   contenedor. Con minmax se comprime hasta 300px antes de
	   que el media query mobile la apile. */
	grid-template-columns: minmax(300px, 440px) 1fr;
	gap: clamp(48px, 6vw, 96px);
	align-items: start;
}

.sv-intro-grid h2 {
	/* Tamaño del título de la izquierda (escritorio). */
	font-size: 34px;
	line-height: 1.2;
	margin: 0;
}

.sv-intro-text p {
	/* Tamaño del párrafo de la derecha (escritorio) — mismo valor
	   para los 3 párrafos, a propósito (todos en la misma
	   tipografía/estilo, sin variación entre ellos).
	   max-width, NO width: un width fijo no se encoge y desborda
	   la columna en anchos intermedios. */
	font-size: 19px;
	max-width: 34em;
	line-height: 1.7;
	margin: 0 0 22px 0;
}

/* El botón necesita más aire que la separación entre párrafos:
   cierra el bloque de texto, no continúa la lectura. */
.sv-intro-text .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--xl);
}

.sv-bienestar {
	/* Aire entre el bloque de arriba (título + párrafo) y este. */
	margin-top: clamp(56px, 7vw, 104px);
}

.sv-bienestar-heading {
	/* Tamaño de "¿Cómo entendemos el bienestar?" (escritorio). */
	font-size: 21px;
	margin: 0 0 36px 0;
}

.sv-bienestar-grid {
	display: grid;
	/* Alineado a la grilla de arriba: la primera columna arranca
	   donde arranca el título, y las 3 partes del bienestar
	   ocupan el ancho completo en columnas iguales. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(32px, 4vw, 64px);
	/* start, no stretch: cada columna se alinea por su borde
	   superior, así los títulos quedan en la misma línea de base
	   aunque los subtítulos tengan largos distintos. */
	align-items: start;
	/* Línea superior sutil que agrupa las 3 partes como un solo
	   sistema en vez de tres textos suel­tos. border, no sombra
	   (lenguaje-visual.md §6.3: "Sin sombras"). */
	border-top: 1px solid var(--wp--preset--color--borde-suave);
	padding-top: clamp(28px, 3vw, 40px);
}

.sv-bienestar-grid h4 {
	/* Tamaño del título de cada columna — Cuerpo/Mente/Entorno (escritorio). */
	font-size: 22px;
	margin: 0 0 8px 0;
}

.sv-bienestar-grid p {
	/* Tamaño del subtítulo de cada columna (escritorio). */
	font-size: 16px;
	line-height: 1.5;
	margin: 0;
}

/* ─────────────────────────────────────────────────────────
   Equipo (home) — carrusel infinito de tarjetas de profesional.
   Ver patterns/home-metodo.php.

   Cuántas tarjetas se ven: --sv-equipo-visible. Es UN solo
   número y de él sale el ancho de tarjeta, así que para mostrar
   más o menos tarjetas se cambia solo acá (5.5 = cinco completas
   más la mitad de la sexta asomando, que es lo que indica que el
   carrusel sigue).

   El ancho se calcula con 100cqi (container query inline size),
   no con 100vw ni %: cqi resuelve contra el ancho real del
   contenedor del carrusel, así que no hereda el problema de que
   100vw no descuenta la scrollbar (ya causó bugs de layout en
   este proyecto) ni depende de que WordPress cancele el padding
   de los contenedores anidados.

   Velocidad: --sv-equipo-speed son los segundos por tarjeta, así
   que agregar o quitar profesionales no cambia la velocidad
   percibida, solo la duración total del ciclo.
   ───────────────────────────────────────────────────────── */
/* Encabezado a la izquierda (mismo eje de lectura que la sección
   2) y controles del carrusel a la derecha, en la misma fila. */
.sv-equipo-intro {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: clamp(32px, 3.5vw, 56px);
}

/* Ancho de esta fila (título + controles) y del botón "Conoce el
   equipo": ya no tienen una regla propia — .sv-equipo-intro y
   .sv-equipo-cta son hijos directos de .sv-full-section sin clase
   alignfull, así que les alcanza con la regla general de más abajo
   (.sv-full-section > *:not(.alignfull) { width:100% }) + el
   max-width nativo de WordPress (theme.json →
   settings.layout.contentSize) para quedar centrados al mismo
   ancho que el resto de las secciones del sitio. Antes tenían un
   70% propio, distinto del carrusel (90%) y del resto de las
   secciones (contentSize) — ancho inconsistente entre texto,
   tarjetas y carrusel, corregido acá. */

.sv-equipo-intro > div:first-child {
	max-width: 640px;
}

.sv-equipo-titulo {
	font-family: 'Montserrat', sans-serif;
	font-size: 34px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--azul-profundo);
	margin: 0 0 14px 0;
}

.sv-equipo-bajada {
	font-family: 'Lora', serif;
	font-size: 19px;
	line-height: 1.7;
	color: var(--wp--preset--color--texto-secundario);
	margin: 0;
}

/* El carrusel ya NO es alignfull: antes escapaba del contenedor
   constrained a propósito para tener más ancho que el resto de la
   sección (90% vs 70%/contentSize), pero eso es exactamente el
   ancho inconsistente que se corrigió acá — ahora .sv-equipo-full
   es un hijo directo más de .sv-full-section, así que comparte el
   mismo ancho que el título/bajada de arriba y que el resto de las
   secciones del sitio (regla general más abajo + contentSize de
   theme.json). Sin ancho ni márgenes propios: los hereda de ahí. */
.sv-equipo-full {
	padding: 0;
}

.sv-equipo-cta {
	margin-top: clamp(24px, 2.5vw, 40px);
}

.sv-equipo-carousel {
	--sv-equipo-visible: 5.5;
	--sv-equipo-gap: 24px;
	container-type: inline-size;
	/* Scroll horizontal real, manejado por el usuario: no se
	   mueve solo. El loop infinito lo cierra el JS del pattern
	   reposicionando el scroll cuando se pasa de un set (hay 3
	   copias del equipo, se arranca en la del medio para que se
	   pueda ir hacia los dos lados). */
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	/* La barra se oculta porque con el loop infinito el pulgar
	   saltaría de posición al reposicionar el scroll, que se lee
	   como un glitch. La navegación queda en las flechas, el
	   arrastre y las teclas. */
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Desvanece los dos extremos para que la tarjeta que entra y
	   la que sale no aparezcan cortadas de golpe contra el borde.
	   Máscara, no degradado de color encima: el fondo de la
	   sección cambia con el scroll (ver fade de fondo más arriba),
	   así que un degradado con color fijo se vería como una
	   mancha en cuanto el fondo cambiara de etapa. */
	-webkit-mask-image: linear-gradient(to right, black 88%, transparent);
	mask-image: linear-gradient(to right, black 88%, transparent);
}

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

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

/* Slot del carrusel: solo tamaño y comportamiento de scroll. El
   aspecto visual (fondo, borde, radio, padding) vive en
   .sv-team-card — ver "Tarjeta de profesional (global)" más abajo.
   El carrusel combina las dos clases en el mismo <article>
   (sv_team_card() en functions.php recibe la clase de slot como
   segundo argumento). */
.sv-equipo-card {
	flex: 0 0 calc(100cqi / var(--sv-equipo-visible) - var(--sv-equipo-gap));
	scroll-snap-align: start;
	/* --sv-equipo-visible es constante desde 1440px hacia arriba, así
	   que en un monitor ultra-wide la tarjeta seguiría creciendo sin
	   techo — y con la foto en 4:5 (más alta que el círculo anterior)
	   se ve desproporcionada antes de llegar a verse "grande y
	   generosa". El tope la deja consistente de ahí en adelante. */
	max-width: 260px;
}

/* Controles del carrusel. Van al lado del encabezado de la
   sección, no encima de las tarjetas: superpuestos taparían la
   primera y la última, y con 5 tarjetas visibles no hay margen
   para eso. */
.sv-equipo-nav {
	display: flex;
	gap: 10px;
	flex-shrink: 0;
}

.sv-equipo-btn {
	width: 46px;
	height: 46px;
	border-radius: var(--wp--preset--border-radius--pill);
	border: 1px solid var(--wp--preset--color--azul-primario);
	background: transparent;
	color: var(--wp--preset--color--azul-primario);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 120ms ease;
}

.sv-equipo-btn:hover {
	background-color: rgba(0, 96, 140, 0.06);
}

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

/* ─────────────────────────────────────────────────────────
   Split horizontal de 2 columnas — para páginas de servicio
   (por ahora /servicios/psicoterapia-de-pareja/) que necesitan
   romper el ritmo de bloques centrados apilados en vertical.
   Referencia estructural: proonelabs.com/in-silico-pharma
   (texto a la izquierda, lista/tarjetas a la derecha) — se toma
   la estructura, no la atmósfera (notas-operativas-generacion-
   visual.md ya descarta esa referencia para lo visual). Acá el
   contraste entre columnas lo da la tipografía y el componente
   de tarjeta ya existente, no bloques de color sólido nuevos.
   ───────────────────────────────────────────────────────── */
.sv-split {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}

.sv-split-text h2 {
	text-align: left;
}

.sv-split-text p {
	text-align: left;
}

@media (max-width: 900px) {
	.sv-split {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

/* Grilla angosta para 2 tarjetas de profesional dentro de una
   columna del split — no reutiliza .sv-team-grid (pensada para
   3+ en ancho completo), va en una sola columna porque el
   espacio disponible es la mitad de la página. */
.sv-quienes-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

@media (min-width: 560px) and (max-width: 900px) {
	.sv-quienes-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ─────────────────────────────────────────────────────────
   Tarjeta de profesional (global) — componente compartido.
   Generada por sv_team_card() en functions.php. La usan el
   carrusel de Equipo del home (arriba, combinada con
   .sv-equipo-card para el tamaño del slot) y la grilla de
   /equipo/ (.sv-team-grid, más abajo). Más adelante el flujo de
   agenda (Reservo, paso 2 "¿Con quién quieres trabajar?") se
   apoya en las mismas clases para las tarjetas de profesional del
   widget — ver SV_Flujo_Agendamiento.md.

   La foto es un rectángulo redondeado, no el círculo que usa el
   resto del sitio para retratos (lenguaje-visual.md §2): decisión
   explícita para este componente, tomando como referencia el
   formato de tarjeta de Benetics. El radio de la foto y el de la
   tarjeta son los tokens propios de SienteVital (20px / 14px), no
   los de la referencia. Sin foto real confirmada, el espacio queda
   en tono neutro de la rampa — misma regla de siempre, solo cambia
   la forma del marco. */
.sv-team-card {
	position: relative;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 20px;
	/* padding-bottom más grande: deja sitio al botón circular de
	   agenda (abajo a la derecha, position:absolute) sin que quede
	   debajo del link principal. */
	padding: 13px 13px 60px 13px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	box-sizing: border-box;
	transition: transform 200ms ease;
	/* Tamaño fijo, en .sv-team-card mismo y no solo en el modificador
	   .sv-equipo-card del carrusel del home: la tarjeta de profesional
	   debe verse igual en cualquier contenedor donde se use (carrusel,
	   grilla de /equipo/, splits de página de servicio), nunca crecer
	   hasta llenar la celda que le toque. width:100% + max-width para
	   que en columnas angostas (mobile, o un split de 2 columnas) se
	   achique con normalidad, pero jamás pase de este tope. Valor
	   tomado del home tal cual — la proporción interna (hoy 4:5 en la
	   foto) queda pendiente de revisar aparte, esto solo fija el
	   tamaño. */
	width: 100%;
	max-width: 300px;
}

/* Toda la tarjeta crece un poco al pasar el mouse (o con foco de
   teclado, :focus-within, para el mismo efecto sin mouse) y vuelve
   a su tamaño normal al salir — el :hover se dispara con el puntero
   en cualquier parte de la tarjeta, incluido el botón de agenda,
   porque es descendiente suyo. z-index evita que, ya agrandada,
   quede tapada por la tarjeta vecina. */
.sv-team-card:hover,
.sv-team-card:focus-within {
	transform: scale(1.03);
	z-index: 1;
}

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

/* position:relative + z-index:1 en foto/nombre/especialidad: sin
   esto, .sv-team-card-overlay (position:absolute, z-index:0, ver
   más abajo) pintaría ENCIMA de estos tres — un elemento posicionado
   con z-index numérico siempre pinta sobre elementos no posicionados
   sin importar el orden en el DOM, así que necesitan su propio
   z-index para quedar por encima del overlay.

   pointer-events:none es la otra mitad de este arreglo, e igual de
   necesaria: sin esto, al quedar visualmente ENCIMA del overlay
   estos tres empiezan a INTERCEPTAR el click ellos mismos (ganan el
   hit-test por estar más arriba en el z-index) en vez de dejarlo
   pasar al link de abajo — exactamente lo contrario de lo que se
   busca. Con pointer-events:none siguen pintándose igual, pero el
   click las atraviesa y llega al overlay. */
.sv-team-card-photo {
	position: relative;
	z-index: 1;
	pointer-events: none;
	width: 100%;
	aspect-ratio: 4 / 5;
	border-radius: 14px;
	background-color: var(--wp--preset--color--gris-alterno);
	border: 1px solid var(--wp--preset--color--borde-suave);
}

.sv-team-card-nombre {
	position: relative;
	z-index: 1;
	pointer-events: none;
	font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--wp--preset--color--azul-profundo);
	margin: 0;
}

.sv-team-card-especialidad {
	position: relative;
	z-index: 1;
	pointer-events: none;
	font-family: 'Lora', serif;
	font-size: 15px;
	line-height: 1.45;
	color: var(--wp--preset--color--texto-secundario);
	margin: 0;
}

/* Link de toda la tarjeta al perfil: un overlay VACÍO que cubre la
   tarjeta entera de borde a borde (inset:0, mismo radio que la
   tarjeta vía border-radius:inherit) — no envuelve el contenido, así
   que no depende de que un flexbox se estire bien para cubrir toda
   el área (eso se desalineaba entre el carrusel y la grilla de
   /equipo/). Va primero en el DOM y con z-index:0: el contenido
   visible y el botón de agenda (ambos con z-index mayor, ver arriba
   y abajo) pintan encima y reciben el click antes que él en su
   propia área — así el botón de agenda intercepta su propio click
   en vez de disparar el link de la tarjeta completa. Sin texto
   propio, por eso el aria-label en vez de nombre accesible por
   contenido. */
.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: 2px;
}

/* Botón circular de agenda: solo ícono por defecto, se abre en
   píldora con la etiqueta "Agenda" al hacer hover/focus. Ancho
   automático (icono + padding), no un valor fijo, para que el
   texto tenga dónde crecer sin recalcular nada. z-index:2, por
   encima del overlay de toda la tarjeta (0) y del contenido (1):
   así intercepta su propio click en vez de que le llegue al link
   de la tarjeta completa que tiene debajo. */
.sv-team-card-agenda {
	position: absolute;
	z-index: 2;
	right: 16px;
	bottom: 16px;
	display: inline-flex;
	align-items: center;
	height: 44px;
	box-sizing: border-box;
	border-radius: var(--wp--preset--border-radius--pill);
	border: 1px solid var(--wp--preset--color--azul-primario);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--azul-primario);
	overflow: hidden;
	text-decoration: none;
	padding: 0 13px;
	transition: background-color 160ms ease, color 160ms ease;
}

.sv-team-card-agenda-icon {
	display: flex;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
}

.sv-team-card-agenda-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.sv-team-card-agenda-label {
	max-width: 0;
	margin-left: 0;
	opacity: 0;
	overflow: hidden;
	white-space: nowrap;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 500;
	transition: max-width 200ms ease, opacity 160ms ease, margin-left 200ms ease;
}

.sv-team-card-agenda:hover,
.sv-team-card-agenda:focus-visible {
	background-color: var(--wp--preset--color--azul-primario);
	color: var(--wp--preset--color--base);
}

.sv-team-card-agenda:hover .sv-team-card-agenda-label,
.sv-team-card-agenda:focus-visible .sv-team-card-agenda-label {
	max-width: 100px;
	margin-left: 8px;
	opacity: 1;
}

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

@media (prefers-reduced-motion: reduce) {
	.sv-team-card-agenda,
	.sv-team-card-agenda-label {
		transition: none;
	}
}

/* Grilla de /equipo/ (página índice) — mismo componente de tarjeta,
   sin carrusel: acá hay espacio para mostrarlas todas de una vez. */
.sv-team-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 2.5vw, 32px);
}

@media (max-width: 1100px) and (min-width: 769px) {
	.sv-team-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.sv-team-grid {
		/* Dos columnas incluso en el celular más angosto (320px):
		   con el padding raíz del tema (30px mínimo a cada lado) y
		   este gap, la tarjeta más chica queda ~107px de ancho —
		   angosta pero legible, y es la prioridad sobre mostrarla
		   más grande en una sola columna. */
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
}

/* ═══════════════════════════════════════════════════════════
   Página de profesional — /equipo/[nombre]/,
   templates/page-profesional.html. Wireframe:
   SV_Wireframe-Profesionales-PD.md. Contenido generado por
   provision_profesionales.php (scratchpad, no vive en el tema).

   Ancho de contenedor: 90% del viewport, centrado — el
   wireframe lo pide explícito, distinto del ancho compartido del
   resto del sitio (theme.json → settings.layout.contentSize,
   "min(80%, 1400px)", ver más arriba). .sv-prof-container aplica
   ese ancho dentro de cada sección alignfull; necesita !important
   en los márgenes por el mismo motivo que el resto de los bloques
   alignfull del sitio (WordPress fija margin-left/right
   en los bloques alignfull vía un <style> inline que carga
   después de este archivo, y le gana al margin:auto con la
   misma especificidad).

   Fondo: ninguna sección fija su propio background-color — lo
   da el fade global por scroll (.sv-scroll-bg-inner, ver
   templates/page-profesional.html), igual que pide el
   wireframe ("tal como el home"). El wireframe describe cada
   sección con un color aproximado (blanco, gris, azul profundo)
   para transmitir el ritmo, pero la paleta compartida del fade
   no tiene una etapa gris — así que la sección 2 no sale
   literalmente #f4f4f4, sale lo que el fade muestre en ese
   punto del scroll (todavía claro a esa altura de la página).
   Si hace falta una etapa gris real, hay que agregarla a
   @keyframes sv-bg-fade-inner (más arriba), no acá — afectaría
   a todas las páginas que la usan, no solo esta. ─────────────── */
.sv-prof-container {
	width: 90%;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ── Sección 1 — Hero del profesional ── */
.sv-prof-hero {
	display: flex;
	/* flex-start, no center: con el alto de la foto fijo en 60vh
	   (ver .sv-prof-hero-photo-col), centrar verticalmente ya no
	   tiene sentido — el padding-top de acá es lo único que separa
	   la foto del header, y con align-items:center un contenido más
	   alto que el espacio disponible se centra empujando el borde
	   superior POR ENCIMA del padding, quedando tapado por el header
	   fijo. Con flex-start el padding-top manda siempre. */
	align-items: flex-start;
	gap: clamp(32px, 5vw, 64px);
	padding-top: max(var(--wp--preset--spacing--xxxxxl), calc(var(--wp--custom--header-clearance) + 24px)) !important;
	padding-bottom: var(--wp--preset--spacing--xxxl) !important;
}

.sv-prof-hero-photo-col {
	/* Alto fijo, ancho derivado — no al revés. Antes el contenedor
	   tomaba el 40% del ancho de la fila y la foto sacaba su alto
	   de ahí (aspect-ratio sobre un ancho variable), lo que la hacía
	   crecer sin techo en pantallas anchas. Ahora la foto mide
	   siempre 60vh y el ancho se calcula solo desde 5:7 — un
	   contenedor de tamaño y proporción ya resueltos, no "la imagen
	   a tamaño completo". */
	flex: 0 0 auto;
	height: 60vh;
	aspect-ratio: 5 / 7;
}

.sv-prof-hero-photo {
	width: 100%;
	height: 100%;
	border-radius: 20px;
	object-fit: cover;
	display: block;
}

.sv-prof-hero-info-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	/* Mismo alto que la foto — ver comentario de .sv-prof-hero-photo-col.
	   Ya no es un mínimo aparte, es el mismo alto exacto (height, no
	   min-height) para que las tres franjas (eyebrow+nombre+tags /
	   descripción / CTAs) se repartan ese espacio con
	   justify-content:space-between en vez de quedar todo apretado
	   arriba si el contenido es corto. */
	height: 60vh;
}

.sv-prof-eyebrow {
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--texto-secundario);
	margin: 0 0 10px 0;
}

.sv-prof-hero-nombre {
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	font-size: clamp(36px, 4.2vw, 58px);
	line-height: 1.08;
	color: var(--wp--preset--color--azul-profundo);
	margin: 0 0 20px 0;
}

.sv-prof-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sv-prof-tag {
	display: inline-flex;
	align-items: center;
	padding: 8px 18px;
	border-radius: var(--wp--preset--border-radius--pill);
	border: 1px solid var(--wp--preset--color--borde);
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: var(--wp--preset--color--azul-profundo);
	text-decoration: none;
	transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}

.sv-prof-tag:hover {
	background-color: var(--wp--preset--color--azul-primario);
	border-color: var(--wp--preset--color--azul-primario);
	color: var(--wp--preset--color--base);
}

.sv-prof-hero-desc {
	font-family: 'Lora', serif;
	font-size: 19px;
	line-height: 1.6;
	color: var(--wp--preset--color--texto-secundario);
	margin: 0;
	max-width: 44em;
}

.sv-prof-hero-actions {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}

.sv-prof-hero-cta {
	display: inline-flex;
	align-items: center;
	padding: 16px 34px;
	border-radius: var(--wp--preset--border-radius--pill);
	background-color: var(--wp--preset--color--azul-primario);
	color: var(--wp--preset--color--base);
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 140ms ease;
}

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

.sv-prof-hero-volver {
	font-family: 'Montserrat', sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: var(--wp--preset--color--azul-primario);
	text-decoration: underline;
	text-underline-offset: 3px;
}

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

@media (max-width: 900px) {
	.sv-prof-hero {
		flex-direction: column;
		align-items: stretch;
	}
	.sv-prof-hero-photo-col {
		flex: 0 0 auto;
		height: 42vh;
		max-width: 70%;
		margin: 0 auto;
	}
	.sv-prof-hero-info-col {
		/* auto, no 60vh: en mobile la info va DEBAJO de la foto, no
		   al lado — necesita el alto que le pida su propio contenido,
		   no el de la foto. */
		height: auto;
		gap: 28px;
	}
}

/* ── Sección 2 — Quién es ── */
.sv-prof-quien {
	display: flex;
	gap: clamp(32px, 6vw, 80px);
	padding-top: var(--wp--preset--spacing--xxxxxl) !important;
	padding-bottom: var(--wp--preset--spacing--xxxxxl) !important;
}

.sv-prof-quien-title-col {
	flex: 0 0 35%;
	max-width: 35%;
}

.sv-prof-quien-title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	font-size: clamp(34px, 4vw, 52px);
	line-height: 1.1;
	color: var(--wp--preset--color--azul-profundo);
	margin: 0;
}

.sv-prof-quien-text-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 22px;
	justify-content: center;
}

.sv-prof-quien-text-col p {
	font-family: 'Lora', serif;
	font-size: 19px;
	line-height: 1.7;
	color: var(--wp--preset--color--contrast);
	margin: 0;
}

@media (max-width: 900px) {
	.sv-prof-quien {
		flex-direction: column;
		gap: 24px;
	}
	.sv-prof-quien-title-col,
	.sv-prof-quien-text-col {
		max-width: 100%;
		flex: 1 1 auto;
	}
}

/* ── Sección 3 — Agenda directa ── */
.sv-prof-agenda-section {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: var(--wp--preset--spacing--xxxxxl) !important;
	padding-bottom: var(--wp--preset--spacing--xxxxxl) !important;
}

/* Contenedor más ancho que .sv-prof-container (90%): el iframe es
   una herramienta incrustada, no una columna de lectura, y a 90%
   quedaba visiblemente más angosto que el resto de la página. Solo
   lo usa esta sección — el resto sigue en 90% (.sv-prof-container). */
.sv-prof-container-wide {
	width: 96%;
	margin-left: auto !important;
	margin-right: auto !important;
}

.sv-prof-agenda-titulo {
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	font-size: clamp(30px, 3.4vw, 44px);
	color: var(--wp--preset--color--azul-profundo);
	text-align: left;
	margin: 0 0 32px 0;
}

.sv-prof-agenda-iframe {
	width: 100%;
	height: min(75vh, 900px);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 20px;
	display: block;
}

/* ── Sección 4 — Formación y servicios ── */
.sv-prof-dark {
	/* min-height + centrado vertical: con solo 2 listas cortas la
	   sección quedaba mucho más baja que el resto de la página
	   (hero 60vh, agenda 100vh) y rompía el ritmo — no agrega
	   contenido nuevo (agregar tarjetas acá sería demasiado después
	   del iframe y del carrusel de profesionales), solo le da a lo
	   que ya hay el mismo peso visual que las demás secciones. */
	min-height: 70vh;
	display: flex;
	align-items: center;
	gap: clamp(40px, 6vw, 96px);
	padding-top: var(--wp--preset--spacing--xxxxxl) !important;
	padding-bottom: var(--wp--preset--spacing--xxxxxl) !important;
}

.sv-prof-dark-col {
	flex: 1;
}

.sv-prof-dark-titulo {
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	font-size: 24px;
	color: var(--wp--preset--color--base);
	margin: 0 0 24px 0;
}

.sv-prof-dark-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sv-prof-dark-lista li {
	font-family: 'Lora', serif;
	font-size: 17px;
	line-height: 1.5;
	color: rgba(254, 251, 247, 0.85);
}

.sv-prof-dark-lista a {
	color: rgba(254, 251, 247, 0.85);
	text-decoration: none;
	transition: color 140ms ease;
}

.sv-prof-dark-lista a:hover {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
}

@media (max-width: 768px) {
	.sv-prof-dark {
		flex-direction: column;
		gap: 36px;
	}
}

/* ── Sección 5 — Otros profesionales ──
   Reusa el carrusel infinito del home tal cual (.sv-equipo-carousel
   / .sv-equipo-track / .sv-equipo-card / sv_team_card() con
   tamaño y botón de agenda estándar, sin modificar) — ver
   provision_profesionales.php, que copia el mismo guion de loop
   infinito de patterns/home-metodo.php. Acá solo se pisa cuántas
   tarjetas se ven a la vez (4 en vez de 5,5), con una clase propia
   de especificidad igual pero declarada después en este archivo,
   así gana en cada punto de quiebre sin tocar las reglas del
   carrusel del home. */
.sv-prof-otros-section {
	padding-top: var(--wp--preset--spacing--xxxxxl) !important;
	padding-bottom: var(--wp--preset--spacing--xxxxxl) !important;
}

.sv-prof-otros-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 28px;
}

.sv-prof-otros-titulo {
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	font-size: 28px;
	color: var(--wp--preset--color--azul-profundo);
	margin: 0;
}

/* Selector combinado (.sv-equipo-carousel.sv-prof-otros-carousel),
   no solo .sv-prof-otros-carousel: dos clases pesan más que una,
   así que le gana a las reglas de --sv-equipo-visible de
   .sv-equipo-carousel sin importar en qué orden aparezcan en el
   archivo — más abajo hay reglas de ese carrusel dentro de sus
   propios @media que, a igual especificidad, le ganarían a una
   regla de una sola clase declarada más arriba (como esta). */
.sv-equipo-carousel.sv-prof-otros-carousel {
	--sv-equipo-visible: 4;
}

@media (max-width: 1100px) and (min-width: 769px) {
	.sv-equipo-carousel.sv-prof-otros-carousel {
		--sv-equipo-visible: 2.5;
	}
}

@media (max-width: 768px) {
	.sv-equipo-carousel.sv-prof-otros-carousel {
		--sv-equipo-visible: 2.15;
	}
}

/* Controles del carrusel. Van al lado del encabezado de la
   sección, no encima de las tarjetas: superpuestos taparían la
   primera y la última, y con 5 tarjetas visibles no hay margen
   para eso. */
.sv-equipo-nav {
	display: flex;
	gap: 10px;
	flex-shrink: 0;
}

.sv-equipo-btn {
	width: 46px;
	height: 46px;
	border-radius: var(--wp--preset--border-radius--pill);
	border: 1px solid var(--wp--preset--color--azul-primario);
	background: transparent;
	color: var(--wp--preset--color--azul-primario);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 120ms ease;
}

.sv-equipo-btn:hover {
	background-color: rgba(0, 96, 140, 0.06);
}

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

/* prefers-reduced-motion: el scroll por flecha deja de ser
   animado y pasa a ser un salto directo. El carrusel ya no se
   mueve solo, así que no hay animación que congelar. */
@media (prefers-reduced-motion: reduce) {
	.sv-equipo-carousel {
		scroll-behavior: auto;
	}

	.sv-equipo-btn {
		transition: none;
	}
}

/* ─────────────────────────────────────────────────────────
   Testimonios (home) — reseñas de Google.
   Ver patterns/home-testimonios.php. Bloques nativos desde el
   Hito 3: sin clases propias — encabezado y rating en
   wp:columns/wp:paragraph, tarjetas en wp:quote dentro de
   wp:columns (3 iguales, se apilan solas en mobile). Ver
   SV_Flujo_Trabajo_Lecciones.md, Hito 3, y
   home-testimonios-legacy-wphtml.php para la versión anterior.
   ───────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────
   Subtítulo de página de servicio — línea corta entre el H1
   del hero y la bajada. Usado primero en /servicios/psicoterapia-
   de-pareja/, disponible para el resto de páginas de servicio
   que sumen esta pieza (SV_Copy_Servicios.md).
   ───────────────────────────────────────────────────────── */
.sv-page-subtitulo {
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	font-size: 19px;
	color: var(--wp--preset--color--azul-primario);
	text-align: center;
	margin: 0 0 4px;
}

/* ─────────────────────────────────────────────────────────
   Problemáticas frecuentes — grilla de 3 tarjetas, mismo
   tratamiento visual que las tarjetas de testimonios (borde,
   radio 20px, ver patterns/home-testimonios.php) para que ambos
   componentes se sientan de la misma familia.
   ───────────────────────────────────────────────────────── */
.sv-problemas-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 24px);
}

.sv-problema-card {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 20px;
	padding: 24px;
}

.sv-problema-titulo {
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	font-size: 17px;
	color: var(--wp--preset--color--azul-profundo);
	margin: 0 0 8px;
}

.sv-problema-texto {
	font-family: 'Lora', serif;
	font-size: 15px;
	line-height: 1.55;
	color: var(--wp--preset--color--texto-secundario);
	margin: 0;
}

@media (max-width: 768px) {
	.sv-problemas-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}
}

/* ─────────────────────────────────────────────────────────
   FAQ en acordeón — <details>/<summary> nativo: sin JS propio,
   accesible por teclado y con toggle gratis del navegador. La
   pregunta va en <h3> dentro de <summary> para que SEOPress
   pueda marcarla con schema FAQPage (SV_Copy_Servicios.md,
   Notas de implementación) sin perder el comportamiento de
   acordeón.
   ───────────────────────────────────────────────────────── */
.sv-faq-item {
	border-bottom: 1px solid var(--wp--preset--color--borde);
	padding: 18px 0;
}

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

.sv-faq-item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	cursor: pointer;
	list-style: none;
}

.sv-faq-item > summary::-webkit-details-marker {
	display: none;
}

.sv-faq-item > summary > h3 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	font-size: 17px;
	color: var(--wp--preset--color--azul-profundo);
	margin: 0;
}

.sv-faq-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1.5px solid var(--wp--preset--color--azul-primario);
	color: var(--wp--preset--color--azul-primario);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Montserrat', sans-serif;
	font-size: 15px;
	line-height: 1;
	transition: transform 200ms ease;
}

.sv-faq-item[open] .sv-faq-icon {
	transform: rotate(45deg);
}

.sv-faq-item > p {
	font-family: 'Lora', serif;
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--texto-secundario);
	margin: 12px 0 0;
}

/* ─────────────────────────────────────────────────────────
   Biblioteca (home) — 3 artículos recientes.
   Ver patterns/home-biblioteca.php. Sin imagen destacada: la
   jerarquía la llevan la categoría, el título y la fecha.
   ───────────────────────────────────────────────────────── */
/* El encabezado (título + bajada + link) ya no vive acá: desde el
   Hito 3 es wp:columns/wp:heading/wp:paragraph nativos dentro del
   propio pattern, sin clases propias. Ver SV_Flujo_Trabajo_Lecciones.md,
   Hito 3, y patterns/home-biblioteca-legacy-wphtml.php para la
   versión anterior. */

/* La grilla la genera wp:post-template, que trae su propia clase
   de layout. Se fuerza grid de 3 y se quitan los bullets porque
   post-template renderiza un <ul>. */
.sv-biblioteca-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 2.5vw, 32px);
	list-style: none;
	margin: 0;
	padding: 0;
}

.sv-biblioteca-grid > li {
	list-style: none;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 20px;
	padding: 26px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	box-sizing: border-box;
}

.sv-biblioteca-cat {
	color: var(--wp--preset--color--verde) !important;
	margin: 0 !important;
}

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

.sv-biblioteca-post-titulo {
	font-family: 'Montserrat', sans-serif;
	font-size: 20px !important;
	font-weight: 500;
	line-height: 1.3;
	margin: 0 !important;
}

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

.sv-biblioteca-post-titulo a:hover {
	color: var(--wp--preset--color--azul-primario);
}

.sv-biblioteca-extracto {
	font-family: 'Lora', serif;
	font-size: 16px !important;
	line-height: 1.6;
	margin: 0 !important;
}

/* La fecha cierra la tarjeta abajo, alineada al pie aunque los
   extractos tengan distinto largo. */
.sv-biblioteca-fecha {
	font-family: 'Montserrat', sans-serif;
	font-size: 13px !important;
	margin: auto 0 0 0 !important;
	padding-top: 8px;
	/* La traducción es_CL de WordPress entrega el mes capitalizado
	   ("22 de Julio, 2026"), pero en español los meses van en
	   minúscula. El formato de fecha está en la opción date_format
	   del sitio, así que la corrección ortográfica se hace acá. */
	text-transform: lowercase;
}

/* ─────────────────────────────────────────────────────────
   Cierre / CTA (home) — el punto de mayor intención de la
   página. Un titular grande, una línea y un botón. Nada más.
   Ver patterns/home-cierre.php. Bloques nativos desde el Hito 3:
   sin clases propias — el titular usa el token "xx-large", la
   línea usa el token de color "texto-sobre-oscuro" (mismo que el
   footer) y el botón es un wp:button normal, que ya hereda el
   estilo global de botón de theme.json (fondo oro, hover
   oro-hover, radio pill). Ver SV_Flujo_Trabajo_Lecciones.md,
   Hito 3, y home-cierre-legacy-wphtml.php para la versión anterior.
   ───────────────────────────────────────────────────────── */

/* Footer: ver patterns/footer.php — reconstruido solo con bloques
   nativos (wp:columns, wp:list, wp:buttons) y atributos de
   theme.json. La versión anterior (con esta sección completa de
   CSS, ~130 líneas) queda como referencia en
   patterns/footer-legacy-wphtml.php.

   Una sola excepción real: wp:list no tiene una variante nativa
   "sin viñeta" (a diferencia de color/tipografía/spacing, esto no
   es un atributo de bloque expresable vía theme.json), así que acá
   sí corresponde una regla propia — puntual, no repetida por
   componente. */
.sv-list-plain {
	list-style: none;
	padding-left: 0;
}

/* ─────────────────────────────────────────────────────────
   Hero del home — contenedor con foto de fondo, header propio
   flotando adentro, H1 centrado y bloque inferior anclado.
   Ver patterns/home-hero.php. No usa el header global (parts/header.php)
   en la portada: el header vive dentro de este contenedor.

   .hero-wrapper usa la técnica full-bleed clásica reforzada
   (100vw + margin-left:calc(50% - 50vw), no el % que dependía de
   que WordPress cancelara el padding anidado a la perfección).
   Es matemáticamente robusta a cualquier nivel de anidamiento de
   bloques porque solo depende de que los ancestros estén
   centrados — no de la cancelación exacta de padding de N niveles.
   ───────────────────────────────────────────────────────── */
/* hero-edge-gap y page-hero-height ya no viven acá: se movieron a
   theme.json → settings.custom (--wp--custom--hero-edge-gap,
   --wp--custom--page-hero-height — este último hoy en 60vh, editar
   ahí cambia el alto del hero de página secundaria en todas las
   que lo usan a la vez). hero-bg-color se retiró: era un duplicado
   exacto de --wp--preset--color--base, así que .hero-wrapper
   referencia el token de color directamente más abajo — sigue
   siendo la misma responsabilidad (fondo de respaldo del hero
   mientras el canvas pinta su primer frame; ver
   patterns/home-hero.php para el mismo valor en el CONFIG del
   script). Ver SV_Flujo_Trabajo_Lecciones.md, Hito 1. */

.hero-wrapper {
	/* % en vez de vw a propósito: % del contenedor SIEMPRE excluye la
	   scrollbar en cualquier navegador/versión — no depende de que el
	   navegador implemente "vw ya descuenta scrollbar-gutter:stable"
	   (eso solo llegó en Chrome 145+, y es inconsistente entre
	   navegadores/versiones más viejas). El wrapper alignfull de más
	   arriba ya saca este bloque del límite de 645px de forma confiable
	   (confirmado leyendo el código fuente de WP), así que % aquí ya
	   opera sobre el ancho real de la página, no sobre el contentSize. */
	width: calc(100% - (var(--wp--custom--hero-edge-gap) * 2));
	margin: var(--wp--custom--hero-edge-gap) auto;
	border-radius: 40px;
	overflow: hidden;
	position: relative;
	height: calc(100vh - (var(--wp--custom--hero-edge-gap) * 2));   /* fallback */
	height: calc(100svh - (var(--wp--custom--hero-edge-gap) * 2));  /* mejora progresiva, no recalcula en cada scroll como dvh */
	min-height: 420px;
	background-color: var(--wp--preset--color--base);
}

/* WordPress inyecta ":root :where(.is-layout-flow) > :first-child {
   margin-block-start: 0}" globalmente (para que el primer bloque de
   cualquier contenedor no tenga doble espaciado). :root + :first-child
   le dan más especificidad de la que parece pese al :where(), así que
   le gana a la regla de arriba y el hero queda pegado arriba. Esta
   declaración puntual restaura el gap superior. */
.hero-wrapper {
	margin-block-start: var(--wp--custom--hero-edge-gap) !important;
}

/* ─────────────────────────────────────────────────────────
   Hero de página secundaria (Equipo, Método, Servicios y sus
   subpáginas) — mismo panel redondeado que el hero del home
   (.hero-wrapper: ancho, margen, radio, fondo, overflow, el fix de
   margin-block-start de arriba), solo con otro alto: 2/3 de la
   ventana en vez de una ventana completa (--wp--custom--page-hero-height,
   editable en theme.json → settings.custom).

   Funciona sin pelear contra el padding-top del contenido de la
   página porque estas páginas usan una plantilla propia
   (templates/page-hero.html) donde el post-content NO tiene
   padding-top — el hero limpia el header fijo con el mismo
   margin-block-start:hero-edge-gap de .hero-wrapper, exactamente
   como en el home. Si este hero se pusiera en una página con la
   plantilla normal (templates/page.html, que sí tiene padding-top),
   quedaría con un espacio doble arriba.

   Generado por sv_page_hero() en functions.php. ───────────────── */
.hero-wrapper.sv-page-hero {
	/* Sin la mejora progresiva a svh que usa .hero-wrapper (pensada
	   para el navegador móvil, donde la barra del navegador
	   aparece/desaparece) — este hero es un desarrollo pensado para
	   escritorio, vh alcanza. */
	height: calc(var(--wp--custom--page-hero-height) - (var(--wp--custom--hero-edge-gap) * 2));
	min-height: 320px;
}

.sv-page-hero-content {
	/* Anclado abajo, no centrado: el texto termina 10vh antes del borde
	   inferior del wrapper (que mide --wp--custom--page-hero-height,
	   60vh) — o sea que el bloque de texto cierra a los 50vh.
	   bottom:10vh logra ese margen directamente sin tener que calcular
	   la altura del texto. */
	position: absolute;
	bottom: 10vh;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	text-align: center;
	width: 90%;
	max-width: 900px;
}

.sv-page-hero-eyebrow {
	font-family: 'Montserrat', sans-serif;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(254, 251, 247, 0.75);
	margin: 0 0 14px 0;
}

.sv-page-hero-title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: clamp(40px, 5.5vw, 72px);
	color: var(--wp--preset--color--base);
	line-height: 1.05;
	letter-spacing: 0.02em;
	margin: 0;
}

@media (max-width: 768px) {
	.sv-page-hero-title {
		font-size: clamp(32px, 9vw, 44px);
	}

	.sv-page-hero-eyebrow {
		font-size: 13px;
	}
}

/* Se mantienen por si más adelante se agrega una foto real de fondo
   (ver notas en home-hero.php). Sin <img class="hero-background"> en el
   markup actual, estas reglas quedan inactivas. */
.hero-background {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.hero-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 67, 100, 0.35);
}

.hero-header {
	/* fixed: el header debe flotar SOBRE el contenido (superpuesto al
	   inicio del hero/página), no empujarlo hacia abajo — por eso no
	   sirve sticky (que reserva su propio espacio en el flujo antes de
	   engancharse). El bloque de abajo (hero o post-content) sigue
	   partiendo desde el borde superior real de la página; el header
	   se inserta encima con position:fixed + z-index, sin desplazar
	   nada. Esta misma posición es fija en todas las páginas y durante
	   todo el scroll. Requiere compensar con padding-top en
	   templates/page.html (el hero ya tiene su propio margen).

	   IMPORTANTE: usa var(--wp--custom--hero-edge-gap) — la MISMA variable que
	   .hero-wrapper — para top/left/right, en vez de un valor fijo en
	   px. Antes usaba 20px hardcodeado mientras .hero-wrapper usa
	   clamp(10px,2.2vw,32px): a cualquier ancho donde el clamp no diera
	   exactamente 20px (o sea, casi siempre — coincide solo cerca de
	   909px de viewport), el header quedaba más angosto/ancho que el
	   hero y con un top distinto, pareciendo "desalineado". Compartir
	   la misma variable los mantiene equidistantes SIEMPRE, sin
	   importar el tamaño de pantalla. */
	position: fixed;
	top: calc((var(--wp--custom--hero-edge-gap) * 2.5));
	left: calc((var(--wp--custom--hero-edge-gap) * 3));
	right: calc((var(--wp--custom--hero-edge-gap) * 3));
	z-index: 100;
	display: flex;
	align-items: center;
	/* Sin height fijo: con bloques nativos (Hito 4) el hijo más alto
	   (el botón "Agendar", ~35px con line-height:1) ya no calza en
	   los 55px viejos (pensados para el header wp:html anterior, con
	   line-height distinto) — se salía de la píldora y rompía el
	   centrado. Con alto intrínseco (contenido + padding) el
	   centrado vertical queda garantizado siempre, sin un número
	   mágico que haya que recalcular cada vez que cambie el
	   contenido de adentro. Ver SV_Flujo_Trabajo_Lecciones.md. */
	justify-content: space-between;
	/* Sin backdrop-filter: es una causa conocida de glitches de
	   renderizado (aparece como bloque sólido/negro en vez de blur
	   translúcido) en Chrome/Windows con escalado de pantalla
	   fraccionario (125%/150%). El fondo ya es 92% opaco, alcanza
	   para legibilidad sin necesitar el blur. */
	background: rgba(254, 251, 247, 0.94);
	/* Mismo radio que .hero-wrapper (24px), no una píldora completa —
	   así coinciden las proporciones con la referencia (Proone Labs),
	   donde el header usa un rectángulo redondeado, no un pill. */
	border-radius: 40px;
	padding: 12px 20px;
}

/* ─────────────────────────────────────────────────────────
   wp:navigation (Hito 4, patterns/header.php) — la única
   excepción CSS real de esta conversión, documentada.

   El bloque nativo SÍ resuelve el menú hamburguesa de mobile
   (botón + panel + foco atrapado + Escape, todo manejado por
   @wordpress/interactivity, cero JS propio) pero NO tiene un modo
   "horizontal en desktop": con overlayMenu:"mobile", WordPress
   envuelve los links en .wp-block-navigation__responsive-container,
   que es display:none por defecto y solo se muestra vía la clase
   .is-menu-open que pone el botón al hacer click — sin importar el
   ancho de pantalla. Confirmado leyendo wp-includes/blocks/navigation
   (style.css y view.js): no hay ninguna media query ni container
   query que lo muestre en línea en desktop. Es una decisión
   consciente del usuario mantener el bloque nativo (por el menú
   mobile accesible que da gratis) y agregar este override chico en
   vez de volver a un menú 100% custom (ver
   SV_Flujo_Trabajo_Lecciones.md, Hito 4).

   768px, no los 600px que trae el bloque por defecto: mismo
   breakpoint que el resto del sitio (WhatsApp float, .sv-page-hero,
   etc.) — se reafirma el botón visible hasta ahí en vez de dejar
   el hueco de 600-767px sin botón NI contenedor visible que deja
   el default de WordPress. */
.hero-header .wp-block-navigation__responsive-container-open {
	display: flex;
}

.hero-header .wp-block-navigation__container {
	gap: 32px;
}

@media (min-width: 768px) {
	.hero-header .wp-block-navigation__responsive-container-open {
		display: none;
	}

	/* !important: .wp-block-navigation__responsive-container:not(.is-menu-open.is-menu-open)
	   trae más especificidad (0,3,0) que una regla de clases simple —
	   ver nota del bloque de arriba. */
	.hero-header .wp-block-navigation__responsive-container {
		display: flex !important;
		position: static !important;
		background: none !important;
		padding: 0 !important;
		animation: none !important;
	}

	.hero-header .wp-block-navigation__responsive-container-content {
		display: flex !important;
	}
}

/* Fondo animado del hero (canvas 2D, ver script en patterns/home-hero.php).
   Vive dentro de .hero-wrapper (que ya tiene position:relative +
   overflow:hidden), en z-index 0 — por debajo de .hero-headline (5) y
   .hero-bottom (10), que quedan encima sin necesitar cambios propios. */
.sv-hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.sv-hero-bg canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.hero-headline {
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 5;
	text-align: center;
	width: 90%;
	max-width: 1900px;
	margin-top: 0;
}

.hero-headline h1 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: clamp(100px, 6vw, 88px);
	/* Texto oscuro porque el fondo animado (.sv-hero-bg, ver
	   patterns/home-hero.php) es claro (crema + blobs traslúcidos de
	   la paleta). Si el CONFIG del canvas pasa a tonos oscuros, cambiar
	   a var(--wp--preset--color--base). */
	color: var(--wp--preset--color--base);
	line-height: 1;
	letter-spacing: 0.1em;
	margin: 0;
}

.hero-bottom {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 10;
	/* Transparencia del fondo blanco: cambiar el último número (alpha,
	   0 a 1). 1 = opaco. */
	background: rgba(254, 251, 247, 0.3);
	border-radius: 0 0 24px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 45px 75px;
	/* Altura del bloque: hoy "auto" (la da el contenido + el padding
	   de arriba). Poner un valor fijo, ej. 140px, para forzarla. */
	height: auto;
}

.hero-bottom-text p {
	font-family: 'Lora', serif;
	/* Tamaño de letra del texto de la izquierda (escritorio). El valor
	   mobile es independiente — ver .hero-bottom-text p dentro de
	   @media (max-width: 768px) más abajo en este archivo. */
	font-size: 21px;
	font-weight: 400;
	color: var(--wp--preset--color--azul-profundo);
	line-height: 1.4;
	/* Ancho del texto de la izquierda (se corta con salto de línea al
	   llegar a este ancho). */
	max-width: 600px;
	margin: 0;
}

.hero-bottom-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.btn-outline-dark {
	border: 1.5px solid var(--wp--preset--color--azul-profundo);
	background: transparent;
	color: var(--wp--preset--color--azul-profundo);
	border-radius: 100px;
	/* Tamaño del botón "Conoce el equipo" (escritorio): padding
	   (alto/ancho) + font-size (letra dentro). El valor mobile es
	   independiente — ver .btn-outline-dark dentro de
	   @media (max-width: 768px) más abajo. */
	padding: 15px 30px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	font-size: 18px;
	text-decoration: none;
	white-space: nowrap;
}

.btn-primary-dark {
	background: var(--wp--preset--color--oro);
	color: var(--wp--preset--color--azul-profundo);
	border-radius: 100px;
	/* Tamaño del botón "Agendar" (escritorio): mismo criterio que
	   .btn-outline-dark, mismo override mobile más abajo. */
	padding: 15px 30px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	font-size: 18px;
	text-decoration: none;
	white-space: nowrap;
}

.btn-scroll {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1.5px solid var(--wp--preset--color--contrast);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-size: 18px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.btn-scroll:hover {
	background: var(--wp--preset--color--gris-alterno);
}

@media (max-width: 768px) {
	.hero-wrapper {
		/* El gap ya se achica solo por el clamp() de
		   --wp--custom--hero-edge-gap; se mantiene equidistante en vez
		   de ir a full-bleed. */
		height: calc(100vh - (var(--wp--custom--hero-edge-gap) * 2));
		height: calc(100svh - (var(--wp--custom--hero-edge-gap) * 2));
	}

	.hero-header {
		/* top/left/right ya vienen de la regla base (var(--wp--custom--hero-edge-gap),
		   compartida con .hero-wrapper) — el clamp() los achica solo en
		   mobile, no hace falta un valor fijo acá. */
		padding: 10px 16px;
	}

	/* Menú mobile: sin overrides propios desde el Hito 4 — el panel,
	   la posición y los estilos del overlay los maneja wp:navigation
	   nativo (overlayBackgroundColor/overlayTextColor en
	   patterns/header.php). Ver la sección "wp:navigation (Hito 4)"
	   más arriba para el único override real (mostrarlo en línea
	   arriba de 768px). */

	.hero-headline h1 {
		font-size: clamp(50px, 14vw, 70px);
		line-height: 1.5;
	}

	.hero-bottom {
		flex-direction: column;
		align-items: flex-start;
		padding: 20px 20px;
		gap: 16px;
	}

	.hero-bottom-text p {
		/* Tamaño de letra del texto de la izquierda, solo mobile —
		   independiente del valor de escritorio (línea ~423). */
		font-size: 18px;
	}

	.hero-bottom-actions {
		width: 100%;
		/* border-box: sin esto, width:100% + padding-right suman un
		   ancho total mayor al 100% en vez de repartirlo adentro — la
		   franja de más se recorta por el overflow:hidden de
		   .hero-wrapper en vez de correr los botones a la izquierda. */
		box-sizing: border-box;
		/* Corre los botones a la izquierda para dejar libre el rincón
		   donde flota el botón de WhatsApp (.sv-whatsapp-float), en vez
		   de mover el WhatsApp. */
		padding-right: var(--wp--custom--whatsapp-clearance);
		/* Siempre en una fila: apilar los botones compacta demasiado el
		   resto del bloque. En vez de un flex-wrap como red de
		   seguridad, los botones se achican lo suficiente (ver
		   .btn-outline-dark/.btn-primary-dark más abajo) para entrar en
		   una sola línea junto con el hueco reservado para WhatsApp. */
		gap: 8px;
	}

	.btn-outline-dark,
	.btn-primary-dark {
		flex: 1;
		text-align: center;
		justify-content: center;
		/* Tamaño de los botones, solo mobile — padding y font-size
		   independientes del valor de escritorio (líneas ~447/465).
		   Más compactos que antes para que ambos + el hueco de WhatsApp
		   quepan siempre en una sola fila (ver .hero-bottom-actions). */
		padding: 8px 14px;
		font-size: 13px;
	}

	.btn-scroll {
		display: none;
	}

	/* Introducción / Mirada sistémica — mobile. Apila título y
	   párrafo en una columna (en vez de 280px + resto), y el
	   bloque de 3 columnas (Cuerpo/Mente/Entorno) también pasa a
	   una columna para que los subtítulos no queden apretados.
	   padding-top/bottom con !important porque el valor de
	   escritorio viene inline (style="") desde el bloque de
	   WordPress — una clase normal no le gana a un inline style. */
	.sv-intro-section {
		padding-top: max(var(--wp--preset--spacing--xxl), calc(var(--wp--custom--header-clearance) + 12px)) !important;
		padding-bottom: var(--wp--preset--spacing--xxl) !important;
	}

	.sv-intro-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.sv-intro-grid h2 {
		/* Tamaño del título de la izquierda, solo mobile. */
		font-size: 26px;
	}

	.sv-intro-text p {
		/* Tamaño del párrafo, solo mobile. */
		font-size: 16px;
		line-height: 1.55;
		margin-bottom: 10px;
	}

	.sv-bienestar {
		margin-top: var(--wp--preset--spacing--xl);
	}

	.sv-bienestar-heading {
		/* Tamaño de "¿Cómo entendemos el bienestar?", solo mobile. */
		font-size: 18px;
		margin-bottom: 4px;
	}

	.sv-bienestar-grid {
		/* En mobile las 3 partes van en una fila de 3 columnas
		   angostas, no apiladas: son pares título+subtítulo muy
		   cortos, y apilarlos gastaba 3 veces más alto vertical
		   del que la sección tiene disponible a 100svh. */
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 12px;
		padding-top: 20px;
	}

	.sv-bienestar-grid h4 {
		/* Tamaño del título de cada columna, solo mobile. */
		font-size: 15px;
		margin-bottom: 4px;
	}

	.sv-bienestar-grid p {
		/* Tamaño del subtítulo de cada columna, solo mobile. */
		font-size: 12px;
		line-height: 1.35;
	}

	/* Equipo — mobile. Dos tarjetas completas y un asomo de la
	   tercera: dos siempre tienen que caber, incluso en el celular
	   más angosto (320px) — el asomo es lo que avisa que el
	   carrusel sigue, mismo criterio que en desktop/tablet. */
	.sv-equipo-carousel {
		--sv-equipo-visible: 2.15;
		--sv-equipo-gap: 14px;
	}

	/* Sin overrides de ancho propios en mobile: .sv-equipo-full,
	   .sv-equipo-intro y .sv-equipo-cta ya comparten el mismo ancho
	   que el resto de las secciones del sitio en todos los tamaños
	   (theme.json → settings.layout.contentSize). */

	.sv-equipo-intro {
		margin-bottom: 28px;
	}

	.sv-equipo-bajada {
		font-size: 16px;
		line-height: 1.55;
	}

	/* El aspecto visual de la tarjeta vive en .sv-team-card, no en
	   .sv-equipo-card (que en mobile solo controla el tamaño del
	   slot vía --sv-equipo-visible, ver arriba). */
	.sv-team-card {
		padding: 14px 14px 60px 14px;
		border-radius: var(--wp--preset--border-radius--md);
		gap: 10px;
	}

	.sv-team-card-photo {
		border-radius: 12px;
	}

	.sv-team-card-nombre {
		font-size: 16px;
	}

	.sv-team-card-especialidad {
		font-size: 14px;
	}

	.sv-equipo-cta {
		margin-top: 28px;
	}

	.sv-equipo-titulo {
		font-size: 26px;
	}

	/* Los controles bajan a su propia línea: al lado de un título
	   de 26px no quedaba ancho para los dos botones. */
	.sv-equipo-intro {
		align-items: flex-start;
		gap: 18px;
	}

	/* ── Testimonios — mobile ──
	   Sin overrides propios desde el Hito 3: wp:columns (encabezado
	   y las 3 tarjetas) se apila solo por debajo de 782px, mismo
	   comportamiento nativo que Biblioteca. Único tamaño de tarjeta
	   en todos los breakpoints (simplificación aceptada, ver
	   patterns/home-testimonios.php). */

	/* ── Biblioteca — mobile ──
	   El encabezado ya no necesita overrides mobile propios: es
	   wp:columns nativo (Hito 3), que apila solo por debajo del
	   breakpoint de bloques (782px) sin CSS adicional. */

	/* Dos artículos en mobile: el tercero no cabe en 100svh junto
	   al encabezado. */
	.sv-biblioteca-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.sv-biblioteca-grid > li {
		padding: 18px;
		border-radius: var(--wp--preset--border-radius--md);
		gap: 8px;
	}

	.sv-biblioteca-post-titulo {
		font-size: 17px !important;
	}

	.sv-biblioteca-extracto {
		font-size: 14px !important;
	}

	/* Cierre / CTA: sin overrides de mobile propios desde el Hito 3 —
	   wp:heading/wp:button nativos, el tamaño fluido del token
	   xx-large y wp:buttons ya se ajustan solos. Ver
	   patterns/home-cierre.php. */

	/* Footer: sin overrides de mobile — wp:columns se apila solo a
	   una columna (comportamiento nativo de WordPress), sin media
	   query propia. Ver patterns/footer.php. */

	/* Ajustes finales de alto en mobile. Las secciones son 100svh
	   con overflow:hidden, así que lo que sobra se recorta: estos
	   recortes de espaciado son los que hacen que cada sección
	   cierre justo en vez de perder contenido por abajo. */
	.sv-equipo-section,
	.sv-biblioteca-section {
		padding-top: max(var(--wp--preset--spacing--xxl), calc(var(--wp--custom--header-clearance) + 12px)) !important;
		padding-bottom: var(--wp--preset--spacing--xxl) !important;
	}

	.sv-equipo-btn {
		width: 40px;
		height: 40px;
		font-size: 15px;
	}
}

/* Tablet / laptop angosto: 5,5 tarjetas serían ilegibles bajo
   los ~1200px, así que la cuenta baja por tramos. Un solo valor
   por tramo, el ancho de tarjeta se recalcula solo. */
@media (min-width: 769px) and (max-width: 1100px) {
	.sv-equipo-carousel {
		--sv-equipo-visible: 2.5;
		--sv-equipo-gap: 18px;
	}
}

@media (min-width: 1101px) and (max-width: 1440px) {
	.sv-equipo-carousel {
		--sv-equipo-visible: 4.5;
	}
}