/* Gestão Empresarial: fundo azul-marinho (ou claro, pelo botão da barra). Cores só por tokens (shared/css/tokens.css)
   para valer nos dois temas: nada de #000 ou rgba branco fixo. */

/* Brilho que segue o cursor (só em dispositivos com mouse) */
.cursor-glow {
  position: fixed; left: 0; top: 0; z-index: var(--z-glow);
  width: 520px; height: 520px; margin: -260px 0 0 -260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(71, 137, 206, .16) 0%, rgba(71, 137, 206, .06) 35%, transparent 68%);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-9999px, -9999px, 0);
  transition: opacity .6s;
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) { .cursor-glow.is-on { opacity: 1; } html[data-tema="claro"] .cursor-glow.is-on { opacity: .5; } }

/* Entradas (rolagem). Só escondem quando há JS (classe .js no <html>); sem JS, tudo aparece. */
.js [data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Títulos de seção: mesma escala em todas as páginas */
.services h2, .area h2 { font-size: clamp(36px, 4.4vw, 60px); max-width: 18ch; }
.hub h2 { font-size: clamp(36px, 5vw, 72px); }

/* ---------- HERO ---------- */
.hero-wrap { position: relative; overflow: hidden; }
.hero {
  position: relative; z-index: var(--z-content);
  min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--bar-h) + 40px) 0 var(--s60);
}
.numbers, .marquee { position: relative; z-index: var(--z-content); }
.hero__canvas {
  /* Cobre hero + números + faixa. A logo em si fica dentro do hero, à direita (opção `box` do motor). */
  position: absolute; z-index: var(--z-canvas);
  inset: 0; width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0; transition: opacity 1.2s ease .3s;
}
.hero__canvas.is-ready { opacity: 1; }
.hero__inner { position: relative; z-index: var(--z-content); }
.hero__title {
  margin-top: var(--s18);
  max-width: 14ch;
  font-size: clamp(44px, 5.4vw, 78px);
}
.hero__lead { margin-top: var(--s24); max-width: 34ch; color: var(--silver); }
.hero__cta { margin-top: var(--s36); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s18); }

.js [data-rise] { opacity: 0; transform: translateY(26px); }
/* .is-loaded entra no bloco de abertura de cada página (.hero na home, .lhero nas landings, .hub--page na ponte) */
.js .is-loaded [data-rise] {
  animation: rise .9s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 120ms + 80ms);
}
@keyframes rise { to { opacity: 1; transform: none; } }
.js .is-settled [data-rise] { opacity: 1; transform: none; animation: none; }

/* ---------- NÚMEROS ---------- */
.numbers { padding: var(--s36) 0 var(--s24); }
.numbers__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s24); }
.num { display: grid; gap: 4px; }
.num__value { font-size: clamp(38px, 4.2vw, 60px); font-weight: 400; letter-spacing: var(--track-display); line-height: 1; }
.num__value sup { font-size: .45em; vertical-align: top; color: var(--saffron); margin-left: 2px; }
.num__label { font-size: var(--text-nav); font-weight: 600; letter-spacing: var(--track-nav); text-transform: uppercase; color: var(--ash); }

/* ---------- FAIXA ---------- */
.marquee { overflow: hidden; padding: var(--s24) 0 var(--s60); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; width: max-content; animation: slide 52s linear infinite; }
.marquee__group { display: flex; align-items: center; gap: var(--s24); padding-right: var(--s24); }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span { font-size: var(--text-2xs); font-weight: 400; letter-spacing: -0.48px; color: var(--silver); white-space: nowrap; }
.marquee__track i { width: 9px; height: 9px; background: var(--iris); clip-path: polygon(0 0, 100% 50%, 0 100%); opacity: .8; }
.marquee__track i:nth-child(6n) { background: var(--saffron); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- SERVIÇOS (grade que reage à proximidade do mouse) ----------
   Contrato com js/proximity.js: cada .svc recebe --p (0 = longe, 1 = sob o cursor), --dx e --dy
   (posição do cursor em relação ao centro do item, de -1 a 1) e a classe .is-near no mais próximo;
   cada [data-proximity] recebe --gx/--gy (px, cursor dentro da grade) e .is-active enquanto o cursor está nela. */
.services { padding: var(--s60) 0 var(--s96); }
.services__intro { margin-top: var(--s24); max-width: 60ch; color: var(--silver); }
.services .intro__body h2 { font-size: clamp(32px, 3.8vw, 54px); line-height: 1.05; max-width: 24ch; }
.services__group {
  margin-top: var(--s60);
  font-size: var(--text-nav); font-weight: 600; letter-spacing: var(--track-nav); text-transform: uppercase;
  color: var(--ash);
}
.services__group + .svc-grid { margin-top: var(--s24); }
.svc-grid {
  position: relative;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s36) var(--s24);
  --gx: -9999px; --gy: -9999px;
}
/* holofote azul fraco que acompanha o cursor dentro da grade */
.svc-grid::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: var(--gx); top: var(--gy); width: 620px; height: 620px; margin: -310px 0 0 -310px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(57, 92, 179, .22) 0%, rgba(57, 92, 179, .08) 40%, transparent 70%);
  opacity: 0; transition: opacity .5s;
}
.svc-grid.is-active::before { opacity: 1; }
.svc { position: relative; z-index: 1; --p: .85; --dx: 0; --dy: 0; }
/* com o módulo de proximidade montado (classe is-mounted), cada item começa apagado e acende conforme o cursor chega */
.svc-grid.is-mounted .svc { --p: 0; }
.svc a {
  display: grid; grid-template-rows: auto auto 1fr auto; gap: 6px;
  height: 100%;
  border-radius: var(--radius);
}
.svc__art {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 4 / 3; margin-bottom: var(--s12);
}
/* halo atrás da ilustração: cresce com a proximidade */
.svc__art::before {
  content: ""; position: absolute; inset: 8% 6%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(71, 137, 206, .6), rgba(57, 92, 179, .18) 55%, transparent 100%);
  filter: blur(22px);
  opacity: calc(var(--p) * .9);
  transform: scale(calc(.8 + var(--p) * .3));
  transition: opacity .4s, transform .5s var(--ease);
}
.svc__art img {
  position: relative; width: auto; height: auto; max-width: 88%; max-height: 100%;
  /* longe: menor, mais escura e menos saturada; perto: sobe, cresce e ganha cor; desliza e inclina na direção do cursor */
  transform:
    translate3d(calc(var(--dx) * 7px), calc(var(--dy) * 5px - var(--p) * 10px), 0)
    rotate(calc(var(--dx) * 1.5deg))
    scale(calc(.94 + var(--p) * .1));
  filter: saturate(calc(.72 + var(--p) * .38)) brightness(calc(.84 + var(--p) * .22)); /* longe do mouse: um pouco apagada, sem sumir */
  transition: transform .45s var(--ease), filter .4s;
  will-change: transform, filter;
}
.svc__name {
  font-size: var(--text-2xs); font-weight: 400; letter-spacing: -0.48px; line-height: 1.15;
  color: color-mix(in srgb, var(--white) calc(66% + var(--p) * 34%), var(--void));
  transition: color .3s;
}
.svc__desc {
  color: color-mix(in srgb, var(--silver) calc(70% + var(--p) * 30%), var(--void)); /* piso 4,5:1 sobre o fundo */
  transition: color .3s; max-width: 34ch;
}
.svc__more {
  margin-top: 6px;
  font-size: var(--text-nav); font-weight: 600; letter-spacing: var(--track-nav); text-transform: uppercase;
  color: var(--saffron);
  opacity: calc(.62 + var(--p) * .38); /* piso 4,5:1 sobre preto */
  transform: translateX(calc(var(--p) * 6px));
  transition: opacity .3s, transform .4s var(--ease);
}
/* teclado: o item focado acende como se o mouse estivesse nele */
.svc:focus-within { --p: 1 !important; }
.svc a:focus-visible { outline-offset: 8px; }
/* sem mouse (celular, tablet): tudo aceso, sem halo perseguindo nada */
@media (hover: none) { .svc { --p: .85; } .svc-grid::before { display: none; } }

