/*
Theme Name: Garantiza
Description: Tema a medida para la landing informativa de Garantiza. Tema clásico, sin page builder ni framework CSS. Los tokens y el marcado replican la maqueta aprobada por el equipo de diseño.
Author: Julio
Version: 0.8.0
Requires at least: 6.5
Requires PHP: 8.3
License: GNU General Public License v2 or later
Text Domain: garantiza
*/

/* =======================================================================
   NOTA DE EQUIVALENCIA CON LA MAQUETA
   La maqueta declara sus tokens como --wp--preset--* pensando en un block
   theme. Este es un tema clásico, así que los mismos valores viven como
   --gz-* y las clases van prefijadas con gz- para no chocar con las de
   los plugins (Fluent Forms, WP Mail SMTP). Los valores, medidas y
   comportamiento son idénticos a la maqueta.
   ==================================================================== */

/* =======================================================================
   1. TOKENS
   ==================================================================== */

:root {
	/* Color de marca */
	--gz-primary:       #0571BD; /* Garantiza — azul de marca */
	--gz-primary-light: #4FAAE8;
	--gz-primary-dark:  #073A5E;
	--gz-primary-deep:  #051F33;
	--gz-accent:        #F8A41A; /* Garantiza — naranja de marca */
	--gz-accent-deep:   #E9591F;

	/* Superficies */
	--gz-tint:    #ECF3FF;
	--gz-surface: #F6F8FB;
	--gz-base:    #FFFFFF;

	/* Texto y líneas */
	--gz-ink:      #122436;
	--gz-ink-soft: #56697B;
	--gz-line:     #DCE6F0;

	/* Tipografía */
	--gz-font-body:    "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
	--gz-font-display: "Barlow Condensed", "Barlow", system-ui, sans-serif;

	--gz-fs-small: 0.9375rem;
	--gz-fs-base:  1.0625rem;
	--gz-fs-large: 1.375rem;
	--gz-fs-h2:    clamp(1.9rem, 1.5rem + 1.6vw, 2.75rem);
	--gz-fs-h1:    clamp(2.5rem, 1.9rem + 3vw, 4.25rem);

	/* Layout */
	--gz-content: 1180px;
	--gz-wide:    1400px;

	/* Espaciado */
	--gz-sp-xs: 0.5rem;
	--gz-sp-sm: 1rem;
	--gz-sp-md: 1.75rem;
	--gz-sp-lg: 3rem;
	--gz-sp-xl: 5.5rem;

	/* Radios y sombra */
	--gz-radius-sm: 8px;
	--gz-radius-md: 14px;
	--gz-radius-lg: 26px;
	--gz-shadow-card: 0 1px 2px rgba(18, 36, 54, .04), 0 10px 26px -14px rgba(7, 58, 94, .28);
}

/* =======================================================================
   2. RESET + BASE
   ==================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

body {
	margin: 0;
	font-family: var(--gz-font-body);
	font-size: var(--gz-fs-base);
	color: var(--gz-ink);
	background: var(--gz-base);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* Pie siempre abajo: en páginas cortas (política de privacidad, 404)
   el main crece y empuja el footer al borde inferior del viewport. */
body {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}
body > main { flex: 1 0 auto; }
body > .gz-footer { flex-shrink: 0; }

/* Las anclas no quedan tapadas por la cabecera fija. */
:target, [id] { scroll-margin-top: 88px; }

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
	font-family: var(--gz-font-display);
	font-weight: 700;
	line-height: 1.05;
	margin: 0 0 .5em;
	letter-spacing: .005em;
}

p { margin: 0 0 1em; color: var(--gz-ink-soft); }
button { font-family: inherit; cursor: pointer; }

/* Accesibilidad */
.gz-sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.gz-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--gz-primary-dark); color: #fff;
	padding: var(--gz-sp-sm) var(--gz-sp-md);
}
.gz-skip-link:focus { left: 0; }

:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--gz-accent);
	outline-offset: 2px;
}

/* =======================================================================
   3. LAYOUT
   ==================================================================== */

.gz-wrap {
	max-width: var(--gz-content);
	margin-inline: auto;
	padding-inline: var(--gz-sp-md);
}
.gz-wrap--wide { max-width: var(--gz-wide); }

.gz-section { padding-block: var(--gz-sp-xl); }

@media (max-width: 782px) {
	.gz-section { padding-block: var(--gz-sp-lg); }
}

/* Kicker: bloque de color detrás del título, tomado del brand book. */
.gz-kicker {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-family: var(--gz-font-display);
	font-weight: 700;
	font-size: .95rem;
	color: var(--gz-primary);
	margin-bottom: var(--gz-sp-sm);
}
.gz-kicker::before {
	content: "";
	width: 22px; height: 10px;
	background: var(--gz-accent);
	border-radius: 3px;
	flex-shrink: 0;
}

.gz-section-head { max-width: 640px; margin-bottom: var(--gz-sp-lg); }
.gz-section-head h2 { font-size: var(--gz-fs-h2); color: var(--gz-primary-dark); }
.gz-section-head p { font-size: var(--gz-fs-large); color: var(--gz-ink-soft); margin-bottom: 0; }
.gz-section-head p strong { color: var(--gz-primary); }

/* Botones */
.gz-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	font-family: var(--gz-font-display);
	font-weight: 700; font-size: 1.05rem;
	padding: .9rem 1.7rem;
	border-radius: var(--gz-radius-sm);
	border: 2px solid transparent;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.gz-btn:active { transform: translateY(1px); }
.gz-btn svg { width: 16px; height: 16px; }

