/* =========================================================
   BONA TECNOLOGIAS — styles.css
   Compartilhado por todas as páginas (home, sobre, áreas, produto).
   Ordem: tokens · reset · layout · header · botões · componentes
          · texturas de fundo · blocos de área · seções · footer · responsivo
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  --bg:#0F1113;          /* fundo base */
  --bg-2:#0B0D0E;        /* faixa alternada (ritmo entre seções) */
  --panel:#141719;       /* topo do gradiente de card */
  --panel-2:#0E1011;     /* base do gradiente de card */
  --panel-3:#111314;     /* superfícies internas (telas, leitoras) */
  --surface:#17191B;     /* balão recebido, chips internos */
  --hover:#1A1D20;

  --border:#23262A;
  --border-2:#2A2E32;    /* borda de chip / borda mais clara */
  --line:#1D2022;

  --text:#EDECE6;
  --text-2:#C2C6C3;
  --muted:#9BA09E;
  --muted-2:#8B908F;
  --faint:#6E7472;
  --faint-2:#5F6564;

  --accent:#38BDF8;
  --accent-hi:#7DD3FC;
  --accent-soft:rgba(56,189,248,.10);
  --accent-line:rgba(56,189,248,.25);
  --rec:#FF5F5F;

  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'IBM Plex Sans',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;

  --wrap:1080px;
  --pad:32px;
  --r-sm:8px;
  --r-md:10px;
  --r-lg:16px;
}

/* ---------- 2. RESET ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent-hi)}
img{max-width:100%;display:block}

/* ---------- 3. LAYOUT ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.band{border-bottom:1px solid var(--border)}
.band--alt{background:var(--bg-2)}
.band--relative{position:relative;overflow:hidden}
.section{padding-top:76px;padding-bottom:76px}
.section--tight{padding-top:56px;padding-bottom:56px}

/* rótulo mono que abre cada seção */
.kicker{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:12px;
}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.03em;line-height:1.05}
h1{font-size:62px;font-weight:700;letter-spacing:-.035em;line-height:1.02}
h2{font-size:36px;font-weight:700}
h3{font-size:20px;font-weight:600;letter-spacing:-.02em}
.lead{font-size:17px;line-height:1.65;color:var(--muted);max-width:600px;text-wrap:pretty}
.section-sub{font-size:15.5px;color:var(--muted-2);max-width:560px}

/* cabeçalho de seção com título à esquerda e ação à direita */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:32px}
.section-index{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint-2)}

/* grid de duas colunas: título fixo à esquerda, conteúdo à direita */
.split{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}

/* ---------- 4. HEADER ---------- */
.site-header{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:15px;padding-bottom:15px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:-.02em}
.brand:hover{color:var(--text)}
.brand .mark{width:11px;height:11px;background:var(--accent);border-radius:2px;flex:none}
.nav-links{display:flex;gap:4px;font-size:13.5px;color:var(--muted-2)}
.nav-links a{padding:7px 13px;border-radius:var(--r-sm)}
.nav-links a:hover{color:var(--text);background:var(--hover)}
.nav-links a.active{color:var(--text);background:var(--hover);font-weight:600}
.nav-toggle{display:none;font-family:inherit;background:none;cursor:pointer}

/* ---------- 5. BOTÕES ---------- */
.btn{
  display:inline-block;font-size:14.5px;font-weight:600;
  padding:13px 25px;border-radius:var(--r-md);
  border:1px solid transparent;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.btn-primary{background:var(--accent);color:var(--bg);font-weight:700}
.btn-primary:hover{background:var(--accent-hi);color:var(--bg)}
.btn-ghost{border-color:var(--border-2);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-sm{font-size:13px;padding:9px 17px;border-radius:var(--r-sm);font-weight:700}
.btn-lg{font-size:15.5px;padding:16px 32px}
.link-arrow{font-size:14px;font-weight:700;color:var(--accent)}
.link-arrow:hover{color:var(--accent-hi)}

/* ---------- 6. COMPONENTES ---------- */
.badge{
  display:inline-block;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);
  border:1px solid var(--border-2);padding:3px 9px;border-radius:999px;
}
.badge--live{color:var(--accent);background:var(--accent-soft);border-color:var(--accent-line)}

.pill{display:inline-block;font-size:12.5px;color:var(--muted);border:1px solid var(--border-2);border-radius:999px;padding:5px 12px}
.pill-row{display:flex;gap:8px;flex-wrap:wrap}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--border-2);border-radius:999px;padding:6px 14px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);
}
.eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:blink 2.4s steps(1,end) infinite}

