/* Atendimento — Lins Damasceno Advocacia
   Paleta fechada; sem degradês, sem sombras projetadas.

   As fontes são servidas pelo próprio domínio, e não pelo Google: some uma
   requisição bloqueante para um host externo (com DNS e TLS próprios antes de
   qualquer texto aparecer) e o IP do visitante deixa de ser enviado ao Google —
   o que importa num site que exibe aviso de LGPD. Só os subsets latinos foram
   embarcados; o unicode-range faz o navegador baixar apenas o que a página usa. */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Libre Caslon Display';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/libre-caslon-display-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Libre Caslon Display';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/libre-caslon-display-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--ld-verde: #184733;
	--ld-verde-escuro: #0F2E2A;
	--ld-marfim: #F2F1EC;
	--ld-osso: #FCFCFA;
	--ld-terracota: #A0492C;
	--ld-tinta: #1A1A18;
	--ld-pedra: #8C8B84;
	--ld-linha: #E0DED5;
	--ld-serif: "Libre Caslon Display", Georgia, "Times New Roman", serif;
	--ld-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* O arquivo da marca tem 25% de área transparente em cima e outros 25% embaixo:
	   a marca visível ocupa exatamente metade da altura do PNG (medido no original,
	   2048x1209). --ld-logo-h é a altura do arquivo inteiro; a margem negativa
	   devolve esse vazio ao layout, e o que se vê na tela é metade deste valor.
	   Trocar a logo por outro arquivo pede conferir essa proporção de novo. */
	--ld-logo-h: 7rem;
}

body.ld-atd-page {
	margin: 0;
	/* O campo verde é o fundo da página inteira; a folha clara flutua sobre ele.
	   Marfim sobre verde-negro é o par de maior contraste do guia (12,8:1), e a
	   composição se resolve em massa de cor — sem degradê, sem sombra. */
	background: var(--ld-verde-escuro);
	color: var(--ld-tinta);
	font-family: var(--ld-sans);
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}

/* O próprio container também: sem isto o min-height de 100svh soma o padding
   e a página fica mais alta que a tela por alguns pixels. */
#ld-atd-root,
#ld-atd-root *,
#ld-atd-root *::before,
#ld-atd-root *::after { box-sizing: border-box; }

/* ---------- campo ---------- */
/* O root é só o campo verde: quem tem largura máxima e fundo claro é a folha.
   O JS acrescenta padding-bottom aqui quando o aviso de cookies está na tela —
   por isso o rodapé mora dentro do root, e a folga extra nasce embaixo dele. */
#ld-atd-root {
	display: flex;
	flex-direction: column;
	min-height: 100svh;
	background: var(--ld-verde-escuro);
	overflow-x: hidden;
}

/* ---------- folha ---------- */
#ld-atd-root .ld-atd__sheet {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
	width: 100%;
	max-width: 45rem;
	margin: 0 auto;
	padding: 2rem 1.5rem 2.75rem;
	background: var(--ld-marfim);
}

/* O único acento de terracota da tela, na aresta de cima da folha. */
#ld-atd-root .ld-atd__sheet::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: var(--ld-terracota);
}

/* ---------- topo ---------- */
#ld-atd-root .ld-atd__top { padding: 0 0 1.75rem; }

/* A margem negativa recorta o vazio transparente do arquivo: a marca encosta
   na margem superior da folha em vez de flutuar no meio de um bloco vazio.
   object-fit protege a proporção caso a largura precise ser limitada. */
#ld-atd-root .ld-atd__logo {
	display: block;
	width: auto;
	height: var(--ld-logo-h);
	max-width: 100%;
	object-fit: contain;
	object-position: left center;
	margin-block: calc(var(--ld-logo-h) * -0.25);
}

#ld-atd-root .ld-atd__wordmark {
	display: block;
	font-family: var(--ld-serif);
	font-size: 1.75rem;
	line-height: 1.15;
	color: var(--ld-verde-escuro);
	letter-spacing: .02em;
}

/* ---------- progresso ---------- */
#ld-atd-root .ld-atd__progress { padding: 0 0 2.5rem; }

