/* RC Global Insurance | estilo do site novo
   Feito primeiro para o celular (360 px); o computador é a adaptação.
   Tema "Céu de Orlando": as cores do logo e uma única família de letra, criada para leitura fácil.
   Tokens em três camadas (valor, função, componente). Seções numeradas como no guia mobile first. */

/* ---------- 1. Fonte (servida pelo próprio site; licença em assets/fonts/LICENCA-OFL.txt) ---------- */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2");
}

/* ---------- 2. Tokens: valores ---------- */
:root {
  --azul-900: #022C4A;
  --azul-700: #034E80;
  --azul-100: #E6F0F7;
  --azul-050: #F3F8FB;
  --limao-500: #A0D904;
  --limao-hover: #AEE51A;
  --limao-800: #5E8200;
  --limao-100: #EAF8C4;
  --cinza-700: #44546A;
  --cinza-300: #C9D8E5;
  --branco: #FFFFFF;
  --amarelo-100: #FFF3C4;
  --amarelo-900: #5C4500;

  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-5: 24px;
  --espaco-6: 32px;
  --espaco-7: 48px;
  --espaco-8: 64px;
  --espaco-9: 96px;

  --letra: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;
  --tamanho-texto: 1.1875rem;   /* 19 px */
  --tamanho-pequeno: 1rem;
  --tamanho-mini: 0.875rem;
  --tamanho-titulo: clamp(2.375rem, 1.3rem + 4.4vw, 4.5rem);
  --tamanho-titulo-2: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  --tamanho-titulo-3: 1.375rem;

  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);
  --tempo-toque: 120ms;
}

/* ---------- 3. Tokens: função ---------- */
:root {
  --cor-texto: var(--azul-900);
  --cor-apoio: var(--cinza-700);
  --cor-fundo: var(--branco);
  --cor-painel: var(--azul-100);
  --cor-painel-leve: var(--azul-050);
  --cor-marca: var(--azul-700);
  --cor-acao: var(--limao-500);
  --cor-acao-borda: var(--limao-800);
  --cor-sinal: var(--limao-500);
  --cor-linha: var(--cinza-300);
  --cor-foco: var(--azul-700);
}

/* ---------- 4. Tokens: componentes ---------- */
:root {
  --largura: 1180px;
  --margem: clamp(20px, 5vw, 56px);
  --botao-altura: 60px;
  --botao-raio: 14px;
  --bolha-raio: 22px;
  --cartao-raio: 20px;
  --barra-altura: 84px;
}

/* ---------- 5. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
  margin: 0;
  font-family: var(--letra);
  font-size: var(--tamanho-texto);
  line-height: 1.5;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  padding-bottom: var(--barra-altura);
}
@media (min-width: 900px) { body { padding-bottom: 0; } }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--cor-marca); text-underline-offset: 4px; }
p { margin: 0; }
h1, h2, h3 { margin: 0; line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: var(--tamanho-titulo-2); font-weight: 800; text-wrap: balance; }
h3 { font-size: var(--tamanho-titulo-3); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 3px; border-radius: 6px; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pular {
  position: absolute; left: var(--espaco-4); top: -100px; z-index: 50;
  background: var(--azul-900); color: var(--branco);
  padding: var(--espaco-3) var(--espaco-4); border-radius: 10px;
}
.pular:focus { top: var(--espaco-4); }

.envelope { max-width: var(--largura); margin: 0 auto; padding-inline: var(--margem); }
.secao { padding-block: var(--espaco-8); }
@media (min-width: 900px) { .secao { padding-block: var(--espaco-9); } }
.secao-titulo { max-width: 22ch; }
h2 + .secao-intro { margin-top: var(--espaco-4); }
.respostas + p { margin-top: var(--espaco-5); }
.secao-intro { max-width: 46ch; color: var(--cor-apoio); }

/* ---------- 6. Átomos ---------- */

