/* RC Contabilidade — www.rccont.com
   Layout: noite grafite com "livro-razão" dourado vivo no fundo; conteúdo em faixas largas, números em fonte mono. */
:root {
  --noite: #0D0C09;        /* fundo (grafite da marca, mais profundo) */
  --noite-2: #16140F;      /* faixas alternadas */
  --vidro: rgba(243, 235, 211, .05);
  --linha: rgba(191, 153, 44, .22);
  --ouro: #BF992C;         /* dourado da marca */
  --ouro-claro: #E2C46A;
  --creme: #F3EBD3;        /* texto principal (creme da marca, levemente mais claro) */
  --creme-2: #B9B09A;      /* texto secundário */
  --alerta: #E8A33C;
  --f-display: "Unbounded", "Segoe UI", system-ui, sans-serif;
  --f-corpo: "Manrope", "Segoe UI", system-ui, sans-serif;
  --f-dado: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  --raio: 14px;
  color-scheme: dark;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth }
body { margin: 0; background: var(--noite); color: var(--creme); font: 16px/1.6 var(--f-corpo); -webkit-font-smoothing: antialiased }
img, svg, video { max-width: 100%; display: block }
a { color: var(--ouro-claro); text-decoration: none }
a:hover { text-decoration: underline }
:focus-visible { outline: 2px solid var(--ouro-claro); outline-offset: 3px; border-radius: 6px }
.wrap { width: min(1180px, 100%); margin-inline: auto; padding-inline: 20px }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; line-height: 1.12; text-wrap: balance; margin: 0 }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.5rem) }
h3 { font-size: 1.08rem; letter-spacing: .01em }
p { margin: 0 }
.rotulo { font: 600 .74rem/1 var(--f-dado); letter-spacing: .16em; text-transform: uppercase; color: var(--ouro) }
.sec { padding-block: clamp(64px, 9vw, 112px); border-top: 1px solid var(--linha) }
.sec:nth-of-type(even) { background: var(--noite-2) }
.sec-cab { display: grid; gap: 14px; max-width: 760px; margin-bottom: 40px }
.sec-cab p { color: var(--creme-2); font-size: 1.05rem }

/* topo */
.topo { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; backdrop-filter: blur(14px); background: rgba(13, 12, 9, .72); border-bottom: 1px solid var(--linha) }
.topo .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px }
.marca { display: flex; align-items: center; gap: 12px; color: var(--creme) }
.marca img { width: 40px; height: 40px }
.marca b { font: 600 1rem/1.1 var(--f-display); letter-spacing: .02em }
.marca small { display: block; font: 500 .68rem/1.3 var(--f-dado); letter-spacing: .14em; color: var(--creme-2) }
.menu { display: flex; gap: 22px; font-size: .92rem }
.menu a { color: var(--creme-2) }
.menu a:hover { color: var(--creme); text-decoration: none }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 22px; border-radius: 999px; font: 700 .95rem/1 var(--f-corpo); border: 1px solid var(--ouro); transition: transform .2s, box-shadow .2s, background .2s }
.btn:hover { text-decoration: none; transform: translateY(-2px) }
.btn-ouro { background: linear-gradient(135deg, var(--ouro-claro), var(--ouro)); color: #17130A; box-shadow: 0 0 0 0 rgba(226, 196, 106, .0) }
.btn-ouro:hover { box-shadow: 0 10px 34px rgba(226, 196, 106, .28) }
.btn-linha { color: var(--creme); background: transparent }
.btn-linha:hover { background: var(--vidro) }
@media (max-width: 860px) { .menu { display: none } }

/* hero */
.hero { position: relative; overflow: hidden; padding-block: clamp(70px, 11vw, 140px) clamp(56px, 8vw, 96px) }
#razao { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9 }
.hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 25% 40%, rgba(13, 12, 9, .2), var(--noite) 85%); pointer-events: none }
.hero .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 64px); align-items: center }
.hero h1 { font-size: clamp(2.3rem, 6.2vw, 4.6rem); font-weight: 700; letter-spacing: -.01em }
.hero h1 em { font-style: normal; background: linear-gradient(100deg, var(--ouro-claro), var(--ouro) 60%, #8C6E1C); -webkit-background-clip: text; background-clip: text; color: transparent }
.hero .lead { margin-top: 22px; max-width: 58ch; color: var(--creme-2); font-size: 1.12rem }
.hero .acoes { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px }
.painel { background: linear-gradient(160deg, rgba(243, 235, 211, .07), rgba(243, 235, 211, .02)); border: 1px solid var(--linha); border-radius: 20px; padding: 22px; backdrop-filter: blur(10px); min-width: 0 }
.painel-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 14px }
.painel-cab span { font: 500 .72rem/1 var(--f-dado); color: var(--creme-2) }
.prox { display: grid; gap: 10px }
.prox li { list-style: none; display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(13, 12, 9, .55); border: 1px solid rgba(191, 153, 44, .14) }
.prox ul { margin: 0; padding: 0; display: grid; gap: 10px }
.dia { font: 700 1.25rem/1 var(--f-dado); color: var(--ouro-claro); text-align: center; font-variant-numeric: tabular-nums }
.dia small { display: block; margin-top: 4px; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--creme-2) }
.prox b { display: block; font-size: .95rem }
.prox i { display: block; font-style: normal; font-size: .78rem; color: var(--creme-2) }
.contagem { margin-top: 14px; font: 600 .82rem/1.4 var(--f-dado); color: var(--alerta) }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr } #razao { opacity: .35 } }
@media (max-width: 520px) { .topo .btn { padding: 10px 14px; font-size: .82rem; white-space: nowrap } .marca b { font-size: .9rem } .marca img { width: 34px; height: 34px } }

