:root {
  --primary-blue: #2563eb; --deep-blue: #0f172a; --nav-bg: rgba(10,16,32,0.85); --surface: rgba(15,23,42,0.70); --surface-strong: rgba(18,27,54,0.85); --border: rgba(59,130,246,0.25); --accent-cyan: #06b6d4; --highlight: #10b981; --text-primary: #fff; --text-secondary: #bcd0ea; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --shadow-soft: 0 10px 30px rgba(2,8,23,0.35); --shadow-card: 0 6px 22px rgba(0,0,0,0.18); --container: 1100px; --container-wide: 1200px; /* será atualizado via JS conforme a altura do header */
  --header-h: 68px;}

/* Reset & base */
* { margin: 0; padding: 0; box-sizing: border-box;}
html { scroll-behavior: smooth;}
img { max-width: 100%; display: block;}

/* Tamanhos iguais (pote e moeda) */
.about .about-image img.butterfly-about,
.about .about-image img.coin-image {
  width: clamp(260px, 30vw, 380px); height: auto; display: block; margin-inline: auto;}
@media (max-width:768px){
  .about .about-image img.butterfly-about,
  .about .about-image img.coin-image {
    width: clamp(200px, 70vw, 300px);}}

/* Containers preparados para o halo */
.about .about-image.glow-cyan,
.about .about-image.glow-cyan-pote {
  position: relative; isolation: isolate; /* z-index local */}

/* Halo padrão */
.about .about-image.glow-cyan::before,
.about .about-image.glow-cyan-pote::before {
  content: ""; position: absolute; inset: var(--glow-inset, -10%); /* margem do halo */
  border-radius: 50%; background: radial-gradient(
    circle at 50% 50%,
    rgba(6,182,212,0.36) 0%,
    rgba(6,182,212,0.18) 40%,
    transparent 70%
  ); filter: blur(var(--glow-blur, 26px)); /* intensidade do blur */
  z-index: -1; pointer-events: none;}

/* Borda luminosa (ciano) */
.about .about-image.glow-cyan img,
.about .about-image.glow-cyan-pote img {
  
  filter: drop-shadow(0 0 16px rgba(6,182,212,0.32))
          drop-shadow(0 10px 28px rgba(6,182,212,0.24));}

/* ==== Ajustes por elemento ==== */
/* Moeda = padrão (um pouco mais forte) */
.about .about-image.glow-cyan {
  --glow-inset: -10%; --glow-blur: 26px;}

/* Pote = menor */
.about .about-image.glow-cyan-pote {
  --glow-inset: 21%; --glow-blur: 12px;}

/* garante transição suave na MOEDA */
.about .about-image.glow-cyan img.coin-image {
  transition: transform .4s ease, filter .4s ease; will-change: transform, filter;}

/* aplica o zoom quando o mouse está no contêiner da moeda */
.about .about-image.glow-cyan:hover img.coin-image {
  transform: scale(1.08) !important; /* vence regras anteriores */
  filter:
    drop-shadow(0 0 18px rgba(6,182,212,.45))
    drop-shadow(0 12px 32px rgba(6,182,212,.28)) !important;}

/* evita corte do zoom */
.about .about-image.glow-cyan {
  overflow: visible; /* não deixe esconder as bordas ao escalar */}

/* PNG com fundo transparente, sem bloquear filtros */
img[src$=".png"] {
  background: transparent !important; border: none !important; box-shadow: none !important; outline: none !important;}


