/* ===== Fontes canônicas do site Baru (Google Fonts, licença OFL), WOFF2 em base64 =====
   Montserrat (500 a 800): títulos e subtítulos (h1 a h4, eyebrows, números de destaque).
   Maven Pro (400 a 900): corpo do texto, botões, formulários.
   Subconjunto latino (português completo). Fonte da verdade: claude/PADRAO_CANONICO_LP_DECISOES.md */
@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 */

  /* cor de destaque da home: teal principal, cor "guarda-chuva" da marca */
  --c1: var(--brand-teal);
  --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;
  --font-body: 'Maven Pro', sans-serif;
}

*{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
section{ position: relative; }
.container{ max-width: 1220px; margin: 0 auto; padding: 0 24px; }

h1,h2,h3,h4{ font-family: var(--font-title); font-weight:700; color: var(--ink); line-height:1.15; }
h1{ font-size: clamp(2.2rem, 4.4vw, 3.6rem); font-weight:700; }
h2{ font-size: clamp(1.7rem, 3vw, 2.5rem); }
h3{ font-size: 1.2rem; }
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; }

.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4{ color: var(--white); }
.on-dark p{ color: rgba(255,255,255,0.86); }
.on-dark .eyebrow{ color: var(--sage); }
.on-dark .eyebrow::before{ background: var(--accent); }

.section-head{ max-width: 680px; margin: 0 auto 48px; text-align:center; }
.section-head.left{ margin: 0 0 44px; text-align:left; }

/* ===== glass (liquid glass, mesmo padrão das LPs) ===== */
.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%);
}
.glass-light{
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.6);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
}

/* ===== 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(41,157,143,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); }
.btn-sm{ padding: 9px 18px; font-size:0.85rem; }

/* ===== 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(41,157,143,0.06), rgba(41,157,143,0.06) 12px, rgba(41,157,143,0.12) 12px, rgba(41,157,143,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:34px; height:34px; opacity:0.6; }

.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; } }

.logo-institucional{ height:88px; width:auto; margin-bottom: 26px; display:block; }
.logo-institucional .st0{ fill:#fff; }

/* skip link */
.skip-link{
  position:absolute; left:-999px; top:auto; background:#fff; color:var(--ink);
  padding:12px 20px; border-radius:0 0 10px 0; z-index:1000; font-weight:700;
}
.skip-link:focus{ left:0; top:0; }

/* utilitário: some visualmente, mas continua acessível a leitor de tela */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ===================== HERO / DESTAQUES (carrossel) ===================== */
.hero-home{
  padding: 0;
  background: var(--brand-dark);
  overflow:hidden;
}

/* carrossel: imagem ocupa a largura toda do slide (a foto em si já reserva
   visualmente ~70-75% para o registro fotográfico e ~25-30% em degradê
   sólido da cor de marca à direita, onde a chamada é sobreposta) */
.spotlight-carousel{ position:relative; width:100%; aspect-ratio: 1672/941; max-height: 620px; overflow:hidden; }
.spotlight-track{ display:flex; width:100%; height:100%; transition: transform .6s cubic-bezier(.65,0,.35,1); }
.spotlight-slide{ position:relative; min-width:100%; height:100%; }
.spotlight-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.spotlight-copy{
  position:absolute; top:50%; right:6%; transform:translateY(-50%);
  width: 30%; min-width:240px; color:#fff;
}
.spotlight-copy .eyebrow{ color: var(--sage); }
.spotlight-copy .eyebrow::before{ background: var(--accent); }
.spotlight-copy h3{ color:#fff; font-size: clamp(1.3rem, 2vw, 1.7rem); margin-bottom:10px; }
.spotlight-copy p{ color: rgba(255,255,255,0.88); font-size:0.96rem; margin:0 0 20px; }
.spotlight-copy-lg{ width: 38%; min-width:280px; }
.spotlight-copy-lg h3{ font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
.spotlight-copy-lg p{ margin-bottom:0; }

.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.16); border:1px solid rgba(255,255,255,0.4); color:#fff; cursor:pointer;
  backdrop-filter: blur(10px);
}
.carousel-arrow:hover{ background: rgba(255,255,255,0.28); }
.carousel-arrow svg{ width:20px; height:20px; }
.carousel-arrow.prev{ left:20px; }
.carousel-arrow.next{ right:20px; }

