/* ===== Fontes (embutidas em base64, sem dependência externa) ===== */
@font-face {
  font-family: 'Montserrat';
  src: url(/assets/arquivos/a14f7ffbd7d9.woff2) format('woff2');
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Maven Pro';
  src: url(/assets/arquivos/73ce22a9ec1f.woff2) format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root{
  /* ---- paleta oficial Baru Financeira (fixa, não alterar) ---- */
  --brand-teal: #299d8f;      /* principal */
  --brand-dark: #04211d;      /* principal */
  --brand-teal-dark: #10544f; /* principal */
  --white: #ffffff;           /* neutra */
  --gray: #b4b4b4;            /* neutra */
  --black: #000000;           /* neutra */
  --sage: #a8c4af;            /* apoio */
  --amber: #e7a77a;           /* apoio */
  --cyan: #0c8f9d;            /* apoio */
  --orange: #e26432;          /* apoio */

  /* ---- EDITAR: cor de destaque desta LP, escolher dentro da paleta oficial Baru (ver PALETA_OFICIAL_BARU.md). Exemplo abaixo usa --cyan; trocar pela cor definida para este produto. ---- */
  --c1: var(--cyan);
  --c1-800: var(--brand-teal-dark);
  --c1-900: var(--brand-dark);
  --accent: var(--amber);
  --ink: var(--brand-dark);
  --ink-soft: rgba(4,33,29,0.72);
  --bg-alt: rgba(4,33,29,0.045);
  --bg-alt-2: rgba(4,33,29,0.02);

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;
  --shadow-soft: 0 24px 60px -20px rgba(4,33,29,0.35);

  --font-title: 'Montserrat', sans-serif;
  --fs-h1: clamp(2rem, 3.8vw, 3.1rem);
  --font-body: 'Maven Pro', sans-serif;
}

*{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; overflow-x:hidden; }
body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none !important; color:inherit; }
.btn, .btn:hover, .btn-ghost-outline, .btn-ghost-outline:hover, .public-card .card-link{ text-decoration:none !important; }
section{ position: relative; }
.hero, .about, .publico, .diferenciais, .cta-band, .processo, .parceiros, .faq{
  width:100vw; left:50%; transform:translateX(-50%);
}
.container{ max-width: 1180px; margin: 0 auto; padding: 0 24px; }

h1,h2,h3,h4{ font-family: var(--font-title); font-weight:700; color: var(--ink); line-height:1.2; letter-spacing:-0.01em; }
h1, h2.h1-size{ font-size: var(--fs-h1); font-weight:700; }
h2{ font-size: clamp(1.6rem, 2.7vw, 2.3rem); }
h3{ font-size: 1.15rem; }
p{ font-size: 1.02rem; color: var(--ink-soft); }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-title); font-weight:700; font-size:0.75rem;
  letter-spacing:0.14em; text-transform:uppercase; color: var(--c1);
  margin-bottom: 14px;
}
.eyebrow::before{ content:''; width:8px; height:8px; border-radius:50%; background: var(--accent); display:inline-block; }

/* classe de contraste: título/eyebrow sobre fundo escuro */
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4{ color: var(--white); }
.on-dark p{ color: rgba(255,255,255,0.82); }
.on-dark .eyebrow{ color: var(--sage); }
.on-dark .eyebrow::before{ background: var(--accent); }

/* ===== glass ===== */
.glass{
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.24);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

