/*
Landing Pages (Portela Cunha Advogados) — Auxílio-Acidente e Direito Criminal.
Canvas: sem header/menu do site (page templates bypassam header.php/footer.php).
Consome os mesmos tokens --scbase-* do style.css principal (pele do cliente).

Progressive enhancement: todo efeito de entrada/máscara/sublinhado só é aplicado
sob a classe .js-enabled (adicionada por um script inline no <head>, antes do
lp.js carregar) — sem JavaScript, tudo já nasce visível e funcional.

Projeto gerado por Edu Santana (ES Soluções Web e MKT LTDA) | oedusantana.com
*/

/* ==========================================================================
   Variáveis locais das LPs — vermelho só existe na LP Criminal (âncora de
   marca da referência do operador), nunca vaza pro resto do site.
   ========================================================================== */

.scbase-lp-canvas {
	--lp-vermelho: var(--scbase-cor-primaria);
	--lp-vermelho-escuro: #0b1523;
	background: var(--scbase-cor-fundo);
}

.scbase-lp-criminal {
	--lp-acento-bloco: var(--scbase-cor-primaria);
}

.scbase-lp-auxilio-acidente {
	--lp-acento-bloco: var(--scbase-cor-acento);
}

/* ==========================================================================
   Botões das LPs — padrão fixado pelo operador (2026-09-01): sempre verde do
   WhatsApp, retângulo com canto de 8px (não mais pílula), padding 20px
   vertical / 40px horizontal. `.scbase-hero-cta` já ganhou esse visual
   globalmente em style.css (o operador pediu o mesmo padrão pro site
   institucional) — aqui só os elementos que existem SÓ nas LPs.
   ========================================================================== */

.scbase-lp-canvas {
	--lp-whatsapp-verde: linear-gradient(90deg, #1f5c38 0%, #3fce82 100%);
	--lp-whatsapp-verde-hover: linear-gradient(90deg, #194a2c 0%, #35b872 100%);
}

.scbase-lp-canvas .lp-stepper-opcao {
	background: var(--lp-whatsapp-verde);
	border-color: #1f5c38;
	color: #ffffff;
	padding: 20px 40px;
	border-radius: 8px;
}

.scbase-lp-canvas .lp-stepper-opcao:hover,
.scbase-lp-canvas .lp-stepper-opcao:focus-visible {
	background: var(--lp-whatsapp-verde-hover);
	border-color: #194a2c;
	color: #ffffff;
}

/* Botão flutuante (desktop) — círculo com ícone só, igual ao padrão do site
   institucional (nunca pílula com texto, nunca quadrado — operador,
   2026-09-01). Só a cor acompanha o degradê verde dos demais botões; forma
   e badge ficam definidas mais abaixo, junto do resto do componente. */
.scbase-lp-canvas .lp-lateral-whatsapp {
	background: var(--lp-whatsapp-verde);
}

.scbase-lp-canvas .lp-lateral-whatsapp:hover {
	background: var(--lp-whatsapp-verde-hover);
}

.scbase-lp-canvas .lp-barra-fixa-mobile {
	background: var(--lp-whatsapp-verde);
}

.scbase-lp-canvas .lp-barra-fixa-mobile a {
	color: #ffffff;
}

.scbase-lp-canvas .lp-barra-fixa-mobile .scbase-icon {
	color: #ffffff;
}

/* ==========================================================================
   Reset de canvas — sem nav/menu do site; garante que a página respire full-bleed.
   ========================================================================== */

.scbase-lp-canvas {
	margin: 0;
}

.scbase-lp-canvas img {
	max-width: 100%;
	height: auto;
	display: block;
}

.scbase-lp-canvas a {
	color: inherit;
}

/* ==========================================================================
   Progressive enhancement — reveal ao rolar, sublinhado desenhado, máscaras.
   Sem .js-enabled (sem JS ou motion reduzido), tudo nasce 100% visível.
   ========================================================================== */

.lp-section {
	padding: var(--scbase-espaco-secao) 0;
	position: relative;
	background: var(--scbase-cor-superficie);
}

/* "Quem Somos" (template-parts/sobre-resumo, compartilhado com a Home) tinha
   o mesmo tom neutro das seções sem modificador — vira branco só dentro da
   LP (.scbase-lp-canvas), sem mexer no visual da Home. Decisão do operador,
   2026-09-02: toda seção nesse tom neutro passa a branco, uniformemente. */
.scbase-lp-canvas .scbase-secao-sobre {
	background: var(--scbase-cor-superficie);
}

.lp-section--tight {
	padding: calc(var(--scbase-espaco-secao) * 0.6) 0;
}

.lp-section--dark {
	background: var(--scbase-cor-primaria);
	color: var(--scbase-cor-texto-sobre-escuro);
}

.lp-section--alt {
	background: var(--scbase-cor-fundo-alt);
}

.lp-section--bloco {
	background: var(--lp-acento-bloco);
	color: #fdf6ef;
}

.lp-eyebrow {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--scbase-cor-acento);
	margin-bottom: 14px;
}

.lp-eyebrow--destaque {
	font-size: 0.82rem;
	padding: 8px 20px;
	border: 1px solid rgba(187, 155, 97, .35);
	border-radius: 999px;
	background: rgba(187, 155, 97, .08);
}

.lp-section--dark .lp-eyebrow,
.lp-section--bloco .lp-eyebrow {
	color: #f0d9b5;
}

.lp-titulo {
	font-family: var(--scbase-fonte-titulo);
	font-weight: 600;
	line-height: 1.18;
	margin: 0 0 20px;
	max-width: 18ch;
}

.lp-titulo--largo {
	max-width: 26ch;
}

/* Padrão de página de venda (decisão do operador, 2026-09-02): título de
   seção + texto abaixo vêm sempre centralizados, EXCETO quando a seção é um
   layout de 2 colunas lado a lado (aí ficam presos à coluna, alinhados à
   esquerda naturalmente) — não repetir esse ajuste seção por seção. Hero e
   CTA final ficam de fora dessa regra (mantêm a margem esquerda já fixada).
   O seletor de filho direto já exclui sozinho as seções de 2 colunas, porque
   nelas o título/texto fica aninhado dentro de um wrapper extra, não é filho
   direto de .scbase-container. */
.lp-section > .scbase-container > .lp-eyebrow {
	display: block;
	text-align: center;
}

.lp-section > .scbase-container > .lp-titulo,
.lp-section > .scbase-container > .lp-texto {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.lp-texto {
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--scbase-cor-texto-suave);
	max-width: 62ch;
}

.lp-section--dark .lp-texto,
.lp-section--bloco .lp-texto {
	color: rgba(253, 246, 239, 0.85);
}

/* h1-h4 do tema forçam --scbase-cor-texto (escuro) por padrão — precisa de
   override explícito nas seções escuras/bloco pra manter contraste AA. */
.lp-section--dark .lp-titulo,
.lp-section--bloco .lp-titulo {
	color: #fff;
}

.js-enabled [data-reveal] {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.js-enabled [data-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}

.js-enabled [data-reveal-delay="1"] { transition-delay: 0.1s; }
.js-enabled [data-reveal-delay="2"] { transition-delay: 0.2s; }
.js-enabled [data-reveal-delay="3"] { transition-delay: 0.3s; }
.js-enabled [data-reveal-delay="4"] { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
	.js-enabled [data-reveal] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

.lp-underline {
	position: relative;
	display: inline-block;
}

.lp-underline::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.02em;
	height: 0.09em;
	background: var(--scbase-cor-acento);
	transform: scaleX(1);
	transform-origin: left;
}

.js-enabled .lp-underline::after {
	transform: scaleX(0);
	transition: transform 0.7s ease 0.35s;
}

.js-enabled [data-reveal].is-visible .lp-underline::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.js-enabled .lp-underline::after {
		transform: scaleX(1) !important;
		transition: none !important;
	}
}

/* Zoom sutil de imagem de hero, só com JS + motion permitido. */
.lp-zoom-in {
	transform: scale(1);
}

.js-enabled .lp-zoom-in {
	transform: scale(1.02);
	transition: transform 1.1s ease;
}

.js-enabled .lp-zoom-in.is-visible {
	transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.js-enabled .lp-zoom-in { transform: scale(1) !important; transition: none !important; }
}

/* Máscara "cortina" que revela retrato — some sem JS (foto já visível). */
.lp-foto-revelar {
	position: relative;
	overflow: hidden;
}

.lp-foto-revelar::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--scbase-cor-fundo-alt);
	transform: scaleX(0);
	transform-origin: right;
	z-index: 1;
}

.js-enabled .lp-foto-revelar::before {
	transform: scaleX(1);
	transition: transform 0.7s ease;
}

.js-enabled .lp-foto-revelar.is-visible::before {
	transform: scaleX(0);
	transition-delay: 0.15s;
}

@media (prefers-reduced-motion: reduce) {
	.js-enabled .lp-foto-revelar::before { display: none; }
}

/* Linha do infográfico/timeline — desenha conforme entra no viewport. */
.lp-linha-crescer {
	position: relative;
}

.lp-linha-crescer::before {
	content: "";
	position: absolute;
	background: var(--scbase-cor-acento);
	transform: scaleY(1);
	transform-origin: top;
}

