:root{
	color-scheme: light dark;
	--bg: #0b1220;
	--surface: rgba(255,255,255,.08);
	--surface-2: rgba(255,255,255,.12);
	--text: rgba(255,255,255,.92);
	--muted: rgba(255,255,255,.68);
	--stroke: rgba(255,255,255,.16);
	--shadow: 0 16px 50px rgba(0,0,0,.35);
	--btn-border: color-mix(in oklab, var(--stroke) 70%, #000 30%);
	--btn-shadow: 0 10px 22px rgba(0,0,0,.22);
	--btn-shadow-hover: 0 16px 36px rgba(0,0,0,.32);
	--btn-glow: color-mix(in oklab, var(--primary) 55%, var(--primary-2) 45%);
	--btn-glow-soft: color-mix(in oklab, var(--btn-glow) 22%, transparent);
	--btn-sheen: rgba(255,255,255,.14);
	--btn-left-highlight: rgba(255,255,255,.08);
	--primary: #5eead4;
	--primary-2: #60a5fa;
	--glow-a: rgba(96,165,250,.30);
	--glow-b: rgba(94,234,212,.24);
	--glow-c: rgba(251,113,133,.16);
	--glass-bg: rgba(255,255,255,.055);
	--glass-border: rgba(255,255,255,.18);
	--glass-highlight: rgba(255,255,255,.22);
	--danger: #fb7185;
	--radius: 18px;
	--radius-sm: 12px;
	--container: 1120px;
	--font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";

	--glass-ui-bg: rgba(255, 255, 255, 0.02);
	--glass-ui-border: rgba(255, 255, 255, 0.3);
	--glass-ui-blur: 6px;
	--glass-ui-saturate: 130%;
	--glass-ui-radius: 16px;
	--glass-ui-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	--glass-ui-bg-fallback: rgba(255, 255, 255, 0.02);
	--glass-ui-sheen-a: rgba(255, 255, 255, 0.22);
	--glass-ui-sheen-b: rgba(255, 255, 255, 0.08);
	--glass-ui-inner-a: rgba(255, 255, 255, 0.18);
	--glass-ui-inner-b: rgba(0, 0, 0, 0.14);
}

[data-theme="light"]{
	color-scheme: light;
	--bg: #f6f8ff;
	--surface: rgba(0,0,0,.04);
	--surface-2: rgba(0,0,0,.06);
	--text: rgba(10,16,30,.92);
	--muted: rgba(10,16,30,.66);
	--stroke: rgba(10,16,30,.12);
	--shadow: 0 18px 50px rgba(10,16,30,.12);
	--btn-border: color-mix(in oklab, var(--stroke) 65%, #000 35%);
	--btn-shadow: 0 10px 22px rgba(10,16,30,.12);
	--btn-shadow-hover: 0 16px 36px rgba(10,16,30,.18);
	--btn-sheen: rgba(255,255,255,.22);
	--btn-left-highlight: rgba(255,255,255,.24);
	--primary: #2563eb;
	--primary-2: #14b8a6;
	--glow-a: rgba(37,99,235,.18);
	--glow-b: rgba(20,184,166,.16);
	--glow-c: rgba(248,113,113,.12);
	--glass-bg: rgba(255,255,255,.50);
	--glass-border: rgba(10,16,30,.10);
	--glass-highlight: rgba(255,255,255,.55);
	--glass-ui-bg-fallback: rgba(255, 255, 255, 0.18);
	--glass-ui-sheen-a: rgba(255, 255, 255, 0.30);
	--glass-ui-sheen-b: rgba(255, 255, 255, 0.10);
	--glass-ui-inner-a: rgba(255, 255, 255, 0.22);
	--glass-ui-inner-b: rgba(0, 0, 0, 0.10);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	:root{
		--glass-ui-bg: var(--glass-ui-bg-fallback);
		--glass-ui-blur: 0px;
		--glass-ui-saturate: 100%;
	}
}

/* ========================================
   Service Hero Illustrations
   ======================================== */

.service-hero-illustration {
	position: relative;
	width: 100%;
	max-width: 280px;
	margin: 0 auto 32px;
	padding-top: 20px; /* Espacio para elementos animados que se mueven hacia arriba */
	aspect-ratio: 1;
}

.service-hero-illustration svg {
	width: 100%;
	height: 100%;
	overflow: visible; /* Permite que elementos animados se muestren fuera del viewBox */
	filter: drop-shadow(0 8px 32px rgba(96, 165, 250, 0.2));
}

.service-hero-illustration .illustration-bg {
	fill: rgba(96, 165, 250, 0.1);
}

.service-hero-illustration .illustration-accent {
	fill: url(#illustrationGradient);
}

.service-hero-illustration .illustration-line {
	stroke: url(#illustrationGradient);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
}

.service-hero-illustration .illustration-line-thin {
	stroke: rgba(255, 255, 255, 0.3);
	stroke-width: 1;
	stroke-linecap: round;
	fill: none;
}

.service-hero-illustration .illustration-dot {
	fill: var(--primary-2);
}

.service-hero-illustration .illustration-text {
	fill: var(--text);
	font-size: 10px;
	font-family: var(--font);
}

/* Pulse animation for key elements */
@keyframes illustrationPulse {
	0%, 100% { opacity: 0.6; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.05); }
}

.service-hero-illustration .pulse {
	animation: illustrationPulse 3s ease-in-out infinite;
	transform-origin: center;
}

.service-hero-illustration .pulse-delay {
	animation-delay: 1.5s;
}

/* Float animation */
@keyframes illustrationFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

.service-hero-illustration .float {
	animation: illustrationFloat 4s ease-in-out infinite;
}

@media (max-width: 768px) {
	.service-hero-illustration {
		max-width: 200px;
		margin-bottom: 24px;
	}
}

@media (max-width: 480px) {
	.service-hero-illustration {
		max-width: 160px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT MODE: SVG Illustration Adjustments
   Ensures icons are visible against light backgrounds
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .service-hero-illustration svg {
	filter: drop-shadow(0 8px 32px rgba(37, 99, 235, 0.15));
}

[data-theme="light"] .service-hero-illustration .illustration-bg {
	fill: rgba(37, 99, 235, 0.08);
}

[data-theme="light"] .service-hero-illustration .illustration-line-thin {
	stroke: rgba(10, 16, 30, 0.35);
}

[data-theme="light"] .service-hero-illustration .illustration-dot {
	fill: var(--primary-2);
	opacity: 0.8;
}

[data-theme="light"] .service-hero-illustration .illustration-text {
	fill: rgba(10, 16, 30, 0.85);
}

/* Checkmark strokes inside accent circles - make them visible on light mode */
[data-theme="light"] .service-hero-illustration .checkmark-stroke {
	stroke: #ffffff;
}

/* Glass UI overlays: visibles en todos los navegadores (no dependen de backdrop-filter) */
.header-inner,
.card,
.callout,
.trust-item,
.faq-item,
.toast,
.chat-fab,
.chat-panel,
.btn,
.btn-glass,
.segmented,
.footer-inner,
.step-badge-front{
	position:relative;
	overflow:hidden;
	isolation:isolate;
}

.header-inner > *,
.card > *,
.callout > *,
.trust-item > *,
.faq-item > *,
.toast > *,
.chat-fab > *,
.chat-panel > *,
.btn > *,
.btn-glass > *,
.segmented > *,
.footer-inner > *,
.step-badge-front > *{
	position:relative;
	z-index:1;
}

.header-inner::before,
.card::before,
.callout::before,
.trust-item::before,
.faq-item::before,
.toast::before,
.chat-fab::before,
.chat-panel::before,
.btn::before,
.btn-glass::before,
.segmented::before,
.footer-inner::before,
.step-badge-front::before{
	content:"";
	position:absolute;
	inset:0;
	border-radius:inherit;
	background:
		linear-gradient(135deg, var(--glass-ui-sheen-a), rgba(255,255,255,0) 56%),
		linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 58%),
		radial-gradient(circle at 28% 24%, var(--glass-ui-sheen-b), transparent 62%),
		var(--glass-ui-bg);
	z-index:0;
	pointer-events:none;
}

.header-inner::after,
.card::after,
.callout::after,
.trust-item::after,
.faq-item::after,
.toast::after,
.chat-fab::after,
.chat-panel::after,
.btn::after,
.btn-glass::after,
.segmented::after,
.footer-inner::after,
.step-badge-front::after{
	content:"";
	position:absolute;
	inset:0;
	border-radius:inherit;
	box-shadow:
		inset 0 1px 0 var(--glass-ui-inner-a),
		inset 0 0 0 1px rgba(255,255,255,.08),
		inset 0 -10px 24px rgba(0,0,0,.10);
	z-index:0;
	pointer-events:none;
}

/* Reducir reflejo blanco en callouts y FAQ */
.callout::before,
.faq-item::before{
	background: var(--glass-ui-bg);
}

.callout::after,
.faq-item::after{
	box-shadow: none;
}

*{box-sizing:border-box}
html,body{height:100%; width:100%}
html{overflow-x:hidden}
html.is-scroll-locked{overflow:hidden}
body{
	position:relative;
	margin:0;
	font-family:var(--font);
	background: linear-gradient(180deg, var(--bg), var(--bg));
	color:var(--text);
	line-height:1.55;
	overflow-x:clip;
	min-height:100vh;
	display:flex;
	flex-direction:column;
	align-items:stretch;
}
body.is-scroll-locked{overflow:hidden}

/* Mantener todo el contenido por encima del fondo decorativo */
body > :not(.bg-blobs):not(.bg-orbs):not(.toast):not(.chat){position:relative; z-index:20}

main{flex:1 0 auto}
.site-footer{margin-top:auto}

/* Asegura que los bloques principales se estiren al ancho de ventana */
.site-header, main, .site-footer{width:100%}

/* Gradient blobs / blurred gradients (CSS puro) */
.bg-blobs{
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:auto;
	height:100vh;
	pointer-events:none;
	z-index:0;
	overflow:hidden;
}

/* En móviles con barra de direcciones dinámica, usar un viewport estable evita “saltos” visuales */
@supports (height: 100svh){
	.bg-blobs{height:100svh}
}

/* Círculos “glass” subiendo (estilo CodePen del usuario) */
.bg-floaters{
	position:absolute;
	inset:0;
	overflow:hidden;
	pointer-events:none;
	z-index:1;
	margin:0;
	padding:0;
	list-style:none;
}

.bg-floaters li{
	position:absolute;
	display:block;
	list-style:none;
	width:20px;
	height:20px;
	background: rgba(255,255,255,.08);
	box-shadow: 0 14px 40px rgba(10,16,30,.22), inset 0 1px 0 rgba(255,255,255,.14);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 16px;
	border: 1px solid rgba(255,255,255,.14);
	animation: floater-rise 25s linear infinite;
	bottom: -150px;
}

[data-theme="light"] .bg-floaters li{
	background: rgba(10,16,30,.04);
	border-color: rgba(10,16,30,.14);
	box-shadow: 0 12px 28px rgba(10,16,30,.12), inset 0 1px 0 rgba(255,255,255,.35);
}

.bg-floaters li:nth-child(1){left:25%; width:80px; height:80px; animation-delay:0s}
.bg-floaters li:nth-child(2){left:10%; width:20px; height:20px; animation-delay:2s; animation-duration:12s}
.bg-floaters li:nth-child(3){left:70%; width:20px; height:20px; animation-delay:4s}
.bg-floaters li:nth-child(4){left:40%; width:60px; height:60px; animation-delay:0s; animation-duration:18s}
.bg-floaters li:nth-child(5){left:65%; width:20px; height:20px; animation-delay:0s}
.bg-floaters li:nth-child(6){left:75%; width:110px; height:110px; animation-delay:3s}
.bg-floaters li:nth-child(7){left:35%; width:150px; height:150px; animation-delay:7s}
.bg-floaters li:nth-child(8){left:50%; width:25px; height:25px; animation-delay:15s; animation-duration:45s}
.bg-floaters li:nth-child(9){left:20%; width:15px; height:15px; animation-delay:2s; animation-duration:35s}
.bg-floaters li:nth-child(10){left:85%; width:150px; height:150px; animation-delay:0s; animation-duration:11s}

.bg-blob{
	position:absolute;
	border-radius:999px;
	overflow:hidden;
	filter: blur(14px) saturate(120%);
	opacity:.32;
	mix-blend-mode: soft-light;
	isolation:isolate;
	transform: translate3d(0,0,0);
	will-change: transform;
	z-index:0;
}

[data-theme="light"] .bg-blob{
	mix-blend-mode: multiply;
	opacity:.28;
}

.bg-blob::before{
	content:"";
	position:absolute;
	inset:-30%;
	background:
		radial-gradient(circle at 20% 20%, rgba(255,255,255,.24), transparent 60%),
		radial-gradient(circle at 80% 70%, rgba(255,255,255,.16), transparent 62%);
	opacity:.25;
	filter: blur(6px);
	pointer-events:none;
}

.bg-blob::after{
	content:"";
	position:absolute;
	inset:-10%;
	border-radius:inherit;
	background: radial-gradient(circle at 40% 40%, rgba(255,255,255,.12), transparent 70%);
	opacity:.4;
	pointer-events:none;
}

/* Cada blob usa gradientes (radial/linear) para color y profundidad */
.bg-blob.a{
	width:360px;
	height:360px;
	left:-60px;
	top:10vh;
	background:
		radial-gradient(circle at 20% 20%, rgba(96,165,250,.38) 0%, transparent 60%),
		radial-gradient(circle at 70% 70%, rgba(94,234,212,.26) 0%, transparent 68%);
}

.bg-blob.b{
	width:420px;
	height:340px;
	left:50vw;
	top:-6vh;
	background:
		radial-gradient(circle at 30% 40%, rgba(94,234,212,.32) 0%, transparent 65%),
		radial-gradient(circle at 70% 30%, rgba(37,99,235,.22) 0%, transparent 70%);
}

.bg-blob.c{
	width:380px;
	height:380px;
	left:60vw;
	top:50vh;
	background:
		radial-gradient(circle at 30% 30%, rgba(251,113,133,.22) 0%, transparent 65%),
		radial-gradient(circle at 70% 70%, rgba(96,165,250,.20) 0%, transparent 70%);
}

/* Brillo/“glass haze” con backdrop-filter (vidrio esmerilado) */
.bg-haze{
	position:absolute;
	inset:-20%;
	background:
		linear-gradient(
			180deg,
			rgba(255,255,255,.05) 0%,
			rgba(255,255,255,.03) 22%,
			rgba(255,255,255,.01) 42%,
			transparent 60%,
			rgba(255,255,255,.01) 78%,
			rgba(255,255,255,.03) 92%,
			rgba(255,255,255,.04) 100%
		);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	opacity:.20;
	z-index:2;
}

@keyframes floater-rise{
	0%{transform: translate3d(0,0,0) rotate(0deg); opacity:1}
	100%{transform: translate3d(0,-110vh,0) rotate(720deg); opacity:0}
}

@media (prefers-reduced-motion: reduce){
	.bg-floaters li{animation:none; opacity:.10}
}

@keyframes blob-bob-a{
	0%,100%{transform: translate3d(0, -10px, 0) scale(1)}
	50%{transform: translate3d(0, 18px, 0) scale(1.02)}
}
@keyframes blob-bob-b{
	0%,100%{transform: translate3d(0, 16px, 0) scale(1)}
	50%{transform: translate3d(0, -14px, 0) scale(1.015)}
}
@keyframes blob-bob-c{
	0%,100%{transform: translate3d(0, -8px, 0) scale(1)}
	50%{transform: translate3d(0, 20px, 0) scale(1.02)}
}

.bg-blob.a{animation: blob-bob-a 16s ease-in-out infinite}
.bg-blob.b{animation: blob-bob-b 18s ease-in-out infinite}
.bg-blob.c{animation: blob-bob-c 20s ease-in-out infinite}

a{color:inherit; text-decoration:none}
a:hover{text-decoration:none}

.container{max-width:var(--container); margin:0 auto; padding:0 20px}

.sr-only{
	position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;
}

.site-header{
	position:sticky;
	top:0;
	z-index:50;
	padding:12px 0;
	background:transparent;
	border-bottom:none;
}

.header-inner{
	position:relative;
	display:grid;
	grid-template-columns:minmax(260px, 1fr) auto;
	grid-template-areas:
		"brand actions"
		"nav nav";
	align-items:center;
	column-gap:16px;
	row-gap:10px;
	padding:12px 14px;
	border-radius: var(--glass-ui-radius);
	background: var(--glass-ui-bg);
	backdrop-filter: blur(var(--glass-ui-blur)) saturate(var(--glass-ui-saturate));
	-webkit-backdrop-filter: blur(var(--glass-ui-blur)) saturate(var(--glass-ui-saturate));
	border: 1px solid var(--glass-ui-border);
	box-shadow: var(--glass-ui-shadow);
	overflow:hidden;
}

.header-inner::before{
	content:none;
}

.brand{grid-area:brand; display:flex; align-items:center; gap:12px; min-width:0}
.brand-mark{
	position:relative;
	overflow:hidden;
	isolation:isolate;
	display:grid;
	place-items:center;
	width:42px;
	height:42px;
	border-radius:14px;
	background:
		radial-gradient(circle at 25% 20%, color-mix(in oklab, var(--primary) 55%, transparent), transparent 58%),
		linear-gradient(135deg,
			color-mix(in oklab, var(--primary) 78%, #fff 0%),
			color-mix(in oklab, var(--primary-2) 78%, #fff 0%)
		);
	border: 1px solid color-mix(in oklab, var(--stroke) 55%, transparent);
	box-shadow:
		0 16px 44px rgba(0,0,0,.28),
		0 0 0 1px color-mix(in oklab, var(--stroke) 55%, transparent);
	color:#08101e;
	font-weight:950;
	font-size:18px;
	letter-spacing:-0.02em;
}
.brand-mark::before{
	content:"";
	position:absolute;
	inset:-30%;
	background:
		radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), transparent 58%),
		linear-gradient(180deg, rgba(255,255,255,.22), transparent 55%);
	transform: rotate(-12deg);
	z-index:0;
	pointer-events:none;
}
.brand-mark::after{
	content:"";
	position:absolute;
	inset:0;
	border-radius:inherit;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
	z-index:0;
	pointer-events:none;
}
.brand-mark > *{position:relative; z-index:1}
.brand-icon{width:100%; height:100%; display:block}
.brand-mark{
	background:none;
	border:none;
	box-shadow:none;
}
.brand-mark::before, .brand-mark::after{display:none}
.brand-text{display:flex; flex-direction:column; line-height:1.1}
.brand-name{
	font-weight:900;
	letter-spacing:-0.01em;
	line-height:1.05;
	background: linear-gradient(90deg, color-mix(in oklab, var(--primary) 65%, var(--text)), color-mix(in oklab, var(--primary-2) 65%, var(--text)));
	-webkit-background-clip:text;
	background-clip:text;
	color: transparent;
}
.brand-name{color:var(--text)}
@supports ((-webkit-background-clip: text) or (background-clip: text)){
	.brand-name{color:transparent}
}
.brand-sub{font-size:12px; color:var(--muted)}

.nav{
	grid-area:nav;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	flex-wrap:wrap;
	padding:2px 2px;
}

/* Menú móvil (hamburguesa + panel) */
.mobile-nav-toggle{display:none !important}
.mobile-nav-panel{
	grid-area:nav;
	margin-top:2px;
	padding:0;
	border-radius:calc(var(--glass-ui-radius) - 4px);
	background: var(--glass-ui-bg);
	border: 1px solid transparent;
	box-shadow: none;
	max-height:0;
	overflow:hidden;
	opacity:0;
	transform: translateY(-10px);
	transform-origin: top;
	transition:
		max-height .24s ease,
		padding .24s ease,
		opacity .18s ease,
		transform .24s ease,
		box-shadow .24s ease,
		border-color .24s ease;
	will-change: opacity, transform;
}
.mobile-nav-panel[hidden]{display:none !important}
.mobile-nav-panel.is-open{
	padding:6px;
	border-color: var(--glass-ui-border);
	box-shadow: var(--glass-ui-shadow);
	max-height:420px;
	opacity:1;
	transform: translateY(0);
}
.mobile-nav{
	display:flex;
	flex-direction:column;
	gap:6px;
	align-items:stretch;
}
.mobile-nav .nav-link{
	display:block;
	width:100%;
	text-align:left;
}
.nav-link{
	font-size:14px;
	color:var(--muted);
	padding:9px 10px;
	border-radius:12px;
	transition:background .2s ease, color .2s ease, transform .2s ease;
	position:relative;
}
.nav-link:hover{background:var(--surface); color:var(--text); transform:translateY(-1px)}
.nav-link.is-active{
	color:var(--text);
	background:var(--surface);
}
.nav-link.is-active::after{
	content:"";
	position:absolute;
	bottom:0;
	left:50%;
	transform:translateX(-50%);
	width:60%;
	height:3px;
	border-radius:3px 3px 0 0;
	background:linear-gradient(90deg, var(--primary), var(--primary-2));
}

.header-actions{grid-area:actions; display:flex; align-items:center; gap:10px; flex-wrap:nowrap; justify-content:flex-end}

.header-actions{display:flex; align-items:center; gap:10px; flex-shrink:0}

/* Header: controles rehechos para que sean 100% uniformes.
   El ancho lo calcula JS tomando el mayor de los 3, así siempre quedan iguales
   incluso con EN/ES y distintos textos. */
.header-actions{
	/* Fallback: si JS no corre por cualquier motivo, los 3 quedan iguales */
	--header-ctrl-w: 124px;
	--header-ctrl-h: 36px;
}
.header-actions .header-ctrl{
	width: var(--header-ctrl-w);
	flex: 0 0 var(--header-ctrl-w);
	height: var(--header-ctrl-h);
	padding:0 10px;
	gap:8px;
	white-space: nowrap;
	min-inline-size: 0;
	overflow: hidden;
}
.header-actions .header-ctrl > span:not(.btn-icon){
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Header: evitar que el emoji de “Llamar” agrande el botón */
.header-actions .btn-icon{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:14px;
	height:14px;
	line-height:1;
}

.segmented{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:0;
	padding:0;
	border:1px solid var(--btn-border);
	border-radius:var(--glass-ui-radius);
	background: var(--glass-ui-bg);
	backdrop-filter: blur(var(--glass-ui-blur)) saturate(var(--glass-ui-saturate));
	-webkit-backdrop-filter: blur(var(--glass-ui-blur)) saturate(var(--glass-ui-saturate));
	box-shadow: var(--glass-ui-shadow);
}
.segmented-btn{
	appearance:none;
	border:0;
	background:transparent;
	color:var(--muted);
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:4px 10px;
	border-radius:calc(var(--glass-ui-radius) - 6px);
	font-weight:700;
	cursor:pointer;
	transition:background .2s ease, color .2s ease;
}
.segmented-btn[aria-pressed="true"]{background:var(--surface-2); color:var(--text)}

.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	border-radius:var(--glass-ui-radius);
	padding:10px 14px;
	border:1px solid var(--btn-border);
	background: var(--glass-ui-bg);
	backdrop-filter: blur(var(--glass-ui-blur)) saturate(var(--glass-ui-saturate));
	-webkit-backdrop-filter: blur(var(--glass-ui-blur)) saturate(var(--glass-ui-saturate));
	color:var(--text);
	cursor:pointer;
	font-weight:700;
	box-shadow: var(--glass-ui-shadow);
	transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
	user-select:none;
}
.btn:hover{
	transform:translateY(-2px);
	border-color:color-mix(in oklab, var(--primary) 25%, var(--btn-border));
	box-shadow: var(--btn-shadow-hover), 0 0 0 1px color-mix(in oklab, var(--btn-border) 60%, transparent), 0 0 18px var(--btn-glow-soft);
}
.btn:active{
	transform:translateY(-1px);
	box-shadow: var(--glass-ui-shadow);
}
.btn:focus-visible{outline:2px solid color-mix(in oklab, var(--primary) 55%, #fff 0%); outline-offset:2px}

.btn-icon{font-size:14px; opacity:.9}

.btn-primary{
	/* Alias sin diferencias visuales (todo se define en .btn) */
}
.btn-primary:hover{opacity:1}

.btn-glass{
	/* Alias por compatibilidad: el estilo base vive en .btn */
}

/* Brillo suave para todos los botones */
.btn::before{
	background:
		radial-gradient(circle at 15% 20%, var(--btn-sheen), transparent 55%),
		linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 58%),
		var(--glass-ui-bg) 0 0 / auto auto no-repeat;
	opacity:.65;
	transition: opacity .45s ease, filter .45s ease, transform .45s ease;
}
.btn:hover::before{
	opacity:.9;
	filter: blur(1px);
	transform: scale(1.02);
}

.btn-ghost{ /* Alias sin diferencias visuales */ }
.btn-ghost:hover{ /* Alias sin diferencias visuales */ }

/* Button loading state */
.btn.is-loading{
	position: relative;
	pointer-events: none;
	opacity: 0.7;
}
.btn.is-loading::after{
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	top: 50%;
	left: 50%;
	margin-top: -8px;
	margin-left: -8px;
	border: 2px solid transparent;
	border-top-color: currentColor;
	border-radius: 50%;
	animation: btnSpinner 0.8s linear infinite;
}
@keyframes btnSpinner{
	to { transform: rotate(360deg); }
}
.btn:disabled{
	opacity: 0.6;
	cursor: not-allowed;
}

/* Efecto glow tipo CodePen (sin tocar el fondo global)
   Se aplica envolviendo el botón con:
   <span class="btn-fx btn-fx--pink|btn-fx--blue|btn-fx--green"><a|button class="btn ...">...</a|button></span>
*/
.btn-fx{
	--btn-fx-color: #2db2ff;
	--btn-fx-orb-x: 22%;
	--btn-fx-orb-y: 50%;
	position:relative;
	display:inline-flex;
	align-items:stretch;
	justify-content:stretch;
	border-radius:30px;
	overflow:hidden;
	isolation:isolate;
}

.btn-fx > .btn{
	position:relative;
	z-index:1;
	border-radius:inherit;
	transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
}

/* En stacks y formularios, los .btn antes estiraban a todo el ancho.
   Ahora el wrapper .btn-fx es el item del layout, así que forzamos el .btn interno a 100%. */
.stack .btn-fx,
.form .btn-fx{
	width:100%;
	display:flex;
}

.stack .btn-fx > .btn,
.form .btn-fx > .btn{
	width:100%;
}


/* La expansión azul la hace el MISMO orbe (::after), así que no usamos ::before. */
.btn-fx::before{content:none}

.btn-fx::after{
	content:"";
	position:absolute;
	top:var(--btn-fx-orb-y, 50%);
	left:var(--btn-fx-orb-x, 22%);
	transform:translate(-50%, -50%);
	width:12px;
	height:12px;
	border-radius:999px;
	z-index:0;
	pointer-events:none;
	background:
		radial-gradient(circle at 30% 30%, rgba(255,255,255,.12), rgba(255,255,255,0) 48%),
		radial-gradient(circle at 50% 50%, var(--btn-fx-color) 0%, rgba(45,178,255,0) 70%);
	box-shadow:
		0 0 6px color-mix(in oklab, var(--btn-fx-color) 55%, transparent),
		0 0 16px color-mix(in oklab, var(--btn-fx-color) 40%, transparent),
		0 0 28px color-mix(in oklab, var(--btn-fx-color) 30%, transparent);
	opacity:.7;
	filter: blur(6px);
	transition:
		width .6s ease,
		height .6s ease,
		opacity .45s ease,
		filter .6s ease,
		border-radius .6s ease,
		background .4s ease,
		box-shadow .4s ease;
}

/* En hover: el orbe se expande para cubrir el botón y se pausa el movimiento */
.btn-fx:hover::after{
	width:260%;
	height:360%;
	opacity:.6;
	filter: blur(12px);
	border-radius:inherit;
	background: radial-gradient(circle at 50% 50%, var(--btn-fx-color) 0%, rgba(45,178,255,0) 72%);
	box-shadow:
		0 0 10px color-mix(in oklab, var(--btn-fx-color) 40%, transparent),
		0 0 30px color-mix(in oklab, var(--btn-fx-color) 28%, transparent),
		0 0 70px color-mix(in oklab, var(--btn-fx-color) 18%, transparent);
}

.btn-fx--pink{--btn-fx-color:#2db2ff}
.btn-fx--blue{--btn-fx-color:#2db2ff}
.btn-fx--green{--btn-fx-color:#2db2ff}

.hero{position:relative; padding:56px 0 12px; isolation:isolate}
.hero-inner{display:grid; grid-template-columns:1.1fr .9fr; gap:22px; align-items:start}

/* hero-stats-row debe ocupar las 2 columnas del grid */
.hero-stats-row{
	grid-column: 1 / -1;
}

.hero-bg{position:absolute; inset:-220px; overflow:hidden; pointer-events:none; z-index:0}
.hero-inner{position:relative; z-index:1}
.blob{position:absolute; width:520px; height:520px; border-radius:50%; filter: blur(40px); opacity:.68; mix-blend-mode:screen}
.blob-a{left:-160px; top:-120px; background:radial-gradient(circle at 30% 30%, rgba(96,165,250,.78), transparent 62%); animation: floaty 10s ease-in-out infinite}
.blob-b{right:-180px; top:20px; background:radial-gradient(circle at 30% 30%, rgba(94,234,212,.62), transparent 64%); animation: floaty 12s ease-in-out infinite reverse}
.grid-overlay{
	position:absolute; inset:-2px;
	background-image: linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
	background-size: 54px 54px;
	opacity:.18;
	mask-image: radial-gradient(closest-side at 50% 30%, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 34%, rgba(0,0,0,.65) 58%, rgba(0,0,0,.25) 78%, rgba(0,0,0,0) 95%);
}

@keyframes floaty{
	0%,100%{transform:translate3d(0,0,0) scale(1)}
	50%{transform:translate3d(0,22px,0) scale(1.02)}
}

.eyebrow{color:var(--muted); font-weight:700; letter-spacing:.2px; margin:0 0 10px}
.hero-title{font-size:clamp(34px, 4.2vw, 56px); line-height:1.05; margin:0 0 12px; letter-spacing:-.6px}
.hero-subtitle{color:var(--muted); font-size:clamp(16px, 1.7vw, 18px); margin:0 0 16px; max-width:56ch}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin:18px 0 10px}
.micro{font-size:12px; color:var(--muted); margin:10px 0 0}
/* Hacer el micro del hero más grande sin afectar otros micro textos */
.hero-copy .micro{font-size:36px}

/* Ajustes puntuales solicitados */
.contact-hours{ text-align:center; margin-top:14px }
.trust-micro{ text-align:center }

.hero-cards{display:grid; gap:14px}

/* Orbes pequeños detrás de la tarjeta derecha (home) */
.hero-cards{position:relative}
.hero-cards > .card{position:relative; z-index:2}
.hero-orbs{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:visible}

.bg-orbs{
	position:fixed;
	inset:0;
	width:100vw;
	height:100vh;
	pointer-events:none;
	z-index:15;
	overflow:visible;
	--hero-offset-x: calc((100vw - var(--container)) / 2);
	--hero-right-col-left: calc(var(--hero-offset-x) + (var(--container) * 0.55));
}

.bg-orbs .hero-orb{
	position:absolute;
}

.hero-orb{
	position:absolute;
	width:240px;
	height:240px;
	border-radius:999px;
	filter: blur(0px);
	opacity:.52;
	background: transparent;
	box-shadow:
		inset 0 0 0 1px rgba(255,255,255,.20),
		inset 0 12px 40px rgba(255,255,255,.08);
	will-change: transform;
}

[data-theme="light"] .hero-orb{opacity:.42; filter: blur(0px)}

@keyframes orb-bob{
	0%,100%{transform: translate3d(0, -10px, 0)}
	50%{transform: translate3d(0, 16px, 0)}
}

/* 2 orbes grandes en diagonal (azul + rosado) */
.hero-orb.orb-blue{
	background: rgba(96,165,250,.48);
	animation: orb-bob 7.4s ease-in-out infinite;
}

.hero-orb.orb-pink{
	width:270px;
	height:270px;
	background: rgba(251,113,133,.38);
	animation: orb-bob 8.2s ease-in-out infinite reverse;
}

.bg-orbs .orb-blue{
	right: calc(var(--hero-offset-x) - 44px);
	top: clamp(140px, 18vh, 220px);
}

.bg-orbs .orb-pink{
	left: calc(var(--hero-right-col-left) - 26px);
	top: clamp(360px, 46vh, 520px);
}

.section{padding:54px 0}
.section-head{display:flex; flex-direction:column; gap:10px; margin-bottom:18px}
.section-head h2{margin:0; font-size:clamp(24px, 2.3vw, 34px); letter-spacing:-.4px}
.section-sub{margin:0; color:var(--muted); max-width:74ch}

section[aria-labelledby="services-title"] .section-head{
	margin-bottom:28px;
}

.card{
	background: var(--glass-ui-bg);
	backdrop-filter: blur(var(--glass-ui-blur)) saturate(var(--glass-ui-saturate));
	-webkit-backdrop-filter: blur(var(--glass-ui-blur)) saturate(var(--glass-ui-saturate));
	border: 1px solid var(--glass-ui-border);
	border-radius: var(--glass-ui-radius);
	box-shadow: var(--glass-ui-shadow);
	padding:18px;
}

.glass{
	position:relative;
	overflow:hidden;
}

.glass::before{
	content:none;
}

.glass::after{
	content:none;
}

.hover-rise{transition: transform .22s ease, border-color .22s ease, background .22s ease}
.hover-rise:hover{transform: translateY(-3px); border-color: color-mix(in oklab, var(--primary) 35%, var(--stroke))}

.card-kicker{margin:0 0 10px; color:var(--muted); font-weight:800; font-size:12px; letter-spacing:.2px; text-transform:uppercase}

.checklist{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.checklist li{display:flex; gap:10px; align-items:flex-start; color:var(--text)}
.checklist li::before{content:"✓"; color:var(--primary); font-weight:900; margin-top:1px}

.trust-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px}
.trust-item{
	background: var(--glass-ui-bg);
	backdrop-filter: blur(var(--glass-ui-blur)) saturate(var(--glass-ui-saturate));
	-webkit-backdrop-filter: blur(var(--glass-ui-blur)) saturate(var(--glass-ui-saturate));
	border: 1px solid var(--glass-ui-border);
	border-radius: var(--glass-ui-radius);
	box-shadow: var(--glass-ui-shadow);
	padding:12px;
}
.trust-num{margin:0; font-weight:900; letter-spacing:-.2px}
.trust-label{margin:4px 0 0; color:var(--muted); font-size:12px}

.grid-3{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px}

/* Services: SOLO efecto hover (sin solapar y sin recortes) */
.glass-card-grid{
	overflow: visible;
}

.glass-card-grid > .card{
	position:relative;
	z-index:1;
	transform-origin: center;
}

.glass-card-grid > .card:hover{
	will-change: transform;
}

.glass-card-grid > .card:hover{
	z-index:10;
}

/* Override del hover “rise” para rotar y levantar */
.glass-card-grid > .card.hover-rise:hover{
	transform: translateY(-1rem) rotate(3deg);
}

.callout{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:14px;
	margin-top:18px;
	margin-bottom:32px;
	padding:18px;
	background: var(--glass-ui-bg);
	backdrop-filter: blur(var(--glass-ui-blur)) saturate(var(--glass-ui-saturate));
	-webkit-backdrop-filter: blur(var(--glass-ui-blur)) saturate(var(--glass-ui-saturate));
	border: 1px solid var(--glass-ui-border);
	border-radius: var(--glass-ui-radius);
	box-shadow: var(--glass-ui-shadow);
}
.callout-copy h3{margin:0 0 6px}
.callout-copy p{margin:0; color:var(--muted)}
.callout-actions{display:flex; gap:10px; flex-wrap:wrap}

.steps{list-style:none; margin:clamp(16px, 2vw, 22px) 0 0; padding:0; display:grid; gap:clamp(22px, 2.8vw, 34px)}
.step{display:flex; gap:clamp(18px, 3vw, 34px); align-items:center}

/* Steps: badge con efecto 3D + vidrio + icono */
.step-badge{
	position:relative;
	width: clamp(92px, 18vw, 120px);
	height: clamp(92px, 18vw, 120px);
	flex:0 0 auto;
	z-index:1;
	border-radius:32px;
	transition: 250ms;
	perspective: 500px;
	transform-style: preserve-3d;
	isolation:isolate;
}

.step-badge-back{
	position:absolute;
	inset:0;
	z-index:-1;
	border-radius:32px;
	transition: 250ms;
	transform-style: preserve-3d;
	transform-origin: bottom right;
	transform: rotateZ(15deg);
	will-change: transform;
	box-shadow: 16px 0 40px rgba(0,0,0,.35);
}

.step-badge-back-1{background: linear-gradient(135deg, var(--primary-2) -20%, var(--primary) 120%)}
.step-badge-back-2{background: linear-gradient(135deg, var(--primary) -20%, var(--primary-2) 120%)}
.step-badge-back-3{background: linear-gradient(135deg, color-mix(in oklab, var(--danger) 70%, var(--primary)) -20%, var(--primary-2) 120%)}
.step-badge-back-4{background: linear-gradient(135deg, var(--primary-2) -20%, color-mix(in oklab, var(--primary) 55%, var(--danger)) 120%)}

.step-badge-front{
	position:absolute;
	inset:0;
	z-index:1;
	border-radius:32px;
	background: var(--glass-ui-bg);
	border: 1px solid var(--glass-ui-border);
	backdrop-filter: blur(var(--glass-ui-blur)) saturate(var(--glass-ui-saturate));
	-webkit-backdrop-filter: blur(var(--glass-ui-blur)) saturate(var(--glass-ui-saturate));
	transition: 250ms;
	transform-style: preserve-3d;
	transform-origin: top left;
	overflow:hidden;
	box-shadow: var(--glass-ui-shadow);
	will-change: transform;
}

.step-badge-frame{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	opacity:.60;
}
.step-badge-frame rect{fill:none; stroke-width:4; vector-effect: non-scaling-stroke}

.step-badge-icon{
	position:absolute;
	left:50%;
	top:50%;
	width: clamp(34px, 7vw, 48px);
	height: clamp(34px, 7vw, 48px);
	transform: translate(-50%, -50%);
}

.step-badge-num{
	position:absolute;
	right:14px;
	bottom:12px;
	font-size: clamp(12px, 2.8vw, 14px);
	font-weight:900;
	letter-spacing:-.2px;
	color: var(--text);
	text-shadow: 0 10px 28px rgba(0,0,0,.35);
	transform: translateZ(1px);
}

[data-theme="light"] .step-badge-front{background: var(--glass-ui-bg)}

@media (max-width: 600px){
	.step{flex-direction:column; align-items:center}
	.step-badge{border-radius:28px}
	.step-badge-back, .step-badge-front{border-radius:28px}
	.step-badge-num{right:12px; bottom:10px}
}


.step-badge:hover .step-badge-back{
	transform: translateZ(20px) rotateZ(15deg) rotateX(-20deg) rotateY(-20deg);
}


.step-badge:hover .step-badge-front{
	transform: translateZ(80px) translateY(-5px) rotateX(15deg) rotateY(15deg);
}

.step-badge-defs{position:absolute; width:0; height:0; overflow:hidden; visibility:hidden}

.step-body{position:relative; z-index:2; min-width:0}
.step-body h3{margin:0 0 4px}
.step-body p{margin:0; color:var(--muted)}

.split{display:grid; grid-template-columns: .9fr 1.1fr; gap:14px; align-items:start}
.stack{display:grid; gap:10px; margin-top:12px}

.form{display:grid; gap:12px}
.form-row{display:grid; gap:6px}
label{font-weight:800; font-size:13px}
input{
	width:100%;
	border-radius:14px;
	border:1px solid var(--stroke);
	background: color-mix(in oklab, var(--surface) 65%, transparent);
	color:var(--text);
	padding:12px 12px;
	outline:none;
	transition:border-color .18s ease, background .18s ease;
}
input:focus{border-color:color-mix(in oklab, var(--primary) 40%, var(--stroke)); background:var(--surface)}

/* Placeholders: más blancos en modo oscuro para legibilidad */
input::placeholder{
	color: color-mix(in oklab, var(--text) 70%, transparent);
	opacity: 1;
}

[data-theme="light"] input::placeholder{
	color: color-mix(in oklab, var(--text) 45%, transparent);
}

.site-footer{border-top:none; padding:28px 0 18px; background:transparent}
.footer-inner{
	display:flex;
	justify-content:space-between;
	gap:16px;
	align-items:flex-start;
	flex-wrap:wrap;
	background: var(--glass-ui-bg);
	backdrop-filter: blur(var(--glass-ui-blur)) saturate(var(--glass-ui-saturate));
	-webkit-backdrop-filter: blur(var(--glass-ui-blur)) saturate(var(--glass-ui-saturate));
	border: 1px solid var(--glass-ui-border);
	border-radius: var(--glass-ui-radius);
	box-shadow: var(--glass-ui-shadow);
	padding: 16px 18px;
}

/* Footer: mantener tarjeta glass, sin resplandor blanco */
.footer-inner::before,
.footer-inner::after{
	content:none;
}
.footer-brand{margin:0; font-weight:900}
.footer-links{display:flex; gap:14px; flex-wrap:wrap}
.footer-links a{color:var(--muted)}
.footer-links a:hover{color:var(--text)}
.footer-rights{flex: 1 0 100%; padding-top:12px; opacity:.9}

.toast{
	position:fixed;
	left:50%;
	bottom:18px;
	transform:translateX(-50%);
	max-width:min(560px, calc(100% - 28px));
	background: var(--glass-ui-bg);
	backdrop-filter: blur(var(--glass-ui-blur)) saturate(var(--glass-ui-saturate));
	-webkit-backdrop-filter: blur(var(--glass-ui-blur)) saturate(var(--glass-ui-saturate));
	border: 1px solid var(--glass-ui-border);
	padding:12px 14px;
	border-radius: var(--glass-ui-radius);
	box-shadow: var(--glass-ui-shadow);
}

/* Chat */
.chat{
	position:fixed;
	inset:0;
	z-index:1000;
	display:flex;
	justify-content:flex-end;
	align-items:flex-end;
	--chat-vv-bottom: 0px;
	--chat-scroll-lift: 0px;
	padding:0 18px calc(18px + env(safe-area-inset-bottom, 0px));
	transform: translate3d(0, calc(-1 * max(var(--chat-vv-bottom), var(--chat-scroll-lift))), 0);
	will-change: transform;
	pointer-events:none;
}
.chat.is-active,
[data-chatbot].is-active{pointer-events:auto}
.chat-fab, .chat-panel{pointer-events:auto}

@media (max-width: 980px){
	.chat{
		inset:auto;
		right:0;
		bottom:0;
		width:auto;
		height:auto;
		padding:0;
		pointer-events:none;
	}
	.chat.is-active,
	[data-chatbot].is-active{touch-action:none; pointer-events:auto}
	.chat.is-active .chat-panel,
	.chat.is-active .chat-body,
	[data-chatbot].is-active .chat-panel,
	[data-chatbot].is-active .chat-body{touch-action:pan-y}
}
.chat-fab{
	width:54px; height:54px;
	border-radius: var(--glass-ui-radius);
	background: var(--glass-ui-bg);
	backdrop-filter: blur(var(--glass-ui-blur)) saturate(var(--glass-ui-saturate));
	-webkit-backdrop-filter: blur(var(--glass-ui-blur)) saturate(var(--glass-ui-saturate));
	border: 1px solid var(--glass-ui-border);
	color:var(--text);
	box-shadow: var(--glass-ui-shadow);
	cursor:pointer;
	transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
	position:relative;
	overflow:hidden;
	/* ligero color de acento morado/violeta para destacar sin romper la transparencia */
	--chat-accent-start: rgba(163,139,255,0.22);
	--chat-accent-end: rgba(124,58,237,0.16);
	/* animación sutil de rebote */
	animation: chat-bounce 3.6s ease-in-out infinite;
}
.chat-fab:hover{background:var(--surface); border-color:color-mix(in oklab, var(--primary) 25%, var(--glass-border))}
.chat-fab:active{transform:translateY(1px)}

.chat-fab::after{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(135deg, var(--chat-accent-start), var(--chat-accent-end));
    mix-blend-mode: screen;
    opacity: 1;
    transition: opacity .22s ease, transform .22s ease;
}

.chat-fab > .chat-fab-icon{position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center}

@keyframes chat-bounce{
    0%{transform:translateY(0)}
    28%{transform:translateY(-8px)}
    45%{transform:translateY(0)}
    100%{transform:translateY(0)}
}

/* Pausar animación en hover y cuando se reduce movimiento */
.chat-fab:hover{animation-play-state:paused; transform:translateY(-2px)}
@media (prefers-reduced-motion: reduce){
    .chat-fab{animation:none}
}
.chat-panel{
	position:absolute;
	right:18px;
	bottom:calc(82px + env(safe-area-inset-bottom, 0px));
	width:min(380px, calc(100vw - 36px));
	z-index: 1001;
	border-radius: var(--glass-ui-radius);
	background: var(--glass-ui-bg);
	backdrop-filter: blur(var(--glass-ui-blur)) saturate(var(--glass-ui-saturate));
	-webkit-backdrop-filter: blur(var(--glass-ui-blur)) saturate(var(--glass-ui-saturate));
	border: 1px solid var(--glass-ui-border);
	box-shadow: var(--glass-ui-shadow);
	overflow:hidden;
	display: flex;
	flex-direction: column;
}
.chat-panel[hidden]{display:none}

.chat-panel.is-open{
	display: flex;
}

.chat-panel.is-closing{
	display: flex;
}

/* Chat móvil: full screen simple */
@media (max-width: 980px){
	.chat-fab{
		position: fixed;
		right: 18px;
		bottom: calc(18px + env(safe-area-inset-bottom, 0px));
		z-index: 9999;
		pointer-events: auto;
	}

	.chat-panel{
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		top: 0;
		bottom: 0;
		width: 100% !important;
		height: 100%;
		max-height: none !important;
		border-radius: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		overflow: hidden !important;
		z-index: 10000 !important;
		opacity: 1 !important;
		transform: none !important;
		pointer-events: auto !important;
	}
	.chat-panel[hidden]{display:none !important}
}
.chat-header{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:12px 12px; border-bottom:none}
.chat-header .btn-ghost{width:32px; height:32px; padding:6px; display:inline-flex; align-items:center; justify-content:center; line-height:1}
.chat-clear{font-size:13px}
.chat-title{margin:0; font-weight:900}
.chat-sub{margin:2px 0 0; color:var(--muted); font-size:12px}
.chat-body{max-height:360px; overflow:auto; padding:12px; display:grid; gap:10px; align-content:start; overscroll-behavior:contain; -webkit-overflow-scrolling:touch}
.chat-form{display:flex; gap:10px; padding:12px; border-top:none}
.chat-form input{padding:12px 12px; border-radius:14px; flex:1}

/* Chat móvil: sombra leve en texto (tipo iOS) para legibilidad sobre glass */
@media (max-width: 980px){
	.chat-header{
		position: sticky;
		top: 0;
		z-index: 6;
		flex-shrink: 0;
		background: inherit;
		backdrop-filter: blur(var(--glass-ui-blur)) saturate(var(--glass-ui-saturate));
		-webkit-backdrop-filter: blur(var(--glass-ui-blur)) saturate(var(--glass-ui-saturate));
		padding-top: calc(12px + env(safe-area-inset-top, 0px));
	}
	.chat-header .btn-ghost{margin-top: env(safe-area-inset-top, 0px)}
	.chat-body{
		flex: 1;
		max-height: none;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.chat-form{
		position: sticky;
		bottom: 0;
		flex-shrink: 0;
		background: inherit;
		backdrop-filter: blur(var(--glass-ui-blur)) saturate(var(--glass-ui-saturate));
		-webkit-backdrop-filter: blur(var(--glass-ui-blur)) saturate(var(--glass-ui-saturate));
		padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	}
	.chat-panel, .chat-panel *{ text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 0 10px rgba(0,0,0,.18) }
	[data-theme="light"] .chat-panel, [data-theme="light"] .chat-panel *{ text-shadow: 0 1px 2px rgba(10,16,30,.26), 0 0 10px rgba(10,16,30,.10) }
	.chat-panel{
		background: rgba(8,12,22,.62);
		border-color: rgba(255,255,255,.22);
	}
	[data-theme="light"] .chat-panel{
		background: rgba(255,255,255,.82);
		border-color: rgba(10,16,30,.16);
	}
	.chat-panel, .chat-panel *{
		text-shadow: 0 1px 4px rgba(0,0,0,.78), 0 0 12px rgba(0,0,0,.28);
	}
	[data-theme="light"] .chat-panel, [data-theme="light"] .chat-panel *{
		text-shadow: 0 1px 3px rgba(10,16,30,.32), 0 0 8px rgba(10,16,30,.18);
	}
}

.bubble{max-width:90%; padding:10px 12px; border-radius:16px; border:1px solid var(--stroke)}
.bubble.bot{background:var(--surface); justify-self:start}
.bubble.me{background:linear-gradient(135deg, rgba(96,165,250,.18), rgba(94,234,212,.16)); justify-self:end}
.bubble small{display:block; color:var(--muted); font-size:11px; margin-top:6px}

.bubble.typing{padding:12px 16px}
.typing-dots{display:inline-flex; gap:6px; align-items:center; height:10px}
.typing-dots span{width:6px; height:6px; border-radius:999px; background:currentColor; opacity:.35; animation: chat-typing 1s ease-in-out infinite}
.typing-dots span:nth-child(2){animation-delay:.15s}
.typing-dots span:nth-child(3){animation-delay:.3s}

@keyframes chat-typing{
	0%, 80%, 100%{opacity:.25; transform:translateY(0)}
	40%{opacity:.85; transform:translateY(-3px)}
}

.rating{display:inline-flex; gap:2px; font-size:14px}
.star{opacity:.9; position:relative; display:inline-block; line-height:1; color:var(--text)}
.star.half{color:rgba(255,255,255,.28)}
[data-theme="light"] .star.half{color:rgba(10,16,30,.28)}
.star.half::after{content:"★"; position:absolute; left:0; top:0; width:50%; overflow:hidden; color:var(--text)}
.star.off{opacity:.28}
.review-meta{display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:12px; margin-top:8px}

/* Reviews carousel */
.reviews-carousel{display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:10px 0}
.reviews-viewport{overflow:hidden; width:100%; padding:16px 0; margin:-16px 0}
.reviews-track{display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 32px) / 3); gap:16px; transition:transform .4s ease}
.reviews-nav{width:36px; height:36px; padding:6px; display:inline-flex; align-items:center; justify-content:center}

@media (max-width: 980px){
	.reviews-carousel{grid-template-columns:1fr; gap:12px}
	.reviews-nav{width:100%; height:40px}
	.reviews-track{grid-auto-columns:calc((100% - 16px) / 2)}
}

@media (max-width: 640px){
	.reviews-track{grid-auto-columns:100%}
}

/* FAQ */
.faq{display:grid; gap:10px}
.faq-item{
	background: var(--glass-ui-bg);
	backdrop-filter: blur(var(--glass-ui-blur)) saturate(var(--glass-ui-saturate));
	-webkit-backdrop-filter: blur(var(--glass-ui-blur)) saturate(var(--glass-ui-saturate));
	border: 1px solid var(--glass-ui-border);
	border-radius: var(--glass-ui-radius);
	box-shadow: var(--glass-ui-shadow);
	padding:10px 12px;
}
.faq-item summary{
	cursor:pointer;
	font-weight:900;
	list-style:none;
	outline:none;
	user-select:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
	content:"▾";
	float:right;
	opacity:.7;
	transform: translateY(1px);
	transition: transform .18s ease;
}
.faq-item[open] summary::after{transform: rotate(180deg) translateY(-1px)}
.faq-item p{margin:10px 0 2px; color:var(--muted)}

.card h3{margin:10px 0 6px}
.card p{margin:0 0 10px}

/* reveal */
[data-reveal]{
	visibility:hidden;
	opacity:1;
	transform:none;
	position:relative;
	top:10px;
	transition: top .55s ease;
	transition-delay: var(--reveal-delay, 0ms);
	contain-intrinsic-size: 1px 120px;
}
[data-reveal].is-in{
	visibility:visible;
	top:0;
}

/* rendimiento: evitar render fuera de pantalla (sin quitar efectos) */
main > section.section{
	content-visibility:auto;
	contain-intrinsic-size: 1px 900px;
}

/* rendimiento: compositing para animaciones */
.hero-orb, .bg-floaters li{will-change: transform}

@media (max-width: 980px){
	/* Header móvil: evita recortes (acciones en su propia fila) */
	.header-inner{
		grid-template-columns: 1fr;
		grid-template-areas:
			"brand"
			"actions"
			"nav";
		row-gap:8px;
	}
	.header-actions{justify-content:flex-start; flex-wrap:nowrap; gap:6px}
	.header-actions .header-ctrl{
		width:auto; 
		flex:1 1 0;
		min-width:0;
		padding:0 8px;
		font-size:13px;
	}
	.header-actions .btn-icon{
		width:12px;
		height:12px;
		font-size:12px;
	}

	.hero-inner{grid-template-columns:1fr; padding-top:12px}
	.grid-3{grid-template-columns:1fr}
	.split{grid-template-columns:1fr}
	.nav{display:none}
	.mobile-nav-toggle{display:inline-flex !important}
}

/* Pantallas pequeñas: botones en formato vertical (icono arriba, texto abajo) */
@media (max-width: 420px){
	.header-actions{gap:4px}
	.header-actions .header-ctrl{
		flex-direction:column;
		padding:4px 4px;
		font-size:10px;
		height:auto;
		min-height:44px;
		gap:2px;
	}
	.header-actions .header-ctrl > span:not(.btn-icon){
		max-width:100%;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
		line-height:1.2;
	}
	.header-actions .btn-icon{
		width:16px;
		height:16px;
		font-size:14px;
	}
}

/* Pantallas muy pequeñas: texto aún más compacto */
@media (max-width: 340px){
	.header-actions{gap:2px}
	.header-actions .header-ctrl{
		padding:3px 2px;
		font-size:9px;
		min-height:40px;
	}
	.header-actions .btn-icon{
		width:14px;
		height:14px;
		font-size:12px;
	}
}

@media (max-width: 640px){
	/* Centrado móvil: Proceso + Reviews */
	section[aria-labelledby="process-title"] .section-head,
	section[aria-labelledby="reviews-title"] .section-head{
		align-items:center;
		text-align:center;
	}
	section[aria-labelledby="process-title"] .section-sub,
	section[aria-labelledby="reviews-title"] .section-sub{
		margin-left:auto;
		margin-right:auto;
	}

	/* Centrado móvil: pasos del proceso */
	.steps{justify-items:center}
	.step-body{text-align:center}
	.step-body p{margin-left:auto; margin-right:auto}

	/* Centrado móvil: footer */
	.footer-inner{flex-direction:column; align-items:center; text-align:center}
	.footer-left{max-width:60ch}
	.footer-links{justify-content:center}
	.footer-rights{text-align:center}

	/* Blobs grandes: más pequeños en móvil para que no invadan la pantalla */
	.bg-blob{filter: blur(8px); opacity:.55}
	.bg-blob.a{width:220px; height:220px}
	.bg-blob.b{width:260px; height:220px}
	.bg-blob.c{width:230px; height:230px}
	/* Reduce un poco los floaters más grandes */
	.bg-floaters li:nth-child(7),
	.bg-floaters li:nth-child(10){width:110px; height:110px}

	.bg-orbs .hero-orb{
		width:180px;
		height:180px;
	}

	.bg-orbs .orb-blue{
		right: 16px;
		top: 140px;
	}

	.bg-orbs .orb-pink{
		left: 12px;
		top: 320px;
	}
}

@media (prefers-reduced-motion: reduce){
	*{scroll-behavior:auto !important}
	.blob{animation:none}
	.bg-blob{animation:none}
	.hero-orb{animation:none}
	[data-reveal]{transition:none; opacity:1; transform:none; visibility:visible; top:0}
	.btn, .hover-rise, .nav-link{transition:none}
	.mobile-nav-panel{transition:none !important; transform:none !important; opacity:1 !important; max-height:none !important; padding:6px !important}
	.btn:hover::before{animation:none}
	.btn-fx::after{animation:none}
	.glass-card-grid > .card{transition:none}
	.glass-card-grid > .card.hover-rise:hover{transform:none}
	.step-badge-back, .step-badge-front{transition:none; transform:none !important}
	.credit-score-widget .score-indicator{transition:none}
	.credit-score-widget .score-number{transition:none}
}

/* =====================================================
   CREDIT SCORE WIDGET - Animated Score Display
   ===================================================== */

.credit-score-widget {
	margin-top: 32px;
	padding: 24px 32px;
	background: var(--glass-ui-bg);
	border: 1px solid var(--glass-ui-border);
	border-radius: var(--glass-ui-radius);
	backdrop-filter: blur(var(--glass-ui-blur)) saturate(var(--glass-ui-saturate));
	-webkit-backdrop-filter: blur(var(--glass-ui-blur)) saturate(var(--glass-ui-saturate));
	box-shadow: var(--glass-ui-shadow);
	width: 320px;
	min-width: 320px;
	flex-shrink: 0;
}

.score-display {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 20px;
}

.score-number {
	font-size: 72px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -2px;
	color: var(--text);
	font-variant-numeric: tabular-nums;
	transition: color 0.3s ease;
	min-width: 130px;
}

.score-label-wrapper {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 100px;
}

.score-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 0;
	border-radius: 50px;
	font-size: 13px;
	font-weight: 600;
	text-transform: capitalize;
	background: var(--surface);
	color: var(--text);
	border: 1px solid var(--stroke);
	transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease;
	width: 90px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.score-badge.score-poor {
	background: rgba(239, 68, 68, 0.15);
	border-color: rgba(239, 68, 68, 0.4);
	color: #ef4444;
}

.score-badge.score-fair {
	background: rgba(249, 115, 22, 0.15);
	border-color: rgba(249, 115, 22, 0.4);
	color: #f97316;
}

.score-badge.score-average {
	background: rgba(250, 204, 21, 0.15);
	border-color: rgba(250, 204, 21, 0.4);
	color: #eab308;
}

.score-badge.score-good {
	background: rgba(34, 197, 94, 0.15);
	border-color: rgba(34, 197, 94, 0.4);
	color: #22c55e;
}

.score-badge.score-excellent {
	background: rgba(16, 185, 129, 0.15);
	border-color: rgba(16, 185, 129, 0.4);
	color: #10b981;
}

[data-theme="light"] .score-badge.score-poor {
	background: rgba(239, 68, 68, 0.1);
	color: #dc2626;
}

[data-theme="light"] .score-badge.score-fair {
	background: rgba(249, 115, 22, 0.1);
	color: #ea580c;
}

[data-theme="light"] .score-badge.score-average {
	background: rgba(250, 204, 21, 0.12);
	color: #ca8a04;
}

[data-theme="light"] .score-badge.score-good {
	background: rgba(34, 197, 94, 0.1);
	color: #16a34a;
}

[data-theme="light"] .score-badge.score-excellent {
	background: rgba(16, 185, 129, 0.1);
	color: #059669;
}

.score-text {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 1px;
	color: var(--muted);
	text-transform: uppercase;
}

.score-bar-container {
	position: relative;
	padding-top: 16px;
}

.score-bar {
	display: flex;
	height: 8px;
	border-radius: 50px;
	overflow: hidden;
	gap: 3px;
}

.score-segment {
	flex: 1;
	border-radius: 50px;
}

.score-indicator {
	position: absolute;
	top: 0;
	left: 0;
	transform: translateX(-50%);
	transition: left 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.indicator-arrow {
	font-size: 14px;
	color: var(--text);
	text-shadow: 0 2px 4px rgba(0,0,0,0.3);
	animation: bounce-arrow 1s ease-in-out infinite;
}

@keyframes bounce-arrow {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(3px); }
}

/* Responsive */
@media (max-width: 480px) {
	.credit-score-widget {
		padding: 20px 20px;
		width: 100%;
		min-width: unset;
		margin-top: 24px;
	}

	.score-number {
		font-size: 56px;
		min-width: 100px;
	}

	.score-badge {
		padding: 5px 0;
		font-size: 11px;
		width: 75px;
	}

	.score-display {
		gap: 16px;
	}

	.score-label-wrapper {
		min-width: 80px;
	}
}

/* =====================================================
   HERO STATS ROW - Credit Score + Results Side by Side
   ===================================================== */

.hero-stats-row {
	display: flex;
	gap: 24px;
	margin-top: 32px;
	align-items: stretch;
}

.hero-stats-row .credit-score-widget {
	margin-top: 0;
	flex: 0 0 auto;
}

/* =====================================================
   RESULTS STATS WIDGET
   ===================================================== */

.results-stats-widget {
	flex: 1;
	padding: 24px;
	background: var(--glass-ui-bg);
	border: 1px solid var(--glass-ui-border);
	border-radius: var(--glass-ui-radius);
	backdrop-filter: blur(var(--glass-ui-blur)) saturate(var(--glass-ui-saturate));
	-webkit-backdrop-filter: blur(var(--glass-ui-blur)) saturate(var(--glass-ui-saturate));
	box-shadow: var(--glass-ui-shadow);
	display: flex;
	flex-direction: column;
}

.results-title {
	margin: 0 0 8px 0;
	font-size: 22px;
	font-weight: 700;
	color: var(--text);
	background: linear-gradient(90deg, var(--primary), var(--primary-2));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.results-title {
		color: var(--primary);
		-webkit-text-fill-color: currentColor;
	}
}

.results-subtitle {
	margin: 0 0 16px 0;
	font-size: 13px;
	color: var(--muted);
	line-height: 1.4;
}

.results-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	flex: 1;
}

.result-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 16px 12px;
	background: var(--surface);
	border: 1px solid var(--stroke);
	border-radius: var(--radius-sm);
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.result-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0,0,0,0.15);
	border-color: var(--primary);
}

.result-icon {
	width: 36px;
	height: 36px;
	margin-bottom: 10px;
	color: var(--muted);
	transition: color 0.3s ease;
}

.result-card:hover .result-icon {
	color: var(--primary);
}

.result-icon svg {
	width: 100%;
	height: 100%;
}

.result-percent {
	font-size: 32px;
	font-weight: 700;
	line-height: 1;
	color: var(--text);
	font-variant-numeric: tabular-nums;
	margin-bottom: 6px;
	background: linear-gradient(135deg, var(--text) 40%, var(--primary));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.result-percent {
		color: var(--text);
		-webkit-text-fill-color: currentColor;
	}
}

.result-label {
	font-size: 10px;
	font-weight: 500;
	color: var(--muted);
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

/* Responsive - Results Stats */
@media (max-width: 1100px) {
	.results-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 980px) {
	.hero-stats-row {
		flex-direction: column;
		align-items: stretch;
	}

	.hero-stats-row .credit-score-widget {
		max-width: 100%;
	}

	.results-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 680px) {
	.results-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.results-stats-widget {
		padding: 20px 16px;
	}

	.results-title {
		font-size: 18px;
	}

	.results-subtitle {
		font-size: 12px;
	}

	.results-grid {
		gap: 12px;
	}

	.result-card {
		padding: 14px 10px;
	}

	.result-icon {
		width: 28px;
		height: 28px;
		margin-bottom: 8px;
	}

	.result-percent {
		font-size: 24px;
	}

	.result-label {
		font-size: 9px;
	}
}

/* =====================================================
   SERVICES PAGE - Services Grid
   ===================================================== */

.services-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 32px;
}

.service-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 28px 20px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card h3 {
	margin: 0 0 12px 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--text);
}

.service-card p {
	margin: 0;
	font-size: 13px;
	color: var(--muted);
	line-height: 1.5;
}

.service-icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 16px;
	color: var(--primary);
	transition: transform 0.3s ease, color 0.3s ease;
}

.service-icon svg {
	width: 100%;
	height: 100%;
}

.service-card:hover .service-icon {
	transform: scale(1.1);
	color: var(--primary-2);
}

/* Card icons for general cards */
.card-icon {
	width: 48px;
	height: 48px;
	margin: 0 auto 12px;
	transition: transform 0.3s ease;
}

.card-icon svg {
	width: 100%;
	height: 100%;
}

.card:hover .card-icon {
	transform: scale(1.1);
}

/* Responsive - Services Grid */
@media (max-width: 1100px) {
	.services-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.services-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.service-card {
		padding: 24px 16px;
	}

	.service-icon {
		width: 48px;
		height: 48px;
	}

	.service-card h3 {
		font-size: 15px;
	}

	.service-card p {
		font-size: 12px;
	}
}

/* Service card links */
.service-card-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--primary);
	text-decoration: none;
	transition: gap 0.3s ease, color 0.3s ease;
}

