/* ==========================================================================
   REPARO DIGITAL, Marketing para Assistências Técnicas
   Design system do site (deriva do Kit do Dono de Assistência)
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root{
  /* Marca */
  --green:      #2FE889;
  --green-lt:   #5FF0A5;
  --green-dk:   #16C06B;
  --green-deep: #0B7F4A;

  /* Superfícies */
  --bg:         #06110E;
  --bg-2:       #071310;
  --surface:    #0B1A16;
  --surface-2:  #0F231D;
  --surface-3:  #143028;

  /* Texto */
  --text:       #E8F3EF;
  --muted:      #9DB0AB;
  --muted-2:    #7E938D;
  --faint:      #3B5750;

  /* Linhas e brilhos */
  --line:       rgba(47,232,137,.14);
  --line-soft:  rgba(232,243,239,.08);
  --glow:       0 0 0 1px rgba(47,232,137,.20), 0 8px 40px -12px rgba(47,232,137,.35);

  /* Sinal */
  --warn:       #FFC53D;
  --danger:     #FF6B5A;
  --star:       #FFC53D;

  /* Métrica */
  --radius:     16px;
  --radius-lg:  24px;
  --maxw:       1160px;
  --measure:    68ch;
  --nav-h:      74px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* --- Reset -------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px); }
body{ margin:0; }
img,svg,video{ display:block; max-width:100%; height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; }
}

