/* ============================================================
   Planilhas Fast de Planejamento · Grifo Academy
   Paleta tirada dos criativos: azul de obra à noite + ouro Grifo.
   Sem fonte externa: stack de sistema (sans) + mono para tudo que
   imita planilha. A personalidade vem do par sans/mono, não de
   fonte baixada — exigência de performance.
   ============================================================ */

:root{
  --navy:#12263A;
  --navy-deep:#0C1A28;
  --navy-line:#20374E;
  --gold:#B58A3E;
  --gold-hi:#C89A4A;
  --cream:#F1ECE3;
  --cream-2:#E7E0D4;
  --ink:#16202B;
  --muted:#5B6672;
  --muted-light:#A9B4C1;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --w:720px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  padding-bottom:0;
}
img{max-width:100%;height:auto;display:block}
s{text-decoration-thickness:2px}

.wrap{max-width:var(--w);margin:0 auto;padding:0 22px}

/* ---------------------------------------------------- tipografia */
h1{
  font-size:clamp(38px,10.5vw,64px);line-height:1.02;font-weight:800;
  letter-spacing:-.028em;margin:0 0 22px;text-transform:uppercase;
}
h1 em{font-style:normal;color:var(--gold);display:inline-block}
h2{
  font-size:clamp(25px,5.6vw,34px);line-height:1.18;font-weight:800;
  letter-spacing:-.018em;margin:0 0 20px;
}
h2 em{font-style:italic}
p{margin:0 0 17px}
strong{font-weight:700}

.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);font-weight:700;margin:0 0 14px;
}
.eyebrow-light{color:var(--gold-hi)}

