/*!
 * Pymeinnova NINA Suite — Cotizador
 *
 * Sistema de diseño con tokens en tres capas: primitivas (escalas), semánticas
 * (rol en la interfaz) y de componente. Los colores de marca entran por
 * variables inline desde los ajustes, así que cambiar la identidad no exige
 * tocar este archivo.
 *
 * Tipografía: pila del sistema. Evita una petición extra a un CDN de fuentes,
 * elimina el texto invisible durante la carga y no genera salto de diseño.
 * Los precios usan cifras tabulares para que no "bailen" al actualizarse.
 *
 * Blindaje contra el tema: todo cuelga de .pns-shell y no hereda tipografías
 * ni botones del theme activo.
 */

/* ═══════════════════════════════════════════════════════════════
   1. Tokens
   ═══════════════════════════════════════════════════════════════ */
.pns-shell {
	/* Marca — se sobreescriben inline desde los ajustes del plugin.
	   Son los dos extremos del degradado del monograma: azul marino en la
	   base de la P, turquesa en el remate. */
	--pns-primary: #141E9C;
	--pns-alt: #12BFA0;
	--pns-accent: #12BFA0;

	/* El degradado ES la marca: se usa en el botón principal, la barra de
	   progreso y el bloque del total, no como decoración suelta. */
	--pns-grad: linear-gradient(135deg, var(--pns-primary) 0%, var(--pns-alt) 100%);
	--pns-grad-soft: linear-gradient(135deg,
		color-mix(in srgb, var(--pns-primary) 10%, transparent),
		color-mix(in srgb, var(--pns-alt) 14%, transparent));

	/* Escala neutra */
	--pns-n0: #FFFFFF;
	--pns-n50: #F6F8FD;
	--pns-n100: #EDF1F9;
	--pns-n200: #DFE6F2;
	--pns-n300: #C6D1E4;
	--pns-n500: #64748B;
	--pns-n600: #475569;
	--pns-n800: #1E293B;
	--pns-n900: #0B1020;

	/* Estado */
	--pns-success: #16A34A;
	--pns-success-soft: #E9F8EE;
	--pns-warn: #C2740A;
	--pns-warn-soft: #FEF5E4;
	--pns-danger: #DC2626;
	--pns-danger-soft: #FDECEC;

	/* Semánticos */
	--pns-bg: var(--pns-n50);
	--pns-surface: var(--pns-n0);
	--pns-surface-2: var(--pns-n50);
	--pns-ink: var(--pns-n900);
	--pns-ink-2: var(--pns-n600);
	--pns-muted: var(--pns-n500);
	--pns-line: var(--pns-n200);
	--pns-line-strong: var(--pns-n300);
	--pns-ring: color-mix(in srgb, var(--pns-primary) 42%, transparent);
	--pns-tint: color-mix(in srgb, var(--pns-primary) 7%, var(--pns-n0));
	--pns-tint-strong: color-mix(in srgb, var(--pns-primary) 13%, var(--pns-n0));

	/* Espaciado (escala 4pt) */
	--pns-s1: 4px;  --pns-s2: 8px;  --pns-s3: 12px; --pns-s4: 16px;
	--pns-s5: 20px; --pns-s6: 24px; --pns-s8: 32px; --pns-s10: 40px;
	--pns-s12: 48px; --pns-s16: 64px;

	/* Radios y sombras */
	--pns-r-sm: 10px; --pns-r-md: 14px; --pns-r-lg: 20px; --pns-r-xl: 26px;
	--pns-sh-sm: 0 1px 2px rgba(11,16,32,.05), 0 1px 3px rgba(11,16,32,.04);
	--pns-sh-md: 0 4px 12px rgba(11,16,32,.07), 0 2px 4px rgba(11,16,32,.04);
	--pns-sh-lg: 0 16px 40px rgba(11,16,32,.12), 0 4px 12px rgba(11,16,32,.06);
	--pns-sh-brand: 0 10px 28px color-mix(in srgb, var(--pns-primary) 26%, transparent);

	/* Movimiento */
	--pns-fast: 160ms;
	--pns-base: 220ms;
	--pns-ease: cubic-bezier(.2, .7, .3, 1);

	--pns-font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
		Roboto, "Helvetica Neue", Arial, sans-serif;
	/* Cifras tabulares en todo el cotizador: los precios cambian en vivo y con
	   cifras proporcionales el total "bailaría" en cada recálculo. */
	font-variant-numeric: tabular-nums;

	font-family: var(--pns-font);
	color: var(--pns-ink);
	background: transparent;
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	container-type: inline-size;
}

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

.pns-shell h2, .pns-shell h3, .pns-shell h4, .pns-shell p, .pns-shell ul, .pns-shell ol {
	margin: 0;
	padding: 0;
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
}
.pns-shell ul, .pns-shell ol { list-style: none; }

/* Hello Elementor declara [type="button"] después del plugin y, por empate
   de especificidad, convertía nuestras tarjetas en bloques sin salto de línea.
   El blindaje usa el contexto del cotizador para que la interfaz conserve su
   estructura sin importar el tema activo. */
.pns-shell button {
	font-family: var(--pns-font);
	white-space: normal;
}
.pns-shell button.pns-card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	text-align: start;
	white-space: normal;
}
.pns-shell button.pns-btn { display: inline-flex; }

/* Tipografía geométrica: la que corresponde al logotipo de la marca. Solo se
   activa si el ajuste la pide, porque implica cargar la fuente. */