/* --- Base --------------------------------------------------------------- */
body{
  font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:17px;
  line-height:1.65;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* Títulos na Space Grotesk (dupla do contemplei) */
.display,.h1,.h2,.h3,h1,h2,h3,.stat .n,.metric .v,.nav-logo,.display .grad,.grad{
  font-family:'Space Grotesk','Hanken Grotesk',system-ui,sans-serif;
}

/* Fundo vivo: gradiente + malha técnica sutil */
.bg-canvas{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 600px at 12% -5%, rgba(47,232,137,.10), transparent 60%),
    radial-gradient(700px 500px at 95% 8%, rgba(47,232,137,.06), transparent 55%),
    linear-gradient(140deg,#06110E 0%,#0A1714 46%,#071310 100%);
}
.bg-canvas::after{
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(rgba(47,232,137,.14) 1.1px, transparent 1.3px);
  background-size:26px 26px;
  mask-image:radial-gradient(1200px 850px at 50% -2%, #000 0%, transparent 80%);
  -webkit-mask-image:radial-gradient(1200px 850px at 50% -2%, #000 0%, transparent 80%);
}

/* --- Tipografia --------------------------------------------------------- */
.display{ font-weight:800; letter-spacing:-.035em; line-height:1.03; font-size:clamp(2.3rem,1.2rem + 5vw,4.8rem); }
.h1{ font-weight:800; letter-spacing:-.03em; line-height:1.1; font-size:clamp(1.9rem,1.1rem + 3.2vw,3.2rem); }
.h2{ font-weight:800; letter-spacing:-.028em; line-height:1.13; font-size:clamp(1.6rem,1rem + 2.3vw,2.55rem); }
.h3{ font-weight:700; letter-spacing:-.02em; line-height:1.25; font-size:clamp(1.18rem,.95rem + .95vw,1.55rem); }
.lead{ font-size:clamp(1.05rem,.98rem + .5vw,1.32rem); color:var(--muted); max-width:var(--measure); }
.small{ font-size:.875rem; }
.mono{ font-family:'JetBrains Mono',ui-monospace,'SF Mono',Consolas,monospace; font-size:.85em; letter-spacing:-.01em; }
.grad{ background:linear-gradient(96deg,var(--green-lt),var(--green) 45%,var(--green-dk));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.txt-muted{ color:var(--muted); }
.txt-green{ color:var(--green); }
.center{ text-align:center; }
.center .lead{ margin-inline:auto; }

/* --- Layout ------------------------------------------------------------- */
.wrap{ width:min(100% - 2.5rem, var(--maxw)); margin-inline:auto; }
.wrap-narrow{ width:min(100% - 2.5rem, 820px); margin-inline:auto; }
.section{ padding-block:clamp(3.5rem,2rem + 7vw,7rem); position:relative; }
.section--tight{ padding-block:clamp(2.5rem,1.5rem + 4vw,4.5rem); }
.stack > * + *{ margin-top:1.1rem; }
.stack-lg > * + *{ margin-top:2rem; }
.row{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.grid{ display:grid; gap:1.4rem; }
.divider{ border:0; height:1px; background:var(--line-soft); }

/* --- Eyebrow / etiquetas ------------------------------------------------ */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green); padding:.42rem .85rem; border-radius:100px;
  background:rgba(47,232,137,.08); border:1px solid var(--line);
}
.eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); }

.tag{ display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:.28rem .6rem; border-radius:6px; background:var(--surface-3); color:var(--muted); border:1px solid var(--line-soft); }
.tag--live{ background:rgba(47,232,137,.12); color:var(--green); border-color:var(--line); }

/* --- Botões ------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.7rem; border-radius:100px; border:1px solid transparent;
  font-weight:700; font-size:1rem; letter-spacing:-.01em; cursor:pointer;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
  text-align:center; will-change:transform;
}
.btn:focus-visible{ outline:3px solid var(--green-lt); outline-offset:3px; }
.btn--primary{ background:linear-gradient(180deg,var(--green-lt),var(--green)); color:#04120B;
  box-shadow:0 10px 30px -10px rgba(47,232,137,.6); }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -12px rgba(47,232,137,.75); }
.btn--ghost{ background:transparent; border-color:var(--line); color:var(--text); }
.btn--ghost:hover{ background:rgba(47,232,137,.07); border-color:var(--green); }
.btn--lg{ padding:1.1rem 2rem; font-size:1.05rem; }
.btn--block{ width:100%; }
.btn svg{ width:1.15em; height:1.15em; }

/* --- Navegação ---------------------------------------------------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50; height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{ background:rgba(6,17,14,.94); border-bottom-color:var(--line-soft); }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.nav-logo img{ height:30px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:.35rem; }
.nav-links a{ padding:.55rem .8rem; border-radius:100px; font-size:.94rem; font-weight:500; color:var(--muted);
  white-space:nowrap; transition:color .18s var(--ease), background .18s var(--ease); }
.nav-links a:hover{ color:var(--text); background:rgba(47,232,137,.07); }
/* Dropdown do menu (Serviços) */
.nav-item--drop{ position:relative; }
.nav-drop-toggle{ display:inline-flex; align-items:center; gap:.35rem; background:transparent; border:0; cursor:pointer;
  padding:.55rem .8rem; border-radius:100px; font-size:.94rem; font-weight:500; color:var(--muted); font-family:inherit;
  transition:color .18s var(--ease), background .18s var(--ease); }
.nav-drop-toggle:hover{ color:var(--text); background:rgba(47,232,137,.07); }
.nav-drop-toggle svg{ width:1em; height:1em; transition:transform .2s var(--ease); }
.nav-drop{ display:grid; gap:.15rem; }
@media (min-width:941px){
  .nav-drop{ position:absolute; top:calc(100% + .5rem); left:0; min-width:230px; padding:.5rem;
    background:#08130F; border:1px solid var(--line-soft); border-radius:14px; box-shadow:0 20px 50px -20px rgba(0,0,0,.8);
    opacity:0; transform:translateY(-8px); pointer-events:none; transition:.2s var(--ease); z-index:60; }
  .nav-item--drop:hover .nav-drop,
  .nav-item--drop:focus-within .nav-drop{ opacity:1; transform:none; pointer-events:auto; }
  .nav-item--drop:hover .nav-drop-toggle svg,
  .nav-item--drop:focus-within .nav-drop-toggle svg{ transform:rotate(180deg); }
  .nav-drop a{ padding:.6rem .8rem; border-radius:10px; color:var(--muted); }
  .nav-drop a:hover{ color:var(--text); background:rgba(47,232,137,.07); }
}
@media (max-width:940px){
  .nav-item--drop{ display:grid; }
  .nav-drop{ overflow:hidden; max-height:0; transition:max-height .25s var(--ease); padding-left:.6rem; }
  .nav-item--drop.is-open .nav-drop{ max-height:340px; }
  .nav-item--drop.is-open .nav-drop-toggle svg{ transform:rotate(180deg); }
  .nav-drop-toggle{ justify-content:space-between; width:100%; padding:.85rem 1rem; font-size:1.05rem; }
}
.nav-cta{ display:flex; align-items:center; gap:.7rem; }
.nav-cta .btn{ padding:.6rem 1.2rem; font-size:.9rem; }
.nav-toggle{ display:none; background:transparent; border:1px solid var(--line); border-radius:10px;
  width:44px; height:44px; cursor:pointer; align-items:center; justify-content:center; }
.nav-toggle span{ display:block; width:20px; height:2px; background:var(--text); position:relative; transition:.2s var(--ease); }
.nav-toggle span::before,.nav-toggle span::after{ content:''; position:absolute; left:0; width:20px; height:2px; background:var(--text); transition:.2s var(--ease); }
.nav-toggle span::before{ top:-6px; } .nav-toggle span::after{ top:6px; }
body.menu-open .nav-toggle span{ background:transparent; }
body.menu-open .nav-toggle span::before{ top:0; transform:rotate(45deg); }
body.menu-open .nav-toggle span::after{ top:0; transform:rotate(-45deg); }

@media (max-width:940px){
  .nav-toggle{ display:inline-flex; }
  .nav-links{
    position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; align-items:stretch; gap:.2rem;
    background:#08130F;
    padding:1rem 1.25rem 1.5rem; border-bottom:1px solid var(--line-soft);
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:.25s var(--ease);
  }
  body.menu-open .nav-links{ transform:none; opacity:1; pointer-events:auto; }
  .nav-links a{ padding:.85rem 1rem; font-size:1.05rem; }
  .nav .nav-cta .btn--primary{ display:none; }
}

/* --- Hero --------------------------------------------------------------- */
.hero{ position:relative; padding-top:calc(var(--nav-h) + clamp(2.5rem,1rem + 7vw,6rem));
  padding-bottom:clamp(3rem,2rem + 5vw,6rem); overflow:hidden; }
.hero-orb{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; pointer-events:none; z-index:-1;
  background:radial-gradient(circle,var(--green),transparent 70%); animation:float 16s var(--ease) infinite alternate; }
.hero-orb--a{ width:520px; height:520px; top:-140px; right:-120px; }
.hero-orb--b{ width:360px; height:360px; bottom:-160px; left:-120px; opacity:.32; animation-delay:-6s; }
@keyframes float{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(0,40px,0) scale(1.12); } }
.hero-grid{ display:grid; gap:2.5rem; align-items:center; }
@media (min-width:960px){ .hero-grid{ grid-template-columns:1.05fr .95fr; gap:3rem; } }
.hero h1{ margin-top:1.2rem; }
.hero .lead{ margin-top:1.4rem; }
.hero-actions{ margin-top:2rem; }
.hero-trust{ margin-top:2.2rem; display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; color:var(--muted); font-size:.9rem; }
.hero-trust .stars{ color:var(--star); letter-spacing:.1em; }

