/* Eficaz · folha do PORTAL do apex (`solucoeseficaz.com.br`).

   Uma página, sem build, sem framework e sem uma linha de JavaScript
   (spec §2.2, card FF-17). O portal não autentica, não guarda estado e não
   busca número nenhum no servidor — então não há o que um script faria aqui.

   ⚠️ A paleta abaixo é a da MARCA EFICAZ, e de propósito NÃO é o bloco `:root`
   espelhado da landing. Aquele bloco carrega o *sotaque do Fiscal-fácil*
   (`--raio: 10px`, `--lavagem`, `--fundo-bloqueio`): copiá-lo para cá faria a
   porta da rua da Eficaz ler como se fosse o produto — e, no dia em que o
   segundo cartão existir, a porta estaria vestida com a roupa de um dos dois
   inquilinos.

   O que não pode é a marca divergir em silêncio. Quem garante isso é o CI:
   `scripts/verificar_portal.py` compara, token a token, as cores de marca
   daqui com as de `frontend/src/styles.css`. Mudar o dourado passa a ser
   obrigatoriamente mudar nos dois lugares. */

:root {
  /* ── Marca Eficaz — os MESMOS valores de frontend/src/styles.css ──
     (conferidos pelo CI; ver o cabeçalho acima) */
  --dourado: #e1a755;
  --dourado-claro: #ebbd81;
  --dourado-profundo: #b87c2e;
  --dourado-fundo: #fdf6ec;
  --grafite: #3a3a3a;
  --fundo-app: #faf7f2;
  --superficie: #ffffff;
  --borda: #e9e2d6;
  --texto: #2c2c2c;
  --texto-leve: #6b6b6b;

  /* ── Do portal, e só dele ──
     O raio é o do v3 (8px), não o do Fiscal-fácil (10px): a porta pertence à
     casa, não ao produto que mora nela. */
  --raio: 8px;
  --sombra-cartao: 0 1px 2px rgba(57, 57, 57, 0.06);
  --sombra-cartao-ativo: 0 6px 20px rgba(57, 57, 57, 0.1);

  --f-display: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-corpo: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--f-corpo);
  font-size: 16px;
  line-height: 1.6;
  color: var(--texto);
  /* Lavagem dourada no topo, sobre papel quente. É a assinatura visual da
     casa; o valor é escrito aqui e não sai de token compartilhado, porque a
     geometria desta página não é a de nenhuma tela do produto. */
  background:
    radial-gradient(80% 46% at 50% 0%, #fbf1e0 0%, var(--fundo-app) 60%)
    no-repeat var(--fundo-app);
  -webkit-font-smoothing: antialiased;
}

h1, h2 { font-family: var(--f-display); color: var(--grafite); margin: 0; line-height: 1.2; }
p { margin: 0; }
img { max-width: 100%; }

/* Foco visível: a página é uma lista de links e tem de ser navegável no teclado. */
:focus-visible {
  outline: 2px solid var(--dourado);
  outline-offset: 3px;
  border-radius: 4px;
}

.limite { width: 100%; max-width: 900px; margin: 0 auto; padding: 0 24px; }

/* ─────────────────────────────────────────────────────────────────────────
   Cabeçalho — o lockup da Eficaz
   ───────────────────────────────────────────────────────────────────────── */
.topo { padding: 56px 0 0; }

/* ⚠️ O lockup horizontal é PNG **sem alfa**, de fundo branco. Ele fica sobre
   uma chapa branca própria, com o mesmo fio de borda do resto da página, para
   que o retângulo branco seja um elemento de desenho — e não um acidente sobre
   o papel quente. Tornar o fundo transparente por limiar de cor está proibido
   pelo manual (deixa halo e borra a descritiva), e distorcer, também: a altura
   manda, a largura é `auto`. */
.chapa-marca {
  display: inline-block;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 14px 20px;
  box-shadow: var(--sombra-cartao);
}
/* A altura manda; a largura é `auto`. 64px não é escolha de gosto: a descritiva
   "Soluções Empresariais" ocupa 66 dos 493 pixels de altura do arquivo (medido
   no PNG, não no olho), então abaixo disso ela cai de 8px e deixa de ser
   legível — e é justamente ela que o manual torna obrigatória em material
   externo. */
.chapa-marca img { display: block; height: 64px; width: auto; }