/* ===== botão / CTA ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--font-body); font-weight:700; font-size:0.95rem;
  padding: 14px 28px; border-radius: 999px; border: none; cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space: nowrap;
}
.btn-primary{ background: var(--c1); color: var(--white); box-shadow: 0 14px 30px -10px rgba(12,143,157,0.55); }
.btn-primary:hover{ transform: translateY(-2px); filter: brightness(0.9); }
.btn-ghost{ background: rgba(255,255,255,0.14); color: var(--white); border:1px solid rgba(255,255,255,0.4); }
.btn-ghost:hover{ background: rgba(255,255,255,0.22); }
.btn-ghost-outline{
  display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--font-body); font-weight:700; font-size:0.88rem;
  padding: 12px 22px; border-radius:999px; border: 1.5px solid var(--c1);
  color: var(--c1); background: transparent; white-space:nowrap;
  transition: background .18s ease, color .18s ease;
}
.btn-ghost-outline:hover{ background: var(--c1); color: var(--white); }

/* ===== placeholder de imagem (marcação) ===== */
.img-placeholder{
  width:100%; aspect-ratio: 4/4.6; border-radius: var(--radius-lg);
  background: repeating-linear-gradient(45deg, rgba(12,143,157,0.06), rgba(12,143,157,0.06) 12px, rgba(12,143,157,0.12) 12px, rgba(12,143,157,0.12) 24px);
  border: 2px dashed var(--c1);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; color: var(--c1-800); text-align:center; padding: 24px;
  box-shadow: var(--shadow-soft);
}
.img-placeholder span{ font-family: var(--font-body); font-weight:700; font-size:0.82rem; letter-spacing:0.04em; text-transform:uppercase; }
.img-placeholder small{ font-size:0.74rem; color: var(--ink-soft); max-width: 220px; }
.img-placeholder svg{ width:36px; height:36px; opacity:0.6; }

/* foto real (substitui o placeholder) */
.section-photo{
  width:100%; aspect-ratio: 4/4.6; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-soft);
  display:block;
}
@media (max-width: 720px){ .section-photo{ aspect-ratio: 4/3.4; } }

/* foto com o recorte da marca (asset já vem recortado) */
.brand-shape-photo{
  width:100%; aspect-ratio: 0.916; object-fit: contain;
  display:block;
}
.brand-shape-photo.is-small{ width:auto; max-width: 150px; flex-shrink:0; }

/* ===================== HERO ===================== */
.hero{
  padding: 96px 0 96px;
  background: linear-gradient(180deg, var(--bg-alt-2) 0%, var(--white) 100%);
  overflow:hidden;
}
.hero-grid{
  display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items:center;
}
.hero-copy p.lead{ font-size: 1.12rem; margin: 18px 0 28px; max-width: 480px; }
.hero-ctas{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom: 30px; }
.trust-badges{ display:flex; flex-wrap:wrap; gap: 22px; }
.trust-badge{ display:flex; align-items:center; gap:10px; font-size:0.86rem; font-weight:600; color: var(--ink-soft); }
.trust-badge svg{ width:20px; height:20px; color: var(--c1); flex-shrink:0; }

.hero-visual{ position:relative; }
.hero-stat-card{
  position:absolute; left:-18px; bottom: 26px; z-index:5;
  width: 240px; padding: 18px 20px; border-radius: var(--radius-md);
  background: rgba(4,33,29,0.72); box-shadow: var(--shadow-soft);
}
.hero-stat-card .stat-value{ font-family: var(--font-title); font-size:1.5rem; color: var(--white); font-weight:800; }
.hero-stat-card .stat-label{ font-size:0.8rem; color: rgba(255,255,255,0.82); margin-top:4px; }

@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-visual{ max-width: 420px; margin: 0 auto; }
}
@media (max-width: 720px){
  .hero{ padding: 56px 0 64px; }
  .img-placeholder{ aspect-ratio: 4/3.4; }
  .hero-stat-card{ position:static; width:100%; margin-top:16px; }
}

/* ===================== SOBRE / PROVA DE VALOR ===================== */
.about{ padding: 96px 0; background: var(--white); }
.about-grid{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items:center; }
.about-copy p{ margin-bottom: 16px; }
@media (max-width: 980px){ .about-grid{ grid-template-columns: 1fr; } .about-grid .section-photo{ max-width: 380px; margin: 0 auto; } }

/* ===================== GRID genérico (cards) ===================== */
.section-head{ max-width: 640px; margin: 0 auto 48px; text-align:center; }
.section-head.left{ margin: 0 0 48px; text-align:left; }