/* Painel visual do hero (mockup animado) */
.hero-visual{ position:relative; }
.hero-panel{ background:linear-gradient(165deg,var(--surface-2),var(--surface)); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:1.4rem; box-shadow:0 40px 80px -30px rgba(0,0,0,.7); }
.hero-panel-head{ display:flex; align-items:center; gap:.5rem; margin-bottom:1rem; }
.hero-panel-head i{ width:11px; height:11px; border-radius:50%; background:var(--surface-3); display:block; }
.metric-row{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.metric{ background:var(--bg-2); border:1px solid var(--line-soft); border-radius:14px; padding:1rem 1.1rem; }
.metric .k{ font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted-2); font-weight:700; }
.metric .v{ font-size:1.65rem; font-weight:800; letter-spacing:-.02em; margin-top:.2rem; }
.metric .v small{ font-size:.9rem; color:var(--green); font-weight:700; }
.bars{ display:flex; align-items:flex-end; gap:.5rem; height:96px; margin-top:1rem; padding:0 .2rem; }
.bars i{ flex:1; background:linear-gradient(180deg,var(--green-lt),var(--green-deep)); border-radius:6px 6px 0 0;
  transform-origin:bottom; animation:grow 1.1s var(--ease) both; }
@keyframes grow{ from{ transform:scaleY(0); } }

/* --- Cluster de aparelhos (hero) ---------------------------------------- */
.device-cloud{ position:relative; width:min(100%,510px); aspect-ratio:1/1; margin-inline:auto; }
.device-lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.device-lines line{ stroke:rgba(47,232,137,.22); stroke-width:.35; stroke-dasharray:1.6 2.2;
  animation:dash 22s linear infinite; }
@keyframes dash{ to{ stroke-dashoffset:-40; } }
.dev-hub{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3;
  width:118px; height:118px; border-radius:50%; display:grid; place-items:center; text-align:center; padding:.6rem;
  background:radial-gradient(circle at 50% 35%,var(--surface-3),var(--surface)); border:1px solid var(--green);
  box-shadow:var(--glow); }
