/* =============================================================================
   Clari.IA · landing e políticas (landing.css)
   =============================================================================
   Refatoração no padrão kodety (decisão do Pedro, 30/09/2026; medição em
   ~/projetos/clari-ia/design/referencias/kodety/RELATORIO.md), com a paleta do
   clari.ia. Aqui fica SÓ o que é da landing e das políticas: o arranjo de cada
   seção, o cabeçalho e o rodapé comuns às duas páginas. Botão, rótulo de seção,
   título em dois tons, faixas, esqueleto de seção, grade de filetes, entrada ao
   rolar e cabeçalho que some vêm de /padrao.css (componentes comuns ao app).

   Arquivo externo, e não bloco embutido: as duas páginas partilham o mesmo
   cabeçalho e o mesmo rodapé, e uma regra escrita duas vezes diverge.
   ============================================================================= */

html,
body {
  margin: 0;
  background: var(--c-bg);
}
/* A navbar (padrão iStock, 01/10) não fica presa no topo: a âncora só precisa
   de um respiro. */
html {
  scroll-padding-top: 16px;
}
/* a seção recebe o foco ao chegar por âncora (/ancoras.js): sem contorno */
section[tabindex='-1']:focus,
footer [tabindex='-1']:focus,
h2[tabindex='-1']:focus {
  outline: none;
}

.lp {
  /* A coluna do rótulo (150px) vem do token --col-rotulo, igual em todo lugar. */
  font-family: var(--f-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  /* A foto do herói e a da chamada final sangram pela borda direita: `clip`, e
     não `hidden`, para não criar um contexto de rolagem (o cabeçalho é sticky). */
  overflow-x: clip;
}
.lp *,
.lp *::before,
.lp *::after {
  box-sizing: border-box;
}
.lp p,
.lp figure,
.lp ul,
.lp ol {
  margin: 0;
}
.lp img {
  display: block;
  max-width: 100%;
}

/* ═══ tipografia ════════════════════════════════════════════════════════════
   Sora fina (--fw-display) com letras juntas nos títulos; o contraste vem do
   tamanho. Escala da kodety: h1 29 → 44px, h2 22 → 38px. */

.lp h1,
.lp h2,
.lp h3 {
  /* Padrão iStock (01/10/2026): uma família só, peso médio, sem aperto. */
  font-family: var(--f-ui);
  font-weight: 500;
  letter-spacing: 0;
  margin: 0;
  text-wrap: balance;
}
.lp h1 {
  font-size: clamp(var(--fs-h1), 1.35rem + 2.93vw, var(--fs-fig-l));
  line-height: 1.1;
}
.lp h2 {
  font-size: clamp(var(--fs-h2), 1.125rem + 2.25vw, var(--fs-display));
  line-height: 1.08;
}
.lp h3 {
  font-size: var(--fs-h3);
  line-height: 1.3;
}
.lp .fine {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--c-ink-subtle);
}
.lp .fine a,
.lp .link {
  color: var(--c-terra-escuro);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lp .logo {
  font-family: var(--f-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
  color: inherit;
  text-decoration: none;
  line-height: 1;
  /* O logotipo é link para o início: alvo de toque de 44px sem mudar o desenho. */
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
}
.lp .logo em {
  font-style: normal;
  color: var(--c-terra-escuro);
}
.faixa-escura .logo em {
  color: var(--c-terra);
}

/* ═══ hero no padrão do iStock (01/10/2026) ═══════════════════════════════════
   Foto de fundo na largura toda (496px; 372px no celular), a barra branca de
   59px encostada logo abaixo da navbar com 16px de folga e 36px nas laterais,
   título branco centrado de 38px (24px no celular), apoio de 21px (16px),
   botão vazado de 50px com borda branca de 1px e raio 5, crédito da foto no
   canto. Uma película escura garante o contraste sobre qualquer foto. */

.heroi-is {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  /* 01/10 noite: altura levemente maior a pedido do Pedro. ANTES: 496px (e
     372px no celular); para voltar, é só trocar estes dois números. */
  min-height: 540px;
  padding: 16px 36px 16px;
  color: #fff;
  text-align: center;
  overflow: hidden;
  background: var(--c-nav-escura);
}
.heroi-is-fundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.heroi-is::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* O vídeo é de um consultório claro: sem película forte, o texto branco some. */
  /* Escurece mais no centro, onde está o texto (medido: 4,5:1 no pior quadro). */
  background:
    radial-gradient(ellipse 60% 55% at 50% 58%, rgb(0 0 0 / 0.28), transparent 75%),
    linear-gradient(rgb(0 0 0 / 0.45), rgb(0 0 0 / 0.55));
}
/* Botão de pausa do vídeo (acessibilidade), discreto no canto de baixo. */
.busca-is {
  display: flex;
  align-items: stretch;
  height: 59px;
  background: #fff;
  color: var(--c-busca-texto);
  text-decoration: none;
  text-align: left;
}
.busca-is-tipo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px 0 16px;
  color: #000;
  font-size: 18px;
  white-space: nowrap;
}
.busca-is-tipo::after {
  content: '';
  width: 1px;
  height: 36px;
  margin-left: 16px;
  background: #e0e0e0;
}
.busca-is-tipo .icone {
  width: 20px;
  height: 20px;
}
.busca-is-texto {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 20px;
  font-size: 18px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.busca-is-acao {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 142px;
  border-left: 1px solid #e0e0e0;
  color: #474747;
  font-size: 11px;
  line-height: 1.1;
}
.busca-is-acao .icone {
  width: 22px;
  height: 22px;
  color: var(--c-terra-escuro);
}
.busca-is:hover .busca-is-texto {
  color: #474747;
}
.busca-is:focus-visible {
  outline: 3px solid var(--c-terra-escuro);
  outline-offset: 2px;
}
.heroi-is-conteudo {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 48px 0 40px;
}
.heroi-is-conteudo {
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.45);
}
.heroi-is h1 {
  margin: 0;
  font-family: var(--f-ui);
  font-size: 56px; /* 02/10: era 38, 43 depois do ×1,125 */
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  color: #fff;
}
.heroi-is-apoio {
  margin: 0;
  max-width: 820px;
  font-size: 24px;
  line-height: 1.2;
  color: #fff;
}
.heroi-is-botao {
  display: inline-flex;
  align-items: center;
  height: 50px;
  margin-top: 16px;
  padding: 0 32px;
  border: 1px solid #fff;
  border-radius: 5px;
  color: #fff;
  font-size: 18px;
  text-decoration: none;
  transition:
    background var(--t-fast),
    color var(--t-fast);
}
.heroi-is-botao:hover {
  background: #fff;
  color: var(--c-nav-escura);
}
.heroi-is-botao:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
@media (max-width: 719px) {
  /* No celular o recorte do vídeo cai na parede clara: película um tom acima. */
  .heroi-is::after {
    background:
      radial-gradient(ellipse 80% 55% at 50% 55%, rgb(0 0 0 / 0.3), transparent 80%),
      linear-gradient(rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.6));
  }
  .heroi-is {
    min-height: 404px; /* antes 372px (01/10) */
    padding: 0;
  }
  .busca-is {
    height: 54px;
    /* 8px em cima também, o mesmo respiro das laterais (02/10: estava colada
       na navbar) */
    margin: 8px 8px 0;
  }
  .busca-is-tipo {
    padding: 0 12px;
  }
  .busca-is-tipo .rotulo-longo,
  .busca-is-acao small {
    display: none;
  }
  .busca-is-tipo::after {
    margin-left: 12px;
  }
  .busca-is-texto {
    padding: 0 12px;
  }
  .busca-is-acao {
    min-width: 56px;
  }
  .heroi-is-conteudo {
    padding: 40px 45px 56px;
    gap: 12px;
  }
  .heroi-is h1 {
    font-size: 34px;
  }
  .heroi-is-apoio {
    font-size: 18px;
  }
}

