/*
 * Maquetador — CSS estructural del frontend.
 * SOLO layout (grid de filas/columnas). Sin colores ni fuentes:
 * eso lo aportan las CSS custom properties del tema hijo / estilos globales.
 */

/* Fuentes y tamaños globales del contenido del maquetador. Todo sale de tokens
   --pz-* que el tema define desde el Customizer (por breakpoint); el fallback
   tras la coma mantiene un valor sensato si el tema no los aporta. Scoped a .pz-
   para no pisar el resto del tema. Los campos por instancia (inline) ganan sobre
   estos defaults globales. */

.pz-layout {
	font-family: var(--pz-font-body, inherit);
	font-size: var(--pz-text-size, 1rem);
	/* Contexto de apilamiento propio: los z-index internos del layout (filas,
	   carruseles, solapes por margin negativo) nunca compiten con el tema
	   (site-header z:100, submenús/megamenu z:200, skip-link z:1000). */
	isolation: isolate;
	/* Los presets de sombra (--pz-shadow-sm/md/lg/xl) se emiten en :root desde
	   PZ_Tokens::render_css_vars() (módulo branding): también los usa el
	   megamenu del tema, que vive fuera de .pz-layout. */
}

/* Componente suelto fuera de un layout (pz_render_component(), p. ej. los
   bloques de componente del megamenú). Transparente al layout de su contenedor;
   solo sirve de ámbito para la tipografía de título/texto de abajo. */
.pz-cmp-standalone {
	display: contents;
}
:is(.pz-layout, .pz-cmp-standalone) .pz-heading {
	font-family: var(--pz-font-heading, inherit);
	line-height: var(--pz-heading-lh, 1.2);
	font-weight: var(--pz-heading-weight, 700);
	margin-bottom: var(--pz-heading-mb, 0.5rem);
	text-wrap: pretty;
}
:is(.pz-layout, .pz-cmp-standalone) .pz-text {
	line-height: var(--pz-text-lh, 1.6);
	margin-bottom: var(--pz-text-mb, 1rem);
	text-wrap: pretty;
}
:is(.pz-layout, .pz-cmp-standalone) .pz-text p {
	margin: 0 0 0.85em;
}
:is(.pz-layout, .pz-cmp-standalone) .pz-text p:last-child {
	margin-bottom: 0;
}
:is(.pz-layout, .pz-cmp-standalone) .pz-text--balance p {
	text-wrap: balance;
}

/* Tamaño de título por nivel (la etiqueta real es h1…h6).
   --pz-comp-fs: tamaño personalizado escritorio; --pz-comp-fs-mobile: override móvil.
   Ambos se aplican desde el inline style del componente vía pz_build_inline_styles(). */
:is(.pz-layout, .pz-cmp-standalone) h1.pz-heading { font-size: var(--pz-comp-fs, var(--pz-h1, 2.5rem)); }
:is(.pz-layout, .pz-cmp-standalone) h2.pz-heading { font-size: var(--pz-comp-fs, var(--pz-h2, 2rem)); }
:is(.pz-layout, .pz-cmp-standalone) h3.pz-heading { font-size: var(--pz-comp-fs, var(--pz-h3, 1.5rem)); }
:is(.pz-layout, .pz-cmp-standalone) h4.pz-heading { font-size: var(--pz-comp-fs, var(--pz-h4, 1.25rem)); }
:is(.pz-layout, .pz-cmp-standalone) h5.pz-heading { font-size: var(--pz-comp-fs, var(--pz-h5, 1.125rem)); }
:is(.pz-layout, .pz-cmp-standalone) h6.pz-heading { font-size: var(--pz-comp-fs, var(--pz-h6, 1rem)); }

/* Tamaño personalizado para texto — solo cuando se define --pz-comp-fs; si no, hereda. */
:is(.pz-layout, .pz-cmp-standalone) .pz-text { font-size: var(--pz-comp-fs, inherit); }

/* Override móvil: usa --pz-comp-fs-mobile si está definido; si no, cae al tamaño
   de escritorio (--pz-comp-fs) y finalmente al token global. */
@media (max-width: 768px) {
	:is(.pz-layout, .pz-cmp-standalone) h1.pz-heading { font-size: var(--pz-comp-fs-mobile, var(--pz-comp-fs, var(--pz-h1, 2.5rem))); }
	:is(.pz-layout, .pz-cmp-standalone) h2.pz-heading { font-size: var(--pz-comp-fs-mobile, var(--pz-comp-fs, var(--pz-h2, 2rem))); }
	:is(.pz-layout, .pz-cmp-standalone) h3.pz-heading { font-size: var(--pz-comp-fs-mobile, var(--pz-comp-fs, var(--pz-h3, 1.5rem))); }
	:is(.pz-layout, .pz-cmp-standalone) h4.pz-heading { font-size: var(--pz-comp-fs-mobile, var(--pz-comp-fs, var(--pz-h4, 1.25rem))); }
	:is(.pz-layout, .pz-cmp-standalone) h5.pz-heading { font-size: var(--pz-comp-fs-mobile, var(--pz-comp-fs, var(--pz-h5, 1.125rem))); }
	:is(.pz-layout, .pz-cmp-standalone) h6.pz-heading { font-size: var(--pz-comp-fs-mobile, var(--pz-comp-fs, var(--pz-h6, 1rem))); }
	:is(.pz-layout, .pz-cmp-standalone) .pz-text { font-size: var(--pz-comp-fs-mobile, var(--pz-comp-fs, inherit)); }
}

/* La sección es una banda a ancho completo (fondo + padding vertical).
   El padding vertical por defecto sale del token global (0 si no se define);
   el padding_y por instancia (inline) lo sobrescribe.

   Recorte SOLO horizontal con overflow-x: clip — nunca hidden: por spec, un
   eje hidden fuerza el otro eje de visible a auto, lo que (1) pinta una barra
   de scroll vertical DENTRO de la sección en cuanto algo sobresale (hero) y
   (2) recorta las filas que se solapan con la sección vecina por margin
   negativo. clip recorta el eje X dejando el Y visible de verdad. El hidden
   previo queda como fallback para navegadores sin clip (< 2022).

   position: relative para que el z_index por instancia (estilo z_index del
   editor/importador) tenga efecto; sin z-index propio, la sección NO crea
   contexto de apilamiento y sus fondos quedan siempre bajo las filas. */
.pz-section {
	width: 100%;
	padding-block: var(--pz-section-py, 0);
	position: relative;
	overflow-x: hidden;
	overflow-x: clip;
}