.carousel-dots{
  position:absolute; left:0; right:0; bottom:18px; z-index:5;
  display:flex; justify-content:center; gap:10px;
}
.carousel-dots button{
  width:10px; height:10px; border-radius:50%; border:1.5px solid rgba(255,255,255,0.7);
  background: transparent; cursor:pointer; padding:0;
}
.carousel-dots button.is-active{ background:#fff; }

.carousel-playpause{
  position:absolute; right:20px; bottom:14px; z-index:6;
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.16); border:1px solid rgba(255,255,255,0.4); color:#fff; cursor:pointer;
  backdrop-filter: blur(10px);
}
.carousel-playpause:hover{ background: rgba(255,255,255,0.28); }
.carousel-playpause svg{ width:15px; height:15px; }
.carousel-playpause .icon-pause{ display:none; }
.carousel-playpause.is-playing .icon-play{ display:none; }
.carousel-playpause.is-playing .icon-pause{ display:block; }
@media (max-width: 900px){ .carousel-playpause{ right:14px; bottom:16px; background: rgba(4,33,29,0.35); } }

@media (max-width: 900px){
  .spotlight-carousel{ aspect-ratio: auto; max-height:none; }
  .spotlight-slide{ display:flex; flex-direction:column; }
  .spotlight-slide img{ height: 260px; aspect-ratio: 4/3; object-fit:cover; }
  .spotlight-copy{ position:static; transform:none; width:100%; padding: 26px 24px 56px;
    background: linear-gradient(180deg, var(--brand-teal-dark) 0%, var(--brand-dark) 100%); flex-grow:1; }
  .carousel-arrow{ top:130px; }
}

/* ===================== SOLUÇÕES FINANCEIRAS (grid de produtos) ===================== */
.solucoes{ padding: 100px 0; background: var(--white); }

/* seletor "Para você" / "Para sua empresa": alterna o painel de produtos */
.solucoes-tabs{
  display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
  margin: -12px auto 44px;
}
.solucoes-tab{
  font: inherit; font-weight:700; font-size:1rem; cursor:pointer;
  padding: 13px 30px; border-radius:999px; border: 1.5px solid var(--c1);
  background: var(--white); color: var(--c1);
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.solucoes-tab:hover{ background: rgba(41,157,143,0.1); }
.solucoes-tab[aria-selected="true"]{
  background: var(--c1); color: var(--white);
  box-shadow: 0 14px 30px -12px rgba(41,157,143,0.6);
}
.solucoes-tab:focus-visible{ outline: 3px solid var(--brand-dark); outline-offset: 3px; }

/* painel de produtos: todos os cards visíveis, última linha centralizada */
.solucoes-panel{ margin-bottom: 40px; }
.solucoes-panel[hidden]{ display:none; }
.solucoes-panel:not([hidden]){ animation: solucoesFade .35s ease; }
@keyframes solucoesFade{ from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .solucoes-panel:not([hidden]){ animation:none; } }
.solucoes-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap: 26px; }
.solucoes-grid .produto-card{ flex: 0 0 calc((100% - 78px) / 4); }

.produto-card{
  background: var(--white); border-radius: var(--radius-md); overflow:hidden;
  box-shadow: 0 16px 40px -18px rgba(4,33,29,0.18);
  border: 1px solid rgba(41,157,143,0.14);
  display:flex; flex-direction:column;
}
.produto-card .img-placeholder{ aspect-ratio: 16/11; border-radius:0; border-width:0 0 2px 0; box-shadow:none; }
.produto-card-body{ padding: 22px 22px 24px; display:flex; flex-direction:column; gap:10px; flex-grow:1; }
.produto-card h3{ font-size:1.08rem; }
.produto-card p{ font-size:0.92rem; margin:0; flex-grow:1; }
.produto-card .saiba-mais-link{
  display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:0.88rem;
  color: var(--c1); margin-top:auto; padding-top:4px;
}
.produto-card .saiba-mais-link svg{ width:14px; height:14px; transition: transform .15s ease; }
.produto-card:hover .saiba-mais-link svg{ transform: translateX(3px); }