.gz-btn--primary { background: var(--gz-accent); color: var(--gz-primary-deep); }
.gz-btn--primary:hover { background: #FFB840; box-shadow: 0 10px 22px -8px rgba(248, 164, 26, .55); }

.gz-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .4); color: #fff; }
.gz-btn--ghost:hover { border-color: #fff; }

.gz-btn--outline { background: transparent; border-color: var(--gz-primary); color: var(--gz-primary); }
.gz-btn--outline:hover { background: var(--gz-tint); }

/* Logotipo oficial (SVG) */
.gz-logo { display: inline-flex; align-items: center; text-decoration: none; line-height: 0; flex-shrink: 0; }
.gz-logo img,
.gz-logo__img { display: block; height: 40px; width: auto; max-width: 100%; }
.gz-footer .gz-logo img { height: 44px; }
@media (max-width: 600px) {
	.gz-logo img, .gz-logo__img { height: 32px; }
}

/* =======================================================================
   4. CABECERA
   ==================================================================== */

.gz-header {
	position: sticky; top: 0; z-index: 60;
	background: rgba(255, 255, 255, .92);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.gz-header.is-scrolled {
	border-color: var(--gz-line);
	box-shadow: 0 6px 20px -16px rgba(7, 58, 94, .4);
}

/* La barra de administración no debe tapar la cabecera fija. */
.admin-bar .gz-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .gz-header { top: 46px; } }

.gz-header__inner {
	display: flex; align-items: center; justify-content: space-between;
	padding-block: .9rem;
}

.gz-nav ul {
	display: flex; gap: 2.1rem; align-items: center;
	margin: 0; padding: 0; list-style: none;
}
.gz-nav a {
	font-weight: 600; font-size: .98rem; text-decoration: none;
	color: var(--gz-ink);
	position: relative; padding-block: .3rem;
}
.gz-nav a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
	background: var(--gz-accent);
	transform: scaleX(0); transform-origin: left;
	transition: transform .2s ease;
}
.gz-nav a:hover::after,
.gz-nav .current-menu-item > a::after { transform: scaleX(1); }

.gz-header__actions { display: flex; align-items: center; gap: 1.1rem; }

.gz-nav-toggle { display: none; background: none; border: 0; padding: .4rem; }
.gz-nav-toggle span {
	display: block; width: 24px; height: 2px;
	background: var(--gz-primary-dark);
	margin: 5px 0; border-radius: 2px;
}

@media (max-width: 900px) {
	/* El panel cuelga de la cabecera (position: sticky ya es su bloque
	   contenedor), así que arranca siempre justo debajo del borde
	   inferior, mida lo que mida la cabecera. Antes se usaba un
	   inset fijo de 64 px que no coincidía con la altura real y dejaba
	   los enlaces fuera del panel blanco (QA BUG-007). */
	.gz-nav {
		position: absolute; top: 100%; left: 0; right: 0;
		background: #fff;
		border-bottom: 1px solid var(--gz-line);
		box-shadow: 0 18px 30px -24px rgba(7, 58, 94, .5);
		padding: var(--gz-sp-md);
		/* La altura la marca el contenido; si no cabe, el panel hace
		   scroll en lugar de desbordar sobre el hero. */
		max-height: 70vh;
		max-height: 70dvh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transform: translateY(-8px); opacity: 0; pointer-events: none;
		transition: opacity .2s ease, transform .2s ease;
	}
	.gz-nav.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
	.gz-nav ul {
		flex-direction: column; align-items: stretch;
		gap: 0;
	}
	.gz-nav li + li { border-top: 1px solid var(--gz-line); }
	/* Área táctil completa: el enlace ocupa toda la fila del panel. */
	.gz-nav a { display: block; font-size: 1.15rem; padding-block: .95rem; }
	.gz-nav a::after { display: none; }
	.gz-header__actions .gz-btn--outline { display: none; }
	.gz-nav-toggle { display: block; }

	/* Cabecera opaca y sin desenfoque en móvil.
	   backdrop-filter sobre un elemento sticky obliga al navegador a
	   promover la cabecera a su propia capa de composición, y en pantallas
	   pequeñas eso hace que quede desalineada o con el contenido anterior
	   durante el desplazamiento. Sin desenfoque no hay capa que actualizar
	   y la cabecera se mantiene pegada arriba. */
	.gz-header {
		background: #fff;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/* =======================================================================
   5. HERO
   ==================================================================== */

.gz-hero {
	position: relative;
	isolation: isolate;
	color: #fff;
	overflow: hidden;
	padding-block: calc(var(--gz-sp-xl) * 1.15) calc(var(--gz-sp-xl) * 1.6);
}

.gz-hero__bg { position: absolute; inset: 0; z-index: 0; }
.gz-hero__bg img {
	width: 100%; height: 100%; object-fit: cover; object-position: 70% 32%;
	display: block;
	filter: saturate(.9) contrast(1.02);
}

/* Degradé azul de marca: opaco a la izquierda para sostener la lectura
   del texto, se abre a la derecha para dejar ver la fotografía. */
.gz-hero__bg::after {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(100deg, rgba(3, 20, 33, .97) 0%, rgba(4, 27, 45, .95) 24%, rgba(5, 36, 59, .86) 42%, rgba(6, 45, 73, .7) 60%, rgba(6, 45, 73, .52) 78%, rgba(6, 45, 73, .4) 100%),
		linear-gradient(0deg, var(--gz-primary-deep), var(--gz-primary-deep));
	background-blend-mode: normal, color;
	mix-blend-mode: multiply;
}
.gz-hero__bg::before {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(3, 20, 33, .65) 0%, rgba(3, 20, 33, 0) 24%, rgba(3, 20, 33, 0) 66%, rgba(3, 20, 33, .45) 100%);
}

.gz-hero__content { position: relative; z-index: 2; max-width: 660px; margin: 0; }

.gz-hero__eyebrow {
	display: inline-flex; align-items: center; gap: .6rem;
	background: rgba(255, 255, 255, .09);
	border: 1px solid rgba(255, 255, 255, .18);
	padding: .4rem .9rem; border-radius: 99px;
	font-size: .85rem; font-weight: 600; letter-spacing: .02em;
	margin-bottom: 1.4rem;
}
.gz-hero__eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: var(--gz-accent); }

