/* =============================================================================
   Ana Cláudia Miguel — Psicóloga Clínica
   CSS do site inteiro (Home, Blog, Artigo e 404).

   Identidade: Brandbook + página de links
     Petróleo #103F54 · Terracota #B8694F · Off-white #F7F5F0 · Sálvia #798B74
     Playfair Display (títulos) + Montserrat (texto)
   Assinatura visual: "o fio" — o ruído da mente que se desembaraça e vira a
   cauda da pomba do logo.

   Índice
     01. Tokens            08. Home · Ruído e especialidades
     02. Base              09. Home · Sobre e formação
     03. Utilitários       10. Home · Atendimento e jornada
     04. Botões e links    11. Home · Blog, manifesto, dúvidas, contato
     05. Cabeçalho e menu  12. Cards de artigo
     06. Rodapé e flutuantes 13. Blog · lista
     07. O fio · Hero      14. Artigo
                           15. 404 · Animações · Movimento reduzido
   ========================================================================== */

/* =============================================================================
   01. TOKENS
   ========================================================================== */
:root {
  color-scheme: only light;

  --petroleo: #103F54;
  --petroleo-2: #0C3446;
  --petroleo-3: #0A2E3D;
  --creme: #F7F5F0;
  --papel: #FBFAF7;
  --areia: #ECE7DE;
  --areia-50: #F1EDE6;
  --branco: #FFFFFF;
  --terra: #B8694F;        /* fios, traços e textos grandes */
  --terra-ink: #A15B44;    /* texto pequeno e fundo de botão com texto branco (5,1:1) */
  --terra-soft: #D09C8B;   /* terracota sobre o petróleo (4,7:1) */
  --salvia: #798B74;
  --salvia-ink: #61725D;   /* rótulos no creme (4,7:1) */
  --salvia-soft: #9FAB9B;  /* rótulos sobre o petróleo */
  --nevoa: #A8B8C1;        /* texto de apoio sobre o petróleo (5,5:1) */
  --tinta: #3B4A54;        /* corpo de texto (Brandbook) */
  --tinta-2: #517280;      /* texto de apoio no creme (4,7:1) */
  --linha: rgba(16, 63, 84, 0.12);
  --linha-forte: rgba(16, 63, 84, 0.2);
  --linha-clara: rgba(247, 245, 240, 0.14);

  --f-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --f-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --ease: cubic-bezier(0.25, 1, 0.5, 1);       /* --vero-bezier */
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --sombra-suave: 0 15px 35px rgba(16, 63, 84, 0.08);
  --sombra: 0 24px 60px -24px rgba(16, 63, 84, 0.28);
  --sombra-alta: 0 40px 80px -30px rgba(16, 63, 84, 0.35);

  --gutter: clamp(20px, 5vw, 56px);
  --wrap: 1240px;
  --secao: clamp(88px, 11vw, 160px);
  --topo-h: 84px;
}

/* =============================================================================
   02. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 96px;
  background: var(--creme);
}
html:not(.lenis) { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--creme);
  color: var(--tinta);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* Textura de papel, bem sutil, sobre o site inteiro */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0.55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .06 0 0 0 0 .25 0 0 0 0 .33 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a, button { touch-action: manipulation; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4, p, figure, blockquote, address, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
strong { font-weight: 600; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--terra-ink); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(184, 105, 79, 0.22); color: var(--petroleo); }

/* Lenis (rolagem suave) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* =============================================================================
   03. UTILITÁRIOS
   ========================================================================== */
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.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; }

.pular {
  position: fixed; left: 16px; top: -80px; z-index: 300;
  padding: 12px 20px; border-radius: 999px;
  background: var(--petroleo); color: var(--creme);
  font-size: 0.85rem; font-weight: 600;
  transition: top 0.3s var(--ease);
}
.pular:focus { top: 16px; }

.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 0.7rem; font-weight: 600; line-height: 1.4;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--salvia-ink);
}
.eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--terra); flex: none; }
.eyebrow .ico { width: 16px; height: 16px; }
.eyebrow:has(.ico)::before { display: none; }
.eyebrow--claro { color: var(--terra-soft); }

.titulo-secao {
  margin-top: 18px;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(2rem, 1.35rem + 2.5vw, 3.35rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--petroleo);
  text-wrap: balance;
}
.titulo-secao em { font-style: italic; color: var(--terra); }
.titulo-secao--claro { color: var(--creme); }
.titulo-secao--claro em { color: var(--terra-soft); }

/* =============================================================================
   04. BOTÕES E LINKS
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px;
  border-radius: 999px; border: 1px solid transparent;
  font-family: var(--f-body); font-size: 0.78rem; font-weight: 600; line-height: 1.2;
  letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  transition: background-color 0.45s var(--ease), color 0.45s var(--ease), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease), transform 0.45s var(--ease);
  will-change: transform;
}
.btn .ico { width: 19px; height: 19px; }
.btn--sm { min-height: 42px; padding: 0 20px; font-size: 0.7rem; }
.btn--lg { min-height: 58px; padding: 0 32px; }
.btn--terra { background: var(--terra-ink); color: var(--branco); box-shadow: 0 10px 24px -14px rgba(161, 91, 68, 0.8); }
.btn--petroleo { background: var(--petroleo); color: var(--creme); }
.btn--contorno-claro { border-color: rgba(247, 245, 240, 0.32); color: var(--creme); }
.btn--contorno-claro .seta { color: var(--terra-soft); }
.btn--contorno { border-color: var(--linha-forte); color: var(--petroleo); }
.btn--claro { background: var(--creme); color: var(--petroleo); }
@media (hover: hover) {
  .btn--terra:hover { background: var(--petroleo); box-shadow: 0 18px 34px -16px rgba(16, 63, 84, 0.55); }
  .btn--petroleo:hover { background: var(--terra-ink); }
  .btn--contorno-claro:hover { background: var(--creme); color: var(--petroleo); border-color: var(--creme); }
  .btn--contorno-claro:hover .seta { color: var(--terra-ink); }
  .btn--contorno:hover { border-color: var(--petroleo); background: var(--petroleo); color: var(--creme); }
  .btn--claro:hover { background: var(--terra-soft); color: var(--petroleo-3); }
  .btn:hover .seta__haste { width: 20px; }
}
.btn:active { transform: scale(0.98); }
@media (max-width: 480px) {
  .btn { white-space: normal; text-align: center; letter-spacing: 0.07em; }
  .btn--lg { width: 100%; min-height: 56px; padding: 12px 22px; }
}

/* Seta da marca (→): a haste se alonga no hover */
.seta { display: inline-flex; align-items: center; color: var(--terra-ink); }
.seta__haste { display: block; width: 10px; height: 1.6px; margin-right: -7px; background: currentColor; border-radius: 2px; transition: width 0.5s var(--ease); }
.seta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.link-seta {
  display: inline-flex; align-items: center; gap: 12px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(121, 139, 116, 0.55);
  font-size: 0.85rem; font-weight: 600; color: var(--petroleo);
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
@media (hover: hover) {
  .link-seta:hover { color: var(--terra-ink); border-color: var(--terra); }
  .link-seta:hover .seta__haste,
  a:hover > .seta .seta__haste,
  a:hover .local__abrir .seta__haste,
  .card-artigo:hover .seta__haste,
  .rodape__link-seta:hover .seta__haste { width: 20px; }
}
.link-seta:focus-visible .seta__haste { width: 20px; }

.selo-crp {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 10px;
  border: 1px solid rgba(121, 139, 116, 0.45); border-radius: 999px;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; color: var(--salvia-ink);
  white-space: nowrap;
}
.selo-crp .ico { width: 13px; height: 13px; }
.selo-crp--claro { border-color: rgba(159, 171, 155, 0.5); color: var(--salvia-soft); }

/* =============================================================================
   05. CABEÇALHO E MENU MOBILE
   ========================================================================== */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 60;
  height: var(--topo-h);
  border-bottom: 1px solid transparent;
  transition: transform 0.55s var(--ease), background-color 0.45s var(--ease), border-color 0.45s var(--ease), height 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.topo.is-rolado {
  --topo-h: 70px;
  background: rgba(247, 245, 240, 0.86);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-color: var(--linha);
  box-shadow: 0 10px 30px -24px rgba(16, 63, 84, 0.4);
}
.topo.is-oculto { transform: translateY(-105%); }
.topo__barra { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.topo__logo { display: block; flex: none; border-radius: 8px; }
.topo__logo img { height: 54px; width: auto; transition: height 0.45s var(--ease), filter 0.45s var(--ease); }
.topo.is-rolado .topo__logo img { height: 46px; }

.topo__nav { position: relative; display: none; }
.topo__nav ul { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); }
.nav-link {
  position: relative; display: block; padding: 8px 0;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--tinta-2); white-space: nowrap;
  transition: color 0.35s var(--ease);
}
.nav-link:hover, .nav-link.is-ativo, .nav-link[aria-current="page"] { color: var(--petroleo); }
.topo__marcador {
  position: absolute; left: 0; bottom: -2px;
  width: var(--mw, 0); height: 2px; border-radius: 2px;
  background: var(--terra);
  transform: translateX(var(--mx, 0));
  opacity: var(--mo, 0);
  transition: transform 0.6s var(--ease), width 0.6s var(--ease), opacity 0.4s var(--ease);
}
/* sem JS, o item da página atual recebe um traço próprio */
.no-js .nav-link[aria-current="page"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--terra); }

.topo__acoes { display: flex; align-items: center; gap: 10px; }
.topo__cta { display: none; }

