/*
 * Dra. Thais Figueiredo · folha unica do tema.
 * Projeto Gerado pelo Prompt Mestre do Desenvolvedor e Vibe Coder Dante Testa · www.dantetesta.com.br
 *
 * ============================================================================
 * GEOMETRIA MEDIDA DAS REFERENCIAS (R97) · leia ANTES de mexer em qualquer valor
 * Medido com medir-ref.mjs @1440. Nao ajuste "no olho": confira contra a tabela.
 * ============================================================================
 *
 * dimensao          ref1 clinicmaster  ref2 medenin  ref3 nischinto  ref4 medive*  AQUI
 * ------------------------------------------------------------------------------------
 * h1                55/700/1.20        55/700/1.20   60/600/1.20     80/500/1.10   76/400/1.08
 * h2                38/700             40/500        60/500          55/400        46/400
 * h3                20/600             26/600        20/600          24/500        24/700 SANS
 * corpo             20/300             18/500        15/400          16            17/400/1.7
 * razao display/corpo 2,75             3,05          4,00            5,00          4,47
 * raio dominante    0px (373 el.)      0px (497 el.) 0px (1105 el.)  0px (789 el.) 0 em tudo
 * container         1330/1440          1120          1110            1200          1200
 * coluna de leitura 730                1090          640             600 (69x)     600
 * respiro de secao  70/40              90/90 80/130  15/15           150/0 125/125 120/120
 * altura de botao   60                 46-51         42-48           54-56         56
 * raio de botao     50 (pilula)        6-32          7               0             0
 * rotulo de botao   18/400             13/400        15/600          14/600        14/600 ls.06
 * superficie        #FFFFFF            #FFFFFF       #FFFFFF         #F6F6F6+#ECE9DF  #EFE7DF
 * cor de acao       #DB479D            #4D72D0       #0CB8B6         #F8C894       #8E6759
 *
 * (*) ref4 medive e a ANCORA: unica cuja paleta medida por area ja e quase a
 *     paleta oficial da Dra. Thais. Raio 0 nao e detalhe, e o GENERO da peca.
 *
 * DUAS DIVERGENCIAS DELIBERADAS EM RELACAO A ANCORA:
 *  1. Razao 4,47 e nao 5,0. O texto e portugues, com palavras mais longas;
 *     a 80px a manchete quebra em tres linhas.
 *  2. A medive resolve a faixa escura com grafite #343434. Aqui isso e
 *     PROIBIDO: a ata da cliente restringe o grafite a texto e detalhe,
 *     nunca a fundo. A superficie escura do site e salvia aprofundada.
 *
 * CONTRASTE: a paleta oficial e de SUPERFICIE, nao de tinta. Medido:
 *   branco sobre #A67C6D = 3,67:1  -> reprova AA em rotulo de 14px
 *   #7A8F7A sobre areia  = 2,85:1  -> reprova AA em eyebrow de 13px
 * Por isso existem os tokens --acento-acao e --salvia-tinta, escurecidos ate
 * passar. Nao troque um pelo outro sem rodar _docs/dev/verificar-contraste.mjs.
 * ============================================================================
 */

/* ---------------------------------------------------------------- FONTES ---
 * Self-hosted: fonte externa e requisicao bloqueante de terceiro no caminho
 * critico, e manda o IP de quem abre a pagina para o Google.
 * O subset latin-ext so baixa se algum caractere pedir. Portugues inteiro
 * cabe no latin (U+0000-00FF), entao na pratica ele nunca desce.
 */
