/**
 * Bloques de Gutenberg (y contenedores de Spectra).
 *
 * Todo se apoya en las clases nativas de WordPress para que la clienta pueda
 * maquetar sin escribir CSS. Las clases propias (prefijo .sg-) son opcionales
 * y se añaden desde "Avanzado → Clases CSS adicionales" o desde los estilos
 * de bloque registrados en inc/block-styles.php.
 *
 * @package SilviaGarcia
 */

/* ==========================================================================
   1. Grupos, columnas y contenedores
   ========================================================================== */

/* Un grupo con fondo propio necesita relleno para que el color no ahogue al texto. */
.wp-block-group.has-background {
	padding-block: clamp(2.5rem, 6vw, 4rem);
}

/**
 * Un grupo a ancho completo ES una sección, tenga color de fondo o no.
 *
 * El aire vertical no puede depender del color: las secciones que heredan el
 * fondo de la página (Lino) son visualmente idénticas a no tener color, y antes
 * se quedaban sin relleno. Se aplica también en el editor, porque blocks.css se
 * carga en el lienzo.
 */
.wp-block-group.alignfull,
.wp-block-columns.alignfull {
	padding-block: var(--sg-section-gap);
}

/* Cualquier grupo con fondo Arena hereda el borde tonal de la maqueta. */
.wp-block-group.has-arena-background-color,
.wp-block-group.has-verde-abeto-background-color {
	border-block: 1px solid var(--sg-fir-05);
}

/* Secciones oscuras: invertimos el color del texto y de los titulares. */
.has-verde-abeto-background-color:not(.has-text-color),
.sg-section--dark {
	color: var(--sg-linen);
}

.has-verde-abeto-background-color:not(.has-text-color) :where(h1, h2, h3, h4, h5),
.sg-section--dark :where(h1, h2, h3, h4, h5) {
	color: var(--sg-linen);
}

.has-verde-abeto-background-color:not(.has-text-color) :where(p, li),
.sg-section--dark :where(p, li) {
	color: var(--sg-linen-70);
}

/**
 * Secciones de cierre (CTA).
 *
 * El texto se estrecha respecto al contenedor para que el titular y el párrafo
 * caigan en dos líneas y no en una tirada larga. Los anchos salen de medir el
 * texto real con las métricas de las fuentes (ver --sg-cta-* en tokens.css).
 *
 * Ojo con la especificidad: por eso el ancho se declara DOS veces.
 *
 *   --sg-width  es lo que de verdad manda dentro de una sección. El layout
 *               «constrained» de WordPress fija el contenedor a todos los
 *               hijos directos con un selector de (0,3,0) que ninguna regla
 *               razonable de tema puede ganar; lo que hacemos es alimentarlo
 *               con la variable que ya lee (ver layout.css). Aquí va en
 *               (0,1,1) para ganar a `.sg-measure`, que también la declara.
 *   max-width   cubre el mismo cierre fuera de .entry-content, donde aquella
 *               regla no llega.
 *
 * Antes había un único `max-width` en (0,1,0): perdía contra las dos cosas, y
 * por eso el párrafo del cierre nunca llegó a estrecharse.
 */
.has-verde-abeto-background-color h2,
.sg-section--dark h2 {
	--sg-width: var(--sg-cta-title);
	max-width: var(--sg-cta-title);
	margin-inline: auto;
	margin-bottom: calc(var(--sg-unit) * 4);
}

.has-verde-abeto-background-color p,
.sg-section--dark p {
	--sg-width: var(--sg-cta-text);
	max-width: var(--sg-cta-text);
	margin-inline: auto;

	/* Reparte las dos líneas en vez de dejar una larga y una corta. */
	text-wrap: balance;
}

/*
 * Filete de acento bajo el titular del cierre, como en la maqueta. Es el mismo
 * trazo que el estilo de bloque «Filete inferior» (ver punto 4); aquí va
 * siempre, sin que la clienta tenga que aplicarlo.
 */
.has-verde-abeto-background-color h2::after,
.sg-section--dark h2::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	margin: calc(var(--sg-unit) * 3) auto 0;
	background-color: var(--sg-clay);
}

/* Columnas ---------------------------------------------------------------- */

.wp-block-columns {
	gap: var(--sg-gutter);
}

@media (min-width: 782px) {

	.wp-block-columns {
		gap: calc(var(--sg-unit) * 4);
	}

	.wp-block-columns.is-style-editorial {
		gap: calc(var(--sg-unit) * 8);
	}
}

/**
 * Rejilla automática: las columnas dejan de repartirse el ancho a partes
 * iguales y pasan a una cuadrícula que ajusta el número de piezas por fila
 * según el espacio (4 en escritorio, 2 en tablet, 1 en móvil).
 */
.wp-block-columns.is-style-sg-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: calc(var(--sg-unit) * 3);
}

.wp-block-columns.is-style-sg-grid > .wp-block-column {
	flex-basis: auto;

	/*
	 * Cada pieza se declara contenedor de consulta para que su titular pueda
	 * medirse contra el ancho de la propia pieza. Ver la regla de abajo.
	 */
	container-type: inline-size;
}

