/* =========================================================================
   institucional.html — TEMA CLARO ESPECÍFICO DESTA PÁGINA
   (Parte XXVI.8 do MESTRE2X0.md)

   Arquivo próprio, carregado DEPOIS de styles.css só por esta página —
   nunca editar styles.css para isto. O resto do site (index.html, 404.html)
   é intencionalmente escuro em qualquer esquema do sistema (V.2 do
   MESTRE2X0.md); esta página é a única exceção deliberada, pedida pelo
   cliente, inspirada na lógica de cor/tipografia/forma do design system
   "Perk" (styles.refero.design/style/75c06591-...) — a LÓGICA (uma cor de
   ação sobre um canvas quase-neutro, zero sombra, contraste tonal em vez de
   elevação, tipografia carregando o peso visual), nunca os hex/pixels
   literais daquele sistema. Como cada página é um documento HTML separado,
   redefinir :root aqui SÓ afeta institucional.html — nenhum risco de
   vazamento para as outras páginas, mesmo sem nenhum seletor de escopo. */

:root {
  /* --canvas continua uma cor SÓLIDA (não o degradê em si): é usada como
     var(--canvas) em lugares que esperam uma cor válida, não um gradiente
     (.skip-link usa como color:, não só como background). O degradê real
     do fundo da página é a regra own de `body` logo abaixo. */
  --canvas: #f5f7fa;
  --surface-1: #ffffff;
  --surface-2: #eef2f8;
  --border-hair: rgba(15, 23, 42, 0.08);
  --border-strong: rgba(15, 23, 42, 0.16);

  --text-primary: #12141a;
  --text-secondary: #4b5568;
  --text-tertiary: #808a9b;

  /* --accent-from/--accent-to/--accent-solid/--gradient-accent/--shadow-cta
     NÃO são redefinidos: é a mesma (e única) cor de marca do resto do site
     (V.1 do MESTRE2X0.md — "uma cor saturada, um único trabalho"), preto
     sobre canvas claro ou claro sobre canvas escuro é sempre a mesma cor. */

  /* --surface-2 e --icon-color acima/abaixo não são consumidos por nenhuma
     classe usada nesta versão da página (não usa .card-icon nem
     .commitment-item) — mantidos mesmo assim porque este bloco é o tema
     CLARO completo do conjunto de tokens de styles.css, não só dos que o
     HTML de hoje toca. Se um componente que os usa (.card-icon, um botão
     de solução etc.) for adicionado aqui depois, já herda um valor correto
     para fundo claro em vez de herdar por acidente o tom calibrado para
     fundo escuro do arquivo base. */
  --icon-color: #2d6bff;
}

/* :root, não html — precisa da MESMA especificidade de `:root` em
   styles.css (`@media (prefers-color-scheme:light){ :root{color-scheme:
   dark} }` e o `html{color-scheme:dark}` base) para realmente vencer em
   QUALQUER preferência de esquema do sistema operacional: um seletor
   `html{...}` aqui perderia para `:root{...}` por especificidade, mesmo
   carregando depois. Esta página é clara de propósito, sempre. */
:root { color-scheme: light; }

/* Mesma reconstrução que styles.css já faz para --border-hair/--border-
   strong/--text-secondary sob prefers-contrast:more, só com os valores
   escuros-sobre-claro corretos — sem isto, quem pede mais contraste
   perderia o reforço (o :root incondicional acima venceria mesmo com a
   preferência ativa, por vir depois no documento). */
@media (prefers-contrast: more) {
  :root {
    --border-hair: rgba(15, 23, 42, 0.32);
    --border-strong: rgba(15, 23, 42, 0.55);
    --text-secondary: #2c3444;
  }
}

/* Degradê branco → off-white pedido pelo cliente (os dois tons já
   documentados como paleta oficial da marca em DESIGN.md, "Branco Puro"/
   "Off-White" — nenhum hex novo inventado). Direção diagonal sutil, não
   vertical dura: a mudança de tom fica perceptível ao rolar sem nunca
   parecer uma faixa de cor com corte reto. */
body {
  background: linear-gradient(160deg, #ffffff 0%, #ffffff 35%, #f5f7fa 100%);
}

/* .site-header (styles.css) usa rgba(11,13,16,...) fixo — calibrado para
   o canvas escuro do resto do site. Reescrito aqui para o mesmo efeito
   (vidro fosco) sobre um canvas claro. */
.site-header {
  background: rgba(255, 255, 255, 0.78);
}
@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--canvas); }
}