.pns-shell.pns-font-geometrica {
	--pns-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Pareja del diseño de marca: Inter para leer, Montserrat para titular. */
.pns-shell.pns-font-nina {
	--pns-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--pns-font-display: "Montserrat", var(--pns-font);
}

/* ── Modo oscuro ─────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
	.pns-shell.pns-theme-auto {
		--pns-bg: #0A0E1A;
		--pns-surface: #121829;
		--pns-surface-2: #182035;
		--pns-ink: #EEF2FB;
		--pns-ink-2: #C3CCE0;
		--pns-muted: #94A2BE;
		--pns-line: #253048;
		--pns-line-strong: #33415C;
		--pns-tint: color-mix(in srgb, var(--pns-primary) 26%, #121829);
		--pns-tint-strong: color-mix(in srgb, var(--pns-primary) 38%, #121829);
		--pns-success-soft: #10291A;
		--pns-warn-soft: #2B2110;
		--pns-danger-soft: #2C1414;
		--pns-sh-sm: 0 1px 2px rgba(0,0,0,.4);
		--pns-sh-md: 0 4px 14px rgba(0,0,0,.45);
		--pns-sh-lg: 0 18px 44px rgba(0,0,0,.55);
	}
}
.pns-shell.pns-theme-oscuro {
	--pns-bg: #0A0E1A;
	--pns-surface: #121829;
	--pns-surface-2: #182035;
	--pns-ink: #EEF2FB;
	--pns-ink-2: #C3CCE0;
	--pns-muted: #94A2BE;
	--pns-line: #253048;
	--pns-line-strong: #33415C;
	--pns-tint: color-mix(in srgb, var(--pns-primary) 26%, #121829);
	--pns-tint-strong: color-mix(in srgb, var(--pns-primary) 38%, #121829);
	--pns-success-soft: #10291A;
	--pns-warn-soft: #2B2110;
	--pns-danger-soft: #2C1414;
}

/* ═══════════════════════════════════════════════════════════════
   2. Primitivas
   ═══════════════════════════════════════════════════════════════ */
.pns-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.pns-i {
	width: 1.15em; height: 1.15em;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: -.18em;
}
.pns-i--lg { width: 1.5em; height: 1.5em; }

.pns-shell :focus-visible {
	outline: 3px solid var(--pns-ring);
	outline-offset: 2px;
	border-radius: var(--pns-r-sm);
}

.pns-money {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* ── Botones ─────────────────────────────────────────────────── */
.pns-shell .pns-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pns-s2);
	min-height: 48px;
	padding: 0 var(--pns-s6);
	border: 1.5px solid transparent;
	border-radius: var(--pns-r-md);
	font: inherit;
	font-size: .95rem;
	font-weight: 650;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	touch-action: manipulation;
	transition: background var(--pns-fast) var(--pns-ease),
		border-color var(--pns-fast) var(--pns-ease),
		color var(--pns-fast) var(--pns-ease),
		box-shadow var(--pns-base) var(--pns-ease),
		transform var(--pns-fast) var(--pns-ease);
}
.pns-shell .pns-btn:disabled { opacity: .5; cursor: not-allowed; }
.pns-shell .pns-btn:not(:disabled):active { transform: scale(.985); }

/* El botón principal lleva el degradado del logo. El brillo del hover se
   aplica con un filtro y no cambiando el fondo: así el degradado no se
   "rompe" a medio recorrido. */
.pns-shell .pns-btn--primary {
	background: var(--pns-grad);
	color: #fff;
	box-shadow: var(--pns-sh-brand);
}
.pns-shell .pns-btn--primary:not(:disabled):hover {
	filter: brightness(1.08);
	box-shadow: 0 14px 34px color-mix(in srgb, var(--pns-primary) 34%, transparent);
}
.pns-shell .pns-btn--accent {
	background: var(--pns-accent);
	color: #04231D;
	box-shadow: 0 10px 28px color-mix(in srgb, var(--pns-accent) 34%, transparent);
}
.pns-shell .pns-btn--accent:not(:disabled):hover { filter: brightness(1.06); }

.pns-shell .pns-btn--ghost {
	background: transparent;
	color: var(--pns-ink-2);
	border-color: var(--pns-line-strong);
}
.pns-shell .pns-btn--ghost:not(:disabled):hover { background: var(--pns-surface-2); color: var(--pns-ink); }

.pns-shell .pns-btn--block { width: 100%; }
.pns-shell .pns-btn--sm { min-height: 40px; padding: 0 var(--pns-s4); font-size: .875rem; }

.pns-shell .pns-btn.is-busy { pointer-events: none; }
.pns-shell .pns-btn.is-busy > span { opacity: .55; }

/* ═══════════════════════════════════════════════════════════════
   3. Cabecera
   ═══════════════════════════════════════════════════════════════ */
.pns-quoter {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--pns-s8) var(--pns-s4) max(var(--pns-s16), 118px);
	background: var(--pns-bg);
	border-radius: var(--pns-r-xl);
}

.pns-quoter.is-nina-updating {
	animation: pns-nina-sync 650ms cubic-bezier(.22, 1, .36, 1);
}

@keyframes pns-nina-sync {
	0% { box-shadow: 0 0 0 0 rgba(18, 198, 178, .45); }
	55% { box-shadow: 0 0 0 10px rgba(18, 198, 178, .12); }
	100% { box-shadow: 0 0 0 18px rgba(18, 198, 178, 0); }
}

.pns-hero { text-align: center; max-width: 720px; margin: 0 auto var(--pns-s8); }

/* Alto fijo reservado desde el primer pintado: el logo no puede empujar el
   titular hacia abajo cuando termina de cargar. */
.pns-hero__logo {
	display: block;
	height: 56px;
	width: auto;
	max-width: 240px;
	margin: 0 auto var(--pns-s5);
	object-fit: contain;
}
@media (min-width: 640px) { .pns-hero__logo { height: 68px; } }