.pz-row {
	display: flex;
	flex-wrap: wrap;
	/* Apilamiento: toda fila pinta SIEMPRE por encima de cualquier fondo de
	   sección (propio o vecino) — es lo que hace visibles los solapes por
	   margin negativo. Entre filas solapadas gana la posterior en el DOM; un
	   z_index por instancia (inline) sobrescribe este 1 para casos especiales.
	   El z-index además crea un contexto de apilamiento por fila, que contiene
	   los z-index internos de los componentes (carrusel 0/1/2, etc.). */
	position: relative;
	z-index: 1;
	/* Default cuando la fila no fija "Alineación vertical" (align_items vacío). */
	align-items: center;
	gap: var(--pz-row-gap, 1.5rem);
	/* Margen vertical por defecto (token global); el margin_top/bottom por
	   instancia (inline, vía SpacingBoxField) sobrescribe cada lado por separado.
	   El margen HORIZONTAL no va aquí: se resuelve por modo de ancho (abajo)
	   encogiendo el ancho de la fila y centrándola con margin-inline: auto, para
	   que nunca desborde el viewport y el fondo (background) de la fila —si lo
	   tiene, para "contenerla" visualmente— encoja de verdad en vez de quedarse
	   a ancho completo con solo el contenido interior desplazado. */
	margin-top: var(--pz-row-margin-y, 0px);
	margin-bottom: var(--pz-row-margin-y, 0px);
}

/* Fila en modo contenedor: centrada y limitada. El max-width por defecto sale del
   token global, reducido por el margen horizontal del token (si lo hay) antes de
   centrar — así el margen encoge la caja (y su fondo) en vez de solo añadir
   padding interior. Se sobrescribe con el max-width inline de la fila si el
   usuario elige otro (en ese caso el margen del token deja de restar). */
.pz-row--container {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--pz-container-max, 1200px) - (var(--pz-row-margin-x, 0px) * 2));
	margin-inline: auto;
	padding-inline: 1rem;
}

/* Fila a ancho completo: ocupa todo el ancho de la sección menos el margen
   horizontal del token, centrada con margin-inline: auto (nunca desborda,
   a diferencia de sumar un margin-left/right fijo sobre un width:100%). */
.pz-row--full {
	box-sizing: border-box;
	width: calc(100% - (var(--pz-row-margin-x, 0px) * 2));
	margin-inline: auto;
}

.pz-row--nested {
	box-sizing: border-box;
	width: calc(100% - (var(--pz-row-margin-x, 0px) * 2));
	margin-inline: auto;
	padding-inline: 0;
}

.pz-col {
	flex: 1 1 100%;
	min-width: 0;
	padding: var(--pz-col-padding, 0);
}

/* Anchos de columna por fracción.
   La resta del gap usa la MISMA variable --pz-row-gap que la separación real de
   la fila (la fija el renderer como custom property cuando el usuario cambia el
   gap). Así las columnas encajan con cualquier gap, no solo con 1.5rem: para N
   columnas en una fila, la suma (anchos + gaps) da exactamente 100%.
   También se resta --pz-col-mx (margin_left + margin_right propios de la
   columna, si los tiene — la fija el renderer): así un margen horizontal en
   una columna encoge su propio hueco en vez de desbordar la fila. */
.pz-col--1-1 { flex-basis: calc(100% - var(--pz-col-mx, 0px)); }
.pz-col--1-2 { flex-basis: calc(50% - var(--pz-row-gap, 1.5rem) / 2 - var(--pz-col-mx, 0px)); }
.pz-col--1-3 { flex-basis: calc(33.333% - var(--pz-row-gap, 1.5rem) * 2 / 3 - var(--pz-col-mx, 0px)); }
.pz-col--2-3 { flex-basis: calc(66.666% - var(--pz-row-gap, 1.5rem) / 3 - var(--pz-col-mx, 0px)); }
.pz-col--1-4 { flex-basis: calc(25% - var(--pz-row-gap, 1.5rem) * 3 / 4 - var(--pz-col-mx, 0px)); }
.pz-col--3-4 { flex-basis: calc(75% - var(--pz-row-gap, 1.5rem) / 4 - var(--pz-col-mx, 0px)); }
.pz-col--1-5 { flex-basis: calc(20% - var(--pz-row-gap, 1.5rem) * 4 / 5 - var(--pz-col-mx, 0px)); }
.pz-col--2-5 { flex-basis: calc(40% - var(--pz-row-gap, 1.5rem) * 3 / 5 - var(--pz-col-mx, 0px)); }
.pz-col--3-5 { flex-basis: calc(60% - var(--pz-row-gap, 1.5rem) * 2 / 5 - var(--pz-col-mx, 0px)); }
.pz-col--4-5 { flex-basis: calc(80% - var(--pz-row-gap, 1.5rem) * 1 / 5 - var(--pz-col-mx, 0px)); }
.pz-col--1-6 { flex-basis: calc(16.666% - var(--pz-row-gap, 1.5rem) * 5 / 6 - var(--pz-col-mx, 0px)); }

/* ── Breakpoints responsive de filas/columnas ──────────────────────────────
   Sistema de 3 etapas (el renderer añade .pz-row--cols-{n} con el nº de cols):
   · Escritorio (>1024px): anchos por fracción (arriba).
   · Tablet (769–1024px): las filas de 3 o 4 columnas pasan a 2 por fila y las de
     5 o 6 a 3 por fila; las de 2 columnas conservan su proporción y las
     asimétricas su reparto.
   · Móvil (≤768px): todas las columnas a ancho completo (1 por fila). */
@media (min-width: 769px) and (max-width: 1024px) {
	.pz-row--cols-3 > .pz-col,
	.pz-row--cols-4 > .pz-col {
		flex-basis: calc(50% - var(--pz-row-gap, 1.5rem) / 2 - var(--pz-col-mx, 0px));
	}

	.pz-row--cols-5 > .pz-col,
	.pz-row--cols-6 > .pz-col {
		flex-basis: calc(33.333% - var(--pz-row-gap, 1.5rem) * 2 / 3 - var(--pz-col-mx, 0px));
	}
}

@media (max-width: 768px) {
	/* Antes forzaba flex-basis:100% a secas: si la columna tenía su propio
	   margin_left/right, ese 100% + margen desbordaba la fila por la derecha
	   (el margen se veía solo a la izquierda). Ahora también resta --pz-col-mx. */
	.pz-col { flex-basis: calc(100% - var(--pz-col-mx, 0px)) !important; }
}

/* ---- Componentes ---- */

/* Envoltorio de la imagen: alinea (justify-content) y aloja el margin/padding del
   componente, sin que choquen con el ancho de la propia imagen. */
.pz-image-wrap {
	display: flex;
	justify-content: flex-start;
}

.pz-image {
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: var(--pz-image-radius, 0);
}

/* Con versión móvil el <img> va dentro de un <picture>: display contents lo hace
   transparente para el layout, de modo que la alineación flex del wrapper y el
   ancho del propio <img> se comporten igual que sin <picture>. */
.pz-image-picture {
	display: contents;
}

/* ── Vídeo ──────────────────────────────────────────────────────────────────
   Wrapper flex para alinear (por defecto centrado); .pz-video aloja ancho,
   borde, radio y sombra; el frame mantiene la proporción 16/9 y recorta. */
.pz-video-wrap {
	display: flex;
	justify-content: center;
}

.pz-video {
	position: relative;
	width: 100%;
	max-width: 100%;
	border-radius: var(--pz-video-radius, 0);
}

