/* ============================================================================
   Página "Dynatrace" — Figma node 7803:2209 (frame "Desktop", 1440px)
   ----------------------------------------------------------------------------
   Prefixo .dyn- para não colidir com .cmp- / .sbr- / .svc-.
   Tokens estruturais (--section-px, --content-w, --content-gap) vêm do main.css.
   O frame `hero` 7803:2210 está hidden="true" no Figma e não é renderizado —
   o topo real da página é o Container 7929:1354.
   ========================================================================== */

/* ── 1. HERO — node 7929:1354 ─────────────────────────────────────────────── */

/* O Container 7929:1354 tem DOIS fills, nesta ordem (o primeiro por cima):
     1. PATTERN, patternSource 7643:1010 — a mesma elipse de 2×2px em #6B778C
        a 15% usada nos outros heros;
     2. GRADIENT_LINEAR 225deg, #353535 32% → #0A0A0A 100%.
   O get_design_context devolve só o gradiente, e ainda com o ângulo em outra
   convenção (249,45°). Quem reporta o pattern é o get_figma_data — foi o mesmo
   descuido que deixou o hero da Quem somos sem o padrão de pontos. */
.dyn-hero {
  position: relative;
  background-color: #0a0a0a;
  background-image:
    radial-gradient(circle, rgba(107, 119, 140, .15) 1px, transparent 1px),
    linear-gradient(225deg, #353535 32%, #0a0a0a 100%);
  background-size: 16px 16px, auto;
  overflow: hidden;
  isolation: isolate;
}

/* Header escuro — mesma variante (componente 7640:25) usada na Compliance e
   na home. Fica dentro do hero porque #sticky-header nasce escondido. */
.dyn-hero__header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px var(--section-px) 0;
}
.dyn-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 7945:1957 — padding 120px 112px, conteúdo de 608px à esquerda.
   O respiro sai de --content-w para acompanhar a coluna do site em telas
   maiores que 1440, em vez de travar em 112px. */
.dyn-hero__container {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 120px var(--section-px);
}
.dyn-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
  max-width: var(--content-w);
}
.dyn-hero__texto {
  position: relative;              /* âncora do ícone da Dynatrace */
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 608px;
  max-width: 100%;
}
/* 7934:1417 — o cubo da Dynatrace cai dentro do título, em (388, 78) */
.dyn-hero__icone {
  position: absolute;
  left: 388px;
  top: 78px;
  width: 36px;
  height: 36.48px;
  pointer-events: none;
}
.dyn-hero__titulo {
  margin: 0;
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: 52px;                 /* Heading/H1 */
  line-height: 1.2;
  color: #fff;
}
.dyn-hero__sub {
  margin: 0;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 18px;                 /* Body/p 18 */
  line-height: 1.5;
  color: #f1f4f8;
  opacity: 0.9;
}

/* Composição da direita (7938:1374): o dashboard entra inclinado e o brilho
   fica em mix-blend-screen por cima do gradiente. */
/* As coordenadas do Figma são absolutas dentro do frame de 1440. Ancorar em
   `calc(50% ± n)` mantém a arte alinhada com a coluna do site quando a tela é
   mais larga que 1440, em vez de deixá-la presa na borda esquerda. */
.dyn-hero__arte {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Retângulo 7938:1339 — 1121,11 × 635,29 em (707, 120). A rotação e a
   perspectiva JÁ vêm embutidas no PNG exportado do grupo 7945:1958; aplicar
   rotate/skew por cima (como o get_design_context sugere) inflava a imagem e
   a jogava por cima do título. */
.dyn-hero__dashboard {
  position: absolute;
  left: calc(50% - 13px);          /* 707 − 720 */
  top: 120px;
  width: 1121.11px;
  height: auto;
  max-width: none;
}

/* 7934:1383 não é imagem: é uma ELIPSE #CCCCCC com blur(100px) a 13%. */
.dyn-hero__brilho {
  position: absolute;
  left: calc(50% + 202px);         /* 922 − 720 */
  top: -414.92px;
  width: 881.16px;
  height: 935.43px;
  border-radius: 50%;
  background: #ccc;
  filter: blur(100px);
  opacity: .13;
}

/* Botão azul do hero (7929:1361) */
.dyn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 24px 18px 32px;
  background: #006fcc;
  border-radius: 14px;
  color: #fff;
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .25s, transform .25s cubic-bezier(.2,.7,.3,1),
              box-shadow .25s;
}
.dyn-btn img { display: block; width: 24px; height: 24px; flex-shrink: 0; }
.dyn-btn:hover {
  background: #0058a3;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -12px rgba(0,111,204,.55);
}

