/* Development Inovation Growth — "De ponta a ponta" na página inicial (seção #metodo)
   Em cima do solo ficam os três pilares; embaixo do "d", o monte de terra que a escavação junta (Descobrir);
   no meio, sobre o buraco, a empresa em roxo que essa terra transformada constrói (Inovar); embaixo do "g",
   a cidade verde que cresce da loja à torre (Crescer). A pá é uma só: a do pilar Inovar, que desce, cava e volta.
   Embaixo do solo ficam as camadas de terra (só visuais), o buraco que a pá abre e, na raiz, a dor do empresário.
   Classes com prefixo esc-, todas dentro da seção: não mexe no .flow--dig de solucoes.html e lei-do-bem.html.
   O movimento é todo do assets/escavacao.js (um relógio só). Sem JS ou com movimento reduzido fica o estado
   final, parado: pá no pilar, buraco aberto, dor acesa, monte no Descobrir, empresa acesa e a cidade crescida. */

.esc { overflow: hidden; }
.esc .section-head { margin-bottom: 64px; }
.esc .h2 { max-width: 24ch; text-wrap: balance; }

/* ---------- Cena ---------- */
/* --esc-no: tamanho do nó das letras; --esc-palco: altura do espaço entre as letras e o solo (cabe a empresa e o gráfico) */
.esc-cena { position: relative; --esc-no: 88px; --esc-palco: 176px; }

/* Os três pilares: texto em cima, letra embaixo, perto da estação de cada um */
.esc-pilares { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.esc-pilar { display: flex; flex-direction: column; align-items: center; padding: 0 12px; text-align: center; }
.esc-pilar__texto { flex: 1 0 auto; }
.esc-verbo { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--roxo); transition: color .45s; }
.esc-pilar h3 { margin-top: 8px; font-size: 21px; transition: color .45s; }
.esc-pilar p { max-width: 24ch; margin: 8px auto 0; font-size: 15px; line-height: 1.5; color: var(--muted-on-dark); text-wrap: balance; transition: color .45s; }
.esc-no {
  position: relative; z-index: 1; width: var(--esc-no); height: var(--esc-no); margin-top: 16px;
  display: grid; place-items: center; color: var(--roxo); transition: color .45s, filter .45s, text-shadow .45s;
}
.esc-no--letra { font-size: 72px; font-weight: 800; line-height: 1; letter-spacing: -0.015em; }
.esc-no--d { padding-bottom: 6px; }
.esc-no--pa svg { width: auto; height: 66px; }
/* a vaga da pá: contorno tracejado bem sutil, que aparece só enquanto a pá está lá embaixo cavando */
.esc-pa-vaga { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; }

/* Grow: o "g" brilha em verde; quando a cidade cresce, ele cresce, abre duas ondas e desenha a seta.
   O JS mexe só em transform, opacity e clip-path (nada que refaça o layout) */
.esc-no--g {
  padding-bottom: 18px; /* o "g" tem perna: sobe um pouco para ficar centralizado */
  text-shadow: 0 0 28px rgba(52, 199, 89, .45);
}
/* brilho extra do pulso, atrás da letra */
.esc-g-luz { position: absolute; z-index: -1; inset: -25%; border-radius: 50%; background: radial-gradient(closest-side, rgba(52, 199, 89, .5), rgba(52, 199, 89, 0)); opacity: 0; pointer-events: none; }
.esc-anel { position: absolute; inset: -1px; border: 2px solid var(--verde); border-radius: 50%; opacity: 0; pointer-events: none; }
/* a seta sai do lado direito do "g", sem encostar no texto de cima; parada, fica desenhada */
.esc-alcance { position: absolute; left: calc(100% - 8px); bottom: 30%; width: 64px; height: 44px; pointer-events: none; }
.esc-alcance svg {
  display: block; width: 100%; height: 100%; overflow: visible;
  fill: none; stroke: var(--verde); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(52, 199, 89, .7));
}
.esc--anima .esc-alcance { opacity: 0; }

