/* ==========================================================================
   KIT RESPONSIVO DE CARA — base.css
   Mobile-first, compacto, lado a lado. Copie para o projeto e ajuste os tokens.
   Faixa fluida: 360px (celular) → 1440px (desktop). Sem media query para
   tipografia e espaco: clamp() faz a transicao continua.
   Doutrina completa: ~/.claude/skills/responsivo-de-cara/SKILL.md
   ========================================================================== */

/* ---------- 1. Tokens fluidos ---------- */
:root {
  /* Tipografia (Utopia-style, 360→1440). Corpo nunca abaixo de 16px no celular. */
  --fs-xs:   clamp(0.75rem, 0.73rem + 0.09vw, 0.81rem);   /* 12→13 legendas */
  --fs-sm:   clamp(0.875rem, 0.85rem + 0.11vw, 0.94rem);  /* 14→15 */
  --fs-base: clamp(1rem, 0.96rem + 0.19vw, 1.13rem);      /* 16→18 */
  --fs-lg:   clamp(1.13rem, 1.05rem + 0.37vw, 1.38rem);   /* 18→22 */
  --fs-xl:   clamp(1.38rem, 1.19rem + 0.83vw, 1.94rem);   /* 22→31 */
  --fs-2xl:  clamp(1.69rem, 1.35rem + 1.48vw, 2.69rem);   /* 27→43 */
  --fs-3xl:  clamp(2rem, 1.44rem + 2.5vw, 3.75rem);       /* 32→60 hero */

  /* Espaco fluido: secao no celular 40-48px, nao 96px. */
  --sp-2xs: clamp(0.25rem, 0.23rem + 0.09vw, 0.31rem);
  --sp-xs:  clamp(0.5rem, 0.46rem + 0.19vw, 0.63rem);
  --sp-sm:  clamp(0.75rem, 0.69rem + 0.28vw, 0.94rem);
  --sp-md:  clamp(1rem, 0.91rem + 0.37vw, 1.25rem);
  --sp-lg:  clamp(1.5rem, 1.33rem + 0.74vw, 2rem);
  --sp-xl:  clamp(2rem, 1.67rem + 1.48vw, 3rem);
  --sp-sec: clamp(2.5rem, 2.08rem + 1.85vw, 5rem);        /* padding de secao 40→80 */

  --gutter: clamp(1rem, 0.78rem + 0.93vw, 2rem);          /* borda lateral 16→32 */
  --gap:    clamp(0.625rem, 0.5rem + 0.56vw, 1.25rem);    /* entre cartoes 10→20 */
  --shell:  min(100% - 2 * var(--gutter), 76rem);         /* largura de COMPOSICAO */
  --leitura: 66ch;                                        /* largura de LEITURA (outra coisa) */
  --toque: 44px;
  --nav-h: 3.75rem;                                       /* altura do cabecalho fixo (a hero passa por baixo dele) */
  /* Granulacao (doutrina, secao 12): ruido SVG cinza a 6%, camada de FUNDO sob o conteudo. */
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
  --raio: clamp(0.75rem, 0.66rem + 0.37vw, 1rem);
  --dur: 420ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 2. Reset que evita os estouros classicos ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-size: var(--fs-base); line-height: 1.55; overflow-wrap: break-word; }
img, svg, video, canvas, picture { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { line-height: 1.12; text-wrap: balance; margin: 0 0 var(--sp-xs); }
h3, h4 { line-height: 1.25; }
p { text-wrap: pretty; margin: 0 0 var(--sp-sm); }
:where(.flex, .cluster, .duo, .grade, .trio, .quad, .bento) > * { min-width: 0; } /* filho de flex/grid sem min-width:auto */
input, select, textarea, button { font: inherit; font-size: max(16px, 1em); }       /* iOS nao da zoom no foco */
:is(button, [role=button], .botao, nav a, input:not([type=checkbox], [type=radio]), select) { min-height: var(--toque); touch-action: manipulation; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ---------- 3. Composicao ---------- */
.shell   { width: var(--shell); margin-inline: auto; }
.leitura { max-width: var(--leitura); }
.secao   { padding-block: var(--sp-sec); }

/* GRADE: se ajusta sozinha. --min e a menor largura digna de um item.
   Com --min: 150px, 360px de tela ja rende 2 colunas. */
.grade { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 150px)), 1fr)); }
.grade--fill { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, 150px)), 1fr)); }

/* DUO: SEMPRE 2 colunas (par de campos, par de cartoes). Galeria que cresce
   (2 → 3 → 4) usa .grade ou .bento. */
