/* Apagar — sistema de design partilhado.
 *
 * Fundado nos especialistas provados (NN/g, Refactoring UI), nao em tendencias:
 * hierarquia por tamanho/peso/espaco antes da cor, escalas contidas, espaco a
 * respirar, profundidade por sombra subtil. Cinzento primeiro, cor so como
 * acento. Dois temas de primeira classe. Fontes de sistema, de proposito:
 * carregar uma fonte de terceiros contradiria a promessa "sem terceiros" que e
 * o diferenciador do produto.
 *
 * Um so ficheiro para todas as paginas: substitui os blocos <style> repetidos. */

:root {
  /* Tema claro (por omissao). O escuro redefine estes tokens mais abaixo. */
  --fundo: #fbfbfa;
  --superficie: #ffffff;
  --superficie-2: #f4f3f1;
  --tinta: #17161a;
  --tinta-suave: #605b66;
  --tinta-tenue: #8a8590;
  --filete: #e6e3df;
  --filete-forte: #d5d1cb;
  --acento: #1d5fa2;
  --acento-forte: #174d85;
  --acento-tenue: #eaf1f8;
  --alarme: #b23b2e;
  --ok: #2f7d54;

  --sombra-sm: 0 1px 2px rgba(23, 22, 26, 0.05);
  --sombra-md: 0 6px 20px rgba(23, 22, 26, 0.07), 0 1px 3px rgba(23, 22, 26, 0.05);
  --sombra-lg: 0 20px 48px rgba(23, 22, 26, 0.12), 0 4px 12px rgba(23, 22, 26, 0.06);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Escala de espaco contida (Refactoring UI): 4,8,12,16,24,32,48,64,96. */
  --e1: 0.25rem; --e2: 0.5rem; --e3: 0.75rem; --e4: 1rem;
  --e6: 1.5rem; --e8: 2rem; --e12: 3rem; --e16: 4rem; --e24: 6rem;

  --raio: 12px;
  --raio-sm: 8px;
  --raio-pill: 999px;
  --largura: 64rem;
}

/* Escuro: base e elevada distintas por omissao (HIG da Apple, "Dark Mode" —
 * duas escalas de fundo, base mais escura e elevada mais clara, para que a
 * profundidade se veja sem precisar de espreitar o filete). --fundo e a base;
 * --superficie e a primeira elevacao e --superficie-2 a segunda. Antes, as
 * duas ficavam a 3 pontos de luminosidade uma da outra (#0e0e11 → #17171b),
 * o suficiente para a sombra escura nao ter contra o que se ver. Um relevo
 * top-inset subtil (Rauno Freiberg, interfaces.rauno.me) simula luz a apanhar
 * a aresta de cima do cartao, o truque que os paineis planos nao tem. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #0a0a0c;
    --superficie: #1c1c22;
    --superficie-2: #24242b;
    --tinta: #edecee;
    --tinta-suave: #a6a2ac;
    --tinta-tenue: #78747e;
    --filete: #303038;
    --filete-forte: #40404a;
    --acento: #6ea8dc;
    --acento-forte: #8fbde8;
    --acento-tenue: #17222e;
    --alarme: #e08579;
    --ok: #6bbd8f;
    --sombra-sm: inset 0 1px 0 0 rgba(255, 255, 255, 0.035), 0 1px 2px rgba(0, 0, 0, 0.4);
    --sombra-md: inset 0 1px 0 0 rgba(255, 255, 255, 0.04), 0 6px 20px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.4);
    --sombra-lg: inset 0 1px 0 0 rgba(255, 255, 255, 0.05), 0 20px 48px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.4);
  }
}
:root[data-tema="escuro"] {
  --fundo: #0a0a0c;
  --superficie: #1c1c22;
  --superficie-2: #24242b;
  --tinta: #edecee;
  --tinta-suave: #a6a2ac;
  --tinta-tenue: #78747e;
  --filete: #303038;
  --filete-forte: #40404a;
  --acento: #6ea8dc;
  --acento-forte: #8fbde8;
  --acento-tenue: #17222e;
  --alarme: #e08579;
  --ok: #6bbd8f;
  --sombra-sm: inset 0 1px 0 0 rgba(255, 255, 255, 0.035), 0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra-md: inset 0 1px 0 0 rgba(255, 255, 255, 0.04), 0 6px 20px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.4);
  --sombra-lg: inset 0 1px 0 0 rgba(255, 255, 255, 0.05), 0 20px 48px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.4);
}

* { box-sizing: border-box; }
/* O atributo hidden vence sempre, mesmo em elementos com display proprio
 * (sem isto, .btn[hidden] ficava visivel). */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--acento); text-underline-offset: 2px; }

