/* =========================================================
   Workshop de IA · Fernando
   Design: fundo quase preto, cards translúcidos, acento
   laranja Claude (#D97757), labels em mono.
   ========================================================= */

:root{
  --bg:#050507;
  --bg-elev:#0A0A0E;
  --surface:rgba(255,255,255,.028);
  --surface-hi:rgba(255,255,255,.055);
  --line:rgba(255,255,255,.09);
  --line-hi:rgba(255,255,255,.17);

  --ink:#F5F5F7;
  --ink-soft:#C6C6CF;
  --muted:#83838E;

  --accent:#D97757;
  --accent-bright:#E9906F;
  --accent-deep:#B65C3F;
  --accent-tint:rgba(217,119,87,.13);
  --accent-line:rgba(217,119,87,.42);
  --accent-glow:rgba(217,119,87,.30);

  --font:'Switzer','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;

  --shell:1140px;
  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
}

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth; scroll-padding-top:88px;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  background-image:
    radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:34px 34px;
  background-position:-1px -1px;
}

h1,h2,h3{margin:0; font-weight:700; letter-spacing:-.03em; line-height:1.08; text-wrap:balance;}
p{margin:0;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul,ol{margin:0; padding:0; list-style:none;}

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

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:#160B06; padding:10px 16px; border-radius:0 0 var(--r-sm) 0;
  font-family:var(--mono); font-size:13px;
}
.skip:focus{left:0;}

:focus-visible{outline:2px solid var(--accent-bright); outline-offset:3px; border-radius:4px;}

/* ---------------- NAV ---------------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(5,5,7,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex; align-items:center; gap:24px; height:68px;}

.brand{display:flex; align-items:center; gap:10px; flex:none;}
.brand img{border-radius:7px;}
.brand-name{font-weight:600; font-size:15px; letter-spacing:-.01em;}
.brand-badge{
  font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.1em;
  color:var(--accent); background:var(--accent-tint); border:1px solid var(--accent-line);
  padding:2px 7px; border-radius:100px; text-transform:uppercase;
}

.nav-links{display:flex; gap:26px; margin-left:auto;}
.nav-links a{
  font-size:14.5px; color:var(--ink-soft); transition:color .15s;
}
.nav-links a:hover{color:var(--ink);}
@media (max-width:820px){ .nav-links{display:none;} .nav-inner{gap:14px;} .nav .btn{margin-left:auto;} }
@media (max-width:420px){ .brand-name{display:none;} }

/* ---------------- BOTÕES / PILLS ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--accent); color:#180B05;
  font-family:var(--font); font-weight:600; font-size:15.5px; letter-spacing:-.01em;
  padding:14px 26px; border-radius:100px; border:none; cursor:pointer;
  box-shadow:0 0 0 1px rgba(255,255,255,.09) inset, 0 10px 30px -10px var(--accent-glow);
  transition:background .16s, transform .16s, box-shadow .16s;
  white-space:nowrap;
}
.btn:hover{background:var(--accent-bright); transform:translateY(-1px); box-shadow:0 0 0 1px rgba(255,255,255,.14) inset, 0 16px 38px -12px var(--accent-glow);}
.btn:active{transform:translateY(0);}
.btn-sm{padding:9px 18px; font-size:14px;}
.btn-lg{padding:17px 34px; font-size:17px;}
.btn-arrow{transition:transform .16s;}
.btn:hover .btn-arrow{transform:translateX(3px);}

.pill{
  display:inline-block;
  font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-tint);
  border:1px solid var(--accent-line); border-radius:100px;
  padding:7px 16px;
}

.eyebrow{
  display:block;
  font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin-bottom:16px;
}

/* ---------------- HERO ---------------- */
.hero{position:relative; padding:92px 0 88px; overflow:hidden;}
.hero-glow{
  position:absolute; top:-320px; left:50%; transform:translateX(-50%);
  width:1100px; height:700px; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(217,119,87,.16) 0%, rgba(217,119,87,.05) 38%, transparent 68%);
  filter:blur(20px);
}
.hero .shell{position:relative;}

.hero-grid{
  display:grid; grid-template-columns:minmax(0,1fr) 400px;
  gap:48px; align-items:center; margin-bottom:64px;
}
@media (max-width:960px){ .hero-grid{grid-template-columns:minmax(0,1fr) 300px; gap:28px;} }
@media (max-width:760px){ .hero-grid{grid-template-columns:1fr; gap:14px; margin-bottom:44px;} }

