/* Shared shell for Costa Rica service landings. Scoped to .sw-sv */

body.servicio-software-a-la-medida,
body.servicio-automatizacion-de-procesos,
body.servicio-transformacion-digital {
	background: #0a0a0a;
	color: #f4f4f1;
}

.sw-sv {
	--sw-bg: #0a0a0a;
	--sw-bg-2: #111111;
	--sw-ink: #f4f4f1;
	--sw-muted: #9c9c96;
	--sw-line: rgba(244, 244, 241, 0.12);
	--sw-cyan: #6ec1e4;
	--sw-max: 1120px;
	--sw-ease: cubic-bezier(0.22, 1, 0.36, 1);
	background: var(--sw-bg);
	color: var(--sw-ink);
	font-family: Inter, system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.6;
}

.sw-sv * { box-sizing: border-box; }

.sw-sv h1,
.sw-sv h2,
.sw-sv h3,
.sw-sv-btn {
	font-family: "Instrument Sans", Inter, system-ui, sans-serif;
	font-weight: 500;
	letter-spacing: -0.035em;
	line-height: 1.12;
}

.sw-sv-header {
	position: sticky;
	top: 0;
	z-index: 40;
	border-bottom: 1px solid transparent;
}

.sw-sv-header.is-stuck {
	background: rgba(10, 10, 10, 0.78);
	border-bottom-color: var(--sw-line);
	backdrop-filter: blur(16px);
}

.sw-sv-header-inner,
.sw-sv-hero,
.sw-sv-approach,
.sw-sv-steps,
.sw-sv-related,
.sw-sv-agenda,
.sw-sv-reviews,
.sw-sv-final,
.sw-sv-footer {
	max-width: calc(var(--sw-max) + 64px);
	margin: 0 auto;
	padding-left: 28px;
	padding-right: 28px;
}

.sw-sv-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: 18px;
	padding-bottom: 18px;
}

.sw-sv-logo img {
	display: block;
	width: auto;
	height: 28px;
}

.sw-sv-nav,
.sw-sv-footer nav,
.sw-sv-related nav {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
}

.sw-sv-nav a,
.sw-sv-footer nav a,
.sw-sv-related a,
.sw-sv-link {
	color: rgba(244, 244, 241, 0.72);
	text-decoration: none;
	font-size: 13px;
	letter-spacing: 0.04em;
}

.sw-sv-nav a:hover,
.sw-sv-link:hover,
.sw-sv-footer nav a:hover,
.sw-sv-related a:hover {
	color: var(--sw-ink);
}

.sw-sv-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	border-radius: 999px;
	background: #fff;
	color: #111;
	text-decoration: none;
	font-size: 14px;
	line-height: 1;
}

.sw-sv-btn-sm { padding: 10px 16px; }

.sw-sv-btn:hover { transform: translateY(-1px); }

.sw-sv-hero {
	display: flex;
	align-items: center;
	min-height: calc(100svh - 72px);
	min-height: calc(100dvh - 72px);
	padding-top: 64px;
	padding-bottom: 72px;
	text-align: center;
}

.sw-sv-hero-copy { max-width: 920px; margin: 0 auto; }

.sw-sv-eyebrow {
	margin: 0 0 18px;
	color: var(--sw-muted);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.sw-sv-hero h1 {
	margin: 0 auto 22px;
	max-width: 18ch;
	font-size: clamp(36px, 5.2vw, 68px);
}

.sw-sv-lead,
.sw-sv-section-head p,
.sw-sv-grid p,
.sw-sv-steps p,
.sw-sv-agenda p,
.sw-sv-final p,
.sw-sv-footer p {
	color: rgba(244, 244, 241, 0.78);
}

.sw-sv-lead {
	max-width: 62ch;
	margin: 0 auto 28px;
	font-size: 18px;
}

.sw-sv-hero-actions {
	display: flex;
	justify-content: center;
	gap: 22px;
	align-items: center;
}

.sw-sv-section-head {
	max-width: 720px;
	margin: 0 auto 40px;
	text-align: center;
}

.sw-sv-section-head h2,
.sw-sv-final h2 {
	margin: 0 0 14px;
	font-size: clamp(32px, 4vw, 52px);
}

.sw-sv-approach,
.sw-sv-steps,
.sw-sv-related,
.sw-sv-reviews {
	padding-top: 72px;
	padding-bottom: 72px;
}

.sw-sv-grid,
.sw-sv-steps-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sw-sv-grid li,
.sw-sv-steps-list li {
	padding: 24px;
	border: 1px solid var(--sw-line);
	border-radius: 18px;
	background: var(--sw-bg-2);
}

.sw-sv-grid h3,
.sw-sv-steps h3 {
	margin: 0 0 8px;
	font-size: 22px;
}

.sw-sv-grid p,
.sw-sv-steps p { margin: 0; }

.sw-sv-steps-list { counter-reset: none; }

.sw-sv-steps-list li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 16px;
	align-items: start;
}