#ld-atd-root .ld-atd__progress-label {
	margin: 0 0 .625rem;
	font-size: .6875rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ld-terracota);
}

#ld-atd-root .ld-atd__progress-track {
	height: 2px;
	background: var(--ld-linha);
	position: relative;
	overflow: hidden;
}

#ld-atd-root .ld-atd__progress-fill {
	display: block;
	height: 100%;
	width: 0;
	background: var(--ld-terracota);
	transition: width .38s ease;
}

/* ---------- etapa ---------- */
/* Sem centragem vertical: em tela alta ela empurrava a pergunta para o meio e
   o vazio acima lia como falha de carregamento, não como respiro.
   A pergunta fica ancorada no topo e as ações descem para o fim da área útil —
   assim a sobra de altura vira estrutura, e no celular o botão cai perto do polegar. */
#ld-atd-root .ld-atd__stage {
	flex: 1 1 auto;
	display: flex;
}

#ld-atd-form {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
}

/* A ancoragem no rodapé vale no celular, onde ela aproxima o botão do polegar.
   Na janela alta do monitor ela deixava o botão órfão, longe da pergunta: ali o
   conteúdo simplesmente flui do topo.
   A condição é de largura, e não só de altura: celular de tela grande passa de
   46rem de altura e ficava de fora, com a pergunta no topo e o botão logo abaixo,
   sobrando meia tela vazia embaixo. */
@media (max-width: 47.99rem), (max-height: 46rem) {
	#ld-atd-root .ld-atd__step { margin-bottom: auto; }
}

#ld-atd-root .ld-atd__step { animation: ld-in .34s ease both; }

@keyframes ld-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

#ld-atd-root .ld-atd__title {
	font-family: var(--ld-serif);
	font-weight: 400;
	color: var(--ld-verde-escuro);
	font-size: clamp(1.625rem, 5.4vw, 2.375rem);
	line-height: 1.18;
	margin: 0 0 .875rem;
	letter-spacing: -.012em;
	max-width: 22ch;
}

#ld-atd-root .ld-atd__title:focus { outline: none; }

/* Texto de apoio em tinta, não em cinza-pedra: pedra sobre marfim dá 2,9:1 e
   some na tela do celular ao sol. A hierarquia é feita por corpo e entrelinha —
   o cinza fica para fio, borda e marca de seleção, onde contraste não é leitura. */
#ld-atd-root .ld-atd__help {
	margin: 0 0 1.75rem;
	color: var(--ld-tinta);
	font-size: .9375rem;
	line-height: 1.6;
	max-width: 34rem;
}

#ld-atd-root .ld-atd__title + .ld-atd__fields,
#ld-atd-root .ld-atd__title + .ld-atd__options { margin-top: 1.75rem; }

/* ---------- campos ---------- */
#ld-atd-root .ld-atd__field { margin: 0 0 1.25rem; }

#ld-atd-root .ld-atd__label {
	display: block;
	margin: 0 0 .5rem;
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ld-verde-escuro);
}

#ld-atd-root .ld-atd__input,
#ld-atd-root .ld-atd__textarea {
	width: 100%;
	font-family: var(--ld-sans);
	font-size: 1rem; /* 16px: impede o zoom automático do Safari no iPhone */
	line-height: 1.5;
	color: var(--ld-tinta);
	background: var(--ld-osso);
	border: 1px solid var(--ld-linha);
	border-radius: 0;
	padding: 1rem 1.125rem;
	min-height: 3.375rem;
	appearance: none;
	transition: border-color .18s ease;
}

#ld-atd-root .ld-atd__textarea { min-height: 8.5rem; resize: vertical; }

#ld-atd-root .ld-atd__input:hover,
#ld-atd-root .ld-atd__textarea:hover { border-color: var(--ld-pedra); }

#ld-atd-root .ld-atd__input:focus-visible,
#ld-atd-root .ld-atd__textarea:focus-visible,
#ld-atd-root .ld-atd__btn:focus-visible,
#ld-atd-root .ld-atd__option:focus-within,
#ld-atd-root .ld-atd__card:focus-within,
#ld-atd-root .ld-atd__day:focus-visible,
#ld-atd-root .ld-atd__rodape a:focus-visible {
	outline: 2px solid var(--ld-verde);
	outline-offset: 2px;
}

