/* LodestarSeg - identidade visual (sobrescreve as variáveis do template)
   Carregar depois de style.css */
:root {
   --primary: #035a9c;
   --primary-rgb: 3, 90, 156;
   --secondary: #243140;
   --secondary-rgb: 36, 49, 64;
   --hover: #0989ca;
   --accent: #00a5d3;
   --primary-mute: #c7eafb;
   --mute: #75797d;
   --headings-color: #243140;
   --dark: #243140;
   --dark-alt: #1b2531;
   --dark-rgb: 36, 49, 64;
}

/* Logo */
.header .navbar .navbar-brand img {
   width: auto;
   height: 66px;
   max-width: none;
}

@media (max-width: 767.98px) {
   .header .navbar .navbar-brand img {
      height: 50px;
   }
}

.offcanvas-header img,
.canvas-menu .logo img {
   width: auto;
   height: 40px;
}

/* Menu em português: não capitalizar cada palavra */
.navbar .navbar-nav > li a.nav-link,
.navbar .navbar-nav .dropdown-item,
.vertical-menu li a {
   text-transform: none;
}

/* Hero: títulos em português são mais longos que o template original */
.hero-slider .swiper-slide .slide-content h1 {
   font-size: 50px;
   line-height: 1.15;
   text-transform: none;
}

@media (max-width: 1599.98px) {
   .hero-slider .swiper-slide .slide-content h1 {
      max-width: 686px;
   }
}

@media (max-width: 1199.98px) {
   .hero-slider .swiper-slide .slide-content h1 {
      font-size: 48px;
   }
}

@media (max-width: 767.98px) {
   .hero-slider .swiper-slide .slide-content h1 {
      font-size: 34px;
   }
}

/* Top bar: azul mais escuro da paleta */
.header-top.bg-primary {
   background-color: var(--secondary) !important;
}

.header-top .header-socials a {
   color: var(--white);
   font-size: 16px;
   transition: color 0.3s ease;
}

.header-top .header-socials a:hover {
   color: var(--accent);
}

/* Botão do menu: chapado no azul escuro, hover no azul claro */
.header.header-3 .nav-cta .btn.btn-outline {
   background-color: var(--primary);
   border: 1px solid var(--primary) !important;
   color: var(--white);
}

.header.header-3 .nav-cta .btn.btn-outline span {
   background-color: var(--hover);
}

.header.header-3 .nav-cta .btn.btn-outline:hover {
   background-color: var(--hover);
   border: 1px solid var(--hover) !important;
   color: var(--white);
}

/* Top bar: textos e ícones 3px menores */
.header-top .quick-links a,
.header-top .quick-links a i {
   font-size: 13px;
}

/* Menu: linha com a largura do texto, logo abaixo, crescendo da esquerda para a direita */
.navbar .navbar-nav > li a.nav-link {
   background-image: linear-gradient(var(--primary), var(--primary));
   background-repeat: no-repeat;
   background-position: left calc(100% + 1px);
   background-size: 0 2px;
   background-origin: content-box;
   background-clip: border-box;
   transition: background-size 0.35s ease, color 0.3s ease;
}

header .header-nav-wrapper .navbar .navbar-nav li:hover a.nav-link,
.navbar .navbar-nav > li a.nav-link:hover {
   background-size: 100% 2px;
   color: var(--primary);
}

/* Botão do painel lateral: texto e seta na mesma linha */
.canvas-menu .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   align-self: flex-start;
   white-space: nowrap;
}

/* Marca d'água: símbolo da logomarca ampliado e cortado, sobre a foto e sob o texto */
.hero-slider .swiper-slide .slide-bg::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 2;
   background: url("../images/watermark-symbol.svg") no-repeat;
   background-position: 55vw 35%;
   background-size: auto 221%;
   opacity: 0.4;
   pointer-events: none;
}

/* Todos os slides do hero com a mesma altura (a do maior) */
.hero-slider .swiper-wrapper {
   align-items: stretch;
}

.hero-slider .swiper-slide {
   height: auto;
}

/* Rodapé */
.footer-socials a {
   color: var(--white);
   font-size: 18px;
   transition: color 0.3s ease;
}

.footer-socials a:hover {
   color: var(--accent);
}

.footer-legal {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 6px 24px;
}

.footer-legal-links {
   display: flex;
   flex-wrap: wrap;
   gap: 6px 20px;
}

.footer-legal-links a {
   color: rgba(var(--white-rgb), 0.7);
   font-size: 14px;
   transition: color 0.3s ease;
}

.footer-legal-links a:hover {
   color: var(--white);
}

/* Botão do rodapé: texto e seta na mesma linha */
.footer .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   white-space: nowrap;
}

/* Afasta as redes sociais do botão flutuante "voltar ao topo" */
@media (min-width: 768px) {
   .footer-socials {
      margin-right: 70px;
   }
}

/* Rodapé: fundo na cor da top bar, sem imagem */
.footer.footer-2 {
   background-color: var(--secondary);
   background-image: none;
}

.footer.footer-2 h2.display-2 {
   font-size: 38px;
   line-height: 1.2;
}

@media (max-width: 767.98px) {
   .footer.footer-2 h2.display-2 {
      font-size: 28px;
   }
}

/* Rodapé: respiro entre a linha, os textos/ícones e o fim da seção */
.footer-bottom {
   padding: 10px 0;
}


