/*
Theme Name: Mauricio Eduardo - Fisioterapeuta
Theme URI: https://exemplo.com
Author: Daniel José da Silva
Author URI: https://exemplo.com
Description: Tema institucional premium para fisioterapeuta, em preto, azul-marinho, dourado e branco. Página única com hero, especialidades, área do paciente, depoimentos, blog e contato.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mauricio-fisio
*/

/* =====================================================================
   ÍNDICE
   1. Tokens (identidade visual — não alterada)
   2. Base
   3. Container / grid (Bootstrap + wrapper próprio de 1280px)
   4. Botões
   5. Cabeçalho
   6. Hero
   7. Informações rápidas
   8. Sobre mim
   9. Especialidades
   10. Diferenciais
   11. Área do paciente
   12. Agendamento
   13. Depoimentos
   14. Blog
   15. Contato
   16. Rodapé
   17. WhatsApp flutuante / Modal de login
   18. Responsividade fina
   ===================================================================== */

/* --------------------------------------------------------------- 1. tokens */
:root {
	--branco: #ffffff;
	--preto: #111111;
	--azul: #0c2340;
	--azul-2: #12315c;
	--dourado: #c8a046;
	--dourado-claro: #ddb968;
	--cinza: #f5f5f5;
	--cinza-borda: #e7e7e9;
	--texto-suave: #52586a;

	--fonte: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
	--raio: 18px;
	--raio-pequeno: 10px;
	--sombra: 0 24px 55px -22px rgba(12, 35, 64, 0.28);
	--sombra-suave: 0 10px 28px -16px rgba(17, 17, 17, 0.16);
	--transicao: 220ms cubic-bezier(0.4, 0, 0.2, 1);

	/* escala de espaçamento entre seções — reduzida ~35% em relação à versão anterior */
	--espaco-secao: 72px;
	--espaco-secao-mobile: 52px;
}

/* --------------------------------------------------------------- 2. base */
* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

html, body {
	max-width: 100%;
	overflow-x: hidden;
}

body {
	margin: 0;
	font-family: var(--fonte);
	color: var(--preto);
	background: var(--branco);
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: inherit;
}

h1, h2, h3, h4 {
	font-family: var(--fonte);
	font-weight: 700;
	margin: 0;
	letter-spacing: -0.01em;
}

p {
	line-height: 1.7;
	color: var(--texto-suave);
	margin: 0 0 14px;
}

:focus-visible {
	outline: 2px solid var(--dourado);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

.rotulo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dourado);
	margin-bottom: 12px;
}

.rotulo::before {
	content: "";
	width: 22px;
	height: 1.5px;
	background: var(--dourado);
}

/* --------------------------------------------------------------- 3. container / grid
   Requisito do briefing: um wrapper próprio de largura máxima fixa,
   usado em toda a página. O Bootstrap 5 (.row / .col-*) cuida do grid
   responsivo DENTRO desse wrapper nas seções de cards repetidos
   (informações rápidas, especialidades, diferenciais, blog, depoimentos).
   O Bootstrap não é usado para nenhum componente visual (botões, cards,
   cores) — só para as colunas. */
.container {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 20px;
}

.secao {
	padding: var(--espaco-secao) 0;
}

.secao-cinza {
	background: var(--cinza);
}

.secao-titulo {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 28px;
	margin-bottom: 40px;
	flex-wrap: wrap;
}

.secao-titulo h2 {
	font-size: 30px;
	color: var(--azul);
	max-width: 520px;
}

.secao-titulo p {
	max-width: 360px;
	margin: 0;
}

/* --------------------------------------------------------------- 4. botões */
.botao {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 24px;
	border-radius: 100px;
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: transform var(--transicao), box-shadow var(--transicao), background var(--transicao), color var(--transicao);
	white-space: nowrap;
}

.botao:hover {
	transform: translateY(-2px);
}

.botao-dourado {
	background: linear-gradient(135deg, var(--dourado-claro), var(--dourado));
	color: var(--preto);
}

