/* =========================================================
   A CASA QUE PRODUZ — sales page
   Tokens — dark editorial: one deep background family,
   warm paper for text/cards, one accent.
========================================================= */
:root{
  --bg:#12160E;
  --bg-alt:#181D12;
  --paper:#F3EAD6;
  --paper-deep:#E7DAB8;
  --cream:#FBF8F0;
  --ink:#20261a;
  --ink-soft:#4b5240;
  --text-soft:#C9C0A2;
  --text-mute:#93917C;
  --accent:#C1602F;
  --accent-deep:#9C4A22;
  --line:rgba(243,234,214,.14);
  --line-card:rgba(32,38,26,.12);
  --shadow: 0 16px 32px -20px rgba(0,0,0,.6);
  --maxw: 1160px;
  --radius: 10px;
  font-size: 16px;
}

*,*::before,*::after{box-sizing:border-box;}
html{background:var(--bg); scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--paper);
  font-family:'Work Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto;}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;color:var(--paper);margin:0;text-wrap:balance;}
p{margin:0;}
a{color:inherit;}
ul{margin:0;padding:0;list-style:none;}
.wrap{max-width:700px;margin:0 auto;padding:0 1.4rem;}
.wrap--wide{max-width:var(--maxw);}
.wrap--narrow{max-width:600px;}
.section{padding:2.8rem 0;position:relative;}

@media (min-width:900px){
  .section{padding:2rem 0;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

/* =========================================================
   Buttons
========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  font-family:'Work Sans',sans-serif;
  font-weight:700;
  letter-spacing:.02em;
  text-decoration:none;
  border-radius:999px;
  border:none;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn--primary{
  background:var(--accent);
  color:var(--cream);
  box-shadow:0 14px 26px -12px rgba(156,74,34,.6);
}
.btn--primary:hover{background:var(--accent-deep);}
.btn--primary:active{transform:scale(.98);}
.btn--big{
  padding:.95rem 2rem;
  font-size:1rem;
  width:100%;
  max-width:420px;
}
.btn--sm{
  padding:.6rem 1.1rem;
  font-size:.82rem;
  white-space:nowrap;
  flex-shrink:0;
}

/* =========================================================
   Brandmark
========================================================= */
.brandmark{
  position:fixed;
  top:0; left:0; right:0;
  z-index:40;
  display:flex;
  justify-content:center;
  padding:.85rem 1rem;
  pointer-events:none;
  opacity:0;
  transition:opacity .35s ease;
}
.brandmark.is-visible{opacity:1;}
.brandmark span{
  font-family:'Space Mono', monospace;
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--cream);
  background:rgba(10,12,7,.4);
  backdrop-filter:blur(6px);
  padding:.4rem .9rem;
  border-radius:999px;
}

/* =========================================================
   HERO
========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--bg);
}
.hero-media{position:absolute; inset:0; width:100%; height:100%;}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:center 30%;}
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,17,10,.08) 0%, rgba(14,17,10,.36) 38%, rgba(12,15,9,.82) 58%, rgba(10,13,8,.95) 100%);
}
.hero-content{
  position:relative;
  z-index:2;
  width:100%;
  padding:0 1.15rem 1.5rem;
  color:var(--cream);
  max-width:640px;
}
.eyebrow{
  font-family:'Space Mono',monospace;
  font-size:.68rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#dba05b;
  margin:0 0 .5rem;
}
.eyebrow--onhero{color:#e7c98a;}
.hero-headline{
  font-size:clamp(1.02rem, 4.8vw, 1.9rem);
  line-height:1.2;
  font-weight:600;
  margin:0 0 .55rem;
  color:var(--cream);
}
.hero-sub{
  font-size:.86rem;
  line-height:1.42;
  color:#e5ddc6;
  margin:0 0 .9rem;
  max-width:46ch;
}
.hero-price{
  margin:.6rem 0 0;
  font-size:.9rem;
  color:var(--cream);
}
.hero-price strong{color:#f0c988; font-size:1.12em;}
.hero-fine{
  margin:.22rem 0 0;
  font-size:.7rem;
  color:#c7bfa2;
  letter-spacing:.02em;
}

@media (min-width:900px){
  /* editorial two-column hero: dark copy column + full photo column,
     no text-over-image overlay. */
  .hero{
    display:grid;
    grid-template-columns:43% 57%;
    min-height:0;
    max-height:none;
    height:680px;
    align-items:stretch;
    background:var(--bg);
  }
  .brandmark{display:none;} /* avoid a second "A CASA QUE PRODUZ" mark on top of the hero eyebrow */
  .hero-media{
    position:relative;
    inset:auto;
    grid-column:2;
    order:2;
    overflow:hidden;
  }
  .hero-media::after{
    /* one soft seam instead of a heavy overlay across the whole photo */
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, var(--bg) 0%, rgba(18,22,14,0) 9%);
    pointer-events:none;
  }
  .hero-media img{object-fit:cover; object-position:34% 26%;}
  .hero-scrim{display:none;}
  .hero-content{
    grid-column:1;
    order:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    height:100%;
    max-width:none;
    padding:0 3rem;
    background:var(--bg);
  }
  .eyebrow--onhero{color:#dba05b;}
  .hero-headline{
    font-size:2.2rem;
    line-height:1.28;
    max-width:640px;
    margin:0 0 1rem;
  }
  .hero-sub{font-size:1rem; line-height:1.5; max-width:500px; margin:0 0 1.3rem;}
  .hero-price{margin-top:.85rem;}
  .btn--big{width:auto;}
}

