/* ======================== TEMA / TOKENS ======================== */
:root{
  --accent: #7939ff;
  --bg: #030303;
  --text: #ffffff;
  --muted: rgba(255,255,255,.40);
  --maxw: 1160px;

  /* Tipografia */
  --title1: clamp(28px, 6vw, 72px);
  --title2: clamp(28px, 6vw, 72px);
  --subtitle: clamp(14px, 2.2vw, 20px);

  /* Menu (posicionamento e espaçamentos) */
  /* você disse que quer mais ao meio: valor fixo a 250px */
  --nav-offset: 15%;                 /* distância do topo/rodapé (WEB) */
  --nav-gap: 12px;
  --nav-pad: 6px;
  --nav-item-x: 18px;
  --nav-item-y: 10px;

  /* Shimmer Button */
  --shimmer-color: #ffffff;
  --shimmer-speed: 2.8s;
  --shimmer-cut: 0.06em;
  --btn-bg: rgba(0,0,0,1);

  /* ================= CONTROLES (DESKTOP/WEB) =================
     WEB está OK. Se quiser mexer na web, ajuste aqui.
     (APENAS COMENTADO A PEDIDO — NÃO alterei valores.)
  -------------------------------------------------------------- */
  --hero-scale: 1.35;        /* WEB: escala do bloco central */
  --shape-size-scale: 3.60;  /* WEB: escala dos shapes       */
  --shape-opacity: .38;      /* WEB: opacidade interna dos shapes */
  --shape-blur: 2px;         /* WEB: blur interno dos shapes      */
  --shape-stroke-alpha: .45; /* WEB: força do contorno brilhante dos shapes (0=sem) */
  --hero-glow-alpha: .40;    /* WEB: intensidade do glow de fundo (hero-glow) */
  --hero-glow-blur: 40px;    /* WEB: blur do glow de fundo           */
  --subtitle-gap: 10px;      /* WEB: distância do subtítulo ao título */
}

/* ======================== BASE ======================== */
*{ box-sizing: border-box; }
html, body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

