/* base.css — componentes de ZZecomm Base.
   Solo usa variables (roles) que define el theme.json de cada hijo:
   --wp--preset--color--*, --wp--preset--font-size--*, --wp--preset--spacing--*,
   --wp--custom--*. Ningún valor de un sitio va aquí.
   Contiene: foco, títulos, enlaces, botones (Regla 2), rejillas (Regla 1),
   tarjetas (Regla 3), sección oscura, cita, lista, encabezado, menú, pie,
   WhatsApp, patrones de estructura, acordeón, pestañas, pasos, mapa,
   formularios y las clases de la Styleguide. */

/* Los tamaños mínimos (área táctil de 44 px) incluyen el relleno. */
*, *::before, *::after { box-sizing: border-box; }

/* ------------------------------------------------------------------
   Foco
   ------------------------------------------------------------------ */
:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent-2);
	outline-offset: var(--wp--custom--focus--offset);
}

/* ------------------------------------------------------------------
   Regla 1: rejillas sin filas huérfanas.
   El Grupo exterior (.grid-container) es el contenedor que se mide; el
   interior (.grid--N) tiene una progresión fija para N elementos.
   Los cortes van en rem: con letra grande, la rejilla baja de columnas antes.
   ------------------------------------------------------------------ */
.grid-container { container-type: inline-size; }
.wp-block-group.grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--custom--grid--gap);
}
/* La rejilla separa con gap; se anula el margen del diseño de flujo. */
.wp-block-group.grid > * { margin-block: 0; }
.wp-block-group.grid--12 { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* 12: 2 */
@container (min-width: 28rem) { .wp-block-group.grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }   /* 6: 2 */
@container (min-width: 30rem) {
	.wp-block-group.grid--4, .wp-block-group.grid--10 { grid-template-columns: repeat(2, minmax(0, 1fr)); }       /* 4 y 10: 2 */
	.wp-block-group.grid--12 { grid-template-columns: repeat(3, minmax(0, 1fr)); }                               /* 12: 3 */
}
@container (min-width: 40rem) { .wp-block-group.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }   /* 2: 2 */
@container (min-width: 42rem) { .wp-block-group.grid--12 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }  /* 12: 4 */
@container (min-width: 44rem) { .wp-block-group.grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }   /* 6: 3 */
@container (min-width: 48rem) { .wp-block-group.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }   /* 3: 3 */
@container (min-width: 56rem) { .wp-block-group.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }   /* 4: 4 */
@container (min-width: 60rem) {
	.wp-block-group.grid--10 { grid-template-columns: repeat(5, minmax(0, 1fr)); }                               /* 10: 5 */
	.wp-block-group.grid--12 { grid-template-columns: repeat(6, minmax(0, 1fr)); }                               /* 12: 6 */
}

/* ------------------------------------------------------------------
   Títulos y variaciones de texto (styles/block/*.json).
   El tamaño, la familia, el peso y el interlineado vienen de cada variación;
   aquí va lo que theme.json no expresa.
   ------------------------------------------------------------------ */
/* Último recurso: si una palabra no cabe en la línea, se corta. */
:where(h1, h2, h3, h4, h5, h6, .is-style-display, [class*="is-style-title-"], .is-style-subtitle) { overflow-wrap: break-word; }
/* Texto corrido: una palabra que no cabe (por ejemplo "PricewaterhouseCoopers"
   en 320 px con letra grande) se parte como último recurso. */
:where(p, li) { overflow-wrap: break-word; }
/* Títulos grandes: con letra muy grande, las palabras de 12 letras o más se
   dividen con guion (lang="es") en lugar de desbordar a 360 px. */
.is-style-display, .is-style-title-1, .is-style-title-2,
h1:not([class*="is-style-"]), h2:not([class*="is-style-"]) {
	hyphens: auto;
	hyphenate-limit-chars: 12 5 5;
}
/* Un párrafo con estilo de título se ve como título (color de los títulos). */
:where(p)[class*="is-style-title-"] { color: var(--wp--preset--color--dark-darker); }
:where(p).is-style-subtitle { color: var(--wp--preset--color--dark); }

/* Enlaces de texto: subrayado un poco separado. */
:where(a:not(.wp-element-button)) { text-underline-offset: 0.15em; }
:where(a:not(.wp-element-button)):hover { text-decoration-thickness: 0.125em; }

/* ------------------------------------------------------------------
   Regla 2: botones.
   Sin borde visible (el de 2 px es transparente y solo reserva el espacio).
   Hover y foco: el mismo color en otro tono; la letra no cambia.
   default accent → accent-darker · dark dark-darker → custom.color.dark-hover
   accent-2 → accent-2-hover · light (sobre fondo oscuro) → transparente
   con anillo interior light y letra light.
   ------------------------------------------------------------------ */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wp--custom--touch-target);
	min-width: var(--wp--custom--touch-target);
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.wp-block-button.is-style-dark .wp-block-button__link:is(:hover, :focus-visible) {
	background-color: var(--wp--custom--color--dark-hover);
	color: var(--wp--preset--color--light);
}
.wp-block-button.is-style-accent-2 .wp-block-button__link:is(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--accent-2-hover);
	color: var(--wp--preset--color--light);
}
/* Dark y Light son el mismo botón con el contraste al revés: cada uno se ve
   como el otro donde no se leería. Fuera de un fondo oscuro, Light se ve
   como Dark; en una sección oscura o en la portada de página, Dark se ve
   como Light. Así, al cambiar el estilo de una sección, los botones se
   siguen leyendo sin tocarlos. */
.wp-block-button.is-style-light .wp-block-button__link {
	background-color: var(--wp--preset--color--dark-darker);
	color: var(--wp--preset--color--light);
}
.wp-block-button.is-style-light .wp-block-button__link:is(:hover, :focus-visible) {
	background-color: var(--wp--custom--color--dark-hover);
	color: var(--wp--preset--color--light);
}
:is(.is-style-section-dark, .hero--pagina) .wp-block-button:is(.is-style-light, .is-style-dark) .wp-block-button__link {
	background-color: var(--wp--preset--color--light);
	color: var(--wp--preset--color--dark-darker);
}
:is(.is-style-section-dark, .hero--pagina) .wp-block-button:is(.is-style-light, .is-style-dark) .wp-block-button__link:is(:hover, :focus-visible) {
	background-color: transparent;
	color: var(--wp--preset--color--light);
	box-shadow: inset 0 0 0 var(--wp--custom--border--width) var(--wp--preset--color--light);
}
/* Excepción: en una sección oscura, el hover de default (2.83 contra el marino)
   y el de accent-2 (2.70) bajan de 3:1; solo ahí llevan borde de 2 px light. */
