/* ==========================================================================
   Landing da demonstracao Beatriz
   A pagina encena a tensao do produto: uma ficha de paciente calada (cinza,
   "dormente") que acorda (verde, "vivo") quando alguem lhe fala. Verde porque
   e a cor do canal onde o produto trabalha; toda a concorrencia e azul.
   Sem sombras nos cartoes (profundidade so por diferenca de cor), sem
   gradientes coloridos, sem icones genericos.
   ========================================================================== */

:root {
  --bata: #F4F6F3;       /* fundo: o branco-verde de uma bata */
  --gaze: #E8EFE9;       /* superficies e cartoes */
  --linha: #CBD6CE;      /* contornos e divisorias */
  --tinta: #0E2B23;      /* titulos, corpo, botao principal */
  --sombra: #4F6B62;     /* texto secundario (AA em bata e gaze) */
  --vivo: #25D366;       /* o unico acento: o estado acordado */
  --vivo-texto: #0F7A4E; /* verde como texto (AA em bata e gaze) */
  --dormente: #9A9C92;   /* estado calado; so decorativo, nunca em texto */

  /* dentro do telemovel usam-se as cores reais do WhatsApp, e e o unico
     sitio da pagina onde aparecem */
  --wa-cab: #075E54;
  --wa-fundo: #EFEAE2;
  --wa-recebida: #FFFFFF;
  --wa-enviada: #D9FDD3;
  --wa-botao: #00A884;

  --f-titulo: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --f-corpo: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-h1: clamp(2.25rem, 4.6vw, 3.75rem);
  --t-h2: clamp(1.875rem, 4.2vw, 3.125rem);
  --t-h3: clamp(1.2rem, 2vw, 1.45rem);
  --t-corpo: clamp(1.0625rem, 1.6vw, 1.1875rem);
  --t-mono: 0.8125rem;

  --esp-seccao: clamp(4.5rem, 10vw, 8.75rem);
  --largura: 1120px;
  --margem: clamp(1.25rem, 4vw, 2.5rem);
  --raio: 8px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bata);
  color: var(--tinta);
  font-family: var(--f-corpo);
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-size: var(--t-corpo);
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--f-titulo);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); line-height: 0.98; }
h2 { font-size: var(--t-h2); line-height: 1.04; }
h3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.01em; }

p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--vivo);
  outline-offset: 3px;
  border-radius: 4px;
}

.saltar {
  position: absolute;
  left: 1rem; top: -4rem;
  padding: .6rem 1rem;
  background: var(--tinta); color: var(--bata);
  font-family: var(--f-mono); font-size: var(--t-mono);
  border-radius: 6px; z-index: 100;
}
.saltar:focus { top: 1rem; }

.contentor {
  width: min(var(--largura), 100% - 2 * var(--margem));
  margin-inline: auto;
}
.contentor-leitura { max-width: 760px; }

.seccao { padding-block: var(--esp-seccao); }
.seccao + .seccao { padding-top: 0; }
.seccao h2 { margin-bottom: 1.25rem; max-width: 20ch; }

.texto { max-width: 62ch; }
.texto + .texto { margin-top: 1rem; }
.texto-sombra { color: var(--sombra); }

/* eyebrow: contexto da seccao, em mono, com uma barra viva a esquerda */
.etiqueta {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--sombra);
  display: inline-flex; align-items: center; gap: .6rem;
  margin-bottom: 1rem;
}
.etiqueta::before {
  content: '';
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--vivo);
}

/* --------------------------------------------------------------------------
   Botoes
   -------------------------------------------------------------------------- */

.botao, .botao-secundario {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  line-height: 1;
  border-radius: 999px;
  padding: 1.05rem 1.7rem;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: .6rem;
  transition: transform .18s ease, background-color .18s ease, color .18s ease;
}
.botao {
  background: var(--tinta);
  color: var(--bata);
}
.botao:hover { background: #163f34; }
.botao:active { transform: translateY(1px); }
.botao[disabled] { opacity: .55; cursor: wait; }

.botao-secundario {
  background: transparent;
  color: var(--tinta);
  border-color: var(--linha);
}
.botao-secundario:hover { border-color: var(--tinta); }

.ligacao-cta {
  font-family: var(--f-titulo);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--vivo);
  padding-bottom: .1em;
}