/* ═══ faixa clara logo abaixo da hero (padrão iStock) ══════════════════════════
   Uma frase centrada de 24px com o link de chamada. */

.faixa-is {
  padding: 48px 16px;
  background: var(--c-faixa-clara);
  text-align: center;
}
.lp .faixa-is-frase {
  margin: 0 auto;
  max-width: 1100px;
  font-size: 32px;
  line-height: 1.4;
  color: var(--c-ink);
}
.faixa-is-frase a {
  white-space: nowrap;
  color: var(--c-terra-escuro);
  font-weight: 500;
  text-decoration: none;
}
.faixa-is-frase a:hover {
  text-decoration: underline;
}
@media (max-width: 719px) {
  .faixa-is {
    padding: 36px 6px;
  }
  .lp .faixa-is-frase {
    font-size: 24px;
    padding: 0 18px;
  }
}

/* ═══ faixa bege embaixo do vídeo (02/10) ══════════════════════════════════
   Era o letreiro com as garantias correndo; as escritas saíram e ficou só a
   cor da marca, na mesma altura (52 px). */
.faixa-bege-is {
  height: 52px;
  background: var(--c-terra);
}

/* ═══ seções no padrão do iStock (01/10/2026) ════════════════════════════════
   Medido no istockphoto.com/br: seções brancas e cinza-claras (#f5f5f5)
   alternadas, conteúdo em até var(--largura-landing) (1280 desde 02/10; era 1130), títulos de 24px peso médio numa cor só,
   apoio cinza de 16px, cards brancos com borda fina, banner cinza-esverdeado,
   faixa preta com link verde-água e rodapé escuro. Sem moldura de linhas, sem
   rótulo lateral, sem entrada ao rolar. */

.secao-is {
  padding: 64px 16px;
}
.secao-is-branca {
  background: #fff;
}
.secao-is-cinza {
  background: var(--c-faixa-clara);
}
.conteudo-is {
  max-width: var(--largura-landing);
  margin: 0 auto;
}
.conteudo-is-estreito {
  max-width: 820px;
}
.lp .titulo-is {
  /* 02/10/2026 («faltou os títulos»): títulos de seção bem maiores, 32px no
     celular a 40px no computador (eram 24, e 27 depois do ×1,125). */
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.5rem);
  line-height: 1.2;
  color: var(--c-nav-escura);
}
.lp .apoio-is {
  margin: 8px 0 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--c-texto-is);
}
.lp .titulo-is-centro,
.lp .apoio-is-centro {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.lp .apoio-is-centro {
  max-width: 760px;
}
.lp .apoio-is a,
.lp .link-is {
  color: var(--c-terra-escuro);
  font-weight: 500;
  text-decoration: none;
}
.lp .apoio-is a:hover,
.lp .link-is:hover {
  text-decoration: underline;
}
.lp .link-is::after {
  content: ' \203A';
}

/* ═══ vitrine (02/10, no molde da Stripe, seção de plataformas) ═══════════════
   Painel largo com a aurora animada de fundo; o celular do app no centro,
   cortado na base; cartões brancos em volta, cada um com título, texto e um
   rodapé com ícone (o lugar da linha de código da Stripe). Embaixo, as colunas.
   No celular e no tablet os cartões somem e fica o aparelho. */
#porque .apoio-is {
  max-width: 720px;
}
.vitrine-is {
  position: relative;
  isolation: isolate;
  /* 02/10: a altura segue a proporção da foto (1674 × 940), sem cortar */
  aspect-ratio: 1674 / 940;
  margin-top: 32px;
  border-radius: 4px;
  overflow: hidden;
}
/* A foto da mão com o celular (02/10, a mesma da tela de entrar), nas cores
   ORIGINAIS ocupando o painel inteiro (sem a aurora por cima, pedido do Pedro). */
.vitrine-is-imagem {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* 02/10: some de leve de baixo para cima, no branco da seção */
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 22%);
  mask-image: linear-gradient(to top, transparent 0, #000 22%);
}
/* As vantagens em colunas, embaixo do painel: ícone em caixinha, a frase com o
   começo em negrito e o link com "›". */
.lp .colunas-is {
  display: grid;
  gap: 32px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .lp .colunas-is {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .lp .colunas-is {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.colunas-is li {
  display: grid;
  align-content: start;
  gap: 14px;
}
.lp .colunas-is p {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--c-texto-is);
}
.colunas-is strong {
  font-weight: 500;
  color: var(--c-nav-escura);
}
.colunas-is .link-is {
  font-size: 17px;
}

/* Para quem é (01/10, ideia do omens.com.br): a foto ocupa o card inteiro com
   o título embaixo. Com o mouse em cima (ou o foco do teclado no link), a foto
   desfoca e escurece (sem crescer) e o texto e o link aparecem, sem caixa por trás. Em tela
   de toque não há mouse: o texto fica sempre à mostra, sobre a foto desfocada. */
.vidro-is {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 560px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--c-nav-escura);
}
@media (max-width: 639px) {
  .vidro-is {
    min-height: 440px;
  }
}
/* Seção mais larga que as outras (até 1400), para os cards crescerem. */
/* 16 px maior que o card de cada lado (escondidos): sem isso o desfoque do
   :hover puxava o fundo escuro e fazia uma borda preta por dentro. */
.vidro-is .vidro-is-midia {
  position: absolute;
  inset: -16px;
  width: calc(100% + 32px);
  height: calc(100% + 32px);
  object-fit: cover;
  transition: filter 0.4s ease;
}
/* Sombra de baixo para cima: o título branco se lê sobre qualquer foto. */
/* Desfoque de baixo para cima, sempre visível (01/10 noite, pedido do Pedro):
   forte na base e sumindo até a metade do card; o texto fica acima, nítido. */

.vidro-is::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgb(0 0 0 / 0.72), rgb(0 0 0 / 0) 55%);
  transition: background 0.4s ease;
}
.vidro-is-painel {
  position: relative;
  z-index: 2;
  display: grid;
  padding: 24px 22px;
  color: #fff;
}
.lp .vidro-is h3 {
  font-size: 25px;
  line-height: 1.25;
  color: #fff;
}
.lp .vidro-is p {
  margin: 10px 0 0;
  font-size: 17px;
  line-height: 1.55;
  color: #fff;
}
.lp .vidro-is .link-is {
  margin-top: 12px;
  font-size: 17px;
  color: var(--c-terra-claro);
}
.vidro-is:hover .vidro-is-midia,
.vidro-is:focus-within .vidro-is-midia {
  filter: blur(6px) brightness(0.6);
}
.vidro-is:hover::after,
.vidro-is:focus-within::after {
  background: rgb(0 0 0 / 0.25);
}
@media (hover: hover) {
  .vidro-is-painel > :not(h3) {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    overflow: hidden;
    transition:
      max-height 0.4s ease,
      margin-top 0.4s ease,
      opacity 0.3s ease;
  }
  .vidro-is:hover .vidro-is-painel > :not(h3),
  .vidro-is:focus-within .vidro-is-painel > :not(h3) {
    max-height: 160px;
    opacity: 1;
  }
  .lp .vidro-is:hover p,
  .lp .vidro-is:focus-within p {
    margin-top: 10px;
  }
  .lp .vidro-is:hover .link-is,
  .lp .vidro-is:focus-within .link-is {
    margin-top: 12px;
  }
}
@media (hover: none) {
  .vidro-is .vidro-is-midia {
    filter: blur(4px) brightness(0.6);
  }
  .vidro-is::after {
    background: rgb(0 0 0 / 0.2);
  }
}
@media (prefers-reduced-motion: reduce) {
  .vidro-is .vidro-is-midia,
  .vidro-is::after,
  .vidro-is-painel > * {
    transition: none;
  }
}