.is-style-section-dark .wp-block-button:not([class*="is-style-"]) .wp-block-button__link:is(:hover, :focus-visible),
.is-style-section-dark .wp-block-button.is-style-accent-2 .wp-block-button__link:is(:hover, :focus-visible) {
	border-color: var(--wp--preset--color--light);
}
/* Desplazamiento de 0.25rem (4 px) solo con cursor y sin "reducir movimiento". */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.wp-block-button__link:is(:hover, :focus-visible) { transform: translateX(0.25rem); }
}

/* ------------------------------------------------------------------
   Regla 3: tarjetas (variación de Grupo "Tarjeta", styles/block/card.json).
   Al pasar el cursor o enfocar algo dentro: sombra (siempre) y elevación de
   0.25rem (solo con cursor y sin "reducir movimiento"). Sobre fondo oscuro la
   sombra casi no se ve: la tarjeta se aclara y el borde se marca.
   ------------------------------------------------------------------ */
.wp-block-group.is-style-card {
	transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s;
}
/* En una rejilla, la tarjeta es una columna para llevar los botones al fondo
   (alineados en toda la fila), con una separación mínima del texto aunque
   la tarjeta más alta no tenga espacio sobrante: el margen automático se
   come el blockGap, el relleno no. Solo en rejillas: en un grupo ancho (por
   ejemplo, una sección) la columna encogía el contenido centrado hasta
   dejarlo de una letra de ancho. */
.wp-block-group.grid > .wp-block-group.is-style-card {
	display: flex;
	flex-direction: column;
}
.wp-block-group.grid > .wp-block-group.is-style-card > .wp-block-buttons {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--40);
}
.wp-block-group.is-style-card:is(:hover, :focus-within) {
	box-shadow: 0 0.75rem 1.5rem color-mix(in srgb, var(--wp--preset--color--dark-darker) 18%, transparent);
	border-color: color-mix(in srgb, var(--wp--preset--color--dark) 35%, transparent);
}
.is-style-section-dark .wp-block-group.is-style-card {
	background-color: color-mix(in srgb, var(--wp--preset--color--light) 6%, var(--wp--preset--color--dark-darker));
	border-color: color-mix(in srgb, var(--wp--preset--color--light) 18%, transparent);
	color: var(--wp--preset--color--light);
}
.is-style-section-dark .wp-block-group.is-style-card:is(:hover, :focus-within) {
	background-color: color-mix(in srgb, var(--wp--preset--color--light) 13%, var(--wp--preset--color--dark-darker));
	border-color: color-mix(in srgb, var(--wp--preset--color--light) 70%, transparent);
	box-shadow: 0 0.75rem 1.5rem color-mix(in srgb, black 45%, transparent);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.wp-block-group.is-style-card:is(:hover, :focus-within) { transform: translateY(-0.25rem); }
}

/* Recuadro (styles/block/panel.json): el mismo fondo, borde y relleno que la
   Tarjeta, pero sin hover, porque no se puede pulsar. Para diagramas e
   imágenes de fondo blanco sobre una sección gris: llena su columna y la
   imagen va centrada dentro, a su tamaño. */
.wp-block-group.is-style-panel > figure { margin-block-end: 0; }
/* En teléfono el relleno se reduce para que el diagrama conserve casi todo
   el ancho de su columna. */
@media (max-width: 37.5em) {
	.wp-block-group.is-style-panel {
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--10);
	}
}

/* ------------------------------------------------------------------
   Sección oscura (styles/block/section-dark.json): textos claros, salvo el
   Display, que sigue en accent (3.41: solo títulos grandes).
   ------------------------------------------------------------------ */
.is-style-section-dark :is(h1, h2, h3, h4, h5, h6, [class*="is-style-title-"], .is-style-subtitle) { color: var(--wp--preset--color--light); }
.is-style-section-dark .is-style-display { color: var(--wp--preset--color--accent); }
.is-style-section-dark :focus-visible { outline-color: var(--wp--preset--color--light); }

/* ------------------------------------------------------------------
   Cita y lista
   ------------------------------------------------------------------ */
.wp-block-quote {
	margin-inline: 0;
	padding-inline-start: var(--wp--preset--spacing--50);
	border-inline-start: 0.25rem solid var(--wp--preset--color--accent);
}
.wp-block-quote p {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--subtitle);
	line-height: var(--wp--custom--line-height--subtitle);
	color: var(--wp--preset--color--dark-darker);
}
.wp-block-quote cite {
	display: block;
	margin-block-start: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--body-small);
	font-style: normal;
	font-weight: var(--wp--custom--font-weight--body-bold);
}
.is-style-section-dark .wp-block-quote :is(p, cite) { color: var(--wp--preset--color--light); }
/* Nota dentro de una cita (por ejemplo, el texto original en otro idioma). */
.wp-block-quote p.is-style-body-small {
	margin-block-start: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-small);
	line-height: var(--wp--custom--line-height--body-small);
	color: var(--wp--preset--color--dark);
}
.is-style-section-dark .wp-block-quote p.is-style-body-small { color: color-mix(in srgb, var(--wp--preset--color--light) 88%, var(--wp--preset--color--dark-darker)); }
.wp-block-list li + li { margin-block-start: var(--wp--preset--spacing--20); }
.wp-block-list li::marker { color: var(--wp--preset--color--accent); }

/* ------------------------------------------------------------------
   Patrones de estructura (patterns/*.php). Valores tomados de las
   maquetas aprobadas, siempre como roles de theme.json.
   ------------------------------------------------------------------ */
/* Antetítulo y Remate (styles/block/eyebrow.json y remate.json) en fondos oscuros. */
:is(.is-style-section-dark, .hero--pagina) :is(.is-style-eyebrow, .is-style-remate) { color: var(--wp--preset--color--light); }

/* Rejilla con texto junto a imagen: centrados en vertical. */
.wp-block-group.grid.is-centered { align-items: center; }
.wp-block-group.grid > .wp-block-image, .wp-block-group.grid > .wp-block-quote { margin: 0; }

/* Portadas (core/cover con las clases hero y hero--inicio o hero--pagina).
   El velo va en ::before para no depender del control de opacidad del bloque. */
.wp-block-cover.hero {
	isolation: isolate;
	padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
}
.wp-block-cover.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}
/* El contenido va sobre el velo. En el sitio, WordPress ya le da z-index 1
   (y gana por ir después); en el editor no lo tiene y el velo lo deslavaba. */
.hero .wp-block-cover__inner-container { position: relative; z-index: 2; inline-size: 100%; }
.hero__content > * { margin-block: 0; }

/* Portada grande: velo claro parejo en móvil; en pantallas anchas, la foto
   libre a la izquierda y el texto a la derecha sobre la zona clara. */
