/*
Theme Name: Vinicius Rocha
Theme URI: https://viniciusrochapsi.com.br/
Author: Rota Studio
Author URI: https://arotastudio.com.br/
Description: Tema do site de Vinicius Rocha, psicanalista online. Conversao fiel do site estatico viniciusrochapsi.com.br.
Version: 1.0.2
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: viniciusrochapsi
Tags: blog, one-column, custom-menu, translation-ready
*/

/* =========================================================
   Vinicius Rocha — Psicanalista online
   viniciusrochapsi.com.br
   ========================================================= */

:root {
  /* Marca */
  /* acento das secoes de fundo claro */
  --roxo: #9e4abd;
  --roxo-claro: #b467cf;
  --amarelo: #f6ba07;
  --amarelo-esc: #d9a106;
  --preto: #151f27;
  --cinza: #d9d9d9;

  /* Superfícies */
  --navy: #0f1a2b;
  --navy-esc: #0a1220;
  --branco: #ffffff;
  --claro: #f4f2ed;
  --texto-claro: rgba(255, 255, 255, 0.78);
  --texto-escuro: rgba(21, 31, 39, 0.72);

  /* Tipografia */
  --serif: "Petrona", Georgia, "Times New Roman", serif;
  --script: "Caveat", "Segoe Script", "Bradley Hand", cursive;
  --sans:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;

  /* Layout */
  /* 1248 = 1200px de conteudo + os 24px de gutter de cada lado */
  --container: 1248px;
  --gutter: 24px;
  --header-h: 96px;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
  /* evita o ajuste automatico de tamanho de fonte do Safari/Chrome mobile */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--branco);
  background-color: var(--navy);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
h1,
p {
  margin: 0;
}

/* destaques dentro dos paragrafos */
p strong {
  font-weight: 600;
  color: var(--preto);
}
.hero__text strong,
.cta__subtitulo strong,
.solucao__paragrafo strong,
.passo__texto strong {
  color: var(--branco);
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--amarelo);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 16px 34px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
  white-space: nowrap;
}

.btn--primary {
  background-color: var(--amarelo);
  color: var(--navy);
}
.btn--primary:hover {
  background-color: var(--amarelo-esc);
}

.btn--roxo {
  background-color: var(--roxo);
  color: var(--branco);
}
.btn--roxo:hover {
  background-color: var(--roxo-claro);
}

.btn--outline {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--branco);
}
.btn--outline:hover {
  background-color: var(--amarelo);
  border-color: var(--amarelo);
  color: var(--navy);
}

.btn--play {
  gap: 10px;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--branco);
}
.btn--play:hover {
  background-color: transparent;
  border-color: transparent;
  color: var(--amarelo);
}
.btn__play {
  width: 12px;
  height: 14px;
  flex: none;
}

/* icone do WhatsApp dentro dos botoes */
.btn__wa {
  width: 18px;
  height: 18px;
  flex: none;
  fill: currentColor;
  margin-right: 10px;
  margin-left: -4px;
}

/* o sprite so guarda os simbolos, nao ocupa espaco na pagina */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* =========================================================
   MODAL DE VÍDEO
   ========================================================= */
body.sem-scroll {
  overflow: hidden;
}

.modal[hidden] {
  display: none;
}
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal__fundo {
  position: absolute;
  inset: 0;
  background-color: rgba(5, 10, 20, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal__caixa {
  position: relative;
  /* a altura manda: assim a caixa nunca fica mais larga que o video */
  height: min(86vh, 760px);
  width: auto;
  max-width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 20px;
  overflow: hidden;
  background-color: transparent;
  box-shadow: 0 32px 64px -24px rgba(0, 0, 0, 0.9);
}
.modal__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.modal__fechar {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background-color: rgba(10, 18, 32, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal__fechar span {
  position: absolute;
  width: 16px;
  height: 1px;
  border-radius: 1px;
  background-color: var(--branco);
}
.modal__fechar span:nth-child(1) {
  transform: rotate(45deg);
}
.modal__fechar span:nth-child(2) {
  transform: rotate(-45deg);
}

/* =========================================================
   HEADER
   ========================================================= */
.header {
  /* sem fundo: flutua sobre a hero para nao cortar a foto */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: transparent;
}

.header__inner {
  height: var(--header-h);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}
.header__inner .logo {
  justify-self: start;
}
.header__inner .nav {
  justify-self: end;
}
.header__inner .header__actions {
  justify-self: end;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ---------- Logo (texto) ---------- */
.logo {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  line-height: 1.05;
}
.logo__icon {
  flex: none;
  width: 40px;
  height: 40px;
}
.logo__text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}
.logo__name {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.005em;
}
.logo__role {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amarelo);
  margin-top: 4px;
}
/* mesmo se o navegador criar um <a> automatico dentro do selo */
.logo__role a {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: none;
  pointer-events: none;
}

/* ---------- Navegação ---------- */
.nav {
  display: flex;
  align-items: center;
  /* sem o tracking largo, os itens precisam do proprio respiro */
  gap: 34px;
}

/* mesma tipografia dos paragrafos, so que menor */
.nav__link {
  position: relative;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: normal;
  text-transform: none;
  color: var(--texto-claro);
  padding: 6px 0;
  transition: color 0.25s ease;
}
.nav__link:hover {
  color: var(--branco);
}

.header__cta {
  margin-left: 4px;
  /* mesmo corpo dos itens do menu, porem em negrito */
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  text-indent: 0;
  padding: 12px 26px;
  background-color: transparent;
  border-color: var(--amarelo);
  color: var(--amarelo);
}
.header__cta:hover {
  background-color: var(--amarelo);
  border-color: var(--amarelo);
  color: var(--navy);
}

/* variacao so com o icone do WhatsApp */
.header__cta--icone {
  padding: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  text-indent: 0;
  letter-spacing: normal;
}
.header__cta-icone {
  width: 15px;
  height: 15px;
  flex: none;
  display: block;
  fill: currentColor;
  margin-right: 9px;
}
/* sozinho no botao redondo o icone nao precisa do respiro lateral */
.header__cta--icone .header__cta-icone {
  width: 16px;
  height: 16px;
  margin-right: 0;
}

/* ---------- Botão mobile ---------- */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 1px;
  border-radius: 2px;
  background-color: var(--branco);
  transition:
    transform 0.3s ease,
    height 0.3s ease,
    opacity 0.3s ease;
}
/* o X aberto mantem 2px */
.nav-toggle.is-open span {
  height: 2px;
}
.nav-toggle.is-open span:nth-child(1) {
  /* gap (5px) + altura da linha (2px) = 7px ate o centro */
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  /* a header saiu do fluxo; a hero reserva o espaco dela */
  padding-top: calc(var(--header-h) + 8px);
  padding-bottom: 0;
  --visual-h: calc(100svh - var(--header-h) - 8px);
  background:
    radial-gradient(
      1000px 700px at 78% 45%,
      rgba(26, 58, 102, 0.35),
      transparent 62%
    ),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-esc) 60%, #0c1526 100%);
  overflow: hidden;
}

/* Marca d'agua — espiral grande centralizada atras da foto */
.hero__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  /* leve giro: a ponta da espiral sobe e termina acima do h1 */
  transform: translate(-50%, -50%) rotate(26deg);
  width: min(1000px, 165%);
  max-width: none;
  aspect-ratio: 432 / 435;
  /* espiral dourada convertida em silhueta escura sobre o fundo */
  filter: brightness(0) saturate(100%);
  opacity: 0.22;
  /* atras da foto (z-index 3), na frente do fundo da secao */
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
  align-items: center;
  column-gap: 0;
}

