:root{
  --bg:#FFFFFF;
  --bg-2:#F2F2F2;
  --surface:#FFFFFF;
  --surface-2:#E8E8E8;
  --line:#E0E0E0;
  --line-2:#8A8A8A;
  --ink:#151515;
  --text:#151515;
  --text-2:#4D4D4D;
  --text-3:#5F5F5F;
  --accent:#0B5CAB;
  --accent-deep:#0A2F55;
  --accent-grad:linear-gradient(180deg,#1268BD,#0A2F55);
  --accent-bg:#E8F1FA;
  --gold:#A87813;
  --gold-ink:#8A6212;
  --gold-bg:#FAF3E3;
  --sans:"Red Hat Text",Arial,Helvetica,sans-serif;
  --display:"Red Hat Display","Red Hat Text",Arial,Helvetica,sans-serif;
  --label-track:.12em;   /* microrrótulo em caixa alta: um tracking só */
  --wrap:1160px;

  accent-color:var(--accent);
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
ul{margin:0;padding:0;list-style:none}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:500;line-height:1.2;letter-spacing:normal}

/* pular para o conteúdo — só aparece no foco por teclado */
.skip{
  position:absolute;left:16px;top:-64px;z-index:200;
  padding:12px 20px;background:var(--accent-deep);color:var(--surface);
  font-size:15px;font-weight:500;text-decoration:none;
  transition:top .16s ease;
}
.skip:focus{top:16px}

::selection{background:var(--accent);color:var(--surface)}
/* superfícies que o navegador desenha e que também são do sistema */
html{scrollbar-color:var(--line-2) var(--bg-2);scrollbar-width:thin}
:where(a,button,summary){-webkit-tap-highlight-color:rgba(11,92,171,.18)}
.hero ::selection,.cta ::selection,.footer ::selection,.faixa ::selection{
  background:#A5D6F7;color:#0E1116;
}
::-moz-selection{background:var(--accent);color:var(--surface)}

/* anel de foco da marca — o padrão do navegador muda de cor por conta própria */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn:focus-visible{outline-offset:4px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.section{position:relative;padding:112px 0;scroll-margin-top:66px;overflow:clip}

@media(max-width:900px){.section{padding:84px 0}}
@media(max-width:640px){.section{padding:60px 0}}
/* faixa escura logo abaixo do hero */
.faixa{background:var(--ink);padding:30px 0 34px;overflow:hidden}
.faixa__head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:18px}
.faixa__ttl{
  color:#8A8A8A;font-size:12px;font-weight:700;letter-spacing:var(--label-track);
  text-transform:uppercase;
}
/* WCAG 2.2.2: movimento automático acima de 5s precisa de mecanismo de pausa */
.faixa__pausa{
  flex:none;background:none;border:1px solid #5E6B77;border-radius:999px;
  padding:5px 14px;color:#A3A3A3;font-family:inherit;font-size:12px;font-weight:700;
  letter-spacing:var(--label-track);text-transform:uppercase;cursor:pointer;
  transition:color .18s ease,border-color .18s ease;
}
@media (hover:hover){.faixa__pausa:hover{color:#FFFFFF;border-color:#6E7B87}}
.faixa__pausa:focus-visible{outline:2px solid #A5D6F7;outline-offset:3px}
.mq.is-parada .mq__track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.faixa__pausa{display:none}}
.faixa .mq{margin-top:0}
.faixa .mq__i{fill:#6E7B87;opacity:1}
@media (hover:hover){.faixa .mq__i:hover{fill:#FFFFFF}}

/* esteira de logos: ponta a ponta, cinza, laço sem emenda */
.mq{margin-top:34px;overflow:hidden;
  /* 3% = ~43px a 1440: menos de meia vaga de logo, então nada some por uma vaga inteira.
     Com 8% o esmaecimento cobria 115px e o logo entrava quase invisível. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
}
.mq__track{display:flex;width:max-content;animation:mq 42s linear infinite}
.mq__set{display:flex;align-items:center;gap:52px;padding-right:52px;flex:none}
.mq__i{width:36px;height:36px;flex:none;fill:var(--line-2);opacity:.85;transition:fill .2s ease,opacity .2s ease}
@media (hover:hover){.mq:hover .mq__track{animation-play-state:paused}
  .mq__i:hover{fill:var(--text);opacity:1}}
@keyframes mq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){
  .mq__track{animation:none;width:100%;flex-wrap:wrap;justify-content:center}
  .mq__set{flex-wrap:wrap;justify-content:center;gap:40px;padding:0}
  .mq__set[aria-hidden="true"]{display:none}
  .mq{-webkit-mask-image:none;mask-image:none}
}

/* brilho de fundo */
.glow{position:absolute;border-radius:50%;filter:blur(110px);opacity:.55;pointer-events:none;z-index:0}
.glow--accent{background:rgba(29,92,147,.16)}

.section > .wrap{position:relative;z-index:1}

/* ---------- badge pill ---------- */
/* rótulo de seção: texto solto, sem caixa nem pílula */
.badge{
  display:block;margin-bottom:18px;
  color:var(--text-3);font-size:13px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
}

/* ---------- títulos ---------- */
h1,h2,h3,.h-xl,.h-lg{font-family:var(--display)}
.h-xl{font-size:clamp(30px,3.4vw,46px);line-height:1.12;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.badge + .h-xl,.badge + .h-lg{margin-top:0}
.h-lg{font-size:clamp(26px,3.1vw,40px);line-height:1.14;font-weight:700;letter-spacing:-.012em}

.sub{color:var(--text-2);font-size:18px;line-height:1.55;max-width:60ch;margin:20px 0 0}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  padding:16px 32px;border-radius:999px;text-decoration:none;
  font-size:16px;font-weight:500;letter-spacing:normal;
  border:1px solid transparent;transition:.18s ease;cursor:pointer;
}
.btn--primary{
  background:var(--accent-grad);color:var(--surface);
  box-shadow:0 14px 32px -16px rgba(12,22,32,.55);
}
@media (hover:hover){
  .btn--primary:hover{transform:translateY(-2px);box-shadow:0 20px 40px -16px rgba(12,22,32,.7)}
  }
.btn--outline{border-color:var(--line-2);color:var(--text);background:var(--surface)}
.btn--outline:hover{border-color:var(--accent);color:var(--accent)}
.btn__arrow{line-height:1}
.btns{display:flex;flex-wrap:wrap;gap:16px;justify-content:flex-start;margin-top:40px}

/* links dentro de texto corrido */
.sub a,.card p a,.qa p a,.qas__fim a,.footer__about a{
  color:var(--accent);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;font-weight:500;transition:color .18s ease;
}
/* o traço engrossa em vez de sumir: sublinhado é o que diz que ali é link */
.sub a:hover,.card p a:hover,.qa p a:hover,.qas__fim a:hover,.footer__about a:hover{
  color:var(--accent-deep);text-decoration-thickness:2px;
}

/* ---------- header ---------- */
.header{
  position:sticky;top:0;z-index:80;
  background:var(--surface);
  border-bottom:1px solid var(--line);
}

/* o header sticky ocupa 66px do topo: sem este recuo, clicar na marca rola 66px
   demais e a faixa da seção seguinte aparece embaixo do hero */
#top{scroll-margin-top:66px}

/* o CTA da barra some enquanto o hero está na tela — o hero já tem o dele.
   O espaço fica reservado, então não há salto de layout quando ele volta. */
.header .btn--primary{transition:opacity .25s ease,transform .25s ease}
.header.is-hero .btn--primary{opacity:0;transform:translateY(-4px);pointer-events:none}
.header.is-hero .btn--primary:focus-visible{opacity:1;transform:none;pointer-events:auto}
.header__in{display:flex;align-items:stretch;justify-content:space-between;height:66px;gap:22px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text);flex:none;align-self:stretch}
.brand__mark{
  width:32px;height:32px;border-radius:0;flex:none;display:block;
  box-shadow:0 8px 20px -12px rgba(12,22,32,.6);
}
.brand__name{font-weight:500;font-size:21px;letter-spacing:normal;white-space:nowrap}
.brand__suffix{font-weight:400;font-size:21px;color:var(--text-3)}
.nav{display:flex;gap:32px;align-self:stretch}
.nav a{
  position:relative;display:flex;align-items:center;
  color:var(--text-2);text-decoration:none;font-size:16px;font-weight:500;letter-spacing:.25px;
}
.nav a:hover{color:var(--text)}
.header .btn{align-self:center;padding:10px 24px;font-size:15px}
@media(max-width:960px){.nav{display:none}}

/* menu sanduíche, ainda sem JS: quem abre e fecha é o próprio <details> */
.mobnav-wrap{display:none}
.mobnav{position:relative}
.mobnav__btn{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;
}
.mobnav__btn::-webkit-details-marker{display:none}
.mobnav__btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* três barras que viram X quando o menu abre */
.mobnav__bars{
  position:relative;display:block;width:22px;height:2px;
  background:var(--text);transition:background .12s ease;
}
.mobnav__bars::before,.mobnav__bars::after{
  content:"";position:absolute;left:0;width:22px;height:2px;
  background:var(--text);transition:transform .22s ease;
}
.mobnav__bars::before{transform:translateY(-7px)}
.mobnav__bars::after{transform:translateY(7px)}
.mobnav[open] .mobnav__bars{background:transparent}
.mobnav[open] .mobnav__bars::before{transform:rotate(45deg)}
.mobnav[open] .mobnav__bars::after{transform:rotate(-45deg)}
.mobnav ul{
  position:absolute;right:11px;top:calc(100% + 11px);min-width:250px;
  background:var(--surface);border:1px solid var(--line);overflow:hidden;
  box-shadow:0 16px 30px -20px rgba(12,22,32,.5);
}
.mobnav li a{
  display:block;padding:14px 20px;border-bottom:1px solid var(--line);
  color:var(--text);text-decoration:none;font-size:16px;font-weight:400;
}
.mobnav li:last-child a{border-bottom:0;color:var(--accent)}
/* abaixo de 960 o contato sai da barra: sobra só o sanduíche à direita. A ação não
   se perde — é o último item do menu, e o hero tem o CTA dele logo abaixo.
   O -11px puxa o ícone para que a barra encoste na mesma margem da marca, em vez
   de flutuar 11px para dentro por causa do alvo de 44px. */
@media(max-width:960px){
  .mobnav-wrap{display:flex;align-items:center;margin-right:-11px}
  .header .btn--primary{display:none}
  .header__in{gap:12px}
}
@media(max-width:420px){.brand__name{font-size:19px}}

/* ---------- hero ---------- */
/* O hero é o único bloco escuro do site. Vem das referências fixadas pelo cliente
   (Elytron, AWS, OCI): o topo é um bloco de cor saturada e a página desce para claro
   depois. Em fundo claro as curvas do canvas eram invisíveis e o hero se dissolvia no
   branco da página seguinte. Os tokens ficam escopados aqui para não vazarem. */
.hero{
  position:relative;overflow:hidden;border-bottom:none;
  /* tela cheia menos o header fixo de 66px */
  display:flex;align-items:center;
  padding:58px 0 66px;
  /* cor sólida + imagem, não o atalho: o fallback existe se o gradiente falhar, e
     ferramenta de contraste que não interpreta gradiente lê um fundo real aqui */
  background-color:#16436D;
  background-image:linear-gradient(158deg,#0E2C4A 0%,#1B4E7E 56%,#215F97 100%);
  --hero-ink:#FFFFFF;
  --hero-ink-2:#E8F0F8;
  --hero-accent:#A5D6F7;
  --hero-label:#E3EDF6;   /* frio, no registro da Dell: 5,63:1 contra o extremo claro do gradiente */
  --hero-cta:#D9AD48;
  --hero-cta-ink:#0F2036;
  --net-strong:rgba(255,255,255,.22);
  --net-faint:rgba(255,255,255,.11);
}
.hero h1{color:var(--hero-ink)}
.hero .badge{color:var(--hero-label)}
.hero .sub{color:var(--hero-ink-2)}
.hero .btn--primary{
  background:var(--hero-cta);background-image:none;border-color:var(--hero-cta);
  color:var(--hero-cta-ink);
  /* sem sombra: sobre o navy ela não se lê, e o mostarda já destaca o botão sozinho */
  box-shadow:none;
}
.hero .btn--outline{background:transparent;border-color:rgba(255,255,255,.5);color:var(--hero-ink)}
.hero .btn--outline:hover{border-color:var(--hero-ink);color:var(--hero-ink);background:rgba(255,255,255,.1)}
/* o anel global (--accent #0B5CAB) tem luminância idêntica à parada clara do
   gradiente: 1,00:1, invisível. Mesmo override que .cta e .footer já usam. */
.hero :focus-visible{outline-color:#A5D6F7}
/* sobre o dourado o anel claro dá 1,35:1: usa a tinta escura do próprio botão */
.hero .btn--primary:focus-visible,.cta .btn--primary:focus-visible{outline-color:#0F2036;outline-offset:3px}
.hero__note{color:#F2F7FB;font-size:15px;line-height:1.6}

/* o canvas some no alto contraste do Windows; o fundo do hero o próprio modo já
   substitui, então declará-lo aqui era redundante — e fazia ferramenta de contraste
   ler Canvas (branco) como o fundo real do hero */
@media (forced-colors: active){.hero__net{display:none}}
.hero__net{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  z-index:0;pointer-events:none;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(900px 400px at 78% 0%,rgba(255,255,255,.08),transparent 68%),
    radial-gradient(700px 340px at 6% 112%,rgba(168,120,19,.30),transparent 72%);
}
.hero__in{position:relative;z-index:2;width:100%;text-align:left;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.hero__art{min-width:0}
.isoh{display:block;width:100%;height:auto;max-width:346px;margin-left:auto;
  filter:drop-shadow(0 30px 50px rgba(4,16,30,.45))}
@media(max-width:1080px){
  .hero__in{grid-template-columns:1fr;gap:36px}
  .isoh{margin:0;max-width:460px}
}
@media(max-width:640px){.hero__art{display:none}}
.hero__copy{max-width:none}
.hero .sub{max-width:52ch;margin-left:0;margin-right:0}
.hero__note{margin:32px 0 0;max-width:62ch}

@media(max-width:900px){
  .hero{padding:52px 0 64px}
}

/* prova: um mockup conduz, dois apoiam — quebra a grade simétrica das outras seções */
/* a imagem ocupa o card inteiro; a moldura é só uma linha fina */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px;text-align:left}
.case{display:block;text-decoration:none;color:inherit}
.case__img{
  display:block;overflow:hidden;border:1px solid var(--line);background:var(--surface-2);
  transition:border-color .2s ease;
}
.case img{display:block;width:100%;height:auto;transition:transform .45s cubic-bezier(.16,1,.3,1)}
@media (hover:hover){
  .case:hover .case__img{border-color:var(--accent)}
  .case:hover img{transform:scale(1.03)}
}
.case:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.case__meta{display:block;padding-top:16px}
.case__setor{display:block;font-size:13px;color:var(--text-3);line-height:1.4}
.case__dom{display:block;margin-top:5px;font-family:var(--display);font-size:18px;font-weight:700;color:var(--text)}
.case__url{display:block;margin-top:3px;font-size:13px;color:var(--text-3)}
@media (hover:hover){.case:hover .case__dom,.case:hover .case__url{color:var(--accent)}}
@media(max-width:860px){.cases{grid-template-columns:1fr;gap:32px}}

/* ---------- as duas frentes ---------- */
/* dúvidas: <details> nativo, funciona sem JS como o menu mobile */
.qas{min-width:0;margin-top:40px}
.qa{border-top:1px solid var(--line)}
.qa:first-child{border-top:0}
.qa summary{
  position:relative;list-style:none;cursor:pointer;
  padding:22px 44px 22px 0;
  font-family:var(--display);font-size:18px;font-weight:700;line-height:1.35;color:var(--text);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";position:absolute;right:8px;top:31px;width:13px;height:13px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:translateY(-4px) rotate(45deg);transition:transform .2s ease;
}
.qa[open] summary::after{transform:translateY(2px) rotate(225deg)}
@media (hover:hover){.qa summary:hover{color:var(--accent)}}
.qa summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.qa p{padding:0 44px 26px 0;margin:0;font-size:16px;line-height:1.6;color:var(--text-2);max-width:80ch}
.qas__fim{margin-top:34px;font-size:16px;color:var(--text-2)}

/* serviços em três grupos: o momento é a taxonomia, os itens são as folhas */
.bloco{margin-top:52px}
.bloco + .bloco{margin-top:60px}
.bloco__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;
  padding-bottom:14px;border-bottom:2px solid var(--text)}
.bloco__n{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.bloco__d{font-size:15px;color:var(--text-3)}
/* a linha de reconhecimento vem primeiro e lidera; a lista de entrega desce um degrau.
   Antes as duas saíam iguais: .serv p ganhava de .serv__quem por especificidade. */
.serv p.serv__quem{font-size:15px;color:var(--text-2);line-height:1.45;margin-top:8px}
.serv p:not(.serv__quem){margin-top:6px;font-size:13px}

/* serviços nomeados como categoria que se compra */
.servs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:1px;text-align:left;
  background:var(--line);border:1px solid var(--line)}
.serv{display:block;padding:28px 26px 30px;background:var(--surface);text-decoration:none;
  transition:background .2s ease}
.serv:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media (hover:hover){.serv:hover{background:var(--bg-2)}}
.serv h3{font-family:var(--display);font-size:18px;font-weight:700;line-height:1.25;color:var(--text)}
@media (hover:hover){.serv:hover h3{color:var(--accent)}}
.serv p{margin-top:8px;font-size:15px;line-height:1.5;color:var(--text-3);max-width:42ch}
@media(max-width:1040px){.servs{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.servs{grid-template-columns:1fr}}

/* ---------- cards de sistema ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:56px;
  background:var(--line);border:1px solid var(--line)}

.card{
  position:relative;padding:30px 28px;background:var(--surface);text-align:left;
  display:flex;flex-direction:column;
}
@media (hover:hover){.card:hover{background:var(--bg-2)}}
.card__tag{
  font-size:12px;font-weight:600;letter-spacing:var(--label-track);text-transform:uppercase;color:var(--accent);
}
.card h3{margin:14px 0 12px;font-size:20px;font-weight:600;line-height:1.2}
.card p{color:var(--text-2);font-size:16px;max-width:46ch}
.card dl{margin:16px 0 0}
.card dt{font-size:12px;font-weight:600;letter-spacing:var(--label-track);text-transform:uppercase;color:var(--text-3);margin-top:14px}
.card dd{margin:5px 0 0;color:var(--text-2);font-size:15px}
.card__stack{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:22px}

/* seção em duas colunas: título fixo à esquerda, lista correndo à direita.
   Quebra o ritmo de "título centrado + grade" das outras seções. */
.dupla{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:80px;align-items:start}
/* ritmo alternado: os quatro sinais têm arte à esquerda, o processo à direita */
.dupla--inv{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:64px}
.dupla--inv .dupla__head{position:static}
.dupla__art{min-width:0}
.isos{display:block;width:100%;height:auto;max-width:330px;margin-left:auto}

@media(max-width:900px){.dupla--inv{grid-template-columns:1fr;gap:32px}.isos{margin:0;max-width:280px}}
.dupla__head{position:sticky;top:98px}

@media(max-width:900px){
  .dupla{grid-template-columns:1fr;gap:36px}
  .dupla__head{position:static}
}

/* diagramas dos casos de uso: desenhados à mão, mostram o mecanismo real */
.diag{display:block;width:100%;height:auto;margin:0 0 20px}
.diag__lb{font:700 12px var(--sans);letter-spacing:.04em}
.diag__sm{font:12px var(--sans)}
.card__stack span{
  font-size:12px;font-weight:600;padding:5px 11px;border-radius:0;
  background:var(--accent-bg);border:1px solid rgba(29,92,147,.24);color:var(--accent);
}
@media(max-width:940px){.cards{grid-template-columns:1fr 1fr}}
@media(max-width:660px){.cards{grid-template-columns:1fr}}

/* ---------- passos ---------- */
/* etapas ligadas por uma régua: linha do tempo, não três caixas soltas */
/* frentes de competência: cada uma carrega uma tese, não um passo */
.frentes{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:48px;text-align:left;
  background:var(--line);border:1px solid var(--line)}
.frente{padding:30px 28px 32px;background:var(--surface)}
.frente h3{font-family:var(--display);font-size:20px;font-weight:700;line-height:1.25;color:var(--text)}
.frente p{margin-top:10px;font-size:15px;line-height:1.55;color:var(--text-2);max-width:38ch}
@media(max-width:1000px){.frentes{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.frentes{grid-template-columns:1fr}}

/* ---------- pilares ---------- */
/* pilares sem caixa: régua no topo em vez de borda em volta.
   Duas grades 2x2 iguais na mesma página era a repetição mais visível. */
.pillars{display:grid;grid-template-columns:repeat(5,1fr);gap:30px;margin-top:52px;text-align:left;
  background:none;border:0}
.pillar{display:flex;flex-direction:column;padding:0;background:none;border-top:0}
.pillar__ico{display:block;width:52px;height:52px;margin-bottom:18px}
.pillar h3{font-family:var(--display);font-size:20px;font-weight:700;margin-bottom:8px}
.pillar p{color:var(--text-2);font-size:15px}
@media(max-width:1180px){.pillars{grid-template-columns:repeat(3,1fr);gap:32px}}
@media(max-width:820px){.pillars{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:520px){.pillars{grid-template-columns:1fr;gap:26px}}
@media(max-width:600px){.pillars{grid-template-columns:1fr;gap:28px}}

/* ---------- cta final ---------- */
/* o fecho responde ao hero: a página abre e fecha no mesmo bloco escuro */
.cta{
  /* ponta a ponta: a seção inteira é o bloco, o .wrap segura só o texto */
  position:relative;overflow:hidden;border-radius:0;padding:110px 0;text-align:left;
  background:linear-gradient(158deg,#0E2C4A 0%,#1B4E7E 58%,#215F97 100%);
  border:0;
  /* os tokens do CTA moram no .hero; redeclarados aqui para o bloco escuro do fim */
  --hero-cta:#D9AD48; --hero-cta-ink:#0F2036;
}
.cta::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(1100px 420px at 22% -10%,rgba(255,255,255,.13),transparent 70%);
}
.cta > .wrap{position:relative;z-index:1}
.cta__in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:64px;align-items:center}
.cta__copy{min-width:0}

/* tradução do bloco da Red Hat: canto reto no lugar do arredondado, dourado no lugar
   do vermelho. Com foto de cena (e não retrato), a profundidade vem da camada
   deslocada — recortar tiraria justamente o que a foto tem de conteúdo. */
.fig{position:relative;margin:0;justify-self:end;width:100%;max-width:440px}
.fig::before{content:"";position:absolute;inset:28px -24px -24px 28px;background:var(--hero-cta,#D9AD48)}
.fig__img{position:relative;display:block;width:100%;height:auto}
@media(max-width:900px){.fig{justify-self:start;max-width:360px}.fig::before{inset:20px -18px -18px 20px}}
@media(max-width:520px){
  /* a foto é a única evidência humana da página: some no aparelho do público principal */
  .fig{max-width:none;justify-self:stretch}
  .fig::before{inset:18px -14px -14px 18px}
}
/* o #contato era o único bloco de duas colunas sem colapso: abaixo de 640 a foto
   sumia mas a coluna dela continuava ocupando .85fr + 64px de gap */
@media(max-width:640px){
  .cta__in{grid-template-columns:1fr;gap:32px}
  .cta{padding:64px 0}
}
@media(max-width:480px){
  .btns{gap:12px}
  .hero .btn,.cta .btn{width:100%;justify-content:center}
}
.cta .sub{max-width:56ch;margin-left:0}
.cta h2{color:#FFFFFF}
.cta .sub{color:#CFDDE9}
.cta .btn--primary{
  background:var(--hero-cta);background-image:none;border-color:var(--hero-cta);
  color:var(--hero-cta-ink);
}
.cta .btn--outline{background:transparent;border-color:rgba(255,255,255,.5);color:#FFFFFF}
.cta .btn--outline:hover{border-color:#FFFFFF;color:#FFFFFF;background:rgba(255,255,255,.1)}
.cta :focus-visible{outline-color:#A5D6F7}

/* ---------- footer ---------- */
/* rodapé escuro no tom da Red Hat (--rh-color-surface-darker) */
.footer{border-top:0;background:#1F1F1F;color:#C7C7C7;padding:72px 0 44px}
/* .footer a{display:inline-block} tem especificidade maior que .brand: sem isto a marca quebra */
.footer .brand{display:flex;width:fit-content;color:#FFFFFF;padding:6px 0}
.footer .brand__suffix{color:#A3A3A3}
.footer .brand__mark{background:rgba(255,255,255,.14);box-shadow:none;color:#FFFFFF}
.footer__cols{display:grid;grid-template-columns:1.6fr 1fr 1fr .4fr 1.2fr;gap:32px}
/* o contato fica sozinho na última coluna, com a quarta vazia como respiro */
.footer__cols > div:last-child{grid-column:5}

.footer__ttl{
  font-size:12px;font-weight:700;letter-spacing:var(--label-track);text-transform:uppercase;
  color:#A3A3A3;margin-bottom:16px;
}
.footer li{padding:0}
.footer a{display:inline-block;padding:6px 0;color:#E0E0E0;text-decoration:none;font-size:15px;line-height:1.35}
.footer a:hover{color:#FFFFFF;text-decoration:underline}
.footer :focus-visible{outline-color:#A5D6F7}
.footer__about{color:#A3A3A3;font-size:15px;max-width:38ch;margin-top:16px}
.footer__bar{
  margin-top:48px;padding-top:24px;border-top:1px solid #4A4A4A;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  color:#A3A3A3;font-size:13px;letter-spacing:.04em;
}
@media(max-width:1180px){.footer__cols{grid-template-columns:repeat(3,1fr);gap:36px}.footer__brandcol{grid-column:1/-1}.footer__cols>div:last-child{grid-column:auto}}
@media(max-width:760px){.footer__cols{grid-template-columns:1fr 1fr}.footer__cols>div:last-child{grid-column:auto}}
@media(max-width:460px){.footer__cols{grid-template-columns:1fr}.footer__cols>div:last-child{grid-column:auto}}

/* =========================================================================
   COMPONENTES DAS PÁGINAS INTERNAS
   ========================================================================= */

/* hero reduzido das páginas internas */
.hero--page{padding:74px 0 66px}
.hero--page .h-xl{font-size:clamp(28px,3.6vw,40px)}
.hero--page .sub{margin-top:20px}

/* aviso destacado */

/* faixa de navegação entre as duas frentes */
.crossnav{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:52px;text-align:left;
  background:var(--line);border:1px solid var(--line)}
.crossnav a{
  display:block;padding:30px 32px;background:var(--surface);text-decoration:none;
  color:var(--text);transition:.16s ease;
}
.crossnav a:hover{background:var(--bg-2)}
.crossnav span{font-size:12px;font-weight:600;letter-spacing:var(--label-track);text-transform:uppercase;color:var(--gold-ink)}
.crossnav h3{font-size:20px;font-weight:600;margin:10px 0 8px}
.crossnav p{color:var(--text-2);font-size:15px}
.crossnav em{font-style:normal;color:var(--accent);font-weight:500;display:inline-block;margin-top:12px}
@media(max-width:760px){.crossnav{grid-template-columns:1fr}}

/* link ativo no menu */
/* ativo: muda a cor e ganha a barra inferior — o peso é o mesmo dos outros */
.nav a.is-active{color:var(--text)}
.nav a.is-active::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--accent);border-radius:0;
}

/* no toque os alvos precisam de 44px; no ponteiro fino 24px basta (WCAG 2.5.8) */
@media (pointer:coarse){
  .footer a{padding:13px 0}
  
}