/*
Theme Name: Orsini
Theme URI: https://viniciusorsini.com.br
Author: Kaue Ramone
Description: Tema sob medida para o escritório Vinícius Orsini Advogado, focado em defesa do executado. Linguagem visual inspirada no sistema da Apple: tipografia SF, hierarquia por espaço, superfícies neutras e movimento discreto. Sem page builder, sem framework, sem fonte externa: um CSS, um JS. O conteúdo vive no plugin Orsini Core.
Version: 0.2.1
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: orsini
Tags: one-column, custom-logo, custom-menu, translation-ready
*/

/* ==========================================================================
   1. Tokens
   Cinzas do sistema da Apple (#F5F5F7, #1D1D1F, #6E6E73) + o dourado da marca
   como único acento. Nenhuma fonte externa: a pilha do sistema entrega SF Pro
   no iPhone e no Mac, Segoe no Windows, Roboto no Android.
   ========================================================================== */
:root {
	--preto: #000000;
	--preto-2: #0A0A0B;
	--ink: #1D1D1F;
	--ink-2: #6E6E73;
	--ink-3: #86868B;
	--paper: #FFFFFF;
	--paper-2: #F5F5F7;
	--paper-3: #EBEBED;
	--linha: rgba(0, 0, 0, .09);
	--linha-forte: rgba(0, 0, 0, .16);

	--gold: #DFAE4F;
	--gold-ink: #96690F;     /* dourado escurecido: 4.6:1 sobre branco */
	--gold-soft: rgba(223, 174, 79, .14);

	--ok: #1D7A4C;
	--erro: #B3261E;

	--sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
		"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--r-sm: 10px;
	--r-md: 14px;
	--r-lg: 20px;
	--r-xl: 28px;
	--pill: 980px;

	--wrap: 1120px;
	--wrap-estreito: 760px;

	/* Sombras curtas e claras: profundidade sem drama. */
	--sombra-1: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 12px rgba(0, 0, 0, .05);
	--sombra-2: 0 2px 6px rgba(0, 0, 0, .05), 0 18px 44px -18px rgba(0, 0, 0, .22);

	/* Curva de saída rápida, sem overshoot — o movimento do iOS. */
	--ease: cubic-bezier(.16, 1, .3, 1);
	--ease-suave: cubic-bezier(.4, 0, .2, 1);

	--nav-h: 84px;
	--bar-h: 0px;
}

@media (max-width: 940px) {
	:root { --nav-h: 72px; }
}

@media (max-width: 780px) {
	:root { --bar-h: 64px; }
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.47;
	letter-spacing: -.011em;         /* tracking do texto corrido no iOS */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	padding-bottom: var(--bar-h);
	overflow-x: hidden;
}

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

h1, h2, h3, h4 {
	margin: 0;
	font-weight: 600;
	line-height: 1.06;
	letter-spacing: -.028em;         /* quanto maior o texto, mais fechado */
	text-wrap: balance;
	color: var(--ink);
}

h1 { font-size: clamp(38px, 6.4vw, 66px); letter-spacing: -.035em; }
h2 { font-size: clamp(30px, 4.4vw, 46px); letter-spacing: -.032em; }
h3 { font-size: clamp(20px, 2.2vw, 25px); letter-spacing: -.022em; line-height: 1.18; }

p { margin: 0; }

a { color: var(--gold-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

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

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 22px; }
.wrap--estreito { max-width: var(--wrap-estreito); }

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 200;
	background: var(--ink); color: #fff; padding: 12px 18px;
	border-radius: 0 0 var(--r-md) 0; font-weight: 600;
}
.skip-link:focus { left: 0; top: 0; }

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