/* ---------- COMO FUNCIONA (painéis vindos da prévia do estilo novo, aprovados em 22/09) ---------- */
/* Bloco de introdução: rótulo à esquerda, título grande à direita (usado em Como funciona e Contato) */
.intro { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); gap: var(--s24) var(--s60); align-items: start; }
.intro > .eyebrow { padding-top: 14px; }
.how .intro__body h2, .contact .intro__body h2 { font-size: clamp(34px, 4.2vw, 60px); line-height: 1; max-width: 17ch; }
.intro__body > p { margin-top: var(--s24); max-width: 52ch; color: var(--silver); }
.how { padding: var(--s60) 0 var(--s60); }
.steps { list-style: none; margin: var(--s60) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.step {
  display: flex; flex-direction: column;
  min-height: 360px; padding: 24px;
  border-radius: 12px; background: var(--painel); box-shadow: inset 0 0 0 1px var(--linha);
}
.step__n { font-family: var(--mono, "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--saffron); }
.step h3 { margin-top: 56px; font-size: 26px; font-weight: 400; line-height: 1.05; letter-spacing: -0.035em; }
.step p { margin-top: 12px; max-width: 44ch; color: var(--silver); }
.step__fig { margin-top: auto; padding-top: 28px; width: 100%; max-width: 380px; height: auto; overflow: visible; }
.step__fig * { fill: none; stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.step__fig .l { stroke: color-mix(in srgb, var(--white) 42%, transparent); }
.step__fig .d { stroke: color-mix(in srgb, var(--white) 30%, transparent); stroke-dasharray: 2 5; }
.step__fig .a { stroke: #5b8cdc; }
.step__fig .k { stroke: var(--saffron); }

@media (max-width: 1180px) and (min-width: 861px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .numbers__grid { grid-template-columns: repeat(3, 1fr); row-gap: var(--s36); }
}

/* ---------- CHAMADA PARA O ATALAHUB ---------- */
.hub { padding: 72px 0 var(--s96); text-align: center; }
.hub h2 { max-width: 20ch; margin-inline: auto; }
.hub p { margin: var(--s24) auto 0; max-width: 46ch; color: var(--silver); }
.hub__cta { margin-top: var(--s36); display: flex; justify-content: center; }
.hub-btn {
  position: relative; display: inline-flex; align-items: center; gap: 14px;
  padding: 10px 12px 10px 10px; border-radius: var(--pill);
  background: var(--iris); color: var(--sobre-azul); text-align: left;
  --mx: 0px; --my: 0px; transform: translate(var(--mx), var(--my));
  transition: transform .35s var(--ease), background-color .25s;
}
/* anel azul que respira em volta do botão, convidando ao clique */
.hub-btn { animation: hubHalo 3.6s ease-in-out infinite; }
@keyframes hubHalo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(71, 137, 206, .45); }
  60% { box-shadow: 0 0 0 14px rgba(71, 137, 206, 0); }
}
.hub-btn:hover { background-color: var(--iris-hover); }
.hub-btn__logo { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(0, 0, 0, .35); }
.hub-btn__logo img { width: 26px; height: auto; }
.hub-btn__txt { display: grid; gap: 2px; line-height: 1.15; }
.hub-btn__txt b { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.hub-btn__txt small { font-size: 13px; font-weight: 400; color: rgba(255, 255, 255, .78); }
.hub-btn:hover .hub-btn__txt small { color: var(--sobre-azul); }
.hub-btn__seta {
  display: grid; place-items: center; width: 40px; height: 40px; margin-left: 10px; border-radius: 50%;
  background: var(--sobre-azul); color: var(--iris); font-size: 18px; font-weight: 600;
  transition: transform .3s var(--ease);
}
.hub-btn:hover .hub-btn__seta { transform: translate(2px, -2px) rotate(8deg); }

/* Página-ponte da gestão condominial (gestao-condominial-atalahub.html) */
.hub--page { min-height: calc(100svh - var(--bar-h)); display: flex; align-items: center; padding: calc(var(--bar-h) + 40px) 0 var(--s96); }
.hub--page h1 { font-size: clamp(38px, 5vw, 72px); max-width: 18ch; margin-inline: auto; margin-top: var(--s18); }
.crumbs--center { justify-content: center; margin-bottom: var(--s24); }
.hub--page .hub__cta { flex-wrap: wrap; gap: var(--s18); }

/* ---------- ATENDIMENTO NO DF ---------- */
.area { padding: var(--s60) 0 var(--s96); }
.area__head { text-align: center; }
.area__head .eyebrow { display: block; }
.area .area__head h2 { margin: var(--s18) auto 0; max-width: 22ch; }
.area__grid { margin-top: var(--s60); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
.area__bloco {
  display: flex; flex-direction: column; gap: var(--s12);
  padding: 28px; border-radius: 12px;
  background: var(--painel); box-shadow: inset 0 0 0 1px var(--linha);
}
.area__bloco h3 { font-size: clamp(24px, 2.2vw, 32px); font-weight: 400; line-height: 1.1; letter-spacing: -0.035em; }
.area__bloco p { color: var(--silver); max-width: 48ch; }
.area__bloco .area__regions { margin-top: auto; padding-top: var(--s12); font-size: 15px; color: var(--ash); }
.area__bloco .ghost { margin-top: auto; align-self: flex-start; padding-left: 0; }
.area__text { margin: var(--s36) auto 0; max-width: 78ch; text-align: center; font-size: 16px; color: var(--ash); }
.area__text a { color: var(--silver); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--white) 25%, transparent); text-underline-offset: 3px; transition: color .25s, text-decoration-color .25s; }
.area__text a:hover { color: var(--saffron); text-decoration-color: currentColor; }

/* ---------- CONTATO (painéis de destino vindos da prévia do estilo novo, aprovados em 22/09) ---------- */
.contact { padding: var(--s60) 0 var(--s96); }
.dest-row { margin-top: var(--s60); display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; }
.dest {
  display: grid; align-content: space-between; gap: var(--s24);
  min-height: 220px; padding: 24px;
  border-radius: 12px; background: var(--painel); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--white) 20%, transparent);
  transition: background-color .3s, box-shadow .3s;
}
.dest:hover { background: var(--painel-hover); box-shadow: inset 0 0 0 1px #5b8cdc; }
.dest--main { box-shadow: inset 0 0 0 1px rgba(91, 140, 220, .7); }
.dest__label, .dest__go { font-family: var(--mono, "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; }
.dest__label { display: inline-flex; align-items: center; gap: 10px; color: var(--silver); }
.dest__label svg { width: 18px; height: 18px; flex: 0 0 auto; fill: #5b8cdc; }
.dest--main .dest__label svg { fill: #25d366; } /* verde do WhatsApp, reconhecível de longe */
.dest__title { font-size: clamp(26px, 2.6vw, 38px); font-weight: 400; line-height: 1; letter-spacing: -0.045em; }
.dest--main .dest__title { font-size: clamp(30px, 3.4vw, 48px); }
.dest__go { display: inline-flex; align-items: center; gap: 10px; color: var(--saffron); }
.dest__go::after { content: "↗"; font-size: 16px; transition: transform .3s var(--ease); }
.dest:hover .dest__go::after { transform: translate(3px, -3px); }

/* ---------- RODAPÉ ---------- */
.footer { padding: var(--s60) 0 var(--s36); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--s36); }
.footer__brand img { filter: var(--logo-filtro); } /* logo branca: escura no tema claro */
.footer__brand p { margin-top: var(--s18); max-width: 30ch; color: var(--silver); }
.footer__title { font-size: var(--text-nav); font-weight: 600; letter-spacing: var(--track-nav); text-transform: uppercase; color: var(--ash); }
.footer__links { list-style: none; margin: var(--s18) 0 0; padding: 0; display: grid; gap: 10px; }
.footer__links a { color: var(--white); transition: color .25s; }
.footer__links a:hover { color: var(--saffron); }
.footer__bottom { margin-top: var(--s60); display: grid; gap: 6px; font-size: var(--text-caption); color: var(--ash); }
.footer__motion { justify-self: start; margin-top: var(--s12); padding: 0; min-height: 32px; }

/* ---------- LANDINGS DE SERVIÇO ---------- */
.lhero { position: relative; padding: calc(var(--bar-h) + 48px) 0 var(--s36); }
.lhero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s60); align-items: center; }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--text-nav); color: var(--ash); }
.crumbs a { color: var(--ash); transition: color .25s; }
.crumbs a:hover { color: var(--white); }
.crumbs li { list-style: none; }
.crumbs li + li::before { content: "›"; margin-right: 10px; color: color-mix(in srgb, var(--white) 36%, var(--void)); }
.crumbs { margin: 0; padding: 0; }
.lhero .eyebrow { margin-top: var(--s24); }
.lhero h1 { margin-top: var(--s18); font-size: clamp(38px, 4.4vw, 62px); max-width: 16ch; }
.lhero__lead { margin-top: var(--s24); max-width: 44ch; color: var(--silver); }
.lhero__cta { margin-top: var(--s36); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s18); }
.lhero__art { position: relative; display: grid; place-items: center; margin: 0; perspective: 1200px; }
.lhero__art::before {
  content: ""; position: absolute; inset: 10% 8%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(71, 137, 206, .45), rgba(57, 92, 179, .12) 55%, transparent 100%);
  filter: blur(30px);
}
.lhero__art img {
  position: relative; width: min(100%, 560px); height: auto;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform .5s var(--ease);
  animation: float 8s ease-in-out infinite;
  will-change: transform;
}
@keyframes float { 50% { translate: 0 -10px; } }

