/* ==========================================================================
   Sheila Tex · psicóloga TCC e neuropsicóloga
   Nasceu do protótipo do lote psicologos-sao-paulo; esta versão já é dela.

   Paleta lida do pixel do cartão de visita que ela mandou, não escolhida:
     campo  #E6E5E1  fundo do cartão (mediana do centro e do verso)
     ouro   #A4885C  traço do "Sheila Tex" e do cérebro, núcleo do traço
     rosa   #B08B8E  "NEUROPSICÓLOGA" e "CRP", núcleo do traço
     cinza  #605F63  texto de contato e QR do verso
   O ouro e o rosa do cartão são claros demais para texto (2,7:1 e 2,4:1
   no campo). Ficam no logo, no fio e na aquarela; o texto usa os mesmos
   matizes escurecidos, por conta:

     tinta    #353336  título              9,93:1 campo, 11,28 papel
     corpo    #4A474A  texto corrido       7,27:1 campo
     mudo     #625E62  texto de apoio      5,05:1 campo
     rosa     #84505A  rótulo, ênfase,     5,09:1 campo; branco sobre ele
                       botão               6,41:1
     ouro-esc #7B6645  ícone               4,35:1 campo, 4,94 papel
     ouro     #A4885C  só fio e logo, só sobre papel ou branco (3,03:1)

   Forma: 10px em toda caixa, foto e botão. Círculo só em controle de ícone.
   Assinatura: a CORDA do logo (o equilibrista entre o cérebro e o
   coração). É o fio de ouro que liga os passos, com o do meio mais baixo,
   e o emblema inteiro abre a seção de abordagem, com a neuropsicologia
   embaixo do cérebro e a TCC embaixo do coração.
   Aquarela: a mancha rosa do cartão, em gradiente, atrás do retrato e
   no contato.
   ========================================================================== */
:root {
  --papel: #F4F3F0;
  --campo: #E6E5E1;
  --branco: #FBFBF9;
  --tinta: #353336;
  --corpo: #4A474A;
  --mudo: #625E62;
  --rosa: #84505A;
  --rosa-forte: #6E414A;
  --rosa-claro: #B08B8E;
  --aquarela: 214 178 176;
  --ouro: #A4885C;
  --ouro-esc: #7B6645;
  --linha: rgb(53 51 54 / .14);
  --contorno: rgb(53 51 54 / .22);
  --raio: 10px;
  --titulo: 'Urbanist', system-ui, sans-serif;
  --texto: 'Urbanist', system-ui, sans-serif;
  --lado: clamp(20px, 4vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--papel); color: var(--corpo); font: 400 17.5px/1.7 var(--texto); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 300; color: var(--tinta); margin: 0; letter-spacing: -0.01em; }