@font-face {
	font-family: 'Newsreader';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('../fontes/newsreader-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: 'Newsreader';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('../fontes/newsreader-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: 'Hanken Grotesk';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fontes/hanken-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: 'Hanken Grotesk';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fontes/hanken-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;
}

/* ---------------------------------------------------------------- TOKENS --- */
:root {
	/* Paleta oficial da marca (deck da agencia, lida por ampliacao). */
	--acento: #A67C6D;          /* rose. SUPERFICIE, nao tinta. */
	--areia: #DCC7B8;
	--salvia: #7A8F7A;          /* SUPERFICIE e detalhe, nao tinta. */
	--grafite: #4B4B4B;         /* texto e detalhe. PROIBIDO em fundo (ata). */

	/* Derivados de superficie. */
	--papel: #EFE7DF;           /* superficie dominante da pagina */
	--papel-alto: #F6F1EB;      /* superficie levantada */
	--escuro: #3E4A3F;          /* salvia aprofundada, a unica superficie escura */

	/* Derivados de TINTA, escurecidos ate passar AA. Ver bloco CONTRASTE. */
	--tinta: #3F3B38;           /* 9,07:1 sobre --papel */
	--tinta-suave: #5C5651;     /* corpo secundario */
	--acento-acao: #8E6759;     /* 4,96:1 com branco. Fundo de botao. */
	--acento-tinta: #7A5849;    /* 5,17:1 sobre --papel. Texto pequeno em acento. */
	--salvia-tinta: #4F5F50;    /* 5,57:1 sobre --papel. Eyebrow. */

	--filete: #C9BBAF;          /* separador de 1px */
	--filete-escuro: #6B7A6C;   /* separador sobre superficie escura */

	/* Tipografia. */
	--display: 'Newsreader', Georgia, 'Times New Roman', serif;
	--corpo: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	/* Geometria medida. */
	--container: 1200px;
	--leitura: 600px;
	--respiro: 104px;
	--respiro-curto: 68px;
	--borda-pagina: 24px;
	--botao-altura: 56px;
	--altura-header: 88px;

	/* Raio ZERO e decisao de genero, nao de gosto. Ver tabela no topo. */
	--raio: 0px;
}

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

html {
	/*
	 * O drawer off-canvas e `fixed` e escapa do overflow do body, entao o corte
	 * horizontal precisa estar aqui tambem, nao so no body (R86).
	 */
	overflow-x: hidden;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

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

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

body {
	margin: 0;
	overflow-x: hidden;
	background: var(--papel);
	color: var(--tinta);
	font-family: var(--corpo);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

/*
 * <picture> mede 0x0 e engana verificador de overflow. Sem isto, o pipeline
 * de WebP gera falso positivo na varredura (licao registrada).
 */
picture {
	display: contents;
}

svg {
	display: block;
	fill: none;
}

/* <figure> e <blockquote> nascem com margem do navegador. */
figure,
blockquote {
	margin: 0;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

/* Foco visivel de verdade, em qualquer superficie. */
:focus-visible {
	outline: 2px solid var(--acento-acao);
	outline-offset: 3px;
}

.dt-escuro :focus-visible {
	outline-color: var(--areia);
}

/* Pular para o conteudo. */
.dt-pular {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--escuro);
	color: #fff;
	padding: 14px 20px;
	font: 600 14px/1 var(--corpo);
}

.dt-pular:focus {
	left: 0;
}

.dt-oculto-visual {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------ TIPOGRAFIA ---
 * REGRA DA SERIFA: display so em h1/h2 e frase-manifesto. Da h3 para baixo, sans.
 * Serifa de display em h3, FAQ e card cansa, e o cliente sente antes de saber
 * explicar. Ao migrar para sans, compensar: sans le maior no mesmo corpo, entao
 * h3 desce para 24 e h4 para 18, e o peso sobe para 700 senao a hierarquia some.
 */
h1,
h2,
.dt-manifesto {
	font-family: var(--display);
	font-weight: 400;
	letter-spacing: -0.005em;
	margin: 0;
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.375rem, 1.55rem + 3.4vw, 4.75rem); /* 38px -> 76px */
	line-height: 1.08;
}

h2 {
	font-size: clamp(1.875rem, 1.45rem + 1.75vw, 2.875rem); /* 30px -> 46px */
	line-height: 1.15;
}

h3,
h4 {
	font-family: var(--corpo);
	font-weight: 700;
	letter-spacing: -0.003em;
	margin: 0;
	line-height: 1.3;
}

h3 {
	font-size: 1.5rem; /* 24px */
}

h4 {
	font-size: 1.125rem; /* 18px */
}

p {
	margin: 0 0 1.15em;
	max-width: var(--leitura);
}

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

.dt-manifesto {
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
	line-height: 1.3;
	max-width: 20ch;
}

/* Eyebrow: rotulo de contexto acima do titulo. */
.dt-eyebrow {
	display: block;
	font: 600 0.8125rem/1.2 var(--corpo); /* 13px */
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--salvia-tinta);
	margin: 0 0 1.25rem;
}

.dt-escuro .dt-eyebrow {
	color: var(--areia);
}

.dt-lead {
	font-size: 1.1875rem; /* 19px */
	line-height: 1.65;
	color: var(--tinta-suave);
}

.dt-escuro {
	background: var(--escuro);
	color: var(--papel);
}

.dt-escuro .dt-lead,
.dt-escuro p {
	color: #E4DFD6;
}

/* --------------------------------------------------------------- LAYOUT --- */
.dt-container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--borda-pagina);
}