.dev-hub svg{ width:34px; height:34px; color:var(--green); }
.dev-hub img{ width:64px; height:auto; }
.dev-hub::after{ content:''; position:absolute; inset:-9px; border-radius:50%; border:1px solid var(--line);
  animation:spin 26s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.device{ position:absolute; left:var(--x); top:var(--y); z-index:2; width:76px; height:76px; border-radius:18px;
  display:grid; place-items:center; transform:translate(-50%,-50%);
  background:linear-gradient(180deg,var(--surface),var(--surface-2)); border:1px solid var(--line);
  box-shadow:0 14px 34px -14px rgba(0,0,0,.7);
  animation:devfloat 6s ease-in-out infinite alternate; animation-delay:var(--d,0s); }
.device svg{ width:38px; height:38px; color:var(--green-lt); }
.device b{ position:absolute; bottom:-1.35rem; left:50%; transform:translateX(-50%); white-space:nowrap;
  font-size:.66rem; font-weight:600; color:var(--muted-2); letter-spacing:.02em; }
@keyframes devfloat{ from{ translate:0 -7px; } to{ translate:0 7px; } }
@media (prefers-reduced-motion: reduce){ .device,.dev-hub::after,.device-lines line{ animation:none; } }
@media (max-width:520px){ .device-cloud{ width:min(100%,360px); } .device{ width:64px; height:64px; } .device svg{ width:32px; height:32px; } }

/* --- Marquee (nichos) --------------------------------------------------- */
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; gap:2.5rem; width:max-content; animation:scroll 32s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track span{ display:inline-flex; align-items:center; gap:.6rem; color:var(--muted); font-weight:600;
  font-size:1.05rem; white-space:nowrap; }
.marquee-track span::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--green); flex:none; }
@keyframes scroll{ to{ transform:translateX(-50%); } }

/* --- Stats / contadores ------------------------------------------------- */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1.2rem; }
.stat{ text-align:center; padding:1.5rem 1rem; }
.stat .n{ font-size:clamp(2.2rem,1.4rem + 2.5vw,3.4rem); font-weight:800; letter-spacing:-.03em; line-height:1; }
.stat .l{ color:var(--muted); font-size:.95rem; margin-top:.55rem; }

/* Stat cards (grade estilo contemplei: 1 card verde em destaque) */
.statgrid{ display:grid; gap:1.4rem; grid-template-columns:1fr; }
@media(min-width:720px){ .statgrid{ grid-template-columns:repeat(3,1fr); } }
.statcard{ position:relative; background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--line-soft); border-radius:var(--radius-lg);
  padding:clamp(1.6rem,1.2rem + 1.5vw,2.4rem); min-height:230px;
  display:flex; flex-direction:column; justify-content:space-between;
  transition:border-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease); }
