/* =============================================================================
   Chankeo · blog (/blog e /blog/{slug}) — e os cartões do blog na landing.

   Mesma identidade da landing: papel creme, contorno grosso de tinta, sombra
   "pop" deslocada, Fraunces nos títulos. Nenhum token novo: cor, contorno,
   sombra e raio vêm do theme.css, e por isso o modo escuro vem de graça.
   A política de privacidade também usa .bl-artigo/.bl-cab/.bl-corpo.
   ========================================================================== */

.bl{max-width:1120px;margin:0 auto;padding:10px 20px 56px}
/* margens laterais: uma regra global zerava o padding do <main> no telefone e o texto encostava na borda */
.lp-body main.bl{padding:10px max(20px,env(safe-area-inset-left)) 56px max(20px,env(safe-area-inset-right))!important;box-sizing:border-box;width:100%}
.bl-body .lp-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--brand)}

/* ------------------------------------------------ os tons de cada assunto */
[data-tom]{--tom:var(--olive);--tom-soft:var(--olive-soft);--tom-ink:var(--olive-ink);--tom-on:var(--on-brand)}
[data-tom="brand"]{--tom:var(--brand);--tom-soft:var(--brand-soft);--tom-ink:var(--brand-ink);--tom-on:var(--on-brand)}
[data-tom="teal"]{--tom:var(--teal);--tom-soft:var(--teal-soft);--tom-ink:var(--teal-ink);--tom-on:var(--on-brand)}
[data-tom="gold"]{--tom:var(--gold);--tom-soft:var(--gold-soft);--tom-ink:var(--gold-ink);--tom-on:var(--on-gold)}

.bl-chip{
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;line-height:1;
  background:var(--tom,var(--gold));color:var(--tom-on,var(--on-gold));
  border:2px solid var(--ink-line);border-radius:var(--r-pill);padding:5px 11px;
  box-shadow:2px 2px 0 var(--ink-line);
}
.bl-chip small{font-size:10.5px;opacity:.85;background:rgba(0,0,0,.14);border-radius:var(--r-pill);padding:2px 6px}
.bl-selo{
  display:inline-flex;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;line-height:1;
  background:var(--surface);color:var(--ink);border:2px solid var(--ink-line);border-radius:var(--r-pill);padding:5px 11px;
}