/* --- Seções: respiro grande e transição por superfície, não por régua ----- */
.section { padding-block: clamp(64px, 9vw, 128px); }
.section--tight { padding-block: clamp(44px, 6vw, 80px); }
.section--paper { background: var(--paper-2); }
.section--dark { background: var(--preto); color: #F5F5F7; }
.section--dark h1, .section--dark h2, .section--dark h3,
.hero h1, .hero h2, .hero h3,
.cta-final h1, .cta-final h2, .cta-final h3 { color: #FFFFFF; }

/* Dentro de um cartão branco a tipografia volta ao escuro — vale para o
   formulário do hero e para o cartão de atalhos do CTA final. */
.hero-card h1, .hero-card h2, .hero-card h3,
.cta-final .hero-card h1, .cta-final .hero-card h2, .cta-final .hero-card h3 { color: var(--ink); }

/* Emenda macia entre uma seção clara e a próxima cinza. */
.section--paper + .section,
.section + .section--paper { position: relative; }

.eyebrow {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--gold-ink);
	margin-bottom: 14px;
}
.section--dark .eyebrow, .hero .eyebrow { color: var(--gold); }

.lead {
	font-size: clamp(18px, 2.1vw, 21px);
	line-height: 1.42;
	letter-spacing: -.016em;
	color: var(--ink-2);
	max-width: 34em;
}
.section--dark .lead, .hero .lead { color: rgba(245, 245, 247, .72); }
.hero-card .lead { color: var(--ink-2); }

.section-head { max-width: 30em; }
.section-head .lead { margin-top: 18px; }

/* ==========================================================================
   3. Movimento — entrada das seções
   A classe .reveal só é aplicada pelo JS, e só quando o navegador suporta
   IntersectionObserver e o visitante não pediu menos movimento. Sem JS, o
   conteúdo nasce visível.
   ========================================================================== */
.reveal {
	opacity: 0;
	transform: translate3d(0, 26px, 0);
	transition: opacity .7s var(--ease), transform .7s var(--ease);
	transition-delay: calc(var(--i, 0) * 70ms);
	will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* ==========================================================================
   4. Botões — pílula, como no iOS
   ========================================================================== */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-family: inherit; font-size: 17px; font-weight: 500; line-height: 1;
	letter-spacing: -.015em;
	padding: 15px 26px; min-height: 50px;
	border: 1px solid transparent; border-radius: var(--pill);
	cursor: pointer; text-decoration: none; white-space: nowrap;
	transition: background-color .25s var(--ease-suave), color .25s var(--ease-suave),
		border-color .25s var(--ease-suave), transform .18s var(--ease-suave), opacity .2s;
	-webkit-tap-highlight-color: transparent;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.975); }

.btn--gold { background: var(--gold); color: #221803; }
.btn--gold:hover { background: #E8BC66; }

.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--linha-forte); }
.btn--ghost:hover { background: rgba(0, 0, 0, .04); }

.section--dark .btn--ghost,
.hero .btn--ghost,
.cta-final .btn--ghost { color: #F5F5F7; border-color: rgba(255, 255, 255, .28); }
.section--dark .btn--ghost:hover,
.hero .btn--ghost:hover,
.cta-final .btn--ghost:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .45); }

.hero-card .btn--ghost { color: var(--ink); border-color: var(--linha-forte); }
.hero-card .btn--ghost:hover { background: rgba(0, 0, 0, .04); }

.btn--block { width: 100%; }
.btn .ico { width: 19px; height: 19px; flex: none; }

/* Link com seta, no espírito dos links da Apple. */
.link-seta {
	display: inline-flex; align-items: center; gap: 5px;
	font-size: 16px; font-weight: 500; color: var(--gold-ink); text-decoration: none;
}
.link-seta::after {
	content: "›";
	font-size: 20px; line-height: 1;
	transform: translateY(-1px);
	transition: transform .25s var(--ease);
}
.link-seta:hover { text-decoration: none; }
.link-seta:hover::after { transform: translate(4px, -1px); }

/* ==========================================================================
   5. Cabeçalho — barra fixa translúcida
   ========================================================================== */