.statcard:hover{ transform:translateY(-4px); border-color:var(--line); box-shadow:var(--glow); }
.statcard-n{ font-family:'Space Grotesk','Hanken Grotesk',sans-serif; font-weight:800; letter-spacing:-.04em;
  line-height:.95; font-size:clamp(2.8rem,1.8rem + 4vw,4.6rem);
  background:linear-gradient(96deg,var(--green-lt),var(--green) 45%,var(--green-dk));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.statcard-l{ color:var(--muted); font-size:1rem; font-weight:500; margin-top:1.4rem; max-width:24ch; }
.statcard--hl{ background:linear-gradient(165deg,var(--green-lt),var(--green)); border-color:transparent;
  box-shadow:0 24px 60px -20px rgba(47,232,137,.5); }
.statcard--hl .statcard-n{ background:none; -webkit-background-clip:border-box; background-clip:border-box; color:#04120B; }
.statcard--hl .statcard-l{ color:rgba(4,18,11,.8); font-weight:600; }
.statcard--hl:hover{ transform:translateY(-4px); box-shadow:0 30px 70px -20px rgba(47,232,137,.65); }

/* --- Cartões / serviços ------------------------------------------------- */
.card{ background:linear-gradient(180deg,var(--surface),var(--surface-2)); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:1.7rem; position:relative;
  transition:border-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease); }
.card--hover:hover{ transform:translateY(-4px); border-color:var(--line); box-shadow:var(--glow); }
.cards-3{ display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.cards-2{ display:grid; gap:1.4rem; grid-template-columns:1fr; }
@media(min-width:720px){ .cards-2{ grid-template-columns:1fr 1fr; } }
.svc-icon{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center; margin-bottom:1.1rem;
  background:rgba(47,232,137,.10); border:1px solid var(--line); color:var(--green); }
.svc-icon svg{ width:26px; height:26px; }
.card h3{ margin-bottom:.5rem; }
.card p{ color:var(--muted); font-size:.97rem; }
.card-link{ display:inline-flex; align-items:center; gap:.4rem; margin-top:1.1rem; color:var(--green);
  font-weight:700; font-size:.92rem; }
.card-link svg{ width:1em; height:1em; transition:transform .18s var(--ease); }
.card--hover:hover .card-link svg{ transform:translateX(4px); }
.card-list{ margin-top:1rem; display:grid; gap:.55rem; }
.card-list li{ display:flex; gap:.6rem; align-items:flex-start; color:var(--muted); font-size:.93rem; }
.card-list li::before{ content:'✓'; color:var(--green); font-weight:900; flex:none; }

/* --- Passos (como funciona) --------------------------------------------- */
.steps{ display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); counter-reset:step; }
.step{ position:relative; padding:1.7rem; padding-top:2.4rem; }
.step::before{ counter-increment:step; content:counter(step,decimal-leading-zero); position:absolute; top:1.2rem; left:1.7rem;
  font-family:ui-monospace,monospace; font-weight:700; color:var(--green); font-size:.95rem; }

/* --- Timeline (como colocamos pra crescer) ------------------------------ */
.timeline{ position:relative; max-width:760px; margin-inline:auto; }
.tl-item{ position:relative; padding:0 0 2.2rem 3.6rem; }
.tl-item:last-child{ padding-bottom:0; }
.tl-item::before{ content:''; position:absolute; left:19px; top:8px; bottom:-8px; width:2px;
  background:linear-gradient(180deg,var(--green),var(--line-soft)); }
.tl-item:last-child::before{ display:none; }
.tl-dot{ position:absolute; left:0; top:0; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.9rem; font-weight:700;
  color:var(--green); background:var(--surface); border:1px solid var(--green); box-shadow:0 0 0 4px rgba(47,232,137,.08); z-index:1; }
.tl-body{ padding-top:.25rem; }
.tl-body h3{ margin-bottom:.35rem; }
.tl-body p{ color:var(--muted); font-size:.97rem; }

/* --- Vídeos / prova social (facade) ------------------------------------- */
.videos{ display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.vcard{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden;
  transition:border-color .22s var(--ease), transform .22s var(--ease); }
.vcard:hover{ transform:translateY(-4px); border-color:var(--line); }
.vfacade{ position:relative; aspect-ratio:9/16; background:var(--bg-2); cursor:pointer; overflow:hidden; }
.vfacade img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease), opacity .3s; }
.vfacade:hover img{ transform:scale(1.05); }
.vfacade video{ width:100%; height:100%; object-fit:cover; }
.vplay{ position:absolute; inset:0; display:grid; place-items:center; }
.vplay i{ width:66px; height:66px; border-radius:50%; background:rgba(47,232,137,.92); display:grid; place-items:center;
  box-shadow:0 10px 30px -6px rgba(47,232,137,.6); transition:transform .2s var(--ease); }
.vfacade:hover .vplay i{ transform:scale(1.08); }
.vplay i::before{ content:''; width:0; height:0; border-style:solid; border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #04120B; margin-left:4px; }
.vfacade::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(6,17,14,.85));
  pointer-events:none; }
.vcard-body{ padding:1.2rem 1.3rem 1.4rem; }
.vcard-body .stars{ color:var(--star); letter-spacing:.1em; font-size:.9rem; }
.vcard-body h4{ font-size:1.05rem; font-weight:700; margin-top:.35rem; }
.vcard-body p{ color:var(--muted); font-size:.9rem; margin-top:.25rem; }

/* --- Depoimentos em texto ----------------------------------------------- */
.quote{ background:linear-gradient(180deg,var(--surface),var(--surface-2)); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:1.7rem; }
.quote .stars{ color:var(--star); letter-spacing:.1em; }
.quote blockquote{ margin-top:.8rem; font-size:1.02rem; color:var(--text); }
.quote figcaption{ margin-top:1rem; color:var(--muted); font-size:.9rem; }
.quote figcaption b{ color:var(--text); }

