/* Reference layout: inline head styles, external quiz-ui.css, body styles. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--theme-color:#166534;--theme-color-light:#16a34a;--theme-color-lighter:#dcfce7;--content-color:#6b7280;--title-color:#030712;--bg-color:#f8fafc;--element-size:56px;--content-size:16px;--rounded:1rem;--font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif}
html,body{font-family:var(--font);background-color:var(--bg-color);color:var(--title-color);font-size:var(--content-size);line-height:1.6;min-height:100vh}
img{max-width:100%;display:block}button{cursor:pointer;font-family:var(--font)}a{color:inherit;text-decoration:none}
#app{min-height:100vh;display:flex;flex-direction:column;align-items:center;background-color:var(--bg-color)}
.funnel-container{width:100%;max-width:480px;margin:0 auto;padding:0 1rem 2rem}
.step{display:none;width:100%;flex-direction:column;gap:1rem;padding-top:1.5rem}
.step.active{display:flex;animation:fadeIn 0.3s ease forwards}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.progress-bar-wrap{width:100%;max-width:480px;padding:0.75rem 1rem 0;position:sticky;top:0;z-index:50;background:var(--bg-color)}
.progress-bar-bg{height:6px;background:#e5e7eb;border-radius:9999px;overflow:hidden}
.progress-bar-fill{height:100%;background:var(--theme-color);border-radius:9999px;transition:width 0.4s ease}
.text-layer{width:100%}
.text-layer h1{font-size:clamp(1.4rem,5vw,1.75rem);font-weight:700;color:var(--title-color);line-height:1.3}
.text-layer h2{font-size:clamp(1.3rem,4.8vw,1.65rem);font-weight:700;color:var(--title-color);line-height:1.35}
.text-layer p{font-size:var(--content-size);color:var(--content-color);line-height:1.65}
.ql-align-center{text-align:center}
.image-layer{width:100%;border-radius:var(--rounded);overflow:hidden}
/* etapa 1: a foto do Arbon e retrato e ocupava altura demais no mobile.
   Limitar a largura encolhe a altura junto, sem cortar nada da imagem. */

