/**
 * Obra Tracker — landing comercial.
 *
 * Depende de tokens.css, que se carga antes y trae la paleta de marca, la
 * base tipográfica y las utilidades compartidas con el recorrido de
 * demostración. Acá viven sólo los componentes de esta página.
 *
 * Reglas heredadas del sistema y respetadas acá:
 *   1. Ningún hex ni rgba() literal. Las variantes translúcidas se derivan
 *      con color-mix() sobre un token de tokens.css.
 *   2. Mobile-first. Los breakpoints son 48em / 64em / 80em; donde alcanza
 *      con clamp() no se abre media query.
 *   3. Las animaciones son decorativas: viven dentro de
 *      prefers-reduced-motion y de @supports. Sin soporte, el contenido se
 *      ve igual, completo y quieto.
 */


/**
 * ============================================================
 * 0b. TOKENS PROPIOS DE LA LANDING
 * ============================================================
 *
 * Nivel componente. Todos derivan de los de arriba. El único que baja a la
 * rampa cruda es --l-oscuro-acento: sobre navy hace falta azul-500, que es el
 * escalón aclarado para llegar a 4.5:1 en superficies oscuras. El azul-600
 * ahí no alcanza el contraste.
 */
:root {
	--l-ancho: var(--suweb-ancho-ancho);
	--l-ancho-texto: 62ch;
	--l-gutter: clamp(1.25rem, .75rem + 2vw, 2rem);
	--l-y: clamp(3.5rem, 2.25rem + 4.5vw, 6.5rem);

	--l-fondo: var(--suweb-superficie);
	--l-fondo-alt: var(--suweb-app-fondo);

	/* Superficies oscuras: navy en los dos modos, a propósito. Son el chrome
	 * de la marca y no se invierten. */
	--l-oscuro: var(--suweb-chrome);
	--l-oscuro-texto: var(--suweb-chrome-texto);
	--l-oscuro-suave: var(--suweb-chrome-suave);
	--l-oscuro-acento: var(--suweb-azul-500);
	--l-oscuro-borde: color-mix(in oklab, var(--suweb-chrome-texto) 14%, transparent);
	--l-oscuro-panel: color-mix(in oklab, var(--suweb-chrome-texto) 7%, transparent);

	/* Display: misma idea fluida que --suweb-t-*, un escalón más arriba. La
	 * landing necesita un titular que la aplicación no. */
	--l-t-display: clamp(2.125rem, 1.45rem + 3.4vw, 3.75rem);
	--l-t-seccion: clamp(1.625rem, 1.25rem + 1.9vw, 2.5rem);
	--l-t-lead: clamp(1.0625rem, 1rem + .45vw, 1.3125rem);
}

/**
 * ============================================================
 * 1. BASE PROPIA DE LA LANDING
 * ============================================================
 */
html {
	/* Con la barra superior pegajosa, sin esto el título de la sección queda
	 * tapado al saltar por un ancla. */
	scroll-padding-top: calc(var(--suweb-nav-alto) + var(--suweb-e-4));
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	background: var(--l-fondo);
}

/**
 * ============================================================
 * 2. PRIMITIVAS
 * ============================================================
 */
.suweb-ancho {
	width: 100%;
	max-width: var(--l-ancho);
	margin-inline: auto;
	padding-inline: var(--l-gutter);
}

.suweb-ancho--angosto {
	max-width: 56rem;
}

.suweb-seccion {
	padding-block: var(--l-y);
}

.suweb-seccion--alt {
	background: var(--l-fondo-alt);
}

.suweb-seccion--oscuro {
	background: var(--l-oscuro);
	color: var(--l-oscuro-texto);
	/* Fija el esquema para que los controles nativos que caigan adentro no se
	 * pinten con los colores del modo claro. */
	color-scheme: dark;
}

.suweb-seccion--oscuro :is(h2, h3) {
	color: var(--l-oscuro-texto);
}

/* Encabezado de sección: kicker + título + bajada. */
.suweb-encabezado {
	max-width: var(--l-ancho-texto);
	margin-block-end: clamp(2rem, 1.25rem + 2.5vw, 3.5rem);
}

.suweb-encabezado--centrado {
	margin-inline: auto;
	text-align: center;
}

.suweb-encabezado--suelto {
	margin-block-end: 0;
}

.suweb-kicker {
	display: block;
	margin-block-end: var(--suweb-e-3);
	color: var(--suweb-acento);
	font-size: var(--suweb-t-sm);
	font-weight: var(--suweb-peso-fuerte);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.suweb-seccion--oscuro .suweb-kicker {
	color: var(--l-oscuro-acento);
}

.suweb-titulo {
	font-size: var(--l-t-seccion);
	font-weight: var(--suweb-peso-fuerte);
	letter-spacing: -.025em;
	text-wrap: balance;
}

.suweb-subtitulo {
	margin-block-end: var(--suweb-e-4);
	font-size: var(--suweb-t-lg);
	font-weight: var(--suweb-peso-fuerte);
	line-height: 1.3;
	text-wrap: balance;
}

.suweb-bajada {
	margin-block-start: var(--suweb-e-4);
	color: var(--suweb-texto-suave);
	font-size: var(--l-t-lead);
	line-height: var(--suweb-interlinea-base);
	text-wrap: pretty;
}

.suweb-bajada strong {
	color: var(--suweb-texto);
	font-weight: var(--suweb-peso-medio);
}

.suweb-seccion--oscuro .suweb-bajada {
	color: var(--l-oscuro-suave);
}

.suweb-seccion--oscuro .suweb-bajada strong {
	color: var(--l-oscuro-texto);
}

/* --- Botones ------------------------------------------------------- */
.suweb-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--suweb-e-2);
	min-height: var(--suweb-boton-alto);
	padding-inline: var(--suweb-e-6);
	border: 1px solid transparent;
	border-radius: var(--suweb-boton-radio);
	background: var(--suweb-acento);
	color: var(--suweb-acento-contraste);
	font-size: var(--suweb-t-md);
	font-weight: var(--suweb-boton-peso);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, translate .15s ease;
}

.suweb-cta:hover {
	background: var(--suweb-acento-hover);
	color: var(--suweb-acento-contraste);
}

@media (prefers-reduced-motion: no-preference) and (pointer: fine) {
	.suweb-cta:hover {
		translate: 0 -1px;
	}
}

.suweb-cta:focus-visible {
	outline: 2px solid var(--suweb-foco);
	outline-offset: 2px;
}

.suweb-cta svg {
	flex: 0 0 auto;
}

/* Contorno sobre fondo claro. */
.suweb-cta--linea {
	border-color: var(--suweb-borde-fuerte);
	background: var(--suweb-superficie);
	color: var(--suweb-texto);
}

.suweb-cta--linea:hover {
	border-color: var(--suweb-acento);
	background: var(--suweb-acento-suave);
	color: var(--suweb-acento);
}

/* Contorno sobre navy. */
.suweb-cta--fantasma {
	border-color: var(--l-oscuro-borde);
	background: transparent;
	color: var(--l-oscuro-texto);
}

.suweb-cta--fantasma:hover {
	border-color: var(--l-oscuro-texto);
	background: var(--l-oscuro-panel);
	color: var(--l-oscuro-texto);
}

.suweb-cta--fantasma:focus-visible {
	outline-color: var(--l-oscuro-acento);
}