.service-card-link:hover {
	gap: 10px;
	color: var(--primary-2);
}

.service-card-link::after {
	content: "→";
	transition: transform 0.3s ease;
}

.service-card-link:hover::after {
	transform: translateX(2px);
}

/* =====================================================
   SERVICE DETAIL PAGES
   ===================================================== */

/* Breadcrumb */
.breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 24px;
	font-size: 13px;
	color: var(--muted);
}

.breadcrumb a {
	color: var(--muted);
	text-decoration: none;
	transition: color 0.2s ease;
}

.breadcrumb a:hover {
	color: var(--primary);
}

.breadcrumb span[aria-hidden="true"] {
	opacity: 0.5;
}

/* Service Detail Grid */
.service-detail-grid {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 32px;
	margin-top: 32px;
}

/* Main Content */
.service-detail-main {
	padding: 32px;
}

.service-detail-main h2 {
	margin: 32px 0 16px 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--text);
}

.service-detail-main h2:first-of-type {
	margin-top: 24px;
}

.service-detail-main p {
	margin: 0 0 16px 0;
	font-size: 15px;
	line-height: 1.7;
	color: var(--muted);
}

.service-detail-main .checklist {
	margin: 16px 0 24px 0;
}

.service-detail-main .checklist li {
	font-size: 14px;
	padding: 8px 0;
}

