/* Severino: the doorman's colours, taken from the mascot. */
:root {
  --farda: #011d41;       /* uniform navy: text and dark bands */
  --quepe: #013166;       /* cap blue: links */
  --quepe-claro: #8cbcf5; /* cap blue lifted for navy backgrounds */
  --laranja: #ee8f3b;     /* the face: the one action colour, and the ports on the board */
  --papel: #eef2f7;       /* cool paper */
  --feltro: #0a2546;      /* letterboard felt */
  --letra: #f6f8fb;       /* plastic letters */
  --linha: #c9d3e0;
  --texto-suave: #3d5170;

  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --corpo: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --codigo: "Cascadia Mono", Consolas, "SFMono-Regular", monospace;

  --largura: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papel);
  color: var(--farda);
  font-family: var(--corpo);
  font-size: 1.125rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--quepe); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

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

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  background: var(--farda);
  color: #fff;
  padding: 10px 14px;
  border-radius: 6px;
  z-index: 10;
}
.skip:focus { top: 12px; }

h1, h2, h3 {
  font-family: var(--display);
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}

h2 {
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  font-weight: 750;
  font-variation-settings: "wdth" 88;
  letter-spacing: -0.015em;
  max-width: 22ch;
}

h3 {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
}

p { margin: 0; }

.secao-lead {
  margin-top: 16px;
  font-size: 1.25rem;
  color: var(--texto-suave);
  max-width: 60ch;
}

/* Buttons: one colour for the one thing to do. */
.botao {
  display: inline-block;
  background: var(--laranja);
  color: var(--farda);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.125rem;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: 999px;
  box-shadow: inset 0 -3px 0 rgb(1 29 65 / 0.18);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.botao:hover { transform: translateY(-1px); box-shadow: inset 0 -4px 0 rgb(1 29 65 / 0.22); }
.botao:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 rgb(1 29 65 / 0.2); }
/* In the header: outlined, so the page keeps a single orange button in view. */
.botao-pequeno {
  font-size: 1rem;
  padding: 7px 18px;
  background: transparent;
  color: var(--farda);
  border: 2px solid var(--farda);
  box-shadow: none;
}
.botao-pequeno:hover { background: var(--farda); color: #fff; box-shadow: none; }

.link-forte { font-weight: 600; color: var(--farda); }

.nota {
  margin-top: 14px;
  font-size: 0.95rem;
  color: var(--texto-suave);
}

/* ---------- Header ---------- */

.topo {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  gap: 28px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--farda);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.375rem;
  margin-right: auto;
}

.topo nav { display: flex; gap: 24px; }
/* The other language, by its own name; stays when the nav folds away on phones. */
.idioma { color: var(--texto-suave); font-weight: 600; font-size: 0.95rem; text-decoration: none; }
.idioma:hover { color: var(--farda); text-decoration: underline; }
.topo nav a { color: var(--farda); text-decoration: none; font-weight: 600; font-size: 1rem; }
.topo nav a:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .topo nav { display: none; }
}

/* ---------- Opening: headline and the lobby board ---------- */

