/* ============================================================================
   WEBFORMAS — DESIGN SYSTEM
   Paleta derivada do logotipo (camaleão sobre violeta profundo #1D024E):
   o violeta é a base institucional, o lime é a cor de ação e os tons do
   camaleão (teal, dourado, laranja, rosa) identificam categorias e serviços.
   ============================================================================ */

/* ----------------------------------------------------------------- TOKENS */
:root {
	/* --- base violeta (fundo do logo) --- */
	--ink-950: #0E0130;
	--ink-900: #14023C;
	--ink-800: #1D024E;
	--ink-700: #2A0A66;
	--ink-600: #3B1583;

	/* --- violeta de marca --- */
	--violet-700: #5B21B6;
	--violet-600: #6D28D9;
	--violet-500: #8B5CF6;
	--violet-300: #C4B5FD;
	--violet-100: #EDE7FE;
	--violet-050: #F6F3FF;

	/* --- lime: cor de ação (CTA principal) --- */
	--lime-600: #7FC908;
	--lime-500: #9BE619;
	--lime-400: #B4F03C;

	/* --- acentos do camaleão --- */
	--teal-500: #14C3D4;
	--teal-600: #0E9AA8;
	--gold-500: #F7B32B;
	--gold-600: #D9930E;
	--coral-500: #E8763C;
	--pink-500: #EC2A78;
	--pink-600: #C81660;

	/* --- neutros --- */
	--slate-900: #14122A;
	--slate-800: #241F45;
	--slate-600: #56517A;
	--slate-500: #6F6A92;
	--slate-400: #9A95B8;
	--slate-200: #E6E2F2;
	--slate-100: #F1EEF9;
	--paper: #FFFFFF;
	--paper-2: #F8F6FD;

	/* --- semânticos --- */
	--bg: var(--paper);
	--bg-alt: var(--paper-2);
	--bg-dark: var(--ink-900);
	--text: var(--slate-900);
	--text-soft: var(--slate-600);
	--text-invert: #FFFFFF;
	--text-invert-soft: rgba(255, 255, 255, .72);
	--line: var(--slate-200);
	--line-dark: rgba(255, 255, 255, .12);

	/* --- tipografia --- */
	--font: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--fs-display: clamp(2rem, 4.2vw, 3.75rem);   /* 32 → 60 */
	--fs-h2:      clamp(1.75rem, 3.4vw, 3rem);   /* 28 → 48 */
	--fs-h3:      clamp(1.25rem, 1.7vw, 1.5rem); /* 20 → 24 */
	--fs-h4:      1.125rem;
	--fs-lead:    clamp(1rem, 1.15vw, 1.125rem);
	--fs-body:    1rem;
	--fs-sm:      0.875rem;
	--fs-xs:      0.8125rem;
	--fs-eyebrow: 0.75rem;

	/* --- espaçamento (escala 4px) --- */
	--sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
	--sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 2.5rem;  --sp-8: 3rem;
	--sp-9: 4rem;    --sp-10: 5rem;   --sp-11: 6rem;   --sp-12: 7.5rem;

	/* --- layout --- */
	--container: 1400px;
	--container-narrow: 1180px;
	/* primeira dobra: hero + faixa somam a altura da tela, com teto Full HD */
	--fold: min(100vh, 1080px);
	--marquee-h: 3.5rem;
	/* altura da hero: mude só aqui (ex.: 720px). Por padrão é a dobra
	   menos a faixa, com piso de 620px para telas baixas */
	--hero-h: max(620px, calc(var(--fold) - var(--marquee-h)));
	--gutter: clamp(1.25rem, 4vw, 3rem);
	--section-y: clamp(3.5rem, 7vw, 6.5rem);

	/* --- raios --- */
	--r-sm: 8px;  --r-md: 14px;  --r-lg: 18px;  --r-xl: 24px;  --r-pill: 999px;

	/* --- sombras --- */
	--sh-sm: 0 4px 14px rgba(29, 2, 78, .06);
	--sh-md: 0 10px 30px rgba(29, 2, 78, .08);
	--sh-lg: 0 20px 46px rgba(29, 2, 78, .14);
	--sh-lime: 0 12px 30px rgba(123, 199, 10, .32);
	--sh-violet: 0 12px 30px rgba(109, 40, 217, .30);

	/* --- movimento --- */
	--ease: cubic-bezier(.22, .68, .32, 1);
	--t-fast: .18s var(--ease);
	--t: .28s var(--ease);
}

/* ------------------------------------------------------------------ RESET */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6.5rem; } /* compensa o cabeçalho fixo nas âncoras */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important; animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