/* --------------------------------------------------------------------------
   O filme
   Estrutura: a seccao e alta e o palco e sticky. O JS poe a classe .ativo
   (so com JS e sem prefers-reduced-motion) e as classes cumulativas c1..c5.
   Sem .ativo, o palco e um bloco normal com tudo visivel.
   -------------------------------------------------------------------------- */

.filme { position: relative; }
.filme.ativo { height: 460vh; }

.filme-palco {
  position: relative;
  padding-block: clamp(1.5rem, 4vh, 3rem);
}
.filme.ativo .filme-palco {
  position: sticky; top: 0;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}

.palco-grelha {
  display: grid;
  gap: clamp(1.25rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .palco-grelha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* texto: intro (cena 1) e legendas (cenas 2 a 5) */
.palco-texto { position: relative; }
.intro-sub { margin-top: 1.5rem; max-width: 52ch; }
.intro-acoes { margin-top: 2rem; }
.microprova {
  margin-top: 1rem;
  text-wrap: pretty;
  font-family: var(--f-mono); font-size: var(--t-mono);
  color: var(--sombra); letter-spacing: .02em;
}
.titulo-viragem { color: var(--vivo-texto); }

/* as quatro legendas ocupam a mesma celula da grelha, para a altura do bloco
   ser a da mais alta e o botao por baixo nunca saltar */
.legendas { display: grid; gap: 1.5rem; }
.legenda {
  grid-area: 1 / 1;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 18ch;
}
.legenda-acao { grid-row: 2; }

/* sem filme: as legendas sao paragrafos, uma por baixo da outra, e o botao
   da intro ja esta la em cima */
.filme:not(.ativo) .legendas { gap: .9rem; margin-top: 2.5rem; }
.filme:not(.ativo) .legenda { grid-area: auto; font-size: clamp(1.2rem, 2.2vw, 1.6rem); max-width: 30ch; }
.filme:not(.ativo) .legenda-acao { display: none; }

/* modo ativo: a intro esvai-se na cena 2 e as legendas trocam entre si */
.filme.ativo .intro { transition: opacity .35s ease, transform .35s ease; }
.filme.ativo.c2 .intro { opacity: 0; transform: translateY(-16px); pointer-events: none; }
.filme.ativo .legendas {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
.filme.ativo.c2 .legendas { opacity: 1; pointer-events: auto; }
.filme.ativo .legenda {
  opacity: 0; transform: translateY(14px);
  transition: opacity .2s ease, transform .45s ease;
}
.filme.ativo.c2:not(.c3) .legenda[data-cena="2"],
.filme.ativo.c3:not(.c4) .legenda[data-cena="3"],
.filme.ativo.c4:not(.c5) .legenda[data-cena="4"],
.filme.ativo.c5 .legenda[data-cena="5"] {
  opacity: 1; transform: none;
  transition: opacity .3s ease .18s, transform .45s ease;
}

/* no telemovel nao ha espaco para sobrepor: a intro sai do fluxo na cena 2 e
   as legendas ocupam o lugar dela. Tudo alinhado ao topo, para o titulo ser
   a primeira coisa que se le, e o telemovel a espreitar por baixo. */
@media (max-width: 899px) {
  .filme.ativo .filme-palco { justify-content: flex-start; padding-top: 1.25rem; }
  .filme.ativo .palco-grelha { display: flex; flex-direction: column; align-items: stretch; gap: .9rem; }
  .filme.ativo .intro-sub { font-size: 1rem; line-height: 1.45; margin-top: 1rem; }
  .filme.ativo .intro-acoes { margin-top: 1.25rem; }
  .filme.ativo .microprova { margin-top: .75rem; }
  .filme.ativo .legendas { display: none; }
  .filme.ativo.c2 .intro { display: none; }
  .filme.ativo.c2 .legendas {
    display: grid; position: static; transform: none;
    align-content: start; gap: .9rem;
  }
  .filme.ativo .legenda { font-size: 1.35rem; max-width: none; }
  /* a barra fixa no fundo do ecra tem estas mesmas tres palavras e aparece
     exatamente na mesma cena. Duas vezes o mesmo convite nao convida mais,
     e a altura que esta linha ocupa faz falta ao aparelho. */
  .filme.ativo .legenda-acao { display: none; }
}
@media (max-width: 899px) and (max-height: 720px) {
  .filme.ativo .microprova { display: none; }
  .filme.ativo .intro h1 { font-size: 1.9rem; }
  .filme.ativo .intro-sub { font-size: .95rem; }
}
/* ecras baixos, do genero do iPhone SE: nao ha altura para o mesmo racio sem
   o aparelho ficar um risco estreito ao meio. A ficha encolhe, a legenda
   tambem, e o aparelho aceita 9:16.5, que continua a ser o de telemoveis
   reais, so de uma geracao anterior. */
@media (max-width: 899px) and (max-height: 780px) {
  .filme.ativo .ficha { padding: .45rem .8rem; font-size: .72rem; gap: .2rem; }
  .filme.ativo .ficha-estado { padding-top: .25rem; }
  .filme.ativo .legenda { font-size: 1.2rem; }
}

/* dica de scroll, so na cena 1, encostada ao fundo do palco */
.palco-dica {
  display: none;
  position: absolute; left: 0; right: 0; bottom: 1rem;
  text-align: center;
  font-family: var(--f-mono); font-size: var(--t-mono);
  color: var(--sombra);
  transition: opacity .3s ease;
}
.filme.ativo .palco-dica { display: block; }
.filme.ativo.c2 .palco-dica { opacity: 0; }
/* no telemovel o proprio ecra cortado ao fundo ja e o convite a descer, e a
   dica ficava por cima da primeira mensagem */
@media (max-width: 899px) {
  .filme.ativo .palco-dica { display: none; }
}

/* cena: a ficha e o telemovel. No desktop, lado a lado e alinhados pelo
   fundo, com a ficha a sobrepor-se so ao rebordo escuro do telemovel, nunca
   ao ecra. */
.palco-cena {
  position: relative;
  display: grid;
  justify-items: center;
  gap: .9rem;
}
@media (min-width: 900px) {
  .palco-cena { display: flex; align-items: flex-end; justify-content: flex-end; gap: 0; }
}

/* --------------------------------------------------------------------------
   A ficha que acorda
   -------------------------------------------------------------------------- */

.ficha {
  width: min(100%, 300px);
  background: var(--gaze);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 1rem 1.1rem;
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  color: var(--tinta);
  transition: border-color .5s ease, background-color .5s ease;
  z-index: 2;
}
@media (min-width: 900px) {
  .ficha {
    position: relative;
    width: 260px;
    font-size: .78rem;
    margin-right: -20px;   /* rebordo (12px) mais a margem interna do ecra (10px): nunca tapa texto */
    margin-bottom: 44px;
  }
  .ficha-campos dd, .ficha-txt { white-space: nowrap; }
}
/* no telemovel, em modo ativo, a ficha e uma tira de duas linhas */
@media (max-width: 899px) {
  .filme.ativo .ficha { width: 100%; padding: .6rem .9rem; display: grid; gap: .3rem; }
  .filme.ativo .ficha-cab { display: none; }
  .filme.ativo .ficha-campos { display: flex; flex-wrap: wrap; gap: .2rem .5rem; }
  .filme.ativo .ficha-campos div { display: contents; }
  .filme.ativo .ficha-campos div:nth-child(3) { display: none; }
  .filme.ativo .ficha-campos dt { display: none; }
  .filme.ativo .ficha-campos div:not(:first-child) dd::before { content: '· '; color: var(--sombra); font-weight: 400; }
  .filme.ativo .ficha-estado { margin-top: 0; padding-top: .4rem; }
}
.ficha-cab {
  display: flex; justify-content: space-between;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--sombra);
  margin-bottom: .8rem;
}
.ficha-campos { margin: 0; display: grid; gap: .45rem; }
.ficha-campos div { display: flex; justify-content: space-between; gap: 1rem; }
.ficha-campos dt { color: var(--sombra); }
.ficha-campos dd { margin: 0; font-weight: 500; text-align: right; }
.ficha-estado {
  margin-top: .9rem; padding-top: .8rem;
  border-top: 1px dashed var(--linha);
  display: flex; align-items: center; gap: .55rem;
  color: var(--sombra);
}
.ficha-ponto {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--dormente);
  flex: none;
  transition: background-color .4s ease, box-shadow .4s ease;
}
.ficha-txt { display: none; }
.ficha-txt[data-estado="dormente"] { display: inline; }

/* acorda na cena 3, marca na cena 5 */
.filme.ativo.c3 .ficha { border-color: var(--vivo); }
.filme.ativo.c3 .ficha-ponto { background: var(--vivo); box-shadow: 0 0 0 5px rgba(37, 211, 102, .22); }
.filme.ativo.c3 .ficha-estado { color: var(--vivo-texto); font-weight: 500; }
.filme.ativo.c3 .ficha-txt[data-estado="dormente"] { display: none; }
.filme.ativo.c3:not(.c5) .ficha-txt[data-estado="viva"] { display: inline; }
.filme.ativo.c5 .ficha-txt[data-estado="marcada"] { display: inline; }

/* sem filme, a ficha mostra o estado final */
.filme:not(.ativo) .ficha { border-color: var(--vivo); }
.filme:not(.ativo) .ficha-ponto { background: var(--vivo); }
.filme:not(.ativo) .ficha-estado { color: var(--vivo-texto); font-weight: 500; }
.filme:not(.ativo) .ficha-txt[data-estado="dormente"] { display: none; }
.filme:not(.ativo) .ficha-txt[data-estado="marcada"] { display: inline; }

/* --------------------------------------------------------------------------
   O telemovel, em CSS, com a interface real do WhatsApp la dentro
   -------------------------------------------------------------------------- */

.telemovel {
  position: relative;
  width: min(100%, 320px);
  aspect-ratio: 9 / 18.5;
  background: var(--tinta);
  border-radius: 44px;
  padding: 12px;
  box-shadow: 0 30px 60px -30px rgba(14, 43, 35, .45);
}
.filme.ativo .telemovel { aspect-ratio: auto; }
@media (min-width: 900px) {
  .filme.ativo .telemovel { width: 290px; height: min(640px, calc(100dvh - 9rem)); }
}
/* no telemovel o aparelho nunca muda de forma: mantem sempre as proporcoes
   reais e e a altura disponivel que manda, saindo a largura dela. Na cena 1
   e o palco que lhe corta o fundo, e e isso que o poe a espreitar por baixo
   do titulo; da cena 2 em diante, com a intro fora do fluxo, ve-se inteiro.
   Antes tinha altura fixa e ficava com o racio de um aparelho achatado. */
@media (max-width: 899px) {
  .filme.ativo .telemovel {
    width: auto;
    height: max(240px, min(600px, calc(100dvh - 17rem - env(safe-area-inset-bottom))));
    aspect-ratio: 9 / 18.5;
    flex: none;
  }
}
/* nos ecras baixos o racio de 18.5 dava um aparelho estreito de mais. O de
   16.5 e o de um telemovel de ha uns anos, continua a ler-se como aparelho
   real, e devolve largura ao ecra, que e o que importa. */
@media (max-width: 899px) and (max-height: 780px) {
  .filme.ativo .telemovel {
    aspect-ratio: 9 / 16.5;
    height: max(280px, min(520px, calc(100dvh - 16.25rem - env(safe-area-inset-bottom))));
  }
}
/* o aparelho no telemovel e mais estreito do que era, para o racio bater
   certo, e o que esta la dentro encolhe com ele. Se so a moldura encolhesse,
   as bolhas passavam a ocupar a largura toda e cabiam duas mensagens. */
@media (max-width: 899px) {
  .filme.ativo .telemovel { border-radius: 34px; padding: 9px; }
  .filme.ativo .tm-ecra { border-radius: 26px; }
  .filme.ativo .tm-ilha { top: 15px; width: 66px; height: 19px; }
  .filme.ativo .tm-cab { padding: 32px 12px 9px; gap: 8px; }
  .filme.ativo .tm-avatar { width: 28px; height: 28px; font-size: .85rem; }
  .filme.ativo .tm-nome { font-size: .92rem; }
  .filme.ativo .tm-nome small { font-size: .72rem; }
  .filme.ativo .tm-conversa { font-size: .78rem; padding: 10px 8px 12px; gap: 5px; }
  .filme.ativo .tm-dia { font-size: .66rem; padding: 2px 8px; }
  .filme.ativo .msg { padding: 6px 9px 7px; border-radius: 9px; }
  .filme.ativo .tm-botao { padding: 7px 8px; border-radius: 7px; }
}

.tm-dia {
  align-self: center;
  background: rgba(255, 255, 255, .85);
  color: #54656F;
  font-size: .72rem;
  padding: 3px 10px;
  border-radius: 6px;
  margin-bottom: 4px;
}
.tm-ilha {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 84px; height: 24px; border-radius: 999px;
  background: var(--tinta);
  z-index: 3;
}
.tm-ecra {
  height: 100%;
  border-radius: 34px;
  background: var(--wa-fundo);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.tm-cab {
  background: var(--wa-cab);
  color: #fff;
  padding: 44px 16px 12px;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-titulo);
}
.tm-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--vivo); color: var(--tinta);
  display: grid; place-items: center;
  font-weight: 700;
}
.tm-nome { display: flex; flex-direction: column; line-height: 1.15; font-weight: 700; }
.tm-nome small { font-family: var(--f-corpo); font-weight: 400; font-size: .8rem; opacity: .85; }

