/* Marcenix — página de venda
   Madeira escura no alto (é onde o móvel é feito), MDF claro embaixo
   (é onde a conta é feita). Uma família só, Archivo, em duas larguras:
   larga e pesada nos títulos, como carimbo em chapa; normal no texto. */

:root {
  --nogueira:  #2a1d14;
  --nogueira-2:#3a2a1e;
  --serragem:  #e8c58a;
  --latao:     #a8762a;
  --mdf:       #f4f3ef;
  --chapa:     #ffffff;
  --tinta:     #1d1a16;
  --tinta-2:   #5b554b;
  --risco:     #d9d5cb;
  --zap:       #1faa54;
  --zap-fundo: #e7ddd2;
  --bom:       #1c7a52;
  --largo: 'Archivo', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--mdf); color: var(--tinta);
  font-family: var(--largo); font-size: 17px; line-height: 1.6;
  font-variation-settings: 'wdth' 100;
  -webkit-font-smoothing: antialiased;
}
img { display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--serragem); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 {
  font-family: var(--largo); font-weight: 800; line-height: 1.08; margin: 0;
  font-variation-settings: 'wdth' 118; letter-spacing: -.01em;
}
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: 1.12rem; font-variation-settings: 'wdth' 108; }

.botao {
  display: inline-block; text-decoration: none; text-align: center;
  background: var(--serragem); color: var(--nogueira);
  font-weight: 700; font-size: 1.02rem; font-variation-settings: 'wdth' 110;
  padding: 15px 26px; border-radius: 10px;
  transition: transform .08s, background-color .15s;
}
.botao:hover { background: #f0d29e; }
.botao:active { transform: translateY(1px); }
.botao--pequeno { padding: 9px 16px; font-size: .9rem; }

/* ---------- topo ---------- */
.topo {
  position: absolute; inset: 0 0 auto; z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  max-width: 1180px; margin: 0 auto; padding: 18px 24px;
  color: #fff;
}
.topo__marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.topo__marca span { font-weight: 800; font-size: 1.3rem; font-variation-settings: 'wdth' 118; letter-spacing: -.02em; }
.topo__marca img { border-radius: 8px; box-shadow: 0 0 0 1px rgba(232,197,138,.25); }
.topo__acoes { display: flex; align-items: center; gap: 18px; }
.topo__entrar { text-decoration: none; font-weight: 600; opacity: .85; }
.topo__entrar:hover { opacity: 1; }

/* ---------- abertura ---------- */
.abertura {
  position: relative; color: #fff;
  background:
    repeating-linear-gradient(176deg, rgba(255,255,255,.018) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(181deg, rgba(0,0,0,.08) 0 1px, transparent 1px 23px),
    var(--nogueira);
  padding: 120px 24px 0;
  display: grid; gap: 48px; align-items: end;
  grid-template-columns: 1fr;
  overflow: hidden;
}
.abertura > * { max-width: 1180px; }
@media (min-width: 960px) {
  .abertura {
    grid-template-columns: minmax(0, 1fr) 380px;
    padding: 150px max(24px, calc((100vw - 1180px) / 2 + 24px)) 0;
  }
}
.abertura__texto { padding-bottom: 72px; max-width: 640px; }
.abertura h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.9rem);
  font-variation-settings: 'wdth' 122; letter-spacing: -.02em; line-height: 1.02;
}
.abertura__sub { color: #e3d7c8; font-size: 1.12rem; margin: 26px 0 34px; max-width: 34em; }
.abertura__cta { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; }
.abertura__letra { color: #c9b7a2; font-size: .93rem; }

/* o celular encosta na borda de baixo, como se estivesse em cima da bancada */
.celular { margin: 0 auto; width: 100%; max-width: 360px; position: relative; }
.celular__corpo {
  background: #0f0b08; border-radius: 40px 40px 0 0; padding: 12px 12px 0;
  box-shadow: 0 -2px 0 1px #4a3626, 0 30px 80px -20px rgba(0,0,0,.6);
}
.zap { background: var(--zap-fundo); border-radius: 30px 30px 0 0; overflow: hidden; height: 540px; display: flex; flex-direction: column; }
.zap__topo {
  display: flex; gap: 10px; align-items: center; background: #075e54; color: #fff;
  padding: 26px 16px 12px; font-size: .9rem; line-height: 1.25;
}
.zap__topo small { display: block; opacity: .75; font-size: .76rem; }
.zap__foto {
  width: 34px; height: 34px; border-radius: 50%; background: var(--serragem); color: var(--nogueira);
  display: grid; place-items: center; font-weight: 800; font-size: .78rem;
}
.zap__conversa { padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; color: var(--tinta); }
.zap__balao {
  margin: 0; background: #dcf8c6; border-radius: 10px 2px 10px 10px; padding: 8px 10px;
  font-size: .78rem; line-height: 1.4; align-self: flex-end; max-width: 92%;
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
.zap__balao--dele { background: #fff; border-radius: 2px 10px 10px 10px; align-self: flex-start; }
.zap__link { color: #0a6fb7; }

.cartao-link {
  align-self: flex-end; width: 92%; background: #fff; border-radius: 10px; padding: 12px 12px 10px;
  display: flex; flex-direction: column; gap: 5px; font-size: .74rem; text-decoration: none;
  box-shadow: 0 1px 0 rgba(0,0,0,.08); border-top: 3px solid var(--latao);
}
.cartao-link__marca { font-weight: 800; font-size: .86rem; font-variation-settings: 'wdth' 115; }
.cartao-link__num { color: var(--tinta-2); margin-bottom: 4px; }
.cartao-link__item, .cartao-link__desc, .cartao-link__total { display: flex; justify-content: space-between; gap: 8px; }
.cartao-link__item { border-bottom: 1px dashed var(--risco); padding-bottom: 4px; }
.cartao-link__desc { color: var(--tinta-2); }
.cartao-link__total { font-size: .82rem; padding-top: 2px; }
.cartao-link__total strong { color: var(--latao); font-size: .95rem; }
.cartao-link__botao { margin-top: 6px; background: var(--zap); color: #fff; text-align: center; border-radius: 6px; padding: 6px; font-weight: 600; }

/* cota: a linha de medida do desenho técnico, com os dois traços nas pontas */
.cota {
  position: absolute; left: -64px; top: 40px; bottom: 0; width: 40px;
  border-left: 1px solid var(--serragem); color: var(--serragem);
}
.cota::before, .cota::after {
  content: ''; position: absolute; left: -7px; width: 13px; border-top: 1px solid var(--serragem);
}
.cota::before { top: 0; } .cota::after { bottom: 0; }
.cota span {
  position: absolute; left: -14px; top: 50%; transform: translate(-50%, -50%) rotate(-90deg);
  white-space: nowrap; font-size: .82rem; background: var(--nogueira); padding: 0 8px;
}
@media (max-width: 959px) { .cota { display: none; } }

/* ---------- caminho ---------- */
section { padding: 96px 24px; }
section > * { max-width: 1132px; margin-left: auto; margin-right: auto; }
.caminho h2 { max-width: 1132px; }
.passos {
  list-style: none; padding: 0; margin-top: 46px;
  display: grid; gap: 0; grid-template-columns: 1fr; counter-reset: passo;
}
@media (min-width: 860px) { .passos { grid-template-columns: repeat(5, 1fr); } }
.passos li {
  counter-increment: passo; position: relative;
  padding: 22px 22px 10px 0; border-top: 2px solid var(--tinta);
}
@media (max-width: 859px) { .passos li { padding: 22px 0 18px 58px; border-top-width: 1px; } }
.passos li::before {
  content: counter(passo); display: block;
  font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--latao);
  font-variation-settings: 'wdth' 125; margin-bottom: 14px;
}
@media (max-width: 859px) { .passos li::before { position: absolute; left: 0; top: 20px; font-size: 2.1rem; } }
.passos p { color: var(--tinta-2); font-size: .98rem; margin: 8px 0 0; }

/* ---------- recursos ---------- */
.recursos {
  background: var(--chapa); border-top: 1px solid var(--risco); border-bottom: 1px solid var(--risco);
  display: grid; gap: 56px;
}
@media (min-width: 960px) {
  .recursos { grid-template-columns: 420px 1fr; padding-left: max(24px, calc((100vw - 1132px) / 2)); padding-right: max(24px, calc((100vw - 1132px) / 2)); }
  .recursos > * { margin: 0; max-width: none; }
}
.recursos__conta p { color: var(--tinta-2); margin: 14px 0 26px; }
.conta {
  background: var(--nogueira); color: #f3e9dc; border-radius: 14px; padding: 22px 22px 18px;
  font-variant-numeric: tabular-nums;
}
.conta__linha { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.conta__linha--forte { font-weight: 700; color: #fff; }
.conta__linha--bom { border-bottom: 0; font-weight: 800; font-size: 1.25rem; color: #8fd8b0; font-variation-settings: 'wdth' 112; }
.conta__nota { margin: 10px 0 0; font-size: .88rem; color: #c9b7a2; }

.lista-recursos { list-style: none; padding: 0; margin: 0; display: grid; gap: 0 40px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .lista-recursos { grid-template-columns: 1fr 1fr; } }
.lista-recursos li { padding: 18px 0; border-bottom: 1px solid var(--risco); color: var(--tinta-2); font-size: .97rem; }
.lista-recursos strong { display: block; color: var(--tinta); font-size: 1.04rem; margin-bottom: 2px; font-variation-settings: 'wdth' 108; }

/* ---------- preço ---------- */
.preco { display: grid; gap: 40px; align-items: end; }
@media (min-width: 860px) { .preco { grid-template-columns: 1fr 360px; } }
.preco > * { margin: 0; max-width: none; }
@media (min-width: 860px) { .preco { padding-left: max(24px, calc((100vw - 1132px) / 2)); padding-right: max(24px, calc((100vw - 1132px) / 2)); } }
.preco__valor {
  margin: 22px 0 10px; font-weight: 800; line-height: .9; color: var(--tinta);
  font-size: clamp(4rem, 12vw, 8.5rem); font-variation-settings: 'wdth' 125; letter-spacing: -.04em;
}
.preco__valor span { font-size: .32em; vertical-align: .95em; letter-spacing: 0; color: var(--latao); }
.preco__valor small { font-size: .17em; letter-spacing: 0; font-weight: 600; color: var(--tinta-2); font-variation-settings: 'wdth' 100; }
.preco__texto { color: var(--tinta-2); max-width: 30em; margin: 0 0 28px; }
.preco .botao { background: var(--nogueira); color: #fff; }
.preco .botao:hover { background: var(--nogueira-2); }
.preco__outros { margin: 0; border-top: 2px solid var(--tinta); }
.preco__outros div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--risco); }
.preco__outros dt { font-weight: 700; }
.preco__outros dd { margin: 0; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.preco__outros dd span { display: block; font-weight: 400; font-size: .86rem; color: var(--tinta-2); }

/* ---------- dúvidas ---------- */
.duvidas { padding-top: 40px; }
.duvidas > * { max-width: 760px; }
.duvidas h2 { margin-bottom: 22px; }
.duvidas details { border-top: 1px solid var(--risco); }
.duvidas details:last-of-type { border-bottom: 1px solid var(--risco); }
.duvidas summary {
  cursor: pointer; list-style: none; padding: 18px 36px 18px 0; position: relative;
  font-weight: 700; font-variation-settings: 'wdth' 106;
}
.duvidas summary::-webkit-details-marker { display: none; }
.duvidas summary::after { content: '+'; position: absolute; right: 4px; top: 13px; font-size: 1.5rem; font-weight: 400; color: var(--latao); }
.duvidas details[open] summary::after { content: '−'; }
.duvidas details p { margin: 0 0 20px; color: var(--tinta-2); max-width: 40em; }

/* ---------- final ---------- */
.final { background: var(--nogueira); color: #fff; text-align: center; }
.final h2 { margin-bottom: 30px; font-size: clamp(1.8rem, 4.4vw, 3rem); }

.rodape {
  display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: center;
  padding: 26px 24px 34px; font-size: .9rem; color: var(--tinta-2);
}
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--latao); }

@media (max-width: 520px) {
  body { font-size: 16px; }
  section { padding: 72px 20px; }
  .abertura { padding: 104px 20px 0; }
  .topo { padding: 16px 20px; }
  .topo__entrar { display: none; }
  .abertura__cta .botao { width: 100%; }
  .zap { height: 470px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media (max-width: 959px) { .abertura__texto { padding-bottom: 8px; } }

/* ---------- vídeo ---------- */
.video { text-align: center; padding-bottom: 40px; }
.video[hidden] { display: none; }
.video__sub { color: var(--tinta-2); margin: 10px auto 28px; }
.video__quadro { max-width: 900px; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--nogueira); }
.video__quadro iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- preço: anual em destaque ---------- */
.preco__outros dd a {
  display: inline-block; margin-top: 8px; font-weight: 700; font-size: .9rem;
  color: var(--latao); text-decoration: underline; text-underline-offset: 3px;
}
.preco__anual dt em {
  display: block; font-style: normal; font-size: .78rem; font-weight: 700; color: var(--bom);
}