.hero-visual{position:relative; display:flex; justify-content:center;}
.hero-visual::before{
  content:''; position:absolute; inset:6% -6% -2% -6%;
  background:radial-gradient(circle at 50% 55%, var(--accent-glow) 0%, rgba(217,119,87,.08) 42%, transparent 70%);
  filter:blur(6px); pointer-events:none;
}
.hero-visual img{
  position:relative; width:100%; max-width:400px; height:auto;
  filter:drop-shadow(0 26px 44px rgba(0,0,0,.55));
}
@media (max-width:760px){ .hero-visual{margin:4px auto 0;} .hero-visual img{max-width:230px;} }

@media (prefers-reduced-motion:no-preference){
  .hero-visual img{animation:float 6.5s ease-in-out infinite;}
  @keyframes float{0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);}}
}

.hero-title{
  font-size:clamp(38px,5.6vw,68px);
  margin:26px 0 24px;
  letter-spacing:-.045em;
}
.hero-title em{font-style:normal; color:var(--accent);}

.hero-sub{
  font-size:18.5px; line-height:1.62; color:var(--ink-soft);
  max-width:60ch; margin-bottom:38px;
}

.hero-actions{display:flex; align-items:center; gap:28px; flex-wrap:wrap;}

.checks{display:flex; flex-direction:column; gap:7px;}
.checks li{
  display:flex; align-items:center; gap:9px;
  font-size:14px; color:var(--muted);
}
.checks li::before{
  content:'✓'; color:var(--accent); font-size:12px; font-weight:700;
  width:18px; height:18px; flex:none; border-radius:50%;
  background:var(--accent-tint); border:1px solid var(--accent-line);
  display:flex; align-items:center; justify-content:center;
}
.checks-center{flex-direction:row; flex-wrap:wrap; gap:10px 22px; justify-content:center; margin-top:26px;}

/* stat tiles */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
@media (max-width:700px){ .stats{grid-template-columns:1fr;} }
.stat{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:22px 24px; display:flex; flex-direction:column; gap:6px;
}
.stat strong{
  font-size:34px; font-weight:700; letter-spacing:-.04em; line-height:1;
  font-variant-numeric:tabular-nums;
}
.stat .unit{font-size:17px; font-weight:500; color:var(--muted); margin-left:4px; letter-spacing:-.01em;}
.stat-label{font-family:var(--mono); font-size:11.5px; color:var(--muted); letter-spacing:.04em;}

/* ---------------- MARQUEE ---------------- */
.marquee{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--bg-elev);
  overflow:hidden; padding:15px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee-track{display:flex; width:max-content; animation:slide 34s linear infinite;}
.marquee-track span{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); padding-right:22px; white-space:nowrap;
}
@keyframes slide{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion:reduce){ .marquee-track{animation:none;} }

/* ---------------- SEÇÕES ---------------- */
.section{padding:96px 0;}
.section-alt{background:var(--bg-elev); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

.section-head{max-width:64ch; margin-bottom:52px;}
.section-head h2{font-size:clamp(27px,3.4vw,40px); margin-bottom:18px;}
.section-sub{font-size:17px; color:var(--ink-soft); line-height:1.6; max-width:62ch;}

/* cards */
.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
@media (max-width:760px){ .cards{grid-template-columns:1fr;} }
.card{
  position:relative;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px 30px 34px;
  transition:background .18s, border-color .18s, transform .18s;
}
.card:hover{background:var(--surface-hi); border-color:var(--line-hi); transform:translateY(-3px);}
.card h3{font-size:20px; margin-bottom:11px; letter-spacing:-.025em;}
.card p{font-size:15.5px; color:var(--ink-soft); max-width:46ch;}
.card-arrow{
  position:absolute; right:26px; bottom:26px;
  color:var(--accent); font-size:17px;
  opacity:.5; transition:opacity .18s, transform .18s;
}
.card:hover .card-arrow{opacity:1; transform:translateX(4px);}

/* steps */
.steps{display:flex; flex-direction:column;}
.step{
  display:grid; grid-template-columns:74px 1fr; gap:26px;
  padding:28px 0; border-top:1px solid var(--line);
}
.step:first-child{border-top:none; padding-top:0;}
@media (max-width:620px){ .step{grid-template-columns:1fr; gap:12px;} }
.step-num{
  font-family:var(--mono); font-size:14px; font-weight:600; color:var(--accent);
  border:1px solid var(--accent-line); background:var(--accent-tint);
  width:48px; height:48px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
}
.step-body h3{
  font-size:19.5px; margin-bottom:8px; letter-spacing:-.025em;
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
}
.step-time{
  font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.09em;
  color:var(--muted); text-transform:uppercase; font-variant-numeric:tabular-nums;
}
.step-body p{font-size:15.5px; color:var(--ink-soft); max-width:62ch;}

/* sobre */
.about{display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; align-items:start;}
@media (max-width:900px){ .about{grid-template-columns:1fr; gap:38px;} }
.about-intro h2{font-size:clamp(26px,3.2vw,36px); margin-bottom:18px;}
.about-photo{
  margin:0 0 28px; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); background:var(--surface);
  box-shadow:0 24px 50px -24px rgba(0,0,0,.8);
}
.about-photo img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;}
.about-list{display:flex; flex-direction:column; gap:12px;}
.about-item{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:22px 24px; display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start;
}
@media (max-width:620px){ .about-item{grid-template-columns:1fr; gap:10px;} }
.about-item .tag{
  font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-tint); border:1px solid var(--accent-line);
  padding:6px 11px; border-radius:100px; white-space:nowrap;
}
.about-item p{font-size:15px; color:var(--ink-soft);}