.tm-conversa {
  list-style: none;
  flex: 1;
  padding: 12px 10px 14px;
  display: flex; flex-direction: column; justify-content: flex-start;
  gap: 6px;
  overflow: hidden;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: .86rem;
  line-height: 1.35;
}
/* a partir da cena 4 ha mensagens que cheias, e a ancora passa para o fundo */
.filme.c4 .tm-conversa, .filme.c5 .tm-conversa,
.filme:not(.ativo) .tm-conversa { justify-content: flex-end; }
/* nesse momento as primeiras mensagens saem por cima, como num WhatsApp a
   que ja se subiu. O corte a direito partia a bolha a meio da letra e lia-se
   como defeito; esvair a ultima meia duzia de pixeis le-se como conversa
   que continua para cima. */
.filme.c4 .tm-conversa, .filme.c5 .tm-conversa,
.filme:not(.ativo) .tm-conversa {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
}

.msg {
  max-width: 86%;
  padding: 7px 10px 8px;
  border-radius: 10px;
  white-space: pre-line;
  color: #111;
}
.msg.de-beatriz { align-self: flex-start; background: var(--wa-recebida); border-top-left-radius: 3px; }
.msg.de-paciente { align-self: flex-end; background: var(--wa-enviada); border-top-right-radius: 3px; }