.lbody { padding: var(--s36) 0 var(--s60); }
.lbody__inner { max-width: 760px; }
.lbody h2 { margin-top: var(--s60); font-size: clamp(28px, 3vw, 40px); max-width: 24ch; }
.lbody h2:first-child { margin-top: 0; }
.lbody h3 { margin-top: var(--s36); font-size: var(--text-2xs); font-weight: 400; letter-spacing: -0.48px; }
.lbody p { margin-top: var(--s18); color: var(--silver); }
.lbody p strong, .lbody li strong { font-weight: 500; color: var(--white); }
.lbody a { color: var(--white); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--white) 30%, transparent); text-underline-offset: 3px; transition: color .25s, text-decoration-color .25s; }
.lbody a:hover { color: var(--saffron); text-decoration-color: currentColor; }
.lbody ul, .lbody ol { margin: var(--s18) 0 0; padding: 0; list-style: none; display: grid; gap: 10px; color: var(--silver); }
.lbody ul li { position: relative; padding-left: 22px; }
.lbody ul li::before { content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 8px; background: var(--saffron); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.lbody ol { counter-reset: passo; }
.lbody ol li { position: relative; padding-left: 40px; counter-increment: passo; }
.lbody ol li::before { content: counter(passo); position: absolute; left: 0; top: 0; font-size: var(--text-2xs); font-weight: 400; letter-spacing: -0.48px; line-height: 1.15; color: var(--saffron); }
/* grade de itens (o que era cartão vira texto solto com marcador) */
.lgrid { list-style: none; margin: var(--s24) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s24) var(--s36); }
.lgrid li { position: relative; padding-left: 22px; }
.lgrid li::before { content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; background: var(--iris); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.lgrid h3 { margin: 0; font-size: var(--text-2xs); font-weight: 400; letter-spacing: -0.48px; line-height: 1.15; color: var(--white); }
.lgrid p { margin-top: 6px; color: var(--silver); }

.lfaq { padding: var(--s36) 0 var(--s60); }
.lfaq__inner { max-width: 760px; }
.lfaq h2 { font-size: clamp(28px, 3vw, 40px); }
.faq { margin-top: var(--s24); }
.faq + .faq { margin-top: 0; }
.faq summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 1fr 24px; align-items: start; gap: var(--s18);
  padding: var(--s18) 0 var(--s12);
  font-size: var(--text-2xs); font-weight: 400; letter-spacing: -0.48px; line-height: 1.25;
  transition: color .25s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--saffron); font-size: 26px; line-height: 1; transition: transform .3s var(--ease); }