.abertura {
  max-width: var(--largura);
  margin: 0 auto;
  padding: clamp(32px, 6vw, 72px) var(--gutter) clamp(56px, 8vw, 104px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.abertura h1 {
  font-size: clamp(3rem, 7.4vw, 6rem);
  font-weight: 800;
  font-variation-settings: "wdth" 80, "opsz" 96;
  letter-spacing: -0.025em;
  line-height: 0.95;
}

.abertura-lead {
  margin-top: 28px;
  font-size: 1.3125rem;
  max-width: 34em;
}
.abertura-lead strong { font-weight: 600; }

.acoes {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}

/* The board: navy felt with grooves, plastic letters pressed in. */
.quadro-moldura {
  margin: 0;
  position: relative;
  padding-top: 64px;
}

.quadro-porteiro {
  position: absolute;
  width: clamp(120px, 15vw, 172px);
  top: 0;
  right: 0;
  transform: rotate(8deg);
  z-index: 2;
  filter: drop-shadow(0 10px 14px rgb(1 29 65 / 0.25));
}

.quadro {
  position: relative;
  background-color: var(--feltro);
  background-image: repeating-linear-gradient(
    to bottom,
    rgb(255 255 255 / 0.035) 0 1px,
    transparent 1px 13px,
    rgb(0 0 0 / 0.22) 13px 14px
  );
  border: 14px solid #5b3a22;
  border-image: linear-gradient(135deg, #7a5233, #4e3019 60%, #6b462b) 1;
  box-shadow: 0 24px 40px -18px rgb(1 29 65 / 0.55), inset 0 0 40px rgb(0 0 0 / 0.35);
  padding: clamp(18px, 3vw, 30px) clamp(16px, 3vw, 32px) clamp(22px, 3vw, 34px);
  color: var(--letra);
  font-family: var(--display);
  font-variation-settings: "wdth" 75;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: clamp(0.95rem, 1.9vw, 1.35rem);
}

.quadro-titulo {
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.35em;
  font-size: 1.15em;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 2px solid rgb(246 248 251 / 0.18);
}

.quadro ul { list-style: none; margin: 0; padding: 0; }
.quadro li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  white-space: nowrap;
}
.quadro .nome { overflow: hidden; text-overflow: ellipsis; }
.quadro .pontos {
  flex: 1;
  min-width: 16px;
  border-bottom: 3px dotted rgb(246 248 251 / 0.35);
  transform: translateY(-0.3em);
}
.quadro .porta { color: var(--laranja); }

/* Letters set by site.js: each one slightly off, as on a real board. */
.quadro .letra { display: inline-block; transform: rotate(var(--r, 0deg)) translateY(var(--y, 0)); }

.quadro.encaixando .letra {
  opacity: 0;
  animation: encaixar 260ms cubic-bezier(.2, .9, .3, 1.3) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes encaixar {
  from { opacity: 0; transform: translateY(-10px) rotate(var(--r, 0deg)); }
  to { opacity: 1; transform: rotate(var(--r, 0deg)) translateY(var(--y, 0)); }
}
@media (prefers-reduced-motion: reduce) {
  .quadro.encaixando .letra { animation: none; opacity: 1; }
}

@media (max-width: 900px) {
  .abertura { grid-template-columns: minmax(0, 1fr); }
  .quadro-moldura { max-width: 560px; }
}

/* ---------- The intro, playing on a framed screen in the lobby ---------- */

.apresentacao {
  max-width: var(--largura);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) var(--gutter);
  border-top: 1px solid var(--linha);
}

/* Same wooden frame as the board up top, so it reads as part of the lobby, not a player. */
.tela {
  position: relative;
  margin: clamp(32px, 4vw, 48px) 0 0;
  background: var(--farda);
  border: clamp(8px, 1.3vw, 14px) solid #5b3a22;
  border-image: linear-gradient(135deg, #7a5233, #4e3019 60%, #6b462b) 1;
  box-shadow: 0 30px 50px -24px rgb(1 29 65 / 0.6);
}
.tela::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.45), inset 0 0 36px rgb(0 0 0 / 0.35);
}
.tela video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* Moving for more than five seconds, so it needs a way to stop; kept small and quiet. */
.tela-pausa {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: 50%;
  background: rgb(1 29 65 / 0.6);
  color: #fff;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 120ms ease;
}
.tela-pausa[hidden] { display: none; }
.tela:hover .tela-pausa, .tela-pausa:focus-visible { opacity: 1; }
.tela-pausa .icone-play, .tela-pausa[aria-pressed="true"] .icone-pausa { display: none; }
.tela-pausa[aria-pressed="true"] .icone-play { display: block; }
@media (max-width: 600px) {
  .tela-pausa { width: 28px; height: 28px; right: 8px; bottom: 8px; }
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Where apps live: four places, one doorman ---------- */

.onde {
  max-width: var(--largura);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) var(--gutter);
  border-top: 1px solid var(--linha);
}
.onde h2 { max-width: 24ch; }

.onde-lista {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 36px);
}
.onde-lista li {
  border-top: 4px solid var(--laranja);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.onde-lista p { color: var(--texto-suave); flex: 1; }
.onde-lista code {
  font-family: var(--codigo);
  font-size: 0.82rem;
  background: var(--feltro);
  color: var(--letra);
  border-radius: 6px;
  padding: 8px 10px;
  white-space: nowrap;
  overflow-x: auto;
}

@media (max-width: 980px) {
  .onde-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .onde-lista { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- How it works: a real sequence, so numbered ---------- */

.como {
  max-width: var(--largura);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 104px) var(--gutter);
  border-top: 1px solid var(--linha);
}

.passos {
  list-style: none;
  counter-reset: passo;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 48px);
}

.passos li { counter-increment: passo; display: flex; flex-direction: column; gap: 12px; }
.passos li::before {
  content: counter(passo);
  font-family: var(--display);
  font-weight: 800;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--laranja);
}
.passos p { color: var(--texto-suave); }