/* Large Service Icon */
.service-icon-large {
	width: 72px;
	height: 72px;
	color: var(--primary);
	margin-bottom: 8px;
}

.service-icon-large svg {
	width: 100%;
	height: 100%;
}

/* Sidebar */
.service-detail-sidebar {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.service-detail-sidebar .card {
	padding: 24px;
}

.service-detail-sidebar h3 {
	margin: 0 0 12px 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--text);
}

.service-detail-sidebar p {
	margin: 0 0 16px 0;
	font-size: 13px;
	color: var(--muted);
	line-height: 1.5;
}

.service-detail-sidebar .btn {
	width: 100%;
	justify-content: center;
}

/* Service Links in Sidebar */
.service-links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.service-links li {
	border-bottom: 1px solid var(--stroke);
}

.service-links li:last-child {
	border-bottom: none;
}

.service-links a {
	display: block;
	padding: 10px 0;
	font-size: 13px;
	color: var(--muted);
	text-decoration: none;
	transition: color 0.2s ease, padding-left 0.2s ease;
}

.service-links a:hover {
	color: var(--primary);
	padding-left: 8px;
}

/* Comparison Box (for Faster Disputes page) */
.comparison-box {
	background: var(--surface);
	border: 1px solid var(--stroke);
	border-radius: var(--radius-sm);
	padding: 20px;
	margin: 20px 0;
}