/* .btn-outline:hover (styles.css) clareia com rgba(255,255,255,...) — a
   mesma lógica em negativo aqui (escurece de leve em vez de clarear). */
@media (hover: hover) and (pointer: fine) {
  .btn-outline:hover {
    background: rgba(15, 23, 42, 0.045);
    border-color: rgba(15, 23, 42, 0.35);
  }
}

/* =========================================================================
   Componentes exclusivos desta página. O resto (.section, .eyebrow, .lead,
   .card-icon, .commitment-list/.commitment-item, .btn/.btn-group, .brand,
   .nav-*, .footer-*) vem de styles.css e já se comporta corretamente com
   os tokens redefinidos acima — nenhuma cópia de regra, só o que não
   existia. Nenhuma seção usa .section-glow (o brilho radial azul/violeta
   foi pensado para canvas escuro): o próprio degradê do body já cumpre o
   papel de "textura ambiente" desta página. */

.about-hero { padding-top: clamp(2rem, 6vw, 4rem); position: relative; isolation: isolate; }

/* Vídeo de fundo do hero a 75% de opacidade. Dissolve na base para não
   cortar em linha reta contra a próxima seção. */
.about-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
}
.about-hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
}
/* Véu claro por cima do vídeo: mantém título/texto escuros legíveis em
   qualquer frame (o vídeo continua a 75% de opacidade por baixo). Mais
   forte na coluna do texto (esquerda), mais leve onde ficam os cases. */
.about-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(245, 247, 250, 0.92) 0%, rgba(245, 247, 250, 0.8) 40%, rgba(245, 247, 250, 0.35) 100%);
}
@media (max-width: 899.98px) {
  .about-hero-bg::after { background: rgba(245, 247, 250, 0.88); }
}
.about-hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.75rem);
  line-height: 1.04;
  max-width: 18ch;
}
.about-hero .lead { margin-top: 24px; max-width: 42rem; }

/* ---------- Hero: layout de 2 colunas, inspirado num print enviado pelo
   cliente (agência mostrando telas do próprio trabalho em cascata saindo
   de um notebook) — a lógica de composição (texto+lista de recursos à
   esquerda, prova visual em camadas à direita), não os pixels literais
   daquela imagem. Nenhum avatar/estatística inventados (DESIGN.md,
   "Conteúdo"): a "prova visual" aqui são os 2 cases reais que também
   aparecem em "Projetos reais", não uma métrica fabricada. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(320px, 460px) 1fr;
  gap: clamp(32px, 6vw, 64px);
  /* start, não center: a coluna de texto é bem mais alta que a cascata
     (título + lead + lista de recursos) — centralizar a cascata deixava
     um vão vazio grande acima E abaixo dela, sensação de "buraco" logo
     depois do hero (reportado pelo cliente, visto em screenshot real).
     Alinhada ao topo, ela some do meio da coluna de texto (a "moldura"
     natural onde uma imagem de hero costuma ficar) sem sobrar vão. */
  align-items: start;
}
.hero-features {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 20px;
}
.hero-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}
.hero-feature-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hero-feature-icon svg { width: 15px; height: 15px; stroke: var(--icon-color); }

/* Cascata de 2 cases reais, sobrepostos e levemente rotacionados —
   altura explícita no wrapper (não aspect-ratio) porque os itens são
   position:absolute (não ocupam espaço próprio, então o wrapper não
   ganharia altura nenhuma sozinho) e, como item de grid, aspect-ratio
   sozinho não é confiável combinado com `align-items` do container
   (testado com screenshot real: o wrapper esticava por engano). */
