/* =============================================================
   Heynds — folha de estilo das páginas de venda (Luciene Viana)
   Base: design/DESIGN.md · tokens em design/variables.css
   Tema claro · acento único Ember Orange · superfícies planas
   ============================================================= */

:root{
  /* Cores */
  --color-ember-orange:#f53900;
  --color-peach-wash:#ffe0d6;
  --color-snow-canvas:#fffafa;
  --color-ink-black:#040101;
  --color-fog-gray:#827e7e;
  --color-smoke-gray:#4d4b4b;
  --color-ash-border:#e5e5e5;
  --color-pebble-gray:#c0bcbc;

  /* Tipografia */
  --font-geist:'Geist',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --text-caption:12px;   --leading-caption:1.4;
  --text-body-sm:14px;   --leading-body-sm:1.4;
  --text-body:16px;      --leading-body:1.4;
  --text-subheading:20px;--leading-subheading:1.33;
  --text-heading-sm:24px;--leading-heading-sm:1.25;
  --text-heading:32px;   --leading-heading:1.25;
  --text-heading-lg:40px;--leading-heading-lg:1.11;
  --text-display:64px;   --leading-display:1;
  --font-weight-regular:400;
  --font-weight-medium:500;
  --font-weight-semibold:600;
  --font-weight-bold:700;

  /* Espaçamento */
  --spacing-8:8px;    --spacing-16:16px;  --spacing-24:24px;
  --spacing-32:32px;  --spacing-40:40px;  --spacing-48:48px;
  --spacing-64:64px;  --spacing-80:80px;  --spacing-112:112px;
  --spacing-128:128px;

  /* Layout */
  --page-max-width:1200px;
  --section-gap:80px;
  --card-padding:40px;
  --element-gap:24px;

  /* Raios */
  --radius-buttons:4px;
  --radius-cards:8px;
  --radius-panels:12px;
  --radius-full:9999px;

  /* Sombra */
  --shadow-subtle:rgba(0,0,0,.05) 0px 1px 2px 0px;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--color-snow-canvas);
  color:var(--color-ink-black);
  font-family:var(--font-geist);
  font-size:var(--text-body);
  line-height:var(--leading-body);
  font-weight:var(--font-weight-regular);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
p{margin:0 0 var(--spacing-16)}
a{color:inherit}

h1,h2,h3{margin:0;font-weight:var(--font-weight-semibold);letter-spacing:-.015em}
h1{font-size:clamp(40px,7vw,var(--text-display));line-height:var(--leading-display)}
h2{font-size:clamp(28px,4.4vw,var(--text-heading-lg));line-height:var(--leading-heading-lg)}
h3{font-size:var(--text-subheading);line-height:var(--leading-subheading);font-weight:var(--font-weight-medium)}

.wrap{max-width:var(--page-max-width);margin:0 auto;padding:0 var(--spacing-24)}
section{padding:clamp(56px,8vw,var(--spacing-112)) 0}
section + section{border-top:1px solid var(--color-ash-border)}

/* ---------- Tipos de texto ---------- */
.lead{
  font-size:var(--text-body);line-height:var(--leading-body);
  color:var(--color-ink-black);max-width:640px;
}
.muted{color:var(--color-fog-gray)}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
.accent{color:var(--color-ember-orange)}

/* Pílula de eyebrow */
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--spacing-8);
  background:var(--color-peach-wash);color:var(--color-ember-orange);
  font-size:var(--text-body-sm);font-weight:var(--font-weight-medium);
  line-height:var(--leading-body-sm);
  border-radius:var(--radius-full);
  padding:var(--spacing-8) var(--spacing-16);
  margin:0 0 var(--spacing-24);
}
.eyebrow::before{content:"✦";font-size:12px;line-height:1}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-8);
  background:var(--color-ember-orange);color:var(--color-snow-canvas);
  font-family:inherit;font-size:var(--text-body);font-weight:var(--font-weight-medium);
  line-height:1.2;text-decoration:none;
  padding:var(--spacing-16) var(--spacing-24);
  border:1px solid var(--color-ember-orange);
  border-radius:var(--radius-buttons);
  min-height:52px;text-align:center;
  transition:opacity .18s ease;
}
.btn::after{content:"→";font-size:1em;line-height:1}
.btn:hover{opacity:.88}
.btn:focus-visible{outline:2px solid var(--color-ember-orange);outline-offset:3px}
.btn-ghost{background:transparent;color:var(--color-ember-orange)}
.btn-ghost::after{content:none}
.btn-note{
  display:block;margin-top:var(--spacing-16);
  font-size:var(--text-body-sm);line-height:var(--leading-body-sm);
  color:var(--color-fog-gray);
}
.cta-block{margin-top:var(--spacing-32)}

