/*
 * Formulario por pasos de leads PPR, bloque de cierre y barra fija móvil (functions/lead/, template-parts/lead/).
 * Tokens del diseño «Rediseño de ficha Allianz OptiMaxx Plus». Tipografía: la del tema (no se carga ninguna fuente nueva).
 */

.sg-card, .sg-cierre, .sg-barra, .sg-hero {
	--sg-action: #B84E17;       /* solo botones de acción */
	--sg-action-hover: #9A4012;
	--sg-teal: #00796B;         /* selección, foco, progreso */
	--sg-teal-50: #E6F4F2;
	--sg-turquoise: #1FC7C0;    /* anillo de la foto */
	--sg-blue: #0A6CC2;         /* enlaces */
	--sg-error: #B42318;
	--sg-ink: #18222F;
	--sg-ink-2: #4A5563;
	--sg-line-strong: #C9D2DB;
	--sg-line: #E3E9EE;
	--sg-bg: #F4F7F9;
	--sg-r-campo: 12px;
	--sg-r-caja: 14px;
	--sg-r-tarjeta: 20px;
	--sg-shadow-card: 0 1px 2px rgba(16, 24, 40, .06), 0 12px 32px -8px rgba(16, 24, 40, .14);
	--sg-ring: 0 0 0 4px rgba(0, 121, 107, .18);
	--sg-ring-error: 0 0 0 4px rgba(180, 35, 24, .14);
}

/* ---------- Hero ---------- */

.sg-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 4px 0 28px; }
.sg-hero__cabecera { min-width: 0; }
.sg-hero__cabecera h1 { font-size: 1.75rem; line-height: 1.2; margin: 0 0 8px; text-align: left; }
.sg-hero__intro { min-width: 0; font-size: 1.1rem; line-height: 1.6; }
.sg-hero__intro p { margin: 0; }
.sg-hero__form { min-width: 0; }

@media (min-width: 1024px) {
	.sg-hero {
		grid-template-columns: minmax(0, 1fr) 440px;
		grid-template-areas: "cabecera form" "intro form";
		grid-template-rows: auto 1fr;
		column-gap: 72px;
		align-items: start;
		margin-top: 12px;
	}
	.sg-hero__cabecera { grid-area: cabecera; }
	.sg-hero__intro { grid-area: intro; font-size: 1.125rem; line-height: 1.65; max-width: 620px; }
	.sg-hero__form { grid-area: form; }
	.sg-hero__cabecera h1 { font-size: 2.2rem; }
}

/* El contenido pierde la columna lateral: ocupa todo el ancho. */
.ppr-grid--lead { display: block; }
.ppr-grid--lead > .ppr-main, .ppr-grid--lead > .ppr-opiniones { max-width: 880px; }

/* ---------- Tarjeta ---------- */

.sg-card {
	box-sizing: border-box;
	width: 100%;
	max-width: 440px;
	background: #fff;
	color: var(--sg-ink);
	border: 1px solid var(--sg-line);
	border-radius: var(--sg-r-tarjeta);
	box-shadow: var(--sg-shadow-card);
	padding: 24px 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	text-align: left;
	scroll-margin-top: 16px;
}
.sg-card *, .sg-card *::before, .sg-card *::after { box-sizing: border-box; }
.sg-card p, .sg-card ol, .sg-card ul, .sg-card fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.sg-card__titulo { font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--sg-ink); }