/* ---------- Conteúdo ---------- */
.hero__content {
  position: relative;
  z-index: 3;
  max-width: 620px;
  align-self: center;
  padding-bottom: 0;
  /* a margem embaixo faz o bloco centralizado subir metade dela */
  margin-bottom: 48px;
}

.hero__eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amarelo);
  margin-bottom: 10px;
}

.hero__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.125rem, 3.5vw + 0.35rem, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin-bottom: 24px;
  text-wrap: pretty;
}
/* destaque manuscrito nos titulos, no espirito do rabisco da espiral */
.hero__title em,
.dor__titulo em,
.solucao__titulo em,
.depo__titulo em,
.faq__titulo em,
.faq__pergunta em,
.insta__titulo em,
.blog__titulo em,
.cta__titulo em {
  font-family: var(--script);
  font-style: normal;
  font-weight: 700;
  font-size: 1.28em;
  line-height: 0.85;
  letter-spacing: 0.005em;
  padding-right: 0.06em; /* compensa a inclinacao da cursiva */
  color: var(--amarelo);
}

/* superficies de fundo claro: roxo da marca, que contrasta melhor que o amarelo */
.dor__titulo em,
.blog__titulo em {
  color: var(--roxo);
}

/* no instagram o destaque acompanha o roxo da marca */
.insta__titulo em {
  color: var(--roxo);
}
.hero__text {
  font-size: clamp(1rem, 0.5vw + 0.85rem, 1.125rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--texto-claro);
  max-width: 58ch;
  margin-bottom: 34px;
}

.hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 32px;
}

/* ---------- Mídia ---------- */
.hero__media {
  position: relative;
  aspect-ratio: 616 / 808;
  width: 100%;
  max-width: 520px;
  margin-left: auto;
}

/* Camada visual — silhueta ocupando toda a altura da tela.
   Grid de uma célula: silhueta e foto empilhadas sem posicionamento absoluto. */
.hero__visual {
  position: relative;
  /* a arte sobe para dentro da faixa da header (a cabeca ainda passa longe
     do menu) e reserva um respiro fixo abaixo */
  --hero-photo-rise: 24px;
  --hero-photo-bottom: 30px;
  display: grid;
  grid-template: "media" var(--visual-h) / minmax(0, 1fr);
  align-self: center;
  pointer-events: none;
}

/* Arte da hero (silhueta + foto ja compostas na imagem) */
.hero__photo {
  position: relative;
  z-index: 3;
  grid-area: media;
  /* inteira, encostada no alto do espaco util e subindo sob a header */
  align-self: start;
  justify-self: center;
  margin-top: calc(var(--hero-photo-rise) * -1);
  height: calc(
    var(--visual-h) + var(--hero-photo-rise) - var(--hero-photo-bottom)
  );
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
}

/* =========================================================
   DOR — para quem é
   ========================================================= */
.dor {
  position: relative;
  padding: 112px 0 120px;
  background-color: var(--claro);
  color: var(--preto);
}

/* duas colunas: head fixa a esquerda, cards empilhados a direita */
.dor__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

.dor__head {
  position: sticky;
  top: 104px;
}

.dor__eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--roxo);
  margin-bottom: 10px;
}

.dor__titulo {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.9375rem, 2.45vw + 0.72rem, 3rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  text-wrap: pretty;
}

.dor__texto {
  font-size: clamp(1rem, 0.4vw + 0.9rem, 1.125rem);
  font-weight: 400;
  line-height: 1.7;
  color: var(--texto-escuro);
  max-width: 62ch;
  margin: 0;
}

.dor__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.dor__item {
  padding: 28px 28px 30px;
  border: 1px solid rgba(21, 31, 39, 0.1);
  border-radius: 18px;
  background-color: var(--branco);
}

.dor__item-titulo {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.375rem, 0.7vw + 1.2rem, 1.625rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.dor__item-titulo em {
  font-family: var(--script);
  font-style: normal;
  font-weight: 700;
  font-size: 1.2em;
  line-height: 0.85;
  letter-spacing: 0.005em;
  padding-right: 0.06em;
  color: var(--roxo);
}

.dor__item-texto {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--texto-escuro);
  margin: 0;
}