h3 { font-weight: 500; line-height: 1.25; }
h2 em, .abertura em { font-style: normal; color: var(--rosa); }
p { margin: 0; }
.wrap { max-width: 1240px; margin-inline: auto; padding-inline: var(--lado); }
i[class^="ph"] { line-height: 1; }
:focus-visible { outline: 2px solid var(--rosa); outline-offset: 3px; }
/* rótulo em caixa alta espaçada, como "PSICÓLOGA TCC" no cartão */
.rot { font: 500 13.5px/1.35 var(--texto); letter-spacing: .16em; text-transform: uppercase; color: var(--rosa); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 26px; border-radius: var(--raio); border: 1px solid transparent; cursor: pointer;
  font: 600 15.5px/1.2 var(--texto); letter-spacing: .02em; text-decoration: none; white-space: nowrap;
  transition: transform .2s ease, background-color .25s ease, border-color .25s ease, color .25s ease;
}
.btn i { font-size: 20px; }
.btn:active { transform: translateY(1px); }
.btn-rosa { color: #FFFFFF; background: var(--rosa); }
.btn-contorno { color: var(--tinta); background: transparent; border-color: var(--tinta); }
@media (hover: hover) {
  .btn-rosa:hover { background: var(--rosa-forte); }
  .btn-contorno:hover { background: var(--tinta); color: var(--papel); }
}
.link { display: inline-flex; align-items: center; gap: 6px; font: 600 15.5px/1.2 var(--texto); color: var(--tinta); text-decoration: underline; text-decoration-color: var(--ouro); text-underline-offset: 7px; }
@media (hover: hover) { .link:hover { text-decoration-color: currentColor; } }

/* ---------- barra opaca desde o topo (lição da Tatiana: foto animada passa
   por cima de barra transparente no Safari do iPhone) ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 30; background: rgb(244 243 240 / .96); transform: translateZ(0); transition: box-shadow .35s ease; }
.nav.solida { box-shadow: 0 1px 0 var(--linha); }
main { position: relative; z-index: 1; isolation: isolate; }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; }
.marca { display: flex; align-items: center; gap: 14px; text-decoration: none; min-width: 0; }
.marca-sinal { width: 78px; height: auto; flex: none; }
.marca-txt { display: grid; min-width: 0; }
.marca-txt strong { font: 500 19px/1.15 var(--titulo); color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marca-txt small { font: 500 12.5px/1.3 var(--texto); letter-spacing: .06em; color: var(--mudo); white-space: nowrap; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { font: 500 15.5px/1 var(--texto); white-space: nowrap; text-decoration: none; color: var(--corpo); transition: color .2s ease; }
@media (hover: hover) { .nav-links a:hover { color: var(--rosa); } }
.nav .btn { min-height: 44px; padding: 10px 18px; font-size: 14.5px; }

/* ---------- topo: assinatura dela à esquerda, retrato à direita ---------- */
.hero { position: relative; overflow: hidden; padding: 116px 0 clamp(56px, 7vw, 100px); background: var(--papel); }
.hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(36px, 6vw, 96px); align-items: center; min-height: min(calc(100svh - 200px), 720px); }
.hero-emblema { width: clamp(180px, 22vw, 260px); }
.manchete { margin-top: clamp(14px, 2vw, 22px); }
.manchete img { width: clamp(260px, 34vw, 440px); }
.hero-tit { margin-top: 18px; font: 400 clamp(14px, 1.2vw, 16px)/1.55 var(--texto); letter-spacing: .2em; text-transform: uppercase; color: var(--rosa); }
.hero-frase { margin-top: 22px; max-width: 34ch; font: 300 clamp(20px, 1.8vw, 25px)/1.45 var(--titulo); color: var(--corpo); }
.hero-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }

.retrato { margin: 0; justify-self: end; width: 100%; max-width: 470px; position: relative; }
/* a aquarela rosa do cartão, atrás da foto e saindo pela borda */
.retrato::before { content: ''; position: absolute; inset: -14% -18% -10% -22%; z-index: -1; pointer-events: none; background:
  radial-gradient(38% 30% at 22% 26%, rgb(var(--aquarela) / .55), transparent 70%),
  radial-gradient(34% 40% at 80% 64%, rgb(var(--aquarela) / .5), transparent 72%),
  radial-gradient(30% 26% at 36% 88%, rgb(var(--aquarela) / .38), transparent 70%); filter: blur(14px); }
.retrato img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; object-position: 50% 30%; border-radius: var(--raio); box-shadow: 0 34px 70px rgb(84 70 66 / .18); }

/* ---------- abertura e sobre ---------- */
.sobre { background: var(--branco); padding-block: clamp(80px, 10vw, 136px); }
.abertura { max-width: 22ch; font: 300 clamp(34px, 4.4vw, 64px)/1.12 var(--titulo); letter-spacing: -0.02em; color: var(--tinta); }
.sobre-in { margin-top: clamp(36px, 4vw, 56px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px clamp(32px, 5vw, 80px); max-width: 1000px; margin-left: auto; }
.sobre-txt p + p { margin-top: 14px; }
.destaques { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); border-top: 1px solid var(--linha); padding-top: clamp(28px, 3vw, 40px); }
.destaque { display: flex; flex-direction: column; gap: 14px; }
.destaque > i { font-size: 30px; color: var(--ouro-esc); }
.destaque strong { display: block; font: 500 21px/1.25 var(--titulo); color: var(--tinta); }
.destaque p { margin-top: 6px; font-size: 16px; color: var(--mudo); }