body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: var(--text-primary); line-height: 1.6; background:
    radial-gradient(1200px 800px at 10% -10%, rgba(6,182,212,0.12), transparent 40%),
    radial-gradient(1000px 600px at 90% 110%, rgba(37,99,235,0.12), transparent 40%),
    linear-gradient(135deg, #0b1530 0%, #0e1a3d 40%, #0e2250 100%); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

/* Containers & section common */
.container { max-width: var(--container); margin-inline: auto; padding-inline: 30px;}
section { padding: 50px 0; position: relative; scroll-margin-top: calc(var(--header-h) + 12px);}

.section-title{
  font-size: clamp(28px, 4.2vw, 40px); line-height: 1.2; font-weight: 800; text-align: center; letter-spacing: .3px; color: var(--text-primary); margin-bottom: 12px;}
.section-description{
  max-width: 720px; margin: 0 auto 40px; text-align: center; color: var(--text-secondary); font-size: clamp(15px,2.4vw,18px);}


  /* Header / Nav */
/* ===================== HEADER/NAV ===================== */

.header{
  position: fixed; inset: 0 0 auto 0; height: 68px; background: #000000; backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); z-index: 1000;}
.nav{
  height: 68px; max-width: var(--container-wide); margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px;}
.nav-brand{ display:flex; align-items:center; gap:12px;}
.nav-logo{ width:40px; height:40px; object-fit:contain;}
.nav-text{ display:flex; flex-direction:column; line-height:1;}
.nav-title{ font-size:18px; font-weight:800; color:var(--text-primary);}
.nav-subtitle{ font-size:12px; color:var(--text-secondary);}

.nav-menu{ display:flex; align-items:center; gap: clamp(14px,3vw,28px);}
.nav-link{
  position: relative; color: var(--text-secondary); text-decoration: none; font-weight: 600; font-size: 14px; transition: color .2s ease;}
.nav-link:hover, .nav-link.active{ color: var(--highlight) !important;}
.nav-link::after{
  content:""; position:absolute; left:0; bottom:-8px; width:100%; height:2px; background: var(--highlight); transform: scaleX(0); transform-origin:left; transition: transform .25s ease;}
.nav-link:hover::after, .nav-link.active::after{ transform: scaleX(1);}

.nav-actions{ display:flex; align-items:center; gap:10px;}

/* Buttons */
.btn{
  --btn-pad-y:10px; --btn-pad-x:16px; padding: var(--btn-pad-y) var(--btn-pad-x); border:1px solid transparent; border-radius:var(--radius-md); font-weight:700; font-size:14px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease, filter .2s ease; will-change: transform;}
.btn-primary{
  color:#fff; background: linear-gradient(135deg, var(--highlight), var(--primary-blue)); box-shadow: 0 12px 28px rgba(6,182,212,0.25);}
.btn-primary:hover{ filter: brightness(1.08); transform: translateY(-1px);}
.btn-secondary{
  background: transparent; color: var(--accent-cyan); border-color: var(--accent-cyan);}
.btn-secondary:hover{ background: var(--accent-cyan); color:#0a1020;}
.btn-outline{
  background: transparent; color: var(--text-secondary); border-color: var(--border);}
.btn-outline:hover{ background: var(--highlight); color: var(--text-primary);}

/* Hero */
/* ===================== HERO ===================== */
.hero{
  min-height: 100vh; padding: calc(var(--header-h) + 40px) 20px 96px; display:grid; grid-template-rows: auto auto 1fr auto; justify-items:center; text-align:center; gap:10px; overflow:hidden;}
.hero-badge{
  display:inline-flex; align-items:center; gap:8px; background: var(--surface); border:1px solid var(--border); border-radius:999px; padding:8px 15px; backdrop-filter: blur(30px); color: var(--text-secondary); font-weight:600; font-size:13px;}
.badge-icon{ width:18px; height:18px;}
.hero-content{ max-width:780px;}
.hero-title{
  font-size: clamp(42px,8vw,64px); font-weight:900; line-height:1.1; margin-bottom:5px; letter-spacing:.4px; background: linear-gradient(135deg, #fff, #bfefff 40%, var(--accent-cyan)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color: transparent; margin-bottom: 15px;}
.hero-subtitle{ color:var(--text-secondary); font-weight:600;}
.hero-description{ color:var(--text-secondary); font-size: clamp(16px,2.6vw,20px); margin:5px auto 12px;}
.highlight{ color:var(--highlight); font-weight:700;}
.hero-text{ color:var(--text-secondary); font-size:15px; line-height:1.8; margin:0 auto 20px; max-width:820px;}
.hero-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px;}
.hero-image{ margin:10px 0 6px;}
.butterfly-main{
  width: clamp(260px, 60vw, 360px); opacity:.95; filter: drop-shadow(0 15px 16px rgba(4, 204, 239, 0.28)); animation: float 6s ease-in-out infinite;}
@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)}}
.hero-stats{ display:grid; grid-auto-flow:column; gap: clamp(16px,6vw,56px); margin-top:0px;}
.stat{text-align:center;}
.stat-value{ color:#72d7ed; font-weight:900; font-size:clamp(22px,3.8vw,32px);}
.stat-label{ color:#ffffff; font-size:13px;}

/* About */
/* ===================== ABOUT ===================== */

/* Fundo exclusivo da seção “Sobre” (não mexe na hero) */
.about-modern {
  position: relative; padding: clamp(72px, 8vw, 110px) 0; background:
    radial-gradient(900px 480px at 18% 78%, rgba(25, 151, 173, 0.1), transparent 60%),
    radial-gradient(900px 520px at 82% 22%, rgba(37, 99, 235, 0.10), transparent 60%),
    linear-gradient(
      to bottom,
      #0d193b 0%,        /* topo escuro */
      #202849 50%,       /* cor central */
      #0d193b 100%       /* volta ao tom escuro no final */
    ); box-shadow: inset 0 40px 60px rgba(0,0,0,.12),
              inset 0 -40px 60px rgba(0,0,0,.12);}

/* Costura com a seção anterior: um fade que “puxa” #0d193b pra dentro do topo do About */
.about-modern::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:120px; /* ajuste a altura se quiser mais/menos fade */
  pointer-events:none; /* começa exatamente em #0d193b e morre em transparente */
  background: linear-gradient(to bottom,
              #0d193b 0%,
              rgba(13,25,59,.92) 30%,
              rgba(13,25,59,.65) 55%,
              rgba(13,25,59,0) 100%);}

/* em telas menores, encurta um pouco a rampa pra não “roubar” espaço */
@media (max-width: 768px){
  .about-modern{
    padding: 64px 0; background:
      radial-gradient(700px 420px at 20% 78%, rgba(25,151,173,.10), transparent 60%),
      radial-gradient(700px 440px at 80% 22%, rgba(37,99,235,.10), transparent 60%),
      linear-gradient(
        to bottom,
        #0d193b 0%,
        #0d193b 58%,
        #14254e 70%,
        #143469 82%,
        #0f4695 90%,
        #0057b7 100%
      );}
  .about-modern::before{ height:96px;}}

/* Título e descrição mais legíveis nesse fundo */
.about-modern .section-title{
  text-shadow: 0 10px 28px rgba(6,182,212,.18); margin-bottom: 0px; margin-top: 20px;}
.about-modern .section-description{
  color: #cfe0ff; max-width: 920px; margin-inline: auto;}

/* ===== Grid interno dos blocos (mantém sua estrutura) ===== */
.about-modern .about-content{
  display: grid; grid-template-columns: 1.1fr 1fr; /* texto levemente maior */
  align-items: center; gap: clamp(28px, 6vw, 64px); margin-block: clamp(26px, 5vw, 50px);}

.about-modern .about-text {
  background: var(--surface);
  border: 1px solid rgba(99,139,255,.16);
  border-radius: 14px;
  padding: clamp(14px, 2.4vw, 22px);
  box-shadow: 0 8px 26px rgba(0,0,0,.18);
}

/* Tipografia dos subtítulos e ícone-borboleta */
.about-modern .brand-header h3{
  color: var(--highlight); /* seu verde da marca */}
.about-modern .brand-icon{
  filter: drop-shadow(0 6px 18px rgba(6,182,212,.35));}

/* Imagens: já padronizadas antes; só garantimos o respiro */
.about-modern .about-image{ text-align:center;}
.about-modern .about-image img{ display:block; margin-inline:auto;}

/* Alternância no mobile: texto antes da imagem no bloco “moeda” */
@media (max-width: 900px){
  .about-modern .about-content{
    grid-template-columns: 1fr;}
  .about-modern .about-content.moeda .about-text{ order: 1;}
  .about-modern .about-content.moeda .about-image{ order: 2;}
  .about-modern .about-text{ padding: 14px 16px;}}

/* Espaços finais da seção para transição suave com a próxima */
.about-modern{ scroll-margin-top: 80px;} /* âncora “Sobre” respeita header fixo */

/* Imagens principais grandes */
.about-modern .about-image > img {
  display: block; margin-inline: auto; max-width: 100%; height: auto;}

/* NÃO alterar imagens dentro dos cards de texto */
.about-modern .about-text img {
  max-width: none; height: auto;}

.about{ background: #1e3a8a;}
.about-content{
  display:grid; grid-template-columns: 1.1fr .9fr; align-items:center; gap: clamp(28px, 6vw, 56px);}
.brand-header{ display:flex; align-items:center; gap:10px; margin-bottom:18px;}
.brand-icon{ width:30px; height:30px;}
.brand-header h3{ font-size:20px; color:var(--highlight); font-weight:800;}
.about-text h4{ font-size:18px; color:var(--text-primary); margin-bottom:10px;}
.about-text p{ color:var(--text-secondary); margin-bottom:12px; line-height:1.8;}

/* Tamanhos das imagens do About (desktop default) */
.butterfly-about{ width: clamp(260px, 32vw, 420px); height:auto; margin-inline:auto; opacity:.95; transition: transform .25s ease;}
.butterfly-about:hover{ transform: translateY(-4px) scale(1.02);}
.coin-image{ width: clamp(220px, 28vw, 360px); height:auto; margin-inline:auto;}


/* Distribution */
/* ===================== DISTRIBUICAO OFICIAL ===================== */

.distribution{ background:#1b347a;}
.distribution-header{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:20px;}
.section-icon{ width:38px; height:38px;}
.distribution-header h2{ font-size:clamp(28px,4.5vw,40px); font-weight:800; color:var(--text-primary);}
.distribution-summary{ display:flex; justify-content:center; gap:18px; margin-bottom:36px;}
.summary-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-md); padding:16px 20px; text-align:center; backdrop-filter: blur(10px); box-shadow: var(--shadow-card); transition: transform .2s ease, box-shadow .2s ease; }
.summary-label{ color:var(--text-secondary); font-size:13px; margin-bottom:6px;}
.summary-value{ color:var(--highlight); font-size:20px; font-weight:900; letter-spacing:.2px;}

.distribution-content{
  display:grid; grid-template-columns:1fr 1fr; align-items:start; gap: clamp(28px, 7vw, 72px);}
.chart-container{
  display:grid; place-items:center; background:#0e1630; border:1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(16px,3.5vw,28px); backdrop-filter: blur(10px); box-shadow: var(--shadow-soft); min-height: 320px;}
.distribution-chart, canvas#distributionChart{ max-width:100%; height:auto; border-radius:10px;}

.distribution-details{ display:grid; gap:16px;}
.detail-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-md); padding:16px 18px; box-shadow: var(--shadow-card); cursor:pointer; position:relative; transition: transform .2s ease, border-color .2s ease;}
.detail-percentage{ font-size:26px; font-weight:900; color:var(--highlight); margin-bottom:6px;}
.detail-card h3{ font-size:18px; color:var(--text-primary); margin-bottom:4px;}
.detail-amount{ color:var(--accent-cyan); font-weight:800; margin-bottom:10px; letter-spacing:.2px;}
.detail-card ul{ list-style:none; display:grid; gap:6px;}
.detail-card li{ position:relative; padding-left:14px; color:var(--text-secondary); line-height:1.6;}
.detail-card li::before{ content:"•"; position:absolute; left:0; top:0; color:var(--highlight);}

.distribution{
    --surface: #0f1d3a;}


/* Technology */
/* ===================== TECNOLOGIA ===================== */

.technology{ background:#1e3a8a;}
.tech-header{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:5px;}
.tech-header h2{ font-size:clamp(28px,4.5vw,40px); font-weight:800; color:var(--text-primary);}
.tech-description{ max-width:760px; margin:0 auto 28px; text-align:center; color:var(--text-secondary);}

.tech-features{ display:grid; grid-template-columns: repeat(4,1fr); gap:14px; margin-top:25px;}

.feature-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-md); padding: 3rem 1.5rem; box-shadow: var(--shadow-card); text-align:center; transition: transform .2s ease, box-shadow .2s ease;}
.feature-card:hover{ transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.22);}
.feature-icon{ font-size:40px; margin-bottom:20px;}
.feature-card h3{ font-size:19px; color:var(--text-primary); margin-bottom:16px;}
.feature-card p{ color:var(--text-secondary); font-size:15px;}

.tech-specs {
  margin-top: 10px;}

.tech-specs h3 {
  text-align: center; margin-bottom: 16px; font-size: 18px; letter-spacing: .3px;}

.specs-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;}

.spec-item {
  background: #202849; border: 1px solid var(--border); border-radius: var(--radius-sm);padding: 10px; color: var(--text-secondary); /* Centralização horizontal e vertical */
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; box-shadow: var(--shadow-card);
 transition: transform .2s ease, box-shadow .2s ease; }

.spec-item strong {
  color: var(--text-primary); font-weight: 800; margin-bottom: 4px;}

.audit-stats{ display:grid; grid-auto-flow:column; gap: clamp(14px,6vw,40px); justify-content:center; margin:26px 0 6px;}
.audit-stat{text-align:center;}
.audit-value{ font-size:clamp(22px,3.5vw,30px); font-weight:900; color:var(--highlight);}
.audit-label{ color:var(--text-secondary); font-size:17px;}

.tech-actions{ display:flex; justify-content:center; gap:12px; margin-top:10px;}

/* === KPI Cards === */
#tecnologia .kpis.kpis-cards{
  max-width: var(--container); margin: 12px auto 8px; padding-inline: 16px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px;}

