/* ==========================================================================
   INFINITY EXPERIENCE — Sistema de Design do site institucional
   Paleta extraída do logotipo oficial (roxo + carvão) — o roxo é a cor de
   destaque em todo o site (--cor).
   Tipografia: Fraunces (display), Archivo (texto), IBM Plex Mono (rótulos).
   ========================================================================== */

/* ---- Fontes hospedadas localmente (sem CDN externo) ---- */
@font-face {
    font-display:	swap;
    src:			url('../fonts/fraunces-600.woff2') format('woff2');
    font-family:	'Fraunces';
    font-weight:	600;
    font-style:		normal;
}

@font-face {
    font-display:	swap;
    src:			url('../fonts/fraunces-800.woff2') format('woff2');
    font-family:	'Fraunces';
    font-weight:	800;
    font-style:		normal;
}

@font-face {
    font-display:	swap;
    src:			url('../fonts/archivo-400.woff2') format('woff2');
    font-family:	'Archivo';
    font-weight:	400;
    font-style:		normal;
}

@font-face {
    font-display:	swap;
    src:			url('../fonts/archivo-600.woff2') format('woff2');
    font-family:	'Archivo';
    font-weight:	600;
    font-style:		normal;
}

@font-face {
    font-display:	swap;
    src:			url('../fonts/plexmono-400.woff2') format('woff2');
    font-family:	'IBM Plex Mono';
    font-weight:	400;
    font-style:		normal;
}


/* ---- Paleta de cores (tokens) — extraída do Logotipo.png ----
   Roxo #744993 e carvão #373435 são as cores oficiais da marca — o roxo
   aparece em variações (mais vívido no --cor de destaque, mais
   discreto no --cor-roxo dos rótulos numéricos). O tema escuro é o
   padrão; o tema claro reobtém os mesmos tokens com valores ajustados
   para contraste AA. */