.botao-dourado:hover {
	box-shadow: 0 14px 28px -10px rgba(200, 160, 70, 0.55);
}

.botao-branco {
	background: var(--branco);
	color: var(--azul);
}

.botao-branco:hover {
	box-shadow: var(--sombra-suave);
}

.botao-contorno {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.4);
	color: var(--branco);
}

.botao-contorno:hover {
	border-color: var(--dourado);
	color: var(--dourado-claro);
}

.botao-contorno-escuro {
	background: transparent;
	border-color: var(--azul);
	color: var(--azul);
}

.botao-contorno-escuro:hover {
	background: var(--azul);
	color: var(--branco);
}

.botao-texto {
	background: none;
	border: none;
	padding: 4px 0;
	font-weight: 600;
	color: var(--azul);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* --------------------------------------------------------------- 5. cabeçalho */
.cabecalho {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: transparent;
	border-bottom: 1px solid rgba(200, 160, 70, 0.18);
}

/* O blur fica numa camada própria (não no elemento .cabecalho em si):
   backdrop-filter/filter no próprio elemento criaria um novo "containing
   block", o que quebraria o position:fixed do menu mobile (ele ficaria
   preso dentro da altura do cabeçalho em vez de cobrir a tela toda). */
.cabecalho::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(11, 12, 16, 0.92);
	backdrop-filter: blur(14px) saturate(160%);
}

.cabecalho.rolado {
	box-shadow: 0 8px 26px -20px rgba(0, 0, 0, 0.3);
}

.cabecalho-linha {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 96px;
	gap: 18px;
}

.marca {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	flex-shrink: 0;
}

.marca-monograma {
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: linear-gradient(150deg, var(--dourado-claro), var(--dourado));
	color: var(--preto);
	font-weight: 800;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.marca-texto strong {
	display: block;
	font-size: 14px;
	color: var(--azul);
	letter-spacing: 0.02em;
}

.marca-texto span {
	display: block;
	font-size: 10px;
	letter-spacing: 0.16em;
	color: var(--dourado);
	font-weight: 600;
}

.marca-logo-img {
	height: auto;
	width: 280px;
	max-width: 50vw;
	display: block;
}

.marca-logo-img--rodape {
	width: 200px;
	height: auto;
}

.nav-principal {
	display: flex;
	align-items: center;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-principal a {
	text-decoration: none;
	font-size: 13.5px;
	font-weight: 500;
	color: #e4e6ec;
	position: relative;
	padding: 6px 0;
	white-space: nowrap;
}

.nav-principal a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background: var(--dourado);
	transition: width var(--transicao);
}

.nav-principal a:hover::after,
.nav-principal a.ativo::after {
	width: 100%;
}

.cabecalho-acoes {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

/* O botão "Login" reaproveita .botao-contorno-escuro (usado também em
   fundos brancos, ex.: "Leia Mais" do blog) — aqui, dentro do
   cabeçalho preto, ele precisa de contorno/texto claros para não
   ficar invisível. Escopado só ao cabeçalho para não afetar os
   outros usos da mesma classe. */
.cabecalho-acoes .botao-contorno-escuro {
	border-color: rgba(255, 255, 255, 0.55);
	color: var(--branco);
}

.cabecalho-acoes .botao-contorno-escuro:hover {
	background: var(--dourado);
	border-color: var(--dourado);
	color: var(--preto);
}

.botao-menu-mobile {
	display: none;
	background: none;
	border: none;
	font-size: 22px;
	color: var(--dourado);
	cursor: pointer;
}

@media (max-width: 1180px) {
	.nav-principal {
		position: fixed;
		inset: 96px 0 0 0;
		background: #0b0c10;
		flex-direction: column;
		align-items: flex-start;
		padding: 28px;
		gap: 20px;
		transform: translateX(100%);
		transition: transform var(--transicao);
		overflow-y: auto;
		border-top: 1px solid rgba(200, 160, 70, 0.15);
	}
	.nav-principal a {
		font-size: 15px;
	}
	.nav-principal.aberto {
		transform: translateX(0);
	}
	.botao-menu-mobile {
		display: block;
	}
	.cabecalho-acoes .botao-branco {
		display: none;
	}
}

.nav-item-mobile-extra {
	display: none;
}

@media (max-width: 560px) {
	.nav-item-mobile-extra {
		display: block;
		padding-bottom: 16px;
		margin-bottom: 4px;
		border-bottom: 1px solid rgba(200, 160, 70, 0.25);
		width: 100%;
	}
	.nav-item-mobile-extra a {
		font-weight: 700;
		color: var(--dourado) !important;
	}
	.cabecalho-acoes .botao-contorno-escuro {
		display: none;
	}
	.cabecalho-acoes .botao-dourado {
		padding: 10px 16px;
		font-size: 13px;
	}
	.marca-texto span {
		display: none;
	}
	.marca-logo-img {
		width: 150px;
	}
}

/* --------------------------------------------------------------- 6. hero */
.hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at 82% 18%, rgba(200, 160, 70, 0.14), transparent 42%),
		linear-gradient(155deg, var(--preto) 0%, var(--azul) 60%, var(--azul-2) 130%);
	color: var(--branco);
	padding: 96px 0 64px;
}

