:root {
  --azul: #102f46;
  --azul-claro: #215d78;
  --papel: #f5f1e8;
  --branco: #fffdf8;
  --ouro: #e4b33d;
  --ouro-escuro: #9a6b08;
  --verde: #44785c;
  --verde-claro: #a9cdb7;
  --tinta: #172630;
  --suave: #5d6b72;
  --linha: rgba(16, 47, 70, .15);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--tinta); background: linear-gradient(135deg, #f8f5ed 0%, var(--papel) 55%, #eef3ec 100%); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: inherit; }
.pular { position: fixed; z-index: 20; left: 1rem; top: -4rem; padding: .75rem 1rem; background: var(--branco); border-radius: .5rem; }
.pular:focus { top: 1rem; }

.topo { height: 88px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(1.25rem, 5vw, 5rem); border-bottom: 1px solid var(--linha); background: rgba(255,253,248,.72); backdrop-filter: blur(12px); }
.marca { display: inline-flex; align-items: center; text-decoration: none; color: var(--azul); }
.marca-palavra { display: inline-flex; align-items: baseline; gap: .32em; font-size: 1.22rem; line-height: 1; font-weight: 850; letter-spacing: .12em; }
.marca-in { padding: .34em .42em; color: var(--azul); background: var(--ouro); letter-spacing: .08em; }
.marca-o { color: var(--ouro-escuro); }
.marca-t { color: var(--verde); margin-left: -.22em; }
nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); }
nav a { text-decoration: none; font-size: .86rem; font-weight: 650; }
nav a:not(.contato-link):hover { color: var(--azul-claro); }
.contato-link { padding: .7rem 1rem; border: 1px solid var(--verde); border-radius: 999px; color: var(--verde); }
.contato-link:hover { background: var(--verde); color: var(--branco); }

