/* ═══════════════════════════════════════════════════════════
   PRUMANTE, folha de estilo
   Ordem: tokens · base · assinatura do fio · componentes · seções
   ═══════════════════════════════════════════════════════════ */

@font-face{
  font-family:"Archivo";
  src:url("fonts/archivo.woff2") format("woff2");
  font-weight:600 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}
@font-face{
  font-family:"Plex Sans";
  src:url("fonts/plex-sans.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Plex Mono";
  src:url("fonts/plex-mono.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}

:root{
  /* cor */
  --tinta:#0F2A38;
  --tinta-funda:#071720;
  --papel:#F7F5F0;
  --latao:#B08A4A;
  --latao-claro:#CFA560;
  --regua:rgba(247,245,240,.09);
  --regua-escura:rgba(15,42,56,.12);
  --texto-fraco:rgba(247,245,240,.72);
  --texto-fraco-claro:#4C5D66;

  /* tipo */
  --display:"Archivo",system-ui,sans-serif;
  --corpo:"Plex Sans",system-ui,sans-serif;
  --mono:"Plex Mono",ui-monospace,monospace;

  --t-xs:.72rem;
  --t-sm:.84rem;
  --t-md:1rem;
  --t-lg:1.28rem;
  --t-xl:clamp(1.5rem,1.1rem + 1.8vw,1.75rem);
  --t-2xl:clamp(1.9rem,1.3rem + 2.8vw,2.6rem);
  --t-3xl:clamp(2rem,1.5rem + 2.9vw,4.2rem);

  /* espaço */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem;
  --s5:3rem; --s6:4.5rem; --s7:6.5rem;

  --calha:96px;
  --margem:clamp(20px,5vw,40px);
  --medida:62ch;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--tinta);color:var(--papel);
  font-family:var(--corpo);font-size:clamp(1rem,.96rem + .2vw,1.09rem);
  line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.022em}
a{color:inherit}
b,strong{font-weight:400;color:var(--latao)}
::selection{background:var(--latao);color:var(--tinta-funda)}

.pular{position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--papel);color:var(--tinta);padding:.75rem 1.1rem;
  font-family:var(--mono);font-size:var(--t-sm)}
.pular:focus{left:var(--margem);top:var(--margem)}

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

/* ─── layout base ─────────────────────────────────────────── */
.faixa{padding-block:var(--s6)}
.faixa--papel{background:var(--papel);color:var(--tinta)}
.faixa--funda{background:var(--tinta-funda)}
.env{max-width:calc(var(--calha) + var(--medida) + 20rem);margin-inline:auto;
  padding-left:calc(var(--calha) + var(--margem));padding-right:var(--margem)}
.col{max-width:var(--medida)}

.rotulo{font-family:var(--mono);font-weight:500;font-size:var(--t-xs);
  letter-spacing:.19em;text-transform:uppercase;color:var(--latao);
  display:block;margin-bottom:var(--s3)}
.faixa--papel .rotulo{color:#8A6A34}

h2.titulo{font-size:var(--t-2xl);margin-bottom:var(--s3);text-wrap:balance}
p.entrada{color:var(--texto-fraco);max-width:52ch}
.faixa--papel p.entrada{color:var(--texto-fraco-claro)}

/* ─── ASSINATURA: o fio de prumo ──────────────────────────── */
.fio{position:fixed;inset-block:0;left:var(--margem);width:var(--calha);
  z-index:40;pointer-events:none}
.fio__linha{position:absolute;inset-block:0;left:0;width:1px;
  background:var(--regua);transform-origin:top;transform:scaleY(0);
  animation:descer .6s cubic-bezier(.4,0,.2,1) forwards}
@keyframes descer{to{transform:scaleY(1)}}

.fio__bob{position:absolute;left:0;top:0;width:11px;height:11px;
  margin-left:-5px;background:var(--latao);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  opacity:0;animation:assentar .35s .55s ease forwards;
  will-change:transform}
@keyframes assentar{to{opacity:1}}

/* escala do instrumento: traços curtos e longos, como fita métrica */
.fio__escala{position:absolute;inset-block:0;left:0;width:100%;
  display:flex;flex-direction:column;justify-content:space-evenly;
  padding-block:12vh}
.marca{display:flex;align-items:center;gap:.55rem;
  font-family:var(--mono);font-weight:500;font-size:.62rem;
  letter-spacing:.13em;color:var(--regua);
  transition:color .35s ease}
.marca::before{content:"";height:1px;background:currentColor;width:9px;flex:none}
.marca--longa::before{width:20px}
.marca.ativa{color:var(--latao)}
.faixa--papel~*{}

.progresso{position:fixed;top:0;left:0;right:0;height:2px;z-index:45;
  background:transparent;display:none}
.progresso i{display:block;height:100%;width:0;background:var(--latao);
  transition:width .1s linear}

/* ─── topo fixo ───────────────────────────────────────────── */
.topo{position:sticky;top:0;z-index:50;
  background:rgba(15,42,56,.92);backdrop-filter:saturate(150%) blur(9px);
  border-bottom:1px solid var(--regua)}
.topo .env{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s2);padding-block:.7rem}
.marca-logo{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.marca-logo svg{width:16px;height:30px;flex:none}
.marca-logo span{font-family:var(--display);font-weight:700;
  font-size:var(--t-sm);letter-spacing:.2em}

/* ─── botões ──────────────────────────────────────────────── */
.bt{font-family:var(--display);font-weight:600;font-size:var(--t-sm);
  text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;
  padding:.85rem 1.4rem;min-height:44px;border-radius:2px;
  border:1px solid transparent;transition:background .16s,border-color .16s,color .16s}
.bt svg{width:16px;height:16px;flex:none}
.bt--latao{background:var(--latao);color:var(--tinta-funda);
  border-bottom:2px solid #8A6A34}
.bt--latao:hover{background:var(--latao-claro)}
.bt--fio{color:var(--papel);border-color:var(--regua);font-weight:600}
.bt--fio:hover{border-color:var(--latao);color:var(--latao)}
.topo .bt{padding:.6rem 1rem;min-height:40px}

.bt-texto{font-family:var(--mono);font-weight:500;font-size:var(--t-sm);
  letter-spacing:.09em;text-transform:uppercase;color:var(--texto-fraco);
  text-decoration:none;border-bottom:1px solid var(--regua);
  padding-block:.6rem;display:inline-block;min-height:44px}
.bt-texto:hover{color:var(--latao);border-color:var(--latao)}

/* ─── 1. topo ─────────────────────────────────────────────── */
.abertura{padding-block:var(--s6) var(--s7)}
.abertura h1{font-size:var(--t-3xl);margin-bottom:var(--s3);
  max-width:15ch;text-wrap:balance}
.abertura h1 span{color:var(--latao)}
.origem{font-family:var(--mono);font-weight:500;font-size:var(--t-xs);
  letter-spacing:.13em;line-height:1.75;text-transform:uppercase;
  color:var(--texto-fraco);max-width:46ch;
  padding-left:1rem;border-left:1px solid var(--latao);margin-bottom:var(--s4)}
.abertura .resumo{font-size:var(--t-lg);color:var(--texto-fraco);
  max-width:44ch;margin-bottom:var(--s2)}
.destaque-preco{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .8rem;
  margin-bottom:var(--s4);padding-top:var(--s2);
  border-top:1px solid var(--regua);max-width:44ch}
.destaque-preco b{font-family:var(--display);font-weight:700;
  font-size:2rem;line-height:1;letter-spacing:-.03em;color:var(--latao)}
.destaque-preco>span{font-family:var(--corpo);font-size:var(--t-sm);
  color:var(--texto-fraco);letter-spacing:0;text-transform:none}
.acoes{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center}

/* ─── 2. o que está torto ─────────────────────────────────── */
.torto{list-style:none;margin-top:var(--s4);display:grid;gap:0}
.torto li{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;
  padding-block:1.2rem;border-top:1px solid var(--regua-escura);align-items:start}
.torto li:last-child{border-bottom:1px solid var(--regua-escura)}
.torto .n{font-family:var(--mono);font-weight:500;font-size:var(--t-xs);
  letter-spacing:.1em;color:#8A6A34;padding-top:.35rem}
.torto p{color:var(--texto-fraco-claro);max-width:50ch}

/* ─── 3. o que recebe ─────────────────────────────────────── */
.recebe{list-style:none;margin-top:var(--s4);display:grid;
  gap:1px;background:var(--regua)}
.recebe li{background:var(--tinta);padding:1.35rem 0 1.35rem 1.4rem;
  border-left:1px solid var(--latao)}
.recebe h3{font-family:var(--display);font-weight:600;font-size:var(--t-md);
  margin-bottom:.3rem;letter-spacing:-.005em}
.recebe p{font-size:var(--t-sm);color:var(--texto-fraco);max-width:48ch}

/* ─── 4. preço ────────────────────────────────────────────── */
.preco{margin-top:var(--s4);display:grid;gap:var(--s4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  align-items:start}
.preco-bloco{border-top:2px solid var(--latao);padding-top:1.3rem}
.preco-bloco .cifra{font-family:var(--display);font-weight:700;
  font-size:clamp(2.6rem,2rem + 2.6vw,3.5rem);line-height:1;
  letter-spacing:-.03em;display:block;margin-bottom:.6rem}
.preco-bloco .cifra small{font-family:var(--mono);font-weight:500;
  font-size:.24em;letter-spacing:.13em;text-transform:uppercase;
  color:var(--texto-fraco);display:block;margin-top:.7rem;line-height:1.6}
.preco-bloco p{font-size:var(--t-sm);color:var(--texto-fraco);max-width:38ch}
.preco-bloco--calmo{border-top-color:var(--regua)}
.limite{font-family:var(--mono);font-weight:500;font-size:var(--t-xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--latao);
  margin-top:var(--s4);padding-top:1rem;border-top:1px solid var(--regua)}

/* ─── 5. combinados ───────────────────────────────────────── */
.combinados{list-style:none;margin-top:var(--s4);
  border-top:1px solid var(--regua-escura)}
.combinados li{display:grid;grid-template-columns:2.6rem 1fr;gap:1.1rem;
  padding-block:1.25rem;border-bottom:1px solid var(--regua-escura);
  align-items:baseline}
.combinados .n{font-family:var(--mono);font-weight:500;font-size:var(--t-xs);
  letter-spacing:.1em;color:#8A6A34}
.combinados h3{font-family:var(--display);font-weight:600;
  font-size:var(--t-md);margin-bottom:.25rem}
.combinados p{font-size:var(--t-sm);color:var(--texto-fraco-claro);max-width:50ch}

/* ─── 6. como funciona ────────────────────────────────────── */
.passos{list-style:none;margin-top:var(--s4);display:grid;gap:0}
.passos li{display:grid;grid-template-columns:2.6rem 1fr;gap:1.1rem;
  padding-block:1.35rem;border-top:1px solid var(--regua);align-items:start}
.passos li:last-child{border-bottom:1px solid var(--regua)}
.passos .n{font-family:var(--mono);font-weight:500;font-size:var(--t-xs);
  letter-spacing:.1em;color:var(--latao);padding-top:.3rem}
.passos h3{font-family:var(--display);font-weight:600;font-size:var(--t-md);
  margin-bottom:.28rem}
.passos p{font-size:var(--t-sm);color:var(--texto-fraco);max-width:50ch}
.passos li.chave{background:rgba(176,138,74,.07);
  margin-inline:-1rem;padding-inline:1rem;border-left:2px solid var(--latao)}
.passos li.chave h3{color:var(--latao)}

/* ─── 7. perguntas ────────────────────────────────────────── */
.faq{margin-top:var(--s4);border-top:1px solid var(--regua-escura)}
.faq details{border-bottom:1px solid var(--regua-escura)}
.faq summary{font-family:var(--display);font-weight:600;font-size:var(--t-md);
  padding-block:1.15rem;cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:9px;height:9px;flex:none;
  border-right:1.5px solid var(--latao);border-bottom:1.5px solid var(--latao);
  transform:rotate(45deg);margin-bottom:4px;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(225deg);margin-bottom:0}
.faq p{font-size:var(--t-sm);color:var(--texto-fraco-claro);
  max-width:54ch;padding-bottom:1.2rem}
.faq summary:hover{color:#8A6A34}

/* ─── 8. fecho e rodapé ───────────────────────────────────── */
.fecho h2{font-size:var(--t-2xl);margin-bottom:var(--s2);max-width:16ch}
.fecho p{color:var(--texto-fraco);max-width:44ch;margin-bottom:var(--s4)}
.rodape{border-top:1px solid var(--regua);padding-block:var(--s4)}
.rodape .env{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);
  align-items:center;justify-content:space-between}
.rodape-marca{display:flex;align-items:center;gap:.6rem}
.rodape-marca svg{width:14px;height:26px}
.rodape-dados{font-family:var(--mono);font-weight:500;font-size:var(--t-xs);
  letter-spacing:.11em;text-transform:uppercase;color:var(--texto-fraco);
  display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;align-items:center}
.rodape-dados a{text-decoration:none;border-bottom:1px solid var(--latao);
  padding-block:.5rem}
.rodape-dados a:hover{color:var(--latao)}

/* ─── responsivo ──────────────────────────────────────────── */
@media (max-width:900px){
  :root{--calha:0px}
  .fio{display:none}
  .progresso{display:block}
  .env{padding-left:var(--margem)}
  .faixa{padding-block:var(--s5)}
  .abertura{padding-block:var(--s5) var(--s6)}
  .combinados li,.passos li{grid-template-columns:2.1rem 1fr;gap:.85rem}
}
@media (max-width:380px){
  .acoes{gap:var(--s2)}
  .bt{width:100%;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;
    animation-iteration-count:1!important;transition-duration:.01ms!important}
  .fio__linha{transform:scaleY(1)}
  .fio__bob{opacity:1}
}