/* faixa de indicadores */
.ticker { border-block: 1px solid var(--linha); background: #0A0907; overflow: hidden }
.ticker .wrap { display: flex; flex-wrap: wrap; gap: 10px 34px; padding-block: 14px; font: 500 .82rem/1.3 var(--f-dado); color: var(--creme-2) }
.ticker b { color: var(--creme); font-weight: 600; font-variant-numeric: tabular-nums }
.ticker .f { margin-left: auto; color: rgba(185, 176, 154, .7) }

/* números */
.numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--linha); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden }
.numeros div { background: var(--noite); padding: 26px 22px; display: grid; gap: 6px }
.numeros strong { font: 700 clamp(1.9rem, 4vw, 2.8rem)/1 var(--f-display); color: var(--ouro-claro); font-variant-numeric: tabular-nums }
.numeros span { color: var(--creme-2); font-size: .92rem }
@media (max-width: 760px) { .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)) } }

/* serviços */
.servicos { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px }
.serv { position: relative; padding: 24px; border-radius: var(--raio); border: 1px solid var(--linha); background: var(--vidro); display: grid; gap: 10px; align-content: start; transition: border-color .25s, transform .25s; overflow: hidden }
.serv::before { content: ""; position: absolute; inset: -1px; background: radial-gradient(240px 120px at var(--mx, 50%) var(--my, 0%), rgba(226, 196, 106, .16), transparent 70%); opacity: 0; transition: opacity .25s; pointer-events: none }
.serv:hover { border-color: rgba(226, 196, 106, .55); transform: translateY(-3px) }
.serv:hover::before { opacity: 1 }
.serv .cod { font: 600 .72rem/1 var(--f-dado); color: var(--ouro); letter-spacing: .1em }
.serv p { color: var(--creme-2); font-size: .95rem }

/* tecnologia */
.tec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center }
.tec ul { margin: 22px 0 0; padding: 0; display: grid; gap: 14px }
.tec li { list-style: none; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; color: var(--creme-2) }
.tec li b { color: var(--creme) }
.tec li::before { content: ""; width: 10px; height: 10px; margin-top: 8px; border-radius: 50%; background: var(--ouro-claro); box-shadow: 0 0 14px var(--ouro) }
.tela { border-radius: 18px; border: 1px solid var(--linha); background: #0A0907; padding: 18px; font: 500 .8rem/1.5 var(--f-dado); color: var(--creme-2); min-width: 0; overflow: hidden }
.tela .lin { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed rgba(191, 153, 44, .18) }
.tela .lin:last-child { border-bottom: 0 }
.tela .ok { color: #7BC88A }
.tela .at { color: var(--alerta) }
@media (max-width: 860px) { .tec { grid-template-columns: 1fr } }

/* agenda e novidades */
.agenda-tab { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio) }
table { width: 100%; border-collapse: collapse; min-width: 640px }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid rgba(191, 153, 44, .14); vertical-align: top }
th { font: 600 .72rem/1 var(--f-dado); letter-spacing: .12em; text-transform: uppercase; color: var(--ouro); background: #0A0907 }
td.d { font: 600 .9rem/1.3 var(--f-dado); color: var(--ouro-claro); white-space: nowrap; font-variant-numeric: tabular-nums }
td small { display: block; color: var(--creme-2); font-size: .8rem }
td .obs { color: var(--alerta) }
.nota-rodape { margin-top: 12px; font-size: .82rem; color: var(--creme-2) }
.novidades { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 44px }
.nov { padding: 22px; border-radius: var(--raio); border: 1px solid var(--linha); display: grid; gap: 10px; align-content: start; background: var(--vidro) }
.nov time { font: 600 .74rem/1 var(--f-dado); color: var(--ouro) }
.nov p { color: var(--creme-2); font-size: .94rem }
.nov small { color: rgba(185, 176, 154, .8); font-size: .78rem }

/* reforma */
.linha-tempo { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; position: relative }
.linha-tempo::before { content: ""; position: absolute; left: 0; right: 0; top: 23px; height: 2px; background: linear-gradient(90deg, var(--ouro), rgba(191, 153, 44, .15)) }
.marco { position: relative; padding: 50px 14px 0 0; display: grid; gap: 8px; align-content: start }
.marco::before { content: ""; position: absolute; top: 15px; left: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--noite); border: 2px solid var(--ouro-claro); box-shadow: 0 0 16px rgba(226, 196, 106, .45) }
.marco.agora::before { background: var(--ouro-claro) }
.marco strong { font: 700 1.4rem/1 var(--f-display); color: var(--creme) }
.marco p { color: var(--creme-2); font-size: .9rem }
@media (max-width: 860px) { .linha-tempo { grid-template-columns: 1fr; gap: 18px } .linha-tempo::before { left: 8px; right: auto; top: 0; bottom: 0; width: 2px; height: auto } .marco { padding: 0 0 0 36px } .marco::before { top: 2px } }