#tecnologia .kpi-card{
  --kpi-size: clamp(96px, 11vw, 140px); width: 150px; height: 100px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-card); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform .2s ease, box-shadow .2s ease; }

#tecnologia .kpi-value{
  color: var(--highlight); font-weight: 900; font-size: clamp(22px, 2.8vw, 30px); line-height: 1; margin-bottom: 6px;}

#tecnologia .kpi-card .kpi-label{
  color: var(--text-primary); font-size: 13.5px; opacity: .95;}

/* Variante ainda mais quadrada (opcional): adicione 'squared' no wrapper */
#tecnologia .kpis.kpis-cards.squared .kpi-card{
  border-radius: 6px;}

/* Aproxima os botões dos KPIs */
#tecnologia .tech-actions{
  margin-top: 36px;}

@media (max-width: 520px){
  #tecnologia .kpi-card{ --kpi-size: 120px; transition: transform .2s ease, box-shadow .2s ease; }}

/* Footer */
/* ===================== FOOTER ===================== */
.footer{
  padding:46px 0; border-top:1px solid var(--border); background: #000000; backdrop-filter: blur(10px);}
.footer .container{ max-width: var(--container-wide);}
.footer-content{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.footer-brand{ display:flex; align-items:center; gap:12px;}
.footer-logo{ width:36px; height:36px; object-fit:contain;}
.footer-text{ display:flex; flex-direction:column; gap:2px;}
.footer-title{ font-weight:800;}
.footer-subtitle{ color:var(--text-secondary); font-size:13px;}
.footer-nav{ display:none;}
.footer-link{ color:var(--text-secondary); text-decoration:none; font-weight:600; font-size:14px;}
.footer-link:hover{ color: var(--accent-cyan);}.footer-dev strong {
  color: #159cf4;}

.footer-dev {
  margin-left: auto;}

/* ===================== CSS ===================== */

/* Motion on scroll (será ativado pelo JS) */
@media (prefers-reduced-motion:no-preference){
  .summary-card, .hcard, #tecnologia .kpi-card, .spec-item { opacity:0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }

  .feature-card, .detail-card, .audit-stat{
    opacity:0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease;}}

/* Responsividade */
@media (max-width:1200px){ .container{ max-width:1000px;}}

/* <= 992px: About e Distribution em 1 coluna */
@media (max-width:992px){
  .about-content{ grid-template-columns: 1fr;}
  .distribution-content{ grid-template-columns: 1fr;}
  .tech-features{ grid-template-columns: repeat(2,1fr);}
  .specs-grid{ grid-template-columns: repeat(2,1fr);}}

/* <= 768px: header pode quebrar, hero ajusta, ordem especial no About */
@media (max-width:768px){
  .header{ height:auto;}
  .nav{ flex-wrap:wrap; height:auto; padding:12px 16px; gap:10px;}
  .nav-menu{ order:3; width:100%; justify-content:center; gap:18px;}
  .nav-actions{ order:2; margin-left:auto;}

  /* Hero compensa header alto */
  .hero{ padding-top: calc(var(--header-h) + 24px);}

  /* About empilhado por padrão... */
  .about .about-content{ display:flex; flex-direction:column; gap:24px;}
  
  .about .about-content.moeda{ flex-direction: column-reverse;}

  /* Pote maior + respiro */
  .about .about-content.pote .butterfly-about{ max-width: clamp(240px, 88vw, 420px);}
  .about .about-content.pote .about-image{ margin-bottom:24px;}
  /* Moeda um pouco maior + respiro */
  .about .about-content.moeda .coin-image{ max-width: clamp(200px, 80vw, 360px);}
  .about .about-content.moeda .about-image{ margin-bottom:20px;}

  .hero-stats{ grid-auto-flow: row; justify-items:center;}
  .audit-stats{ grid-auto-flow: row;}}

/* <= 520px: grids em 1 coluna e footer mais solto */
@media (max-width:520px){
  .nav-actions{ width:100%; justify-content:center;}
  .tech-features{ grid-template-columns: 1fr;}
  .specs-grid{ grid-template-columns: 1fr;}
  .footer-content{ flex-direction:column; align-items:flex-start; gap:14px;}}

/* ===== POTE & MOEDA IGUAIS + GLOW CIANO — unificado e corrigido ===== */
.about .about-image img.butterfly-about,
.about .about-image img.coin-image {
  /* mesmo limite para ambos */
  width: clamp(260px, 30vw, 380px); max-width: 100%; height: auto; display: block; margin-inline: auto;}

@media (max-width: 768px) {
  .about .about-image img.butterfly-about,
  .about .about-image img.coin-image {
    width: clamp(200px, 70vw, 300px);}
  /* respiro igual abaixo das imagens no mobile */
  .about .about-image { 
    margin-bottom: 20px;}}

/* Hover só em dispositivos com hover */
@media (hover: hover) {
  .about .about-image.glow-cyan:hover img.coin-image {
    transform: scale(1.08) !important;}}

/* Respeitar redução de movimento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto;}
  .butterfly-main { animation: none;}}

/* Tabela-cartão de Especificações (sem cabeçalho) */
.tech-specs.specs-table{
  margin-top: 28px;}
.tech-specs.specs-table h3{
  text-align: center; color: var(--text-primary); font-weight: 800; margin-bottom: 14px;}

.specs-table .table-wrapper{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); overflow: hidden;}

.specs-table table{
  width: 100%; border-collapse: collapse; font-size: 15px;}

/* célula de rótulo (primeira coluna) */
.specs-table tbody th{
  width: 32%; color: var(--text-primary); font-weight: 700; padding: 14px 16px; vertical-align: top;}

/* célula de valor (segunda coluna) */
.specs-table tbody td{
  color: var(--text-secondary); padding: 14px 16px; vertical-align: top;}

/* zebra + divisórias */
.specs-table tbody tr:nth-child(odd) td,
.specs-table tbody tr:nth-child(odd) th{
  background: rgba(8,14,32,.10);}
.specs-table tbody tr + tr td,
.specs-table tbody tr + tr th{
  border-top: 1px solid rgba(99,139,255,.12);}

/* chips para valores técnicos */
.specs-table .chip{
  display: inline-block; padding: 2px 8px; border-radius: 999px; background: rgba(16,185,129,.12); color: var(--highlight); font-weight: 700; font-size: 13px;}
.specs-table .muted{ color: var(--text-secondary); opacity:.9;}

/* responsivo: vira “cards” por linha */
@media (max-width: 720px){
  .specs-table table, 
  .specs-table tbody, 
  .specs-table tr, 
  .specs-table th, 
  .specs-table td{ display:block; width:100%;}
  .specs-table tbody tr{
    border-top: 1px solid rgba(99,139,255,.12); padding: 10px 0;}
  .specs-table tbody tr:first-child{ border-top: none;}
  .specs-table tbody th{
    background: transparent; padding: 10px 16px 4px; color: var(--text-primary);}
  .specs-table tbody td{
    padding: 0 16px 14px;}}

/* === Specs: largura controlada e centralizada === */
.tech-specs.specs-table .table-wrapper{
  max-width: clamp(680px, 92vw, 780px); margin: 0 auto;}

/* Compacta um pouco a tipografia/padding para acompanhar a largura menor */
.tech-specs.specs-table table{ font-size: 14.5px;}
.tech-specs.specs-table tbody th,
.tech-specs.specs-table tbody td{ padding: 12px 16px;}

/* Em telas pequenas, ocupar 100% normalmente */
@media (max-width: 720px){
  .tech-specs.specs-table .table-wrapper{ max-width: none; margin: 0;}}

/* ===== Specs table: layout mobile aprimorado ===== */
@media (max-width: 720px){
  /* Wrapper mais limpo no mobile */
  .tech-specs.specs-table .table-wrapper{
    background: transparent; border: 0; box-shadow: none; max-width: none; margin: 0;}

  /* Empilha como cartões */
  .specs-table table,
  .specs-table tbody,
  .specs-table tr,
  .specs-table th,
  .specs-table td{
    display: block; width: 100%;}

  /* Cada linha vira um "card" */
  .specs-table tbody tr{
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-card); padding: 12px 14px; margin: 10px 0;}

  /* Remove zebra/linhas herdadas */
  .specs-table tbody tr:nth-child(odd) td,
  .specs-table tbody tr:nth-child(odd) th{
    background: transparent !important;}
  .specs-table tbody tr{ border-top: 0 !important;}
  .specs-table tbody tr + tr td,
  .specs-table tbody tr + tr th{ border-top: 0 !important;}

  /* Rótulo acima do valor, caps pequeno */
  .specs-table tbody th{
    background: transparent !important; border: 0; color: var(--text-primary); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .02em; padding: 0 0 6px 0; margin: 0;}
  .specs-table tbody th::before,
  .specs-table tbody th::after{ content: none !important;}

  .specs-table tbody td{
    color: var(--text-secondary); padding: 0; font-size: 14.5px; line-height: 1.6;}

  /* Chips mais compactos no mobile */
  .specs-table .chip{
    font-size: 12px; padding: 2px 8px; margin-right: 6px;}}

/* === Highlights (Resumo / Visão) === */
.highlights{ padding: clamp(24px, 5vw, 48px) 0;}
.highlights-grid{
  display: grid; grid-template-columns: 1fr; gap: clamp(16px, 3vw, 24px);}
.hcard{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: clamp(16px, 3vw, 24px); transition: transform .2s ease, box-shadow .2s ease; }
.hcard--wide{
  grid-column: 1 / -1;}
.hcard-header{
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;}
.hcard-header--center{
  justify-content: center;}
.hcard-title{
  color: var(--text-primary); font-weight: 800; font-size: clamp(20px, 3.5vw, 26px);}
.hcard-icon{
  width: 22px; height: 22px; opacity: .9;}
.hcard-body{ color: var(--text-secondary); line-height: 1.8;}
.hcard-body strong{ color: var(--text-primary);}

.hcard-body--center{ text-align: center;}

@media (min-width: 976px){
  .highlights-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));}
  .hcard--wide{
    grid-column: 1 / -1; text-align: center;}}