:root {
    --cor-fundo:				#2B3036;
    --cor-fundo-elevado:		#343A41;
    --cor-fundo-elevado-2:		#3D444C;
    --cor-fundo-menu-topo:		color-mix(in srgb, var(--cor-carvao) 70%, transparent);
    --cor-fundo-menu-item:		rgba(0, 0, 0, .20);
    --cor-texto:				#FFFFFF;
    --cor-texto-menu-topo:		rgba(255, 255, 255, 0.8);
    --cor-texto-menu:			rgba(255, 255, 255, 1);
    --cor-texto-menu-item:		rgba(255, 255, 255, 0.8);
    --cor-texto-menu-hover:		rgba(0, 0, 0, .35);
    --cor-texto-dim:			rgba(255, 255, 255, 1);
    --cor-menu-alterna-hover:   #EAADE8;
    --cor-roxo:					rgba(255, 255, 255, .55);
    --cor-roxo-decor:			#FFFFFF;
    --cor-titulo-gradiente:     linear-gradient(90deg, #600C91, rgba(193, 11, 187, .35), rgba(193, 11, 187, .55));
    --cor-rotulo:               #F752F3;
    --cor:						#F752F3;
    --cor-texto-sobre:			#260626;
    --cor-carvao:				#201C22;
    --cor-erro:					#FF7597;
    --cor-linha:				rgba(241, 237, 247, .14);
    --cor-linha-forte:			rgba(241, 237, 247, .26);
    --cor-trilho-linha:         #C10BBB;
    --cor-trilho-ponto:         #C10BBB;
    --sombra-elevacao:			0 0 50px rgba(0, 0, 0, 1);
    --sombra-cartao-pilha:		0 0 10px rgba(0, 0, 0, 1);
    --cor-linha-cartao-pilha:	rgba(0, 0, 0, .5);
    --brilho:					0 0 0 1px rgba(247, 82, 243, .4), 0 0 32px rgba(247, 82, 243, .18);
    --brilho-neon:				0 0 2px var(--cor), 0 0 8px var(--cor),
                                0 0 20px color-mix(in srgb, var(--cor) 70%, transparent),
                                0 0 40px color-mix(in srgb, var(--cor) 45%, transparent),
                                0 0 70px color-mix(in srgb, var(--cor) 25%, transparent);
    --brilho-neon-texto:		0 0 2px currentColor, 0 0 6px var(--cor),
                                0 0 14px color-mix(in srgb, var(--cor) 60%, transparent),
                                0 0 28px color-mix(in srgb, var(--cor) 35%, transparent);
    /* Cor do brilho "Spotlight Border" dos cards de Compromissos — variável
       à parte só pra essa cor poder ser ajustada sem mexer no efeito (ver
       .compromisso::before em site.css). */
    --brilho-compromisso:		color-mix(in srgb, var(--cor) 28%, transparent);

    /* ---- Escala Tipográfica Fluida (Normalização com clamp baseado em 17px = 1.0625rem) ---- */
    --fs-menu-botao-inferior:	clamp(1.3rem, 0.95rem + 0.5vw, 1.45rem);
    --fs-rotulo:				clamp(0.9rem, 0.7rem + 0.45vw, 1.05rem);
    --fs-corpo:					clamp(1.05rem, 0.85rem + 0.75vw, 1.25rem);
    --fs-subtitulo:				clamp(1.1rem, 0.9rem + 0.95vw, 1.45rem);
    --fs-titulo-destaque:		clamp(1.25rem, 1.05rem + 1.3vw, 1.8rem);
    --fs-titulo-secao:			clamp(1.45rem, 3.2vw + 0.8rem, 3.2rem);
    --fs-numero-destaque:		clamp(1.75rem, 1.3rem + 2.2vw, 2.6rem);
    --fs-display-cortina-sm:	clamp(2.4rem, 5vw + 1rem, 3.6rem);
    --fs-display-cortina:		clamp(2.4rem, 6vw + 1.2rem, 5.5rem);
    --fs-hero-titulo:			clamp(2rem, 4.5vw + 1.2rem, 5.5rem);
}

@media (prefers-color-scheme: light) {
    :root {
        --cor-fundo:			    #FFFFFF;
        --cor-fundo-elevado:	    #FFFFFF;
        --cor-fundo-elevado-2:	    #FFFFFF;
        --cor-fundo-menu-topo:	    color-mix(in srgb, var(--cor-carvao) 70%, transparent);
        --cor-fundo-menu-item:	    rgba(0, 0, 0, .20);
        --cor-texto:			    #000000;
        --cor-texto-menu-topo:	    rgba(255, 255, 255, 0.8);
        --cor-texto-menu:		    rgba(255, 255, 255, 1);
        --cor-texto-menu-item:	    rgba(255, 255, 255, 0.8);
        --cor-texto-menu-hover:	    rgba(0, 0, 0, .35);
        --cor-texto-dim:		    rgba(0, 0, 0, 1);
        --cor-menu-alterna-hover:   #EAADE8;
        --cor-roxo:				    rgba(0, 0, 0, .55);
        --cor-roxo-decor:		    #000000;
        --cor-titulo-gradiente:     linear-gradient(90deg, #600C91, rgba(193, 11, 187, .35), rgba(193, 11, 187, .55));
        --cor-rotulo:               #F752F3;
        --cor:					    #C10BBB;
        --cor-texto-sobre:		    #FFFFFF;
        --cor-carvao:			    #2A252C;
        --cor-erro:				    #C01A48;
        --cor-linha:			    rgba(0, 0, 0, .12);
        --cor-linha-forte:		    rgba(0, 0, 0, .24);
        --cor-trilho-linha:         #C10BBB;
        --cor-trilho-ponto:         #C10BBB;
        --sombra-elevacao:		    0 0 50px rgba(0, 0, 0, 1);
        --brilho:				    0 0 0 1px rgba(193, 11, 187, .35), 0 0 24px rgba(193, 11, 187, .15);
        --brilho-neon:			    0 0 2px var(--cor), 0 0 8px var(--cor),
                                    0 0 20px color-mix(in srgb, var(--cor) 65%, transparent),
                                    0 0 40px color-mix(in srgb, var(--cor) 40%, transparent),
                                    0 0 70px color-mix(in srgb, var(--cor) 22%, transparent);
        --brilho-neon-texto:	    0 0 2px currentColor, 0 0 6px var(--cor),
                                    0 0 14px color-mix(in srgb, var(--cor) 50%, transparent),
                                    0 0 28px color-mix(in srgb, var(--cor) 28%, transparent);
    }
}

:root[data-theme="dark"] {
    --cor-fundo:			    #2B3036;
    --cor-fundo-elevado:	    #343A41;
    --cor-fundo-elevado-2:	    #3D444C;
    --cor-fundo-menu-topo:	    color-mix(in srgb, var(--cor-carvao) 50%, transparent);
    --cor-fundo-menu-item:	    rgba(255, 255, 255, .20);
    --cor-texto:			    #FFFFFF;
    --cor-texto-menu-topo:	    rgba(255, 255, 255, 0.8);
    --cor-texto-menu:		    rgba(255, 255, 255, 1);
    --cor-texto-menu-item:	    rgba(255, 255, 255, 0.8);
    --cor-texto-menu-hover:	    rgba(255, 255, 255, .35);
    --cor-texto-dim:		    rgba(255, 255, 255, 1);
    --cor-menu-alterna-hover:   #EAADE8;
    --cor-roxo:				    rgba(255, 255, 255, .55);
    --cor-roxo-decor:		    #FFFFFF;
    /*
    --cor-titulo-gradiente: linear-gradient(90deg, rgba(193, 11, 187, .25), #A8748E, rgba(193, 11, 187, .35));
    --cor-titulo-gradiente: linear-gradient(90deg, #A8748E, rgba(193, 11, 187, 0.10), #A8748E);
    --cor-titulo-gradiente: linear-gradient(90deg, rgba(193, 11, 187, 0.10), #F752F3, rgba(193, 11, 187, 0.10));
    */
    --cor-titulo-gradiente:     linear-gradient(90deg, #EAADE8, #F752F3, #EAADE8);
    --cor-rotulo:               #EAADE8;
    --cor:					    #F752F3;
    --cor-texto-sobre:		    #260626;
    --cor-carvao:			    #201C22;
    --cor-erro:				    #FF7597;
    --cor-linha:			    rgba(241, 237, 247, .14);
    --cor-linha-forte:		    rgba(241, 237, 247, .26);
    --cor-trilho-linha:         #EAADE8;
    --cor-trilho-ponto:         #EAADE8;
    --sombra-elevacao:		    0 0 50px rgba(255, 255, 255, 1);
    --brilho:				    0 0 0 1px rgba(247, 82, 243, .4), 0 0 32px rgba(247, 82, 243, .18);
    --brilho-neon:		    	0 0 2px var(--cor), 0 0 8px var(--cor),
                                0 0 20px color-mix(in srgb, var(--cor) 70%, transparent),
                                0 0 40px color-mix(in srgb, var(--cor) 45%, transparent),
                                0 0 70px color-mix(in srgb, var(--cor) 25%, transparent);
    --brilho-neon-texto:    	0 0 2px currentColor, 0 0 6px var(--cor),
                                0 0 14px color-mix(in srgb, var(--cor) 60%, transparent),
                                0 0 28px color-mix(in srgb, var(--cor) 35%, transparent);
}

:root[data-theme="light"] {
    --cor-fundo:			    #FFFFFF;
    --cor-fundo-elevado:	    #FFFFFF;
    --cor-fundo-elevado-2:	    #FFFFFF;
    --cor-fundo-menu-topo:	    color-mix(in srgb, var(--cor-carvao) 70%, transparent);
    --cor-fundo-menu-item:	    rgba(0, 0, 0, .20);
    --cor-texto:			    #000000;
    --cor-texto-menu-topo:	    rgba(255, 255, 255, 0.8);
    --cor-texto-menu:		    rgba(255, 255, 255, 1);
    --cor-texto-menu-item:	    rgba(255, 255, 255, 0.8);
    --cor-texto-menu-hover:	    rgba(0, 0, 0, .35);
    --cor-texto-dim:		    rgba(0, 0, 0, 1);
    --cor-menu-alterna-hover:   #EAADE8;
    --cor-roxo:				    rgba(0, 0, 0, .55);
    --cor-roxo-decor:		    #000000;
    --cor-titulo-gradiente:     linear-gradient(90deg, #600C91, rgba(193, 11, 187, .35), rgba(193, 11, 187, .55));
    --cor-rotulo:               #F752F3;
    --cor:					    #C10BBB;
    --cor-texto-sobre:		    #FFFFFF;
    --cor-carvao:			    #2A252C;
    --cor-erro:				    #C01A48;
    --cor-linha:			    rgba(0, 0, 0, .12);
    --cor-linha-forte:		    rgba(0, 0, 0, .24);
    --cor-trilho-linha:         #C10BBB;
    --cor-trilho-ponto:         #C10BBB;
    --sombra-elevacao:		    0 0 50px rgba(0, 0, 0, 1);
    --brilho:				    0 0 0 1px rgba(193, 11, 187, .35), 0 0 24px rgba(193, 11, 187, .15);
    --brilho-neon:			    0 0 2px var(--cor), 0 0 8px var(--cor),
                                0 0 20px color-mix(in srgb, var(--cor) 65%, transparent),
                                0 0 40px color-mix(in srgb, var(--cor) 40%, transparent),
                                0 0 70px color-mix(in srgb, var(--cor) 22%, transparent);
    --brilho-neon-texto:	    0 0 2px currentColor, 0 0 6px var(--cor),
                                0 0 14px color-mix(in srgb, var(--cor) 50%, transparent),
                                0 0 28px color-mix(in srgb, var(--cor) 28%, transparent);
}

/* ---- Reset enxuto ---- */
*, *::before, *::after {
    box-sizing:	border-box;
    hyphens:	auto;
}

html {
    scroll-behavior:	smooth;
}

body {
    margin:					0;
    font-family:			'Archivo', system-ui, sans-serif;
    font-size:				var(--fs-corpo);
    -webkit-font-smoothing:	antialiased;
    line-height:			1.65;
    color:					var(--cor-texto);
    background:				var(--cor-fundo);
}

img, video, canvas {
    display:	block;
    max-width:	100%;
}

a {
    color:	inherit;
}

ul {
    margin:	0;
}

::selection {
    color:		var(--cor-texto-sobre);
    background:	var(--cor);
}

/* estado de foco visível — obrigatório para navegação por teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    border-radius:	2px;
    outline:		2px solid var(--cor);
    outline-offset:	3px;
}

/* link de pular para o conteúdo, visível apenas ao receber foco */
.pular-conteudo {
    z-index:			999;
    position:			absolute;
    top:				0;
    left:				-9999px;
    padding:			12px 20px;
    font-family:		'IBM Plex Mono', monospace;
    font-size:			var(--fs-rotulo);
    text-decoration:	none;
    color:				var(--cor-texto-sobre);
    background:			var(--cor);
}

.pular-conteudo:focus {
    top:	12px;
    left:	12px;
}

/* As animações de entrada (fade + subida, letras, hero) tocam sempre,
   mesmo com "reduzir movimento" ativado no sistema — pedido explícito do
   cliente. O scroll nativo por âncora continua respeitando a preferência. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior:	auto;
    }
}


/* ---- Tipografia ---- */
h1, h2, h3, h4 {
    margin:			0;
    font-family:	'Fraunces', Georgia, serif;
    font-weight:	600;
    text-wrap:		balance;
}

/* textos grandes (parágrafos de corpo) sempre justificados — a última
   linha (ou um parágrafo de uma linha só) continua alinhada à esquerda,
   para não esticar palavras à toa. */
p {
    text-align:			justify;
    text-align-last:	left;
}

.rotulo {
    display:		inline-block;
    margin:			0 0 16px;
    font-family:	'IBM Plex Mono', ui-monospace, monospace;
    font-size:		var(--fs-rotulo);
    letter-spacing:	.14em;
    text-transform:	uppercase;
    /* text-shadow: var(--brilho-neon-texto); */
    color:			var(--cor-rotulo);
}

.fs-display-xl {
    padding-bottom:	.08em;
    font-size:		var(--fs-hero-titulo);
    font-weight:	800;
    line-height:	1.15;
}

.fs-display-lg {
    padding-bottom:	.12em;
    font-size:		var(--fs-titulo-secao);
    line-height:	1.2;
}

.fs-display-md {
    font-size:		var(--fs-subtitulo);
    line-height:	1.2;
}

.texto-dim {
    color:	var(--cor-texto-dim);
}

.texto-lead {
    max-width:	62ch;
    font-size:	var(--fs-corpo);
    color:		var(--cor-texto-dim);
}

.mono {
    font-family:	'IBM Plex Mono', ui-monospace, monospace;
}


/* ---- Layout base ---- */
.container {
    max-width:	1240px;
    margin:		0 auto;
    padding:	0 clamp(20px, 5vw, 48px);
}

.secao {
    padding:	clamp(72px, 11vw, 132px) 0;
    border-top:	1px solid var(--cor-linha-forte);
}

.secao-cabecalho {
    max-width:		68ch;
    margin-bottom:	48px;
}

/* Aplicando o efeito Animated Gradient nos títulos de seção (incluindo a seção 02 Posicionamento e Hero) */
.secao-cabecalho H2,
.secao-cabecalho H1,
.cortina-conteudo H2,
.pagina-topo H1,
.secao-hero H1,
.hero-conteudo H1,
.hero H1,
#s01 H1 {
    padding-bottom:          .12em;
    background:              var(--cor-titulo-gradiente);
    background-size:         200vw 200vh;
    background-attachment:   fixed;
    background-clip:         text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation:               gradShift 5s ease infinite;
}

@keyframes gradShift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* Título do quadro roxo de Tecnologia */
/* Título do quadro Próximo Passo no rodapé em cor branca sólida sem gradiente */
.secao-tecnologia .secao-cabecalho H2,
.rodape H2 {
    color:						#EAADE8;
    -webkit-text-fill-color:	#EAADE8;
    background:					none;
}

/* Setores (Horizontal Scroll Hijack) tem seu próprio espaçamento abaixo do
   título — ver .h-scroll-sticky, que soma padding-top a este valor. */
.secao-h-scroll .secao-cabecalho {
    margin-bottom:	16px;
}

.cta-linha {
    display:	flex;
    flex-wrap:	wrap;
    gap:		16px;
    margin-top:	28px;
}

.botao {
    display:			inline-flex;
    align-items:		center;
    gap:				10px;
    min-height:			34px;
    padding:			10px 20px;
    border:				1px solid transparent;
    border-radius:		13px 0 13px 0;
    font-family:		'IBM Plex Mono', monospace;
    font-size:			var(--fs-rotulo);
    letter-spacing:		.06em;
    text-transform:		uppercase;
    text-decoration:	none;
    transition:			transform .18s ease, box-shadow .18s ease, background-color .18s ease;
    cursor:				pointer;
}
.botao:hover {
    /* transform: translateY(-2px); */
}

.botao--primario {
    text-align: center;
    /* box-shadow: var(--brilho-neon); */
    color:		var(--cor-texto-menu);
    /* background: var(--cor); */
    background:	color-mix(var(--cor) 50%, transparent);
    transition:	transform .18s ease, box-shadow .25s ease, background-color .18s ease;
}
.botao--primario:hover {
    /* box-shadow: var(--brilho-neon), 0 0 90px color-mix(in srgb, var(--cor) 30%, transparent); */
    background-color:	#C10BBB;
}

.botao--fantasma {
    border-color:	var(--cor-linha-forte);
    color:			var(--cor-texto);
    background:		transparent;
}
.botao--fantasma:hover {
    border-color:	var(--cor);
    /* text-shadow: var(--brilho-neon-texto); */
    color:			var(--cor);
}


/* ==========================================================================
   Cabeçalho / navegação — pílula flutuante em vidro líquido (a mesma
   aparência translúcida/desfocada o tempo todo, sem trocar pra sólida ao
   rolar). Só o essencial dentro dela: logotipo, botão "Menu" (abre a
   grade com as seções da própria Home) e o botão de ação — ver
   iniciarMenuLiquido() em site.js.
   ========================================================================== */
.cabecalho {
    z-index:			50;
    position:			fixed;
    display:			flex;
    justify-content:	center;
    top:				0;
    left:				0;
    right:				0;
    padding:			16px clamp(16px, 4vw, 32px) 0;
    pointer-events:		none;
}

.cabecalho > * {
    pointer-events:	auto;
}

.menu-liquido {
    overflow:					hidden;
    width:						min(100%, 420px);
    border:						1px solid rgba(255, 255, 255, .14);
    /* border-radius: 28px; */
    border-radius:				13px 0 13px 0;
    box-shadow:					0 8px 30px rgba(0, 0, 0, .35), inset 0 0 0 rgba(255, 255, 255, .12);
    color:						var(--cor-texto-menu-topo);
    background:					var(--cor-fundo-menu-topo);
    -webkit-backdrop-filter:	blur(20px) saturate(180%);
    backdrop-filter:			blur(20px) saturate(180%);
    transition:					border-radius .3s ease;
}

.menu-liquido-barra {
    display:			flex;
    justify-content:	space-between;
    align-items:		center;
    gap:				8px;
    height:				36px;
    padding:			0;
}

.menu-liquido-marca {
    display:		inline-flex;
    align-items:	center;
}

.menu-liquido-marca img {
    width:	auto;
    height:	36px;
}

.menu-liquido-alterna {
    display:		inline-flex;
    align-items:	center;
    gap:			6px;
    padding:		5px 0;
    border:			0;
    border-radius:	999px;
    font-family:    'IBM Plex Mono', monospace;
    font-size:		var(--fs-rotulo);
    color:			var(--cor-texto-menu-topo);
    background:		none;
    transition:		background-color .2s ease, color .2s ease;
    cursor:			pointer;
}
.menu-liquido-alterna:hover {
    color:	var(--cor-menu-alterna-hover);
}

.menu-liquido-alterna svg {
    transition:	transform .3s ease;
}

.menu-liquido-alterna[aria-expanded="true"] svg {
    transform:	rotate(180deg);
}

.menu-liquido-tema {
    display:			inline-flex;
    justify-content:	center;
    align-items:		center;
    width:				28px;
    height:				28px;
    border:				0;
    border-radius:		999px;
    color:				var(--cor-texto-menu-topo);
    background:			none;
    transition:			background-color .2s ease, color .2s ease;
    cursor:				pointer;
}
.menu-liquido-tema:hover {
    color:	var(--cor-menu-alterna-hover);
}

.menu-liquido-tema I,
.menu-liquido-tema SVG {
    flex-shrink:	0;
    font-size:		var(--fs-corpo);
}

.menu-liquido-cta {
    overflow:		hidden;
    position:		relative;
    height:         36px;
    min-height:		0;
    padding:		9px 18px;
    border-radius:	13px 0 13px 0;
    font-size:		var(--fs-rotulo);
}

/* Fundo animado (ilha React, ver /react/src/cta-gradiente) desativado de
   propósito — este CTA volta a usar a mesma cor de fundo padrão dos
   demais botões "Iniciar Projeto" (ver .botao--primario), sem o
   degradê próprio. */
.cta-gradiente-fundo {
    display:	none;
}

.cta-gradiente-texto {
    z-index:		1;
    position:		relative;
    text-shadow:	0 1px 6px rgba(0, 0, 0, .4);
}

/* Fechada por padrão (altura zero) — vira uma grade de verdade só quando
   a .menu-liquido ganha [data-aberto], ver iniciarMenuLiquido() em site.js. */
.menu-liquido-grade {
    overflow:				hidden;
    display:				grid;
    grid-template-columns:	1fr 1fr;
    gap:					6px;
    max-height:				0;
    padding:				0 10px;
    opacity:				0;
    transition:				max-height .6s ease, opacity .5s ease, padding .6s ease;
}

.menu-liquido[data-aberto] {
    border-radius:	13px 0 13px 0;
}

.menu-liquido[data-aberto] .menu-liquido-grade {
    overflow-y:	auto;
    max-height:	60vh;
    padding:	10px;
    opacity:	1;
}

.menu-liquido-item {
    display:			block;
    padding:			8px 14px;
    border-radius:		13px 0 13px 0;
    font-family:        'IBM Plex Mono', monospace;
    font-size:			var(--fs-rotulo);
    text-decoration:	none;
    color:				var(--cor-texto-menu-item);
    background:			var(--cor-fundo-menu-item);
    transition:			background-color .2s ease, color .2s ease;
}

.menu-liquido-item:hover {
    background:	var(--cor-texto-menu-hover);
}

.menu-liquido-item--oculto {
    display:	none;
}

/* Barra de progresso — fixa nos primeiros pixels da tela (topo absoluto),
   por baixo da pílula flutuante, trilho sempre escuro (como o .bl do
   Kimtel) com o preenchimento em roxo. */
.progresso-trilho {
    z-index:	49;
    position:	fixed;
    top:		0;
    left:		0;
    width:		100%;
    height:		3px;
    background:	var(--cor-carvao);
}

.progresso-preenchimento {
    width:		0%;
    height:		100%;
    /* box-shadow: var(--brilho-neon); */
    background:	var(--cor);
}

/* Mobile: mesma pílula, só um pouco mais compacta e com a grade de
   seções em coluna única (mais fácil de ler numa tela estreita). Vale
   tanto pra tablet quanto pra celular — é só o menu inferior (ver
   .barra-inferior) que fica exclusivo do celular. */
@media (max-width: 860px) {
    .cabecalho {
        padding-top:	12px;
    }

    .menu-liquido-barra {
        height:	36px;
    }

    .menu-liquido-grade {
        grid-template-columns:	1fr;
    }
}

/* Só em celular — no tablet não existe barra inferior, então essa altura
   não precisa ser reservada em lugar nenhum (ver .barra-inferior). */
@media (max-width: 860px) {
    :root {
        --altura-barra-inferior:	54px;
    }

    .barra-privacidade-linha {
        justify-content:	center !important;
    }
}


/* ==========================================================================
   Hero (cena 01) — sequência de imagens tocando em looping, feito um vídeo
   (ver iniciarSequenciaHero em site.js). Ocupa só a própria tela — sem
   espaço extra de rolagem —, e a cena 02 em diante segue empilhada
   normalmente logo abaixo.
   ========================================================================== */
.hero {
    position:	relative;
}

.hero-scrub-fixo {
    z-index:			0;
    overflow:			hidden;
    display:			flex;
    justify-content:	flex-start;
    align-items:		flex-start;
    height:				100dvh;
    padding-top:		90px;
}

@media (min-width: 1400px) {
    .hero-conteudo {
        max-width: 50% !important;
    }
}

/* só em celular a barra inferior fixa cobriria os pés da personagem —
   encolhe a altura do hero por esse tanto para ela caber inteira acima
   dela (no tablet não tem barra inferior, então não precisa encolher) */
@media (max-width: 600px) {
    .hero-scrub-fixo {
        height:			calc(100dvh - var(--altura-barra-inferior));
        padding-top:	18px;
    }

    .hero-conteudo {
        width:				100%;
        max-width:			none;
        justify-content:	flex-start;
        gap:				8px;
        min-height:			auto;
        max-height:			48vh;
    }

    .hero-conteudo .rotulo {
        margin-bottom:	4px;
    }

    .hero-conteudo .texto-lead {
        margin-top:	4px;
    }

    /* O botão Iniciar Projeto fica visível no Hero no mobile e no desktop */
}

/* Desativa o botão "Ver o Método" para todos os dispositivos */
.hero-conteudo .cta-linha .botao--fantasma {
    display:	none !important;
}

/* O canvas sempre ocupa a cena inteira (mesmo em retrato) — é só a
   IMAGEM desenhada dentro dele que muda de tamanho/posição conforme a
   orientação (ver desenharQuadro em site.js), não a caixa do canvas. */
#heroQuadros {
    position:	absolute;
    width:		100%;
    height:		100%;
    background:	var(--cor-fundo);
    inset:		0;
}

/* sem véu/opacidade sobre a imagem — o texto fica só à esquerda e a
   personagem só à direita, sem precisar escurecer/clarear o fundo */
.hero-scrub-veu {
    display:	none;
}

/* Conteúdo sempre encostado à esquerda da tela (não centralizado como os
   demais ".container"), para sobrepor o mínimo possível a personagem, que
   fica sempre encostada à direita (ver #heroQuadros em site.js). */
.hero-conteudo {
    z-index:		1;
    position:		relative;
    width:			100%;
    max-width:		600px;
    margin:			0;
    padding-left:	clamp(20px, 5vw, 48px);
    padding-right:	clamp(20px, 5vw, 48px);
}

/* Desktop: texto logo abaixo do cabeçalho e os botões descem para perto
   da metade da tela, na altura do abdômen da personagem — .hero-texto
   (rótulo+título+parágrafo) fica no topo da caixa e .cta-linha no fim
   dela. No mobile fica como já estava (conteúdo encostado no topo). */
@media (min-width: 861px) {
    .hero-conteudo {
        display:			flex;
        flex-direction:		column;
        justify-content:	space-between;
        min-height:			54vh;
    }

    /* Oculta todos os botões da seção Hero no notebook e desktop */
    .hero-conteudo .cta-linha {
        display:	none !important;
    }
}

.hero-conteudo .rotulo {
    opacity:	0;
    animation:	revelar .7s ease .1s forwards;
}

/* Aplicando efeito Animated Gradient no título principal da seção Hero (baseado em section.filled-section) */
.hero-conteudo H1 {
    padding-bottom:				.12em;
    /* -webkit-text-stroke: 1px #000000; */
    -webkit-text-fill-color:	transparent;
    background:					var(--cor-titulo-gradiente);
    background-size:			200% 200%;
    -webkit-background-clip:	text;
    background-clip:			text;
    opacity:					1;
    animation:					revelar .8s ease .25s forwards, gradShift 5s ease infinite;
}

.hero-conteudo .texto-lead {
    opacity:	0;
    animation:	revelar .8s ease .45s forwards;
}

.hero-conteudo .cta-linha {
    opacity:	0;
    animation:	revelar .8s ease .6s forwards;
}

@keyframes revelar {
    from {
    opacity:	0;
    transform:	translateY(14px); }
    to {
    opacity:	1;
    transform:	translateY(0); }
}

/* Animação de transição fluida do gradiente no título do Hero */
@keyframes gradShift {
    0%, 100% {
        background-position:	0% 50%;
    }
    50% {
        background-position:	100% 50%;
    }
}


.hero-scroll-dica {
    position:		absolute;
    display:		flex;
    display:		none;
    align-items:	center;
    gap:			10px;
    bottom:			32px;
    left:			clamp(20px, 5vw, 48px);
    font-family:	'IBM Plex Mono', monospace;
    font-size:		var(--fs-rotulo);
    letter-spacing:	.12em;
    text-transform:	uppercase;
    color:			var(--cor-texto-dim);
}

.hero-scroll-dica .trilho {
    overflow:	hidden;
    position:	relative;
    width:		1px;
    height:		28px;
    background:	var(--cor-linha-forte);
}

.hero-scroll-dica .trilho::after {
    position:	absolute;
    content:	'';
    top:		-100%;
    left:		0;
    width:		100%;
    height:		100%;
    /* box-shadow: var(--brilho-neon); */
    background:	var(--cor);
    animation:	trilho-desce 1.8s ease-in-out infinite;
}

@keyframes trilho-desce {
    0% {
    top:	-100%; }
    100% {
    top:	100%; }
}


/* ==========================================================================
   Blocos que se repetem entre as cenas (revelação por scroll)
   ========================================================================== */
[data-revelar] {
    opacity:	0;
    transform:	translateY(24px);
    transition:	opacity .7s ease, transform .7s ease;
}

[data-revelar].em-vista {
    opacity:	1;
    transform:	translateY(0);
}

/* Títulos de seção (.fs-display-lg) com as letras surgindo, uma a uma,
   quando o título entra na tela — ver iniciarAnimacaoLetras em site.js.
   Cada palavra vira um bloco (pra não quebrar no meio ao animar) e, dentro
   dela, cada letra vira um span com um pequeno atraso próprio. */
.titulo-animado .palavra {
    display:                 inline-block;
    background:              inherit;
    background-size:         inherit;
    background-attachment:   inherit;
    background-clip:         inherit;
    -webkit-background-clip: inherit;
    -webkit-text-fill-color: inherit;
    animation:               inherit;
}

.titulo-animado .letra {
    display:                 inline-block;
    background:              inherit;
    background-size:         inherit;
    background-attachment:   inherit;
    background-clip:         inherit;
    -webkit-background-clip: inherit;
    opacity:                 0;
    transform:               translateY(-.4em);
    transition:              opacity .5s ease, transform .5s ease;
    animation:               inherit;
    -webkit-text-fill-color: inherit;
    will-change:             opacity, transform;
}

.titulo-animado.em-vista .letra {
    opacity:   1;
    transform: translateY(0);
}


/* ---- Manifesto (cena 02) — revelação em cortina ao rolar: a seção fica
   "presa" na tela (position: sticky) enquanto os dois painéis se abrem,
   revelando o texto principal por trás (ver iniciarCortinaRevelacao em
   site.js). ---- */
.secao-cortina {
    position:	relative;
    height:		300vh;
    padding:	0;
    border-top:	none;
}

.cortina-pino {
    overflow:	hidden;
    position:	sticky;
    top:		0;
    height:		100vh;
    height:		100dvh;
}

.cortina-conteudo {
    z-index:			1;
    overflow:			hidden;
    position:			absolute;
    display:			flex;
    flex-direction:		column;
    justify-content:	center;
    padding-top:		clamp(80px, 11vh, 100px);
    padding-bottom:		clamp(60px, 9vh, 90px);
    box-sizing:			border-box;
    background:			var(--cor-fundo);
    inset:				0;
}

/* O container e os parágrafos acompanham exatamente a mesma largura útil do título H2 */
.cortina-conteudo .container {
    width:			100%;
    max-width:		1040px;
    margin:			0 auto;
    padding-left:	clamp(20px, 4vw, 48px);
    padding-right:	clamp(20px, 4vw, 48px);
    box-sizing:		border-box;
}

.cortina-conteudo H2 {
    width:			100%;
    max-width:		100% !important;
    margin-bottom:	clamp(20px, 3vh, 32px) !important;
}

.cortina-conteudo P {
    width:			100%;
    max-width:		100% !important;
    margin-bottom:	16px;
    font-size:		var(--fs-corpo);
    line-height:	1.55;
}

.cortina-conteudo p:last-child {
    margin-bottom:	0;
}

.cortina-lado {
    z-index:						2;
    position:						absolute;
    display:						flex;
    align-items:					center;
    top:							0;
    bottom:							0;
    width:							50%;
    background:						#600C91;
    will-change:					transform;
    -webkit-backface-visibility:	hidden;
    backface-visibility:			hidden;
}

.cortina-esquerda {
    justify-content:	flex-end;
    left:				0;
    padding-right:		clamp(12px, 4vw, 32px);
    padding-right:		0.15em;
    text-align:			right;
}

.cortina-direita {
    justify-content:	flex-start;
    right:				0;
    padding-left:		clamp(12px, 4vw, 32px);
    padding-left:		0.15em;
    text-align:			left;
}

.cortina-lado H2 {
    font-family:	'Fraunces', Georgia, serif;
    font-size:		var(--fs-display-cortina);
    font-weight:	600;
    line-height:	.95;
    letter-spacing:	0.3em;
    color:			#FFFFFF;
}

/* Sublinhado apenas sob "XP" (referência à InfinityXP) — o span cobre só
   essas duas letras, então o traço acompanha inclusive o espaço entre
   elas (aberto pelo letter-spacing do título acima). */
.cortina-destaque {
    color:	#C10BBB;
    /*
    -webkit-text-stroke: 1px white;
    text-decoration-line: underline;
    text-decoration-color: var(--cor);
    text-decoration-thickness: .06em;
    text-underline-offset: .14em;
    */
}

/* Brilho que acompanha o cursor sob a cortina — só existe dentro do texto
   principal (.cortina-conteudo), nunca sobre os painéis da cortina. Ver
   iniciarBrilhoCursor em site.js. */
.cursor-glow {
    z-index:		0;
    position:		absolute;
    top:			0;
    left:			0;
    width:			500px;
    height:			500px;
    border-radius:	50%;
    background:		radial-gradient(circle, rgba(193, 11, 187, .18) 0%, transparent 70%);
    opacity:		0;
    will-change:	transform;
    transition:		opacity .3s;
    pointer-events:	none;
}

.cursor-glow.em-vista {
    opacity:	1;
}

@media (max-width: 720px) {
    .cursor-glow {
        display:	none;
    }
}

@media (max-width: 600px) {
    .cortina-lado H2 {
        font-size:		var(--fs-display-cortina-sm);
        letter-spacing:	0.14em;
    }
}

.manifesto P {
    max-width:	66ch;
    margin:		0 0 28px;
    font-size:	var(--fs-corpo);
}

@media (max-width: 600px) {
    .manifesto P {
        margin:			0 0 10px;
        font-size:		var(--fs-corpo);
        line-height:	1.45;
    }
}

.manifesto p:last-child {
    margin-bottom:	0;
}

@media (max-width: 520px) {
    .manifesto p:last-child {
        margin-bottom:	50px;
    }
}


/* ---- Acordeão de serviços (cena 03) — painéis horizontais que se
   expandem ao passar o mouse (ou focar/tocar), revelando número, título
   e descrição sobre a foto de cada serviço (assets/img/servicos). ---- */
.acordeo-servicos {
    display:	flex;
    gap:		6px;
    height:		clamp(440px, 58vh, 600px);
}

.acordeo-painel {
    overflow:		hidden;
    position:		relative;
    flex:			1;
    min-width:		0;
    border-radius:	4px;
    background:		var(--cor-carvao);
    transition:		flex .6s cubic-bezier(.16, 1, .3, 1);
    cursor:			pointer;
}

.acordeo-painel:hover,
.acordeo-painel:focus-visible,
.acordeo-painel.ativo {
    flex:	5;
}

/* enquanto o mouse estiver sobre a fileira, o painel marcado como "ativo"
   (aberto por padrão ou travado por toque) só continua largo — e com o
   conteúdo visível — se for justamente o painel sob o cursor; senão os
   dois disputariam espaço e espremeriam os demais a ponto de cortar o
   título vertical deles. Só faz sentido na fileira horizontal (desktop) —
   no layout em coluna (toque/vertical, ver @media 860px mais abaixo) o
   toque deixa a fileira "hover" travada sem o painel tocado estar mais
   sob ela, e essas regras apagavam o conteúdo do painel recém-aberto. */
@media (min-width: 861px) {
    .acordeo-servicos:hover .acordeo-painel.ativo:not(:hover) {
        flex:	1;
    }

    .acordeo-servicos:hover .acordeo-painel.ativo:not(:hover) .acordeo-fundo {
        transform:	none;
    }

    .acordeo-servicos:hover .acordeo-painel.ativo:not(:hover) .acordeo-titulo-vertical {
        opacity:	1;
    }

    .acordeo-servicos:hover .acordeo-painel.ativo:not(:hover) .acordeo-numero,
    .acordeo-servicos:hover .acordeo-painel.ativo:not(:hover) .acordeo-conteudo h3,
    .acordeo-servicos:hover .acordeo-painel.ativo:not(:hover) .acordeo-conteudo p {
        opacity:	0;
        transform:	translateY(10px);
    }
}

/* A foto de cada serviço vem inline (background-image, ver home.php) —
   aqui só cuidamos de posição/enquadramento e da animação de zoom. */
.acordeo-fundo {
    position:				absolute;
    background-color:		var(--cor-carvao);
    background-size:		cover;
    background-position:	center;
    transition:				transform .6s cubic-bezier(.16, 1, .3, 1);
    inset:					0;
}

.acordeo-painel:hover .acordeo-fundo,
.acordeo-painel.ativo .acordeo-fundo {
    transform:	scale(1.05);
}

.acordeo-veu {
    position:	absolute;
    background:	linear-gradient(to top, rgba(0, 0, 0, .88) 5%, rgba(0, 0, 0, .25) 65%, transparent 70%);
    inset:		0;
}

.acordeo-titulo-vertical {
    position:			     absolute;
    bottom:				     24px;
    left:				     0;
    margin-left:		     10px;
    padding:                 8px 0;
    border-radius:           0 13px 0 13px;
    font-family:		     'IBM  Plex Mono', monospace;
    font-size:			     var(--fs-rotulo);
    letter-spacing:		     .07em;
    text-transform:		     uppercase;
    white-space:		     nowrap;
    text-orientation:	     mixed;
    writing-mode:		     vertical-rl;
    color:				     #FFFFFF;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter:         blur(12px);
    transform:			     rotate(180deg);
    transition:			     opacity .3s ease;
}

.acordeo-painel:hover .acordeo-titulo-vertical,
.acordeo-painel.ativo .acordeo-titulo-vertical {
    opacity:	0;
}

.acordeo-conteudo {
    z-index:		2;
    position:		absolute;
    bottom:			0;
    left:			0;
    right:			0;
    padding:		20px 22px;
    background:		transparent;
    opacity:		0;
    transition:		opacity .4s ease, background-color .4s ease;
    pointer-events:	none;
}

.acordeo-painel.ativo .acordeo-conteudo,
.acordeo-painel:hover .acordeo-conteudo {
    /*
    border-top:					1px solid rgba(255, 255, 255, 0.15);
    background:					linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.45) 70%, transparent 100%);
    -webkit-backdrop-filter:	blur(12px);
    backdrop-filter:			blur(12px);
    */
    border-radius:				16px 16px 0 0;
    opacity:					1;
    pointer-events:				auto;
}

.acordeo-numero {
    display:		block;
    margin-bottom:	8px;
    font-family:	'IBM Plex Mono', monospace;
    font-size:		var(--fs-rotulo);
    color:			var(--cor);
    opacity:		0;
    transform:		translateY(8px);
    transition:		opacity .4s cubic-bezier(.16, 1, .3, 1) .1s, transform .4s cubic-bezier(.16, 1, .3, 1) .1s;
}

.acordeo-conteudo H3 {
    margin:			0 0 8px;
    font-family:	'Archivo';
    font-size:		var(--fs-subtitulo);
    font-weight:	600;
    color:			#FFFFFF;
    opacity:		0;
    transform:		translateY(10px);
    transition:		opacity .4s cubic-bezier(.16, 1, .3, 1) .15s, transform .4s cubic-bezier(.16, 1, .3, 1) .15s;
}

.acordeo-conteudo P {
    /* max-width:		30ch; */
    margin:			0;
    font-size:		var(--fs-corpo);
    line-height:	1.5;
    color:			rgba(255, 255, 255, .7);
    opacity:		0;
    transform:		translateY(10px);
    transition:		opacity .4s cubic-bezier(.16, 1, .3, 1) .2s, transform .4s cubic-bezier(.16, 1, .3, 1) .2s;
}

.acordeo-painel:hover .acordeo-numero,
.acordeo-painel:hover .acordeo-conteudo h3,
.acordeo-painel:hover .acordeo-conteudo p,
.acordeo-painel.ativo .acordeo-numero,
.acordeo-painel.ativo .acordeo-conteudo h3,
.acordeo-painel.ativo .acordeo-conteudo p {
    opacity:	1;
    transform:	translateY(0);
}

.acordeo-painel:focus-visible {
    outline:		2px solid var(--cor);
    outline-offset:	-2px;
}

@media (max-width: 860px) {
    .acordeo-servicos {
        flex-direction:	column;
        height:			auto;
    }

    .acordeo-painel {
        flex:	none;
        height:	64px;
    }

    .acordeo-painel:hover,
    .acordeo-painel:focus-visible,
    .acordeo-painel.ativo {
        flex:	none;
        height:	500px;
    }

    .acordeo-titulo-vertical {
        z-index:			     4;
        position:			     relative;
        display:			     flex;
        align-items:		     center;
        bottom:				     auto;
        left:				     auto;
        height:				     64px;
        margin-left:		     0;
        padding:			     0 14px;
        border-radius:           0 13px 0 13px;
        font-family:		     'IBM Plex Mono', monospace;
        font-size:			     var(--fs-rotulo);
        font-weight:		     600;
        line-height:		     1.25;
        letter-spacing:		     0.02em;
        white-space:		     normal;
        text-orientation:	     initial;
        writing-mode:		     horizontal-tb;
        color:				     #FFFFFF;
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter:         blur(12px);
        opacity:			     1;
        transform:			     none;
    }

    .acordeo-painel.ativo .acordeo-titulo-vertical,
    .acordeo-painel:hover .acordeo-titulo-vertical {
        display:	none;
        opacity:	0;
    }
}


/* ---- Diferenciais (cena 04) — carrossel 3D "coverflow": o item central
   fica de frente, os vizinhos inclinam para trás em perspectiva. Clique
   nos cards ou nas setas para navegar (ver iniciarCoverflowDiferenciais
   em site.js). ---- */
.coverflow-secao {
    overflow:		hidden;
    padding:		24px 0 16px;
    perspective:	1200px;
}

/* transform-style:preserve-3d de volta, pra manter a inclinação com
   profundidade de verdade entre os cards. Com preserve-3d, quem decide
   quem fica na frente é a posição real no eixo Z (não o z-index) — por
   isso o translateZ no JS (iniciarCoverflowDiferenciais) empurra os
   vizinhos pra trás de propósito, garantindo que o card ativo, sempre
   com o maior Z, fique por cima mesmo na ponta do carrossel. */
.coverflow-trilha {
    position:			relative;
    display:			flex;
    justify-content:	center;
    align-items:		center;
    height:				clamp(420px, 48vw, 520px);
    transform-style:	preserve-3d;
}

.coverflow-item {
    position:                   absolute;
    display:                    flex;
    flex-direction:             column;
    width:                      clamp(220px, 26vw, 300px);
    height:                     clamp(380px, 44vw, 530px);
    padding:                    20px;
    border:                     1px solid var(--cor-linha);
    border-radius:              20px;
    box-shadow:                 0 8px 24px rgba(0, 0, 0, 0.4);
    background:                 var(--cor-fundo-elevado);
    -webkit-backface-visibility: hidden;
    backface-visibility:        hidden;
    transition:                 transform .6s cubic-bezier(.16, 1, .3, 1), opacity .6s cubic-bezier(.16, 1, .3, 1), border-color .3s;
    cursor:                     pointer;
}

.coverflow-item.ativo {
    border-color:	var(--cor);
    box-shadow:		var(--brilho);
}

/* aspect-ratio 1/1 porque o arquivo de origem é quadrado — assim a caixa
   sempre bate com a proporção da imagem, e ela aparece inteira (altura e
   largura) sem cortar nada nem esticar. */
.coverflow-item-imagem {
    aspect-ratio:	1 / 1;
    width:			70%;
    object-fit:		cover;
    margin:         0 auto;
    border-radius:	12px;
}

.coverflow-item H3 {
    margin:		0 0 6px;
    font-size:	var(--fs-subtitulo);
}

.coverflow-item P {
    margin:		0;
    font-size:	var(--fs-corpo);
    color:		var(--cor-texto-dim);
}

.coverflow-nav {
    display:			flex;
    justify-content:	center;
    gap:				12px;
    margin-top:			16px;
}

.coverflow-seta {
    width:			40px;
    height:			40px;
    padding-bottom:	5px;
    border:			1px solid var(--cor-linha-forte);
    border-radius:	50%;
    font-size:		var(--fs-corpo);
    color:			var(--cor-texto);
    background:		transparent;
    transition:		background .2s, border-color .2s;
    cursor:			pointer;
}

.coverflow-seta:hover {
    border-color:	var(--cor);
    background:		var(--cor-fundo-elevado);
}

@media (max-width: 1024px), (pointer: coarse) {
    .coverflow-item {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    }
}

@media (max-width: 768px) {
    .coverflow-trilha {
        height:	clamp(470px, 120vw, 540px);
    }

    .coverflow-item {
        width:		clamp(260px, 78vw, 320px);
        height:		clamp(480px, 118vw, 550px);
        padding:	18px;
    }

    .coverflow-item-imagem {
        margin-bottom:	12px;
    }
}


/* ---- Método (cena 05) ---- */
.trilha-metodo {
    position:		relative;
    padding-left:	32px;
}

/* Sem viewBox de propósito: width/height ficam em pixels "crus", batendo
   1:1 com as coordenadas que o JS lê do DOM (offsetTop de cada etapa) —
   overflow:visible pra as bolinhas maiores não cortarem na borda do SVG. */
.trilha-metodo-svg {
    overflow:	visible;
    position:	absolute;
    top:		0;
    left:		-1px;
    width:		2px;
    height:		100%;
}

/* Brilho neon sutil no traço — camadas de drop-shadow na mesma cor do
   traço, do jeito mais próximo (fill/stroke não aceita box-shadow). A
   transição no stroke-dashoffset faz o traço "desenhar" devagar entre uma
   etapa alcançada e a próxima (ver atualizarProgresso em site.js), em vez
   de saltar instantaneamente até lá. */
.trilha-metodo-linha {
    fill:           none;
    stroke:         var(--cor-trilho-linha);
    stroke-linecap: round;
    stroke-width:   4;
    filter:         drop-shadow(0 0 4px rgba(193, 11, 187, .6));
}

/* Bolinha maior e com o fundo translúcido — o traço fica visível por
   baixo dela, com só um contorno pra manter a forma legível. */
.trilha-metodo-ponto {
    fill:			var(--cor-trilho-ponto);
    fill-opacity:	.45;
    stroke:			var(--cor-trilho-ponto);
    stroke-width:	1.5;
}

.etapa {
    position:		relative;
    padding-bottom:	40px;
    opacity:		.4;
    transition:		opacity .6s ease;
}

.etapa.alcancada {
    opacity:	1;
}

.etapa:last-child {
    padding-bottom:	0;
}

.etapa H3 {
    margin:			0 0 6px;
    font-family:	'Archivo';
    font-size:		var(--fs-subtitulo);
    font-weight:	600;
}

.etapa P {
    max-width:	56ch;
    margin:		0;
    font-size:	var(--fs-corpo);
    color:		var(--cor-texto-dim);
}

@media (max-width: 640px) {
    .trilha-metodo {
        padding-left:	20px;
    }
}


/* ---- Sticky Card Stack — usado pelos pilares de tecnologia (cena 08):
   cada card fica preso na tela (position: sticky) enquanto o próximo
   desliza por cima, empilhando um sobre o outro. O top/z-index crescente
   de cada card vem inline (via PHP), pra funcionar com qualquer
   quantidade de itens sem precisar de uma regra :nth-child. O leve
   encolhimento do card coberto é o único pedaço que precisa de JS (ver
   iniciarPilhaCartoes em site.js, uma instância por pilha, via
   [data-pilha-cartoes]) — o empilhamento em si é só CSS. (Os setores
   atendidos, cena 06, usam outro efeito — ver "Horizontal Scroll
   Hijack" mais abaixo.) ---- */

.pilha-tecnologia {
    display:        flex;
    flex-direction: column;
    gap:            28px;
    width:          70vw;
    margin:         0 auto;
    padding-bottom: 40px;
}

@media (max-width: 600px) {
    .pilha-tecnologia {
        width: auto;
    }
}

/* Existe só pra dar "corpo" depois do último card — testado e confirmado:
   um position:sticky sem NENHUM elemento depois dele no fluxo nunca trava
   (nem com padding-bottom gigante no container; precisa ser um elemento
   de verdade). Os cards do meio ganham essa folga naturalmente do card
   seguinte; o último não tem um próximo card, então esse espaçador faz
   esse papel sozinho. */
.pilha-tecnologia-espaco {
    height:	clamp(420px, 50vh, 600px);
}

/* position: sticky fica só neste elemento, sem nenhum transform aplicado
   a ele diretamente — um transform (mesmo scale/translate) desloca o que
   o getBoundingClientRect() reporta, e o JS (iniciarPilhaCartoes) depende
   de medir a posição exata pra saber quando o card travou no topo. */
/* display:flex aqui (além do .cartao-pilha-interior logo abaixo) é o que
   faz o miolo esticar 100% da altura do card sem precisar de height:100%
   — um filho único de um flex container já estica pra cobrir a altura
   inteira sozinho (align-items:stretch é o padrão), sem depender de
   porcentagem de altura, que não funciona aqui porque o card só tem
   min-height, não uma altura fixa. */
.cartao-pilha {
    overflow:		hidden;
    position:		sticky;
    display:		flex;
    min-height:		280px;
    border:			1px solid var(--cor-linha-cartao-pilha);
    border-radius:	24px;
    box-shadow:		var(--sombra-cartao-pilha);
    background:		var(--cor-fundo-elevado);
    transition:		background-color .3s ease, box-shadow .3s ease;
}

/* .travado vai em TODO card que já grudou no topo em algum momento (o
   card em foco e todos os que vieram antes dele) — uma vez que um card
   trava, ele fica sem sombra pra sempre, mesmo depois de ser coberto
   pelo próximo. Só quem ainda não travou (esperando lá embaixo) mantém
   a sombra padrão. Ver iniciarPilhaCartoes em site.js. */
.cartao-pilha.travado {
    box-shadow:	none;
}

/* .em-foco é só o card mais recente a travar (o que está "por cima" no
   momento) — ganha o fundo destacado; os travados mais antigos ficam só
   sem sombra, com o fundo normal. */
.cartao-pilha.em-foco,
.cartao-pilha.em-foco P {
    color:      black;
    background: #F8E3F7;
    background: #EAADE8;
}

.cartao-pilha-interior {
    display:		flex;
    flex:			1;
    align-items:	stretch;
    min-width:		0;
}

.cartao-pilha--invertido .cartao-pilha-interior {
    flex-direction:	row-reverse;
}

/* Sem padding aqui de propósito — a imagem encosta nas bordas do card
   (topo, base e lado externo); só o texto tem respiro (.cartao-pilha-texto). */
.cartao-pilha-imagem {
    flex-shrink:	0;
    align-self:		stretch;
    aspect-ratio:	16 / 9;
    width:			45%;
    height:			auto;
    max-width:		420px;
    object-fit:		cover;
}

.cartao-pilha-texto {
    padding:	clamp(28px, 4vw, 48px);
}

.cartao-pilha-texto H3 {
    margin:			0 0 12px;
    font-family:	'Archivo';
    font-size:		var(--fs-subtitulo);
    font-weight:	600;
}

.cartao-pilha-texto p {
    max-width:	55ch;
    margin:		0;
    color:		var(--cor-texto-dim);
}

@media (max-width: 720px) {
    .cartao-pilha-interior,
    .cartao-pilha--invertido .cartao-pilha-interior {
        flex-direction:	column;
    }

    .cartao-pilha-imagem {
        width:		100%;
        max-width:	none;
    }
}


/* ---- Setores atendidos (cena 06) — Horizontal Scroll Hijack: a seção
   fica presa na tela (.h-scroll-sticky, position: sticky) enquanto a
   rolagem vertical empurra os cards da direita pra esquerda; só quando o
   último termina de passar a página volta a descer normalmente (ver
   iniciarScrollHorizontal em site.js — é ele quem calcula a altura de
   .h-scroll-pino, pra bater exatamente com a distância que a trilha
   precisa percorrer). ---- */
.h-scroll-pino {
    position:	relative;
}

/* overflow:hidden fica só aqui, no próprio elemento sticky — não em
   nenhum ancestral dele (nem .h-scroll-pino, nem a section): overflow
   diferente de visible em QUALQUER ancestral quebra o position:sticky
   (mesma pegadinha já corrigida na seção Tecnologia). */
.h-scroll-sticky {
    overflow:			hidden;
    position:			sticky;
    display:			flex;
    flex-direction:		column;
    /* flex-start (em vez de center) — com a caixa presa ocupando a tela
       inteira, centralizar deixava um vão grande entre o título (que fica
       fora da área presa, logo acima) e o topo dos cards. O padding-top
       só garante que os cards não fiquem embaixo do menu fixo (que termina
       em ~54px de altura). */
    justify-content:	flex-start;
    top:				0;
    height:				100dvh;
    padding-top:		64px;
}

.h-scroll-trilha {
    display:		flex;
    align-items:	center;
    gap:			28px;
    padding-left:	clamp(20px, 5vw, 48px);
    will-change:	transform;
}

.h-scroll-trilha .h-card {
    width: clamp(470px, 65vh, 670px);
}

.h-scroll-trilha .h-card-conteudo H3 {
    max-width: 70%;
}

@media (max-width: 720px) {
    .h-scroll-trilha .h-card {
        width: 87vw;
    }
}

/* Espaçador de verdade (ver .h-scroll-espaco em home.php), não
   padding-right/margin-right — o mesmo problema já resolvido em
   .pilha-tecnologia-espaco: nesse container com overflow:visible, folga
   sem conteúdo no fim do flex nem sempre entra no scrollWidth, que é o
   que iniciarScrollHorizontal usa pra calcular até onde rolar (ver
   site.js) — só um elemento de verdade garante a medida certa. */
.h-scroll-espaco {
    display:     block;
    flex-shrink: 0;
    width:       clamp(20px, 5vw, 48px);
    height:      1px;
    margin-left: -28px;
}

.h-card {
    overflow:				hidden;
    position:				relative;
    flex-shrink:			0;
    width:					clamp(300px, 38vw, 480px);
    height:					clamp(520px, 70vh, 720px);
    border:					1px solid var(--cor-linha-cartao-pilha);
    border-radius:			24px;
    box-shadow:				var(--sombra-cartao-pilha);
    background-color:		var(--cor-carvao);
    background-size:		cover;
    background-position:	center;
}

/* Mesmo degradê de legibilidade já usado nos cards do acordeão de
   Serviços (ver .acordeo-veu) — texto sempre claro, não importa o tema. */
.h-card-veu {
    position:	absolute;
    background:	linear-gradient(to top, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .3) 45%, transparent 70%);
    inset:		0;
}

.h-card-conteudo {
    z-index:	1;
    position:	absolute;
    bottom:		0;
    left:		0;
    right:		0;
    padding:	clamp(24px, 3vw, 36px);
}

.h-card-numero {
    display:		block;
    margin-bottom:	10px;
    font-family:	'IBM Plex Mono', monospace;
    font-size:		var(--fs-rotulo);
    letter-spacing:	.06em;
    color:			var(--cor);
}

.h-card-conteudo H3 {
    margin:			0 0 8px;
    font-family:	'Archivo';
    font-size:		var(--fs-subtitulo);
    font-weight:	600;
    text-wrap:      balance;
    color:			#FFFFFF;
}

.h-card-conteudo P {
    /* max-width:		38ch; */
    margin:			0;
    font-size:		var(--fs-corpo);
    line-height:	1.5;
    color:			rgba(255, 255, 255, .72);
}

/* Barra fina de progresso — mesma linguagem visual da barra de leitura
   fixa no topo da página (ver .progresso-trilho/.progresso-preenchimento). */
.h-progresso {
    display:			flex;
    justify-content:	center;
    align-items:		center;
    gap:				12px;
    padding:			24px clamp(20px, 5vw, 48px) 0;
}

.h-progresso-trilho {
    overflow:		hidden;
    width:			140px;
    height:			2px;
    border-radius:	1px;
    background:		var(--cor-linha-forte);
}

.h-progresso-preenchimento {
    width:		0%;
    height:		100%;
    background:	var(--cor);
}

.h-progresso-rotulo {
    font-size:		var(--fs-rotulo);
    letter-spacing:	.04em;
    color:			var(--cor-texto-dim);
}

@media (max-width: 720px) {
    .h-card {
        width:	clamp(240px, 78vw, 340px);
        height:	clamp(360px, 56vh, 460px);
    }
}


/* ---- Estado "em construção" (portfólio / números / depoimentos) ----
   Usado nas seções que ainda não têm dado real do cliente — em vez de
   inventar case, estatística ou depoimento falso, assume-se a fase
   inicial do estúdio como parte da narrativa (poucos clientes, alto padrão). */
.estado-convite {
    padding:		44px clamp(24px, 4vw, 56px);
    border:			1px dashed var(--cor-linha-forte);
    border-radius:	6px;
    text-align:		left;
    background:		var(--cor-fundo-elevado);
}

.estado-convite H3 {
    max-width:		24ch;
    margin-bottom:	14px;
    font-family:	'Fraunces';
    font-size:		var(--fs-titulo-destaque);
}

.estado-convite p {
    max-width:	58ch;
    margin:		0 0 24px;
    color:		var(--cor-texto-dim);
}


/* Fundo animado (ilha React, ver /react/src/fundo-tecnologia) — painel
   sempre escuro por trás do conteúdo, independente do tema claro/escuro
   do site (mesmo tratamento que a cortina da cena 02 já dá pro texto
   dela: cor fixa, não a variável de tema), por isso os textos da seção
   ficam com cor clara fixa logo abaixo. */
.secao-tecnologia {
    position:	relative;
}

/* O overflow:hidden que esconde o excesso do desfoque do fundo animado
   (ver GradienteFluido.jsx) fica isolado aqui, só em volta da própria
   camada de fundo — não na section, que também é ancestral da pilha de
   cards logo abaixo (ver .pilha-tecnologia): overflow diferente de
   visible em QUALQUER ancestral quebra o position:sticky dos cards. */
.secao-tecnologia-fundo {
    z-index:	0;
    overflow:	hidden;
    position:	absolute;
    inset:		0;
}

.secao-tecnologia .container {
    z-index:	1;
    position:	relative;
}

/* Restrito ao cabeçalho da seção (rótulo/título/parágrafos de
   introdução) — não pode alcançar o texto dos cards da pilha logo
   abaixo (ver .cartao-pilha-texto), que precisa continuar com a mesma
   cor de sempre (a mesma pilha da cena 06), não branca fixa. */
.em-vista .acordeo-numero,
.secao-h-scroll .h-card-numero,
.secao-tecnologia .secao-cabecalho .rotulo,
.secao-tecnologia .secao-cabecalho h2,
.secao-tecnologia .secao-cabecalho p,
.rodape .rotulo,
.rodape h2,
.rodape p {
    color:	#FFFFFF;
}

.secao-tecnologia .secao-cabecalho p.texto-dim {
    color:	rgba(255, 255, 255, 1);
}

.fundo-tecnologia-react {
    /* ---- Controles do fundo animado da seção Tecnologia ----
       Editar só estas variáveis já muda cor, velocidade, quantidade de
       manchas e suavização — não precisa recompilar nada, é só salvar e
       atualizar a página (o componente React lê elas ao vivo, ver
       FundoTecnologia.jsx). Blur e escala do canvas são aplicados pelo
       próprio componente (ver GradienteFluido.jsx), não ficam mais aqui
       no CSS. */
    --ft-cor-1:			#F752F3;
    /* rosa */
    --ft-cor-2:			#8B2FC9;
    /* roxo */
    --ft-cor-base:		#2A0C40;
    /* fundo escuro por trás das duas cores acima */
    --ft-velocidade:	10;
    /* 20 = padrão; escala ampla de propósito — de .1 (quase parado) a 100 (bem rápido), pra cada aumento ser gradual */
    --ft-manchas:		4;
    /* quantidade de manchas de cor derivando pela tela */
    --ft-blur:			70;
    z-index:			0;
    /* em pixels — quanto maior, mais suave/borrado o degradê */
    position:			absolute;
    /* fica visível mesmo antes do React montar (ou se o script falhar ao
       carregar) — o canvas, quando monta, desenha por cima disso, com as
       mesmas cores das variáveis acima (não usam --cor, então não mudam
       com o tema claro/escuro do site). Cor e imagem em propriedades
       separadas (não no shorthand "background") porque cor só pode
       entrar junto de várias camadas na ÚLTIMA delas. */
    background-color:	var(--ft-cor-base);
    background-image:	radial-gradient(ellipse at 30% 30%, color-mix(in srgb, var(--ft-cor-1) 22%, transparent), transparent 60%),
                      radial-gradient(ellipse at 75% 70%, color-mix(in srgb, var(--ft-cor-2) 18%, transparent), transparent 55%);
    inset:				0;
    pointer-events:		none;
}

.grade-compromissos {
    display:				grid;
    grid-template-columns:	repeat(auto-fit, minmax(220px, 1fr));
    gap:					24px;
    margin-top:				12px;
}

.compromisso {
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
    position:       relative;
    padding:        24px;
    border:         1px solid var(--cor-linha);
    border-radius:  6px;
}

/* Efeito "Spotlight Border" — brilho que acompanha o cursor por baixo da
   borda do card, só visível no hover (ver iniciarBrilhoBordaCompromissos
   em site.js, que atualiza --mx/--my conforme o mouse anda pela grade). */
.compromisso::before {
    position:       absolute;
    content:        '';
    border-radius:  inherit;
    background:     radial-gradient(circle 180px at var(--mx, 50%) var(--my, 50%), var(--brilho-compromisso), transparent 70%);
    opacity:        0;
    transition:     opacity .3s ease;
    inset:          -1px;
    pointer-events: none;
}

.compromisso:hover::before {
    opacity: 1;
}

.compromisso .valor {
    display:     block;
    overflow:    hidden;
    height:      auto;
    font-family: 'Fraunces', Georgia, serif;
    font-size:   var(--fs-titulo-secao);
    font-weight: 800;
    line-height: 1.3;
    color:       var(--cor);
}

.compromisso .valor .linha-scramble {
    display:     block;
    white-space: nowrap;
}

.compromisso .valor .char {
    display:              inline-block;
    font-family:          inherit;
    font-size:            inherit;
    font-weight:          inherit;
    line-height:          inherit;
    font-variant-numeric: tabular-nums;
    transition:           color .1s ease;
}

.compromisso .valor .char.resolved {
    font-size: inherit;
    color:     var(--cor);
}

.compromisso .valor .char.scrambling {
    font-size: inherit;
    opacity:   0.55;
    color:     var(--cor-texto-dim);
}

.compromisso .legenda {
    margin-top: 12px;
    font-size:  var(--fs-corpo);
    text-align: justify;
    color:      var(--cor-texto-dim);
}


/* ---- Equipe (cena 11) ---- */
.equipe-grade {
    display:				grid;
    grid-template-columns:	repeat(auto-fit, minmax(180px, 1fr));
    gap:					28px;
    margin-top:				8px;
}

.membro-foto {
    display:			flex;
    justify-content:	center;
    align-items:		center;
    aspect-ratio:		4 / 5;
    padding:			12px;
    border-radius:		6px;
    font-family:		'IBM Plex Mono', monospace;
    font-size:			var(--fs-rotulo);
    text-align:			center;
    color:				var(--cor-texto-dim);
    background:			var(--cor-fundo-elevado-2);
    filter:				grayscale(1);
    transition:			filter .35s ease;
}

.membro:hover .membro-foto {
    filter:	grayscale(0);
}


/* ---- CTA final (cena 12) ---- */
.secao-cta-final {
    overflow:	hidden;
    position:	relative;
    text-align:	left;
}

.secao-cta-final .container {
    z-index:	1;
    position:	relative;
}

.cta-fundo-glow {
    z-index:		0;
    position:		absolute;
    background:		var(--cta-glow);
    inset:			-20% -10%;
    pointer-events:	none;
}


/* ---- Rodapé — funde a cena "Próximo passo" (ver $rodape_cta em
   partials/footer.php) com o rodapé de verdade, formando uma única cena
   final. No desktop ela fica position:fixed por baixo de #conteudo-
   principal (o "page-wrapper"), que ganha uma sobra de scroll do tamanho
   exato dela (margin-bottom) — é rolando por essa sobra que a cena vai
   sendo revelada aos poucos, como uma cortina subindo (mesmo princípio
   do rodapé do projeto Kimtel, usado aqui como referência). ---- */
#conteudo-principal {
    z-index:	2;
    position:	relative;
    background:	var(--cor-fundo);
    isolation:	isolate;
}

