/* TR&P - pagina de entrada. Paleta tirada do logo oficial (24/10/2026). */
:root {
  --azul: #033A72;        /* esfera, tom mediano */
  --azul-medio: #055B99;  /* esfera, meio-tom */
  --azul-brilho: #0272B4; /* esfera, reflexo */
  --cinza-anel: #A7A9AB;  /* aneis */
  --tinta: #211E1F;       /* texto do logo */
  --tinta-suave: #4A4D52;
  --fundo: #F6F8FB;
  --branco: #FFFFFF;
  color-scheme: light;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  color: var(--tinta);
  background-color: var(--fundo);
  font-family: Optima, Candara, "Segoe UI", "Noto Sans", system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}

/* Orbitas decorativas: eco dos aneis do logo, atras de tudo */
.orbitas {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background-color: var(--fundo);
  background-image:
    radial-gradient(60rem 42rem at 50% 40%, var(--branco) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(50rem 40rem at 0% 0%, rgba(5, 91, 153, .10) 0%, rgba(5, 91, 153, 0) 65%),
    radial-gradient(50rem 40rem at 100% 100%, rgba(167, 169, 171, .24) 0%, rgba(167, 169, 171, 0) 65%);
  background-repeat: no-repeat;
}
.orbitas::before,
.orbitas::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
}
.orbitas::before {
  width: min(70rem, 150vw);
  height: min(24rem, 52vw);
  border: 1.5px solid rgba(167, 169, 171, .45);
}
.orbitas::after {
  width: min(92rem, 200vw);
  height: min(34rem, 74vw);
  border: 1px solid rgba(5, 91, 153, .14);
}

.palco {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* So o logo no palco: mais folga embaixo que em cima, para o centro otico
     cair perto do centro das orbitas (42%) e nao colar no rodape */
  padding: clamp(2rem, 6vh, 4rem) 1rem clamp(3rem, 12vh, 7rem);
  text-align: center;
}

.marca {
  margin: 0;
  line-height: 0;
}
.marca img {
  display: block;
  width: min(21rem, 68vw);
  max-height: 52vh;
  height: auto;
  object-fit: contain;
}


.rodape {
  position: relative;
  z-index: 1;
  padding: 1.25rem 1rem 1.75rem;
  text-align: center;
}
.rodape p {
  margin: 0;
  color: var(--tinta-suave);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.6;
  text-wrap: balance;
}

/* Celular: as orbitas cruzariam o logo; fica so o degrade */
@media (max-width: 640px) {
  .orbitas::before,
  .orbitas::after { display: none; }
  .rodape p { letter-spacing: .1em; }
}