.wp-block-cover.hero--inicio {
	min-height: var(--wp--custom--cover--min-height-fallback);
	min-height: var(--wp--custom--cover--min-height);
	padding-block: var(--wp--preset--spacing--80);
	background-color: var(--wp--preset--color--light);
}
.hero--inicio::before { background: color-mix(in srgb, var(--wp--preset--color--light) 78%, transparent); }
.hero--inicio .wp-block-cover__inner-container { color: var(--wp--preset--color--dark); }
.hero--inicio .hero__content > * { max-inline-size: 34rem; }
.hero--inicio .is-style-subtitle { color: var(--wp--preset--color--dark-darker); }
@media (min-width: 64em) {
	.hero--inicio::before {
		background: linear-gradient(90deg,
			color-mix(in srgb, var(--wp--preset--color--light) 0%, transparent) 30%,
			color-mix(in srgb, var(--wp--preset--color--light) 80%, transparent) 55%,
			color-mix(in srgb, var(--wp--preset--color--light) 90%, transparent) 100%);
	}
	.hero--inicio .hero__content { display: flex; flex-direction: column; align-items: flex-end; }
	.hero--inicio .hero__content > * { inline-size: min(100%, 34rem); }
}

/* Portada de página: más baja, texto abajo y velo marino (85 % abajo, 45 % arriba). */
.wp-block-cover.hero--pagina {
	align-items: flex-end;
	min-height: var(--wp--custom--cover--page-min-height-fallback);
	min-height: var(--wp--custom--cover--page-min-height);
	padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--70);
	background-color: var(--wp--preset--color--dark-darker);
}
.hero--pagina::before {
	background: linear-gradient(to top,
		color-mix(in srgb, var(--wp--preset--color--dark-darker) 85%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--dark-darker) 65%, transparent) 55%,
		color-mix(in srgb, var(--wp--preset--color--dark-darker) 45%, transparent) 100%);
}
.hero--pagina .wp-block-cover__inner-container,
.hero--pagina :is(h1, h2, [class*="is-style-title-"]) { color: var(--wp--preset--color--light); }

/* Imagen junto al texto. */
.intro-image img {
	display: block;
	inline-size: 100%;
	border-radius: var(--wp--custom--radius--small);
	box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--wp--preset--color--dark-darker) 15%, transparent);
}

/* Ícono ilustrativo dentro de un texto (clase de la Imagen): a su tamaño
   real como máximo y nunca más de 12rem. */
.wp-block-image.icono-ilustrativo { margin-block-end: 0; }
/* Sin inline-size: auto: así el atributo width (el ancho real) sigue valiendo y
   el navegador reserva el alto (aspect-ratio de width/height) antes de que la
   imagen cargue; con auto medía 0 de alto hasta cargar y empujaba el texto. */
.wp-block-image.icono-ilustrativo img { max-inline-size: min(100%, 12rem); block-size: auto; }

/* Dos imágenes superpuestas en una rejilla de 12 × 12: la segunda abajo a la
   derecha y encima, separadas solo por la sombra. Con menos de 28rem de
   ancho se apilan sin encimarse. */
.media-stack { container-type: inline-size; }
/* Junto al texto (rejilla de 2), las dos columnas llegan solo cuando la de
   las fotos alcanza para encimarlas (2 × 28rem + espacio): antes va en una
   columna, texto arriba y fotos abajo a todo el ancho. Así, en tableta las
   fotos no quedan apiladas en una columna angosta. */
.wp-block-group.grid--2:has(> .media-stack) { grid-template-columns: minmax(0, 1fr); }
@container (min-width: 60rem) { .wp-block-group.grid--2:has(> .media-stack) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.media-stack__frame { display: grid; gap: var(--wp--custom--grid--gap); }
.media-stack__frame > .wp-block-image { margin: 0; }
/* En el editor, al seleccionar una foto aparece un botón para añadir
   bloques al final de la rejilla: se oculta (aquí van solo dos fotos) y las
   fotos se ubican por su orden entre imágenes, no por ser primera o última. */
.media-stack__frame > :not(.wp-block-image) { display: none; }
/* Regla de proporción: cada foto llena su celda y se recorta, sea de la
   forma que sea. Va con !important porque el editor y los controles de
   tamaño de la imagen escriben ancho, alto y proporción en el propio img. */
.media-stack__frame img {
	display: block;
	inline-size: 100% !important;
	block-size: auto !important;
	aspect-ratio: 4 / 3 !important;
	object-fit: cover !important;
	background-color: var(--wp--preset--color--light);
	border-radius: var(--wp--custom--radius--small);
	box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--wp--preset--color--dark-darker) 18%, transparent);
	transition: transform 0.2s, box-shadow 0.2s;
}
/* Sobre fondo oscuro la sombra marina no se ve: se usa la de las tarjetas oscuras. */
.is-style-section-dark .media-stack__frame img { box-shadow: 0 0.75rem 1.5rem color-mix(in srgb, black 45%, transparent); }
@container (min-width: 28rem) {
	.media-stack__frame {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		grid-template-rows: repeat(12, minmax(0, 1fr));
		gap: 0;
		aspect-ratio: 6 / 5;
	}
	.media-stack__frame > .wp-block-image { min-block-size: 0; }
	.media-stack__frame img { block-size: 100% !important; aspect-ratio: auto !important; }
	.media-stack__frame > :nth-child(1 of .wp-block-image) { grid-column: 1 / 9; grid-row: 1 / 8; }
	.media-stack__frame > :nth-child(2 of .wp-block-image) { grid-column: 5 / 13; grid-row: 6 / 13; z-index: 1; }
	@media (hover: hover) and (prefers-reduced-motion: no-preference) {
		.media-stack__frame:hover > :nth-child(1 of .wp-block-image) img { transform: translate(-0.25rem, -0.25rem); }
		.media-stack__frame:hover > :nth-child(2 of .wp-block-image) img { transform: translate(0.25rem, 0.25rem); }
	}
}

