/* =========================================================================
   Vitor Acessor — Design System (PHP) · tema escuro esmeralda premium
   ========================================================================= */
:root {
  /* paleta brand */
  --brand-300:#6ee7b7; --brand-400:#34d399; --brand-500:#10b981;
  --brand-600:#059669; --brand-700:#047857;
  /* ink / superfícies escuras */
  --ink-950:#03150d; --ink-900:#04190f; --ink-850:#06231a; --ink-800:#0b2a1f;
  --ink-700:#0f3528; --line:rgba(110,231,183,.14);
  --text:#eafff5; --text-dim:#bfe9d5; --text-mute:#8bbfa8;
  /* efeitos */
  --grad-brand:linear-gradient(135deg,#6ee7b7 0%,#34d399 42%,#059669 100%);
  --shadow-card:0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px -28px rgba(0,0,0,.7);
  --shadow-brand:0 18px 50px -16px rgba(16,185,129,.55);
  --radius:18px; --radius-lg:26px; --radius-pill:999px;
  --header-h:74px;
  --maxw:1200px;
  --font-display:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font-body); color:var(--text);
  background:var(--ink-950); line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* sticky-footer pattern: páginas curtas (ex.: 404) empurram o footer ao final
     da viewport, evitando que o float-cta cubra links do footer */
  min-height:100svh; display:flex; flex-direction:column;
}
body > main{flex:1 0 auto}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{font-family:var(--font-display); font-weight:800; letter-spacing:-.03em; line-height:1.04; margin:0}
.container{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem)}
.skip-link{position:absolute; left:-999px; top:0; background:var(--brand-500); color:#04130d; padding:.6rem 1rem; border-radius:0 0 10px 0; z-index:200}
.skip-link:focus{left:0}
section{position:relative}

/* ---------- Botões ---------- */
.btn{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-display);
  font-weight:700; font-size:.97rem; padding:.85rem 1.6rem; border-radius:var(--radius-pill);
  border:1px solid transparent; cursor:pointer; transition:transform .18s, box-shadow .18s, background .18s, filter .18s; white-space:nowrap}
.btn--sm{padding:.6rem 1.15rem; font-size:.9rem}
.btn--primary{background:linear-gradient(135deg,#7af0c4 0%,#34d399 48%,#10b981 100%); color:#04130d; font-weight:800; box-shadow:var(--shadow-brand)}
.btn--primary:hover{transform:translateY(-2px); filter:brightness(1.05); box-shadow:0 24px 60px -16px rgba(16,185,129,.7)}
.btn--ghost{background:rgba(255,255,255,.04); color:var(--text); border-color:var(--line)}
.btn--ghost:hover{background:rgba(255,255,255,.09); transform:translateY(-1px)}
.btn--outline{background:transparent; color:var(--brand-300); border-color:rgba(110,231,183,.4)}
.btn--outline:hover{background:rgba(110,231,183,.1)}
.btn svg{width:18px; height:18px}

/* ---------- Header ---------- */
.site-header{position:fixed; inset:0 0 auto; height:var(--header-h); z-index:100;
  display:flex; align-items:center; transition:background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom:1px solid transparent}
.site-header.is-scrolled{background:rgba(4,25,15,.72); backdrop-filter:blur(16px) saturate(1.3); border-bottom-color:var(--line)}
.site-header__inner{display:flex; align-items:center; justify-content:space-between; width:100%}
.brand{display:inline-flex; align-items:center; gap:.6rem}
.brand__logo{filter:drop-shadow(0 4px 12px rgba(0,0,0,.4))}
.brand__name{font-family:var(--font-display); font-weight:700; font-size:1.18rem; letter-spacing:-.02em}
.brand__name strong{color:var(--brand-400)}
.nav{display:flex; gap:.4rem}
.nav__link{padding:.5rem .9rem; border-radius:var(--radius-pill); color:var(--text-dim); font-weight:500; font-size:.95rem; transition:color .2s, background .2s}
.nav__link:hover{color:var(--text); background:rgba(255,255,255,.05)}
.site-header__actions{display:flex; align-items:center; gap:.6rem}
/* Chip WhatsApp Oficial no header desktop */
.header-wa{display:inline-flex; align-items:center; gap:.5rem; padding:.45rem .85rem .45rem .6rem;
  border-radius:var(--radius-pill); background:linear-gradient(160deg,rgba(37,211,102,.18),rgba(37,211,102,.07));
  border:1px solid rgba(37,211,102,.45); color:#d8f5e6; font-family:var(--font-display); font-weight:700;
  font-size:.88rem; text-decoration:none; line-height:1; white-space:nowrap; transition:transform .15s ease, background .2s ease}
.header-wa:hover{transform:translateY(-1px); background:linear-gradient(160deg,rgba(37,211,102,.28),rgba(37,211,102,.12))}
.header-wa__ic{display:grid; place-items:center; width:22px; height:22px; color:#25D366}
.header-wa__ic svg{width:18px; height:18px}
.header-wa__badge{font-size:.62rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  background:#1d9bf0; color:#fff; padding:.18rem .45rem; border-radius:999px}
@media (max-width:980px){ .header-wa__txt{display:none} .header-wa{padding:.45rem .55rem} }
@media (max-width:680px){ .header-wa{display:none} } /* mobile usa o drawer */

/* WhatsApp Oficial dentro do drawer mobile */
.drawer__wa{display:flex; align-items:center; gap:.75rem; margin-top:.9rem; padding:.85rem 1rem;
  border-radius:14px; border:1px solid rgba(37,211,102,.5);
  background:linear-gradient(160deg, rgba(37,211,102,.22), rgba(37,211,102,.06));
  color:#d8f5e6; font-family:var(--font-display); text-decoration:none;
  transition:transform .15s ease, border-color .2s ease}
.drawer__wa:hover{transform:translateY(-1px); border-color:rgba(110,231,183,.75)}
.drawer__wa-ic{display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  background:#25D366; color:#fff; flex-shrink:0; box-shadow:0 8px 20px -8px rgba(37,211,102,.7)}
.drawer__wa-ic svg{width:22px; height:22px}
.drawer__wa-txt{display:flex; flex-direction:column; gap:.1rem; min-width:0}
.drawer__wa-txt strong{font-weight:800; font-size:1.08rem; letter-spacing:.01em; color:#fff; line-height:1.1}
.drawer__wa-txt small{font-size:.72rem; color:#a7d4b5; line-height:1.2}
.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:0; padding:8px; cursor:pointer}
.nav-toggle span{width:24px; height:2px; background:var(--text); border-radius:2px; transition:.25s}
.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)}
/* ---------- Drawer mobile (gaveta lateral direita → esquerda) ---------- */
/* Mantemos os elementos sempre no DOM (sem `hidden`) e controlamos visibilidade
   por CSS para que a transição funcione e o detector de overlap não enxergue
   elementos invisíveis como interativos cobrindo o conteúdo. */
.drawer-backdrop{position:fixed; inset:0; background:rgba(2,12,7,.6); backdrop-filter:blur(4px);
  z-index:98; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .28s ease, visibility 0s linear .28s}
.drawer-backdrop.is-open{opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s}

.drawer{position:fixed; top:0; right:0; bottom:0; width:min(86vw, 360px);
  background:linear-gradient(170deg, rgba(8,30,18,.985) 0%, rgba(4,18,11,.985) 60%, rgba(2,12,7,.985) 100%);
  backdrop-filter:blur(20px); border-left:1px solid rgba(110,231,183,.18);
  box-shadow:-30px 0 60px -20px rgba(0,0,0,.7);
  z-index:99; transform:translateX(100%); visibility:hidden;
  transition:transform .32s cubic-bezier(.22,.61,.36,1), visibility 0s linear .32s;
  overflow:hidden; will-change:transform}
.drawer.is-open{transform:translateX(0); visibility:visible; transition-delay:0s}
.drawer__inner{position:relative; height:100%; display:flex; flex-direction:column; gap:.6rem;
  padding:1rem 1.1rem 1.2rem; overflow-y:auto; overflow-x:hidden; z-index:1}

/* Brilho sutil do brand */
.drawer::before{content:''; position:absolute; top:-30%; right:-30%; width:80%; height:80%;
  background:radial-gradient(closest-side, rgba(16,185,129,.16), transparent 75%);
  pointer-events:none; z-index:0}

/* Mascote decorativo no fundo do drawer */
.drawer__mascot{position:absolute; right:-30px; bottom:-30px; width:64%; max-width:280px; height:auto;
  opacity:.16; pointer-events:none; user-select:none; z-index:0;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.4))}

/* Cabeçalho do drawer (logo + fechar) */
.drawer__head{display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding-bottom:.8rem; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:.4rem}
.drawer__brand{display:inline-flex; align-items:center; gap:.55rem; color:var(--text); text-decoration:none;
  font-family:var(--font-display); font-weight:500; font-size:1.05rem}
.drawer__brand img{border-radius:8px}
.drawer__brand strong{color:var(--brand-400); font-weight:800}
.drawer__close{display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); color:var(--text);
  cursor:pointer; transition:background .2s ease, transform .15s ease}
.drawer__close:hover{background:rgba(255,255,255,.1); transform:rotate(90deg)}

/* Navegação dentro do drawer */
.drawer__nav{display:flex; flex-direction:column; gap:.15rem; margin-top:.6rem}
.drawer__link{display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.95rem 1rem; border-radius:14px; font-family:var(--font-display); font-weight:600;
  font-size:1.06rem; color:var(--text); text-decoration:none;
  background:rgba(255,255,255,.025); border:1px solid transparent;
  transition:background .2s ease, border-color .2s ease, transform .15s ease}
.drawer__link svg{color:var(--brand-400); opacity:.7; transition:transform .2s ease, opacity .2s ease}
.drawer__link:hover, .drawer__link:focus-visible{background:rgba(16,185,129,.1);
  border-color:rgba(110,231,183,.25); color:#fff}
.drawer__link:hover svg, .drawer__link:focus-visible svg{transform:translateX(3px); opacity:1}

/* CTA do drawer */
.drawer__cta{margin-top:.8rem; justify-content:center; width:100%}

/* Rodapé do drawer */
.drawer__foot{margin-top:auto; padding-top:1rem; border-top:1px solid rgba(255,255,255,.08);
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  color:var(--text-mute); font-size:.78rem; text-align:center}
.drawer__foot-links{display:inline-flex; gap:.45rem; align-items:center}
.drawer__foot-links a{color:var(--text-dim); text-decoration:none}
.drawer__foot-links a:hover{color:var(--brand-300)}
.drawer__foot-links span{opacity:.4}

/* Lock-scroll quando aberto (aplica pelo JS no body) */
body.drawer-open{overflow:hidden}

/* ---------- HERO ---------- */
.hero{position:relative; min-height:100svh; display:flex; align-items:center; padding:calc(var(--header-h) + 2rem) 0 3rem; overflow:hidden}
.hero__bg{position:absolute; inset:0; z-index:0}
.hero__bg img{width:100%; height:100%; object-fit:cover; opacity:.9}
.hero__bg::after{content:''; position:absolute; inset:0;
  background:radial-gradient(120% 80% at 70% 30%, transparent 30%, var(--ink-950) 78%),
             linear-gradient(180deg, rgba(3,21,13,.4) 0%, transparent 30%, var(--ink-950) 100%)}
.hero__inner{position:relative; z-index:2; display:grid; grid-template-columns:1fr 1.12fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; width:100%}
.hero__copy{max-width:600px}
.eyebrow{display:inline-flex; align-items:center; gap:.55rem; font-family:var(--font-body); font-weight:600;
  font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--brand-300);
  padding:.5rem 1rem; border-radius:var(--radius-pill); background:rgba(9,40,27,.6); border:1px solid var(--line); backdrop-filter:blur(8px)}
.eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--brand-400); box-shadow:0 0 0 0 rgba(52,211,153,.6); animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}70%,100%{box-shadow:0 0 0 8px rgba(52,211,153,0)}}
.hero__title{font-size:clamp(2.4rem,6vw,4.4rem); margin:1.2rem 0 0}
.hero__title .grad{background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero__sub{margin:1.3rem 0 0; font-size:clamp(1.02rem,1.5vw,1.2rem); color:var(--text-dim); max-width:520px}
.hero__cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.9rem}
.hero__wa{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .65rem; margin-top:1rem;
  font-size:.92rem; color:var(--text-mute)}