/* ======================== MENU SUSPENSO (CENTRO REAL) ======================== */
.nav{
  position: fixed;
  z-index: 50;
  left: 0; right: 0;
  width: max-content;
  margin-inline: auto;
  top: var(--nav-offset); /* CONTROLE WEB (menu no topo) */
}
.nav-list{
  display:flex; gap: var(--nav-gap);
  padding: var(--nav-pad);
  margin:0; list-style:none;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  border-radius:999px;
}
.nav-item{
  display:inline-block;
  padding: var(--nav-item-y) var(--nav-item-x);
  border-radius:999px;
  text-decoration:none;
  color:rgba(255,255,255,.85);
  font-weight:600;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.nav-item:hover{ color:#111; background:rgba(255,255,255,.85); transform:translateY(-1px); }
.nav-item.active{ color:#111; background:#fff; }

/* ======================== HERO ======================== */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  place-items:center;
  overflow:hidden;
  background: var(--bg);
}
.hero-glow{
  position:absolute; inset:-20%;
  background:
    radial-gradient(50% 50% at 20% 30%, rgba(99,102,241, var(--hero-glow-alpha)), transparent 60%),
    radial-gradient(50% 50% at 80% 70%, rgba(244,63,94,  var(--hero-glow-alpha)), transparent 60%);
  filter: blur(var(--hero-glow-blur));
  z-index:0;
}
.shapes{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.shape{
  --float: 12px;
  position:absolute;
  left: var(--x); top: var(--y);
  width: calc(var(--w) * 1px * var(--shape-size-scale));
  height: calc(var(--h) * 1px * var(--shape-size-scale));
  transform: translate(-50%,-50%) rotate(var(--rot)) translateY(-150px);
  opacity:0;
  border-radius:999px;

  /* “contorno brilhante” (controle por variável acima) */
  border: 2px solid rgba(255,255,255, var(--shape-stroke-alpha));
  box-shadow: 0 8px 32px rgba(255,255,255,.10) inset;

  background: linear-gradient(90deg, hsla(var(--hue), 90%, 70%, var(--shape-opacity)), transparent 70%);
  backdrop-filter: blur(var(--shape-blur));

  animation:
    enter 1.8s cubic-bezier(.23,.86,.39,.96) forwards var(--delay, .2s),
    floatY 12s ease-in-out infinite calc(var(--delay, .2s) + 1.8s);
}
@keyframes enter{
  from{ opacity:0; transform: translate(-50%,-50%) rotate(calc(var(--rot) - 15deg)) translateY(-150px); }
  to  { opacity:1; transform: translate(-50%,-50%) rotate(var(--rot)) translateY(0); }
}
@keyframes floatY{
  0%,100%{ transform: translate(-50%,-50%) rotate(var(--rot)) translateY(0); }
  50%{     transform: translate(-50%,-50%) rotate(var(--rot)) translateY(var(--float)); }
}

.hero-inner{
  position:relative;
  z-index:2;
  text-align:center;
  max-width:var(--maxw);
  padding-inline: 16px;
  transform: scale(var(--hero-scale));      /* WEB */
  transform-origin: center top;
}
.hero-title{
  margin:0 0 12px;
  line-height:1.1;
  letter-spacing:-.02em;
  font-weight:800;
}
.hero-title-line1{
  font-size:var(--title1);
  background: linear-gradient(180deg, #fff, rgba(255,255,255,.8));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-title-line2{
  font-size:var(--title2);
  background: linear-gradient(90deg, #bcd0ff, rgba(255,255,255,.92), #ffc0cb);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-subtitle{
  margin: var(--subtitle-gap) auto 0; /* WEB: aproxima/afasta do título */
  max-width: 680px;
  font-size: var(--subtitle);
  color: var(--muted);
  font-weight: 400;
  line-height: 1.6;
}

/* CTA (container do botão) */
.cta-wrap{
  margin-top: 52px;
  display:flex;
  justify-content:center;
}

/* ======================== SHIMMER BUTTON ======================== */
.shimmer-btn{
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 16px 54px;
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  background: var(--btn-bg);
  border: 2px solid #fff; /* borda branca */
  overflow: hidden;
  box-shadow:
    0 10px 24px rgba(0,0,0,.35),
    inset 0 -8px 10px #ffffff1f;
  transition: transform .2s ease, filter .2s ease, box-shadow .25s ease;
}
.shimmer-btn::after{
  content:"";
  position:absolute;
  left:50%; bottom:-8px;
  width: 64%;
  height: 10px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.22), transparent 70%);
  filter: blur(6px);
  pointer-events:none;
}
.shimmer-label{ position:relative; z-index:1; font-weight:700; letter-spacing:.2px; }
.shimmer-btn:hover{ transform: translateY(-1px); filter: brightness(1.03); }
.shimmer-btn:active{ transform: translateY(0); box-shadow: inset 0 -10px 10px #ffffff3f; }

/* vinheta superior/inferior */
.hero-vignette{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background: linear-gradient(to top, var(--bg), transparent 30%, transparent 70%, rgba(3,3,3,.8));
}

/* ======================== ENTRADAS (texto/menu) ======================== */
@keyframes fadeUp   { from {opacity:0; transform:translateY(30px);}  to {opacity:1; transform:translateY(0);} }
@keyframes fadeDown { from {opacity:0; transform:translateY(-20px);} to {opacity:1; transform:translateY(0);} }
.animate-in{ opacity:0; animation-duration:.9s; animation-fill-mode:both; animation-timing-function:cubic-bezier(.25,.4,.25,1); animation-delay:var(--delay,.5s); will-change:transform,opacity; }
.fade-up{   animation-name:fadeUp; }
.fade-down{ animation-name:fadeDown; }
@media (prefers-reduced-motion: reduce){ .animate-in{ animation:none !important; opacity:1 !important; } }

/* =============== PATCH MOBILE (somente <= 640px) =============== */
@media (max-width: 640px){
  /* -------- CONTROLES MOBILE (ONDE MEXER) ----------
     Use estes valores para alinhar ao que você vê NO CELULAR REAL.
  --------------------------------------------------- */
  :root{
    /* TÍTULO no mobile (escala do bloco central) */
    --hero-scale-mobile: 1.32;   /* ↑/↓ tamanho do “Bem-vindo…” */

    /* MENU no mobile */
    --nav-top-mobile: 120px;      /* ↑/↓ para subir/descer o menu */
    --nav-scale-mobile: .92;     /* ↓ para “dar respiro” dentro do toggle no phone */
    --nav-gap-mobile: 10px;      /* espaçamento entre itens */
    --nav-pad-mobile: 4px;       /* padding da cápsula */
    --nav-item-x-mobile: 9px;   /* padding horizontal de cada item */
    --nav-item-y-mobile: 9px;    /* padding vertical   de cada item */

    /* SHAPES no mobile (fundo) */
    --shape-size-scale-mobile: .80; /* tamanho dos shapes */
    --shape-opacity-mobile: .38;     /* opacidade interna (mais visível) */
    --shape-blur-mobile: 2px;        /* blur interno */

    /* CONTORNO BRILHANTE (bordas dos shapes) */
    --shape-stroke-alpha-mobile: .22; /* ↑ mais brilho de contorno | 0 remove */

    /* GLOW de fundo (hero-glow) */
    --hero-glow-alpha-mobile: .36;   /* ↑ para acender mais o fundo */
    --hero-glow-blur-mobile: 36px;   /* blur do glow */

    /* SUBTÍTULO (aproximar do título) */
    --subtitle-gap-mobile: 6px;      /* ↓ aproxima; ↑ afasta */

    /* BOTÃO “Agendar” */
    --cta-offset-mobile: 30px;       /* ↑/↓ sobe/desce o botão (margin-top do container) */
    --btn-scale-mobile: 0.9;        /* escala do botão (1.00 = atual) */
  }

  /* APLICAÇÃO DOS CONTROLES NO MOBILE */
  .hero-inner{
    transform: scale(var(--hero-scale-mobile));
    transform-origin: center top;
  }

  .nav{
    top: var(--nav-top-mobile);
    bottom: auto;
    transform: scale(var(--nav-scale-mobile));           /* <-- CONTROLE: escala do menu suspenso (mobile) */
    transform-origin: center;                            /* mantém centralizado */
  }
  .nav-list{
    gap: var(--nav-gap-mobile);                          /* <-- CONTROLE: espaço entre itens (mobile) */
    padding: var(--nav-pad-mobile);                      /* <-- CONTROLE: respiro interno da cápsula (mobile) */
  }
  .nav-item{
    padding: var(--nav-item-y-mobile) var(--nav-item-x-mobile); /* <-- CONTROLE: padding de cada item */
  }

  /* Shapes: variáveis mobile */
  :root{
    --shape-size-scale: var(--shape-size-scale-mobile);
    --shape-opacity: var(--shape-opacity-mobile);
    --shape-blur: var(--shape-blur-mobile);
    --shape-stroke-alpha: var(--shape-stroke-alpha-mobile);

    --hero-glow-alpha: var(--hero-glow-alpha-mobile);
    --hero-glow-blur:  var(--hero-glow-blur-mobile);

    --subtitle-gap: var(--subtitle-gap-mobile);
  }

  .cta-wrap{
    margin-top: var(--cta-offset-mobile);                /* <-- CONTROLE: subir/descer o botão */
  }
  .shimmer-btn{
    transform: scale(var(--btn-scale-mobile));           /* <-- CONTROLE: escalar o botão */
    transform-origin: center;
  }
}
/* ======= FOOTER MINIMAL ======= */
.footer-minimal {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 100;
}

.footer-toggle {
  cursor: pointer;
  padding: 6px;
}

.footer-arrow {
  display: inline-block;
  font-size: 18px;
  color: #fff;
  transition: transform 0.3s ease;
}

/* card oculto inicialmente */
.footer-card {
  position: relative;
  bottom: -60px;
  opacity: 0;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px 12px 0 0;
  padding: 12px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  transition: all 0.4s ease;
  pointer-events: none;
}

.footer-link {
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.footer-link:hover {
  opacity: 0.7;
}

/* estado ativo (card aberto) */
.footer-card.active {
  bottom: 0;
  opacity: 1;
  pointer-events: auto;
}

/* seta girada ao abrir */
.footer-arrow.rotate {
  transform: rotate(180deg);
}