/* Aceler Marketing Digital — landing de diagnóstico. Tokens do design system Aceler. */

@font-face{font-family:'Aller';src:url('Aller_Std_Rg.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Aller';src:url('Aller_Std_It.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Aller';src:url('Aller_Std_Bd.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Roboto';src:url('Roboto-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Roboto';src:url('Roboto-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Roboto';src:url('Roboto-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}

:root{
  --aceler-blue:#473BF0; --aceler-red:#E70305; --aceler-brown:#594F3B;
  --aceler-cyan:#1B98E0; --aceler-warm-grey:#9B9589;
  --aceler-blue-700:#3A2EC7; --aceler-blue-100:#E9E7FD; --aceler-red-700:#B00204;
  --aceler-grey-050:#F6F5F3; --aceler-grey-100:#EDEBE7; --aceler-grey-200:#DEDBD4;
  --aceler-gradient:linear-gradient(90deg,var(--aceler-blue) 0%,var(--aceler-red) 100%);
  --aceler-gradient-text:linear-gradient(92deg,var(--aceler-blue) 12%,var(--aceler-red) 88%);
  --text-strong:var(--aceler-brown); --text-body:#4A4335; --text-muted:var(--aceler-warm-grey);
  --border-subtle:var(--aceler-grey-200); --focus-ring:var(--aceler-cyan);

  --font-display:'Aller',system-ui,sans-serif;
  --font-body:'Roboto',system-ui,sans-serif;
  --fs-h3:24px; --fs-h4:20px;
  --fs-body-lg:18px; --fs-body:16px; --fs-body-sm:14px; --fs-caption:13px;
  --lh-heading:1.16; --lh-body:1.6;
  --ls-eyebrow:0.22em; --ls-caps:0.12em; --ls-display:-0.01em;

  --radius-sm:4px; --radius-md:8px; --radius-lg:14px;
  --shadow-sm:0 1px 2px rgba(89,79,59,.10);
  --shadow-md:0 6px 18px rgba(89,79,59,.12);
  --shadow-lg:0 18px 44px rgba(89,79,59,.16);
  --shadow-brand:0 10px 30px rgba(71,59,240,.22);
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-in-out:cubic-bezier(.45,.05,.55,.95);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:340ms;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
noscript{display:none}
html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;background:#000;font-family:var(--font-body);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
h1,h2,h3,p,li,span,a,label{overflow-wrap:break-word}
a{color:var(--aceler-blue);text-decoration:none}
a:hover{color:var(--aceler-red)}
ul{margin:0;padding-left:20px}
li{margin-bottom:10px}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.grad-text{background:var(--aceler-gradient-text);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Botões — padrão Aceler */
.btn{font-family:var(--font-display);text-transform:uppercase;letter-spacing:var(--ls-caps);font-weight:500;
  border:2px solid transparent;border-radius:var(--radius-sm);cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;gap:8px;line-height:1;text-decoration:none;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.btn-sm{font-size:12px;padding:8px 14px}
.btn-md{font-size:13px;padding:12px 20px}
.btn-lg{font-size:15px;padding:16px 28px}
.btn-full{width:100%}
.btn-primary{background:var(--aceler-blue);color:#fff;box-shadow:var(--shadow-brand)}
.btn-primary:hover{background:var(--aceler-blue-700);color:#fff}
.btn-accent{background:var(--aceler-red);color:#fff}
.btn-accent:hover{background:var(--aceler-red-700);color:#fff}
.btn-outline-inv{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn-outline-inv:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}

/* Campos */
.inp{display:flex;align-items:center;background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);
  padding:0 12px;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.inp:focus-within{border-color:var(--aceler-blue);box-shadow:0 0 0 3px var(--aceler-blue-100)}
.inp input{flex:1;border:none;outline:none;background:transparent;font-family:var(--font-body);font-size:var(--fs-body);
  color:var(--text-strong);padding:12px 0;min-width:0}
.opt{text-align:left;cursor:pointer;font-family:var(--font-body);font-size:var(--fs-body);padding:15px 18px;
  border-radius:var(--radius-sm);background:rgba(255,255,255,.05);color:#fff;border:2px solid rgba(255,255,255,.22);
  transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.opt:hover{background:rgba(255,255,255,.12)}
.opt.on{background:var(--aceler-blue);border-color:var(--aceler-blue)}

/* Animações */
@keyframes acelerNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@keyframes acelerDrift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(22px,-16px,0)}}
@keyframes acelerPanelIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes acelerFadeIn{from{opacity:0}to{opacity:1}}
@keyframes acelerStepIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
@keyframes acelerMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
html.aceler-reveal [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .42s var(--ease-out),transform .42s var(--ease-out)}
html.aceler-reveal [data-reveal][data-in]{opacity:1;transform:none}
[data-drift]{animation:acelerDrift 26s var(--ease-in-out) infinite}
[data-r="marquee"]:hover > div{animation-play-state:paused}
[data-step]{animation:acelerStepIn var(--dur-base) var(--ease-out)}

/* Hovers */
.scroll-cue:hover{border-color:#fff}
.modelo{transition:opacity .42s var(--ease-out),transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.modelo:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.logo-card{transition:box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.logo-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.bigcta:hover{background:var(--aceler-red-700);color:#fff}
.close-x:hover{background:rgba(255,255,255,.12)}

@media (prefers-reduced-motion:reduce){
  [data-drift],[data-step]{animation:none !important}
  [data-r="marquee"] > div{animation:none !important}
  html.aceler-reveal [data-reveal]{opacity:1 !important;transform:none !important}
  [data-parallax]{transform:none !important}
}

[data-r="two"] > *,[data-r="hero"] > *,[data-r="panels"] > *,[data-r="cards"] > *{min-width:0;max-width:100%}

@media (max-width:980px){
  [data-r="two"],[data-r="hero"],[data-r="panels"]{grid-template-columns:1fr !important}
  [data-r="portrait"]{justify-self:center !important;max-width:460px !important}
  [data-r="cards"]{grid-template-columns:repeat(2,1fr) !important}
  header [data-r="navcta"] .btn{padding:12px 16px !important}
}
@media (max-width:900px){
  .btn,[data-r="bigcta"] span{white-space:normal !important;line-height:1.25 !important;text-align:center}
}
@media (max-width:620px){
  [data-r="cards"]{grid-template-columns:1fr !important}
  [data-r="navcta"]{display:none}
  [data-r="hero"]{gap:28px !important}
  [data-r="ctarow"]{flex-direction:column;align-items:stretch !important;gap:14px !important}
  [data-r="ctarow"] .btn{width:100%}
  [data-r="ctarow"] span{text-align:center}
  [data-r="bigcta"]{max-width:none !important;text-align:center}
  [data-r="portrait"]{max-width:100% !important;aspect-ratio:4 / 4.4 !important}
  [data-hero-portrait]{display:none !important}
  [data-r="footer"]{padding-bottom:104px !important;text-align:center}
  [data-r="footer"] > div{justify-content:center !important}
  [data-r="fixedcta"]{left:0 !important;right:0 !important;bottom:0 !important;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(0,0,0,.92);
    border-top:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  [data-r="fixedcta"] .btn{width:100%;padding:16px 20px !important}
  [data-r="overlay"]{place-items:start center !important;padding:12px 12px 104px !important}
  [data-r="panel"]{padding:28px 20px !important}
}