@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
    #conteudo-principal {
        margin-bottom:	100dvh;
        box-shadow:		0 20px 60px rgba(0, 0, 0, .5);
    }

    .rodape {
        z-index:        1;
        visibility:     hidden;
        position:       fixed;
        bottom:         0;
        left:           0;
        width:          100%;
        height:         100dvh;
        opacity:        0;
        transition:     opacity .3s ease, visibility .3s ease;
        pointer-events: none;
        contain:        paint;
    }

    .rodape.visivel {
        visibility:     visible;
        opacity:        1;
        pointer-events: auto;
    }
}

.rodape {
    overflow:			hidden;
    display:			flex;
    flex-direction:		column;
    justify-content:	flex-end;
    gap:				0;
    padding:			48px 0;
}

/* Fundo fotográfico (assets/img/rodape/rodape.jpeg) com zoom lento e
   contínuo — mesma ideia do rodapé do Kimtel, só que mais sutil. */
.rodape-fundo {
    z-index:	0;
    position:	absolute;
    inset:		0;
}

.rodape-fundo img {
    width:		100%;
    height:		100%;
    object-fit:	cover;
    /* "alternate" fazia o ciclo completo (ida + volta) levar o dobro da
       duração declarada — 24s pra entrar, mais 24s pra voltar, 48s ao
       todo, bem mais lento que o do Kimtel. Com 0%/50%/100% num "infinite"
       simples, os 20s já são o ciclo inteiro (mesmo tempo do Kimtel). */
    animation:	rodape-zoom 20s ease-in-out infinite;
}

