/* =========================================================
   Blog · lista de artigos e página do artigo (carrega depois do estilo.css)
   Desenho "Aurora": capa viva em todo cartão, vidro e destaque que inclina com o mouse.
   --cor é a cor do tema do artigo (definida no HTML pelo montar_blog.py)
   ========================================================= */
:root{--f-mono:ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,monospace}

/* ---------- abertura ---------- */
.b-abre{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(110% 60% at 18% 8%, oklch(0.42 0.27 268 / .32), transparent 62%), var(--breu)}
.b-abre::before{content:"";position:absolute;inset:-25% -10% -10%;z-index:-1;filter:blur(46px);animation:b-aurora 16s ease-in-out infinite alternate;
  background:radial-gradient(34% 44% at 18% 30%, oklch(0.56 0.24 262 / .5), transparent 70%), radial-gradient(30% 40% at 82% 18%, oklch(0.62 0.22 293 / .4), transparent 70%), radial-gradient(30% 40% at 62% 84%, oklch(0.80 0.14 220 / .24), transparent 70%)}
.b-abre .envolve{padding-top:calc(var(--topo) + var(--e-7));padding-bottom:var(--e-7)}
.b-abre h1{font-size:var(--t-3xl);font-weight:500;line-height:1.04;letter-spacing:-.028em;max-width:18ch}
.b-abre h1 b{font-weight:600;background:linear-gradient(90deg, var(--celeste), var(--ciano) 55%, var(--violeta));-webkit-background-clip:text;background-clip:text;color:transparent}
.b-abre h1 .selo{display:flex;width:max-content;margin-bottom:var(--e-5);letter-spacing:normal}   /* o selo faz parte do título: é ele que diz "Blog da Kuma Tech" */
.b-abre .sub{color:var(--texto-2);font-size:var(--t-l);line-height:1.6;max-width:48ch;margin-top:var(--e-4)}
@keyframes b-aurora{from{transform:translate3d(-4%, -3%, 0) scale(1)}to{transform:translate3d(5%, 4%, 0) scale(1.12)}}

/* ---------- filtros por tema ---------- */
.b-lista{padding-top:var(--e-6)}
.b-filtros{display:flex;flex-wrap:wrap;gap:var(--e-2);margin-bottom:var(--e-5)}
.b-filtros button{min-height:44px;padding:0 var(--e-4);border:1px solid var(--linha);border-radius:999px;color:var(--texto-2);font:500 var(--t-xs)/1 var(--f-texto);transition:color .3s, border-color .3s, background .3s}
.b-filtros button:hover{color:var(--texto);border-color:var(--linha-forte)}
.b-filtros button[aria-pressed="true"]{color:var(--texto);border-color:var(--cor, var(--ciano));background:color-mix(in oklch, var(--cor, var(--ciano)) 14%, transparent)}

/* ---------- cartões ---------- */
.b-tema{display:inline-flex;align-items:center;gap:var(--e-2);font:500 var(--t-xs)/1 var(--f-texto);color:var(--texto)}
.b-tema i{width:6px;height:6px;border-radius:50%;background:var(--cor);box-shadow:0 0 10px var(--cor)}
.b-linha{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--e-2) var(--e-4)}
.b-linha time{color:var(--texto-2);font-size:var(--t-xs)}
.b-cartoes{list-style:none;padding:0;display:grid;gap:var(--e-4)}
.b-cartao{--cor:var(--ciano);position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid var(--linha);border-radius:20px;
  background:oklch(0.165 0.03 262 / .55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:border-color .3s, box-shadow .4s, transform .4s var(--sai)}
.b-cartao[hidden]{display:none}
.b-cartao:hover,.b-cartao:focus-within{border-color:color-mix(in oklch, var(--cor) 60%, transparent);box-shadow:0 24px 60px -30px var(--cor)}
.b-texto{display:flex;flex-direction:column;flex:1;gap:var(--e-3);min-width:0;padding:var(--e-5)}
.b-cartao h3{font-size:var(--t-l);line-height:1.25}
.b-cartao h3 a{text-decoration:none}
.b-cartao h3 a::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit}      /* o cartão inteiro leva ao artigo */
.b-cartao h3 a:focus-visible{outline:none}
.b-cartao:has(a:focus-visible){outline:2px solid var(--ciano);outline-offset:3px}
.b-resumo{color:var(--texto-2);font-size:var(--t-s);line-height:1.6}
.b-ler{display:inline-flex;align-items:center;gap:var(--e-2);margin-top:auto;padding-top:var(--e-3);font:600 var(--t-s)/1 var(--f-texto);color:var(--cor)}
.b-ler .ic{transition:transform .3s var(--sai)}
.b-cartao:hover .b-ler .ic{transform:translateX(4px)}
.b-mais{padding-top:0}
.b-mais .b-cartoes{margin-top:var(--e-6)}

