/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/



/* -------------------------------
   Importação
-------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');
/* -------------------------------
   Lista
-------------------------------- */

ul li, ol li {
  font-family: "Inter", sans-serif;
  margin-bottom: 10px;
  font-size: 18px;
}

ul {
  display: block;
  list-style-type: disc;
  margin: 0;
  padding-inline-start: 15px;
  unicode-bidi: isolate;
}

ol {
  margin: 0!important;
  font-family: "Inter", sans-serif;
  font-size: 18px!important;
  padding-left: 20px;
  font-weight: 500!important;
}


/* -------------------------------
   Tipografia
-------------------------------- */

h1, h2, h3, h4, h5, h6 {  
  margin-bottom: 2rem;
  color: #0366d6;	
}

h1 {
  font-size: 4rem!important;
}

h2{
  font-family: "Titillium Web", sans-serif;
  font-weight: 500;
  font-size: 48px;  
  line-height: 3.3rem;

}

h2.span, h3.span, h4.span, h5.span, h6.span, .big{
  font-family: "Titillium Web", sans-serif;
  font-weight: 600;
  color: #004289;  
}


h3 {
  font-family: "Titillium Web", sans-serif;
  font-size: 2.2rem;
  line-height: 2.3rem;
  font-weight: 300; 

}

h4 {
  font-size: 1.5rem!important;
  font-family: "Inter", sans-serif;
  font-weight: 600; 
  line-height: 1.85rem; 
}

h5 {
  font-family: "Inter", sans-serif;  
  font-size: 1.25rem!important;
  font-weight: 500; 
}

h6 {
  font-family: "Inter", sans-serif;
  font-size: 1.125rem;
}

p {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .5px;
  line-height: 24px;
  color: #545454;	
}


.display-1 {
  font-size: 3.5rem;
  line-height: 4.25rem; 
}

.display-2 {
  font-size: 3.25rem!important;
  line-height: 4.25rem; 	
}

.big {
  font-size: 1.4rem;
  line-height: 1.3;
  font-weight: 500; 	
}

.medium {
  font-size: 1.15rem;
  line-height: 1.3;
  font-weight: 500; 
}

.small {
  font-size: 14px;
  font-weight: 400;
}

@media (max-width: 1024px) {
  h2{
   font-size: 2rem;
  }
  .display-1 {
    font-size: 3rem;
    line-height: 3rem; 
  }
}  

@media (max-width: 768px) {
  h2{
   font-size: 2rem;
  }
  .display-1 {
    font-size: 3rem;
    line-height: 3rem; 
  }	
}

@media (max-width: 480px) {
  h2{
   font-size: 2rem;
  }
  .display-1 {
    font-size: 2rem;
    line-height: 2rem; 
  }
}


/* -------------------------------
   Layouts e Estruturas Gerais
-------------------------------- */

/* Estilização do contêiner principal */
.footer-newsletter {
  display: flex; /* Ativa o layout flexível */
  align-items: center; /* Alinha verticalmente os itens */
  justify-content: center; /* Alinha horizontalmente ao centro */	
  gap: 16px; /* Espaçamento entre as divs */
}

/* Estilização da primeira div (campo de telefone) */
.footer-newsletter div:first-child {
  flex: 1; /* Ocupa o espaço disponível */
}

/* Estilização do span dentro da primeira div */
.f-col-100 {
  display: block;
  width: 100%; /* Garante que o campo de telefone ocupe toda a largura disponível */
}

/* Estilização da segunda div (botão de envio) */
.footer-newsletter div:last-child {
  flex-shrink: 0; /* Impede que o botão encolha */
}

/* -------------------------------
   Navegação
-------------------------------- */

.sticky-enabled .main-navigation.is_stuck {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* -------------------------------
   Sticky
-------------------------------- */

.sticky-planos {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 999;
    transition: border-color 0.3s ease; /* Efeito suave */
	padding-bottom: 20px;
	border-bottom: 1px solid #f0f0f0!important;
}

/* -------------------------------
   Accordion
-------------------------------- */

/* Estilo do container */
.accordion-container {
  display: none; /* Inicialmente oculto */
  font-size: 1.1rem;
}

.accordion-container.toggle-open {
  display: block; /* Exibido quando aberto */
}

/* Garantir posição relativa para conter o ícone absoluto */
.accordion-toggle {
  position: relative;
  padding-right: 30px; /* Espaçamento para não sobrepor texto */
}

/* Ícone SVG alinhado à direita da linha completa */
.accordion-toggle::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);	
  width: 16px;
  height: 16px;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg%20aria-hidden='true'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20fill-rule='evenodd'%20stroke='none'%20clip-rule='evenodd'%20d='M8%206.185V0H6.185V6.185L0%206.185V8L6.185%208V14H8V8L14%208V6.185L8%206.185Z'%20fill='white'%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20aria-hidden='true'%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20fill-rule='evenodd'%20stroke='none'%20clip-rule='evenodd'%20d='M8%206.185V0H6.185V6.185L0%206.185V8L6.185%208V14H8V8L14%208V6.185L8%206.185Z'%20fill='white'%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  transition: transform 0.3s ease;
}