.pz-video__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: inherit;
	background: #000;
	/* Fuerza a los navegadores a recortar el <video>/<iframe> hijo a las esquinas
	   redondeadas (sin esto, muchos navegadores no aplican el overflow:hidden a
	   estos elementos reemplazados). */
	transform: translateZ( 0 );
}

.pz-video__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	object-fit: cover;
	/* Redondeo también en el propio medio: refuerzo para el iframe de YouTube,
	   que en algunos navegadores ignora el recorte del contenedor. */
	border-radius: inherit;
}

.pz-video__cover {
	position: absolute;
	inset: 0;
	cursor: pointer;
}

.pz-video__cover.is-hidden {
	display: none;
}

.pz-video__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pz-video__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.pz-video__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: var(--pz-video-play-color, #fff);
}

.pz-video__play svg {
	width: var(--pz-video-play-size, 72px);
	height: auto;
	filter: drop-shadow( 0 2px 10px rgba( 0, 0, 0, 0.45 ) );
	transition: transform 0.15s ease;
}

.pz-video__play:hover svg,
.pz-video__play:focus-visible svg {
	transform: scale( 1.08 );
}

.pz-video__play--no-icon svg {
	display: none;
}

.pz-separator {
	border: 0;
	border-top: var(--pz-sep-thickness, 1px) solid currentColor;
	width: 100%;
	margin-block: var(--pz-sep-my, 1rem);
}

/* Envoltorio del botón: posiciona el botón dentro de su columna (justify-content)
   según la alineación elegida. Por defecto a la izquierda. */
.pz-button-wrap {
	display: flex;
	justify-content: flex-start;
}

/* Botón: padding/tamaño/grosor/radio salen de tokens del tema (configurables por
   Customizer y escalados por breakpoint). Los tamaños sm/lg derivan del padding y
   tamaño base con un factor, para no fijar valores. Colores: por preset (clase
   pz-button--{variant}, CSS del tema) o por override inline de instancia. */
.pz-button {
	/* inline-flex + centrado: reparte el alto útil de forma simétrica arriba/abajo,
	   independientemente del leading y del descender vacío de la fuente. Con
	   line-height 1 se elimina el hueco de línea que desplazaba ópticamente el
	   texto hacia arriba (más aire abajo que arriba) en botones de una sola línea. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	border-radius: var(--pz-btn-radius, var(--pz-border-radius, 6px));
	background: var(--pz-btn-bg, var(--pz-color-primary, #1a1a1a));
	color: var(--pz-btn-text-color, #fff);
	border: 1px solid var(--pz-btn-border-color, transparent);
	font-weight: var(--pz-btn-weight, 600);
	font-size: var(--pz-btn-size, 1rem);
	padding: var(--pz-btn-py, 0.65rem) var(--pz-btn-px, 1.3rem);
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* md = tamaño base (tokens). sm/lg escalan el padding y el tamaño de fuente. */
.pz-button--sm {
	padding: calc(var(--pz-btn-py, 0.65rem) * 0.7) calc(var(--pz-btn-px, 1.3rem) * 0.7);
	font-size: calc(var(--pz-btn-size, 1rem) * 0.9);
}
.pz-button--lg {
	padding: calc(var(--pz-btn-py, 0.65rem) * 1.35) calc(var(--pz-btn-px, 1.3rem) * 1.35);
	font-size: calc(var(--pz-btn-size, 1rem) * 1.15);
}

/* Hover por defecto: usa el token global --pz-btn-hover (branding). Solo aplica a
   botones sin fondo inline propio ni preset del tema con su propio :hover. */
.pz-button:hover {
	background: var(--pz-btn-hover, rgba(0, 0, 0, 0.85));
}

/* Fondo en hover configurado por instancia (custom property inline del render).
   !important para ganar al background-color inline del propio botón (un estilo
   inline vence a cualquier selector) y a los presets .pz-button--{variant}:hover
   del tema: si el usuario elige un hover en el modal, ese gana. Mismo patrón que
   .pz-block-button__cta.pz-has-hover en el tema. */
.pz-button.pz-has-hover:hover {
	background-color: var(--pz-btn-hover) !important;
}
/* Color del texto en hover (hover_color): mismo motivo que el fondo, el
   text_color de la instancia es inline. El icono lo sigue (currentColor). */
.pz-button.pz-has-hover-color:hover {
	color: var(--pz-btn-hover-color) !important;
}

/* Tamaño del texto por instancia (text_size / text_size_mobile). Doble clase
   para ganar a los tamaños .pz-button--sm/--lg; el móvil va después y gana al
   de escritorio. El icono (.pz-btn-icon, en em) crece con el texto. */
.pz-button.pz-has-fs {
	font-size: var(--pz-btn-fs);
}
@media (max-width: 768px) {
	.pz-button.pz-has-fs-m {
		font-size: var(--pz-btn-fs-m);
	}
}

/* Icono del botón (icon + icon_position): lo usan el componente botón y el
   bloque botón del megamenú (.pz-block-button__cta, CSS del tema). Mide lo
   mismo que una letra y hereda el color del texto. */
.pz-button.pz-has-icon {
	gap: 0.5em;
}
.pz-btn-icon {
	display: inline-flex;
	flex-shrink: 0;
	width: 1.15em;
	height: 1.15em;
}
.pz-btn-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.pz-feature-list {
	display: grid;
	gap: var(--pz-feature-gap, var(--pz-row-gap, 1.5rem));
}

.pz-feature-list--grid-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pz-feature-list--grid-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Tablet (769–1024px): el grid de 3 columnas pasa a 2; el de 2 se mantiene.
   En móvil (≤768px, más abajo) ambos pasan a 1 columna. */
@media (min-width: 769px) and (max-width: 1024px) {
	.pz-feature-list--grid-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.pz-feature-list__item {
	display: flex;
	gap: 0.9rem;
	align-items: flex-start;
}

.pz-feature-list--icon-top .pz-feature-list__item {
	flex-direction: column;
}

/* Alineación con el icono arriba: en columna, align-items es el eje horizontal,
   así que el icono (flex item, que no responde a text-align) acompaña a la
   alineación elegida en vez de quedarse siempre a la izquierda. */
.pz-feature-list--icon-top.pz-feature-list--align-center .pz-feature-list__item {
	align-items: center;
}
.pz-feature-list--icon-top.pz-feature-list--align-right .pz-feature-list__item {
	align-items: flex-end;
}

/* Hueco visual del item: lo comparten el icono (.pz-feature-list__icon) y la
   imagen (.pz-feature-list__media--img), así que forma, caja y tamaño se
   definen una sola vez sobre .pz-feature-list__media. El tamaño se resuelve con
   la var intermedia --pz-feature-media-size, que cada variante redefine (evita
   duplicar width/height y peleas de especificidad). */
.pz-feature-list__media {
	width: var(--pz-feature-media-size, var(--pz-feature-icon-size, 24px));
	height: var(--pz-feature-media-size, var(--pz-feature-icon-size, 24px));
	flex: 0 0 auto;
}

.pz-feature-list__icon {
	color: var(--pz-feature-icon-color, var(--pz-color-primary, currentColor));
}

.pz-feature-list--style-circle .pz-feature-list__media,
.pz-feature-list--style-rounded .pz-feature-list__media,
.pz-feature-list--style-square .pz-feature-list__media {
	--pz-feature-media-size: var(--pz-feature-icon-box-size, 48px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--pz-feature-icon-bg, rgba(0, 0, 0, 0.06));
	/* Recorta la imagen a la forma elegida (círculo / redondeado). */
	overflow: hidden;
}

.pz-feature-list--style-circle .pz-feature-list__media {
	border-radius: 9999px;
}

/* Radio proporcional a la caja (25 % del lado): un valor fijo convertía las
   cajas pequeñas en casi círculos (14px en una caja de 32px = 44 %). Sigue a
   --pz-feature-media-size, así vale también para la imagen. */
.pz-feature-list--style-rounded .pz-feature-list__media {
	border-radius: calc(var(--pz-feature-media-size, 48px) * 0.25);
}

.pz-feature-list--style-square .pz-feature-list__media {
	border-radius: 0;
}

/* Imagen: tamaño propio, independiente del icono y de la caja. Dos clases para
   igualar la especificidad de las reglas de forma de arriba; al ir después,
   gana por orden de aparición. */
.pz-feature-list .pz-feature-list__media--img {
	--pz-feature-media-size: var(--pz-feature-img-size, 64px);
}

.pz-feature-list__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--pz-feature-img-fit, cover);
}

