/* Site público da Ecometrix (APP-PUBLICO §4.1): HTML estático, sem JavaScript, mesma CSP do hub. */
:root {
  --papel: #f6f4ee;
  --superficie: #ffffff;
  --tinta: #17211c;
  --tinta-suave: #55615a;
  --linha: #dcd8cc;
  --verde: #14533d;
  --verde-vivo: #1f7a55;
  --menta: #7fd1a8;
  --menta-fundo: #e2f2e9;
  --ambar: #9a6a00;
  --serifa: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel: #0f1513;
    --superficie: #161e1a;
    --tinta: #e8ece9;
    --tinta-suave: #9aa8a0;
    --linha: #27322c;
    --verde: #7fd1a8;
    --verde-vivo: #8fdcb4;
    --menta: #7fd1a8;
    --menta-fundo: #18291f;
    --ambar: #e6b84a;
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 17px/1.6 var(--sans);
}

a {
  color: var(--verde-vivo);
}

a:focus-visible,
.botao:focus-visible {
  outline: 2px solid var(--verde-vivo);
  outline-offset: 3px;
}

.largura {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Cabeçalho */
.topo {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--linha);
  background: color-mix(in srgb, var(--papel) 92%, transparent);
  backdrop-filter: blur(8px);
}

/* Âncoras do menu (#modulos…) não ficam escondidas atrás do menu fixo. */
[id] {
  scroll-margin-top: 88px;
}

.topo .largura {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 1.25rem var(--serifa);
  color: var(--tinta);
  text-decoration: none;
}

.marca img {
  width: 32px;
  height: 32px;
}

.topo nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  font-size: 0.95rem;
}

.topo nav a {
  color: var(--tinta-suave);
  text-decoration: none;
}

.topo nav a:hover {
  color: var(--tinta);
}

.botao {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--verde);
  color: var(--papel) !important;
  font-weight: 600;
  text-decoration: none;
}

.botao.contorno {
  background: transparent;
  color: var(--tinta) !important;
  border: 1px solid var(--linha);
}

/* Abertura */
.abertura {
  padding: 72px 0 56px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 48px;
  align-items: center;
}

.sobretitulo {
  font: 600 0.78rem var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--verde-vivo);
  margin: 0 0 12px;
}

h1,
h2,
h3 {
  font-family: var(--serifa);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
}

.abertura h1 {
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  margin: 0 0 20px;
}

.abertura .lead {
  font-size: 1.15rem;
  color: var(--tinta-suave);
  max-width: 34em;
  margin: 0 0 28px;
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Recorte de DRE: mostra o produto sem depender de imagem */
.recorte {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 18px 40px -24px rgb(20 83 61 / 35%);
  font-variant-numeric: tabular-nums;
  transform: rotate(-1deg);
}

.recorte header {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--tinta-suave);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.recorte table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.recorte td {
  padding: 7px 0;
  border-bottom: 1px solid var(--linha);
}

.recorte td:last-child {
  text-align: right;
  font-family: var(--mono);
}

.recorte tr.total td {
  font-weight: 700;
  border-bottom: 0;
  padding-top: 10px;
}

.recorte .neg {
  color: #b3412f;
}

@media (prefers-color-scheme: dark) {
  .recorte .neg {
    color: #f08a76;
  }
}

.recorte .selo {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--menta-fundo);
  color: var(--verde-vivo);
}

/* Seções */
section.faixa {
  padding: 56px 0;
  border-top: 1px solid var(--linha);
}

section.faixa h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  margin: 0 0 8px;
}

section.faixa > .largura > p.intro {
  color: var(--tinta-suave);
  max-width: 40em;
  margin: 0 0 32px;
}

.modulos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.modulo {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 12px;
  padding: 22px;
  display: grid;
  align-content: start;
  gap: 8px;
}

.modulo.destaque {
  grid-column: span 2;
  border-top: 4px solid var(--verde);
}

@media (max-width: 720px) {
  .modulo.destaque {
    grid-column: auto;
  }
}

.modulo h3 {
  font-size: 1.3rem;
  margin: 0;
}

.modulo p {
  margin: 0;
  color: var(--tinta-suave);
}

.modulo ul {
  margin: 4px 0 0;
  padding-left: 18px;
  color: var(--tinta-suave);
}

.etiqueta {
  justify-self: start;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--menta-fundo);
  color: var(--verde-vivo);
}

.etiqueta.breve {
  background: transparent;
  border: 1px solid var(--linha);
  color: var(--tinta-suave);
}

.passos {
  list-style: none;
  counter-reset: passo;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.passos li {
  counter-increment: passo;
  border-left: 2px solid var(--menta);
  padding-left: 18px;
}

.passos li::before {
  content: counter(passo, decimal-leading-zero);
  display: block;
  font: 600 0.85rem var(--mono);
  color: var(--verde-vivo);
  margin-bottom: 6px;
}

.passos h3 {
  margin: 0 0 6px;
  font-size: 1.15rem;
}

.passos p {
  margin: 0;
  color: var(--tinta-suave);
}

.garantias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px 32px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.garantias li {
  padding: 12px 0;
  border-bottom: 1px solid var(--linha);
}

.garantias strong {
  display: block;
}

.garantias span {
  color: var(--tinta-suave);
}

.chamada {
  background: var(--verde);
  color: var(--papel);
  border-radius: 16px;
  padding: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}

.chamada h2 {
  margin: 0;
  color: inherit;
}

.chamada p {
  margin: 6px 0 0;
  opacity: 0.85;
}

.chamada .botao {
  background: var(--papel);
  color: var(--verde) !important;
}

@media (prefers-color-scheme: dark) {
  .chamada {
    background: var(--menta-fundo);
    color: var(--tinta);
  }

  .chamada .botao {
    background: var(--menta);
    color: #0f1513 !important;
  }
}

/* Rodapé */
.rodape {
  border-top: 1px solid var(--linha);
  padding: 28px 0 40px;
  font-size: 0.9rem;
  color: var(--tinta-suave);
}

.rodape .largura {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
}

.rodape nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

/* Páginas de texto (manual, termos, privacidade) */
.texto {
  max-width: 760px;
  padding-top: 48px;
  padding-bottom: 64px;
}

.texto h1 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin: 0 0 8px;
}

.texto h2 {
  font-size: 1.5rem;
  margin: 40px 0 8px;
}

.texto .aviso {
  border-left: 4px solid var(--ambar);
  background: var(--superficie);
  padding: 12px 16px;
  border-radius: 6px;
  color: var(--tinta-suave);
}

.texto ol li,
.texto ul li {
  margin-bottom: 6px;
}

@media (max-width: 820px) {
  .abertura {
    grid-template-columns: 1fr;
    padding-top: 48px;
  }

  .recorte {
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .botao {
    transition: transform 0.15s;
  }

  .botao:hover {
    transform: translateY(-1px);
  }
}