/* =========================================================================
   Komunick — folha de estilo principal
   Paleta: verde da marca + branco + tons de preto
   ========================================================================= */

:root{
  /* verde da marca, extraído do logotipo */
  --green:        #3FAE35;
  --green-bright: #5AD04C;
  --green-deep:   #268A1F;   /* 4.6:1 sobre branco */
  --on-green:     #062A07;   /* 7:1 sobre o verde da marca */

  /* pretos */
  --ink-900: #060806;
  --ink-800: #0F1310;
  --ink-700: #171C18;

  /* claros */
  --white:  #FFFFFF;
  --mist:   #F5F8F5;
  --line:   #DEE5DE;

  /* texto */
  --tx-on-dark:      #FFFFFF;
  --tx-on-dark-soft: #A9B5AC;
  --tx-on-light:     #10150F;
  --tx-on-light-soft:#525B53;

  --shell: 1200px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow-card: 0 1px 2px rgba(6,8,6,.05), 0 12px 32px -12px rgba(6,8,6,.14);
  --shadow-lift: 0 2px 4px rgba(6,8,6,.06), 0 28px 60px -20px rgba(6,8,6,.24);
  --shadow-green: 0 12px 30px -10px rgba(63,174,53,.55);

  --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ------------------------------- reset -------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font);
  font-size:clamp(1rem, .95rem + .2vw, 1.0625rem);
  line-height:1.65;
  color:var(--tx-on-light);
  background:var(--ink-900);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  -webkit-tap-highlight-color:rgba(63,174,53,.16);
}
img,svg,video{ display:block; max-width:100%; }
h1,h2,h3,h4{ margin:0; line-height:1.12; letter-spacing:-.022em; font-weight:800; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }

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

.skip-link{
  position:absolute; left:16px; top:-120px; z-index:200;
  background:var(--green); color:#fff; font-weight:700;
  padding:12px 20px; border-radius:var(--r-pill);
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:16px; }

/* ------------------------------- layout ------------------------------- */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:clamp(20px, 5vw, 40px);
}
.shell--narrow{ max-width:820px; }

.section{
  position:relative;
  padding-block:clamp(72px, 9vw, 128px);
}
.section--light{ background:var(--white); color:var(--tx-on-light); }
.section--dark{ background:var(--ink-900); color:var(--tx-on-dark); }

.section-head{ max-width:720px; margin-bottom:clamp(40px,5vw,64px); }
.section-title{
  font-size:clamp(1.9rem, 1.25rem + 2.6vw, 3.1rem);
  margin-bottom:18px;
}
.section-lead{
  font-size:clamp(1.02rem, .98rem + .3vw, 1.18rem);
  color:var(--tx-on-light-soft);
  max-width:62ch;
}
.section--dark .section-lead,
.section--cta .section-lead{ color:var(--tx-on-dark-soft); }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.78rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--green-bright);
  margin-bottom:18px;
}
.eyebrow::before{
  content:""; width:26px; height:2px; border-radius:2px;
  background:currentColor; opacity:.85;
}
.eyebrow--dark{ color:var(--green-deep); }

/* ------------------------------ buttons ------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 24px;
  border:1px solid transparent;
  border-radius:var(--r-pill);
  font-weight:700; font-size:.98rem; letter-spacing:-.01em;
  cursor:pointer;
  transition:transform .18s var(--ease), background-color .18s var(--ease),
             box-shadow .25s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn-sm{ padding:10px 18px; font-size:.9rem; }
.btn-lg{ padding:16px 32px; font-size:1.02rem; }
.btn-block{ width:100%; }

.btn-primary{
  background:var(--green); color:var(--on-green);
  box-shadow:var(--shadow-green);
}
.btn-ghost{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.28);
  color:#fff;
  backdrop-filter:blur(8px);
}
/* No toque o :hover fica preso depois do tap, então o realce em relevo só
   existe onde há mouse de verdade. */
@media (hover:hover){
  .btn-primary:hover{ background:var(--green-bright); transform:translateY(-2px); }
  .btn-ghost:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.5); transform:translateY(-2px); }
}
.btn:active{ transform:translateY(1px) scale(.985); }