.ouro { background: linear-gradient(100deg, var(--ouro-claro), var(--ouro) 70%); -webkit-background-clip: text; background-clip: text; color: transparent }
.reforma-ajuda { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-block: 8px 56px }
.reforma-ajuda article { padding: 24px; border-radius: var(--raio); border: 1px solid var(--linha); background: linear-gradient(170deg, rgba(191, 153, 44, .12), rgba(13, 12, 9, 0) 70%); display: grid; gap: 10px; align-content: start }
.reforma-ajuda .cod { font: 600 .72rem/1 var(--f-dado); color: var(--ouro); letter-spacing: .1em }
.reforma-ajuda p { color: var(--creme-2); font-size: .95rem }
.reforma-cta { margin-top: 48px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 24px 28px; border-radius: 18px; border: 1px solid rgba(226, 196, 106, .45); background: radial-gradient(120% 140% at 0% 0%, rgba(191, 153, 44, .2), rgba(13, 12, 9, .1) 60%) }
.reforma-cta p { max-width: 62ch; color: var(--creme-2) }
.reforma-cta b { color: var(--creme) }

/* contato */
.contato { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 56px) }
.dados { display: grid; gap: 18px }
.dados div { display: grid; gap: 4px; padding-bottom: 16px; border-bottom: 1px solid var(--linha) }
.dados span { font: 600 .72rem/1 var(--f-dado); letter-spacing: .14em; text-transform: uppercase; color: var(--ouro) }
.dados b { font-size: 1.1rem; font-weight: 600 }
.cta-final { padding: 32px; border-radius: 22px; border: 1px solid rgba(226, 196, 106, .45); background: radial-gradient(120% 120% at 100% 0%, rgba(191, 153, 44, .22), rgba(13, 12, 9, .1) 60%); display: grid; gap: 18px; align-content: center }
.cta-final p { color: var(--creme-2) }
@media (max-width: 860px) { .contato { grid-template-columns: 1fr } }

/* rodapé */
.rodape { border-top: 1px solid var(--linha); padding-block: 40px; color: var(--creme-2); font-size: .86rem }
.rodape .wrap { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 28px }
.rodape h4 { margin: 0 0 10px; font: 600 .74rem/1 var(--f-dado); letter-spacing: .14em; text-transform: uppercase; color: var(--ouro) }
.rodape ul { margin: 0; padding: 0; display: grid; gap: 6px; list-style: none }
.rodape a { color: var(--creme-2) }
@media (max-width: 760px) { .rodape .wrap { grid-template-columns: 1fr } }

/* entrada suave (a página já nasce visível; o movimento é só um acabamento) */
.surge { animation: surge .9s cubic-bezier(.2, .7, .2, 1) both }
.surge.d2 { animation-delay: .12s } .surge.d3 { animation-delay: .24s } .surge.d4 { animation-delay: .36s }
@keyframes surge { from { transform: translateY(14px); opacity: .001 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .surge { animation: none } html { scroll-behavior: auto } .serv, .btn { transition: none } }

/* páginas de texto (privacidade, termos) */
.doc { padding-block: 56px 80px }
.doc .wrap { max-width: 820px }
.doc h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 8px }
.doc h2 { font-size: 1.2rem; margin: 34px 0 10px; color: var(--ouro-claro) }
.doc p, .doc li { color: var(--creme-2); max-width: 70ch }
.doc p + p { margin-top: 12px }
.doc ul { padding-left: 20px; display: grid; gap: 6px }
.doc mark { background: var(--ouro-claro); color: #17130A; padding: 1px 8px; border-radius: 4px; font-weight: 700 }
.doc b { color: var(--creme) }