/* ---------------- CTA FINAL ---------------- */
.cta-final{position:relative; text-align:center; overflow:hidden; padding:110px 0 120px;}
.cta-glow{
  position:absolute; bottom:-380px; left:50%; transform:translateX(-50%);
  width:1000px; height:620px; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(217,119,87,.20) 0%, rgba(217,119,87,.06) 40%, transparent 70%);
  filter:blur(16px);
}
.cta-inner{position:relative; display:flex; flex-direction:column; align-items:center;}
.cta-inner h2{font-size:clamp(30px,4.2vw,48px); margin:24px 0 20px;}
.cta-inner .section-sub{margin-bottom:36px; text-align:center;}

/* ---------------- FOOTER ---------------- */
.footer{border-top:1px solid var(--line); padding:34px 0 44px; background:var(--bg-elev);}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.footer .brand-name{font-size:13.5px; color:var(--ink-soft);}
.footer-copy{font-family:var(--mono); font-size:11.5px; color:var(--muted);}

/* ---------------- CHECKOUT ---------------- */
.checkout-back{font-family:var(--mono); font-size:13px; color:var(--muted); margin-left:auto;}
.checkout-back:hover{color:var(--ink);}

.checkout{padding:64px 0 96px;}
.checkout-grid{display:grid; grid-template-columns:1fr 420px; gap:56px; align-items:start;}
@media (max-width:900px){ .checkout-grid{grid-template-columns:1fr; gap:36px;} }

.checkout-main h1{font-size:clamp(30px,4vw,44px); margin-bottom:18px; letter-spacing:-.04em;}
.checkout-lead{font-size:17.5px; color:var(--ink-soft); max-width:52ch; margin-bottom:40px;}

.checkout-steps{display:flex; flex-direction:column;}
.checkout-steps li{display:grid; grid-template-columns:60px 1fr; gap:18px; padding:20px 0; border-top:1px solid var(--line);}
.checkout-steps li:first-child{border-top:none; padding-top:0;}
.cs-n{
  font-family:var(--mono); font-size:13px; font-weight:600; color:var(--accent);
  border:1px solid var(--accent-line); background:var(--accent-tint);
  width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center;
}
.checkout-steps strong{display:block; font-size:17px; letter-spacing:-.02em; margin-bottom:4px;}
.checkout-steps p{font-size:15px; color:var(--muted);}

/* card do resumo — o único bloco elevado da página, por isso leva borda mais forte */
.checkout-card{
  background:var(--bg-elev); border:1px solid var(--line-hi); border-radius:var(--r-lg);
  padding:30px 30px 32px; position:sticky; top:92px;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.9);
}
@media (max-width:900px){ .checkout-card{position:static;} }
.cc-label{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:12px;}
.cc-head h2{font-size:23px; letter-spacing:-.03em; margin-bottom:8px;}
.cc-desc{font-size:14.5px; color:var(--muted);}

.cc-list{display:flex; flex-direction:column; gap:10px; margin:24px 0; padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.cc-list li{position:relative; padding-left:20px; font-size:14.5px; color:var(--ink-soft);}
.cc-list li::before{content:''; position:absolute; left:0; top:8px; width:7px; height:7px; border-radius:2px; background:var(--accent);}

.cc-price{display:flex; flex-direction:column; gap:3px; margin-bottom:22px;}
.cc-price-label{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);}
.cc-price-value{font-size:40px; font-weight:700; letter-spacing:-.045em; line-height:1.05; font-variant-numeric:tabular-nums;}
.cc-price-note{font-family:var(--mono); font-size:12px; color:var(--muted);}

.cc-btn{width:100%; justify-content:center;}
.cc-checks{margin-top:18px;}
.cc-checks li{font-size:13px;}

/* ---------------- DIAGNÓSTICO (formulário) ---------------- */
.dg{padding:56px 0 96px;}
.dg-shell{max-width:660px;}
.dg-steps{margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.06em;}

