/* ====== Tema moderno com gradientes ====== */
*{box-sizing:border-box}
:root{
  --bg:#f9fafb;
  --card:#ffffff;
  --alt:#f3f4f6;
  --text:#111827;
  --muted:#6b7280;
  --accent:#6366f1;      /* Indigo */
  --accent-2:#ec4899;    /* Rosa */
  --accent-3:#3b82f6;    /* Azul */
  --ok:#22c55e;          /* Verde */
  --ring: rgba(99, 102, 241, .3);

  --fs-h1: clamp(28px, 4.2vw, 44px);
  --fs-h2: clamp(24px, 3.2vw, 36px);
  --fs-h3: clamp(18px, 2.2vw, 22px);
  --fs-base: clamp(14px, 1.2vw, 16px);

  --radius: 18px;
  --shadow-sm: 0 2px 6px rgba(0,0,0,.05);
  --shadow-md: 0 8px 24px rgba(0,0,0,.12);

  --header-h-desktop: 88px;
  --header-h-mobile: 72px;
}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial;
  background: linear-gradient(135deg, #fdf2f8, #e0e7ff, #e0f2fe);
  background-attachment: fixed;
  color: var(--text);
  font-size: var(--fs-base);
  line-height: 1.5;
}
img{max-width:100%;display:block;border-radius:12px}

/* ====== Container & Seções ====== */
.container{width:min(1120px, 92%); margin:0 auto}
.section{padding:48px 0}
.section--alt{background:rgba(255,255,255,.6); backdrop-filter:blur(6px)}

/* ====== Header ====== */
.header{
  position: fixed;
  top:0; left:0; right:0;
  z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid #e5e7eb;
  height:var(--header-h-desktop);
}
.header__wrap{display:flex; align-items:center; justify-content:space-between; height:100%}
.brand{display:flex; gap:12px; align-items:center}
.brand__logo{width:80px; height:80px; border-radius:12px; box-shadow:0 6px 12px rgba(0,0,0,.1)}
.brand__title{
  margin:0;
  font-size:20px;
  font-weight:700;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;
  color:transparent
}
.nav a{color:var(--text); text-decoration:none; margin-left:18px; font-weight:600; opacity:.9}
.nav a:hover{opacity:1; color:var(--accent)}

/* ===== Hamburguer base ===== */
.nav-toggle{
  display:none;
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  width:44px; height:44px; padding:0; margin-left:8px;
  align-items:center; justify-content:center; gap:4px; cursor:pointer;
  box-shadow:0 6px 12px rgba(0,0,0,.08);
}
.nav-toggle span{
  display:block; width:22px; height:2px; background:#111827; border-radius:2px;
}
.nav-toggle.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg) }
.nav-toggle.is-open span:nth-child(2){ opacity:0 }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }
.nav-toggle span{ transition:.25s }

/* ===== Menu mobile drawer ===== */
.mobile-menu{
  position:fixed; inset: var(--header-h-mobile) 0 auto 0;
  background:#fff; border-bottom:1px solid #e5e7eb;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
  display:flex; flex-direction:column; padding:12px;
  transform:translateY(-16px); opacity:0; pointer-events:none;
  transition:.25s; z-index:49;
}
.mobile-menu a{
  padding:14px 10px; border-radius:10px; text-decoration:none; color:#111827; font-weight:600;
}
.mobile-menu a:hover{ background:#f3f4f6 }
.mobile-menu.is-open{ transform:translateY(0); opacity:1; pointer-events:auto }
body.menu-open{ overflow:hidden }

/* ====== Hero ====== */
.hero{padding:calc(var(--header-h-desktop) + 20px) 0 24px}
.hero__wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center}
.hero__copy h2{font-size:var(--fs-h1); margin:.2rem 0 1rem; line-height:1.2}
.hero__copy h2 span{background:linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3)); -webkit-background-clip:text; color:transparent}
.bullets{list-style:none; padding:0; margin:1rem 0; display:grid; gap:6px; color:var(--muted)}
.hero__ctas{display:flex; gap:14px; margin-top:20px; flex-wrap:wrap}

/* ====== Botões ====== */
.btn{display:inline-flex; align-items:center; justify-content:center; padding:14px 20px; border-radius:14px; text-decoration:none; font-weight:700; border:1px solid transparent; cursor:pointer; min-height:44px; transition:.3s all}
.btn--primary{background:linear-gradient(90deg, var(--accent), var(--accent-2)); color:#fff; box-shadow:0 6px 16px rgba(0,0,0,.12)}
.btn--primary:hover{background:linear-gradient(90deg, var(--accent-2), var(--accent-3))}
.btn--ghost{background:#fff; color:var(--text); border-color:#d1d5db}
.btn--full{width:100%}

/* ====== Cards Catálogo ====== */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:28px;
  margin-top:16px;
}
.card{
  background:var(--card);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-md);
  display:flex;
  flex-direction:column;
  padding:20px;
  transition:.25s;
  border:1px solid #e5e7eb;
  background-image:linear-gradient(to bottom,#fafafa,#fff 30%);
  min-height:400px;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(0,0,0,.12);
}
.card h4{margin:8px 0;font-size:var(--fs-h3)}
.card .price{font-weight:700;color:var(--accent);font-size:18px}
.card .cap{color:var(--muted);font-size:13px}
.card ul{margin:6px 0 0; padding-left:18px; color:var(--muted); font-size:13px; line-height:1.4}
.card li{margin-bottom:4px}
.card .actions{display:flex;gap:10px;margin-top:auto;flex-wrap:wrap}
.card button{flex:1;padding:12px;border-radius:10px;font-weight:600;border:1px solid #d1d5db;background:#f9fafb;color:var(--text);cursor:pointer;transition:.2s}
.card button:hover{border-color:var(--accent);color:var(--accent)}

/* ====== Resumo / Form ====== */
.summary{background:#fff;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-md);border:1px solid #e5e7eb}
.summary__row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed #e5e7eb}
.form{background:#fff;border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-md);border:1px solid #e5e7eb}
.grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field--full{grid-column:1 / -1}
input,select,textarea{padding:12px;border:1px solid #d1d5db;border-radius:10px;font-size:14px}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}

/* ====== FAQ / Footer ====== */
.faq details{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:14px;margin:10px 0;box-shadow:var(--shadow-sm)}
.footer{padding:20px 0;border-top:1px solid #e5e7eb;background:#fff}
.footer__wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* ====== Floating WhatsApp Button ====== */
.fab{position:fixed;right:20px;bottom:20px;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;text-decoration:none;background:linear-gradient(135deg, var(--accent-2), var(--accent-3));color:#fff;font-size:24px;box-shadow:0 8px 20px rgba(0,0,0,.25);transition:.3s}
.fab:hover{transform:scale(1.05)}

/* ====== Responsividade ====== */
@media (max-width: 900px){
  .nav{display:none}
  .nav-toggle{display:inline-flex}
  .hero{padding:calc(var(--header-h-mobile) + 20px) 0 24px}
  .hero__wrap{grid-template-columns:1fr;gap:20px}
  .grid{grid-template-columns:1fr}
  .btn{width:100%}
  .brand__logo{width:56px;height:56px}
  body{padding-top:var(--header-h-mobile)}
  body{background-attachment:scroll}
}