.pns-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--pns-s2);
	padding: 7px 15px;
	margin-bottom: var(--pns-s4);
	border-radius: 999px;
	background: var(--pns-tint);
	color: var(--pns-primary);
	font-size: .8rem;
	font-weight: 650;
}
@media (prefers-color-scheme: dark) {
	.pns-shell.pns-theme-auto .pns-hero__eyebrow { color: #fff; }
}
.pns-shell.pns-theme-oscuro .pns-hero__eyebrow { color: #fff; }

.pns-hero__title {
	font-size: clamp(1.65rem, 4.6vw, 2.6rem);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.028em;
	color: var(--pns-ink);
	text-wrap: balance;
}
.pns-hero__subtitle {
	margin-top: var(--pns-s3);
	font-size: clamp(.95rem, 2.2vw, 1.08rem);
	color: var(--pns-ink-2);
	max-width: 56ch;
	margin-inline: auto;
	text-wrap: pretty;
}

.pns-trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--pns-s2) var(--pns-s5);
	margin-top: var(--pns-s5);
}
.pns-trust li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: .85rem;
	color: var(--pns-muted);
}
.pns-trust .pns-i { color: var(--pns-success); }

/* ═══════════════════════════════════════════════════════════════
   4. Pasos
   ═══════════════════════════════════════════════════════════════ */
.pns-steps { margin-bottom: var(--pns-s6); }

.pns-steps__list {
	display: flex;
	gap: var(--pns-s1);
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: var(--pns-s3);
	scroll-snap-type: x proximity;
}
.pns-steps__list::-webkit-scrollbar { display: none; }

.pns-steps__item {
	display: inline-flex;
	align-items: center;
	gap: var(--pns-s2);
	flex: 0 0 auto;
	padding: 8px 14px 8px 8px;
	border-radius: 999px;
	color: var(--pns-muted);
	font-size: .84rem;
	font-weight: 550;
	scroll-snap-align: start;
	transition: color var(--pns-fast) var(--pns-ease), background var(--pns-fast) var(--pns-ease);
}
.pns-steps__item.is-current { background: var(--pns-tint); color: var(--pns-ink); font-weight: 700; }
.pns-steps__item.is-done { color: var(--pns-success); }

.pns-steps__dot {
	display: grid;
	place-items: center;
	width: 26px; height: 26px;
	border-radius: 50%;
	border: 1.5px solid var(--pns-line-strong);
	font-size: .78rem;
	font-weight: 700;
	transition: all var(--pns-fast) var(--pns-ease);
}
.pns-steps__item.is-current .pns-steps__dot { background: var(--pns-primary); border-color: var(--pns-primary); color: #fff; }
.pns-steps__item.is-done .pns-steps__dot { background: var(--pns-success); border-color: var(--pns-success); color: #fff; }

.pns-steps__track {
	height: 5px;
	border-radius: 999px;
	background: var(--pns-line);
	overflow: hidden;
}
.pns-steps__fill {
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--pns-primary), var(--pns-alt));
	transition: width 420ms var(--pns-ease);
}
.pns-steps__status {
	margin-top: var(--pns-s2);
	font-size: .82rem;
	color: var(--pns-muted);
	min-height: 1.3em;
}

/* ═══════════════════════════════════════════════════════════════
   5. Distribución
   ═══════════════════════════════════════════════════════════════ */
.pns-layout { display: grid; gap: var(--pns-s6); }

@container (min-width: 900px) {
	.pns-layout { grid-template-columns: minmax(0, 1fr) 336px; align-items: start; }
}
/* Respaldo para navegadores sin container queries. */
@supports not (container-type: inline-size) {
	@media (min-width: 960px) {
		.pns-layout { grid-template-columns: minmax(0, 1fr) 336px; align-items: start; }
	}
}

.pns-main {
	min-width: 0;
	container: pns-main / inline-size;
}

/* ═══════════════════════════════════════════════════════════════
   6. Paneles de paso
   ═══════════════════════════════════════════════════════════════ */
.pns-panel {
	background: var(--pns-surface);
	border: 1px solid var(--pns-line);
	border-radius: var(--pns-r-lg);
	padding: var(--pns-s6);
	box-shadow: var(--pns-sh-sm);
	animation: pns-enter 300ms var(--pns-ease) both;
}
@media (min-width: 640px) { .pns-panel { padding: var(--pns-s8); } }

@keyframes pns-enter {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

.pns-panel__head { margin-bottom: var(--pns-s6); }
.pns-panel__kicker {
	display: block;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--pns-primary);
	margin-bottom: 6px;
}
@media (prefers-color-scheme: dark) {
	.pns-shell.pns-theme-auto .pns-panel__kicker { color: var(--pns-alt); }
}
.pns-shell.pns-theme-oscuro .pns-panel__kicker { color: var(--pns-alt); }

.pns-panel__title {
	font-size: clamp(1.25rem, 3vw, 1.6rem);
	font-weight: 750;
	letter-spacing: -.02em;
	line-height: 1.2;
	text-wrap: balance;
}
.pns-panel__lead {
	margin-top: var(--pns-s2);
	color: var(--pns-ink-2);
	font-size: .96rem;
	max-width: 62ch;
	text-wrap: pretty;
}

.pns-panel__actions {
	display: flex;
	gap: var(--pns-s3);
	margin-top: var(--pns-s8);
	padding-top: var(--pns-s5);
	border-top: 1px solid var(--pns-line);
}
.pns-panel__actions .pns-btn--primary,
.pns-panel__actions .pns-btn--accent { margin-inline-start: auto; }

/* ═══════════════════════════════════════════════════════════════
   7. Tarjetas seleccionables
   ═══════════════════════════════════════════════════════════════ */