/* ---------- temas: lista em duas colunas ---------- */
.temas-sec { padding-block: clamp(80px, 10vw, 136px); }
.cab { max-width: 720px; }
.cab .rot + h2 { margin-top: 14px; }
.cab h2, .perfil-txt h2, .passos-cab h2, .contato-info h2, .abordagem-cab h2 { font-size: clamp(34px, 3.8vw, 54px); line-height: 1.08; letter-spacing: -0.02em; }
.cab > p:not(.rot) { margin-top: 16px; color: var(--mudo); }
.temas { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 80px); }
.tema { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 16px; align-items: start; padding: 26px 0; border-top: 1px solid var(--linha); text-decoration: none; transition: padding .4s cubic-bezier(.16, 1, .3, 1); }
.tema h3 { font-size: clamp(23px, 2vw, 28px); font-weight: 400; transition: color .3s ease; }
.tema p { margin-top: 8px; color: var(--mudo); font-size: 16.5px; }
.tema-seta { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--contorno); color: var(--tinta); font-size: 18px; transition: background-color .3s ease, color .3s ease, transform .4s cubic-bezier(.16, 1, .3, 1); }
@media (hover: hover) {
  .tema:hover { padding-left: 8px; }
  .tema:hover h3 { color: var(--rosa); }
  .tema:hover .tema-seta { background: var(--rosa); color: #FFFFFF; border-color: transparent; transform: rotate(45deg); }
}

/* ---------- abordagem: o emblema dela, com cada frente embaixo da sua ponta ---------- */
.abordagem-sec { background: var(--campo); padding-block: clamp(80px, 10vw, 136px); }
.abordagem-cab { text-align: center; max-width: 720px; margin-inline: auto; }
.abordagem-cab p { margin-top: 16px; color: var(--mudo); }
.abordagem-emblema { width: min(100%, 620px); margin: clamp(36px, 5vw, 56px) auto 0; }
.abordagem-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 8vw, 160px); max-width: 980px; margin: clamp(20px, 3vw, 32px) auto 0; }
.abordagem-lista article { border-top: 1px solid var(--contorno); padding-top: 22px; }
.abordagem-lista article:last-child { text-align: right; }
.abordagem-lista article:last-child p { margin-left: auto; }
.abordagem-lista .rot { font-size: 12.5px; }
.abordagem-lista h3 { margin-top: 10px; font-size: clamp(24px, 2.2vw, 30px); font-weight: 400; }
.abordagem-lista p:not(.rot) { margin-top: 10px; max-width: 42ch; }

/* ---------- perfil ---------- */
.perfil-sec { background: var(--branco); padding-block: clamp(80px, 10vw, 136px); }
.perfil-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.perfil-foto { position: relative; max-width: 420px; }
.perfil-foto img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--raio); }
.perfil-txt .rot + h2 { margin-top: 14px; }
.perfil-reg { margin-top: 10px; font: 500 15px/1.5 var(--texto); letter-spacing: .1em; text-transform: uppercase; color: var(--rosa); }
.perfil-dados { margin: 28px 0 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.perfil-dados div { padding: 16px 0; border-top: 1px solid var(--linha); }
.perfil-dados dt { font: 500 12.5px/1.3 var(--texto); letter-spacing: .12em; text-transform: uppercase; color: var(--mudo); }
.perfil-dados dd { margin: 6px 0 0; font: 400 19px/1.35 var(--titulo); color: var(--tinta); overflow-wrap: anywhere; }
.perfil-dados a { color: var(--tinta); text-decoration-color: var(--ouro); text-underline-offset: 5px; }

/* ---------- passos: a corda do logo liga os três ---------- */
.passos-sec { padding-block: clamp(80px, 10vw, 136px); }
.passos-cab { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 16px clamp(32px, 5vw, 80px); align-items: start; }
.passos-cab > :not(.esperar) { grid-column: 1; }
.passos-cab p { margin-top: 18px; max-width: 44ch; color: var(--mudo); }
.esperar { grid-column: 2; grid-row: 1; padding: 26px 28px; background: var(--branco); border-radius: var(--raio); border: 1px solid var(--linha); }
.esperar h3 { font-size: 21px; }
.esperar ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.esperar li { display: grid; grid-template-columns: 26px minmax(0, 1fr); font-size: 16px; }
.esperar li i { color: var(--ouro-esc); margin-top: 4px; }
.passos { --fio: 1; --cai: 30px; --vao: clamp(24px, 4vw, 56px); list-style: none; margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vao); position: relative; }
.js-mov .passos { --fio: 0; }
/* a corda: curva de ouro de centro a centro do primeiro e do último número;
   o passo do meio pousa no ponto mais baixo dela */