.hero__wa-link{display:inline-flex; align-items:center; gap:.35rem; color:#d8f5e6; text-decoration:none;
  padding:.22rem .6rem; border-radius:999px; border:1px solid rgba(37,211,102,.45);
  background:rgba(37,211,102,.1); transition:background .2s ease}
.hero__wa-link:hover{background:rgba(37,211,102,.2)}
.hero__wa-link strong{color:#fff; font-family:var(--font-display); font-weight:800; letter-spacing:.01em}
.hero__wa-tag{display:inline-flex; align-items:center; gap:.25rem; font-size:.68rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:#9bd1ff}
.hero__chips{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.5rem}
.chip{display:inline-flex; align-items:center; gap:.4rem; font-size:.86rem; font-weight:600; color:var(--text-dim);
  padding:.35rem .8rem; border-radius:var(--radius-pill); background:rgba(255,255,255,.04); border:1px solid var(--line)}
.chip svg{width:15px; height:15px; color:var(--brand-400)}
.hero__trust{display:flex; align-items:center; gap:.7rem; margin-top:1.7rem; font-size:.9rem; color:var(--text-mute)}
.avatars{display:inline-flex}
.avatars img{width:34px; height:34px; border-radius:50%; border:2px solid var(--ink-900); margin-left:-10px; object-fit:cover}
.avatars img:first-child{margin-left:0}
.hero__trust strong{color:var(--text); font-weight:700}

/* demo em vídeo do hero (produto animado) */
.hero__art{position:relative; display:flex; justify-content:center; align-items:center}
.hero__art::before{content:''; position:absolute; width:78%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(16,185,129,.4), transparent 65%); filter:blur(50px); z-index:-1}
.hero__demo{position:relative; width:min(660px,100%); aspect-ratio:16/9; border-radius:24px; overflow:hidden;
  border:1px solid rgba(110,231,183,.28); box-shadow:0 34px 90px -30px rgba(0,0,0,.75), 0 0 80px -22px rgba(16,185,129,.5)}
.hero__video{width:100%; height:100%; object-fit:cover; display:block; background:var(--ink-900)}
.hero__demo-glow{position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -40px 60px rgba(3,21,13,.55)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* faixa de stats sob o hero — versão premium com ícones */
.stats-strip{position:relative; z-index:3; margin-top:-1rem}
.stats-strip__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:linear-gradient(135deg, rgba(110,231,183,.18), rgba(255,255,255,.04));
  border:1px solid rgba(110,231,183,.22);
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:0 24px 50px -28px rgba(16,185,129,.35)}
.stat{position:relative; background:linear-gradient(170deg, rgba(8,30,18,.96), rgba(4,18,11,.96));
  padding:1.7rem 1.2rem 1.5rem; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:.45rem;
  transition:background .25s ease}
.stat:hover{background:linear-gradient(170deg, rgba(16,185,129,.12), rgba(4,18,11,.96))}
.stat__icon{display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:12px;
  background:linear-gradient(135deg, rgba(52,211,153,.18), rgba(16,185,129,.05));
  border:1px solid rgba(110,231,183,.28); color:var(--brand-300);
  margin-bottom:.2rem}
.stat__icon svg{width:22px; height:22px}
.stat__num{font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.6rem,2.8vw,2.2rem); color:var(--text); line-height:1}
.stat__num .grad{background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent}
.stat__label{font-size:.82rem; color:var(--text-mute); margin-top:.15rem; line-height:1.35}
.stat__label strong{color:#fff; font-weight:700; display:block}
@media (max-width:680px){
  .stats-strip__grid{grid-template-columns:repeat(2,1fr)}
  .stat{padding:1.4rem .8rem 1.2rem}
}

/* ---------- Seções genéricas ---------- */
.section{padding:clamp(4rem,9vh,7rem) 0}
.section__head{max-width:680px; margin:0 auto 3rem; text-align:center}
.section__title{font-size:clamp(1.9rem,4vw,3rem)}
.section__title .grad{background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent}
.section__lead{margin-top:1rem; color:var(--text-dim); font-size:1.08rem}
.section--alt{background:linear-gradient(180deg, var(--ink-900), var(--ink-850))}

/* Como funciona — versão premium com hero + ícones + CTA */
.section--steps .section__head .eyebrow{margin-bottom:.5rem; display:inline-flex}
.steps-hero{margin:0 auto 2.5rem; max-width:980px; border-radius:24px; overflow:hidden;
  border:1px solid rgba(110,231,183,.22);
  box-shadow:0 24px 60px -30px rgba(16,185,129,.55)}
.steps-hero img{display:block; width:100%; height:auto}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem}
.step{position:relative; padding:2rem 1.7rem; border-radius:22px;
  background:linear-gradient(160deg, rgba(15,53,40,.7), rgba(6,35,26,.55));
  border:1px solid var(--line); box-shadow:var(--shadow-card);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease}
.step:hover{transform:translateY(-4px); border-color:rgba(110,231,183,.4);
  box-shadow:0 24px 50px -28px rgba(16,185,129,.45)}