.dor__acoes {
  margin-top: 36px;
}


/* =========================================================
   SOLUÇÃO — como posso te ajudar
   ========================================================= */
.solucao {
  padding: 112px 0 120px;
  background-color: var(--navy);
}

.solucao__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: start;
  gap: 64px;
}
/* cards à esquerda, texto à direita (no mobile o texto volta a vir primeiro) */
.solucao__passos {
  order: -1;
}

/* texto fixo enquanto os cards rolam, como o head da secao "dores" */
.solucao__texto {
  position: sticky;
  top: 104px;
}

.solucao__eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amarelo);
  margin-bottom: 10px;
}

.solucao__titulo {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.9375rem, 2.45vw + 0.72rem, 3rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
  text-wrap: pretty;
}
.sobre__titulo em {
  font-family: var(--script);
  font-style: normal;
  font-weight: 700;
  font-size: 1.2em;
  line-height: 0.85;
  letter-spacing: 0.005em;
  padding-right: 0.06em;
  color: var(--roxo);
}

.solucao__paragrafo {
  font-size: clamp(1rem, 0.4vw + 0.9rem, 1.0625rem);
  font-weight: 300;
  line-height: 1.75;
  color: var(--texto-claro);
  margin: 0 0 20px;
  max-width: 58ch;
}

.solucao__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  margin-top: 34px;
}

.passos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.passo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  padding: 28px 28px 30px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background-color: rgba(255, 255, 255, 0.03);
}

.passo__num {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 0.9vw + 1.5rem, 2.125rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--amarelo);
}

/* mesma tipografia dos cartoes da secao "dores" */
.passo__titulo {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.375rem, 0.7vw + 1.2rem, 1.625rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}

.passo__titulo em {
  font-family: var(--script);
  font-style: normal;
  font-weight: 700;
  font-size: 1.2em;
  line-height: 0.85;
  letter-spacing: 0.005em;
  padding-right: 0.06em;
  color: var(--amarelo);
}

.passo__texto {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--texto-claro);
  margin: 0;
}

.faq__resposta strong {
  color: var(--branco);
}

/* =========================================================
   SOBRE MIM
   ========================================================= */
.sobre {
  position: relative;
  padding: 112px 0 120px;
  background-color: var(--claro);
  color: var(--preto);
  overflow: hidden;
}

.sobre__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  /* a coluna da foto acompanha a altura total do texto ao lado */
  align-items: stretch;
  gap: 48px;
}

/* Mesma composição da hero: silhueta atras, foto por inteiro na frente.
   As imagens sao absolutas para nao empurrarem a altura da coluna — quem manda
   na altura é o texto ao lado, e a foto ocupa esse espaco por inteiro. */
.sobre__visual {
  position: relative;
  min-height: 460px;
  pointer-events: none;
}

.sobre__shape,
.sobre__foto {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: auto;
  max-width: none;
}

.sobre__shape {
  height: 72%;
  /* posicionada um pouco acima do centro da foto, que ocupa a coluna inteira */
  bottom: auto;
  top: 42%;
  /* cabeça virada para a direita (espelhada em relação à hero) */
  transform: translate(-50%, -50%) scaleX(-1);
  z-index: 1;
}

.sobre__foto {
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  transform: translateX(calc(-50% + 26px));
  z-index: 2;
}

.sobre__eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--roxo);
  margin-bottom: 10px;
}

.sobre__titulo {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.9375rem, 2.45vw + 0.72rem, 3rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
  text-wrap: pretty;
}

.sobre__paragrafo {
  font-size: clamp(1rem, 0.4vw + 0.9rem, 1.0625rem);
  font-weight: 400;
  line-height: 1.75;
  color: var(--texto-escuro);
  margin: 0 0 20px;
  max-width: 60ch;
}
.sobre__paragrafo:last-child {
  margin-bottom: 0;
}

/* ---------- Diferenciais (carrossel horizontal) ---------- */
.dif {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(21, 31, 39, 0.16);
}

.dif__trilha {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline: 0;
  /* barra de rolagem nativa escondida: a navegação é pelos controles */
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.dif__trilha::-webkit-scrollbar {
  display: none;
}

.dif__item {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  background-color: transparent;
}

.dif__titulo {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.375rem, 0.7vw + 1.2rem, 1.625rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.dif__titulo em {
  font-family: var(--script);
  font-style: normal;
  font-weight: 700;
  font-size: 1.2em;
  line-height: 0.85;
  letter-spacing: 0.005em;
  padding-right: 0.06em;
  color: var(--roxo);
}

.dif__texto {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--texto-escuro);
  margin: 0;
}

.dif__controles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
}

.dif__pontos {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dif__ponto {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 999px;
  background-color: rgba(21, 31, 39, 0.2);
  transition:
    width 0.25s ease,
    background-color 0.25s ease;
}
.dif__ponto.is-ativo {
  width: 24px;
  background-color: var(--roxo);
}

.dif__setas {
  display: flex;
  gap: 18px;
}

.dif__seta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 0;
  color: var(--roxo);
  background-color: transparent;
  transition:
    color 0.25s ease,
    opacity 0.25s ease;
}
.dif__seta svg {
  width: 18px;
  height: 18px;
}
.dif__seta:hover {
  color: var(--preto);
}
.dif__seta[disabled] {
  opacity: 0.35;
  cursor: default;
}
.dif__seta[disabled]:hover {
  color: var(--roxo);
}

/* =========================================================
   DEPOIMENTOS
   ========================================================= */
.depo {
  padding: 112px 0 120px;
  background-color: var(--navy);
  /* cor sólida: a máscara de recorte precisa dela para o degradê do corte */
  --depo-card: #16233a;
}

.depo__head {
  max-width: 780px;
  margin-inline: auto;
  margin-bottom: 56px;
  text-align: center;
}

.depo__eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amarelo);
  margin-bottom: 10px;
}