body {
	margin: 0;
	font-family: var(--font);
	font-size: var(--fs-body);
	line-height: 1.65;
	color: var(--text);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 800; line-height: 1.14; letter-spacing: -.025em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--violet-500); outline-offset: 3px; border-radius: 4px; }

/* Componentes com `display` explícito (cartões flex) venceriam a regra do
   agente de usuário para [hidden]; os carrosséis dependem disso funcionar. */
[hidden] { display: none !important; }

/* --------------------------------------------------- BARRA DE ROLAGEM */
/* Firefox */
html { scrollbar-color: var(--violet-600) var(--violet-050); scrollbar-width: thin; }
/* Chromium / WebKit */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--violet-050); }
::-webkit-scrollbar-thumb {
	border-radius: var(--r-pill);
	border: 3px solid var(--violet-050);
	background-image: linear-gradient(180deg, var(--violet-500), var(--violet-700));
}
::-webkit-scrollbar-thumb:hover {
	background-image: linear-gradient(180deg, var(--lime-500), var(--lime-600));
}
::-webkit-scrollbar-corner { background: var(--violet-050); }

/* seleção de texto na mesma família */
::selection { background: var(--violet-600); color: #fff; }

.visually-hidden {
	position: absolute !important; width: 1px; height: 1px;
	margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
	position: absolute; left: var(--sp-4); top: -100px; z-index: 999;
	background: var(--ink-800); color: #fff; padding: var(--sp-3) var(--sp-5);
	border-radius: var(--r-sm); transition: top var(--t-fast);
}
.skip-link:focus { top: var(--sp-4); }

/* ----------------------------------------------------------------- LAYOUT */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }

.section { position: relative; padding-block: var(--section-y); }
.section--dark { background: var(--ink-900); color: var(--text-invert); }
.section--alt { background: var(--bg-alt); }

.stack > * + * { margin-top: var(--flow, var(--sp-4)); }

/* ------------------------------------------------------------- TIPOGRAFIA */
.eyebrow {
	display: inline-flex; align-items: center; gap: var(--sp-2);
	font-size: var(--fs-eyebrow); font-weight: 700; line-height: 1;
	text-transform: uppercase; letter-spacing: .18em;
	color: var(--violet-600);
}

.display { font-size: var(--fs-display); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); font-weight: 700; }