.wrap { max-width: var(--largura); margin: 0 auto; padding-left: var(--e6); padding-right: var(--e6); }
.wrap-estreito { max-width: 44rem; margin: 0 auto; padding-left: var(--e6); padding-right: var(--e6); }

/* ── Navegacao ─────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--fundo) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--filete);
}
.nav-inner { max-width: var(--largura); margin: 0 auto; padding: 0.7rem var(--e6);
  display: flex; align-items: center; gap: var(--e6); }
.marca { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--tinta); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; }
.marca .glifo { width: 1.5rem; height: 1.5rem; border-radius: 6px; background: var(--acento); color: #fff; display: grid; place-items: center; font-size: 0.95rem; font-weight: 800; }
.nav-links { display: flex; gap: 1.1rem; margin-left: auto; align-items: center; font-size: 0.92rem; }
.nav-links a { color: var(--tinta-suave); text-decoration: none; white-space: nowrap; }
.nav-links a:hover { color: var(--tinta); }
.nav-ferramentas { display: flex; gap: 0.4rem; align-items: center; }
.icone-btn { width: 2.1rem; height: 2.1rem; border-radius: var(--raio-sm); border: 1px solid var(--filete); background: var(--superficie); color: var(--tinta-suave); display: grid; place-items: center; cursor: pointer; font-size: 0.82rem; text-decoration: none; }
.icone-btn:hover { color: var(--tinta); border-color: var(--filete-forte); }
@media (max-width: 640px) { .nav-links a.esconde-movel { display: none; } }

/* ── Botoes ────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 0.5rem; font: 600 0.98rem var(--sans);
  padding: 0.7rem 1.15rem; border-radius: var(--raio-sm); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; transition: transform .06s ease, box-shadow .12s ease, background .12s ease; }
.btn:active { transform: translateY(1px); }
.btn-primario { background: var(--acento); color: #fff; box-shadow: var(--sombra-sm); }
.btn-primario:hover { background: var(--acento-forte); box-shadow: var(--sombra-md); }
.btn-fantasma { background: var(--superficie); color: var(--tinta); border-color: var(--filete-forte); }
.btn-fantasma:hover { border-color: var(--tinta-tenue); }
.btn-grande { padding: 0.85rem 1.5rem; font-size: 1.05rem; }

/* ── Pills / etiquetas ─────────────────────────────────────────────── */
.pill { display: inline-flex; align-items: center; gap: 0.35rem; font: 600 0.76rem var(--sans);
  padding: 0.25rem 0.6rem; border-radius: var(--raio-pill); background: var(--superficie-2); color: var(--tinta-suave); border: 1px solid var(--filete); }
.pill-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, var(--filete)); background: color-mix(in srgb, var(--ok) 10%, var(--superficie)); }
.pill-acento { color: var(--acento); border-color: color-mix(in srgb, var(--acento) 35%, var(--filete)); background: var(--acento-tenue); }

/* ── Tipografia de conteudo ────────────────────────────────────────── */
.display { font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.04; letter-spacing: -0.03em; font-weight: 800; margin: 0; }
h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.1; letter-spacing: -0.02em; font-weight: 800; margin: 0 0 0.5rem; }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); line-height: 1.15; letter-spacing: -0.015em; font-weight: 750; margin: 0 0 0.6rem; }
h3 { font-size: 1.12rem; font-weight: 700; margin: 0 0 0.35rem; letter-spacing: -0.01em; }
.lede { font-size: clamp(1.08rem, 1.6vw, 1.24rem); color: var(--tinta-suave); line-height: 1.5; }
.subtil { color: var(--tinta-suave); }
.tenue { color: var(--tinta-tenue); }
.micro { font-size: 0.8rem; }

/* ── Cartoes / superficies ─────────────────────────────────────────── */
.cartao { background: var(--superficie); border: 1px solid var(--filete); border-radius: var(--raio); box-shadow: var(--sombra-sm); padding: var(--e6); }
.cartao-elevado { box-shadow: var(--sombra-md); }