.hero-cascade {
  position: relative;
  width: 100%;
  max-width: 540px;
  height: clamp(320px, 36vw, 460px);
  margin-inline: auto;
  margin-top: clamp(4px, 1vw, 12px);
}
.hero-cascade-item {
  display: block;
  position: absolute;
  /* Largura E altura explícitas (não só width + aspect-ratio no <img>):
     testado com screenshot real e o <img> ignorava aspect-ratio dentro
     de um ancestral position:absolute, esticando pro alto (retrato) em
     vez de manter a proporção 8:5 da foto. Com altura fixa aqui, o
     object-fit:cover do <img> sempre tem uma caixa 8:5 de verdade pra
     cortar, não importa o que aconteça acima na cadeia de posicionamento. */
  width: 78%;
  height: 68%;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-hair);
  background: var(--surface-1);
  box-shadow: 0 24px 48px -16px rgba(15, 23, 42, 0.28);
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}
.hero-cascade-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-cascade-item--back { top: 0; right: 0; transform: rotate(5deg); z-index: 1; }
.hero-cascade-item--front { bottom: 0; left: 0; transform: rotate(-4deg); z-index: 2; }
@media (hover: hover) and (pointer: fine) {
  .hero-cascade-item:hover {
    transform: rotate(0deg) scale(1.03);
    z-index: 3;
    box-shadow: 0 32px 64px -16px rgba(15, 23, 42, 0.35);
  }
}
@media not all /* reduzir movimento IGNORADO de propósito (decisão do cliente) */ {
  .hero-cascade-item { transition: none; }
}

@media (max-width: 767.98px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-features { grid-template-columns: 1fr; }
  .hero-cascade { margin-top: 40px; }
}

/* ---------- Faixa técnica escura: "produto real + selo de práticas" ----------
   Único trecho ESCURO desta página clara de propósito — a mesma ideia de
   "dark island" já citada na nota de proveniência do Perk (superfície rara
   invertida), não uma contradição do tema claro da página. Inspirado num
   segundo print do cliente (SaaS enterprise: notebook com o produto,
   card de destaque flutuando, selo de conformidade no canto). VIRA não
   tem certificação formal nenhuma pra mostrar (SOC2 etc. não existem
   aqui) — o selo mostra os PADRÕES seguidos (OWASP/WCAG/Web Vitals), não
   uma certificação que não existe (regra de honestidade de DESIGN.md
   aplicada a este print também, não só ao dos cases). */
.device-laptop { max-width: 560px; margin-inline: auto; }
.device-screen {
  background: #1a1d24;
  border-radius: 14px 14px 4px 4px;
  padding: 10px 10px 14px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5);
}
.device-screen::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3a3f4a;
  margin: 0 auto 8px;
}
.device-screen img { display: block; width: 100%; border-radius: 4px; aspect-ratio: 8 / 5; object-fit: cover; object-position: top; }
/* Mockup do Pack de artes (perfil de Instagram 9:16): height:auto anula o
   atributo height do <img> (que esticava a imagem) e o recorte 3:4 no topo
   mostra perfil, destaques e as primeiras fileiras de posts. */
