/* ═══════════════════════════════════════════════════════════════
   KAia · estilo da página inicial
   ───────────────────────────────────────────────────────────────
   Este arquivo era um bloco <style> dentro do index.html. Saiu de lá
   por um motivo medido: a home tinha 97KB, e a folha de estilo é a
   parte que NÃO muda entre uma visita e outra. Embutida, ela era
   rebaixada junto com o HTML toda vez. Em arquivo próprio, o
   navegador guarda e a segunda visita abre sem baixar nada disso.

   Carrega depois de `kaia-ui.css` no <head>, e essa ordem importa:
   o que está aqui é feito para vencer a folha compartilhada quando
   as duas falam da mesma coisa.

   Cuidado ao mover regra para cá: caminho de imagem tem que ser
   absoluto (começar com `/`). Relativo aqui resolve a partir de
   /assets/, não da página, e vira 404 silencioso.
   ═══════════════════════════════════════════════════════════════ */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

/* ─── TEMA ESCURO (21/08) ────────────────────────────────────────────
   Os tokens em si (--k-areia, --k-tinta etc.) trocam sozinhos — a
   versão escura mora em assets/kaia-ui.css, sob body.k-escuro. Aqui só
   os dois pontos que dependem de --k-areia como cor de TEXTO sobre um
   fundo que já era escuro antes do tema escuro existir (a seção .dor e
   o hover do botão fantasma sobre fundo petróleo): se --k-areia virasse
   escuro ali, o texto sumiria sobre o próprio fundo escuro que já
   tinham. Troca pra --k-tinta, que no tema escuro já é a versão clara. */
body.k-escuro .btn-ghost:hover{color:var(--k-tinta)}
body.k-escuro .dor{color:var(--k-tinta)}

/* Botão de alternância de tema, no cabeçalho — um "ícone mudo" (só a
   lua, sem texto) escondia o que ele faz: quase ninguém clicava sem
   saber o que ia acontecer. Vira um cardzinho pequeno com ícone + a
   ação, igual ao "Já é assinante?" ao lado. */
.tema-toggle{
  display:inline-flex;align-items:center;gap:7px;
  height:44px;padding:0 14px;border-radius:999px;flex:none;
  border:1px solid var(--k-linha);background:var(--k-papel);color:var(--k-tinta-suave);
  cursor:pointer;font-size:.86rem;line-height:1;font-weight:400;
  transition:border-color .2s,color .2s;white-space:nowrap;
}
.tema-toggle:hover{border-color:var(--k-camelo);color:var(--k-camelo)}
.tema-toggle-ico{font-size:1rem;line-height:1}
body{
  font-family:var(--k-sans);
  background:var(--k-areia);
  color:var(--k-tinta);
  font-size:17px;
  line-height:1.65;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.wrap-narrow{max-width:780px;margin:0 auto;padding:0 28px}

/* Achado da régua apple-design, princípio 15 (tipografia): "tracking é
   específico de tamanho — nunca um valor só para todos os tamanhos".
   Era um -.01em fixo pros três níveis, do h1 de 4,6rem ao h3 de 1,5rem
   — quase 3x de diferença de tamanho com o mesmo aperto entre letras.
   Título grande pede tracking mais negativo (letras nascem mais
   afastadas conforme crescem); h3, perto do corpo de texto, quase não
   precisa de ajuste. Cada nível ganhou o próprio valor, escalando com
   o tamanho. */
h1,h2,h3{font-family:var(--k-serif);font-weight:400;line-height:1.12}
h1{font-size:clamp(2.6rem,6.2vw,4.6rem);letter-spacing:-.022em;line-height:1.08}
h2{font-size:clamp(2rem,4.4vw,3.2rem);letter-spacing:-.015em}
h3{font-size:1.5rem;letter-spacing:-.006em}

.olho{
  font-family:var(--k-sans);font-size:.72rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--k-camelo);
  margin-bottom:20px;display:block;
}
.lead{font-size:1.18rem;color:var(--k-tinta-suave);font-weight:300}
.serif-it{font-family:var(--k-serif);font-style:italic;font-weight:400}

/* ─── botões ─────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--k-sans);font-size:.95rem;font-weight:500;letter-spacing:.04em;
  padding:16px 34px;border-radius:var(--k-raio);border:1px solid transparent;
  text-decoration:none;cursor:pointer;transition:all .22s ease;
}
.btn-primary{background:var(--k-terracota);color:#fff}
.btn-primary:hover{background:var(--k-terracota-escuro);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--k-petroleo);border-color:var(--k-petroleo)}
.btn-ghost:hover{background:var(--k-petroleo);color:var(--k-areia)}
.btn-wpp{background:#fff;color:var(--k-tinta);border-color:var(--k-linha)}
.btn-wpp:hover{border-color:var(--k-camelo)}
.btn-lg{padding:19px 44px;font-size:1rem}

/* ─── topo ───────────────────────────────── */
/* Achado da régua apple-design, princípio 12 (materiais): "efeito de
   borda de rolagem, não divisor rígido — em vez de uma borda de 1px
   fixa sob um cabeçalho fixo, esmaeça um blur/gradiente só onde o
   painel flutuante realmente sobrepõe conteúdo". Era exatamente o
   anti-padrão nomeado: uma linha de 1px sempre visível, mesmo no topo
   da página, quando não há nada por baixo pra separar.

   A solução já existia pela metade — `.topo.rolou` adiciona uma sombra
   suave quando `window.scrollY > 12` (index.html), ou seja, só quando
   já há conteúdo passando por baixo do vidro. Bastou tirar a borda fixa
   e deixar essa sombra condicional ser o único indicador de separação:
   ela nasce com a rolagem, não existe antes dela. */
