/*
 * TK Site — tema: paleta, tipografía, base y componentes compartidos por todas las
 * páginas propias. Los colores se definen SOLO aquí (tokens --tk-*); el resto de
 * hojas los usa con var(). Los de marca se pueden cambiar en TK Site > General.
 */

/* ---------- Fuentes (locales) ---------- */
@font-face {
	font-family: "Outfit";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/outfit-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Outfit";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/outfit-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 100 1000;
	font-display: swap;
	src: url("../fonts/dmsans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 100 1000;
	font-display: swap;
	src: url("../fonts/dmsans-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Respaldo calibrado a las métricas de Outfit (medidas con fontTools frente a Arial):
   mientras carga la fuente el texto ocupa lo mismo y no salta (CLS 0). */
@font-face {
	font-family: "Outfit Fallback";
	src: local("Arial"), local("Helvetica"), local("Liberation Sans");
	size-adjust: 98.4%;
	ascent-override: 101.6%;
	descent-override: 26.4%;
	line-gap-override: 0%;
}

/* ---------- Tokens ----------
   Cada color de marca tiene su versión en canales (--*-rgb) para usar con
   transparencia: rgb(var(--tk-lime-rgb) / .4). */
:root {
	/* marca */
	--tk-lime: #c2d600;
	--tk-lime-rgb: 194 214 0;
	--tk-lime-400: #cadb23;
	--tk-lime-200: #e3ec8f;
	--tk-lime-100: #f4f7d9;
	--tk-lime-50: #f6f8e2;
	--tk-lime-50-rgb: 246 248 226;
	--tk-lime-soft: #f5f8cf;
	--tk-lime-ink: #5f6b00; /* lima legible sobre blanco (contraste AA) */
	--tk-lime-deep: #7b8800; /* lima para textos grandes sobre blanco (3:1) */
	--tk-blue: #4a53ff;
	--tk-blue-rgb: 74 83 255;
	--tk-blue-600: #3a43f0;
	--tk-blue-900: #23277a;
	--tk-blue-50: #eff4fe;
	--tk-blue-25: #f3f6fe;
	--tk-link: #3970f7;
	--tk-gold: #f2d220;
	--tk-linkedin: #0a66c2;

	/* neutros */
	--tk-white: #fff;
	--tk-white-rgb: 255 255 255;
	--tk-black: #000;
	--tk-black-rgb: 0 0 0;
	--tk-ink: var(--tk-black);
	--tk-gray: #607184;
	--tk-gray-600: #5a6470;
	--tk-gray-500: #63717a;
	--tk-gray-200: #c9d1d6;
	--tk-line: #e6e8ec;
	--tk-card: #f4f4f4;
	--tk-paper: #f6f7f2;
	--tk-shadow-rgb: 84 106 158;
	--tk-text: #2b3038; /* texto largo */
	--tk-placeholder: #9aa3ad;
	--tk-danger: #d4213d;
	--tk-danger-rgb: 212 33 61;
	--tk-danger-50: #fff4f6;
	--tk-danger-700: #a3142c;
	--tk-success: #1f9d55;
	--tk-success-rgb: 31 157 85;
	--tk-success-50: #f0faf4;
	--tk-success-700: #14663a;

	/* fondos oscuros (bordes de las imágenes de fondo del diseño) */
	--tk-night: #06070f;
	--tk-night-rgb: 6 7 15;
	--tk-night-400: #090a12;
	--tk-night-500: #0b0c14;
	--tk-night-600: #07080d;
	--tk-night-650: #07080f;
	--tk-night-700: #05060e;
	--tk-night-800: #050608;
	--tk-night-900: #050507;
	--tk-night-950: #050509;
	--tk-olive-500: #8e9c10;
	--tk-olive-700: #4b540a;
	--tk-olive-750: #49530c;
	--tk-olive-900: #1c1f0b;
	--tk-olive-950: #0b0c08;

	/* tipografía y medidas */
	--tk-font: "Outfit", "Outfit Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
	--tk-font-alt: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--tk-wrap: 984px;
	--tk-wrap-wide: 1184px;
	--tk-radius: 18px;
	--tk-radius-sm: 12px;
	--tk-radius-lg: 28px;
	--tk-ease: cubic-bezier(.2, .8, .2, 1);
	--tk-ease-io: cubic-bezier(.7, 0, .2, 1);
	--tk-ease-pop: cubic-bezier(.2, .8, .2, 1.3);
	--tk-shadow: 0 4px 30px rgb(var(--tk-shadow-rgb) / .08);
	--tk-shadow-lg: 0 30px 60px -24px rgb(var(--tk-black-rgb) / .35);
	--tk-section: 104px; /* espacio vertical entre secciones de páginas internas */
}

/* ---------- Base ---------- */
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body.tk {
	margin: 0;
	background: var(--tk-white);
	color: var(--tk-ink);
	font-family: var(--tk-font);
	font-size: 16px;
	line-height: 1.25;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
	overflow-x: clip;
}

.tk *,
.tk *::before,
.tk *::after {
	box-sizing: border-box;
}

.tk :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) {
	margin: 0;
	padding: 0;
}

.tk :where(ul, ol) {
	list-style: none;
}

.tk img,
.tk svg {
	display: block;
	max-width: 100%;
	height: auto;
}

.tk :where(a) {
	color: inherit;
	text-decoration: none;
}

.tk :where(button) {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.tk :focus-visible {
	outline: 2px solid var(--tk-lime);
	outline-offset: 3px;
}

.tk-wrap {
	width: min(var(--tk-wrap), 100% - 32px);
	margin-inline: auto;
}

.tk-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.tk-lime { color: var(--tk-lime); }
@media (max-width: 1023px) { .tk br.tk-d { display: none; } } /* saltos de línea del diseño, solo escritorio */
.tk-blue { color: var(--tk-blue); }

/* Fondo de sección: imagen de 1920 px CSS de ancho (1280 del diseño + 320 por lado),
   centrada. Así las fotos que trae el fondo quedan alineadas con el contenedor. */
.tk-bleed,
.tk-hero,
.tk-ops,
.tk-gallery,
.tk-why,
.tk-services,
.tk-awards,
.tk-footer {
	background: var(--tk-bg) center top / 1920px auto no-repeat, var(--tk-edge, var(--tk-night-800));
}

/* ---------- Títulos comunes ---------- */
.tk-h2 {
	font-size: 37px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.01em;
}
.tk-eyebrow {
	color: var(--tk-lime);
	font-size: 17px;
	font-weight: 400;
	line-height: 20px;
}

/* ---------- Botón (componente tk_button) ----------
   Píldora con círculo y flecha. Hover: se vuelve negro (relleno que crece desde
   el círculo), el botón crece, el círculo pasa a lima y la flecha sale por la
   derecha y vuelve a entrar por la izquierda. */
.tk-btn {
	--tk-btn-bg: var(--tk-lime);
	--tk-btn-fg: var(--tk-black);
	--tk-btn-bd: var(--tk-lime);
	--tk-btn-ic-bg: var(--tk-white);
	--tk-btn-ic-fg: var(--tk-black);
	--tk-btn-fill: var(--tk-black); /* color al hover */
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	height: 43px;
	padding: 0 5px 0 17px;
	border: 1.5px solid var(--tk-btn-bd);
	border-radius: 999px;
	background: var(--tk-btn-bg);
	color: var(--tk-btn-fg);
	font-family: var(--tk-font);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.005em;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
	transform: translateZ(0);
	transition: transform .35s cubic-bezier(.2, .8, .2, 1.2), color .3s ease, border-color .3s ease, background-color .2s ease, box-shadow .35s ease;
}
.tk-btn::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	right: 21px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--tk-btn-fill);
	transform: translate(50%, -50%) scale(0);
	transition: transform .5s cubic-bezier(.7, 0, .2, 1);
}
.tk-btn__label { padding-right: 12px; }
.tk-btn__icon {
	position: relative;
	display: grid;
	place-items: center;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--tk-btn-ic-bg);
	color: var(--tk-btn-ic-fg);
	overflow: hidden;
	transition: background-color .3s ease, color .3s ease;
}
.tk-btn__icon svg {
	grid-area: 1 / 1;
	width: 17px;
	height: 17px;
	transition: transform .45s cubic-bezier(.7, 0, .2, 1);
}
.tk-btn__icon svg + svg { transform: translateX(-160%); }
.tk-btn:hover,
.tk-btn:focus-visible {
	--tk-btn-ic-bg: var(--tk-lime);
	--tk-btn-ic-fg: var(--tk-black);
	color: var(--tk-white);
	border-color: var(--tk-btn-fill);
	background-color: var(--tk-btn-fill);
	transition-delay: 0s, 0s, 0s, .32s, 0s;
	transform: scale(1.06);
	box-shadow: 0 10px 24px -8px rgb(var(--tk-black-rgb) / .45);
}
.tk-btn:hover::before,
.tk-btn:focus-visible::before { transform: translate(50%, -50%) scale(14); }
.tk-btn:hover .tk-btn__icon svg:first-child,
.tk-btn:focus-visible .tk-btn__icon svg:first-child { transform: translateX(160%); }
.tk-btn:hover .tk-btn__icon svg + svg,
.tk-btn:focus-visible .tk-btn__icon svg + svg { transform: none; }
.tk-btn:active { transform: scale(.98); }

