/* =====================================================================
   12-telas.css
   Estilos específicos para as seções da landing page, baseados nos banners.
   Cada tela assume a identidade visual do banner que a inspirou —
   "telas de revista" com geometria e camadas.

   DE ONDE VEM A COR: dos sidecars em `referencias/banners/*.md`, seção
   "Cores amostradas". O hex medido no banner virou token nomeado em
   01-tokens.css (`--tela-<id>-*`); aqui só se pinta com o token. Ao mexer
   numa tela, abra o sidecar dela primeiro — a fonte é o banner, nao o gosto.

   DEPENDE de 11-produto.css: `.produto-cards`, `.produto-card`, `.tela__fio`
   e `.tela__texto` nascem lá. Este arquivo só pinta por tela. Se o index
   parar de carregar o 11, as listas caem no marcador padrao do navegador
   (a bolinha) e as pilulas viram tiras — foi exatamente o que aconteceu
   em 30/07/2026.
   ===================================================================== */

/* Regra global para as telas: snap align e altura mínima.

   `display: grid` com `align-content: center` centraliza na vertical. Antes era
   `flex` + `align-items: center`, que faz o mesmo; grid ficou porque item de
   grid estica pra coluna inteira por padrao, enquanto item de flex encolhe pro
   conteudo — uma armadilha a menos nas proximas mexidas.

   NOTA (30/07/2026): a tela ficava comprimida na metade esquerda e eu perdi um
   bom tempo culpando o flex. Nao era. Era `max-width: 72ch` no `.tela__grade`,
   la no 11-produto.css, travando a grade em 745px. Enquanto o `max-width`
   estava lá, nenhum `width` mudava nada — nem com `!important`. Se aparecer de
   novo layout que ignora largura, procure `max-width` antes de mexer no
   mecanismo de layout. */
.hero, .tela {
  scroll-snap-align: start;
  min-height: 100vh;
  display: grid;
  align-content: center;
  position: relative;
  overflow: hidden;
}

/* `min-width: 0` para a cadeia de dimensionamento nao travar no tamanho minimo
   do conteudo. Item de grid tambem nasce com `min-width: auto`. */
.hero > .container,
.tela > .container {
  /* 1280px nas telas, contra 1160px do resto do site: aqui sao duas colunas, e
     o fundo e sangrado de ponta a ponta, entao a faixa lateral nao aparece como
     "borda branca". Nao passa de 1280 de proposito — linha de texto larga em
     monitor de 1920 le pior que espaco vazio. */
  width: min(var(--largura-tela, var(--largura)), 100vw - 2.5rem);
  min-width: 0;
  justify-self: center;
}

.tela__grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
  position: relative;
  z-index: 2;
  /* `width: 100%` explicito. Medido no navegador: o `.container` tinha os
     1160px corretos, mas a grade dentro dele ficava com 745px (366 + 331 + gap)
     — encolhia pro tamanho do conteudo em vez de preencher, e a tela inteira
     ficava comprimida na metade esquerda. Como `1fr` divide o que a grade tem,
     encolher a grade encolhia as duas colunas junto. */
  width: 100%;
}

/* Duas colunas a partir de 941px: texto a esquerda, pilulas (e foto) a direita.

   1.05fr / 0.95fr, quase meio a meio. O parágrafo tem 3 a 5 linhas e o titulo
   e grande: com 1.2/0.8 a coluna de texto ganhava largura que nao usava (o
   `.tela__texto` para em 60ch de qualquer forma) e as pilulas ficavam
   estreitas, quebrando frase de 6 palavras em tres linhas. Quase igual deixa a
   pilula caber em uma linha, que e o que faz ela parecer botao. */