.topo{
  position:sticky;top:0;z-index:60;
  background:rgba(250,247,240,.92);backdrop-filter:blur(12px);
}
/* Achado do princípio 14 (movimento reduzido): nada aqui tratava
   `prefers-reduced-transparency`. Quem pede isso quer o vidro
   engrossado — mais opaco, sem desfoque — e não recebia nada. As duas
   únicas superfícies translúcidas do site (o cabeçalho e o fundo do
   modal, ver .k-modal-fundo em kaia-ui.css) ganham a mesma regra. */
@media (prefers-reduced-transparency:reduce){
  .topo{background:var(--k-areia);backdrop-filter:none}
  body.k-escuro .topo{background:var(--k-areia)}
}
/* O fundo do cabeçalho é translúcido (vidro sobre o conteúdo que rola
   por trás), então não dá pra ler --k-areia direto — precisa do rgba
   próprio. Mesmo valor de --k-areia no tema escuro (#211E1A), só
   convertido pra rgba com a mesma opacidade. */
body.k-escuro .topo{background:rgba(33,30,26,.92)}
/* gap:32px é o respiro MÍNIMO garantido entre a marca e o menu — sem
   isto, "space-between" só abre vão quando sobra espaço, e quando o
   conteúdo dos dois lados já enche o .wrap (era o caso aqui, mascarado
   até agora pelo bug de "KARINA DIAS" quebrando ao meio, que encolhia
   a marca e sobrava vão de graça) os dois ficam colados.
   max-width:1360px (o .wrap comum trava em 1120px): o cabeçalho tem
   marca + 4 links + "Já é assinante?" + o alternador de tema + botão —
   mais conteúdo do que qualquer outra faixa do site, e é o único lugar
   que precisa de mais fôlego que 1120px pra caber numa linha sem
   forçar o menu-hambúrguer cedo demais (era o caso: 1280px, uma
   largura de notebook comum, já caía no hambúrguer sem necessidade
   real de espaço). */
.topo-in{display:flex;align-items:center;justify-content:space-between;gap:32px;height:74px;max-width:1360px}
.marca{
  font-family:var(--k-serif);font-size:1.35rem;letter-spacing:.16em;color:var(--k-petroleo);
  display:flex;align-items:center;gap:12px;text-decoration:none;
  min-height:44px;
}
/* "KARINA DIAS" é span filho de um flex container — sem isto, o navegador
   encolhe o span pro min-content (a palavra mais larga, não a frase
   inteira) sempre que o menu ao lado disputa espaço, e "KARINA DIAS"
   quebra ao meio ("KARINA" numa linha, "DIAS" na outra) — três linhas
   de texto tentando caber nos 74px do cabeçalho, estourando por cima E
   por baixo da barra. Mesmo tratamento que .nav a já tinha. */