/* Tarjetas: ícono, texto sobre fondo oscuro, tarjeta con foto y de persona. */
.card-icon { margin: 0; }
.card-icon img { display: block; inline-size: 2.5rem; block-size: 2.5rem; }
.is-style-section-dark .wp-block-group.is-style-card p { color: color-mix(in srgb, var(--wp--preset--color--light) 88%, var(--wp--preset--color--dark-darker)); }
.wp-block-group.media-card, .wp-block-group.person-card { overflow: hidden; }
.media-card > .wp-block-image { margin: 0; }
.media-card > .wp-block-image img { display: block; inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.media-card > .media-card__body { margin: 0; }
/* Línea de acento arriba como elemento propio, para que el hover de la
   tarjeta (que cambia el color del borde) no la apague. */
.person-card::before {
	content: "";
	display: block;
	block-size: 0.375rem;
	background: linear-gradient(90deg, var(--wp--preset--color--accent), var(--wp--preset--color--accent-2));
}
.person-card > .person-card__body { margin: 0; }
.person-card__head {
	padding-block-end: var(--wp--preset--spacing--40);
	margin-block-end: var(--wp--preset--spacing--20);
	border-block-end: 0.0625rem solid color-mix(in srgb, var(--wp--preset--color--dark) 20%, transparent);
}
.person-card__head .is-style-subtitle { color: var(--wp--preset--color--accent-darker); }

/* Reseñas de Google (blocks/resenas-google): calificación y enlace en una
   línea que se parte en pantallas angostas; tarjetas con iniciales. */
.resenas-google__resumen {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
}
.resenas-google__resumen > p { margin: 0; }
.resenas-google__estrellas { color: var(--wp--preset--color--accent-darker); letter-spacing: 0.1em; white-space: nowrap; }
.resenas-google__vacias { color: color-mix(in srgb, var(--wp--preset--color--dark) 25%, transparent); }
.resenas-google__autor { display: flex; align-items: center; gap: var(--wp--preset--spacing--30); }
.resenas-google__autor p { margin: 0; }
.resenas-google__iniciales {
	flex: none;
	display: grid;
	place-items: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--dark-darker);
	color: var(--wp--preset--color--light);
	font-size: var(--wp--preset--font-size--body-small);
	font-weight: var(--wp--custom--font-weight--button);
}
.resenas-google__nombre { font-weight: var(--wp--custom--font-weight--body-bold); color: var(--wp--preset--color--dark-darker); }
.resenas-google__nombre, .resenas-google__texto { overflow-wrap: anywhere; }
/* Aviso que solo se ve en el editor (index.js): aspecto de aviso, con una
   barra a la izquierda, no de contenido. */
.resenas-google__aviso {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-inline-start: 0.25rem solid var(--wp--preset--color--dark);
	border-radius: var(--wp--custom--radius--small);
	background: color-mix(in srgb, var(--wp--preset--color--dark) 6%, var(--wp--preset--color--light));
	color: var(--wp--preset--color--dark-darker);
	font-size: var(--wp--preset--font-size--body-small);
	cursor: default;
}

/* Datos de contacto con ícono. */
.contact-list__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--wp--preset--spacing--30); align-items: start; }
.contact-list__item > * { margin: 0; }
.contact-list__icon img { display: block; inline-size: 1.5rem; block-size: 1.5rem; margin-block-start: 0.15em; }
.contact-list strong { color: var(--wp--preset--color--dark-darker); }
.contact-list a { overflow-wrap: anywhere; }

/* Video incrustado: 16:9 fluido con fondo oscuro mientras no hay video. */
.video-embed { aspect-ratio: 16 / 9; inline-size: 100%; border-radius: var(--wp--custom--radius--small); overflow: hidden; background: var(--wp--preset--color--dark-darker); }
.is-style-section-dark .video-embed { background: color-mix(in srgb, var(--wp--preset--color--light) 6%, var(--wp--preset--color--dark-darker)); }
.video-embed > .wp-block-embed { margin: 0; block-size: 100%; }
.video-embed .wp-block-embed__wrapper { block-size: 100%; }
.video-embed iframe { display: block; inline-size: 100%; block-size: 100%; border: 0; }

/* Video con un clic (inc/video-click.php): la tarjeta ocupa el lugar del iframe. */
.video-embed .zz-video-click { position: absolute; inset: 0; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--wp--preset--spacing--30); margin: 0; padding: var(--wp--preset--spacing--30); text-align: center; overflow: hidden; }
.video-embed .zz-video-click:is(:hover, :focus-within) { transform: none; }
.zz-video-click .wp-block-button { margin: 0; }
.zz-video-click__button[hidden] { display: none; }
.zz-video-click__notice { margin: 0; }

/* Rejilla de logos: cada logo en su recuadro, sin deformarse. */
.logo-grid > .wp-block-image {
	display: grid;
	place-items: center;
	margin: 0;
	padding: var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--light);
	border: 0.0625rem solid color-mix(in srgb, var(--wp--preset--color--dark) 15%, transparent);
}
.logo-grid img { inline-size: 100%; block-size: auto; aspect-ratio: 300 / 126; object-fit: contain; }

/* ------------------------------------------------------------------
   Acordeón (core/accordion): título en Title 5, círculo marino con "+"
   que pasa a "−" en accent-darker al abrir, líneas entre temas y área
   táctil. La animación de WordPress ya respeta "reducir movimiento".
   ------------------------------------------------------------------ */
.wp-block-accordion { border-block-start: 0.0625rem solid color-mix(in srgb, var(--wp--preset--color--dark) 25%, transparent); }
.wp-block-accordion > .wp-block-accordion-item {
	margin-block: 0;
	border-block-end: 0.0625rem solid color-mix(in srgb, var(--wp--preset--color--dark) 25%, transparent);
}
.wp-block-accordion-heading {
	margin: 0;
	color: var(--wp--preset--color--dark-darker);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--title-5);
	font-weight: var(--wp--custom--font-weight--heading);
	line-height: var(--wp--custom--line-height--title-5);
}
.wp-block-accordion-heading__toggle {
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	min-height: var(--wp--custom--touch-target);
	padding-block: var(--wp--preset--spacing--40);
	overflow: visible;
}
.wp-block-accordion-heading__toggle:hover { color: var(--wp--preset--color--accent-darker); }
.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title { text-decoration: none; }
/* El "+" del bloque se oculta y se dibuja el símbolo con CSS para poder
   cambiarlo a "−" sin girarlo. */
.wp-block-accordion-heading__toggle-icon {
	flex: none;
	display: grid;
	place-items: center;
	inline-size: 2rem;
	block-size: 2rem;
	border-radius: 50%;
	background: var(--wp--preset--color--dark-darker);
	color: var(--wp--preset--color--light);
	font-size: 0;
}
.wp-block-accordion-heading__toggle-icon::before {
	content: "+";
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.25rem;
	line-height: 1;
}
.wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
	transform: none;
	background: var(--wp--preset--color--accent-darker);
}
.wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon::before { content: "−"; }
.wp-block-accordion-panel { padding-block-end: var(--wp--preset--spacing--50); }
.wp-block-accordion-panel > * { margin-block: 0; }
.wp-block-accordion-panel > * + * { margin-block-start: var(--wp--preset--spacing--30); }
.is-style-section-dark .wp-block-accordion,
.is-style-section-dark .wp-block-accordion > .wp-block-accordion-item { border-color: color-mix(in srgb, var(--wp--preset--color--light) 25%, transparent); }
.is-style-section-dark .wp-block-accordion-heading__toggle:hover { color: var(--wp--preset--color--light); }
/* Sobre marino el círculo marino no se ve: cerrado va en light con el signo
   marino; abierto, en accent (accent-darker no llega a 3:1 contra el marino). */