.comparison-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid var(--stroke);
}

.comparison-item:last-child {
	border-bottom: none;
}

.comparison-item.highlight {
	background: linear-gradient(90deg, rgba(94,234,212,0.1), rgba(96,165,250,0.1));
	margin: 0 -20px;
	padding: 12px 20px;
	border-radius: var(--radius-sm);
}

.comparison-label {
	font-size: 14px;
	color: var(--muted);
}

.comparison-value {
	font-size: 20px;
	font-weight: 700;
	color: var(--text);
}

.comparison-item.highlight .comparison-value {
	background: linear-gradient(90deg, var(--primary), var(--primary-2));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.comparison-item.highlight .comparison-value {
		color: var(--primary);
		-webkit-text-fill-color: currentColor;
	}
}

/* Responsive - Service Detail Pages */
@media (max-width: 980px) {
	.service-detail-grid {
		grid-template-columns: 1fr;
	}

	.service-detail-sidebar {
		order: -1;
	}

	.service-detail-main {
		padding: 24px;
	}
}

@media (max-width: 600px) {
	.service-detail-main {
		padding: 20px 16px;
	}

	.service-detail-main h2 {
		font-size: 18px;
	}

	.service-detail-main p {
		font-size: 14px;
	}

	.service-icon-large {
		width: 56px;
		height: 56px;
	}

	.breadcrumb {
		font-size: 12px;
	}

	.service-detail-sidebar .card {
		padding: 20px 16px;
	}
}