.faq[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--saffron); }
.faq p { padding: 0 0 var(--s18); max-width: 60ch; color: var(--silver); }
.faq + .faq summary { padding-top: var(--s12); }

.lcta { padding: var(--s60) 0 var(--s96); text-align: center; }
.lcta h2 { font-size: clamp(34px, 4.4vw, 60px); max-width: 18ch; margin-inline: auto; }
.lcta p { margin: var(--s24) auto 0; max-width: 44ch; color: var(--silver); }
.lcta__cta { margin-top: var(--s36); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s18); }

.lrel { padding: 0 0 var(--s96); }
.lrel h2 { font-size: var(--text-nav); font-weight: 600; letter-spacing: var(--track-nav); text-transform: uppercase; color: var(--ash); }
.lrel__list { list-style: none; margin: var(--s18) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s12) var(--s36); }
.lrel__list a { font-size: var(--text-2xs); font-weight: 400; letter-spacing: -0.48px; color: var(--white); transition: color .25s; }
.lrel__list a:hover { color: var(--saffron); }
.lrel__back { margin-top: var(--s36); }

/* Animações pausadas pelo visitante */
html.motion-off .marquee__track, html.motion-off .lhero__art img { animation-play-state: paused; }
html.motion-off .hub-btn { transform: none; }
html.motion-off .cursor-glow { display: none; }
html.motion-off.js [data-rise],
html.motion-off.js [data-reveal] { opacity: 1; transform: none; animation: none; }
html.motion-off .svc { --p: .85; --dx: 0; --dy: 0; }
html.motion-off .svc-grid::before { display: none; }
html.motion-off .lhero__art img { transform: none; }