/* Com o JS animando, cada pilar fica apagado até a sua etapa: .is-ativo = etapa atual, .is-feito = etapa concluída.
   Apagado ainda passa no contraste AA (o texto escurece pouco; quem apaga de verdade é a letra). */
.esc--anima .esc-pilar:not(.is-ativo):not(.is-feito) .esc-no--letra { color: #2C2C2C; text-shadow: none; }
.esc--anima .esc-pilar:not(.is-ativo):not(.is-feito) .esc-no--pa svg { filter: grayscale(1) brightness(.38); }
.esc--anima .esc-pilar:not(.is-ativo):not(.is-feito) .esc-verbo { color: #8A8A8A; }
.esc--anima .esc-pilar:not(.is-ativo):not(.is-feito) h3 { color: #CFCFCF; }
.esc--anima .esc-pilar:not(.is-ativo):not(.is-feito) p { color: #9A9A9A; }
.esc--anima .esc-pilar.is-ativo p { color: #E8E8E8; }
.esc--anima .esc-pilar--d.is-ativo .esc-no { text-shadow: 0 0 26px rgba(168, 85, 247, .75); }
.esc--anima .esc-pilar--i.is-ativo .esc-no svg { filter: drop-shadow(0 0 12px rgba(168, 85, 247, .8)); }
.esc-no--pa svg { transition: filter .45s; }

/* ---------- Em cima do solo: uma estação por pilar, centrada embaixo da letra ---------- */
.esc-base { position: relative; }
.esc-palco {
  position: relative; z-index: 1; height: var(--esc-palco); pointer-events: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.esc-estacao { display: flex; align-items: flex-end; justify-content: center; min-width: 0; }

/* Descobrir: o monte de terra ganha uma camada a cada pazada (6 camadas; a mais nova fica por fora).
   Por cima, o mesmo contorno em roxo, que o JS revela quando a terra vira resultado. */
.esc-monte { position: relative; width: min(200px, 84%); transform-origin: 50% 100%; }
.esc-monte svg { display: block; width: 100%; height: auto; overflow: visible; }
.esc-monte svg + svg { position: absolute; left: 0; top: 0; } /* a primeira camada dá a altura; as outras ficam por cima */
.esc-mc { transform-origin: 50% 100%; }
.esc-mc use:first-of-type { stroke: rgba(255, 228, 200, .24); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* --esc-roxo (0 a 1): até que altura o monte está roxo, com a borda esfumada; parado fica 0 (monte de terra) */
.esc-monte__roxo {
  position: absolute; left: 0; top: 0; --esc-roxo: 0; filter: drop-shadow(0 0 8px rgba(168, 85, 247, .6));
  -webkit-mask-image: linear-gradient(0deg, #000 calc(var(--esc-roxo) * 118% - 18%), transparent calc(var(--esc-roxo) * 118%));
          mask-image: linear-gradient(0deg, #000 calc(var(--esc-roxo) * 118% - 18%), transparent calc(var(--esc-roxo) * 118%));
}

/* Inovar: a empresa, sobre a boca do buraco (nasce da dor). Caixa 120 x 72 (as mesmas unidades dos SVGs);
   cada peça é um SVG da sua faixa, no lugar exato onde encaixa: o JS só a faz voar até ali (transform). */
.esc-empresa { position: relative; width: min(136px, 76%); aspect-ratio: 120 / 72; }
.esc-peca { position: absolute; left: 0; display: block; width: 100%; overflow: visible; transform-origin: 50% 50%; }
.esc-peca[data-peca="1"] { top: calc(66 / 72 * 100%); height: calc(6 / 72 * 100%); }  /* fundação */
.esc-peca[data-peca="2"] { top: calc(48 / 72 * 100%); height: calc(18 / 72 * 100%); } /* térreo: vitrines, porta e marquise */
.esc-peca[data-peca="3"] { top: calc(32 / 72 * 100%); height: calc(16 / 72 * 100%); } /* 2º andar */
.esc-peca[data-peca="4"] { top: calc(16 / 72 * 100%); height: calc(16 / 72 * 100%); } /* 3º andar */
.esc-peca[data-peca="5"] { top: calc(4 / 72 * 100%); height: calc(12 / 72 * 100%); }  /* letreiro */
.esc-peca[data-peca="6"] { top: 0; height: calc(4 / 72 * 100%); }                       /* cobertura */
/* a empresa acesa: vidros, porta e letreiro claros, com brilho (o JS revela de baixo para cima quando ela fica pronta) */
.esc-empresa__luz {
  position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none;
  filter: drop-shadow(0 0 2px rgba(240, 228, 255, .9)) drop-shadow(0 0 9px rgba(168, 85, 247, .55));
}

/* Crescer: a cidade verde embaixo do "g", da loja pequena à torre (alturas subindo da esquerda para a direita,
   como um gráfico de barras feito de prédios), com detalhes roxos. Caixa 200 x 120 (as mesmas unidades dos SVGs);
   cada prédio é um SVG no seu lugar e o JS o faz crescer de baixo para cima (clip-path) */
.esc-cidade { position: relative; width: min(230px, 90%); aspect-ratio: 200 / 120; }
.esc-predio { position: absolute; display: block; overflow: visible; }
.esc-predio[data-predio="1"] { left: calc(3 / 200 * 100%); top: calc(95 / 120 * 100%); width: calc(32 / 200 * 100%); height: calc(25 / 120 * 100%); }   /* loja */
.esc-predio[data-predio="2"] { left: calc(41 / 200 * 100%); top: calc(79 / 120 * 100%); width: calc(32 / 200 * 100%); height: calc(41 / 120 * 100%); }  /* escritório */
.esc-predio[data-predio="3"] { left: calc(79 / 200 * 100%); top: calc(56 / 120 * 100%); width: calc(34 / 200 * 100%); height: calc(64 / 120 * 100%); }  /* prédio médio */
.esc-predio[data-predio="4"] { left: calc(119 / 200 * 100%); top: calc(35 / 120 * 100%); width: calc(36 / 200 * 100%); height: calc(85 / 120 * 100%); } /* prédio alto */
.esc-predio[data-predio="5"] { left: calc(161 / 200 * 100%); top: 0; width: calc(36 / 200 * 100%); height: 100%; }                                     /* torre */
/* janelas acesas (uma camada só, por cima) e a linha fina com seta que sobe passando acima dos telhados */
.esc-cidade__luz, .esc-cidade__linha { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.esc-cidade__luz { filter: drop-shadow(0 0 2px rgba(230, 253, 236, .9)) drop-shadow(0 0 7px rgba(52, 199, 89, .5)); }
.esc-cidade__linha { fill: none; stroke: #9BF0B3; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(52, 199, 89, .9)); }
.esc-cidade__linha path { vector-effect: non-scaling-stroke; }

/* ---------- Embaixo do solo ---------- */
/* --esc-h: altura do subsolo; --esc-tx: onde fica o buraco; --esc-fundo: profundidade do centro da dor.
   --esc-b1..3: fronteiras das camadas no eixo do buraco (mesmas alturas do SVG, que tem 392 de altura) */
.esc-solo {
  position: relative; height: var(--esc-h); margin: 0 calc(var(--gutter) * -1);
  --esc-h: 392px; --esc-tx: 50%; --esc-fundo: 232px;
  --esc-b1: calc(var(--esc-h) * 56 / 392); --esc-b2: calc(var(--esc-h) * 131 / 392); --esc-b3: calc(var(--esc-h) * 194 / 392);
}

/* Camadas de terra: tons e texturas diferentes, que somem nas bordas */
.esc-camadas {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.esc-camadas svg {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
          mask-image: linear-gradient(180deg, #000 70%, transparent);
}
/* destaque da camada quando a pá corta nela (luz e contorno sutis; a opacidade vem do JS) */
.esc-luz { fill: rgba(255, 236, 214, .07); stroke: rgba(255, 236, 214, .34); stroke-width: 1; opacity: 0; }

/* A superfície: linha clara atravessando a cena */
.esc-superficie { position: absolute; left: 0; right: 0; top: -12px; height: 24px; overflow: hidden; pointer-events: none; }
.esc-superficie::before {
  content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .72) 14%, rgba(255, 255, 255, .9) 50%, rgba(255, 255, 255, .72) 86%, rgba(255, 255, 255, 0));
}

/* O buraco: da superfície até a dor (o JS recorta a profundidade a cada pazada) */
.esc-tunel {
  position: absolute; top: -1px; left: var(--esc-tx); width: 30px; height: calc(var(--esc-fundo) - 17px); margin-left: -15px;
  border-radius: 0 0 15px 15px; background: linear-gradient(90deg, #020101, #0B0907 50%, #020101);
  box-shadow: inset 1px 0 rgba(214, 180, 150, .22), inset -1px 0 rgba(214, 180, 150, .22), inset 0 -1px rgba(214, 180, 150, .22);
  pointer-events: none;
}
/* luz que sobe da dor até a boca quando a pá a encontra: vermelha no fundo, roxa perto da empresa */
.esc-tunel__luz {
  position: absolute; inset: 0 8px 3px; border-radius: 0 0 10px 10px; filter: blur(4px); opacity: .8;
  background: linear-gradient(180deg, rgba(168, 85, 247, .6), rgba(212, 96, 177, .5) 55%, rgba(255, 107, 107, .75));
}

/* Beiras de terra dos dois lados da boca do buraco */
.esc-beira { position: absolute; bottom: 100%; width: 30px; height: 9px; overflow: visible; fill: #3A2E25; pointer-events: none; }
.esc-beira--e { left: calc(var(--esc-tx) - 15px - 30px); transform-origin: 100% 100%; }
.esc-beira--d { left: calc(var(--esc-tx) + 15px); transform-origin: 0 100%; }
.esc-beira__borda { fill: none; stroke: rgba(214, 180, 150, .3); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* A pá do pilar Inovar quando sai para cavar (a mesma do logo, de ponta para baixo). O JS a faz nascer exatamente
   sobre o ícone do pilar (mesma posição, tamanho e lado), descer até a boca, cavar e voltar; o ícone some nesse
   intervalo, então se vê uma pá só. O eixo de giro fica na mão (28% do topo). Parada, ela não aparece. */
.esc-escavadora { position: absolute; z-index: 2; top: 0; left: var(--esc-tx); width: 22px; height: 56px; margin-left: -11px; transform-origin: 50% 28%; opacity: 0; pointer-events: none; }
.esc-escavadora svg { width: 100%; height: 100%; }

/* Terra que voa, blocos que voam e brilhos (canvas): cobre o palco e o subsolo, de ponta a ponta */
.esc-particulas { position: absolute; z-index: 3; top: -40px; left: calc(var(--gutter) * -1); width: calc(100% + 2 * var(--gutter)); height: calc(100% + 40px); pointer-events: none; }

/* A dor do empresário: núcleo vermelho que brilha (o JS acende e pulsa) e o único texto do subsolo */
.esc-dor__nucleo { position: absolute; left: var(--esc-tx); top: var(--esc-fundo); width: 0; height: 0; pointer-events: none; }
.esc-dor__nucleo::before { content: ""; position: absolute; left: -42px; top: -42px; width: 84px; height: 84px; border: 1px solid rgba(255, 107, 107, .16); border-radius: 50%; }
.esc-dor__halo {
  position: absolute; left: -120px; top: -120px; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 107, 107, .42), rgba(255, 107, 107, .14) 55%, rgba(255, 107, 107, 0));
  opacity: .8;
}
.esc-dor__onda { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border: 2px solid var(--alerta); border-radius: 50%; opacity: 0; }
.esc-dor__miolo {
  position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #FFFFFF 0, #FFD6D6 14%, #FF8A8A 34%, #FF6B6B 52%, #C93636 82%, #8D1D1D 100%);
  box-shadow: 0 0 20px 4px rgba(255, 107, 107, .6), 0 0 54px 14px rgba(255, 107, 107, .22);
}
.esc-dor { position: absolute; left: var(--esc-tx); top: calc(var(--esc-fundo) + 50px); width: max-content; max-width: 90%; margin: 0; transform: translateX(-50%); font-size: 21px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--alerta); text-align: center; }
/* Pausar animação (a cena é um laço infinito): discreto, no canto de baixo à esquerda, longe do botão flutuante */
.esc-pausa { position: absolute; left: 12px; bottom: 12px; z-index: 4; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: 999px; border: 1px solid var(--line-dark); background: rgba(0, 0, 0, .45); color: var(--muted-on-dark); cursor: pointer; transition: color .2s, border-color .2s; }
.esc-pausa:hover, .esc-pausa:focus-visible { color: var(--branco); border-color: rgba(168, 85, 247, .7); }
.esc-pausa:focus-visible { outline: 2px solid var(--roxo); outline-offset: 2px; }
.esc-pausa__icone { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.esc-pausa[aria-pressed="true"] .esc-pausa__icone { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; margin-left: 3px; }

/* Com o JS animando, a cena começa vazia (o JS assume daqui) e o que se move ganha camada própria */
.esc--anima .esc-mc, .esc--anima .esc-peca, .esc--anima .esc-empresa__luz, .esc--anima .esc-cidade__luz, .esc--anima .esc-cidade__linha, .esc--anima .esc-tunel__luz { opacity: 0; }
.esc--anima .esc-predio { clip-path: inset(100% 0 0 0); }
.esc--anima .esc-tunel { clip-path: inset(0 0 100% 0); }
.esc--anima .esc-escavadora, .esc--anima .esc-dor__halo { will-change: transform, opacity; }

.esc-cta { justify-content: center; margin-top: 48px; }

/* ---------- Celular: os três pilares continuam lado a lado, compactos, com o buraco no meio ---------- */
@media (max-width: 760px) {
  .esc .section-head { margin-bottom: 44px; }
  .esc-cena { --esc-no: 56px; --esc-palco: 128px; }
  .esc-pilar { padding: 0 4px; }
  .esc-verbo { font-size: 9.5px; letter-spacing: .12em; }
  .esc-pilar h3 { margin-top: 6px; font-size: 16px; letter-spacing: -0.01em; }
  .esc-pilar p { margin-top: 6px; font-size: 12.5px; line-height: 1.4; }
  .esc-no { margin-top: 12px; }
  .esc-no--letra { font-size: 46px; }
  .esc-no--d { padding-bottom: 4px; }
  .esc-no--g { padding-bottom: 11px; }
  .esc-no--pa svg { height: 42px; }
  .esc-alcance { left: calc(100% - 8px); bottom: 34%; width: 34px; height: 24px; }
  .esc-alcance svg { stroke-width: 2.6; }
  .esc-monte { width: min(112px, 94%); }
  .esc-empresa { width: min(96px, 78%); }
  .esc-cidade { width: min(116px, 94%); }
  .esc-solo { --esc-h: 340px; --esc-fundo: 206px; }
  .esc-camadas { -webkit-mask-image: none; mask-image: none; }
  .esc-superficie::before { background: rgba(255, 255, 255, .85); }
  .esc-escavadora { width: 18px; height: 46px; margin-left: -9px; }
  .esc-beira { width: 22px; height: 7px; }
  .esc-beira--e { left: calc(var(--esc-tx) - 15px - 22px); }
  .esc-dor { top: calc(var(--esc-fundo) + 44px); font-size: 19px; }
}
@media (max-width: 360px) {
  .esc-pilar h3 { font-size: 15px; }
  .esc-pilar p { font-size: 12px; }
}