.abertura { min-height: calc(100vh - 88px); display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 3rem; padding: clamp(4rem, 8vw, 8rem) clamp(1.25rem, 8vw, 8rem); overflow: hidden; }
.sobretitulo { margin: 0 0 1rem; color: var(--azul-claro); text-transform: uppercase; letter-spacing: .18em; font-size: .73rem; font-weight: 800; }
h1, h2, h3 { margin-top: 0; color: var(--azul); }
h1 { margin-bottom: 1.5rem; max-width: 760px; font: 500 clamp(3.6rem, 7.7vw, 7.7rem)/.92 Georgia, "Times New Roman", serif; letter-spacing: -.055em; }
h1 em { color: var(--verde); font-weight: 400; }
.resumo { max-width: 610px; color: var(--suave); font-size: clamp(1rem, 1.5vw, 1.22rem); line-height: 1.7; }
.botao { display: inline-flex; gap: 2rem; align-items: center; margin-top: 1.2rem; padding: 1rem 1.25rem; color: var(--azul); background: var(--ouro); text-decoration: none; border-radius: 4px; font-weight: 750; box-shadow: 0 10px 24px rgba(154,107,8,.16); }
.botao:hover { background: #efc75f; transform: translateY(-2px); }
.botao, .cartao a, nav a { transition: .2s ease; }

.painel { position: relative; aspect-ratio: 1; max-width: 570px; width: 100%; justify-self: end; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #276984 0%, var(--azul) 48%, #173b32 100%); box-shadow: 0 35px 80px rgba(16,47,70,.24), 0 0 0 12px rgba(228,179,61,.08); }
.nucleo { position: absolute; inset: 31%; display: grid; place-content: center; border-radius: 50%; color: var(--papel); border: 1px solid rgba(255,255,255,.25); font: 600 clamp(1.2rem, 2vw, 2rem) Georgia, serif; }
.nucleo span { display: block; font: .58rem ui-sans-serif, system-ui; letter-spacing: .2em; text-align: center; opacity: .65; margin-top: .35rem; }
.orbita { position: absolute; border: 1px solid rgba(255,255,255,.23); border-radius: 50%; }
.orbita-a { inset: 12%; }
.orbita-b { inset: 23%; }
.ponto { position: absolute; border-radius: 50%; box-shadow: 0 0 0 8px rgba(255,255,255,.08); }
.ponto-a { width: 22px; height: 22px; background: var(--ouro); left: 8%; top: 46%; }
.ponto-b { width: 16px; height: 16px; background: var(--verde-claro); right: 21%; top: 16%; }
.ponto-c { width: 12px; height: 12px; background: white; right: 15%; bottom: 25%; }

.projetos { padding: clamp(4rem, 8vw, 8rem) clamp(1.25rem, 6vw, 6rem); background: rgba(255,253,248,.9); }
.secao-cabecalho { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 3rem; }
.secao-cabecalho h2, .sobre h2 { margin-bottom: 0; font: 500 clamp(2.5rem, 5vw, 4.8rem)/1 Georgia, serif; letter-spacing: -.035em; }
.secao-cabecalho > p { color: var(--suave); max-width: 340px; line-height: 1.6; }
.grade-projetos { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--linha); border-left: 1px solid var(--linha); }
.cartao { position: relative; min-height: 530px; padding: clamp(1.5rem, 3vw, 2.7rem); border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha); display: flex; flex-direction: column; overflow: hidden; transition: background .25s, transform .25s, box-shadow .25s; }
.cartao::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--azul-claro); }
.cartao:nth-child(3n+2)::before { background: var(--ouro); }
.cartao:nth-child(3n)::before { background: var(--verde); }
.cartao:hover { background: #faf7f0; transform: translateY(-4px); box-shadow: 0 18px 45px rgba(16,47,70,.08); }
.cartao-topo { display: flex; align-items: center; justify-content: space-between; }
.numero { font: italic 1.05rem Georgia, serif; color: var(--suave); }
.estado { padding: .4rem .65rem; border-radius: 99px; font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; }
.ativo { background: #d9eade; color: #285d40; }
.restrito { background: #dfeaf0; color: #244f67; }
.breve { background: #f6e9bf; color: #75530a; }
.desenvolvimento { background: #e2ece5; color: #386249; }
.icone { width: 82px; height: 82px; display: grid; place-items: center; margin: 4rem 0 2rem; border-radius: 24px; font: 500 2rem Georgia, serif; }
.icone-assinatura { background: #dceaf0; color: var(--azul-claro); transform: rotate(-4deg); }
.icone-assinatura span { transform: rotate(4deg); }
.icone-coteli { background: #f3e6bd; color: #77550c; }
.icone-parque { background: #dcebe3; color: #3c7657; border-radius: 50% 50% 50% 10%; }
.icone-carrinho { background: #dce9e0; color: var(--verde); border-radius: 50%; }
.icone-observatorio { background: #dceaf0; color: var(--azul-claro); }
.icone-rio { background: #f3e6bd; color: var(--ouro-escuro); border-radius: 50% 12% 50% 50%; }
.categoria { margin: 0 0 .55rem; color: var(--suave); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 750; }
.cartao h3 { margin-bottom: 1rem; font: 500 clamp(1.7rem, 2.6vw, 2.5rem)/1.08 Georgia, serif; }
.cartao > p:not(.categoria) { color: var(--suave); line-height: 1.65; }
.cartao > a, .indisponivel { margin-top: auto; padding-top: 2rem; border-top: 1px solid var(--linha); text-decoration: none; font-weight: 750; display: flex; justify-content: space-between; }
.cartao > a:hover { color: var(--azul-claro); padding-left: .35rem; }
.indisponivel { color: var(--suave); }

.sobre { position: relative; padding: clamp(5rem, 10vw, 10rem) clamp(1.25rem, 8vw, 8rem); background: linear-gradient(120deg, var(--azul) 0%, #163f4f 55%, #315f49 100%); color: #e1ebe7; overflow: hidden; }
.sobre::after { content: ""; position: absolute; width: 280px; height: 280px; right: -90px; bottom: -140px; border: 1px solid rgba(228,179,61,.36); border-radius: 50%; box-shadow: 0 0 0 45px rgba(228,179,61,.04), 0 0 0 90px rgba(228,179,61,.03); }
.sobre .sobretitulo { color: #d9bd72; }
.sobre-grid, .sobre-grade { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(3rem, 8vw, 8rem); align-items: start; }
.sobre h2 { color: var(--branco); }
.sobre-grade > div { font-size: 1.05rem; line-height: 1.75; }
.principios { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }
.principios span { border: 1px solid rgba(228,179,61,.48); color: #f4e7bf; border-radius: 99px; padding: .5rem .75rem; font-size: .75rem; }
footer { padding: 2rem clamp(1.25rem, 5vw, 5rem); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; color: var(--suave); background: #f7f3ea; border-top: 4px solid var(--verde); font-size: .78rem; }
.marca-rodape { justify-self: start; }
footer p:last-child { justify-self: end; }

@media (max-width: 850px) {
  .abertura { grid-template-columns: 1fr; min-height: auto; }
  .painel { max-width: 430px; justify-self: center; }
  .grade-projetos { grid-template-columns: 1fr; }
  .cartao { min-height: 450px; }
  .sobre-grade { grid-template-columns: 1fr; }
  .secao-cabecalho { align-items: start; flex-direction: column; }
}
@media (max-width: 580px) {
  .topo { height: 72px; }
  nav a:not(.contato-link) { display: none; }
  h1 { font-size: clamp(3.2rem, 17vw, 5rem); }
  .abertura { padding-top: 4rem; }
  footer { grid-template-columns: 1fr auto; }
  footer > p:nth-child(2) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}