:root {
  --algodao: #F5F4EF;
  --carbono: #151515;
  --fio: #D7261E;
  --malha: #E9E7DF;
  --grafite: #55544F;
  --linha: #CBC9BF;
  --marca: #1E4FD8;
  --gutter: clamp(24px, 5vw, 72px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--algodao);
  color: var(--carbono);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  overflow-x: hidden;
}
h1, h2, h3, h4, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 3px solid var(--fio);
  outline-offset: 3px;
}

h1, .texto-b h2, .titulo, .patch h2 {
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.02;
  text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, min(5vw, 9.5vh), 4.8rem); }
.texto-b h2 { font-size: clamp(2.2rem, 4.6vw, 4.2rem); }
.titulo { font-size: clamp(2rem, 4.2vw, 3.8rem); max-width: 17ch; }

.botao {
  display: inline-block;
  padding: 18px 28px;
  background: var(--fio);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-radius: 12px;
  outline: 1.5px dashed rgba(255, 255, 255, 0.75);
  outline-offset: -7px;
  transition: background-color 0.15s;
}
.botao:hover { background: #B81E17; }
.botao:focus-visible { outline: 3px solid var(--carbono); outline-offset: 3px; }

.cena { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; }
.palco { position: relative; height: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }
.topo {
  position: absolute; z-index: 3; top: 26px; left: var(--gutter); right: var(--gutter);
  display: flex; justify-content: space-between; align-items: center;
}
.topo img { display: block; width: clamp(130px, 13vw, 176px); height: auto; }
.topo-link { font-weight: 600; text-underline-offset: 4px; }

.textos {
  position: absolute; z-index: 2; top: 104px; bottom: 32px; left: var(--gutter);
  width: min(52%, 700px);
  display: grid; align-content: center;
}
.texto-a, .texto-b { grid-area: 1 / 1; }
.texto-a p, .texto-b p { margin-top: 20px; max-width: 46ch; color: var(--grafite); font-size: clamp(1.05rem, 1.4vw, 1.25rem); }
.texto-a .botao { margin-top: 28px; }
.anima .texto-b, .anima .grade { visibility: hidden; }

.bolhas { position: absolute; inset: 0; z-index: 2; }
.bolhas li { position: absolute; }
.zap {
  position: relative; display: block; min-width: 118px; padding: 7px 11px 6px; background: #fff; border-radius: 0 10px 10px 10px;
  font-size: clamp(1rem, 1.4vw, 1.25rem); line-height: 1.3; white-space: nowrap; color: #111B21;
  box-shadow: 0 1px 1.5px rgba(11, 20, 26, 0.16);
}
.zap::before {
  content: ""; position: absolute; top: 0; left: -8px; width: 9px; height: 13px;
  background: inherit; clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.zap.meu { background: #D9FDD3; border-radius: 10px 0 10px 10px; }
.zap.meu::before { left: auto; right: -8px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.zap small { display: block; font-size: 0.72em; font-weight: 700; }
.zap time { display: block; text-align: right; font-size: 0.62em; color: #667781; margin-top: 1px; }
.zap time b { color: #53BDEB; font-weight: 400; }
.bolhas li:nth-child(1) { left: 62%; top: 19%; }
.bolhas li:nth-child(2) { left: 82%; top: 27%; }
.bolhas li:nth-child(3) { left: 58%; top: 40%; }
.bolhas li:nth-child(4) { left: 76%; top: 51%; }
.bolhas li:nth-child(5) { left: 60%; top: 63%; }
.bolhas li:nth-child(6) { left: 79%; top: 73%; }

.grade {
  position: absolute; z-index: 1; right: var(--gutter); top: 50%; margin-top: -196px;
  width: min(420px, 38vw);
  background: #fff; border-radius: 16px; padding: 22px 24px;
}
.grade-topo { display: flex; justify-content: space-between; gap: 12px; font-size: 0.95rem; color: var(--grafite); margin-bottom: 8px; }
.grade-topo strong { color: var(--carbono); }
.grade ol li {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--malha); font-size: 1.1rem;
}
.grade b { font-stretch: 125%; font-weight: 800; }
.grade em { font-style: normal; font-weight: 700; }
.grade-total { display: flex; gap: 20px; padding-top: 14px; font-weight: 600; color: var(--grafite); font-size: 0.95rem; }

.fio-saida { position: absolute; z-index: 1; width: 8px; display: none; }
.fio-saida line { stroke: var(--fio); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 14 16; }
.anima .fio-saida { display: block; }

.costura { position: relative; }
.fio { position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; overflow: visible; }
#fio-ponto { fill: none; stroke: var(--fio); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 14 16; }
#no { fill: var(--fio); transition: r 0.2s; }
.ancora { position: absolute; width: 0; height: 0; }
.ancora.dir { right: clamp(10px, 2.4vw, 34px); }
.ancora.esq { left: clamp(10px, 2.4vw, 34px); }
.ancora.centro { left: 50%; }

.problema, .passos, .producao, .marca, .vantagens, .sob-medida, .galeria, .recebe, .valor, .contratar, .oferta, .duvidas, .rodape {
  position: relative; z-index: 1;
  max-width: 1320px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter);
}
.passos { padding-top: clamp(80px, 12vw, 160px); }
.passo {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px); align-items: center;
  margin-top: clamp(48px, 7vw, 96px);
}
.passo.inverso .passo-texto { order: 2; }
.passo-texto h3 { font-stretch: 112%; font-weight: 800; font-size: clamp(1.45rem, 2.4vw, 2.1rem); line-height: 1.12; }
.passo-texto p { margin-top: 14px; color: var(--grafite); max-width: 44ch; }
.passo-texto .dica { color: var(--carbono); font-weight: 600; }
.vao { position: relative; height: clamp(48px, 7vw, 96px); }
.vao .ancora { top: 50%; }

.telefone {
  justify-self: center; width: min(320px, 100%);
  background: var(--carbono); padding: 10px; border-radius: 34px;
}
.tela { background: #fff; border-radius: 25px; padding: 24px 20px 20px; }
.tela-marca { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 600; color: var(--grafite); }
.bolinha { width: 14px; height: 14px; border-radius: 50%; background: var(--marca); }
.tela h4 { margin-top: 12px; font-stretch: 112%; font-weight: 800; font-size: 1.3rem; }
.quantidade { display: flex; align-items: center; justify-content: space-between; margin: 16px 0; padding: 6px; background: var(--algodao); border-radius: 12px; }
.quantidade button {
  width: 44px; height: 44px; border: 0; border-radius: 9px; background: #fff; color: var(--carbono);
  font: inherit; font-size: 1.4rem; font-weight: 700; cursor: pointer;
}
.quantidade output { font-stretch: 125%; font-weight: 800; font-size: 1.6rem; }
.tela dl div, .painel dl div { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--malha); }
.tela dt, .painel dt { color: var(--grafite); }
.tela dd, .painel dd { font-weight: 700; }
.tela-botao {
  display: block; margin-top: 16px; padding: 14px; text-align: center;
  background: var(--marca); color: #fff; font-weight: 700; border-radius: 10px;
}

.etapas, .painel { background: #fff; border-radius: 16px; padding: 24px; }
.etapas-topo, .painel-topo { display: flex; justify-content: space-between; gap: 12px; color: var(--grafite); }
.etapas-topo strong, .painel-topo strong { color: var(--carbono); }
.etapas ol { margin-top: 12px; }
.etapas li { position: relative; padding: 11px 0 11px 34px; color: var(--grafite); }
.etapas li::before {
  content: ""; position: absolute; left: 3px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  border-radius: 50%; border: 2px solid var(--linha); background: #fff;
}
.etapas li.feita { color: var(--carbono); }
.etapas li.feita::before { background: var(--carbono); border-color: var(--carbono); }
.etapas li.atual { color: var(--carbono); font-weight: 700; }
.etapas li.atual::before { background: var(--fio); border-color: var(--fio); }

.medidor { margin-top: 18px; height: 12px; background: var(--malha); border-radius: 6px; overflow: hidden; }
.medidor span { display: block; height: 100%; background: var(--carbono); }
.medidor-legenda { margin-top: 8px; color: var(--grafite); font-size: 0.95rem; }
.painel dl { margin-top: 10px; }
.painel .destaque dt, .painel .destaque dd { color: var(--fio); font-weight: 700; }
.painel dl div:last-child { border-bottom: 0; }

.marca {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 6vw, 88px); align-items: center;
  padding-top: clamp(80px, 11vw, 150px);
}
.marca-texto p { margin-top: 18px; color: var(--grafite); max-width: 42ch; }
.cores { display: flex; gap: 12px; margin-top: 24px; }
.cores button {
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; background: var(--c);
}
.cores button[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--algodao), 0 0 0 5px var(--carbono); }
.marca-texto .dica { color: var(--carbono); font-weight: 600; }
.fluxo-link { margin-top: 16px; counter-reset: f; }
.fluxo-link li { counter-increment: f; position: relative; padding: 7px 0 7px 34px; }
.fluxo-link li::before { content: counter(f); position: absolute; left: 0; top: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--carbono); color: var(--algodao); font-size: 0.85rem; font-weight: 700; text-align: center; line-height: 24px; }
.marca-texto .retorno { color: var(--carbono); padding-left: 14px; border-left: 3px solid var(--fio); border-radius: 0; }
.abas { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 12px; padding: 4px; background: var(--algodao); border-radius: 11px; }
.abas button { min-height: 44px; padding: 6px; border: 0; border-radius: 8px; background: transparent; color: var(--grafite); font: inherit; font-size: 0.82rem; font-weight: 700; line-height: 1.15; cursor: pointer; }
.abas button[aria-pressed="true"] { background: var(--marca); color: #fff; }
.perso { margin-top: 12px; padding: 12px; background: var(--algodao); border-radius: 10px; font-size: 0.9rem; line-height: 1.35; }
.perso p { margin-top: 4px; color: var(--grafite); }
.tela-apoio { margin-top: 4px; color: var(--grafite); font-size: 0.92rem; }
.escolha { display: block; margin-top: 10px; font-size: 0.9rem; font-weight: 600; color: var(--grafite); }
.escolha select { display: block; width: 100%; height: 44px; margin-top: 4px; padding: 0 10px; border: 1px solid var(--linha); border-radius: 9px; background: #fff; color: var(--carbono); font: inherit; font-weight: 600; }
.campo { margin-top: 10px; padding: 8px 12px; border: 1px solid var(--linha); border-radius: 9px; }
.campo small { display: block; color: var(--grafite); font-size: 0.78rem; }
.campo span { font-weight: 700; }
.campo-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.producao { padding-top: clamp(64px, 9vw, 120px); }
.producao-telas { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: 30px; }
.painel-gestao { background: #fff; border-radius: 16px; padding: clamp(20px, 3vw, 30px); }
.percentual { margin-top: 14px; color: var(--grafite); }
.percentual span { font-stretch: 125%; font-weight: 800; font-size: clamp(2.2rem, 4vw, 3rem); color: var(--carbono); margin-right: 6px; }
.fases { margin-top: 18px; }
.fases li { display: grid; grid-template-columns: 96px 1fr 72px; gap: 10px; align-items: center; padding: 8px 0; }
.fases .medidor { margin-top: 0; height: 9px; }
.fases b { text-align: right; font-size: 0.92rem; }
.medidor span { transition: width 0.25s; }
.dica-centro { margin-top: 14px; font-weight: 600; }
.perfis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 4vw, 48px); margin-top: 34px; }
.perfis h3 { padding-top: 12px; border-top: 3px solid var(--carbono); font-stretch: 112%; font-weight: 800; font-size: 1.15rem; line-height: 1.2; }
.perfis p { margin-top: 6px; color: var(--grafite); }
.etapas-nota { margin-top: 26px; max-width: 74ch; }
.sob-medida { padding-top: clamp(64px, 9vw, 120px); }
.ajustes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px clamp(20px, 4vw, 48px); margin-top: 28px; }
.ajustes li { padding-top: 12px; border-top: 1px solid var(--linha); color: var(--grafite); }
.ajustes strong { display: block; color: var(--carbono); font-stretch: 112%; font-weight: 800; font-size: 1.15rem; }
.vantagens { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(40px, 6vw, 72px); }
.vantagens-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 4vw, 48px); margin-top: 28px; }
.vantagens-lista h3 { padding-top: 12px; border-top: 3px solid var(--fio); font-stretch: 112%; font-weight: 800; font-size: 1.2rem; line-height: 1.2; }
.vantagens-lista p { margin-top: 6px; color: var(--grafite); }
.vao-marca { position: relative; grid-column: 1 / -1; height: 40px; }
.vao-marca .ancora { top: 50%; }