/* Botão principal: limão com texto escuro (8,5:1), borda de baixo mais escura, afunda no toque */
.botao-principal {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espaco-3);
  min-height: var(--botao-altura);
  padding: var(--espaco-4) var(--espaco-5);
  font: inherit; font-weight: 800; line-height: 1.2; text-align: center;
  color: var(--azul-900); background: var(--cor-acao);
  border: 0; border-radius: var(--botao-raio);
  box-shadow: 0 4px 0 var(--cor-acao-borda);
  text-decoration: none; cursor: pointer;
  transition: transform var(--tempo-toque) ease, box-shadow var(--tempo-toque) ease, background-color var(--tempo-toque) ease;
}
.botao-principal:hover { background: var(--limao-hover); }
.botao-principal:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--cor-acao-borda); }
.botao-principal svg { width: 26px; height: 26px; flex: none; }

/* Botão de contorno (segunda opção) */
.botao-contorno {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espaco-2);
  min-height: 52px; padding: var(--espaco-2) var(--espaco-5);
  font: inherit; font-size: var(--tamanho-pequeno); font-weight: 800;
  color: var(--cor-texto); background: transparent;
  border: 2px solid currentColor; border-radius: var(--botao-raio);
  text-decoration: none; cursor: pointer;
}
.botao-contorno:hover { background: var(--cor-painel-leve); }
.botao-contorno svg { width: 20px; height: 20px; flex: none; }

.link-forte {
  display: inline-flex; align-items: center; min-height: 48px;
  font-weight: 800; color: var(--cor-texto);
  text-decoration-thickness: 2px; text-underline-offset: 5px;
}

/* Botão de pausa da frase que muda (WCAG 2.2.2), alvo de 44 px */
.pausa {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; margin-top: var(--espaco-1); padding: 0 var(--espaco-3) 0 var(--espaco-1);
  font: inherit; font-size: var(--tamanho-mini); font-weight: 700;
  color: var(--cor-apoio); background: transparent; border: 0; border-radius: 999px; cursor: pointer;
}
.pausa:hover { color: var(--cor-texto); }
.pausa svg { width: 18px; height: 18px; }
.pausa svg[hidden], .pausa[hidden] { display: none; }

/* Marca de pendência: some quando o dado for confirmado */
.a-confirmar {
  display: inline-block;
  background: var(--amarelo-100); color: var(--amarelo-900);
  border-radius: 4px; padding: 0 6px;
  font-size: 0.8125rem; font-weight: 700; line-height: 1.6;
}

/* Visto das listas */
.visto {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--cor-acao); color: var(--azul-900);
}
.visto svg { width: 16px; height: 16px; }

/* ---------- 7. Moléculas ---------- */

/* Bolha do cliente: a dor dita do jeito que a pessoa diria, como uma mensagem enviada no WhatsApp */
.bolha {
  position: relative;
  width: fit-content;
  max-width: min(30ch, 88%);
  padding: 10px 16px 12px;
  font-size: 1.0625rem; line-height: 1.4;
  border-radius: var(--bolha-raio);
}
.bolha-cliente {
  margin-left: auto;
  background: var(--limao-100);
  border-bottom-right-radius: 6px;
  color: var(--azul-900);
}
.bolha-rc {
  background: var(--branco);
  border: 1px solid var(--cor-linha);
  border-bottom-left-radius: 6px;
}
.bolha-rc b { display: block; font-size: var(--tamanho-mini); color: var(--cor-marca); }

/* Frase que muda (só na página inicial, decisão do Gian em 14/10/2026).
   Cada palavra fica parada 4,5 s; a troca é um esmaecer de 700 ms, quase sem movimento.
   As opções ocupam a mesma célula da grade e a maior reserva o espaço: a linha nunca pula. */
