* {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
}

.h-28 {
    height: 7rem;
}

.h-64 {
  height: 16rem;
}

.w-64 {
  width: 16rem;

}

.h-80 {
  height: 20rem;
}

.h-full {
  height: 100%;
}

.w-80 {
  width: 20rem;
}

.w-full {
  width: 100%;
}

.bg-magnus { background-color: #272154 !important; }
.text-magnus { color: #272154 !important; }
.border-magnus { border-color: #272154 !important; }

.magnus-text-orange {
  color: #ff6600;
}

.magnus-text-blue {
  color: #003471;
}

.magnus-text-white {
  color: #ffffff;
}

header a.magnus-text-white {
  color: #ffffff;
}

.magnus-title-1 {
  letter-spacing: 6px; 
  font-size: 60px; 
  font-weight: 300;
  color: #ff6600;
}

.magnus-subtitle-1 {
  color: #ffffff;
}


.magnus-body-1 {
  font-size: 24px;
  color: #ffffff;
}

.quote {
  font-size: 200px; 
  line-height: 100px; 
  margin-top: 20px;
}


.citation {
  font-size: 40px; 
  margin-top: -60px;
}

@media (max-width: 768px) {

  .magnus-title-1 {
    letter-spacing: 6px; 
    font-size: 40px; 
    font-weight: 300;
    color: #ff6600;
  }

  .citation {
    font-size: 35px; 
    margin-top: -60px;
  }

  .h-landing-page {
    height: 40vh; /* menor no celular */
  }

  .banner-image {
    object-fit: cover;
    width: 100%;
  }
}

.menu-popover {
  width: max-content;
  position: absolute;
  top: 0;
  left: 0;
}

.fs-7 {
    font-size: 0.75rem;
    line-height: 1rem;
}

html {
  -webkit-font-smoothing: antialiased;
}

.bg-landing-page-carousel-1 {
  background: url("../../static/images/home/carrosel/Home Carrossel - Infantil - 30.png") no-repeat center;
  background-size: cover;
}

.bg-landing-page-carousel-2 {
  background: url("../../static/images/home/carrosel/Home Carrossel - Fundamental I - 30.png") no-repeat center;
  background-size: cover;
}

.bg-landing-page-carousel-3 {
  background: url("../../static/images/home/carrosel/Home Carrossel - Fundamental II - 30.png") no-repeat center;
  background-size: cover;
}

.bg-landing-page-carousel-4 {
  background: url("../../static/images/home/carrosel/Home Carrossel - Integral - 30.png") no-repeat center;
  background-size: cover;
}

.bg-landing-page-carousel-5 {
  background: url("../../static/images/home/carrosel/Home Carrossel - 30.png") no-repeat center;
  background-size: cover;
}


.bg-landing-page-1 {
  background: url("../../static/images/06.png") no-repeat center;
  background-size: cover;
}

.bg-footer-index {
  background: url("../../static/images/home/rodape - 30.png") no-repeat center;
  background-size: cover;
}

.bg-footer-infantil {
  background: url("../../static/images/Infantil/Rodape Infantil - 30.png") no-repeat center;
  background-size: cover;
}

.bg-footer-fund-1 {
  background: url("../../static/images/Fund I/Rodape FI - 30.png") no-repeat center;
  background-size: cover;
}

.bg-footer-fund-2 {
  background: url("../../static/images/Fund II/Rodape FII - 30.png") no-repeat center;
  background-size: cover;
}

.bg-footer-integral {
  background: url("../../static/images/Integral/Rodape Integral - 30.png") no-repeat center;
  background-size: cover;
}

.bg-footer-integral-fundamental {
  background: url("../../static/images/Integral/fundamental/Rodape Integral Fund - 30.png") no-repeat center;
  background-size: cover;
}

.bg-footer-integral-infantil {
  background: url("../../static/images/Integral/infantil/Rodape Integral Infantil- 30.png") no-repeat center;
  background-size: cover;
}

.bg-footer-agendamento {
  background: url("../../static/images/Agendamento/Rodape - Fachada Fundamental.png") no-repeat center;
  background-size: cover;
}

.h-landing-page {
  height: 60vh; /* ajusta conforme o gosto */
  width: 100%;
  object-fit: cover;
}

.tituloCarosseel {
  color:ff6600; 
  letter-spacing: 0px;
  font-size: 40px;  
  font-family: sans-serif;
  font-weight: bold;
}

.bg-carousel-fundamental1-1 {
  background: url("../../static/images/carousel-fundamental1-1.jpg") no-repeat center;
  background-size: cover;
}

.bg-carousel-fundamental1-2 {
  background: url("../../static/images/carousel-fundamental1-2.jpg") no-repeat center;
  background-size: cover;
}

.bg-carousel-fundamental1-3 {
  background: url("../../static/images/carousel-fundamental1-3.jpg") no-repeat center;
  background-size: cover;
}

.bg-carousel-fundamental1-4 {
  background: url("../../static/images/carousel-fundamental1-4.jpg") no-repeat center;
  background-size: cover;
}

.bg-carousel-fundamental1-5 {
  background: url("../../static/images/carousel-fundamental1-5.jpg") no-repeat center;
  background-size: cover;
}

.glide__bullet--active {
  background-color: transparent;
  color: #ff9900 !important;
}

a {
  text-decoration: none;
}

.cursor-pointer {
  color: #ffffff;
  transition: color 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}

.cursor-pointer:hover {   
  color: #f07e26; /* muda a cor da estrela no hover */
  transform: scale(1.2); /* opcional: dá um leve zoom no hover */
}

.carousel-icon {
  color: #f07e26;
  transition: transform 0.2s ease, color 0.2s ease;
}

.carousel-icon:hover {
  color:  #003471;
  transform: scale(1.1); 
}

.whatsapp-fixed {
  position: fixed;
  top: 87%;
  right: 10px;
  margin-right: 10px;
  transform: translate(0, -50%);
  height: 50px;
  width: 50px;
  border-radius: 50%; 
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse 1.2s infinite;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
}

.img-whats{
  height: 70px;
  width: 70px;
}

@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

.whatsapp-fixed:hover {
  color: #ff9900;
}

.text-justify {
  text-align: justify;
}

/* Parte usada no FI e FII onde tem o circulo ao lado */

.card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  background-color: #0077cc;
  border-radius: 15px;
  padding: 20px;        
  width: 90%;
  max-width: 900px;
  margin: 50px auto;
  box-sizing: border-box;
  right: 7%;
  text-align: left;
}

.card img {
  position: absolute;
  top: 0;
  right: 0;
  width: 35%;  /* cerca de 1/3 do retângulo */
  aspect-ratio: 1/1; /* mantém proporção quadrada */
  border-radius: 50%; /* deixa a imagem circular */
  border: 5px solid #0077cc; /* contorno da cor do retângulo */
  object-fit: cover; /* garante corte proporcional */
  transform: translate(52%, -20%);
}

    
.texto {
  margin-right: 15%; /* reserva espaço para a foto */
}

.card h1{
  font-weight: bold;
  color: #f7f7f7;
}

.card h2{
  color: #ff8c00;
}

.card p{
  color: #f7f7f7;
}

.cardEsquerda {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    background-color: #0077cc;
    border-radius: 15px;
    padding: 20px;        
    width: 90%;
    max-width: 900px;
    margin: 50px auto;
    box-sizing: border-box;
    left: 7%;
    text-align: right;
  }

.cardEsquerda img {
  position: absolute;
  top: 0;
  right: 0;
  width: 35%;  /* cerca de 1/3 do retângulo */
  aspect-ratio: 1/1; /* mantém proporção quadrada */
  border-radius: 50%; /* deixa a imagem circular */
  border: 5px solid #0077cc; /* contorno da cor do retângulo */
  object-fit: cover; /* garante corte proporcional */
  transform: translate(-238%, -20%);
}

    
.textoEsquerda {
  margin-left: 15%; /* reserva espaço para a foto */
}

.cardEsquerda h1{
  font-weight: bold;
  color: #f7f7f7;
}

.cardEsquerda h2{
  color: #ff8c00;
}

.cardEsquerda p{
  color: #f7f7f7;
}


/* Parte usada nas páginas de Integral */
.caixa-destaques {
  background: #ff8c00;
  border-radius: 15px;
  padding: 30px;      
  margin: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.caixa-destaques-azul {
  background: #0077cc;
  border-radius: 15px;
  padding: 30px;      
  margin: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.caixa-destaques .destaque,
.caixa-destaques-azul .destaque {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
  gap: 20px;
}

.caixa-destaques .destaque img,
.caixa-destaques-azul .destaque img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 10px;
  flex-shrink: 0;
}

.caixa-destaques .texto{
  flex: 1;
  margin-right: 15%;
  margin-left: 0%;
}

.caixa-destaques-azul .texto {
  flex: 1;
  margin-right: 0%;
  margin-left: 15%;
}

.caixa-destaques .texto h3 {
  margin: 0 0 10px;
  color: #f0f0f0;;
  font-weight: bold;
}

.caixa-destaques-azul .texto h3 {
  font-weight: bold;
  margin: 0 0 10px;
  color: #fff;
}

.caixa-destaques .texto p {
  margin: 0;
  color: #f0f0f0;
  line-height: 1.5;
}

.caixa-destaques-azul .texto p {
  margin: 0;
  color: #f0f0f0;
  line-height: 1.5;
}

/* Destaque invertido */
.caixa-destaques .invertido,
.caixa-destaques-azul .invertido {
  flex-direction: row-reverse;
  text-align: right;
}

/*Botões Agendamento */
.botaoMeio {
  display: block;              /* Faz o botão se comportar como bloco */
  margin: 0 auto;              /* Centraliza horizontalmente */
  background-color: #003471;   /* Cor de fundo padrão */
  color: white;                /* Texto branco */
  padding: 10px 20px;          /* Espaçamento interno */
  border: none;                /* Remove bordas padrão */
  border-radius: 4px;          /* Cantos levemente arredondados */
  cursor: pointer;             /* Muda o cursor para "mão" */
  text-align: center;          /* Centraliza o texto */
  font-size: 16px;             /* Tamanho da fonte */
}

/* Efeito hover */
.botaoMeio:hover {
  background-color: #ff8c00;   /* Troca a cor ao passar o mouse */
}

.botaoMeioVermelho {
  display: block;              /* Faz o botão se comportar como bloco */
  margin: 0 auto;              /* Centraliza horizontalmente */
  background-color: #710d00;   /* Cor de fundo padrão */
  color: white;                /* Texto branco */
  padding: 10px 20px;          /* Espaçamento interno */
  border: none;                /* Remove bordas padrão */
  border-radius: 4px;          /* Cantos levemente arredondados */
  cursor: pointer;             /* Muda o cursor para "mão" */
  text-align: center;          /* Centraliza o texto */
  font-size: 16px;             /* Tamanho da fonte */
}

.botaoMeioVermelho:hover {
  background-color: #ff8c00;   /* Troca a cor ao passar o mouse */
}


.botaoEsquerda{
  float: left;
  background-color: #003471;
  color: white;
}

.botaoDireita{
  float: right;
  background-color: #003471;
  color: white;
}

.botaoDireitaVermelho{
  float: right;
  background-color: #710d00;
  color: white;
}

.botaoEsquerdaaVermelho{
  float: left;
  background-color: #710d00;
  color: white;
}

.botaoEsquerdaaVerde{
  float: left;
  background-color: #049104;
  color: white;
}

.botaoMeioVerde {
  display: block;              /* Faz o botão se comportar como bloco */
  margin: 0 auto;              /* Centraliza horizontalmente */
  background-color: #049104;   /* Cor de fundo padrão */
  color: white;                /* Texto branco */
  padding: 10px 20px;          /* Espaçamento interno */
  border: none;                /* Remove bordas padrão */
  border-radius: 4px;          /* Cantos levemente arredondados */
  cursor: pointer;             /* Muda o cursor para "mão" */
  text-align: center;          /* Centraliza o texto */
  font-size: 16px;             /* Tamanho da fonte */
}

.botaoMeioVerde:hover {
  background-color: #ff8c00;   /* Troca a cor ao passar o mouse */
}


@media (min-width: 768px) { /*Telas de até 768 px ficam com o menu fixo */
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999; /* garante que o header fique por cima de tudo */
    background: #fff; /* define cor de fundo para não ficar transparente */
  }

  /* Para evitar que o conteúdo "suba" por baixo do header */
  body {
    padding-top: var(--header-height, 120px); /* ajuste conforme a altura real do seu header */
  }       

}


/* Telas menores que 1200 px e largura */
@media (max-width: 1200px) {

  /* Parte usada no FI e FII onde tem o circulo ao lado */
  .card img {             
  width: 35%;                  
  }

  .cardEsquerda img {             
  width: 35%;                  
  }
}

/* --- Layout para celular --- */
@media (max-width: 767px) {

  .whatsapp-fixed {    
    right: 0px;
  }

  .img-whats{
    height: 50px;
    width: 50px;
  }

  /* Parte usada no FI e FII onde tem o circulo ao lado */
  .card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    right: 0;
  }

  .card img {
    position: static;        /* tira o absolute */
    width: 90%;              /* quase toda a largura */
    border-radius: 15px;     /* borda suave, não mais círculo */
    border: 4px solid white; /* destacada como cabeçalho */
    margin-bottom: 15px;     /* espaço entre a foto e o texto */
    transform: translate(0, 0);
  }     
  
  .texto {
    margin: 0; /* texto volta a ocupar toda largura */
    text-align: center;
  }

  .cardEsquerda {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    left: 0;
  }

  .cardEsquerda img {
    position: static;        /* tira o absolute */
    width: 90%;              /* quase toda a largura */
    border-radius: 15px;     /* borda suave, não mais círculo */
    border: 4px solid white; /* destacada como cabeçalho */
    margin-bottom: 15px;     /* espaço entre a foto e o texto */
    transform: translate(0, 0);
  }     
  
  .textoEsquerda {
    margin: 0; /* texto volta a ocupar toda largura */
    text-align: center;
  }

  /* Parte usada nas páginas de Integral */
  .caixa-destaques .destaque,
  .caixa-destaques-azul .destaque {
    flex-direction: column !important; /* força coluna */
    text-align: justify; /* texto justificado */
  }

  .caixa-destaques .destaque img,
  .caixa-destaques-azul .destaque img {
    margin-bottom: 15px;
    align-self: center; /* centraliza */
  }

  .caixa-destaques .texto{
    flex: 1;
    margin-right: 0%;
    margin-left: 0%;
  }

  .caixa-destaques-azul .texto {
    flex: 1;
    margin-right: 0%;
    margin-left: 0%;
  }
  
}