/* ========================================
   Service Testimonials
   ======================================== */

.service-testimonial {
	margin-top: 32px;
	padding: 24px;
	border-radius: var(--glass-ui-radius);
	background: linear-gradient(135deg, rgba(96, 165, 250, 0.08), rgba(94, 234, 212, 0.08));
	border: 1px solid rgba(255, 255, 255, 0.1);
	position: relative;
}

.service-testimonial::before {
	content: '"';
	position: absolute;
	top: -10px;
	left: 20px;
	font-size: 72px;
	font-family: Georgia, serif;
	background: linear-gradient(135deg, var(--primary), var(--primary-2));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	opacity: 0.4;
	line-height: 1;
}

.testimonial-quote {
	font-size: 15px;
	line-height: 1.7;
	font-style: italic;
	margin: 0 0 16px 0;
	color: var(--text);
	opacity: 0.9;
}

.testimonial-author {
	display: flex;
	align-items: center;
	gap: 12px;
}

.testimonial-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--primary), var(--primary-2));
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 16px;
	color: #0b1220;
	flex-shrink: 0;
}

.testimonial-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.testimonial-name {
	font-weight: 600;
	font-size: 14px;
	color: var(--text);
}

.testimonial-detail {
	font-size: 12px;
	opacity: 0.7;
}