.js-enabled .lp-linha-crescer::before {
	transform: scaleY(0);
	transition: transform 1s ease;
}

.js-enabled .lp-linha-crescer.is-visible::before {
	transform: scaleY(1);
}

@media (prefers-reduced-motion: reduce) {
	.js-enabled .lp-linha-crescer::before { transform: scaleY(1) !important; transition: none !important; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.lp-hero {
	position: relative;
	min-height: 90vh;
	display: flex;
	align-items: center;
	background-color: var(--scbase-cor-primaria);
	background-size: cover;
	background-position: center;
	color: var(--scbase-cor-texto-sobre-escuro);
	overflow: hidden;
}

/* Correção 2026-09-01 (operador): o Hero das LPs segue a mesma regra do site
   institucional — imagem de fundo já vem pronta com overlay embutido (banner
   do cliente), então não soma outro gradiente CSS por cima; margem esquerda
   própria via .lp-hero-inner, nunca centralizado. */
.lp-hero-inner {
	position: relative;
	z-index: 2;
	max-width: min(64vw, 1000px);
	box-sizing: border-box;
	padding: 120px 24px 80px clamp(24px, 6vw, 96px);
}

.lp-hero-marca {
	display: block;
	width: 220px;
	height: auto;
	margin: 0 0 28px;
}

.lp-hero h1 {
	font-family: var(--scbase-fonte-titulo);
	font-weight: 600;
	font-size: clamp(1.85rem, 3.4vw, 2.6rem);
	line-height: 1.22;
	margin: 0 0 24px;
	color: #fff;
}

.lp-hero .lp-line {
	display: block;
}

.lp-hero-subtitulo {
	font-size: 1.1rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.85);
	max-width: 62ch;
	margin: 0 0 32px;
}

.lp-hero-ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	margin-bottom: 18px;
}

.lp-hero-link-secundario {
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: rgba(255, 255, 255, 0.9);
}

.lp-hero-confianca {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.85rem;
	font-weight: 600;
	color: #f0d9b5;
	background: rgba(0, 0, 0, 0.25);
	border: 1px solid rgba(240, 217, 181, 0.35);
	border-radius: var(--scbase-raio-pill);
	padding: 8px 16px;
	margin-bottom: 16px;
}

.lp-hero-microcopy {
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.65);
	max-width: 48ch;
}

/* ==========================================================================
   Cards de dor / pontos (grid genérico reaproveitado em várias seções)
   ========================================================================== */

.lp-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 24px;
	margin-top: 44px;
}

.lp-card {
	background: var(--scbase-cor-superficie);
	border: 1px solid var(--scbase-cor-borda);
	border-radius: var(--scbase-raio);
	padding: 28px 26px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.lp-section--dark .lp-card,
.lp-section--bloco .lp-card {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.16);
	color: #fdf6ef;
}

.lp-card-icone {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--scbase-raio);
	background: var(--scbase-cor-fundo-alt);
	color: var(--scbase-cor-primaria);
}

.lp-section--dark .lp-card-icone,
.lp-section--bloco .lp-card-icone {
	background: rgba(255, 255, 255, 0.12);
	color: #f0d9b5;
}

.lp-card-icone .scbase-icon {
	width: 22px;
	height: 22px;
}

.lp-card p {
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.55;
}

.lp-card h3 {
	margin: 0;
	font-family: var(--scbase-fonte-titulo);
	font-size: 1.15rem;
	line-height: 1.3;
	color: var(--scbase-cor-primaria);
}

.lp-card-media {
	aspect-ratio: 4 / 5;
	margin: -28px -26px 4px;
	overflow: hidden;
	border-radius: var(--scbase-raio) var(--scbase-raio) 0 0;
}

.lp-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   Infográfico do benefício (auxílio-acidente) — 4 etapas em linha.
   ========================================================================== */

.lp-infografico {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin-top: 48px;
	counter-reset: lp-etapa;
}

.lp-infografico-etapa {
	flex: 1 1 220px;
	position: relative;
	padding: 0 20px 20px 0;
	text-align: left;
}

.lp-infografico-etapa::before {
	counter-increment: lp-etapa;
	content: counter(lp-etapa, decimal-leading-zero);
	display: block;
	font-family: var(--scbase-fonte-titulo);
	font-size: 1.6rem;
	color: var(--scbase-cor-acento);
	margin-bottom: 10px;
}

.lp-infografico-etapa:not(:last-child) {
	border-right: 1px dashed var(--scbase-cor-borda-forte);
	margin-right: 8px;
}

.lp-infografico-etapa p {
	margin: 0;
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.4;
}

/* ==========================================================================
   Autoidentificação — stepper (auxílio-acidente §4). No-JS: lista simples,
   sempre completa. Com JS: uma pergunta por vez, com progresso.
   ========================================================================== */

.lp-stepper {
	margin-top: 44px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--scbase-raio-grande);
	padding: 36px;
}

.lp-stepper-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.lp-stepper-lista li {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	font-size: 1.05rem;
	line-height: 1.5;
}

.lp-stepper-numero {
	font-family: var(--scbase-fonte-titulo);
	font-size: 1.3rem;
	color: var(--scbase-cor-acento);
	flex: none;
	width: 2ch;
}

.lp-stepper-pergunta {
	display: none;
}

.js-enabled .lp-stepper-lista {
	display: none;
}

.js-enabled .lp-stepper-pergunta {
	display: block;
}

.lp-stepper-pergunta-atual {
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.4;
	margin: 0 0 28px;
	min-height: 3.6em;
}

.lp-stepper-progresso {
	display: flex;
	gap: 8px;
	margin-bottom: 28px;
}

.lp-stepper-ponto {
	flex: 1;
	height: 4px;
	border-radius: var(--scbase-raio-pill);
	background: rgba(255, 255, 255, 0.18);
}

.lp-stepper-ponto.is-ativo,
.lp-stepper-ponto.is-concluido {
	background: var(--scbase-cor-acento);
}

.lp-stepper-acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 20px;
}

.lp-stepper-opcao {
	border: 1px solid rgba(255, 255, 255, 0.3);
	background: transparent;
	color: #fff;
	font-family: var(--scbase-fonte-corpo);
	font-size: 0.95rem;
	font-weight: 600;
	padding: 12px 24px;
	border-radius: var(--scbase-raio-pill);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.lp-stepper-opcao:hover,
.lp-stepper-opcao:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--scbase-cor-acento);
}

.lp-stepper-pular {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.65);
	text-decoration: underline;
}

.lp-stepper-final {
	display: none;
}

.lp-stepper-final.is-ativo {
	display: block;
}

.lp-stepper-final p {
	font-size: 1.15rem;
	font-weight: 600;
	margin: 0 0 24px;
}

/* ==========================================================================
   Tríptico de situações que geram dúvida (auxílio-acidente §5)
   ========================================================================== */

.lp-triptico {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
	margin-top: 44px;
}

.lp-triptico-painel {
	background: var(--scbase-cor-superficie);
	border: 1px solid var(--scbase-cor-borda);
	border-radius: var(--scbase-raio);
	padding: 32px 28px;
}

.lp-triptico-media {
	aspect-ratio: 3 / 2;
	margin: -32px -28px 20px;
	overflow: hidden;
	border-radius: var(--scbase-raio) var(--scbase-raio) 0 0;
}

.lp-triptico-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lp-triptico-painel h3 {
	font-family: var(--scbase-fonte-titulo);
	font-size: 1.15rem;
	margin: 0 0 12px;
	color: var(--scbase-cor-primaria);
}

.lp-triptico-painel p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--scbase-cor-texto-suave);
}

/* ==========================================================================
   Timeline "como funciona"
   ========================================================================== */

.lp-timeline-grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 56px;
	align-items: start;
}

.lp-timeline-media {
	aspect-ratio: 4 / 3;
	border-radius: var(--scbase-raio-grande);
	overflow: hidden;
	position: sticky;
	top: 32px;
}

.lp-timeline-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 900px) {
	.lp-timeline-grid {
		grid-template-columns: 1fr;
	}

	.lp-timeline-media {
		position: static;
		order: -1;
		max-width: 420px;
		margin: 0 auto;
	}
}

.lp-timeline {
	margin-top: 48px;
	position: relative;
	padding-left: 48px;
}

.lp-timeline::before {
	content: "";
	position: absolute;
	left: 15px;
	top: 6px;
	bottom: 6px;
	width: 2px;
	background: var(--scbase-cor-borda-forte);
}

.lp-timeline-passo {
	position: relative;
	padding-bottom: 40px;
}

.lp-timeline-passo:last-child {
	padding-bottom: 0;
}

.lp-timeline-passo::before {
	content: attr(data-passo);
	position: absolute;
	left: -48px;
	top: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--scbase-cor-primaria);
	color: #fff;
	font-family: var(--scbase-fonte-titulo);
	font-size: 0.95rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lp-timeline-passo h3 {
	margin: 0 0 8px;
	font-size: 1.05rem;
	font-family: var(--scbase-fonte-titulo);
}