#ld-atd-root .ld-atd__rodape a:focus-visible { outline-color: var(--ld-marfim); }

#ld-atd-root .ld-atd__input:focus,
#ld-atd-root .ld-atd__textarea:focus { border-color: var(--ld-verde); }

#ld-atd-root .ld-atd__input[aria-invalid="true"],
#ld-atd-root .ld-atd__textarea[aria-invalid="true"] { border-color: var(--ld-terracota); }

#ld-atd-root .ld-atd__counter {
	display: block;
	margin: .5rem 0 0;
	font-size: .8125rem;
	color: var(--ld-tinta);
	text-align: right;
}

#ld-atd-root .ld-atd__counter[data-limit="true"] { color: var(--ld-terracota); }

#ld-atd-root .ld-atd__hint { margin: .5rem 0 0; font-size: .8125rem; color: var(--ld-tinta); }

#ld-atd-root .ld-atd__error {
	margin: .5rem 0 0;
	font-size: .875rem;
	color: var(--ld-terracota);
	line-height: 1.45;
}

#ld-atd-form-error { margin: 1.25rem 0 0; }

/* ---------- opções ---------- */
#ld-atd-root .ld-atd__options { display: flex; flex-direction: column; gap: .5rem; margin: 0; padding: 0; border: 0; }

/* A legend existe para agrupar o rádio no leitor de tela, mas o título visível
   da etapa já diz a mesma coisa — então ela fica acessível e fora da tela. */
#ld-atd-root legend {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

#ld-atd-root .ld-atd__option {
	display: flex;
	align-items: center;
	gap: .875rem;
	min-height: 3.5rem;
	padding: .875rem 1rem;
	background: var(--ld-osso);
	border: 1px solid var(--ld-linha);
	cursor: pointer;
	transition: border-color .18s ease, background-color .18s ease;
}

#ld-atd-root .ld-atd__option:hover { border-color: var(--ld-pedra); }

#ld-atd-root .ld-atd__option input { position: absolute; opacity: 0; width: 1px; height: 1px; }

#ld-atd-root .ld-atd__mark {
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	border: 1px solid var(--ld-pedra);
	border-radius: 50%;
	position: relative;
}

#ld-atd-root .ld-atd__option-text { font-size: 1rem; line-height: 1.4; color: var(--ld-tinta); }

/* Selecionado: borda verde e fundo osso continuam, mas a marca ganha peso —
   é o estado que o polegar precisa reconhecer sem ler. */
#ld-atd-root .ld-atd__option[data-checked="true"] { border-color: var(--ld-verde); box-shadow: inset 0 0 0 1px var(--ld-verde); }

#ld-atd-root .ld-atd__option[data-checked="true"] .ld-atd__mark { border-color: var(--ld-verde); }

#ld-atd-root .ld-atd__option[data-checked="true"] .ld-atd__mark::after {
	content: "";
	position: absolute;
	inset: 3px;
	background: var(--ld-verde);
	border-radius: 50%;
}

#ld-atd-root .ld-atd__option[data-checked="true"] .ld-atd__option-text { color: var(--ld-verde-escuro); font-weight: 500; }

/* cartões do direcionamento */
#ld-atd-root .ld-atd__cards { display: grid; gap: .75rem; grid-template-columns: 1fr; }

@media (min-width: 30rem) {
	#ld-atd-root .ld-atd__cards { grid-template-columns: 1fr 1fr; }
}

#ld-atd-root .ld-atd__card {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 6.5rem;
	padding: 1.5rem 1rem;
	background: var(--ld-osso);
	border: 1px solid var(--ld-linha);
	cursor: pointer;
	font-family: var(--ld-serif);
	font-size: 1.3125rem;
	color: var(--ld-verde-escuro);
	transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

#ld-atd-root .ld-atd__card:hover { border-color: var(--ld-pedra); }

#ld-atd-root .ld-atd__card input { position: absolute; opacity: 0; width: 1px; height: 1px; }

