/* =============================================================
   GDC Tecnologia — design system
   Estrutura da referência (canvas branco, navy de autoridade,
   UM acento cromático, botões pill, uma receita de sombra),
   com o laranja da marca GDC no lugar do lime.
   ============================================================= */

:root {
  /* --- Cor: o laranja é o ÚNICO acento cromático do sistema --- */
  --laranja:         #f86823;
  --laranja-escuro:  #d9500d;
  --laranja-claro:   #ff8b52;
  --laranja-lavado:  #fff2ec;

  --navy:            #101a31;  /* headlines, nav, faixa final */
  --navy-suave:      #1e2b49;  /* subtítulos, superfície elevada no escuro */
  --ardosia:         #5c6b87;  /* texto secundário — neutro FRIO, nunca quente */
  --nevoa:           #dee4ef;  /* bordas e divisores */
  --nevoa-forte:     #bfc8da;
  --branco:          #ffffff;
  --gelo:            #f4f6fa;  /* superfície de card — nunca fundo de página */

  /* --- Tipografia --- */
  --fonte-corpo:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fonte-display:  'Space Grotesk', var(--fonte-corpo);

  --t-hero:     clamp(2.5rem, 5.4vw, 4rem);
  --t-display:  clamp(2rem, 4vw, 3rem);
  --t-secao:    clamp(1.75rem, 3.2vw, 2.5rem);
  --t-card:     1.375rem;
  --t-corpo:    1rem;
  --t-pequeno:  0.875rem;
  --t-eyebrow:  0.8125rem;

  /* --- Espaço: grade de 4px --- */
  --e-1: 4px;   --e-2: 8px;   --e-3: 12px;  --e-4: 16px;
  --e-5: 20px;  --e-6: 24px;  --e-8: 32px;  --e-10: 40px;
  --e-12: 48px; --e-16: 64px; --e-20: 80px;
  --secao: clamp(72px, 9vw, 120px);
  --largura: 1200px;

  /* --- Forma --- */
  --r-card:   20px;
  --r-input:  10px;
  --r-pill:   999px;
  --r-pequeno: 6px;

  /* --- Uma receita de sombra para todo o sistema --- */
  --sombra: 0 28px 56px -36px rgba(16, 26, 49, 0.42);

  --transicao: 220ms cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Calibragem do vídeo do herói ---
     Ambiente claro (sala branca, piso claro) pede brilho menor e véu
     mais forte; ambiente escuro pede o contrário. Ajuste só aqui. */
  --video-brilho: .95;
  --video-satur:  .95;
  --video-veu:    .88;    /* multiplicador da opacidade do véu */
}

/* ---------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--branco);
  color: var(--navy);
  font-family: var(--fonte-corpo);
  font-size: var(--t-corpo);
  line-height: 1.6;
  font-feature-settings: 'cv05' 1, 'ss03' 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--fonte-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--e-4); }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 3px solid var(--laranja);
  outline-offset: 3px;
  border-radius: var(--r-pequeno);
}

/* Pula para o conteúdo — acessibilidade de teclado. */
.pular {
  position: absolute; left: -9999px;
  background: var(--navy); color: #fff;
  padding: var(--e-3) var(--e-5); border-radius: var(--r-pill); z-index: 200;
}
.pular:focus { left: var(--e-4); top: var(--e-4); }

/* ------------------------------------------------------- layout */
.env {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--e-6);
}

