/* =====================================================================
   11-produto.css
   Páginas internas de produto (produtos/*.html), geradas por
   ferramentas/gerar-paginas.py a partir de dados/telas/*.json.

   Duas regras desta camada:

   1. SEM IMAGEM. As páginas nasceram sem foto (decisão da May, 29/07/2026),
      então o peso visual vem de bloco de cor, tipografia grande e ritmo de
      seção — não de foto de fundo. Se um dia entrar foto, ela vai AO LADO
      do texto, nunca atrás: texto sobre imagem foi vetado.

   2. A animação é a que o site já tem: `[data-anima]` + `.visivel`, ligada
      pelo IntersectionObserver do app.js, que respeita
      prefers-reduced-motion. Nada de biblioteca nova.

   Cores: família A dos banners (marinho + ciano), amostradas em
   docs/analise-banners-29-07-2026.md.
   ===================================================================== */

:root {
  /* Ciano da família A. Não é desvio do azul da marca: é matiz ~190°,
     cor nova de verdade — por isso ganhou token próprio.               */
  --acento-ciano: #00bbe4;
  --acento-ciano-escuro: #0093b4;   /* 4,6:1 no branco — usar quando for texto */
}

/* ===============================================================
   1. Topo
   =============================================================== */
.produto-topo {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--azul-900) 0%, var(--azul-700) 65%, #1a4599 100%);
  color: var(--branco);
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(2.5rem, 6vw, 4.5rem);
}

/* Duas bolhas de luz, iguais em espírito às do hero da home. Puramente
   decorativas — por isso aria-hidden no HTML.                          */
.produto-topo__bolha {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.produto-topo__bolha--1 {
  width: 420px; height: 420px;
  top: -180px; right: -120px;
  background: radial-gradient(circle, rgba(0,187,228,.28), transparent 70%);
}
.produto-topo__bolha--2 {
  width: 320px; height: 320px;
  bottom: -160px; left: -100px;
  background: radial-gradient(circle, rgba(74,116,214,.30), transparent 70%);
}
.produto-topo .container { position: relative; z-index: 1; }

.produto-topo__migalha { font-size: var(--txt-xs); color: var(--azul-200); margin: 0 0 1.25rem; }
.produto-topo__migalha a { color: var(--azul-200); }
.produto-topo__migalha a:hover { color: var(--branco); }

.produto-topo__fio {
  width: 72px; height: 5px;
  border-radius: var(--raio-full);
  background: var(--acento-ciano);
  margin-bottom: 1.5rem;
}

.produto-topo h1 {
  font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem);
  line-height: 1.08;
  margin: 0 0 1rem;
  max-width: 18ch;
}

.produto-topo__sub {
  font-size: clamp(1.05rem, 1rem + .55vw, 1.4rem);
  font-weight: 400;
  color: var(--azul-100);
  margin: 0 0 2rem;
  max-width: 46ch;
}

.produto-topo__acoes { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }
.produto-topo__micro { margin: 1rem 0 0; font-size: var(--txt-xs); color: var(--azul-200); }

/* ===============================================================
   2. Explicação + resumo lateral
   =============================================================== */
.produto-corpo { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }

.produto-corpo__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 820px) {
  .produto-corpo__grade { grid-template-columns: 1fr; }
}

.produto-corpo__texto {
  font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem);
  line-height: 1.65;
  color: var(--cinza-700);
  margin: 0;
}
.produto-corpo__texto strong { color: var(--azul-900); }

.produto-resumo {
  background: var(--azul-50);
  border: 1px solid var(--azul-100);
  border-radius: var(--raio-lg);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}
.produto-resumo h2 {
  font-size: var(--txt-sm);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--azul-700);
  margin: 0 0 .75rem;
}
.produto-resumo dl { margin: 0; display: grid; gap: .85rem; }
.produto-resumo dt {
  font-size: var(--txt-xs);
  color: var(--cinza-500);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.produto-resumo dd { margin: .15rem 0 0; color: var(--azul-900); font-weight: 600; }

/* ===============================================================
   3. Vantagens em cards
   =============================================================== */
.produto-vantagens { background: var(--branco); padding: clamp(2rem, 5vw, 3.5rem) 0; }

.produto-vantagens h2,
.produto-passos h2 {
  font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem);
  color: var(--azul-900);
  margin: 0 0 1.75rem;
}

