/* home-w5-movimento (06/10/2026). Cores por token da Wave 1 com fallback; texto só em tons -ink. */
:root {
  --w5-violeta: var(--acc-violeta-ink, #5536d6); --w5-violeta-bg: var(--acc-violeta-bg, #f1edff);
  --w5-verde: var(--acc-verde-ink, #0f6b3a); --w5-verde-bg: var(--acc-verde-bg, #e6f6ec);
  --w5-amarelo: var(--acc-amarelo-ink, #7a5300); --w5-amarelo-bg: var(--acc-amarelo-bg, #fff4d4);
  --w5-coral: var(--acc-coral-ink, #b3262b); --w5-coral-bg: var(--acc-coral-bg, #ffecec);
  --w5-azul: var(--acc-azul-ink, #005ea8); --w5-azul-bg: var(--acc-azul-bg, #e8f3ff);
  --w5-aurora: var(--grad-aurora, linear-gradient(120deg, #0176d3, #7c5cff 55%, #ff5a5f));
  --w5-brasil: var(--grad-brasil, linear-gradient(120deg, #12a150, #ffc531 50%, #0176d3));
  --w5-glow: var(--shadow-glow, 0 22px 56px rgb(85 54 214 / 16%));
  --w5-ease: var(--ease-saida, cubic-bezier(.2, .7, .2, 1));
}
:root[data-theme="dark"] {
  --w5-violeta: var(--acc-violeta-ink, #b9a8ff); --w5-violeta-bg: var(--acc-violeta-bg, #262050);
  --w5-verde: var(--acc-verde-ink, #7ee2a8); --w5-verde-bg: var(--acc-verde-bg, #12331f);
  --w5-amarelo: var(--acc-amarelo-ink, #ffd76a); --w5-amarelo-bg: var(--acc-amarelo-bg, #362a08);
  --w5-coral: var(--acc-coral-ink, #ff9a9d); --w5-coral-bg: var(--acc-coral-bg, #3a1c1e);
  --w5-azul: var(--acc-azul-ink, #8acaff); --w5-azul-bg: var(--acc-azul-bg, #11304a);
  --w5-glow: var(--shadow-glow, 0 22px 56px rgb(0 0 0 / 40%));
}

/* 1. API de reveal: só esconde com html.revelar-on (posta pelo JS). */
@media (prefers-reduced-motion: no-preference) {
  .revelar-on [data-revelar]:not(.revelado) { opacity: 0; transform: translate3d(0, 24px, 0); }
  .revelar-on [data-revelar="esquerda"]:not(.revelado) { transform: translate3d(-28px, 0, 0); }
  .revelar-on [data-revelar="direita"]:not(.revelado) { transform: translate3d(28px, 0, 0); }
  .revelar-on [data-revelar="escala"]:not(.revelado) { transform: scale(.94); }
  .revelar-on [data-revelar].revelado {
    transition: opacity .6s var(--w5-ease), transform .75s var(--w5-ease);
    transition-delay: calc(min(var(--revelar-ordem, 0), 8) * 90ms);
  }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 640px) {
  .revelar-on [data-revelar="esquerda"]:not(.revelado), .revelar-on [data-revelar="direita"]:not(.revelado) { transform: translate3d(0, 24px, 0); }
}

/* 2. Hero: texto e janela do assistente lado a lado no desktop. */
.hero-stage { display: grid; gap: 40px; }
.hero-stage > * { min-width: 0; }
@media (min-width: 1080px) {
  .hero-stage { grid-template-columns: minmax(0, 1.3fr) minmax(340px, .9fr); gap: 56px; align-items: start; }
  .hero-stage h1 { font-size: clamp(2.6rem, 4.3vw, 3.75rem); }
  .ai-demo { position: sticky; top: calc(var(--header-height, 84px) + 24px); }
}
.ai-demo { margin: 0; }
.ai-demo__window { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg, 24px); background: var(--surface); box-shadow: var(--w5-glow); }
.ai-demo__window::before { position: absolute; inset: 0 0 auto; height: 4px; content: ""; background: var(--w5-aurora); }
.ai-demo__bar { display: flex; align-items: center; gap: 10px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); background: var(--surface-raised); }
.ai-demo__dots { display: inline-flex; gap: 6px; }
.ai-demo__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--acc-coral, #ff5a5f); }
.ai-demo__dots i:nth-child(2) { background: var(--acc-amarelo, #ffc531); }
.ai-demo__dots i:nth-child(3) { background: var(--acc-verde, #12a150); }
.ai-demo__app { color: var(--ink); font-size: .875rem; font-weight: 700; }
.ai-demo__status { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; color: var(--ink-secondary); font-size: .875rem; white-space: nowrap; }
.ai-demo__status::before { width: 8px; height: 8px; border-radius: 50%; content: ""; background: var(--w5-verde); }
.ai-demo.is-thinking .ai-demo__status::before { background: var(--w5-violeta); animation: w5-pulse 1s ease-in-out infinite alternate; }
.ai-demo__body { display: grid; gap: 16px; padding: 20px 18px 22px; }
.ai-demo__ask { justify-self: end; max-width: 88%; margin: 0; padding: 12px 16px; border-radius: 18px 18px 4px 18px; background: var(--brand-tint); color: var(--ink); font-size: 1rem; line-height: 1.55; }
.ai-demo__reply { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; }
.ai-demo__avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--w5-aurora); }
.ai-demo__avatar svg { fill: #fff; }
.ai-demo__answer { color: var(--ink); font-size: 1rem; line-height: 1.7; transition: opacity .5s ease; }
.ai-demo__answer p { margin: 0 0 14px; text-align: left; hyphens: manual; }
.ai-demo__sources { display: grid; gap: 8px; margin: 0; padding: 12px 0 0; border-top: 1px dashed var(--line-strong); color: var(--ink-secondary); font-size: .9375rem; line-height: 1.5; list-style: none; }
.ai-chip { display: inline-block; padding: 0 9px; border: 1px solid currentColor; border-radius: 999px; font-size: .9em; font-weight: 700; line-height: 1.55; white-space: nowrap; }
.ai-chip--brand { color: var(--w5-violeta); background: var(--w5-violeta-bg); }
.ai-chip--rival { color: var(--w5-amarelo); background: var(--w5-amarelo-bg); }
.ai-chip--source { color: var(--w5-verde); background: var(--w5-verde-bg); }
.ai-tok { position: relative; transition: opacity .3s ease; }
.ai-tok.is-off { opacity: 0; }
.ai-tok.is-current::after { position: absolute; top: .2em; right: -5px; bottom: .2em; width: 2px; content: ""; background: var(--w5-violeta); }
.ai-demo.is-fading .ai-demo__answer { opacity: 0; }
.ai-demo__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin-top: 14px; }
.ai-demo__legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; font-size: .875rem; list-style: none; }
.ai-demo__toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: .875rem; font-weight: 650; }
.ai-demo__toggle[hidden] { display: none; }
.ai-demo__toggle:hover { border-color: var(--w5-violeta); color: var(--w5-violeta); }
.ai-demo__toggle:focus-visible { outline: 3px solid var(--focus, #005ea8); outline-offset: 2px; }
.ai-demo__toggle svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ai-demo__ico-play, .ai-demo.is-paused .ai-demo__ico-pause { display: none; }
.ai-demo.is-paused .ai-demo__ico-play { display: inline; fill: currentColor; }
.ai-demo figcaption { margin-top: 10px; color: var(--ink-secondary); font-size: .875rem; line-height: 1.55; }
@media (prefers-reduced-motion: no-preference) {
  .js .ai-demo:not(.is-ready) .ai-demo__answer { animation: w5-late .4s 2.5s both; }
  .ai-chip.ai-tok:not(.is-off) { animation: w5-pop .45s var(--ease-mola, ease-out); }
}
@media (max-width: 420px) {
  .ai-demo__bar, .ai-demo__body { padding-inline: 14px; }
  .ai-demo__bar { flex-wrap: wrap; row-gap: 4px; }
}

/* 3. Conteúdos: elevação, tilt (variáveis do JS), borda em gradiente e faixa de cor. */
#conteudos .resource-grid > .resource-card { isolation: isolate; }
#conteudos .resource-grid > .resource-card::before { position: absolute; z-index: -1; inset: 0; padding: 2px; border-radius: inherit; content: ""; background: var(--w5-aurora); opacity: 0; transition: opacity .25s ease; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
#conteudos .resource-grid > .resource-card::after { position: absolute; top: 0; left: 28px; width: 56px; height: 4px; border-radius: 0 0 4px 4px; content: ""; background: var(--card-acc, var(--acc-azul, #0176d3)); }
#conteudos .resource-card:nth-child(6n+2) { --card-acc: var(--acc-violeta, #7c5cff); --card-ink: var(--w5-violeta); }
#conteudos .resource-card:nth-child(6n+3) { --card-acc: var(--acc-coral, #ff5a5f); --card-ink: var(--w5-coral); }
#conteudos .resource-card:nth-child(6n+4) { --card-acc: var(--acc-verde, #12a150); --card-ink: var(--w5-verde); }
#conteudos .resource-card:nth-child(6n+5) { --card-acc: var(--acc-amarelo, #ffc531); --card-ink: var(--w5-amarelo); }
#conteudos .resource-card .eyebrow { color: var(--card-ink, var(--w5-azul)); }
#conteudos .resource-grid > .resource-card:hover::before, #conteudos .resource-grid > .resource-card:focus-visible::before { opacity: 1; }
body.home-page #conteudos .resource-grid > .resource-card:hover { border-color: transparent; box-shadow: var(--w5-glow); background-image: radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 0%), rgb(124 92 255 / 12%), transparent 60%); }
@media (prefers-reduced-motion: no-preference) {
  body.home-page #conteudos .resource-grid > .resource-card:hover { transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-6px); }
}

/* 4. Critérios: dois quadros de checks coloridos. */
.check-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 980px; margin-top: 32px; }
.check-group { position: relative; min-width: 0; overflow: hidden; padding: 26px 24px 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); --c-ink: var(--w5-verde); --c-bg: var(--w5-verde-bg); }
.check-group::before { position: absolute; inset: 0 0 auto; height: 4px; content: ""; background: var(--w5-brasil); }
.check-group--before { --c-ink: var(--w5-azul); --c-bg: var(--w5-azul-bg); }
.check-group--before::before { background: var(--w5-aurora); }
.check-title { margin-bottom: 16px; font-size: 1.08rem; }
.check-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.check-list li { display: flex; align-items: center; gap: 12px; min-height: 32px; color: var(--ink); font-size: 1rem; line-height: 1.45; }
.check-ico { flex: 0 0 26px; width: 26px; height: 26px; }
.check-ico circle { fill: var(--c-bg); stroke: var(--c-ink); stroke-width: 1.5; }
.check-ico path { fill: none; stroke: var(--c-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; }
@media (prefers-reduced-motion: no-preference) {
  .check-group.revelado .check-ico { animation: w5-pop .5s var(--ease-mola, ease-out) backwards; animation-delay: calc(250ms + var(--i, 0) * 130ms); }
  .check-group.revelado .check-ico path { animation: w5-draw .45s var(--w5-ease) backwards; animation-delay: calc(400ms + var(--i, 0) * 130ms); }
  .check-list li:nth-child(2) { --i: 1; } .check-list li:nth-child(3) { --i: 2; } .check-list li:nth-child(4) { --i: 3; }
}
@media (max-width: 760px) { .check-board { grid-template-columns: 1fr; } }

/* 5. FAQ: faixa de cor no item aberto e ícone que gira de + para x. */
.faq-list details { border-radius: 4px; transition: background-color .25s ease, box-shadow .25s ease; }
.faq-list summary, .faq-list details > p { padding-left: 16px; }
.faq-list details[open] { background: linear-gradient(90deg, var(--w5-violeta-bg), transparent 75%); box-shadow: inset 4px 0 0 var(--acc-violeta, #7c5cff); }
.faq-list summary:focus-visible { outline: 3px solid var(--focus, #005ea8); outline-offset: -3px; }
#faq .faq-list summary::after { content: "+"; border-radius: 50%; background: var(--w5-violeta-bg); color: var(--w5-violeta); transition: transform .3s var(--ease-mola, ease), background-color .2s ease, color .2s ease; }
#faq .faq-list details[open] > summary::after { content: "+"; transform: rotate(45deg); background: var(--w5-violeta); color: var(--paper, #fff); }
.faq-list details > p { overflow: hidden; }

/* 6. Diagnóstico: passos depois do envio e moldura colorida do formulário. */
.next-steps { margin: 28px 0; padding: 22px 22px 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.next-steps__title { margin-bottom: 16px; font-size: 1.06rem; }
.next-steps__list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.next-steps__list li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--ink-secondary); font-size: 1rem; line-height: 1.55; }
.next-steps__list li:not(:last-child)::before { position: absolute; top: 40px; bottom: -12px; left: 17px; width: 2px; content: ""; background: var(--line-strong); }
.next-steps__num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--w5-azul); color: var(--paper, #fff); font-weight: 750; }
.next-steps__list li:nth-child(2) .next-steps__num { background: var(--w5-violeta); }
.next-steps__list li:nth-child(3) .next-steps__num { background: var(--w5-coral); }
.next-steps__list li:nth-child(4) .next-steps__num { background: var(--w5-verde); }
.form-frame { position: relative; min-width: 0; margin-top: 14px; padding: 3px; border-radius: 24px; background: var(--w5-aurora); background-size: 200% 200%; box-shadow: var(--w5-glow); }
.form-frame > .contact-form { border: 0; border-radius: 21px; box-shadow: none; }
.form-frame__tag { position: absolute; top: -14px; left: 24px; z-index: 1; padding: 3px 14px; border-radius: 999px; background: #ffc531; color: #142637; font-size: .875rem; font-weight: 750; line-height: 1.5; }
@media (prefers-reduced-motion: no-preference) {
  .form-frame:focus-within { animation: w5-shift 6s ease-in-out infinite alternate; }
}
@media (max-width: 1050px) { .form-frame { max-width: 760px; width: 100%; } }
@media (max-width: 640px) { .form-frame { border-radius: 19px; } .form-frame > .contact-form { border-radius: 16px; } .form-frame__tag { left: 16px; } }

/* 7. Botões: ripple no clique e leve compressão. */
.button, .ai-demo__toggle { position: relative; overflow: hidden; }
.ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: .22; pointer-events: none; transform: scale(0); animation: w5-ripple .6s ease-out forwards; }
@media (prefers-reduced-motion: no-preference) {
  .button, .ai-demo__toggle { transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .2s var(--ease-mola, ease), box-shadow .2s ease; }
  .button:active, .ai-demo__toggle:active { transform: scale(.97); }
  .button-primary:hover { box-shadow: 0 10px 26px rgb(1 118 211 / 28%); transform: translateY(-1px); }
}

@keyframes w5-late { from { opacity: 0; } to { opacity: 1; } }
@keyframes w5-pop { from { transform: scale(.6); opacity: 0; } }
@keyframes w5-draw { from { stroke-dashoffset: 16; } }
@keyframes w5-pulse { to { opacity: .35; } }
@keyframes w5-ripple { to { transform: scale(1); opacity: 0; } }
@keyframes w5-shift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

@media (forced-colors: active) {
  .ai-chip, .check-group, .next-steps, .ai-demo__window { border: 1px solid CanvasText; }
  .form-frame { border: 2px solid CanvasText; }
}
@media print { .ai-demo__toggle, .ripple { display: none; } .ai-tok.is-off { opacity: 1; } }