@font-face {
	font-family: 'Plus Jakarta Sans';
	src: url('./fonts/plus-jakarta-sans-variable.woff2') format('woff2');
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
}

:root {



	/* Base neutral inspirada en la referencia, con acentos CT compartidos. */
	--ct-ink: #111111;
	--ct-ink-soft: #262626;
	--ct-ink-muted: #5c5c5c;
	--ct-success-muted: #167143;
	--ct-surface-soft: #f5f5f5;
	--ct-border-neutral: #e5e5e5;
	/* Acentos de marca: los CTA de compra usan tokens neutrales independientes. */
	--ct-acento-azul: #2651ed;
	--ct-acento-azul-hover: #1f43d6;
	--ct-confirmacion-verde: #13eb3e;
	--ct-confirmacion-verde-hover: #0fce36;
	--ct-confirmacion-texto: #0b203e;
	--ct-focus-color: #2651ed;
	--ct-azul: #0b203e;
	--ct-azul-interactivo: #2651ed;
	--ct-azul-interactivo-hover: #1f43d6;
	--ct-sobre-azul-interactivo: #ffffff;
	--ct-badge-glass-fondo: linear-gradient(135deg, rgb(255 255 255 / 72%) 0%, rgb(255 255 255 / 58%) 52%, rgb(238 241 245 / 66%) 100%);
	--ct-badge-hot-glass-fondo: rgb(255 153 54 / 92%);
	--ct-badge-glass-borde: rgb(17 24 39 / 15%);
	--ct-badge-glass-sombra: 0 2px 8px rgb(17 24 39 / 14%), 0 0 0 1px rgb(255 255 255 / 66%) inset;
	--ct-badge-glass-filtro: blur(10px) saturate(1.16);
	--ct-cyan: var(--ct-azul);
	--ct-cyan-osc: #08182d;
	--ct-cyan-tinte: #f3f6fa;
	--ct-menu-texto: #ffffff;
	--ct-texto-negro: #111111;


	--ct-naranja: #ff6f00;
	--ct-naranja-hover: #e66000;
	--ct-naranja-osc: #7a3b00;
	--ct-naranja-tinte: #fff4eb;
	--ct-naranja-suave: #9a4b00;
	--ct-naranja-texto: #7a3b00;
	--ct-sobre-naranja: #0b203e;
	--ct-verde: #13eb3e;
	--ct-verde-texto: #0b5e22;


	--ct-tinta: var(--ct-ink);
	--ct-tinta-suave: var(--ct-ink-muted);
	--ct-tinta-tenue: #737373;

	--ct-superficie: #fff;
	--ct-superficie-suave: var(--ct-surface-soft);
	--ct-fondo: #fff;

	--ct-borde: var(--ct-border-neutral);
	--ct-borde-fuerte: #d4d4d4;
	--ct-borde-suave: #f0f0f0;
	--ct-hover-sutil: #f7f7f7;

	--ct-fuente: 'Plus Jakarta Sans', Inter, system-ui, 'Segoe UI', Arial, sans-serif;
	--ct-fuente-titulo: 'Plus Jakarta Sans', Inter, system-ui, 'Segoe UI', Arial, sans-serif;

	--ct-boton-principal-fondo: #000000;
	--ct-boton-principal-hover: #262626;
	--ct-boton-principal-texto: #fff;
	--ct-boton-secundario-fondo: #efefef;
	--ct-boton-secundario-hover: #e5e5e5;
	--ct-boton-secundario-texto: #111111;
	--ct-boton-secundario-borde: #e5e5e5;


	--ct-exito: var(--ct-success-muted);
	--ct-exito-tinte: #f3f5f3;
	--ct-aviso: #4b4b4b;
	--ct-aviso-tinte: #f5f5f5;
	--ct-error: #cf3606;
	--ct-error-tinte: #fff0ed;


	--ct-estado-completado-fondo: #f3f3f3;
	--ct-estado-completado-texto: var(--ct-verde);
	--ct-estado-completado-borde: #d4d4d4;
	--ct-estado-preparando-fondo: #f7f7f7;
	--ct-estado-preparando-texto: #555555;
	--ct-estado-preparando-borde: #e5e5e5;
	--ct-estado-pendiente-fondo: #f3f3f3;
	--ct-estado-pendiente-texto: #222222;
	--ct-estado-pendiente-borde: #dedede;
	--ct-estado-inactivo-fondo: #f7f7f7;
	--ct-estado-inactivo-texto: #555555;
	--ct-estado-inactivo-borde: #dedede;


	--ct-radio: 16px;
	--ct-radio-campo: 12px;
	--ct-radio-pill: 999px;


	--ct-contenedor-max: 1320px;
	--ct-contenedor-gutter: 16px;
	--ct-contenedor-ancho: min(
		var(--ct-contenedor-max),
		calc(100% - (var(--ct-contenedor-gutter) * 2))
	);
	--ct-menu-altura-desktop: 52px;
	--ct-separacion-menu-pagina-desktop: 24px;
	--ct-separacion-menu-pagina-mobile: 16px;
	--ct-separacion-detalle: 16px;


	--ct-whatsapp: #111111;
	--ct-whatsapp-suave: #262626;

	--ct-foco: 0 0 0 3px rgb(38 81 237 / 18%);
	--ct-foco-teclado: 3px solid var(--ct-focus-color);
	--ct-sombra: 0 1px 2px rgba(0, 0, 0, .03), 0 8px 24px rgba(0, 0, 0, .04);
	--ct-sombra-alta: 0 2px 6px rgba(0, 0, 0, .05), 0 14px 34px rgba(0, 0, 0, .08);

	--ct-ease: cubic-bezier(.23, 1, .32, 1);
	--ct-ease-drawer: cubic-bezier(.32, .72, 0, 1);
	--ct-transicion: 160ms var(--ct-ease);
}


@media (max-width: 1024px) {
	input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='hidden']),
	select,
	textarea {

		font-size: 16px !important;
	}
}


html,
body {
	max-width: 100%;
	overflow-x: clip;
	overscroll-behavior-x: none;
}

html body[class] {
	font-family: var(--ct-fuente);
}

/* Toda página de contenido usa este único espacio después del menú. */
.ctsys-pagina-contenido {
	padding-top: var(--ct-separacion-menu-pagina-desktop);
}

@media (max-width: 767px) {
	.ctsys-pagina-contenido {
		padding-top: var(--ct-separacion-menu-pagina-mobile);
	}
}

/* El foco por clic no debe dejar el contorno nativo punteado; teclado conserva una marca consistente. */
html body[class] :is(a, button, input, select, textarea, summary, [role='button'], [tabindex]):focus:not(:focus-visible) {
	outline: 0 !important;
}

html body[class] :is(a, button, input, select, textarea, summary, [role='button'], [tabindex]):focus-visible {
	outline: var(--ct-foco-teclado) !important;
	outline-offset: 2px;
	box-shadow: none !important;
}

html body[class] :is(.show-password-input, button.show-password-input):focus:not(:focus-visible) {
	outline: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
}