/* ============ TOKENS ============ */
:root{
  --bg:#fafcfa;
  --bg-2:#ffffff;
  --panel:#ffffff;
  --panel-2:#f3f6f4;
  --line:#e3e9e5;
  --line-soft:rgba(16,35,26,.06);
  --ink:#10231a;
  --muted:#3d3d3d;
  --muted-2:#666666;
  --signal:#1f9d55;
  --signal-deep:#146b3a;
  --signal-dim:#eaf7ef;
  --cta-green-1:#32b567;
  --cta-green-2:#178a49;
  --cta-green-3:#0d5b2e;
  --metal:#2f6690;
  --metal-deep:#1f4863;
  --sans:'Nunito', sans-serif;
  --mono:'JetBrains Mono', monospace;
  --container:1180px;
  /* fluid spacing scale — mesma escala em todas as larguras, sem saltos bruscos */
  --space-section: clamp(32px, 4.5vw, 48px);
  --space-head: clamp(20px, 2.5vw, 28px);
  --gutter: clamp(16px, 5vw, 24px);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-weight:400; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  touch-action:manipulation; /* impede o zoom ao tocar 2x na tela, sem bloquear o pinça-pra-zoom manual */
}
img{max-width:100%; height:auto; display:block;}
a{color:inherit; text-decoration:none;}
.container{max-width:var(--container); margin:0 auto; padding:0 var(--gutter);}
h1,h2,h3,h4{font-family:var(--sans); font-weight:800; margin:0; letter-spacing:-0.01em; color:var(--ink);}
p{margin:0;}
.mono{font-family:var(--mono);}
::selection{background:var(--signal); color:#ffffff;}

/* focus visibility */
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid var(--signal); outline-offset:3px; border-radius:4px;
}

/* ============ SECTION RHYTHM ============ */
section{position:relative; z-index:1; padding:var(--space-section) 0;}
.eyebrow{
  display:inline-flex; align-items:center; justify-content:center; gap:19px;
  font-family:var(--mono); font-size:.92rem; color:var(--signal-deep);
  letter-spacing:.02em; font-weight:600;
  background:var(--signal-dim); border:1px solid rgba(31,157,85,.22);
  border-radius:999px; padding:10px 20px;
  margin-top:19px; margin-bottom:19px;
}
.eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--signal); box-shadow:0 0 8px rgba(31,157,85,.5); flex-shrink:0;}
.kicker{color:var(--muted); font-size:1.05rem; max-width:560px; margin:16px auto 0; text-align:center;}
h2.title{font-size:clamp(1.6rem, 2.6vw, 2.3rem); max-width:760px; margin-left:auto; margin-right:auto;}
.section-head{margin-bottom:var(--space-head); text-align:center;}
#cardapio-digital .section-head{margin-bottom:0;}

/* ============ HEADER ============ */
header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  padding:18px 0; transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease, box-shadow .3s ease;
  border-bottom:1px solid transparent;
}
header.scrolled{
  background:rgba(255,255,255,.88); backdrop-filter:blur(10px);
  border-bottom-color:var(--line);
  box-shadow:0 12px 24px -20px rgba(16,35,26,.18);
}
header .bar{display:flex; align-items:center; justify-content:space-between; gap:24px; position:relative;}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.15rem;}
.logo svg{width:30px; height:30px;}
nav.primary{display:flex; align-items:center; gap:19px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); white-space:nowrap;}
nav.primary a{
  font-size:.92rem; color:var(--muted); transition:color .2s; white-space:nowrap;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:10px 12px;
}
nav.primary a:hover{color:var(--ink);}
.header-actions{display:flex; align-items:center; gap:18px;}
.login-link{
  font-size:.9rem; color:var(--muted);
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:10px 4px;
}
.login-link:hover{color:var(--ink);}
.header-actions .btn-sm{padding:12px 22px;}
.nav-toggle{display:none; background:none; border:1px solid var(--line); color:var(--ink); width:40px; height:40px; border-radius:10px; align-items:center; justify-content:center; cursor:pointer;}
.nav-toggle svg{width:18px; height:18px;}

#hero, #como-funciona, #recursos, #modelos, #comparativo, #planos, #duvidas{scroll-margin-top:150px;}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--sans); font-weight:800; font-size:1rem;
  padding:13px 30px; border-radius:14px; border:1px solid transparent;
  cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  white-space:nowrap;
}
.btn-signal{
  background:linear-gradient(180deg, var(--cta-green-1), var(--cta-green-2));
  color:#ffffff;
  box-shadow:0 3px 0 var(--cta-green-3), 0 14px 26px -14px rgba(13,91,46,.45);
}
.btn-signal:hover{
  transform:translateY(-2px);
  filter:brightness(1.05);
  box-shadow:0 5px 0 var(--cta-green-3), 0 20px 34px -16px rgba(13,91,46,.5);
}
.btn-signal:active{
  transform:translateY(3px);
  filter:brightness(.98);
  box-shadow:0 0 0 var(--cta-green-3), 0 6px 14px -10px rgba(13,91,46,.35);
}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--ink);}
.btn-ghost:hover{border-color:var(--metal); background:rgba(47,102,144,.06);}
.btn-block{width:100%;}
.btn-sm{padding:10px 18px; font-size:.85rem;}

/* ============ HERO ============ */
#hero{padding-top:160px; padding-bottom:0;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center;}
#hero h1{font-size:clamp(2.5rem, 5.4vw, 4.1rem); line-height:1.04; color:var(--ink);}
#hero h1 .accent{color:var(--signal-deep);}
.hero-copy{max-width:560px;}
.hero-copy p.sub{color:var(--muted); font-size:1.12rem; margin-top:20px; max-width:480px;}
.hero-cta-row{display:flex; align-items:center; gap:18px; margin-top:34px; flex-wrap:wrap;}
.hero-note{font-size:.85rem; color:var(--muted-2);}

.hero-grid.hero-centered{grid-template-columns:1fr; justify-items:center; text-align:center; padding-bottom:var(--space-section);}
.hero-centered .hero-copy{max-width:760px;}
.hero-centered .hero-copy p.sub{max-width:640px; margin-left:auto; margin-right:auto;}
.hero-centered .eyebrow{justify-content:center;}
.hero-centered .hero-cta-row{justify-content:center;}
.hero-centered .stat-strip{justify-content:center; max-width:640px; margin-left:auto; margin-right:auto;}

.stat-strip{
  display:flex; gap:0; margin-top:56px; border-top:1px solid var(--line); padding-top:26px;
}
.stat-strip .stat{flex:1; padding-right:20px;}
.stat-strip .stat + .stat{border-left:1px solid var(--line); padding-left:20px;}
.stat-strip b{display:block; font-family:var(--mono); font-size:clamp(1.3rem,2.4vw,1.7rem); color:var(--ink); font-weight:600;}
.stat-strip span{font-size:.82rem; color:var(--muted);}

/* ============ PASSO A PASSO ============ */
.steps-row{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.step-card-flat{
  padding:28px 24px; border-radius:18px; border:1px solid var(--line); background:var(--panel);
  box-shadow:0 1px 2px rgba(16,35,26,.03), 0 14px 28px -22px rgba(16,35,26,.14);
  transition:border-color .25s, transform .25s, box-shadow .25s; text-align:center;
}
.step-card-flat:hover{border-color:var(--signal); transform:translateY(-4px); box-shadow:0 1px 2px rgba(16,35,26,.04), 0 20px 34px -20px rgba(31,157,85,.22);}
.step-num{
  font-family:var(--mono); font-size:.9rem; width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; margin:0 auto 20px;
  border:1px solid var(--signal); color:var(--signal-deep); background:var(--signal-dim);
}
.step-card-flat h3{font-size:1.1rem; margin-bottom:8px; color:var(--ink);}
.step-card-flat p{color:var(--muted); font-size:.95rem;}

/* ============ BENEFITS ============ */
.benefit-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:20px; overflow:hidden;}
.benefit{background:var(--panel); padding:32px 26px; text-align:center;}
.benefit .ic{width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin:0 auto 20px;}
.benefit .ic svg{width:22px; height:22px;}
.benefit h3{font-size:1.05rem; margin-bottom:8px;}
.benefit p{color:var(--muted); font-size:.92rem;}

/* ============ RECURSOS (FEATURES) ============ */
.feat-grid{display:grid; grid-template-columns:repeat(4, 1fr); background:var(--panel); border:1px solid var(--line); border-radius:20px; overflow:hidden;}
.feat{
  display:flex; align-items:center; justify-content:flex-start; text-align:left; gap:12px; padding:20px 18px;
  background:var(--panel);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  transition:background .2s;
}
.feat:hover{background:var(--panel-2);}
.feat:nth-child(4n){border-right:none;}
.feat:nth-last-child(-n+4){border-bottom:none;}
.feat .ic{
  width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background:linear-gradient(155deg, rgba(31,157,85,.16), rgba(47,102,144,.08) 55%, rgba(16,35,26,.03));
  border:1px solid rgba(31,157,85,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  color:var(--signal-deep);
}
.feat .ic svg{width:17px; height:17px;}
.feat span{font-size:.86rem; font-weight:600; line-height:1.25;}

/* ============ AVISO PWA ============ */
.pwa-note{margin-top:20px; background:var(--signal-dim); border:1px solid rgba(31,157,85,.24); border-radius:20px; padding:24px;}
.pwa-note-head{display:flex; gap:14px; align-items:flex-start;}
.pwa-note .ic{width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--panel); border:1px solid rgba(31,157,85,.24); color:var(--signal-deep);}
.pwa-note .ic svg{width:20px; height:20px;}
.pwa-note h3{font-size:1.05rem; margin:0 0 6px; color:var(--ink);}
.pwa-note p{margin:0; color:var(--muted); font-size:.92rem; line-height:1.5;}
.pwa-steps{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:18px;}
.pwa-step{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:4px; font-size:.88rem; color:var(--muted); line-height:1.45;}
.pwa-step > b{color:var(--signal-deep); font-size:.92rem;}
@media (max-width:640px){
  .pwa-note{padding:18px;}
  .pwa-steps{grid-template-columns:1fr;}
}