/* botoes de resposta rapida: sao sempre empilhados a toda a largura, e assim
   que o WhatsApp os desenha; mostrar lado a lado seria mentir */
.msg.botoes {
  align-self: stretch; max-width: none;
  padding: 0; background: none;
  display: flex; flex-direction: column; gap: 4px;
}
.tm-botao {
  background: var(--wa-recebida);
  color: var(--wa-botao);
  text-align: center;
  padding: 9px 10px;
  border-radius: 8px;
  font-weight: 600;
  transition: opacity .3s ease, background-color .3s ease, color .3s ease;
}

/* em modo ativo, cada mensagem so aparece a partir da sua cena, em cascata */
.filme.ativo .msg { display: none; }
@keyframes entrar {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.filme.ativo.c1 .msg[data-cena="1"],
.filme.ativo.c2 .msg[data-cena="2"],
.filme.ativo.c3 .msg[data-cena="3"],
.filme.ativo.c4 .msg[data-cena="4"],
.filme.ativo.c5 .msg[data-cena="5"] {
  display: block;
  animation: entrar .45s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: var(--d, 0s);
}
.filme.ativo.c2 .msg.botoes[data-cena="2"],
.filme.ativo.c5 .msg.botoes[data-cena="5"] { display: flex; }

/* o botao tocado fica marcado e os outros apagam-se */
.filme.ativo.c3 .msg[data-cena="2"] .tm-botao { opacity: .45; }
.filme.ativo.c3 .msg[data-cena="2"] .tm-botao[data-escolha] {
  opacity: 1; background: var(--wa-enviada); color: var(--tinta);
}
.filme:not(.ativo) .msg[data-cena="2"] .tm-botao:not([data-escolha]),
.filme:not(.ativo) .msg[data-cena="5"] .tm-botao:not([data-escolha]) { opacity: .45; }
.filme:not(.ativo) .tm-botao[data-escolha] { background: var(--wa-enviada); color: var(--tinta); }

/* --------------------------------------------------------------------------
   A conta que ninguem faz
   -------------------------------------------------------------------------- */

.conta-grelha { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .conta-grelha { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.conta-texto .texto + .texto { margin-top: 1.25rem; }

.calculadora {
  background: var(--gaze);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: clamp(1.25rem, 3vw, 2rem);
  display: grid; gap: 1.25rem;
}
.calc-campo { display: grid; gap: .5rem; }
.calc-pergunta { font-size: 1rem; color: var(--tinta); }
.calculadora input {
  font-family: var(--f-mono); font-size: 1.5rem; font-weight: 500;
  width: 100%;
  padding: .7rem .9rem;
  background: var(--bata);
  border: 1px solid var(--linha); border-radius: 6px;
  color: var(--tinta);
}
.calculadora input:focus { border-color: var(--tinta); outline: none; box-shadow: 0 0 0 3px rgba(37, 211, 102, .35); }
.calc-moeda-grupo { position: relative; display: block; }
.calc-moeda-grupo input { padding-right: 2.6rem; }
.calc-moeda {
  position: absolute; right: .9rem; top: 50%; transform: translateY(-50%);
  font-family: var(--f-mono); color: var(--sombra);
}
.calc-resultado {
  border-top: 1px dashed var(--linha);
  padding-top: 1.25rem;
  display: grid; gap: .25rem;
}
.calc-rotulo { font-family: var(--f-mono); font-size: var(--t-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--sombra); }
.calc-numero {
  font-family: var(--f-titulo); font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  letter-spacing: -0.03em; line-height: 1;
  color: var(--vivo-texto);
  font-variant-numeric: tabular-nums;
}
.calc-pe { font-size: .95rem; color: var(--sombra); }

/* --------------------------------------------------------------------------
   Os tres passos
   -------------------------------------------------------------------------- */

.passos {
  list-style: none;
  display: grid; gap: 1rem;
  margin-top: 2rem;
}
@media (min-width: 720px) { .passos { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.passo {
  background: var(--gaze);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 1.5rem;
  display: grid; gap: .75rem; align-content: start;
}
.passo-n {
  font-family: var(--f-mono); font-size: var(--t-mono); font-weight: 500;
  color: var(--vivo-texto);
  border: 1px solid var(--vivo);
  border-radius: 999px;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
}
.passo p { color: var(--sombra); font-size: 1rem; }
.fecho-passos {
  margin-top: 2rem;
  font-family: var(--f-titulo); font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   Perguntas, criterio, autor
   -------------------------------------------------------------------------- */

.perguntas { margin: 2rem 0 0; }
.pergunta { padding: 1.5rem 0; border-top: 1px solid var(--linha); }
.pergunta:last-child { border-bottom: 1px solid var(--linha); }
.pergunta dt { font-family: var(--f-titulo); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; margin-bottom: .6rem; }
.pergunta dd { margin: 0; color: var(--sombra); }

.icp { display: grid; gap: 1.25rem; margin-top: 2rem; }
@media (min-width: 720px) { .icp { grid-template-columns: 1fr 1fr; } }
.icp-coluna {
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 1.5rem;
}
.icp-sim { background: var(--gaze); border-color: var(--vivo); }
.icp-coluna h3 { margin-bottom: 1rem; }
.icp-coluna ul { list-style: none; display: grid; gap: .75rem; }
.icp-coluna li { padding-left: 1.4rem; position: relative; font-size: 1rem; }
.icp-coluna li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; border-radius: 50%;
}
.icp-sim li::before { background: var(--vivo); }
.icp-nao li::before { background: var(--dormente); }

.autor { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .autor { grid-template-columns: 300px 1fr; gap: 4rem; } }
.autor-foto img {
  border-radius: var(--raio);
  border: 1px solid var(--linha);
  max-width: 300px;
}

/* --------------------------------------------------------------------------
   Formulario e compromissos
   -------------------------------------------------------------------------- */

.seccao-form { padding-bottom: calc(var(--esp-seccao) + 3rem); }
.form-grelha { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .form-grelha { grid-template-columns: minmax(0, 1fr) 340px; gap: 4rem; } }

.form-coluna {
  background: var(--gaze);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: clamp(1.25rem, 3.5vw, 2.5rem);
}
.form-cab { margin-bottom: 1.75rem; }

.barra-progresso { height: 4px; background: var(--linha); border-radius: 999px; overflow: hidden; }
.barra-progresso-preenchimento { height: 100%; width: 20%; background: var(--vivo); transition: width .3s ease; }
.passo-atual-rotulo {
  margin: .6rem 0 1.5rem;
  font-family: var(--f-mono); font-size: var(--t-mono);
  text-transform: uppercase; letter-spacing: .1em; color: var(--sombra);
}

.passo-formulario { display: grid; gap: .9rem; }
.campo-formulario { display: grid; gap: .45rem; }
.rotulo-campo { font-size: 1rem; }
.pergunta-formulario { font-family: var(--f-titulo); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; margin-bottom: .25rem; }

.form-coluna input[type="text"],
.form-coluna input[type="tel"],
.form-coluna input[type="email"] {
  font-family: var(--f-corpo); font-size: 1.05rem;
  width: 100%;
  padding: .85rem 1rem;
  background: var(--bata);
  border: 1px solid var(--linha); border-radius: 6px;
  color: var(--tinta);
}
.form-coluna input:focus { border-color: var(--tinta); outline: none; box-shadow: 0 0 0 3px rgba(37, 211, 102, .35); }
.campo-outro { margin-top: .25rem; }

.opcao-formulario {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: .9rem 1rem;
  background: var(--bata);
  border: 1px solid var(--linha); border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  transition: border-color .15s ease;
}
.opcao-formulario:hover { border-color: var(--tinta); }
.opcao-formulario:has(input:checked) { border-color: var(--vivo); box-shadow: inset 0 0 0 1px var(--vivo); }
.opcao-formulario input { accent-color: var(--vivo-texto); margin-top: .2rem; flex: none; }

.campo-telefone-grupo { display: flex; align-items: stretch; }
.indicativo-pais {
  display: flex; align-items: center;
  padding: 0 .9rem;
  font-family: var(--f-mono);
  background: var(--linha);
  border: 1px solid var(--linha); border-right: 0;
  border-radius: 6px 0 0 6px;
  color: var(--tinta);
}
.campo-telefone-grupo input { border-radius: 0 6px 6px 0; }

.erro-campo { color: #A32D2D; font-size: .95rem; }
.navegacao-formulario { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.nota-formulario { margin-top: 1rem; font-size: .95rem; color: var(--sombra); }
.nota-formulario:empty { display: none; }
.mensagem-envio {
  margin-top: 1rem; padding: 1rem;
  border: 1px solid #A32D2D; border-radius: 6px;
  display: grid; gap: .75rem; justify-items: start;
}

.ecra-sucesso { display: grid; gap: .75rem; justify-items: start; }
.sucesso-ponto { width: 14px; height: 14px; border-radius: 50%; background: var(--vivo); box-shadow: 0 0 0 6px rgba(37, 211, 102, .22); }

.sem-letras {
  border-top: 2px solid var(--vivo);
  padding-top: 1.25rem;
}
.sem-letras h3 { margin-bottom: 1rem; }
.sem-letras ul { list-style: none; display: grid; gap: .9rem; }
.sem-letras li { padding-left: 1.4rem; position: relative; font-size: 1rem; }
.sem-letras li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--vivo);
}
.ps { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px dashed var(--linha); font-size: 1rem; color: var(--sombra); }
.ps strong { font-family: var(--f-mono); font-weight: 500; color: var(--tinta); margin-right: .4rem; }

/* --------------------------------------------------------------------------
   Rodape e barra fixa
   -------------------------------------------------------------------------- */

.rodape {
  border-top: 1px solid var(--linha);
  padding: 2.5rem 0 3rem;
  font-size: .95rem; color: var(--sombra);
}
.rodape-conteudo { display: grid; gap: .5rem; max-width: 62ch; }
.creditos { font-family: var(--f-mono); font-size: var(--t-mono); color: var(--tinta); margin-top: 1rem; }

.barra-cta {
  position: fixed; left: 0; right: 0; bottom: 0;
  padding: .75rem var(--margem) calc(.75rem + env(safe-area-inset-bottom));
  background: rgba(244, 246, 243, .92);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--linha);
  z-index: 50;
  transform: translateY(100%);
  transition: transform .3s ease;
}
.barra-cta .botao { width: 100%; justify-content: center; }
.barra-cta.visivel { transform: none; }
@media (min-width: 900px) { .barra-cta { display: none; } }

/* --------------------------------------------------------------------------
   Pagina legal (privacidade.html partilha esta folha)
   -------------------------------------------------------------------------- */

.secao-legal { padding-block: var(--esp-seccao); }
.texto-legal { max-width: 720px; }
.texto-legal h1 { margin-bottom: 1rem; }
.texto-legal h2 { font-size: var(--t-h3); margin: 2.25rem 0 .75rem; }
.texto-legal p + p { margin-top: .75rem; }
.texto-legal .subtitulo-heroi { color: var(--sombra); }
.lista-legal { padding-left: 1.2rem; margin: .5rem 0; display: grid; gap: .35rem; }
.pill-heroi { font-family: var(--f-mono); font-size: var(--t-mono); color: var(--sombra); margin-bottom: 1rem; }
.voltar-legal { margin-top: 2.5rem; }

/* --------------------------------------------------------------------------
   Revelar seccoes ao entrar no ecra (nivel 1), so com JS
   -------------------------------------------------------------------------- */

.js .revelar { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.js .revelar.visivel { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Movimento reduzido desliga tudo. O filme fica estatico por nao receber a
   classe .ativo (decidido no JS), e isto trata do resto.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .revelar { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   Microprova: tres afirmacoes curtas separadas por um ponto desenhado, e nao
   por um caracter no meio do texto. Assim cada uma quebra inteira em vez de
   deixar duas palavras orfas na linha seguinte, que era o que acontecia no
   telemovel.
   -------------------------------------------------------------------------- */
.microprova span { white-space: nowrap; }
/* o ponto vai preso ao item que o precede, e nunca ao que se lhe segue: caso
   contrario, ao quebrar a linha, ele ficava sozinho a abrir a linha de baixo */
.microprova span:not(:last-child)::after {
  content: '';
  display: inline-block;
  width: 3px; height: 3px; border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
  margin: 0 .2rem 0 .55rem;
  opacity: .55;
}