:root{
  --tinta:#0B1A2A;
  --ouro:#C9A84C;
  --ouro-claro:#E4CE8E;
  --marfim:#F7F3E9;
  --papel:#F7F3E9;
  --areia:#EFE7D6;
  --texto:#1A2634;
  --texto-suave:#4A5768;
  --borda:rgba(11,26,42,.14);
  --cartao:#FFFDF7;
  --serif:"Bodoni MT","Didot","Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","Consolas",monospace;
  --lim:1180px;
}
@media (prefers-color-scheme:dark){
  :root{
    --papel:#0B1A2A; --texto:#F0EADC; --texto-suave:#B3BDCB;
    --borda:rgba(201,168,76,.22); --cartao:#12293F; --areia:#0F2235;
  }
}
:root[data-theme="dark"]{
  --papel:#0B1A2A; --texto:#F0EADC; --texto-suave:#B3BDCB;
  --borda:rgba(201,168,76,.22); --cartao:#12293F; --areia:#0F2235;
}
:root[data-theme="light"]{
  --papel:#F7F3E9; --texto:#1A2634; --texto-suave:#4A5768;
  --borda:rgba(11,26,42,.14); --cartao:#FFFDF7; --areia:#EFE7D6;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--papel); color:var(--texto);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
.lim{max-width:var(--lim); margin-inline:auto; padding-inline:24px}

h1,h2,h3{font-family:var(--serif); font-weight:400; text-wrap:balance; margin:0}
h1{font-size:clamp(2.6rem,6.6vw,4.9rem); line-height:1.02; letter-spacing:-.015em}
h2{font-size:clamp(2rem,4.2vw,3.1rem); line-height:1.08; letter-spacing:-.01em}
h3{font-size:1.35rem; line-height:1.25}
.olho{
  font-family:var(--sans); font-size:.72rem; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase; color:var(--ouro);
  margin:0 0 18px;
}
p{margin:0 0 1.1em}
.grande{font-size:1.16rem; color:var(--texto-suave)}

.filete{display:flex; align-items:center; gap:12px; margin:0 0 26px}
.filete::before,.filete::after{content:""; height:1px; background:var(--ouro); opacity:.45; flex:1}
.filete i{width:7px; height:7px; background:var(--ouro); transform:rotate(45deg); flex:none}
.filete.curto::before{flex:none; width:44px}
.filete.curto::after{display:none}

header.topo{
  position:sticky; top:0; z-index:40;
  background:rgba(11,26,42,.86); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(201,168,76,.22);
}
.topo .lim{display:flex; align-items:center; gap:14px; height:66px}
.marca{display:flex; align-items:center; gap:11px; color:var(--marfim); text-decoration:none}
.marca svg{width:26px; height:31px; flex:none}
.marca span{font-family:var(--serif); font-size:1.24rem; letter-spacing:.04em}
.marca b{color:var(--ouro); font-weight:400}
/* A MESMA REGRA VALE PARA A MARCA FORA DO CABECALHO (entrar, foto): o
   nome e' CondoFace, `Condo` no marfim e `Face` no ouro do escudo. Antes
   cada pagina escrevia do seu jeito e o dono via tres marcas diferentes. */
h1 b{color:var(--ouro); font-weight:inherit}
.topo nav{margin-left:auto; display:flex; align-items:center; gap:26px}
.topo nav a{
  color:#CBD5E1; text-decoration:none; font-size:.86rem;
  letter-spacing:.1em; text-transform:uppercase;
}
.topo nav a:hover{color:var(--ouro-claro)}
@media (max-width:760px){.topo nav a.some{display:none}}

/* DOIS BOTOES FIXOS NA BARRA (pedido do dono, 21/09): "Quanto custa?" (contornado,
   link vazio ate a secao de valores existir) e "Fale Conosco" (verde e icone do
   WhatsApp, mesmo numero do "Quero no meu condominio"). Sem botao de Entrar: quem
   administra digita /admin. Os dois NUNCA somem no celular — os links de secao sim. */
.topo nav a.topo-botao{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 18px; border-radius:2px; font-weight:600; white-space:nowrap;
  transition:background .25s, border-color .25s, color .25s;
}
.topo nav a.custo{border:1px solid rgba(201,168,76,.66); color:var(--ouro-claro); text-transform:none; letter-spacing:.02em; font-size:.92rem}
.topo nav a.custo:hover{background:var(--ouro); border-color:var(--ouro); color:#0B1A2A}
.topo nav a.zap{background:#25D366; border:1px solid #25D366; color:#0B1A2A; text-transform:none; letter-spacing:.02em; font-size:.92rem}
.topo nav a.zap:hover{background:#1EBE5A; border-color:#1EBE5A; color:#0B1A2A}
.topo nav a.zap svg{flex:none}
@media (max-width:760px){
  .topo nav{gap:8px}
  .topo nav a.topo-botao{padding:8px 12px; font-size:.78rem}
  .topo nav a.zap{font-size:.84rem}
}
@media (max-width:400px){
  .topo nav a.topo-botao{padding:8px 9px; font-size:.72rem; letter-spacing:.04em}
  .topo nav a.zap{font-size:.78rem; gap:5px}
  .marca span{font-size:1.08rem}
}

.botao{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px; border-radius:2px; text-decoration:none;
  font-size:.82rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  background:var(--ouro); color:#0B1A2A; border:1px solid var(--ouro);
  transition:background .25s, transform .25s, box-shadow .25s;
}
.botao:hover{background:var(--ouro-claro); border-color:var(--ouro-claro); transform:translateY(-2px);
  box-shadow:0 12px 30px -14px rgba(201,168,76,.75)}
.botao.vazio{background:transparent; color:var(--ouro-claro)}
.botao.vazio:hover{background:rgba(201,168,76,.12); color:var(--ouro-claro)}
:focus-visible{outline:2px solid var(--ouro-claro); outline-offset:3px}

.heroi{position:relative; background:#0B1A2A; color:var(--marfim); overflow:hidden}
.heroi .foto{position:absolute; inset:0}
.heroi .foto img{width:100%; height:100%; object-fit:cover; opacity:.5}
.heroi .veu{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 85% at 22% 42%, rgba(11,26,42,.94) 0%, rgba(11,26,42,.72) 42%, rgba(11,26,42,.42) 100%),
    linear-gradient(180deg, rgba(11,26,42,.85) 0%, rgba(11,26,42,.2) 40%, rgba(11,26,42,.96) 100%);
}
.heroi .lim{position:relative; padding-block:130px 118px}
.heroi-caixa{max-width:660px}
.heroi h1{color:var(--marfim)}
.heroi h1 em{font-style:italic; color:var(--ouro)}
.heroi .sub{font-size:1.24rem; color:#D5DDE7; max-width:31em; margin-top:26px}
.heroi .acoes{display:flex; flex-wrap:wrap; gap:14px; margin-top:38px}
.heroi .selo{
  margin-top:44px; display:flex; flex-wrap:wrap; gap:10px 26px;
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:#93A3B5;
}
.heroi .selo b{color:var(--ouro-claro); font-weight:600}
@media (max-width:900px){.heroi .lim{padding-block:88px 78px}}

.raios{position:absolute; top:-90px; right:-120px; width:620px; height:620px; opacity:.16; pointer-events:none}

.cenas{padding-block:96px 40px}
.cena{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,76px);
  align-items:center; margin-bottom:clamp(76px,9vw,124px);
}
.cena:nth-child(even) .arte{order:2}
.cena .texto{max-width:34em}
.cena h2 em{font-style:italic; color:var(--ouro)}
.cena .frase{
  font-family:var(--serif); font-size:1.5rem; line-height:1.35;
  color:var(--texto); margin:22px 0 18px; font-style:italic;
}
.arte{position:relative}
.arte img{
  width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:3px;
  box-shadow:0 34px 70px -34px rgba(11,26,42,.55);
}
.arte::after{
  content:""; position:absolute; inset:12px; border:1px solid rgba(201,168,76,.55);
  border-radius:2px; pointer-events:none;
}
.arte .legenda{
  position:absolute; left:0; bottom:-34px;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--texto-suave);
}
@media (max-width:860px){
  .cena{grid-template-columns:1fr; gap:26px}
  .cena:nth-child(even) .arte{order:0}
  .arte .legenda{position:static; margin-top:12px}
}

.faixa{background:var(--tinta); color:var(--marfim); padding-block:92px; position:relative; overflow:hidden}
.faixa h2{color:var(--marfim)}
.faixa h2 em{font-style:italic; color:var(--ouro)}
.faixa .grande{color:#C3CDDA}
.grade3{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:52px;
  background:rgba(201,168,76,.28); border:1px solid rgba(201,168,76,.28)}
.grade3 .cel{background:var(--tinta); padding:34px 30px}
.grade3 h3{color:var(--ouro-claro); margin-bottom:12px}
.grade3 p{color:#B9C4D2; margin:0; font-size:.97rem}

.contra{padding-block:96px; background:var(--areia)}
.contra-grade{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:26px; margin-top:52px}
.contra-item{background:var(--cartao); border:1px solid var(--borda); border-top:3px solid var(--ouro); padding:30px 28px}
.contra-item .antes{
  /* O risco no texto pretendia dizer "isso fica para tras", mas na leitura ele
     parece o titulo do card quebrado. A oposicao passa a ser dita com palavra
     ("Hoje") e cor, nao com uma linha em cima do texto. */
  font-size:.72rem; color:var(--texto-suave); margin-bottom:10px; display:block;
  letter-spacing:.16em; text-transform:uppercase; opacity:.85;
}
.contra-item .antes::before{
  content:"Hoje: "; color:var(--ouro); font-weight:600;
}
.contra-item h3{margin-bottom:10px; font-size:1.2rem}
.contra-item p{margin:0; font-size:.97rem; color:var(--texto-suave)}

.tecnico{padding-block:88px}
details.saiba{border-top:1px solid var(--borda); border-bottom:1px solid var(--borda)}
details.saiba summary{
  list-style:none; cursor:pointer; padding:30px 0;
  display:flex; align-items:center; gap:18px;
  font-family:var(--serif); font-size:1.6rem;
}
details.saiba summary::-webkit-details-marker{display:none}
details.saiba summary .mais{
  margin-left:auto; flex:none; width:38px; height:38px; border:1px solid var(--ouro);
  border-radius:50%; display:grid; place-items:center; color:var(--ouro);
  font-family:var(--sans); font-size:1.2rem; transition:transform .3s;
}
details.saiba[open] summary .mais{transform:rotate(45deg)}
details.saiba .conteudo{padding-bottom:44px}
.tec-grade{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:34px 44px; margin-top:14px}
.tec-item h4{
  font-family:var(--sans); font-size:.78rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ouro); margin:0 0 8px;
}
.tec-item p{font-size:.97rem; color:var(--texto-suave); margin:0}

.fecho{background:var(--tinta); color:var(--marfim); padding-block:106px; text-align:center; position:relative; overflow:hidden}
.fecho h2{color:var(--marfim); max-width:16em; margin-inline:auto}
.fecho h2 em{font-style:italic; color:var(--ouro)}
.fecho p{color:#BCC7D5; max-width:34em; margin:22px auto 36px}
.fecho .filete{max-width:220px; margin-inline:auto}
footer{background:#08131F; color:#7E8B9B; padding-block:34px; font-size:.82rem}
footer .lim{display:flex; flex-wrap:wrap; gap:12px 30px; align-items:center}
footer b{color:var(--ouro); font-weight:600}

@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* Linha de contato direto sob a chamada: quem ja decidiu nao quer abrir um
   formulario, quer o numero. */
.fecho .contato{margin-top:22px; font-size:.95rem; color:#B9C8DA}
.fecho .contato a{color:var(--ouro-claro); text-decoration:none; border-bottom:1px solid rgba(201,168,76,.4)}
.fecho .contato a:hover{color:#fff; border-bottom-color:#fff}

/* Lightbox do video. O filme e' vertical 9:16: a altura e' que manda, e a
   largura vem dela — o contrario deixaria tarja preta gigante no desktop. */
.veu-video{
  position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center;
  background:rgba(6,14,24,.92); backdrop-filter:blur(6px); padding:24px;
}
.veu-video[hidden]{display:none}
.veu-video video{
  height:min(86vh, 900px); width:auto; max-width:94vw; border-radius:4px;
  box-shadow:0 30px 90px -30px rgba(0,0,0,.9); background:#000;
}
.veu-video .fechar{
  position:absolute; top:18px; right:24px; width:46px; height:46px; line-height:1;
  font-size:2rem; color:var(--marfim); background:transparent; cursor:pointer;
  border:1px solid rgba(201,168,76,.5); border-radius:50%;
}
.veu-video .fechar:hover{background:rgba(201,168,76,.16)}
/* o segundo botao do heroi virou <button>: zera o que o navegador poe nele */
.acoes button.botao{font-family:inherit; cursor:pointer; line-height:1}

/* ======================================================================
   18/09/2026 — página nova: celular com a tela REAL do app, faixa de
   confiança, 6 células do síndico, portaria, 3 passos, tabela "Hoje x
   Com o CondoFace" e perguntas. Mesmos tokens de sempre.
   ====================================================================== */

/* A moldura do celular. Sem notch nem botão: o suficiente para ler "isto
   é um celular" e enxergar o botão pelo nome que está escrito nele. */
.cel{
  flex:none; width:190px; padding:6px; border-radius:26px; background:#08131F;
  border:1px solid rgba(201,168,76,.45);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8);
}
.cel img{display:block; width:100%; height:auto; border-radius:20px; aspect-ratio:auto; box-shadow:none}

/* Cena com foto + celular lado a lado. O ::after (moldura dourada) da
   .arte é da foto sozinha; aqui cada peça tem a sua. */
.arte.dupla{display:flex; gap:24px; align-items:flex-end}
.arte.dupla::after{display:none}
.arte.dupla .cena-img{flex:1 1 0; min-width:0; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover}
.arte.dupla .cel{align-self:flex-end}
@media (max-width:520px){
  .arte.dupla{align-items:center}
  .cel{width:150px}
}

/* Herói com o celular à direita. Abaixo de 900px ele desce para baixo do
   texto, menor e sem inclinação — inclinado ele sairia da tela. */
.heroi-duplo{display:flex; align-items:center; gap:60px}
.heroi .cel.grande{
  width:300px; padding:10px; border-radius:40px; margin-left:auto;
  transform:rotate(-4deg); box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
}
.heroi .cel.grande img{border-radius:30px; height:560px; width:280px; object-fit:cover; object-position:top}
@media (max-width:900px){
  .heroi-duplo{flex-direction:column; align-items:flex-start; gap:40px}
  .heroi .cel.grande{width:220px; padding:8px; margin:0 auto; transform:none}
  .heroi .cel.grande img{width:204px; height:400px; border-radius:24px}
}

/* Faixa de confiança: selos, não logotipos. */
.confianca{background:#08131F; border-top:1px solid rgba(201,168,76,.22); color:#B9C4D2}
.confianca .lim{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px 44px;
  padding-block:22px; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
}
.confianca span{display:flex; align-items:center; gap:10px}
.confianca svg{width:18px; height:18px; fill:none; stroke:var(--ouro); stroke-width:2; flex:none}

/* Seis células do síndico: SEMPRE 3 x 2 no desktop (o auto-fit dava 4 + 2 e
   pintava duas células vazias), 2 colunas no tablet, 1 no celular. */
@media (max-width:900px){.grade3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grade3{grid-template-columns:1fr}}
.grade3 .cel-item{background:var(--tinta); padding:34px 30px}
.grade3 .cel-item h3{color:var(--ouro-claro); margin-bottom:12px; font-size:1.25rem}
.grade3 .cel-item p{color:#B9C4D2; margin:0; font-size:.97rem}
.faixa-telas{display:flex; gap:40px; align-items:flex-start; margin-top:48px; flex-wrap:wrap}
.faixa-telas .cel{width:220px; padding:7px; border-radius:30px}
.faixa-telas .cel img{border-radius:24px}
.faixa-telas .cel.desloca{margin-top:40px}
.faixa-telas p{color:#93A3B5; font-size:.95rem; max-width:26em; align-self:center; margin:0}
@media (max-width:640px){.faixa-telas .cel.desloca{margin-top:0}}

/* A portaria: a mesma grade de cena, sobre a areia. */
.contra.portaria{padding-block:80px}
.contra.portaria .cena{margin-bottom:0}
.contra.portaria .cena .arte{order:2}
@media (max-width:860px){.contra.portaria .cena .arte{order:0}}

/* Três passos. */
.passos{padding-block:92px 80px}
.passos-grade{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:26px; margin-top:44px}
.passo{background:var(--cartao); border:1px solid var(--borda); border-top:3px solid var(--ouro); padding:30px 28px}
.passo .num{font-family:var(--serif); font-size:2.5rem; color:var(--ouro); line-height:1; display:block; margin-bottom:10px}
.passo h3{font-size:1.2rem; margin-bottom:10px}
.passo p{margin:0; font-size:.97rem; color:var(--texto-suave)}

/* Tabela "Hoje x Com o CondoFace": duas colunas de verdade, e no celular a
   linha "com" vem logo abaixo da linha "hoje" — a leitura em par é o que
   convence. */
.tabela{display:grid; grid-template-columns:1fr 1fr; gap:2px; margin-top:44px; background:var(--borda); border:1px solid var(--borda)}
.tabela .cab{padding:14px 24px; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600}
.tabela .cab.hoje{background:#E4DCC8; color:#4A5768}
.tabela .cab.com{background:var(--tinta); color:var(--ouro-claro)}
.tabela div[role="cell"]{background:var(--cartao); padding:20px 24px; font-size:1rem; line-height:1.5}
.tabela div[role="cell"]:nth-child(2n+1){color:var(--texto-suave)}
@media (max-width:700px){
  .tabela{grid-template-columns:1fr}
  .tabela .cab.com{display:none}
  .tabela div[role="cell"]:nth-child(2n+1){padding-bottom:6px}
  .tabela div[role="cell"]:nth-child(2n+1)::before{content:"Hoje: "; color:var(--ouro); font-weight:600}
  .tabela div[role="cell"]:nth-child(2n){padding-top:6px; border-bottom:1px solid var(--borda)}
  .tabela div[role="cell"]:nth-child(2n)::before{content:"Com o CondoFace: "; color:var(--ouro); font-weight:600}
}
@media (prefers-color-scheme:dark){.tabela .cab.hoje{background:#1C3350; color:#B9C4D2}}
:root[data-theme="dark"] .tabela .cab.hoje{background:#1C3350; color:#B9C4D2}

/* Perguntas: <details> nativo, nada de script. */
.perguntas{padding-block:92px}
.faq{display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:0 44px; margin-top:30px}
.faq details{border-top:1px solid var(--borda); padding:16px 0}
.faq summary{
  list-style:none; cursor:pointer; font-family:var(--serif); font-size:1.3rem;
  display:flex; align-items:center; gap:14px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; margin-left:auto; flex:none; width:30px; height:30px; border:1px solid var(--ouro);
  border-radius:50%; display:grid; place-items:center; color:var(--ouro); font-family:var(--sans); font-size:1rem;
  transition:transform .3s;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:12px 0 0; font-size:.97rem; line-height:1.6; color:var(--texto-suave)}

/* Lightbox: o quadro do YouTube ocupa a mesma altura do filme vertical. */
.veu-video .quadro{width:min(94vw,900px); aspect-ratio:16/9; background:#000; border-radius:4px; overflow:hidden}
.veu-video .quadro[hidden]{display:none}
.veu-video .quadro iframe{width:100%; height:100%; border:0; display:block}


/* ======================================================================
   PÁGINA "QUANTO CUSTA?" (quanto-custa.html), 21/09/2026. Mesmos tokens do
   site; as classes daqui só existem nessa página.
   ====================================================================== */
.precos-heroi{background:var(--tinta); color:var(--marfim); position:relative; overflow:hidden}
.precos-heroi-lim{display:flex; align-items:center; gap:56px; padding-block:96px 84px}
.precos-texto{flex:1 1 0; min-width:0}
.precos-heroi h1{color:var(--marfim)}
.precos-heroi .sub{font-size:1.2rem; color:#D5DDE7; max-width:30em; margin-top:24px}
.precos-heroi .sub strong{color:var(--ouro-claro); font-weight:600}
.precos-nota{color:#93A3B5; font-size:.95rem; max-width:32em; margin-top:14px}
.precos-heroi .acoes{display:flex; gap:14px; flex-wrap:wrap; margin-top:30px}
.precos-leitor{flex:0 0 46%; margin:0}
.precos-leitor img{display:block; width:100%; height:auto; border-radius:6px; border:1px solid rgba(201,168,76,.45); box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.precos-leitor figcaption{color:#93A3B5; font-size:.9rem; margin-top:12px}
@media (max-width:900px){
  .precos-heroi-lim{flex-direction:column; align-items:flex-start; gap:36px; padding-block:64px 56px}
  .precos-leitor{flex:none; width:100%}
}

.planos{background:var(--papel); padding-block:88px}
.planos-grade{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:stretch}
@media (max-width:1000px){.planos-grade{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.planos-grade{grid-template-columns:1fr}}
.plano{background:var(--cartao); border:1px solid var(--borda); border-top:3px solid var(--ouro); display:flex; flex-direction:column; overflow:hidden}
.plano.destaque{border-top-color:var(--ouro); box-shadow:0 30px 60px -36px rgba(11,26,42,.55); position:relative}
.plano.destaque::before{content:"Mais escolhido"; position:absolute; top:14px; left:14px; z-index:1; background:var(--ouro); color:#0B1A2A; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; padding:6px 10px; border-radius:2px}
.plano-img img{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover}
.plano-corpo{padding:26px 26px 28px; display:flex; flex-direction:column; flex:1}
.plano h2{font-size:1.9rem; margin-top:4px}
.plano-desc{color:var(--texto-suave); margin:10px 0 18px; font-size:.98rem}
.plano-precos{display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:16px 0; border-top:1px solid var(--borda); border-bottom:1px solid var(--borda)}
.plano-precos div{display:flex; flex-direction:column}
.plano-precos .rotulo{font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--texto-suave)}
.plano-precos .valor{font-family:var(--serif); font-size:2rem; line-height:1.1; color:var(--texto); margin-top:4px; font-variant-numeric:tabular-nums}
.plano-precos .obs{font-size:.8rem; color:var(--texto-suave); margin-top:2px}
.inclui{list-style:none; padding:0; margin:18px 0 24px; display:flex; flex-direction:column; gap:9px; font-size:.95rem; color:var(--texto)}
.inclui li{padding-left:24px; position:relative}
.inclui li::before{content:""; position:absolute; left:2px; top:.5em; width:9px; height:9px; background:var(--ouro); transform:rotate(45deg)}
.plano .botao{margin-top:auto; text-align:center; justify-content:center}
.plano .botao.vazio{color:var(--texto); border-color:var(--ouro)}

.todo-plano{background:var(--areia); padding-block:88px}
.todo-plano .grade3{margin-top:36px}

.conta{background:var(--papel); padding-block:88px}
.conta-lim{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start}
@media (max-width:860px){.conta-lim{grid-template-columns:1fr}}
.conta h2 em{font-style:italic; color:var(--ouro)}
.conta p{color:var(--texto-suave); max-width:36em; margin-top:16px}
.tabela-conta{border-collapse:collapse; margin-top:22px; min-width:320px; font-variant-numeric:tabular-nums}
.tabela-conta th{text-align:left; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--texto-suave); padding:0 18px 10px 0; border-bottom:1px solid var(--borda); font-weight:600}
.tabela-conta td{padding:12px 18px 12px 0; border-bottom:1px solid var(--borda); font-size:1.15rem; color:var(--texto)}
.tabela-conta td:last-child{font-family:var(--serif); font-size:1.5rem}
.conta-compara{background:var(--tinta); color:var(--marfim); padding:34px 32px; border-top:3px solid var(--ouro)}
.conta-compara .grande{color:var(--marfim); font-size:1.2rem; margin-top:12px}
.conta-compara .grande strong{color:var(--ouro-claro); font-weight:600}
.conta-compara p{color:#BCC7D5; max-width:none}
.conta-compara .fonte{font-size:.82rem; color:#8A9AAD; margin-top:18px}
.topo nav a.custo.atual{background:rgba(201,168,76,.16)}

/* Comparativo com portaria remota (substituiu a conta por unidade, 21/09) */
.compara{background:var(--tinta); color:var(--marfim); padding-block:96px; text-align:center}
.compara h2{color:var(--marfim); max-width:22em; margin-inline:auto}
.compara h2 em{font-style:italic; color:var(--ouro)}
.compara-linha{display:flex; align-items:stretch; justify-content:center; gap:28px; margin-top:48px; flex-wrap:wrap}
.compara-num{flex:0 1 380px; border:1px solid rgba(201,168,76,.35); padding:28px 26px; display:flex; flex-direction:column; gap:6px}
.compara-num.destaque{border-color:var(--ouro); background:rgba(201,168,76,.10)}
.compara-num .rotulo{font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:#93A3B5}
.compara-num .valor{font-family:var(--serif); font-size:clamp(2rem,4vw,2.9rem); line-height:1.05; color:var(--marfim); font-variant-numeric:tabular-nums}
.compara-num.destaque .valor{color:var(--ouro-claro)}
.compara-num .obs{font-size:.88rem; color:#BCC7D5}
.compara-vs{align-self:center; font-family:var(--serif); font-style:italic; color:var(--ouro); font-size:1.3rem}
.compara-texto{color:#BCC7D5; max-width:40em; margin:36px auto 0}
.compara .fonte{font-size:.82rem; color:#8A9AAD; margin-top:16px}