@charset "UTF-8";

/* ==========================================================================
   Virtual Floripa
   Direcao ativa: "Virtual Floripa - Azul Profundo".
   variance .55  ·  density .4  ·  motion .25

   Ordem do arquivo, e ela importa:
   1. fontes  2. tokens  3. reset  4. base  5. componentes  6. cabecalho
   7. secoes da home  8. rodape  9. paginas internas  10. responsivo

   Regra base nova entra na secao dela. Nunca no fim do arquivo: um bloco
   solto depois dos media queries vence o responsivo e derruba o celular.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fontes. Servidas do proprio dominio, sem chamada ao Google.
   -------------------------------------------------------------------------- */
@font-face {
	font-family: "Poppins";
	src: url("../fonts/poppins-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Poppins";
	src: url("../fonts/poppins-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Poppins";
	src: url("../fonts/poppins-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
	--bg: #ffffff;
	--surface: #f2f5fa;
	--ink: #0d1b2a;
	--deep: #0a1424;
	--accent: #2563eb;
	--signal: #00d1b2;
	--line: #e5e7eb;
	--muted: #5a6b80;

	--accent-hover: #1d4fd7;
	--accent-fundo: #1740b8;
	--sobre-accent: #d5e2ff;
	--deep-topo: #0d1e38;
	--deep-base: #08101d;
	--ink-claro: #a8b8cc;
	--ink-prosa: #24374b;
	--realce-claro: #5b93ff;
	--simbolo: #4b7bf0;
	--moldura: #1b2b45;

	--erro: #c62828;
	--erro-fundo: #fdf3f3;
	--erro-borda: #e6b8b8;
	--erro-texto: #8c2020;
	--whatsapp: #25d366;

	--fonte: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--mono: ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;

	--xs: 8px;
	--sm: 16px;
	--md: 24px;
	--lg: 48px;
	--xl: 96px;

	--r-sm: 8px;
	--r-md: 16px;
	--r-lg: 28px;
	--r-pill: 999px;

	--container: 1200px;
	--gutter: 24px;

	--sombra: 0 12px 32px rgba(13, 27, 42, .08);
	--sombra-forte: 0 24px 60px rgba(13, 27, 42, .14);

	--cabecalho-h: 76px;
}

/* --------------------------------------------------------------------------
   3. Reset. Em :where() para nao roubar especificidade dos componentes.
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

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

:where(img, picture, svg, video) {
	display: block;
	max-width: 100%;
}

:where(button, input, select, textarea) {
	font: inherit;
	color: inherit;
}

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

:where(table) {
	border-collapse: collapse;
}

:where(th) {
	text-align: left;
	font-weight: inherit;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--cabecalho-h) + 16px);
}

body {
	background: var(--bg);
	color: var(--ink);
	font-family: var(--fonte);
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

::selection {
	background: var(--accent);
	color: #fff;
}

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

.pular-para-conteudo {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--accent);
	color: #fff;
	padding: 12px 20px;
	border-radius: 0 0 var(--r-sm) 0;
}
.pular-para-conteudo:focus {
	left: 0;
}

.sr-apenas {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   4. Base de tipografia e estrutura
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.03em;
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

.realce {
	font-style: normal;
	color: var(--accent);
}

.realce-claro {
	font-style: normal;
	color: var(--sobre-accent);
}

.rotulo {
	display: block;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: var(--sm);
}

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

section {
	position: relative;
}

.secao__cabecalho {
	max-width: 660px;
	margin-bottom: var(--lg);
}

.secao__cabecalho--centro {
	max-width: 640px;
	margin-inline: auto;
	text-align: center;
}

.secao__cabecalho--linha {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--md);
	max-width: none;
	flex-wrap: wrap;
}

/* Em portugues as frases sao mais longas: a escala fica um passo abaixo do
   que funciona em ingles, senao todo titulo estoura para quatro linhas. */
.secao__titulo {
	font-size: clamp(1.8rem, 1.15rem + 2vw, 2.7rem);
	margin-bottom: var(--sm);
}

.secao__titulo--menor {
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
	margin-bottom: 0;
}

.secao__texto {
	color: var(--muted);
	font-size: 1.0625rem;
	max-width: 58ch;
}

.secao__texto + .secao__texto {
	margin-top: var(--sm);
}

/* Trecho em destaque dentro do texto de secao. So engrossar nao resolve: no
   cinza do texto de apoio o negrito quase nao aparece, entao o destaque
   tambem sobe para a cor do titulo. */
.secao__texto strong {
	font-weight: 600;
	color: var(--ink);
}

/* Link de fonte no meio do texto de secao: sublinhado e na cor do titulo,
   para nao sumir no cinza do texto de apoio. */
.secao__texto a {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.secao__texto a:hover {
	color: var(--accent);
}

.link-simples {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--accent);
	font-weight: 600;
}
.link-simples:hover {
	color: var(--accent-hover);
}

/* --------------------------------------------------------------------------
   5. Componentes
   -------------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 26px;
	border: 1px solid transparent;
	border-radius: var(--r-pill);
	font-weight: 600;
	font-size: .975rem;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}

.btn__seta {
	transition: transform .18s ease;
	flex: none;
}

.btn:hover .btn__seta {
	transform: translateX(3px);
}

.btn:active {
	transform: translateY(1px);
}

.btn--primario {
	background: var(--accent);
	color: #fff;
}
.btn--primario:hover {
	background: var(--accent-hover);
}

.btn--secundario {
	border-color: rgba(13, 27, 42, .22);
	color: var(--ink);
	background: transparent;
}
.btn--secundario:hover {
	border-color: var(--ink);
	background: rgba(13, 27, 42, .04);
}

.btn--largo {
	width: 100%;
	padding-block: 17px;
}

.hero .btn--secundario,
.topo-interno .btn--secundario,
.orcamento .btn--secundario {
	border-color: rgba(255, 255, 255, .34);
	color: #fff;
}
.hero .btn--secundario:hover,
.topo-interno .btn--secundario:hover,
.orcamento .btn--secundario:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, .09);
}

.pill {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 16px 7px 12px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .06);
	color: var(--ink-claro);
	font-size: .8125rem;
	font-weight: 500;
	white-space: nowrap;
}

.pill__ponto {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--signal);
	flex: none;
}

/* --------------------------------------------------------------------------
   6. Cabecalho
   -------------------------------------------------------------------------- */
.cabecalho {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	height: var(--cabecalho-h);
	display: flex;
	align-items: center;
	background: rgba(10, 20, 36, 0);
	border-bottom: 1px solid transparent;
	transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* A barra do WordPress empurra a pagina: o cabecalho fixo desce junto ou fica
   escondido atras dela para quem esta logado. */
body.admin-bar .cabecalho {
	top: 32px;
}

.cabecalho__interno {
	display: flex;
	align-items: center;
	gap: var(--lg);
}

body:not(.header-sobre-escuro) .cabecalho,
.cabecalho.is-solido {
	background: rgba(255, 255, 255, .92);
	backdrop-filter: saturate(150%) blur(12px);
	border-bottom-color: var(--line);
	box-shadow: 0 4px 20px rgba(13, 27, 42, .05);
}

.marca {
	flex: none;
	display: block;
	line-height: 0;
}

.marca__img {
	height: 40px;
	width: auto;
}

.marca__img--escuro {
	display: none;
}

body:not(.header-sobre-escuro) .marca__img--claro,
.cabecalho.is-solido .marca__img--claro {
	display: none;
}

body:not(.header-sobre-escuro) .marca__img--escuro,
.cabecalho.is-solido .marca__img--escuro {
	display: block;
}

.nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 1;
	gap: var(--lg);
}

.nav__lista {
	display: flex;
	align-items: center;
	gap: 30px;
}

.nav__link {
	position: relative;
	font-size: .95rem;
	font-weight: 500;
	color: rgba(255, 255, 255, .82);
	padding-block: 6px;
	transition: color .18s ease;
}

.nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background: var(--accent);
	transition: width .22s ease;
}

.nav__link:hover::after,
.current-menu-item > .nav__link::after {
	width: 100%;
}

.nav__link:hover {
	color: #fff;
}

body:not(.header-sobre-escuro) .nav__link,
.cabecalho.is-solido .nav__link {
	color: var(--ink);
}

body:not(.header-sobre-escuro) .nav__link:hover,
.cabecalho.is-solido .nav__link:hover {
	color: var(--accent);
}

.nav__acoes {
	display: flex;
	align-items: center;
	gap: var(--md);
	flex: none;
}

.nav__zap {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .9rem;
	font-weight: 600;
	color: rgba(255, 255, 255, .88);
	white-space: nowrap;
}
.nav__zap:hover {
	color: var(--signal);
}

body:not(.header-sobre-escuro) .nav__zap,
.cabecalho.is-solido .nav__zap {
	color: var(--ink);
}
body:not(.header-sobre-escuro) .nav__zap:hover,
.cabecalho.is-solido .nav__zap:hover {
	color: var(--accent);
}

.menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0 10px;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.menu-toggle__barra {
	display: block;
	height: 2px;
	width: 100%;
	background: #fff;
	border-radius: 2px;
	transition: transform .22s ease, opacity .22s ease;
}

body:not(.header-sobre-escuro) .menu-toggle__barra,
.cabecalho.is-solido .menu-toggle__barra {
	background: var(--ink);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__barra:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__barra:nth-child(2) {
	opacity: 0;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__barra:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   7. Secoes da home
   -------------------------------------------------------------------------- */

/* Hero.
   Coluna unica de texto a esquerda; o lado direito e o simbolo da marca em
   escala grande. Nao entra print de site de cliente aqui: no topo da home o
   assunto e a Virtual Floripa, nao o projeto de um terceiro. */
.hero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: min(760px, 92vh);
	background:
		radial-gradient(120% 90% at 78% 20%, rgba(37, 99, 235, .34) 0%, rgba(10, 20, 36, 0) 60%),
		linear-gradient(168deg, var(--deep-topo) 0%, var(--deep) 58%, var(--deep-base) 100%);
	color: #fff;
	padding-top: calc(var(--cabecalho-h) + 56px);
	padding-bottom: 96px;
}

/* Corte diagonal na base, o mesmo angulo do simbolo da marca */
.hero::after {
	content: "";
	position: absolute;
	left: -5%;
	right: -5%;
	bottom: -70px;
	height: 140px;
	background: var(--bg);
	transform: rotate(-1.6deg);
	z-index: 3;
}

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

.hero__grafismo {
	position: absolute;
	right: max(-40px, calc((100vw - var(--container)) / 2 - 40px));
	top: 50%;
	transform: translateY(-50%);
	width: min(42vw, 520px);
	pointer-events: none;
	z-index: 1;
}

.hero__grafismo svg {
	width: 100%;
	height: auto;
}

.hero__pontos {
	color: var(--simbolo);
	opacity: .22;
}

.hero__v {
	opacity: .8;
}

.hero__bandeira {
	opacity: .95;
}

.hero__texto {
	max-width: 660px;
}

.hero__titulo {
	font-size: clamp(1.9rem, 1rem + 2.8vw, 3.15rem);
	line-height: 1.06;
	margin: 20px 0;
	max-width: 20ch;
}

.hero__titulo .realce {
	color: var(--realce-claro);
	display: block;
}

.hero__sub {
	color: var(--ink-claro);
	font-size: 1.09rem;
	max-width: 48ch;
	margin-bottom: 34px;
}

.hero__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sm);
}

/* Numeros */
.numeros {
	padding-block: 72px var(--lg);
}

.numeros__grade {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	gap: var(--xl);
	align-items: center;
	padding-bottom: var(--lg);
	border-bottom: 1px solid var(--line);
}

.numeros__intro {
	color: var(--muted);
	font-size: 1.0625rem;
	max-width: 34ch;
}

.numeros__intro strong {
	color: var(--ink);
	font-weight: 600;
}

.numeros__lista {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--lg);
}