/* Enlace de texto, para la tercera acción. */
.suweb-enlace {
	display: inline-flex;
	align-items: center;
	gap: var(--suweb-e-2);
	min-height: var(--suweb-tap-min);
	border-radius: var(--suweb-r-sm);
	color: var(--suweb-acento);
	font-size: var(--suweb-t-md);
	font-weight: var(--suweb-peso-medio);
	text-decoration-color: transparent;
	text-underline-offset: .25em;
	transition: text-decoration-color .15s ease;
}

.suweb-enlace:hover {
	text-decoration-color: currentColor;
}

.suweb-enlace:focus-visible {
	outline: 2px solid var(--suweb-foco);
	outline-offset: 3px;
}

.suweb-enlace svg {
	flex: 0 0 auto;
}

.suweb-seccion--oscuro .suweb-enlace {
	color: var(--l-oscuro-acento);
}

.suweb-seccion--oscuro .suweb-enlace:focus-visible {
	outline-color: var(--l-oscuro-acento);
}

/* Grupo de acciones: apilado en celular, en fila desde 30em. */
.suweb-acciones {
	display: flex;
	flex-direction: column;
	gap: var(--suweb-e-3);
	margin-block-start: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
}

.suweb-acciones > .suweb-cta {
	width: 100%;
}

.suweb-acciones--centrado {
	align-items: center;
}

@media (min-width: 30em) {
	.suweb-acciones {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--suweb-e-4);
	}

	.suweb-acciones > .suweb-cta {
		width: auto;
	}

	.suweb-acciones--centrado {
		justify-content: center;
	}
}

/**
 * Revelado al entrar en pantalla.
 *
 * Progressive enhancement puro: sin soporte de scroll-driven animations
 * —hoy, Firefox— no pasa nada y el contenido se ve completo desde el
 * principio. No hay fallback con IntersectionObserver a propósito: esconder
 * contenido con JS para después mostrarlo es peor que no animarlo, porque si
 * el JS falla el contenido no aparece nunca.
 */
@media (prefers-reduced-motion: no-preference) {
	@supports ((animation-timeline: view()) and (animation-range: entry)) {
		@keyframes suweb-aparece {
			from {
				opacity: 0;
				translate: 0 2rem;
			}
		}

		.suweb-aparece {
			animation: suweb-aparece auto linear backwards;
			animation-timeline: view();
			animation-range: entry 8% cover 26%;
		}
	}
}

/**
 * ============================================================
 * 3. BARRA SUPERIOR
 * ============================================================
 */
.suweb-marca {
	position: sticky;
	inset-block-start: 0;
	z-index: var(--suweb-z-sticky);
	border-block-end: 1px solid var(--l-oscuro-borde);
	background: var(--l-oscuro);
	color: var(--l-oscuro-texto);
	color-scheme: dark;
}

/* El navy translúcido sólo cuando hay desenfoque detrás; si no, se lee el
 * texto de abajo a través de la barra. */
@supports (backdrop-filter: blur(1px)) {
	.suweb-marca {
		background: color-mix(in oklab, var(--l-oscuro) 88%, transparent);
		backdrop-filter: blur(10px);
	}
}

.suweb-marca__inner {
	display: flex;
	align-items: center;
	gap: var(--suweb-e-4);
	min-height: var(--suweb-nav-alto);
}

.suweb-marca__logo {
	display: inline-flex;
	align-items: center;
	gap: var(--suweb-e-2);
	flex: 0 0 auto;
	border-radius: var(--suweb-r-sm);
	color: inherit;
	font-size: var(--suweb-t-lg);
	font-weight: var(--suweb-peso-fuerte);
	letter-spacing: -.01em;
	text-decoration: none;
	white-space: nowrap;
}

.suweb-marca__logo img {
	display: block;
	width: 2.25rem;
	height: 2.25rem;
	object-fit: contain;
}

.suweb-marca__logo:focus-visible {
	outline: 2px solid var(--l-oscuro-acento);
	outline-offset: 4px;
}

/*
 * Los enlaces de sección scrollean en horizontal en celular, igual que la
 * fila de accesos del header de la aplicación. Es el patrón que la marca ya
 * usa: no se inventa un menú hamburguesa que no existe en ningún lado.
 *
 * El scroll va en el <nav> y no en el <ul> porque el <nav> es el hijo flex
 * de .suweb-marca__inner. Sin min-width: 0 un hijo flex no baja de su ancho
 * de contenido —min-width vale auto por defecto— y la barra entera
 * desbordaba la pantalla en vez de scrollear por dentro.
 */
.suweb-marca__secciones {
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
	overscroll-behavior-inline: contain;
}

.suweb-marca__secciones::-webkit-scrollbar {
	display: none;
}

.suweb-marca__nav {
	display: flex;
	gap: var(--suweb-e-1);
	white-space: nowrap;
}

.suweb-marca__nav a {
	display: inline-flex;
	align-items: center;
	min-height: var(--suweb-tap-min);
	padding-inline: var(--suweb-e-3);
	border-radius: var(--suweb-r-sm);
	color: var(--l-oscuro-suave);
	font-size: var(--suweb-t-sm);
	font-weight: var(--suweb-peso-medio);
	text-decoration: none;
}

.suweb-marca__nav a:hover,
.suweb-marca__nav a[aria-current] {
	background: var(--l-oscuro-panel);
	color: var(--l-oscuro-texto);
}

.suweb-marca__nav a:focus-visible {
	outline: 2px solid var(--l-oscuro-acento);
	outline-offset: -2px;
}

.suweb-marca__acciones {
	display: flex;
	align-items: center;
	gap: var(--suweb-e-2);
	flex: 0 0 auto;
}

.suweb-marca__ingresar {
	display: none;
	align-items: center;
	min-height: var(--suweb-tap-min);
	padding-inline: var(--suweb-e-3);
	border-radius: var(--suweb-r-sm);
	color: var(--l-oscuro-suave);
	font-size: var(--suweb-t-sm);
	font-weight: var(--suweb-peso-medio);
	text-decoration: none;
	white-space: nowrap;
}

.suweb-marca__ingresar:hover {
	color: var(--l-oscuro-texto);
}

.suweb-marca__ingresar:focus-visible {
	outline: 2px solid var(--l-oscuro-acento);
	outline-offset: 2px;
}

/* El CTA de la barra aparece recién cuando hay lugar: en celular manda el
 * del hero y el de la cinta inferior. */
.suweb-marca__cta {
	display: none;
	min-height: var(--suweb-tap-min);
	padding-inline: var(--suweb-e-4);
	font-size: var(--suweb-t-sm);
	white-space: nowrap;
}

@media (min-width: 48em) {
	.suweb-marca__ingresar {
		display: inline-flex;
	}
}

@media (min-width: 64em) {
	.suweb-marca__secciones {
		flex: 0 1 auto;
		margin-inline: auto;
	}

	.suweb-marca__nav {
		justify-content: center;
		gap: var(--suweb-e-2);
	}

	.suweb-marca__cta {
		display: inline-flex;
	}
}

/**
 * ============================================================
 * 4. HERO
 * ============================================================
 */
.suweb-hero {
	position: relative;
	overflow: clip;
	/* El padding superior es corto a propósito: la barra pegajosa ya separa,
	 * y con un titular de tres líneas el botón principal tiene que entrar
	 * arriba del pliegue en un portátil de 768px de alto. */
	padding-block: clamp(2rem, 1.25rem + 2.5vw, 3.25rem) var(--l-y);
	background: var(--l-oscuro);
	color: var(--l-oscuro-texto);
	color-scheme: dark;
}

/* Resplandor de marca. Decoración pura: va en un ::before para no sumar un
 * div vacío al DOM, y desaparece en contraste forzado. */