.depo__titulo {
  max-width: 620px;
  margin: 0 auto;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.9375rem, 2.45vw + 0.72rem, 3rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

/* mansory: tres colunas independentes, cada uma empilhando seus cartoes.
   A coluna do centro vem primeiro no HTML (para abrir a lista no mobile) e
   e reposicionada pelo order no desktop. */
.depo__lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
}

.depo__coluna {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.depo__coluna--esq {
  order: 1;
}
.depo__coluna--centro {
  order: 2;
}
.depo__coluna--dir {
  order: 3;
}

.depo__item {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0;
  display: flow-root;
}

.depo__card {
  margin: 0;
  padding: 30px 28px 26px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background-color: var(--depo-card);
}

/* o sprite so guarda o desenho da estrela; nao ocupa espaco na pagina */
.depo__sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* avaliacao em cinco estrelas acima do depoimento */
.depo__estrelas {
  display: flex;
  gap: 5px;
  color: var(--amarelo);
  margin-bottom: 20px;
}

.depo__estrelas svg {
  width: 17px;
  height: 16px;
  flex: none;
}

.depo__texto {
  position: relative;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--texto-claro);
  overflow: hidden;
}

.depo__texto p {
  margin: 0 0 14px;
}
.depo__texto p:last-child {
  margin-bottom: 0;
}

/* estado cortado: 7 linhas visíveis e um esmaecido no fim */
.depo__texto.is-cortado {
  max-height: calc(1.7em * 7);
}
.depo__texto.is-cortado::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3.4em;
  background: linear-gradient(to bottom, rgba(22, 35, 58, 0), var(--depo-card));
  pointer-events: none;
}

.depo__mais {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--amarelo);
  border-bottom: 1px solid transparent;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}
.depo__mais:hover {
  border-bottom-color: var(--amarelo);
}

.depo__mais svg {
  width: 10px;
  height: 6px;
  flex: none;
  transition: transform 0.25s ease;
}
.depo__mais[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* =========================================================
   FAQ — dúvidas frequentes
   ========================================================= */
.faq {
  padding: 0;
  background-color: var(--branco);
}

/* caixa azul cheia: o texto passa a ser claro sobre o fundo escuro */
.faq__caixa {
  padding: 72px 64px 76px;
  border-radius: 28px;
  background-color: var(--navy);
  color: var(--branco);
}

.faq__head {
  max-width: 780px;
  margin: 0 auto 48px;
  text-align: center;
}

.faq__eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amarelo);
  margin-bottom: 10px;
}

.faq__titulo {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.9375rem, 2.45vw + 0.72rem, 3rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: pretty;
}

/* sao poucas perguntas: ficam lado a lado, uma por coluna */
.faq__lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
}

.faq__item {
  padding: 0 16px;
  text-align: center;
}

/* icone em circulo amarelo solido, centralizado acima da pergunta */
.faq__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border: 0;
  border-radius: 999px;
  background-color: var(--amarelo);
  color: var(--navy);
}

.faq__icone svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.faq__pergunta {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.4375rem;
  line-height: 1.3;
  margin: 0 0 12px;
}

/* o manuscrito e maior que a serifada: a pergunta ganha um respiro extra */
.faq__pergunta em {
  font-size: 1.2em;
  line-height: 1;
  color: var(--amarelo);
}

.faq__acoes {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

.faq__resposta {
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--texto-claro);
  margin: 0;
}

/* o botao sobre o azul segue o amarelo da marca */
.faq__acoes .btn--roxo {
  background-color: var(--amarelo);
  color: var(--navy);
}
.faq__acoes .btn--roxo:hover {
  background-color: var(--amarelo-esc);
  color: var(--navy);
}

/* =========================================================
   BLOG — últimos textos
   ========================================================= */
/* o seletor e preso ao <section> porque "blog" tambem e uma classe que o
   WordPress poe no <body> da pagina de posts, e a colisao pintava a pagina
   inteira de branco */
section.blog {
  padding: 112px 0 120px;
  background-color: var(--branco);
  color: var(--preto);
}

.blog__head {
  max-width: 780px;
  margin: 0 auto 56px;
  text-align: center;
}

.blog__eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--roxo);
  margin-bottom: 10px;
}

.blog__titulo {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.9375rem, 2.45vw + 0.72rem, 3rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: pretty;
}

.blog__intro {
  font-size: clamp(1rem, 0.4vw + 0.9rem, 1.0625rem);
  font-weight: 400;
  line-height: 1.7;
  color: var(--texto-escuro);
  max-width: 58ch;
  margin: 18px auto 0;
}

.blog__lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  column-gap: 32px;
  row-gap: 48px;
}

.blog__item {
  min-width: 0;
  display: flex;
}

/* sem moldura de cartao: o post e so a capa e o texto */
.blog__card {
  display: flex;
  width: 100%;
}

/* o post inteiro e clicavel: o <a> carrega o conteudo em coluna */
.blog__link {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* capa provisoria: area cinza com icone de imagem ate entrar a foto real */
.blog__capa {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 18px;
  background-color: rgba(21, 31, 39, 0.07);
}

.blog__capa-icone {
  width: 56px;
  height: 56px;
  fill: none;
  stroke: rgba(21, 31, 39, 0.32);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.blog__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 20px 0 0;
}

/* mesma pauta visual dos eyebrows das secoes */
.blog__data {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--roxo);
}

.blog__post-titulo {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.3125rem;
  line-height: 1.3;
  margin: 12px 0 0;
  text-wrap: pretty;
}

.blog__resumo {
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--texto-escuro);
  margin: 12px 0 0;
}

/* empurra o link para a base: os posts terminam alinhados */
.blog__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: auto 0 0;
  padding: 18px 0 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--roxo);
}
.blog__cta svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   CTA — agende sua sessão
   ========================================================= */