.numero {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-left: var(--md);
	border-left: 2px solid var(--accent);
}

.numero__valor {
	font-size: clamp(2.4rem, 1.6rem + 2.2vw, 3.4rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.04em;
	color: var(--accent);
}

.numero__rotulo {
	font-size: .875rem;
	color: var(--muted);
	line-height: 1.45;
}

/* Servicos: um destaque de um lado, quatro cards do outro. */
.servicos {
	padding-block: var(--xl);
	background: var(--bg);
}

.servicos__grade {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
	gap: var(--md);
	align-items: stretch;
}

.servico {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 30px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.servico:hover {
	transform: translateY(-3px);
	border-color: rgba(37, 99, 235, .3);
	box-shadow: var(--sombra);
}

.servico--destaque {
	background: var(--bg);
	border-color: rgba(37, 99, 235, .28);
	box-shadow: var(--sombra);
	padding: 40px;
	gap: 14px;
	justify-content: flex-start;
}

.servicos__secundarios {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--md);
}

.servico__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--r-md);
	background: var(--accent);
	color: #fff;
	flex: none;
}

.servico--destaque .servico__icone {
	width: 62px;
	height: 62px;
}

.servico__titulo {
	font-size: 1.25rem;
	margin-top: 6px;
}

.servico--destaque .servico__titulo {
	font-size: 1.85rem;
}

.servico__texto {
	color: var(--muted);
	font-size: .95rem;
	flex: 1;
}

.servico--destaque .servico__texto {
	font-size: 1.05rem;
	flex: 0 1 auto;
}

.servico__itens {
	display: grid;
	gap: 10px;
	margin-block: 4px 8px;
}

.servico__itens li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: .95rem;
}

.servico__itens .icone {
	color: var(--signal);
	flex: none;
	margin-top: 3px;
}

.servico__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 6px;
	color: var(--accent);
	font-weight: 600;
	font-size: .9375rem;
}

.servico__link .icone,
.projeto__link .icone {
	transition: transform .18s ease;
}

.servico__link:hover .icone,
.projeto__link:hover .icone {
	transform: translateX(3px);
}

/* WordPress: o diferencial contra construtor de IA e plataforma fechada. */
.wordpress {
	padding-block: 0 var(--xl);
	background: var(--bg);
}

.wordpress__grade {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: var(--xl);
	align-items: start;
	padding-top: var(--xl);
	border-top: 1px solid var(--line);
}

.wordpress__texto .secao__titulo {
	margin-bottom: var(--md);
}

.autonomia {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px var(--md);
	margin-top: var(--md);
}

.autonomia li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: .95rem;
	font-weight: 500;
}

.autonomia .icone {
	color: var(--signal);
	flex: none;
	margin-top: 3px;
}

.wordpress__nota {
	margin-top: var(--md);
	padding-left: var(--sm);
	border-left: 2px solid var(--accent);
	color: var(--muted);
	font-size: .95rem;
}

/* Tabela comparativa. Coluna do WordPress destacada, a outra em tom apagado:
   a hierarquia ja diz de que lado a pagina esta, sem precisar de cor de alerta. */
.comparacao {
	width: 100%;
	font-size: .9rem;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--bg);
	box-shadow: var(--sombra);
}

.comparacao th,
.comparacao td {
	padding: 14px 16px;
	vertical-align: top;
	border-bottom: 1px solid var(--line);
}

.comparacao tbody tr:last-child th,
.comparacao tbody tr:last-child td {
	border-bottom: 0;
}

.comparacao thead th {
	background: var(--surface);
	font-weight: 600;
	font-size: .8125rem;
	letter-spacing: .02em;
	color: var(--muted);
	white-space: nowrap;
}

.comparacao thead th.comparacao__sim {
	display: table-cell;
	background: rgba(37, 99, 235, .07);
	color: var(--accent);
}

.comparacao thead th.comparacao__sim .icone {
	display: inline-block;
	vertical-align: -4px;
	margin-right: 6px;
	color: var(--signal);
}

.comparacao tbody th {
	width: 26%;
	font-weight: 600;
	color: var(--ink);
	background: var(--surface);
}

.comparacao__sim {
	background: rgba(37, 99, 235, .05);
	color: var(--ink);
}

.comparacao__nao {
	color: var(--muted);
}

/* Diferenciais, bloco escuro */
.diferenciais {
	padding-block: 0 var(--xl);
}

.diferenciais__caixa {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	gap: var(--xl);
	align-items: center;
	padding: 68px 60px;
	border-radius: var(--r-lg);
	background:
		radial-gradient(90% 120% at 0% 0%, rgba(37, 99, 235, .34) 0%, rgba(10, 20, 36, 0) 60%),
		var(--deep);
	color: #fff;
}

.diferenciais__simbolo {
	position: absolute;
	left: -70px;
	bottom: -120px;
	width: 420px;
	color: var(--simbolo);
	opacity: .16;
	pointer-events: none;
}

.diferenciais__texto {
	position: relative;
	z-index: 2;
}

.diferenciais__titulo {
	font-size: clamp(1.7rem, 1.15rem + 1.7vw, 2.5rem);
	margin-bottom: var(--sm);
}

.diferenciais__titulo .realce {
	color: var(--realce-claro);
}

.diferenciais__texto p {
	color: var(--ink-claro);
	max-width: 34ch;
}

.diferenciais__lista {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 34px var(--lg);
}

.diferencial__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-bottom: 14px;
	border-radius: var(--r-sm);
	background: rgba(255, 255, 255, .09);
	border: 1px solid rgba(255, 255, 255, .14);
	color: var(--signal);
}