/* Inflar no :hover (01/10 noite, o mesmo efeito dos médicos, 12 px): em
   repouso cada card vem recortado 12 px de cada lado e o recorte abre no
   :hover; os vizinhos se afastam 12 px. A grade sai 12 px para cada lado e
   perde o gap, para as bordas visíveis ficarem no grid e o vão visual em 24.
   Só com mouse e com os 3 na mesma linha. */
@media (hover: hover) and (min-width: 1024px) {
  /* 02/10: abre SÓ para a direita (pedido do Pedro): o recorte fica só do lado
     direito, só os cards à direita se afastam, e a grade sai 12 px só à
     direita; a borda esquerda de cada card fica parada no grid. Vão visual 24. */
  .cards-is.vidros-is {
    gap: 12px;
    margin-right: -12px;
  }
  .vidros-is .vidro-is {
    clip-path: inset(0 12px 0 0 round 4px);
    transition:
      clip-path 0.8s cubic-bezier(0.165, 0.84, 0.44, 1),
      transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  .vidros-is .vidro-is:hover {
    clip-path: inset(0 0 round 4px);
  }
  .vidros-is .vidro-is:hover ~ .vidro-is {
    transform: translateX(12px);
  }
  .vidros-is .vidro-is-painel {
    padding-right: 34px;
  }
}
@media (hover: hover) and (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .vidros-is .vidro-is {
    transition: none;
  }
}

/* Desfoque progressivo de baixo para cima (02/10, cards de "Para quem é" e dos
   médicos): 5 camadas de backdrop-filter, cada uma mais forte e mais baixa que a
   anterior (1, 3, 6, 12 e 24 px, chegando a 70, 55, 40, 26 e 14% da altura). Na
   base somam o máximo; subindo, cada camada acaba e o desfoque vai diminuindo até
   sumir. Uma camada só com máscara (a versão anterior) dava blur igual que só
   ficava transparente, não um desfoque que diminui. */
.desfoque-is {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.desfoque-is span {
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: blur(var(--b));
  backdrop-filter: blur(var(--b));
  -webkit-mask-image: linear-gradient(
    to top,
    #000 0,
    #000 calc(var(--a) * 0.4),
    transparent var(--a)
  );
  mask-image: linear-gradient(
    to top,
    #000 0,
    #000 calc(var(--a) * 0.4),
    transparent var(--a)
  );
}
.desfoque-is span:nth-child(1) {
  --b: 1px;
  --a: 70%;
}
.desfoque-is span:nth-child(2) {
  --b: 3px;
  --a: 55%;
}
.desfoque-is span:nth-child(3) {
  --b: 6px;
  --a: 40%;
}
.desfoque-is span:nth-child(4) {
  --b: 12px;
  --a: 26%;
}
.desfoque-is span:nth-child(5) {
  --b: 24px;
  --a: 14%;
}

/* ═══ seção em duas colunas, no jeito da Stripe (01/10 noite) ════════════════
   O texto à esquerda (título, apoio, itens com ícone em caixinha) e, à
   direita, o "palco" com as minitelas ou a calculadora em cards brancos de
   sombra quente; a cor é a aurora animada no fundo da SEÇÃO inteira. */
.dupla-is {
  display: grid;
  gap: 40px;
  align-items: center;
}
@media (min-width: 960px) {
  .dupla-is {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 64px;
  }
}
.dupla-is-texto .botao-is {
  margin-top: 28px;
}
.lp .charmes-is {
  display: grid;
  gap: 18px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.charmes-is li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.charme-is {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid color-mix(in srgb, var(--c-marca-indigo) 35%, transparent);
  border-radius: 4px;
  background: #fff;
  color: var(--c-nav-escura);
}
.charme-is .icone {
  width: 20px;
  height: 20px;
}
.charmes-is strong {
  display: block;
  font-size: 18px;
  font-weight: 500;
  color: var(--c-nav-escura);
}
.lp .charmes-is p {
  margin: 2px 0 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--c-texto-is);
}
/* O palco (02/10): só o lugar das minitelas ou da calculadora, sem caixa; a
   cor vem do fundo da seção, não de um quadro em volta. */
.palco-is {
  display: grid;
  place-items: center;
  padding: 24px 0;
}
/* Seção preta (02/10, a do app): o preto da navbar, título branco, apoio e
   legendas em cinza claro (9,8:1). */
.secao-escura-is {
  background: var(--c-nav-escura);
}
.lp .secao-escura-is .titulo-is {
  color: #fff;
}
.lp .secao-escura-is .apoio-is,
.secao-escura-is .numeros-is span {
  color: var(--c-nav-texto-suave);
}
.secao-escura-is .numeros-is strong {
  color: #fff;
}
.secao-escura-is .numeros-is li {
  border-left-color: rgb(255 255 255 / 0.16);
}
/* A leitura do IMC na coluna da esquerda, embaixo do apoio (02/10). */
.lp .ferramenta-is-texto.imc-is-leitura {
  max-width: 520px;
  margin: 12px 0 0;
  font-size: 19px;
  line-height: 1.55;
  color: var(--c-nav-escura);
  text-align: left;
}
/* IMC (02/10): a calculadora alinhada à esquerda (sem respiro interno, número e
   faixa à esquerda). */
#ferramentas .ferramenta-is {
  padding: 0;
}
#ferramentas .ferramenta-is-painel {
  justify-items: start;
  text-align: left;
}
.lp #ferramentas .ferramenta-is-numero {
  justify-content: flex-start;
}
/* A faixa (Abaixo do peso, Obesidade…) embaixo da régua de cores, à direita. */
.lp #ferramentas .ferramenta-is-faixa {
  justify-self: end;
  margin-top: -2px;
  text-align: right;
}
/* IMC (02/10): a calculadora à esquerda e o texto à direita, no computador. */
@media (min-width: 960px) {
  #ferramentas .dupla-is {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }
  #ferramentas .dupla-is-texto {
    order: 2;
  }
  #ferramentas .palco-is {
    order: 1;
    justify-items: start;
  }
  /* o texto encosta na borda direita do grid */
  #ferramentas .dupla-is-texto {
    justify-self: end;
    max-width: 520px;
  }
}
/* A onda de linhas embaixo dos planos (02/10, no molde da Stripe): a frase em
   dois tons em cima e o canvas (/onda.js) por baixo, na mesma faixa cinza. */
/* A fita girando fica ATRÁS do comparativo, de borda a borda (02/10). */
.onda-is {
  position: relative;
  margin-top: 72px;
  padding: 24px 0;
}
.onda-is-tela {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
}
/* Componente de vídeo (02/10, no lugar do comparativo): moldura 16:9 de largura
   toda do conteúdo, sobre a fita girando. Até o vídeo chegar, a capa é o degradê
   da marca com o botão de tocar. */
