/* ============================================================
   HarasPlan — folha compartilhada do site (páginas públicas)

   Vive separada desde 19/08/2026: com as páginas de mecanismo, o
   mesmo CSS estava prestes a ser copiado seis vezes. O aplicativo
   (app.html) tem a própria folha, styles.css — esta é só do site.
   ============================================================ */

/* ============================================================
   HarasPlan — página de entrada

   Conceito: DO ESCURO DO ESTÁBULO PARA A LUZ DO PASTO.
   A página abre no couro quase preto de antes do amanhecer, abre
   para a areia clara onde o produto vive, e fecha voltando ao
   escuro. O movimento serve a isso: o conteúdo sobe para a luz.

   Um mundo visual só, de propósito: não há variante para o modo
   escuro do sistema, porque a jornada escuro→claro→escuro É o
   desenho. Toda cor é pintada aqui, nada é herdado do navegador.
   (O aplicativo, esse sim, tem tema claro e escuro.)

   Sem uma linha de JavaScript — a CSP acima é script-src 'none'.
   As animações são CSS puro, inclusive as de rolagem.
   ============================================================ */

:root {
  /* chão escuro — a baia antes do sol */
  --breu:        #14100B;
  --breu-2:      #1C160F;
  --couro:       #3E2B1B;
  --couro-2:     #56412C;
  /* chão claro — a areia do pasto */
  --areia:       #FAF6EF;
  --papel:       #FFFFFF;
  --creme:       #F5EEE2;
  /* ferragem do arreio */
  --latao:       #A9763B;   /* traço, ícone, moldura (basta 3:1) */
  --latao-texto: #8A5F2E;   /* o mesmo latão, escurecido para TEXTO:
                               em 11,5px o tom claro dava 3,65:1 sobre a
                               areia, abaixo dos 4,5:1 exigidos */
  --ouro:        #DFA45B;
  --ouro-claro:  #EDC08A;
  /* a única cor de ação da página */
  --terra:       #A3512B;
  --terra-viva:  #E09461;
  /* tinta */
  --tinta:       #2E2115;
  --tinta-fraca: #6B5A45;
  --creme-tinta: #F3E9DA;
  --creme-fraca: #BCAB93;
  /* semânticas (as mesmas do app) */
  --verde:       #4A7C2A;
  --vermelho:    #B3261E;

  --linha-clara:  #E6DAC6;
  --linha-escura: rgba(223,164,91,.20);

  --sombra-clara: 0 1px 2px rgba(62,43,27,.05), 0 10px 30px rgba(62,43,27,.09);
  --sombra-alta:  0 26px 70px rgba(0,0,0,.5);

  --titulo: "Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif;
  --corpo:  "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --env: 1120px;
  --raio: 14px;
  --raio-g: 20px;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--areia);
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--titulo);
  font-optical-sizing: auto;
  line-height: 1.05;
  letter-spacing: -.028em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

.env { width: 100%; max-width: var(--env); margin: 0 auto; padding: 0 24px; }

/* a etiqueta diz o ASSUNTO da seção — informação, não enfeite */
.etiqueta {
  display: inline-block;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--latao-texto);
}
.escuro .etiqueta { color: var(--ouro); }

:focus-visible { outline: 3px solid var(--ouro); outline-offset: 3px; border-radius: 8px; }