.troca { display: inline-grid; position: relative; isolation: isolate; }
.troca > span {
  grid-area: 1 / 1;
  opacity: 0; transform: translateY(0.12em);
  transition: opacity 700ms ease-in-out, transform 700ms var(--curva);
}
.troca > span.ativa { opacity: 1; transform: none; }
.troca::after {
  content: ""; position: absolute; left: -0.06em; right: -0.06em; bottom: 0.08em;
  height: 0.2em; background: var(--cor-sinal); border-radius: 3px; z-index: -1;
}

/* Aviso obrigatório (benefício limitado, Medicare, idioma) */
.aviso {
  padding: var(--espaco-4) var(--espaco-5);
  font-size: var(--tamanho-pequeno); line-height: 1.5;
  background: var(--cor-painel-leve);
  border-left: 4px solid var(--cor-marca);
  border-radius: 0 12px 12px 0;
}
.aviso strong { display: block; margin-bottom: var(--espaco-1); }
.aviso p + p { margin-top: var(--espaco-2); }
.aviso [lang="en"] { color: var(--cor-apoio); }

/* Lista de vistos */
.lista-vistos { display: grid; gap: var(--espaco-4); }
.lista-vistos li { display: flex; gap: var(--espaco-3); align-items: flex-start; }
.lista-vistos .visto { margin-top: 1px; }

/* ---------- 8. Faixa de construção (sai quando o site for publicado) ---------- */
.faixa-construcao {
  margin: 0;
  background: var(--amarelo-100); color: var(--amarelo-900);
  font-size: var(--tamanho-mini); font-weight: 700; line-height: 1.4;
  text-align: center; padding: var(--espaco-2) var(--margem);
}
.em-moldura .faixa-construcao { display: none; }

/* ---------- 9. Cabeçalho ---------- */
.cabecalho { position: relative; z-index: 30; background: var(--cor-fundo); }
.cabecalho .envelope {
  display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-4);
  min-height: 60px;
}
.logo { display: inline-flex; align-items: center; min-height: 48px; }
.logo img { height: 28px; width: auto; }
@media (min-width: 900px) {
  .cabecalho .envelope { min-height: 84px; }
  .logo img { height: 36px; }
}

/* Menu do celular: abre sem script (details) */
.menu { position: relative; }
.menu > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--espaco-2);
  min-height: 48px; padding: 0 var(--espaco-3);
  font-weight: 800; font-size: var(--tamanho-pequeno);
  border: 2px solid var(--cor-linha); border-radius: 999px;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary svg { width: 20px; height: 20px; }
.menu[open] > summary { border-color: var(--cor-texto); }
.menu-lista {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: min(320px, calc(100vw - 2 * var(--margem)));
  background: var(--branco);
  border: 1px solid var(--cor-linha); border-radius: 16px;
  box-shadow: 0 16px 40px rgba(2, 44, 74, 0.18);
  padding: var(--espaco-2);
}
.menu-lista a {
  display: flex; align-items: center; min-height: 52px; padding: 0 var(--espaco-4);
  color: var(--cor-texto); font-weight: 700; text-decoration: none; border-radius: 10px;
}
.menu-lista a:hover, .menu-lista a[aria-current="page"] { background: var(--cor-painel); }
.menu-lista .menu-ligar { color: var(--cor-marca); }

.nav-computador, .cabecalho .botao-contorno { display: none; }
@media (min-width: 900px) {
  .menu { display: none; }
  .nav-computador { display: flex; gap: var(--espaco-1); margin-left: auto; }
  .nav-computador a {
    display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--espaco-3);
    color: var(--cor-texto); font-weight: 700; font-size: var(--tamanho-pequeno);
    text-decoration: none; border-radius: 10px;
  }
  .nav-computador a:hover { background: var(--cor-painel-leve); }
  .nav-computador a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--cor-sinal); border-radius: 0; }
  .cabecalho .botao-contorno { display: inline-flex; }
}

