/*
 * Sistema tipografico da landing de cupom e link - v2, 20/09/2026.
 *
 * Carregado DEPOIS de styles.css e creator-v2.css, de proposito: os dois vieram
 * minificados numa linha so. Como este arquivo e o ultimo, qualquer regra aqui
 * ganha das anteriores na mesma especificidade - inclusive das que estao dentro
 * de @media la atras, porque media query nao soma especificidade. Por isso a
 * maioria das correcoes abaixo dispensa !important.
 *
 * O que este arquivo estabelece:
 *   1. uma unica familia (Poppins) e o fim de toda serifa e italico;
 *   2. tokens fixos de tamanho, usados por toda a pagina;
 *   3. espacamento tipografico unico (entrelinha, tracking, word-spacing);
 *   4. .text-highlight - o retangulo verde escuro atras da expressao central;
 *   5. colageno como destaque real, antes dos cards ZERO;
 *   6. fotos editoriais em quadro 1:1 sem cortar rosto, maos, pote e copo;
 *   7. piso de 12px em tudo que precisa ser lido.
 */

/* ============================================ 1. FAMILIA UNICA - POPPINS ===
   As duas familias antigas entravam pelas variaveis --sans e --serif, usadas
   em todo o pacote. Apontar as duas para Poppins desliga a serifa na pagina
   inteira sem cacar seletor por seletor; o que sobra sao os pontos que
   declaravam Georgia, Arial ou font-style:italic na mao, tratados logo abaixo. */
:root {
  --sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --serif: var(--sans);
}

body { font-family: var(--sans); font-weight: 400; }

/* Os <em> que sobraram no HTML sao aparencia, nao enfase semantica. */
em, .serif,
.hero h1 em, .hero h1 .serif,
.format-top > span,
.nutrition-grid strong,
.nutrition-grid .collagen-stat strong,
.product-copy .product-evolved,
.brand {
  font-family: var(--sans);
  font-style: normal;
}

/* ============================================== 2. TOKENS DE TAMANHO ===
   Escala fechada. Nenhuma secao inventa tamanho proprio: tudo abaixo consome
   estas variaveis. Trocar um numero aqui muda a pagina inteira de forma
   coerente - que e exatamente o que estava faltando. */
:root {
  --fs-headline:   clamp(64px, 5.5vw, 96px);  /* so a headline da hero      */
  --fs-section:    clamp(44px, 3.7vw, 68px);  /* titulo principal de secao  */
  --fs-section-sm: clamp(44px, 3.5vw, 64px);  /* secoes com teto de 64px    */
  --fs-card:       clamp(22px, 1.7vw, 30px);  /* titulo de card             */
  --fs-feature:    clamp(22px, 1.8vw, 30px);  /* texto de destaque          */
  --fs-lead:       clamp(20px, 1.5vw, 24px);  /* linhas do bloco colageno   */
  --fs-body:       17px;                      /* corpo principal            */
  --fs-body-card:  15px;                      /* corpo de card              */
  --fs-button:     14px;
  --fs-label:      12px;
  --fs-legal:      12px;
  --fs-display:    clamp(72px, 7vw, 96px);    /* numeros de exibicao        */

  --hl-bg: #10462f;  /* verde escuro da marca */
  --hl-fg: #cfffd3;  /* verde claro aprovado  */
}

/* Faixa intermediaria: entre 901 e 1150px a hero ainda e de duas colunas e a
   coluna de texto nao sustenta o piso de 64px da escala desktop. Sem este
   degrau a headline estoura a coluna em 1024x768. */
@media (min-width: 901px) and (max-width: 1150px) {
  :root {
    --fs-headline:   clamp(46px, 5.6vw, 64px);
    --fs-section:    clamp(38px, 4.4vw, 54px);
    --fs-section-sm: clamp(38px, 4.4vw, 52px);
    --fs-card:       clamp(20px, 2vw, 25px);
    --fs-feature:    clamp(20px, 2vw, 25px);
    --fs-display:    clamp(64px, 6.4vw, 80px);
  }
}

