/* ==========================================================
   RAISA ARRUDA · v2
   Direção: praia madura. O mar de Hemingway, o céu de Saint-Exupéry.
   Paleta oficial da Brand Bible v3 mantida, papéis reatribuídos.
   Tipografia: quatro vozes.
     Libre Caslon Display  → H1, o texto que afirma
     Literata              → leitura longa, sem cansar
     Cormorant Garamond    → H2, H3 e citações, o sonho
     Caveat                → marginália, a nota à mão do aviador
   ========================================================== */

:root{
  /* Paleta da revisão de layout. Medida contra o WCAG AA par a par:
     tinta sobre areia 10.64, tinta sobre bege 8.63, cereja sobre areia 8.47,
     verde sobre areia 9.01, areia sobre verde 9.01.
     O azul-mar é decoração, nunca texto: sobre areia dá 2.43. */

  /* Céu e mar */
  --ceu-alto:   #16382A;
  --mar:        #1F4D3A;   /* verde profundo, o fundo escuro da marca */
  --maresia:    #7EA7B7;   /* azul-mar suave, só em traço e ícone */

  /* Terra */
  --espuma:     #FAF7F2;   /* branco areia */
  --areia:      #EADFCC;   /* areia clara, bege suave */
  --duna:       #D8C9AE;

  /* Sol e vegetação */
  --sol:        #8B1E2D;   /* vermelho cereja profundo */
  --sol-fundo:  #6B1522;
  --mato:       #1F4D3A;
  --salvia:     #9FB3A8;

  --mato-escuro:#16382A;

  /* Âmbar só para as estrelas de avaliação. Estrela em cereja lê como
     alerta, não como nota. 4.33:1 sobre o branco areia do selo, acima
     dos 3:1 que o WCAG 1.4.11 pede para elemento gráfico informativo. */
  --estrela:    #A1690B;

  /* WhatsApp. O verde oficial #25D366 com texto branco dá 1.98:1 e reprova no
     Lighthouse. Escurecido para #0F7A3D, o branco sobe para 5.42:1, com folga
     sobre o mínimo de 4.5:1. Nenhum verde passa ao mesmo tempo no texto branco
     e na separação contra o fundo mar, então nos blocos escuros o botão ganha
     um fio claro na borda para manter o limite visível. */
  --zap:        #0F7A3D;
  --zap-hover:  #0B5F30;
  --zap-tinta:  #FFFFFF;

  /* Tinta. A fraca precisou escurecer: o bege novo é mais quente que o
     anterior, e #6B655C caía para 4.37 em cima dele. */
  --tinta:      #3A3A3A;
  --tinta-fraca:#5A544B;
  --tinta-nota: #5A544B;

  --linha:       rgba(58,58,58,.15);
  --linha-forte: rgba(58,58,58,.30);
  --linha-clara: rgba(250,247,241,.22);

  --hemingway: "Libre Caslon Display", "Iowan Old Style", Georgia, serif;
  --leitura:   "Literata", Georgia, "Times New Roman", serif;
  --sonho:     "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --mao:       "Caveat", "Segoe Script", cursive;

  --t-nota: .95rem;
  --t-xs:   .72rem;
  --t-sm:   .855rem;
  --t-base: 1.035rem;
  --t-lg:   1.16rem;

  --gut: clamp(20px, 5vw, 68px);
  --max: 1200px;
  --col: 64ch;

  /* Sem barra de aviso no site final. */
  --barra: 0px;
  --topo-h: 78px;
}