/* Estado aberto: roda o ícone em 45 graus formando um X */
/* Quando o toggle está aberto */
.accordion-toggle.toggle-open:after {
  transform: translateY(-50%) rotate(45deg);
}

/* -------------------------------
   Toggle
-------------------------------- */

.comparativo-container {
	display: none; /* Inicialmente oculto */
}

.toggle-comparativo {
	display: flex;
	align-items: center;
	gap: 8px; /* Espaço entre o texto e o ícone */
	padding: 10px 0; /* Ajuste vertical sem preenchimento lateral */       
	position: relative; /* Para posicionar o ícone */
	transition: all 0.3s ease; /* Transição suave para todas as propriedades */
}
.toggle-comparativo::after {
	content: "";
	display: inline-block;
	width: 12px;
	height: 7.58px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17.486' height='11.046' viewBox='0 0 17.486 11.046'%3E%3Cpath id='Caminho_4868' data-name='Caminho 4868' d='M-13956.3,11268.873l8-8.883,8,8.883' transform='translate(-13939.558 11269.542) rotate(180)' fill='none' stroke='currentColor' stroke-width='2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	transition: transform 0.3s ease; /* Animação suave ao girar o ícone */
}
.toggle-comparativo.active::after {
	transform: rotate(180deg); /* Gira o ícone em 180 graus */
}
/* Transição suave para o texto */
.toggle-comparativo span {
	display: inline-block;
	transition: transform 0.3s ease, opacity 0.3s ease;
}
.toggle-comparativo.active span {
	transform: translateX(4px); /* Movimento sutil do texto */
}
.tooltip-container {
  display: flex;
  align-items: center; /* Alinha o texto e o ícone verticalmente */
  gap: 8px; /* Espaçamento entre o texto e o ícone */
}
/* Texto ao lado do ícone */
.text {
  font-family: "Inter", sans-serif;  
  font-weight: 500;
  font-size: 14px;
  color: #161616;
}
/* Wrapper do ícone e tooltip */
.svg-wrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
  width: 16px; /* Tamanho do ícone */
  height: 16px;
}
/* Ícone SVG como background */
.icon {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C4C4C4'%3E%3Cg id='_01_align_center' data-name='01 align center'%3E%3Cpath d='M12,24A12,12,0,1,1,24,12,12.013,12.013,0,0,1,12,24ZM12,2A10,10,0,1,0,22,12,10.011,10.011,0,0,0,12,2Z'/%3E%3Cpath d='M13,15H11v-.743a3.954,3.954,0,0,1,1.964-3.5,2,2,0,0,0,1-2.125,2.024,2.024,0,0,0-1.6-1.595A2,2,0,0,0,10,9H8a4,4,0,1,1,5.93,3.505A1.982,1.982,0,0,0,13,14.257Z'/%3E%3Crect x='11' y='17' width='2' height='2'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; /* Ajusta o SVG ao tamanho do contêiner */
}

.tooltip-text {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 125%; /* Posiciona acima do ícone */
  left: 0; /* Alterado para alinhar à esquerda */
  transform: none; /* Remove o centralizar */
  background-color: #161616;
  font-family: "Inter", sans-serif;  
  font-weight: 500;
  font-size: 14px;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 200px;
  text-align: left;
  z-index: 10;
  transition: opacity 0.3s ease-in-out;
}

.tooltip-text::after {
  content: '';
  position: absolute;
  bottom: -5px; /* Seta na parte inferior do tooltip */
  left: 10px; /* Distância da esquerda (ajuste conforme necessário) */
  border-width: 6px 6px 0 6px; /* Triângulo virado para cima */
  border-style: solid;
  border-color: #161616 transparent transparent transparent;
  z-index: 10;
}

/* Exibe o tooltip ao passar o mouse */
.svg-wrapper:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* -------------------------------
   Footer Button
-------------------------------- */

