:root {
      --bg: #f7f8f6;
      --card: #ffffff;
      --text: #1f2933;
      --muted: #5f6b76;
      --line: #dbe2e8;
      --dark: #0f1720;
      --accent: #1f7a5b;
      --accent2: #245c7a;
      --soft: #eef5f1;
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
    }

    a { color: inherit; text-decoration: none; }

    .container {
      width: min(1120px, 92%);
      margin: 0 auto;
    }

    .topbar {
      background: var(--dark);
      color: #fff;
      font-size: 14px;
      padding: 8px 0;
    }

    .topbar .container {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }

    .nav {
      background: #fff;
      border-bottom: 1px solid var(--line);
      position: sticky;
      top: 0;
      z-index: 10;
    }

    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 72px;
      gap: 24px;
    }

    .logo {
      font-weight: 800;
      letter-spacing: .2px;
      font-size: 24px;
    }

    .logo span { color: var(--accent); }

    .menu {
      display: flex;
      gap: 22px;
      align-items: center;
      font-size: 15px;
    }

    .menu a { color: var(--muted); }
    .menu a:hover { color: var(--accent); }

    .btn {
      display: inline-block;
      background: var(--accent);
      color: #fff !important;
      padding: 12px 18px;
      border-radius: 10px;
      font-weight: 700;
      border: 1px solid var(--accent);
      cursor: pointer;
    }

    .btn.secondary {
      background: transparent;
      color: var(--accent) !important;
    }

    .hero {
      padding: 76px 0 56px;
      background:
        radial-gradient(circle at top left, #dceee5 0, transparent 36%),
        linear-gradient(135deg, #ffffff 0%, #eef5f1 100%);
      border-bottom: 1px solid var(--line);
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 42px;
      align-items: center;
    }

    .kicker {
      display: inline-block;
      background: #e7f4ee;
      color: var(--accent);
      padding: 6px 12px;
      border-radius: 999px;
      font-weight: 700;
      font-size: 13px;
      margin-bottom: 18px;
    }

    h1 {
      font-size: clamp(36px, 5vw, 60px);
      line-height: 1.05;
      margin: 0 0 18px;
      letter-spacing: -1.5px;
    }

    h2 {
      font-size: clamp(28px, 3vw, 42px);
      line-height: 1.15;
      margin: 0 0 14px;
    }

    h3 {
      margin: 0 0 10px;
      font-size: 22px;
    }

    .lead {
      color: var(--muted);
      font-size: 19px;
      max-width: 720px;
      margin-bottom: 28px;
    }

    .hero-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .hero-card, .card, .price, .model-card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 24px;
    }

    .hero-card {
      border-radius: 22px;
      box-shadow: 0 20px 50px rgba(15,23,32,.08);
    }

    .hero-card ul {
      padding-left: 20px;
      margin: 12px 0 0;
    }

    .section {
      padding: 68px 0;
    }

    .section.alt {
      background: #fff;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .section-head {
      max-width: 780px;
      margin-bottom: 32px;
    }

    .section-head p, .card p, .model-card p {
      color: var(--muted);
    }

    .cards, .price-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }

    .models {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 14px;
    }

    .model-card {
      padding: 18px;
      transition: .2s;
    }

    .model-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 30px rgba(15,23,32,.08);
    }

    .model-card h3 { font-size: 18px; }
    .model-card p { font-size: 14px; }

    .badge {
      display: inline-block;
      background: var(--soft);
      color: var(--accent);
      font-size: 13px;
      font-weight: 700;
      border-radius: 999px;
      padding: 5px 10px;
      margin-bottom: 12px;
    }

    .price strong {
      display: block;
      font-size: 28px;
      margin: 10px 0;
    }

    .price ul {
      padding-left: 18px;
      color: var(--muted);
    }

    .model-section {
      padding: 42px 0;
      border-top: 1px solid var(--line);
    }

    .model-box {
      display: grid;
      grid-template-columns: .8fr 1.2fr;
      gap: 24px;
      align-items: center;
    }

    .mock {
      min-height: 240px;
      border-radius: 18px;
      background: linear-gradient(135deg, rgba(31,122,91,.95), rgba(36,92,122,.92));
      color: #fff;
      padding: 26px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }

    .mock p { color: #eef6f1; }

    .cta {
      background: var(--dark);
      color: #fff;
      padding: 56px 0;
    }

    .cta p { color: #d8dee5; }

    .footer {
      padding: 28px 0;
      background: #0b1118;
      color: #cbd5df;
      font-size: 14px;
    }

    .footer .container {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }

    .form {
      display: grid;
      gap: 12px;
    }

    input, textarea, select {
      width: 100%;
      border: 1px solid var(--line);
      padding: 13px;
      border-radius: 10px;
      font: inherit;
    }

    textarea { min-height: 110px; }

    .whatsapp-float {
      position: fixed;
      right: 18px;
      bottom: 18px;
      background: #25d366;
      color: #fff;
      padding: 14px 16px;
      border-radius: 999px;
      font-weight: 800;
      box-shadow: 0 8px 24px rgba(0,0,0,.18);
      z-index: 20;
    }

    @media (max-width: 900px) {
      .hero-grid, .cards, .price-grid, .model-box {
        grid-template-columns: 1fr;
      }

      .models {
        grid-template-columns: repeat(2, 1fr);
      }

      .menu {
        display: none;
      }
    }

    @media (max-width: 520px) {
      .models {
        grid-template-columns: 1fr;
      }

      .footer .container,
      .topbar .container {
        display: block;
      }
    }

/* === Fase 07 — Hero profissional BrumaTech === */

.hero-upgraded {
  position: relative;
  overflow: hidden;
  padding: 88px 0 64px;
}

.hero-upgraded::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 82% 18%, rgba(36, 92, 122, .18), transparent 34%),
    radial-gradient(circle at 12% 80%, rgba(31, 122, 91, .14), transparent 30%);
  pointer-events: none;
}