.video-is {
  position: relative;
  z-index: 1;
}
.video-is-moldura {
  position: relative;
  /* 02/10: a largura toda do conteúdo; o bloco colorido da marca com um respiro
     de 16 px, e o vídeo dentro */
  margin: 32px 0 0;
  padding: 16px;
  border-radius: 4px;
  background:
    radial-gradient(60% 70% at 15% 25%, var(--c-marca-verde), transparent 70%),
    radial-gradient(60% 70% at 85% 75%, var(--c-marca-roxo), transparent 70%),
    linear-gradient(120deg, var(--c-marca-celeste), var(--c-marca-indigo));
  box-shadow: 0 24px 48px rgb(30 30 30 / 0.14);
}
/* A tela do vídeo e o player NOSSO (02/10): sem os controles do navegador. */
.video-is-tela {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: #000;
}
.video-is-tela:fullscreen {
  border-radius: 0;
}
.video-is-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  /* 02/10: zoom leve (a tela corta o que sobra) */
  transform: scale(1.06);
}
.video-is-tela:fullscreen .video-is-video {
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
}
.video-is-tocar {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: rgb(12 13 13 / 0.18);
  cursor: pointer;
}
.video-is-tocar[hidden] {
  display: none;
}
.video-is-play {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.92);
  box-shadow: 0 12px 30px rgb(30 30 30 / 0.2);
  transition: transform 0.25s ease;
}
.video-is-play::after {
  content: '';
  margin-left: 6px;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 22px solid var(--c-nav-escura);
}
.video-is-tocar:hover .video-is-play {
  background: #fff;
}
.video-is-tocar:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -6px;
}
/* A barra: escura e translúcida embaixo; some sozinha tocando sem mexer o
   mouse (classe .quieto, pelo /video.js); antes do 1.º play fica escondida. */
.video-is-barra {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 4px;
  background: rgb(12 13 13 / 0.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}
.video-is-tela:not(.iniciado) .video-is-barra,
.video-is-tela.quieto .video-is-barra {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
.video-is-tela.quieto {
  cursor: none;
}
.video-is-bt {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.video-is-bt:hover {
  background: rgb(255 255 255 / 0.12);
}
.video-is-bt:focus-visible,
.video-is-barra input:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.video-is-bt svg {
  width: 20px;
  height: 20px;
}
.video-is-bt > span {
  display: grid;
}
.video-is-tela:not(.tocando) .so-pausar,
.video-is-tela.tocando .so-tocar,
.video-is-tela.mudo .so-som,
.video-is-tela:not(.mudo) .so-mudo,
.video-is-tela.cheia .so-cheia,
.video-is-tela:not(.cheia) .so-sair {
  display: none;
}
.video-is-tempo {
  flex: none;
  min-width: 84px;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: rgb(255 255 255 / 0.85);
}
/* os dois controles deslizantes: trilho fino; o já tocado no degradê da marca
   (por --p, em %, pelo /video.js) e o botão branco */
.video-is-barra input[type='range'] {
  --p: 0%;
  height: 20px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.video-is-progresso {
  flex: 1;
  min-width: 60px;
}
.video-is-volume {
  flex: none;
  width: 84px;
}
.video-is-barra input[type='range']::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background:
    linear-gradient(
        90deg,
        var(--c-marca-verde),
        var(--c-marca-celeste),
        var(--c-marca-roxo)
      )
      0 0 / var(--p) 100% no-repeat,
    rgb(255 255 255 / 0.25);
}
.video-is-barra input[type='range']::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.25);
}
.video-is-barra input[type='range']::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-marca-verde), var(--c-marca-roxo));
}
.video-is-barra input[type='range']::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
}
.video-is-barra input[type='range']::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: #fff;
}
@media (max-width: 639px) {
  .video-is-volume,
  .video-is-tempo {
    display: none;
  }
  .video-is-barra {
    left: 8px;
    right: 8px;
    bottom: 8px;
    gap: 6px;
    padding: 4px 8px;
  }
}
@media (max-width: 639px) {
  .video-is-play {
    width: 64px;
    height: 64px;
  }
}
#preco {
  overflow-x: clip;
}
.onda-is-tela canvas {
  display: block;
}
/* ═══ motivos (02/10): seção preta com cards escuros em laço ═══════════════
   Título e apoio no padrão das seções (`.titulo-is` em branco pela
   `.secao-escura-is`); a faixa de cards sai de borda a borda com as
   pontas esfumadas (máscara); o trilho tem a lista 2 vezes e anda 50% (laço sem
   emenda), parando com mouse/foco. O "+" abre o texto no card. */
.motivos-is {
  background: var(--c-nav-escura);
  color: #fff;
  overflow: hidden;
  text-align: center;
}
.motivos-is-faixa {
  margin-top: 56px;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.motivos-is-trilho {
  display: flex;
  width: max-content;
  animation: motivos-anda 70s linear infinite;
}
.motivos-is-faixa:hover .motivos-is-trilho,
.motivos-is-faixa:focus-within .motivos-is-trilho {
  animation-play-state: paused;
}
@keyframes motivos-anda {
  to {
    transform: translateX(-50%);
  }
}
.lp .motivos-is-lista {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0 10px;
  list-style: none;
}
.motivo-is {
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 320px;
  min-height: 200px;
  padding: 28px;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 4px;
  background: #161818;
  text-align: left;
}
.motivo-is .icone {
  width: 26px;
  height: 26px;
  color: #fff;
}
.lp .motivo-is h3 {
  max-width: 200px;
  margin-top: 16px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  color: #fff;
}
.lp .motivo-is p {
  max-height: 0;
  margin: 0;
  overflow: hidden;
  font-size: 17px;
  line-height: 1.5;
  color: var(--c-nav-texto-suave);
  opacity: 0;
  transition:
    max-height 0.35s ease,
    margin 0.35s ease,
    opacity 0.25s ease;
}
.motivo-is.aberto p {
  max-height: 120px;
  margin: 12px 0 0;
  opacity: 1;
}
.motivo-is-mais {
  position: absolute;
  right: 24px;
  bottom: 24px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.motivo-is-mais::before,
.motivo-is-mais::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--c-nav-escura);
}
.motivo-is-mais::after {
  transform: rotate(90deg);
}
.motivo-is.aberto .motivo-is-mais {
  transform: rotate(45deg);
}
.motivo-is-mais:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.motivo-is.aberto {
  padding-bottom: 76px;
}
@media (prefers-reduced-motion: reduce) {
  .motivos-is-trilho {
    animation: none;
  }
  .motivos-is-faixa {
    overflow-x: auto;
  }
}
@media (max-width: 639px) {
  .motivo-is {
    width: 260px;
  }
}
/* Seção com a cor da marca de fundo (02/10, a do app): a aurora animada de borda
   a borda; todo texto em preto (o cinza não passa sobre o azul e o roxo). */