.testimonial-stars {
	display: flex;
	gap: 2px;
	margin-left: auto;
	color: #facc15;
	font-size: 14px;
}

@media (max-width: 600px) {
	.service-testimonial {
		padding: 20px 16px;
	}

	.testimonial-quote {
		font-size: 14px;
	}

	.testimonial-stars {
		display: none;
	}
}

/* ========================================
   Testimonial Carousel
   ======================================== */

.testimonial-carousel {
	position: relative;
	margin-top: 32px;
	overflow: hidden;
}

.testimonial-carousel-track {
	position: relative;
	min-height: 200px;
}

.testimonial-carousel .service-testimonial {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin-top: 0;
	opacity: 0;
	transform: translateX(30px);
	transition: opacity 0.5s ease, transform 0.5s ease;
	pointer-events: none;
}

.testimonial-carousel .service-testimonial.active {
	opacity: 1;
	transform: translateX(0);
	pointer-events: auto;
	position: relative;
}

.testimonial-carousel .service-testimonial.exit {
	opacity: 0;
	transform: translateX(-30px);
}

/* Carousel Controls */
.carousel-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 20px;
}

.carousel-dots {
	display: flex;
	gap: 8px;
}

.carousel-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--stroke);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: all 0.3s ease;
}

.carousel-dot:hover {
	background: var(--muted);
}

