/* ═══════════════════════════════════════════════════════════════════════
   A CASA · a língua visual de todas as portas da InnConta
   ═══════════════════════════════════════════════════════════════════════

   O CVO: "todas as portas de acesso têm que ter um mesmo padrão de comunicação —
   parceiro.innconta, innconta.com.br/area, cliente.innconta, crm.innconta e qualquer
   outra — tanto a tela de login quanto por dentro."

   Antes disto, cada porta tinha nascido com a paleta de onde foi copiada: o e-mail
   veio com o laranja da InnovaPeople, o webmail antigo com o azul-marinho da C&S, e
   a área do cliente com um creme próprio. Três casas na mesma rua.

   Esta folha é a fonte única. Ela não desenha telas — ela define a TRINCA e as peças
   que se repetem em toda porta: a barra do topo, a tela de entrada partida, o campo,
   o botão, o selo. Quem cria porta nova importa daqui e herda a casa inteira; quem
   inventa cor local está, por definição, saindo do padrão.

   Os valores vêm da caixa de e-mail em innconta.com.br/mail — foi ali que a casa
   encontrou a própria cara, e é ela que manda. */

:root{--t0:10.5px;--t1:12px;--t2:13px;--t3:14.5px;--t4:17px;--t5:20px;--t6:26px;--t7:32px;
  /* a trinca */
  --paper:#F7F3EA;      /* o papel de fundo */
  --paper2:#FFFDF7;     /* a superfície que sobe do papel: cartão, campo, painel */
  --ink:#14110D;        /* a tinta dos títulos */
  --ink2:#2B2620;       /* a tinta do texto corrido */
  --deep:#0E0C09;       /* o escuro da barra e do painel de entrada */
  --gold:#A07830;       /* o ouro do timbrado */
  --gold-cl:#C9A24A;    /* o ouro sobre escuro, que precisa de mais luz */
  --mut:#574F44;        /* o que fala baixo */
  --rule:#DCD2BC;       /* o filete */
  /* os três estados, cada um com o seu fundo — vinham definidos porta a porta e por isso
     divergiam; a partir daqui a casa tem UM vermelho, UM verde e UM âmbar */
  --erro:#8E3B34;   --errof:#FBECEA;
  --ok:#3F6B4A;     --okf:#E9F4EC;
  --alerta:#B0721E; --alertaf:#FBF1E0;
  --topo:66px;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ── o corpo ─────────────────────────────────────────────────────────── */
.casa{background:var(--paper);color:var(--ink2);font-family:var(--sans);
  font-size:var(--t3);line-height:1.6;-webkit-font-smoothing:antialiased;margin:0}
.casa h1,.casa h2,.casa h3{font-family:var(--serif);font-weight:500;color:var(--ink);margin:0}

/* ── a barra do topo, igual em toda porta ────────────────────────────── */
.casa-topo{height:var(--topo);background:var(--deep);color:#EFE8D8;display:flex;
  align-items:center;gap:18px;padding:0 clamp(16px,3vw,28px)}
.casa-topo .marca{font-family:var(--serif);font-size:var(--t6);text-decoration:none;color:#F3EDE0}
.casa-topo .marca em{font-style:normal;color:var(--gold)}
.casa-topo .onde{font-size:var(--t0);letter-spacing:.22em;text-transform:uppercase;
  color:#8F8676;padding-left:14px;border-left:1px solid rgba(239,232,216,.18)}
.casa-topo .dir{margin-left:auto;display:flex;align-items:center;gap:18px;
  font-size:var(--t1);letter-spacing:.12em;text-transform:uppercase;color:#C6BEAC}
.casa-topo .dir a,.casa-topo .dir button{color:inherit;background:none;border:0;
  font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;text-decoration:none}
.casa-topo .dir a:hover,.casa-topo .dir button:hover{color:var(--gold-cl)}

/* ── a tela de entrada: metade tinta, metade papel ───────────────────── */
.casa-entrada{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.casa-entrada .tinta{background:
    radial-gradient(900px 620px at 26% 12%, rgba(160,120,48,.16), transparent 64%),
    linear-gradient(155deg,#1A1710 0%,var(--deep) 58%,#0B0A06 100%);
  color:#EFE8D8;display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(34px,5vw,64px)}
.casa-entrada .marca{font-family:var(--serif);font-size:clamp(26px,3vw,34px);letter-spacing:.16em;
  color:#F3EDE0;text-transform:uppercase}
.casa-entrada .marca em{font-style:normal;color:var(--gold-cl)}
.casa-entrada .fio{width:56px;height:1px;background:var(--gold);margin:14px 0 0}
.casa-entrada .tese{font-family:var(--serif);font-size:clamp(28px,3.4vw,40px);line-height:1.12;
  color:#F6F1E5;max-width:15ch;margin:0 0 16px}
.casa-entrada .tese em{font-style:italic;color:var(--gold-cl)}
.casa-entrada .sob{font-size:var(--t3);line-height:1.6;color:#B7AF9E;max-width:38ch;margin:0}
.casa-entrada .trilha{font-size:var(--t0);letter-spacing:.2em;text-transform:uppercase;color:#7C7364}
.casa-entrada .trilha b{color:var(--gold-cl);font-weight:400}

.casa-entrada .papel{background:var(--paper);display:flex;align-items:center;
  justify-content:center;padding:clamp(28px,5vw,64px)}
.casa-entrada .form{width:100%;max-width:390px}
.casa-entrada .form h1{font-size:clamp(27px,3vw,34px);line-height:1.14;margin-bottom:6px}
.casa-entrada .form h1 em{font-style:italic;color:var(--gold)}
.casa-entrada .form .diz{font-size:var(--t3);color:var(--mut);margin:0 0 26px}

/* ── as peças que se repetem por dentro também ───────────────────────── */
.casa-campo{width:100%;background:var(--paper2);border:1px solid var(--rule);border-radius:9px;
  padding:14px 15px;font:inherit;font-size:var(--t3);color:var(--ink2);margin-bottom:12px;
  transition:border-color .18s}
.casa-campo::placeholder{color:#9A9081}
.casa-campo:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(160,120,48,.10)}
.casa-bt{width:100%;border:0;border-radius:9px;padding:14px 18px;cursor:pointer;
  font-family:var(--sans);font-size:var(--t1);letter-spacing:.2em;text-transform:uppercase;
  color:#FFFDF7;background:linear-gradient(135deg,var(--gold-cl) 0%,var(--gold) 62%,#8F6B22 100%);
  transition:filter .18s}
.casa-bt:hover{filter:brightness(1.07)}
.casa-bt.fraco{background:var(--paper2);color:var(--ink2);border:1px solid var(--rule)}
.casa-ou{display:flex;align-items:center;gap:12px;margin:20px 0;color:#9A9081;
  font-size:var(--t0);letter-spacing:.24em;text-transform:uppercase}
.casa-ou::before,.casa-ou::after{content:'';flex:1;height:1px;background:var(--rule)}
.casa-alt{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:var(--paper2);border:1px solid var(--rule);border-radius:9px;padding:12px;
  font:inherit;font-size:var(--t3);color:var(--ink2);cursor:pointer;text-decoration:none}
.casa-alt:hover{border-color:var(--gold)}
.casa-link{display:block;text-align:center;margin-top:16px;font-size:var(--t2);color:var(--gold);
  text-decoration:none}
.casa-link:hover{text-decoration:underline;text-underline-offset:3px}

.casa-selo{display:inline-flex;align-items:center;gap:7px;font-size:var(--t0);letter-spacing:.14em;
  text-transform:uppercase;border:1px solid var(--rule);border-radius:3px;padding:4px 9px;
  color:var(--mut)}
.casa-selo::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold)}
.casa-recado{font-size:var(--t2);color:var(--mut);margin-top:14px;min-height:20px}
.casa-recado.erro{color:var(--erro)}
.casa-recado.ok{color:var(--ok)}

@media (max-width:820px){
  .casa-entrada{grid-template-columns:1fr}
  .casa-entrada .tinta{min-height:38vh;padding:28px 24px}
  .casa-entrada .tese{font-size:var(--t6);max-width:none}
  .casa-entrada .papel{padding:30px 24px 44px}
}

/* foco visível (forense 28/08): quem navega por teclado precisa ver onde está */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}