/* =========================================================
   ePoint Serviços — Design System v2
   Tema claro "portal", derivado da paleta real da logomarca:
   dourado/bronze + cinza-chumbo sobre fundo claro.
   ========================================================= */

:root{
  --bg:        #F7F5F0;   /* fundo geral, quente e claro */
  --surface:   #FFFFFF;
  --surface-2: #F1EEE7;
  --border:    #E3DDD1;
  --text:      #33302E;   /* cinza-chumbo, próximo do da logo */
  --muted:     #756F68;
  --accent:    #A07E41;   /* dourado/bronze da logomarca */
  --accent-dark:#7E6231;
  --accent-ink:#FFFFFF;   /* cor do texto sobre botões accent */
  --red:       #C7302B;   /* vermelho do material de marca */
  --green:     #2C8C4C;   /* verde do material de marca */
  --data:      #2C8C4C;   /* números/status "ao vivo" */
  --warn:      #C7302B;

  --font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --font-body:    "Inter", "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", "Consolas", monospace;

  --radius: 10px;
  --max-w: 1180px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }

.wrap{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 20px;
}

/* ---------- Faixa utilitária superior (data/clima/atalhos) ---------- */
.top-bar{
  background:var(--text); color:#EFEAE0;
  font-size:.78rem;
}
.top-bar .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:34px; gap:16px;
}
.top-bar a:hover{ color:var(--accent); }
.top-bar .links{ display:flex; gap:16px; }

/* ---------- Header / masthead ---------- */
.ep-header{
  border-bottom:3px solid var(--accent);
  background:var(--surface);
}
.ep-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:84px; gap:24px;
}
.ep-logo img{ height:44px; display:block; }
.ep-breadcrumb{
  font-family:var(--font-mono); font-size:.8rem; color:var(--muted);
}
.ep-breadcrumb a:hover{ color:var(--accent); }

/* ---------- Menu de acesso rápido ---------- */
.quick-menu{
  background:var(--text);
}
.quick-menu-inner{
  display:flex; gap:4px; overflow-x:auto;
  scrollbar-width:none;
}
.quick-menu-inner::-webkit-scrollbar{ display:none; }
.quick-menu-inner a{
  display:flex; align-items:center; gap:6px; white-space:nowrap;
  color:#EFEAE0; font-size:.85rem; font-weight:500;
  padding:11px 16px; border-bottom:3px solid transparent;
}
.quick-menu-inner a:hover{
  color:#fff; border-bottom-color:var(--accent); background:rgba(255,255,255,.04);
}
.quick-menu-inner .qi{ font-size:1rem; }

/* ---------- Busca estilo portal (topo da home) ---------- */
.portal-search{
  background:var(--surface-2);
  border-bottom:1px solid var(--border);
  padding:22px 0;
}
.portal-search form{
  display:flex; gap:10px; max-width:640px; margin:0 auto;
}
.portal-search input[type=text]{
  flex:1; background:var(--surface); border:1px solid var(--border);
  border-radius:999px; padding:13px 20px; color:var(--text);
  font-family:var(--font-body); font-size:1rem;
}
.portal-search input:focus{ outline:2px solid var(--accent); border-color:transparent; }
.portal-search button{
  background:var(--accent); color:var(--accent-ink); border:none;
  border-radius:999px; padding:0 26px; font-weight:600; cursor:pointer;
  font-family:var(--font-body);
}
.portal-search button:hover{ background:var(--accent-dark); }
.portal-search .sub{
  text-align:center; font-size:.78rem; color:var(--muted); margin-top:8px;
}

/* ---------- Status strip (elemento assinatura) ---------- */
.status-strip{
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--green);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 14px;
  display:inline-flex; align-items:center; gap:8px;
  margin:14px 0 28px;
}
.status-strip::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--green); box-shadow:0 0 0 3px rgba(44,140,76,.15);
}

/* ---------- Widgets do dia a dia (grade da home) ---------- */
.widget-grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  margin:24px 0 8px;
}
.widget{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px;
  border-top:3px solid var(--accent);
}
.widget.wd-red{ border-top-color:var(--red); }
.widget.wd-green{ border-top-color:var(--green); }
.widget .eyebrow{
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.06em;
  font-size:.7rem; color:var(--muted); margin-bottom:6px;
}
.widget .valor{ font-family:var(--font-display); font-size:1.4rem; font-weight:700; }
.widget .legenda{ font-size:.78rem; color:var(--muted); }