.hero-upgraded .container {
  position: relative;
  z-index: 1;
}

.hero-copy h1 {
  max-width: 760px;
}

.hero-copy .lead {
  max-width: 760px;
}

.hero-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 30px;
}

.hero-trust div {
  background: rgba(255,255,255,.78);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
}

.hero-trust strong {
  display: block;
  font-size: 15px;
  color: var(--text);
}

.hero-trust span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-top: 3px;
}

.hero-visual {
  position: relative;
  min-height: 430px;
}

.browser-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(15,23,32,.14);
  transform: rotate(1deg);
}

.browser-top {
  height: 44px;
  background: #101923;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
}

.browser-top span {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
}

.browser-body {
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(31,122,91,.08), rgba(36,92,122,.06)),
    #fff;
}

.site-preview {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: white;
  padding: 24px;
  min-height: 300px;
}

.preview-label {
  display: inline-block;
  background: var(--soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.site-preview h3 {
  font-size: 28px;
  line-height: 1.1;
  margin-bottom: 10px;
}

.site-preview p {
  color: var(--muted);
  margin-bottom: 22px;
}

.preview-bar {
  height: 12px;
  border-radius: 999px;
  background: #dbe2e8;
  margin: 10px 0;
  width: 72%;
}

.preview-bar.large {
  height: 18px;
  width: 92%;
  background: linear-gradient(90deg, rgba(31,122,91,.32), rgba(36,92,122,.20));
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 24px;
}

.preview-grid div {
  background: #f7f8f6;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.floating-note {
  position: absolute;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 16px 40px rgba(15,23,32,.12);
}

.floating-note strong {
  display: block;
  color: var(--accent);
  font-size: 16px;
}

.floating-note span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}

.note-one {
  right: -10px;
  top: 74px;
}

.note-two {
  left: -10px;
  bottom: 48px;
}

@media (max-width: 900px) {
  .hero-upgraded {
    padding: 64px 0 48px;
  }

  .hero-trust {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    min-height: auto;
  }

  .browser-card {
    transform: none;
  }

  .floating-note {
    position: static;
    margin-top: 12px;
  }
}

/* === Fase 08 — Visual Hi-Tech Comercial BrumaTech === */

:root {
  --tech-cyan: #23c7d9;
  --tech-blue: #2563eb;
  --tech-purple: #6d5dfc;
  --tech-green: #16a36f;
  --tech-dark: #07111d;
}

body {
  background:
    radial-gradient(circle at 8% 10%, rgba(35,199,217,.08), transparent 24%),
    radial-gradient(circle at 92% 18%, rgba(109,93,252,.08), transparent 24%),
    #f7f8f6;
}

.logo {
  letter-spacing: -0.4px;
}

.logo span {
  background: linear-gradient(90deg, var(--accent), var(--tech-cyan), var(--tech-blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nav {
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px);
}

.btn {
  background: linear-gradient(135deg, var(--accent), var(--tech-blue));
  border: none;
  box-shadow: 0 12px 28px rgba(31,122,91,.20);
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(37,99,235,.22);
}

.btn.secondary {
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(31,122,91,.25);
  color: var(--accent) !important;
  box-shadow: none;
}

.hero-upgraded {
  background:
    linear-gradient(120deg, rgba(255,255,255,.96), rgba(238,245,241,.86)),
    radial-gradient(circle at 78% 22%, rgba(35,199,217,.24), transparent 32%),
    radial-gradient(circle at 18% 74%, rgba(31,122,91,.20), transparent 30%);
}

.hero-upgraded::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(31,122,91,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.06) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 82%);
  pointer-events: none;
}

.kicker {
  background: linear-gradient(90deg, rgba(31,122,91,.12), rgba(35,199,217,.16));
  color: #0c6f66;
  border: 1px solid rgba(35,199,217,.20);
}

.hero-copy h1 {
  background: linear-gradient(120deg, #0f1720 0%, #173f55 45%, #0d7d73 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-card,
.card,
.price,
.model-card,
.hero-trust div {
  box-shadow: 0 16px 42px rgba(15,23,32,.055);
}

.hero-trust div {
  position: relative;
  overflow: hidden;
}

.hero-trust div::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--accent), var(--tech-cyan), var(--tech-blue));
}