.marca > span{white-space:nowrap}
.marca-simbolo{width:26px;height:29px;flex:none;color:var(--k-terracota)}
@media(max-width:420px){.marca{font-size:1.12rem;gap:9px}.marca-simbolo{width:22px;height:24px}}
.marca small{display:block;font-family:var(--k-sans);font-size:.56rem;letter-spacing:.32em;color:var(--k-camelo);margin-top:-2px;font-weight:400}
.nav{display:flex;align-items:center;gap:26px}
.nav a{font-size:.9rem;text-decoration:none;color:var(--k-tinta-suave);transition:color .2s;
        display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
.nav a:hover{color:var(--k-petroleo)}
.nav .btn{padding:11px 24px;font-size:.87rem}
/* Entrar não compete com Assinar: fica em texto, com o verbo em
   destaque e um traço embaixo, para o olho achar sem o botão perder a
   primazia. */
.nav-login strong{color:var(--k-petroleo);font-weight:500;margin-left:5px;
  border-bottom:1px solid rgba(58,90,133,.35);padding-bottom:1px}
.nav-login:hover strong{border-bottom-color:var(--k-petroleo)}
.topo{transition:box-shadow .25s ease,background .25s ease}
.topo.rolou{box-shadow:0 1px 20px rgba(42,39,36,.07)}

/* ─── peças novas: selo de vagas, ilustrações, divisor ──────────────
   As ilustrações são da própria Karina. Entram como respiro e como
   assinatura visual — é o que faz a página parecer dela, e não de um
   template comprado. */
/* O selo de escassez vive em kaia-ui.css como `.k-selo-vagas`, para
   valer em qualquer página. Aqui fica só o espaçamento da vitrine. */
.selo-vagas{margin-bottom:22px}

.passo{position:relative}
.passo-icone{
  width:76px;height:76px;object-fit:cover;margin-bottom:20px;
  border-radius:50%;padding:8px;
  background:var(--k-areia-2);box-shadow:0 0 0 1px var(--k-linha);
}

.estrela-divisor{
  display:flex;align-items:center;justify-content:center;gap:20px;
  padding:8px 0 0;
}
.estrela-divisor::before,.estrela-divisor::after{
  content:'';height:1px;width:min(24vw,150px);background:var(--k-linha);
}
.estrela-divisor img{
  width:52px;height:52px;object-fit:cover;border-radius:50%;
  padding:7px;background:var(--k-areia-2);box-shadow:0 0 0 1px var(--k-linha);
}

/* O adesivo "eu amo criar" tem quase 40% de fundo branco no arquivo.
   Sem tratamento aparecia como um retângulo bege flutuando. mix-blend
   funde o branco com o creme da seção — o adesivo passa a "existir"
   direto no papel, sem borda em volta. E como não há mais moldura,
   também não precisa mais de sombra: a rotação leve já dá o gesto. */
.karina-adesivo{
  width:190px;height:auto;margin-top:24px;
  transform:rotate(-2.5deg);
  mix-blend-mode:multiply;
}
@media(max-width:900px){.karina-adesivo{width:160px;margin-left:auto;margin-right:auto;display:block}}

/* Nota de venda direta, no rodapé da seção de planos. */
.nota-fiscal{
  font-size:.8rem;color:var(--k-tinta-suave);text-align:center;
  margin-top:18px;opacity:.85;
}

/* ─── menu no celular ─────────────────────
   Antes os links simplesmente sumiam abaixo de 860px e a navegação
   morria no celular. Agora viram um painel que desce do topo. */
.menu-btn{
  display:none;width:44px;height:44px;border:none;background:none;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0;
  -webkit-tap-highlight-color:transparent;
}
.menu-btn span{
  display:block;width:22px;height:1.5px;background:var(--k-petroleo);
  transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .2s ease;
}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Era 860px. Junto com o conserto de "KARINA DIAS" quebrando ao meio
   (ver .marca acima) e o respiro mínimo garantido entre marca e menu
   (.topo-in gap:32px — os dois bugs se escondiam um atrás do outro: a
   marca quebrando ao meio encolhia sozinha e sobrava vão de graça,
   mascarando que o cabeçalho nunca teve vão nenhum garantido de
   verdade), o cabeçalho de uma linha só passou a precisar de mais
   espaço do que os 1120px do .wrap comum davam — por isso .topo-in
   também ganhou seu próprio max-width:1360px. Medido ao vivo, com o
   menu numa linha só: estourava rolagem lateral até 1200px; 1250px já
   estava limpo. 1259px é o ponto de corte — abaixo de 1280px (a
   própria largura de notebook comum que os testes usam como
   referência), pra 1280px cair do lado da linha única, com folga
   de sobra. */
@media(max-width:1259px){
  .menu-btn{display:flex}
  .nav{
    position:fixed;left:0;right:0;top:74px;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--k-papel);border-bottom:1px solid var(--k-linha);
    padding:8px 24px calc(22px + env(safe-area-inset-bottom,0px));
    box-shadow:0 18px 40px rgba(42,39,36,.12);
    transform:translateY(-14px);opacity:0;pointer-events:none;
    transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .22s ease;
    max-height:calc(100vh - 74px);overflow-y:auto;
  }
  .nav.aberto{transform:none;opacity:1;pointer-events:auto}
  .nav a:not(.btn){
    padding:16px 4px;border-bottom:1px solid var(--k-linha);font-size:1rem;
  }
  .nav .btn{margin-top:16px;width:100%;padding:15px 24px;font-size:.95rem}
}

/* ─── hero ───────────────────────────────── */
.hero{padding:96px 0 84px;position:relative;overflow:hidden}
/* Em telas largas, o .wrap de 1120px passou a sobrar demais dos dois
   lados só na capa — achado da auditoria de 21/08 (~45% da largura
   ocupada em 1440px+). Cresce SÓ o wrap do hero, não o do site
   inteiro: o resto do texto corrido continua com a largura de leitura
   de sempre. clamp() escala com a tela em vez de pular numa única
   quebra, e para de crescer em 1520px pra não esticar demais em
   monitor 4K. */
.hero .wrap{max-width:clamp(1120px,78vw,1520px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,560px) 1fr;gap:72px;align-items:center}
.hero h1{margin-bottom:26px}
.hero h1 em{font-style:italic;color:var(--k-petroleo)}
.hero .lead{max-width:29em;margin-bottom:36px;font-size:1.24rem}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.hero-nota{font-size:.86rem;color:var(--k-tinta-suave);display:flex;align-items:center;gap:9px}
.hero-nota::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--k-terracota);flex:none}

/* A proporção acompanha a foto, e não o contrário.
   A foto do topo é bem mais alta que larga (1100×1940). Num espaço 4:5 o
   corte comia a cabeça e os pés — foi o que ficou torto na tela. Em
   4:5,8 quase nada é cortado, e o ponto focal em config.js cuida do
   resto. No celular o espaço volta a ser mais quadrado, senão a foto
   empurraria a dobra inteira para baixo. */
.retrato{
  position:relative;aspect-ratio:4/5;border-radius:var(--k-raio);overflow:hidden;
  /* Com a coluna de foto virando 1fr (ver .hero-grid), sem um teto ela
     esticaria demais em monitor largo — 4:5,8 de altura ia passar da
     tela. 640px é generoso sem virar um pôster; encostada na direita
     (o texto continua encostado na esquerda), a folga extra do wrap
     mais largo vira respiro entre as duas colunas, não vazio nas
     bordas. */
  max-width:640px;width:100%;
  /* Enquanto a foto não chega, o espaço vira uma placa de marca: creme,
     com o portal em marca d'água. Parece proposital, não parece defeito.
     Quando o arquivo for colocado em assets/fotos/, a foto entra por
     cima e a placa some sozinha. */
  background:linear-gradient(160deg,var(--k-papel) 0%,var(--k-areia-2) 60%,#EDE3D1 100%) center/cover no-repeat;
  box-shadow:0 24px 60px rgba(58,90,133,.14);
}
.retrato::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(46,71,103,.28),transparent 42%);
}
/* A placa da marca só existe enquanto a foto não chegou. Assim que o
   arquivo entra, o JS marca .tem-foto e a placa some. */