/* O cartao-dossie: a revelacao do que a empresa guarda. Barra de acento a
 * marcar que e uma citacao com peso, sem gritar. */
.dossie { background: var(--superficie); border: 1px solid var(--filete); border-left: 3px solid var(--alarme);
  border-radius: var(--raio); box-shadow: var(--sombra-md); padding: 1.1rem 1.25rem; }
.dossie .facto { font-size: 1.1rem; line-height: 1.5; margin: 0 0 0.6rem; }
.dossie .fonte { font: 0.8rem var(--sans); color: var(--tinta-suave); display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }

/* ── Bento ─────────────────────────────────────────────────────────── */
/* Grelha robusta: cada tile com largura minima garantida (auto-fit + minmax),
 * portanto nunca se esmaga. O tile de destaque ocupa a linha toda. */
.bento { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--e4); }
.tile { background: var(--superficie); border: 1px solid var(--filete); border-radius: var(--raio);
  box-shadow: var(--sombra-sm); padding: 1.4rem; }
.tile-full { grid-column: 1 / -1; }
.tile .num { font-size: 2.4rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.tile .ico { width: 2.2rem; height: 2.2rem; border-radius: var(--raio-sm); background: var(--acento-tenue); color: var(--acento); display: grid; place-items: center; margin-bottom: 0.7rem; font-weight: 700; }

/* ── Lista de empresas (diretorio) ─────────────────────────────────── */
.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.empresa { scroll-margin-top: 5rem; }
.grupo { margin: 0 0 2.2rem; }
.grupo-titulo { font-size: 1.05rem; letter-spacing: 0.01em; color: var(--tinta-suave); margin: 0 0 0.8rem; }

/* ── Formularios ───────────────────────────────────────────────────── */
label.campo { display: block; font: 600 0.82rem var(--sans); color: var(--tinta-suave); margin: 0.9rem 0 0.3rem; }
input[type="text"], input[type="email"], select, textarea {
  width: 100%; font: 1rem var(--sans); padding: 0.7rem 0.85rem; color: var(--tinta);
  background: var(--superficie); border: 1px solid var(--filete-forte); border-radius: var(--raio-sm); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento); }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%238a8590' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.8rem center; padding-right: 2.2rem; }
.oculto { position: absolute; left: -9999px; }

/* ── Rodape ────────────────────────────────────────────────────────── */
.rodape { border-top: 1px solid var(--filete); margin-top: var(--e24); }
.rodape-inner { max-width: var(--largura); margin: 0 auto; padding: var(--e8) var(--e6);
  display: flex; flex-wrap: wrap; gap: var(--e6) var(--e8); justify-content: space-between; }
.rodape a { color: var(--tinta-suave); text-decoration: none; }
.rodape a:hover { color: var(--tinta); }
.rodape .ligacoes { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.9rem; }
.rodape .promessa { font-size: 0.85rem; color: var(--tinta-tenue); max-width: 22rem; }

/* ── Seccoes ───────────────────────────────────────────────────────── */
.seccao { padding: var(--e16) 0; }
.seccao-titulo { display: flex; align-items: baseline; gap: 0.8rem; margin-bottom: var(--e6); }
.hero { padding: var(--e16) 0 var(--e12); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--e12); align-items: start; }
.ilustra { width: 100%; max-width: 22rem; margin: 0 auto; display: block; }
.ilustra .i-papel { fill: var(--superficie); stroke: var(--filete-forte); stroke-width: 1.5; }
.ilustra .i-papel-tras { fill: var(--superficie-2); stroke: var(--filete); stroke-width: 1.5; }
.ilustra .i-linha { stroke: var(--tinta-tenue); stroke-width: 5; stroke-linecap: round; }
.ilustra .i-apagada { stroke: var(--filete); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2 9; }
.ilustra .i-borracha { fill: var(--acento); }
.ilustra .i-borracha-topo { fill: var(--acento-forte); }
.ilustra .i-risco { stroke: var(--acento); stroke-width: 2; stroke-linecap: round; opacity: 0.45; }
.ico svg { width: 1.2rem; height: 1.2rem; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .ilustra { max-width: 15rem; } }
@media (max-width: 760px) { .hero { padding: var(--e12) 0 var(--e8); } .seccao { padding: var(--e12) 0; } }