.hero-visual {
  perspective: 900px;
}

.browser-card {
  position: relative;
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(246,250,252,.92));
  border: 1px solid rgba(35,199,217,.22);
  box-shadow:
    0 28px 80px rgba(15,23,32,.16),
    0 0 0 1px rgba(255,255,255,.70) inset;
}

.browser-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, rgba(31,122,91,.28), rgba(35,199,217,.24), rgba(109,93,252,.20));
  filter: blur(18px);
  opacity: .55;
  z-index: -1;
}

.browser-top {
  background:
    linear-gradient(90deg, #07111d, #0e2234 45%, #082e35);
}

.browser-top::after {
  content: "brumatech.digital/client-site";
  color: rgba(255,255,255,.55);
  font-size: 12px;
  margin-left: 10px;
  letter-spacing: .2px;
}

.browser-top span:nth-child(1) { background: #ff6b6b; }
.browser-top span:nth-child(2) { background: #ffd166; }
.browser-top span:nth-child(3) { background: #06d6a0; }

.browser-body {
  background:
    radial-gradient(circle at top right, rgba(35,199,217,.16), transparent 35%),
    linear-gradient(135deg, rgba(31,122,91,.08), rgba(36,92,122,.06)),
    #fff;
}

.site-preview {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(35,199,217,.20);
}

.site-preview::before {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(35,199,217,.22), transparent 68%);
}

.site-preview h3 {
  background: linear-gradient(90deg, #0f1720, var(--accent2), var(--tech-blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.preview-label {
  background: linear-gradient(90deg, rgba(31,122,91,.12), rgba(35,199,217,.16));
  border: 1px solid rgba(35,199,217,.22);
}

.preview-bar.large {
  background: linear-gradient(90deg, var(--accent), var(--tech-cyan), var(--tech-blue));
  opacity: .72;
}

.preview-grid div {
  background: linear-gradient(145deg, #ffffff, #f1f7f8);
  border: 1px solid rgba(35,199,217,.20);
}

.floating-note {
  border: 1px solid rgba(35,199,217,.24);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px);
}

.floating-note strong {
  background: linear-gradient(90deg, var(--accent), var(--tech-blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.card:hover,
.price:hover,
.model-card:hover {
  border-color: rgba(35,199,217,.35);
  box-shadow: 0 18px 48px rgba(35,199,217,.10);
}

.badge {
  background: linear-gradient(90deg, rgba(31,122,91,.10), rgba(35,199,217,.13));
  border: 1px solid rgba(35,199,217,.16);
}

.whatsapp-float {
  background: linear-gradient(135deg, #25d366, #16a36f);
  box-shadow:
    0 12px 34px rgba(37,211,102,.34),
    0 0 0 6px rgba(37,211,102,.10);
}

.cta {
  background:
    radial-gradient(circle at 80% 20%, rgba(35,199,217,.16), transparent 30%),
    radial-gradient(circle at 20% 80%, rgba(31,122,91,.20), transparent 28%),
    linear-gradient(135deg, #07111d, #0f1720 55%, #0b2630);
}

.footer {
  background: #06101b;
}

@media (max-width: 900px) {
  .browser-top::after {
    content: "";
  }
}

/* === Fase 09 — Carrossel de Modelos Hi-Tech === */

.modelos-carousel-section {
  position: relative;
  overflow: hidden;
}

.modelos-carousel-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(35,199,217,.12), transparent 26%),
    radial-gradient(circle at 86% 72%, rgba(109,93,252,.10), transparent 30%);
  pointer-events: none;
}

.modelos-carousel-section .container {
  position: relative;
  z-index: 1;
}

.carousel-shell {
  position: relative;
  display: grid;
  grid-template-columns: 54px 1fr 54px;
  gap: 14px;
  align-items: center;
}

.carousel-window {
  overflow: hidden;
  border-radius: 28px;
}

.carousel-track {
  display: flex;
  transition: transform .45s ease;
  will-change: transform;
}

.carousel-card {
  min-width: 100%;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 0;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(35,199,217,.22);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(15,23,32,.11);
}

.carousel-visual {
  min-height: 420px;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 28px;
  color: #fff;
  overflow: hidden;
}

.carousel-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent);
}

.carousel-visual::after {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  right: -40px;
  top: -40px;
  background: radial-gradient(circle, rgba(255,255,255,.28), transparent 64%);
}

.carousel-visual span {
  position: relative;
  z-index: 1;
  font-size: clamp(34px, 5vw, 64px);
  line-height: .95;
  font-weight: 900;
  letter-spacing: -2px;
  text-shadow: 0 20px 45px rgba(0,0,0,.28);
}

.carousel-visual.restaurant {
  background: linear-gradient(135deg, #0f766e, #16a36f 42%, #2563eb);
}

.carousel-visual.oficina {
  background: linear-gradient(135deg, #111827, #245c7a 48%, #23c7d9);
}

.carousel-visual.loja {
  background: linear-gradient(135deg, #6d5dfc, #2563eb 45%, #23c7d9);
}

.carousel-visual.clinica {
  background: linear-gradient(135deg, #0d9488, #23c7d9 45%, #e0f7f8);
}

.carousel-visual.servicos {
  background: linear-gradient(135deg, #1f2937, #1f7a5b 48%, #06d6a0);
}

.carousel-visual.institucional {
  background: linear-gradient(135deg, #07111d, #245c7a 52%, #6d5dfc);
}

.carousel-content {
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.carousel-content h3 {
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.08;
  letter-spacing: -1px;
}

.carousel-content p {
  color: var(--muted);
  font-size: 18px;
}

.carousel-content ul {
  margin: 8px 0 26px;
  padding-left: 18px;
  color: var(--muted);
}

.carousel-content li {
  margin: 6px 0;
}

.carousel-btn {
  width: 54px;
  height: 54px;
  border: 1px solid rgba(35,199,217,.25);
  background: rgba(255,255,255,.82);
  color: var(--accent2);
  border-radius: 999px;
  font-size: 38px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 14px 38px rgba(15,23,32,.10);
  transition: .2s ease;
  z-index: 2;
}

.carousel-btn:hover {
  background: linear-gradient(135deg, var(--accent), var(--tech-blue));
  color: #fff;
  transform: translateY(-2px);
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 22px;
}

.carousel-dot {
  width: 10px;
  height: 10px;
  border: none;
  border-radius: 999px;
  background: #c9d4df;
  cursor: pointer;
  transition: .2s ease;
}

.carousel-dot.active {
  width: 32px;
  background: linear-gradient(90deg, var(--accent), var(--tech-cyan), var(--tech-blue));
}

@media (max-width: 900px) {
  .carousel-shell {
    grid-template-columns: 1fr;
  }

  .carousel-btn {
    display: none;
  }

  .carousel-card {
    grid-template-columns: 1fr;
  }

  .carousel-visual {
    min-height: 260px;
  }
}

/* === Fase 11 — Como funciona e modelo gerenciado === */

.how-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(35,199,217,.10), transparent 28%),
    radial-gradient(circle at 88% 82%, rgba(109,93,252,.08), transparent 30%),
    #f7f8f6;
}

.how-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(37,99,235,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35,199,217,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 86%);
}

.how-section .container {
  position: relative;
  z-index: 1;
}

.how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 34px;
}

.how-step {
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(35,199,217,.18);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 16px 42px rgba(15,23,32,.06);
  position: relative;
  overflow: hidden;
}

.how-step::after {
  content: "";
  position: absolute;
  right: -45px;
  top: -45px;
  width: 130px;
  height: 130px;
  background: radial-gradient(circle, rgba(35,199,217,.16), transparent 70%);
}

.step-number {
  font-size: 13px;
  font-weight: 900;
  color: var(--tech-blue);
  background: linear-gradient(90deg, rgba(31,122,91,.10), rgba(35,199,217,.15));
  border: 1px solid rgba(35,199,217,.20);
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.how-step h3 {
  font-size: 20px;
}

.how-step p {
  color: var(--muted);
  font-size: 15px;
}

.managed-box {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 24px;
  align-items: center;
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(238,245,241,.80));
  border: 1px solid rgba(35,199,217,.22);
  border-radius: 28px;
  padding: clamp(24px, 4vw, 42px);
  box-shadow: 0 24px 70px rgba(15,23,32,.10);
}

.managed-copy h2 {
  max-width: 720px;
}

.managed-copy p {
  color: var(--muted);
  font-size: 18px;
}

.managed-list {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.managed-list div {
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(35,199,217,.18);
  border-radius: 14px;
  padding: 14px;
}

.managed-list strong {
  display: block;
  color: var(--text);
}

.managed-list span {
  display: block;
  color: var(--muted);
  font-size: 14px;
  margin-top: 3px;
}

.managed-card {
  background: #fff;
  border: 1px solid rgba(35,199,217,.24);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(15,23,32,.13);
  transform: rotate(-1deg);
}

.managed-card-top {
  height: 42px;
  background: linear-gradient(90deg, #07111d, #0e2234 45%, #082e35);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
}

.managed-card-top span {
  width: 11px;
  height: 11px;
  border-radius: 999px;
}

.managed-card-top span:nth-child(1) { background: #ff6b6b; }
.managed-card-top span:nth-child(2) { background: #ffd166; }
.managed-card-top span:nth-child(3) { background: #06d6a0; }

.managed-card-body {
  padding: 28px;
  background:
    radial-gradient(circle at top right, rgba(35,199,217,.16), transparent 36%),
    #fff;
}

.managed-card-body h3 {
  font-size: 28px;
}

.managed-card-body p {
  color: var(--muted);
  font-size: 17px;
}

.managed-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 22px;
}

.managed-flow div {
  text-align: center;
  background: #f7f8f6;
  border: 1px solid rgba(35,199,217,.20);
  border-radius: 12px;
  padding: 12px 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 1000px) {
  .how-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .managed-box {
    grid-template-columns: 1fr;
  }

  .managed-card {
    transform: none;
  }
}

@media (max-width: 620px) {
  .how-grid {
    grid-template-columns: 1fr;
  }

  .managed-flow {
    grid-template-columns: 1fr;
  }
}

/* === Fase 12 — Pacotes e mensalidades === */

.packages-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 18%, rgba(35,199,217,.10), transparent 28%),
    radial-gradient(circle at 88% 74%, rgba(31,122,91,.10), transparent 28%),
    #ffffff;
}

.packages-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(37,99,235,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35,199,217,.04) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.48), transparent 82%);
}

.packages-section .container {
  position: relative;
  z-index: 1;
}

.packages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}

.package-card {
  position: relative;
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(35,199,217,.20);
  border-radius: 26px;
  padding: 28px;
  box-shadow: 0 22px 62px rgba(15,23,32,.09);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.package-card::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(35,199,217,.15), transparent 68%);
}

.featured-package {
  border-color: rgba(35,199,217,.42);
  transform: translateY(-10px);
  box-shadow:
    0 32px 90px rgba(15,23,32,.14),
    0 0 0 1px rgba(35,199,217,.14) inset;
}

.package-ribbon {
  position: absolute;
  top: 18px;
  right: -42px;
  transform: rotate(35deg);
  background: linear-gradient(90deg, var(--accent), var(--tech-cyan), var(--tech-blue));
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  padding: 7px 48px;
  z-index: 2;
}

.package-top {
  position: relative;
  z-index: 1;
}

.package-top h3 {
  font-size: 30px;
  letter-spacing: -1px;
  margin-bottom: 10px;
}

.package-top p {
  color: var(--muted);
  min-height: 76px;
}

.package-price {
  position: relative;
  z-index: 1;
  margin: 18px 0 20px;
  padding: 18px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(31,122,91,.08), rgba(35,199,217,.10)),
    #f7f8f6;
  border: 1px solid rgba(35,199,217,.18);
}

.package-price span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.package-price strong {
  display: block;
  font-size: 38px;
  line-height: 1.05;
  letter-spacing: -1.5px;
  margin: 6px 0;
  background: linear-gradient(90deg, var(--accent), var(--tech-blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.package-price small {
  display: block;
  color: var(--accent2);
  font-weight: 800;
}

.package-card ul {
  position: relative;
  z-index: 1;
  padding-left: 18px;
  color: var(--muted);
  margin: 0 0 24px;
}

.package-card li {
  margin: 8px 0;
}

.package-btn {
  position: relative;
  z-index: 1;
  margin-top: auto;
  text-align: center;
}

.package-note {
  margin-top: 22px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(35,199,217,.18);
  border-radius: 18px;
  padding: 18px;
  color: var(--muted);
  box-shadow: 0 14px 38px rgba(15,23,32,.06);
}

.package-note strong {
  color: var(--text);
}

@media (max-width: 1000px) {
  .packages-grid {
    grid-template-columns: 1fr;
  }

  .featured-package {
    transform: none;
  }

  .package-top p {
    min-height: auto;
  }
}

/* === Fase 13 — Formulário comercial WhatsApp === */

.quote-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 20%, rgba(35,199,217,.10), transparent 28%),
    radial-gradient(circle at 88% 80%, rgba(109,93,252,.08), transparent 30%),
    #ffffff;
}

.quote-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(37,99,235,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35,199,217,.04) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.40), transparent 82%);
}

.quote-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 34px;
  align-items: center;
}

.quote-copy h2 {
  max-width: 740px;
}

.quote-benefits {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

.quote-benefits div {
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(35,199,217,.18);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 14px 38px rgba(15,23,32,.06);
}

.quote-benefits strong {
  display: block;
  color: var(--text);
}

.quote-benefits span {
  display: block;
  color: var(--muted);
  font-size: 14px;
  margin-top: 3px;
}

.quote-card {
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(35,199,217,.24);
  border-radius: 28px;
  padding: clamp(22px, 4vw, 34px);
  box-shadow:
    0 28px 80px rgba(15,23,32,.13),
    0 0 0 1px rgba(255,255,255,.65) inset;
}

.quote-form {
  gap: 14px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.quote-form input,
.quote-form textarea,
.quote-form select {
  background: rgba(247,248,246,.92);
  border: 1px solid rgba(35,199,217,.18);
  transition: .2s ease;
}

.quote-form input:focus,
.quote-form textarea:focus,
.quote-form select:focus {
  outline: none;
  border-color: rgba(35,199,217,.55);
  box-shadow: 0 0 0 4px rgba(35,199,217,.10);
  background: #fff;
}

.quote-submit {
  width: 100%;
  text-align: center;
}

.form-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

@media (max-width: 900px) {
  .quote-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

/* === Fase 14 — Identidade e credibilidade === */

.credibility-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(35,199,217,.11), transparent 28%),
    radial-gradient(circle at 88% 78%, rgba(109,93,252,.09), transparent 30%),
    linear-gradient(135deg, #ffffff, #f7f8f6);
  border-bottom: 1px solid var(--line);
}

.credibility-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(37,99,235,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35,199,217,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.45), transparent 85%);
}

.credibility-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 34px;
  align-items: center;
}