.galeria { padding-top: clamp(32px, 5vw, 64px); }
.galeria-pecas { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: clamp(12px, 3vw, 40px); align-items: end; margin-top: 28px; }
.galeria figure { margin: 0; }
.galeria img { display: block; width: 100%; height: auto; border-radius: 14px; }
.galeria figcaption { margin-top: 8px; font-weight: 700; }
.problema { padding-top: clamp(72px, 10vw, 130px); padding-bottom: 24px; }
.intro { margin-top: 16px; max-width: 58ch; color: var(--grafite); font-size: 1.12rem; }
.comparar { margin-top: 32px; }
.comparar > div { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 4vw, 56px); padding: 16px 0; border-bottom: 1px solid var(--linha); }
.comparar p { max-width: 42ch; color: var(--grafite); }
.comparar p:last-child { color: var(--carbono); font-weight: 600; }
.comparar-topo span { font-stretch: 112%; font-weight: 800; font-size: 1.15rem; }
.comparar-topo span:last-child { color: var(--fio); }
.recebe { padding-top: clamp(64px, 9vw, 120px); }
.itens { margin-top: 26px; }
.itens > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 8px clamp(20px, 4vw, 56px); padding: 18px 0; border-top: 1px solid var(--linha); }
.itens dt { font-stretch: 112%; font-weight: 800; font-size: 1.2rem; line-height: 1.2; }
.itens dd { color: var(--grafite); max-width: 56ch; }
.valor { padding-top: clamp(64px, 9vw, 120px); }
.valor-linhas { margin-top: 26px; max-width: 860px; }
.valor-linhas > div { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 16px 18px; border-bottom: 1px solid var(--linha); }
.valor-linhas strong { font-weight: 600; text-align: right; max-width: 30ch; }
.valor-linhas .total { margin-top: 10px; background: var(--carbono); color: var(--algodao); border: 0; border-radius: 12px; }
.valor-linhas .total strong { font-stretch: 112%; font-weight: 800; font-size: 1.3rem; }
.nota { margin-top: 12px; font-size: 0.95rem; color: var(--grafite); }
.contratar { padding-top: clamp(64px, 9vw, 120px); padding-bottom: 20px; }
.contratar ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 4vw, 48px); margin-top: 26px; counter-reset: passo; }
.contratar li { counter-increment: passo; border-top: 3px solid var(--carbono); padding-top: 14px; }
.contratar li strong { display: block; font-stretch: 112%; font-weight: 800; font-size: 1.2rem; }
.contratar li strong::before { content: counter(passo) ". "; }
.contratar li span { display: block; margin-top: 6px; color: var(--grafite); }
.oferta { padding-top: 96px; padding-bottom: clamp(48px, 7vw, 80px); text-align: center; }
.patch {
  position: relative; max-width: 620px; margin: 0 auto;
  background: var(--carbono); color: var(--algodao);
  border-radius: 20px; padding: clamp(32px, 5vw, 56px) clamp(24px, 5vw, 56px);
  outline: 2px dashed rgba(245, 244, 239, 0.55); outline-offset: -12px;
}
.patch h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
.preco { margin-top: 18px; font-stretch: 125%; font-weight: 800; font-size: clamp(3rem, 8vw, 5.4rem); line-height: 1; letter-spacing: -0.02em; }
.pagamento { margin-top: 10px; color: #C9C8C1; }
.patch ul { margin: 26px auto 28px; max-width: 390px; text-align: left; }
.patch li { padding: 9px 0; border-bottom: 1px solid #3A3A38; }
.patch li:last-child { border-bottom: 0; }
.botao.claro { outline-color: rgba(255, 255, 255, 0.75); }
.aviso { margin-top: 12px; font-size: 0.95rem; color: #F2B8B5; }
.sem-mensalidade { margin-top: 20px; font-weight: 600; }

.duvidas { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(56px, 8vw, 96px); max-width: 860px; }
.duvidas .titulo { margin-bottom: 20px; }
details { border-bottom: 1px solid var(--linha); }
summary { padding: 16px 0; font-weight: 700; cursor: pointer; }
details p { padding-bottom: 18px; color: var(--grafite); max-width: 62ch; }

.rodape { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 26px; padding-bottom: 34px; border-top: 1px solid var(--linha); color: var(--grafite); }

html:not(.anima) .cena { height: auto; min-height: 0; overflow: visible; }
html:not(.anima) .bolhas { display: none; }
html:not(.anima) .palco { padding-top: 96px; padding-bottom: 40px; }
html:not(.anima) .textos, html:not(.anima) .grade { position: static; width: auto; max-width: 620px; margin: 0 0 24px; }
html:not(.anima) .texto-b { grid-area: auto; margin-top: 40px; }

@media (max-width: 860px) {
  body { font-size: 17px; }
  .textos { width: auto; right: var(--gutter); top: 84px; bottom: auto; align-content: start; }
  .texto-a p { margin-top: 12px; }
  .texto-a .botao { display: none; }
  .texto-b p { margin-top: 12px; }
  .grade { right: auto; left: var(--gutter); width: calc(100% - 2 * var(--gutter)); top: auto; bottom: 26px; margin-top: 0; padding: 14px 18px; }
  .grade ol li { padding: 7px 0; font-size: 1rem; }
  .grade-total { padding-top: 10px; }
  .bolhas li:nth-child(1) { left: 6%; top: 49%; }
  .bolhas li:nth-child(2) { left: 56%; top: 54%; }
  .bolhas li:nth-child(3) { left: 8%; top: 62%; }
  .bolhas li:nth-child(4) { left: 50%; top: 69%; }
  .bolhas li:nth-child(5) { left: 7%; top: 77%; }
  .bolhas li:nth-child(6) { left: 42%; top: 85%; }
  .passo, .marca { grid-template-columns: minmax(0, 1fr); }
  .passo.inverso .passo-texto { order: 0; }
  .producao-telas, .perfis, .vantagens-lista, .ajustes { grid-template-columns: minmax(0, 1fr); }
  .fases li { grid-template-columns: 84px 1fr 62px; }
  .texto-a p { font-size: 1rem; }
  .bolhas li:nth-child(1) { top: 53%; }
  .bolhas li:nth-child(2) { top: 57%; }
  .bolhas li:nth-child(3) { top: 65%; }
  .bolhas li:nth-child(4) { top: 72%; }
  .bolhas li:nth-child(5) { top: 80%; }
  .bolhas li:nth-child(6) { top: 87%; }
  .comparar > div { grid-template-columns: 1fr; gap: 6px; }
  .comparar-topo { display: none !important; }
  .comparar p:first-child::before { content: "Hoje: "; font-weight: 700; }
  .comparar p:last-child::before { content: "Com a Arremate: "; color: var(--fio); font-weight: 700; }
  .itens > div { grid-template-columns: minmax(0, 1fr); }
  .valor-linhas > div { flex-direction: column; gap: 4px; padding: 14px 8px; }
  .valor-linhas .total { padding: 14px 16px; }
  .valor-linhas strong { text-align: left; }
  .contratar ol { grid-template-columns: minmax(0, 1fr); }
  .galeria-pecas { grid-template-columns: 1fr 1fr; }
  .galeria figure:first-child { grid-column: 1 / -1; }
  .fio-saida line, #fio-ponto { stroke-width: 4; stroke-dasharray: 10 12; }
  .rodape { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 860px) and (max-height: 720px) {
  .textos { top: 66px; }
  h1 { font-size: 1.85rem; }
  .texto-a p, .texto-b p { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}