.retrato:not(.tem-foto)::before,
.karina-foto:not(.tem-foto)::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:url('/assets/marca/kaia-marca.svg') center/38% no-repeat;
  opacity:.13;
}
.retrato:not(.tem-foto)::after{background:none}
.karina-foto{position:relative}
/* Com foto, entra suave e o degradê do rodapé volta a fazer sentido. */
.retrato.tem-foto,.karina-foto.tem-foto{animation:k-fade .7s ease both}

/* ─── A composição do topo, no computador ─────────────────────────────
   A foto deixa de ser um retângulo colado na página e passa a ficar POR
   CIMA de uma placa deslocada — o gesto de apoiar uma foto impressa
   sobre uma folha de papel. Dá profundidade sem precisar recortar a
   Karina do fundo: recorte em foto com janela, planta e quadros atrás
   não fica limpo, e mal recortado é pior que não recortado.

   A placa é desenhada por SOMBRA, e não por um `::before`. A razão é
   concreta: a foto é o `background-image` do elemento, e um pseudo-filho
   com `z-index:-1` só vai para trás dela se o elemento não criar
   contexto de empilhamento — mas a animação de entrada cria um. Na
   primeira tentativa a placa cobriu a Karina inteira. Sombra é pintada
   sempre atrás da caixa, sem depender de empilhamento nenhum.

   Só no computador: no celular não há espaço lateral para a placa
   aparecer, e o deslocamento viraria bagunça. */
@media(min-width:901px){
  /* Encostada na direita: com a coluna de foto virando 1fr, a folga
     extra de telas largas deve virar respiro entre texto e foto — não
     empurrar a foto pro centro do card, longe do texto. */
  .retrato{aspect-ratio:4/5.8;overflow:hidden;justify-self:end}
  .retrato.tem-foto{
    box-shadow:
      -34px 46px 0 0 #EDE1CC,                  /* a placa, atrás */
      -34px 46px 0 1px rgba(168,146,104,.42),  /* o fio da placa */
      0 30px 70px rgba(58,90,133,.20),         /* profundidade da foto */
      0 2px 10px rgba(42,39,36,.08);
    /* Antes eram 1,17s até a foto aparecer completa (0,12s de atraso +
       1,05s de animação). Quem rolava a dobra rápido via a metade
       direita vazia — a dor da vitrine. Agora entra em ~0,45s, ainda
       elegante, mas presente antes de a pessoa julgar. */
    animation:foto-pousa .45s cubic-bezier(.22,1,.36,1) both;
  }
  /* Quando a cortina em tela cheia toca (primeira visita da sessão),
     a foto espera ela sumir (~4.55s — 2.95s parada + 1.1s abrindo + .3s
     desaparecendo + folga) antes de entrar — senão a entrada rápida de
     propósito descrita acima fica escondida atrás da cortina e nunca
     é vista. */
  html.teve-cortina-abertura .retrato.tem-foto{animation-delay:4.55s}
  /* A legenda ganha ar, agora que o pé da foto divide espaço com a placa. */
  .retrato.tem-foto .retrato-legenda{padding-bottom:30px}
  /* A coluna precisa de folga à esquerda e embaixo para a placa caber
     sem encostar no texto nem estourar a seção. */
  .hero-grid > .retrato{margin-left:40px;margin-bottom:34px}
}
/* A foto desce e pousa; a sombra vem junto, então a placa parece surgir
   por baixo dela. Movimento menor (era -30px) para a entrada não
   competir com a leitura da headline ao lado. */
@keyframes foto-pousa{
  from{opacity:0;transform:translateY(-14px) scale(1.02)}
  to  {opacity:1;transform:none}
}
/* Quem pediu menos movimento vê a composição pronta, sem a entrada. */
@media (prefers-reduced-motion:reduce){
  .retrato.tem-foto{animation:none}
}
}
/* Quem pediu menos movimento vê a composição pronta, sem a entrada. */
@media (prefers-reduced-motion:reduce){
  .retrato.tem-foto,.retrato.tem-foto::before{animation:none}
}

.retrato-legenda{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px;
  color:#fff;font-family:var(--k-serif);font-size:1.28rem;line-height:1.3;
}
/* Sem foto, o texto branco sumiria no creme. Vira tinta escura. */
.retrato:not(.tem-foto) .retrato-legenda{color:var(--k-petroleo)}
.retrato:not(.tem-foto) .retrato-legenda small{color:var(--k-camelo);opacity:1}
.retrato-legenda small{
  display:block;font-family:var(--k-sans);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;opacity:.85;margin-top:7px;font-weight:400;
}
@media(max-width:900px){
  .hero{padding:56px 0 60px}
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .retrato{max-width:400px}
}