.lp-timeline-passo p {
	margin: 0;
	color: var(--scbase-cor-texto-suave);
	font-size: 0.95rem;
	line-height: 1.6;
	max-width: 56ch;
}

/* ==========================================================================
   Checklist de documentos
   ========================================================================== */

/* Ficha editorial numerada (pedido do operador, 2026-09-07, Auxílio-Acidente "Quem pode
   ter direito") — 2ª tentativa: a 1ª versão (card branco arredondado + ícone em selo
   circular) foi rejeitada por "fraca" e "cara de IA", padrão comum demais de template
   genérico. Trocado o ícone Lucide por numeral grande em Libre Caslon Display (mesma
   lógica de .lp-beneficio, mas mais editorial: numeral sobreposto/vazado, sem caixa
   fechada nem sombra) e o grid de cards por uma grade "ficha técnica" com bordas finas
   (sem raio, sem sombra, sem hover-lift) — deliberadamente distinto do resto da página
   pra não repetir o mesmo vocabulário visual (cards com sombra) em toda seção. */
.lp-checklist {
	list-style: none;
	margin: 44px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border-top: 1px solid var(--scbase-cor-borda);
	border-left: 1px solid var(--scbase-cor-borda);
}

.lp-checklist li {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 4px;
	padding: 28px 30px 28px 74px;
	border-right: 1px solid var(--scbase-cor-borda);
	border-bottom: 1px solid var(--scbase-cor-borda);
	transition: background-color .2s ease;
}

@media (hover: hover) and (pointer: fine) {
	.lp-checklist li:hover {
		background: var(--scbase-cor-fundo-alt);
	}
}

.lp-checklist-num {
	position: absolute;
	left: 22px;
	top: 24px;
	font-family: var(--scbase-fonte-titulo);
	font-size: 1.9rem;
	font-weight: 400;
	line-height: 1;
	color: var(--scbase-cor-texto-suave);
}

.lp-checklist li p {
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.55;
	color: var(--scbase-cor-texto-suave);
}

@media (max-width: 640px) {
	.lp-checklist {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Confiança profissional — retrato real + máscara de revelação
   ========================================================================== */

.lp-confianca {
	display: grid;
	grid-template-columns: minmax(260px, 380px) 1fr;
	gap: 56px;
	align-items: center;
}

.lp-confianca-foto {
	aspect-ratio: 4 / 5;
	border-radius: var(--scbase-raio-grande);
}

.lp-confianca-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

/* Nome + OAB (2026-09-02): título vira o nome do advogado, OAB menorzinho
   logo abaixo, antes do texto de atuação. */
.lp-confianca .lp-titulo {
	margin-bottom: 4px;
}

.lp-confianca-oab {
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--scbase-cor-texto-suave);
	margin: 0 0 20px;
}

.lp-confianca-selos {
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
}

.lp-confianca-selos li {
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--scbase-cor-primaria);
	position: relative;
	padding-left: 18px;
}

.lp-confianca-selos li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--scbase-cor-acento);
}

/* ==========================================================================
   FAQ — <details> nativo, estilizado
   ========================================================================== */

.lp-faq {
	margin-top: 40px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lp-faq details {
	background: var(--scbase-cor-superficie);
	border: 1px solid var(--scbase-cor-borda);
	border-radius: var(--scbase-raio);
	padding: 6px 24px;
}

.lp-section--dark .lp-faq details {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.14);
}

.lp-faq summary {
	cursor: pointer;
	list-style: none;
	padding: 18px 0;
	font-weight: 600;
	font-size: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

.lp-faq summary::-webkit-details-marker {
	display: none;
}

.lp-faq summary::after {
	content: "+";
	font-size: 1.4rem;
	line-height: 1;
	color: var(--scbase-cor-acento);
	flex: none;
}

.lp-faq details[open] summary::after {
	content: "–";
}

.lp-faq p {
	margin: 0 0 20px;
	color: var(--scbase-cor-texto-suave);
	font-size: 0.95rem;
	line-height: 1.65;
}

.lp-section--dark .lp-faq p {
	color: rgba(253, 246, 239, 0.8);
}

/* ==========================================================================
   CTA final
   ========================================================================== */

.lp-cta-final {
	position: relative;
	background: var(--scbase-cor-primaria);
	color: #fff;
	overflow: hidden;
}

.lp-cta-final-media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.lp-cta-final-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 12%;
	opacity: 1;
}

/* Overlay afrouxado (auditoria BODS, 2026-09-04): a versão anterior
   (0.97/0.88/0.7 de alfa, foto a 0.28 de opacidade) deixava a foto real da
   Dra. Mariane praticamente invisível bem no fechamento da página, o ponto
   de maior intenção de conversão. Mantém contraste forte só na faixa onde
   fica o texto (~40% inicial) e libera a foto na maior parte da seção. */
.lp-cta-final-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(17, 28, 45, 0.95) 0%, rgba(17, 28, 45, 0.75) 34%, rgba(17, 28, 45, 0.22) 62%, rgba(17, 28, 45, 0.12) 100%);
	z-index: 1;
}

/* Bug real encontrado na auditoria BODS (2026-09-04): o wrapper
   `.scbase-container.lp-section` herdava o `background: var(--scbase-cor-superficie)`
   (branco opaco) da regra genérica de `.lp-section`, cobrindo a foto de fundo
   inteira por trás do overlay — a foto da Dra. Mariane nunca esteve
   realmente visível, independente do quanto se ajustasse a opacidade do
   overlay. Precisa ficar transparente aqui para a foto aparecer.
   (Não afeta a Criminal, que já sobrescreve esse fundo de propósito para o
   cartão navy do CTA final.) */
.lp-cta-final > .scbase-container.lp-section {
	background: transparent;
}

.lp-cta-final-inner {
	position: relative;
	z-index: 2;
	max-width: 620px;
}

.lp-cta-final .lp-titulo {
	color: #fff;
	max-width: 20ch;
}

.lp-cta-final-microcopy {
	margin-top: 18px;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.65);
}

/* Fechamento da LP Criminal (tuning 2026-09-03): fundo externo branco e
   quadro central no mesmo azul grafite aprovado pelo operador. */
.scbase-lp-criminal .lp-cta-final,
.scbase-lp-auxilio-acidente .lp-cta-final {
	background: var(--scbase-cor-superficie);
	padding: clamp(76px, 9vw, 116px) 24px;
	overflow: visible;
}

.scbase-lp-criminal .lp-cta-final > .scbase-container.lp-section,
.scbase-lp-auxilio-acidente .lp-cta-final > .scbase-container.lp-section {
	position: relative;
	z-index: 2;
	width: min(100%, 1200px);
	margin: 0 auto;
	padding: clamp(52px, 6vw, 78px) clamp(28px, 7vw, 88px);
	background: #2f3a4a;
	border-radius: var(--scbase-raio-grande);
	box-shadow: 0 22px 56px rgba(17, 28, 45, 0.14);
	overflow: hidden;
}

/* Imagem de escritório como fundo do quadro (pedido do operador, 2026-09-05) — media/overlay
   ficam DENTRO do quadro agora (não mais cobrindo a seção inteira), clipadas pelo border-radius.
   Mesmo tratamento estendido pra Auxílio-Acidente na reconstrução com a copy V2 (2026-09-07). */
.scbase-lp-criminal .lp-cta-final-media,
.scbase-lp-criminal .lp-cta-final-overlay,
.scbase-lp-auxilio-acidente .lp-cta-final-media,
.scbase-lp-auxilio-acidente .lp-cta-final-overlay {
	border-radius: inherit;
}

.scbase-lp-criminal .lp-cta-final-overlay,
.scbase-lp-auxilio-acidente .lp-cta-final-overlay {
	background: linear-gradient(160deg, rgba(24, 36, 53, .95) 15%, rgba(24, 36, 53, .82) 55%, rgba(24, 36, 53, .7) 100%);
}

.scbase-lp-criminal .lp-cta-final-inner,
.scbase-lp-auxilio-acidente .lp-cta-final-inner {
	max-width: 680px;
	margin-inline: auto;
	text-align: center;
}

.scbase-lp-criminal .lp-cta-final .lp-eyebrow,
.scbase-lp-auxilio-acidente .lp-cta-final .lp-eyebrow {
	margin-bottom: 16px;
}

.scbase-lp-criminal .lp-cta-final .lp-titulo,
.scbase-lp-auxilio-acidente .lp-cta-final .lp-titulo {
	margin-bottom: 22px;
	margin-inline: auto;
}

.scbase-lp-criminal .lp-cta-final .lp-texto,
.scbase-lp-auxilio-acidente .lp-cta-final .lp-texto {
	margin-bottom: 24px;
	margin-inline: auto;
}

.scbase-lp-criminal .lp-cta-final-microcopy,
.scbase-lp-auxilio-acidente .lp-cta-final-microcopy {
	margin: 16px 0 0;
}

@media (max-width: 640px) {
	.scbase-lp-criminal .lp-cta-final,
	.scbase-lp-auxilio-acidente .lp-cta-final {
		padding: 40px 18px;
	}

	.scbase-lp-criminal .lp-cta-final > .scbase-container.lp-section,
	.scbase-lp-auxilio-acidente .lp-cta-final > .scbase-container.lp-section {
		padding: 40px 24px;
	}
}

