/* Astravel — site. Same language as the in-game "Linha" interface: dark, thin lines, lime and cyan. */
:root {
  --fundo: #07090f;
  --fundo-2: #0c1019;
  --painel: rgba(14, 19, 30, 0.82);
  --linha: rgba(232, 238, 252, 0.12);
  --linha-forte: rgba(232, 238, 252, 0.28);
  --texto: #e8eefc;
  --suave: #96a5be;
  --lima: #c9ff7a;
  --ciano: #5cc4ff;
  --verde: #4ade80;
  --amarelo: #facc15;
  --vermelho: #f87171;
  --raio: 4px;
  --largura: 1180px;
  --titulo: "Rajdhani", "Segoe UI", sans-serif;
  --corpo: "Inter", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 16px/1.65 var(--corpo); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--ciano); }
h1, h2, h3 { font-family: var(--titulo); font-weight: 600; line-height: 1.1; margin: 0; }
code { font-size: 0.92em; background: rgba(255, 255, 255, 0.06); padding: 1px 6px; border-radius: 3px; }

/* ------------------------------------------------------------------ top bar */
.topo {
  position: fixed; inset: 0 0 auto 0; z-index: 20; height: 60px;
  display: flex; align-items: center; gap: 28px; padding: 0 max(16px, calc((100vw - var(--largura)) / 2));
  background: rgba(7, 9, 15, 0.72); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linha);
}
.marca { font-family: var(--titulo); font-weight: 700; letter-spacing: 0.32em; color: var(--texto); text-decoration: none; font-size: 18px; }
.menu { display: flex; gap: 22px; margin-left: auto; }
.menu a { color: var(--suave); text-decoration: none; font-size: 14px; letter-spacing: 0.04em; }
.menu a:hover { color: var(--texto); }
.menu-abrir { display: none; background: none; border: 1px solid var(--linha-forte); color: var(--texto); border-radius: var(--raio); padding: 4px 10px; font-size: 18px; cursor: pointer; }

/* ------------------------------------------------------------------ buttons */
.botao {
  display: inline-block; padding: 13px 26px; border-radius: var(--raio); text-decoration: none; font-weight: 600;
  font-family: var(--titulo); letter-spacing: 0.08em; text-transform: uppercase; font-size: 15px;
  background: var(--lima); color: #0b1004; border: 1px solid var(--lima); transition: transform 0.15s, box-shadow 0.15s;
}
.botao:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(201, 255, 122, 0.22); }
.botao--linha { background: transparent; color: var(--texto); border-color: var(--linha-forte); }
.botao--linha:hover { border-color: var(--texto); box-shadow: none; }
.botao--pequeno { padding: 7px 16px; font-size: 13px; }
.botao--grande { padding: 18px 34px; font-size: 17px; }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding: 100px max(16px, calc((100vw - var(--largura)) / 2)) 80px; overflow: hidden; }
.hero-fundo { position: absolute; inset: 0; background-size: cover; background-position: 65% center; }
.hero-fundo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 9, 15, 0.95) 0%, rgba(7, 9, 15, 0.75) 38%, rgba(7, 9, 15, 0.15) 75%), linear-gradient(0deg, var(--fundo) 0%, transparent 30%); }
.hero-conteudo { position: relative; max-width: 620px; }
.selo { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lima); border: 1px solid rgba(201, 255, 122, 0.35); padding: 6px 12px; border-radius: 999px; margin: 0 0 26px; }
.bandeira { width: 18px; height: 12px; border-radius: 2px; background: #009c3b; position: relative; flex: none; }
.bandeira::before { content: ""; position: absolute; inset: 2px 3px; background: #ffdf00; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.bandeira::after { content: ""; position: absolute; width: 5px; height: 5px; left: 6.5px; top: 3.5px; border-radius: 50%; background: #002776; }
.hero h1 { font-size: clamp(38px, 6vw, 68px); font-weight: 600; letter-spacing: 0.01em; }
.hero-sub { font-family: var(--titulo); font-size: clamp(22px, 3vw, 32px); color: var(--lima); margin: 8px 0 22px; }
.hero-texto { color: var(--suave); font-size: 17px; max-width: 540px; margin: 0 0 30px; }
.hero-acoes { display: flex; gap: 14px; flex-wrap: wrap; }
.status { display: inline-flex; align-items: center; gap: 10px; margin-top: 34px; font-size: 14px; color: var(--suave); }
.ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--suave); box-shadow: 0 0 0 0 transparent; }
.status.online .ponto { background: var(--verde); box-shadow: 0 0 12px var(--verde); animation: pulso 2.4s infinite; }
.status.offline .ponto { background: var(--vermelho); }
@keyframes pulso { 50% { box-shadow: 0 0 2px var(--verde); } }

