/* Versão 3 (09/11/2026): o primeiro design, em fundo branco, com fotos grandes da Duda e os elementos do blog da Portal
   (selos em pílula, cartões brancos com sombra, cartões de post, rodapé em colunas). Sem bloco de fundo roxo:
   o roxo fica só em botão, palavra em destaque e detalhe. Carrega depois do style.css. */
:root,:root[data-theme="light"]{
  --fundo:#FFFFFF; --papel:#FFFFFF; --tinta:#1B0E30; --suave:#5D536E; --linha:#EAE5F2;
  --lilas:#F4EFFB; --lilas-forte:#CDB8F0; --claro:#FAF8FD;
  --roxo:#2E1052; --realce:#5A2FB0; --sobre-roxo:#FFFFFF;
  --sombra:0 2px 6px rgba(27,14,48,.04),0 22px 48px -28px rgba(46,16,82,.30);
  --raio:20px;
  --titulo:"Montserrat",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --texto:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Manrope",ui-sans-serif,system-ui,sans-serif;
  color-scheme:light;
}
body{-webkit-user-select:auto;user-select:auto;background:#FFFFFF}
img{pointer-events:auto}

/* selo em pílula, como as categorias do blog */
.rotulo{display:inline-block;justify-self:start;width:max-content;max-width:100%;font:700 .74rem/1 var(--texto);letter-spacing:.06em;
  text-transform:uppercase;color:var(--realce);background:var(--lilas);padding:9px 15px;border-radius:999px}
.bloco{border-top:0;background:#FFFFFF}
main>.bloco:nth-of-type(odd){background:var(--claro)}

/* botões */
.btn{font:700 .98rem/1 var(--texto);border-radius:12px}
.btn-roxo:hover{background:#431A78}
.btn-contorno{background:#FFFFFF;border:1.5px solid var(--linha)}
.btn-contorno:hover{border-color:var(--lilas-forte)}

/* topo branco */
.topo{background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.topo.rolou{border-color:transparent;box-shadow:0 2px 16px rgba(27,14,48,.07)}
.logo{height:42px}
.topo.rolou .logo{height:36px}
.menu{font:600 .93rem var(--texto);letter-spacing:0;text-transform:none;gap:30px;margin-inline:auto}
.menu a{color:var(--tinta)}
.menu a:hover{color:var(--realce)}
.marca{margin-right:0}

/* primeira tela: branca, com a foto grande da Duda */
.hero-faixa{position:relative;overflow:hidden;isolation:isolate;background:#FFFFFF}
.hero-faixa::before{content:"";position:absolute;z-index:-1;right:-180px;top:-220px;width:760px;height:760px;border-radius:50%;
  background:radial-gradient(closest-side,#EFE6FB 0%,rgba(239,230,251,0) 100%)}
.hero-faixa::after{content:"";position:absolute;z-index:-1;left:-260px;bottom:-320px;width:620px;height:620px;border-radius:50%;
  border:1px solid var(--linha);box-shadow:0 0 0 70px #FFFFFF,0 0 0 71px var(--linha)}
.hero{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(40px,7vw,120px);
  padding-top:calc(140px + env(safe-area-inset-top,0px));padding-bottom:clamp(64px,8vw,110px)}
.hero-texto{gap:24px}
.migalha{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;font:600 .84rem var(--texto);color:var(--suave)}
.migalha span+span::before{content:"›";margin-right:8px;color:var(--lilas-forte)}
.hero h1{font-size:clamp(2.4rem,4.9vw,4.1rem);line-height:1.04}
.hero h1.longo{font-size:clamp(1.75rem,3.3vw,2.85rem);line-height:1.14;letter-spacing:-.025em}
.hero-apoio{font-size:1.08rem}
.quem-responde{font-weight:600}
.quem-responde::before{content:"";width:9px;height:9px;border-radius:50%;background:#25D366;box-shadow:0 0 0 4px rgba(37,211,102,.18);flex:none}

.hero-visual{position:relative;justify-self:end;width:min(100%,500px);padding-bottom:76px}
.hero-foto{margin:0;aspect-ratio:4/5;border-radius:260px 260px 28px 28px;overflow:hidden;background:var(--lilas);
  box-shadow:0 0 0 12px #FFFFFF,0 0 0 13px var(--linha),0 50px 90px -50px rgba(46,16,82,.55)}
.hero-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.selo-nome{position:absolute;right:-18px;bottom:128px;background:#FFFFFF;border-radius:14px;padding:12px 18px;box-shadow:var(--sombra);
  font:500 .8rem/1.35 var(--texto);color:var(--suave)}
.selo-nome b{display:block;font:800 .98rem var(--titulo);color:var(--tinta)}
/* a animação do anúncio virando conversa vira um cartão por cima da foto */
.hero-visual .tela{position:absolute;left:-96px;bottom:0;width:286px;padding:14px;gap:10px;border:0;border-radius:20px;
  box-shadow:0 2px 6px rgba(27,14,48,.06),0 30px 60px -24px rgba(46,16,82,.45)}
.hero-visual .tela-busca{min-height:40px;padding:8px 14px;font-size:.78rem;white-space:nowrap;overflow:hidden}
.hero-visual .tela-anuncio{padding:11px 13px;border-radius:12px}
.hero-visual .tela-meta{font-size:.68rem}
.hero-visual .tela-titulo{font-size:.9rem}
.hero-visual .tela-desc{font-size:.74rem;line-height:1.4}
.hero-visual .tela-linhas{display:none}
.hero-visual .balao{font-size:.78rem;padding:8px 12px 16px;max-width:88%}
.hero-visual .tela-agenda{font-size:.74rem;padding:9px 12px;border-radius:12px}
.hero-visual .tela-agenda b{font-size:.84rem}
.hero-visual .tela-agenda svg{width:26px;height:26px}
.hero-visual .tela figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* faixa de bairros */
.faixa{background:#FFFFFF;color:var(--tinta);border-block:1px solid var(--linha)}
.faixa span{font:700 .8rem var(--texto);text-transform:uppercase;letter-spacing:.06em;color:var(--suave)}
.faixa span::after{background:var(--lilas-forte)}

/* cartões brancos com sombra, no formato dos posts do blog */
.passo,.cartao,.etapa,.lado,.planilha,.depo,.form,.post,.perguntas{background:#FFFFFF;border:0;border-radius:var(--raio);box-shadow:var(--sombra)}
.passo{padding:12px 12px 22px}
.passo>p{padding-inline:8px}
.passo-mini{background:var(--lilas);border:0;border-radius:14px}
.passo-num,.etapa-num,.funil-nota{font-family:var(--texto);font-weight:700}
.cartao:hover{box-shadow:0 2px 6px rgba(27,14,48,.05),0 30px 56px -26px rgba(46,16,82,.45)}
.cartao svg{width:52px;height:52px;padding:10px;border-radius:14px;background:var(--lilas)}
.lado.sim{background:var(--lilas);box-shadow:none}
.planilha .planilha-topo{background:var(--lilas);color:var(--realce);font-weight:700}
.planilha>div b{font:700 .86rem var(--texto)}
.locais li,.creds li{background:var(--lilas);color:var(--roxo);border:0;font-weight:700;border-radius:999px;font-size:.88rem}
.creds{display:flex;flex-wrap:wrap}

/* problema: foto larga ao lado do funil */
.problema-meio{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;margin-top:clamp(44px,6vw,80px)}
.problema-meio .funil{margin-top:0}
.foto-larga{margin:0;border-radius:28px;overflow:hidden;aspect-ratio:16/11;background:var(--lilas);box-shadow:0 50px 90px -50px rgba(46,16,82,.5)}
.foto-larga img{width:100%;height:100%;object-fit:cover}
.problema-meio .funil-linha{grid-template-columns:150px 1fr}

/* números: brancos, com o número em roxo */
.numeros{background:#FFFFFF;color:var(--tinta);border-block:1px solid var(--linha)}
.numeros>*{min-width:0}
.numero{border-left:3px solid var(--lilas-forte)}
.numero strong{color:var(--realce)}
.numero>span{color:var(--suave)}

/* depoimentos sem bloco roxo */
.depo-grande{background:var(--lilas);color:var(--tinta);box-shadow:none}
.depo-grande p::before{color:var(--realce)}
.depo-grande footer,.depo footer{color:var(--suave);font:700 .78rem var(--texto)}

/* duda: foto grande em arco */
.duda{grid-template-columns:minmax(0,.9fr) minmax(0,1fr)}
.duda-foto{max-width:520px;width:100%;justify-self:center;border-radius:280px 280px 28px 28px;
  box-shadow:0 0 0 12px #FFFFFF,0 0 0 13px var(--linha),0 50px 90px -50px rgba(46,16,82,.5)}
.duda-foto img{aspect-ratio:4/5;object-position:50% 12%}

/* cartões de post do blog */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post{display:grid;grid-template-rows:auto 1fr;overflow:hidden;text-decoration:none;color:inherit;transition:transform .3s var(--ease),box-shadow .3s}
.post:hover{transform:translateY(-5px);box-shadow:0 2px 6px rgba(27,14,48,.05),0 34px 60px -26px rgba(46,16,82,.5)}
.post img{width:100%;aspect-ratio:16/10;object-fit:cover}
.post div{padding:22px 24px 26px;display:grid;gap:14px;align-content:start}
.post .rotulo{font-size:.68rem;padding:7px 12px}
.post h3{font:700 1.08rem/1.35 var(--titulo);letter-spacing:-.01em}
.post span{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.9rem;color:var(--realce);align-self:end}
.post:hover span svg{transform:translateX(4px)}
.post span svg{transition:transform .25s var(--ease)}

/* perguntas numa caixa branca */
.perguntas{border-top:0;padding:6px 28px}
details:last-child{border-bottom:0}
summary{font:700 1.04rem var(--texto)}

/* diagnóstico: painel lilás claro, foto maior da Duda */
main>.bloco.diagnostico{background:var(--lilas)}
.diagnostico .rotulo{background:#FFFFFF}
/* seções em duas colunas alinhadas com o resto da página */
.relatorio,.metodo,.duda,.diagnostico{padding-inline:max(var(--lateral),calc((100% - var(--max)) / 2))}
.relatorio-texto{justify-self:start}
.perguntas{max-width:var(--max)}
.assinatura{gap:18px;font-size:.92rem}
.assinatura img{width:136px;height:136px;object-position:50% 20%;box-shadow:0 0 0 5px #FFFFFF,0 0 0 6px var(--lilas-forte)}
.assinatura b{font:800 1.08rem var(--titulo)}
.form input:not([type=radio]),.form select{background:var(--claro);border-color:var(--linha)}

/* rodapé claro, em colunas, como o do blog */
.rodape{background:#FFFFFF;color:var(--suave);display:block;border-top:1px solid var(--linha);padding:0 var(--lateral) calc(24px + env(safe-area-inset-bottom,0px))}
.rodape>*{max-width:var(--max);margin-inline:auto}
.rodape-topo{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:34px 0;border-bottom:1px solid var(--linha)}
.rodape-topo .logo{height:40px}
.subir{display:inline-flex;align-items:center;gap:12px;background:var(--lilas);color:var(--roxo);border-radius:10px;padding:12px 18px;font-weight:700;font-size:.9rem;text-decoration:none}
.subir:hover{background:#EADFF9}
.rodape-colunas{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding:44px 0}
.rodape-colunas h3{color:var(--tinta);font-size:1.02rem;margin-bottom:16px}
.rodape-colunas p,.rodape-colunas a{font-size:.95rem}
.rodape-colunas nav{display:grid;gap:10px}
.rodape-colunas nav a{text-decoration:none}
.rodape a:hover{color:var(--realce)}
.btn-linha{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;margin-top:22px;border:1.5px solid var(--roxo);
  border-radius:10px;padding:14px 18px;color:var(--roxo)!important;text-decoration:none;font-weight:700;font-size:.92rem;min-width:240px}
.btn-linha:hover{background:var(--lilas)}
.contato-linha{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.contato-linha svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--realce);stroke-width:1.8}
.rodape-legal{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;border-top:1px solid var(--linha);padding-top:22px;font-size:.82rem}

@media (max-width:1180px){
  .hero-visual .tela{left:-40px;width:262px}
  .selo-nome{right:-8px}
}
@media (max-width:1080px){
  .menu{margin-inline:0}
  .menu.aberto{background:#FFFFFF}
}
@media (max-width:860px){
  .hero,.duda{grid-template-columns:1fr}
  .hero{padding-top:calc(96px + env(safe-area-inset-top,0px));gap:44px}
  .hero-texto{gap:18px}
  .hero-acoes{order:0}
  .hero-apoio{order:1;font-size:1rem}
  .quem-responde{order:2}
  .hero h1{font-size:clamp(2.1rem,9vw,2.8rem)}
  .hero h1.longo{font-size:clamp(1.55rem,6.9vw,2.1rem)}
  .hero-acoes .btn{flex:1 1 100%}
  .hero-visual{justify-self:center;width:min(88%,420px);padding-bottom:0}
  .hero-visual .tela{position:relative;left:auto;bottom:auto;width:94%;margin:-72px 0 0 -6%}
  .selo-nome{display:none}
  /* no celular o cartão aparece inteiro desde o começo, só a busca é digitada */
  .hero-visual .tela.rodando :is(.tela-anuncio,.balao,.tela-agenda){opacity:1;transform:none}
  .hero-visual .tela.rodando .ok{stroke-dashoffset:0}
  .quem-responde{padding-right:64px}
  .problema-meio,.posts,.rodape-colunas{grid-template-columns:1fr}
  .rodape-topo{flex-direction:column;align-items:flex-start}
  .duda-foto{max-width:420px}
}
@media (max-width:540px){
  .assinatura img{width:92px;height:92px}
  .migalha{display:none}
  .perguntas{padding-inline:18px}
  .problema-meio .funil-linha{grid-template-columns:1fr}
}
@media (min-width:1800px){
  :root{--max:1320px}
  .hero-visual{width:min(100%,560px)}
}

/* botão com texto em duas linhas no celular */
.btn{line-height:1.25}
.blog-todos{text-align:center;margin-top:40px}