/* ============================================================
   Masterclass "Como se Diferenciar na Construção Civil"
   Sistema visual herdado da LP das Planilhas de Planejamento:
   azul de obra à noite + ouro Grifo, sans de sistema + mono.

   ARQUIVO IDÊNTICO nas duas pastas (mecanismo e jornada).
   Se mudar aqui, copie para a outra — as duas precisam ser
   visualmente iguais para o teste A/B isolar só a copy.
   ============================================================ */

:root{
  --navy:#12263A;
  --navy-deep:#0C1A28;
  --navy-line:#20374E;
  --gold:#B58A3E;
  --gold-hi:#C89A4A;
  --cream:#F1ECE3;
  --cream-2:#E7E0D4;
  --ink:#16202B;
  --muted:#5B6672;
  --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}
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 de grade — a planilha de orçamento 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:38ch;margin-bottom:24px}
.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}
.hero-tags{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 26px;padding:0;list-style:none}
.hero-tags li{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:#C7D1DC;border:1px solid var(--navy-line);padding:7px 13px}

/* ---------------------------------------------------- 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}

/* ------------------------------- assinatura: linha de orçamento (mecanismo) */
.ledger{margin:34px 0 0;background:var(--navy-deep);color:#fff;
        border:1px solid var(--navy-line);padding:18px 16px 16px}
.ledger figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#7E8B9A;margin:0 0 14px}
.lg-row{display:grid;grid-template-columns:1fr;gap:3px;
        border-top:1px dotted var(--navy-line);padding:13px 0}
.lg-row:first-of-type{border-top:1px solid var(--navy-line)}
.lg-row:last-child{border-bottom:1px solid var(--navy-line)}
.lg-item{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
         text-transform:uppercase;color:#7E8B9A}
.lg-a{color:#8C99A8;font-size:15.5px}
.lg-a i{font-style:normal;text-decoration:line-through;text-decoration-thickness:1px}
.lg-b{color:var(--gold-hi);font-weight:700;font-size:15.5px}
.lg-a::before{content:"mercado — ";color:#59677A;font-family:var(--mono);font-size:11px}
.lg-b::before{content:"grifo — ";color:#7E8B9A;font-family:var(--mono);font-size:11px;font-weight:400}
@media(min-width:600px){
  .lg-row{grid-template-columns:1.05fr 1fr 1.15fr;gap:14px;align-items:baseline}
  .lg-a::before,.lg-b::before{content:none}
}

/* ---------------------------------------------------- marcos / capítulos */
.marks{list-style:none;padding:0;margin:24px 0 0}
.marks li{display:flex;gap:16px;padding:18px 0;border-top:1px solid #D9D0C1}
.marks li:last-child{border-bottom:1px solid #D9D0C1}
.mk-y{font-family:var(--mono);font-size:12px;color:var(--gold);font-weight:700;
      flex:0 0 46px;padding-top:4px}
.mk-h{font-weight:800;margin:0 0 5px;font-size:18px}
.marks p:last-child{margin:0;font-size:16px;color:var(--muted)}
.band-deep .marks li{border-color:var(--navy-line)}
.band-deep .marks p:last-child{color:#CBD4DE}
.band-deep .mk-y{color:var(--gold-hi)}
.band-deep .mk-h{color:#fff}

/* ---------------------------------------------------- números de autoridade */
.nums{display:grid;grid-template-columns:1fr;gap:0;margin:0}
@media(min-width:640px){.nums{grid-template-columns:repeat(3,1fr);gap:18px}}
.nums div{text-align:center;padding:20px 0;border-top:1px solid var(--navy-line)}
@media(min-width:640px){.nums div{border-top:0}}
.num-v{display:block;font-size:clamp(32px,8vw,42px);font-weight:800;
       letter-spacing:-.02em;line-height:1;color:#fff}
.num-l{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
       text-transform:uppercase;color:var(--gold-hi);margin-top:8px}
.nums-foot{text-align:center;font-size:15.5px;margin:26px 0 0;
           padding-top:20px;border-top:1px solid var(--navy-line)}

/* ---------------------------------------------------- citação */
.cit{font-size:21px;font-weight:650;line-height:1.42;margin:34px 0 8px;color:#fff}
.cit-by{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
        text-transform:uppercase;color:var(--gold-hi);margin:0}

/* ---------------------------------------------------- listas */
.feat{list-style:none;padding:0;margin:20px 0 28px}
.feat li{position:relative;padding:11px 0 11px 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:21px;width:9px;height:9px;
                 background:var(--gold);transform:rotate(45deg)}

.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-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}
.oferta p{color:#CBD4DE}
.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}
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:22ch}
.fim > .wrap > p{color:#A9B4C1}
.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 a{color:#66727F}
.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}

/* ---------------------------------------------------- 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}
}