.rodape .margem_inferior {
    display: none;
}

@media (max-width: 860px) {
    .rodape .margem_inferior {
        display: block;
        min-height: 0;
    }
}

@keyframes rodape-zoom {
    0%   {
    transform:	scale(1); }
    50%  {
    transform:	scale(1.08); }
    100% {
    transform:	scale(1); }
}

/* Véu escurecendo a foto — a cena final rompe de propósito com o tema
   claro/escuro do site (texto sempre claro sobre a foto, como no rodapé
   do Kimtel), pra manter o contraste garantido não importa o tema
   escolhido pelo visitante. */
.rodape-veu {
    z-index:	1;
    position:	absolute;
    /* background: linear-gradient(180deg, rgba(10, 8, 14, .5), rgba(10, 8, 14, .84)); */
    inset:		0;
}

.rodape .container {
    z-index:	2;
    position:	relative;
}

/* "Liquid Glass" — mesma receita do menu superior (ver .menu-liquido) —
   compartilhada por todo bloco de conteúdo desta cena. */
.rodape-vidro {
    border:						1px solid rgba(255, 255, 255, .14);
    border-radius:				13px 0 13px 0;
    box-shadow:					0 8px 30px rgba(0, 0, 0, .35);
    color:						#FFFFFF;
    background:					rgba(20, 16, 26, .65);
    -webkit-backdrop-filter:	blur(20px) saturate(180%);
    backdrop-filter:			blur(20px) saturate(180%);
}