/* a capa: brilho na cor do tema, grade e o desenho de traço (sem imagem) */
.b-arte{position:relative;overflow:hidden;aspect-ratio:16 / 9;border-bottom:1px solid var(--linha);background:var(--noite);color:var(--cor)}
.b-aura{position:absolute;inset:-35%;background:radial-gradient(38% 46% at 30% 38%, color-mix(in oklch, var(--cor) 60%, transparent), transparent 70%), radial-gradient(34% 42% at 74% 66%, oklch(0.62 0.22 293 / .38), transparent 70%), radial-gradient(30% 36% at 78% 22%, oklch(0.56 0.24 262 / .35), transparent 70%);
  filter:blur(26px);animation:b-aurora 14s ease-in-out infinite alternate}
.b-grade{position:absolute;inset:0;background-image:linear-gradient(oklch(0.96 0.01 250 / .07) 1px, transparent 1px), linear-gradient(90deg, oklch(0.96 0.01 250 / .07) 1px, transparent 1px);background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse at center, #000 25%, transparent 78%);mask-image:radial-gradient(ellipse at center, #000 25%, transparent 78%)}
.b-glifo{position:absolute;inset:0;margin:auto;width:min(62%, 340px);height:auto;filter:drop-shadow(0 0 10px var(--cor));transition:transform .6s var(--sai)}
.b-cartao:hover .b-glifo{transform:scale(1.06)}

/* o destaque inclina e ganha um reflexo que segue o mouse (variáveis vindas do blog.js) */
.b-lista .destaque{transform:perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))}
.b-lista .destaque::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(40% 60% at var(--mx, 50%) var(--my, 0%), oklch(1 0 0 / .09), transparent 70%)}
.b-lista .destaque h3{font-size:var(--t-xl);font-weight:500;line-height:1.12;letter-spacing:-.02em}
.b-lista .destaque .b-resumo{font-size:var(--t-m)}

/* os cartões sobem ao entrar na tela (onde o navegador tem animação por rolagem) */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .b-cartao{animation:b-sobe linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
    @keyframes b-sobe{from{opacity:0;translate:0 28px}to{opacity:1;translate:0 0}}
  }
}