.menu-botao {
  position: relative; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--linha-forte); color: var(--petroleo);
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.menu-botao__linhas { position: relative; width: 18px; height: 10px; }
.menu-botao__linhas span { position: absolute; left: 0; width: 100%; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform 0.5s var(--ease), top 0.5s var(--ease), width 0.5s var(--ease); }
.menu-botao__linhas span:first-child { top: 0; }
.menu-botao__linhas span:last-child { top: 8px; width: 70%; }
.menu-aberto .menu-botao { border-color: rgba(247, 245, 240, 0.35); color: var(--creme); }
.menu-aberto .menu-botao__linhas span:first-child { top: 4px; transform: rotate(45deg); }
.menu-aberto .menu-botao__linhas span:last-child { top: 4px; width: 100%; transform: rotate(-45deg); }
.menu-aberto .topo { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; }
.menu-aberto .topo__logo img { filter: brightness(0) invert(1); }
.menu-aberto .topo__cta { opacity: 0; pointer-events: none; }

.menu-mobile {
  position: fixed; inset: 0; z-index: 55;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--topo-h) + 24px) 0 calc(28px + env(safe-area-inset-bottom));
  background: var(--petroleo); color: var(--creme);
  overflow-y: auto;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.75s var(--ease-io), visibility 0s linear 0.75s;
}
.menu-aberto .menu-mobile { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 0.75s var(--ease-io), visibility 0s; }
.menu-mobile::before { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(184, 105, 79, 0.45); border-radius: 24px; pointer-events: none; }
.menu-mobile__pomba { position: absolute; right: -60px; bottom: 90px; width: 300px; height: 300px; fill: var(--creme); opacity: 0.05; transform: rotate(-8deg); pointer-events: none; }
.menu-mobile__nav ol { display: flex; flex-direction: column; }
.menu-mobile__link {
  display: flex; align-items: baseline; gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--linha-clara);
  font-family: var(--f-display); font-size: clamp(1.9rem, 7vw, 2.6rem); line-height: 1.15; font-weight: 500;
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), color 0.3s var(--ease);
}
.menu-mobile__link[aria-current="page"], .menu-mobile__link:hover { color: var(--terra-soft); }
.menu-mobile__num { font-family: var(--f-body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; color: var(--terra-soft); }
.menu-aberto .menu-mobile__link { opacity: 1; transform: none; }
.menu-aberto .menu-mobile li:nth-child(1) .menu-mobile__link { transition-delay: 0.22s; }
.menu-aberto .menu-mobile li:nth-child(2) .menu-mobile__link { transition-delay: 0.27s; }
.menu-aberto .menu-mobile li:nth-child(3) .menu-mobile__link { transition-delay: 0.32s; }
.menu-aberto .menu-mobile li:nth-child(4) .menu-mobile__link { transition-delay: 0.37s; }
.menu-aberto .menu-mobile li:nth-child(5) .menu-mobile__link { transition-delay: 0.42s; }
.menu-aberto .menu-mobile li:nth-child(6) .menu-mobile__link { transition-delay: 0.47s; }
.menu-mobile__rodape { margin-top: 36px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; opacity: 0; transition: opacity 0.6s var(--ease) 0.5s; }
.menu-aberto .menu-mobile__rodape { opacity: 1; }
.menu-mobile__rodape p { font-size: 0.78rem; color: var(--nevoa); }

@media (min-width: 640px) {
  .topo__cta { display: inline-flex; }
}
@media (min-width: 1120px) {
  .topo__nav { display: block; }
  .menu-botao, .menu-mobile { display: none; }
}

/* =============================================================================
   06. RODAPÉ E ELEMENTOS FLUTUANTES
   ========================================================================== */
.rodape {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(72px, 9vw, 110px) 0 28px;
  background: var(--petroleo-3); color: var(--nevoa);
  border-top: 1px solid var(--terra);
  font-size: 0.88rem; line-height: 1.7;
}
.rodape__marca { position: absolute; right: -90px; bottom: -70px; width: 460px; height: 460px; fill: var(--creme); opacity: 0.035; transform: rotate(-8deg); z-index: -1; pointer-events: none; }
.rodape__grid { display: grid; gap: 44px; grid-template-columns: 1fr; }
.rodape__logo { display: inline-block; border-radius: 8px; }
.rodape__logo img { height: 74px; width: auto; }
.rodape__frase { margin: 22px 0 20px; max-width: 22ch; font-family: var(--f-display); font-style: italic; font-size: 1.2rem; line-height: 1.4; color: var(--creme); }
.rodape__frase em { color: var(--terra-soft); }
.rodape__titulo { margin-bottom: 16px; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--terra-soft); }
.rodape__col li + li { margin-top: 8px; }
.rodape__col a:not(.rodape__zap):not(.rodape__link-seta) { color: rgba(247, 245, 240, 0.82); transition: color 0.3s var(--ease); }
.rodape__col a:not(.rodape__zap):not(.rodape__link-seta):hover { color: var(--terra-soft); }
.rodape address strong { display: block; color: var(--creme); font-weight: 600; }
.rodape__link-seta { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; font-weight: 600; color: var(--creme); }
.rodape__link-seta .seta { color: var(--terra-soft); }
.rodape__zap {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 16px;
  padding: 10px 16px 10px 12px; border-radius: 999px;
  border: 1px solid var(--linha-clara); color: var(--creme); font-weight: 600; font-size: 0.85rem;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.rodape__zap .ico { width: 18px; height: 18px; color: var(--terra-soft); }
.rodape__zap:hover { background: rgba(247, 245, 240, 0.06); border-color: var(--terra-soft); }
.rodape__base {
  padding-right: calc(var(--gutter) + 72px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
  margin-top: clamp(56px, 7vw, 84px); padding-top: 24px;
  border-top: 1px solid var(--linha-clara);
  font-size: 0.74rem;
}
.rodape__subir { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; color: var(--creme); }
.rodape__subir-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linha-clara); transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease); }
.rodape__subir-ico svg { width: 18px; height: 18px; fill: var(--creme); transition: transform 0.6s var(--ease); }
.rodape__subir:hover .rodape__subir-ico { border-color: var(--terra-soft); background: rgba(247, 245, 240, 0.05); }
.rodape__subir:hover .rodape__subir-ico svg { transform: translate(2px, -5px) rotate(-12deg); }
@media (min-width: 720px) { .rodape__grid { grid-template-columns: 1.3fr 1fr; } }
@media (min-width: 1024px) { .rodape__grid { grid-template-columns: 1.25fr 0.85fr 1.35fr 1.1fr; gap: 48px; } }