/* ==========================================================================
   Barra fixa mobile + botão lateral desktop
   ========================================================================== */

.lp-barra-fixa-mobile {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	background: var(--scbase-cor-primaria);
	padding: 14px 20px;
	display: none;
	align-items: center;
	justify-content: center;
	box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.2);
	transform: translateY(100%);
	transition: transform 0.3s ease;
}

.lp-barra-fixa-mobile.is-visivel {
	transform: translateY(0);
}

.lp-barra-fixa-mobile a {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none;
}

.lp-barra-fixa-mobile .scbase-icon {
	width: 20px;
	height: 20px;
	color: var(--scbase-cor-acento);
}

/* Botão flutuante (desktop) — círculo com ícone, igual ao padrão já usado no
   site institucional (.scbase-whatsapp-flutuante): nunca pílula com texto,
   nunca quadrado (operador, 2026-09-01). Só a cor acompanha o degradê verde
   dos demais botões da LP. */
.lp-lateral-whatsapp {
	position: fixed;
	right: 28px;
	bottom: 28px;
	z-index: 60;
	display: none;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--scbase-cor-acento);
	box-shadow: var(--scbase-sombra-card);
	opacity: 1;
	transform: translateY(0);
	transition: background-color 0.15s ease;
}

.lp-lateral-whatsapp .scbase-icon {
	width: 28px;
	height: 28px;
	color: #fff;
}

.lp-lateral-whatsapp-badge {
	position: absolute;
	top: -4px;
	right: -2px;
	min-width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
	border-radius: var(--scbase-raio-pill);
	background: #c50303;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

/* Pedido do operador (2026-09-06): mesmo botão circular flutuante do desktop
   também no mobile, canto inferior direito — nunca mais a barra larga inferior. */
.js-enabled .lp-lateral-whatsapp {
	display: inline-flex;
}

/* ==========================================================================
   Rodapé legal mínimo da LP (canvas — sem menu/colunas, só crédito legal)
   ========================================================================== */

.lp-footer {
	background: var(--scbase-cor-primaria);
	color: rgba(255, 255, 255, 0.7);
	text-align: center;
	padding: 32px 24px calc(32px + 70px);
	font-size: 0.78rem;
}

.lp-footer p {
	margin: 0 0 6px;
}

.lp-footer a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: underline;
}

.scbase-lp-criminal .lp-footer p,
.scbase-lp-criminal .lp-footer a {
	color: #fff;
}

@media (min-width: 901px) {
	.lp-footer {
		padding-bottom: 32px;
	}
}

/* ========================================================================== 
   Catálogo editorial de áreas de atuação (Criminal §3). Composição inspirada
   nos dispositivos assimétricos do banco visual; pele integralmente Portela.
   ========================================================================== */

.lp-frentes-cabecalho {
	max-width: 760px;
	margin: 0 auto 52px;
	text-align: center;
}

.lp-frentes-cabecalho .lp-titulo,
.lp-frentes-cabecalho .lp-texto {
	margin-left: auto;
	margin-right: auto;
}

.lp-frentes-editorial {
	display: grid;
	grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
	gap: clamp(42px, 6vw, 88px);
	align-items: stretch;
}

.lp-frentes-media {
	position: relative;
	min-height: 620px;
	margin: 0;
	overflow: hidden;
	border-radius: var(--scbase-raio-grande);
	border: 1px solid rgba(202, 165, 91, 0.38);
	box-shadow: 0 26px 70px rgba(0, 0, 0, 0.26);
}

.lp-frentes-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(17, 28, 45, 0.02) 35%, rgba(17, 28, 45, 0.94) 100%);
}

.lp-frentes-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lp-frentes-media figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: 34px;
}

.lp-frentes-media figcaption span {
	display: block;
	margin-bottom: 9px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--scbase-cor-acento);
}

.lp-frentes-media figcaption strong {
	display: block;
	max-width: 18ch;
	font-family: var(--scbase-fonte-titulo);
	font-size: clamp(1.45rem, 2.4vw, 2rem);
	font-weight: 600;
	line-height: 1.18;
	color: #fff;
}

.lp-frentes-catalogo {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 42px;
	align-content: center;
}

.lp-frentes-catalogo li {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	gap: 12px;
	align-items: baseline;
	padding: 19px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
	font-family: var(--scbase-fonte-titulo);
	font-size: clamp(1rem, 1.4vw, 1.2rem);
	font-weight: 600;
	line-height: 1.35;
	color: #fff;
}

.lp-frente-numero {
	font-family: var(--scbase-fonte-corpo);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--scbase-cor-acento);
}

@media (max-width: 900px) {
	.lp-frentes-editorial {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.lp-frentes-media {
		min-height: 380px;
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 640px) {
	.lp-frentes-cabecalho {
		margin-bottom: 34px;
	}

	.lp-frentes-media {
		min-height: 330px;
		aspect-ratio: 4 / 3;
	}

	.lp-frentes-media figcaption {
		padding: 24px;
	}

	.lp-frentes-catalogo {
		grid-template-columns: 1fr;
	}

	.lp-frentes-catalogo li {
		padding: 16px 0;
	}
}

.lp-frentes-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 32px;
	font-weight: 700;
	color: #fdf6ef;
	text-decoration: underline;
}

/* ==========================================================================
   Seletor de situações (Criminal §2)
   ========================================================================== */

.lp-situacoes {
	margin-top: 44px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
}

/* Criminal: cinco cenários maiores em composição 3 + 2 centralizada. */
.scbase-lp-criminal .lp-situacoes {
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 24px;
}

.scbase-lp-criminal .lp-situacao-card {
	grid-column: span 2;
}

.scbase-lp-criminal .lp-situacao-card:nth-child(4) {
	grid-column: 2 / span 2;
}

.scbase-lp-criminal .lp-situacao-card:nth-child(5) {
	grid-column: 4 / span 2;
}

.lp-situacao-card {
	display: flex;
	flex-direction: column;
	gap: 0;
	background: var(--scbase-cor-superficie);
	border: 1px solid var(--scbase-cor-borda);
	border-radius: var(--scbase-raio);
	padding: 0;
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 14px 34px rgba(17, 28, 45, 0.08);
	transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.lp-situacao-card:hover,
.lp-situacao-card:focus-visible {
	border-color: var(--scbase-cor-acento);
	transform: translateY(-3px);
	box-shadow: 0 20px 44px rgba(17, 28, 45, 0.14);
}

.lp-situacao-media {
	display: block;
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--scbase-cor-primaria);
}

.lp-situacao-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 45%, rgba(17, 28, 45, 0.58) 100%);
}

.lp-situacao-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s ease;
}

.lp-situacao-card:hover .lp-situacao-media img,
.lp-situacao-card:focus-visible .lp-situacao-media img {
	transform: scale(1.035);
}

.lp-situacao-media .lp-card-icone {
	position: absolute;
	left: 20px;
	bottom: 18px;
	z-index: 1;
	background: var(--scbase-cor-primaria);
	color: var(--scbase-cor-acento);
	border: 1px solid rgba(202, 165, 91, 0.55);
}

.lp-situacao-conteudo {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 12px;
	padding: 22px 22px 24px;
}

.lp-situacao-selo {
	align-self: flex-start;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--lp-vermelho);
	background: rgba(122, 31, 43, 0.08);
	border-radius: var(--scbase-raio-pill);
	padding: 4px 12px;
}

.lp-situacao-card h3 {
	margin: 0;
	font-family: var(--scbase-fonte-titulo);
	font-size: 1.15rem;
	color: var(--scbase-cor-primaria);
}

.lp-situacao-card p {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--scbase-cor-texto-suave);
	flex: 1;
}

.lp-situacao-card > .lp-card-icone {
	margin: 24px 24px 0;
	background: rgba(17, 28, 45, 0.08);
	color: var(--scbase-cor-acento);
}

/* Tuning editorial da sequência Quem Somos + perfil profissional (2026-09-03).
   As duas imagens passam a compartilhar grade, proporção e ritmo visual. */
.scbase-lp-criminal .scbase-secao-sobre {
	padding-bottom: 42px;
}

.scbase-lp-criminal .scbase-secao-sobre + .lp-section {
	padding-top: 42px;
}

.scbase-lp-criminal .scbase-sobre-grid,
.scbase-lp-criminal .lp-confianca {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(40px, 5vw, 72px);
}

.scbase-lp-criminal .scbase-sobre-imagem,
.scbase-lp-criminal .lp-confianca-foto {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--scbase-raio-grande);
	box-shadow: 0 18px 44px rgba(17, 28, 45, 0.12);
}

.scbase-lp-criminal .scbase-sobre-imagem img,
.scbase-lp-criminal .lp-confianca-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

.scbase-lp-criminal .lp-confianca-foto img {
	object-position: 50% 22%;
}

.scbase-lp-criminal .lp-confianca .scbase-hero-cta,
.scbase-lp-criminal .lp-confianca .scbase-hero-cta:visited {
	margin-top: 24px;
	color: #fff;
}