.pns-grid { display: grid; gap: var(--pns-s4); }
.pns-grid--2 { grid-template-columns: 1fr; }
.pns-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 620px) {
	.pns-grid--2, .pns-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
	.pns-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* La decisión de columnas se basa también en el ancho REAL del panel central,
   no solo en la ventana. Es importante cuando el resumen ocupa la derecha. */
@container pns-main (max-width: 619px) {
	.pns-grid--2,
	.pns-grid--3 { grid-template-columns: 1fr; }
}
@container pns-main (min-width: 620px) {
	.pns-grid--2,
	.pns-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container pns-main (min-width: 960px) {
	.pns-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pns-shell .pns-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--pns-s3);
	width: 100%;
	padding: var(--pns-s5);
	text-align: start;
	background: var(--pns-surface);
	border: 1.5px solid var(--pns-line);
	border-radius: var(--pns-r-md);
	color: inherit;
	font: inherit;
	cursor: pointer;
	touch-action: manipulation;
	min-width: 0;
	height: 100%;
	overflow-wrap: anywhere;
	word-break: normal;
	white-space: normal;
	transition: border-color var(--pns-fast) var(--pns-ease),
		box-shadow var(--pns-base) var(--pns-ease),
		background var(--pns-fast) var(--pns-ease),
		transform var(--pns-fast) var(--pns-ease);
}
.pns-card:hover { border-color: var(--pns-line-strong); box-shadow: var(--pns-sh-md); }
.pns-card:active { transform: scale(.99); }

.pns-card.is-selected {
	border-color: var(--pns-primary);
	background: var(--pns-tint);
	box-shadow: 0 0 0 1.5px var(--pns-primary), var(--pns-sh-md);
}

/* La marca de selección no es solo color: hay icono, como exige el criterio
   de no depender del color para transmitir información. */
.pns-card__check {
	position: absolute;
	inset-block-start: var(--pns-s4);
	inset-inline-end: var(--pns-s4);
	display: grid;
	place-items: center;
	width: 24px; height: 24px;
	border-radius: 50%;
	border: 1.5px solid var(--pns-line-strong);
	background: var(--pns-surface);
	color: transparent;
	transition: all var(--pns-fast) var(--pns-ease);
}
.pns-card.is-selected .pns-card__check {
	background: var(--pns-primary);
	border-color: var(--pns-primary);
	color: #fff;
}
.pns-card__check .pns-i { width: 14px; height: 14px; stroke-width: 3; }

.pns-card__icon {
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	border-radius: var(--pns-r-sm);
	background: var(--pns-tint-strong);
	color: var(--pns-primary);
	transition: background var(--pns-fast) var(--pns-ease), color var(--pns-fast) var(--pns-ease);
}
/* Al seleccionar, el icono se llena con el degradado del logo: la marca
   aparece justo donde el cliente acaba de decidir. */
.pns-card.is-selected .pns-card__icon { background: var(--pns-grad); color: #fff; }
@media (prefers-color-scheme: dark) {
	.pns-shell.pns-theme-auto .pns-card__icon { color: #fff; }
}
.pns-shell.pns-theme-oscuro .pns-card__icon { color: #fff; }
.pns-card__icon .pns-i { width: 22px; height: 22px; }

.pns-card > * { min-width: 0; max-width: 100%; }
.pns-card__title {
	display: block;
	width: 100%;
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.28;
	padding-inline-end: 30px;
	white-space: normal;
	overflow-wrap: anywhere;
}
.pns-card__text,
.pns-card__outcome {
	display: block;
	width: 100%;
	font-size: .875rem;
	color: var(--pns-ink-2);
	line-height: 1.5;
	text-wrap: pretty;
	white-space: normal;
	overflow-wrap: anywhere;
}

.pns-card__price {
	margin-top: auto;
	display: flex;
	align-items: baseline;
	gap: var(--pns-s2);
	font-size: 1.05rem;
	font-weight: 750;
	color: var(--pns-ink);
}
.pns-card__price small { font-size: .78rem; font-weight: 550; color: var(--pns-muted); }

/* ── Tarjeta de plan ─────────────────────────────────────────── */
.pns-plan { padding-top: var(--pns-s6); }
.pns-plan--featured { border-color: var(--pns-primary); }

.pns-plan__badge {
	position: absolute;
	inset-block-start: -11px;
	inset-inline-start: var(--pns-s5);
	padding: 4px 12px;
	border-radius: 999px;
	/* Degradado de marca: sobre el turquesa plano el texto blanco no llegaría
	   a la relación de contraste mínima. */
	background: var(--pns-grad);
	color: #fff;
	font-size: .72rem;
	font-weight: 750;
	letter-spacing: .02em;
	box-shadow: var(--pns-sh-sm);
}

.pns-plan__prices { display: flex; align-items: baseline; gap: var(--pns-s2); flex-wrap: wrap; }
.pns-plan__now { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.pns-plan__was {
	font-size: .95rem;
	color: var(--pns-muted);
	text-decoration: line-through;
	text-decoration-thickness: 1.5px;
}
.pns-plan__save {
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--pns-success-soft);
	color: var(--pns-success);
	font-size: .74rem;
	font-weight: 700;
}

.pns-plan__benefits { display: grid; gap: 7px; margin-top: var(--pns-s1); }
.pns-plan__benefits li {
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: var(--pns-s2);
	font-size: .86rem;
	color: var(--pns-ink-2);
	line-height: 1.45;
}
.pns-plan__benefits .pns-i { color: var(--pns-success); width: 16px; height: 16px; margin-top: .18em; }

.pns-plan__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pns-s2);
	padding-top: var(--pns-s3);
	border-top: 1px solid var(--pns-line);
	font-size: .8rem;
	color: var(--pns-muted);
}
.pns-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--pns-surface-2);
	border: 1px solid var(--pns-line);
	font-size: .78rem;
	color: var(--pns-ink-2);
}
.pns-chip .pns-i { width: 13px; height: 13px; }