.cta {
  padding: 0 0 56px;
  background-color: var(--branco);
  /* respiro à direita da foto: 64px de margem + o deslocamento para a esquerda */
  --cta-espaco: 64px;
  /* respiro acima da cabeca: empurra o recorte para baixo dentro da coluna */
  --cta-foto-topo: 20px;
  /* espiral: a largura da moldura manda, entao ela nunca corta nas laterais;
     o respiro lateral e o quanto sobra de cada lado dentro da coluna */
  --cta-espiral-respiro: 24px;
  /* deslocamento para a esquerda; a largura desconta o dobro dele, para a
     espiral nunca encostar na borda da coluna */
  --cta-espiral-lado: 30px;
  --cta-espiral-sobe: 100px;
}

/* caixa escura sobre o fundo claro da seção */
.cta__caixa {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: stretch;
  background-color: var(--navy);
  color: var(--branco);
  border-radius: 28px;
  overflow: hidden;
}

/* a foto é um recorte em PNG: fica sobre o proprio fundo escuro da caixa.
   o mesmo respiro do texto à esquerda se repete na borda direita da foto */
.cta__visual {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 550px;
  padding-right: var(--cta-espaco);
  background-color: var(--navy);
  overflow: hidden;
}

/* silhueta da marca atras da foto: a moldura usa a coluna inteira, com um
   respiro proprio menor que o da foto, para a espiral poder crescer */
.cta__marca {
  position: absolute;
  inset: 0 var(--cta-espiral-respiro) 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

.cta__silhueta {
  /* mesma cor da espiral da hero: silhueta escura sobre o fundo navy */
  filter: brightness(0) saturate(100%);
  opacity: 0.22;
  /* a largura preenche a moldura e a altura acompanha; sem limite de altura,
     entao o topo da espiral pode sair da coluna e ser cortado */
  width: calc(100% - 2 * var(--cta-espiral-lado));
  height: auto;
  object-fit: contain;
  transform: translate(
    calc(var(--cta-espiral-lado) * -1),
    calc(var(--cta-espiral-sobe) * -1)
  );
}

/* a foto e um recorte que desce --cta-foto-topo dentro da coluna, abrindo
   respiro acima da cabeça; o pé da imagem é cortado pela propria caixa */
.cta__foto {
  position: absolute;
  inset: var(--cta-foto-topo) var(--cta-espaco) 0 0;
  /* img e elemento substituido: largura auto usaria o tamanho intrinseco e
     ignoraria o inset da direita, entao ela vai explicita */
  width: calc(100% - var(--cta-espaco));
  height: calc(100% - var(--cta-foto-topo));
  object-fit: cover;
  object-position: 50% 0;
  z-index: 2;
}

.cta__texto {
  padding: 72px 64px;
  align-self: center;
  text-align: center;
}

.cta__eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amarelo);
  margin-bottom: 10px;
}

/* mesma tipografia do titulo do hero */
.cta__titulo {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.125rem, 3.5vw + 0.35rem, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0 0 24px;
  text-wrap: pretty;
}

/* mesma tipografia do paragrafo do hero */
.cta__subtitulo {
  font-size: clamp(1rem, 0.5vw + 0.85rem, 1.125rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--texto-claro);
  max-width: 58ch;
  margin: 0 auto 34px;
}

.cta__acoes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* no desktop o texto do CTA fica alinhado a esquerda; empilhado ele volta
   a ser centralizado pela regra base acima */
@media (min-width: 901px) {
  .cta__texto {
    text-align: left;
  }
  .cta__subtitulo {
    margin-left: 0;
    margin-right: 0;
  }
  .cta__acoes {
    align-items: flex-start;
  }
}

/* =========================================================
   INSTAGRAM — posts em destaque
   ========================================================= */
.insta {
  /* o fecho inferior espelha o respiro entre a caixa do CTA e o rodape */
  padding: 112px 0 56px;
  background-color: var(--branco);
  color: var(--preto);
}

.insta__head {
  max-width: 780px;
  margin: 0 auto 56px;
  text-align: center;
}

.insta__eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--roxo);
  margin-bottom: 10px;
}

.insta__titulo {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.9375rem, 2.45vw + 0.72rem, 3rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: pretty;
}

.insta__lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.insta__item {
  min-width: 0;
}

/* o embed.js aplica largura/margem inline no blockquote e depois no iframe;
   sem !important o cartao estoura a coluna (min-width padrao de 326px) */
.insta__item .instagram-media {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width: 1200px) {
  .nav {
    gap: 26px;
  }
  /* limita a altura da silhueta pela largura disponível, para nao invadir o texto */
  .hero {
    --visual-h: min(calc(100svh - var(--header-h) - 8px), 52vw);
  }
  .hero__visual {
    --hero-photo-rise: 16px;
  }
}