.is-style-section-dark .wp-block-accordion-heading__toggle-icon {
	background: var(--wp--preset--color--light);
	color: var(--wp--preset--color--dark-darker);
}
.is-style-section-dark .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--light);
}

/* Lista en 2 columnas cuando caben (styles/block/list-columns.json). */
.wp-block-list.is-style-dos-columnas { columns: 2 16rem; column-gap: var(--wp--preset--spacing--60); }
.wp-block-list.is-style-dos-columnas li { break-inside: avoid; }

/* ------------------------------------------------------------------
   Pestañas (core/tabs). Regla 1 aplicada a pestañas: todas del mismo
   ancho, en filas completas con progresión fija según cuántas son
   (2: 2 → 1 · 3: 3 → 1 · 4: 4 → 2 → 1). El nombre va centrado y, si es
   largo, baja de línea dentro de su celda. Cada pestaña lleva su línea de
   base, así que la línea queda bajo cada fila; la activa, con la raya de
   2 px accent. Con 5 o más: en pantalla ancha, columna a la izquierda y
   contenido a la derecha; en angosta, una sola columna.
   Se mide el bloque de pestañas (no la pantalla): los cortes van en rem,
   así que con letra grande baja de columnas antes.
   ------------------------------------------------------------------ */
.wp-block-tabs { container-type: inline-size; }
.wp-block-tabs .wp-block-tab-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: stretch;
	gap: 0;
}
.wp-block-tab-list button {
	--pestana-linea: color-mix(in srgb, var(--wp--preset--color--dark) 25%, transparent);
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: auto;
	min-height: var(--wp--custom--touch-target);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	box-shadow: inset 0 -0.0625rem 0 var(--pestana-linea);
	color: var(--wp--preset--color--dark);
	font-weight: var(--wp--custom--font-weight--button);
	text-align: center;
	overflow-wrap: break-word;
	hyphens: auto;
	transition: color 0.2s;
}
.wp-block-tab-list button:hover { color: var(--wp--preset--color--accent-darker); }
.wp-block-tab-list button[aria-selected="true"] { color: var(--wp--preset--color--dark-darker); }
.wp-block-tab-list button[aria-selected="true"]::before {
	border-bottom: var(--wp--custom--border--width) solid var(--wp--preset--color--accent);
}
/* Cortes: unos 12rem por pestaña como mínimo. */
@container (min-width: 24rem) {
	.wp-block-tab-list:has(> button:nth-child(2):last-child),
	.wp-block-tab-list:has(> button:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* 2: 2 · 4: 2 */
}
@container (min-width: 36rem) {
	.wp-block-tab-list:has(> button:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }    /* 3: 3 */
}
@container (min-width: 44rem) {
	.wp-block-tab-list:has(> button:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }    /* 4: 4 */
}
/* 5 o más: columna a la izquierda (nombres alineados al inicio) y contenido
   a la derecha. El bloque de pestañas es el contenedor que se mide y no
   puede cambiarse a sí mismo: la lista flota a la izquierda y los paneles
   ocupan el resto. */
.wp-block-tabs { display: flow-root; }
@container (min-width: 44rem) {
	.wp-block-tab-list:has(> button:nth-child(5)) {
		float: inline-start;
		inline-size: max(12rem, 25%);
		margin-inline-end: var(--wp--preset--spacing--60);
	}
	.wp-block-tab-list:has(> button:nth-child(5)) button { justify-content: flex-start; text-align: start; }
	.wp-block-tab-list:has(> button:nth-child(5)) + .wp-block-tab-panels { display: flow-root; margin-block-start: 0; }
	.wp-block-tab-list:has(> button:nth-child(5)) + .wp-block-tab-panels .wp-block-tab-panel { padding-block-start: 0; }
}
.wp-block-tab-panel { padding-block-start: var(--wp--preset--spacing--50); }
.wp-block-tab-panel > * { margin-block: 0; }
.wp-block-tab-panel > * + * { margin-block-start: var(--wp--preset--spacing--30); }
.is-style-section-dark .wp-block-tab-list button {
	--pestana-linea: color-mix(in srgb, var(--wp--preset--color--light) 25%, transparent);
	color: color-mix(in srgb, var(--wp--preset--color--light) 88%, var(--wp--preset--color--dark-darker));
}
.is-style-section-dark .wp-block-tab-list button:is(:hover, [aria-selected="true"]) { color: var(--wp--preset--color--light); }

/* ------------------------------------------------------------------
   Pasos (styles/block/list-pasos.json): lista numerada vertical con el
   número en un círculo y una línea que une los pasos. Una sola columna:
   nunca deja filas incompletas. list-style-type con un carácter vacío (y
   no "none") para que Safari siga anunciándola como lista.
   Cada círculo va arriba de su paso (la primera línea de texto se centra
   con él) y cada tramo de línea va del centro de un círculo al centro del
   siguiente, por detrás: solo depende de la altura del propio paso y del
   espacio entre pasos, así que se estira con el texto.
   ------------------------------------------------------------------ */
.wp-block-list.is-style-pasos {
	--paso: 2.5rem;
	--paso-espacio: var(--wp--preset--spacing--40);
	display: grid;
	gap: var(--paso-espacio);
	list-style-type: "\200B";
	counter-reset: paso;
}
.wp-block-list.is-style-pasos > li {
	/* Baja el texto para centrar su primera línea con el círculo. */
	--paso-ajuste: max(0rem, (var(--paso) - 1lh) / 2);
	position: relative;
	display: grid;
	grid-template-columns: var(--paso) minmax(0, 1fr);
	column-gap: var(--wp--preset--spacing--40);
	align-items: start;
	min-height: var(--paso);
	margin: 0;
	padding-block-start: var(--paso-ajuste);
	counter-increment: paso;
	font-weight: var(--wp--custom--font-weight--body-bold);
}
.wp-block-list.is-style-pasos > li::before {
	content: counter(paso);
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	inline-size: var(--paso);
	block-size: var(--paso);
	margin-block-start: calc(-1 * var(--paso-ajuste));
	border-radius: 50%;
	background: var(--wp--preset--color--accent-darker);
	color: var(--wp--preset--color--light);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: var(--wp--custom--font-weight--heading);
}
/* Del centro de este círculo (mitad del círculo desde arriba) al centro del
   siguiente (espacio entre pasos + mitad del círculo por debajo). */
.wp-block-list.is-style-pasos > li:not(:last-child)::after {
	content: "";
	position: absolute;
	inset-block: calc(var(--paso) / 2) calc(-1 * (var(--paso-espacio) + var(--paso) / 2));
	inset-inline-start: calc((var(--paso) - var(--wp--custom--border--width)) / 2);
	inline-size: var(--wp--custom--border--width);
	background: var(--wp--preset--color--accent-darker);
}
.wp-block-list.is-style-pasos > li::marker { content: ""; }
.is-style-section-dark .wp-block-list.is-style-pasos > li:not(:last-child)::after { background: var(--wp--preset--color--light); }
/* Sobre marino, círculo en accent: accent-darker no llega a 3:1 contra el fondo. */
.is-style-section-dark .wp-block-list.is-style-pasos > li::before { background: var(--wp--preset--color--accent); }

/* ------------------------------------------------------------------
   Mapa estático (Imagen con la clase static-map): marcador accent con
   punto light en el centro de la imagen (sin JavaScript ni Google).
   ------------------------------------------------------------------ */
.wp-block-image.static-map { position: relative; container-type: inline-size; margin: 0; }
.static-map img {
	display: block;
	inline-size: 100%;
	aspect-ratio: 1000 / 560;
	object-fit: cover;
	border: 0.0625rem solid color-mix(in srgb, var(--wp--preset--color--dark) 20%, transparent);
	border-radius: var(--wp--custom--radius--small);
}
/* La imagen mide 56 % de su ancho de alto: el centro está a 28cqi. */
.static-map::after {
	content: "";
	position: absolute;
	inset-inline-start: 50%;
	inset-block-start: 28cqi;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	transform: translate(-50%, -100%);
	background: radial-gradient(circle at 50% 40.4%, var(--wp--preset--color--light) 11.7%, var(--wp--preset--color--accent) 12%);
	-webkit-mask: url("../img/pin.svg") center / contain no-repeat;
	mask: url("../img/pin.svg") center / contain no-repeat;
	pointer-events: none;
}
.static-map figcaption {
	margin-block-start: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--dark);
	font-size: var(--wp--preset--font-size--body-small);
	text-align: start;
}