/* Sobre: a foto é recortada no formato do símbolo da logomarca */
figure.about-thumb-lodestar {
   mask-image: url("../images/mask-symbol-duo.svg");
   -webkit-mask-image: url("../images/mask-symbol-duo.svg");
   mask-repeat: no-repeat;
   -webkit-mask-repeat: no-repeat;
   mask-position: center center;
   -webkit-mask-position: center center;
   mask-size: contain;
   -webkit-mask-size: contain;
   height: auto;
   aspect-ratio: 85 / 80.9;
}

@media (min-width: 992px) {
   figure.about-thumb-lodestar {
      position: relative;
      width: 100%;
      right: 0;
   }
}

/* Padrão do site: subtítulo (pill) com 20px de espaço até o título, em todas as seções */
.sub-title {
   display: inline-block;
   margin-bottom: 20px;
}

.about-sec .about-txt .sub-title {
   align-self: flex-start;
}

/* Sobre: imagem encosta no topo e no fim da seção; bloco de texto sempre centralizado na altura */
section.about-sec.sec-padding {
   padding-top: 0;
   padding-bottom: 0;
}

.about-sec > .container > .row {
   align-items: center;
}

.about-sec .about-txt {
   display: flex;
   flex-direction: column;
   justify-content: center;
}

/* Sobre: título proporcional, para o bloco de texto ficar menor que a imagem */
.about-sec .about-txt h2 {
   font-size: clamp(30px, 3.2vw, 44px);
   line-height: 1.2;
}


/* Botões: texto e seta sempre na mesma linha */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   white-space: nowrap;
}


/* Teste: intro em cinza + faixa com parallax + bloco azul escuro com os benefícios */
.lodestar-intro {
   background-color: var(--light);
}

.lodestar-intro h2 {
   font-size: clamp(30px, 3.2vw, 44px);
   line-height: 1.2;
}

.lodestar-intro .ab-intro p + p {
   margin-top: 16px;
}

.lodestar-growth {
   background-color: #013a6b;
}

.lodestar-growth .growth-wrap::before {
   background-color: transparent;
}

.lodestar-growth ul.ct-list.lodestar-check-grid {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 36px 32px;
}

.lodestar-growth ul.ct-list.lodestar-check-grid li {
   flex: 0 0 calc((100% - 96px) / 4);
}

.lodestar-growth ul.ct-list li {
   margin: 0;
   padding-left: 34px;
   color: var(--white);
   font-size: 18px;
   font-weight: 500;
   line-height: 1.4;
}

.lodestar-growth ul.ct-list li::before {
   background: url("../images/bullet-symbol.svg") no-repeat 0 2px / auto 24px;
   width: 20px;
}

@media (max-width: 991.98px) {
   .lodestar-growth ul.ct-list.lodestar-check-grid li {
      flex: 0 0 calc((100% - 32px) / 2);
   }
}

@media (max-width: 575.98px) {
   .lodestar-growth ul.ct-list.lodestar-check-grid li {
      flex: 0 0 100%;
   }
}

/* Tipos de apólice (layout "Projects" do index-2, sem carrossel): 4 cards lado a lado */
.lodestar-types .project-carousel2 .swiper-wrapper {
   display: flex;
}

.lodestar-types .project-carousel2 .swiper-slide {
   flex: 1 1 0;
   width: auto;
   margin: 0;
}

.lodestar-types .project-card2 .feat-title {
   margin-bottom: 15px;
}

.lodestar-types .project-card2 .hover-content p {
   margin-bottom: 0;
}

@media (max-width: 991.98px) {
   .lodestar-types .project-wrap {
      height: 600px;
   }

   .lodestar-types .project-carousel2 .swiper-wrapper {
      flex-wrap: wrap;
   }

   .lodestar-types .project-carousel2 .swiper-slide {
      flex: 0 0 50%;
   }

   .lodestar-types .project-card2 {
      height: 300px;
   }
}

@media (max-width: 575.98px) {
   .lodestar-types .project-wrap {
      height: 880px;
   }

   .lodestar-types .project-carousel2 .swiper-slide {
      flex: 0 0 100%;
   }

   .lodestar-types .project-card2 {
      height: 220px;
   }
}

/* Tipos de apólice: cabeçalho com subtítulo, título e texto introdutório */
.lodestar-types .sec-intro {
   max-width: 900px;
   margin: 0 auto 50px;
   padding: 0 15px;
}

.lodestar-types .sec-intro h2 {
   font-size: clamp(28px, 3vw, 40px);
   line-height: 1.25;
}

.lodestar-types .types-intro {
   margin-top: 25px;
}

.lodestar-types .types-intro p {
   color: rgba(var(--white-rgb), 0.85);
   margin: 0 0 14px;
}

/* Equipe (layout "What we provide"): título e texto centralizados */
.lodestar-team h2 {
   font-size: clamp(30px, 3.2vw, 44px);
   line-height: 1.2;
}

.lodestar-team .support-content p {
   margin: 0 auto 14px;
}

.lodestar-team .support-content .team-lead {
   color: var(--headings-color);
   font-weight: 600;
   font-size: 18px;
   margin-top: 20px;
}

/* Tipos de apólice: marca d'água do símbolo da logomarca (substitui a forma do template) */
.lodestar-types::before {
   background: url("../images/watermark-white.svg") no-repeat;
   background-position: center top 50px;
   background-size: auto 760px;
   max-width: none;
   opacity: 0.08;
   filter: none;
}