@media (max-width: 900px) {
  :root {
    --header-h: 80px;
  }

  /* o .nav vira position:fixed no mobile e deixa de ocupar coluna do grid;
     sem isso sobrava o gap de 24px da terceira coluna vazia à direita */
  .header__inner {
    grid-template-columns: auto auto;
    justify-content: space-between;
    gap: 16px;
  }

  .nav-toggle {
    display: flex;
    /* puxa o botão para a borda do container: o traço tem 20px dentro de uma
       área de toque de 44px, então compensamos os 12px de folga óptica */
    margin-right: -12px;
  }

  .header__cta {
    display: none;
  }

  /* o justify-self: end do grid tambem vale para elementos posicionados e
     encolheria a caixa ate o conteudo; precisa vencer em especificidade */
  .header__inner .nav {
    justify-self: stretch;
  }

  /* menu boxed: cartão com o mesmo respiro do container nas duas laterais */
  .nav {
    position: absolute;
    top: calc(100% + 12px);
    left: var(--gutter);
    right: var(--gutter);
    bottom: auto;
    width: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px 20px 8px;
    background-color: rgba(10, 18, 32, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.85);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.25s ease,
      transform 0.25s ease,
      visibility 0.25s;
  }
  .nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .nav__link {
    padding: 13px 0;
    text-align: center;
    font-size: 0.9375rem;
    text-indent: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }
  .nav__link:last-child {
    border-bottom: 0;
  }

  .hero {
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* header flutuante: reserva a altura dela + o respiro original */
    padding-top: calc(var(--header-h) + 36px);
    /* respiro entre a foto e a secao seguinte */
    padding-bottom: 48px;
  }
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
  }
  .hero__content {
    max-width: 100%;
    margin-inline: auto;
    padding-bottom: 0;
    /* empilhado nao ha o que centralizar verticalmente */
    margin-bottom: 0;
  }

  /* empilhado: a arte vira um bloco abaixo do texto */
  .hero__visual {
    --visual-h: min(82vw, 520px);
    grid-template-rows: var(--visual-h);
    margin-top: 40px;
    margin-right: 0;
    /* sem recorte: a espiral sangra para fora da coluna e quem corta e a hero */
    overflow: visible;
  }
  /* no mobile a arte volta a aparecer por inteiro */
  .hero__photo {
    align-self: end;
    justify-self: center;
    height: var(--visual-h);
    margin-top: 0;
    object-position: bottom center;
  }

  .hero__text {
    margin-inline: auto;
  }
  .hero__actions {
    justify-content: center;
    margin-bottom: 0;
  }

  .dor {
    padding: 88px 0 96px;
  }
  /* empilhado: os filhos da head entram no mesmo fluxo da lista, para que o
     botao possa fechar a secao depois dos cards */
  .dor__inner {
    display: flex;
    flex-direction: column;
    /* vence o align-items: start da regra base, que no eixo transversal do
       flex column impedia os filhos de ocupar a largura toda */
    align-items: stretch;
    gap: 0;
    text-align: left;
  }
  .dor__head {
    display: contents;
  }
  .dor__eyebrow {
    align-self: start;
  }
  .dor__texto {
    margin-inline: 0;
    max-width: none;
    margin-bottom: 40px;
  }
  .dor__lista {
    order: 1;
  }
  .dor__acoes {
    order: 2;
    display: flex;
    margin-top: 32px;
  }
  .dor__acoes .btn {
    width: 100%;
    justify-content: center;
  }

  .solucao {
    padding: 88px 0 96px;
  }
  /* empilhado: os filhos do bloco de texto entram no mesmo fluxo dos cards,
     para que a lista de passos caiba logo abaixo do h2 */
  .solucao__inner {
    display: flex;
    flex-direction: column;
    gap: 0;
    text-align: left;
  }
  .solucao__texto {
    display: contents;
  }
  .solucao__paragrafo {
    order: 1;
    margin-inline: 0;
    max-width: none;
  }
  .solucao__acoes {
    order: 2;
    margin-top: 14px;
    justify-content: flex-start;
  }
  .solucao__passos {
    order: 3;
    margin: 34px 0 0;
  }

  .depo {
    padding: 88px 0 96px;
  }
  /* abaixo de 900px as tres colunas viram um fluxo unico em multicoluna:
     os cartoes se redistribuem sozinhos e o order deixa de valer */
  .depo__lista {
    display: block;
    columns: 2;
    column-gap: 20px;
  }
  .depo__coluna {
    display: block;
  }
  .depo__item {
    margin-bottom: 20px;
  }
  .depo__head {
    margin-bottom: 40px;
  }

  .sobre {
    padding: 88px 0 96px;
  }
  /* empilhado: os filhos do bloco de texto entram no mesmo fluxo da foto,
     para que ela caiba entre os paragrafos e o carrossel */
  .sobre__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    text-align: left;
  }
  .sobre__texto {
    display: contents;
  }
  .sobre__eyebrow {
    align-self: start;
  }
  .sobre__paragrafo {
    order: 1;
    margin-inline: 0;
    max-width: none;
  }
  /* no mobile a foto sai: o texto e o carrossel bastam para a secao */
  .sobre__visual {
    display: none;
  }
  .dif {
    order: 3;
    margin-top: 24px;
  }


  .passo {
    text-align: left;
  }

  .hero__watermark {
    width: min(106vw, 520px);
    /* empilhado, a espiral acompanha a foto: desce em relacao ao centro */
    top: calc(62% - 20px);
  }

  .faq {
    padding: 0;
  }
  .faq__caixa {
    padding: 56px 32px 60px;
  }
  .faq__head {
    margin-bottom: 36px;
  }
  .faq__lista {
    gap: 40px;
  }
  /* sao tres cartoes: em duas colunas sobraria um orfao, entao empilha */
  .faq__lista {
    grid-template-columns: minmax(0, 1fr);
  }
  .faq__pergunta {
    font-size: 1.1875rem;
  }

  section.blog {
    padding: 88px 0 96px;
  }
  .blog__head {
    margin-bottom: 40px;
  }
  /* mesma razao do FAQ: tres cartoes nao fecham duas colunas */
  .blog__lista {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
  .blog__item {
    width: 100%;
    max-width: 540px;
  }

  .insta {
    padding: 88px 0 28px;
  }
  .insta__head {
    margin-bottom: 40px;
  }

  /* creditos mais colados no fecho da pagina no mobile */
  .rodape {
    padding-bottom: 28px;
  }
  /* mesma razao do FAQ: tres posts nao fecham duas colunas */
  .insta__lista {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
  .insta__item {
    width: 100%;
    max-width: 540px;
  }

  /* CTA: texto acima, foto abaixo */
  .cta {
    padding: 0 0 56px;
  }
  .cta__caixa {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 22px;
  }
  /* quadrada como na referencia: cabe a espiral inteira atras da foto.
     empilhada a coluna e baixa, entao a espiral quase nao sobe e ganha limite
     de altura, em vez de sair cortada pelo topo */
  .cta__visual {
    min-height: 0;
    aspect-ratio: 5 / 6;
    padding-right: 0;
    order: 1;
    --cta-espaco: 0px;
    --cta-espiral-sobe: 0px;
    /* sem deslocamento lateral: quem centraliza a espiral e a propria moldura */
    --cta-espiral-lado: 0px;
    --cta-espiral-respiro: 0px;
  }
  /* a espiral encosta no topo da coluna, com um respiro; assim ela sobe o
     maximo possivel sem invadir a area do botao, que fica fora da moldura */
  .cta__marca {
    align-items: flex-start;
    padding-top: 14px;
  }
  .cta__silhueta {
    width: calc(100% - 32px);
    height: auto;
    max-height: calc(100% - 14px);
    transform: none;
  }
  .cta__marca,
  .cta__foto {
    right: 0;
  }
  .cta__texto {
    padding: 48px 32px 8px;
  }
  .cta__titulo {
    max-width: none;
  }
}

@media (max-width: 560px) {
  .logo__icon {
    width: 32px;
    height: 32px;
  }
  .logo__name {
    font-size: 1.25rem;
  }
  .logo__role {
    font-size: 0.6875rem;
  }

  .hero__title,
  .cta__titulo {
    font-size: clamp(1.875rem, 7.6vw, 2.5rem);
  }

  .dor__item {
    padding: 24px 22px 26px;
  }
  .passos {
    grid-template-columns: minmax(0, 1fr);
  }
  .passo {
    padding: 22px 20px 24px;
    gap: 14px;
  }
  .hero__visual {
    --visual-h: min(104vw, 460px);
    grid-template-rows: var(--visual-h);
    margin-top: 32px;
  }

  .hero__actions {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }


  .depo__lista {
    columns: 1;
  }
  .depo__card {
    padding: 26px 22px 24px;
  }

  .faq__caixa {
    padding: 44px 22px 48px;
  }
  .faq__item {
    padding: 0;
  }

  .cta__texto {
    padding: 40px 22px 8px;
  }
  .cta__acoes .btn {
    width: 100%;
  }
}

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

  .dif__trilha {
    scroll-behavior: auto;
  }
}