.secao-marca-is {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.secao-marca-is {
  background: #fff;
}
.secao-marca-is > .aurora {
  z-index: -1;
  /* 02/10: mais leve (estava forte), sobre o branco */
  opacity: 0.45;
}
.lp .secao-marca-is .titulo-is,
.lp .secao-marca-is .apoio-is,
.secao-marca-is .numeros-is strong,
.secao-marca-is .numeros-is span {
  color: var(--c-nav-escura);
}
.secao-marca-is .numeros-is li {
  border-left-color: rgb(12 13 13 / 0.18);
}
/* Faixa de números (02/10, seção do app): números grandes e a legenda embaixo,
   correndo em laço contínuo; parada com "menos movimento". */
.numeros-is {
  margin-top: 48px;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}
.numeros-is-trilho {
  display: flex;
  width: max-content;
  animation: numeros-anda 60s linear infinite;
}
.lp .numeros-is ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.numeros-is li {
  display: grid;
  gap: 6px;
  min-width: 240px;
  padding: 0 40px;
  border-left: 1px solid rgb(30 30 30 / 0.12);
}
.numeros-is strong {
  font-size: clamp(40px, 4.5vw, 63px);
  font-weight: 400;
  line-height: 1;
  color: var(--c-nav-escura);
  white-space: nowrap;
}
.numeros-is span {
  font-size: 17px;
  color: var(--c-texto-is);
  white-space: nowrap;
}
@keyframes numeros-anda {
  to {
    transform: translateX(-25%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .numeros-is-trilho {
    animation: none;
  }
}

/* Calculadora de IMC (01/10; só o IMC desde 01/10 noite): o card branco com os
   dois controles deslizantes e o número grande que muda junto, sobre o palco
   da aurora. */
.ferramenta-is {
  position: relative;
  display: grid;
  gap: 24px;
  width: 100%;
  max-width: 460px;
  padding: 28px;
  border-radius: 4px;
  background: #fff;
}
.ferramenta-is-campos {
  display: grid;
  gap: 20px;
}
.ferramenta-is-campo {
  display: grid;
  gap: 8px;
}
.ferramenta-is-campo > span {
  display: flex;
  justify-content: space-between;
  font-size: 17px;
  color: var(--c-texto-is);
}
.ferramenta-is-campo output {
  font-weight: 500;
  color: var(--c-nav-escura);
}
.ferramenta-is-campo input[type='range'] {
  width: 100%;
  min-height: 32px;
  /* 02/10: carvão (era o marrom escuro); neutro, como os controles da Stripe */
  accent-color: var(--c-surface-deep);
}
.ferramenta-is-painel {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}
.lp .ferramenta-is-numero {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  font-size: 63px;
  font-weight: 500;
  line-height: 1;
  color: var(--c-nav-escura);
  font-variant-numeric: tabular-nums;
}
.ferramenta-is-numero small {
  font-size: 18px;
  font-weight: 400;
  color: var(--c-texto-is);
}
.lp .ferramenta-is-faixa {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--c-terra-escuro);
}
.lp .ferramenta-is-texto {
  margin: 4px 0 0;
  max-width: 520px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--c-texto-is);
}
/* A régua do IMC: quatro faixas (abaixo, adequado, sobrepeso, obesidade) numa
   escala de 0 a 50 e a marca na posição do resultado. */
.ferramenta-is-escala {
  position: relative;
  width: 100%;
  height: 8px;
  margin: 12px 0 4px;
}
.ferramenta-is-escala span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--de) * 2%);
  width: calc((var(--ate) - var(--de)) * 2%);
}
.ferramenta-is-escala span:nth-child(1) {
  background: var(--c-info-soft);
  border-radius: 4px 0 0 4px;
}
.ferramenta-is-escala span:nth-child(2) {
  background: var(--c-primary);
}
.ferramenta-is-escala span:nth-child(3) {
  background: var(--c-warning-soft);
}
.ferramenta-is-escala span:nth-child(4) {
  background: var(--c-accent);
  border-radius: 0 4px 4px 0;
}
.ferramenta-is-escala i {
  position: absolute;
  top: -5px;
  left: 0;
  width: 4px;
  height: 18px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--c-nav-escura);
  transition: left 0.2s ease;
}
/* O display: grid das peças venceria o atributo hidden das abas. */
.lp .ferramenta-is-aviso {
  margin: 24px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-texto-is);
}
.ferramenta-is > .botao-is {
  justify-self: center;
}
@media (max-width: 479px) {
  .ferramenta-is {
    padding: 16px;
  }
  .lp .ferramenta-is-numero {
    font-size: 50px;
  }
}

/* Cards brancos com borda fina (o card de categoria do iStock). */
.cards-is {
  display: grid;
  gap: 16px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .cards-is-2,
  .cards-is-3,
  .cards-is-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .cards-is-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cards-is-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.card-is {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 8px 20px;
  background: #fff;
  border: 1px solid var(--c-card-borda);
  border-radius: 4px;
  text-align: center;
}
.lp .card-is h3 {
  font-size: 20px;
  line-height: 1.3;
  color: var(--c-nav-escura);
}
.card-is p {
  margin: 0;
  padding: 0 12px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--c-texto-is);
}
.lp .link-is {
  font-size: 18px;
}

/* Médicos (02/10, no molde da galeria "O que está acontecendo" da Stripe): o
   título em dois tons à esquerda e as setas à direita; a galeria com o médico em
   destaque largo (ocupa o espaço que sobra) e os seguintes em fatias cada vez
   mais estreitas (larguras pelo script); embaixo, o nome e o CRM do destaque e o
   botão. A foto ocupa o card; no destaque, nome e CRM grandes, embaixo. */
.galeria-is-topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.lp .titulo-is-dois-tons span {
  display: block;
  color: var(--c-texto-is);
}
.galeria-is {
  position: relative;
  height: 460px;
  margin-top: 32px;
  overflow: hidden;
}
.medico-card {
  position: relative;
  overflow: hidden;
  background: var(--c-faixa-clara);
}
/* Posição e largura vêm do script; aqui só a animação das duas juntas (0,6 s,
   saída suave, como a da Stripe). */
.galeria-is .medico-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  border-radius: 4px;
  cursor: pointer;
  transition:
    left 0.6s cubic-bezier(0.22, 0.8, 0.25, 1),
    width 0.6s cubic-bezier(0.22, 0.8, 0.25, 1),
    filter 0.3s ease;
}
.galeria-is .medico-card:not(.ativo):hover,
.galeria-is .medico-card:not(.ativo):focus-visible {
  filter: brightness(1.08);
}
.galeria-is .medico-card:focus-visible {
  outline: 2px solid var(--c-terra-escuro);
  outline-offset: -2px;
}
.galeria-is .medico-foto {
  aspect-ratio: auto;
  height: 100%;
}
/* Foto vertical num card largo: o enquadramento sobe para o rosto. */
.galeria-is .medico-foto img {
  object-position: 50% 22%;
}
/* Nas fatias o nome some; no destaque ele vem grande, embaixo. */
.galeria-is .medico-legenda {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.galeria-is .medico-card.ativo .medico-legenda {
  opacity: 1;
  transition-delay: 0.25s;
}
.lp .galeria-is .medico-card.ativo .medico-legenda h3 {
  font-size: clamp(27px, 3.6vw, 45px);
  line-height: 1.1;
}
.lp .galeria-is .medico-card.ativo .medico-crm {
  font-size: 18px;
}
.galeria-is-legenda {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-top: 20px;
}
.lp .galeria-is-legenda p {
  max-width: 640px;
  margin: 0;
  font-size: 20px;
  line-height: 1.45;
  color: var(--c-texto-is);
}
.galeria-is-legenda strong {
  font-weight: 500;
  color: var(--c-nav-escura);
}
/* Os pontinhos da troca automática (02/10): dois; o ativo vira uma pílula que
   enche em 6 s (o fim da animação troca o médico, pelo script). */
.galeria-is-pontos {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 44px;
}
.galeria-is-pontos[hidden] {
  display: none;
}
.galeria-is-pontos .ponto {
  position: relative;
  width: 8px;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--c-card-borda);
  transition: width 0.4s cubic-bezier(0.22, 0.8, 0.25, 1);
}
.galeria-is-pontos .ponto.ativo {
  width: 32px;
}
.galeria-is-pontos .ponto i {
  position: absolute;
  inset: 0;
  width: 0;
  border-radius: inherit;
  background: var(--c-nav-escura);
}
.galeria-is-pontos.correndo .ponto.ativo i {
  animation: galeria-tempo 6s linear forwards;
}
.galeria-is-pontos.parado .ponto.ativo i {
  animation-play-state: paused;
}
@keyframes galeria-tempo {
  to {
    width: 100%;
  }
}
@media (max-width: 639px) {
  .galeria-is {
    height: 380px;
  }
  .galeria-is-legenda {
    flex-direction: column;
  }
}
@media (prefers-reduced-motion: reduce) {
  .galeria-is .medico-card,
  .galeria-is .medico-legenda {
    transition: none;
  }
}
/* As setas: à direita do título, trocam o destaque; somem com menos de dois
   médicos e se apagam na ponta. */