/* ─── faixa de dor ───────────────────────── */
.dor{background:var(--k-petroleo-fundo);color:var(--k-areia);padding:88px 0}
.dor h2{color:#fff;margin-bottom:12px}
.dor .olho{color:var(--k-ambar)}
.dor-lista{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:52px;background:rgba(255,255,255,.1)}
.dor-item{background:var(--k-petroleo-fundo);padding:36px 30px}
.dor-item .aspas{font-family:var(--k-serif);font-size:3.4rem;line-height:.6;color:var(--k-ambar);display:block;margin-bottom:18px}
.dor-item p{font-family:var(--k-serif);font-style:italic;font-size:1.28rem;line-height:1.42;color:#fff;opacity:.94}
@media(max-width:860px){.dor-lista{grid-template-columns:1fr}}

/* ─── seções ─────────────────────────────── */
.secao{padding:96px 0}
.secao-clara{background:var(--k-papel)}
.cabeca{max-width:640px;margin-bottom:60px}
.cabeca.centro{margin-left:auto;margin-right:auto;text-align:center}
.cabeca h2{margin-bottom:18px}

/* comparativo */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--k-linha);border-radius:var(--k-raio);overflow:hidden}
.versus-col{padding:40px 36px}
.versus-col:first-child{background:var(--k-areia-2)}
.versus-col:last-child{background:var(--k-petroleo);color:#fff}
.versus-col h3{font-size:1.15rem;font-family:var(--k-sans);font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin-bottom:26px;font-size:.82rem}
.versus-col:first-child h3{color:var(--k-tinta-suave)}
.versus-col:last-child h3{color:var(--k-ambar)}
.versus-col ul{list-style:none}
.versus-col li{padding:13px 0 13px 28px;position:relative;font-size:1.02rem;border-bottom:1px solid rgba(0,0,0,.06)}
.versus-col:last-child li{border-bottom-color:rgba(255,255,255,.13)}
.versus-col li:last-child{border-bottom:none}
.versus-col:first-child li::before{content:'—';position:absolute;left:0;color:var(--k-tinta-suave)}
.versus-col:last-child li::before{content:'✓';position:absolute;left:0;color:var(--k-ambar);font-size:.9rem}
@media(max-width:860px){.versus{grid-template-columns:1fr}}

/* passos */
.passos{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;counter-reset:p}
.passo{counter-increment:p}
.passo::before{
  content:counter(p,decimal-leading-zero);
  font-family:var(--k-serif);font-size:2.6rem;color:var(--k-camelo);
  display:block;line-height:1;margin-bottom:16px;
}
.passo h3{font-size:1.24rem;margin-bottom:10px}
.passo p{color:var(--k-tinta-suave);font-size:1rem}
@media(max-width:860px){.passos{grid-template-columns:1fr;gap:34px}}

/* diferenciais */
.difs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--k-linha);border:1px solid var(--k-linha);border-radius:var(--k-raio);overflow:hidden}
.dif{background:var(--k-papel);padding:40px 34px;transition:background .25s}
.dif:hover{background:var(--k-areia)}
/* As ilustrações são desenhos à mão em campo branco (o desenho ocupa
   ~30% da imagem). No formato antigo (62px, círculo, fundo areia com
   moldura) ficava um círculo bege quase vazio — a moldura chamava mais
   atenção que o desenho. Agora a ilustração respira: sem moldura, sem
   corte, e maior — o traço azul-petróleo/dourado aparece de verdade e
   ecoa a paleta do resto da página. mix-blend fundem o branco do
   arquivo com o creme da página, então nada precisa ser recortado. */
