/* =========================================================
   PORTAL ANJO AZUL — prelancamento.css
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sora:wght@500;600;700;800&display=swap');

:root {
  --blue-deep:   #1e3a8a;
  --blue-main:   #2563eb;
  --blue-soft:   #60a5fa;
  --blue-light:  #dbeafe;
  --white:       #ffffff;
  --grad-primary: linear-gradient(135deg, #1e3a8a, #2563eb, #60a5fa);
  --grad-deep:    linear-gradient(160deg, #0f172a 0%, #1e3a8a 50%, #1d4ed8 100%);
  --font-sans:    'Inter', system-ui, sans-serif;
  --font-display: 'Sora', 'Inter', sans-serif;
}

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

html, body {
  height: 100%;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

body {
  background: var(--grad-deep);
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* --- Decorative background glow --------- */
body::before,
body::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .35;
  pointer-events: none;
}
body::before {
  width: 32rem; height: 32rem;
  background: #3b82f6;
  top: -8rem; left: -8rem;
}
body::after {
  width: 28rem; height: 28rem;
  background: #1d4ed8;
  bottom: -6rem; right: -6rem;
}

/* --- Star particles ---------------------- */
.stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.stars span {
  position: absolute;
  background: rgba(255,255,255,.55);
  border-radius: 50%;
  animation: twinkle linear infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(.5); }
  50%       { opacity: 1; transform: scale(1); }
}

/* --- Main content ------------------------ */
.pre-wrap {
  position: relative;
  z-index: 1;
  max-width: 42rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

/* Logo */
.pre-logo img {
  height: 5rem;
  width: auto;
  filter: drop-shadow(0 0 24px rgba(96,165,250,.6));
}

/* Badge */
.pre-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  padding: .45rem 1.1rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue-soft);
}
.pre-badge__dot {
  width: .5rem; height: .5rem;
  background: var(--blue-soft);
  border-radius: 50%;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(.7); }
}

/* Heading */
.pre-heading {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 6vw, 3rem);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.1;
}
.pre-heading em {
  font-style: normal;
  background: linear-gradient(90deg, #93c5fd, #60a5fa, #3b82f6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Sub */
.pre-sub {
  font-size: 1.0625rem;
  color: rgba(255,255,255,.7);
  line-height: 1.65;
  max-width: 34rem;
}

/* Countdown */
.pre-countdown {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
}

.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

.countdown-digit {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
  border-radius: .875rem;
  min-width: 5rem;
  padding: 1rem .75rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -.02em;
  line-height: 1;
  transition: all .3s;
}
@media (min-width: 480px) { .countdown-digit { min-width: 6rem; padding: 1.25rem 1rem; } }

.countdown-label {
  font-size: .625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(255,255,255,.45);
}

.countdown-sep {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 800;
  color: rgba(255,255,255,.3);
  padding-top: .75rem;
  animation: blink 1s step-end infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Info box */
.pre-info {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  border-radius: 1rem;
  padding: 1.25rem 1.75rem;
  font-size: .9375rem;
  color: rgba(255,255,255,.8);
  line-height: 1.6;
  max-width: 36rem;
}
.pre-info strong { color: var(--white); }

/* Back link */
.pre-back {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: rgba(255,255,255,.5);
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color .2s;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: .6rem 1.25rem;
}
.pre-back:hover { color: var(--white); border-color: rgba(255,255,255,.3); }

/* Schneider brand */
.pre-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .5rem;
  opacity: .55;
}
.pre-brand img { height: 1.5rem; width: auto; filter: brightness(0) invert(1); }
.pre-brand span { font-size: .75rem; font-weight: 600; letter-spacing: .04em; }