/* ---------- 10. Topo das páginas ---------- */
.topo { padding-block: var(--espaco-3) var(--espaco-7); }
.topo .envelope { display: grid; gap: var(--espaco-6); }
.topo .bolha-cliente { margin-bottom: var(--espaco-4); }
.topo h1 {
  font-size: var(--tamanho-titulo); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em;
  max-width: 13ch; text-wrap: balance;
}
.topo h1 .linha { display: block; }
.topo .sub { margin-top: var(--espaco-4); max-width: 34ch; font-size: 1.25rem; color: var(--cor-apoio); }
.topo .aviso { margin-top: var(--espaco-4); max-width: 46ch; }
.acoes { margin-top: var(--espaco-5); display: grid; gap: var(--espaco-3); justify-items: stretch; max-width: 460px; }
.acoes .botao-principal { width: 100%; }
.apoio-botao {
  display: flex; gap: var(--espaco-2); align-items: flex-start;
  font-size: var(--tamanho-pequeno); color: var(--cor-apoio); line-height: 1.4;
}
.apoio-botao svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--cor-marca); }
.acoes .link-forte { justify-self: start; }

/* Conversa ao lado do título (só no computador) */
.conversa { display: none; }
@media (min-width: 900px) {
  .topo { padding-block: var(--espaco-6) var(--espaco-8); }
  .topo .envelope { grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: var(--espaco-8); }
  .conversa {
    display: block; position: relative;
    padding: var(--espaco-7) var(--espaco-6);
  }
  .conversa .arco {
    position: absolute; inset: 50% auto auto 50%;
    width: 520px; height: 520px; transform: translate(-50%, -50%); z-index: -1;
  }
  .conversa .arco .disco { fill: var(--cor-painel); }
  .conversa .arco .traco { fill: none; stroke: var(--cor-sinal); stroke-width: 16; stroke-linecap: round; }
  .conversa-cartao {
    background: var(--branco); border-radius: 26px;
    box-shadow: 0 24px 60px rgba(2, 44, 74, 0.16);
    padding: var(--espaco-5); display: grid; gap: var(--espaco-3);
    max-width: 400px; margin-inline: auto;
  }
  .conversa-quem {
    display: flex; align-items: center; gap: var(--espaco-3);
    padding-bottom: var(--espaco-3); border-bottom: 1px solid var(--cor-linha);
    font-size: var(--tamanho-pequeno); font-weight: 800;
  }
  .conversa-quem img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: var(--cor-painel); }
  .conversa-quem small { display: block; font-weight: 400; color: var(--cor-apoio); font-size: var(--tamanho-mini); }
  .conversa .bolha { font-size: var(--tamanho-pequeno); }
  .atalhos { display: flex; flex-wrap: wrap; gap: var(--espaco-2); padding-top: var(--espaco-1); }
  .atalhos a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--espaco-4);
    font-size: var(--tamanho-pequeno); font-weight: 700; text-decoration: none;
    color: var(--cor-marca); border: 2px solid var(--cor-painel); border-radius: 999px;
  }
  .atalhos a:hover { background: var(--cor-painel); }
}

/* Topo das páginas de produto no computador: o símbolo do produto dentro do arco do "C" do logo */
.topo-produto .selo-produto { display: none; }
@media (min-width: 900px) {
  .topo-produto .selo-produto {
    display: grid; place-items: center; justify-self: center;
    width: 400px; height: 400px; position: relative;
  }
  .selo-produto .arco { position: absolute; inset: 0; width: 100%; height: 100%; }
  .selo-produto .arco .disco { fill: var(--cor-painel); }
  .selo-produto .arco .traco { fill: none; stroke: var(--cor-sinal); stroke-width: 22; stroke-linecap: round; }
  .selo-produto .icone { position: relative; width: 150px; height: 150px; color: var(--cor-marca); }
}
.nota-construcao { margin-bottom: var(--espaco-4); }