/* ── 3 e 4. PROCESS SECTION — nodes 7934:1446 e 7945:1546 ─────────────────── */

/* Duas colunas de 580 + gap 56 = 1216. A ordem inverte na segunda ocorrência:
   lá a imagem vem à esquerda (Figma 7945:1965 em x=112). */
/* O fundo difere entre as duas: 7934:1446 não tem fill (fica transparente
   sobre o branco da página) e 7945:1546 tem fill #F5F9FF. */
.dyn-proc {
  display: grid;
  grid-template-columns: minmax(0, 580px) minmax(0, 580px);
  justify-content: center;
  align-items: center;
  gap: var(--content-gap);
  padding: 120px var(--section-px);
  background: transparent;
}
.dyn-proc--beneficios { background: #f5f9ff; }

/* A página Consultoria reusa este componente: as duas Process Sections dela
   têm a mesma grade e os mesmos ícones. Só variam o fundo (7957:2084 é
   #F5F9FF) e a arte da direita, que lá tem altura fixa de 725px. */
.dyn-proc--claro { background: #f5f9ff; }
/* Especificidade dupla de propósito: `.dyn-proc__img { height: auto }` é
   declarado mais abaixo e, com um seletor só, venceria este. */
.dyn-proc__img.dyn-proc__img--fixa { height: 725px; object-fit: cover; }
.dyn-proc__col {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap);
}
.dyn-proc--invertida .dyn-proc__col  { order: 2; }
.dyn-proc--invertida .dyn-proc__img  { order: 1; }

.dyn-proc__head { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.dyn-tag {
  margin: 0;
  font-family: 'DM Mono', monospace;
  font-size: 14px;                 /* Body/Tag */
  line-height: 1.5;
  color: #004a8a;
}
.dyn-h2 {
  margin: 0;
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: 32px;                 /* Heading/H2 */
  line-height: 1.3;
  color: #0c111d;
}
.dyn-proc__desc {
  margin: 0;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 18px;                 /* Body/p 18 */
  line-height: 1.5;
  color: #4a5568;
}

/* Lista em duas colunas de 274px, quebrando por flex-wrap */
.dyn-proc__lista {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 32px;
  width: 100%;
}
.dyn-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 274px;
  padding-bottom: 16px;
  /* inset em vez de border-bottom: a borda somaria altura que o traço do
     Figma não soma, e aqui são 8 itens empilhados. */
  box-shadow: inset 0 -1px 0 0 #f1f4f8;
}
/* A segunda seção usa Secondary/Light no traço (7945:1554 e irmãos) */
.dyn-proc--beneficios .dyn-item { box-shadow: inset 0 -1px 0 0 #c5ceda; }

.dyn-item img { display: block; width: 24px; height: 24px; flex-shrink: 0; }
.dyn-item p {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 16px;                 /* Body/p 16 */
  line-height: 1.5;
  color: #4a5568;
}

/* As duas imagens têm traço de 1px com GRADIENT_LINEAR (7945:1960 e 7945:1965):
   #E6F4FF no topo, transparente na base. Como não dá para pôr gradiente em
   `border-color`, a borda fica transparente e o gradiente é pintado na
   border-box — a própria imagem, opaca, cobre o miolo. */
.dyn-proc__img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid transparent;
  border-radius: 14px;
  background: linear-gradient(180deg, #e6f4ff 0%, rgba(230, 244, 255, 0) 100%) border-box;
}

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

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

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

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