/* ---------- artigo ---------- */
.b-abre.artigo .envolve{padding-bottom:var(--e-8)}
.b-abre.artigo h1{font-size:var(--t-2xl);line-height:1.1;max-width:24ch}
.b-abre.artigo .b-arte{position:absolute;inset:0;z-index:-2;aspect-ratio:auto;border:0}                    /* a capa vira o fundo do cabeçalho */
.b-abre.artigo::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg, oklch(0.13 0.025 262 / .3), var(--breu) 94%)}
.b-abre.artigo .b-glifo{inset:0 4% 0 auto;width:min(46%, 460px);opacity:.3}
.migalhas{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2);margin-bottom:var(--e-4);color:var(--texto-2);font-size:var(--t-xs)}
.migalhas a{display:inline-flex;align-items:center;min-height:var(--toque);color:var(--ciano);text-decoration:none}
.migalhas a:hover{text-decoration:underline}
.b-meta{display:flex;flex-wrap:wrap;gap:var(--e-1) var(--e-2);margin-top:var(--e-5);color:var(--texto-2);font-size:var(--t-s)}
.b-meta a{color:var(--texto)}
.b-corpo{display:grid;gap:var(--e-7);margin-top:calc(-1 * var(--e-6));padding-block:var(--e-6) var(--e-8)}
.prosa{min-width:0;max-width:68ch;color:var(--texto-2);line-height:1.75}      /* min-width:0: sem ele, a tabela (560px) alarga a coluna e a página inteira no celular */
.prosa > * + *{margin-top:var(--e-4)}
.b-resposta,.b-autor{border:1px solid transparent;border-radius:20px;background:linear-gradient(oklch(0.165 0.03 262 / .92), oklch(0.165 0.03 262 / .92)) padding-box, linear-gradient(135deg, var(--cor), transparent 55%) border-box}
.b-resposta{padding:var(--e-5);color:var(--texto);font-size:var(--t-l);line-height:1.6;box-shadow:0 24px 60px -36px var(--cor)}      /* a resposta direta à pergunta do título */
.prosa h2{margin-top:var(--e-7);color:var(--texto);font-size:var(--t-xl);line-height:1.2;letter-spacing:-.015em;scroll-margin-top:calc(var(--topo) + var(--e-5))}
.prosa h3{margin-top:var(--e-6);color:var(--texto)}
.prosa ul,.prosa ol{display:grid;gap:var(--e-3);padding-left:1.4em}
.prosa li{padding-left:.2em}
.prosa li::marker{color:var(--cor);font-weight:600}
.prosa strong{color:var(--texto);font-weight:600}
.prosa a{color:var(--ciano)}
.prosa blockquote{padding-left:var(--e-4);border-left:2px solid var(--cor);color:var(--texto)}
.prosa img{border-radius:var(--r-m);border:1px solid var(--linha)}
.prosa img{display:block;width:100%;height:auto}      /* a capa e o diagrama do artigo (width e height vêm no HTML: o espaço fica reservado) */
.b-tabela{overflow-x:auto;border:1px solid var(--linha);border-radius:var(--r-m);scrollbar-width:thin}      /* tabela larga rola de lado dentro da moldura, sem alargar a página */
.prosa table{width:100%;min-width:560px;border-collapse:collapse;font-size:var(--t-s);line-height:1.5}
.prosa th{padding:var(--e-3) var(--e-4);text-align:left;color:var(--texto);font-weight:600;background:var(--noite)}
.prosa td{padding:var(--e-3) var(--e-4);border-top:1px solid var(--linha);vertical-align:top}
.prosa td:first-child{color:var(--texto);font-weight:600}
.prosa code{padding:.1em .35em;border-radius:6px;background:var(--noite);font:.9em var(--f-mono)}
.b-lado{display:grid;gap:var(--e-5);max-width:68ch}
.b-autor{display:grid;grid-template-columns:auto 1fr;gap:var(--e-4);align-items:start;padding:var(--e-5);font-size:var(--t-s);line-height:1.6;color:var(--texto-2)}
.b-autor img{width:64px;height:80px;border-radius:var(--r-m);object-fit:cover;object-position:top}
.b-autor-nome{color:var(--texto);font:600 var(--t-m)/1.3 var(--f-titulo)}
.b-autor .link-seta{margin-top:var(--e-2)}
.b-autor .atualizado{grid-column:1 / -1;margin-top:0;padding-top:var(--e-4);border-top:1px solid var(--linha)}
.b-indice{display:none}                                                                    /* o índice só aparece ao lado do texto, em tela larga */
.b-indice p{color:var(--texto-2);font:500 var(--t-xs)/1 var(--f-texto);letter-spacing:.08em;text-transform:uppercase}
.b-indice ol{list-style:none;padding:0;margin-top:var(--e-3);display:grid;border-left:1px solid var(--linha)}
.b-indice a{display:block;padding:var(--e-2) var(--e-4);margin-left:-1px;border-left:1px solid transparent;color:var(--texto-2);font-size:var(--t-s);line-height:1.4;text-decoration:none;transition:color .3s, border-color .3s}
.b-indice a:hover{color:var(--texto)}
.b-indice a[aria-current]{color:var(--texto);border-left-color:var(--cor)}