.diferencial__titulo {
	font-size: 1.0625rem;
	margin-bottom: 6px;
}

.diferencial__texto {
	color: var(--ink-claro);
	font-size: .9rem;
	line-height: 1.6;
}

/* Processo */
.processo {
	padding-block: var(--xl);
	background: var(--surface);
}

.processo__trilha {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--lg);
}

.processo__trilha::before {
	content: "";
	position: absolute;
	top: 21px;
	left: 12.5%;
	right: 12.5%;
	height: 2px;
	background: linear-gradient(90deg, var(--accent) 0%, rgba(37, 99, 235, .25) 100%);
}

.etapa {
	position: relative;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.etapa__marca {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	box-shadow: 0 0 0 8px var(--surface);
}

.etapa__icone {
	display: inline-flex;
	color: var(--accent);
	margin-top: 6px;
}

.etapa__titulo {
	font-size: 1.0625rem;
}

.etapa__texto {
	color: var(--muted);
	font-size: .9rem;
	max-width: 30ch;
}

/* Portfolio. Grade de dois por dois, todos com o mesmo enquadramento:
   print largo cortado so na altura, nunca esticado. */
.portfolio {
	padding-block: var(--xl);
}

.portfolio__grade {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--md);
}

/* Numero impar de projetos: o ultimo card fica sozinho, centralizado e na largura de uma coluna. */
@media (min-width: 641px) {
	.portfolio__grade > .projeto:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc(50% - var(--md) / 2);
	}
}

.projeto {
	display: flex;
	flex-direction: column;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: transform .22s ease, box-shadow .22s ease;
}

.projeto:hover {
	transform: translateY(-4px);
	box-shadow: var(--sombra-forte);
}

.projeto__janela {
	position: relative;
	background: var(--deep);
	overflow: hidden;
}

.projeto__barra {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 6px;
	height: 26px;
	padding-inline: 12px;
	background: var(--moldura);
}

.projeto__barra i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .22);
}

.projeto__janela img,
.projeto__vazio {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	margin-top: 26px;
	object-fit: cover;
	object-position: top center;
}

.projeto__vazio {
	display: grid;
	place-items: center;
	background: linear-gradient(150deg, rgba(37, 99, 235, .4) 0%, var(--deep) 60%);
}

.projeto__simbolo {
	width: 96px;
	color: var(--simbolo);
	opacity: .5;
}

.projeto__info {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 26px;
	flex: 1;
}

.projeto__nome {
	font-size: 1.2rem;
}

.projeto__segmento {
	color: var(--muted);
	font-size: .9rem;
}

/* A cidade fica separada do segmento por um traco fino, nao por virgula:
   assim os dois se leem como duas informacoes, e nao como uma frase so. */
.projeto__local {
	display: inline-block;
	margin-left: 8px;
	padding-left: 9px;
	border-left: 1px solid var(--line);
	color: var(--muted);
}

.projeto__resultado {
	color: var(--ink);
	font-size: .95rem;
	margin-top: 8px;
}

.projeto__categoria {
	margin-top: auto;
	padding-top: 14px;
	color: var(--muted);
	font-size: .8125rem;
	font-weight: 600;
}

.projeto__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
	color: var(--accent);
	font-weight: 600;
	font-size: .9375rem;
}

/* Depoimentos */
.depoimentos {
	padding-block: var(--xl);
	background: var(--surface);
}

.depoimentos__grade {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--xl);
	align-items: start;
}

.depoimentos__titulo {
	margin-bottom: var(--md);
}

.depoimento__texto {
	position: relative;
	color: var(--ink);
	font-size: 1rem;
	line-height: 1.6;
}

.depoimento--principal .depoimento__texto {
	font-size: 1.4rem;
	line-height: 1.45;
	font-weight: 500;
	padding-top: 34px;
}

.depoimento--principal .depoimento__texto::before {
	content: "\201C";
	position: absolute;
	top: -14px;
	left: -4px;
	font-size: 6rem;
	font-weight: 700;
	line-height: 1;
	color: var(--accent);
	opacity: .16;
}

.depoimento__autor {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: var(--md);
}

/* As imagens sao marcas de cliente, nao retrato: circulo cortaria a logo. */
.depoimento__foto {
	width: 52px;
	height: 52px;
	border-radius: var(--r-sm);
	object-fit: contain;
	background: #fff;
	padding: 5px;
	border: 1px solid var(--line);
	flex: none;
}

.depoimento__autor span {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}

.depoimento__autor strong {
	font-weight: 600;
	font-size: .975rem;
}

.depoimento__autor em {
	font-style: normal;
	color: var(--muted);
	font-size: .85rem;
}

.depoimentos__lista {
	display: grid;
	gap: var(--md);
}

.depoimentos__lista .depoimento {
	padding: 26px;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}

.depoimentos__lista .depoimento__autor {
	margin-top: var(--sm);
}

.depoimentos__lista .depoimento__foto {
	width: 44px;
	height: 44px;
}

/* FAQ */
.faq {
	padding-block: var(--xl);
}

.faq__grade {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	gap: var(--xl);
	align-items: start;
}

.faq__intro .secao__texto {
	margin-bottom: var(--md);
}

.faq__lista {
	border-top: 1px solid var(--line);
}

.faq__item {
	border-bottom: 1px solid var(--line);
}

.faq__pergunta {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--md);
	padding-block: 22px;
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
	transition: color .18s ease;
}

.faq__pergunta::-webkit-details-marker {
	display: none;
}

.faq__pergunta:hover {
	color: var(--accent);
}

.faq__cruz {
	position: relative;
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 3px;
}

.faq__cruz::before,
.faq__cruz::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto 0;
	height: 2px;
	background: var(--accent);
	border-radius: 2px;
	transition: transform .22s ease;
}

.faq__cruz::after {
	transform: rotate(90deg);
}

.faq__item[open] .faq__cruz::after {
	transform: rotate(0);
}

.faq__resposta {
	padding-bottom: 24px;
	color: var(--muted);
	max-width: 68ch;
}

/* Orcamento */
.orcamento {
	padding-block: var(--lg) var(--xl);
}

.orcamento__caixa {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: var(--xl);
	align-items: center;
	padding: 60px;
	border-radius: var(--r-lg);
	background:
		radial-gradient(100% 130% at 100% 0%, rgba(0, 209, 178, .22) 0%, rgba(37, 99, 235, 0) 55%),
		linear-gradient(135deg, var(--accent) 0%, var(--accent-fundo) 100%);
	color: #fff;
}

.orcamento__titulo {
	font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.25rem);
	margin-bottom: var(--sm);
}

.orcamento__sub {
	color: var(--sobre-accent);
	max-width: 42ch;
	margin-bottom: var(--md);
}

.orcamento__itens {
	display: grid;
	gap: 10px;
	margin-bottom: var(--lg);
}

.orcamento__itens li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: .95rem;
}

.orcamento__itens .icone {
	color: var(--signal);
	flex: none;
}

.orcamento__contato {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: var(--md);
	border-top: 1px solid rgba(255, 255, 255, .22);
	font-size: .9rem;
	color: var(--sobre-accent);
}

.orcamento__zap {
	font-size: 1.35rem;
	font-weight: 700;
	color: #fff;
	letter-spacing: -.02em;
}

.orcamento__contato a:hover {
	text-decoration: underline;
}

.orcamento__painel {
	background: #fff;
	color: var(--ink);
	border-radius: var(--r-md);
	padding: 34px;
	box-shadow: var(--sombra-forte);
}

/* Formulario */
.form__linha {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sm);
}

.campo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: var(--sm);
}

.campo label {
	font-size: .8125rem;
	font-weight: 600;
	color: var(--ink);
}

.campo label span {
	color: var(--accent);
	margin-left: 2px;
}

.campo input,
.campo select,
.campo textarea {
	width: 100%;
	padding: 13px 14px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--surface);
	color: var(--ink);
	font-size: .95rem;
	transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.campo textarea {
	resize: vertical;
	min-height: 104px;
}

.campo input::placeholder,
.campo textarea::placeholder {
	color: var(--muted);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
	outline: none;
	background: #fff;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
}

.campo--erro input,
.campo--erro select,
.campo--erro textarea {
	border-color: var(--erro);
	background: var(--erro-fundo);
}

/* Erro do campo: texto junto do icone, nunca so a cor da borda, que sozinha
   nao chega a quem nao distingue vermelho. */
.campo__erro {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	font-size: .8125rem;
	font-weight: 500;
	color: var(--erro-texto);
	line-height: 1.4;
}

.campo__erro::before {
	content: "!";
	display: inline-grid;
	place-items: center;
	width: 15px;
	height: 15px;
	flex: none;
	margin-top: 2px;
	border-radius: 50%;
	background: var(--erro);
	color: #fff;
	font-size: .6875rem;
	font-weight: 700;
	line-height: 1;
}