/* --- FAQ ---------------------------------------------------------------- */
.faq{ display:grid; gap:.8rem; }
.faq details{ background:var(--surface); border:1px solid var(--line-soft); border-radius:14px; overflow:hidden; }
.faq summary{ list-style:none; cursor:pointer; padding:1.15rem 1.3rem; font-weight:700; font-size:1.02rem;
  display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; color:var(--green); font-size:1.4rem; font-weight:400; transition:transform .2s var(--ease); flex:none; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details > div{ padding:0 1.3rem 1.25rem; color:var(--muted); }

/* --- Faixa CTA ---------------------------------------------------------- */
.cta-band{ position:relative; overflow:hidden; border-radius:var(--radius-lg);
  background:linear-gradient(150deg,var(--surface-2),var(--surface-3)); border:1px solid var(--line);
  padding:clamp(2.2rem,1.5rem + 3vw,3.6rem); text-align:center; }
.cta-band::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(600px 300px at 50% 0%, rgba(47,232,137,.18), transparent 70%); }
.cta-band > *{ position:relative; z-index:1; }
.cta-band .row{ justify-content:center; margin-top:1.6rem; }

/* --- Kit banner --------------------------------------------------------- */
.kit-band{ display:grid; gap:2rem; align-items:center; background:linear-gradient(150deg,var(--surface),var(--bg-2));
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(1.8rem,1.2rem + 2.5vw,3rem); }
@media (min-width:820px){ .kit-band{ grid-template-columns:1fr 1.25fr; align-items:start; } }
.kit-list{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem .9rem; margin-top:1.3rem; }
.kit-list li{ display:flex; gap:.55rem; align-items:flex-start; color:var(--muted); font-size:.9rem; }
.kit-list li::before{ content:'✓'; color:var(--green); font-weight:900; flex:none; }

/* Grade dos 10 módulos do Kit */
.kit-modules{ display:grid; grid-template-columns:1fr; gap:.6rem; }
@media(min-width:560px){ .kit-modules{ grid-template-columns:1fr 1fr; } }
.kit-mod{ display:flex; gap:.7rem; align-items:flex-start; padding:.8rem .9rem; border-radius:12px;
  background:var(--bg-2); border:1px solid var(--line-soft);
  transition:border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease); }
.kit-mod:hover{ border-color:var(--line); background:rgba(47,232,137,.05); transform:translateY(-2px); }
.kit-mod-n{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.8rem; font-weight:700; color:var(--green); flex:none; margin-top:.15rem; }
.kit-mod b{ display:block; font-size:.9rem; font-weight:700; color:var(--text); letter-spacing:-.01em; line-height:1.25; }
.kit-mod small{ display:block; font-size:.78rem; color:var(--muted-2); margin-top:.15rem; line-height:1.4; }

/* --- Cabeçalho de página interna --------------------------------------- */
.page-head{ padding-top:calc(var(--nav-h) + clamp(2.5rem,1.5rem + 5vw,5rem)); padding-bottom:clamp(1.5rem,1rem + 2vw,2.5rem); }
.breadcrumb{ display:flex; gap:.5rem; align-items:center; color:var(--muted-2); font-size:.85rem; margin-bottom:1.2rem; flex-wrap:wrap; }
.breadcrumb a:hover{ color:var(--green); }
.breadcrumb span{ color:var(--faint); }

/* --- Prose (artigos / conteúdo SEO) ------------------------------------- */
.prose{ max-width:var(--measure); }
.prose > * + *{ margin-top:1.15rem; }
.prose h2{ font-weight:800; letter-spacing:-.025em; font-size:clamp(1.4rem,1rem + 1.6vw,2rem); margin-top:2.6rem; line-height:1.2; }
.prose h3{ font-weight:700; letter-spacing:-.02em; font-size:1.28rem; margin-top:1.8rem; }
.prose p,.prose li{ color:var(--muted); }
.prose strong{ color:var(--text); }
.prose a{ color:var(--green); text-decoration:underline; text-underline-offset:3px; }
.prose ul,.prose ol{ display:grid; gap:.6rem; padding-left:0; }
.prose ul li{ display:flex; gap:.65rem; }
.prose ul li::before{ content:'✓'; color:var(--green); font-weight:900; flex:none; }
.prose ol{ counter-reset:li; }
.prose ol li{ display:flex; gap:.7rem; counter-increment:li; }
.prose ol li::before{ content:counter(li); color:var(--green); font-weight:800; flex:none; font-variant-numeric:tabular-nums; }
.prose blockquote{ border-left:3px solid var(--green); padding-left:1.1rem; color:var(--text); font-size:1.08rem; }