/* ------------------------------------------------------------------ numbers strip */
.numeros { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); background: var(--fundo-2); }
.numeros div { padding: 26px 16px; text-align: center; border-right: 1px solid var(--linha); }
.numeros div:last-child { border-right: 0; }
.numeros strong { display: block; font-family: var(--titulo); font-size: 40px; color: var(--texto); line-height: 1; }
.numeros span { font-size: 13px; color: var(--suave); text-transform: uppercase; letter-spacing: 0.1em; }

/* ------------------------------------------------------------------ sections */
.secao { padding: 110px max(16px, calc((100vw - var(--largura)) / 2)); }
.secao--escura { background: var(--fundo-2); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.rotulo { font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ciano); margin: 0 0 12px; }
.secao h2 { font-size: clamp(30px, 4vw, 46px); margin-bottom: 40px; max-width: 760px; }
.intro { color: var(--suave); max-width: 720px; margin: -20px 0 40px; }

/* history */
.historia { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: start; }
.historia-texto p { color: #c8d2e4; font-size: 17px; margin: 0 0 20px; }
.historia-texto strong { color: var(--texto); }
.linha-tempo { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 1px solid var(--linha-forte); }
.linha-tempo li { position: relative; padding: 0 0 22px 18px; }
.linha-tempo li::before { content: ""; position: absolute; left: -27px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--fundo); border: 1px solid var(--lima); }
.linha-tempo li:last-child::before { background: var(--lima); }
.linha-tempo span { font-family: var(--titulo); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lima); }
.linha-tempo p { margin: 2px 0 0; color: var(--suave); }
.linha-tempo strong { color: var(--texto); }

/* cards */
.cartoes { display: grid; gap: 20px; }
.cartoes--4 { grid-template-columns: repeat(4, 1fr); }
.cartoes--3 { grid-template-columns: repeat(3, 1fr); }
.cartao { background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 24px; }
.cartao h3 { font-size: 22px; margin-bottom: 10px; }
.cartao p { margin: 0; color: var(--suave); font-size: 15px; }
.cartao--img { padding: 0; overflow: hidden; }
.cartao--img img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; border-bottom: 1px solid var(--linha); }
.cartao--img h3 { padding: 20px 22px 0; }
.cartao--img p { padding: 0 22px 22px; }
.cartao--icone .icone { display: block; font-size: 24px; color: var(--lima); margin-bottom: 14px; }