*, *::before, *::after{ box-sizing: border-box; }
[hidden]{ display: none !important; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  padding-top: var(--barra);
  background-color: var(--areia);
  color: var(--tinta);
  font-family: var(--leitura);
  font-size: var(--t-base);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible{
  outline: 2px solid var(--sol); outline-offset: 3px;
}

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

/* ---------- Estrutura ---------- */

.wrap{ width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
section{ position: relative; padding-block: clamp(66px, 9vw, 128px); }
.stack{ display: flex; flex-direction: column; align-items: start; gap: clamp(18px, 2.4vw, 28px); }
.stack-sm{ display: flex; flex-direction: column; align-items: start; gap: 11px; }
.rule{ border: 0; border-top: 1px solid var(--linha); margin: 0; width: 100%; }
.rule.claro{ border-top-color: var(--linha-clara); }

/* Trilho de marginália: a nota à mão vive na margem, como num diário de bordo */
.diario{
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 52px);
  align-items: start;
}
.nota{
  font-family: var(--mao);
  font-size: 1.22rem;
  line-height: 1.34;
  color: var(--mato-escuro);
  text-align: right;
  padding-top: 6px;
  transform: rotate(-1.2deg);
}
.nota.claro{ color: #C3CCBA; }
.nota::after{
  content: ""; display: block; width: 34px; height: 1px;
  background: currentColor; opacity: .5; margin: 12px 0 0 auto;
}
@media (max-width: 900px){
  .diario{ grid-template-columns: 1fr; gap: 16px; }
  .nota{ text-align: left; transform: rotate(-.7deg); font-size: 1.16rem; }
  .nota::after{ margin: 10px auto 0 0; }
}

/* ---------- Tipografia ---------- */

h1{
  font-family: var(--hemingway);
  font-weight: 400;
  font-size: clamp(2.6rem, 6.6vw, 4.5rem);
  line-height: 1.03;
  letter-spacing: -.018em;
  text-wrap: balance;
  margin: 0;
}
h2{
  font-family: var(--sonho);
  font-weight: 300;
  font-size: clamp(2rem, 4.6vw, 3.05rem);
  line-height: 1.12;
  letter-spacing: -.004em;
  text-wrap: balance;
  margin: 0;
}
h3{
  font-family: var(--sonho);
  font-weight: 500;
  font-size: clamp(1.45rem, 2.7vw, 1.95rem);
  line-height: 1.2;
  margin: 0;
}
h4{
  font-family: var(--leitura);
  font-weight: 600;
  font-size: var(--t-base);
  line-height: 1.4;
  margin: 0;
}
p{ margin: 0; max-width: var(--col); }
.lede{
  font-family: var(--sonho);
  font-weight: 300;
  font-size: clamp(1.32rem, 2.5vw, 1.72rem);
  line-height: 1.42;
  color: var(--tinta);
  max-width: 40ch;
}
.lede em{ font-style: italic; color: var(--sol); }
.fraco{ color: var(--tinta-fraca); }

.rotulo{
  font-family: var(--leitura);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .21em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  margin: 0;
  max-width: none;
}
.rotulo.sol{ color: var(--sol); }
.rotulo.mato{ color: var(--mato); }
.rotulo.mar{ color: var(--mar); }
.rotulo.claro{ color: rgba(250,247,241,.82); }

/* ---------- Botões ---------- */

.btn{
  display: inline-flex; align-items: center; gap: .65em;
  font-family: var(--leitura); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  padding: 16px 28px; border: 1px solid transparent; border-radius: 0;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn-sol{ background: var(--sol); color: var(--espuma); }
.btn-sol:hover{ background: var(--sol-fundo); }
.btn-mar{ background: var(--mar); color: var(--espuma); }
.btn-mar:hover{ background: var(--ceu-alto); }
.btn-claro{ background: var(--espuma); color: var(--tinta); }
.btn-claro:hover{ background: #fff; }
.btn-linha{ background: transparent; color: var(--tinta); border-color: var(--linha-forte); }
.btn-linha:hover{ border-color: var(--sol); color: var(--sol); }
.btn-linha-claro{ background: transparent; color: var(--espuma); border-color: rgba(250,247,241,.6); }
.btn-linha-claro:hover{ border-color: var(--espuma); background: rgba(250,247,241,.1); }

/* Botão de conversão: verde WhatsApp com tinta escura, 7.05:1 */
.btn-zap{ background: var(--zap); color: var(--zap-tinta); border-color: var(--zap); }
.btn-zap:hover{ background: var(--zap-hover); border-color: var(--zap-hover); }
/* Sobre os blocos escuros, um fio claro devolve o limite do botão (WCAG 1.4.11).
   O hero agora é claro, então saiu da lista: lá o verde já se separa do fundo. */
.mar-fundo .btn-zap, .flutua{
  border-color: rgba(250,247,242,.55);
}
/* No verde profundo o fundo do botão quase encosta no verde do WhatsApp
   (1.78:1). O fio creme fica sólido e ganha um anel de respiro: é ele que
   entrega o limite do componente, como pede o WCAG 1.4.11. */
.mar-fundo .btn-zap{
  border-color: var(--espuma);
  box-shadow: 0 0 0 3px rgba(250,247,242,.14);
}
.mar-fundo .btn-zap:hover{
  border-color: rgba(250,247,241,.85);
}
.btn-zap svg{ width: 17px; height: 17px; fill: currentColor; flex: none; }
button.btn{ cursor: pointer; font: inherit; font-family: var(--leitura); font-size: var(--t-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

.seta{
  font-family: var(--leitura); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
  border-bottom: 1px solid currentColor; padding-bottom: 4px;
  transition: opacity .2s ease;
}
.seta:hover{ opacity: .6; }
.seta svg{ transition: transform .25s ease; }
.seta:hover svg{ transform: translateX(5px); }

/* ---------- Cabeçalho ---------- */

/* O cabeçalho é claro desde o topo, como na revisão de layout.
   Ao rolar ele só ganha o fio e uma sombra baixa, para descolar do conteúdo. */
.topo{
  position: fixed; top: var(--barra); left: 0; right: 0; z-index: 80;
  transition: box-shadow .35s ease, border-color .35s ease;
  background: rgba(250,247,242,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  color: var(--tinta);
}
.topo.pousado{
  border-bottom-color: var(--linha);
  box-shadow: 0 10px 26px -22px rgba(58,58,58,.7);
}
.topo-int{ display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: var(--topo-h); }
/* A marca é só a imagem. O flex do cabeçalho centraliza na vertical,
   e as duas versões têm a mesma caixa, então nada se desloca ao pousar. */
.marca{ display: flex; align-items: center; line-height: 0; text-decoration: none; }
.marca-img{ display: block; height: clamp(29px, 2.7vw, 38px); width: auto; }
/* O cabeçalho é sempre claro, então a marca é sempre a de tinta.
   A versão creme segue no projeto, para os blocos escuros e o rodapé. */
.marca-claro{ display: none; }
.marca-escuro{ display: block; }
.nav{ display: flex; align-items: center; gap: clamp(15px, 1.9vw, 28px); }
.nav a{
  font-family: var(--leitura); font-size: var(--t-sm); font-weight: 500;
  text-decoration: none; color: inherit; padding-block: 4px;
  border-bottom: 1px solid transparent; transition: border-color .2s ease, opacity .2s ease;
}
.nav a:hover{ border-color: currentColor; opacity: .8; }
.nav .btn{ padding: 12px 20px; border-bottom-color: transparent; }
.nav .btn:hover{ border-bottom-color: transparent; opacity: 1; }

.menu-btn{
  display: none; background: none; border: 1px solid currentColor;
  padding: 10px 15px; font-family: var(--leitura); font-size: var(--t-xs);
  font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: inherit; cursor: pointer;
}
@media (max-width: 940px){
  .menu-btn{ display: inline-block; }
  .nav{
    position: fixed; top: calc(var(--barra) + var(--topo-h)); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--areia); color: var(--tinta);
    border-bottom: 1px solid var(--linha);
    padding: 6px var(--gut) 28px;
    box-shadow: 0 20px 34px -26px rgba(34,67,77,.6);
  }
  .nav[hidden]{ display: none; }
  .nav a{ font-family: var(--sonho); font-weight: 500; font-size: 1.5rem; padding: 14px 0; border-bottom: 1px solid var(--linha); }
  .nav .btn{ margin-top: 20px; justify-content: center; font-family: var(--leitura); font-size: var(--t-xs); padding: 16px 20px; }
}

/* ---------- Hero: o horizonte ---------- */

.horizonte{
  position: relative; overflow: hidden;
  /* Claro, como na revisão de layout: areia no topo, bege descendo para a
     faixa seguinte. A luz do dia no lugar do céu noturno. */
  background:
    radial-gradient(120% 85% at 78% 4%, rgba(126,167,183,.20) 0%, transparent 58%),
    linear-gradient(180deg, var(--espuma) 0%, var(--espuma) 52%, #F4EDE1 78%, var(--areia) 100%);
  color: var(--tinta);
  /* A primeira dobra nunca corta. A altura mínima é a tela, o conteúdo
     centraliza dentro dela e todas as medidas verticais respondem a vh,
     de modo que em tela baixa a tipografia encolhe em vez de vazar. */
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-top: calc(var(--barra) + var(--topo-h) + clamp(12px, 2.4vh, 40px));
  padding-bottom: clamp(78px, 12vh, 148px);
}
@supports not (min-height: 100svh){ .horizonte{ min-height: 100vh; } }

/* O céu claro não tem estrelas: elas ficam guardadas para os blocos
   escuros da página, onde ainda fazem sentido. */
.estrelas, .estrelas.b{ display: none; }
.mar-fundo .estrelas, .mar-fundo .estrelas.b{ display: block; }

/* O sol: um círculo de traço. No fundo claro ele vira um contorno leve,
   à esquerda do texto, atrás do título. */
.disco-sol{
  position: absolute;
  right: clamp(-70px, -1vw, 20px);
  top: clamp(70px, 11vw, 150px);
  width: clamp(150px, 21vw, 260px);
  aspect-ratio: 1;
  border: 1px solid rgba(139,30,45,.22);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(139,30,45,.05) 0%, transparent 70%);
  pointer-events: none;
}
.disco-sol::after{
  content: ""; position: absolute; inset: 13%;
  border: 1px solid rgba(139,30,45,.12); border-radius: 50%;
}
.mar-fundo .disco-sol{
  border-color: rgba(250,247,241,.45);
  background: radial-gradient(circle at 50% 50%, rgba(250,247,241,.10) 0%, transparent 70%);
}

/* Vento: arcos longos e finos atravessando o céu, no azul-mar da paleta */
.vento{ position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.vento svg{ position: absolute; width: 200%; height: auto; opacity: .3; }
.vento .v1{ top: 7%; animation: soprar 44s linear infinite; }
.vento .v2{ top: 78%; opacity: .2; animation: soprar 66s linear infinite; }
@keyframes soprar{ from{ transform: translateX(0); } to{ transform: translateX(-25%); } }

.hero-conteudo{ position: relative; z-index: 2; }
.hero-grid{
  display: grid; gap: clamp(24px, 4vw, 60px);
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  /* stretch: a foto começa na linha do rótulo e termina na linha dos botões. */
  align-items: stretch;
}
@media (max-width: 940px){ .hero-grid{ grid-template-columns: 1fr; align-items: start; } }
.hero-foto{
  margin: 0 0 0 auto; position: relative;
  width: 100%; max-width: clamp(260px, 38vw, 520px);
  min-height: clamp(220px, 38vh, 380px);
}
/* A imagem sai do fluxo: assim a altura da linha vem só da coluna de texto,
   e a foto acompanha do rótulo até os botões sem esticar a primeira dobra. */
.hero-foto img{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center 8%;
  border: 0;
}
/* Moldura de papel: um fio quente e uma sombra baixa, como no layout. */
.hero-foto::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid rgba(58,58,58,.12);
  box-shadow: 0 26px 48px -30px rgba(58,58,58,.55);
}
@media (max-width: 940px){
  .hero-foto{
    max-width: 300px; margin-inline: 0;
    height: clamp(240px, 38vh, 340px); min-height: 0;
  }
}
/* Telas baixas: aperta o respiro antes de deixar qualquer coisa vazar. */
@media (max-height: 700px){
  .horizonte{ padding-bottom: clamp(58px, 9vh, 92px); }
  .hero-lede{ line-height: 1.5; max-width: 60ch; }
  .hero-grid{ gap: clamp(20px, 3vw, 40px); }
}
@media (max-height: 620px){
  .horizonte{
    padding-top: calc(var(--barra) + var(--topo-h) + 10px);
    padding-bottom: clamp(44px, 7.5vh, 68px);
  }
  .hero-texto{ gap: clamp(8px, 1.6vh, 16px); }
  .hero-lede{ line-height: 1.44; }
  .hero-foto{ min-height: 170px; }
}
.hero-conteudo h1{
  max-width: 13ch;
  font-size: clamp(1.95rem, min(6.2vw, 6.7vh), 4.3rem);
  color: var(--sol);
}
.hero-texto{ display: flex; flex-direction: column; align-items: start; gap: clamp(11px, 2.1vh, 30px); }
.hero-sub{
  font-family: var(--sonho); font-style: italic; font-weight: 300;
  font-size: clamp(1.08rem, min(2.7vw, 2.9vh), 1.9rem); line-height: 1.34;
  color: var(--tinta); max-width: 30ch; margin: 0;
}
.hero-lede{
  color: var(--tinta-fraca); max-width: 54ch;
  font-size: clamp(.9rem, min(1.55vw, 1.85vh), 1.035rem);
  line-height: 1.58;
}
.hero-acoes{ display: flex; flex-wrap: wrap; gap: 11px; }
.hero-acoes .btn{ padding: clamp(11px, 1.8vh, 16px) clamp(18px, 1.8vw, 28px); }
.hero-credencial{
  font-family: var(--leitura); font-size: var(--t-sm); line-height: 1.5;
  color: var(--tinta-fraca); max-width: 46ch; margin: 0;
}
/* Nota à mão ao pé da foto, como no layout */
.marginalia-foto{
  position: absolute; left: 2px; bottom: clamp(-62px, -6.2vh, -44px);
  font-family: var(--mao); font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.3;
  color: var(--mato-escuro); transform: rotate(-1.6deg); max-width: 22ch;
}
@media (max-width: 940px){ .marginalia-foto{ display: none; } }

/* Ondas: divisor entre as seções */
.ondas{ display: block; width: 200%; height: auto; }
/* A onda do hero tem altura fixa, para não crescer com a largura da tela
   e roubar espaço vertical da primeira dobra. */
.rodape-hero{ height: clamp(52px, 8vh, 104px); }
.rodape-hero .ondas-caixa, .rodape-hero .ondas{ height: 100%; }
.ondas-caixa{ position: relative; line-height: 0; overflow: hidden; }
.ondas-caixa .anda{ animation: soprar 38s linear infinite; }
.ondas-caixa .anda-lento{ animation: soprar 62s linear infinite; }

.rodape-hero{ position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; }

/* ---------- Sondagens: a faixa de provas ---------- */

.sondagens{ background: var(--espuma); border-block: 1px solid var(--linha); padding-block: clamp(38px, 4.6vw, 58px); }
.sondagens-grid{ display: grid; gap: 30px clamp(24px, 4vw, 54px); grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 880px){ .sondagens-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.sonda{ display: flex; flex-direction: column; gap: 8px; }
.sonda b{
  font-family: var(--hemingway); font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 2.7rem); line-height: 1; color: var(--mar);
  font-variant-numeric: tabular-nums;
}
.sonda.curta b{ font-size: clamp(1.5rem, 2.5vw, 1.95rem); line-height: 1.15; }
.sonda span{ font-size: var(--t-sm); line-height: 1.5; color: var(--tinta-fraca); max-width: 27ch; }

/* ---------- A rota: os três caminhos, em faixas ---------- */

/* Três cartões ilustrados, como na revisão de layout: foto em cima,
   nome de quem chega, título, resumo e o link. */
.rota{
  display: grid; width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
}
.faixa{
  display: flex; flex-direction: column;
  background: var(--espuma);
  border: 1px solid var(--linha);
  text-decoration: none; color: inherit;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.faixa:hover{
  transform: translateY(-4px);
  border-color: rgba(139,30,45,.35);
  box-shadow: 0 22px 40px -28px rgba(58,58,58,.75);
}
.faixa-foto{ position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--areia); }
/* O corte 16:10 de uma foto 4:5 mostra só metade da altura. O foco vai por
   cartão, medido a partir da posição do rosto: a cabeça da Raisa nunca corta. */
.faixa-foto img{ width: 100%; height: 100%; object-fit: cover;
  object-position: center var(--foco, 22%); }
.faixa-corpo{
  display: flex; flex-direction: column; align-items: start;
  gap: 10px; padding: clamp(20px, 2vw, 26px);
  flex: 1 1 auto;
}
.faixa .quem{ font-family: var(--mao); font-size: 1.2rem; line-height: 1.25; color: var(--sol); margin: 0; }
.faixa h3{ transition: color .3s ease; }
.faixa .texto{ font-size: var(--t-sm); line-height: 1.62; color: var(--tinta-fraca); max-width: none; }
.faixa .ir{
  margin-top: auto; padding-top: 6px;
  font-family: var(--leitura); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; white-space: nowrap;
  color: var(--sol);
  display: inline-flex; align-items: center; gap: 10px;
}
.faixa .ir svg{ transition: transform .3s ease; }
.faixa:hover .ir svg{ transform: translateX(6px); }
.faixa:hover h3{ color: var(--sol); }

@media (max-width: 900px){
  .rota{ grid-template-columns: 1fr; gap: 16px; }
  .faixa-foto{ aspect-ratio: 16 / 9; }
}

/* ---------- Blocos de mar ---------- */

.mar-fundo{
  position: relative; overflow: hidden;
  background:
    radial-gradient(75% 90% at 84% 8%, rgba(126,167,183,.18) 0%, transparent 60%),
    linear-gradient(180deg, var(--ceu-alto) 0%, var(--mar) 58%, #2A5E46 100%);
  color: var(--espuma);
}
/* Grão de papel também nos blocos escuros, para o fundo não ficar chapado. */
.mar-fundo::before{
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.42'/%3E%3C/svg%3E");
  opacity: .16; mix-blend-mode: overlay;
}
.mar-fundo h2, .mar-fundo h3, .mar-fundo h4{ color: var(--espuma); }
.mar-fundo p{ color: rgba(250,247,241,.85); }
.mar-fundo .lede{ color: var(--espuma); }
.mar-fundo .lede em{ color: var(--duna); }
/* .7 dava 4.39 sobre a parada mais clara do verde; .78 sobe para 5.02. */
.mar-fundo .fraco{ color: rgba(250,247,242,.78); }
.mar-fundo .conteudo{ position: relative; z-index: 2; }
.mar-fundo .textura{
  position: absolute; left: 0; right: 0; bottom: -10px; z-index: 1;
  opacity: .3; pointer-events: none;
}

.duas{ display: grid; gap: clamp(32px, 4.6vw, 62px); grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; }
.duas.assim{ grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); }
@media (max-width: 940px){ .duas, .duas.assim{ grid-template-columns: 1fr; } }

/* Passos, lidos como sondagens de profundidade */
.passos{ list-style: none; margin: 0; padding: 0; width: 100%; }
.passos li{
  display: grid; grid-template-columns: 54px 1fr; gap: 18px;
  padding-block: 19px; border-top: 1px solid var(--linha-clara);
}
.passos li:last-child{ border-bottom: 1px solid var(--linha-clara); }
.passos .n{ font-family: var(--hemingway); font-size: 1.25rem; color: rgba(250,247,241,.78); font-variant-numeric: tabular-nums; }
.passos p{ font-size: var(--t-sm); line-height: 1.6; margin-top: 3px; }

/* Listas de temas */
.temas{ list-style: none; margin: 0; padding: 0; width: 100%; }
.temas li{
  display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: baseline;
  padding-block: 14px; border-top: 1px solid var(--linha);
}
.temas li:last-child{ border-bottom: 1px solid var(--linha); }
.temas .t-nome{ font-family: var(--sonho); font-weight: 500; font-size: 1.36rem; line-height: 1.26; }
.temas .t-tag{ font-family: var(--leitura); font-size: var(--t-xs); letter-spacing: .13em; text-transform: uppercase; color: var(--tinta-fraca); white-space: nowrap; }
.temas.claro li{ border-top-color: var(--linha-clara); }
.temas.claro li:last-child{ border-bottom-color: var(--linha-clara); }
.temas.claro .t-tag{ color: rgba(250,247,241,.8); }
@media (max-width: 560px){ .temas li{ grid-template-columns: 1fr; } }

/* Marcadores em traço de onda */
.marcas{ list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; max-width: var(--col); }
.marcas li{ position: relative; padding-left: 36px; }
.marcas li::before{
  content: ""; position: absolute; left: 0; top: .78em; height: 6px; width: 22px;
  background: no-repeat center/22px 6px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='6'%3E%3Cpath d='M0 4C3 4 3 2 5.5 2S8 4 11 4s3-2 5.5-2S19 4 22 4' fill='none' stroke='%237A3045' stroke-width='1'/%3E%3C/svg%3E");
}
.marcas.claro li::before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='6'%3E%3Cpath d='M0 4C3 4 3 2 5.5 2S8 4 11 4s3-2 5.5-2S19 4 22 4' fill='none' stroke='%23FAF7F1' stroke-width='1' stroke-opacity='.72'/%3E%3C/svg%3E");
}

/* Formatos */
.formatos{ display: grid; gap: 1px; grid-template-columns: repeat(3, minmax(0,1fr)); background: var(--linha-clara); border: 1px solid var(--linha-clara); width: 100%; }
@media (max-width: 780px){ .formatos{ grid-template-columns: 1fr; } }
.formato{ background: var(--mar); padding: 27px; display: flex; flex-direction: column; gap: 9px; }
.formato .f-n{ font-family: var(--sonho); font-weight: 500; font-size: 1.4rem; }
.formato .f-d{ font-size: var(--t-sm); line-height: 1.55; color: rgba(250,247,241,.8); }
.formatos.claro{ background: var(--linha); border-color: var(--linha); }
.formatos.claro .formato{ background: var(--espuma); }
.formatos.claro .f-d{ color: var(--tinta-fraca); }

/* ---------- Fotografia: pranchas com legenda à mão ---------- */

.prancha{ display: flex; flex-direction: column; gap: 12px; margin: 0; width: 100%; }
.prancha .quadro{
  position: relative;
  border: 1px solid var(--linha-forte);
  background: linear-gradient(168deg, #E6DDD0 0%, #D4CABC 100%);
  padding: 9px;
}
.prancha .quadro::after{
  content: ""; position: absolute; inset: 9px; border: 1px solid rgba(58,58,58,.16); pointer-events: none;
}
.prancha .quadro img{ width: 100%; height: auto; display: block; }
.prancha .miolo{ width: 100%; display: flex; align-items: flex-end; padding: 20px; }
.prancha .rot{
  font-family: var(--leitura); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--sol);
}
.prancha figcaption{ font-family: var(--mao); font-size: 1.28rem; line-height: 1.4; color: var(--tinta-nota); max-width: 44ch; }
.prancha .rot{ color: var(--sol-fundo); }
.prancha.retrato .miolo{ aspect-ratio: 4/5; }
.prancha.paisagem .miolo{ aspect-ratio: 16/10; }
.prancha.quadrada .miolo{ aspect-ratio: 1/1; }
.prancha.escura .quadro{ background: linear-gradient(168deg, #33654F 0%, #234F3C 100%); border-color: var(--linha-clara); }
.prancha.escura .quadro::after{ border-color: rgba(250,247,241,.18); }
.prancha.escura .rot{ color: var(--duna); }
.prancha.escura figcaption{ color: rgba(250,247,241,.88); }

/* ---------- Pilares ---------- */

.pilares{ display: grid; gap: 1px; grid-template-columns: repeat(4, minmax(0,1fr)); background: var(--linha); border: 1px solid var(--linha); width: 100%; }
@media (max-width: 900px){ .pilares{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px){ .pilares{ grid-template-columns: 1fr; } }
.pilar{ background: var(--espuma); padding: 27px; display: flex; flex-direction: column; gap: 10px; }
.pilar .p-n{ font-family: var(--sonho); font-weight: 500; font-size: 1.32rem; line-height: 1.22; color: var(--mato-escuro); }
.pilar p{ font-size: var(--t-sm); line-height: 1.58; color: var(--tinta-fraca); }

/* ---------- Citação ---------- */

.citacao{ margin: 0; padding-left: clamp(20px, 3vw, 34px); border-left: 1px solid var(--sol);
  max-width: 100%; align-self: stretch; }
.citacao p{
  font-family: var(--sonho); font-style: italic; font-weight: 300;
  font-size: clamp(1.6rem, 3.4vw, 2.35rem); line-height: 1.3; max-width: min(22ch, 100%);
}
.citacao cite{
  display: block; margin-top: 16px; font-style: normal; font-family: var(--leitura);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .17em;
  text-transform: uppercase; color: var(--tinta-fraca);
}

/* ---------- Pesquisa ---------- */

.artigo{ border: 1px solid var(--linha-forte); background: var(--espuma); padding: clamp(24px, 3.2vw, 36px); display: flex; flex-direction: column; gap: 14px; }
.artigo .rev{ font-family: var(--leitura); font-size: var(--t-xs); font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--mar); }
.artigo .t-en{ font-family: var(--sonho); font-weight: 500; font-size: clamp(1.4rem, 2.6vw, 1.78rem); line-height: 1.24; }
.artigo .aut{ font-size: var(--t-sm); line-height: 1.55; color: var(--tinta-fraca); }

/* ---------- Caderno ---------- */

.postais{ display: grid; gap: clamp(26px, 3.2vw, 40px); grid-template-columns: repeat(3, minmax(0,1fr)); width: 100%; }
@media (max-width: 900px){ .postais{ grid-template-columns: 1fr; } }
.postal{ display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; border-top: 1px solid var(--linha-forte); padding-top: 20px; }
.postal .cat{ font-family: var(--mao); font-size: 1.2rem; color: var(--sol); }
.postal h3{ font-size: 1.5rem; transition: color .2s ease; }
.postal:hover h3{ color: var(--sol); }
.postal p{ font-size: var(--t-sm); line-height: 1.6; color: var(--tinta-fraca); }
.postal .quando{ margin-top: auto; padding-top: 10px; font-family: var(--leitura); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-fraca); }

.carta{
  border: 1px solid var(--linha-forte); background: var(--duna);
  padding: clamp(28px, 4vw, 50px); width: 100%;
  display: grid; gap: clamp(22px, 3vw, 46px);
  grid-template-columns: minmax(0,1fr) minmax(0,.8fr); align-items: center;
}
@media (max-width: 860px){ .carta{ grid-template-columns: 1fr; } }
.carta-form{ display: flex; flex-wrap: wrap; gap: 10px; }
.carta-form input{
  flex: 1 1 210px; min-width: 0; font-family: var(--leitura); font-size: var(--t-base);
  padding: 15px 16px; border: 1px solid var(--linha-forte); background: var(--espuma); color: var(--tinta);
}
.carta-form input::placeholder{ color: var(--tinta-fraca); }
/* Fundo argila é mais escuro que a areia: o texto secundário precisa descer junto. */
.carta .fraco, .carta p{ color: #544E45; }

/* ---------- FAQ ---------- */

.faq{ width: 100%; max-width: 880px; }
.faq details{ border-top: 1px solid var(--linha); }
.faq details:last-of-type{ border-bottom: 1px solid var(--linha); }
.faq summary{
  cursor: pointer; list-style: none; padding-block: 23px;
  display: grid; grid-template-columns: 1fr 22px; gap: 18px; align-items: center;
  font-family: var(--sonho); font-weight: 500; font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.28;
  transition: color .2s ease;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary:hover{ color: var(--sol); }
.faq .sinal{ position: relative; width: 22px; height: 22px; }
.faq .sinal::before, .faq .sinal::after{ content: ""; position: absolute; background: var(--sol); transition: transform .22s ease; }
.faq .sinal::before{ top: 10.5px; left: 0; width: 22px; height: 1px; }
.faq .sinal::after{ left: 10.5px; top: 0; height: 22px; width: 1px; }
.faq details[open] .sinal::after{ transform: scaleY(0); }
.faq details p{ padding-bottom: 25px; color: var(--tinta-fraca); max-width: 70ch; }

/* ---------- Rodapé ---------- */

/* Rodapé claro, como na revisão de layout: papel em vez de mar. */
.rodape{
  background: var(--espuma); color: var(--tinta);
  border-top: 1px solid var(--linha);
  padding-block: clamp(46px, 5vw, 70px) 26px;
  position: relative; overflow: hidden;
}
.rodape a{ color: var(--tinta-fraca); text-decoration: none; }
.rodape a:hover{ color: var(--sol); text-decoration: underline; text-underline-offset: 4px; }

/* Faixa de cima: marca, navegação em linha e as redes */
.rodape-topo{
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(18px, 3vw, 34px);
  padding-bottom: clamp(30px, 3.4vw, 44px);
  border-bottom: 1px solid var(--linha);
}
.rodape-marca{ display: block; text-decoration: none; }
.rodape-marca img{ height: clamp(28px, 2.6vw, 34px); width: auto; }
.rodape-marca small{
  display: block; font-family: var(--leitura); font-size: .56rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: var(--tinta-fraca);
  margin-top: 7px; padding-left: 2px;
}
.rodape-nav{ display: flex; flex-wrap: wrap; gap: 8px clamp(12px, 1.5vw, 22px); }
.rodape-nav a{ font-size: var(--t-sm); }
.rodape ul.rodape-redes{ list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; flex: 0 0 auto; flex-wrap: nowrap; }
.rodape-nav{ flex: 1 1 320px; justify-content: center; }
.rodape ul.rodape-redes a{
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid var(--linha-forte); color: var(--tinta);
  transition: border-color .25s ease, color .25s ease, background-color .25s ease;
}
.rodape ul.rodape-redes a:hover{ border-color: var(--sol); color: var(--sol); background: rgba(139,30,45,.05); text-decoration: none; }
.rodape ul.rodape-redes svg{ width: 19px; height: 19px; }
.rodape ul.rodape-redes svg use{ fill: currentColor; }

.rodape-grid{
  display: grid; gap: clamp(26px, 3.4vw, 48px);
  grid-template-columns: repeat(3, minmax(0,1fr)) minmax(0,.9fr);
  position: relative; z-index: 2;
  padding-top: clamp(30px, 3.4vw, 46px);
}
@media (max-width: 900px){ .rodape-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .rodape-grid{ grid-template-columns: 1fr; } }
.rodape h4{ font-family: var(--leitura); font-size: var(--t-xs); font-weight: 600; letter-spacing: .19em; text-transform: uppercase; color: var(--sol); margin-bottom: 0; }
.rodape ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: var(--t-sm); color: var(--tinta-fraca); }
.rodape-nota{
  font-family: var(--mao); font-size: 1.28rem; line-height: 1.4;
  color: var(--mato-escuro); transform: rotate(-1.2deg); align-self: end; max-width: none;
}
.rodape .assinatura{
  position: relative; z-index: 2;
  margin-top: clamp(30px, 3.4vw, 46px); padding-top: 20px; border-top: 1px solid var(--linha);
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between;
  font-family: var(--leitura); font-size: var(--t-xs); color: var(--tinta-fraca);
  /* Rede de segurança: mesmo sem o JS que esconde o botão flutuante,
     sobra espaço embaixo para ele não cobrir os links de política. */
  padding-bottom: clamp(56px, 8vw, 74px);
}
.rodape .assinatura > *{ flex: 0 1 auto; }
.rodape .assinatura .politicas{ text-align: center; }
/* Crédito da agência: discreto por tamanho e por cor, alinhado pela
   base do texto, sem virar um segundo logo disputando o rodapé. */
.rodape .credito{
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--tinta-fraca); white-space: nowrap;
}
/* 14px deixa o "digital" com a mesma altura de x do texto ao lado, e a
   opacidade iguala a densidade de tinta: a 19px e cheio o logo era a
   coisa mais pesada da linha, porque é quase preto com um acento saturado
   ao lado de um texto em tinta fraca. */
.rodape .credito img{ height: 14px; width: auto; opacity: .8; transition: opacity .2s ease; }
.rodape .credito a{ display: inline-flex; align-items: center; border: 0; }
.rodape .credito a:hover img{ opacity: 1; }
.rodape .credito a:hover{ text-decoration: none; }
@media (max-width: 860px){
  .rodape .assinatura{ justify-content: flex-start; gap: 12px 20px; }
  .rodape .assinatura .politicas{ text-align: left; }
}
.ph{ background: rgba(122,48,69,.2); border-bottom: 1px dashed var(--sol); padding: 0 3px; }
.rodape .ph, .horizonte .ph{ background: rgba(250,247,241,.16); border-bottom-color: rgba(250,247,241,.55); }

/* ==========================================================
   GALERIA · formato feed do Instagram, 1080x1350 (4:5)
   ========================================================== */

.galeria{ display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0,1fr)); width: 100%; }
@media (max-width: 1040px){ .galeria{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 720px){ .galeria{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

.moldura{
  position: relative; aspect-ratio: 1080 / 1350; width: 100%;
  border: 1px solid var(--linha-forte); padding: 0; margin: 0;
  background: linear-gradient(168deg, #E6DDD0 0%, #D4CABC 100%);
  cursor: pointer; overflow: hidden; display: block;
  transition: border-color .25s ease;
}
.moldura img{ width: 100%; height: 100%; object-fit: cover; object-position: center; }
.moldura:hover{ border-color: var(--sol); }
.moldura.reserva{ cursor: default; border-style: dashed; background: rgba(216,207,195,.16); }
.moldura.reserva:hover{ border-color: var(--linha-forte); }
.moldura .vazio{
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: flex-start; gap: 8px; padding: 14px; text-align: left;
}
.moldura.reserva .medida{ color: rgba(250,247,241,.6); }
.moldura .n-foto{
  font-family: var(--leitura); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--sol);
}
.moldura .d-foto{ font-family: var(--mao); font-size: 1.1rem; line-height: 1.3; color: #4E483F; }
.moldura .medida{
  font-family: var(--leitura); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: #4E483F;
}

/* Lightbox */
dialog::backdrop{ background: rgba(27,56,67,.9); }
.visor{
  border: 0; padding: 0; background: transparent; max-width: min(94vw, 560px); max-height: 94vh;
  color: var(--espuma);
}
.visor img{ width: 100%; height: auto; border: 1px solid var(--linha-clara); }
.visor .legenda{ font-family: var(--mao); font-size: 1.25rem; margin-top: 12px; color: var(--espuma); }
.fecha-visor{
  position: fixed; top: 18px; right: 18px; z-index: 5;
  background: none; border: 1px solid rgba(250,247,241,.6); color: var(--espuma);
  width: 46px; height: 46px; cursor: pointer; font-size: 1.3rem; line-height: 1;
}
.fecha-visor:hover{ border-color: var(--espuma); background: rgba(250,247,241,.12); }

/* ==========================================================
   POP-UP DE QUALIFICAÇÃO
   ========================================================== */

.painel{
  border: 0; padding: 0; background: var(--areia); color: var(--tinta);
  width: min(96vw, 660px); max-height: min(92vh, 900px);
  box-shadow: 0 40px 80px -40px rgba(27,56,67,.7);
  overflow: hidden;
}
.painel[open]{ display: flex; flex-direction: column; }
.painel form{ display: flex; flex-direction: column; min-height: 0; flex: 1; }
.painel-topo{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px clamp(20px, 4vw, 38px); border-bottom: 1px solid var(--linha);
  background: var(--espuma); flex: none;
}
.painel-topo .t{ font-family: var(--sonho); font-weight: 500; font-size: 1.3rem; line-height: 1.2; }
.painel-topo .p{ font-family: var(--leitura); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-fraca); margin-top: 3px; }
.fechar{
  background: none; border: 1px solid var(--linha-forte); color: var(--tinta);
  width: 42px; height: 42px; flex: none; cursor: pointer; font-size: 1.2rem; line-height: 1;
}
.fechar:hover{ border-color: var(--sol); color: var(--sol); }

.trilha{ height: 3px; background: var(--duna); flex: none; }
.trilha span{ display: block; height: 100%; width: 25%; background: var(--sol); transition: width .3s ease; }

.painel-corpo{ padding: clamp(22px, 4vw, 38px); overflow-y: auto; flex: 1; min-height: 0; }
.etapa[hidden]{ display: none; }
.etapa{ display: flex; flex-direction: column; gap: 20px; }
.etapa h3{ font-size: clamp(1.4rem, 3vw, 1.8rem); }
.etapa .ajuda{ font-size: var(--t-sm); color: var(--tinta-fraca); max-width: 56ch; }

fieldset{ border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
legend{ padding: 0; font-family: var(--leitura); font-size: var(--t-sm); font-weight: 600; margin-bottom: 4px; }

/* Escolhas grandes, alvo de toque generoso */
.escolha{
  display: flex; align-items: flex-start; gap: 14px;
  border: 1px solid var(--linha-forte); background: var(--espuma);
  padding: 17px 19px; cursor: pointer; min-height: 56px;
  transition: border-color .2s ease, background-color .2s ease;
}
.escolha:hover{ border-color: var(--sol); }
.escolha input{ margin: 3px 0 0; accent-color: var(--sol); width: 19px; height: 19px; flex: none; }
.escolha:has(input:checked){ border-color: var(--sol); background: #F6EEEE; }
.escolha:has(input:focus-visible){ outline: 2px solid var(--sol); outline-offset: 2px; }
.escolha .rot-e{ font-family: var(--sonho); font-weight: 500; font-size: 1.22rem; line-height: 1.28; }
.escolha .sub-e{ display: block; font-family: var(--leitura); font-size: var(--t-sm); line-height: 1.5; color: var(--tinta-fraca); margin-top: 4px; }

.linha-op{ display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 560px){ .linha-op{ grid-template-columns: 1fr; } }
.escolha.mini{ padding: 14px 15px; min-height: 52px; align-items: center; }
.escolha.mini .rot-e{ font-size: 1.06rem; }

.campos{ display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 560px){ .campos{ grid-template-columns: 1fr; } }
.campo{ display: flex; flex-direction: column; gap: 6px; }
.campo.largo{ grid-column: 1 / -1; }
.campo label{ font-family: var(--leitura); font-size: var(--t-sm); font-weight: 600; }
.campo .op{ font-weight: 400; color: var(--tinta-fraca); }
.campo input, .campo select, .campo textarea{
  font-family: var(--leitura); font-size: var(--t-base); color: var(--tinta);
  background: var(--espuma); border: 1px solid var(--linha-forte); border-radius: 0;
  padding: 13px 14px; width: 100%; min-height: 48px;
}
.campo textarea{ min-height: 96px; resize: vertical; line-height: 1.6; }
.campo input::placeholder, .campo textarea::placeholder{ color: var(--tinta-fraca); }

.consent{
  display: flex; gap: 13px; align-items: flex-start;
  border: 1px solid var(--linha-forte); background: var(--espuma); padding: 17px;
}
.consent input{ margin: 3px 0 0; accent-color: var(--sol); width: 19px; height: 19px; flex: none; }
.consent .txt{ font-size: var(--t-sm); line-height: 1.6; color: var(--tinta-fraca); }
.consent a{ color: var(--sol); }

.aviso-lgpd{ font-size: var(--t-xs); line-height: 1.65; color: var(--tinta-fraca); max-width: 62ch; }

.painel-pe{
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  padding: 18px clamp(20px, 4vw, 38px); border-top: 1px solid var(--linha);
  background: var(--espuma); flex: none;
}
.painel-pe #btnAvancar{ margin-left: auto; }
.voltar{
  background: none; border: 0; cursor: pointer; padding: 12px 0;
  font-family: var(--leitura); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--tinta-fraca);
  border-bottom: 1px solid currentColor;
}
.voltar:hover{ color: var(--sol); }
.voltar[hidden]{ display: none; }
.erro{ font-size: var(--t-sm); color: var(--sol); width: 100%; }
.erro[hidden]{ display: none; }

.sucesso{ display: flex; flex-direction: column; gap: 18px; align-items: start; text-align: left; }
.sucesso .selo{ width: 54px; height: 54px; border: 1px solid var(--zap); border-radius: 50%; display: grid; place-items: center; }
.sucesso .selo svg{ width: 26px; height: 26px; fill: var(--zap); }

/* ==========================================================
   BOTÃO FLUTUANTE
   ========================================================== */

.flutua{
  position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px); z-index: 70;
  display: inline-flex; align-items: center; gap: 11px;
  background: var(--zap); color: var(--zap-tinta); border: 1px solid rgba(250,247,241,.5);
  padding: 15px 20px; cursor: pointer;
  font-family: var(--leitura); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 14px 30px -12px rgba(6,51,31,.5);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, background-color .2s ease;
}
.flutua.aparece{ opacity: 1; transform: none; pointer-events: auto; }
.flutua:hover{ background: var(--zap-hover); }
.flutua svg{ width: 21px; height: 21px; fill: currentColor; flex: none; }
@media (max-width: 560px){
  .flutua{ padding: 15px 17px; font-size: .66rem; letter-spacing: .1em; }
}

/* ==========================================================
   FONTES LOCAIS
   Servidas do próprio domínio, sem requisição a terceiros.
   swap: o texto aparece na fonte de sistema e troca ao carregar,
   o que evita bloqueio de renderização no Lighthouse.
   ========================================================== */
@font-face{ font-family:"Libre Caslon Display"; src:url("/assets/fontes/caslon-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Literata"; src:url("/assets/fontes/literata-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Literata"; src:url("/assets/fontes/literata-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:"Cormorant Garamond"; src:url("/assets/fontes/cormorant-300.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:"Cormorant Garamond"; src:url("/assets/fontes/cormorant-300-italic.woff2") format("woff2");
  font-weight:300; font-style:italic; font-display:swap; }
@font-face{ font-family:"Cormorant Garamond"; src:url("/assets/fontes/cormorant-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"Caveat"; src:url("/assets/fontes/caveat-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap; }

/* Páginas internas: o cabeçalho já é claro em todas, então só o respiro. */
body.interna{ padding-top: var(--topo-h); }
body.interna .topo{ border-bottom-color: var(--linha); }
.capa-interna{ background: var(--mar); color: var(--espuma); padding-block: clamp(48px,7vw,90px); }
.capa-interna h1{ font-size: clamp(2.2rem, 5.2vw, 3.6rem); margin-bottom: 16px; }
.capa-interna p{ color: rgba(250,247,241,.9); max-width: 58ch; }
.prosa h2{ margin-top: clamp(34px,4vw,52px); }
.prosa h3{ margin-top: clamp(26px,3vw,38px); }
.prosa p, .prosa ul{ margin-bottom: 16px; }
.prosa ul{ padding-left: 0; list-style: none; display: grid; gap: 11px; max-width: var(--col); }
/* O traço fica posicionado, não em coluna de grade: dentro de um li em grid
   cada <a> ou <strong> vira um item próprio e cai para a linha de baixo. */
.prosa ul li{ position: relative; padding-left: 29px; }
.prosa ul li::before{ content:""; position:absolute; left:0; top:.82em;
  height:1px; width:16px; background: var(--sol); }
.prosa table{ border-collapse: collapse; width: 100%; margin-bottom: 18px; font-size: var(--t-sm); }
/* O padrão do navegador centraliza a legenda da tabela, o que quebra o
   alinhamento à esquerda de todo o resto da página. */
.prosa caption{ text-align: left; font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-fraca);
  padding-bottom: 10px; }
.prosa th, .prosa td{ text-align: left; vertical-align: top; padding: 13px 16px 13px 0; border-bottom: 1px solid var(--linha); }
.prosa th{ font-weight: 600; width: 32%; }
@media (max-width:620px){ .prosa th, .prosa td{ display:block; width:auto; padding-right:0; } .prosa th{ border-bottom:0; padding-bottom:2px; } }
.destaque{ border-left: 2px solid var(--sol); background: var(--espuma); padding: 22px clamp(18px,3vw,28px); margin: 26px 0; }
.destaque p:last-child{ margin-bottom: 0; }
.atualizado{ font-size: var(--t-xs); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color: var(--tinta-fraca); }

/* Páginas de política. Uma única medida de linha para parágrafo, lista,
   tabela e destaque: assim as bordas esquerda e direita batem em tudo,
   em vez de o texto correr mais largo que as listas. */
/* A medida vai no contêiner (o .wrap já traz o respiro lateral) e os filhos
   soltam a própria trava, senão parágrafo e tabela param em pontos diferentes. */
.prosa.legal{ max-width: 78ch; }
.prosa.legal > p, .prosa.legal ul, .prosa.legal li{ max-width: none; }
.prosa.legal .atualizado{ margin-bottom: 30px; padding-bottom: 18px; border-bottom: 1px solid var(--linha); }
.prosa.legal h3{ margin-bottom: 12px; }
.prosa.legal table{ margin-top: 4px; }
.prosa.legal > p:last-child, .prosa.legal > ul:last-child{ margin-bottom: 0; }

/* Link de pulo, visível só ao foco de teclado. */
.pula{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--sol); color:var(--espuma);
  padding:14px 20px; font-family:var(--leitura); font-size:var(--t-sm); font-weight:600; text-decoration:none; }
.pula:focus{ left:0; }

/* ==========================================================
   DEPOIMENTOS
   Prova social. Enquanto os textos reais não chegam, os
   cartões ficam marcados como reservados.
   ========================================================== */

/* A grade acompanha a quantidade de depoimentos: com dois cartões eles
   ocupam metade cada, sem deixar buraco de terceira coluna. */
.depoimentos{ display: grid; gap: clamp(24px, 3vw, 38px); width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
@media (max-width: 940px){ .depoimentos{ grid-template-columns: 1fr; } }

.depoimento{
  display: flex; flex-direction: column; gap: 18px;
  border-top: 1px solid var(--linha-forte); padding-top: 22px;
}
.depoimento blockquote{ margin: 0; }
.depoimento blockquote p{
  font-family: var(--sonho); font-weight: 300; font-style: italic;
  font-size: clamp(1.15rem, 2.1vw, 1.42rem); line-height: 1.42; color: var(--tinta);
}
.depoimento blockquote p::before{ content: "“"; margin-right: .06em; }
.depoimento blockquote p::after{ content: "”"; }
.depoimento .assina{ margin-top: auto; display: flex; flex-direction: column; gap: 3px; }
.depoimento .quem-d{ font-family: var(--leitura); font-size: var(--t-sm); font-weight: 600; color: var(--tinta); }
.depoimento .cargo-d{ font-family: var(--leitura); font-size: var(--t-sm); line-height: 1.45; color: var(--tinta-fraca); }
.depoimento .inst-d{ font-family: var(--leitura); font-size: var(--t-xs); letter-spacing: .13em; text-transform: uppercase; color: var(--sol); margin-top: 4px; }

/* Marca de espaço reservado. Some sozinha quando o depoimento é real. */
.depoimento.reservado blockquote p{ color: var(--tinta-fraca); }
.depoimento.reservado{ border-top-style: dashed; }
.depoimento .selo-reservado{
  align-self: start; font-family: var(--leitura); font-size: .64rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--sol);
  border: 1px dashed var(--sol); padding: 4px 9px;
}

/* ==========================================================
   REVISÃO DE LAYOUT · faixas de ambiente e pilares
   ========================================================== */

/* Textura de papel. Grão gerado por filtro SVG em data URI: 294 bytes,
   sem requisição e sem imagem para carregar. */
.papel::before{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.42'/%3E%3C/svg%3E");
  opacity: .5; mix-blend-mode: multiply;
}

/* ---------- Faixa de citação ---------- */

.faixa-citacao{
  position: relative; overflow: hidden;
  background:
    radial-gradient(90% 120% at 12% 0%, rgba(126,167,183,.22) 0%, transparent 62%),
    linear-gradient(104deg, var(--areia) 0%, #F1E7D6 46%, var(--espuma) 100%);
  border-block: 1px solid var(--linha);
  padding-block: clamp(64px, 8vw, 112px);
}
/* Sombra de folhagem: traçada em SVG, no lugar da foto de praia do layout. */
.faixa-citacao .folhagem{
  position: absolute; inset: 0; pointer-events: none;
  opacity: .13; overflow: hidden;
}
.faixa-citacao .folhagem svg{ position: absolute; top: -14%; right: -10%; width: clamp(340px, 46vw, 680px); height: auto; }
.faixa-citacao-grid{
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 60px); align-items: center;
}
.faixa-citacao blockquote{
  margin: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: clamp(14px, 2vw, 24px);
  align-items: start;
}
.faixa-citacao .aspas{
  font-family: var(--hemingway); font-size: clamp(3.4rem, 6vw, 5rem);
  line-height: .72; color: var(--sol); opacity: .78;
}
.faixa-citacao p{
  font-family: var(--sonho); font-weight: 300;
  font-size: clamp(1.35rem, 3vw, 2.15rem); line-height: 1.3;
  color: var(--tinta); max-width: 26ch; margin: 0;
}
/* A nota da direita é manuscrita, como no layout: a voz da margem. */
.faixa-citacao .assinatura-nota{
  font-family: var(--mao); font-size: clamp(1.1rem, 1.7vw, 1.38rem);
  color: var(--mato-escuro); line-height: 1.45; text-align: right;
  max-width: 20ch; transform: rotate(-1.4deg);
}
@media (max-width: 860px){
  .faixa-citacao-grid{ grid-template-columns: 1fr; gap: 22px; }
  .faixa-citacao .assinatura-nota{ text-align: left; }
}

/* ---------- Jeito de trabalhar: foto + quatro pilares ---------- */

.jeito-grid{
  display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr);
  gap: clamp(26px, 4vw, 58px); align-items: center;
}
.jeito-foto{ margin: 0; position: relative; aspect-ratio: 4 / 5; }
.jeito-foto img{ width: 100%; height: 100%; object-fit: cover; object-position: center 24%; }
.jeito-foto::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid rgba(58,58,58,.12);
  box-shadow: 0 26px 48px -32px rgba(58,58,58,.6);
}
.pilares-jeito{
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
  border-top: 1px solid var(--linha); padding-top: clamp(22px, 2.6vw, 32px);
  margin-top: clamp(6px, 1.4vw, 16px);
}
.pilar-jeito{ display: flex; flex-direction: column; gap: 9px; }
.pilar-jeito svg{ width: 34px; height: 34px; }
.pilar-jeito svg *{ stroke: var(--sol); }
.pilar-jeito b{
  font-family: var(--leitura); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .02em; color: var(--tinta);
}
.pilar-jeito span{ font-size: var(--t-xs); line-height: 1.6; color: var(--tinta-fraca); letter-spacing: 0; text-transform: none; }
@media (max-width: 940px){
  .jeito-grid{ grid-template-columns: 1fr; }
  .jeito-foto{ aspect-ratio: 16 / 10; max-height: 340px; }
  .pilares-jeito{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
}
@media (max-width: 460px){ .pilares-jeito{ grid-template-columns: 1fr; } }

/* ---------- Selo de avaliações do Google ---------- */

.selo-google{
  display: inline-flex; align-items: center; gap: 12px;
  padding: 11px 20px;
  background: var(--espuma);
  border: 1px solid var(--linha-forte); border-radius: 999px;
  text-decoration: none; color: inherit;
  transition: border-color .25s ease, box-shadow .25s ease;
}
a.selo-google:hover{
  border-color: var(--sol);
  box-shadow: 0 10px 24px -18px rgba(58,58,58,.8);
}
.selo-g-nota{
  font-family: var(--hemingway); font-size: 1.42rem; line-height: 1;
  color: var(--tinta);
}
.selo-g-estrelas{ display: inline-flex; gap: 3px; }
.selo-g-estrelas svg{ width: 15px; height: 15px; fill: var(--estrela); flex: none; }
.selo-g-texto{
  font-family: var(--leitura); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .06em; color: var(--tinta-fraca); white-space: nowrap;
}
@media (max-width: 520px){
  .selo-google{ gap: 9px; padding: 10px 15px; }
  .selo-g-nota{ font-size: 1.24rem; }
  .selo-g-texto{ letter-spacing: .03em; }
}

/* Cabeçalho dos depoimentos: título à esquerda, selo à direita */
.dep-cabeca{
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 20px clamp(20px, 3vw, 40px); width: 100%;
}

/* Origem da avaliação: dito em texto, para o leitor saber que o depoimento
   é público e verificável, e não um recorte escolhido a dedo. */
.depoimento .fonte-d{
  display: block; margin-top: 7px;
  font-family: var(--leitura); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-fraca);
}

/* A faixa de marcos virou parte da seção de pesquisa, então perde o fundo e
   as bordas que tinha quando era uma faixa solta embaixo do hero. */
#pesquisa .sondagens-grid{
  border-top: 1px solid var(--linha);
  padding-top: clamp(26px, 3.2vw, 38px);
}

/* ==========================================================
   ALINHAMENTO DAS COLUNAS · revisão de outubro
   ========================================================== */

/* Texto e foto lado a lado: a fatia maior vai para o texto, que é quem
   tem lista e botões. Com a proporção anterior os dois CTAs quebravam em
   duas linhas e a coluna esquerda ficava 70px mais alta que a foto. */
@media (min-width: 941px){
  .duas.assim{ grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); }
}

/* A foto acompanha a altura da coluna de texto, para o par terminar na
   mesma linha. O recorte usa um foco por imagem, definido no HTML, para
   a Raisa nunca sair do enquadramento quando a altura muda. */
.duas{ align-items: stretch; }
/* Só a foto acompanha a altura. Qualquer outra coluna mantém a altura do
   próprio conteúdo: esticada, ela abre um vazio no fim do bloco. */
/* A altura da linha vem sempre da coluna de texto. A foto sai da conta
   (height: 0) e depois preenche (min-height: 100%), então ela nunca é
   quem estica o bloco: antes, uma foto em retrato deixava 259px de vazio
   embaixo do texto ao lado. */
.duas > .prancha{ height: 0; min-height: 100%; }
/* O eleventy-img devolve <picture>, então é ele o filho do quadro, não a
   <img>. Em vez de brigar com o flex, a imagem sai do fluxo e preenche a
   caixa interna (inset bate com o padding de 9px do quadro). */
.duas > .prancha .quadro{ flex: 1 1 auto; min-height: 0; position: relative; }
.duas > .prancha .quadro > picture{ position: absolute; inset: 9px; display: block; }
.duas > .prancha .quadro img{
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--foco-x, center) var(--foco-y, center);
}
@media (max-width: 940px){
  /* Empilhado, a foto volta a ter altura própria: esticar não faz sentido
     quando não existe coluna ao lado para acompanhar. */
  .duas > .prancha{ height: auto; min-height: 0; }
  .duas > .prancha .quadro{ position: static; }
  .duas > .prancha .quadro > picture{ position: static; inset: auto; }
  .duas > .prancha .quadro img{ height: auto; aspect-ratio: auto; }
}

/* ---------- Respiro no celular ---------- */
/* No desktop o ar entre blocos é parte do desenho. No celular ele vira
   rolagem vazia: a primeira dobra sozinha deixava 101px em branco embaixo
   da foto, mais a onda e o respiro da seção seguinte. */
@media (max-width: 640px){
  .horizonte{
    min-height: 0;
    padding-top: calc(var(--barra) + var(--topo-h) + clamp(10px, 2vh, 22px));
    padding-bottom: clamp(40px, 6vh, 64px);
  }
  .rodape-hero{ height: clamp(30px, 4.5vh, 48px); }
  section{ padding-block: clamp(48px, 11vw, 70px); }
  .faixa-citacao{ padding-block: clamp(44px, 10vw, 64px); }
  .rodape{ padding-block: clamp(34px, 8vw, 48px) 20px; }
  .hero-grid{ gap: clamp(18px, 4vw, 28px); }
  /* O círculo do sol passava 4px da borda e criava rolagem lateral.
     Em tela estreita ele fica atrás da foto de qualquer jeito. */
  .disco-sol{ display: none; }
  .stack{ gap: clamp(14px, 3.4vw, 22px); }
}

/* ---------- Newsletter: consentimento e resposta ---------- */

.carta-form{ flex-direction: column; align-items: stretch; gap: 14px; }
.carta-linha{ display: flex; flex-wrap: wrap; gap: 10px; }
.pula-visual{
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}
.carta-consent{
  display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start;
  font-size: var(--t-xs); line-height: 1.6; color: #544E45; cursor: pointer; max-width: 62ch;
}
.carta-consent input{ margin: 3px 0 0; width: 17px; height: 17px; accent-color: var(--sol); }
.carta-consent a{ color: var(--sol); }
.carta-aviso{
  margin: 0; font-family: var(--leitura); font-size: var(--t-sm); line-height: 1.5;
  padding: 11px 14px; border-left: 2px solid var(--sol); background: rgba(250,247,242,.7);
  color: var(--tinta); max-width: 62ch;
}
.carta-aviso.ok{ border-left-color: var(--zap); }
.carta-form.enviando button{ opacity: .6; pointer-events: none; }