.hero-grade {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 40px;
	align-items: center;
}

.hero-titulo {
	font-size: clamp(36px, 4.6vw, 54px);
	line-height: 1.1;
	margin-bottom: 20px;
}

.hero-titulo em {
	font-style: normal;
	color: var(--dourado-claro);
	display: block;
}

.hero-sub {
	color: #cfd6e6;
	font-size: 16.5px;
	max-width: 440px;
	margin-bottom: 24px;
}

/* diferenciais rápidos abaixo do texto do hero */
.hero-diferenciais {
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 20px;
	max-width: 460px;
}

.hero-diferenciais li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #dfe3ee;
}

.hero-diferenciais i {
	color: var(--dourado);
	font-size: 13px;
	flex-shrink: 0;
}

.hero-acoes {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

/* foto: uma única imagem, ampliada. A ilustração anatômica fica num
   pequeno painel próprio, visível, logo abaixo da citação e ao lado
   da foto — não mais escondida atrás da imagem (baixo contraste fazia
   com que ficasse praticamente invisível ali). Linhas orgânicas
   douradas decoram os cantos da foto. Sem posicionamento absoluto
   estruturando o layout (foto, citação e ilustração seguem o fluxo
   normal em coluna). */
.hero-foto-area {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-self: center;
}

.hero-foto-moldura {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 480px;
}

.hero-foto {
	position: relative;
	z-index: 2;
	width: 100%;
	border-radius: var(--raio);
	box-shadow: 0 40px 80px -18px rgba(0, 0, 0, 0.55);
	aspect-ratio: 4/5;
	object-fit: cover;
	background: var(--preto);
}

/* Versão com fundo transparente: sem "cartão" (sem cantos arredondados,
   sem caixa atrás) — a pessoa fica diretamente sobre o gradiente do
   Hero, com uma sombra suave que acompanha o recorte em vez de um
   retângulo, para não parecer um recorte colado. */
.hero-foto--transparente {
	border-radius: 0;
	background: none;
	box-shadow: none;
	object-fit: contain;
	filter: drop-shadow(0 30px 34px rgba(0, 0, 0, 0.5));
}

.hero-foto-moldura--transparente {
	max-width: 440px;
}

.hero-linha-organica {
	position: absolute;
	z-index: 1;
	stroke: var(--dourado);
	opacity: 0.55;
	pointer-events: none;
}

.hero-citacao {
	position: relative;
	z-index: 1;
	background: rgba(10, 16, 28, 0.72);
	border: 1px solid rgba(200, 160, 70, 0.4);
	backdrop-filter: blur(10px);
	border-radius: var(--raio-pequeno);
	padding: 12px 18px;
	max-width: 300px;
	align-self: flex-end;
	margin: 0 4px 14px 0;
	/* Linha (não coluna) sempre — a foto pequena nunca deve "cair"
	   para baixo do texto, nem em telas estreitas. */
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
}

.hero-citacao-foto {
	width: 44px;
	height: 44px;
	min-width: 44px;
	border-radius: 50%;
	object-fit: cover;
	border: 1.5px solid var(--dourado);
	flex-shrink: 0;
}

.hero-citacao-texto {
	min-width: 0;
}

.hero-citacao-texto p {
	color: #f2f3f6;
	font-size: 12.5px;
	font-style: italic;
	margin: 0 0 4px;
}

.hero-assinatura {
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	color: var(--dourado-claro);
	font-size: 16px;
}

/* --------------------------------------------------------------- 7. informações rápidas */
.info-rapida {
	background: var(--branco);
	border-bottom: 1px solid var(--cinza-borda);
}

.info-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	height: 100%;
	padding: 22px 18px;
}