@media (max-width: 980px) and (min-width: 641px) {
	.scbase-lp-criminal .lp-situacoes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.scbase-lp-criminal .lp-situacao-card,
	.scbase-lp-criminal .lp-situacao-card:nth-child(4) {
		grid-column: auto;
	}

	.scbase-lp-criminal .lp-situacao-card:nth-child(5) {
		grid-column: 1 / -1;
		width: calc(50% - 12px);
		justify-self: center;
	}
}

@media (max-width: 782px) {
	.scbase-lp-criminal .scbase-sobre-grid,
	.scbase-lp-criminal .lp-confianca {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.scbase-lp-criminal .lp-confianca-foto {
		max-width: none;
		margin: 0;
	}
}

@media (max-width: 640px) {
	.lp-situacoes {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: 16px;
		padding-bottom: 8px;
		margin-left: -24px;
		margin-right: -24px;
		padding-left: 24px;
		padding-right: 24px;
	}

	.lp-situacao-card {
		flex: 0 0 85%;
		grid-column: auto !important;
		scroll-snap-align: start;
	}
}

.lp-situacoes-dica {
	display: none;
	font-size: 0.78rem;
	color: var(--scbase-cor-texto-suave);
	margin-top: 8px;
}

@media (max-width: 640px) {
	.lp-situacoes-dica {
		display: block;
	}
}

/* ==========================================================================
   Tabs de resposta por cenário (Criminal §5)
   ========================================================================== */

.lp-tabs-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 32px;
}

.lp-tabs-nav[hidden] {
	display: none;
}

.lp-tabs-nav button {
	font-family: var(--scbase-fonte-corpo);
	font-size: 0.88rem;
	font-weight: 700;
	background: var(--scbase-cor-fundo-alt);
	color: var(--scbase-cor-texto);
	border: 1px solid var(--scbase-cor-borda);
	border-radius: var(--scbase-raio-pill);
	padding: 10px 20px;
	cursor: pointer;
}

.lp-tabs-nav button[aria-selected="true"] {
	background: var(--scbase-cor-primaria);
	border-color: var(--scbase-cor-primaria);
	color: #fff;
}

.lp-tab-panel {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
}

.lp-tab-panel + .lp-tab-panel {
	margin-top: 40px;
}

.js-enabled .lp-tab-panel[hidden] {
	display: none;
}

.lp-tab-panel-texto h3 {
	font-family: var(--scbase-fonte-titulo);
	font-size: 1.3rem;
	margin: 0 0 14px;
}

.lp-tab-panel-texto p {
	color: var(--scbase-cor-texto-suave);
	line-height: 1.65;
	margin: 0 0 20px;
}

.lp-tab-panel-selo {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--lp-vermelho);
	background: rgba(122, 31, 43, 0.08);
	border-radius: var(--scbase-raio-pill);
	padding: 5px 14px;
	margin-bottom: 14px;
}

.lp-tab-panel-icone {
	width: 100%;
	aspect-ratio: 1;
	border-radius: var(--scbase-raio-grande);
	background: var(--scbase-cor-fundo-alt);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.lp-tab-panel-icone img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lp-tab-panel-icone .scbase-icon {
	width: 64px;
	height: 64px;
	color: var(--lp-vermelho);
	opacity: 0.85;
}

.scbase-lp-criminal .lp-tab-panel .scbase-hero-cta,
.scbase-lp-criminal .lp-tab-panel .scbase-hero-cta:visited {
	color: #fff;
}

@media (max-width: 782px) {
	.lp-tab-panel {
		grid-template-columns: 1fr;
	}

	.lp-tab-panel-icone {
		order: -1;
		aspect-ratio: 1;
	}
}

/* ==========================================================================
   Mobile geral
   ========================================================================== */

@media (max-width: 782px) {
	.lp-hero {
		min-height: auto;
		background-size: 100% auto;
		background-position: top center;
		background-repeat: no-repeat;
		/* Tom exato copiado da parte mais escura da foto trabalhada pelo operador,
		   pra fundir sem costura visível onde a foto termina e a cor sólida começa. */
		background-color: #031323;
	}

	/* Foto sozinha, limpa, lá em cima (sem texto sobreposto, sem overlay escurecendo) —
	   os 380px de padding-top empurram TODO o bloco (logo+eyebrow+título+texto+botão)
	   pra baixo da foto, como um grupo só, colado (pedido explícito do operador). */
	.lp-hero-inner {
		padding: 260px 24px 32px;
		max-width: none;
	}

	.lp-hero h1 {
		margin-top: 0;
		margin-bottom: 10px;
	}

	.lp-hero-marca {
		margin-bottom: 20px;
	}

	.lp-hero .lp-eyebrow {
		font-size: 0.68rem;
		letter-spacing: 0.03em;
		margin-bottom: 20px;
	}

	.lp-hero-subtitulo {
		font-size: 0.92rem;
		line-height: 1.5;
		margin-bottom: 14px;
	}

	.lp-hero-ctas {
		margin-bottom: 0;
	}

	.lp-confianca {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.lp-confianca-foto {
		max-width: 280px;
		margin: 0 auto;
	}

	.lp-infografico {
		flex-direction: column;
	}

	.lp-infografico-etapa {
		flex-basis: auto;
		border-right: none !important;
		border-bottom: 1px dashed var(--scbase-cor-borda-forte);
		padding: 0 0 20px;
		margin-right: 0 !important;
		margin-bottom: 20px;
	}

	.lp-infografico-etapa:last-child {
		border-bottom: none;
	}

	.lp-section {
		padding: calc(var(--scbase-espaco-secao) * 0.65) 0;
	}
}

/* ==========================================================================
   Reconstrução LP Criminal — 2026-09-05
   Libre Caslon Display + DM Sans, arquitetura editorial aprovada pelo operador.
   ========================================================================== */

@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");
}

@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/dm-sans-variable-latin.woff2") format("woff2");
}

.scbase-lp-canvas {
	--scbase-fonte-titulo: "Libre Caslon Display", Georgia, serif;
	--scbase-fonte-corpo: "DM Sans", Arial, sans-serif;
	font-family: var(--scbase-fonte-corpo);
}

.scbase-lp-canvas h1,
.scbase-lp-canvas h2,
.scbase-lp-canvas h3,
.scbase-lp-canvas h4,
.scbase-lp-canvas .lp-titulo {
	font-family: var(--scbase-fonte-titulo);
	font-weight: 400;
}

.scbase-lp-canvas .lp-hero h1 {
	font-size: clamp(2.55rem, 4.2vw, 3.875rem);
	line-height: 1.02;
	letter-spacing: -0.025em;
	max-width: 17ch;
}

.lp-display-title {
	font-family: var(--scbase-fonte-titulo);
	font-size: clamp(2.65rem, 4.2vw, 3.875rem);
	font-weight: 400;
	line-height: 1.03;
	letter-spacing: -0.025em;
	margin: 0 0 24px;
	max-width: 18ch;
	color: var(--scbase-cor-primaria);
}

.lp-display-title--center {
	max-width: 22ch;
	margin-inline: auto;
	text-align: center;
}

.lp-section--dark .lp-display-title,
.lp-cta-final .lp-display-title {
	color: #fff;
}