.suweb-hero::before {
	content: "";
	position: absolute;
	inset-block-start: -30%;
	inset-inline-end: -20%;
	inline-size: min(70rem, 120%);
	aspect-ratio: 1;
	background: radial-gradient(
		circle at center,
		color-mix(in oklab, var(--suweb-azul-600) 42%, transparent) 0%,
		transparent 62%
	);
	pointer-events: none;
}

.suweb-hero > * {
	position: relative;
}

.suweb-hero__grid {
	display: grid;
	gap: clamp(2.5rem, 1.5rem + 4vw, 4rem);
	align-items: center;
}

.suweb-hero__pre {
	display: inline-flex;
	align-items: center;
	gap: var(--suweb-e-2);
	margin-block-end: var(--suweb-e-5);
	padding: var(--suweb-e-2) var(--suweb-e-4);
	border: 1px solid var(--l-oscuro-borde);
	border-radius: var(--suweb-r-full);
	background: var(--l-oscuro-panel);
	color: var(--l-oscuro-suave);
	font-size: var(--suweb-t-sm);
	font-weight: var(--suweb-peso-medio);
	text-wrap: balance;
}

.suweb-hero__pre::before {
	content: "";
	inline-size: .5rem;
	block-size: .5rem;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--suweb-verde-500);
}

.suweb-hero__titulo {
	font-size: var(--l-t-display);
	font-weight: var(--suweb-peso-fuerte);
	line-height: 1.05;
	letter-spacing: -.03em;
	text-wrap: balance;
}

.suweb-hero__titulo em {
	display: block;
	color: var(--l-oscuro-acento);
	font-style: normal;
}

.suweb-hero__bajada {
	max-width: 46ch;
	margin-block-start: var(--suweb-e-6);
	color: var(--l-oscuro-suave);
	font-size: var(--l-t-lead);
	line-height: 1.6;
	text-wrap: pretty;
}

.suweb-hero__nota {
	display: flex;
	align-items: start;
	gap: var(--suweb-e-3);
	max-width: 44ch;
	margin-block-start: var(--suweb-e-6);
	color: var(--l-oscuro-suave);
	font-size: var(--suweb-t-sm);
	line-height: 1.5;
}

.suweb-hero__nota svg {
	flex: 0 0 auto;
	margin-block-start: .1em;
	color: var(--suweb-verde-400);
}

@media (min-width: 64em) {
	.suweb-hero__grid {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	}
}

/**
 * ============================================================
 * 5. MAQUETA DE LA APLICACIÓN
 * ============================================================
 *
 * Reconstruida con HTML y CSS en vez de una captura: pesa unos pocos KB, no
 * se pixela en pantallas densas, no puede quedar desactualizada respecto de
 * la paleta y no suma una descarga al camino crítico. Es decorativa: en el
 * HTML va con aria-hidden y todo lo que dice está escrito al lado.
 */
.suweb-mock {
	inline-size: min(100%, 22rem);
	margin-inline: auto;
	padding: var(--suweb-e-3);
	border: 1px solid var(--l-oscuro-borde);
	border-radius: var(--suweb-r-xl);
	background: var(--l-oscuro-panel);
	box-shadow: var(--suweb-sombra-lg);
}

/* Las maquetas representan la aplicación en claro: no se invierten con el
 * modo del sistema, porque son una imagen del producto. */
.suweb-mock__pantalla,
.suweb-ventana__cuerpo,
.suweb-pilar__visual {
	color-scheme: light;
}

.suweb-mock__pantalla {
	display: grid;
	gap: var(--suweb-e-3);
	padding: var(--suweb-e-4);
	border-radius: var(--suweb-r-lg);
	background: var(--suweb-gris-50);
	color: var(--suweb-gris-900);
}

.suweb-mock__barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--suweb-t-sm);
	font-weight: var(--suweb-peso-fuerte);
}

.suweb-mock__barra span:last-child {
	inline-size: 1.25rem;
	block-size: 1.25rem;
	border-radius: 50%;
	background: var(--suweb-gris-200);
}

.suweb-mock__saludo {
	font-size: var(--suweb-t-lg);
	font-weight: var(--suweb-peso-fuerte);
	letter-spacing: -.01em;
}

.suweb-mock__select {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--suweb-e-3);
	padding: var(--suweb-e-3);
	border: 1px solid var(--suweb-gris-200);
	border-radius: var(--suweb-r-md);
	background: var(--suweb-blanco);
	font-size: var(--suweb-t-sm);
	font-weight: var(--suweb-peso-medio);
}

.suweb-mock__select span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.suweb-mock__select::after {
	content: "";
	flex: 0 0 auto;
	inline-size: .5rem;
	block-size: .5rem;
	border-inline-end: 2px solid var(--suweb-gris-500);
	border-block-end: 2px solid var(--suweb-gris-500);
	rotate: 45deg;
	translate: 0 -25%;
}

.suweb-mock__progreso {
	padding: var(--suweb-e-5);
	border-radius: var(--suweb-r-md);
	background: linear-gradient(135deg in oklab, var(--suweb-navy-900), var(--suweb-navy-700));
	color: var(--suweb-blanco);
}

.suweb-mock__progreso p {
	font-size: var(--suweb-t-sm);
	opacity: .85;
}

.suweb-mock__progreso strong {
	display: block;
	margin-block: var(--suweb-e-1) var(--suweb-e-3);
	font-size: 2.25rem;
	font-weight: var(--suweb-peso-fuerte);
	line-height: 1;
	letter-spacing: -.03em;
}

.suweb-mock__barra-progreso {
	block-size: .5rem;
	border-radius: var(--suweb-r-full);
	background: color-mix(in oklab, var(--suweb-blanco) 22%, transparent);
}

.suweb-mock__barra-progreso span {
	display: block;
	block-size: 100%;
	inline-size: 68%;
	border-radius: inherit;
	background: var(--suweb-azul-600);
}

.suweb-mock__tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--suweb-e-3);
}

.suweb-mock__tile {
	padding: var(--suweb-e-3);
	border: 1px solid var(--suweb-gris-200);
	border-radius: var(--suweb-r-md);
	background: var(--suweb-blanco);
}

.suweb-mock__tile small {
	display: block;
	color: var(--suweb-gris-600);
	font-size: var(--suweb-t-xs);
	line-height: 1.3;
}

.suweb-mock__tile b {
	display: block;
	margin-block-start: var(--suweb-e-1);
	font-size: var(--suweb-t-xl);
	font-weight: var(--suweb-peso-fuerte);
	line-height: 1;
}

.suweb-mock__lista {
	display: grid;
	gap: var(--suweb-e-3);
	padding: var(--suweb-e-3);
	border: 1px solid var(--suweb-gris-200);
	border-radius: var(--suweb-r-md);
	background: var(--suweb-blanco);
}

.suweb-mock__lista li {
	display: flex;
	align-items: center;
	gap: var(--suweb-e-3);
	font-size: var(--suweb-t-sm);
}

.suweb-mock__punto {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	border-radius: 50%;
	background: var(--suweb-verde-100);
	color: var(--suweb-verde-700);
}

.suweb-mock__punto--azul {
	background: var(--suweb-azul-100);
	color: var(--suweb-azul-800);
}

.suweb-mock__punto--ambar {
	background: var(--suweb-ambar-100);
	color: var(--suweb-ambar-800);
}

.suweb-mock__punto svg {
	inline-size: 1rem;
	block-size: 1rem;
}

.suweb-mock__dato {
	min-width: 0;
}

.suweb-mock__dato small {
	display: block;
	color: var(--suweb-gris-500);
	font-size: var(--suweb-t-xs);
}