.corda-item { position: absolute; inset: 0; pointer-events: none; }
/* SVG absoluto não estica entre left e right: a largura vai escrita, duas colunas e dois vãos */
.corda { position: absolute; left: 26px; top: 26px; width: calc((100% - 2 * var(--vao)) * 2 / 3 + 2 * var(--vao)); height: calc(var(--cai) * 2); overflow: visible; pointer-events: none; }
.corda path { fill: none; stroke: var(--ouro); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
/* a corda se desenha da esquerda para a direita. Por recorte, e não por
   stroke-dasharray: com non-scaling-stroke o Chrome erra a conta do traço
   e a corda sai em pedaços */
.corda.fio { clip-path: inset(-4px calc((1 - var(--fio)) * 100%) -4px 0); }
.corda.base path { stroke: var(--linha); }
.passo { position: relative; z-index: 1; }
.passo:nth-child(3) { margin-top: var(--cai); }
.passo-n { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--papel); border: 1px solid var(--ouro); color: var(--ouro-esc); font: 600 15px/1 var(--texto); }
.passo h3 { margin-top: 22px; font-size: 23px; }
.passo p { margin-top: 8px; color: var(--mudo); max-width: 34ch; }

/* ---------- onde ---------- */
.onde-sec { background: var(--branco); padding-block: clamp(80px, 10vw, 136px); }
.modos { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; margin-top: clamp(32px, 4vw, 48px); }
.modo { background: var(--papel); border-radius: var(--raio); overflow: hidden; display: flex; flex-direction: column; }
.modo-txt { padding: clamp(26px, 3vw, 38px); }
.tema-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--branco); color: var(--ouro-esc); font-size: 24px; }
.modo h3 { margin-top: 16px; font-size: 26px; }
.modo-txt p { margin-top: 8px; max-width: 46ch; }
.modo .link { margin-top: 16px; }
.modo-lista { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.modo-lista li { padding-left: 22px; position: relative; font-size: 16px; }
.modo-lista li::before { content: ''; position: absolute; left: 0; top: .78em; width: 10px; height: 1px; background: var(--ouro-esc); }
.mapa { margin-top: auto; height: 300px; }
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.4); }