.dt-secao {
	padding-block: var(--respiro);
}

.dt-secao--curta {
	padding-block: var(--respiro-curto);
}

.dt-cabeca {
	max-width: var(--leitura);
	margin-bottom: 3.5rem;
}

/* --------------------------------------------------------------- BOTOES ---
 * Raio 0, 56px de altura, rotulo 14/600. Numeros da ancora, nao do gosto.
 */
.dt-botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	min-height: var(--botao-altura);
	padding: 0 2.125rem;
	border: 1px solid transparent;
	border-radius: var(--raio);
	background: var(--acento-acao);
	color: #fff;
	font: 600 0.875rem/1 var(--corpo); /* 14px */
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.dt-botao:hover,
.dt-botao:focus-visible {
	background: #7A5849;
}

.dt-botao--vazado {
	background: transparent;
	color: var(--tinta);
	border-color: var(--tinta);
}

.dt-botao--vazado:hover,
.dt-botao--vazado:focus-visible {
	background: var(--tinta);
	color: var(--papel);
}

.dt-escuro .dt-botao--vazado {
	color: var(--papel);
	border-color: var(--areia);
}

.dt-escuro .dt-botao--vazado:hover,
.dt-escuro .dt-botao--vazado:focus-visible {
	background: var(--areia);
	color: var(--tinta);
}

.dt-botao svg {
	width: 18px;
	height: 18px;
	flex: none;
	stroke: currentColor;
	stroke-width: 1.75;
	fill: none;
}

/* Link de texto com filete, quando um segundo botao seria ruido. */
.dt-link-texto {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font: 600 0.9375rem/1 var(--corpo);
	color: var(--tinta);
	text-decoration: none;
	border-bottom: 1px solid var(--filete);
	padding-bottom: 0.375rem;
	transition: border-color 0.2s ease;
}

.dt-link-texto:hover,
.dt-link-texto:focus-visible {
	border-color: var(--acento-acao);
}

/* ------------------------------------------------- ASSINATURA 1: REGUA ---
 * Regua das fases: tres rotulos ligados por filete de 1px, o ativo em acento.
 * Nasce do posicionamento da marca ("cuidado em todas as fases"), nao de
 * repertorio. Aparece na dobra e volta uma vez como navegador da secao 5.
 */
.dt-regua {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.875rem;
	margin: 0 0 1.75rem;
	padding: 0;
	list-style: none;
	font: 600 0.75rem/1.2 var(--corpo); /* 12px */
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--salvia-tinta);
}

.dt-regua__traco {
	width: 26px;
	height: 1px;
	background: var(--filete);
	flex: none;
}

.dt-regua__item--ativo {
	color: var(--acento-tinta);
}

/* --------------------------------------- ASSINATURA 3: FILETE TIPOGRAFICO ---
 * Substitui card e sombra em toda a pagina. Zero box-shadow no tema.
 */
.dt-filete {
	border: 0;
	border-top: 1px solid var(--filete);
	margin: 0;
}

.dt-escuro .dt-filete {
	border-color: var(--filete-escuro);
}

/* ================================================================ HEADER === */
.dt-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	transition: background-color 0.3s ease, border-color 0.3s ease;
	border-bottom: 1px solid transparent;
}

.dt-header.esta-preso {
	background: var(--papel);
	border-bottom-color: var(--filete);
}

.dt-header__linha {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 88px;
}

.dt-marca {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: var(--tinta);
	flex: none;
}

.dt-marca svg {
	height: 42px;
	width: auto;
}

.dt-nav {
	display: flex;
	align-items: center;
	gap: 2rem;
	margin-left: auto;
}

.dt-nav a {
	font: 500 0.9375rem/1 var(--corpo);
	text-decoration: none;
	color: var(--tinta);
	padding: 0.5rem 0;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease;
}

.dt-nav a:hover,
.dt-nav a:focus-visible {
	border-bottom-color: var(--acento-acao);
}