.medicos-setas {
  display: flex;
  flex: none;
  gap: 8px;
}
.medicos-setas[hidden] {
  display: none;
}
.medicos-setas button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-card-borda);
  border-radius: 4px;
  background: #fff;
  color: var(--c-nav-escura);
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.medicos-setas button:hover:not(:disabled) {
  border-color: var(--c-nav-escura);
}
.medicos-setas button:disabled {
  opacity: 0.35;
  cursor: default;
}
.medicos-setas button:focus-visible {
  outline: 2px solid var(--c-terra-escuro);
  outline-offset: 2px;
}
.medicos-setas .icone {
  width: 20px;
  height: 20px;
}
.medicos-setas .seta-voltar .icone {
  transform: scaleX(-1);
}
.medico-foto {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
}
.medico-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.medico-iniciais {
  font-size: 63px;
  font-weight: 500;
  color: var(--c-terra-escuro);
}
.medico-foto .icone {
  width: 40px;
  height: 40px;
  color: #c4c8c8;
}
/* O mesmo desfoque de baixo para cima dos cards de "Para quem é" (01/10 noite). */

.medico-legenda {
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  padding: 56px 32px 18px 20px;
  background: linear-gradient(to top, rgb(0 0 0 / 0.72), rgb(0 0 0 / 0));
  color: #fff;
}
.lp .medico-legenda h3 {
  font-size: 22px;
  line-height: 1.3;
  color: #fff;
}
.lp .medico-legenda .medico-crm {
  margin: 4px 0 0;
  font-size: 17px;
  color: rgb(255 255 255 / 0.85);
}
/* Sem médico ainda: fundo claro, sem sombra, legenda em cinza. */
.medico-card-vazio .medico-legenda {
  background: none;
}
.lp .medico-card-vazio .medico-legenda h3 {
  color: #8a8e8e;
}

/* Botões no padrão iStock: cheio verde-água (o "Entrar" deles) e vazado. */
.botao-is {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--c-terra-borda);
  border-radius: 4px;
  background: var(--c-terra);
  color: var(--c-surface-deep);
  font: 500 18px/1 var(--f-ui);
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--t-fast),
    border-color var(--t-fast);
}
.botao-is:hover {
  border-color: var(--c-terra-hover);
  background: var(--c-terra-hover);
}
.botao-is:focus-visible {
  outline: 2px solid var(--c-terra-escuro);
  outline-offset: 3px;
}
.botao-is .icone {
  width: 18px;
  height: 18px;
}
/* Vazado (02/10): borda bege e texto carvão; nada de botão marrom. */
.botao-is-vazado {
  background: #fff;
  color: var(--c-surface-deep);
}
.botao-is-vazado:hover {
  background: var(--c-terra-fundo);
}

/* Plano (02/10): avaliação, plano anual (aurora dentro do card, borda e selo
   pretos, botão preto) e o card do globo, sobre o cinza-claro. */
.planos-is {
  align-items: stretch;
  margin-top: 56px;
}
/* Cards mais altos (02/10). */
.planos-is > .plano-is {
  min-height: 640px;
}
.plano-is {
  padding: 28px 28px 32px;
  gap: 12px;
  text-align: left;
}
/* O anual (02/10): a aurora animada DENTRO do card, como fundo (antes era o fundo
   da seção); sem a faixa bege em cima e sem o selo "Previsto". */
.plano-is-destaque {
  position: relative;
  isolation: isolate;
  overflow: visible;
  border: 1px solid var(--c-nav-escura);
  background: #fff;
  box-shadow: 0 16px 32px rgb(30 30 30 / 0.08);
}
.plano-is-destaque > .aurora {
  z-index: -1;
  /* 02/10: mais suave (estava forte demais), sobre o branco do card */
  opacity: 0.4;
  border-radius: 3px;
}
/* O selo em cima, colado na borda superior pelo lado de fora (02/10). */
.plano-is-badge {
  position: absolute;
  bottom: 100%;
  left: -1px;
  padding: 6px 12px;
  border-radius: 4px 4px 0 0;
  background: var(--c-nav-escura);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
}
/* O globo (02/10, no molde do card do globo da Stripe): título em cima e o
   globo em canvas preenchendo a parte de baixo; as etiquetas são posicionadas
   pelo /globo.js no fim de cada arco. */
.plano-is-globo {
  position: relative;
  overflow: hidden;
  padding-bottom: 0;
}
.lp .plano-is-globo h3 {
  font-size: 25px;
  line-height: 1.25;
}
.globo-is {
  position: relative;
  flex: 1;
  min-height: 360px;
  margin: 8px -28px 0;
}
.globo-is canvas {
  position: absolute;
  inset: 0;
}
.globo-etiqueta {
  position: absolute;
  top: 0;
  left: 0;
  padding: 6px 10px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 8px 20px rgb(30 30 30 / 0.12);
  color: var(--c-nav-escura);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
/* Sobre a cor da marca o cinza não passa (2,1 a 3,6:1): todo texto do anual em
   preto (02/10). */
.lp .plano-is-destaque .plano-is-sub,
.lp .plano-is-destaque .plano-is-preco span,
.lp .plano-is-destaque .plano-is-lista,
.lp .plano-is-destaque .plano-is-lista .nao-inclui,
.lp .plano-is-destaque .plano-is-lista .icone {
  color: var(--c-nav-escura);
}
/* Botão do anual em preto (02/10, pedido do Pedro), o preto da navbar; o :hover
   só clareia um pouco (sem sombra nem movimento). */
.plano-is-destaque .botao-is {
  border-color: var(--c-nav-escura);
  background: var(--c-nav-escura);
  color: #fff;
}
.plano-is-destaque .botao-is:hover {
  border-color: var(--c-surface-deep);
  background: var(--c-surface-deep);
}
.plano-is-destaque > .aurora::before {
  filter: blur(26px) saturate(1.15);
}
.plano-is-destaque > .aurora::after {
  filter: saturate(1.25) blur(0.5px);
}
.plano-is-nome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.lp .plano-is-preco {
  margin: 4px 0 0;
  padding: 0;
  font-size: 45px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--c-nav-escura);
}
.plano-is-preco span {
  margin-left: 6px;
  font-size: 17px;
  font-weight: 400;
  color: var(--c-texto-is);
}
.lp .plano-is-sub {
  padding: 0;
  font-size: 16px;
  color: var(--c-texto-is);
}
.plano-is-sub a {
  color: var(--c-terra-escuro);
  font-weight: 500;
}
.plano-is-sub strong {
  color: var(--c-nav-escura);
  font-weight: 500;
}
.plano-is-lista {
  display: grid;
  gap: 10px;
  margin: 8px 0 12px;
  padding: 0;
  list-style: none;
  font-size: 16px;
  line-height: 1.45;
  color: var(--c-nav-escura);
}
.plano-is-lista li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
}
.plano-is-lista .icone {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--c-terra-escuro);
}
.plano-is-lista .nao-inclui {
  color: var(--c-texto-is);
}
.plano-is-lista .nao-inclui .icone {
  color: #8a8e8e;
}
.plano-is .botao-is {
  margin-top: auto;
}