/* ------------------------------- header ------------------------------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background-color .3s var(--ease), border-color .3s var(--ease),
             backdrop-filter .3s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{
  background:rgba(6,8,6,.82);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:rgba(255,255,255,.09);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  min-height:78px;
}

.brand{ display:flex; align-items:center; flex:0 0 auto; min-height:44px; }
.brand-logo{
  width:auto; height:30px;
}
.site-header .brand-logo{ filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)) drop-shadow(0 4px 14px rgba(0,0,0,.45)); }

.nav{ display:flex; align-items:center; gap:clamp(18px,2.4vw,34px); }
.nav > a:not(.btn){
  font-size:.95rem; font-weight:600; color:rgba(255,255,255,.82);
  position:relative; padding-block:6px;
  transition:color .2s var(--ease);
}
.nav > a:not(.btn)::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--green-bright); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease);
}
@media (hover:hover){
  .nav > a:not(.btn):hover{ color:#fff; }
  .nav > a:not(.btn):hover::after{ transform:scaleX(1); }
}

.nav-toggle{
  display:none;
  width:44px; height:44px; padding:0;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  border-radius:12px; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span{
  display:block; width:19px; height:2px; border-radius:2px; background:#fff;
  transition:transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------------------------- fundo em vídeo -------------------------- */
.media-bg{ position:absolute; inset:0; overflow:hidden; z-index:0; background:var(--ink-900); }
.section--ia .media-bg{ background:var(--mist); }
.media-bg__poster,
.media-bg__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.media-bg__video{ opacity:0; transition:opacity .8s var(--ease); }
.media-bg__video.is-live{ opacity:1; }
.media-bg__scrim{ position:absolute; inset:0; }

.media-bg__scrim--hero{
  background:
    radial-gradient(120% 85% at 50% 42%, rgba(6,8,6,0) 0%, rgba(6,8,6,.55) 62%, rgba(6,8,6,.9) 100%),
    linear-gradient(180deg, rgba(6,8,6,.9) 0%, rgba(6,8,6,.35) 26%, rgba(6,8,6,.55) 68%, var(--ink-900) 100%);
}
.media-bg__scrim--ia{
  background:
    linear-gradient(100deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.93) 40%,
                    rgba(255,255,255,.55) 62%, rgba(255,255,255,.25) 100%),
    linear-gradient(180deg, var(--white) 0%, rgba(255,255,255,0) 16%,
                    rgba(255,255,255,0) 84%, var(--white) 100%);
}

/* -------------------------------- hero -------------------------------- */
.hero{
  position:relative;
  min-height:min(100svh, 900px);
  display:flex; align-items:center;
  padding-block:clamp(140px,17vh,190px) clamp(96px,12vh,140px);
  color:var(--tx-on-dark);
  background:var(--ink-900);
  isolation:isolate;
}
.hero-inner{ position:relative; z-index:1; max-width:900px; }
.hero-title{
  font-size:clamp(2.35rem, 1.2rem + 4.9vw, 4.5rem);
  letter-spacing:-.032em;
  margin-bottom:24px;
  text-wrap:balance;
}
.hero-title em{
  font-style:normal;
  color:var(--green-bright);
  position:relative;
  white-space:nowrap;
}
.hero-title em::after{
  content:""; position:absolute; left:0; right:0; bottom:.06em; height:.1em;
  border-radius:4px;
  background:linear-gradient(90deg, var(--green) 0%, rgba(90,208,76,0) 100%);
  opacity:.55;
}
.hero-lead{
  font-size:clamp(1.06rem, 1rem + .5vw, 1.3rem);
  color:rgba(255,255,255,.8);
  max-width:60ch;
  margin-bottom:38px;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:52px; }

.hero-tags{ display:flex; flex-wrap:wrap; gap:10px; }
.hero-tags li{
  font-size:.86rem; font-weight:600;
  color:rgba(255,255,255,.78);
  padding:8px 16px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(6px);
}