/* ---------- RESPONSIVO ---------- */
@media (max-width: 1024px) {
  .svc-grid { gap: var(--s36) var(--s18); }
  .area__grid { grid-template-columns: 1fr; margin-top: var(--s36); }
  .area__bloco { padding: 20px; }
  .dest-row { grid-template-columns: 1fr 1fr; }
  .dest--main { grid-column: 1 / -1; }
  .lhero__grid { gap: var(--s36); }
}
@media (max-width: 860px) {
  .hero { min-height: auto; padding-top: calc(var(--bar-h) + 40px); padding-bottom: var(--s36); }
  .hero__canvas { opacity: 0; }
  .hero__canvas.is-ready { opacity: .55; }
  .hero__title { max-width: 12ch; }
  .numbers { padding: var(--s24) 0 var(--s12); }
  .numbers__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s24) var(--s18); }
  .num:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .marquee { padding: var(--s18) 0 var(--s24); }
  .services { padding: var(--s18) 0 var(--s60); }
  .services__group { margin-top: var(--s36); }
  .svc-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s24) var(--s18); }
  .svc__art { aspect-ratio: 5 / 4; margin-bottom: 6px; }
  .svc__art img { max-width: 100%; }
  .svc__name { font-size: 20px; }
  .svc__desc { font-size: 16px; }
  .how { padding: var(--s36) 0 var(--s60); }
  .intro { grid-template-columns: 1fr; gap: var(--s18); }
  .intro > .eyebrow { padding-top: 0; }
  .steps { grid-template-columns: 1fr; margin-top: var(--s36); }
  .step { min-height: 0; padding: 18px; }
  .step h3 { margin-top: 36px; font-size: 24px; }
  .hub, .contact { padding: var(--s60) 0; }
  .dest-row { grid-template-columns: 1fr; margin-top: var(--s36); }
  .dest { min-height: 0; }
  .hub-btn__txt b { font-size: 16px; }
  .hub-btn__logo { width: 42px; height: 42px; }
  .area { padding: var(--s36) 0 var(--s60); }
  .footer { padding: var(--s36) 0 var(--s24); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s24); }
  .lhero { padding-top: calc(var(--bar-h) + 28px); padding-bottom: var(--s24); }
  .lhero__grid { grid-template-columns: 1fr; gap: var(--s24); }
  .lhero__art { margin-top: var(--s12); }
  .lhero__art img { width: min(72%, 360px); animation: none; }
  .lhero h1 { max-width: none; }
  .lbody { padding: var(--s24) 0 var(--s36); }
  .lbody h2 { margin-top: var(--s36); }
  .lgrid { grid-template-columns: 1fr; gap: var(--s18); }
  .lfaq { padding: var(--s24) 0 var(--s36); }
  .faq summary { font-size: 20px; }
  .lcta { padding: var(--s36) 0 var(--s60); }
  .lrel { padding-bottom: var(--s60); }
  .lrel__list { gap: var(--s6) var(--s24); }
  .lrel__list a { font-size: 20px; }
  /* Títulos usam a largura toda; o text-wrap: balance equilibra as linhas sozinho */
  .hero__title, .services h2, .how h2, .hub h2, .area h2, .contact .intro__body h2, .how .intro__body h2, .lcta h2 { max-width: none; }
}
@media (max-width: 520px) {
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .svc__desc { display: none; }
  .svc__more { display: none; }
  .svc__name { font-size: 18px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s18) var(--s24); }
  .footer__brand { grid-column: 1 / -1; text-align: center; }
  .footer__brand img { width: 96px; height: auto; margin-inline: auto; }
  .footer__brand p { margin-top: var(--s12); max-width: none; font-size: 16px; }
  .footer__title { margin-top: var(--s6); }
  .footer__links { margin-top: var(--s12); gap: 6px; font-size: 16px; }
  .footer__grid > div:last-child { grid-column: 1 / -1; }
  .footer__grid > div:last-child .footer__links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
  .footer__bottom { margin-top: var(--s36); }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-rise] { opacity: 1; transform: none; transition: none; animation: none; }
  .js .is-loaded [data-rise] { animation: none; }
  .marquee__track { animation: none; }
  .cursor-glow { display: none; }
  .svc { --p: .85; --dx: 0; --dy: 0; }
  .svc__art img, .svc__art::before, .svc__name, .svc__desc, .svc__more { transition: none; }
  .svc-grid::before { display: none; }
  .lhero__art img { animation: none; transition: none; transform: none; }
  .faq summary::after { transition: none; }
  .dest, .dest__go::after { transition: none; }
  .hub-btn { animation: none; }
  .hub-btn, .hub-btn__seta { transition: none; }
}

/* =====================================================================
   GESTÃO EMPRESARIAL: números em 4, módulos com ícones e quadro de chamados
   ===================================================================== */