/* ---------- conteúdos do Instagram ---------- */
.conteudos-sec { padding-block: clamp(80px, 10vw, 136px); }
.conteudos { margin-top: clamp(32px, 4vw, 48px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.conteudo { display: flex; flex-direction: column; text-decoration: none; }
.conteudo-foto { display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--raio); background: var(--campo); }
.conteudo-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
@media (hover: hover) { .conteudo:hover .conteudo-foto img { transform: scale(1.05); } }
.conteudo-txt { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; }
.conteudo strong { font: 400 21px/1.3 var(--titulo); color: var(--tinta); }
.conteudo-ler { font: 600 14.5px/1 var(--texto); color: var(--rosa); display: inline-flex; gap: 6px; align-items: center; }
.conteudos-sec .wrap > .btn { margin-top: 40px; }

/* ---------- dúvidas: coluna central ---------- */
.faq-sec { background: var(--campo); padding-block: clamp(80px, 10vw, 136px); }
.faq-in { max-width: 860px; }
.faq-in .cab { text-align: center; margin-inline: auto; }
.faq { margin-top: 40px; }
.faq details { border-bottom: 1px solid var(--contorno); }
.faq details:first-child { border-top: 1px solid var(--contorno); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 4px; font: 400 clamp(19px, 1.6vw, 22px)/1.35 var(--titulo); color: var(--tinta); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--contorno); font-size: 16px; transition: transform .3s ease, background-color .3s ease; }
.faq details[open] summary i { transform: rotate(45deg); background: var(--branco); }
.faq details p { padding: 0 4px 26px; max-width: 64ch; }

/* ---------- contato: campo claro com a aquarela ---------- */
.contato-sec { background: var(--papel); padding-block: clamp(80px, 10vw, 136px); position: relative; overflow: hidden; }
/* a mancha cabe inteira dentro da seção: o gradiente some antes da borda, e nada sai cortado */
.contato-sec::before { content: ''; position: absolute; inset: 0 auto 0 -10vw; width: 62vw; pointer-events: none; background:
  radial-gradient(34% 30% at 42% 46%, rgb(var(--aquarela) / .42), transparent 72%),
  radial-gradient(24% 26% at 62% 66%, rgb(var(--aquarela) / .32), transparent 70%); filter: blur(18px); }
.contato-in { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.contato-info > p { margin-top: 18px; max-width: 46ch; }
.contato-lista { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 18px; }
.contato-lista li { display: grid; grid-template-columns: 34px minmax(0, 1fr); padding-top: 16px; border-top: 1px solid var(--linha); overflow-wrap: anywhere; }
.contato-lista i { font-size: 22px; color: var(--ouro-esc); }
.contato-lista strong { display: block; font: 600 15px/1.3 var(--texto); color: var(--tinta); }
.contato-lista a { color: var(--tinta); text-decoration-color: var(--ouro); text-underline-offset: 5px; }
.form { background: var(--branco); border-radius: var(--raio); border: 1px solid var(--linha); padding: clamp(26px, 3vw, 40px); display: grid; gap: 16px; color: var(--corpo); box-shadow: 0 30px 60px rgb(84 70 66 / .08); }
.form h3 { font-size: 26px; }
.form-sub { font-size: 15px; color: var(--mudo); margin-top: -6px; }
.form label { display: grid; gap: 6px; font: 600 14.5px/1.3 var(--texto); color: var(--tinta); }
.form label span { font-weight: 500; color: var(--mudo); }
.form input, .form select, .form textarea { width: 100%; font: 400 16px/1.5 var(--texto); color: var(--tinta); background: var(--papel); border: 1px solid #8A868A; border-radius: var(--raio); padding: 12px 14px; transition: border-color .2s ease, box-shadow .2s ease; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--rosa); box-shadow: 0 0 0 3px rgb(132 80 90 / .18); }
.form textarea { resize: vertical; }
.form .btn { margin-top: 6px; width: 100%; }

/* ---------- rodapé ---------- */
.rodape { background: var(--campo); color: var(--corpo); padding-block: clamp(56px, 7vw, 88px) 36px; font-size: 15.5px; }
.rodape-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; padding-bottom: 36px; border-bottom: 1px solid var(--contorno); }
.rodape-marca { display: flex; align-items: center; gap: 20px; }
.rodape-marca img { width: 150px; }
.rodape-marca span { display: block; color: var(--mudo); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
.rodape-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding-block: 36px; border-bottom: 1px solid var(--contorno); }
.rodape-cols h3 { font: 600 13px/1.3 var(--texto); letter-spacing: .16em; text-transform: uppercase; color: var(--rosa); }
.rodape-cols ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.rodape-cols li { overflow-wrap: anywhere; }
.rodape-cols a { color: var(--tinta); }
.rodape-cvv { display: flex; align-items: center; gap: 10px; padding-block: 24px; border-bottom: 1px solid var(--contorno); }
.rodape-cvv i { color: var(--ouro-esc); font-size: 20px; }
.rodape-cvv a { color: var(--tinta); font-weight: 700; }
.rodape-fim { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 32px; padding-top: 22px; font-size: 14px; color: var(--mudo); }
.rodape-fim a { color: var(--tinta); }

/* ---------- botão fixo do WhatsApp, só no celular ---------- */
.zap-fixo { position: fixed; right: 16px; bottom: 16px; z-index: 40; width: 58px; height: 58px; border-radius: 50%; display: none; place-items: center; color: #FFFFFF; background: var(--rosa); font-size: 28px; text-decoration: none; box-shadow: 0 10px 28px rgb(84 50 58 / .32); opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; transition: opacity .3s ease, transform .3s ease; }
.zap-fixo.aparece { opacity: 1; transform: none; pointer-events: auto; }

/* luz que segue o mouse no topo (criada pelo movimento.js) */
.hero-luz { opacity: 0; transition: opacity .8s ease; position: absolute; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; background: radial-gradient(circle, rgb(var(--aquarela) / .3) 0%, rgb(var(--aquarela) / 0) 65%); pointer-events: none; z-index: 0; }

/* ---------- entrada dos blocos ---------- */
.surge-ativo .surge { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i, 0) * 110ms); }
.surge-ativo .surge.visivel { opacity: 1; transform: none; }