@media (max-width:699px){
  /* "Outros artigos" vira uma fileira que desliza de lado */
  .b-mais .b-cartoes{grid-auto-flow:column;grid-auto-columns:84%;overflow-x:auto;margin-inline:calc(-1 * var(--margem));padding-inline:var(--margem);padding-bottom:var(--e-3);
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--margem);scrollbar-width:none}
  .b-mais .b-cartoes::-webkit-scrollbar{display:none}
  .b-mais .b-cartao{scroll-snap-align:start;animation:none}
}
@media (min-width:700px){
  .b-cartoes{grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--e-5)}
  .b-cartao.destaque{grid-column:1 / -1}
}
@media (min-width:900px){
  .b-lista .destaque{flex-direction:row}
  .b-lista .destaque .b-arte{flex:1.1;aspect-ratio:auto;min-height:340px;border-bottom:0;border-right:1px solid var(--linha)}
  .b-lista .destaque .b-texto{flex:1;justify-content:center;padding:var(--e-6)}
  .b-abre.artigo .b-glifo{opacity:.55}
}
@media (min-width:1000px){
  /* três colunas só quando há cartões para encher a linha (o destaque ocupa a primeira sozinho) */
  .b-cartoes:has(> :nth-child(4)),.b-mais .b-cartoes:has(> :nth-child(3)){grid-template-columns:repeat(3, minmax(0, 1fr))}
  .b-corpo{grid-template-columns:minmax(0, 68ch) minmax(0, 300px);justify-content:space-between;align-items:start}
  .b-lado{position:sticky;top:calc(var(--topo) + var(--e-5))}
  .b-autor{grid-template-columns:1fr}
  .b-indice{display:block}
}
@media (min-width:1200px){.b-lista .destaque h3{font-size:var(--t-2xl);line-height:1.06}}
@media (prefers-reduced-motion:reduce){
  .b-cartao,.b-ler .ic,.b-glifo{transition:none}
  .b-aura,.b-abre::before{animation:none}
  .b-lista .destaque{transform:none}
}

/* =========================================================
   Animações escolhidas pelo dono em 2026-10-11: 1 capa que se desenha, 2 cartão que vira o artigo,
   3 aurora na cor do tema, 4 título por palavras
   ========================================================= */

