/* Seção de dicas (blog): cartões, lista e página de cada dica. Usa as cores de estilo.css. */
.tint-1 { background:var(--sage) }
.tint-2 { background:#f6e9dc }
.tint-3 { background:#ecece5 }
.tint-4 { background:#e6ede4 }

nav a[aria-current=page] { color:var(--brand); font-weight:700 }

/* ---------- cartões ---------- */
.tips-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:18px }
.tip-card { display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); border-radius:12px; overflow:hidden; transition:transform .18s,border-color .18s }
.tip-card:hover { transform:translateY(-3px); border-color:#c9c9b8 }
.tip-cover { display:grid; place-items:center; height:112px; font-size:46px; line-height:1 }
.tip-body { display:flex; flex-direction:column; flex:1; padding:18px 20px 20px }
.tip-cat { font-size:9px; letter-spacing:.09em; color:#59634e; font-weight:700 }
.tip-card h3,.tip-card h2 { font-family:var(--serif); font-size:20px; line-height:1.25; font-weight:600; letter-spacing:-.02em; margin:8px 0; overflow-wrap:anywhere }
.tip-desc { font-size:13px; line-height:1.55; color:#606455 }
.tip-more { margin-top:auto; padding-top:14px; font-size:12px; font-weight:700 }
.tip-more span { margin-left:6px }
.tip-card:hover .tip-more { color:var(--brand) }

/* ---------- vitrine na página inicial ---------- */
.home-tips { padding-block:55px 20px }

/* ---------- lista de dicas ---------- */
.tips-hero { padding-block:56px 34px }
.tips-hero h1,.tips-hero .post-lead { max-width:860px }
.tips-hero h1,.post h1 { font-size:clamp(32px,4vw,46px); line-height:1.12; margin-bottom:18px }
.tip-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px }
.tip-chip { border:1px solid #c6c9b9; border-radius:999px; padding:9px 16px; font-size:13px; font-weight:700; background:var(--white) }
.tip-chip:hover { border-color:var(--brand); color:var(--brand) }
.tips-group { padding-block:26px }
.tips-group:last-child { padding-bottom:70px }
.tips-group h2 { font-size:26px; margin-bottom:18px }

/* ---------- página da dica ---------- */
.post.wrap { width:min(740px,calc(100% - 88px)); padding-block:34px 20px }
.crumbs { display:block; font-size:12px; color:var(--muted); margin-bottom:28px }
.crumbs a { text-decoration:underline; text-underline-offset:3px }
.crumbs a:hover { color:var(--brand) }
.post-emoji { display:inline-grid; place-items:center; width:72px; height:72px; border-radius:18px; font-size:38px; line-height:1; margin-bottom:22px }
.post-lead { font-size:19px; line-height:1.55; color:#4d564a; margin-bottom:14px }
.post-meta { font-size:13px; color:var(--muted); margin:0; padding-bottom:26px; border-bottom:1px solid var(--line) }
.post-body { font-size:17px; line-height:1.75; padding-top:30px }
.post-body h2 { font-size:27px; line-height:1.2; letter-spacing:-.03em; margin:42px 0 14px }
.post-body h3 { font-family:var(--serif); font-size:20px; font-weight:600; line-height:1.3; margin:30px 0 10px }
.post-body p { margin-bottom:18px }
.post-body ul,.post-body ol { margin:0 0 20px; padding-left:24px }
.post-body li { margin-bottom:9px; padding-left:4px }
.post-body li::marker { color:var(--brand); font-weight:700 }
.post-body a { color:var(--brand-dark); text-decoration:underline; text-underline-offset:3px; font-weight:700 }
.post-body a:hover { color:var(--brand) }
.callout { background:var(--sage); border-left:4px solid var(--brand); border-radius:0 12px 12px 0; padding:18px 22px; margin:26px 0 }
.callout p { margin:0; font-size:16px; line-height:1.65 }
.post-disclaimer { margin-top:38px; padding-top:18px; border-top:1px solid var(--line); font-size:13px; line-height:1.6; color:var(--muted) }
.post-cta { display:flex; align-items:center; justify-content:space-between; gap:24px; background:#f6e9dc; border-radius:14px; padding:26px 28px; margin-top:26px }
.post-cta .eyebrow { margin-bottom:8px }
.post-cta h2 { font-size:23px; margin-bottom:6px }
.post-cta p:last-child { margin:0; font-size:14px; color:#606455 }
.post-cta .button { flex-shrink:0; gap:14px }
.more-tips { padding-block:44px 70px }

/* ---------- compartilhar ---------- */
.share { margin-top:30px; padding:22px 0 6px; border-top:1px solid var(--line) }
.share-label { font-family:var(--serif); font-size:19px; font-weight:600; letter-spacing:-.02em; margin-bottom:14px }
.share-buttons { display:flex; flex-wrap:wrap; align-items:center; gap:10px }
.share-btn { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 18px; border:1px solid #9aa08c; border-radius:8px; background:var(--white); color:var(--ink); font-weight:700; font-size:14px; transition:border-color .18s,color .18s,background .18s }
.share-btn:hover { border-color:var(--brand); color:var(--brand) }
.share-btn span { margin-left:8px }
.share-whats { background:#1f7a4d; border-color:#1f7a4d; color:#fff }
.share-whats:hover { background:#17613c; border-color:#17613c; color:#fff }
.share-status { font-size:13px; font-weight:700; color:#1f7a4d }
.tips-share { padding-bottom:70px }
.tips-share .share { margin-top:0 }
.tips-group:last-of-type { padding-bottom:40px }

@media(max-width:1050px) {
  .post.wrap { width:min(740px,calc(100% - 48px)) }
}
@media(max-width:760px) {
  .post.wrap { width:calc(100% - 36px) }
  .tips-hero { padding-block:24px 14px }
  .home-tips { padding-block:36px 10px }
  .tips-grid { gap:12px }
  .tip-cover { height:92px; font-size:40px }
  .post.wrap { padding-top:18px }
  .crumbs { margin-bottom:14px }
  /* No celular, o topo das dicas fica enxuto: sobra tela para o texto */
  .dicas-page .topline,.post-emoji,.post-head .post-lead,.tips-hero .post-lead { display:none }
  .dicas-page>header { position:static }
  .tips-hero h1,.post h1 { font-size:27px; line-height:1.15; margin-bottom:12px }
  .post-head .eyebrow,.tips-hero .eyebrow { margin-bottom:10px }
  .post-meta { padding-bottom:18px }
  .tip-chips { margin-top:16px }
  .post-body { font-size:16.5px; padding-top:20px }
  .post-body h2 { font-size:24px; margin-top:34px }
  .post-cta { flex-direction:column; align-items:flex-start; padding:22px 20px }
  .post-cta .button { width:100% }
  .more-tips { padding-block:32px 48px }
  .share-btn { flex:1 1 auto }
  .share-status { width:100% }
  .tips-share { padding-bottom:48px }
  .tips-group h2 { font-size:23px }
}
@media(prefers-reduced-motion:reduce) {
  .tip-card { transition:none }
  .tip-card:hover { transform:none }
}