@media (min-width: 941px) {
  .tela__grade {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

/* A coluna da direita. As pilulas viram PILHA de largura unica — nada de
   `auto-fit`, que com tres itens fazia dois em cima e um embaixo e abria um
   buraco assimetrico. Empilhada e como o proprio banner 02 faz. */
.tela__lado {
  display: grid;
  gap: 1.5rem;
  align-content: center;
  position: relative;
  z-index: 2;
}
.tela__lado .produto-cards {
  grid-template-columns: 1fr;
  gap: .85rem;
}
.tela__lado .produto-card {
  /* Texto a esquerda com um respiro maior: pilula larga com texto centralizado
     deixa buraco nos dois lados quando a frase e curta, e as frases tem tamanho
     bem diferente entre si (de 4 a 9 palavras). Alinhado, viram uma lista. */
  justify-content: flex-start;
  text-align: left;
  padding: 1rem 1.5rem;

  /* CANTO DE 24px, NAO ESTADIO. Duas razoes.
     Desenho: com `raio-full` numa caixa de duas linhas cada ponta vira um
     semicirculo de ~42px e o texto comeca DENTRO da curva, encostando no arco.
     Usabilidade, que e a razao forte: estadio + relevo + `translateY` no hover
     e a definicao de "isso e um botao". Sao ~40 dessas na pagina, ao lado de UM
     botao verde que e o clique de verdade. Quem tem 70 anos toca na pilula, nao
     acontece nada, e conclui que o site esta quebrado.
     Virou regra: forma de estadio na pagina significa "isso clica". */
  border-radius: var(--raio-lg);
}

/* Coisa que nao clica nao reage ao mouse. */
.tela .produto-card,
.tela .produto-card:hover {
  transform: none;
  cursor: default;
}
.tela--portabilidade .produto-card:hover,
.tela--clt-salario .produto-card:hover,
.tela--cartaz .produto-card:hover {
  background: inherit;
}

/* RELEVO EM FUNDO ESCURO E LUZ EM CIMA, nao sombra embaixo: a sombra preta do
   `.produto-card` some num fundo de luminancia .017, e a pilula das telas
   escuras virava contorno fantasma em vez de celula em relevo. */
.tela--bpc-loas .produto-card,
.tela--pj-modernize .produto-card,
.tela--consorcio .produto-card,
.tela--portabilidade .produto-card {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 0 rgba(0,0,0,.35);
}

/* Ate 940px tudo empilha numa coluna so, e ai a lista pode voltar a usar duas
   colunas quando houver espaco — em tablet cabe, e economiza altura. */
@media (max-width: 940px) {
  .tela__lado .produto-cards {
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  }
  .tela__lado .produto-card {
    justify-content: center;
    text-align: center;
  }
}

.tela__imagem {
  /* `width: 100%` + `justify-self: stretch` AQUI, no container. Estava so na
     <img>, e porcentagem de pai que encolhe pro tamanho do conteudo e
     circular: a foto travava em ~276px e sobrava meia coluna vazia. */
  width: 100%;
  justify-self: stretch;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* Borda arredondada mora AQUI, no CSS, e nao em style inline no HTML:
   inline o gerador tinha que repetir em toda tela e a primeira que
   esquecesse ficaria com canto reto (foi o caso da carteira de trabalho). */
.tela__imagem img {
  /* `width: 100%` e nao so `max-width`: com max-width a imagem parava no
     tamanho natural dela e sobrava metade da coluna vazia — a tela ficava
     com um buraco do lado do texto. O max-width segura o limite em tela
     grande pra foto de 1800px nao virar outdoor. */
  width: 100%;
  max-width: 560px;
  height: auto;
  border-radius: var(--raio-lg);
  filter: drop-shadow(var(--sombra-lg));
  position: relative;
  z-index: 2;
}

/* Elementos Decorativos (Camadas) */
.tela::before, .tela::after {
  content: '';
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

/* TIPOGRAFIA DAS TELAS — publico de 60, 70, 80 anos.

   O `.olho` carrega O NOME DO PRODUTO (o `h2` e o gancho e de proposito nao
   nomeia nada). Ele estava com 13,6px, caixa alta e `letter-spacing: .16em`:
   era o MENOR texto da tela, e caixa alta em corpo pequeno e o pior caso para
   vista cansada, porque tira a silhueta da palavra. Subiu para 17px, com menos
   espacamento e mais peso.

   O corpo estava fixo em 1.125rem enquanto o `body` cresce ate 1.2rem em tela
   grande — ou seja, o paragrafo da tela ENCOLHIA em relacao ao resto do site
   justamente onde havia espaco de sobra. */
.tela .olho {
  font-size: 1.0625rem;
  letter-spacing: .10em;
  font-weight: 800;
}
.tela .tela__texto-corpo {
  font-size: var(--txt-lg);
  line-height: 1.6;
}
.tela .produto-card {
  font-size: var(--txt-md);
}

/* Ressalva legal (a do BPC/LOAS vem escrita no proprio banner e tem que
   viajar junto com o texto). 16px, nao 14,4px: e o unico texto que TEM que
   ser lido para a loja estar protegida. Ressalva ilegivel nao protege ninguem. */
.tela .produto-ressalva {
  font-size: 1rem;
  /* Sem opacity: em fundo azul escuro ela sumia. Ressalva legal tem que ser
     LIDA — a do BPC/LOAS vem escrita no proprio banner e o sidecar manda ela
     viajar junto com o texto. Discreta e sinonimo de menor, nao de apagada. */
  color: inherit;
  margin-top: 1rem;
  max-width: 52ch;
  padding-left: .85rem;
  border-left: 3px solid currentColor;
}
.tela .produto-ressalva strong { font-weight: 700; }

/* ---------------------------------------------------------------------
   TELA 01: Portabilidade — banner 01 (familia A, clean financial)
   Sidecar: fundo azul claro #599cc9, destaque marinho #17306a, texto branco.
   Identidade: azul suave, transparências, ar de conta e comparação.
   --------------------------------------------------------------------- */
.tela--portabilidade {
  background-color: var(--tela-portabilidade-bg);
  color: var(--tela-portabilidade-txt);
}
.tela--portabilidade h2, .tela--portabilidade .olho {
  color: var(--tela-portabilidade-txt);
}
.tela--portabilidade .tela__fio {
  background-color: var(--tela-portabilidade-dest);
}
/* A pilula era vidro (`rgba(255,255,255,.12)`) e clareava o fundo para ~#4e88b0:
   o texto branco caia para 3,83:1 e reprovava, mesmo com o fundo da tela
   passando. Em fundo medio a regra e ESCURECER, nunca clarear. Com o marinho
   do proprio banner da 12,6:1. */
.tela--portabilidade .produto-card {
  background: var(--tela-portabilidade-dest);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
}
.tela--portabilidade::after {
  content: '';
  top: 0; right: 0; width: 40%; height: 100%;
  background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.05) 100%);
}

/* ---------------------------------------------------------------------
   TELA 02: CLT Salário — banner 02 (familia B, promocional saturada)
   Sidecar: fundo #008efb, cartao grafite #3a3a3a, destaque amarelo #f8d808.
   Fiel ao banner: "cartão cinza-grafite de cantos muito arredondados",
   "quatro pílulas grafite empilhadas" e "palavras-chave em amarelo".
   O amarelo sobre o grafite passa folgado no AA — e publico 60+ le melhor
   amarelo sobre escuro que branco sobre azul chapado.
   --------------------------------------------------------------------- */
.tela--clt-salario {
  background-color: var(--tela-clt-salario-bg);
  color: var(--tela-clt-salario-txt);
}
.tela--clt-salario h2, .tela--clt-salario .olho {
  color: var(--tela-clt-salario-txt);
}
.tela--clt-salario .tela__fio {
  background-color: var(--tela-clt-salario-dest);
}
.tela--clt-salario .produto-card {
  background: var(--tela-clt-salario-cartao);
  color: var(--tela-clt-salario-dest);
  border-radius: var(--raio-lg);
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
.tela--clt-salario .produto-card:hover {
  background: #2f2f2f;
}
/* Palavra-chave em amarelo dentro do paragrafo, como no banner — mas com a
   CAIXA grafite atras. Amarelo direto no azul dava 3,24:1 e reprovava (o
   mesmo amarelo passa na tela 04 porque la o fundo e bem mais escuro). Dentro
   do grafite da 8:1, e fica ainda mais fiel ao banner, que poe amarelo dentro
   de grafite e nao em cima do azul. */
.tela--clt-salario .tela__texto-corpo strong {
  color: var(--tela-clt-salario-dest);
  background: var(--tela-clt-salario-cartao);
  padding: .05em .3em;
  border-radius: 6px;
}
.tela--clt-salario::before {
  content: '';
  bottom: -10%; left: -5%; width: 50%; height: 60%;
  background: var(--tela-clt-salario-dest);
  opacity: 0.1;
  border-radius: 50%;
  filter: blur(60px);
}

/* ---------------------------------------------------------------------
   TELA 03: CLT Trabalhador — banner 03 (colagem editorial)
   Sidecar: fundo branco, marinho #0c3577, azul de apoio #3c82c7.
   Identidade: fundo branco, faixa marinho no topo, visual limpo e oficial
   (o banner usa print de noticia do gov.br como prova).
   --------------------------------------------------------------------- */
.tela--clt-trabalhador {
  background-color: var(--tela-clt-trabalhador-bg);
}
.tela--clt-trabalhador h2, .tela--clt-trabalhador .olho {
  color: var(--tela-clt-trabalhador-dest);
}
.tela--clt-trabalhador .tela__fio {
  background-color: var(--tela-clt-trabalhador-dest);
}
.tela--clt-trabalhador .produto-card {
  border-left: 4px solid var(--tela-clt-trabalhador-dest);
  background: var(--azul-50);
  color: var(--marca-marinho);
  font-weight: 500;
}
.tela--clt-trabalhador::before {
  content: '';
  top: 0; left: 0; width: 100%; height: 8px;
  background: var(--tela-clt-trabalhador-dest);
}

/* ---------------------------------------------------------------------
   TELA 04: BPC/LOAS — banner 04 (familia B, duotone azul)
   Sidecar: fundo #014ab5, destaque amarelo #f8e800, texto branco.
   Fiel ao banner: "amarelo puro so nas chamadas" — o chapeu ("Se voce e um
   beneficiario") vem amarelo e o titulo grande fica branco. Amarelo em tudo
   mataria o destaque, que e justamente o que o banner faz.
   --------------------------------------------------------------------- */
.tela--bpc-loas {
  background-color: var(--tela-bpc-loas-bg);
  color: var(--tela-bpc-loas-txt);
}
.tela--bpc-loas h2 {
  color: var(--tela-bpc-loas-txt);
}
.tela--bpc-loas .olho {
  color: var(--tela-bpc-loas-dest);
}
.tela--bpc-loas .tela__texto-corpo strong {
  color: var(--tela-bpc-loas-dest);
}
.tela--bpc-loas .tela__fio {
  background-color: var(--tela-bpc-loas-dest);
}
.tela--bpc-loas .produto-card {
  background: rgba(255,255,255,0.12);
  color: var(--branco);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--raio-sm);
}
.tela--bpc-loas::after {
  content: '';
  bottom: 0; right: 0; width: 100%; height: 15%;
  background: var(--tela-bpc-loas-dest);
  opacity: 0.2;
  clip-path: polygon(0 100%, 100% 100%, 100% 0);
}

/* ---------------------------------------------------------------------
   TELA 05: INSS Sem Margem — banner 05
   Sidecar: fundo marinho #112755, azul eletrico #001aff.
   Identidade: marinho quase preto, azul vivo, ar de "tem outra saida".
   --------------------------------------------------------------------- */
.tela--inss-margem {
  background-color: var(--tela-inss-margem-bg);
  color: var(--tela-inss-margem-txt);
}
.tela--inss-margem h2, .tela--inss-margem .olho {
  color: var(--tela-inss-margem-txt);
}
.tela--inss-margem .tela__fio {
  background-color: var(--tela-inss-margem-vivo);
}
.tela--inss-margem .produto-card {
  background: var(--branco);
  color: var(--marca-marinho);
  border-radius: var(--raio-sm);
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.tela--inss-margem::before {
  content: '';
  top: 0; left: 0; width: 100%; height: 100%;
  background: radial-gradient(circle at 20% 30%, rgba(0,26,255,0.15) 0%, transparent 50%);
}

/* ---------------------------------------------------------------------
   TELA 06: PJ Digital — banner 06
   Sidecar: fundo #0c1e56, cartao celeste #01a5e2, texto #7fceec.
   Identidade: azul escuro, celeste neon, textura de app/digital.
   --------------------------------------------------------------------- */
.tela--pj-digital {
  background-color: var(--tela-pj-digital-bg);
  color: var(--tela-pj-digital-txt);
}
.tela--pj-digital h2, .tela--pj-digital .olho {
  color: var(--tela-pj-digital-txt);
}
.tela--pj-digital .tela__fio {
  background-color: var(--tela-pj-digital-cartao);
}
/* Texto MARINHO sobre o celeste, nao branco: branco dava 2,81:1, a pior da
   pagina. Invertido da 5,60:1 — e e assim que o cartao do banner le. */
.tela--pj-digital .produto-card {
  background: var(--tela-pj-digital-cartao);
  color: var(--tela-pj-digital-bg);
  box-shadow: 0 0 15px rgba(1, 165, 226, 0.3);
}
.tela--pj-digital::after {
  content: '';
  bottom: 0; left: 0; width: 100%; height: 100%;
  background-image: radial-gradient(var(--tela-pj-digital-cartao) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.1;
}

/* ---------------------------------------------------------------------
   TELA 07: PJ Modernize — banner 07
   Sidecar: fundo #1f2044, destaque celeste suave #80c5d4.
   Identidade: roxo-marinho, celeste suave, ar de inovacao.
   --------------------------------------------------------------------- */
.tela--pj-modernize {
  background-color: var(--tela-pj-modernize-bg);
  color: var(--tela-pj-modernize-txt);
}
.tela--pj-modernize h2, .tela--pj-modernize .olho {
  color: var(--tela-pj-modernize-txt);
}
.tela--pj-modernize .tela__fio {
  background-color: var(--tela-pj-modernize-dest);
}
.tela--pj-modernize .produto-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--tela-pj-modernize-dest);
  color: var(--branco);
  border-radius: var(--raio-sm);
}
.tela--pj-modernize::before {
  content: '';
  top: 0; right: 0; width: 30%; height: 100%;
  background: linear-gradient(to bottom, transparent, var(--tela-pj-modernize-dest), transparent);
  opacity: 0.1;
}

/* ---------------------------------------------------------------------
   TELA 08: Consignado 108 meses — banner 08
   Sidecar: fundo #0a326d, destaque ciano #00bbe4.
   Identidade: azul solido, branco, confianca tradicional.
   --------------------------------------------------------------------- */
.tela--consignado-108 {
  background-color: var(--tela-consignado-108-bg);
  color: var(--tela-consignado-108-txt);
}
.tela--consignado-108 h2, .tela--consignado-108 .olho {
  color: var(--tela-consignado-108-txt);
}
.tela--consignado-108 .tela__fio {
  background-color: var(--tela-consignado-108-dest);
}
/* Pilula INVERTIDA: marinho solido com texto branco. A tela agora e branca,
   entao pilula branca desapareceria no fundo. Marinho sobre branco tambem
   devolve o relevo, que em fundo escuro tinha virado luz. */
.tela--consignado-108 .produto-card {
  background: var(--tela-consignado-108-marinho);
  color: #fff;
  font-weight: 600;
  border-bottom: 3px solid var(--tela-consignado-108-dest);
  box-shadow: 0 3px 0 rgba(0,0,0,.12), 0 6px 14px rgba(0,0,0,.10);
}

/* ---------------------------------------------------------------------
   TELA 09: FGTS — banner 09 (totem da loja)
   Sidecar: fundo #00245a, fundo-2 #04366b.
   Identidade: marinho profundo, corte diagonal, "dinheiro na mao".
   --------------------------------------------------------------------- */
.tela--fgts {
  background-color: var(--tela-fgts-bg);
  color: var(--tela-fgts-txt);
}
.tela--fgts h2, .tela--fgts .olho {
  color: var(--tela-fgts-txt);
}
.tela--fgts .tela__fio {
  background-color: var(--tela-fgts-apoio);
}
.tela--fgts .produto-card {
  background: var(--branco);
  color: var(--tela-fgts-bg);
  border-radius: var(--raio-sm);
  font-weight: 600;
}
.tela--fgts::before {
  content: '';
  bottom: 0; left: 0; width: 100%; height: 20%;
  background: var(--tela-fgts-fundo2);
  clip-path: polygon(0 100%, 100% 100%, 100% 70%, 0 100%);
}

/* ---------------------------------------------------------------------
   TELA 10: Crédito Pessoal — banner 10
   Sidecar: fundo cinza gelo #f2f2f2, destaque ciano #3cdde6, texto #2c2946.
   Identidade: claro e leve — a unica tela clara no meio das escuras.
   --------------------------------------------------------------------- */
.tela--pessoal {
  background-color: var(--tela-pessoal-bg);
  color: var(--tela-pessoal-txt);
}
.tela--pessoal h2, .tela--pessoal .olho {
  color: var(--tela-pessoal-txt);
}
.tela--pessoal .tela__fio {
  background-color: var(--tela-pessoal-dest-escuro);
}
.tela--pessoal .produto-card {
  background: var(--branco);
  color: var(--tela-pessoal-txt);
  border-radius: var(--raio-sm);
  box-shadow: var(--sombra-sm);
  border: 1px solid var(--cinza-200);
}
.tela--pessoal::after {
  content: '';
  top: 0; left: 0; width: 100%; height: 100%;
  background: radial-gradient(circle at center, rgba(60,221,230,0.1) 0%, transparent 70%);
}

/* ---------------------------------------------------------------------
   TELA 11: Cartaz de produtos — banner 11
   Sidecar: fundo branco, azul #0743aa e #004bc9.
   Identidade: catalogo — lista organizada, contorno azul, nada chapado.
   --------------------------------------------------------------------- */
.tela--cartaz {
  background-color: var(--tela-cartaz-bg);
}
.tela--cartaz h2, .tela--cartaz .olho {
  color: var(--tela-cartaz-azul);
}
.tela--cartaz .tela__fio {
  background-color: var(--tela-cartaz-azul2);
}
.tela--cartaz .produto-card {
  background: var(--branco);
  border: 1px solid var(--tela-cartaz-azul);
  color: var(--tela-cartaz-azul);
  border-radius: var(--raio-sm);
  transition: all .2s;
}
/* A tela 11 e CATALOGO, nao lista de beneficio: sao 7 itens, e sete pilulas com
   relevo viram poluicao. Duas colunas, sem relevo, so contorno. Tratamento
   diferente na penultima tela ainda ajuda a quebrar a monotonia da rolagem. */
@media (min-width: 941px) {
  .tela--cartaz .tela__lado .produto-cards {
    grid-template-columns: 1fr 1fr;
    gap: .6rem 1.25rem;
  }
}
.tela--cartaz .produto-card {
  box-shadow: none;
  border-radius: var(--raio-sm);
}

/* ---------------------------------------------------------------------
   TELA 12: Consórcio de veículo — video 12
   Sidecar: fundo noite #0b1d2a, ceu #0e72a0.
   Identidade: azul noite com degrade de ceu — sonho e conquista.
   --------------------------------------------------------------------- */
.tela--consorcio {
  background-color: var(--tela-consorcio-bg);
  color: var(--tela-consorcio-txt);
}
.tela--consorcio h2, .tela--consorcio .olho {
  color: var(--tela-consorcio-txt);
}
.tela--consorcio .tela__fio {
  background-color: var(--tela-consorcio-ceu);
}
.tela--consorcio .produto-card {
  background: rgba(255,255,255,0.08);
  color: var(--branco);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--raio-sm);
}
.tela--consorcio::before {
  content: '';
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(to bottom, var(--tela-consorcio-bg) 0%, #0d2a3d 100%);
}