/* ── Etiqueta "por cotizar" ──────────────────────────────────── */
.pns-flag {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 5px;
	max-width: 100%;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: .74rem;
	font-weight: 650;
	line-height: 1.35;
	white-space: normal;
}
.pns-flag--review { background: var(--pns-warn-soft); color: var(--pns-warn); }
.pns-flag--free { background: var(--pns-success-soft); color: var(--pns-success); }

/* ═══════════════════════════════════════════════════════════════
   8. Contador de secciones
   ═══════════════════════════════════════════════════════════════ */
.pns-stepper {
	display: flex;
	align-items: center;
	gap: var(--pns-s4);
	padding: var(--pns-s4);
	background: var(--pns-surface-2);
	border: 1px solid var(--pns-line);
	border-radius: var(--pns-r-md);
}
.pns-shell .pns-stepper__btn {
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	border-radius: var(--pns-r-sm);
	border: 1.5px solid var(--pns-line-strong);
	background: var(--pns-surface);
	color: var(--pns-ink);
	cursor: pointer;
	touch-action: manipulation;
	transition: all var(--pns-fast) var(--pns-ease);
}
.pns-stepper__btn:hover:not(:disabled) { border-color: var(--pns-primary); color: var(--pns-primary); }
.pns-stepper__btn:disabled { opacity: .4; cursor: not-allowed; }
.pns-stepper__value {
	min-width: 3ch;
	text-align: center;
	font-size: 1.5rem;
	font-weight: 750;
	font-variant-numeric: tabular-nums;
}
.pns-stepper__meta { font-size: .85rem; color: var(--pns-muted); }

/* ── Funcionalidades personalizadas ─────────────────────────────
   Cada necesidad se registra como ítem independiente. Así el cliente puede
   agregar varias con “+” y el equipo recibe un alcance legible, no un párrafo. */
.pns-custom-request {
	display: grid;
	gap: var(--pns-s3);
	margin-top: var(--pns-s7, 28px);
	padding: var(--pns-s5);
	border: 1px dashed var(--pns-line-strong);
	border-radius: var(--pns-r-md);
	background: var(--pns-grad-soft);
}
.pns-custom-request__head {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	align-items: start;
	gap: var(--pns-s3);
	margin-bottom: var(--pns-s1);
}
.pns-custom-request__head .pns-card__icon { width: 44px; height: 44px; }
.pns-custom-request__head .pns-help { display: block; margin-top: 4px; line-height: 1.45; }
.pns-custom-request__composer {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--pns-s2);
	align-items: stretch;
}
.pns-custom-request__add {
	min-width: 124px;
	padding-inline: var(--pns-s4);
}
.pns-custom-request__add > span:first-child {
	font-size: 1.3rem;
	font-weight: 800;
	line-height: 1;
}
.pns-custom-list {
	display: grid;
	gap: var(--pns-s2);
	margin-top: var(--pns-s2);
}
.pns-custom-list__empty {
	padding: 11px 13px;
	border: 1px solid var(--pns-line);
	border-radius: var(--pns-r-sm);
	background: color-mix(in srgb, var(--pns-surface) 72%, transparent);
	color: var(--pns-muted);
	font-size: .82rem;
}
.pns-custom-item {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr) auto 34px;
	align-items: center;
	gap: var(--pns-s2);
	padding: 10px;
	border: 1px solid var(--pns-line);
	border-radius: var(--pns-r-sm);
	background: var(--pns-surface);
	box-shadow: var(--pns-sh-sm);
}
.pns-custom-item__number {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--pns-tint-strong);
	color: var(--pns-primary);
	font-size: .78rem;
	font-weight: 800;
}
.pns-custom-item__text {
	min-width: 0;
	color: var(--pns-ink);
	font-size: .88rem;
	line-height: 1.4;
	overflow-wrap: anywhere;
}
.pns-shell .pns-custom-item__remove {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--pns-line);
	border-radius: 50%;
	background: var(--pns-surface-2);
	color: var(--pns-muted);
	cursor: pointer;
}
.pns-custom-item__remove:hover,
.pns-custom-item__remove:focus-visible {
	border-color: var(--pns-danger);
	color: var(--pns-danger);
}
.pns-custom-item__remove .pns-i { width: 16px; height: 16px; }
@media (max-width: 560px) {
	.pns-custom-request { padding: var(--pns-s4); }
	.pns-custom-request__composer { grid-template-columns: 1fr; }
	.pns-custom-request__add { width: 100%; }
	.pns-custom-item { grid-template-columns: 28px minmax(0, 1fr) 34px; }
	.pns-custom-item .pns-flag { grid-column: 2; }
	.pns-custom-item__remove { grid-column: 3; grid-row: 1 / span 2; }
}

/* ═══════════════════════════════════════════════════════════════
   9. Formulario
   ═══════════════════════════════════════════════════════════════ */
