/* ============================================================================
   ZORTEK Digital — site publico (SSR estatico)
   Direcao "Loja clara": fundo cinza-claro, cards brancos de canto 10px e
   Poppins em tudo. O verde da marca tem dois papeis: o escuro (#0F5C56) em
   texto, faixas e rodape; o mint (#3DDBB0) nos botoes de acao, sempre com
   texto escuro por cima. Sem JavaScript: FAQ usa <details>, navegacao
   tradicional.
   ========================================================================== */

:root {
  --fundo: #F5F5F5;
  --fundo-2: #FFFFFF;
  --superficie: #FFFFFF;
  --tinta: #333333;
  --titulo: #444C6D;
  --suave: #5C6470;
  --linha: #E4E7EB;

  /* verde da marca */
  --teal-escuro: #0F5C56;
  --teal: #1A9C86;
  --teal-acao: #3DDBB0;      /* fundo dos botoes */
  --teal-acento: #0F5C56;    /* acento nos titulos e links */
  --acao-hover: #72EACB;
  --sobre-acao: #0F5C56;     /* texto sobre o mint */
  --teal-borda: #BFD4D0;
  --teal-claro: #E6F7F2;

  /* paineis escuros (prova tecnica, resumo do pedido) */
  --poco: #0F5C56;
  --poco-linha: rgba(255, 255, 255, 0.16);
  --poco-texto: #FFFFFF;
  --poco-suave: #A9DDD2;
  --teal-vivo: #3DDBB0;

  --largura: 1240px;
  --respiro: clamp(1rem, 3vw, 2rem);
  --raio: 10px;
  --sombra: 0 6px 24px -12px rgba(15, 92, 86, 0.18);

  --erro-fundo: #FCEBEA;
  --erro-borda: #E4A9A5;
  --erro-texto: #8C2B25;
}

/* O checkout ja nasceu claro; hoje e igual ao resto do site. */
.tema-claro { background: var(--fundo); color: var(--tinta); min-height: 70vh; }

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--fundo);
  color: var(--tinta);
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 500;
  color: var(--titulo);
  line-height: 1.25;
  text-wrap: balance;
}
/* O acento do titulo e so cor: verde escuro, um pouco mais pesado. */
h1 em, h2 em, h3 em {
  font-style: normal;
  font-weight: 600;
  color: var(--teal-acento);
}

a { color: var(--teal-acento); }
a:hover { color: var(--teal); }

/* Rotulo curto acima dos titulos */
.label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.label.center { justify-content: center; }

/* Largura padrao do conteudo */
.caixa { max-width: var(--largura); margin: 0 auto; padding: 0 var(--respiro); }