.quality-band-device .device-screen img { height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; }
.device-base {
  height: 14px;
  margin-inline: 6%;
  background: linear-gradient(180deg, #d7dbe3, #b9c0cc);
  border-radius: 0 0 10px 10px;
}

/* padding-block:0 anula o padding-block que .section já aplica no
   próprio <section> (var(--section-py), styles.css) — sem isto, duas
   instâncias de .quality-band lado a lado (Pack de artes → Cardápio
   digital, mesmo fundo #12141a das duas) somavam o padding de baixo de
   uma com o padding de cima da outra, MAIS o padding-block redundante de
   .quality-band-inner logo abaixo, e criavam um vão escuro enorme e sem
   nenhum conteúdo entre as duas (reportado pelo cliente via screenshot,
   30/09/2026). .quality-band-inner sozinho já é generoso o suficiente
   pro espaçamento vertical de uma instância isolada também. */
.quality-band { background: #12141a; color: #ffffff; overflow: hidden; padding-block: 0; }
.quality-band-inner {
  padding-block: clamp(4rem, 8vw, 7rem);
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: clamp(40px, 6vw, 64px);
  align-items: center;
}
/* Costura entre duas .quality-band grudadas (Pack de artes → Cardápio
   digital, pedido do cliente, 30/09/2026 v2: o corte da XXVI.15 ainda
   deixava um vão perceptível demais na captura de tela). Reduz só o
   padding QUE FICA NA COSTURA — bottom da primeira, top da segunda —
   escopado por seletor de irmão adjacente, então nenhuma outra seção
   (nem uma .quality-band isolada, sem outra colada embaixo) é afetada. */
.quality-band:has(+ .quality-band) .quality-band-inner { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.quality-band + .quality-band .quality-band-inner { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.quality-band .eyebrow { color: rgba(255, 255, 255, 0.6); }
.quality-band .eyebrow::before,
.quality-band .eyebrow::after { color: var(--accent-solid); }
.quality-band h2 { color: #ffffff; font-size: clamp(1.75rem, 3.4vw, 2.5rem); margin-top: 8px; }
.quality-band .lead { color: rgba(255, 255, 255, 0.7); margin-top: 16px; }

.chip-row { display: flex; gap: 10px; flex-wrap: wrap; }
.chip-rows { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #ffffff;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-solid); flex-shrink: 0; }

.quality-band-device { position: relative; }
.quality-callout {
  position: absolute;
  top: 6%;
  right: 2%;
  max-width: 230px;
  background: var(--gradient-accent);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: 0 20px 40px -12px rgba(45, 107, 255, 0.45);
}
.quality-callout h3 { color: #ffffff; font-size: 0.9375rem; margin-bottom: 10px; }
.quality-callout-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.quality-callout-tags span {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-pill);
  color: #ffffff;
}
.quality-standards-badge {
  position: absolute;
  bottom: 2%;
  left: -2%;
  background: #ffffff;
  color: var(--text-primary);
  border-radius: var(--radius-lg);
  padding: 12px 18px;
  box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.35);
}
.quality-standards-badge p { font-size: 0.8125rem; font-weight: 700; margin-bottom: 2px; }
.quality-standards-badge .fine { font-size: 0.75rem; color: var(--text-secondary); }

@media (max-width: 767.98px) {
  .quality-band-inner { grid-template-columns: 1fr; }
  .quality-band-device { margin-top: 56px; }
  .quality-callout { position: static; max-width: none; margin-top: 20px; }
  .quality-standards-badge { position: static; display: inline-block; margin-top: 16px; }
}

.cardapio-cta { margin-top: 28px; }

/* Fundo quase transparente, atrás do conteúdo (pedido do cliente,
   30/09/2026, versão 2 — trocou o carrossel de fotos de referência por
   um estilo autoral, sem risco de licenciamento). Puro CSS, sem imagem
   nenhuma: anel de prato (dois círculos concêntricos, ecoando o prato
   centralizado das referências de fine dining), dois brilhos radiais na
   paleta de marca com deriva lenta (o clima "luz quente de restaurante"
   das referências, sem foto de comida), e uma grade fina de pontos. */
.cardapio-band { position: relative; }
.cardapio-band .quality-band-inner { position: relative; z-index: 1; }
.cardapio-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

.cardapio-bg-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.3;
}

.cardapio-bg-glow {
  position: absolute;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.22;
  animation: cardapio-glow-drift 18s ease-in-out infinite;
}
.cardapio-bg-glow-a { top: -140px; right: -60px; background: radial-gradient(circle, #ff9f43, transparent 70%); }
.cardapio-bg-glow-b {
  bottom: -160px;
  left: -100px;
  background: radial-gradient(circle, var(--accent-solid), transparent 70%);
  animation-delay: -9s;
}

@keyframes cardapio-glow-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(26px, -18px) scale(1.08); }
}

/* Anel de prato: só bordas finas, nunca preenchido, pra ficar decorativo
   e nunca competir visualmente com o .device-laptop de verdade ao lado. */
.cardapio-bg-plate {
  position: absolute;
  top: 50%;
  right: 4%;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transform: translateY(-50%);
}
.cardapio-bg-plate::before {
  content: "";
  position: absolute;
  inset: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

@media (max-width: 767.98px) {
  .cardapio-bg-plate { display: none; }
}

@media not all /* reduzir movimento IGNORADO de propósito (decisão do cliente) */ {
  .cardapio-bg-glow { animation: none; }
}

/* ---------- "Projetos reais": galeria com filtro, preparada pra crescer ----------
   Reaproveita .case-card/.case-thumb/.case-body/.tag de styles.css sem
   alteração nenhuma: são 100% orientados a token (--surface-1, --border-
   hair, --text-secondary, --icon-color), nada fixo para canvas escuro —
   só precisavam de uma grade estática (não o carrossel em loop de
   #cases .grid, específico da HOME) para funcionar aqui. auto-fill
   escala sozinho conforme mais cases entram, sem precisar de ajuste de
   número de colunas — e, ao contrário de auto-fit, mantém as colunas
   vazias quando o filtro deixa 1–2 cards, então eles não esticam até a
   largura toda e a proporção do card não muda. */
.about-cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}
.gallery-filter {
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-hair);
  background: var(--surface-1);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.gallery-filter.is-active { background: var(--gradient-accent); border-color: transparent; color: #ffffff; }
@media (hover: hover) and (pointer: fine) {
  .gallery-filter:not(.is-active):hover { border-color: var(--border-strong); color: var(--text-primary); }
}
.gallery-item[hidden] { display: none; }
.gallery-empty { color: var(--text-secondary); font-size: 0.9375rem; padding-block: 12px; }

/* ---------- "Monte seu plano": painel dashboard de seleção de serviços ----------
   Substitui a timeline (Parte XXVI.6 v8, removida). Lista de .plan-toggle
   (um botão por serviço real, mesmos 6 de index.html#contato) + um painel
   .plan-summary fixo (sticky) ao lado, atualizado por JS em tempo real a
   cada clique (assets/js/main.js, bloco ".plan-builder"). Sem percentual
   de desconto fixo em lugar nenhum (pedido do cliente) — só o texto
   genérico em .plan-summary-note.

   Versão compacta (pedido do cliente, 30/09/2026: os 6 cards + 30
   subitens em coluna única, cada um com descrição de duas linhas,
   ficavam "extenso e cansativo de ler"). Os 6 serviços agora ocupam uma
   grade de 2 colunas (metade da altura de antes) em vez de empilhados
   um embaixo do outro; `.plan-item:has(.plan-toggle.is-active)` faz o
   card ativo ocupar a linha inteira (`grid-column:1/-1`) só quando
   expande, sem precisar de JS extra pra isso — o CSS reage sozinho ao
   estado que o JS já controla em `.plan-toggle.is-active`. */
.plan-builder {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  align-items: start;
}
.plan-builder-services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  align-items: start;
}
@media (max-width: 767.98px) {
  .plan-builder-services { grid-template-columns: 1fr; }
}

.plan-item { display: flex; flex-direction: column; min-width: 0; }
.plan-item:has(.plan-toggle.is-active) { grid-column: 1 / -1; }

.plan-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-hair);
  background: var(--surface-1);
  cursor: pointer;
  transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .plan-toggle:not(.is-active):hover { border-color: var(--border-strong); }
}
.plan-toggle.is-active {
  border-color: var(--accent-solid);
  background: linear-gradient(0deg, rgba(79, 102, 255, 0.06), rgba(79, 102, 255, 0.06)), var(--surface-1);
}

.plan-toggle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  flex-shrink: 0;
  background: var(--surface-2);
  color: var(--text-secondary);
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.plan-toggle-icon svg { width: 17px; height: 17px; }
.plan-toggle.is-active .plan-toggle-icon { background: var(--gradient-accent); color: #ffffff; }

.plan-toggle-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.plan-toggle-info strong { font-size: 0.8438rem; color: var(--text-primary); }
.plan-toggle-info span { font-size: 0.75rem; color: var(--text-secondary); }

/* Switch estilo iOS: bolinha desliza via ::after quando .is-active entra
   no .plan-toggle pai (nenhum <input> real — o próprio <button> guarda o
   estado em aria-pressed/.is-active, JS cuida do resto). */
.plan-toggle-switch {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: var(--border-strong);
  flex-shrink: 0;
  transition: background 160ms var(--ease-out);
}
.plan-toggle-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 160ms var(--ease-out);
}
.plan-toggle.is-active .plan-toggle-switch { background: var(--gradient-accent); }
.plan-toggle.is-active .plan-toggle-switch::after { transform: translateX(14px); }

/* ---------- Subitens por serviço (pedido do cliente, 30/09/2026) ----------
   .plan-item envolve cada .plan-toggle + seu .plan-sub (grupo de 5
   .plan-sub-toggle, ocultos via [hidden] até o serviço-pai ser ativado).
   Viraram chips compactos (só o nome curto, sem descrição visível — a
   descrição completa continua acessível via title/aria-label pra quem
   passa o mouse ou usa leitor de tela) em vez de linhas cheias com duas
   linhas de texto cada: 5 chips ocupam 1-2 linhas quebráveis, não 5
   blocos empilhados, é o maior corte de "peso de leitura" da seção. */
.plan-sub {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
/* display:flex acima só vale quando NÃO tem [hidden] — CSS de autor
   normalmente vence a regra padrão do navegador pro atributo hidden
   (mesmo motivo do .gallery-item[hidden] logo acima nesta folha). */
.plan-sub[hidden] { display: none; }

.plan-sub-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px 6px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-hair);
  background: var(--surface-2);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.plan-sub-toggle::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-strong);
  flex-shrink: 0;
  transition: background 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .plan-sub-toggle:not(.is-active):hover { border-color: var(--border-strong); color: var(--text-primary); }
}
.plan-sub-toggle.is-active { background: var(--gradient-accent); border-color: transparent; color: #ffffff; }
.plan-sub-toggle.is-active::before { background: #ffffff; }

.plan-summary-sublist { margin: 4px 0 0 16px; display: flex; flex-direction: column; gap: 4px; }
.plan-summary-sublist li {
  font-size: 0.75rem;
  color: var(--text-secondary);
  padding-left: 14px;
  position: relative;
}
.plan-summary-sublist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border-strong);
}