/* === Add-on (about center + coin center + pot glow) === */

.about-modern .about-content.pote{
  display: grid; grid-template-columns: repeat(2, minmax(280px, 520px)); gap: clamp(16px, 4vw, 28px); justify-content: center; /* centraliza o conjunto */
  align-items: start;}
/* Garante que cada card não estique demais e fique centralizado */
.about-modern .about-content.pote .about-text{
  max-width: 520px; margin-inline: auto;}

.about-modern .about-content.pote .about-image{ display: none;}

@media (max-width: 980px){
  .about-modern .about-content.pote{
    grid-template-columns: 1fr; /* empilha no mobile/tablet */}}

.about-modern .about-content.moeda{
  display: grid; grid-template-columns: 1fr; /* só a moeda */
  justify-content: center; justify-items: center; margin-top: clamp(12px, 3vw, 24px);}
.about-modern .about-content.moeda .about-image{
  display: grid; place-items: center; /* centraliza horizontal/vertical */}

/* Tamanho da moeda */
.about-modern .about-content.moeda .about-image img,
.about-image.glow-cyan img{
  width: clamp(260px, 30vw, 420px); height: auto;}

/* Glow universal (Moeda + Pote) */
.about-image.glow-cyan,
.about-image.glow-cyan-pote{
  position: relative; isolation: isolate; /* permite pseudo-elemento sob a imagem */
  display: block; width: max-content; margin-inline: auto; margin-top: 36px;}