.image-layer img{width:100%;height:auto;border-radius:var(--rounded);object-fit:cover}
.btn-layer{width:100%}
.btn-primary{display:block;width:100%;background:var(--theme-color);color:#fff;font-size:1rem;font-weight:700;letter-spacing:0.03em;text-transform:uppercase;border:none;border-radius:var(--rounded);padding:1rem 1.5rem;min-height:var(--element-size);text-align:center;transition:filter 0.2s,transform 0.1s}
.btn-primary:hover{filter:brightness(1.1)}.btn-primary:active{transform:scale(0.98)}
.btn-secondary{display:block;width:100%;background:transparent;color:var(--theme-color);font-size:0.9rem;font-weight:600;border:2px solid var(--theme-color);border-radius:var(--rounded);padding:0.75rem 1.5rem;text-align:center;transition:background 0.2s,color 0.2s}
.btn-secondary:hover{background:var(--theme-color);color:#fff}
.clear-layer{height:1rem}.clear-layer-2{height:0.5rem}
.options-intro{margin-bottom:1rem}
.options-intro h2{font-size:clamp(1rem,4vw,1.25rem);font-weight:700;color:var(--title-color);line-height:1.35;text-align:center}
.options-grid{display:grid;gap:0.6rem;width:100%}
.options-grid.cols-2{grid-template-columns:1fr 1fr}
.options-grid.cols-1{grid-template-columns:1fr}
.option-card{background:#fff;border:2px solid #e5e7eb;border-radius:var(--rounded);padding:0.75rem 1rem;cursor:pointer;transition:border-color 0.2s,background 0.2s,transform 0.1s;display:flex;align-items:center;gap:0.6rem;min-height:var(--element-size);text-align:left;font-size:0.95rem;font-weight:500;color:var(--title-color);position:relative;overflow:hidden}
.option-card:hover{border-color:var(--theme-color)}
.option-card.selected{border-color:var(--theme-color);background:var(--theme-color-lighter)}
.option-card:active{transform:scale(0.98)}
.option-card.has-image{flex-direction:column;align-items:center;text-align:center;padding:0;overflow:hidden;gap:0}
.option-card.has-image .opt-img-wrap{width:100%;aspect-ratio:1/1;overflow:hidden;background:#f3f4f6}
.option-card.has-image .opt-img-wrap img{width:100%;height:100%;object-fit:cover}
.option-card.has-image .opt-label{padding:0.5rem 0.5rem 0.75rem;font-size:0.85rem;font-weight:400}
.opt-emoji{font-size:1.5rem;flex-shrink:0;width:2rem;text-align:center}
.opt-check{position:absolute;top:0.4rem;right:0.4rem;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--theme-color);display:none;align-items:center;justify-content:center}
.opt-check svg{width:0.75rem;height:0.75rem;stroke:#fff;stroke-width:3;fill:none}
.option-card.selected .opt-check{display:flex}
.alert-layer{background:var(--theme-color-lighter);border:1.5px solid #86efac;border-radius:var(--rounded);padding:1rem 1.25rem;font-size:0.9rem;color:#14532d;line-height:1.55}
.alert-layer p{color:#14532d}.alert-layer strong{color:#14532d}
.loading-layer{width:100%;display:flex;flex-direction:column;align-items:center;gap:0.75rem}
.loading-title{font-size:1rem;font-weight:600;color:var(--title-color);text-align:center}
.loading-desc{font-size:0.9rem;color:var(--content-color);text-align:center}
.progress-track{width:100%;height:12px;background:#e5e7eb;border-radius:9999px;overflow:hidden}
.progress-fill{height:100%;background:var(--theme-color);border-radius:9999px;transition:width 0.3s linear;width:0%}
.progress-pct{font-size:1rem;font-weight:700;color:var(--theme-color);text-align:center}
.spinner{width:2.5rem;height:2.5rem;border:4px solid #e5e7eb;border-top-color:var(--theme-color);border-radius:50%;animation:spin 0.8s linear infinite;margin:0 auto}
@keyframes spin{to{transform:rotate(360deg)}}
.quotes-layer{display:flex;flex-direction:column;gap:0.75rem}
.quote-card{background:#fff;border:1px solid #e5e7eb;border-radius:var(--rounded);padding:1rem;display:flex;flex-direction:column;gap:0.5rem}
.quote-header{display:flex;align-items:center;gap:0.75rem}
.quote-avatar{width:2.5rem;height:2.5rem;border-radius:50%;object-fit:cover;flex-shrink:0}
.quote-author{display:flex;flex-direction:column}
.quote-name{font-size:0.875rem;font-weight:700;color:var(--title-color)}
.quote-handle{font-size:0.75rem;color:var(--content-color)}
.quote-stars{display:flex;gap:0.15rem}
.quote-stars svg{width:0.9rem;height:0.9rem;fill:#f59e0b}
.quote-text{font-size:0.875rem;color:#374151;line-height:1.55}
.graphics-layer{width:100%}
.graphics-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.75rem}
.graphic-item{display:flex;flex-direction:column;align-items:center;gap:0.4rem}
.donut-wrap{position:relative;width:80px;height:80px}
.donut-wrap svg{width:100%;height:100%;transform:rotate(-90deg)}
.donut-bg{fill:none;stroke:#e5e7eb;stroke-width:10}
.donut-fill{fill:none;stroke:var(--theme-color);stroke-width:10;stroke-linecap:round;stroke-dasharray:188.5;stroke-dashoffset:188.5;transition:stroke-dashoffset 1.5s ease}
.donut-pct{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:0.875rem;font-weight:700;color:var(--theme-color)}
.graphic-legend{font-size:0.75rem;font-weight:600;color:var(--title-color);text-align:center}
.chart-layer{width:100%;background:#fff;border:1px solid #e5e7eb;border-radius:var(--rounded);padding:1.25rem 1rem 1rem}
/* O SVG ocupa a largura da caixa e a altura vem do viewBox. display:block
   evita a folga que o navegador poe embaixo de elemento inline. */
.grafico-plano{display:block;width:100%;height:auto}
.grafico-plano .gp-rot{font:700 12px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  /* halo branco: mesmo se a curva mudar de forma e passar perto, o
     rotulo continua legivel por cima do degrade */
  paint-order:stroke;stroke:#fff;stroke-width:3.5px;stroke-linejoin:round}
.grafico-plano .gp-ini{fill:#ef4444}
.grafico-plano .gp-fim{fill:#16a34a}
.grafico-plano .gp-eixo{font:500 11px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;fill:#9ca3af}
.step-counter{text-align:center;font-size:0.8rem;color:var(--content-color);font-weight:500;margin-top:0.25rem}
/* SLIDER */
.slider-layer{width:100%;display:flex;flex-direction:column;align-items:center;gap:1rem}
.unit-toggle{display:flex;gap:0;border:2px solid var(--theme-color);border-radius:2rem;overflow:hidden}
.unit-btn{padding:0.4rem 1.2rem;font-size:0.9rem;font-weight:600;border:none;background:transparent;color:var(--theme-color);cursor:pointer;transition:background 0.2s,color 0.2s}
.unit-btn.active{background:var(--theme-color);color:#fff}
.slider-value-display{font-size:2.5rem;font-weight:800;color:var(--theme-color);text-align:center}
.slider-unit-label{font-size:1.1rem;font-weight:600;color:var(--content-color)}
.slider-wrap{width:100%;position:relative}
.ruler-slider{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:9999px;background:#e5e7eb;outline:none}
.ruler-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;background:var(--theme-color);cursor:pointer;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,0.2)}
.ruler-slider::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--theme-color);cursor:pointer;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,0.2)}
/* SOCIAL PROOF */
.social-proof-layer{width:100%;background:#fff;border:1px solid #e5e7eb;border-radius:var(--rounded);padding:1.5rem 1rem;display:flex;flex-direction:column;align-items:center;gap:0.75rem}
.social-proof-number{font-size:2.8rem;font-weight:900;color:var(--theme-color);text-align:center;line-height:1}
.social-proof-text{font-size:1rem;font-weight:600;color:var(--title-color);text-align:center}
/* BRIDGE */
.bridge-layer{background:#fff;border:1px solid #e5e7eb;border-radius:var(--rounded);padding:1.5rem}
/* SALES PAGE */
.sales-hero{background:linear-gradient(135deg,#166534 0%,#15803d 100%);color:#fff;padding:1.5rem 1rem;border-radius:var(--rounded);text-align:center;margin-bottom:0.5rem}
.sales-hero h1{font-size:clamp(1.2rem,5vw,1.6rem);font-weight:900;line-height:1.25;color:#fff}
.deliverable-list{display:flex;flex-direction:column;gap:0.6rem}
.deliverable-item{display:flex;align-items:flex-start;gap:0.75rem;background:#f0fdf4;border:1px solid #86efac;border-radius:0.75rem;padding:0.75rem 1rem}
.deliverable-icon{font-size:1.3rem;flex-shrink:0;margin-top:0.1rem}
.deliverable-text{font-size:0.9rem;font-weight:600;color:#14532d;line-height:1.4}
.transform-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem}
.transform-card{border-radius:0.75rem;overflow:hidden;background:#f3f4f6}
.transform-card img{width:100%;height:auto;display:block}
.price-section{display:flex;flex-direction:column;gap:0.75rem}
.price-card{border:2px solid #e5e7eb;border-radius:var(--rounded);padding:1rem;text-align:center}
.price-card.featured{border-color:var(--theme-color);background:#f0fdf4;position:relative}
.price-card.featured::before{content:'MELHOR OPÇÃO';position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--theme-color);color:#fff;font-size:0.7rem;font-weight:800;padding:0.2rem 0.75rem;border-radius:9999px}
.price-label{font-size:0.8rem;font-weight:700;color:var(--content-color);text-transform:uppercase;letter-spacing:0.05em}
.price-amount{font-size:2rem;font-weight:900;color:var(--theme-color)}
.price-period{font-size:0.8rem;color:var(--content-color)}
.guarantee-block{background:#fff;border:2px solid #166534;border-radius:var(--rounded);padding:1.25rem;display:flex;flex-direction:column;align-items:center;gap:0.75rem;text-align:center}
.guarantee-seal{width:80px;height:80px;background:var(--theme-color);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:0.75rem;font-weight:900;text-align:center;line-height:1.2;flex-shrink:0;margin:0 auto}
.faq-item{border:1px solid #e5e7eb;border-radius:0.75rem;overflow:hidden}
.faq-question{width:100%;background:#fff;border:none;padding:1rem;text-align:left;font-size:0.9rem;font-weight:600;color:var(--title-color);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:0.5rem}
.faq-answer{display:none;padding:0 1rem 1rem;font-size:0.875rem;color:var(--content-color);line-height:1.6}
.faq-item.open .faq-answer{display:block}
.faq-item.open .faq-arrow{transform:rotate(180deg)}
.faq-arrow{transition:transform 0.2s;flex-shrink:0}
.section-title{font-size:1.1rem;font-weight:800;color:var(--title-color);text-align:center;margin-bottom:0.75rem;margin-top:1rem}
.coupon-box{background:#fef9c3;border:2px dashed #ca8a04;border-radius:var(--rounded);padding:1rem;text-align:center}
.coupon-code{font-size:1.5rem;font-weight:900;color:#92400e;letter-spacing:0.1em}
.footer-quiz{text-align:center;font-size:0.75rem;color:var(--content-color);padding:2rem 0 1rem}
@media(max-width:400px){.funnel-container{padding:0 0.75rem 2rem}}

    /* ── Oferta nova (Arbon): molduras do que ainda nao chegou ────────── */
    .prova-grid{display:flex;flex-direction:column;gap:.5rem;width:100%}
    .prova-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;
      width:100%;aspect-ratio:16/10;border:2px dashed #166534;border-radius:12px;
      background:#f0fdf4;color:#166534;gap:.2rem}
    .prova-slot span{font-size:.9rem;font-weight:900;letter-spacing:.05em}
    .prova-slot small{font-size:.72rem;font-weight:700;opacity:.75}
    .prova-legenda{font-size:.85rem;color:#374151;line-height:1.5;margin:0 0 .6rem}
    .comparativo{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;width:100%}
    .comp-col{display:flex;flex-direction:column;gap:.4rem;text-align:center}
    .comp-col p{font-size:.78rem;line-height:1.45;color:#374151}
    .comp-tag{font-size:.7rem;font-weight:900;letter-spacing:.08em;padding:3px 8px;
      border-radius:5px;align-self:center}
    .comp-hoje{background:#e5e7eb;color:#374151}
    .comp-dia30{background:#166534;color:#fff}
    .comp-slot{display:flex;align-items:center;justify-content:center;width:100%;
      aspect-ratio:3/4;border:2px dashed #166534;border-radius:12px;background:#f0fdf4;color:#166534}
    .comp-slot small{font-size:.72rem;font-weight:700;opacity:.75}
    .loading-layer{width:100%;display:flex;flex-direction:column;align-items:center;gap:.75rem;margin:1rem 0}
    .loading-pct{font-size:2rem;font-weight:900;color:#166534}
    .loading-track{width:100%;max-width:340px;height:10px;border-radius:99px;background:#e5e7eb;overflow:hidden}
    .loading-fill{height:100%;width:0;background:#166534;transition:width .2s linear}
    .chart-layer{width:100%;margin:.5rem 0}

  
    /* A landing precisa caber na tela sem rolagem: no iPhone 14 Pro Max o
       botao estava caindo abaixo da dobra. A imagem e o item que mais come
       altura, entao ela ganha teto em vh -- e nao em px -- pra se adaptar a
       telas menores. Mantido width:100% (a base ja define) porque
       height:auto + loading=lazy pode zerar a largura calculada e a imagem
       nunca baixar. */
    #step-b1{gap:.75rem !important;padding-top:1.25rem !important}
    #step-b1 .image-layer{max-width:230px;margin-left:auto;margin-right:auto}
    #step-b1 .image-layer img{max-height:34vh;object-fit:cover}
    #step-b1 .text-layer h2{font-size:clamp(1.1rem,4.2vw,1.35rem);line-height:1.28}
    #step-b1 .text-layer p{font-size:.86rem;line-height:1.5}
    #step-b1 .btn-layer{margin-top:.15rem}

    /* Fotos do Arbon no meio do texto (b4 e b10): sem teto elas ocupam a
       largura inteira do passo e empurram o botao pra fora da dobra, o
       mesmo problema que a landing teve.

       O teto e so de LARGURA, de proposito. A versao anterior cortava a
       altura em 30vh com object-fit:cover -- isso funcionava enquanto as
       fotos nao existiam, mas com as fotos reais o corte comia a cabeca
       do Arbon nas duas. Com max-width e height:auto a foto aparece
       inteira e a altura fica previsivel: ~291px na do metodo (3:4) e
       ~239px na da historia (quase quadrada). */
    #step-b4 .image-layer,#step-b10 .image-layer{max-width:220px;margin-left:auto;margin-right:auto}

    /* ── Provas reais (b22) e comparativo (b25) ───────────────────────
       As provas do b22 aparecem INTEIRAS: a copy fala de partes
       especificas -- barriga do Matheus, o shape do Gabriel -- entao
       corte de topo ou base derrubaria justamente o que a legenda
       promete. Altura livre; as tres tem proporcoes diferentes porque
       sao fotos de pessoas diferentes.

       Ja o b25 e o mesmo corpo dos dois lados, e o slot e 3:4. As duas
       metades saem exatamente nessa proporcao, entao o cover nao corta
       nada -- esta ali so como rede de seguranca. */
    .prova-foto{display:block;width:100%;height:auto;border-radius:12px;
      border:1px solid #e5e7eb;background:#f0fdf4}
    /* height:auto e obrigatorio: o atributo height="853" do <img> vira
       uma altura fixa de apresentacao e vence o aspect-ratio, deixando a
       foto com 170px de largura por 854 de altura -- uma tira. */
    .comp-foto{display:block;width:100%;height:auto;aspect-ratio:3/4;
      object-fit:cover;border-radius:12px;border:1px solid #e5e7eb;background:#f0fdf4}

  
    /* ── Centralizacao geral, no padrao do quiz-bumbum-gg ──────────────
       A base alinhava o corpo de texto a esquerda (.text-layer p sem
       text-align) e os cards de opcao com text-align:left. Aqui tudo
       fica centralizado. */
    .text-layer{text-align:center}
    .text-layer h1,.text-layer h2,.text-layer p{text-align:center}
    .step{align-items:center}
    .option-card{justify-content:center;text-align:center}
    .opt-label{flex:0 1 auto}
    /* O check fica absoluto no canto, entao nao entra na conta do centro. */
    .prova-legenda,.comp-col p,.slider-layer p{text-align:center}
    .options-intro p{text-align:center}
    /* Cards com imagem ja se centralizam sozinhos; nao mexer. */
    .option-card.has-image{justify-content:flex-start}

    /* ── Tamanho dos cards com imagem no celular ──────────────────────
       Com 2 colunas e imagem 1:1, cada card dava ~208px de altura: as 6
       opcoes do b15 viravam 3 linhas (~640px) e o botao Continuar caia
       bem abaixo da dobra num iPhone.

       b15 passa a 3 colunas -- os rotulos sao de uma palavra so e
       aguentam a coluna estreita. Cai para 2 linhas de ~145px.
       b6 fica em 2 colunas, porque "Normal, mas sem musculos" nao cabe
       em coluna estreita; la quem encolhe e a imagem, que vira 4/3. As
       artes continuam quadradas -- o corte e do object-fit, e o assunto
       delas esta centralizado. */
    .options-grid.cols-3{grid-template-columns:1fr 1fr 1fr}
    .options-grid{gap:.5rem}
    #opts-b6 .opt-img-wrap{aspect-ratio:4/3}
    .option-card.has-image{min-height:0}
    .option-card.has-image .opt-label{padding:.4rem .3rem .55rem;font-size:.8rem;line-height:1.25}
    #opts-b15 .opt-label{font-size:.75rem}
    .option-card.has-image .opt-check{top:.3rem;right:.3rem;width:1.05rem;height:1.05rem}

    /* Aviso que fica no lugar do botao enquanto a VSL nao terminou. */
    /* Caixa da VSL: segura a altura do player pra tela nao pular quando
       ele e montado e desmontado. */
    .vsl-box{width:100%;max-width:400px;margin:0 auto}
    .aviso-vsl{text-align:center;font-size:.82rem;font-weight:700;color:#166534;
      background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;
      padding:.7rem .9rem;margin:0 auto;max-width:400px;line-height:1.4}

    /* O CTA de checkout e um <a>, nao um <button>: precisa perder o
       sublinhado e ganhar o alinhamento que o botao tinha de graca. */
    a.btn-primary{text-decoration:none;display:flex;align-items:center;
      justify-content:center;line-height:1.25}

  
/* ═══════════════════════════════════════════════════════════════
   V2 — camada de redesign, espelhando o Treino Trinca
   (inlead.digital/dtt-img2). Copy e blocos nao mudam: so o visual.

   As medidas vieram medidas na pagina modelo, nao chutadas:
   opcao em pill de 24px, fundo da cor primaria a 10%, borda a 50%,
   titulo 700. La a primaria e azul #3B82F6; aqui e o verde da Fera,
   pra nao dar a esta oferta a cara de outra.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --v2-primaria:#16a34a;
  --v2-primaria-escura:#166534;
  --v2-fraca:rgba(22,163,74,.10);   /* fundo da opcao */
  --v2-borda:rgba(22,163,74,.50);   /* borda da opcao */
  --v2-pill:26px;
}

/* ── logo, no topo de todas as telas ───────────────────────────
   No modelo ela aparece em todas, e e o que da continuidade de marca
   enquanto a pessoa avanca. Aqui e tipografica: nao existe arquivo de
   logo do Treino da Fera no repo. */
.v2-marca{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:1rem 0 .25rem; margin:0 auto;
}
.v2-marca-raio{
  width:26px; height:26px; flex:none;
  filter:drop-shadow(0 2px 4px rgba(22,163,74,.35));
}
.v2-marca-txt{
  font-weight:800; font-size:1.06rem; letter-spacing:.10em;
  line-height:1; text-transform:uppercase; color:var(--v2-primaria-escura);
}
.v2-marca-txt b{ color:var(--v2-primaria); font-weight:800; }

/* ── titulos: mais peso e mais tamanho ─────────────────────────── */
.options-intro h1,.options-intro h2,.text-layer h1,.text-layer h2{
  font-weight:800; letter-spacing:-.015em; color:var(--title-color);
}
.options-intro h2{ font-size:1.42rem; line-height:1.24; }
.text-layer h2{ font-size:1.34rem; line-height:1.28; }

/* ── grifado marca-texto ───────────────────────────────────────
   No modelo a headline tem um trecho com fundo solido e texto branco.
   E o que faz a promessa saltar antes da pessoa comecar a ler. */
.v2-grifo{
  background:var(--v2-primaria); color:#fff;
  padding:.06em .3em; border-radius:.22em;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}

/* ── opcoes em pill ────────────────────────────────────────────── */
.option-card{
  border-radius:var(--v2-pill);
  background:var(--v2-fraca);
  border:1px solid var(--v2-borda);
  transition:background .15s,border-color .15s,transform .12s;
}
.option-card:hover{ background:rgba(22,163,74,.16); }
.option-card:active{ transform:scale(.985); }
.option-card.selected,.option-card.active{
  background:rgba(22,163,74,.20); border-color:var(--v2-primaria);
}
.option-card .opt-label{ font-weight:400; }

/* as opcoes com imagem seguem o card, so que menos arredondadas --
   pill fechado demais corta a foto nos cantos */
.option-card.has-image{ border-radius:1rem; }

/* ── botao ─────────────────────────────────────────────────────── */
.btn-primary{
  border-radius:var(--v2-pill);
  font-weight:700; letter-spacing:.01em;
  box-shadow:0 6px 16px rgba(22,163,74,.28);
}

/* ── barra de progresso, mais discreta ─────────────────────────── */
.progress-bar-fill{ background:var(--v2-primaria); }

/* ── loading do b23 ────────────────────────────────────────────
   O passo ja vinha com porcentagem e barra proprias -- estilizo as
   classes que existem em vez de criar outras. No modelo esse numero e
   grande e e o elemento principal da tela; aqui estava em 2rem. */
.loading-pct{
  font-size:3.1rem; font-weight:800; letter-spacing:-.02em;
  color:var(--v2-primaria); line-height:1;
}
.loading-track{
  height:12px; background:var(--v2-fraca);
  border:1px solid var(--v2-borda);
}
.loading-fill{
  background:linear-gradient(90deg,var(--v2-primaria),var(--v2-primaria-escura));
  transition:width .28s ease;
}

@media (max-width:400px){
  .options-intro h2{ font-size:1.28rem; }
  .v2-marca-txt{ font-size:.96rem; }
  .loading-pct{ font-size:2.6rem; }
}

/* ═══════════════════════════════════════════════════════════════
   V2.1 — convicçao: contraste, enfase e escala
   ═══════════════════════════════════════════════════════════════ */

/* ── corpo do texto: sai do cinza ──────────────────────────────
   Era #6b7280 (cinza claro) sobre fundo claro. O modelo usa quase
   preto. Ninguem le quiz sentado numa sala escura: le no onibus, com
   brilho baixo, e cinza-sobre-claro some. */
.text-layer p,.options-intro p{
  color:#1f2937;
  font-size:1.045rem;
  line-height:1.62;
}

/* ── enfase que enfatiza ───────────────────────────────────────
   O <strong> herdava a cor do paragrafo, entao "SER forte de verdade"
   ficava igual ao resto. Agora pesa e muda de cor, como no modelo. */
.text-layer strong,.options-intro strong{
  color:var(--v2-primaria-escura);
  font-weight:800;
}

/* frase de virada: no modelo ela vem sozinha, colorida e centralizada
   ("Nao e sobre idade ou Genetica"). Aqui o ultimo paragrafo curto de
   cada tela de texto ganha esse papel. */
.text-layer p:last-of-type strong{
  color:var(--v2-primaria);
}

/* ── logo maior, como no modelo ────────────────────────────────── */
.v2-marca{ padding:1.15rem 0 .5rem; gap:.6rem; }
.v2-marca-raio{ width:34px; height:34px; }
.v2-marca-txt{ font-size:1.3rem; letter-spacing:.08em; }

/* ── imagem: card com sombra, nao foto solta ───────────────────
   No modelo a imagem tem cantos arredondados e peso visual proprio. */
.image-layer img,.prova-foto img{
  border-radius:1rem;
  box-shadow:0 10px 28px rgba(3,7,18,.14);
}

/* ── legenda da prova ──────────────────────────────────────────── */
.prova-legenda{ color:#1f2937; font-weight:600; }

/* ── contador de pergunta, mais discreto ───────────────────────
   Ele competia com o titulo; no modelo o titulo manda sozinho. */
.step-counter{
  font-size:.76rem; letter-spacing:.09em; text-transform:uppercase;
  color:#9ca3af; font-weight:700;
}

/* ── barra de progresso mais visivel ───────────────────────────── */
.progress-bar-bg{ height:7px; }
.progress-bar-fill{ box-shadow:0 0 10px rgba(22,163,74,.45); }

@media (max-width:400px){
  .text-layer p,.options-intro p{ font-size:1rem; }
  .v2-marca-txt{ font-size:1.1rem; }
  .v2-marca-raio{ width:28px; height:28px; }
}

/* ═══════════════════════════════════════════════════════════════
   V2.2 — ajustes do video de review
   ═══════════════════════════════════════════════════════════════ */

/* ── "Pergunta 2 de 17" sai de todas as telas ──────────────────
   Pedido direto: "tira isso aqui, nao bota em nenhuma pergunta".
   Escondo por CSS em vez de arrancar do HTML porque o goToStep ainda
   escreve nesse elemento -- mexer no JS por causa disso so criaria
   chance de quebrar o avanco do quiz. */
.step-counter{ display:none !important; }

/* ── cinza sai de cena ─────────────────────────────────────────
   "essa fonte cinza aqui eu prefiro preta, mais nitido pra ver".
   Ele reviu no celular, que e onde o quiz roda de verdade. */
:root{
  --content-color:#111827;
  --v2-secundario:#374151;
}
.text-layer p,.options-intro p{ color:#111827; }
.prova-legenda,.aviso-vsl{ color:#111827; }

/* ── hierarquia: principal x secundario ────────────────────────
   "saber separar o que e o texto principal e o que e o secundario,
   cada um com seu relativo tamanho". */
.text-layer h1,.text-layer h2,.options-intro h1,.options-intro h2{
  font-size:1.6rem; line-height:1.2; font-weight:800;
  letter-spacing:-.02em; color:#030712;
}
.text-layer h1 + p,.text-layer h2 + p,
.options-intro h1 + p,.options-intro h2 + p{
  font-size:1.12rem; line-height:1.5; color:var(--v2-secundario);
  font-weight:500;
}
.text-layer p,.options-intro p{ font-size:1.08rem; line-height:1.6; }
.options-intro h2{ font-size:1.55rem; }

/* ── grifado com mais presenca ─────────────────────────────────
   "grifa direitinho, bota esse grifado bonitao". */
.v2-grifo{
  background:var(--v2-primaria); color:#fff;
  padding:.1em .34em; border-radius:.26em; font-weight:800;
  box-shadow:0 2px 0 rgba(22,101,52,.35);
}
.text-layer strong,.options-intro strong{
  color:var(--v2-primaria-escura); font-weight:800;
}

/* ── botao pulsando ───────────────────────────────────────────
   "colocaria um destaquezinho, ele pulsando". Para de pulsar no
   hover e respeita quem pediu menos animacao no sistema. */
@keyframes v2pulso{
  0%,100%{ transform:scale(1);    box-shadow:0 6px 16px rgba(22,163,74,.28); }
  50%    { transform:scale(1.03); box-shadow:0 10px 26px rgba(22,163,74,.45); }
}
.btn-primary{ animation:v2pulso 1.9s ease-in-out infinite; }
.btn-primary:hover{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){ .btn-primary{ animation:none; } }

/* ── imagem maior ─────────────────────────────────────────────── */
.image-layer img{ width:100%; max-width:430px; }

/* ── o bloco "AO FINAL DESSE TESTE" ───────────────────────────
   "ta feio desse jeito". Vira cartao: titulo destacado e itens
   alinhados a esquerda. Centralizado, cada item quebrava no meio da
   frase -- era o que deixava bagunçado. */
.v2-receber{
  background:var(--v2-fraca); border:1px solid var(--v2-borda);
  border-radius:1rem; padding:1rem 1.1rem; margin:.25rem auto 0;
  max-width:430px; text-align:left;
}
.v2-receber-tit{
  text-align:center; font-weight:800; font-size:.95rem;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--v2-primaria-escura); margin:0 0 .6rem;
}
.v2-receber ul{ list-style:none; margin:0; padding:0; }
.v2-receber li{
  display:flex; gap:.5rem; align-items:flex-start;
  font-size:1rem; line-height:1.45; color:#111827; font-weight:500;
  padding:.32rem 0;
}
.v2-receber li + li{ border-top:1px dashed rgba(22,163,74,.28); }
.v2-receber li b{ color:var(--v2-primaria-escura); font-weight:800; }

/* ── aviso de som na tela da VSL ──────────────────────────────
   "da pra colocar um emojizinho de sinal de som, falando pra ativar
   o som". */
.v2-som{
  display:flex; align-items:center; justify-content:center; gap:.4rem;
  font-weight:800; font-size:1rem; color:var(--v2-primaria-escura);
  background:var(--v2-fraca); border:1px solid var(--v2-borda);
  border-radius:999px; padding:.5rem .9rem; margin:0 auto .6rem;
  max-width:330px; text-align:center;
}

@media (max-width:400px){
  .text-layer h1,.text-layer h2,.options-intro h1,.options-intro h2{ font-size:1.42rem; }
  .options-intro h2{ font-size:1.38rem; }
  .text-layer h1 + p,.text-layer h2 + p{ font-size:1.05rem; }
}

/* ── a capa tinha regra propria, com ID ────────────────────────
   #step-b1 .text-layer h2 limitava a headline a clamp(1.1rem, 4.2vw,
   1.35rem) -- 17.6px no celular. Seletor com ID vence classe, entao o
   aumento que eu tinha feito nao pegava justamente na tela que o video
   reclamou. Aqui repito a especificidade pra poder sobrescrever.

   "esse aqui como principal e esse aqui como secundario, cada um com
   seu relativo tamanho": titulo bem maior, subtitulo legivel. */
#step-b1 .text-layer h2{
  font-size:clamp(1.55rem, 6.6vw, 2.05rem);
  line-height:1.16; font-weight:800; letter-spacing:-.02em;
}
#step-b1 .text-layer p{
  font-size:clamp(1rem, 3.9vw, 1.12rem);
  line-height:1.5; color:#1f2937; font-weight:500;
}

/* preto, nao cinza: "troca as cores cinzas por preto" */
:root{ --v2-secundario:#1f2937; }
.text-layer h1 + p,.text-layer h2 + p,
.options-intro h1 + p,.options-intro h2 + p{ color:#1f2937; }

/* ═══════════════════════════════════════════════════════════════
   V3 — logo, fonte do modelo e preto
   ═══════════════════════════════════════════════════════════════ */

/* ── a fonte ───────────────────────────────────────────────────
   Medida na pagina do Treino Trinca: corpo em Roboto Condensed,
   titulo em Inter 700. E o condensado no corpo que da aquela
   impressao de "mais nitido, mais profissional" -- cabe mais texto
   por linha, entao a frase quebra menos vezes no celular. */
body,.funnel-container,.step,.text-layer,.options-intro,.option-card,
.opt-label,.btn-primary,.v2-receber{
  font-family:'Roboto Condensed','Inter',-apple-system,BlinkMacSystemFont,
              'Segoe UI',Roboto,Arial,sans-serif;
}
.text-layer h1,.text-layer h2,.options-intro h1,.options-intro h2,
.v2-receber-tit{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,
              Arial,sans-serif;
}

/* ── preto, sem meio-termo ─────────────────────────────────────
   "letras pretas". Antes eu tinha deixado o subtitulo em #374151 e
   ele apontou de novo -- agora tudo que e texto vai em #000. */
:root{ --content-color:#000; --v2-secundario:#000; --title-color:#000; }
.text-layer,.text-layer p,.text-layer h1,.text-layer h2,
.options-intro,.options-intro p,.options-intro h1,.options-intro h2,
.opt-label,.prova-legenda,.aviso-vsl,.v2-receber li,
#step-b1 .text-layer p,.text-layer h1 + p,.text-layer h2 + p,
.options-intro h1 + p,.options-intro h2 + p{
  color:#000;
}

/* ── a logo ────────────────────────────────────────────────────── */
.v2-marca{
  display:flex; align-items:center; justify-content:center;
  padding:.85rem 0 .35rem; margin:0 auto;
}
.v2-marca img{
  display:block; width:auto; height:auto;
  max-width:128px; max-height:91px;
  /* Sem border-radius: com a logo recortada, arredondar cortaria os
     cantos da propria arte. A sombra agora segue o contorno do desenho,
     e nao a borda de uma caixa, entao pode ser mais leve. */
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.16));
}
@media (max-width:400px){
  .v2-marca img{ max-width:112px; max-height:80px; }
  .v2-marca{ padding:.7rem 0 .25rem; }
}

/* ═══════════════════════════════════════════════════════════════
   V3.1 — o bloco "voce vai receber", como no modelo
   ═══════════════════════════════════════════════════════════════ */

/* Sem cartao: no modelo esse bloco e texto solto sobre o branco. O
   fundo verde que eu tinha posto competia com a hierarquia e ainda
   pintava uma area que la e limpa. Anulo o que a V2.2 tinha criado. */
.v2-receber{
  background:none !important; border:0 !important;
  border-radius:0 !important; padding:0 !important;
  margin:.6rem auto 0 !important; max-width:430px; text-align:center;
}
.v2-receber li + li{ border-top:0 !important; }

/* "Ao final desse teste" — a linha pequena de cima */
.v2-receber-kicker{
  font-size:.92rem; font-weight:700; color:#000;
  letter-spacing:.02em; margin:0 0 .1rem; text-align:center;
}

/* "VOCÊ VAI RECEBER:" — e este que tem que saltar.
   No modelo ele e grande, colorido e sublinhado. */
.v2-receber-tit{
  font-size:1.32rem; font-weight:800; text-align:center;
  color:var(--v2-primaria-escura); margin:0 0 .55rem;
  letter-spacing:0; text-transform:none;
  text-decoration:underline; text-underline-offset:4px;
  text-decoration-thickness:2px;
}

/* itens: texto preto, alinhado a esquerda dentro do bloco centralizado,
   pra linha longa nao virar escada */
.v2-receber ul{ display:inline-block; text-align:left; }
.v2-receber li{
  border:0; padding:.26rem 0; color:#000;
  font-size:1.02rem; line-height:1.45; font-weight:500;
}
.v2-receber li b{ color:#000; font-weight:800; }
.v2-check{ flex:none; }

@media (max-width:400px){
  .v2-receber-tit{ font-size:1.2rem; }
  .v2-receber li{ font-size:.98rem; }
}

/* ═══════════════════════════════════════════════════════════════
   V3.2 — card com foto, como no modelo
   ═══════════════════════════════════════════════════════════════ */

/* No modelo o card e uma LINHA: miniatura a esquerda, texto no meio,
   seta a direita. So vale pras opcoes que tem foto -- as outras telas
   seguem como estao. */
.option-card.tem-foto{
  display:flex; align-items:center; gap:.85rem;
  text-align:left; padding:.5rem .9rem .5rem .5rem;
  min-height:auto;
}
.opt-foto{
  flex:none; width:56px; height:56px; border-radius:50%;
  object-fit:cover; object-position:center top;
  border:2px solid var(--v2-borda);
  background:#000;
}
.option-card.tem-foto .opt-label{
  flex:1; font-size:1.02rem; font-weight:400; color:#000;
  text-align:left;
}
/* a seta da direita: no modelo indica que o card leva pra frente */
.opt-seta{
  flex:none; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--v2-borda); color:var(--v2-primaria-escura);
  font-size:.9rem; font-weight:800; line-height:1;
}
/* o check original fica escondido nesses cards: quem marca o estado e
   a borda do proprio card, e dois indicadores na mesma linha poluem */
.option-card.tem-foto .opt-check{ display:none; }

@media (max-width:400px){
  .opt-foto{ width:50px; height:50px; }
  .option-card.tem-foto .opt-label{ font-size:.98rem; }
}

/* ═══════════════════════════════════════════════════════════════
   V3.3 — capa nova e bloco centralizado
   ═══════════════════════════════════════════════════════════════ */

/* "deixa mais centralizado".
   A lista estava encostando na borda esquerda: o <ul> e inline-block e
   o item mais longo esticava ele ate a largura toda, entao o bloco
   "centralizado" ocupava tudo e nao sobrava margem. Limitando a largura
   do ul, ele volta a ser mais estreito que o container e a centralizacao
   finalmente aparece. O texto segue alinhado a esquerda dentro dele --
   centralizar cada linha transformaria a frase longa em escada. */
.v2-receber{ max-width:394px; }
.v2-receber ul{ max-width:352px; }
.v2-receber li{ padding-left:.1rem; }

/* a capa e vertical (4:5): limito pela ALTURA, senao ela sozinha toma a
   tela inteira do celular e empurra o botao pra fora da primeira dobra */
#step-b1 .image-layer img{
  max-width:300px; max-height:375px;
  width:auto; height:auto; margin:0 auto;
  border-radius:1rem;
  box-shadow:0 10px 30px rgba(3,7,18,.30);
}
@media (max-width:400px){
  #step-b1 .image-layer img{ max-width:264px; max-height:330px; }
  .v2-receber ul{ max-width:310px; }
}

/* ═══════════════════════════════════════════════════════════════
   V3.4 — capa maior, bullets de fato centralizados
   ═══════════════════════════════════════════════════════════════ */

/* ── a capa cresce ─────────────────────────────────────────────
   Continua limitada pela altura pra nao empurrar o botao pra fora da
   primeira dobra, mas com folga bem maior do que antes. */
#step-b1 .image-layer img{
  max-width:100%; max-height:460px;
  width:auto; height:auto;
}
@media (max-width:400px){
  #step-b1 .image-layer img{ max-width:100%; max-height:410px; }
}

/* ── bullets ──────────────────────────────────────────────────
   Da primeira vez eu medi o BLOCO e ele estava a 0px do centro -- e
   mesmo assim parecia torto na tela, e parecia porque estava.

   O item era um flex de duas colunas: o check numa coluna fixa e o
   texto na outra. Com isso todo texto comeca no mesmo x, colado a
   esquerda, e a massa visual do paragrafo pende toda pra la. O bloco
   estava centrado; o conteudo dentro dele, nao.

   Agora o item e texto corrido centralizado, com o check inline como
   primeira "palavra". Cada linha se centra sozinha e o conjunto fica
   simetrico de verdade. */
.v2-receber{ max-width:420px; }
.v2-receber ul{ max-width:100%; display:block; text-align:center; }
.v2-receber li{
  display:block; text-align:center;
  padding:.34rem .2rem; line-height:1.45;
}
.v2-check{
  display:inline; margin-right:.32rem;
}
.v2-receber li > span:last-child{ display:inline; }

/* ═══════════════════════════════════════════════════════════════
   V3.5 — capa em largura quase total
   ═══════════════════════════════════════════════════════════════ */

/* No modelo a imagem ocupa quase toda a largura do card. Aqui igual.
   O teto de altura continua existindo, so que bem mais alto: e ele que
   impede a capa (vertical, 4:5) de empurrar o "INICIAR MEU TESTE" pra
   fora da primeira dobra no celular. O botao segue onde ja estava, logo
   abaixo da imagem. */
/* O max-width:100% aqui nao e redundante: um media query anterior poe
   max-width:230px NESTE mesmo seletor, com a mesma especificidade. Sem
   redefinir, aquele teto continua valendo e a capa fica presa em 230px
   por mais que o <img> peca 100%. */
#step-b1 .image-layer{ width:100%; max-width:100%; }
#step-b1 .image-layer img{
  width:100%; max-width:100%; height:auto; max-height:min(56vh,520px);
  object-fit:contain; border-radius:1rem;
}

/* ── teste A/B de imagem (i1..i10): a caixa da capa fica travada ──
   As dez artes tem composicao diferente, e e isso que o teste mede.
   O que NAO pode variar e a caixa: se uma variante renderizar num
   tamanho diferente da outra, ela empurra o botao e o resto da pagina
   de outro jeito, e o teste passa a medir layout junto com arte.

   aspect-ratio 1/1 fixa a altura pela largura, sem depender do arquivo.
   Com object-fit:contain, uma arte que nao fosse quadrada viraria
   letterbox e mudaria a altura util; com cover ela preenche a mesma
   caixa que todas as outras. Hoje as dez sao 900x900 e o cover nao
   corta nada -- a regra existe pro dia em que entrar uma que nao seja,
   que e justamente quando ninguem ia perceber.

   A borda de 1px resolve outra coisa: i2 e i4 tem fundo claro e a
   pagina e branca. Sem ela a arte sangra no fundo e essas duas parecem
   menores que as escuras, que tem limite proprio. */
#step-b1 .image-layer img{
  aspect-ratio:1/1;
  height:auto;
  object-fit:cover;
  box-shadow:0 10px 30px rgba(3,7,18,.30), 0 0 0 1px rgba(3,7,18,.10);
}

/* Negrito no b4: TIRADO.
   Eu tinha aplicado em '#step-b4 .text-layer p', que pega os CINCO
   paragrafos da tela -- o pedido era so a frase de fechamento. Tela
   inteira em negrito nao destaca nada, so pesa. Fica como estava. */

/* ═══════════════════════════════════════════════════════════════
   V3.6 — titulo principal x subtitulo na capa
   ═══════════════════════════════════════════════════════════════ */

/* Os dois estavam no mesmo <h2>, separados por <br>: mesmo elemento,
   mesmo tamanho, mesmo peso -- nenhum dos dois se destacava. Agora sao
   elementos distintos e cada um tem a sua escala, como no modelo. */
#step-b1 .v2-titulo{
  font-size:clamp(1.62rem, 7vw, 2.15rem);
  line-height:1.12; font-weight:800; letter-spacing:-.025em;
  color:#000; margin:0 0 .5rem;
}

/* o secundario: menor e mais leve que o titulo, mas ainda forte --
   no modelo ele e caixa alta com os trechos-chave destacados */
/* Seletor com o tipo 'p' junto de proposito. Existe um
   '#step-b1 .text-layer p' na folha, e ele tem especificidade MAIOR que
   '#step-b1 .v2-sub' -- o elemento no fim conta. Sem o p.v2-sub aqui,
   a regra de cima vence e o subtitulo volta pro peso 500. Terceira vez
   que a especificidade deste arquivo me pega: as telas tem regras
   proprias por ID que sobrescrevem qualquer coisa por classe. */
#step-b1 .text-layer p.v2-sub{
  font-size:clamp(.95rem, 3.7vw, 1.08rem);
  line-height:1.42; font-weight:700; color:#000;
  margin:0 0 .2rem; letter-spacing:.005em;
}
/* o grifo dentro do subtitulo acompanha o tamanho dele, senao estoura
   a linha e vira um bloco sozinho no meio da frase */
#step-b1 .text-layer p.v2-sub .v2-grifo{ font-size:1em; padding:.08em .28em; }

/* ═══════════════════════════════════════════════════════════════
   V4 — as duas marcacoes do Doc que a folha ainda nao tinha
   ═══════════════════════════════════════════════════════════════ */
/* Sublinhado. text-decoration cru encosta nas descidas (g, q, ç) e
   suja a leitura; a espessura e o afastamento deixam a linha visivel
   no tamanho da headline sem cortar letra. O skip-ink abre espaco
   onde a letra desce. */
.v2-sublinha{
  text-decoration:underline;
  text-decoration-thickness:.075em;
  text-underline-offset:.16em;
  text-decoration-skip-ink:auto;
}
/* Vermelho. Aparece uma vez so no Doc, na variante 10 ("PRESA"), que
   e a palavra que a headline contrapoe a "FERA". Tom escuro o
   bastante pra ter contraste sobre branco. */
.v2-alerta{ color:#b42318; }

/* External quiz-ui.css?v=2 */
/* ═══════════════════════════════════════════════════════════════
   Ajustes de layout do quiz — arquivo global das paginas de
   nome-chiclete. As 58 tem estrutura identica, entao mexer aqui
   vale pra todas.

   PROBLEMA QUE ISTO RESOLVE
   Aberto pelo navegador embutido do Instagram no iPhone, a barra
   inferior do app fica POR CIMA da pagina. O container do quiz
   terminava com apenas 2rem (32px) de respiro embaixo, entao o
   ultimo card de opcao e o botao de continuar ficavam escondidos
   atras dessa barra -- a pessoa via a opcao mas nao conseguia
   clicar no botao.

   A barra do Instagram/TikTok no iPhone ocupa ~50-60px, mais a
   area do indicador de home (~34px). 100px cobre os dois com folga.

   env(safe-area-inset-bottom) so devolve valor com
   viewport-fit=cover no <meta viewport>; como as paginas nao tem,
   ele cai no fallback 0px e nao atrapalha. Fica ai pra somar
   sozinho caso o viewport mude um dia.

   Escopo em max-width:900px pra nao criar rolagem morta no desktop,
   onde o problema nao existe.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .funnel-container {
    padding-bottom: calc(2rem + 100px + env(safe-area-inset-bottom, 0px));
  }
}


.aviso-saude{max-width:760px;margin:0 auto;padding:20px 16px 30px;box-sizing:border-box;width:100%;flex:0 0 100%;grid-column:1/-1;order:999}
.aviso-saude p{margin:0;font-size:11px;line-height:1.55;text-align:center;
  color:inherit;opacity:.55;font-family:inherit;letter-spacing:.1px}