.tk-btn--outline {
	--tk-btn-bg: transparent;
	--tk-btn-fg: var(--tk-white);
	--tk-btn-bd: var(--tk-white);
	--tk-btn-ic-bg: var(--tk-lime);
	height: 42px;
	padding-left: 14px;
	font-size: 13.5px;
}
.tk-btn--dark {
	--tk-btn-bg: var(--tk-black);
	--tk-btn-fg: var(--tk-white);
	--tk-btn-bd: var(--tk-black);
	--tk-btn-ic-bg: var(--tk-lime);
}
.tk-btn--dark { --tk-btn-fill: var(--tk-blue); }
.tk-btn--light {
	--tk-btn-bg: var(--tk-white);
	--tk-btn-bd: var(--tk-white);
	--tk-btn-ic-bg: var(--tk-lime);
}
.tk-btn--sm { height: 38px; padding-left: 14px; font-size: 13.5px; }
.tk-btn--sm .tk-btn__icon { width: 28px; height: 28px; }
.tk-btn--sm::before { right: 19px; }

/* Enlace "Leer más" */
.tk-more {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	font-size: 13.25px;
	font-weight: 500;
}
.tk-more span {
	background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
	line-height: 17px;
	transition: background-size .35s ease;
}
.tk-more i {
	display: grid;
	place-items: center;
	width: 23px;
	height: 23px;
	border-radius: 50%;
	background: var(--tk-lime);
	transition: transform .35s cubic-bezier(.2, .8, .2, 1.2), background-color .25s ease, color .25s ease;
}
.tk-more svg { width: 13px; height: 13px; }
.tk-more:hover span { background-size: 0 1px; background-position: 100% 100%; }
.tk-more:hover i { transform: translateX(4px) scale(1.15); background: var(--tk-black); color: var(--tk-white); }