.produto-cards {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  /* `minmax(min(240px, 100%), 1fr)` e nao `minmax(240px, 1fr)`. O 240px cru e
     um piso RIGIDO: em container mais estreito que isso o grid insiste na
     coluna de 240px e estoura a largura — e como a `.tela` e `overflow:
     hidden`, o excedente seria CORTADO em vez de rolar (ninguem veria que
     faltou texto). Com `min(240px, 100%)` a coluna encolhe junto com o
     container. Padrao de grid responsivo, aplicado como prevencao: no viewport
     mais estreito que deu pra testar por linha de comando (489px) o layout ja
     estava correto — o Chrome headless nao aceita viewport menor que isso sem
     emulacao por CDP, entao 390px de verdade ficou sem teste automatizado. */
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--gap);
}
/* Filho de grid tambem nasce com `min-width: auto` (= min-content) e se recusa
   a encolher — mesma armadilha do item flex, um nivel abaixo. */
.tela__grade > *,
.tela__topo-grade > * {
  min-width: 0;
}
.produto-card {
  background: linear-gradient(to bottom, #fff, #f9f9f9);
  border: none;
  border-radius: var(--raio-full);
  padding: .75rem 1.25rem;
  position: relative;
  box-shadow: 0 4px 0 rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.05);
  transition: transform var(--transicao), box-shadow var(--transicao);
  color: var(--cinza-900);
  text-align: center;
  font-weight: 600;
  font-size: var(--txt-sm);
  /* Tinha `white-space: nowrap` + `display: inline-block` aqui. Frase de
     bullet longa ("Vale para carteira assinada, domestico, rural e MEI")
     recusava quebrar, vazava para fora da pilula e, no BPC/LOAS, uma pilula
     escrevia em cima da outra. Como grid item, flex tambem centraliza o texto
     que quebra em duas linhas e deixa as pilulas da mesma altura. */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  /* SEM `hyphens: auto`. Quebrava palavra no meio — "condi-ções",
     "traba-lhador", "fo-lha" — e em texto de venda para publico 60+ isso le
     mal e parece defeito. Frase curta em pilula larga nao precisa de hifen. */
  hyphens: manual;
}
.produto-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.05);
  background: #fff;
}

/* Removido o ::before para tirar a bolinha/check */
.produto-card::before { display: none; }


/* ===============================================================
   4. Como funciona — três passos
   =============================================================== */
.produto-passos { background: var(--azul-50); padding: clamp(2.5rem, 6vw, 4rem) 0; }

.produto-passos__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--gap);
  counter-reset: passo;
}
.produto-passo {
  background: var(--branco);
  border-radius: var(--raio);
  padding: 1.75rem 1.5rem;
  border-top: 4px solid var(--acento-ciano);
  box-shadow: var(--sombra-sm);
}
.produto-passo__num {
  display: block;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--azul-200);
  margin-bottom: .5rem;
}
.produto-passo h3 { margin: 0 0 .4rem; font-size: var(--txt-lg); color: var(--azul-900); }
.produto-passo p { margin: 0; color: var(--cinza-700); font-size: var(--txt-sm); }

/* ===============================================================
   5. Ressalva legal — cinza e menor, mas nunca escondida
   =============================================================== */
.produto-ressalva {
  border-left: 3px solid var(--cinza-200);
  padding: .5rem 0 .5rem 1.15rem;
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  color: var(--cinza-500);
  font-size: var(--txt-xs);
  max-width: 68ch;
}

/* ===============================================================
   6. Chamada final
   =============================================================== */
.produto-cta {
  background: linear-gradient(140deg, var(--azul-800), var(--azul-600));
  color: var(--branco);
  padding: clamp(2.5rem, 6vw, 4rem) 0;
}
.produto-cta__caixa {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}
.produto-cta h2 {
  margin: 0;
  font-size: clamp(1.4rem, 1.2rem + 1vw, 2.1rem);
  max-width: 22ch;
  color: var(--branco);
}
.produto-cta__nota {
  width: 100%; margin: 0;
  font-size: var(--txt-xs);
  color: var(--azul-200);
  max-width: 78ch;
}