.mock-form {
  margin-top: 8px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px 12px;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 16px;
  font-size: 0.95rem;
}
.mock-rotulo { color: var(--texto-suave); }
.mock-campo {
  border: 1px solid var(--linha);
  border-bottom: 2px solid var(--quepe);
  border-radius: 5px;
  padding: 6px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mock-arquivo {
  margin: 8px 0 0;
  background: #fff;
  border-left: 4px solid var(--quepe);
  padding: 14px 16px;
  font-family: var(--codigo);
  font-size: 0.8rem;
  line-height: 1.6;
  overflow-x: auto;
}
.mock-arquivo .comentario { color: #6a7d97; }

.mock-barra {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 1rem;
  box-shadow: 0 2px 0 var(--linha);
}
.mock-barra svg { color: #1f7a3f; flex: none; }

@media (max-width: 860px) {
  .passos { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- The app window, on the uniform's navy ---------- */

.janela {
  background: var(--farda);
  color: #e8eef7;
  padding: clamp(56px, 8vw, 104px) var(--gutter);
}
.janela > * { max-width: var(--largura); margin-left: auto; margin-right: auto; }
.janela h2, .janela h3 { color: #fff; }
.janela-texto p { margin-top: 16px; max-width: 58ch; color: #c5d3e6; font-size: 1.1875rem; }

.captura {
  border-radius: 10px;
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.08);
}
.captura-grande { margin-top: 48px; width: 100%; }

.janela-par {
  margin-top: clamp(56px, 7vw, 88px);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.captura-estreita { width: 100%; max-width: min(460px, 100%); justify-self: center; }
@media (max-width: 860px) {
  .janela-par { grid-template-columns: minmax(0, 1fr); }
}

/* Rotas, Serviços, DNS: tabs with JS; without it, the three panels one after the other. */
.abas { margin-top: 44px; }
.abas-lista { display: flex; gap: 6px; border-bottom: 1px solid rgb(255 255 255 / 0.16); }
.abas-lista[hidden] { display: none; }
.abas-lista button {
  font: inherit;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.125rem;
  color: #c5d3e6;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 12px 18px 10px;
  margin-bottom: -1px;
  cursor: pointer;
}
.abas-lista button:hover { color: #fff; }
.abas-lista button[aria-selected="true"] { color: #fff; border-bottom-color: var(--laranja); }

.painel {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
  padding-top: 36px;
}
.painel + .painel { margin-top: 48px; }
.abas.ativa .painel + .painel { margin-top: 0; }
.painel[hidden] { display: none; }
.painel .fatos li { color: #c5d3e6; }
.painel .fatos strong { color: #fff; }

@media (max-width: 900px) {
  .painel { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- More than one name per app ---------- */

.mais {
  max-width: var(--largura);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 104px) var(--gutter) clamp(40px, 6vw, 72px);
}

.mais-lista {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px clamp(28px, 5vw, 64px);
}
.mais-lista li { border-top: 3px solid var(--farda); padding-top: 18px; }
.mais-lista p { margin-top: 10px; color: var(--texto-suave); }
.mais-lista strong { color: var(--farda); font-weight: 600; }
.mais-lista .terminal { margin-top: 16px; font-size: 0.8rem; }

@media (max-width: 860px) {
  .mais-lista { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- FAQ ---------- */

.perguntas {
  background: #e2e8f1;
  padding: clamp(56px, 8vw, 104px) max(var(--gutter), calc((100% - var(--largura)) / 2 + var(--gutter)));
}

.perguntas-lista { margin-top: 36px; max-width: 820px; }
.perguntas details { border-top: 1px solid var(--linha); }
.perguntas details:last-child { border-bottom: 1px solid var(--linha); }
.perguntas summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 40px 18px 0;
  position: relative;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
}
.perguntas summary::-webkit-details-marker { display: none; }
/* A plus that turns into a minus: says it opens, and that it is open. */
.perguntas summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--quepe);
}
.perguntas details[open] summary::after { content: "−"; }
.perguntas details p { padding: 0 0 20px; max-width: 62ch; color: var(--texto-suave); }

/* ---------- Services ---------- */

.servicos {
  max-width: var(--largura);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 104px) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.servicos .secao-lead strong { color: var(--farda); }

.fatos { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 18px; }
.fatos li { padding-left: 18px; border-left: 3px solid var(--laranja); color: var(--texto-suave); }
.fatos strong { color: var(--farda); font-weight: 600; }

.servicos-visual { display: grid; gap: 20px; position: sticky; top: 24px; }
.servicos-visual .captura { box-shadow: 0 24px 48px -24px rgb(1 29 65 / 0.45), 0 0 0 1px var(--linha); }

.terminal {
  margin: 0;
  background: #06142b;
  color: #d9e4f3;
  border-radius: 10px;
  padding: 18px 20px;
  font-family: var(--codigo);
  font-size: 0.875rem;
  line-height: 1.7;
  overflow-x: auto;
}
.terminal .prompt { color: var(--laranja); }

@media (max-width: 900px) {
  .servicos { grid-template-columns: minmax(0, 1fr); }
  .servicos-visual { position: static; }
}

/* ---------- What it touches ---------- */

.seguranca {
  max-width: var(--largura);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 104px) var(--gutter);
  border-top: 1px solid var(--linha);
}

.lista-seguranca { margin: 40px 0 0; display: grid; gap: 0; }
.lista-seguranca > div {
  display: grid;
  grid-template-columns: minmax(150px, 0.3fr) minmax(0, 1fr);
  gap: 24px;
  padding: 22px 0;
  border-top: 1px solid var(--linha);
}
.lista-seguranca > div:last-child { border-bottom: 1px solid var(--linha); }
.lista-seguranca dt { font-family: var(--display); font-weight: 700; font-size: 1.25rem; }
.lista-seguranca dd { margin: 0; max-width: 62ch; color: var(--texto-suave); }

@media (max-width: 640px) {
  .lista-seguranca > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* ---------- Download ---------- */

.baixar {
  background: var(--quepe);
  color: #e8eef7;
  padding: clamp(56px, 8vw, 96px) var(--gutter);
  display: grid;
  grid-template-columns: auto minmax(0, 640px);
  justify-content: center;
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
}
.baixar img { width: clamp(140px, 18vw, 200px); filter: drop-shadow(0 14px 20px rgb(0 0 0 / 0.35)); }
.baixar h2 { color: #fff; }
.baixar p { margin-top: 16px; color: #d3dff0; }
.baixar .botao { margin-top: 28px; }
.baixar .nota { color: #b7c8e2; font-size: 0.95rem; }
.baixar a:not(.botao) { color: var(--quepe-claro); }

@media (max-width: 720px) {
  .baixar { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 404 ---------- */

.sumiu {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 20px;
  text-align: center;
  padding: 48px var(--gutter);
}
.sumiu img { width: 160px; transform: rotate(-6deg); }
.sumiu h1 {
  font-size: clamp(2.25rem, 6vw, 4rem);
  font-weight: 800;
  font-variation-settings: "wdth" 80;
  letter-spacing: -0.02em;
  max-width: 16ch;
}
.sumiu p { max-width: 46ch; color: var(--texto-suave); }

/* ---------- Footer ---------- */

.rodape {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 32px var(--gutter) 48px;
  color: var(--texto-suave);
  font-size: 1rem;
}