/* Riskallah Jorge — folha de estilo única.
   Sem framework de propósito: o site é pequeno e o próximo a mexer aqui
   provavelmente não é programador.

   ============================================================================
   O DESENHO VEM DO PRÉDIO
   ============================================================================
   O edifício é de 1945, em arquitetura neoclássica: embasamento de pedra, fuste
   com pilastras verticais, coroamento com arcos e cornija, e guarda-corpos de
   ferro batido. A página usa os mesmos elementos, traduzidos para CSS:

     - a cor de fundo é a do travertino da fachada, não branco de tela;
     - os títulos usam uma serifa de contraste alto (Cormorant Garamond), que é
       a letra do período — mesmo desenho das inscrições em pedra;
     - o texto corrido usa Lora, serifa feita para tela: o site tem convenção e
       regulamento para ler, e isso é leitura longa;
     - o dourado é o do ferro batido dos balcões, e é a ÚNICA cor de destaque —
       em prédio neoclássico o ornamento é escasso e localizado;
     - as bordas de fio duplo (`3px double`) e os losangos são o vocabulário
       clássico de moldura e ornamento, feitos sem imagem nenhuma.

   O dourado sai de `--marca`, que o base.html sobrescreve com a cor cadastrada
   no painel. Quem instalar o sistema em outro condomínio troca as duas cores e
   fica com a mesma tipografia e o mesmo ritmo, na cor da casa dele.
   ============================================================================ */

/* ==========================================================================
   FONTES
   Hospedadas aqui, e não no Google Fonts, porque o condomínio é controlador dos
   dados dos moradores: pedir a fonte ao Google entregaria o IP de cada visitante
   a um terceiro sem que ninguém tivesse consentido com isso.
   ========================================================================== */