.dif-icone{
  width:96px;height:96px;margin-bottom:24px;
  object-fit:contain;
  mix-blend-mode:multiply;
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.dif:hover .dif-icone{transform:translateY(-3px) scale(1.04)}
.dif h3{font-size:1.3rem;margin-bottom:10px}
.dif .tag{
  display:inline-block;font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;
  padding:4px 10px;border-radius:2px;margin-bottom:14px;font-weight:500;
}
.tag-todos{background:var(--k-areia-2);color:var(--k-tinta-suave)}
.tag-gold{background:#F5E7CE;color:#8A6520}
.tag-diamond{background:#E2E9F2;color:var(--k-petroleo)}
.dif p{color:var(--k-tinta-suave);font-size:.98rem}
/* 7 cards agora (a "Tópico do Dia", nova — achado dela, 24/08): 3 e
   depois 2 colunas nunca dividem 7 igual, e a célula vazia que sobrava
   virava um retângulo cinza sólido — não é uma célula "sem nada", é o
   próprio background(var(--k-linha)) do .difs (a "linha de argamassa"
   de 1px entre os cards) aparecendo por trás de uma célula de grid sem
   nenhum .dif dentro pra cobri-la. Nas duas larguras que têm grade de
   verdade (3 e 2 colunas), sobra sempre exatamente 1 item sozinho na
   última linha (7%3=1, 7%2=1) — faz ELE esticar a linha inteira em vez
   de deixar coluna(s) vazias do lado. Card bem mais largo que os
   outros vira estranho se o conteúdo ficar preso à esquerda feito os
   demais, então centraliza e trava a largura do texto só nele. Em 1
   coluna (mobile) já é largura cheia por padrão — reseta pro layout
   normal, senão o card final ficaria centralizado sozinho, destoando
   dos outros seis empilhados à esquerda. */
.dif:last-child{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;text-align:center}
.dif:last-child p{max-width:52ch}
@media(max-width:960px){.difs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .difs{grid-template-columns:1fr}
  .dif:last-child{display:block;text-align:left}
  .dif:last-child p{max-width:none}
}

/* karina */
.karina{background:var(--k-areia-2);padding:96px 0}
/* `start` e não `center`: o texto ficou mais longo do que a foto, e
   centralizar deixava um vão de creme no topo e no pé da coluna. Grudada
   no topo, ela acompanha a leitura em vez de flutuar. */
.karina-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.karina-foto{aspect-ratio:3/4;border-radius:var(--k-raio);overflow:hidden;background:linear-gradient(160deg,var(--k-papel) 0%,var(--k-areia-2) 60%,#EDE3D1 100%) center/cover no-repeat;box-shadow:0 20px 50px rgba(42,39,36,.13)}
.karina blockquote{font-family:var(--k-serif);font-size:1.72rem;line-height:1.36;color:var(--k-petroleo);margin:26px 0;font-style:italic}
.karina-assina{font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;color:var(--k-camelo)}
/* Os quatro fatos: rápidos de varrer, e é onde o olho vai depois da foto. */
.karina-fatos{list-style:none;margin:0 0 26px;padding:0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:12px 26px}
.karina-fatos li{font-size:.94rem;line-height:1.5;color:var(--k-tinta-suave);
  padding-left:16px;position:relative}
.karina-fatos li::before{content:'';position:absolute;left:0;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--k-camelo)}
.karina-fatos strong{color:var(--k-tinta);font-weight:600}
@media(max-width:560px){.karina-fatos{grid-template-columns:1fr;gap:10px}}
@media(min-width:901px){.karina-foto{position:sticky;top:104px}}
@media(max-width:900px){.karina-grid{grid-template-columns:1fr;gap:40px}.karina-foto{max-width:340px}}

/* ─── planos ─────────────────────────────── */
.planos{padding:96px 0}
.ciclos{display:inline-flex;background:var(--k-areia-2);border-radius:var(--k-raio);padding:5px;gap:4px;margin:0 auto 12px;border:1px solid var(--k-linha)}
.ciclo-btn{
  border:none;background:transparent;font-family:var(--k-sans);font-size:.88rem;font-weight:400;
  /* 44px de altura: o mínimo em que o dedo acerta de primeira. */
  padding:13px 22px;min-height:44px;border-radius:2px;cursor:pointer;color:var(--k-tinta-suave);
  transition:all .2s;white-space:nowrap;-webkit-tap-highlight-color:transparent;
}
.ciclo-btn:active{transform:scale(.97)}
.ciclo-btn.on{background:var(--k-petroleo);color:#fff;font-weight:500}
.ciclo-selo{
  display:block;text-align:center;font-size:.8rem;color:var(--k-terracota);
  margin-bottom:26px;min-height:22px;font-weight:400;
}
/* O seletor de ciclo desceu para junto dos planos, que é o que ele
   muda. A folga embaixo é curta de propósito: os botões e os cards
   precisam parecer a mesma peça, não dois blocos vizinhos. */
.ciclos-junto{text-align:center;margin-top:8px}
.ciclos-junto .ciclo-selo{margin-bottom:18px}

/* ─── Vagas de fundadora ────────────────────────────────────────────
   Escassez real: o número de vagas é finito e a condição é honrada.
   Por isso pode ficar na tela sem contador falso nem "últimas horas". */
.fundadoras{
  max-width:560px;margin:0 auto 40px;padding:18px 24px;text-align:center;
  border:1px solid var(--k-petroleo);border-radius:var(--k-raio);
  background:linear-gradient(135deg,rgba(58,90,133,.07),rgba(58,90,133,.02));
}
.fund-selo{
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--k-petroleo);margin-bottom:7px;
}
.fund-tx{font-size:1.02rem;line-height:1.5;color:var(--k-tinta)}
.fund-tx b{color:var(--k-petroleo)}
.fund-nota{margin-top:9px;font-size:.78rem;line-height:1.6;color:var(--k-tinta-suave)}
@media(max-width:640px){.fundadoras{padding:16px 18px;margin-bottom:32px}}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.card{
  background:var(--k-papel);border:1px solid var(--k-linha);border-radius:var(--k-raio);
  padding:38px 32px;position:relative;display:flex;flex-direction:column;
  transition:transform .25s,box-shadow .25s;
}
.card.destaque{
  border-color:var(--k-terracota);border-width:3px;
  box-shadow:0 18px 46px rgba(42,39,36,.08);
}
.card-selo{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--k-terracota);color:#fff;font-size:.63rem;letter-spacing:.18em;
  text-transform:uppercase;padding:6px 16px;border-radius:2px;white-space:nowrap;font-weight:500;
}
.card-nome{font-family:var(--k-serif);font-size:1.85rem;color:var(--k-petroleo);line-height:1}
.card-promessa{font-size:.92rem;color:var(--k-camelo);margin:8px 0 26px;font-style:italic;font-family:var(--k-serif);font-size:1.08rem}
.card-preco{padding:22px 0;border-top:1px solid var(--k-linha);border-bottom:1px solid var(--k-linha);margin-bottom:26px}
.preco-de{font-size:.88rem;color:var(--k-tinta-suave);text-decoration:line-through;min-height:22px;display:block}
.preco-valor{font-family:var(--k-serif);font-size:3.1rem;color:var(--k-tinta);line-height:1;display:flex;align-items:baseline;gap:4px}
.preco-valor .cifrao{font-size:1.2rem;color:var(--k-tinta-suave)}
.preco-valor .mes{font-family:var(--k-sans);font-size:.92rem;color:var(--k-tinta-suave);font-weight:300}
.preco-cond{font-size:.87rem;color:var(--k-tinta-suave);margin-top:10px;line-height:1.45}
.preco-cond strong{color:var(--k-terracota);font-weight:500}
/* O aviso de renovação automática fica logo abaixo do preço, e não
   no rodapé da seção: é ali que a pessoa decide, e é ali que a
   informação precisa estar para ser ostensiva. */
.preco-renova{display:inline-block;margin-top:6px;font-size:.8rem;color:var(--k-tinta-suave)}
.card ul{list-style:none;margin-bottom:30px;flex:1}
.card li{padding:9px 0 9px 26px;position:relative;font-size:.96rem;line-height:1.45}
.card li::before{content:'✓';position:absolute;left:0;color:var(--k-camelo);font-size:.82rem;top:11px}
.card li.novo::before{color:var(--k-terracota)}
.card li.novo{font-weight:400;color:var(--k-tinta)}
.card li strong{font-weight:500}
.card .btn{width:100%}
/* O trial mora sob o botão do plano, discreto: quem decidiu assinar
   não tropeça nele, e quem hesita o encontra sem procurar. */
.hero-trial{margin:16px 0 0}
.hero-trial a{font-size:.88rem;color:var(--k-tinta-suave);text-decoration:underline;
  text-underline-offset:3px;padding:8px 4px;display:inline-block;min-height:34px}
.hero-trial a:hover,.hero-trial a:focus-visible{color:var(--k-terracota)}
.card-trial{display:block;text-align:center;margin-top:10px;font-size:.79rem;
  color:var(--k-tinta-suave);text-decoration:underline;text-underline-offset:3px;
  padding:8px 4px;min-height:34px;transition:color .2s}
.card-trial:hover,.card-trial:focus-visible{color:var(--k-terracota)}

/* Cadastro antes do gateway. */
.cap-linha{font-size:.9rem;color:var(--k-tinta-suave);margin:0 0 18px;line-height:1.6}
.cap-depois{display:block;margin-top:10px;padding:10px 12px;border-radius:8px;
  background:rgba(190,132,94,.09);font-size:.84rem;color:var(--k-tinta);line-height:1.55}
.card-limite{font-size:.78rem;color:var(--k-tinta-suave);text-align:center;margin-top:14px;line-height:1.5}
.card-limite strong{color:var(--k-petroleo);font-weight:500}
@media(max-width:960px){.cards{grid-template-columns:1fr;max-width:440px;margin:0 auto}}

.planos-rodape{text-align:center;margin-top:52px;font-size:.92rem;color:var(--k-tinta-suave)}
.planos-nota{display:block;margin-top:12px;font-size:.82rem;line-height:1.6;color:var(--k-tinta-suave);max-width:62ch;margin-left:auto;margin-right:auto}
.planos-nota a{color:var(--k-terracota)}
.planos-rodape strong{color:var(--k-tinta);font-weight:500}

/* ─── faq ────────────────────────────────── */
.faq{max-width:800px;margin:0 auto}
.faq details{border-bottom:1px solid var(--k-linha);padding:6px 0}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 40px 22px 0;position:relative;
  font-family:var(--k-serif);font-size:1.32rem;color:var(--k-petroleo);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'+';position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-size:1.5rem;color:var(--k-camelo);font-family:var(--k-sans);font-weight:300;transition:transform .2s;
}
.faq details[open] summary::after{content:'−'}
.faq p{padding:0 0 24px;color:var(--k-tinta-suave);font-size:1.02rem}

/* ─── cta final ──────────────────────────── */
.final{background:var(--k-petroleo-fundo);color:#fff;padding:104px 0;text-align:center;position:relative;overflow:hidden}
.final h2{color:#fff;margin-bottom:20px}
.final p{color:rgba(255,255,255,.8);max-width:38em;margin:0 auto 38px;font-size:1.12rem}
.final .olho{color:var(--k-ambar)}
.final-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.final .btn-ghost{color:#fff;border-color:rgba(255,255,255,.45)}
.final .btn-ghost:hover{background:#fff;color:var(--k-petroleo)}

/* ─── rodapé ─────────────────────────────── */
.rodape{background:var(--k-areia);padding:52px 0;border-top:1px solid var(--k-linha);font-size:.86rem;color:var(--k-tinta-suave)}
.rodape-in{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.rodape a{text-decoration:none;transition:color .2s;display:inline-flex;align-items:center;min-height:44px}
.rodape a:hover{color:var(--k-petroleo)}
.rodape nav{display:flex;gap:24px;flex-wrap:wrap}

/* ═══════════════════════════════════════════════════════════════════
   ACABAMENTO · o que separa "site que funciona" de "cara de site"
   ═════════════════════════════════════════════════════════════════════
   Camada aplicada por último, então tem a última palavra sobre o resto.
   O que muda aqui:

   1. Botões ganham curva de movimento natural (cubic-bezier), sombra
      colorida no primário, e o transform vira parte da linguagem — nada
      "cai" na hora, tudo desloca de leve.
   2. Cards de plano ganham hover discreto — a página vira interativa,
      não estática. O "destaque" fica mais destacado por borda de 3px,
      sem sombra colorida nem halo — mesma regra do resto do app.
   3. Cards das ferramentas (`.dif`) ganham interação sutil no hover.
   4. Cabeças de seção (`.olho`, `.cabeca`) ganham respiro.
   5. Selecionar texto vira parte da paleta.
*/

/* ─── botões ─── */
.btn{transition:transform .28s cubic-bezier(.22,1,.36,1),
                background .2s,color .2s,border-color .2s,box-shadow .28s;
     will-change:transform}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{box-shadow:0 4px 14px rgba(217,122,43,.22)}
.btn-primary:hover{box-shadow:0 8px 22px rgba(217,122,43,.32),0 2px 4px rgba(217,122,43,.15)}
.btn-ghost{transition:transform .28s cubic-bezier(.22,1,.36,1),
                       background .22s,color .22s,border-color .22s}

/* ─── cards de plano ─── */
.card{transition:transform .35s cubic-bezier(.22,1,.36,1),
                 border-color .28s,box-shadow .35s}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 34px rgba(42,39,36,.09)}
.card.destaque{
  border-color:var(--k-terracota);border-width:3px;
  box-shadow:0 20px 56px rgba(42,39,36,.1);
}
.card.destaque:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 68px rgba(42,39,36,.14);
}

/* ─── cards das ferramentas ─── */
.dif{transition:background .28s cubic-bezier(.22,1,.36,1),transform .28s}
.dif:hover{background:var(--k-areia);transform:translateY(-2px)}

/* ─── FAQ ─── */
.faq details{transition:background .2s}
.faq details[open]{background:linear-gradient(180deg,rgba(58,90,133,.02),transparent 40%)}
.faq summary{transition:color .2s,padding .2s}
.faq summary:hover{color:var(--k-terracota)}
.faq summary::after{transition:transform .28s cubic-bezier(.22,1,.36,1),color .2s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(180deg);color:var(--k-terracota)}

/* ─── topo (mais firmeza no scroll) ─── */
.topo{transition:box-shadow .3s}
.topo.rolou{box-shadow:0 4px 20px rgba(42,39,36,.06)}

/* ─── seleção de texto na paleta ─── */
::selection{background:rgba(217,122,43,.22);color:var(--k-tinta)}

/* ─── foto do hero: fallback direto no CSS ─── */
/* Antes, a foto só aparecia depois que o script inteiro rodava e
   fazia `new Image()` para pré-carregar. Se o navegador estivesse
   ocupado, a dobra ficava com metade direita vazia. O caminho da
   foto do hero não muda quase nunca, então a gente cola aqui em
   CSS puro e o navegador serve com prioridade `background-image`,
   fora do caminho do JS. */
/* WebP 123KB no lugar do JPEG 203KB: 39% mais leve, com a mesma foto e
   a mesma nitidez (medido em 42,9dB de PSNR, acima do ponto em que o
   olho separa do original).

   Esta lista tem que bater exatamente com a do `preload` lá em cima —
   se o CSS preferisse AVIF e o preload trouxesse WebP, o navegador
   baixaria os dois. Um arquivo só, sempre.

   `url()` na linha de cima é o que navegador antigo, que não entende
   `image-set`, enxerga; quem entende usa a linha de baixo. */
#foto-hero{
  background-image:url('/assets/fotos/karina-hero.jpg');
  background-image:image-set(
    url('/assets/fotos/karina-hero.webp') type('image/webp'),
    url('/assets/fotos/karina-hero.jpg')  type('image/jpeg'));
  background-size:cover;background-position:50% 26%;background-repeat:no-repeat;
}

/* ═══════════════════════════════════════════════════════════════
   POSTOS DA PÁGINA · a ordem em que o olho deve pousar
   ───────────────────────────────────────────────────────────────
   Achado dela, e medindo dá para provar: as oito seções depois da
   capa tinham título do mesmo tamanho (51px), do mesmo peso (400) e
   o mesmo respiro (96px). Uma página bem construída, e sem posto
   nenhum — oito capítulos falando no mesmo volume. Quando tudo tem
   a mesma importância, nada tem, e o olho não sabe onde pousar.

   O remédio não é aumentar o que importa, é baixar o resto. Aqui a
   página passa a ter três postos, na ordem do argumento que ela faz:

     MARCO      · onde a decisão acontece — a dor que traz a pessoa,
                  os planos, o fechamento. Título grande, muito ar.
     ARGUMENTO  · a prova no meio do caminho (padrão, sem classe).
     APOIO      · o que só quem já está quase lá vai ler — dúvidas,
                  instalação. Título discreto, respiro curto.

   Dá uma escada de 4 degraus com a capa: 74 → 56 → 38 → 27 no
   computador, 42 → 35 → 27 → 21 no celular. Nenhuma cor muda,
   nenhum conteúdo sai do lugar; muda só quem fala mais alto.
   ═══════════════════════════════════════════════════════════════ */

/* O padrão desce: é o corpo do argumento, não o título da página. */
h2{font-size:clamp(1.7rem,3.4vw,2.35rem)}
.cabeca{margin-bottom:52px}

.marco{padding:128px 0}
.marco h2{font-size:clamp(2.2rem,5vw,3.5rem);line-height:1.08}
.marco .cabeca{margin-bottom:68px}

/* No marco, o olho ganha um traço à frente — a mesma linha de cota
   que separa as seções, agora anunciando que ali começa um capítulo,
   não mais um parágrafo. */
.marco .olho{
  display:flex;align-items:center;gap:14px;
  font-size:.76rem;letter-spacing:.24em;margin-bottom:26px;
}
.marco .cabeca.centro .olho{justify-content:center}
.marco .olho::before{
  content:'';width:34px;height:2px;background:currentColor;
  opacity:.55;flex:none;
}
.marco .cabeca.centro .olho::after{
  content:'';width:34px;height:2px;background:currentColor;
  opacity:.55;flex:none;
}

.apoio{padding:76px 0}
.apoio h2{font-size:clamp(1.3rem,2.6vw,1.7rem)}
.apoio .cabeca{margin-bottom:40px}
.apoio .olho{font-size:.68rem;color:var(--k-tinta-fraca);margin-bottom:14px}

/* A linha de cota também tem posto: cheia antes de um marco, curta
   antes do resto. É a mesma peça, dizendo o tamanho da pausa. */
.cota-divisoria.cota-forte{padding:16px 0}
.cota-divisoria.cota-forte .cota-linha{opacity:.85}

@media(max-width:860px){
  /* No celular o respiro do padrão também precisa descer, senão a
     escada inverte: marco com menos ar que argumento, que era
     justamente o defeito. Fica 88 · 68 · 60. */
  .secao,.karina{padding:68px 0}
  .marco{padding:88px 0}
  .apoio{padding:60px 0}
  .marco .cabeca{margin-bottom:44px}
  .cabeca{margin-bottom:36px}
}
