/* DGP Web Solutions -- estilo do portfolio.
   Um tema so, escuro, de proposito: as paginas dos projetos sao claras e
   precisam saltar do fundo. O laranja da marca vira campo inteiro (a faixa de
   "Como trabalhamos", os botoes), nao so detalhe. Sem JavaScript: a CSP do
   nginx tem script-src 'none', e todo movimento aqui e CSS. */

:root {
	--noite: #07111F;
	--painel: #0E1C30;
	--painel-2: #15294A;
	--tinta: #F2F6FB;
	--apoio: #A9B8CC;
	--linha: rgba(169, 184, 204, .16);
	--laranja: #FE7802;
	--laranja-vivo: #FF9A3D;
	--azul: #2F7BFF;
	--azul-claro: #8FB6E3;
	--no-ar: #2BD67B;
	--sobre-laranja: #07111F;

	--fonte-titulo: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
	--fonte-texto: "Public Sans", "Segoe UI", system-ui, sans-serif;

	--margem: clamp(1rem, 4vw, 3.5rem);
	--largura: 76rem;
	/* recuo lateral: margem minima, e conteudo centrado em telas largas */
	--recuo: max(var(--margem), calc((100% - var(--largura)) / 2));

	color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
	margin: 0;
	background: var(--noite);
	color: var(--tinta);
	font: 400 1.0625rem/1.6 var(--fonte-texto);
	text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--laranja-vivo); text-decoration-color: var(--laranja); }