/* Botão flutuante do WhatsApp */
.zap-flutuante {
  position: fixed; right: clamp(14px, 2.4vw, 26px); bottom: calc(clamp(14px, 2.4vw, 26px) + env(safe-area-inset-bottom)); z-index: 50;
  display: flex; align-items: center; gap: 10px;
  opacity: 0; transform: translateY(18px) scale(0.9); pointer-events: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.zap-flutuante.is-visivel { opacity: 1; transform: none; pointer-events: auto; }
.zap-flutuante__ico {
  position: relative; display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--terra-ink); color: var(--branco);
  box-shadow: 0 14px 30px -10px rgba(161, 91, 68, 0.7);
  transition: background-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.zap-flutuante__ico .ico { width: 26px; height: 26px; }
.zap-flutuante__ico::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--terra); animation: onda-zap 3.2s var(--ease) infinite; }
.zap-flutuante__rotulo {
  padding: 9px 15px; border-radius: 999px;
  background: var(--branco); color: var(--petroleo);
  font-size: 0.76rem; font-weight: 600; white-space: nowrap;
  box-shadow: var(--sombra-suave);
  opacity: 0; transform: translateX(10px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
@media (hover: hover) {
  .zap-flutuante:hover .zap-flutuante__rotulo { opacity: 1; transform: none; }
  .zap-flutuante:hover .zap-flutuante__ico { background: var(--petroleo); transform: rotate(-8deg); }
}
.menu-aberto .zap-flutuante { opacity: 0; pointer-events: none; }
@keyframes onda-zap { 0% { transform: scale(1); opacity: 0.8; } 70%, 100% { transform: scale(1.55); opacity: 0; } }

/* Aviso rápido (link copiado etc.) */
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 250;
  max-width: calc(100vw - 32px); padding: 11px 18px; border-radius: 999px;
  background: var(--petroleo); color: var(--creme); font-size: 0.85rem; font-weight: 500;
  box-shadow: 0 12px 30px rgba(16, 63, 84, 0.3);
  opacity: 0; transform: translate(-50%, 12px); pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.toast.is-visivel { opacity: 1; transform: translate(-50%, 0); }

/* =============================================================================
   07. O FIO (assinatura) · HERO
   ========================================================================== */
.fio svg { width: 100%; height: auto; overflow: visible; }
.fio__linha { fill: none; stroke: var(--terra); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fio__pomba { fill: var(--petroleo); transform-box: fill-box; transform-origin: 20% 90%; }
.fio__legenda { margin-top: 6px; font-family: var(--f-display); font-style: italic; font-size: 1.06rem; line-height: 1.35; color: var(--petroleo); }
.fio__legenda em { color: var(--terra-ink); }
.fio--claro .fio__linha { stroke: var(--terra-soft); }
.fio--claro .fio__pomba { fill: var(--creme); }

/* Com o JS pronto, o fio espera entrar na tela para se desenhar */
.fio-pronto .fio:not(.is-on) .fio__linha { stroke-dasharray: 1; stroke-dashoffset: 1; }
.fio-pronto .fio:not(.is-on) .fio__pomba,
.fio-pronto .fio:not(.is-on) .fio__legenda { opacity: 0; }
.fio.is-on .fio__linha { stroke-dasharray: 1; animation: traca 2.1s var(--ease-io) both; }
.fio.is-on .fio__pomba { animation: pousa 1s var(--ease) 1.85s both, respira 5s ease-in-out 2.9s infinite; }
.fio.is-on .fio__legenda { animation: surge 1s var(--ease) 2s both; }
.fio[data-replay] { cursor: pointer; }

@keyframes traca { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pousa {
  0% { opacity: 0; transform: translate(-10px, 12px) rotate(-14deg) scale(0.86); }
  70% { opacity: 1; transform: translate(0, -2px) rotate(2deg) scale(1.02); }
  100% { opacity: 1; transform: none; }
}
@keyframes respira { 0%, 100% { transform: none; } 50% { transform: translateY(-2px) rotate(-2deg); } }
@keyframes surge { from { opacity: 0; } to { opacity: 1; } }
@keyframes sobe { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding-top: calc(var(--topo-h) + clamp(32px, 6vw, 72px));
}
.hero__fundo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__brilho { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.5; animation: deriva 22s ease-in-out infinite alternate; }
.hero__brilho--a { width: 560px; height: 560px; right: -160px; top: -160px; background: radial-gradient(circle, rgba(121, 139, 116, 0.42), transparent 70%); }
.hero__brilho--b { width: 420px; height: 420px; left: -180px; bottom: 60px; background: radial-gradient(circle, rgba(208, 156, 139, 0.36), transparent 70%); animation-delay: -8s; }
@keyframes deriva { from { transform: translate(0, 0) scale(1); } to { transform: translate(40px, 30px) scale(1.08); } }

.hero__grid { display: grid; gap: 56px; align-items: center; }
.hero__texto { position: relative; z-index: 2; }
.hero__titulo {
  margin-top: 22px;
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(2.45rem, 1.5rem + 3.9vw, 4.7rem);
  line-height: 1.04; letter-spacing: -0.018em;
  color: var(--petroleo);
  text-wrap: balance;
}
.hero__titulo em { font-style: italic; color: var(--terra); }
.hero__titulo .linha { padding-bottom: 0.06em; }
.hero__fio { width: min(520px, 100%); margin: clamp(14px, 2vw, 22px) 0 0 -2px; }
.hero__fio .fio__legenda { padding-left: 6px; }
.hero__lead { margin-top: clamp(20px, 2.6vw, 30px); max-width: 34rem; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.14rem); line-height: 1.7; color: var(--tinta); }
.hero__bagagem { margin-top: 22px; max-width: 32rem; padding-left: 1.25rem; border-left: 2px solid var(--terra); }
.hero__bagagem p { font-family: var(--f-display); font-style: italic; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.18rem); line-height: 1.55; color: var(--salvia-ink); }
.hero__acoes { margin-top: clamp(28px, 3.4vw, 40px); display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }

.hero__media { position: relative; width: min(100%, 440px); margin-inline: auto; padding: 18px 18px 0 0; }
.arco { position: relative; aspect-ratio: 3 / 4.05; }
.arco__moldura, .arco__contorno { position: absolute; inset: 0; border-radius: 50% 50% 28px 28px / 37% 37% 28px 28px; }
.arco__moldura { overflow: hidden; background: #E4DED3; box-shadow: var(--sombra); transform: translateZ(0); }
.arco__moldura img { width: 100%; height: 108%; object-fit: cover; object-position: 50% 20%; will-change: transform; }
.arco__contorno { border: 1px solid var(--salvia); opacity: 0.6; transform: translate(16px, -16px); transition: transform 0.8s var(--ease); }
.hero__media:hover .arco__contorno { transform: translate(8px, -8px); }

.hero__selo { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; will-change: transform; }
.hero__selo--crp { left: -14px; bottom: 9%; padding: 12px 18px 12px 12px; border-radius: 18px; background: var(--branco); box-shadow: var(--sombra); }
.hero__selo--crp strong { display: block; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; color: var(--petroleo); line-height: 1.3; }
.hero__selo--crp small { display: block; font-size: 0.7rem; color: var(--tinta-2); line-height: 1.35; }
.hero__selo-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--petroleo); flex: none; }
.hero__selo-ico svg { width: 24px; height: 24px; fill: var(--creme); }
.hero__selo--modo { right: 0; top: 16%; padding: 9px 15px 9px 13px; border-radius: 999px; background: var(--petroleo); color: var(--creme); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; box-shadow: var(--sombra); }
.hero__pulso { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--terra-soft); }
.hero__pulso::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--terra-soft); animation: pulsa 2.2s var(--ease) infinite; }
@keyframes pulsa { 0% { transform: scale(1); opacity: 0.7; } 70%, 100% { transform: scale(3); opacity: 0; } }

@media (min-width: 1024px) {
  .hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; }
  .hero__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(48px, 6vw, 100px); }
  .hero__media { margin-right: 0; width: 100%; max-width: 450px; justify-self: end; }
  .hero__selo--crp { left: -44px; }
}

/* Faixa contínua das especialidades */
.faixa {
  position: relative; margin-top: clamp(56px, 8vw, 96px);
  padding: 18px 0; overflow: hidden;
  border-block: 1px solid var(--linha);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.faixa__trilho { display: flex; width: max-content; animation: faixa 55s linear infinite; }
.faixa:hover .faixa__trilho { animation-play-state: paused; }
.faixa__grupo { display: flex; align-items: center; gap: 30px; padding-right: 30px; font-family: var(--f-display); font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.45rem); color: var(--petroleo); white-space: nowrap; }
.faixa__grupo em { font-style: italic; color: var(--salvia-ink); }
.faixa__pomba { width: 22px; height: 22px; fill: var(--terra); flex: none; }
@keyframes faixa { to { transform: translateX(-50%); } }