.numbers__grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Módulos: mesmo comportamento da grade de serviços, com ícone de traço fino no lugar da ilustração */
.svc-grid--modulos { grid-template-columns: repeat(4, 1fr); }
.svc--modulo .svc__art { aspect-ratio: 16 / 10; }
.mod__icone {
  position: relative; width: 38%; height: auto; overflow: visible;
  transform:
    translate3d(calc(var(--dx) * 6px), calc(var(--dy) * 4px - var(--p) * 8px), 0)
    scale(calc(.94 + var(--p) * .12));
  opacity: calc(.7 + var(--p) * .3);
  transition: transform .45s var(--ease), opacity .4s;
}
.mod__icone * { fill: none; stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.mod__icone .l { stroke: color-mix(in srgb, var(--white) 55%, transparent); }
.mod__icone .d { stroke: color-mix(in srgb, var(--white) 35%, transparent); stroke-dasharray: 2 4; }
.mod__icone .a { stroke: #5b8cdc; }
.mod__icone .k { stroke: var(--saffron); }
.svc__tag {
  display: inline-block; margin-left: 10px; padding: 3px 8px; vertical-align: middle;
  border-radius: var(--pill); background: color-mix(in srgb, var(--saffron) 14%, transparent); color: var(--saffron);
  font-family: var(--mono, "Geist Mono", ui-monospace, monospace); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}

/* Quadro de chamados (demonstração) */
.board-sec { padding: var(--s60) 0 var(--s96); }
.board {
  margin-top: var(--s60); padding: var(--s24);
  border-radius: var(--radius); background: var(--painel); box-shadow: inset 0 0 0 1px var(--linha);
  display: grid; gap: var(--s24);
}
.board__head { display: flex; justify-content: space-between; align-items: center; font-size: var(--text-nav); font-weight: 600; letter-spacing: var(--track-nav); text-transform: uppercase; color: var(--ash); }
.board__live { display: inline-flex; align-items: center; gap: 8px; color: var(--white); }
.board__live i { width: 8px; height: 8px; border-radius: 50%; background: var(--verdant); box-shadow: 0 0 0 4px rgba(21, 132, 110, .25); animation: pulso 2.2s ease-in-out infinite; }
@keyframes pulso { 50% { opacity: .45; } }
.board__clock { font-variant-numeric: tabular-nums; color: var(--silver); letter-spacing: 0; text-transform: none; }
.board__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.board__col { min-height: 260px; padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--white) 3%, transparent); }
.board__col h3 {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
  font-family: var(--mono, "Geist Mono", ui-monospace, monospace); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--silver);
}
.board__n { color: var(--ash); }
.board__col[data-col="execucao"] h3 { color: #8fb3ec; }
.board__col[data-col="concluido"] h3 { color: #4fc4a8; }
/* tema claro: os mesmos tons, escurecidos para 4,5:1 sobre o painel claro */
html[data-tema="claro"] .board__col[data-col="execucao"] h3 { color: #2f5fb3; }
html[data-tema="claro"] .board__col[data-col="concluido"] h3 { color: #0f7a63; }
.board__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.card {
  display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--white) 5%, var(--painel)); box-shadow: inset 3px 0 0 var(--cor, #5c5c5c);
  font-size: 13px; line-height: 1.3;
}
.card b { font-family: var(--mono, "Geist Mono", ui-monospace, monospace); font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--ash); }
.card__t { color: var(--white); font-weight: 400; }
.card__m { color: var(--ash); font-size: 12px; }
.board__col[data-col="aberto"] .card { --cor: #767676; }
.board__col[data-col="agendado"] .card { --cor: var(--saffron); }
.board__col[data-col="execucao"] .card { --cor: #5b8cdc; }
.board__col[data-col="concluido"] .card { --cor: #15846e; }
.card.is-novo { animation: entra .6s var(--ease); }
@keyframes entra { from { opacity: 0; transform: translateY(-8px); } }
.board__fin { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s24); }
.board__fin div { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: baseline; }
.board__fin span { font-size: var(--text-caption); font-weight: 600; letter-spacing: var(--track-nav); text-transform: uppercase; color: var(--ash); }
.board__fin b { font-size: var(--text-2xs); font-weight: 400; letter-spacing: -0.48px; font-variant-numeric: tabular-nums; }
.board__fin i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #5b8cdc calc(var(--v) * 1%), color-mix(in srgb, var(--white) 8%, transparent) 0); }
.board__fin i.atraso { background: linear-gradient(90deg, var(--saffron) calc(var(--v) * 1%), color-mix(in srgb, var(--white) 8%, transparent) 0); }
.board__note { font-size: var(--text-caption); color: var(--ash); margin-top: -8px; }
.dest__title--email { font-size: clamp(20px, 1.9vw, 28px); word-break: break-all; }
html.motion-off .card.is-novo, html.motion-off .board__live i { animation: none; }

@media (max-width: 1180px) and (min-width: 861px) {
  .svc-grid--modulos { grid-template-columns: repeat(2, 1fr); }
  .numbers__grid--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1024px) {
  .board__cols { grid-template-columns: repeat(2, 1fr); }
  .board__col { min-height: 0; }
}
@media (max-width: 860px) {
  .numbers__grid--4 { grid-template-columns: repeat(2, 1fr); }
  .svc-grid--modulos { grid-template-columns: repeat(2, 1fr); }
  .board-sec { padding: var(--s36) 0 var(--s60); }
  .board { margin-top: var(--s36); padding: var(--s18); }
  .board__fin { grid-template-columns: 1fr; gap: var(--s12); }
}
@media (max-width: 520px) {
  .board__cols { grid-template-columns: 1fr 1fr; gap: 8px; }
  .card { padding: 8px 10px; font-size: 12px; }
  .card__m { display: none; }
  .mod__icone { width: 44%; }
}
@media (prefers-reduced-motion: reduce) {
  .card.is-novo, .board__live i { animation: none; }
  .mod__icone { transition: none; }
}

.dest-row--um { grid-template-columns: minmax(0, 560px); }
.footer__grid:has(> div:nth-child(3):last-child) { grid-template-columns: 1.4fr 1fr 1fr; }

/* =====================================================================
   PÁGINA DE ENTRADA DO SISTEMA (substitui a de web.atalahub.com.br, 22/09):
   dois caminhos sempre à vista, "Cadastrar minha empresa" e "Sou funcionário"
   ===================================================================== */
/* Botão secundário bem visível: mesmo formato do principal, só o contorno */
.pill--linha { background: transparent; color: var(--white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--white) 45%, transparent); }
.pill--linha:hover { background: color-mix(in srgb, var(--white) 8%, transparent); box-shadow: inset 0 0 0 1px var(--white); }

/* Barra: os dois botões ao lado das abas (a barra acompanha a rolagem) */
.atala-bar[data-site="gestao"] .atala-bar__actions { gap: 10px; }
.atala-bar[data-site="gestao"] .atala-bar__brand,
.atala-bar[data-site="gestao"] .atala-bar__burger { flex-shrink: 0; }
.atala-bar[data-site="gestao"] .atala-bar__brand { margin-right: 0; }
@media (min-width: 1481px) {
  /* com o botão lua/sol (tema, 22/09) sobram 25 px a menos: abas um pouco mais justas */
  .atala-bar[data-site="gestao"] .atala-bar__inner { gap: 8px; }
  .atala-bar[data-site="gestao"] .atala-bar__nav a { padding-inline: 12px 6px; }
  .atala-bar[data-site="gestao"] .atala-bar__nav a::before { left: 3px; }
}
.atala-bar[data-site="gestao"] .atala-bar__actions .pill { min-height: 42px; padding: 0 18px; }
@media (max-width: 1480px) and (min-width: 1301px) {
  /* segunda linha das abas (descrições) mantida até 1301 px, pedido do Vinicius (23/09): abas e botões mais justos */
  .atala-bar[data-site="gestao"] .atala-bar__inner { gap: 8px; }
  .atala-bar[data-site="gestao"] .atala-bar__nav { gap: 2px; }
  .atala-bar[data-site="gestao"] .atala-bar__nav a { padding: 6px 4px 5px 12px; font-size: 13px; }
  .atala-bar[data-site="gestao"] .atala-bar__nav a::before { left: 3px; }
  .atala-bar[data-site="gestao"] .atala-bar__actions { gap: 8px; }
  .atala-bar[data-site="gestao"] .atala-bar__actions .pill { padding: 0 14px; font-size: 13px; letter-spacing: .02em; }
}
@media (max-width: 1400px) and (min-width: 1301px) {
  .atala-bar[data-site="gestao"] .atala-bar__actions .pill { padding: 0 12px; font-size: 12px; }
}
@media (max-width: 1300px) {
  /* abaixo de 1301 px não cabem: as descrições das abas saem */
  .atala-bar[data-site="gestao"] .atala-bar__nav { gap: 2px; }
  .atala-bar[data-site="gestao"] .atala-bar__nav a { padding: 8px 10px 8px 20px; font-size: 13px; }
  .atala-bar[data-site="gestao"] .atala-bar__nav small { display: none; }
  .atala-bar[data-site="gestao"] .atala-bar__nav a::before { left: 7px; }
}
@media (max-width: 1300px) and (min-width: 901px) {
  .atala-bar[data-site="gestao"] .atala-bar__inner { gap: 6px; }
  .atala-bar[data-site="gestao"] .atala-bar__brand { margin-right: 0; }
  .atala-bar[data-site="gestao"] .atala-bar__nav a { padding: 8px 4px 8px 10px; font-size: 12px; letter-spacing: 0; }
  .atala-bar[data-site="gestao"] .atala-bar__nav a::before { left: 1px; }
  .atala-bar[data-site="gestao"] .atala-bar__actions .pill { padding: 0 10px; font-size: 11px; letter-spacing: .02em; }
}
@media (max-width: 1000px) and (min-width: 901px) {
  /* não cabem as quatro abas, os dois botões e o lua/sol: aqui fica só "Sou funcionário" (o cadastro está no topo da página) */
  .atala-bar[data-site="gestao"] .atala-bar__cta { display: none; }
}
@media (max-width: 374px) {
  /* celular estreito: símbolo da logo sem a palavra ATALA, para caber menu, "Sou funcionário" e lua/sol */
  .atala-bar[data-site="gestao"] .atala-bar__brand span { display: none; }
}
@media (max-width: 900px) {
  .atala-bar[data-site="gestao"] .atala-bar__inner { gap: 6px; }
  /* celular: "Sou funcionário" (azul, a ação principal desde 22/09) no canto; os dois botões grandes ficam no topo e na barra fixa de baixo */
  .atala-bar[data-site="gestao"] .atala-bar__cta { display: none; }
  .atala-bar[data-site="gestao"] .atala-bar__actions .atala-bar__func {
    order: 3; margin-left: auto;
    min-height: 36px; padding: 0 12px;
    font-size: 11px; letter-spacing: .04em;
  }
}
.atala-menu__contact .pill { flex: 1 1 220px; }

/* Hero */
.hero__conta { margin-top: var(--s18); font-size: 15px; color: var(--silver); text-shadow: 0 0 10px var(--void), 0 0 4px var(--void); } /* legível sobre as partículas, nos dois temas */
.hero__conta a { color: var(--white); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--white) 30%, transparent); text-underline-offset: 3px; transition: color .25s, text-decoration-color .25s; }
.hero__conta a:hover { color: var(--saffron); text-decoration-color: currentColor; }

/* Módulos sem link: o bloco interno faz o papel do antigo <a> */
.svc__in { display: grid; grid-template-rows: auto auto 1fr; gap: 6px; height: 100%; }
.svc-grid--modulos { row-gap: var(--s60); }

/* Títulos das seções com bloco de introdução: mesma escala */
.board-sec .intro__body h2, .perguntas .intro__body h2 { font-size: clamp(34px, 4.2vw, 60px); line-height: 1; max-width: 17ch; }

/* Linha de botões no meio da página */
.cta-row { margin-top: var(--s36); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s12) var(--s18); }

