/* ────────────────────────────────────────────────────────────────────────── */
/* ██████████████████████ ♻️ DESIGN TOKENS  █████████████████████████████████ */
/* ────────────────────────────────────────────────────────────────────────── */

/* BEST COLOR PICKER WEBSITE: https://www.iamsajid.com/ui-colors/ */
:root {
	/* Typography Colors */
	--font-body: "Inter", sans-serif;
	--font-headings: "Plus Jakarta Sans", sans-serif;
	--font-mono: "JetBrains Mono", monospace;
	
	/* Spacing variables */
	--spacing0: 0rem; /* 0 px */
	--spacing1: 0.25rem; /* 4 px */
	--spacing2: 0.5rem; /* 8 px */
	--spacing3: 0.75rem; /* 12 px */
	--spacing4: 1.0rem; /* 16 px */
	--spacing5: 1.5rem; /* 24 px */ 
	--spacing6: 2rem; /* 32 px */
	--spacing7: 3rem; /* 48 px */
	--spacing8: 4rem; /* 64 px */
	--spacing9: 6rem; /* 96 px */
	--spacing10: 8rem; /* 128 px */
	--spacing11: 10rem; /* 192 px */

	/* Typograph variables */
	--textsize-1: 0.75rem;	/* 12px */
	--textsize-2: 0.875rem;	/* 14px */
	--textsize-3: 1rem;	/* 16px */
	--textsize-4: 1.125rem;	/* 18px */
	--textsize-5: 1.25rem;	/* 20px */
	--textsize-6: 1.5rem;	/* 24px */
	--textsize-7: 2rem;	/* 32px */
	--textsize-8: 2.5rem;	/* 40px */
	--textsize-9: 3rem;	/* 48px */
	--textsize-10: 4rem;	/* 64px */
	--textsize-11: 5rem;	/* 80px */
}


:root[data-theme="dark"]{
	/* Typography Colors */
	--color-text-primary: oklch(0.96 0.03 265); /* White */
	--color-text-primary-muted: oklch(0.76 0.03 265); /* Off white */
	--color-text-terciary: oklch(0.72 0.02 265 / 0.8); /* Subtext */

	/* Brand Colors */
	--color-bg-dark: oklch(0.2 0.015 265); /* Plano de fundo */ /* old color oklch(0.1 0.015 265)*/
	--color-bg: oklch(0.25 0.015 265); /* Plano de fundo */ /* old color oklch(0.15 0.015 265)*/
	--color-bg-light: oklch(0.3 0.015 265); /* old color oklch(0.2 0.015 265)*/
	--color-accent1: #0f3377; /* CTA Button ou oklch(0.76 0.1 265)*/
	--color-accent1-hover: #0372db; /* CTA Button brighter*/
	--color-accent2: oklch(0.76 0.1 85); /* Hover amarelo */

	/* Feedback Colors */
	--color-success: oklch(0.7 0.05 160); 
	--color-warning: oklch(0.7 0.05 100);
	--color-danger: oklch(0.7 0.05 30);

	/* Decoration Colors */
	--color-highlight: oklch(0.5 0.03 265);
	--color-border: oklch(0.4 0.03 265);
	--color-border-muted: oklch(0.3 0.03 265);
	--color-info: oklch(0.7 0.05 260);

	/* Gradients */
	--gradient-bg: linear-gradient(0deg, var(--color-bg) 95%, var(--color-bg-light));
	--gradient-bg-hover: linear-gradient(0deg, var(--color-bg), var(--color-bg-light));

	/* Properties and Values */
	--shadow: 
			0px 4px 6px -1px oklch(0 0 0 / 0.65),
			0px 2px 4px -1px oklch(0 0 0 / 0.05); /*Deslocamento X, Deslocamento Y, Blur, Cor da sombra RGBA*/
	--shadow-hover: 
			0px 10px 15px -3px oklch(0 0 0 / 0.72),
			0px 0px 0px -2px oklch(0 0 0 / 0.08);
	--shadow-active:
			0px 4px 12px oklch(0 0 0 / 0.55),
			0px 0px 0px 1px oklch(0 0 0 / 0.04);
	--border: solid 1px var(--color-border); /* Borda com cor de borda */
}

:root[data-theme="light"]{
	/* Typography Colors */
	--color-text-primary: oklch(0.15 0.03 265);	/* White */
	--color-text-primary-muted: oklch(0.4 0.03 265);	/* Off white */
	--color-text-terciary: oklch(0.50 0.02 265); /* Subtext */

	/* Brand Colors */
	--color-bg-dark: oklch(0.92 0.015 265);	/* Plano de fundo */
	--color-bg: oklch(0.96 0.015 265);	/* Plano de fundo */
	--color-bg-light: oklch(1 0.015 265);
	--color-accent1: oklch(0.7 0.15 265);	/* CTA Button, find #025bb0 for light mode later */
	--color-accent1-hover: #0372db;	/* CTA Button brighter*/
	--color-accent2: oklch(0.4 0.1 85);	/* Hover amarelo */

	/* Feedback Colors */
	--color-success: oklch(0.5 0.05 160); 
	--color-warning: oklch(0.5 0.05 100);
	--color-danger: oklch(0.5 0.05 30);

	/* Decoration Colors */
	--color-highlight: oklch(0.8 0.015 0 / 1); /* Inventei essa cor*/
	--color-border: oklch(0.6 0.03 265);
	--color-border-muted: oklch(0.7 0.03 265);
	--color-info: oklch(0.5 0.05 260);

	/* Gradients */
	--gradient-bg: linear-gradient(0deg, var(--color-bg) 95%, var(--color-bg-light));
	--gradient-bg-hover: linear-gradient(0deg, var(--color-bg), var(--color-bg-light));

	/* Properties and Values*/
	--shadow: 
			0px 4px 6px -1px oklch(0 0 0 / 0.02),
			0px 2px 4px -1px oklch(0 0 0 / 0.02); /*Deslocamento X, Deslocamento Y, Blur, Cor da sombra RGBA*/
	--shadow-hover: 
			0px 10px 15px -3px oklch(0 0 0 / 0.08),
			0px 4px 6px -2px oklch(0 0 0 / 0.12);
	--shadow-active:
			0px 1px 2px oklch(0 0 0 / 0.05);
	--border: solid 1px oklch(0.6 0.015 0 / 1); /* Inventei essa cor*/
}


/* ────────────────────────────────────────────────────────────────────────── */
/* ███████████████████████  🖼️ ICONS CHANGES   █████████████████████████████ */
/* ────────────────────────────────────────────────────────────────────────── */

:root[data-theme="light"] .logo-header{content: url("/assets/images/logo-dark.svg"); }

:root[data-theme="dark"] .icon-moon {display: block; }
:root[data-theme="dark"] .icon-sun {display: none; }
:root[data-theme="light"] .icon-moon {display: none; }
:root[data-theme="light"] .icon-sun {display: block; }


/* ────────────────────────────────────────────────────────────────────────── */
/* █████████████████████  📝 COMPONENTS CLS FIX  ███████████████████████████ */
/* ────────────────────────────────────────────────────────────────────────── */

t-header,
t-index-bar,
t-hero,
t-hero-reverse,
t-card-row,
t-card-carousel,
t-card-media,
t-cta,
t-footer{display:block; }


/* ===== MOBILE FIRST ===== */
t-header{min-height:95px; }
t-index-bar{min-height:24px; }
t-hero{min-height:450px; }
t-hero-reverse{min-height:450px; }
t-card-row{min-height:425px; }
t-card-carousel{min-height:375px; }
t-card-carousel-reduced{min-height:365px; }
t-card-media{min-height:32px; }
t-cta{min-height:170px; }
t-footer{min-height:80px; }

/* ===== DESKTOP ===== */
@media (min-width: 992px){
	t-header{min-height:87px; }
	t-index-bar{min-height:24px; }
	t-hero{min-height:330px; }
	t-hero-reverse{min-height:330px; }
	t-card-row{min-height:180px; } 
	t-card-carousel{min-height:425px; }
	t-card-carousel-reduced{min-height:380px; }
	t-card-media{min-height:290px; }
	t-cta{min-height:185px; }
	t-footer{min-height:45px; }
	.carousel__wrapper{min-height:315px; }
}


/* ────────────────────────────────────────────────────────────────────────── */
/* ██████████████████    ✏️ RESET & GLOBAL STYLES    ███████████████████████ */
/* ────────────────────────────────────────────────────────────────────────── */

