/* ══ Tema base das quatro páginas da Ana (2026-09-08) ═══════════════════
Carrega depois do molde-aja.css e antes do tema da página. Aqui vive o que
é comum às quatro: melhorias de experiência e as camadas decorativas que
cada tema aciona (textura, grão, emblema, retratos). Nada de copy.
═══════════════════════════════════════════════════════════════════════ */
.tema {
--tex: url("data:image/svg+xml;utf8,");
--grao: url("data:image/svg+xml;utf8,");
--emblema-ouro: url("data:image/svg+xml;utf8,");
--emblema-creme: url("data:image/svg+xml;utf8,");
}
/* ── Experiência: rolagem, foco, alvos de toque ─────────────────────── */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.cta:focus-visible, .rodape__links a:focus-visible, .hero__logo:focus-visible {
outline: 3px solid var(--cream-gold); outline-offset: 3px; border-radius: 4px;
}
/* Links legais do rodapé com alvo de toque de 44px (o revisor acusava 14px). */
.rodape__links { gap: 2px; align-items: center; }
.rodape__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
.rodape__links .sep { opacity: .5; }
/* Vídeos: moldura respira e não pula quando o iframe carrega. */
.depo__video { box-shadow: 0 18px 50px rgba(14, 15, 45, .16); }
/* Cards clicáveis não competem com o CTA: hover discreto. */
.autoridades__card { transition: transform .35s ease; }
.autoridades__card:hover { transform: translateY(-3px); }
/* ── Camadas decorativas por seção (pseudo-elementos, sem markup) ───── */
.tema .bloco { position: relative; overflow: hidden; isolation: isolate; }
.tema .bloco > .bloco__inner, .tema .bloco > .customer-reviews__rows { position: relative; z-index: 2; }
/* O hero tem camadas até z-index 4 (véu). O conteúdo dele precisa ficar acima de todas: sem esta
regra, a genérica de cima (3 classes) vencia o .hero__inner e o véu clareava texto e botão
(print do Leo no celular, 2026-09-08). */
.tema .hero > .hero__inner { z-index: 6; }
.tema .bloco:not(.hero)::before, .tema .bloco:not(.hero)::after { content: ""; position: absolute; pointer-events: none; z-index: 0; }
/* ── Camadas do hero (compartilhadas pelos quatro heros) ────────────── */
.hero { isolation: isolate; }
.hero__inner { position: relative; z-index: 6; }
.hero__camada { position: absolute; inset: 0; pointer-events: none; }
.hero__textura { z-index: 0; background-image: var(--tex); background-size: cover; mix-blend-mode: multiply; opacity: .9; }
.hero__grao { z-index: 1; background-image: var(--grao); background-size: 300px 300px; opacity: .10; mix-blend-mode: multiply; }
.hero__emblema { position: absolute; z-index: 2; color: #C9A53D; opacity: .12; filter: blur(1.1px); pointer-events: none; }
.hero__emblema svg { display: block; width: 100%; height: auto; }
.hero__emblema--a { width: 470px; top: -80px; right: 7%; transform: rotate(-9deg); }
.hero__emblema--b { width: 250px; bottom: -50px; left: 6%; transform: rotate(11deg); opacity: .09; }
.hero__veu { z-index: 4; background: radial-gradient(ellipse 46% 58% at 50% 52%, rgba(246,243,238,.92) 0%, rgba(246,243,238,.55) 48%, transparent 78%); }
@media (max-width: 560px) {
.hero__emblema--a { width: 240px; right: -50px; top: -40px; } .hero__emblema--b { width: 150px; left: -30px; bottom: -30px; }
.hero__veu { background: radial-gradient(ellipse 85% 50% at 50% 62%, rgba(246,243,238,.80) 0%, rgba(246,243,238,.40) 55%, transparent 88%); }
}
/* Retratos esmaecidos (hero da Seda e fecho da Seda) */
.hero__retrato { position: absolute; top: -3%; bottom: -3%; width: 38%; z-index: 3; opacity: .24; pointer-events: none;
filter: grayscale(1) contrast(.94) brightness(1.03); mix-blend-mode: multiply;
-webkit-mask-image: radial-gradient(ellipse 58% 62% at 50% 48%, #000 22%, rgba(0,0,0,.65) 52%, transparent 82%);
mask-image: radial-gradient(ellipse 58% 62% at 50% 48%, #000 22%, rgba(0,0,0,.65) 52%, transparent 82%); }
.hero__retrato img { width: 100%; height: 100%; object-fit: cover; }
.hero__retrato--esq { left: -7%; } .hero__retrato--esq img { object-position: 50% 14%; }
.hero__retrato--dir { right: -9%; opacity: .19; } .hero__retrato--dir img { object-position: 50% 10%; }
@media (max-width: 560px) {
.hero__retrato { width: 66%; bottom: auto; height: 44%; top: -3%; opacity: .30; }
.hero__retrato--esq { left: -32%; } .hero__retrato--dir { right: -32%; }
}