@media (max-width: 1080px){ .solucoes-grid .produto-card{ flex-basis: calc((100% - 26px) / 2); } }
@media (max-width: 560px){
  .solucoes-grid .produto-card{ flex-basis: 100%; }
  .solucoes-tab{ flex: 1 1 100%; padding: 13px 20px; }
}
.solucoes-cta{ text-align:center; }

/* ===================== APRESENTAÇÃO INSTITUCIONAL (Sobre nós, layout v4) ===================== */
/* topo enxuto: a seção de produtos acima já termina com 100px de respiro, então o espaço acima do texto fica igual ao de baixo */
.institucional-band{ padding: 8px 0 104px; background: linear-gradient(180deg, var(--white) 0%, var(--bg-alt) 100%); overflow:hidden; }
.inst-grid{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 72px; align-items:center; }
.inst-visual{ position:relative; padding: 0 56px 56px 0; }
.inst-foto{ position:relative; z-index:1; width:100%; height:auto; aspect-ratio: 16/9; object-fit:cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); display:block; }
/* foto de detalhe já recortada no formato da marca (PNG com transparência): sem moldura, só a sombra do recorte */
.inst-foto-detalhe{ position:absolute; z-index:2; right:-8px; bottom:-6px; width:40%; height:auto; aspect-ratio: 540/556; object-fit:contain; filter: drop-shadow(0 18px 30px rgba(4,33,29,0.28)); display:block; }
.inst-selo{ position:absolute; z-index:3; left:24px; bottom:20px; padding: 16px 20px; border-radius: var(--radius-md); background: rgba(4,33,29,0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow-soft); }
.inst-selo strong, .inst-selo span{ display:block; font-family: var(--font-title); font-weight:800; font-size:1.05rem; line-height:1.25; color: var(--white); }
.inst-selo span{ color: var(--amber); }
.inst-copy h2{ margin-bottom: 16px; }
.inst-lead{ margin-bottom: 28px; max-width: 520px; }
.inst-pilares{ list-style:none; display:flex; flex-direction:column; gap: 14px; margin: 0 0 32px; padding:0; }
.inst-pilares li{ display:flex; gap: 16px; align-items:flex-start; background: var(--white); border-radius: var(--radius-md); padding: 16px 18px; box-shadow: 0 16px 40px -26px rgba(4,33,29,0.35); border: 1px solid rgba(41,157,143,0.12); }
.inst-ico{ width:44px; height:44px; border-radius: 12px; background: var(--c1); color: var(--white); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.inst-ico svg{ width:22px; height:22px; }
.inst-pilares strong{ display:block; font-family: var(--font-title); font-weight:700; font-size:1rem; color: var(--ink); margin-bottom:2px; }
.inst-pilares p{ font-size:0.9rem; margin:0; }
.inst-acoes{ display:flex; align-items:center; gap: 24px; flex-wrap:wrap; }
.inst-link{ display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:0.94rem; color: var(--c1-800, #10544f); }
.inst-link svg{ width:16px; height:16px; transition: transform .15s ease; }
.inst-link:hover svg{ transform: translateX(3px); }
@media (max-width: 980px){
  .inst-grid{ grid-template-columns: 1fr; gap: 48px; }
  .inst-visual{ max-width: 640px; margin: 0 auto; width:100%; }
}
@media (max-width: 560px){
  .institucional-band{ padding: 8px 0 72px; }
  .inst-visual{ padding: 0 0 40px 0; }
  .inst-foto-detalhe{ width:38%; right:-4px; }
  .inst-selo{ left:12px; bottom:12px; padding: 12px 14px; }
  .inst-selo strong, .inst-selo span{ font-size:0.92rem; }
}

/* foto dos cards de produto */
.produto-card-img{ width:100%; height:auto; aspect-ratio: 16/11; object-fit:cover; display:block; transition: transform .35s ease; }
.produto-card{ transition: transform .2s ease, box-shadow .2s ease; }
.produto-card:hover{ transform: translateY(-4px); box-shadow: 0 26px 50px -22px rgba(4,33,29,0.35); }
.produto-card:hover .produto-card-img{ transform: scale(1.04); }
@media (prefers-reduced-motion: reduce){ .produto-card, .produto-card-img{ transition:none; } .produto-card:hover, .produto-card:hover .produto-card-img{ transform:none; } }

/* filtros Todas / Para você / Para sua empresa: 8 cards e o botão "Exibir todas..." (script solucoes-mais-js) */
.solucoes-grid .produto-card.fora{ display:none; }
.solucoes-todas{ text-align:center; margin-top: 34px; }
.solucoes-todas[hidden]{ display:none; }

/* celular: fotos do carrossel mais altas e puxadas para o lado da foto (menos degradê) */
@media (max-width: 900px){
  .spotlight-slide img{ height: 330px; object-position: 18% center; }
  .spotlight-slide:nth-child(n+2) img{ object-position: 6% center; }
  .carousel-arrow{ top: 165px; }
}

/* ===================== FALE COM A BARU (faixa clara abaixo do CDB) ===================== */
.contato-band{ padding: 80px 0; background: linear-gradient(180deg, var(--bg-alt) 0%, var(--white) 100%); }
.contato-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:center; }
.contato-copy h2{ margin-bottom: 14px; }
.contato-copy p{ max-width: 480px; margin-bottom: 26px; }
.contato-canais{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contato-canais a{ display:flex; gap:14px; align-items:center; height:100%; background: var(--white); border-radius: var(--radius-md); padding: 18px; border: 1px solid rgba(41,157,143,0.14); box-shadow: 0 16px 40px -26px rgba(4,33,29,0.35); transition: transform .18s ease, box-shadow .18s ease; }
.contato-canais a:hover{ transform: translateY(-3px); box-shadow: 0 22px 44px -24px rgba(4,33,29,0.4); }
.contato-canais .ico{ width:44px; height:44px; border-radius:12px; background: rgba(41,157,143,0.12); color: var(--c1); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contato-canais .ico svg{ width:22px; height:22px; }
.contato-canais strong{ display:block; font-family: var(--font-title); font-weight:700; font-size:0.98rem; color: var(--ink); }
.contato-canais span.txt{ display:block; font-size:0.84rem; color: var(--ink-soft); margin-top:2px; }
@media (max-width: 900px){ .contato-grid{ grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 480px){ .contato-canais{ grid-template-columns: 1fr; } }
/* ===================== BANNER CDB ===================== */
.banner-cdb{
  padding: 88px 0;
  background: linear-gradient(120deg, var(--brand-dark) 0%, #0c3b34 100%);
}
.banner-cdb-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:center; }
.banner-cdb-copy .eyebrow{ color: var(--amber); }
.banner-cdb-copy .eyebrow::before{ background: var(--sage); }
.banner-cdb-copy h2{ color:#fff; margin-bottom:16px; }
.banner-cdb-copy p{ color: rgba(255,255,255,0.85); margin-bottom:28px; max-width:480px; }
.banner-cdb .img-placeholder{ aspect-ratio: 16/10; border-color: var(--amber); color:#fff;
  background: repeating-linear-gradient(45deg, rgba(231,167,122,0.1), rgba(231,167,122,0.1) 12px, rgba(231,167,122,0.03) 12px, rgba(231,167,122,0.03) 24px); }
.banner-cdb .img-placeholder small{ color: rgba(255,255,255,0.75); }
.banner-cdb-photo{
  width:100%; height:auto; aspect-ratio: 16/10; object-fit:cover;
  border-radius: var(--radius-lg); box-shadow: 0 24px 60px -24px rgba(0,0,0,0.55);
  display:block;
}
.banner-cdb .btn-primary{ background: var(--amber); color: var(--ink); box-shadow: 0 14px 30px -10px rgba(0,0,0,0.4); }
@media (max-width: 900px){ .banner-cdb-grid{ grid-template-columns: 1fr; } .banner-cdb-copy{ text-align:center; } .banner-cdb-copy p{ margin: 0 auto 28px; } }