/* ============ MODELOS (GALLERY) ============ */
.gallery-rail{display:flex; gap:20px; overflow-x:auto; padding:6px 4px 26px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;}
.gallery-rail::-webkit-scrollbar{height:6px;}
.gallery-rail::-webkit-scrollbar-thumb{background:var(--line); border-radius:6px;}
.model-card{
  flex:0 0 292px; scroll-snap-align:start; background:var(--panel); border:1px solid var(--line);
  border-radius:18px; overflow:hidden; transition:border-color .25s, transform .25s, box-shadow .25s;
  box-shadow:0 1px 2px rgba(16,35,26,.03), 0 14px 28px -22px rgba(16,35,26,.14);
}
.model-card:hover{border-color:var(--metal); transform:translateY(-4px); box-shadow:0 20px 34px -20px rgba(16,35,26,.2);}
.model-card .thumb{background:var(--panel-2); border-bottom:1px solid var(--line); padding:22px 0 24px;}
.phone.phone-card{position:relative; --sw:236px; --pad:8px; margin:0 auto;}
.phone-card .iphone{box-shadow:0 0 0 .75cqw #1b2436, 0 0 0 1.1cqw #5b6a86, 0 0 0 1.5cqw #151c2b, 0 18px 34px -20px rgba(6,23,15,.45);}
.model-card .info{padding:16px 18px; text-align:center;}
.model-card h3{font-size:1rem;}
.model-card a.demo-link{display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-size:.82rem; color:var(--signal-deep); font-weight:700;}

/* ============ COMPARATIVO ============ */
.compare-table{width:100%; border-collapse:collapse; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--panel);}
.compare-table th,.compare-table td{padding:16px 18px; border-bottom:1px solid var(--line); text-align:center; font-size:.9rem;}
.compare-table th:first-child,.compare-table td:first-child{text-align:left;}
.compare-table thead th{background:var(--panel-2); font-family:var(--mono); font-weight:600; font-size:.8rem; color:var(--muted); text-transform:none;}
.compare-table th.brand{color:var(--signal-deep);}
.compare-table td.brand-col{background:var(--signal-dim); font-weight:700;}
.compare-table td.muted{color:var(--muted);}
.compare-table tr:last-child td{border-bottom:none;}
.ok{color:var(--signal-deep); font-weight:700;}
.bad{color:var(--muted-2);}
.compare-note{margin-top:18px; font-size:.8rem; color:var(--muted-2);}
.table-scroll{overflow-x:auto;}

/* ============ PROVA SOCIAL / DEPOIMENTO STRIP ============ */
.proof-band{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:0;}
.proof-row{display:flex; align-items:center; justify-content:center; gap:32px 56px; flex-wrap:wrap; text-align:center;}
.proof-item{display:flex; flex-direction:column; align-items:center; gap:4px;}
.proof-item b{font-family:var(--mono); font-size:clamp(1.4rem,2.6vw,2rem); color:var(--ink); font-weight:600;}
.proof-item span{font-size:.85rem; color:var(--muted);}

/* ============ PLANOS ============ */
.plans-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch;}
.plan{position:relative; background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:30px 24px 26px; display:flex; flex-direction:column; text-align:center; box-shadow:0 1px 2px rgba(16,35,26,.03), 0 18px 34px -26px rgba(16,35,26,.18); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;}
.plan:hover{transform:translateY(-4px); box-shadow:0 1px 2px rgba(16,35,26,.04), 0 30px 50px -28px rgba(16,35,26,.28);}
.plan.popular{border-color:var(--signal); box-shadow:0 0 0 1px var(--signal), 0 28px 52px -24px rgba(31,157,85,.34);}
.plan.popular:hover{box-shadow:0 0 0 1px var(--signal), 0 38px 60px -26px rgba(31,157,85,.42);}

.plan-badge{position:absolute; top:-13px; left:50%; transform:translateX(-50%); display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-weight:600; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:linear-gradient(180deg, var(--cta-green-1), var(--cta-green-2)); border:1px solid var(--cta-green-2); padding:6px 14px; border-radius:999px; box-shadow:0 8px 18px -8px rgba(13,91,46,.6); white-space:nowrap;}
.plan-badge svg{width:12px; height:12px;}