.dt-header .dt-botao {
	min-height: 46px;
	padding-inline: 1.5rem;
	flex: none;
}

/* Hamburguer. O alinhamento sai do align-items da linha, nao de margin. */
.dt-hamburguer {
	display: none;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--filete);
	background: transparent;
	border-radius: var(--raio);
	cursor: pointer;
	color: var(--tinta);
}

.dt-hamburguer svg {
	width: 22px;
	height: 22px;
	stroke: currentColor;
	stroke-width: 1.75;
	fill: none;
}

/* Drawer. `fixed` escapa do overflow do body, por isso overflow proprio. */
.dt-drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: none;
	overflow: hidden;
	background: var(--papel);
	padding: 1.5rem var(--borda-pagina) 2.5rem;
}

.dt-drawer[data-aberto="1"] {
	display: flex;
	flex-direction: column;
}

.dt-drawer__topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 88px;
	margin-bottom: 1.5rem;
}

.dt-drawer__nav {
	display: flex;
	flex-direction: column;
	gap: 0;
	overflow-y: auto;
}

.dt-drawer__nav a {
	font: 400 1.5rem/1.2 var(--display);
	text-decoration: none;
	padding: 1.125rem 0;
	border-bottom: 1px solid var(--filete);
}

.dt-drawer .dt-botao {
	margin-top: 2rem;
	width: 100%;
}

/* ================================================== SECAO 2 · A DOBRA ===
 * Duas superficies comprometidas com cor. Manchete no TERCO INFERIOR, nao no
 * meio: e a diferenca geometrica em relacao aos quatro splits ja entregues
 * pelo estudio (registro de composicoes).
 * A foto NAO preenche a celula: fica encaixada deixando o painel de acento
 * aparecer como margem em L. Sem esse recuo o painel some e a dobra lava,
 * que foi o que a folha de primeira dobra pegou antes do build.
 */
.dt-dobra {
	display: grid;
	grid-template-columns: 61fr 39fr;
	min-height: 100svh;
	background: var(--papel);
}

.dt-dobra__texto {
	display: flex;
	flex-direction: column;
	/*
	 * Centralizado por pedido da cliente. A ancoragem no terco inferior era a
	 * diferenca geometrica declarada no Estudo; o que continua separando esta
	 * dobra dos splits ja entregues e a margem em L do painel, o raio zero e a
	 * superficie comprometida com cor.
	 */
	justify-content: center;
	min-width: 0;
	padding: 140px var(--borda-pagina) clamp(64px, 9vh, 104px);
	padding-left: max(var(--borda-pagina), calc(50vw - (var(--container) / 2) + var(--borda-pagina)));
}

.dt-dobra__titulo {
	margin-bottom: 1.5rem;
}

.dt-dobra__lead {
	margin-bottom: 2.25rem;
	max-width: 34rem;
}

.dt-dobra__acoes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem 2rem;
}

.dt-dobra__painel {
	position: relative;
	min-width: 0;
	/*
	 * Comeca abaixo do header. Sem isto a nav e o botao caem sobre o rose:
	 * texto escuro sobre #A67C6D da 2,5:1 e reprova AA, e o botao (que e um
	 * tom do mesmo rose) some contra o proprio fundo.
	 */
	margin-top: var(--altura-header);
	background: var(--acento);
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
}

/*
 * Slot de proporcao fixa: a imagem vai absoluta com inset 0. `place-items:center`
 * NAO estica, usa a proporcao intrinseca e transborda o slot (R86).
 */
.dt-dobra__foto {
	position: relative;
	width: 94%;
	height: 94%;
	overflow: hidden;
}

.dt-dobra__foto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

/* ============================================ SECAO 3 · CREDENCIAIS ===
 * Linha corrida com separadores de 1px. Deliberadamente NAO sao numeros
 * gigantes em serifa: esse ja foi assinatura de outro projeto do estudio.
 */
.dt-credenciais {
	background: var(--papel-alto);
	border-block: 1px solid var(--filete);
}

.dt-credenciais__lista {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0 2.5rem;
	margin: 0;
	padding: 1.75rem 0;
	list-style: none;
	font: 500 0.9375rem/1.6 var(--corpo);
	color: var(--tinta-suave);
	text-align: center;
}

.dt-credenciais__item {
	position: relative;
	padding-left: 2.5rem;
}