/* =========================================================
   Rodapé
   ========================================================= */
.rodape {
  padding: 0 0 56px;
  background-color: var(--branco);
}

.rodape__credito {
  margin: 0;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--texto-escuro);
}

.rodape__credito a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(15, 26, 43, 0.45);
  transition: opacity 0.2s ease;
}

.rodape__credito a:hover,
.rodape__credito a:focus-visible {
  opacity: 0.65;
}

/* =========================================================
   BLOG — página de listagem (blog.html)
   ========================================================= */

/* hero da pagina de blog: mesma superficie da home, sem a foto.
   o conteudo ocupa a largura toda e a altura acompanha o texto;
   sem a foto a direita, o brilho do fundo volta para o centro */
.hero--blog {
  min-height: 0;
  padding-top: calc(var(--header-h) + 72px);
  padding-bottom: 96px;
  background:
    radial-gradient(
      1000px 700px at 50% 50%,
      rgba(26, 58, 102, 0.35),
      transparent 62%
    ),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-esc) 60%, #0c1526 100%);
}

.hero--blog .hero__inner {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}

.hero--blog .hero__content {
  max-width: 1000px;
  margin-bottom: 0;
}

.hero--blog .hero__text {
  margin-inline: auto;
}

/* sem foto e sem espiral: o titulo cabe em duas linhas na largura toda */
.hero--blog .hero__title {
  font-size: clamp(2rem, 3vw + 0.4rem, 3.25rem);
  text-wrap: balance;
}

/* lista completa dos posts: mesma pauta da secao da home */
.blog--pagina {
  /* respiro largo abaixo do ultimo post, antes da CTA */
  padding: 96px 0 136px;
}

/* mesma grade da home, so com mais respiro entre as linhas */
.blog--pagina .blog__lista {
  row-gap: 56px;
}

/* botao "ver todos" no fim da secao de blog da home */
.blog__acoes {
  display: flex;
  justify-content: center;
  margin-top: 56px;
}

@media (max-width: 900px) {
  .hero--blog {
    padding-top: calc(var(--header-h) + 48px);
    padding-bottom: 72px;
  }
  .blog--pagina {
    padding: 72px 0 104px;
  }
}

@media (max-width: 900px) {
  .blog__acoes {
    margin-top: 40px;
  }
  .blog__acoes .btn {
    width: 100%;
    justify-content: center;
  }
}

/* =========================================================
   POST — página do artigo (single.html)
   ========================================================= */

/* hero do post: mesma superficie escura da home, sem a foto.
   o titulo fica centralizado na tela e o resumo logo abaixo */
.hero--post {
  min-height: 0;
  padding-top: calc(var(--header-h) + 84px);
  padding-bottom: 100px;
  /* sem a foto, o brilho radial sai de tras dela e vai para o meio da tela */
  background:
    radial-gradient(
      1000px 700px at 50% 50%,
      rgba(26, 58, 102, 0.35),
      transparent 62%
    ),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-esc) 60%, #0c1526 100%);
}

.hero--post .hero__inner {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}

.hero--post .hero__content {
  max-width: 880px;
  margin-bottom: 0;
}

.hero--post .hero__title {
  font-size: clamp(2rem, 3vw + 0.5rem, 3.25rem);
  line-height: 1.1;
  margin-bottom: 22px;
}

.hero--post .hero__text {
  max-width: 62ch;
  margin-inline: auto;
  margin-bottom: 0;
}

/* ---------- Corpo do artigo ---------- */
.post {
  padding: 96px 0 104px;
  background-color: var(--branco);
  color: var(--preto);
}

/* coluna estreita: a medida de linha e o que sustenta a leitura longa */
.post__conteudo {
  max-width: 720px;
  margin-inline: auto;
}

.post__conteudo > p {
  font-size: clamp(1rem, 0.35vw + 0.93rem, 1.0625rem);
  font-weight: 400;
  line-height: 1.85;
  color: var(--texto-escuro);
  margin: 0 0 26px;
}