/* sectors */
.setores { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 56px; }
.setores-mapa img { border-radius: var(--raio); border: 1px solid var(--linha); }
.setores-legenda { font-size: 13px; color: var(--suave); margin: 0 0 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.setores-lista ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 48px; }
.setores-lista li { break-inside: avoid; display: grid; grid-template-columns: 12px 170px 1fr; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--linha); font-size: 15px; }
.setores-lista em { font-style: normal; color: var(--suave); font-size: 14px; }
.seg { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.seg--alta { background: var(--verde); }
.seg--media { background: var(--amarelo); }
.seg--baixa { background: var(--vermelho); }

/* ships */
.naves { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.nave { position: relative; border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; background: #000; min-height: 260px; }
.nave img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: transform 0.6s; }
.nave:hover img { transform: scale(1.04); }
.nave div { position: absolute; inset: auto 0 0 0; padding: 60px 22px 20px; background: linear-gradient(0deg, rgba(7, 9, 15, 0.95), transparent); }
.nave h3 { font-size: 24px; }
.nave p { margin: 4px 0 6px; color: #c8d2e4; font-size: 15px; }
.nave span { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lima); }
.nave--destaque { grid-column: span 2; min-height: 420px; }

/* brazil */
.brasil { background: radial-gradient(ellipse at 85% 0%, rgba(0, 156, 59, 0.12), transparent 55%), radial-gradient(ellipse at 10% 100%, rgba(255, 223, 0, 0.06), transparent 50%), var(--fundo); }

/* news */
.noticias { display: grid; gap: 16px; max-width: 860px; }
.noticia { background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 22px 24px; }
.noticia header { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; }
.noticia h3 { font-size: 22px; }
.noticia time { font-size: 13px; color: var(--suave); }
.noticia ul { margin: 0; padding-left: 20px; color: #c8d2e4; font-size: 15px; }
.noticia li { margin: 4px 0; }
.noticias-vazio { color: var(--suave); }

/* download */
.baixar-grade { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; }
.baixar-nota { color: var(--suave); margin: 16px 0 30px; }
.passos { margin: 0; padding-left: 22px; color: #c8d2e4; }
.passos li { margin: 0 0 12px; }
.requisitos { background: var(--painel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 26px; }
.requisitos h3 { font-size: 20px; margin-bottom: 14px; }
.requisitos ul { list-style: none; margin: 0 0 20px; padding: 0; }
.requisitos li { padding: 8px 0; border-bottom: 1px solid var(--linha); font-size: 15px; }
.requisitos li span { display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--suave); }
.alpha { font-size: 14px; color: var(--suave); margin: 0; border-left: 2px solid var(--amarelo); padding-left: 12px; }
.alpha strong { color: var(--amarelo); }

/* footer */
.rodape { padding: 48px 16px; text-align: center; border-top: 1px solid var(--linha); color: var(--suave); font-size: 14px; }
.rodape .marca { margin: 0 0 8px; display: block; }
.rodape p { margin: 4px 0; }
.redes { display: flex; gap: 18px; justify-content: center; margin: 12px 0; }
.redes:empty { display: none; }
.pequeno { font-size: 12px; opacity: 0.7; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 980px) {
  .cartoes--4 { grid-template-columns: repeat(2, 1fr); }
  .cartoes--3 { grid-template-columns: repeat(2, 1fr); }
  .historia, .setores, .baixar-grade { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 760px) {
  .topo { gap: 12px; }
  .topo .botao--pequeno { margin-left: auto; }
  .menu { display: none; position: fixed; inset: 60px 0 auto 0; flex-direction: column; gap: 0; background: rgba(7, 9, 15, 0.97); border-bottom: 1px solid var(--linha); }
  .menu.aberto { display: flex; }
  .menu a { padding: 14px 20px; border-top: 1px solid var(--linha); font-size: 16px; }
  .menu-abrir { display: block; }
  .secao { padding: 72px 16px; }
  .hero { padding: 90px 16px 60px; min-height: 92vh; }
  .hero-fundo { background-position: 70% center; }
  .hero-fundo::after { background: linear-gradient(0deg, rgba(7, 9, 15, 0.97) 10%, rgba(7, 9, 15, 0.7) 60%, rgba(7, 9, 15, 0.35)); }
  .numeros { grid-template-columns: repeat(2, 1fr); }
  .numeros div:nth-child(2) { border-right: 0; }
  .numeros div:nth-child(-n+2) { border-bottom: 1px solid var(--linha); }
  .cartoes--4, .cartoes--3, .naves { grid-template-columns: 1fr; }
  .nave--destaque { grid-column: auto; min-height: 280px; }
  .setores-lista ul { columns: 1; }
  .setores-lista li { grid-template-columns: 12px 1fr; }
  .setores-lista em { grid-column: 2; }
  .botao--grande { display: block; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }