/* ============================================
   TOKENS
   ============================================ */
:root{
  --navy-deep:  #0E1F33;
  --navy-mid:   #16304D;
  --navy-line:  #2A4562;
  --steel:      #52657C;
  --concrete:   #ECEAE3;
  --concrete-2: #F6F5F1;
  --paper:      #FFFFFF;
  --ink:        #14202B;
  --ink-soft:   #4D5A66;
  --rust:       #C9502F;
  --rust-dark:  #A83F22;
  --amber:      #E0A526;

  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --container: 1140px;
  --radius: 2px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; letter-spacing:.01em; }

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

:focus-visible{
  outline:3px solid var(--amber);
  outline-offset:2px;
}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 28px;
}
.container--narrow{ max-width:760px; }

/* ============================================
   REVEAL ON SCROLL
   ============================================ */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ============================================
   TOPBAR
   ============================================ */
.topbar{
  background:var(--rust);
  color:#fff;
}
.topbar__inner{
  max-width:var(--container);
  margin:0 auto;
  padding:8px 28px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-align:center;
}

/* ============================================
   HEADER
   ============================================ */
.header{
  position:sticky; top:0; z-index:100;
  background:rgba(14,31,51,.96);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--navy-line);
}
.header__inner{
  max-width:var(--container);
  margin:0 auto;
  padding:14px 28px;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
}
.brand{ display:flex; align-items:center; gap:12px; color:#fff; }
.brand__logo{
  height:40px;
  width:auto;
  display:block;
}

.nav{ display:flex; align-items:center; gap:26px; }
.nav a{
  font-size:13px; color:#C7D0DA; font-weight:500;
  text-transform:uppercase; letter-spacing:.05em;
  transition:color .2s;
  white-space:nowrap;
}
.nav a:hover{ color:#fff; }
.nav__cta{
  background:var(--rust);
  color:#fff !important;
  padding:10px 18px;
  border-radius:var(--radius);
  font-family:var(--font-display);
  letter-spacing:.06em;
}
.nav__cta:hover{ background:var(--rust-dark); }

.nav-toggle{
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px;
  background:none; border:1px solid var(--navy-line);
  cursor:pointer;
}
.nav-toggle span{ height:2px; background:#fff; width:20px; margin:0 auto; }

/* ============================================
   BUTTONS
   ============================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:16px 30px;
  font-family:var(--font-display);
  font-size:14px; letter-spacing:.06em;
  border:2px solid transparent;
  border-radius:var(--radius);
  cursor:pointer;
  transition:transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn--accent{ background:var(--rust); color:#fff; }
.btn--accent:hover{ background:var(--rust-dark); transform:translateY(-2px); }
.btn--ghost{ border-color:#C7D0DA; color:#fff; }
.btn--ghost:hover{ border-color:#fff; }
.btn--block{ width:100%; }
.cta__row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:24px;
  margin-top:32px;
}
.cta__lema{
  max-width:220px;
  height:auto;
}
.btn--whatsapp{
  background:#25D366;
  color:#0E1F33;
  gap:10px;
  font-size:15px;
}
.btn--whatsapp:hover{ background:#1ebe5a; transform:translateY(-2px); }
.btn__icon{ width:20px; height:20px; flex:none; }

.alt-contact{ margin-top:52px; border-top:1px solid var(--navy-line); padding-top:28px; }
.alt-contact summary{
  cursor:pointer;
  font-family:var(--font-display);
  font-size:15px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#C7D0DA;
  list-style:none;
}
.alt-contact summary::-webkit-details-marker{ display:none; }
.alt-contact summary::after{
  content:"+";
  float:right;
  color:var(--rust);
  font-size:20px;
  line-height:1;
}
.alt-contact[open] summary::after{ content:"–"; }
.alt-contact .lede{ margin-top:20px; }

/* ============================================
   HERO
   ============================================ */
.hero{
  position:relative;
  background:var(--navy-deep);
  color:#fff;
  padding:96px 0 64px;
  overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% 94%,0 100%);
}
.hero__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(199,208,218,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(199,208,218,.06) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at 70% 30%, #000 10%, transparent 70%);
}
.hero__inner{
  position:relative;
  max-width:var(--container);
  margin:0 auto;
  padding:0 28px;
}
.eyebrow{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:.16em;
  color:var(--rust);
  margin:0 0 18px;
  text-transform:uppercase;
}
.eyebrow--light{ color:var(--amber); }
.eyebrow__bar{ width:26px; height:2px; background:currentColor; display:inline-block; }

.hero__title{
  font-size:clamp(34px, 6vw, 64px);
  line-height:1.06;
  font-weight:700;
  text-transform:uppercase;
  max-width:820px;
}
.hero__title .hl{ color:var(--rust); }
.hero__subtitle{
  margin:26px 0 36px;
  max-width:560px;
  font-size:17px;
  color:#C7D0DA;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:64px; }

.hero__stats{
  display:grid;
  grid-template-columns:repeat(3,auto);
  gap:36px;
  border-top:1px solid var(--navy-line);
  padding-top:32px;
  max-width:620px;
}
.stat{ display:flex; flex-direction:column; }
.stat__num{ font-family:var(--font-display); font-size:36px; color:var(--amber); }
.stat__label{ font-size:12.5px; color:#9FAEBD; margin-top:4px; text-transform:uppercase; letter-spacing:.04em; }
.hero__tag{
  margin-top:28px;
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:.12em;
  color:var(--amber);
  text-transform:uppercase;
}
.hero__lema{
  max-width:280px;
  height:auto;
  margin-bottom:18px;
}

/* ============================================
   SECTIONS — GENERIC
   ============================================ */
.section{ padding:88px 0; }
.section--dark{ background:var(--navy-deep); color:#fff; }
.section--muted{ background:var(--concrete-2); }
.section__title{
  font-size:clamp(26px, 3.4vw, 40px);
  line-height:1.18;
  font-weight:600;
  text-transform:uppercase;
  max-width:820px;
  margin-bottom:8px;
}
.section__title--light{ color:#fff; }
.section__title .hl{ color:var(--rust); }
.section--dark .hl{ color:var(--amber); }

.lede{ font-size:17px; color:var(--ink-soft); max-width:680px; margin:24px 0; }
.lede--light{ color:#C7D0DA; }

.statement{
  margin:44px 0 0;
  padding:32px 0 0;
  max-width:720px;
  border-top:2px solid var(--concrete);
  font-family:var(--font-display);
  font-size:clamp(20px, 2.6vw, 28px);
  font-style:normal;
  line-height:1.35;
  color:var(--navy-deep);
}
.statement .hl{ color:var(--rust); }

/* ============================================
   TRANSFORMATION — SIGNATURE DIAL
   ============================================ */
.section--transform{ background:var(--paper); }

.dial{ margin:48px 0 56px; }
.dial__track{
  position:relative;
  height:10px;
  background:var(--concrete);
  border-radius:6px;
  overflow:hidden;
}
.dial__fill{
  position:absolute; left:0; top:0; bottom:0;
  width:6%;
  background:linear-gradient(90deg, var(--steel), var(--rust));
  transition:width 1.1s cubic-bezier(.22,.9,.3,1);
  border-radius:6px;
}
.dial__marker{
  position:absolute; top:50%; left:6%;
  width:20px; height:20px;
  background:#fff;
  border:3px solid var(--rust);
  border-radius:50%;
  transform:translate(-50%,-50%);
  transition:left 1.1s cubic-bezier(.22,.9,.3,1);
  box-shadow:0 0 0 4px rgba(201,80,47,.15);
}
.dial__labels{
  display:flex; justify-content:space-between;
  margin-top:12px;
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:.1em;
  color:var(--steel);
}

.transform-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:28px;
  align-items:start;
}
.transform-col{
  padding:28px;
  border-radius:var(--radius);
}
.transform-col--before{ background:var(--concrete-2); border-left:4px solid var(--steel); }
.transform-col--after{ background:var(--navy-deep); color:#fff; border-left:4px solid var(--rust); }
.transform-col__title{
  font-size:14px; text-transform:uppercase; letter-spacing:.06em;
  margin-bottom:18px; color:var(--ink-soft);
}
.transform-col--after .transform-col__title{ color:var(--amber); }
.transform-list li{
  padding:9px 0 9px 22px;
  border-top:1px solid rgba(0,0,0,.07);
  font-size:14.5px;
  position:relative;
  color:var(--ink-soft);
}
.transform-list li::before{
  content:"–"; position:absolute; left:0; color:var(--steel);
}
.transform-list li:first-child{ border-top:none; }
.transform-list--after li{ border-top-color:rgba(255,255,255,.1); color:#D6DEE6; }
.transform-list--after li::before{ content:"✓"; color:var(--amber); }

.transform-arrow{
  align-self:center;
  font-family:var(--font-display);
  font-size:28px;
  color:var(--rust);
}

/* ============================================
   INSTRUCTOR / QUEM ENSINA
   ============================================ */
.instructor{
  margin-top:36px;
  display:grid;
  grid-template-columns:232px 1fr;
  gap:44px;
  align-items:start;
}
.instructor__photo{
  border:4px solid var(--navy-deep);
  position:relative;
}
.instructor__photo::after{
  content:"";
  position:absolute; inset:-4px;
  border:1px solid var(--rust);
  pointer-events:none;
}
.instructor__photo img{ width:100%; height:auto; display:block; }
.instructor__name{
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--rust);
  margin-bottom:14px;
}
.instructor__bio p{
  font-size:16px;
  color:var(--ink-soft);
  margin:0 0 16px;
  max-width:560px;
}
.instructor__bio .btn{ margin-top:8px; }

/* ============================================
   COMPARE (SEM x COM)
   ============================================ */
.compare{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  margin-top:44px;
  background:var(--concrete);
}
.compare__col{ padding:36px; background:var(--paper); }
.compare__col--no{ background:var(--concrete-2); }
.compare__col--yes{ background:var(--navy-deep); color:#fff; }
.compare__col h3{
  font-size:16px; text-transform:uppercase; letter-spacing:.04em;
  margin-bottom:22px;
  padding-bottom:14px;
  border-bottom:2px solid var(--steel);
}
.compare__col--yes h3{ border-bottom-color:var(--amber); }
.compare__col li{
  font-size:14.5px;
  padding:10px 0 10px 26px;
  position:relative;
  color:var(--ink-soft);
  border-top:1px solid rgba(0,0,0,.06);
}
.compare__col--yes li{ color:#D6DEE6; border-top-color:rgba(255,255,255,.08); }
.compare__col li:first-child{ border-top:none; }
.compare__col--no li::before{ content:"✕"; position:absolute; left:0; color:var(--rust); font-size:12px; top:12px; }
.compare__col--yes li::before{ content:"✓"; position:absolute; left:0; color:var(--amber); font-size:12px; top:12px; }

/* ============================================
   CHECKLIST / INCLUDED
   ============================================ */
.checklist{ margin-top:36px; display:flex; flex-direction:column; }
.checklist li{
  padding:18px 0 18px 40px;
  border-top:1px solid var(--concrete);
  position:relative;
  font-size:16px;
}
.checklist li:last-child{ border-bottom:1px solid var(--concrete); }
.checklist li::before{
  content:"→";
  position:absolute; left:0; color:var(--rust);
  font-family:var(--font-display);
}

.included{
  margin-top:36px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 32px;
}
.included li{
  padding:14px 0 14px 30px;
  border-top:1px solid var(--concrete);
  position:relative;
  font-size:15px;
  color:var(--ink-soft);
}
.included li::before{
  content:"";
  position:absolute; left:0; top:20px;
  width:10px; height:10px;
  background:var(--rust);
}

/* ============================================
   PILLARS (MÉTODO)
   ============================================ */
.pillars{
  margin-top:48px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--navy-line);
  border-left:1px solid var(--navy-line);
}
.pillar{
  padding:30px 20px;
  border-right:1px solid var(--navy-line);
  border-bottom:1px solid var(--navy-line);
}
.pillar__num{
  display:block;
  font-family:var(--font-mono);
  color:var(--rust);
  font-size:13px;
  margin-bottom:14px;
}
.pillar h3{
  font-size:18px; text-transform:uppercase; color:#fff; letter-spacing:.03em;
}

/* ============================================
   CURRICULUM
   ============================================ */
.curriculum{ margin-top:48px; display:flex; flex-direction:column; gap:0; }
.module{ border-top:2px solid var(--navy-deep); padding:32px 0; }
.module:last-child{ border-bottom:2px solid var(--navy-deep); }
.module__head{
  display:flex; align-items:baseline; gap:16px;
  margin-bottom:22px;
}
.module__tag{
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:.12em;
  color:var(--rust);
  white-space:nowrap;
}
.module__head h3{
  font-size:22px; text-transform:uppercase; color:var(--navy-deep);
}
.lessons{ display:flex; flex-direction:column; gap:0; padding-left:8px; }
.lesson{
  display:grid;
  grid-template-columns:96px 1fr;
  gap:20px;
  padding:16px 0;
  border-top:1px solid var(--concrete);
}
.lesson:first-child{ border-top:none; }
.lesson__num{
  font-family:var(--font-mono);
  font-size:12.5px; color:var(--steel);
  padding-top:2px;
}
.lesson h4{ font-size:16.5px; color:var(--ink); margin-bottom:4px; text-transform:none; font-weight:600; }
.lesson p{ font-size:14px; color:var(--ink-soft); margin:0; }

/* ============================================
   FORM
   ============================================ */
.form{ margin-top:40px; display:flex; flex-direction:column; gap:20px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form label{
  display:flex; flex-direction:column; gap:8px;
  font-size:13px; text-transform:uppercase; letter-spacing:.05em;
  color:#9FAEBD;
}
.form input, .form select{
  background:var(--navy-mid);
  border:1px solid var(--navy-line);
  color:#fff;
  padding:14px 16px;
  font-family:var(--font-body);
  font-size:15px;
  border-radius:var(--radius);
}
.form input::placeholder{ color:#6B7C8F; }
.form input:focus, .form select:focus{ border-color:var(--rust); }
.form__note{
  text-align:center;
  font-size:13px;
  color:#9FAEBD;
  margin-top:4px;
}
.form__success{
  margin-top:40px;
  padding:32px;
  background:var(--navy-mid);
  border-left:4px solid var(--amber);
}
.form__success h3{ color:#fff; font-size:20px; margin-bottom:10px; text-transform:uppercase; }
.form__success p{ color:#C7D0DA; margin:0; font-size:15px; }

/* ============================================
   FOOTER
   ============================================ */
.footer{ background:var(--navy-deep); border-top:1px solid var(--navy-line); padding:36px 0; }
.footer__inner{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.footer__lema{ height:22px; width:auto; opacity:.85; }
.brand--footer .brand__logo{ height:30px; }
.footer__meta{ color:#6B7C8F; font-size:13px; margin:0; }

/* ============================================
   BACK TO TOP
   ============================================ */
.back-to-top{
  position:fixed; right:24px; bottom:24px;
  width:44px; height:44px;
  background:var(--rust); color:#fff;
  border:none; border-radius:50%;
  font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .2s ease;
  z-index:90;
}
.back-to-top.is-visible{ opacity:1; pointer-events:auto; }
.back-to-top:hover{ transform:translateY(-3px); }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 900px){
  .nav{
    position:absolute; top:100%; left:0; right:0;
    background:var(--navy-deep);
    flex-direction:column; align-items:flex-start;
    padding:20px 28px 28px;
    gap:18px;
    border-bottom:1px solid var(--navy-line);
    transform:translateY(-130%);
    transition:transform .3s ease;
    max-height:80vh;
    overflow-y:auto;
    z-index:99;
  }
  .nav.is-open{ transform:translateY(0); }
  .nav-toggle{ display:flex; }
  .nav__cta{ margin-top:6px; }

  .hero__stats{ grid-template-columns:1fr 1fr; }
  .instructor{ grid-template-columns:1fr; }
  .instructor__photo{ width:160px; }
  .transform-grid{ grid-template-columns:1fr; }
  .transform-arrow{ transform:rotate(90deg); justify-self:center; }
  .compare{ grid-template-columns:1fr; }
  .pillars{ grid-template-columns:1fr 1fr; }
  .included{ grid-template-columns:1fr; }
  .form__row{ grid-template-columns:1fr; }
  .lesson{ grid-template-columns:1fr; gap:6px; }
}

@media (max-width: 560px){
  .pillars{ grid-template-columns:1fr; }
  .hero{ padding:72px 0 48px; }
  .section{ padding:64px 0; }
}