/* O cartão escolhido vira massa verde: a escolha se lê de longe, e a borda de
   2px não muda mais a caixa (o box-shadow interno não ocupa espaço). */
#ld-atd-root .ld-atd__card[data-checked="true"] {
	background: var(--ld-verde);
	border-color: var(--ld-verde);
	color: var(--ld-marfim);
}

/* ---------- contato e verificação ---------- */

#ld-atd-root .ld-atd__status {
	display: block;
	margin: .625rem 0 0;
	font-size: .875rem;
	line-height: 1.45;
	color: var(--ld-tinta);
}

#ld-atd-root .ld-atd__status[data-tone="ok"] { color: var(--ld-verde); font-weight: 500; }

#ld-atd-root .ld-atd__status[data-tone="err"] { color: var(--ld-terracota); }

/* ---------- dias e períodos ---------- */
#ld-atd-root .ld-atd__days { display: grid; gap: .5rem; grid-template-columns: 1fr; margin: 0 0 2rem; }

@media (min-width: 30rem) {
	#ld-atd-root .ld-atd__days { grid-template-columns: 1fr 1fr; }
}

#ld-atd-root .ld-atd__day {
	display: flex;
	flex-direction: column;
	gap: .125rem;
	min-height: 3.5rem;
	padding: .8125rem 1rem;
	background: var(--ld-osso);
	border: 1px solid var(--ld-linha);
	cursor: pointer;
	text-align: left;
	transition: border-color .18s ease;
}

#ld-atd-root .ld-atd__day:hover { border-color: var(--ld-pedra); }

#ld-atd-root .ld-atd__day input { position: absolute; opacity: 0; width: 1px; height: 1px; }

#ld-atd-root .ld-atd__day[data-checked="true"] { border-color: var(--ld-verde); box-shadow: inset 0 0 0 1px var(--ld-verde); }

#ld-atd-root .ld-atd__day-name { font-size: 1rem; color: var(--ld-tinta); }

#ld-atd-root .ld-atd__day[data-checked="true"] .ld-atd__day-name { color: var(--ld-verde-escuro); font-weight: 500; }

#ld-atd-root .ld-atd__day-date { font-size: .8125rem; color: var(--ld-tinta); }

#ld-atd-root .ld-atd__subtitle {
	font-family: var(--ld-serif);
	font-weight: 400;
	color: var(--ld-verde-escuro);
	font-size: 1.375rem;
	line-height: 1.3;
	margin: 0 0 1.25rem;
}

/* Em telas estreitas, três colunas espremem o rótulo até quebrar. */
#ld-atd-root .ld-atd__periods { display: grid; gap: .5rem; grid-template-columns: 1fr; }

@media (min-width: 24rem) {
	#ld-atd-root .ld-atd__periods { grid-template-columns: repeat(3, 1fr); }
	#ld-atd-root .ld-atd__periods .ld-atd__option { padding: .875rem .75rem; gap: .625rem; }
	#ld-atd-root .ld-atd__periods .ld-atd__option-text { white-space: nowrap; }
}

#ld-atd-root .ld-atd__note {
	margin: 1.5rem 0 0;
	padding: 0 0 0 .875rem;
	border-left: 2px solid var(--ld-terracota);
	color: var(--ld-tinta);
	font-size: .875rem;
	line-height: 1.55;
}

/* ---------- ações ---------- */
#ld-atd-root .ld-atd__actions {
	display: flex;
	gap: .75rem;
	align-items: center;
	margin: 3rem 0 0;
	padding: 1.5rem 0 0;
	border-top: 1px solid var(--ld-linha);
}

#ld-atd-root .ld-atd__btn {
	font-family: var(--ld-sans);
	font-size: .9375rem;
	font-weight: 500;
	letter-spacing: .04em;
	min-height: 3.25rem;
	padding: .9375rem 2rem;
	border-radius: 0;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

#ld-atd-root .ld-atd__btn--solid {
	margin-left: auto;
	background: var(--ld-verde);
	color: var(--ld-marfim);
	flex: 0 0 auto;
	min-width: 9.5rem;
}