/* ---------- Topo ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  background:var(--color-snow-canvas);
  border-bottom:1px solid var(--color-ash-border);
}
.topbar .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-16);
  padding-top:var(--spacing-16);padding-bottom:var(--spacing-16);
}
.brand{font-size:var(--text-body);font-weight:var(--font-weight-semibold);letter-spacing:-.01em}
.brand span{color:var(--color-ember-orange)}
.topbar .btn{padding:10px var(--spacing-16);min-height:40px;font-size:var(--text-body-sm)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;border-top:0}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-conic-gradient(from 0deg at 50% -10%,
      var(--color-peach-wash) 0deg 0.55deg, transparent 0.55deg 5deg);
  opacity:.55;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 0%,#000,transparent 72%);
          mask-image:radial-gradient(70% 60% at 50% 0%,#000,transparent 72%);
}
.hero .wrap{position:relative}
.hero-stack{max-width:780px;margin:0 auto;text-align:center}
.hero-stack h1 .line{display:block}
.hero-stack .lead{margin:var(--spacing-24) auto 0}
.hero-actions{
  display:flex;flex-wrap:wrap;gap:var(--spacing-16);
  justify-content:center;margin-top:var(--spacing-32);
}
.badges{
  display:flex;flex-wrap:wrap;gap:var(--spacing-8);
  justify-content:center;margin:var(--spacing-32) 0 0;padding:0;list-style:none;
}
.badges li{
  font-size:var(--text-body-sm);color:var(--color-fog-gray);
  border:1px solid var(--color-ash-border);border-radius:var(--radius-full);
  padding:var(--spacing-8) var(--spacing-16);background:var(--color-snow-canvas);
}

/* Moldura de vídeo */
.frame{
  margin:var(--spacing-48) auto 0;max-width:960px;
  border:1px solid var(--color-ash-border);border-radius:var(--radius-cards);
  box-shadow:var(--shadow-subtle);overflow:hidden;background:var(--color-snow-canvas);
}
.frame iframe{display:block;width:100%;aspect-ratio:16/9;border:0}

/* ---------- Grades e cartões ---------- */
.grid{display:grid;gap:var(--spacing-24);grid-template-columns:1fr;margin-top:var(--spacing-48)}
@media(min-width:680px){.grid.c2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){
  .grid.c3{grid-template-columns:repeat(3,1fr)}
  .grid.c4{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1040px){.grid.c4{grid-template-columns:repeat(4,1fr)}}

.card{
  background:var(--color-snow-canvas);
  border:1px solid var(--color-ash-border);
  border-radius:var(--radius-cards);
  padding:var(--spacing-32);
}
.card h3{margin-bottom:var(--spacing-8);color:var(--color-ember-orange)}
.card p{margin:0;color:var(--color-ink-black);font-size:var(--text-body)}
.num{
  display:inline-block;margin-bottom:var(--spacing-16);
  font-size:var(--text-caption);font-weight:var(--font-weight-medium);
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--color-ember-orange);background:var(--color-peach-wash);
  border-radius:var(--radius-full);padding:6px var(--spacing-16);
}

/* ---------- Professora ---------- */
.mentor{
  display:grid;gap:var(--spacing-48);grid-template-columns:1fr;align-items:center;
}
@media(min-width:860px){.mentor{grid-template-columns:.75fr 1.25fr}}
.mentor-photo{
  border:1px solid var(--color-ash-border);border-radius:var(--radius-cards);
  overflow:hidden;box-shadow:var(--shadow-subtle);
}
.mentor-photo img{width:100%;height:auto;object-fit:cover}

/* ---------- Oferta ---------- */
.offer{
  max-width:720px;margin:var(--spacing-48) auto 0;text-align:center;
  border:1px solid var(--color-ash-border);border-radius:var(--radius-panels);
  padding:var(--card-padding);box-shadow:var(--shadow-subtle);
}
.old{color:var(--color-fog-gray);font-size:var(--text-body-sm);margin:0}
.old s{opacity:.85}
.price{
  font-size:clamp(28px,7vw,var(--text-display));line-height:var(--leading-display);
  text-wrap:balance;
  font-weight:var(--font-weight-bold);color:var(--color-ember-orange);
  margin:var(--spacing-8) 0 0;letter-spacing:-.02em;
}
.price small{
  display:block;margin-top:var(--spacing-16);
  font-size:var(--text-body);font-weight:var(--font-weight-regular);
  color:var(--color-ink-black);letter-spacing:0;
}
.offer ul{
  list-style:none;margin:var(--spacing-32) 0;padding:0;
  text-align:left;display:grid;gap:var(--spacing-16);
}
.offer li{position:relative;padding-left:var(--spacing-32);font-size:var(--text-body)}
.offer li::before{
  content:"";position:absolute;left:0;top:.45em;
  width:10px;height:10px;border-radius:var(--radius-full);
  background:var(--color-ember-orange);
}
@media(max-width:600px){
  .offer{padding:var(--spacing-24)}
  .guarantee{padding:var(--spacing-24)}
}
.guarantee{
  max-width:720px;margin:var(--spacing-24) auto 0;text-align:center;
  border:1px solid var(--color-ash-border);border-radius:var(--radius-cards);
  padding:var(--spacing-32);
}
.guarantee h3{color:var(--color-ember-orange);margin-bottom:var(--spacing-8)}
.guarantee p{margin:0;color:var(--color-ink-black)}
.fineprint{
  margin:var(--spacing-24) auto 0;max-width:640px;text-align:center;
  font-size:var(--text-body-sm);color:var(--color-fog-gray);
}