/**
 * Titulares de recuadro que no parten la palabra.
 *
 * «Acompañamiento» en «Cómo puedo ayudarte» se salía por un pelo y dejaba la
 * «o» sola en la segunda línea. No era cuestión de apreciación: medido con las
 * métricas reales de Libre Caslon Text, la palabra ocupa 202,1 px a 24 px, y
 * el hueco disponible en la rejilla de cuatro columnas es de 203 px.
 *
 *   contenedor 1140 − 3 huecos de 24 = 1068 ⇒ columna 267 px
 *   267 − 32 px de relleno a cada lado     ⇒ 203 px útiles
 *
 * Novecientas micras de margen. Cualquier cosa —el redondeo del navegador, una
 * barra de desplazamiento que estreche la ventana, la fuente de reserva
 * mientras carga la real— la empuja a la segunda línea. Subir el ancho o bajar
 * el cuerpo «un poco» solo movería el problema de sitio.
 *
 * Por eso el tamaño se limita contra el ancho del propio recuadro: `11cqi` son
 * 11 unidades por cada 100 del ancho interior de la pieza. Con `min()`, el
 * titular mantiene sus 24 px siempre que quepan y solo encoge cuando no.
 *
 *   4 columnas (203 px útiles) → 22,3 px  → la palabra ocupa 188 px, entra
 *   3 columnas (220 px útiles) → 24 px    → sigue entrando, no encoge
 *   2 columnas o móvil         → 24 px    → sin cambios
 *
 * Es decir: solo interviene en la rejilla de cuatro columnas de escritorio,
 * que es justo donde estaba el problema, y protege de paso a cualquier palabra
 * larga que venga después.
 *
 * Se excluye `.sg-title-sm`, que es el titular compacto del bento y de las
 * listas con icono: tiene su propio cuerpo de 1 rem y esta regla, con más
 * especificidad, se lo pisaría.
 *
 * Si el navegador no entiende `cqi`, la declaración entera se descarta y manda
 * el tamaño de base.css, que es el comportamiento de siempre.
 *
 * Reverificado el 16/09/2026 al cambiar el titular a Lato: "Acompañamiento" en
 * Lato 700 a 24 px mide 190,8 px, menos que los 202,1 px de Libre Caslon Text
 * con los que se calibró el 11cqi. El margen no se cierra, se abre; no hace
 * falta tocar el valor.
 */
.is-style-sg-tile > .wp-block-heading:not(.sg-title-sm) {
	font-size: min(var(--sg-headline-sm), 11cqi);
}

/* Rejilla de dos columnas fijas, para listas de items con icono. */
.wp-block-columns.sg-grid-2 {
	display: grid;
	grid-template-columns: 1fr;
	gap: calc(var(--sg-unit) * 4);
}

.wp-block-columns.sg-grid-2 > .wp-block-column {
	flex-basis: auto;
}