/* ------------------------------------------------------------------
   Formularios: estilo general (cualquier formulario del contenido) y
   capa para las clases de Fluent Forms. Sin probar con Fluent Forms
   hasta instalarlo (paso 10).
   ------------------------------------------------------------------ */
:where(main) form:not(.wp-block-search) label,
.wp-site-blocks .fluentform .ff-el-input--label label {
	display: block;
	margin-block-end: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--dark-darker);
	font-weight: var(--wp--custom--font-weight--button);
}
:where(main) form:not(.wp-block-search) :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="hidden"]), textarea, select),
.wp-site-blocks .fluentform .ff-el-form-control {
	inline-size: 100%;
	min-height: var(--wp--custom--touch-target);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 0.0625rem solid var(--wp--preset--color--dark);
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--light);
	color: var(--wp--preset--color--dark-darker);
	font: inherit;
	box-shadow: none;
}
:where(main) form:not(.wp-block-search) textarea,
.wp-site-blocks .fluentform textarea.ff-el-form-control { min-height: 9rem; resize: vertical; }
:where(main) form:not(.wp-block-search) :is(input, textarea, select):focus-visible,
.wp-site-blocks .fluentform .ff-el-form-control:focus {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent-2);
	outline-offset: 0.0625rem;
	border-color: var(--wp--preset--color--accent-2);
}
:where(main) form:not(.wp-block-search) :is(input[type="checkbox"], input[type="radio"]) {
	inline-size: 1.25rem;
	block-size: 1.25rem;
	accent-color: var(--wp--preset--color--accent-2);
}
/* Campo obligatorio: asterisco accent-darker. */
.wp-site-blocks .fluentform .ff-el-is-required.asterisk-right label::after,
.wp-site-blocks .fluentform .ff-el-is-required.asterisk-left label::before { color: var(--wp--preset--color--accent-darker); }
/* Error: borde y mensaje en accent-darker; el mensaje siempre lleva texto. */
.wp-site-blocks .fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--wp--preset--color--accent-darker); }
.wp-site-blocks .fluentform .error.text-danger {
	margin-block-start: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--accent-darker);
	font-size: var(--wp--preset--font-size--body-small);
}
.wp-site-blocks .fluentform .ff-el-group { margin-block-end: var(--wp--preset--spacing--40); }
/* Columnas (Contenedor de 2 o 3 columnas): lado a lado cuando el formulario
   mide 36rem o más, como en la maqueta; Fluent Forms lo decide por el ancho
   de la pantalla (768 px), y con letra grande los campos quedaban angostos. */
.wp-site-blocks .fluentform { container-type: inline-size; }
.wp-site-blocks .fluentform .ff-t-container { display: block; }
@container (min-width: 36rem) {
	.wp-site-blocks .fluentform .ff-t-container { display: flex; gap: var(--wp--preset--spacing--40); }
}
.wp-site-blocks .fluentform .ff-el-tc,
.wp-site-blocks .fluentform .ff_tc_checkbox + div { font-size: var(--wp--preset--font-size--body-small); }
/* Botón "Enviar": igual que el botón Default (Regla 2). */
.wp-site-blocks .fluentform .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wp--custom--touch-target);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	border: var(--wp--custom--border--width) solid transparent;
	border-radius: var(--wp--custom--radius--small);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--light);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	font-weight: var(--wp--custom--font-weight--button);
	line-height: 1.2;
	opacity: 1;
	transition: background-color 0.2s, transform 0.2s;
}
.wp-site-blocks .fluentform .ff-btn-submit:is(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--accent-darker);
	color: var(--wp--preset--color--light);
	opacity: 1;
}
/* Fluent Forms quita el contorno de foco del botón (outline: 0): vuelve el del tema. */
.wp-site-blocks .fluentform .ff-btn-submit:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent-2);
	outline-offset: var(--wp--custom--focus--offset);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.wp-site-blocks .fluentform .ff-btn-submit:is(:hover, :focus-visible) { transform: translateX(0.25rem); }
}
/* Mensaje de éxito. */
.wp-site-blocks .ff-message-success {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 0;
	border-radius: var(--wp--custom--radius--small);
	background: color-mix(in srgb, var(--wp--preset--color--accent-2) 12%, var(--wp--preset--color--light));
	color: var(--wp--preset--color--dark-darker);
	box-shadow: none;
}

/* ------------------------------------------------------------------
   Styleguide (patrón zzecomm-base/styleguide, solo página privada).
   ------------------------------------------------------------------ */