@media (max-width: 900px) {
  :root {
    --fs-headline:   clamp(42px, 12vw, 56px);
    --fs-section:    clamp(34px, 9vw, 44px);
    --fs-section-sm: clamp(34px, 9vw, 44px);
    --fs-card:       22px;
    --fs-feature:    21px;
    --fs-lead:       19px;
    --fs-body:       16px;
    --fs-body-card:  15px;
    --fs-button:     14px;
    --fs-label:      12px;
    --fs-legal:      12px;
    --fs-display:    clamp(64px, 17vw, 84px);
  }
}

/* ======================================= 3. ESPACAMENTO TIPOGRAFICO ===
   Saem daqui o letter-spacing de -0.065em/-9px, o peso 900 global, as
   entrelinhas abaixo de 0.95 e todo word-spacing herdado. */
h1, .hero h1 {
  font-size: var(--fs-headline);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.035em;
  word-spacing: normal;
  text-wrap: balance;
}

h2, .hero-copy h2, .section-heading h2, .product-copy h2, .commission h2,
.offer-main h2, .editorial-copy h2, .nutrition-heading h2, .final-cta h2,
.faq-section h2 {
  font-size: var(--fs-section);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.025em;
  word-spacing: normal;
  text-wrap: balance;
}

/* Teto de 64px: parceria e "Seu conteudo abre a conversa". */
#o-club .section-heading h2,
#parceria .section-heading h2,
.nutrition-heading h2 { font-size: var(--fs-section-sm); }

h3, .benefit h3, .benefit-primary h3, .format h3, .steps h3 {
  font-size: var(--fs-card);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.015em;
  word-spacing: normal;
}

p, li {
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  word-spacing: normal;
}
p { text-wrap: pretty; }

/* Frases complementares grandes. */
.soft, .lead-soft, .hero-soft {
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -.015em;
}

/* ============================================ 4. DESTAQUE EM FUNDO VERDE ===
   O retangulo atras da expressao central, como na referencia: canto quase
   reto, sem gradiente, sem sombra, sem capsula, sem rotacao. inline-block
   com max-width para o texto quebrar dentro da caixa em telas estreitas em
   vez de vazar para fora dela. */
.text-highlight {
  display: inline-block;
  max-width: 100%;
  background: var(--hl-bg);
  color: var(--hl-fg);
  font-weight: 800;
  border-radius: 2px;
  padding: .05em .16em .1em;
  letter-spacing: -.025em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  text-shadow: none;
  box-shadow: none;
  transform: none;
}

/* Em secoes de fundo verde escuro o destaque inverte, senao some no fundo. */
.final-cta .text-highlight,
.benefit-primary .text-highlight {
  background: var(--hl-fg);
  color: var(--hl-bg);
}

/* ========================================================== 5. HERO === */
.hero h1 { margin: 22px 0 24px; }
.hero-soft { font-weight: 300; display: inline-block; }
.hero h1 .text-highlight { margin-top: 6px; }

/* A coluna de texto precisa carregar a headline da escala nova sem estourar. */
.hero { grid-template-columns: 1.12fr .88fr; }
.hero-copy { padding-right: 3vw; }
.hero-desc {
  font-size: var(--fs-body);
  line-height: 1.65;
  max-width: 460px;
  margin-bottom: 24px;
}
.hero-numbers { max-width: 470px; }
.hero-numbers strong { font-size: 32px; font-weight: 700; letter-spacing: -.02em; }
.hero-numbers strong span { font-size: 19px; font-weight: 700; }

/* A marca d'agua CREATE. e decoracao: fica grande, mas dentro do teto de 96px.
   (Uma regra antiga a derrubava para 12px junto com as legendas da hero.) */