.pns-fields { display: grid; gap: var(--pns-s5); }
@media (min-width: 640px) { .pns-fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pns-field { display: grid; gap: 6px; }
.pns-field--full { grid-column: 1 / -1; }

.pns-label {
	font-size: .875rem;
	font-weight: 650;
	color: var(--pns-ink);
}
.pns-label .pns-req { color: var(--pns-danger); margin-inline-start: 2px; }

.pns-input,
.pns-textarea {
	width: 100%;
	min-height: 50px;
	padding: 13px 15px;
	background: var(--pns-surface);
	border: 1.5px solid var(--pns-line-strong);
	border-radius: var(--pns-r-sm);
	/* 16px evita el zoom automático de iOS al enfocar. */
	font: inherit;
	font-size: 16px;
	color: var(--pns-ink);
	transition: border-color var(--pns-fast) var(--pns-ease), box-shadow var(--pns-fast) var(--pns-ease);
}
.pns-textarea { min-height: 108px; resize: vertical; line-height: 1.55; }
.pns-input::placeholder, .pns-textarea::placeholder { color: var(--pns-muted); opacity: .8; }
.pns-input:focus, .pns-textarea:focus {
	outline: none;
	border-color: var(--pns-primary);
	box-shadow: 0 0 0 3px var(--pns-ring);
}
.pns-field.has-error .pns-input,
.pns-field.has-error .pns-textarea { border-color: var(--pns-danger); }

.pns-help { font-size: .8rem; color: var(--pns-muted); }
.pns-error {
	display: none;
	align-items: center;
	gap: 5px;
	font-size: .82rem;
	font-weight: 550;
	color: var(--pns-danger);
}
.pns-field.has-error .pns-error { display: flex; }

/* ── Consentimiento ──────────────────────────────────────────── */
.pns-consent {
	display: grid;
	grid-template-columns: 24px 1fr;
	gap: var(--pns-s3);
	align-items: start;
	padding: var(--pns-s4);
	background: var(--pns-surface-2);
	border: 1px solid var(--pns-line);
	border-radius: var(--pns-r-md);
	cursor: pointer;
}
.pns-consent input {
	width: 22px; height: 22px;
	margin: 0;
	accent-color: var(--pns-primary);
	cursor: pointer;
}
.pns-consent__text { font-size: .84rem; color: var(--pns-ink-2); line-height: 1.5; }

/* ── Bono ────────────────────────────────────────────────────── */
.pns-bonus { display: flex; gap: var(--pns-s2); flex-wrap: wrap; }
.pns-bonus .pns-input { flex: 1 1 190px; text-transform: uppercase; letter-spacing: .06em; }
.pns-bonus__result { margin-top: var(--pns-s2); font-size: .85rem; font-weight: 600; }
.pns-bonus__result.is-ok { color: var(--pns-success); }
.pns-bonus__result.is-bad { color: var(--pns-danger); }

/* Trampa para bots: invisible para personas, presente en el DOM. */
.pns-hp {
	position: absolute !important;
	left: -9999px;
	opacity: 0;
	pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   10. Resumen lateral
   ═══════════════════════════════════════════════════════════════ */
.pns-summary { position: relative; }
@container (min-width: 900px) {
	.pns-summary__inner { position: sticky; top: var(--pns-s5); }
}
@supports not (container-type: inline-size) {
	@media (min-width: 960px) { .pns-summary__inner { position: sticky; top: var(--pns-s5); } }
}

.pns-summary__inner {
	background: var(--pns-surface);
	border: 1px solid var(--pns-line);
	border-radius: var(--pns-r-lg);
	box-shadow: var(--pns-sh-md);
	overflow: hidden;
}

.pns-summary__head {
	padding: var(--pns-s5) var(--pns-s5) var(--pns-s3);
	border-bottom: 1px solid var(--pns-line);
}
.pns-summary__eyebrow {
	display: block;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--pns-muted);
}
.pns-summary__plan { display: block; margin-top: 3px; font-size: 1.05rem; font-weight: 750; }

.pns-summary__amount {
	position: relative;
	padding: var(--pns-s5);
	background: var(--pns-surface);
}
/* El velo de marca va en una capa aparte para no teñir el texto del total. */
.pns-summary__amount::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--pns-grad-soft);
	pointer-events: none;
}
.pns-summary__amount > * { position: relative; }
.pns-summary__label { font-size: .8rem; color: var(--pns-muted); }
.pns-summary__total {
	display: block;
	margin-top: 2px;
	font-size: clamp(1.9rem, 5vw, 2.35rem);
	font-weight: 800;
	letter-spacing: -.035em;
	line-height: 1.05;
	color: var(--pns-primary);
	font-variant-numeric: tabular-nums;
}
@media (prefers-color-scheme: dark) {
	.pns-shell.pns-theme-auto .pns-summary__total { color: #fff; }
}
.pns-shell.pns-theme-oscuro .pns-summary__total { color: #fff; }
.pns-summary__hint { display: block; margin-top: 6px; font-size: .82rem; color: var(--pns-ink-2); }

.pns-summary__lines {
	padding: var(--pns-s2) var(--pns-s5);
	max-height: 300px;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.pns-sumline {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--pns-s3);
	padding: 8px 0;
	font-size: .85rem;
	border-bottom: 1px solid var(--pns-line);
}
.pns-sumline:last-child { border-bottom: 0; }
.pns-sumline__name { color: var(--pns-ink-2); min-width: 0; overflow-wrap: anywhere; }
.pns-sumline__value { font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pns-sumline--discount .pns-sumline__value { color: var(--pns-success); }
.pns-sumline--strong { font-weight: 700; }
.pns-sumline--strong .pns-sumline__name { color: var(--pns-ink); }

.pns-summary__foot { padding: var(--pns-s4) var(--pns-s5) var(--pns-s5); border-top: 1px solid var(--pns-line); }
.pns-summary__note { margin-top: var(--pns-s3); font-size: .78rem; color: var(--pns-muted); line-height: 1.45; }
.pns-summary.is-empty .pns-summary__amount {
	background: linear-gradient(145deg, rgba(20,30,156,.08), rgba(18,191,160,.09));
}
.pns-summary.is-empty .pns-summary__total { font-size: clamp(2rem, 4vw, 3.2rem); opacity: .72; }
.pns-ai-updated .pns-card.is-selected,
.pns-ai-updated .pns-summary__inner {
	animation: pns-ai-confirm .9s ease both;
}
.pns-needs-choice .pns-panel { animation: pns-choice-nudge .42s ease; }
@keyframes pns-ai-confirm {
	0% { box-shadow: 0 0 0 0 rgba(18,191,160,.55); }
	100% { box-shadow: 0 0 0 14px rgba(18,191,160,0); }
}
@keyframes pns-choice-nudge {
	25% { transform: translateX(-4px); }
	50% { transform: translateX(4px); }
	75% { transform: translateX(-2px); }
}

/* ═══════════════════════════════════════════════════════════════
   11. Barra fija móvil
   ═══════════════════════════════════════════════════════════════ */
.pns-dock {
	position: fixed;
	left: 50%;
	bottom: max(14px, env(safe-area-inset-bottom));
	z-index: 42;
	display: grid;
	grid-template-columns: repeat(4, minmax(68px, 1fr)) minmax(108px, 1.25fr);
	align-items: center;
	gap: 3px;
	width: min(760px, calc(100% - 28px));
	/* Respeta la barra de gestos del teléfono. */
	padding: 7px;
	background: color-mix(in srgb, var(--pns-surface) 92%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid var(--pns-line);
	border-radius: 20px;
	box-shadow: 0 16px 44px rgba(11,16,32,.18), 0 3px 12px rgba(20,30,156,.09);
	transform: translate(-50%, calc(100% + 32px));
	transition: transform var(--pns-base) var(--pns-ease);
}
.pns-dock.is-visible { transform: translate(-50%, 0); }
.pns-dock__item {
	position: relative;
	display: grid;
	place-items: center;
	align-content: center;
	gap: 4px;
	min-width: 0;
	min-height: 58px;
	margin: 0;
	padding: 7px 5px;
	border: 0;
	border-radius: 14px;
	background: transparent;
	color: var(--pns-muted);
	font: inherit;
	font-size: .68rem;
	font-weight: 750;
	line-height: 1;
	cursor: pointer;
	box-shadow: none;
	transition: background-color var(--pns-fast) ease, color var(--pns-fast) ease, transform var(--pns-fast) ease;
}
.pns-dock__item:hover,
.pns-dock__item:focus-visible { background: var(--pns-surface-2); color: var(--pns-primary); outline: none; }
.pns-dock__item:active { transform: translateY(1px); }
.pns-dock__item .pns-i { width: 23px; height: 23px; }
.pns-dock__item > span:not(.pns-sr) { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
.pns-dock__item > i { position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: transparent; }
.pns-dock__item.is-current { background: var(--pns-tint); color: var(--pns-primary); }
.pns-dock__item.is-current > i { background: var(--pns-primary); box-shadow: 0 0 0 3px var(--pns-tint-strong); }
.pns-dock__item--total {
	grid-template-columns: 25px minmax(0, 1fr);
	background: var(--pns-grad);
	color: #fff;
	box-shadow: var(--pns-sh-brand);
}
.pns-dock__item--total:hover,
.pns-dock__item--total:focus-visible { background: var(--pns-grad); color: #fff; filter: brightness(1.04); }
.pns-dock__item--total.is-final { box-shadow: 0 10px 30px color-mix(in srgb, var(--pns-accent) 34%, transparent); }
.pns-dock__item--total:disabled { cursor: default; opacity: .66; }
.pns-dock__total { min-width: 0; overflow: hidden; color: #fff; font-size: clamp(.86rem, 2.5vw, 1.12rem); font-weight: 850; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (prefers-color-scheme: dark) {
	.pns-shell.pns-theme-auto .pns-dock__total { color: #fff; }
}
.pns-shell.pns-theme-oscuro .pns-dock__total { color: #fff; }

@media (max-width: 620px) {
	.pns-dock {
		bottom: 0;
		width: 100%;
		padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
		border-width: 1px 0 0;
		border-radius: 18px 18px 0 0;
		grid-template-columns: repeat(4, minmax(54px, 1fr)) minmax(82px, 1.15fr);
	}
	.pns-dock__item { min-height: 55px; padding-inline: 3px; font-size: .63rem; }
	.pns-dock__item .pns-i { width: 21px; height: 21px; }
	.pns-dock__item--total { grid-template-columns: 1fr; gap: 2px; }
	.pns-dock__item--total .pns-i { width: 22px; height: 22px; }
	.pns-dock__total { font-size: .78rem; }
}

/* ═══════════════════════════════════════════════════════════════
   12. Avisos, objeciones y estados
   ═══════════════════════════════════════════════════════════════ */
.pns-note {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: var(--pns-s3);
	padding: var(--pns-s4);
	border-radius: var(--pns-r-md);
	font-size: .87rem;
	line-height: 1.5;
}
.pns-note--info { background: var(--pns-tint); color: var(--pns-ink-2); }
.pns-note--warn { background: var(--pns-warn-soft); color: var(--pns-warn); }
.pns-note--ok { background: var(--pns-success-soft); color: var(--pns-success); }
.pns-note .pns-i { margin-top: .12em; }

.pns-faq { margin-top: var(--pns-s6); display: grid; gap: var(--pns-s2); }
.pns-faq__item {
	border: 1px solid var(--pns-line);
	border-radius: var(--pns-r-sm);
	background: var(--pns-surface-2);
	overflow: hidden;
}
.pns-faq__item summary {
	padding: 13px var(--pns-s4);
	font-size: .88rem;
	font-weight: 620;
	cursor: pointer;
	list-style: none;
	min-height: 46px;
	display: flex;
	align-items: center;
	gap: var(--pns-s2);
}
.pns-faq__item summary::-webkit-details-marker { display: none; }
.pns-faq__item summary::after {
	content: "";
	margin-inline-start: auto;
	width: 9px; height: 9px;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--pns-fast) var(--pns-ease);
	opacity: .6;
}
.pns-faq__item[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.pns-faq__body { padding: 0 var(--pns-s4) var(--pns-s4); font-size: .86rem; color: var(--pns-ink-2); line-height: 1.6; }

.pns-empty {
	padding: var(--pns-s12) var(--pns-s5);
	text-align: center;
	color: var(--pns-muted);
	background: var(--pns-surface);
	border: 1px dashed var(--pns-line-strong);
	border-radius: var(--pns-r-lg);
}

/* ── Esqueleto de carga ──────────────────────────────────────── */
.pns-skeleton { display: grid; gap: var(--pns-s5); }
.pns-skeleton__grid { display: grid; gap: var(--pns-s4); grid-template-columns: 1fr; }
@media (min-width: 620px) { .pns-skeleton__grid { grid-template-columns: repeat(3, 1fr); } }
.pns-skeleton__bar, .pns-skeleton__card {
	border-radius: var(--pns-r-md);
	background: linear-gradient(90deg, var(--pns-n100) 25%, var(--pns-n200) 50%, var(--pns-n100) 75%);
	background-size: 220% 100%;
	animation: pns-shimmer 1.5s linear infinite;
}
.pns-skeleton__bar { height: 26px; }
.pns-skeleton__card { height: 220px; }
@keyframes pns-shimmer { to { background-position: -220% 0; } }

/* ── Pantalla de éxito ───────────────────────────────────────── */
.pns-done { text-align: center; padding: var(--pns-s6) 0; }
.pns-done__seal {
	display: grid;
	place-items: center;
	width: 76px; height: 76px;
	margin: 0 auto var(--pns-s5);
	border-radius: 50%;
	background: var(--pns-success-soft);
	color: var(--pns-success);
	animation: pns-pop 460ms var(--pns-ease) both;
}
.pns-done__seal .pns-i { width: 38px; height: 38px; stroke-width: 2.4; }
@keyframes pns-pop {
	0% { transform: scale(.5); opacity: 0; }
	62% { transform: scale(1.07); opacity: 1; }
	100% { transform: scale(1); }
}
.pns-done__title { font-size: clamp(1.4rem, 4vw, 1.9rem); font-weight: 780; letter-spacing: -.02em; }
.pns-done__text { margin-top: var(--pns-s3); color: var(--pns-ink-2); max-width: 48ch; margin-inline: auto; }
.pns-done__actions { display: flex; flex-wrap: wrap; gap: var(--pns-s3); justify-content: center; margin-top: var(--pns-s6); }
.pns-done__ref {
	display: inline-block;
	margin-top: var(--pns-s5);
	padding: 7px 15px;
	border-radius: 999px;
	background: var(--pns-surface-2);
	border: 1px solid var(--pns-line);
	font-size: .82rem;
	color: var(--pns-muted);
	font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════
   13. Vista pública de una cotización emitida
   ═══════════════════════════════════════════════════════════════ */
.pns-doc { max-width: 880px; margin: 0 auto; padding: var(--pns-s6) var(--pns-s4) var(--pns-s12); }
.pns-doc__logo { display: block; height: 52px; width: auto; max-width: 200px; margin-bottom: var(--pns-s5); object-fit: contain; }
.pns-doc__head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pns-s4);
	align-items: flex-end;
	justify-content: space-between;
	padding-bottom: var(--pns-s5);
	border-bottom: 0;
	position: relative;
}
/* La regla inferior lleva el degradado de la marca, igual que en el PDF. */
.pns-doc__head::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 3px;
	border-radius: 999px;
	background: var(--pns-grad);
}
.pns-doc__total { font-size: clamp(1.8rem, 5vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; color: var(--pns-primary); font-variant-numeric: tabular-nums; }
.pns-doc__table { width: 100%; margin-top: var(--pns-s6); border-collapse: collapse; font-size: .9rem; }
.pns-doc__table th {
	text-align: start;
	padding: 10px 8px;
	font-size: .74rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--pns-muted);
	border-bottom: 1px solid var(--pns-line);
}
.pns-doc__table td { padding: 12px 8px; border-bottom: 1px solid var(--pns-line); vertical-align: top; }
.pns-doc__table td:last-child, .pns-doc__table th:last-child { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pns-doc__wrap { overflow-x: auto; }

/* ═══════════════════════════════════════════════════════════════
   14. Preferencia de movimiento reducido
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
	.pns-shell *,
	.pns-shell *::before,
	.pns-shell *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ═══════════════════════════════════════════════════════════════
   15. Impresión
   ═══════════════════════════════════════════════════════════════ */
@media print {
	.pns-steps, .pns-dock, .pns-summary__foot, .pns-panel__actions { display: none !important; }
	.pns-shell { --pns-bg: #fff; --pns-surface: #fff; }
	.pns-panel, .pns-summary__inner { box-shadow: none; border-color: #ccc; }
}

/* Cierre dirigido por voz: NINA recopila y valida los datos; la interfaz solo
   muestra el proceso y su resultado, nunca un formulario obligatorio. */
.pns-panel--voice-close { min-height: 520px; }
.pns-voice-checkout { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin: 8px 0 24px; }
.pns-voice-checkout > div { display: grid; align-content: start; gap: 6px; min-height: 150px; padding: 20px; border: 1px solid var(--pns-line); border-radius: 18px; background: var(--pns-surface); box-shadow: var(--pns-sh-sm); }
.pns-voice-checkout span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--pns-grad); color: #fff; font-weight: 850; }
.pns-voice-checkout strong { margin-top: 6px; color: var(--pns-primary); font-size: 1rem; }
.pns-voice-checkout small { color: var(--pns-muted); font-size: .8rem; line-height: 1.45; }
.pns-panel--voice-close .pns-panel__actions { justify-content: flex-end; margin-top: 22px; }
@media (max-width: 640px) {
	.pns-voice-checkout { grid-template-columns: 1fr; }
	.pns-voice-checkout > div { grid-template-columns: 42px 1fr; min-height: 0; align-items: center; }
	.pns-voice-checkout > div small { grid-column: 2; }
}