/* overflowmed.com.br — a página da Overflow e o quiz do Raio-X.
   Tokens e componentes vêm de overflow.css (a fonte única da marca). Aqui mora só o layout destas páginas. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--tinta); font-family: var(--f-texto); font-size: 16.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 6px; }
.so-escuro { display: none; }
[data-tema="escuro"] .so-claro { display: none; }
[data-tema="escuro"] .so-escuro { display: block; }

/* grão por cima de tudo (a textura da marca) */
body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: var(--grao);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }

.pular { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--tinta); color: var(--bg); padding: 10px 16px; border-radius: 999px; font-family: var(--f-forte); font-weight: 600; font-size: 14px; text-decoration: none; }
.pular:focus { top: 16px; }

.miolo { width: min(1160px, 100% - 32px); margin-inline: auto; }

/* fundo de marca: grade + névoa */
.fundo-marca { position: relative; isolation: isolate; }
.fundo-marca::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(var(--grade-fio) 1px, transparent 1px), linear-gradient(90deg, var(--grade-fio) 1px, transparent 1px);
  background-size: 34px 34px; -webkit-mask: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 78%); mask: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 78%); }
.fundo-marca::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(760px 520px at 88% 4%, color-mix(in srgb, var(--acc) 18%, transparent), transparent 70%); }

/* navegação: pílula de vidro que flutua */
.nav { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 8px;
  padding: 8px 8px 8px 20px; border-radius: 999px; background: color-mix(in srgb, var(--sup) 78%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px); border: 1px solid var(--fio); box-shadow: var(--sombra-2); width: max-content; max-width: calc(100% - 24px); }
.nav .logo img { height: 22px; width: auto; }
.nav ul { display: flex; gap: 2px; list-style: none; margin: 0 8px 0 20px; padding: 0; }
.nav ul a { display: block; padding: 8px 12px; border-radius: 999px; font-family: var(--f-forte); font-weight: 600; font-size: 14px; color: var(--tinta-2); text-decoration: none; transition: background .3s cubic-bezier(.32,.72,0,1), color .3s; }
.nav ul a:hover, .nav ul a[aria-current="true"] { background: var(--sup-2); color: var(--tinta); }
.nav .btn { font-size: 14px; padding: 10px 16px 10px 18px; }
@media (max-width: 760px) { .nav ul { display: none; } .nav { gap: 12px; } }

/* seções */
section { position: relative; }
.secao { padding: 96px 0; }
.chao { background: var(--sup-2); }
.cab-secao { max-width: 680px; }
.cab-secao h2 { font-weight: 300; font-size: clamp(30px, 4.2vw, 42px); line-height: 1.08; letter-spacing: -.03em; margin-top: 12px; }
.cab-secao p { margin-top: 16px; color: var(--tinta-2); font-size: 18px; line-height: 1.55; }

/* hero */
.hero { padding: 160px 0 96px; }
.hero .grade { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 48px; align-items: center; }
.hero h1 { font-weight: 300; font-size: clamp(38px, 5.6vw, 64px); line-height: 1.04; letter-spacing: -.035em; max-width: 680px; margin-top: 16px; }
.hero .sub { margin-top: 24px; max-width: 560px; font-size: 19px; line-height: 1.55; color: var(--tinta-2); font-weight: 300; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; max-width: 560px; }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 32px; }
.nota { margin-top: 16px; font-size: 14px; color: var(--tinta-2); }
@media (max-width: 920px) { .hero .grade { grid-template-columns: 1fr; } .hero { padding-top: 128px; } }