.dt-credenciais__item:first-child {
	padding-left: 0;
}

.dt-credenciais__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1px;
	height: 1.1em;
	transform: translateY(-50%);
	background: var(--filete);
}

.dt-credenciais__item:first-child::before {
	display: none;
}

.dt-credenciais__item strong {
	color: var(--tinta);
	font-weight: 700;
}

/* ==================================================== SECAO 4 · SOBRE === */
.dt-sobre__grade {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4.5rem;
	/*
	 * `start` e nao `center`: a coluna de midia (foto + video vertical) e bem
	 * mais alta que a de texto, e centralizar abria um vao de quase 400px.
	 */
	align-items: start;
}

.dt-sobre__midia {
	min-width: 0;
	display: grid;
	gap: 1.5rem;
	justify-items: start;
}

.dt-sobre__midia .dt-video {
	max-width: 100%;
}

.dt-sobre__texto {
	min-width: 0;
}

.dt-sobre__texto p {
	margin-bottom: 1.35em;
}

/* Lista de valores, com filete no lugar de card. */
.dt-valores {
	list-style: none;
	margin: 2.5rem 0 0;
	padding: 0;
}

.dt-valores li {
	padding: 1.125rem 0;
	border-top: 1px solid var(--filete);
	font-size: 1rem;
	max-width: none;
}

.dt-valores li:last-child {
	border-bottom: 1px solid var(--filete);
}

/* =============================================== FACHADA DE VIDEO ===
 * Short e 9:16. Nao forcar no conteiner de placa 4:5: o slot recebe a
 * proporcao do VIDEO e a largura e reduzida para a altura nao estourar.
 * Iframe so entra no clique (evita ~700 KB de terceiro e cookies do YouTube
 * para quem nem assistiu).
 */
.dt-video {
	position: relative;
	width: 100%;
	max-width: 360px;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	/*
	 * Areia, nao `--escuro`: sobre a faixa salvia o fundo escuro deixaria a
	 * fachada invisivel caso o poster nao carregue.
	 */
	background: var(--areia);
	border: 0;
	padding: 0;
	cursor: pointer;
	display: block;
}

.dt-video--largo {
	max-width: none;
	aspect-ratio: 16 / 9;
}

.dt-video img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dt-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.dt-video__play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 72px;
	height: 72px;
	display: grid;
	place-items: center;
	background: var(--papel);
	color: var(--tinta);
	transition: background-color 0.2s ease;
}

.dt-video:hover .dt-video__play,
.dt-video:focus-visible .dt-video__play {
	background: #fff;
}

.dt-video__play svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
	stroke: none;
	margin-left: 3px;
}

.dt-video__rotulo {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.5rem 1.25rem 1.125rem;
	background: linear-gradient(to top, rgba(40, 44, 40, 0.86), rgba(40, 44, 40, 0));
	color: #fff;
	font: 600 0.875rem/1.35 var(--corpo);
	text-align: left;
}

/* ============================== SECAO 5 · AS FASES (assinatura 1 e 2) ===
 * Tres celulas verticais NATIVAS. O acervo do cliente e 9:16, e recorte largo
 * decapita a pessoa: a resposta e compor com celula vertical, nao forcar o
 * corte (licao registrada de um projeto com acervo igual).
 */
.dt-fases__grade {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

.dt-fase {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.dt-fase__midia {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--areia);
	margin-bottom: 1.75rem;
}

.dt-fase__midia img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 22%;
}

.dt-fase__ordem {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	min-width: 56px;
	padding: 0.75rem 0.875rem;
	background: var(--papel);
	color: var(--acento-tinta);
	font: 600 0.8125rem/1 var(--corpo);
	letter-spacing: 0.12em;
}

.dt-fase h3 {
	margin-bottom: 0.75rem;
}

.dt-fase p {
	color: var(--tinta-suave);
	font-size: 1rem;
	max-width: none;
}

/* ===================== SECAO 6 · CLIMATERIO (superficie escura salvia) ===
 * A ancora resolve a faixa escura com grafite. Aqui grafite em fundo e
 * proibido pela ata da cliente, entao a superficie e salvia aprofundada.
 */
.dt-tema__grade {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 4.5rem;
	align-items: center;
}

.dt-tema__texto {
	min-width: 0;
}