.secao { padding-block: var(--secao); position: relative; }
.secao--gelo { background: var(--gelo); }
.secao--navy { background: var(--navy); color: #fff; }

/* ---------------------------------------------------- tipografia */
/* Eyebrow: o padrão que dá ritmo a todas as seções. */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--e-2);
  font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: 0.125em; text-transform: uppercase;
  color: var(--ardosia); margin: 0 0 var(--e-4);
}
.eyebrow::before {
  content: ''; width: 24px; height: 2px;
  background: var(--laranja); border-radius: 2px;
}
.secao--navy .eyebrow { color: #94a3c4; }

/* Exatamente UMA palavra por headline recebe o acento. */
h1 em, h2 em, h3 em { font-style: normal; color: var(--laranja); }

.h-hero   { font-size: var(--t-hero); }
.h-secao  { font-size: var(--t-secao); }

.subtitulo {
  font-size: 1.0625rem; color: var(--ardosia);
  max-width: 62ch; margin-top: var(--e-5);
}
.secao--navy .subtitulo { color: #a9b6d1; }

.cabecalho-secao { max-width: 46rem; margin-bottom: var(--e-12); }
.cabecalho-secao--centro { margin-inline: auto; text-align: center; }
.cabecalho-secao--centro .eyebrow { justify-content: center; }
.cabecalho-secao--centro .subtitulo { margin-inline: auto; }

/* ------------------------------------------------------- botões */
/* Pill é a assinatura: nada de cantos retos em botão solto. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--e-2);
  padding: 14px 28px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  font-weight: 600; font-size: var(--t-corpo); line-height: 1.2;
  cursor: pointer; white-space: nowrap;
  transition: background var(--transicao), color var(--transicao),
              border-color var(--transicao), transform var(--transicao);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primario { background: var(--laranja); color: #fff; }
.btn--primario:hover { background: var(--laranja-escuro); }

.btn--contorno { border-color: var(--nevoa-forte); color: var(--navy); background: transparent; }
.btn--contorno:hover { border-color: var(--navy); background: var(--gelo); }
.secao--navy .btn--contorno { border-color: rgba(255,255,255,.28); color: #fff; }
.secao--navy .btn--contorno:hover { background: rgba(255,255,255,.08); border-color: #fff; }

/* Ação de baixa pressão, abaixo da CTA principal.
   Não herda de .btn — precisa das próprias regras de caixa. */
.btn--texto {
  display: inline-flex; align-items: center; gap: var(--e-2);
  align-self: flex-start;
  padding: var(--e-2) 0; background: none; border: 0;
  font-size: var(--t-pequeno); line-height: 1.2; white-space: nowrap;
  color: var(--laranja); font-weight: 600;
  transition: gap var(--transicao), color var(--transicao);
}
.btn--texto:hover { transform: none; color: var(--laranja-escuro); gap: var(--e-3); }
.btn--texto svg { transition: transform var(--transicao); }
.btn--texto:hover svg { transform: translateX(3px); }

.acoes { display: flex; flex-wrap: wrap; gap: var(--e-4); align-items: center; margin-top: var(--e-8); }

/* -------------------------------------------------- navegação */
.topo {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.topo--fixo { border-bottom-color: var(--nevoa); box-shadow: var(--sombra); }

.topo__linha {
  display: flex; align-items: center; gap: var(--e-8);
  min-height: 76px;
}
.topo__logo img { height: 34px; width: auto; }

.nav { display: flex; gap: var(--e-2); margin-left: auto; }
.nav a {
  padding: var(--e-2) var(--e-4); border-radius: var(--r-pill);
  font-size: var(--t-pequeno); font-weight: 500; color: var(--navy);
  transition: background var(--transicao), color var(--transicao);
}
.nav a:hover, .nav a[aria-current='page'] { background: var(--gelo); color: var(--laranja); }

.topo__contato {
  display: flex; align-items: center; gap: var(--e-3);
  padding-left: var(--e-6); border-left: 1px solid var(--nevoa);
}
.topo__contato .rotulo {
  display: block; font-size: 0.6875rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ardosia);
}
.topo__contato .numero { font-family: var(--fonte-display); font-weight: 700; font-size: 1.0625rem; }
.topo__contato .numero:hover { color: var(--laranja); }

.hamburguer {
  display: none; margin-left: auto;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 1px solid var(--nevoa); border-radius: var(--r-pill);
  cursor: pointer; align-items: center; justify-content: center;
}
.hamburguer span {
  display: block; width: 18px; height: 2px; background: var(--navy);
  border-radius: 2px; position: relative; transition: var(--transicao);
}
.hamburguer span::before, .hamburguer span::after {
  content: ''; position: absolute; left: 0; width: 18px; height: 2px;
  background: var(--navy); border-radius: 2px; transition: var(--transicao);
}
.hamburguer span::before { top: -6px; }
.hamburguer span::after  { top: 6px; }
.hamburguer[aria-expanded='true'] span { background: transparent; }
.hamburguer[aria-expanded='true'] span::before { top: 0; transform: rotate(45deg); }
.hamburguer[aria-expanded='true'] span::after  { top: 0; transform: rotate(-45deg); }

/* ---------------------------------------------------------- hero */
.hero { padding-block: clamp(56px, 7vw, 96px) var(--secao); position: relative; }
.hero__grade {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.hero p.subtitulo { font-size: 1.125rem; }

/* Selo de prova social abaixo da CTA. */
.hero__prova {
  display: flex; align-items: center; gap: var(--e-4);
  margin-top: var(--e-10); padding-top: var(--e-6);
  border-top: 1px solid var(--nevoa);
  font-size: var(--t-pequeno); color: var(--ardosia);
}
.hero__prova strong {
  font-family: var(--fonte-display); font-size: 1.5rem;
  color: var(--navy); display: block; line-height: 1;
}
.hero__prova > div + div { padding-left: var(--e-4); border-left: 1px solid var(--nevoa); }

/* --------------------------------------------------------- cards */
.grade {
  display: grid; gap: var(--e-6);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.grade--3 { grid-template-columns: repeat(3, 1fr); }
.grade--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--branco); border: 1px solid var(--nevoa);
  border-radius: var(--r-card); padding: var(--e-8);
  display: flex; flex-direction: column;
  transition: border-color var(--transicao), transform var(--transicao), box-shadow var(--transicao);
}
.card:hover { border-color: var(--nevoa-forte); transform: translateY(-4px); box-shadow: var(--sombra); }
.card h3 { font-size: var(--t-card); margin-bottom: var(--e-3); }
.card p { color: var(--ardosia); font-size: var(--t-pequeno); }
.secao--gelo .card { background: var(--branco); border-color: transparent; }

/* Card de serviço: o wireframe animado ocupa o topo. */
.card-servico { padding: 0; overflow: hidden; }
.card-servico__palco {
  background: var(--gelo); border-bottom: 1px solid var(--nevoa);
  padding: var(--e-6); aspect-ratio: 16 / 10;
  display: flex; align-items: center; justify-content: center;
}
.card-servico__corpo { padding: var(--e-6) var(--e-8) var(--e-8); display: flex; flex-direction: column; flex: 1; }
.card-servico__corpo .btn--texto { margin-top: auto; padding-top: var(--e-5); }

/* Ícone de diferencial. */
.icone-quadro {
  width: 48px; height: 48px; flex: none;
  display: grid; place-items: center;
  border-radius: 14px; background: var(--laranja-lavado); color: var(--laranja);
  margin-bottom: var(--e-5);
}
.secao--navy .icone-quadro { background: rgba(248,104,35,.14); }
.icone-quadro svg { width: 24px; height: 24px; }

.card-diferencial {
  background: var(--branco); border: 1px solid var(--nevoa);
  border-radius: var(--r-card); padding: var(--e-6);
  transition: border-color var(--transicao), transform var(--transicao), box-shadow var(--transicao);
}
.card-diferencial:hover {
  border-color: var(--nevoa-forte); transform: translateY(-4px); box-shadow: var(--sombra);
}
.card-diferencial h3 { font-size: 1.0625rem; color: var(--navy); margin-bottom: var(--e-2); }
.card-diferencial p { color: var(--ardosia); font-size: var(--t-pequeno); }

/* Mesmo card numa faixa navy, se algum dia for usado lá. */
.secao--navy .card-diferencial {
  background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1);
}
.secao--navy .card-diferencial:hover {
  background: rgba(255,255,255,.07); border-color: rgba(248,104,35,.4);
  transform: none; box-shadow: none;
}
.secao--navy .card-diferencial h3 { color: #fff; }
.secao--navy .card-diferencial p  { color: #a9b6d1; }

/* -------------------------------------------------- contadores */
.numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-6); }
.numero__valor {
  font-family: var(--fonte-display); font-weight: 700;
  font-size: clamp(2.25rem, 4.5vw, 3.25rem); line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -0.03em;
}
.numero__valor .prefixo { color: var(--laranja); }
.numero__rotulo { color: var(--ardosia); font-size: var(--t-pequeno); margin-top: var(--e-2); }
.secao--navy .numero__rotulo { color: #a9b6d1; }

/* ------------------------------------------------------ conteúdo */
/* Corpo de texto vindo do editor do painel. */
.prosa { max-width: 68ch; color: var(--navy); }
.prosa p { margin-bottom: var(--e-5); color: #33405c; }
.prosa h2, .prosa h3, .prosa h4 { margin: var(--e-10) 0 var(--e-4); }
.prosa h2 { font-size: 1.75rem; } .prosa h3 { font-size: 1.375rem; } .prosa h4 { font-size: 1.125rem; }
.prosa ul, .prosa ol { margin: 0 0 var(--e-5); padding-left: var(--e-5); color: #33405c; }
.prosa li { margin-bottom: var(--e-2); }
.prosa ul { list-style: none; padding-left: 0; }
.prosa ul li { position: relative; padding-left: var(--e-6); }
.prosa ul li::before {
  content: ''; position: absolute; left: 0; top: 0.6em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--laranja);
}
.prosa a { color: var(--laranja); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.prosa img { border-radius: var(--r-card); margin: var(--e-6) 0; border: 1px solid var(--nevoa); }
.prosa blockquote {
  margin: var(--e-6) 0; padding: var(--e-5) var(--e-6);
  border-left: 3px solid var(--laranja); background: var(--gelo);
  border-radius: 0 var(--r-input) var(--r-input) 0;
}
.prosa strong { font-weight: 600; color: var(--navy); }

/* ------------------------------------------------ banner interno */
.banner-interno {
  background: var(--navy); color: #fff;
  padding-block: clamp(56px, 7vw, 88px) clamp(48px, 6vw, 72px);
  position: relative; overflow: hidden;
}
.banner-interno h1 { font-size: var(--t-display); }
.migalhas {
  display: flex; align-items: center; gap: var(--e-2);
  font-size: var(--t-pequeno); color: #94a3c4; margin-bottom: var(--e-5);
}
.migalhas a:hover { color: var(--laranja); }
.migalhas span[aria-current] { color: #fff; }

/* --------------------------------------------------- formulário */
.form-campo { margin-bottom: var(--e-4); }
.form-campo label {
  display: block; font-size: var(--t-pequeno); font-weight: 500;
  margin-bottom: var(--e-2); color: var(--navy);
}
.secao--navy .form-campo label { color: #d7deec; }
.form-campo input, .form-campo textarea, .form-campo select {
  width: 100%; padding: 13px var(--e-4);
  font: inherit; font-size: var(--t-pequeno); color: var(--navy);
  background: var(--branco); border: 1px solid var(--nevoa-forte);
  border-radius: var(--r-input);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.form-campo textarea { resize: vertical; min-height: 118px; }
.form-campo input:focus, .form-campo textarea:focus, .form-campo select:focus {
  outline: none; border-color: var(--laranja);
  box-shadow: 0 0 0 3px rgba(248,104,35,.16);
}
.form-linha { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); }

.aviso { padding: var(--e-4) var(--e-5); border-radius: var(--r-input); font-size: var(--t-pequeno); margin-bottom: var(--e-5); }
.aviso--ok  { background: #e8f7ee; color: #17603a; border: 1px solid #b6e3c8; }
.aviso--erro { background: #fdecea; color: #8c2318; border: 1px solid #f3c2bc; }

/* ------------------------------------------------------- rodapé */
.rodape { background: var(--navy); color: #a9b6d1; padding-top: var(--secao); }
/* Quando o rodapé vem logo após a faixa navy de contato, os dois se
   fundem num bloco só — encurta o respiro e marca a divisão. */
.secao--navy + .rodape {
  padding-top: var(--e-16);
  border-top: 1px solid rgba(255,255,255,.08);
}
.rodape__grade {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: var(--e-10); padding-bottom: var(--e-16);
}
.rodape h4 {
  font-size: var(--t-eyebrow); text-transform: uppercase; letter-spacing: .125em;
  color: #fff; margin-bottom: var(--e-5); font-family: var(--fonte-corpo); font-weight: 600;
}
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: var(--e-3); }
.rodape a { font-size: var(--t-pequeno); transition: color var(--transicao); }
.rodape a:hover { color: var(--laranja); }
/* width:auto preserva a proporção — sem isso a logo estica. */
.rodape__logo img { height: 38px; width: auto; margin-bottom: var(--e-5); }
.rodape__base {
  display: flex; flex-wrap: wrap; gap: var(--e-4);
  align-items: center; justify-content: space-between;
  padding-block: var(--e-6); border-top: 1px solid rgba(255,255,255,.1);
  font-size: 0.8125rem;
}
.social { display: flex; gap: var(--e-2); }
.social a {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.16); border-radius: 50%;
  transition: background var(--transicao), border-color var(--transicao);
}
.social a:hover { background: var(--laranja); border-color: var(--laranja); color: #fff; }

/* ---------------------------------------------------- whatsapp */
.zap {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  display: inline-flex; align-items: center; gap: var(--e-3);
  padding: 12px 20px 12px 14px;
  background: #1eb955; color: #fff; border-radius: var(--r-pill);
  box-shadow: 0 12px 32px -10px rgba(30,185,85,.6);
  font-size: var(--t-pequeno); font-weight: 600;
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.zap:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -12px rgba(30,185,85,.7); }
.zap svg { width: 22px; height: 22px; flex: none; }

/* -------------------------------------------- revelação ao rolar */
.revelar { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.revelar.visivel { opacity: 1; transform: none; }

/* ---------------------------------------------------- responsivo */
@media (max-width: 1024px) {
  .hero__grade { grid-template-columns: 1fr; }
  .grade--3, .grade--4 { grid-template-columns: repeat(2, 1fr); }
  .rodape__grade { grid-template-columns: 1fr 1fr; gap: var(--e-8); }
  .numeros { grid-template-columns: repeat(2, 1fr); gap: var(--e-8); }
}

@media (max-width: 860px) {
  .hamburguer { display: inline-flex; }
  .topo__contato { display: none; }
  .nav {
    position: fixed; inset: 76px 0 auto; margin: 0;
    flex-direction: column; gap: 0;
    background: var(--branco); border-bottom: 1px solid var(--nevoa);
    padding: var(--e-4) var(--e-6) var(--e-6);
    box-shadow: var(--sombra);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity var(--transicao), transform var(--transicao);
  }
  .nav[data-aberto='true'] { transform: none; opacity: 1; pointer-events: auto; }
  .nav a { padding: var(--e-4) var(--e-2); border-radius: var(--r-pequeno); font-size: 1rem; }
  .nav .btn { margin-top: var(--e-4); }
}

@media (max-width: 640px) {
  .grade--3, .grade--4, .form-linha { grid-template-columns: 1fr; }
  .numeros { grid-template-columns: repeat(2, 1fr); }
  .rodape__grade { grid-template-columns: 1fr; }
  .hero__prova { flex-wrap: wrap; }
  .card { padding: var(--e-6); }
  .card-servico__corpo { padding: var(--e-5) var(--e-6) var(--e-6); }
  .zap span { display: none; }
  .zap { padding: 14px; }
}

/* A animação é enfeite: quem pediu menos movimento recebe menos movimento. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .revelar { opacity: 1; transform: none; }
}

/* =============================================================
   Mapa da infraestrutura (herói visual)
   O diagrama é o herói — mostra o caminho do tráfego do cliente até
   dentro do Data Center, nas mesmas camadas dos serviços vendidos.
   ============================================================= */
.mapa {
  background: var(--gelo);
  border: 1px solid var(--nevoa);
  border-radius: var(--r-card);
  padding: clamp(14px, 2vw, 22px);
  box-shadow: var(--sombra);
}
.mapa__svg { width: 100%; height: auto; display: block; }

.mapa__legenda {
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5);
  list-style: none; margin: var(--e-5) 0 0; padding: var(--e-4) 0 0;
  border-top: 1px solid var(--nevoa);
}
.mapa__legenda li {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.75rem; font-weight: 500; color: var(--ardosia);
}
.mapa__legenda svg { color: var(--laranja); flex: none; }

/* =============================================================
   Foto institucional
   ============================================================= */
.foto {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sombra);
}
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Selo de anos sobre o canto da foto. */
.foto__selo {
  position: absolute; right: 16px; bottom: 16px;
  display: grid; place-items: center; text-align: center;
  width: 108px; height: 108px; border-radius: 50%;
  background: var(--laranja); color: #fff;
  box-shadow: 0 12px 28px -12px rgba(217, 80, 13, .7);
}
.foto__selo strong {
  display: block; font-family: var(--fonte-display);
  font-size: 2rem; line-height: 1; letter-spacing: -.03em;
}
.foto__selo span { display: block; font-size: 0.6875rem; line-height: 1.25; margin-top: 3px; }

.foto-legenda {
  margin-top: var(--e-4); font-size: 0.75rem; color: var(--ardosia);
  display: flex; align-items: center; gap: var(--e-2);
}
.foto-legenda svg { color: var(--laranja); flex: none; }

/* ================================================ linha do tempo */
.tempo { list-style: none; margin: 0; padding: 0; position: relative; }
.tempo::before {
  content: ''; position: absolute; left: 39px; top: 12px; bottom: 12px;
  width: 2px; background: linear-gradient(var(--laranja), var(--nevoa));
  border-radius: 2px;
}
.tempo__item {
  display: grid; grid-template-columns: 80px 1fr; gap: var(--e-5);
  align-items: start; padding-bottom: var(--e-8); position: relative;
}
.tempo__item:last-child { padding-bottom: 0; }
.tempo__ano {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--branco); border: 2px solid var(--laranja);
  font-family: var(--fonte-display); font-weight: 700; font-size: 1.0625rem;
  color: var(--laranja);
}
.tempo__titulo { font-size: 1.125rem; margin: 14px 0 6px; }
.tempo__texto { color: var(--ardosia); font-size: var(--t-pequeno); }

/* ==================================================== contato */
.contato-lista { list-style: none; margin: var(--e-10) 0 0; padding: 0; }
.contato-lista li {
  display: flex; gap: var(--e-4); align-items: center;
  padding-block: var(--e-4); border-top: 1px solid rgba(255,255,255,.1);
}
.contato-lista .icone-quadro { margin: 0; width: 44px; height: 44px; }
.contato-lista__rotulo {
  display: block; font-size: 0.6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: #94a3c4; margin-bottom: 2px;
}
.contato-lista a, .contato-lista span:not(.contato-lista__rotulo) { color: #fff; font-size: var(--t-pequeno); }
.contato-lista a:hover { color: var(--laranja); }

/* O cartão é branco mesmo dentro da faixa navy, então precisa
   reverter as cores de texto que a faixa impõe. */
.secao--navy .cartao-form .form-campo label { color: var(--navy); }
.secao--navy .cartao-form .subtitulo,
.secao--navy .cartao-form p { color: var(--ardosia); }

.cartao-form {
  background: var(--branco); color: var(--navy);
  border-radius: var(--r-card); padding: clamp(24px, 3vw, 36px);
  box-shadow: var(--sombra);
}

/* ============================ página de serviço / conteúdo interno */
.conteudo-grade {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(32px, 5vw, 64px); align-items: start;
}
.lateral {
  position: sticky; top: 104px;
  background: var(--gelo); border: 1px solid var(--nevoa);
  border-radius: var(--r-card); padding: var(--e-8);
}
.lateral h3 { font-size: 1.0625rem; margin-bottom: var(--e-5); }
.lateral ul { list-style: none; margin: 0 0 var(--e-6); padding: 0; }
.lateral li + li { border-top: 1px solid var(--nevoa); }
.lateral li a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  padding: 11px 0; font-size: var(--t-pequeno); color: var(--ardosia);
  transition: color var(--transicao), padding-left var(--transicao);
}
.lateral li a:hover, .lateral li a[aria-current='page'] { color: var(--laranja); padding-left: 6px; }
.lateral li a[aria-current='page'] { font-weight: 600; }
.lateral li svg { opacity: 0; transition: opacity var(--transicao); flex: none; }
.lateral li a:hover svg { opacity: 1; }

/* Palco maior do wireframe na página do serviço. */
.palco-servico {
  background: var(--gelo); border: 1px solid var(--nevoa);
  border-radius: var(--r-card); padding: clamp(20px, 4vw, 44px);
  margin-bottom: var(--e-10); aspect-ratio: 16 / 8;
  display: flex; align-items: center; justify-content: center;
}
.palco-legenda {
  display: flex; align-items: center; gap: var(--e-2);
  font-size: 0.75rem; color: var(--ardosia); margin: calc(var(--e-10) * -1 + 4px) 0 var(--e-10);
}
.palco-legenda i { width: 18px; height: 2px; background: var(--laranja); border-radius: 2px; flex: none; }

@media (max-width: 940px) {
  .conteudo-grade { grid-template-columns: 1fr; }
  .lateral { position: static; }
}
@media (max-width: 640px) {
  .foto__selo { width: 88px; height: 88px; right: 12px; bottom: 12px; }
  .foto__selo strong { font-size: 1.625rem; }
  .tempo__item { grid-template-columns: 60px 1fr; gap: var(--e-4); }
  .tempo__ano { width: 60px; height: 60px; font-size: .9375rem; }
  .tempo::before { left: 29px; }
  .palco-servico { aspect-ratio: 4 / 3; }
}

/* Card de convite que fecha a grade de serviços. */
.card-convite {
  background: var(--gelo); border-color: var(--nevoa);
  justify-content: center;
}
.card-convite:hover { transform: none; box-shadow: none; border-color: var(--laranja); }
.card-convite .icone-quadro { background: var(--branco); }
.card-convite .btn--texto { margin-top: var(--e-5); }

/* =============================================================
   Herói com vídeo de fundo
   O véu é o que faz o vídeo virar cenário: escurece do lado do
   texto, deixa respirar do lado do diagrama e dissolve para o navy
   da seção seguinte, emendando os dois blocos escuros do topo.
   ============================================================= */
.hero--video {
  position: relative;
  isolation: isolate;
  color: #fff;
  padding-block: clamp(96px, 14vh, 150px) clamp(80px, 11vh, 128px);
  /* Sem card na coluna direita, é a altura mínima que dá espaço ao vídeo. */
  min-height: min(88vh, 780px);
  display: flex;
  align-items: center;
  background: var(--navy);
}
/* O texto ocupa a coluna esquerda; a direita fica livre para o vídeo. */
.hero--video .hero__grade { width: 100%; align-items: center; }
.hero--video .hero__grade > :first-child { max-width: 34rem; }

.hero__fundo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }

.hero__video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  /* O vídeo entra dessaturado e escuro: ele é fundo, não protagonista. */
  filter: saturate(var(--video-satur)) brightness(var(--video-brilho)) contrast(1.04);
  transform: scale(1.04);          /* esconde a borda do object-fit */
}

.hero__veu {
  position: absolute; inset: 0;
  opacity: var(--video-veu);
  background:
    /* 1. Coluna do texto — precisa de contraste real, não estético */
    linear-gradient(100deg,
      rgba(9, 15, 30, .93) 0%,
      rgba(9, 15, 30, .8) 32%,
      rgba(9, 15, 30, .4) 56%,
      rgba(9, 15, 30, .22) 76%,
      rgba(9, 15, 30, .48) 100%),
    /* 2. Dissolve para o navy da seção seguinte */
    linear-gradient(to bottom,
      rgba(16, 26, 49, .78) 0%,
      rgba(16, 26, 49, .16) 28%,
      rgba(16, 26, 49, .22) 54%,
      rgba(16, 26, 49, .8) 86%,
      var(--navy) 100%);
}

/* Textura fina por cima: tira o aspecto de vídeo comprimido. */
.hero__veu::after {
  content: ''; position: absolute; inset: 0; opacity: .5;
  background-image: repeating-linear-gradient(
    to bottom, rgba(255,255,255,.022) 0 1px, transparent 1px 3px);
}

/* --- conteúdo sobre o vídeo --- */
.hero--video .eyebrow { color: #b9c6e2; }
.hero--video .eyebrow::before { background: var(--laranja); }
.hero--video h1 { color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.hero--video .subtitulo { color: #cdd7ea; }
.hero--video .btn--contorno { border-color: rgba(255,255,255,.4); color: #fff; }
.hero--video .btn--contorno:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.hero--video .hero__prova { border-top-color: rgba(255,255,255,.16); color: #b9c6e2; }
.hero--video .hero__prova strong { color: #fff; }
.hero--video .hero__prova > div + div { border-left-color: rgba(255,255,255,.16); }

/* --- diagrama em vidro sobre o vídeo --- */
.mapa--escuro {
  background: rgba(13, 21, 40, .58);
  border-color: rgba(255, 255, 255, .16);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  box-shadow: 0 32px 64px -40px rgba(0, 0, 0, .8);
}
.mapa--escuro .wf {
  --w-linha: #6a7a9e;
  --w-forte: #9dabc9;
  --w-texto: #c3cee5;
  --w-papel: rgba(255, 255, 255, .09);
}
.mapa--escuro .wf__leve { fill: #7d8cb0; opacity: .5; }
.mapa--escuro .mapa__legenda { border-top-color: rgba(255,255,255,.14); }
.mapa--escuro .mapa__legenda li { color: #b9c6e2; }

/* --- navegação clara enquanto está sobre o vídeo --- */
.topo__logo--clara { display: none; }

.tem-hero-escuro .topo {
  position: fixed; inset: 0 0 auto;
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
/* O herói já tem padding suficiente para o header sobreposto. */
.tem-hero-escuro .topo:not(.topo--fixo) .topo__logo--escura { display: none; }
.tem-hero-escuro .topo:not(.topo--fixo) .topo__logo--clara  { display: block; }
.tem-hero-escuro .topo:not(.topo--fixo) .nav > a { color: #fff; }
.tem-hero-escuro .topo:not(.topo--fixo) .nav > a:hover,
.tem-hero-escuro .topo:not(.topo--fixo) .nav > a[aria-current='page'] {
  background: rgba(255,255,255,.14); color: #fff;
}
.tem-hero-escuro .topo:not(.topo--fixo) .topo__contato { border-left-color: rgba(255,255,255,.22); }
.tem-hero-escuro .topo:not(.topo--fixo) .topo__contato .rotulo { color: #b9c6e2; }
.tem-hero-escuro .topo:not(.topo--fixo) .topo__contato .numero { color: #fff; }
.tem-hero-escuro .topo:not(.topo--fixo) .hamburguer { border-color: rgba(255,255,255,.32); }
.tem-hero-escuro .topo:not(.topo--fixo) .hamburguer span,
.tem-hero-escuro .topo:not(.topo--fixo) .hamburguer span::before,
.tem-hero-escuro .topo:not(.topo--fixo) .hamburguer span::after { background: #fff; }

/* Ao rolar, a barra volta ao branco padrão. */
.tem-hero-escuro .topo--fixo {
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(14px) saturate(180%);
}

@media (max-width: 860px) {
  /* Num quadro estreito o 16:9 é cortado dos lados; centralizado, perdia
     a ação, que fica à direita. Desloca o recorte para lá. O gradiente
     gravado no vídeo sai de cena junto, mas aqui quem garante a leitura
     do texto é o véu vertical logo abaixo. */
  .hero__video { object-position: 72% center; }

  /* No mobile o vídeo fica mais escuro: o texto ocupa a largura toda. */
  /* Com o recorte deslocado, o trecho visível do vídeo é a parte clara
     e cheia de ação — o véu precisa compensar o que o gradiente gravado
     deixou de cobrir. */
  .hero__veu {
    background: linear-gradient(to bottom,
      rgba(9, 15, 30, .94) 0%,
      rgba(9, 15, 30, .84) 42%,
      rgba(16, 26, 49, .93) 84%,
      var(--navy) 100%);
  }
  /* Menu aberto sobre o vídeo precisa de fundo sólido. */
  .tem-hero-escuro .nav { background: var(--navy); border-bottom-color: rgba(255,255,255,.12); }
  .tem-hero-escuro .topo:not(.topo--fixo) .nav > a:hover { background: rgba(255,255,255,.1); }
}

@media (prefers-reduced-motion: reduce) {
  /* Fundo parado: o poster já conta a história. O JS remove o <video>
     nesse caso, então aqui basta garantir o fundo. */
  .hero__fundo {
    background: url('/assets/video/hero-poster.jpg') center/cover no-repeat, var(--navy);
  }
}


/* =============================================================
   Convivência com o widget de atendimento (Chatwoot)
   A bolha do chat ocupa o canto inferior direito (~64px + 20px de
   margem). O botão do WhatsApp sai da frente em vez de brigar por
   espaço — no site antigo os dois ficavam lado a lado assim.
   ============================================================= */
.zap { right: 100px; }

/* A bolha do chat precisa ficar acima do conteúdo, mas abaixo do
   menu mobile aberto, que é o único elemento que pode cobri-la. */
.woot--bubble-holder,
.woot-widget-holder { z-index: 95 !important; }

@media (max-width: 640px) {
  .zap { right: 86px; bottom: 22px; }
}

/* Espaço morto no rodapé para os dois botões não taparem o texto final. */
.rodape__base { padding-bottom: calc(var(--e-6) + 56px); }