*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#0f172a;background:#fff;line-height:1.5}
a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 16px}
.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid #e5e7eb}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:600}
.logo {
  height: 40px;   /* altura fixa */
  width: auto;    /* largura ajusta automaticamente */
}
.portfolio-img {
  width: 100%;
  height: 220px;       /* define altura fixa */
  object-fit: cover;   /* corta a sobra e mantém proporção */
  border-radius: 16px; /* mantém cantos arredondados */
}
.logo.small{width:28px;height:28px;border-radius:10px}
.brand-name{letter-spacing:.2px}
.menu{display:none;gap:20px;align-items:center}
.menu a{font-size:14px;opacity:.9}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:16px;padding:12px 18px;font-weight:600;cursor:pointer}
.btn.primary{background:#E7297A;color:#fff}
.btn.outline{border:1px solid #cbd5e1;background:#fff;color:#0f172a}
.btn.full{width:100%}
.hamb{background:none;border:0;font-size:24px;display:block}
@media(min-width:900px){.menu{display:flex}.hamb{display:none}}


.hero{background:radial-gradient(ellipse at top left,#fce7f3, #fff);border-bottom:1px solid #e5e7eb}
.hero-grid{display:grid;grid-template-columns:1fr;gap:28px;padding:64px 0}
@media(min-width:900px){.hero-grid{grid-template-columns:1.1fr .9fr;gap:40px}}
.hero-copy h1{font-size:40px;line-height:1.15;margin:0}
@media(min-width:900px){.hero-copy h1{font-size:52px}}
.text-brand{color:#E7297A}
.hero-copy p{margin-top:12px;color:#475569;font-size:18px}
.hero-cta{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap}
.link{color:#334155;display:inline-flex;align-items:center;gap:6px}
.badges{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}
.badges span{font-size:14px;color:#475569;border:1px solid #e2e8f0;padding:6px 10px;border-radius:999px;background:#fff}

.card{border:1px solid #e2e8f0;border-radius:20px;background:#fff;box-shadow:0 8px 20px rgba(2,6,23,.04)}
.card-head{display:flex;gap:12px;align-items:center}
.icon-badge{background:#E7297A;color:#fff;border-radius:12px;padding:8px 10px;font-weight:800}
.form{margin-top:16px;display:grid;gap:10px}
.form input{border:1px solid #cbd5e1;border-radius:12px;padding:12px 14px;font-size:14px}
.form-actions{display:flex;gap:10px;margin-top:6px}
.muted{color:#64748b}
.tiny{font-size:12px}

.section{padding:64px 0}
.section.soft{background:#f8fafc;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}
.center{text-align:center}
.grid4{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:900px){.grid4{grid-template-columns:repeat(4,1fr)}}
.grid3{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:900px){.grid3{grid-template-columns:repeat(3,1fr)}}
.grid2{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:900px){.grid2{grid-template-columns:repeat(2,1fr)}}
.card.small .card-body{padding:16px}
.card .card-body{padding:20px}
.emoji{font-size:22px;margin-bottom:6px}
.features{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:900px){.features{grid-template-columns:repeat(4,1fr)}}
.feature{display:flex;gap:10px;align-items:flex-start}
.feature .emoji{background:#fde5ef;color:#E7297A;border-radius:10px;padding:6px 8px}

.plan-head{display:flex;justify-content:space-between;align-items:baseline}
.price{margin-top:6px;font-size:22px;font-weight:800}
.price.brand{color:#E7297A}
.list{margin:14px 0 0 0;padding-left:18px}
.list li{margin:8px 0}
.ph{height:180px;border:1px dashed #cbd5e1;border-radius:20px;display:flex;align-items:center;justify-content:center;color:#94a3b8;background:linear-gradient(135deg,#f1f5f9,#fff)}

.contact-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:900px){.contact-grid{grid-template-columns:1fr 1fr}}
.ticks{margin-top:16px;padding-left:0;list-style:none}
.ticks li{margin:8px 0;padding-left:22px;position:relative}
.ticks li::before{content:'✔';position:absolute;left:0;color:#E7297A}

.footer{border-top:1px solid #e5e7eb;background:#fff;padding:32px 0}
.footer-in{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.links a{color:#64748b;font-size:14px}
.text-right{text-align:right}

.mobile-menu a{padding:8px 0}

/* --- FIXES --- */
/* Mobile menu hidden by default; only shows with .open */
.mobile-menu{display:none;flex-direction:column;gap:12px;padding:12px 16px;border-bottom:1px solid #e5e7eb;background:#fff}
.mobile-menu.open{display:flex}
.mobile-menu[hidden]{display:none !important}

/* Hero form card padding and spacing */
.hero-card{padding:24px}
.form{gap:14px}
.card .card-body{padding:24px} /* a bit more breathing room */
.form input{padding:14px 14px}


/* Equal height for pricing cards */
.grid3 { align-items: stretch; }
.grid3 .card { display:flex; flex-direction:column; }
.grid3 .card-body { flex:1; display:flex; flex-direction:column; justify-content:space-between; }
.grid3 .list { flex-grow:1; }


/* --- Pricing card alignment --- */
.grid3 .card{display:flex;flex-direction:column}
.grid3 .card .card-body{display:flex;flex-direction:column;height:100%}
.grid3 .card .list{flex:1 1 auto} /* list grows to fill */
.grid3 .card .btn.full{margin-top:auto} /* CTA sticks to bottom */

/* Slightly consistent title spacing */
#planos h2{margin-bottom:8px}
#planos .center{margin-top:0;margin-bottom:18px}

/* Better equal padding on plan cards */
.grid3 .card .card-body{padding:24px}


/* =======================
   Interações dos botões
   ======================= */

/* Transição suave em todos os botões */
.btn {
  transition: background-color .2s ease, box-shadow .2s ease, transform .06s ease, border-color .2s ease, color .2s ease;
}

/* Primário (rosa) */
.btn.primary {
  background:#E7297A; color:#fff;
  box-shadow:0 4px 10px rgba(231,41,122,.20);
}
.btn.primary:hover {
  background:#f5408a;            /* um tom mais claro no hover */
  box-shadow:0 8px 16px rgba(231,41,122,.30);
}
.btn.primary:active {
  background:#c71f64;            /* mais escuro ao pressionar */
  transform: scale(.98);
}
.btn.primary:focus-visible {
  outline: none;
  box-shadow:0 0 0 3px #fff, 0 0 0 6px rgba(231,41,122,.55); /* anel de foco acessível */
}

/* Outline */
.btn.outline {
  border:1px solid #cbd5e1; background:#fff; color:#0f172a;
  box-shadow:none;
}
.btn.outline:hover {
  background:#f1f5f9;            /* leve cinza no hover */
  border-color:#94a3b8;
}
.btn.outline:active {
  background:#e2e8f0;
  transform: scale(.98);
}
.btn.outline:focus-visible {
  outline: none;
  box-shadow:0 0 0 3px #fff, 0 0 0 6px rgba(148,163,184,.55);
}

/* (Se usar) Secundário escuro */
.btn.secondary {
  background:#0f172a; color:#fff;
}
.btn.secondary:hover {
  background:#1f2937;
}
.btn.secondary:active {
  background:#0a0e16;
  transform: scale(.98);
}
.btn.secondary:focus-visible {
  outline: none;
  box-shadow:0 0 0 3px #fff, 0 0 0 6px rgba(15,23,42,.5);
}

/* Estado desabilitado (caso desabilite ao enviar o form) */
.btn[disabled], .btn:disabled {
  opacity:.6; cursor:not-allowed; transform:none;
  box-shadow:none;
}

/* Respeita usuários com redução de movimento */
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* =======================
   Interações em links de navegação
   ======================= */

/* links normais do menu (exclui botões .btn) */
.menu a:not(.btn) {
  position: relative;
  transition: color .2s ease, opacity .2s ease;
}
.menu a:not(.btn):hover {
  color: #E7297A;
  opacity: 1;
}
.menu a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: #E7297A;
  transition: width .2s ease;
}
.menu a:not(.btn):hover::after {
  width: 100%;
}


.form-actions {
  display: flex;
  justify-content: space-between;
}
.form-actions .btn.primary {
  margin-left: auto; /* empurra só o WhatsApp pro fim */
}

/* =======================
   MOBILE SPACING / SAFE AREA
   ======================= */
@media (max-width: 768px) {
  /* mais margem lateral em TUDO que usa .container */
  .container { padding-left: 20px; padding-right: 20px; }

  /* se algum bloco ignorar o container, força respiro interno */
  .hero, .section, .card {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* o hero já tem um .container por dentro; reduzimos os espaçamentos verticais */
  .hero-grid { gap: 20px; padding: 36px 0; }

  /* tipografia mais confortável no celular */
  .hero-copy h1 { font-size: 34px; line-height: 1.15; }
  .hero-copy p  { font-size: 16px; }

  /* formulário e cartões com respiro */
  .card .card-body { padding: 20px; }
  .form { gap: 12px; }
  .form input { padding: 14px; }

  /* se o footer parecer colado */
  .footer { padding-left: 20px; padding-right: 20px; }
}

/* celulares pequenos (iPhone SE / Android compact) */
@media (max-width: 390px) {
  .container,
  .hero, .section, .card, .footer {
    padding-left: 22px;
    padding-right: 22px;
  }
  .hero-copy h1 { font-size: 30px; }
}