/* ---- Nav ----
   Barra limpa de largura cheia, nao mais pilula flutuante: logo grande ao centro,
   3 itens de cada lado. O fundo quase solido resolve tambem o contraste — a barra
   atravessa secoes brancas e blocos navy, e o texto nao pode depender do que passa atras. */
.nav { position: fixed; inset-inline: 0; top: 0; z-index: 50;
       background: color-mix(in srgb, var(--bg) 88%, transparent);
       backdrop-filter: saturate(180%) blur(20px);
       -webkit-backdrop-filter: saturate(180%) blur(20px);
       border-bottom: 1px solid var(--line); }
.nav__inner {
  width: min(1200px, 100% - var(--gutter) * 2); margin-inline: auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(1rem, .4rem + 2vw, 2.5rem); min-height: 76px;
}

/* logo em destaque: e o unico elemento centralizado da barra */
.nav__logo { grid-column: 2; display: flex; align-items: center; gap: .7rem;
             justify-self: center; color: var(--brand); }
.nav__logo img { height: 42px; width: auto; }
.nav__marca { font-size: 1.0625rem; letter-spacing: .01em; white-space: nowrap; }
.nav__marca strong { font-weight: 600; }

.nav__links { display: flex; align-items: center; gap: clamp(.9rem, .3rem + 1.4vw, 1.9rem);
              font-size: var(--step--1); }