.lp-gradient-text {
	color: var(--scbase-cor-acento);
	background: linear-gradient(105deg, #8f682f 0%, #d9bb78 45%, #ae8140 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.lp-hero .lp-gradient-text,
.lp-section--dark .lp-gradient-text,
.lp-cta-final .lp-gradient-text {
	background-image: linear-gradient(105deg, #f0d9a5 0%, #c99b4e 48%, #fff0c7 100%);
}

.lp-subtitulo-secao {
	font-family: var(--scbase-fonte-corpo) !important;
	font-size: clamp(1.15rem, 1.8vw, 1.45rem);
	font-weight: 600 !important;
	line-height: 1.4;
	text-align: center;
	max-width: 720px;
	margin: 0 auto 16px;
	color: var(--scbase-cor-primaria);
}

.lp-subtitulo-secao--left {
	text-align: left;
	margin-inline: 0;
}

.lp-texto--centro {
	text-align: center;
	margin-inline: auto;
}

.lp-eyebrow--center {
	display: block;
	text-align: center;
}

.scbase-lp-criminal .scbase-hero-cta,
.scbase-lp-criminal .scbase-hero-cta:visited,
.scbase-lp-auxilio-acidente .scbase-hero-cta,
.scbase-lp-auxilio-acidente .scbase-hero-cta:visited {
	color: #fff;
}

.scbase-lp-criminal .scbase-hero-cta .scbase-icon,
.scbase-lp-auxilio-acidente .scbase-hero-cta .scbase-icon {
	width: 20px;
	height: 20px;
}

/* Como podemos ajudar: preserva a navegação/painel solicitados. */
.lp-ajuda-criminal {
	padding-top: clamp(76px, 8vw, 118px);
}

.lp-ajuda-criminal .lp-tabs-nav {
	justify-content: center;
	margin: 40px auto 40px;
}

.lp-ajuda-criminal .lp-tabs-nav button {
	padding: 12px 22px;
	transition: transform .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.lp-ajuda-criminal .lp-tabs-nav button:hover,
.lp-ajuda-criminal .lp-tabs-nav button:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(17, 28, 45, .12);
}

.lp-ajuda-criminal .lp-tab-panel {
	gap: clamp(42px, 7vw, 92px);
	min-height: 560px;
}

.lp-ajuda-criminal .lp-tab-panel-texto h3 {
	font-size: clamp(1.7rem, 2.5vw, 2.3rem);
	margin-bottom: 18px;
}

.lp-ajuda-criminal .lp-tab-panel-texto p {
	font-size: 1.05rem;
	line-height: 1.75;
}

.lp-ajuda-criminal .lp-tab-panel-icone {
	box-shadow: 0 24px 54px rgba(17, 28, 45, .15);
}

/* Seções editoriais em duas colunas. */
.lp-split-editorial {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(360px, .88fr);
	gap: clamp(48px, 7vw, 96px);
	align-items: center;
}

.lp-split-editorial__texto > p {
	font-size: 1.03rem;
	line-height: 1.78;
	margin: 0 0 18px;
	color: var(--scbase-cor-texto-suave);
}

.lp-split-editorial__texto blockquote {
	margin: 28px 0;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--scbase-cor-acento);
	font-family: var(--scbase-fonte-titulo);
	font-size: 1.35rem;
	line-height: 1.45;
	color: var(--scbase-cor-primaria);
}

.lp-split-editorial__media {
	position: relative;
	margin: 0;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 4px 46px 4px 46px;
	box-shadow: 24px 26px 0 rgba(187, 155, 97, .2), 0 24px 58px rgba(17, 28, 45, .16);
}

.lp-split-editorial__media::after {
	content: "";
	position: absolute;
	inset: 18px;
	border: 1px solid rgba(255, 255, 255, .5);
	pointer-events: none;
}

.lp-split-editorial__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Benefícios: catálogo numerado com ritmo editorial. */
.lp-beneficios-defesa {
	background: #fff;
}

.lp-beneficios-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 52px;
	border-top: 1px solid var(--scbase-cor-borda);
	border-left: 1px solid var(--scbase-cor-borda);
}

.lp-beneficio {
	position: relative;
	padding: 34px 30px 38px;
	border-right: 1px solid var(--scbase-cor-borda);
	border-bottom: 1px solid var(--scbase-cor-borda);
	transition: background-color .22s ease, transform .22s ease;
}

.lp-beneficio:hover {
	background: #f6f2e9;
	transform: translateY(-4px);
}

.lp-beneficio > span {
	display: block;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--scbase-cor-acento);
	margin-bottom: 36px;
}

.lp-beneficio h3,
.lp-porque-card h3 {
	font-size: 1.35rem;
	margin-bottom: 12px;
}

.lp-beneficio p,
.lp-porque-card p {
	margin: 0;
	line-height: 1.65;
}

/* Motivos para contratar: cards profundos, sem aparência de template genérico. */
.lp-porque-portela {
	background: linear-gradient(140deg, #111c2d 0%, #223f5f 100%);
}

.lp-porque-portela .lp-subtitulo-secao,
.lp-porque-portela .lp-texto {
	color: rgba(255, 255, 255, .82);
}

.lp-porque-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 20px;
	margin-top: 48px;
}

/* Título/subtítulo/texto abrem até a largura do conteúdo abaixo (cards/grid), em vez do max-width estreito padrão. Reutilizável em qualquer seção centralizada que precise abrir mais. */
.lp-porque-titulo,
.lp-titulo-largo {
	max-width: none;
}

.lp-porque-card {
	grid-column: span 2;
	position: relative;
	min-height: 250px;
	padding: 30px;
	background: rgba(255, 255, 255, .065);
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 16px;
	color: #fff;
	overflow: hidden;
	transition: transform .25s ease, background-color .25s ease, border-color .25s ease;
}

.lp-porque-card:nth-child(4) { grid-column: 2 / span 2; }
.lp-porque-card:nth-child(5) { grid-column: 4 / span 2; }

.lp-porque-card::before {
	content: "";
	position: absolute;
	inset: auto -50px -70px auto;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(202, 165, 91, .28), transparent 68%);
}

.lp-porque-card:hover {
	transform: translateY(-7px);
	background: rgba(255, 255, 255, .1);
	border-color: rgba(240, 217, 165, .55);
}

.lp-porque-card .lp-card-icone {
	margin-bottom: 26px;
	background: rgba(202, 165, 91, .16);
	color: #f0d9a5;
}

.lp-porque-card h3 { color: #fff; }
.lp-porque-card p { color: rgba(255, 255, 255, .72); }

.lp-cta-central { text-align: center; margin-top: 42px; }
.lp-cta-central--left { text-align: left; }

/* Quem somos: marca d'água e fachada trabalhada como composição de marca. */
.lp-quem-somos-criminal {
	position: relative;
	overflow: hidden;
	background: var(--scbase-cor-superficie);
}

/* Tales: recebe o tom creme que "Quem Somos" tinha antes, pra alternar o ritmo entre as duas seções. */
.lp-tales-criminal {
	background: #f4f2ed;
}

.lp-marca-dagua {
	position: absolute;
	left: -3vw;
	top: 50%;
	transform: translateY(-50%);
	width: clamp(18rem, 34vw, 38rem);
	aspect-ratio: 1228 / 1200;
	background-color: rgba(187, 155, 97, .3);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	pointer-events: none;
	user-select: none;
}

.lp-quem-somos-criminal .scbase-container { position: relative; z-index: 1; }
.lp-split-editorial__media--fachada { border-radius: 50px 4px 50px 4px; }

/* Tales: título independente e perfil editorial. */
.lp-tales-criminal > .scbase-container > .lp-display-title { margin-bottom: 52px; }
.lp-tales-nome {
	font-size: clamp(2rem, 3vw, 2.8rem);
	margin: 0 0 2px;
	color: var(--scbase-cor-primaria);
}
.lp-tales-criminal .lp-confianca { align-items: stretch; }
.lp-tales-criminal .lp-confianca .lp-texto + .lp-texto { margin-top: 15px; }

/* Foto do Tales acompanha a altura da coluna de texto (título + textos + CTA), em vez do 4:3 raso padrão.
   A foto vira absolute dentro do card pra não "vazar" seu próprio aspect-ratio na hora do grid calcular
   a altura da linha — senão a linha assume a proporção intrínseca da imagem (mais alta que o texto) em
   vez da altura real do texto, sobrando espaço vazio abaixo do botão. */
.lp-tales-criminal .lp-confianca-foto {
	aspect-ratio: auto;
	width: 100%;
	position: relative;
}

.lp-tales-criminal .lp-confianca-foto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 782px) {
	.lp-tales-criminal .lp-confianca-foto {
		aspect-ratio: 4 / 5;
		position: static;
	}

	.lp-tales-criminal .lp-confianca-foto img {
		position: static;
	}

	/* Botão "Falar com Tales e sua equipe" não estava centralizado no mobile. Mesma técnica
	   do #defesa-criminal: centraliza o bloco de texto inteiro e devolve os parágrafos
	   (nome, OAB, corpo) pra margem esquerda — só o botão (inline-flex) fica centralizado
	   de verdade, já que text-align:center no pai centraliza um filho inline-flex sem
	   precisar mudar o display dele. */
	.lp-tales-criminal .lp-confianca > div:last-child {
		text-align: center;
	}

	.lp-tales-criminal .lp-confianca > div:last-child > *:not(.scbase-hero-cta) {
		text-align: left;
	}
}

/* Localização restaurada conforme a copy aprovada. */
.lp-localizacao-grid {
	display: grid;
	grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
	gap: 36px;
	margin-top: 44px;
	align-items: stretch;
}

.lp-localizacao-dados {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 18px;
	padding: 34px;
	background: #fff;
	border: 1px solid var(--scbase-cor-borda);
	border-radius: 16px;
}

.lp-localizacao-dados > p {
	display: grid;
	grid-template-columns: 24px 1fr;
	gap: 2px 12px;
	margin: 0;
	color: var(--scbase-cor-texto-suave);
	overflow-wrap: anywhere;
}

.lp-localizacao-dados > p .scbase-icon { grid-row: span 2; margin-top: 3px; color: var(--scbase-cor-acento); }
.lp-localizacao-dados > p strong { color: var(--scbase-cor-primaria); }
.lp-localizacao-mapa { min-height: 430px; overflow: hidden; border-radius: 16px; box-shadow: var(--scbase-sombra-card); }
.lp-localizacao-mapa iframe { width: 100%; height: 100%; min-height: 430px; border: 0; }

@media (max-width: 900px) {
	.lp-beneficios-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lp-porque-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lp-porque-card,
	.lp-porque-card:nth-child(4),
	.lp-porque-card:nth-child(5) { grid-column: auto; }
	.lp-porque-card:last-child { grid-column: 1 / -1; width: calc(50% - 10px); justify-self: center; }
}