.punch{
  font-size:19px;font-weight:650;line-height:1.42;
  border-left:3px solid var(--gold);padding-left:18px;margin:30px 0 0;
}
.punch-light{color:#fff;border-left-color:var(--gold-hi)}

/* ---------------------------------------------------- seções */
.band{padding:58px 0;background:var(--cream)}
.band-alt{background:var(--cream-2)}
.band-deep{background:var(--navy);color:#fff}
.band-deep p{color:#CBD4DE}
.band-deep h2,.band-deep strong,.band-deep em{color:#fff}

/* ---------------------------------------------------- hero */
.hero{
  background:var(--navy-deep);color:#fff;
  padding:clamp(64px,14vw,104px) 0 clamp(52px,11vw,80px);
  border-bottom:3px solid var(--gold);
  position:relative;overflow:hidden;
}
/* trama discreta de grade — a planilha por baixo de tudo */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--navy-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--navy-line) 1px,transparent 1px);
  background-size:52px 34px;opacity:.42;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 78%);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 78%);
}
.hero .wrap{position:relative}
.hero-sub{font-size:19px;color:#C7D1DC;max-width:34ch;margin-bottom:26px}
.hero-note{
  font-family:var(--mono);font-size:12.5px;line-height:1.75;color:#8C99A8;
  border-top:1px solid var(--navy-line);padding-top:16px;margin:0;
}

/* ---------------------------------------------------- perguntas numeradas */
.qs{list-style:none;padding:0;margin:22px 0 24px}
.qs li{
  display:flex;gap:14px;align-items:baseline;
  border-top:1px solid var(--navy-line);padding:15px 0;font-size:18px;font-weight:600;color:#fff;
}
.qs li:last-child{border-bottom:1px solid var(--navy-line)}
.qs span{font-family:var(--mono);font-size:12px;color:var(--gold-hi);flex:0 0 auto}

/* ---------------------------------------------------- dois níveis */
.niveis{display:grid;gap:16px;margin:26px 0 6px}
@media(min-width:640px){.niveis{grid-template-columns:1fr 1fr}}
.nivel{background:#fff;border:1px solid #DCD3C4;border-top:3px solid var(--gold);padding:20px}
.nivel-tag{font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.nivel-h{font-size:21px;font-weight:800;margin:0 0 10px}
.nivel p:last-child{margin:0;font-size:16px}

/* ---------------------------------------------------- assinatura: linha do PCP */
.strip{margin:34px 0 0;padding:0;background:var(--navy-deep);color:#fff;
  border:1px solid var(--navy-line);padding:18px 16px 16px}
.strip figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#7E8B9A;margin:0 0 14px}
.strip-grid{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.strip-lbl{flex:1 1 190px;min-width:170px}
.strip-task{display:block;font-size:15px;font-weight:700;margin-bottom:8px}
.strip-leg{display:block;font-family:var(--mono);font-size:10.5px;color:#7E8B9A;line-height:1.7}
.strip-days{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  grid-auto-rows:auto;gap:3px;flex:1 1 210px;min-width:196px;
}
.dh{font-family:var(--mono);font-size:10px;text-align:center;color:#7E8B9A;padding-bottom:3px}
.dh.wk{color:#59677A}
.c{display:block;height:15px;background:#1B3149;border:1px solid #24405C}
.c.wk{background:#16283C;border-color:#1E344B}
.c.p.on{background:#1F4E79;border-color:#2A6398}
.c.e.on{background:var(--gold);border-color:var(--gold-hi)}
.strip-out{flex:0 0 auto;text-align:right;min-width:130px;margin-left:auto}
.strip-pct{display:block;font-family:var(--mono);font-size:30px;font-weight:700;
  color:#E05B4B;line-height:1}
.strip-causa{display:block;font-family:var(--mono);font-size:11.5px;color:#E0A98F;margin-top:5px}

/* ---------------------------------------------------- listas */
.feat{list-style:none;padding:0;margin:20px 0 28px}
.feat li{position:relative;padding:9px 0 9px 26px;border-top:1px solid #D9D0C1;font-size:16.5px}
.feat li:last-child{border-bottom:1px solid #D9D0C1}
.feat li::before{content:"";position:absolute;left:2px;top:19px;width:9px;height:9px;
  background:var(--gold);transform:rotate(45deg)}

.nao{list-style:none;padding:0;margin:20px 0 0}
.nao li{position:relative;padding:11px 0 11px 28px;border-top:1px solid #D9D0C1;font-size:16.5px}
.nao li:last-child{border-bottom:1px solid #D9D0C1}
.nao li::before{content:"\00d7";position:absolute;left:4px;top:9px;
  font-family:var(--mono);font-size:17px;color:#B04A3C;font-weight:700}

/* ---------------------------------------------------- prints */
.shot{margin:26px 0 0;padding:0}
.shot img{
  width:100%;border:1px solid #C9BFAE;background:#fff;cursor:zoom-in;
  box-shadow:0 10px 28px rgba(18,38,58,.14);
}
.shot figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  color:var(--muted);margin-top:10px}

/* ---------------------------------------------------- antes/depois */
.antes,.depois{border:1px solid var(--navy-line);padding:18px;margin:0 0 14px;background:#0F2033}
.depois{border-color:var(--gold);background:#132A40}
.antes-tag,.depois-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;margin:0 0 10px;color:#7E8B9A}
.depois-tag{color:var(--gold-hi)}
.fala{margin:0;font-size:17px;line-height:1.6;color:#DCE3EB}

/* ---------------------------------------------------- prova */
.board{
  font-family:var(--mono);font-size:14.5px;line-height:1.66;
  border-left:3px solid var(--gold);padding-left:18px;margin-top:26px;color:var(--muted);
}

/* ---------------------------------------------------- stack */
.stack{list-style:none;padding:0;margin:22px 0 26px}
.stack li{display:flex;gap:16px;padding:16px 0;border-top:1px solid #D9D0C1}
.stack li:last-child{border-bottom:1px solid #D9D0C1}
.st-n{font-family:var(--mono);font-size:12px;color:var(--gold);font-weight:700;
  flex:0 0 auto;padding-top:4px}
.st-h{font-weight:700;margin:0 0 3px;font-size:17px}
.stack p:last-child{margin:0;font-size:15.5px;color:var(--muted)}

.entrega{font-size:16px;color:var(--muted)}

.req{border:1px solid var(--gold);background:#FBF7F0;padding:18px;margin-top:24px}
.req-h{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin:0 0 10px}
.req p{font-size:15.5px;margin:0 0 10px}
.req p:last-child{margin:0}

/* ---------------------------------------------------- CTA */
.btn{
  display:block;background:var(--gold);color:#fff;text-align:center;
  font-family:var(--sans);font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:800;padding:19px 18px;text-decoration:none;
  border:2px solid var(--gold);border-radius:2px;
  transition:background .13s ease,border-color .13s ease;
}
.btn:hover{background:var(--gold-hi);border-color:var(--gold-hi)}
.btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.btn-lg{font-size:15px;padding:21px 18px}

.cta-band{background:var(--navy-deep);padding:40px 0;border-top:3px solid var(--gold)}
.cta-kick{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#8C99A8;text-align:center;margin:0 0 16px}

/* ---------------------------------------------------- oferta */
.oferta{background:var(--navy);color:#fff;padding:60px 0;border-top:3px solid var(--gold)}
.oferta h2{color:#fff}
.pack{list-style:none;padding:0;margin:22px 0 8px}
.pack li{position:relative;padding:11px 0 11px 26px;border-top:1px solid var(--navy-line);
  font-size:16.5px;color:#DCE3EB}
.pack li:last-child{border-bottom:1px solid var(--navy-line)}
.pack li::before{content:"";position:absolute;left:2px;top:21px;width:9px;height:9px;
  background:var(--gold);transform:rotate(45deg)}

.preco{text-align:center;margin:30px 0 26px}
.de{font-family:var(--mono);font-size:16px;color:#8C99A8;margin:0 0 2px}
.por{font-size:clamp(50px,13vw,72px);font-weight:800;color:var(--gold-hi);
  line-height:1;letter-spacing:-.03em;margin:0 0 8px}
.parc{font-family:var(--mono);font-size:13px;color:#A9B4C1;margin:0}
.seguro{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  text-align:center;color:#8C99A8;margin:14px 0 0}

.gar{border:1px solid var(--gold);padding:20px;margin-top:28px}
.gar-h{font-weight:800;font-size:18px;margin:0 0 8px;color:#fff}
.gar p:last-child{margin:0;font-size:15.5px}

/* ---------------------------------------------------- duas colunas */
.duas{display:grid;gap:16px;margin-top:22px}
@media(min-width:640px){.duas{grid-template-columns:1fr 1fr}}
.col-sim,.col-nao{background:#fff;border:1px solid #DCD3C4;padding:18px}
.col-sim{border-top:3px solid var(--gold)}
.col-nao{border-top:3px solid #B04A3C}
.col-h{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;margin:0 0 12px;color:var(--muted)}
.duas ul{list-style:none;padding:0;margin:0}
.duas li{font-size:15.5px;line-height:1.5;padding:8px 0;border-top:1px solid #EDE7DC}
.duas li:first-child{border-top:0;padding-top:0}

/* ---------------------------------------------------- FAQ */
details{border-top:1px solid #D9D0C1;padding:0}
details:last-of-type{border-bottom:1px solid #D9D0C1}
summary{
  cursor:pointer;list-style:none;padding:16px 34px 16px 0;position:relative;
  font-weight:650;font-size:16.5px;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"+";position:absolute;right:4px;top:14px;
  font-family:var(--mono);font-size:20px;color:var(--gold);font-weight:400;
}
details[open] summary::after{content:"\2212"}
details p{font-size:16px;color:var(--muted);margin:0 0 16px;padding-right:10px}
summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------------------------------------------------- fechamento */
.fim{background:var(--navy-deep);color:#fff;padding:60px 0 74px;border-top:3px solid var(--gold)}
.fim h2{color:#fff;max-width:20ch}
.fim > .wrap > p{color:#A9B4C1;font-family:var(--mono);font-size:13.5px}
.preco-sm .por{font-size:clamp(42px,11vw,58px)}

.foot{background:#08131E;color:#66727F;padding:34px 0 calc(34px + env(safe-area-inset-bottom));
  text-align:center}
.foot p{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin:0}
.foot-sm{margin-top:8px;letter-spacing:.04em;text-transform:none;font-size:11px;color:#4E5A67}

/* ---------------------------------------------------- barra fixa */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--navy-deep);border-top:2px solid var(--gold);
  padding:10px 0 calc(10px + env(safe-area-inset-bottom));
  transform:translateY(105%);transition:transform .24s ease;
}
.sticky[data-on="1"]{transform:translateY(0)}
.sticky-in{max-width:var(--w);margin:0 auto;padding:0 22px;
  display:flex;align-items:center;justify-content:space-between;gap:14px}
.sticky-txt{line-height:1.28;min-width:0}
.sticky-a{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#8C99A8}
.sticky-b{display:block;font-size:16px;font-weight:800;color:#fff}
.sticky-b i{font-style:normal;font-weight:400;font-size:12px;color:#A9B4C1}
.btn-sm{padding:13px 20px;font-size:12.5px;white-space:nowrap;flex:0 0 auto}

/* ---------------------------------------------------- lightbox */
.lb{position:fixed;inset:0;z-index:90;background:rgba(8,19,30,.94);
  display:flex;align-items:center;justify-content:center;padding:16px}
.lb[hidden]{display:none}
.lb img{max-width:100%;max-height:92vh;object-fit:contain;border:1px solid #24405C}
.lb-x{position:absolute;top:10px;right:14px;background:none;border:0;color:#fff;
  font-size:38px;line-height:1;cursor:pointer;padding:6px 10px}
.lb-x:focus-visible{outline:2px solid var(--gold)}

/* ---------------------------------------------------- reveal */
.reveal{opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s ease}
.reveal.on{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .reveal{opacity:1;transform:none}
}