/* Flotación muy leve, sólo en escritorio y sólo si nadie pidió menos
 * movimiento. Anima translate: no toca layout. */
@media (prefers-reduced-motion: no-preference) and (min-width: 64em) {
	@keyframes suweb-flota {
		50% {
			translate: 0 -.75rem;
		}
	}

	.suweb-mock {
		animation: suweb-flota 7s ease-in-out infinite;
	}
}

/**
 * ============================================================
 * 6. CIFRAS
 * ============================================================
 */
.suweb-cifras {
	border-block-end: 1px solid var(--suweb-borde);
	background: var(--l-fondo);
}

/* El gap de 1px sobre fondo de borde dibuja las divisiones sin bordes por
 * celda, que se duplicarían en los cruces. */
.suweb-cifras__lista {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--suweb-borde);
}

.suweb-cifras__item {
	padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem) var(--suweb-e-4);
	background: var(--l-fondo);
	text-align: center;
}

.suweb-cifras__valor {
	display: block;
	color: var(--suweb-texto);
	font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.125rem);
	font-weight: var(--suweb-peso-fuerte);
	line-height: 1.1;
	letter-spacing: -.02em;
}

.suweb-cifras__texto {
	display: block;
	margin-block-start: var(--suweb-e-2);
	color: var(--suweb-texto-suave);
	font-size: var(--suweb-t-sm);
	line-height: 1.4;
	text-wrap: balance;
}