.dt-tema__midia {
	min-width: 0;
	/*
	 * SEM `justify-self: end` aqui. Com ele o item vira fit-content, e como o
	 * unico filho do botao e uma <img> absoluta, o max-content da ZERO: a
	 * fachada inteira colapsava para 0x0 e a faixa ficava com metade vazia.
	 * A trilha ja tem 360px fixos, entao esticar e o comportamento certo.
	 */
}

.dt-sintomas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	margin: 2.5rem 0 2.75rem;
	padding: 0;
	list-style: none;
}

.dt-sintomas li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.875rem 1.25rem 0.875rem 0;
	border-top: 1px solid var(--filete-escuro);
	font-size: 1rem;
	max-width: none;
}

.dt-sintomas svg {
	width: 18px;
	height: 18px;
	flex: none;
	margin-top: 0.3rem;
	stroke: var(--areia);
	stroke-width: 1.75;
	fill: none;
}

/* ================================= SECAO 7 · O QUE TRATO (assinatura 3) ===
 * Lista tipografica numerada com filete. NAO e grade de cards arredondados
 * com sombra: esse e exatamente o padrao que um cliente ja identificou como
 * "cara de template".
 */
.dt-servicos {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--filete);
}

.dt-servico {
	display: grid;
	grid-template-columns: 56px 260px minmax(0, 1fr);
	gap: 2.5rem;
	align-items: start;
	padding: 2.25rem 0;
	border-bottom: 1px solid var(--filete);
}

.dt-servico__midia {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--areia);
	min-width: 0;
}

.dt-servico__midia img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dt-servico__texto {
	min-width: 0;
}

.dt-servico__texto h3 {
	margin-bottom: 0.75rem;
}

.dt-servico__ordem {
	font: 600 0.8125rem/1.9 var(--corpo);
	letter-spacing: 0.12em;
	color: var(--acento-tinta);
}

.dt-servico h3 {
	margin: 0;
}

.dt-servico p {
	margin: 0;
	color: var(--tinta-suave);
	font-size: 1rem;
	max-width: none;
}

/* ======================================= SECAO 8 · COMO E A CONSULTA === */
.dt-etapas {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--filete);
}

.dt-etapa {
	min-width: 0;
	padding: 2.25rem 2rem 0 0;
	position: relative;
}

.dt-etapa::before {
	content: "";
	position: absolute;
	left: 0;
	top: -1px;
	width: 44px;
	height: 3px;
	background: var(--acento-acao);
}

.dt-etapa h3 {
	font-size: 1.125rem;
	margin: 0 0 0.625rem;
}

.dt-etapa p {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--tinta-suave);
	max-width: none;
}

/* ========================================== SECAO 9 · DEPOIMENTOS ===
 * Grade estatica, tres visiveis. NAO carrossel de um por vez: prova social
 * que exige clique raramente e lida, e o conteiner de rolagem horizontal
 * ainda altera a largura de render e desalinha a propria conferencia.
 */
.dt-depoimentos__grade {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
}

.dt-depoimento {
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: 2rem;
	background: var(--papel-alto);
	border-top: 3px solid var(--acento);
}

.dt-depoimento blockquote {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--tinta);
	margin-bottom: 1.5rem;
	flex: 1;
}

.dt-depoimento figcaption {
	font: 600 0.875rem/1.4 var(--corpo);
	color: var(--tinta-suave);
	padding-top: 1.25rem;
	border-top: 1px solid var(--filete);
}

/* ================================================== SECAO 10 · FAQ ===
 * Accordion simples: sem numero e sem foto no item aberto, porque essa
 * variacao ja foi assinatura de outro projeto do estudio.
 */
.dt-faq__grade {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4.5rem;
	align-items: start;
}

.dt-faq__coluna {
	min-width: 0;
}

.dt-faq__midia {
	position: relative;
	min-width: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--areia);
}

.dt-faq__midia img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dt-faq {
	/* A largura de leitura agora vem da coluna, nao de um teto proprio. */
	border-top: 1px solid var(--filete);
}

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

.dt-faq__botao {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	width: 100%;
	padding: 1.75rem 0;
	background: none;
	border: 0;
	text-align: left;
	cursor: pointer;
	font: 700 1.1875rem/1.45 var(--corpo);
	color: var(--tinta);
}

.dt-faq__sinal {
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 0.2rem;
	position: relative;
}