.footer-button {
  visibility: hidden; /* Oculta visualmente o botão sem removê-lo do fluxo */
  position: fixed;
  bottom: 15px;
  left: 15px;
  background-color: #25d366;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  opacity: 0; /* Define a opacidade inicial como invisível */
  display: flex; /* Garante que o botão esteja sempre no layout */
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out; /* Transição suave de opacidade e visibilidade */
  animation: vibrate 0.5s linear infinite, pulse 2.5s ease-in-out infinite;
}

.footer-button.show {
  visibility: visible; /* Torna o botão visível */
  opacity: 1; /* Define a opacidade máxima */
}

.footer-button a {
  color: white;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: transparent!important;
}

.footer-button svg {
  width: 32px;
  height: 32px;
  fill: white;
  background-color: transparent!important;
}

/* -------------------------------
   Modal
-------------------------------- */

.modal {
	position: relative;
}         

.close-modal {
  position: absolute;
  top: 20px;
  right: 15px;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}

/* -------------------------------
   Dynamic Progress Bar
-------------------------------- */

.dynamic-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 5px;
  background: -webkit-gradient(linear, left top, right top, from(#479dbb), color-stop(16.666%, #479dbb), color-stop(16.667%, #499da8), color-stop(33.332%, #499da8), color-stop(33.333%, #4c9e96), color-stop(49.998%, #4c9e96), color-stop(49.999%, #4d9e85), color-stop(66.664%, #4d9e85), color-stop(66.665%, #51a071), color-stop(83.33%, #51a071), color-stop(83.331%, #559e5e), to(#559e5e));
  background: linear-gradient(90deg, #479dbb, #479dbb 16.666%, #499da8 16.667%, #499da8 33.332%, #4c9e96 33.333%, #4c9e96 49.998%, #4d9e85 49.999%, #4d9e85 66.664%, #51a071 66.665%, #51a071 83.33%, #559e5e 83.331%, #559e5e);
  width: 0%;
  z-index: 9999;
  transition: width 0.2s ease;
}

/* -------------------------------
   Tab
-------------------------------- */

.tab-container {
}

.tab-header {
  list-style-type: none; 
  margin: 0 0 50px 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}	
	
/* Botões das abas */
.tab-header li {
    padding: 5px 20px;
	margin: 0 5px;
    cursor: pointer;
    border: 1px solid transparent; /* Cor do botão ativo */	
	border-radius: 6px;
	transition: border 0.3s ease-in-out, background 0.6s ease-in-out, transform 0.3s ease-in-out;
	font-size: 17px;
    display: inline-block;
    color: #aeacb5;
    font-weight: 500;
}

.tab-header li:hover {
	border: 1px solid #aeacb5; /* Cor do botão ativo */
}

.tab-header li.active {
	color: #161616;
	border: 1px solid #161616; /* Cor do botão ativo */
    font-weight: 500;	
}

.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}

/* -------------------------------
   Avatar
-------------------------------- */

.avatar {
  display: flex;
  align-items: center;
}

.img-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  margin-left: -10px;
}

.img-avatar:first-child {
  margin-left: 0;
}

.img-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -------------------------------
   Backgrounds
-------------------------------- */

/* -------------------------------
   Hero
-------------------------------- */

.hero .bg-blur{
  object-fit: cover;
  filter: blur(40px);
  transform: translateZ(0);
  position: relative;
  overflow: hidden;
} 

.hero .gif-hero{
  z-index: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: inherit;
  pointer-events: none;
} 