/* ===============================================================
   7. Faixa de rascunho — some quando a tela vira ativo "S"
   =============================================================== */
.produto-rascunho {
  background: #fff8e1;
  border-bottom: 1px solid #f0e0a8;
  color: #6b5200;
  font-size: var(--txt-xs);
  padding: .7rem 0;
}
.produto-rascunho .container { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.produto-rascunho summary { cursor: pointer; font-weight: 700; }
.produto-rascunho ul {
  list-style: none; padding: .6rem 0 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: .35rem .9rem;
}
.produto-rascunho a { color: #6b5200; text-decoration: underline; }


/* ===============================================================
   8. Telas dentro da landing (index.html)
   Injetadas por ferramentas/gerar-secoes.py entre os marcadores
   TELAS:INICIO / TELAS:FIM. A landing mostra TUDO enquanto a
   pessoa rola — sem clique (decisão da May, 29/07/2026).
   Reaproveitam .secao e .secao--claro da home para o ritmo de
   fundo alternado continuar o mesmo do resto da página.
   =============================================================== */
/* A grade NAO leva max-width. Tinha `max-width: 72ch` aqui, que dava 745px:
   a grade das telas travava nesse tamanho dentro de um container de 1160px, as
   duas colunas dividiam 745 em vez de 1112, e a tela inteira aparecia
   comprimida na metade esquerda com uma faixa vazia enorme a direita. Como era
   `max-width`, nenhum `width` na grade tinha efeito — nem com `!important`.

   Medida de conforto de leitura e do TEXTO, nao do layout: quem limita a linha
   e o `.tela__texto` (60ch) mais abaixo. */


/* ===============================================================
   10. Layout de Topo em 2 Colunas para Telas
   =============================================================== */
.tela__topo-grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
  align-items: center;
}
@media (min-width: 941px) {
  .tela__topo-grade {
    grid-template-columns: 1.2fr 0.8fr;
  }
}
.tela__texto { max-width: 60ch; }

/* Contraste do corpo de texto dentro das telas.

   Aqui existia uma lista numerada (.bg-banner-04, -05, -06...) dizendo quais
   banners eram escuros. Saiu em 30/07/2026: a lista esquecia telas — a 01 e a
   02 ficaram de fora e o paragrafo delas caiu no --cinza-700 sobre azul vivo,
   ilegivel. Toda tela nova nasceria com o mesmo bug, em silencio.

   Agora o corpo herda a cor da propria tela, e quem decide e o 12-telas.css,
   onde a identidade daquele banner ja mora. Uma tela nova sem cor declarada
   herda o padrao do site em vez de ficar ilegivel. */
.tela .tela__texto-corpo,
.tela h2,
.tela .olho {
  color: inherit;
}

.tela__fio {
  display: block;
  width: 56px; height: 4px;
  border-radius: var(--raio-full);
  background: var(--acento-ciano);
  margin: .35rem 0 1.1rem;
}

.tela h2 {
  font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2.4rem);
  line-height: 1.15;
  margin: 0 0 .6rem;
  color: var(--azul-900);
}

.tela__sub {
  font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem);
  color: var(--azul-700);
  font-weight: 600;
  margin: 0 0 1rem;
}

.tela__texto-corpo {
  font-size: var(--txt-md);
  line-height: 1.65;
  color: var(--cinza-700);
  margin: 0 0 1.75rem;
}

/* Os cards de vantagem ficam menores aqui do que na página de produto:
   na landing eles são um item dentro de uma seção, não a seção inteira. */
/* Sem `padding-left: 2.9rem` e sem posicionar o `::before`: os dois eram
   reserva de espaco para o marcador (a bolinha) que foi removido em
   `.produto-card::before { display: none }`. O `12-telas.css` ja empurrava o
   padding certo por vir depois, mas deixar a reserva aqui era mina para quem
   mexesse. Tamanho e padding das pilulas das telas vivem no 12-telas.css. */
.tela__lista { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.tela__cta { margin-top: 1.75rem; }
.tela .produto-ressalva { margin-top: 1.5rem; }