.rodape-cta {
    margin-bottom:	28px;
    padding:		clamp(28px, 4vw, 44px) clamp(24px, 4vw, 40px);
}

.rodape-cta .texto-lead {
    color:	rgba(255, 255, 255, .78);
}

.rodape-cta .botao--fantasma {
    border-color:	rgba(255, 255, 255, .35);
    color:			#FFFFFF;
}

.rodape-cta .botao--fantasma:hover {
    border-color:	var(--cor);
    color:			var(--cor);
}

.rodape-cta .botao--primario {
    color:	#FFFFFF;
}

/* Só a última linha do antigo rodapé sobrevive — nome da marca + CNPJ,
   link para a política de privacidade e a assinatura "Feito com direção
   própria". A borda no topo é a "linha separadora" que ficava acima
   dela, preservada mesmo sem o resto do rodapé antigo por cima. */
.rodape-base {
    display:			flex;
    flex-wrap:			wrap;
    justify-content:	space-between;
    align-items:		center;
    gap:				10px 24px;
    padding:			18px clamp(24px, 4vw, 40px);
    border-top:			1px solid rgba(255, 255, 255, .18);
    font-size:			var(--fs-corpo);
    color:				rgba(255, 255, 255, .7);
}

.rodape-base a {
    text-decoration:		underline;
    text-underline-offset:	3px;
    color:					#FFFFFF;
    transition:				color .15s ease;
}

