/* =====================================================================
   PÁGINA "EM BREVE" — skillconsistemas.com.br
   Paleta Esmeralda do ERP (frontend/src/nucleo/estilos/paleta-esmeralda.css, 1.14):
   fundo igual ao login (#03211B -> #22453F), destaque menta #91D0BD, fonte Figtree.
   ===================================================================== */
@font-face{
  font-family:"Figtree";
  src:url("fontes/figtree.woff2") format("woff2-variations"),url("fontes/figtree.woff2") format("woff2");
  font-weight:300 900;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --verde-escuro: #03211B;
  --verde:        #22453F;
  --menta:        #91D0BD;
  --menta-clara:  #C0D9CB;
  --texto:        #FFFFFF;
  --texto-2:      rgba(228,239,235,.82);   /* #E4EFEB, texto do tema escuro do ERP */
  --texto-3:      rgba(228,239,235,.62);
  --lateral-bg:   radial-gradient(circle at 50% 40%, var(--verde-escuro) 0%, var(--verde) 100%);
  --verde-acento: #26544B;
  --neon:         rgba(145,208,189,.30);   /* brilho menta das sombras "neon" */
  --neon-fraco:   rgba(145,208,189,.14);
  --raio:         0.5rem;
  --fonte: "Figtree", "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: dark;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  font-family:var(--fonte);
  color:var(--texto);
  background:var(--verde-escuro);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------------------------------------------------------------------
   HERO: três camadas atrás do conteúdo
   1. degradê do login do ERP (fundo do .hero)
   2. hexágonos do logo, à deriva bem devagar (::before)
   3. aurora: manchas de luz menta e verde que flutuam (::after)
   Só transform e opacity animam (leve para o celular). Sem movimento para quem
   pede menos movimento no sistema.
   --------------------------------------------------------------------- */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:100vh;
  min-height:100svh;
  display:grid;
  grid-template-rows:1fr auto;
  justify-items:center;
  padding:
    max(2rem, env(safe-area-inset-top))
    max(1rem, env(safe-area-inset-right))
    max(1.25rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
  background:var(--lateral-bg);
}
.hero::before,
.hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
}
.hero::before{
  inset:-4%;
  background:url("img/hexagonos.svg") center / cover no-repeat;
}
.hero::after{
  inset:-25%;
  background:
    radial-gradient(38% 32% at 22% 28%, rgba(145,208,189,.15), transparent 70%),
    radial-gradient(34% 30% at 78% 72%, rgba(38,84,75,.70), transparent 72%),
    radial-gradient(26% 24% at 74% 22%, rgba(192,217,203,.08), transparent 70%),
    radial-gradient(30% 26% at 30% 80%, rgba(145,208,189,.07), transparent 70%);
}

.conteudo{
  position:relative;
  align-self:center;
  width:100%;
  max-width:40rem;
  display:grid;
  justify-items:center;
  text-align:center;
}
/* halo de luz atrás do logo e do título, que "respira" */
.conteudo::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  top:6%;
  width:min(46rem, 120vw);
  aspect-ratio:1.6;
  transform:translate(-50%, -18%);
  background:radial-gradient(closest-side, rgba(145,208,189,.12), rgba(145,208,189,.04) 55%, transparent);
  pointer-events:none;
}

.logo{display:block}
.logo img{
  display:block;
  width:min(22.5rem, 78vw);
  height:auto;
  filter:drop-shadow(0 0 1.25rem var(--neon-fraco));
}

.selo{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  margin:clamp(2rem, 5vh, 3rem) 0 0;
  padding:0.375rem 0.875rem;
  border:1px solid rgba(145,208,189,.45);
  border-radius:999px;
  background:rgba(145,208,189,.08);
  color:var(--menta);
  font-size:0.75rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-shadow:0 0 0.625rem var(--neon);
  box-shadow:0 0 1rem var(--neon-fraco), inset 0 0 0.75rem rgba(145,208,189,.08);
}
.selo .ponto{
  width:0.4375rem;
  height:0.4375rem;
  border-radius:50%;
  background:var(--menta);
  box-shadow:0 0 0 0 rgba(145,208,189,.6);
}

h1{
  margin:1.125rem 0 0;
  font-size:clamp(1.75rem, 1.15rem + 2.6vw, 2.75rem);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.01em;
  text-wrap:balance;
  text-shadow:0 0 1.75rem rgba(145,208,189,.22), 0 0 0.25rem rgba(145,208,189,.10);
}

.slogan{
  margin:0.75rem 0 0;
  color:var(--menta-clara);
  font-size:clamp(1rem, 0.94rem + 0.35vw, 1.25rem);
  font-weight:500;
  text-shadow:0 0 1rem var(--neon-fraco);
}