.site-header {
	position: sticky; top: 0; z-index: 60;
	min-height: var(--nav-h);
	background: rgba(255, 255, 255, .72);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid transparent;
	transition: background-color .3s var(--ease-suave), border-color .3s var(--ease-suave);
}
/* Antes de rolar, o cabeçalho é invisível sobre o topo preto do hero. */
.is-home .site-header { background: rgba(0, 0, 0, .38); }
.is-home .site-header .nav a,
.is-home .site-header .brand-text { color: rgba(255, 255, 255, .92); }
.is-home .site-header .nav-toggle { color: #fff; border-color: rgba(255, 255, 255, .32); }
.is-home .site-header .brand-logo img { filter: none; }

.site-header.is-rolado {
	background: rgba(255, 255, 255, .82);
	border-bottom-color: var(--linha);
}
.is-home .site-header.is-rolado { background: rgba(255, 255, 255, .82); }
.is-home .site-header.is-rolado .nav a,
.is-home .site-header.is-rolado .brand-text { color: var(--ink); }
.is-home .site-header.is-rolado .nav-toggle { color: var(--ink); border-color: var(--linha-forte); }

.site-header .wrap {
	max-width: 1320px;
	padding-inline: clamp(20px, 3.4vw, 44px);
}
.header-inner {
	display: flex; align-items: center; justify-content: space-between; gap: 28px;
	min-height: var(--nav-h);
}

/* O logo do cliente é um brasão largo: limitamos pela altura, sempre.
   Precisa cobrir .custom-logo, que é a classe que o WordPress imprime. */
.brand-logo { display: flex; align-items: center; }
.brand-logo a { display: block; line-height: 0; }
.brand-logo img,
.custom-logo {
	height: 60px !important;
	width: auto !important;
	max-width: 280px;
	object-fit: contain;
}
@media (max-width: 940px) {
	.brand-logo img, .custom-logo { height: 50px !important; max-width: 220px; }
}
@media (max-width: 400px) {
	.brand-logo img, .custom-logo { height: 44px !important; max-width: 180px; }
}

.brand { display: flex; align-items: center; text-decoration: none; }
.brand-text {
	font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--ink);
	line-height: 1.1;
}
.brand-text small {
	display: block; font-size: 10px; font-weight: 500; letter-spacing: .14em;
	text-transform: uppercase; color: var(--gold-ink); margin-top: 2px;
}

.nav { display: flex; align-items: center; gap: 10px; }
.nav ul { list-style: none; display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; }
.nav a {
	display: block; padding: 8px 12px; border-radius: var(--r-sm);
	font-size: 15px; font-weight: 400; letter-spacing: -.01em; white-space: nowrap;
	color: var(--ink); text-decoration: none;
	transition: color .2s, background-color .2s;
}
.nav a:hover { text-decoration: none; color: var(--gold-ink); }
.nav .current-menu-item > a { color: var(--gold-ink); }
.nav .btn--nav {
	margin-left: 10px;
	font-size: 15px; font-weight: 500;
	padding: 0 22px; min-height: 42px; line-height: 42px;
}

.nav-toggle {
	display: none; align-items: center; gap: 8px;
	background: transparent; border: 1px solid var(--linha-forte); color: var(--ink);
	border-radius: var(--pill); padding: 8px 14px; min-height: 40px;
	font-family: inherit; font-size: 15px; cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.nav-toggle .bars { display: block; width: 16px; height: 1.5px; background: currentColor; position: relative; border-radius: 2px; }
.nav-toggle .bars::before, .nav-toggle .bars::after {
	content: ""; position: absolute; left: 0; width: 16px; height: 1.5px;
	background: currentColor; border-radius: 2px;
	transition: transform .3s var(--ease), opacity .2s;
}
.nav-toggle .bars::before { top: -5px; }
.nav-toggle .bars::after { top: 5px; }
.nav-toggle[aria-expanded="true"] .bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .bars::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 940px) {
	.nav-toggle { display: inline-flex; }
	.nav {
		position: absolute; left: 0; right: 0; top: 100%;
		flex-direction: column; align-items: stretch; gap: 0;
		padding: 8px clamp(20px, 3.4vw, 44px) 24px;
		background: rgba(255, 255, 255, .94);
		-webkit-backdrop-filter: saturate(180%) blur(20px);
		backdrop-filter: saturate(180%) blur(20px);
		border-bottom: 1px solid var(--linha);
		opacity: 0; visibility: hidden; transform: translateY(-8px);
		transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
	}
	.nav.is-open { opacity: 1; visibility: visible; transform: none; }
	.nav ul { flex-direction: column; align-items: stretch; gap: 0; }
	.nav li { border-bottom: 1px solid var(--linha); }
	.nav a, .is-home .site-header .nav a { padding: 15px 4px; font-size: 17px; color: var(--ink); }
	.nav .btn--nav { margin: 18px 0 0; width: 100%; min-height: 50px; line-height: 50px; padding: 0 24px; font-size: 17px; }
}