.plan-ic{width:48px; height:48px; border-radius:14px; background:var(--signal-dim); border:1px solid rgba(31,157,85,.2); display:flex; align-items:center; justify-content:center; margin:0 auto 14px;}
.plan-ic svg{width:24px; height:24px; color:var(--signal-deep);}
.plan.popular .plan-ic{background:#fff; border-color:var(--signal); box-shadow:0 6px 16px -8px rgba(31,157,85,.4);}
.plan.premium-plan .plan-ic{background:rgba(47,102,144,.08); border-color:rgba(47,102,144,.22);}
.plan.premium-plan .plan-ic svg{color:var(--metal-deep);}

.plan .tag{font-family:var(--mono); font-size:.72rem; color:var(--signal-deep); margin-bottom:8px; display:block;}
.plan .tag.tag-metal{color:var(--metal-deep);}
.plan h3{font-size:1.15rem; margin-bottom:6px;}
.plan .plan-desc{font-size:.85rem; color:var(--muted-2); line-height:1.45; margin:0 auto 16px; max-width:230px; min-height:38px;}

.plan .price{font-family:var(--mono); font-size:2.3rem; font-weight:600; line-height:1; margin-bottom:4px; color:var(--ink);}
.plan .price .cur{font-size:.95rem; font-weight:600; color:var(--muted-2); vertical-align:.85em; margin-right:2px;}
.plan .price small{font-size:.8rem; color:var(--muted-2); font-weight:400;}
.plan .plan-cycle{font-family:var(--mono); font-size:.74rem; color:var(--signal-deep); margin:0 0 4px; min-height:17px; opacity:0; transform:translateY(-2px); transition:opacity .25s ease, transform .25s ease;}
.plans-grid[data-billing-cycle="anual"] .plan-cycle{opacity:1; transform:none;}

.plan-feat-head{margin:18px 0 14px; padding:9px 13px; background:var(--panel-2); border:1px solid var(--line-soft); border-radius:11px; font-size:.8rem; font-weight:800; color:var(--ink); text-align:left;}
.plan ul{list-style:none; margin:0 0 4px; padding:0; display:flex; flex-direction:column; gap:11px;}
.plan li{font-size:.86rem; color:var(--muted); display:flex; gap:9px; align-items:flex-start; text-align:left;}
.plan li svg{width:15px; height:15px; color:var(--signal); flex-shrink:0; margin-top:2px;}
.plan li b{color:var(--ink); font-weight:800;}
.plan li .li-note{display:block; margin-top:3px; font-size:.76rem; line-height:1.4; color:var(--muted-2);}

/* ---- Toggle Mensal / Anual ---- */
.billing-toggle{display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-bottom:var(--space-head);}
.billing-opt{display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-weight:800; font-size:.98rem; color:var(--muted-2); transition:color .25s ease; user-select:none;}
.billing-opt.is-active{color:var(--signal-deep);}
.billing-save{font-family:var(--mono); font-weight:600; font-size:.66rem; color:var(--signal-deep); background:var(--signal-dim); border:1px solid rgba(31,157,85,.22); padding:3px 9px; border-radius:999px; line-height:1; letter-spacing:.01em;}
.billing-switch{position:relative; width:60px; height:32px; flex-shrink:0; padding:0; border:1px solid var(--line); border-radius:999px; background:var(--panel-2); cursor:pointer; box-shadow:inset 0 1px 3px rgba(16,35,26,.09); transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;}
.billing-switch .billing-knob{position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:linear-gradient(180deg,#ffffff,#eef2f0); box-shadow:0 2px 5px rgba(16,35,26,.28); transition:transform .3s cubic-bezier(.34,1.56,.64,1); will-change:transform;}
.billing-switch[aria-checked="true"]{background:linear-gradient(180deg, var(--cta-green-1), var(--cta-green-2)); border-color:var(--cta-green-2); box-shadow:inset 0 1px 2px rgba(13,91,46,.25), 0 3px 10px -6px rgba(13,91,46,.5);}
.billing-switch[aria-checked="true"] .billing-knob{transform:translateX(28px); background:linear-gradient(180deg,#ffffff,#f4fbf6);}
.billing-switch:focus-visible{outline:2px solid var(--signal); outline-offset:3px;}

/* ---- Pagamentos inclusos (por card) ---- */
.plan-pay{margin-top:16px; background:var(--signal-dim); border:1px solid rgba(31,157,85,.16); border-radius:14px; padding:14px 16px; text-align:left;}
.plan-pay-label{display:block; font-weight:800; font-size:.76rem; color:var(--signal-deep); margin-bottom:12px;}
.plan-pay-logos{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px;}
.pay-logo{height:20px; width:auto; display:block;}
.pay-item{display:inline-flex; align-items:center; gap:7px; font-size:.85rem; font-weight:700; color:var(--ink);}
.pay-item img{height:24px; width:24px; border-radius:6px; display:block; flex-shrink:0;}

/* ---- Rodapé do card (CTA fixo embaixo) ---- */
.plan-foot{margin-top:auto; padding-top:20px;}
.plan-cta-note{font-size:.74rem; color:var(--muted-2); margin:10px 0 0; display:flex; align-items:center; justify-content:center; gap:6px;}
.plan-cta-note svg{width:13px; height:13px; color:var(--signal); flex-shrink:0;}

/* ---- Faixa de confiança ---- */
.plans-trust{list-style:none; margin:26px 0 0; padding:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 28px;}
.plans-trust li{display:inline-flex; align-items:center; gap:8px; font-size:.88rem; font-weight:700; color:var(--muted); }
.plans-trust li svg{width:17px; height:17px; color:var(--signal); flex-shrink:0;}

@media (max-width:900px){
  .plans-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .plans-grid{grid-template-columns:1fr;}
  .plan{padding:26px 20px 24px;}
  .plans-trust{gap:12px 20px;}
}

/* ============ FAQ ============ */
.faq-list{max-width:760px; margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{
  list-style:none; cursor:pointer; padding:22px 4px; display:flex; justify-content:space-between;
  align-items:center; gap:20px; font-weight:700; font-size:1rem; color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .chev{width:18px; height:18px; color:var(--muted); transition:transform .2s; flex-shrink:0;}
.faq-item[open] summary .chev{transform:rotate(180deg); color:var(--signal);}
.faq-item .a{padding:0 4px 22px; color:var(--muted); font-size:.92rem; max-width:640px;}

/* ============ CTA FINAL ============ */
.cta-final{
  border-radius:28px; border:1px solid var(--line); padding:70px 50px; text-align:center;
  background:radial-gradient(circle at 50% 0%, var(--signal-dim), transparent 60%), var(--panel);
}
.cta-final h2{font-size:clamp(1.8rem,3.6vw,2.6rem); max-width:680px; margin:0 auto;}
.cta-final p{color:var(--muted); margin:18px auto 0; max-width:480px;}
.cta-final .btn{margin-top:32px;}

/* ============ FOOTER ============ */
footer{border-top:1px solid var(--line); padding:0 0 30px;}
.footer-grid{display:grid; grid-template-columns:1.4fr repeat(5,1fr); gap:32px; text-align:center;}
.footer-brand p{color:var(--muted); font-size:.88rem; margin:14px auto 0; max-width:280px;}
.footer-col h4{font-size:.82rem; color:var(--muted-2); font-family:var(--mono); font-weight:600; margin-bottom:16px;}
.footer-col a{display:block; color:var(--muted); font-size:.9rem; padding:5px 0; transition:color .2s;}
.footer-col a:hover{color:var(--ink);}
.footer-bottom{margin-top:50px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:center; color:var(--muted-2); font-size:.8rem; flex-wrap:wrap; gap:10px 24px; text-align:center;}

/* ============ RESPONSIVE ============ */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr; gap:60px;}
  .stat-strip{flex-wrap:wrap; row-gap:20px;}
  .stat-strip .stat{flex:1 1 45%; border-left:none !important; padding-left:0 !important;}
  .benefit-grid{grid-template-columns:repeat(2,1fr);}
  .feat-grid{grid-template-columns:repeat(2,1fr);}
  .feat:nth-child(4n){border-right:1px solid var(--line);}
  .feat:nth-child(2n){border-right:none;}
  .feat:last-child{border-right:none;}
  .feat{border-bottom:1px solid var(--line);}
  .feat:nth-last-child(-n+2){border-bottom:none;}
  .steps-row{grid-template-columns:1fr;}
  .plans-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr; gap:32px;}
  nav.primary{display:none;}
  .nav-toggle{display:flex;}
  nav.primary a{color:var(--ink); font-weight:700;}
  nav.primary.nav-open{
    display:flex; position:fixed; top:64px; left:16px; right:16px; transform:none;
    background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px;
    flex-direction:column; align-items:flex-start; gap:4px; z-index:60;
    box-shadow:0 20px 40px -20px rgba(16,35,26,.2);
  }
}
@media (max-width:640px){
  #hero{padding-top:140px;}
  .benefit-grid,.feat-grid{grid-template-columns:1fr 1fr;}
  .plans-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .compare-table{font-size:.8rem;}
  .cta-final{padding:50px 22px;}
  .proof-row{justify-content:center; text-align:center;}
  .step-card-flat{padding:24px 20px;}
  .plan{padding:24px 20px;}
  .stat-strip{flex-direction:column; align-items:center; text-align:center; row-gap:18px;}
  .stat-strip .stat{flex:none; width:100%; max-width:280px; border:none !important; padding:0 !important;}
}

/* ---- Telas bem pequenas (celulares compactos) ---- */
@media (max-width:420px){
  .stat-strip{gap:16px;}
  .benefit-grid,.feat-grid{grid-template-columns:1fr;}
  .benefit{padding:26px 22px;}
  .feat{padding:16px 14px; border-right:none;}
  .feat:nth-last-child(-n+2){border-bottom:1px solid var(--line);}
  .feat:last-child{border-bottom:none;}
  .model-card{flex-basis:292px;}
  .proof-row{gap:18px 28px;}
  .cta-final{padding:40px 18px;}
  .hero-cta-row{gap:14px;}
}

/* ---- Logo as real image asset ---- */
.logo{ display:flex; align-items:center; }
.logo-img{ height:32px; width:auto; display:block; }
footer .logo-img{ height:36px; }
footer .logo{ justify-content:center; }

/* ============ WHATSAPP FLUTUANTE ============ */
.whatsapp-float{
  position:fixed; right:22px; bottom:22px; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px;
  background:#25D366; color:#0a2313; text-decoration:none;
  border-radius:50%;
  box-shadow:0 10px 26px -8px rgba(16,35,26,.35), 0 0 0 1px rgba(16,35,26,.04);
  transition:box-shadow .2s ease, background .2s ease, transform .2s ease;
}
.whatsapp-float svg{width:28px; height:28px; flex-shrink:0; display:block;}
.whatsapp-float:hover{
  background:#2fe378;
  transform:translateY(-3px);
  box-shadow:0 14px 30px -8px rgba(16,35,26,.4), 0 0 0 1px rgba(16,35,26,.06);
}
@media (max-width:640px){
  .whatsapp-float{width:52px; height:52px;}
  .whatsapp-float svg{width:26px; height:26px;}
}

/* ============ FOOTER — CONTATO (ícones) ============ */
.footer-col a.contact-link{display:flex; align-items:center; justify-content:center; gap:8px;}
.footer-col a.contact-link svg{width:16px; height:16px; flex-shrink:0;}
.footer-col .contact-hours{color:var(--muted); font-size:.82rem; padding:5px 0 0; text-align:center;}
.footer-social{display:flex; gap:12px; justify-content:center; margin-top:18px;}
.footer-social a{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px;
  border:1px solid var(--line); color:var(--muted);
  transition:color .2s, border-color .2s, background .2s;
}
.footer-social a:hover{color:var(--signal-deep); border-color:var(--signal); background:var(--signal-dim);}
.footer-social svg{width:18px; height:18px;}

/* ============ FOOTER — LINHA LEGAL / CNPJ ============ */
.footer-legal{
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
  display:flex; justify-content:center; flex-wrap:wrap; gap:6px 24px;
  color:var(--muted-2); font-size:.78rem; text-align:center;
}

/* ============ PÁGINAS LEGAIS (Termos / Privacidade) ============ */
.legal-page main{padding-top:0;}
.legal-hero{padding:150px 0 var(--space-section);}
.legal-hero .eyebrow{margin-bottom:19px;}
.legal-hero h1{font-size:clamp(2rem,4vw,2.8rem); max-width:720px;}
.legal-updated{color:var(--muted-2); font-size:.85rem; margin-top:14px; font-family:var(--mono);}
.legal-content{max-width:760px;}
.legal-content h2{font-size:1.3rem; color:var(--ink); margin:40px 0 14px;}
.legal-content h2:first-child{margin-top:0;}
.legal-content p{color:var(--muted); font-size:.98rem; line-height:1.7; margin-bottom:14px;}
.legal-content ul, .legal-content ol{color:var(--muted); font-size:.98rem; line-height:1.7; margin:0 0 14px; padding-left:22px;}
.legal-content li{margin-bottom:8px;}
.legal-content strong{color:var(--ink); font-weight:700;}
.legal-content a{color:var(--signal-deep); text-decoration:underline; text-underline-offset:2px;}
.legal-fill{color:var(--signal-deep); font-family:var(--mono); font-size:.9em;}
.back-link{display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:.9rem; margin-bottom:30px; transition:color .2s;}
.back-link:hover{color:var(--signal-deep);}
.back-link svg{width:16px; height:16px;}

/* ============ RECURSOS EM GRUPOS ============
   Fecha as fileiras incompletas: o último item ocupa o espaço que sobra
   e a linha de baixo some só na última fileira de cada grupo. */
#recursos .plan-feat-head{text-align:center; text-transform:uppercase; letter-spacing:.08em;}
#recursos .feat:nth-last-child(-n+4){border-bottom:1px solid var(--line);}
#recursos .feat:nth-child(4n+1):nth-last-child(-n+4),
#recursos .feat:nth-child(4n+1):nth-last-child(-n+4) ~ .feat{border-bottom:none;}
#recursos .feat:last-child{border-right:none;}
#recursos .feat:last-child:nth-child(4n+1){grid-column:span 4;}
#recursos .feat:last-child:nth-child(4n+2){grid-column:span 3;}
#recursos .feat:last-child:nth-child(4n+3){grid-column:span 2;}
@media (max-width:980px){
  #recursos .feat:last-child:nth-child(n){grid-column:auto;}
  #recursos .feat:last-child:nth-child(2n+1){grid-column:span 2;}
  #recursos .feat:nth-child(4n+1):nth-last-child(-n+4),
  #recursos .feat:nth-child(4n+1):nth-last-child(-n+4) ~ .feat{border-bottom:1px solid var(--line);}
  #recursos .feat:nth-child(2n+1):nth-last-child(-n+2),
  #recursos .feat:nth-child(2n+1):nth-last-child(-n+2) ~ .feat{border-bottom:none;}
}
@media (max-width:420px){
  #recursos .feat:last-child:nth-child(n){grid-column:auto;}
  #recursos .feat:nth-child(2n+1):nth-last-child(-n+2),
  #recursos .feat:nth-child(2n+1):nth-last-child(-n+2) ~ .feat{border-bottom:1px solid var(--line);}
  #recursos .feat:last-child{border-bottom:none;}
}

/* =====================================================================
   EVOLUÇÃO VISUAL — landing de vendas (Prompt 1)
   Bloco único, adicionado ao final. Reaproveita os tokens existentes.
   ===================================================================== */
:root{
  --night:#06170f;
  --night-2:#0b2419;
  --neon:#3ee07f;
  --neon-soft:rgba(62,224,127,.16);
  --on-night:rgba(255,255,255,.74);
}
#cardapio-digital, #diferenciais{scroll-margin-top:150px;}

/* ---- Botões: foco visível e estado padrão ---- */
.btn:focus-visible{outline:3px solid var(--signal); outline-offset:3px; border-radius:14px;}
.btn-ghost{background:var(--panel); box-shadow:0 1px 2px rgba(16,35,26,.04);}
.btn-ghost:hover{transform:translateY(-2px); border-color:var(--signal); background:var(--signal-dim); color:var(--signal-deep);}
.btn-ghost:active{transform:translateY(1px);}

/* ---- HERO ---- */
#hero{padding-top:138px; padding-bottom:var(--space-section); overflow:hidden;}
/* Não cortar a sombra dos celulares e o brilho no fim do topo: corta só na horizontal
   (evita rolagem lateral) e deixa a sombra terminar suave para baixo. */
@supports (overflow:clip){ #hero{overflow:visible; overflow-x:clip;} }
.hero-dots{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(circle, rgba(31,157,85,.22) 1.2px, transparent 1.7px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 55% 60% at 78% 45%, #000 20%, transparent 75%);
          mask-image:radial-gradient(ellipse 55% 60% at 78% 45%, #000 20%, transparent 75%);
}
#hero .hero-grid{grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;}
#hero .hero-copy{max-width:600px;}
#hero h1{font-size:clamp(2.3rem, 4.4vw, 3.6rem); line-height:1.06; letter-spacing:-0.02em;}
#hero .eyebrow{margin-top:0;}
#hero p.sub{font-size:1.1rem; max-width:540px; margin-top:22px;}
#hero p.sub strong{color:var(--ink); font-weight:800;}
#hero .hero-cta-row{margin-top:30px; gap:14px;}
#hero .hero-note{margin-top:14px;}
#hero .stat-strip{margin-top:40px; max-width:540px;}

.hero-visual{position:relative; height:480px;}
.hv-glow{
  position:absolute; inset:8% 4% 6% 10%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 40% 40%, rgba(62,224,127,.30), transparent 60%),
             radial-gradient(circle at 70% 70%, rgba(47,102,144,.28), transparent 62%);
  filter:blur(28px);
}
/* ---- Celulares do topo: moldura estilo iPhone Pro Max ---- */
.phone{position:absolute; margin:0; container-type:inline-size; width:calc(var(--sw) + 2 * var(--pad));}
.iphone{
  position:relative; padding:var(--pad); border-radius:15.8cqw; background:#030405;
  box-shadow:0 0 0 .75cqw #1b2436, 0 0 0 1.1cqw #5b6a86, 0 0 0 1.5cqw #151c2b,
             0 30px 60px -24px rgba(6,23,15,.55), 0 10px 20px -12px rgba(6,23,15,.35);
}
/* botões laterais: ação + volume (esquerda) e power (direita) */
.iphone::before, .iphone::after{content:""; position:absolute; width:1.2cqw; border-radius:.6cqw;}
.iphone::before{left:-2.4cqw; top:26cqw; height:46cqw;
  background:linear-gradient(#2a3550 0 15%, transparent 15% 28%, #2a3550 28% 60%, transparent 60% 68%, #2a3550 68% 100%);}
.iphone::after{right:-2.4cqw; top:38cqw; height:24cqw; background:#2a3550;}
.ip-screen{position:relative; overflow:hidden; border-radius:13.1cqw; background:#fff;}
.ip-screen picture{display:block;}
.ip-screen img{display:block; width:var(--sw); height:auto; border-radius:0;}
.ip-status{position:relative; height:13.2cqw; height:round(13.2cqw, 1px); background:var(--bar,#111); color:#fff;
  display:flex; align-items:center; justify-content:space-between; padding:1.2cqw 6.8cqw 0 10.5cqw;
  font:600 4.3cqw/1 -apple-system, "SF Pro Text", "Helvetica Neue", var(--sans); letter-spacing:.01em;}
.ip-island{position:absolute; left:50%; top:2.3cqw; transform:translateX(-50%); width:26.8cqw; height:7.9cqw; border-radius:4cqw; background:#000;}
.ip-icons{display:flex; align-items:center; gap:1.3cqw;}
.ip-icons svg{height:3.2cqw; width:auto; fill:currentColor;}
.ip-icons svg:last-child{height:3.5cqw;}
.ip-safari{background:#f3f3f5; border-top:1px solid rgba(0,0,0,.07); padding:2.4cqw 3.6cqw 0;}
.ip-url{display:flex; align-items:center; justify-content:space-between; height:9.6cqw; padding:0 3.2cqw;
  background:#fff; border-radius:3.6cqw; box-shadow:0 .4cqw 1.6cqw rgba(0,0,0,.09);
  font:500 3.7cqw/1 -apple-system, "SF Pro Text", "Helvetica Neue", var(--sans); color:#1c1c1e;}
.ip-aa{font-size:3.3cqw; font-weight:600;}
.ip-host{display:flex; align-items:center; gap:1.1cqw;}
.ip-host svg{height:3.1cqw; width:auto; fill:none; stroke:#6e6e73; stroke-width:1.6;}
.ip-reload{height:4.2cqw; width:auto; fill:none; stroke:#1c1c1e; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
.ip-tools{display:flex; justify-content:space-between; padding:2.8cqw 2.4cqw 0;}
.ip-tools svg{height:6cqw; width:auto; fill:none; stroke:#0a7aff; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}
.ip-tools svg.off{stroke:#b9b9bf;}
.ip-home{width:32cqw; height:1.35cqw; border-radius:1cqw; background:#111; margin:3.2cqw auto 2.2cqw;}
.phone-front{--sw:236px; --pad:8px; right:12%; top:22px; z-index:2;}
.phone-back{--sw:192px; --pad:6px; left:8%; top:84px; transform:rotate(-7deg); opacity:.94; z-index:1;}
.hv-chip{
  position:absolute; z-index:3; display:inline-flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.94); backdrop-filter:blur(6px);
  border:1px solid var(--line); border-radius:999px; padding:10px 16px;
  font-size:.86rem; font-weight:800; color:var(--ink); white-space:nowrap;
  box-shadow:0 14px 30px -16px rgba(6,23,15,.35);
  animation:hvFloat 7s ease-in-out infinite;
}
.hv-dot{width:9px; height:9px; border-radius:50%; background:var(--neon); box-shadow:0 0 0 4px var(--neon-soft), 0 0 12px rgba(62,224,127,.7); flex-shrink:0;}
.hv-chip-a{right:0; top:110px;}
.hv-chip-b{left:0; top:330px; animation-delay:-2.3s;}
.hv-chip-c{right:4%; bottom:14px; animation-delay:-4.6s;}
@keyframes hvFloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-7px);}}

/* ---- QUAL A DIFERENÇA ---- */
.def-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:6px;}
.def-card{
  background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:26px 24px;
  box-shadow:0 1px 2px rgba(16,35,26,.03), 0 14px 28px -24px rgba(16,35,26,.16);
  transition:border-color .25s, transform .25s;
}
.def-card:hover{border-color:var(--signal); transform:translateY(-3px);}
.def-card h3{font-size:1.1rem; display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.def-card h3::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--signal); box-shadow:0 0 0 4px var(--signal-dim); flex-shrink:0;}
.def-card p{color:var(--muted); font-size:.95rem;}
.def-foot{text-align:center; color:var(--muted); font-weight:700; margin-top:22px;}

/* ---- COMO FUNCIONA (sequência real de 4 etapas) ---- */
.steps-flow{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; position:relative;}
.steps-flow::before{
  content:""; position:absolute; left:6%; right:6%; top:46px; height:2px; z-index:0;
  background-image:radial-gradient(circle, var(--signal) 1.4px, transparent 1.8px);
  background-size:10px 2px; background-repeat:repeat-x; opacity:.55;
}
.steps-flow .step{
  position:relative; z-index:1; background:var(--panel); border:1px solid var(--line); border-radius:18px;
  padding:26px 22px 24px; text-align:left;
  box-shadow:0 1px 2px rgba(16,35,26,.03), 0 14px 28px -24px rgba(16,35,26,.16);
  transition:border-color .25s, transform .25s;
}
.steps-flow .step:hover{border-color:var(--signal); transform:translateY(-3px);}
.steps-flow .step-num{margin:0 0 18px; width:42px; height:42px;}
.steps-flow .step h3{font-size:1.08rem; margin-bottom:8px;}
.steps-flow .step p{color:var(--muted); font-size:.93rem;}
.section-cta{text-align:center; margin-top:28px;}

/* ---- FAIXAS ESCURAS (Diferenciais e CTA final) ---- */
.dark-band{
  position:relative; overflow:hidden; color:#fff;
  padding:clamp(56px, 7vw, 92px) 0;
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(31,157,85,.26), transparent 62%),
    radial-gradient(800px 420px at 100% 100%, rgba(47,102,144,.30), transparent 62%),
    var(--night);
}
.band-dots{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:radial-gradient(circle, rgba(255,255,255,.10) 1.1px, transparent 1.6px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(180deg, #000, transparent 70%);
          mask-image:linear-gradient(180deg, #000, transparent 70%);
}
.dark-band .container{position:relative; z-index:1;}
.dark-band h2.title{color:#fff;}
.dark-band .kicker{color:var(--on-night);}
.eyebrow-dark{background:rgba(62,224,127,.08); border-color:rgba(62,224,127,.28); color:var(--neon);}
.eyebrow-dark .dot{background:var(--neon); box-shadow:0 0 10px rgba(62,224,127,.8);}

.edge-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.edge-card{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); border-radius:18px; padding:26px 22px;
  transition:border-color .25s, transform .25s, box-shadow .25s, background .25s;
}
.edge-card:hover{border-color:rgba(62,224,127,.45); background:rgba(255,255,255,.06); transform:translateY(-3px); box-shadow:0 22px 40px -26px rgba(62,224,127,.45);}
.edge-ic{width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; color:var(--neon); background:rgba(62,224,127,.08); border:1px solid rgba(62,224,127,.28);}
.edge-ic svg{width:21px; height:21px;}
.edge-card h3{color:#fff; font-size:1.05rem; margin-bottom:8px;}
.edge-card p{color:var(--on-night); font-size:.92rem;}

.facts{margin-top:38px; padding-top:34px; border-top:1px solid rgba(255,255,255,.10); display:flex; flex-direction:column; align-items:center; gap:30px; text-align:center;}
.facts-row{display:grid; grid-template-columns:repeat(4, 1fr); gap:18px 28px; width:100%;}
.fact b{display:block; font-family:var(--mono); font-weight:600; font-size:clamp(1.4rem, 2.4vw, 1.8rem); color:#fff;}
.fact:first-child b{color:var(--neon);}
.fact span{font-size:.82rem; color:var(--on-night);}
.dark-band .btn:focus-visible, .cta-final .btn:focus-visible{outline-color:var(--neon);}

/* ---- RECURSOS: cards com descrição ---- */
#recursos .feat{align-items:flex-start;}
#recursos .feat .ic{margin-top:1px;}
.feat .feat-txt{display:flex; flex-direction:column; gap:4px; font-size:inherit; font-weight:400;}
.feat .feat-txt b{font-size:.9rem; font-weight:800; line-height:1.3; color:var(--ink);}
.feat .feat-txt small{font-size:.8rem; line-height:1.45; color:var(--muted-2);}
.comp-tag{
  display:inline-block; margin-left:6px; vertical-align:1px; white-space:nowrap;
  font-style:normal; font-size:.66rem; font-weight:800; letter-spacing:.01em;
  color:var(--metal-deep); background:rgba(47,102,144,.08); border:1px solid rgba(47,102,144,.22);
  border-radius:999px; padding:2px 8px;
}
#recursos .feat:hover .ic{border-color:var(--signal); box-shadow:0 0 0 4px rgba(31,157,85,.08);}
#recursos .plan-feat-head{display:flex; align-items:center; justify-content:center; gap:10px;}

/* ---- MODELOS ---- */
.model-card a.demo-link{transition:gap .2s;}
.model-card:hover a.demo-link{gap:9px;}

/* ---- COMPARATIVO ---- */
.compare-table{border-collapse:separate; border-spacing:0;}
.compare-table thead th.brand{background:var(--night); color:var(--neon);}
.compare-table td.brand-col{background:var(--signal-dim);}

/* ---- PLANOS ---- */
.billing-opt{background:none; border:0; padding:4px 2px; cursor:pointer; font:inherit; font-weight:800;}
.billing-opt:focus-visible{outline:2px solid var(--signal); outline-offset:3px; border-radius:6px;}
.plan .btn{white-space:normal; text-align:center;}

/* ---- CTA FINAL ---- */
.cta-final{
  position:relative; overflow:hidden; border:0; color:#fff;
  background:
    radial-gradient(700px 320px at 50% 0%, rgba(62,224,127,.20), transparent 65%),
    radial-gradient(600px 320px at 100% 100%, rgba(47,102,144,.30), transparent 60%),
    var(--night);
}
.cta-final > *{position:relative; z-index:1;}
.cta-final .band-dots{position:absolute; z-index:0;}
.cta-final h2{color:#fff;}
.cta-final p{color:var(--on-night);}
.cta-final .eyebrow{margin-top:0;}
.cta-final .cta-note{font-size:.82rem; margin-top:14px; color:rgba(255,255,255,.6);}

/* ---- RODAPÉ ---- */
.footer-grid{grid-template-columns:1.5fr repeat(4,1fr);}
footer{padding-top:clamp(40px,5vw,56px);}

/* ---- Entrada suave (só com JS e sem "reduzir movimento") ---- */
html.js-reveal .reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease;}
html.js-reveal .reveal.is-in{opacity:1; transform:none;}

@media (prefers-reduced-motion: reduce){
  .hv-chip{animation:none;}
  .btn, .def-card, .steps-flow .step, .edge-card, .plan, .model-card{transition:none;}
}

/* ---- RESPONSIVO ---- */
@media (max-width:1100px){
  .phone-front{--sw:222px; --pad:7px; right:6%;}
  .phone-back{--sw:178px; --pad:6px; left:4%;}
  .hv-chip-a{top:90px;}
}
@media (max-width:980px){
  #hero{padding-top:120px;}
  #hero .hero-grid{grid-template-columns:1fr; gap:36px; justify-items:center; text-align:center;}
  #hero .hero-copy{max-width:680px;}
  #hero p.sub{margin-left:auto; margin-right:auto;}
  #hero .hero-cta-row{justify-content:center;}
  #hero .stat-strip{margin-left:auto; margin-right:auto;}
  .hero-dots{-webkit-mask-image:radial-gradient(ellipse 70% 40% at 50% 70%, #000 20%, transparent 70%); mask-image:radial-gradient(ellipse 70% 40% at 50% 70%, #000 20%, transparent 70%);}
  .hero-visual{width:100%; max-width:520px; height:470px;}
  .def-grid{grid-template-columns:1fr; max-width:620px; margin-left:auto; margin-right:auto;}
  .steps-flow{grid-template-columns:repeat(2,1fr);}
  .steps-flow::before{display:none;}
  .edge-grid{grid-template-columns:repeat(2,1fr);}
  .facts-row{grid-template-columns:repeat(2, 1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  #hero{padding-top:112px;}
  .hero-visual{height:372px; max-width:400px;}
  .phone-front{--sw:184px; --pad:6px; right:calc(50% - 158px); top:14px;}
  .phone-back{--sw:146px; --pad:5px; left:calc(50% - 168px); top:52px;}
  .hv-chip{font-size:.76rem; padding:7px 12px;}
  .hv-chip-a{top:48px; right:0;}
  .hv-chip-b{top:250px; left:0;}
  .hv-chip-c{bottom:8px; right:4%;}
  .steps-flow{grid-template-columns:1fr;}
  .edge-grid{grid-template-columns:1fr;}
  .facts .btn{width:100%;}
  .footer-grid{grid-template-columns:1fr;}
  #hero .hero-cta-row .btn{width:100%; max-width:360px;}
}
@media (max-width:420px){
  #hero h1{font-size:2.15rem;}
  .hero-visual{height:352px;}
  .phone-front{--sw:172px; --pad:6px; right:calc(50% - 150px);}
  .phone-back{--sw:138px; --pad:4px; left:calc(50% - 158px);}
  .hv-chip-c{display:none;}
  .facts-row{grid-template-columns:1fr 1fr; gap:18px 20px;}
}

/* ---- Comparativo no celular: rolagem lateral com a 1ª coluna fixa ---- */
.table-hint{display:none; font-size:.8rem; color:var(--muted-2); text-align:center; margin:0 0 10px;}
@media (max-width:760px){
  .table-hint{display:block;}
  .compare-table{min-width:680px;}
  .compare-table th:first-child, .compare-table td:first-child{position:sticky; left:0; z-index:1; background:var(--panel); box-shadow:1px 0 0 var(--line); min-width:150px;}
  .compare-table thead th:first-child{background:var(--panel-2);}
}

/* ---- Menu superior em telas médias: evita encostar no Login ---- */
@media (max-width:1180px) and (min-width:981px){
  nav.primary{gap:10px;}
  nav.primary a{padding:10px 7px; font-size:.86rem;}
  .header-actions{gap:12px;}
}
@media (max-width:420px){
  #hero .eyebrow{font-size:.8rem; padding:8px 14px; gap:10px;}
}
/* ---- Cabeçalho no celular: logo sem achatar ---- */
header .logo{flex-shrink:0;}
@media (max-width:420px){
  .logo-img{height:26px;}
  .header-actions{gap:10px;}
  .header-actions .btn-sm{padding:10px 13px; font-size:.8rem;}
  .login-link{font-size:.85rem;}
}

/* ---- Texto de apoio mais longo da seção Demonstrações ---- */
#modelos .kicker{max-width:720px;}

/* ---- Planos: caixa de pagamentos e botão sempre alinhados, mesmo com listas de tamanhos diferentes ---- */
.plan ul{flex:1 0 auto;}

/* ---- Ajustes finais de toque e leitura no celular ---- */
.model-card a.demo-link{padding:8px 6px; margin-top:2px;}
.back-link{padding:8px 0;}
header .logo{padding:6px 0;}
.billing-save{font-size:.72rem;}

/* ============================================================
   AJUSTES MOBILE — cabeçalho e faixa de garantias (v53)
   Só age em telas até 980px; o desktop fica igual.
   ============================================================ */

/* Login dentro do menu: escondido por padrão (só aparece em celulares bem estreitos) */
nav.primary a.nav-login{display:none;}

@media (max-width:980px){
  /* Botão do menu alinhado ao botão verde, com respiro entre os dois */
  .nav-toggle{
    width:42px; height:42px; flex-shrink:0; border-radius:12px;
    background:var(--panel); border:1px solid var(--line);
    box-shadow:0 2px 0 var(--line);
    -webkit-tap-highlight-color:transparent;
  }
  .nav-toggle svg{width:20px; height:20px;}
  .nav-toggle[aria-expanded="true"]{border-color:var(--signal); color:var(--signal);}
  .header-actions{flex-shrink:0;}
  .header-actions .btn-sm{min-height:40px;}
}

@media (max-width:640px){
  header .bar{gap:12px;}
  header .logo{flex:0 1 auto; min-width:0;}
  .logo-img{height:26px; max-width:100%; object-fit:contain;}
  .header-actions{gap:10px;}
  .header-actions .btn-sm{padding:10px 14px; font-size:.82rem;}
  .login-link{padding:10px 2px; font-size:.86rem;}
}

@media (max-width:420px){
  header .bar{gap:10px;}
  .logo-img{height:24px;}
  .header-actions{gap:8px;}
  .header-actions .btn-sm{padding:10px 12px; font-size:.8rem;}
  .nav-toggle{width:40px; height:40px;}
}

/* Celulares estreitos (iPhone SE 1ª geração, Galaxy compactos, 360px e menores):
   o Login passa para dentro do menu para nada ficar espremido */
@media (max-width:370px){
  .header-actions .login-link{display:none;}
  nav.primary.nav-open a.nav-login{display:flex;}
  .logo-img{height:22px;}
}

/* ---- Faixa de garantias dos planos ---- */
/* Selo redondo verde-claro atrás de cada ícone (vale para todos os tamanhos) */
.plans-trust li svg{
  width:34px; height:34px; padding:8px; box-sizing:border-box; flex-shrink:0;
  border-radius:50%; background:var(--signal-dim); color:var(--signal-deep);
}
.plans-trust li{color:var(--ink); gap:10px;}
/* Computador: faixa única com as 4 garantias lado a lado */
@media (min-width:981px){
  .plans-trust{
    display:flex; flex-wrap:nowrap; justify-content:center; gap:0;
    width:fit-content; max-width:100%; margin:30px auto 0; padding:14px 8px;
    background:var(--panel); border:1px solid var(--line); border-radius:16px;
    box-shadow:0 14px 30px -24px rgba(16,35,26,.25);
  }
  .plans-trust li{padding:4px clamp(12px, 1.6vw, 22px); font-size:.9rem; white-space:nowrap;}
  .plans-trust li + li{border-left:1px solid var(--line);}
}
/* Tablet e celular: grade 2 x 2 de cartões, ícone em cima e texto centralizado */
@media (max-width:980px){
  .plans-trust{
    display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
    grid-auto-rows:1fr; align-items:stretch; /* os 4 cartões sempre do mesmo tamanho */
    gap:10px; max-width:600px; margin:28px auto 0;
  }
  .plans-trust li{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    padding:16px 12px; background:var(--panel); text-align:center;
    border:1px solid var(--line); border-radius:14px;
    box-shadow:0 12px 24px -22px rgba(16,35,26,.25);
    font-size:.86rem; line-height:1.3;
  }
  .plans-trust li svg{width:38px; height:38px; padding:9px;}
}
@media (max-width:360px){
  .plans-trust li{font-size:.8rem; padding:14px 8px;}
}

/* ============ FOOTER — redes sociais ============ */
.footer-social{align-items:center;}

/* ============ BANNER DE COOKIES (LGPD) — js/cookies.js ============ */
.cm-ck{
  position:fixed; left:24px; bottom:24px; z-index:10000;
  width:min(400px, calc(100vw - 32px));
  background:#fff; color:var(--ink);
  border:1px solid var(--line); border-radius:16px;
  box-shadow:0 12px 40px rgba(16,35,26,.18);
  padding:20px; font-family:var(--sans); font-size:14px; line-height:1.5;
  display:none;
}
.cm-ck.is-open{display:block; animation:cmCkIn .25s ease-out;}
@keyframes cmCkIn{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion: reduce){ .cm-ck.is-open{animation:none;} }
.cm-ck h2{font-size:16px; font-weight:800; margin:0 0 6px;}
.cm-ck p{margin:0 0 16px; color:var(--muted);}
.cm-ck p a{color:var(--signal-deep); text-decoration:underline;}
.cm-ck-actions{display:flex; gap:8px;}
.cm-ck button{flex:1; font:inherit; font-weight:700; border-radius:10px; padding:11px 14px; cursor:pointer; border:1px solid transparent;}
.cm-ck-accept{background:var(--signal); color:#fff;}
.cm-ck-accept:hover{background:var(--signal-deep);}
.cm-ck-reject{background:#fff; color:var(--ink); border-color:var(--line) !important;}
.cm-ck-reject:hover{background:var(--panel-2);}
@media (max-width:560px){ .cm-ck{left:16px; right:16px; bottom:16px; width:auto;} }

/* =====================================================================
   TEMA v63 — "areia e cacto"
   Camada visual única, por cima do que já existe. Não altera estrutura,
   textos, scripts, imagens nem IDs. Para voltar ao visual anterior,
   basta apagar este bloco (do comentário "TEMA v63" até o fim do arquivo).
   ===================================================================== */
:root{
  --bg:#f4efe4;
  --bg-2:#faf6ec;
  --panel:#fffdf8;
  --panel-2:#eee8d9;
  --line:#ddd5c2;
  --line-soft:rgba(28,42,34,.08);
  --ink:#1c2a22;
  --muted:#4a574f;
  --muted-2:#5f6a62;
  --signal:#1d7a45;
  --signal-deep:#135a31;
  --signal-dim:#e4eddb;
  --cta-green-1:#1d7a45;
  --cta-green-2:#1d7a45;
  --cta-green-3:#135a31;
  --metal:#135a31;
  --metal-deep:#135a31;
  --accent:#b24a24;
  --accent-text:#a2431f;
  --accent-dim:#f5e2d6;
  --night:#1d392a;
  --night-2:#244634;
  --neon:#e8cf8f;
  --neon-soft:rgba(232,207,143,.16);
  --on-night:rgba(244,239,228,.80);
  --serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --mono:'Nunito', sans-serif;
  --space-section:clamp(52px, 6.5vw, 88px);
  --space-head:clamp(24px, 3vw, 36px);
}
body{
  background-color:var(--bg);
  background-image:
    radial-gradient(900px 480px at 88% -4%, rgba(29,122,69,.10), transparent 62%),
    radial-gradient(700px 420px at -6% 26%, rgba(178,74,36,.06), transparent 62%);
  background-repeat:no-repeat;
  font-size:1.02rem; line-height:1.65;
}
::selection{background:var(--signal); color:#fff;}
h1, h2.title, .cta-final h2, .legal-hero h1{font-family:var(--serif); font-weight:600; letter-spacing:-.015em;}
h2.title{font-size:clamp(1.75rem, 3vw, 2.6rem); line-height:1.15;}
.stat-strip b, .proof-item b, .fact b, .plan .price{font-family:var(--serif); font-weight:600; font-variant-numeric:lining-nums;}
.cm-ck h2{font-family:var(--sans);}

/* ---- Títulos de seção: alinhados à esquerda, sem pílula ---- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans); font-size:.76rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-text); background:none; border:0; border-radius:0; padding:0; margin:0 0 14px;
}
.eyebrow .dot{width:22px; height:2px; border-radius:0; background:currentColor; box-shadow:none;}
.eyebrow-dark{background:none; border:0; color:var(--neon);}
.eyebrow-dark .dot{background:var(--neon); box-shadow:none;}
.section-head{text-align:left;}
.section-head .kicker, .kicker{margin:14px 0 0; text-align:left; max-width:640px;}
h2.title{margin-left:0; margin-right:0; max-width:740px;}
.section-cta{text-align:left;}
.def-foot{text-align:left;}
#modelos .kicker{max-width:720px;}

/* ---- Ritmo das seções: faixas claras alternadas, sem bordas ---- */
#como-funciona, #modelos, #planos{background:var(--bg-2);}
.dark-band{
  background:linear-gradient(180deg, var(--night-2), var(--night));
  padding:clamp(52px, 6.5vw, 88px) 0;
}
.band-dots, .hv-glow{display:none;}

/* ---- Botões: chapados, sem relevo ---- */
.btn{border-radius:10px; font-weight:800; transition:background .15s ease, border-color .15s ease, color .15s ease;}
.btn-signal{background:var(--signal); color:#fff; box-shadow:none; border-color:var(--signal);}
.btn-signal:hover{background:var(--signal-deep); border-color:var(--signal-deep); transform:none; filter:none; box-shadow:none;}
.btn-signal:active{transform:none; filter:none; box-shadow:none; background:#0f4a28;}
.btn-ghost, .btn-ghost:hover{box-shadow:none; transform:none;}
.btn-ghost{background:transparent; border-color:rgba(28,42,34,.38); color:var(--ink);}
.btn-ghost:hover{background:var(--panel-2); border-color:var(--ink); color:var(--ink);}
.btn:focus-visible{border-radius:10px;}

/* ---- Cabeçalho ---- */
header.scrolled{background:rgba(244,239,228,.93); box-shadow:none; border-bottom-color:var(--line);}
nav.primary a{color:var(--muted);}
nav.primary a:hover{color:var(--ink);}
.nav-toggle{background:var(--panel); box-shadow:none; border-radius:10px;}
nav.primary.nav-open{background:var(--panel); box-shadow:0 18px 30px -22px rgba(28,42,34,.3); border-radius:12px;}

/* ---- Topo (hero) ---- */
#hero h1{font-size:clamp(2.4rem, 4.8vw, 3.9rem); line-height:1.06;}
#hero h1 .accent{color:var(--accent);}
#hero p.sub strong{color:var(--ink);}
.hero-dots{
  background-image:
    linear-gradient(to right, rgba(28,42,34,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(28,42,34,.07) 1px, transparent 1px);
  background-size:40px 40px;
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 78% 40%, #000 15%, transparent 72%);
          mask-image:radial-gradient(ellipse 60% 70% at 78% 40%, #000 15%, transparent 72%);
}
.stat-strip{border-top-color:var(--line);}
.stat-strip .stat + .stat{border-left-color:var(--line);}
.hv-chip{animation:none; background:var(--panel); backdrop-filter:none; border-radius:8px; box-shadow:0 10px 22px -16px rgba(28,42,34,.4); padding:9px 14px;}
.hv-dot{background:var(--signal); box-shadow:none; width:8px; height:8px;}
.iphone{box-shadow:0 0 0 .75cqw #1b2436, 0 0 0 1.1cqw #5b6a86, 0 0 0 1.5cqw #151c2b, 0 26px 44px -28px rgba(28,42,34,.5);}
.phone-card .iphone{box-shadow:0 0 0 .75cqw #1b2436, 0 0 0 1.1cqw #5b6a86, 0 0 0 1.5cqw #151c2b, 0 14px 24px -18px rgba(28,42,34,.4);}

/* ---- Cartões: contorno fino, sem sombra nem "pulo" ao passar o mouse ---- */
.def-card, .model-card, .plan, .feat-grid, .benefit-grid{box-shadow:none; border-radius:12px;}
.def-card:hover, .model-card:hover, .plan:hover{transform:none; box-shadow:none; border-color:var(--line);}
.def-card{background:var(--panel); padding:26px 24px;}
.def-card h3::before{width:18px; height:2px; border-radius:0; background:var(--accent); box-shadow:none;}

/* ---- Como funciona: etapas em linha, numeral grande ---- */
.steps-flow{gap:28px;}
.steps-flow::before{display:none;}
.steps-flow .step{background:transparent; border:0; border-top:2px solid var(--ink); border-radius:0; box-shadow:none; padding:18px 4px 0;}
.steps-flow .step:hover{transform:none; border-color:var(--ink);}
.steps-flow .step-num{
  width:auto; height:auto; margin:0 0 8px; border:0; background:none; border-radius:0; justify-content:flex-start;
  font-family:var(--serif); font-size:2rem; font-weight:600; color:var(--accent); line-height:1;
}

/* ---- Faixa verde (diferenciais e CTA final) ---- */
.edge-card{background:rgba(244,239,228,.05); border:1px solid rgba(244,239,228,.15); border-radius:12px;}
.edge-card:hover{transform:none; box-shadow:none; background:rgba(244,239,228,.08); border-color:rgba(244,239,228,.28);}
.edge-ic{border-radius:8px; background:rgba(232,207,143,.10); border-color:rgba(232,207,143,.30); color:var(--neon);}
.facts{border-top-color:rgba(244,239,228,.15); align-items:flex-start; text-align:left;}
.fact:first-child b{color:var(--neon);}
.cta-final{
  border-radius:16px; text-align:left;
  background:linear-gradient(180deg, var(--night-2), var(--night));
}
.cta-final h2, .cta-final p{margin-left:0; margin-right:0;}

/* ---- Recursos ---- */
.feat-grid{border-color:var(--line); background:var(--panel);}
.feat .ic{background:var(--signal-dim); border:0; box-shadow:none; border-radius:8px; color:var(--signal-deep);}
#recursos .feat:hover .ic{box-shadow:none;}
.feat:hover{background:var(--bg-2);}
#recursos .plan-feat-head{background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; color:var(--accent-text); padding:0 0 10px; margin:30px 0 14px; justify-content:flex-start; letter-spacing:.14em; font-size:.76rem;}
.pwa-note{background:var(--signal-dim); border-color:rgba(29,122,69,.25); border-radius:12px;}
.pwa-note .ic{border-radius:8px;}
.pwa-step{border-radius:10px; background:var(--panel);}

/* ---- Modelos ---- */
.model-card .thumb{background:var(--panel-2); border-bottom-color:var(--line);}
.gallery-rail::-webkit-scrollbar-thumb{background:var(--line);}

/* ---- Comparativo ---- */
.compare-table{border-radius:12px;}
.compare-table thead th{background:var(--panel-2); font-family:var(--sans);}
.compare-table thead th.brand{background:var(--night); color:var(--neon);}
.compare-table td.brand-col{background:var(--signal-dim);}

/* ---- Planos ---- */
.plans-grid{gap:20px;}
.plan{text-align:left; padding:28px 24px 24px;}
.plan.popular{border:2px solid var(--signal); box-shadow:none;}
.plan.popular:hover{border-color:var(--signal); box-shadow:none;}
.plan-badge{
  left:22px; transform:none; top:-12px; font-family:var(--sans); letter-spacing:.08em; font-size:.7rem;
  background:var(--accent); border:0; border-radius:6px; box-shadow:none; padding:5px 11px;
}
.plan-ic{margin:0 0 14px; width:auto; height:auto; background:none; border:0; border-radius:0; box-shadow:none; justify-content:flex-start;}
.plan.popular .plan-ic, .plan.premium-plan .plan-ic{background:none; border:0; box-shadow:none;}
.plan-ic svg{width:28px; height:28px; color:var(--signal-deep);}
.plan .tag{font-family:var(--sans); font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:.7rem; color:var(--accent-text);}
.plan .tag.tag-metal{color:var(--accent-text);}
.plan .plan-desc{margin:0 0 16px; max-width:none; color:var(--muted);}
.plan .price{font-size:2.5rem;}
.plan .plan-cycle{font-family:var(--sans); font-weight:700; color:var(--signal-deep);}
.plan-feat-head{background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:0 0 10px; margin:18px 0 14px; font-size:.82rem; font-weight:800;}
.plan li{color:var(--muted);}
.plan-pay{background:var(--bg-2); border:1px solid var(--line); border-radius:10px;}
.plan-pay-label{color:var(--ink);}
.plan-foot{padding-top:22px;}
.plan-cta-note{justify-content:flex-start;}
.billing-toggle{justify-content:flex-start;}
.billing-opt{font-weight:800;}
.billing-save{font-family:var(--sans); background:var(--accent-dim); border:0; color:var(--accent-text); border-radius:6px; font-weight:800; padding:4px 8px;}
.billing-switch{background:var(--panel-2); box-shadow:none; border-color:var(--line);}
.billing-switch .billing-knob{background:#fff; box-shadow:0 1px 3px rgba(28,42,34,.3); transition:transform .22s ease;}
.billing-switch[aria-checked="true"]{background:var(--signal); border-color:var(--signal); box-shadow:none;}
.billing-switch[aria-checked="true"] .billing-knob{background:#fff;}
.plans-trust li svg{background:var(--signal-dim);}
@media (min-width:981px){
  .plans-trust{margin:30px 0 0; box-shadow:none; border-radius:12px; background:var(--panel);}
}
@media (max-width:980px){
  .plans-trust{margin-left:0; margin-right:0;}
  .plans-trust li{box-shadow:none; border-radius:10px;}
}

/* ---- Perguntas frequentes ---- */
.faq-list{margin:0; max-width:820px;}
.faq-item[open] summary .chev{color:var(--accent);}

/* ---- Rodapé: à esquerda, sem centralizar tudo ---- */
.footer-grid{text-align:left;}
.footer-brand p{margin-left:0; margin-right:0;}
footer .logo{justify-content:flex-start;}
.footer-col .contact-hours{text-align:left;}
.footer-col a.contact-link{justify-content:flex-start;}
.footer-social{justify-content:flex-start;}
.footer-social a{border-radius:8px;}
.footer-bottom, .footer-legal{justify-content:flex-start; text-align:left;}
.footer-col h4{font-family:var(--sans); letter-spacing:.12em; text-transform:uppercase; font-size:.72rem; color:var(--accent-text);}

/* ---- Banner de cookies ---- */
.cm-ck{background:var(--panel); border-radius:12px; box-shadow:0 14px 34px rgba(28,42,34,.2);}
.cm-ck button{border-radius:8px;}
.cm-ck-accept{background:var(--signal);}
.cm-ck-reject{background:transparent;}

/* ---- Páginas legais ---- */
.legal-updated{font-family:var(--sans);}
.legal-fill{font-family:var(--sans); color:var(--accent-text);}

/* ---- Celular: textos à esquerda também no topo ---- */
@media (max-width:980px){
  #hero .hero-grid{justify-items:start; text-align:left;}
  #hero p.sub{margin-left:0; margin-right:0;}
  #hero .hero-cta-row{justify-content:flex-start;}
  #hero .stat-strip{margin-left:0; margin-right:0;}
  .hero-visual{margin:0 auto;}
}
@media (prefers-reduced-motion: reduce){ .billing-switch .billing-knob{transition:none;} }
.plan.popular{padding:27px 23px 23px;}
@media (max-width:640px){
  .stat-strip{align-items:flex-start; text-align:left;}
  .stat-strip .stat{max-width:none;}
}

/* =====================================================================
   AJUSTES v64 — tudo centralizado como antes, só Nunito, funções em abas
   ===================================================================== */
:root{ --serif:'Nunito', sans-serif; }
h1, h2.title, .cta-final h2, .legal-hero h1{font-family:var(--sans); font-weight:800; letter-spacing:-.01em;}
.stat-strip b, .proof-item b, .fact b, .plan .price, .steps-flow .step-num{font-family:var(--sans); font-weight:800;}
.steps-flow .step-num{font-size:1.9rem;}

/* ---- Alinhamento central, como era ---- */
.section-head{text-align:center;}
.section-head .kicker, .kicker{margin:16px auto 0; text-align:center;}
h2.title{margin-left:auto; margin-right:auto;}
.eyebrow{margin:0 0 14px;}
.section-cta, .def-foot{text-align:center;}
.facts{align-items:center; text-align:center;}
.cta-final{text-align:center;}
.cta-final h2, .cta-final p{margin-left:auto; margin-right:auto;}
.plan{text-align:center;}
.plan-ic{margin:0 auto 14px; justify-content:center; display:flex;}
.plan .plan-desc{margin:0 auto 16px; max-width:230px;}
.plan-badge{left:50%; transform:translateX(-50%);}
.plan-feat-head{text-align:left;}
.plan-cta-note{justify-content:center;}
.billing-toggle{justify-content:center;}
.faq-list{margin:0 auto;}
.footer-grid{text-align:center;}
.footer-brand p{margin-left:auto; margin-right:auto;}
footer .logo{justify-content:center;}
.footer-col .contact-hours{text-align:center;}
.footer-col a.contact-link{justify-content:center;}
.footer-social{justify-content:center;}
.footer-bottom, .footer-legal{justify-content:center; text-align:center;}
@media (min-width:981px){ .plans-trust{margin:30px auto 0;} }
@media (max-width:980px){
  #hero .hero-grid{justify-items:center; text-align:center;}
  #hero p.sub{margin-left:auto; margin-right:auto;}
  #hero .hero-cta-row{justify-content:center;}
  #hero .stat-strip{margin-left:auto; margin-right:auto;}
  .plans-trust{margin-left:auto; margin-right:auto;}
}
@media (max-width:640px){
  .stat-strip{align-items:center; text-align:center;}
}


/* ---- Funções: abas e cartões leves (estilo Anota AI) ---- */
.rec-tabs{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0 0 28px;}
.rec-tab{
  font:inherit; font-weight:700; font-size:.95rem; cursor:pointer;
  padding:13px 26px; border-radius:12px; border:0;
  background:var(--signal-dim); color:var(--signal-deep);
  transition:background .15s ease, color .15s ease;
}
.rec-tab:hover{background:#d6e5ca;}
.rec-tab.is-active{background:var(--night); color:#fff; box-shadow:0 4px 10px -6px rgba(28,42,34,.5);}
.rec-tab:focus-visible{outline:2px solid var(--signal); outline-offset:3px;}
#recursos.rec-js .plan-feat-head{display:none;}
#recursos .feat-grid[hidden]{display:none;}

#recursos .feat-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px;
  border:0; background:none; border-radius:0; overflow:visible;
}
#recursos .feat-grid .feat{
  display:grid; grid-template-columns:auto 1fr; column-gap:12px; row-gap:8px; align-items:center;
  grid-column:auto !important;
  padding:18px 20px; background:var(--panel);
  border:1px solid var(--line) !important; border-radius:14px;
  transition:border-color .15s ease;
}
#recursos .feat-grid .feat:hover{background:var(--panel); border-color:#c9bfa8 !important;}
#recursos .feat .feat-txt{display:contents;}
#recursos .feat .feat-txt b{grid-column:2; grid-row:1; font-size:.95rem; line-height:1.3;}
#recursos .feat .feat-txt small{grid-column:1 / -1; grid-row:2; font-size:.86rem; line-height:1.5; color:var(--muted);}
#recursos .feat .ic{width:38px; height:38px; border-radius:10px; margin:0; background:#e3f1e6; color:#1d7a45;}
#recursos .feat .ic svg{width:19px; height:19px;}
#recursos .feat-grid .feat:nth-child(5n+2) .ic{background:#fbeed3; color:#a8671a;}
#recursos .feat-grid .feat:nth-child(5n+3) .ic{background:#f9e1e1; color:#b23a3a;}
#recursos .feat-grid .feat:nth-child(5n+4) .ic{background:#e1ecf7; color:#2f6690;}
#recursos .feat-grid .feat:nth-child(5n) .ic{background:#ece4f6; color:#6b45a5;}
@media (max-width:980px){ #recursos .feat-grid{grid-template-columns:repeat(2, minmax(0,1fr));} }
@media (max-width:640px){
  #recursos .feat-grid{grid-template-columns:1fr;}
  .rec-tabs{gap:8px;}
  .rec-tab{padding:11px 16px; font-size:.88rem; flex:1 1 auto;}
}
@media (prefers-reduced-motion: reduce){ .rec-tab{transition:none;} }
#recursos .feat-grid .feat{align-content:start;}

/* =====================================================================
   v66 — fundo com movimento suave (sem cactos) + Nunito nos celulares
   Movimento só por transform (leve para o celular/PC). Desliga com
   "reduzir movimento" no aparelho. Para tirar o movimento: apague este bloco.
   ===================================================================== */
.ip-status, .ip-url, .ip-safari, .ip-aa{font-family:var(--sans);}

/* Fundo geral: manchas de cor que se deslocam devagar */
body::before{
  content:""; position:fixed; inset:-22%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38% 34% at 78% 16%, rgba(29,122,69,.20), transparent 70%),
    radial-gradient(34% 30% at 16% 38%, rgba(232,207,143,.44), transparent 70%),
    radial-gradient(30% 28% at 64% 80%, rgba(178,74,36,.11), transparent 70%);
  animation:auroraMove 26s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes auroraMove{
  0%  {transform:translate3d(-3%,-2%,0) scale(1);}
  50% {transform:translate3d(3%,2%,0) scale(1.07);}
  100%{transform:translate3d(-1%,4%,0) rotate(2deg) scale(1.02);}
}
/* faixas claras ficam semitransparentes para o fundo aparecer */
#como-funciona, #modelos, #planos{background:rgba(250,246,236,.55);}

/* Topo: só a rota de entrega tracejada (anda sozinha), sem grade */
.hero-dots{
  background-image:url(../images/rota.svg?v=1);
  background-size:min(620px, 56%) auto;
  background-position:right 3% top 14%;
  background-repeat:no-repeat;
}

/* Celulares e etiquetas do topo flutuam de leve */
@keyframes fxBob{50%{translate:0 -9px;}}
.phone-front{animation:fxBob 8s ease-in-out infinite;}
.phone-back{animation:fxBob 10s ease-in-out -3s infinite;}
.hv-chip{animation:fxBob 7s ease-in-out infinite;}
.hv-chip-b{animation-delay:-2.3s;}
.hv-chip-c{animation-delay:-4.6s;}

/* Faixas verdes e chamada final: brilho que se move devagar */
.dark-band::before, .cta-final::before{
  content:""; position:absolute; inset:-30%; z-index:0; pointer-events:none;
  background:
    radial-gradient(30% 40% at 20% 30%, rgba(232,207,143,.15), transparent 70%),
    radial-gradient(32% 42% at 80% 70%, rgba(40,150,86,.34), transparent 70%);
  animation:auroraMove 22s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce){
  body::before, .phone-front, .phone-back, .hv-chip, .dark-band::before, .cta-final::before{animation:none;}
}


/* Como você recebe: manual x automático x Premium */
.pay-how{max-width:980px; margin:44px auto 0; text-align:center;}
.pay-how-title{font-size:1.2rem; margin-bottom:22px;}
.pay-how-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0; text-align:left;}
.pay-how-item{padding:4px 26px; border-left:1px solid var(--line);}
.pay-how-item:first-child{border-left:0; padding-left:0;}
.pay-how-item:last-child{padding-right:0;}
.pay-tag{display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; padding:4px 10px; border-radius:6px; margin-bottom:12px;}
.pay-tag-manual{background:var(--panel-2); color:var(--ink);}
.pay-tag-auto{background:var(--signal-dim); color:var(--signal-deep);}
.pay-tag-premium{background:var(--accent-dim); color:var(--accent-text);}
.pay-how-item h4{font-size:1rem; font-weight:800; margin:0 0 6px; color:var(--ink);}
.pay-how-item p{font-size:.9rem; line-height:1.55; color:var(--muted); margin:0;}
.pay-how-note{margin:24px auto 0; max-width:760px; font-size:.84rem; color:var(--muted-2);}
.pay-how-note a{color:var(--signal-deep); font-weight:800; white-space:nowrap;}
.pay-how-note a::after{content:" \2192";}
.pay-how-note a:hover{text-decoration:underline; text-underline-offset:3px;}
@media (max-width:800px){
  .pay-how-grid{grid-template-columns:1fr; gap:22px;}
  .pay-how-item, .pay-how-item:first-child, .pay-how-item:last-child{padding:0 0 0 16px; border-left:2px solid var(--line);}
}