/* Layout de página SEO com sidebar de índice */
.doc-grid{ display:grid; gap:2.5rem; }
@media (min-width:1000px){ .doc-grid{ grid-template-columns:1fr 260px; gap:3.5rem; align-items:start; } }
.toc{ position:sticky; top:calc(var(--nav-h) + 20px); }
.toc h4{ font-size:.75rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted-2); margin-bottom:.8rem; }
.toc a{ display:block; padding:.4rem 0 .4rem .9rem; color:var(--muted); font-size:.92rem; border-left:2px solid var(--line-soft);
  transition:color .18s, border-color .18s; }
.toc a:hover,.toc a.is-active{ color:var(--green); border-left-color:var(--green); }
@media (max-width:999px){ .toc{ display:none; } }

/* --- Blog (grid estilo editorial) --------------------------------------- */
.blog-grid{ display:grid; gap:1.6rem; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); }
.post-card{ background:linear-gradient(180deg,var(--surface),var(--surface-2)); border:1px solid var(--line-soft);
  border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease); }
.post-card:hover{ transform:translateY(-4px); border-color:var(--line); box-shadow:var(--glow); }
.post-card-cover{ aspect-ratio:16/9; background:linear-gradient(150deg,var(--surface-3),var(--bg-2)); position:relative; overflow:hidden; }
.post-card-cover::before{ content:''; position:absolute; inset:0; background:center/54px no-repeat url(/assets/img/logo-icone.webp); opacity:.12; }
.post-card-cover img{ position:relative; z-index:1; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.post-card:hover .post-card-cover img{ transform:scale(1.05); }
.post-card-body{ padding:1.35rem 1.4rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.post-card .meta{ display:flex; gap:.7rem; align-items:center; font-size:.78rem; color:var(--muted-2); margin-bottom:.7rem; }
.post-card h3{ font-size:1.15rem; line-height:1.3; }
.post-card p{ color:var(--muted); font-size:.93rem; margin-top:.55rem; flex:1; }
.post-card .card-link{ margin-top:1rem; }
.chips{ display:flex; gap:.55rem; flex-wrap:wrap; }
.chip{ padding:.42rem .9rem; border-radius:100px; font-size:.85rem; font-weight:600; cursor:pointer;
  background:var(--surface); border:1px solid var(--line-soft); color:var(--muted); transition:.18s var(--ease); }
.chip:hover{ color:var(--text); border-color:var(--line); }
.chip.is-active{ background:rgba(47,232,137,.12); color:var(--green); border-color:var(--line); }

/* Post individual */
.post-hero{ aspect-ratio:21/9; border-radius:var(--radius-lg); overflow:hidden; margin-top:1.5rem;
  background:linear-gradient(150deg,var(--surface-3),var(--bg-2)); }
.post-hero img{ width:100%; height:100%; object-fit:cover; }
.post-meta{ display:flex; gap:1rem; align-items:center; color:var(--muted); font-size:.9rem; flex-wrap:wrap; }

/* --- Revelação no scroll ------------------------------------------------ */
/* Sem JS (ou crawler): tudo visível. Com JS: esconde até entrar na viewport. */
.reveal{ transition:opacity .7s var(--ease), transform .7s var(--ease); }
html.js .reveal:not(.is-in){ opacity:0; transform:translateY(20px); }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
.reveal[data-delay="4"]{ transition-delay:.32s; }

/* --- WhatsApp flutuante ------------------------------------------------- */
.wa-float{ position:fixed; right:18px; bottom:18px; z-index:40; width:60px; height:60px; border-radius:50%;
  background:#25D366; display:grid; place-items:center; box-shadow:0 12px 30px -8px rgba(37,211,102,.6);
  transition:transform .2s var(--ease); animation:wa-pulse 2.6s infinite; }
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:32px; height:32px; }
@keyframes wa-pulse{ 0%{ box-shadow:0 12px 30px -8px rgba(37,211,102,.6), 0 0 0 0 rgba(37,211,102,.5); }
  70%{ box-shadow:0 12px 30px -8px rgba(37,211,102,.6), 0 0 0 16px rgba(37,211,102,0); }
  100%{ box-shadow:0 12px 30px -8px rgba(37,211,102,.6), 0 0 0 0 rgba(37,211,102,0); } }

/* --- Popup de lead (formulário → WhatsApp) ------------------------------ */
.lead-modal{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:1.2rem; }
.lead-modal[hidden]{ display:none; }
.lead-modal-overlay{ position:absolute; inset:0; background:rgba(3,9,7,.72); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.lead-modal-dialog{ position:relative; z-index:1; width:min(100%,560px); max-height:90vh; overflow-y:auto;
  background:linear-gradient(165deg,var(--surface-2),var(--surface)); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:clamp(1.5rem,1rem + 2vw,2.4rem); box-shadow:0 40px 90px -30px rgba(0,0,0,.85);
  animation:lm-in .28s var(--ease); }
@keyframes lm-in{ from{ opacity:0; transform:translateY(16px) scale(.98); } }
.lead-modal-x{ position:absolute; top:1rem; right:1rem; width:38px; height:38px; border-radius:10px;
  background:var(--surface-3); border:1px solid var(--line-soft); color:var(--muted); font-size:1.5rem; line-height:1; cursor:pointer; }
.lead-modal-x:hover{ color:var(--text); border-color:var(--line); }
.lead-form{ display:grid; gap:1.1rem; margin-top:1.4rem; }
.lf-field{ display:grid; gap:.5rem; }
.lf-field > label,.lf-q{ font-size:.85rem; font-weight:700; color:var(--text); }
.lf-field input[type=text],.lf-field input[type=tel]{ width:100%; padding:.85rem 1rem; border-radius:12px;
  background:var(--bg-2); border:1px solid var(--line-soft); color:var(--text); }
.lf-field input::placeholder{ color:var(--muted-2); }
.lf-field input:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(47,232,137,.15); }
.lf-choices{ display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }
.lf-choices label{ cursor:pointer; position:relative; }
.lf-choices input{ position:absolute; opacity:0; pointer-events:none; }
.lf-choices span{ display:block; text-align:center; padding:.7rem .6rem; border-radius:100px; font-size:.85rem; font-weight:600;
  background:var(--bg-2); border:1px solid var(--line-soft); color:var(--muted); transition:.16s var(--ease); }
.lf-choices label:hover span{ border-color:var(--line); color:var(--text); }
.lf-choices input:checked + span{ background:rgba(47,232,137,.14); border-color:var(--green); color:var(--green); }
.lf-choices input:focus-visible + span{ outline:2px solid var(--green-lt); outline-offset:2px; }
.lf-note{ font-size:.8rem; color:var(--muted-2); text-align:center; }
body.modal-open{ overflow:hidden; }

/* --- Rodapé ------------------------------------------------------------- */
.foot{ border-top:1px solid var(--line-soft); padding-block:3rem 2rem; margin-top:2rem; }
.foot-grid{ display:grid; gap:2.2rem; grid-template-columns:1.5fr 1fr 1fr; }
@media (max-width:760px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:1.8rem; } }
@media (max-width:460px){ .foot-grid{ grid-template-columns:1fr; } }
.foot-logo img{ height:30px; margin-bottom:1rem; }
.foot p{ color:var(--muted); font-size:.92rem; max-width:36ch; }
.foot h5{ font-size:.75rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted-2); margin-bottom:1rem; }
.foot-links{ display:grid; gap:.6rem; }
.foot-links a{ color:var(--muted); font-size:.93rem; transition:color .18s; }
.foot-links a:hover{ color:var(--green); }
.foot-social{ display:flex; gap:.7rem; margin-top:1.2rem; }
.foot-social a{ width:40px; height:40px; border-radius:10px; border:1px solid var(--line-soft); display:grid; place-items:center;
  color:var(--muted); transition:.18s var(--ease); }
.foot-social a:hover{ color:var(--green); border-color:var(--line); background:rgba(47,232,137,.06); }
.foot-social svg{ width:19px; height:19px; }
.foot-bottom{ margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line-soft);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; color:var(--faint); font-size:.83rem; }

/* --- Acessibilidade ----------------------------------------------------- */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link{ position:absolute; left:.5rem; top:-4rem; z-index:99; padding:.7rem 1.1rem; background:var(--green); color:#04120B;
  border-radius:8px; font-weight:700; transition:top .2s var(--ease); }
.skip-link:focus{ top:.5rem; }