/* Perguntas (01/10, ideia do voysaude.com.br): a lista à esquerda e a foto da
   caneta à direita, parada enquanto a lista rola. No celular a foto some. */
.perguntas-is-grade {
  display: grid;
  gap: 48px;
  align-items: start;
}
.perguntas-is-imagem {
  display: none;
  margin: 0;
}
@media (min-width: 900px) {
  .perguntas-is-grade {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 64px;
  }
  .perguntas-is-imagem {
    display: block;
    position: sticky;
    top: 24px;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 4px;
  }
  .perguntas-is-imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Perguntas: coluna única, linhas finas entre as perguntas. */
.perguntas-is {
  margin: 32px 0 24px;
  border-top: 1px solid var(--c-card-borda);
}
.perguntas-is details {
  border-bottom: 1px solid var(--c-card-borda);
}
/* 02/10: trevo à esquerda, a pergunta e, à direita, o sinal num botãozinho
   preto com borda. */
.perguntas-is summary {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 14px;
  padding: 18px 4px;
  font-size: 18px;
  font-weight: 500;
  color: var(--c-nav-escura);
  cursor: pointer;
  list-style: none;
}
.perguntas-is summary::-webkit-details-marker {
  display: none;
}
.perguntas-is summary .icone-trevo {
  width: 22px;
  height: 22px;
  color: var(--c-nav-escura);
}
.perguntas-is summary::after {
  content: '+';
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--c-nav-escura);
  border-radius: 4px;
  background: var(--c-nav-escura);
  color: #fff;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}
.perguntas-is details[open] summary::after {
  content: '\2212';
}
/* Fechando (01/10 noite): o sinal volta para "+" já no começo da animação. */
.perguntas-is details.fechando summary::after {
  content: '+';
}
.perguntas-is summary:focus-visible {
  outline: 2px solid var(--c-terra-escuro);
  outline-offset: 2px;
}
/* A resposta desliza ao abrir e ao fechar (script no index.html): a altura
   inclui o respiro de baixo e o que passa fica escondido. */
.perguntas-is .resposta {
  box-sizing: border-box;
  overflow: hidden;
  margin: 0;
  padding: 0 46px 20px 40px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--c-texto-is);
}

/* Faixa clara antes do rodapé (01/10: era preta), o mesmo cinza da faixa abaixo da
   hero: a frase e o link em areia escura. */
.chamada-is {
  padding: 26px 16px;
  background: var(--c-faixa-clara);
  text-align: center;
}
.chamada-is p {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--c-ink);
}
.chamada-is a {
  color: var(--c-terra-escuro);
  text-decoration: none;
}
.chamada-is a:hover {
  text-decoration: underline;
}

/* Rodapé preto (01/10: o mesmo da navbar e da antiga faixa preta, era #181a1a): a lista (ou o convite) em cima, o logo e as colunas, o copyright. */
.rodape-is {
  background: var(--c-nav-escura);
  color: #fff;
  font-family: var(--f-ui);
}
.rodape-is-lista {
  padding: 40px 16px;
  border-bottom: 1px solid #2c2f2f;
}
.rodape-is-lista-in {
  display: grid;
  gap: 20px;
  max-width: var(--largura-landing);
  margin: 0 auto;
  align-items: center;
}
@media (min-width: 900px) {
  .rodape-is-lista-in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
  }
}
.lp .rodape-is-lista h2 {
  font-size: 25px;
  line-height: 1.35;
  color: #fff;
}
.rodape-is .fine,
.rodape-is .fine a {
  color: var(--c-nav-texto-suave);
}
.lp .rodape-is .inp {
  /* campo em linha no fundo escuro (padrão de 02/10): linha clara, texto branco */
  color: #fff;
  border-color: rgb(255 255 255 / 0.3);
}
.lp .rodape-is .inp:hover {
  border-color: rgb(255 255 255 / 0.55);
}
.lp .rodape-is .inp:focus {
  border-color: #fff;
  box-shadow: 0 1px 0 #fff;
}
.lp .rodape-is .inp::placeholder {
  color: rgb(255 255 255 / 0.5);
}
.rodape-is .ok {
  color: #fff;
}
.rodape-is-grade {
  display: grid;
  gap: 32px;
  max-width: var(--largura-landing);
  margin: 0 auto;
  padding: 48px 16px 40px;
}
@media (min-width: 640px) {
  .rodape-is-grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .rodape-is-grade {
    grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
  }
}
.rodape-is .logo {
  color: #fff;
  font-size: 29px;
}
.rodape-is .logo em {
  color: var(--c-terra);
}
.rodape-is-titulo {
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--c-nav-texto-suave);
}
.rodape-is-coluna ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rodape-is-coluna a {
  color: #fff;
  font-size: 16px;
  text-decoration: none;
}
.rodape-is-coluna a:hover {
  text-decoration: underline;
}
.rodape-is a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.rodape-is-base {
  padding: 18px 16px 28px;
  border-top: 1px solid #2c2f2f;
  text-align: center;
}
.rodape-is-base p {
  margin: 0;
  font-size: 14px;
  color: var(--c-nav-texto-suave);
}

/* ═══ lista de espera ═══════════════════════════════════════════════════════ */

.lp .form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: 560px;
}
.lp .form .linha {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
@media (min-width: 560px) {
  .lp .form .linha {
    flex-direction: row;
  }
}
.lp .inp {
  /* O campo em linha do design system (`.entrada`, padrao.css §11, desde
     02/10/2026): sem caixa nem fundo, só a linha embaixo. */
  font: inherit;
  font-size: 1.2656rem;
  min-height: 48px; /* a altura do .btn3 e da .entrada (revisão 30/09, I-2) */
  padding: 0;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--c-border-controle);
  border-radius: 0;
  background: transparent;
  color: var(--c-ink);
  transition:
    border-color var(--t-fast),
    box-shadow var(--t-fast);
}
.lp .inp:focus {
  outline: none;
  border-color: var(--c-ink);
  box-shadow: 0 1px 0 var(--c-ink);
}
.lp .inp::placeholder {
  color: var(--c-ink-subtle);
}
.lp .form .botao-is {
  align-self: flex-start;
}
/* E-mail e botão na mesma linha; no celular estreito o botão desce. */
.lp .form .linha-com-botao {
  flex-direction: row;
  flex-wrap: wrap;
}
.lp .form .linha-com-botao .inp {
  flex: 1 1 220px;
  width: auto;
}
.lp .form .linha-com-botao .botao-is {
  flex: none;
  align-self: stretch;
}
.lp .erro-lista {
  display: none;
  color: var(--c-danger-strong);
  font-weight: var(--fw-medium);
}
.lp .ok {
  display: none;
  max-width: 560px;
  padding: var(--s-5);
  border-radius: var(--r-md);
  background: var(--c-primary-soft);
  color: var(--c-primary-ink);
}
.lp .ok.on {
  display: block;
}

