/* Identidade Vitória Targino no padrão premium escuro. Cores e fontes só aqui. */
:root {
  --fundo: #040404;               /* mesmo preto da logo */
  --fundo-2: #0A0D0D;
  --cartao: rgba(16, 20, 20, .78);
  --campo: rgba(255, 255, 255, .04);
  --linha: rgba(111, 207, 201, .13);
  --linha-forte: rgba(111, 207, 201, .28);
  --texto: #F4F1EC;
  --texto-2: #C2BDB6;
  --suave: #8A847D;
  --acento: #6FCFC9;              /* turquesa da logo */
  --acento-forte: #3FA9A2;
  --acento-claro: #A8E4E1;
  --acento-palido: #D6F4F2;
  --acento-fundo: rgba(111, 207, 201, .12);
  --sobre-acento: #031312;
  --grad: linear-gradient(100deg, #D6F4F2 0%, #92DAD9 35%, #3FA9A2 100%);
  --grad-btn: linear-gradient(135deg, #D6F4F2, #8CD9D4 45%, #3FA9A2);
  --verde: #6BD69B;
  --verde-fundo: rgba(107, 214, 155, .12);
  --ambar: #EBBE6A;
  --ambar-fundo: rgba(235, 190, 106, .12);
  --vermelho: #F08A7E;
  --vermelho-fundo: rgba(240, 138, 126, .12);
  --raio: 20px;
  --sombra: 0 30px 90px -40px rgba(63, 169, 162, .55);
  --serif: 'Gilda Display', 'Times New Roman', serif;
  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 132px; }
body { background: var(--fundo); color: var(--texto); font: 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; min-height: 100vh; }
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: inherit; }
[hidden] { display: none !important; }
::selection { background: rgba(111, 207, 201, .4); color: #fff; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

.wrap { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; line-height: 1.08; }
/* a Gilda Display tem um peso só: sem negrito nem itálico falsos */
html { font-synthesis: none; }
/* página nunca arrasta para o lado no celular; clip não atrapalha as barras fixas (sticky) */
html, body { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
html { overscroll-behavior-x: none; }

/* ---------- camadas de fundo (montadas pelo fundo.js) ---------- */
.grao { position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.aurora { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.aurora i { position: absolute; border-radius: 50%; filter: blur(120px); animation: flutua 24s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { width: 640px; height: 640px; background: #13807A; opacity: .16; top: -340px; left: -260px; }
.aurora i:nth-child(2) { width: 560px; height: 560px; background: #0B4E4A; opacity: .22; top: 18%; right: -300px; animation-delay: -8s; }
.aurora i:nth-child(3) { width: 480px; height: 480px; background: #7A3A10; opacity: .09; bottom: 8%; left: -300px; animation-delay: -14s; }
.aurora i:nth-child(4) { width: 540px; height: 540px; background: #0E5F5A; opacity: .18; bottom: -300px; right: -200px; animation-delay: -4s; }
@keyframes flutua { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(50px, 40px) scale(1.12); } 100% { transform: translate(-40px, 70px) scale(.95); } }
.malha { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(111, 207, 201, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(111, 207, 201, .06) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 55% at 50% 18%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse 80% 55% at 50% 18%, #000 10%, transparent 72%); }
#marcaFundo { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .2;
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 30%, #000 35%, transparent 80%);
  mask-image: radial-gradient(ellipse 90% 60% at 50% 30%, #000 35%, transparent 80%); }

/* ---------- texto ---------- */
.grad-txt { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* sem degradê correndo: os títulos em destaque só ganham um brilho que pulsa devagar */
h1 .grad-txt, h2 .grad-txt, h3 .grad-txt, .assinatura em { animation: reluz 4.5s ease-in-out infinite; }
@keyframes reluz { 0%, 100% { filter: drop-shadow(0 0 0 rgba(111, 207, 201, 0)); } 50% { filter: drop-shadow(0 0 14px rgba(111, 207, 201, .55)); } }
.rotulo { display: inline-flex; align-items: center; gap: 11px; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--acento-claro); }
.rotulo::before { content: ''; width: 26px; height: 1px; background: linear-gradient(90deg, transparent, var(--acento)); }
.rotulo.centro::after { content: ''; width: 26px; height: 1px; background: linear-gradient(90deg, var(--acento), transparent); }

/* ---------- cartão com luz que segue o cursor ---------- */
.spot { position: relative; background: linear-gradient(180deg, rgba(18, 24, 24, .8), rgba(8, 10, 11, .86)); border: 1px solid var(--linha); border-radius: var(--raio); isolation: isolate; }
.spot::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(111, 207, 201, .16), transparent 45%); }
.spot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .3s; z-index: 3;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(214, 244, 242, .85), rgba(111, 207, 201, .35) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.spot:hover::before, .spot:hover::after, .spot:focus-within::before, .spot:focus-within::after { opacity: 1; }

/* ---------- botões ---------- */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 26px; border-radius: 14px; font-weight: 600; font-size: 16px; text-decoration: none; transition: transform .25s, box-shadow .25s, border-color .2s, opacity .2s; }
.btn-pri { color: var(--sobre-acento); background: var(--grad-btn); box-shadow: 0 0 0 1px rgba(255, 255, 255, .22) inset, 0 12px 44px -12px rgba(63, 169, 162, .9); }
.btn-pri::after { content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent); transform: skewX(-20deg); transition: left .7s; }
.btn-pri:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .35) inset, 0 18px 64px -10px rgba(63, 169, 162, 1); }
.btn-pri:hover::after { left: 140%; }
.btn-sec { background: rgba(255, 255, 255, .03); border: 1px solid var(--linha-forte); color: var(--texto); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn-sec:hover { border-color: var(--acento); transform: translateY(-2px); }
.btn-whats { background: #1DA851; color: #fff; }
.btn-whats:hover { background: #22BC5C; transform: translateY(-2px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-bloco { width: 100%; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ---------- topo ---------- */
.topo { position: sticky; top: 0; z-index: 30; background: rgba(4, 4, 4, .72); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--linha); }
.topo .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 12px; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
[data-vt] { display: block; }
[data-vt] svg { display: block; width: 100%; height: auto; overflow: visible; }
.marca [data-vt] { width: 46px; flex: none; }
.marca-texto { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.marca-nome { font-family: var(--serif); font-size: 23px; font-weight: 600; white-space: nowrap; }
.marca-nome em { font-style: normal; color: var(--acento); }
.marca-sub { font-family: var(--mono); font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--suave); margin-top: 5px; }
.pilula { height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linha-forte); background: rgba(255, 255, 255, .03); display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; text-decoration: none; flex: none; transition: border-color .2s, background .2s; }
.pilula:hover { border-color: var(--acento); background: var(--acento-fundo); }
.pilula svg { width: 18px; height: 18px; }
.contador { background: var(--grad-btn); color: var(--sobre-acento); font-family: var(--mono); font-size: 11px; font-weight: 600; min-width: 20px; height: 20px; border-radius: 10px; display: inline-grid; place-items: center; padding: 0 6px; }

/* ---------- formulários ---------- */
.campo { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.campo label { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); }
.campo label span { text-transform: none; letter-spacing: 0; }
.campo input, .campo textarea, .campo select { height: 50px; border: 1px solid var(--linha); border-radius: 12px; background: var(--campo); padding: 0 14px; outline: none; width: 100%; font-size: 16px; transition: border-color .2s, box-shadow .2s, background .2s; }
.campo select option { background: #0E1212; }
.campo textarea { height: auto; min-height: 84px; padding: 13px 14px; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: #5F5B56; }
.campo input:focus, .campo textarea:focus, .campo select:focus { border-color: var(--acento); background: rgba(111, 207, 201, .05); box-shadow: 0 0 0 4px var(--acento-fundo); }
.campo.erro input, .campo.erro textarea { border-color: var(--vermelho); }
.campo small { color: var(--suave); font-size: 12px; }
.campo .msg-erro { color: var(--vermelho); font-size: 13px; font-weight: 500; }
.duas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }

/* ---------- selos ---------- */
.selo { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.selo::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.selo-ok { background: var(--verde-fundo); color: var(--verde); }
.selo-espera { background: var(--ambar-fundo); color: var(--ambar); }
.selo-erro { background: var(--vermelho-fundo); color: var(--vermelho); }
.selo-neutro { background: rgba(255, 255, 255, .05); color: var(--texto-2); }
.selo-acento { background: var(--acento-fundo); color: var(--acento); }

.aviso { padding: 12px 14px; border-radius: 12px; font-size: 14px; }
.aviso-erro { background: var(--vermelho-fundo); color: var(--vermelho); border: 1px solid rgba(240, 138, 126, .25); }
.aviso-info { background: var(--ambar-fundo); color: var(--ambar); border: 1px solid rgba(235, 190, 106, .25); }

.girando { width: 24px; height: 24px; border: 3px solid var(--linha-forte); border-top-color: var(--acento); border-radius: 50%; animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

.toast { position: fixed; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); background: rgba(16, 22, 22, .92); border: 1px solid var(--linha-forte); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--texto); padding: 11px 20px; border-radius: 999px; font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 90; white-space: nowrap; box-shadow: var(--sombra); }
.toast.ver { opacity: 1; transform: translate(-50%, 0); }

/* ---------- revelação no scroll ---------- */
.rv { opacity: 0; transform: translateY(26px); filter: blur(8px); transition: opacity .9s cubic-bezier(.2, .8, .2, 1), transform .9s cubic-bezier(.2, .8, .2, 1), filter .9s; }
.rv.on { opacity: 1; transform: none; filter: none; }

/* ---------- versão leve para celular ----------
   Desfoque animado, auroras em movimento e vidro fosco em muitas camadas pesam no
   celular. Aqui fica o mesmo visual com o custo de processamento bem menor. */
@media (max-width: 920px), (pointer: coarse) {
  .aurora i { filter: blur(70px); animation: none; }
  .rv { filter: none; transform: translateY(18px); transition: opacity .6s ease-out, transform .6s cubic-bezier(.2, .8, .2, 1); }
  .topo, .cats { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(4, 4, 4, .9); }
  .btn-sec, .toast { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .spot::before, .spot::after { display: none; }   /* luz do cursor não existe no toque */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .rv { opacity: 1; transform: none; filter: none; }
}