.hero-scroll{
  position:absolute; left:50%; bottom:26px; z-index:1;
  transform:translateX(-50%);
  width:26px; height:42px; border-radius:var(--r-pill);
  border:1.5px solid rgba(255,255,255,.32);
  display:grid; place-items:start center; padding-top:8px;
}
.hero-scroll span{
  width:3px; height:8px; border-radius:2px; background:var(--green-bright);
  animation:scrollDot 1.9s var(--ease) infinite;
}
@keyframes scrollDot{
  0%,100%{ transform:translateY(0); opacity:1; }
  55%    { transform:translateY(14px); opacity:.15; }
}

/* ------------------------------- cards -------------------------------- */
.cards{
  display:grid; gap:20px;
  grid-template-columns:1fr;
}
@media (min-width:640px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .cards{ grid-template-columns:repeat(4,1fr); } }
.card{
  position:relative;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:32px 30px 34px;
  box-shadow:var(--shadow-card);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
@media (hover:hover){
  .card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lift); border-color:#C9D6C9; }
}
.card h3{
  font-size:1.22rem; margin-bottom:12px;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
}
.card p{ color:var(--tx-on-light-soft); font-size:.985rem; }

.card-icon{
  width:52px; height:52px; margin-bottom:22px;
  border-radius:15px;
  display:grid; place-items:center;
  background:linear-gradient(150deg, rgba(63,174,53,.16), rgba(63,174,53,.05));
  color:var(--green-deep);
  border:1px solid rgba(63,174,53,.2);
}
.card-icon svg{ width:26px; height:26px; }

.card--accent{
  background:linear-gradient(165deg, var(--ink-800) 0%, var(--ink-900) 100%);
  border-color:rgba(63,174,53,.4);
  color:var(--tx-on-dark);
}
.card--accent p{ color:rgba(255,255,255,.76); }
.card--accent .card-icon{
  background:linear-gradient(150deg, rgba(90,208,76,.24), rgba(90,208,76,.06));
  border-color:rgba(90,208,76,.35);
  color:var(--green-bright);
}
@media (hover:hover){ .card--accent:hover{ border-color:var(--green); } }

.tag{
  font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 10px; border-radius:var(--r-pill);
  background:rgba(90,208,76,.16); color:var(--green-bright);
  border:1px solid rgba(90,208,76,.3);
}

/* --------------------------- seção de IA ------------------------------ */
.section--ia{
  background:var(--white);
  color:var(--tx-on-light);
  isolation:isolate;
  overflow:hidden;
}
.ia-inner{ position:relative; z-index:1; }
.ia-copy{ max-width:640px; }
.ia-list{ display:grid; gap:20px; margin:36px 0 40px; }
.ia-list li{
  position:relative;
  padding-left:42px;
  color:var(--tx-on-light-soft);
  font-size:.99rem;
}
.ia-list strong{
  display:block;
  color:var(--tx-on-light);
  font-size:1.06rem; font-weight:700;
  margin-bottom:4px; letter-spacing:-.015em;
}
.ia-list li::before{
  content:""; position:absolute; left:0; top:3px;
  width:26px; height:26px; border-radius:50%;
  background:var(--green);
  box-shadow:0 6px 16px -6px rgba(63,174,53,.7);
}
.ia-list li::after{
  content:""; position:absolute; left:8.5px; top:11px;
  width:9px; height:5px;
  border-left:2.2px solid #fff; border-bottom:2.2px solid #fff;
  transform:rotate(-45deg);
}

/* ------------------------------- passos ------------------------------- */
.steps{
  display:grid; gap:22px;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  counter-reset:step;
}
.step{
  position:relative;
  padding:30px 26px 32px;
  background:var(--mist);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  transition:transform .3s var(--ease), background-color .3s var(--ease);
}
@media (hover:hover){ .step:hover{ transform:translateY(-4px); background:var(--white); } }
.step-num{
  display:grid; place-items:center;
  width:42px; height:42px; margin-bottom:20px;
  border-radius:13px;
  background:var(--ink-900); color:var(--green-bright);
  font-weight:800; font-size:1.05rem;
}
.step h3{ font-size:1.12rem; margin-bottom:10px; }
.step p{ color:var(--tx-on-light-soft); font-size:.95rem; }