.rodape-base a:hover {
    color:	var(--cor);
}

@media (max-width: 1024px), (pointer: coarse), (hover: none) {
    .rodape {
        z-index:        auto;
        visibility:     visible;
        position:       relative;
        width:          100%;
        height:         auto;
        min-height:     100dvh;
        padding:        64px 0 40px;
        opacity:        1;
        pointer-events: auto;
    }

    .rodape .margem_inferior {
        display:    block;
        min-height: 0;
    }
}

@media (max-width: 520px) {
    .rodape-base {
        flex-direction:	column;
        align-items:	flex-start;
    }
}


/* ==========================================================================
   Páginas internas — Portfólio / Sobre / Contato
   ========================================================================== */
.pagina-topo {
    padding:		clamp(140px, 18vw, 200px) 0 60px;
    border-bottom:	1px solid var(--cor-linha-forte);
}

/* Portfólio: grade de projetos com filtro por setor */
.filtro-setores {
    display:	flex;
    flex-wrap:	wrap;
    gap:		10px;
    margin:		32px 0 8px;
}

.filtro-botao {
    min-height:		40px;
    padding:		9px 16px;
    border:			1px solid var(--cor-linha-forte);
    border-radius:	20px;
    font-family:	'IBM Plex Mono', monospace;
    font-size:		var(--fs-rotulo);
    letter-spacing:	.04em;
    text-transform:	uppercase;
    color:			var(--cor-texto-dim);
    background:		none;
    cursor:			pointer;
}