.pular {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ouro); color: #1A120A; padding: 10px 16px;
  border-radius: 0 0 10px 0; font-weight: 600;
}
.pular:focus { left: 0; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 13px 26px;
  border: 1px solid transparent; border-radius: 999px;
  font: inherit; font-weight: 600; font-size: .98rem;
  cursor: pointer; white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease,
              color .18s ease, box-shadow .18s ease;
}
/* a ousadia é gasta em um lugar só: o botão que leva ao sistema */
.btn-acao {
  background-color: var(--terra); color: #FFF6EC;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 22px rgba(163,81,43,.26);
}
.btn-acao:hover { background-color: #8C4423; }
.escuro .btn-acao { background-color: var(--terra-viva); color: #24160B; }
.escuro .btn-acao:hover { background-color: #EDA574; }

.btn-linha { background: transparent; color: var(--tinta); border-color: var(--linha-clara); }
.btn-linha:hover { border-color: var(--latao); background: rgba(169,118,59,.09); }
.escuro .btn-linha { color: var(--creme-tinta); border-color: rgba(223,164,91,.38); }
.escuro .btn-linha:hover { background: rgba(223,164,91,.13); border-color: var(--ouro); }

.btn-pq { min-height: 44px; padding: 10px 18px; font-size: .9rem; }

/* ---------- topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 30;
  background: rgba(20,16,11,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha-escura);
  color: var(--creme-tinta);
}
.topo-inner { display: flex; align-items: center; gap: 14px; min-height: 66px; }
.marca { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.selo {
  display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 50%;
  border: 1px solid rgba(223,164,91,.45);
  background: radial-gradient(circle at 32% 28%, rgba(223,164,91,.26), rgba(223,164,91,.04));
  color: var(--ouro-claro);
}
.marca-nome { font-family: var(--titulo); font-weight: 700; font-size: 1.1rem; letter-spacing: -.02em; }
.topo-acoes { display: flex; align-items: center; gap: 10px; }

/* O preço estava a onze telas de rolagem do topo — medido, não achismo.
   Este link resolve isso com um toque, e é texto: ocupa a metade da
   largura de um botão, que é o que o cabeçalho tem de sobra. */
.topo-link {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 6px; color: var(--creme-tinta); text-decoration: none;
  font-weight: 600; font-size: .9rem; white-space: nowrap;
  border-bottom: 1.5px solid transparent;
}
.topo-link:hover { color: var(--ouro-claro); border-bottom-color: var(--ouro); }

/* chamada do meio da página, no fim dos três passos */
.passos-acao {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-top: 40px;
}

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 78% 6%, rgba(223,164,91,.17) 0%, transparent 58%),
    radial-gradient(90% 70% at 6% 100%, rgba(163,81,43,.18) 0%, transparent 62%),
    linear-gradient(178deg, var(--breu) 0%, var(--breu-2) 60%, #241B12 100%);
  color: var(--creme-tinta);
  padding: 82px 0 0;
}
/* o fio de luz no horizonte: onde o escuro encontra a areia */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(223,164,91,.55), transparent);
}
.hero-grade {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 5.2fr 6fr; gap: 56px; align-items: center;
}
.hero-texto { padding-bottom: 100px; max-width: 34rem; }
.hero h1 { font-size: clamp(2.6rem, 6.4vw, 4.3rem); font-weight: 700; margin: 18px 0 20px; }
.hero h1 .luz { color: var(--ouro-claro); font-style: italic; }
.hero-sub { font-size: clamp(1.05rem, 2.1vw, 1.2rem); color: #E2D6C2; max-width: 30rem; }
.hero-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 16px; }
.hero-nota { font-size: .89rem; color: var(--creme-fraca); }
.hero-nota strong { color: var(--ouro-claro); font-weight: 600; }

.agua { position: absolute; right: -90px; top: 4%; z-index: 1;
        color: rgba(223,164,91,.05); pointer-events: none; }

/* ---------- painel do produto: a tela de Início, desenhada ---------- */
.painel-caixa { position: relative; z-index: 3; margin-bottom: -76px; }
.painel {
  border-radius: var(--raio-g);
  background: var(--papel);
  /* O painel é uma ilha CLARA dentro do hero escuro. Sem declarar a cor
     do texto aqui, ele herda o creme do hero e o conteúdo some no branco
     — foi o que aconteceu, e nenhuma medição de layout pega isso. */
  color: var(--tinta);
  border: 1px solid rgba(223,164,91,.22);
  box-shadow: var(--sombra-alta);
  overflow: hidden;
  transform: perspective(1500px) rotateY(-3deg) rotateX(1.2deg);
  transform-origin: left center;
}
.painel-topo {
  display: flex; align-items: center; gap: 9px; padding: 11px 15px;
  background: var(--couro); color: #F6EFE4; font-size: .82rem; font-weight: 600;
}
.selo-pq {
  display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px;
  border-radius: 50%; border: 1px solid rgba(223,164,91,.4); color: var(--ouro);
}
.painel-abas { margin-left: auto; display: flex; gap: 12px; font-weight: 500;
               color: #C9B79E; font-size: .74rem; }
.painel-abas b { color: var(--ouro-claro); font-weight: 600; }
.painel-corpo { padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--areia); }