.info-icone {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--cinza);
	color: var(--dourado);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 16px;
}

.info-item strong {
	display: block;
	font-size: 13.5px;
	color: var(--azul);
	margin-bottom: 2px;
}

.info-item span {
	font-size: 12.5px;
	color: var(--texto-suave);
	line-height: 1.5;
}

/* --------------------------------------------------------------- 8. sobre mim */
.sobre-grade {
	display: grid;
	grid-template-columns: 0.8fr 1.15fr 0.85fr;
	gap: 36px;
	align-items: center;
}

.sobre-foto {
	position: relative;
	border-radius: var(--raio);
	overflow: hidden;
	box-shadow: var(--sombra-suave);
	background: var(--cinza);
}

.sobre-foto::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: inset 0 -50px 50px -30px rgba(12, 35, 64, 0.35);
	pointer-events: none;
}

.sobre-foto img {
	width: 100%;
	aspect-ratio: 3/4;
	object-fit: cover;
}

/* Foto com fundo transparente: "contain" em vez de "cover" — evita
   que o corte automático do CSS corte a cabeça ou as mãos quando a
   proporção da foto não bate exatamente com a caixa 3:4.
   Seletor mais específico que ".sobre-foto img" de propósito, senão
   a regra de cima (object-fit: cover) vence e a foto seria cortada. */
.sobre-foto img.sobre-foto-img--transparente {
	object-fit: contain;
	object-position: center bottom;
}

.sobre-titulo {
	font-size: 28px;
	color: var(--azul);
	margin-bottom: 6px;
}

.sobre-subtitulo {
	color: var(--dourado);
	font-weight: 600;
	font-size: 13px;
	margin-bottom: 18px;
}

.sobre-ilustracao {
	position: relative;
	border-radius: var(--raio);
	overflow: hidden;
	aspect-ratio: 3/4;
	background: linear-gradient(160deg, var(--azul), #05101f);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--sombra);
}

.sobre-ilustracao svg {
	width: 62%;
	opacity: 0.85;
}

/* --------------------------------------------------------------- 9. especialidades (cards premium) */
.cartao-especialidade {
	background: var(--branco);
	border: 1px solid var(--cinza-borda);
	border-radius: var(--raio);
	padding: 36px 30px;
	height: 100%;
	min-height: 210px;
	display: flex;
	flex-direction: column;
	transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}

.cartao-especialidade:hover {
	transform: translateY(-8px);
	box-shadow: var(--sombra);
	border-color: transparent;
}

.cartao-icone {
	width: 58px;
	height: 58px;
	border-radius: 16px;
	background: var(--cinza);
	color: var(--dourado);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	margin-bottom: 20px;
	transition: background var(--transicao), color var(--transicao);
}

.cartao-especialidade:hover .cartao-icone {
	background: var(--dourado);
	color: var(--preto);
}

.cartao-especialidade h3 {
	font-size: 17px;
	color: var(--preto);
	margin-bottom: 8px;
}

.cartao-especialidade p {
	font-size: 13.5px;
	margin: 0;
}

/* --------------------------------------------------------------- 10. diferenciais */
.diferencial {
	text-align: center;
	height: 100%;
}

.diferencial-icone {
	width: 68px;
	height: 68px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: var(--cinza);
	border: 1.5px solid var(--dourado);
	color: var(--dourado);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	transition: transform var(--transicao), background var(--transicao), color var(--transicao);
}

.diferencial:hover .diferencial-icone {
	transform: translateY(-4px) scale(1.04);
	background: var(--dourado);
	color: var(--preto);
}

.diferencial p {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--preto);
	margin: 0;
}