/* ---------- 11. As portas (lista no jeito de uma lista de conversas) ---------- */
.portas { border-top: 1px solid var(--cor-linha); margin-top: var(--espaco-5); }
.porta {
  display: grid; grid-template-columns: 56px 1fr 24px; gap: var(--espaco-4); align-items: center;
  min-height: 88px; padding: var(--espaco-4) var(--espaco-2);
  color: var(--cor-texto); text-decoration: none;
  border-bottom: 1px solid var(--cor-linha);
  transition: background-color var(--tempo-toque) ease;
}
.porta:hover { background: var(--cor-painel-leve); }
.porta-icone {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cor-painel); color: var(--cor-marca);
}
.porta-icone svg { width: 28px; height: 28px; }
.porta-nome { display: block; font-weight: 800; font-size: 1.25rem; line-height: 1.25; }
.porta-dor { display: block; margin-top: 2px; color: var(--cor-apoio); font-size: var(--tamanho-pequeno); line-height: 1.4; }
.porta-seta { width: 24px; height: 24px; color: var(--cor-marca); transition: transform var(--tempo-toque) ease; }
.porta:hover .porta-seta { transform: translateX(3px); }
@media (min-width: 900px) {
  .portas-grade { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--espaco-8); align-items: start; }
  .portas-grade .portas { margin-top: 0; }
}

/* ---------- 12. Época do ano (prazos oficiais, com dias contados pela data de hoje) ---------- */
.temporada { background: var(--cor-painel-leve); }
.epocas { display: grid; gap: var(--espaco-4); margin-top: var(--espaco-6); }
.epoca {
  display: grid; grid-template-columns: 76px 1fr; gap: var(--espaco-4); align-items: start;
  padding: var(--espaco-5); background: var(--branco);
  border: 1px solid var(--cor-linha); border-radius: var(--cartao-raio);
}
.epoca[hidden] { display: none; }
.folhinha {
  display: grid; justify-items: center; align-content: center;
  width: 76px; height: 84px; border-radius: 14px;
  background: var(--azul-900); color: var(--branco); line-height: 1;
}
.folhinha b { font-size: 2.125rem; font-weight: 800; }
.folhinha small { margin-top: 4px; font-size: var(--tamanho-mini); font-weight: 700; color: var(--limao-100); }
.epoca h3 { font-size: 1.25rem; }
.epoca p { margin-top: var(--espaco-2); color: var(--cor-apoio); font-size: var(--tamanho-pequeno); }
.epoca .contagem { color: var(--cor-texto); font-weight: 800; }
.epoca .link-forte { margin-top: var(--espaco-1); }
@media (min-width: 900px) { .epocas { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 13. Por que a RC e a fundadora ---------- */
.motivos { display: grid; gap: var(--espaco-5); margin-top: var(--espaco-6); }
.motivo { display: flex; gap: var(--espaco-4); align-items: flex-start; }
.motivo p { color: var(--cor-apoio); font-size: var(--tamanho-pequeno); margin-top: var(--espaco-1); }
.motivo .visto { width: 36px; height: 36px; }
.motivo .visto svg { width: 20px; height: 20px; }

.fundadora {
  margin-top: var(--espaco-7);
  display: grid; gap: var(--espaco-5); align-items: center;
  padding: var(--espaco-5); border-radius: 26px; background: var(--cor-painel);
}
.fundadora-foto { position: relative; width: 168px; height: 168px; }
.fundadora-foto .disco { position: absolute; inset: 0; border-radius: 50%; background: var(--branco); }
.fundadora-foto img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover; object-position: 50% 14%;
}
.fundadora-foto svg { position: absolute; inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); overflow: visible; }
.fundadora-foto svg path { fill: none; stroke: var(--cor-sinal); stroke-width: 9; stroke-linecap: round; }
.fundadora p { font-size: var(--tamanho-pequeno); color: var(--cor-apoio); }
.fundadora p + p { margin-top: var(--espaco-2); }
.fundadora .fundadora-frase { font-size: 1.25rem; color: var(--cor-texto); font-weight: 700; line-height: 1.35; }
@media (min-width: 900px) {
  .motivos { grid-template-columns: repeat(3, 1fr); gap: var(--espaco-6); }
  .fundadora { grid-template-columns: 200px 1fr; gap: var(--espaco-7); padding: var(--espaco-6) var(--espaco-7); }
  .fundadora-foto { width: 200px; height: 200px; }
}