/* ---------- 1 · a capa se desenha quando aparece e continua viva ---------- */
.b-glifo > :nth-child(2){--k:1} .b-glifo > :nth-child(3){--k:2} .b-glifo > :nth-child(4){--k:3} .b-glifo > :nth-child(5){--k:4} .b-glifo > :nth-child(6){--k:5} .b-glifo > :nth-child(7){--k:6}
.b-glifo > :not(.cheio){stroke-dasharray:1;stroke-dashoffset:1}
.b-glifo .cheio{opacity:0;transform-box:fill-box;transform-origin:center}
.visto .b-glifo > :not(.cheio){animation:b-traco 1.1s var(--sai) calc(var(--k, 0) * 140ms + 150ms) both}
.visto .b-glifo .cheio{animation:b-ponto .5s var(--sai) calc(var(--k, 0) * 140ms + 500ms) both}
.visto .b-glifo .vivo:not(.cheio){animation:b-traco 1.1s var(--sai) calc(var(--k, 0) * 140ms + 150ms) both, b-pulsa 2.8s ease-in-out calc(var(--k, 0) * 300ms + 1.8s) infinite}
.visto .b-glifo .cheio.vivo{animation:b-ponto .5s var(--sai) calc(var(--k, 0) * 140ms + 500ms) both, b-pulsa 2.4s ease-in-out calc(var(--k, 0) * 300ms + 1.8s) infinite}
.visto .b-glifo[data-t="sites"] .vivo{animation:b-traco 1.1s var(--sai) 1s both, b-carrega 3.6s ease-in-out 2.6s infinite}      /* as linhas da página "carregam" de novo */
@keyframes b-traco{to{stroke-dashoffset:0}}
@keyframes b-ponto{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
@keyframes b-pulsa{50%{opacity:.2}}
@keyframes b-carrega{0%{stroke-dashoffset:1}45%,100%{stroke-dashoffset:0}}

/* ---------- 2 · o cartão vira o cabeçalho do artigo (troca de página animada; sem suporte, a página troca do jeito comum) ---------- */
@view-transition{navigation:auto}
.b-arte{view-transition-name:var(--vt, none)}
.b-cartao h3,.b-abre.artigo h1{view-transition-name:var(--vtt, none)}
.topo{view-transition-name:b-topo}                                 /* o topo fica por cima da capa que viaja */
::view-transition-group(*){animation-duration:.6s;animation-timing-function:cubic-bezier(.16, 1, .3, 1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.4s}

/* ---------- 3 · a aurora toma a cor do tema em foco (--aura vem do blog.js) ---------- */
@property --aura{syntax:"<color>";inherits:true;initial-value:#0A63FF}
main.blog{position:relative;z-index:0;--aura:var(--azul);transition:--aura .9s ease}
main.blog::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(55% 50% at 88% 100%, color-mix(in oklch, var(--aura) 28%, transparent), transparent 70%), radial-gradient(45% 45% at 0% 55%, color-mix(in oklch, var(--aura) 18%, transparent), transparent 70%)}
.b-abre::before{background:radial-gradient(34% 44% at 18% 30%, color-mix(in oklch, var(--aura) 60%, transparent), transparent 70%), radial-gradient(30% 40% at 82% 18%, oklch(0.62 0.22 293 / .4), transparent 70%), radial-gradient(30% 40% at 62% 84%, oklch(0.80 0.14 220 / .24), transparent 70%)}

/* ---------- 4 · o título entra palavra por palavra; o trecho em gradiente chega por último, com um brilho que passa ---------- */
.b-palavra{display:inline-block;animation:b-palavra .7s var(--sai) calc(var(--i) * 70ms + 200ms) both}
.b-abre h1 .selo{animation:b-some .6s ease both}
.b-abre h1 b{background-image:linear-gradient(100deg, transparent 42%, #fff 50%, transparent 58%), linear-gradient(90deg, var(--celeste), var(--ciano) 55%, var(--violeta));background-size:300% 100%, 100% 100%;background-position:150% 0, 0 0;background-repeat:no-repeat;
  animation:b-some .7s ease calc(var(--n) * 70ms + 200ms) both, b-brilho 1.5s ease calc(var(--n) * 70ms + 700ms) both}
.b-abre .sub,.b-abre .b-meta,.b-abre .migalhas{animation:b-some .8s ease .5s both}
@keyframes b-palavra{from{opacity:0;transform:translateY(.45em);filter:blur(6px)}}
@keyframes b-some{from{opacity:0}}
@keyframes b-brilho{from{background-position:150% 0, 0 0}to{background-position:-150% 0, 0 0}}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .b-glifo > *{animation:none !important;stroke-dashoffset:0}
  .b-glifo .cheio{opacity:1}
  .b-palavra,.b-abre h1 .selo,.b-abre h1 b,.b-abre .sub,.b-abre .b-meta,.b-abre .migalhas{animation:none}
  main.blog{transition:none}
}

/* =========================================================
   Curtida com cadastro: gaveta em duas etapas (escolhida pelo dono em 2026-10-11). O blog.js fala com a Edge Function blog-leads.
   ========================================================= */
.prosa .b-reage{margin-top:var(--e-8);padding:var(--e-6) var(--e-5);border:1px solid var(--linha);border-radius:20px;background:oklch(0.165 0.03 262 / .55);text-align:center}
.prosa .b-reage h2{margin-top:0;font-size:var(--t-l)}
.b-reacoes{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--e-3);margin-top:var(--e-4)}
.b-reacoes button{display:inline-flex;align-items:center;gap:var(--e-2);min-height:48px;padding:0 var(--e-5);border:1px solid var(--linha-forte);border-radius:999px;color:var(--texto);font:500 var(--t-s)/1 var(--f-texto);transition:border-color .3s, background .3s, transform .2s}
.b-reacoes button:hover{border-color:var(--cor)}
.b-reacoes button:active{transform:scale(.96)}
.b-reacoes button[aria-pressed="true"]{border-color:var(--cor);background:color-mix(in oklch, var(--cor) 18%, transparent)}
.b-reacoes button[aria-pressed="true"] .ic{animation:b-pula .5s var(--sai)}
.b-reage-msg{margin-top:var(--e-3);color:var(--texto-2);font-size:var(--t-s)}
.b-reage-msg:empty{display:none}
@keyframes b-pula{40%{transform:scale(1.35) rotate(-12deg)}}

/* a janela do cadastro e a do obrigado */
.b-modal,.b-obrigado{width:min(480px, calc(100vw - 2 * var(--e-4)));margin:auto;max-height:calc(100dvh - 2 * var(--e-4));overflow:auto;overscroll-behavior:contain;padding:var(--e-6) var(--e-5) var(--e-5);border:1px solid transparent;border-radius:24px;color:var(--texto);text-align:left;
  background:linear-gradient(oklch(0.165 0.03 262 / .97), oklch(0.165 0.03 262 / .97)) padding-box, linear-gradient(135deg, var(--cor, var(--ciano)), transparent 60%) border-box;box-shadow:0 30px 90px -30px #000}
.b-modal::backdrop,.b-obrigado::backdrop{background:oklch(0.08 0.02 262 / .62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.prosa > .b-obrigado[open]{animation:b-surge .45s var(--sai)}
@keyframes b-surge{from{opacity:0;transform:translateY(16px) scale(.96)}}
.b-fecha{position:absolute;top:var(--e-3);right:var(--e-3);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--texto-2)}
.b-fecha:hover{color:var(--texto);background:oklch(1 0 0 / .06)}
.b-modal-selo{display:inline-flex;align-items:center;gap:var(--e-2);padding:var(--e-2) var(--e-3);border-radius:999px;background:color-mix(in oklch, var(--cor) 16%, transparent);color:var(--texto);font:500 var(--t-xs)/1 var(--f-texto)}
.b-modal[data-reacao="nao"] .b-modal-selo .ic{scale:1 -1}
.prosa .b-modal h2,.prosa .b-obrigado h2{margin-top:var(--e-4);color:var(--texto);font-size:var(--t-xl);line-height:1.15}
.b-modal-sub{margin-top:var(--e-2);color:var(--texto-2);font-size:var(--t-s);line-height:1.6}
.b-cadastro,.b-etapa{display:grid;gap:var(--e-4)}
.b-cadastro{margin-top:var(--e-5)}
.b-campo{display:grid;gap:var(--e-2);color:var(--texto);font:500 var(--t-s)/1.2 var(--f-texto)}
.b-campo input{min-height:48px;padding:0 var(--e-4);border:1px solid var(--linha-forte);border-radius:12px;background:var(--breu);color:var(--texto);font:400 max(16px, var(--t-m))/1.2 var(--f-texto)}      /* 16px: o iPhone não dá zoom */
.b-campo input:focus-visible{outline:2px solid var(--cor, var(--ciano));outline-offset:1px}
.b-campo input:user-invalid{border-color:oklch(0.68 0.19 25)}
.b-perfil{display:flex;flex-wrap:wrap;gap:var(--e-2);padding:0;border:0}
.b-perfil legend{margin-bottom:var(--e-2);color:var(--texto);font:500 var(--t-s)/1.2 var(--f-texto)}
.b-perfil label{position:relative}
.b-perfil input{position:absolute;inset:0;opacity:0;cursor:pointer}
.b-perfil span{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--e-4);border:1px solid var(--linha-forte);border-radius:999px;color:var(--texto-2);font-size:var(--t-s);transition:color .3s, border-color .3s, background .3s}
.b-perfil input:checked + span{color:var(--texto);border-color:var(--cor);background:color-mix(in oklch, var(--cor) 16%, transparent)}
.b-perfil input:focus-visible + span{outline:2px solid var(--ciano);outline-offset:2px}
.b-aceite{display:flex;align-items:flex-start;gap:var(--e-3);color:var(--texto-2);font-size:var(--t-s);line-height:1.5;cursor:pointer}
.b-aceite input{flex:none;width:20px;height:20px;margin-top:1px;accent-color:var(--azul)}
.b-captcha{min-height:65px}      /* o Turnstile (flexível) ocupa a largura; a altura reservada evita o pulo */
.b-erro{color:oklch(0.75 0.16 25);font-size:var(--t-s)}
.b-erro:empty{display:none}
.b-cadastro .botao{width:100%}
.b-aviso{display:flex;align-items:center;justify-content:center;gap:var(--e-2);color:var(--texto-2);font-size:var(--t-xs)}
.b-progresso{display:grid;gap:var(--e-2);margin-top:var(--e-4);color:var(--texto-2);font-size:var(--t-xs)}
.b-progresso i{height:4px;border-radius:4px;background:var(--linha);overflow:hidden}
.b-progresso i::after{content:"";display:block;width:50%;height:100%;border-radius:inherit;background:linear-gradient(90deg, var(--azul), var(--cor));transition:width .5s var(--sai)}

/* obrigado: o visto se desenha */
.b-obrigado{width:min(400px, calc(100vw - 2 * var(--e-4)));text-align:center}
.b-obrigado[open]{display:grid;justify-items:center;gap:var(--e-4)}
.prosa .b-obrigado h2{margin-top:0}
.b-obrigado p{color:var(--texto-2);font-size:var(--t-s);line-height:1.6}
.b-obrigado .botao{width:100%}
.b-ok{width:64px;height:64px;fill:none;stroke:var(--cor, var(--ciano));stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 10px var(--cor, var(--ciano)))}
.b-obrigado[open] .b-ok circle{animation:b-traco .6s var(--sai) .15s forwards}
.b-obrigado[open] .b-ok path{animation:b-traco .45s var(--sai) .6s forwards}

/* "Olá, Nome": discreto, no canto da abertura do blog (só nas páginas do blog); abre um cartão com "Sair" */
.b-abre .envolve{position:relative}
.b-eu{position:absolute;z-index:3;top:calc(var(--topo) + var(--e-3));right:0}
.b-eu summary{display:flex;align-items:center;gap:var(--e-2);min-height:44px;padding:0 var(--e-1);border-radius:999px;list-style:none;cursor:pointer;color:var(--texto-2);font:500 var(--t-xs)/1 var(--f-texto);transition:color .3s}
.b-eu summary::-webkit-details-marker{display:none}
.b-eu summary:hover,.b-eu[open] summary{color:var(--texto)}
.b-eu summary:focus-visible{outline:2px solid var(--ciano);outline-offset:2px}
.b-eu i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg, var(--azul), var(--violeta));color:#fff;font:600 12px/1 var(--f-titulo);font-style:normal}
.b-eu > div{position:absolute;top:calc(100% + var(--e-1));right:0;width:min(260px, calc(100vw - 2 * var(--margem)));padding:var(--e-2);border:1px solid var(--linha-forte);border-radius:var(--r-m);background:var(--noite);animation:b-surge .3s var(--sai)}
.b-eu p{padding:var(--e-2);color:var(--texto-2);font-size:var(--t-xs);line-height:1.5}
.b-eu button{display:flex;align-items:center;width:100%;min-height:44px;padding:0 var(--e-2);border-radius:var(--r-s);color:var(--texto);font-size:var(--t-s)}
.b-eu button:hover{background:oklch(0.22 0.035 262)}
.b-eu.novo{animation:b-surge .7s var(--sai)}
.b-eu.novo i{animation:b-anel 1.4s ease-out .3s}
@keyframes b-anel{from{box-shadow:0 0 0 0 color-mix(in oklch, var(--ciano) 70%, transparent)}to{box-shadow:0 0 0 12px transparent}}

