/* Guedestech — estilos complementares ao Tailwind */
:root { color-scheme: dark; }
html { scroll-behavior: smooth; }
body { background: #050C1D; }

.text-gradient {
  background: linear-gradient(135deg, #38BDF8 0%, #2563EB 55%, #6B5BD2 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.btn-primary {
  background: linear-gradient(135deg, #38BDF8, #2563EB);
  box-shadow: 0 10px 30px -10px rgba(37,99,235,.7);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(56,189,248,.6); filter: brightness(1.05); }

.card {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.08);
  transition: border-color .25s ease, transform .25s ease, background .25s ease;
}
.card:hover { border-color: rgba(56,189,248,.45); transform: translateY(-3px); background: linear-gradient(180deg, rgba(56,189,248,.07), rgba(255,255,255,.02)); }

/* Ondas inspiradas na capa do Facebook */
.waves { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.waves svg { position: absolute; width: 160%; height: 160%; top: -30%; left: -30%; opacity: .9; }

.grid-bg {
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .chev { transform: rotate(180deg); }
.chev { transition: transform .25s ease; }

:focus-visible { outline: 2px solid #38BDF8; outline-offset: 3px; border-radius: 4px; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; }
.skip-link:focus { left: 8px; }

/* Páginas legais */
.prose-legal h2 { font-size: 1.25rem; font-weight: 700; color: #fff; margin: 2rem 0 .75rem; }
.prose-legal h3 { font-size: 1.05rem; font-weight: 600; color: #e2e8f0; margin: 1.25rem 0 .5rem; }
.prose-legal p, .prose-legal li { color: #cbd5e1; line-height: 1.75; }
.prose-legal ul { list-style: disc; padding-left: 1.5rem; margin: .5rem 0 1rem; }
.prose-legal a { color: #38BDF8; text-decoration: underline; }

@media (prefers-reduced-motion: reduce) { .animate-float, .animate-drift { animation: none; } }