/* ===========================================================================
   Camada visual da Almega (pedido do cliente, chamada de 22/10/2026)
   Entra depois da folha do pacote, só na prévia. Escopo: html.alm.
   - topo escuro com foto, como a referência (Taldi);
   - cores da marca (ciano, índigo e o degradê ciano > roxo > magenta do ícone);
   - seções alternando escuro e claro, sem o branco puro;
   - botão de WhatsApp verde, com o ícone, em destaque.
   =========================================================================== */
html.alm {
  --alm-noite: #0c0a36;
  --alm-noite-2: #16125a;
  --alm-indigo: #2b2a8f;
  --alm-ciano: #1fb9e6;
  --alm-ciano-claro: #74d7ec;
  --alm-roxo: #5b3fae;
  --alm-magenta: #b0168f;
  --alm-grad: linear-gradient(90deg, #1fb9e6 0%, #5b3fae 52%, #b0168f 100%);
  --alm-grad-noite: linear-gradient(135deg, #0c0a36 0%, #1a1466 55%, #3a1260 100%);
  --alm-claro-1: #eef6fb;
  --alm-claro-2: #e2eef8;
  --alm-zap: #0e8545;      /* verde do WhatsApp com 4,7:1 sob texto branco (o #25d366 dá 1,98:1) */
  --alm-zap-2: #0b7039;
  --alm-zap-brilho: rgba(37, 211, 102, .45);
  background: var(--alm-noite);
}

/* ---------- base: nada de branco puro no fundo ---------- */
html.alm body, html.alm main { background: var(--alm-claro-1); }
html.alm .faixa--clara { background: var(--alm-claro-1); }
html.alm .faixa--cinza { background: var(--alm-claro-2); }

/* ---------- cabeçalho escuro ---------- */
html.alm .cab {
  background: rgba(12, 10, 54, .94);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
          backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  box-shadow: none;
}
html.alm .cab .nav__link { color: #e8e9ff; }
html.alm .cab .nav__link:hover,
html.alm .cab .nav__item:focus-within > .nav__link { color: #fff; background: rgba(255, 255, 255, .08); }
html.alm .cab .nav__link[aria-current="page"], html.alm .cab .nav__link--ativo { color: var(--alm-ciano-claro); }
html.alm .cab .nav__contato {
  background: var(--alm-grad); color: #fff; border: 0; box-shadow: 0 8px 22px rgba(176, 22, 143, .32);
}
html.alm .cab .nav__contato:hover { filter: brightness(1.08); color: #fff; }
html.alm .cab__botao { color: #fff; border-color: rgba(255, 255, 255, .2); }
html.alm .cab__botao span, html.alm .cab__botao span::before, html.alm .cab__botao span::after { background: #fff; }
@media (max-width: 1079px) {
  html.alm .nav__painel { background: var(--alm-noite); }
  html.alm .nav__painel .nav__link { color: #fff; }
  html.alm .nav__painel .sub a { color: #fff; }
  html.alm .nav__painel .sub small { color: #c9cbf0; }
}
html.alm .abertura { background: var(--alm-noite); }

/* ---------- botões ---------- */
html.alm .bt--zap, html.alm .botao--zap, html.alm a.zap, html.alm .zap {
  background: var(--alm-zap) !important; color: #fff !important; border: 0;
  box-shadow: 0 10px 28px var(--alm-zap-brilho), inset 0 0 0 1px rgba(255, 255, 255, .12) !important;
  font-weight: 700;
}
html.alm .bt--zap span, html.alm .botao--zap span, html.alm a.zap span { color: #fff !important; }
html.alm .bt--zap:hover, html.alm .botao--zap:hover, html.alm a.zap:hover { background: var(--alm-zap-2) !important; color: #fff !important; }
html.alm .bt--zap .ico-zap, html.alm .botao--zap .ico-zap { width: 22px; height: 22px; fill: #fff; flex: none; }
html.alm a.zap .ico-zap { fill: #fff; }
html.alm .heroi-novo .bt--zap, html.alm .fecha .bt--zap, html.alm .faixa-cta .botao--zap {
  padding: 1.05rem 1.7rem; font-size: 1.02rem;
}
html.alm .bt--escuro { background: var(--alm-grad); color: #fff; border: 0; }
html.alm .bt--escuro:hover { filter: brightness(1.08); }

/* ---------- pílulas dos títulos ---------- */
html.alm .pill { border-color: rgba(43, 42, 143, .18); }
html.alm .pill::before { background: var(--alm-grad) !important; }

/* ---------- topo da home: escuro, com foto ---------- */
html.alm .heroi-novo {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--alm-noite) url("/assets/img/almega/topo-home-1920.webp") center right / cover no-repeat;
  color: #fff;
}
@media (max-width: 899px) {
  html.alm .heroi-novo { background-image: url("/assets/img/almega/topo-home-960.webp"); background-position: 70% center; }
}
html.alm .heroi-novo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; animation: none; opacity: 1;
  width: auto; height: auto; border-radius: 0; -webkit-mask-image: none; mask-image: none;
  background:
    linear-gradient(90deg, rgba(12, 10, 54, .96) 0%, rgba(12, 10, 54, .88) 38%, rgba(12, 10, 54, .55) 68%, rgba(12, 10, 54, .35) 100%),
    linear-gradient(180deg, rgba(12, 10, 54, .35) 0%, rgba(12, 10, 54, 0) 30%, rgba(12, 10, 54, .7) 100%);
}
html.alm .heroi-novo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: auto; z-index: 1;
  height: 4px; width: auto; border-radius: 0; animation: none; opacity: 1; transform: none;
  background: var(--alm-grad);
}
@media (max-width: 899px) {
  html.alm .heroi-novo::before { background: linear-gradient(180deg, rgba(12, 10, 54, .78) 0%, rgba(12, 10, 54, .9) 55%, rgba(12, 10, 54, .97) 100%); }
}
html.alm .heroi-novo h1 { color: #fff; }
html.alm .heroi-novo h1 em, html.alm .heroi-novo h1 strong, html.alm .heroi-novo h1 .marca-destaque {
  background: var(--alm-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
html.alm .heroi-novo__sub { color: #dfe2ff; }
html.alm .heroi-novo .pill {
  background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: #fff !important;
}
html.alm .heroi-novo .bt--linha { color: #fff; border-color: rgba(255, 255, 255, .45); background: transparent; }
html.alm .heroi-novo .bt--linha:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
html.alm .heroi-novo__provas { border-color: rgba(255, 255, 255, .14); }
html.alm .heroi-novo__prova strong { color: #fff; }
html.alm .heroi-novo__prova span { color: #c9cbf0; }
html.alm .heroi-novo__prova::after { background: rgba(255, 255, 255, .14); }
html.alm .heroi-novo .bento figure { box-shadow: 0 24px 60px rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .12); }
html.alm .heroi-novo .bento__selo { background: rgba(12, 10, 54, .82); color: #fff; border: 1px solid rgba(255, 255, 255, .16); }
html.alm .heroi-novo .bento__selo .num { background: var(--alm-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.alm .heroi-novo .bento__selo .num-rot { color: #dfe2ff; }

/* ---------- faixa de números: cartão claro sobre o fim do topo ---------- */
html.alm .prova { background: var(--alm-claro-1); }
html.alm .prova .num { background: var(--alm-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.alm .prova .num .un { -webkit-text-fill-color: var(--alm-indigo); color: var(--alm-indigo); }

/* ---------- seções escuras (alternância) ---------- */
html.alm .alm-escura, html.alm .faixa--escura, html.alm .secao--escura {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--alm-grad-noite); color: #fff;
}
html.alm .alm-escura::before, html.alm .faixa--escura::before, html.alm .secao--escura::before {
  content: ""; position: absolute; inset: 0; z-index: -1; animation: none; opacity: 1;
  width: auto; height: auto; border-radius: 0;
  background-image:
    radial-gradient(rgba(116, 215, 236, .16) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(120% 100% at 85% 0%, #000 30%, transparent 80%);
          mask-image: radial-gradient(120% 100% at 85% 0%, #000 30%, transparent 80%);
}
html.alm .alm-escura::after, html.alm .faixa--escura::after, html.alm .secao--escura::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; animation: none;
  inset: auto; top: -30%; right: -15%; width: 60%; height: 120%; left: auto; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(176, 22, 143, .28), transparent 70%);
}
html.alm .alm-escura h2, html.alm .alm-escura h3:not(.ec-cartao__titulo),
html.alm .faixa--escura h2, html.alm .faixa--escura h3,
html.alm .alm-escura .cabsec p, html.alm .faixa--escura p { color: #fff; }
html.alm .alm-escura .cabsec p, html.alm .alm-escura .como__lado p,
html.alm .faixa--escura p { color: #d3d6fb !important; }
html.alm .alm-escura .pill, html.alm .faixa--escura .pill {
  background: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 255, 255, .2) !important; color: #fff !important;
}
html.alm .alm-escura .seta, html.alm .faixa--escura .seta { color: #fff; }
html.alm .alm-escura .bt--linha, html.alm .faixa--escura .bt--linha { color: #fff !important; border-color: rgba(255, 255, 255, .45) !important; }

/* como funciona: passos em cartão claro sobre o escuro */
html.alm #como .como__lado h2 { color: #fff; }
html.alm #como .como__lado p { color: #d3d6fb; }
html.alm #como .passo { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: #fff; }
html.alm #como .passo h3 { color: #fff; }
html.alm #como .passo p { color: #d3d6fb; }
html.alm #como .passo__n { background: var(--alm-grad); color: #fff; border: 0; }
html.alm #como .empilha::before { background: rgba(255, 255, 255, .16); }

/* serviços: cartões translúcidos */
html.alm #servicos .serv { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: #fff; }
html.alm #servicos .serv:hover { background: rgba(255, 255, 255, .12); }
html.alm #servicos .serv__t { color: #fff; }
html.alm #servicos .serv__d { color: #d3d6fb; }
html.alm #servicos .serv__icone { background: var(--alm-grad); color: #fff; }
html.alm #servicos .serv__icone svg { fill: #fff; stroke: #fff; }
html.alm #servicos .serv__seta { color: #fff; border-color: rgba(255, 255, 255, .3); }

/* vídeo */
html.alm .video-bloco h2 { color: #fff; }
html.alm .video-bloco .seta--forte { color: #fff; }

/* fechamento */
html.alm .fecha .fecha__titulo { color: #fff; }
html.alm .fecha .bt--linha { color: #fff !important; }

/* ---------- faixas de chamada no meio da página ---------- */
html.alm .faixa-cta {
  background: var(--alm-grad-noite); color: #fff;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 24px 60px rgba(12, 10, 54, .28);
}
html.alm .faixa-cta::before {
  background: radial-gradient(circle, rgba(31, 185, 230, .35), transparent 68%);
}
html.alm .faixa-cta::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--alm-grad);
}
html.alm .faixa-cta h2 { color: #fff; }
html.alm .faixa-cta p { color: #d3d6fb; }

/* ---------- cartões das seções claras ---------- */
html.alm .ec-cartao, html.alm .mapa-cartao, html.alm .sim__caixa {
  background: #fff; border-color: rgba(43, 42, 143, .1);
  box-shadow: 0 10px 30px rgba(12, 10, 54, .07);
}
html.alm .ec-cartao:hover { border-color: var(--alm-ciano); }

/* ---------- topo das páginas internas ---------- */
html.alm .heroi { background-color: var(--alm-noite); }
html.alm .heroi::before {
  background:
    linear-gradient(90deg, rgba(12, 10, 54, .95) 0%, rgba(12, 10, 54, .82) 42%, rgba(12, 10, 54, .4) 78%, rgba(12, 10, 54, .25) 100%),
    linear-gradient(180deg, rgba(12, 10, 54, .3) 0%, rgba(12, 10, 54, 0) 35%, rgba(12, 10, 54, .75) 100%);
}
html.alm .heroi::after { background: var(--alm-grad); }
html.alm .heroi--sem-foto {
  background:
    radial-gradient(60% 80% at 85% 0%, rgba(176, 22, 143, .3) 0%, transparent 70%),
    radial-gradient(40% 60% at 0% 100%, rgba(31, 185, 230, .2) 0%, transparent 60%),
    var(--alm-noite);
}
html.alm .heroi .selo { background: var(--alm-grad); color: #fff; }

/* ---------- rodapé ---------- */
html.alm .rod { background: #08072a; color: #b8bbe6; }
html.alm .rod a { color: #dfe2ff; }
html.alm .rod a:hover { color: var(--alm-ciano-claro); }
html.alm .rod h2, html.alm .rod .rod__titulo { color: var(--alm-ciano-claro); }
html.alm .rod .rod__texto, html.alm .rod .rod__hora { color: #b8bbe6; }
html.alm .rod .rod__grade { border-bottom-color: rgba(255, 255, 255, .1); }
html.alm .rod .rod__base { color: #9497c8; }
html.alm .rod .rod__contato svg { fill: var(--alm-ciano-claro); }
html.alm .rod .rod__contato .ico-zap { fill: #3ddc84; }
html.alm .rod .redes a { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); }
html.alm .rod .redes svg { fill: #fff; }
html.alm .rod .redes a:hover { background: var(--alm-grad); }

/* destaque em degradê no título do topo (a palavra-chave do h1) */
html.alm .alm-destaque {
  background: linear-gradient(90deg, #4fd0f0 0%, #9a6cf0 50%, #e04bb8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- topo das internas: texto claro sobre o escuro ---------- */
html.alm .heroi { background: var(--alm-grad-noite); color: #fff; }
html.alm .heroi::before {
  background-image: radial-gradient(rgba(116, 215, 236, .16) 1px, transparent 1px) !important;
  background-size: 26px 26px !important;
}
html.alm .heroi::after {
  background: radial-gradient(44% 48% at 80% 30%, rgba(176, 22, 143, .3), transparent 68%) !important;
}
html.alm .heroi h1, html.alm .heroi--interna h1 { color: #fff; }
html.alm .heroi p, html.alm .heroi .heroi__sub { color: #d3d6fb; }
html.alm .heroi .marca-destaque {
  background: linear-gradient(90deg, #4fd0f0 0%, #9a6cf0 50%, #e04bb8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0;
}
html.alm .heroi .selo { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; }
html.alm .heroi .selo::before { background: var(--alm-grad); }
html.alm .heroi .migalhas, html.alm .heroi .migalhas a { color: #c9cbf0; }
html.alm .heroi .migalhas a:hover, html.alm .heroi .migalhas [aria-current="page"] { color: #fff; }
html.alm .heroi .botao--contorno { color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45); }
html.alm .heroi .rotulo { color: #fff !important; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); }
html.alm .heroi .chip { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: #fff; }

/* ---------- seção escura das internas ---------- */
html.alm .secao--escura h2, html.alm .secao--escura h3 { color: #fff; }
html.alm .secao--escura p { color: #d3d6fb !important; }
html.alm .secao--escura .rotulo { background: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 255, 255, .2) !important; color: #fff !important; }
html.alm .secao--escura .cartao h3 { color: var(--alm-indigo); }
html.alm .secao--escura .cartao p { color: #4a4c7a !important; }
html.alm .secao--escura .numeros__num, html.alm .faixa--escura .num { color: #fff; }
html.alm .secao--escura .numeros__rot, html.alm .faixa--escura .num-rot { color: #c9cbf0; }
html.alm .secao--escura .selos strong { color: #fff; }
html.alm .secao--escura .seta, html.alm .secao--escura .seta--forte { color: #fff; }

/* ===========================================================================
   TOPO DA HOME IGUAL AO PRINT DO CLIENTE (22/10/2026)
   Fundo: imagem enviada pelo Matheus em 23/10 (casa com carregador).
   =========================================================================== */
html.alm {
  --alm-grad-bt: linear-gradient(90deg, #12b3f5 0%, #5d6cf2 52%, #c04fe6 100%);
  --alm-grad-txt: linear-gradient(90deg, #19b4f5 0%, #4f7cf4 30%, #8b4fec 62%, #c04fe6 100%);
}

/* cabeçalho transparente sobre a foto; escuro depois de rolar */
html.alm body:not(.rolou) .cab {
  background: linear-gradient(180deg, rgba(5, 9, 28, .55), rgba(5, 9, 28, 0)) !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 1px solid rgba(255, 255, 255, .1); box-shadow: none !important;
}
html.alm body:not(.rolou) .cab::before { opacity: 0 !important; }
html.alm body.rolou .cab { background: rgba(7, 10, 32, .94) !important; border-bottom: 1px solid rgba(255, 255, 255, .08); }
html.alm .cab .nav__link { color: #fff; font-weight: 600; font-size: .9rem; }
html.alm .cab .nav__lista::before { display: none; }
@media (min-width: 1080px) {
  html.alm .cab__linha { height: 86px; }
  html.alm body.rolou .cab__linha { height: 68px; }
  html.alm .cab__logo { width: clamp(150px, 13vw, 190px); }
  html.alm body.rolou .cab__logo { width: clamp(130px, 11vw, 160px); }
  html.alm .nav__lista { gap: .6rem; }
  html.alm .cab .nav__contato {
    margin-left: 4.5rem; padding: .95rem 1.45rem; border-radius: 999px;
    background: var(--alm-grad-bt) !important; color: #fff !important; box-shadow: 0 10px 28px rgba(140, 80, 230, .35);
    font-size: .74rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  }
}
html.alm .alm-seta { width: 14px; height: 14px; flex: none; }

/* o bloco */
html.alm .alm-topo {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  background: #070b22;
  padding-top: calc(var(--altura-cab) + clamp(2.5rem, 4.4vw, 4.2rem));
}
html.alm .alm-topo__fundo { position: absolute; inset: 0; z-index: -2; }
html.alm .alm-topo__fundo img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 40%; }
html.alm .alm-topo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(6, 10, 30, .88) 0%, rgba(6, 10, 30, .66) 30%, rgba(6, 10, 30, .18) 52%, rgba(6, 10, 30, 0) 70%),
    linear-gradient(180deg, rgba(6, 10, 30, .55) 0%, rgba(6, 10, 30, 0) 22%, rgba(6, 10, 30, 0) 70%, rgba(6, 10, 30, .55) 100%);
}
html.alm .alm-topo__texto { max-width: 33rem; }
html.alm .alm-topo__olho {
  display: flex; align-items: center; gap: .75rem; margin: 0 0 1.1rem;
  font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #fff;
}
html.alm .alm-topo__olho::after {
  content: ""; width: 10rem; height: 1.5px; border-radius: 2px;
  background: linear-gradient(90deg, #3b6df5, #a54fe8);
}
html.alm .alm-topo h1 {
  margin: 0 0 1.1rem; color: #fff;
  font-size: clamp(2.35rem, 3.85vw, 3.7rem); line-height: 1.02; font-weight: 800; letter-spacing: -.03em;
  text-wrap: initial;
}
html.alm .alm-topo h1 .alm-destaque {
  background: var(--alm-grad-txt); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
html.alm .alm-topo__sub { margin: 0 0 1.75rem; max-width: 27.5rem; font-size: 1.02rem; line-height: 1.45; color: #eef0fb; }
html.alm .alm-topo__acoes { display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: center; }
html.alm .alm-bt {
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  height: 50px; padding: 0 1.9rem; border-radius: 999px; text-decoration: none; white-space: nowrap;
  font-size: .8rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #fff;
  transition: transform .15s ease, filter .15s ease, background .15s ease;
}
html.alm .alm-bt:hover { transform: translateY(-2px); }
html.alm .alm-bt--grad { background: var(--alm-grad-bt); box-shadow: 0 12px 30px rgba(110, 90, 240, .35); }
html.alm .alm-bt--grad:hover { filter: brightness(1.08); color: #fff; }
html.alm .alm-bt--linha { padding: 0 1.6rem 0 .65rem; border: 1.5px solid rgba(255, 255, 255, .8); background: rgba(6, 10, 30, .15); }
html.alm .alm-bt--linha:hover { background: rgba(255, 255, 255, .1); color: #fff; }
html.alm .alm-play {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid #fff;
}
html.alm .alm-play svg { width: 12px; height: 12px; margin-left: 2px; fill: #fff; }

/* a linha de ícones */
html.alm .alm-topo__icones {
  list-style: none; margin: 2.1rem 0 0; padding: 0 0 2.2rem;
  display: flex; flex-wrap: wrap; align-items: center; max-width: 47rem;
}
html.alm .alm-topo__icones li {
  display: flex; align-items: center; gap: .85rem; padding: 0 1.25rem;
  font-size: .78rem; line-height: 1.35; font-weight: 500; color: #fff;
}
html.alm .alm-topo__icones li:first-child { padding-left: 0; }
html.alm .alm-topo__icones li + li { border-left: 1px solid rgba(255, 255, 255, .28); }
html.alm .alm-topo__icones svg { width: 34px; height: 34px; flex: none; fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* celular: imagem recortada, botões lado a lado e os ícones numa faixa escura */
@media (max-width: 719px) {
  html.alm .alm-topo { padding-top: calc(var(--altura-cab) + 2.2rem); }
  html.alm .alm-topo__fundo { bottom: auto; height: calc(100% - 9.5rem); }
  html.alm .alm-topo__fundo img { object-position: 62% 50%; }
  html.alm .alm-topo::before {
    bottom: auto; height: calc(100% - 9.5rem);
    background: linear-gradient(90deg, rgba(6, 10, 30, .82) 0%, rgba(6, 10, 30, .5) 55%, rgba(6, 10, 30, .15) 100%),
                linear-gradient(180deg, rgba(6, 10, 30, .5) 0%, rgba(6, 10, 30, 0) 30%, rgba(6, 10, 30, .2) 75%, #070b22 100%);
  }
  html.alm .alm-quebra { display: none; }
  html.alm .alm-topo h1 { font-size: 2.55rem; }
  html.alm .alm-topo__olho { font-size: .72rem; letter-spacing: .08em; }
  html.alm .alm-topo__olho::after { width: 2.5rem; }
  html.alm .alm-topo__sub { font-size: .98rem; max-width: 21rem; }
  html.alm .alm-topo__acoes { gap: .6rem; margin-bottom: 3.5rem; }
  html.alm .alm-bt { height: 48px; padding: 0 1.2rem; font-size: .74rem; }
  html.alm .alm-bt--linha { border-color: transparent; background: none; padding-left: 0; }
  html.alm .alm-topo__icones {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem .5rem; max-width: none;
    margin: 0 calc(var(--lateral) * -1); padding: 1.4rem var(--lateral) 1.6rem; background: #070b22;
    border-top: 1px solid rgba(255, 255, 255, .08);
  }
  html.alm .alm-topo__icones li { padding: 0; border: 0 !important; gap: .6rem; font-size: .74rem; }
  html.alm .alm-topo__icones svg { width: 28px; height: 28px; }
}

/* ajuste fino contra o print (QA de 23/10/2026) */
html.alm { --largura: 1260px; }
html.alm .alm-topo { padding-top: calc(var(--altura-cab) + clamp(2rem, 3.6vw, 3.6rem)); }
html.alm .alm-topo__texto { max-width: 42rem; }
html.alm .alm-topo h1 { font-size: clamp(2.35rem, 3.55vw, 3.55rem); margin-bottom: .95rem; }
html.alm .alm-topo__sub { margin-bottom: 1.1rem; font-size: 1.04rem; color: #fff; }
@media (min-width: 720px) {
  html.alm .alm-topo h1 { white-space: nowrap; }
}
@media (max-width: 719px) {
  html.alm .alm-topo__fundo img { object-position: 34% 50%; }
  html.alm .alm-topo::before {
    background: linear-gradient(90deg, rgba(6, 10, 30, .8) 0%, rgba(6, 10, 30, .45) 60%, rgba(6, 10, 30, .1) 100%),
                linear-gradient(180deg, rgba(6, 10, 30, .45) 0%, rgba(6, 10, 30, 0) 30%, rgba(6, 10, 30, .25) 75%, #070b22 100%);
  }
  html.alm .alm-topo__sub { margin-bottom: 1.4rem; }
}
/* celular: a foto aparece inteira, numa faixa entre os botões e os ícones */
@media (max-width: 719px) {
  html.alm .alm-topo__fundo, html.alm .alm-topo::before { top: auto; bottom: 9.5rem; height: 300px; }
  html.alm .alm-topo__fundo img { object-position: 40% 55%; }
  html.alm .alm-topo::before {
    background: linear-gradient(180deg, #070b22 0%, rgba(7, 11, 34, .35) 28%, rgba(7, 11, 34, 0) 55%, rgba(7, 11, 34, .55) 100%);
  }
  html.alm .alm-topo__acoes { margin-bottom: 250px; }
  html.alm .alm-topo__icones { height: 9.5rem; align-content: center; padding-block: 0; }
}

/* QA de 23/10: a variável do tema acompanha o cabeçalho de 86 px, e a foto do topo
   das internas fica centrada na área visível, sem encostar no cabeçalho */
@media (min-width: 1080px) {
  html.alm { --altura-cab: 86px; }
}
@media (min-width: 980px) {
  html.alm .heroi--interna { min-height: calc(30rem + var(--altura-cab)); }
  html.alm .heroi--interna .heroi__foto { top: calc(50% + var(--altura-cab) / 2); }
}

/* quem somos da home: foto da equipe inteira, em 4:3 também no computador */
@media (min-width: 960px) {
  html.alm .quem__foto { aspect-ratio: 4 / 3; min-height: 0; max-height: none; align-self: center; }
}

/* QA de 23/10: degradê dos botões com branco legível (3,4:1 no ciano, 4,5:1 ou mais no resto) */
html.alm {
  --alm-grad-bt: linear-gradient(90deg, #0f8fd8 0%, #5a5ee8 50%, #a944d8 100%);
}
html.alm .bt--escuro, html.alm #como .passo__n { background: var(--alm-grad-bt) !important; color: #fff !important; }
html.alm .bt--escuro .bt__rolo span, html.alm .bt--escuro span { color: #fff !important; }
html.alm #servicos .serv__n { color: #b9c4ff; }
html.alm .servico__num { color: #0a6fae; }
html.alm .faq__num { color: #0a6fae; }

/* QA de 23/10: cabeçalho transparente só sobre topo escuro (home e internas com .heroi);
   na página da obra e na 404, que abrem em fundo claro, ele fica escuro desde o início */
html.alm body:not(.rolou):not(:has(main > .alm-topo:first-child, main > .heroi:first-child)) .cab {
  background: rgba(7, 10, 32, .96) !important;
}
html.alm main > .obra-topo:first-child { padding-top: calc(var(--altura-cab) + clamp(1.75rem, 3vw, 2.75rem)); }
html.alm main > .erro:first-child { padding-top: calc(var(--altura-cab) + clamp(2.5rem, 6vw, 4.5rem)); }

/* QA de 23/10: o fio do passo a passo corre atrás dos cartões (opacos) e só aparece
   nos vãos; no celular ele passa pelo centro do número */
html.alm #como .passo { background: #1f1b5c; border-color: rgba(255, 255, 255, .14); }
html.alm #como .empilha::before { background: rgba(255, 255, 255, .22); }
html.alm #como .empilha::after { background: var(--alm-grad-bt); }
@media (max-width: 719px) {
  html.alm #como .empilha::before, html.alm #como .empilha::after { left: calc(1.15rem + 1.15rem - 1px); }
}

/* 23/10, pedido do Felipe (dono): fundo do topo é a usina, foto de dia; mais sombra do lado do texto */
html.alm .alm-topo__fundo img { object-position: 50% 35%; filter: brightness(.8) saturate(1.05); }
html.alm .alm-topo::before {
  background:
    linear-gradient(90deg, rgba(6, 10, 30, .94) 0%, rgba(6, 10, 30, .86) 34%, rgba(6, 10, 30, .5) 55%, rgba(6, 10, 30, .12) 75%, rgba(6, 10, 30, 0) 100%),
    linear-gradient(180deg, rgba(6, 10, 30, .6) 0%, rgba(6, 10, 30, 0) 24%, rgba(6, 10, 30, 0) 68%, rgba(6, 10, 30, .7) 100%);
}
@media (max-width: 719px) {
  html.alm .alm-topo__fundo img { object-position: 50% 50%; filter: brightness(.85); }
  html.alm .alm-topo::before {
    background: linear-gradient(180deg, #070b22 0%, rgba(7, 11, 34, .35) 28%, rgba(7, 11, 34, 0) 55%, rgba(7, 11, 34, .55) 100%);
  }
}