/* ------------------------------ motivos ------------------------------- */
.section--dark{ position:relative; overflow:hidden; }
.section--dark::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 60% at 12% 0%, rgba(63,174,53,.16) 0%, transparent 60%),
    radial-gradient(50% 55% at 92% 100%, rgba(63,174,53,.11) 0%, transparent 62%);
  pointer-events:none;
}
.section--dark .shell{ position:relative; z-index:1; }

.reasons{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.reason{
  background:var(--ink-900);
  padding:32px 30px 34px;
  transition:background-color .3s var(--ease);
}
@media (hover:hover){ .reason:hover{ background:var(--ink-800); } }
.reason h3{
  font-size:1.08rem; margin-bottom:10px;
  display:flex; align-items:center; gap:10px;
}
.reason h3::before{
  content:""; flex:0 0 auto;
  width:8px; height:8px; border-radius:50%;
  background:var(--green-bright);
  box-shadow:0 0 0 4px rgba(90,208,76,.16);
}
.reason p{ color:var(--tx-on-dark-soft); font-size:.94rem; }

/* --------------------------- landing pages ---------------------------- */
.motivos-lp{
  display:grid; gap:20px;
  grid-template-columns:1fr;
  margin-bottom:clamp(40px,5vw,60px);
}
/* explícito em vez de auto-fit: com três itens o auto-fit criava uma quarta
   coluna vazia e o cálculo estourava a largura do contêiner */
@media (min-width:860px){ .motivos-lp{ grid-template-columns:repeat(3,1fr); } }
.motivos-lp li{
  position:relative;
  padding:22px 24px 24px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.035);
  color:var(--tx-on-dark-soft);
  font-size:.95rem;
}
.motivos-lp strong{
  display:block; margin-bottom:8px;
  color:#fff; font-size:1.02rem; font-weight:700; letter-spacing:-.015em;
}

.lp-galeria{
  display:grid; gap:24px;
  grid-template-columns:1fr;
}
@media (min-width:660px){ .lp-galeria{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .lp-galeria{ grid-template-columns:repeat(3,1fr); } }

.lp-card{ margin:0; }

/* moldura de navegador: o print é entendido na hora como "site no ar" */
.lp-janela{
  border-radius:14px; overflow:hidden;
  background:var(--ink-800);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 40px -20px rgba(0,0,0,.9);
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.lp-barra{
  display:flex; align-items:center; gap:6px;
  height:28px; padding-inline:12px;
  background:rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.lp-barra i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.26); }
.lp-janela img{
  width:100%; height:auto; aspect-ratio:1440/900; object-fit:cover; object-position:top center;
  background:var(--ink-700);
}
@media (hover:hover){
  .lp-card:hover .lp-janela{
    transform:translateY(-5px);
    border-color:rgba(90,208,76,.55);
    box-shadow:0 26px 54px -22px rgba(0,0,0,.95);
  }
}

.lp-cta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:18px 26px; text-align:center;
  margin-top:clamp(40px,5vw,60px);
  padding-top:clamp(32px,4vw,44px);
  border-top:1px solid rgba(255,255,255,.1);
}
.lp-cta p{ font-size:clamp(1.05rem,1rem + .35vw,1.25rem); font-weight:600; color:#fff; }

@media (max-width:640px){
  .motivos-lp{ gap:12px; margin-bottom:34px; }
  .motivos-lp li{ padding:18px 20px 20px; }
  .lp-galeria{ gap:18px; }
  .lp-cta{ margin-top:34px; padding-top:28px; }
  .lp-cta .btn{ width:100%; }
}

/* -------------------------------- FAQ --------------------------------- */
.faq{ display:grid; gap:12px; }
.faq details{
  background:var(--mist);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  transition:background-color .25s var(--ease), border-color .25s var(--ease);
}
.faq details[open]{ background:var(--white); border-color:rgba(63,174,53,.4); box-shadow:var(--shadow-card); }
.faq summary{
  list-style:none; cursor:pointer;
  padding:20px 58px 20px 24px;
  font-weight:700; font-size:1.03rem; letter-spacing:-.015em;
  position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:22px; top:50%;
  width:11px; height:11px; margin-top:-7px;
  border-right:2.4px solid var(--green-deep);
  border-bottom:2.4px solid var(--green-deep);
  transform:rotate(45deg);
  transition:transform .25s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.faq-body{ padding:0 24px 22px; }
.faq-body p{ color:var(--tx-on-light-soft); font-size:.97rem; }

/* ------------------------------ contato ------------------------------- */
.section--cta{
  color:var(--tx-on-dark);
  background:
    radial-gradient(75% 90% at 8% 8%, rgba(63,174,53,.28) 0%, transparent 58%),
    radial-gradient(65% 80% at 100% 100%, rgba(38,138,31,.3) 0%, transparent 60%),
    var(--ink-900);
}
.contato-inner{
  display:grid; gap:clamp(36px,5vw,64px);
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:960px){
  .contato-inner{ grid-template-columns:1fr minmax(430px,.9fr); }
}
.contato-links{ display:grid; gap:12px; margin-top:36px; }
.contato-link{
  display:flex; align-items:center; gap:16px;
  padding:16px 20px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.05);
  transition:border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease);
}
@media (hover:hover){
  .contato-link:hover{ border-color:var(--green-bright); background:rgba(255,255,255,.09); transform:translateX(4px); }
}
.contato-link__ico{
  flex:0 0 auto; width:42px; height:42px; border-radius:12px;
  display:grid; place-items:center;
  background:rgba(90,208,76,.16); color:var(--green-bright);
}
.contato-link__ico svg{ width:22px; height:22px; }
.contato-link span:last-child{ display:flex; flex-direction:column; font-size:.9rem; color:var(--tx-on-dark-soft); line-height:1.4; }
.contato-link strong{ font-size:1rem; color:#fff; letter-spacing:-.015em; }

.form-wrap{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg);
  padding:clamp(24px,3.2vw,36px);
  backdrop-filter:blur(14px);
}
.form{ display:grid; gap:18px; }
.field{ display:grid; gap:7px; }