/* WhatsApp que já tem cadastro: aviso e o caminho para continuar com ele */
.b-existe{display:grid;gap:var(--e-2);padding:var(--e-3) var(--e-4);border:1px solid color-mix(in oklch, var(--cor) 55%, transparent);border-radius:12px;background:color-mix(in oklch, var(--cor) 10%, transparent);color:var(--texto);font-size:var(--t-s);line-height:1.5;animation:b-etapa .4s var(--sai)}
.b-existe[hidden]{display:none}
.b-existe button{justify-self:start;min-height:44px;color:var(--ciano);font-size:var(--t-xs);text-decoration:underline}
.b-cadastro.entrar .b-aceite{display:none}
.b-cadastro [type="submit"]:disabled{opacity:.6;cursor:progress}

/* ---------- a gaveta em duas etapas (de lado no computador, de baixo no celular) ---------- */
.b-modal{inset:0 0 0 auto;margin:0;width:min(440px, 100vw);height:100dvh;max-height:none;border-radius:24px 0 0 24px;animation:b-gaveta-lado .55s var(--sai)}
.b-modal[data-etapa="1"] [data-etapa="2"],.b-modal[data-etapa="2"] [data-etapa="1"]{display:none}
.b-modal[data-etapa="2"] .b-progresso i::after{width:100%}
.b-etapa{animation:b-etapa .45s var(--sai)}
@keyframes b-gaveta-lado{from{transform:translateX(100%)}}
@keyframes b-gaveta-baixo{from{transform:translateY(100%)}}
@keyframes b-etapa{from{opacity:0;transform:translateX(24px)}}
@media (max-width:699px){
  .b-modal{inset:auto 0 0;margin:auto 0 0;width:100%;height:auto;max-height:92dvh;border-radius:24px 24px 0 0;animation-name:b-gaveta-baixo}
}

@media (prefers-reduced-motion:reduce){
  .b-modal[open],.b-obrigado[open],.b-eu.novo,.b-eu.novo i,.b-etapa,.b-reacoes .ic{animation:none !important}
  .b-ok{stroke-dashoffset:0}
}