.publico{ padding: 96px 0; background: var(--bg-alt); }
.cards-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.public-card{
  background: var(--white); border-radius: var(--radius-md); padding: 30px 26px;
  box-shadow: 0 16px 40px -18px rgba(4,33,29,0.18);
  border: 1px solid rgba(12,143,157,0.12);
}
.public-card .tag{
  display:inline-block; font-size:0.72rem; font-weight:700; letter-spacing:0.06em;
  text-transform:uppercase; color: var(--c1); background: rgba(12,143,157,0.1);
  padding: 5px 12px; border-radius: 999px; margin-bottom: 16px;
}
.public-card .icon-wrap{
  width:48px; height:48px; border-radius: 14px; background: var(--c1);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.public-card .icon-wrap svg{ width:24px; height:24px; color:#fff; }
.public-card h3{ margin-bottom:8px; }
.public-card p{ font-size:0.95rem; }
.public-card .card-link{ display:inline-block; margin-top:16px; font-weight:700; font-size:0.92rem; color: var(--c1); }
.public-card .card-link:hover{ color: var(--c1-800); }

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

/* ===================== DIFERENCIAIS / BENEFÍCIOS ===================== */
.diferenciais{ padding: 96px 0; background: var(--white); }
.cards-2x2{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.diff-card{
  display:flex; gap:18px; align-items:flex-start;
  background: var(--bg-alt-2); border-radius: var(--radius-md); padding: 28px;
}
.diff-card .icon-wrap{
  width:52px; height:52px; border-radius: 14px; background: var(--accent);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.diff-card .icon-wrap svg{ width:26px; height:26px; color: var(--ink); }
.diff-card h3{ margin-bottom:6px; }
.diff-card p{ font-size:0.95rem; margin:0; }

@media (max-width: 980px){ .cards-2x2{ grid-template-columns: 1fr; } }
@media (max-width: 720px){ .diferenciais .cards-3{ grid-template-columns: 1fr; } }

/* ===================== PROCESSO / COMO FUNCIONA (fundo escuro) ===================== */
.processo{
  padding: 100px 0;
  background: linear-gradient(180deg, var(--c1-900) 0%, var(--c1-800) 100%);
}
.processo-grid{ display:grid; grid-template-columns: 1fr 0.9fr; gap: 56px; align-items:center; }
.steps{ margin-top: 32px; display:flex; flex-direction:column; gap: 22px; }
.step{ display:flex; gap:18px; align-items:flex-start; }
.step .num{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background: var(--accent); color: var(--c1-900); font-family: var(--font-title);
  font-weight:800; display:flex; align-items:center; justify-content:center; font-size:1.05rem;
}
.step h4{ color:#fff; font-family: var(--font-title); font-weight:700; font-size:1.02rem; margin-bottom:4px; }
.step p{ color: rgba(255,255,255,0.78); font-size:0.94rem; margin:0; }
@media (max-width: 980px){ .processo-grid{ grid-template-columns: 1fr; } .processo .brand-shape-photo{ max-width:380px; margin:0 auto; } }

/* ===================== CTA BAND ===================== */
.cta-band{
  padding: 64px 0; background: var(--c1);
  text-align:center;
}
.cta-band h2{ margin-bottom: 10px; color: var(--white); }
.cta-band p{ margin-bottom: 26px; color: var(--white); opacity:0.88; }
.cta-band .btn-primary{ background: var(--accent); color: var(--ink); box-shadow: 0 14px 30px -10px rgba(0,0,0,0.35); }
.cta-band .btn-primary:hover{ filter: brightness(0.92); }

/* ===================== PERGUNTAS FREQUENTES ===================== */
.faq{ padding: 96px 0; background: var(--white); }
.faq-list{ max-width: 800px; margin: 0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item{ background: var(--bg-alt-2); border: 1px solid rgba(4,33,29,0.08); border-radius: var(--radius-md); }
.faq-item summary{
  list-style:none; cursor:pointer; padding: 20px 56px 20px 24px; position:relative;
  font-family: var(--font-title); font-weight:700; font-size:1.02rem; color: var(--ink); line-height:1.35;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:'+'; position:absolute; right:22px; top:50%; transform:translateY(-50%);
  font-family: var(--font-body); font-weight:700; font-size:1.5rem; color: var(--c1); line-height:1;
}
.faq-item[open] summary::after{ content:'\2212'; }
.faq-item p{ padding: 0 24px 22px; font-size:0.98rem; }
.faq-item[open]{ background: var(--white); box-shadow: 0 16px 40px -22px rgba(4,33,29,0.22); }
.about-copy p.note{ font-size:0.8rem; margin-top:4px; }
.public-card.is-featured{ border: 2px solid var(--c1); box-shadow: 0 22px 48px -18px rgba(12,143,157,0.35); }

/* ===================== PARCEIROS (chamada secundária) ===================== */
.parceiros{ padding: 44px 0; background: var(--bg-alt); border-top: 1px solid rgba(4,33,29,0.08); border-bottom: 1px solid rgba(4,33,29,0.08); }
.parceiros-inner{ display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; }
.parceiros-copy-group{ display:flex; align-items:center; gap:20px; }
.parceiros-copy-group .brand-shape-photo{ opacity:0.92; }
.parceiros h3{ font-size:1.15rem; margin-bottom:4px; }
.parceiros p{ font-size:0.92rem; margin:0; max-width: 520px; }
@media (max-width: 720px){ .parceiros-inner{ flex-direction:column; align-items:flex-start; } }
@media (max-width: 560px){ .parceiros-copy-group{ flex-direction:column; align-items:flex-start; gap:14px; } .parceiros-copy-group .brand-shape-photo.is-small{ max-width:110px; } }



/* v4.2: fotos responsivas (height:auto vence o atributo height da tag img) */
.section-photo, .brand-shape-photo{ height:auto; }

/* Como funciona: foto quadrada com cantos arredondados, sem o recorte da marca (pedido de 27/10/2026) */
.processo .section-photo{ aspect-ratio: 1/1; height:auto; width:100%; object-fit:cover; border-radius: var(--radius-lg, 28px); box-shadow: var(--shadow-soft); display:block; }
@media (max-width: 980px){ .processo .section-photo{ max-width: 420px; margin: 0 auto; } }
/* ===================== BLINDAGEM TIPOGRÁFICA (WordPress / Elementor) =====================
   O tema do WordPress (Elementor, "Estilos globais" do kit) aplica fonte, peso, espaçamento e cor
   em h1 a h4, p e links com seletores mais fortes que os da LP. Sem este bloco, títulos e textos
   trocam de fonte quando o HTML é colado no WordPress. Todo o conteúdo da LP fica dentro de
   <div class="baru-lp">, e as regras abaixo usam !important só para tipografia e cor de botões.
   Não vale para o formulário em iframe (ele tem o estilo próprio). */
.baru-lp{ font-family: var(--font-body) !important; color: var(--ink); line-height: 1.55; }
.baru-lp p, .baru-lp li, .baru-lp a, .baru-lp span, .baru-lp small, .baru-lp strong,
.baru-lp em, .baru-lp label, .baru-lp button, .baru-lp div{
  font-family: var(--font-body) !important; letter-spacing: normal !important; text-transform: none;
}
.baru-lp p{ font-weight: 400 !important; line-height: 1.55 !important; letter-spacing: normal !important; text-transform: none !important; }
.baru-lp h1, .baru-lp h2, .baru-lp h3, .baru-lp h4,
.baru-lp .eyebrow, .baru-lp .stat-value, .baru-lp .step .num{
  font-family: var(--font-title) !important; font-style: normal !important;
}
.baru-lp h1, .baru-lp h2, .baru-lp h3, .baru-lp h4{
  font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -0.01em !important;
  text-transform: none !important; margin-top: 0;
}
.baru-lp h1, .baru-lp .h1-size{ font-size: var(--fs-h1) !important; }
.baru-lp h2{ font-size: clamp(1.6rem, 2.7vw, 2.3rem) !important; }
.baru-lp h3{ font-size: 1.15rem !important; }
.baru-lp .step h4{ font-size: 1.02rem !important; }
.baru-lp .eyebrow{ font-weight: 700 !important; font-size: 0.75rem !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; }
.baru-lp .stat-value, .baru-lp .step .num{ font-weight: 800 !important; }
.baru-lp .trust-badge{ font-weight: 600 !important; }
.baru-lp .public-card .tag{ font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; }
.baru-lp .btn, .baru-lp .btn-ghost-outline, .baru-lp .card-link{ font-weight: 700 !important; text-decoration: none !important; }
.baru-lp a.btn-primary, .baru-lp a.btn-primary:hover{ color: var(--white) !important; }
.baru-lp .cta-band a.btn-primary, .baru-lp .cta-band a.btn-primary:hover{ color: var(--ink) !important; }
.baru-lp a.btn-ghost-outline{ color: var(--c1) !important; }
.baru-lp a.btn-ghost-outline:hover{ color: var(--white) !important; }
.baru-lp a.card-link, .baru-lp a.card-link:hover{ color: var(--c1) !important; }