@media (min-width:1600px){
  .hero{height:740px;}
  .hero-headline{font-size:2.35rem;}
}

/* =========================================================
   Reveal on scroll
========================================================= */
.reveal.js-armed{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.js-armed.is-visible{opacity:1; transform:translateY(0);}

/* =========================================================
   Section titles / generic type
========================================================= */
.section-title{
  font-size:clamp(1.4rem, 3.6vw, 1.9rem);
  line-height:1.16;
  font-weight:600;
  margin:0 0 .7rem;
}
.section-title--brand{
  text-align:center;
  letter-spacing:.02em;
  font-size:clamp(1.15rem, 2.4vw, 1.5rem);
}
.lede{
  font-size:1.02rem;
  line-height:1.55;
  color:var(--text-soft);
  max-width:56ch;
}
.lede--center{margin:0 auto; text-align:center;}
.kicker-label{
  font-family:'Space Mono',monospace;
  font-size:.68rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 .5rem;
}

/* =========================================================
   PROBLEMA
========================================================= */
.problem{background:var(--bg); padding-bottom:1.6rem;}
.problem .lede{margin:.5rem 0 1.5rem;}
.problem-collage{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:repeat(2,1fr);
  gap:.6rem;
  height:300px;
  margin-bottom:1.5rem;
}
.ph{margin:0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);}
.ph img{width:100%; height:100%; object-fit:cover;}
.ph--big{grid-row:1 / 3;}
@media (min-width:640px){
  .problem-collage{grid-template-columns:1.4fr 1fr; height:340px;}
}
@media (min-width:900px){
  .problem-collage{height:380px; gap:.8rem;}
}
.callout{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:clamp(1.15rem, 3vw, 1.45rem);
  line-height:1.3;
  color:var(--paper);
  border-left:3px solid var(--accent);
  padding-left:1rem;
}