.form__armadilha {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form__aviso {
	margin-top: 14px;
	font-size: .78rem;
	color: var(--muted);
	line-height: 1.5;
}

.form__aviso a {
	color: var(--accent);
	text-decoration: underline;
}

.aviso {
	padding: 22px 24px;
	border-radius: var(--r-sm);
	margin-bottom: var(--sm);
}

.aviso--ok {
	background: rgba(0, 209, 178, .1);
	border: 1px solid rgba(0, 209, 178, .45);
}

.aviso--ok h3 {
	font-size: 1.15rem;
	margin-bottom: 6px;
}

.aviso--ok p {
	color: var(--muted);
	font-size: .95rem;
}

.aviso--ok a {
	color: var(--accent);
	font-weight: 600;
	text-decoration: underline;
}

.aviso--erro {
	background: var(--erro-fundo);
	border: 1px solid var(--erro-borda);
	color: var(--erro-texto);
	font-size: .9rem;
}

/* Blog na home */
.blog-home {
	padding-block: 0 var(--xl);
}

.blog-home__lista {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--md);
}

.post-card {
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--bg);
	transition: transform .2s ease, box-shadow .2s ease;
}

.post-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--sombra);
}

.post-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.post-card__img {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--surface);
}

.post-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.post-card:hover .post-card__img img {
	transform: scale(1.04);
}

.post-card__corpo {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px;
}

.post-card__meta {
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--accent);
}

.post-card__titulo {
	font-size: 1.0625rem;
	line-height: 1.32;
}

.post-card__resumo {
	color: var(--muted);
	font-size: .9rem;
}

/* --------------------------------------------------------------------------
   8. Rodape
   -------------------------------------------------------------------------- */
.rodape {
	background: var(--deep);
	color: var(--ink-claro);
	padding-block: var(--xl) var(--md);
	font-size: .9rem;
}

.rodape__topo {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: var(--lg);
	padding-bottom: var(--lg);
}

.rodape__logo {
	height: 44px;
	width: auto;
	margin-bottom: var(--sm);
}

.rodape__tagline {
	color: var(--signal);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-bottom: 14px;
}

.rodape__sobre {
	max-width: 40ch;
	line-height: 1.6;
}

.rodape__social {
	display: flex;
	gap: var(--sm);
	margin-top: var(--sm);
}

.rodape__social a {
	color: #fff;
	font-weight: 600;
}

.rodape__social a:hover {
	color: var(--signal);
}

.rodape__titulo {
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: var(--sm);
}

.rodape__lista {
	display: grid;
	gap: 10px;
}

.rodape__lista a:hover,
.rodape__endereco a:hover {
	color: #fff;
}

.rodape__endereco {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-style: normal;
	line-height: 1.6;
}

.rodape__destaque {
	color: #fff;
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: -.02em;
}

.rodape__destaque:hover {
	color: var(--signal);
}

.rodape__horario {
	display: grid;
	gap: 4px;
	margin-top: var(--sm);
	padding-top: var(--sm);
	border-top: 1px solid rgba(255, 255, 255, .1);
	font-size: .8125rem;
}

.rodape__atendimento {
	display: flex;
	align-items: baseline;
	gap: var(--sm);
	flex-wrap: wrap;
	padding-block: var(--md);
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.rodape__atendimento-rotulo {
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
}

.rodape__base {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sm);
	flex-wrap: wrap;
	padding-top: var(--md);
	border-top: 1px solid rgba(255, 255, 255, .1);
	font-size: .8125rem;
}

.rodape__legal {
	display: flex;
	gap: var(--md);
}

.rodape__legal a:hover {
	color: #fff;
}

.zap-flutuante {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 90;
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--whatsapp);
	color: #fff;
	box-shadow: 0 10px 26px rgba(13, 27, 42, .28);
	transition: transform .2s ease;
}

.zap-flutuante:hover {
	transform: scale(1.06);
}

/* Reveal no scroll. Escondido so quando o JS confirma que esta ativo. */
.js .reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .5s ease, transform .5s ease;
}

.js .reveal.is-visivel {
	opacity: 1;
	transform: none;
}

/* --------------------------------------------------------------------------
   9. Paginas internas: blog, artigo, busca, pagina comum
   -------------------------------------------------------------------------- */
.topo-interno {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(110% 120% at 88% 0%, rgba(37, 99, 235, .34) 0%, rgba(10, 20, 36, 0) 62%),
		linear-gradient(168deg, var(--deep-topo) 0%, var(--deep) 100%);
	color: #fff;
	padding-top: calc(var(--cabecalho-h) + 64px);
	padding-bottom: 64px;
}

.topo-interno__simbolo {
	position: absolute;
	top: -40px;
	right: -70px;
	width: 400px;
	color: var(--simbolo);
	opacity: .12;
	pointer-events: none;
}

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

.topo-interno__titulo {
	font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
	max-width: 22ch;
}

.topo-interno__meta {
	margin-top: 14px;
	color: var(--ink-claro);
	font-size: .875rem;
}

.topo-interno__sub {
	margin-top: var(--sm);
	color: var(--ink-claro);
	max-width: 56ch;
}

.migalhas {
	margin-bottom: var(--sm);
	font-size: .8125rem;
	color: var(--ink-claro);
}

.migalhas a:hover {
	color: #fff;
	text-decoration: underline;
}

.secao-interna {
	padding-block: var(--xl);
}

.secao-interna--estreita {
	max-width: 800px;
}

.lista-posts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--md);
}

.paginacao {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: var(--lg);
	flex-wrap: wrap;
}

.paginacao .page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding-inline: 12px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	font-size: .9375rem;
	font-weight: 600;
	color: var(--ink);
	transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

.paginacao .page-numbers:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.paginacao .page-numbers.current {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

.paginacao--interna {
	justify-content: flex-start;
	align-items: center;
	gap: 12px;
	font-size: .9rem;
}

.busca-topo {
	margin-bottom: var(--lg);
}

.form-busca {
	display: flex;
	gap: 10px;
	max-width: 520px;
}

.form-busca__campo {
	flex: 1;
	padding: 13px 16px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--surface);
	font-size: .95rem;
}

.form-busca__campo:focus {
	outline: none;
	background: #fff;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
}

.lista-atalhos {
	display: grid;
	gap: 2px;
	margin-top: var(--md);
}

.lista-atalhos a {
	display: block;
	padding: 16px 0;
	border-bottom: 1px solid var(--line);
	font-weight: 600;
	font-size: 1.05rem;
	transition: color .18s ease, padding-left .18s ease;
}

.lista-atalhos a:hover {
	color: var(--accent);
	padding-left: 8px;
}

.vazio {
	color: var(--muted);
	font-size: 1.05rem;
}

.artigo {
	max-width: 860px;
}

.artigo__capa {
	margin-bottom: var(--lg);
	border-radius: var(--r-lg);
	overflow: hidden;
}

.artigo__capa img {
	width: 100%;
	height: auto;
}

.prosa {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--ink-prosa);
}

.prosa > * + * {
	margin-top: 1.15em;
}

.prosa h2,
.prosa h3,
.prosa h4 {
	color: var(--ink);
	margin-top: 1.9em;
	line-height: 1.25;
}

.prosa h2 {
	font-size: clamp(1.45rem, 1.15rem + 1.1vw, 1.9rem);
}

.prosa h3 {
	font-size: 1.25rem;
}

.prosa h4 {
	font-size: 1.0625rem;
}

.prosa p,
.prosa li {
	max-width: 68ch;
}

.prosa a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.prosa a:hover {
	color: var(--accent-hover);
}

.prosa strong {
	font-weight: 600;
	color: var(--ink);
}

.prosa ul,
.prosa ol {
	padding-left: 1.3em;
}

.prosa ul {
	list-style: disc;
}

.prosa ol {
	list-style: decimal;
}

.prosa li + li {
	margin-top: .5em;
}

.prosa li::marker {
	color: var(--accent);
}

.prosa img,
.prosa figure img {
	border-radius: var(--r-md);
	height: auto;
}

.prosa figure {
	margin-block: 1.8em;
}

.prosa figcaption {
	margin-top: 10px;
	font-size: .85rem;
	color: var(--muted);
}

/* Reset explicito: elemento nu que pode herdar estilo de plugin antigo */
.prosa blockquote {
	margin: 1.8em 0;
	padding: 4px 0 4px 24px;
	border: 0;
	border-left: 3px solid var(--accent);
	background: none;
	font-size: 1.15rem;
	line-height: 1.55;
	color: var(--ink);
}

.prosa table {
	width: 100%;
	font-size: .95rem;
	display: block;
	overflow-x: auto;
}