.credibility-copy h2 {
  max-width: 720px;
  background: linear-gradient(120deg, #0f1720 0%, #173f55 45%, #0d7d73 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-signature {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(35,199,217,.20);
  border-radius: 18px;
  padding: 14px 18px;
  box-shadow: 0 18px 46px rgba(15,23,32,.08);
}

.brand-mark {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: white;
  font-weight: 900;
  letter-spacing: -1px;
  background: linear-gradient(135deg, var(--accent), var(--tech-cyan), var(--tech-blue));
  box-shadow: 0 12px 30px rgba(37,99,235,.22);
}

.brand-signature strong {
  display: block;
  font-size: 18px;
}

.brand-signature span {
  display: block;
  color: var(--muted);
  font-size: 14px;
}

.credibility-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.credibility-cards article {
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(35,199,217,.20);
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 18px 46px rgba(15,23,32,.07);
  position: relative;
  overflow: hidden;
}

.credibility-cards article::after {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(35,199,217,.16), transparent 70%);
}

.credibility-cards article span {
  display: inline-block;
  color: var(--tech-blue);
  font-size: 13px;
  font-weight: 900;
  background: linear-gradient(90deg, rgba(31,122,91,.10), rgba(35,199,217,.15));
  border: 1px solid rgba(35,199,217,.20);
  border-radius: 999px;
  padding: 6px 10px;
  margin-bottom: 14px;
}