.sg-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sg-hp { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Sin JS se ve todo en una página: los controles que solo sirven con JS se ocultan. */
.sg-card .sg-solo-js { display: none; }
.sg-card.sg-js .sg-solo-js { display: flex; }
.sg-card.sg-js .sg-solo-js[hidden] { display: none; }

.sg-form { display: flex; flex-direction: column; gap: 28px; }
.sg-js .sg-form { gap: 0; }
.sg-js .sg-paso { display: none; }
.sg-js .sg-paso.is-activo { display: flex; }
.sg-paso { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sg-paso[data-sg-paso="3"] { gap: 18px; }

.sg-titulo { font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; color: var(--sg-ink); padding: 0; width: 100%; }
.sg-titulo:focus { outline: none; }
.sg-titulo:focus-visible { outline: 3px solid var(--sg-teal); outline-offset: 4px; border-radius: 4px; }
.sg-sub { font-size: 18px; font-weight: 700; color: var(--sg-ink); }
.sg-texto { font-size: 16px; line-height: 1.5; color: var(--sg-ink-2); }
.sg-intro { font-size: 16px; line-height: 1.45; color: var(--sg-ink); }

/* ---------- Progreso ---------- */

.sg-progreso { flex-direction: column; gap: 8px; }
.sg-progreso__fila { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 600; color: var(--sg-ink-2); }
.sg-progreso__pista { color: var(--sg-teal); }
.sg-progreso__barra { height: 6px; border-radius: 999px; background: #E3EBEE; overflow: hidden; }
.sg-progreso__relleno { height: 100%; width: 33.34%; background: var(--sg-teal); border-radius: 999px; transition: width .35s ease; }

/* ---------- Paso 1: opciones (radios) ---------- */

.sg-opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sg-opcion { position: relative; display: block; margin: 0; cursor: pointer; }
.sg-opcion input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sg-opcion span {
	display: flex; align-items: center; justify-content: center; text-align: center;
	min-height: 56px; padding: 10px 12px; border-radius: var(--sg-r-campo);
	border: 2px solid var(--sg-line-strong); background: #fff; color: var(--sg-ink);
	font-size: 16px; font-weight: 600; line-height: 1.2;
	transition: border-color .15s, background .15s;
}
.sg-opcion:hover span { border-color: var(--sg-teal); background: #F2FAF9; }
.sg-opcion input:checked + span { border-color: var(--sg-teal); background: var(--sg-teal-50); }
.sg-opcion input:focus-visible + span { border-color: var(--sg-teal); box-shadow: var(--sg-ring); }

/* Mini tarjeta de asesora */
.sg-asesora { display: flex; gap: 12px; align-items: center; padding: 12px 14px; background: var(--sg-bg); border-radius: var(--sg-r-caja); }
.sg-asesora > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sg-asesora__nombre { font-size: 16px; line-height: 1.35; }
.sg-asesora__nombre strong { font-weight: 600; }
.sg-asesora__nota { font-size: 14px; line-height: 1.35; color: var(--sg-ink-2); }
.sg-foto { display: block; flex: none; border-radius: 50%; object-fit: cover; background: var(--sg-teal-50); }
.sg-foto--52 { width: 52px; height: 52px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sg-turquoise); margin: 2px; }
.sg-foto--72 { width: 72px; height: 72px; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--sg-turquoise); margin: 3px; }

/* ---------- Campos ---------- */

.sg-campo { display: flex; flex-direction: column; gap: 8px; }
.sg-campo > label { display: flex; gap: 8px; align-items: baseline; margin: 0; font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--sg-ink); }
.sg-opcional { font-size: 14px; font-weight: 500; color: var(--sg-ink-2); }
.sg-ayuda { font-size: 14px; line-height: 1.4; color: var(--sg-ink-2); }
.sg-error { font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--sg-error); }
.sg-error:empty { display: none; }