.carousel-dot.active {
	background: linear-gradient(135deg, var(--primary), var(--primary-2));
	width: 24px;
	border-radius: 4px;
}

.carousel-btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	color: var(--text);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	font-size: 18px;
}

.carousel-btn:hover {
	background: var(--surface-2);
	border-color: var(--primary);
}

.carousel-btn:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

/* Pricing page */
.pricing-hero {
	position: relative;
}

.pricing-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	margin-top: 24px;
}

.pricing-card {
	position: relative;
	padding: 28px;
	overflow: hidden;
}

.pricing-card--featured {
	border: 1px solid color-mix(in oklab, var(--primary) 70%, transparent);
	box-shadow: 0 14px 38px rgba(37, 99, 235, 0.22), var(--glass-ui-shadow);
}

.pricing-badge {
	position: absolute;
	top: 18px;
	right: 18px;
	padding: 6px 12px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--primary), var(--primary-2));
	color: #0b1220;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
}

.pricing-name {
	margin: 8px 0 6px;
	font-size: 28px;
}

.pricing-kicker {
	margin: 0 0 20px;
	color: var(--muted);
}

.pricing-price {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.pricing-amount {
	font-size: 40px;
	font-weight: 700;
}

.pricing-period {
	color: var(--muted);
}

.pricing-recurring {
	margin-top: 6px;
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.pricing-recurring-amount {
	font-size: 22px;
	font-weight: 600;
}

.pricing-recurring-period {
	color: var(--muted);
}

.pricing-features {
	list-style: none;
	padding: 0;
	margin: 20px 0 20px;
	display: grid;
	gap: 10px;
}

.pricing-features li {
	position: relative;
	padding-left: 24px;
}

.pricing-features li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--primary-2);
	font-weight: 700;
}