.about-image.glow-cyan::before,
.about-image.glow-cyan-pote::before{
  content: ""; position: absolute; inset: var(--glow-inset, -10%); border-radius: 50%; background: radial-gradient(circle at 50% 50%,
              rgba(6,182,212,0.38) 0%,
              rgba(6,182,212,0.20) 40%,
              transparent 70%); filter: blur(var(--glow-blur, 26px)); z-index: -1; pointer-events: none;}

/* Intensidades diferentes para moeda e pote */
.about-image.glow-cyan{      --glow-inset: -10%; --glow-blur: 26px;}
.about-image.glow-cyan-pote{ --glow-inset: 16%; --glow-blur: 16px;}

/* Sombras sutis na imagem para reforçar o brilho */
.about-image.glow-cyan img,
.about-image.glow-cyan-pote img{
  filter: drop-shadow(0 0 16px rgba(6,182,212,0.32))
          drop-shadow(0 10px 28px rgba(6,182,212,0.24));}

/* Responsivo — reduz um pouco no mobile */
@media (max-width: 768px){
  .about-image.glow-cyan img,
  .about-image.glow-cyan-pote img{
    width: clamp(200px, 70vw, 340px);}}

/* Espaçamento final antes do footer (pote centralizado no fim) */
.pot-footer-block{
  margin: clamp(12px, 5vw, 36px) auto clamp(12px, 6vw, 48px); text-align: center;}
