/* RC Global Insurance | página de teste da nova cara (15/10/2026, sexta versão)
   A ideia visual: a mesa de trabalho da RC. Objetos de papel que a pessoa reconhece: a estante de
   porta-retratos, a pasta de arquivo da família, o resumo do plano, a conta do hospital, o celular,
   o caderno de espiral do Padrão RC, a foto presa com clipe, o jornal.
   Regra de cor (sétima versão): página branca com painéis areia, céu e marinho. O botão principal é
   azul da marca com a bolinha limão; as palavras em destaque são verdes com o traço azul.
   Fundo escuro no interruptor. Feito primeiro para o celular. Arquivo próprio: não mexe no site. */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/assets/fonts/fraunces-latin.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300 900; font-display: swap; src: url("/assets/fonts/fraunces-italico-latin.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2"); }
/* a letra de mão das anotações da Rosangela (Caveat, licença aberta OFL) */
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("/assets/fonts/caveat-latin.woff2") format("woff2"); }

/* ---------- 1. Cores: claro (padrão) e escuro ---------- */
:root {
  --fundo: #FBFAF7; --fundo-2: #F2F4F1; --cartao: #FFFFFF; --cartao-2: #EEF3F7;
  --linha: #E3E7E0; --linha-forte: #C5CCC2; --texto: #0B2A44; --apoio: #4E5F70;
  --limao: #A0D904; --limao-hover: #B2EA14; --limao-escuro: #7FB000;
  --azul: #034E80; --azul-marca: #034E80; --azul-fundo: #E6F0F7; --sobre-limao: #0B2A44; --tinta: #1F4FA8;
  --kraft: #EBD3A4; --kraft-2: #DDBF8A; --kraft-texto: #6B4E1E;
  --sombra: 0 24px 60px rgba(11, 42, 68, 0.14); --sombra-leve: 0 8px 24px rgba(11, 42, 68, 0.08);
  --serifa: "Fraunces", Georgia, serif; --letra: "Atkinson Hyperlegible Next", system-ui, sans-serif; --mao: "Caveat", "Bradley Hand", cursive;
  --zap-letra: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --tamanho: 1.1875rem; --pequeno: 1rem; --mini: 0.875rem;
  --titulo-1: clamp(2.5rem, 1.2rem + 5.2vw, 5rem); --titulo-2: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1); --largura: 1180px; --margem: clamp(20px, 5vw, 56px); --raio: 24px; --barra-altura: 88px; --topo-altura: 64px;
}
[data-tema="escuro"] {
  --fundo: #07111C; --fundo-2: #0B1826; --cartao: #10243A; --cartao-2: #173049;
  --linha: rgba(255, 255, 255, 0.10); --linha-forte: rgba(255, 255, 255, 0.22); --texto: #F4F7FA; --apoio: #A9B8C7;
  --limao-escuro: #6B9400; --azul: #4DA3EC; --azul-fundo: rgba(77, 163, 236, 0.14);
  --sombra: 0 24px 60px rgba(0, 0, 0, 0.45); --sombra-leve: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.acess-contraste { --fundo: #FFF; --fundo-2: #FFF; --cartao: #FFF; --cartao-2: #EEE; --texto: #000; --apoio: #111; --linha: #000; --linha-forte: #000; --azul: #003C66; }
.acess-contraste[data-tema="escuro"] { --fundo: #000; --fundo-2: #000; --cartao: #0A0A0A; --cartao-2: #141414; --texto: #FFF; --apoio: #E6EDF3; --linha: rgba(255,255,255,0.4); --limao: #C6FF2E; --azul: #8CC8FF; }
@media (min-width: 1024px) { :root { --topo-altura: 84px; } }

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--fundo); scroll-behavior: smooth; }
.acess-texto-maior { font-size: 112.5%; }
.acess-linhas body { line-height: 1.8; }
.acess-links a { text-decoration: underline; text-decoration-color: var(--azul); text-decoration-thickness: 2px; }
.acess-sem-movimento *, .acess-sem-movimento *::before, .acess-sem-movimento *::after { transition: none !important; animation: none !important; }
.acess-sem-imagens img { visibility: hidden; }
body { margin: 0; font-family: var(--letra); font-size: var(--tamanho); line-height: 1.5; color: var(--texto); background: var(--fundo); padding-bottom: var(--barra-altura); transition: background-color 300ms ease, color 300ms ease; overflow-x: clip; }
@media (min-width: 900px) { body { padding-bottom: 0; } }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); text-underline-offset: 4px; }
p { margin: 0; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
h2 { font-family: var(--serifa); font-weight: 500; font-size: var(--titulo-2); line-height: 1.08; letter-spacing: -0.015em; font-variation-settings: "opsz" 120; max-width: 20ch; }
h3 { font-size: 1.25rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 6px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.envelope { max-width: var(--largura); margin: 0 auto; padding-inline: var(--margem); }
.secao { padding-block: 64px; }
@media (min-width: 900px) { .secao { padding-block: 104px; } }
.secao-sub { margin-top: 16px; max-width: 46ch; color: var(--apoio); }
.pular { position: absolute; left: 16px; top: -100px; z-index: 200; background: var(--azul-marca); color: #FFF; padding: 12px 16px; border-radius: 10px; font-weight: 800; }
.pular:focus { top: 16px; }
.faixa-teste { margin: 0; text-align: center; font-size: var(--mini); font-weight: 700; padding: 6px var(--margem); background: #FFF3C4; color: #5C4500; }
.a-confirmar { padding: 1px 6px; border-radius: 6px; background: #FFF3C4; color: #5C4500; font-weight: 700; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
[data-tema="escuro"] img[data-logo-claro], [data-tema="claro"] img[data-logo-escuro] { display: none; }
/* a palavra em itálico com o traço à mão (só onde a palavra carrega a ideia) */
.destaque { position: relative; display: inline-block; white-space: nowrap; }
.junto { white-space: nowrap; }
.destaque em { font-style: italic; font-weight: 500; }
.traco { position: absolute; left: -2%; right: -2%; bottom: -0.08em; width: 104%; height: 0.28em; overflow: visible; }
.traco path { fill: none; stroke: var(--azul); stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .traco path { stroke-dashoffset: 1; }
.js .destaque.desenha .traco path { animation: desenhar 700ms var(--curva) forwards; }
.js .destaque.desenha .traco path:first-child { animation-delay: 400ms; stroke-width: 3.2; }
.js .destaque.desenha .traco path:last-child { animation-delay: 750ms; }
@keyframes desenhar { to { stroke-dashoffset: 0; } }

/* ---------- 3. Botões ----------
   .botao-principal: o único verde-limão da página. Duas linhas que dizem o que acontece. */
.botao-principal { display: inline-grid; grid-template-columns: 44px minmax(0, 1fr) 22px; align-items: center; column-gap: 14px; min-height: 72px; padding: 12px 18px 12px 14px; border-radius: 18px; background: var(--limao); color: #0B2A44; text-decoration: none; text-align: left; box-shadow: 0 5px 0 var(--limao-escuro), 0 20px 34px -16px rgba(96, 140, 0, 0.75); transition: transform 120ms ease, box-shadow 120ms ease, background-color 160ms ease; -webkit-tap-highlight-color: transparent; }
.botao-principal:hover { background: var(--limao-hover); }
.botao-principal:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--limao-escuro), 0 8px 16px -10px rgba(96, 140, 0, 0.6); }
.bp-icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: #0B2A44; color: #FFFFFF; }
.bp-icone svg { width: 25px; height: 25px; }
.bp-textos { display: grid; line-height: 1.15; min-width: 0; }
.bp-textos b { font-size: 1.1875rem; font-weight: 800; letter-spacing: -0.01em; }
.bp-textos small { margin-top: 3px; font-size: 0.875rem; font-weight: 600; color: rgba(11, 42, 68, 0.78); }
.bp-seta { width: 22px; height: 22px; transition: transform 160ms var(--curva); }
.botao-principal:hover .bp-seta { transform: translateX(3px); }
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 22px; font-weight: 800; font-size: var(--pequeno); line-height: 1.2; text-align: center; color: var(--sobre-limao); background: var(--limao); border: 0; border-radius: 14px; box-shadow: 0 4px 0 var(--limao-escuro); text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease, border-color 120ms ease; }
.botao:hover { background: var(--limao-hover); }
.botao:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--limao-escuro); }
.botao svg { width: 22px; height: 22px; flex: none; }
.botao-grande { min-height: 60px; padding: 16px 26px; font-size: var(--tamanho); border-radius: 16px; }
.botao-linha { background: transparent; color: var(--texto); box-shadow: none; border: 2px solid color-mix(in srgb, var(--texto) 34%, transparent); }
.botao-linha:hover { background: var(--cartao-2); border-color: var(--texto); }
.botao-linha:active { transform: none; box-shadow: none; }
.botao-escuro { background: #0B2A44; color: #FFFFFF; box-shadow: none; }
.botao-escuro:hover { background: #163E61; }
.botao-escuro:active { transform: translateY(1px); box-shadow: none; }
[data-tema="escuro"] .botao-escuro { background: #F4F7FA; color: #07111C; }
.botao-mini { min-height: 44px; padding: 8px 16px; font-size: var(--mini); border-radius: 12px; }
.link-forte { display: inline-flex; align-items: center; min-height: 48px; margin-top: 20px; padding: 0; background: none; border: 0; cursor: pointer; font-weight: 800; color: var(--texto); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--azul); }
.link-simples { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; text-decoration: none; font: inherit; }
.link-simples:hover { text-decoration: underline; }

/* ---------- 4. Barra do topo e o aviso do Jornal ---------- */
.topo-barra { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--fundo) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.topo-barra .envelope { display: flex; align-items: center; gap: 10px; min-height: 64px; }
.logo { display: inline-flex; align-items: center; min-height: 48px; margin-right: auto; }
.logo img { height: 28px; width: auto; }
.nav-desk, .botao-topo-desk { display: none; }
.menu-botao { display: inline-grid; place-items: center; gap: 4px; width: 48px; height: 48px; background: var(--cartao); border: 2px solid var(--linha-forte); border-radius: 999px; cursor: pointer; }
.menu-botao span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
@media (min-width: 1024px) {
  .topo-barra .envelope { min-height: 84px; gap: 14px; }
  .logo img { height: 36px; }
  .logo { margin-right: 0; }
  .nav-desk { display: flex; gap: 2px; margin-left: 20px; margin-right: auto; }
  .nav-desk button, .nav-desk a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; background: none; border: 0; border-radius: 10px; cursor: pointer; color: var(--texto); font-weight: 700; font-size: var(--pequeno); text-decoration: none; }
  .nav-desk button::after, .nav-desk a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--azul); transform: scaleX(0); transform-origin: left; transition: transform 200ms var(--curva); }
  .nav-desk button:hover::after, .nav-desk a:hover::after { transform: scaleX(1); }
  .botao-topo-desk { display: inline-flex; min-height: 48px; padding: 10px 18px; }
  .menu-botao { display: none; }
}
.aviso-jornal { background: #0B2A44; color: #FFFFFF; font-size: var(--mini); }
.aviso-jornal[hidden] { display: none; }
.aviso-jornal .envelope { display: flex; align-items: center; gap: 12px; min-height: 46px; padding-block: 6px; }
.aviso-jornal > .envelope > svg { width: 22px; height: 22px; flex: none; }
.aviso-jornal p { flex: 1; line-height: 1.35; }
.aviso-jornal a { color: #FFFFFF; font-weight: 800; }
.aviso-jornal button { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #FFF; font-size: 22px; line-height: 1; cursor: pointer; }
.aviso-jornal button:hover { background: rgba(255, 255, 255, 0.24); }

.idioma { position: relative; }
.idioma-gatilho { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 8px 0 7px; background: var(--cartao); color: var(--apoio); border: 2px solid var(--linha-forte); border-radius: 999px; cursor: pointer; }
.idioma-gatilho:hover { color: var(--texto); border-color: var(--texto); }
.idioma-bandeira { width: 24px; height: 24px; border-radius: 50%; flex: none; }
.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(--cartao); border: 1px solid var(--linha); border-radius: 16px; box-shadow: var(--sombra); 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; background: none; border: 0; border-radius: 10px; cursor: pointer; text-align: left; font-size: var(--pequeno); }
.idioma-opcao:hover { background: var(--cartao-2); }
.idioma-opcao.ativo { background: var(--azul-fundo); font-weight: 800; }
.tema { position: relative; display: inline-flex; align-items: center; justify-content: space-between; width: 62px; height: 34px; padding: 0 7px; background: var(--cartao); border: 2px solid var(--linha-forte); border-radius: 999px; cursor: pointer; }
.tema-ico { width: 16px; height: 16px; color: var(--apoio); display: inline-flex; position: relative; z-index: 1; }
.tema-ico svg { width: 16px; height: 16px; }
.tema-bolinha { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--azul-marca); transition: transform 250ms var(--curva); }
[data-tema="escuro"] .tema-bolinha { transform: translateX(28px); background: var(--azul); }
[data-tema="claro"] .tema-sol { color: #FFFFFF; }
[data-tema="escuro"] .tema-lua { color: #07111C; }

/* ---------- 5. Gavetas ---------- */
.gaveta-fundo { position: fixed; inset: 0; z-index: 90; background: rgba(11, 42, 68, 0.5); opacity: 0; transition: opacity 250ms ease; }
.gaveta-fundo.visivel { opacity: 1; }
.gaveta { position: fixed; top: 0; right: 0; bottom: 0; z-index: 100; width: min(400px, 92vw); overflow-y: auto; background: var(--fundo); border-left: 1px solid var(--linha); box-shadow: var(--sombra); padding: 20px 24px 32px; transform: translateX(100%); transition: transform 320ms var(--curva); }
.gaveta.aberta { transform: none; }
.gaveta-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; margin-bottom: 12px; }
.gaveta-cabeca strong { font-family: var(--serifa); font-weight: 500; font-size: 1.5rem; }
.gaveta-fechar { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--linha-forte); background: transparent; font-size: 26px; line-height: 1; cursor: pointer; }
.gaveta-lista li + li { border-top: 1px solid var(--linha); }
.gaveta-lista button, .gaveta-lista a { display: grid; grid-template-columns: 32px 1fr; column-gap: 14px; align-items: center; width: 100%; min-height: 64px; padding: 12px 0; background: none; border: 0; cursor: pointer; text-align: left; color: var(--texto); font-weight: 800; font-size: 1.125rem; text-decoration: none; }
.gaveta-lista svg { width: 28px; height: 28px; color: var(--azul); grid-row: span 2; }
.gaveta-lista small { display: block; font-weight: 400; font-size: var(--mini); color: var(--apoio); }
.gaveta-acoes { display: grid; gap: 12px; margin-top: 20px; }
.gaveta-acoes .botao, .gaveta-acoes .botao-principal { width: 100%; }
.gaveta-nota, .gaveta-texto { margin-top: 16px; font-size: var(--mini); color: var(--apoio); }
.gaveta-texto { margin: 0 0 16px; }

/* ---------- 6. Abertura: o slogan, a estante e a pasta ---------- */
.abertura { padding-block: 8px 56px; }
.abertura-grade { display: grid; gap: 28px; }
.abertura-texto { padding-top: 18px; }
h1 { font-family: var(--serifa); font-weight: 450; font-size: var(--titulo-1); line-height: 1.02; letter-spacing: -0.02em; font-variation-settings: "opsz" 144; max-width: 12ch; }
.abertura-sub { margin-top: 18px; max-width: 32ch; font-size: 1.25rem; color: var(--apoio); }
@media (min-width: 1000px) {
  .abertura { padding-block: 28px 96px; }
  .abertura-grade { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); grid-template-rows: auto auto; column-gap: 56px; row-gap: 36px; align-items: start; }
  .abertura-texto { grid-column: 1; grid-row: 1; padding-top: 8px; }
  .estante-bloco { grid-column: 2; grid-row: 1 / span 2; }
  .pasta-bloco { grid-column: 1; grid-row: 2; }
  h1 { font-size: clamp(3rem, 1.2rem + 3.4vw, 4.5rem); }
}

/* a estante de porta-retratos */
.estante-pergunta { font-family: var(--serifa); font-weight: 500; font-size: 1.75rem; line-height: 1.1; }
.estante-dica { margin-top: 8px; max-width: 42ch; font-size: var(--pequeno); color: var(--apoio); }
.estante { --vao: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--vao); row-gap: 26px; margin-top: 22px; padding: 12px 10px 0; }
@media (min-width: 640px) { .estante { --vao: 24px; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 30px; } }
.porta, .estante-vaso { display: grid; grid-template-rows: 1fr auto auto; justify-items: center; padding: 0; background: none; border: 0; color: var(--texto); -webkit-tap-highlight-color: transparent; }
.porta { cursor: pointer; }
.porta:focus-visible { outline: none; }
.porta:focus-visible .porta-moldura { outline: 3px solid var(--azul); outline-offset: 6px; }
.porta-moldura { position: relative; z-index: 1; align-self: end; width: 74%; aspect-ratio: 4 / 5; margin-bottom: -3px; padding: 8%; border-radius: 2px; transform: rotate(var(--giro, 0deg)); transform-origin: 50% 100%; transition: transform 320ms var(--curva);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 0 rgba(0, 0, 0, 0.16), inset 1px 0 0 rgba(255, 255, 255, 0.25), 0 2px 2px rgba(11, 42, 68, 0.16), 5px 10px 16px -6px rgba(11, 42, 68, 0.38); }
.porta-moldura.deitada { width: 96%; aspect-ratio: 5 / 4; padding: 6.5%; }
.porta:hover .porta-moldura { transform: rotate(0deg) translateY(-4px); }
.porta[aria-pressed="true"] .porta-moldura { transform: rotate(0deg); }
.moldura-carvalho { background: repeating-linear-gradient(91deg, rgba(92, 56, 24, 0.12) 0 1px, transparent 1px 6px, rgba(92, 56, 24, 0.07) 6px 8px, transparent 8px 13px), linear-gradient(135deg, #D2A779, #AC7C50 42%, #C9996A 68%, #9C6D44); }
.moldura-branca { background: linear-gradient(135deg, #FFFFFF, #F2F0EB 58%, #E2DFD8); }
.moldura-dourada { background: linear-gradient(135deg, #EBD9A0, #BB9842 38%, #F0E0AE 58%, #A6832F); }
.moldura-preta { background: linear-gradient(135deg, #4B5158, #1F2328 52%, #3B4148); }
.porta-foto { position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; background: #F7F3EA; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07), inset 0 3px 7px rgba(0, 0, 0, 0.16); }
.porta-foto::before { content: ""; position: absolute; inset: 9%; background: #EDE8DD; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); transition: background 600ms ease; }
.porta-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(122deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.32) 31%, rgba(255, 255, 255, 0.08) 44%, rgba(255, 255, 255, 0) 45%); pointer-events: none; }
.porta-foto svg { position: relative; width: 80%; height: 80%; fill: none; stroke: #D3CABA; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 300ms ease; }
.foto-pessego { --foto: radial-gradient(120% 90% at 30% 15%, #FFEBD6, #F4D0AB 55%, #E4B58A); }
.foto-ceu { --foto: linear-gradient(180deg, #DCEBF7, #C2D9EC 58%, #EBDCC4 59%, #E2CDAD); }
.foto-jardim { --foto: linear-gradient(180deg, #E5F0F7 0 46%, #D2E5C5 47%, #B9D4A7); }
.foto-antiga { --foto: radial-gradient(110% 90% at 50% 30%, #F5E9D2, #E4CFA8 70%, #CFB689); }
.foto-praia { --foto: linear-gradient(180deg, #D2E8F6 0 50%, #A3CFE5 51% 62%, #EFDBB6 63%); }
.foto-areia { --foto: linear-gradient(160deg, #F1E8DA, #DECEB5); }
.foto-tarde { --foto: linear-gradient(180deg, #FBD9B0, #F6C6A0 55%, #CFE0B8 56%, #B9D4A7); }
.porta[aria-pressed="true"] .porta-foto::before { background: var(--foto); }
.porta[aria-pressed="true"] .porta-foto svg { stroke: #0B2A44; }
.porta[aria-pressed="true"] .porta-foto path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: desenhar 900ms var(--curva) forwards; }
.porta[aria-pressed="true"] .porta-foto path:nth-child(2) { animation-delay: 110ms; }
.porta[aria-pressed="true"] .porta-foto path:nth-child(3) { animation-delay: 220ms; }
.porta[aria-pressed="true"] .porta-foto path:nth-child(4) { animation-delay: 330ms; }
.porta[aria-pressed="true"] .porta-foto path:nth-child(5) { animation-delay: 440ms; }
.porta[aria-pressed="true"] .porta-foto path:nth-child(6) { animation-delay: 550ms; }
.porta-visto { position: absolute; top: -11px; right: -11px; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--azul-marca); color: #FFFFFF; box-shadow: 0 4px 10px rgba(3, 78, 128, 0.35); transform: scale(0); transition: transform 240ms var(--curva); }
.porta-visto svg { width: 16px; height: 16px; }
.porta[aria-pressed="true"] .porta-visto { transform: scale(1); }
/* a prateleira: as tábuas encostam umas nas outras e viram uma só */
.porta-tabua { justify-self: stretch; height: 14px; margin-inline: calc(var(--vao) / -2); background: linear-gradient(180deg, #DDBD94 0 4px, #C69C6E 4px, #A97F53); box-shadow: 0 10px 12px -8px rgba(11, 42, 68, 0.45); }
.porta-nome { min-height: 2.4em; margin-top: 12px; font-weight: 800; font-size: 1rem; line-height: 1.2; text-align: center; transition: color 200ms ease; }
.porta[aria-pressed="true"] .porta-nome { color: var(--azul); }
.estante-vaso svg { align-self: end; width: 46%; margin-bottom: -2px; }
.estante-vaso::after { content: ""; min-height: 2.4rem; margin-top: 12px; }

/* a ficha de proteção: uma folha como a que a RC preenche na consulta. Só aparece depois do primeiro toque */
.ficha-bloco { display: grid; gap: 14px; animation: entrar 420ms var(--curva); }
.ficha-bloco[hidden] { display: none; }
.abertura.com-ficha .abertura-acao { display: none; }
.ficha { position: relative; padding: 22px 20px 18px; border-radius: 3px; background-color: #FFFEF9; color: #1E2A36; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 18px 34px -16px rgba(11, 42, 68, 0.4);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.42 0 0 0 0 0.36 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ficha .clipe { top: -16px; left: 18px; }
.ficha-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 2px solid #1E2A36; }
.ficha-topo img { height: 20px; width: auto; }
.ficha-topo p { display: grid; text-align: right; line-height: 1.2; }
.ficha-topo b { font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; }
.ficha-topo span { font-size: 0.75rem; color: #6B7682; }
.ficha-frase { margin-top: 14px; font-family: var(--serifa); font-weight: 500; font-size: 1.25rem; line-height: 1.2; text-wrap: balance; }
.ficha-tabela { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 0.9375rem; }
.ficha-tabela th { padding: 4px 0 6px; border-bottom: 1px solid #1E2A36; text-align: left; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #5B6673; }
.ficha-tabela td { padding: 8px 0; border-bottom: 1px dashed rgba(30, 42, 54, 0.25); vertical-align: top; }
.ficha-tabela td:first-child { width: 36%; padding-right: 10px; font-family: var(--mao); font-weight: 600; font-size: 1.35rem; line-height: 1; color: var(--tinta); }
.ficha-tabela tr { animation: entrar 300ms var(--curva); }
.ficha-oque small { display: block; margin-top: 2px; font-size: 0.8125rem; line-height: 1.3; color: #6B7682; }
.ficha-obs { margin-top: 10px; font-size: 0.8125rem; color: #6B7682; }
.pr-rotulo { font-weight: 800; font-size: var(--mini); color: var(--apoio); }
.ficha-bloco .botao-principal { width: 100%; }
.status { display: flex; align-items: flex-start; gap: 10px; max-width: 40ch; font-size: var(--mini); line-height: 1.4; color: var(--apoio); }
.status b { color: var(--texto); }
.status-ponto { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: #12B76A; animation: pulsar 2.4s infinite; }
.status.fechado .status-ponto { background: #98A2B3; animation: none; }
@keyframes pulsar { 0% { box-shadow: 0 0 0 0 rgba(18, 183, 106, 0.45); } 70% { box-shadow: 0 0 0 8px rgba(18, 183, 106, 0); } 100% { box-shadow: 0 0 0 0 rgba(18, 183, 106, 0); } }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } }
.zap-mini { --zap-sai: #D9FDD3; --zap-texto: #111B21; --zap-hora: #667781; display: flex; flex-direction: column; min-height: 80px; padding: 14px 14px 12px 12px; border-radius: 14px; background: #EFEAE2 url("fundo-conversa.svg") repeat; background-size: 240px; font-family: var(--zap-letra); }
[data-tema="escuro"] .zap-mini { --zap-sai: #005C4B; --zap-texto: #E9EDEF; --zap-hora: #8696A0; background-color: #0B141A; background-image: url("fundo-conversa-escuro.svg"); }
.zap-mini .zap-msg { max-width: 92%; margin-top: auto; }
.abertura-acao { display: grid; justify-items: start; gap: 14px; margin-top: 28px; }
.abertura-acao .botao-principal { width: 100%; max-width: 380px; }

/* ---------- 7. Faixa de prova e o letreiro do Jornal ---------- */
.prova { border-block: 1px solid var(--linha); }
.prova-faixa { display: grid; grid-template-columns: 1fr 1fr; }
.prova-item { display: grid; align-content: center; gap: 3px; padding: 18px 14px 18px 0; color: var(--texto); text-decoration: none; }
.prova-item:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--linha); }
.prova-item:nth-child(-n+2) { border-bottom: 1px solid var(--linha); }
.prova-item b { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-family: var(--serifa); font-weight: 500; font-size: 1.5rem; line-height: 1.1; }
.prova-item > span { font-size: var(--mini); line-height: 1.3; color: var(--apoio); }
.prova-google .estrelas svg { width: 15px; height: 15px; }
.prova-google:hover > span { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) {
  .prova-faixa { grid-template-columns: repeat(4, 1fr); }
  .prova-item, .prova-item:nth-child(even) { padding: 26px 28px; border-bottom: 0; border-left: 1px solid var(--linha); }
  .prova-item:first-child { padding-left: 0; border-left: 0; }
  .prova-item b { font-size: 1.75rem; }
}
/* o letreiro do Jornal, como o painel da bolsa: passa sozinho, para com o mouse ou pelo botão */
.letreiro { --letreiro-fundo: #0B1B2B; display: flex; align-items: stretch; height: 54px; background: var(--letreiro-fundo); color: #FFFFFF; border-block: 1px solid rgba(255, 255, 255, 0.08); }
.letreiro-nome { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 16px 0 var(--margem); background: #FFFFFF; color: #0B2A44; text-decoration: none; font-family: var(--serifa); font-weight: 600; font-size: 1.125rem; white-space: nowrap; }
.letreiro-nome svg { width: 20px; height: 20px; }
.letreiro-nome small { margin-left: 6px; padding: 3px 7px; border-radius: 4px; background: #0B2A44; color: #FFFFFF; font-family: var(--letra); font-size: 0.625rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.letreiro-nome small::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--limao); vertical-align: 1px; animation: pulsar-lim 1.6s infinite; }
@keyframes pulsar-lim { 50% { opacity: 0.35; } }
.letreiro-janela { flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent); }
.letreiro-trilho { display: flex; height: 100%; width: max-content; }
.letreiro-trilho.anda { animation: letreiro var(--dur, 60s) linear infinite; }
.letreiro:hover .letreiro-trilho, .letreiro-trilho.parado { animation-play-state: paused; }
@keyframes letreiro { to { transform: translateX(-50%); } }
.letreiro-grupo { display: flex; align-items: center; height: 100%; }
.letreiro-item { display: inline-flex; align-items: center; gap: 10px; padding: 0 28px; border-right: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.875rem; font-weight: 600; white-space: nowrap; line-height: 1; }
.letreiro-item b { padding: 4px 7px; border-radius: 4px; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(255, 255, 255, 0.1); color: #C9D6E2; }
.letreiro-prazo b { background: var(--limao); color: #0B2A44; }
.letreiro-oficial b { background: #1F4FA8; color: #FFFFFF; }
.letreiro-pausa { flex: none; width: 48px; border: 0; border-left: 1px solid rgba(255, 255, 255, 0.14); background: transparent; color: #C9D6E2; font-size: 0.75rem; cursor: pointer; }
.letreiro-pausa:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.06); }
@media (max-width: 599px) { .letreiro-nome { padding-right: 12px; font-size: 1rem; } .letreiro-nome small { display: none; } .letreiro-item { padding: 0 18px; } }

/* ---------- 8. A virada: dois botões, o papel e a conversa ---------- */
.virada-grade { display: grid; gap: 36px; }
.virada { position: relative; max-width: 520px; width: 100%; margin-inline: auto; }
.virada-abas { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 5px; background: var(--cartao); border: 1px solid var(--linha); border-radius: 999px; isolation: isolate; box-shadow: var(--sombra-leve); }
.virada-aba { position: relative; z-index: 1; min-height: 52px; padding: 0 10px; background: none; border: 0; border-radius: 999px; cursor: pointer; font-weight: 800; font-size: var(--pequeno); color: var(--apoio); transition: color 200ms ease; }
.virada-aba.ativa { color: #FFFFFF; }
.virada-marca { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); background: #0B2A44; border-radius: 999px; transition: transform 340ms var(--curva); }
[data-tema="escuro"] .virada-marca { background: var(--azul); }
.virada[data-lado="recebe"] .virada-marca { transform: translateX(100%); }
.virada-lado { margin-top: 20px; animation: entrar 360ms var(--curva); }
.virada-lado[hidden] { display: none; }
.virada-legenda { margin-top: 16px; font-size: var(--pequeno); color: var(--apoio); text-align: center; text-wrap: balance; }
.virada-legenda strong { color: var(--texto); }
@media (min-width: 900px) { .virada-grade { grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; } .virada-aba { min-height: 56px; } }
/* a mesa onde o papel e a conta estão */
.mesa { position: relative; padding: 24px 18px 30px; border-radius: 22px; overflow: hidden; background-color: #C7CED6;
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 46%, rgba(0, 0, 0, 0.12)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.24 0 0 0 0 0.3 0 0 0 0.10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  box-shadow: var(--sombra), 0 0 0 1px var(--linha); }
[data-tema="escuro"] .mesa { background-color: #3A434D; }
.mesa-papel { position: relative; z-index: 0; width: 88%; padding: 10px 8px 14px; transform: rotate(-1.6deg); }
.virada.postit-aberto .mesa-papel { z-index: 2; }
.conta-mesa { position: absolute; z-index: 1; right: 4%; bottom: 10px; width: 54%; padding: 12px 14px 14px; background: #FDFDFB; color: #2A2A2A; font-family: Arial, Helvetica, sans-serif; border-radius: 2px; transform: rotate(5deg); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.08), 0 18px 34px rgba(11, 42, 68, 0.3); }
.conta-mesa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, 0.05)); pointer-events: none; }
.cm-hospital { font-weight: 800; font-size: 0.6875rem; letter-spacing: 0.06em; color: #1F3864; }
.cm-titulo { margin-top: 1px; padding-bottom: 5px; border-bottom: 1px solid #DDD; font-size: 0.5rem; font-weight: 700; letter-spacing: 0.12em; color: #666; }
.conta-mesa .conta-linha { font-size: 0.5625rem; margin-top: 6px; }
.conta-mesa .conta-total { margin-top: 8px; padding-top: 5px; font-size: 0.75rem; }
.conta-mesa .conta-prazo { font-size: 0.5rem; }
@media (max-width: 899px) { .mesa .sbc-aviso { display: none; } }
/* a palavra difícil é um botão: marca-texto amarelo, "?" a caneta, e o post-it explica */
.termo { position: relative; display: inline; padding: 0 2px; margin: 0 -1px; border: 0; background: none; font: inherit; font-weight: 700; color: inherit; cursor: pointer; isolation: isolate; }
.termo::before { content: ""; position: absolute; inset: -1px -1px; z-index: -1; border-radius: 2px; background: linear-gradient(104deg, rgba(255, 233, 77, 0) 0.9%, rgba(255, 233, 77, 0.85) 2.4%, rgba(255, 228, 64, 0.6) 5.8%, rgba(255, 228, 64, 0.35) 93%, rgba(255, 233, 77, 0.75) 96%, rgba(255, 233, 77, 0) 98%); }
.termo::after { content: "?"; position: absolute; top: -9px; right: -7px; font: italic 600 0.875rem/1 var(--serifa); color: #C0392B; transform: rotate(12deg); }
.termo.ativo { outline: 1.6px solid #C0392B; outline-offset: 1px; border-radius: 40% 55% 45% 60%; }
.termo:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.postit { position: absolute; right: -4px; bottom: -6px; z-index: 3; width: min(220px, 64%); padding: 18px 14px 14px; background: #FFF59D; color: #3A3200; box-shadow: 0 10px 20px rgba(0,0,0,0.18), inset 0 -18px 24px -18px rgba(150, 120, 0, 0.25); transform: rotate(2.5deg); font-size: 0.875rem; line-height: 1.4; animation: colar 260ms var(--curva); }
.postit[hidden] { display: none; }
.postit b { display: block; margin-bottom: 4px; font-family: var(--serifa); font-style: italic; font-weight: 600; font-size: 1.0625rem; }
.postit-fita { position: absolute; top: -9px; left: 50%; width: 64px; height: 18px; transform: translateX(-50%) rotate(-3deg); background: rgba(255, 255, 255, 0.55); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
@keyframes colar { from { opacity: 0; transform: rotate(6deg) translateY(10px) scale(0.96); } }
/* "digitando..." e as mensagens chegando uma a uma */
.zap-digitando { align-self: flex-start; display: inline-flex; gap: 4px; margin-top: 6px; padding: 12px 14px; background: var(--zap-entra); border-radius: 8px; border-top-left-radius: 0; box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13); }
.zap-digitando[hidden] { display: none; }
.zap-digitando i { width: 7px; height: 7px; border-radius: 50%; background: #8696A0; animation: pulo 1s infinite; }
.zap-digitando i:nth-child(2) { animation-delay: 0.15s; }
.zap-digitando i:nth-child(3) { animation-delay: 0.3s; }
@keyframes pulo { 0%, 60%, 100% { transform: none; opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
.js .zap-conversa .zap-msg.espera { display: none; }
.zap-msg.chegou { animation: chegar 260ms var(--curva); }
@keyframes chegar { from { opacity: 0; transform: translateY(6px) scale(0.98); } }

/* ---------- 8b. Os seis seguros ---------- */
.seguros { background: var(--fundo-2); }
.seguros-lista { display: grid; gap: 14px; margin-top: 32px; }
.seguro { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; padding: 20px; background: var(--cartao); border: 1px solid var(--linha); border-radius: 20px; transition: box-shadow 300ms ease, border-color 300ms ease; }
.seguro > svg { width: 36px; height: 36px; color: var(--azul); grid-row: span 3; }
.seguro h3 { font-size: 1.25rem; }
.seguro p { margin-top: 6px; font-size: var(--pequeno); color: var(--apoio); }
.seguro-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-top: 6px; justify-self: start; font-weight: 800; color: var(--texto); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--azul); }
.seguro-link svg { width: 18px; height: 18px; }
.seguro.em-foco { border-color: var(--azul); box-shadow: 0 0 0 4px var(--azul-fundo), var(--sombra-leve); }
@media (min-width: 700px) { .seguros-lista { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (min-width: 1000px) { .seguros-lista { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 9. O WhatsApp de verdade: cores, balões, horário, vistos, áudio ---------- */
.zap { --zap-fundo: #EFEAE2; --zap-topo: #008069; --zap-topo-texto: #FFFFFF; --zap-sai: #D9FDD3; --zap-entra: #FFFFFF; --zap-texto: #111B21; --zap-hora: #667781; --zap-chip: #FFFFFF; --zap-chip-claro: #FFEECD; --zap-campo: #FFFFFF; --zap-baixo: #F0F2F5; --zap-verde: #00A884;
  overflow: hidden; border-radius: 22px; box-shadow: var(--sombra); border: 1px solid var(--linha); font-family: var(--zap-letra); }
[data-tema="escuro"] .zap { --zap-fundo: #0B141A; --zap-topo: #202C33; --zap-topo-texto: #E9EDEF; --zap-sai: #005C4B; --zap-entra: #202C33; --zap-texto: #E9EDEF; --zap-hora: #8696A0; --zap-chip: #182229; --zap-chip-claro: #182229; --zap-campo: #2A3942; --zap-baixo: #202C33; }
.zap-topo { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 8px; background: var(--zap-topo); color: var(--zap-topo-texto); }
.zap-voltar, .zap-icone { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.zap-icone { margin-left: 8px; opacity: 0.9; }
.zap-avatar { width: 36px; height: 36px; border-radius: 50%; background: #FFF; object-fit: cover; flex: none; }
.zap-quem { flex: 1; min-width: 0; line-height: 1.2; }
.zap-quem b { display: block; font-size: 0.9375rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zap-quem span { font-size: 0.75rem; opacity: 0.85; }
.zap-conversa { display: flex; flex-direction: column; gap: 4px; min-height: 380px; padding: 12px 12px 14px; background: var(--zap-fundo) url("fundo-conversa.svg") repeat; background-size: 240px; }
[data-tema="escuro"] .zap-conversa { background-image: url("fundo-conversa-escuro.svg"); }
.zap-chip { align-self: center; margin: 2px 0 6px; padding: 4px 10px; font-size: 0.75rem; color: var(--zap-hora); background: var(--zap-chip); border-radius: 8px; box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13); }
.zap-msg { position: relative; max-width: 82%; padding: 6px 8px 8px 9px; border-radius: 8px; font-size: 0.875rem; line-height: 1.35; color: var(--zap-texto); box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13); }
.zap-msg p { padding-right: 52px; }
.zap-msg.cliente { align-self: flex-end; background: var(--zap-sai); border-top-right-radius: 0; margin-top: 6px; }
.zap-msg.rc { align-self: flex-start; background: var(--zap-entra); border-top-left-radius: 0; margin-top: 6px; }
.zap-msg.cliente + .zap-msg.cliente, .zap-msg.rc + .zap-msg.rc { margin-top: 0; border-radius: 8px; }
.zap-msg.cliente::before, .zap-msg.rc::before { content: ""; position: absolute; top: 0; width: 8px; height: 13px; background: inherit; }
.zap-msg.cliente::before { right: -8px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.zap-msg.rc::before { left: -8px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.zap-msg.cliente + .zap-msg.cliente::before, .zap-msg.rc + .zap-msg.rc::before { display: none; }
.zap-hora { position: absolute; right: 8px; bottom: 4px; display: inline-flex; align-items: center; gap: 3px; font-size: 0.6875rem; color: var(--zap-hora); white-space: nowrap; }
.zap-check { width: 16px; height: 11px; fill: none; stroke: #53BDEB; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.zap-check-cinza { stroke: var(--zap-hora); }
.zap-com-foto { padding: 3px 3px 8px; max-width: 74%; }
.zap-com-foto p { padding: 6px 54px 0 6px; }
.conta-foto { position: relative; height: 128px; border-radius: 6px; overflow: hidden; background: radial-gradient(120% 90% at 30% 20%, #B89A78, #7D6248 70%, #5E4834); }
.conta-papel { position: absolute; left: 14%; top: 10%; width: 80%; padding: 9px 10px; background: #FBFBF8; transform: rotate(-7deg); box-shadow: 0 6px 14px rgba(0,0,0,0.35); font-family: Arial, sans-serif; color: #2A2A2A; }
.conta-papel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,0.35), rgba(255,255,255,0) 40%, rgba(0,0,0,0.06)); pointer-events: none; }
.conta-cabeca { font-size: 0.5rem; font-weight: 700; letter-spacing: 0.08em; color: #555; padding-bottom: 4px; border-bottom: 1px solid #DDD; }
.conta-linha, .conta-total { display: flex; justify-content: space-between; gap: 6px; font-size: 0.5rem; margin-top: 4px; }
.conta-total { margin-top: 6px; padding-top: 4px; border-top: 1px solid #333; font-weight: 800; font-size: 0.625rem; }
.conta-total span:last-child { color: #B71C1C; }
.conta-prazo { margin-top: 4px; font-size: 0.4375rem; color: #888; }
.zap-audio { display: grid; grid-template-columns: 44px 30px 1fr; align-items: center; gap: 8px; min-width: 250px; padding: 8px 10px 20px 8px; }
.zap-audio-avatar { position: relative; width: 42px; height: 42px; }
.zap-audio-avatar img { width: 42px; height: 42px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(11, 20, 26, 0.08); }
.zap-audio-avatar svg { position: absolute; right: -5px; bottom: -3px; width: 19px; height: 19px; padding: 2px; border-radius: 50%; background: var(--zap-entra); fill: none; stroke: var(--zap-verde); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.zap-play { width: 30px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--zap-hora); }
.zap-play svg { width: 26px; height: 26px; fill: currentColor; }
.zap-onda { display: flex; align-items: center; gap: 2px; height: 26px; }
.zap-onda i { flex: 1; min-width: 2px; border-radius: 2px; background: #B4BEC4; transition: background-color 120ms linear; }
.zap-onda i.tocado { background: var(--zap-verde); }
.zap-hora-audio { left: 92px; right: 8px; justify-content: space-between; }
.zap-escrever { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--zap-baixo); }
.zap-campo { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; background: var(--zap-campo); border-radius: 21px; color: var(--zap-hora); font-size: 0.9375rem; }
.zap-campo span { flex: 1; }
.zap-campo svg, .zap-mic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.zap-mic { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--zap-verde); color: #FFF; }
/* o resumo do plano: papel com textura, folhas atrás, clipe, marca-texto e "?" a caneta */
.folha { display: block; background-color: #FDFCF8; border-radius: 3px; box-shadow: 0 1px 1px rgba(0,0,0,0.06), 0 10px 26px rgba(11, 42, 68, 0.18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.42 0 0 0 0 0.36 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.folha-tras-1, .folha-tras-2 { position: absolute; inset: 10px 8px 14px; }
.folha-tras-2 { transform: rotate(3.2deg) translate(6px, 4px); background-color: #F6F3EC; }
.folha-tras-1 { transform: rotate(-2.2deg) translate(-4px, 2px); background-color: #FAF8F2; }
.folha-sbc { position: relative; padding: 18px 16px 12px; color: #2B2B2B; font-family: Arial, Helvetica, sans-serif; overflow: hidden; }
.clipe { position: absolute; top: -14px; left: 6px; width: 16px; height: 42px; fill: none; stroke: #9AA3AD; stroke-width: 2.4; stroke-linecap: round; filter: drop-shadow(0 1px 0 rgba(255,255,255,0.7)) drop-shadow(1px 2px 1px rgba(0,0,0,0.18)); }
.marca-agua { position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%) rotate(-24deg); font: 800 3.6rem/1 Arial, sans-serif; letter-spacing: 0.08em; color: rgba(192, 57, 43, 0.07); pointer-events: none; white-space: nowrap; }
.sbc-titulo { font-size: 0.6875rem; font-weight: 700; line-height: 1.3; color: #1F3864; padding-bottom: 6px; border-bottom: 2px solid #1F3864; }
.sbc-dados { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; margin-top: 5px; font-size: 0.5625rem; color: #444; }
.sbc-aviso { margin-top: 7px; padding: 5px 6px; font-size: 0.5625rem; line-height: 1.35; color: #333; background: #EEF2F7; border: 1px solid #C9D3E0; }
.sbc-tabela { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 0.5625rem; line-height: 1.3; }
.sbc-tabela th { text-align: left; padding: 3px 4px; background: #1F3864; color: #FFF; font-weight: 700; }
.sbc-tabela td { padding: 5px 4px; border: 1px solid #C9CED6; vertical-align: top; color: #2B2B2B; }
.sbc-tabela td:first-child { font-weight: 700; width: 36%; }
.sbc-tabela td:nth-child(2) { width: 24%; }
@media (max-width: 559px) { .sbc-tabela th:nth-child(3), .sbc-tabela td:nth-child(3) { display: none; } .sbc-tabela td:first-child { width: 48%; } .sbc-tabela td:nth-child(2) { width: auto; } }
.sbc-rodape { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 0.5rem; color: #666; }

/* ---------- 10. Um nome de confiança ---------- */
.nome { padding-block: 64px; background: #0B2A44; color: #FFFFFF; overflow: clip; }
[data-tema="escuro"] .nome { background: #061727; }
.nome-grade { display: grid; gap: 36px; }
.nome-foto { position: relative; margin: 0; max-width: 420px; }
.nome-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 10%; border-radius: 22px; background: #163E61; }
.nome-laco { position: absolute; inset: -6% -10% -4% -10%; width: 120%; height: 110%; pointer-events: none; overflow: visible; }
.nome-laco path { fill: none; stroke: #FFFFFF; stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.nome-foto.desenha .nome-laco path { animation: desenhar 1600ms var(--curva) 200ms forwards; }
.nome-foto figcaption { position: absolute; left: 16px; bottom: 16px; display: grid; padding: 10px 14px; border-radius: 12px; background: #FFFFFF; color: #0B2A44; box-shadow: var(--sombra); }
.nome-foto figcaption b { font-size: 1.0625rem; }
.nome-foto figcaption span { font-size: var(--mini); color: #4E5F70; }
.nome h2 { color: #FFFFFF; }
.nome .traco path { stroke: #FFFFFF; }
.nome-paragrafo { margin-top: 18px; max-width: 54ch; color: #C9D6E2; }
.nome-linha { position: relative; display: grid; gap: 14px; margin-top: 26px; padding-left: 0; }
.nome-linha li { display: grid; grid-template-columns: 64px 1fr; column-gap: 14px; align-items: baseline; }
.nome-linha li b { font-size: 1.0625rem; }
.nome-linha li > span:last-child { grid-column: 2; font-size: var(--mini); color: #C9D6E2; }
.nome-ano { font-family: var(--serifa); font-weight: 500; font-size: 1.25rem; color: #FFFFFF; }
.nome-ano .a-confirmar { font-family: var(--letra); font-size: 0.75rem; }
.nome-numeros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 24px; margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.nome-numeros p { display: grid; gap: 2px; }
.nome-numeros b { font-family: var(--serifa); font-weight: 500; font-size: 2.25rem; line-height: 1; }
.nome-numeros span { font-size: var(--mini); color: #C9D6E2; }
@media (min-width: 900px) {
  .nome { padding-block: 104px; }
  .nome-grade { grid-template-columns: 400px minmax(0, 1fr); gap: 72px; align-items: center; }
  .nome-numeros { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- 11. O Padrão RC: o cartão da empresa e o manual ---------- */
.padrao-grade { display: grid; gap: 48px; }
@media (min-width: 1000px) { .padrao-grade { grid-template-columns: 380px minmax(0, 1fr); gap: 48px; align-items: center; } }
.perfil-zap { max-width: 380px; margin-top: 28px; padding: 18px; background: var(--cartao); border: 1px solid var(--linha); border-radius: 20px; box-shadow: var(--sombra-leve); font-family: var(--zap-letra); }
.perfil-cabeca { display: flex; align-items: center; gap: 14px; }
.perfil-logo { width: 60px; height: 60px; padding: 9px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 1px var(--linha); object-fit: contain; }
.perfil-nome { font-size: 1.125rem; font-weight: 600; }
.perfil-tipo { font-size: var(--mini); color: var(--apoio); }
.perfil-descricao { margin-top: 14px; font-size: var(--mini); line-height: 1.45; }
.perfil-info { margin-top: 12px; }
.perfil-info li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--linha); font-size: var(--mini); line-height: 1.35; }
.perfil-info svg { width: 20px; height: 20px; flex: none; color: var(--apoio); }
.perfil-info b[data-aberto] { color: #008069; font-weight: 700; }
.perfil-info b[data-aberto].fechado { color: #B42318; }
[data-tema="escuro"] .perfil-info b[data-aberto] { color: #00A884; }
[data-tema="escuro"] .perfil-info b[data-aberto].fechado { color: #F28B82; }
.perfil-info [data-horario] { display: block; color: var(--apoio); }
.perfil-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.perfil-acoes a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border: 1px solid var(--linha); border-radius: 12px; color: #008069; font-size: var(--mini); font-weight: 600; text-decoration: none; transition: background-color 160ms ease; }
[data-tema="escuro"] .perfil-acoes a { color: #00A884; }
.perfil-acoes a:hover { background: var(--fundo-2); }
.perfil-acoes svg { width: 20px; height: 20px; }
/* o manual: capa dura, espiral, abas de papel, folhas pontilhadas e as notas à mão */
.caderno { --espiral: 30px; position: relative; width: 100%; max-width: 560px; margin-inline: auto; padding-top: 86px; }
.caderno-toque { position: absolute; z-index: 3; top: 0; right: 16px; display: flex; align-items: flex-start; gap: 6px; margin: 0; font-family: var(--mao); font-weight: 600; font-size: 1.35rem; line-height: 1; color: var(--tinta); transform: rotate(-3deg); transition: opacity 300ms ease; }
.caderno-toque svg { width: 40px; height: 28px; fill: none; stroke: var(--tinta); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(38deg); margin-top: 6px; }
.caderno.tocado .caderno-toque { opacity: 0; }
.caderno-abas { position: absolute; z-index: 1; top: 34px; left: calc(var(--espiral) + 8px); right: 0; height: 60px; display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.caderno-abas::-webkit-scrollbar { display: none; }
.aba { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 68px; padding: 0 14px 12px; border: 0; border-radius: 10px 10px 0 0; background: var(--cor-aba); color: #1E2A36; font-weight: 800; font-size: 0.875rem; white-space: nowrap; cursor: pointer; transform: translateY(10px); transition: transform 220ms var(--curva), filter 220ms ease; box-shadow: inset 0 -14px 12px -12px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.aba i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, 0.75); font-style: normal; font-size: 0.75rem; }
.aba:hover { transform: translateY(5px); }
.aba[aria-selected="true"] { transform: translateY(0); filter: saturate(1.5) brightness(0.97); }
.aba:focus-visible { outline-offset: -3px; }
.aba.cutucar { animation: cutucar 900ms var(--curva); }
@keyframes cutucar { 0%, 100% { transform: translateY(10px); } 30% { transform: translateY(-2px); } 60% { transform: translateY(6px); } }
.aba-1 { --cor-aba: #EADFC8; } .aba-2 { --cor-aba: #D6E4CF; } .aba-3 { --cor-aba: #D3E2EF; } .aba-4 { --cor-aba: #EFDAD2; } .aba-5 { --cor-aba: #E2DCEC; }
.caderno-corpo { position: relative; z-index: 2; padding-left: var(--espiral); }
.caderno-folhas { position: relative; display: grid; perspective: 2400px; perspective-origin: 0 50%; touch-action: pan-y; }
.caderno-folhas::before, .caderno-folhas::after { content: ""; grid-area: 1 / 1; border-radius: 4px 12px 12px 4px; }
.caderno-folhas::before { transform: translate(7px, 8px); background: #E9E3D6; box-shadow: 0 22px 44px rgba(11, 42, 68, 0.26); }
.caderno-folhas::after { transform: translate(3.5px, 4px); background: #F3EFE5; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
.folha-manual { grid-area: 1 / 1; position: relative; z-index: calc(10 - var(--i)); display: flex; flex-direction: column; min-height: 560px; padding: 24px 22px 18px 34px; border-radius: 4px 12px 12px 4px; color: #1E2A36; transform-origin: 0 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform 900ms cubic-bezier(0.45, 0.05, 0.55, 0.95);
  background-color: #FFFEF9;
  background-image: radial-gradient(circle at 11px 13px, #39424B 0 3.3px, transparent 3.8px), radial-gradient(circle, rgba(11, 42, 68, 0.15) 1px, transparent 1.4px);
  background-size: 22px 26px, 22px 22px; background-repeat: repeat-y, repeat; background-position: 0 6px, 11px 11px;
  box-shadow: inset 10px 0 12px -10px rgba(0, 0, 0, 0.14), 0 1px 1px rgba(0, 0, 0, 0.06); }
.folha-manual.virada { transform: rotateY(-180deg); pointer-events: none; }
.folha-manual::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(11, 42, 68, 0) 35%, rgba(11, 42, 68, 0.22)); opacity: 0; transition: opacity 450ms ease-in; pointer-events: none; }
.folha-manual.virada::after { opacity: 1; }
.fm-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(30, 42, 54, 0.14); font-size: 0.75rem; font-weight: 700; color: #6A7480; }
.fm-topo img { height: 18px; width: auto; }
.fm-titulo { margin-top: 18px; font-family: var(--serifa); font-weight: 500; font-size: 2rem; line-height: 1.05; letter-spacing: -0.01em; color: #0B2A44; }
.fm-sub { margin-top: 4px; font-size: 0.9375rem; color: #5B6673; }
.fm-lista { display: grid; gap: 14px; margin-top: 20px; }
.fm-lista li { position: relative; padding-left: 36px; font-size: 1.0625rem; line-height: 1.4; color: #1E2A36; }
.fm-lista li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border: 1.8px solid #2A3A4A; border-radius: 4px; }
.fm-lista li::after { content: ""; position: absolute; left: -3px; top: -7px; width: 30px; height: 27px; opacity: 0; transform: rotate(-4deg) scale(0.6); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 27'%3E%3Cpath d='M3.5 15.5c2.2 1.6 4.4 4.3 6.2 7.6C13.6 14 19.4 6.6 27.2 2.4' fill='none' stroke='%231F4FA8' stroke-width='3.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.folha-manual.chegou .fm-lista li::after { animation: ticar 340ms var(--curva) forwards; }
.folha-manual.chegou .fm-lista li:nth-child(1)::after { animation-delay: 420ms; }
.folha-manual.chegou .fm-lista li:nth-child(2)::after { animation-delay: 700ms; }
.folha-manual.chegou .fm-lista li:nth-child(3)::after { animation-delay: 980ms; }
.folha-manual.chegou .fm-lista li:nth-child(4)::after { animation-delay: 1260ms; }
@keyframes ticar { to { opacity: 1; transform: rotate(-4deg) scale(1); } }
.fm-nota { position: relative; align-self: flex-end; max-width: 270px; margin-top: 26px; padding-right: 4px; font-family: var(--mao); font-weight: 600; font-size: 1.6rem; line-height: 1.08; color: var(--tinta); text-align: right; transform: rotate(-2.5deg); }
.fm-seta { position: absolute; left: 2px; top: -34px; width: 40px; height: 28px; fill: none; stroke: var(--tinta); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fm-pe { display: grid; justify-items: start; margin-top: auto; padding-top: 22px; }
.fm-assinatura { font-family: var(--mao); font-weight: 700; font-size: 2.2rem; line-height: 1; color: var(--tinta); transform: rotate(-5deg); transform-origin: left bottom; }
.fm-pe span:last-child { max-width: 52%; margin-top: 6px; padding-top: 8px; border-top: 1px solid rgba(30, 42, 54, 0.22); font-size: 0.8125rem; line-height: 1.35; color: #5B6673; }
.fm-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 10px; border-top: 1px dashed rgba(30, 42, 54, 0.25); }
.fm-nav button { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: #0B2A44; font-weight: 800; font-size: 0.875rem; cursor: pointer; }
.fm-nav button svg { width: 16px; height: 16px; }
.fm-nav button:hover { background: rgba(11, 42, 68, 0.06); }
.fm-nav button:disabled { opacity: 0.4; cursor: default; }
.caderno-capa { grid-area: 1 / 1; position: relative; z-index: 20; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 40px 36px 132px 34px; border: 0; border-radius: 4px 14px 14px 4px; text-align: left; color: #FFFFFF; cursor: pointer; transform-origin: 0 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform 1000ms cubic-bezier(0.45, 0.05, 0.55, 0.95), visibility 0s linear 0s;
  background-color: #123A5C;
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.09) 0 1px, transparent 1px 3px), radial-gradient(130% 90% at 20% 0%, #1B4E77, #0E2E4A 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset -8px 0 12px -8px rgba(0, 0, 0, 0.45), 0 24px 46px rgba(11, 42, 68, 0.36); }
.caderno.aberto .caderno-capa { transform: rotateY(-180deg); visibility: hidden; pointer-events: none; transition: transform 1000ms cubic-bezier(0.45, 0.05, 0.55, 0.95), visibility 0s linear 1000ms; }
.capa-logo { width: 150px; height: auto; opacity: 0.94; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.4)); }
.capa-titulo { margin-top: auto; font-family: var(--serifa); font-weight: 500; font-size: clamp(2.6rem, 8vw, 3.5rem); line-height: 1; letter-spacing: -0.02em; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), 0 -1px 0 rgba(255, 255, 255, 0.07); }
.capa-sub { font-size: 1.0625rem; color: #C9D8E6; }
.capa-pe { margin-top: 22px; font-size: 0.8125rem; line-height: 1.45; color: #9FB3C6; }
.capa-elastico { position: absolute; top: -1px; bottom: -1px; right: 32px; width: 13px; background: linear-gradient(90deg, #05090D, #2C3640 45%, #0B1015); box-shadow: 3px 0 5px rgba(0, 0, 0, 0.35); }
.capa-abrir { position: absolute; right: 62px; top: 34px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); font-size: 0.8125rem; font-weight: 700; }
.caderno-capa:hover .capa-abrir { background: rgba(255, 255, 255, 0.24); }
.caderno-capa:focus-visible { outline: 3px solid var(--azul); outline-offset: 4px; }
.caderno-espiral { position: absolute; z-index: 30; left: 8px; top: 8px; bottom: 8px; width: 40px; pointer-events: none; filter: drop-shadow(1px 2px 1.2px rgba(0, 0, 0, 0.3));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='26' viewBox='0 0 40 26'%3E%3Cdefs%3E%3ClinearGradient id='m' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23868F98'/%3E%3Cstop offset='.45' stop-color='%23F3F5F7'/%3E%3Cstop offset='1' stop-color='%236B747D'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M34 10.5C24 3.5 6 4 4.5 13c1 7 13 9 21.5 6' fill='none' stroke='url(%23m)' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 40px 26px repeat-y; }
.polaroide { position: absolute; z-index: 31; right: -6px; bottom: 58px; width: 108px; margin: 0; padding: 7px 7px 0; background: #FFFFFF; transform: rotate(5deg); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.12), 0 16px 30px rgba(11, 42, 68, 0.3); }
.polaroide img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 12%; background: #E9EEF2; }
.polaroide figcaption { padding: 6px 2px 9px; font-family: var(--mao); font-weight: 600; font-size: 1.05rem; line-height: 1; color: #2A3440; text-align: center; }
.polaroide-clipe { position: absolute; top: -20px; left: 20px; width: 16px; height: 44px; fill: none; stroke: #9AA3AD; stroke-width: 2.4; stroke-linecap: round; transform: rotate(-8deg); filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.22)); }
.caderno-rascunho { margin-top: 52px; font-size: var(--mini); line-height: 1.6; }
@media (min-width: 1000px) {
  .caderno { max-width: none; padding-top: 0; padding-right: 150px; }
  .caderno-toque { top: 26px; right: 0; width: 150px; justify-content: center; flex-direction: column; gap: 0; }
  .caderno-toque svg { transform: rotate(60deg); margin: 2px 0 0 54px; }
  .caderno-abas { top: 96px; left: auto; right: 0; width: 176px; height: auto; display: grid; gap: 8px; overflow: visible; }
  .aba { width: 176px; height: 54px; padding: 0 8px 0 50px; border-radius: 0 10px 10px 0; transform: translateX(-12px); box-shadow: inset 14px 0 12px -12px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
  .aba:hover { transform: translateX(-6px); }
  .aba[aria-selected="true"] { transform: translateX(0); }
  @keyframes cutucar { 0%, 100% { transform: translateX(-12px); } 30% { transform: translateX(4px); } 60% { transform: translateX(-8px); } }
  .folha-manual { min-height: 600px; padding: 30px 30px 22px 44px; }
  .fm-titulo { font-size: 2.375rem; }
  .polaroide { right: -138px; bottom: 14px; width: 124px; transform: rotate(4deg); }
}

/* ---------- 12. Avaliações, do jeito que o Google mostra ---------- */
.historias { background: var(--fundo-2); }
.google-painel { display: grid; gap: 24px; margin-top: 32px; }
.google-resumo { padding: 22px; background: var(--cartao); border: 1px solid var(--linha); border-radius: 20px; box-shadow: var(--sombra-leve); font-family: var(--zap-letra); }
.google-titulo { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1rem; }
.google-titulo svg { width: 22px; height: 22px; }
.google-nota { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.google-nota b { font-size: 2.75rem; font-weight: 400; line-height: 1; color: var(--texto); }
.estrelas { display: inline-flex; gap: 2px; color: #FABB05; }
.estrelas svg { width: 18px; height: 18px; }
.google-nota .estrelas svg { width: 22px; height: 22px; }
.google-total { margin-top: 4px; font-size: var(--mini); color: var(--apoio); }
.google-barras { display: grid; gap: 6px; margin-top: 16px; }
.google-barras li { display: grid; grid-template-columns: 12px 1fr; align-items: center; gap: 10px; font-size: 0.8125rem; color: var(--apoio); }
.google-barras i { display: block; height: 8px; border-radius: 4px; background: var(--linha); overflow: hidden; }
.google-barras b { display: block; width: var(--fatia); height: 100%; background: #FABB05; }
.google-ver { width: 100%; margin-top: 18px; }
.google-lista { display: grid; gap: 14px; }
.avaliacao { padding: 20px 20px 16px; background: var(--cartao); border: 1px solid var(--linha); border-radius: 20px; box-shadow: var(--sombra-leve); font-family: var(--zap-letra); }
.avaliacao-topo { display: flex; align-items: center; gap: 12px; }
.avaliacao-inicial { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 500; font-size: 1.125rem; color: #FFFFFF; background: #5C6BC0; }
.avaliacao-nome { font-weight: 600; font-size: 0.9375rem; line-height: 1.2; }
.avaliacao-nome a { color: inherit; text-decoration: none; }
.avaliacao-autor { font-size: 0.75rem; color: var(--apoio); }
.avaliacao-estrelas { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.avaliacao-estrelas .estrelas svg { width: 15px; height: 15px; }
.avaliacao-quando { font-size: 0.75rem; color: var(--apoio); }
.avaliacao-texto { margin-top: 8px; font-size: 0.9375rem; line-height: 1.5; color: var(--texto); white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.avaliacao-texto.aberta, .avaliacao-resposta-texto.aberta { -webkit-line-clamp: unset; display: block; }
.avaliacao-mais { padding: 0; margin-top: 2px; background: none; border: 0; cursor: pointer; font-size: 0.875rem; color: var(--apoio); }
.avaliacao-mais:hover { color: var(--texto); }
.avaliacao-mais[hidden] { display: none; }
.avaliacao-resposta { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--fundo-2); }
.avaliacao-resposta-cabeca { display: flex; gap: 8px; align-items: baseline; font-size: 0.8125rem; }
.avaliacao-resposta-cabeca span { color: var(--apoio); font-size: 0.75rem; }
.avaliacao-resposta-texto { margin-top: 4px; font-size: 0.875rem; line-height: 1.45; color: var(--texto); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.historias-nota { margin-top: 18px; font-size: var(--mini); color: var(--apoio); max-width: 60ch; }
@media (min-width: 900px) {
  .google-painel { grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: start; }
  .google-resumo { position: sticky; top: calc(var(--topo-altura) + 16px); }
  .google-lista { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .avaliacao { align-self: start; }
}

/* ---------- 13. Jornal RC: a primeira página, dobrada em cima da mesa ---------- */
.jornal-dobrado { display: grid; gap: 28px; margin-top: 32px; }
.papel-jornal { --tinta-jornal: #1E2A36; display: block; position: relative; padding: 22px 22px 16px; border-radius: 3px; color: var(--tinta-jornal); text-decoration: none; background-color: #F6F2E8; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 24px 44px -18px rgba(11, 42, 68, 0.45);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.28 0 0 0 0 0.24 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.papel-jornal::after { content: ""; position: absolute; left: 0; right: 0; top: 56%; height: 1px; background: linear-gradient(90deg, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0.14)); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); pointer-events: none; }
.papel-jornal:hover { outline: 3px solid var(--azul); outline-offset: 4px; }
.pj-cabeca { padding-bottom: 8px; border-bottom: 3px double var(--tinta-jornal); text-align: center; }
.pj-nome { font-family: var(--serifa); font-weight: 600; font-size: clamp(2.25rem, 1.5rem + 3vw, 3.25rem); line-height: 1; letter-spacing: -0.02em; }
.pj-linha { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--tinta-jornal); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.pj-corpo { display: grid; gap: 18px; margin-top: 16px; }
.pj-noticias { display: grid; gap: 14px; }
.pj-noticias .noticia { padding: 0 0 12px; border-bottom: 1px solid rgba(30, 42, 54, 0.25); }
.pj-noticias .noticia:last-child { border-bottom: 0; }
.pj-noticias .noticia-titulo { font-family: var(--serifa); font-weight: 600; font-size: 1.25rem; line-height: 1.15; color: var(--tinta-jornal); }
.pj-noticias .principal .noticia-titulo { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem); }
.pj-noticias .principal .noticia-resumo::first-letter { float: left; margin: 4px 6px 0 0; font-family: var(--serifa); font-weight: 600; font-size: 3rem; line-height: 0.8; }
.pj-noticias .noticia-resumo { margin-top: 6px; font-size: 0.9375rem; line-height: 1.45; color: #3C4752; }
.pj-noticias .noticia:not(.principal) .noticia-resumo { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pj-noticias .noticia-cabeca { font-size: 0.6875rem; }
.pj-noticias .noticia-tema { background: var(--tinta-jornal); color: #F6F2E8; }
.pj-noticias .noticia-fonte { font-size: 0.75rem; font-style: italic; color: #5B6673; }
.pj-agenda { padding: 12px 12px 4px; border: 1px solid var(--tinta-jornal); }
.pj-agenda-titulo { padding-bottom: 6px; border-bottom: 1px solid var(--tinta-jornal); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; }
.pj-prazos { margin-top: 10px; gap: 0; }
.pj-prazos .prazo { grid-template-columns: 52px 1fr; gap: 10px; padding: 10px 0; background: none; border: 0; border-bottom: 1px dotted rgba(30, 42, 54, 0.35); border-radius: 0; }
.pj-prazos .prazo:last-of-type { border-bottom: 0; }
.pj-prazos .prazo h3 { font-size: 1rem; color: var(--tinta-jornal); }
.pj-prazos .prazo p { margin-top: 2px; font-size: 0.8125rem; color: #3C4752; }
.pj-prazos .folhinha { width: 52px; height: 60px; grid-template-rows: 18px 1fr; }
.pj-prazos .folhinha small { font-size: 0.5625rem; }
.pj-prazos .folhinha b { font-size: 1.375rem; }
.pj-prazos .folhinha i { bottom: 4px; font-size: 0.5rem; }
.pj-prazos .folhinha .fita-rosa { width: 20px; height: 26px; }
.pj-pe { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 8px; border-top: 1px solid var(--tinta-jornal); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
@media (min-width: 900px) {
  .jornal-dobrado { grid-template-columns: minmax(0, 1fr) 360px; gap: 36px; align-items: start; }
  .papel-jornal { padding: 28px 30px 20px; }
  .pj-corpo { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; }
  .pj-noticias { padding-right: 24px; border-right: 1px solid rgba(30, 42, 54, 0.3); }
  .papel-jornal::after { top: 50%; }
}
.noticia-cabeca { display: flex; gap: 10px; align-items: center; font-size: 0.75rem; font-weight: 700; color: var(--apoio); }
.noticia-tema { padding: 2px 8px; border-radius: 6px; background: var(--azul-fundo); color: var(--azul); }
.noticia-titulo { margin-top: 6px; font-weight: 800; font-size: 1.0625rem; line-height: 1.3; }
.noticia-titulo a { color: inherit; text-decoration: none; }
.noticia-titulo a:hover { text-decoration: underline; }
.noticia-resumo { margin-top: 4px; font-size: var(--pequeno); color: var(--apoio); }
.noticia-fonte { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 0.8125rem; color: var(--apoio); }
.noticia-oficial { font-weight: 700; }
.jornal-assinar { display: grid; gap: 12px; padding: 22px; border-radius: 20px; background: var(--cartao); border: 1px solid var(--linha); box-shadow: var(--sombra-leve); }
.jornal-assinar-texto { display: flex; gap: 12px; align-items: flex-start; font-size: var(--pequeno); color: var(--apoio); }
.jornal-assinar-texto svg { flex: none; width: 26px; height: 26px; color: var(--azul); }
.jornal-assinar-texto b { color: var(--texto); }
.jornal-assinar-campo { display: grid; gap: 10px; }
.jornal-assinar-campo[hidden], .jornal-assinar .consentimento[hidden] { display: none; }
.jornal-assinar input { width: 100%; min-height: 54px; padding: 12px 14px; font: inherit; font-size: 1.0625rem; color: var(--texto); background: var(--fundo); border: 2px solid var(--linha-forte); border-radius: 12px; }
.jornal-assinar input:focus { border-color: var(--azul); outline: none; }
.form-ok-linha { display: flex; gap: 8px; align-items: center; font-weight: 700; }
.form-ok-linha svg { width: 22px; height: 22px; color: var(--azul); }
.form-ok-linha[hidden] { display: none; }

.prazos-lista { display: grid; gap: 12px; align-content: start; }
.prazo { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; padding: 16px; background: var(--cartao); border: 1px solid var(--linha); border-radius: 18px; }
.prazo[hidden] { display: none; }
.prazo p { margin-top: 4px; font-size: var(--pequeno); color: var(--apoio); }
.prazo p:empty { display: none; }
.folhinha { position: relative; display: grid; grid-template-rows: 22px 1fr; width: 64px; height: 74px; border-radius: 8px; background: #FFF; box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 4px 10px rgba(11, 42, 68, 0.14); overflow: visible; line-height: 1; text-align: center; color: var(--texto); }
.folhinha small { order: -1; display: grid; place-items: center; border-radius: 8px 8px 0 0; background: #0B2A44; color: #FFF; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.04em; text-transform: lowercase; }
.folhinha b { display: grid; place-items: center; font-family: var(--serifa); font-size: 1.75rem; font-weight: 500; color: #0B2A44; }
.folhinha::before, .folhinha::after { content: ""; position: absolute; top: -5px; width: 6px; height: 12px; border-radius: 3px; background: linear-gradient(90deg, #8A939C, #D7DCE0, #8A939C); }
.folhinha::before { left: 16px; } .folhinha::after { right: 16px; }
.folhinha i { position: absolute; left: 0; right: 0; bottom: 6px; font-style: normal; font-size: 0.5625rem; font-weight: 700; color: #6B7682; }
.folhinha .fita-rosa { width: 26px; height: 32px; }
[data-tema="escuro"] .folhinha { background: #F4F7FA; }
.prazo-acao { grid-column: 2; justify-self: start; min-height: 42px; padding: 0 16px; background: none; border: 2px solid color-mix(in srgb, var(--texto) 30%, transparent); border-radius: 999px; font-weight: 800; font-size: var(--mini); cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease; }
.prazo-acao:hover { border-color: var(--azul); background: var(--azul-fundo); }
/* ---------- 14. Perguntas, chamada final, rodapé ---------- */
.respostas { padding-bottom: 32px; }
@media (min-width: 900px) { .respostas { padding-bottom: 48px; } }
.respostas-lista { margin-top: 24px; max-width: 760px; border-top: 1px solid var(--linha); }
.resposta { border-bottom: 1px solid var(--linha); }
.resposta summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 14px 0; font-weight: 800; font-size: 1.125rem; }
.resposta summary::-webkit-details-marker { display: none; }
.mais { position: relative; flex: none; width: 24px; height: 24px; }
.mais::before, .mais::after { content: ""; position: absolute; background: var(--azul); border-radius: 2px; transition: transform 200ms var(--curva); }
.mais::before { left: 2px; right: 2px; top: 11px; height: 2.4px; }
.mais::after { top: 2px; bottom: 2px; left: 11px; width: 2.4px; }
.resposta[open] .mais::after { transform: rotate(90deg); }
.resposta p { padding: 0 0 20px; color: var(--apoio); max-width: 60ch; }
.fim { padding-top: 32px; }
.fim-cartao { padding: 36px 24px; background: #0B2A44; color: #FFFFFF; border-radius: 28px; }
[data-tema="escuro"] .fim-cartao { background: #10243A; box-shadow: 0 0 0 1px var(--linha); }
.fim-cartao h2 { color: #FFFFFF; }
.fim-cartao .secao-sub { color: #C9D6E2; }
.fim-acoes { margin-top: 28px; display: grid; justify-items: start; gap: 12px; }
.fim-acoes .botao-principal, .fim-acoes .botao-linha { width: 100%; }
.fim-cartao .botao-linha { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.42); }
.fim-cartao .botao-linha:hover { background: rgba(255, 255, 255, 0.1); border-color: #FFFFFF; }
.fim-cartao .link-forte { margin-top: 0; color: #FFFFFF; text-decoration-color: rgba(255, 255, 255, 0.5); }
.fim-cartao .link-forte:hover { text-decoration-color: #FFFFFF; }
.status-fim { margin-top: 20px; color: #C9D6E2; }
.status-fim b { color: #FFFFFF; }
@media (min-width: 900px) {
  .fim-cartao { padding: 64px; }
  .fim-acoes { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; }
  .fim-acoes .botao-principal { width: auto; min-width: 340px; }
  .fim-acoes .botao-linha { width: auto; }
}
.qr { display: none; }
@media (min-width: 900px) {
  .fim-cartao { display: grid; grid-template-columns: 1fr auto; column-gap: 48px; align-items: center; }
  .fim-cartao > :not(.qr) { grid-column: 1; }
  .qr { display: grid; justify-items: center; gap: 12px; grid-column: 2; grid-row: 1 / span 4; width: 200px; padding: 18px 16px; background: #FFF; border-radius: 20px; color: #0B2A44; text-align: center; }
  .qr img { width: 132px; height: 132px; image-rendering: pixelated; }
  .qr p { font-size: 0.8125rem; line-height: 1.35; }
}
.rodape { padding-block: 48px 32px; font-size: var(--pequeno); color: var(--apoio); }
.rodape-grade { display: grid; gap: 28px; }
.rodape img { height: 32px; width: auto; }
.rodape p { margin-top: 14px; }
.rodape h2 { font-family: var(--letra); font-size: var(--pequeno); font-weight: 800; color: var(--texto); margin-bottom: 10px; letter-spacing: 0; }
.rodape li + li { margin-top: 6px; }
.rodape a, .rodape .link-simples { color: var(--texto); text-decoration: none; }
.rodape a:hover, .rodape .link-simples:hover { text-decoration: underline; }
.rodape-legal { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--linha); font-size: var(--mini); display: grid; gap: 10px; }
.rodape-legal p { margin: 0; max-width: 90ch; }
.rodape-sep { display: inline-block; width: 1px; height: 0.9em; margin: 0 12px; vertical-align: -1px; background: var(--linha-forte); }
@media (min-width: 900px) { .rodape-grade { grid-template-columns: 1.3fr 1fr 1fr; gap: 48px; } }

/* ---------- 15. Barra fixa, cookies, acessibilidade, formulário ---------- */
.barra-fixa { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 12px var(--margem) calc(12px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--fundo) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--linha); transform: translateY(115%); transition: transform 250ms var(--curva); }
.barra-fixa .botao-principal { width: 100%; min-height: 62px; padding-block: 8px; }
.barra-fixa .bp-icone { width: 40px; height: 40px; }
.barra-visivel .barra-fixa { transform: none; }
.gaveta-aberta .barra-fixa { transform: translateY(115%); }
@media (min-width: 900px) { .barra-fixa { display: none; } }
.cookies { position: fixed; left: 16px; right: 16px; bottom: calc(var(--barra-altura) + 8px); z-index: 45; padding: 14px 16px; background: var(--cartao); border: 1px solid var(--linha); border-radius: 18px; box-shadow: var(--sombra); font-size: var(--mini); }
.cookies[hidden] { display: none; }
.cookies p { color: var(--apoio); }
.cookies strong { color: var(--texto); }
.cookies-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
@media (min-width: 900px) { .cookies { left: 24px; right: auto; bottom: 24px; max-width: 420px; } }
.prefs { display: grid; gap: 10px; }
.prefs li { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px; background: var(--cartao); border: 1px solid var(--linha); border-radius: 14px; }
.prefs strong { display: block; }
.prefs span:not(.sempre) { display: block; font-size: var(--mini); color: var(--apoio); }
.sempre { flex: none; font-size: 0.75rem; font-weight: 800; color: var(--azul); }
.chave { position: relative; flex: none; width: 50px; height: 30px; }
.chave input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chave span { position: absolute; inset: 0; border-radius: 999px; background: var(--linha-forte); transition: background-color 200ms ease; }
.chave span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #FFF; transition: transform 200ms var(--curva); box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.chave input:checked + span { background: var(--azul-marca); }
.chave input:checked + span::after { transform: translateX(20px); }
.chave input:focus-visible + span { outline: 3px solid var(--azul); outline-offset: 3px; }
.acess-botao { position: fixed; right: 16px; bottom: calc(var(--barra-altura) + 12px); z-index: 46; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--azul-marca); color: #FFF; box-shadow: 0 10px 24px rgba(11, 42, 68, 0.3); cursor: pointer; display: grid; place-items: center; }
.acess-botao svg { width: 28px; height: 28px; }
.cookies:not([hidden]) ~ .acess-botao { bottom: calc(var(--barra-altura) + 124px); }
@media (min-width: 900px) { .acess-botao { right: 24px; bottom: 24px; } .cookies:not([hidden]) ~ .acess-botao { bottom: 24px; } }
.acess-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.acess-opcao { display: grid; gap: 6px; justify-items: start; min-height: 84px; padding: 12px; background: var(--cartao); border: 2px solid var(--linha); border-radius: 14px; cursor: pointer; text-align: left; font-size: var(--mini); font-weight: 700; line-height: 1.25; }
.acess-opcao b { font-size: 1.375rem; line-height: 1; }
.acess-opcao[aria-pressed="true"] { border-color: var(--azul); background: var(--azul-fundo); }
.gaveta-acess .botao-linha { width: 100%; }
.form { display: grid; gap: 14px; }
.form > p { color: var(--apoio); font-size: var(--pequeno); }
.form label { display: grid; gap: 6px; font-weight: 800; font-size: var(--mini); }
.form input:not([type="checkbox"]), .form select { width: 100%; min-height: 54px; padding: 12px 14px; font: inherit; font-size: 1.125rem; color: var(--texto); background: var(--cartao); border: 2px solid var(--linha-forte); border-radius: 12px; }
.form input:focus, .form select:focus { border-color: var(--azul); outline: none; }
.consentimento { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 400 !important; font-size: var(--mini); color: var(--apoio); }
.consentimento input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--azul-marca); }
.form-erro { color: #B42318; font-weight: 700; font-size: var(--mini); }
.form-erro[hidden] { display: none; }
.form .botao-grande { width: 100%; }
.form[hidden], .form-ok[hidden] { display: none; }
.form-ok { display: grid; gap: 8px; }
.form-ok svg { width: 40px; height: 40px; color: var(--azul); }
.form-ok strong { font-family: var(--serifa); font-weight: 500; font-size: 1.5rem; }
.form-ok p { color: var(--apoio); }
.nota-teste { font-size: var(--mini); font-weight: 400; color: var(--apoio); }

/* ---------- 16. A página do Jornal: um jornal de verdade ---------- */
.jornal-pagina { --tinta-jornal: #1E2A36; padding-block: 24px 64px; background-color: #F6F2E8; color: var(--tinta-jornal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.28 0 0 0 0 0.24 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
[data-tema="escuro"] .jornal-pagina { background-color: #E9E4D8; }
.jornal-pagina .envelope { max-width: 1120px; }
.jp-orelhas { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 6px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.jp-cabeca { padding: 10px 0 8px; border-top: 1px solid var(--tinta-jornal); border-bottom: 3px double var(--tinta-jornal); text-align: center; }
.jp-nome { font-family: var(--serifa); font-weight: 600; font-size: clamp(3rem, 2rem + 5vw, 5.5rem); line-height: 0.95; letter-spacing: -0.025em; }
.jp-lema { margin-top: 6px; font-family: var(--serifa); font-style: italic; font-size: 1.0625rem; color: #3C4752; }
.jp-linha { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--tinta-jornal); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.jp-colunas { display: grid; gap: 32px; margin-top: 24px; }
.jp-secao-titulo { padding-bottom: 6px; border-bottom: 2px solid var(--tinta-jornal); font-family: var(--letra); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; max-width: none; }
.jp-noticias .noticia { padding: 16px 0; border-bottom: 1px solid rgba(30, 42, 54, 0.3); }
.jp-noticias .noticia-titulo { font-family: var(--serifa); font-weight: 600; font-size: 1.625rem; line-height: 1.1; color: var(--tinta-jornal); }
.jp-noticias .principal .noticia-titulo { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
.jp-noticias .principal .noticia-resumo { font-size: 1.125rem; }
.jp-noticias .principal .noticia-resumo::first-letter { float: left; margin: 6px 8px 0 0; font-family: var(--serifa); font-weight: 600; font-size: 3.6rem; line-height: 0.8; }
.jp-noticias .noticia-resumo { color: #2F3A46; }
.jp-noticias .noticia-tema { background: var(--tinta-jornal); color: #F6F2E8; }
.jp-noticias .noticia-fonte { font-style: italic; color: #5B6673; }
.jp-noticias .noticia-fonte a { color: var(--azul-marca); font-style: normal; font-weight: 700; }
.jp-caixa { padding: 14px 16px; border: 1px solid var(--tinta-jornal); }
.jp-caixa + .jp-caixa { margin-top: 24px; }
.jp-caixa .jp-secao-titulo { text-align: center; }
.jp-caixa .prazos-lista { margin-top: 8px; gap: 0; }
.jp-caixa .prazo { grid-template-columns: 56px 1fr; gap: 12px; padding: 12px 0; background: none; border: 0; border-bottom: 1px dotted rgba(30, 42, 54, 0.35); border-radius: 0; }
.jp-caixa .prazo:last-of-type { border-bottom: 0; }
.jp-caixa .prazo h3 { font-size: 1.0625rem; color: var(--tinta-jornal); }
.jp-caixa .prazo p { font-size: 0.875rem; color: #3C4752; }
.jp-caixa .prazo-acao { border-color: var(--tinta-jornal); color: var(--tinta-jornal); }
.jp-caixa .fontes { margin-top: 10px; gap: 0; }
.jp-caixa .fonte-item { padding: 10px 0; border: 0; border-bottom: 1px dotted rgba(30, 42, 54, 0.35); border-radius: 0; background: none; }
.jp-caixa .fonte-item:last-child { border-bottom: 0; }
.jp-caixa .fonte-item a { color: var(--tinta-jornal); }
.jp-caixa .fonte-meta { color: #5B6673; }
.fontes { display: grid; gap: 8px; }
.fonte-item { display: grid; gap: 2px; font-size: var(--mini); line-height: 1.35; }
.fonte-item a { color: var(--texto); font-weight: 700; text-decoration: none; }
.fonte-item a:hover { text-decoration: underline; }
.fonte-meta { font-size: 0.75rem; color: var(--apoio); }
.explica { display: grid; gap: 0; margin-top: 8px; }
.explica li { padding: 12px 0; border-bottom: 1px dotted rgba(30, 42, 54, 0.35); }
.explica li:last-child { border-bottom: 0; }
.explica b { display: block; margin-bottom: 4px; font-family: var(--serifa); font-weight: 600; font-size: 1.125rem; }
.explica p { font-size: 0.9375rem; color: #3C4752; }
.jp-pe { display: flex; justify-content: space-between; gap: 12px; margin-top: 32px; padding-top: 8px; border-top: 1px solid var(--tinta-jornal); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.jornal-pagina .jornal-assinar { margin-top: 24px; }
.jornal-pagina .fim { padding-top: 40px; padding-bottom: 0; }
@media (min-width: 1000px) {
  .jp-colunas { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px; }
  .jp-noticias { padding-right: 40px; border-right: 1px solid rgba(30, 42, 54, 0.3); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-delay: 0ms !important; }
  html { scroll-behavior: auto; }
  .letreiro-trilho.anda { animation: none; }
}
/* ---------- 20. Sexta versão: a vida de volta ----------
   O limão volta aos traços à mão. As fotos da Rosangela viram personagens das seções. O mosaico de
   avaliações, o mapa com a placa da porta, a ficha que se escreve sozinha. */
.traco path { stroke: var(--limao); }
.nome .traco path { stroke: var(--limao); }
.nome-laco path { stroke: var(--limao); }
.js .destaque.desenha .traco path:first-child { stroke-width: 3.6; }

/* o topo: a Rosangela aponta para o slogan */
.abertura-grade { align-items: center; }
.abertura-foto { position: relative; margin: 8px auto 0; max-width: 420px; }
.abertura-foto-fundo { position: absolute; left: 6%; right: 6%; top: 10%; bottom: 0; border-radius: 28px 28px 32px 32px; background: linear-gradient(180deg, #E6F0F7, #D5E5F1); }
[data-tema="escuro"] .abertura-foto-fundo { background: linear-gradient(180deg, #10243A, #0B1826); }
.abertura-foto img { position: relative; width: 78%; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(11, 42, 68, 0.22)); }
.abertura-laco { position: absolute; inset: -4% -4% 0; width: 108%; height: 104%; pointer-events: none; overflow: visible; }
.abertura-laco path { fill: none; stroke: var(--limao); stroke-width: 6; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .abertura-foto.desenha .abertura-laco path { animation: desenhar 1700ms var(--curva) 600ms forwards; }
.etiqueta { position: absolute; left: 10%; bottom: 10%; display: grid; padding: 10px 14px; border-radius: 12px; background: #FFFFFF; color: #0B2A44; box-shadow: var(--sombra); transform: rotate(-2deg); }
.etiqueta b { font-size: 1.0625rem; }
.etiqueta span { font-size: var(--mini); color: #4E5F70; }
@media (min-width: 1000px) {
  .abertura-grade { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); grid-template-rows: auto; }
  .abertura-foto { grid-column: 2; grid-row: 1; margin: 0 0 0 auto; width: 100%; max-width: 480px; }
}

/* a seção da estante: a Rosangela apresenta */
.proteger { padding-top: 48px; }
.proteger-grade { display: grid; gap: 24px; }
.proteger-texto { position: relative; }
.proteger-foto { display: none; margin: 0; }
.proteger .estante-pergunta { font-size: var(--titulo-2); line-height: 1.08; }
.proteger .estante { margin-top: 8px; }
.proteger .ficha-bloco { margin-top: 8px; }
.proteger.com-ficha .proteger-texto .abertura-acao { display: none; }
.estante-mao { position: absolute; right: 0; bottom: -30px; display: none; align-items: flex-end; gap: 4px; margin: 0; font-family: var(--mao); font-weight: 600; font-size: 1.3rem; line-height: 1; color: var(--tinta); transform: rotate(-2deg); transition: opacity 300ms ease; }
.estante-mao svg { width: 38px; height: 26px; fill: none; stroke: var(--tinta); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 4px; }
.proteger.com-ficha .estante-mao { opacity: 0; }
@media (min-width: 1000px) {
  .proteger { padding-top: 72px; }
  .proteger-grade { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: 48px; row-gap: 32px; align-items: start; }
  .proteger-texto { grid-column: 1; grid-row: 1; }
  .proteger .estante-bloco { grid-column: 2; grid-row: 1; align-self: center; position: relative; padding-bottom: 8px; }
  .proteger .porta-moldura { width: 84%; }
  .proteger .porta-moldura.deitada { width: 100%; }
  .estante-mao { display: flex; }
  .proteger .ficha-bloco { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); column-gap: 32px; align-items: start; }
  .proteger .ficha { grid-row: 1 / span 4; }
  .proteger-texto { display: grid; align-content: space-between; min-height: 100%; }
  .proteger-foto { display: block; justify-self: start; margin: 20px 0 -8px -6%; width: 112%; max-width: 400px; }
  .proteger-foto img { width: 100%; filter: drop-shadow(0 18px 30px rgba(11, 42, 68, 0.2)); -webkit-mask-image: linear-gradient(#000 86%, transparent); mask-image: linear-gradient(#000 86%, transparent); }
}
/* a ficha: os nomes à mão se escrevem sozinhos, as linhas chegam uma por vez */
.ficha-tabela tr:nth-child(2) { animation-delay: 120ms; }
.ficha-tabela tr:nth-child(3) { animation-delay: 240ms; }
.ficha-tabela tr:nth-child(4) { animation-delay: 360ms; }
.ficha-tabela tr:nth-child(5) { animation-delay: 480ms; }
.ficha-tabela tr { animation-fill-mode: both; }
.ficha-tabela td:first-child { clip-path: inset(0 100% 0 0); animation: escrever 700ms var(--curva) 160ms forwards; }
@keyframes escrever { to { clip-path: inset(0 -4% 0 0); } }

/* a mesa: a Rosangela surpresa com o recado */
.mesa-recado { position: absolute; z-index: 2; left: 2%; bottom: 8px; width: 118px; margin: 0; display: grid; justify-items: center; gap: 6px; }
.mesa-recado img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; object-position: 50% 8%; background: #FFFFFF; box-shadow: 0 0 0 4px #FFFFFF, 0 10px 22px rgba(11, 42, 68, 0.3); }
.mesa-recado figcaption { position: relative; padding: 8px 10px; border-radius: 12px; background: #FFFFFF; color: #0B2A44; font-family: var(--zap-letra); font-size: 0.75rem; line-height: 1.3; text-align: center; box-shadow: 0 6px 16px rgba(11, 42, 68, 0.22); }
.mesa-recado figcaption::before { content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; background: #FFFFFF; transform: translateX(-50%) rotate(45deg); }
.mesa { padding-bottom: 48px; }
@media (max-width: 599px) { .mesa-recado { width: 92px; } .mesa-recado img { width: 64px; height: 64px; } .mesa-recado figcaption { font-size: 0.6875rem; } }

/* a fundadora: o texto com o bilhete à mão */
.nome-paragrafo + .nome-paragrafo { margin-top: 12px; }
.nome-paragrafo em { font-style: italic; color: #FFFFFF; }
.nome-bilhete { display: grid; gap: 2px; margin-top: 22px; font-family: var(--mao); font-weight: 600; font-size: 1.75rem; line-height: 1.05; color: var(--limao); transform: rotate(-1.5deg); }
.nome-bilhete .a-confirmar { padding: 0; background: none; color: var(--limao); }
.nome-bilhete small { font-family: var(--letra); font-size: 0.75rem; font-weight: 600; color: #9FB3C6; }

/* onde a gente está: o mapa desenhado e a placa da porta */
.onde { position: relative; display: grid; gap: 14px; max-width: 420px; margin-top: 28px; padding: 14px 14px 18px; background: var(--cartao); border: 1px solid var(--linha); border-radius: 22px; box-shadow: var(--sombra-leve); }
.mapa { position: relative; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(11, 42, 68, 0.08); }
.mapa svg { display: block; width: 100%; height: auto; }
.mapa-pino { transform-origin: 200px 182px; animation: pino 2.6s ease-in-out infinite; }
@keyframes pino { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.mapa-nota { position: absolute; right: 8px; bottom: 6px; font-size: 0.625rem; font-weight: 700; color: #8A95A0; }
.onde-endereco { display: grid; font-size: var(--pequeno); }
.onde-endereco span { font-size: var(--mini); color: var(--apoio); }
.onde-horario { font-size: var(--mini); color: var(--apoio); }
.onde-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.onde-links .link-forte { margin-top: 4px; min-height: 40px; font-size: var(--mini); }
.placa { position: absolute; top: -22px; right: 22px; display: grid; justify-items: center; transform-origin: 50% 0; animation: balancar 5s ease-in-out infinite; }
.placa-fio { width: 54px; height: 26px; border: 2px solid #8A8F96; border-bottom: 0; border-radius: 26px 26px 0 0; }
.placa-corpo { display: grid; justify-items: center; min-width: 118px; padding: 9px 14px 8px; border-radius: 6px; background: #1E2A36; color: #FFFFFF; box-shadow: 0 8px 18px rgba(11, 42, 68, 0.3), inset 0 0 0 2px rgba(255, 255, 255, 0.12); }
.placa-corpo::before, .placa-corpo::after { content: ""; position: absolute; top: 22px; width: 6px; height: 6px; border-radius: 50%; background: #C9CFD6; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4); }
.placa-corpo::before { left: calc(50% - 30px); } .placa-corpo::after { left: calc(50% + 24px); }
.placa-corpo b { font-size: 1.125rem; font-weight: 800; letter-spacing: 0.16em; color: var(--limao); }
.placa.fechada .placa-corpo b { color: #FF8A80; }
.placa-corpo small { font-size: 0.6875rem; color: #C9D6E2; }
@keyframes balancar { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
.placa.virando { animation: virar-placa 900ms var(--curva); }
@keyframes virar-placa { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } }

/* as avaliações: um mosaico, como o do Policygenius, com as cores da RC */
.mosaico { display: grid; gap: 14px; margin-top: 32px; }
.peca { position: relative; display: grid; align-content: space-between; gap: 14px; min-height: 220px; padding: 24px; border-radius: 22px; text-decoration: none; }
.peca-azul { background: #0B2A44; color: #FFFFFF; }
.peca-limao { background: var(--limao); color: #0B2A44; }
.peca-clara { background: var(--cartao); color: var(--texto); border: 1px solid var(--linha); }
.peca-azul-claro { background: #D5E5F1; color: #0B2A44; }
[data-tema="escuro"] .peca-azul-claro { background: #173049; color: #F4F7FA; }
.peca-frase { font-family: var(--serifa); font-weight: 500; font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); line-height: 1.25; text-wrap: pretty; }
.peca-frase::before { content: "\201C"; }
.peca-frase::after { content: "\201D"; }
.peca-grande .peca-frase { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem); }
.peca-quem { display: grid; gap: 2px; }
.peca-quem b { font-family: var(--serifa); font-weight: 500; font-size: 1.25rem; }
.peca-quem span { font-size: 0.75rem; font-weight: 700; }
.peca-quem .estrelas svg { width: 14px; height: 14px; }
.peca-azul .estrelas { color: #FABB05; }
.peca-ler { justify-self: start; font-size: 0.8125rem; font-weight: 800; color: inherit; opacity: 0.8; text-decoration: underline; text-underline-offset: 4px; }
.peca-nota { background: var(--cartao); color: var(--texto); border: 1px solid var(--linha); align-content: center; justify-items: center; text-align: center; gap: 6px; }
.peca-nota .peca-g { width: 44px; height: 44px; }
.peca-nota b { font-family: var(--serifa); font-weight: 500; font-size: 4.5rem; line-height: 1; }
.peca-nota .estrelas svg { width: 26px; height: 26px; }
.peca-nota-total { font-size: var(--pequeno); color: var(--apoio); }
.peca-nota-ver { display: inline-flex; align-items: center; gap: 2px; margin-top: 6px; font-weight: 800; font-size: var(--mini); color: var(--azul); }
.peca-nota-ver svg { width: 16px; height: 16px; }
.peca-foto { display: block; min-height: 340px; padding: 0; overflow: hidden; margin: 0; background: #D5E5F1; }
[data-tema="escuro"] .peca-foto { background: #173049; }
.peca-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.peca-foto figcaption { position: absolute; left: 16px; right: 16px; bottom: 16px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.92); color: #0B2A44; font-size: var(--mini); font-weight: 700; }
.peca-resposta { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.18); font-size: 0.8125rem; line-height: 1.4; opacity: 0.9; }
.peca-clara .peca-resposta, .peca-azul-claro .peca-resposta { border-top-color: rgba(11, 42, 68, 0.14); }
.peca-resposta b { display: block; font-size: 0.75rem; }
@media (min-width: 700px) {
  .mosaico { grid-template-columns: repeat(2, 1fr); }
  .peca-grande, .peca-foto, .peca-nota { grid-column: span 2; }
  .peca-foto { min-height: 380px; }
}
@media (min-width: 1000px) {
  .mosaico { grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(220px, auto); grid-auto-flow: dense; gap: 18px; }
  .peca-grande { grid-column: span 2; }
  .peca-foto { grid-column: span 2; min-height: 0; }
  .peca-nota { grid-column: span 2; }
  .mosaico.pecas-4 .peca-foto, .mosaico.pecas-5 .peca-foto { grid-row: span 2; }
}

/* ---------- 21. Sétima versão: leve, humano, com cor nos lugares certos ----------
   Como a Policygenius: página branca com painéis de cor (areia, céu, marinho) e cartões brancos dentro.
   O botão principal sai do limão: azul da marca, chapado, com o rosto da Rosangela e a bolinha limão
   da seta. As palavras em destaque ficam verdes, com o traço à mão em azul. */
:root {
  --fundo: #FFFFFF; --fundo-2: #F6F3EE; --areia: #F6F3EE; --areia-2: #EEE8DE; --ceu: #DCEAF4;
  --verde: #5A9A00; --cta: #034E80; --cta-hover: #0B2A44; --tinta-clara: #1F4FA8;
}
[data-tema="escuro"] {
  --fundo: #07111C; --fundo-2: #0E1D2C; --areia: #0E1D2C; --areia-2: #132639; --ceu: #13314B;
  --verde: #A0D904; --cta: #1F6FB2; --cta-hover: #2B82CC; --tinta-clara: #8DBEF2;
}

/* as palavras em destaque: verdes, com o traço azul */
.destaque em { color: var(--verde); font-weight: 560; }
.traco path, .nome .traco path { stroke: var(--azul-marca); }
[data-tema="escuro"] .traco path { stroke: #4DA3EC; }
.nome .destaque em { color: var(--limao); }
.nome .traco path { stroke: #7FC1F5; }

/* o botão principal: um só, chapado, com gente dentro */
.cta { display: inline-flex; align-items: center; gap: 14px; min-height: 64px; padding: 8px 10px 8px 8px; border: 0; border-radius: 14px; background: var(--cta); color: #FFFFFF; font-weight: 800; font-size: 1.125rem; line-height: 1.2; letter-spacing: -0.005em; text-decoration: none; cursor: pointer; box-shadow: 0 12px 26px -14px rgba(3, 78, 128, 0.7); transition: background-color 160ms ease, transform 120ms ease; -webkit-tap-highlight-color: transparent; }
.cta:hover { background: var(--cta-hover); }
.cta:active { transform: scale(0.985); }
.cta:focus-visible { outline: 3px solid var(--limao-escuro); outline-offset: 3px; }
.cta-rosto { position: relative; flex: none; width: 48px; height: 48px; }
.cta-rosto img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #FFFFFF; }
.cta-rosto svg { position: absolute; right: -5px; bottom: -4px; width: 21px; height: 21px; padding: 3px; border-radius: 50%; background: #25D366; color: #FFFFFF; box-shadow: 0 0 0 2px #FFFFFF; }
.cta-texto { flex: 1; min-width: 0; text-align: left; }
.cta-seta { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--limao); color: #0B2A44; transition: transform 220ms var(--curva); }
.cta-seta svg { width: 20px; height: 20px; }
.cta:hover .cta-seta { transform: translateX(4px); }
/* a seta do topo cutuca duas vezes, depois para (chama o olho sem virar pisca-pisca) */
.abertura .cta-seta { animation: chamar 900ms var(--curva) 2.6s 2; }
@keyframes chamar { 0%, 100% { transform: none; } 40% { transform: translateX(6px); } 70% { transform: translateX(-1px); } }
@media (prefers-reduced-motion: reduce) { .abertura .cta-seta { animation: none; } }
.cta.botao-topo-desk { display: none; }
.cta-topo { min-height: 48px; padding: 5px 5px 5px 18px; font-size: 1rem; gap: 12px; box-shadow: none; }
.cta-topo .cta-seta { width: 36px; height: 36px; }
@media (min-width: 1024px) { .cta.botao-topo-desk { display: inline-flex; } }
.gaveta-acoes .cta, .ficha-bloco .cta, .barra-fixa .cta { width: 100%; }
.barra-fixa .cta { min-height: 58px; padding-block: 5px; }
.barra-fixa .cta-rosto, .barra-fixa .cta-rosto img { width: 44px; height: 44px; }

/* ---------- o topo ---------- */
.saudacao { margin-bottom: 10px; font-family: var(--mao); font-weight: 600; font-size: 1.65rem; line-height: 1; color: var(--tinta-clara); transform: rotate(-2deg); transform-origin: left center; }
.abertura-sub { max-width: 36ch; }
.abertura-acao { gap: 14px; }
.cta-com-bilhete { position: relative; width: 100%; max-width: 440px; margin-top: 34px; }
.cta-com-bilhete .cta { width: 100%; }
.cta-bilhete { position: absolute; right: 6px; bottom: calc(100% + 4px); display: flex; flex-direction: row-reverse; align-items: flex-end; gap: 4px; margin: 0; font-family: var(--mao); font-weight: 600; font-size: 1.4rem; line-height: 1; color: var(--tinta-clara); transform: rotate(-3deg); pointer-events: none; white-space: nowrap; }
.cta-bilhete svg { width: 34px; height: 26px; margin-bottom: -12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.selo-google { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: var(--mini); color: var(--apoio); text-decoration: none; }
.selo-google .selo-g { width: 18px; height: 18px; }
.selo-google .estrelas svg { width: 15px; height: 15px; }
.selo-google b { color: var(--texto); }
.selo-google:hover > span:last-child { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1000px) { .abertura-acao .cta-com-bilhete { max-width: 420px; } }
/* o crachá "Olá! eu sou a": o adesivo de nome que todo mundo reconhece */
.cracha { position: absolute; left: 3%; bottom: 9%; display: grid; width: 172px; padding-bottom: 9px; overflow: hidden; border-radius: 12px; background: #FFFFFF; color: #0B2A44; text-align: center; box-shadow: 0 16px 30px -12px rgba(11, 42, 68, 0.5); transform: rotate(-5deg); }
.cracha-topo { display: block; padding: 6px 8px 7px; background: var(--azul-marca); color: #FFFFFF; font-size: 0.75rem; font-weight: 700; line-height: 1.1; }
.cracha-topo b { display: block; font-size: 1.375rem; font-weight: 800; }
.cracha-nome { display: block; padding: 8px 8px 0; font-family: var(--mao); font-weight: 700; font-size: 2.2rem; line-height: 1; color: #0B2A44; }
.cracha-pe { display: block; margin-top: 3px; font-size: 0.6875rem; font-weight: 700; color: #4E5F70; }

/* ---------- a faixa de prova, como a da Policygenius: sem caixas ---------- */
.prova { border-block: 0; padding-block: 28px 12px; }
.prova-faixa { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; text-align: center; }
.prova .prova-item { display: grid; justify-items: center; align-content: start; gap: 4px; padding: 0; border: 0; color: var(--texto); text-decoration: none; }
.prova .prova-item b { display: block; font-family: var(--serifa); font-weight: 500; font-size: 1.5rem; line-height: 1.15; }
.prova .prova-item > span:last-child { max-width: 24ch; font-size: var(--mini); line-height: 1.35; color: var(--apoio); }
.prova-marca { display: inline-flex; align-items: center; gap: 8px; min-height: 1.75rem; }
.prova-marca .selo-g { width: 24px; height: 24px; }
.prova-marca .estrelas svg { width: 18px; height: 18px; }
a.prova-item:hover > span:last-child { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) { .prova { padding-block: 44px 20px; } .prova-faixa { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- os painéis de cor ---------- */
.painel { border-radius: 28px; padding: 40px 20px; }
.painel-areia { background: var(--areia); }
@media (min-width: 900px) { .painel { padding: 64px; border-radius: 32px; } }

/* ---------- "A gente deixa o seguro fácil": os 5 passos ---------- */
.processo { padding-block: 32px 0; }
.processo-painel { text-align: center; }
.processo-painel h2 { margin-inline: auto; }
.processo-sub { margin: 14px auto 0; max-width: 56ch; color: var(--apoio); }
.passos { position: relative; display: grid; gap: 12px; margin-top: 32px; text-align: left; }
.passo { position: relative; z-index: 1; display: grid; grid-template-columns: 60px minmax(0, 1fr); column-gap: 14px; align-items: start; align-content: start; padding: 18px 16px; border-radius: 16px; background: var(--cartao); }
.passo-ico { grid-row: 1 / span 3; width: 60px; height: 60px; overflow: visible; }
.passo-ico path { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ico-azul { stroke: var(--azul-marca); }
.ico-limao { stroke: var(--limao-escuro); }
[data-tema="escuro"] .ico-azul { stroke: #7FC1F5; }
[data-tema="escuro"] .ico-limao { stroke: var(--limao); }
.js .passo-ico path { stroke-dashoffset: 1; }
.js .passo.desenha .passo-ico path { animation: desenhar 1100ms var(--curva) forwards; }
.js .passo.desenha .passo-ico .ico-limao { animation-delay: 700ms; }
.passo-num { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #0B2A44; color: #FFFFFF; font-weight: 800; font-size: 0.9375rem; line-height: 1; }
[data-tema="escuro"] .passo-num { background: #F4F7FA; color: #07111C; }
.passo .passo-num { grid-column: 2; margin-bottom: 8px; }
.passo h3 { grid-column: 2; font-family: var(--serifa); font-weight: 500; font-size: 1.3125rem; line-height: 1.15; letter-spacing: -0.01em; }
.passo p { grid-column: 2; margin-top: 6px; font-size: var(--mini); line-height: 1.45; color: var(--apoio); }
.passo-primeiro { box-shadow: 0 0 0 2px var(--limao), 0 16px 30px -20px rgba(96, 140, 0, 0.7); }
.passo-aqui { position: absolute; right: 14px; top: -13px; padding: 3px 11px 5px; border-radius: 999px; background: var(--limao); color: #0B2A44; font-family: var(--mao); font-weight: 700; font-size: 1.2rem; line-height: 1; transform: rotate(3deg); }
.cta-descer { margin-top: 30px; padding-left: 24px; }
.cta-descer .cta-seta svg { transform: rotate(90deg); }
@media (min-width: 640px) and (max-width: 999px) { .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .passos { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
  .passo { grid-template-columns: 1fr; padding: 26px 20px 28px; border-radius: 18px; }
  .passo-ico { grid-row: auto; width: 84px; height: 84px; margin: 6px auto 20px; }
  .passo .passo-num, .passo h3, .passo p { grid-column: 1; }
  /* a linha tracejada liga um passo ao outro */
  .passos::before { content: ""; position: absolute; left: 4%; right: 4%; top: 151px; border-top: 2px dashed color-mix(in srgb, var(--azul-marca) 45%, transparent); }
}

/* ---------- a estante é o passo 1; a ficha mostra o passo 2 ---------- */
.passo-tag { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: var(--mini); font-weight: 800; color: var(--apoio); }
.trilha { display: grid; gap: 10px; }
.trilha-bolas { display: flex; align-items: center; }
.trilha-bolas li { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--linha-forte); background: var(--cartao); color: var(--apoio); font-size: 0.8125rem; font-weight: 800; }
.trilha-bolas li + li { margin-left: 22px; }
.trilha-bolas li + li::before { content: ""; position: absolute; right: calc(100% + 2px); top: 50%; width: 22px; border-top: 2px dashed var(--linha-forte); }
.trilha-bolas .feito { border-color: var(--verde); background: var(--verde); color: #FFFFFF; }
[data-tema="escuro"] .trilha-bolas .feito { color: #07111C; }
.trilha-bolas .feito svg { width: 15px; height: 15px; }
.trilha-bolas .agora { border-color: #0B2A44; background: #0B2A44; color: #FFFFFF; box-shadow: 0 0 0 5px rgba(11, 42, 68, 0.14); }
[data-tema="escuro"] .trilha-bolas .agora { border-color: #F4F7FA; background: #F4F7FA; color: #07111C; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.14); }
.trilha p { max-width: 46ch; font-size: var(--mini); line-height: 1.45; color: var(--apoio); }
.trilha p b { color: var(--texto); }

/* ---------- a fundadora: um painel marinho, como o "A trusted name" ---------- */
.secao.nome { padding-block: 32px; background: transparent; color: inherit; overflow: visible; }
.nome-painel { background: #0B2A44; color: #FFFFFF; overflow: clip; }
[data-tema="escuro"] .nome-painel { background: #0F2740; box-shadow: 0 0 0 1px var(--linha); }
.nome-painel .nome-foto { max-width: 360px; }
.nome-foto .autografo { position: absolute; left: 18px; right: 18px; bottom: 18px; display: grid; justify-items: start; padding: 0; border-radius: 0; background: none; box-shadow: none; color: #FFFFFF; transform: rotate(-4deg); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55); }
.nome-foto .autografo span { font-family: var(--mao); font-weight: 700; font-size: 2.5rem; line-height: 1; color: #FFFFFF; }
.nome-foto .autografo small { margin: 2px 0 0 8px; font-size: 0.8125rem; font-weight: 800; color: #FFFFFF; }
.nome-numeros b { color: var(--limao); }
.nome-bilhete { display: block; margin: 30px 0 0; padding: 0; transform: rotate(-1.5deg); }
.nome-bilhete p { max-width: 24ch; font-family: var(--mao); font-weight: 600; font-size: 2rem; line-height: 1.08; color: var(--limao); }
.nome-bilhete footer { margin-top: 8px; font-family: var(--letra); font-size: 0.8125rem; font-weight: 700; color: #C9D6E2; }
@media (min-width: 900px) {
  .nome-painel.nome-grade { grid-template-columns: 340px minmax(0, 1fr); gap: 56px; }
  .nome-numeros { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- avaliações no painel areia; a foto com a notificação ---------- */
.secao.historias { padding-block: 32px; background: transparent; }
.historias-painel .mosaico { margin-top: 28px; }
.peca-foto { min-height: 430px; background: var(--ceu); }
[data-tema="escuro"] .peca-foto { background: #13314B; }
.peca-foto img { position: absolute; inset: auto auto 0 50%; width: auto; height: 80%; max-width: none; object-fit: contain; transform: translateX(-50%); }
.notificacao { position: absolute; z-index: 2; left: 12px; right: 12px; top: 12px; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); color: #111111; font-family: var(--zap-letra); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.4); }
.noti-g { width: 32px; height: 32px; padding: 6px; border-radius: 9px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07); }
.noti-app { display: flex; justify-content: space-between; gap: 8px; font-size: 0.6875rem; color: #6B6B6B; }
.noti-titulo { display: flex; align-items: center; gap: 6px; margin-top: 1px; font-size: 0.8125rem; font-weight: 700; }
.noti-titulo .estrelas svg { width: 12px; height: 12px; }
.noti-texto { margin-top: 1px; font-size: 0.8125rem; line-height: 1.3; color: #333333; }
.js .peca-foto .notificacao { opacity: 0; transform: translateY(-130%); }
.js .peca-foto.toca .notificacao { animation: notificar 1000ms var(--curva) forwards; }
@keyframes notificar { 0% { opacity: 0; transform: translateY(-130%); } 50% { opacity: 1; transform: translateY(5px); } 64% { transform: translateY(0) rotate(-1.2deg); } 76% { transform: rotate(1deg); } 88% { transform: rotate(-0.5deg); } 100% { opacity: 1; transform: none; } }
.peca-foto figcaption { display: grid; gap: 2px; padding: 12px 14px; background: rgba(255, 255, 255, 0.94); }
.peca-foto figcaption b { font-size: 0.9375rem; line-height: 1.25; }
.peca-foto figcaption > span { font-family: var(--mao); font-weight: 600; font-size: 1.4rem; line-height: 1.05; color: #1F4FA8; }
@media (min-width: 700px) {
  .peca-foto img { left: 3%; height: 94%; transform: none; }
  .notificacao { left: auto; right: 16px; top: 16px; width: 47%; }
  .peca-foto figcaption { left: auto; right: 16px; bottom: 16px; width: 45%; }
}

/* ---------- perguntas frequentes, como as da Policygenius ---------- */
.respostas { padding-bottom: 40px; }
.respostas-grade { display: grid; gap: 28px; }
.respostas-outra { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 2px 14px; align-items: center; max-width: 420px; margin-top: 26px; padding: 16px; border-radius: 18px; background: var(--ceu); }
.respostas-outra img { grid-row: 1 / span 2; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; background: #FFFFFF; }
.respostas-outra p { font-size: var(--mini); line-height: 1.4; }
.respostas-outra .link-forte { margin-top: 0; min-height: 36px; font-size: var(--mini); }
.respostas-lista { display: grid; gap: 10px; max-width: none; margin-top: 0; border-top: 0; }
.resposta { border-bottom: 0; border-radius: 14px; background: var(--areia); transition: background-color 200ms ease; }
.resposta[open] { background: var(--areia-2); }
.resposta summary { min-height: 64px; padding: 16px 18px 16px 20px; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.resposta p { padding: 0 20px 20px; }
.mais { width: 30px; height: 30px; border-radius: 50%; background: #0B2A44; }
.mais::before { left: 9px; right: 9px; top: 14px; height: 2px; background: #FFFFFF; }
.mais::after { top: 9px; bottom: 9px; left: 14px; width: 2px; background: #FFFFFF; }
[data-tema="escuro"] .mais { background: #F4F7FA; }
[data-tema="escuro"] .mais::before, [data-tema="escuro"] .mais::after { background: #07111C; }
@media (min-width: 1000px) {
  .respostas-grade { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
  .respostas-cabeca { position: sticky; top: 112px; }
}

/* ---------- a chamada final, com a Rosangela apresentando o botão ---------- */
.secao.fim { padding-block: 16px 64px; }
.fim-painel { position: relative; display: grid; gap: 8px; overflow: hidden; }
.fim-texto h2 { max-width: 14ch; }
.fim-acoes { display: grid; justify-items: start; gap: 6px; margin-top: 28px; }
.fim-acoes .cta { width: 100%; max-width: 420px; }
.fim-acoes .link-forte { margin-top: 4px; }
.fim-painel .status { margin-top: 10px; }
.fim-foto { position: relative; height: 300px; margin: 12px 0 -40px; }
.fim-foto-fundo { position: absolute; left: 12%; right: 12%; top: 16%; bottom: 0; border-radius: 26px 26px 0 0; background: var(--ceu); }
.fim-foto img { position: relative; width: auto; height: 100%; margin: 0 auto; }
.fim-mao { position: absolute; left: -4px; top: 0; max-width: 9ch; font-family: var(--mao); font-weight: 700; font-size: 1.45rem; line-height: 1; color: var(--tinta-clara); transform: rotate(-6deg); }
.fim-painel .qr { display: none; }
@media (min-width: 1000px) {
  .fim-painel { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: end; padding-bottom: 0; }
  .fim-texto { align-self: center; padding-bottom: 64px; }
  .fim-foto { height: 470px; margin: 0; }
  .fim-painel .qr { display: flex; align-items: center; gap: 14px; width: auto; margin-top: 26px; padding: 0; background: none; color: var(--apoio); text-align: left; }
  .fim-painel .qr img { width: 92px; height: 92px; padding: 6px; border-radius: 12px; background: #FFFFFF; }
  .fim-painel .qr p { max-width: 30ch; font-size: 0.8125rem; }
}

/* ---------- rodapé marinho, como o da Policygenius ---------- */
.rodape { padding-block: 56px 36px; background: #0B2A44; color: #C9D6E2; }
[data-tema="escuro"] .rodape { background: #050D16; border-top: 1px solid var(--linha); }
.rodape-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
.rodape-marca { grid-column: 1 / -1; }
.rodape-marca img { height: 34px; }
.rodape-marca p { margin-top: 14px; color: #C9D6E2; }
.rodape-grade > div:last-child { grid-column: 1 / -1; }
.rodape h2 { margin-bottom: 12px; font-size: 1.0625rem; color: #FFFFFF; }
.rodape a, .rodape .link-simples { color: #FFFFFF; }
.rodape li + li { margin-top: 8px; }
.rodape-apoio { font-size: var(--mini); line-height: 1.45; color: #A9B8C7; }
.rodape-legal { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.14); color: #A9B8C7; }
.rodape-legal b { color: #FFFFFF; }
.rodape-sep { background: rgba(255, 255, 255, 0.3); }
@media (min-width: 900px) {
  .rodape-grade { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 40px; }
  .rodape-marca, .rodape-grade > div:last-child { grid-column: auto; }
}

/* ---------- letras à mão no escuro: tinta clara ---------- */
[data-tema="escuro"] .estante-mao, [data-tema="escuro"] .caderno-toque { color: #8DBEF2; }
[data-tema="escuro"] .estante-mao svg, [data-tema="escuro"] .caderno-toque svg { stroke: #8DBEF2; }

/* ---------- 22. Oitava versão: menos relógio, mais gente ----------
   Sem "Atendendo agora" e sem prazo de resposta; a saudação vale a qualquer hora; o letreiro mostra a
   folhinha do dia; o "Prefiro que me liguem" é um telefone que toca de verdade. */
.saudacao { display: flex; align-items: center; gap: 8px; }
.saudacao-bandeira { flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 2px #FFFFFF, 0 2px 6px rgba(11, 42, 68, 0.25); transform: rotate(8deg); }

/* a folhinha do dia no letreiro, como as da Agenda do Jornal */
.letreiro-folhinha { display: inline-grid; grid-template-rows: auto auto; min-width: 34px; margin-left: 10px; overflow: hidden; border-radius: 6px; background: #FFFFFF; color: #0B2A44; text-align: center; line-height: 1; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); }
.letreiro-folhinha i { order: -1; padding: 2px 5px 3px; background: var(--limao); color: #0B2A44; font-style: normal; font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.02em; }
.letreiro-folhinha b { padding: 2px 5px 3px; font-family: var(--serifa); font-size: 1.0625rem; font-weight: 600; }

/* "Prefiro que me liguem": o telefone toca, as ondas saem dele; em cima do botão, toca de novo */
.ligar { display: inline-flex; align-items: center; gap: 14px; min-height: 58px; margin-top: 8px; padding: 6px 20px 6px 7px; border: 2px solid var(--linha-forte); border-radius: 999px; background: var(--cartao); color: var(--texto); font: inherit; text-align: left; cursor: pointer; transition: border-color 160ms ease, transform 120ms ease; -webkit-tap-highlight-color: transparent; }
.ligar:hover { border-color: var(--texto); }
.ligar:active { transform: scale(0.985); }
.ligar-ico { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #0B2A44; color: #FFFFFF; }
[data-tema="escuro"] .ligar-ico { background: var(--limao); color: #0B2A44; }
.ligar-ico svg { position: relative; z-index: 1; width: 20px; height: 20px; transform-origin: 50% 60%; animation: tocar-telefone 4s ease-in-out 1.6s 4; }
.ligar-onda { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--limao-escuro); opacity: 0; animation: onda-telefone 4s ease-out 1.6s 4; }
.ligar-onda + .ligar-onda { animation-delay: 1.9s; }
[data-tema="escuro"] .ligar-onda { border-color: var(--limao); }
.ligar:hover .ligar-ico svg, .ligar:focus-visible .ligar-ico svg { animation: tocar-de-novo 1.3s ease-in-out infinite; }
.ligar:hover .ligar-onda, .ligar:focus-visible .ligar-onda { animation: onda-de-novo 1.3s ease-out infinite; }
.ligar:hover .ligar-onda + .ligar-onda, .ligar:focus-visible .ligar-onda + .ligar-onda { animation-delay: 0.3s; }
@keyframes tocar-telefone { 0%, 28%, 100% { transform: none; } 3%, 9%, 15%, 21% { transform: rotate(-16deg); } 6%, 12%, 18%, 24% { transform: rotate(16deg); } }
@keyframes tocar-de-novo { 0%, 70%, 100% { transform: none; } 8%, 24%, 40%, 56% { transform: rotate(-16deg); } 16%, 32%, 48%, 64% { transform: rotate(16deg); } }
@keyframes onda-telefone { 0% { opacity: 0.9; transform: scale(1); } 30%, 100% { opacity: 0; transform: scale(1.75); } }
@keyframes onda-de-novo { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.75); } }
@media (prefers-reduced-motion: reduce) { .ligar-ico svg, .ligar-onda { animation: none !important; } }
.ligar-textos { display: grid; gap: 2px; }
.ligar-textos b { font-size: 1rem; font-weight: 800; text-decoration: underline; text-decoration-color: var(--azul); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.ligar-textos small { font-size: 0.8125rem; line-height: 1.3; color: var(--apoio); }
.gaveta-acoes .ligar { width: 100%; }
.fim-acoes .ligar { margin-top: 6px; }
/* a página espera a tradução entrar (no máximo 1,5 s) para não piscar em português */
.i18n-pendente body { visibility: hidden; }
/* a folhinha do letreiro não herda o selo antigo do relógio */
.letreiro-nome .letreiro-folhinha { padding: 0; border-radius: 6px; background: #FFFFFF; color: #0B2A44; letter-spacing: 0; text-transform: none; box-shadow: 0 0 0 1.5px #0B2A44, 0 3px 6px rgba(11, 42, 68, 0.2); }
.letreiro-nome .letreiro-folhinha::before { display: none; }
.letreiro-nome .letreiro-folhinha i { text-transform: uppercase; }
@media (max-width: 599px) { .letreiro-nome .letreiro-folhinha { display: inline-grid; } }

/* ---------- 23. Auditoria de 15/10: toque de 44 px para o dedo e contraste ----------
   As áreas crescem sem mudar o desenho: as palavras marcadas do resumo do plano ganham uma área
   de toque invisível em volta; o interruptor do tema também. */
.tema::after { content: ""; position: absolute; left: -2px; right: -2px; top: -6px; bottom: -6px; }
.termo { padding: 14px 3px; }
.termo::before { inset: 13px 2px; }
.termo::after { top: 5px; right: -4px; }
.onde .link-forte, .respostas-outra .link-forte { min-height: 44px; }
.fm-nav button { min-height: 44px; }
.peca-ler { display: inline-flex; align-items: center; min-height: 44px; }
.mapa-nota { font-size: 0.6875rem; color: #4E5A66; }
@media (max-width: 899px) {
  .rodape li + li { margin-top: 0; }
  .rodape li > a, .rodape li > .link-simples, .rodape-links a, .rodape-links .link-simples { display: inline-flex; align-items: center; min-height: 44px; }
}
/* a área de toque das palavras marcadas passa de 44 px; o selo do mapa tem fundo próprio */
.termo { padding: 16px 3px; }
.termo::before { inset: 15px 2px; }
.termo::after { top: 7px; }
.mapa-nota { padding: 1px 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.85); color: #3E4A56; }
.termo { padding: 16px 6px; margin: 0 -5px; }
.termo::before { inset: 15px 5px; }
.termo::after { right: -1px; }
/* a área de toque cresce para fora sem empurrar as linhas do resumo do plano (o botão é inline-block) */
.termo { margin: -16px -5px; }

/* ---------- 24. Auditoria do celular (15/10) ---------- */
/* a caixinha de autorização some de verdade depois do envio */
.consentimento[hidden], .form-nota[hidden] { display: none !important; }
.form-nota { margin-top: 2px; font-size: var(--mini); line-height: 1.4; color: var(--apoio); }
.jornal-assinar .form-nota { margin-top: 10px; }
/* a confirmação do Jornal numa linha só, com o visto pequeno */
.form-ok-linha { align-items: flex-start; gap: 10px; font-weight: 700; line-height: 1.4; }
.form-ok-linha svg { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--verde); }
/* o botão de acessibilidade não cobre a faixa de cookies nem os botões no celular */
@media (max-width: 899px) {
  .acess-botao { width: 48px; height: 48px; right: 12px; transition: bottom 250ms var(--curva); }
  .acess-botao svg { width: 26px; height: 26px; }
  html:not(.barra-visivel) .acess-botao { bottom: 16px; }
  .cookies:not([hidden]) ~ .acess-botao { display: none; }
}

/* ---------- 25. Prévia da Ro (só com ?ro no endereço) ----------
   A Ro fica no canto direito; o botão de acessibilidade vai para o esquerdo, para os dois não brigarem. */
html.com-ro .acess-botao { right: auto; left: 12px; }
@media (min-width: 900px) { html.com-ro .acess-botao { left: 24px; } }

/* ---------- 26. Revisão de enquadramento (16/10/2026) ----------
   No celular pequeno (320 px) a coluna do Padrão RC crescia até o tamanho mínimo do caderno e a página
   ficava 15 px mais larga que a tela: o texto encostava na borda e o mapa saía cortado. A coluna agora
   respeita a tela. Em espanhol, "después" não cabia na coluna dos anos da linha do tempo. */
.padrao-grade { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .padrao-grade { grid-template-columns: 380px minmax(0, 1fr); } }
.padrao-grade > * { min-width: 0; }
:lang(es) .nome-linha li { grid-template-columns: 84px 1fr; }
@media (max-width: 359px) { .polaroide { right: 2px; } }
/* "Conhecimento" (e "Capacitación", "Conocimiento") não cabia na folha do caderno no celular de 320 px */
@media (max-width: 359px) { .fm-titulo { font-size: 1.75rem; } }