.credibility-cards h3 {
  font-size: 20px;
}

.credibility-cards p {
  color: var(--muted);
  font-size: 15px;
}

@media (max-width: 950px) {
  .credibility-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .credibility-cards {
    grid-template-columns: 1fr;
  }

  .brand-signature {
    align-items: flex-start;
  }
}

/* === Fase 15 — FAQ comercial e regras do serviço === */

.faq-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 22%, rgba(35,199,217,.10), transparent 28%),
    radial-gradient(circle at 86% 78%, rgba(109,93,252,.08), transparent 30%),
    #f7f8f6;
  border-top: 1px solid var(--line);
}

.faq-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(37,99,235,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35,199,217,.04) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.46), transparent 84%);
}

.faq-section .container {
  position: relative;
  z-index: 1;
}

.faq-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 24px;
  align-items: start;
}

.faq-list {
  display: grid;
  gap: 12px;
}

.faq-item {
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(35,199,217,.18);
  border-radius: 18px;
  padding: 0;
  box-shadow: 0 14px 40px rgba(15,23,32,.06);
  overflow: hidden;
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 22px;
  font-weight: 900;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: white;
  background: linear-gradient(135deg, var(--accent), var(--tech-blue));
  flex: 0 0 auto;
}

.faq-item[open] summary::after {
  content: "–";
}