.sg-swatch__chip { min-height: 6rem; display: flex; align-items: flex-end; }
.sg-swatch dl { display: grid; grid-template-columns: auto 1fr; gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30); margin: 0; font-size: var(--wp--preset--font-size--body-small); }
.sg-swatch dt { font-weight: var(--wp--custom--font-weight--body-bold); }
.sg-swatch dd { margin: 0; }
.sg-meta { font-size: var(--wp--preset--font-size--body-small); }
.sg-meta code { overflow-wrap: anywhere; }
.sg-cell {
	display: grid;
	place-items: center;
	min-height: 3.5rem;
	border-radius: var(--wp--custom--radius--small);
	background: color-mix(in srgb, var(--wp--preset--color--accent-2) 14%, var(--wp--preset--color--light));
	color: var(--wp--preset--color--dark-darker);
	font-weight: var(--wp--custom--font-weight--body-bold);
}
.sg-test-box { padding: var(--wp--preset--spacing--40); border: var(--wp--custom--border--width) dashed var(--wp--preset--color--accent-2); border-radius: var(--wp--custom--radius--small); }
.sg-bar { padding: var(--wp--preset--spacing--40); border-radius: var(--wp--custom--radius--small); background: color-mix(in srgb, var(--wp--preset--color--accent-2) 14%, var(--wp--preset--color--light)); color: var(--wp--preset--color--dark-darker); font-size: var(--wp--preset--font-size--body-small); }
.sg-bar.alignwide { background: color-mix(in srgb, var(--wp--preset--color--accent) 12%, var(--wp--preset--color--light)); }
.sg-bar.alignfull { border-radius: 0; background: var(--wp--preset--color--dark-darker); color: var(--wp--preset--color--light); }
.sg-space { display: grid; grid-template-columns: minmax(0, 4rem) minmax(0, 1fr); align-items: center; gap: var(--wp--preset--spacing--30); }
.sg-space__bar { block-size: 1rem; background: var(--wp--preset--color--accent-2); border-radius: var(--wp--custom--radius--small); }
.sg-cover {
	min-height: var(--wp--custom--cover--min-height-fallback);
	min-height: var(--wp--custom--cover--min-height);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.sg-cover > * {
	inline-size: 100%;
}

/* ------------------------------------------------------------------
   Partes de primer nivel (encabezado, main y pie): sin el blockGap
   global entre ellas. El espacio lo da cada sección.
   ------------------------------------------------------------------ */
.wp-site-blocks > * { margin-block-start: 0; }

/* Secciones de primer nivel dentro del contenido: el contenido de la página
   (core/post-content) pone el blockGap entre sus bloques, y entre dos
   secciones a todo lo ancho eso se ve como una franja del fondo. Cada sección
   da su propio espacio con su relleno, así que van pegadas. El texto suelto
   (por ejemplo, el Aviso de privacidad) conserva el blockGap. */
:is(.wp-block-post-content, .is-root-container) > .alignfull,
:is(.wp-block-post-content, .is-root-container) > .alignfull + * { margin-block-start: 0; }

/* Plantillas con título (page-con-titulo.html e index.html): espacio de
   sección arriba y abajo. Si el contenido termina con una sección a todo lo
   ancho (con su propio fondo y relleno), no se agrega espacio abajo, para que
   no quede una franja antes del pie. */
.main-con-titulo { padding-block: var(--wp--preset--spacing--70); }
.main-con-titulo:has(> .wp-block-post-content > .alignfull:last-child) { padding-block-end: 0; }
.main-con-titulo > .wp-block-post-content > :first-child { margin-block-start: 0; }
.lista-resultados > li > * + * { margin-block-start: var(--wp--preset--spacing--20); }
/* Correos y direcciones largas no desbordan en pantallas angostas. */
.main-con-titulo a { overflow-wrap: anywhere; }

/* ------------------------------------------------------------------
   Encabezado (parts/header.html): sticky, debajo de la barra de
   administración cuando se ve.
   ------------------------------------------------------------------ */
.site-header {
	position: sticky;
	inset-block-start: var(--wp-admin--admin-bar--height, 0px);
	z-index: 10;
	background: var(--wp--preset--color--light);
	border-block-end: 0.0625rem solid color-mix(in srgb, var(--wp--preset--color--dark) 15%, transparent);
}
/* Hasta 600 px la barra de administración no es fija: el encabezado va arriba. */
@media (max-width: 600px) {
	.admin-bar .site-header { inset-block-start: 0; }
}
.site-header__inner { column-gap: var(--wp--preset--spacing--50); }
.site-logo { padding-block: var(--wp--preset--spacing--30); }
.site-logo img { display: block; inline-size: clamp(8.5rem, 7.6rem + 4vw, 11rem); height: auto; }

/* Anclas (por ejemplo /#servicios): el destino queda justo debajo del
   encabezado fijo. assets/js/anclas.js mide el encabezado real (alto más
   barra de administración, si se ve) en --zz-encabezado-fin; sin script, 7rem
   cubre su alto (de 88 a 145 px según el ancho y la letra). */
:where(section[id], .wp-block-group[id], .wp-block-heading[id]) {
	scroll-margin-block-start: var(--zz-encabezado-fin, calc(var(--wp-admin--admin-bar--height, 0px) + 7rem));
}

/* ------------------------------------------------------------------
   Menú (bloque Navegación con la clase site-nav).
   Botones contiguos, centrados en vertical (no ocupan toda la altura del
   encabezado). Texto en dark-darker; seleccionado, hover y foco con fondo
   dark-darker y letra light. Padding 13/14 px, esquinas de 4 px.
   ------------------------------------------------------------------ */
.site-nav.wp-block-navigation { gap: 0; }
.site-nav.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: var(--wp--custom--touch-target);
	padding: 0.8125rem 0.875rem;
	color: var(--wp--preset--color--dark-darker);
	font-weight: var(--wp--custom--font-weight--button);
	line-height: 1.25;
	text-decoration: none;
	border-radius: var(--wp--custom--radius--small);
	transition: background-color 0.2s, color 0.2s;
}
/* Una opción con submenú y sin página propia ("submenuVisibility": "click")
   es un botón: se ve igual que los enlaces del menú. */
.site-nav.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-submenu__toggle {
	border: 0;
	background-color: transparent;
	font: inherit;
	font-weight: var(--wp--custom--font-weight--button);
	cursor: pointer;
}
.site-nav.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content:is(:hover, :focus-visible, [aria-current="page"]),
.site-nav.wp-block-navigation .wp-block-navigation-submenu__toggle[aria-expanded="true"],
.site-nav.wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content,
.site-nav.wp-block-navigation .has-child:is(:hover, :focus-within) > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--dark-darker);
	color: var(--wp--preset--color--light);
}
/* Mientras un submenú está abierto, el resaltado pasa a su botón: la página
   actual de primer nivel (Inicio, Nosotros, Contacto) se apaga solo a la
   vista (aria-current no cambia) y vuelve al cerrarlo. Dentro de un servicio
   no hay página actual de primer nivel: el botón y la opción del submenú
   siguen marcados. Igual en escritorio y en el menú móvil. */
