/* ============================================================
   PanaService — Mãe 6 · Blog (hub, categoria, post)
   Conteúdo real → identidade clássica. Complementa styles/pana.css.
   ============================================================ */

/* hero do blog (claro) */
.bloghero{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff,#eaf1f3);border-bottom:1px solid var(--line)}
.bloghero .dotfield{position:absolute;inset:0;background-image:radial-gradient(rgba(0,100,104,.14) 1.4px,transparent 1.5px);background-size:26px 26px;opacity:.5;mask-image:linear-gradient(180deg,#000,transparent)}
.bloghero .wrap{position:relative;z-index:2;padding-block:clamp(32px,4vw,56px)}
.bloghero h1{font-size:clamp(30px,4vw,50px);line-height:1.05}
.bloghero .lead{font-size:clamp(16px,1.5vw,19px);color:var(--ink-2);max-width:680px;margin-top:14px;line-height:1.6}
.blog-search{display:flex;gap:10px;max-width:520px;margin-top:24px}
.blog-search .bar{flex:1;display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-pill);padding:8px 8px 8px 18px;box-shadow:var(--sh-2)}
.blog-search input{flex:1;border:none;outline:none;font-family:var(--body);font-size:15px;background:none;min-width:0}
.blog-search svg{width:19px;height:19px;color:var(--ink-3);flex:none}

/* category nav chips (hub) */
.blog-catnav{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.blog-catnav a{font-size:13.5px;font-weight:600;color:var(--ink-2);background:#fff;border:1.5px solid var(--line);border-radius:var(--r-pill);padding:8px 15px;transition:.15s}
.blog-catnav a:hover{border-color:var(--teal);color:var(--teal)}

/* category section on hub */
.cat-block{margin-top:clamp(36px,4vw,52px)}
.cat-block__head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:22px}
.cat-block__head h2{font-size:clamp(22px,2.4vw,30px)}
.cat-block__head .desc{font-size:14.5px;color:var(--ink-3);margin-top:6px;max-width:560px}
.cat-block__head .all{font-size:14px;font-weight:700;color:var(--teal);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}

/* post cards grid (real content) */
.bposts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bpost{display:flex;flex-direction:column;gap:11px;padding:24px;text-decoration:none}
.bpost .cat{font-family:var(--mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--teal)}
.bpost h3{font-size:18px;line-height:1.3;color:var(--ink)}
.bpost p{font-size:14px;color:var(--ink-2);line-height:1.55;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bpost .date{font-size:12.5px;color:var(--ink-3);margin-top:auto;display:flex;align-items:center;gap:7px}
.bpost .date::before{content:"";width:14px;height:14px;border-radius:3px;background:var(--teal-50);flex:none}
.bpost .thumb{margin:-24px -24px 4px;aspect-ratio:16/8;background:linear-gradient(135deg,var(--teal-50),var(--aqua-50));position:relative;display:grid;place-items:center;color:rgba(0,100,104,.3);overflow:hidden}
.bpost .thumb svg{width:42px;height:42px}
@media(max-width:980px){.bposts{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.bposts{grid-template-columns:1fr}}

/* category page list */
.catlist{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:980px){.catlist{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.catlist{grid-template-columns:1fr}}
.pagination{display:flex;gap:8px;justify-content:center;margin-top:40px}
.pagination a,.pagination span{min-width:42px;height:42px;display:grid;place-items:center;border-radius:var(--r-sm);border:1.5px solid var(--line);background:#fff;font-weight:600;font-size:14.5px;color:var(--ink-2);padding:0 12px}
.pagination .active{background:var(--navy);color:#fff;border-color:var(--navy)}
.pagination a:hover{border-color:var(--teal);color:var(--teal)}

/* ---------- POST (article) ---------- */
.post-hero{background:linear-gradient(180deg,#fff,#f4f7f9);border-bottom:1px solid var(--line)}
.post-hero .wrap{max-width:820px;padding-block:clamp(28px,3vw,44px)}
.post-hero .catpill{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--teal);background:var(--teal-50);padding:6px 13px;border-radius:var(--r-pill)}
.post-hero h1{font-size:clamp(28px,3.6vw,44px);line-height:1.1;margin:16px 0}
.post-hero .pmeta{display:flex;gap:18px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-3);font-weight:600}
.post-hero .pmeta span{display:inline-flex;align-items:center;gap:6px}
.post-hero .excerpt{font-size:17.5px;color:var(--ink-2);line-height:1.6;margin-top:18px}
.post-body{max-width:820px;margin-inline:auto}

/* answer block (resposta direta) */
.answer-direct{display:flex;gap:14px;background:linear-gradient(180deg,#eef6f3,#e3f0ea);border:1px solid #c9e4d8;border-left:5px solid var(--teal);border-radius:var(--r-md);padding:22px 24px;margin:32px 0}
.answer-direct .ic{color:var(--teal);flex:none;margin-top:2px}
.answer-direct .t{font-family:var(--display);font-weight:700;margin-bottom:4px;font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--teal)}
.answer-direct p{color:var(--ink);font-size:16px;line-height:1.6}

/* article figure */
.article-figure{margin:0 0 24px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.article-figure .ph{aspect-ratio:19/10;background:linear-gradient(135deg,var(--teal-50),var(--aqua-50));display:grid;place-items:center;color:rgba(0,100,104,.32)}
.article-figure .ph svg{width:64px;height:64px}
.article-figure figcaption{font-size:13px;color:var(--ink-3);padding:10px 14px;background:#fff;text-align:center}

/* pricing table in article */
.pricing-table{width:100%;border-collapse:collapse;margin:24px 0;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;font-size:15px}
.pricing-table th{background:var(--navy);color:#fff;font-family:var(--display);text-align:left;padding:13px 18px;font-size:14px}
.pricing-table td{padding:12px 18px;border-bottom:1px solid var(--line-2);color:var(--ink-2)}
.pricing-table td:first-child{font-weight:600;color:var(--ink)}
.pricing-table td:last-child{font-family:var(--display);font-weight:700;color:var(--teal)}
.pricing-table tr:last-child td{border-bottom:none}

/* client CTA box (inline) */
.client-cta{background:var(--aqua-50);border:1px solid var(--aqua);border-radius:var(--r-lg);padding:28px;text-align:center;margin:32px 0}
.client-cta h3{font-size:21px;margin-bottom:8px}
.client-cta p{font-size:14.5px;color:var(--ink-2);margin-bottom:18px}

/* pro block (dark, provider acquisition) */
.pro-block{background:linear-gradient(135deg,#0d2436,var(--navy));border-radius:var(--r-xl);padding:clamp(28px,4vw,40px);color:#fff;margin:40px 0}
.pro-block .label{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#7fd6d8;font-weight:500}
.pro-block h2{color:#fff;font-size:clamp(22px,2.6vw,28px);margin:10px 0 12px}
.pro-block .body{color:#aebfcd;font-size:15.5px;line-height:1.6}
.pro-block .body p{margin-bottom:10px}
.pro-block .benefits{list-style:none;margin:20px 0 24px;display:grid;gap:10px}
.pro-block .benefits li{display:flex;align-items:center;gap:11px;color:#cbd5e1;font-size:15px}
.pro-block .benefits li svg{width:17px;height:17px;color:#37c7a8;flex:none}

/* internal links */
.intlinks{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:24px 28px;margin:32px 0}
.intlinks h3{font-size:17px;margin-bottom:14px}
.intlinks ul{list-style:none;display:grid;gap:4px}
.intlinks li a{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:var(--teal);padding:7px 0}
.intlinks li a:hover{color:var(--teal-600)}

/* professional profile card */
.pro-profile{display:flex;align-items:center;gap:16px;background:var(--canvas);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 24px;margin:32px 0}
.pro-profile .av{width:64px;height:64px;flex:none}
.pro-profile .badge2{display:inline-block;font-size:11px;font-weight:700;color:var(--teal);background:var(--teal-50);padding:3px 10px;border-radius:var(--r-pill);margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em}
.pro-profile b{font-family:var(--display);font-size:16px;display:block}
.pro-profile .meta{font-size:13px;color:var(--ink-3);margin-top:3px}
.pro-profile .pp-cta{margin-left:auto}

/* related */
.related-posts{margin-top:48px}
.related-posts h2{font-size:clamp(22px,2.4vw,28px);margin-bottom:22px}