/* =========================================================================
   Agenda Contábil — tema SALÃO (feminino): branco + lilás/roxo
   Carrega DEPOIS de lp.css e só troca as variáveis e os pontos de cor.
   Mesma tipografia (Fraunces + Hanken) de propósito: mesma marca, outro quarto.
   ========================================================================= */
:root{
  --paper:#FAF8FC;            /* branco levemente lilás */
  --paper-2:#F3EFF9;          /* seções alternadas */
  --ink:#1E1729;              /* quase preto arroxeado */
  --ink-2:#524766;
  --ink-3:#8E84A3;
  --line:rgba(30,23,41,.12);
  --line-2:rgba(30,23,41,.07);
  --green:#6B2FB3;            /* "acento" da marca vira roxo */
  --green-deep:#54228F;
  --navy:#3B1470;             /* botões: roxo profundo */
  --dark:#1B1226;             /* a seção escura */
  --lilas:#EDE4F8;
  --radius:14px;              /* cantos um pouco mais macios */
}
body{background:var(--paper)}

/* header de vidro em tom lilás */
.hdr-in{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.85);
  box-shadow:0 14px 44px -20px rgba(59,20,112,.22), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(30,23,41,.04)}
.hdr.scrolled .hdr-in{background:rgba(255,255,255,.82);box-shadow:0 16px 48px -22px rgba(59,20,112,.3), inset 0 1px 0 rgba(255,255,255,.95)}
.a-acute::after{background:var(--green)}

/* botões */
.btn-p{background:var(--navy);color:#fff}
.btn-p:hover{background:#2C0E57}
.nav a.btn-p,.nav a.btn-p:hover{color:#fff}

/* sombras e brilhos em roxo */
.figure{box-shadow:0 30px 64px -44px rgba(59,20,112,.35)}
.foto-card,.sat{box-shadow:0 20px 44px -20px rgba(59,20,112,.32),inset 0 1px 0 #fff}
.offer-card.hl{border-color:rgba(107,47,179,.3);box-shadow:0 30px 60px -44px rgba(107,47,179,.35)}
.checks .ck,.guar .ck,.sat-v .ck,.ring-mini{background:rgba(107,47,179,.12)}
.checks .ck::after,.guar .ck::after,.sat-v .ck::after{border-color:var(--green)}
.ring-mini{background:conic-gradient(var(--green) 94%,rgba(30,23,41,.1) 0)}
.cstep.on .sn{color:var(--green)}
.rail i{background:var(--green)}
.faq details[open] summary{color:var(--green-deep)}
.ph-dots button.on{background:var(--green)}
.ph-arrow:focus-visible,.ph-dots button:focus-visible{outline-color:var(--green)}
.tick-track span::after{background:var(--green)}
.phone-mock{background:#F3EFF9}

/* a janela do sistema no herói: base violeta escura */
.mwin{background:#241A32;border-color:rgba(255,255,255,.1)}
.mwin-bar{background:#2C2140;border-bottom-color:rgba(255,255,255,.08)}
.mwin-url{background:#1E1729;color:#9C92B0}
.mwin-user{background:#3B1470;color:#D9C2FF}
.mw-card{background:#1E1729}
.mw-lbl,.mw-sub,.pmeta{color:#9C92B0}
.mw-total b{color:#FFD166}
.mwin .venc-row span{color:#DCD5E8}
.msheet.s1{background:linear-gradient(135deg,#E4D8F5,#CDBAEA)}
.msheet.s2{background:linear-gradient(135deg,#F6E7F0,#EBD3E4)}
.sysp-live{color:#C9A6FF}
.sysp-live::before{background:#C9A6FF;box-shadow:0 0 0 3px rgba(201,166,255,.16)}
.chip.ok{color:#C9A6FF;background:rgba(201,166,255,.14)}
.chip.warn,.chip.wait{color:#FFD166;background:rgba(255,209,102,.14)}
.pval{color:#C9A6FF}
.stage::after{background:radial-gradient(90% 70% at 68% 42%,rgba(201,166,255,.16),transparent 62%),
  linear-gradient(160deg,rgba(27,18,38,.26),rgba(27,18,38,.58))}

/* seção escura */
.dark-sec{background:var(--dark)}
.dark-sec .idx .n,.dark-sec .kick::before{color:#C9A6FF}
.dark-sec .kick::before{background:#C9A6FF}
.sys-tags li::before{background:#C9A6FF}

/* painel da seção 05 (visão geral) na paleta do salão */
.painel{background:#241A32;border-color:rgba(255,255,255,.09)}
.painel-saude,.painel-venc{background:#1E1729}
.ring{background:conic-gradient(#C9A6FF calc(var(--pct,0)*1%),rgba(255,255,255,.1) 0)}
.ring::before{background:#1E1729}
.ring span i{color:#C9A6FF}
.pil>b{color:#C9A6FF}
.pil>b.warn{color:#FFD166}
.venc-top b{color:#FFD166}
.painel-badge{color:#C9A6FF;background:rgba(201,166,255,.12)}
.painel-live{color:#C9A6FF}
.painel-live::before{background:#C9A6FF}
.painel-float{background:#241A32;border-color:rgba(201,166,255,.3)}
.pf-status{color:#C9A6FF}
.pav-img{border-color:rgba(255,255,255,.16)}

/* telas do salão vêm em 1080x1920: moldura na proporção exata, sem corte */
.phone-mock{aspect-ratio:1080/1920}