.filtro-botao[aria-pressed="true"] {
    border-color:	var(--cor);
    color:			var(--cor);
}

.grade-portfolio {
    display:				grid;
    grid-template-columns:	repeat(auto-fit, minmax(300px, 1fr));
    gap:					28px;
    margin-top:				32px;
}

.projeto-card {
    overflow:		hidden;
    border:			1px solid var(--cor-linha);
    border-radius:	6px;
    background:		var(--cor-fundo-elevado);
}

.projeto-capa {
    display:			flex;
    justify-content:	center;
    align-items:		center;
    aspect-ratio:		16 / 10;
    font-family:		'IBM Plex Mono', monospace;
    font-size:			var(--fs-rotulo);
    color:				var(--cor-texto-dim);
    background:			linear-gradient(135deg, var(--cor-fundo-elevado-2), var(--cor-fundo));
}

.projeto-corpo {
    padding:	22px 24px;
}

.projeto-setor {
    font-family:	'IBM Plex Mono', monospace;
    font-size:		var(--fs-rotulo);
    letter-spacing:	.08em;
    text-transform:	uppercase;
    color:			var(--cor-roxo);
}

.projeto-corpo H3 {
    margin:			8px 0;
    font-family:	'Archivo';
    font-size:		var(--fs-subtitulo);
    font-weight:	600;
}

.projeto-corpo P {
    margin:		0;
    font-size:	var(--fs-corpo);
    color:		var(--cor-texto-dim);
}

/* Sobre: linha do tempo */
.linha-tempo {
    display:		grid;
    gap:			0;
    padding-left:	32px;
    border-left:	1px solid var(--cor-linha-forte);
}

.marco {
    position:		relative;
    padding-bottom:	36px;
}

.marco:last-child {
    padding-bottom:	0;
}

.marco .ano {
    font-family:	'IBM Plex Mono', monospace;
    font-size:		var(--fs-rotulo);
    color:			var(--cor);
}

.marco H3 {
    margin:			6px 0;
    font-family:	'Archivo';
    font-size:		var(--fs-subtitulo);
    font-weight:	600;
}

.marco p {
    max-width:	56ch;
    margin:		0;
    color:		var(--cor-texto-dim);
}

/* Contato: formulário de briefing */
.layout-contato {
    display:				grid;
    grid-template-columns:	1.1fr .9fr;
    gap:					64px;
}

.campo {
    display:		grid;
    gap:			8px;
    margin-bottom:	22px;
}

.campo LABEL {
    font-size:	var(--fs-corpo);
    color:		var(--cor-texto-dim);
}

.campo LABEL .obrigatorio {
    color:	var(--cor);
}

.campo INPUT,
.campo SELECT,
.campo TEXTAREA {
    min-height:		44px;
    padding:		13px 14px;
    border:			1px solid var(--cor-linha-forte);
    border-radius:	4px;
    font-family:	'Archivo';
    font-size:		var(--fs-corpo);
    color:			var(--cor-texto);
    background:		var(--cor-fundo-elevado);
}

.campo TEXTAREA {
    resize:		vertical;
    min-height:	140px;
}

.campo INPUT:focus,
.campo SELECT:focus,
.campo TEXTAREA:focus {
    border-color:	var(--cor);
}

.campo .erro-campo {
    font-size:	var(--fs-rotulo);
    color:		var(--cor-erro);
}

.aviso-formulario {
    margin-bottom:	24px;
    padding:		16px 18px;
    border-radius:	6px;
    font-size:		var(--fs-corpo);
}

.aviso-formulario--sucesso {
    border:		1px solid color-mix(in srgb, var(--cor) 40%, transparent);
    color:		var(--cor-texto);
    background:	color-mix(in srgb, var(--cor) 12%, transparent);
}

.aviso-formulario--erro {
    border:		1px solid color-mix(in srgb, var(--cor-erro) 45%, transparent);
    color:		var(--cor-texto);
    background:	color-mix(in srgb, var(--cor-erro) 12%, transparent);
}

.contato-info {
    display:		grid;
    align-content:	start;
    gap:			28px;
}

.contato-info-item .rotulo {
    margin-bottom:	6px;
}

.contato-info-item P,
.contato-info-item A {
    margin:				0;
    font-size:			var(--fs-corpo);
    text-decoration:	none;
}

@media (max-width: 900px) {
    .layout-contato {
        grid-template-columns:	1fr;
        gap:					40px;
    }
}


/* ==========================================================================
   Barra de política de privacidade — fixa no rodapé, some ao clicar em
   "Continuar" e não volta (ver iniciarBarraPrivacidade em site.js).
   ========================================================================== */
.barra-privacidade {
    z-index:		60;
    position:		fixed;
    bottom:			0;
    left:			0;
    right:			0;
    opacity:		0;
    transform:		translateY(100%);
    transition:		transform .4s ease, opacity .4s ease;
    pointer-events:	none;
}

.barra-privacidade.em-vista {
    opacity:		1;
    transform:		translateY(0);
    pointer-events:	auto;
}

.barra-privacidade-linha {
    display:			flex;
    flex-wrap:			wrap;
    justify-content:	space-between;
    align-items:		center;
    gap:				20px;
    max-width:			1240px;
    margin:				0 auto;
    padding:			20px clamp(20px, 5vw, 48px);
    border-top:			1px solid var(--cor-linha-forte);
    box-shadow:			var(--sombra-elevacao);
    background:			var(--cor-fundo-elevado);
}