*{
	/* Layout Padrão */
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html{
	/* Effects */
	scroll-behavior: smooth;
}

body{
	/* Layout */
	display: flex;
	flex-direction: column;
	overflow-x: hidden; /* Esconde tudo que está fora da tela */
	width: 100%; /* A página sempre vai ter a largura da tela */
	min-height: 100vh; /* Altura mínima, garante que rodapé fica colado no final da tela mesmo em páginas curtas */
	/* Typograph */
	font-family: var(--font-body);
	font-size: var(--textsize-3); /*16px base*/
	font-weight: 400;
	line-height: 1.4;
	text-wrap: pretty;
	/* Visuals */
	background-color: var(--color-bg-dark);
	/* Effects */
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing:antialiased;
}


/* ────────────────────────────────────────────────────────────────────────── */
/* ██████████████████████████  📝 TIPOGRAFIA  ██████████████████████████████ */
/* ────────────────────────────────────────────────────────────────────────── */
/* ─── TIPOGRAFIA GERAL ───────────────────────────────────────────────────────────────────────────────────────── ✣ ─ */
h1, h2, h3, h4{
	color: var(--color-text-primary);
	font-family: var(--font-headings);
}


h1.prose{
	/* Sizing */
	margin-top: calc(var(--textsize-9)*1.0); /*Espaçamento de paragrafo BEFORE*/
	margin-bottom: calc(var(--textsize-9)*0.5); /*Espaçamento de paragrafo AFTER*/
}
h1{
	/* Typography */
	font-size: var(--textsize-9); /*48px*/
	font-weight: 700;
	line-height: 1.1; /*Espaçamento entre linhas*/
	letter-spacing: -0.02em;
	/* Visuals */
	color: var(--color-text-primary); /*Primary TextColor*/
}


h2.prose{
	/* Sizing */
	margin-top: calc(var(--textsize-8)*1.0); /*Espaçamento de paragrafo BEFORE*/
	margin-bottom: calc(var(--textsize-8)*0.5); /*Espaçamento de paragrafo AFTER*/
}
h2{
	/* Typography */
	font-size: var(--textsize-8); /*40px*/
	font-weight: 600;
	line-height: 1.1; /*Espaçamento entre linhas*/
	letter-spacing: -0.015em;
	/* Visuals */
}


h3.prose{
	/* Sizing */
	margin-top: calc(var(--textsize-7)*1.0); /*Espaçamento de paragrafo BEFORE*/
	margin-bottom: calc(var(--textsize-7)*0.5); /*Espaçamento de paragrafo AFTER*/
}
h3{
	/* Typography */
	font-size: var(--textsize-7); /*32px*/
	font-weight: 600;
	line-height: 1.2; /*Espaçamento entre linhas*/
	/* Visuals */
	color: var(--color-text-primary); /*Primary TextColor*/
}


h4.prose{
	/* Sizing */
	margin-top: calc(var(--textsize-6)*1.0); /*Espaçamento de paragrafo BEFORE*/
	margin-bottom: calc(var(--textsize-6)*0.5); /*Espaçamento de paragrafo AFTER*/
}
h4{
	/* Typography */
	font-size: var(--textsize-6);/*24px*/
	font-weight: 600;
	line-height: 1.3; /*Espaçamento entre linhas*/
	/* Visuals */
	color: var(--color-text-primary); /*Primary TextColor*/
}


p.prose{
	/* Sizing */
	margin-top: calc(var(--textsize-3)*1.0); /*Espaçamento de paragrafo BEFORE*/
	margin-bottom: calc(var(--textsize-3)*0.5); /*Espaçamento de paragrafo AFTER*/
}
p{
	/* Typography */
	font-size: var(--textsize-3);/*16px*/
	font-weight: normal;
	line-height: 1.4; /*Espaçamento entre linhas*/
	/* Visuals */
	color: var(--color-text-primary-muted); /*Muted TextColor*/
}


.text-small.prose {
	/* Sizing */
	margin-top: calc(var(--textsize-2)*1.0); /*Espaçamento de paragrafo BEFORE*/
	margin-bottom: calc(var(--textsize-2)*0.5); /*Espaçamento de paragrafo AFTER*/
}
.text-small{
	/* Typography */
	font-size: var(--textsize-2);/*12px*/
	font-weight: normal;
	line-height: 1.5; /*Espaçamento entre linhas*/
	/* Visuals */
	color: var(--color-text-primary); /*Muted TextColor*/
}


.text-xsmall.prose {
	/* Sizing */
	margin-top: calc(var(--textsize-2)*1.0); /*Espaçamento de paragrafo BEFORE*/
	margin-bottom: calc(var(--textsize-2)*0.5); /*Espaçamento de paragrafo AFTER*/
}
.text-xsmall{

	/* Typography */
	font-size: var(--textsize-2);/*12px*/
	font-weight: normal;
	line-height: 1.5; /*Espaçamento entre linhas*/
	/* Visuals */
	color: var(--color-text-primary-muted); /*Muted TextColor*/
}


/* ─── TIPOGRAFIA DE LISTAS ───────────────────────────────────────────────────────────────────────────────────────── ✣ ─ */
ul.prose{
	/* Sizing */
	margin-top: calc(var(--textsize-3)*1.0); /*Espaçamento de paragrafo BEFORE*/
	margin-bottom: calc(var(--textsize-3)*0.5); /*Espaçamento de paragrafo AFTER*/
	padding-left: var(--spacing4);
}
ul.prose li{
	/* Sizing */
	margin-bottom: var(--spacing2); /* Espaçamento entre itens da lista */
	/* Typography */
	font-size: var(--textsize-3);/*16px*/
	font-weight: normal;
	line-height: 1.4; /*Espaçamento entre linhas*/
	/* Visuals */
	color: var(--color-text-primary-muted); /*Muted TextColor*/
}
ul.prose li strong {
	/* Visuals */
	color: var(--color-text-primary);
}
ul.prose li:last-child{
	/* Sizing */
	margin-bottom: var(--spacing0); /* Para não duplicar o espaçamento AFTER */
}


/* ─── TIPOGRAFIA DE COMPONENTS ───────────────────────────────────────────────────────────────────────────────────────── ✣ ─ */
a{
	/* Typography */
	font-size: inherit;/*16px*/
	font-weight: 500;
	/* Visuals */
	color: var(--color-text-primary); /*Primary TextColor*/
	text-decoration: none;
	/* Effects */
	transition: 0.2s ease;
}
a:hover{
	/* Visuals */
	opacity: 0.7;
}

.hero-left h1{
	/* Typography */
	font-size: var(--textsize-10); /*64px*/
}

.hero-left h2{
	/* Typography */
	font-size: var(--textsize-5);
	font-weight: 100;
}

.hero-left h3{
	/* Typography */
	font-size: var(--textsize-4);
	font-weight: 300;
}

.card-title{
	/* Typography */
	font-size: var(--textsize-3);/*16px*/
	font-weight: 700;
	line-height: 1.4; /*Espaçamento entre linhas*/
	/* Visuals */
	color: var(--color-text-primary); /*Primary TextColor*/
}

.card-subtitle{
	/* Typography */
	font-size: var(--textsize-2);/*14px*/
	font-weight: 400;
	line-height: 1.5; /*Espaçamento entre linhas*/
	/* Visuals */
	color: var(--color-text-primary-muted); /*Muted TextColor*/
	text-decoration: none;
}

.card-content{
	/* Typography */
	font-size: var(--textsize-2);/*14px*/
	font-weight: 400;
	line-height: 1.5; /*Espaçamento entre linhas*/
	/* Visuals */
	color: var(--color-text-primary); /*Primary TextColor*/
	text-decoration: none;
}

strong {
	/* Typography */
	font-weight: 600;
}

.subtext{
	/* Visuals */
	color: var(--color-text-terciary);
}

.span-nowrap{
	/* Layout */
	display: block; /* Sozinho na linha */
	/* Typography */
	white-space: nowrap;
}


/* ─── TIPOGRAFIA MOBILE ───────────────────────────────────────────────────────────────────────────────────────── ✣ ─ */
@media (max-width:992px) {
	
	h1.prose {
		/* Sizing */
		margin-top: calc(var(--textsize-7)*1.0); /*Espaçamento de paragrafo BEFORE*/
		margin-bottom: calc(var(--textsize-7)*0.5); /*Espaçamento de paragrafo AFTER*/
	}
	h1{
		/* Typography */
		font-size: var(--textsize-7); /*32px*/
	}
	

	h2.prose {
		/* Sizing */
		margin-top: calc(var(--textsize-6)*1.0); /*Espaçamento de paragrafo BEFORE*/
		margin-bottom: calc(var(--textsize-6)*0.5); /*Espaçamento de paragrafo AFTER*/
	}
	h2{
		/* Typography */
		font-size: var(--textsize-6); /*24px*/
	}
	

	h3.prose {
		/* Sizing */
		margin-top: calc(var(--textsize-5)*1.0); /*Espaçamento de paragrafo BEFORE*/
		margin-bottom: calc(var(--textsize-5)*0.5); /*Espaçamento de paragrafo AFTER*/
	}
	h3{
		/* Typography */
		font-size: var(--textsize-5); /*20px*/
	}
	

	h4.prose {
		/* Sizing */
		margin-top: calc(var(--textsize-4)*1.0); /*Espaçamento de paragrafo BEFORE*/
		margin-bottom: calc(var(--textsize-4)*0.5); /*Espaçamento de paragrafo AFTER*/
	}
	h4{
		/* Typography */
		font-size: var(--textsize-4);/*18px*/
	}
	

	p.prose {
		/* Sizing */
		margin-top: calc(var(--textsize-3)*1.0); /*Espaçamento de paragrafo BEFORE*/
		margin-bottom: calc(var(--textsize-3)*0.5); /*Espaçamento de paragrafo AFTER*/
	}
	p{
		/* Typography */
		font-size: var(--textsize-3);/*16px*/
	}
	

	.text-small.prose {
		/* Sizing */
		margin-top: calc(var(--textsize-2)*1.0); /*Espaçamento de paragrafo BEFORE*/
		margin-bottom: calc(var(--textsize-2)*0.5); /*Espaçamento de paragrafo AFTER*/
	}
	.text-small{
		/* Typography */
		font-size: var(--textsize-2);/*12px*/
	}


	.text-xsmall.prose {
		/* Sizing */
		margin-top: calc(var(--textsize-1)*1.0); /*Espaçamento de paragrafo BEFORE*/
		margin-bottom: calc(var(--textsize-1)*0.5); /*Espaçamento de paragrafo AFTER*/
	}
	.text-xsmall{
		/* Typography */
		font-size: var(--textsize-1);/*px*/
	}


	.card-title{
		/* Typography */
		font-size: var(--textsize-3);/*16px*/
	}

	.card-subtitle{
		/* Typography */
		font-size: var(--textsize-1);/*px*/
	}

	.card-content{
		/* Typography */
		font-size: var(--textsize-1);/*px*/
	}

	.hero-left h1{
		/* Typography */
		font-size: var(--textsize-8);
	}
	
	.hero-left h2{
		/* Typography */
		font-size: var(--textsize-4);
		font-weight: 100;
	}
	
	.hero-left h3{
		/* Typography */
		font-size: var(--textsize-3);
		font-weight: 500;
	}
}



/* ────────────────────────────────────────────────────────────────────────── */
/* ████████████████████████ 🖥️ LAYOUT SYSTEM  ██████████████████████████████ */
/* ────────────────────────────────────────────────────────────────────────── */
/* Classes que servem apenas para layout */

/* ─── PAGE WRAPPERS ───────────────────────────────────────────────────────────────────────────────────────── ✣ ─ */
.container{
	/* Layout */
	margin: 0 auto;
	/* Sizing */
	padding: 0 var(--spacing10);
	max-width: 1200px;
	box-sizing: border-box;
	/* Effects */
	transition: filter 0.3s ease; /*Acontece ao sofrer blur do hamburger menu*/
}


/* ─── Seção ──────────────────────────────────────────────────────── ✣ ─ */
.section{
	margin-top: var(--spacing6);
}


/* ─── FLEX UTILITIES ───────────────────────────────────────────────────────────────────────────────────────── ✣ ─ */
.flex{display: flex;}

.flex-col {flex-direction: column;}
.flex-row {flex-direction: row;}
.flex-colreverse {flex-direction: column-reverse;}
.flex-rowreverse{flex-direction: row-reverse;}

.items-center{align-items: center}
.items-start{align-items: flex-start;}
.items-end{align-items: flex-end;}

.justify-spacebetween{justify-content: space-between;}
.justify-center-mobile{justify-content: center;}
.justify-start{justify-content: flex-start;}
.justify-end{justify-content: flex-end;}

.text-center{text-align: center;}
.text-left{text-align: left;}
.text-right{text-align: right;}

.self-start{align-self: start;}
.self-center{align-self: center;}

@media (max-width: 992px) {
	.flex-row-mobile {flex-direction: row;}
	.flex-rowreverse-mobile{flex-direction: row-reverse;}
	.flex-col-mobile {flex-direction: column;}
	.flex-colreverse-mobile{flex-direction: column-reverse;}
	
	.items-center-mobile{align-items: center}
	.items-start-mobile{align-items: flex-start;}
	.items-end-mobile{align-items: flex-end;}

	.justify-spacebetween-mobile{justify-content: space-between;}
	.justify-center-mobile{justify-content: center;}
	.justify-start-mobile{justify-content: flex-start;}
	.justify-end-mobile{justify-content: flex-end;}

	.text-center-mobile{text-align: center;}
	.text-left-mobile{text-align: left;}
	.text-right-mobile{text-align: right;}

	.self-center-mobile{align-self: center;}
}



/* ─── GLOBAL LIST STYLES ─────────────────────────────────────────────────────────────────────────────────── ✣ ─ */
nav ul{
	/* Layout */
	display: flex;
	flex-direction: row; /*Container pai: linha ou coluna*/
	justify-content: flex-end; /*Children horizontal distribuition if flex is row*/
	align-items: center; /*Children vertical distribuition if flex is row*/
	gap: var(--spacing4); /*Margin entre itens*/
	/* Visuals */
	list-style: none;
}

footer section ul{
	/* Layout */
	display: flex;
	flex-direction: row; /*Container pai: linha ou coluna*/
	justify-content: flex-end; /*Children horizontal distribuition if flex is row*/
	align-items: center; /*Children vertical distribuition if flex is row*/
	gap: 5%; /*Margin entre itens*/
	/* Visuals */
	list-style: none;
}



/* ────────────────────────────────────────────────────────────────────────── */
/* ███████████████████████████  🧩COMPONENTS  ███████████████████████████████ */
/* ────────────────────────────────────────────────────────────────────────── */

/* ─── BUTTON ──────────────────────────────────────────────────────── ✣ ─ */
.btn{
	/* Layout */
	white-space: nowrap;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	/* Visuals */
	border: none;
	border-radius: var(--spacing2);
	box-shadow: var(--shadow);
	/* Effects */
	transition:
		transform 0.15s ease,
		box-shadow 0.15s ease,
		background-color 0.2s ease,
		color 0.2s ease;
}
.btn:hover{
	/* Visuals */
	background-color: var(--color-accent1-hover);
	box-shadow: var(--shadow-hover);
	border-color: var(--color-accent1);
	/* Effects */
	transform: translateY(-2px);
}
.btn:active {
	/* Visuals */
	box-shadow: var(--shadow-active);
	/* Effects */
	transform: translateY(0);
}

/* ─── BUTTON PRIMARY ──────────────────────────────────────────────────────── ✣ ─ */
.btn--primary{
	/* Sizing */
	padding: var(--spacing3) calc(var(--spacing3)*1.5); /* vertical | horizontal */
	min-height: var(--spacing6);
	/* Typograph */
	font-size: var(--spacing4);
	/* Visuals */
	background-color: var(--color-accent1); /*CTA Color*/
}

/* ─── BUTTON SECUNDARY ──────────────────────────────────────────────────────── ✣ ─ */
.btn--secondary{
	/* Sizing */
	padding: var(--spacing3) var(--spacing3); /* vertical | horizontal */
	min-height: var(--spacing6);
	/* Typograph */
	font-size: var(--spacing4);
	/* Visuals */
	background-color: rgba(0, 0, 0, 0.00); /* Transparent Color */
	color: var(--color-text-primary);
	border: var(--border);
}
.btn--secondary:hover{
	/* Visuals */
	background-color: var(--color-bg-dark); /* Transparent Secundary Color */
	color: var(--color-accent1);
}


/* ─── Dividers ──────────────────────────────────────────────────────── ✣ ─ */
.divider-horizontal100{
	display: flex;
	width: 100%;
	height: 1px;
	margin: var(--spacing0) var(--spacing1); /* vertical | horizontal */
	background-color: var(--color-border-muted);
}

.divider-horizontal90{
	display: flex;
	width: 90%;
	height: 1px;
	margin: var(--spacing0) var(--spacing1); /* vertical | horizontal */
	background-color: var(--color-border-muted);
}

.pill-divider {
	width: 1px;
	height: 20px; /* 20px */
	background-color: var(--color-border-muted);
	margin: 0 2px;
}


/* ─── Icons ─────────────────────────────────────────────────────────────────────────────────────────── ✣ ─ */
.svgicon-small{
	/*Size 32px*/
	width: var(--spacing6);
	min-width: var(--spacing6);
	height: var(--spacing6);
	min-height: var(--spacing6);
	color: var(--color-text-primary-muted);
}

.svgicon-xsmall{
	/*Size 24px*/
	width: var(--spacing5);
	min-width: var(--spacing5);
	height: var(--spacing5);
	min-height: var(--spacing5);
	color: var(--color-text-primary-muted);
}

.btn .svgicon-small path,
.btn .svgicon-xsmall path{
	color: var(--color-text-primary);
}


/* ─── CARDS ─────────────────────────────────────────────────────────────────────────────────────────── ✣ ─ */
.card{
	/* Visuals */
	background-color: var(--color-bg);
	border: var(--border);
	border-radius: var(--spacing4);
	border-top: solid 1px var(--color-highlight);
	box-shadow: var(--shadow);
	/* Effects */
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.card:hover{
	/* Visuals */
	border-color: var(--color-accent1);
	box-shadow: var(--shadow-hover);
	transform: translateY(-4px);
}

.card--emote{
	/* Layout */
	display: flex;
	justify-content: flex-start;
	flex-direction: row;
	align-items: center;
	text-align: left;
	gap: var(--spacing4); /* Margin entre texto e imagem */
	z-index: 2;
	/* Sizing */
	padding: var(--spacing4) calc(var(--spacing4) * 1.5);
	min-height: var(--spacing6);
	width: 100%;
	height: 100%;
}

/* O duplo traço no nome indica que é um modificador image para o elemento .card */
.card--carousel{ 
	/* Layout */
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: var(--spacing0); /* Margin entre texto e imagem */
	overflow: hidden; /* Esconde oq sair do container */
	/* Sizing */
	padding: var(--spacing0);
	min-height: var(--spacing6);
	min-width: 280px; /* Garante uma largura mínima elegante */
	width: 30%;
}

/* O duplo underline no nome indica que é uma imagem dentro do elemento .card */
.card__image{
	/* Layout */
	width: 100%;
	aspect-ratio: 16/9; 
	object-fit: cover;
	/* Sizing */
	height: auto;
	margin: 0;
	margin-bottom: -4px; /* A transição scale deixa um white space embaixo da foto, que removemos usando essa margin negativa */
	/* Visuals */
	transition: transform 0.5s ease;
	/* Efeitos - Impedir Image Grab e Selection */
	-webkit-user-drag: none;
	user-drag: none; 
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.card--carousel:hover .card__image {
	transform: scale(1.05); /* Zoom suave no hover */
}


.card__media{
	/* Layout */
	position: relative;
	overflow: hidden;
}

.card__badges{
	/* Layout */
	display: flex;
	position: absolute;
	top: 10px;
	right: 10px;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: flex-end;
	z-index: 5;
}

/* ─── CARDS GROUPS ───────────────────────────────────────────────────────────────────────────────────────── ✣ ─ */

t-card-col {
	/* Layout */
	display: flex;
	flex-direction: column;
	gap: var(--spacing4);
	/* Sizing */
	width: 100%; 
}

t-card-icon {
	/* Layout */
    display: flex;
    flex-direction: column;
    flex: 1; /* Divide o espaço igualmente com os irmãos */
    /* Sizing */
    width: 100%;
    min-width: 0;
}

.card--emote > div.flex {
    flex: 1;
    min-width: 0; 
}


/* ─── Textos do Carousel ──────────────────────────────────────────────────────── ✣ ─ */
.card--carousel strong { /* Titulo */
	/* Layout */
	display: block; /* Sozinho na linha */
}

.card--carousel a { /* Área de Texto (Link) */
	/* Layout */
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: var(--spacing1);
	/* Sizing */
	padding: var(--spacing4) calc(var(--spacing4)*1.5); /* Espaçamento interno para o texto não colar na borda */
	flex-grow: 1; /* Ocupa o resto da altura do card */
	/* Visuals */
	background: var(--gradient-bg);
	border-top: 1px solid var(--color-border-muted);
}


/* ─── CAROUSEL WRAPPER ─────────────────────────────────────────────────────────────────────────────────────────── ✣ ─ */
.carousel__wrapper{
	/* Layout */
	position: relative;
	overflow: hidden;
	/* Sizing */
	width: 100%;
	/* Efeito */
	transition: -webkit-mask-image 0.3s ease, mask-image 0.3s ease;
	/* Efeito de fade nas bordas, caso JS não funcione */
	-webkit-mask-image: linear-gradient(
			to right, 
			gray 98%, 
			transparent 100%
	);
	mask-image: linear-gradient(
			to right, 
			gray 98%, 
			transparent 100%
	);
}
.carousel__wrapper[data-scroll="none"] { /* ESTADO: Nenhum (Se couber tudo na tela) */
	-webkit-mask-image: none;
	mask-image: none;
}
.carousel__wrapper[data-scroll="middle"] { /* ESTADO: Meio (Fade em Ambos os lados) */
	-webkit-mask-image: linear-gradient(to right, transparent 0%, gray 2%, gray 98%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, gray 2%, gray 98%, transparent 100%);
}
.carousel__wrapper[data-scroll="end"] { /* ESTADO: Fim (Fade apenas na Esquerda) */
	-webkit-mask-image: linear-gradient(to right, transparent 0%, gray 2%);
	mask-image: linear-gradient(to right, transparent 0%, gray 2%);
}

/* ─── CAROUSEL TRACK ─────────────────────────────────────────────────────────────────────────────────────────── ✣ ─ */
.carousel__track{
	/* Layout */
	display: flex;
	gap: var(--spacing4); /* 16px de espaço entre cards */
	/* Sizing */
	padding: var(--spacing2) var(--spacing1) var(--spacing4) var(--spacing1); /* Espaçamento interno para não cortar sombras ou bordas */
	/* Effects */
	overflow-x: auto; /*Esconde o overflow mas mostra um scroll. Mas caso não tenha overflow, o scroll some*/
	scrollbar-width: none; /* Firefox */
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--spacing1); /*Considera o padding nos snaps*/
	scroll-behavior: smooth;	
	-ms-overflow-style: none; /* IE 10+ */
	cursor: grab;
	user-select: none;
}
.carousel__track::-webkit-scrollbar{
	/* Layout */
	display: none;
}
.carousel__track.active{
	/* Effects */
	cursor: grabbing; 
	cursor: -webkit-grabbing;
	scroll-snap-type: none; 
	scroll-behavior: auto;
}

/* ─── CAROUSEL CARDS ─────────────────────────────────────────────────────────────────────────────────────────── ✣ ─ */
.carousel__track t-card-media {
	flex: 0 0 calc((100% - (var(--spacing4) * 2)) / 3);
	display: flex; /* Isso é crucial para permitir que o card interno estique */
}

.carousel__track t-card-media .card--carousel {
	flex: 1; /* Faz todos os cards ficarem com a mesma altura */
	width: 100%;
	min-width: 100%; /* Sobrescreve o 280px antigo da classe .card--carousel */
	margin: 0;
}


/* ─── IMAGE GALLERY ──────────────────────────────────────────── ✣ ─ */
.image-gallery {
	/* Layout */
	display: flex;
	overflow-x: auto;
	-ms-overflow-style: none;	/* IE 10+ */
	/* Sizing */
	/* Effects */
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none; 
	scroll-padding-inline: var(--spacing1);
	cursor: grab;
	user-select: none;
}
.image-gallery::-webkit-scrollbar {
	/* Layout */
	display: none;
}
.image-gallery.active {
	/* Effects */
	cursor: grabbing;
	cursor: -webkit-grabbing;
	scroll-snap-type: none;
	scroll-behavior: auto;
}

@media (max-width: 768px) {
	.image-gallery__main-image, .image-gallery__thumb-image {
		height: 250px;
	}
}

/* ─── IMAGE GALLERY - Main Image ──────────────────────────────────────────── ✣ ─ */
.image-gallery__main-container {
	/* Layout */
	gap: var(--spacing5);
	scroll-padding-left: var(--spacing4);
	/* Effects */
}

.image-gallery__main-image {
	/* Layout */
	object-fit: cover;
	flex-shrink: 0;
	/* Sizing */
	height: clamp(280px, 45vh, 500px); 
	width: auto;
	max-width: 85%; /* Mostra um pedaço da próxima imagem */
	/* Effects */
	scroll-snap-align: start;
	will-change: transform;
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}

@media (hover: hover) and (pointer: fine) {
	.image-gallery__main-container .image-gallery__main-image:hover {
		/* Effects */
		transform: none; /* Desativa hover se estiver arrastando */
	}
	
	.image-gallery__main-image:hover {
		/* Visuals */
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
		/* Effects */
		transform: scale(1.02);
	}
}

/* ─── IMAGE GALLERY - Thumbnail ──────────────────────────────────────────── ✣ ─ */
.image-gallery__thumb-container {
	/* Layout */
	gap: var(--spacing2);
	/* Effects */
	cursor: default;
	scroll-snap-type: none;
}

.image-gallery__thumb-image {
	/* Layout */
	width: auto;
	object-fit: cover; /* Garante que a imagem não distorça */
	flex-shrink: 0;
	/* Sizing */
	height: 60px; /* Altura fixa elegante para a barra */
	opacity: 0.7; 
	/* Visuals */
	border: 3px solid transparent; /* Borda invisível por padrão para evitar pulos no layout */
	/* Effects */
	cursor: pointer;
	transition: border 0.2s ease, opacity 0.2s ease;
}
.image-gallery__thumb-image.is-active {
	opacity: 1;
	border-color: var(--color-accent1);
}

@media (hover: hover) and (pointer: fine) {
	.image-gallery__thumb-image:hover {
		opacity: 1;
		border-color: color-mix(in srgb, var(--color-accent1), transparent 50%);
	}
}


/* ─── BADGES ───────────────────────────────────────────────────────────────────────────────────────── ✣ ─ */
.badge{
	/* Layout */
	display: inline-flex;
	white-space: nowrap;
	padding: 2px 4px;
	/* Typograph */
	font-size: var(--spacing3);
	font-weight: 500;
	/* Visuals */
	color: white;
	opacity:.9;
	background: rgba(20,25,40,0.65);
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: 999px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.35);
	/* Effects */
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transform:translateY(-2px);
	transition:.25s;
}

.card:hover .badge{
 opacity:1;
 transform:translateY(0);
}

.badge--autocad{ background:#b91c1c; }
.badge--revit{ background:#0ea5e9; }
.badge--solidworks{ background:#ef4444; }
.badge--ansys{ background:#f59e0b; color:#111; }
.badge--hap{ background:#0284c7; }
.badge--xpress{ background:#2563eb; }
.badge--excel{ background:#166534; }
.badge--vba{ background:#059669; }
.badge--word{ background:#1d4ed8; }
.badge--powerpoint{ background:#ea580c; }
.badge--powerbi{ background:#eab308; color:#111; }
.badge--project{ background:#15803d; }
.badge--office{ background:#334155; }
.badge--python{ background:#2563eb; }
.badge--cpp{ background:#1d4ed8; }
.badge--c{ background:#0f766e; }
.badge--html{ background:#ea580c; }
.badge--css{ background:#0284c7; }
.badge--git{ background:#ef4444; }
.badge--github{ background:#111827; }
.badge--iot{ background:#7c3aed; }
.badge--esp32{ background:#0891b2; }
.badge--rtos{ background:#9333ea; }
.badge--automation{ background:#059669; }
.badge--hvac{ background:#0284c7; }
.badge--cleanroom{ background:#0ea5e9; }
.badge--engineering{ background:#334155; }
.badge--analysis{ background:#7c3aed; }
.badge--simulation{ background:#f59e0b; color:#111; }
.badge--management{ background:#475569; }
.badge--english{ background:#2563eb; }
.badge--c2{ background:#1d4ed8; }
.badge--international{ background:#7c3aed; }

@media (max-width: 992px) {
	/* ─── CONTACT FORM ─────────────────────────────────────────────────────────────────────────────────────────── ✣ ─ */
	t-card-row {
		flex-direction: column;
		width: 85%;
	}
}



/* ────────────────────────────────────────────────────────────────────────── */
/* ████████████████████████ 📄 PAGE SECTIONS  ██████████████████████████████ */
/* ────────────────────────────────────────────────────────────────────────── */
/* Elementos que so aparecem 1 vez na página, são muito especificos */

/* ─── HEADER ───────────────────────────────────────────────────────────────────────────────────────── ✣ ─ */
.header{
	/* Sizing */
	width: 100%;
}

t-header{
	display: block;
	width: 100%;
}

.logo-header{
	/* Sizing */
	height: 80px;
	width: auto
}

.navbar{
	/* Layout */
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--spacing4);
}

.navbar--desktop{
	justify-content: flex-end;
}

.navbar--mobile{
	display: none;
	gap: var(--spacing4); /* Espaço entre a Pílula e o Hambúrguer */ 
}


/* ─── HEADER - Menu offscreen ──────────────────────────────────────────────────────── ✣ ─ */
.offscreen-menu{
	/* Layout */
	display: none;
	position: fixed;
	top: 0;
	z-index: 998;
	/* Layout Mobile */
	align-items: flex-start;
	justify-content: flex-start;
	flex-direction: column;
 	/* Effects */
	filter: none; /*Remove o blur desse elemento*/
	transition: right 0.3s ease;
	/* Glass Blur Effect */
	backdrop-filter: blur(8px); 
	-webkit-backdrop-filter: blur(8px);
	/* Visuals Legacy Browsers */
 	background-color: var(--color-bg-light);
 	/* Visuals */
 	background-color: color-mix(in srgb, var(--color-bg-light), transparent 15%);;
}

.offscreen-menu > ul{
	/* Layout */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-top: var(--spacing7);
	gap: var(--spacing4);
	/* Sizing */
	padding: 0;
	/* Effects */
	list-style: none;
}

.offscreen-menu ul li{
	/* Layout */
	display: flex;
	flex-direction: row;
	align-items: center;
}


/* ─── HEADER - NAV SETTINGS ───────────────────────────────────────────────────────────────────────────────────────── ✣ ─ */
.nav-preferences {
	/* Layout */
	display: flex;
	align-items: center;
	/* Sizing */
	padding: var(--spacing1);
	/* Visuals */
	background-color: transparent;
	border: 1px solid var(--color-border-muted); 
	border-radius: 50px; 
	/* Effects */
	transition: border-color 0.3s ease;
}
.nav-preferences:hover {
	/* Visuals */
	border-color: var(--color-text-primary);
}


/* ─── HEADER - Settings Pill ───────────────────────────────────────────────────────────────────────────────────────── ✣ ─ */
.btn-settings, 
.lang-toggle{
	/* Layout */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing2);
	/* Sizing */
	padding: var(--spacing1) var(--spacing2);
	/* Typograph */
	font-size: var(--spacing4);
	color: var(--color-text-primary);
	/* Visuals */
	background: transparent;
	border: none;
	box-shadow: none;
	/* Effects */
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}
.btn-settings:hover, 
.lang-toggle:hover {
	/* Visuals */
	color: var(--color-accent1);
	background-color: var(--color-bg-dark);
}

.btn-settings {
	/* Sizing */
	padding-left: var(--spacing2);
	/* Visuals */
	border-radius: 50px 0 0 50px;
}

.lang-toggle {
	/* Sizing */
	padding-right: var(--spacing2);
	/* Visuals */
	border-radius: 0 50px 50px 0;
}

/* ─── MAIN ──────────────────────────────────────────────── ✣ ─ */
main{
	flex: 1; /*Main cresce por todo o espaço sobrando, para empurrar o footer para o fundo da página*/
}

/* ─── CTA ──────────────────────────────────────────────── ✣ ─ */
t-cta{
	margin-top: auto;
}

/* ─── FOOTER ──────────────────────────────────────────────── ✣ ─ */
t-footer{
	margin-bottom: 12px;
}

footer{
	background-color: var(--color-bg-light);
}

.footer-bottom{
	/* Layout */
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	/* Sizing */
	margin-top: 20px;
	padding-top: 4px;
	padding-bottom: 4px;
	width: 100%;
}

/* ─── Lang Menu & Selector ──────────────────────────────────────────────── ✣ ─ */
.lang-selector {
	/* Layout */
	position: relative;
	display: flex;
}

.lang-menu {
	/* Layout */
	display: none;
	position: absolute;
	top: calc(100% + var(--spacing3)); 
	right: 0;
	z-index: 999;
	/* Sizing */
	padding: var(--spacing2); /* 8px */
	min-width: 140px;
	/* Visuals */
	background-color: var(--color-bg-light);
	border: var(--border);
	border-radius: var(--spacing2);
	box-shadow: var(--shadow);
	list-style: none;
	/* Effects */
	transform: translateY(calc(var(--spacing2) * -1));
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.lang-menu li {
	/* Layout */
	text-align: left;
	/* Sizing */
	padding: var(--spacing2) var(--spacing3);
	/* Typograph */
	/* Visuals */
	color: var(--color-text-primary);
	border-radius: var(--spacing1);
	/* Effects */
	cursor: pointer;
	transition: background 0.2s;
}

.lang-menu li:hover {
	/* Visuals */
	background-color: var(--color-bg-dark); 
	color: var(--color-accent1);
}

.lang-selector.open .lang-menu {
	/* Layout */
	display: flex;
	flex-direction: column;
	/* Effects */
	transform: translateY(0);
}

/* ─── HERO ───────────────────────────────────────────────────────────────────────────────────────── ✣ ─ */
.hero-left{
	/* Layout */
	align-items: flex-start;
	/* Sizing */
	padding-right: 5%; /*Ocupar menos espaço do container*/
	width: 80%;
}

.hero-image{
 	/* Layout */
	position: relative;
	margin-top: var(--spacing3);
	margin-bottom: var(--spacing3);
	/* Sizing */
	width: 35%;
}
.hero-image img{
	/* Layout */
	position: relative;
	z-index: 1;
	/*Sizing*/
	width: 110%;
}


.image-glow img{
	/* Effects */
	-webkit-mask-image: 
		linear-gradient(to bottom, black 65%, rgba(0,0,0,0.5) 85%, transparent 100%), 
		linear-gradient(to right, black 65%, rgba(0,0,0,0.5) 85%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: 
		linear-gradient(to bottom, black 65%, rgba(0,0,0,0.5) 85%, transparent 100%), 
		linear-gradient(to right, black 65%, rgba(0,0,0,0.5) 85%, transparent 100%);
	mask-composite: intersect;
}

.image-glow::before{
	/* Layout */
	content: "";
	position: absolute;
	inset: -30% -35%;
	z-index: 0;
	/* Visual */
	background: radial-gradient(
		circle at center,
		var(--color-accent1, rgba(2,91,176,0.15)), /* Usando sua variável de cor principal se possível */
		transparent 70% 
	);
	/* Effects */
	pointer-events: none;
	animation: glowPulse 6s ease-in-out infinite alternate; /* Respiração Premium */
}

@keyframes glowPulse {
	0% { opacity: 0.5; transform: scale(0.95); }
	100% { opacity: 1; transform: scale(1.05); }
}

/* ─── HERO MOD ───────────────────────────────────────────────────────────────────────────────────────── ✣ ─ */

/* Utilizada para a foto sem herdar o radial-gradient da capa padrão */
.hero-image2 {
	width: 100%;
	max-width: 280px;
	height: auto;
	border-radius: var(--spacing5);
	box-shadow: var(--shadow);
	object-fit: cover;
	aspect-ratio: 1/1;
}

/* ─── CONTACT FORM ─────────────────────────────────────────────────────────────────────────────────────────── ✣ ─ */
.contact-form {
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	background-color: color-mix(in srgb, var(--color-bg), transparent 10%);
}

.input-wrapper {
	position: relative;
	width: 100%;
}

.form-input {
	width: 100%;
	padding: var(--spacing4);
	background-color: var(--color-bg-dark);
	border: 1px solid var(--color-border-muted);
	border-radius: var(--spacing3);
	color: var(--color-text-primary);
	font-family: var(--font-body);
	font-size: var(--textsize-3);
	outline: none;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: inset 0 2px 4px oklch(0 0 0 / 0.1);
}
.form-input::placeholder {
	color: var(--color-text-terciary);
	opacity: 0.5;
}
.form-input:focus {
	border-color: var(--color-accent1);
	background-color: var(--color-bg);
	box-shadow: 
		0 0 0 4px color-mix(in srgb, var(--color-accent1), transparent 90%),
		inset 0 2px 4px oklch(0 0 0 / 0.05);
	transform: translateY(-1px);
}

.form-textarea {
	min-height: 180px;
	line-height: 1.6;
	resize: none; /* Mantém o layout limpo */
}

/* Micro-animação para as labels ao focar no campo */
.form-group:focus-within .card-title {
	color: var(--color-accent1);
	transition: color 0.3s ease;
}

.form-group label{
	margin-left: var(--spacing3);
}

button span{
	/* Typography */
	font-size: inherit;/*16px*/
	font-weight: 500;
	/* Visuals */
	color: var(--color-text-primary); /*Primary TextColor*/
	text-decoration: none;
	/* Effects */
	transition: 0.2s ease;
}
button span:hover{
	/* Visuals */
	opacity: 0.7;
}


@media (max-width: 992px) {
	/* ─── HEADER ──────────────────────────────────────────────────────── ✣ ─ */
	.offscreen-menu {
		/* Layout */
		display: flex;
		right: -100%;
		/* Sizing */
		padding: var(--spacing0) var(--spacing7);
		height: 100vh;
		width: 100%;
		max-width: 250px;
	}
	.offscreen-menu.active{
		/* Layout */
		right: 0px;
		/* Effects */
		visibility: visible;
		opacity: 1;
	}


	.navbar--mobile {
		/* Layout */
		display: flex;
	}

	.navbar--mobile .nav-preferences {
		/* Effects */
		transform: scale(0.95); 
		transform-origin: right center;
	}

	.navbar--mobile .lang-menu {
		/* Layout */
		right: 0;
		left: auto;
		/* Sizing */
		min-width: 130px;
	}
} 



/* ────────────────────────────────────────────────────────────────────────── */
/* ████  📄 REFATORAR SEÇÃO ABAIXO. ADICIONAR ANIMAÇÃO GLOW NA LINHA VERTICAL  █████████ */
/* ────────────────────────────────────────────────────────────────────────── */

/* ─── Grid Principal (2 Colunas) ─────────────────────────────────────── ✣ ─ */
/* Layout assíncrono para separar a Timeline principal da Sidebar Fixa */
.resume-grid {
	display: grid;
	/* minmax previne que o conteúdo interno force o contêiner a estourar a tela */
	grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr); 
	gap: var(--spacing8);
	align-items: start;
}

/* ─── Sidebar Fixa ───────────────────────────────────────────────────── ✣ ─ */
.sticky-sidebar {
	position: sticky;
	position: -webkit-sticky; /* Suporte para Safari */
	top: calc(100px + var(--spacing5)); /* Desconto da Header + Margem de respiro */
	align-self: start; 
}

.resume-sidebar .card-subtitle {
	white-space: nowrap; 
	font-size: clamp(0.65rem, 1.5vw, 0.875rem); /* Ajuste o 0.875rem para o tamanho padrão da sua fonte */
}

.resume-sidebar svg {
	flex-shrink: 0;
}


/* ─── Menu de Abas (In-Page) ─────────────────────────────────────────── ✣ ─ */
.resume-tabs {
	border-bottom: 1px solid var(--color-border-muted);
	overflow-x: auto;
	white-space: nowrap;
	padding-bottom: var(--spacing2);
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.resume-tabs::-webkit-scrollbar {
	display: none;
}
.resume-tabs a {
	position: relative;
	padding-bottom: var(--spacing2);
}
.resume-tabs a.active {
	color: var(--color-accent1);
}
.resume-tabs a.active::after {
	content: "";
	position: absolute;
	bottom: calc(var(--spacing2) * -1); /* Cola na borda inferior do container */
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--color-accent1);
}

/* ─── Estrutura de Timeline (Experiência) ────────────────────────────── ✣ ─ */
.resume-timeline {
	display: flex;
	flex-direction: column;
	gap: var(--spacing6);
	border-left: 2px solid var(--color-border-muted);
	margin-left: var(--spacing2);
	padding-left: var(--spacing6);
}

.resume-timeline .timeline-item {
	position: relative;
}

/* Bolinha da Timeline */
.resume-timeline .timeline-dot {
	position: absolute;
	left: calc((var(--spacing6) * -1) - 8px); /* Volta o padding + compensa própria largura */
	top: 24px; /* Centraliza com o Titulo do Card na Desktop */
	width: 14px;
	height: 14px;
	background-color: var(--color-accent1);
	border-radius: 50%;
	/* Truque para 'cortar' a linha do background mantendo semântica */
	box-shadow: 0 0 0 6px var(--color-bg-dark); 
}


/* ─── Listas dentro dos Cards de Experiência ─────────────────────────── ✣ ─ */
.resume-list {
	list-style-type: disc;
	padding-left: var(--spacing5);
}
.resume-list li {
	margin-bottom: var(--spacing2);
}

/* ─── Utilitários Extras ─────────────────────────────────────────────── ✣ ─ */
/* Classe nativa do Flexbox ausente no seu arquivo principal */
.resume-flex-wrap {
	flex-wrap: wrap;
}

/* ─── Responsividade Mobile ──────────────────────────────────────────── ✣ ─ */
@media (max-width: 992px) {
	.resume-grid {
		grid-template-columns: 1fr;
		gap: var(--spacing6);
	}
	.sticky-sidebar {
		position: relative;
		top: 0;
	}
	.resume-timeline .timeline-dot {
		top: 16px; /* Ajuste visual em telas pequenas devido à quebra de linha do h3 */
	}
}

/* ────────────────────────────────────────────────────────────────────────── */
/* ████  📄 REFATORAR SEÇÃO ABAIXO.   █████████ */
/* ────────────────────────────────────────────────────────────────────────── */

/* ─── MODIFICADOR: CARD HORIZONTAL (Estilo Youtube/Lista) ─────────────────────────── ✣ ─ */
.card--horizontal {
    /* Layout Base */
    position: relative;
    display: flex;
    flex-direction: row; 
    align-items: flex-start;
    gap: var(--spacing3);
    padding: var(--spacing2); 
    
    /* Garantir 100% de largura no container pai */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    
    /* Reduzido o gap vertical entre os cards */
    margin-bottom: var(--spacing2); 
    color: inherit;
}

/* ─── Thumbnail (Imagem à esquerda) ─── */
.card--horizontal .card__media {
    width: 200px; /* Largura fixa no desktop */
    aspect-ratio: 16/9; /* Proporção exata de thumbnail */
    border-radius: var(--spacing2); /* Bordas levemente arredondadas internamente */
    overflow: hidden;
    background-color: var(--color-bg-dark); /* Fundo caso a imagem demore a carregar */
}

.card--horizontal .card__image {
    width: 100%;
    height: 100%;
    margin: 0; /* Reseta as margens negativas usadas em outros cards */
}

/* Reduz o tamanho da badge para caber na thumbnail compacta */
.card--horizontal .card__badges--compact {
    position: absolute;
    top: var(--spacing2);
    right: var(--spacing2);
    transform: scale(0.85); /* Mantém menor para ficar elegante */
    transform-origin: top right;
    z-index: 10;
}

/* ─── Conteúdo Textual (À direita) ─── */
.card--horizontal .card__content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--spacing1);
    flex-grow: 1; 
    min-width: 0; 
    /* CRÍTICO: Impede que o título entre debaixo da badge no canto superior direito */
    padding-right: 50px;
}

/* Remove a margem inferior que a tag strong costuma ter */
.card--horizontal .card-title {
    margin-bottom: 0; 
}


/* ─── UTILITIES: TRUNCAR TEXTO (Adicione junto com suas classes utilitárias) ──────── ✣ ─ */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ─── RESPONSIVIDADE (MOBILE) ─────────────────────────────────────────────────────────── ✣ ─ */
@media (max-width: 992px) {
	.card--horizontal {
		padding: var(--spacing2); 
		gap: var(--spacing2);     
	}
	
	.card--horizontal .card__media {
		width: 120px; 
	}
	
	.card--horizontal .card__badges--compact {
		display: none; 
	}
	
	.card--horizontal .card__content {
		padding-right: 0; /* Reseta o padding no celular já que a badge sumiu */
	}
}


/* ────────────────────────────────────────────────────────────────────────── */
/* ██████████████████████   ⚙️ UTILITY CLASSES     ██████████████████████████ */
/* ────────────────────────────────────────────────────────────────────────── */

/* ─── LAYOUT  ──────────────────────────────────────────────────────── ✣ ─ */
.hidden{display: none; }
.flex-wrap { flex-wrap: wrap; }

/* ─── SIZINGS  ──────────────────────────────────────────────────────── ✣ ─ */
.w-full{width: 100%; }
.w-100{width: 100%; }
.w-90{width: 90%; }
.w-80{width: 80%; }
.w-70{width: 70%; }
.w-60{width: 60%; }
.w-50{width: 50%; }
.w-40{width: 40%; }
.w-30{width: 30%; }
.w-20{width: 20%; }
.w-10{width: 10%; }

.h-full { height: 100%; }
.h-100{height: 100%; }
.h-90{height: 90%; }
.h-80{height: 80%; }
.h-70{height: 70%; }
.h-60{height: 60%; }
.h-50{height: 50%; }
.h-40{height: 40%; }
.h-30{height: 30%; }
.h-20{height: 20%; }
.h-10{height: 10%; }

.gap0{gap: var(--spacing0); }
.gap1{gap: var(--spacing1); }
.gap2{gap: var(--spacing2); }
.gap3{gap: var(--spacing3); }
.gap4{gap: var(--spacing4); }
.gap5{gap: var(--spacing5); }
.gap6{gap: var(--spacing6); }
.gap7{gap: var(--spacing7); }
.gap8{gap: var(--spacing8); }
.gap9{gap: var(--spacing9); }
.gap10{gap: var(--spacing10); }
.gap11{gap: var(--spacing11); }

/* ─── PADDINGS  ──────────────────────────────────────────────────────── ✣ ─ */
.p-0{padding: 0; }

.p-1{padding: var(--spacing1); }
.p-2{padding: var(--spacing2); }
.p-3{padding: var(--spacing3); }
.p-4{padding: var(--spacing4); }
.p-5{padding: var(--spacing5); }
.p-6{padding: var(--spacing6); }
.p-7{padding: var(--spacing7); }
.p-8{padding: var(--spacing8); }
.p-9{padding: var(--spacing9); }
.p-10{padding: var(--spacing10); }
.p-11{padding: var(--spacing11); }

.py-0{padding-top: var(--spacing0); padding-bottom: var(--spacing0); }
.py-1{padding-top: var(--spacing1); padding-bottom: var(--spacing1); }
.py-2{padding-top: var(--spacing2); padding-bottom: var(--spacing2); }
.py-3{padding-top: var(--spacing3); padding-bottom: var(--spacing3); }
.py-4{padding-top: var(--spacing4); padding-bottom: var(--spacing4); }
.py-5{padding-top: var(--spacing5); padding-bottom: var(--spacing5); }
.py-6{padding-top: var(--spacing6); padding-bottom: var(--spacing6); }
.py-7{padding-top: var(--spacing7); padding-bottom: var(--spacing7); }
.py-8{padding-top: var(--spacing8); padding-bottom: var(--spacing8); }
.py-9{padding-top: var(--spacing9); padding-bottom: var(--spacing9); }
.py-10{padding-top: var(--spacing10); padding-bottom: var(--spacing10); }
.py-11{padding-top: var(--spacing11); padding-bottom: var(--spacing11); }

.px-0{padding-left: var(--spacing0); padding-right: var(--spacing0); }
.px-1{padding-left: var(--spacing1); padding-right: var(--spacing1); }
.px-2{padding-left: var(--spacing2); padding-right: var(--spacing2); }
.px-3{padding-left: var(--spacing3); padding-right: var(--spacing3); }
.px-4{padding-left: var(--spacing4); padding-right: var(--spacing4); }
.px-5{padding-left: var(--spacing5); padding-right: var(--spacing5); }
.px-6{padding-left: var(--spacing6); padding-right: var(--spacing6); }
.px-7{padding-left: var(--spacing7); padding-right: var(--spacing7); }
.px-8{padding-left: var(--spacing8); padding-right: var(--spacing8); }
.px-9{padding-left: var(--spacing9); padding-right: var(--spacing9); }
.px-10{padding-left: var(--spacing10); padding-right: var(--spacing10); }
.px-11{padding-left: var(--spacing11); padding-right: var(--spacing11); }

.pt-0{padding-top: var(--spacing0); }
.pt-1{padding-top: var(--spacing1); }
.pt-2{padding-top: var(--spacing2); }
.pt-3{padding-top: var(--spacing3); }
.pt-4{padding-top: var(--spacing4); }
.pt-5{padding-top: var(--spacing5); }
.pt-6{padding-top: var(--spacing6); }
.pt-7{padding-top: var(--spacing7); }
.pt-8{padding-top: var(--spacing8); }
.pt-9{padding-top: var(--spacing9); }
.pt-10{padding-top: var(--spacing10); }
.pt-11{padding-top: var(--spacing11); }

.pr-0{padding-right: var(--spacing0); }
.pr-1{padding-right: var(--spacing1); }
.pr-2{padding-right: var(--spacing2); }
.pr-3{padding-right: var(--spacing3); }
.pr-4{padding-right: var(--spacing4); }
.pr-5{padding-right: var(--spacing5); }
.pr-6{padding-right: var(--spacing6); }
.pr-7{padding-right: var(--spacing7); }
.pr-8{padding-right: var(--spacing8); }
.pr-9{padding-right: var(--spacing9); }
.pr-10{padding-right: var(--spacing10); }
.pr-11{padding-right: var(--spacing11); }

.pb-0{padding-bottom: var(--spacing0); }
.pb-1{padding-bottom: var(--spacing1); }
.pb-2{padding-bottom: var(--spacing2); }
.pb-3{padding-bottom: var(--spacing3); }
.pb-4{padding-bottom: var(--spacing4); }
.pb-5{padding-bottom: var(--spacing5); }
.pb-6{padding-bottom: var(--spacing6); }
.pb-7{padding-bottom: var(--spacing7); }
.pb-8{padding-bottom: var(--spacing8); }
.pb-9{padding-bottom: var(--spacing9); }
.pb-10{padding-bottom: var(--spacing10); }
.pb-11{padding-bottom: var(--spacing11); }

.pl-0{padding-left: var(--spacing0); }
.pl-1{padding-left: var(--spacing1); }
.pl-2{padding-left: var(--spacing2); }
.pl-3{padding-left: var(--spacing3); }
.pl-4{padding-left: var(--spacing4); }
.pl-5{padding-left: var(--spacing5); }
.pl-6{padding-left: var(--spacing6); }
.pl-7{padding-left: var(--spacing7); }
.pl-8{padding-left: var(--spacing8); }
.pl-9{padding-left: var(--spacing9); }
.pl-10{padding-left: var(--spacing10); }
.pl-11{padding-left: var(--spacing11); }

/* ─── MARGINS ──────────────────────────────────────────────────────── ✣ ─ */
.m-0{margin: 0; }
.my-auto{margin-top: auto; margin-bottom: auto; }
.mx-auto{margin-left: auto; margin-right: auto; }

.m-1{margin: var(--spacing1); }
.m-2{margin: var(--spacing2); }
.m-3{margin: var(--spacing3); }
.m-4{margin: var(--spacing4); }
.m-5{margin: var(--spacing5); }
.m-6{margin: var(--spacing6); }
.m-7{margin: var(--spacing7); }
.m-8{margin: var(--spacing8); }
.m-9{margin: var(--spacing9); }
.m-10{margin: var(--spacing10); }
.m-11{margin: var(--spacing11); }

.my-0{margin-top: var(--spacing0); margin-bottom: var(--spacing0); }
.my-1{margin-top: var(--spacing1); margin-bottom: var(--spacing1); }
.my-2{margin-top: var(--spacing2); margin-bottom: var(--spacing2); }
.my-3{margin-top: var(--spacing3); margin-bottom: var(--spacing3); }
.my-4{margin-top: var(--spacing4); margin-bottom: var(--spacing4); }
.my-5{margin-top: var(--spacing5); margin-bottom: var(--spacing5); }
.my-6{margin-top: var(--spacing6); margin-bottom: var(--spacing6); }
.my-7{margin-top: var(--spacing7); margin-bottom: var(--spacing7); }
.my-8{margin-top: var(--spacing8); margin-bottom: var(--spacing8); }
.my-9{margin-top: var(--spacing9); margin-bottom: var(--spacing9); }
.my-10{margin-top: var(--spacing10); margin-bottom: var(--spacing10); }
.my-11{margin-top: var(--spacing11); margin-bottom: var(--spacing11); }

.mx-0{margin-left: var(--spacing0); margin-right: var(--spacing0); }
.mx-1{margin-left: var(--spacing1); margin-right: var(--spacing1); }
.mx-2{margin-left: var(--spacing2); margin-right: var(--spacing2); }
.mx-3{margin-left: var(--spacing3); margin-right: var(--spacing3); }
.mx-4{margin-left: var(--spacing4); margin-right: var(--spacing4); }
.mx-5{margin-left: var(--spacing5); margin-right: var(--spacing5); }
.mx-6{margin-left: var(--spacing6); margin-right: var(--spacing6); }
.mx-7{margin-left: var(--spacing7); margin-right: var(--spacing7); }
.mx-8{margin-left: var(--spacing8); margin-right: var(--spacing8); }
.mx-9{margin-left: var(--spacing9); margin-right: var(--spacing9); }
.mx-10{margin-left: var(--spacing10); margin-right: var(--spacing10); }
.mx-11{margin-left: var(--spacing11); margin-right: var(--spacing11); }

.mt-0{margin-top: var(--spacing0); }
.mt-1{margin-top: var(--spacing1); }
.mt-2{margin-top: var(--spacing2); }
.mt-3{margin-top: var(--spacing3); }
.mt-4{margin-top: var(--spacing4); }
.mt-5{margin-top: var(--spacing5); }
.mt-6{margin-top: var(--spacing6); }
.mt-7{margin-top: var(--spacing7); }
.mt-8{margin-top: var(--spacing8); }
.mt-9{margin-top: var(--spacing9); }
.mt-10{margin-top: var(--spacing10); }
.mt-11{margin-top: var(--spacing11); }

.mr-0{margin-right: var(--spacing0); }
.mr-1{margin-right: var(--spacing1); }
.mr-2{margin-right: var(--spacing2); }
.mr-3{margin-right: var(--spacing3); }
.mr-4{margin-right: var(--spacing4); }
.mr-5{margin-right: var(--spacing5); }
.mr-6{margin-right: var(--spacing6); }
.mr-7{margin-right: var(--spacing7); }
.mr-8{margin-right: var(--spacing8); }
.mr-9{margin-right: var(--spacing9); }
.mr-10{margin-right: var(--spacing10); }
.mr-11{margin-right: var(--spacing11); }

.mb-0{margin-bottom: var(--spacing0); }
.mb-1{margin-bottom: var(--spacing1); }
.mb-2{margin-bottom: var(--spacing2); }
.mb-3{margin-bottom: var(--spacing3); }
.mb-4{margin-bottom: var(--spacing4); }
.mb-5{margin-bottom: var(--spacing5); }
.mb-6{margin-bottom: var(--spacing6); }
.mb-7{margin-bottom: var(--spacing7); }
.mb-8{margin-bottom: var(--spacing8); }
.mb-9{margin-bottom: var(--spacing9); }
.mb-10{margin-bottom: var(--spacing10); }
.mb-11{margin-bottom: var(--spacing11); }

.ml-0{margin-left: var(--spacing0); }
.ml-1{margin-left: var(--spacing1); }
.ml-2{margin-left: var(--spacing2); }
.ml-3{margin-left: var(--spacing3); }
.ml-4{margin-left: var(--spacing4); }
.ml-5{margin-left: var(--spacing5); }
.ml-6{margin-left: var(--spacing6); }
.ml-7{margin-left: var(--spacing7); }
.ml-8{margin-left: var(--spacing8); }
.ml-9{margin-left: var(--spacing9); }
.ml-10{margin-left: var(--spacing10); }
.ml-11{margin-left: var(--spacing11); }

/* ─── MISCELÂNEA  ──────────────────────────────────────────────────────── ✣ ─ */
.object-cover { object-fit: cover; }
.shrink-0 {flex-shrink: 0; }
.self-stretch {align-self: stretch; }
.relative {position: relative; }
.no-underline {text-decoration: none; }
.text-inherit {color: inherit; }
.overflow-hidden{overflow: hidden; }



/* ────────────────────────────────────────────────────────────────────────── */
/* ████████████████████████  📱MOBILE ADJUSTMENTS   █████████████████████████ */
/* ────────────────────────────────────────────────────────────────────────── */

/* ─── Botão (X) fechar menu ──────────────────────────────────────────────────────── ✣ ─ */
.menu-close {
	/* Layout */
	position: absolute;
	top: var(--spacing4);
	right: var(--spacing4);
	display: flex;
	align-items: center;
	justify-content: center;
	/* Sizing */
	padding: var(--spacing2);
	/* Visuals */
	color: var(--color-text-primary);
	background: transparent;
	border: none;
	border-radius: 50%; /* Deixa o hover circular */
	/* Effects */
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.menu-close:hover {
	/* Visuals */
	background-color: rgba(0, 0, 0, 0.40); /* Círculo sutil no fundo */
	/* Effects */
	transform: rotate(90deg); /* Pequena animação de rotação */
}

.menu-close svg {
	/* Visuals */
	stroke: currentColor;
	stroke-width: 2;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}


/* ─── Botão Hamburguer ──────────────────────────────────────────────────────── ✣ ─ */
.menu-toggle {
	/* Layout */
	display: none;
	align-items: center;
	justify-content: center;
	/* Visuals */
	color: var(--color-text-primary);
	background: none;
	border: none;
	/* Effects */
	cursor: pointer;
}


/* ─── Overlay Escuro e borrado ao abrir menu ──────────────────────────────────────────────────────── ✣ ─ */
body.menu-open {
	/* Layout */
	overflow: hidden;
}

body::before {
	/* Layout */
	content: "";
	position: fixed;
	inset: 0;
	z-index: 50;
	/* Visuals */
	background: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px); /* Safari */
	/* Effects */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, backdrop-filter 0.4s ease, visibility 0.4s; 
}

body.menu-open::before {
	/* Visuals */
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px); /* Safari */
	/* Effects */
	opacity: 1;
	visibility: visible;
}

/* ─── Mudanças tela pequena ──────────────────────────────────────────────────────── ✣ ─ */
@media (max-width: 992px) {

	/* ─── Sticky header ──────────────────────────────────────────────────────── ✣ ─ */
	t-header {
		position: sticky;
		top: 0;
		z-index: 990;
	}

	header {
		/* Layout */
		position: sticky;
		top: 0;
		z-index: 990;
		/* Visuals */
		background-color: rgba(255, 255, 255, 0.85);
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
		/* Glass Blur Effect */
		backdrop-filter: blur(8px); 
		-webkit-backdrop-filter: blur(8px);
		/* Effects */
		transition: background-color 0.3s ease;
	}

	[data-theme="dark"] header {
		/* Visuals */
		background-color: rgba(15, 23, 42, 0.85);
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	/* ─── CARDS & CAROUSEL ──────────────────────────────────────────────────────── ✣ ─ */

	.carousel__track t-card-media {
		/* Layout */
		flex: 0 0 calc((100% - var(--spacing4)) / 1.4);
		min-width: calc((100% - var(--spacing4)) / 1.4); /* Exibir apenas 1.4 cards */
	}

	.card--carousel a{
		padding: var(--spacing3) calc(var(--spacing3) * 1.5);
	}

	/* ─── Elements ──────────────────────────────────────────────────────── ✣ ─ */
	.container {
		/* Sizing */
		padding: var(--spacing0) var(--spacing6);
	}

	.container .flex {
		/* Sizing */
		padding-top: var(--spacing1);
		padding-bottom: var(--spacing1);
	}

	.hero-full-line {
		/* Layout */
		justify-content: space-between;
	}

	.navbar--desktop{
		/* Layout */
		display: none;
	}

	.hero-left {
		/* Layout */
		align-items: center;
		text-align: center;
		margin: 0 auto;
		/* Sizing */
		padding-right: 0;
	}

	.hero-image {
		/* Layout */
		justify-content: center;
		align-items: center;
		/* Sizing */
		width: 100%;
	}

	.hero-image img {
		/* Layout */
		margin-right: 0;
		margin-top: -10px;
		margin-bottom: -20px;
		/* Sizing */
		height: auto;
		max-width: 40%;
		min-width: 180px;
	}

	.image-glow::before {
		/* Layout */
		display: none;
	}



	/* ─── Hamburguer menu show ──────────────────────────────────────────────────────── ✣ ─ */
	.menu-toggle {
		/* Layout */
		display: flex;
	}

	/* ─── Language Selector ──────────────────────────────────────────────────────── ✣ ─ */
	.lang-selector {
		/* Layout */
		/* Sizing */
		/* Visuals */
		/* Effects */
		/* REFATORAR ISSO */
		width: auto; 
		display: flex;
		justify-content: center;
		position: relative;
	}
	
	.lang-menu {
		/* Layout */
		/* Sizing */
		/* Visuals */
		/* Effects */
		/* REFATORAR ISSO */
		left: 50%;
		right: auto;
		text-align: center; 
		min-width: 150px;
		transform: translateX(-50%) translateY(10px);
	}
	
	.lang-selector.open .lang-menu {
		/* Layout */
		/* Sizing */
		/* Visuals */
		/* Effects */
		/* REFATORAR ISSO */
		display: flex; /* Não precisa de display: block se tem flex */
		flex-direction: column;
		position: absolute;

		transform: translateY(0); /* Reseta a posição para a animação funcionar */
	}
	
	.lang-menu li {
		/* Layout */
		/* Sizing */
		/* Visuals */
		/* Effects */
		/* REFATORAR ISSO */
		text-align: center;
		padding: var(--spacing3);
	}


	/* ─── Utilities mobile ──────────────────────────────────────────────────────── ✣ ─ */
	/* ─── GENÉRICAS ──────────────────────────────────────────────────────── ✣ ─ */
	.w-full-mobile {width: 100%; }
	.w-100-mobile {width: 100%; }



	/* ─── GAP ──────────────────────────────────────────────────────── ✣ ─ */
	.gap0-mobile{gap: var(--spacing0); }
	.gap1-mobile{gap: var(--spacing1); }
	.gap2-mobile{gap: var(--spacing2); }
	.gap3-mobile{gap: var(--spacing3); }
	.gap4-mobile{gap: var(--spacing4); }
	.gap5-mobile{gap: var(--spacing5); }
	.gap6-mobile{gap: var(--spacing6); }
	.gap7-mobile{gap: var(--spacing7); }
	.gap8-mobile{gap: var(--spacing8); }
	.gap9-mobile{gap: var(--spacing9); }
	.gap10-mobile{gap: var(--spacing10); }
	.gap11-mobile{gap: var(--spacing11); }
	
	/* ─── PADDINGS ──────────────────────────────────────────────────────── ✣ ─ */
	.p-0-mobile{padding: 0; }
	
	.p-1-mobile{padding: var(--spacing1); }
	.p-2-mobile{padding: var(--spacing2); }
	.p-3-mobile{padding: var(--spacing3); }
	.p-4-mobile{padding: var(--spacing4); }
	.p-5-mobile{padding: var(--spacing5); }
	.p-6-mobile{padding: var(--spacing6); }
	.p-7-mobile{padding: var(--spacing7); }
	.p-8-mobile{padding: var(--spacing8); }
	.p-9-mobile{padding: var(--spacing9); }
	.p-10-mobile{padding: var(--spacing10); }
	.p-11-mobile{padding: var(--spacing11); }

	.py-0-mobile{padding-top: var(--spacing0); padding-bottom: var(--spacing0); }
	.py-1-mobile{padding-top: var(--spacing1); padding-bottom: var(--spacing1); }
	.py-2-mobile{padding-top: var(--spacing2); padding-bottom: var(--spacing2); }
	.py-3-mobile{padding-top: var(--spacing3); padding-bottom: var(--spacing3); }
	.py-4-mobile{padding-top: var(--spacing4); padding-bottom: var(--spacing4); }
	.py-5-mobile{padding-top: var(--spacing5); padding-bottom: var(--spacing5); }
	.py-6-mobile{padding-top: var(--spacing6); padding-bottom: var(--spacing6); }
	.py-7-mobile{padding-top: var(--spacing7); padding-bottom: var(--spacing7); }
	.py-8-mobile{padding-top: var(--spacing8); padding-bottom: var(--spacing8); }
	.py-9-mobile{padding-top: var(--spacing9); padding-bottom: var(--spacing9); }
	.py-10-mobile{padding-top: var(--spacing10); padding-bottom: var(--spacing10); }
	.py-11-mobile{padding-top: var(--spacing11); padding-bottom: var(--spacing11); }
	
	.px-0-mobile{padding-left: var(--spacing0); padding-right: var(--spacing0); }
	.px-1-mobile{padding-left: var(--spacing1); padding-right: var(--spacing1); }
	.px-2-mobile{padding-left: var(--spacing2); padding-right: var(--spacing2); }
	.px-3-mobile{padding-left: var(--spacing3); padding-right: var(--spacing3); }
	.px-4-mobile{padding-left: var(--spacing4); padding-right: var(--spacing4); }
	.px-5-mobile{padding-left: var(--spacing5); padding-right: var(--spacing5); }
	.px-6-mobile{padding-left: var(--spacing6); padding-right: var(--spacing6); }
	.px-7-mobile{padding-left: var(--spacing7); padding-right: var(--spacing7); }
	.px-8-mobile{padding-left: var(--spacing8); padding-right: var(--spacing8); }
	.px-9-mobile{padding-left: var(--spacing9); padding-right: var(--spacing9); }
	.px-10-mobile{padding-left: var(--spacing10); padding-right: var(--spacing10); }
	.px-11-mobile{padding-left: var(--spacing11); padding-right: var(--spacing11); }
	
	.pt-0-mobile{padding-top: var(--spacing0); }
	.pt-1-mobile{padding-top: var(--spacing1); }
	.pt-2-mobile{padding-top: var(--spacing2); }
	.pt-3-mobile{padding-top: var(--spacing3); }
	.pt-4-mobile{padding-top: var(--spacing4); }
	.pt-5-mobile{padding-top: var(--spacing5); }
	.pt-6-mobile{padding-top: var(--spacing6); }
	.pt-7-mobile{padding-top: var(--spacing7); }
	.pt-8-mobile{padding-top: var(--spacing8); }
	.pt-9-mobile{padding-top: var(--spacing9); }
	.pt-10-mobile{padding-top: var(--spacing10); }
	.pt-11-mobile{padding-top: var(--spacing11); }
	
	.pr-0-mobile{padding-right: var(--spacing0); }
	.pr-1-mobile{padding-right: var(--spacing1); }
	.pr-2-mobile{padding-right: var(--spacing2); }
	.pr-3-mobile{padding-right: var(--spacing3); }
	.pr-4-mobile{padding-right: var(--spacing4); }
	.pr-5-mobile{padding-right: var(--spacing5); }
	.pr-6-mobile{padding-right: var(--spacing6); }
	.pr-7-mobile{padding-right: var(--spacing7); }
	.pr-8-mobile{padding-right: var(--spacing8); }
	.pr-9-mobile{padding-right: var(--spacing9); }
	.pr-10-mobile{padding-right: var(--spacing10); }
	.pr-11-mobile{padding-right: var(--spacing11); }
	
	.pb-0-mobile{padding-bottom: var(--spacing0); }
	.pb-1-mobile{padding-bottom: var(--spacing1); }
	.pb-2-mobile{padding-bottom: var(--spacing2); }
	.pb-3-mobile{padding-bottom: var(--spacing3); }
	.pb-4-mobile{padding-bottom: var(--spacing4); }
	.pb-5-mobile{padding-bottom: var(--spacing5); }
	.pb-6-mobile{padding-bottom: var(--spacing6); }
	.pb-7-mobile{padding-bottom: var(--spacing7); }
	.pb-8-mobile{padding-bottom: var(--spacing8); }
	.pb-9-mobile{padding-bottom: var(--spacing9); }
	.pb-10-mobile{padding-bottom: var(--spacing10); }
	.pb-11-mobile{padding-bottom: var(--spacing11); }
	
	.pl-0-mobile{padding-left: var(--spacing0); }
	.pl-1-mobile{padding-left: var(--spacing1); }
	.pl-2-mobile{padding-left: var(--spacing2); }
	.pl-3-mobile{padding-left: var(--spacing3); }
	.pl-4-mobile{padding-left: var(--spacing4); }
	.pl-5-mobile{padding-left: var(--spacing5); }
	.pl-6-mobile{padding-left: var(--spacing6); }
	.pl-7-mobile{padding-left: var(--spacing7); }
	.pl-8-mobile{padding-left: var(--spacing8); }
	.pl-9-mobile{padding-left: var(--spacing9); }
	.pl-10-mobile{padding-left: var(--spacing10); }
	.pl-11-mobile{padding-left: var(--spacing11); }
	
	/* ─── MARGINS  ──────────────────────────────────────────────────────── ✣ ─ */
.m-0-mobile{margin: 0; }
.my-auto-mobile{margin-top: auto; margin-bottom: auto; }
.mx-auto-mobile{margin-left: auto; margin-right: auto; }

.m-1-mobile{margin: var(--spacing1); }
.m-2-mobile{margin: var(--spacing2); }
.m-3-mobile{margin: var(--spacing3); }
.m-4-mobile{margin: var(--spacing4); }
.m-5-mobile{margin: var(--spacing5); }
.m-6-mobile{margin: var(--spacing6); }
.m-7-mobile{margin: var(--spacing7); }
.m-8-mobile{margin: var(--spacing8); }
.m-9-mobile{margin: var(--spacing9); }
.m-10-mobile{margin: var(--spacing10); }
.m-11-mobile{margin: var(--spacing11); }

.my-1-mobile{margin-top: var(--spacing1); margin-bottom: var(--spacing1); }
.my-2-mobile{margin-top: var(--spacing2); margin-bottom: var(--spacing2); }
.my-3-mobile{margin-top: var(--spacing3); margin-bottom: var(--spacing3); }
.my-4-mobile{margin-top: var(--spacing4); margin-bottom: var(--spacing4); }
.my-5-mobile{margin-top: var(--spacing5); margin-bottom: var(--spacing5); }
.my-6-mobile{margin-top: var(--spacing6); margin-bottom: var(--spacing6); }
.my-7-mobile{margin-top: var(--spacing7); margin-bottom: var(--spacing7); }
.my-8-mobile{margin-top: var(--spacing8); margin-bottom: var(--spacing8); }
.my-9-mobile{margin-top: var(--spacing9); margin-bottom: var(--spacing9); }
.my-10-mobile{margin-top: var(--spacing10); margin-bottom: var(--spacing10); }
.my-11-mobile{margin-top: var(--spacing11); margin-bottom: var(--spacing11); }

.mx-1-mobile{margin-left: var(--spacing1); margin-right: var(--spacing1); }
.mx-2-mobile{margin-left: var(--spacing2); margin-right: var(--spacing2); }
.mx-3-mobile{margin-left: var(--spacing3); margin-right: var(--spacing3); }
.mx-4-mobile{margin-left: var(--spacing4); margin-right: var(--spacing4); }
.mx-5-mobile{margin-left: var(--spacing5); margin-right: var(--spacing5); }
.mx-6-mobile{margin-left: var(--spacing6); margin-right: var(--spacing6); }
.mx-7-mobile{margin-left: var(--spacing7); margin-right: var(--spacing7); }
.mx-8-mobile{margin-left: var(--spacing8); margin-right: var(--spacing8); }
.mx-9-mobile{margin-left: var(--spacing9); margin-right: var(--spacing9); }
.mx-10-mobile{margin-left: var(--spacing10); margin-right: var(--spacing10); }
.mx-11-mobile{margin-left: var(--spacing11); margin-right: var(--spacing11); }

.mt-0-mobile{margin-top: var(--spacing0); }
.mt-1-mobile{margin-top: var(--spacing1); }
.mt-2-mobile{margin-top: var(--spacing2); }
.mt-3-mobile{margin-top: var(--spacing3); }
.mt-4-mobile{margin-top: var(--spacing4); }
.mt-5-mobile{margin-top: var(--spacing5); }
.mt-6-mobile{margin-top: var(--spacing6); }
.mt-7-mobile{margin-top: var(--spacing7); }
.mt-8-mobile{margin-top: var(--spacing8); }
.mt-9-mobile{margin-top: var(--spacing9); }
.mt-10-mobile{margin-top: var(--spacing10); }
.mt-11-mobile{margin-top: var(--spacing11); }

.mr-0-mobile{margin-right: var(--spacing0); }
.mr-1-mobile{margin-right: var(--spacing1); }
.mr-2-mobile{margin-right: var(--spacing2); }
.mr-3-mobile{margin-right: var(--spacing3); }
.mr-4-mobile{margin-right: var(--spacing4); }
.mr-5-mobile{margin-right: var(--spacing5); }
.mr-6-mobile{margin-right: var(--spacing6); }
.mr-7-mobile{margin-right: var(--spacing7); }
.mr-8-mobile{margin-right: var(--spacing8); }
.mr-9-mobile{margin-right: var(--spacing9); }
.mr-10-mobile{margin-right: var(--spacing10); }
.mr-11-mobile{margin-right: var(--spacing11); }

.mb-0-mobile{margin-bottom: var(--spacing0); }
.mb-1-mobile{margin-bottom: var(--spacing1); }
.mb-2-mobile{margin-bottom: var(--spacing2); }
.mb-3-mobile{margin-bottom: var(--spacing3); }
.mb-4-mobile{margin-bottom: var(--spacing4); }
.mb-5-mobile{margin-bottom: var(--spacing5); }
.mb-6-mobile{margin-bottom: var(--spacing6); }
.mb-7-mobile{margin-bottom: var(--spacing7); }
.mb-8-mobile{margin-bottom: var(--spacing8); }
.mb-9-mobile{margin-bottom: var(--spacing9); }
.mb-10-mobile{margin-bottom: var(--spacing10); }
.mb-11-mobile{margin-bottom: var(--spacing11); }

.ml-0-mobile{margin-left: var(--spacing0); }
.ml-1-mobile{margin-left: var(--spacing1); }
.ml-2-mobile{margin-left: var(--spacing2); }
.ml-3-mobile{margin-left: var(--spacing3); }
.ml-4-mobile{margin-left: var(--spacing4); }
.ml-5-mobile{margin-left: var(--spacing5); }
.ml-6-mobile{margin-left: var(--spacing6); }
.ml-7-mobile{margin-left: var(--spacing7); }
.ml-8-mobile{margin-left: var(--spacing8); }
.ml-9-mobile{margin-left: var(--spacing9); }
.ml-10-mobile{margin-left: var(--spacing10); }
.ml-11-mobile{margin-left: var(--spacing11); }

}



/* ────────────────────────────────────────────────────────────────────────── */
/* ████████████████████████  📱ACESSIBILIDADE   █████████████████████████████ */
/* ────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	* {
		/* Effects */
		transition: none !important;
	}
}




























/* ─── LISTA DE CATEGORIAS DAS PROPRIEDADES ──────────────────────────────────────────────────────── ✣ ─ */

/*Layout*/

/*Sizing*/

/*Typograph*/

/*Visuals*/

/*Effects*/










/* ─── LISTA DE HEADERS ──────────────────────────────────────────────────────── ✣ ─ */




/* ────────────────────────────────────────────────────────────────────────── */
/* ██████████████████████████      HEADER 1     █████████████████████████████ */
/* ────────────────────────────────────────────────────────────────────────── */

/* ╔═════════════════════════════════════════════════════════════════════════╗ */
/* ║                               HEADING 2                                 ║ */
/* ╚═════════════════════════════════════════════════════════════════════════╝ */


/* ─── Header 3 ──────────────────────────────────────────────────────── ✣ ─ */

/* █████████████████  Heading Extra  █████████████████ */

/* ────────────────────────────────────────────────────────────────────────── */
/*                                  heading extra                             */
/* ────────────────────────────────────────────────────────────────────────── */

/* ↳ avatar */