/* Entrada da Hero (CSS puro; o JS só refina o título) */
.anima .hero-in { animation: sobe 1s var(--ease) both; }
.anima .hero__texto .eyebrow.hero-in { animation-delay: 0.1s; }
.anima .hero__lead.hero-in { animation-delay: 0.75s; }
.anima .hero__bagagem.hero-in { animation-delay: 0.85s; }
.anima .hero__acoes.hero-in { animation-delay: 0.95s; }
.anima .hero__media.hero-in { animation: surge 0.8s var(--ease) 0.2s both; }
.anima .hero__media .arco__moldura { animation: aparece-foto 1.5s var(--ease-out) 0.25s both; }
.anima .hero__media .arco__contorno { animation: surge 1.2s var(--ease) 0.9s both; }
.anima .hero__selo--crp { animation: sobe 1s var(--ease) 1.05s both; }
.anima .hero__selo--modo { animation: sobe 1s var(--ease) 1.2s both; }
.anima .hero__titulo:not(.is-dividido) { animation: sobe 1s var(--ease) 0.2s both; }
.anima .faixa { animation: surge 1.2s var(--ease) 1.2s both; }
@keyframes aparece-foto { from { opacity: 0; clip-path: inset(22% 0 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }

/* =============================================================================
   08. HOME · RUÍDO E ESPECIALIDADES
   ========================================================================== */
.ruido { position: relative; padding-bottom: var(--secao); }
.ruido__palco { position: relative; display: grid; place-items: center; min-height: 78svh; padding: clamp(80px, 10vw, 120px) 0; overflow: hidden; }
.ruido__nuvem { position: absolute; inset: 0; max-width: 1360px; margin-inline: auto; pointer-events: none; }
.ruido__frag {
  position: absolute; left: var(--x); top: var(--y);
  white-space: nowrap; color: var(--tinta-2);
  font-size: 0.9rem; line-height: 1.2;
  transform: rotate(var(--r));
  opacity: 0.62;
  will-change: transform, opacity, filter;
}
.ruido__frag > span { display: inline-block; animation: inquieto calc(2.6s * var(--p, 1)) ease-in-out infinite alternate; }
.ruido__frag--serif { font-family: var(--f-display); font-style: italic; font-size: clamp(1rem, 0.85rem + 0.6vw, 1.4rem); color: var(--petroleo); opacity: 0.5; }
.ruido__frag--caixa { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.ruido__frag--risco { text-decoration: line-through; text-decoration-color: var(--terra); text-decoration-thickness: 1.5px; font-weight: 500; }
.ruido__frag--grande { font-family: var(--f-display); font-style: italic; font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem); color: var(--terra); opacity: 0.3; }
.ruido__frag--lista { padding-left: 24px; font-weight: 500; }
.ruido__frag--lista::before { content: ''; position: absolute; left: 0; top: 50%; width: 13px; height: 13px; margin-top: -7px; border: 1.5px solid var(--salvia); border-radius: 3px; }
@keyframes inquieto {
  0% { transform: translate(0, 0) rotate(0); }
  33% { transform: translate(3px, -4px) rotate(1deg); }
  66% { transform: translate(-3px, 2px) rotate(-1deg); }
  100% { transform: translate(2px, 3px) rotate(0.5deg); }
}
.ruido__centro { position: relative; z-index: 2; max-width: 900px; text-align: center; }
.ruido__eyebrow { justify-content: center; }
.ruido__titulo {
  margin-top: 22px;
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(2.15rem, 1.3rem + 3.4vw, 4.3rem); line-height: 1.07; letter-spacing: -0.015em;
  color: var(--petroleo); text-wrap: balance;
}
.ruido__titulo em { font-style: italic; color: var(--terra); }
.ruido__fio { width: min(300px, 76%); margin: clamp(22px, 3vw, 34px) auto 0; }
.ruido__intro { margin: 22px auto 0; max-width: 40rem; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1rem); color: var(--tinta); }

@media (max-width: 767px) {
  .ruido__palco { min-height: 0; padding-top: 140px; padding-bottom: 130px; }
  .ruido__frag:nth-child(n+7) { display: none; }
  .ruido__frag:nth-child(1) { --x: 4%; --y: 4%; }
  .ruido__frag:nth-child(2) { --x: 36%; --y: 11%; }
  .ruido__frag:nth-child(3) { --x: 6%; --y: 86%; }
  .ruido__frag:nth-child(4) { --x: 62%; --y: 0%; }
  .ruido__frag:nth-child(5) { --x: 68%; --y: 90%; }
  .ruido__frag:nth-child(6) { --x: 24%; --y: 95%; }
  .ruido__frag--caixa { font-size: 0.6rem; }
}

/* Especialidades */
.especialidades { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .especialidades { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.esp {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  padding: clamp(28px, 3vw, 38px) clamp(24px, 2.6vw, 34px) clamp(32px, 3.4vw, 42px);
  border-radius: 26px; border: 1px solid var(--linha);
  background: var(--branco);
  transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease), border-color 0.7s var(--ease);
}
.esp::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(440px circle at var(--hx, 50%) var(--hy, 0%), rgba(184, 105, 79, 0.1), transparent 62%);
  opacity: 0; transition: opacity 0.6s var(--ease);
}
.esp__topo { display: flex; align-items: flex-start; justify-content: space-between; }
.esp__num { font-family: var(--f-display); font-style: italic; font-size: 1.15rem; color: var(--terra-ink); }
.esp__ico { width: 58px; height: 58px; fill: none; stroke: var(--petroleo); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.esp__ico * { transform-box: fill-box; transform-origin: center; }
.esp__ico .agulha { transform-box: view-box; transform-origin: 24px 24px; }
.esp__ico .agulha__centro { fill: var(--terra); stroke: none; }
.esp__ico .agulha path { stroke: var(--terra); }
.esp__titulo { margin: clamp(36px, 4vw, 54px) 0 12px; font-family: var(--f-display); font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.7rem); font-weight: 500; line-height: 1.2; color: var(--petroleo); }
.esp p { font-size: 0.96rem; line-height: 1.72; }
.esp__linha { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--terra); transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease); }
@media (hover: hover) {
  .esp:hover { transform: translateY(-6px); box-shadow: var(--sombra); border-color: rgba(121, 139, 116, 0.4); }
  .esp:hover::before { opacity: 1; }
  .esp:hover .esp__linha { transform: scaleX(1); }
  .esp:hover .esp__ico--fio path { animation: traca 1.4s var(--ease-io) both; stroke-dasharray: 1; }
  .esp:hover .esp__ico--fio path:last-child { animation-delay: 0.9s; }
  .esp:hover .onda--1 { animation: acalma 1.6s var(--ease-io) both; }
  .esp:hover .onda--2 { animation: acalma 1.6s var(--ease-io) 0.15s both; }
  .esp:hover .agulha { animation: gira-agulha 1.6s var(--ease) both; }
}
@keyframes acalma { 0% { transform: scaleY(1); } 50% { transform: scaleY(0.25); } 100% { transform: scaleY(1); } }
@keyframes gira-agulha { 0% { transform: rotate(0); } 45% { transform: rotate(200deg); } 70% { transform: rotate(160deg); } 100% { transform: rotate(180deg); } }
/* Os ícones se desenham quando o grupo entra na tela */
.anima .especialidades:not(.is-in) .esp__ico [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.especialidades.is-in .esp__ico [pathLength] { stroke-dasharray: 1; animation: traca 1.6s var(--ease-io) both; animation-delay: calc(var(--i, 0) * 0.15s + 0.35s); }

/* =============================================================================
   09. HOME · SOBRE E FORMAÇÃO
   ========================================================================== */
.sobre { position: relative; padding: var(--secao) 0; background: linear-gradient(180deg, var(--areia-50), var(--creme)); }
.sobre__grid { display: grid; gap: 64px; }
.sobre__media { position: relative; align-self: stretch; }
.sobre__fixo { position: relative; max-width: 460px; margin-inline: auto; }
.sobre__foto { position: relative; aspect-ratio: 4 / 5; }
.sobre__moldura { position: absolute; inset: 0; overflow: hidden; border-radius: 28px; background: #E4DED3; box-shadow: var(--sombra); transform: translateZ(0); }
.sobre__img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; object-position: 50% 30%; will-change: transform; }
.sobre__contorno { position: absolute; inset: 0; border-radius: 28px; border: 1px solid var(--salvia); opacity: 0.6; transform: translate(-16px, 16px); }
.sobre__anos {
  position: relative; z-index: 2;
  width: min(250px, 72%); margin: -64px 0 0 auto;
  padding: 22px 24px 22px;
  border-radius: 22px; background: var(--petroleo); color: var(--creme);
  box-shadow: var(--sombra-alta);
}
.sobre__anos::before { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(184, 105, 79, 0.5); border-radius: 17px; pointer-events: none; }
.sobre__anos-num { display: block; font-family: var(--f-display); font-size: 3.4rem; font-weight: 500; line-height: 1; }
.sobre__anos-num sup { font-size: 0.5em; color: var(--terra-soft); vertical-align: super; margin-left: 2px; }
.sobre__anos-txt { display: block; margin-top: 8px; font-size: 0.76rem; line-height: 1.5; color: var(--nevoa); }
.sobre__copy { margin-top: 28px; max-width: 38rem; }
.sobre__copy p + p { margin-top: 1.05em; }
.sobre__copy p { font-size: 1.02rem; }
.sobre__destaque {
  margin-top: 1.7em !important; padding-left: 1.4rem;
  border-left: 2px solid var(--terra);
  font-family: var(--f-display); font-style: italic; font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.36rem) !important; line-height: 1.55;
  color: var(--petroleo);
}
.assinatura { margin-top: 34px; }
.assinatura img { width: min(270px, 70%); }
.anima .assinatura img { clip-path: inset(0 100% 0 0); transition: clip-path 2.2s var(--ease-io) 0.3s; }
.anima .assinatura.is-in img { clip-path: inset(0 0 0 0); }

.formacao { margin-top: clamp(56px, 7vw, 80px); }
.formacao__rotulo { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--salvia-ink); }
.formacao__lista { position: relative; margin-top: 26px; padding-left: 40px; }
.formacao__lista::before, .formacao__lista::after { content: ''; position: absolute; left: 7px; top: 10px; bottom: 34px; width: 1px; }
.formacao__lista::before { background: var(--linha-forte); }
.formacao__lista::after { background: var(--terra); transform-origin: top; transform: scaleY(var(--prog, 1)); width: 2px; left: 6.5px; }
.anima .formacao__lista::after { transform: scaleY(var(--prog, 0)); }
.formacao__item { position: relative; padding-bottom: 30px; }
.formacao__item:last-child { padding-bottom: 0; }
.formacao__no {
  position: absolute; left: -40px; top: 6px;
  width: 15px; height: 15px; border-radius: 50%;
  border: 1.5px solid var(--salvia); background: var(--creme);
  transition: background-color 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.formacao__item.is-ativo .formacao__no, .no-js .formacao__no, .formacao-sem-anima .formacao__no { background: var(--terra); border-color: var(--terra); box-shadow: 0 0 0 5px rgba(184, 105, 79, 0.14); }
.formacao__item--atual .formacao__no::after { content: ''; position: absolute; inset: -1.5px; border-radius: 50%; border: 1.5px solid var(--terra); animation: pulsa 2.4s var(--ease) infinite; }
.formacao__etapa { display: block; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--terra-ink); }
.formacao__titulo { margin: 4px 0 2px; font-family: var(--f-display); font-size: 1.28rem; font-weight: 500; line-height: 1.3; color: var(--petroleo); }
.formacao__inst { display: block; font-size: 0.88rem; color: var(--tinta-2); }

@media (min-width: 1024px) {
  .sobre__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(64px, 7vw, 120px); align-items: start; }
  .sobre__fixo { position: sticky; top: 110px; margin: 0; }
  .sobre__texto { padding-top: 24px; }
}
@media (min-width: 640px) {
  .formacao__item { display: grid; grid-template-columns: 150px 1fr; column-gap: 24px; align-items: baseline; }
  .formacao__etapa { grid-row: 1 / span 2; padding-top: 2px; }
  .formacao__titulo { margin-top: 0; }
  .formacao__inst { grid-column: 2; }
}

/* =============================================================================
   10. HOME · ATENDIMENTO E JORNADA
   ========================================================================== */
.atend { padding: var(--secao) 0; background: var(--creme); }
.atend__grid { display: grid; gap: 56px; align-items: center; }
.atend__texto { margin-top: 22px; max-width: 36rem; }