/* entre 961 e 1180 a barra não cabe com o CRP: ele fica no topo, no perfil e no rodapé */
@media (max-width: 1180px) {
  .marca-txt small { display: none; }
  .nav-links { gap: 22px; }
}
@media (max-width: 960px) {
  .nav-links { display: none; }
  .zap-fixo { display: grid; }
  .hero { padding-top: 104px; }
  .hero-in { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .retrato { justify-self: center; max-width: 400px; }
  .sobre-in, .perfil-in, .passos-cab, .modos, .contato-in, .rodape-cols { grid-template-columns: minmax(0, 1fr); }
  .esperar { grid-column: 1; grid-row: auto; }
  .destaques, .conteudos, .temas { grid-template-columns: minmax(0, 1fr); }
  /* no celular a corda vira fio reto na vertical */
  .corda-item { display: none; }
  .passos { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .passos::before, .passos::after { content: ''; position: absolute; left: 26px; top: 26px; bottom: 26px; width: 1.5px; background: var(--linha); }
  .passos::after { background: var(--ouro); transform-origin: top; transform: scaleY(var(--fio)); }
  .passo:nth-child(3) { margin-top: 0; }
  .passo { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 20px; }
  .passo h3 { margin-top: 12px; }
  .passo > div { grid-column: 2; }
  .perfil-foto { margin-inline: auto; width: 100%; }
}
@media (max-width: 720px) {
  .abordagem-lista { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .abordagem-lista article:last-child { text-align: left; }
  .abordagem-lista article:last-child p { margin-left: 0; }
}
@media (max-width: 560px) {
  body { font-size: 16.5px; }
  .marca-sinal { width: 54px; }
  .marca-txt small { display: none; }
  .nav .btn span { display: none; }
  .nav .btn { padding: 10px 13px; }
  .hero-acoes .btn { width: 100%; }
  .perfil-dados { grid-template-columns: minmax(0, 1fr); }
  .tema { grid-template-columns: minmax(0, 1fr) 40px; gap: 10px; }
  .tema-seta { width: 40px; height: 40px; }
  .rodape-topo .btn { width: 100%; }
  .rodape-marca { flex-direction: column; align-items: flex-start; gap: 10px; }
}
/* em 320 o "Enviar pelo WhatsApp" pedia 244px num cartão de 226: o rótulo fica, o aperto sai do padding */
@media (max-width: 400px) {
  .form { padding: 22px 18px; }
  .form .btn { padding-inline: 14px; font-size: 15px; }
}