/* =============================================================
   blog.css — blog do Zunzo (api/blog.php monta as páginas).
   Layout em "bento" (cartões grandes arredondados, botões
   redondos encaixados no canto), nas cores da marca.
   ============================================================= */
.blog{padding-top:18px}
:root{--b-r:32px;--b-azul:#2746f8;--b-ciano:#7edffe;--b-graf:#292729;--b-cinza:#eef1f7}

/* a "folha" branca onde ficam os cartões (o canto encaixado precisa de fundo liso) */
.sheet{background:#fff;border-radius:40px;padding:16px;box-shadow:0 2px 6px #0f2a5a0f,0 30px 80px #0f2a5a1f;display:flex;flex-direction:column;gap:16px}
.sheet.vazio{padding:60px 40px;text-align:center;align-items:center;gap:10px}
.sheet.vazio h1{font-size:clamp(30px,4vw,48px);margin:10px 0 0}
.sheet.vazio p{color:var(--soft);margin:0 0 14px}

/* ---------- capas: foto do painel ou degradês da marca ---------- */
.foto{background-size:cover;background-position:center;background-color:#c9d6ff}
.c1{background:radial-gradient(60% 90% at 12% 10%,#c4f3ff 0%,#7edffe 22%,transparent 55%),radial-gradient(70% 90% at 90% 85%,#9fd8ff 0%,#22b5e6 30%,transparent 70%),linear-gradient(120deg,#2746f8,#2f6bff 50%,#1c36d6)}
.c2{background:radial-gradient(70% 80% at 85% 15%,#c4f3ff 0%,#7edffe 25%,transparent 60%),linear-gradient(150deg,#1c36d6,#2746f8 55%,#3b8bff)}
.c3{background:radial-gradient(60% 80% at 15% 85%,#bdeeff 0%,#22b5e6 30%,transparent 65%),linear-gradient(200deg,#2f6bff,#2746f8 50%,#14237a)}
.c4{background:radial-gradient(70% 70% at 50% 0%,#e3f8ff 0%,#7edffe 30%,transparent 70%),linear-gradient(170deg,#3b8bff,#2746f8 60%,#1c36d6)}
.c5{background:radial-gradient(60% 90% at 90% 90%,#c4f3ff 0%,#7edffe 22%,transparent 55%),linear-gradient(110deg,#14237a,#2746f8 55%,#2f6bff)}
.c6{background:radial-gradient(55% 80% at 10% 10%,#ffffff 0%,#bdeeff 20%,transparent 55%),radial-gradient(70% 90% at 95% 90%,#22b5e6 0%,transparent 60%),linear-gradient(130deg,#2746f8,#1c36d6)}

/* etiqueta ciano (como o "Studio classes" da referência) */
.b-chip{display:inline-flex;align-self:flex-start;background:var(--b-ciano);color:#0e1a55;border-radius:100px;padding:7px 14px;font-size:12.5px;font-weight:800;letter-spacing:.01em;line-height:1.2}

/* ---------- topo: o cartão grande azul ---------- */
.b-hero{position:relative;overflow:hidden;border-radius:var(--b-r);color:#fff;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px;padding:clamp(28px,4vw,56px);min-height:420px;
  background:radial-gradient(55% 80% at 100% 0%,#7edffe 0%,#7edffe00 60%),radial-gradient(60% 90% at 0% 100%,#22b5e6aa 0%,transparent 60%),linear-gradient(135deg,#2746f8,#2f6bff 55%,#1c36d6)}
.b-arcos{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.b-arcos path{fill:none;stroke:#7edffe;stroke-width:2.5;opacity:.85;vector-effect:non-scaling-stroke}
.b-hero-tx{position:relative;display:flex;flex-direction:column;justify-content:center;gap:16px;max-width:620px}
.b-hero .eyebrow{color:#fff;background:#ffffff2e;border:1px solid #ffffff66;box-shadow:none;align-self:flex-start}
.b-hero .eyebrow::before{background:#fff;box-shadow:none}
.b-hero h1{color:#fff;font-size:clamp(40px,5vw,76px);line-height:1.02;margin:0;letter-spacing:-.035em}
.b-hero-tx > p{margin:0;color:#ffffffdb;font-size:17px;font-weight:500;max-width:46ch;line-height:1.55}
.b-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:14px;margin-top:8px;background:var(--b-ciano);color:#0e1a55;text-decoration:none;font-weight:800;font-size:14px;letter-spacing:.04em;text-transform:uppercase;border-radius:100px;padding:8px 8px 8px 26px;transition:transform .2s}
.b-cta i{width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center}
.b-cta svg,.b-tag svg,.b-go svg,.b-stat-go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.b-cta:hover{transform:translateY(-2px)}
.b-hero-side{position:relative;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:16px}
.b-stat{position:relative;display:flex;flex-direction:column;gap:10px;width:min(100%,330px);background:#fffffff2;color:var(--ink);text-decoration:none;border-radius:28px;padding:26px 26px 24px;box-shadow:0 20px 50px #0a1a8a33;transition:transform .2s}
.b-stat:hover{transform:translateY(-3px)}
.b-stat-n{font-size:58px;font-weight:700;letter-spacing:-.04em;line-height:1}
.b-stat-n sup{font-size:34px;margin-left:6px;vertical-align:14px}
.b-stat-t{font-size:14px;color:var(--soft);font-weight:500;max-width:22ch;line-height:1.45}
.b-stat-av{display:flex;margin-top:6px}
.b-stat-av i{width:44px;height:44px;border-radius:50%;border:3px solid #fff;margin-right:-12px;box-shadow:0 4px 10px #0a1a8a26}
.b-stat-go{position:absolute;right:20px;top:20px;width:42px;height:42px;border-radius:50%;background:var(--b-cinza);display:grid;place-items:center}
.b-tags{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;max-width:400px}
.b-tag{display:inline-flex;align-items:center;gap:8px;border:1.5px solid #ffffffb3;color:#fff;text-decoration:none;border-radius:100px;padding:8px 14px 8px 16px;font-size:13.5px;font-weight:700;transition:.15s}
.b-tag svg{width:14px;height:14px}
.b-tag:hover,.b-tag.on{background:#fff;color:var(--b-azul);border-color:#fff}

/* ---------- cartões ---------- */
.b-card{position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit;border-radius:var(--b-r);overflow:hidden;transition:transform .2s}
.b-card:hover{transform:translateY(-3px)}
/* o botão redondo encaixado no canto: um "recorte" branco com cantos arredondados para dentro */
.b-go{position:absolute;right:0;bottom:0;width:78px;height:78px;background:#fff;border-top-left-radius:30px;display:grid;place-items:center;z-index:2}
.b-go::before,.b-go::after{content:"";position:absolute;width:30px;height:30px;background:radial-gradient(circle at 0 0,transparent 29.5px,#fff 30px)}
.b-go::before{right:0;top:-30px}
.b-go::after{left:-30px;bottom:0}
.b-go i{width:54px;height:54px;border-radius:50%;background:var(--b-graf);color:#fff;display:grid;place-items:center;transition:background .2s}
.b-card:hover .b-go i{background:var(--b-azul)}

/* capa com o título por cima */
.b-capa{justify-content:flex-end;gap:14px;padding:26px 96px 28px 26px;min-height:300px;color:#fff;isolation:isolate}
.b-capa::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0a1a8a00 30%,#0a1a8acc 100%)}
.b-capa.foto::before{background:linear-gradient(180deg,#0a1a8a00 25%,#0a1a8ae6 100%)}
.b-capa .b-tit{font-size:clamp(22px,2vw,28px);font-weight:700;line-height:1.15;letter-spacing:-.02em;text-shadow:0 2px 14px #0a1a8a55}
.b-capa.alta{min-height:440px}

/* cartões de texto do meio */
.b-txt{padding:26px 26px 96px;gap:8px;min-height:260px}
.b-txt.ciano{background:var(--b-ciano);color:#0e1a55}
.b-txt.cinza{background:var(--b-cinza);color:var(--ink)}
.b-min{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1}
.b-min small{display:block;font-size:13px;font-weight:600;letter-spacing:0;margin-top:4px;opacity:.75}
.b-txt .b-cat{margin-top:auto;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.b-txt .b-tit{font-size:21px;font-weight:700;line-height:1.25;letter-spacing:-.02em}

/* mosaico: capa · (título + 2 cartões) · capa */
.b-mosaico{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);gap:16px}
.b-meio{display:flex;flex-direction:column;gap:16px}
.b-meio h2{margin:10px 6px 0;font-size:clamp(24px,2.5vw,36px);font-weight:600;line-height:1.2;letter-spacing:-.025em;text-wrap:balance}
.b-par{display:grid;grid-template-columns:1fr 1fr;gap:16px;flex:1}

/* lista completa */
.b-todos{padding:30px 10px 10px}
.b-todos-hd{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.b-todos-hd h2{margin:0;font-size:clamp(26px,3vw,40px)}
.b-filtros{display:flex;flex-wrap:wrap;gap:8px}
.b-filtros a{text-decoration:none;border-radius:100px;padding:9px 16px;font-size:13.5px;font-weight:700;color:var(--soft);background:var(--b-cinza);transition:.15s}
.b-filtros a:hover{color:var(--ink)}
.b-filtros a.on{background:var(--b-graf);color:#fff}
.b-lista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.b-item{background:var(--b-cinza)}
.b-thumb{position:relative;aspect-ratio:16/10;display:flex;align-items:flex-end;padding:16px;border-radius:var(--b-r) var(--b-r) 0 0}
.b-body{display:flex;flex-direction:column;gap:8px;padding:20px 22px 26px;padding-right:90px;flex:1}
.b-item .b-tit{font-size:19px;font-weight:800;line-height:1.28;letter-spacing:-.02em}
.b-res{font-size:14.5px;color:var(--soft);font-weight:500;line-height:1.5}
.b-meta{margin-top:auto;padding-top:6px;font-size:12.5px;color:var(--faint);font-weight:600}
.b-nada{grid-column:1/-1;text-align:center;color:var(--soft);padding:40px 0}

/* ---------- artigo ---------- */
.artigo{max-width:880px;margin:30px auto 0;padding:44px 50px 40px;background:#fff;border-radius:40px;box-shadow:0 2px 6px #0f2a5a0f,0 30px 80px #0f2a5a1f}
.voltar{display:inline-block;font-size:14px;font-weight:700;color:var(--indigo);text-decoration:none;margin-bottom:22px}
.voltar:hover{text-decoration:underline;text-underline-offset:4px}
.art-head h1{font-size:clamp(32px,4vw,54px);line-height:1.08;margin:16px 0 18px;text-wrap:balance}
.art-lead{font-size:20px;color:var(--soft);font-weight:500;line-height:1.5;margin:0 0 14px;text-wrap:pretty}
.art-meta{font-size:14px;color:var(--faint);font-weight:600;margin:0 0 28px}
.art-capa{position:relative;overflow:hidden;border-radius:var(--b-r);aspect-ratio:21/9;margin-bottom:40px;display:flex;align-items:flex-end;padding:22px}
.art-capa i{position:absolute;border-radius:50%;background:#ffffff26}
.art-capa.foto i{display:none}
.art-capa i:nth-of-type(1){width:50%;aspect-ratio:1;left:-14%;bottom:-50%}
.art-capa i:nth-of-type(2){width:28%;aspect-ratio:1;right:-6%;top:-30%}
.art-capa .b-chip{position:relative;z-index:1}
.art-corpo{font-size:18px;line-height:1.75;color:#2a2b36}
.art-corpo p{margin:0 0 20px}
.art-corpo h2{font-size:clamp(24px,2.4vw,32px);margin:44px 0 14px;scroll-margin-top:90px}
.art-corpo h3{font-size:21px;margin:30px 0 10px;letter-spacing:-.02em}
.art-corpo ul,.art-corpo ol{margin:0 0 22px;padding-left:24px}
.art-corpo li{margin:0 0 8px}
.art-corpo li::marker{color:var(--indigo);font-weight:800}
.art-corpo strong{color:var(--ink)}
.art-corpo a{color:var(--indigo);font-weight:700}
.art-corpo blockquote{margin:0 0 22px;padding:18px 22px;border-radius:20px;background:var(--b-cinza);border-left:5px solid var(--indigo)}
.art-corpo blockquote p{margin:0;font-size:17px}
.art-corpo figure{margin:30px 0}
.art-corpo figure img{width:100%;border-radius:24px}
.art-corpo figcaption{font-size:14px;color:var(--faint);margin-top:10px;text-align:center}
.resumo{margin:44px 0 10px;padding:28px 30px;border-radius:var(--b-r);background:var(--b-ciano);color:#0e1a55}
.resumo h2{margin:0 0 10px;font-size:22px;color:#0e1a55}
.resumo strong{color:#0e1a55}
.resumo p:last-child,.resumo ul:last-child{margin-bottom:0}
.partilha{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:36px 0 0;padding-top:26px;border-top:1px solid #0f2a5a1a;font-size:15px;font-weight:600;color:var(--soft)}
.partilha span{margin-right:6px}
.partilha .btn.glass{background:var(--b-cinza);border-color:var(--b-cinza)}

/* chamada para montar o portfólio (sem mascote) */
.blog-cta{margin:60px auto 0;max-width:1080px;border-radius:36px;padding:clamp(34px,5vw,60px);position:relative;overflow:hidden;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:30px;
  background:radial-gradient(60% 90% at 12% 10%,#c4f3ff 0%,#7edffe 22%,transparent 55%),radial-gradient(70% 90% at 90% 85%,#9fd8ff 0%,#22b5e6 30%,transparent 70%),linear-gradient(120deg,#2746f8,#2f6bff 50%,#1c36d6);box-shadow:0 40px 90px #1f4bff4d}
.blog-cta::before,.blog-cta::after{content:"";position:absolute;border-radius:50%;background:#ffffff26}
.blog-cta::before{width:300px;height:300px;left:-100px;bottom:-160px}
.blog-cta::after{width:200px;height:200px;right:-50px;top:-80px}
.blog-cta > *{position:relative}
.blog-cta .eyebrow{color:#fff;background:#ffffff2e;border-color:#ffffff66;box-shadow:none}
.blog-cta .eyebrow::before{background:#fff;box-shadow:none}
.blog-cta h2{color:#fff;font-size:clamp(26px,3vw,40px);margin:12px 0 10px}
.blog-cta p{margin:0;color:#ffffffd9;font-weight:500;max-width:52ch}
.blog-cta .btn{background:#fff;color:var(--indigo);flex:none}

.leia{margin-top:60px}
.leia h2{font-size:clamp(26px,3vw,38px);margin-bottom:24px}
.leia .b-lista{background:#fff;border-radius:40px;padding:16px;box-shadow:0 2px 6px #0f2a5a0f,0 30px 80px #0f2a5a1f}

/* ---------- telas menores ---------- */
@media(max-width:1100px){
  .b-mosaico{grid-template-columns:1fr 1fr}
  .b-meio{grid-column:1/-1;order:-1}
  .b-lista{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:860px){
  .b-hero{grid-template-columns:1fr;min-height:0}
  .b-hero-side{align-items:stretch}
  .b-stat{width:100%}
  .b-tags{justify-content:flex-start;max-width:none}
}
@media(max-width:640px){
  .sheet{border-radius:30px;padding:10px;gap:10px}
  .b-hero{border-radius:24px;padding:26px 22px}
  .b-arcos path{opacity:.35}
  .b-mosaico{grid-template-columns:1fr;gap:10px}
  .b-capa.alta{min-height:340px}
  .b-par{grid-template-columns:1fr;gap:10px}
  .b-txt{min-height:0}
  .b-lista{grid-template-columns:1fr;gap:10px}
  .b-todos{padding:22px 4px 4px}
  .b-filtros{flex-wrap:nowrap;overflow-x:auto;width:100%;scrollbar-width:none}
  .b-filtros a{flex:none}
  .leia .b-lista{padding:10px;border-radius:30px}
  .artigo{padding:26px 20px 28px;border-radius:28px;margin-top:16px}
  .art-corpo{font-size:17px}
  .art-lead{font-size:18px}
  .art-capa{aspect-ratio:16/9}
  .blog-cta{flex-direction:column;align-items:flex-start}
}