.modo { margin-top: 34px; max-width: 34rem; }
.modo__abas { position: relative; display: inline-flex; padding: 5px; border-radius: 999px; background: var(--branco); border: 1px solid var(--linha); box-shadow: var(--sombra-suave); }
.modo__aba {
  position: relative; z-index: 1;
  padding: 12px 26px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tinta-2);
  transition: color 0.45s var(--ease);
}
.modo__aba[aria-selected="true"] { color: var(--creme); }
.modo__pilula { position: absolute; top: 5px; bottom: 5px; left: 0; width: var(--pw, 50%); border-radius: 999px; background: var(--petroleo); transform: translateX(var(--px, 5px)); transition: transform 0.6s var(--ease), width 0.6s var(--ease); }
.no-js .modo__pilula { display: none; }
.no-js .modo__aba[aria-selected="true"] { background: var(--petroleo); }
.no-js .modo__painel[hidden] { display: block !important; }
.modo__paineis { margin-top: 22px; }
.modo__painel.is-ativo { animation: sobe 0.7s var(--ease) both; }
.modo__lista li { position: relative; padding: 13px 0 13px 32px; border-bottom: 1px solid var(--linha); font-size: 0.98rem; line-height: 1.6; }
.modo__lista li::before { content: ''; position: absolute; left: 2px; top: 1.15em; width: 16px; height: 9px; border-left: 1.6px solid var(--terra); border-bottom: 1.6px solid var(--terra); transform: rotate(-45deg); transform-origin: left top; margin-top: 4px; }
.modo__painel .link-seta { margin-top: 20px; }
.modo__rodape { display: flex; align-items: center; gap: 9px; margin-top: 22px; font-size: 0.82rem; font-weight: 500; color: var(--tinta-2); }
.modo__rodape .ico { width: 18px; height: 18px; color: var(--terra-ink); }

.atend__visual { position: relative; width: 100%; max-width: 540px; aspect-ratio: 1 / 0.95; margin-inline: auto; }
.atend__visual::before { content: ''; position: absolute; inset: 6% 0 0 10%; border-radius: 50% 50% 32px 32px / 42% 42% 32px 32px; background: var(--areia); }
.tela, .mapa {
  position: absolute; inset: 14% 6% 10% 2%;
  border-radius: 24px; overflow: hidden;
  border: 1px solid var(--linha); box-shadow: var(--sombra-alta);
  transition: opacity 0.7s var(--ease), transform 0.9s var(--ease);
}
.atend__visual[data-modo-visual="online"] .mapa,
.atend__visual[data-modo-visual="presencial"] .tela { opacity: 0; transform: translateY(26px) scale(0.95) rotate(-1.5deg); pointer-events: none; }
.tela { background: var(--branco); display: flex; flex-direction: column; }
.tela__barra { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 18px; border-bottom: 1px solid var(--linha); flex: none; }
.tela__barra span { width: 9px; height: 9px; border-radius: 50%; background: var(--areia); }
.tela__barra span:nth-child(1) { background: var(--terra-soft); }
.tela__barra span:nth-child(2) { background: var(--salvia-soft); }
.tela__barra em { margin-left: auto; font-style: normal; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tinta-2); }
.tela__corpo { position: relative; flex: 1; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, #FFFFFF 0%, #EDF1F1 55%, #E6E1D7 100%); }
.tela__foto { position: relative; z-index: 2; width: 34%; max-width: 150px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 4px solid var(--branco); box-shadow: var(--sombra); }
.tela__onda { position: absolute; left: 50%; top: 50%; width: 34%; max-width: 150px; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--salvia); transform: translate(-50%, -50%); animation: ondula 3.6s var(--ease) infinite; }
.tela__onda--2 { animation-delay: 1.8s; }
@keyframes ondula { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; } 100% { transform: translate(-50%, -50%) scale(2.3); opacity: 0; } }
.tela__chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; font-size: 0.7rem; font-weight: 600; box-shadow: var(--sombra-suave); }
.tela__chip .ico { width: 15px; height: 15px; color: var(--terra-ink); }
.tela__chip--cadeado { left: 18px; bottom: 18px; background: var(--branco); color: var(--petroleo); }
.tela__chip--tempo { right: 18px; top: 18px; background: var(--petroleo); color: var(--creme); letter-spacing: 0.06em; }

.mapa { background: #E7E2D8; }
.mapa__ruas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapa__ruas path { fill: none; stroke: #F7F5F0; stroke-width: 9; stroke-linecap: round; }
.mapa__ruas .mapa__avenida { stroke: #FFFFFF; stroke-width: 18; }
.mapa__ruas .mapa__quadra { fill: rgba(121, 139, 116, 0.2); stroke: none; }
.mapa__pino { position: absolute; left: 54%; top: 46%; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50% 50% 50% 4px; background: var(--terra-ink); color: var(--branco); transform: translate(-50%, -100%) rotate(-45deg); box-shadow: 0 12px 24px -8px rgba(161, 91, 68, 0.7); animation: pino 2.8s var(--ease) infinite; }
.mapa__pino .ico { width: 24px; height: 24px; transform: rotate(45deg); }
.mapa__pino::after { content: ''; position: absolute; left: -2px; bottom: -14px; width: 16px; height: 6px; border-radius: 50%; background: rgba(16, 63, 84, 0.25); transform: rotate(45deg); }
@keyframes pino { 0%, 100% { margin-top: 0; } 50% { margin-top: -8px; } }
.mapa__rotulo { position: absolute; left: 18px; bottom: 18px; padding: 12px 16px; border-radius: 16px; background: var(--branco); box-shadow: var(--sombra-suave); font-size: 0.76rem; line-height: 1.45; color: var(--tinta-2); }
.mapa__rotulo strong { display: block; font-family: var(--f-display); font-size: 1.05rem; font-weight: 500; color: var(--petroleo); }

@media (min-width: 1024px) { .atend__grid { grid-template-columns: 1fr 1fr; gap: clamp(56px, 6vw, 96px); } }

/* Jornada em três passos */
.jornada { margin-top: clamp(88px, 10vw, 140px); }
.jornada__cabeca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.jornada__passos { --gap-j: clamp(32px, 4vw, 64px); position: relative; display: grid; gap: 34px; margin-top: 44px; padding-left: 74px; }
.jornada__passos::before { content: ''; position: absolute; left: 26px; top: 26px; bottom: 26px; width: 1px; background: linear-gradient(var(--terra), var(--linha-forte)); }
.jornada__fio { display: none; }
.passo { position: relative; }
.passo__num {
  position: absolute; left: -74px; top: 0;
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--salvia); background: var(--creme);
  font-family: var(--f-display); font-style: italic; font-size: 1.35rem; color: var(--petroleo);
  transition: background-color 0.6s var(--ease), color 0.6s var(--ease), border-color 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.passo.is-ativo .passo__num, .no-js .passo__num { background: var(--petroleo); color: var(--creme); border-color: var(--petroleo); box-shadow: 0 0 0 7px rgba(184, 105, 79, 0.14); }
.passo__titulo { padding-top: 10px; font-family: var(--f-display); font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.55rem); font-weight: 500; line-height: 1.25; color: var(--petroleo); }
.passo p { margin-top: 10px; font-size: 0.96rem; line-height: 1.72; max-width: 26rem; }
@media (min-width: 900px) {
  .jornada__passos { grid-template-columns: repeat(3, 1fr); gap: var(--gap-j); padding-left: 0; padding-top: 0; }
  .jornada__passos::before { display: none; }
  .jornada__fio { display: block; position: absolute; left: 26px; top: 6px; width: calc(100% - 26px - ((100% - 2 * var(--gap-j)) / 3 - 26px)); height: 40px; overflow: visible; }
  .passo { position: relative; z-index: 1; }
  .jornada__fio path { fill: none; stroke: var(--terra); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .anima .jornada__fio path { stroke-dasharray: 1; stroke-dashoffset: var(--dash, 1); }
  .passo__num { position: relative; left: 0; margin-bottom: 26px; }
  .passo__titulo { padding-top: 0; }
}

/* =============================================================================
   11. HOME · BLOG (vitrine), MANIFESTO, DÚVIDAS, CONTATO
   ========================================================================== */
.vitrine {
  position: relative; isolation: isolate; overflow: hidden;
  margin-inline: clamp(8px, 1.4vw, 20px);
  padding: var(--secao) 0;
  border-radius: clamp(26px, 3vw, 40px);
  background: var(--petroleo); color: var(--creme);
}
.vitrine::before { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(184, 105, 79, 0.5); border-radius: clamp(19px, 2.4vw, 32px); pointer-events: none; }
.vitrine__marca { position: absolute; right: -90px; top: -70px; width: 520px; height: 520px; fill: var(--creme); opacity: 0.04; transform: rotate(-8deg); z-index: -1; pointer-events: none; }
.vitrine__cabeca { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; margin-bottom: clamp(40px, 5vw, 64px); }
.vitrine__cabeca .titulo-secao { max-width: 16ch; }
.vitrine__grid { display: grid; gap: 40px; }
.vitrine__lista { display: flex; flex-direction: column; }
@media (min-width: 1024px) { .vitrine__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); align-items: start; } }

.manifesto { position: relative; overflow: hidden; padding: clamp(110px, 14vw, 200px) 0; text-align: center; }
.manifesto::before { content: '\201C'; position: absolute; left: 50%; top: clamp(40px, 6vw, 80px); transform: translateX(-50%); font-family: var(--f-display); font-size: clamp(16rem, 30vw, 30rem); line-height: 0.8; color: var(--salvia); opacity: 0.08; pointer-events: none; }
.manifesto__caixa { position: relative; max-width: 1100px; }
.manifesto__fio { width: min(250px, 66%); margin: 0 auto clamp(30px, 4vw, 48px); }
.manifesto__frase p {
  margin-inline: auto; max-width: 23em;
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.55rem, 0.95rem + 2.6vw, 3.15rem); line-height: 1.32; letter-spacing: -0.01em;
  color: var(--petroleo); text-wrap: balance;
}
.manifesto__frase em { font-style: italic; color: var(--terra); }
.manifesto__frase .palavra { opacity: var(--o, 1); transition: opacity 0.2s linear; }
.manifesto__assinatura { margin-top: clamp(32px, 4vw, 48px); }
.manifesto__nome { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--petroleo); }
.manifesto__cargo { display: block; margin-top: 6px; font-family: var(--f-display); font-style: italic; font-size: 1rem; color: var(--terra-ink); }