/* ==========================================================================
   6. Hero
   ========================================================================== */
.hero {
	position: relative;
	background: var(--preto);
	color: #F5F5F7;
	margin-top: calc(var(--nav-h) * -1);
	padding-top: var(--nav-h);
	overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img {
	width: 100%; height: 100%; object-fit: cover;
	opacity: .42;
	transform: scale(1.06);
	animation: heroIn 1.4s var(--ease) both;
}
@keyframes heroIn {
	from { opacity: 0; transform: scale(1.12); }
	to   { opacity: .42; transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
	.hero-media img { animation: none; opacity: .42; transform: scale(1.06); }
}
.hero::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background:
		radial-gradient(120% 90% at 20% 20%, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .82) 70%),
		linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .78) 100%);
}

.hero-inner { position: relative; z-index: 2; padding-block: clamp(72px, 10vw, 132px); }
.hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 440px);
	gap: clamp(36px, 5vw, 72px);
	align-items: center;
}
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } }

.hero h1 { color: #fff; }
.hero h1 .gold { color: var(--gold); display: block; }
.hero .lead { margin-top: 20px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.hero-trust {
	display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 34px;
	font-size: 14px; color: rgba(245, 245, 247, .62); letter-spacing: -.008em;
}
.hero-trust span { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust .ico { width: 16px; height: 16px; color: var(--gold); }

/* Cartão do formulário: uma folha branca sobre o preto. */
.hero-card {
	background: var(--paper); color: var(--ink);
	border-radius: var(--r-xl);
	padding: clamp(24px, 3vw, 34px);
	box-shadow: var(--sombra-2);
}
.cta-final .hero-card { box-shadow: none; }

/* ==========================================================================
   7. Serviços
   ========================================================================== */
.grid-servicos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 16px;
	margin-top: 48px;
}

.card-servico {
	display: flex; flex-direction: column; gap: 12px;
	background: var(--paper);
	border-radius: var(--r-lg);
	padding: 30px 28px 26px;
	transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.section--paper .card-servico { background: var(--paper); box-shadow: var(--sombra-1); }
.section:not(.section--paper) .card-servico { background: var(--paper-2); }
.card-servico:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); }

.card-servico .ico-wrap {
	width: 44px; height: 44px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--gold-soft); color: var(--gold-ink);
	margin-bottom: 4px;
}
.card-servico .ico { width: 22px; height: 22px; }
.card-servico h3 a { color: var(--ink); text-decoration: none; }
.card-servico h3 a:hover { text-decoration: none; color: var(--gold-ink); }
.card-servico .sub { font-size: 14px; font-weight: 500; color: var(--gold-ink); letter-spacing: -.01em; }
.card-servico p { color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.card-servico .acoes { margin-top: auto; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 18px; }

/* ==========================================================================
   8. Sobre
   ========================================================================== */
.sobre-grid {
	display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 64px); align-items: center;
}
@media (max-width: 860px) { .sobre-grid { grid-template-columns: 1fr; } }
.sobre-foto img { border-radius: var(--r-xl); width: 100%; box-shadow: var(--sombra-1); }

.selos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.selo {
	font-size: 14px; font-weight: 500; color: var(--ink-2);
	background: var(--paper-2); border-radius: var(--pill); padding: 8px 16px;
}
.section--paper .selo { background: var(--paper); }