/* ---------- É para você se ---------- */
.fit{display:grid;gap:var(--spacing-24);grid-template-columns:1fr;margin-top:var(--spacing-48)}
@media(min-width:800px){.fit{grid-template-columns:1fr 1fr}}
.fit h3{color:var(--color-ink-black);font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-24)}
.fit ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--spacing-16)}
.fit li{padding-left:var(--spacing-32);position:relative;font-size:var(--text-body)}
.fit .yes li::before{content:"✓";position:absolute;left:0;color:var(--color-ember-orange);font-weight:var(--font-weight-semibold)}
.fit .no li::before{content:"—";position:absolute;left:0;color:var(--color-fog-gray);font-weight:var(--font-weight-semibold)}
.fit .no li{color:var(--color-smoke-gray)}

/* ---------- Depoimentos ---------- */
.carousel{position:relative;margin-top:var(--spacing-48)}
.viewport{
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);
}
.viewport::-webkit-scrollbar{display:none}
.viewport.dragging{cursor:grabbing}
.prints{display:flex;align-items:flex-start;gap:var(--spacing-24);padding:4px 0 6px;width:max-content}
.print{
  flex:0 0 256px;margin:0;
  border:1px solid var(--color-ash-border);border-radius:var(--radius-cards);
  padding:var(--spacing-8) var(--spacing-8) 0;
  box-shadow:var(--shadow-subtle);background:var(--color-snow-canvas);
}
@media(min-width:700px){.print{flex-basis:290px}}
.print img{width:100%;height:auto;border-radius:var(--radius-md,4px)}
.print figcaption{
  padding:var(--spacing-16) var(--spacing-8);
  font-size:var(--text-body-sm);color:var(--color-fog-gray);
  border-top:1px solid var(--color-ash-border);margin-top:var(--spacing-8);
}
.car-nav{display:flex;justify-content:center;gap:var(--spacing-16);margin-top:var(--spacing-24)}
.car-nav button{
  width:44px;height:44px;border-radius:var(--radius-full);cursor:pointer;
  background:transparent;border:1px solid var(--color-ember-orange);
  color:var(--color-ember-orange);font-size:var(--text-body);line-height:1;
  display:grid;place-items:center;font-family:inherit;
  transition:background .18s ease;
}
.car-nav button:hover{background:var(--color-peach-wash)}
.car-nav button:focus-visible{outline:2px solid var(--color-ember-orange);outline-offset:3px}
.disclaimer{
  margin-top:var(--spacing-32);text-align:center;
  font-size:var(--text-body-sm);color:var(--color-fog-gray);
  max-width:70ch;margin-left:auto;margin-right:auto;
}

/* Vídeos de depoimento (MP) */
.videos{display:grid;gap:var(--spacing-24);grid-template-columns:1fr;margin-top:var(--spacing-48)}
@media(min-width:720px){.videos{grid-template-columns:repeat(2,1fr)}}
.videos .frame{margin:0;max-width:none}

/* ---------- FAQ ---------- */
.faq{max-width:860px;margin:var(--spacing-48) auto 0}
details{border-bottom:1px solid var(--color-ash-border)}
details summary{
  cursor:pointer;list-style:none;position:relative;
  padding:var(--spacing-24) var(--spacing-48) var(--spacing-24) 0;
  font-size:var(--text-subheading);font-weight:var(--font-weight-medium);
  line-height:var(--leading-subheading);color:var(--color-ink-black);
}
details summary::-webkit-details-marker{display:none}
details summary::after{
  content:"⌄";position:absolute;right:var(--spacing-8);top:var(--spacing-24);
  color:var(--color-fog-gray);font-size:var(--text-subheading);line-height:1;
  transition:transform .2s ease;
}
details[open] summary::after{transform:rotate(180deg)}
details .answer{
  padding:0 var(--spacing-8) var(--spacing-24) 0;
  color:var(--color-smoke-gray);font-size:var(--text-body);
}

/* ---------- Rodapé ---------- */
footer{
  border-top:1px solid var(--color-ash-border);
  padding:var(--spacing-48) 0;text-align:center;
  font-size:var(--text-body-sm);color:var(--color-fog-gray);
}
footer a{color:var(--color-ember-orange);text-decoration:none}

/* ---------- Barra fixa no celular ---------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;
  padding:var(--spacing-8) var(--spacing-16) calc(var(--spacing-8) + env(safe-area-inset-bottom));
  background:var(--color-snow-canvas);border-top:1px solid var(--color-ash-border);
}
.sticky-cta .btn{width:100%}
@media(max-width:860px){
  .sticky-cta{display:block}
  body{padding-bottom:88px}
  .topbar .btn{display:none}
}

/* ---------- Animação discreta ---------- */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .btn{transition:none}
  html{scroll-behavior:auto}
}