/* ─────────────────────────────────────────────────────────────────────────
   Chamada
   ───────────────────────────────────────────────────────────────────────── */
.principal { flex: 1 0 auto; padding: 34px 0 72px; }
.principal h1 {
  font-size: clamp(1.7rem, 4.4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.8px;
  max-width: 20ch;
}
.principal h1 .destaque { color: var(--dourado-profundo); }
.chamada {
  margin-top: 14px;
  max-width: 56ch;
  color: var(--texto-leve);
  font-size: 1.05rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   Cartões de produto

   `grid` de largura mínima em vez de colunas fixas: hoje há UM cartão e ele
   não pode ficar esticado de ponta a ponta, nem o dia do segundo cartão pode
   exigir mexer no CSS. `minmax` com teto resolve os dois casos de uma vez.
   ───────────────────────────────────────────────────────────────────────── */
.vitrine {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 400px));
  gap: 20px;
}

/* O cartão INTEIRO é o link — não um botão dentro de um bloco clicável. Assim
   há um só destino por cartão, ele aparece uma vez na navegação por teclado, e
   o leitor de tela anuncia o produto, não "link" solto no fim do texto. */
.cartao {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 24px 22px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-top: 3px solid var(--dourado);
  border-radius: var(--raio);
  box-shadow: var(--sombra-cartao);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.cartao:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-cartao-ativo);
  border-color: #dccdb4;
  border-top-color: var(--dourado);
}

/* Manual da marca §04: fora do produto, a descritiva "uma solução Eficaz" é
   obrigatória. Aqui ela é mais que regra — é o que diz ao visitante que o
   Fiscal-fácil pertence à casa em que ele acabou de bater. */
.cartao-marca { display: flex; align-items: center; gap: 12px; }
.cartao-marca img { flex: 0 0 auto; width: 44px; height: 44px; }
.cartao-nome {
  font-family: var(--f-display); font-weight: 700; font-size: 1.3rem;
  letter-spacing: -0.4px; color: var(--grafite); line-height: 1.15;
}
/* "fácil" pesa menos que "Fiscal": o contraste de peso é o gesto da marca. */
.cartao-nome em { font-style: normal; font-weight: 400; }
.cartao-descritiva {
  display: block;
  font-size: 0.66rem; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--texto-leve); font-weight: 500;
}

.cartao-texto { color: var(--texto-leve); font-size: 0.97rem; }

.cartao-para {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 6px 8px;
  font-size: 0.82rem;
}
.cartao-para li {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--dourado-fundo);
  color: var(--dourado-profundo);
  white-space: nowrap;
}

.cartao-ir {
  margin-top: auto;
  display: flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: 0.95rem;
  color: var(--dourado-profundo);
}
.cartao-ir .seta { transition: transform 0.15s ease; }
.cartao:hover .cartao-ir .seta { transform: translateX(3px); }

/* Quem prefere menos movimento não recebe nenhum: o hover ainda muda sombra e
   borda, então o cartão continua respondendo. */
@media (prefers-reduced-motion: reduce) {
  .cartao, .cartao-ir .seta { transition: none; }
  .cartao:hover { transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Rodapé
   ───────────────────────────────────────────────────────────────────────── */
.rodape {
  flex: 0 0 auto;
  border-top: 1px solid var(--borda);
  padding: 22px 0 30px;
  font-size: 0.87rem;
  color: var(--texto-leve);
}
.rodape .limite { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.rodape a { color: var(--dourado-profundo); }

/* ─────────────────────────────────────────────────────────────────────────
   Celular — item 4 do roteiro: legível e SEM rolagem horizontal
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 620px) {
  .topo { padding-top: 36px; }
  .principal { padding: 26px 0 52px; }
  /* Uma coluna que ocupa a largura disponível. Sem isto o `minmax(280px, …)`
     ainda caberia num aparelho de 375px (375 − 48 de respiro = 327), mas passa
     a estourar em telas menores, que existem. */
  .vitrine { grid-template-columns: 1fr; margin-top: 30px; }
  /* No celular a chapa encolhe, mas não abaixo do ponto em que a descritiva
     some: 48px deixa a linha em ~6,4px, que é o piso aceitável para uma marca
     lida a um palmo do rosto. */
  .chapa-marca img { height: 48px; }
}