.pz-feature-list__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.pz-feature-list--style-circle .pz-feature-list__icon svg,
.pz-feature-list--style-rounded .pz-feature-list__icon svg,
.pz-feature-list--style-square .pz-feature-list__icon svg {
	width: var(--pz-feature-icon-size, 24px);
	height: var(--pz-feature-icon-size, 24px);
}

.pz-feature-list__content {
	min-width: 0;
}

/* Item enlazado (url): «stretched link». El enlace está en el título (o en el
   icono/imagen si no hay título) y su ::after cubre todo el item, así que se
   puede pulsar en cualquier punto y el foco de teclado es un único enlace.
   El título conserva su color; subrayado en hover como señal de enlace
   además del cursor. Los enlaces propios del texto quedan por encima. */
.pz-feature-list__item--link {
	position: relative;
}
.pz-feature-list .pz-feature-list__link,
.pz-feature-list .pz-feature-list__link:hover {
	color: inherit;
	text-decoration: none;
}
.pz-feature-list__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
/* Sin título ni icono/imagen: el enlace vacío se superpone al item directamente
   (fuera del flujo para no sumar el gap del item). */
.pz-feature-list__link:empty {
	position: absolute;
	inset: 0;
}
/* Dos clases: en el megamenú debe ganar a `.site-nav a { display:inline-block }`. */
.pz-feature-list .pz-feature-list__link--media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.pz-feature-list__item--link .pz-feature-list__text a {
	position: relative;
	z-index: 2;
}
.pz-feature-list__item--link:hover .pz-feature-list__title {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.pz-feature-list__link:focus-visible {
	outline: none;
}
.pz-feature-list__link:focus-visible::after {
	outline: 2px solid currentColor;
	outline-offset: 4px;
	border-radius: 4px;
}

/* Tamaños por instancia (title_size / text_size, y sus variantes móvil más
   abajo): --pz-feature-title-fs / --pz-feature-text-fs; vacío = tipografía del
   sitio (H5 / hereda). */
.pz-feature-list__title {
	margin: 0 0 0.4rem;
	font-family: var(--pz-font-heading, inherit);
	font-size: var(--pz-feature-title-fs, var(--pz-h5, 1.125rem));
	line-height: var(--pz-heading-lh, 1.2);
	font-weight: var(--pz-heading-weight, 700);
	color: var(--pz-feature-title-color, inherit);
}

.pz-feature-list__text {
	color: var(--pz-feature-text-color, inherit);
	font-size: var(--pz-feature-text-fs, inherit);
	line-height: var(--pz-text-lh, 1.6);
}

/* Móvil: tamaño propio o, si no hay, el de escritorio. */
@media (max-width: 768px) {
	.pz-feature-list__title {
		font-size: var(--pz-feature-title-fs-m, var(--pz-feature-title-fs, var(--pz-h5, 1.125rem)));
	}
	.pz-feature-list__text {
		font-size: var(--pz-feature-text-fs-m, var(--pz-feature-text-fs, inherit));
	}
}

.pz-feature-list__text > *:first-child {
	margin-top: 0;
}

.pz-feature-list__text > *:last-child {
	margin-bottom: 0;
}

/* Visibilidad por dispositivo (secciones, filas, columnas y componentes).
   El wrapper de componente es transparente al layout (display:contents) y solo
   se convierte en display:none cuando su breakpoint oculta el elemento. */
.pz-cmp-visibility { display: contents; }

@media (min-width: 1025px) {
	.pz-hide-desktop { display: none !important; }
}

@media (min-width: 769px) and (max-width: 1024px) {
	.pz-hide-tablet { display: none !important; }
}

@media (max-width: 768px) {
	.pz-hide-mobile { display: none !important; }
	.pz-feature-list--grid-2,
	.pz-feature-list--grid-3 {
		grid-template-columns: 1fr;
	}
}

.pz-accordion {
	display: grid;
	gap: 0.75rem;
}

.pz-accordion__item {
	border: 1px solid var(--pz-accordion-border-color, color-mix(in srgb, currentColor 18%, transparent));
	border-radius: var(--pz-accordion-radius, var(--pz-border-radius, 6px));
	overflow: hidden;
}

.pz-accordion__summary {
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	padding: 0.9rem 1rem;
	cursor: pointer;
	font-family: var(--pz-font-heading, inherit);
	font-weight: var(--pz-heading-weight, 700);
	line-height: var(--pz-heading-lh, 1.2);
	background-color: var(--pz-accordion-summary-bg, transparent);
	color: var(--pz-accordion-summary-color, inherit);
}

.pz-accordion__summary::-webkit-details-marker {
	display: none;
}

.pz-accordion__summary::after {
	content: '';
	flex-shrink: 0;
	width: 0.5em;
	height: 0.5em;
	border-right: 0.13em solid var(--pz-accordion-icon-color, currentColor);
	border-bottom: 0.13em solid var(--pz-accordion-icon-color, currentColor);
	transform: rotate(45deg);
	transition: transform 0.22s ease;
}

.pz-accordion__item[open] > .pz-accordion__summary::after {
	transform: rotate(-135deg);
}

.pz-accordion__content {
	padding: 1rem;
	line-height: var(--pz-text-lh, 1.6);
	background-color: var(--pz-accordion-content-bg, transparent);
}

.pz-accordion__content > *:first-child {
	margin-top: 0;
}

.pz-accordion__content > *:last-child {
	margin-bottom: 0;
}

/* Variante bootstrap: bloque único compacto */
.pz-accordion--bootstrap {
	gap: 0;
	border: 1px solid var(--pz-accordion-border-color, color-mix(in srgb, currentColor 18%, transparent));
	border-radius: var(--pz-accordion-radius, var(--pz-border-radius, 6px));
	overflow: hidden;
}

.pz-accordion--bootstrap .pz-accordion__item {
	border: none;
	border-radius: 0;
	border-top: 1px solid var(--pz-accordion-border-color, color-mix(in srgb, currentColor 18%, transparent));
}

.pz-accordion--bootstrap .pz-accordion__item:first-child {
	border-top: none;
}

.pz-accordion--bootstrap .pz-accordion__summary {
	background-color: var(--pz-accordion-summary-bg, color-mix(in srgb, currentColor 4%, transparent));
}

.pz-accordion--bootstrap .pz-accordion__summary:hover {
	background-color: var(--pz-accordion-summary-bg, color-mix(in srgb, currentColor 8%, transparent));
	filter: brightness(0.96);
}

.pz-accordion--bootstrap .pz-accordion__item[open] > .pz-accordion__summary {
	background-color: var(--pz-accordion-summary-bg, color-mix(in srgb, currentColor 6%, transparent));
	filter: brightness(0.93);
}

.pz-card {
	background: var(--pz-card-bg, transparent);
	border-radius: var(--pz-card-radius, var(--pz-border-radius, 6px));
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.pz-card--bordered {
	border: var(--pz-card-border-width, 1px) solid var(--pz-card-border-color, color-mix(in srgb, currentColor 18%, transparent));
}

.pz-card--elevated {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06);
}

.pz-card--flush {
	border-radius: 0;
}

/* Ocupa el 100% del alto de la columna (opt-in). Solo estira si la fila tiene
   las columnas en modo "estirar" (align-items:stretch), que da altura al .pz-col
   contenedor. */
.pz-card--full {
	height: 100%;
}

.pz-card__img-wrap {
	flex-shrink: 0;
	overflow: hidden;
}

/* Tarjeta entera clicable (link_mode 'card'): «stretched link». El ::after del
   enlace (.pz-card__stretch: el botón o el título) cubre toda la tarjeta, así
   que se pulsa en cualquier punto y el foco de teclado es un único enlace. El
   fondo cambia en hover (--pz-card-hover-bg; por defecto un tinte del 5 % del
   color del texto sobre el fondo, sirve sobre cualquier fondo). Los enlaces
   propios del texto quedan por encima. */
.pz-card--linked {
	position: relative;
	transition: background-color 0.15s ease;
}
.pz-card--linked:hover {
	background: var(--pz-card-hover-bg, color-mix(in srgb, currentColor 5%, var(--pz-card-bg, transparent)));
}
.pz-card__stretch::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}
/* Enlace vacío (sin botón ni título): se superpone directamente. */
.pz-card__stretch:empty {
	position: absolute;
	inset: 0;
}
.pz-card--linked .pz-card__title .pz-card__stretch {
	color: inherit;
	text-decoration: none;
}
.pz-card--linked .pz-card__text a {
	position: relative;
	z-index: 2;
}
.pz-card__stretch:focus-visible {
	outline: none;
}
.pz-card__stretch:focus-visible::after {
	outline: 2px solid currentColor;
	outline-offset: -2px;
	border-radius: var(--pz-card-radius, var(--pz-border-radius, 6px));
}
@media (prefers-reduced-motion: reduce) {
	.pz-card--linked {
		transition: none;
	}
}