.nav__links--esq { grid-column: 1; justify-content: flex-start; }
.nav__links--dir { grid-column: 3; justify-content: flex-end; }
.nav__links a { color: var(--muted); transition: color .25s var(--ease); white-space: nowrap; }
.nav__links a:hover, .nav__links a.is-active { color: var(--brand); }
.nav__cta { padding: .62rem 1.1rem; font-size: var(--step--1); }
.nav__links--dir .nav__cta { color: #17130A; }

.nav__burger { display: none; background: none; border: 0; padding: .75rem; cursor: pointer; }
.nav__burger span { display: block; width: 20px; height: 2px; background: var(--brand); border-radius: 2px; }
.nav__burger span + span { margin-top: 5px; }
.nav__drawer { display: none; }

@media (max-width: 1000px) {
  .nav__inner { grid-template-columns: auto 1fr; min-height: 64px; }
  .nav__links--esq, .nav__links--dir { display: none; }
  .nav__logo { grid-column: 1; justify-self: start; }
  .nav__logo img { height: 34px; }
  .nav__burger { display: block; grid-column: 2; justify-self: end; }
  .nav__drawer { display: grid; gap: .25rem; padding: 1rem;
                 width: min(1200px, 100% - var(--gutter) * 2); margin: 0 auto .75rem; }
  .nav__drawer[hidden] { display: none; }
  .nav__drawer a { padding: .8rem 1rem; border-radius: var(--radius-sm); color: var(--muted); }
  .nav__drawer a:hover { background: var(--surface-2); color: var(--brand); }
  .nav__drawer .btn { margin-top: .5rem; color: #17130A; }
}

/* ---- Hero ---- */
.hero { padding-top: clamp(5.5rem, 4rem + 5vw, 7.5rem); }

/* Headline em medida cheia. Ver o comentário no markup: numa coluna estreita esta copy
   quebra em 6 linhas e expulsa o CTA da primeira tela. */
.hero__intro { margin-bottom: clamp(2rem, 1rem + 2vw, 3rem); }
.hero__title { font-size: var(--step-4); margin-block: 1.25rem 0; max-width: 1100px; }

.hero__grid { display: grid; gap: clamp(2.5rem, 1rem + 5vw, 4.5rem); align-items: start;
              grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
@media (max-width: 1000px) { .hero__grid { grid-template-columns: 1fr; } }

.hero__sub { margin-top: 1rem; font-size: var(--step-0); max-width: 54ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.25rem; }

.hero__panel { padding: 1.5rem; display: grid; gap: 1.25rem; }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.panel__tag { font-size: var(--step--1); color: var(--muted);
              border: 1px solid var(--line); border-radius: 999px; padding: .25rem .7rem; }
.panel__chart { min-height: 190px; }
.panel__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
               border-top: 1px solid var(--line); padding-top: 1.25rem; }
.kpi dt { font-size: var(--step--1); color: var(--muted); margin-bottom: .3rem; }
.kpi dd { font-size: var(--step-1); font-weight: 600; }
.kpi--up { color: var(--positive); }
.panel__note { font-size: var(--step--1); color: var(--muted); opacity: .75; }

/* escalona o reveal: primeiro o bloco de abertura, depois a coluna de texto */
.hero__intro > .reveal:nth-child(1) { transition-delay: 0ms; }
.hero__intro > .reveal:nth-child(2) { transition-delay: 80ms; }
.hero__copy  > .reveal:nth-child(1) { transition-delay: 160ms; }
.hero__copy  > .reveal:nth-child(2) { transition-delay: 240ms; }
.hero__copy  > .reveal:nth-child(3) { transition-delay: 320ms; }

/* ---- Cabeçalho de seção ---- */
/* Sem teto de largura: os titulos das secoes ocupam o container inteiro.
   O limite de 60ch fica so no texto de apoio, que precisa de medida de leitura. */
.sec__head { margin-bottom: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem); }
.sec__head .lead { max-width: 62ch; }
.sec__head--center .lead { margin-inline: auto; }
.sec__head h2 { font-size: var(--step-3); margin-block: .7rem .7rem; max-width: none;
                text-wrap: balance;
                background: linear-gradient(180deg, var(--brand) 0%, var(--brand) 45%, var(--brand-lift) 100%);
                -webkit-background-clip: text; background-clip: text; color: transparent; }
.sec__head--center { margin-inline: auto; text-align: center; }
/* Dentro de um bloco navy o degrade do h2 (--brand -> --brand-lift) cairia em cima do
   proprio fundo. Aqui ele inverte para claro. */
.navy .sec__head h2 { background: linear-gradient(180deg, var(--ink) 0%, var(--ink) 52%, #A9C1DF 100%);
                      -webkit-background-clip: text; background-clip: text; }

/* ---- Marquee ---- */
.clientes { padding-block: clamp(2.25rem, 1.6rem + 2vw, 3.5rem);
            border-block: 1px solid var(--line); backdrop-filter: blur(14px); }
.clientes__titulo { font-size: var(--step--1); letter-spacing: .1em;
                    text-transform: uppercase; margin-bottom: 2rem; }
.marquee { overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; align-items: center; gap: clamp(2rem, 1.2rem + 2vw, 3rem);
                  width: max-content; animation: marquee 46s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
/* Altura por logo, calculada para ÁREA ÓTICA constante em vez de caixa uniforme.
   A caixa uniforme era o erro anterior: com object-fit um logo quadrado ocupava 62 de 172px
   e sobravam 110px vazios dentro da própria caixa — foi isso que leu como "afastado",
   não o gap. Aqui cada logo tem a largura que a arte pede.
   Nada de brightness(0): três destas artes (lab738, rafizza, stuttgart) preenchem mais de
   87% do quadro e virariam retângulos pretos. Escala de cinza preserva o desenho. */
.marquee img { width: auto; flex: none;
               filter: grayscale(1) contrast(1.08); opacity: .85;
               transition: opacity .35s var(--ease), filter .35s var(--ease); }
.marquee img[src*="amoa"] { height: 85px; }
.marquee img[src*="felizmed"] { height: 46px; }
.marquee img[src*="lab738"] { height: 82px; }
.marquee img[src*="lucia"] { height: 75px; }
.marquee img[src*="paris"] { height: 78px; }
.marquee img[src*="rafizza"] { height: 90px; }
.marquee img[src*="stuttgart"] { height: 90px; }
.marquee img[src*="vicell"] { height: 73px; }
.marquee img[src*="vipmar"] { height: 63px; }
.marquee img[src*="vks"] { height: 71px; }
/* Compensacao de peso otico: estas artes preenchem o quadro inteiro e sao escuras,
   entao ao mesmo tamanho pesam muito mais que os logos de traco. */
.marquee img[src*="stuttgart"] { opacity: 0.55; }
.marquee img[src*="lab738"] { opacity: 0.55; }
.marquee img[src*="rafizza"] { opacity: 0.58; }

@media (max-width: 700px) { .marquee img { height: 52px !important; } }

.marquee img:hover { opacity: 1; filter: none; }
.marquee:hover img { opacity: .55; }
.marquee:hover img:hover { opacity: 1; }

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
  /* a 2a serie de logos existe so para o loop de -50%; em grade estatica ela duplicaria os clientes */
  .marquee__track img:nth-child(n+11) { display: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
}

/* ---- Sintomas ---- */
.sintomas__grid { display: grid; gap: 1rem;
                  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.sintoma { display: flex; align-items: flex-start; gap: .9rem; text-align: left;
           padding: 1.4rem; cursor: pointer; color: var(--muted); font-size: var(--step-0);
           line-height: 1.55; }
.sintoma__check { flex: none; width: 22px; height: 22px; border-radius: 7px;
                  border: 1.5px solid var(--line-strong); margin-top: .15rem;
                  display: grid; place-items: center;
                  transition: background .25s var(--ease), border-color .25s var(--ease); }
.sintoma__check::after { content: ""; width: 10px; height: 6px; margin-top: -3px;
                         border-left: 2px solid #17130A; border-bottom: 2px solid #17130A;
                         transform: rotate(-45deg) scale(0); transition: transform .25s var(--ease); }
.sintoma[aria-pressed="true"] { color: var(--ink); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.sintoma[aria-pressed="true"] .sintoma__check { background: var(--gold); border-color: var(--gold); }
.sintoma[aria-pressed="true"] .sintoma__check::after { transform: rotate(-45deg) scale(1); }

.veredito { margin-top: 2rem; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
            display: grid; gap: 1rem; justify-items: start;
            border-color: color-mix(in srgb, var(--gold) 28%, transparent);
            opacity: 0; transform: translateY(10px); }
.veredito.is-in { opacity: 1; transform: none;
                  transition: opacity .5s var(--ease), transform .5s var(--ease); }
.veredito__contagem { font-size: var(--step--1); color: var(--muted); }
.veredito__contagem strong { color: var(--gold-ink); font-size: var(--step-1); }
.veredito__texto { font-size: var(--step-1); max-width: 62ch; }

/* ---- Bento ---- */
.bento { display: grid; gap: 1rem; grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1000px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .bento { grid-template-columns: 1fr; } }

.bento__card { padding: 1.75rem; grid-column: span 2; display: flex; flex-direction: column; gap: .6rem; }
.bento__card--lg { grid-column: span 6; }
.bento__card--md { grid-column: span 3; }
/* 7 cards em grade de 6 col deixariam a ultima linha com 2/6; o ultimo fecha a linha */
.bento__card:last-child { grid-column: span 6; }
@media (max-width: 1000px) {
  .bento__card { grid-column: span 1; }
  .bento__card--lg, .bento__card--md { grid-column: span 2; }
  /* aqui o ultimo card volta a 1 coluna: com span 2 a soma dos spans daria 11 numa grade de 2,
     e a auto-colocacao esparsa deixaria uma celula vazia ao lado do penultimo card */
  .bento__card:last-child { grid-column: span 1; }
}
@media (max-width: 640px) {
  .bento__card, .bento__card--lg, .bento__card--md, .bento__card:last-child { grid-column: span 1; }
}

.bento__card h3 { font-size: var(--step-1); }
.bento__card p { color: var(--muted); }
.bento__chart { margin-bottom: 1rem; }

/* O card largo tem 1200px e o SVG (viewBox 520x220) acompanha a largura: sem teto ele vira
   508px de altura e engole a viewport inteira. O teto devolve a proporcao do viewBox. */
/* O gráfico preenche o card inteiro. O que travava a largura antes era a altura:
   com viewBox 520x220 e largura cheia ele chegava a 508px. A correção veio pelo
   viewBox achatado (1040x300 em charts.js), não por estrangular a largura. */
.bento__card--lg .bento__chart { max-width: none; }
.bento__legenda { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem;
                  font-size: var(--step--1); margin-top: .5rem; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: .1rem; }
.dot--pos { background: var(--positive); }
.dot--neg { background: var(--negative); }

/* ---- Timeline ---- */
.timeline { list-style: none; padding: 0; display: grid; gap: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 27px; top: 12px; bottom: 12px;
                    width: 2px; background: linear-gradient(180deg,
                      color-mix(in srgb, var(--gold) 55%, transparent), var(--line)); }
@media (max-width: 640px) { .timeline::before { left: 19px; } }

.etapa { display: flex; gap: 1.5rem; padding-block: 1.35rem; position: relative; }
.etapa__num { flex: none; width: 56px; height: 56px; border-radius: 50%;
              display: grid; place-items: center; font-weight: 600; font-size: var(--step--1);
              background: var(--surface); border: 1px solid var(--line-strong);
              color: var(--gold-ink); position: relative; z-index: 1; }
@media (max-width: 640px) { .etapa__num { width: 40px; height: 40px; } .etapa { gap: 1rem; } }
.etapa__corpo h3 { font-size: var(--step-1); margin-bottom: .35rem; }
.etapa__corpo p { color: var(--muted); max-width: 60ch; }

.processo__fecho { margin-top: 2.5rem; padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
                   font-size: var(--step-1); max-width: 70ch;
                   border-left: 3px solid var(--gold); }

/* ---- Consultor ----
   A foto saiu a pedido do cliente: o bloco fala da empresa, nao de uma pessoa so.
   Sem a coluna da imagem, o conteudo passa a ser uma coluna central de leitura. */
.consultor__corpo { display: grid; justify-items: start; gap: 1.15rem; }
.consultor__corpo .sec__head { margin-inline: 0; text-align: left; }
.consultor__corpo .lead { max-width: 56ch; }
/* o globo vive na metade direita da imagem; o texto fica na esquerda para nao disputar com ele */
@media (min-width: 901px) { .consultor__corpo > * { max-width: 62%; } }

.consultor__nums { display: flex; flex-wrap: wrap; justify-content: flex-start;
                   gap: clamp(2rem, 1rem + 4vw, 5rem); margin-block: 1.5rem;
                   padding-block: 1.75rem; border-block: 1px solid var(--line); width: 100%; }
.consultor__nums > div { text-align: left; }
.consultor__nums dt { font-size: var(--step--1); color: var(--muted); margin-bottom: .3rem; }
.consultor__nums dd { font-size: var(--step-3); font-weight: 600; color: var(--gold-ink);
                      line-height: 1; }

.citacao { margin: 0; padding-left: 1.25rem; border-left: 2px solid var(--gold);
           text-align: left; }
.citacao p { font-size: var(--step-1); font-style: italic; }
.citacao cite { display: block; margin-top: .5rem; font-size: var(--step--1);
                color: var(--muted); font-style: normal; }

/* ---- Público ---- */
.publico__cols { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 800px) { .publico__cols { grid-template-columns: 1fr; } }
.publico__col { padding: clamp(1.5rem, 1rem + 2vw, 2.25rem); }
.publico__col h3 { display: flex; align-items: center; gap: .7rem;
                   font-size: var(--step-1); margin-bottom: 1.25rem; }
.publico__ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
               font-size: .9rem; flex: none; }
.publico__col--sim { border-color: color-mix(in srgb, var(--positive) 28%, transparent); }
.publico__col--sim .publico__ic { background: color-mix(in srgb, var(--positive) 18%, transparent);
                                  color: var(--positive); }
.publico__col--nao { border-color: color-mix(in srgb, var(--negative) 24%, transparent); }
.publico__col--nao .publico__ic { background: color-mix(in srgb, var(--negative) 16%, transparent);
                                  color: var(--negative); }
.publico__col ul { list-style: none; padding: 0; display: grid; gap: .9rem; }
.publico__col li { color: var(--muted); padding-left: 1.1rem; position: relative; }
.publico__col li::before { content: ""; position: absolute; left: 0; top: .65em;
                           width: 5px; height: 5px; border-radius: 50%; background: var(--line-strong); }

/* ---- Oferta ---- */
.oferta__box { padding: clamp(2rem, 1.2rem + 3vw, 3.5rem); display: grid; gap: 1.25rem;
               justify-items: start; text-align: left; }
.oferta__box h2 { font-size: var(--step-3); max-width: none; text-wrap: balance; }
.oferta__box p { color: var(--muted); max-width: 62ch; }
.oferta__pills { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.oferta__pills li { font-size: var(--step--1); padding: .45rem .95rem; border-radius: 999px;
                    border: 1px solid var(--line); color: var(--muted); }
.oferta__pills li:nth-child(2) { border-color: color-mix(in srgb, var(--gold) 45%, transparent);
                                 color: var(--gold-ink); }

/* ---- Formulário ---- */
.form { padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem); display: grid; gap: 1.5rem; }
.form__grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .form__grid { grid-template-columns: 1fr; } }
.field { margin: 0; display: grid; gap: .45rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--step--1); color: var(--muted); font-weight: 500; }
.field label span[aria-hidden] { color: var(--gold-ink); }

.field input, .field select {
  width: 100%; padding: .85rem 1rem; border-radius: var(--radius-sm);
  /* background-color, nao o shorthand: o shorthand apagaria o background-image
     que desenha a seta do <select> */
  background-color: color-mix(in srgb, var(--bg) 70%, transparent);
  border: 1px solid var(--line-strong); color: var(--ink);
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
/* 65% dava 3.79:1 sobre o fundo efetivo do campo (rgb 6,12,23) e reprovava AA.
   85% da 5.76:1 e ainda fica bem mais apagado que o texto digitado, que usa --ink. */
.field input::placeholder { color: color-mix(in srgb, var(--muted) 85%, transparent); }
.field input:focus, .field select:focus { outline: none; border-color: var(--gold);
  background-color: color-mix(in srgb, var(--bg) 88%, transparent); }
.field input:user-invalid, .field select:user-invalid { border-color: var(--negative); }
.field select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__submit { justify-self: start; }
.form__status { font-size: var(--step--1); min-height: 1.4em; }
.form__status--ok    { color: var(--positive); }
.form__status--erro  { color: var(--negative); }
.form__status--neutro{ color: var(--muted); }
.form__status a { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }
.form__nota { font-size: var(--step--1); }
.diagnostico__alt { text-align: center; margin-top: 1.5rem; color: var(--muted);
                    font-size: var(--step--1); }
.diagnostico__alt a { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---- FAQ ---- */
.faq__lista { display: grid; gap: .75rem; }
.faq__item { overflow: hidden; }
.faq__item summary { list-style: none; cursor: pointer; padding: 1.25rem 1.5rem;
                     font-weight: 500; font-size: var(--step-0);
                     display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; color: var(--gold-ink); font-size: 1.5rem; line-height: 1;
                            flex: none; transition: transform .3s var(--ease); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__corpo { padding: 0 1.5rem 1.5rem; display: grid; gap: .8rem; }
.faq__corpo p { color: var(--muted); }

/* ---- Rodapé ---- */
.rodape { border-top: 1px solid var(--line); padding-block: clamp(3rem, 2rem + 3vw, 5rem) 2rem;
          position: relative; z-index: 1; }
.rodape__grid { display: grid; gap: 2.5rem;
                grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, .8fr)); }
@media (max-width: 800px) { .rodape__grid { grid-template-columns: 1fr; } }
.rodape__logo { height: 42px; width: auto; margin-bottom: 1rem; }
.rodape h3 { font-size: var(--step--1); text-transform: uppercase; letter-spacing: .12em;
             color: var(--ink); margin-bottom: 1rem; }
.rodape nav, .rodape__grid > div:last-child { display: grid; gap: .6rem; align-content: start; }
.rodape a { color: var(--muted); transition: color .25s var(--ease); width: fit-content; }
.rodape a:hover { color: var(--gold-ink); }
.rodape__base { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
                align-items: center; margin-top: 3rem; padding-top: 1.5rem;
                border-top: 1px solid var(--line); font-size: var(--step--1); }
.rodape__base a { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Páginas legais ---- */
.legal { padding-block: clamp(4rem, 3rem + 4vw, 7rem); display: grid; gap: 1.25rem; }
.legal h1 { font-size: var(--step-3); }
.legal h2 { font-size: var(--step-1); margin-top: 1.5rem; }
.legal p, .legal li { color: var(--muted); }
.legal ul { display: grid; gap: .5rem; padding-left: 1.25rem; }
.legal__voltar { color: var(--gold-ink); font-size: var(--step--1); width: fit-content; }

/* ---- Texturas de seção ----
   Camada de profundidade atrás do conteúdo. `isolation: isolate` cria um contexto de
   empilhamento na seção, então o z-index negativo fica contido nela e não afunda atrás
   do fundo da página. As seções já têm `position: relative` (base.css). */
.oferta, .consultor { isolation: isolate; }
.oferta::before, .consultor::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-size: cover; background-position: center;
  opacity: .28;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 50%, #000 20%, transparent 78%);
          mask-image: radial-gradient(120% 80% at 50% 50%, #000 20%, transparent 78%);
}
.oferta::before    { background-image: url("../img/texturas/textura-oferta.webp"); }
.consultor::before { background-image: url("../img/texturas/globo.webp");
                     background-size: auto 118%; background-repeat: no-repeat;
                     background-position: right -6% center; opacity: .55;
                     /* dissolve bem antes do texto: o globo acompanha, nao disputa */
                     -webkit-mask-image: linear-gradient(90deg, transparent 42%, #000 88%);
                             mask-image: linear-gradient(90deg, transparent 42%, #000 88%); }
@media (max-width: 900px) {
  .consultor::before { background-position: center bottom; opacity: .5;
    -webkit-mask-image: linear-gradient(180deg, transparent 10%, #000 65%);
            mask-image: linear-gradient(180deg, transparent 10%, #000 65%); }
}
/* As texturas de processo e faq saem: sao campos navy escuros e essas duas secoes agora
   tem fundo branco. Os arquivos ficam em assets/img/texturas/ para reuso. */

/* Um bloco .navy que TAMBEM e .glass precisa de fundo opaco: o color-mix translucido
   do vidro deixaria o branco da pagina atravessar e lavar o navy. */
.navy.glass { background: var(--surface); }


/* ---- Modal do diagnóstico ----
   <dialog> nativo: backdrop, foco preso e Esc vêm de graça do navegador. */
.modal { border: 0; padding: 0; background: transparent; overflow: visible;
         width: min(780px, 100% - 2rem); max-height: calc(100dvh - 3rem);
         /* margin: auto e o que centraliza um <dialog> modal; sem isso ele cola na borda */
         margin: auto; inset: 0; }
.modal::backdrop { background: color-mix(in srgb, #02244E 66%, transparent);
                   -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.modal__caixa { position: relative; background: var(--bg);
                border: 1px solid var(--line); border-radius: var(--radius);
                box-shadow: 0 40px 90px -30px rgba(2, 36, 78, .45);
                padding: clamp(1.5rem, 1rem + 2.4vw, 2.75rem);
                max-height: calc(100dvh - 3rem); overflow-y: auto; }
.modal__caixa .sec__head { margin-bottom: 1.5rem; }
/* o formulário já vem com .glass: dentro da caixa branca viraria cartão dentro de cartão */
.modal .form { background: none; border: 0; box-shadow: none; backdrop-filter: none;
               -webkit-backdrop-filter: none; padding: 0; }
.modal__fechar { position: absolute; top: .75rem; right: .75rem; z-index: 1;
                 width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
                 border: 1px solid var(--line); background: var(--surface);
                 color: var(--muted); font-size: 1.5rem; line-height: 1;
                 display: grid; place-items: center;
                 transition: background .25s var(--ease), color .25s var(--ease); }
.modal__fechar:hover { background: var(--surface-2); color: var(--brand); }

@keyframes modal-entra    { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@keyframes backdrop-entra { from { opacity: 0; } }
.modal[open] { animation: modal-entra .28s var(--ease); }
.modal[open]::backdrop { animation: backdrop-entra .28s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .modal[open], .modal[open]::backdrop { animation: none; }
}

/* Sem JavaScript o <dialog> nunca abre. Aqui ele degrada para seção normal na página,
   senão o formulário — que é a conversão do site inteiro — ficaria inalcançável. */
html:not(.js) .modal { display: block; position: static; max-height: none;
                       width: min(820px, 100% - var(--gutter) * 2);
                       margin: var(--section) auto; }
html:not(.js) .modal__fechar { display: none; }
html:not(.js) .modal__caixa { max-height: none; }

/* contador discreto dos sintomas: a confirmação de verdade acontece no modal */
.sintomas__contagem { margin-top: 1.5rem; font-size: var(--step--1); color: var(--muted);
                      opacity: 0; transform: translateY(6px); }
.sintomas__contagem.is-in { opacity: 1; transform: none;
                            transition: opacity .4s var(--ease), transform .4s var(--ease); }
.sintomas__contagem strong { color: var(--gold-ink); font-size: var(--step-0); }

.modal__aviso { margin-bottom: 1.25rem; padding: 1rem 1.15rem; border-radius: var(--radius-sm);
                background: var(--brand-soft); color: var(--brand);
                border-left: 3px solid var(--gold); font-size: var(--step--1); }