@media (max-width: 782px) {
	/* Pedido do operador (2026-09-06): TODO título de seção fica menor e centralizado
	   no mobile, sem exceção — nunca mais o clamp gigante herdado do desktop. */
	.lp-display-title {
		font-size: clamp(1.7rem, 8vw, 2.1rem);
		text-align: center;
		margin-inline: auto;
	}

	/* Precisa da mesma especificidade de .scbase-lp-canvas .lp-hero h1 (regra base, fora
	   de media query) pra realmente vencer no mobile — só .lp-hero h1 perdia sempre. */
	.scbase-lp-canvas .lp-hero h1 {
		font-size: 24px;
		max-width: none;
	}
	.lp-split-editorial,
	.lp-localizacao-grid { grid-template-columns: 1fr; gap: 42px; }
	.lp-split-editorial__media { max-width: 560px; width: calc(100% - 18px); margin-inline: auto; }

	/* Regra permanente (2026-09-06): em qualquer seção split (texto|imagem lado a lado no
	   desktop), quando empilha no mobile, a imagem SEMPRE vem antes do texto, nunca depois
	   — mesmo a imagem estando depois no HTML (coluna direita no desktop). */
	.lp-split-editorial__media {
		order: -1;
	}

	.lp-split-editorial__texto {
		order: 2;
	}

	/* Seção "O que é a defesa criminal": título, subtítulo e botão centralizam no mobile;
	   os parágrafos normais e a citação continuam à margem esquerda (texto corrido). */
	#defesa-criminal .lp-split-editorial__texto {
		text-align: center;
	}

	#defesa-criminal .lp-split-editorial__texto p,
	#defesa-criminal .lp-split-editorial__texto blockquote {
		text-align: left;
	}
	.lp-ajuda-criminal .lp-tab-panel { min-height: 0; }

	/* Segmented control estilo app nativo (referência do operador): retangular, sem
	   curvatura, sem espaçamento entre abas — só uma linha fina dividindo, quebrando
	   em quantas linhas forem precisas (aqui: 3 + 2), cada linha colada na outra. */
	.lp-ajuda-criminal .lp-tabs-nav {
		flex-wrap: wrap;
		overflow-x: visible;
		justify-content: flex-start;
		margin-inline: 0;
		padding: 0;
		gap: 0;
		row-gap: 0;
		border-top: 1px solid var(--scbase-cor-borda-forte);
		border-left: 1px solid var(--scbase-cor-borda-forte);
	}

	.lp-ajuda-criminal .lp-tabs-nav button {
		flex: 1 1 33.3333%;
		border-radius: 0;
		border-right: 1px solid var(--scbase-cor-borda-forte);
		border-bottom: 1px solid var(--scbase-cor-borda-forte);
		border-top: 0;
		border-left: 0;
		padding: 12px 8px;
		font-size: 0.78rem;
		text-align: center;
	}

	.lp-localizacao-mapa,
	.lp-localizacao-mapa iframe { min-height: 340px; }

	/* CTA final: "Quero falar sobre meu caso" quebrava em 2 linhas no mobile — padding
	   lateral do botão reduzido (era 20px/40px herdado do global) pra caber numa linha só,
	   com a fonte um pouco maior já que sobrou espaço. Escopado só ao CTA final, não mexe
	   no botão em outras seções/páginas. */
	.lp-cta-final .scbase-hero-cta {
		padding: 16px 22px;
		font-size: 1rem;
	}

	/* Mesmo ajuste no botão do Tales: padding generoso (herdado do global, 20px/40px)
	   ficava largo/solto demais no mobile. */
	#tales-portela .scbase-hero-cta {
		padding: 16px 22px;
	}

	/* Título "Atendemos em todo o território nacional." encostava/encavalava no botão
	   flutuante do WhatsApp (fixo no canto inferior direito) numa certa posição de scroll,
	   por causa do .lp-titulo-largo abrir até a borda. No mobile essa largura total não faz
	   falta (a grid dados+mapa empilha em 1 coluna de qualquer forma), então volta a ter um
	   max-width confortável só aqui. */
	#localizacao h2.lp-titulo-largo {
		max-width: 24ch;
		margin-inline: auto;
	}

	/* Card de dados (telefone/e-mail/endereço/botão): padding interno reduzido de 34px
	   pra 10px no mobile — sobra mais largura útil pro botão "Falar com a equipe criminal",
	   que ficava apertado/quebrando linha por causa do padding generoso demais. */
	.lp-localizacao-dados {
		padding: 10px;
	}

	.lp-localizacao-dados .scbase-hero-cta {
		padding: 16px 22px;
	}

	/* Reconstrução V2 da Auxílio-Acidente (2026-09-07): em vez de repetir o ajuste de
	   padding botão por botão como foi feito na Criminal (mesmo bug: 20px/40px herdado
	   do global quebra em 2 linhas com texto mais longo em 390px), aplica de uma vez
	   pra TODOS os CTAs da página — não mexe na Criminal, que já está fechada. */
	.scbase-lp-auxilio-acidente .scbase-hero-cta {
		padding: 16px 22px;
	}

	/* Pedido do operador (2026-09-06): todo botão de CTA que ainda não estava
	   centralizado no mobile passa a ficar. */
	.lp-cta-central--left {
		text-align: center;
	}

	/* Botão de cada aba de situação: texto+CTA centralizados, com respiro ajustado. */
	.lp-tab-panel-texto {
		text-align: center;
	}

	.lp-tab-panel-texto h3 {
		margin-top: 0;
	}

	.lp-tab-panel-texto .scbase-hero-cta {
		margin-top: 8px;
	}
}

@media (max-width: 560px) {
	.lp-beneficios-grid,
	.lp-porque-grid { grid-template-columns: 1fr; }
	.lp-beneficio { padding: 28px 24px 32px; }
	.lp-porque-card,
	.lp-porque-card:last-child { grid-column: auto; width: 100%; min-height: auto; }
	.lp-eyebrow--center,
	.lp-subtitulo-secao,
	.lp-texto--centro { text-align: left; }
	.lp-marca-dagua { width: 19rem; left: -80px; }
}

/* ==========================================================================
   Tabela comparativa (2026-09-02) — dispositivo observado no banco visual BR
   de advocacia (referencias-visuais-br/advocacia/, referências Luan Barbosa e
   Amanda): "advocacia tradicional" vs. o escritório, recorrente nas duas.
   Paleta continua 100% a do cliente (navy/dourado) — só a estrutura é
   emprestada da referência.
   ========================================================================== */

.lp-comparativo-wrap {
	overflow-x: auto;
	margin-top: 44px;
	border-radius: var(--scbase-raio-grande);
	box-shadow: var(--scbase-sombra-card);
}

.lp-comparativo {
	width: 100%;
	min-width: 620px;
	border-collapse: collapse;
	background: var(--scbase-cor-superficie);
}

.lp-comparativo th,
.lp-comparativo td {
	padding: 16px 22px;
	text-align: left;
	border-bottom: 1px solid var(--scbase-cor-borda);
	font-size: 0.92rem;
	line-height: 1.5;
	vertical-align: top;
}

.lp-comparativo thead th {
	font-family: var(--scbase-fonte-titulo);
	font-size: 1.02rem;
	font-weight: 600;
	border-bottom: 2px solid var(--scbase-cor-borda-forte);
}

.lp-comparativo tbody tr:last-child th,
.lp-comparativo tbody tr:last-child td {
	border-bottom: none;
}

.lp-comparativo th[scope="row"] {
	font-weight: 700;
	white-space: nowrap;
	background: var(--scbase-cor-superficie);
}

.lp-comparativo-tradicional {
	color: var(--scbase-cor-texto-suave);
}

.lp-comparativo-pc {
	background: var(--scbase-cor-fundo-alt);
	font-weight: 600;
}

.lp-comparativo .scbase-icon {
	width: 16px;
	height: 16px;
	flex: none;
	display: inline-block;
	vertical-align: -3px;
	margin-right: 8px;
}

.lp-comparativo-tradicional .scbase-icon {
	color: #b0413a;
}

.lp-comparativo-pc .scbase-icon {
	color: var(--scbase-cor-acento);
}

/* ==========================================================================
   Mockup de conversa de WhatsApp (2026-09-02) — mesmo dispositivo das
   referências (print estilizado do app, não captura real). Conteúdo sempre
   genérico/ilustrativo, resposta sempre em nome do "time de atendimento"
   (nunca simula o advogado respondendo pessoalmente — regra travada do
   projeto) e sem promessa de resultado.
   ========================================================================== */

.lp-whatsapp-secao {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 56px;
	align-items: center;
}

.lp-whatsapp-mockup {
	max-width: 320px;
	margin: 0 auto;
	background: #e9e3d8;
	border-radius: var(--scbase-raio-grande);
	overflow: hidden;
	box-shadow: var(--scbase-sombra-card);
}

.lp-whatsapp-mockup-header {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--scbase-cor-primaria);
	color: #fff;
	padding: 14px 16px;
	font-weight: 700;
	font-size: 0.9rem;
}

.lp-whatsapp-mockup-header .scbase-icon {
	width: 18px;
	height: 18px;
	flex: none;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 50%;
	padding: 6px;
}