/* primeiro paragrafo um pouco maior, como entrada do texto */
.post__conteudo > p.post__abertura {
  font-size: clamp(1.0625rem, 0.5vw + 0.95rem, 1.1875rem);
  color: rgba(21, 31, 39, 0.86);
}

.post__conteudo h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.3vw + 1.1rem, 1.875rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 56px 0 18px;
  text-wrap: pretty;
}

.post__conteudo h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.35;
  margin: 36px 0 12px;
}

.post__conteudo a {
  color: var(--roxo);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.post__conteudo a:hover {
  color: var(--roxo-claro);
}

/* citacao de apoio: filete roxo e o mesmo serif dos titulos */
.post__destaque {
  margin: 40px 0;
  padding: 4px 0 4px 26px;
  border-left: 3px solid var(--roxo);
  font-family: var(--serif);
  font-size: clamp(1.125rem, 0.6vw + 1rem, 1.3125rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--preto);
}
.post__destaque p {
  margin: 0;
}

.post__lista {
  margin: 0 0 26px;
  display: grid;
  gap: 14px;
}

.post__lista li {
  position: relative;
  padding-left: 26px;
  font-size: clamp(1rem, 0.35vw + 0.93rem, 1.0625rem);
  line-height: 1.75;
  color: var(--texto-escuro);
}

/* marcador proprio: circulo roxo alinhado a primeira linha */
.post__lista li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--roxo);
}

@media (max-width: 900px) {
  .hero--post {
    padding-top: calc(var(--header-h) + 48px);
    padding-bottom: 72px;
  }
  .post {
    padding: 72px 0 80px;
  }
  .post__conteudo h2 {
    margin-top: 44px;
  }
}

/* =========================================================
   Ajustes do WordPress
   O conteudo dos posts passa a ser escrito no editor, entao as
   classes que o WordPress gera recebem aqui o mesmo visual das
   classes usadas no site original.
   ========================================================= */

/* capa real do post, quando existe imagem destacada */
.blog__capa-imagem {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* listas escritas no editor = .post__lista */
.post__conteudo ul,
.post__conteudo ol {
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 14px;
  list-style: none;
}

.post__conteudo ul li,
.post__conteudo ol li {
  position: relative;
  padding-left: 26px;
  font-size: clamp(1rem, 0.35vw + 0.93rem, 1.0625rem);
  line-height: 1.75;
  color: var(--texto-escuro);
}

.post__conteudo ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--roxo);
}

/* na lista numerada o marcador e o proprio numero */
.post__conteudo ol {
  counter-reset: vr-item;
}
.post__conteudo ol li {
  counter-increment: vr-item;
}
.post__conteudo ol li::before {
  content: counter(vr-item) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
  color: var(--roxo);
}

/* citacoes do editor = .post__destaque */
.post__conteudo blockquote {
  margin: 40px 0;
  padding: 4px 0 4px 26px;
  border-left: 3px solid var(--roxo);
  font-family: var(--serif);
  font-size: clamp(1.125rem, 0.6vw + 1rem, 1.3125rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--preto);
}
.post__conteudo blockquote p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
.post__conteudo blockquote cite {
  display: block;
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-style: normal;
  color: var(--texto-escuro);
}

/* h4 a h6 seguem a mesma pauta dos titulos internos */
.post__conteudo h4,
.post__conteudo h5,
.post__conteudo h6 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.35;
  margin: 32px 0 10px;
}

/* imagens, figuras e legendas */
.post__conteudo img,
.post__conteudo iframe,
.post__conteudo video {
  max-width: 100%;
  height: auto;
  border-radius: 18px;
}

.post__conteudo figure {
  margin: 40px 0;
}

.post__conteudo figcaption,
.post__conteudo .wp-caption-text {
  margin-top: 10px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--texto-escuro);
}

.post__conteudo hr,
.post__conteudo .wp-block-separator {
  margin: 48px 0;
  border: 0;
  border-top: 1px solid rgba(21, 31, 39, 0.12);
}

.post__conteudo table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 26px;
  font-size: 0.9375rem;
  color: var(--texto-escuro);
}
.post__conteudo th,
.post__conteudo td {
  padding: 10px 12px;
  border: 1px solid rgba(21, 31, 39, 0.12);
  text-align: left;
}
.post__conteudo th {
  color: var(--preto);
  font-weight: 600;
}

.post__conteudo pre,
.post__conteudo code {
  font-size: 0.9375rem;
}
.post__conteudo pre {
  overflow-x: auto;
  padding: 18px 20px;
  border-radius: 14px;
  background-color: rgba(21, 31, 39, 0.06);
}

.post__paginas {
  margin: 40px 0 0;
  font-size: 0.9375rem;
  color: var(--texto-escuro);
}
.post__paginas a {
  color: var(--roxo);
}

/* alinhamentos do editor */
.post__conteudo .alignleft {
  float: left;
  margin: 6px 26px 20px 0;
}
.post__conteudo .alignright {
  float: right;
  margin: 6px 0 20px 26px;
}
.post__conteudo .aligncenter {
  display: block;
  margin-inline: auto;
}
.post__conteudo .alignwide,
.post__conteudo .alignfull {
  max-width: 100%;
}
.post__conteudo::after {
  content: "";
  display: block;
  clear: both;
}

@media (max-width: 700px) {
  .post__conteudo .alignleft,
  .post__conteudo .alignright {
    float: none;
    margin: 26px 0;
  }
}

/* utilitarios que o WordPress espera encontrar no tema */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  z-index: 200;
  top: 8px;
  left: 8px;
  width: auto;
  height: auto;
  padding: 12px 20px;
  clip: auto;
  border-radius: 999px;
  background-color: var(--branco);
  color: var(--preto);
}

/* a barra de administracao nao pode cobrir o cabecalho */
.admin-bar .header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .header {
    top: 46px;
  }
}