/* Se quiser centralizar qualquer botão embaixo do pote */
.pot-footer-block .actions{
  display: flex; justify-content: center; gap: 12px; margin-top: 12px;}

.summary-card:hover{ transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.22);}

.hcard:hover{ transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.22);}

#tecnologia .kpi-card:hover{ transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.22);}

.spec-item:hover{ transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.22);}

.detail-card:hover{ transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.22);}

/* ====== MOBILE RESCUE PACK – ZETHERA ====== */
html, body { width: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img, svg, video, canvas, iframe { max-width: 100%; height: auto; display: block; }
.container, .wrapper, .section, .content { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.row, .flex, .columns, .grid, .cards, .features { display: flex; flex-wrap: wrap; gap: 16px; }
.col, .column, .card, .feature { flex: 1 1 320px; min-width: 260px; }
h1 { font-size: clamp(24px, 4vw, 40px); }
h2 { font-size: clamp(20px, 3.2vw, 32px); }
h3 { font-size: clamp(18px, 2.6vw, 26px); }
p, li { font-size: clamp(14px, 2.2vw, 18px); line-height: 1.6; }
button, .btn, a.button { max-width: 100%; white-space: normal; word-break: break-word; }
.table-wrap, .overflow-wrap, .data-block { overflow-x: auto; }
:root { --header-h: 80px; }
main, section, .hero:first-of-type { scroll-margin-top: var(--header-h); }

@media (max-width: 1024px) {
  .grid, .cards, .features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));-
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .col, .column, .card, .feature { min-width: 100%; }
  [style*="width:"], .w-fixed, .fixed-width { width: 100% !important; max-width: 100% !important; }
  .hero, .banner { padding: 24px 0; }
  table.responsive, .tech-table { width: 100%; border-collapse: collapse; }
  .tech-table, .tech-table tbody, .tech-table tr, .tech-table td, .tech-table th { display: block; width: 100%; }
  .tech-table tr { margin-bottom: 12px; border-radius: 10px; padding: 8px; }
  .tech-table td::before { content: attr(data-label); font-weight: 700; display: block; margin-bottom: 4px; opacity: .9; }
}

/* === HOTFIX: evitar que o header cubra o conteúdo no mobile === */
:root { --header-h: 96px; } /* ajuste para 80–96px se o seu header for mais alto */

main { 
  padding-top: calc(var(--header-h) + 12px);
}

/* garante espaço extra em celulares com notch (iOS/Android) */
@supports (padding: max(0px)) {
  main { padding-top: calc(var(--header-h) + max(12px, env(safe-area-inset-top))); }
}

/* quando clicar nos links da navbar, a âncora não fica escondida */
section[id], .hero { 
  scroll-margin-top: calc(var(--header-h) + 12px);
}

/* opcional: só aplicar no mobile, se preferir */
@media (max-width: 768px) {
  main { padding-top: calc(var(--header-h) + 12px); }
  section[id], .hero { scroll-margin-top: calc(var(--header-h) + 12px); }
}

/* Correção simples para mobile: evita que o header cubra o topo */
@media (max-width: 768px) {
  body {
    padding-top: 110px !important;
  }
}