/* ---------- 14. Como funciona (uma sequência de verdade, por isso numerada) ---------- */
.passos { display: grid; gap: var(--espaco-5); margin-top: var(--espaco-6); counter-reset: passo; }
.passo { display: grid; grid-template-columns: 48px 1fr; gap: var(--espaco-4); align-items: start; }
.passo::before {
  counter-increment: passo; content: counter(passo);
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800; font-size: 1.25rem;
  background: var(--azul-900); color: var(--branco);
}
.passo p { margin-top: var(--espaco-1); color: var(--cor-apoio); font-size: var(--tamanho-pequeno); }
@media (min-width: 900px) { .passos { grid-template-columns: repeat(3, 1fr); gap: var(--espaco-6); } }

/* ---------- 15. Respostas rápidas ---------- */
.respostas { margin-top: var(--espaco-5); border-top: 1px solid var(--cor-linha); max-width: 760px; }
.resposta { border-bottom: 1px solid var(--cor-linha); }
.resposta summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: var(--espaco-4);
  min-height: 64px; padding: var(--espaco-3) 0;
  font-weight: 800; font-size: 1.125rem; line-height: 1.3;
}
.resposta summary::-webkit-details-marker { display: none; }
.resposta summary svg { width: 24px; height: 24px; flex: none; color: var(--cor-marca); transition: transform 200ms var(--curva); }
.resposta[open] summary svg { transform: rotate(45deg); }
.resposta p { padding: 0 0 var(--espaco-5); color: var(--cor-apoio); max-width: 60ch; }

/* ---------- 16. A verdade, a objeção e o que saber (páginas de produto) ---------- */
.verdade { background: var(--azul-900); color: var(--branco); }
.verdade h2 { max-width: 20ch; }
.verdade h2 em { font-style: normal; box-shadow: inset 0 -0.18em 0 var(--limao-500); color: var(--branco); }
.verdade p { margin-top: var(--espaco-5); max-width: 46ch; color: var(--azul-100); }
.verdade .solucao {
  margin-top: var(--espaco-6); padding-top: var(--espaco-5);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--branco); font-size: 1.25rem; font-weight: 700; line-height: 1.4; max-width: 40ch;
}

.saber { display: grid; gap: var(--espaco-4); margin-top: var(--espaco-6); max-width: 760px; }
.saber li {
  display: flex; gap: var(--espaco-4); align-items: flex-start;
  padding: var(--espaco-5); background: var(--cor-painel-leve); border-radius: var(--cartao-raio);
}
.saber strong { display: block; line-height: 1.3; }
.saber span.explica { display: block; margin-top: var(--espaco-1); color: var(--cor-apoio); font-size: var(--tamanho-pequeno); }

.objecao { display: grid; gap: var(--espaco-3); margin-top: var(--espaco-6); max-width: 560px; }
.objecao .bolha { max-width: 34ch; }
.objecao .bolha-cliente { margin-left: auto; }

/* ---------- 17. Chamada final e formulário ---------- */
.chamada { background: var(--cor-painel); }
.chamada-grade { display: grid; gap: var(--espaco-7); }
.chamada h2 { max-width: 16ch; }
.chamada .secao-intro { color: var(--cor-apoio); }
.chamada .acoes { margin-top: var(--espaco-5); }
.contatos { display: flex; flex-wrap: wrap; gap: var(--espaco-3); }

