/* =========================================================================
   Esquematiza Aí - Diagnóstico | design system
   ========================================================================= */
:root{
  --background:0 0% 97%;
  --foreground:252 14% 15%;
  --primary:13 100% 64%;
  --primary-foreground:0 0% 97%;
  --secondary:195 65% 92%;
  --accent:197 64% 58%;
  --muted:0 0% 94%;
  --muted-foreground:252 10% 38%;
  --border:220 14% 88%;
  --card:0 0% 100%;
  --dark:220 30% 13%;
  --radius:.5rem;
  --font-display:"Barlow Condensed",system-ui,sans-serif;
  --font-sans:"Rubik",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  background:hsl(var(--background));
  color:hsl(var(--foreground));
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
button{font-family:inherit}
a{color:inherit}

.wrap{max-width:48rem;margin:0 auto;padding:0 1rem}
.wrap-sm{max-width:42rem;margin:0 auto;padding:0 1rem}

/* ---------- tipografia ---------- */
.display{
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.01em;
  line-height:1.02;
  margin:0;
}
h1.display{font-size:clamp(2.1rem,6.2vw,3.4rem)}
h2.display{font-size:clamp(1.5rem,4.2vw,2.1rem)}
h3.display{font-size:clamp(1.2rem,3.2vw,1.6rem)}
.eyebrow{
  font-size:.6875rem;text-transform:uppercase;letter-spacing:.16em;
  font-weight:600;color:hsl(var(--foreground)/.55);margin:0 0 .5rem;
}
.lead{color:hsl(var(--muted-foreground));font-size:1.0625rem}
.muted{color:hsl(var(--muted-foreground))}
.small{font-size:.8125rem}
.tiny{font-size:.6875rem}
.center{text-align:center}

/* marca-texto da identidade */
.marker{
  background:linear-gradient(180deg,transparent 55%,hsl(var(--primary)/.28) 55%);
  padding:0 .12em;
}
.marker-blue{
  background:linear-gradient(180deg,transparent 55%,hsl(var(--accent)/.28) 55%);
  padding:0 .12em;
}
.text-primary{color:hsl(var(--primary))}
.text-accent{color:hsl(var(--accent))}

/* ---------- header ---------- */
.topbar{
  max-width:48rem;margin:0 auto;padding:1.25rem 1rem .25rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.brand{display:flex;align-items:center;gap:.625rem}
.brand img{height:2.125rem;width:auto}
.brand-name{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:-.01em;font-size:.95rem;line-height:1.1;
}
.brand-sub{
  font-size:.625rem;text-transform:uppercase;letter-spacing:.16em;
  color:hsl(var(--foreground)/.55);line-height:1.4;
}
.btn-ghost{
  background:none;border:1px solid transparent;border-radius:.375rem;
  padding:.375rem .625rem;font-size:.875rem;color:hsl(var(--foreground)/.7);
  cursor:pointer;display:inline-flex;align-items:center;gap:.375rem;
  transition:color .15s,border-color .15s;
}
.btn-ghost:hover{color:hsl(var(--primary));border-color:hsl(var(--border))}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;
  font-weight:700;font-size:1rem;border:none;border-radius:.625rem;
  padding:.875rem 1.5rem;cursor:pointer;text-decoration:none;
  transition:transform .15s,box-shadow .15s,background-color .15s;
}
.btn-primary{
  background:hsl(var(--primary));color:#fff;
  box-shadow:0 10px 24px -12px hsl(var(--primary)/.9);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 28px -12px hsl(var(--primary)/.95)}
.btn-white{background:#fff;color:hsl(var(--foreground))}
.btn-white:hover{transform:translateY(-1px)}
.btn-block{width:100%}
.btn-lg{height:3.25rem;font-size:1.05rem}
.pulse{animation:pulseBrand 2.6s ease-in-out infinite}
@keyframes pulseBrand{
  0%,100%{box-shadow:0 10px 24px -12px hsl(var(--primary)/.9)}
  50%{box-shadow:0 10px 34px -8px hsl(var(--primary)/1)}
}

/* ---------- intro ---------- */
.intro{padding:1.5rem 0 4rem;position:relative}
.intro-shape{
  position:absolute;right:0;top:-.5rem;width:min(26vw,132px);
  opacity:.9;pointer-events:none;z-index:0;
}
@media(min-width:900px){.intro-shape{right:-2.5rem;width:160px}}
.intro-inner{position:relative;z-index:1}
.intro p{max-width:38rem}
.facts{
  display:grid;grid-template-columns:1fr;gap:0;margin:2rem 0 2rem;
  border:1px solid hsl(var(--border));border-radius:.75rem;background:#fff;overflow:hidden;
}
.fact{display:flex;align-items:center;gap:.5rem;padding:.875rem 1rem;font-family:var(--font-display);
  font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:.9rem}
.fact + .fact{border-top:1px solid hsl(var(--border))}
.dot{width:.5rem;height:.5rem;border-radius:50%;flex:none}
.dot-1{background:hsl(var(--primary))}
.dot-2{background:hsl(var(--accent))}
.dot-3{background:#3ec98a}
@media(min-width:640px){
  .facts{grid-template-columns:repeat(3,1fr)}
  .fact + .fact{border-top:none;border-left:1px solid hsl(var(--border))}
}

/* ---------- quiz ---------- */
.quiz{padding:.5rem 0 4rem}
.progress-head{display:flex;justify-content:space-between;font-size:.875rem;margin-bottom:.5rem}
.progress{height:.375rem;border-radius:999px;background:hsl(var(--secondary));overflow:hidden}
.progress span{display:block;height:100%;background:hsl(var(--accent));width:0;transition:width .45s ease}
.q-title{color:hsl(var(--primary));margin:1.75rem 0 .35rem}
.q-hint{font-style:italic;color:hsl(var(--muted-foreground));font-size:.9375rem;margin:0 0 1.5rem}
.options{display:flex;flex-direction:column;gap:.75rem}
.option{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  width:100%;text-align:left;background:#fff;border:1px solid hsl(var(--border));
  border-radius:.625rem;padding:1rem 1.125rem;font-size:.9375rem;cursor:pointer;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.option:hover{border-color:hsl(var(--primary)/.6);box-shadow:0 6px 18px -12px hsl(var(--foreground)/.35);transform:translateY(-1px)}
.option.selected{border-color:hsl(var(--accent));box-shadow:0 0 0 3px hsl(var(--accent)/.18)}
.option .arrow{color:hsl(var(--foreground)/.35);flex:none}
.option.selected .arrow{color:hsl(var(--accent))}
.fade-in{animation:fadeIn .32s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- lead ---------- */
.lead-card{
  background:#fff;border:1px solid hsl(var(--border));border-radius:1rem;
  padding:1.75rem 1.5rem;box-shadow:0 24px 60px -40px hsl(var(--foreground)/.5);
}
.field{margin-bottom:.875rem}
.field label{
  display:block;font-size:.6875rem;text-transform:uppercase;letter-spacing:.08em;
  font-weight:600;color:hsl(var(--foreground)/.6);margin-bottom:.3rem;
}
.field input{
  width:100%;border:1px solid hsl(var(--border));border-radius:.5rem;
  background:hsl(var(--background));padding:.7rem .75rem;font-size:.9375rem;
  font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s;
}
.field input:focus{border-color:hsl(var(--primary));box-shadow:0 0 0 3px hsl(var(--primary)/.2)}
.field .opt{color:hsl(var(--foreground)/.4);text-transform:none;letter-spacing:0;font-weight:400}
.trust{display:flex;align-items:center;justify-content:center;gap:.75rem;font-size:.6875rem;
  color:hsl(var(--foreground)/.55);padding-top:.5rem}

/* ---------- resultado ---------- */
.result{padding:1rem 0 4rem}
.badge{
  display:inline-flex;align-items:center;gap:.4rem;background:hsl(var(--muted));
  border-radius:999px;padding:.35rem .75rem;font-size:.75rem;font-weight:600;
  color:hsl(var(--foreground)/.6);margin-bottom:1rem;
}
.section{margin-top:2.5rem}
.cards-2{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:720px){.cards-2{grid-template-columns:1fr 1fr}}
.card{background:#fff;border:1px solid hsl(var(--border));border-radius:.875rem;padding:1.25rem}
.card-wrong{background:hsl(var(--muted));border-color:hsl(var(--border))}
.card-right{background:hsl(var(--secondary)/.5);border-color:hsl(var(--accent)/.5)}
.card-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.875rem;
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;font-size:.8125rem;font-weight:700}
.chip{width:1.375rem;height:1.375rem;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;font-size:.75rem;flex:none}
.chip-x{background:hsl(var(--muted-foreground)/.15);color:hsl(var(--muted-foreground))}
.chip-v{background:hsl(var(--accent)/.2);color:hsl(var(--accent))}
.list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.5rem;font-size:.9375rem}
.card-wrong .list li{color:hsl(var(--muted-foreground))}

.diag{
  background:#fff;border:1px solid hsl(var(--border));border-left:4px solid hsl(var(--primary));
  border-radius:.875rem;padding:1.25rem 1.375rem;
}
.diag h3{color:hsl(var(--primary));margin:.35rem 0 .6rem}
.indicators{display:grid;gap:.75rem;grid-template-columns:1fr;margin-top:1rem}
@media(min-width:720px){.indicators{grid-template-columns:repeat(3,1fr)}}
.ind{background:#fff;border:1px solid hsl(var(--border));border-radius:.75rem;padding:.875rem 1rem}
.ind-top{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;font-size:.875rem}
.ind-val{font-family:var(--font-display);font-weight:800;color:hsl(var(--primary));font-size:.9375rem}
.bar{height:.375rem;border-radius:999px;background:hsl(var(--secondary));margin-top:.5rem;overflow:hidden}
.bar span{display:block;height:100%;background:hsl(var(--accent));width:0;transition:width .9s ease}

.bottleneck{
  background:#fff;border:1px solid hsl(var(--border));border-left:4px solid hsl(var(--accent));
  border-radius:.875rem;padding:1rem 1.25rem;margin-top:1rem;
}
.chart{background:#fff;border:1px solid hsl(var(--border));border-radius:.875rem;padding:1.25rem;margin-top:1rem}
.chart h4{font-family:var(--font-display);text-transform:uppercase;color:hsl(var(--primary));
  font-size:1rem;margin:0 0 1rem;letter-spacing:.02em}
.chart-row{margin-bottom:.875rem}
.chart-lab{display:flex;justify-content:space-between;font-size:.875rem;margin-bottom:.3rem}
.chart-bar{height:.75rem;border-radius:999px;background:hsl(var(--secondary));overflow:hidden}
.chart-bar span{display:block;height:100%;width:0;transition:width 1s ease}
.b-now{background:hsl(var(--muted-foreground)/.55)}
.b-avg{background:hsl(var(--primary)/.75)}
.b-pot{background:hsl(var(--accent))}
.callout{
  background:hsl(var(--secondary)/.45);border-left:4px solid hsl(var(--accent));
  border-radius:.875rem;padding:1.125rem 1.25rem;margin-top:1.5rem;
}

/* card do produto */
.product{
  background:hsl(var(--dark));color:#fff;border-radius:1.125rem;padding:1.5rem;
  margin-top:1.5rem;position:relative;overflow:hidden;
}
.product .shape{position:absolute;right:-1.5rem;top:-1.5rem;width:9rem;opacity:.14;pointer-events:none}
.product-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  position:relative;z-index:1}
.product-eyebrow{font-size:.6875rem;text-transform:uppercase;letter-spacing:.16em;font-weight:700;
  color:hsl(var(--accent))}
.pill{background:hsl(var(--primary));color:#fff;border-radius:999px;padding:.3rem .7rem;
  font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.product h3{margin:.75rem 0 .75rem;position:relative;z-index:1}
.pill-coupon{
  display:inline-block;border:1px solid hsl(var(--primary)/.7);color:hsl(var(--primary));
  border-radius:999px;padding:.3rem .75rem;font-family:var(--font-display);font-weight:700;
  font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;position:relative;z-index:1;
}
.pricebox{
  background:linear-gradient(135deg,hsl(var(--primary)),hsl(14 92% 58%));
  border-radius:.875rem;padding:1.25rem;margin-top:1rem;text-align:center;position:relative;z-index:1;
}
.pricebox .note{font-size:.8125rem;font-weight:600;opacity:.95;margin:0 0 .4rem}
.price-line{display:flex;align-items:baseline;justify-content:center;gap:.75rem}
.price-old{text-decoration:line-through;opacity:.75;font-size:.9375rem}
.price-new{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,7vw,2.75rem);line-height:1}
.pricebox .fine{font-size:.75rem;opacity:.95;margin:.5rem 0 1rem}
.product-trust{display:flex;align-items:center;justify-content:center;gap:.75rem;font-size:.75rem;
  opacity:.75;margin-top:.875rem;position:relative;z-index:1}

.benefits{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:1rem}
@media(min-width:720px){.benefits{grid-template-columns:1fr 1fr}}
.benefit{background:#fff;border:1px solid hsl(var(--border));border-radius:.875rem;padding:1.125rem;
  display:flex;gap:.875rem}
.benefit .num{width:1.75rem;height:1.75rem;border-radius:50%;background:hsl(var(--primary)/.15);
  color:hsl(var(--primary));font-family:var(--font-display);font-weight:800;display:flex;
  align-items:center;justify-content:center;flex:none;font-size:.9rem}
.benefit h4{font-family:var(--font-display);text-transform:uppercase;font-size:.9375rem;margin:.1rem 0 .3rem;
  letter-spacing:.02em}
.benefit p{margin:0;font-size:.875rem;color:hsl(var(--muted-foreground))}

.cta-band{
  border:1px solid hsl(var(--primary)/.45);background:hsl(var(--primary)/.06);
  border-radius:1rem;padding:1.5rem;text-align:center;margin-top:2rem;
}
.cta-band .price-line{margin:.75rem 0 1rem}
.cta-band .price-old{color:hsl(var(--muted-foreground))}
.cta-band .price-new{color:hsl(var(--primary))}

.carousel{display:flex;gap:1rem;overflow-x:auto;padding:.25rem .25rem 1rem;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch}
.carousel::-webkit-scrollbar{height:6px}
.carousel::-webkit-scrollbar-thumb{background:hsl(var(--border));border-radius:999px}
.carousel figure{margin:0;flex:0 0 auto;width:min(70vw,17rem);scroll-snap-align:start}
.carousel img{border-radius:.875rem;width:100%;height:auto}

.guarantee{background:#fff;border:1px solid hsl(var(--border));border-radius:.875rem;padding:1.25rem;margin-top:2rem}
.faq{background:#fff;border:1px solid hsl(var(--border));border-radius:.875rem;padding:.25rem 1.25rem;margin-top:1rem}
.faq-item{border-bottom:1px solid hsl(var(--border))}
.faq-item:last-child{border-bottom:none}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:none;border:none;padding:1rem 0;text-align:left;font-size:.9375rem;font-weight:500;
  cursor:pointer;color:inherit}
.faq-q .caret{transition:transform .2s;flex:none;color:hsl(var(--foreground)/.6)}
.faq-item.open .caret{transform:rotate(180deg)}
.faq-a{display:none;padding-bottom:1rem;font-size:.875rem;color:hsl(var(--muted-foreground))}
.faq-item.open .faq-a{display:block}

.footer{font-size:.75rem;color:hsl(var(--foreground)/.5);text-align:center;margin:2.5rem 0 1rem}

/* whatsapp flutuante */
.wa{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:50;display:inline-flex;align-items:center;gap:.5rem;
  background:#25D366;color:#fff;border-radius:999px;padding:.75rem 1rem;text-decoration:none;
  box-shadow:0 10px 30px -8px rgba(37,211,102,.6);font-family:var(--font-display);
  text-transform:uppercase;letter-spacing:.04em;font-size:.8125rem;font-weight:700;
  transition:transform .15s;
}
.wa:hover{transform:scale(1.05)}

/* modal pré-checkout */
.overlay{
  position:fixed;inset:0;background:hsl(var(--foreground)/.55);z-index:60;
  display:flex;align-items:flex-end;justify-content:center;padding:0;
  animation:fadeIn .2s ease both;
}
@media(min-width:640px){.overlay{align-items:center;padding:1rem}}
.modal{
  background:#fff;width:100%;max-width:32rem;border-radius:1.5rem 1.5rem 0 0;padding:1.5rem;
  position:relative;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);
  animation:slideUp .25s ease both;max-height:92vh;overflow-y:auto;
}
@media(min-width:640px){.modal{border-radius:1rem;padding:2rem}}
@keyframes slideUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.modal-close{position:absolute;top:.75rem;right:.75rem;background:none;border:none;cursor:pointer;
  padding:.5rem;border-radius:50%;color:hsl(var(--foreground)/.6);line-height:0}
.modal-close:hover{background:hsl(var(--secondary))}
.modal-brand{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}
.modal-brand img{height:1.75rem;width:1.75rem}
.modal-brand span{font-size:.6875rem;text-transform:uppercase;letter-spacing:.18em;font-weight:600;
  color:hsl(var(--foreground)/.6)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}