.bg-color {
  background-image: linear-gradient(45deg, #0C00FF, #F200FF, #00E1FF);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

.bg-color2 {
  background-image: linear-gradient(45deg, #34b242, #4d9e93, #479dbe);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

.gradiente-texto {
background-image: linear-gradient(45deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .3));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin: 0;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


/* -------------------------------
   Sliders
-------------------------------- */

.slider-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
}

.slider {
  display: flex;
  transition: transform 0.4s ease-in-out;
  will-change: transform;
}

.slide-item {
  
}
.slide-col-6{
   flex: 0 0 calc(100% / 6); /* Número de colunas configurado aqui */ 
}

.slide-col-5{
   flex: 0 0 calc(100% / 5); /* Número de colunas configurado aqui */ 
}


.slide-col-4{
   flex: 0 0 calc(100% / 4); /* Número de colunas configurado aqui */ 
}

.slide-col-3{
   flex: 0 0 calc(100% / 3); /* Número de colunas configurado aqui */ 
}

.slide-col-2{
   flex: 0 0 calc(100% / 2); /* Número de colunas configurado aqui */ 
}

.slide-col-1{
   flex: 0 0 calc(100% / 1); /* Número de colunas configurado aqui */ 
}

.left-btn,
.right-btn {
  color: #161616;
  cursor: pointer;
  transition: color 0.2s ease;
}

.left-btn:hover,
.right-btn:hover,
.left-btn:focus,
.right-btn:focus {
  color: #007CBA
}

.left-btn:disabled,
.right-btn:disabled {
  opacity: 0.5;
}

.indicators {
  display: flex;
  justify-content: center;
  align-items: center; /* Mantém os itens centralizados na horizontal */
  gap: 5px;
  position: relative;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
}

.indicator {
  width: 50px; /* Largura de cada segmento da linha */
  height: 5px; /* Altura da linha */
  background-color: #f0f0f0; /* Cor de fundo padrão */
  cursor: pointer;
  transition: background-color 0.3s; /* Transição suave para a mudança de cor */
}

.indicator.active {
  background-color: #3c49db; /* Cor de fundo quando ativo */
}

@media (max-width: 1024px) {
  .slide-item {
    flex: 0 0 calc(100% / 2); /* Número de colunas configurado aqui */
  }
}  

@media (max-width: 768px) {
  .slide-item {
    flex: 0 0 calc(100% / 2); /* Número de colunas configurado aqui */
  }
}

@media (max-width: 480px) {
  .slide-item {
    flex: 0 0 calc(100% - 5px); /* Número de colunas configurado aqui */
  }
}



/* -------------------------------
   loop-container
-------------------------------- */

.loop-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.loop-wrapper {
  display: flex;
  gap: 20px;
  animation: scroll-loop 10s linear infinite;
  cursor: grab;
  will-change: transform;
}

.loop-wrapper {
  animation: loopAnimation linear infinite;
}

@keyframes loopAnimation {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/* Para inverter a direção */
.loop-right {
  animation-direction: reverse;
}


.loop-col-1{
  flex: 0 0 calc(100% - 20px);
  box-sizing: border-box;
}
.loop-col-2{
  flex: 0 0 calc(50% - 20px);
  box-sizing: border-box;
}
.loop-col-3{
  flex: 0 0 calc(33.33% - 20px);
  box-sizing: border-box;
}
.loop-col-4{
  flex: 0 0 calc(25% - 20px);
  box-sizing: border-box;
}
.loop-col-5{
  flex: 0 0 calc(20% - 20px);
  box-sizing: border-box;
}
.loop-col-6{
  flex: 0 0 calc(16.66% - 20px);
  box-sizing: border-box;
}

.loop-item img {
  display: block;
}

.fade-carousel{
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.fade-carousel::before,
.fade-carousel::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 200px;
  z-index: 2;
}

.fade-carousel::before {
  left: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

.fade-carousel::after {
  right: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

@keyframes scroll-loop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-100%));
  }
}

.loop-container:hover .loop-wrapper {
  animation-play-state: paused;
}


@media (max-width: 1024px) {
  .loop-col-6{
    flex: 0 0 calc(20% - 20px);
    box-sizing: border-box;
  }
}  

@media (max-width: 768px) {
  .loop-col-6{
    flex: 0 0 calc(33.33% - 20px);
    box-sizing: border-box;
  }
}

@media (max-width: 480px) {
  .loop-col-6{
    flex: 0 0 calc(33.33% - 20px);
    box-sizing: border-box;
  }
}

.loop-navigation {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  justify-content: space-between;
  width: 100%;
  pointer-events: none;
}

.loop-navigation button {
  pointer-events: all;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  border-radius: 5px;
  transition: background 0.3s ease;
}

.loop-navigation button:hover {
  background: rgba(0, 0, 0, 0.7);
}


/* -------------------------------
   Avatar 2
-------------------------------- */
.imagem-depoimento {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
}

.imagem-depoimento-2 {
  width: 80px;
  height: 80px;
  border-radius: 100%;
  overflow: hidden;
}


/* -------------------------------
   Form 7
-------------------------------- */

/* Contact Form 7 */
.f-col-50{
	float: left;
	width: 50%;	
}
.f-col-100{
	float: left;
	width: 100%;
}

.f-col-50,
.f-col-100 {
    box-sizing: border-box;
}

.pr-5{
	padding-right: 15px;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="password"],
.wpcf7 input[type="search"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 textarea,
.wpcf7 select {
    background: #fff;
    color: var(--global-color-1);
	font-family: "Inter", sans-serif;
	font-weight: 500;
    font-size: 16px;
    border: 1px solid #C4C4C4;
	border-radius: 6px;
	margin-bottom: 10px;
    width: 100%;
	padding: 10px 15px;
}

input[type="button"], 
input[type="reset"], 
input[type="submit"],  
a.wp-block-button__link:not(.has-background) {	
  background-color: #0053ad;
  color: #fff;
  font-family: "Inter", sans-serif;  
  font-weight: 500;
  font-size: 16px;  
  padding: 15px 25px;
  border-radius: 100px;
  border: 1px solid #0053ad;
}

input[type="submit"]:hover {
    background-color: #222;
    border-color: #222;
    cursor: pointer;
}

.wpcf7-form-control.wpcf7-tel {
    position: relative;
    padding-left: 40px;
}

.wpcf7-form-control.wpcf7-tel {
    padding-left: 40px !important;
    background-image: url('https://beisi.com.br/wp-content/uploads/2025/01/brasil.svg')!important;
    background-position: 10px center !important;
    background-repeat: no-repeat !important;
    background-size: 24px 24px !important;
}

.form-small {
  font-size: 12px;
}



/* -------------------------------
   Image zoom-in
-------------------------------- */

.zoom-in {
  width: 100%; /* Defina a largura desejada */
  height: auto; /* Defina a altura desejada */
  overflow: hidden; /* Oculta a parte que expande além do contêiner */
  position: relative; 
}
.zoom-in2 {
  width: 100%; /* Defina a largura desejada */
  height: auto; /* Defina a altura desejada */
  overflow: hidden; /* Oculta a parte que expande além do contêiner */
  position: relative;
  border-top-left-radius: 8px; 
  border-top-right-radius: 8px;   
}
.zoom-in img, .zoom-in2 img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Garante que a imagem se ajuste corretamente */
  transition: transform 0.3s ease; /* Transição suave para o efeito */
}
.zoom-in:hover img, .zoom-in2:hover img {
  transform: scale(1.1);
}

/* -------------------------------
   Image zoom-in
-------------------------------- */

.hover-zoom {
  transition: transform 0.5s ease;
}

.hover-zoom:hover {
  transform: scale(1.05); 
}



.dynamic-bg {
  width: 100%;
  overflow: hidden; /* Oculta o conteúdo fora do limite */
  background-size: 100%; /* Tamanho inicial do fundo */
  background-position: center; /* Centraliza o fundo */
  background-repeat: no-repeat; /* Evita repetição */
  transition: background-size 0.5s ease; /* Suaviza a transição */
}

.dynamic-bg:hover {
  background-size: 120%; /* Aumenta o tamanho no hover */
  background-position: center; /* Garante que a posição seja mantida */
}

.none{
	display: none;
}


/* Estilização padrão para posicionar o SVG no lado direito */

/* ------------------------------ */
/* Classe original: seta à direita */
/* ------------------------------ */
.svg-container {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  color: inherit;
  position: relative;
}

/* Para garantir tamanho fixo em qualquer situação */
.svg-container::after {
  content: "";
  flex-shrink: 0;
  flex-grow: 0;
  width: 14px !important;
  height: 12px !important;
  min-width: 14px;
  min-height: 12px;
  max-width: 14px;
  max-height: 12px;
  margin-left: 0px;                /* espaçamento entre texto e seta */
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20width%3D'14.03'%20height%3D'12.06'%20viewBox%3D'0%200%2014.03%2012.06'%3E%3Cpath%20d%3D'M8%2C0L6.922%2C1.077l4.191%2C4.191H0V6.791H11.113L6.922%2C10.983L8%2C12.06l6.03-6.03Z'/%3E%3C/svg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20width%3D'14.03'%20height%3D'12.06'%20viewBox%3D'0%200%2014.03%2012.06'%3E%3Cpath%20d%3D'M8%2C0L6.922%2C1.077l4.191%2C4.191H0V6.791H11.113L6.922%2C10.983L8%2C12.06l6.03-6.03Z'/%3E%3C/svg%3E") no-repeat center/contain;
  transition: transform 0.3s ease-in-out;
}

.svg-container:hover::after {
  transform: translateX(3px);
}

/* ------------------------------ */
/* Nova classe: seta à esquerda   */
/* ------------------------------ */
.svg-container-left {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  color: inherit;
  position: relative;
}

/* Pseudo-elemento antes do conteúdo para seta à esquerda */
.svg-container-left::before {
  content: "";
  flex-shrink: 0;
  flex-grow: 0;
  width: 14px !important;
  height: 12px !important;
  min-width: 14px;
  min-height: 12px;
  max-width: 14px;
  max-height: 12px;
  margin-right: 0px;               /* espaçamento entre seta e texto */
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20width%3D'14.03'%20height%3D'12.06'%20viewBox%3D'0%200%2014.03%2012.06'%3E%3Cpath%20d%3D'M8%2C0L6.922%2C1.077l4.191%2C4.191H0V6.791H11.113L6.922%2C10.983L8%2C12.06l6.03-6.03Z'/%3E%3C/svg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http://www.w3.org/2000/svg'%20width%3D'14.03'%20height%3D'12.06'%20viewBox%3D'0%200%2014.03%2012.06'%3E%3Cpath%20d%3D'M8%2C0L6.922%2C1.077l4.191%2C4.191H0V6.791H11.113L6.922%2C10.983L8%2C12.06l6.03-6.03Z'/%3E%3C/svg%3E") no-repeat center/contain;
  transition: transform 0.3s ease-in-out;
}

.svg-container-left:hover::before {
  transform: translateX(3px);
}



* Botão com sublinhado animado */
.btn-subline {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}

.btn-subline::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%; /* Começa com largura 0% */
  height: 1.8px;
  background-color: currentColor;
  transition: width 0.4s ease; /* Transição suave de aumento da largura */
}

.btn-subline:hover::after {
  width: 100%; /* A linha cresce para a largura total no hover */
}


/* 1) Container pai */
.page-wrapper {
  position: relative;
  min-height: auto;
  overflow: hidden;
}

/* 2) Pseudo-elemento pendurado à direita */
.page-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 310px; /* 120 + 70 + 40 + 40 + 40 = 310 */

  /* 3) Cinco camadas, da esquerda (gradiente 120px) para a direita (magenta 40px) */
  background-image:
    /* 1ª: azul escuro → azul claro (120px) */
    linear-gradient(to bottom, #0000FF 30%, #69F3FF 100%),
    /* 2ª: ciano escuro → ciano claro (70px) */
    linear-gradient(to bottom, #69F3FF 0%, #CBFFFB 100%),
    /* 3ª: verde sólido (40px) */
    linear-gradient(to bottom, #0366D6 0%, #02115F 100%),
    /* 4ª: laranja → amarelo (40px) */
    linear-gradient(to bottom, #cffeff 0%, #00cfff 100%),
    /* 5ª: magenta → rosa (40px) */
    linear-gradient(to bottom, #0000FF 30%, #69F3FF 100%);
  background-repeat: no-repeat;

  /* 4) Define largura e altura de cada faixa */
  background-size:
    120px 100%,
     70px 100%,
     40px 100%,
     40px 100%,
     40px 100%;

  /* 5) Posiciona-as de 0 a 270px a partir da esquerda do pseudo-elemento */
  background-position:
    left   0px   top,
    left  120px  top,
    left  190px  top,
    left  230px  top,
    left  270px  top;

  /* (Opcional) deixa o pseudo-elemento transparente a cliques */
  pointer-events: none;
}


.mapa-full {
  width: 100vw;        /* ocupa a largura total da janela */
  margin-left: calc(-45vw + 45%); /* "quebra" o container do GeneratePress */
  position: relative;
}

.mapa-full iframe {
  width: 100%;
  height: 450px; /* ajuste a altura como quiser */
  display: block;
  filter: grayscale(90%); /* deixa em preto e branco */
}


.bg-image {
  position: relative;
  width: 100%;
  height: 100%; /* Ajuste conforme necessário */
  background-size: cover;
  background-position: center;
}

/* Cria a máscara degradê azul */
.bg-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, 
    rgba(2, 17, 95, 1),   /* Azul totalmente opaco no início */
    rgba(2, 17, 95, .3),   /* Azul totalmente opaco no início */
    rgba(2, 17, 95, 0)  /* Azul claro com 30% no final */
  );
  pointer-events: none; /* Permite que cliques passem pela máscara, se necessário */
  z-index: 1;
  border-radius: inherit;
}

/* Opcional: garante que o conteúdo fique acima da máscara */
.bg-image > * {
  position: relative;
  z-index: 2;
  color: white;
  padding: 20px;
  border-radius: inherit;
}


.text-headline{
  line-height: 5rem;
}


article{
  padding-bottom: 50px;
  padding-left: 10px;
  padding-right: 10px;
}