.sw-sv-steps-list span {
	color: var(--sw-cyan);
	font-size: 13px;
	letter-spacing: 0.08em;
}

.sw-sv-related-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}

.sw-sv-related nav,
.sw-sv-related ul {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sw-sv-related a { font-size: 16px; letter-spacing: -0.02em; }

.sw-sv-agenda {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 48px;
	align-items: start;
	padding-top: 72px;
	padding-bottom: 72px;
}

.sw-sv-agenda-form {
	padding: 12px;
	border-radius: 24px;
	background: #f6f7f4;
	color: #111;
}

.sw-sv-agenda .sr-app {
	max-width: none;
	margin: 0;
	font-family: Inter, system-ui, sans-serif;
}

.sw-sv-agenda .sr-card {
	background: transparent;
	border: 0;
	padding: 20px 18px 12px;
}

.sw-sv-reviews-wrap { position: relative; }

.sw-sv-reviews-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 32px) / 3);
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 8px;
}

.sw-sv-reviews-track::-webkit-scrollbar { display: none; }

.sw-sv-reviews-track figure {
	margin: 0;
	padding: 24px;
	border: 1px solid var(--sw-line);
	border-radius: 18px;
	background: var(--sw-bg-2);
	scroll-snap-align: start;
}

.sw-sv-review-top {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-bottom: 14px;
}

.sw-sv-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid var(--sw-line);
	font-size: 12px;
}

.sw-sv-reviews figcaption { display: grid; }
.sw-sv-reviews figcaption span,
.sw-sv-reviews blockquote p {
	color: var(--sw-muted);
	font-size: 14px;
}

.sw-sv-reviews blockquote { margin: 0; }
.sw-sv-reviews blockquote p { margin: 0; color: rgba(244, 244, 241, 0.88); }

.sw-sv-reviews-nav {
	position: absolute;
	top: 40%;
	width: 40px;
	height: 40px;
	border: 1px solid var(--sw-line);
	border-radius: 50%;
	background: rgba(10, 10, 10, 0.72);
	color: #fff;
	cursor: pointer;
}

.sw-sv-reviews-prev { left: -6px; }
.sw-sv-reviews-next { right: -6px; }

.sw-sv-final {
	padding-top: 40px;
	padding-bottom: 96px;
	text-align: center;
}

.sw-sv-final p { max-width: 58ch; margin: 0 auto 22px; }

.sw-sv-footer {
	border-top: 1px solid var(--sw-line);
	padding-top: 48px;
	padding-bottom: 64px;
}

.sw-sv-copy { font-size: 12px; color: #6e6e6a; }

.sw-sv a:focus-visible,
.sw-sv button:focus-visible {
	outline: 2px solid var(--sw-cyan);
	outline-offset: 3px;
}

@media (max-width: 900px) {
	.sw-sv-nav { display: none; }
	.sw-sv-grid,
	.sw-sv-steps-list,
	.sw-sv-related-grid,
	.sw-sv-agenda { grid-template-columns: 1fr; }
	.sw-sv-reviews-track { grid-auto-columns: 86%; }
	.sw-sv-hero { min-height: auto; padding-top: 48px; padding-bottom: 56px; }
	.sw-sv-hero h1 { max-width: none; font-size: clamp(32px, 8vw, 44px); }
	.sw-sv-header-inner,
	.sw-sv-hero,
	.sw-sv-approach,
	.sw-sv-steps,
	.sw-sv-related,
	.sw-sv-agenda,
	.sw-sv-reviews,
	.sw-sv-final,
	.sw-sv-footer { padding-left: 20px; padding-right: 20px; }
}