@import "tailwindcss";

/* ---------------------------------------------------------
   TOKENS
   No Tailwind v4, @theme gera automaticamente utilities
   como bg-bg, text-text, border-line, etc. a partir das vars.
--------------------------------------------------------- */
@theme {
  --color-bg: #f7f4ef;
  --color-bg-soft: #efe9df;
  --color-panel: rgba(255, 255, 255, 0.86);
  --color-panel-strong: #ffffff;
  --color-text: #1f2430;
  --color-muted: #5f6778;
  --color-line: rgba(42, 50, 66, 0.10);
  --color-accent: #6d4aff;
  --color-accent-2: #15a26e;
  --color-accent-3: #3f7cff;

  --shadow-brand: 0 30px 80px rgba(0, 0, 0, 0.35);
  --radius-brand: 28px;
  --breakpoint-3xl: 1180px;

  --font-display: "Fraunces Variable", "Fraunces", ui-serif, Georgia, serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  @apply m-0 text-text;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(109, 74, 255, 0.10), transparent 28%),
    radial-gradient(circle at right 15%, rgba(63, 124, 255, 0.08), transparent 24%),
    linear-gradient(180deg, #fbf8f4 0%, var(--color-bg) 44%, #f1ebe2 100%);
}

/* ---------------------------------------------------------
   COMPONENTES
   Aqui uso @apply com utilities do Tailwind. O que o Tailwind
   não tem "de fábrica" (gradientes compostos, sombras muito
   específicas) fica como CSS puro dentro da mesma classe.
--------------------------------------------------------- */
@layer components {

  .wrap {
    @apply w-[calc(100%-32px)] max-w-295 mx-auto;
  }

  .nav {
    @apply flex items-center justify-between py-4.5;
  }

  .video-block {
    @apply w-full aspect-video h-full rounded-2xl bg-black;
  }

  .brand {
    @apply flex items-center gap-3 font-extrabold tracking-[.2px];
  }

  .navlinks {
    @apply hidden md:flex gap-5.5 text-muted text-sm items-center;
  }

  .button {
    @apply inline-flex items-center justify-center gap-2.5 px-5 py-3.5 rounded-full font-bold border border-transparent transition duration-200 ease-in-out;
  }

  .button.primary {
    box-shadow: 0 18px 35px rgba(109, 74, 255, .18);
    @apply text-white bg-accent;
  }

  .button.secondary {
    @apply bg-white/72 hover:bg-white transition-all duration-200 border-[rgba(31,36,48,.08)];
  }

  .button:hover {
    @apply -translate-y-px;
  }

  .hero {
    @apply pt-21 pb-10;
  }

  h1 {
    @apply my-6 leading-[1.02] tracking-tighter font-display;
    font-size: clamp(3rem, 5vw, 5.6rem);
  }

  .lead {
    @apply w-full text-muted text-[1.08rem] leading-[1.75];
    &.lead-hero {
      @apply max-w-[60ch];
    }
  }

  .hero-actions {
    @apply flex flex-wrap gap-3.5 my-7 mb-6;
  }

  .hero-grid {
    @apply grid grid-cols-2 gap-10;
  }

  .timeline {
    @apply mt-4.5 flex gap-3.5 p-3.5 rounded-[22px] bg-white/[.58] border border-[rgba(31,36,48,.06)];
  }

  .timeline-card {
    @apply flex-1 rounded p-3.5 min-h-23.5;
  }

  .section {
    @apply py-18;
  }

  .section-head {
    @apply flex items-end justify-between gap-4.5 mb-6.5;
  }

  .section h2, .section-block h2 {
    @apply m-0 tracking-[-0.04em] font-display;
    font-size: clamp(2rem, 3vw, 3rem);
  }

  .section h3 {
    @apply m-0 tracking-[-0.04em] font-display;
    font-size: clamp(1rem, 2vw, 2rem);
  }

  .section p.sub {
    @apply m-0 text-muted max-w-[60ch] leading-[1.7];
  }

  .grid-3 {
    @apply grid grid-cols-3 gap-4.5;
  }

  .grid-feature {
    @apply grid grid-cols-2 gap-10;
  }

  .price-card,
  .quote,
  .contact-card {
    @apply rounded-brand p-6;
  }

  .feature-card .icon {
    @apply w-11 h-11 rounded-[14px] grid place-items-center text-accent font-extrabold;
    background: linear-gradient(135deg, rgba(109,74,255,.14), rgba(63,124,255,.12));
  }

  .feature-card-header {
    @apply flex gap-3 items-center mb-4;
    h3 {
      @apply text-2xl;
    }
  }

  .price-card.featured {
    @apply -translate-y-2 border-[rgba(109,74,255,.22)];
    background: linear-gradient(180deg, rgba(109,74,255,.10), rgba(255,255,255,.94));
  }

  .price {
    @apply text-4xl font-extrabold my-3;
  }

  /* Tabela comparativa de planos (era tudo inline no HTML) */
  .price-table {
    @apply w-full min-w-215 border-collapse;
  }

  .price-table thead tr {
    @apply text-left text-muted text-sm;
  }

  .price-table th,
  .price-table td {
    @apply px-3 py-3.5 border-b border-line;
  }

  .price-table tbody tr:last-child td {
    @apply border-b-0;
  }

  .price-table .hl {
    @apply bg-accent/5 font-bold;
  }

  .list {
    @apply p-0 mt-4.5 mb-0 list-none text-muted leading-[1.9];
  }

  .quote {
    @apply flex flex-col gap-3.5 min-h-full;
  }

  .quote span {
    @apply text-accent-2 font-extrabold tracking-[.08em] text-xs uppercase;
  }

  .contact-grid {
    @apply flex flex-col gap-6 bg-accent/10 p-15 rounded-brand items-center;
    a {
      @apply inline-block max-w-45 text-center;
    }
  }

  footer {
    @apply mt-20 border border-accent/10 py-8 text-muted text-sm;
  }

  .muted {
    @apply text-muted;
  }

  /* Responsivo */
  @media (max-width: 960px) {
    .hero-grid,
    .grid-3 {
      grid-template-columns: 1fr;
    }
    .navlinks {
      @apply hidden;
    }
    .section-head {
      @apply items-start flex-col;
    }
    .price-card.featured {
      @apply translate-y-0;
    }
  }

  @media (max-width: 640px) {
    .hero {
      @apply pt-14;
    }
    h1 {
      font-size: clamp(2.6rem, 12vw, 4rem);
    }
    .timeline {
      @apply flex-col;
    }
  }
}