/* --------------------------------------------------------------- 11. área do paciente (card estilo app) */
.area-paciente {
	background: linear-gradient(150deg, var(--azul) 0%, #061021 130%);
	border-radius: 28px;
	padding: 48px;
	color: var(--branco);
	display: grid;
	grid-template-columns: 1fr 0.9fr;
	gap: 44px;
	align-items: center;
	position: relative;
	overflow: hidden;
}

.area-paciente::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 85% 20%, rgba(200, 160, 70, 0.18), transparent 50%);
	pointer-events: none;
}

.area-paciente-texto {
	position: relative;
	z-index: 1;
}

.area-paciente-texto h2 {
	font-size: 26px;
	margin-bottom: 12px;
}

.area-paciente-texto p {
	color: #cfd6e6;
	max-width: 380px;
	margin: 0;
}

.cartao-login {
	position: relative;
	z-index: 1;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(200, 160, 70, 0.35);
	backdrop-filter: blur(14px) saturate(140%);
	border-radius: 20px;
	padding: 30px;
	box-shadow: var(--sombra);
}

.campo {
	margin-bottom: 16px;
}

.campo label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 600;
	margin-bottom: 7px;
	color: #dfe3ee;
}

.campo label i {
	color: var(--dourado);
	font-size: 12px;
}

.campo input,
.campo select {
	width: 100%;
	padding: 13px 15px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.07);
	color: var(--branco);
	font-family: var(--fonte);
	font-size: 14px;
	outline: none;
	transition: border-color var(--transicao);
}

.campo input::placeholder {
	color: #8993aa;
}

.campo input:focus,
.campo select:focus {
	border-color: var(--dourado);
}

.cartao-login .botao {
	width: 100%;
	justify-content: center;
	margin-top: 4px;
}

.link-discreto {
	display: block;
	text-align: center;
	font-size: 12.5px;
	color: #b9c1d6;
	margin-top: 12px;
	text-decoration: none;
}

.link-discreto:hover {
	color: var(--dourado-claro);
}

.divisor-claro {
	border: none;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	margin: 18px 0;
}

/* --------------------------------------------------------------- 12. agendamento */
.faixa-agendamento {
	background: var(--preto);
	color: var(--branco);
	padding: 48px 0;
}

.agendamento-grade {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 26px;
	flex-wrap: wrap;
}

.agendamento-grade h2 {
	font-size: 24px;
}

.agendamento-grade p {
	color: #c7cad3;
	margin: 6px 0 0;
}

.agendamento-acoes {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* --------------------------------------------------------------- 13. depoimentos (estilo review) */
.depoimentos-slide {
	background: var(--branco);
	border: 1px solid var(--cinza-borda);
	border-radius: var(--raio);
	padding: 28px;
	height: 100%;
	box-shadow: var(--sombra-suave);
}

.depoimento-topo {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.depoimento-avatar {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--cinza);
	color: var(--azul);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 14px;
	flex-shrink: 0;
}

.depoimento-autor strong {
	display: block;
	font-size: 13.5px;
}

.depoimento-autor span {
	font-size: 11.5px;
	color: var(--texto-suave);
}

.depoimento-estrelas {
	color: var(--dourado);
	font-size: 13px;
	margin-bottom: 10px;
	letter-spacing: 2px;
}

.depoimento-texto {
	font-size: 14px;
	color: var(--preto);
	margin: 0;
}

.depoimentos-aviso {
	font-size: 11.5px;
	color: var(--texto-suave);
	text-align: center;
	margin-top: 24px;
	opacity: 0.75;
}

.swiper-pagination-bullet {
	background: var(--dourado) !important;
}

/* --------------------------------------------------------------- 14. blog */
.cartao-blog {
	background: var(--branco);
	border: 1px solid var(--cinza-borda);
	border-radius: var(--raio);
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: transform var(--transicao), box-shadow var(--transicao);
}

.cartao-blog:hover {
	transform: translateY(-6px);
	box-shadow: var(--sombra-suave);
}

.cartao-blog-imagem {
	height: 220px;
	position: relative;
	overflow: hidden;
	background: linear-gradient(140deg, var(--azul), var(--preto));
}

.cartao-blog-imagem img,
.cartao-blog-imagem svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cartao-blog-categoria {
	position: absolute;
	top: 14px;
	left: 14px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--azul);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 20px;
}