.duo  { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* TRIO/QUAD: 2 no celular, 3-4 quando couber (recursos curtos, numeros, rodape). */
.trio { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quad { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48rem) { .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } .quad { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* FAIXA DE 3: passos 1-2-3 (e qualquer trio que precisa ficar junto) em 3 colunas
   ja no celular. Nunca "2 + 1 largo" (doutrina, secao 1). Cinco passos: 3 + 2 (quebra sozinha). */
.trio--faixa { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-xs); }
@media (min-width: 48rem) { .trio--faixa { gap: var(--gap); } }
/* Item destaque (galeria, produtos) ocupa a linha inteira em .duo/.grade. Em .trio/.quad
   NAO se usa: a quantidade certa dispensa o "largo" (6 recursos = 2x3; 3 passos = faixa de 3). */
:is(.duo, .grade) > .largo { grid-column: 1 / -1; }

/* ALTERNA (Switcher, Every Layout): 2-4 itens ficam LADO A LADO enquanto o
   container tiver >= --limiar; abaixo disso viram pilha, todos juntos, sem
   media query. Com 5+ itens, empilha (use .grade). */
.alterna { display: flex; flex-wrap: wrap; gap: var(--gap); }
.alterna > * { flex-grow: 1; flex-basis: calc((var(--limiar, 20rem) - 100%) * 999); }
.alterna > :nth-last-child(n + 5), .alterna > :nth-last-child(n + 5) ~ * { flex-basis: 100%; }

/* DIVIDIDO: texto + midia. Lado a lado quando cada lado tiver >= 20rem. */
.dividido { display: flex; flex-wrap: wrap; gap: var(--sp-lg); align-items: center; }
.dividido > * { flex: 1 1 20rem; }

/* CLUSTER: botoes, tags, selos — quebram linha, nunca estouram. */
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-xs); align-items: center; }
.cluster--cta > * { flex: 1 1 9rem; }   /* 2 CTAs lado a lado em 360px, dividindo a linha */
@media (min-width: 48rem) { .cluster--cta > * { flex: 0 0 auto; min-width: 11rem; } } /* no desktop, tamanho do botao */

/* BENTO: mosaico. Celular 2 colunas com destaques largos; desktop 4. */
.bento { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; }
.bento > .alto { grid-row: span 2; }
@media (min-width: 64rem) { .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bento > .largo { grid-column: span 2; } }

/* TRILHO: cartoes ricos (depoimentos, 4+ itens com texto). Rolagem lateral e
   VETADA no celular, inclusive dentro de componente (15/09/2026): ate 63.99rem
   e uma grade de 2 colunas lado a lado, sem rolagem; a partir de 64rem (computador)
   os cartoes se espalham em fileira (4 em 1024). Planos NAO usam trilho: usam .planos. */
.trilho { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 64rem) { .trilho { grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); } }

/* PLANOS: os 3 cartoes lado a lado em TODA largura (selo, nome, preco, botao) + a
   lista do plano tocado numa FAIXA da largura toda embaixo (29/09 e 30/09/2026);
   nunca a lista dentro da coluna de 1/3. O recomendado (.plano--destaque) fica no
   MEIO e domina por tamanho no tablet/computador (secao 8). Sem JS: cada cartao e um
   <label> com um radio dentro; a faixa certa aparece por :has(:checked). Estrutura:
   .planos > label.plano x3 (com input.plano__radio) + div.plano__lista x3 (mesma ordem). */
.planos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-xs); }
.plano { position: relative; display: grid; align-content: start; justify-items: center; text-align: center; cursor: pointer; min-width: 0; }
.plano__radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.plano__selo { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; }
.plano:has(.plano__radio:focus-visible) { outline: 2px solid currentColor; outline-offset: 3px; }
.plano__lista { display: none; grid-column: 1 / -1; grid-row: 2; }
.planos:has(.plano:nth-of-type(1) .plano__radio:checked) > .plano__lista:nth-of-type(1),
.planos:has(.plano:nth-of-type(2) .plano__radio:checked) > .plano__lista:nth-of-type(2),
.planos:has(.plano:nth-of-type(3) .plano__radio:checked) > .plano__lista:nth-of-type(3) { display: block; }
.plano__lista ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-xs); grid-template-columns: repeat(auto-fit, minmax(min(100%, 5.5rem), 1fr)); }
@media (min-width: 48rem) {
  .planos { grid-template-columns: 1fr 1.18fr 1fr; gap: var(--gap); align-items: center; }
  .plano:not(.plano--destaque) { transform: scale(0.965); }   /* os vizinhos recuam; o do meio domina */
}
@media (prefers-reduced-motion: reduce) { .plano:not(.plano--destaque) { transform: none; } }

/* ---------- 4. Cartao que se adapta ao ESPACO DELE (container query) ---------- */
.cartao-box { container-type: inline-size; }
.cartao { display: grid; align-content: start; gap: var(--sp-xs); padding: clamp(0.75rem, 4cqi, 1.5rem); border-radius: var(--raio); }
.cartao__icone { width: 2.25rem; height: 2.25rem; }
.cartao-box > .cartao { height: 100%; }  /* cartoes da mesma linha com a mesma altura */
@container (min-width: 22rem) {
  .cartao { grid-template-columns: auto 1fr; align-items: start; column-gap: var(--sp-sm); }
  .cartao__icone { grid-row: span 3; }
}
/* Cartoes irmaos com titulo/texto/botao ALINHADOS entre si (subgrid). */
.alinhados { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 150px)), 1fr)); }
.alinhados > * { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: var(--sp-xs); }

