/* =====================================================================
   Velortec v2 · site.css
   Mobile primeiro. Cores só por token (tokens.css) ou pelas variáveis
   de superfície abaixo. Verde-água (--cor-acao) só em CTA e foco.
   ===================================================================== */

/* ---------- superfícies do site (vidro, linhas, brilho) ---------- */
:root {
  --vidro: rgb(255 255 255 / .72);
  --vidro-forte: rgb(255 255 255 / .92);
  --vidro-borda: rgb(68 38 105 / .13);
  --linha: rgb(68 38 105 / .09);
  --brilho-cor: rgb(147 38 132 / .13);
  --brilho-borda: rgb(147 38 132 / .55);
  --sombra-vidro: 0 1px 0 rgb(255 255 255 / .6) inset, 0 24px 60px -24px rgb(68 38 105 / .28);
  --grad-titulo: linear-gradient(100deg, #6C459E 0%, #932684 45%, #6C459E 90%);
  --bolha-entra: var(--cor-neutro-100);
  --bolha-sai: var(--cor-roxo-100);
  --logo-v: url(#vt-grad);
  --logo-palavra: var(--cor-noite-950);
  --tela: #FFFFFF;
  --tv-borda: #2D2A32;
  --gutter: 1rem;
  --raio-cartao: 1.5rem;
}
/* claro: texto secundário um passo mais escuro, porque aqui ele cai sobre
   aurora e vidro tingidos, não sobre o branco puro em que o token foi medido */
:root[data-tema='claro'] { --cor-texto-suave: var(--cor-neutro-800); --cor-texto-tenue: var(--cor-neutro-700); }
:root[data-tema='escuro'] {
  --vidro: rgb(40 32 72 / .5);
  --vidro-forte: rgb(36 29 64 / .86);
  --vidro-borda: rgb(255 255 255 / .09);
  --linha: rgb(255 255 255 / .055);
  --brilho-cor: rgb(216 131 200 / .15);
  --brilho-borda: rgb(231 168 217 / .7);
  --sombra-vidro: 0 1px 0 rgb(255 255 255 / .06) inset, 0 30px 80px -30px rgb(0 0 0 / .7);
  --grad-titulo: linear-gradient(100deg, #DDD1F4 0%, #E7A8D9 45%, #C8B4EA 90%);
  --bolha-entra: rgb(255 255 255 / .08);
  --bolha-sai: rgb(177 149 222 / .2);
  --logo-palavra: #FFFFFF;
  --tela: #120E24;
  --tv-borda: #0B0818;
}
@media (min-width: 40rem) { :root { --gutter: 1.5rem; } }
@media (min-width: 64rem) { :root { --gutter: 2rem; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font: 400 1rem/1.6 var(--fonte-texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--fonte-titulo); margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--cor-magenta-700); color: #fff; }
:focus-visible { outline: 2px solid var(--cor-foco); outline-offset: 3px; border-radius: 6px; }

.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.defs-svg { position: absolute; width: 0; height: 0; overflow: hidden; }
.mono { font-family: var(--fonte-mono); font-weight: 500; }
.tenue { color: var(--cor-texto-tenue); }
.container { width: 100%; max-width: calc(76rem + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

.pular { position: absolute; left: 1rem; top: -4rem; z-index: 2000; padding: .75rem 1rem; border-radius: var(--raio-md); background: var(--cor-acao); color: var(--cor-acao-texto); font-weight: 600; text-decoration: none; }
.pular:focus { top: 1rem; }

/* ---------- logo ---------- */
.lv { fill: var(--logo-v); }
.lp { fill: var(--logo-palavra); }
.topo .logo-horizontal { height: 26px; width: auto; }
[data-tema='escuro'] .topo { --logo-v: #FFFFFF; } /* abaixo de 160 px: mono branco (CONCEITOS.md) */
.logo-rodape { height: 36px; width: auto; }

/* ---------- tipografia de seção ---------- */
.sobretitulo {
  display: inline-flex; align-items: center; gap: .6rem;
  font: 500 .75rem/1.2 var(--fonte-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--cor-marca); margin-bottom: 1.25rem;
}
.sobretitulo::before { content: ""; width: 1.25rem; height: 2px; border-radius: 2px; background: var(--grad-marca-horizontal); }
.secao h2 {
  font-size: clamp(2.1rem, 1.25rem + 3.6vw, 4.25rem);
  font-weight: 700; line-height: 1.02; letter-spacing: -.035em;
}
.secao h2.sobretitulo { font: 500 .75rem/1.2 var(--fonte-mono); letter-spacing: .08em; }
.apoio { margin-top: 1.1rem; font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); color: var(--cor-texto-suave); max-width: 38rem; }
.nota { font-size: .875rem; color: var(--cor-texto-tenue); }
.nota-centro { text-align: center; margin-top: 2rem; }
.secao { position: relative; padding-block: clamp(5rem, 3rem + 8vw, 9.5rem); }
.cabeca { margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.cabeca-centro { text-align: center; display: grid; justify-items: center; }
.tags { font-size: .7rem; letter-spacing: .02em; color: var(--cor-texto-tenue); line-height: 1.6; }

/* ---------- etiquetas ---------- */
.etiqueta-demo {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .25rem .6rem; border-radius: var(--raio-pilula);
  font: 500 .66rem/1.2 var(--fonte-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--cor-destaque); background: var(--cor-destaque-suave);
  border: 1px solid color-mix(in oklab, var(--cor-destaque) 35%, transparent);
  white-space: nowrap;
}
.etiqueta-demo::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.ponto-vivo { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--cor-destaque); box-shadow: 0 0 0 0 var(--cor-destaque); animation: pulso 2s infinite; }
@keyframes pulso { 70% { box-shadow: 0 0 0 .5rem transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ---------- botões ---------- */
.botao {
  --h: 3.25rem;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--h); padding: .5rem 1.5rem; border-radius: var(--raio-pilula);
  font: 600 1rem/1.2 var(--fonte-texto); text-decoration: none; text-align: center;
  border: 1px solid transparent; cursor: pointer;
  transition: transform var(--dur-rapida) var(--ease-padrao), background-color var(--dur-rapida), box-shadow var(--dur-media), border-color var(--dur-rapida);
}
.botao-p { --h: 2.75rem; padding-inline: 1.15rem; font-size: .9375rem; }
.botao-acao {
  background: var(--cor-acao); color: var(--cor-acao-texto); border-color: var(--cor-acao-borda);
  box-shadow: 0 0 0 0 rgb(43 232 192 / 0), 0 8px 24px -8px rgb(0 163 133 / .55);
}
.botao-acao:hover { background: var(--cor-acao-forte); transform: translateY(-1px); box-shadow: 0 0 0 4px rgb(43 232 192 / .16), 0 12px 32px -8px rgb(0 163 133 / .6); }
.botao-vidro { background: var(--vidro); color: var(--cor-texto); border-color: var(--vidro-borda); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.botao-vidro:hover { border-color: color-mix(in oklab, var(--cor-marca) 50%, transparent); transform: translateY(-1px); }
.botao:active { transform: translateY(0) scale(.98); }
.icone-botao {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none;
  border-radius: 50%; border: 1px solid var(--vidro-borda); background: var(--vidro); cursor: pointer;
}
.icone-botao svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.acoes { display: flex; flex-wrap: wrap; gap: .75rem; }
.link-seta { display: inline-flex; gap: .35rem; align-items: center; font-weight: 600; color: var(--cor-marca); text-decoration: none; }
.link-seta:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  padding: .55rem .95rem; border-radius: var(--raio-pilula); cursor: pointer;
  font-size: .875rem; font-weight: 500; line-height: 1.25; text-align: left;
  background: var(--vidro); border: 1px solid var(--vidro-borda); color: var(--cor-texto);
  transition: border-color var(--dur-rapida), background-color var(--dur-rapida), transform var(--dur-rapida);
}
.chip:hover { border-color: color-mix(in oklab, var(--cor-marca) 55%, transparent); }
.chip[aria-pressed='true'] { background: var(--cor-marca-suave); border-color: var(--cor-marca); color: var(--cor-marca-forte); }
.chip:disabled { opacity: .45; cursor: default; }

/* ---------- brilho que segue o cursor (portas, bento, cartões) ---------- */
.brilho { position: relative; isolation: isolate; }
.brilho::before, .brilho::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity var(--dur-lenta) var(--ease-padrao);
}
.brilho::before { z-index: -1; background: radial-gradient(28rem circle at var(--mx, 50%) var(--my, 0%), var(--brilho-cor), transparent 45%); }
.brilho::after {
  padding: 1px;
  background: radial-gradient(18rem circle at var(--mx, 50%) var(--my, 0%), var(--brilho-borda), transparent 45%);
  -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);
}
.brilho:hover::before, .brilho:hover::after, .brilho:focus-visible::before, .brilho:focus-visible::after { opacity: 1; }

.cartao-vidro, .porta, .bloco, .entrada, .calc-resultado, .cena-moldura, .final-painel {
  background: var(--vidro); border: 1px solid var(--vidro-borda); border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-vidro);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
}

/* ---------- topo ---------- */
.topo {
  position: fixed; inset: 0 0 auto; z-index: var(--z-fixo);
  background: color-mix(in oklab, var(--cor-fundo) 62%, transparent);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--linha);
}
.topo-linha { display: flex; align-items: center; gap: .5rem; height: 4rem; }
.topo-logo { flex: none; margin-right: auto; padding: .5rem 0; border-radius: 6px; }
.topo-cta { display: none; }
.nav {
  position: fixed; inset: 4rem 0 auto; max-height: calc(100svh - 4rem); overflow-y: auto; overscroll-behavior: contain;
  padding: 1rem var(--gutter) 1.5rem;
  background: var(--cor-fundo); border-bottom: 1px solid var(--vidro-borda); /* opaco: dentro do topo, backdrop-filter não desfoca a página */
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  visibility: hidden; opacity: 0; transform: translateY(-.5rem);
  transition: opacity var(--dur-media), transform var(--dur-media), visibility 0s var(--dur-media);
}
.topo.aberto .nav { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
[hidden] { display: none !important; }
.nav-lista { display: grid; gap: .25rem; }
.nav-lista > li > a, .produtos-botao {
  display: flex; align-items: center; justify-content: space-between; gap: .35rem; width: 100%;
  padding: .75rem .5rem; font-size: 1.125rem; font-weight: 500; text-decoration: none; text-align: left;
  border: 0; border-radius: var(--raio-md); background: none; cursor: pointer;
}
.nav-lista > li > a:hover, .produtos-botao:hover { background: var(--vidro); }
.mi-seta { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-media) var(--ease-padrao); }
[aria-expanded='true'] > .mi-seta { transform: rotate(180deg); }
.tema-botao .i-sol { display: none; }
[data-tema='escuro'] .tema-botao .i-sol { display: block; }
[data-tema='escuro'] .tema-botao .i-lua { display: none; }
/* seletor PT | EN: leva à mesma página na outra língua */
.idioma { display: flex; flex: none; padding: .2rem; border-radius: var(--raio-pilula); border: 1px solid var(--vidro-borda); background: var(--vidro); }
.idioma a { display: grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 .35rem; border-radius: var(--raio-pilula); font: 500 .72rem/1 var(--fonte-mono); letter-spacing: .06em; color: var(--cor-texto-tenue); text-decoration: none; }
.idioma a:hover { color: var(--cor-texto); }
.idioma [aria-current] { background: var(--cor-marca-suave); color: var(--cor-texto); }

/* ---------- mega menu "Produtos" ---------- */
.mega { display: none; padding: .25rem 0 .75rem; }
.nav-produtos.aberto .mega { display: block; }
.mega-grade { display: grid; gap: .25rem; }
.mega-cab { display: flex; align-items: center; gap: .5rem; }
.mega-linha { flex: 1; padding: .6rem .5rem; font: 600 1rem/1.2 var(--fonte-titulo); letter-spacing: -.01em; text-decoration: none; border-radius: var(--raio-md); }
.mega-linha:hover { color: var(--cor-marca); }
.mega-selo { font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cor-destaque); white-space: nowrap; }
.mega-abre { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; border-radius: 50%; border: 1px solid var(--vidro-borda); background: none; cursor: pointer; }
.mega-itens { display: none; padding: 0 0 .5rem .25rem; }
.mega-grupo.aberto .mega-itens { display: grid; gap: .1rem; }
.mega-itens a { display: flex; align-items: flex-start; gap: .75rem; padding: .55rem .5rem; border-radius: .8rem; text-decoration: none; transition: background-color var(--dur-rapida); }
.mega-itens a:hover, .mega-itens a:focus-visible { background: var(--vidro); }
.mega-itens b { display: block; font-size: .9rem; font-weight: 600; line-height: 1.3; }
.mega-itens small { display: block; font-size: .8rem; line-height: 1.35; color: var(--cor-texto-tenue); }
.mi { width: 2rem; height: 2rem; flex: none; padding: .42rem; border-radius: .6rem; background: var(--cor-marca-suave); border: 1px solid color-mix(in oklab, var(--cor-marca) 25%, transparent); fill: none; stroke: var(--cor-marca); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mega-destaque .mi { background: var(--grad-marca); border-color: transparent; stroke: #fff; }
.mega-nota { display: none; }
.mega-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-top: .5rem; padding: 1rem .5rem 0; border-top: 1px solid var(--linha); }

@media (min-width: 40rem) { .topo-cta { display: inline-flex; } }
@media (max-width: 69.99rem) {
  /* sem JS, o celular mostra só o link Produtos, que leva à lista das linhas */
  html:not(.js) .menu-botao { display: none; }
  html:not(.js) .nav { position: static; visibility: visible; opacity: 1; transform: none; max-height: none; overflow: visible; padding: 0; margin-right: .25rem; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
  html:not(.js) .nav-lista > li:not(.nav-produtos), html:not(.js) .mega { display: none; }
  html:not(.js) .produtos-link { font-size: .9375rem; padding: .5rem .75rem; }
}
/* 70–80rem: o seletor PT | EN tira ~80 px do topo; os links do menu apertam para caber numa linha */
@media (min-width: 70rem) and (max-width: 79.99rem) {
  .nav-lista > li > a, .produtos-botao { padding-inline: .5rem !important; }
  .nav { margin-right: .25rem !important; }
}
@media (min-width: 70rem) {
  .menu-botao { display: none; }
  .topo-linha { position: relative; }
  .nav { position: static; inset: auto; max-height: none; overflow: visible; padding: 0; margin-right: .75rem; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; visibility: visible; opacity: 1; transform: none; }
  .nav-lista { display: flex; gap: .15rem; }
  .nav-lista > li > a, .produtos-botao { width: auto; padding: .45rem .75rem; font-size: .875rem; color: var(--cor-texto-suave); border-radius: var(--raio-pilula); }
  .nav-lista > li > a:hover, .produtos-botao:hover, .produtos-botao[aria-expanded='true'] { color: var(--cor-texto); background: var(--vidro); }

  .mega {
    display: block; position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% + .6rem);
    padding: 1rem; border-radius: 1.5rem;
    background: radial-gradient(60% 80% at 15% 0%, color-mix(in oklab, var(--cor-roxo-900) 22%, var(--cor-fundo)), var(--cor-fundo)); border: 1px solid var(--vidro-borda);
    box-shadow: 0 40px 100px -30px rgb(0 0 0 / .6), 0 1px 0 rgb(255 255 255 / .06) inset;
    visibility: hidden; opacity: 0; transform: translateY(-8px) scale(.985); transform-origin: 50% 0;
    transition: opacity var(--dur-media) var(--ease-padrao), transform var(--dur-media) var(--ease-padrao), visibility 0s var(--dur-media);
  }
  .mega::before { content: ""; position: absolute; left: 0; right: 0; top: -1rem; height: 1rem; } /* ponte para o mouse */
  .nav-produtos.aberto .mega { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .mega-grade { grid-template-columns: 1.3fr 1fr 1fr 1fr; grid-template-areas: "pa pres sob ev" "pa pres sob casa"; gap: .5rem; }
  .mega-grade:not(:has(.mega-casa)) { grid-template-areas: "pa pres sob ev" "pa pres sob ev"; } /* inglês: sem Casa */
  .mega-piloto-automatico { grid-area: pa; } .mega-presenca { grid-area: pres; } .mega-sob-medida { grid-area: sob; } .mega-eventos { grid-area: ev; } .mega-casa { grid-area: casa; }
  .mega-grupo { padding: .5rem; border-radius: 1.1rem; }
  .mega-destaque { background: linear-gradient(160deg, color-mix(in oklab, var(--cor-roxo-900) 45%, transparent), color-mix(in oklab, var(--cor-magenta-700) 18%, transparent)); border: 1px solid color-mix(in oklab, var(--cor-magenta-500) 30%, transparent); }
  [data-tema='claro'] .mega-destaque { background: var(--grad-sutil); }
  .mega-abre { display: none; }
  .mega-itens, .mega-grupo.aberto .mega-itens { display: grid; gap: .1rem; padding: 0; }
  .mega-rodape { margin-top: .75rem; padding: 1rem .5rem .25rem; }
  .mega-destaque { display: flex; flex-direction: column; }
  .mega-nota { display: block !important; margin-top: auto; padding: .9rem .6rem .4rem; border-top: 1px solid var(--vidro-borda); font-size: .8125rem; color: var(--cor-texto-suave); }
}

/* =====================================================================
   1. HERO
   ===================================================================== */
.hero { position: relative; padding: 8rem 0 4rem; overflow: clip; isolation: isolate; }
.aurora, .hero-grade { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.aurora {
  /* sem WebGL, fica este gradiente estático */
  background:
    radial-gradient(60% 50% at 75% 10%, rgb(147 38 132 / .55), transparent 70%),
    radial-gradient(55% 45% at 20% 20%, rgb(68 38 105 / .9), transparent 70%);
  -webkit-mask: linear-gradient(#000 55%, transparent 92%); mask: linear-gradient(#000 55%, transparent 92%);
}
[data-tema='claro'] .aurora { background: radial-gradient(60% 50% at 75% 10%, #F2C9E9, transparent 70%), radial-gradient(55% 45% at 20% 20%, #DDD1F4, transparent 70%); }
.hero-grade {
  background-image: linear-gradient(var(--linha) 1px, transparent 1px), linear-gradient(90deg, var(--linha) 1px, transparent 1px);
  background-size: 4rem 4rem; background-position: center top;
  -webkit-mask: radial-gradient(70% 60% at 50% 30%, #000, transparent 75%); mask: radial-gradient(70% 60% at 50% 30%, #000, transparent 75%);
}
.hero-texto { display: grid; justify-items: center; text-align: center; }
.selo {
  display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.75rem;
  padding: .4rem .9rem .4rem .7rem; border-radius: var(--raio-pilula);
  font-size: .8125rem; font-weight: 500; color: var(--cor-texto-suave);
  background: var(--vidro); border: 1px solid var(--vidro-borda);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.selo-ponto { width: .45rem; height: .45rem; border-radius: 50%; background: var(--cor-destaque); box-shadow: 0 0 12px var(--cor-destaque); }
.hero h1 {
  font-size: clamp(2.75rem, .9rem + 8.2vw, 7.5rem);
  font-weight: 750; line-height: .96; letter-spacing: -.042em;
  max-width: 13ch;
}
.grad {
  background: var(--grad-titulo); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: brilho-titulo 9s ease-in-out infinite alternate;
}
@keyframes brilho-titulo { to { background-position: 100% 0; } }
.hero-apoio { margin-top: 1.5rem; max-width: 34rem; font-size: clamp(1.075rem, 1rem + .45vw, 1.3rem); color: var(--cor-texto-suave); }
[data-tema='escuro'] .hero-apoio { color: var(--cor-neutro-100); }
.hero .acoes { justify-content: center; margin-top: 2.25rem; }
.hero .nota { margin-top: 1rem; }
[data-tema='escuro'] .hero .nota { color: var(--cor-neutro-300); }

/* ---------- cena de produto ---------- */
.cena { margin-top: clamp(3rem, 2rem + 4vw, 5rem); perspective: 1800px; }
.cena-moldura {
  padding: .75rem; border-radius: 1.75rem;
  transform: rotateX(var(--inclina, 0deg)); transform-origin: 50% 0;
  box-shadow: var(--sombra-vidro), 0 40px 120px -40px rgb(147 38 132 / .55);
}
.cena-barra { display: flex; align-items: center; gap: .75rem; padding: .35rem .5rem .85rem; flex-wrap: wrap; }
.cena-titulo { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .9375rem; }
.cena-hora { font-size: .75rem; margin-right: auto; }
.trilha { display: grid; gap: .75rem; --gap: .75rem; }
.no {
  position: relative; display: grid; align-content: start; gap: .6rem;
  padding: 1rem 1rem 1.1rem 3.6rem; min-height: 9.5rem;
  border-radius: 1.1rem; background: var(--vidro-forte); border: 1px solid var(--vidro-borda);
  transition: opacity var(--dur-lenta) var(--ease-padrao), transform var(--dur-lenta) var(--ease-padrao), border-color var(--dur-lenta);
}
.no-icone {
  position: absolute; left: .9rem; top: .9rem; z-index: 2;
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .65rem;
  background: var(--grad-marca); color: #fff;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--cor-fundo) 70%, transparent);
}
.no-icone svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* conector até o próximo nó: vertical no celular, horizontal no desktop */
.no:not(:last-child)::after {
  content: ""; position: absolute; z-index: 1;
  left: calc(.9rem + 1rem - 1px); top: calc(.9rem + 2rem); width: 2px; height: calc(100% - 2rem + var(--gap));
  background: linear-gradient(var(--cor-magenta-500), var(--cor-roxo-500));
  transform-origin: 0 0; transform: scaleY(var(--fio, 1));
  transition: transform .7s var(--ease-padrao);
  box-shadow: 0 0 12px var(--cor-magenta-500);
}
.no-nome { display: flex; justify-content: space-between; gap: .5rem; font-weight: 600; font-size: .9375rem; }
.no-nome .mono { font-size: .7rem; color: var(--cor-texto-tenue); font-weight: 500; padding-top: .15rem; }
.no-status { font: 500 .7rem/1.3 var(--fonte-mono); color: var(--cor-texto-tenue); letter-spacing: .02em; }
.no-status::before { content: "✓ "; color: var(--cor-destaque); }
.bolha {
  max-width: 92%; padding: .55rem .8rem; border-radius: .95rem; font-size: .875rem; line-height: 1.4;
  transition: opacity var(--dur-lenta) var(--ease-padrao), transform var(--dur-lenta) var(--ease-elastico);
}
.bolha-entra { background: var(--bolha-entra); border-bottom-left-radius: .3rem; justify-self: start; }
.bolha-sai { background: var(--bolha-sai); border-bottom-right-radius: .3rem; justify-self: end; }
.no-conversa { position: relative; display: grid; gap: .45rem; }
.digitando { position: absolute; right: 0; top: 0; display: flex; gap: .25rem; padding: .7rem .8rem; border-radius: .95rem; background: var(--bolha-sai); opacity: 0; transition: opacity var(--dur-media); }
.digitando i, .cel-digitando i { width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; opacity: .5; animation: pontinho 1.2s infinite; }
.digitando i:nth-child(2), .cel-digitando i:nth-child(2) { animation-delay: .15s; }
.digitando i:nth-child(3), .cel-digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes pontinho { 30% { transform: translateY(-3px); opacity: 1; } 60% { transform: none; opacity: .5; } }
.agenda { display: grid; gap: .3rem; }
.agenda p { display: grid; grid-template-columns: 2.6rem 1fr; align-items: center; gap: .5rem; font-size: .7rem; color: var(--cor-texto-tenue); }
.slot { height: 1.6rem; border-radius: .45rem; border: 1px dashed var(--vidro-borda); font: 600 .75rem/1.6rem var(--fonte-texto); padding-inline: .5rem; color: transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot.ocupado { background: var(--bolha-entra); border-style: solid; }
.slot.novo { background: var(--grad-marca); border: 0; color: #fff; transition: opacity var(--dur-lenta), clip-path .8s var(--ease-padrao); clip-path: inset(0 0 0 0 round .45rem); }
.cena-rodape { display: flex; justify-content: space-between; align-items: baseline; padding: .9rem .5rem .25rem; font-size: .8125rem; color: var(--cor-texto-suave); }
.cena-rodape strong { font-size: 1.1rem; color: var(--cor-texto); }

/* estado inicial da animação (só quando o JS assume a cena) */
.cena.anima .no { opacity: .35; transform: translateY(6px); }
.cena.anima .no.ativo { opacity: 1; transform: none; border-color: color-mix(in oklab, var(--cor-destaque) 40%, transparent); }
.cena.anima .no.feito { opacity: 1; transform: none; }
.cena.anima .no::after { --fio: 0; }
.cena.anima .no.feito::after { --fio: 1; }
.cena.anima .bolha, .cena.anima .no-status { opacity: 0; transform: translateY(6px) scale(.97); }
.cena.anima .slot.novo { clip-path: inset(0 100% 0 0 round .45rem); }
.cena.anima[data-passo] .b1, .cena.anima[data-passo] .no:first-child .no-status { opacity: 1; transform: none; }
.cena.anima.digita .digitando { opacity: 1; }
.cena.anima .b2.mostra, .cena.anima .b3.mostra, .cena.anima .b4.mostra, .cena.anima .no.feito .no-status, .cena.anima .no.ativo:last-child .no-status, .cena.anima .no.ativo:nth-child(3) .no-status { opacity: 1; transform: none; }
.cena.anima .slot.novo.mostra { clip-path: inset(0 0 0 0 round .45rem); }
.cena.anima .cena-rodape strong { transition: color var(--dur-lenta); }

@media (min-width: 52rem) {
  .trilha { grid-template-columns: repeat(4, 1fr); --gap: .75rem; }
  .no { padding: 3.6rem 1rem 1.1rem; min-height: 15rem; }
  .no:not(:last-child)::after {
    left: calc(.9rem + 2rem); top: calc(.9rem + 1rem - 1px); height: 2px; width: calc(100% - 2rem + var(--gap));
    background: linear-gradient(90deg, var(--cor-magenta-500), var(--cor-roxo-500));
    transform: scaleX(var(--fio, 1));
  }
  .cena-moldura { padding: 1rem; }
}

/* =====================================================================
   2. PORTAS
   ===================================================================== */
.portas { padding-top: clamp(3rem, 2rem + 4vw, 6rem); }
.portas .sobretitulo { margin-bottom: 1.5rem; }
.portas-grade { display: grid; gap: 1rem; }
.porta {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; align-items: start;
  gap: .5rem 1rem; min-height: 15rem; padding: 1.5rem; text-decoration: none; overflow: hidden;
  transition: transform var(--dur-media) var(--ease-padrao), border-color var(--dur-media);
}
.porta:hover { transform: translateY(-3px); }
.porta-num { font-size: .75rem; color: var(--cor-texto-tenue); }
.porta-icone { grid-column: 2; grid-row: 1 / span 2; width: 4rem; height: 4rem; fill: none; stroke: var(--cor-marca); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.porta h3 { grid-column: 1 / -1; align-self: end; font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); font-weight: 700; letter-spacing: -.035em; line-height: 1; }
.porta p { grid-column: 1; color: var(--cor-texto-suave); font-size: 1.0625rem; line-height: 1.4; }
.porta-seta {
  grid-column: 2; align-self: end; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1px solid var(--vidro-borda); font-size: 1.15rem; transition: transform var(--dur-media) var(--ease-padrao), background-color var(--dur-media), color var(--dur-media);
}
.porta:hover .porta-seta, .porta:focus-visible .porta-seta { background: var(--cor-texto); color: var(--cor-fundo); transform: rotate(-45deg); }
/* ícones vivos */
.ic-caminho { stroke: var(--cor-destaque); stroke-dasharray: 6 6; animation: corre 1.6s linear infinite; }
@keyframes corre { to { stroke-dashoffset: -24; } }
.ic-scan { stroke: var(--cor-destaque); animation: varre 2.4s var(--ease-padrao) infinite alternate; }
@keyframes varre { from { transform: translateY(-18px); } to { transform: translateY(18px); } }
.ic-arco { stroke: var(--cor-destaque); animation: acende 2s infinite; }
.ic-arco.a2 { animation-delay: .3s; }
@keyframes acende { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
.ic-casa circle { fill: var(--cor-destaque); stroke: none; }
@media (min-width: 52rem) {
  .portas-grade { grid-template-columns: repeat(3, 1fr); }
  .portas-grade:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); } /* inglês: duas portas */
  .porta { min-height: 18rem; padding: 2rem; }
}

/* =====================================================================
   3. CALCULADORA
   ===================================================================== */
.calc, .demo, .eventos { overflow-x: clip; }
.calc::before, .demo::before, .eventos::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 60rem; height: 40rem; max-width: 140vw; border-radius: 50%; filter: blur(90px); opacity: .45;
  background: radial-gradient(closest-side, var(--cor-magenta-700), transparent);
  right: -20rem; top: 10%;
}
[data-tema='claro'] .calc::before, [data-tema='claro'] .demo::before, [data-tema='claro'] .eventos::before { opacity: .16; }
.demo::before { left: -25rem; right: auto; background: radial-gradient(closest-side, var(--cor-roxo-700), transparent); }
.eventos::before { left: 50%; right: auto; transform: translateX(-50%); top: 25%; }
.calc-grade { display: grid; gap: 2.5rem; }
.calc .chips { margin-top: 2rem; }
.controle { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .4rem 1rem; margin-top: 1.75rem; }
.controle label { font-weight: 500; color: var(--cor-texto-suave); }
.controle output { font: 700 1.5rem/1 var(--fonte-titulo); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.controle input { grid-column: 1 / -1; }
.calc-controles .nota { margin-top: 1.5rem; }

input[type='range'] {
  --p: 50%;
  -webkit-appearance: none; appearance: none; width: 100%; height: 2.25rem; margin: 0; background: none; cursor: pointer;
}
input[type='range']::-webkit-slider-runnable-track {
  height: .4rem; border-radius: 1rem;
  background: linear-gradient(90deg, var(--cor-roxo-500), var(--cor-magenta-500)) 0 / var(--p) 100% no-repeat, var(--vidro-borda);
}
input[type='range']::-moz-range-track { height: .4rem; border-radius: 1rem; background: var(--vidro-borda); }
input[type='range']::-moz-range-progress { height: .4rem; border-radius: 1rem; background: linear-gradient(90deg, var(--cor-roxo-500), var(--cor-magenta-500)); }
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; width: 1.6rem; height: 1.6rem; margin-top: -.6rem; border-radius: 50%;
  background: #fff; border: 2px solid var(--cor-magenta-600); box-shadow: 0 0 0 6px rgb(147 38 132 / .2), 0 4px 12px rgb(0 0 0 / .3);
  transition: transform var(--dur-rapida);
}
input[type='range']::-moz-range-thumb { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #fff; border: 2px solid var(--cor-magenta-600); box-shadow: 0 0 0 6px rgb(147 38 132 / .2); }
input[type='range']:active::-webkit-slider-thumb { transform: scale(1.12); }
input[type='range']:focus-visible { outline-offset: 2px; }

.calc-resultado { display: grid; justify-items: center; text-align: center; gap: 1rem; padding: 2rem 1.25rem; align-content: start; }
.anel { position: relative; width: min(15rem, 70vw); aspect-ratio: 1; }
.anel svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.anel circle { fill: none; stroke-width: 9; }
.anel-trilho { stroke: var(--vidro-borda); }
.anel-valor { stroke: url(#vt-grad); stroke: var(--cor-destaque); stroke-linecap: round; stroke-dasharray: var(--anel, 20) 100; transition: stroke-dasharray .8s var(--ease-padrao); filter: drop-shadow(0 0 10px rgb(216 131 200 / .5)); }
.anel-centro { position: absolute; inset: 0; display: grid; place-content: center; }
.anel-centro strong { font: 750 clamp(3.5rem, 2.5rem + 4vw, 4.75rem)/1 var(--fonte-titulo); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.anel-centro span { font-size: .875rem; color: var(--cor-texto-suave); margin-top: .25rem; }
.anel-legenda { font: 500 .75rem/1.4 var(--fonte-mono); color: var(--cor-destaque); }
.kpi { display: grid; gap: .1rem; margin-top: .5rem; }
.kpi strong { font: 750 clamp(2.25rem, 1.75rem + 2.5vw, 3.25rem)/1.05 var(--fonte-titulo); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.kpi span { color: var(--cor-texto-suave); }
.kpi-ano { font-size: .9375rem; color: var(--cor-texto-tenue); }
.calc-resultado .botao { margin-top: .5rem; width: 100%; max-width: 22rem; }
@media (min-width: 60rem) {
  .calc-grade { grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: center; }
  .calc-resultado { padding: 2.75rem 2.5rem; }
}

/* =====================================================================
   4. DEMO DO ASSISTENTE
   ===================================================================== */
.demo-grade { display: grid; gap: 3rem; justify-items: center; }
.demo-texto { width: 100%; }
.tiques { display: grid; gap: .85rem; margin-top: 2rem; }
.tiques li { display: flex; gap: .75rem; align-items: center; font-weight: 500; }
.tiques li::before {
  content: ""; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--cor-marca-suave) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D883C8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 60% no-repeat;
  border: 1px solid color-mix(in oklab, var(--cor-marca) 40%, transparent);
}
.celular {
  width: min(100%, 23rem); height: 37rem; display: grid; grid-template-rows: auto 1fr auto;
  border-radius: 2.75rem; padding: .6rem; background: var(--tv-borda);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .08) inset, 0 50px 100px -30px rgb(68 38 105 / .7), 0 0 0 1px var(--vidro-borda);
}
.celular > * { background: var(--tela); }
.cel-topo { display: flex; align-items: center; gap: .65rem; padding: 1.25rem 1rem .85rem; border-radius: 2.2rem 2.2rem 0 0; border-bottom: 1px solid var(--linha); }
.cel-avatar { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--grad-marca); color: #fff; font-weight: 700; flex: none; }
.cel-topo p { display: grid; line-height: 1.25; margin-right: auto; min-width: 0; }
.cel-topo strong { font-size: .9375rem; }
.cel-topo p span { font-size: .75rem; color: var(--cor-texto-tenue); }
.cel-conversa { display: flex; flex-direction: column; gap: .55rem; padding: 1rem; overflow-y: auto; scroll-behavior: smooth; overscroll-behavior: contain; }
.cel-conversa:focus-visible { outline-offset: -3px; }
.msg { max-width: 86%; padding: .6rem .85rem; border-radius: 1.1rem; font-size: .9rem; line-height: 1.45; animation: entra var(--dur-lenta) var(--ease-elastico) both; }
.msg.ia { align-self: flex-start; background: var(--bolha-sai); border-bottom-left-radius: .35rem; }
.msg.voce { align-self: flex-end; background: var(--grad-marca); color: #fff; border-bottom-right-radius: .35rem; }
.msg-tag { align-self: flex-start; font: 500 .68rem/1.3 var(--fonte-mono); color: var(--cor-destaque); padding: .1rem .35rem; animation: entra var(--dur-lenta) both; }
.msg-tag::before { content: "↳ "; }
.cel-digitando { align-self: flex-start; display: flex; gap: .25rem; padding: .8rem .9rem; border-radius: 1.1rem; background: var(--bolha-sai); }
.audio { display: flex; align-items: center; gap: .6rem; }
.audio-play { width: 1.9rem; height: 1.9rem; flex: none; border-radius: 50%; background: var(--cor-marca); display: grid; place-items: center; }
.audio-play::after { content: ""; border-left: .55rem solid var(--tela); border-block: .35rem solid transparent; margin-left: .15rem; }
.audio-onda { display: flex; align-items: center; gap: 2px; height: 1.6rem; }
.audio-onda i { width: 3px; border-radius: 2px; background: currentColor; opacity: .7; height: 30%; animation: onda 1s ease-in-out infinite alternate; }
.audio-onda i:nth-child(3n) { animation-delay: .2s; height: 80%; }
.audio-onda i:nth-child(3n+1) { animation-delay: .4s; height: 55%; }
@keyframes onda { to { transform: scaleY(.4); } }
.audio-texto { display: block; margin-top: .45rem; font-size: .8125rem; opacity: .85; }
.audio small { font: 500 .7rem var(--fonte-mono); opacity: .8; }
@keyframes entra { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.cel-perguntas { display: flex; flex-wrap: wrap; gap: .45rem; padding: .85rem; border-top: 1px solid var(--linha); border-radius: 0 0 2.2rem 2.2rem; }
.cel-perguntas .chip { font-size: .8125rem; padding: .5rem .8rem; }
.cel-perguntas .chip-reset { color: var(--cor-texto-tenue); }
@media (min-width: 60rem) {
  .demo-grade { grid-template-columns: 1fr 23rem; gap: 5rem; align-items: center; }
  .celular { width: 100%; }
}

/* =====================================================================
   5. LINHAS (BENTO)
   ===================================================================== */
.bento { display: grid; gap: 1rem; }
.bloco { padding: 1.5rem; overflow: hidden; display: grid; align-content: start; gap: .6rem; }
.bloco h3 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.bloco-frase { color: var(--cor-texto-suave); font-size: 1.0625rem; line-height: 1.45; max-width: 30rem; }
.bloco-rotulo { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cor-destaque); }
.bloco .tags { margin-top: .25rem; }
.bloco-vis { position: relative; height: 9rem; margin: -.25rem -.25rem .75rem; border-radius: 1rem; background: var(--vidro-forte); border: 1px solid var(--vidro-borda); overflow: hidden; }

.bloco-pa { gap: .75rem; }
.bloco-pa h3 { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.25rem); }
.bloco-pa > .botao { justify-self: start; margin-top: .75rem; }
.modulos { display: grid; gap: .75rem; margin-top: 1rem; }
.mod { padding: .75rem; border-radius: 1.1rem; background: var(--vidro-forte); border: 1px solid var(--vidro-borda); }
.mod h4 { font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em; margin-top: .75rem; }
.mod p { font-size: .875rem; color: var(--cor-texto-suave); line-height: 1.4; }
.mod-vis { position: relative; height: 6.5rem; border-radius: .75rem; overflow: hidden; background: color-mix(in oklab, var(--cor-fundo) 60%, transparent); border: 1px solid var(--linha); }

/* Atendimento: canais convergem numa caixa */
.vis-atend .canal { position: absolute; left: .6rem; display: grid; place-items: center; width: 2.6rem; height: 1.45rem; border-radius: .4rem; font: 500 .6rem var(--fonte-mono); background: var(--vidro); border: 1px solid var(--vidro-borda); color: var(--cor-texto-suave); }
.vis-atend .c1 { top: calc(50% - 2.7rem); } .vis-atend .c2 { top: calc(50% - .75rem); } .vis-atend .c3 { top: calc(50% + 1.2rem); }
.vis-atend .caixa { position: absolute; right: .6rem; top: 50%; translate: 0 -50%; padding: .45rem .5rem; border-radius: .55rem; font: 600 .62rem var(--fonte-texto); background: var(--grad-marca); color: #fff; box-shadow: 0 0 24px rgb(147 38 132 / .45); }
.fluxo-ponto { position: absolute; left: 3.6rem; width: .45rem; height: .45rem; border-radius: 50%; background: var(--cor-destaque); box-shadow: 0 0 10px var(--cor-destaque); offset-rotate: 0deg; animation: viaja 2.4s var(--ease-padrao) infinite; }
.fluxo-ponto.p1 { top: calc(50% - 2.2rem); --dy: 2rem; }
.fluxo-ponto.p2 { top: calc(50% - .25rem); --dy: 0rem; animation-delay: .8s; }
.fluxo-ponto.p3 { top: calc(50% + 1.7rem); --dy: -2rem; animation-delay: 1.6s; }
@keyframes viaja { 0% { transform: none; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(calc(100cqw - 10.5rem), var(--dy)); opacity: 0; } }
.mod-vis, .bloco-vis { container-type: inline-size; }
/* Assistente: onda de áudio */
.vis-assist { display: grid; place-content: center; gap: .6rem; justify-items: center; }
.onda { display: flex; align-items: center; gap: 4px; height: 2.4rem; color: var(--cor-destaque); }
.onda i { width: 4px; height: 100%; border-radius: 3px; background: currentColor; animation: onda 0.9s ease-in-out infinite alternate; }
.onda i:nth-child(2n) { animation-delay: .25s; } .onda i:nth-child(3n) { animation-delay: .5s; height: 60%; } .onda i:nth-child(4n) { height: 40%; }
.mini-bolha { font: 500 .62rem var(--fonte-mono); color: var(--cor-texto-tenue); }
/* Funil: cartão anda entre as colunas */
.vis-funil { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; padding: .45rem; }
.vis-funil .col { border-radius: .45rem; background: var(--vidro); border: 1px solid var(--linha); padding: .3rem; }
.vis-funil b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 .5rem var(--fonte-mono); color: var(--cor-texto-tenue); font-weight: 500; }
.cartao-funil { position: absolute; left: .75rem; top: 2rem; width: calc((100% - 1.6rem) / 3 - .6rem); height: 1.6rem; border-radius: .35rem; background: var(--grad-marca); box-shadow: 0 6px 16px rgb(147 38 132 / .4); animation: funil 4.5s var(--ease-padrao) infinite; }
@keyframes funil { 0%, 20% { transform: none; } 40%, 60% { transform: translateX(calc(100% + .95rem)); } 80%, 100% { transform: translateX(calc(200% + 1.9rem)); } }
.vis-funil::after { content: ""; position: absolute; left: .75rem; top: 4rem; width: calc((100% - 1.6rem) / 3 - .6rem); height: 1.6rem; border-radius: .35rem; background: var(--vidro-borda); }
/* Agenda: grade de dias com um horário acendendo */
.vis-agenda { display: grid; place-items: center; }
.grade-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; width: 70%; }
.grade-dias i { aspect-ratio: 1.4; border-radius: .25rem; background: var(--vidro); border: 1px solid var(--linha); }
.grade-dias i:nth-child(10) { background: var(--grad-marca); border: 0; animation: acende 2.2s infinite; }
.sino { position: absolute; right: .6rem; top: .5rem; width: 1.3rem; height: 1.3rem; fill: none; stroke: var(--cor-destaque); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 10%; animation: balanca 2.2s ease-in-out infinite; }
@keyframes balanca { 0%, 60%, 100% { rotate: 0deg; } 70% { rotate: 14deg; } 80% { rotate: -12deg; } 90% { rotate: 6deg; } }

/* Presença: busca e resultado subindo */
.vis-busca { display: grid; align-content: center; gap: .5rem; padding: 1rem; }
.busca { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-radius: var(--raio-pilula); background: var(--vidro); border: 1px solid var(--vidro-borda); font-size: .8125rem; }
.busca svg { width: 1rem; height: 1rem; fill: none; stroke: var(--cor-texto-tenue); stroke-width: 2; stroke-linecap: round; flex: none; }
.busca-texto { overflow: hidden; white-space: nowrap; border-right: 2px solid var(--cor-destaque); width: 16ch; animation: digita 4s steps(16) infinite, caret .7s step-end infinite; }
@keyframes digita { 0% { width: 0; } 45%, 100% { width: 16ch; } }
@keyframes caret { 50% { border-color: transparent; } }
.resultado { display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; border-radius: .6rem; background: var(--vidro); border: 1px solid var(--linha); }
.resultado i { height: .4rem; flex: 1; border-radius: 1rem; background: var(--vidro-borda); }
.r-voce { border-color: color-mix(in oklab, var(--cor-destaque) 50%, transparent); animation: sobe 4s var(--ease-padrao) infinite; }
.r-voce b { font-size: .75rem; color: var(--cor-destaque); }
@keyframes sobe { 0%, 45% { opacity: 0; transform: translateY(.6rem); } 60%, 100% { opacity: 1; transform: none; } }
/* Sob Medida: painel com barras */
.vis-painel { display: grid; align-items: end; padding: 1rem 1rem .9rem; }
.barras { display: flex; align-items: end; gap: .45rem; height: 5rem; }
.barras i { flex: 1; border-radius: .3rem .3rem .1rem .1rem; background: linear-gradient(var(--cor-magenta-500), var(--cor-roxo-700)); transform-origin: bottom; animation: barra 3s var(--ease-padrao) infinite alternate; }
.barras i:nth-child(1) { height: 35%; } .barras i:nth-child(2) { height: 55%; animation-delay: .2s; } .barras i:nth-child(3) { height: 45%; animation-delay: .4s; }
.barras i:nth-child(4) { height: 75%; animation-delay: .6s; } .barras i:nth-child(5) { height: 60%; animation-delay: .8s; } .barras i:nth-child(6) { height: 92%; animation-delay: 1s; }
@keyframes barra { from { transform: scaleY(.45); } }
.pix { position: absolute; right: .75rem; top: .75rem; padding: .25rem .55rem; border-radius: var(--raio-pilula); font: 500 .62rem var(--fonte-mono); background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); border: 1px solid var(--cor-sucesso-borda); }
.pix::before { content: "✓ "; }
/* Eventos: QR com feixe */
.vis-qr { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.qr { width: 5.5rem; height: 5.5rem; padding: .35rem; border-radius: .5rem; background: #fff; fill: #18132D; }
.qr-ok { font: 500 .7rem var(--fonte-mono); color: var(--cor-destaque); animation: acende 2.4s infinite; }
/* Casa: ondas de Wi-Fi cômodo a cômodo */
.vis-wifi { display: grid; place-items: center; padding: .75rem; }
.vis-wifi svg { width: 11rem; height: 7.4rem; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.planta { stroke: var(--cor-texto-tenue); stroke-width: 1.6; }
.ondas path { stroke: var(--cor-destaque); stroke-width: 2.4; opacity: .2; animation: acende 2.4s infinite; }
.ondas .w2 { animation-delay: .4s; } .ondas .w3 { animation-delay: .8s; } .ondas .w4 { animation-delay: 1.2s; }

.nota-lgpd { margin-top: 1.25rem; display: flex; gap: .5rem; align-items: center; }
.nota-lgpd::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--cor-destaque); flex: none; }

@media (min-width: 40rem) {
  .modulos { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 60rem) {
  .bento { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(0, auto); }
  .bloco-pa { grid-column: 1 / 3; grid-row: 1 / 3; padding: 2.25rem; }
  .bloco-eventos { grid-column: 1 / 3; grid-template-columns: 1fr 1.2fr; grid-template-rows: 1fr; align-content: stretch; align-items: center; gap: 2rem; }
  .bento:not(:has(.bloco-casa)) .bloco-eventos { grid-column: 1 / -1; } /* inglês: sem Casa */
  .bloco-eventos .bloco-vis { align-self: stretch; height: auto; min-height: 12rem; margin: 0; }
  .bloco-eventos .qr { width: 7.5rem; height: 7.5rem; }
  .bloco-pa { display: flex; flex-direction: column; }
  .bloco-pa .modulos { flex: 1; }
  .mod { display: flex; flex-direction: column; }
  .mod .mod-vis { flex: 1; min-height: 6.5rem; height: auto; }
  .modulos { grid-template-columns: repeat(4, 1fr); }
}

/* =====================================================================
   6. EVENTOS
   ===================================================================== */
.palco { position: relative; margin: 0 auto; max-width: 62rem; display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; padding-top: 2.5rem; }
.palco-demo { position: absolute; top: 0; left: 50%; translate: -50% 0; }
.tv { grid-column: 1 / -1; padding: .6rem; border-radius: 1.1rem; background: var(--tv-borda); box-shadow: 0 0 0 1px var(--vidro-borda), 0 40px 90px -30px rgb(68 38 105 / .8); }
.tv-tela { position: relative; aspect-ratio: 16 / 9; border-radius: .6rem; overflow: hidden; background: #120E24; color: #fff; padding: 4%; display: grid; grid-template-rows: auto 1fr auto; gap: 3%; }
.tv-topo { display: flex; align-items: center; gap: .5rem; font: 500 clamp(.6rem, .5rem + .4vw, .8rem) var(--fonte-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--cor-neutro-300); }
.tv-topo .ponto-vivo { background: var(--cor-magenta-400); }
.mural { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; gap: 3%; min-height: 0; }
.mural i { border-radius: .4rem; background: var(--grad-marca); opacity: 0; animation: foto 9s var(--ease-padrao) infinite; }
.mural i:nth-child(1) { background: radial-gradient(circle at 30% 30%, #D883C8, #553181 70%); animation-delay: 0s; }
.mural i:nth-child(2) { background: linear-gradient(160deg, #835DB8, #291343); animation-delay: .6s; }
.mural i:nth-child(3) { background: radial-gradient(circle at 70% 60%, #E7A8D9, #77116B 75%); animation-delay: 1.2s; }
.mural i:nth-child(4) { background: linear-gradient(20deg, #442669, #C560B4); animation-delay: 1.8s; }
.mural i:nth-child(5) { background: radial-gradient(circle at 40% 70%, #B195DE, #342E53 70%); animation-delay: 2.4s; }
.mural i:nth-child(6) { background: linear-gradient(120deg, #932684, #18132D); animation-delay: 3s; }
@keyframes foto { 0% { opacity: 0; transform: scale(.9); } 8%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.tv-aviso { justify-self: start; padding: .3rem .7rem; border-radius: var(--raio-pilula); background: rgb(255 255 255 / .1); font-size: clamp(.6rem, .5rem + .4vw, .8rem); }
.mini-cel, .checkin { padding: 1rem; border-radius: 1.25rem; background: var(--vidro-forte); border: 1px solid var(--vidro-borda); box-shadow: var(--sombra-vidro); display: grid; gap: .6rem; align-content: start; }
.mini-cel-topo { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cor-texto-tenue); }
.mini-cel-pergunta { font: 700 1.05rem/1.2 var(--fonte-titulo); letter-spacing: -.02em; }
.rsvp { display: flex; gap: .4rem; flex-wrap: wrap; }
.rsvp span { padding: .4rem .75rem; border-radius: var(--raio-pilula); border: 1px solid var(--vidro-borda); font-size: .8rem; }
.rsvp-sim { background: var(--grad-marca); color: #fff; border-color: transparent !important; animation: toque 6s infinite; }
@keyframes toque { 0%, 30% { transform: none; box-shadow: none; } 35% { transform: scale(.94); } 40% { transform: none; box-shadow: 0 0 0 6px rgb(147 38 132 / .25); } 60%, 100% { box-shadow: none; } }
.rsvp-ok, .checkin-ok b { font-size: .8125rem; font-weight: 600; color: var(--cor-sucesso); }
.rsvp-ok { animation: aparece 6s infinite; }
.rsvp-ok::before, .checkin-ok b::before { content: "✓ "; }
@keyframes aparece { 0%, 38% { opacity: 0; transform: translateY(4px); } 45%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.checkin { justify-items: center; text-align: center; }
.checkin-qr { position: relative; width: 6.5rem; padding: .4rem; border-radius: .6rem; background: #fff; overflow: hidden; }
.checkin-qr svg { fill: #18132D; }
.feixe { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--cor-magenta-500); box-shadow: 0 0 14px 3px rgb(197 96 180 / .7); animation: feixe 3s var(--ease-padrao) infinite alternate; }
@keyframes feixe { to { top: calc(100% - 3px); } }
.checkin-ok { display: grid; gap: .1rem; }
.checkin-ok b { animation: aparece 6s infinite 1s; }
.checkin-ok .mono { font-size: .7rem; color: var(--cor-texto-tenue); }

.entradas { display: grid; gap: 1rem; margin-top: clamp(3rem, 2rem + 3vw, 5rem); }
.entrada { padding: 1.5rem; display: grid; gap: .75rem; align-content: start; }
.entrada h3 { font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; }
.entrada p { color: var(--cor-texto-suave); }
.entrada .botao { justify-self: start; margin-top: .5rem; }
@media (min-width: 52rem) {
  .palco { grid-template-columns: 13rem 1fr 13rem; align-items: end; padding-top: 3rem; }
  .tv { grid-column: 2; grid-row: 1; }
  .mini-cel { grid-column: 1 / 3; grid-row: 1; width: 13rem; margin-bottom: -2rem; z-index: 2; transform: rotate(-3deg) translateX(1.5rem); }
  .checkin { grid-column: 2 / 4; grid-row: 1; justify-self: end; width: 12rem; margin-bottom: -3rem; z-index: 2; transform: rotate(3deg) translateX(-1.5rem); }
  .entradas { grid-template-columns: repeat(3, 1fr); }
  .entrada { grid-template-rows: auto 1fr auto; }
}

/* =====================================================================
   7. CLIENTES
   ===================================================================== */
.vitrine { display: grid; gap: 1rem; }
.projeto-link { display: grid; gap: 1rem; height: 100%; padding: .75rem .75rem 1.25rem; text-decoration: none; border-radius: var(--raio-cartao); background: var(--vidro); border: 1px solid var(--vidro-borda); transition: transform var(--dur-media) var(--ease-padrao), border-color var(--dur-media), box-shadow var(--dur-media); }
.projeto-link:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--cor-marca) 45%, transparent); box-shadow: 0 30px 70px -30px rgb(147 38 132 / .55); }
.navegador { display: block; border-radius: 1rem; overflow: hidden; background: var(--tela); border: 1px solid var(--vidro-borda); }
.nav-barra { display: flex; align-items: center; gap: .35rem; padding: .55rem .75rem; border-bottom: 1px solid var(--linha); }
.nav-barra i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--vidro-borda); }
.nav-url { margin-left: .5rem; padding: .15rem .65rem; border-radius: var(--raio-pilula); font: 500 .68rem var(--fonte-mono); color: var(--cor-texto-tenue); background: var(--vidro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navegador img { width: 100%; height: auto; aspect-ratio: 760 / 427; object-fit: cover; object-position: top; transition: transform .8s var(--ease-padrao); background: var(--cor-fundo-sutil); }
.projeto-link:hover img { transform: scale(1.04); }
.projeto-info { display: grid; gap: .4rem; padding-inline: .5rem; justify-items: start; }
.selo-status { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .6rem; border-radius: var(--raio-pilula); font: 500 .66rem/1.4 var(--fonte-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--cor-atencao); background: var(--cor-atencao-fundo); border: 1px solid var(--cor-atencao-borda); }
.selo-status.no-ar { color: var(--cor-sucesso); background: var(--cor-sucesso-fundo); border-color: var(--cor-sucesso-borda); }
.selo-status.no-ar::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; animation: pulso 2s infinite; box-shadow: 0 0 0 0 currentColor; }
.projeto-nome { font: 700 1.5rem/1.1 var(--fonte-titulo); letter-spacing: -.025em; }
.projeto-frase { color: var(--cor-texto-suave); }
.projeto-info .link-seta { margin-top: .25rem; }
/* Cards do mesmo tamanho e imagem sempre inteira (760×427): esticar o destaque em duas
   linhas ampliava e cortava a captura. Tablet: destaque em cima, dois embaixo. Desktop: três. */
.projeto-link { grid-template-rows: auto 1fr; }
.projeto-info { display: flex; flex-direction: column; align-items: flex-start; }
.projeto-info .link-seta { margin-top: auto; padding-top: .25rem; }
.projeto-destaque .projeto-link { border-color: color-mix(in oklab, var(--cor-sucesso) 35%, var(--vidro-borda)); }
@media (min-width: 40rem) {
  .vitrine:not(.vitrine-1):not(.vitrine-2) { grid-template-columns: 1fr 1fr; }
  .vitrine:not(.vitrine-1):not(.vitrine-2) .projeto-destaque { grid-column: 1 / -1; }
}
@media (min-width: 60rem) {
  .vitrine:not(.vitrine-1):not(.vitrine-2) { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
  .vitrine:not(.vitrine-1):not(.vitrine-2) .projeto-destaque { grid-column: auto; }
}

/* =====================================================================
   8. COMO FUNCIONA
   ===================================================================== */
.passos { position: relative; display: grid; gap: 2rem; --progresso: 0; padding-left: 3.5rem; }
.passos::before, .passos::after { content: ""; position: absolute; left: 1.2rem; top: 1.25rem; bottom: 1.25rem; width: 2px; border-radius: 2px; background: var(--vidro-borda); }
.passos::after { background: linear-gradient(var(--cor-roxo-500), var(--cor-magenta-500)); transform-origin: top; transform: scaleY(var(--progresso)); box-shadow: 0 0 12px var(--cor-magenta-500); }
.passo { position: relative; display: grid; gap: .4rem; opacity: .45; transition: opacity var(--dur-lenta); }
.passo.ativo { opacity: 1; }
.passo-marca { position: absolute; left: -3.5rem; top: 0; z-index: 1; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .8rem; background: var(--cor-fundo); border: 1px solid var(--vidro-borda); color: var(--cor-texto-tenue); transition: background var(--dur-lenta), color var(--dur-lenta), box-shadow var(--dur-lenta); }
.passo.ativo .passo-marca { background: var(--grad-marca); color: #fff; border-color: transparent; box-shadow: 0 0 24px rgb(147 38 132 / .5); }
.passo-marca svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.passo-num { font-size: .7rem; letter-spacing: .04em; color: var(--cor-destaque); padding-top: .55rem; }
.passo h3 { font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.passo p:last-child { color: var(--cor-texto-suave); }
@media (min-width: 60rem) {
  .passos { grid-template-columns: repeat(4, 1fr); gap: 2rem; padding: 4rem 0 0; }
  .passos::before, .passos::after { left: 1.25rem; right: 1.25rem; top: 1.2rem; bottom: auto; width: auto; height: 2px; }
  .passos::after { transform-origin: left; transform: scaleX(var(--progresso)); }
  .passo-marca { left: 0; top: -4rem; }
  .passo-num { padding-top: 0; }
}

/* =====================================================================
   9. PERGUNTAS
   ===================================================================== */
.perguntas-grade { display: grid; gap: 1rem; }
.acordeao { border-top: 1px solid var(--vidro-borda); }
.acordeao details { border-bottom: 1px solid var(--vidro-borda); interpolate-size: allow-keywords; }
.acordeao summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; cursor: pointer; list-style: none;
  padding: 1.35rem .25rem; font: 600 clamp(1.075rem, 1rem + .4vw, 1.25rem)/1.3 var(--fonte-titulo); letter-spacing: -.01em;
}
.acordeao summary::-webkit-details-marker { display: none; }
.acordeao summary::after {
  content: ""; flex: none; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--vidro-borda);
  background: linear-gradient(currentColor 0 0) center / .8rem 2px no-repeat, linear-gradient(currentColor 0 0) center / 2px .8rem no-repeat;
  transition: transform var(--dur-media) var(--ease-padrao), background-color var(--dur-media);
}
.acordeao details[open] summary::after { transform: rotate(135deg); }
.acordeao summary:hover::after { border-color: var(--cor-marca); }
.acordeao details p { padding: 0 3rem 1.5rem .25rem; color: var(--cor-texto-suave); max-width: 44rem; }
.acordeao details::details-content { block-size: 0; overflow: clip; transition: block-size var(--dur-lenta) var(--ease-padrao), content-visibility var(--dur-lenta) allow-discrete; }
.acordeao details[open]::details-content { block-size: auto; }
@media (min-width: 60rem) { .perguntas-grade { grid-template-columns: 1fr 1.4fr; gap: 4rem; align-items: start; } }

/* =====================================================================
   10. CTA FINAL E RODAPÉ
   ===================================================================== */
.final-painel {
  position: relative; overflow: hidden; isolation: isolate; text-align: center; display: grid; justify-items: center;
  padding: clamp(3.5rem, 2rem + 6vw, 7rem) 1.25rem; border-radius: 2rem;
  background: #18132D; color: #FBFAFE; border-color: rgb(255 255 255 / .1);
  --cor-texto-suave: var(--cor-neutro-200); --cor-marca: var(--cor-roxo-300); --cor-texto-tenue: var(--cor-neutro-300); --vidro: rgb(255 255 255 / .08); --vidro-borda: rgb(255 255 255 / .16); --cor-texto: #FBFAFE;
}
.final-luz {
  position: absolute; inset: -40%; z-index: -1;
  background: conic-gradient(from var(--giro, 0deg) at 50% 55%, #18132D, #442669, #932684, #553181, #18132D, #442669, #18132D);
  filter: blur(60px); opacity: .9; animation: gira 18s linear infinite;
}
@property --giro { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes gira { to { --giro: 360deg; } }
.final-painel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 60% at 50% 50%, transparent, rgb(24 19 45 / .75)); }
.final-painel h2 { font-size: clamp(3rem, 1.5rem + 7vw, 7rem); letter-spacing: -.05em; line-height: .95; }
.final-painel .apoio { margin-inline: auto; }
.final-painel .acoes { justify-content: center; margin-top: 2.25rem; }
.contatos { display: grid; justify-content: center; gap: .75rem 2rem; margin-top: 3rem; text-align: center; }
.contatos li { display: grid; gap: .1rem; }
.contatos .mono { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cor-neutro-300); }
.contatos a { text-decoration: none; font-weight: 600; } .contatos a:hover { text-decoration: underline; text-underline-offset: 4px; }
.final-quem { margin-top: 2.5rem; font-size: .9375rem; color: var(--cor-neutro-200); max-width: 34rem; }
.final { padding-bottom: 4rem; }
@media (min-width: 40rem) { .contatos { grid-template-columns: repeat(2, auto); text-align: left; } }
@media (min-width: 60rem) { .contatos { grid-template-columns: repeat(4, auto); } }

.rodape { padding: 3.5rem 0 3rem; border-top: 1px solid var(--linha); font-size: .875rem; color: var(--cor-texto-tenue); }
.rodape-grade { display: grid; gap: 2.5rem; }
.rodape-tag { margin-top: .75rem; max-width: 18rem; }
.rodape-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
.rodape-tit { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .75rem; color: var(--cor-texto-suave); }
.rodape-nav ul { display: grid; gap: .45rem; }
.rodape-nav a { text-decoration: none; color: var(--cor-texto-suave); } .rodape-nav a:hover { color: var(--cor-texto); text-decoration: underline; text-underline-offset: 3px; }
.rodape-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--linha); }
.rodape-legal a { color: var(--cor-texto-suave); }
@media (min-width: 52rem) { .rodape-grade { grid-template-columns: 1fr auto; } .rodape-nav { grid-template-columns: repeat(3, auto); gap: 4rem; } }

/* ---------- páginas de linha (produtos/*) ---------- */
.hero-linha { padding-bottom: 2rem; }
.migalha { display: flex; gap: .5rem; margin-bottom: 1.5rem; font: 500 .75rem var(--fonte-mono); color: var(--cor-texto-tenue); }
.migalha a { color: var(--cor-texto-suave); text-decoration: none; } .migalha a:hover { text-decoration: underline; }
.hero-linha h1 { max-width: none; }
.hero-promessa { margin-top: 1.5rem; max-width: 24ch; font: 650 clamp(1.4rem, 1rem + 2vw, 2.4rem)/1.12 var(--fonte-titulo); letter-spacing: -.025em; text-wrap: balance; }
.hero-linha .hero-apoio { margin-top: 1rem; }
.ancoras { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 2.5rem; max-width: 46rem; }
a.chip { text-decoration: none; display: inline-block; }
.modulos-pagina { padding-top: clamp(3rem, 2rem + 4vw, 6rem); }
.grade-modulos { display: grid; gap: 1rem; }
.mod-card { scroll-margin-top: 6rem; transition: border-color var(--dur-lenta), box-shadow var(--dur-lenta); }
.mod-card .mod-vis { height: 9.5rem; margin-bottom: .75rem; }
.mod-card:target { border-color: var(--cor-destaque); box-shadow: 0 0 0 1px var(--cor-destaque), 0 30px 80px -30px rgb(147 38 132 / .6); }
.vis-gen { display: grid; place-content: center; justify-items: center; gap: .9rem; }
.vis-gen-icone { width: 3.25rem; height: 3.25rem; padding: .7rem; border-radius: 1rem; background: var(--grad-marca); fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; box-shadow: 0 0 40px rgb(147 38 132 / .5); animation: flutua 4s ease-in-out infinite; }
@keyframes flutua { 50% { transform: translateY(-4px); } }
.estado { padding: .3rem .7rem; border-radius: var(--raio-pilula); font: 500 .7rem var(--fonte-mono); color: var(--cor-sucesso); background: var(--cor-sucesso-fundo); border: 1px solid var(--cor-sucesso-borda); animation: respira 3s ease-in-out infinite; }
@keyframes respira { 50% { opacity: .6; } }
.estado::before { content: "✓ "; }
.metodo { display: grid; gap: .75rem; margin: 2rem 0 2.25rem; width: 100%; max-width: 52rem; text-align: left; }
.metodo li { display: grid; gap: .15rem; padding: 1rem 1.1rem; border-radius: 1rem; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .12); }
.metodo .mono { font-size: .68rem; color: var(--cor-magenta-300); }
.metodo b { font: 700 1.125rem var(--fonte-titulo); letter-spacing: -.01em; }
.metodo small { font-size: .875rem; color: var(--cor-neutro-200); }
.final-painel .metodo + .acoes { margin-top: 0; }
.entradas-secao .entradas { margin-top: 0; }
@media (min-width: 40rem) { .grade-modulos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 52rem) {
  .metodo { grid-template-columns: repeat(3, 1fr); }
  .vitrine-1 { grid-template-columns: 1fr; max-width: 52rem; }
  .vitrine-1 .projeto-destaque { grid-row: auto; }
  .vitrine-1 .projeto-destaque .projeto-link { grid-template-rows: auto; }
  .vitrine-1 .projeto-destaque img { flex: none; aspect-ratio: 760 / 427; }
  .vitrine-2 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 60rem) { .grade-3, .grade-6 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- páginas internas (privacidade, 404) ---------- */
.pagina { padding: 8rem 0 5rem; }
.conteudo { max-width: 44rem; }
.conteudo h1 { font-size: clamp(2.5rem, 1.5rem + 4vw, 4rem); font-weight: 750; letter-spacing: -.045em; line-height: 1; }
.conteudo h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; margin: 3rem 0 .75rem; }
.conteudo p, .conteudo li { color: var(--cor-texto-suave); line-height: 1.7; }
.conteudo p + p { margin-top: 1rem; }
.conteudo ul { list-style: disc; padding-left: 1.25rem; display: grid; gap: .4rem; margin-top: .75rem; }
.conteudo strong { color: var(--cor-texto); }
.conteudo a { color: var(--cor-marca); text-underline-offset: 3px; }
.atualizacao { margin: 1rem 0 2.5rem; font: 500 .8125rem var(--fonte-mono); color: var(--cor-texto-tenue) !important; }
.erro-404 { min-height: 100svh; display: grid; place-content: center; justify-items: center; text-align: center; padding: 7rem var(--gutter) 4rem; }
.codigo { font: 800 clamp(7rem, 4rem + 18vw, 16rem)/.85 var(--fonte-titulo); letter-spacing: -.06em; }
.erro-404 h1 { font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem); font-weight: 700; letter-spacing: -.03em; margin-top: 1.5rem; }
.erro-404 .apoio { margin: 1rem auto 2rem; }
.topo-voltar { margin-left: .25rem; }
.erro-outra-lingua { margin-top: 1.5rem; }

/* ---------- entrada ao rolar ---------- */
.js [data-revelar] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-padrao), transform .9s var(--ease-padrao); }
.js [data-revelar].visto { opacity: 1; transform: none; }
.portas-grade li:nth-child(2) [data-revelar], .entradas li:nth-child(2), .vitrine li:nth-child(2) { transition-delay: .08s; }
.portas-grade li:nth-child(3) [data-revelar], .entradas li:nth-child(3), .vitrine li:nth-child(3) { transition-delay: .16s; }

/* ---------- troca de tema com transição circular ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: revela .6s var(--ease-padrao); }
@keyframes revela { from { clip-path: circle(0 at var(--vt-x, 100%) var(--vt-y, 0)); } to { clip-path: circle(150vmax at var(--vt-x, 100%) var(--vt-y, 0)); } }

/* ---------- movimento reduzido: tudo parado, tudo visível ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0s !important; }
  .js [data-revelar] { opacity: 1; transform: none; }
  .mural i, .rsvp-ok, .checkin-ok b, .r-voce, .qr-ok, .estado { animation: none !important; opacity: 1; transform: none; }
  .busca-texto { animation: none !important; width: 16ch; }
  .fluxo-ponto { display: none; }
  .ondas path, .ic-arco { animation: none !important; opacity: 1; }
  .feixe { animation: none !important; top: 50%; }
  .cena-moldura { transform: none; }
}

/* ---------- sugestão de idioma (aparece só na primeira visita, quando país/navegador não batem com a página) ---------- */
.aviso-idioma {
  position: fixed; z-index: 60; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: .75rem; width: max-content; max-width: calc(100vw - 2rem);
  padding: .6rem .6rem .6rem 1.1rem; border-radius: 999px;
  background: var(--vidro); border: 1px solid var(--vidro-borda); color: var(--cor-texto);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 18px 48px -16px rgb(0 0 0 / .55);
  transform: translate(-50%, 140%); opacity: 0; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s;
}
.aviso-idioma.visivel { transform: translate(-50%, 0); opacity: 1; }
.aviso-idioma p { margin: 0; font-size: .9375rem; line-height: 1.35; }
.aviso-idioma-fechar {
  flex: none; width: 2.25rem; height: 2.25rem; border-radius: 999px; border: 1px solid var(--vidro-borda);
  background: transparent; color: var(--cor-texto); font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.aviso-idioma-fechar:hover { border-color: color-mix(in oklab, var(--cor-marca) 50%, transparent); }
@media (max-width: 600px) {
  .aviso-idioma { flex-wrap: wrap; border-radius: 1.25rem; padding: .9rem; gap: .6rem; }
  .aviso-idioma p { flex: 1 1 100%; }
  .aviso-idioma .botao { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .aviso-idioma { transition: none; } }