/* Tema Velt Development — dark elegante, verde → ciano */

:root {
  --radius: 1rem;
  --font-display: "Sora", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;

  --background: oklch(0.145 0.03 265);
  --foreground: oklch(0.995 0 0);
  --card: oklch(0.19 0.03 265);
  --card-foreground: oklch(0.995 0 0);
  --primary: oklch(0.72 0.16 205);
  --primary-foreground: oklch(0.16 0.03 265);
  --secondary: oklch(0.24 0.03 265);
  --secondary-foreground: oklch(0.98 0 0);
  --muted: oklch(0.24 0.03 265);
  --muted-foreground: oklch(0.75 0.015 258);
  --accent: oklch(0.28 0.04 265);
  --accent-foreground: oklch(0.995 0 0);
  --border: oklch(1 0 0 / 12%);
  --input: oklch(1 0 0 / 14%);
  --ring: oklch(0.72 0.16 205);

  --gradient-brand: linear-gradient(120deg, oklch(0.79 0.19 135), oklch(0.72 0.16 205));
  --shadow-glow: 0 10px 40px -12px color-mix(in oklab, oklch(0.72 0.16 205) 65%, transparent);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.hero {
  padding-top: clamp(3.5rem, 8vw, 6rem);
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
}

.hero h1 {
  max-width: 22ch;
}

.hero-center h1,
.hero-center .lead {
  margin-inline: auto;
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.site-preview {
  border-radius: calc(var(--radius) * 1.4);
  border: 1px solid var(--border);
  overflow: hidden;
  background: oklch(0.19 0.03 265);
}

.site-preview-bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--secondary) 70%, transparent);
}

.site-preview-bar span {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--foreground) 22%, transparent);
}

.site-preview-bar .url {
  width: auto;
  height: auto;
  border-radius: 999px;
  background: color-mix(in oklab, var(--foreground) 8%, transparent);
  color: var(--muted-foreground);
  font-size: 0.7rem;
  padding: 0.15rem 0.6rem;
  margin-left: 0.4rem;
}

.site-preview-body {
  padding: 1.4rem;
  display: grid;
  gap: 0.75rem;
  min-height: 11rem;
  background:
    radial-gradient(
      80% 80% at 20% 0%,
      color-mix(in oklab, var(--primary) 18%, transparent),
      transparent 70%
    ),
    var(--card);
}

.social-links {
  display: flex;
  gap: 0.5rem;
}

.social-links a {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.social-links a:hover {
  color: var(--foreground);
  border-color: var(--primary);
}

.cta-banner {
  border-radius: calc(var(--radius) * 2);
  border: 1px solid var(--border);
  background:
    radial-gradient(
      70% 120% at 50% 0%,
      color-mix(in oklab, var(--primary) 22%, transparent),
      transparent 70%
    ),
    color-mix(in oklab, var(--card) 65%, transparent);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
}

.case-card {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 900px) {
  .case-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 2rem;
  }
}

@media (max-width: 520px) {
  .formulario {
    flex-direction: column;
    gap: 0.75rem;
  }
}