.dt-faq__sinal::before,
.dt-faq__sinal::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	background: var(--acento-acao);
	transition: transform 0.25s ease;
}

.dt-faq__sinal::before {
	width: 16px;
	height: 1.5px;
	transform: translate(-50%, -50%);
}

.dt-faq__sinal::after {
	width: 1.5px;
	height: 16px;
	transform: translate(-50%, -50%);
}

.dt-faq__botao[aria-expanded="true"] .dt-faq__sinal::after {
	transform: translate(-50%, -50%) scaleY(0);
}

.dt-faq__resposta {
	padding: 0 0 1.75rem;
	max-width: var(--leitura);
	color: var(--tinta-suave);
}

/* ================================== SECAO 11 · CONSULTORIO E HORARIOS === */
.dt-local__grade {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4.5rem;
}

.dt-local__coluna {
	min-width: 0;
}

.dt-horarios {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--filete);
	max-width: 26rem;
}

.dt-horarios li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 0.875rem 0;
	border-bottom: 1px solid var(--filete);
	font-size: 1rem;
}

.dt-horarios span:first-child {
	color: var(--tinta-suave);
}

.dt-horarios span:last-child {
	font-weight: 600;
}

.dt-mapa {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--areia);
}

.dt-mapa iframe,
.dt-mapa img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

.dt-mapa__vazio {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 2rem;
	text-align: center;
	color: var(--tinta-suave);
	font-size: 0.9375rem;
}

/* =============================================== SECAO 12 · CTA FINAL ===
 * Cor distinta do rodape, senao as duas faixas viram uma so e o CTA some.
 */
.dt-cta {
	/*
	 * `--acento-acao` e nao `--acento`: branco sobre o rose puro da 3,67:1 e
	 * reprova AA no lead de 19px, que nao conta como texto grande.
	 */
	background: var(--acento-acao);
	color: #fff;
	text-align: center;
}

.dt-cta h2 {
	color: #fff;
	margin-inline: auto;
	max-width: 18ch;
}

.dt-cta p {
	margin-inline: auto;
	color: #FBF4EF;
	margin-bottom: 2.5rem;
}

.dt-cta .dt-lead {
	max-width: 46ch;
}

.dt-cta .dt-botao {
	background: var(--papel);
	color: var(--tinta);
}

.dt-cta .dt-botao:hover,
.dt-cta .dt-botao:focus-visible {
	background: #fff;
}

/* ==================================================== RODAPE === */
.dt-rodape {
	background: var(--escuro);
	color: var(--papel);
	padding-block: 5rem 2rem;
}

.dt-rodape__grade {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 3.5rem;
	padding-bottom: 3rem;
	border-bottom: 1px solid var(--filete-escuro);
}

.dt-rodape__coluna {
	min-width: 0;
}

.dt-rodape h3 {
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--areia);
	margin-bottom: 1.25rem;
	font-weight: 600;
}

.dt-rodape p,
.dt-rodape li {
	color: #DCD7CE;
	font-size: 0.9375rem;
	line-height: 1.7;
}

.dt-rodape ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dt-rodape a {
	color: #DCD7CE;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.dt-rodape a:hover,
.dt-rodape a:focus-visible {
	color: #fff;
	border-bottom-color: var(--areia);
}

.dt-rodape__marca svg {
	height: 46px;
	width: auto;
	margin-bottom: 1.25rem;
}

.dt-rodape__base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	padding-top: 2rem;
	font-size: 0.8125rem;
	color: #BDB8AF;
}

.dt-rodape__aviso {
	max-width: 62ch;
	font-size: 0.8125rem;
	line-height: 1.65;
	color: #BDB8AF;
	margin-top: 1.5rem;
}

/* ============================================ BOTAO FLUTUANTE WHATSAPP === */
.dt-flutuante {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: var(--acento-acao);
	color: #fff;
	box-shadow: 0 6px 20px rgba(62, 74, 63, 0.28);
	transition: transform 0.2s ease;
}

.dt-flutuante:hover,
.dt-flutuante:focus-visible {
	transform: translateY(-2px);
}

.dt-flutuante svg {
	width: 27px;
	height: 27px;
	fill: currentColor;
	stroke: none;
}

/* =============================================== AVISO DE PENDENCIA ===
 * So aparece para quem esta logado e pode editar. E o antidoto contra
 * placeholder vazando para producao sem ninguem ver.
 */
