/* Identidade visual: Bunny Digital Intelligence */
:root{
  --black:#0A0A0C; --graphite:#17171B; --steel:#2A2C33; --silver:#E6E7EB; --paper:#F5F5F7;
  --soft-dark:#A9ACB4; --soft-light:#53565E;
  --font:"Inter","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--black);color:var(--silver);font-family:var(--font);line-height:1.5;-webkit-font-smoothing:antialiased}
body>header,main,.barra{max-width:480px;margin-left:auto;margin-right:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
.px{image-rendering:pixelated;display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Topo */
.topo{display:flex;justify-content:space-between;align-items:center;padding:16px 20px}
.brand{display:flex;align-items:center;gap:10px}
.brand svg{width:30px;height:30px;flex:none}
.brand b{display:block;font-weight:800;font-size:18px;letter-spacing:-.035em;line-height:1.1}
.brand span{display:block;font-weight:600;font-size:12px;color:var(--soft-dark);line-height:1.2}
.icone{width:44px;height:44px;background:var(--silver);color:var(--black);display:flex;align-items:center;justify-content:center}

/* Hero com o Iago IA */
.hero{background:var(--silver);color:var(--black);padding:20px 20px 0;display:flex;flex-direction:column;align-items:center}
.balao{align-self:stretch;background:var(--black);color:var(--silver);padding:16px 18px;min-height:150px}
.balao-autor{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--soft-dark);margin-bottom:8px}
.balao-texto{font-size:16px;line-height:1.45;font-weight:500}
.balao-texto span{opacity:0;transition:opacity .12s}
.balao-texto span.on{opacity:1}
.balao-seta{width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:14px solid var(--black)}
.mascote{position:relative;width:300px;height:327px;margin-top:6px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mascote img{width:100%;height:100%}
.mascote .camada{position:absolute;inset:0;opacity:0}
.mascote .camada.on{opacity:1}
.som{position:absolute;right:-6px;bottom:28px;display:flex;align-items:center;gap:6px;background:var(--black);color:var(--silver);font:600 12px var(--font);padding:9px 12px}
.mascote:focus-visible{outline:3px solid var(--black);outline-offset:4px}

/* Blocos */
.bloco{padding:44px 20px;display:flex;flex-direction:column;gap:22px}
.bloco+.bloco{border-top:1px solid var(--steel)}
.rotulo{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--soft-dark);margin-bottom:-10px}
h1,h2{font-weight:900;text-transform:uppercase;letter-spacing:-.045em}
h1{font-size:44px;line-height:.9}
h2{font-size:36px;line-height:.92}
h1 span,h2 span{color:var(--soft-dark)}
h3{font-size:17px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.texto{font-size:16px;color:var(--soft-dark)}

.numeros{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2px}
.numeros div{background:var(--graphite);padding:14px 12px}
.numeros strong{display:block;white-space:nowrap;font-size:19px;font-weight:900;letter-spacing:-.03em;color:var(--silver)}
.numeros span{display:block;font-size:12px;line-height:1.3;color:var(--soft-dark);margin-top:4px}
.fonte{font-size:11px;color:var(--soft-light);margin-top:-12px}

/* Botões */
.ctas{display:flex;flex-direction:column;gap:10px}
.btn{min-height:56px;display:flex;align-items:center;justify-content:center;gap:10px;font:600 16px/1 var(--font);padding:0 22px;transition:background-color .25s var(--ease)}
.btn svg{width:18px;height:18px;flex:none}
.btn-claro{background:var(--silver);color:var(--black)}
.btn-claro:hover{background:#FFFFFF}
.btn-escuro{background:var(--black);color:var(--silver)}
.btn-escuro:hover{background:var(--steel)}
.btn-linha{min-height:50px;border:1px solid var(--soft-light);color:var(--silver);font-weight:500;font-size:15px}
.btn-linha:hover{border-color:var(--silver)}
.btn:focus-visible,.icone:focus-visible,.conteudos a:focus-visible{outline:3px solid var(--soft-dark);outline-offset:3px}

/* Método */
.cartoes,.passos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.cartoes li{background:var(--graphite);padding:20px;display:flex;gap:14px}
.cartoes .num{font-size:13px;font-weight:700;color:var(--soft-dark);padding-top:2px}
.cartoes p,.passos p{font-size:14px;color:var(--soft-dark);margin-top:6px}

/* Conteúdo */
.conteudos{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.conteudos a{display:flex;flex-direction:column;background:var(--graphite)}
.capa{height:190px;background:var(--steel);display:flex;align-items:flex-end;padding:14px;font-weight:900;font-size:19px;line-height:.95;letter-spacing:-.03em;text-transform:uppercase}
.legenda{font-size:13px;color:var(--soft-dark);padding:12px 14px}

/* Passos */
.com-mascote{display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
.com-mascote img{flex:none;width:110px;height:auto}
.passos{gap:2px}
.passos li{display:flex;gap:14px;align-items:flex-start;background:var(--graphite);padding:18px}
.passos li>span{flex:none;width:30px;height:30px;background:var(--silver);color:var(--black);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800}
.passos h3{font-size:16px}

/* Final */
.final{background:var(--silver);color:var(--black);align-items:center;border-top:0;padding-bottom:calc(48px + env(safe-area-inset-bottom))}
.final h2{align-self:stretch}
.final h2 span{color:var(--soft-light)}
.final img{width:230px;height:auto;margin-bottom:-24px}
.final .btn{align-self:stretch}
.rodape{font-size:12px;color:var(--soft-light);font-weight:500}

/* Barra fixa */
.barra{position:fixed;left:10px;right:10px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:10;background:var(--graphite);border:1px solid var(--steel);padding:8px;display:flex;align-items:center;gap:10px;box-shadow:0 12px 30px rgba(0,0,0,.45);transform:translateY(160%);transition:transform .3s var(--ease)}
.barra.visivel{transform:translateY(0)}
.barra[hidden]{display:flex}
.barra-avatar{flex:none;width:48px;height:48px;background:var(--silver);overflow:hidden}
.barra-avatar img{width:88px;height:96px;margin:-2px 0 0 -23px}
.barra-texto{display:flex;flex-direction:column;font-size:13px;line-height:1.25}
.barra-texto strong{font-weight:700}
.barra-texto span{font-size:11px;color:var(--soft-dark)}
.btn-barra{flex:1;min-height:50px;font-size:15px}
@media (min-width:520px){.barra{left:50%;right:auto;width:460px;margin-left:-230px}}
@media (prefers-reduced-motion:reduce){.barra{transition:none}.balao-texto span{transition:none}}