#ld-atd-root .ld-atd__btn--solid:hover:not(:disabled) { background: var(--ld-verde-escuro); }

/* Desabilitado precisa ler como "ainda não", e não como elemento quebrado:
   contorno visível em cinza-pedra, virando verde sólido quando libera. */
#ld-atd-root .ld-atd__btn--solid:disabled {
	background: transparent;
	color: var(--ld-pedra);
	border-color: var(--ld-pedra);
	cursor: not-allowed;
}

#ld-atd-root .ld-atd__btn--ghost {
	background: transparent;
	color: var(--ld-verde-escuro);
	border-color: var(--ld-linha);
	padding: .875rem 1.25rem;
}

#ld-atd-root .ld-atd__btn--ghost:hover { color: var(--ld-verde-escuro); border-color: var(--ld-pedra); }

/* ---------- confirmação ---------- */
#ld-atd-root .ld-atd__done { padding: 1rem 0 0; animation: ld-in .38s ease both; }

#ld-atd-root .ld-atd__done-title {
	font-family: var(--ld-serif);
	font-weight: 400;
	color: var(--ld-verde-escuro);
	font-size: clamp(1.75rem, 6vw, 2.5rem);
	line-height: 1.18;
	margin: 0 0 1rem;
}

#ld-atd-root .ld-atd__done-text { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--ld-tinta); max-width: 30rem; }

#ld-atd-root .ld-atd__rule { width: 3rem; height: 2px; background: var(--ld-terracota); margin: 0 0 1.75rem; }

/* ---------- rodapé, sobre o campo verde ---------- */
#ld-atd-root .ld-atd__rodape {
	flex: 0 0 auto;
	padding: 1.5rem 1.5rem calc(1.75rem + env(safe-area-inset-bottom, 0px));
	text-align: center;
}

#ld-atd-root .ld-atd__rodape-marca {
	margin: 0;
	font-family: var(--ld-serif);
	font-size: 1.0625rem;
	line-height: 1.3;
	letter-spacing: .06em;
	color: var(--ld-marfim);
}

#ld-atd-root .ld-atd__rodape-nota { margin: .5rem 0 0; font-size: .8125rem; }

#ld-atd-root .ld-atd__rodape a {
	color: var(--ld-marfim);
	text-decoration: none;
	/* Terracota sobre verde é 2,4:1 — não serve para texto, mas serve para fio.
	   O texto fica marfim e o acento vira o sublinhado. */
	border-bottom: 1px solid var(--ld-terracota);
	padding-bottom: 1px;
}

#ld-atd-root .ld-atd__rodape a:hover { border-bottom-color: var(--ld-marfim); }

/* ---------- utilidades ---------- */
#ld-atd-root .ld-atd__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

#ld-atd-root .ld-atd__noscript {
	padding: 1rem;
	border: 1px solid var(--ld-terracota);
	color: var(--ld-terracota);
}

#ld-atd-root[data-state="loading"] .ld-atd__stage { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
	#ld-atd-root *,
	#ld-atd-root *::before,
	#ld-atd-root *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

/* ------------------------------------------------------------------
   Blindagem contra o CSS global do tema e do kit do Elementor.
   O id do container dá a especificidade necessária sem !important.
   ------------------------------------------------------------------ */

#ld-atd-root fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

/* O reset.css do tema declara button{display:inline-block} depois de [hidden],
   então o atributo precisa de reforço aqui dentro. */
#ld-atd-root [hidden] { display: none !important; }

#ld-atd-root button { text-transform: none; letter-spacing: normal; }
#ld-atd-root label { margin: 0; }
#ld-atd-root p { margin-top: 0; }


/* ------------------------------------------------------------------
   Capa — primeira tela.
   Quem chega das redes sociais lê o que é o escritório antes de decidir
   preencher. Medida curta e hierarquia pelo corpo do texto; o acento de
   terracota da tela é o fio no alto da folha, e não se repete aqui.
   ------------------------------------------------------------------ */

#ld-atd-root .ld-atd__capa {
	max-width: 34rem;
	flex: 0 1 auto;
	padding: 0;
}