.duvidas { padding: var(--secao) 0; background: var(--areia-50); }
.duvidas__grid { display: grid; gap: 48px; }
.duvidas__intro p:not(.eyebrow) { margin-top: 20px; max-width: 28rem; }
.duvidas__intro .link-seta { margin-top: 28px; }
@media (min-width: 1024px) {
  .duvidas__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(56px, 7vw, 110px); align-items: start; }
  .duvidas__intro { position: sticky; top: 120px; }
}
.faq { border-bottom: 1px solid var(--linha-forte); }
.faq:first-child { border-top: 1px solid var(--linha-forte); }
.faq__botao { display: grid; grid-template-columns: 46px 1fr 40px; align-items: center; gap: 12px; width: 100%; padding: 26px 0; text-align: left; }
.faq__num { font-family: var(--f-display); font-style: italic; font-size: 1rem; color: var(--terra-ink); }
.faq__pergunta { font-family: var(--f-display); font-size: clamp(1.12rem, 1rem + 0.45vw, 1.35rem); font-weight: 500; line-height: 1.35; color: var(--petroleo); transition: color 0.4s var(--ease), transform 0.5s var(--ease); }
.faq__icone { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linha-forte); transition: background-color 0.45s var(--ease), border-color 0.45s var(--ease), transform 0.6s var(--ease); }
.faq__icone::before, .faq__icone::after { content: ''; position: absolute; left: 50%; top: 50%; width: 13px; height: 1.6px; margin: -0.8px 0 0 -6.5px; border-radius: 2px; background: var(--petroleo); transition: transform 0.5s var(--ease), background-color 0.45s var(--ease); }
.faq__icone::after { transform: rotate(90deg); }
.faq[data-aberto="true"] .faq__icone { background: var(--petroleo); border-color: var(--petroleo); transform: rotate(180deg); }
.faq[data-aberto="true"] .faq__icone::before, .faq[data-aberto="true"] .faq__icone::after { background: var(--creme); }
.faq[data-aberto="true"] .faq__icone::after { transform: rotate(0); }
@media (hover: hover) { .faq__botao:hover .faq__pergunta { color: var(--terra-ink); transform: translateX(4px); } }
.js .faq__resposta { height: 0; overflow: hidden; transition: height 0.55s var(--ease); }
.faq__resposta p { padding: 0 52px 28px 58px; font-size: 0.98rem; line-height: 1.78; }
@media (max-width: 560px) { .faq__botao { grid-template-columns: 34px 1fr 38px; } .faq__resposta p { padding: 0 0 26px 46px; } }

.contato { padding: var(--secao) 0; }
.contato__caixa {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 44px; align-items: center;
  padding: clamp(34px, 6vw, 84px);
  border-radius: clamp(26px, 3vw, 40px);
  background: var(--petroleo); color: var(--creme);
  box-shadow: var(--sombra-alta);
}
.contato__caixa::before { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(184, 105, 79, 0.5); border-radius: clamp(19px, 2.4vw, 32px); pointer-events: none; }
.contato__marca { position: absolute; left: -80px; bottom: -90px; width: 380px; height: 380px; fill: var(--creme); opacity: 0.04; transform: rotate(10deg); z-index: -1; pointer-events: none; }
.contato__fio { width: min(250px, 72%); margin: 22px 0 6px; }
.contato__p { margin-top: 18px; max-width: 34rem; color: var(--nevoa); }
.contato__chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 34px; }
.contato__chips li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 13px; border-radius: 999px; border: 1px solid rgba(247, 245, 240, 0.22); font-size: 0.8rem; font-weight: 500; }
.contato__chips .ico { width: 17px; height: 17px; color: var(--terra-soft); }
.local { display: block; overflow: hidden; border-radius: 24px; background: var(--creme); color: var(--tinta); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5); transition: transform 0.6s var(--ease); }
.local:hover { transform: translateY(-4px) rotate(-0.4deg); }
.local__mapa { position: relative; display: block; height: 210px; background: #E7E2D8; }
.local__mapa > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.local__mapa > svg path { fill: none; stroke: #F7F5F0; stroke-width: 9; stroke-linecap: round; }
.local__mapa > svg .mapa__avenida { stroke: #FFFFFF; stroke-width: 18; }
.local__mapa .mapa__pino { left: 50%; top: 58%; }
.local__info { display: flex; flex-direction: column; padding: 22px 26px 26px; font-size: 0.9rem; line-height: 1.6; }
.local__predio { margin-bottom: 6px; font-family: var(--f-display); font-size: 1.3rem; font-weight: 500; color: var(--petroleo); }
.local__abrir { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 0.8rem; font-weight: 600; color: var(--petroleo); }
@media (min-width: 1024px) { .contato__caixa { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(48px, 6vw, 96px); } }

/* =============================================================================
   12. CARDS DE ARTIGO
   ========================================================================== */
.card-artigo { position: relative; display: flex; flex-direction: column; }
.card-artigo__capa { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 18px; background: var(--areia); transform: translateZ(0); }
.card-artigo__capa img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.86); transition: transform 1.1s var(--ease), filter 0.7s var(--ease); }
.card-artigo__sem-capa { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(135deg, var(--areia), #E1E6E2); }
.card-artigo__sem-capa svg { width: 30%; height: 50%; fill: var(--petroleo); opacity: 0.18; }
.card-artigo__tag {
  position: absolute; left: 14px; top: 14px; z-index: 1;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.94); color: var(--petroleo);
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.card-artigo__ponto { display: none; position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--terra); }
.card-artigo__tag.is-novo .card-artigo__ponto { display: block; }
.card-artigo__ponto::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--terra); animation: pulsa 2.2s var(--ease) infinite; }
.card-artigo__corpo { display: flex; flex: 1; flex-direction: column; }
.card-artigo__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; margin: 20px 0 10px; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.03em; color: var(--salvia-ink); }
.card-artigo__rotulo { margin-right: 6px; padding-right: 12px; border-right: 1px solid var(--linha-forte); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--terra-ink); }
.card-artigo__titulo { font-family: var(--f-display); font-weight: 500; font-size: 1.32rem; line-height: 1.3; color: var(--petroleo); text-wrap: balance; }
.card-artigo__link { transition: color 0.4s var(--ease); }
.card-artigo__link::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.card-artigo__link:focus-visible { outline: none; }
.card-artigo__link:focus-visible::after { outline: 2px solid var(--terra-ink); outline-offset: 4px; border-radius: 20px; }
.card-artigo__resumo { margin-top: 10px; font-size: 0.92rem; line-height: 1.65; color: var(--tinta-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-artigo__ler { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 20px; font-size: 0.8rem; font-weight: 600; color: var(--petroleo); }
@media (hover: hover) {
  .card-artigo:hover .card-artigo__capa img { transform: scale(1.05); filter: saturate(1); }
  .card-artigo:hover .card-artigo__link { color: var(--terra-ink); }
}

.card-artigo--normal { padding: 12px 12px 26px; border-radius: 26px; border: 1px solid var(--linha); background: var(--branco); transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease), border-color 0.7s var(--ease); }
.card-artigo--normal .card-artigo__corpo { padding: 0 12px; }
@media (hover: hover) { .card-artigo--normal:hover { transform: translateY(-6px); box-shadow: var(--sombra); border-color: rgba(121, 139, 116, 0.4); } }

.card-artigo--destaque { padding: 14px; border-radius: 30px; border: 1px solid var(--linha); background: var(--branco); transition: box-shadow 0.7s var(--ease), transform 0.7s var(--ease); }
.card-artigo--destaque .card-artigo__capa { aspect-ratio: 16 / 10; border-radius: 20px; }
.card-artigo--destaque .card-artigo__corpo { padding: 0 14px 18px; }
.card-artigo--destaque .card-artigo__titulo { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.35rem); line-height: 1.18; }
.card-artigo--destaque .card-artigo__resumo { -webkit-line-clamp: 4; font-size: 1rem; }
@media (hover: hover) { .card-artigo--destaque:hover { box-shadow: var(--sombra); transform: translateY(-4px); } }
@media (min-width: 900px) {
  .card-artigo--destaque { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
  .card-artigo--destaque .card-artigo__capa { aspect-ratio: 4 / 3.2; }
  .card-artigo--destaque .card-artigo__corpo { padding: 24px 28px 24px 0; }
}

.card-artigo--escuro .card-artigo__capa { aspect-ratio: 16 / 9.5; border-radius: 22px; background: var(--petroleo-2); }
.card-artigo--escuro .card-artigo__meta { color: var(--salvia-soft); margin-top: 24px; }
.card-artigo--escuro .card-artigo__titulo { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.05rem); line-height: 1.2; color: var(--creme); }
.card-artigo--escuro .card-artigo__resumo { color: var(--nevoa); font-size: 0.96rem; }
.card-artigo--escuro .card-artigo__ler { color: var(--creme); }
.card-artigo--escuro .seta, .card-artigo--mini .seta { color: var(--terra-soft); }
@media (hover: hover) { .card-artigo--escuro:hover .card-artigo__link, .card-artigo--mini:hover .card-artigo__link { color: var(--terra-soft); } }

.card-artigo--mini { display: grid; grid-template-columns: clamp(96px, 22vw, 136px) 1fr; gap: 20px; align-items: center; padding: 22px 0; border-top: 1px solid var(--linha-clara); }
.card-artigo--mini:first-child { border-top: 0; padding-top: 0; }
.card-artigo--mini .card-artigo__capa { aspect-ratio: 1; border-radius: 16px; background: var(--petroleo-2); }
.card-artigo--mini .card-artigo__meta { margin: 0 0 6px; color: var(--salvia-soft); }
.card-artigo--mini .card-artigo__titulo { font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.18rem); line-height: 1.35; color: var(--creme); }

