/* =========================================================
   BENEFÍCIO COLABORADOR — design tokens
   Conceito: "carteirinha de benefícios" — cartão com furo de
   crachá, linha de picote (perfuração) e chip, remetendo ao
   cartão multibenefícios que é o produto central do site.
   ========================================================= */
:root{
  --paper:      #F6F7F4;   /* fundo — branco-papel frio, não creme */
  --paper-2:    #EDEFE9;   /* fundo alternado (cards, footer) */
  --ink:        #12201A;   /* grafite-verde — texto principal */
  --ink-soft:   #45564C;   /* texto secundário */
  --line:       #D8DCD3;   /* bordas e picotes */
  --gold:       #B8902E;   /* dourado Ecossistema MR — fio condutor */
  --emerald:    #1F6F54;   /* verde-benefício — links, categoria VR */
  --coral:      #C4522E;   /* CTA iFood — quente, distinto do verde WhatsApp */
  --whats:      #22935F;   /* CTA VR/WhatsApp */
  --radius-card: 18px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:17px;
  line-height:1.65;
}
h1,h2,h3,h4{
  font-family:"Fraunces", Georgia, serif;
  font-weight:600;
  line-height:1.18;
  margin:0 0 .5em;
  color:var(--ink);
}
h1{font-size:clamp(1.9rem,4vw,2.8rem);}
h2{font-size:clamp(1.4rem,2.6vw,1.9rem);}
p{margin:0 0 1.2em;}
a{color:var(--emerald);text-decoration-thickness:1px;}
img{max-width:100%;height:auto;display:block;}
.container{max-width:1120px;margin:0 auto;padding:0 24px;}
.prose{max-width:72ch;}

/* ---------- header ---------- */
.site-header{
  border-bottom:1px solid var(--line);
  background:var(--paper);
}
.site-header .bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:18px 0;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);}
.brand svg{width:34px;height:34px;flex:none;}
.brand span{font-family:"Fraunces",serif;font-weight:600;font-size:1.15rem;color:var(--ink);}
.primary-nav ul{list-style:none;display:flex;gap:22px;margin:0;padding:0;}
.primary-nav a{color:var(--ink-soft);font-size:.95rem;text-decoration:none;}
.primary-nav a:hover{color:var(--emerald);}
.header-ctas{display:flex;gap:10px;}

/* ---------- buttons / CTA blocks ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 18px;border-radius:999px;font-weight:600;font-size:.92rem;
  text-decoration:none;border:1px solid transparent;white-space:nowrap;
}
.btn-ifood{background:var(--coral);color:#fff;}
.btn-ifood:hover{background:#a8451f;}
.btn-vr{background:var(--whats);color:#fff;}
.btn-vr:hover{background:#1a7a4c;}
.btn-outline{background:transparent;border-color:var(--line);color:var(--ink);}

.cta-block{
  border-radius:var(--radius-card);
  padding:26px 28px;margin:2.4em 0;
  position:relative;overflow:hidden;
  border:1px solid var(--line);
  background:var(--paper-2);
}
.cta-block::before{ /* furo de crachá */
  content:"";position:absolute;top:14px;left:14px;
  width:10px;height:10px;border-radius:50%;
  background:var(--paper);box-shadow:inset 0 0 0 2px var(--line);
}
.cta-block h3{margin-bottom:.3em;font-size:1.15rem;}
.cta-block p{margin-bottom:1em;color:var(--ink-soft);}
.cta-ifood{border-color:#e7c3b3;background:#FBF1EC;}
.cta-vr{border-color:#bfe0cf;background:#EEF7F1;}
.cta-both{display:flex;gap:14px;flex-wrap:wrap;}
.cta-disclosure{
  font-size:.78rem;color:var(--ink-soft);margin-top:10px;display:block;
}

/* ---------- floating in-article banner ---------- */
.floating-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--ink);color:#fff;
  padding:14px 0;transform:translateY(110%);
  transition:transform .35s ease;
}
.floating-cta.is-visible{transform:translateY(0);}
.floating-cta .container{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.floating-cta p{margin:0;color:#EDEFE9;font-size:.92rem;}
.floating-cta-close{background:none;border:0;color:#9AA79E;cursor:pointer;font-size:1.1rem;line-height:1;padding:4px;}

/* ---------- cards (categoria / relacionados) ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin:2em 0;}
.card{
  border:1px solid var(--line);border-radius:var(--radius-card);
  padding:20px;background:#fff;position:relative;
  text-decoration:none;color:var(--ink);display:block;
}
.card::after{ /* linha de picote */
  content:"";position:absolute;left:20px;right:20px;top:52px;
  border-top:1px dashed var(--line);
}
.card .eyebrow{font-size:.75rem;color:var(--gold);font-weight:600;display:block;margin-bottom:6px;}
.card h4{font-size:1.02rem;margin:14px 0 0;}

/* ---------- article meta / perforation ---------- */
.article-meta{
  display:flex;gap:14px;color:var(--ink-soft);font-size:.85rem;
  padding-bottom:16px;margin-bottom:24px;border-bottom:1px dashed var(--line);
}
.badge-chip{
  display:inline-grid;grid-template-columns:repeat(2,5px);grid-gap:2px;
  width:16px;height:12px;
}
.badge-chip i{background:var(--gold);border-radius:1px;}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:#CBD6CF;margin-top:64px;padding:56px 0 28px;}
.site-footer a{color:#E7ECE7;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;padding-bottom:36px;border-bottom:1px solid #263C31;}
.site-footer h5{color:#fff;font-size:.85rem;letter-spacing:.02em;margin:0 0 12px;font-family:"Public Sans",sans-serif;font-weight:600;}
.site-footer ul{list-style:none;margin:0;padding:0;}
.site-footer li{margin-bottom:8px;font-size:.88rem;}
.footer-disclosure{font-size:.78rem;color:#8FA097;max-width:60ch;margin-top:12px;}

/* ---------- rodapé de palavras-chave (colapsado, sem JS) ---------- */
.kw-block{margin-top:32px;}
.kw-block summary{
  cursor:pointer;color:#8FA097;font-size:.82rem;list-style:none;
  display:inline-flex;align-items:center;gap:6px;
}
.kw-block summary::-webkit-details-marker{display:none;}
.kw-block summary::before{content:"+ ";color:var(--gold);}
.kw-block[open] summary::before{content:"– ";}
.kw-list{
  display:grid;grid-template-columns:repeat(5,1fr);gap:6px 18px;
  margin-top:16px;font-size:.78rem;
}
.kw-list a{color:#9DB0A5;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kw-list a:hover{color:#fff;}

@media (max-width: 880px){
  .footer-grid{grid-template-columns:1fr 1fr;}
  .kw-list{grid-template-columns:repeat(2,1fr);}
  .primary-nav{display:none;}
}