.card{
  border:1px solid var(--border);border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  padding:24px;
}
.card--dashed{border:1px dashed var(--border-2);background:none}

/* métricas do hero / faixas divididas por hairline */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border)}
.metric{padding:20px 24px;border-right:1px solid var(--border)}
.metric:first-child{padding-left:0}
.metric:last-child{border-right:0;padding-right:0}
.metric b{display:block;font-family:var(--font-display);font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1;margin-bottom:7px}
.metric span{font-size:13px;color:var(--muted-2)}
.metric .sep{color:var(--accent)}

/* passos numerados (Como trabalhamos) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--border)}
.step{padding:22px;border-right:1px solid var(--border)}
.step:first-child{padding-left:0}
.step:last-child{border-right:0;padding-right:0}
.step .num{font-family:var(--font-mono);font-size:11px;color:var(--accent);margin-bottom:10px}
.step h3{font-size:16px;margin-bottom:8px}
.step p{font-size:14px;line-height:1.6;color:var(--muted-2)}

/* lista de novidades */
.news-item{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:18px 0;border-top:1px solid var(--border)}
.news-item:last-child{border-bottom:1px solid var(--border)}
.news-item .data{font-family:var(--font-mono);font-size:12.5px;color:var(--accent)}
.news-item .texto{font-size:15px;line-height:1.6;color:var(--text-2)}