/* Por defecto la imagen se ajusta al ancho conservando su proporción y se ve
   completa (height:auto). El recorte uniforme es opt-in con la clase --cover
   (estilo img_fit): encuadra a una proporción fija (token --pz-card-img-ratio,
   3:2 por defecto; la tarjeta puede fijar la suya con aspect-ratio inline). El
   alto sale del ancho, así que al cambiar el ancho de la imagen o de la columna
   se escala entera en vez de recortarse por los lados. */
.pz-card__img {
	display: block;
	width: 100%;
	height: auto;
}

.pz-card__img--cover {
	aspect-ratio: var(--pz-card-img-ratio, 1.5);
	object-fit: cover;
}

.pz-card__body {
	padding: var(--pz-card-body-padding, 1.25rem);
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--pz-card-body-gap, 0.75rem);
}

.pz-card__title {
	margin: 0;
	font-family: var(--pz-font-heading, inherit);
	font-size: var(--pz-card-title-size, var(--pz-h4, 1.25rem));
	font-weight: var(--pz-heading-weight, 700);
	line-height: var(--pz-heading-lh, 1.2);
	color: var(--pz-card-title-color, inherit);
}

/* Espacio entre la imagen y el primer contenido del cuerpo (título o, si no
   hay título, el texto): solo cuando hay imagen encima. Override por instancia
   (title_gap → --pz-card-title-mt) → token global (--pz-card-title-gap) →
   20px por defecto. */
.pz-card__img-wrap + .pz-card__body > :first-child {
	margin-top: var(--pz-card-title-mt, var(--pz-card-title-gap, 20px));
}

.pz-card__text {
	color: var(--pz-card-text-color, inherit);
	font-size: var(--pz-card-text-size, var(--pz-text-size, 1rem));
	line-height: var(--pz-text-lh, 1.6);
	flex: 1;
}

.pz-card__text > *:first-child {
	margin-top: 0;
}

.pz-card__text > *:last-child {
	margin-bottom: 0;
}

.pz-card__footer {
	padding: 0 var(--pz-card-body-padding, 1.25rem) var(--pz-card-body-padding, 1.25rem);
	margin-top: var(--pz-card-footer-mt, 0.5rem);
	text-align: var(--pz-card-btn-align, left);
}

/* Icono de cabecera (media 'icon'): va dentro del contenido, encima del título,
   y sigue la alineación del texto de la tarjeta. El icono en sí es .pz-icon
   (mismos estilos y tokens --pz-icon-* que el componente icon). */
.pz-card__icon {
	line-height: 0;
}

/* Enlace de texto (button_style 'link'): sin caja, color de enlace del sitio y
   flecha que se desplaza al pasar el ratón. Subrayado en hover/focus para
   reforzar que es un enlace además del color (WCAG 1.4.1). */
.pz-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	color: var(--pz-color-accent, currentColor);
	font-weight: 600;
	font-size: var(--pz-card-text-size, var(--pz-text-size, 1rem));
	text-decoration: none;
	text-underline-offset: 0.2em;
}
.pz-card__link:hover,
.pz-card__link:focus-visible {
	text-decoration: underline;
}
.pz-card__link-arrow {
	transition: transform 0.15s ease;
}
.pz-card__link:hover .pz-card__link-arrow,
.pz-card__link:focus-visible .pz-card__link-arrow {
	transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
	.pz-card__link-arrow {
		transition: none;
	}
}