.pricing-cta {
	width: 100%;
}

.pricing-note {
	margin-top: 12px;
	font-size: 12px;
	color: var(--muted);
}

.thank-you-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	margin-top: 20px;
}

.thank-you-card {
	padding: 28px;
}

.thank-you-icon {
	font-size: 28px;
}

.thank-you-steps {
	list-style: none;
	padding: 0;
	margin: 16px 0 20px;
	display: grid;
	gap: 10px;
}

.thank-you-steps li {
	position: relative;
	padding-left: 24px;
}

.thank-you-steps li::before {
	content: "•";
	position: absolute;
	left: 8px;
	color: var(--muted);
}

@media (max-width: 768px) {
	.pricing-card,
	.thank-you-card {
		padding: 22px;
	}

	.pricing-amount {
		font-size: 34px;
	}
}

/* Carousel Progress Bar */
.carousel-progress {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--primary), var(--primary-2));
	border-radius: 1px;
	width: 0%;
	transition: width 0.1s linear;
}

@media (max-width: 600px) {
	.testimonial-carousel-track {
		min-height: 180px;
	}
	
	.testimonial-carousel .service-testimonial {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		opacity: 0;
		pointer-events: none;
		visibility: hidden;
	}
	
	.testimonial-carousel .service-testimonial.active {
		position: relative;
		opacity: 1;
		pointer-events: auto;
		visibility: visible;
	}

	.carousel-controls {
		gap: 12px;
	}

	.carousel-btn {
		width: 32px;
		height: 32px;
		font-size: 16px;
	}

	.carousel-dot {
		width: 6px;
		height: 6px;
	}

	.carousel-dot.active {
		width: 18px;
	}
}