.cartao-blog-corpo {
	padding: 22px 24px 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.cartao-blog-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	color: var(--texto-suave);
	margin-bottom: 10px;
}

.cartao-blog-corpo h3 {
	font-size: 17px;
	margin: 0 0 10px;
	color: var(--preto);
}

.cartao-blog-corpo p {
	font-size: 13.5px;
	flex: 1;
}

/* --------------------------------------------------------------- 15. contato */
.contato-grade {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 36px;
	align-items: stretch;
}

.contato-lista {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.contato-lista li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.contato-lista strong {
	display: block;
	font-size: 14px;
	color: var(--azul);
}

.contato-lista span {
	font-size: 13.5px;
	color: var(--texto-suave);
}

.contato-acoes {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 22px;
}

.contato-mapa {
	border-radius: var(--raio);
	overflow: hidden;
	min-height: 380px;
	border: 1px solid var(--cinza-borda);
	box-shadow: var(--sombra-suave);
}

.contato-mapa iframe {
	width: 100%;
	height: 100%;
	min-height: 380px;
	border: 0;
}

/* --------------------------------------------------------------- 16. rodapé */
.rodape {
	background: var(--preto);
	color: #b9bcc4;
	padding: 48px 0 22px;
}

.rodape-grade {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr;
	gap: 36px;
	padding-bottom: 30px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.rodape-marca {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.rodape-foto {
	width: 100%;
	max-width: 220px;
	border-radius: var(--raio-pequeno);
	margin-top: 14px;
	opacity: 0.9;
}

.rodape p {
	color: #9296a3;
	font-size: 13px;
}

.rodape h4 {
	color: var(--branco);
	font-size: 13.5px;
	margin-bottom: 14px;
}

.rodape-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.rodape-links a {
	color: #b9bcc4;
	text-decoration: none;
	font-size: 13.5px;
}

.rodape-links a:hover {
	color: var(--dourado-claro);
}

.rodape-copyright {
	padding-top: 18px;
	font-size: 11.5px;
	color: #767a86;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	line-height: 1.7;
}

/* --------------------------------------------------------------- 17. whatsapp / modal */
.whatsapp-flutuante {
	position: fixed;
	bottom: 26px;
	right: 26px;
	z-index: 90;
	width: 78px;
	height: 78px;
	border-radius: 50%;
	background: #25d366;
	color: var(--branco);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 36px;
	text-decoration: none;
	box-shadow: 0 16px 36px -8px rgba(37, 211, 102, 0.7);
	transition: transform var(--transicao);
}

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

.whatsapp-flutuante::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: #25d366;
	animation: pulsar 2.2s ease-out infinite;
	z-index: -1;
}

@keyframes pulsar {
	0% { transform: scale(1); opacity: 0.55; }
	100% { transform: scale(2); opacity: 0; }
}

.modal-fundo {
	position: fixed;
	inset: 0;
	background: rgba(6, 10, 20, 0.6);
	backdrop-filter: blur(4px);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 200;
	padding: 20px;
}

.modal-fundo.aberto {
	display: flex;
}

.modal-caixa {
	background: var(--branco);
	border-radius: var(--raio);
	max-width: 400px;
	width: 100%;
	padding: 34px 30px;
	position: relative;
	box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.4);
}

.modal-fechar {
	position: absolute;
	top: 16px;
	right: 16px;
	background: none;
	border: none;
	font-size: 20px;
	color: var(--texto-suave);
	cursor: pointer;
}

.modal-caixa .campo label {
	color: var(--preto);
}

.modal-caixa .campo input {
	background: var(--cinza);
	border: 1px solid var(--cinza-borda);
	color: var(--preto);
}

.modal-caixa .campo input:focus {
	border-color: var(--dourado);
}

.modal-lembrar {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--texto-suave);
	margin-bottom: 16px;
}