/* ---------------------------------------------------------- capa do blog */
.bl-hero{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(20px,4vw,48px);align-items:center;
  padding:clamp(26px,5vw,56px) 0 clamp(20px,3vw,36px);
}
.bl-hero .eyebrow{color:var(--brand-ink);display:block;margin-bottom:8px}
.bl-hero h1{
  font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:clamp(38px,6vw,66px);line-height:1.02;letter-spacing:-2.4px;margin:0 0 16px;
}
.bl-hero p{font-size:clamp(16px,1.8vw,18.5px);line-height:1.6;color:var(--ink-2);margin:0 0 20px;max-width:54ch}
.bl-temas{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.bl-hero-arte{position:relative;justify-self:center;width:min(100%,380px);aspect-ratio:1}
.bl-hero-arte::before{
  content:'';position:absolute;inset:8%;border-radius:50%;
  background:var(--teal-soft);border:var(--bw) solid var(--ink-line);box-shadow:var(--pop);
}
.bl-hero-cena{position:relative;display:block;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(4px 6px 0 rgba(0,0,0,.12))}
.bl-hero-ic{position:absolute;width:clamp(56px,7vw,84px);height:auto;
  filter:drop-shadow(3px 4px 0 rgba(0,0,0,.14));animation:bl-flutua 6s ease-in-out infinite}
.bl-hero-ic-1{left:-6%;bottom:6%;transform:rotate(-8deg)}
.bl-hero-ic-2{right:-4%;top:2%;animation-delay:-2s}
.bl-hero-ic-3{right:-2%;bottom:0;animation-delay:-4s}
@keyframes bl-flutua{0%,100%{translate:0 0}50%{translate:0 -7px}}

/* ------------------------------------------------------ artigo em destaque */
.bl-destaque{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  background:var(--surface);color:var(--ink);text-decoration:none;
  border:var(--bw) solid var(--ink-line);border-radius:var(--r-xl);box-shadow:var(--pop);
  overflow:hidden;margin:6px 0 clamp(34px,5vw,52px);
  transition:transform .18s ease, box-shadow .18s ease;
}
.bl-destaque:hover{transform:translate(-2px,-3px);box-shadow:6px 8px 0 var(--ink-line)}
.bl-destaque-arte{
  display:grid;place-items:center;min-height:300px;border-right:var(--bw) solid var(--ink-line);
  background:
    radial-gradient(circle at 50% 55%, var(--tom-soft) 0 40%, transparent 41%),
    repeating-linear-gradient(-45deg, transparent 0 14px, color-mix(in srgb, var(--tom) 10%, transparent) 14px 16px),
    var(--surface-2);
}
.bl-destaque-arte img{display:block;width:min(88%,340px);height:auto;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.bl-destaque:hover .bl-destaque-arte img{transform:scale(1.04) rotate(-1.5deg)}
.bl-destaque-texto{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:clamp(22px,3.5vw,40px)}
.bl-destaque h2{
  font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:clamp(26px,3.2vw,38px);line-height:1.08;letter-spacing:-1.2px;margin:4px 0 0;
}
.bl-destaque p{margin:0;font-size:16px;line-height:1.6;color:var(--ink-2)}
.bl-destaque-rodape{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:8px}
.bl-destaque-rodape small{font-size:13px;font-weight:700;color:var(--ink-3)}
.bl-cab-sobre{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0}

.bl-secao-t,.bl-mais>h2{
  font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:clamp(26px,3.4vw,34px);letter-spacing:-1px;line-height:1.1;margin:0 0 18px;
  display:flex;align-items:center;gap:14px;
}
.bl-secao-t::after,.bl-mais>h2::after{content:'';flex:1;height:var(--bw);background:var(--ink-line);opacity:.18;border-radius:9px}

/* ------------------------------------------------------------ os cartões */
.bl-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px}
.bl-card{
  display:flex;flex-direction:column;gap:10px;padding:12px 12px 18px;
  border:var(--bw) solid var(--ink-line);border-radius:var(--r-xl);background:var(--surface);
  box-shadow:var(--pop);color:var(--ink);text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease;
}
.bl-card:hover{transform:translate(-2px,-3px);box-shadow:6px 8px 0 var(--ink-line)}
.bl-card-arte{
  display:grid;place-items:center;aspect-ratio:16/10;overflow:hidden;margin-bottom:4px;
  border:var(--bw) solid var(--ink-line);border-radius:calc(var(--r-xl) - 10px);
  background:
    radial-gradient(circle at 50% 62%, var(--tom-soft,var(--gold-soft)) 0 38%, transparent 39%),
    var(--surface-2);
}
.bl-card-arte{position:relative}
.bl-card-arte img{position:absolute;inset:6px 0 0;display:block;width:100%;height:calc(100% - 6px);object-fit:contain;
  transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.bl-card:hover .bl-card-arte img{transform:scale(1.06) rotate(-2deg)}
.bl-card .bl-chip{margin-left:6px}
.bl-card h2,.bl-card h3{
  font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:21px;line-height:1.18;letter-spacing:-.5px;margin:0;padding:0 6px;
}
.bl-card p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.55;padding:0 6px}
.bl-card-mais{margin-top:auto;padding:6px 6px 0;font-size:13px;font-weight:800;color:var(--brand-ink)}

/* ----------------------------------------------------------------- artigo */
.bl-migalhas{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;font-weight:700;color:var(--ink-3);margin:18px 0 14px}
.bl-migalhas a{color:var(--ink-2);text-decoration:none}
.bl-migalhas a:hover{color:var(--brand-ink);text-decoration:underline}
.bl-artigo{max-width:1040px;margin:0 auto}
.bl-cab{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(18px,3vw,34px);align-items:center;
  margin:0 0 30px;padding:clamp(22px,3.5vw,38px);
  background:var(--surface);border:var(--bw) solid var(--ink-line);border-radius:var(--r-xl);box-shadow:var(--pop);
  position:relative;overflow:hidden;
}
.bl-cab::before{content:'';position:absolute;inset:0 auto 0 0;width:10px;background:var(--tom,var(--brand));border-right:var(--bw) solid var(--ink-line)}
.bl-cab>div:first-child{padding-left:8px}
.bl-cab .eyebrow{color:var(--brand-ink)}
.bl-cab-sobre>span:not(.bl-chip){font-size:13px;font-weight:800;color:var(--ink-3)}
.bl-cab h1{
  font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:clamp(32px,4.6vw,52px);line-height:1.05;letter-spacing:-1.6px;margin:14px 0 12px;
}
.bl-lead{font-size:clamp(16.5px,1.8vw,19px);line-height:1.58;color:var(--ink-2);margin:0 0 18px;max-width:60ch}
.bl-meta{display:flex;align-items:center;gap:10px;margin:0;padding-top:16px;border-top:2px dashed color-mix(in srgb,var(--ink-line) 30%,transparent)}
.bl-meta img{width:36px;height:36px;border-radius:50%;border:2px solid var(--ink-line);background:var(--surface-2)}
.bl-meta b{display:block;font-size:14px;line-height:1.2}
.bl-meta small{display:block;font-size:12.5px;font-weight:700;color:var(--ink-3)}
.bl-cab-arte{
  width:clamp(180px,24vw,280px);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;
  background:var(--tom-soft,var(--gold-soft));border:var(--bw) solid var(--ink-line);box-shadow:var(--pop-sm);
}
.bl-arte{display:block;width:112%;max-width:none;height:auto;filter:drop-shadow(3px 5px 0 rgba(0,0,0,.12))}

.bl-sumario{
  max-width:68ch;margin:0 auto 28px;padding:16px 20px;
  background:var(--surface-2);border:2px solid var(--ink-line);border-radius:var(--r-lg);
}
.bl-sumario b{display:block;background:none;padding:0;margin-left:0;border-radius:0;font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.bl-sumario ol{margin:0;padding:0 0 0 20px;display:grid;gap:4px}
.bl-sumario li{font-size:15px;line-height:1.45}
.bl-sumario li::marker{color:var(--brand);font-weight:800}
.bl-sumario a{color:var(--ink);text-decoration:none;border-bottom:2px solid transparent}
.bl-sumario a:hover{border-bottom-color:var(--brand)}

/* o texto: 68 caracteres por linha, Fraunces nos títulos */
.bl-corpo{max-width:68ch;margin:0 auto;font-size:18px;line-height:1.75;color:var(--ink)}
.bl-corpo>:first-child{margin-top:0}
.bl-corpo h2{
  font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:clamp(25px,3vw,32px);line-height:1.15;letter-spacing:-.9px;margin:46px 0 14px;
  scroll-margin-top:90px;
}
.bl-corpo h2::before{content:'';display:block;width:44px;height:6px;border-radius:9px;background:var(--brand);margin-bottom:14px;
  border:2px solid var(--ink-line)}
.bl-corpo h3{font-size:20px;line-height:1.3;margin:30px 0 8px}
.bl-corpo p{margin:0 0 18px}
.bl-corpo strong,.bl-corpo b{color:var(--ink);font-weight:800}
.bl-corpo a{color:var(--brand-ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.bl-corpo a:hover{color:var(--brand)}
.bl-corpo ul,.bl-corpo ol{margin:0 0 22px;padding:0}
.bl-corpo ul{list-style:none}
.bl-corpo ul>li{position:relative;padding-left:30px;margin-bottom:10px}
.bl-corpo ul>li::before{
  content:'';position:absolute;left:4px;top:.62em;width:11px;height:11px;border-radius:3px;
  background:var(--gold);border:2px solid var(--ink-line);transform:rotate(45deg);
}
.bl-corpo ol{list-style:none;counter-reset:bl-n}
.bl-corpo ol>li{position:relative;padding-left:42px;margin-bottom:12px;counter-increment:bl-n;min-height:28px}
.bl-corpo ol>li::before{
  content:counter(bl-n);position:absolute;left:0;top:.1em;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;font-size:14px;font-weight:800;line-height:1;
  background:var(--brand);color:var(--on-brand);border:2px solid var(--ink-line);
}
.bl-corpo em[lang="es"],.bl-corpo td[lang="es"]{font-family:var(--font-display);font-style:normal;font-weight:600;color:var(--brand-ink)}
.bl-corpo em[lang="es"]{background:linear-gradient(transparent 62%, color-mix(in srgb,var(--gold) 40%,transparent) 62%);padding:0 2px}
.bl-corpo blockquote{
  position:relative;margin:30px 0;padding:22px 24px 22px 64px;
  background:var(--gold-soft);border:var(--bw) solid var(--ink-line);border-radius:var(--r-lg);box-shadow:var(--pop-sm);
  font-family:var(--font-display);font-variation-settings:var(--wonk);font-size:clamp(20px,2.4vw,23px);line-height:1.38;letter-spacing:-.3px;
}
.bl-corpo blockquote::before{
  content:'“';position:absolute;left:16px;top:6px;font-size:70px;line-height:1;color:var(--brand);font-family:var(--font-display);
}
.bl-corpo blockquote p{margin:0}
.bl-corpo blockquote p+p{margin-top:10px}
.bl-corpo table{
  width:100%;border-collapse:separate;border-spacing:0;margin:14px 0 26px;font-size:15.5px;line-height:1.5;
  border:var(--bw) solid var(--ink-line);border-radius:var(--r-md);overflow:hidden;background:var(--surface);box-shadow:var(--pop-sm);
}
.bl-corpo th{text-align:left;background:var(--ink);color:var(--bg);padding:11px 14px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.bl-corpo td{padding:11px 14px;border-top:2px solid color-mix(in srgb,var(--ink-line) 14%,transparent);vertical-align:top}
.bl-corpo tbody tr:nth-child(even) td{background:var(--surface-2)}
.bl-corpo hr{border:0;height:var(--bw);background:var(--ink-line);opacity:.18;margin:34px 0}

/* ------------------------------------------------------------ caixa de CTA */
.bl-cta{
  display:grid;grid-template-columns:170px minmax(0,1fr);gap:22px;align-items:center;
  max-width:880px;margin:48px auto 10px;padding:22px 28px 22px 18px;
  border:var(--bw) solid var(--ink-line);border-radius:var(--r-xl);background:var(--brand);color:var(--on-brand);box-shadow:var(--pop);
  position:relative;overflow:hidden;
}
.bl-cta::after{content:'';position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;
  background:rgba(255,255,255,.08);pointer-events:none}
.bl-cta img{display:block;width:170px;height:auto;margin:-8px 0 -14px;filter:drop-shadow(3px 5px 0 rgba(0,0,0,.2))}
.bl-cta .eyebrow{color:var(--on-brand);opacity:.9}
.bl-cta h2{font-family:var(--font-display);font-variation-settings:var(--wonk);margin:6px 0 8px;font-size:clamp(24px,3vw,30px);letter-spacing:-.8px;line-height:1.1;color:var(--on-brand)}
.bl-cta p{margin:0 0 16px;color:var(--on-brand);font-size:15.5px;line-height:1.55;max-width:52ch}
.bl-cta .button.dark{background:var(--gold);color:var(--on-gold)}
.bl .bl-cta{position:relative;z-index:0}

.bl-mais{max-width:1120px;margin:56px auto 0}

.bl-vazio{max-width:520px;margin:40px auto;text-align:center;padding:28px;
  background:var(--surface);border:var(--bw) solid var(--ink-line);border-radius:var(--r-xl);box-shadow:var(--pop)}
.bl-vazio img{width:120px;height:auto;margin:0 auto 8px;display:block}
.bl-vazio h1{font-family:var(--font-display);font-variation-settings:var(--wonk);font-size:34px;margin:0 0 8px}
.bl-vazio p{color:var(--ink-2);margin:0 0 18px}

/* ------------------------------------------------------ o blog na landing */
.lp-blog .bl-grade{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){ .lp-blog .bl-grade{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))} }

/* --------------------------------------------------------------- telefone */
@media (max-width:860px){
  .bl-hero{grid-template-columns:1fr}
  .bl-hero-arte{order:-1;width:min(70%,250px);justify-self:start;margin-left:20px}
  .bl-destaque{grid-template-columns:1fr}
  .bl-destaque-arte{min-height:0;aspect-ratio:16/10;border-right:0;border-bottom:var(--bw) solid var(--ink-line)}
  .bl-destaque-arte{position:relative}
  .bl-destaque-arte img{position:absolute;inset:8px 0 0;width:100%;height:calc(100% - 8px);object-fit:contain}
  .bl-cab{grid-template-columns:1fr}
  .bl-cab-arte{order:-1;width:150px}
}
@media (max-width:640px){
  .bl-hero h1{letter-spacing:-1.5px}
  .bl-corpo{font-size:17px;line-height:1.7}
  .bl-corpo table{display:block;overflow-x:auto;font-size:14.5px}
  .bl-corpo blockquote{padding:18px 18px 18px 52px}
  .bl-corpo blockquote::before{left:12px;font-size:56px}
  .bl-cab{padding:20px 18px 20px 26px}
  .bl-cab-arte{width:120px}
  .bl-cta{grid-template-columns:1fr;padding:20px}
  .bl-cta img{width:120px;margin:-6px 0 0}
  .bl-grade{grid-template-columns:1fr}
  .lp-blog .bl-grade{grid-template-columns:1fr}
  .bl-destaque-rodape .button{flex:1 1 auto;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .bl-hero-ic{animation:none}
  .bl-card,.bl-destaque{transition:none}
  .bl-card:hover,.bl-destaque:hover,.bl-card:hover .bl-card-arte img,.bl-destaque:hover .bl-destaque-arte img{transform:none}
}
/* na landing, no telefone, os três artigos viram linhas compactas */
@media (max-width:640px){
  .lp-blog .bl-card{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:12px;row-gap:6px;padding:10px;align-items:start}
  .lp-blog .bl-card-arte{grid-row:1/4;aspect-ratio:1;margin:0;border-radius:14px}
  .lp-blog .bl-card .bl-chip{justify-self:start;margin:2px 0 0;font-size:10px;padding:4px 9px}
  .lp-blog .bl-card h3{font-size:17px;padding:0}
  .lp-blog .bl-card-mais{padding:0;font-size:12px}
}
@media (max-width:640px){
  .bl-cab h1,.bl-hero h1{letter-spacing:-.8px}
  .bl-corpo h2,.bl-secao-t,.bl-mais>h2,.bl-destaque h2,.bl-cta h2{letter-spacing:-.3px}
  .bl-card h2,.bl-card h3{letter-spacing:-.2px}
}
.bl>.bl-artigo:first-child{padding-top:24px}