/* Perguntas */
.perguntas { padding: var(--s60) 0; }
.perguntas__lista { margin-top: var(--s36); max-width: 760px; }
.perguntas__lista .faq:first-child summary { padding-top: 0; }

/* Comece: gratuito no lançamento e os dois caminhos */
.comece__lista { list-style: none; margin: var(--s24) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 10px var(--s36); }
.comece__lista li { position: relative; padding-left: 22px; color: var(--silver); }
.comece__lista li::before { content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; background: var(--saffron); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.dest-row--dois { grid-template-columns: 1fr 1fr; } /* metade e metade: alinha com as caixas dos apps logo abaixo (marca 1, 24/09) */
.dest__sub { color: var(--silver); font-size: 16px; line-height: 1.4; max-width: 40ch; }

/* Barra fixa de baixo (só celular): aparece depois dos botões do topo e some no bloco final */
.acesso-fixo { display: none; }
@media (max-width: 900px) {
  .acesso-fixo {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bar);
    display: flex; gap: 8px;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--void) 94%, transparent); box-shadow: 0 -1px 0 var(--linha);
    transform: translateY(110%); visibility: hidden;
    transition: transform .35s var(--ease), visibility 0s .35s;
  }
  .acesso-fixo.is-on { transform: none; visibility: visible; transition: transform .35s var(--ease); }
  .acesso-fixo .pill { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 6px 8px; font-size: 11.5px; letter-spacing: .02em; white-space: normal; text-align: center; }
}
html.motion-off .acesso-fixo { transition: none; }

