/* ============================================================================
   Página "Observabilidade" — Figma node 7803:2605 (frame "Desktop", 1440px)
   ----------------------------------------------------------------------------
   Prefixo .obs-. As duas "Process Section" (8004:1639 e 8004:1690) reusam
   .dyn-proc de dynatrace.css — mesmo componente, mesma grade de 274px e mesmo
   traço #F1F4F8. Aqui ficam só o hero e a Solução, que divergem das demais.

   Todos os CSS de página são enfileirados globalmente, então o prefixo .obs-
   não pode colidir com .svc- / .sbr- / .cmp- / .dyn- / .con-.
   ========================================================================== */

/* ── 1. HERO — node 8000:1515 (1440 × 630) ────────────────────────────────── */

/* fills = [GRADIENT_LINEAR 270deg, IMAGE cover] — mesma receita da Consultoria.
   A foto entra por `background-image` inline no elemento e o gradiente vem por
   cima num ::before. NÃO usar custom property com url(): dentro de var() o
   caminho relativo resolve a partir do CSS que consome, não do que declara. */
.obs-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 fica limpa à direita. */
.obs-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 — componente 7640:25, idêntico ao das outras internas. */
.obs-hero__header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px var(--section-px) 0;
}
.obs-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 8000:1517 — padding 120px 112px, conteúdo de 817px, gap 40. */
.obs-hero__container {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding: 120px var(--section-px);
}
.obs-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
  max-width: var(--content-w);
}
/* 817px é o que diferencia este hero do da Consultoria (657px). */
.obs-hero__texto {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 817px;
  max-width: 100%;
}
.obs-hero__titulo {
  margin: 0;
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: 52px;                 /* Heading/H1 */
  line-height: 1.2;
  color: #fff;
}
.obs-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 8000:1522 — fundo branco, texto #004A8A. */
.obs-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;
}
.obs-btn img { display: block; width: 24px; height: 24px; flex-shrink: 0; }
.obs-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .45);
}

/* ── 2. SOLUÇÃO — node 8004:1630 (1440 × 769) ─────────────────────────────── */

/* Wrapper 8004:1630 — padding 16px em volta do bloco arredondado. */
.obs-solucao {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 16px;
  background: #fff;
}

/* Main container 8004:1631 — padding 120px 96px, radius 14, foto de fundo.
   O padding lateral usa max(...) para travar o conteúdo em 1216px acima de
   1440px de viewport, em vez de fixar 96px e deixar a seção esticar. */
.obs-solucao__main {
  position: relative;
  display: flex;
  padding: 120px max(24px, calc((100% - var(--content-w)) / 2));
  border-radius: 14px;
  overflow: hidden;
  background-color: #02081a;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Anotação de Dev Mode do nó 8004:1631:
     "Vídeo de background em reprodução automatica (sem som) e looping infinito."
   O posicionamento do vídeo NÃO mora mais em CSS: vem inline, de
   `rike_video_fundo()` em functions.php. Dependia de `.video-section video`
   e o "Remove Unused CSS" do WP Rocket derrubava esse seletor para visitante
   deslogado — o vídeo virava item de flex e espremia o texto a 0 de largura.
   Estilo inline nenhum otimizador remove.

   O vídeo continua opcional: sem nada no Customizer, sobra a foto de fundo
   (o próprio fill IMAGE do Figma), que também serve de poster. */

/* content 8004:1632 — row, space-between, align center. */
.obs-solucao__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

/* dynatrace.logobranca 8091:1532 — 169 × 32, opacity 0.8.
   Wrapper + img, igual à home: o `object-fit: cover` mora no filho, senão o
   flex do container esticaria a imagem. */
.obs-solucao__logo {
  position: relative;
  width: 169px;
  height: 32px;
  flex-shrink: 0;
  opacity: .8;
}
.obs-solucao__logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

/* Text block 8004:1633 — 572 de largura, padding 48, gap 32, branco. */
.obs-solucao__bloco {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  width: 572px;
  max-width: 100%;
  flex-shrink: 0;
  padding: 48px;
  background: #fff;
  border-radius: 14px;
  box-sizing: border-box;
}
.obs-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.obs-tag {
  margin: 0;
  font-family: 'DM Mono', monospace;
  font-size: 14px;                 /* Body/Tag */
  line-height: 1.5;
  color: #006fcc;                  /* Primary/Dark — não o Darker do hero */
}
/* 476px é largura fixa no Figma (8004:1636): é ela que dita a quebra de linha. */
.obs-h2 {
  width: 476px;
  max-width: 100%;
  margin: 0;
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: 32px;                 /* Heading/H2 */
  line-height: 1.3;
  color: #0c111d;
}
.obs-solucao__corpo p {
  margin: 0;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 16px;                 /* Body/p 16 */
  line-height: 1.5;
  color: #6b778c;                  /* Secondary/Dark */
}
/* paragraphSpacing 16 no Figma — vira gap entre parágrafos, não margin. */
.obs-solucao__corpo {
  display: flex;
  flex-direction: column;
  gap: 16px;
}