.p-saudacao {
  background: linear-gradient(135deg, var(--couro), var(--couro-2));
  color: #F6EFE4; border-radius: 12px; padding: 13px 15px;
}
.p-saudacao b { font-family: var(--titulo); font-size: 1.02rem; font-weight: 600; }
.p-saudacao span { display: block; font-size: .74rem; color: #CDBCA4; margin-top: 2px; }

.p-atencao {
  background: var(--papel); border-radius: 12px; padding: 12px 14px;
  border: 1px solid var(--linha-clara); border-left: 3px solid var(--vermelho);
}
.p-tit { font-size: .7rem; font-weight: 700; letter-spacing: .08em;
         text-transform: uppercase; color: var(--tinta-fraca); }
.p-atencao li { display: flex; align-items: center; gap: 8px; font-size: .82rem; padding: 5px 0 0; }
.p-atencao li i { width: 7px; height: 7px; border-radius: 50%; background: var(--vermelho); flex: 0 0 7px; }
.p-atencao li.ok i { background: var(--verde); }

.p-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.p-tile { background: var(--papel); border: 1px solid var(--linha-clara);
          border-radius: 11px; padding: 9px 10px; }
.p-tile span { display: block; font-size: .6rem; text-transform: uppercase;
               letter-spacing: .07em; color: var(--tinta-fraca); }
.p-tile b { font-family: var(--titulo); font-size: 1.02rem; font-weight: 700; letter-spacing: -.02em; }

.p-graf { background: var(--papel); border: 1px solid var(--linha-clara);
          border-radius: 12px; padding: 12px 14px; }
.p-graf-topo { display: flex; align-items: baseline; justify-content: space-between; }
.p-graf-topo b { font-family: var(--titulo); font-size: 1.12rem; font-weight: 700;
                 color: var(--verde); letter-spacing: -.02em; }
.p-graf-topo span { font-size: .68rem; color: var(--tinta-fraca); }
.p-graf svg { display: block; width: 100%; height: auto; margin-top: 8px; }
.p-legenda { display: flex; gap: 14px; margin-top: 7px; font-size: .64rem; color: var(--tinta-fraca); }
.p-legenda i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }


/* ============================================================
   AS TELAS DE VERDADE
   Todo print aqui é o sistema rodando, capturado por
   capturar-prints.py com um haras de demonstração. Nada é montagem.
   ============================================================ */
.quadro {
  margin: 0; border-radius: var(--raio-g); overflow: hidden;
  background: var(--papel);
  border: 1px solid rgba(223,164,91,.22);
  box-shadow: var(--sombra-alta);
  line-height: 0;
}
.quadro img { width: 100%; height: auto; display: block; }

/* No celular, o print de DESKTOP dava 24% de escala: um rótulo de 14px
   virava 3,4px, ilegível — e mesmo assim baixado inteiro, com dado móvel
   de quem está no pasto. Abaixo de 700px entra o print de celular (que já
   existia no repositório, sem uso, e pesa menos), recortado no topo para
   não esticar a página: a parte de cima é a que carrega o sentido. */
@media (max-width: 700px) {
  .quadro-adapta img {
    max-height: 340px;
    object-fit: cover; object-position: top center;
  }
}
.quadro-hero { transform: perspective(1500px) rotateY(-3deg) rotateX(1.2deg); transform-origin: left center; }

/* moldura de celular: a barra de abas do app corta na borda, como no
   aparelho de verdade — a moldura faz esse corte ler como natural */