@media (max-width: 1180px) and (min-width: 861px) {
  .svc-grid--modulos { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .perguntas { padding: var(--s36) 0; }
  .perguntas__lista { margin-top: var(--s24); }
  .board-sec .intro__body h2, .perguntas .intro__body h2 { max-width: none; }
  .svc-grid--modulos { row-gap: var(--s36); }
  .comece__lista { grid-template-columns: 1fr; }
  .dest-row--dois { grid-template-columns: 1fr; }
  .cta-row .pill { flex: 1 1 220px; }
}
@media (max-width: 520px) {
  .hero__cta .pill { flex: 1 1 100%; }
  /* Módulos no celular: lista com o ícone à esquerda e a descrição visível (sugestão do Astra, 22/09) */
  .svc-grid--modulos { grid-template-columns: 1fr; row-gap: var(--s24); margin-top: var(--s36); }
  .svc-grid--modulos .svc__in { grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--s18); row-gap: 4px; align-items: start; }
  .svc-grid--modulos .svc__art { grid-row: 1 / span 2; aspect-ratio: 1; margin: 0; }
  .svc-grid--modulos .mod__icone { width: 70%; }
  .svc-grid--modulos .svc__desc { display: block; font-size: 15px; line-height: 1.45; }
  .svc-grid--modulos .svc__name { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .acesso-fixo { transition: none; }
}
html[data-tema="claro"] .card { background: var(--void); } /* claro: cartões brancos sobre o painel */

/* =====================================================================
   BOTÕES DOS APPS (aprovados pelo Vinicius em 24/09, prévia 2, estilo "selo"):
   AtalaHub (principal: moradores, síndicos e clientes) e App do técnico (equipe de campo).
   Ficam escondidos até os links das lojas serem preenchidos em js/site.js (LOJAS).
   ===================================================================== */
.app-grupo { display: grid; gap: 10px; }
.app-grupo[hidden], [data-apps][hidden], .loja[hidden] { display: none; }
.app-rotulo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ash); }
.app-rotulo b { font-weight: 600; color: var(--white); }
.app-rotulo--hub b { color: #7aa7ff; }
html[data-tema="claro"] .app-rotulo--hub b { color: #2f5fb3; }
.app-rotulo img { width: 20px; height: auto; filter: var(--logo-filtro); }
.lojas { display: flex; flex-wrap: wrap; gap: 10px; }
.loja {
  display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 6px 18px 6px 14px; border-radius: 12px;
  background: var(--painel); color: var(--white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--white) 28%, transparent);
  transition: background-color .25s, box-shadow .25s;
}
.loja:hover { background: var(--painel-hover); box-shadow: inset 0 0 0 1px #5b8cdc; }
.loja svg { width: 22px; height: 22px; fill: currentColor; flex: 0 0 auto; }
.loja span { display: grid; line-height: 1.1; }
.loja small { font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ash); }
.loja b { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.lojas--mini .loja { min-height: 40px; padding: 4px 14px 4px 10px; border-radius: 10px; }
.lojas--mini .loja svg { width: 18px; height: 18px; }
.lojas--mini .loja b { font-size: 14px; }
.lojas--mini .loja small { font-size: 9px; }
.apps-dois { margin-top: var(--s24); display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.apps-dois .app-grupo { padding: 20px 24px; border-radius: 12px; background: var(--painel); box-shadow: inset 0 0 0 1px var(--linha); }
.menu-apps { width: 100%; display: grid; gap: var(--s18); margin-top: var(--s12); }
.footer__apps { margin-top: var(--s24); }
@media (max-width: 860px) { .apps-dois .app-grupo { padding: 18px; } }

/* ---------- ESCOLHA DO FUNCIONÁRIO: site ou app do técnico (marca 2 do Vinicius, 24/09) ---------- */
.escolha {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 16px;
  background: var(--painel); color: var(--white);
  box-shadow: inset 0 0 0 1px var(--linha), 0 24px 60px rgba(0, 0, 0, .45);
}
.escolha::backdrop { background: color-mix(in srgb, var(--void) 72%, transparent); backdrop-filter: blur(3px); }
.escolha[open] { animation: escolhaEntra .28s var(--ease); }
@keyframes escolhaEntra { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.escolha__caixa { position: relative; padding: 26px 24px 24px; }
.escolha__fechar { position: absolute; right: 10px; top: 8px; width: 40px; height: 40px; border-radius: 50%; font-size: 26px; line-height: 1; color: var(--ash); }
.escolha__fechar:hover { color: var(--white); background: color-mix(in srgb, var(--white) 8%, transparent); }
.escolha__titulo { margin-top: 8px; font-size: clamp(26px, 3vw, 34px); line-height: 1.05; }
.escolha__opcoes { margin-top: var(--s24); display: grid; gap: 12px; }
.escolha__opcao { display: grid; gap: 6px; padding: 18px 20px; border-radius: 12px; background: color-mix(in srgb, var(--white) 4%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--white) 20%, transparent); transition: box-shadow .25s, background-color .25s; }
a.escolha__opcao:hover { background: var(--painel-hover); box-shadow: inset 0 0 0 1px #5b8cdc; }
.escolha__rotulo, .escolha__ir { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.escolha__rotulo { color: var(--silver); }
.escolha__nome { font-size: 22px; font-weight: 400; letter-spacing: -0.03em; line-height: 1.15; }
.escolha__sub { color: var(--silver); font-size: 15px; line-height: 1.4; }
.escolha__ir { margin-top: 4px; color: var(--saffron); }
.escolha__ir::after { content: " ↗"; }
.escolha .lojas { margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .escolha[open] { animation: none; } }
html.motion-off .escolha[open] { animation: none; }