.lp-whatsapp-mockup-body {
	padding: 18px 14px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lp-whatsapp-bubble {
	max-width: 84%;
	padding: 10px 14px;
	border-radius: 14px;
	font-size: 0.85rem;
	line-height: 1.45;
	color: #1c1c1c;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

.lp-whatsapp-bubble--in {
	background: #ffffff;
	align-self: flex-start;
	border-bottom-left-radius: 4px;
}

.lp-whatsapp-bubble--out {
	background: #d9fdd3;
	align-self: flex-end;
	border-bottom-right-radius: 4px;
}

.lp-whatsapp-bubble-hora {
	display: block;
	margin-top: 4px;
	font-size: 0.68rem;
	color: rgba(0, 0, 0, 0.45);
	text-align: right;
}

@media (max-width: 900px) {
	.lp-whatsapp-secao {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.lp-whatsapp-mockup {
		order: -1;
	}
}

/* "Onde estamos": 2 colunas (info de contato | mapa) — modelo pedido pelo
   operador em 2026-09-02 (referência visual: rochamouraelagrimante.com.br),
   igual nas 2 LPs. Estrutura emprestada, paleta continua a do cliente. */
.lp-onde-estamos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: start;
}

.lp-onde-estamos-grupo {
	padding: 20px 0;
	border-top: 1px solid var(--scbase-cor-borda);
}

.lp-onde-estamos-grupo:first-of-type {
	border-top: 0;
	padding-top: 28px;
}

.lp-onde-estamos-grupo h3 {
	font-family: var(--scbase-fonte-corpo);
	font-size: 0.95rem;
	font-weight: 700;
	margin: 0 0 12px;
	color: var(--scbase-cor-texto);
}

.lp-onde-estamos-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 8px;
	color: var(--scbase-cor-texto-suave);
}

.lp-onde-estamos-item:last-child {
	margin-bottom: 0;
}

.lp-onde-estamos-item .scbase-icon {
	width: 20px;
	height: 20px;
	margin-top: 2px;
	color: var(--scbase-cor-acento);
	flex-shrink: 0;
}

.lp-onde-estamos-item a {
	color: inherit;
	text-decoration: none;
}

.lp-onde-estamos-item a:hover {
	color: var(--scbase-cor-primaria);
}

.lp-onde-estamos-mapa {
	height: 100%;
	min-height: 340px;
}

.lp-onde-estamos-mapa iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 340px;
	border: 0;
	border-radius: var(--scbase-raio-grande);
	box-shadow: var(--scbase-sombra-card);
}

@media (max-width: 900px) {
	.lp-onde-estamos {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.lp-onde-estamos-mapa {
		min-height: 280px;
	}
}

/* ==========================================================================
   Auxílio-Acidente V2 — ajustes pontuais pedidos pelo operador em rodada de
   revisão ao vivo (2026-09-07), depois da reconstrução inicial da página.
   Todas as regras abaixo são escopadas por id de seção (só valem nesta LP) e
   não tocam a Criminal.
   ========================================================================== */

/* Rodapé em branco sólido, mesmo tratamento já usado na Criminal. */
.scbase-lp-criminal .lp-footer p,
.scbase-lp-criminal .lp-footer a,
.scbase-lp-auxilio-acidente .lp-footer p,
.scbase-lp-auxilio-acidente .lp-footer a {
	color: #fff;
}

/* "Como podemos ajudar": 5 cards em 3+2 centralizado (mesma técnica do
   .lp-porque-grid da Criminal), cada card com 33% da largura em vez do
   auto-fit apertado que estava antes. */
#como-ajudar .lp-cards {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}
#como-ajudar .lp-card {
	grid-column: span 2;
}
#como-ajudar .lp-card:nth-child(4) { grid-column: 2 / span 2; }
#como-ajudar .lp-card:nth-child(5) { grid-column: 4 / span 2; }

@media (max-width: 900px) {
	#como-ajudar .lp-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	#como-ajudar .lp-card,
	#como-ajudar .lp-card:nth-child(4),
	#como-ajudar .lp-card:nth-child(5) {
		grid-column: auto;
	}
	#como-ajudar .lp-card:last-child {
		grid-column: 1 / -1;
		width: calc(50% - 10px);
		justify-self: center;
	}
}

@media (max-width: 560px) {
	#como-ajudar .lp-cards {
		grid-template-columns: 1fr;
	}
	#como-ajudar .lp-card,
	#como-ajudar .lp-card:last-child {
		grid-column: auto;
		width: 100%;
	}
}

/* "O que é o auxílio-acidente": título passou a abrir centralizado, de ponta
   a ponta, acima do conteúdo em duas colunas — precisa de respiro entre o
   bloco de título e o grid abaixo, que antes não existia (o título ficava
   dentro da própria coluna de texto). */
#o-que-e .lp-split-editorial--o-que-e {
	margin-top: clamp(48px, 6vw, 76px);
}

/* Acabamento simplificado só nesta foto (pedido do operador): sem o contorno
   branco interno nem a sombra dourada deslocada do padrão herdado da
   Criminal — cantos uniformes e sombra única, mais discreta. Não mexe em
   .lp-split-editorial__media base (Criminal e "Quem Somos" desta mesma
   página continuam com o acabamento original). */
#o-que-e .lp-split-editorial__media--simples {
	border-radius: 24px;
	box-shadow: 0 24px 58px rgba(17, 28, 45, .16);
}
#o-que-e .lp-split-editorial__media--simples::after {
	display: none;
}

/* "Por que escolher o escritório": 4 cards fixos em 2x2, sem a assimetria
   3+1 herdada do .lp-porque-grid da Criminal (que tinha 5 cards). */
#porque-escolher .lp-porque-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
#porque-escolher .lp-porque-card {
	grid-column: auto;
}
@media (max-width: 560px) {
	#porque-escolher .lp-porque-grid {
		grid-template-columns: 1fr;
	}
}

/* Regra genérica de mobile (abaixo, @media 560px) desalinha .lp-subtitulo-secao pra
   esquerda — pensada pra outro contexto, mas pega esta seção de tabela por herdar a
   mesma classe. Reforça o centralizado aqui (especificidade de id vence em qualquer
   breakpoint). Não mexe na regra genérica pra não arriscar a Criminal. */
#porque-escolher .lp-subtitulo-secao {
	text-align: center;
}

/* Mesmo bug (regra genérica de 560px desalinhando .lp-subtitulo-secao pra esquerda)
   também pegava estas duas seções — mesma correção. */
#como-ajudar .lp-subtitulo-secao,
#o-que-e .lp-subtitulo-secao {
	text-align: center;
}

/* Hero da Auxílio-Acidente: pedido do operador (2026-09-07) pra centralizar título,
   texto e botão no mobile — a Criminal mantém a margem esquerda de propósito (decisão
   antiga, 2026-09-01), então isso fica escopado só a esta página. */
@media (max-width: 782px) {
	.scbase-lp-auxilio-acidente .lp-hero-inner {
		text-align: center;
	}
	.scbase-lp-auxilio-acidente .lp-hero-marca {
		margin-inline: auto;
	}
	.scbase-lp-auxilio-acidente .lp-hero-subtitulo {
		margin-inline: auto;
	}
	.scbase-lp-auxilio-acidente .lp-hero-ctas {
		justify-content: center;
	}
}

/* Card de dados da Localização (telefone/e-mail/endereço/botão): o padding de 10px
   herdado do fix da Criminal (pra caber o botão em 1 linha) ficou apertado demais
   pra Auxílio-Acidente — pedido do operador pra dar mais respiro nas margens. Só
   esta página; Criminal mantém 10px. */
@media (max-width: 782px) {
	.scbase-lp-auxilio-acidente .lp-localizacao-dados {
		padding: 20px;
	}

	/* Ícone (telefone/e-mail/endereço) longe demais do texto — coluna do ícone e gap
	   horizontal reduzidos só nesta página. */
	.scbase-lp-auxilio-acidente .lp-localizacao-dados > p {
		grid-template-columns: 18px 1fr;
		gap: 2px 8px;
	}

	/* Distância grande demais entre o endereço e o botão (herdava margin-top:42px de
	   .lp-cta-central, pensado pra seções maiores) — pedido do operador pra 20px. */
	.scbase-lp-auxilio-acidente .lp-localizacao-dados .lp-cta-central {
		margin-top: 20px;
	}

	/* "O que é o auxílio-acidente" e "Quem Somos": mesmo padrão já usado no
	   #defesa-criminal da Criminal — parágrafos continuam à esquerda (texto corrido),
	   só o botão fica centralizado de verdade. */
	#o-que-e .lp-split-editorial__texto,
	#quem-somos .lp-split-editorial__texto {
		text-align: center;
	}
	#o-que-e .lp-split-editorial__texto p,
	#quem-somos .lp-split-editorial__texto p {
		text-align: left;
	}

	/* Hero: título ganhou +4px (24px→28px) pra não ficar pequeno demais nas 3 linhas
	   que passou a ocupar centralizado; mais respiro vertical (altura) no bloco todo;
	   e 20px de distância fixa entre o subtítulo e o botão. */
	.scbase-lp-auxilio-acidente.scbase-lp-canvas .lp-hero h1 {
		font-size: 28px;
	}
	.scbase-lp-auxilio-acidente .lp-hero-inner {
		padding-top: 270px;
		padding-bottom: 44px;
	}
	.scbase-lp-auxilio-acidente .lp-hero-subtitulo {
		margin-bottom: 20px;
	}
}