/* ============================================================================
   Página "Consultoria" — Figma node 7803:2341 (frame "Desktop", 1440px)
   ----------------------------------------------------------------------------
   Prefixo .con-. As duas "Process Section" reusam .dyn-proc (dynatrace.css):
   são o mesmo componente, com os mesmos 8 ícones e a mesma grade de 274px.
   Aqui ficam apenas o hero e a Solução, que divergem das outras páginas.
   ========================================================================== */

/* ── 1. HERO — node 7803:2342 ─────────────────────────────────────────────── */

/* fills = [GRADIENT_LINEAR 270deg, IMAGE cover].
   A foto entra como `background-image` inline no elemento e o gradiente vem
   por cima num ::before. NÃO usar custom property com url(): dentro de uma
   var() o caminho relativo resolve a partir do CSS que consome o var(), não
   do documento que declara — foi assim que a foto sumia. */
.con-hero {
  position: relative;
  background-color: #004a8a;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
/* 270deg aponta para a esquerda: o azul opaco (76%) cobre o lado do texto e
   a foto aparece limpa à direita. */
.con-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(270deg, rgba(0, 74, 138, 0) 42%, rgba(0, 74, 138, 1) 76%);
  pointer-events: none;
  z-index: 0;
}

/* Header escuro — mesma variante (componente 7640:25) das outras internas. */
.con-hero__header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px var(--section-px) 0;
}
.con-hero__header-inner {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--content-w);
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Container 7957:1984 — padding 120px 112px, gap 56, conteúdo de 657px. */
.con-hero__container {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding: 120px var(--section-px);
}
.con-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
  max-width: var(--content-w);
}
.con-hero__texto {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 657px;
  max-width: 100%;
}
.con-hero__titulo {
  margin: 0;
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: 52px;                 /* Heading/H1 */
  line-height: 1.2;
  color: #fff;
}
.con-hero__sub {
  margin: 0;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 18px;                 /* Body/p 18 */
  line-height: 1.5;
  color: #fff;
  opacity: .9;
}

/* Botão 7957:1991 — fundo BRANCO com texto #004A8A, ao contrário do azul
   usado no hero da Dynatrace. */
.con-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 24px 18px 32px;
  background: #fff;
  border-radius: 14px;
  color: #004a8a;
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s;
}
.con-btn img { display: block; width: 24px; height: 24px; flex-shrink: 0; }
.con-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .45);
}

/* ── 2. SOLUÇÃO — node 7962:2284 ──────────────────────────────────────────── */

/* Diferente da Compliance e da Dynatrace: aqui o "Main container" é `row` com
   gap 72 e o `content` usa align-items:flex-end — o bloco de texto fica à
   DIREITA, não à esquerda. */