@media (min-width: 48em) {
	.suweb-cifras__lista {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/**
 * ============================================================
 * 7. DOLOR
 * ============================================================
 */
.suweb-dolor__texto {
	max-width: var(--l-ancho-texto);
	color: var(--suweb-texto-suave);
	font-size: var(--l-t-lead);
	line-height: 1.65;
	text-wrap: pretty;
}

.suweb-dolor__texto p + p {
	margin-block-start: var(--suweb-e-5);
}

/* El mensaje que entra a las siete y media. */
.suweb-dolor__burbuja {
	max-width: 30rem;
	margin-block: clamp(2rem, 1.5rem + 2vw, 3rem);
	padding: var(--suweb-e-5) var(--suweb-e-6);
	border: 1px solid var(--suweb-borde);
	/* Esquina viva abajo a la izquierda: la cola de la burbuja. */
	border-radius: var(--suweb-r-lg) var(--suweb-r-lg) var(--suweb-r-lg) var(--suweb-r-sm);
	background: var(--suweb-superficie);
	box-shadow: var(--suweb-sombra-md);
}

.suweb-dolor__burbuja p {
	color: var(--suweb-texto);
	font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
	font-weight: var(--suweb-peso-medio);
	line-height: 1.3;
	letter-spacing: -.01em;
}

.suweb-dolor__burbuja figcaption {
	margin-block-start: var(--suweb-e-3);
	color: var(--suweb-texto-tenue);
	font-size: var(--suweb-t-sm);
}

.suweb-dolor__lugares {
	border-block-start: 1px solid var(--suweb-borde);
}

.suweb-dolor__lugares li {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	gap: var(--suweb-e-4);
	align-items: baseline;
	padding-block: var(--suweb-e-5);
	border-block-end: 1px solid var(--suweb-borde);
}

.suweb-dolor__lugares b {
	color: var(--suweb-texto-tenue);
	font-size: var(--suweb-t-sm);
	font-weight: var(--suweb-peso-fuerte);
	font-variant-numeric: tabular-nums;
}

.suweb-dolor__lugares span {
	line-height: 1.5;
	text-wrap: pretty;
}

.suweb-dolor__cierre {
	max-width: var(--l-ancho-texto);
	margin-block-start: clamp(2rem, 1.5rem + 2vw, 3rem);
	font-size: var(--l-t-lead);
	font-weight: var(--suweb-peso-medio);
	line-height: 1.55;
	text-wrap: pretty;
}

@media (min-width: 64em) {
	.suweb-dolor__grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: clamp(3rem, 2rem + 4vw, 5rem);
		align-items: start;
	}
}

/**
 * ============================================================
 * 8. COSTO — el punto más bajo de la página
 * ============================================================
 */
.suweb-costo__lista {
	counter-reset: costo;
}

.suweb-costo__item {
	display: grid;
	gap: var(--suweb-e-3);
	padding-block: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
	border-block-start: 1px solid var(--l-oscuro-borde);
	counter-increment: costo;
}

.suweb-costo__item:last-child {
	border-block-end: 1px solid var(--l-oscuro-borde);
}

.suweb-costo__titulo {
	display: flex;
	align-items: baseline;
	gap: var(--suweb-e-4);
	font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
	font-weight: var(--suweb-peso-fuerte);
	line-height: 1.2;
	text-wrap: balance;
}

/* El ordinal es decorativo: el orden ya lo comunica la lista numerada. */
.suweb-costo__titulo::before {
	content: counter(costo, decimal-leading-zero);
	flex: 0 0 auto;
	color: var(--l-oscuro-acento);
	font-size: var(--suweb-t-sm);
	font-variant-numeric: tabular-nums;
	letter-spacing: .08em;
}

.suweb-costo__texto {
	max-width: 58ch;
	color: var(--l-oscuro-suave);
	line-height: 1.6;
	text-wrap: pretty;
}

.suweb-costo__remate {
	max-width: 50ch;
	margin-block-start: clamp(2.5rem, 2rem + 2vw, 3.5rem);
	font-size: var(--l-t-lead);
	font-weight: var(--suweb-peso-medio);
	line-height: 1.5;
	text-wrap: pretty;
}

.suweb-costo__remate em {
	color: var(--l-oscuro-acento);
	font-style: normal;
}

@media (min-width: 64em) {
	.suweb-costo__item {
		grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
		gap: clamp(2rem, 1rem + 4vw, 4rem);
		align-items: start;
	}

	.suweb-costo__texto {
		padding-block-start: .35rem;
	}
}

/**
 * ============================================================
 * 9. ESPEJO
 * ============================================================
 */
.suweb-espejo__lista {
	display: grid;
	gap: var(--suweb-e-3);
}

.suweb-espejo__item {
	display: grid;
	grid-template-columns: 1.25rem minmax(0, 1fr);
	gap: var(--suweb-e-4);
	align-items: start;
	padding: var(--suweb-e-4) var(--suweb-e-5);
	border: 1px solid var(--suweb-borde);
	border-radius: var(--suweb-r-md);
	background: var(--suweb-superficie);
	line-height: 1.5;
	text-wrap: pretty;
}

/* Casilla dibujada con CSS: es una ilustración, no un control real. */
.suweb-espejo__item::before {
	content: "";
	inline-size: 1.25rem;
	block-size: 1.25rem;
	margin-block-start: .15em;
	border: 2px solid var(--suweb-borde-fuerte);
	border-radius: var(--suweb-r-sm);
}

.suweb-espejo__remate {
	max-width: 46ch;
	margin: clamp(2rem, 1.5rem + 2vw, 3rem) auto 0;
	font-size: var(--l-t-lead);
	font-weight: var(--suweb-peso-medio);
	line-height: 1.5;
	text-align: center;
	text-wrap: pretty;
}

.suweb-espejo__remate em {
	color: var(--suweb-acento);
	font-style: normal;
}

@media (min-width: 48em) {
	.suweb-espejo__lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/**
 * ============================================================
 * 10. PILARES
 * ============================================================
 */
.suweb-pilares {
	display: grid;
	gap: clamp(2.5rem, 1.5rem + 3vw, 4rem);
	counter-reset: pilar;
}

.suweb-pilar {
	display: grid;
	gap: var(--suweb-e-5);
	align-items: center;
	counter-increment: pilar;
}

.suweb-pilar__numero {
	display: inline-grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	margin-block-end: var(--suweb-e-4);
	border-radius: var(--suweb-r-md);
	background: var(--suweb-acento-suave);
	color: var(--suweb-acento);
	font-size: var(--suweb-t-lg);
	font-weight: var(--suweb-peso-fuerte);
	font-variant-numeric: tabular-nums;
}

.suweb-pilar__numero::before {
	content: counter(pilar);
}

.suweb-pilar__titulo {
	margin-block-end: var(--suweb-e-3);
	font-size: clamp(1.25rem, 1.1rem + .8vw, 1.625rem);
	font-weight: var(--suweb-peso-fuerte);
	text-wrap: balance;
}

.suweb-pilar__texto {
	max-width: 54ch;
	color: var(--suweb-texto-suave);
	line-height: 1.65;
	text-wrap: pretty;
}

.suweb-pilar__texto + .suweb-pilar__texto {
	margin-block-start: var(--suweb-e-4);
}

.suweb-pilar__texto strong {
	color: var(--suweb-texto);
	font-weight: var(--suweb-peso-medio);
}

/* Ilustración al lado de cada pilar. */
.suweb-pilar__visual {
	display: grid;
	gap: var(--suweb-e-3);
	padding: var(--suweb-e-5);
	border: 1px solid var(--suweb-borde);
	border-radius: var(--suweb-r-lg);
	background: var(--l-fondo-alt);
}

.suweb-pilar__fila {
	display: flex;
	align-items: center;
	gap: var(--suweb-e-3);
	padding: var(--suweb-e-3) var(--suweb-e-4);
	border: 1px solid var(--suweb-gris-200);
	border-radius: var(--suweb-r-md);
	background: var(--suweb-blanco);
	color: var(--suweb-gris-900);
	font-size: var(--suweb-t-sm);
}

.suweb-pilar__dato {
	min-width: 0;
}

.suweb-pilar__dato b {
	display: block;
	font-weight: var(--suweb-peso-medio);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.suweb-pilar__dato small {
	display: block;
	color: var(--suweb-gris-500);
	font-size: var(--suweb-t-xs);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Miniatura de foto: gradiente, no una imagen que haya que descargar. */
.suweb-pilar__foto {
	flex: 0 0 auto;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: var(--suweb-r-sm);
	background: linear-gradient(145deg in oklab, var(--suweb-navy-600), var(--suweb-gris-400));
}

.suweb-pilar__chip {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	margin-inline-start: auto;
	padding: var(--suweb-e-1) var(--suweb-e-3);
	border-radius: var(--suweb-r-full);
	font-size: var(--suweb-t-xs);
	font-weight: var(--suweb-peso-medio);
	white-space: nowrap;
}

.suweb-pilar__chip--ok {
	background: var(--suweb-verde-100);
	color: var(--suweb-verde-800);
}

.suweb-pilar__chip--espera {
	background: var(--suweb-ambar-100);
	color: var(--suweb-ambar-800);
}

.suweb-pilar__chip--info {
	background: var(--suweb-azul-100);
	color: var(--suweb-azul-800);
}

@media (min-width: 64em) {
	.suweb-pilar {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: clamp(3rem, 2rem + 4vw, 5rem);
	}

	/* Alterna el lado de la ilustración para romper la grilla. */
	.suweb-pilar:nth-child(even) .suweb-pilar__cuerpo {
		order: 2;
	}
}

/**
 * ============================================================
 * 11. PASOS
 * ============================================================
 */
.suweb-pasos {
	display: grid;
	gap: var(--suweb-e-8);
	counter-reset: paso;
}

.suweb-paso {
	position: relative;
	padding-inline-start: var(--suweb-e-10);
	counter-increment: paso;
}

.suweb-paso::before {
	content: counter(paso);
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	display: grid;
	place-items: center;
	inline-size: 2rem;
	block-size: 2rem;
	border-radius: 50%;
	background: var(--suweb-acento);
	color: var(--suweb-acento-contraste);
	font-size: var(--suweb-t-sm);
	font-weight: var(--suweb-peso-fuerte);
}

/* Línea que une los pasos. Decorativa: se corta en el último. */
.suweb-paso:not(:last-child)::after {
	content: "";
	position: absolute;
	inset-inline-start: calc(1rem - 1px);
	inset-block: 2.5rem calc(var(--suweb-e-8) * -1);
	inline-size: 2px;
	background: var(--suweb-borde);
}

.suweb-paso__titulo {
	margin-block-end: var(--suweb-e-2);
	font-size: var(--suweb-t-lg);
	font-weight: var(--suweb-peso-fuerte);
	line-height: 1.3;
}

.suweb-paso__texto {
	max-width: 46ch;
	color: var(--suweb-texto-suave);
	line-height: 1.6;
	text-wrap: pretty;
}

@media (min-width: 64em) {
	.suweb-pasos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: clamp(2rem, 1rem + 3vw, 3.5rem);
	}

	.suweb-paso {
		padding-inline-start: 0;
		padding-block-start: var(--suweb-e-12);
	}

	.suweb-paso:not(:last-child)::after {
		inset-block: 1rem auto;
		inset-inline: 2.5rem calc(var(--suweb-e-8) * -1);
		inline-size: auto;
		block-size: 2px;
	}
}

/**
 * ============================================================
 * 12. MÓDULOS — la única grilla de tarjetas de la página
 * ============================================================
 */
.suweb-modulos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	gap: var(--suweb-e-4);
}

.suweb-modulo {
	display: grid;
	gap: var(--suweb-e-2);
	align-content: start;
	padding: var(--suweb-e-5);
	border: 1px solid var(--suweb-borde);
	border-radius: var(--suweb-r-md);
	background: var(--suweb-superficie);
	transition: border-color .15s ease, box-shadow .15s ease;
}

@media (pointer: fine) {
	.suweb-modulo:hover {
		border-color: var(--suweb-borde-fuerte);
		box-shadow: var(--suweb-sombra-md);
	}
}

.suweb-modulo__titulo {
	font-size: var(--suweb-t-md);
	font-weight: var(--suweb-peso-fuerte);
	line-height: 1.3;
}

.suweb-modulo__texto {
	color: var(--suweb-texto-suave);
	font-size: var(--suweb-t-sm);
	line-height: 1.55;
	text-wrap: pretty;
}

/**
 * ============================================================
 * 13. CAMBIO — antes y después
 * ============================================================
 */
.suweb-cambio {
	display: grid;
	gap: var(--suweb-e-3);
}

.suweb-cambio__fila {
	display: grid;
	gap: var(--suweb-e-3);
	padding: var(--suweb-e-5);
	border: 1px solid var(--suweb-borde);
	border-radius: var(--suweb-r-md);
	background: var(--suweb-superficie);
}

.suweb-cambio__antes,
.suweb-cambio__despues {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--suweb-e-3);
	align-items: start;
	line-height: 1.5;
	text-wrap: pretty;
}

.suweb-cambio__antes {
	color: var(--suweb-texto-suave);
}

.suweb-cambio__despues {
	color: var(--suweb-texto);
	font-weight: var(--suweb-peso-medio);
}

.suweb-cambio__marca {
	display: grid;
	place-items: center;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	border-radius: 50%;
	background: var(--suweb-superficie-alt);
	color: var(--suweb-texto-tenue);
}

.suweb-cambio__marca svg {
	inline-size: .875rem;
	block-size: .875rem;
}

.suweb-cambio__despues .suweb-cambio__marca {
	background: var(--suweb-exito-fondo);
	color: var(--suweb-exito);
}

@media (min-width: 64em) {
	.suweb-cambio__fila {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: clamp(1.5rem, 1rem + 2vw, 3rem);
		align-items: center;
	}
}

/**
 * ============================================================
 * 14. ROLES
 * ============================================================
 */
.suweb-rol {
	display: grid;
	gap: var(--suweb-e-3);
	padding-block: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
	border-block-start: 1px solid var(--suweb-borde);
}

.suweb-rol:last-child {
	border-block-end: 1px solid var(--suweb-borde);
}

.suweb-rol__nombre {
	display: flex;
	align-items: center;
	gap: var(--suweb-e-3);
	font-size: var(--suweb-t-lg);
	font-weight: var(--suweb-peso-fuerte);
	line-height: 1.3;
}

.suweb-rol__nombre::before {
	content: "";
	inline-size: .25rem;
	block-size: 1.25rem;
	flex: 0 0 auto;
	border-radius: var(--suweb-r-full);
	background: var(--suweb-acento);
}

.suweb-rol__texto {
	max-width: 62ch;
	color: var(--suweb-texto-suave);
	line-height: 1.6;
	text-wrap: pretty;
}

@media (min-width: 48em) {
	.suweb-rol {
		grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
		gap: clamp(1.5rem, 1rem + 3vw, 3rem);
		align-items: start;
	}
}

/* Nota destacada. */
.suweb-nota {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--suweb-e-4);
	max-width: 62ch;
	margin-block-start: clamp(2rem, 1.5rem + 2vw, 3rem);
	padding: var(--suweb-e-5);
	border: 1px solid var(--suweb-info-borde);
	border-radius: var(--suweb-r-md);
	background: var(--suweb-info-fondo);
	color: var(--suweb-texto);
	font-size: var(--suweb-t-sm);
	line-height: 1.6;
	text-wrap: pretty;
}