/* celular com a conversa */
.cena { position: relative; display: grid; place-items: center; padding: 24px 0 48px; }
.celular { position: relative; width: min(320px, 82vw); aspect-ratio: 9 / 19; border-radius: 44px; padding: 10px; background: #111315; box-shadow: var(--sombra-3), inset 0 0 0 1.5px #2a2d31; }
.celular .tela { height: 100%; border-radius: 34px; overflow: hidden; background: #EFEAE2; display: flex; flex-direction: column; }
[data-tema="escuro"] .celular .tela { background: #0E1417; }
.zap-topo { display: flex; align-items: center; gap: 10px; padding: 30px 14px 10px; background: var(--sup); border-bottom: 1px solid var(--fio); }
.zap-topo .av { width: 32px; height: 32px; border-radius: 999px; background: var(--acc-suave); display: grid; place-items: center; }
.zap-topo .av img { width: 18px; height: 18px; }
.zap-topo b { display: block; font-size: 14px; font-weight: 600; line-height: 1.2; }
.zap-topo span { font-size: 12px; color: var(--tinta-2); }
.zap { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 12px; }
.msg { max-width: 84%; padding: 8px 12px 6px; border-radius: 14px; font-size: 13.5px; line-height: 1.4; box-shadow: 0 1px 1px rgba(0,0,0,.06); }
.msg time { display: block; text-align: right; font-size: 10.5px; color: #667781; margin-top: 2px; }
.msg.ela { align-self: flex-start; background: #FFFFFF; color: #111B21; border-top-left-radius: 4px; }
.msg.nos { align-self: flex-end; background: #D9FDD3; color: #111B21; border-top-right-radius: 4px; }
[data-tema="escuro"] .msg.ela { background: #1F2C34; color: #E9EDEF; }
[data-tema="escuro"] .msg.nos { background: #005C4B; color: #E9EDEF; }
[data-tema="escuro"] .msg time { color: #8696A0; }
.flutua { position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: var(--sup); border: 1px solid var(--fio); box-shadow: var(--sombra-3); font-size: 14px; white-space: nowrap; }
.flutua b { display: block; font-family: var(--f-forte); font-weight: 600; font-size: 14px; }
.flutua span { color: var(--tinta-2); font-size: 12px; }
.flutua .selo { width: 36px; height: 36px; }
.flutua .selo::after { inset: -4px; }
.flutua .selo svg { width: 18px; height: 18px; }
.flutua.um { left: 0; top: 20%; }
.flutua.dois { right: 0; bottom: -2%; }
.legenda-mock { margin-top: 12px; font-size: 12px; color: var(--tinta-2); text-align: center; }
@media (max-width: 520px) { .flutua.um { left: -4px; } .flutua.dois { right: -4px; } .flutua { padding: 8px 12px; } }

/* o balde furado: a jornada com os quatro furos */
.jornada { margin-top: 48px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: start; }
.etapa-j { display: grid; justify-items: center; gap: 12px; text-align: center; }
.etapa-j .pilula { width: 100%; padding: 12px 8px; border-radius: 999px; background: var(--sup); border: 1px solid var(--fio); box-shadow: var(--sombra-1); font-family: var(--f-forte); font-weight: 600; font-size: 14px; }
.etapa-j:last-child .pilula { background: var(--acc-suave); border-color: var(--acc-fio); color: var(--acc); }
.furo { display: grid; justify-items: center; gap: 8px; }
.furo .gota { width: 14px; height: 18px; background: var(--acc); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'%3E%3Cpath d='M7 0C7 0 0 8 0 11.5A7 7 0 0 0 14 11.5C14 8 7 0 7 0Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'%3E%3Cpath d='M7 0C7 0 0 8 0 11.5A7 7 0 0 0 14 11.5C14 8 7 0 7 0Z'/%3E%3C/svg%3E") center / contain no-repeat; animation: pinga 2.8s cubic-bezier(.55,0,.8,.4) infinite; }
.furo:nth-child(2) .gota { animation-delay: .6s; }
@keyframes pinga { 0% { transform: translateY(-6px) scale(.4); opacity: 0; } 25% { opacity: 1; transform: translateY(0) scale(1); } 80% { transform: translateY(26px); opacity: 0; } 100% { opacity: 0; } }
.furo b { font-family: var(--f-forte); font-weight: 600; font-size: 14px; color: var(--tinta); margin-top: 24px; }
.furo span { font-size: 14px; color: var(--tinta-2); line-height: 1.45; max-width: 22ch; }
.base-parada { margin-top: 32px; display: flex; align-items: center; gap: 16px; padding: 16px 24px; border-radius: 26px; background: var(--sup); border: 1px solid var(--fio); }
.base-parada b { font-family: var(--f-forte); font-weight: 600; font-size: 14px; white-space: nowrap; }
.base-parada span { color: var(--tinta-2); font-size: 15px; }
@media (max-width: 860px) {
  .jornada { grid-template-columns: 1fr; gap: 8px; }
  .etapa-j { grid-template-columns: 1fr; }
  .furo b { margin-top: 8px; }
  .base-parada { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* a frase que se acende palavra a palavra */
.frase { padding: 128px 0; }
.frase p { max-width: 900px; font-weight: 300; font-size: clamp(30px, 4.6vw, 54px); line-height: 1.12; letter-spacing: -.03em; text-wrap: balance; }
.frase .p { color: color-mix(in srgb, var(--tinta) 28%, transparent); transition: color .7s cubic-bezier(.32,.72,0,1); }
.frase .p.acesa { color: var(--tinta); }
.frase .p.forte.acesa { font-weight: 700; }

/* a ordem: três etapas, cada uma com a sua tela */
.ordem { display: grid; gap: 24px; margin-top: 48px; }
.passo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; padding: 40px; }
.passo:nth-child(even) .passo-texto { order: 2; }
.passo h3 { font-weight: 300; font-size: clamp(26px, 3vw, 34px); line-height: 1.1; letter-spacing: -.03em; margin-top: 12px; }
.passo p { margin-top: 12px; color: var(--tinta-2); }
.passo ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.passo li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; }
.passo li svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--acc); }
@media (max-width: 860px) { .passo { grid-template-columns: 1fr; gap: 24px; padding: 24px; } .passo:nth-child(even) .passo-texto { order: 0; } }

/* telas pequenas dentro das etapas */
.tela-mini { border-radius: 22px; background: var(--bg); border: 1px solid var(--fio); padding: 16px; display: grid; gap: 8px; }
.tela-mini .t { font-family: var(--f-forte); font-weight: 600; font-size: 13px; color: var(--tinta-2); display: flex; justify-content: space-between; align-items: center; padding: 0 4px 4px; }
.linha-mini { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border-radius: 16px; background: var(--sup); border: 1px solid var(--fio); }
.linha-mini .av { width: 36px; height: 36px; border-radius: 999px; background: var(--sup-2); display: grid; place-items: center; font-family: var(--f-forte); font-weight: 700; font-size: 12px; color: var(--tinta-2); }
.linha-mini b { display: block; font-weight: 500; font-size: 14.5px; line-height: 1.3; }
.linha-mini span { font-size: 13px; color: var(--tinta-2); line-height: 1.3; }
.linha-mini .chip { font-size: 12px; padding: 4px 10px; }
.linha-mini .chip.ok { background: var(--acc-suave); color: var(--acc); border-color: var(--acc-fio); }
.aviso-mini { font-size: 12px; color: var(--tinta-2); padding: 4px 4px 0; }
.trilho { display: grid; gap: 0; }
.trilho .ev { display: grid; grid-template-columns: 56px 16px minmax(0, 1fr); gap: 12px; align-items: start; }
.trilho time { font-family: var(--f-forte); font-weight: 600; font-size: 13px; color: var(--tinta-2); font-variant-numeric: tabular-nums; padding-top: 12px; text-align: right; }
.trilho .eixo { position: relative; align-self: stretch; }
.trilho .eixo::before { content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: var(--fio); }
.trilho .eixo::after { content: ""; position: absolute; left: 3px; top: 16px; width: 10px; height: 10px; border-radius: 999px; background: var(--sup); border: 2px solid var(--fio-forte); }
.trilho .ev.bom .eixo::after { background: var(--acc); border-color: var(--acc); }
.trilho .ev.ruim .eixo::after { border-style: dashed; }
.trilho .cx { margin: 4px 0; padding: 8px 12px; border-radius: 14px; background: var(--sup); border: 1px solid var(--fio); font-size: 14px; }
.trilho .ev.ruim .cx { color: var(--tinta-2); border-style: dashed; }

/* o Raio-X (tema invertido) */
.raiox { background: var(--bg); color: var(--tinta); }
.raiox .grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.raiox ol { margin: 32px 0 0; padding: 0; list-style: none; display: grid; gap: 24px; counter-reset: p; }
.raiox li { counter-increment: p; }
.raiox li .etapa .n::after { content: counter(p); }
.raiox li h3 { font-weight: 500; font-size: 18px; margin-top: 4px; }
.raiox li p { color: var(--tinta-2); font-size: 15.5px; margin-top: 4px; }
@media (max-width: 860px) { .raiox .grade { grid-template-columns: 1fr; } }

/* garantia e tela do sistema */
.duas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 48px; }
@media (max-width: 860px) { .duas { grid-template-columns: 1fr; } }
.garantia h3 { font-weight: 300; font-size: clamp(26px, 3vw, 34px); line-height: 1.1; letter-spacing: -.03em; }
.garantia p { margin-top: 12px; color: var(--tinta-2); }
.garantia .selo { margin-bottom: 24px; }
.painel-mini { padding: 24px; }
.numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.numeros div { padding: 12px 16px; border-radius: 16px; background: var(--bg); border: 1px solid var(--fio); }
.numeros span { display: block; font-size: 12.5px; color: var(--tinta-2); }
.numeros b { font-weight: 300; font-size: 30px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.barras { display: flex; align-items: flex-end; gap: 8px; height: 120px; margin-top: 16px; padding: 12px 16px 0; border-radius: 16px; background: var(--bg); border: 1px solid var(--fio); }
.barras i { flex: 1; border-radius: 6px 6px 0 0; background: var(--dado); opacity: .55; }
.barras i:last-child { background: var(--dado-forte); opacity: 1; }

/* perguntas */
.faq { margin-top: 48px; display: grid; gap: 8px; max-width: 820px; }
.faq details { border-radius: 22px; background: var(--sup); border: 1px solid var(--fio); transition: border-color .3s; }
.faq details[open] { border-color: var(--fio-forte); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; font-weight: 500; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 20px; height: 20px; flex: none; color: var(--tinta-2); transition: transform .5s cubic-bezier(.32,.72,0,1); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { padding: 0 24px 24px; color: var(--tinta-2); max-width: 68ch; }

/* fecho */
.fecho .caixa { text-align: center; display: grid; justify-items: center; }
.fecho h2 { font-weight: 300; font-size: clamp(32px, 4.6vw, 52px); line-height: 1.06; letter-spacing: -.035em; max-width: 680px; }
.fecho p { margin-top: 16px; max-width: 520px; color: var(--tinta-2); font-size: 18px; }
.fecho .btn { margin-top: 32px; }

/* rodapé */
.rodape { padding: 32px 0 24px; }
/* o rodapé é uma caixa com grade e névoa, e o logo gigante cortado no pé, como marca-d'água */
.rodape-caixa { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-lg); border: 1px solid var(--fio); background: var(--sup);
  padding: 48px 48px 8px; box-shadow: var(--sombra-1); }
.rodape-caixa::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(640px 360px at 100% 0%, color-mix(in srgb, var(--acc) 12%, transparent), transparent 70%),
    linear-gradient(var(--grade-fio) 1px, transparent 1px) 0 0 / 34px 34px, linear-gradient(90deg, var(--grade-fio) 1px, transparent 1px) 0 0 / 34px 34px;
  -webkit-mask: linear-gradient(#000 20%, transparent 90%); mask: linear-gradient(#000 20%, transparent 90%); }
.rodape-topo { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 32px; }
.rodape-marca img { height: 26px; width: auto; }
.rodape-marca p { margin-top: 16px; max-width: 40ch; font-size: 17px; line-height: 1.45; color: var(--tinta-2); text-wrap: pretty; }
.rodape-ig { display: inline-flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; border-radius: 999px; text-decoration: none; color: var(--tinta);
  background: var(--sup); border: 1px solid var(--fio-forte); box-shadow: var(--sombra-2); transition: transform .5s cubic-bezier(.32,.72,0,1), border-color .3s, box-shadow .3s; }
.rodape-ig:hover { transform: translateY(-2px); border-color: var(--acc); box-shadow: var(--sombra-3); }
.rodape-ig:active { transform: scale(.98); }
.rodape-ig:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.ig-disco { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 999px; background: var(--grad-btn); color: var(--acc-tinta); }
.ig-disco .ig { width: 22px; height: 22px; fill: currentColor; }
.ig-texto { display: grid; line-height: 1.2; }
.ig-texto b { font-family: var(--f-forte); font-weight: 600; font-size: 15px; }
.ig-texto small { font-size: 13px; color: var(--tinta-2); }
.seta-ig { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--acc); transition: transform .5s cubic-bezier(.32,.72,0,1); }
.rodape-ig:hover .seta-ig { transform: translate(2px, -2px); }
.rodape-base { margin-top: 48px; padding: 20px 0; border-top: 1px solid var(--fio); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; font-size: 14px; color: var(--tinta-2); }
.rodape-base nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.rodape-base a { color: var(--tinta); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s cubic-bezier(.32,.72,0,1), color .3s; }
.rodape-base a:hover { color: var(--acc); background-size: 100% 1px; }
.rodape .em-breve { display: inline-flex; align-items: center; gap: 8px; color: var(--tinta-3); cursor: default; }
.rodape .em-breve small { font-family: var(--f-forte); font-weight: 600; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--sup-2); border: 1px solid var(--fio); color: var(--tinta-2); }
.rodape-legal span { margin-left: 8px; color: var(--tinta-3); }
@media (max-width: 640px) {
  .rodape-caixa { padding: 32px 24px 4px; border-radius: var(--r-md); }
  .rodape-base { margin-top: 32px; }
  .rodape-legal span { display: block; margin: 4px 0 0; }
}

/* entrada por rolagem: sobe 16px, uma vez só */
.sobe { opacity: 0; transform: translateY(16px); filter: blur(6px); transition: opacity .8s cubic-bezier(.32,.72,0,1), transform .8s cubic-bezier(.32,.72,0,1), filter .8s cubic-bezier(.32,.72,0,1); }
.sobe.vista { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) { .sobe { opacity: 1; transform: none; filter: none; } .frase .p { color: var(--tinta); } }

/* ── Landing "dinheiro parado" (variação C, adotada em 25/09/2026) ── */
/* a ordem em linha */
.linha-ordem { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; position: relative; }
.linha-ordem::before { content: ""; position: absolute; left: 24px; right: 24px; top: 23px; height: 2px; background: linear-gradient(90deg, var(--acc), var(--fio)); }
.linha-ordem li { list-style: none; position: relative; padding-right: 32px; }
.linha-ordem .num { width: 48px; height: 48px; border-radius: 999px; display: grid; place-items: center; background: var(--sup); border: 1px solid var(--fio-forte); font-family: var(--f-forte); font-weight: 700; color: var(--tinta-2); position: relative; }
.linha-ordem li:first-child .num { background: var(--grad-btn); color: var(--acc-tinta); border: 0; }
.linha-ordem h3 { margin-top: 24px; font-weight: 300; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.1; letter-spacing: -.03em; }
.linha-ordem p { margin-top: 8px; color: var(--tinta-2); font-size: 15.5px; max-width: 32ch; }
.linha-ordem ul, ol.linha-ordem { padding: 0; margin: 56px 0 0; }
@media (max-width: 860px) { .linha-ordem { grid-template-columns: 1fr; gap: 32px; } .linha-ordem::before { display: none; } }

/* os três lugares do dinheiro parado */
.hero-c { padding: 150px 0 80px; }
.hero-c h1 { font-weight: 300; font-size: clamp(40px, 6vw, 72px); line-height: 1.02; letter-spacing: -.04em; max-width: 900px; margin-top: 16px; }
.hero-c .sub { margin-top: 24px; max-width: 600px; font-size: 19px; line-height: 1.55; color: var(--tinta-2); font-weight: 300; }
.cofres { margin-top: 64px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cofre { padding: 20px; border-radius: var(--r-md); background: var(--sup); border: 1px solid var(--fio); box-shadow: var(--sombra-2); display: grid; gap: 12px; align-content: start; }
.cofre .t { display: flex; justify-content: space-between; align-items: center; font-family: var(--f-forte); font-weight: 600; font-size: 14px; }
.cofre .t .chip { font-size: 11.5px; padding: 4px 10px; }
.cofre .item { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--bg); border: 1px solid var(--fio); font-size: 13.5px; line-height: 1.3; }
.cofre .item .av { width: 32px; height: 32px; border-radius: 999px; background: var(--sup-2); display: grid; place-items: center; font-family: var(--f-forte); font-weight: 700; font-size: 11px; color: var(--tinta-2); }
.cofre .item span { display: block; font-size: 12px; color: var(--tinta-2); }
.cofre .item.apaga { opacity: .55; }
.cofre p { font-size: 14.5px; color: var(--tinta-2); padding: 4px 4px 0; }
.cofre .cadeira { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 12px; border-radius: 14px; background: var(--bg); border: 1px solid var(--fio); }
.cofre .cadeira i { aspect-ratio: 1; border-radius: 10px; background: var(--acc-suave); border: 1px solid var(--acc-fio); }
.cofre .cadeira i.vazia { background: none; border: 1.5px dashed var(--fio-forte); }
@media (max-width: 900px) { .cofres { grid-template-columns: 1fr; } }

/* a calculadora (o número é do dono, nunca nosso) */
.calc { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px; margin-top: 48px; align-items: stretch; }
.calc form { display: grid; gap: 16px; }
.campo-calc { display: grid; gap: 8px; }
.campo-calc label { font-family: var(--f-forte); font-weight: 600; font-size: 14px; }
.campo-calc small { color: var(--tinta-2); font-size: 13px; }
.campo-calc .entrada { display: flex; align-items: center; gap: 8px; padding: 4px 16px; border-radius: 16px; background: var(--bg); border: 1px solid var(--fio-forte); transition: border-color .3s; }
.campo-calc .entrada:focus-within { border-color: var(--acc); }
.campo-calc .entrada span { color: var(--tinta-2); font-size: 18px; }
.campo-calc input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-weight: 300; font-size: 26px; letter-spacing: -.02em; color: var(--tinta); padding: 10px 0; }
.campo-calc input:focus { outline: none; }
.resultado { display: grid; align-content: center; justify-items: start; gap: 12px; }
.resultado .rot { font-family: var(--f-forte); font-weight: 600; font-size: 14px; color: var(--tinta-2); }
.resultado .valor { font-weight: 300; font-size: clamp(40px, 5.4vw, 64px); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.resultado p { font-size: 15px; color: var(--tinta-2); max-width: 36ch; }
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }

/* as mensagens no tempo certo */
.dias { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dia { padding: 24px; border-radius: var(--r-md); background: var(--sup); border: 1px solid var(--fio); display: grid; gap: 16px; align-content: start; }
.dia .d { font-family: var(--f-forte); font-weight: 700; font-size: 14px; color: var(--acc); }
.dia .bolha { padding: 12px 14px; border-radius: 4px 16px 16px 16px; background: #D9FDD3; color: #111B21; font-size: 14.5px; line-height: 1.45; }
[data-tema="escuro"] .dia .bolha { background: #005C4B; color: #E9EDEF; }
.dia p { font-size: 14.5px; color: var(--tinta-2); }
@media (max-width: 860px) { .dias { grid-template-columns: 1fr; } }