.prosa th,
.prosa td {
	padding: 12px 14px;
	border: 1px solid var(--line);
	text-align: left;
}

.prosa th {
	background: var(--surface);
	font-weight: 600;
	color: var(--ink);
}

.prosa pre {
	overflow-x: auto;
	padding: 20px;
	border-radius: var(--r-sm);
	background: var(--deep);
	color: var(--ink-claro);
	font-size: .875rem;
}

.prosa code {
	font-family: var(--mono);
	font-size: .9em;
}

.prosa :not(pre) > code {
	padding: 2px 6px;
	border-radius: 4px;
	background: var(--surface);
	color: var(--accent-hover);
}

.prosa hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin-block: 2.2em;
}

.artigo__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: var(--lg);
}

.artigo__tags a {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	font-size: .8125rem;
	font-weight: 600;
	color: var(--muted);
	transition: border-color .18s ease, color .18s ease;
}

.artigo__tags a:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.artigo__nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--md);
	margin-top: var(--lg);
	padding-top: var(--lg);
	border-top: 1px solid var(--line);
}

.artigo__nav-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px 22px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	transition: border-color .18s ease, box-shadow .18s ease;
}

.artigo__nav-item:hover {
	border-color: var(--accent);
	box-shadow: var(--sombra);
}

.artigo__nav-item span {
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--accent);
}

.artigo__nav-item strong {
	font-weight: 600;
	line-height: 1.35;
	font-size: .975rem;
}

.artigo__nav-item--proximo {
	text-align: right;
}

/* Pagina que ainda esta no Elementor: so respiro para o cabecalho fixo */
.pagina-elementor {
	padding-top: var(--cabecalho-h);
}

.comentarios .comentarios__lista {
	margin-block: var(--md);
	display: grid;
	gap: var(--md);
}

/* --------------------------------------------------------------------------
   Pagina de servicos: indice, fichas e bloco de combinacao
   -------------------------------------------------------------------------- */
.topo-interno__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sm);
	margin-top: var(--md);
}

/* Indice ancorado. Fica colado abaixo do cabecalho ao rolar, para quem esta
   no meio da pagina conseguir pular para outro servico sem voltar ao topo. */
.indice {
	position: sticky;
	top: var(--cabecalho-h);
	z-index: 50;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: saturate(150%) blur(10px);
	border-bottom: 1px solid var(--line);
}

body.admin-bar .indice {
	top: calc(var(--cabecalho-h) + 32px);
}

.indice__lista {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	scrollbar-width: none;
	padding-block: 10px;
}

.indice__lista::-webkit-scrollbar {
	display: none;
}

.indice__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: var(--r-pill);
	font-size: .875rem;
	font-weight: 600;
	color: var(--muted);
	white-space: nowrap;
	transition: background-color .18s ease, color .18s ease;
}

.indice__link .icone {
	color: var(--accent);
	flex: none;
}

.indice__link:hover {
	background: var(--surface);
	color: var(--ink);
}

/* Ficha de servico. Texto de um lado, o que esta incluso do outro, com o
   fundo alternando para separar uma ficha da seguinte sem precisar de borda. */
.ficha {
	padding-block: var(--xl);
	scroll-margin-top: calc(var(--cabecalho-h) + 70px);
}

.ficha--alt {
	background: var(--surface);
}

.ficha__grade {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: var(--xl);
	align-items: start;
}

.ficha__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	margin-bottom: var(--sm);
	border-radius: var(--r-md);
	background: var(--accent);
	color: #fff;
}

.ficha__titulo {
	font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.2rem);
	margin-bottom: 14px;
}

.ficha__resumo {
	color: var(--muted);
	font-size: 1.0625rem;
	max-width: 56ch;
}

.ficha__para-quem {
	margin-top: var(--md);
	padding-left: var(--sm);
	border-left: 2px solid var(--accent);
	color: var(--muted);
	font-size: .95rem;
	max-width: 56ch;
}

.ficha__para-quem strong {
	color: var(--ink);
	font-weight: 600;
}

.ficha__acoes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--md);
	margin-top: var(--lg);
}

.ficha__inclui {
	padding: 30px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--bg);
}

.ficha--alt .ficha__inclui {
	background: var(--bg);
	box-shadow: var(--sombra);
}

.ficha__inclui-titulo {
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: var(--sm);
}

.ficha__itens {
	display: grid;
	gap: 12px;
}

.ficha__itens li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: .95rem;
	line-height: 1.5;
}

.ficha__itens .icone {
	color: var(--signal);
	flex: none;
	margin-top: 3px;
}

/* Bloco escuro que responde "preciso de tudo isso?" */
.combinar {
	padding-block: var(--xl);
}

.combinar__caixa {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: var(--xl);
	align-items: center;
	padding: 62px 56px;
	border-radius: var(--r-lg);
	background:
		radial-gradient(90% 120% at 100% 0%, rgba(37, 99, 235, .32) 0%, rgba(10, 20, 36, 0) 60%),
		var(--deep);
	color: #fff;
}

.combinar__simbolo {
	position: absolute;
	right: -80px;
	bottom: -130px;
	width: 400px;
	color: var(--simbolo);
	opacity: .14;
	pointer-events: none;
}

.combinar__texto {
	position: relative;
	z-index: 2;
}

.combinar__titulo {
	font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.35rem);
	margin-bottom: var(--sm);
}

.combinar__titulo .realce {
	color: var(--realce-claro);
}

.combinar__texto p {
	color: var(--ink-claro);
	max-width: 40ch;
}

.combinar__lista {
	position: relative;
	z-index: 2;
	display: grid;
	gap: 2px;
}

.combinar__lista li {
	display: grid;
	gap: 4px;
	padding: 16px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.combinar__lista li:last-child {
	border-bottom: 0;
}

.combinar__lista strong {
	font-weight: 600;
	font-size: 1rem;
}

.combinar__lista span {
	color: var(--ink-claro);
	font-size: .9rem;
}

/* --------------------------------------------------------------------------
   Pagina de contato: canais, formulario com apoio ao lado e mapa sob demanda
   -------------------------------------------------------------------------- */

/* Os tres caminhos aparecem antes de qualquer texto, sobrepondo a faixa
   escura: quem chega nesta pagina ja decidiu falar com alguem. */
.canais {
	margin-top: -46px;
	position: relative;
	z-index: 5;
}

.canais__lista {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--md);
}

.canal {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 28px;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	box-shadow: var(--sombra);
}

.canal__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 6px;
	border-radius: var(--r-sm);
	background: var(--surface);
	color: var(--accent);
}

/* O WhatsApp e o caminho mais usado, entao ganha a cor dele no icone */
.canal--zap .canal__icone {
	background: rgba(37, 211, 102, .12);
	color: var(--whatsapp);
}

.canal__titulo {
	font-size: 1.125rem;
}

.canal__texto {
	color: var(--muted);
	font-size: .9rem;
	flex: 1;
}

.canal__acao {
	margin-top: 6px;
	color: var(--accent);
	font-weight: 600;
	font-size: 1rem;
	word-break: break-word;
}

.canal__acao:hover {
	text-decoration: underline;
}

/* Formulario a esquerda, apoio a direita */
.contato {
	padding-block: var(--xl);
	scroll-margin-top: calc(var(--cabecalho-h) + 20px);
}

.contato__grade {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: var(--xl);
	align-items: start;
}

.contato__form .secao__texto {
	margin-bottom: var(--md);
}

.contato__painel {
	padding: 32px;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	box-shadow: var(--sombra);
}

.contato__lado {
	display: grid;
	gap: var(--md);
}

.bloco-info {
	padding: 26px;
	background: var(--surface);
	border-radius: var(--r-md);
}

.bloco-info__titulo {
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: var(--sm);
}

.bloco-info__endereco {
	font-style: normal;
	line-height: 1.7;
	font-size: .95rem;
}

.bloco-info__nota {
	margin-top: 10px;
	color: var(--muted);
	font-size: .875rem;
	line-height: 1.55;
}

.bloco-info__horario {
	display: grid;
	gap: 8px;
}

.bloco-info__horario li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: .95rem;
}

.bloco-info__horario .icone {
	color: var(--signal);
	flex: none;
	margin-top: 4px;
}

.bloco-info .link-simples {
	margin-top: var(--sm);
	font-size: .9375rem;
}

/* Os tres passos do que acontece depois do envio */
.passos {
	display: grid;
	gap: var(--sm);
	counter-reset: passo;
}

.passos li {
	position: relative;
	display: grid;
	gap: 3px;
	padding-left: 34px;
	counter-increment: passo;
}

.passos li::before {
	content: counter(passo);
	position: absolute;
	left: 0;
	top: 1px;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
	font-size: .75rem;
	font-weight: 700;
}