/* Numero de destaque (stat): escala com o cartao, nao com a tela. */
.stat__num { font-size: clamp(1.5rem, 14cqi, 3rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; }

/* ---------- 5. Hero e tela cheia sem o bug da barra do navegador ---------- */
/* Hero de LP/site COBRE A TELA INTEIRA (08/10/2026, "o erro que eu abomino"):
   a <section class="hero faixa-brilho sob-topo"> ocupa a LARGURA toda (e o fundo vai de
   ponta a ponta) e tem min-height 100svh (svh = a tela com a barra do navegador aberta,
   sem o salto do 100vh); o conteudo (.hero__corpo, dentro de um .shell) fica centrado.
   O cabecalho fixo passa POR CIMA da hero (.sob-topo = margin-top negativo), entao a hero
   ja nasce em y=0 e reserva o --nav-h no padding de cima. Vale em computador, tablet e
   celular. Secao comum e tela de sistema continuam com a altura do conteudo. */
.hero { display: grid; align-content: center; min-height: 100vh; min-height: 100svh; padding-block: calc(var(--nav-h) + var(--sp-lg)) var(--sp-lg); box-sizing: border-box; }
.hero__corpo { display: grid; gap: var(--sp-md); }
/* Brilho de fundo em faixa de largura total (vai no proprio elemento de largura toda, ex.: a
   .hero): some antes das bordas, nao corta. O grao (token --grao) e camada de fundo. */
.faixa-brilho { background: var(--grao), radial-gradient(90% 70% at 78% 0%, color-mix(in srgb, var(--brilho, #ff5a36) 22%, transparent), transparent 70%); }
.sob-topo { margin-top: calc(-1 * var(--nav-h)); }   /* a hero sobe para baixo do cabecalho fixo */
.fixo-base { position: sticky; bottom: 0; padding-bottom: max(var(--sp-sm), env(safe-area-inset-bottom)); }

/* ---------- 6. Conteudo longo compacto no celular ---------- */
/* Tabela de dados. No CELULAR (ate 47.99rem) cada linha vira um CARTAO: a primeira
   celula (<th scope="row">) e o titulo e cada valor mostra o nome da coluna em cima
   (td::before com attr(data-rotulo)); 3 valores = 3 colunas. Rolagem lateral e vetada
   no celular (15/09/2026); a partir do tablet a tabela e tabela e, se for larga demais,
   rola dentro do proprio quadro, nunca a pagina. Cada <td> leva data-rotulo="Coluna". */
.tabela-box table { width: 100%; border-collapse: collapse; }
@media (min-width: 48rem) { .tabela-box { overflow-x: auto; overscroll-behavior-x: contain; } }
@media (max-width: 47.99rem) {
  .tabela-box :is(table, tbody) { display: block; }
  .tabela-box thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }  /* some da vista, fica para leitor de tela */
  .tabela-box tr { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--sp-2xs) var(--sp-sm); padding: var(--sp-sm); margin-bottom: var(--sp-xs); border-radius: var(--raio); border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 18%, transparent); }
  .tabela-box tr > th { grid-column: 1 / -1; grid-row: 1; text-align: start; }
  .tabela-box tr > td { grid-row: 2; display: block; min-width: 0; }
  .tabela-box td::before { content: attr(data-rotulo); display: block; font-size: var(--fs-xs); opacity: 0.7; }
}
/* "Ver mais": corta lista longa no celular, desktop mostra tudo. */
@media (max-width: 47.99rem) { .mais-celular > :nth-child(n + 5):not(.mostrar) { display: none; } }

/* ---------- 7. Efeitos (leves no celular: so transform e opacity) ---------- */
/* So esconde se o efeitos.js rodou (ele poe .js-ok no <html>): sem JS, nada some. */
.js-ok .revelar { opacity: 0; transform: translateY(16px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.js-ok .revelar.visivel { opacity: 1; transform: none; }
.tocavel { transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out); }
.tocavel:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .tocavel:hover { transform: translateY(-3px); } }
/* Revelar sem JS, ligado a rolagem (Chrome/Edge/Safari 26+). */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rolagem-revela { animation: surgir linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    @keyframes surgir { from { opacity: 0; transform: translateY(24px) scale(0.98); } }
  }
}
/* Menos movimento = sem deslocamento, mas com fade curto (nao zero). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .js-ok .revelar { transform: none; transition: opacity 200ms linear; transition-delay: 0ms; }
  .tocavel, .tocavel:active, .tocavel:hover { transform: none; }
}