@media (min-width: 600px) {

	.wp-block-columns.sg-grid-2 {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Una pieza que ocupa la fila entera (el último item impar). */
	.sg-span-2 {
		grid-column: span 2;
	}
}

/**
 * Ritmo escalonado: en escritorio, las piezas pares crecen en vertical y todas
 * se alinean por su base. Rompe la retícula plana sin desordenar la lectura.
 *
 * Hay que devolver `height: auto` a las columnas porque el estilo Recuadro las
 * estira al 100% de la fila, que es justo lo que aquí no queremos.
 */
@media (min-width: 1024px) {

	.wp-block-columns.sg-stagger {
		align-items: end;
	}

	.wp-block-columns.sg-stagger > .wp-block-column {
		height: auto;
	}

	.wp-block-columns.sg-stagger > .wp-block-column:nth-child(even) {
		padding-block: calc(var(--sg-unit) * 7);
	}
}

/**
 * Bento de seis piezas.
 *
 * Móvil: una columna. Tablet: dos. Escritorio: retícula de seis columnas con
 * una pieza destacada que ocupa media anchura y doble altura, dos apiladas a su
 * lado y tres iguales debajo.
 */
.wp-block-columns.sg-bento {
	display: grid;
	grid-template-columns: 1fr;
	gap: calc(var(--sg-unit) * 2);
}

.wp-block-columns.sg-bento > .wp-block-column {
	flex-basis: auto;
}

/* El titular de cada pieza va más pegado a su texto que en una sección normal. */
.wp-block-columns.sg-bento :where(h3, h4) {
	margin-bottom: calc(var(--sg-unit) * 0.5);
}

@media (min-width: 600px) {

	.wp-block-columns.sg-bento {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {

	.wp-block-columns.sg-bento {
		grid-template-columns: repeat(6, 1fr);
		grid-auto-rows: minmax(130px, auto);
	}

	.wp-block-columns.sg-bento > .wp-block-column:nth-child(1) {
		grid-column: span 3;
		grid-row: span 2;
	}

	.wp-block-columns.sg-bento > .wp-block-column:nth-child(2),
	.wp-block-columns.sg-bento > .wp-block-column:nth-child(3) {
		grid-column: span 3;
	}

	.wp-block-columns.sg-bento > .wp-block-column:nth-child(4),
	.wp-block-columns.sg-bento > .wp-block-column:nth-child(5),
	.wp-block-columns.sg-bento > .wp-block-column:nth-child(6) {
		grid-column: span 2;
	}
}

/**
 * Numeración de proceso: numera las columnas de una rejilla con una cifra
 * grande y tenue en la esquina, sin tocar el contenido.
 */
.wp-block-columns.sg-numbered {
	counter-reset: sg-columna;
}

.wp-block-columns.sg-numbered > .wp-block-column {
	position: relative;
	overflow: hidden;
	counter-increment: sg-columna;
}

.wp-block-columns.sg-numbered > .wp-block-column::after {
	content: counter(sg-columna);
	position: absolute;
	top: 0;
	right: calc(var(--sg-unit) * 2);
	color: var(--sg-sage);
	font-family: var(--sg-font-heading);
	font-size: 3.5rem;
	line-height: 1.2;
	opacity: 0.18;
	pointer-events: none;
}

/* Una columna con fondo propio es, visualmente, una tarjeta. */
.wp-block-column.has-background {
	padding: clamp(1.75rem, 4vw, 3rem);
	border-radius: var(--sg-radius-card);
	box-shadow: var(--sg-shadow-soft);
}

/* ==========================================================================
   2. Tarjetas (.sg-card / estilo de bloque "Tarjeta")
   ========================================================================== */

.sg-card,
.wp-block-group.is-style-sg-card,
.wp-block-column.is-style-sg-card {
	padding: clamp(1.75rem, 4vw, 3rem);
	background-color: var(--sg-linen);
	border: var(--sg-border);
	border-radius: var(--sg-radius-card);
	box-shadow: var(--sg-shadow-soft);
	transition: box-shadow var(--sg-transition), transform var(--sg-transition);
}

.has-arena-background-color .sg-card,
.has-arena-background-color .is-style-sg-card {
	background-color: var(--sg-linen);
}

.sg-card:hover,
.is-style-sg-card:hover {
	box-shadow: var(--sg-shadow-lift);
	transform: translateY(-3px);
}

/* ==========================================================================
   2 bis. Panel y recuadros (rediseño de la portada)
   ==========================================================================
   Sistema de superficies rectas y borde fino, alternativo a .sg-card (que
   mantiene esquina redondeada y sombra). Conviven: cada bloque elige uno.
   ========================================================================== */

/* Panel grande: una superficie clara sobre fondo Arena. */
.is-style-sg-panel {
	padding: clamp(2rem, 5vw, 4rem);
	background-color: var(--sg-linen);
	border: 1px solid var(--sg-sage-20);
	border-radius: var(--sg-radius);
	box-shadow: 0 1px 2px var(--sg-fir-03);
}

/* Recuadro de rejilla: altura completa y borde que reacciona al puntero. */
.is-style-sg-tile {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: clamp(1.5rem, 3vw, 2rem);
	background-color: var(--sg-linen);
	border: 1px solid var(--sg-sage-20);
	border-radius: var(--sg-radius);
	transition: border-color var(--sg-transition);
}

.is-style-sg-tile:hover {
	border-color: var(--sg-clay-50);
}

/* Variante centrada: basta con añadir la clase sg-text-center. */
.is-style-sg-tile.sg-text-center {
	align-items: center;
}

/* Los botones de un recuadro se pegan abajo para alinear las filas. */
.is-style-sg-tile .wp-block-buttons {
	margin-top: auto;
	padding-top: calc(var(--sg-unit) * 2);
}

.is-style-sg-tile > :last-child {
	margin-bottom: 0;
}

/* Pie de panel: filete de acento, contenido centrado. */
.sg-panel-footer {
	margin-top: calc(var(--sg-unit) * 5);
	padding-top: calc(var(--sg-unit) * 4);
	border-top: 2px solid var(--sg-clay-50);
	text-align: center;
}

.sg-panel-footer .wp-block-buttons {
	justify-content: center;
}

/* Filete superior de acento, como en las áreas de práctica. */
.sg-card--hairline::before,
.sg-hairline::before {
	content: "";
	display: block;
	width: 48px;
	height: 1px;
	margin-bottom: calc(var(--sg-unit) * 3);
	background-color: var(--sg-clay);
	transition: width var(--sg-transition);
}

.sg-card--hairline:hover::before,
.sg-hairline:hover::before {
	width: 100%;
}

/* ==========================================================================
   3. Botones
   ========================================================================== */

.wp-block-buttons {
	gap: calc(var(--sg-unit) * 2);
}

/* Fila de botones centrada sin tocar el layout del bloque. */
.wp-block-buttons.sg-center {
	justify-content: center;
}

/**
 * Geometría común. El borde transparente del botón sólido es lo que iguala su
 * tamaño con el de contorno: sin él, el borde de 1px del segundo lo haría 2px
 * más alto y más ancho.
 */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--sg-button-padding);
	border: 1px solid transparent;
	border-radius: var(--sg-radius-button);
	font-size: var(--sg-button-size);
	text-decoration: none;
	transition: background-color var(--sg-transition), color var(--sg-transition),
		border-color var(--sg-transition), transform var(--sg-transition);
}

/**
 * Botón principal: se declaran color de fondo y de texto también para :visited,
 * para que ningún estilo de enlace visitado pueda dejar el texto del mismo tono
 * que su fondo.
 */
.wp-block-button:not(.is-style-outline):not(.is-style-sg-text) > .wp-block-button__link,
.wp-block-button:not(.is-style-outline):not(.is-style-sg-text) > .wp-block-button__link:visited {
	background-color: var(--sg-btn-solid-bg);
	color: var(--sg-btn-solid-text);
}

.wp-block-button:not(.is-style-outline):not(.is-style-sg-text) .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline):not(.is-style-sg-text) .wp-block-button__link:focus {
	background-color: var(--sg-btn-solid-bg-hover);
	color: var(--sg-btn-solid-text-hover);
	transform: translateY(-2px);
}