.formulario {
  background: var(--branco); border-radius: 24px; padding: var(--espaco-5);
  box-shadow: 0 16px 40px rgba(2, 44, 74, 0.12);
}
.formulario h3 { font-size: 1.5rem; }
.formulario > p { margin-top: var(--espaco-2); color: var(--cor-apoio); font-size: var(--tamanho-pequeno); }
.campo { display: grid; gap: var(--espaco-2); margin-top: var(--espaco-4); }
.campo label { font-weight: 800; font-size: var(--tamanho-pequeno); }
.campo input, .campo select {
  width: 100%; min-height: 54px; padding: var(--espaco-3) var(--espaco-4);
  font: inherit; font-size: 1.125rem; color: var(--cor-texto);
  background: var(--branco); border: 2px solid var(--cor-linha); border-radius: 12px;
}
.campo input:focus, .campo select:focus { border-color: var(--cor-marca); outline: 3px solid var(--azul-100); outline-offset: 0; }
.campo [aria-invalid="true"] { border-color: #B42318; }
.campo-erro { color: #B42318; font-size: var(--tamanho-mini); font-weight: 700; }
.campo-erro:empty { display: none; }
.consentimento { display: flex; gap: var(--espaco-3); align-items: flex-start; margin-top: var(--espaco-5); font-size: var(--tamanho-mini); line-height: 1.45; color: var(--cor-apoio); }
.consentimento input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--azul-700); }
.formulario .botao-principal { width: 100%; margin-top: var(--espaco-5); }
.nota-medicare { margin-top: var(--espaco-3); font-size: var(--tamanho-mini); color: var(--cor-apoio); }
.nota-medicare[hidden] { display: none; }
.form-ok { text-align: left; }
.form-ok[hidden] { display: none; }
.form-ok h3 { margin-top: var(--espaco-3); }
.form-ok p { margin-top: var(--espaco-2); color: var(--cor-apoio); font-size: var(--tamanho-pequeno); }
@media (min-width: 900px) {
  .chamada-grade { grid-template-columns: 1fr 440px; align-items: start; gap: var(--espaco-8); }
  .formulario { padding: var(--espaco-6); }
}

/* ---------- 18. Páginas relacionadas ---------- */
.relacionadas .portas { max-width: 760px; }