/* ============================================================
   Pages Grid (componente pages-grid: páginas por etiqueta)
   Las cards reutilizan .pz-card (variantes y tokens --pz-card-*);
   aquí solo vive el grid responsive, los enlaces y la paginación.
   Columnas por breakpoint via CSS vars emitidas por el render
   (--pz-pages-grid-cols / -t / -m), breakpoints del sistema
   (1024px tablet / 768px móvil).
   ============================================================ */
/* El grid es un <ul role="list"> (lista semántica). El selector de hijo directo
   sube la especificidad para que el reset de lista gane a cualquier regla de
   contenido del tema (p. ej. `.entry-content ul`). */
.pz-pages-grid > .pz-pages-grid__grid {
	display: grid;
	grid-template-columns: repeat(var(--pz-pages-grid-cols, 3), minmax(0, 1fr));
	gap: var(--pz-pages-grid-gap, 1.5rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Celda <li>: contenedor del grid. La tarjeta se estira a la altura de la fila
   para que todas las tarjetas queden iguales (como antes de la lista). */
.pz-pages-grid__cell {
	display: flex;
}

.pz-pages-grid__cell > .pz-pages-grid__item {
	flex: 1;
}

/* Borde y sombra de las tarjetas del grid, configurables por instancia via
   CSS vars emitidas en el wrapper (claves card_* del modal). Sin configurar:
   sin borde y sin sombra. El color de sombra se re-scopea aquí para no
   colisionar con el shadow_color del contenedor (mismo elemento wrapper). */
.pz-pages-grid__item {
	--pz-shadow-color: var(--pz-pgc-shadow-color, #000);
	border: var(--pz-pgc-border-width, 0) var(--pz-pgc-border-style, solid) var(--pz-pgc-border-color, color-mix(in srgb, currentColor 18%, transparent));
	box-shadow: var(--pz-pgc-shadow, none);
}

/* El enlace de imagen no debe aportar subrayado ni altura fantasma. */
.pz-pages-grid__img-link {
	display: block;
	text-decoration: none;
}

.pz-pages-grid__title-link {
	color: inherit;
	text-decoration: none;
}

.pz-pages-grid__title-link:hover,
.pz-pages-grid__title-link:focus-visible {
	text-decoration: underline;
}

.pz-pages-grid__empty {
	margin: 0;
	opacity: 0.75;
}

.pz-pages-grid__pagination {
	margin-top: var(--pz-pages-grid-gap, 1.5rem);
}

.pz-pages-grid__pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pz-pages-grid__page-link {
	display: inline-block;
	min-width: 2.25rem;
	padding: 0.35rem 0.6rem;
	text-align: center;
	text-decoration: none;
	color: inherit;
	border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
	border-radius: var(--pz-border-radius, 6px);
	line-height: 1.4;
}

.pz-pages-grid__page-link:hover {
	border-color: currentColor;
}

.pz-pages-grid__page-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.pz-pages-grid__page-link.is-current {
	background: var(--pz-color-primary, currentColor);
	border-color: var(--pz-color-primary, currentColor);
	color: var(--pz-color-bg, #ffffff);
}

/* Misma especificidad que la regla base (.pz-pages-grid > …): si no, el número
   de columnas de escritorio ganaría a los breakpoints. */
@media (max-width: 1024px) {
	.pz-pages-grid > .pz-pages-grid__grid {
		grid-template-columns: repeat(var(--pz-pages-grid-cols-t, 2), minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.pz-pages-grid > .pz-pages-grid__grid {
		grid-template-columns: repeat(var(--pz-pages-grid-cols-m, 1), minmax(0, 1fr));
	}
}

.pz-icon-wrap {
	display: flex;
	justify-content: flex-start;
}

.pz-icon {
	width: var(--pz-icon-size, 32px);
	height: var(--pz-icon-size, 32px);
	color: var(--pz-icon-color, var(--pz-color-primary, currentColor));
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.pz-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ── Carrusel ──────────────────────────────────────────────────────────────── */

/* La clase pz-col--carousel la añade el renderer PHP cuando la columna
   contiene un carrusel. Evita el estiramiento flex que dejaría espacio en
   blanco debajo del carrusel (cuya altura es fija por token o por instancia). */
.pz-col--carousel {
	align-self: flex-start;
}

.pz-carousel {
	position: relative;
	width: 100%;
	max-width: 100%;
	user-select: none;
}

/* El track contiene las imágenes; overflow:hidden aquí recorta las imágenes sin
   afectar a los dots ni a los controles, que son hijos del carousel externo. */
.pz-carousel__track {
	position: relative;
	height: var(--pz-carousel-height, 400px);
	overflow: hidden;
	border-radius: var(--pz-carousel-radius, var(--pz-border-radius, 0));
}

.pz-carousel__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.5s ease;
	pointer-events: none;
	z-index: 0;
}

.pz-carousel__slide.is-active {
	opacity: 1;
	pointer-events: auto;
	z-index: 1;
}

.pz-carousel__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Capa de overlay (opcional) — se sitúa entre la imagen y el caption. */
.pz-carousel__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Caption (título + texto sobre la imagen). */
.pz-carousel__caption {
	position: absolute;
	left: 0;
	right: 0;
	padding: 1.25rem 4.5rem;
	background: var(--pz-carousel-caption-bg, transparent);
	color: var(--pz-carousel-caption-color, #fff);
	z-index: 1;
}

.pz-carousel__caption--bottom {
	bottom: 0;
	padding-bottom: 3rem;
}

.pz-carousel__caption--top {
	top: 0;
}

.pz-carousel__caption--center {
	top: 50%;
	transform: translateY(-50%);
}

.pz-carousel__title {
	margin: 0 0 0.25rem;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	color: inherit;
}

.pz-carousel__text {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.5;
	color: inherit;
}

/* Controles prev / next. */
.pz-carousel__ctrl {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	background: rgba(0, 0, 0, 0.35);
	border: none;
	border-radius: 50%;
	color: var(--pz-carousel-ctrl-color, #fff);
	cursor: pointer;
	transition: background-color 0.15s ease;
	z-index: 2;
}

.pz-carousel__ctrl:hover {
	background: rgba(0, 0, 0, 0.6);
}

.pz-carousel__prev { left: 12px; }
.pz-carousel__next { right: 12px; }

/* Indicadores (dots). */
.pz-carousel__indicators {
	position: absolute;
	bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 6px;
	z-index: 2;
}

.pz-carousel__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	background: rgba(255, 255, 255, 0.5);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.pz-carousel__dot.is-active {
	background: var(--pz-carousel-ctrl-color, #fff);
	transform: scale(1.25);
}

/* Botón Pausa / Reproducción del autoplay (esquina inferior izquierda).
   a11y.js alterna la clase .is-paused en el carrusel para cambiar el icono. */
.pz-carousel__playpause {
	top: auto;
	bottom: 12px;
	left: 12px;
	transform: none;
	width: 32px;
	height: 32px;
}
.pz-carousel__icon-play { display: none; }
.pz-carousel.is-paused .pz-carousel__icon-pause { display: none; }
.pz-carousel.is-paused .pz-carousel__icon-play { display: block; }

/* Foco visible de los controles interactivos del carrusel (WCAG 2.4.7). Los
   dots ahora son tabulables; necesitan un anillo claramente visible sobre la
   imagen. Coherente con el --focus-ring del tema cuando exista. */
.pz-carousel__ctrl:focus-visible,
.pz-carousel__dot:focus-visible {
	outline: var(--focus-ring-width, 2px) solid #fff;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.55);
}

@media (max-width: 768px) {
	.pz-carousel__track {
		height: var(--pz-carousel-height-mobile, 220px);
	}

	.pz-carousel__caption {
		padding: 0.75rem 3rem;
	}

	.pz-carousel__caption--bottom {
		padding-bottom: 2rem;
	}

	.pz-carousel__ctrl {
		width: 30px;
		height: 30px;
	}

	.pz-carousel__ctrl svg {
		width: 16px;
		height: 16px;
	}

	.pz-carousel__prev { left: 8px; }
	.pz-carousel__next { right: 8px; }

	.pz-carousel__dot {
		width: 6px;
		height: 6px;
	}

	.pz-carousel__indicators {
		bottom: 0.6rem;
		gap: 5px;
	}
}

/* ── Responsive mobile (≤768px) ────────────────────────────────────────────── */
@media (max-width: 768px) {

	/* Accordion: reduce padding para pantallas estrechas. */
	.pz-accordion__summary {
		padding: 0.7rem 0.85rem;
	}

	.pz-accordion__content {
		padding: 0.75rem 0.85rem;
	}

	/* Carousel: caption con fuentes más pequeñas. */
	.pz-carousel__title {
		font-size: 1rem;
	}

	.pz-carousel__text {
		font-size: 0.85rem;
	}
}

.pz-icon .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.pz-icon--style-circle,
.pz-icon--style-rounded,
.pz-icon--style-square {
	width: var(--pz-icon-box-size, 56px);
	height: var(--pz-icon-box-size, 56px);
	background: var(--pz-icon-bg, rgba(0, 0, 0, 0.06));
}

.pz-icon--style-circle {
	border-radius: 9999px;
}

/* Radio proporcional a la caja (25 % del lado; 56px → 14px, como antes). */
.pz-icon--style-rounded {
	border-radius: calc(var(--pz-icon-box-size, 56px) * 0.25);
}

.pz-icon--style-square {
	border-radius: 0;
}

.pz-icon--style-circle svg,
.pz-icon--style-rounded svg,
.pz-icon--style-square svg {
	width: var(--pz-icon-size, 32px);
	height: var(--pz-icon-size, 32px);
}

/* ── Logo carousel (fila de logos con scroll infinito) ──────────────────────── */

@keyframes pz-logo-ticker {
	to { transform: translateX( -50% ); }
}

.pz-logo-carousel {
	position: relative;
	overflow: hidden; /* capa extra de seguridad para SSR sin JS */
}

/* Viewport: recorta el track que sobresale. */
.pz-logo-carousel__viewport {
	overflow: hidden;
	width: 100%;
}

/* Track: contiene [lista original + lista duplicada].
   width: max-content hace que el track sea tan ancho como su contenido.
   La animación desplaza exactamente el 50 % = ancho de una lista completa,
   creando el bucle sin salto visible. */
.pz-logo-carousel__track {
	display: flex;
	width: max-content;
	animation: pz-logo-ticker var(--_lc-speed, var(--pz-logo-carousel-speed, 20s)) linear infinite;
}

/* Listas: layout horizontal con gap configurable. */
.pz-logo-carousel__list {
	display: flex;
	align-items: center;
	gap: var(--_lc-gap, var(--pz-logo-carousel-gap, 48px));
	list-style: none;
	margin: 0;
	padding: 0 calc( var(--_lc-gap, var(--pz-logo-carousel-gap, 48px)) / 2 );
}

.pz-logo-carousel__item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.pz-logo-carousel__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	border-radius: var(--pz-border-radius, 4px);
	transition: opacity 0.2s ease;
}

.pz-logo-carousel__link:hover,
.pz-logo-carousel__link:focus-visible {
	opacity: 0.75;
}

/* Focus ring accesible sobre el enlace (no sobre la imagen). */
.pz-logo-carousel__link:focus-visible {
	outline: var(--focus-ring-width, 2px) solid var(--pz-color-accent, currentColor);
	outline-offset: 3px;
}

.pz-logo-carousel__img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Pausar con JS class (gestionado por a11y.js). */
.pz-logo-carousel.is-paused .pz-logo-carousel__track {
	animation-play-state: paused;
}

/* Pausar al hacer hover si el data-attr está activo. */
.pz-logo-carousel[data-pause-hover="1"]:hover .pz-logo-carousel__track,
.pz-logo-carousel[data-pause-hover="1"]:focus-within .pz-logo-carousel__track {
	animation-play-state: paused;
}

/* Botón de pausa (WCAG 2.2.2): visualmente oculto hasta recibir foco.
   a11y.js gestiona el estado aria-pressed y la etiqueta. */
.pz-lc-pause {
	position: absolute;
	left: -9999px;
	top: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
}

.pz-lc-pause:focus-visible {
	position: static;
	left: auto;
	top: auto;
	width: auto;
	height: auto;
	overflow: visible;
	white-space: normal;
	padding: 4px 12px;
	margin-bottom: 8px;
	border: 2px solid var(--pz-color-accent, currentColor);
	border-radius: var(--pz-border-radius, 4px);
	background: var(--pz-color-bg, #fff);
	color: var(--pz-color-text, #1a1a1a);
	cursor: pointer;
	font-weight: 600;
}

/* Movimiento reducido: convierte el ticker en una rejilla estática.
   El duplicado y el botón de pausa desaparecen por no ser necesarios. */
@media (prefers-reduced-motion: reduce) {
	.pz-logo-carousel__track {
		animation: none;
		flex-wrap: wrap;
		width: 100%;
		justify-content: center;
	}

	.pz-logo-carousel__list[aria-hidden="true"] {
		display: none;
	}

	.pz-lc-pause {
		display: none;
	}
}

/* ── Logos (grid estático, sin animación) ────────────────────────────────────── */

.pz-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--_logos-gap, var(--pz-logos-gap, 32px));
	list-style: none;
	margin: 0;
	padding: 0;
}

.pz-logos__item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.pz-logos__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	border-radius: var(--pz-border-radius, 4px);
}

.pz-logos__link:focus-visible {
	outline: var(--focus-ring-width, 2px) solid var(--pz-color-accent, currentColor);
	outline-offset: 3px;
}

.pz-logos__img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Escala de grises con color al hover/focus (opcional, por instancia). */
.pz-logos--grayscale .pz-logos__img {
	filter: grayscale(1);
	opacity: 0.6;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.pz-logos--grayscale .pz-logos__item:hover .pz-logos__img,
.pz-logos--grayscale .pz-logos__link:focus-visible .pz-logos__img {
	filter: none;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.pz-logos--grayscale .pz-logos__img {
		transition: none;
	}
}

/* ============================================================
   Selector de navegación (componente nav-selector)
   Desplegable tipo "select" que replica la apariencia de los
   submenús del menú principal: los tokens propios
   (--pz-nav-selector-*) caen por defecto a los del desplegable
   de cabecera (--tema-header-dd-*), así un cambio de marca en
   Tokens globales → Cabecera repinta también este componente.
   Sin JS el botón queda oculto (atributo hidden del render) y
   se ve la lista de enlaces; a11y.js añade .is-enhanced.
   ============================================================ */
/* align-items explícito: en columna, el `stretch` por defecto de flex estiraría
   el selector a todo el ancho e ignoraría su ancho mínimo. */
.pz-nav-selector {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pz-nav-selector-gap, 0.5rem);
}

/* Etiqueta a la izquierda: fila con el texto y el selector en línea. */
.pz-nav-selector--label-left {
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
}

/* Alineación del bloque dentro de su columna. */
.pz-nav-selector--align-center { align-items: center; }
.pz-nav-selector--align-right  { align-items: flex-end; }
.pz-nav-selector--label-left.pz-nav-selector--align-center { justify-content: center; align-items: center; }
.pz-nav-selector--label-left.pz-nav-selector--align-right  { justify-content: flex-end; align-items: center; }

.pz-nav-selector__label {
	color: var(--pz-nav-selector-label-color, inherit);
	font-size: var(--pz-nav-selector-label-size, var(--pz-text-size, 1rem));
	font-weight: 600;
	line-height: var(--pz-text-lh, 1.6);
}

/* Etiqueta oculta visualmente pero disponible para lectores de pantalla. */
.pz-nav-selector--label-hidden .pz-nav-selector__label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.pz-nav-selector__wrap {
	position: relative;
	min-width: var(--pz-nav-selector-min-width, 220px);
}

.pz-nav-selector--full,
.pz-nav-selector--full .pz-nav-selector__wrap {
	width: 100%;
}

/* Botón cerrado: aspecto de campo select. */
.pz-nav-selector__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	padding: var(--pz-nav-selector-toggle-py, 0.55rem) var(--pz-nav-selector-toggle-px, 1rem);
	background-color: var(--pz-nav-selector-toggle-bg, var(--tema-header-dd-bg, transparent));
	color: var(--pz-nav-selector-toggle-color, var(--tema-header-dd-text, inherit));
	border: var(--pz-nav-selector-toggle-border-width, 1px) solid
		var(--pz-nav-selector-toggle-border-color, color-mix(in srgb, currentColor 25%, transparent));
	border-radius: var(--pz-nav-selector-toggle-radius, var(--pz-border-radius, 6px));
	font: inherit;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
}

/* El `hidden` del render (mejora progresiva) tiene que ganar al display:flex
   de arriba: `[hidden]{display:none}` del navegador pierde por especificidad
   frente a una clase. */
.pz-nav-selector__toggle[hidden],
.pz-nav-selector__list[hidden] {
	display: none;
}

.pz-nav-selector__toggle:focus-visible {
	outline: var(--focus-ring-width, 2px) solid var(--pz-color-accent, currentColor);
	outline-offset: 2px;
}

.pz-nav-selector__value {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pz-nav-selector__caret {
	flex-shrink: 0;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid currentColor;
	transition: transform 0.2s ease;
}

.pz-nav-selector.is-open .pz-nav-selector__caret {
	transform: rotate(180deg);
}

/* Lista de opciones. Sin JS es una lista estática de enlaces; con JS pasa a
   panel flotante (mismo inset que .sub-menu del tema: el resalte redondeado de
   cada enlace no debe tocar los bordes del panel). */
.pz-nav-selector__list {
	list-style: none;
	margin: 0;
	padding: 0.4rem;
}

.pz-nav-selector__link {
	display: block;
	padding: 0.5rem 0.75rem;
	color: var(--pz-nav-selector-panel-color, var(--tema-header-dd-text, inherit));
	text-decoration: none;
	border-radius: var(--tema-menu-item-radius, 6px);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.pz-nav-selector__link:hover,
.pz-nav-selector__link:focus-visible {
	background-color: var(--pz-nav-selector-panel-hover-bg, var(--tema-header-dd-hover-bg, color-mix(in srgb, currentColor 8%, transparent)));
	color: var(--pz-nav-selector-panel-color, var(--tema-header-dd-text, inherit));
}

.pz-nav-selector__item.is-current > .pz-nav-selector__link {
	font-weight: 600;
}

/* Con JS: el panel flota bajo el botón, como un desplegable del menú. */
.pz-nav-selector.is-enhanced .pz-nav-selector__list {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 50;
	min-width: 100%;
	background-color: var(--pz-nav-selector-panel-bg, var(--tema-header-dd-bg, var(--pz-color-bg, #fff)));
	border-radius: var(--pz-nav-selector-panel-radius, var(--tema-header-dd-radius, 8px));
	box-shadow: var(--pz-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12));
}

/* Mientras hay un panel abierto, su fila pinta por encima del resto del layout.
   Es imprescindible: .pz-row crea un contexto de apilamiento (position:relative
   + z-index:1), así que el z-index del panel NO puede escapar de su fila y la
   fila siguiente —mismo z-index, posterior en el DOM— se pintaría encima; el
   texto de abajo se veía mezclado con las opciones. El !important es necesario
   porque el z_index por instancia de la fila sale como estilo inline y ganaría
   a cualquier selector de la hoja (mismo criterio que .pz-has-hover en el
   botón). La clase la pone y la quita a11y.js, y solo mientras está abierto.
   Cubre también filas anidadas: se marca toda la cadena de .pz-row ancestros. */
.pz-row.pz-has-open-panel {
	z-index: 60 !important;
}

@media (prefers-reduced-motion: reduce) {
	.pz-nav-selector__caret,
	.pz-nav-selector__link {
		transition: none;
	}
}

/* ---- Embeds de CTA de HubSpot (componente HTML) ------------------------
   El embed estático "simple placeholder" de HubSpot trae en el <div> wrapper un
   `height:32px` de marcador de posición (style="...width:650px;height:32px"). Su
   <img> interna está a height:100%, así que ocupa el 100% de esos 32px y queda
   aplastada. En producción, el script de HubSpot hidrata el CTA y elimina ese
   `height` del wrapper, con lo que la imagen recupera su tamaño natural; pero si
   ese script no se ejecuta (p. ej. en un subdominio de desarrollo no conectado en
   HubSpot) el marcador de 32px permanece y la imagen se ve deformada.

   Se neutraliza aquí la altura fija del wrapper y se deja la imagen a tamaño
   natural (ancho del contenedor, alto automático), que es justo el resultado al
   que llega HubSpot tras hidratar. Acotado a los CTA de HubSpot dentro del
   componente HTML del maquetador; no afecta a ninguna otra imagen. */
.pz-raw-html .hs-cta-embed.hs-cta-simple-placeholder {
	height: auto !important;
}
.pz-raw-html .hs-cta-embed.hs-cta-simple-placeholder img {
	height: auto !important;
	width: 100% !important;
	object-fit: fill;
}