/* Secundario (contorno) — el estilo nativo "Esquema" de WordPress. */
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link:visited {
	padding: var(--sg-button-padding);
	background-color: transparent;
	border: 1px solid color-mix(in srgb, var(--sg-btn-outline-color) 40%, transparent);
	border-radius: var(--sg-radius-button);
	color: var(--sg-btn-outline-color);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus {
	background-color: var(--sg-btn-outline-bg-hover);
	border-color: var(--sg-btn-outline-bg-hover);
	color: var(--sg-linen);
}

/* Terciario — enlace tipo "etiqueta" con subrayado fino. */
.wp-block-button.is-style-sg-text > .wp-block-button__link {
	padding: 0 0 6px;
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid var(--sg-sage-40);
	border-radius: 0;
	color: var(--sg-clay);
	font-size: var(--sg-eyebrow-size);
	font-weight: 600;
	letter-spacing: var(--sg-label-tracking);
	text-transform: uppercase;
}

.wp-block-button.is-style-sg-text > .wp-block-button__link:hover,
.wp-block-button.is-style-sg-text > .wp-block-button__link:focus {
	background-color: transparent;
	border-bottom-color: var(--sg-fir);
	color: var(--sg-fir);
}

/* Botones sobre fondo oscuro. */
.has-verde-abeto-background-color .wp-block-button.is-style-outline > .wp-block-button__link,
.has-verde-abeto-background-color .wp-block-button.is-style-outline > .wp-block-button__link:visited,
.sg-section--dark .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: var(--sg-linen-50);
	color: var(--sg-linen);
}

.has-verde-abeto-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.sg-section--dark .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--sg-linen);
	border-color: var(--sg-linen);
	color: var(--sg-fir);
}

/* ==========================================================================
   4. Titulares y textos destacados
   ========================================================================== */

/* Antetítulo en versalitas (label-caps). */
.sg-eyebrow,
.is-style-sg-eyebrow {
	display: block;
	margin-bottom: calc(var(--sg-unit) * 1.5);
	color: var(--sg-clay);
	font-family: var(--sg-font-body);
	font-size: var(--sg-eyebrow-size);
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
}

/**
 * Título breve en sans: el papel que la maqueta llama "font-button".
 *
 * Se aplica a un H3 real (no a un H5) para no romper la jerarquía de
 * encabezados: la semántica la marca la etiqueta, el tamaño esta clase.
 */
.sg-title-sm {
	margin-bottom: calc(var(--sg-unit));
	font-family: var(--sg-font-body);
	font-size: var(--sg-body-md);
	font-weight: 600;
	line-height: 1.4;
}

/* Entradilla / párrafo destacado. */
.sg-lead,
.is-style-sg-lead {
	color: var(--sg-fir);
	font-size: var(--sg-lead-size);
	font-weight: var(--sg-weight-lead);
	line-height: 1.55;
}

/**
 * Cursiva serif de acento — el recurso tipográfico de la marca.
 *
 * Cualquier fragmento en cursiva dentro de un titular se tiñe de Arcilla: es
 * la forma de destacar una palabra sin romper la jerarquía. Desde que el
 * titular pasó a Lato (sans), este acento es la única cursiva serif que
 * queda dentro de un titular — usa --sg-font-quote a propósito, para que el
 * contraste con el sans que lo rodea sea más marcado, no menos.
 */
.sg-accent,
:is(h1, h2, h3, h4) :is(em, i),
.wp-block-heading :where(em, i) {
	font-family: var(--sg-font-quote);
	font-style: italic;
	font-weight: 500;
	color: var(--sg-accent-color);

	/*
	 * Cormorant es más pequeña que Lato a igual font-size (ver
	 * --sg-accent-scale en tokens.css). line-height: 1 evita que el fragmento
	 * ampliado empuje la interlínea de la línea que lo contiene.
	 */
	font-size: calc(1em * var(--sg-accent-scale));
	line-height: 1;
}

.sg-accent--clay {
	color: var(--sg-clay);
}

/* Sobre fondo oscuro, el acento vira al verde claro para mantener contraste. */
.has-verde-abeto-background-color :is(h1, h2, h3, h4) :is(em, i),
.sg-section--dark :is(h1, h2, h3, h4) :is(em, i) {
	color: var(--sg-sage);
}

/* Titular con filete inferior de acento (se centra si el titular lo está). */
.wp-block-heading.is-style-sg-rule-under::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	margin-top: calc(var(--sg-unit) * 2);
	background-color: var(--sg-clay);
}

.wp-block-heading.is-style-sg-rule-under.has-text-align-center::after,
.wp-block-heading.is-style-sg-rule-under.sg-text-center::after {
	margin-inline: auto;
}

/**
 * Sobre un fondo Salvia el filete Arcilla no se ve (1,2:1): pasa a Blanco, como
 * en la sección de reseñas. Solo para el titular que cuelga directamente de la
 * sección: un titular dentro de una tarjeta o panel claro, aunque la sección
 * sea Salvia, conserva el filete Arcilla (el Blanco no se vería sobre Lino).
 * El color sale de --sg-rule-on-sage (tokens.css).
 */
.has-salvia-background-color > .wp-block-heading.is-style-sg-rule-under::after {
	background-color: var(--sg-rule-on-sage);
}

/* Titular subrayado: separa el título del cuerpo dentro de un recuadro. */
.wp-block-heading.is-style-sg-underline {
	width: 100%;
	margin-bottom: calc(var(--sg-unit) * 3);
	padding-bottom: calc(var(--sg-unit) * 2);
	border-bottom: 1px solid var(--sg-sage-40);
}

/* Titular con filete superior. */
.is-style-sg-rule::before {
	content: "";
	display: block;
	width: 48px;
	height: 1px;
	margin-bottom: calc(var(--sg-unit) * 3);
	background-color: var(--sg-clay);
}

/* ==========================================================================
   5. Listas
   ========================================================================== */

.wp-block-list {
	padding-left: 1.4em;
}

.wp-block-list li {
	padding-left: 0.25em;
}

/* Lista con checks (estilo de bloque "Lista con checks"). */
.wp-block-list.is-style-sg-check,
.sg-check-list {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-sg-check li,
.sg-check-list li {
	position: relative;
	padding-left: calc(var(--sg-unit) * 4.5);
	margin-bottom: calc(var(--sg-unit) * 2);
	line-height: 1.7;
}

.wp-block-list.is-style-sg-check li::before,
.sg-check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 18px;
	height: 18px;
	border-radius: var(--sg-radius-pill);
	border: 1px solid var(--sg-sage);
}