.field label{ font-size:.88rem; font-weight:600; color:rgba(255,255,255,.85); }
.field .opt{ color:var(--tx-on-dark-soft); font-weight:500; }

.field input,
.field textarea,
.field select{
  width:100%;
  padding:13px 16px;
  background:rgba(6,8,6,.5);
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  color:#fff;
  font-size:1rem;              /* 16px: abaixo disso o iOS dá zoom ao focar */
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.field textarea{ resize:vertical; min-height:104px; }
.field input::placeholder,
.field textarea::placeholder{ color:rgba(255,255,255,.46); }
.field input:focus,
.field textarea:focus,
.field select:focus{ border-color:var(--green-bright); background:rgba(6,8,6,.72); }
.field select option{ background:var(--ink-800); color:#fff; }

.select-wrap{ position:relative; }
.select-wrap select{ appearance:none; padding-right:44px; cursor:pointer; }
.select-wrap::after{
  content:""; position:absolute; right:18px; top:50%; margin-top:-5px;
  width:9px; height:9px;
  border-right:2.2px solid var(--green-bright);
  border-bottom:2.2px solid var(--green-bright);
  transform:rotate(45deg); pointer-events:none;
}

.field-error{ font-size:.82rem; color:#FF8E7A; min-height:0; }
.field.is-invalid input{ border-color:#FF8E7A; }
.form-note{ font-size:.82rem; color:var(--tx-on-dark-soft); text-align:center; }
.form-status{
  padding:12px 16px; border-radius:12px; font-size:.92rem; font-weight:600;
  background:rgba(90,208,76,.14); border:1px solid rgba(90,208,76,.35); color:var(--green-bright);
}

/* ------------------------------- rodapé ------------------------------- */
.site-footer{
  background:var(--ink-900);
  color:var(--tx-on-dark);
  border-top:1px solid rgba(255,255,255,.09);
  padding-top:clamp(52px,6vw,76px);
}
.footer-inner{
  display:grid; gap:44px;
  grid-template-columns:1fr;
  padding-bottom:44px;
}
@media (min-width:840px){ .footer-inner{ grid-template-columns:1.1fr 1.6fr; } }
.footer-brand .brand{ min-height:0; }
.footer-brand .brand-logo{ height:28px; margin-bottom:18px; }
.footer-brand p{ color:var(--tx-on-dark-soft); font-size:.94rem; max-width:38ch; }

.footer-nav{ display:grid; gap:32px; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); }
.footer-nav h4{
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green-bright); margin-bottom:16px; font-weight:700;
}
.footer-nav a{
  display:block; font-size:.94rem; color:var(--tx-on-dark-soft);
  padding-block:10px; transition:color .2s var(--ease);
}
@media (hover:hover){ .footer-nav a:hover{ color:#fff; } }

.footer-bottom{
  display:flex; flex-wrap:wrap; gap:10px 24px;
  justify-content:space-between; align-items:center;
  padding-block:24px;
  border-top:1px solid rgba(255,255,255,.09);
  font-size:.86rem; color:var(--tx-on-dark-soft);
}
.footer-made{ color:rgba(255,255,255,.45); }

/* ------------------------- animação de entrada ------------------------ */
.js .reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:var(--d, 0ms);
}
.js .reveal.is-visible{ opacity:1; transform:none; }

/* --------------------------- responsividade --------------------------- */
/* Com cinco itens, o menu horizontal quebra em duas linhas abaixo de 1100px —
   por isso o sanduíche entra antes do que o normal. */
@media (max-width:1099px){
  .nav{
    position:fixed; inset:78px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(6,8,6,.97);
    backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(255,255,255,.1);
    padding:8px 20px 26px;
    transform:translateY(-12px);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
    max-height:calc(100svh - 78px); overflow-y:auto;
  }
  .nav.is-open{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
  .nav > a:not(.btn){
    padding:16px 4px; font-size:1.05rem;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .nav > a:not(.btn)::after{ display:none; }
  .nav-cta{ margin-top:20px; justify-content:center; padding:15px 24px; font-size:1rem; }
  .nav-toggle{ display:flex; }
}

@media (max-width:900px){
  /* Cobrindo a seção inteira, o recorte vertical deixa o chip no meio do
     texto — e o véu branco que o texto precisa acaba apagando o vídeo. Numa
     faixa no topo o chip aparece inteiro e o texto fica sobre branco puro. */
  .section.section--ia{
    --faixa-ia:clamp(320px, 92vw, 520px);
    padding-top:calc(var(--faixa-ia) - 26px);
  }
  .section--ia .media-bg{ inset:0 0 auto 0; height:var(--faixa-ia); }
  .media-bg__scrim--ia{
    background:linear-gradient(180deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.05) 50%,
      rgba(255,255,255,.52) 78%,
      var(--white) 100%);
  }
}

@media (max-height:760px) and (min-width:641px){
  .hero{ min-height:auto; padding-block:124px 76px; }
  .hero-actions{ margin-bottom:36px; }
}

/* --------------------------------- celular ---------------------------- */
@media (max-width:640px){
  /* Ritmo vertical mais curto: a página encolhe quase 3 mil pixels sem
     perder respiro, porque no celular a rolagem é o custo principal. */
  .section{ padding-block:56px; }
  .section-head{ margin-bottom:28px; }
  .section-title{ margin-bottom:14px; }

  .hero{ min-height:auto; padding-block:104px 60px; }
  .hero-scroll{ display:none; }
  .hero-title{ margin-bottom:18px; }
  .hero-lead{ margin-bottom:26px; }
  .hero-actions{ margin-bottom:32px; gap:12px; }
  .hero-actions .btn{ flex:1 1 100%; }
  .hero-tags{ gap:8px; }
  .hero-tags li{ font-size:.8rem; padding:6px 13px; }

  /* Cartões com o ícone ao lado do título, não empilhado acima dele. */
  .cards{ gap:14px; }
  .card{
    display:grid; grid-template-columns:auto 1fr;
    column-gap:14px; align-items:center;
    padding:20px;
  }
  .card-icon{ width:42px; height:42px; margin:0; border-radius:12px; }
  .card-icon svg{ width:22px; height:22px; }
  .card h3{ grid-column:2; font-size:1.1rem; }
  .card p{ grid-column:1 / -1; margin-top:12px; }
  .tag{ font-size:.64rem; padding:3px 9px; }

  .ia-list{ gap:16px; margin:26px 0 30px; }
  .ia-list li{ padding-left:38px; }

  /* Os quatro passos viram uma linha do tempo — mesma informação, metade
     da altura, e a sequência fica mais óbvia que em cartões soltos. */
  .steps{ gap:0; }
  .step{
    display:grid; grid-template-columns:auto 1fr;
    column-gap:15px; align-items:start;
    background:none; border:0; border-radius:0;
    padding:0 0 24px;
  }
  .step::after{
    content:""; position:absolute; left:18px; top:46px; bottom:0;
    width:2px; border-radius:2px;
    background:linear-gradient(180deg, rgba(63,174,53,.5), rgba(63,174,53,0));
  }
  .step:last-child{ padding-bottom:0; }
  .step:last-child::after{ display:none; }
  .step-num{ width:38px; height:38px; margin:0; border-radius:11px; font-size:.98rem; }
  .step h3{ grid-column:2; font-size:1.06rem; margin-bottom:6px; padding-top:7px; }
  .step p{ grid-column:2; }

  .reason{ padding:20px 22px 22px; }
  .reason h3{ font-size:1.02rem; margin-bottom:7px; }

  .faq{ gap:10px; }
  .faq summary{ padding:16px 46px 16px 18px; font-size:.98rem; }
  .faq summary::after{ right:18px; }
  .faq-body{ padding:0 18px 18px; }

  .contato-links{ margin-top:26px; gap:10px; }
  .contato-link{ padding:14px 16px; gap:13px; }
  .contato-link__ico{ width:38px; height:38px; border-radius:11px; }
  .form-wrap{ padding:22px 18px 24px; }
  .form{ gap:15px; }

  .site-footer{ padding-top:44px; }
  .footer-inner{ gap:30px; padding-bottom:30px; }
  .footer-brand p{ font-size:.9rem; }
  .footer-nav{ gap:24px 18px; }
  .footer-nav h4{ margin-bottom:6px; }
  .footer-nav a{ padding-block:9px; font-size:.9rem; }
  .footer-bottom{ justify-content:flex-start; padding-block:20px; }
}

/* ------------------- barra de ação fixa (só no celular) ---------------- */
/* Num site de captação, o WhatsApp precisa estar sempre a um toque de
   distância — no desktop os botões do topo já cumprem esse papel. */
.acao-fixa{
  position:fixed; z-index:90;
  left:0; right:0; bottom:0;
  display:none; gap:10px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(6,8,6,.9);
  backdrop-filter:blur(14px) saturate(140%);
  border-top:1px solid rgba(255,255,255,.1);
  transform:translateY(110%);
  transition:transform .3s var(--ease);
}
.acao-fixa.is-visible{ transform:none; }
.acao-fixa .btn{ flex:1 1 0; padding:14px 12px; font-size:.95rem; white-space:nowrap; }
.acao-fixa .btn-ghost{ flex:0 0 auto; padding-inline:20px; }
/* Em telas bem estreitas o rótulo encurta em vez de quebrar em duas linhas. */
@media (max-width:359px){
  .acao-fixa__longo{ display:none; }
  .acao-fixa{ padding-inline:12px; gap:8px; }
  .acao-fixa .btn{ font-size:.9rem; }
  .acao-fixa .btn-ghost{ padding-inline:16px; }
}

@media (max-width:640px){
  .acao-fixa{ display:flex; }
  body.tem-acao-fixa{ padding-bottom:76px; }
}
@media (max-width:640px) and (prefers-reduced-motion:reduce){
  .acao-fixa{ transition:none; }
}

/* Celular deitado: sobra pouca altura, então o topo encolhe mais ainda. */
@media (max-width:900px) and (max-height:520px) and (orientation:landscape){
  .hero{ padding-block:96px 48px; }
  .hero-tags{ display:none; }
  .acao-fixa{ display:none; }
  body.tem-acao-fixa{ padding-bottom:0; }
}

/* ------------------------ preferências do sistema --------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js .reveal{ opacity:1; transform:none; }
}

@media print{
  .site-header,.hero-scroll,.media-bg,.form-wrap{ display:none !important; }
  body{ background:#fff; color:#000; }
  .section{ padding-block:24px; }
}