/*!
 * 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; }

/* 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;
}

/* ── 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-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-btn:disabled { opacity: .5; cursor: not-allowed; }
.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-btn--primary {
	background: var(--pns-grad);
	color: #fff;
	box-shadow: var(--pns-sh-brand);
}
.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-btn--accent {
	background: var(--pns-accent);
	color: #04231D;
	box-shadow: 0 10px 28px color-mix(in srgb, var(--pns-accent) 34%, transparent);
}
.pns-btn--accent:not(:disabled):hover { filter: brightness(1.06); }

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

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

.pns-btn.is-busy { pointer-events: none; }
.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; }

/* ═══════════════════════════════════════════════════════════════
   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)); }
}

.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;
	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__title { font-size: 1.02rem; font-weight: 700; line-height: 1.28; padding-inline-end: 30px; }
.pns-card__text { font-size: .875rem; color: var(--pns-ink-2); line-height: 1.5; text-wrap: pretty; }
.pns-card__outcome { font-size: .875rem; color: var(--pns-ink-2); line-height: 1.5; }

.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;
	gap: 5px;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: .74rem;
	font-weight: 650;
}
.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-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); }

/* ═══════════════════════════════════════════════════════════════
   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; }

/* ═══════════════════════════════════════════════════════════════
   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; }
}