.plan-summary {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  background: var(--surface-1);
  border: 1px solid var(--border-hair);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.plan-summary-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.plan-summary-count {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 6px;
}
.plan-summary-count span { color: var(--accent-solid); }
.plan-summary-list { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.plan-summary-list li { font-size: 0.8125rem; color: var(--text-primary); padding-left: 16px; position: relative; }
.plan-summary-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-solid);
}
.plan-summary-list .plan-summary-empty { color: var(--text-tertiary); font-style: italic; }
.plan-summary-list .plan-summary-empty::before { display: none; }
.plan-summary-note {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--border-hair);
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.plan-summary-cta { margin-top: 18px; width: 100%; }

@media (max-width: 767.98px) {
  .plan-builder { grid-template-columns: 1fr; }
  .plan-summary { position: static; }
}

/* ---------- "Como trabalhamos": card central + 4 passos em ícone ----------
   (Parte XXVI.6 v8 do MESTRE2X0.md) Mesma composição de um print de
   referência do cliente (arte de divulgação com foto de equipe) — sem a
   foto (a VIRA não tem uma real pra usar), substituída por um brilho
   suave da própria cor de marca atrás do card. */
.process-card-band { position: relative; overflow: hidden; }
.process-card-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 28%, rgba(45, 107, 255, 0.12) 0%, transparent 65%);
  pointer-events: none;
}
.process-card {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  background: var(--surface-1);
  border: 1px solid var(--border-hair);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 6vw, 56px) clamp(24px, 5vw, 48px);
  box-shadow: 0 40px 80px -32px rgba(15, 23, 42, 0.18);
}
.process-card .eyebrow { justify-content: center; }
.process-card-title { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-top: 8px; }
.process-card-title span { color: var(--accent-solid); }
.process-card .lead { margin: 16px auto 0; max-width: 46rem; }