.modal-titulo {
	font-size: 19px;
	color: var(--azul);
	margin-bottom: 20px;
}

.modal-caixa .botao {
	width: 100%;
	justify-content: center;
}

.modal-caixa .link-discreto {
	color: var(--texto-suave);
}

.modal-caixa .link-discreto:hover {
	color: var(--azul);
}

.aviso-sucesso {
	display: none;
	background: #eaf6ee;
	border: 1px solid #bfe3c9;
	color: #226634;
	border-radius: var(--raio-pequeno);
	padding: 16px 20px;
	font-size: 13.5px;
	margin-bottom: 20px;
}

.aviso-sucesso.visivel {
	display: block;
}

/* --------------------------------------------------------------- páginas genéricas (ex.: Política de Privacidade, LGPD) */
.pagina-generica {
	padding-top: calc(var(--espaco-secao) + 20px);
}

.pagina-generica-cabecalho {
	margin-bottom: 28px;
}

.pagina-generica-conteudo {
	max-width: 760px;
}

.pagina-generica-conteudo h2 {
	color: var(--azul);
	font-size: 22px;
	margin: 32px 0 12px;
}

.pagina-generica-conteudo h3 {
	color: var(--azul);
	font-size: 18px;
	margin: 24px 0 10px;
}

.pagina-generica-conteudo p {
	font-size: 15px;
}

.pagina-generica-conteudo ul,
.pagina-generica-conteudo ol {
	color: var(--texto-suave);
	font-size: 15px;
	line-height: 1.7;
	padding-left: 22px;
}

.pagina-generica-conteudo a {
	color: var(--azul);
	text-decoration: underline;
}

/* --------------------------------------------------------------- 18. responsividade fina */
@media (max-width: 991px) {
	.hero-grade {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.hero-sub,
	.hero-diferenciais {
		margin-left: auto;
		margin-right: auto;
	}
	.hero-diferenciais {
		text-align: left;
	}
	.hero-acoes {
		justify-content: center;
	}
	.hero-foto-moldura {
		max-width: 380px;
	}

	.sobre-grade {
		grid-template-columns: 1fr 1fr;
	}
	.sobre-grade > :first-child {
		grid-column: 1 / -1;
		max-width: 320px;
		margin: 0 auto;
	}

	.area-paciente {
		grid-template-columns: 1fr;
		padding: 36px 26px;
		text-align: center;
	}
	.area-paciente-texto p {
		margin-left: auto;
		margin-right: auto;
	}

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

@media (max-width: 768px) {
	:root {
		--espaco-secao: var(--espaco-secao-mobile);
	}
	.secao-titulo {
		flex-direction: column;
		align-items: flex-start;
	}
	.sobre-grade {
		grid-template-columns: 1fr;
	}
	.sobre-grade > * {
		grid-column: auto;
		margin: 0;
	}
	.rodape-grade {
		grid-template-columns: 1fr;
		gap: 26px;
	}
}

@media (max-width: 560px) {
	.hero-diferenciais {
		grid-template-columns: 1fr;
	}
	.cabecalho-linha {
		height: 68px;
	}
	.nav-principal {
		inset: 68px 0 0 0;
	}
	.hero {
		padding: 76px 0 48px;
	}
}