.dt-pendente {
	display: inline-block;
	background: #FFF3CD;
	color: #6B4E00;
	border: 1px dashed #B8912A;
	padding: 0.1em 0.5em;
	font: 600 0.8125rem/1.5 var(--corpo);
	letter-spacing: 0.02em;
}

/* ==================================================== REVELACAO ===
 * A animacao NUNCA esconde conteudo sem JS: a classe so e adicionada pelo
 * proprio script. Sem isso, quem tem JS desligado (ou o crawler) ve pagina
 * em branco.
 */
.js .dt-revela {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .dt-revela.esta-visivel {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.js .dt-revela {
		opacity: 1;
		transform: none;
	}
}

/* ================================================== RESPONSIVO ===
 * Ordem: tablet, depois celular. Todo grid perde coluna antes de apertar.
 */
@media (max-width: 1024px) {
	:root {
		--respiro: 88px;
		--respiro-curto: 56px;
	}

	.dt-nav {
		display: none;
	}

	.dt-hamburguer {
		display: inline-flex;
	}

	.dt-header .dt-botao {
		display: none;
	}

	.dt-dobra {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.dt-dobra__texto {
		padding: 132px var(--borda-pagina) 56px;
		padding-left: var(--borda-pagina);
	}

	/*
	 * RETRATO, nao paisagem. Com `4/3` o slot ficava 722x541 no tablet contra
	 * uma foto de proporcao 0,692: o `cover` decapitava a medica e comia as
	 * maos. `5/6` deixa o slot em 0,81 e mostra 86% da altura da foto.
	 */
	.dt-dobra__painel {
		margin-top: 0;
		aspect-ratio: 5 / 6;
	}

	/*
	 * O recorte ja enquadra a medica de ponta a ponta, entao o centro e o
	 * certo em toda largura. Deslocar para o topo era o que encostava as maos
	 * na borda de baixo.
	 */

	.dt-sobre__grade,
	.dt-tema__grade,
	.dt-local__grade {
		grid-template-columns: 1fr;
		gap: 3rem;
	}

	.dt-tema__midia {
		max-width: 360px;
	}

	.dt-fases__grade,
	.dt-depoimentos__grade {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dt-faq__grade {
		grid-template-columns: 1fr;
		gap: 3rem;
	}

	.dt-faq__midia {
		max-width: 520px;
	}

	.dt-servico {
		grid-template-columns: 56px 200px minmax(0, 1fr);
		gap: 1.75rem;
	}

	.dt-etapas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 2rem;
	}

	.dt-rodape__grade {
		grid-template-columns: 1fr 1fr;
		gap: 2.5rem;
	}
}

@media (max-width: 720px) {
	:root {
		--respiro: 64px;
		--respiro-curto: 44px;
		--borda-pagina: 20px;
	}

	.dt-dobra__painel {
		aspect-ratio: 3 / 4;
	}

	.dt-dobra__foto {
		width: 90%;
		height: 92%;
	}

	.dt-fases__grade,
	.dt-depoimentos__grade,
	.dt-etapas {
		grid-template-columns: 1fr;
	}

	.dt-etapas {
		row-gap: 1.5rem;
	}

	.dt-etapa {
		padding-right: 0;
	}

	.dt-sintomas {
		grid-template-columns: 1fr;
	}

	/* Servico empilha: a miniatura vira faixa e a ordem sobe. */
	.dt-servico {
		grid-template-columns: 1fr;
		gap: 1rem;
		padding: 1.75rem 0;
	}

	.dt-faq__midia {
		max-width: none;
		aspect-ratio: 3 / 2;
	}

	.dt-servico__ordem {
		order: -1;
	}

	.dt-credenciais__lista {
		flex-direction: column;
		gap: 0.75rem;
	}

	.dt-credenciais__item {
		padding-left: 0;
	}

	.dt-credenciais__item::before {
		display: none;
	}

	.dt-rodape__grade {
		grid-template-columns: 1fr;
	}

	.dt-dobra__acoes {
		gap: 1.25rem;
	}

	.dt-dobra__acoes .dt-botao {
		width: 100%;
	}

	.dt-flutuante {
		right: 16px;
		bottom: 16px;
	}
}

/* Utilitario de respiro entre blocos irmaos. */
.dt-espaco-topo {
	margin-top: 2.5rem;
}