/* =========================================================
   NEES — Página de manutenção
   Paleta e tipografia da identidade visual do NEES.
   ========================================================= */

:root{
  /* Cores */
  --navy:         #142A38;   /* fundo principal (retirado do logo) */
  --navy-fundo:   #0F212D;   /* navy mais profundo, para gradiente */
  --creme:        #FAF6EF;   /* painel claro (peça dos 15 anos) */
  --laranja:      #F47B2C;   /* laranja NEES */
  --laranja-quente:#F1592A;  /* extremo quente do gradiente */
  --laranja-ambar:#F59C2B;   /* extremo âmbar do gradiente */
  --branco:       #FFFFFF;
  --texto-claro:  #C9D6DF;   /* texto de apoio sobre o navy */

  /* Medidas */
  --raio:         20px;
  --largura-texto: 34rem;
}

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

html, body{ height: 100%; }

body{
  margin: 0;
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--navy);
  color: var(--branco);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Estrutura: dois painéis lado a lado ---------- */
.pagina{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}

.painel{
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Painel navy ---------------------------------------------- */
.painel--navy{
  background:
    radial-gradient(120% 90% at 0% 0%, #1B3646 0%, transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-fundo) 100%);
  padding: clamp(2rem, 6vw, 6rem);
}

/* filete laranja marcando a divisão dos painéis */
.painel--navy::after{
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 4px;
  background: linear-gradient(180deg, var(--laranja-quente), var(--laranja-ambar));
}

/* malha de nós ao fundo, quase imperceptível */
.malha{
  position: absolute;
  inset: -5% -20% -5% 40%;
  width: 100%;
  height: 110%;
  opacity: .75;
  pointer-events: none;
}
.malha__linhas path{
  fill: none;
  stroke: var(--laranja);
  stroke-width: 1;
  opacity: .13;
}
.malha__nos circle{
  fill: var(--laranja);
  opacity: .18;
  animation: pisca 6s ease-in-out infinite;
}
.malha__nos circle:nth-child(3n)   { animation-delay: -1.4s; }
.malha__nos circle:nth-child(3n+1) { animation-delay: -3.1s; }
.malha__nos circle:nth-child(4n)   { animation-delay: -4.7s; }

@keyframes pisca{
  0%, 100% { opacity: .10; }
  50%      { opacity: .34; }
}

/* Conteúdo ------------------------------------------------- */
.conteudo{
  position: relative;
  z-index: 1;
  max-width: var(--largura-texto);
  animation: sobe .7s cubic-bezier(.22,.8,.28,1) both;
}

@keyframes sobe{
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.logo{
  width: clamp(150px, 15vw, 186px);
  height: auto;
  display: block;
  margin-bottom: clamp(2rem, 5vh, 3.25rem);
}

/* selo / pill — elemento recorrente das peças do NEES */
.selo{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.4rem;
  padding: .5rem 1.05rem;
  border: 1px solid rgba(244,123,44,.45);
  border-radius: 999px;
  background: rgba(244,123,44,.10);
  color: var(--laranja-ambar);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.selo__ponto{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--laranja-ambar);
  box-shadow: 0 0 0 0 rgba(245,156,43,.55);
  animation: pulso 2s ease-out infinite;
}
@keyframes pulso{
  0%   { box-shadow: 0 0 0 0 rgba(245,156,43,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(245,156,43,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,156,43,0); }
}

.titulo{
  margin: 0 0 1.25rem;
  font-size: clamp(2.35rem, 5.4vw, 4.1rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.02em;
}
.titulo__destaque{
  color: var(--laranja);                     /* fallback */
  background: linear-gradient(95deg, var(--laranja-quente), var(--laranja-ambar));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.texto{
  margin: 0 0 .85rem;
  max-width: 30rem;
  color: var(--texto-claro);
  font-size: clamp(1rem, 1.15vw, 1.075rem);
  line-height: 1.65;
}
.texto--suave{ color: rgba(201,214,223,.62); }

.rodape{
  margin: clamp(2.75rem, 7vh, 4rem) 0 0;
  color: rgba(201,214,223,.45);
  font-size: .8rem;
  letter-spacing: .06em;
}

/* Painel claro --------------------------------------------- */
.painel--claro{
  justify-content: center;
  background:
    radial-gradient(80% 70% at 50% 45%, #FFFDF9 0%, var(--creme) 70%);
  padding: clamp(2rem, 5vw, 4rem);
}

.ilustracao{
  position: relative;
  width: min(100%, 34rem);
  animation: flutua 7s ease-in-out infinite;
}
.ilustracao img{
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

/* halo da lanterna, respirando devagar */
.ilustracao__brilho{
  position: absolute;
  z-index: 0;
  left: 30%;
  top: 42%;
  width: 46%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,156,43,.42) 0%, rgba(245,156,43,0) 68%);
  animation: respira 4.5s ease-in-out infinite;
}

@keyframes flutua{
  0%, 100% { transform: translateY(-6px); }
  50%      { transform: translateY(6px); }
}
@keyframes respira{
  0%, 100% { opacity: .55; transform: translate(-50%,-50%) scale(.94); }
  50%      { opacity: 1;   transform: translate(-50%,-50%) scale(1.06); }
}

/* ---------- Responsivo ---------- */
@media (max-width: 900px){
  .pagina{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  /* no celular a ilustração aparece primeiro, como abertura */
  .painel--claro{
    order: -1;
    padding: 2.5rem 1.5rem 1.5rem;
  }
  .painel--navy{
    padding: 2.75rem 1.5rem 3.25rem;
  }
  .painel--navy::after{
    inset: 0 0 auto 0;
    width: auto;
    height: 4px;
  }
  .ilustracao{ width: min(100%, 21rem); }
  .malha{ inset: -10% -10% auto 25%; height: 70%; opacity: .4; }
  .conteudo{ max-width: none; }
  .texto{ max-width: 32rem; }
}

@media (max-width: 400px){
  .selo{ font-size: .7rem; padding: .45rem .85rem; }
}

/* ---------- Respeita quem prefere menos movimento ---------- */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}