.lead { font-size: var(--fs-lead); line-height: 1.7; color: #C2C0CF; }
.muted { color: var(--text-soft); }
.section--dark .muted, .section--dark .lead { color: var(--text-invert-soft); }

/* realces de cor no texto */
.t-violet { color: var(--violet-600); }
.t-lime   { color: var(--lime-600); }
.t-teal   { color: var(--teal-600); }
.t-pink   { color: var(--pink-500); }
.t-gold   { color: var(--gold-600); }
.section--dark .t-violet { color: var(--violet-500); }
.section--dark .t-lime   { color: var(--lime-500); }

/* traço decorativo sob o título */
.rule {
	display: block; width: 84px; height: 5px; border-radius: var(--r-pill);
	background: linear-gradient(90deg, var(--violet-600), var(--pink-500));
}
.rule--center { margin-inline: auto; }

/* ---------------------------------------------------------------- BADGES */
.badge {
	display: inline-flex; align-items: center; gap: var(--sp-2);
	padding: .7rem 1.35rem; border-radius: var(--r-pill);
	border: 1.5px solid var(--violet-300); background: var(--paper);
	color: var(--violet-600);
	font-size: var(--fs-eyebrow); font-weight: 700; line-height: 1;
	text-transform: uppercase; letter-spacing: .14em;
	box-shadow: var(--sh-sm);
}
.badge svg { width: 17px; height: 17px; flex: none; }
.badge--dark {
	background: rgba(155, 230, 25, .08); border-color: rgba(155, 230, 25, .42);
	color: var(--lime-500); box-shadow: none;
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.badge--ghost {
	background: rgba(255, 255, 255, .06); border-color: var(--line-dark);
	color: var(--violet-300); box-shadow: none;
}

/* --------------------------------------------------------------- BOTÕES */
/* O `.btn--lime` é o botão de referência do projeto: pílula lime com o ícone
   num círculo escuro à esquerda e a seta circulada à direita. */
.btn {
	position: relative;
	display: inline-flex; align-items: center; gap: var(--sp-3);
	padding: .625rem 1rem .625rem .625rem;
	border-radius: var(--r-pill);
	font-size: .9375rem; font-weight: 700; line-height: 1;
	text-transform: uppercase; letter-spacing: .03em;
	transition: transform var(--t), box-shadow var(--t), background-color var(--t);
	will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn__icon {
	width: 40px; height: 40px; flex: none; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
}
.btn__icon svg { width: 19px; height: 19px; }
.btn__label { padding-block: .25rem; }
.btn__arrow { flex: none; display: inline-flex; }
.btn__arrow svg { width: 24px; height: 24px; transition: transform var(--t); }
.btn:hover .btn__arrow svg { transform: translateX(3px); }
/* sem a seta à direita o texto precisa de mais respiro no fim */
.btn--no-arrow { padding-right: 1.375rem; }

/* — primário (ação) — */
.btn--lime {
	background-image: linear-gradient(180deg, var(--lime-400) 0%, var(--lime-600) 100%);
	color: var(--ink-900);
	box-shadow: var(--sh-lime);
}
.btn--lime .btn__icon { background: var(--ink-800); color: var(--lime-500); }
.btn--lime:hover { box-shadow: 0 16px 38px rgba(123, 199, 10, .46); }

/* — secundário (institucional) — */
.btn--violet {
	background-image: linear-gradient(100deg, var(--violet-700) 0%, var(--violet-500) 100%);
	color: #fff;
	box-shadow: var(--sh-violet);
}
.btn--violet .btn__icon { background: rgba(255, 255, 255, .18); color: #fff; }
.btn--violet:hover { box-shadow: 0 16px 38px rgba(109, 40, 217, .44); }

/* — contorno sobre fundo claro — */
.btn--outline {
	background: transparent; border: 1.5px solid var(--violet-300);
	color: var(--violet-600); box-shadow: none;
}
.btn--outline:hover { background: var(--violet-050); border-color: var(--violet-500); }

/* — vidro sobre fundo escuro — */
.btn--glass {
	background: rgba(255, 255, 255, .08); border: 1px solid var(--line-dark);
	color: #fff; box-shadow: none;
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.btn--glass:hover { background: rgba(255, 255, 255, .14); }

/* — link com seta — */
.btn-link {
	display: inline-flex; align-items: center; gap: .55rem;
	font-size: var(--fs-sm); font-weight: 600; color: var(--violet-600);
	transition: color var(--t-fast), gap var(--t-fast);
}
.btn-link svg { width: 17px; height: 17px; transition: transform var(--t-fast); }
.btn-link:hover { color: var(--violet-500); }
.btn-link:hover svg { transform: translateX(4px); }

.btn--block { width: 100%; justify-content: center; }

/* --------------------------------------------------------------- CARTÕES */
.card {
	position: relative;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-sm);
	transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.card--pad { padding: var(--sp-6); }

.card--dark {
	background: rgba(255, 255, 255, .028);
	border-color: var(--line-dark);
	box-shadow: none;
	color: var(--text-invert);
}

/* ícone circular / arredondado com gradiente */
.ico {
	display: inline-flex; align-items: center; justify-content: center;
	width: 58px; height: 58px; border-radius: var(--r-md);
	color: #fff; flex: none;
}
.ico--round { border-radius: 50%; }
.ico--lg { width: 76px; height: 76px; }
.ico svg { width: 50%; height: 50%; }

.ico--violet { background: linear-gradient(140deg, var(--violet-500), var(--violet-700)); box-shadow: 0 8px 18px rgba(109, 40, 217, .28); }
.ico--pink   { background: linear-gradient(140deg, #FF5C9E, var(--pink-600));            box-shadow: 0 8px 18px rgba(236, 42, 120, .28); }
.ico--teal   { background: linear-gradient(140deg, #3ADCEA, var(--teal-600));            box-shadow: 0 8px 18px rgba(20, 195, 212, .28); }
.ico--gold   { background: linear-gradient(140deg, #FFCE5C, var(--gold-600));            box-shadow: 0 8px 18px rgba(247, 179, 43, .28); }
.ico--lime   { background: linear-gradient(140deg, var(--lime-400), var(--lime-600));    box-shadow: 0 8px 18px rgba(123, 199, 10, .28); }
.ico--coral  { background: linear-gradient(140deg, #FF9D68, #D2551E);                    box-shadow: 0 8px 18px rgba(232, 118, 60, .28); }

/* ---------------------------------------------------------------- GRADES */
.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1000px) {
	.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------------- ORNAMENTOS */
.deco { position: absolute; z-index: 0; pointer-events: none; }

.deco--dots {
	background-image: radial-gradient(circle, currentColor 2px, transparent 2.1px);
	background-size: 22px 22px;
	color: var(--violet-300);
	opacity: .55;
}
.deco--glow { border-radius: 50%; filter: blur(12px); }

/* malha fina usada nos blocos escuros */
.deco--grid {
	background-image:
		repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 78px),
		repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 78px);
}

/* --------------------------------------------------------- ENTRADA SUAVE */
[data-reveal] {
	opacity: 0; transform: translateY(18px);
	transition: opacity .6s var(--ease), transform .6s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	[data-reveal] { opacity: 1; transform: none; }
}