/* ═══ políticas ═════════════════════════════════════════════════════════════
   Topo cinza-claro no padrão iStock (01/10), e embaixo o
   índice numa coluna lateral fixa ao rolar (no computador) ao lado do texto
   corrido em coluna de leitura. O texto jurídico não muda. */

/* Topo das políticas no padrão iStock (01/10): faixa cinza-clara, título de 38px. */
.pol-topo-sobre {
  margin: 0 0 8px;
  font-size: 16px;
  color: var(--c-texto-is);
}
.lp .pol-topo h1 {
  font-size: 43px;
  line-height: 1.15;
  color: var(--c-nav-escura);
}
.pol-topo .meta {
  margin: 12px 0 0;
  font-size: 16px;
  color: var(--c-texto-is);
}
.pol-grade {
  display: grid;
  gap: var(--s-6);
}
@media (min-width: 1024px) {
  .pol-grade {
    grid-template-columns: 260px minmax(0, 738px);
    column-gap: var(--s-7);
    align-items: start;
  }
  .pol-grade .indice {
    position: sticky;
    top: var(--s-6);
  }
}
.pol .indice {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--c-filete);
}
.pol .indice a {
  display: flex;
  align-items: center;
  min-height: var(--touch-min);
  border-bottom: 1px solid var(--c-filete);
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  text-decoration: none;
  transition: color var(--t-fast);
}
.pol .indice a:hover {
  color: var(--c-primary-strong);
}
.pol .texto h2 {
  font-size: clamp(var(--fs-h2), 1.125rem + 1.57vw, 2.25rem);
  line-height: 1.15;
  margin: var(--s-7) 0 var(--s-4);
}
.pol .texto h2:first-of-type {
  margin-top: var(--s-6);
}
.pol .texto h3 {
  font-family: var(--f-ui);
  font-size: var(--fs-body);
  font-weight: var(--fw-semi);
  letter-spacing: 0;
  margin: var(--s-5) 0 var(--s-2);
}
.pol .texto p,
.pol .texto li {
  font-size: var(--fs-body);
  line-height: 1.78;
  color: var(--c-ink-muted);
  margin: 0 0 var(--s-3);
}
.pol .texto ul {
  padding-left: 20px;
  margin: 0 0 var(--s-4);
}
.pol .texto li {
  margin-bottom: var(--s-2);
}
.pol .texto a {
  color: var(--c-primary-strong);
}
/* Tabela larga rola dentro dela, nunca a página. */
.pol .texto table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--s-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  display: block;
  overflow-x: auto;
}
.pol .texto th,
.pol .texto td {
  text-align: left;
  padding: var(--s-2) var(--s-3) var(--s-2) 0;
  border-bottom: 1px solid var(--c-filete);
  vertical-align: top;
  color: var(--c-ink-muted);
}
.pol .texto th {
  color: var(--c-ink);
  font-weight: var(--fw-semi);
  white-space: nowrap;
}
.pol .versao {
  border-top: 1px solid var(--c-filete);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  font-size: var(--fs-legenda);
  color: var(--c-ink-subtle);
}

/* ═══ aviso de cookies (02/10/2026) ═══════════════════════════════════════════
   Card flutuante no canto inferior ESQUERDO, no padrão da página: branco, borda
   fina, canto 4 px, sombra quente; "Aceitar" preto e "Personalizar" vazado bege.
   Entra subindo; no celular ocupa a largura com 16 px de margem. */
.cookies-is,
.cookies-is * {
  box-sizing: border-box;
}
.cookies-is {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 60;
  width: min(380px, calc(100vw - 32px));
  padding: 20px;
  border: 1px solid var(--c-card-borda);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 16px 40px rgb(30 30 30 / 0.16);
  font-family: var(--f-ui);
  color: var(--c-nav-escura);
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}
.cookies-is.aberto {
  opacity: 1;
  transform: none;
}
.cookies-is p {
  margin: 0;
}
.cookies-is-titulo {
  font-size: 18px;
  font-weight: 500;
}
.cookies-is-texto {
  margin-top: 6px !important;
  font-size: 16px;
  line-height: 1.5;
  color: var(--c-texto-is);
}
.cookies-is-texto a {
  color: var(--c-terra-escuro);
  font-weight: 500;
}
.cookies-is-acoes {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.cookies-is-acoes button {
  flex: 1;
  min-height: 40px;
  border-radius: 4px;
  font: 500 16px/1 var(--f-ui);
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}
.cookies-is-aceitar {
  border: 1px solid var(--c-nav-escura);
  background: var(--c-nav-escura);
  color: #fff;
}
.cookies-is-aceitar:hover {
  border-color: var(--c-surface-deep);
  background: var(--c-surface-deep);
}
.cookies-is-personalizar {
  border: 1px solid var(--c-terra);
  background: #fff;
  color: var(--c-nav-escura);
}
.cookies-is-personalizar:hover {
  background: var(--c-terra-fundo);
}
.cookies-is-acoes button[hidden] {
  display: none;
}
/* As categorias (Personalizar): nome e explicação à esquerda, interruptor à
   direita. */
.cookies-is-opcoes {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--c-card-borda);
}
.cookies-is-opcoes[hidden] {
  display: none;
}
.cookies-is-opcao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
}
.cookies-is-opcao strong {
  display: block;
  font-size: 16px;
  font-weight: 500;
}
.cookies-is-opcao small {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--c-texto-is);
}
.cookies-is-opcao input {
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 36px;
  height: 20px;
  margin: 0;
  border-radius: 999px;
  background: var(--c-card-borda);
  cursor: pointer;
  transition: background 0.2s ease;
}
.cookies-is-opcao input::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(30 30 30 / 0.2);
  transition: transform 0.2s ease;
}
.cookies-is-opcao input:checked {
  background: var(--c-nav-escura);
}
.cookies-is-opcao input:checked::after {
  transform: translateX(16px);
}
.cookies-is-opcao input:disabled {
  opacity: 0.5;
}
/* Necessários: não dá para mudar, o cursor mostra o bloqueio na linha inteira. */
.cookies-is-travada,
.cookies-is-travada input {
  cursor: not-allowed;
}
.cookies-is-opcao input:focus-visible {
  outline: 2px solid var(--c-terra-escuro);
  outline-offset: 2px;
}
.cookies-is button:focus-visible,
.cookies-is a:focus-visible {
  outline: 2px solid var(--c-terra-escuro);
  outline-offset: 2px;
}
@media (max-width: 639px) {
  .cookies-is {
    left: 16px;
    bottom: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cookies-is {
    transition: none;
  }
}

/* Redes no rodapé, abaixo da marca (02/10): sem link ainda (são <span>, não
   clicam); quando houver os endereços, viram <a> com o mesmo visual. */
.lp .rodape-is-redes {
  display: flex;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.rodape-is-rede {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 50%;
  color: var(--c-nav-texto-suave);
}
.rodape-is-rede .icone {
  width: 18px;
  height: 18px;
}
.rodape-is-redes .sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}