#ld-atd-root .ld-atd__capa p {
	margin: 0 0 1.25rem;
	font-size: .9375rem;
	line-height: 1.7;
	color: var(--ld-tinta);
}

/* O primeiro parágrafo diz quem é o escritório: fica com mais presença. */
#ld-atd-root .ld-atd__capa p:first-of-type {
	font-size: 1.0625rem;
	line-height: 1.65;
}

/* Assinatura institucional: um filete e o mote do escritório na serifada, no
   lugar onde o papel timbrado assina. É o segundo e último uso do acento —
   terracota no fio, verde-escuro no texto, que é a divisão de trabalho do guia
   (terracota tem contraste de fio, não de leitura).
   Caixa baixa, e não versalete: o mote já tem a ênfase da exclamação, e caixa
   alta em cima disso viraria grito — que é o oposto do que a página quer. */
#ld-atd-root .ld-atd__capa .ld-atd__assinatura {
	margin: 2.25rem 0 1.25rem;
	font-family: var(--ld-serif);
	font-size: 1.1875rem;
	line-height: 1.4;
	letter-spacing: .01em;
	color: var(--ld-verde-escuro);
}

#ld-atd-root .ld-atd__assinatura-fio {
	display: inline-block;
	width: 1.75rem;
	height: 1px;
	margin: 0 .875rem .2em 0;
	background: var(--ld-terracota);
	vertical-align: middle;
}

#ld-atd-root .ld-atd__capa-acao {
	margin: 2.25rem 0 0;
	padding: 1.75rem 0 0;
	border-top: 1px solid var(--ld-linha);
}

/* Na actions o botão é empurrado para a direita; aqui ele começa na margem. */
#ld-atd-root .ld-atd__capa-acao .ld-atd__btn--solid {
	margin-left: 0;
	min-width: 11rem;
}

/* Enquanto a capa manda, o formulário não existe na tela. */
#ld-atd-root[data-state="capa"] .ld-atd__stage,
#ld-atd-root[data-state="loading"] .ld-atd__stage { display: none; }

/* ------------------------------------------------------------------
   Celular
   ------------------------------------------------------------------ */

@media (max-width: 47.99rem) {
	/* A folha vai de borda a borda e cresce pelo flex do campo — nunca por uma
	   altura fixa em svh. É isso que a mantém dentro da área livre quando o JS
	   reserva espaço para o aviso de cookies: sem isso, ela passaria por baixo
	   dele e levaria junto o botão de ação. */

	/* Com a folha esticada, o vazio embaixo do texto vira posição de botão:
	   a ação desce para a base da tela, onde o polegar já está. */
	#ld-atd-root .ld-atd__capa {
		flex: 1 0 auto;
		display: flex;
		flex-direction: column;
	}

	#ld-atd-root .ld-atd__capa-acao { margin-top: auto; }

	/* A folga acima do fio precisa vir do parágrafo, e não de uma margem na
	   própria ação: quando a tela é curta o `auto` vira zero, e sem isto o fio
	   encostaria na última linha do texto. */
	#ld-atd-root .ld-atd__capa p:last-of-type { margin-bottom: 1.75rem; }

	/* Botão de largura cheia: alvo de toque maior e leitura de "próximo passo". */
	#ld-atd-root .ld-atd__capa-acao .ld-atd__btn--solid { width: 100%; }
	#ld-atd-root .ld-atd__actions .ld-atd__btn--solid { flex: 1 1 auto; min-width: 0; }
	#ld-atd-root .ld-atd__actions .ld-atd__btn--ghost { flex: 0 0 auto; }
}

/* Em telas de celular, o texto inteiro mais o botão passavam da dobra por poucos
   pixels — e um botão de início fora da tela custa caro. O ajuste abaixo é só de
   ritmo: nenhuma palavra some, o Iniciar entra no primeiro quadro. */
@media (max-width: 30rem) {
	#ld-atd-root .ld-atd__sheet { padding-top: 1.75rem; }
	#ld-atd-root .ld-atd__top { padding-bottom: 1.5rem; }
	#ld-atd-root .ld-atd__capa p { margin-bottom: 1rem; line-height: 1.65; }
	#ld-atd-root .ld-atd__capa p:first-of-type { font-size: 1rem; line-height: 1.6; }
	#ld-atd-root .ld-atd__capa-acao { padding-top: 1.5rem; }
}