.passos strong {
	font-weight: 600;
	font-size: .9375rem;
	line-height: 1.4;
}

.passos span {
	color: var(--muted);
	font-size: .875rem;
	line-height: 1.5;
}

/* Mapa: fachada leve que vira iframe so no clique */
.mapa {
	padding-block: 0 var(--xl);
}

.mapa__fachada {
	position: relative;
	overflow: hidden;
	display: grid;
	place-items: center;
	min-height: 320px;
	padding: var(--lg) var(--md);
	border-radius: var(--r-lg);
	background:
		radial-gradient(80% 120% at 80% 10%, rgba(37, 99, 235, .3) 0%, rgba(10, 20, 36, 0) 60%),
		var(--deep);
	color: #fff;
	text-align: center;
}

.mapa__simbolo {
	position: absolute;
	left: -40px;
	bottom: -90px;
	width: 300px;
	color: var(--simbolo);
	opacity: .16;
	pointer-events: none;
}

.mapa__conteudo {
	position: relative;
	z-index: 2;
	display: grid;
	justify-items: center;
	gap: var(--sm);
}

.mapa__endereco {
	font-size: 1.125rem;
	font-weight: 600;
	max-width: 34ch;
}

.mapa__nota {
	color: var(--ink-claro);
	font-size: .8125rem;
}

.mapa__fachada.is-carregado {
	/* place-items: center encolhe o iframe para o tamanho intrinseco dele */
	display: block;
	padding: 0;
	min-height: 0;
	background: var(--deep);
}

.mapa__fachada iframe {
	display: block;
	width: 100%;
	height: 420px;
	border: 0;
}

/* --------------------------------------------------------------------------
   Pagina Quem Somos: historia, principios e escopo
   -------------------------------------------------------------------------- */
.historia {
	padding-block: var(--xl);
}

.historia__grade {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
	gap: var(--xl);
	align-items: start;
}

.marcos {
	display: grid;
	gap: 2px;
	padding: 30px;
	background: var(--surface);
	border-radius: var(--r-md);
}

.marco {
	display: grid;
	gap: 2px;
	padding-block: 16px;
	border-bottom: 1px solid var(--line);
}

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

.marco:first-child {
	padding-top: 0;
}

.marco__valor {
	font-size: 2.1rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.04em;
	color: var(--accent);
}

.marco__rotulo {
	color: var(--muted);
	font-size: .875rem;
	line-height: 1.45;
}

/* Principios: quatro blocos numerados, sem card, separados por traço */
.principios {
	padding-block: var(--xl);
	background: var(--surface);
}

.principios__lista {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--lg) var(--xl);
}

.principio {
	display: grid;
	gap: 8px;
	padding-top: var(--md);
	border-top: 2px solid var(--accent);
}

.principio__marca {
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--accent);
}

.principio__titulo {
	font-size: 1.25rem;
}

.principio__texto {
	color: var(--muted);
	font-size: .95rem;
	max-width: 46ch;
}

/* Escopo: o que fazemos x o que nao fazemos, lado a lado */
.escopo {
	padding-block: var(--xl);
}

.escopo__caixa {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	gap: var(--xl);
	align-items: center;
	padding: 62px 56px;
	border-radius: var(--r-lg);
	background:
		radial-gradient(90% 120% at 0% 100%, rgba(37, 99, 235, .3) 0%, rgba(10, 20, 36, 0) 60%),
		var(--deep);
	color: #fff;
}

.escopo__simbolo {
	position: absolute;
	right: -70px;
	top: -100px;
	width: 360px;
	color: var(--simbolo);
	opacity: .14;
	pointer-events: none;
}

.escopo__texto {
	position: relative;
	z-index: 2;
}

.escopo__titulo {
	font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.35rem);
	margin-bottom: var(--sm);
}

.escopo__titulo .realce {
	color: var(--realce-claro);
}

.escopo__texto p {
	color: var(--ink-claro);
	max-width: 38ch;
}

.escopo__colunas {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--lg);
}

.escopo__coluna-titulo {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin-bottom: var(--sm);
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.escopo__coluna-titulo .icone {
	color: var(--signal);
	flex: none;
}

.escopo__lista {
	display: grid;
	gap: 10px;
	font-size: .95rem;
}

/* A coluna do que nao fazemos vem apagada de proposito: informa sem competir */
.escopo__coluna--nao .escopo__coluna-titulo,
.escopo__coluna--nao .escopo__lista {
	color: var(--ink-claro);
}

.escopo__coluna--nao .escopo__lista li {
	text-decoration: line-through;
	text-decoration-color: rgba(168, 184, 204, .5);
	text-underline-offset: 3px;
}

.escopo__nota {
	margin-top: var(--sm);
	padding-top: var(--sm);
	border-top: 1px solid rgba(255, 255, 255, .12);
	color: var(--ink-claro);
	font-size: .8125rem;
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Pagina de criacao de sites: entrega, para quem e etapas longas
   -------------------------------------------------------------------------- */
.entrega {
	padding-block: var(--xl);
}

.entrega__grade {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: var(--xl);
	align-items: start;
}

.entrega__acao {
	margin-top: var(--lg);
}

.entrega__itens {
	display: grid;
	gap: 2px;
	padding: 32px;
	background: var(--surface);
	border-radius: var(--r-md);
}

.entrega__itens li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding-block: 14px;
	border-bottom: 1px solid var(--line);
	font-size: 1rem;
	line-height: 1.5;
}

.entrega__itens li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.entrega__itens li:first-child {
	padding-top: 0;
}

.entrega__itens .icone {
	color: var(--signal);
	flex: none;
	margin-top: 3px;
}

/* Para quem: lista em duas colunas, sem card, com traco separando */
.para-quem {
	padding-block: var(--xl);
	background: var(--surface);
}

.para-quem__lista {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 var(--xl);
	max-width: 940px;
	margin-inline: auto;
}

.para-quem__lista li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding-block: 18px;
	border-bottom: 1px solid var(--line);
	font-size: 1.0625rem;
	line-height: 1.5;
}

.para-quem__lista .icone {
	color: var(--accent);
	flex: none;
	margin-top: 3px;
}

/* Etapas longas: cada uma diz o que e pedido do cliente */
.etapas {
	padding-block: var(--xl);
}

.etapas__lista {
	display: grid;
	gap: 0;
	max-width: 860px;
}

.etapa-longa {
	position: relative;
	display: grid;
	grid-template-columns: 52px 1fr;
	gap: var(--md);
	padding-block: var(--md);
}

/* Linha vertical ligando as etapas */
.etapa-longa::before {
	content: "";
	position: absolute;
	left: 25px;
	top: 52px;
	bottom: -12px;
	width: 2px;
	background: var(--line);
}

.etapa-longa:last-child::before {
	display: none;
}

.etapa-longa__marca {
	position: relative;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
	font-weight: 700;
	font-size: 1.125rem;
}

.etapa-longa__corpo {
	padding-top: 6px;
}

.etapa-longa__titulo {
	font-size: 1.25rem;
	margin-bottom: 8px;
}

.etapa-longa__texto {
	color: var(--muted);
	max-width: 62ch;
}