:focus-visible { outline: 3px solid var(--laranja-vivo); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 { font-family: var(--fonte-titulo); color: var(--tinta); margin: 0; text-wrap: balance; }
img { max-width: 100%; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icone { width: 2.75rem; height: 2.75rem; padding: .62rem; border-radius: 12px; flex: none;
	fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.pular {
	position: absolute; left: var(--margem); top: -3rem; z-index: 50;
	background: var(--laranja); color: var(--sobre-laranja); padding: .5rem .9rem; font-weight: 700;
}
.pular:focus { top: .75rem; }

/* ---------- topo ---------- */
.topo {
	position: sticky; top: 0; z-index: 20;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem;
	padding: .85rem var(--recuo);
	background: rgba(7, 17, 31, .82); border-bottom: 1px solid var(--linha);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.marca {
	font: 800 1.2rem/1 var(--fonte-titulo); letter-spacing: -.01em; text-decoration: none;
	display: inline-flex; align-items: baseline; gap: .15rem;
}
.marca-ponto { width: .42em; height: .42em; border-radius: 50%; background: var(--laranja); display: inline-block; }
.topo nav { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.6rem; font-size: .95rem; }
.topo nav a { text-decoration: none; color: var(--apoio); }
.topo nav a:hover { color: var(--tinta); }
.topo nav .topo-contato {
	color: var(--sobre-laranja); background: var(--laranja); font-weight: 700;
	padding: .5rem 1rem; border-radius: 999px;
}
.topo nav .topo-contato:hover { color: var(--sobre-laranja); background: var(--laranja-vivo); }
@media (max-width: 640px) {
	.topo { gap: .75rem 1rem; }
	.topo nav a:not(.topo-contato) { display: none; }
	.topo nav .topo-contato { padding: .45rem .9rem; font-size: .9rem; }
	.so-largo { display: none; }
}

/* ---------- botoes ---------- */
.botao {
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--laranja); color: var(--sobre-laranja); font-weight: 700; text-decoration: none;
	padding: .95rem 1.6rem; border-radius: 999px; font-size: 1.05rem;
	box-shadow: 0 10px 30px -10px rgba(254, 120, 2, .7);
	transition: background .15s, transform .15s;
}
.botao:hover { color: var(--sobre-laranja); background: var(--laranja-vivo); transform: translateY(-1px); }
.botao-linha { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1px rgba(242, 246, 251, .35); }
.botao-linha:hover { background: rgba(242, 246, 251, .08); color: var(--tinta); }

/* ---------- abertura: os sites de verdade, em leque ---------- */
.abertura {
	position: relative; overflow-x: clip;
	padding: clamp(3rem, 8vw, 6.5rem) var(--recuo) clamp(3.5rem, 8vw, 6.5rem);
}
/* grade de pontos que some nas bordas */
.abertura::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background-image: radial-gradient(circle at 1px 1px, rgba(169, 184, 204, .14) 1px, transparent 0);
	background-size: 26px 26px;
	-webkit-mask-image: radial-gradient(ellipse 70% 70% at 70% 45%, #000 15%, transparent 75%);
	mask-image: radial-gradient(ellipse 70% 70% at 70% 45%, #000 15%, transparent 75%);
}
.abertura > * { position: relative; }
.com-leque { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(3rem, 6vw, 4rem); align-items: center; }
@media (min-width: 960px) { .com-leque { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); } }

.abertura h1 {
	font-size: clamp(3rem, 8vw, 6.4rem); font-weight: 800; line-height: .95; letter-spacing: -.045em;
	font-variation-settings: "opsz" 96;
}
.abertura-texto { max-width: 34rem; margin: 1.6rem 0 0; font-size: clamp(1.08rem, 1.4vw, 1.25rem); color: var(--apoio); }

.ao-vivo {
	display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1.6rem;
	padding: .4rem .9rem .4rem .75rem; border-radius: 999px;
	background: rgba(43, 214, 123, .09); box-shadow: inset 0 0 0 1px rgba(43, 214, 123, .35);
	color: #BFF5D6; font-size: .92rem; font-weight: 600;
}
.pulso { position: relative; width: .55rem; height: .55rem; border-radius: 50%; background: var(--no-ar); }
.pulso::after {
	content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--no-ar);
	animation: pulso 2.2s ease-out infinite;
}
@keyframes pulso { from { transform: scale(1); opacity: .7; } to { transform: scale(3.2); opacity: 0; } }

.acoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.1rem; }

.leque { position: relative; width: 100%; max-width: 40rem; aspect-ratio: 6 / 5; margin-inline: auto; }
/* o brilho laranja e azul atras das janelas: maior que o leque, senao as janelas o cobrem */
.leque::before {
	content: ""; position: absolute; inset: -14% -12% -16% -10%; filter: blur(36px);
	background:
		radial-gradient(closest-side at 32% 38%, rgba(254, 120, 2, .6), transparent),
		radial-gradient(closest-side at 78% 72%, rgba(47, 123, 255, .55), transparent);
}
.leque .janela {
	position: absolute; left: 11%; top: 18%; width: 78%;
	transform: var(--fim);
	animation: abrir-leque 1.1s cubic-bezier(.2, .8, .2, 1) .2s both;
}
.leque .j1 { --fim: translate(-15%, -13%) rotate(-8deg); }
.leque .j2 { --fim: translate(15%, -6%) rotate(6deg); }
.leque .j3 { --fim: translate(0, 13%) rotate(-1.5deg); }
/* parte empilhada (visivel desde o primeiro quadro) e abre ate o --fim de cada uma */
@keyframes abrir-leque { from { transform: translate(0, 6%) rotate(0deg) scale(.96); } }

/* ---------- janela de navegador (abertura e projetos) ---------- */
.janela {
	display: block; text-decoration: none; overflow: hidden; border-radius: 12px;
	background: var(--painel-2);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 30px 60px -22px rgba(0, 0, 0, .75);
}
.janela-barra { display: flex; align-items: center; gap: .6rem; height: 2rem; padding: 0 .7rem; }
.janela-url {
	flex: 1; min-width: 0; display: flex; align-items: center; gap: .35rem; height: 1.3rem; padding: 0 .65rem;
	border-radius: 999px; background: rgba(7, 17, 31, .75); color: var(--apoio);
	font-size: .72rem; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.janela-url svg { width: .72rem; height: .72rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; }
.no-ar { display: inline-flex; align-items: center; gap: .32rem; font-size: .68rem; font-weight: 700; color: #9BE9BE; }
.no-ar::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: var(--no-ar); box-shadow: 0 0 0 3px rgba(43, 214, 123, .2); }
.janela img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; background: var(--painel); }

/* ---------- secoes ---------- */
.secao { padding: clamp(4rem, 8vw, 7rem) var(--recuo); }
.secao-cabeca { display: grid; gap: .9rem; max-width: 44rem; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.secao-cabeca h2 { font-size: clamp(2.2rem, 4.8vw, 3.7rem); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.secao-cabeca p { margin: 0; color: var(--apoio); font-size: 1.15rem; }

.servicos, .sistemas, .junto { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.servicos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.servico {
	display: grid; align-content: start; gap: .85rem; padding: 1.6rem;
	background: var(--painel); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--linha);
}
.servico .icone { background: rgba(254, 120, 2, .14); color: var(--laranja-vivo); }
.servico h3 { font-size: 1.28rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
.servico p { margin: 0; color: var(--apoio); }

/* projetos: janela grande + texto, alternando o lado */
.projetos { display: grid; gap: clamp(3.5rem, 8vw, 6.5rem); }
.projeto { display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 900px) {
	.projeto { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
	.projeto:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
	.projeto:nth-child(even) .janela { order: 2; }
}
.projeto .janela { transition: transform .25s ease, box-shadow .25s ease; }
.projeto .janela:hover {
	transform: translateY(-5px);
	box-shadow: 0 0 0 1px rgba(254, 120, 2, .45), 0 40px 70px -24px rgba(0, 0, 0, .8);
}
.projeto h3 { font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; }
.projeto h3 a { text-decoration: none; }
.projeto-tipo { margin: .55rem 0 1rem; color: var(--laranja-vivo); font-weight: 600; }
.projeto-texto > p:not(.projeto-tipo) { margin: 0; color: var(--apoio); max-width: 34rem; }
.entregas { margin: 1rem 0 0; padding-left: 1.15rem; color: var(--tinta); display: grid; gap: .3rem; }
.entregas li::marker { color: var(--laranja); }

.bastidores { margin-top: clamp(4.5rem, 9vw, 7rem); }
.bastidores h3 { font-size: clamp(1.6rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -.02em; }
.bastidores-intro { margin: .5rem 0 1.75rem; color: var(--apoio); }
.sistemas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.sistema {
	display: grid; align-content: start; gap: .8rem; padding: 1.5rem;
	border-radius: 18px; box-shadow: inset 0 0 0 1px var(--linha);
	background: linear-gradient(160deg, rgba(47, 123, 255, .12), rgba(14, 28, 48, .6) 55%);
}
.sistema .icone { background: rgba(47, 123, 255, .18); color: var(--azul-claro); }
.sistema h4 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
.sistema p { margin: 0; color: var(--apoio); }

/* faixa laranja: o passo a passo */
.faixa-laranja { background: var(--laranja); color: var(--sobre-laranja); }
.faixa-laranja h2 { color: var(--sobre-laranja); }
.faixa-laranja .secao-cabeca p { color: rgba(7, 17, 31, .78); }
.faixa-laranja :focus-visible { outline-color: var(--sobre-laranja); }
.etapas {
	list-style: none; margin: 0; padding: 0; counter-reset: etapa;
	display: grid; gap: 2.25rem 1.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.etapas li { counter-increment: etapa; border-top: 3px solid var(--sobre-laranja); padding-top: 1.1rem; color: rgba(7, 17, 31, .84); }
.etapas li::before {
	content: counter(etapa); display: block; margin-bottom: .6rem;
	font: 800 clamp(3.2rem, 6vw, 4.6rem)/1 var(--fonte-titulo); letter-spacing: -.05em; color: var(--sobre-laranja);
}
.etapas strong { display: block; margin-bottom: .35rem; font: 700 1.3rem/1.2 var(--fonte-titulo); color: var(--sobre-laranja); }

.junto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 2rem; }
.junto li { display: grid; gap: 1rem; align-content: start; }
.junto .icone { background: rgba(254, 120, 2, .14); color: var(--laranja-vivo); }
.junto p { margin: 0; color: var(--apoio); }
.junto strong { color: var(--tinta); }

/* ---------- contato ---------- */
.contato {
	background:
		radial-gradient(55% 80% at 88% 15%, rgba(254, 120, 2, .32), transparent 70%),
		radial-gradient(45% 70% at 5% 100%, rgba(47, 123, 255, .26), transparent 70%),
		var(--painel);
	border-top: 1px solid var(--linha);
}
.contato h2 { font-size: clamp(2.6rem, 7vw, 5.4rem); font-weight: 800; letter-spacing: -.045em; line-height: .98; max-width: 13ch; }
.contato p { max-width: 34rem; margin: 1.25rem 0 2rem; color: var(--apoio); font-size: 1.15rem; }

.rodape {
	padding: 2rem var(--recuo) 3.5rem; color: var(--apoio); font-size: .92rem;
	display: flex; flex-wrap: wrap; gap: .25rem 2rem; border-top: 1px solid var(--linha);
}
.rodape p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.leque .janela { animation: none; }
	.pulso::after { animation: none; opacity: 0; }
	.botao, .projeto .janela { transition: none; }
	.botao:hover, .projeto .janela:hover { transform: none; }
}