/* ===========================
   VARIÁVEIS (PASTEL)
   =========================== */
:root{
  --bg:#f4f7fb;
  --card:#ffffff;
  --border:#e3e8f0;
  --text:#1f2937;
  --muted:#6b7280;
  --brand:#a5b4fc;      /* azul pastel */
  --brand-soft:#eef2ff;
  --accent:#fde68a;     /* amarelo pastel */
  --radius:18px;
}

/* ===========================
   BASE
   =========================== */
*{ box-sizing:border-box }
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:var(--bg);
  color:var(--text);
}
.wrap{
  max-width:1120px;
  margin:auto;
  padding:24px;
}

/* ===========================
   HEADER
   =========================== */
.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:40px;
}
.brand{
  display:flex;
  gap:12px;
  align-items:center;
}
.logo{
  width:42px;
  height:42px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--brand),var(--accent));
}
.brand-title{ font-weight:800 }
.brand-sub{ font-size:12px; color:var(--muted) }

.nav a{
  margin-left:16px;
  color:var(--muted);
  text-decoration:none;
  font-weight:500;
}
.nav a:hover{ color:var(--text) }

/* ===========================
   BOTÕES
   =========================== */
.btn{
  padding:12px 18px;
  border-radius:14px;
  border:1px solid var(--border);
  text-decoration:none;
  color:var(--text);
  background:#fff;
}
.btn-primary{
  background:var(--brand);
  color:#1e1b4b;
  font-weight:700;
  border-color:var(--brand);
}
.btn-outline{
  background:transparent;
}
.btn-full{
  display:block;
  text-align:center;
}

/* ===========================
   HERO
   =========================== */
.hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  margin-bottom:56px;
}
.hero-sub{ color:var(--muted) }

.badge-inline{
  display:inline-block;
  font-size:12px;
  padding:6px 12px;
  border-radius:999px;
  background:var(--brand-soft);
  color:#3730a3;
}

/* Placeholder */
.imgph{
  border:1px dashed var(--border);
  border-radius:var(--radius);
  background:#fafbff;
  display:flex;
  align-items:center;
  justify-content:center;
}
.imgph-hero{ height:260px }
.imgph-inner{
  text-align:center;
  font-size:12px;
  color:var(--muted);
}

/* ===========================
   BLOCO PREÇO + VALOR
   =========================== */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  margin-bottom:56px;
}

.price-card,
.value-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px;
}

.price{
  font-size:36px;
  font-weight:900;
  margin:12px 0;
}
.price small{ font-size:14px; color:var(--muted) }

.price-desc{
  color:var(--muted);
}

.checklist{
  padding-left:18px;
  margin:18px 0;
}
.checklist li{
  margin-bottom:8px;
}

/* ===========================
   VALOR
   =========================== */
.value-grid{
  display:grid;
  gap:12px;
  margin-top:18px;
}
.value-box{
  background:#f9fafb;
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
}

/* ===========================
   COMO FUNCIONA
   =========================== */
.steps-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.step{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
}
.step span{
  font-weight:800;
  color:#4338ca;
}

/* ===========================
   SEGURANÇA
   =========================== */
.security-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.sec-box{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
}

/* ===========================
   CTA FINAL
   =========================== */
.final-cta{
  text-align:center;
  margin:64px 0;
}

/* ===========================
   FOOTER
   =========================== */
.footer{
  display:flex;
  justify-content:space-between;
  font-size:13px;
  color:var(--muted);
}

/* ===========================
   RESPONSIVO
   =========================== */
@media(max-width:900px){
  .hero,
  .split{
    grid-template-columns:1fr;
  }
  .steps-grid,
  .security-grid{
    grid-template-columns:1fr;
  }
}
 /* ================================
   HERO – IMAGEM LADO DIREITO
   ================================ */

.hero-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Container da imagem */
.imgph-hero {
  width: 100%;
  max-width: 520px;        /* limite visual no desktop */
}

/* Wrapper interno (seu HTML já tem) */
.imgph-hero .imgph-inner {
  width: 100%;
}

/* Imagem em si */
.imgph-hero img {
  width: 100%;
  height: auto;
  max-height: 380px;      /* impede crescimento exagerado */
  object-fit: contain;    /* mantém proporção sem cortar */
  display: block;
}
/* ================================
   BOTÕES – HIERARQUIA CLARA
   ================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 14px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
}

/* Botão primário */
.btn-primary {
  background: #6366f1;           /* ajuste para sua paleta */
  color: #fff;
  border: 1px solid #6366f1;
}

/* Botão secundário (outline) */
.btn-outline {
  background: transparent;
  color: #6366f1;
  border: 1.5px solid #6366f1;
}

/* Hover */
.btn-primary:hover {
  filter: brightness(0.95);
}

.btn-outline:hover {
  background: rgba(99,102,241,0.08);
}