.step__top{display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem}
.step__n{font-family:var(--font-display); font-weight:800; font-size:2.4rem;
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text;
  color:transparent; line-height:1}
.step__icon{display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:13px;
  background:linear-gradient(135deg, rgba(52,211,153,.22), rgba(16,185,129,.06));
  border:1px solid rgba(110,231,183,.3); color:var(--brand-300)}
.step__icon svg{width:22px; height:22px}
.step h3{font-size:1.25rem; margin:.4rem 0 .5rem; line-height:1.25}
.step p{color:var(--text-dim); margin:0; line-height:1.55}
/* CTA grande embaixo dos 3 passos */
.steps-cta{margin-top:2.4rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:.7rem}
.steps-cta small{color:var(--text-mute); font-size:.85rem}
.btn--xl{padding:1.05rem 2.2rem; font-size:1.05rem; border-radius:999px}

/* Funcionalidades */
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem}
.feature{padding:1.8rem 1.5rem; border-radius:var(--radius); background:rgba(255,255,255,.025);
  border:1px solid var(--line); transition:transform .25s, border-color .25s, background .25s}
.feature:hover{transform:translateY(-4px); border-color:rgba(110,231,183,.35); background:rgba(16,185,129,.06)}
.feature__ic{width:52px; height:52px; border-radius:15px; display:grid; place-items:center; margin-bottom:1.1rem;
  background:radial-gradient(circle at 50% 30%, rgba(16,185,129,.28), rgba(6,30,21,.6)); border:1px solid rgba(110,231,183,.25)}
.feature__ic svg{width:26px; height:26px; color:var(--brand-300)}
.feature h3{font-size:1.2rem; margin-bottom:.5rem}
.feature p{color:var(--text-dim); margin:0; font-size:.97rem}
/* ───────── cards ilustrados (mascote por feature) — versão premium ───────── */
.features--illustrated{gap:1.6rem}
.features--illustrated .feature{position:relative; overflow:hidden; padding:1.35rem 1.35rem 1.7rem;
  border-radius:22px; border:1px solid var(--line);
  background:linear-gradient(168deg, rgba(15,53,40,.5) 0%, rgba(6,30,21,.32) 60%, rgba(4,25,15,.4) 100%)}
/* borda que “acende” no hover */
.features--illustrated .feature::before{content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(150deg, rgba(110,231,183,.6), rgba(16,185,129,.15) 38%, transparent 65%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .35s ease; pointer-events:none}
.features--illustrated .feature:hover{transform:translateY(-6px); background:linear-gradient(168deg, rgba(16,185,129,.12), rgba(6,30,21,.4))}
.features--illustrated .feature:hover::before{opacity:1}

.feature__img{position:relative; width:100%; aspect-ratio:4/3; border-radius:16px; overflow:hidden; margin-bottom:1.1rem;
  border:1px solid var(--line); background:radial-gradient(circle at 50% 42%, rgba(16,185,129,.16), rgba(4,25,15,.65))}
.feature__img::after{content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(to top, rgba(5,26,18,.6), transparent 42%)}
.feature__img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease}
.features--illustrated .feature:hover .feature__img img{transform:scale(1.06)}

.feature__tag{display:inline-flex; align-items:center; gap:.45rem; font-family:var(--font-body); font-size:.66rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--brand-300); padding:.32rem .75rem; border-radius:var(--radius-pill);
  background:rgba(16,185,129,.12); border:1px solid rgba(110,231,183,.26); margin-bottom:.75rem}
.feature__tag::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--brand-400); box-shadow:0 0 8px rgba(52,211,153,.8)}

.features--illustrated .feature h3{font-family:var(--font-display); font-size:1.32rem; font-weight:800; letter-spacing:-.025em; line-height:1.15; margin-bottom:.55rem; color:#f4fffb}
.features--illustrated .feature p{font-size:.97rem; line-height:1.62; color:var(--text-dim); margin:0}

/* Mockup grande (showcase) */
.showcase{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center}
.showcase__media{position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-card)}
.showcase__media img{width:100%}
/* variante flutuante (imagem transparente, sem moldura) com glow */
.showcase__media--float{border:0; box-shadow:none; overflow:visible; background:transparent; display:flex; justify-content:center}
.showcase__media--float::before{content:''; position:absolute; inset:8% 12%; border-radius:50%;
  background:radial-gradient(circle, rgba(16,185,129,.32), transparent 65%); filter:blur(48px); z-index:0}
.showcase__media--float img{position:relative; z-index:1; width:min(560px,100%); filter:drop-shadow(0 30px 60px rgba(0,0,0,.5)); animation:float 7s ease-in-out infinite}
.showcase h2{font-size:clamp(1.7rem,3.5vw,2.6rem)}
.showcase ul{list-style:none; padding:0; margin:1.5rem 0 0; display:flex; flex-direction:column; gap:.85rem}
.showcase li{display:flex; gap:.7rem; align-items:flex-start; color:var(--text-dim)}
.showcase li svg{width:22px; height:22px; color:var(--brand-400); flex-shrink:0; margin-top:2px}

/* Planos */
/* ============================== PLANOS (v2) ==============================
   Cards premium para o modelo mensal + anual. Layout em 3 colunas no desktop
   (mídia dos mascotes ao centro), 2 colunas em tablet, 1 coluna em mobile.
   ========================================================================= */
.plans{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1.4rem; align-items:stretch}
.plans--two{max-width:920px; margin:0 auto; gap:1.4rem}
/* Em telas grandes: 3 colunas — cards compactos, vídeo dos mascotes amplo */
@media (min-width:1180px){
  /* expande a seção pra além do container padrão (1200px) — mais respiro lateral */
  .section--plans > .container{max-width:1340px}
  .plans--two{max-width:1320px; grid-template-columns: 0.9fr 0.9fr 0.9fr; gap:1.6rem}
}
.plans--with-media{max-width:1080px; margin:0 auto}
/* Em telas largas (>=1024px): 3 colunas com mídia central */
@media (min-width: 1024px){
  .plans--with-media{
    grid-template-columns: 1fr minmax(180px, 280px) 1fr;
    align-items:center; gap:1.4rem;
  }
  .plans__media{grid-row:1; grid-column:2; align-self:center}
}
.plans__media{display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:relative; gap:.8rem}
.plans__media img,
.plans__media video{width:100%; height:auto; max-width:280px; border-radius:24px;
  background:linear-gradient(170deg, rgba(16,185,129,.14), rgba(4,18,11,.4));
  border:1px solid rgba(110,231,183,.18); box-shadow:0 30px 60px -25px rgba(16,185,129,.45)}
.plans__media-cap{font-family:var(--font-display); font-size:.78rem; color:var(--text-mute);
  white-space:nowrap; letter-spacing:.04em}
/* Em viewports < 1024px, a mídia central (legado) vira full-width abaixo */
@media (max-width: 1023px){
  .plans--with-media .plans__media{
    grid-column: 1 / -1; order: 99;
    max-width: 280px; margin: 1rem auto 0;
  }
  .plans__media img,
  .plans__media video{max-width:240px}
}

/* -------- plans-duo: vídeo dos mascotes "solto" na seção (sem container) -------- */
/* Sem borda, fundo ou sombra: o vídeo se funde ao background da seção
   e os personagens aparecem como se estivessem direto na página.
   Uma máscara radial dissolve as bordas no fundo escuro. */