/* ---------- 7. TEXTURAS DE FUNDO (animadas, CSS puro) ---------- */
.bg-grid,.bg-glow,.bg-scan{position:absolute;pointer-events:none}
.bg-grid{
  inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(115% 95% at 30% 30%,#000 0%,transparent 72%);
          mask-image:radial-gradient(115% 95% at 30% 30%,#000 0%,transparent 72%);
}
.bg-grid--center{
  -webkit-mask-image:radial-gradient(70% 130% at 50% 50%,#000,transparent 72%);
          mask-image:radial-gradient(70% 130% at 50% 50%,#000,transparent 72%);
}
.bg-glow{
  top:-32%;right:-14%;width:760px;height:760px;border-radius:50%;
  background:radial-gradient(circle,rgba(56,189,248,.13),rgba(56,189,248,.03) 46%,transparent 70%);
  animation:drift 20s ease-in-out infinite;
}
.bg-glow--center{top:14%;left:50%;right:auto;margin-left:-320px;width:640px;height:640px;animation-duration:22s}
.bg-scan{
  left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(56,189,248,.5),transparent);
  animation:scan 9s linear infinite;
}
.bg-layer{position:relative}   /* conteúdo acima das texturas */

@keyframes drift{0%{transform:translate3d(-8%,-6%,0) scale(1)}50%{transform:translate3d(10%,8%,0) scale(1.15)}100%{transform:translate3d(-8%,-6%,0) scale(1)}}
@keyframes scan{0%{transform:translateY(-10%);opacity:0}12%,88%{opacity:.7}100%{transform:translateY(1100%);opacity:0}}
@keyframes blink{0%,45%{opacity:1}50%,95%{opacity:.15}100%{opacity:1}}
@keyframes sweep{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes gate{0%,42%{transform:rotate(0)}58%,92%{transform:rotate(-62deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){
  .bg-glow,.bg-scan,.eyebrow .dot,.sweep,.gate-arm,.blink{animation:none!important}
}

/* ---------- 8. HERO ---------- */
.hero{padding-top:92px;padding-bottom:76px}
.hero .eyebrow{margin-bottom:26px}
.hero h1{margin-bottom:24px;max-width:880px;text-wrap:balance}
.hero .accent{color:var(--accent)}
.hero .lead{margin-bottom:36px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:56px}

/* ---------- 9. BLOCOS DE ÁREA (o hub) ----------
   .area = componente repetível: uma nova frente de atuação é só
   mais um <article class="area"> — nada mais na página muda.       */
.areas{display:grid;gap:16px}
.area{
  border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  display:grid;grid-template-columns:1.05fr .95fr;
}
.area--flip{grid-template-columns:.95fr 1.05fr}
.area--flip .area-body{order:2}
.area--flip .area-visual{order:1;border-left:0;border-right:1px solid var(--border)}
.area-body{padding:34px 32px;display:flex;flex-direction:column;gap:12px}
.area-meta{display:flex;align-items:center;gap:12px}
.area-meta .num{font-family:var(--font-mono);font-size:11px;color:var(--faint-2)}
.area-body h3{font-size:27px;font-weight:700;letter-spacing:-.025em;margin-top:4px}
.area-body p{font-size:15px;line-height:1.65;color:var(--muted);max-width:420px}
.area-body .pill-row{margin-top:6px}
.area-body .link-arrow{margin-top:12px;align-self:flex-start}
.area-visual{
  border-left:1px solid var(--border);background:#0C0E0F;
  padding:26px 28px;display:flex;flex-direction:column;justify-content:center;gap:12px;
  position:relative;overflow:hidden;
}
/* slot da próxima área */
.area-slot{
  border:1px dashed var(--border-2);border-radius:var(--r-lg);padding:26px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.area-slot .num{font-family:var(--font-mono);font-size:11px;color:var(--faint-2);margin-bottom:8px}
.area-slot h3{color:var(--muted);margin-bottom:6px}
.area-slot p{font-size:14.5px;color:var(--faint);max-width:520px}

/* 9.1 textura: conversa (bots) */
.chat{display:flex;flex-direction:column;gap:11px}
.bubble{max-width:82%;padding:9px 13px;font-size:13.5px;line-height:1.45;border-radius:12px}
.bubble--out{align-self:flex-end;max-width:78%;background:var(--accent);color:var(--bg);font-weight:500;border-bottom-right-radius:3px}
.bubble--in{align-self:flex-start;background:var(--surface);border:1px solid var(--border);color:var(--text-2);border-bottom-left-radius:3px}
.typing{align-self:flex-start;display:flex;gap:5px;padding:4px 12px;background:var(--surface);border:1px solid var(--border);border-radius:12px}
.typing span{width:5px;height:5px;border-radius:50%;background:var(--faint);animation:blink 1.4s steps(1,end) infinite}
.typing span:nth-child(2){animation-delay:.2s}
.typing span:nth-child(3){animation-delay:.4s}

/* 9.2 textura: vídeo (Replay Quadras) */
.area-visual--video::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 9px)}
.screen{
  position:relative;border:1px solid var(--border-2);border-radius:var(--r-md);
  background:var(--panel-3);aspect-ratio:16/9;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.screen .hint{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint-2)}
.rec{position:absolute;top:10px;left:10px;display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;color:var(--rec)}
.rec i{width:6px;height:6px;border-radius:50%;background:var(--rec);animation:blink 1.6s steps(1,end) infinite;font-style:normal}
.sponsor{position:absolute;bottom:10px;right:10px;font-family:var(--font-display);font-size:10px;font-weight:700;color:var(--bg);background:var(--accent);padding:3px 7px;border-radius:3px}
.sweep{position:absolute;top:0;bottom:0;width:70px;background:linear-gradient(90deg,transparent,rgba(56,189,248,.18),transparent);animation:sweep 3.4s linear infinite}
.buffer{position:relative;display:flex;align-items:center;gap:10px}
.buffer .btn-fisico{width:34px;height:34px;border-radius:50%;background:var(--accent);flex:none;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 6px rgba(56,189,248,.12)}
.buffer .btn-fisico i{width:12px;height:12px;border-radius:50%;background:var(--bg);display:block}
.bar{flex:1;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;width:38%;background:var(--accent)}
.buffer time{font-family:var(--font-mono);font-size:10.5px;color:var(--muted-2)}

/* 9.3 textura: câmeras (PetSafe) */
.cams{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cam{position:relative;border:1px solid var(--border-2);border-radius:var(--r-sm);background:var(--panel-3);aspect-ratio:4/3;display:flex;align-items:flex-end;padding:7px}
.cam span{font-family:var(--font-mono);font-size:9.5px;color:var(--faint-2)}
.cam i{position:absolute;top:7px;right:7px;width:5px;height:5px;border-radius:50%;background:var(--accent);animation:blink 2s steps(1,end) infinite}
.cam:nth-child(2) i{animation-delay:.6s}
.cam:nth-child(3) i{animation-delay:1.2s}
.cam--empty{border-style:dashed;background:none;align-items:center;justify-content:center}
.cam--empty span{color:#4E5453}
.timelapse{display:flex;align-items:center;gap:8px;border:1px solid var(--border-2);border-radius:var(--r-sm);padding:8px 11px;background:var(--panel-3)}
.timelapse span{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;color:var(--muted-2)}
.timelapse div{flex:1;display:flex;gap:3px}
.timelapse i{flex:1;height:14px;background:var(--line);border-radius:2px}
.timelapse i.on{background:var(--accent)}
.timelapse i.mid{background:var(--border-2)}

/* 9.4 textura: cancela (Cancela Autônoma) */
.gate{position:relative;display:flex;align-items:flex-end;gap:14px;height:96px}
.area-visual--gate::before{content:"";position:absolute;left:0;right:0;bottom:96px;height:10px;background:repeating-linear-gradient(90deg,var(--border-2) 0 14px,transparent 14px 28px)}
.gate .post{width:14px;height:96px;background:var(--line);border:1px solid var(--border-2);border-radius:3px;flex:none}
.gate-arm{position:absolute;left:12px;bottom:78px;width:170px;height:9px;background:var(--accent);border-radius:2px;transform-origin:left center;animation:gate 5s ease-in-out infinite}
.ticket{margin-left:auto;border:1px solid var(--border-2);border-radius:var(--r-sm);background:var(--panel-3);padding:9px;display:flex;flex-direction:column;align-items:center;gap:6px}
.ticket .qr{width:38px;height:38px;background-image:conic-gradient(var(--text) 25%,var(--bg) 0 50%,var(--text) 0 75%,var(--bg) 0);background-size:10px 10px;border-radius:2px}
.ticket span{font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;color:var(--faint-2)}
.pay{position:relative;display:flex;gap:8px}
.pay div{flex:1;border:1px solid var(--border-2);border-radius:var(--r-sm);background:var(--panel-3);padding:9px 11px;display:flex;align-items:center;justify-content:space-between}
.pay span{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;color:var(--muted-2)}
.pay i{width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* ---------- 10. CTA FINAL ---------- */
.cta{padding-top:96px;padding-bottom:96px;text-align:center}
.cta h2{font-size:40px;letter-spacing:-.035em;margin-bottom:12px;text-wrap:balance}
.cta p{font-size:16px;color:var(--muted-2);margin-bottom:30px}

/* ---------- 11. FOOTER ---------- */
.site-footer{border-top:1px solid var(--border)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;padding-top:34px;padding-bottom:34px}
.footer-grid p{font-size:13.5px;line-height:1.6;color:var(--faint);max-width:280px}
.footer-col{display:flex;flex-direction:column;gap:9px}
.footer-col .title{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint-2);margin-bottom:3px}
.footer-col a{font-size:13.5px;color:var(--muted)}
.footer-col a:hover{color:var(--text)}
.copyright{border-top:1px solid var(--border);padding:18px var(--pad);text-align:center;font-family:var(--font-mono);font-size:11.5px;color:var(--faint-2)}

/* ---------- 12. RESPONSIVO ---------- */
@media (max-width:900px){
  :root{--pad:20px}
  h1{font-size:42px}
  h2{font-size:29px}
  .hero{padding-top:56px;padding-bottom:48px}
  .section{padding-top:52px;padding-bottom:52px}
  .split{grid-template-columns:1fr;gap:32px}
  .metrics{grid-template-columns:1fr 1fr}
  .metric{padding:18px 18px 18px 0}
  .metric:nth-child(2){border-right:0;padding-right:0}
  .metric:nth-child(3),.metric:nth-child(4){border-top:1px solid var(--border)}
  .metric:nth-child(4){border-right:0}
  .steps{grid-template-columns:1fr}
  .step{border-right:0;border-bottom:1px solid var(--border);padding:20px 0}
  .step:last-child{border-bottom:0;padding-left:0}
  .area,.area--flip{grid-template-columns:1fr}
  .area-body{order:1;padding:28px 24px}
  .area-visual,.area--flip .area-visual{order:2;border-left:0;border-right:0;border-top:1px solid var(--border);padding:22px 24px}
  .area-body p{max-width:none}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .footer-grid > div:first-child{grid-column:1 / -1}
}
@media (max-width:640px){
  h1{font-size:34px}
  h2{font-size:25px}
  .cta h2{font-size:28px}
  .lead{font-size:16px}
  .nav-links{display:none}
  .nav-links--open{
    display:flex;flex-direction:column;gap:2px;
    position:absolute;top:100%;left:0;right:0;z-index:25;
    background:var(--panel);border:1px solid var(--border);border-top:0;
    border-radius:0 0 var(--r-md) var(--r-md);
    padding:8px;box-shadow:0 16px 32px -12px rgba(0,0,0,.5);
  }
  .nav-links--open a{padding:11px 13px}
  .nav-toggle{display:inline-block;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);border:1px solid var(--border-2);border-radius:var(--r-sm);padding:8px 12px}
  .nav .btn-sm{display:none}
  .news-item{grid-template-columns:1fr;gap:6px}
  .hero-ctas .btn{flex:1;text-align:center}
  .area-slot{flex-direction:column;align-items:flex-start}
  .cta{padding-top:64px;padding-bottom:64px}
}


/* ---------- 13. PÁGINA DE ÁREA (herda tudo acima) ---------- */
.breadcrumb{padding-top:16px;padding-bottom:0;font-family:var(--font-mono);font-size:11px;color:var(--faint)}
.breadcrumb .sep{opacity:.5;margin:0 4px}
.breadcrumb .current{color:var(--text)}
.page-hero{padding-top:56px;padding-bottom:60px}
.page-hero .badge{margin-bottom:18px}
.page-hero h1{font-size:48px;margin-bottom:16px}
.page-hero .lead{margin-bottom:28px;max-width:560px}
.page-ctas{display:flex;gap:10px;flex-wrap:wrap}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.fact h3{font-size:16px;margin-bottom:6px}
.fact p{font-size:14px;line-height:1.6;color:var(--muted-2)}
.fact--empty{display:flex;align-items:center;gap:10px}
.fact--empty .num{font-family:var(--font-mono);font-size:11px;color:var(--faint-2)}
.fact--empty p{color:var(--faint)}
@media (max-width:900px){
  .page-hero h1{font-size:36px}
  .facts{grid-template-columns:1fr}
}
@media (max-width:640px){ .page-hero h1{font-size:30px} .page-ctas .btn{flex:1;text-align:center} }


/* ---------- 14. PÁGINA DE ÁREA COM CONTEÚDO ---------- */
.area-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding-top:56px;padding-bottom:64px}
.feature-list{list-style:none;display:flex;flex-direction:column;gap:12px;max-width:560px}
.feature-list li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.6;color:var(--text-2)}
.feature-list li::before{content:"";width:7px;height:7px;margin-top:8px;flex:none;background:var(--accent);border-radius:2px}
.produtos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.produto{display:flex;flex-direction:column;gap:10px;min-height:210px}
.produto .top{display:flex;align-items:center;justify-content:space-between}
.produto .num{font-family:var(--font-mono);font-size:11px;color:var(--faint-2)}
.produto h3{font-size:21px;font-weight:700;margin-top:8px}
.produto p{font-size:14.5px;line-height:1.6;color:var(--muted-2);flex-grow:1}
.produto .link-arrow{align-self:flex-start}
.produto--soon h3{color:var(--muted)}
.produto--soon p{color:var(--faint)}
.chat-panel{border:1px solid var(--border);border-radius:var(--r-lg);background:linear-gradient(180deg,var(--panel),var(--panel-2));overflow:hidden}
.chat-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--border);font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
.chat-head .on{display:flex;align-items:center;gap:6px;color:var(--accent)}
.chat-head .on i{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.chat-panel .chat{padding:20px 16px;gap:12px}
.chat-foot{border-top:1px solid var(--border);padding:12px 16px;display:flex;gap:16px;flex-wrap:wrap;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint-2)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:900px){
  .area-hero{grid-template-columns:1fr;gap:32px}
  .produtos{grid-template-columns:1fr}
}
@media (max-width:640px){
  .two-col{grid-template-columns:1fr}
}