/* ---- Header: logo e acoes em cima, menu embaixo ---- */
.topo {
  position: relative;
  z-index: 50;
  background: #FFFFFF;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.topo-linha {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--respiro);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.topo-linha.alta { padding-top: 0.8rem; padding-bottom: 0.8rem; }
.topo .marca { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; }
.topo .marca svg { width: 42px; height: 42px; flex: none; }
.topo .marca .marca-barra { fill: var(--teal-escuro); }
.topo .marca .marca-texto { display: flex; flex-direction: column; line-height: 1; }
.topo .marca .marca-texto b { font-weight: 700; font-size: 1.35rem; letter-spacing: 0.01em; color: var(--teal-escuro); }
.topo .marca .marca-texto i {
  font-style: normal; font-weight: 500; font-size: 0.55rem; letter-spacing: 0.42em;
  margin-top: 0.3rem; color: var(--teal);
}
.topo-acoes { display: flex; align-items: center; gap: 0.6rem; }
.topo-acoes .btn { font-size: 0.88rem; padding: 0.5rem 1rem; }
.topo-acoes .btn svg { width: 16px; height: 16px; fill: currentColor; }

.topo nav { border-top: 1px solid var(--linha); }
.topo nav .topo-linha { gap: 0; }
.topo nav .topo-menu { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.topo nav .topo-menu a {
  display: block;
  padding: 0.7rem 0;
  color: #2F3242;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  border-bottom: 2px solid transparent;
}
.topo nav .topo-menu a:hover { color: var(--teal-escuro); border-bottom-color: var(--teal-acao); }

/* Faixa verde abaixo do menu, com a frase de posicionamento */
.faixa-marca { background: var(--teal-escuro); color: #FFFFFF; font-size: 0.85rem; }
.faixa-marca .caixa { display: flex; align-items: center; gap: 1rem; padding-top: 0.6rem; padding-bottom: 0.6rem; flex-wrap: wrap; }
.faixa-marca b { color: var(--teal-acao); font-weight: 500; white-space: nowrap; }
.faixa-marca span { opacity: 0.92; }

/* ---- Botoes ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: var(--teal-acao);
  color: var(--sobre-acao);
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 0.92rem;
  line-height: 1.3;
  white-space: nowrap;
  padding: 0.62rem 1.3rem;
  border: 1px solid transparent;
  border-radius: var(--raio);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover { background: var(--acao-hover); color: var(--sobre-acao); transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(15, 92, 86, 0.45); }
.btn.grande { font-size: 1rem; padding: 0.8rem 1.7rem; }
.btn.vazado { background: transparent; color: var(--teal-escuro); border-color: var(--teal-escuro); }
.btn.vazado:hover { background: var(--teal-claro); color: var(--teal-escuro); box-shadow: none; }
.btn.escuro { background: var(--teal-escuro); color: #FFFFFF; }
.btn.escuro:hover { background: var(--teal); color: #FFFFFF; }
.btn.branco { background: #FFFFFF; color: var(--teal-escuro); }
.btn.branco:hover { background: var(--teal-claro); color: var(--teal-escuro); }

/* ---- Hero das landing pages (claro, com painel de prova verde) ---- */
.hero { position: relative; padding: 3.5rem var(--respiro) 3rem; background: #FFFFFF; }
.hero-inner {
  position: relative;
  max-width: calc(var(--largura) - var(--respiro) * 2);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 3rem;
  align-items: center;
}
.hero-inner.solo { grid-template-columns: 1fr; max-width: 860px; }
.hero h1 { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 600; margin-bottom: 1.2rem; }
.hero p.sub { font-size: 1.05rem; color: var(--suave); max-width: 56ch; margin-bottom: 1.8rem; }
.hero .acoes { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; }
.hero .nota-mono { font-size: 0.82rem; color: var(--suave); margin-top: 1.6rem; }

/* Painel de prova: o unico momento escuro da pagina. */
.prova-painel {
  background: var(--poco);
  border-radius: 14px;
  padding: 1.6rem;
  color: var(--poco-texto);
  box-shadow: 0 24px 48px -24px rgba(15, 92, 86, 0.5);
}
.prova-painel .ph {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500;
  color: var(--poco-suave);
  border-bottom: 1px solid var(--poco-linha);
  padding-bottom: 0.8rem; margin-bottom: 1.1rem;
}
.prova-painel .ph > span:last-child { white-space: nowrap; }
.prova-painel .ph .on { color: var(--teal-vivo); }
.prova-painel .grade { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.prova-painel .kpi .v { font-weight: 600; font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.prova-painel .kpi .v em { font-style: normal; font-weight: 600; color: var(--teal-vivo); }
.prova-painel .kpi .l { font-size: 0.72rem; color: var(--poco-suave); margin-top: 0.15rem; }
.prova-painel .fluxo {
  margin-top: 1.1rem; border-top: 1px solid var(--poco-linha); padding-top: 0.8rem;
  font-size: 0.78rem; color: var(--poco-suave);
}
.prova-painel .fluxo b { color: var(--teal-vivo); font-weight: 500; }

/* ---- Secoes ---- */
section.bloco { padding: 3.5rem var(--respiro); max-width: var(--largura); margin: 0 auto; position: relative; }
section.bloco.cheio { max-width: none; padding-left: 0; padding-right: 0; }
section.bloco h2 { font-size: clamp(1.5rem, 2.6vw, 1.85rem); margin-bottom: 0.6rem; }
section.bloco p.intro { color: var(--suave); max-width: 64ch; font-size: 0.98rem; }

/* Cabeca de secao com um botao a direita */
.bloco-cabeca { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; }
.bloco-cabeca > div { max-width: 70ch; }

/* Faixa branca alternativa */
.fundo-suave { background: #FFFFFF; }

/* Faixa verde escura: CTA de peso ou formulario em destaque. */
.fundo-teal { background: var(--teal-escuro); color: var(--poco-texto); position: relative; }
.fundo-teal h2, .fundo-teal h3 { color: #FFFFFF; }
.fundo-teal h1 em, .fundo-teal h2 em, .fundo-teal h3 em { color: var(--teal-vivo); }
.fundo-teal p.intro { color: var(--poco-suave); }
.fundo-teal .label { color: var(--teal-vivo); }

/* ---- Grid de cards brancos ---- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
  margin-top: 2rem;
}
.card {
  background: var(--superficie);
  border: 1px solid transparent;
  border-radius: var(--raio);
  padding: 1.6rem;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.card:hover { border-color: var(--teal-borda); transform: translateY(-2px); }
.card .num { color: var(--teal); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.1em; display: block; margin-bottom: 0.6rem; }
.card h3 { font-size: 1.05rem; font-weight: 600; color: #222222; margin-bottom: 0.45rem; }
.card p { font-size: 0.92rem; color: var(--suave); }
.card .btn { margin-top: auto; align-self: flex-start; margin-top: 1.1rem; }
.card-link { margin-top: 1rem; font-weight: 500; }
.card-link a { text-decoration: none; }

/* ---- Passos ---- */
.passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; margin-top: 2rem; }
.passo { background: var(--superficie); border-radius: var(--raio); padding: 1.5rem; box-shadow: var(--sombra); }
.passo .n {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--teal-acao); color: var(--teal-escuro);
  font-weight: 600; font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 0.8rem;
}
.passo h3 { font-weight: 600; font-size: 1rem; color: #222222; margin-bottom: 0.35rem; }
.passo p { font-size: 0.9rem; color: var(--suave); }

/* ---- Vitrine de produtos ---- */
.produtos { display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 1.1rem; margin-top: 1.8rem; }
.produto {
  background: var(--superficie);
  border: 1px solid transparent;
  border-radius: var(--raio);
  padding: 1.4rem 1.3rem 1.3rem;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.produto:hover { border-color: var(--teal-acao); transform: translateY(-3px); }
.produto .tipo { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); }
.produto h3 { font-weight: 600; font-size: 1rem; color: #222222; text-transform: uppercase; }
.produto .validade { font-size: 0.85rem; color: var(--suave); }
.produto .preco {
  font-weight: 500;
  font-size: 1.55rem;
  color: var(--teal-escuro);
  font-variant-numeric: tabular-nums;
  margin: 0.5rem 0 0.5rem;
}
.produto .preco small { font-size: 0.9rem; font-weight: 400; }
.produto .acoes { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: auto; }
.produto .btn { font-size: 0.85rem; padding: 0.45rem 1rem; }
.produto > .btn { margin-top: auto; align-self: flex-start; }

/* ---- Painel mock (prova do produto, verde escuro) ---- */
.painel-mock {
  background: var(--poco);
  border-radius: 14px;
  padding: 2rem;
  margin-top: 2.2rem;
  color: var(--poco-texto);
  box-shadow: 0 24px 48px -26px rgba(15, 92, 86, 0.5);
}
.painel-mock .mock-head {
  display: flex; justify-content: space-between; align-items: center; gap: 0.4rem 1rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--poco-linha);
  padding-bottom: 0.9rem; margin-bottom: 1.5rem;
  font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500;
  color: var(--poco-suave);
}
.painel-mock .mock-head .on { color: var(--teal-vivo); }
.mock-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.4rem; }
.mock-stat .v { font-weight: 600; font-size: 1.9rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mock-stat .v em { font-style: normal; font-weight: 600; color: var(--teal-vivo); }
.mock-stat .l { font-size: 0.78rem; color: var(--poco-suave); margin-top: 0.4rem; }

/* ---- FAQ (details nativo, zero JS) ---- */
.faq { margin-top: 1.8rem; display: grid; gap: 0.6rem; }
.faq details { background: var(--superficie); border-radius: var(--raio); box-shadow: var(--sombra); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.2rem;
  font-weight: 500;
  font-size: 0.98rem;
  color: #222222;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--teal-claro); color: var(--teal-escuro);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 500; flex-shrink: 0; line-height: 1;
}
.faq details[open] summary::after { content: '−'; }
.faq details p { padding: 0 1.2rem 1.2rem; color: var(--suave); font-size: 0.93rem; max-width: 76ch; }

/* ---- Formularios ---- */
.form-card {
  background: var(--superficie);
  border-radius: var(--raio);
  padding: 2rem;
  max-width: 640px;
  color: var(--tinta);
  box-shadow: var(--sombra);
}
.form-card .campo { margin-bottom: 1rem; }
.form-card label { display: block; font-size: 0.82rem; font-weight: 500; color: #444444; margin-bottom: 0.35rem; }
.form-card input, .form-card select, .form-card textarea {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid #D5DBE0;
  border-radius: 8px;
  color: var(--tinta);
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  padding: 0.72rem 0.9rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-card input:focus, .form-card select:focus, .form-card textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(26, 156, 134, 0.15);
}
.form-card .consentimento { font-size: 0.78rem; color: var(--suave); margin-top: 0.9rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.form-grid .span2 { grid-column: span 2; }

.alerta-erro {
  background: var(--erro-fundo);
  border: 1px solid var(--erro-borda);
  color: var(--erro-texto);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  font-size: 0.9rem;
  margin-bottom: 1.2rem;
}

/* ---- Checkout ---- */
.checkout-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: start; margin-top: 2rem; }

/* ---- Pagamento (Pix e cartao) ---- */
.formas-pagamento { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.formas-pagamento .forma {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem;
  padding: 1rem 1.1rem; border-radius: var(--raio); cursor: pointer; text-align: left;
  background: #FFFFFF; color: var(--tinta);
  border: 1px solid #D5DBE0;
  font-family: 'Poppins', sans-serif;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.formas-pagamento .forma strong { font-size: 1rem; font-weight: 600; }
.formas-pagamento .forma span { font-size: 0.8rem; color: var(--suave); }
.formas-pagamento .forma:hover { border-color: var(--teal); }
.formas-pagamento .forma.ativa { border-color: var(--teal-escuro); box-shadow: 0 0 0 2px var(--teal-escuro) inset; }
.pix-pagamento, .cartao-pagamento { margin-top: 1.6rem; }
.pix-pagamento .pix-qr {
  display: block; margin: 0 auto 1.2rem; width: 220px; height: 220px;
  background: #FFFFFF; padding: 0.6rem; border-radius: var(--raio); border: 1px solid var(--linha);
}
.pix-pagamento textarea { font-family: monospace; font-size: 0.78rem; resize: none; word-break: break-all; }
@media (max-width: 480px) { .formas-pagamento { grid-template-columns: 1fr; } }

/* Resumo do pedido: painel verde escuro. */
.resumo-pedido {
  background: var(--poco);
  color: var(--poco-texto);
  border-radius: var(--raio);
  padding: 2rem;
  box-shadow: 0 24px 48px -26px rgba(15, 92, 86, 0.5);
}
.resumo-pedido .label { color: var(--teal-vivo); }
.resumo-pedido .linha { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; font-size: 0.95rem; }
.resumo-pedido .linha.total {
  border-top: 1px solid var(--poco-linha);
  margin-top: 0.8rem;
  padding-top: 1rem;
  font-weight: 600;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}
.resumo-pedido .linha .mono { font-size: 0.8rem; color: var(--poco-suave); }
.resumo-pedido .linha.desconto { color: var(--teal-vivo); font-weight: 500; }

/* ---- Confirmacao ---- */
.confirmacao { max-width: 720px; margin: 0 auto; text-align: center; padding: 5rem 2rem; }
.confirmacao h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 600; }
.confirmacao .selo {
  width: 72px; height: 72px; margin: 0 auto 1.5rem;
  background: var(--teal-claro);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--teal-escuro);
  font-size: 1.9rem;
}
.confirmacao .numero-pedido { color: var(--teal-escuro); font-weight: 600; letter-spacing: 0.08em; margin: 1rem 0 1.5rem; }
.confirmacao p { color: var(--suave); }

/* ---- CTA final: cartao verde arredondado dentro da grade ---- */
.cta-final {
  max-width: calc(var(--largura) - var(--respiro) * 2);
  margin: 0 auto 3.5rem;
  padding: 3rem 2rem;
  text-align: center;
  border-radius: 14px;
  background: linear-gradient(120deg, var(--teal-escuro), var(--teal));
  color: #FFFFFF;
  box-shadow: 0 24px 48px -26px rgba(15, 92, 86, 0.5);
}
.cta-final h2 { color: #FFFFFF; font-size: clamp(1.4rem, 2.8vw, 1.9rem); margin-bottom: 1.4rem; }
.cta-final h2 em { color: var(--teal-vivo); }
.cta-final .label { color: var(--teal-vivo); }
.cta-final .acoes { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }
.cta-final .nota-mono { font-size: 0.82rem; color: var(--poco-suave); margin-top: 1.4rem; }

/* ---- Aviso da consulta automatica de CNPJ ---- */
.consulta-aviso { font-size: 0.82rem; margin: 0.4rem 0 0; line-height: 1.4; }
.consulta-aviso[data-tipo="carregando"] { color: var(--suave); }
.consulta-aviso[data-tipo="ok"] { color: var(--teal-escuro); font-weight: 500; }
.consulta-aviso[data-tipo="alerta"] { color: #8a6d1f; font-weight: 500; }
.consulta-aviso[data-tipo="erro"] { color: var(--erro-texto); }

/* ---- Checkout v1: onboarding em etapas ---- */
.passos-checkout {
  display: flex;
  gap: 1.6rem;
  list-style: none;
  margin: 0 0 2rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--suave);
  flex-wrap: wrap;
}
.passos-checkout li { display: flex; align-items: center; gap: 0.55rem; }
.passos-checkout .n {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #D5DBE0;
  background: #FFFFFF;
  font-size: 0.75rem;
}
.passos-checkout li.atual { color: var(--tinta); }
.passos-checkout li.atual .n { background: var(--teal-escuro); color: #FFFFFF; border-color: var(--teal-escuro); }
.passos-checkout li.concluida { color: var(--teal-escuro); }
.passos-checkout li.concluida .n { border-color: var(--teal-escuro); color: var(--teal-escuro); }

.passo-intro { color: var(--suave); font-size: 0.95rem; margin-bottom: 1.4rem; max-width: 52ch; }

/* Confirmacao da empresa localizada na Receita */
.aviso-empresa {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  background: var(--teal-claro);
  border: 1px solid var(--teal-borda);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  margin-bottom: 1.4rem;
}
.aviso-empresa strong { color: var(--teal-escuro); font-size: 0.92rem; font-weight: 600; }
.aviso-empresa span { color: var(--suave); font-size: 0.85rem; }
.aviso-empresa.neutro { background: #FBF7EC; border-color: #E3D5AE; }
.aviso-empresa.neutro strong { color: #7A5F16; }

/* Documento ja confirmado na etapa 2 */
.documento-confirmado {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  background: #FFFFFF;
  border: 1px solid #D5DBE0;
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  margin-bottom: 1.2rem;
}
.documento-confirmado .rotulo { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--suave); font-weight: 500; }
.documento-confirmado .valor { font-weight: 600; font-variant-numeric: tabular-nums; }
.documento-confirmado a { margin-left: auto; font-size: 0.85rem; }

/* Campo de cupom com botao ao lado */
.linha-cupom { display: flex; gap: 0.6rem; align-items: stretch; }
.linha-cupom input { flex: 1; text-transform: uppercase; }
.linha-cupom .btn { white-space: nowrap; padding: 0.7rem 1.2rem; font-size: 0.88rem; }

.cupom-ok { color: var(--teal-escuro); font-size: 0.86rem; margin-top: 0.5rem; font-weight: 500; }
.cupom-ok .cupom-nota { color: var(--suave); font-weight: 400; display: block; margin-top: 0.15rem; }
.cupom-erro { color: var(--erro-texto); font-size: 0.86rem; margin-top: 0.5rem; }

/* ---- Oferta com contagem regressiva ---- */
.oferta-timer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
  background: var(--poco);
  color: var(--poco-texto);
  border-radius: var(--raio);
  padding: 1rem 1.4rem;
  margin-bottom: 1.6rem;
  box-shadow: 0 18px 36px -24px rgba(15, 92, 86, 0.5);
}
.oferta-timer .oferta-texto { display: flex; flex-direction: column; gap: 0.15rem; }
.oferta-timer .oferta-texto strong { color: var(--teal-vivo); font-size: 1.02rem; font-weight: 600; }
.oferta-timer .oferta-texto span { color: var(--poco-suave); font-size: 0.86rem; }
.oferta-timer code {
  font-family: monospace;
  background: rgba(61, 219, 176, 0.18);
  color: var(--teal-vivo);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  letter-spacing: 0.08em;
}
.oferta-timer .oferta-relogio { text-align: right; }
.oferta-timer .rotulo { display: block; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--poco-suave); }
.oferta-timer .tempo { font-size: 1.5rem; font-weight: 500; color: var(--teal-vivo); font-variant-numeric: tabular-nums; }
.oferta-timer.encerrada .tempo { color: var(--poco-suave); font-size: 1rem; }

/* ============================================================================
   Movimento (js/zortek-motion.js) e componentes da home
   ========================================================================== */

/* ---- Revelacao no scroll: so esconde quando o JS esta ativo (classe .js no <html>) ---- */
.js [data-revelar] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js [data-revelar].visivel { opacity: 1; transform: none; }

/* ============================================================================
   Cenas e mini-interfaces (Components/Arte)
   O proprio servico vira a imagem: cartao do certificado, avisos de pagamento,
   nota assinada, painel do condominio, conversa. HTML e CSS puros, nas cores
   da marca. A animacao comeca quando a cena entra na tela ([data-revelar] ganha
   .visivel) e fica parada com prefers-reduced-motion. Sem JS, tudo aparece pronto.
   Tudo dentro do palco e medido em em: a cena escala com o conteiner.
   ========================================================================== */
.cena { container-type: inline-size; width: 100%; }
/* A cena nao esmaece com o resto: o [data-revelar] dela so serve de gatilho. */
.js .cena[data-revelar] { opacity: 1; transform: none; }
.cena-palco { position: relative; font-size: clamp(11px, 3.6cqi, 15px); line-height: 1.3; color: #2F3242; }
.cena .ico { width: 1.25em; height: 1.25em; flex: none; }

.zk-sup {
  background: #FFFFFF;
  border: 1px solid rgba(15, 92, 86, 0.12);
  border-radius: 0.9em;
  box-shadow: 0 0.9em 2.2em -1em rgba(15, 92, 86, 0.3);
}
.zk-linha { display: block; height: 0.5em; border-radius: 99px; background: var(--teal-borda); }
.zk-linha.forte { background: var(--teal-escuro); }
.zk-tag {
  display: inline-block; font-size: 0.68em; font-weight: 600; line-height: 1.4;
  color: var(--teal-escuro); background: var(--teal-acao); border-radius: 99px; padding: 0.2em 0.75em;
}
.bolha { position: absolute; border-radius: 50%; background: rgba(61, 219, 176, 0.2); }

/* ---- Avisos flutuantes (Pix recebido, boleto pago...) ---- */
.aviso {
  position: absolute; z-index: 2;
  display: flex; align-items: center; gap: 0.65em;
  padding: 0.6em 0.9em 0.6em 0.6em; font-size: max(0.8em, 10px); white-space: nowrap;
}
.aviso > .ico {
  width: 2.3em; height: 2.3em; padding: 0.45em; border-radius: 0.6em;
  color: var(--teal-escuro); background: var(--teal-claro);
}
.aviso b { display: block; font-weight: 600; color: #2F3242; }
.aviso small { display: block; color: var(--suave); font-size: 0.9em; }

/* ---- Cena do certificado (banner da home) ---- */
.cena-certificado { aspect-ratio: 1 / 0.86; display: grid; align-items: center; justify-items: start; }
.cena-certificado .b1 { width: 50%; aspect-ratio: 1; top: 10%; right: 4%; }
.cena-certificado .b2 { width: 28%; aspect-ratio: 1; bottom: 8%; left: 2%; }
.cc { position: relative; width: 57%; margin-left: 3%; padding: 1.15em; }
.cc-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.1em; }
.cc-tipo { font-weight: 600; font-size: 0.9em; color: var(--teal-escuro); }
.cc-corpo { display: flex; gap: 0.9em; align-items: center; }
.cc-avatar {
  width: 3.4em; height: 3.4em; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--teal-claro); color: var(--teal-escuro);
}
.cc-avatar .ico { width: 1.8em; height: 1.8em; }
.cc-dados { flex: 1; display: grid; gap: 0.3em; }
.cc-rotulo { font-size: 0.6em; letter-spacing: 0.09em; text-transform: uppercase; color: var(--suave); }
.cc-cpf { font-size: 0.75em; font-weight: 500; color: #2F3242; letter-spacing: 0.04em; }
.cc-rodape {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 1.1em; padding-top: 0.8em; border-top: 1px dashed var(--teal-borda);
  font-size: 0.72em; color: var(--suave);
}
.cc-rodape b { color: var(--teal-escuro); font-weight: 600; }
.cena .cc-escudo { width: 1.7em; height: 1.7em; color: var(--teal); }

/* ---- Cena do condominio (abertura do SGCON) ---- */
.cena-condominio { aspect-ratio: 1 / 0.9; display: grid; place-items: center; }
.cena-condominio .b1 { width: 60%; aspect-ratio: 1; top: 12%; left: 4%; }
.janela { position: relative; width: 84%; padding: 1em 1.1em 1.2em; }
.janela-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1em; }
.janela-titulo { display: flex; align-items: center; gap: 0.45em; font-weight: 600; font-size: 0.85em; color: var(--teal-escuro); }
.janela-corpo { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1em; align-items: end; }
.unidades { display: grid; gap: 0.45em; }
.unidade {
  display: flex; justify-content: space-between; align-items: center; gap: 0.5em;
  font-size: 0.72em; padding: 0.45em 0.6em; border-radius: 0.5em; background: #F5F7F6;
}
.unidade em { font-style: normal; font-weight: 600; font-size: 0.9em; color: var(--suave); }
.unidade em.pago { color: var(--teal); }

/* ---- Cena da conversa (abertura do ZorTalk) ---- */
.cena-conversa { aspect-ratio: 1 / 1; display: grid; place-items: center; }
.cena-conversa .b1 { width: 64%; aspect-ratio: 1; top: 14%; left: 10%; }
.fone { position: relative; width: 60%; padding: 0.9em; border-radius: 1.4em; }
.fone-topo {
  display: flex; align-items: center; gap: 0.6em;
  padding-bottom: 0.75em; margin-bottom: 0.8em; border-bottom: 1px solid var(--linha);
}
.fone-avatar {
  width: 2.4em; height: 2.4em; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--teal-escuro); color: #FFFFFF;
}
.fone-nome { flex: 1; font-size: 0.8em; }
.fone-nome b { display: block; font-weight: 600; }
.fone-nome small { color: var(--teal); }
.fone-corpo { min-height: 13em; justify-content: flex-start; }

/* Baloes de conversa (cena do ZorTalk e card da home) */
.mch { display: flex; flex-direction: column; gap: 0.5em; width: 100%; }
.bal {
  max-width: 82%; padding: 0.55em 0.8em; font-size: 0.74em; line-height: 1.35;
  border-radius: 1em 1em 1em 0.25em; background: #FFFFFF; border: 1px solid var(--teal-borda);
}
.bal.sai { align-self: flex-end; border-radius: 1em 1em 0.25em 1em; background: var(--teal-acao); border-color: transparent; color: var(--teal-escuro); }
.fone .bal.ent { background: #F5F7F6; border-color: transparent; }
.bal .zk-linha { margin: 0.15em 0; }
.bal.sai .zk-linha { background: rgba(15, 92, 86, 0.45); }
.digitando { display: inline-flex; gap: 0.3em; align-items: center; padding: 0.7em 0.9em; }
.digitando i { width: 0.45em; height: 0.45em; border-radius: 50%; background: currentColor; opacity: 0.55; }
.bal.ent.digitando { color: var(--teal); }

/* ---- Mini-interfaces (cards das solucoes e da dupla do ZorTalk) ---- */
.mini-palco { font-size: clamp(8px, 5.2cqi, 13px); height: 9.5em; display: grid; place-items: center; }
.mini-palco.alto { height: 12em; }

.mc { position: relative; display: flex; align-items: center; gap: 0.8em; width: 78%; padding: 0.9em; }
.mc-avatar {
  width: 2.8em; height: 2.8em; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--teal-claro); color: var(--teal-escuro);
}
.mc-avatar .ico { width: 1.5em; height: 1.5em; }
.mc-dados { flex: 1; display: grid; gap: 0.4em; justify-items: start; }
.mc-check {
  position: absolute; top: -0.8em; right: -0.8em; width: 2em; height: 2em; border-radius: 50%;
  display: grid; place-items: center; background: var(--teal-acao); color: var(--teal-escuro);
  box-shadow: 0 0.4em 1em -0.3em rgba(15, 92, 86, 0.5);
}

.mn { position: relative; display: grid; gap: 0.45em; width: 58%; padding: 0.9em 1em 1.1em; }
.mn-topo { display: flex; align-items: center; gap: 0.4em; color: var(--teal-escuro); margin-bottom: 0.2em; }
.mn-assina { color: var(--teal-escuro); margin-top: 0.2em; }
.mn-assina .ico { width: 2.2em; height: 1.4em; }
.mn-carimbo {
  position: absolute; right: -1.2em; bottom: 0.7em;
  display: inline-flex; align-items: center; gap: 0.3em;
  font-size: 0.72em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--teal); background: #FFFFFF; border: 2px solid var(--teal); border-radius: 0.4em;
  padding: 0.25em 0.5em; rotate: -9deg;
}

.mp { display: grid; gap: 0.8em; width: 80%; padding: 0.9em 1em; }
.mp-topo { display: flex; align-items: center; gap: 0.45em; color: var(--teal-escuro); }
.mp-barras { display: flex; align-items: flex-end; gap: 0.45em; height: 4.2em; }
.mp-barras.grande { height: 7.5em; }
.mp-barras i {
  flex: 1; height: var(--h); border-radius: 0.3em 0.3em 0.15em 0.15em;
  background: var(--teal-borda); transform-origin: bottom;
}
.mp-barras i.mint { background: var(--teal-acao); }
.mp-barras i.forte { background: var(--teal-escuro); }

.frente-arte .mch { width: 76%; }

.api { display: grid; gap: 0.5em; width: 84%; padding: 0.9em 1em 1.1em; }
.api-topo { display: flex; gap: 0.35em; margin-bottom: 0.3em; }
.api-topo i { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--teal-borda); }
.api-linha { font-family: ui-monospace, Consolas, monospace; font-size: 0.78em; color: #2F3242; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.api-linha b { color: var(--teal); font-weight: 700; }
.api-linha.suave { color: var(--suave); }
.api-ok {
  justify-self: start; margin-top: 0.3em; font-size: 0.72em; font-weight: 700;
  color: var(--teal-escuro); background: var(--teal-claro); border-radius: 99px; padding: 0.25em 0.8em;
}
.api-webhook {
  position: absolute; right: 2%; bottom: 0.6em;
  display: inline-flex; align-items: center; gap: 0.45em; padding: 0.5em 0.8em;
  font-size: 0.75em; font-weight: 600; color: var(--teal-escuro);
}

.conf { display: grid; gap: 0.55em; width: 86%; padding: 1em 1.1em 1.1em; }
.conf-topo { display: flex; align-items: center; gap: 0.5em; color: var(--teal-escuro); margin-bottom: 0.2em; }
.conf-topo b { font-size: 0.85em; font-weight: 600; }
.conf-item { display: flex; align-items: center; gap: 0.5em; font-size: 0.8em; padding: 0.45em 0.6em; border-radius: 0.5em; background: #F5F7F6; }
.conf-item .ico { color: var(--teal); }

/* ---- Onde as cenas entram ---- */
.banner-arte .cena { max-width: 440px; }
.frente-arte .cena { max-width: 250px; }
.abertura-arte {
  background: linear-gradient(135deg, #EAF8F3, #CDEFE4);
  border-radius: 14px; padding: 1.4rem;
}
.dupla-arte { margin: auto 0; padding: 1rem; border-radius: 12px; background: var(--teal-claro); display: grid; place-items: center; }
.dupla-arte .cena { max-width: 360px; }

/* ---- Movimento ---- */
/* Escondidos so com JS, ate a cena entrar na tela. */
.js .cena .surge { opacity: 0; }
.js .cena:not(.visivel) .mp-barras i { transform: scaleY(0); }

/* Cenas grandes: a jornada se repete a cada 9 s (cada item entra no seu tempo e sai junto). */
.js .cena:not(.mini).visivel .surge { animation: zk-ciclo 9s calc(var(--d, 0) * 1.1s + 0.5s) infinite both; }
/* Mini-interfaces: entram uma vez. */
.js .cena.mini.visivel .surge { animation: zk-surge 0.55s calc(var(--d, 0) * 0.45s + 0.5s) cubic-bezier(0.2, 0.8, 0.2, 1.2) both; }
.js .cena.visivel .mp-barras i { animation: zk-cresce 0.8s calc(var(--i, 0) * 0.09s + 0.3s) cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.js .cena.visivel .flutua { animation: zk-flutua 6s ease-in-out infinite; }
.js .cena.visivel .digitando i { animation: zk-digita 1.2s ease-in-out infinite; }
.digitando i:nth-child(2) { animation-delay: 0.15s !important; }
.digitando i:nth-child(3) { animation-delay: 0.3s !important; }

/* Hover nos cards da home: o detalhe de cada mini-interface repete (nome de animacao novo reinicia). */
.js .frente:hover .cena.visivel .mp-barras i { animation: zk-cresce-de-novo 0.7s calc(var(--i, 0) * 0.07s) cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.js .frente:hover .cena.visivel .mn-carimbo,
.js .frente:hover .cena.visivel .mc-check { animation: zk-surge-de-novo 0.5s cubic-bezier(0.2, 0.8, 0.2, 1.2) both; }

@keyframes zk-ciclo {
  0% { opacity: 0; transform: translateY(0.8em) scale(0.96); }
  6%, 78% { opacity: 1; transform: none; }
  86%, 100% { opacity: 0; transform: translateY(-0.4em); }
}
@keyframes zk-surge { from { opacity: 0; transform: translateY(0.6em) scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes zk-surge-de-novo { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes zk-cresce { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes zk-cresce-de-novo { from { transform: scaleY(0.15); } to { transform: scaleY(1); } }
@keyframes zk-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.45em); } }
@keyframes zk-digita { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-0.35em); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .cena *, .frente:hover .cena * { animation: none !important; }
  .js .cena .surge { opacity: 1; }
  .js .cena:not(.visivel) .mp-barras i { transform: none; }
}

/* ---- Banner da home: ilustracao a esquerda, painel verde com o titulo a direita ---- */
.banner { max-width: var(--largura); margin: 1.6rem auto 0; padding: 0 var(--respiro); }
.banner-cartao {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  border-radius: 14px;
  overflow: hidden;
  background: var(--teal-escuro);
  box-shadow: 0 24px 48px -26px rgba(15, 92, 86, 0.5);
  min-height: 420px;
}
.banner-arte {
  background: linear-gradient(135deg, #EAF8F3, #CDEFE4);
  display: grid;
  place-items: center;
  padding: 2rem;
}
.banner-texto {
  padding: 3rem 3rem;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}
.banner-selo { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-vivo); }
.banner-texto h1 { color: #FFFFFF; font-weight: 600; font-size: clamp(1.8rem, 3.4vw, 2.5rem); line-height: 1.2; }
.banner-texto h1 em { color: var(--teal-vivo); }
.banner-texto p { color: rgba(255, 255, 255, 0.88); max-width: 46ch; font-size: 1rem; }
.banner-texto .acoes { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.4rem; }

/* Chamada abaixo da vitrine: texto a esquerda, botao a direita */
.chamada {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  background: var(--superficie);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 1.4rem 1.8rem;
  margin-top: 1.8rem;
}
.chamada p { font-size: 0.93rem; color: var(--suave); max-width: 70ch; }
.chamada p strong { color: var(--teal-escuro); font-weight: 600; }

/* ---- Solucoes: cartoes com ilustracao em cima ---- */
.frentes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 2rem; }
.frente {
  display: flex; flex-direction: column;
  background: var(--superficie); border-radius: var(--raio); overflow: hidden;
  box-shadow: var(--sombra); border: 1px solid transparent;
  text-decoration: none; color: var(--tinta);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.frente:hover { border-color: var(--teal-acao); transform: translateY(-3px); color: var(--tinta); }
.frente-arte { background: var(--teal-claro); padding: 1.2rem; display: grid; place-items: center; }
.frente-corpo { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.frente .tipo, .modulo .tipo, .plano .tipo {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal);
}
.frente .tipo b { color: var(--teal-escuro); font-weight: 600; }
.frente h3 { font-size: 1.05rem; font-weight: 600; color: var(--titulo); }
.frente p { color: var(--suave); font-size: 0.9rem; }
.frente .seta {
  margin-top: auto; align-self: flex-start;
  padding: 0.35rem 0.95rem; margin-top: 0.9rem;
  border: 1px solid var(--teal-escuro); border-radius: var(--raio);
  color: var(--teal-escuro); font-weight: 500; font-size: 0.85rem;
}
.frente:hover .seta { background: var(--teal-escuro); color: #FFFFFF; }

/* ---- Faixa verde escura de largura total ---- */
.secao-verde { background: var(--teal-escuro); color: #FFFFFF; padding: 3.5rem 0; }
.secao-verde h2 { color: var(--teal-vivo); font-size: clamp(1.5rem, 2.6vw, 1.85rem); margin-bottom: 0.6rem; }
.secao-verde p.intro { color: rgba(255, 255, 255, 0.85); max-width: 64ch; font-size: 0.98rem; }
.secao-verde .passos { margin-top: 2rem; }

/* ---- Sobre + diferenciais ---- */
.sobre {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.5rem; align-items: center;
  background: var(--superficie); border-radius: 14px; box-shadow: var(--sombra); padding: 2.5rem;
}
.sobre h2 { font-size: clamp(1.5rem, 2.6vw, 1.85rem); margin-bottom: 0.8rem; }
.sobre p { color: var(--suave); font-size: 0.95rem; margin-bottom: 1.4rem; }
.diferenciais { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.diferencial { background: var(--fundo); border-radius: var(--raio); padding: 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.2rem; }
.diferencial .v { font-size: 1.25rem; font-weight: 600; color: var(--teal-escuro); line-height: 1.2; }
.diferencial .l { font-size: 0.85rem; color: var(--suave); }

/* ---- Abertura das paginas de produto: titulo a esquerda, ilustracao a direita ---- */
.abertura { position: relative; padding: 3.5rem var(--respiro) 3rem; background: #FFFFFF; }
.abertura-grade {
  max-width: calc(var(--largura) - var(--respiro) * 2);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  align-items: center;
}
.abertura h1 { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 600; margin-bottom: 1.2rem; }
.abertura .sub { font-size: 1.05rem; color: var(--suave); max-width: 54ch; margin-bottom: 1.8rem; }
.abertura .acoes { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.abertura .nota-mono { font-size: 0.82rem; color: var(--suave); margin-top: 1.6rem; }
.abertura-arte { max-width: 420px; width: 100%; justify-self: center; }
.produto-marca { font-weight: 600; font-size: 0.9rem; letter-spacing: 0.3em; color: var(--teal-escuro); margin-bottom: 0.8rem; }

/* ---- Dupla de cartoes grandes com ilustracao ao centro ---- */
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.dupla-cartao {
  background: var(--superficie); border-radius: 14px; box-shadow: var(--sombra);
  padding: 2.2rem; display: flex; flex-direction: column; gap: 1.2rem; min-height: 440px;
}
.dupla-cartao h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 600; max-width: 18ch; }
.dupla-cartao p { color: var(--suave); max-width: 50ch; font-size: 0.95rem; }

/* ---- Modulos, recursos e planos (paginas de produto) ---- */
.modulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; margin-top: 2rem; }
.modulo { background: var(--superficie); border-radius: var(--raio); box-shadow: var(--sombra); padding: 1.5rem; border: 1px solid transparent; transition: border-color 0.25s ease; }
.modulo:hover { border-color: var(--teal-borda); }
.modulo h3 { font-size: 1.02rem; font-weight: 600; color: #222222; margin: 0.45rem 0 0.35rem; }
.modulo p { color: var(--suave); font-size: 0.9rem; }

.recursos { display: grid; gap: 1rem; margin-top: 2rem; }
.recurso {
  display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 2rem; align-items: start;
  background: var(--superficie); border-radius: var(--raio); box-shadow: var(--sombra); padding: 1.8rem;
}
.recurso h3 { font-size: 1.15rem; font-weight: 600; color: #222222; }
.recurso p { color: var(--suave); font-size: 0.95rem; }
.recurso ul, .plano ul { list-style: none; display: grid; gap: 0.55rem; font-size: 0.92rem; }
.recurso li, .plano li { padding-left: 1.3rem; position: relative; color: var(--tinta); }
.recurso li::before, .plano li::before {
  content: ''; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 50%; background: var(--teal-acao);
}

.planos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 2rem; }
.plano { background: var(--superficie); border-radius: var(--raio); box-shadow: var(--sombra); padding: 2rem; display: grid; gap: 0.8rem; align-content: start; }
.plano h3 { font-size: 1.3rem; font-weight: 600; color: #222222; }
.plano p { color: var(--suave); font-size: 0.95rem; }

/* ---- Rodape verde escuro ---- */
.rodape {
  background: var(--teal-escuro);
  color: rgba(255, 255, 255, 0.82);
  padding: 3.2rem var(--respiro) 1.6rem;
  font-size: 0.9rem;
}
.rodape-grade { max-width: calc(var(--largura) - var(--respiro) * 2); margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2.4rem; }
.rodape-nome { font-weight: 700; letter-spacing: 0.04em; color: #FFFFFF; font-size: 1.1rem; }
.rodape-nome i { font-style: normal; font-weight: 500; font-size: 0.6rem; letter-spacing: 0.42em; color: var(--teal-vivo); margin-left: 0.5rem; }
.rodape-marca p { margin-top: 0.9rem; max-width: 36ch; }
.rodape h4 { font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: #FFFFFF; font-weight: 600; margin-bottom: 0.9rem; }
.rodape-grade a, .rodape-grade div > span { display: block; color: rgba(255, 255, 255, 0.82); text-decoration: none; margin-bottom: 0.5rem; line-height: 1.5; }
.rodape-grade a:hover { color: var(--teal-vivo); }
.rodape .etiqueta {
  display: inline; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  color: var(--teal-escuro); background: var(--teal-vivo); border-radius: 99px; padding: 0.1rem 0.5rem; margin-left: 0.3rem;
}
.rodape-legal {
  max-width: calc(var(--largura) - var(--respiro) * 2); margin: 2.4rem auto 0; padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem;
  font-size: 0.78rem; color: rgba(255, 255, 255, 0.7);
}

/* ---- Menu do celular (details nativo) ---- */
.menu-movel { display: none; position: relative; }
.menu-movel summary {
  list-style: none; cursor: pointer; width: 40px; height: 40px;
  display: grid; place-content: center; gap: 5px;
  border: 1px solid var(--linha); border-radius: 8px; background: #FFFFFF;
}
.menu-movel summary::-webkit-details-marker { display: none; }
.menu-movel summary span { display: block; width: 18px; height: 2px; background: var(--teal-escuro); border-radius: 2px; }
.menu-movel-painel {
  position: absolute; right: 0; top: calc(100% + 0.7rem); min-width: 240px; z-index: 60;
  background: #FFFFFF; border: 1px solid var(--linha); border-radius: var(--raio); padding: 0.5rem;
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.3);
}
.menu-movel-painel a { display: block; padding: 0.75rem 0.9rem; border-radius: 8px; color: #2F3242; text-decoration: none; font-weight: 500; font-size: 0.95rem; }
.menu-movel-painel a:hover { background: var(--teal-claro); color: var(--teal-escuro); }

:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; }

/* ---- Responsivo ---- */
@media (max-width: 1024px) {
  .frentes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .hero-inner, .abertura-grade { grid-template-columns: 1fr; gap: 1.6rem; }
  .abertura-arte { max-width: 380px; order: -1; }
  .checkout-grid { grid-template-columns: 1fr; }
  .banner-cartao { grid-template-columns: 1fr; min-height: 0; }
  .banner-arte { padding: 1.4rem; }
  .banner-arte .cena { max-width: 360px; }
  .banner-texto { padding: 2rem 1.6rem 2.2rem; }
  .sobre { grid-template-columns: 1fr; padding: 1.8rem; }
  .dupla, .planos { grid-template-columns: 1fr; }
  .dupla-cartao { min-height: 380px; padding: 1.8rem; }
  .recurso { grid-template-columns: 1fr; gap: 0.9rem; }
  .rodape-grade { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
  .topo nav { display: none; }
  .menu-movel { display: block; }
  .topo-acoes .btn.some-mobile { display: none; }
  .topo .marca svg { width: 36px; height: 36px; }
  .topo .marca .marca-texto b { font-size: 1.15rem; }
  .hero { padding: 2.6rem 1.2rem 2.4rem; }
  .abertura { padding: 2.6rem 1.2rem 2.4rem; }
  section.bloco { padding: 2.6rem 1.2rem; }
  section.bloco.cheio { padding-left: 0; padding-right: 0; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span2 { grid-column: span 1; }
  /* No celular a faixa fica so com a frase curta. */
  .faixa-marca b { white-space: normal; }
  .faixa-marca span { display: none; }
}
@media (max-width: 520px) {
  .frentes { grid-template-columns: 1fr; }
  .diferenciais { grid-template-columns: 1fr; }
  .rodape-grade { grid-template-columns: 1fr; }
  .cta-final { margin-inline: 1.2rem; padding: 2.2rem 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-revelar] { opacity: 1; transform: none; transition: none; }
  .btn, .card, .produto, .frente { transition: none; }
}

/* ---- Atalho do WhatsApp ------------------------------------------------- */
/* Flutua acima de tudo, em todas as paginas. Verde do proprio WhatsApp: e o
   sinal que a pessoa reconhece de longe, entao nao usa a paleta da marca.    */
.zap {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / .25);
  transition: transform .2s ease, box-shadow .2s ease;
}
.zap svg { width: 60%; height: 60%; fill: #fff; }
.zap:hover, .zap:focus-visible {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 .75rem 2rem rgb(0 0 0 / .3);
}
/* Em telas estreitas o botao nao pode tapar o rodape nem os botoes do checkout. */
@media (max-width: 480px) {
  .zap { width: 3rem; height: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .zap { transition: none; }
  .zap:hover, .zap:focus-visible { transform: none; }
}