.quadro-celular {
  /* `width` explícita, e não só `max-width`: a figura é item de grade com
     `margin: 0 auto`, e margem automática cancela o esticamento — sem uma
     largura declarada ela vira "encolher até o conteúdo". Com a imagem em
     `loading="lazy"` ainda não carregada, esse conteúdo mede zero e a
     moldura colapsava para 22px (só o preenchimento). */
  width: 100%; max-width: 300px; margin: 0 auto; overflow: hidden;
  border-radius: 34px; padding: 10px;
  background: linear-gradient(160deg, #2A2019, #14100B);
  border: 1px solid rgba(223,164,91,.28);
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
}
/* A largura tem que estar AQUI. Sem ela, a imagem de 430px aparecia no
   tamanho natural dentro da moldura de 300px e ficava cortada — só não
   aparecia no index porque lá o contexto (hero e grade do tour) já
   apertava a figura. Fora desse contexto, quebrava. */
.quadro-celular img { width: 100%; height: auto; display: block; border-radius: 26px; }

/* observação ao pé de um passo: leva para outra página de mecanismo */
.passo-mec-nota {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(62, 43, 27, .14);
  font-size: .92rem;
  color: var(--tinta-fraca);
}
.passo-mec-nota a { color: var(--latao-texto); font-weight: 600; }

/* ---------- a sequência: uma tela, um problema resolvido ---------- */
.tour { background: linear-gradient(180deg, #1A140E 0%, var(--breu) 100%); color: var(--creme-tinta); }
.tour .secao-cabeca h2 { color: #F6EFE4; }
.tour .secao-cabeca p { color: #CFBFA8; }

.cena {
  display: grid; grid-template-columns: 1fr 1.25fr; gap: 56px; align-items: center;
  padding: 58px 0;
  border-top: 1px solid rgba(223,164,91,.16);
}
.cena:nth-child(even) .cena-texto { order: 2; }
.cena-num {
  font-family: var(--titulo); font-size: .8rem; font-weight: 700;
  letter-spacing: .14em; color: var(--ouro);
}
.cena h3 {
  font-size: clamp(1.6rem, 3.2vw, 2.35rem); font-weight: 600; color: #F6EFE4;
  margin: 10px 0 14px;
}
.cena p { color: #CFBFA8; font-size: 1.03rem; max-width: 30rem; }
.cena p + p { margin-top: 12px; }
.cena strong { color: var(--ouro-claro); font-weight: 600; }

.cena-celular { grid-template-columns: 1.25fr 1fr; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* a tela sobe e ganha nitidez conforme entra — o movimento é a
       própria leitura da página, não enfeite solto */
    @keyframes revelar-tela {
      from { opacity: 0; transform: translateY(26px) scale(.985); }
      to   { opacity: 1; transform: none; }
    }
    .cena .quadro, .cena .quadro-celular {
      animation: revelar-tela .9s cubic-bezier(.22,.7,.28,1) both;
      animation-timeline: view();
      animation-range: entry 4% cover 28%;
    }
  }
}

@media (max-width: 980px) {
  .cena, .cena-celular { grid-template-columns: 1fr; gap: 28px; padding: 40px 0; }
  .cena:nth-child(even) .cena-texto { order: 0; }
  .quadro-hero { transform: none; }
}

/* composição do hero: profundidade sem mockup falso */
.composicao { position: relative; padding: 0 0 10px 0; }
.composicao .quadro-fundo {
  position: absolute; right: -6%; top: 8%; width: 86%;
  transform: perspective(1600px) rotateY(-8deg) rotateX(2deg);
  opacity: .55; filter: saturate(.9);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
.composicao .quadro-frente { position: relative; margin: 0 auto 0 4%; max-width: 316px; }

@media (max-width: 980px) {
  /* a tela de fundo sai no celular: posicionada com `right` negativo, ela
     empurrava a largura rolável da página em ~100px — estouro horizontal
     que nenhum elemento "visível" denunciava */
  .composicao .quadro-fundo { display: none; }
  .composicao .quadro-frente { margin: 0 auto; }
}

/* ---------- faixa de provas ---------- */
.faixa { background: var(--creme); border-bottom: 1px solid var(--linha-clara); padding: 108px 0 28px; }
.faixa-itens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
               font-size: .93rem; color: var(--tinta-fraca); }
.faixa-item { display: flex; align-items: center; gap: 11px; }
.faixa-item svg { color: var(--latao); flex: 0 0 auto; }

/* ---------- seções ---------- */
section { padding: 92px 0; }
.secao-cabeca { max-width: 40rem; margin-bottom: 44px; }
.secao-cabeca h2 { font-size: clamp(1.9rem, 4.2vw, 2.85rem); font-weight: 600; margin: 12px 0 14px; }
.secao-cabeca p { color: var(--tinta-fraca); font-size: 1.05rem; max-width: 34rem; }
.escuro.secao-cabeca h2, .passos .secao-cabeca h2 { color: #F6EFE4; }
.passos .secao-cabeca p { color: #CFBFA8; }

/* ---------- o problema ---------- */
.problema { background: var(--areia); }
.problema-texto { max-width: 46rem; }
.problema-texto .grande {
  font-family: var(--titulo); font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.22; letter-spacing: -.022em;
  margin: 14px 0 20px;
}
.problema-texto .grande em { font-style: normal; color: var(--terra); }
.problema-texto .miudo { color: var(--tinta-fraca); font-size: 1.05rem; max-width: 38rem; }

/* ---------- destaque: fotografou, lançou ---------- */
.destaque { background: var(--creme); border-top: 1px solid var(--linha-clara);
            border-bottom: 1px solid var(--linha-clara); }
.destaque-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.destaque h2 { font-size: clamp(1.9rem, 4vw, 2.65rem); font-weight: 600; margin: 12px 0 16px; }
.destaque p { color: var(--tinta-fraca); font-size: 1.04rem; max-width: 32rem; }
.fluxo-item { display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: start; padding: 18px 0; }
.fluxo-item + .fluxo-item { border-top: 1px solid var(--linha-clara); }
.fluxo-marca { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
               border: 1px solid var(--latao); color: var(--terra); background: var(--papel); }
.fluxo-item h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: 3px; }
.fluxo-item p { font-size: .95rem; }

/* ---------- recursos: lista editorial, não grade de cartões iguais ---------- */
.recursos { background: var(--areia); }
.lista-rec { display: grid; grid-template-columns: 1fr 1fr; gap: 0 54px; }
.rec { padding: 26px 0 24px; border-top: 1px solid var(--linha-clara); transition: border-color .18s ease; }
.rec:hover { border-top-color: var(--latao); }
.rec-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.rec-topo svg { color: var(--latao); flex: 0 0 auto; }
.rec h3 { font-size: 1.16rem; font-weight: 600; letter-spacing: -.015em; }
.rec p { color: var(--tinta-fraca); font-size: .96rem; max-width: 30rem; }
.rec p strong { color: var(--tinta); font-weight: 600; }

/* ---------- passos: sequência de verdade, por isso numerada ---------- */
.passos { background: var(--couro); color: var(--creme-tinta); }
.passos-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.passo { padding-top: 22px; border-top: 1px solid rgba(223,164,91,.3); }
.passo b { font-family: var(--titulo); font-size: .8rem; font-weight: 700;
           letter-spacing: .1em; color: var(--ouro); }
.passo h3 { font-size: 1.22rem; font-weight: 600; margin: 8px 0; color: #F6EFE4; }
.passo p { color: #CFBFA8; font-size: .95rem; }

/* ---------- planos ----------
   Os dois cartões tinham o mesmo peso, listas do mesmo tamanho e o mesmo
   botão: nada dizia qual escolher. Agora o Completo domina — vem primeiro,
   é mais largo, tem selo e a única cor de ação; o Essencial fica ao lado,
   legível e discreto. E o "Em breve" deixou de ser indefinição: a promessa
   agora é que HOJE todo mundo usa o Completo. */
.planos { background: var(--areia); }
.planos-grade { display: grid; grid-template-columns: 1.12fr 1fr; gap: 24px; align-items: start; }

.plano {
  background: var(--papel); border: 1px solid var(--linha-clara); border-radius: var(--raio-g);
  padding: 30px 28px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: var(--sombra-clara);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.plano:hover { border-color: var(--latao); box-shadow: 0 18px 44px rgba(62,43,27,.13); }

/* o recomendado: moldura de latão, selo e um pouco mais de ar */
.plano-destaque {
  position: relative;
  border-color: var(--latao);
  box-shadow: 0 20px 54px rgba(62,43,27,.16);
  padding: 38px 32px 32px;
}
.plano-selo {
  position: absolute; top: -13px; left: 32px;
  background: var(--terra); color: #FFF6EC;
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(163,81,43,.3);
}
/* o segundo plano não compete: fundo de creme e um grau a menos de contraste */
.plano-simples { background: var(--creme); box-shadow: none; }

.plano-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.plano h3 { font-size: 1.55rem; font-weight: 600; }
.plano-simples h3 { font-size: 1.32rem; }
.plano-breve {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--latao-texto); border: 1px solid var(--latao); border-radius: 999px; padding: 3px 10px;
  white-space: nowrap;
}
.plano-para { color: var(--tinta-fraca); font-size: 1rem; }
.plano-inclui {
  font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--latao-texto); margin-top: 2px;
}

.plano ul { display: flex; flex-direction: column; gap: 12px; }
.plano li { display: flex; gap: 11px; align-items: flex-start; font-size: .97rem; line-height: 1.5; }
.plano li svg { color: var(--verde); flex: 0 0 auto; margin-top: 4px; }
.plano li strong { font-weight: 600; }
.plano-simples li { font-size: .93rem; color: var(--tinta-fraca); }

.plano .btn { margin-top: auto; width: 100%; }
.plano-rodape { font-size: .84rem; color: var(--tinta-fraca); text-align: center; }

/* ---------- perguntas ---------- */
.faq { background: var(--creme); border-top: 1px solid var(--linha-clara); }
.faq-lista { max-width: 46rem; }
.faq details { border-bottom: 1px solid var(--linha-clara); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  cursor: pointer; list-style: none;
  font-family: var(--titulo); font-size: 1.08rem; font-weight: 600; letter-spacing: -.012em;
  padding: 20px 0; transition: color .18s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--terra); }
.faq summary::after {
  content: ""; flex: 0 0 11px; width: 11px; height: 11px;
  border-right: 2px solid var(--latao); border-bottom: 2px solid var(--latao);
  transform: rotate(45deg); margin-top: -5px; transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.faq details p { color: var(--tinta-fraca); font-size: 1rem; padding: 0 0 22px; max-width: 42rem; }

/* ---------- fechamento: volta ao escuro ---------- */
.final {
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(223,164,91,.15) 0%, transparent 60%),
    linear-gradient(182deg, #241B12 0%, var(--breu) 100%);
  color: var(--creme-tinta); text-align: center; border-top: 1px solid var(--linha-escura);
}
.final h2 { font-size: clamp(2rem, 4.6vw, 3rem); font-weight: 700; margin-bottom: 16px; }
.final p { color: #DACCB7; max-width: 34rem; margin: 0 auto 28px; font-size: 1.05rem; }
.final-acoes { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- rodapé ---------- */
.rodape { background: var(--breu); color: var(--creme-fraca); padding: 44px 0 52px; }
.rodape-inner { display: flex; gap: 26px; justify-content: space-between; flex-wrap: wrap; align-items: flex-start; }
.rodape .marca-nome { color: var(--creme-tinta); font-size: 1rem; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: .93rem; }
.rodape nav a { color: var(--creme-fraca); transition: color .18s ease; padding: 4px 0; }
.rodape nav a:hover { color: var(--ouro-claro); }
.rodape-legal { font-size: .84rem; color: #93836D; max-width: 28rem; margin-top: 12px; }

/* ============================================================
   MOVIMENTO — só para quem não pediu para reduzir
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  @keyframes surge { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

  /* entrada do hero, escalonada: sobe para a luz */
  .hero-texto > * { animation: surge .62s cubic-bezier(.22,.7,.28,1) both; }
  .hero-texto > *:nth-child(1) { animation-delay: .04s; }
  .hero-texto > *:nth-child(2) { animation-delay: .12s; }
  .hero-texto > *:nth-child(3) { animation-delay: .20s; }
  .hero-texto > *:nth-child(4) { animation-delay: .28s; }
  .hero-texto > *:nth-child(5) { animation-delay: .36s; }
  .painel-caixa { animation: surge .9s .18s cubic-bezier(.22,.7,.28,1) both; }

  /* brilho de latão atravessando o botão de ação */
  .btn-acao {
    background-image: linear-gradient(100deg, transparent 38%, rgba(255,238,212,.32) 50%, transparent 62%);
    background-size: 260% 100%; background-position: 130% 0;
    transition: background-color .18s ease, background-position .55s ease, box-shadow .18s ease;
  }
  .btn-acao:hover { background-position: -30% 0; }

  /* Revelação por rolagem SEM JavaScript. Dentro de @supports de
     propósito: onde o navegador não tiver linha do tempo de rolagem,
     nada é escondido — o conteúdo simplesmente aparece. */
  @supports (animation-timeline: view()) {
    .revela {
      animation: surge .8s cubic-bezier(.22,.7,.28,1) both;
      animation-timeline: view();
      animation-range: entry 6% cover 24%;
    }
    @keyframes deriva { to { transform: translateY(90px) rotate(5deg); } }
    .agua { animation: deriva linear both; animation-timeline: scroll(); animation-range: 0 70vh; }
  }
}

/* ============================================================
   LARGURAS
   ============================================================ */
@media (max-width: 980px) {
  .hero-grade { grid-template-columns: 1fr; gap: 34px; }
  .hero-texto { padding-bottom: 0; max-width: 40rem; }
  .painel { transform: none; }
  .painel-caixa { margin-bottom: -62px; }
  .destaque-grade { grid-template-columns: 1fr; gap: 30px; }
  .lista-rec { grid-template-columns: 1fr; }
  .planos-grade { grid-template-columns: 1fr; }
  .passos-grade { grid-template-columns: 1fr; gap: 6px; }
  .passo { padding-bottom: 14px; }
  .agua { display: none; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  section { padding: 66px 0; }
  .hero { padding-top: 52px; }
  .faixa { padding-top: 94px; }
  .faixa-itens { grid-template-columns: 1fr; gap: 12px; }
  .hero-acoes .btn { flex: 1 1 auto; }
  .p-tiles { grid-template-columns: repeat(2, 1fr); }
  .rodape-inner { flex-direction: column; }
}
@media (max-width: 479px) {
  .env { padding: 0 18px; }
  /* o topo encolhe, mas "Entrar" continua ali: é a porta de quem já usa */
  .topo-acoes .btn { padding: 10px 14px; font-size: .85rem; }
  .topo-acoes { gap: 6px; }
  .topo-link { padding: 0 4px; font-size: .85rem; }
  .selo { width: 32px; height: 32px; flex-basis: 32px; }

  /* No celular o nome escrito não cabe junto com Planos, Entrar e a
     chamada: a 320px o cabeçalho passava 53px da tela e a página inteira
     rolava de lado. Some o nome, fica o selo — ele É a marca, e o nome
     reaparece no hero uma dobra abaixo. Espremer os quatro até caber
     daria 5px de folga, que a primeira fonte substituta comeria.
     Continua no leitor de tela: sumir da vista não é sumir do documento. */
  .marca-nome {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* ============================================================
   PÁGINAS DE MECANISMO (/mecanismo-*.html)
   Uma página por coisa que o sistema faz, para quem quer ver por
   dentro antes de criar conta. Mesma linguagem da entrada: abre no
   escuro, explica na luz.
   ============================================================ */

/* trilha de volta, logo abaixo do topo */
.trilha { background: var(--breu); border-bottom: 1px solid var(--linha-escura); }
.trilha .env { display: flex; align-items: center; gap: 10px; padding-top: 14px; padding-bottom: 14px; }
.trilha a { color: var(--creme-fraca); font-size: .9rem; transition: color .18s ease; }
.trilha a:hover { color: var(--ouro-claro); }
.trilha span { color: #6E6152; font-size: .9rem; }

/* abertura da página de mecanismo */
.capa-mec {
  background:
    radial-gradient(110% 90% at 80% 0%, rgba(223,164,91,.15) 0%, transparent 58%),
    linear-gradient(178deg, var(--breu) 0%, #221A12 100%);
  color: var(--creme-tinta);
  padding: 74px 0 84px;
  border-bottom: 1px solid var(--linha-escura);
}
.capa-mec h1 { font-size: clamp(2.3rem, 5.6vw, 3.6rem); font-weight: 700; margin: 16px 0 18px; max-width: 20ch; }
.capa-mec .resumo { font-size: clamp(1.05rem, 2.2vw, 1.25rem); color: #E2D6C2; max-width: 34rem; }
.capa-mec .acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* o passo a passo do mecanismo */
.passo-mec { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center; padding: 56px 0; }
.passo-mec + .passo-mec { border-top: 1px solid var(--linha-clara); }
/* a inversão é declarada na marcação: contar filhos quebrava porque
   o cabeçalho da seção também é filho do mesmo contêiner */
.passo-mec-invertido .passo-mec-texto { order: 2; }
.passo-mec-num {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--latao); color: var(--latao-texto);
  font-family: var(--titulo); font-weight: 700; font-size: .95rem;
}
.passo-mec h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 600; margin: 14px 0 12px; }
.passo-mec p { color: var(--tinta-fraca); font-size: 1.03rem; max-width: 32rem; }
.passo-mec p + p { margin-top: 12px; }
.passo-mec strong { color: var(--tinta); font-weight: 600; }

/* o que ele NÃO faz — honestidade vende mais que promessa */
.limites { background: var(--creme); border-top: 1px solid var(--linha-clara); }
.limites-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.limite {
  background: var(--papel); border: 1px solid var(--linha-clara); border-radius: var(--raio);
  padding: 22px 24px;
}
.limite h3 { font-size: 1.08rem; font-weight: 600; margin-bottom: 8px; }
.limite p { color: var(--tinta-fraca); font-size: .95rem; }

/* navegação entre mecanismos, no pé */
.outros { background: var(--areia); }
.outros-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.outro {
  display: block; background: var(--papel); border: 1px solid var(--linha-clara);
  border-radius: var(--raio); padding: 22px 24px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.outro:hover { border-color: var(--latao); box-shadow: var(--sombra-clara); }
.outro b { display: block; font-family: var(--titulo); font-size: 1.12rem; font-weight: 600; margin-bottom: 6px; }
.outro span { color: var(--tinta-fraca); font-size: .93rem; }
.outro-seta { color: var(--latao-texto); font-weight: 600; }

@media (max-width: 980px) {
  .passo-mec { grid-template-columns: 1fr; }
  .passo-mec-invertido .passo-mec-texto { order: 0; }
  .passo-mec { gap: 26px; padding: 38px 0; }
}

/* link de aprofundamento no pé do cartão de recurso */
.rec-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px;
  color: var(--latao-texto); font-weight: 600; font-size: .9rem;
  text-decoration: none;
}
.rec-link:hover { text-decoration: underline; }
.rec-link span { transition: transform .18s ease; }
.rec-link:hover span { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .rec-link span { transition: none; } }

/* três faixas lado a lado (a grade original era de duas colunas) */
.planos-tres { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.plano-breve small { font-size: .5em; font-weight: 500; color: var(--tinta-fraca); }
.plano-inclui {
  font-size: .82rem; font-weight: 600; letter-spacing: .02em;
  color: var(--latao-texto); text-transform: uppercase;
}
.planos-nota {
  margin-top: 26px; text-align: center;
  font-size: .9rem; color: var(--tinta-fraca);
}

/* de qual plano é o recurso — dito onde ele é mostrado, para ninguém
   assinar o Campo esperando a leitura de nota */
.etiqueta-plano {
  display: inline-block; margin-bottom: 10px;
  padding: 3px 11px; border-radius: 999px;
  background: var(--latao-claro); color: var(--couro);
  font-size: .74rem; font-weight: 700; letter-spacing: .03em;
}
.marca-plano {
  display: inline-block; margin-left: 7px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--creme); color: var(--latao-texto);
  font-size: .62rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; vertical-align: middle;
}

/* "Em breve" precisa ser LIDO como aviso, não como nome de plano — por
   isso muda de cor e ganha contorno. Quem promete o que ainda não faz
   perde o cliente no primeiro clique, não na renovação. */
.marca-breve {
  background: transparent; color: var(--terra);
  box-shadow: inset 0 0 0 1.5px currentColor;
  margin-left: 0; margin-right: 4px;
}
.rec-breve { color: var(--tinta-fraca); }