.dg-head{margin-bottom:38px;}
.dg-head h1{font-size:clamp(28px,4vw,40px); letter-spacing:-.04em; margin-bottom:16px;}
.dg-lead{font-size:16.5px; color:var(--ink-soft); max-width:56ch; margin-bottom:26px;}

/* barra de progresso */
.dg-bar{height:3px; background:var(--line); border-radius:99px; overflow:hidden;}
.dg-bar span{display:block; height:100%; width:25%; background:var(--accent); border-radius:99px; transition:width .35s cubic-bezier(.22,.61,.36,1);}

/* um passo = um fieldset; sem borda, o legend faz o trabalho */
.dg-step{border:none; padding:0; margin:0 0 30px; display:flex; flex-direction:column; gap:26px;}
/* display explícito vence o [hidden] do navegador — sem isto, todos os passos aparecem juntos */
[hidden]{display:none !important;}
.dg-legend{font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); padding:0; margin-bottom:4px;}

.dg-field{display:flex; flex-direction:column; gap:9px;}
.dg-label{font-size:16.5px; font-weight:500; color:var(--ink); letter-spacing:-.015em;}
.dg-label em{font-style:normal; color:var(--muted); font-weight:400;}
.dg-hint{font-size:13.5px; color:var(--muted);}

.dg-field input[type=text], .dg-field input[type=email], .dg-field textarea{
  font-family:var(--font); font-size:16px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-hi); border-radius:12px;
  padding:13px 15px; width:100%; resize:vertical; line-height:1.55;
  transition:border-color .15s, background .15s;
}
.dg-field input::placeholder, .dg-field textarea::placeholder{color:var(--muted); opacity:.75;}
.dg-field input:focus, .dg-field textarea:focus{
  outline:none; border-color:var(--accent); background:var(--surface-hi);
}

/* escolhas: o label inteiro é clicável, não só o controle */
.dg-choices{display:flex; flex-direction:column; gap:9px;}
.dg-choice{
  display:flex; align-items:center; gap:12px; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:13px 16px; font-size:15.5px; color:var(--ink-soft);
  transition:border-color .15s, background .15s, color .15s;
}
.dg-choice:hover{border-color:var(--line-hi); color:var(--ink);}
.dg-choice input{accent-color:var(--accent); width:17px; height:17px; flex:none; cursor:pointer;}
.dg-choice:has(input:checked){border-color:var(--accent-line); background:var(--accent-tint); color:var(--ink);}
.dg-choice:has(input:focus-visible){outline:2px solid var(--accent-bright); outline-offset:2px;}

.dg-erro{
  font-size:14.5px; color:#F0A58C; background:rgba(217,119,87,.10);
  border:1px solid var(--accent-line); border-radius:12px; padding:13px 16px; margin-bottom:22px;
}

.dg-actions{display:flex; gap:12px; align-items:center;}
.btn-ghost{
  background:transparent; color:var(--ink-soft); border:1px solid var(--line-hi);
  box-shadow:none; font-weight:500;
}
.btn-ghost:hover{background:var(--surface-hi); color:var(--ink); transform:none; box-shadow:none;}
.dg-actions .btn:disabled{opacity:.6; cursor:default; transform:none;}

/* sucesso */
.dg-ok{display:flex; flex-direction:column; align-items:flex-start; gap:18px; padding:20px 0 40px;}
.dg-ok-mark{
  width:52px; height:52px; border-radius:50%; flex:none;
  background:var(--accent-tint); border:1px solid var(--accent-line); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:700;
}
.dg-ok h2{font-size:28px; letter-spacing:-.035em;}
.dg-ok p{font-size:16.5px; color:var(--ink-soft); max-width:52ch;}

@media (max-width:620px){
  .dg{padding:36px 0 72px;}
  .dg-steps{font-size:11px;}
  .dg-actions{flex-direction:column-reverse; align-items:stretch;}
  .dg-actions .btn{justify-content:center;}
}

/* ---------------- ENTRADA ----------------
   Só o herói anima, e no load. Nada de conteúdo
   parado em opacity:0 esperando scroll.        */
@media (prefers-reduced-motion:no-preference){
  .hero [data-reveal]{animation:rise .62s cubic-bezier(.22,.61,.36,1) both;}
  .hero [data-reveal]:nth-child(2){animation-delay:.06s;}
  .hero [data-reveal]:nth-child(3){animation-delay:.12s;}
  .hero [data-reveal]:nth-child(4){animation-delay:.18s;}
  .hero [data-reveal]:nth-child(5){animation-delay:.24s;}
  @keyframes rise{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
}