/* O que e pedido do cliente fica destacado: e a parte que trava projeto */
.etapa-longa__voce {
	display: inline-block;
	margin-top: 12px;
	padding: 7px 14px;
	border-radius: var(--r-pill);
	background: var(--surface);
	color: var(--ink);
	font-size: .8125rem;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Paginas legais e paginas locais
   -------------------------------------------------------------------------- */
.topo-interno--curto {
	padding-bottom: 48px;
}

/* Documento juridico: indice de um lado, texto do outro, sem CTA no meio */
.legal {
	display: grid;
	grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
	gap: var(--xl);
	align-items: start;
	padding-block: var(--xl);
}

.legal__indice {
	position: sticky;
	top: calc(var(--cabecalho-h) + 24px);
	padding: 24px;
	background: var(--surface);
	border-radius: var(--r-md);
	font-size: .875rem;
}

body.admin-bar .legal__indice {
	top: calc(var(--cabecalho-h) + 56px);
}

.legal__indice-titulo {
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 12px;
}

.legal__indice ol {
	display: grid;
	gap: 9px;
	counter-reset: item;
	list-style: none;
	max-height: 60vh;
	overflow-y: auto;
}

.legal__indice a {
	color: var(--muted);
	line-height: 1.4;
	display: block;
}

.legal__indice a:hover {
	color: var(--accent);
}

.legal__corpo {
	max-width: 68ch;
}

.legal__corpo h2 {
	scroll-margin-top: calc(var(--cabecalho-h) + 24px);
}

/* Reset explicito: o texto herdado do construtor traz section e header nus */
.legal__corpo :where(section, header) {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.legal__duvida {
	grid-column: 2;
	max-width: 68ch;
	padding: 22px 24px;
	border-radius: var(--r-md);
	background: var(--surface);
	font-size: .9375rem;
	color: var(--muted);
}

.legal__duvida a {
	color: var(--accent);
	font-weight: 600;
}

/* Pagina de cidade: texto com um resumo do servico ao lado */
.local {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
	gap: var(--xl);
	align-items: start;
}

.local__corpo {
	max-width: 68ch;
}

/* O conteudo herdado vem com <b> onde deveria haver subtitulo e com imagem
   sem tamanho; aqui a prosa reassume o controle. */
.local__corpo :where(b) {
	font-weight: 600;
	color: var(--ink);
}

.local__corpo img {
	width: 100%;
	height: auto;
	border-radius: var(--r-md);
}

.local__apoio {
	position: sticky;
	top: calc(var(--cabecalho-h) + 24px);
	display: grid;
	gap: var(--md);
}

body.admin-bar .local__apoio {
	top: calc(var(--cabecalho-h) + 56px);
}

/* --------------------------------------------------------------------------
   Pagina de servico: detalhes numerados, recorte e outros servicos
   -------------------------------------------------------------------------- */
.entrega__lado {
	padding: 32px;
	background: var(--surface);
	border-radius: var(--r-md);
}

.entrega__itens--nu {
	padding: 0;
	background: none;
	border-radius: 0;
	margin-top: var(--sm);
}

/* Blocos de detalhe: numerados, sem card, separados por traco no topo */
.detalhes {
	padding-block: 0 var(--xl);
}

.detalhes__lista {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--lg) var(--xl);
}

.detalhe {
	display: grid;
	gap: 8px;
	padding-top: var(--md);
	border-top: 2px solid var(--accent);
}

.detalhe__marca {
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--accent);
}

.detalhe__titulo {
	font-size: 1.25rem;
}

.detalhe__texto {
	color: var(--muted);
	font-size: .95rem;
	max-width: 48ch;
}

/* Recorte: bloco escuro curto que diz para quem o servico e */
.recorte {
	padding-block: var(--xl);
}

.recorte__caixa {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	gap: var(--lg);
	align-items: center;
	padding: 54px 56px;
	border-radius: var(--r-lg);
	background:
		radial-gradient(90% 130% at 0% 0%, rgba(37, 99, 235, .3) 0%, rgba(10, 20, 36, 0) 60%),
		var(--deep);
	color: #fff;
}

.recorte__simbolo {
	position: absolute;
	right: -60px;
	bottom: -110px;
	width: 320px;
	color: var(--simbolo);
	opacity: .14;
	pointer-events: none;
}

.recorte__texto {
	position: relative;
	z-index: 2;
}

.recorte__titulo {
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
}

.recorte__titulo .realce {
	color: var(--realce-claro);
}

.recorte__conteudo {
	position: relative;
	z-index: 2;
	font-size: 1.15rem;
	line-height: 1.55;
	color: #fff;
	max-width: 52ch;
}

/* Outros servicos: linha de atalhos no fim da pagina */
.outros {
	padding-block: 0 var(--xl);
}

.outros__lista {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--md);
}

.outro {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 12px;
	height: 100%;
	padding: 20px 22px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.outro:hover {
	border-color: rgba(37, 99, 235, .35);
	box-shadow: var(--sombra);
	transform: translateY(-2px);
}

.outro__icone {
	display: inline-flex;
	color: var(--accent);
}

.outro__titulo {
	font-size: .975rem;
	font-weight: 600;
	line-height: 1.3;
}

.outro__seta {
	display: inline-flex;
	color: var(--muted);
	transition: transform .18s ease;
}

.outro:hover .outro__seta {
	transform: translateX(3px);
	color: var(--accent);
}


/* --------------------------------------------------------------------------
   Pacotes. So aparece em pagina de servico; home e hub /servicos/ nao tem
   preco de proposito.

   O cartao em destaque cresce e ganha a borda de accent. Como ele fica maior
   que os vizinhos, a grade usa align-items: start para os outros nao esticarem
   junto.
   -------------------------------------------------------------------------- */
.pacotes {
	padding-block: var(--xl);
	background: var(--surface);
}

.pacotes__grade {
	list-style: none;
	display: grid;
	gap: var(--md);
	align-items: start;
}

.pacotes__grade--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 880px;
	margin-inline: auto;
}

.pacotes__grade--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pacote {
	display: flex;
	flex-direction: column;
	gap: var(--sm);
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 32px 28px 28px;
	height: 100%;
}

.pacote--destaque {
	border-color: var(--accent);
	box-shadow: var(--sombra);
	position: relative;
}

.pacote__etiqueta {
	align-self: flex-start;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
	background: var(--surface);
	border-radius: var(--r-pill);
	padding: 6px 12px;
}

.pacote--destaque .pacote__etiqueta {
	color: var(--bg);
	background: var(--accent);
}

/* Chamada por pagina ("Criar um site novo"): mais forte que a etiqueta comum,
   para o visitante saber de cara o que o cartao vende. */
.pacote--chamada {
	border-color: var(--ink);
	box-shadow: var(--sombra);
}

.pacote__etiqueta--chamada,
.pacote--destaque .pacote__etiqueta--chamada {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	font-size: .8rem;
	color: #fff;
	background: var(--ink);
}

.pacote__nome {
	font-size: 1.45rem;
	line-height: 1.15;
}

.pacote__quem {
	color: var(--ink-prosa);
	font-size: .95rem;
	line-height: 1.55;
}

.pacote__preco {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	padding-block: var(--sm);
	border-block: 1px solid var(--line);
}

.pacote__de,
.pacote__periodo {
	font-size: .8rem;
	color: var(--muted);
	flex-basis: 100%;
}

.pacote__periodo {
	flex-basis: auto;
	font-weight: 600;
}