.stage-word {
  font-size: clamp(64px, 8vw, 96px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}

/* ================================================ 6. SECOES E CARDS === */
.section-heading > p,
.commission-copy > p:not(.eyebrow):not(.micro),
.faq-section > div > p:not(.eyebrow),
.product-copy > p:not(.eyebrow):not(.micro):not(.lead):not(.collagen-line),
.offer-main > div > p:not(.micro) {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
}
.section-heading > p { max-width: 430px; }
.offer-main > div > p:not(.micro) { max-width: 420px; }
.final-cta > p:not(.eyebrow):not(.micro) {
  font-size: var(--fs-feature);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -.015em;
}

.benefit p, .benefit-primary p, .format p, .steps p,
.faq-list details p, .caminho-lista li, .commitment strong,
.footer-main > p, dialog > p {
  font-size: var(--fs-body-card);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
}
.benefit-primary p { max-width: 300px; }
.commitment strong { font-weight: 600; line-height: 1.5; }
/* O pacote zera a margem de todo <p>; dois paragrafos seguidos dentro de um
   card ficavam encostados, sem separacao nenhuma. */
.benefit p + p { margin-top: 14px; }

.faq-list summary {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -.01em;
}

/* Cards com a mesma caixa: padding, altura de linha e escala iguais. */
.benefit { padding: 30px; min-height: 0; }
.benefit-primary { padding: 32px; }
#parceria .benefit { padding: 32px; }
.benefit h3, .benefit-primary h3 { margin-bottom: 16px; }
.format h3, .steps h3 { margin-bottom: 12px; }
.format p, .steps p { min-height: 0; max-width: 260px; }

/* Numeracao dos formatos: era serifada e italica. */
.format-top > span {
  font-size: 30px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: -.02em;
  color: #477947;
}
.steps li > span { font-weight: 600; }

.button { font-size: var(--fs-button); font-weight: 600; letter-spacing: 0; font-style: normal; }
.button.small, .calculator > .button, .mobile-cta .button { font-size: var(--fs-button); }
/* .benefit-primary .text-link caia para 11px no celular por uma regra de
   especificidade maior la atras; por isso os dois seletores aqui. */
.text-link,
.benefit-primary .text-link { font-size: 13px; font-weight: 600; letter-spacing: 0; font-style: normal; }

dialog > h2 { font-size: clamp(28px, 2.6vw, 38px); }

/* ========================================== 7. PRODUTO E COLAGENO ===
   O colageno era uma linha de 12px em negrito. Vira o destaque do bloco,
   antes dos cards ZERO, na mesma logica da referencia. */
.product-copy h2 { margin: 16px 0 20px; }
.product-copy .lead {
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -.01em;
  max-width: none;
  margin: 0;
}
.product-copy .lead-soft { font-weight: 300; }
.collagen-line { margin: 14px 0 16px; }
.collagen-line .text-highlight {
  font-size: clamp(24px, 1.9vw, 30px);
  font-weight: 800;
  line-height: 1.15;
}
.product-copy > p:not(.eyebrow):not(.micro):not(.lead):not(.collagen-line) { margin-top: 18px; }

/* Cards ZERO: claros com borda verde, sem dominar o colageno. */
.zero-highlights { gap: 10px; margin: 24px 0 12px; }
.zero-highlights > div { min-height: 0; padding: 16px 18px; }
.zero-highlights strong {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1;
}
.zero-highlights span { font-weight: 600; letter-spacing: .08em; margin-top: 6px; }

/* O card nutricional do colageno e o mais importante do grupo. */
.nutrition-grid strong {
  font-family: var(--sans);
  font-size: 30px !important;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1;
}
.nutrition-grid .collagen-stat {
  background: var(--hl-bg);
  border-color: var(--hl-bg) !important;
}
.nutrition-grid .collagen-stat strong {
  font-size: 34px !important;
  font-weight: 800;
  color: var(--hl-fg);
}
.nutrition-grid .collagen-stat span {
  font-weight: 700;
  color: var(--hl-fg);
  letter-spacing: .06em;
}

/* O selo de colageno no rodape continua sendo texto de rodape. */
footer .collagen-lead { font-size: var(--fs-legal); font-weight: 600; letter-spacing: .04em; }

/* ==================================================== 8. NUMEROS ===
   Peso 700, tracking controlado, teto de 96px fora da headline da hero. */
.big-percent {
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.05;
  margin: 12px 0;
}
.big-percent span { font-size: .5em; letter-spacing: -.03em; font-weight: 700; }
.offer-main h2 { line-height: 1; letter-spacing: -.025em; }
.offer-price strong {
  font-size: clamp(44px, 4.2vw, 64px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.2;
}
.offer-price strong span { font-size: .55em; font-weight: 600; }
.estimate output { font-size: clamp(38px, 4vw, 58px); font-weight: 700; letter-spacing: -.03em; }
.calculator label output { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.commission-sticker strong, .launch-sticker strong { font-weight: 800; letter-spacing: -.03em; }
.brand { font-weight: 800; letter-spacing: 0; line-height: 1; }

/* ================================ 9. ROTULOS, MICRO E NOTAS - PISO 12px ===
   Nada que precise ser lido fica abaixo de 12px. Lista explicita: um
   seletor generico como ".hero-visual span" derrubava junto a marca d'agua
   da hero, que e tipografia de exibicao. */
.eyebrow, .card-index, .format-tag, .offer-topline, .offer-price > span,
.visual-caption, .footer-bottom, .announcement, .product-label,
.estimate > span, .calculator-top > span:first-child, .rate-tag,
.photo-label, .brand .brand-sub, .stage-note, .scene-top, .scene-top span,
.live-top, .live-pill, .side-caption span, .commission-sticker > span,
.launch-sticker span, .ticker span {
  font-size: var(--fs-label) !important;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .12em;
}
.eyebrow, .card-index, .format-tag, .offer-topline, .visual-caption,
.footer-bottom, .announcement, .product-label, .estimate > span, .ticker span {
  font-weight: 700;
}

/* A legenda do card lateral da hero vive dentro de um mockup estreito: com
   12px mais 0.12em de tracking ela nao cabia e era cortada pela borda do
   card. Mantem os 12px, abre mao do tracking e deixa quebrar em duas linhas. */
.side-caption { padding-left: 9px; padding-right: 9px; }
.side-caption span, .side-caption strong {
  letter-spacing: .02em;
  white-space: normal;
  display: block;
  overflow-wrap: break-word;
}

.micro, .hero-micro, .footer-note, .estimate p, .commitment span,
.benefit small, .nutrition-grid span,
.hero-numbers small, .footer-main > p > span, .range-labels,
.presets button, .flavor-switch button, .product-tags, .product-tags span,
.editorial-tags span, .creator-editorial small, .scene-caption,
.scene-caption span, .zero-highlights span, .steps li > span,
.calculator label, .live-product > span, .live-product small,
.side-caption strong, .final-cta .micro, .mobile-cta strong, .mobile-cta small,
.nutrition-heading > p:last-child, .hero-numbers-note {
  font-size: var(--fs-legal) !important;
  line-height: 1.5;
  letter-spacing: 0;
}
.faq-list details p { font-size: var(--fs-body-card) !important; line-height: 1.6; }
.calculator label { letter-spacing: 0; font-weight: 500; }
.benefit small, .commitment span, .hero-numbers small, .estimate p { font-weight: 400; }

/* ============================================ 10. FOTOS EDITORIAIS 1:1 ===
   Quadro quadrado, sem altura fixa. As duas fotos sao 1122x1402 (4:5): um
   recorte "cover" em 1:1 descarta 20% da altura e nao existe ponto de
   ancoragem que preserve ao mesmo tempo o topo da cabeca e a base do pote.
   Por isso o quadro e quadrado e a foto entra inteira, com o fundo do
   quadro na mesma cor da secao - nada de rosto, maos, pote ou copo cortado. */
.product-gallery > img,
.editorial-photo > img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center;
}
.product-gallery, .editorial-photo { background: #cfffd3; }
.product-gallery { border-radius: 24px; }
.editorial-photo { border-radius: 16px; transform: none; }
.editorial-photo > img { background: #cfffd3; }

/* As duas legendas da foto editorial se sobrepunham (10px de colisao) e a
   de IA vinha em 8px. Agora a tarja de IA encolhe para o tamanho do texto
   no canto direito, e o rotulo POV sobe o bastante para nao encostar nela. */
.photo-disclosure {
  font-size: var(--fs-legal) !important;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
  bottom: 10px;
  left: auto;
  right: 10px;
  width: auto;
  max-width: calc(100% - 20px);
  text-align: right;
  padding: 6px 12px;
  border-radius: 999px;
  background: #052e23b8;
  color: #f2f7ea;
  text-shadow: none;
  backdrop-filter: blur(2px);
}
/* O rotulo POV era uma tarja opaca de ponta a ponta: no quadro 1:1 ela
   atravessava a foto e parecia cortar a imagem ao meio. Vira pilula, do
   tamanho do texto, uma linha acima da tarja de IA - as duas nunca se
   encontram, em largura nenhuma. */
.photo-label {
  bottom: 48px;
  left: 10px;
  right: auto;
  width: auto;
  max-width: calc(100% - 20px);
  text-align: left;
  padding: 6px 12px;
  border-radius: 999px;
  background: #052e23b8;
  color: #f2f7ea;
  text-shadow: none;
  backdrop-filter: blur(2px);
}

/* ========================================= 11. ESPACO ENTRE AS PALAVRAS ===
   Duas causas, as duas tratadas na raiz:
   a) o tracking negativo exagerado (-0.065em, -7px, -9px), corrigido acima;
   b) <br> escondido por CSS. Um <br> com display:none NAO deixa espaco no
      lugar: os textos vizinhos encostam, no render e no texto copiado - era
      daqui que saiam "daformalizacao" e "ocombinado de cada mes". Os <br>
      que sobravam da composicao antiga viraram espaco literal no HTML, e a
      regra que os escondia foi removida. Nao ha margem simulando espaco
      entre palavras em lugar nenhum desta folha.

   A regra abaixo fecha a classe inteira do defeito: nenhum <br> desta pagina
   pode ficar com display:none em largura nenhuma. O pacote original escondia
   cinco deles abaixo de 480px, colando "Instagram.E TikTok organico",
   "De quem fabrica.Para quem divulga", "Um Club parair alem da comissao",
   "Entre no comeco.Crie com o produto" e "Conteudo de verdadevale mais que
   numero". Se a quebra nao servir num tamanho, o texto quebra sozinho. */
br { display: inline !important; }
.nobr { white-space: nowrap; }

/* ==================================================== 12. CELULAR === */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding-right: 7vw; }
  .hero-desc { max-width: 480px; }
  .product-copy h2 { margin: 12px 0 16px; }
  .format p, .steps p { max-width: none; }
  .section-heading > p { max-width: 520px; }
  .zero-highlights strong { font-size: 25px; }
  .nutrition-grid strong { font-size: 26px !important; }
  .nutrition-grid .collagen-stat strong { font-size: 30px !important; }
  .benefit, .benefit-primary, #parceria .benefit { padding: 28px; }

  /* Com o rotulo de sabor subindo de 8px para o piso de 12px, o seletor
     passou a ocupar duas linhas e encostava na legenda da cena. A legenda
     sobe o bastante para os dois nunca se tocarem. */
  .scene-caption { bottom: 116px; }

  /* No viewport estreito o pacote encolhia tabela, faixa animada e legendas
     para 9-11px. A tabela de composicao e justamente o que a pessoa aproxima
     o olho para ler. */
  .nutrition-readable table, table td, table th,
  .nutrition-readable p, small {
    font-size: var(--fs-legal) !important;
    line-height: 1.5;
  }
  table td, table th { padding: 8px 6px !important; }
  .nutrition-readable caption { font-size: 17px; font-weight: 700; }
}

/* Seletor de kit da calculadora: mesma pílula dos atalhos de quantidade,
   com o número de potes embaixo do preço. */
.presets-kit { margin-bottom: 18px; }
.presets-kit button { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.2; }
.presets-kit button small { font-size: 10px; opacity: .72; font-weight: 500; }

/* ===================== 9. PRIMEIRA TELA NO CELULAR =====================
 * No celular a primeira dobra terminava logo depois dos números, e a
 * colagem de fotos só aparecia depois de rolar. Quem chega pelo anúncio
 * precisa ver pedaço de imagem de cara — é o que diz, sem texto, que aqui
 * tem creator de verdade.
 *
 * Nada de copy muda. O que encolhe é altura: o título desce de 45 para 38
 * px, a entrelinha do parágrafo fecha um pouco e as folgas entre os blocos
 * diminuem. Junto, isso sobe a colagem cerca de 100 px — o bastante para
 * ela aparecer ainda na primeira tela de um iPhone.
 * ====================================================================== */
@media (max-width: 560px) {
  :root { --fs-headline: clamp(36px, 10.2vw, 44px); }

  .hero-copy { padding-top: 10px; }
  .hero .eyebrow { margin-bottom: 8px; }
  .hero h1 { margin-top: 14px; margin-bottom: 18px; }
  .hero-desc { line-height: 1.5; margin-bottom: 18px; }
  .hero-numbers { margin-top: 12px; padding-top: 12px; }
}