/* ==========================================================================
   9. Passos
   ========================================================================== */
.passos {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 32px; margin-top: 48px; counter-reset: passo;
}
.passo { position: relative; padding-top: 22px; border-top: 1px solid var(--linha); }
.passo::before {
	counter-increment: passo; content: counter(passo, decimal-leading-zero);
	position: absolute; top: -2px; right: 0;
	font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--gold-ink);
	background: var(--paper-2); padding-left: 10px;
}
.section--paper .passo::before { background: var(--paper-2); }
.section:not(.section--paper) .passo::before { background: var(--paper); }
.passo h3 { font-size: 21px; margin-bottom: 8px; }
.passo p { color: var(--ink-2); font-size: 16px; line-height: 1.5; }

/* ==========================================================================
   10. FAQ — lista com separadores finos, como Ajustes do iOS
   ========================================================================== */
.faq { margin-top: 40px; max-width: var(--wrap-estreito); border-top: 1px solid var(--linha); }
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary {
	cursor: pointer; list-style: none; position: relative;
	padding: 24px 44px 24px 0;
	font-size: clamp(18px, 2vw, 21px); font-weight: 500; letter-spacing: -.018em;
	color: var(--ink);
	transition: color .2s;
}
.faq summary:hover { color: var(--gold-ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: ""; position: absolute; right: 8px; top: 50%;
	width: 10px; height: 10px; margin-top: -7px;
	border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
	border-radius: 1px;
	transform: rotate(45deg);
	transition: transform .3s var(--ease), border-color .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; border-color: var(--gold-ink); }
.faq .resposta {
	padding: 0 0 26px; color: var(--ink-2); max-width: 62ch; font-size: 17px; line-height: 1.55;
	animation: faqIn .35s var(--ease) both;
}
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   11. Formulário — campos preenchidos, sem borda, como no iOS
   ========================================================================== */
.form-wrap { scroll-margin-top: calc(var(--nav-h) + 20px); }
.form-title { font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -.026em; }
.form-text { color: var(--ink-2); font-size: 16px; margin-top: 10px; line-height: 1.5; }
.form { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.form-row { display: flex; flex-direction: column; gap: 7px; }
.form-row label { font-size: 14px; font-weight: 500; color: var(--ink-2); letter-spacing: -.008em; }

.form input[type="text"], .form input[type="tel"], .form input[type="email"],
.form select, .form textarea {
	font-family: inherit; font-size: 17px; color: var(--ink);
	background: var(--paper-2);
	border: 1px solid transparent; border-radius: var(--r-md);
	padding: 14px 15px; width: 100%; min-height: 52px;
	transition: background-color .2s, border-color .2s, box-shadow .2s;
	-webkit-appearance: none; appearance: none;
}
.form select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236E6E73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 15px center; background-size: 12px;
	padding-right: 40px;
}
.form textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
.form input::placeholder, .form textarea::placeholder { color: var(--ink-3); }
.form input:focus, .form select:focus, .form textarea:focus {
	background: var(--paper);
	border-color: var(--gold);
	box-shadow: 0 0 0 4px var(--gold-soft);
	outline: none;
}
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-legal { font-size: 13px; color: var(--ink-3); line-height: 1.45; }
.form-msg { padding: 13px 16px; border-radius: var(--r-md); font-size: 15px; margin-top: 16px; }
.form-msg--erro { background: rgba(179, 38, 30, .08); color: var(--erro); }
.form-msg--ok { background: rgba(29, 122, 76, .1); color: var(--ok); }
.form button[type="submit"] { margin-top: 4px; }

/* ==========================================================================
   12. Conteúdo editorial
   ========================================================================== */
.entry { max-width: 68ch; font-size: 18px; line-height: 1.6; color: var(--ink); }
.entry > * + * { margin-top: 20px; }
.entry h2 { margin-top: 44px; }
.entry h3 { margin-top: 32px; }
.entry p { color: var(--ink-2); }
.entry ul, .entry ol { padding-left: 22px; color: var(--ink-2); }
.entry li + li { margin-top: 8px; }
.entry blockquote {
	border-left: 3px solid var(--gold); padding-left: 20px; color: var(--ink);
	font-size: 21px; letter-spacing: -.018em;
}
.entry img { border-radius: var(--r-lg); }
.entry a { text-decoration: underline; text-underline-offset: 3px; }

.page-head { padding-block: clamp(48px, 6vw, 88px) 0; }
.page-head .crumbs { font-size: 14px; color: var(--ink-3); margin-bottom: 16px; }
.page-head .crumbs a { color: var(--ink-3); text-decoration: none; }
.page-head .crumbs a:hover { color: var(--ink); }

.lista-posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.post-card {
	background: var(--paper-2); border-radius: var(--r-lg); padding: 28px;
	transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); }