/* =============================================================================
   13. BLOG · LISTA
   ========================================================================== */
.blog-topo { position: relative; overflow: hidden; isolation: isolate; padding: calc(var(--topo-h) + clamp(48px, 7vw, 96px)) 0 clamp(40px, 5vw, 64px); }
.blog-topo .hero__brilho--a { opacity: 0.4; }
.trilha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tinta-2); }
.trilha a { transition: color 0.3s var(--ease); }
.trilha a:hover { color: var(--terra-ink); }
.trilha [aria-current] { color: var(--terra-ink); }
.blog-topo__grid { display: grid; gap: 28px; margin-top: 34px; align-items: end; }
.blog-topo__titulo { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.6rem, 1.6rem + 4vw, 5rem); line-height: 1.02; letter-spacing: -0.018em; color: var(--petroleo); text-wrap: balance; }
.blog-topo__titulo em { font-style: italic; color: var(--terra); }
.blog-topo__lado p { max-width: 30rem; font-size: 1.04rem; }
.blog-topo__fio { width: min(300px, 80%); margin-top: 22px; }
.blog-topo__conta { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--salvia-ink); }
.blog-topo__conta .ico { width: 17px; height: 17px; }
@media (min-width: 1024px) { .blog-topo__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; } }

.filtros { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(32px, 4vw, 48px); }
.filtro {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--linha-forte); background: transparent;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; color: var(--tinta-2);
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.filtro span { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--areia); font-size: 0.66rem; color: var(--petroleo); transition: background-color 0.4s var(--ease); }
.filtro:hover { border-color: var(--petroleo); color: var(--petroleo); }
.filtro[aria-pressed="true"] { background: var(--petroleo); border-color: var(--petroleo); color: var(--creme); }
.filtro[aria-pressed="true"] span { background: rgba(247, 245, 240, 0.16); color: var(--creme); }
.no-js .filtros { display: none; }

.blog-lista { padding-bottom: var(--secao); }
.blog-grade { display: grid; gap: 24px; grid-template-columns: 1fr; }
.blog-grade .card-artigo--destaque { grid-column: 1 / -1; }
@media (min-width: 680px) { .blog-grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  /* Mosaico: o destaque ocupa 2 colunas, com o segundo artigo ao lado */
  .blog-grade { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .blog-grade .card-artigo--destaque { grid-column: span 2; display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .blog-grade .card-artigo--destaque + .card-artigo--normal .card-artigo__capa { flex: 1; aspect-ratio: auto; min-height: 260px; }
  .blog-grade .card-artigo--destaque + .card-artigo--normal .card-artigo__corpo { flex: 0 0 auto; }
  .blog-grade .card-artigo--destaque .card-artigo__capa { aspect-ratio: 16 / 8.2; }
  .blog-grade .card-artigo--destaque .card-artigo__corpo { padding: 4px 18px 16px; }
  .blog-grade .card-artigo--destaque .card-artigo__titulo { max-width: 24ch; }
  .blog-grade .card-artigo--destaque .card-artigo__resumo { max-width: 46rem; -webkit-line-clamp: 2; }
  /* Último artigo sozinho na linha: ocupa a linha inteira, com a imagem ao lado */
  .blog-grade .card-artigo--normal:last-child:nth-child(3n) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; align-items: center; padding: 12px; }
  .blog-grade .card-artigo--normal:last-child:nth-child(3n) .card-artigo__corpo { padding: 12px 20px 12px 0; }
}
.blog-grade .card-artigo.is-filtrado { display: none; }
.blog-grade .card-artigo.is-entrando { animation: sobe 0.6s var(--ease) both; }
.blog-vazio { padding: 48px 28px; border-radius: 26px; border: 1px dashed var(--linha-forte); text-align: center; }
.blog-vazio svg { width: 54px; height: 54px; margin: 0 auto 16px; fill: var(--petroleo); opacity: 0.2; }
.blog-vazio h2 { font-family: var(--f-display); font-size: 1.6rem; font-weight: 500; color: var(--petroleo); }
.blog-vazio p { margin-top: 8px; }

.faixa-cta { margin-bottom: clamp(40px, 5vw, 64px); }
.faixa-cta__caixa {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 48px;
  padding: clamp(34px, 5vw, 64px);
  border-radius: clamp(26px, 3vw, 36px);
  background: var(--petroleo); color: var(--creme);
}
.faixa-cta__caixa::before { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(184, 105, 79, 0.5); border-radius: clamp(19px, 2.4vw, 28px); pointer-events: none; }
.faixa-cta__marca { position: absolute; right: -40px; top: -50px; width: 280px; height: 280px; fill: var(--creme); opacity: 0.05; transform: rotate(-8deg); z-index: -1; }
.faixa-cta__texto { max-width: 40rem; }
.faixa-cta__frase { margin-top: 16px; font-family: var(--f-display); font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.3rem); font-weight: 500; line-height: 1.22; text-wrap: balance; }
.faixa-cta__frase em { font-style: italic; color: var(--terra-soft); }

/* =============================================================================
   14. ARTIGO
   ========================================================================== */
/* Barra de leitura: o fio corre pelo topo e a pomba vai na ponta */
.leitura { position: fixed; left: 0; right: 0; top: 0; z-index: 70; height: 3px; pointer-events: none; }
.leitura__fio { position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--terra); transform-origin: left; transform: scaleX(var(--lido, 0)); }
.leitura__pomba { position: absolute; top: -7px; left: 0; width: 20px; height: 20px; fill: var(--petroleo); transform: translateX(calc(var(--lido, 0) * (100vw - 22px))); opacity: var(--pomba-o, 0); transition: opacity 0.4s var(--ease); }

.artigo-topo { position: relative; overflow: hidden; isolation: isolate; padding: calc(var(--topo-h) + clamp(40px, 6vw, 80px)) 0 0; }
.artigo-topo__conteudo { max-width: 860px; }
.artigo-topo .trilha { margin-bottom: 30px; }
.artigo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-2); }
.artigo-meta__cat { padding: 6px 13px; border-radius: 999px; background: var(--petroleo); color: var(--creme); }
.artigo-meta__sep { width: 18px; height: 1px; background: var(--terra); }
.artigo-titulo { margin-top: 24px; font-family: var(--f-display); font-weight: 500; font-size: clamp(2.1rem, 1.35rem + 3vw, 3.9rem); line-height: 1.08; letter-spacing: -0.015em; color: var(--petroleo); text-wrap: balance; }
.artigo-resumo { margin-top: 22px; max-width: 44rem; font-family: var(--f-display); font-style: italic; font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem); line-height: 1.5; color: var(--salvia-ink); }
.autoria { display: flex; align-items: center; gap: 14px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--linha); }
.autoria img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--creme), 0 0 0 4px var(--salvia); }
.autoria strong { display: block; font-size: 0.92rem; color: var(--petroleo); line-height: 1.35; }
.autoria span { display: block; font-size: 0.78rem; color: var(--tinta-2); line-height: 1.4; }

.artigo-capa { margin-top: clamp(36px, 5vw, 60px); }
.artigo-capa__moldura { position: relative; overflow: hidden; border-radius: clamp(20px, 2.6vw, 32px); aspect-ratio: 16 / 8; background: var(--areia); box-shadow: var(--sombra); }
.artigo-capa__moldura img { width: 100%; height: 112%; object-fit: cover; will-change: transform; }

.artigo-corpo { display: grid; gap: 40px; margin-top: clamp(44px, 6vw, 80px); padding-bottom: clamp(64px, 8vw, 110px); }
.artigo-lateral { display: none; }
@media (min-width: 1100px) {
  .artigo-corpo { grid-template-columns: 250px minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); }
  .artigo-lateral { display: block; }
  .artigo-lateral__fixo { position: sticky; top: 110px; }
}
.sumario__titulo { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--terra-ink); }
.sumario ol { position: relative; margin-top: 16px; padding-left: 0; border-left: 1px solid var(--linha-forte); }
.sumario a { position: relative; display: block; padding: 8px 0 8px 18px; font-size: 0.82rem; line-height: 1.45; color: var(--tinta-2); transition: color 0.3s var(--ease); }
.sumario a::before { content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--terra); transform: scaleY(0); transition: transform 0.4s var(--ease); }
.sumario a:hover { color: var(--petroleo); }
.sumario a.is-ativo { color: var(--petroleo); font-weight: 600; }
.sumario a.is-ativo::before { transform: scaleY(1); }
.compartilhar { margin-top: 36px; }
.compartilhar__botoes { display: flex; gap: 8px; margin-top: 14px; }
.compartilhar__botoes a, .compartilhar__botoes button { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--linha-forte); color: var(--petroleo); transition: background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease); }
.compartilhar__botoes a:hover, .compartilhar__botoes button:hover { background: var(--petroleo); border-color: var(--petroleo); color: var(--creme); }
.compartilhar__botoes .ico { width: 18px; height: 18px; }
.compartilhar--fim { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--linha); }
.compartilhar--fim .compartilhar__botoes { margin-top: 0; }