.pacote__valor {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.pacote--destaque .pacote__valor {
	color: var(--accent);
}

.pacote__herda {
	font-size: .85rem;
	font-weight: 600;
	color: var(--muted);
}

.pacote__itens {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex-grow: 1;
}

.pacote__itens li {
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: 10px;
	align-items: start;
	font-size: .93rem;
	line-height: 1.5;
	color: var(--ink-prosa);
}

.pacote__itens svg {
	margin-top: 3px;
	color: var(--accent);
	flex-shrink: 0;
}

.pacote__fora,
.pacote__nota {
	font-size: .85rem;
	line-height: 1.5;
	color: var(--muted);
	background: var(--surface);
	border-radius: var(--r-sm);
	padding: 12px 14px;
}

.pacote--destaque .pacote__fora,
.pacote--destaque .pacote__nota {
	background: var(--surface);
}

.pacote__acao {
	margin-top: auto;
	padding-top: var(--xs);
}

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

.pacotes__rodape {
	max-width: 720px;
	margin: var(--lg) auto 0;
	text-align: center;
	font-size: .95rem;
	line-height: 1.6;
	color: var(--ink-prosa);
}

.pacotes__rodape a {
	color: var(--accent);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pacotes__rodape a:hover {
	color: var(--accent-hover);
}

/* ==========================================================================
   10. Responsivo e preferencias do usuario

   Tudo que e media query mora aqui, no fim e em ordem decrescente de largura.
   ========================================================================== */

@media (max-width: 1080px) {
	:root {
		--xl: 76px;
	}

	.hero__grafismo {
		width: 46vw;
		right: -24px;
		opacity: .8;
	}

	.numeros__grade,
	.diferenciais__caixa,
	.faq__grade,
	.depoimentos__grade,
	.orcamento__caixa,
	.wordpress__grade {
		gap: var(--lg);
	}

	.diferenciais__caixa,
	.orcamento__caixa {
		padding: 44px 36px;
	}

	.servicos__grade,
	.wordpress__grade,
	.ficha__grade,
	.combinar__caixa,
	.contato__grade,
	.historia__grade,
	.escopo__caixa,
	.entrega__grade,
	.legal,
	.local,
	.recorte__caixa {
		grid-template-columns: 1fr;
	}

	.recorte__caixa {
		padding: 40px 34px;
	}

	.outros__lista {
		grid-template-columns: repeat(2, 1fr);
	}

	.legal__indice,
	.local__apoio {
		position: static;
	}

	.legal__duvida {
		grid-column: auto;
	}

	.escopo__caixa {
		padding: 44px 36px;
		gap: var(--lg);
	}

	.ficha__grade {
		gap: var(--lg);
	}

	.combinar__caixa {
		padding: 44px 36px;
		gap: var(--lg);
	}

	.wordpress__grade {
		gap: var(--md);
	}
}

@media (max-width: 900px) {
	/* Tres pacotes nao cabem lado a lado aqui. O destacado ocupa a linha
	   inteira, mas continua no fim: a escada de preco precisa ser crescente,
	   senao o visitante bate no valor mais alto antes de saber que existe
	   opcao de entrada. */
	.pacotes__grade--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pacotes__grade--3 .pacote--destaque {
		grid-column: 1 / -1;
	}

	:root {
		--cabecalho-h: 68px;
	}

	/* Menu vira gaveta */
	.menu-toggle {
		display: flex;
		margin-left: auto;
	}

	.nav {
		position: fixed;
		inset: var(--cabecalho-h) 0 auto 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--md) var(--gutter) var(--lg);
		background: #fff;
		border-bottom: 1px solid var(--line);
		box-shadow: 0 20px 40px rgba(13, 27, 42, .12);
		transform: translateY(-12px);
		opacity: 0;
		visibility: hidden;
		transition: opacity .22s ease, transform .22s ease, visibility .22s;
		max-height: calc(100dvh - var(--cabecalho-h));
		overflow-y: auto;
	}

	.nav.is-aberto {
		transform: none;
		opacity: 1;
		visibility: visible;
	}

	.nav__lista {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.nav__item {
		border-bottom: 1px solid var(--line);
	}

	.nav__link,
	body:not(.header-sobre-escuro) .nav__link,
	.cabecalho.is-solido .nav__link {
		display: block;
		padding-block: 15px;
		color: var(--ink);
		font-size: 1.0625rem;
	}

	.nav__link::after {
		display: none;
	}

	.nav__acoes {
		flex-direction: column;
		align-items: stretch;
		gap: var(--sm);
		margin-top: var(--md);
	}

	.nav__zap,
	body:not(.header-sobre-escuro) .nav__zap,
	.cabecalho.is-solido .nav__zap {
		justify-content: center;
		color: var(--ink);
	}

	body.menu-aberto .cabecalho {
		background: #fff;
		border-bottom-color: var(--line);
	}
	body.menu-aberto .marca__img--claro {
		display: none;
	}
	body.menu-aberto .marca__img--escuro {
		display: block;
	}
	body.menu-aberto .menu-toggle__barra {
		background: var(--ink);
	}

	/* Colunas viram pilha */
	.numeros__grade,
	.diferenciais__caixa,
	.faq__grade,
	.depoimentos__grade,
	.orcamento__caixa {
		grid-template-columns: 1fr;
	}

	.hero {
		min-height: 0;
		padding-top: calc(var(--cabecalho-h) + 48px);
		padding-bottom: 80px;
	}

	/* No celular o grafismo vira fundo, nao concorre com o texto */
	.hero__grafismo {
		width: 96vw;
		right: -38vw;
		top: 60%;
		opacity: .3;
	}

	.hero__titulo {
		max-width: 16ch;
	}

	.numeros__lista {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--md);
	}

	.diferenciais__lista {
		grid-template-columns: repeat(2, 1fr);
	}

	.principios__lista {
		gap: var(--md) var(--lg);
	}

	/* Trilha do processo vira lista vertical */
	.processo__trilha {
		grid-template-columns: 1fr;
		gap: var(--md);
	}

	.processo__trilha::before {
		top: 24px;
		bottom: 24px;
		left: 20px;
		right: auto;
		width: 2px;
		height: auto;
		background: linear-gradient(180deg, var(--accent) 0%, rgba(37, 99, 235, .25) 100%);
	}

	.etapa {
		display: grid;
		grid-template-columns: 42px 1fr;
		grid-template-rows: auto auto auto;
		column-gap: var(--sm);
		text-align: left;
		align-items: start;
	}

	.etapa__marca {
		grid-row: 1 / 4;
	}

	.etapa__icone {
		display: none;
	}

	.etapa__titulo,
	.etapa__texto {
		grid-column: 2;
		max-width: none;
	}

	.blog-home__lista,
	.lista-posts {
		grid-template-columns: repeat(2, 1fr);
	}

	.canais__lista {
		grid-template-columns: 1fr;
	}

	.canais {
		margin-top: -30px;
	}

	.rodape__topo {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--md) var(--lg);
	}

	.rodape__marca {
		grid-column: span 2;
	}
}

@media screen and (max-width: 782px) {
	body.admin-bar .cabecalho {
		top: 46px;
	}
}

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

	.pacotes__grade--3 .pacote--destaque {
		grid-column: auto;
	}

	.pacote {
		padding: 26px 22px 24px;
	}

	.pacote__valor {
		font-size: 1.75rem;
	}

	:root {
		--gutter: 20px;
		--xl: 60px;
	}

	.diferenciais__caixa,
	.orcamento__caixa,
	.combinar__caixa,
	.escopo__caixa {
		padding: 34px 24px;
	}

	.entrega__itens,
	.entrega__lado,
	.ficha__inclui,
	.contato__painel,
	.bloco-info,
	.canal {
		padding: 22px 20px;
	}

	.ficha__acoes .btn {
		width: 100%;
	}

	.orcamento__painel {
		padding: 24px 20px;
	}

	.servicos__secundarios,
	.principios__lista,
	.para-quem__lista,
	.detalhes__lista,
	.outros__lista,
	.escopo__colunas,
	.portfolio__grade,
	.blog-home__lista,
	.lista-posts,
	.diferenciais__lista,
	.form__linha,
	.autonomia {
		grid-template-columns: 1fr;
	}

	.servico,
	.servico--destaque {
		padding: 26px 22px;
	}

	.numeros__lista {
		grid-template-columns: 1fr;
		gap: var(--sm);
	}

	.numero {
		flex-direction: row;
		align-items: baseline;
		gap: 12px;
	}

	.numero__valor {
		font-size: 2.1rem;
		min-width: 88px;
	}

	.hero__acoes .btn {
		width: 100%;
	}

	.depoimento--principal .depoimento__texto {
		font-size: 1.15rem;
	}

	/* A tabela comparativa vira lista empilhada: no celular tres colunas de
	   texto ficam ilegiveis, e rolagem lateral em tabela e pior ainda. */
	.comparacao,
	.comparacao thead,
	.comparacao tbody,
	.comparacao tr,
	.comparacao th,
	.comparacao td {
		display: block;
		width: auto;
	}

	.comparacao thead {
		display: none;
	}

	.comparacao tbody tr {
		border-bottom: 1px solid var(--line);
		padding-block: 6px;
	}

	.comparacao tbody tr:last-child {
		border-bottom: 0;
	}

	.comparacao tbody th {
		width: auto;
		background: transparent;
		border-bottom: 0;
		padding-bottom: 4px;
		font-size: 1rem;
	}

	.comparacao td {
		border-bottom: 0;
		padding-block: 6px;
		padding-left: 30px;
		position: relative;
	}

	.comparacao td::before {
		position: absolute;
		left: 12px;
		top: 6px;
		font-weight: 700;
	}

	.comparacao td.comparacao__sim {
		background: transparent;
	}

	.comparacao td.comparacao__sim::before {
		content: "\2713";
		color: var(--signal);
	}

	.comparacao td.comparacao__nao::before {
		content: "\2013";
		color: var(--muted);
	}

	.rodape__topo {
		grid-template-columns: 1fr;
	}

	.rodape__marca {
		grid-column: auto;
	}

	.rodape__base {
		flex-direction: column;
		align-items: flex-start;
	}

	.artigo__nav {
		grid-template-columns: 1fr;
	}

	.artigo__nav-item--proximo {
		text-align: left;
	}

	.form-busca {
		flex-direction: column;
	}

	.zap-flutuante {
		width: 50px;
		height: 50px;
		right: 16px;
		bottom: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}

	.js .reveal {
		opacity: 1;
		transform: none;
	}
}

@media print {
	.cabecalho,
	.zap-flutuante,
	.orcamento,
	.rodape__social {
		display: none;
	}
}

/* Blog: entrada por assunto (silos) e caixa "Comece por aqui" nas categorias. */
.silos-blog {
	padding-block: var(--lg) 0;
}

.silos-blog__lista {
	list-style: none;
	margin: var(--md) 0 0;
	padding: 0;
	display: grid;
	gap: var(--sm);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.silos-blog__lista a {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	padding: 18px 20px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	text-decoration: none;
	color: inherit;
	transition: border-color .2s ease, transform .2s ease;
}

.silos-blog__lista a:hover,
.silos-blog__lista a:focus-visible {
	border-color: var(--blue-500, #2563eb);
	transform: translateY(-2px);
}

.silos-blog__lista strong {
	font-weight: 600;
}

.silos-blog__lista span {
	font-size: .9375rem;
	line-height: 1.5;
	opacity: .8;
}

.silo-comece {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
	padding: 18px 22px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
}

.silo-comece__rotulo {
	margin: 0;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .7;
}

.silo-comece__pilar {
	font-weight: 600;
	text-decoration: none;
}