.site-nav.wp-block-navigation:has(.wp-block-navigation-submenu__toggle[aria-expanded="true"]) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"]:not(:hover, :focus-visible) {
	background: transparent;
	color: var(--wp--preset--color--dark-darker);
}
/* Foco dentro del botón (las opciones van pegadas): anillo blanco. */
.site-nav.wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	outline-color: var(--wp--preset--color--light);
	outline-offset: -0.3rem;
}
/* Submenú: con un enlace como padre se abre al pasar el cursor o enfocar;
   con un botón (submenuVisibility "click"), al hacer clic o tocar, con Enter
   o Espacio, y Escape lo cierra (script del bloque). El "▾" gira al abrir; el
   ícono SVG del núcleo se oculta para no tener dos flechas. Se alinea a la
   derecha de su opción para no salirse de la pantalla. */
.site-nav.wp-block-navigation .has-child > .wp-block-navigation-item__content::after {
	content: "▾";
	display: inline-block;
	margin-inline-start: 0.35em;
	font-size: 0.8em;
	transition: transform 0.2s;
}
.site-nav.wp-block-navigation .has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
	.site-nav.wp-block-navigation .has-child > .wp-block-navigation-item__content::after { transition: none; }
}
.site-nav .wp-block-navigation__submenu-icon { display: none; }
.site-nav.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
	min-width: 14rem;
	padding: var(--wp--preset--spacing--10);
	border: 0;
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--light);
	box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--wp--preset--color--dark-darker) 18%, transparent);
}
.site-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item { width: 100%; }
.site-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content { width: 100%; }

/* Menú móvil (superposición del bloque Navegación). El bloque lo cambia a
   600 px; aquí se mantiene hasta 56em, el mismo corte de la maqueta, porque
   antes el menú horizontal no cabe junto al logo. */
@media (min-width: 600px) and (max-width: 55.999em) {
	.site-nav.wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.site-nav.wp-block-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
/* Botón "Menú" con ☰, como en la maqueta. */
.site-nav .wp-block-navigation__responsive-container-open {
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-height: var(--wp--custom--touch-target);
	padding-inline: var(--wp--preset--spacing--40);
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--dark-darker);
	border-radius: var(--wp--custom--radius--small);
	color: var(--wp--preset--color--dark-darker);
	font-weight: var(--wp--custom--font-weight--button);
}
.site-nav .wp-block-navigation__responsive-container-open::after { content: "☰"; font-size: 1.2em; line-height: 1; }
.site-nav .wp-block-navigation__responsive-container-close {
	min-height: var(--wp--custom--touch-target);
	padding-inline: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--dark-darker);
	font-weight: var(--wp--custom--font-weight--button);
}
.site-nav .wp-block-navigation__responsive-container-close::after { content: " ✕"; }
/* Dentro de la superposición: opciones a todo lo ancho, alineadas a la
   izquierda; el submenú, con sangría. */
.site-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--40) var(--wp--style--root--padding-right) var(--wp--preset--spacing--50) var(--wp--style--root--padding-left);
	background: var(--wp--preset--color--light);
}
/* El núcleo repite clases en estas reglas; por eso el prefijo largo. */
.site-nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content,
.site-nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	align-items: stretch;
	gap: 0;
}
.site-nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
	width: 100%;
	align-items: stretch;
}
.site-nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item .wp-block-navigation-item__content {
	width: 100%;
	padding: 0.8125rem 0.875rem;
}
/* El núcleo deja los submenús siempre abiertos en la superposición, aunque el
   botón diga que está cerrado. Aquí arrancan cerrados (también antes de que
   cargue el script, que es quien pone aria-expanded) y el botón los
   abre y cierra, igual que en escritorio. Un submenú cuyo padre es un enlace
   (sin botón) sigue abierto. */
.site-nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation-submenu__toggle:not([aria-expanded="true"]) ~ .wp-block-navigation__submenu-container { display: none; }
.site-nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content .has-child > a.wp-block-navigation-item__content::after { content: none; }
.site-nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
	width: 100%;
	align-items: stretch;
	padding: 0 0 0 var(--wp--preset--spacing--50);
	box-shadow: none;
	gap: 0;
}

/* ------------------------------------------------------------------
   Pie (parts/footer.html): fondo dark-darker, texto atenuado y enlaces en
   light sin subrayado (subrayado al pasar el cursor o enfocar). Abajo deja
   lugar para el botón flotante de WhatsApp, que no debe tapar el crédito.
   ------------------------------------------------------------------ */
.site-footer__body {
	padding-block: var(--wp--preset--spacing--70) calc(var(--wp--custom--touch-target) + var(--wp--preset--spacing--60));
	color: color-mix(in srgb, var(--wp--preset--color--light) 80%, var(--wp--preset--color--dark-darker));
}
.site-footer__heading {
	color: var(--wp--preset--color--light);
	font-weight: var(--wp--custom--font-weight--heading);
	line-height: var(--wp--custom--line-height--title-5);
}
.site-footer a:not(.wp-block-button__link) { color: var(--wp--preset--color--light); text-decoration: none; }
.site-footer a:not(.wp-block-button__link):is(:hover, :focus-visible) { text-decoration: underline; text-underline-offset: 0.2em; }
.site-footer :focus-visible { outline-color: var(--wp--preset--color--light); }
/* Línea divisoria separada de las columnas con el espacio 60. */
.site-footer__body > .site-footer__bottom {
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block-start: var(--wp--preset--spacing--50);
	border-block-start: 0.0625rem solid color-mix(in srgb, var(--wp--preset--color--light) 25%, transparent);
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--body-small);
}
.site-footer__bottom > * { margin: 0; }
/* Redes con su nombre visible y área táctil de 44 px. */
.site-footer .wp-block-social-links .wp-block-social-link-anchor {
	min-height: var(--wp--custom--touch-target);
	gap: var(--wp--preset--spacing--20);
}
.site-footer .wp-block-social-links .wp-block-social-link-label { font-size: var(--wp--preset--font-size--body); }

/* ------------------------------------------------------------------
   Botón flotante de WhatsApp (plugin WP WhatsApp Chat). El hijo define
   --wp--custom--whatsapp--background y --text con un contraste AA.
   El plugin pone sus colores en el atributo style de .qlwapp; por eso el
   !important, que solo cambia sus variables (no las opciones del plugin).
   ------------------------------------------------------------------ */
.qlwapp {
	--qlwapp-scheme-brand: var(--wp--custom--whatsapp--background) !important;
	--qlwapp-scheme-text: var(--wp--custom--whatsapp--text) !important;
	--qlwapp-scheme-font-family: var(--wp--preset--font-family--body) !important;
	--qlwapp-scheme-font-size: var(--wp--preset--font-size--body) !important;
}