.suweb-nota svg {
	flex: 0 0 auto;
	margin-block-start: .1em;
	color: var(--suweb-info);
}

/**
 * ============================================================
 * 15. DEMO
 * ============================================================
 */
.suweb-demo__grid {
	display: grid;
	gap: clamp(2.5rem, 1.5rem + 4vw, 4rem);
	align-items: center;
}

.suweb-demo__lista {
	display: grid;
	gap: var(--suweb-e-3);
	margin-block-start: var(--suweb-e-6);
}

.suweb-demo__lista li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--suweb-e-3);
	align-items: start;
	color: var(--l-oscuro-suave);
	line-height: 1.5;
}

.suweb-demo__lista svg {
	flex: 0 0 auto;
	margin-block-start: .2em;
	color: var(--suweb-verde-400);
}

/* Marco de navegador para la segunda maqueta. */
.suweb-ventana {
	overflow: hidden;
	border: 1px solid var(--l-oscuro-borde);
	border-radius: var(--suweb-r-lg);
	background: var(--l-oscuro-panel);
	box-shadow: var(--suweb-sombra-lg);
}

.suweb-ventana__barra {
	display: flex;
	align-items: center;
	gap: var(--suweb-e-2);
	padding: var(--suweb-e-3) var(--suweb-e-4);
	border-block-end: 1px solid var(--l-oscuro-borde);
}

.suweb-ventana__punto {
	inline-size: .625rem;
	block-size: .625rem;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--l-oscuro-borde);
}

.suweb-ventana__url {
	flex: 1 1 auto;
	min-width: 0;
	margin-inline-start: var(--suweb-e-2);
	padding: var(--suweb-e-1) var(--suweb-e-3);
	border-radius: var(--suweb-r-full);
	background: color-mix(in oklab, var(--suweb-chrome-texto) 8%, transparent);
	color: var(--l-oscuro-suave);
	font-size: var(--suweb-t-xs);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.suweb-ventana__cuerpo {
	display: grid;
	gap: var(--suweb-e-4);
	padding: var(--suweb-e-5);
	background: var(--suweb-gris-50);
	color: var(--suweb-gris-900);
}

.suweb-ventana__titulo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--suweb-e-3);
	font-size: var(--suweb-t-md);
	font-weight: var(--suweb-peso-fuerte);
}

.suweb-ventana__avance {
	display: grid;
	gap: var(--suweb-e-3);
	padding: var(--suweb-e-4);
	border: 1px solid var(--suweb-gris-200);
	border-radius: var(--suweb-r-md);
	background: var(--suweb-blanco);
}

.suweb-ventana__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--suweb-e-3);
	font-size: var(--suweb-t-sm);
	font-weight: var(--suweb-peso-medio);
}

.suweb-ventana__cabecera > span:first-child {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.suweb-ventana__fecha {
	flex: 0 0 auto;
	color: var(--suweb-gris-500);
	font-size: var(--suweb-t-xs);
	font-weight: var(--suweb-peso-normal);
}

.suweb-ventana__fotos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--suweb-e-2);
}

.suweb-ventana__fotos span {
	aspect-ratio: 4 / 3;
	border-radius: var(--suweb-r-sm);
	background: linear-gradient(145deg in oklab, var(--suweb-navy-600), var(--suweb-gris-400));
}

.suweb-ventana__fotos span:nth-child(2) {
	background: linear-gradient(145deg in oklab, var(--suweb-gris-500), var(--suweb-navy-100));
}

.suweb-ventana__fotos span:nth-child(3) {
	background: linear-gradient(145deg in oklab, var(--suweb-navy-700), var(--suweb-gris-300));
}

.suweb-ventana__acciones {
	display: flex;
	gap: var(--suweb-e-2);
}

.suweb-ventana__boton {
	flex: 1 1 0;
	padding: var(--suweb-e-2);
	border-radius: var(--suweb-r-sm);
	background: var(--suweb-azul-600);
	color: var(--suweb-blanco);
	font-size: var(--suweb-t-xs);
	font-weight: var(--suweb-peso-medio);
	text-align: center;
}

.suweb-ventana__boton--linea {
	border: 1px solid var(--suweb-gris-300);
	background: var(--suweb-blanco);
	color: var(--suweb-gris-700);
}

@media (min-width: 64em) {
	.suweb-demo__grid {
		grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
	}
}

/**
 * ============================================================
 * 16. OFERTA
 * ============================================================
 */
.suweb-oferta__grid {
	display: grid;
	gap: clamp(2.5rem, 1.5rem + 3vw, 4rem);
	align-items: start;
}

.suweb-oferta__lista {
	display: grid;
	gap: var(--suweb-e-6);
}

.suweb-oferta__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--suweb-e-4);
	align-items: start;
}

.suweb-oferta__item > svg {
	flex: 0 0 auto;
	margin-block-start: .15em;
	color: var(--suweb-exito);
}

.suweb-oferta__titulo {
	margin-block-end: var(--suweb-e-1);
	font-size: var(--suweb-t-md);
	font-weight: var(--suweb-peso-fuerte);
	line-height: 1.35;
}

.suweb-oferta__texto {
	color: var(--suweb-texto-suave);
	font-size: var(--suweb-t-sm);
	line-height: 1.6;
	text-wrap: pretty;
}

/* Tarjeta del modelo comercial: la única superficie oscura de la sección. */
.suweb-precio {
	position: sticky;
	inset-block-start: calc(var(--suweb-nav-alto) + var(--suweb-e-4));
	padding: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
	border-radius: var(--suweb-r-lg);
	background: var(--l-oscuro);
	color: var(--l-oscuro-texto);
	box-shadow: var(--suweb-sombra-lg);
	color-scheme: dark;
}