.faq-item p {
  margin: 0;
  padding: 0 22px 20px;
  color: var(--muted);
}

.faq-contract-card {
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(238,245,241,.84));
  border: 1px solid rgba(35,199,217,.24);
  border-radius: 26px;
  padding: 28px;
  box-shadow: 0 24px 70px rgba(15,23,32,.10);
  position: sticky;
  top: 96px;
}

.faq-contract-card h3 {
  font-size: 30px;
  letter-spacing: -1px;
  line-height: 1.08;
}

.faq-contract-card p {
  color: var(--muted);
  font-size: 17px;
}

.contract-points {
  display: grid;
  gap: 10px;
  margin: 22px 0;
}

.contract-points div {
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(35,199,217,.18);
  border-radius: 14px;
  padding: 14px;
}

.contract-points strong {
  display: block;
  color: var(--text);
}

.contract-points span {
  display: block;
  color: var(--muted);
  font-size: 14px;
  margin-top: 3px;
}

@media (max-width: 950px) {
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .faq-contract-card {
    position: static;
  }
}

/* === Fase 16 — SEO local e presença em Brumadinho === */

.local-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 22%, rgba(35,199,217,.12), transparent 28%),
    radial-gradient(circle at 86% 76%, rgba(31,122,91,.10), transparent 30%),
    #ffffff;
  border-top: 1px solid var(--line);
}