.gz-hero h1 { font-size: var(--gz-fs-h1); color: #fff; }
.gz-hero__title-line { display: block; }
.gz-hero__title-line.is-accent { color: var(--gz-accent); }

.gz-hero__lead {
	font-size: 1.2rem; color: rgba(255, 255, 255, .86);
	max-width: 44ch; margin-bottom: 2.1rem;
	text-shadow: 0 1px 12px rgba(3, 20, 33, .35);
}
.gz-hero__ctas { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Franja flotante con la cita de marca y los tres pilares. */
.gz-hero__floatbar { position: relative; z-index: 5; margin-top: clamp(1.6rem, 3vw, 2.4rem); }

.gz-hero-bar {
	background: var(--gz-base);
	border-radius: var(--gz-radius-lg);
	box-shadow: var(--gz-shadow-card);
	padding: 1.5rem clamp(1.3rem, 2.5vw, 2rem);
	display: flex; align-items: center; flex-wrap: wrap; gap: 1.4rem 1.8rem;
	transform: translateY(52%);
	max-width: 660px;
	margin-inline: 0;
}
.gz-hero-bar__quote {
	max-width: 230px; margin: 0;
	font-family: var(--gz-font-display);
	font-style: italic; font-weight: 600; font-size: .98rem; line-height: 1.3;
	color: var(--gz-primary-dark);
}
.gz-hero-bar__cols { display: flex; flex-wrap: wrap; gap: 0; }
.gz-hero-bar__col {
	display: flex; align-items: center; gap: .55rem;
	padding-inline: 1.1rem;
	border-left: 1px solid var(--gz-line);
}
.gz-hero-bar__col:first-child { border-left: 0; padding-left: 0; }
.gz-hero-bar__col .gz-icon-circle {
	width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
	background: var(--gz-tint);
	display: flex; align-items: center; justify-content: center;
}
.gz-hero-bar__col svg { width: 16px; height: 16px; color: var(--gz-primary); }
.gz-hero-bar__col span:not(.gz-icon-circle) {
	font-weight: 600; font-size: .85rem; color: var(--gz-ink);
	max-width: 10ch; line-height: 1.2;
}

@media (max-width: 700px) {
	.gz-hero__bg img { object-position: 70% 28%; }
	.gz-hero-bar { transform: none; flex-direction: column; align-items: flex-start; }
	.gz-hero-bar__cols { gap: 1.2rem 0; }
	.gz-hero-bar__col { border-left: 0; padding-left: 0; }
	.gz-hero__floatbar { margin-top: 1.6rem; }
}

/* =======================================================================
   6. NÚMEROS — motivo "flecha ascendente"
   ==================================================================== */

.gz-stats { background: var(--gz-base); }

.gz-stats__steps {
	display: grid; grid-template-columns: repeat(4, 1fr);
	align-items: end; gap: 1.1rem;
	position: relative;
	margin-bottom: var(--gz-sp-lg);
}

.gz-stat-step {
	position: relative;
	background: var(--gz-surface);
	border: 1px solid var(--gz-line);
	border-radius: var(--gz-radius-md) var(--gz-radius-md) 0 0;
	padding: 1.8rem 1.4rem 1.5rem;
	text-align: left;
}
.gz-stat-step:nth-child(1) { height: 190px; align-self: end; }
.gz-stat-step:nth-child(2) { height: 225px; align-self: end; }
.gz-stat-step:nth-child(3) { height: 260px; align-self: end; background: var(--gz-tint); }
.gz-stat-step:nth-child(4) {
	height: 300px; align-self: end;
	background: var(--gz-primary-dark);
	border-color: var(--gz-primary-dark);
}
.gz-stat-step:nth-child(4) .gz-stat-step__num { color: #fff; }
.gz-stat-step:nth-child(4) .gz-stat-step__label { color: rgba(255, 255, 255, .7); }

.gz-stat-step__num {
	display: block;
	font-family: var(--gz-font-display);
	font-weight: 700; font-size: clamp(2rem, 1.6rem + 1.6vw, 2.9rem);
	color: var(--gz-primary);
	font-variant-numeric: tabular-nums;
}
.gz-stat-step__label {
	display: block; font-size: .95rem;
	color: var(--gz-ink-soft); margin-top: .35rem; max-width: 16ch;
}

.gz-stats__trend {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	color: var(--gz-accent);
	pointer-events: none;
	z-index: 3;
	overflow: visible;
}
.gz-stats__trend-head {
	position: absolute;
	left: 88%; top: -4%;
	width: 22px; height: 22px;
	transform: translate(-50%, -92%);
	color: var(--gz-accent);
	pointer-events: none;
	z-index: 4;
}

.gz-stats__support {
	padding-top: var(--gz-sp-md);
	border-top: 1px solid var(--gz-line);
}

/* Capacidad mensual: barras horizontales animadas */
.gz-capacity h3 { font-size: 1.15rem; color: var(--gz-primary-dark); margin-bottom: 1.4rem; }
.gz-capacity__bars { display: flex; flex-direction: column; gap: 1rem; }

.gz-capacity-bar { display: flex; align-items: center; gap: 1.2rem; }
.gz-capacity-bar__label {
	width: 180px; flex-shrink: 0;
	font-weight: 600; font-size: .95rem; color: var(--gz-ink);
}
.gz-capacity-bar__track {
	flex: 1; height: 38px; border-radius: 999px;
	background: var(--gz-surface);
	border: 1px solid var(--gz-line);
	overflow: hidden; position: relative;
}
.gz-capacity-bar__fill {
	height: 100%; width: 0%; border-radius: 999px;
	display: flex; align-items: center; justify-content: flex-end;
	padding-inline: 1rem;
	color: #fff; font-family: var(--gz-font-display);
	font-weight: 700; font-size: .85rem; white-space: nowrap;
	transition: width 1.1s cubic-bezier(.22, .9, .26, 1);
}
.gz-capacity-bar:nth-child(1) .gz-capacity-bar__fill { background: linear-gradient(90deg, var(--gz-primary-dark), var(--gz-primary)); }
.gz-capacity-bar:nth-child(2) .gz-capacity-bar__fill { background: linear-gradient(90deg, var(--gz-primary), var(--gz-primary-light)); }
.gz-capacity-bar:nth-child(3) .gz-capacity-bar__fill { background: linear-gradient(90deg, var(--gz-primary-light), #8FCBF2); color: var(--gz-primary-deep); }
.gz-capacity-bar:nth-child(4) .gz-capacity-bar__fill { background: linear-gradient(90deg, var(--gz-accent-deep), var(--gz-accent)); }

@media (max-width: 900px) {
	.gz-stats__steps { grid-template-columns: repeat(2, 1fr); }
	.gz-stats__trend, .gz-stats__trend-head { display: none; }
	.gz-stat-step:nth-child(n) { height: auto !important; padding-block: 1.5rem; }
}
@media (max-width: 640px) {
	.gz-capacity-bar { flex-direction: column; align-items: flex-start; gap: .4rem; }
	.gz-capacity-bar__label { width: auto; }
	.gz-capacity-bar__track { width: 100%; }
	/* Con el prefijo "+" la cifra no cabe en las barras al 50 %: la barra
	   crece lo necesario para no recortar el texto. */
	.gz-capacity-bar__fill { min-width: max-content; }
}

/* =======================================================================
   7. SERVICIOS
   ==================================================================== */

.gz-services { background: var(--gz-surface); }

.gz-services__head { margin-bottom: var(--gz-sp-lg); }
.gz-services__head .gz-section-head { margin-bottom: 0; max-width: 640px; }
.gz-services__head .gz-services__link { margin-top: 1.1rem; }

.gz-services__link {
	display: inline-flex; align-items: center; gap: .4rem;
	font-family: var(--gz-font-display); font-weight: 700;
	color: var(--gz-primary); text-decoration: none; font-size: .98rem;
}
.gz-services__link svg { width: 16px; height: 16px; transition: transform .15s ease; }
.gz-services__link:hover svg { transform: translateX(3px); }

.gz-service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }

.gz-service-card {
	background: var(--gz-base);
	border: 1px solid var(--gz-line);
	border-radius: var(--gz-radius-md);
	padding: 1.8rem 1.6rem;
	box-shadow: var(--gz-shadow-card);
	display: flex; flex-direction: column;
}
.gz-service-card__num {
	width: 46px; height: 46px; border-radius: var(--gz-radius-sm);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--gz-font-display); font-weight: 700; font-size: 1.25rem;
	color: #fff; margin-bottom: 1.2rem;
}
.gz-service-card:nth-child(1) .gz-service-card__num { background: var(--gz-primary-dark); }
.gz-service-card:nth-child(2) .gz-service-card__num { background: var(--gz-primary); }
.gz-service-card:nth-child(3) .gz-service-card__num { background: var(--gz-primary-light); color: var(--gz-primary-deep); }
.gz-service-card:nth-child(4) .gz-service-card__num { background: var(--gz-accent); color: var(--gz-primary-deep); }

.gz-service-card h3 { font-size: 1.12rem; margin-bottom: .5rem; color: var(--gz-primary-dark); }
.gz-service-card p { font-size: .94rem; margin-bottom: 1.1rem; flex: 1; }

.gz-service-card__toggle {
	display: inline-flex; align-items: center; gap: .4rem;
	background: none; border: 0; padding: 0;
	font-family: var(--gz-font-display); font-weight: 700; font-size: .92rem;
	color: var(--gz-primary); align-self: flex-start;
}
.gz-service-card__toggle svg { width: 14px; height: 14px; transition: transform .2s ease; }
.gz-service-card.is-open .gz-service-card__toggle svg { transform: rotate(90deg); }

/* Acordeón sin altura fija: la fila del grid pasa de 0fr a 1fr y el
   panel toma la altura real de su lista, sin recortar ítems largos. */
.gz-service-card__panel {
	display: grid; grid-template-rows: 0fr;
	transition: grid-template-rows .3s ease;
}
.gz-service-card.is-open .gz-service-card__panel { grid-template-rows: 1fr; }
.gz-service-card__panel-inner { min-height: 0; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .gz-service-card__panel { transition: none; } }
.gz-service-card__panel ul {
	padding: 1rem 0 0; margin: .9rem 0 0;
	border-top: 1px solid var(--gz-line);
	list-style: none;
	display: flex; flex-direction: column; gap: .5rem;
}
.gz-service-card__panel li {
	font-size: .86rem; color: var(--gz-ink-soft);
	padding-left: 1rem; position: relative;
}
.gz-service-card__panel li::before {
	content: ""; position: absolute; left: 0; top: .5em;
	width: 5px; height: 5px; border-radius: 50%;
	background: var(--gz-primary);
}

@media (max-width: 1080px) { .gz-service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .gz-service-grid { grid-template-columns: 1fr; } }

.gz-services__strip {
	margin-top: var(--gz-sp-lg);
	margin-inline: auto;
	max-width: 920px;
	display: flex; flex-wrap: wrap; gap: 2.5rem;
	align-items: center; justify-content: space-between;
	background: var(--gz-primary-dark);
	color: #fff; border-radius: var(--gz-radius-lg);
	padding: 2rem clamp(1.5rem, 3vw, 2.6rem);
}
.gz-services__strip p { color: rgba(255, 255, 255, .85); margin: 0; max-width: 34ch; font-size: 1.05rem; }
.gz-services__strip ul { display: flex; gap: 2.2rem; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.gz-services__strip li {
	font-family: var(--gz-font-display); font-weight: 700; font-size: 1.15rem;
	color: var(--gz-accent);
}
.gz-services__strip li span {
	display: block;
	font-family: var(--gz-font-body); font-weight: 400; font-size: .82rem;
	color: rgba(255, 255, 255, .6);
}

/* =======================================================================
   8. POR QUÉ GARANTIZA
   ==================================================================== */

.gz-comparison { background: var(--gz-base); }

.gz-compare {
	border: 1px solid var(--gz-line);
	border-radius: var(--gz-radius-lg);
	overflow: hidden;
}
.gz-compare__head { display: grid; grid-template-columns: 1.1fr 1fr 1fr; }
.gz-compare__head > div { padding: 1.3rem clamp(1.2rem, 2vw, 2rem); }
.gz-compare__head .is-label { background: var(--gz-surface); }
.gz-compare__head .is-old { background: var(--gz-surface); color: var(--gz-ink-soft); }
.gz-compare__head .is-new { background: var(--gz-primary); color: #fff; }
.gz-compare__head h4 { margin: 0; font-size: 1.05rem; }
.gz-compare__tag {
	font-size: .78rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .06em; opacity: .75;
}

.gz-compare__row {
	display: grid; grid-template-columns: 1.1fr 1fr 1fr;
	border-top: 1px solid var(--gz-line);
}
.gz-compare__row > div { padding: 1.25rem clamp(1.2rem, 2vw, 2rem); font-size: .98rem; }
.gz-compare__row .is-feature {
	font-weight: 600; color: var(--gz-ink);
	display: flex; align-items: flex-start; gap: .8rem;
}
.gz-compare__row .is-feature .is-sublabel {
	display: block; font-weight: 400; font-size: .85rem;
	color: var(--gz-ink-soft); margin-top: .2rem;
}
.gz-compare__feature-icon {
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
	width: 34px; height: 34px; border-radius: var(--gz-radius-sm);
	background: var(--gz-tint);
	color: var(--gz-primary);
}
.gz-compare__feature-icon svg { width: 17px; height: 17px; }

.gz-compare__row .is-old { color: var(--gz-ink-soft); background: var(--gz-surface); }
.gz-compare__row .is-new { background: var(--gz-tint); color: var(--gz-primary-dark); font-weight: 600; }

.gz-compare__icon { display: inline-flex; width: 18px; height: 18px; margin-right: .5rem; vertical-align: -3px; }
.gz-compare__icon.is-no  { color: #94A3AF; }
.gz-compare__icon.is-yes { color: var(--gz-primary); }

@media (max-width: 820px) {
	.gz-compare__head, .gz-compare__row { grid-template-columns: 1fr; }
	.gz-compare__head .is-label, .gz-compare__row .is-feature { border-bottom: 1px dashed var(--gz-line); }
}

/* =======================================================================
   9. CLIENTES
   ==================================================================== */

.gz-clients { background: var(--gz-surface); }
.gz-clients__row { display: flex; flex-direction: column; gap: var(--gz-sp-lg); }
.gz-clients__copy { max-width: 640px; }
.gz-clients__copy h2 { font-size: var(--gz-fs-h2); color: var(--gz-primary-dark); }

.gz-client-marks { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.gz-client-mark {
	background: var(--gz-base);
	border: 1px solid var(--gz-line);
	border-radius: var(--gz-radius-sm);
	padding: 1.2rem .8rem; text-align: center;
	font-family: var(--gz-font-display);
	font-weight: 700; letter-spacing: .01em; font-size: .92rem;
	color: var(--gz-ink-soft);
	transition: color .2s ease, border-color .2s ease;
	display: flex; align-items: center; justify-content: center;
}
.gz-client-mark:hover { color: var(--gz-primary); border-color: var(--gz-primary); }
.gz-client-mark img { max-height: 34px; width: auto; object-fit: contain; }

@media (max-width: 900px) { .gz-client-marks { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .gz-client-marks { grid-template-columns: repeat(2, 1fr); } }

/* -----------------------------------------------------------------------
   9b. BANDA DE ENTIDADES (bajo el hero)
   Logos monocromos en azul oscuro atenuado; recuperan opacidad al pasar
   el cursor por la cinta, que además se detiene.
   ----------------------------------------------------------------------- */

.gz-logo-band {
	background: var(--gz-base);
	border-bottom: 1px solid var(--gz-line);
	padding-block: 2.25rem 2.5rem;
	text-align: center;
}

.gz-logo-band__label {
	font-size: .84rem; font-weight: 700;
	color: var(--gz-ink-soft);
	margin: 0 0 1.5rem;
}

.gz-logo-band__marquee {
	--gz-band-gap: clamp(3rem, 7vw, 5.25rem);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.gz-logo-band__track {
	display: flex;
	width: max-content;
	animation: gz-band-scroll 28s linear infinite;
}
.gz-logo-band__marquee:hover .gz-logo-band__track { animation-play-state: paused; }

/* Cada copia lleva su propio padding final = gap, así -50% cae exacto. */
.gz-logo-band__set {
	display: flex; align-items: center;
	gap: var(--gz-band-gap);
	padding: 0 var(--gz-band-gap) 0 0;
	margin: 0; list-style: none;
}

.gz-logo-band__item { display: flex; align-items: center; height: 48px; }

.gz-logo-band__item img {
	display: block;
	height: var(--gz-logo-h, 34px);
	width: auto; max-width: none;
	opacity: .5;
	transition: opacity .25s ease;
}
.gz-logo-band__marquee:hover img { opacity: .9; }

.gz-logo-band__more {
	font-family: var(--gz-font-display);
	font-weight: 700; font-size: 1.25rem;
	color: #9CACC0; letter-spacing: .01em;
	white-space: nowrap;
}

@keyframes gz-band-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (max-width: 560px) {
	.gz-logo-band { padding-block: 1.75rem 2rem; }
	.gz-logo-band__item img { height: calc(var(--gz-logo-h, 34px) * .82); }
}

/* Sin movimiento: una sola fila centrada, sin la copia del bucle. */
@media (prefers-reduced-motion: reduce) {
	.gz-logo-band__marquee { -webkit-mask-image: none; mask-image: none; }
	.gz-logo-band__track { animation: none; width: auto; justify-content: center; }
	.gz-logo-band__set { flex-wrap: wrap; justify-content: center; padding: 0; row-gap: 1.25rem; }
	.gz-logo-band__set[aria-hidden="true"] { display: none; }
	.gz-logo-band__item img { opacity: .75; }
}

/* =======================================================================
   10. CONTACTO
   ==================================================================== */

.gz-contact { background: var(--gz-tint); }
.gz-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.gz-contact__copy h2 { font-size: var(--gz-fs-h2); color: var(--gz-primary-dark); }

.gz-contact-info { display: flex; flex-direction: column; gap: 1.3rem; margin-top: 2rem; }
.gz-contact-info__item {
	display: flex; gap: 1rem;
	background: rgba(255, 255, 255, .6);
	border: 1px solid rgba(7, 58, 94, .1);
	border-radius: var(--gz-radius-md); padding: 1.1rem 1.3rem;
}
.gz-contact-info__item > svg { width: 22px; height: 22px; color: var(--gz-primary); flex-shrink: 0; margin-top: .15rem; }
.gz-contact-info__item h4 { margin: 0 0 .2rem; font-size: 1rem; }
.gz-contact-info__item p { margin: 0; font-size: .92rem; }

.gz-contact-info__link {
	display: inline-flex; align-items: center; gap: .4rem;
	font-weight: 600; font-size: .92rem; text-decoration: none;
	color: var(--gz-primary);
}
.gz-contact-info__link svg { width: 15px; height: 15px; color: inherit; margin: 0; flex-shrink: 0; transition: transform .15s ease; }
.gz-contact-info__link:hover svg { transform: translateX(3px); }

.gz-contact__note { margin-top: 1.1rem; font-size: .9rem; color: var(--gz-ink-soft); }

.gz-contact-form {
	background: var(--gz-base);
	border-radius: var(--gz-radius-lg);
	padding: clamp(1.6rem, 3vw, 2.4rem);
	box-shadow: var(--gz-shadow-card);
}
.gz-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.gz-field { margin-bottom: 1.1rem; }
.gz-field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .4rem; color: var(--gz-ink); }
.gz-field input, .gz-field select, .gz-field textarea {
	width: 100%; font-family: inherit; font-size: .98rem;
	padding: .75rem .9rem; border-radius: var(--gz-radius-sm);
	border: 1px solid var(--gz-line);
	background: #fff; color: var(--gz-ink);
}
.gz-field input:focus, .gz-field select:focus, .gz-field textarea:focus {
	outline: 2px solid var(--gz-primary); outline-offset: 1px;
}
.gz-field textarea { resize: vertical; min-height: 90px; }
.gz-form-note { font-size: .8rem; color: var(--gz-ink-soft); margin-top: .8rem; }
.gz-contact-form .gz-btn { width: 100%; }

/* -----------------------------------------------------------------------
   10b. FLUENT FORMS
   El formulario real replica el de la maqueta. Selectores con .fluentform
   para ganar en especificidad a la hoja del plugin, que se imprime
   después de la del tema.
   Estructura esperada en el editor de Fluent Forms:
     Container 2 col → Empresa / entidad | Tipo de entidad
     Container 2 col → Nombre y cargo    | Teléfono
     Correo corporativo · Cuéntanos sobre tu cartera · GDPR · Enviar
   ----------------------------------------------------------------------- */

.gz-contact-form .fluentform { font-family: var(--gz-font-body); color: var(--gz-ink); }
.gz-contact-form .fluentform .ff-el-group { margin-bottom: 1.1rem; }

/* Columnas: equivalente a .gz-form-row */
.gz-contact-form .fluentform .ff-t-container {
	display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 1rem;
	margin: 0; width: 100%;
}
.gz-contact-form .fluentform .ff-t-cell .ff-el-group { margin-bottom: 1.1rem; }
.gz-contact-form .fluentform .ff-el-input--label { padding: 0; }
.gz-contact-form .fluentform .ff-t-cell { width: auto !important; flex-basis: auto !important; padding: 0 !important; }

/* Etiquetas */
.gz-contact-form .fluentform .ff-el-input--label { margin-bottom: .4rem; }
.gz-contact-form .fluentform .ff-el-input--label label {
	font-size: .85rem; font-weight: 600; color: var(--gz-ink);
	margin: 0; line-height: 1.3;
}
/* La maqueta no marca los obligatorios: se valida igual, sin asterisco. */
.gz-contact-form .fluentform .ff-el-is-required.asterisk-right label::after,
.gz-contact-form .fluentform .ff-el-is-required.asterisk-left label::before { content: none; display: none; }
.gz-contact-form .fluentform .ff-el-input--label.asterisk-left label { padding-left: 0; }

/* Controles */
.gz-contact-form .fluentform .ff-el-form-control {
	width: 100%; height: auto; min-height: 0;
	font-family: inherit; font-size: .98rem; line-height: 1.5;
	padding: .75rem .9rem;
	border-radius: var(--gz-radius-sm);
	border: 1px solid var(--gz-line);
	background-color: #fff; color: var(--gz-ink);
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.gz-contact-form .fluentform .ff-el-form-control::placeholder { color: #8A9AAA; opacity: 1; }
.gz-contact-form .fluentform .ff-el-form-control:hover { border-color: #C3D2E0; }
.gz-contact-form .fluentform .ff-el-form-control:focus {
	outline: 2px solid var(--gz-primary); outline-offset: 1px;
	border-color: var(--gz-primary); box-shadow: none;
}
.gz-contact-form .fluentform textarea.ff-el-form-control { min-height: 90px; height: 90px; resize: vertical; }

.gz-contact-form .fluentform select.ff-el-form-control {
	appearance: none; -webkit-appearance: none;
	padding-right: 2.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23073A5E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .9rem center;
	background-size: 16px;
}

/* Teléfono con selector de país (intl-tel-input) */
.gz-contact-form .fluentform .iti { width: 100%; }
.gz-contact-form .fluentform .iti input.ff-el-form-control { padding-left: 3.4rem; }

/* Consentimiento (GDPR / Ley 29733) */
.gz-contact-form .fluentform .ff-el-form-check { margin-bottom: 0; }
.gz-contact-form .fluentform .ff-el-tc,
.gz-contact-form .fluentform .ff-el-group:has(.ff-el-form-check) { margin: .2rem 0 0; }
.gz-contact-form .fluentform .ff-el-form-check-label {
	display: flex; align-items: flex-start; gap: .5rem;
	font-size: .8rem; line-height: 1.45; color: var(--gz-ink-soft);
	cursor: pointer;
}
.gz-contact-form .fluentform .ff-el-form-check-input {
	width: 15px; height: 15px; margin: .12rem 0 0; flex-shrink: 0;
	accent-color: var(--gz-primary);
}
.gz-contact-form .fluentform .ff-el-form-check-label a {
	color: var(--gz-primary); font-weight: 600; text-underline-offset: 2px;
}
.gz-contact-form .fluentform .ff-el-tc label.ff_tc_label > span:first-child { margin-top: .1rem; }

/* Errores de validación */
.gz-contact-form .fluentform .ff-el-is-error .ff-el-form-control { border-color: #C8372D; }
.gz-contact-form .fluentform .ff-el-is-error .text-danger,
.gz-contact-form .fluentform .error.text-danger {
	display: block; margin-top: .35rem;
	font-size: .8rem; font-weight: 600; color: #C8372D;
}
.gz-contact-form .ff-errors-in-stack {
	margin-top: 1rem; padding: .8rem 1rem;
	border-radius: var(--gz-radius-sm);
	background: #FDECEA; color: #8E2A22; font-size: .88rem;
}

/* Botón de envío = .gz-btn--primary */
.gz-contact-form .fluentform .ff_submit_btn_wrapper { margin-top: 1.1rem; margin-bottom: 0; }
/* Nota bajo el botón = .form-note de la maqueta (texto en Custom HTML). */
.gz-contact-form .fluentform .gz-ff-note,
.gz-contact-form .fluentform .ff-custom_html .gz-ff-note { font-size: .8rem; color: var(--gz-ink-soft); margin: .8rem 0 0; }
.gz-contact-form .fluentform .ff-el-group.ff-custom_html { margin-bottom: 0; }
.gz-contact-form .fluentform .ff-btn-submit,
.gz-contact-form .fluentform .ff-btn-submit:not(.ff_btn_no_style) {
	width: 100%;
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	font-family: var(--gz-font-display); font-weight: 700; font-size: 1.05rem;
	padding: .9rem 1.7rem; border: 2px solid transparent;
	border-radius: var(--gz-radius-sm);
	background-color: var(--gz-accent); color: var(--gz-primary-deep);
	box-shadow: none; opacity: 1;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.gz-contact-form .fluentform .ff-btn-submit:hover {
	background-color: #FFB840; color: var(--gz-primary-deep);
	box-shadow: 0 10px 22px -8px rgba(248, 164, 26, .55);
}
.gz-contact-form .fluentform .ff-btn-submit:active { transform: translateY(1px); }
.gz-contact-form .fluentform .ff-btn-submit.disabled,
.gz-contact-form .fluentform .ff-btn-submit[disabled] { opacity: .65; cursor: progress; }
.gz-contact-form .fluentform .ff-loading::after { border-color: var(--gz-primary-deep) transparent var(--gz-primary-deep) transparent; }

/* Mensaje de éxito: Fluent Forms reemplaza el formulario por este bloque.
   El HTML va en Confirmation Settings: <div class="ff-success">…</div> */
.gz-contact-form .ff-message-success {
	border: 0; box-shadow: none; padding: 0; margin: 0;
	background: transparent;
}
.gz-contact-form .ff-success {
	text-align: center;
	padding: clamp(1.5rem, 3vw, 2.5rem) 1rem;
}
.gz-contact-form .ff-success::before {
	content: "";
	display: block; width: 64px; height: 64px; margin: 0 auto 1.2rem;
	border-radius: 50%;
	background: var(--gz-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230571BD' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 30px no-repeat;
}
.gz-contact-form .ff-success h3 {
	font-size: 1.6rem; color: var(--gz-primary-dark); margin-bottom: .6rem;
}
.gz-contact-form .ff-success p { max-width: 38ch; margin: 0 auto; color: var(--gz-ink-soft); }

@media (max-width: 560px) {
	.gz-contact-form .fluentform .ff-t-container { grid-template-columns: 1fr; }
}

@media (max-width: 900px) { .gz-contact__grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .gz-form-row { grid-template-columns: 1fr; } }

/* =======================================================================
   11. PIE
   ==================================================================== */

.gz-footer { background: var(--gz-primary-deep); color: rgba(255, 255, 255, .75); }

.gz-footer__top {
	display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 2.5rem;
	padding-block: var(--gz-sp-xl);
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.gz-footer__brand p { color: rgba(255, 255, 255, .6); font-size: .92rem; max-width: 32ch; margin-top: 1rem; }

.gz-footer__social { display: flex; gap: .7rem; margin-top: 1.2rem; }
.gz-footer__social-link {
	display: flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .15);
	color: rgba(255, 255, 255, .75);
	transition: background .15s ease, color .15s ease;
}
.gz-footer__social-link svg { width: 17px; height: 17px; }
.gz-footer__social-link:hover {
	background: var(--gz-accent); color: var(--gz-primary-deep); border-color: var(--gz-accent);
}

.gz-footer__col h5 {
	color: #fff; font-family: var(--gz-font-display); font-size: 1rem; margin: 0 0 1rem;
	font-weight: 700;
}
.gz-footer__col ul { display: flex; flex-direction: column; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.gz-footer__col a { font-size: .92rem; text-decoration: none; color: rgba(255, 255, 255, .65); transition: color .15s ease; }
.gz-footer__col a:hover { color: var(--gz-accent); }
.gz-footer__col li { font-size: .92rem; }

.gz-footer__bottom {
	display: flex; flex-wrap: wrap; gap: 1rem;
	justify-content: space-between; align-items: center;
	padding-block: 1.4rem; font-size: .82rem; color: rgba(255, 255, 255, .5);
}
.gz-footer__bottom ul { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.gz-footer__bottom a { text-decoration: none; color: rgba(255, 255, 255, .6); }
.gz-footer__bottom a:hover { color: #fff; }

@media (max-width: 900px) { .gz-footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .gz-footer__top { grid-template-columns: 1fr; } }

/* =======================================================================
   12. REVEAL AL ENTRAR EN PANTALLA — una sola vez, discreto
   ==================================================================== */

.gz-reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.gz-reveal.is-visible { opacity: 1; transform: none; }

/* Sin JS el contenido debe verse igual: nunca se queda invisible. */
.no-js .gz-reveal { opacity: 1; transform: none; }

/* =======================================================================
   13. PLANTILLAS DE RESPALDO (404, página suelta)
   ==================================================================== */

.gz-page { padding-block: var(--gz-sp-xl); }
.gz-page h1 { font-size: var(--gz-fs-h2); color: var(--gz-primary-dark); }
.gz-page__lead { font-size: var(--gz-fs-large); }

/* Contenido editable desde el editor (política de privacidad, términos).
   Solo tipografía: no se cargan los estilos de bloques en el front. */
.gz-page { width: 100%; }
.gz-page__header {
	padding-bottom: var(--gz-sp-md); margin-bottom: var(--gz-sp-lg);
	border-bottom: 1px solid var(--gz-line);
}
.gz-page__header h1 { margin-bottom: 0; }
.gz-page__header .gz-kicker { margin-bottom: .6rem; }

.gz-prose { max-width: 72ch; }
.gz-prose > * + * { margin-top: 1em; }
.gz-prose h2 { font-size: 1.7rem; color: var(--gz-primary-dark); margin: 2.2rem 0 .6rem; }
.gz-prose h3 { font-size: 1.3rem; color: var(--gz-primary-dark); margin: 1.8rem 0 .5rem; }
.gz-prose h4 { font-size: 1.1rem; margin: 1.5rem 0 .4rem; }
.gz-prose p, .gz-prose li { color: var(--gz-ink-soft); }
.gz-prose ul, .gz-prose ol { padding-left: 1.3rem; margin: 0 0 1em; }
.gz-prose li + li { margin-top: .35rem; }
.gz-prose li::marker { color: var(--gz-primary); }
.gz-prose a { color: var(--gz-primary); font-weight: 600; text-underline-offset: 2px; }
.gz-prose a:hover { color: var(--gz-primary-dark); }
.gz-prose strong { color: var(--gz-ink); }
.gz-prose blockquote {
	margin: 1.5rem 0; padding: 1rem 1.3rem;
	border-left: 4px solid var(--gz-accent);
	background: var(--gz-surface); border-radius: 0 var(--gz-radius-sm) var(--gz-radius-sm) 0;
}
.gz-prose table { width: 100%; border-collapse: collapse; font-size: .95rem; display: block; overflow-x: auto; }
.gz-prose th, .gz-prose td { padding: .7rem .9rem; border: 1px solid var(--gz-line); text-align: left; }
.gz-prose th { background: var(--gz-tint); color: var(--gz-primary-dark); }
.gz-prose img { height: auto; border-radius: var(--gz-radius-sm); }
.gz-prose hr { border: 0; border-top: 1px solid var(--gz-line); margin: 2rem 0; }

/* Una página con Fluent Forms embebido fuera de la portada. */
.gz-prose .fluentform { max-width: 560px; }

/* -----------------------------------------------------------------------
   LIBRO DE RECLAMACIONES (page-libro-de-reclamaciones.php)
   Reutiliza la grilla y la tarjeta de Contacto; aquí solo lo propio.
   ----------------------------------------------------------------------- */
.gz-claims { padding-block: var(--gz-sp-lg) var(--gz-sp-xl); }
.gz-claims .gz-contact__grid { align-items: start; }
.gz-claims h1 { font-size: var(--gz-fs-h2); color: var(--gz-primary-dark); margin-bottom: .8rem; }
.gz-claims__lead { font-size: var(--gz-fs-large); color: var(--gz-ink-soft); }

.gz-claims__provider {
	margin-top: 1.8rem; padding: 1.1rem 1.3rem;
	border-radius: var(--gz-radius-sm);
	background: #fff; border-left: 4px solid var(--gz-accent);
	font-size: .92rem; line-height: 1.55; color: var(--gz-ink-soft);
}
.gz-claims__provider strong { display: block; color: var(--gz-primary-dark); font-family: var(--gz-font-display); font-size: 1.1rem; margin-bottom: .2rem; }

.gz-claims__types { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.3rem; }
.gz-claims__type { background: rgba(255,255,255,.65); border: 1px solid var(--gz-line); border-radius: var(--gz-radius-sm); padding: 1rem 1.1rem; }
.gz-claims__type h4 { margin: 0 0 .3rem; font-size: 1rem; color: var(--gz-primary); }
.gz-claims__type p { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--gz-ink-soft); }

.gz-claims__card-head { margin-bottom: 1.4rem; padding-bottom: 1rem; border-bottom: 1px solid var(--gz-line); }
.gz-claims__card-head h2 { font-size: 1.45rem; color: var(--gz-primary-dark); margin: 0 0 .2rem; }
.gz-claims__card-head p { margin: 0; font-size: .85rem; color: var(--gz-ink-soft); }

/* Tipo de reclamación como botones segmentados (Radio Field de FF). */
.gz-claims .fluentform .ff-el-group:has(input[type="radio"]) .ff-el-input--content { display: flex; gap: .6rem; flex-wrap: wrap; }
.gz-claims .fluentform .ff-el-form-check:has(input[type="radio"]) { flex: 1 1 0; margin: 0; }
.gz-claims .fluentform .ff-el-form-check:has(input[type="radio"]) .ff-el-form-check-label {
	justify-content: center; align-items: center;
	padding: .7rem .9rem; border: 1px solid var(--gz-line); border-radius: var(--gz-radius-sm);
	background: #fff; font-size: .95rem; font-weight: 600; color: var(--gz-ink);
	transition: border-color .15s ease, background-color .15s ease;
}
.gz-claims .fluentform .ff-el-form-check:has(input[type="radio"]:checked) .ff-el-form-check-label {
	border-color: var(--gz-primary); background: var(--gz-tint); color: var(--gz-primary-dark);
}
.gz-claims .fluentform .ff-el-form-check:has(input[type="radio"]:focus-visible) .ff-el-form-check-label { outline: 2px solid var(--gz-primary); outline-offset: 1px; }

@media (max-width: 900px) {
	.gz-claims__types { grid-template-columns: 1fr; }
}

/* =======================================================================
   13. FORMULARIOS: AVISOS DE ENVÍO
   Refuerzos de QA sobre Fluent Forms (BUG-005).
   ==================================================================== */

/* Aviso propio cuando el envío no llega a salir (sin conexión). */
.gz-form-aviso {
	margin-top: 1rem; padding: .85rem 1rem;
	border-radius: var(--gz-radius-sm, 8px);
	background: #fdecec; border: 1px solid #f3b9b9; color: #8a1f1f;
	font-size: .95rem; line-height: 1.45;
}

/* Si el servidor responde con una página completa en lugar de JSON, el
   plugin la inyecta tal cual en el recuadro de errores. Acotarlo evita
   que una respuesta inesperada rompa la maqueta del formulario. */
.ff-errors-in-stack {
	max-height: 12rem; overflow: auto;
	overflow-wrap: anywhere;
}
.ff-errors-in-stack :is(html, body, head, style, script, header, footer, nav) { display: none !important; }
.ff-errors-in-stack img { max-width: 100%; height: auto; }