.suweb-precio__titulo {
	font-size: var(--suweb-t-lg);
	font-weight: var(--suweb-peso-fuerte);
}

.suweb-precio__bajada {
	margin-block-start: var(--suweb-e-2);
	color: var(--l-oscuro-suave);
	font-size: var(--suweb-t-sm);
	line-height: 1.5;
}

.suweb-precio__filas {
	display: grid;
	gap: var(--suweb-e-4);
	margin-block: var(--suweb-e-6);
	padding-block: var(--suweb-e-5);
	border-block: 1px solid var(--l-oscuro-borde);
}

.suweb-precio__fila {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--suweb-e-4);
	font-size: var(--suweb-t-sm);
}

.suweb-precio__fila dt {
	color: var(--l-oscuro-suave);
}

/* Preparado para cuando haya importes: tabular-nums alinea las cifras. */
.suweb-precio__fila dd {
	font-size: var(--suweb-t-lg);
	font-weight: var(--suweb-peso-fuerte);
	font-variant-numeric: tabular-nums;
	text-align: end;
	white-space: nowrap;
}

.suweb-precio__incluye {
	display: grid;
	gap: var(--suweb-e-2);
	margin-block-end: var(--suweb-e-6);
	color: var(--l-oscuro-suave);
	font-size: var(--suweb-t-sm);
	line-height: 1.5;
}

.suweb-precio__incluye li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--suweb-e-3);
	align-items: start;
}

.suweb-precio__incluye svg {
	margin-block-start: .2em;
	color: var(--suweb-verde-400);
}

.suweb-precio .suweb-cta {
	width: 100%;
}

.suweb-precio__pie {
	margin-block-start: var(--suweb-e-4);
	color: var(--l-oscuro-suave);
	font-size: var(--suweb-t-xs);
	line-height: 1.5;
	text-align: center;
	text-wrap: pretty;
}

@media (min-width: 64em) {
	.suweb-oferta__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
	}
}

/* Garantía. */
.suweb-garantia {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--suweb-e-5);
	align-items: start;
	margin-block-start: clamp(2.5rem, 2rem + 2vw, 3.5rem);
	padding: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
	border: 1px solid var(--suweb-exito-borde);
	border-radius: var(--suweb-r-lg);
	background: var(--suweb-exito-fondo);
}

.suweb-garantia > svg {
	flex: 0 0 auto;
	color: var(--suweb-exito);
}

.suweb-garantia__titulo {
	margin-block-end: var(--suweb-e-2);
	font-size: var(--suweb-t-lg);
	font-weight: var(--suweb-peso-fuerte);
	line-height: 1.3;
}

.suweb-garantia__texto {
	max-width: 60ch;
	font-size: var(--suweb-t-sm);
	line-height: 1.6;
	text-wrap: pretty;
}

/**
 * ============================================================
 * 17. FILTRO — para quién no es / para quién sí
 * ============================================================
 */
.suweb-filtro {
	display: grid;
	gap: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
}

.suweb-filtro__titulo {
	margin-block-end: var(--suweb-e-5);
	font-size: var(--suweb-t-lg);
	font-weight: var(--suweb-peso-fuerte);
	line-height: 1.3;
}

.suweb-filtro__lista {
	display: grid;
	gap: var(--suweb-e-4);
}

.suweb-filtro__lista li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--suweb-e-3);
	align-items: start;
	color: var(--suweb-texto-suave);
	line-height: 1.6;
	text-wrap: pretty;
}

.suweb-filtro__lista svg {
	flex: 0 0 auto;
	margin-block-start: .2em;
}

.suweb-filtro__col--no svg {
	color: var(--suweb-error);
}

.suweb-filtro__col--si svg {
	color: var(--suweb-exito);
}

.suweb-filtro__col--si li {
	color: var(--suweb-texto);
}

@media (min-width: 48em) {
	.suweb-filtro {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/**
 * ============================================================
 * 18. CLARIDAD
 * ============================================================
 *
 * Sobria a propósito: sin iconos de advertencia y sin rojo. Es
 * transparencia, no una disculpa.
 */
.suweb-claridad__item {
	padding-block: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
	border-block-start: 1px solid var(--suweb-borde);
}

.suweb-claridad__item:last-child {
	border-block-end: 1px solid var(--suweb-borde);
}

.suweb-claridad__titulo {
	margin-block-end: var(--suweb-e-2);
	font-size: var(--suweb-t-lg);
	font-weight: var(--suweb-peso-fuerte);
	line-height: 1.35;
	text-wrap: balance;
}

.suweb-claridad__texto {
	max-width: 68ch;
	color: var(--suweb-texto-suave);
	line-height: 1.65;
	text-wrap: pretty;
}

@media (min-width: 64em) {
	.suweb-claridad__item {
		display: grid;
		grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
		gap: clamp(2rem, 1rem + 4vw, 4rem);
		align-items: start;
	}

	.suweb-claridad__titulo {
		margin-block-end: 0;
	}
}

/**
 * ============================================================
 * 19. PUERTAS — el cierre con las tres acciones
 * ============================================================
 */
.suweb-puertas {
	display: grid;
	/* auto-fit y no repeat(3): si falta el calendario o el WhatsApp, las que
	 * queden ocupan el ancho sin dejar un hueco. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--suweb-e-4);
	margin-block-start: clamp(2rem, 1.5rem + 2vw, 3rem);
}

/* Con menos de tres puertas la grilla se centra y se le pone techo a la
 * tarjeta, en vez de estirar una sola a todo el ancho de la pantalla. */
.suweb-puertas:not(:has(> :nth-child(3))) {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 24rem));
	justify-content: center;
}

.suweb-puerta {
	display: grid;
	grid-template-rows: auto 1fr auto;
	gap: var(--suweb-e-3);
	padding: clamp(1.5rem, 1.15rem + 1.5vw, 2rem);
	border: 1px solid var(--l-oscuro-borde);
	border-radius: var(--suweb-r-lg);
	background: var(--l-oscuro-panel);
}

/* La del medio es la que queremos que elijan. */
.suweb-puerta--principal {
	border-color: var(--l-oscuro-acento);
	background: color-mix(in oklab, var(--suweb-azul-600) 18%, transparent);
}

.suweb-puerta__titulo {
	font-size: var(--suweb-t-lg);
	font-weight: var(--suweb-peso-fuerte);
	line-height: 1.3;
	text-wrap: balance;
}

.suweb-puerta__texto {
	color: var(--l-oscuro-suave);
	font-size: var(--suweb-t-sm);
	line-height: 1.6;
	text-wrap: pretty;
}

.suweb-puerta .suweb-cta {
	width: 100%;
}

/**
 * ============================================================
 * 20. PREGUNTAS — acordeón nativo, sin JavaScript
 * ============================================================
 */
.suweb-faq {
	display: grid;
	gap: var(--suweb-e-3);
}

.suweb-faq__item {
	border: 1px solid var(--suweb-borde);
	border-radius: var(--suweb-r-md);
	background: var(--suweb-superficie);
}

.suweb-faq__item[open] {
	border-color: var(--suweb-borde-fuerte);
}

.suweb-faq__pregunta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--suweb-e-4);
	min-height: var(--suweb-tap-comodo);
	padding: var(--suweb-e-4) var(--suweb-e-5);
	border-radius: var(--suweb-r-md);
	font-weight: var(--suweb-peso-medio);
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
	text-wrap: pretty;
}