.barra-privacidade P {
    /* max-width: 70ch; */
    max-width:	85%;
    margin:		0;
    font-size:	var(--fs-corpo);
    color:		var(--cor-texto-dim);
}

.barra-privacidade a {
    color:	var(--cor);
}

@media (max-width: 860px) {
    .barra-privacidade-linha {
        /* padding: 18px clamp(20px, 5vw, 48px); */
        padding:	18px 0;
    }
}

/* ==========================================================================
   Barra inferior — ativa em celulares e tablets (max-width: 860px),
   funcionando exatamente como no projeto da Kimtel.
   Contém: 1) Logotipo (sem texto), 2) Menu, 3) Iniciar Projeto (WhatsApp),
   4) Cor do Site, 5) Início.
   ========================================================================== */
.barra-inferior {
    display:	none;
}

@media (max-width: 860px) {
    /* Oculta totalmente a barra de menu superior quando a barra inferior está ativa */
    .cabecalho {
        display:	none !important;
    }

    .barra-privacidade {
        bottom:	var(--altura-barra-inferior);
    }

    .barra-inferior {
        z-index:			60;
        position:			fixed;
        display:			flex;
        justify-content:	space-evenly;
        align-items:		center;
        gap:				6px;
        bottom:				0;
        left:				0;
        right:				0;
        height:				var(--altura-barra-inferior);
        padding:			0 10px;
        border-top:			1px solid rgba(255, 255, 255, .12);
        box-sizing:			border-box;
        box-shadow:			0 -2px 10px rgba(0, 0, 0, .3);
        background:			#EAADE8;
    }

    .barra-inferior-marca {
        display:			flex;
        flex:				0 0 auto;
        justify-content:	center;
        align-items:		center;
        padding:			0 4px;
        text-decoration:	none;
    }

    .barra-inferior-marca IMG {
        display:	block;
        width:		auto;
        height:		26px;
    }

    .barra-inferior-item {
        display:			flex;
        flex-direction:		row;
        justify-content:	center;
        align-items:		center;
        gap:				6px;
        height:				100%;
        padding:			0 6px;
        border:				0;
        font-family:		'IBM Plex Mono', monospace;
        font-size:			var(--fs-rotulo);
        font-weight:        bold;
        letter-spacing:		.02em;
        text-transform:		none;
        text-decoration:	none;
        white-space:		nowrap;
        color:				rgba(0, 0, 0, .85);
        background:			none;
        transition:			color .2s ease;
        cursor:				pointer;
    }

    .barra-inferior-item I,
    .barra-inferior-item SVG {
        flex-shrink:	0;
        font-size:		var(--fs-menu-botao-inferior);
        font-weight:    bold;
    }

    .barra-inferior-item I.fa-whatsapp,
    .barra-inferior-item SVG .fa-whatsapp {
        font-size: clamp(1.5rem, 0.9rem + 0.35vw, 1.15rem);
    }

    .barra-inferior-item:hover,
    .barra-inferior-item:active {
        color:	#600C91;
    }
}

/* Modo celular: exibe apenas os ícones para um visual limpo e bem distribuído */
@media (max-width: 420px) {
    .barra-inferior-item SPAN {
        display:	none;
    }

    .barra-inferior-item {
        gap:		0;
        padding:	0 4px;
    }
}


/* ==========================================================================
   Menu suspenso — exclusivo do celular, acionado pelo botão "menu" da
   barra inferior (que também só existe lá). Mesmo padrão do painel do
   Kimtel: desliza de baixo pra cima ancorado no canto, com véu
   escurecendo o resto da tela por trás.
   ========================================================================== */
.menu-suspenso-veu,
.menu-suspenso {
    display:	none;
}

@media (max-width: 860px) {
    .menu-suspenso-veu {
        z-index:		58;
        position:		fixed;
        display:		block;
        height:			100%;
        background:		rgba(0, 0, 0, .45);
        opacity:		0;
        transition:		opacity .3s ease;
        inset:			0;
        pointer-events:	none;
    }

    .menu-suspenso-veu.em-vista {
        opacity:		1;
        pointer-events:	auto;
    }

    .menu-suspenso {
        z-index:		59;
        overflow-y:		auto;
        position:		fixed;
        display:		block;
        bottom:			var(--altura-barra-inferior);
        left:			0;
        right:			0;
        max-height:		calc(100dvh - var(--altura-barra-inferior) - 60px);
        padding-bottom: 5px;
        border-top:		1px solid rgba(255, 255, 255, .15);
        border-radius:	12px 12px 0 0;
        box-shadow:		0 -8px 30px rgba(0, 0, 0, .4);
        background:		#D55CD1;
        background:		#EAADE8;
        opacity:		0;
        transform:		translateY(100%);
        transition:		transform .35s cubic-bezier(.16, 1, .3, 1), opacity .3s ease;
        pointer-events:	none;
    }

    .menu-suspenso.em-vista {
        opacity:		1;
        transform:		translateY(0);
        pointer-events:	auto;
    }

    .menu-suspenso-fechar {
        display:			flex;
        justify-content:	flex-end;
        padding:			10px 14px 0;
        border-bottom:		1px solid rgba(0, 0, 0, .08);
    }

    .menu-suspenso-fechar button {
        padding:	6px;
        border:		0;
        color:		rgba(0, 0, 0, .7);
        background:	none;
        transition:	color .2s ease;
        cursor:		pointer;
    }

    .menu-suspenso-fechar button:hover {
        color:	var(--cor);
    }

    .menu-suspenso-item {
        display:			block;
        padding:			8px 26px;
        border-bottom:		1px solid rgba(0, 0, 0, .08);
        font-family:		'IBM Plex Mono', monospace;
        font-size:			var(--fs-rotulo);
        font-weight:        bold;
        text-decoration:	none;
        color:				rgba(0, 0, 0, .92);
        transition:			color .2s ease, background-color .2s ease;
    }

    .menu-suspenso-item:last-child {
        border-bottom:	0;
    }

    .menu-suspenso-item:hover,
    .menu-suspenso-item:active {
        color:		var(--cor);
        background:	rgba(255, 255, 255, .2);
    }

    .menu-suspenso-item--oculto {
        display:	none;
    }
}

.no_display {
    display:	none !important;
}



/* Botão Suspenso de Voltar ao Início (Desktop) */

.inicio {
    z-index:          10000 !important;
    position:         fixed !important;
    display:          flex !important;
    justify-content:  center !important;
    align-items:      center !important;
    bottom:           -5px !important;
    right:            0 !important;
    width:            40px !important;
    height:           40px !important;
    margin:           0 !important;
    padding:          0 !important;
    border-radius:    5px 5px 0 0;
    font-size:        22px !important;
    color:            rgba(255, 255, 255, 0.5) !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    cursor:           pointer !important;
}

.inicio I {
    display:    inline-block;
    transition: transform .3s ease, color .3s ease !important;
}

.inicio:focus I,
.inicio:hover I {
    color:     #fff !important;
    animation: inicio_bounce 2s infinite ease-in-out !important;
}

@keyframes inicio_bounce {
    0%, 100% { transform: translateY(0) scale(1.2); }
    20%      { transform: translateY(-8px) scale(1.2); }
    40%      { transform: translateY(0) scale(1.2); }
    60%      { transform: translateY(-4px) scale(1.2); }
    80%      { transform: translateY(0) scale(1.2); }
}

@media (max-width: 768px) {
    #inicio,
    .inicio {
        display: none !important;
    }
}



/* ---- Página de Política de Privacidade ---- */
.texto_privacidade {
    width:       100%;
    margin:      0 auto;
    font-size:   var(--fs-corpo);
    line-height: 1.7;
    color:       var(--cor-texto);
}

.texto_privacidade P,
.texto_privacidade LI,
.texto_privacidade SPAN,
.texto_privacidade A,
.texto_privacidade TD {
    font-family:     'Archivo', system-ui, sans-serif;
    font-size:       var(--fs-corpo);
    font-weight:     400;
    line-height:     1.65;
    text-align:      justify;
    text-indent:     30px;
    -ms-hyphens:     auto;
    -webkit-hyphens: auto;
    hyphens:         auto;
    color:           var(--cor-texto);
}

.pp_topico {
    margin:      32px 0 16px;
    font-family: 'Fraunces', Georgia, serif !important;
    font-size:   var(--fs-subtitulo);
    font-weight: 600 !important;
    text-indent: 0 !important;
    color:       var(--cor-rotulo) !important;
}

.pp_subtopico {
    margin:      24px 0 12px;
    font-family: 'Archivo', system-ui, sans-serif !important;
    font-size:   var(--fs-corpo);
    font-weight: 600 !important;
    text-indent: 0 !important;
    color:       var(--cor-texto) !important;
}

.pp_listagem {
    display:             block;
    margin-bottom:       30px;
    padding-left:        0;
    list-style-position: inside;
}

.pp_item {
    margin-bottom: 12px;
    line-height:   1.65;
}

.pp_item A {
    word-break: break-all;
}

.pp_texto {
    margin-bottom: 30px;
}

.pp_texto A {
    word-break:      break-all;
    text-align:      left !important;
    -webkit-hyphens: none !important;
    -ms-hyphens:     none !important;
    hyphens:         none !important;
    color:           var(--cor-rotulo);
}

.pp_texto A:hover {
    color: var(--cor);
}

.pp_url {
    font-size:   var(--fs-rotulo) !important;
    text-align:  left !important;
    text-indent: 0 !important;
    color:       var(--cor-rotulo) !important;
}

.pp_url:hover {
    color: var(--cor) !important;
}

.pp_col1 {
    width:       10em !important;
    padding:     10px 15px !important;
    border:      1px solid var(--cor-linha-forte) !important;
    font-family: 'IBM Plex Mono', monospace !important;
    font-size:   var(--fs-rotulo) !important;
    text-indent: 0 !important;
    color:       var(--cor-rotulo);
    background:  var(--cor-fundo-elevado);
}

.pp_col2 {
    width:       auto !important;
    padding:     10px 15px !important;
    border:      1px solid var(--cor-linha-forte) !important;
    text-indent: 0 !important;
    color:       var(--cor-texto);
}

.texto_privacidade TABLE {
    border-collapse: collapse;
    width:           100%;
    margin-top:      0;
    margin-bottom:   30px;
    border:          1px solid var(--cor-linha-forte);
}

.indent_0   { text-indent: 0 !important; }
.indent_30  { text-indent: 30px !important; }

.margin_bottom_3  { margin-bottom: 3px !important; }
.margin_bottom_4  { margin-bottom: 4px !important; }
.margin_bottom_5  { margin-bottom: 5px !important; }
.margin_bottom_6  { margin-bottom: 6px !important; }
.margin_bottom_15 { margin-bottom: 15px !important; }
.margin_bottom_30 { margin-bottom: 30px !important; }

.margin_left_1  { margin-left: 1px !important; }
.margin_left_7  { margin-left: 7px !important; }
.margin_left_8  { margin-left: 8px !important; }
.margin_left_14 { margin-left: 14px !important; }
.margin_left_15 { margin-left: 15px !important; }
.margin_left_30 { margin-left: 30px !important; }

.font_bold        { font-weight: bold !important; }
.align_no_hyphens { -webkit-hyphens: none !important; -ms-hyphens: none !important; hyphens: none !important; }