/* ---------- Hero (páginas internas) ---------- */
.hub-hero{ padding:32px 0 8px; }
.hub-hero h1{
  font-family:var(--font-display);
  font-size:clamp(1.8rem,3.4vw,2.6rem);
  margin:0 0 8px;
}
.hub-hero p{ color:var(--muted); max-width:60ch; font-size:1.03rem; }

/* ---------- Categorias ---------- */
.cat-label{
  font-family:var(--font-display); font-weight:700;
  font-size:1.05rem; color:var(--text);
  margin:36px 0 12px;
  padding-left:12px; border-left:4px solid var(--accent);
}
.grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.card:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:0 6px 16px rgba(51,48,46,.06); }
.card .icon{ font-size:1.4rem; }
.card h3{ font-family:var(--font-display); font-size:1.05rem; margin:10px 0 6px; color:var(--text); }
.card p{ color:var(--muted); font-size:.85rem; margin:0; }

/* ---------- Tool page ---------- */
.tool-page{ padding:28px 0 60px; }
.tool-page h1{ font-family:var(--font-display); font-size:1.9rem; margin:0 0 8px; }
.tool-page .lede{ color:var(--muted); margin-bottom:6px; max-width:65ch; }

.panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
  margin:20px 0;
}
label{ display:block; font-size:.85rem; color:var(--muted); margin:14px 0 6px; }
label:first-child{ margin-top:0; }
input[type=text],input[type=number],input[type=date],select,textarea{
  width:100%; background:var(--surface-2); border:1px solid var(--border);
  border-radius:8px; padding:11px 14px; color:var(--text);
  font-family:var(--font-mono); font-size:.95rem;
}
input:focus,select:focus,textarea:focus{ outline:2px solid var(--accent); border-color:transparent; }

.btn{
  display:inline-block; background:var(--accent); color:var(--accent-ink);
  font-weight:600; border:none; border-radius:8px;
  padding:12px 22px; font-family:var(--font-body); font-size:.95rem;
  cursor:pointer; margin-top:16px;
}
.btn:hover{ background:var(--accent-dark); }
.btn:focus-visible{ outline:2px solid var(--text); outline-offset:2px; }

.result{
  font-family:var(--font-mono);
  background:var(--surface-2);
  border:1px dashed var(--border);
  border-radius:8px;
  padding:18px;
  margin-top:18px;
}
.result .num{ font-size:1.6rem; color:var(--accent-dark); font-weight:600; }

.article-body{ color:var(--muted); font-size:.94rem; }
.article-body h2{ color:var(--text); font-family:var(--font-display); font-size:1.15rem; margin-top:32px; }

.disclaimer{
  font-size:.78rem; color:var(--muted); border-left:2px solid var(--red);
  padding-left:12px; margin-top:20px;
}

/* ---------- Acessibilidade ---------- */
.skip-link{
  position:absolute; left:-999px; top:0; z-index:100;
  background:var(--accent); color:#fff; padding:10px 16px;
  border-radius:0 0 8px 0; font-weight:600;
}
.skip-link:focus{ left:0; }

.card:focus-visible,
a:focus-visible,
button:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}

/* ---------- Aviso de cookies ---------- */
.cookie-banner{
  position:fixed; bottom:0; left:0; right:0; z-index:80;
  background:var(--text); color:#EFEAE0; border-top:3px solid var(--accent);
  padding:16px 0;
}
.cookie-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.cookie-inner p{ margin:0; font-size:.85rem; }
.cookie-inner a{ color:var(--accent); text-decoration:underline; }
.cookie-inner .btn{ margin:0; white-space:nowrap; }

/* ---------- Slot de anúncio ---------- */
.ad-slot{
  margin:28px 0; padding:8px 0; text-align:center;
}
.ad-slot::before{
  content:"Publicidade";
  display:block; font-size:.7rem; color:var(--muted);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px;
}

/* ---------- Footer ---------- */
.ep-footer{
  border-top:1px solid var(--border);
  padding:30px 0; margin-top:60px;
  color:var(--muted); font-size:.85rem;
}
.ep-footer a:hover{ color:var(--accent); }

/* ---------- Responsivo ---------- */
@media (max-width:700px){
  .grid{ grid-template-columns:1fr 1fr; }
  .widget-grid{ grid-template-columns:1fr 1fr; }
  .hub-hero{ padding:24px 0 8px; }
  .top-bar .wrap{ font-size:.7rem; }
  .cookie-inner{ flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion:reduce){
  .card{ transition:none; }
}