/* ---------- 19. Rodapé ---------- */
.rodape { background: var(--azul-900); color: var(--azul-100); padding-block: var(--espaco-8) var(--espaco-6); font-size: var(--tamanho-pequeno); }
.rodape a { color: var(--branco); }
.rodape-topo { display: grid; gap: var(--espaco-6); }
.rodape .logo img { height: 34px; }
.rodape h2 { font-size: var(--tamanho-pequeno); font-weight: 800; color: var(--branco); letter-spacing: 0; margin-bottom: var(--espaco-3); }
.rodape li + li { margin-top: var(--espaco-2); }
.rodape li a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: none; }
.rodape li a:hover { text-decoration: underline; }
.rodape-legal { margin-top: var(--espaco-7); padding-top: var(--espaco-5); border-top: 1px solid rgba(255, 255, 255, 0.18); display: grid; gap: var(--espaco-4); font-size: var(--tamanho-mini); line-height: 1.55; color: #C6D7E5; }
.rodape-legal strong { color: var(--branco); }
.rodape-legal [lang="en"] { color: #A9C0D3; }
@media (min-width: 900px) {
  .rodape-topo { grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: var(--espaco-7); }
}

/* ---------- 20. Barra fixa do celular ---------- */
.barra-fixa {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: var(--espaco-3) var(--margem) calc(var(--espaco-3) + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--cor-linha);
}
.barra-fixa .botao-principal { width: 100%; min-height: 56px; padding-block: var(--espaco-3); }
/* com script, a barra entra só depois que o botão do topo sai da tela, e sai com o teclado aberto */
.barra-por-rolagem .barra-fixa { transform: translateY(115%); transition: transform 250ms var(--curva); }
.barra-por-rolagem.barra-visivel .barra-fixa { transform: none; }
.barra-por-rolagem.teclado-aberto .barra-fixa { transform: translateY(115%); }
@media (min-width: 900px) { .barra-fixa { display: none; } }

/* ---------- 21. Tela pequena (320 px) e menos movimento ---------- */
@media (max-width: 359px) {
  :root { --margem: 16px; }
  .porta { grid-template-columns: 48px 1fr 20px; gap: var(--espaco-3); }
  .porta-icone { width: 48px; height: 48px; }
  .epoca { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---------- 22. Páginas de texto (privacidade) ---------- */
.texto-legal { max-width: 760px; }
.texto-legal h1 { font-size: var(--tamanho-titulo-2); font-weight: 800; }
.texto-legal h2 { font-size: var(--tamanho-titulo-3); margin-top: var(--espaco-6); margin-bottom: var(--espaco-3); }
.texto-legal h1 + p { margin-top: var(--espaco-4); color: var(--cor-apoio); }
.texto-legal .lista-vistos li { display: list-item; list-style: disc; margin-left: 1.2em; }
.sem-quebra { white-space: nowrap; }
@media (min-width: 900px) {
  main > .envelope > .aviso { margin-top: var(--espaco-3); font-size: var(--tamanho-mini); padding: var(--espaco-3) var(--espaco-4); }
}

/* ---------- 23. Seletor de idioma (bandeira + lista, no desenho do site da VYA) ----------
   O gatilho mostra só a bandeira do idioma atual; a lista abre com bandeira e nome.
   Um seletor só, sempre na barra: no celular ele fica entre o logo e o menu. */
.sprite-bandeiras { position: absolute; width: 0; height: 0; overflow: hidden; }
.idioma { position: relative; margin-left: auto; }
.idioma-gatilho {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 44px; padding: 0 10px 0 9px;
  background: var(--branco); color: var(--cor-apoio); cursor: pointer;
  border: 2px solid var(--cor-linha); border-radius: 999px;
  transition: color var(--tempo-toque) ease, border-color var(--tempo-toque) ease;
}
.idioma-gatilho:hover { color: var(--cor-texto); border-color: var(--cor-marca); }
.idioma-bandeira { width: 24px; height: 24px; flex: none; border-radius: 50%; display: block; box-shadow: 0 0 0 1px rgba(2, 44, 74, 0.12); }
.idioma-seta { width: 14px; height: 14px; transition: transform 250ms var(--curva); }
.idioma.aberto .idioma-seta { transform: rotate(180deg); }
.idioma-lista {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  min-width: 220px; padding: 6px;
  background: var(--branco); border: 1px solid var(--cor-linha); border-radius: 16px;
  box-shadow: 0 24px 50px -18px rgba(2, 44, 74, 0.45);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 200ms var(--curva), transform 200ms var(--curva), visibility 200ms;
}
.idioma.aberto .idioma-lista { opacity: 1; visibility: visible; transform: none; }
.idioma-opcao {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px;
  padding: 8px 12px; border: 0; border-radius: 10px; background: none; cursor: pointer;
  font: inherit; font-size: var(--tamanho-pequeno); color: var(--cor-texto); text-align: left;
}
.idioma-opcao:hover { background: var(--cor-painel-leve); }
.idioma-opcao.ativo { background: var(--cor-painel); font-weight: 800; }
.cabecalho .envelope { gap: var(--espaco-3); }
.cabecalho .menu { flex: none; }
@media (min-width: 900px) {
  .idioma { margin-left: 0; }
  .nav-computador { margin-left: auto; }
}
/* tela estreita: o menu mostra só o ícone, para caberem logo, bandeira e menu */
@media (max-width: 399px) {
  .menu-rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menu > summary { padding: 0; width: 48px; justify-content: center; }
  .logo img { height: 26px; }
}
/* enquanto a tradução não entra, a página fica escondida (no máximo 1,5 s), para não piscar em português */
.i18n-pendente body { visibility: hidden; }