.plans-duo{display:none}
@media (min-width:1180px){
  .plans-duo{
    display:block; position:relative;
    align-self:stretch;
    /* sem border, background, box-shadow, radius — totalmente livre */
    background:transparent;
  }
  .plans-duo video,
  .plans-duo img{
    width:100%; height:100%;
    object-fit:cover; object-position:center center;
    display:block;
    /* Máscara: área opaca maior pra revelar os mascotes inteiros;
       fade só nas bordas externas pra esconder a borda preta do vídeo. */
    -webkit-mask-image:
      radial-gradient(ellipse 92% 92% at 50% 50%, #000 68%, transparent 96%);
    mask-image:
      radial-gradient(ellipse 92% 92% at 50% 50%, #000 68%, transparent 96%);
  }
}

.plan{position:relative; display:flex; flex-direction:column; padding:0 0 1.7rem;
  border-radius:22px; background:linear-gradient(170deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border:1px solid var(--line); transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  overflow:hidden}
.plan:hover{transform:translateY(-3px); border-color:rgba(110,231,183,.3);
  box-shadow:0 24px 50px -28px rgba(16,185,129,.4)}

/* Banner de vídeo no topo de cada card (16:9) — visível em todos os viewports.
   Encosta nas bordas do card; o conteúdo interno usa padding lateral próprio. */
.plan__media{display:block; position:relative; width:100%; aspect-ratio:16/9;
  background:#04130d; overflow:hidden}
.plan--hl .plan__media{border-bottom:1px solid rgba(110,231,183,.4)}
.plan__media video,
.plan__media img{width:100%; height:100%; display:block;
  object-fit:cover; object-position:center 35%}
/* No anual, o Vitor pula com braços levantados; baixa o ponto focal pra mostrar pés */
.plan--hl .plan__media video,
.plan--hl .plan__media img{object-position:center 60%}
/* fade sutil pra integrar o vídeo ao card */
.plan__media::after{content:''; position:absolute; inset:auto 0 0 0; height:30%;
  background:linear-gradient(to top, rgba(4,19,13,.55), transparent); pointer-events:none}

/* -------- Padding interno padronizado em uma variável --------
   Tudo dentro do card usa o mesmo padding lateral, e o card cresce
   uniformemente; o botão fica grudado embaixo via margin-top:auto. */
.plan{--pi:1.8rem}                       /* desktop: padding equilibrado */
.plan > *:not(.plan__media):not(.plan__badge){padding-left:var(--pi); padding-right:var(--pi)}
/* Badge tem padding próprio (.plan__badge) — não recebe padding do container */
.plan__badge{margin:1.2rem 0 .35rem 0}    /* gap entre vídeo e badge */
.plan__head{margin:0 0 .9rem 0}
.plan--hl .plan__head{margin-top:.1rem}   /* já tem o badge acima dando respiro */
.plan:not(.plan--hl) .plan__badge{display:none}  /* segurança: badge só no anual */
.plan:not(.plan--hl) .plan__head{margin-top:1.2rem}  /* compensa a falta do badge */
.plan__price{margin:.2rem 0 .15rem 0}
.plan__equiv{margin:.1rem 0 .1rem 0}
.plan__bill{margin:0 0 1rem 0; padding-bottom:1rem}
.plan__features{margin:0 0 1.2rem 0}
/* CTA ancorado no rodapé do card */
.plan__cta{margin-top:auto !important; margin-bottom:0}
.plan{padding-bottom:1.5rem}

/* Plano em destaque (anual) — gradiente premium + glow */
.plan--hl{
  background:
    radial-gradient(120% 100% at 50% -10%, rgba(16,185,129,.28), transparent 55%),
    linear-gradient(170deg, rgba(16,185,129,.18), rgba(6,35,26,.55));
  border-color:rgba(110,231,183,.5);
  box-shadow:0 30px 60px -28px rgba(16,185,129,.6), inset 0 1px 0 rgba(255,255,255,.06)}
.plan--hl::before{content:''; position:absolute; inset:-1px; border-radius:23px;
  background:linear-gradient(180deg, rgba(110,231,183,.45), transparent 35%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; padding:1px; pointer-events:none}

/* Badge de economia — centralizado no card, sempre visível */
.plan__badge{align-self:center;             /* centra no eixo horizontal do card */
  display:inline-flex; align-items:center; gap:.35rem;
  background:linear-gradient(135deg, #34d399, #059669); color:#04130d;
  font-family:var(--font-display); font-weight:800; font-size:.72rem; letter-spacing:.03em;
  padding:.4rem .85rem; border-radius:999px; white-space:nowrap;
  box-shadow:0 8px 20px -8px rgba(16,185,129,.65); margin-bottom:.9rem;
  max-width:calc(100% - var(--pi, 2.2rem) * 2);  /* respeita padding lateral do card */
  overflow:hidden; text-overflow:ellipsis}
.plan__badge svg{color:#04130d; flex-shrink:0; width:13px; height:13px}
.plan__badge--savings{padding:.4rem .85rem; font-size:.72rem}

/* Cabeçalho do plano */
.plan__head{margin-bottom:1.1rem}
.plan__name{font-family:var(--font-display); font-weight:800; font-size:1.4rem; color:var(--text); letter-spacing:-.01em}
.plan__tagline{font-size:.88rem; color:var(--text-mute); margin-top:.15rem}

/* Preço — tipografia hero */
.plan__price{font-family:var(--font-display); font-weight:800; line-height:1;
  display:flex; align-items:baseline; gap:.15rem; flex-wrap:nowrap; color:var(--text)}
.plan__price .cur{font-size:1.2rem; color:var(--text-dim); font-weight:700;
  align-self:flex-start; margin-right:.15rem; margin-top:.5rem; line-height:1}
.plan__price .int{font-size:3.2rem; line-height:.9; letter-spacing:-.02em}
.plan__price .dec{font-size:1.5rem; color:var(--text-dim); font-weight:700; line-height:1}
.plan__price .per{font-size:.92rem; color:var(--text-mute); font-weight:600; margin-left:.4rem; white-space:nowrap}
.plan--hl .plan__price{background:linear-gradient(180deg, #fff 0%, #c8f7e0 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}

.plan__equiv{font-size:.86rem; color:var(--brand-300); font-weight:500}
.plan__equiv strong{color:#fff; font-weight:800; font-family:var(--font-display)}
.plan__bill{font-size:.78rem; color:var(--text-mute);
  border-bottom:1px solid rgba(255,255,255,.06)}

/* === Cards sem preço — value prop + highlights === */
.plan__value-prop{margin:.4rem 0 .8rem; color:var(--text); font-size:.95rem; line-height:1.5}
.plan--hl .plan__value-prop{color:#fff; font-weight:500}
.plan__highlights{list-style:none; padding:0; margin:0 0 1.1rem;
  display:flex; flex-direction:column; gap:.6rem}
.plan__highlights li{display:flex; gap:.55rem; align-items:flex-start;
  color:var(--text-dim); font-size:.94rem; line-height:1.4}
.plan__highlights li svg{width:18px; height:18px; color:var(--brand-400); flex-shrink:0; margin-top:1px}
.plan--hl .plan__highlights li{color:var(--text)}
.plan--hl .plan__highlights li svg{color:var(--brand-300)}

.plan__features-toggle{margin:.4rem 0 1rem}
.plan__features-toggle > summary{cursor:pointer; list-style:none;
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.82rem; color:var(--brand-300); font-weight:600;
  padding:.35rem .65rem; border-radius:999px;
  background:rgba(110,231,183,.08); border:1px solid rgba(110,231,183,.2);
  transition:background .2s ease}
.plan__features-toggle > summary:hover{background:rgba(110,231,183,.15)}
.plan__features-toggle > summary::-webkit-details-marker{display:none}
.plan__features-toggle > summary svg{width:14px; height:14px; transition:transform .2s ease}
.plan__features-toggle[open] > summary svg{transform:rotate(45deg)}
.plan__features-toggle .plan__features{margin-top:1rem}

/* Lista de features */
.plan__features{list-style:none; padding:0; margin:0 0 1.4rem; display:flex; flex-direction:column; gap:.6rem; flex:1}
.plan__features li{display:flex; gap:.55rem; align-items:flex-start; color:var(--text-dim); font-size:.94rem; line-height:1.45}
.plan__features li svg{width:18px; height:18px; color:var(--brand-400); flex-shrink:0; margin-top:2px}
.plan--hl .plan__features li{color:var(--text)}
.plan--hl .plan__features li svg{color:var(--brand-300)}

/* CTA — discreto, sem ocupar a largura total do card */
.plan__cta{align-self:center;
  justify-content:center;
  padding:.7rem 1.6rem;
  font-size:.92rem;
  letter-spacing:.01em;
  border-radius:999px}
.plan__cta svg{width:15px; height:15px}

/* Linha de trust abaixo dos cards */
.plans__trust{display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:1.6rem; margin-top:2rem; color:var(--text-mute); font-size:.9rem}
.plans__trust-item{display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap}
.plans__trust-item svg{width:16px; height:16px; color:var(--brand-400)}

/* FAQ */
.faq{max-width:760px; margin-inline:auto; display:flex; flex-direction:column; gap:.7rem}
.faq__item{border:1px solid var(--line); border-radius:var(--radius); background:rgba(255,255,255,.025); overflow:hidden}
.faq__q{width:100%; text-align:left; background:none; border:0; cursor:pointer; color:var(--text);
  font-family:var(--font-display); font-weight:700; font-size:1.05rem; padding:1.2rem 1.4rem; display:flex; justify-content:space-between; align-items:center; gap:1rem}
.faq__q svg{width:20px; height:20px; color:var(--brand-400); transition:transform .25s; flex-shrink:0}
.faq__item.is-open .faq__q svg{transform:rotate(45deg)}
.faq__a{max-height:0; overflow:hidden; transition:max-height .3s ease; color:var(--text-dim)}
.faq__a p{padding:0 1.4rem 1.3rem; margin:0}
.faq__item.is-open .faq__a{max-height:260px}

/* CTA final */
.cta{position:relative; overflow:hidden; border-radius:var(--radius-lg); padding:clamp(2.5rem,6vw,4.5rem);
  background:linear-gradient(135deg, var(--brand-700), var(--ink-900)); border:1px solid rgba(110,231,183,.3); text-align:center}
.cta::before{content:''; position:absolute; inset:0; background:radial-gradient(60% 80% at 50% 0%, rgba(52,211,153,.25), transparent 70%)}
.cta__inner{position:relative; z-index:1; max-width:620px; margin-inline:auto}
.cta h2{font-size:clamp(1.8rem,4vw,2.8rem)}
.cta p{color:var(--text-dim); margin:1rem 0 1.8rem; font-size:1.1rem}

/* ---------- Footer ---------- */
.site-footer{position:relative; overflow:hidden; border-top:1px solid var(--line);
  background:linear-gradient(180deg, var(--ink-900), var(--ink-950));
  /* clearance extra para que o float-cta no canto não cubra links do footer */
  padding:4rem 0 calc(2rem + var(--float-cta-clearance, 0px)); margin-top:3rem}
body.page--contato .site-footer{padding-bottom:2rem}
.site-footer__glow{position:absolute; top:-45%; left:50%; transform:translateX(-50%); width:75%; height:85%;
  background:radial-gradient(closest-side, rgba(16,185,129,.15), transparent 70%); pointer-events:none}
.site-footer .container{position:relative; z-index:1}
.site-footer__top{display:grid; grid-template-columns:1.7fr 1fr 1fr 1.3fr; gap:2.5rem; padding-bottom:2.5rem; border-bottom:1px solid var(--line)}
.site-footer__brand{display:flex; flex-direction:column; align-items:flex-start}
.brand--footer{margin-bottom:.3rem}
.brand__logo--footer{height:clamp(118px,13vw,168px); width:auto; filter:drop-shadow(0 12px 32px rgba(0,0,0,.6))}
.site-footer__tag{color:var(--text-mute); margin:.2rem 0 1.3rem; max-width:300px; font-size:.96rem; line-height:1.6}
.socials{display:flex; gap:.7rem}
.social{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:var(--text-dim);
  background:rgba(255,255,255,.04); border:1px solid var(--line); transition:transform .2s, color .2s, border-color .2s, background .2s}
.social svg{width:20px; height:20px}
.social:hover{transform:translateY(-3px); color:var(--brand-300); border-color:rgba(110,231,183,.4); background:rgba(16,185,129,.1)}
.social--wa:hover{color:#25D366}
/* Header da coluna (compatível com <details> e <nav>+<h3> legado) */
.site-footer__col h3,
.site-footer__col > summary{
  font-family:var(--font-display); font-size:.78rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--brand-300); margin-bottom:1.1rem;
  list-style:none; cursor:default;
  display:flex; align-items:center; justify-content:space-between
}
.site-footer__col > summary::-webkit-details-marker{display:none}
.site-footer__col > summary::marker{display:none; content:''}
.site-footer__chev{display:none}  /* desktop: chevron escondido (sempre aberto) */
.site-footer__col a:not(.btn),
.site-footer__col > nav a{display:block; color:var(--text-mute); padding:.34rem 0; font-size:.96rem; transition:color .2s, padding-left .2s; text-decoration:none}
.site-footer__col a:not(.btn):hover,
.site-footer__col > nav a:hover{color:var(--brand-300); padding-left:.25rem}
.site-footer__cta{padding:1.5rem; border-radius:var(--radius-lg); background:linear-gradient(165deg, rgba(16,185,129,.12), rgba(6,30,21,.4)); border:1px solid rgba(110,231,183,.25)}
.site-footer__cta h3{font-family:var(--font-display); font-size:1.15rem; color:var(--text); margin-bottom:.4rem}
.site-footer__cta p{color:var(--text-dim); font-size:.92rem; margin-bottom:1.1rem}
.site-footer__cta .btn{justify-content:center; width:100%}
.site-footer__cta-note{display:inline-flex; align-items:center; gap:.4rem; margin-top:.9rem; font-size:.8rem; color:var(--text-mute)}
.footer-wa{display:flex; align-items:center; gap:.7rem; margin-top:.9rem; padding:.7rem .85rem;
  border-radius:14px; text-decoration:none;
  background:linear-gradient(160deg,rgba(37,211,102,.18),rgba(37,211,102,.05));
  border:1px solid rgba(37,211,102,.45); color:#d8f5e6; transition:transform .15s ease}
.footer-wa:hover{transform:translateY(-1px); background:linear-gradient(160deg,rgba(37,211,102,.28),rgba(37,211,102,.1))}
.footer-wa__ic{flex-shrink:0; width:34px; height:34px; border-radius:50%; background:#25D366; color:#fff;
  display:grid; place-items:center}
.footer-wa__ic svg{width:20px; height:20px}
.footer-wa__phone{display:block; font-family:var(--font-display); font-weight:800; color:#fff;
  font-size:1.05rem; letter-spacing:.01em; line-height:1.15}
.footer-wa__badge{display:inline-flex; align-items:center; gap:.25rem; font-size:.66rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:#9bd1ff; margin-top:.1rem}
.footer-wa__badge svg{width:12px; height:12px}
.site-footer__cta-note svg{width:15px; height:15px; color:var(--brand-400); flex-shrink:0}
.site-footer__bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.2rem;
  margin-top:1.8rem; color:var(--text-mute); font-size:.88rem}
.site-footer__bottom-l{display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap}
.back-top{display:inline-flex; align-items:center; gap:.4rem; color:var(--text-dim); font-weight:600; transition:color .2s}
.back-top svg{width:16px; height:16px; transition:transform .2s}
.back-top:hover{color:var(--brand-300)}
.back-top:hover svg{transform:translateY(-3px)}

/* crédito do desenvolvedor — MEU CDN */
.dev-credit{display:inline-flex; align-items:center; gap:1rem; padding:.65rem 1rem; border-radius:14px;
  background:#0a0d12; border:1px solid rgba(255,255,255,.07); transition:transform .2s, border-color .2s, box-shadow .2s}
.dev-credit:hover{transform:translateY(-2px); border-color:rgba(255,255,255,.18); box-shadow:0 12px 30px -16px rgba(168,85,247,.5)}
.dev-credit__txt{display:flex; flex-direction:column; line-height:1.25; padding-left:.85rem; border-left:2px solid #f97316}
.dev-credit__eyebrow{font-family:var(--font-display); font-weight:700; font-size:.64rem; letter-spacing:.15em; text-transform:uppercase;
  background:linear-gradient(90deg,#f97316,#fb7185); -webkit-background-clip:text; background-clip:text; color:transparent}
.dev-credit__by{font-size:.82rem; color:#9aa3ad; font-weight:500}
.dev-credit__logo{height:40px; width:auto; object-fit:contain; filter:drop-shadow(0 0 14px rgba(168,85,247,.4))}

/* ---------- Páginas internas ---------- */
.page-hero{position:relative; overflow:hidden; text-align:center; padding:calc(var(--header-h) + 4.5rem) 0 3.5rem;
  background:radial-gradient(85% 120% at 50% -10%, rgba(16,185,129,.16), transparent 58%), var(--ink-950); border-bottom:1px solid var(--line)}
.page-hero--compact{padding:calc(var(--header-h) + 3rem) 0 2.4rem}
.page-hero__inner{position:relative; z-index:1; max-width:760px; margin-inline:auto}
.page-hero h1{font-size:clamp(2.1rem,5vw,3.4rem); margin-top:1.1rem}
.page-hero h1 .grad{background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent}
.page-hero p{margin:1.1rem auto 0; max-width:600px; color:var(--text-dim); font-size:1.08rem}
.page-hero__trust{display:inline-flex; align-items:center; gap:.7rem; margin-top:1.6rem;
  padding:.55rem .9rem .55rem .6rem; border-radius:999px;
  background:rgba(255,255,255,.04); border:1px solid rgba(110,231,183,.2);
  color:var(--text-dim); font-size:.86rem}
.page-hero__trust strong{color:#fff; font-weight:800}

/* =============================== /cadastro =============================== */
.signup-wrap{display:grid; grid-template-columns:1fr; gap:2.4rem; max-width:1100px; margin:0 auto; align-items:center}
@media (min-width:900px){
  .signup-wrap{grid-template-columns:minmax(0, 1fr) minmax(280px, 380px); gap:3rem}
}

.signup-card{position:relative; padding:2rem 2rem 1.6rem;
  border-radius:22px; background:linear-gradient(170deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border:1px solid var(--line); display:flex; flex-direction:column; gap:1.2rem}
@media (min-width:768px){ .signup-card{padding:2.4rem 2.4rem 1.8rem} }

.signup-plan-tag{display:inline-flex; align-items:center; gap:.5rem; align-self:flex-start;
  padding:.5rem .9rem; border-radius:999px; font-size:.85rem;
  background:linear-gradient(135deg, rgba(52,211,153,.18), rgba(16,185,129,.08));
  border:1px solid rgba(110,231,183,.4); color:#d8f5e6}
.signup-plan-tag svg{color:var(--brand-300); width:16px; height:16px}
.signup-plan-tag strong{color:#fff; font-weight:800}

.signup-field{display:flex; flex-direction:column; gap:.35rem; position:relative}
.signup-field label{font-family:var(--font-display); font-weight:700; font-size:.92rem; color:var(--text)}
.signup-field input{
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  color:var(--text); font:inherit; font-size:1rem;
  padding:.85rem 1rem; border-radius:14px;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.signup-field input::placeholder{color:#5b7268; opacity:.7}
.signup-field input:focus{outline:none; border-color:var(--brand-500);
  background:rgba(255,255,255,.05); box-shadow:0 0 0 3px rgba(16,185,129,.18)}
.signup-field.is-invalid input{border-color:#f87171; box-shadow:0 0 0 3px rgba(239,68,68,.15)}
.signup-field.is-valid input{border-color:rgba(110,231,183,.7); box-shadow:0 0 0 3px rgba(16,185,129,.12)}
/* Check verde no canto direito quando válido */
.signup-field{position:relative}
.signup-field.is-valid::after{content:''; position:absolute; right:14px; top:38px;
  width:20px; height:20px; border-radius:50%;
  background:#10b981 url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat;
  pointer-events:none; animation:checkPop .25s ease-out}
@keyframes checkPop{0%{transform:scale(0); opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1); opacity:1}}
.signup-help{color:var(--text-mute); font-size:.78rem; line-height:1.4}
.signup-error{color:#fca5a5; font-size:.78rem; margin-top:.25rem; font-weight:600;
  display:inline-flex; align-items:center; gap:.3rem}
.signup-error::before{content:'⚠'; font-size:.85rem}

/* ── Seletor de DDI + telefone (introduzido 06/2026) ─────────────────────── */
/* IMPORTANTE: prefixar regras com `.signup-field--phone` pra ganhar specificity
   sobre `.signup-field input` (0,1,1). Sem isso, o input search dentro do
   dropdown pega o estilo de input regular. */
.signup-field--phone{position:relative}
.signup-field--phone.is-valid::after{display:none}
.signup-field--phone .signup-phone-wrap{display:flex; gap:.5rem; align-items:stretch}
.signup-field--phone .signup-ddi-trigger{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:0 .85rem; height:46px; min-width:120px;
  background:rgba(11,42,31,.85); border:1.5px solid rgba(110,231,183,.28);
  border-radius:12px; cursor:pointer; color:var(--text);
  font-family:inherit; font-weight:700; font-size:.95rem;
  transition:border-color .2s, background .2s}
.signup-field--phone .signup-ddi-trigger:hover{border-color:rgba(110,231,183,.5); background:rgba(11,42,31,1)}
.signup-field--phone .signup-ddi-trigger:focus{outline:none; border-color:var(--brand-500); box-shadow:0 0 0 3px rgba(16,185,129,.15)}
.signup-field--phone .signup-ddi-flag{font-size:1.25rem; line-height:1}
.signup-field--phone .signup-ddi-code{color:var(--brand-300); font-variant-numeric:tabular-nums}
.signup-field--phone .signup-ddi-caret{font-size:.7rem; opacity:.6; margin-left:.1rem}
.signup-field--phone input[type=tel]{flex:1; min-width:0}

/* Dropdown — desktop floating
   IMPORTANTE: `display:flex` author CSS sobrescreve `display:none` do atributo
   HTML `hidden` (UA stylesheet specificity 0). Forçamos `hidden` a esconder
   com regra específica. Sem isso, o `ddiDropdown.hidden=true` no JS não tinha
   efeito visual — bug 06/2026: clicar no país atualizava DDI mas dropdown
   continuava aberto. */
.signup-field--phone .signup-ddi-dropdown[hidden]{display:none !important}
.signup-field--phone .signup-ddi-dropdown{
  position:absolute; top:calc(100% + .35rem); left:0; right:0; z-index:50;
  background:#0b2a1f; border:1.5px solid rgba(110,231,183,.3);
  border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.45);
  max-height:340px; display:flex; flex-direction:column; overflow:hidden}

/* Input search — força reset (vence `.signup-field input`) */
.signup-field--phone .signup-ddi-dropdown input.signup-ddi-search{
  width:100%; box-sizing:border-box; padding:.85rem 1rem; margin:0;
  background:transparent; border:none; border-bottom:1px solid rgba(110,231,183,.18);
  border-radius:0; color:var(--text); font-family:inherit; font-size:.95rem;
  height:auto; box-shadow:none}
.signup-field--phone .signup-ddi-dropdown input.signup-ddi-search:focus{
  outline:none; background:rgba(110,231,183,.05); border-bottom-color:var(--brand-500);
  box-shadow:none}

.signup-field--phone .signup-ddi-list{
  list-style:none; margin:0; padding:.3rem; overflow-y:auto; flex:1; min-height:0;
  -webkit-overflow-scrolling:touch}
.signup-field--phone .signup-ddi-list li{
  display:flex; align-items:center; gap:.6rem; padding:.7rem .8rem; border-radius:9px;
  cursor:pointer; font-size:.95rem; line-height:1.3; transition:background .12s}
.signup-field--phone .signup-ddi-list li:hover,
.signup-field--phone .signup-ddi-list li[aria-selected="true"]{background:rgba(16,185,129,.16)}
.signup-field--phone .signup-ddi-list li .flag{font-size:1.3rem; line-height:1}
.signup-field--phone .signup-ddi-list li .name{flex:1; color:var(--text)}
.signup-field--phone .signup-ddi-list li .ddi{color:var(--brand-300); font-weight:700; font-variant-numeric:tabular-nums}
.signup-field--phone .signup-ddi-list li.empty{color:var(--text-mute); cursor:default; justify-content:center;
  padding:1.2rem 0; font-style:italic}
.signup-field--phone .signup-ddi-list li.empty:hover{background:transparent}

/* Mobile (≤ 600px): vira bottom-sheet fixed pra evitar sobrepor o form e
   ter mais espaço pra lista de países. */
@media (max-width:600px){
  .signup-field--phone .signup-ddi-dropdown{
    position:fixed; top:auto; bottom:0; left:0; right:0;
    border-radius:18px 18px 0 0; border-bottom:none;
    max-height:75vh; height:auto;
    box-shadow:0 -16px 40px rgba(0,0,0,.6);
    padding-bottom:env(safe-area-inset-bottom, 0)}
  .signup-field--phone .signup-ddi-dropdown::before{
    content:''; display:block; width:42px; height:4px; margin:.6rem auto .25rem;
    background:rgba(110,231,183,.35); border-radius:99px; flex-shrink:0}
  .signup-field--phone .signup-ddi-list{max-height:60vh}
  /* Backdrop escurecido atrás do bottom-sheet */
  body.ddi-open::before{
    content:''; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:49;
    animation:ddiFadeIn .18s ease}
  @keyframes ddiFadeIn{from{opacity:0}to{opacity:1}}
}

.signup-optin{display:flex; align-items:flex-start; gap:.7rem; cursor:pointer;
  padding:.85rem 1rem; border-radius:14px;
  background:rgba(110,231,183,.06); border:1px solid rgba(110,231,183,.18);
  font-size:.85rem; line-height:1.5; color:var(--text-dim)}
.signup-optin input[type=checkbox]{margin-top:.18rem; accent-color:var(--brand-500);
  width:18px; height:18px; flex-shrink:0; cursor:pointer}
.signup-optin a{color:var(--brand-300); text-decoration:underline}
.signup-optin strong{color:var(--text)}
.signup-optin em{font-style:normal; font-weight:700; color:var(--brand-300)}

.signup-submit{align-self:center; min-width:240px; justify-content:center;
  padding:.95rem 1.8rem; font-size:1rem; position:relative}
.signup-submit__spin{display:none; width:18px; height:18px; border-radius:50%;
  border:2.5px solid rgba(4,19,13,.25); border-top-color:#04130d;
  animation:spinPulse .7s linear infinite}
.signup-card.is-loading .signup-submit__label{opacity:.5}
.signup-card.is-loading .signup-submit__spin{display:inline-block}
.signup-card.is-loading .signup-submit svg{display:none}
@keyframes spinPulse{to{transform:rotate(360deg)}}

.signup-trust{display:inline-flex; align-items:flex-start; gap:.5rem;
  margin:0; font-size:.78rem; color:var(--text-mute); line-height:1.5; text-align:left}
.signup-trust svg{width:15px; height:15px; color:var(--brand-400); flex-shrink:0; margin-top:1px}

/* Resultado: MODAL full-screen (substitui o card inline anterior) */
.signup-result{position:fixed; inset:0; z-index:9999;
  display:none; align-items:center; justify-content:center;
  padding:1rem; background:rgba(4,19,13,.78); backdrop-filter:blur(8px);
  animation:resultFade .3s ease}
.signup-result:not([hidden]){display:flex}
body.signup-result-open{overflow:hidden}
.signup-result__card{position:relative; max-width:480px; width:100%;
  padding:2rem 1.6rem 1.4rem; border-radius:22px;
  text-align:center; color:#d8f5e6;
  background:linear-gradient(160deg, rgba(52,211,153,.22), rgba(6,35,26,.95));
  border:1px solid rgba(110,231,183,.55);
  box-shadow:0 24px 70px -10px rgba(16,185,129,.4), 0 0 0 1px rgba(16,185,129,.18);
  animation:resultPop .35s cubic-bezier(.34,1.56,.64,1)}
.signup-result[data-kind=error] .signup-result__card{
  background:linear-gradient(160deg, rgba(239,68,68,.20), rgba(40,10,10,.95));
  border-color:rgba(239,68,68,.55);
  box-shadow:0 24px 70px -10px rgba(239,68,68,.4), 0 0 0 1px rgba(239,68,68,.18);
  color:#fecaca}
.signup-result__close{position:absolute; top:.7rem; right:.7rem;
  width:34px; height:34px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.08); color:#d8f5e6;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, transform .15s}
.signup-result__close:hover{background:rgba(255,255,255,.2); transform:scale(1.05)}
.signup-result__icon{display:flex; justify-content:center; margin-bottom:.7rem; color:var(--brand-300)}
.signup-result__icon--err{color:#f87171}
.signup-result h3{margin:0 0 .5rem 0; font-family:var(--font-display); font-size:1.5rem; color:#fff}
.signup-result p{margin:.4rem 0; font-size:.96rem; line-height:1.55}
.signup-result__lead strong{color:#fff; font-weight:800}
.signup-result__steps{display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem;
  margin:1.2rem 0 .9rem}
.signup-result__step{display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .7rem .35rem .35rem; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(110,231,183,.25);
  font-size:.78rem; color:#d8f5e6; font-weight:600}
.signup-result__step-n{display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%;
  background:linear-gradient(135deg, #34d399, #10b981); color:#04130d;
  font-family:var(--font-display); font-weight:800; font-size:.72rem}
.signup-result__hint{font-size:.84rem; color:var(--text-mute); margin-top:.9rem}
.signup-result a{color:var(--brand-300); text-decoration:underline; font-weight:600}
@keyframes resultFade{from{opacity:0}to{opacity:1}}
@keyframes resultPop{from{opacity:0; transform:translateY(20px) scale(.95)}to{opacity:1; transform:none}}

/* Coluna 2: mascotes */
.signup-side{position:relative; align-self:center}
.signup-side video, .signup-side img{
  display:block; width:100%; height:auto; max-width:380px;
  border-radius:24px; margin-inline:auto;
  background:#04130d; border:1px solid rgba(110,231,183,.25);
  box-shadow:0 30px 60px -25px rgba(16,185,129,.45);
}
@media (max-width:899px){ .signup-side{order:-1; max-width:280px; margin-inline:auto} }
@media (max-width:480px){ .signup-side{max-width:200px} }

/* Body lock: oculta float-cta na página de cadastro (form já tem CTA principal) */
body.page--cadastro .float-cta{display:none}
body.page--cadastro main{padding-bottom:0}

.prose{max-width:780px; margin-inline:auto}
.prose h2{font-family:var(--font-display); font-size:1.45rem; margin:2.4rem 0 .7rem; color:var(--text)}
.prose h2 .grad{background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--text-dim); margin:.55rem 0}
.prose ul{padding-left:1.25rem; margin:.6rem 0}
.prose strong{color:var(--text)}
.prose a{color:var(--brand-300)}
.prose .note{background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.3); border-radius:14px;
  padding:1rem 1.2rem; color:#fcd9a8; margin:1.6rem 0; font-size:.95rem}
.prose .ph{color:var(--brand-300); font-weight:600}

.values{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:.5rem}
.value{padding:1.6rem 1.4rem; border:1px solid var(--line); border-radius:var(--radius); background:rgba(255,255,255,.025)}
.value__ic{width:46px; height:46px; border-radius:13px; display:grid; place-items:center; margin-bottom:.9rem;
  background:radial-gradient(circle at 50% 30%, rgba(16,185,129,.28), rgba(6,30,21,.6)); border:1px solid rgba(110,231,183,.25)}
.value__ic svg{width:24px; height:24px; color:var(--brand-300)}
.value h3{font-size:1.12rem; margin-bottom:.4rem}
.value p{color:var(--text-dim); margin:0; font-size:.95rem}

.contact{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2rem,5vw,3.5rem); align-items:start}
/* WhatsApp Oficial — card hero na página /contato.php */
.wa-hero{display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
  padding:1.4rem 1.4rem 1.4rem 1.2rem; margin:0 0 1.4rem;
  border-radius:22px; text-decoration:none;
  background:linear-gradient(160deg,rgba(37,211,102,.20),rgba(16,185,129,.06) 60%,rgba(4,25,15,.7));
  border:1px solid rgba(37,211,102,.55);
  box-shadow:0 18px 50px -20px rgba(16,185,129,.55);
  transition:transform .15s ease, border-color .2s ease, box-shadow .2s ease}
.wa-hero:hover{transform:translateY(-2px); border-color:rgba(110,231,183,.85);
  box-shadow:0 24px 60px -20px rgba(16,185,129,.75)}
.wa-hero__left{display:flex; align-items:center; gap:1rem; min-width:0}
.wa-hero__ic{flex-shrink:0; width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff;
  display:grid; place-items:center; box-shadow:0 10px 24px -8px rgba(37,211,102,.7)}
.wa-hero__ic svg{width:30px; height:30px}
.wa-hero__txt{display:flex; flex-direction:column; gap:.18rem; min-width:0}
.wa-hero__badge{display:inline-flex; align-items:center; gap:.35rem; align-self:flex-start;
  background:rgba(29,155,240,.15); border:1px solid rgba(29,155,240,.45);
  color:#9bd1ff; font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:.22rem .55rem .22rem .35rem; border-radius:999px; margin-bottom:.15rem}
.wa-hero__badge svg{width:14px; height:14px}
.wa-hero__phone{font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.35rem,3.6vw,1.85rem); color:#fff; letter-spacing:.01em; line-height:1.05}
.wa-hero__hint{color:#a7d4b5; font-size:.86rem}
.wa-hero__cta{display:inline-flex; align-items:center; gap:.45rem; flex-shrink:0;
  padding:.8rem 1.1rem; border-radius:var(--radius-pill);
  background:#25D366; color:#04190f; font-family:var(--font-display); font-weight:800; font-size:.95rem;
  box-shadow:0 10px 24px -10px rgba(37,211,102,.85)}
.wa-hero:hover .wa-hero__cta{background:#34d399}
@media (max-width:680px){
  .wa-hero{flex-direction:column; align-items:stretch; gap:1rem; padding:1.2rem}
  .wa-hero__cta{justify-content:center}
  .wa-hero__phone{font-size:1.45rem}
}

.channel{display:flex; gap:1rem; align-items:center; padding:1.2rem 1.3rem; border:1px solid var(--line);
  border-radius:var(--radius); background:rgba(255,255,255,.025); transition:border-color .2s, transform .2s; margin-bottom:1rem}
.channel:hover{border-color:rgba(110,231,183,.4); transform:translateY(-2px)}
.channel__ic{width:46px; height:46px; border-radius:13px; flex-shrink:0; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 30%, rgba(16,185,129,.28), rgba(6,30,21,.6)); border:1px solid rgba(110,231,183,.25)}
.channel__ic svg{width:24px; height:24px; color:var(--brand-300)}
.channel strong{display:block; color:var(--text); font-family:var(--font-display)}
.channel span{color:var(--text-mute); font-size:.9rem}
.form{display:flex; flex-direction:column; gap:1rem; padding:1.8rem; border:1px solid var(--line); border-radius:var(--radius-lg); background:rgba(255,255,255,.025)}
.form label{font-weight:600; font-size:.88rem; color:var(--text-dim); margin-bottom:-.5rem}
.form input,.form textarea{width:100%; padding:.85rem 1rem; border-radius:12px; background:var(--ink-900);
  border:1px solid var(--line); color:var(--text); font:inherit; font-size:.95rem}
.form textarea{min-height:120px; resize:vertical}
.form input:focus,.form textarea:focus{outline:none; border-color:var(--brand-500); box-shadow:0 0 0 3px rgba(16,185,129,.18)}

/* Suprime float-cta em páginas que já têm WhatsApp em destaque */
body.page--contato .float-cta{display:none}
body.page--contato main{padding-bottom:0}
/* Honeypot anti-bot: visualmente escondido, mas reachable pra bots de scraping */
.hp{position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden}
/* Auto-hide quando o footer entra no viewport (controlado pelo JS) */
.float-cta{transition:opacity .25s ease, transform .25s ease}
.float-cta.is-hidden{opacity:0; transform:translateY(20px); pointer-events:none}

/* ---------- Botão flutuante (WhatsApp / Vitor) — número visível ---------- */
:root{ --float-cta-clearance:96px; }
/* libera espaço no fim do main pra o float-cta não sobrepor conteúdo (form, links etc) */
main{ padding-bottom:var(--float-cta-clearance); }
@media (max-width:680px){ :root{ --float-cta-clearance:108px; } }

.float-cta{position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:90;
  display:inline-flex; align-items:center; flex-direction:row-reverse; gap:.7rem; text-decoration:none;
  isolation:isolate}
.float-cta__avatar{position:relative; width:66px; height:66px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(160deg,#34d399,#059669); box-shadow:0 14px 38px -8px rgba(16,185,129,.8); transition:transform .2s}
.float-cta__avatar img{width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; border:2px solid rgba(255,255,255,.2)}
.float-cta:hover .float-cta__avatar{transform:translateY(-3px) scale(1.05)}
.float-cta__avatar::after{content:''; position:absolute; inset:-5px; border-radius:50%; border:2px solid rgba(52,211,153,.55);
  animation:waPulse 2.2s ease-out infinite; pointer-events:none}
@keyframes waPulse{0%{transform:scale(.92); opacity:.85}100%{transform:scale(1.28); opacity:0}}
.float-cta__badge{position:absolute; right:-3px; bottom:-3px; width:26px; height:26px; border-radius:50%;
  background:linear-gradient(135deg, #6ee7b7, #10b981);
  display:grid; place-items:center; box-shadow:0 2px 8px rgba(16,185,129,.55); z-index:2}
.float-cta__badge svg{width:14px; height:14px}

/* Pulse animado no painel — chama atenção pro CTA */
.float-cta__pulse{position:absolute; top:50%; left:-6px; width:8px; height:8px; border-radius:50%;
  background:#34d399; transform:translateY(-50%);
  box-shadow:0 0 0 0 rgba(52,211,153,.7); animation:ctaPulse 1.8s ease-out infinite}
@keyframes ctaPulse{
  0%{box-shadow:0 0 0 0 rgba(52,211,153,.7)}
  70%{box-shadow:0 0 0 12px rgba(52,211,153,0)}
  100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}
}

/* Painel persistente com número + selo Oficial — substitui o antigo .float-cta__label */
.float-cta__panel{display:inline-flex; flex-direction:column; align-items:flex-start; gap:.15rem;
  background:rgba(4,25,15,.96); color:var(--text); border:1px solid var(--line);
  border-radius:18px; padding:.55rem .9rem; backdrop-filter:blur(8px);
  font-family:var(--font-display); line-height:1.15; box-shadow:0 14px 30px -16px rgba(0,0,0,.55);
  transform:translateX(0); transition:transform .25s ease}
.float-cta:hover .float-cta__panel{transform:translateX(-3px)}
.float-cta__verified{display:inline-flex; align-items:center; gap:.25rem;
  font-size:.72rem; font-weight:700; letter-spacing:.02em; color:#9bd1ff; text-transform:uppercase}
.float-cta__verified svg{width:14px; height:14px}
.float-cta__line1{font-weight:700; font-size:.86rem; color:var(--text-muted, #cbd5e1)}
.float-cta__line2{font-weight:800; font-size:.98rem; color:#fff; letter-spacing:.01em; white-space:nowrap}

/* Mobile: encolhe o painel pra só o número, mantendo aparência limpa */
@media (max-width:680px){
  .float-cta{gap:.5rem}
  .float-cta__panel{padding:.45rem .7rem; border-radius:14px}
  .float-cta__line1{display:none}
  .float-cta__line2{font-size:.85rem}
  .float-cta__verified{font-size:.62rem}
}
@media (max-width:380px){
  /* viewport bem estreito: esconde painel, deixa só o avatar */
  .float-cta__panel{display:none}
}
@media (prefers-reduced-motion:reduce){ .float-cta__avatar::after{animation:none} }

/* ---------- Reveal on scroll (robusto: visível sem JS) ---------- */
.reveal{transition:opacity .6s ease, transform .6s ease}
.js .reveal{opacity:0; transform:translateY(26px)}
.reveal.is-in{opacity:1; transform:none}

/* ---------- Responsivo ---------- */
@media (max-width:980px){
  .hero__inner{grid-template-columns:1fr; text-align:center}
  .hero__copy{max-width:640px; margin-inline:auto}
  .hero__sub{margin-inline:auto}
  .hero__cta,.hero__chips,.hero__trust{justify-content:center}
  .hero__art{order:-1; margin-bottom:1rem}
  .hero__demo{width:min(560px,96%)}
  .stats-strip__grid{grid-template-columns:repeat(2,1fr)}
  .steps,.features,.plans{grid-template-columns:1fr 1fr}
  .showcase{grid-template-columns:1fr}
  .site-footer__top{grid-template-columns:1fr 1fr}
  .contact{grid-template-columns:1fr}
  .values{grid-template-columns:1fr 1fr}
  .step__line{display:none}
}
@media (max-width:680px){
  .nav,.site-header__actions{display:none}
  .nav-toggle{display:flex}
  .steps,.features,.plans,.stats-strip__grid,.site-footer__top,.values{grid-template-columns:1fr}

  /* Mobile: tipografia ajustada + Anual primeiro + padding interno menor */
  .plan{--pi:1.3rem; padding-bottom:1.3rem}
  .plan--hl{order:-1}
  .plan__price .int{font-size:2.8rem}
  .plan__price .dec{font-size:1.35rem}
  .plan__price .cur{font-size:1.05rem; margin-top:.4rem}
  .plan__name{font-size:1.25rem}
  .plan__cta{padding:.85rem 1rem; font-size:.95rem}

  /* Reduz hover-jump em mobile (sem hover real) */
  .plan:hover{transform:none}

  /* ============== Footer mobile aprimorado ============== */
  .site-footer{padding-top:3rem; margin-top:2rem}
  .site-footer__top{gap:1rem; padding-bottom:1.5rem}

  /* Brand em destaque, centralizado e com mais respiro */
  .site-footer__brand{align-items:center; text-align:center; padding-bottom:.5rem}
  .brand--footer .brand__logo--footer{width:120px; height:120px}
  .site-footer__tag{max-width:340px; margin:.4rem auto 1.2rem; font-size:.98rem}
  .socials{justify-content:center; gap:.7rem}
  .social{width:46px; height:46px}
  .social svg{width:22px; height:22px}

  /* CTA do footer reordenado pra antes das listas (mobile-first decision) */
  .site-footer__cta{order:-1; margin-bottom:.5rem}
  .site-footer__brand{order:-2}
  .site-footer__col[open]{order:0}
  .site-footer__col:not([open]){order:0}

  /* Accordion das colunas no mobile */
  .site-footer__col{border:1px solid rgba(255,255,255,.06); border-radius:14px;
    background:rgba(255,255,255,.02); padding:.2rem .9rem; margin:0}
  .site-footer__col > summary{margin:0; padding:1rem .2rem;
    font-size:.82rem; cursor:pointer; user-select:none}
  .site-footer__col > summary:hover{color:var(--brand-200)}
  .site-footer__chev{display:inline-block; color:var(--brand-300); opacity:.7;
    transition:transform .22s ease}
  .site-footer__col[open] > summary > .site-footer__chev{transform:rotate(180deg)}
  .site-footer__col > nav{padding:.2rem .2rem .9rem; display:flex; flex-direction:column; gap:.05rem}
  .site-footer__col > nav a{padding:.55rem 0; font-size:1rem}

  /* Bottom mais legível */
  .site-footer__bottom{flex-direction:column; align-items:center; text-align:center; gap:1rem;
    padding-top:1.5rem}
  .site-footer__bottom-l{flex-direction:column; gap:.55rem; font-size:.84rem}
  .back-top{padding:.55rem 1.1rem; background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08); border-radius:999px}
  .dev-credit{justify-content:center}
}
@media (max-width:380px){
  .brand--footer .brand__logo--footer{width:96px; height:96px}
  .site-footer__cta{padding:1.2rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
}