/* Telas curtas (iPhone com a barra do navegador ocupando espaço): recupera os
   últimos pixels só com ritmo — margens, entrelinha e a marca um pouco menor.
   Nenhum corpo de texto desce de 15px, para não brigar com a legibilidade. */
@media (max-width: 30rem) and (max-height: 46rem) {
	#ld-atd-root { --ld-logo-h: 5.75rem; }
	#ld-atd-root .ld-atd__sheet { padding-top: 1.375rem; padding-bottom: 2rem; }
	#ld-atd-root .ld-atd__top { padding-bottom: 1.25rem; }
	#ld-atd-root .ld-atd__capa p { margin-bottom: .875rem; line-height: 1.6; }
	#ld-atd-root .ld-atd__capa p:first-of-type { line-height: 1.5; }
	#ld-atd-root .ld-atd__capa p:last-of-type { margin-bottom: 1.125rem; }
	#ld-atd-root .ld-atd__capa .ld-atd__assinatura { margin-top: 1.5rem; }
	#ld-atd-root .ld-atd__capa-acao { padding-top: 1.125rem; }
	#ld-atd-root .ld-atd__rodape { padding-top: 1.125rem; padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); }
}

/* ------------------------------------------------------------------
   Desktop — a folha deixa de ocupar a tela inteira e passa a flutuar
   no campo verde, com o rodapé preso embaixo.
   ------------------------------------------------------------------ */

@media (min-width: 48rem) {
	#ld-atd-root {
		--ld-logo-h: 9rem;
		padding: 2.75rem 2rem 0;
	}

	#ld-atd-root .ld-atd__sheet {
		flex: 0 0 auto;
		padding: 3rem 3.5rem 3.25rem;
	}

	#ld-atd-root .ld-atd__top { padding-bottom: 2.25rem; }

	/* O rodapé desce para a base da janela: entre ele e a folha fica o campo
	   verde, que é o que dá altura e ar à composição no monitor. */
	#ld-atd-root .ld-atd__rodape { margin-top: auto; padding-top: 2rem; }

	/* Aqui há largura para o parágrafo de abertura virar o que ele é: a fala
	   institucional do escritório, na serifada do guia. */
	#ld-atd-root .ld-atd__capa p:first-of-type {
		font-family: var(--ld-serif);
		font-size: 1.4375rem;
		line-height: 1.45;
		color: var(--ld-verde-escuro);
		margin-bottom: 1.5rem;
	}

	#ld-atd-root .ld-atd__capa p { font-size: .96875rem; }

	#ld-atd-root .ld-atd__capa .ld-atd__assinatura {
		margin-top: 2.75rem;
		font-size: 1.3125rem;
	}
}

@media (min-width: 64rem) {
	#ld-atd-root { padding-top: 3.5rem; }
}

/* Notebook de tela baixa (1280x800 e parecidos, onde sobram ~700px de janela):
   a composição inteira encolhe um degrau para caber com o rodapé, em vez de
   empurrar metade do campo verde para fora da dobra. Só ritmo — nada some. */
@media (min-width: 48rem) and (max-height: 48rem) {
	#ld-atd-root {
		--ld-logo-h: 7.5rem;
		padding-top: 1.75rem;
	}

	#ld-atd-root .ld-atd__sheet { padding: 2.25rem 3rem 2.5rem; }
	#ld-atd-root .ld-atd__top { padding-bottom: 1.75rem; }

	#ld-atd-root .ld-atd__capa p { margin-bottom: 1rem; }

	#ld-atd-root .ld-atd__capa p:first-of-type {
		font-size: 1.3125rem;
		margin-bottom: 1.25rem;
	}

	#ld-atd-root .ld-atd__capa-acao { margin-top: 1.75rem; padding-top: 1.5rem; }
	#ld-atd-root .ld-atd__rodape { padding-top: 1.75rem; padding-bottom: 1.5rem; }
}