.suweb-faq__pregunta::-webkit-details-marker {
	display: none;
}

.suweb-faq__pregunta:focus-visible {
	outline: 2px solid var(--suweb-foco);
	outline-offset: -2px;
}

/* Chevron. Decorativo: el estado real lo comunica <details>. */
.suweb-faq__pregunta::after {
	content: "";
	flex: 0 0 auto;
	inline-size: .625rem;
	block-size: .625rem;
	border-inline-end: 2px solid var(--suweb-texto-tenue);
	border-block-end: 2px solid var(--suweb-texto-tenue);
	rotate: 45deg;
	translate: 0 -25%;
	transition: rotate .18s ease, translate .18s ease;
}

.suweb-faq__item[open] .suweb-faq__pregunta::after {
	rotate: -135deg;
	translate: 0 25%;
}

@media (prefers-reduced-motion: reduce) {
	.suweb-faq__pregunta::after {
		transition: none;
	}
}

.suweb-faq__respuesta {
	padding: 0 var(--suweb-e-5) var(--suweb-e-5);
	color: var(--suweb-texto-suave);
	line-height: 1.65;
	text-wrap: pretty;
}

.suweb-faq__respuesta strong {
	color: var(--suweb-texto);
	font-weight: var(--suweb-peso-medio);
}

/**
 * ============================================================
 * 21. CINTA INFERIOR FIJA
 * ============================================================
 *
 * Aparece cuando el hero sale de pantalla, y sólo por debajo de lg: en
 * escritorio el CTA vive en la barra superior. Si el JS no corre no aparece
 * nunca, y la página conserva sus tres acciones en línea.
 */
.suweb-cinta {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: var(--suweb-z-nav);
	display: flex;
	gap: var(--suweb-e-2);
	padding: var(--suweb-e-3) var(--suweb-e-4);
	padding-block-end: calc(var(--suweb-e-3) + env(safe-area-inset-bottom, 0px));
	border-block-start: 1px solid var(--l-oscuro-borde);
	background: var(--l-oscuro);
	box-shadow: var(--suweb-sombra-nav);
	color-scheme: dark;
	translate: 0 110%;
	visibility: hidden;
	transition: translate .22s ease, visibility .22s;
}

.suweb-cinta[data-visible] {
	translate: 0;
	visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
	.suweb-cinta {
		transition: none;
	}
}

.suweb-cinta .suweb-cta {
	flex: 1 1 0;
	min-width: 0;
	padding-inline: var(--suweb-e-3);
	font-size: var(--suweb-t-sm);
}

/* WhatsApp queda como icono cuadrado: en 360px no entran tres etiquetas de
 * texto sin cortarse.
 *
 * El selector repite .suweb-cinta para ganarle en especificidad a la regla
 * de arriba: si no, el flex: 1 1 0 estira el icono como si fuera un botón
 * de texto más. */
.suweb-cinta .suweb-cinta__icono {
	flex: 0 0 auto;
	inline-size: var(--suweb-boton-alto);
	padding-inline: 0;
}

@media (min-width: 64em) {
	.suweb-cinta {
		display: none;
	}
}

/**
 * ============================================================
 * 22. PIE
 * ============================================================
 */
.suweb-pie {
	padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem);
	border-block-start: 1px solid var(--l-oscuro-borde);
	background: var(--l-oscuro);
	color: var(--l-oscuro-suave);
	color-scheme: dark;
}

.suweb-pie__grid {
	display: grid;
	gap: var(--suweb-e-6);
	align-items: start;
}

.suweb-pie__marca {
	display: inline-flex;
	align-items: center;
	gap: var(--suweb-e-2);
	color: var(--l-oscuro-texto);
	font-size: var(--suweb-t-lg);
	font-weight: var(--suweb-peso-fuerte);
	text-decoration: none;
}

.suweb-pie__marca img {
	display: block;
	width: 2rem;
	height: 2rem;
	object-fit: contain;
}

.suweb-pie__texto {
	max-width: 42ch;
	margin-block-start: var(--suweb-e-3);
	font-size: var(--suweb-t-sm);
	line-height: 1.6;
}

.suweb-pie__titulo {
	margin-block-end: var(--suweb-e-2);
	color: var(--l-oscuro-texto);
	font-size: var(--suweb-t-sm);
	font-weight: var(--suweb-peso-fuerte);
	letter-spacing: .06em;
	text-transform: uppercase;
}

.suweb-pie__enlaces {
	display: grid;
	gap: var(--suweb-e-1);
}

/*
 * 2rem con mouse y 44px con el dedo. El mínimo de WCAG 2.5.8 son 24px: con
 * puntero fino alcanza de sobra y la columna no queda desarmada, y en táctil
 * sube al mínimo cómodo del resto del sistema.
 */
.suweb-pie__enlaces a {
	display: inline-flex;
	align-items: center;
	min-height: 2rem;
	border-radius: var(--suweb-r-sm);
	color: var(--l-oscuro-suave);
	font-size: var(--suweb-t-sm);
	text-decoration: none;
}

@media (pointer: coarse) {
	.suweb-pie__enlaces a {
		min-height: var(--suweb-tap-min);
	}
}

.suweb-pie__enlaces a:hover {
	color: var(--l-oscuro-texto);
	text-decoration: underline;
	text-underline-offset: .25em;
}

.suweb-pie__enlaces a:focus-visible {
	outline: 2px solid var(--l-oscuro-acento);
	outline-offset: 2px;
}

.suweb-pie__legal {
	margin-block-start: clamp(2rem, 1.5rem + 2vw, 3rem);
	padding-block-start: var(--suweb-e-5);
	/* En celular la cinta fija tapa el final del pie. */
	padding-block-end: calc(var(--suweb-boton-alto) + var(--suweb-e-6));
	border-block-start: 1px solid var(--l-oscuro-borde);
	font-size: var(--suweb-t-sm);
	line-height: 1.6;
}

@media (min-width: 48em) {
	.suweb-pie__grid {
		grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
		gap: clamp(2rem, 1rem + 4vw, 4rem);
	}
}

@media (min-width: 64em) {
	.suweb-pie__legal {
		padding-block-end: 0;
	}
}

/**
 * ============================================================
/**
 * ============================================================
 * 23. MODO OSCURO
 * ============================================================
 *
 * Los tokens de marca los invierte tokens.css. Acá sólo se reasignan los
 * dos que son propios de la landing: en claro el fondo de la página es
 * blanco y el alterno es gris, y en oscuro se invierte la relación para que
 * las tarjetas no se fundan con el fondo.
 */
@media (prefers-color-scheme: dark) {
	:root {
		--l-fondo: #151b24;
		--l-fondo-alt: #0d1117;
	}
}


/**
 * ============================================================
 * 24. CONTRASTE FORZADO
 * ============================================================
 *
 * El navegador descarta fondos y sombras: los bordes que separan superficies
 * tienen que volver como borde real, o secciones enteras se funden entre sí.
 */
@media (forced-colors: active) {
	.suweb-hero::before,
	.suweb-pilar__foto,
	.suweb-ventana__fotos span {
		display: none;
	}

	.suweb-modulo,
	.suweb-espejo__item,
	.suweb-cambio__fila,
	.suweb-faq__item,
	.suweb-puerta,
	.suweb-garantia,
	.suweb-nota,
	.suweb-precio,
	.suweb-mock,
	.suweb-ventana,
	.suweb-dolor__burbuja {
		border: 1px solid CanvasText;
	}

	.suweb-cta {
		border: 1px solid ButtonText;
	}
}