.con-solucao { padding: 16px; background: #fff; }
.con-solucao__main {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 72px;
  padding: 120px max(24px, calc((100% - var(--content-w)) / 2));
  border-radius: 14px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.con-solucao__bloco {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  width: 572px;
  max-width: 100%;
  padding: 48px;
  background: #fff;
  border-radius: 14px;
}
.con-solucao__bloco .con-h2 { width: 476px; max-width: 100%; }
.con-solucao__corpo p {
  margin: 0 0 16px;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 16px;                 /* Body/p 16 */
  line-height: 1.5;
  color: #6b778c;
}
.con-solucao__corpo p:last-child { margin-bottom: 0; }

.con-head { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.con-tag {
  margin: 0;
  font-family: 'DM Mono', monospace;
  font-size: 14px;                 /* Body/Tag */
  line-height: 1.5;
  color: #006fcc;                  /* Primary/Dark */
}
.con-h2 {
  margin: 0;
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: 32px;                 /* Heading/H2 */
  line-height: 1.3;
  color: #0c111d;
}

/* ── PAINEL DO FLUXO — node 8318:1830 (580 × 725) ─────────────────────────────
   Anotação de Dev Mode: "As animações podem ser leves — ex: indicadores
   pulsando, linhas de conexão percorrendo o fluxo, gráficos atualizando e
   elementos mudando de estado ao longo do processo."

   Por isso o painel é montado em camadas, e não achatado numa imagem só.
   Um ciclo de 6s encena o processo: alerta → análise → causa → notificação.
   ────────────────────────────────────────────────────────────────────────── */

.con-painel {
  position: relative;
  width: 580px;
  max-width: 100%;
  height: 725px;
  border-radius: 14px;
  overflow: hidden;
  /* fills = [PATTERN 7643:1010, #02081A] + traço #E6F4FF de 1px */
  background-color: #02081a;
  background-image: radial-gradient(circle, rgba(107, 119, 140, .15) 1px, transparent 1px);
  background-size: 16px 16px;
  box-shadow: inset 0 0 0 1px #e6f4ff;
}
.con-painel > * { position: absolute; }

/* Véu do topo — 8318:1897 (580 × 106) */
.con-painel__veu {
  left: 0; top: 0; width: 580px; height: 106px;
  background: linear-gradient(180deg, #02081a 0%, rgba(2, 8, 26, 0) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Peças, nas coordenadas exatas do Figma */
.con-painel__dynatrace { left: 237.71px; top: 79.47px;  width: 105px;    height: 138.5px; z-index: 3; }
.con-painel__alerta    { left: 58.95px;  top: 72.87px;  width: 118px;    height: 106px;   z-index: 3; }
.con-painel__causa     { left: 403.05px; top: 72.87px;  width: 118px;    height: 106px;   z-index: 3; }

/* Pilha de notificações. Cada card no seu tamanho NATURAL: os de trás batem
   com os 230,36 do Figma, e o da frente sai maior porque as sombras longas
   (167px 56px) sangram para fora da caixa — e devem sangrar mesmo. Forçar os
   três numa caixa só esmagava a proporção. */
.con-painel__card { z-index: 1; }
.con-painel__card--esq    { left: 66.14px;  top: 358.82px; width: 230.5px; height: 276px; }
.con-painel__card--dir    { left: 283.5px;  top: 358.82px; width: 230.5px; height: 276px; }
.con-painel__card--frente { left: 155px;    top: 329.3px;  width: 493px;   height: 450px; z-index: 2; }

/* `.con-painel img { width:100% }` NÃO serve aqui: com um seletor de elemento
   ele tem especificidade 0,1,1 e venceria as classes de tamanho acima (0,1,0),
   esticando toda peça para os 580 × 725 do painel. */
.con-painel > img { display: block; }

/* ── COREOGRAFIA DO FLUXO — ciclo de 7s ───────────────────────────────────────
     0,0s  "Alerta detectado" e "Causa identificada" acendem (as duas pontas)
     0,4s  os dois fluxos são desenhados AO MESMO TEMPO, convergindo no centro
     1,6s  ao se encontrarem, o módulo Dynatrace cresce
     2,2s  o "L invertido" começa a aparecer, descendo até os cards
     3,7s  ao alcançá-los, o card #incidentes cresce
   ────────────────────────────────────────────────────────────────────────── */

.con-con { z-index: 4; }
.con-con svg { display: block; width: 100%; height: 100%; overflow: visible; }

.con-con--a { left: 177.1px;  top: 116.63px; width: 68.88px; height: 33.37px;  --d: .4s; }
.con-con--b { left: 334.23px; top: 116.28px; width: 68.88px; height: 33.37px;  --d: .4s; }
.con-con--c { left: 424.5px;  top: 184.95px; width: 49.6px;  height: 195.01px; --d: 2.2s; }

/* A e B partem juntos e chegam juntos no Dynatrace. Não foi preciso inverter
   nada: o path do A começa em M0 (borda esquerda) e o do B em M69 (borda
   direita), então os dois já correm naturalmente para o centro.
   pathLength="1" normaliza o comprimento — a mesma regra serve para os dois. */
.con-con--a path,
.con-con--b path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: con-desenha 7s ease-in-out infinite;
  animation-delay: var(--d);
}
/* As linhas de um mesmo conector saem em cascata curta, não em bloco. */
.con-con--a path:nth-of-type(2), .con-con--b path:nth-of-type(2) { animation-delay: calc(var(--d) + .06s); }
.con-con--a path:nth-of-type(3), .con-con--b path:nth-of-type(3) { animation-delay: calc(var(--d) + .12s); }

@keyframes con-desenha {
  0%         { stroke-dashoffset: 1; }
  16%        { stroke-dashoffset: 0; }
  88%        { stroke-dashoffset: 0; }
  100%       { stroke-dashoffset: -1; }
}

/* O "L invertido" é um path COMPOSTO — a seta da ponta vive num subpath
   separado, então stroke-dashoffset desenharia o traço fora de ordem. Aqui a
   revelação é por clip-path, de cima para baixo: mesmo efeito de ir aparecendo,
   e determinístico. */
.con-con--c path { stroke-dasharray: none; stroke-dashoffset: 0; }
.con-con--c svg {
  clip-path: inset(0 0 100% 0);
  animation: con-revela 7s ease-in-out infinite;
  animation-delay: var(--d);
}
@keyframes con-revela {
  0%         { clip-path: inset(0 0 100% 0); }
  20%        { clip-path: inset(0 0 0 0); }
  88%        { clip-path: inset(0 0 0 0); }
  100%       { clip-path: inset(100% 0 0 0); }
}

/* ── Indicadores e mudança de estado ──────────────────────────────────────── */

/* As duas pontas acendem juntas, antes dos fluxos partirem. */
.con-painel__alerta { animation: con-pulso 7s ease-in-out infinite; animation-delay: 0s; }
.con-painel__causa  { animation: con-pulso-ok 7s ease-in-out infinite; animation-delay: 0s; }

@keyframes con-pulso {
  0%, 7%, 100% { transform: scale(1);    filter: none; }
  2.5%         { transform: scale(1.05); filter: drop-shadow(0 0 14px rgba(139, 215, 252, .55)); }
}
@keyframes con-pulso-ok {
  0%, 7%, 100% { transform: scale(1);    filter: none; }
  2.5%         { transform: scale(1.05); filter: drop-shadow(0 0 14px rgba(78, 160, 93, .6)); }
}

/* O Dynatrace cresce no instante em que os dois fluxos o alcançam. */
.con-painel__dynatrace { animation: con-cresce 7s ease-in-out infinite; animation-delay: 1.6s; }
@keyframes con-cresce {
  0%, 13%, 100% { transform: scale(1);    filter: none; }
  4.5%          { transform: scale(1.14); filter: drop-shadow(0 0 22px rgba(139, 215, 252, .65)); }
}

/* ── Gráficos atualizando ─────────────────────────────────────────────────── */
/* O card #incidentes cresce quando o "L" chega nele. */
.con-painel__card--frente { animation: con-cresce-card 7s ease-in-out infinite; animation-delay: 3.7s; }
@keyframes con-cresce-card {
  0%, 11%, 100% { transform: scale(1);     filter: none; }
  4%            { transform: scale(1.045); filter: drop-shadow(0 0 26px rgba(139, 215, 252, .28)); }
}

@media (prefers-reduced-motion: reduce) {
  .con-con--a path,
  .con-con--b path,
  .con-con--c svg,
  .con-painel__alerta,
  .con-painel__causa,
  .con-painel__dynatrace,
  .con-painel__card--frente { animation: none !important; }
  /* Sem movimento tudo aparece pronto, não invisível. */
  .con-con path { stroke-dasharray: none; stroke-dashoffset: 0; }
  .con-con--c svg { clip-path: none; }
}

/* ── Entrada por rolagem ──────────────────────────────────────────────────── */

.con-fade {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.2,.7,.3,1),
              transform .6s cubic-bezier(.2,.7,.3,1);
}
.con-fade.visible { opacity: 1; transform: none; }

@media (scripting: none) { .con-fade { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .con-fade { opacity: 1; transform: none; transition: none; }
  .con-btn  { transition: none !important; }
}