.local-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(37,99,235,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35,199,217,.04) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.42), transparent 84%);
}

.local-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 30px;
  align-items: center;
}

.local-copy h2 {
  background: linear-gradient(120deg, #0f1720 0%, #173f55 48%, #0d7d73 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.local-copy p {
  color: var(--muted);
  font-size: 17px;
}

.local-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
}

.local-tags span {
  background: linear-gradient(90deg, rgba(31,122,91,.10), rgba(35,199,217,.13));
  border: 1px solid rgba(35,199,217,.18);
  color: var(--accent2);
  font-size: 13px;
  font-weight: 800;
  border-radius: 999px;
  padding: 8px 12px;
}

.local-panel {
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(238,245,241,.84));
  border: 1px solid rgba(35,199,217,.24);
  border-radius: 26px;
  padding: 30px;
  box-shadow: 0 24px 70px rgba(15,23,32,.10);
}

.local-panel h3 {
  font-size: 30px;
  letter-spacing: -1px;
  line-height: 1.08;
}

.local-panel p {
  color: var(--muted);
  font-size: 17px;
}

.local-list {
  display: grid;
  gap: 10px;
  margin: 22px 0;
}

.local-list div {
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(35,199,217,.18);
  border-radius: 14px;
  padding: 14px;
}

.local-list strong {
  display: block;
  color: var(--text);
}

.local-list span {
  display: block;
  color: var(--muted);
  font-size: 14px;
  margin-top: 3px;
}

@media (max-width: 950px) {
  .local-grid {
    grid-template-columns: 1fr;
  }
}