/*
 * El check va como máscara y no como imagen de fondo: una imagen lleva el color
 * escrito dentro del SVG y no puede leer variables, así que no seguía a la
 * paleta. Con máscara, el color es un background-color normal.
 */
.wp-block-list.is-style-sg-check li::after,
.sg-check-list li::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 18px;
	height: 18px;
	background-color: var(--sg-sage);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}

/* Lista con checks y separadores: cada punto en su propia línea del panel. */
.wp-block-list.is-style-sg-check-lines {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-sg-check-lines li {
	position: relative;
	margin-bottom: calc(var(--sg-unit) * 3);
	padding-left: calc(var(--sg-unit) * 5);
	padding-bottom: calc(var(--sg-unit) * 3);
	border-bottom: 1px solid var(--sg-sage-20);
	font-size: var(--sg-body-lg);
	line-height: 1.6;
}

.wp-block-list.is-style-sg-check-lines li:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

.wp-block-list.is-style-sg-check-lines li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.25em;
	width: 20px;
	height: 20px;
	background-color: var(--sg-clay);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Lista espaciada tipo "Probablemente has llegado aquí porque…". */
.wp-block-list.is-style-sg-spaced,
.sg-list-spaced {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-sg-spaced li,
.sg-list-spaced li {
	position: relative;
	padding-left: calc(var(--sg-unit) * 5);
	margin-bottom: calc(var(--sg-unit) * 4);
	font-size: var(--sg-body-lg);
	font-weight: var(--sg-weight-text);
	line-height: 1.7;
	color: var(--sg-fir-80);
}

.wp-block-list.is-style-sg-spaced li::before,
.sg-list-spaced li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 14px;
	height: 14px;
	border: 1px solid var(--sg-clay);
	border-radius: var(--sg-radius-pill);
}

/* Lista numerada de pasos (proceso). */
.wp-block-list.is-style-sg-steps,
.sg-steps {
	list-style: none;
	counter-reset: sg-step;
	padding-left: 0;
}

.wp-block-list.is-style-sg-steps li,
.sg-steps li {
	counter-increment: sg-step;
	position: relative;
	padding-left: calc(var(--sg-unit) * 7);
	margin-bottom: calc(var(--sg-unit) * 4);
	min-height: 40px;
}

.wp-block-list.is-style-sg-steps li::before,
.sg-steps li::before {
	content: counter(sg-step, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: -2px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background-color: var(--sg-sand);
	border-radius: var(--sg-radius-pill);
	color: var(--sg-clay);
	font-family: var(--sg-font-heading);
	font-size: 0.9375rem;
}

/* ==========================================================================
   6. Citas
   ========================================================================== */

.wp-block-quote {
	margin-block: calc(var(--sg-unit) * 6);
	padding-left: calc(var(--sg-unit) * 4);
	border-left: 2px solid var(--sg-clay);
}

.wp-block-quote p {
	font-family: var(--sg-font-quote);
	font-style: italic;
	font-weight: 500;
	line-height: 1.45;
}

.wp-block-quote cite,
.wp-block-quote .wp-block-quote__citation {
	display: block;
	margin-top: calc(var(--sg-unit) * 2);
	font-family: var(--sg-font-body);
	font-size: var(--sg-label);
	font-style: normal;
	letter-spacing: var(--sg-label-tracking);
	text-transform: uppercase;
	color: var(--sg-clay);
}

/**
 * Cita centrada, sin filete (estilo "Destacada").
 *
 * Es el vehículo de las frases "manifiesto": grandes, en verde abeto pleno
 * —no el fir-80 atenuado del texto secundario— para que funcionen como
 * elemento visual protagonista, no como una cita más entre otras.
 */
.wp-block-quote.is-style-sg-plain {
	padding-left: 0;
	border-left: 0;
	text-align: center;
}

.wp-block-quote.is-style-sg-plain p {
	color: var(--sg-fir);
	font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
	line-height: 1.3;
}

.wp-block-pullquote {
	padding-block: calc(var(--sg-unit) * 6);
	border-block: 1px solid var(--sg-fir-10);
	background-color: transparent;
}

.wp-block-pullquote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
}

/* ==========================================================================
   7. Imágenes, cover y multimedia
   ========================================================================== */

.wp-block-image img,
.wp-block-post-featured-image img {
	border-radius: var(--sg-radius-media);
}

.wp-block-image.is-style-rounded img {
	border-radius: var(--sg-radius-pill);
}

.wp-block-image figcaption,
.wp-block-embed figcaption {
	margin-top: calc(var(--sg-unit) * 1.5);
	color: var(--sg-fir-70);
	font-size: var(--sg-label);
	text-align: left;
}

/* Marco editorial: la imagen respira dentro de un borde tonal. */
.wp-block-image.is-style-sg-frame {
	padding: calc(var(--sg-unit) * 1.5);
	background-color: var(--sg-linen);
	border: var(--sg-border);
	border-radius: var(--sg-radius-card);
}

.wp-block-cover {
	border-radius: var(--sg-radius-card);
	overflow: hidden;
}

.wp-block-cover.alignfull {
	border-radius: 0;
}

.wp-block-cover .wp-block-cover__inner-container :where(h1, h2, h3, h4, p) {
	color: inherit;
}

.wp-block-media-text {
	gap: calc(var(--sg-unit) * 4);
}

.wp-block-media-text .wp-block-media-text__media img {
	border-radius: var(--sg-radius-media);
}

/* ==========================================================================
   8. Separadores, tablas y desplegables
   ========================================================================== */

.wp-block-separator {
	height: 1px;
	background-color: var(--sg-fir-10);
	border: 0;
	opacity: 1;
}

.wp-block-separator.is-style-dots {
	background: none;
	color: var(--sg-sage);
}

/* Filete corto de acento (estilo "Filete de marca"). */
.wp-block-separator.is-style-sg-rule {
	width: 48px;
	max-width: 48px;
	margin-inline: 0;
	background-color: var(--sg-clay);
}

.wp-block-table table {
	border-collapse: collapse;
}

.wp-block-table thead {
	border-bottom: 1px solid var(--sg-fir-10);
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: var(--sg-sand);
}

/* Desplegables (FAQ) ------------------------------------------------------ */

.wp-block-details {
	padding: calc(var(--sg-unit) * 2.5) 0;
	border-bottom: 1px solid var(--sg-fir-10);
}

.wp-block-details summary {
	position: relative;
	padding-right: calc(var(--sg-unit) * 5);
	font-family: var(--sg-font-heading);
	font-weight: var(--sg-heading-weight);
	font-size: var(--sg-body-lg);
	line-height: 1.4;
	color: var(--sg-fir);
	cursor: pointer;
	list-style: none;
	transition: color var(--sg-transition);
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary:hover {
	color: var(--sg-clay);
}

.wp-block-details summary::after {
	content: "";
	position: absolute;
	right: 4px;
	top: 50%;
	width: 12px;
	height: 12px;
	margin-top: -6px;
	border-right: 1px solid var(--sg-clay);
	border-bottom: 1px solid var(--sg-clay);
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform var(--sg-transition);
}

.wp-block-details[open] summary::after {
	transform: rotate(-135deg);
}

.wp-block-details > :not(summary) {
	margin-top: calc(var(--sg-unit) * 2);
	color: var(--sg-fir-80);
	font-weight: var(--sg-weight-text);
	line-height: 1.75;
}

/* ==========================================================================
   9. Formularios de plugins (Contact Form 7 / Forminator / Gravity)
   ==========================================================================
   Formidable Forms, que es el que usa la web, tiene su propio módulo:
   assets/css/forms.css.
   ========================================================================== */

.wpcf7-form p,
.forminator-row {
	margin-bottom: calc(var(--sg-unit) * 2.5);
}

.wpcf7-not-valid-tip {
	color: #ba1a1a;
	font-size: var(--sg-label);
}

.wpcf7 form .wpcf7-response-output {
	margin: calc(var(--sg-unit) * 2) 0 0;
	padding: calc(var(--sg-unit) * 2);
	border-radius: var(--sg-radius);
	border-color: var(--sg-sage-40);
	font-size: var(--sg-body-md);
}

/* ==========================================================================
   10. Contenedores de Spectra (UAGB)
   ========================================================================== */

/**
 * Los contenedores de Spectra se insertaron sin estilo. Se les da el mismo
 * ritmo que a las secciones nativas para que ambos sistemas convivan.
 */
.wp-block-uagb-container {
	--wp--custom--spacing--section: var(--sg-section-gap);
}

.wp-block-uagb-container.sg-section {
	padding-block: var(--sg-section-gap);
}

.wp-block-uagb-container.sg-section--alt {
	background-color: var(--sg-sand);
	border-block: 1px solid var(--sg-fir-05);
}

.wp-block-uagb-container.sg-section--dark {
	background-color: var(--sg-fir);
}

.uagb-container-inner-blocks-wrap.sg-container {
	max-width: var(--sg-container);
	margin-inline: auto;
}

.wp-block-uagb-info-box .uagb-ifb-title {
	font-family: var(--sg-font-heading);
	font-weight: var(--sg-heading-weight);
}

.wp-block-uagb-info-box .uagb-ifb-desc {
	font-weight: var(--sg-weight-text);
	line-height: 1.75;
	color: var(--sg-fir-80);
}

/* ==========================================================================
   11 bis. Incrustaciones de terceros con carga diferida
   ==========================================================================
   Marcador de Calendly y Google Maps. El iframe no existe hasta que la
   persona lo pide; ver inc/embeds.php y js/embeds.js.
   ========================================================================== */

.sg-embed {
	overflow: hidden;
	border-radius: var(--sg-radius-card);
	background-color: var(--sg-linen);
	border: var(--sg-border);
}

/* Sobre lino, el marcador vira a arena para despegarse del fondo. */
.sg-embed:not(.is-loaded) {
	display: flex;
	align-items: center;
	justify-content: center;

	/*
	 * El alto real de la incrustación se reserva al cargar, no antes: 660 px
	 * de hueco vacío esperando a que alguien pulse serían más molestos que el
	 * salto de maquetación que evitan.
	 */
	min-height: min(var(--sg-embed-alto, 420px), 340px);
	padding: clamp(1.75rem, 4vw, 3rem);
	background-color: var(--sg-sand);
	text-align: center;
}

.has-arena-background-color .sg-embed:not(.is-loaded) {
	background-color: var(--sg-linen);
}

.sg-embed__aviso {
	max-width: 42ch;
	margin-inline: auto;
}

/*
 * Solo el centrado. El color NO se toca aquí: icons.css se encola después de
 * este archivo, así que su `background-color` ganaría el desempate. El color
 * del icono se elige con las clases del propio sistema (sg-icon-sage y
 * compañía), que actúan sobre la variable --sg-icon-color.
 */
.sg-embed__aviso::before {
	margin-inline: auto;
}

.sg-embed__titulo {
	margin-bottom: var(--sg-unit);
	font-family: var(--sg-font-heading);
	font-weight: var(--sg-heading-weight);
	font-size: var(--sg-headline-sm);
	line-height: 1.3;
	color: var(--sg-fir);
}

.sg-embed__texto {
	margin-bottom: calc(var(--sg-unit) * 3);
	font-size: var(--sg-label);
	line-height: 1.6;
	color: var(--sg-fir-70);
}

.sg-embed__boton {
	margin-bottom: calc(var(--sg-unit) * 2);
}

.sg-embed__alterna {
	margin-bottom: 0;
	font-size: var(--sg-label);
	color: var(--sg-fir-70);
}

/* Ya cargado: el iframe ocupa la caja entera. */
.sg-embed.is-loaded {
	line-height: 0;
	border-color: transparent;
}

.sg-embed iframe {
	display: block;
	width: 100%;
	border: 0;
}

.sg-embed iframe:focus-visible {
	outline: 2px solid var(--sg-clay);
	outline-offset: -2px;
}

/* Los mapas se integran mejor desaturados; el color lo pone la marca. */
.sg-embed--mapa iframe {
	filter: grayscale(1) contrast(0.95);
	transition: filter var(--sg-transition);
}

.sg-embed--mapa iframe:hover {
	filter: none;
}

/* ==========================================================================
   11 ter. Bloque de datos de contacto
   ========================================================================== */

/**
 * Pila de pares «etiqueta + dato»: cada uno es un H3 con estilo Antetítulo y
 * su párrafo debajo. La etiqueta va pegada a su dato y los pares separados
 * entre sí, que es justo lo contrario del ritmo por defecto.
 */
.sg-datos > * + h3,
.sg-datos > * + h4 {
	margin-top: calc(var(--sg-unit) * 4);
}

.sg-datos p {
	margin-bottom: 0;
	font-size: var(--sg-body-lg);
	line-height: 1.6;
}

.sg-datos a {
	text-decoration-thickness: 1px;
}

/**
 * Horario de atención: bloque Tabla con la clase sg-horario (día · horas) y un
 * filete entre filas, en lugar de un párrafo suelto. Se edita como cualquier
 * tabla: clic en una celda para cambiar el texto, y el menú del bloque para
 * añadir o quitar filas. Dos líneas dentro de una celda: Mayús + Intro.
 * Se repite `.wp-block-table` en el selector para ganar al borde y al relleno
 * que el núcleo pone a todas las celdas.
 */
.wp-block-table.sg-horario {
	margin: calc(var(--sg-unit) * 1) 0 0;
}

.wp-block-table.sg-horario table {
	width: 100%;
	border-collapse: collapse;
}

.wp-block-table.sg-horario td {
	padding: calc(var(--sg-unit) * 2) 0;
	border: 0;
	border-top: 1px solid var(--sg-fir-10);
	color: var(--sg-fir);
	font-size: var(--sg-body-lg);
	line-height: 1.5;
	vertical-align: top;
}

.wp-block-table.sg-horario tr:last-child td {
	border-bottom: 1px solid var(--sg-fir-10);
}

.wp-block-table.sg-horario td:first-child {
	width: 44%;
	padding-right: calc(var(--sg-unit) * 3);
	font-weight: 600;
}

/**
 * Tarjeta del formulario de contacto. Es .sg-card sin la elevación al pasar
 * el ratón: una tarjeta que se mueve mientras rellenas un campo distrae.
 * El fondo y los colores de lo que va dentro salen de --sg-form-* (tokens.css).
 */
.sg-form-card {
	padding: clamp(1.5rem, 4vw, 2.5rem);
	background-color: var(--sg-form-bg);
	border-radius: var(--sg-radius-card);
	color: var(--sg-form-text);
}

/* Letra pequeña legal, al pie de una sección. */
.sg-fineprint {
	margin-top: calc(var(--sg-unit) * 6);
	padding-top: calc(var(--sg-unit) * 3);
	border-top: 1px solid var(--sg-fir-10);
	font-size: var(--sg-label);
	line-height: 1.7;
	color: var(--sg-fir-70);
}

/* ==========================================================================
   11. Utilidades
   ========================================================================== */

.sg-text-center {
	text-align: center;
}

/**
 * Anchos de lectura. Declaran además --sg-width porque, dentro de una sección
 * a ancho completo, el layout de WordPress fija el contenedor a todos los
 * hijos directos con más especificidad de la que tiene una clase suelta: sin
 * la variable, el `max-width` de aquí no llegaba a aplicarse. Ver layout.css.
 */
.sg-measure {
	--sg-width: var(--sg-measure);
	max-width: var(--sg-measure);
}

/* Ancho intermedio: más que la medida de lectura, menos que el contenedor. */
.sg-narrow {
	--sg-width: 820px;
	max-width: 820px;
}

.sg-measure.sg-text-center,
.sg-center {
	margin-inline: auto;
}

.sg-muted {
	color: var(--sg-fir-70);
}

.sg-mt-0 {
	margin-top: 0;
}

.sg-mb-0 {
	margin-bottom: 0;
}
/* ==========================================================================
   12. Reseñas en carrusel (patrón «Sección: reseñas en carrusel»)
   ========================================================================== */

/**
 * Sin JavaScript —y en el editor, que no lo carga— las reseñas son bloques
 * apilados: así se ven, se editan y se reordenan como cualquier grupo.
 * js/carousel.js añade `.is-carousel` a la sección y a partir de ahí la pista
 * pasa a ser una fila con desplazamiento por imanes (scroll-snap): TRES
 * reseñas a la vez en escritorio, UNA en móvil, y dos flechas para pasar las
 * demás. Los colores de la sección salen de --sg-reviews-* (tokens.css).
 */
.sg-reviews__track {
	display: grid;
	gap: calc(var(--sg-unit) * 5);
}

/*
 * El Arcilla del acento y del filete no se lee sobre el fondo Salvia de esta
 * sección. Se redefinen aquí, con más especificidad que las reglas generales.
 */
.sg-reviews .is-style-sg-eyebrow {
	color: var(--sg-reviews-eyebrow);
}

.sg-reviews :is(h1, h2, h3, h4) :is(em, i) {
	color: var(--sg-reviews-accent);
}

.sg-reviews .wp-block-heading.is-style-sg-rule-under::after {
	background-color: var(--sg-reviews-accent);
}

/**
 * Reseña: una tarjeta sobre el fondo Salvia. El color sale de
 * --sg-reviews-card-bg (tokens.css). Va en una regla aparte y con :not() para
 * que, si en el editor se le da un color de fondo a una tarjeta concreta
 * (Ajustes del bloque → Color → Fondo), ese color mande sobre el del tema.
 */
.sg-reviews__track > .sg-review {
	position: relative;
	display: flex;
	flex-direction: column;
	margin-block: 0;
	padding: calc(var(--sg-unit) * 8) clamp(1.25rem, 3vw, 2rem) calc(var(--sg-unit) * 4);
	border-radius: var(--sg-radius-card);
	color: var(--sg-reviews-text);
	text-align: center;
}

.sg-reviews__track > .sg-review:not(.has-background) {
	background-color: var(--sg-reviews-card-bg);
}

/* Comillas decorativas: van en CSS para que no formen parte del texto editable. */
.sg-review::before {
	content: "\201C";
	position: absolute;
	top: calc(var(--sg-unit) * 2);
	left: 50%;
	color: var(--sg-reviews-quote);
	font-family: var(--sg-font-quote);
	font-size: 4rem;
	font-style: italic;
	line-height: 1;
	transform: translateX(-50%);
}

.sg-review > .sg-review__text {
	flex: 1;
	margin-block: 0 calc(var(--sg-unit) * 3);
	color: var(--sg-reviews-text);
	font-size: var(--sg-body-md);
	line-height: 1.65;
}

.sg-review > .sg-review__author {
	margin-block: 0;
	color: var(--sg-reviews-text);
	font-size: var(--sg-body-sm);
	line-height: 1.5;
}

.sg-review__author strong {
	font-size: var(--sg-body-md);
}

/**
 * Cinco estrellas sobre las iniciales. Van en CSS (máscara, como los checks)
 * y no en el texto: así no se pueden borrar por error al editar la reseña y el
 * lector de pantalla no lee «estrella negra» cinco veces, sino «5 de 5
 * estrellas» (la segunda declaración de `content` la ignoran los navegadores
 * que no admiten texto alternativo, y esos dejan la primera, sin texto).
 */
.sg-review__author::before {
	content: "";
	content: "" / "Valoración: 5 de 5 estrellas";
	display: block;
	width: calc(1.2rem * 5);
	height: 1.2rem;
	margin: 0 auto calc(var(--sg-unit) * 1.5);
	background-color: var(--sg-reviews-stars);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.94 6.07 6.56.95-4.75 4.62 1.12 6.53L12 17.6l-5.87 3.07 1.12-6.53L2.5 9.52l6.56-.95z'/%3E%3C/svg%3E") 0 0 / 1.2rem 1.2rem repeat-x;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.94 6.07 6.56.95-4.75 4.62 1.12 6.53L12 17.6l-5.87 3.07 1.12-6.53L2.5 9.52l6.56-.95z'/%3E%3C/svg%3E") 0 0 / 1.2rem 1.2rem repeat-x;
}

/* Con JS: fila deslizable. En móvil una reseña por pantalla. */
.sg-reviews.is-carousel .sg-reviews__track {
	position: relative;
	display: flex;
	gap: calc(var(--sg-unit) * 5);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.sg-reviews.is-carousel .sg-reviews__track::-webkit-scrollbar {
	display: none;
}

.sg-reviews.is-carousel .sg-reviews__track:focus-visible {
	outline: 2px solid var(--sg-fir);
	outline-offset: 8px;
}

.sg-reviews.is-carousel .sg-reviews__track > .sg-review {
	flex: 0 0 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

/* Flechas (las crea el script). */
.sg-reviews__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(var(--sg-unit) * 2);
	margin-top: calc(var(--sg-unit) * 5);
}

.sg-reviews__controls[hidden] {
	display: none;
}

.sg-reviews__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--sg-reviews-text);
	border-radius: var(--sg-radius-pill);
	color: var(--sg-reviews-text);
	cursor: pointer;
	transition: background-color var(--sg-transition), color var(--sg-transition),
		opacity var(--sg-transition);
}

.sg-reviews__arrow:hover,
.sg-reviews__arrow:focus-visible {
	background-color: var(--sg-reviews-text);
	color: var(--sg-sage);
	transform: none;
}

.sg-reviews__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.sg-reviews__arrow:disabled:hover {
	background: transparent;
	color: var(--sg-reviews-text);
}

.sg-reviews__arrow svg {
	width: 22px;
	height: 22px;
}

/* Escritorio: tres a la vez. Ancho = (100% − 2 huecos) / 3. */
@media (min-width: 768px) {

	.sg-reviews__track {
		grid-template-columns: repeat(3, 1fr);
	}

	.sg-reviews.is-carousel .sg-reviews__track > .sg-review {
		flex-basis: calc((100% - 2 * var(--sg-unit) * 5) / 3);
	}
}

/* Los iconos viven en assets/css/icons.css, generado desde assets/icons/. */