.texto{
  margin:1.25rem 0 0;
  max-width:34rem;
  color:var(--texto-2);
  font-size:clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  line-height:1.65;
  text-wrap:pretty;
}

.botao{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  margin-top:2rem;
  min-height:3rem;
  padding:0.8125rem 1.5rem;
  border-radius:var(--raio);
  background:var(--menta);
  color:var(--verde-escuro);
  font-weight:700;
  font-size:1rem;
  text-decoration:none;
  box-shadow:
    0 0 0 1px rgba(192,217,203,.40),
    0 0 1.5rem var(--neon),
    0 0.75rem 2rem rgba(0,0,0,.28);
  transition:background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
/* reflexo que atravessa o botão de tempos em tempos */
.botao::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.42) 50%, transparent 65%);
  transform:translateX(-130%);
  pointer-events:none;
}
.botao svg{transition:transform .25s ease}
.botao:hover{
  background:var(--menta-clara);
  transform:translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(192,217,203,.60),
    0 0 2.25rem rgba(145,208,189,.45),
    0 1rem 2.25rem rgba(0,0,0,.32);
}
.botao:hover svg{transform:translateX(3px)}
.botao:active{transform:translateY(0)}
.botao:focus-visible{outline:3px solid var(--texto);outline-offset:3px}

.rodape{
  padding-top:2.5rem;
  color:var(--texto-3);
  font-size:0.8125rem;
  text-align:center;
}

/* tela em pé (tablet e celular): hexágonos desenhados para o formato vertical */
@media (max-aspect-ratio: 1/1){
  .hero::before{background-image:url("img/hexagonos-vertical.svg")}
  .hero::after{
    background:
      radial-gradient(60% 26% at 20% 22%, rgba(145,208,189,.15), transparent 70%),
      radial-gradient(60% 28% at 80% 78%, rgba(38,84,75,.70), transparent 72%),
      radial-gradient(45% 20% at 78% 18%, rgba(192,217,203,.08), transparent 70%);
  }
}

/* celular: botão na largura da coluna */
@media (max-width: 30rem){
  .botao{width:100%;max-width:20rem}
}

/* movimento: só para quem não pediu menos movimento no sistema */
@media (prefers-reduced-motion: no-preference){
  /* entrada: um elemento depois do outro ("backwards" devolve o hover ao botão no fim) */
  .conteudo > *{animation:surgir .8s cubic-bezier(.2,.7,.2,1) backwards}
  .conteudo > .logo{animation:surgir-logo 1.1s cubic-bezier(.2,.7,.2,1) backwards}
  .conteudo > :nth-child(2){animation-delay:.15s}
  .conteudo > :nth-child(3){animation-delay:.25s}
  .conteudo > :nth-child(4){animation-delay:.33s}
  .conteudo > :nth-child(5){animation-delay:.41s}
  .conteudo > :nth-child(6){animation-delay:.49s}
  .rodape{animation:surgir .8s .6s cubic-bezier(.2,.7,.2,1) backwards}

  /* fundo vivo, bem devagar */
  .hero::before{animation:deriva 38s ease-in-out infinite alternate}
  .hero::after{animation:aurora 26s ease-in-out infinite alternate}
  .conteudo::before{animation:respira 7s ease-in-out infinite}

  .selo .ponto{animation:pulso 2.4s ease-out infinite}
  .botao::after{animation:reflexo 6s ease-in-out 1.6s infinite}
}

@keyframes surgir{
  from{opacity:0;transform:translateY(0.75rem)}
  to{opacity:1;transform:none}
}
@keyframes surgir-logo{
  from{opacity:0;transform:translateY(0.5rem) scale(.96);filter:blur(6px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@keyframes deriva{
  from{transform:translate3d(0, 0, 0) scale(1)}
  to{transform:translate3d(-1.5%, -2%, 0) scale(1.05) rotate(1.5deg)}
}
@keyframes aurora{
  0%{transform:translate3d(-3%, -2%, 0) rotate(0deg) scale(1)}
  50%{transform:translate3d(3%, 2%, 0) rotate(6deg) scale(1.08)}
  100%{transform:translate3d(-2%, 3%, 0) rotate(-5deg) scale(1.04)}
}
@keyframes respira{
  0%, 100%{opacity:.75;transform:translate(-50%, -18%) scale(1)}
  50%{opacity:1;transform:translate(-50%, -18%) scale(1.06)}
}
@keyframes pulso{
  0%{box-shadow:0 0 0 0 rgba(145,208,189,.55)}
  70%{box-shadow:0 0 0 0.5rem rgba(145,208,189,0)}
  100%{box-shadow:0 0 0 0 rgba(145,208,189,0)}
}
@keyframes reflexo{
  0%{transform:translateX(-130%)}
  28%, 100%{transform:translateX(130%)}
}