/* Tipografia do texto (Brandbook: 400, altura 1.75, ~62 caracteres por linha) */
.artigo { max-width: 42rem; font-size: 1.0625rem; line-height: 1.85; color: var(--tinta); }
@media (min-width: 640px) { .artigo { font-size: 1.125rem; } }
.artigo p { margin: 0 0 1.5em; text-wrap: pretty; }
.artigo strong { color: var(--petroleo); font-weight: 600; }
.artigo em { font-style: italic; }
.artigo a { color: var(--petroleo); font-weight: 600; box-shadow: inset 0 -2px 0 rgba(184, 105, 79, 0.45); transition: color 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.artigo a:hover { color: var(--terra-ink); box-shadow: inset 0 -2px 0 var(--terra); }

/* Lead: a resposta direta na abertura do texto */
.artigo > p.lead { margin-bottom: 1.9em; font-family: var(--f-display); font-size: clamp(1.22rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.58; color: var(--petroleo); }
.artigo > p.lead::before { content: ''; display: block; width: 52px; height: 2px; margin-bottom: 1.1em; background: var(--terra); }
/* Capitular: primeira letra do primeiro parágrafo comum */
.artigo > p:first-of-type:not(.lead):not(.destaque)::first-letter,
.artigo > p.lead + p::first-letter {
  float: left; font-family: var(--f-display); font-weight: 500;
  font-size: 4.6em; line-height: 0.82; padding: 0.06em 0.12em 0 0; margin-bottom: -0.06em;
  color: var(--terra);
}
.artigo > p.destaque { margin: 2.2em 0; padding: 1.4em 1.6em; border-radius: 20px; background: rgba(184, 105, 79, 0.07); border-left: 3px solid var(--terra); font-family: var(--f-display); font-style: italic; font-size: 1.22em; line-height: 1.5; color: var(--petroleo); }

.artigo h2 { position: relative; margin: 2.6em 0 0.8em; padding-top: 1.1em; font-family: var(--f-display); font-weight: 500; font-size: clamp(1.55rem, 1.3rem + 1vw, 2.1rem); line-height: 1.22; letter-spacing: -0.01em; color: var(--petroleo); text-wrap: balance; scroll-margin-top: 110px; }
.artigo h2::before { content: ''; position: absolute; left: 0; top: 0; width: 46px; height: 2px; background: var(--terra); }
.artigo h3 { margin: 2em 0 0.6em; font-family: var(--f-display); font-weight: 500; font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.42rem); line-height: 1.32; color: var(--petroleo); }
.artigo h4 { margin: 1.8em 0 0.5em; font-size: 0.7rem; font-weight: 600; line-height: 1.6; letter-spacing: 0.22em; text-transform: uppercase; color: var(--salvia-ink); }
.artigo-num { display: inline-block; margin-right: 0.6rem; font-style: italic; font-weight: 400; font-size: 0.8em; color: var(--terra); }

.artigo blockquote { position: relative; margin: 2.6em 0; padding: 1.9em 1.6em 1.7em; border-radius: 24px; background: var(--petroleo); color: var(--creme); overflow: hidden; isolation: isolate; }
.artigo blockquote::before { content: '\201C'; position: absolute; right: 18px; top: -18px; z-index: -1; font-family: var(--f-display); font-size: 9rem; line-height: 1; color: var(--terra-soft); opacity: 0.25; }
.artigo blockquote p { margin: 0 0 0.6em; font-family: var(--f-display); font-style: italic; font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.48rem); line-height: 1.5; }
.artigo blockquote p:last-of-type { margin-bottom: 0; }
.artigo blockquote footer { margin-top: 1em; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--terra-soft); }

.artigo ul, .artigo ol { display: grid; gap: 12px; margin: 1.8em 0 2em; }
.artigo li { position: relative; padding: 1.05em 1.3em 1.05em 1.45em; border: 1px solid var(--linha); border-radius: 16px; background: var(--branco); font-size: 0.97em; line-height: 1.72; transition: border-color 0.4s var(--ease), transform 0.5s var(--ease); }
.artigo ul > li { border-left: 3px solid var(--terra); }
.artigo ol { counter-reset: passo; }
.artigo ol > li { counter-increment: passo; padding-left: 3.6em; }
.artigo ol > li::before { content: counter(passo); position: absolute; left: 1.05em; top: 0.9em; display: grid; place-items: center; width: 1.85em; height: 1.85em; border-radius: 50%; background: var(--petroleo); color: var(--creme); font-family: var(--f-display); font-style: italic; font-size: 0.95em; line-height: 1; }
@media (hover: hover) { .artigo li:hover { border-color: rgba(121, 139, 116, 0.5); transform: translateX(3px); } .artigo ul > li:hover { border-left-color: var(--terra); } }
.artigo hr { margin: 3em auto; width: 4rem; border: 0; border-top: 1px solid var(--salvia); }

/* Referências: lista compacta e numerada, sem cartões */
.artigo ol.referencias, .artigo ul.referencias { display: block; margin: 1.2em 0 0; padding: 1.4em 1.5em; border-radius: 18px; background: var(--areia-50); border: 1px solid var(--linha); counter-reset: ref; }
.artigo .referencias > li { padding: 0 0 0 2.1em; margin: 0 0 0.85em; border: 0; border-radius: 0; background: none; font-size: 0.8em; line-height: 1.6; color: var(--tinta-2); counter-increment: ref; }
.artigo .referencias > li:last-child { margin-bottom: 0; }
.artigo .referencias > li::before { content: counter(ref) "."; position: absolute; left: 0; top: 0; display: block; width: auto; height: auto; border-radius: 0; background: none; font-family: var(--f-display); font-style: italic; font-size: 1.05em; line-height: 1.5; color: var(--terra-ink); }
.artigo .referencias > li:hover { transform: none; }
.artigo .referencias a { font-weight: 500; word-break: break-word; box-shadow: none; text-decoration: underline; text-decoration-color: rgba(184, 105, 79, 0.45); text-underline-offset: 2px; }
.artigo h2#referencias { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }

/* Perguntas frequentes do artigo */
.artigo h2#perguntas-frequentes ~ h3 { margin-top: 1.6em; padding-left: 0.9em; border-left: 2px solid var(--terra); }

/* Fecho do artigo: autora + CTA */
.autora { display: grid; grid-template-columns: 76px 1fr; gap: 20px; align-items: start; margin-top: 56px; padding: 26px; border-radius: 24px; background: var(--areia-50); border: 1px solid var(--linha); }
.autora img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; }
.autora__rotulo { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--terra-ink); }
.autora__nome { margin-top: 4px; font-family: var(--f-display); font-size: 1.25rem; font-weight: 500; color: var(--petroleo); line-height: 1.3; }
.autora p { margin-top: 8px; font-size: 0.9rem; line-height: 1.7; }
.autora .link-seta { margin-top: 14px; }

.artigo-cta { position: relative; isolation: isolate; overflow: hidden; margin-top: 28px; padding: clamp(30px, 4vw, 44px); border-radius: 28px; background: var(--petroleo); color: var(--creme); }
.artigo-cta::before { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(184, 105, 79, 0.5); border-radius: 22px; pointer-events: none; }
.artigo-cta__marca { position: absolute; right: -30px; bottom: -40px; width: 200px; height: 200px; fill: var(--creme); opacity: 0.05; z-index: -1; }
.artigo-cta__frase { margin-top: 14px; max-width: 26ch; font-family: var(--f-display); font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.85rem); font-weight: 500; line-height: 1.25; }
.artigo-cta__frase em { font-style: italic; color: var(--terra-soft); }
.artigo-cta .btn { margin-top: 24px; }
.artigo-cta__nota { margin-top: 16px; font-size: 0.78rem; color: var(--nevoa); }

.continue { padding: var(--secao) 0; background: var(--areia-50); }
.continue__cabeca { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(36px, 4vw, 52px); }
.continue__grade { display: grid; gap: 24px; }
@media (min-width: 680px) { .continue__grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .continue__grade { grid-template-columns: repeat(3, 1fr); gap: 28px; } }

/* =============================================================================
   15. 404 · ANIMAÇÕES DE ENTRADA · MOVIMENTO REDUZIDO
   ========================================================================== */
.erro { position: relative; overflow: hidden; isolation: isolate; min-height: 88svh; display: grid; place-items: center; padding: calc(var(--topo-h) + 48px) 0 96px; text-align: center; }
.erro__num { font-family: var(--f-display); font-style: italic; font-size: clamp(6rem, 18vw, 11rem); line-height: 0.9; color: var(--terra); opacity: 0.22; }
.erro__fio { width: min(320px, 80%); margin: 10px auto 0; }
.erro h1 { margin: 26px auto 0; max-width: 18ch; font-family: var(--f-display); font-weight: 500; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1.15; color: var(--petroleo); text-wrap: balance; }
.erro p { margin: 18px auto 0; max-width: 32rem; }
.erro__acoes { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 30px; margin-top: 36px; }

/* Revelação ao rolar (o IntersectionObserver de site.js acrescenta .is-in) */
.anima .reveal:not(.is-in) { opacity: 0; transform: translateY(30px); }
.anima .reveal { transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--atraso, 0s); }
.anima .reveal-stagger:not(.is-in) > * { opacity: 0; transform: translateY(36px); }
.anima .reveal-stagger > * { transition: opacity 1s var(--ease), transform 1s var(--ease), box-shadow 0.7s var(--ease), border-color 0.7s var(--ease); transition-delay: calc(var(--i, 0) * 0.12s); }
.anima .reveal-stagger.is-in > * { transition-delay: calc(var(--i, 0) * 0.12s), calc(var(--i, 0) * 0.12s), 0s, 0s; }
.anima .reveal-stagger.is-in > *:hover { transition-delay: 0s; }
/* Rede de segurança: se o site.js não rodar, tudo aparece */
.revela-tudo .reveal, .revela-tudo .reveal-stagger > * { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .faixa__trilho { animation: none !important; }
  .ruido__frag > span { animation: none !important; }
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
}