@font-face{font-family:Cormorant;src:url("../fontes/cormorant-300-latin.c47ff12887a3.woff2") format("woff2");
  font-weight:300;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Cormorant;src:url("../fontes/cormorant-300-latinext.acc46a2a7785.woff2") format("woff2");
  font-weight:300;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Cormorant;src:url("../fontes/cormorant-400-latin.c47ff12887a3.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Cormorant;src:url("../fontes/cormorant-400-latinext.acc46a2a7785.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Cormorant;src:url("../fontes/cormorant-600-latin.c47ff12887a3.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Cormorant;src:url("../fontes/cormorant-600-latinext.acc46a2a7785.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:Lora;src:url("../fontes/lora-400-latin.9577af3ccda5.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Lora;src:url("../fontes/lora-400-latinext.1d361631357e.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Lora;src:url("../fontes/lora-400-italic-latin.e7ae818b8c7b.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Lora;src:url("../fontes/lora-400-italic-latinext.059c98dd80a1.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Lora;src:url("../fontes/lora-500-latin.9577af3ccda5.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Lora;src:url("../fontes/lora-500-latinext.1d361631357e.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Lora;src:url("../fontes/lora-600-latin.9577af3ccda5.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Lora;src:url("../fontes/lora-600-latinext.1d361631357e.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF}

/* ==========================================================================
   CORES E MEDIDAS
   ========================================================================== */
:root{
  /* A pedra da fachada. Nada de #fff: travertino não é branco de tela. */
  --fundo:#f7f3ea;
  --fundo-suave:#efe7d7;
  --papel:#fcfaf5;

  --tinta:#221f1a;
  --tinta-fraca:#6d6355;
  --linha:#dbcfb8;
  --linha-fina:#e8e0d0;

  /* O ferro batido dos balcões e o basalto do embasamento. */
  --ferro:#1b1d1a;
  --ferro-claro:#2c2f2b;

  --marca:#94742f;          /* sobrescrito pelo base.html com a cor do painel */
  --marca-escura:#6f5622;
  --marca-clara:#c4a25c;

  --alerta:#8e2b20;
  --ok:#2f6a4f;

  --serifa:Lora,"Iowan Old Style","Palatino Linotype",Georgia,serif;
  --titulo:Cormorant,"Cormorant Garamond","Apple Garamond",Garamond,Georgia,serif;

  --max:1040px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0; color:var(--tinta); background:var(--fundo);
  font:17px/1.72 var(--serifa);
  font-feature-settings:"kern" 1,"liga" 1;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

/* Cormorant é uma serifa de contraste alto e desenho leve. Em corpo grande fica
   elegante; em corpo pequeno some. Por isso só títulos e números grandes. */
h1,h2,h3{font-family:var(--titulo); font-weight:400; line-height:1.15; margin:0 0 .45em}
h1{font-size:clamp(2.1rem,5vw,3.1rem); letter-spacing:.005em}
h2{font-size:clamp(1.5rem,3vw,2rem)}
h3{font-size:1.25rem; font-weight:500}

p{margin:0 0 1.1em}
a{color:var(--marca-escura); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--marca)}
small{color:var(--tinta-fraca)}
strong,b{font-weight:600}
::selection{background:var(--marca-clara); color:var(--ferro)}
:focus-visible{outline:2px solid var(--marca); outline-offset:2px}

.faixa{max-width:var(--max); margin:0 auto; padding:0 24px}
.faixa.estreita{max-width:440px}
.faixa.estreita-media{max-width:660px}
main section{padding-block:2.2rem}

/* ==========================================================================
   ORNAMENTOS
   O vocabulário clássico — moldura de fio duplo, losango, filete — feito só com
   borda e pseudo-elemento. Nenhuma imagem: carrega instantâneo e imprime bem.
   ========================================================================== */

/* Losango entre dois filetes que se apagam nas pontas. Entre seções longas.
   Precisa de uma <div class="ornamento"> vazia no template. */
.ornamento{height:16px; margin:2.8rem auto; max-width:300px; position:relative}
.ornamento::before{content:""; position:absolute; top:50%; left:0; right:0; height:1px;
        background:linear-gradient(90deg,transparent,var(--linha) 25%,var(--linha) 75%,transparent)}
.ornamento::after{content:""; position:absolute; top:50%; left:50%; width:8px; height:8px;
        margin:-4px 0 0 -4px; transform:rotate(45deg); background:var(--marca)}

/* O filete curto acima de cada título de seção. É o que dá ritmo à página sem
   precisar de caixa, sombra ou fundo colorido em cada bloco. */
main section>.faixa>h2,
main>.faixa>h2{position:relative; padding-top:1.15rem; margin-top:0}
main section>.faixa>h2::before,
main>.faixa>h2::before{content:""; position:absolute; top:0; left:0;
        width:48px; height:2px; background:var(--marca)}

/* Sobretítulo em maiúscula espaçada: o rótulo gravado acima da porta. */
.sobretitulo{font-family:var(--serifa); font-size:.72rem; font-weight:600;
        text-transform:uppercase; letter-spacing:.26em; color:var(--marca);
        margin:0 0 1rem}

/* ==========================================================================
   TOPO
   ========================================================================== */
.topo{background:var(--papel); border-bottom:3px double var(--marca); padding-block:16px}
.topo .faixa{display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap}

.marca{text-decoration:none; color:var(--tinta); display:flex; flex-direction:column; line-height:1.2}
.marca strong{font-family:var(--titulo); font-size:1.5rem; font-weight:600; letter-spacing:.02em}
.marca small{font-size:.68rem; text-transform:uppercase; letter-spacing:.18em;
        color:var(--tinta-fraca); margin-top:3px}
.marca .logo{max-height:46px; width:auto; display:block}

/* O menu tem dois níveis: o primeiro cabe numa linha, o segundo desce ao passar
   o ponteiro ou ao receber o foco do teclado. Sem JavaScript — é menu, não
   aplicação. Ver o comentário no base.html para o porquê dos grupos. */
.topo nav{display:flex; align-items:center}
.menu{list-style:none; margin:0; padding:0; display:flex; gap:22px; align-items:center;
        flex-wrap:wrap}
.menu>li{position:relative}

.topo nav a{text-decoration:none; color:var(--tinta-fraca); font-size:.87rem;
        letter-spacing:.06em; position:relative; padding-bottom:2px; white-space:nowrap}
.topo nav a:hover{color:var(--marca-escura)}
/* Sublinhado que nasce do centro: discreto, e não empurra o texto no hover. */
.menu>li>a:not(.botao)::after{content:""; position:absolute; left:50%; right:50%; bottom:0;
        height:1px; background:var(--marca); transition:left .18s ease,right .18s ease}
.menu>li>a:not(.botao):hover::after{left:0; right:0}

/* A seta some na impressão e para quem prefere menos movimento — é enfeite. */
.grupo>a::before{content:"▾"; float:right; margin-left:7px; font-size:.7em;
        color:var(--marca); opacity:.7; line-height:1.9}

.submenu{list-style:none; margin:0; padding:8px 0; position:absolute; top:100%; left:-16px;
        min-width:220px; background:var(--papel); border:1px solid var(--linha);
        border-top:2px solid var(--marca); z-index:40;
        opacity:0; visibility:hidden; transform:translateY(-4px);
        transition:opacity .16s ease,transform .16s ease,visibility .16s;
        box-shadow:0 10px 24px rgba(34,31,26,.09)}
/* Ponte invisível entre o item e o submenu: sem ela, o menu fecha no vão de 1px
   que o ponteiro atravessa para descer até o primeiro link. */
.grupo::after{content:""; position:absolute; top:100%; left:0; right:0; height:10px}
.grupo:hover .submenu,
.grupo:focus-within .submenu{opacity:1; visibility:visible; transform:translateY(0)}
.submenu a{display:block; padding:9px 18px; font-size:.86rem; white-space:nowrap}
.submenu a:hover{background:var(--fundo-suave); color:var(--marca-escura)}
.submenu a::after{display:none}

.sair{margin:0}
.sair form{margin:0}
.sair button{background:none; border:0; color:var(--tinta-fraca); cursor:pointer;
        font:inherit; font-size:.87rem; letter-spacing:.06em; padding:0}
.sair button:hover{color:var(--alerta)}

/* ==========================================================================
   BOTÕES
   Retangulares e de fio fino, como placa de bronze — não a cápsula arredondada
   que é a assinatura de todo site de 2020.
   ========================================================================== */
.botao{
  display:inline-block; background:transparent; color:var(--marca-escura)!important;
  text-decoration:none; padding:11px 26px; border:1px solid var(--marca);
  font:inherit; font-size:.8rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.16em; cursor:pointer; border-radius:0;
  transition:background .18s ease,color .18s ease;
}
.botao:hover{background:var(--marca); color:var(--papel)!important}
.botao.cheio{background:var(--marca); color:var(--papel)!important}
.botao.cheio:hover{background:var(--marca-escura); border-color:var(--marca-escura)}

/* ==========================================================================
   CAPA
   ========================================================================== */
.capa{background:var(--fundo-suave); border-bottom:1px solid var(--linha);
      padding-block:4rem!important}
.capa h1{margin-bottom:.25em}
.chamada{font-size:1.16rem; color:var(--tinta-fraca); max-width:56ch; line-height:1.68}

.capa.com-foto{position:relative; padding-block:clamp(4rem,13vh,7.5rem)!important;
        color:#fff; background:var(--ferro); overflow:hidden; border-bottom:0}
.capa.com-foto .foto-capa{position:absolute; inset:0; width:100%; height:100%;
        object-fit:cover; opacity:.5; filter:grayscale(.25) contrast(1.05)}
/* Véu em dois tempos: escurece embaixo, onde fica o texto, e deixa o coroamento
   do prédio aparecer em cima. Um véu chapado apagaria a arquitetura. */
.capa.com-foto::before{content:""; position:absolute; inset:0;
        background:linear-gradient(180deg,rgba(27,29,26,.28) 0%,rgba(27,29,26,.52) 55%,rgba(27,29,26,.82) 100%)}
/* A moldura de fio dourado — a mesma ideia do friso da cornija. */
.capa.com-foto::after{content:""; position:absolute; inset:clamp(14px,3vw,30px);
        border:1px solid rgba(196,162,92,.5); pointer-events:none}
.capa.com-foto .faixa{position:relative}
.capa.com-foto h1{color:#fff; font-weight:300; text-shadow:0 1px 24px rgba(0,0,0,.4)}
.capa.com-foto .chamada{color:rgba(255,255,255,.88)}
.capa.com-foto .sobretitulo{color:var(--marca-clara); filter:brightness(1.25);
        text-shadow:0 1px 10px rgba(0,0,0,.6)}
.capa.com-foto .botao{border-color:var(--marca-clara); color:var(--marca-clara)!important}
.capa.com-foto .botao:hover{background:var(--marca-clara); color:var(--ferro)!important}
.credito-capa{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
        opacity:.7; margin:2rem 0 0}

/* ==========================================================================
   FICHA TÉCNICA
   Placa de bronze: fio duplo em volta, rótulo em maiúscula espaçada, número
   grande em Cormorant. É o quadro de informações do saguão.
   ========================================================================== */
.ficha{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
       gap:0; margin:1.4rem 0; border:3px double var(--linha); background:var(--papel)}
.ficha>div{padding:20px 22px; border-right:1px solid var(--linha-fina);
       border-bottom:1px solid var(--linha-fina)}
.ficha dt{font-size:.68rem; text-transform:uppercase; letter-spacing:.18em;
       color:var(--tinta-fraca); font-weight:600}
.ficha dd{margin:.35em 0 0; font-family:var(--titulo); font-size:1.75rem;
       font-weight:500; line-height:1.15; font-variant-numeric:lining-nums tabular-nums}

.historia p{max-width:68ch}
/* Capitular: a primeira letra da história do prédio, como em livro. */
.historia>.faixa>p:first-of-type::first-letter,
.abertura::first-letter{
  font-family:var(--titulo); font-size:3.6em; font-weight:600; line-height:.82;
  float:left; margin:.06em .1em 0 0; color:var(--marca);
}
.destaque{font-weight:600; color:var(--marca-escura)}

/* ==========================================================================
   TABELAS — dentro de .rolagem para não empurrar a página no celular
   ========================================================================== */
.rolagem{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:1.2rem 0}
.rolagem .tabela{margin:0; min-width:640px}
.tabela{width:100%; border-collapse:collapse; margin:1.2rem 0; font-size:.95rem;
        background:var(--papel)}
.tabela th,.tabela td{text-align:left; padding:11px 14px;
        border-bottom:1px solid var(--linha-fina); vertical-align:top}
.tabela th{background:transparent; font-size:.68rem; font-weight:600;
        text-transform:uppercase; letter-spacing:.16em; color:var(--tinta-fraca);
        border-bottom:1px solid var(--linha)}
.tabela tbody tr:hover{background:var(--fundo)}
.tabela .unidades{color:var(--tinta-fraca); font-size:.85rem}
.tabela .valor{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.tabela .linha-total td{border-top:2px solid var(--linha); font-weight:600}

/* ==========================================================================
   CARTÕES
   ========================================================================== */
.cartoes{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px}
.cartao{
  display:block; text-decoration:none; color:inherit; background:var(--papel);
  border:1px solid var(--linha); padding:20px 22px;
  transition:border-color .18s ease,transform .18s ease;
}
.cartao:hover{border-color:var(--marca); transform:translateY(-2px)}
.cartao h3{color:var(--tinta); margin-bottom:.3em}
.cartao:hover h3{color:var(--marca-escura)}
.cartao p{margin:.2em 0; color:var(--tinta-fraca); font-size:.9rem}
.cartao .pct{font-variant-numeric:tabular-nums}

/* ==========================================================================
   LISTAS E AVISOS
   ========================================================================== */
.lista,.lista-docs{padding-left:1.2rem}
.lista li,.lista-docs li{margin:.4em 0}
.lista-docs{list-style:none; padding-left:0}
.lista-docs li{padding:12px 0; border-bottom:1px solid var(--linha-fina)}

.aviso{background:var(--papel); border-left:3px solid var(--tinta-fraca);
       padding:13px 18px; margin:1rem 0}
.aviso.erro,.aviso.error{border-left-color:var(--alerta); background:#fbf1ef}
.aviso.cargo{border-left-color:var(--ok); background:#f0f6f2}
.alerta{color:var(--alerta)}
.nota{font-size:.86rem; color:var(--tinta-fraca)}
.sub{color:var(--tinta-fraca); margin-top:-.4em}

/* ==========================================================================
   FORMULÁRIO
   ========================================================================== */
.formulario{margin:1.8rem 0}
.campo{display:flex; flex-direction:column; gap:7px; margin-bottom:1.2rem}
.campo label{font-size:.7rem; font-weight:600; text-transform:uppercase;
        letter-spacing:.16em; color:var(--tinta-fraca)}
.campo input,.campo select,.campo textarea{
  padding:12px 14px; border:1px solid var(--linha); border-radius:0;
  font:inherit; font-size:1rem; background:var(--papel); color:var(--tinta);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:0; border-color:var(--marca); box-shadow:0 0 0 3px rgba(148,116,47,.14)}
.campo .erro{color:var(--alerta); font-size:.86rem}
.campo .ajuda{font-size:.84rem; color:var(--tinta-fraca)}
.campo-check{flex-direction:row; align-items:flex-start; gap:11px; flex-wrap:wrap}
.campo-check label{order:2; font-weight:400; text-transform:none; letter-spacing:0;
        font-size:.95rem; color:var(--tinta); flex:1; min-width:0}
.campo-check input{order:1; margin-top:3px; width:18px; height:18px; flex:none;
        accent-color:var(--marca)}
.campo-check .ajuda,.campo-check .erro{order:3; flex-basis:100%}

.acoes{display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin:1.4rem 0 1.8rem}
.voltar{margin-left:4px; color:var(--tinta-fraca); font-size:.88rem}

.regras{background:var(--papel); border:3px double var(--linha);
        padding:18px 24px; margin:1.2rem 0 1.8rem}
.regras h2{margin-top:0; padding-top:0; font-size:1.15rem}
.regras h2::before{display:none}
.regras ul{margin:.5em 0; padding-left:1.3rem}
.regras li{margin:.35em 0; font-size:.93rem}

.cta{background:var(--fundo-suave); border-top:1px solid var(--linha);
     border-bottom:1px solid var(--linha)}

/* ==========================================================================
   RODAPÉ — o embasamento de pedra escura do prédio
   ========================================================================== */
footer{background:var(--ferro); color:rgba(247,243,234,.66); margin-top:4rem;
       padding-block:2.6rem; font-size:.9rem; border-top:3px double var(--marca)}
footer p{margin:.5em 0}
footer strong{color:var(--fundo); font-family:var(--titulo); font-size:1.25rem;
       font-weight:500; letter-spacing:.02em}
footer a{color:rgba(247,243,234,.72)}
footer a:hover{color:var(--marca-clara)}
.rodape-links{font-size:.87rem; margin-top:1.2rem!important}
.emergencia{font-size:.82rem; letter-spacing:.03em; margin-top:1.2rem!important;
       padding-top:1.2rem; border-top:1px solid var(--ferro-claro)}

/* ==========================================================================
   COMUNICAÇÃO — mural e ocorrências
   ========================================================================== */
.aviso-item,.ocorrencia{border:1px solid var(--linha); padding:20px 24px;
        margin:1.2rem 0; background:var(--papel)}
.aviso-item.fixado{border-left:3px solid var(--marca); background:var(--fundo-suave)}
.aviso-item h2,.ocorrencia h2{margin-top:0; padding-top:0; font-size:1.3rem}
.aviso-item h2::before,.ocorrencia h2::before{display:none}
.meta{color:var(--tinta-fraca); font-size:.84rem; margin-top:-.3em}
.corpo p{margin:.7em 0}
.tag-fixado,.tag-sigilo{display:inline-block; font-size:.62rem; text-transform:uppercase;
        letter-spacing:.14em; font-weight:600; background:var(--marca); color:var(--papel);
        padding:3px 9px; vertical-align:middle}
.tag-sigilo{background:#8a5a12}
.resposta{background:var(--fundo-suave); border-left:3px solid var(--ok);
        padding:13px 18px; margin-top:1.2rem}

/* ==========================================================================
   CARTA DE AUTORIZAÇÃO — pensada para sair no papel
   ========================================================================== */
.carta h1{font-size:1.7rem}
.carta-sub{color:var(--tinta-fraca); margin-top:-.5em}
.carta ul{padding-left:1.3rem}
.carta li{margin:.45em 0}
.assinatura{margin-top:2.5rem; padding-top:1.2rem; border-top:1px solid var(--linha)}

/* ==========================================================================
   ASSEMBLEIAS
   ========================================================================== */
.pauta{padding-left:1.4rem; margin:.6em 0}
.pauta li{margin:.35em 0}
.tabela-apuracao{border-collapse:collapse; margin:1rem 0; font-size:.93rem; width:100%}
.tabela-apuracao th{text-align:left; padding:8px 16px 8px 0; white-space:nowrap;
        color:var(--tinta-fraca); font-size:.68rem; text-transform:uppercase;
        letter-spacing:.16em; font-weight:600; vertical-align:top}
.tabela-apuracao td{padding:8px 16px 8px 0; vertical-align:top}
.tabela-apuracao .ok{color:var(--ok); font-weight:600; white-space:nowrap}
.tabela-apuracao .falha{color:var(--alerta); font-weight:600; white-space:nowrap}

/* ==========================================================================
   LINHA DO TEMPO
   Um fio com losangos dourados, no lugar da bolinha do padrão de blog.
   ========================================================================== */
.linha-do-tempo{list-style:none; padding:0; margin:2rem 0}
.linha-do-tempo li{display:grid; grid-template-columns:118px 1fr; gap:26px;
        padding-bottom:2.4rem; position:relative}
.linha-do-tempo li:not(:last-child)::before{content:""; position:absolute;
        left:calc(118px + 13px - 1px); top:2.3rem; bottom:0; width:1px; background:var(--linha)}
.linha-do-tempo .ano{font-family:var(--titulo); font-size:1.7rem; font-weight:500;
        color:var(--marca-escura); text-align:right;
        font-variant-numeric:lining-nums tabular-nums;
        position:relative; line-height:1.1}
.linha-do-tempo .ano::after{content:""; position:absolute; right:-17px; top:.55em;
        width:9px; height:9px; transform:rotate(45deg); background:var(--marca)}
.linha-do-tempo .marco h2,.linha-do-tempo .marco h3{margin:0 0 .45em; font-size:1.3rem;
        padding-top:0}
.linha-do-tempo .marco h2::before{display:none}
.linha-do-tempo .marco p{margin:.45em 0; max-width:64ch}
.linha-do-tempo .marco img{max-width:100%; margin:.8em 0; border:1px solid var(--linha)}
.linha-do-tempo .fonte{font-size:.8rem; color:var(--tinta-fraca); font-style:italic}
.linha-do-tempo.compacta li{padding-bottom:1.5rem}

/* ==========================================================================
   GALERIA
   ========================================================================== */
.filtros{display:flex; gap:0; flex-wrap:wrap; margin:1.2rem 0 2rem;
         border-bottom:1px solid var(--linha)}
.filtro{display:inline-block; padding:10px 18px; text-decoration:none;
        color:var(--tinta-fraca); font-size:.76rem; text-transform:uppercase;
        letter-spacing:.14em; font-weight:600; border-bottom:2px solid transparent;
        margin-bottom:-1px}
.filtro:hover{color:var(--marca-escura)}
.filtro.ativo{color:var(--marca-escura); border-bottom-color:var(--marca)}

/* Passe-partout: a foto ganha uma margem de papel, como quadro emoldurado. */
.grade-fotos{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
        gap:22px; margin:1.2rem 0}
.grade-fotos figure{margin:0; background:var(--papel); padding:10px 10px 0;
        border:1px solid var(--linha); transition:border-color .18s ease}
.grade-fotos figure:hover{border-color:var(--marca)}
.grade-fotos img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
        max-width:100%}
.grade-fotos figcaption{padding:13px 4px 14px; font-size:.92rem; line-height:1.5}
.grade-fotos figcaption small{display:block; color:var(--tinta-fraca); font-size:.76rem;
        margin-top:.35em; letter-spacing:.04em}
.ano-foto{display:inline-block; margin-left:7px; font-size:.72rem; color:var(--marca-escura);
        font-weight:600; letter-spacing:.1em}

/* Planta de pavimento e desenho tecnico: cortar o desenho para caber num quadro
   4/3 tiraria justamente a ponta do triangulo do terreno, que e o que explica o
   formato do predio. Por isso `contain`, e nao `cover` como nas fotos. */
.plantas-pavimento{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.plantas-pavimento img{aspect-ratio:16/10; object-fit:contain; background:var(--papel)}

/* ==========================================================================
   PLANTAS
   ========================================================================== */
.cartoes-planta{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
        gap:22px; margin:1.8rem 0}
.cartao-planta{border:1px solid var(--linha); background:var(--papel);
        display:flex; flex-direction:column; transition:border-color .18s ease}
.cartao-planta:hover{border-color:var(--marca)}
.cartao-planta img{width:100%; aspect-ratio:4/3; object-fit:contain; max-width:100%;
        background:var(--fundo); display:block; border-bottom:1px solid var(--linha-fina)}
.cartao-planta .sem-planta{aspect-ratio:4/3; display:flex; align-items:center;
        justify-content:center; background:var(--fundo); color:var(--linha);
        font-family:var(--titulo); font-size:3.4rem; font-weight:600; letter-spacing:.04em;
        border-bottom:1px solid var(--linha-fina)}
.cartao-planta .dados{padding:18px 20px; flex:1}
.cartao-planta h2{margin:0; font-size:1.3rem; padding-top:0}
.cartao-planta h2::before{display:none}
.cartao-planta .area{margin:.1em 0 .9em; font-family:var(--titulo); font-size:1.9rem;
        font-weight:500; color:var(--marca-escura);
        font-variant-numeric:lining-nums tabular-nums}
.cartao-planta dl{margin:0 0 .9em; font-size:.86rem}
.cartao-planta dl>div{display:flex; justify-content:space-between; gap:12px;
        padding:5px 0; border-bottom:1px solid var(--linha-fina)}
.cartao-planta dt{color:var(--tinta-fraca)}
.cartao-planta dd{margin:0; font-variant-numeric:tabular-nums; font-weight:500}
.cartao-planta .unidades{font-size:.8rem; color:var(--tinta-fraca); margin:0}
.cartao-planta .descricao{font-size:.9rem}

/* ==========================================================================
   CONTATOS
   ========================================================================== */
.contatos{list-style:none; padding:0; margin:.6rem 0 2rem}
.contatos li{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 18px;
        padding:14px 0; border-bottom:1px solid var(--linha-fina)}
.contatos .nome{font-weight:600; min-width:190px}
.contatos .numero{font-family:var(--titulo); font-variant-numeric:lining-nums tabular-nums;
        font-size:1.5rem; font-weight:600; color:var(--marca-escura)}
.contatos .detalhe{color:var(--tinta-fraca); font-size:.86rem; flex-basis:100%}

/* ==========================================================================
   BOLETOS
   ========================================================================== */
.resumo-boleto{background:var(--papel); border:3px double var(--linha);
        padding:24px 26px; margin:1.2rem 0}
.resumo-boleto .total{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}
.resumo-boleto .rotulo{font-size:.68rem; text-transform:uppercase; letter-spacing:.18em;
        font-weight:600; color:var(--tinta-fraca)}
.resumo-boleto .total strong{font-family:var(--titulo); font-size:2.6rem; font-weight:500;
        font-variant-numeric:lining-nums tabular-nums; line-height:1}
.resumo-boleto .venc{color:var(--tinta-fraca); font-size:.9rem}
.resumo-boleto .situacao{margin:.7em 0 0; font-size:.92rem}
.campo-copiavel{margin:1.2rem 0}
.campo-copiavel .rotulo{display:block; font-size:.68rem; text-transform:uppercase;
        letter-spacing:.18em; font-weight:600; color:var(--tinta-fraca); margin-bottom:7px}
/* Linha digitável e Pix: aqui monoespaçado é funcional, não decorativo — a pessoa
   confere dígito por dígito contra o aplicativo do banco. */
.campo-copiavel code{display:block; background:var(--fundo-suave);
        border:1px solid var(--linha); padding:13px 15px; font-size:.92rem;
        font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
        word-break:break-all; user-select:all; letter-spacing:.02em}
.campo-copiavel code.pix{font-size:.78rem; letter-spacing:0}

/* ==========================================================================
   MENU SANFONADO
   Em CSS puro: com o morador logado são muitos itens para 375px, e não vale
   carregar JavaScript por causa disso.
   ========================================================================== */
.alternador,.botao-menu{display:none}

@media (max-width:820px){
  .botao-menu{display:inline-block; cursor:pointer; padding:9px 14px; font-size:.72rem;
          text-transform:uppercase; letter-spacing:.16em; font-weight:600;
          border:1px solid var(--linha); color:var(--tinta-fraca)}
  .botao-menu:hover{border-color:var(--marca); color:var(--marca-escura)}
  .topo .faixa{position:relative}
  .topo nav{display:none; flex-basis:100%; padding-top:12px; margin-top:12px;
          border-top:1px solid var(--linha)}
  .alternador:checked ~ nav{display:block}
  .menu{flex-direction:column; align-items:stretch; gap:0; width:100%}
  .topo nav a{padding:11px 0; width:100%; font-size:1rem}
  .menu>li>a:not(.botao)::after{display:none}
  .topo nav .botao{margin-top:10px; text-align:center}

  /* No celular o submenu não abre por ponteiro — não há ponteiro. Fica sempre
     aberto, recuado, como sub-lista. Esconder atrás de um toque a mais só
     acrescentaria um passo entre o morador e o boleto dele. */
  .grupo>a{font-weight:600; color:var(--tinta)}
  .grupo>a::before{display:none}
  .grupo::after{display:none}
  .submenu{position:static; opacity:1; visibility:visible; transform:none;
          min-width:0; border:0; border-left:2px solid var(--linha); border-radius:0;
          box-shadow:none; background:transparent; padding:0 0 6px; margin-left:2px}
  .submenu a{padding:9px 0 9px 16px; font-size:.95rem}
  .submenu a:hover{background:transparent}
  .linha-do-tempo li{grid-template-columns:1fr; gap:6px}
  .linha-do-tempo li::before{display:none}
  .linha-do-tempo .ano{text-align:left}
  .linha-do-tempo .ano::after{display:none}
}

@media (max-width:600px){
  body{font-size:16px}
  .faixa{padding:0 18px}
  .capa{padding-block:2.8rem!important}
  .tabela{font-size:.88rem}
  .tabela th,.tabela td{padding:8px 10px}
  .ficha{grid-template-columns:1fr 1fr}
  .ficha dd{font-size:1.4rem}
  .contatos .nome{min-width:0; flex-basis:100%}
  .resumo-boleto .total strong{font-size:2rem}
}

/* ==========================================================================
   IMPRESSÃO
   A carta de autorização sai no papel — e a convenção também, que é documento
   que morador leva para assembleia.
   ========================================================================== */
@media print{
  .topo,footer,.nao-imprime,.ornamento,.filtros{display:none!important}
  body{font-size:11pt; background:#fff; color:#000}
  .carta{max-width:none}
  .capa.com-foto{background:#fff; color:#000; padding-block:0!important}
  .capa.com-foto .foto-capa,.capa.com-foto::before,.capa.com-foto::after{display:none}
  .capa.com-foto h1,.capa.com-foto .chamada{color:#000; text-shadow:none}
  a{text-decoration:none; color:#000}
  .ficha,.regras,.resumo-boleto{border:1px solid #999}
}

/* Quem pediu menos animação no sistema recebe menos animação. */
@media (prefers-reduced-motion:reduce){
  .submenu{transition:none}
  *{transition:none!important; animation:none!important}
}

/* ==========================================================================
   PORTARIA
   Tela usada em pé, muitas vezes no celular, com alguém esperando na frente. O
   desenho aqui não é o do resto do site: o que importa é ler o veredito em meio
   segundo, então tipo maior, contraste alto e cor com significado — e não
   decoração. É a única parte do site onde a cor vermelha e a verde aparecem em
   bloco, e é de propósito.
   ========================================================================== */
.portaria{padding-bottom:3rem}

.busca-portaria{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;
        margin:1.4rem 0 2rem}
.busca-portaria .rotulo-busca{flex-basis:100%; font-size:.7rem; font-weight:600;
        text-transform:uppercase; letter-spacing:.16em; color:var(--tinta-fraca);
        margin-bottom:6px}
.busca-portaria input{flex:1; min-width:220px; padding:15px 16px; font:inherit;
        font-size:1.15rem; border:1px solid var(--linha); border-radius:0;
        background:var(--papel); color:var(--tinta)}
.busca-portaria input:focus{outline:0; border-color:var(--marca);
        box-shadow:0 0 0 3px rgba(148,116,47,.14)}
.busca-portaria .botao{padding-block:15px}

.fichas-portaria{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
        gap:16px; margin:1rem 0 2rem}

.ficha-portaria{background:var(--papel); border:1px solid var(--linha);
        border-left-width:5px; padding:16px 18px}
.ficha-portaria .cabeca{display:flex; gap:14px; align-items:center; margin-bottom:12px}
.ficha-portaria h3{margin:0; font-size:1.2rem; line-height:1.2}
.ficha-portaria .papel{margin:.2em 0 0; font-size:.85rem; color:var(--tinta-fraca)}

/* O número do apartamento é o que o porteiro procura primeiro na ficha. */
.ficha-portaria .apto{flex:none; width:58px; height:58px; display:flex;
        align-items:center; justify-content:center; background:var(--fundo-suave);
        border:1px solid var(--linha); font-family:var(--titulo); font-size:1.4rem;
        font-weight:600; font-variant-numeric:lining-nums}
.ficha-portaria .retrato{flex:none; width:58px; height:58px; object-fit:cover;
        border:1px solid var(--linha)}

.ficha-portaria .veredito{margin:0; font-size:1.05rem; font-weight:600;
        letter-spacing:.02em}
.ficha-portaria .porque{margin:.2em 0 .8em; font-size:.88rem; color:var(--tinta-fraca)}

.ficha-portaria.livre{border-left-color:var(--ok)}
.ficha-portaria.livre .veredito{color:var(--ok)}
.ficha-portaria.confirmar{border-left-color:#8a5a12}
.ficha-portaria.confirmar .veredito{color:#8a5a12}
.ficha-portaria.vencida,
.ficha-portaria.fora-de-horario{border-left-color:var(--alerta); background:#fbf1ef}
.ficha-portaria.vencida .veredito,
.ficha-portaria.fora-de-horario .veredito{color:var(--alerta)}
.ficha-portaria.morador{border-left-color:var(--marca)}

/* As restrições são o motivo de a tela existir: nunca discretas. */
.ficha-portaria .restricoes{list-style:none; padding:0; margin:0 0 .9rem;
        border-top:1px solid var(--linha-fina); padding-top:.7rem}
.ficha-portaria .restricoes li{font-size:.9rem; font-weight:600; color:var(--alerta);
        padding:3px 0 3px 20px; position:relative}
.ficha-portaria .restricoes li::before{content:"!"; position:absolute; left:0; top:3px;
        width:14px; height:14px; line-height:14px; text-align:center; font-size:.7rem;
        background:var(--alerta); color:var(--papel)}
.ficha-portaria .restricoes li.chave{color:#8a5a12}
.ficha-portaria .restricoes li.chave::before{content:"K"; background:#8a5a12}

.ficha-portaria .dados{margin:0; font-size:.86rem}
.ficha-portaria .dados>div{display:flex; justify-content:space-between; gap:10px;
        padding:4px 0; border-bottom:1px solid var(--linha-fina)}
.ficha-portaria .dados dt{color:var(--tinta-fraca)}
.ficha-portaria .dados dd{margin:0; text-align:right}
.ficha-portaria .imobiliaria,
.ficha-portaria .observacao{margin:.8rem 0 0; font-size:.85rem; color:var(--tinta-fraca);
        border-top:1px solid var(--linha-fina); padding-top:.7rem}

@media (max-width:600px){
  .fichas-portaria{grid-template-columns:1fr}
  .busca-portaria input{font-size:1.05rem}
  .ficha-portaria .dados>div{flex-direction:column; gap:0}
  .ficha-portaria .dados dd{text-align:left; font-weight:600}
}


/* ===========================================================================
   PERFIS DE ACESSO
   ---------------------------------------------------------------------------
   Uma matriz de permissão é difícil de ler por natureza: dezoito linhas quase
   iguais, três colunas quase iguais. O que salva a leitura aqui é o agrupamento
   — cada grupo é um bloco com moldura e título em versalete, como uma seção de
   um documento impresso — e o contraste do que está marcado: a escolha ativa
   ganha fundo cheio, as outras somem para o fundo. Assim o síndico varre a
   coluna da direita e vê o perfil inteiro sem ler palavra por palavra.
   =========================================================================== */

.cartoes-perfil{display:grid; gap:20px; margin:2rem 0;
        grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}

.cartao-perfil{border:1px solid var(--linha); background:var(--papel);
        padding:22px 24px 24px; display:flex; flex-direction:column}
.cartao-perfil.automatico{border-left:3px solid var(--marca)}
.cartao-perfil .cabeca{display:flex; align-items:baseline; justify-content:space-between;
        gap:10px; flex-wrap:wrap}
.cartao-perfil h2{margin:0; padding-top:0; font-size:1.35rem}
.cartao-perfil h2::before{display:none}
.cartao-perfil .etiqueta{font-size:.62rem; text-transform:uppercase; letter-spacing:.1em;
        color:var(--tinta-fraca); border:1px solid var(--linha); padding:2px 7px}
.cartao-perfil .origem{margin:.5em 0 0; font-size:.8rem; color:var(--marca-escura);
        font-weight:600}
.cartao-perfil .descricao{margin:.7em 0; font-size:.88rem; color:var(--tinta-fraca)}
.cartao-perfil .dados{margin:1rem 0 1.3rem; font-size:.86rem; flex:1}
.cartao-perfil .dados>div{display:flex; justify-content:space-between; gap:10px;
        padding:4px 0; border-bottom:1px solid var(--linha-fina)}
.cartao-perfil .dados dt{color:var(--tinta-fraca)}
.cartao-perfil .dados dd{margin:0; text-align:right; font-variant-numeric:lining-nums tabular-nums}
.cartao-perfil .botao{align-self:flex-start}

.origem-destaque{background:var(--fundo-suave); border-left:3px solid var(--marca);
        padding:14px 18px; font-size:.92rem; margin:1.4rem 0 2rem}

.formulario-perfil{margin-top:1.5rem}

.grupo-capacidades{border:1px solid var(--linha); background:var(--papel);
        padding:6px 22px 14px; margin:0 0 22px}
.grupo-capacidades legend{font-family:var(--titulo); font-size:1.25rem;
        color:var(--marca-escura); padding:0 10px; letter-spacing:.02em}

.linha-capacidade{display:flex; align-items:center; gap:24px; flex-wrap:wrap;
        padding:13px 0; border-bottom:1px solid var(--linha-fina)}
.linha-capacidade:last-child{border-bottom:0}
.linha-capacidade .oque{flex:1 1 300px; min-width:0}
.linha-capacidade .oque strong{display:block; font-size:.97rem}
.linha-capacidade .oque .descricao{display:block; font-size:.83rem; color:var(--tinta-fraca);
        margin-top:2px}

/* Os três estados como um seletor segmentado: uma peça só, sem espaço entre elas,
   para a linha ser lida de uma vez e não como três caixinhas soltas. */
.escolhas{display:flex; border:1px solid var(--linha); flex:none}
.escolhas .escolha{position:relative; cursor:pointer; margin:0;
        border-right:1px solid var(--linha)}
.escolhas .escolha:last-child{border-right:0}
.escolhas .escolha input{position:absolute; opacity:0; width:100%; height:100%;
        margin:0; cursor:pointer}
.escolhas .escolha span{display:block; padding:8px 15px; font-size:.78rem;
        text-transform:uppercase; letter-spacing:.06em; color:var(--tinta-fraca);
        white-space:nowrap; background:var(--fundo)}
.escolhas .escolha:hover span{background:var(--fundo-suave); color:var(--tinta)}
/* Duas regras para o mesmo estado, de propósito. `.marcada` vem do servidor e
   garante a leitura certa no primeiro desenho; `:has(input:checked)` faz a marca
   acompanhar o clique sem JavaScript. Onde `:has` não existir, a tela continua
   correta — só não muda antes de gravar. */
.escolhas .escolha.marcada span,
.escolhas .escolha:has(input:checked) span{background:var(--marca); color:var(--papel);
        font-weight:600}
/* A primeira posição é "Não": marcada, não deve parecer uma conquista. */
.escolhas .escolha:first-child.marcada span,
.escolhas .escolha:first-child:has(input:checked) span{background:var(--ferro-claro)}
/* Sem isto, a marca do servidor ficaria acesa junto com a nova escolha. */
.escolhas:has(input:checked) .escolha.marcada:not(:has(input:checked)) span{
        background:var(--fundo); color:var(--tinta-fraca); font-weight:400}
.escolhas .escolha input:focus-visible+span{outline:2px solid var(--marca-clara);
        outline-offset:-2px}

.lista-pessoas{list-style:none; padding:0; margin:1rem 0}
.lista-pessoas li{padding:9px 0; border-bottom:1px solid var(--linha-fina)}

.botao.perigo{border-color:var(--alerta); color:var(--alerta)}
.botao.perigo:hover{background:var(--alerta); border-color:var(--alerta)}
form.apagar{margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--linha-fina)}

@media (max-width:600px){
  .cartoes-perfil{grid-template-columns:1fr}
  .linha-capacidade{gap:10px}
  .escolhas{width:100%}
  .escolhas .escolha{flex:1}
  .escolhas .escolha span{text-align:center; padding:9px 6px; font-size:.72rem}
}