.post-card h2 { font-size: 23px; letter-spacing: -.022em; margin-top: 8px; }
.post-card h2 a { color: var(--ink); text-decoration: none; }
.post-card h2 a:hover { text-decoration: none; color: var(--gold-ink); }
.post-card time { font-size: 13px; color: var(--ink-3); }
.post-card p { color: var(--ink-2); font-size: 16px; margin-top: 10px; line-height: 1.5; }

.paginacao { margin-top: 40px; display: flex; gap: 8px; flex-wrap: wrap; }
.paginacao .page-numbers {
	min-width: 42px; min-height: 42px;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0 14px; border-radius: var(--pill);
	background: var(--paper-2); color: var(--ink-2); text-decoration: none; font-size: 15px;
}
.paginacao .page-numbers:hover { background: var(--paper-3); text-decoration: none; }
.paginacao .page-numbers.current { background: var(--ink); color: #fff; }

/* ==========================================================================
   13. CTA final
   ========================================================================== */
.cta-final { background: var(--preto); color: #F5F5F7; }
.cta-final h2 .gold { color: var(--gold); }
.cta-grid {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
	gap: clamp(32px, 5vw, 64px); align-items: center;
}
@media (max-width: 940px) { .cta-grid { grid-template-columns: 1fr; } }

.cta-atalhos { display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 22px 0 0; padding: 0; }
.cta-atalhos .email { text-align: center; font-size: 15px; }

/* ==========================================================================
   14. Rodapé
   ========================================================================== */
.site-footer {
	background: var(--paper-2); color: var(--ink-2);
	padding-block: 56px 36px; font-size: 15px;
	border-top: 1px solid var(--linha);
}
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 34px; }
.site-footer h3 {
	font-size: 13px; font-weight: 600; letter-spacing: -.005em;
	color: var(--ink); margin-bottom: 14px;
}
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-top: 10px; }
.site-footer p + p { margin-top: 6px; }
.footer-bottom {
	margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--linha);
	display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between;
	font-size: 13px; color: var(--ink-3);
}

/* ==========================================================================
   15. Barra fixa no mobile — vidro, como o dock
   ========================================================================== */
.barra-mobile {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: none;
	gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, .78);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-top: 1px solid var(--linha);
}
.barra-mobile a {
	flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 46px; border-radius: var(--pill);
	font-size: 16px; font-weight: 500; text-decoration: none;
	transition: transform .18s var(--ease-suave);
}
.barra-mobile a:active { transform: scale(.97); }
.barra-mobile .wa { background: var(--gold); color: #221803; }
.barra-mobile .tel { background: var(--paper-2); color: var(--ink); }
.barra-mobile .ico { width: 18px; height: 18px; }
@media (max-width: 780px) { .barra-mobile { display: flex; } }

/* ==========================================================================
   16. Alinhamentos do editor
   ========================================================================== */
.alignleft { float: left; margin: 6px 24px 16px 0; }
.alignright { float: right; margin: 6px 0 16px 24px; }
.aligncenter { margin-inline: auto; }
.wp-caption-text { font-size: 14px; color: var(--ink-3); margin-top: 8px; }