.process-card-steps {
  margin-top: clamp(28px, 5vw, 40px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.process-card-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
}
.process-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.process-card-icon svg { width: 22px; height: 22px; stroke: var(--icon-color); }

.process-card-cta { margin-top: clamp(28px, 5vw, 40px); }

.process-card-contact {
  margin-top: clamp(24px, 4vw, 32px);
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--border-hair);
  display: flex;
  justify-content: center;
  gap: clamp(16px, 4vw, 32px);
  flex-wrap: wrap;
}
.process-card-contact a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  transition: color 160ms var(--ease-out);
}
.process-card-contact a svg { width: 16px; height: 16px; stroke: var(--icon-color); flex-shrink: 0; }
@media (hover: hover) and (pointer: fine) {
  .process-card-contact a:hover { color: var(--text-primary); }
}

@media (max-width: 767.98px) {
  .process-card-steps { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Faixa de comparação: "pronto" × "sob medida" ----------
   Segundo trecho escuro da página, inspirado num terceiro print do
   cliente (hero de comparativo tipo blog, card estilo navegador com uma
   lista ranqueada). Nenhum concorrente nomeado nem ranking inventado
   (DESIGN.md, "Conteúdo" — nada de dado fabricado): o comparativo é sobre
   ABORDAGEM (pronto vs. sob medida), não sobre empresas específicas, e
   cada linha é um critério que o resto do site já sustenta (Design que
   converte, Performance real etc. na HOME; O que fazemos/Como
   trabalhamos aqui). */
.compare-band {
  background: linear-gradient(155deg, #0b1330 0%, #14204f 55%, #0b1330 100%);
  color: #ffffff;
}
.compare-band-inner {
  padding-block: clamp(4rem, 8vw, 7rem);
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: clamp(40px, 6vw, 64px);
  align-items: center;
}
.compare-band .eyebrow { color: rgba(255, 255, 255, 0.6); }
.compare-band .eyebrow::before,
.compare-band .eyebrow::after { color: #6ea8ff; }
.compare-band h2 { color: #ffffff; font-size: clamp(1.75rem, 3.4vw, 2.5rem); margin-top: 8px; }
.compare-band .lead { color: rgba(255, 255, 255, 0.7); margin-top: 16px; }

.compare-card {
  background: #ffffff;
  color: var(--text-primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 440px;
  margin-inline: auto;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.45);
}
.compare-card-head {
  padding: 14px 18px;
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--border-hair);
}
.compare-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }

/* Acordeão, não tabela estática (pedido do cliente: "torne essa sessão
   mais interativa") — cada critério expande uma explicação de uma linha.
   .compare-item leva a classe "faq-item" de propósito: reaproveita o JS
   de altura animada já escrito para a FAQ (assets/js/main.js), então
   nenhum JS novo foi necessário aqui, só CSS pro layout de 3 colunas
   dentro do <summary>. */
.compare-list { display: flex; flex-direction: column; gap: 10px; padding: 10px 16px 16px; }
.compare-row {
  display: grid;
  grid-template-columns: 1fr 56px 56px;
  align-items: center;
  gap: 8px;
  flex-grow: 1;
  font-size: 0.875rem;
}
.compare-row span:first-child { font-weight: 600; text-align: left; }
.compare-row span:nth-child(2) { text-align: center; color: var(--text-tertiary); }
.compare-row span:nth-child(3) { text-align: center; color: var(--accent-solid); font-weight: 700; }
.compare-row-head {
  padding: 4px 8px 8px;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.compare-row-head span:first-child { color: var(--text-tertiary); font-weight: 700; }
.compare-row-head span:nth-child(2),
.compare-row-head span:nth-child(3) { color: var(--text-tertiary); }
/* .faq-item já dá borda/fundo/raio (styles.css); o padding padrão dali é
   pensado pra uma pergunta inteira — mais compacto aqui, uma linha curta. */
.compare-item summary { padding: 14px 16px; gap: 12px; }
.compare-item .faq-answer { padding: 0 16px 16px; font-size: 0.8125rem; }

@media (max-width: 767.98px) {
  .compare-band-inner { grid-template-columns: 1fr; }
  .compare-card { margin-top: 40px; }
}

/* ---------- Faixa de acento: a única cor saturada da página vira o fundo
   (full-bleed, rompe o .container), hospedando os Pilares da empresa em
   texto claro — mesma lógica do "Lime Accent Block" do Perk ("a cor de
   acento É o fundo, sem nenhum outro chrome"), com o gradiente azul→violeta
   que já é a única cor de ação da VIRA (V.1). Nenhum botão dentro dela:
   a página tem só um CTA preenchido, e ele vive na seção final, sobre o
   canvas claro — colocar outro aqui competiria com aquele (V.6). */
.about-band {
  background: var(--gradient-accent);
  color: #ffffff;
}
/* Branco sólido, não translúcido: opaco contra o próprio gradient-accent
   já fica só em ~4.5:1 na ponta mais escura (--accent-from) — o mínimo de
   AA para texto pequeno. Qualquer transparência derrubaria abaixo disso
   (Pilar Acessibilidade). */
.about-band .eyebrow { color: #ffffff; }
.about-band .eyebrow::before,
.about-band .eyebrow::after { color: #ffffff; }
.about-band h2 { color: #ffffff; }
.about-band-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
}
.about-band-item { display: flex; gap: 14px; align-items: flex-start; }
.about-band-item .check {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.about-band-item .check svg { width: 13px; height: 13px; stroke: #ffffff; }
.about-band-item h3 { color: #ffffff; font-size: 1rem; margin-bottom: 4px; }
.about-band-item p { color: #ffffff; font-size: 0.875rem; line-height: 1.55; }

@media not all /* reduzir movimento IGNORADO de propósito (decisão do cliente) */ {
  .plan-toggle, .plan-toggle-switch, .plan-toggle-switch::after, .plan-toggle-icon, .plan-sub-toggle, .plan-sub-toggle::before, .about-band-item, .process-card-contact a { transition: none; }
}


/* =========================================================================
   Efeitos de entrada (sobre o sistema .reveal de styles.css, ligado por
   IntersectionObserver a .is-visible). Cada grupo ganha um movimento
   próprio em vez do slide-up uniforme. Seletores com 2 classes (0,2,0)
   vencem os ajustes por largura de styles.css e este arquivo vem depois.
   prefers-reduced-motion volta a fade simples no bloco final. */
.hero-cascade.reveal { transform: translateX(64px) scale(0.96); }
.hero-cascade.reveal.is-visible { transform: none; }

.process-card-step.reveal { transform: translateY(28px) scale(0.9); }
.process-card-step.reveal.is-visible { transform: none; }

.about-band-item.reveal { transform: translateX(-48px); }
.about-band-item.reveal:nth-child(even) { transform: translateX(48px); }
.about-band-item.reveal.is-visible { transform: none; }

.case-card.reveal { transform: translateY(48px) scale(0.94); }
.case-card.reveal.is-visible { transform: none; }

.compare-card.reveal { transform: translateY(56px) scale(0.97); }
.compare-card.reveal.is-visible { transform: none; }

/* Pack de artes / Cardápio digital: texto à esquerda desliza para a
   direita (entra vindo da esquerda); quadro à direita desliza para cima. */
.quality-band-inner > .reveal:first-child { transform: translateX(-64px); }
.quality-band-inner > .reveal:first-child.is-visible { transform: none; }
.quality-band-device.reveal { transform: translateY(72px); }
.quality-band-device.reveal.is-visible { transform: none; }

/* Cardápio digital: o quadro entra de FORA da tela (direita) para dentro
   da seção, mais lento. O observer fica no contêiner (parado); quem
   desliza são os filhos — um elemento 100vw fora do overflow:hidden conta
   como "fora da viewport" e nunca receberia .is-visible. Chips e botão aparecem depois da digitação do
   texto. .quality-band tem overflow:hidden, então o deslocamento de fora
   da tela é cortado e não gera rolagem horizontal. */
.cardapio-band .cardapio-device.reveal { opacity: 1; transform: none; transition: none; }
.cardapio-device.reveal > * {
  opacity: 0;
  transform: translateX(110vw);
  transition: opacity 900ms var(--ease-out), transform 1200ms var(--ease-out);
}
.cardapio-device.reveal.is-visible > * { opacity: 1; transform: none; }
.cardapio-device.reveal > .quality-callout { transition-delay: 250ms; }
.cardapio-device.reveal > .quality-standards-badge { transition-delay: 400ms; }
.cardapio-band .chip-rows.reveal,
.cardapio-band .cardapio-cta.reveal { transform: translateY(16px); transition-delay: 2.6s; }
.cardapio-band .chip-rows.reveal.is-visible,
.cardapio-band .cardapio-cta.reveal.is-visible { transform: none; }

@media (max-width: 767.98px) {
  .quality-band-inner > .reveal:first-child { transform: translateX(-28px); }
  .quality-band-device.reveal { transform: translateY(32px); }
  .hero-cascade.reveal,
  .about-band-item.reveal,
  .about-band-item.reveal:nth-child(even) { transform: translateY(24px); }
  .hero-cascade.reveal.is-visible,
  .about-band-item.reveal.is-visible,
  .quality-band-inner > .reveal:first-child.is-visible,
  .quality-band-device.reveal.is-visible { transform: none; }
}

@media not all /* reduzir movimento IGNORADO de propósito (decisão do cliente) */ {
  .hero-cascade.reveal, .process-card-step.reveal, .about-band-item.reveal,
  .about-band-item.reveal:nth-child(even), .case-card.reveal,
  .compare-card.reveal, .quality-band-device.reveal,
  .cardapio-device.reveal > *,
  .cardapio-band .chip-rows.reveal, .cardapio-band .cardapio-cta.reveal,
  .quality-band-inner > .reveal:first-child { transform: none; }
}

/* Pack de artes: com o mockup do Instagram, o selo de preço sobe para o
   canto (cobre só a barra de status) e não esconde os números do perfil. */
.quality-band:not(.cardapio-band) .quality-callout { top: 0; right: -2%; }

/* Cardápio digital: mockup 16:9 dentro da tela do laptop (sem recorte). */
.quality-band-device .device-screen img.cardapio-mockup { height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; }
/* Com o mockup maior, os selos saem um pouco da tela para não cobrir o cardápio. */
.cardapio-band .quality-callout { top: -9%; right: -4%; }
.cardapio-band .quality-standards-badge { bottom: -7%; left: -4%; }