/*!
 * Pymeinnova NINA Suite — Piel «NINA» (Material 3 expresivo)
 *
 * Esta hoja no reemplaza el cotizador: lo reviste. El sistema base ya expone
 * los colores, radios y sombras como tokens, así que la piel se limita a
 * redefinirlos y a corregir los pocos componentes cuya FORMA cambia (no solo
 * su color): la barra superior oscura, la tarjeta de resumen en vidrio, el
 * dock inferior con el total y el carril lateral de NINA.
 *
 * Se carga después de quoter/portal/platform/nina, y todo cuelga de
 * `.pns-skin-nina` para que apagar la piel en Ajustes devuelva el aspecto
 * anterior sin tocar una sola línea del sistema base.
 *
 * Referencia de color (Material 3 / paleta de marca):
 *   primary #000314 · primary-container #001a4d · secondary #006b5f
 *   secondary-container #76f4e0 · secondary-fixed #79f7e3
 *   background #f8f9ff · surface-container #e5eeff · outline-variant #c5c6d1
 *   on-surface #0b1c30 · on-surface-variant #44464f
 */

/* ═══════════════════════════════════════════════════════════════
   1. Tokens de la piel
   ═══════════════════════════════════════════════════════════════ */
.pns-skin-nina.pns-shell,
.pns-skin-nina .pns-shell {
	/* Marca. El azul casi negro es el del encabezado; el verde azulado es el
	   color de acción. El degradado entre ambos ES la identidad. */
	/* Muestreados del logotipo: la P va del azul del trazo bajo al turquesa
	   del remate. Son los mismos valores que trae el ajuste de marca. */
	--pns-primary: #141E9C;
	--pns-primary-deep: #0B1470;
	--pns-alt: #12BFA0;
	--pns-accent: #12BFA0;

	/* Contenedores tonales de Material 3. */
	/* Contenedores tonales derivados del turquesa de marca. El texto sobre
	   ellos se oscurece hasta cumplir 4.5:1 — el turquesa puro no lo cumple. */
	--pns-secondary-container: #C7F5EC;
	--pns-on-secondary-container: #05564A;
	--pns-secondary-fixed: #9DEEDD;
	--pns-on-secondary-fixed: #04302A;
	--pns-primary-fixed: #DDE3FF;

	--pns-grad: linear-gradient(135deg, #141E9C 0%, #12BFA0 100%);
	--pns-grad-soft: linear-gradient(135deg, rgba(18,191,160,.10), rgba(20,30,156,.06));

	/* Escala neutra azulada: el fondo nunca es gris puro. */
	--pns-n0: #ffffff;
	--pns-n50: #f8f9ff;
	--pns-n100: #eff4ff;
	--pns-n200: #e5eeff;
	--pns-n300: #c5c6d1;
	--pns-n500: #757780;
	--pns-n600: #44464f;
	--pns-n800: #213145;
	--pns-n900: #0b1c30;

	--pns-surface-high: #dce9ff;
	--pns-surface-highest: #d3e4fe;

	--pns-bg: #f8f9ff;
	--pns-surface: #ffffff;
	--pns-surface-2: #eff4ff;
	--pns-ink: #0b1c30;
	--pns-ink-2: #44464f;
	--pns-muted: #757780;
	--pns-line: #c5c6d1;
	--pns-line-strong: #b3b5c2;
	--pns-ring: rgba(20,30,156,.42);
	--pns-tint: #e5eeff;
	--pns-tint-strong: #dce9ff;

	--pns-success: #0E7C67;
	--pns-success-soft: #DFF7F1;
	--pns-warn: #8a5a00;
	--pns-warn-soft: #fdf1dc;
	--pns-danger: #ba1a1a;
	--pns-danger-soft: #ffdad6;

	/* Radios expresivos: las superficies grandes se redondean mucho más que
	   los controles. Es lo que separa esta piel de la anterior. */
	--pns-r-sm: 12px;
	--pns-r-md: 16px;
	--pns-r-lg: 24px;
	--pns-r-xl: 32px;

	--pns-sh-sm: 0 1px 2px rgba(0,26,77,.04), 0 1px 3px rgba(0,26,77,.03);
	--pns-sh-md: 0 4px 20px rgba(0,26,77,.05);
	--pns-sh-lg: 0 18px 46px rgba(0,26,77,.12), 0 4px 12px rgba(0,26,77,.05);
	--pns-sh-brand: 0 12px 30px rgba(20,30,156,.26);

	/* Vidrio: se repite en resumen, panel de NINA y barra flotante. */
	--pns-glass: rgba(255,255,255,.72);
	--pns-glass-line: rgba(255,255,255,.42);

	--pns-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--pns-font-display: "Montserrat", var(--pns-font);
}

/* Modo oscuro: se conserva el eje azul; el verde azulado se aclara para que
   siga leyéndose sobre superficies oscuras. */
@media (prefers-color-scheme: dark) {
	.pns-skin-nina.pns-shell.pns-theme-auto,
	.pns-skin-nina .pns-shell.pns-theme-auto {
		--pns-bg: #0a1220;
		--pns-surface: #101c2e;
		--pns-surface-2: #16243a;
		--pns-surface-high: #1d2f49;
		--pns-surface-highest: #24395a;
		--pns-ink: #eaf1ff;
		--pns-ink-2: #c3cee2;
		--pns-muted: #93a1ba;
		--pns-line: #2a3a54;
		--pns-line-strong: #3a4d6c;
		--pns-tint: #16243a;
		--pns-tint-strong: #1d2f49;
		--pns-alt: #4FD9C0;
		--pns-accent: #4FD9C0;
		--pns-secondary-container: #0A4A40;
		--pns-on-secondary-container: #9DEEDD;
		--pns-success: #4FD9C0;
		--pns-success-soft: #0d2b28;
		--pns-glass: rgba(16,28,46,.74);
		--pns-glass-line: rgba(157,238,221,.16);
	}
}


/* ═══════════════════════════════════════════════════════════════
   2. Tipografía: Montserrat titula, Inter narra
   ═══════════════════════════════════════════════════════════════ */
.pns-skin-nina .pns-hero__title,
.pns-skin-nina .pns-panel__title,
.pns-skin-nina .pns-card__title,
.pns-skin-nina .pns-plan__now,
.pns-skin-nina .pns-summary__total,
.pns-skin-nina .pns-summary__plan,
.pns-skin-nina .pns-done__title,
.pns-skin-nina .pns-doc__total,
.pns-skin-nina .pns-dock__total,
.pns-skin-nina .pns-btn--primary,
.pns-skin-nina .pns-platform__hero h1,
.pns-skin-nina .pns-platform__project-intro h1 {
	font-family: var(--pns-font-display);
	letter-spacing: -.01em;
}

.pns-skin-nina .pns-hero__title,
.pns-skin-nina .pns-platform__hero h1 {
	font-size: clamp(2rem, 5.2vw, 3rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.02em;
}

.pns-skin-nina .pns-panel__title { font-size: clamp(1.35rem, 3.4vw, 2rem); font-weight: 700; line-height: 1.2; }
.pns-skin-nina .pns-card__title { font-size: 1.06rem; font-weight: 600; line-height: 1.3; }
.pns-skin-nina .pns-hero__subtitle,
.pns-skin-nina .pns-panel__lead { font-size: 1.05rem; line-height: 1.6; }

/* Las etiquetas pequeñas van en versalitas espaciadas: es el gesto que más
   «Material 3» aporta y el que más barato sale. */
.pns-skin-nina .pns-panel__kicker,
.pns-skin-nina .pns-summary__eyebrow,
.pns-skin-nina .pns-hero__eyebrow,
.pns-skin-nina .pns-label {
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════
   3. Botones
   ═══════════════════════════════════════════════════════════════ */
.pns-skin-nina .pns-btn {
	min-height: 52px;
	border-radius: var(--pns-r-sm);
	font-weight: 650;
	letter-spacing: .01em;
}
.pns-skin-nina .pns-btn--primary {
	background: var(--pns-grad);
	color: #fff;
	border-color: transparent;
	box-shadow: var(--pns-sh-brand);
}
.pns-skin-nina .pns-btn--primary:not(:disabled):hover { transform: translateY(-1px); filter: brightness(1.06); }

/* El botón secundario del mockup es blanco con borde verde de 2px: se lee
   como acción real, no como enlace apagado. */
.pns-skin-nina .pns-btn--ghost {
	background: var(--pns-surface);
	color: var(--pns-alt);
	border: 2px solid var(--pns-alt);
	font-weight: 700;
}
.pns-skin-nina .pns-btn--ghost:not(:disabled):hover {
	background: var(--pns-secondary-container);
	color: var(--pns-on-secondary-container);
	border-color: var(--pns-alt);
}
.pns-skin-nina .pns-btn--accent {
	background: var(--pns-secondary-container);
	color: var(--pns-on-secondary-container);
	box-shadow: none;
}
.pns-skin-nina .pns-btn--block { border-radius: var(--pns-r-md); }

/* ═══════════════════════════════════════════════════════════════
   4. Cabecera del cotizador
   ═══════════════════════════════════════════════════════════════ */
.pns-skin-nina .pns-hero { max-width: 900px; }

.pns-skin-nina .pns-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border: 1px solid var(--pns-line);
	border-radius: 999px;
	background: var(--pns-surface-2);
	color: var(--pns-alt);
}
.pns-skin-nina .pns-hero__eyebrow .pns-i { color: var(--pns-alt); }

.pns-skin-nina .pns-trust {
	gap: 22px;
	margin-top: var(--pns-s8);
}
.pns-skin-nina .pns-trust li {
	color: var(--pns-alt);
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: .04em;
}
.pns-skin-nina .pns-trust .pns-i { color: var(--pns-alt); }

/* ═══════════════════════════════════════════════════════════════
   5. Pasos y progreso
   ═══════════════════════════════════════════════════════════════ */
.pns-skin-nina .pns-steps {
	padding: var(--pns-s6);
	border: 1px solid var(--pns-line);
	border-radius: var(--pns-r-lg);
	background: var(--pns-surface);
	box-shadow: var(--pns-sh-sm);
}
.pns-skin-nina .pns-steps__item {
	gap: 10px;
	padding: 4px 10px 4px 4px;
	border-radius: 999px;
	background: transparent;
	color: var(--pns-muted);
	font-weight: 500;
	opacity: .45;
}
.pns-skin-nina .pns-steps__item.is-current,
.pns-skin-nina .pns-steps__item.is-done { opacity: 1; }
.pns-skin-nina .pns-steps__item.is-current { background: transparent; color: var(--pns-primary); font-weight: 700; }

.pns-skin-nina .pns-steps__dot {
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: var(--pns-surface-2);
	color: var(--pns-ink-2);
	font-size: .9rem;
	font-weight: 700;
}
.pns-skin-nina .pns-steps__item.is-current .pns-steps__dot {
	background: var(--pns-primary-deep);
	color: #fff;
}
.pns-skin-nina .pns-steps__item.is-done .pns-steps__dot {
	background: var(--pns-secondary-container);
	color: var(--pns-on-secondary-container);
}

/* La barra segmentada del mockup: pista clara, relleno verde y un latido
   sobre el tramo activo para que se note que la sesión está viva. */
.pns-skin-nina .pns-steps__track {
	height: 6px;
	border-radius: 999px;
	background: var(--pns-line);
}
.pns-skin-nina .pns-steps__fill {
	position: relative;
	background: var(--pns-alt);
	border-radius: 999px;
	overflow: hidden;
}
.pns-skin-nina .pns-steps__fill::after {
	content: "";
	position: absolute;
	inset: 0 0 0 auto;
	width: 46px;
	background: rgba(255,255,255,.45);
	animation: pns-nina-breathe 2s ease-in-out infinite;
}
@keyframes pns-nina-breathe { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
	.pns-skin-nina .pns-steps__fill::after { animation: none; }
}
.pns-skin-nina .pns-steps__status { color: var(--pns-muted); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   6. Panel de preguntas
   ═══════════════════════════════════════════════════════════════ */
.pns-skin-nina .pns-panel {
	padding: clamp(var(--pns-s5), 3vw, var(--pns-s10));
	border: 1px solid var(--pns-line);
	border-radius: var(--pns-r-xl);
	background: var(--pns-surface);
	box-shadow: var(--pns-sh-md);
}
.pns-skin-nina .pns-panel__kicker { color: var(--pns-alt); }
.pns-skin-nina .pns-panel__lead { color: var(--pns-ink-2); }
.pns-skin-nina .pns-panel__actions {
	margin-top: var(--pns-s10);
	padding-top: var(--pns-s6);
	border-top: 1px solid var(--pns-line);
}

/* ═══════════════════════════════════════════════════════════════
   7. Tarjetas seleccionables
   ═══════════════════════════════════════════════════════════════ */
.pns-skin-nina .pns-card {
	padding: var(--pns-s6);
	border: 1px solid var(--pns-line);
	border-radius: var(--pns-r-lg);
	background: var(--pns-surface);
	transition: border-color var(--pns-fast) var(--pns-ease),
		box-shadow var(--pns-base) var(--pns-ease),
		transform var(--pns-base) var(--pns-ease);
}
.pns-skin-nina .pns-card:hover {
	border-color: var(--pns-alt);
	box-shadow: var(--pns-sh-lg);
	transform: translateY(-2px);
}
.pns-skin-nina .pns-card.is-selected {
	border: 2px solid var(--pns-alt);
	padding: calc(var(--pns-s6) - 1px);
	box-shadow: var(--pns-sh-lg);
	background: var(--pns-surface);
}

/* Marca de selección: anillo vacío que se rellena. Es la misma señal que en
   el mockup y no depende solo del color (queda el punto interior). */
.pns-skin-nina .pns-card__check {
	inset-block-start: var(--pns-s4);
	inset-inline-end: var(--pns-s4);
	width: 24px;
	height: 24px;
	border: 2px solid var(--pns-line);
	border-radius: 50%;
	background: transparent;
	color: transparent;
	transition: border-color var(--pns-fast) var(--pns-ease),
		background var(--pns-fast) var(--pns-ease);
}
.pns-skin-nina .pns-card:hover .pns-card__check { border-color: var(--pns-alt); }
.pns-skin-nina .pns-card.is-selected .pns-card__check {
	border-color: var(--pns-alt);
	background: var(--pns-alt);
	color: #fff;
}
.pns-skin-nina .pns-card__check .pns-i { width: 13px; height: 13px; stroke-width: 3.2; }

/* El icono vive en una teja: gris azulada en reposo, verde al elegir. */
/* La tarjeta ya separa sus hijos con `gap`; el margen solo agrega el aire
   extra que el diseño pide bajo el icono. */
.pns-skin-nina .pns-card__icon {
	width: 56px;
	height: 56px;
	margin-bottom: var(--pns-s3);
	border-radius: var(--pns-r-sm);
	background: var(--pns-surface-high);
	color: var(--pns-primary);
	transition: background var(--pns-fast) var(--pns-ease), color var(--pns-fast) var(--pns-ease);
}
.pns-skin-nina .pns-card:hover .pns-card__icon { background: var(--pns-alt); color: #fff; }
.pns-skin-nina .pns-card.is-selected .pns-card__icon {
	background: var(--pns-secondary-container);
	color: var(--pns-on-secondary-container);
}
.pns-skin-nina .pns-card__icon .pns-i { width: 26px; height: 26px; }
.pns-skin-nina .pns-card__text,
.pns-skin-nina .pns-card__outcome { color: var(--pns-ink-2); font-size: .95rem; }

.pns-skin-nina .pns-card__price {
	font-family: var(--pns-font-display);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--pns-primary);
}

/* ── Tarjeta de plan ─────────────────────────────────────────── */
.pns-skin-nina .pns-plan--featured { border: 2px solid var(--pns-alt); }
.pns-skin-nina .pns-plan__badge {
	border-radius: 999px;
	background: var(--pns-secondary-container);
	color: var(--pns-on-secondary-container);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.pns-skin-nina .pns-plan__now { font-size: 2rem; font-weight: 700; color: var(--pns-primary); }
.pns-skin-nina .pns-plan__save {
	border-radius: 999px;
	background: var(--pns-secondary-container);
	color: var(--pns-on-secondary-container);
}
.pns-skin-nina .pns-plan__benefits .pns-i { color: var(--pns-alt); }

.pns-skin-nina .pns-chip {
	border: 1px solid var(--pns-line);
	border-radius: 999px;
	background: var(--pns-surface-2);
	color: var(--pns-ink-2);
	font-size: .78rem;
	font-weight: 600;
}
.pns-skin-nina .pns-flag { border-radius: 999px; font-weight: 700; }
.pns-skin-nina .pns-flag--free { background: var(--pns-secondary-container); color: var(--pns-on-secondary-container); }

/* ═══════════════════════════════════════════════════════════════
   8. Campos
   ═══════════════════════════════════════════════════════════════ */
.pns-skin-nina .pns-input,
.pns-skin-nina .pns-textarea {
	min-height: 56px;
	border: 1px solid var(--pns-line);
	border-radius: var(--pns-r-sm);
	background: var(--pns-surface);
	font-size: 1rem;
}
.pns-skin-nina .pns-input:focus,
.pns-skin-nina .pns-textarea:focus {
	border-color: transparent;
	box-shadow: 0 0 0 2px var(--pns-alt);
	outline: none;
}
.pns-skin-nina .pns-consent { border-radius: var(--pns-r-md); background: var(--pns-surface-2); border: 1px solid var(--pns-line); }
.pns-skin-nina .pns-stepper { border-radius: var(--pns-r-md); border: 1px solid var(--pns-line); background: var(--pns-surface-2); }
.pns-skin-nina .pns-stepper__btn { border-radius: var(--pns-r-sm); border-color: var(--pns-line); background: var(--pns-surface); }
.pns-skin-nina .pns-stepper__btn:hover:not(:disabled) { border-color: var(--pns-alt); color: var(--pns-alt); }

/* ═══════════════════════════════════════════════════════════════
   9. Resumen: la tarjeta de vidrio
   ═══════════════════════════════════════════════════════════════ */
.pns-skin-nina .pns-summary__inner {
	border: 1px solid var(--pns-glass-line);
	border-radius: var(--pns-r-xl);
	background: var(--pns-glass);
	box-shadow: var(--pns-sh-lg);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	overflow: hidden;
}
.pns-skin-nina .pns-summary__head {
	padding: var(--pns-s6) var(--pns-s6) 0;
	background: var(--pns-surface-high);
	border: 0;
}
.pns-skin-nina .pns-summary__eyebrow { color: var(--pns-ink-2); }
.pns-skin-nina .pns-summary__plan { font-size: 1.1rem; font-weight: 700; color: var(--pns-primary); }

.pns-skin-nina .pns-summary__amount {
	padding: var(--pns-s4) var(--pns-s6) var(--pns-s6);
	background: var(--pns-surface-high);
	border: 0;
}
.pns-skin-nina .pns-summary__amount::before { content: none; }
.pns-skin-nina .pns-summary__label { color: var(--pns-ink-2); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.pns-skin-nina .pns-summary__total {
	font-size: clamp(2.1rem, 6vw, 3rem);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--pns-primary);
	background: none;
	-webkit-text-fill-color: currentColor;
}

/* El anticipo va en su propia píldora con un punto que late: es la línea que
   convierte un total grande en un primer paso pequeño. */
.pns-skin-nina .pns-summary__hint {
	position: relative;
	margin-top: var(--pns-s4);
	padding: 14px 16px 14px 34px;
	border: 1px solid rgba(20,30,156,.18);
	border-radius: var(--pns-r-sm);
	background: var(--pns-glass);
	color: var(--pns-on-secondary-container);
	font-size: .92rem;
	font-weight: 700;
}
.pns-skin-nina .pns-summary__hint:empty { display: none; }
.pns-skin-nina .pns-summary__hint::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 16px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-radius: 50%;
	background: var(--pns-alt);
	animation: pns-nina-breathe 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
	.pns-skin-nina .pns-summary__hint::before { animation: none; }
}

.pns-skin-nina .pns-summary__lines { padding: var(--pns-s6); background: var(--pns-surface); }
.pns-skin-nina .pns-sumline__value { color: var(--pns-primary); font-weight: 700; }
.pns-skin-nina .pns-summary__foot { padding: 0 var(--pns-s6) var(--pns-s6); border: 0; background: var(--pns-surface); }
.pns-skin-nina .pns-summary__foot .pns-btn--primary {
	min-height: 62px;
	border-radius: var(--pns-r-md);
	font-size: 1.05rem;
	font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
   10. Dock inferior con el total
   ═══════════════════════════════════════════════════════════════ */
.pns-skin-nina .pns-dock {
	border: 1px solid var(--pns-line);
	border-radius: var(--pns-r-md) var(--pns-r-md) 0 0;
	background: var(--pns-surface);
	box-shadow: 0 -4px 24px rgba(0,26,77,.08);
}
.pns-skin-nina .pns-dock__item { border-radius: var(--pns-r-sm); color: var(--pns-ink-2); font-weight: 600; }
.pns-skin-nina .pns-dock__item.is-current {
	background: var(--pns-surface-high);
	color: var(--pns-primary);
}
.pns-skin-nina .pns-dock__item.is-current .pns-i { color: var(--pns-alt); }
.pns-skin-nina .pns-dock__item--total {
	border-radius: var(--pns-r-sm);
	background: var(--pns-primary-deep);
	color: #fff;
}
.pns-skin-nina .pns-dock__item--total .pns-i { color: var(--pns-secondary-fixed); }
.pns-skin-nina .pns-dock__item--total:hover,
.pns-skin-nina .pns-dock__item--total:focus-visible { background: var(--pns-grad); }
.pns-skin-nina .pns-dock__total { font-family: var(--pns-font-display); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════
   11. Avisos, FAQ y pantalla final
   ═══════════════════════════════════════════════════════════════ */
.pns-skin-nina .pns-note { border-radius: var(--pns-r-md); }
.pns-skin-nina .pns-note--info { background: var(--pns-surface-2); color: var(--pns-ink-2); }
.pns-skin-nina .pns-note--ok { background: var(--pns-secondary-container); color: var(--pns-on-secondary-container); }
.pns-skin-nina .pns-faq__item { border: 1px solid var(--pns-line); border-radius: var(--pns-r-md); background: var(--pns-surface); }
.pns-skin-nina .pns-empty { border-radius: var(--pns-r-lg); border: 1px solid var(--pns-line); background: var(--pns-surface); }
.pns-skin-nina .pns-done__seal { background: var(--pns-secondary-container); color: var(--pns-on-secondary-container); }
.pns-skin-nina .pns-skeleton__bar,
.pns-skin-nina .pns-skeleton__card { border-radius: var(--pns-r-lg); }

/* ═══════════════════════════════════════════════════════════════
   12. Plataforma: barra superior oscura
   ═══════════════════════════════════════════════════════════════ */
.pns-skin-nina.pns-platform {
	padding-top: 0;
	background:
		radial-gradient(circle at 6% 2%, rgba(0,107,95,.08), transparent 30%),
		radial-gradient(circle at 94% 0%, rgba(0,26,77,.07), transparent 32%),
		var(--pns-bg);
}

.pns-skin-nina .pns-platform__bar {
	top: 0;
	width: 100%;
	margin: 0 0 var(--pns-s8);
	padding: 14px clamp(16px, 4vw, 28px);
	border: 0;
	border-radius: 0;
	background: var(--pns-primary-deep);
	box-shadow: 0 4px 18px rgba(0,3,20,.24);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.pns-skin-nina .pns-platform__brand { color: #fff; }
.pns-skin-nina .pns-platform__brand strong {
	font-family: var(--pns-font-display);
	color: #fff;
	font-size: 1.32rem;
	font-weight: 700;
}
.pns-skin-nina .pns-platform__brand small { color: rgba(255,255,255,.62); }
.pns-skin-nina .pns-platform__brand img { border-radius: var(--pns-r-sm); }

.pns-skin-nina .pns-platform__tabs button {
	border-radius: 999px;
	color: rgba(255,255,255,.72);
	font-weight: 650;
}
.pns-skin-nina .pns-platform__tabs button:hover,
.pns-skin-nina .pns-platform__tabs button:focus-visible {
	background: rgba(255,255,255,.08);
	color: var(--pns-secondary-fixed);
}
.pns-skin-nina .pns-platform__tabs button.is-current,
.pns-skin-nina .pns-platform__tabs button[aria-selected="true"] {
	background: var(--pns-secondary-container);
	color: var(--pns-on-secondary-container);
}
.pns-skin-nina .pns-platform__tabs button.is-current i,
.pns-skin-nina .pns-platform__tabs button[aria-selected="true"] i { background: transparent; }

/* Ancho de lectura para todo lo que no sea la barra. */
.pns-skin-nina .pns-platform__content,
.pns-skin-nina .pns-platform__hero,
.pns-skin-nina .pns-platform__mobile-switch { width: min(1280px, calc(100% - 32px)); margin-inline: auto; }

/* ── Héroe ───────────────────────────────────────────────────── */
.pns-skin-nina .pns-platform__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border: 1px solid var(--pns-line);
	border-radius: 999px;
	background: var(--pns-surface-2);
	color: var(--pns-alt);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.pns-skin-nina .pns-platform__eyebrow span[aria-hidden] {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--pns-alt);
	animation: pns-nina-breathe 3s ease-in-out infinite;
}
.pns-skin-nina .pns-platform__hero > ul li {
	border: 1px solid var(--pns-line);
	border-radius: var(--pns-r-md);
	background: var(--pns-surface);
}
.pns-skin-nina .pns-platform__hero > ul li b {
	background: var(--pns-secondary-container);
	color: var(--pns-on-secondary-container);
	border-radius: var(--pns-r-sm);
}

/* ── Carril de NINA ──────────────────────────────────────────── */
.pns-skin-nina .pns-platform__advisor-pane {
	border: 1px solid var(--pns-line);
	border-radius: var(--pns-r-xl);
	background: var(--pns-surface-2);
	overflow: hidden;
}
.pns-skin-nina .pns-platform__advisor-head {
	padding: 18px 20px;
	border-bottom: 1px solid var(--pns-line);
	background: var(--pns-surface);
}
.pns-skin-nina .pns-platform__advisor-head strong { font-family: var(--pns-font-display); font-weight: 700; color: var(--pns-primary); }
.pns-skin-nina .pns-platform__live-dot { background: var(--pns-alt); box-shadow: 0 0 0 4px rgba(18,191,160,.18); }
.pns-skin-nina .pns-platform__quote-pane {
	border: 1px solid var(--pns-line);
	border-radius: var(--pns-r-xl);
	background: var(--pns-surface);
}
.pns-skin-nina .pns-platform__syncbar {
	border-radius: var(--pns-r-md);
	background: var(--pns-secondary-container);
	color: var(--pns-on-secondary-container);
	font-weight: 600;
}
.pns-skin-nina .pns-platform__mobile-switch button.is-current {
	background: var(--pns-surface-high);
	color: var(--pns-primary);
}
.pns-skin-nina .pns-platform__toast {
	border-radius: var(--pns-r-md);
	background: var(--pns-primary-deep);
	color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   14. Botón flotante de WhatsApp
   ═══════════════════════════════════════════════════════════════ */
.pns-wa {
	position: fixed;
	right: max(18px, env(safe-area-inset-right));
	bottom: calc(96px + env(safe-area-inset-bottom));
	z-index: 2147481500;
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	box-shadow: 0 14px 34px rgba(37,211,102,.36);
	transition: transform .18s ease;
}
.pns-wa:hover { transform: scale(1.08); color: #fff; }
.pns-wa svg { width: 30px; height: 30px; fill: currentColor; }
@media (prefers-reduced-motion: reduce) { .pns-wa { transition: none; } }

/* Con el panel de NINA abierto el botón quedaría encima de la conversación.
   Se retira solo; donde `:has` no exista, simplemente no pasa nada. */
body:has(.pns-nina[data-open="true"]) .pns-wa {
	opacity: 0;
	pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   15. Widget de NINA
   ═══════════════════════════════════════════════════════════════ */
.pns-skin-nina.pns-nina,
body.pns-skin-nina .pns-nina {
	--nina-blue: #141E9C;
	--nina-teal: #0E7C67;
	--nina-ink: #0b1c30;
	--nina-muted: #757780;
	--nina-line: #c5c6d1;
	--nina-surface: #ffffff;
	--nina-soft: #eff4ff;
	--nina-grad: linear-gradient(135deg, #141E9C 0%, #12BFA0 100%);
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.pns-nina.pns-skin-nina .pns-nina__panel { border-radius: 32px; border-color: var(--nina-line); }
.pns-nina.pns-skin-nina .pns-nina__header { background: var(--nina-teal); }
.pns-nina.pns-skin-nina .pns-nina__identity h2 { font-family: "Montserrat", sans-serif; font-weight: 700; }
.pns-nina.pns-skin-nina .pns-nina__avatar { border-radius: 50%; background: #fff; }
.pns-nina.pns-skin-nina .pns-nina__launcher { border-radius: 999px; border-color: rgba(0,26,77,.1); }
.pns-nina.pns-skin-nina .pns-nina__launcher-ring { border-color: rgba(18,191,160,.55); }
.pns-nina.pns-skin-nina .pns-nina__launcher-mic { fill: var(--nina-teal); }
.pns-nina.pns-skin-nina .pns-nina__mic { background: var(--nina-teal); border-radius: 999px; }
.pns-nina.pns-skin-nina .pns-nina__bubble { border-radius: 22px; }
.pns-nina.pns-skin-nina .pns-nina__message--assistant .pns-nina__bubble {
	border: 1px solid var(--nina-line);
	border-top-left-radius: 4px;
	background: rgba(255,255,255,.72);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}
.pns-nina.pns-skin-nina .pns-nina__message--user .pns-nina__bubble {
	border-top-right-radius: 4px;
	background: var(--nina-grad);
	color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   16. Portal del cliente
   ═══════════════════════════════════════════════════════════════ */
.pns-skin-nina .pns-portal-card,
.pns-skin-nina .pns-portal-login,
.pns-skin-nina .pns-portal-splash__card {
	border: 1px solid var(--pns-line);
	border-radius: var(--pns-r-xl);
	background: var(--pns-surface);
	box-shadow: var(--pns-sh-md);
}
.pns-skin-nina .pns-portal-card__head h3 {
	font-family: var(--pns-font-display);
	font-weight: 700;
	color: var(--pns-primary);
}

/* El héroe del proyecto y las dos cajas de precio comparten el degradado de
   la marca; el resto del portal se mantiene claro para que el número mande. */
.pns-skin-nina .pns-portal-hero { border-radius: var(--pns-r-xl); }
.pns-skin-nina .pns-portal-hero h2 { font-family: var(--pns-font-display); font-weight: 700; letter-spacing: -.02em; }
.pns-skin-nina .pns-portal-status {
	border-color: rgba(157,238,221,.5);
	background: rgba(157,238,221,.2);
	color: var(--pns-secondary-fixed);
}

.pns-skin-nina .pns-portal-price > div { border-radius: var(--pns-r-md); border-color: var(--pns-line); background: var(--pns-surface-2); }
.pns-skin-nina .pns-portal-price strong { font-family: var(--pns-font-display); font-weight: 700; letter-spacing: -.02em; }
.pns-skin-nina .pns-portal-price > div:first-child { background: var(--pns-grad); }

.pns-skin-nina .pns-portal-nav { border-radius: var(--pns-r-md); border-color: var(--pns-line); }
.pns-skin-nina .pns-portal-nav a { border-radius: 999px; }
.pns-skin-nina .pns-portal-nav a:hover { background: var(--pns-surface-high); color: var(--pns-primary); }

.pns-skin-nina .pns-portal-payment {
	border-radius: var(--pns-r-lg);
	border-color: rgba(20,30,156,.18);
	background: rgba(199,245,236,.35);
}
.pns-skin-nina .pns-portal-payment--ok { background: var(--pns-secondary-container); border-color: var(--pns-alt); }

.pns-skin-nina .pns-portal-timeline li.is-done > span {
	border-color: var(--pns-alt);
	background: var(--pns-secondary-container);
	color: var(--pns-on-secondary-container);
}
.pns-skin-nina .pns-portal-timeline li.is-current > span {
	border-color: var(--pns-alt);
	color: var(--pns-alt);
	box-shadow: 0 0 0 6px rgba(18,191,160,.16);
}
.pns-skin-nina .pns-portal-facts li > span {
	background: var(--pns-secondary-container);
	color: var(--pns-on-secondary-container);
}
.pns-skin-nina .pns-portal-alert { border-radius: var(--pns-r-md); }
.pns-skin-nina .pns-portal-alert--ok { background: var(--pns-secondary-container); border-color: var(--pns-alt); color: var(--pns-on-secondary-container); }

/* ═══════════════════════════════════════════════════════════════
   17. Corrección de contraste en oscuro
   ═══════════════════════════════════════════════════════════════
   `--pns-primary` sigue siendo el azul profundo porque manda los degradados y
   los bordes; como color de texto sobre superficie oscura sería ilegible. Este
   bloque va al final a propósito: corrige justo los sitios donde ese token
   pinta letras, y tiene que ganarle a las secciones anteriores. */
.pns-skin-nina.pns-shell.pns-theme-oscuro,
.pns-skin-nina .pns-shell.pns-theme-oscuro { --pns-ink-on-dark: #eaf1ff; }
@media (prefers-color-scheme: dark) {
	.pns-skin-nina.pns-shell.pns-theme-auto,
	.pns-skin-nina .pns-shell.pns-theme-auto { --pns-ink-on-dark: #eaf1ff; }
}

.pns-skin-nina .pns-summary__total,
.pns-skin-nina .pns-summary__plan,
.pns-skin-nina .pns-sumline__value,
.pns-skin-nina .pns-card__price,
.pns-skin-nina .pns-plan__now,
.pns-skin-nina .pns-panel__title,
.pns-skin-nina .pns-portal-card__head h3,
.pns-skin-nina .pns-steps__item.is-current {
	color: var(--pns-ink-on-dark, var(--pns-primary));
}
.pns-skin-nina .pns-summary__head,
.pns-skin-nina .pns-summary__amount,
.pns-skin-nina .pns-summary__lines { color: var(--pns-ink-on-dark, inherit); }
.pns-skin-nina .pns-summary__hint {
	border-color: var(--pns-glass-line, rgba(20,30,156,.18));
	color: var(--pns-ink-on-dark, var(--pns-on-secondary-container));
}

/* ═══════════════════════════════════════════════════════════════
   18. Modo espacio de trabajo: una sola pantalla, sin larguero
   ═══════════════════════════════════════════════════════════════
   El problema no era el color: era que la plataforma se comportaba como una
   página de aterrizaje. Dos héroes apilados (el de la plataforma y el que el
   cotizador trae dentro), el resumen debajo de las preguntas y una sección de
   marketing al final obligaban a hacer scroll para ver el precio.

   Aquí se convierte en lo que de verdad es: una herramienta. Altura fija,
   tres zonas visibles a la vez, y solo la columna de preguntas se desplaza. */

.pns-skin-nina.pns-platform {
	/* Altura del encabezado fijo del tema. Si tu cabecera es más alta o más
	   baja, este es el único número que hay que tocar. */
	--pns-top-offset: 150px;
	padding-top: var(--pns-top-offset);
	scroll-padding-top: var(--pns-top-offset);
}

/* Dos barras fijas superpuestas es lo que cortaba el título. La del tema ya
   está fija; la del plugin deja de estarlo. */
.pns-skin-nina .pns-platform__bar {
	position: relative;
	top: auto;
	margin-bottom: var(--pns-s6);
}

/* ── El héroe se reduce a una franja ─────────────────────────── */
.pns-skin-nina .pns-platform__hero {
	gap: var(--pns-s6);
	padding: var(--pns-s6) var(--pns-s8);
	border-radius: var(--pns-r-lg);
}
.pns-skin-nina .pns-platform__hero h1 {
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	line-height: 1.15;
	max-width: 20ch;
}
.pns-skin-nina .pns-platform__hero > div > p { font-size: .95rem; max-width: 62ch; }
.pns-skin-nina .pns-platform__gesture-note { margin-top: var(--pns-s2); }

/* Las tres promesas pasan de tarjetas apiladas a una fila de fichas. */
@media (min-width: 1100px) {
	.pns-skin-nina .pns-platform__hero > ul {
		display: flex;
		flex-wrap: wrap;
		gap: var(--pns-s2);
		max-width: 320px;
	}
	.pns-skin-nina .pns-platform__hero > ul li {
		flex: 1 1 100%;
		gap: var(--pns-s3);
		padding: 10px 12px;
		border-radius: var(--pns-r-sm);
	}
	.pns-skin-nina .pns-platform__hero > ul li b { width: 34px; height: 34px; font-size: .68rem; }
	.pns-skin-nina .pns-platform__hero > ul li strong { font-size: .82rem; }
	.pns-skin-nina .pns-platform__hero > ul li small { font-size: .7rem; }
}

/* El cotizador ya no repite el héroe: dentro del espacio de trabajo sería el
   segundo título idéntico de la misma pantalla. */
.pns-skin-nina .pns-platform__quote-pane .pns-hero { display: none; }

/* ── La rejilla de una sola pantalla ─────────────────────────── */
@media (min-width: 1100px) {
	.pns-skin-nina .pns-platform__workspace {
		/* Flujo natural de documento: ninguna tarjeta queda recortada dentro de
		   un panel con altura fija ni exige descubrir un scroll interno. */
		height: auto;
		min-height: 0;
		grid-template-columns: 350px minmax(0, 1fr);
		align-items: start;
	}

	.pns-skin-nina .pns-platform__advisor-pane {
		position: sticky;
		top: calc(var(--pns-top-offset) + 16px);
		display: flex;
		flex-direction: column;
		min-height: 540px;
		height: min(calc(100dvh - var(--pns-top-offset) - 32px), 760px);
	}
	.pns-skin-nina .pns-platform__nina-slot { flex: 1; min-height: 0; overflow: hidden; }

	.pns-skin-nina .pns-platform__quote-pane {
		display: block;
		min-height: 0;
		height: auto;
		overflow: visible;
	}
	.pns-skin-nina .pns-platform__quote-pane .pns-quoter {
		display: block;
		min-height: 0;
		padding: var(--pns-s5);
		overflow: visible;
	}
	.pns-skin-nina .pns-platform__quote-pane .pns-steps {
		flex: 0 0 auto;
		padding: var(--pns-s4);
		margin-bottom: var(--pns-s4);
	}

	/* Preguntas y resumen, lado a lado y siempre visibles. Se fuerza con una
	   consulta de medios y no con `@container`: el contenedor del cotizador
	   anidado no siempre mide lo que uno cree. */
	.pns-skin-nina .pns-platform__quote-pane .pns-layout {
		min-height: 0;
		grid-template-columns: minmax(0, 1fr) 340px;
		align-items: start;
		gap: var(--pns-s5);
		padding-bottom: var(--pns-s5);
	}

	/* El desplazamiento lo hace la página completa. */
	.pns-skin-nina .pns-platform__quote-pane .pns-main {
		min-height: 0;
		overflow: visible;
		padding-inline-end: 4px;
	}
	.pns-skin-nina .pns-platform__quote-pane .pns-summary { min-height: 0; }
	.pns-skin-nina .pns-platform__quote-pane .pns-summary__inner {
		position: sticky;
		top: calc(var(--pns-top-offset) + 16px);
		display: block;
		max-height: none;
	}
	.pns-skin-nina .pns-platform__quote-pane .pns-summary__lines {
		min-height: 0;
		max-height: none;
		overflow: visible;
	}

	/* El dock inferior duplicaba el total que ya está fijo a la derecha. */
	.pns-skin-nina .pns-platform__quote-pane .pns-dock { display: none !important; }
}

.pns-skin-nina .pns-card.is-included {
	cursor: default;
	box-shadow: 0 0 0 2px rgba(18,191,160,.16);
}
.pns-skin-nina .pns-custom-request {
	margin-top: var(--pns-s6);
	padding: var(--pns-s5);
	border: 1px dashed var(--pns-line-strong);
	border-radius: var(--pns-r-md);
	background: rgba(18,191,160,.05);
}

/* Barras de desplazamiento discretas: en un panel embebido, las del sistema
   parten el diseño en dos. */
.pns-skin-nina .pns-main::-webkit-scrollbar,
.pns-skin-nina .pns-summary__lines::-webkit-scrollbar { width: 6px; }
.pns-skin-nina .pns-main::-webkit-scrollbar-thumb,
.pns-skin-nina .pns-summary__lines::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: var(--pns-line);
}

/* ── Contraste del resumen ───────────────────────────────────── */
/* Sobre el degradado de marca el texto tiene que ser blanco de verdad, no
   blanco al 78 %: a ese nivel el rótulo desaparecía. */
.pns-skin-nina .pns-platform__quote-pane .pns-summary__amount .pns-summary__label {
	color: rgba(255,255,255,.92);
}
.pns-skin-nina .pns-platform__quote-pane .pns-summary__amount .pns-summary__hint {
	border-color: rgba(255,255,255,.34);
	background: rgba(255,255,255,.16);
	color: #fff;
}
.pns-skin-nina .pns-platform__quote-pane .pns-summary__amount .pns-summary__hint::before {
	background: var(--pns-secondary-fixed);
}
.pns-skin-nina .pns-platform__quote-pane .pns-summary__head {
	background: var(--pns-surface);
	border-bottom: 1px solid var(--pns-line);
}
.pns-skin-nina .pns-platform__quote-pane .pns-summary__head .pns-summary__eyebrow { color: var(--pns-muted); }
.pns-skin-nina .pns-platform__quote-pane .pns-summary__plan { color: var(--pns-primary); }

/* ── Lanzador de NINA ────────────────────────────────────────── */
/* El tema pintaba el rótulo con su color de enlace (rojo sobre azul). Se fija
   aquí para que no dependa del tema activo. */
.pns-nina.pns-skin-nina .pns-nina__launcher-copy strong { color: var(--nina-ink); }
.pns-nina.pns-skin-nina .pns-nina__launcher-copy small { color: var(--nina-muted); }
.pns-nina.pns-skin-nina .pns-nina__launcher {
	background: #fff;
	box-shadow: 0 16px 40px rgba(20,30,156,.22), 0 2px 8px rgba(11,16,32,.08);
}
.pns-nina.pns-skin-nina .pns-nina__launcher-logo {
	padding: 3px;
	background: #fff;
	object-fit: contain;
}

/* El botón de WhatsApp se cambia de esquina: en la derecha chocaba con el
   lanzador de NINA y se montaban uno encima del otro. */
.pns-skin-nina .pns-wa {
	right: auto;
	left: max(18px, env(safe-area-inset-left));
	bottom: max(18px, env(safe-area-inset-bottom));
	width: 54px;
	height: 54px;
}
.pns-skin-nina .pns-wa svg { width: 27px; height: 27px; }
@media (max-width: 760px) {
	.pns-skin-nina .pns-wa { bottom: calc(86px + env(safe-area-inset-bottom)); }
}