/* Botón redondo azul (flechas de sliders) */
.tk .tk-round {
	display: grid;
	place-items: center;
	width: 31px;
	height: 31px;
	border-radius: 50%;
	background: var(--tk-blue);
	color: var(--tk-white);
	transition: transform .2s ease, background-color .2s ease;
}
.tk-round svg { width: 17px; height: 17px; }
.tk-round--prev svg { transform: scaleX(-1); }
.tk .tk-round:hover { background: var(--tk-blue-600); transform: scale(1.06); }

/* Paginación (puntos / barras). El área táctil es de 24 px (accesibilidad) aunque el
   punto se vea de 8 px: el relleno transparente no se pinta (background-clip). */
.tk-dots {
	display: flex;
	justify-content: center;
	gap: 0;
}
.tk .tk-dots button {
	box-sizing: content-box;
	width: 8px;
	height: 8px;
	padding: 8px;
	border-radius: 50%;
	background: var(--tk-lime-soft);
	background-clip: content-box;
	transition: background-color .2s ease, width .2s ease;
}
.tk-dots button[aria-current="true"] { background-color: var(--tk-lime); }
.tk-dots--bars { gap: 2px; }
.tk .tk-dots--bars button {
	width: 22.5px;
	height: 6.5px;
	padding: 9px 1px;
	border-radius: 4px;
	background-color: rgb(var(--tk-lime-rgb) / .45);
}
.tk-dots--bars button[aria-current="true"] { width: 27px; background-color: var(--tk-lime); }

/* Chip (etiqueta / enlace corto) */
.tk-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px 0 12px;
	border: 1px solid rgb(var(--tk-white-rgb) / .45);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .35s cubic-bezier(.2, .8, .2, 1.3);
}
.tk-chip svg { width: 18px; height: 18px; color: var(--tk-lime); transition: color .25s ease; }
a.tk-chip:hover { background: var(--tk-lime); border-color: var(--tk-lime); color: var(--tk-black); transform: translateY(-2px); }
a.tk-chip:hover svg { color: var(--tk-black); }
.tk-chip--light { border: 0; background: rgb(var(--tk-white-rgb) / .92); color: var(--tk-black); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tk-chip--light svg { color: var(--tk-black); }

/* Lo que entra animado desde los costados (data-tk-reveal="left|right") no debe
   ensanchar la página antes de animarse. clip (no hidden) no rompe position: sticky. */
#tk-main { overflow-x: clip; }