.sg-card input[type="text"], .sg-card input[type="tel"], .sg-card input[type="email"] {
	width: 100%; margin: 0; font-family: inherit; color: var(--sg-ink); background: #fff;
	border: 0; box-shadow: none; border-radius: 0; padding: 0; outline: 0; -webkit-appearance: none; appearance: none;
}
.sg-card input::placeholder { color: #7A8594; opacity: 1; }

.sg-input, .sg-edad, .sg-telefono {
	display: flex; align-items: stretch; height: 56px;
	border: 2px solid var(--sg-line-strong) !important; border-radius: var(--sg-r-campo) !important; background: #fff;
	overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
.sg-card input.sg-input { padding: 0 16px; font-size: 17px; }
.sg-edad { height: 64px; border-radius: var(--sg-r-caja) !important; align-items: center; gap: 8px; padding: 0 16px; }
.sg-edad input { flex: 1; min-width: 0; font-size: 28px !important; font-weight: 600; }
.sg-edad span { font-size: 18px; color: var(--sg-ink-2); }
.sg-telefono__lada { display: flex; align-items: center; padding: 0 12px 0 14px; font-size: 17px; font-weight: 600; color: var(--sg-ink-2); background: var(--sg-bg); border-right: 1px solid #D9E0E7; }
.sg-telefono input { flex: 1; min-width: 0; padding: 0 14px !important; font-size: 17px; letter-spacing: .02em; }

.sg-input:focus, .sg-edad:focus-within, .sg-telefono:focus-within { border-color: var(--sg-teal) !important; box-shadow: var(--sg-ring); }
.sg-input.is-error, .is-error.sg-edad, .is-error.sg-telefono { border-color: var(--sg-error) !important; }
.sg-input.is-error:focus, .is-error.sg-edad:focus-within, .is-error.sg-telefono:focus-within { box-shadow: var(--sg-ring-error); }

.sg-errores { padding: 12px 14px; border: 1px solid var(--sg-error); border-radius: var(--sg-r-caja); color: var(--sg-error); font-size: 15px; line-height: 1.4; }
.sg-errores ul { padding-left: 18px !important; margin-top: 4px !important; }

/* ---------- Botones ---------- */

.sg-btn {
	display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
	height: 56px; margin: 0; padding: 0 16px; border: 0; border-radius: var(--sg-r-campo);
	background: var(--sg-action); color: #fff; font-family: inherit; font-size: 18px; font-weight: 600; line-height: 1;
	text-decoration: none; cursor: pointer; transition: background .15s;
}
.sg-btn:hover { background: var(--sg-action-hover); color: #fff; }
.sg-btn:focus-visible, .sg-atras:focus-visible, .sg-card a:focus-visible { outline: 3px solid var(--sg-teal); outline-offset: 3px; }
.sg-btn--borde { background: #fff; color: #00665A; border: 2px solid var(--sg-teal); font-size: 17px; }
.sg-btn--borde:hover { background: #F2FAF9; color: #00665A; }
.sg-btn.is-cargando { background: var(--sg-action-hover); cursor: progress; }
.sg-btn__spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: sg-giro .8s linear infinite; }
.sg-btn.is-cargando .sg-btn__spinner { display: inline-block; }
@keyframes sg-giro { to { transform: rotate(360deg); } }

.sg-atras {
	align-self: center; min-height: 48px; padding: 0 16px; margin: 0; border: 0; background: transparent;
	color: var(--sg-blue); font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
}
.sg-atras:hover { text-decoration: underline; }
.sg-legal { font-size: 14px; line-height: 1.45; color: var(--sg-ink-2); text-align: center; }
.sg-legal a { color: var(--sg-blue); text-decoration: underline; }
.sg-error--envio { text-align: center; }

/* ---------- Adelanto del bono ---------- */

.sg-bono { background: var(--sg-teal-50); border-radius: var(--sg-r-caja); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.sg-bono[hidden] { display: none; }
.sg-bono__texto { font-size: 19px; line-height: 1.4; font-weight: 500; }
.sg-bono__texto strong { font-weight: 700; }
.sg-bono__pct { color: #00665A; }
.sg-bono__nota { font-size: 14px; line-height: 1.4; color: #3A4E4B; }

/* ---------- Paneles: bajo el mínimo y gracias ---------- */

.sg-panel { display: flex; flex-direction: column; gap: 16px; }
.sg-panel[hidden] { display: none; }
.sg-alternativas { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.sg-alternativas li { border: 1px solid #D9E0E7; border-radius: var(--sg-r-caja); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.sg-alternativas strong { font-size: 17px; font-weight: 600; }
.sg-alternativas span { font-size: 16px; line-height: 1.45; color: var(--sg-ink-2); }

.sg-check { width: 48px; height: 48px; border-radius: 50%; background: var(--sg-teal-50); color: var(--sg-teal); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; }
.sg-pasos { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.sg-pasos li { display: flex; gap: 12px; align-items: center; font-size: 16px; line-height: 1.4; }
.sg-pasos__n { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--sg-ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; }
.sg-horario { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; background: var(--sg-bg); border-radius: var(--sg-r-caja); color: var(--sg-ink-2); }
.sg-horario svg { flex: none; margin-top: 2px; }
.sg-horario p { font-size: 16px; line-height: 1.45; color: var(--sg-ink); }
.sg-horario strong { font-weight: 600; }

/* ---------- Bloque de cierre ---------- */

.sg-cierre {
	box-sizing: border-box; margin: 32px 0; background: #fff; color: var(--sg-ink);
	border: 1px solid var(--sg-line); border-radius: var(--sg-r-tarjeta); box-shadow: var(--sg-shadow-card);
	padding: 24px 20px; scroll-margin-top: 16px;
	display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 18px; align-items: center;
	grid-template-areas: "foto id" "frase frase" "boton boton";
}
.sg-cierre p { margin: 0; }
.sg-cierre .sg-foto { grid-area: foto; }
.sg-cierre__id { grid-area: id; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sg-cierre__nombre { font-size: 19px; font-weight: 700; }
.sg-cierre__cedula { font-size: 15px; color: var(--sg-ink-2); }
.sg-cierre__frase { grid-area: frase; font-size: 19px; line-height: 1.4; font-weight: 500; text-wrap: pretty; }
.sg-cierre .sg-btn { grid-area: boton; }

@media (min-width: 768px) {
	.sg-cierre {
		grid-template-columns: auto minmax(0, 1fr) 260px; column-gap: 24px; row-gap: 6px; padding: 28px 32px;
		grid-template-areas: "foto id boton" "foto frase boton";
	}
	.sg-cierre .sg-foto--72 { width: 88px; height: 88px; }
	.sg-cierre__id { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; align-self: end; }
	.sg-cierre__frase { font-size: 20px; align-self: start; }
	.sg-cierre .sg-btn { height: 52px; font-size: 17px; }
}

/* ---------- Barra fija móvil (< 768 px) ---------- */

.sg-barra { display: none; }

@media (max-width: 767.98px) {
	.sg-barra {
		display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 990;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		background: #fff; box-shadow: 0 -1px 0 var(--sg-line), 0 -8px 24px -8px rgba(16, 24, 40, .18);
		transform: translateY(100%); visibility: hidden;
		transition: transform .25s ease, visibility 0s linear .25s;
	}
	.sg-barra.is-visible { transform: translateY(0); visibility: visible; transition: transform .25s ease, visibility 0s; }
	.sg-btn--barra { height: 52px; }
	/* Deja sitio al final de la página para que la barra no tape el pie. */
	body.sg-con-barra { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.sg-barra, .sg-progreso__relleno, .sg-opcion span, .sg-btn { transition: none; }
}

/* Las tablas del contenido no deben ensanchar la página en móvil: se desplazan dentro de su caja. */
.ppr-ficha--lead .ppr-contenido table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* En un <fieldset> el gap del contenedor no separa la <legend>. */
.sg-card legend.sg-titulo { float: left; margin: 0 0 16px; }
.sg-card legend.sg-titulo + * { clear: both; }