/* =========================================================
   VIRADA
========================================================= */
.virada{background:var(--bg-alt); padding-top:1.6rem; padding-bottom:1.9rem;}
.virada-media{margin:0 0 1.8rem; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);}
.virada-media img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block;}
@media (min-width:1200px){
  .virada-media, .ctafinal-media{max-height:440px;}
  .virada-media img, .ctafinal-media img{height:440px; width:100%; aspect-ratio:auto;}
}
.virada .section-title{margin-bottom:1.1rem;}
.virada-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:.55rem;
  margin-bottom:1.4rem;
}
.virada-grid li{
  position:relative;
  padding-left:1.3rem;
  font-size:1rem;
  line-height:1.4;
  color:var(--paper);
  font-weight:500;
}
.virada-grid li::before{
  content:'';
  position:absolute; left:0; top:.5em;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--accent);
}
@media (min-width:640px){
  .virada-grid{grid-template-columns:1fr 1fr; gap:.5rem 1.6rem;}
}
.virada-close{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:1.15rem;
  color:var(--paper);
}
.virada-close strong{color:#f0c988;}

/* =========================================================
   MÉTODO — compact transition strip
========================================================= */
.metodo{background:var(--bg); text-align:center; padding:1.6rem 0;}
.metodo .kicker-label{text-align:center;}
.metodo-title{
  font-size:1.1rem;
  letter-spacing:.03em;
  margin:0 0 .9rem;
  color:var(--paper);
}
.stepper{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:center;
  gap:.35rem .55rem;
  max-width:720px;
  margin:0 auto;
}
.step{
  display:inline-flex;
  align-items:baseline;
  gap:.55rem;
  opacity:.4;
  transition:opacity .4s ease, color .3s ease;
}
.step.is-active{opacity:1;}
.step-n{display:none;}
.step-l{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:.98rem;
  letter-spacing:.03em;
  color:var(--paper);
}
.step.is-active .step-l{color:#f0c988;}
.step-arrow{
  color:var(--text-mute);
  font-size:.85rem;
}
.step:last-child .step-arrow{display:none;}

@media (min-width:820px){
  .step-l{font-size:1.05rem;}
}

/* =========================================================
   CHAPTERS — carousel
========================================================= */
.chapters{background:var(--bg-alt); padding-top:1.8rem; padding-bottom:1.8rem;}
.chapters .section-title{text-align:center; margin-bottom:1.4rem;}
.chapters-wrap{position:relative; max-width:var(--maxw); margin:0 auto;}
.chapters-track{
  display:flex;
  gap:.9rem;
  overflow-x:auto;
  padding:.2rem 1.4rem 1rem;
  scroll-snap-type:none; /* continuous autoplay + snap points fight each other */
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  cursor:grab;
  user-select:none;
}
.chapters-track.is-dragging{cursor:grabbing;}
.chapters-track::-webkit-scrollbar{display:none;}
.chap{
  flex:0 0 82%;
  max-width:340px;
  scroll-snap-align:start;
  background:var(--paper);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.chap img{width:100%; aspect-ratio:4/3; object-fit:cover; -webkit-user-drag:none;}
.chap-body{padding:.85rem .95rem 1rem;}
.chap-body h3{font-size:1.02rem; margin:0 0 .3rem; line-height:1.2; color:var(--ink);}
.chap-body p{font-size:.86rem; color:var(--ink-soft); line-height:1.35; margin:0;}

@media (min-width:900px){
  .chapters-track{padding:.2rem 3.4rem 1rem;}
  .chap{flex:0 0 clamp(230px, 25vw, 290px);}
}
.chap-arrow{
  display:none;
}
@media (min-width:900px){
  .chap-arrow{
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:42%;
    transform:translateY(-50%);
    width:2.6rem; height:2.6rem;
    border-radius:50%;
    border:1px solid var(--line);
    background:rgba(18,22,14,.7);
    backdrop-filter:blur(4px);
    color:var(--paper);
    cursor:pointer;
    z-index:3;
    transition:background-color .15s ease, border-color .15s ease;
  }
  .chap-arrow:hover{background:var(--accent); border-color:var(--accent);}
  .chap-arrow--prev{left:-4px;}
  .chap-arrow--next{right:-4px;}
  .chap-arrow svg{width:1.05rem; height:1.05rem;}
}

/* =========================================================
   ALERT / URGÊNCIA
========================================================= */
.alert{
  background:var(--bg-alt);
  color:var(--cream);
  text-align:center;
  padding:2.4rem 0;
}
.alert-headline{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:clamp(1.25rem, 3.6vw, 1.75rem);
  line-height:1.32;
  margin:0 auto 1.3rem;
  max-width:38ch;
  color:var(--cream);
}
.alert .btn{margin:0 auto;}

/* =========================================================
   BENTO
========================================================= */
.bento{background:var(--bg); padding-top:1.9rem; padding-bottom:1.9rem;}
.wrap--split{display:grid; gap:1.6rem;}
.bento-media{margin:0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);}
.bento-media img{width:100%; aspect-ratio:5/4; object-fit:cover;}
.bento-text p{font-size:.98rem; line-height:1.55; color:var(--text-soft); margin:0 0 .7rem;}
.bento-text .section-title{margin-bottom:.8rem;}
.quote{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-weight:600;
  font-size:1.12rem;
  color:var(--paper);
  border-left:3px solid var(--accent);
  padding-left:.9rem;
  margin-top:1rem !important;
}

@media (min-width:860px){
  .wrap--split{grid-template-columns:.85fr 1fr; align-items:center; gap:2.6rem; max-width:var(--maxw);}
}

/* =========================================================
   REFLEXÃO — standalone question band
========================================================= */
.reflect{
  background:var(--bg-alt);
  text-align:center;
  padding:2.2rem 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.reflect-q{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-weight:600;
  font-size:clamp(1.15rem, 3vw, 1.6rem);
  line-height:1.34;
  max-width:32ch;
  margin:0 auto;
  color:var(--paper);
}

/* =========================================================
   RESULTADOS
========================================================= */
.results{background:var(--bg); padding-top:1.9rem; padding-bottom:1.9rem;}
.results .section-title{text-align:center; max-width:34ch; margin:0 auto 1.4rem;}
.results-grid{display:grid; gap:.8rem; grid-template-columns:1fr 1fr;}
.result{background:var(--paper); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);}
.result img{width:100%; aspect-ratio:4/3; object-fit:cover;}
.result h3{font-size:.94rem; margin:.7rem .8rem .25rem; color:var(--ink); line-height:1.2;}
.result p{font-size:.8rem; color:var(--ink-soft); line-height:1.35; margin:0 .8rem .8rem;}
@media (min-width:900px){
  .results-grid{grid-template-columns:repeat(4,1fr); gap:1rem; max-width:var(--maxw); margin:0 auto;}
  .result h3{font-size:1rem;}
}

/* =========================================================
   BÔNUS
========================================================= */
.bonus{background:var(--bg-alt); padding-top:1.9rem; padding-bottom:1.9rem;}
.bonus .section-title{text-align:center; margin-bottom:1.4rem;}
.bonus-grid{display:grid; gap:.9rem; max-width:var(--maxw); margin:0 auto;}
.bonuscard{
  display:grid;
  grid-template-columns:1fr;
  background:var(--paper);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.bonuscard img{width:100%; aspect-ratio:16/10; object-fit:cover;}
.bonuscard-body{padding:1rem 1.1rem 1.15rem;}
.bonus-tag{
  display:inline-block;
  font-family:'Space Mono',monospace;
  font-size:.65rem;
  letter-spacing:.14em;
  color:var(--cream);
  background:var(--ink);
  padding:.28rem .65rem;
  border-radius:999px;
  margin-bottom:.55rem;
}
.bonuscard-body h3{font-size:1.08rem; margin:0 0 .35rem; color:var(--ink);}
.bonuscard-body p{font-size:.88rem; color:var(--ink-soft); line-height:1.42;}
@media (min-width:700px){
  .bonus-grid{grid-template-columns:1fr 1fr;}
  .bonuscard img{aspect-ratio:4/3;}
}

/* =========================================================
   OFERTA
========================================================= */
.oferta{
  background:var(--bg-alt);
  color:var(--cream);
  text-align:center;
  padding:2.2rem 0;
}
.oferta-card{
  max-width:520px;
  margin:0 auto;
  border:1px solid rgba(240,201,136,.25);
  border-radius:calc(var(--radius) + 4px);
  padding:1.8rem 1.6rem;
  background:rgba(243,234,214,.03);
}
.oferta-headline{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:clamp(1.35rem, 3.6vw, 1.85rem);
  line-height:1.22;
  max-width:30ch;
  margin:0 auto 1.3rem;
  color:var(--cream);
}
.oferta-itens{
  display:inline-flex;
  flex-direction:column;
  gap:.4rem;
  text-align:left;
  margin:0 auto 1.4rem;
}
.oferta-itens li{
  font-size:.96rem;
  display:flex;
  align-items:center;
  gap:.6rem;
}
.check{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.25rem; height:1.25rem;
  border-radius:50%;
  background:var(--accent);
  color:var(--cream);
  font-size:.72rem;
  font-weight:700;
  flex-shrink:0;
}
.price-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  margin-bottom:.3rem;
}
.price-old{
  font-size:.94rem;
  color:#b0a888;
  text-decoration:line-through;
  opacity:.85;
}
.price-new{
  font-family:'Fraunces',serif;
  font-weight:700;
  font-size:clamp(3.2rem, 11vw, 4.6rem);
  color:#f0c988;
  line-height:1;
}
.oferta-info{
  font-size:.84rem;
  color:#cfc7ac;
  margin-bottom:1.3rem;
}
.oferta .btn{margin:0 auto;}
.escassez{
  margin:1.2rem auto 0;
  padding-top:1rem;
  border-top:1px solid rgba(240,201,136,.2);
}
.escassez-tag{
  font-family:'Space Mono',monospace;
  font-size:.62rem;
  letter-spacing:.18em;
  color:var(--accent);
  margin-bottom:.3rem;
}
.escassez-price{font-weight:600; font-size:.92rem; margin-bottom:.2rem; color:var(--paper);}
.escassez-text{font-size:.78rem; color:#b7ae90; line-height:1.4;}

/* =========================================================
   FAQ
========================================================= */
.faq{background:var(--bg); padding-top:1.9rem; padding-bottom:1.9rem;}
.faq .section-title{text-align:center; margin-bottom:1.2rem;}
.accordion{border-top:1px solid var(--line);}
.acc-item{border-bottom:1px solid var(--line);}
.acc-trigger{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  background:none;
  border:none;
  cursor:pointer;
  padding:.85rem .1rem;
  font-family:'Work Sans',sans-serif;
  font-size:.98rem;
  font-weight:600;
  color:var(--paper);
  text-align:left;
}
.acc-icon{
  position:relative;
  width:1.1rem; height:1.1rem;
  flex-shrink:0;
}
.acc-icon::before,.acc-icon::after{
  content:'';
  position:absolute;
  background:var(--paper);
  transition:transform .25s ease;
}
.acc-icon::before{left:0; top:50%; width:100%; height:2px; transform:translateY(-50%);}
.acc-icon::after{top:0; left:50%; width:2px; height:100%; transform:translateX(-50%);}
.acc-trigger[aria-expanded="true"] .acc-icon::after{transform:translateX(-50%) rotate(90deg); opacity:0;}
.acc-panel{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
}
.acc-panel p{padding:0 .1rem .95rem; color:var(--text-soft); font-size:.92rem; line-height:1.5; max-width:56ch;}

/* =========================================================
   CTA FINAL
========================================================= */
.ctafinal{background:var(--bg-alt); text-align:center; padding-bottom:2rem;}
.ctafinal-media{margin:0 0 1.8rem; border-radius:0; box-shadow:none;}
.ctafinal-media img{width:100%; aspect-ratio:16/9; object-fit:cover; object-position:center 18%; display:block;}
.ctafinal .section-title{max-width:30ch; margin:0 auto .8rem;}
.ctafinal .lede{max-width:44ch; margin:0 auto 1.4rem; text-align:center;}
.ctafinal .btn{margin:0 auto;}
.ctafinal .hero-fine{margin-top:.8rem; color:var(--text-mute);}

/* =========================================================
   FOOTER
========================================================= */
.footer{
  text-align:center;
  padding:1.6rem 0 5.5rem;
  font-family:'Space Mono',monospace;
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-mute);
  background:var(--bg);
}

/* =========================================================
   STICKY MOBILE CTA
========================================================= */
.stickybar{
  position:fixed;
  left:.7rem; right:.7rem; bottom:.7rem;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  background:rgba(10,12,7,.94);
  backdrop-filter:blur(8px);
  color:var(--cream);
  border-radius:999px;
  padding:.55rem .6rem .55rem 1.1rem;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.6);
  transform:translateY(140%);
  transition:transform .3s ease;
}
.stickybar.is-visible{transform:translateY(0);}
.stickybar-text{font-size:.78rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

@media (min-width:900px){
  .stickybar{display:none;}
}

/* =========================================================
   Desktop width pass — 1366 / 1440 / 1920
   keep composed sections from thinning out at large widths
========================================================= */
@media (min-width:1440px){
  :root{--maxw:1200px;}
}