@font-face {
  font-family: "Neo Sans Std";
  src: url("assets/fonts/NeoSansStdRegular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Neo Sans Std", "Segoe UI", sans-serif;
}

body {
  color: #333;
  background: #fff;
  text-align: center;
}

/* ===== TOPO ===== */
.topo {
  background: linear-gradient(90deg, #1a406e 0%, #1c7bc4 100%);
  padding: 20px 0;
}

.logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}


.logo-scs {
  height: 85px;
  object-fit: contain;
}

.logo-blueway {
  height: 120px;
  object-fit: contain;
}

.rodape-logo{
    background: linear-gradient(90deg, #ea7e12 0%, #fcd516 100%);
}

.logo-scs-rodape {
  height: 65px;
  object-fit: contain;
}

.logo-bw-rodape {
  height: 90px;
  object-fit: contain;
}

/* ===== MENU FIXO ===== */
.menu-fixo {
  background: linear-gradient(90deg, #ea7e12 0%, #fcd516 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 15px 0;
}

.menu-fixo a {
  text-decoration: none;
  color: #fff;
  transition: opacity 0.3s ease;
}

.menu-fixo a:hover {
  opacity: 0.8;
}

/* ===== FUNDO ===== */
.full-image {
  width: 100%;
  height: 65vh;
  min-height: 300px;
  background-size: cover;
  background-position: center center;
}

.full-image2 {
  width: 100%;
  height: 25vh;
  min-height: 70px;
  background-size: cover;
  background-position: center center;
}

/* ===== TEXTOS ===== */
.titulo1 {font-size: 2.5rem; color:#1c7bc4; font-weight: bolder; margin-top: -30px;}
.spam1 {font-size: 2.5rem; font-weight: lighter; }

.titulo2 {font-size: 1.9rem; color:black; font-weight: bolder;}
.spam2 {font-size: 1.9rem; font-weight: lighter; }

.titulo3 {font-size: 2.5rem; color:#1c7bc4; font-weight: bolder;}
.spam3 {font-size: 2.5rem; font-weight: lighter; }

.titulo4 {font-size: 2.5rem; color:#fff; font-weight: lighter;}

.texto-bloco {
  padding: 60px 10%;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.texto-bloco2 {
  background: linear-gradient(90deg, #ea7e12 0%, #fcd516 100%);
  padding: 60px 10%;
 
  margin: 0 auto;
  text-align: center;
}

.texto-bloco4 {
  padding: 60px 10%;
 
  margin: 0 auto;
  text-align: center;
}


.texto-bloco span {
  color: #ea7e12;
}

.texto-bloco p {
  font-size: 1.1rem;
  line-height: 1.5;  
  margin-bottom: 30px;
}

.texto-bloco ul {
  font-size: 1.2rem;
  list-style: none;
  line-height: 1.5;
  text-align: left;
  max-width: 400px;
  margin: 20px auto;
  }

  .texto-bloco2 ul {
    font-size: 1.2rem;
  list-style: none;
  line-height: 1.5;
  text-align: left;
  max-width: 400px;
  margin: 20px auto;
  }


/* ===== ÍCONES ===== */
.icons {
  font-size: 1.6rem;
  margin: 15px 0;
}

/* ===== RODAPÉ ===== */
footer {
background: linear-gradient(90deg, #1a406e 0%, #1c7bc4 100%);
  color: white;
  padding: 10px 10%;
}

.rodape-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}


/* ===== BOTÃO WHATSAPP ===== */
.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 25px;
  right: 25px;
  background-color: #25d366;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  z-index: 1100;
  transition: transform 0.2s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1);
}

.whatsapp-float img {
  width: 35px;
  height: 35px;
}


#contato {
  font-size: 0.8rem;
}

.icones {
margin-top:-250px;
margin-bottom:-220px;
}


/* ===== RESPONSIVIDADE ===== */
@media (max-width: 768px) {
  .menu-fixo {
    gap: 25px;
    font-size: 14px;
  }

.logo-scs {
  height: 45px;
  object-fit: contain;
}

.logo-blueway {
  height: 65px;
  object-fit: contain;
}

.logo-scs-rodape {
  height: 40px;
  object-fit: contain;
}

.logo-bw-rodape {
  height: 60px;
  object-fit: contain;
}

  .texto-bloco {
    padding: 40px 8%;
  }

.icones {
margin-top:-160px;
margin-bottom:-140px;
}

  .titulo1 {font-size: 1.6rem; color:#1c7bc4; font-weight: bolder;}
  .spam1 {font-size: 1.3rem; font-weight: lighter; }

  .titulo3 {font-size: 1.6rem; color:#1c7bc4; font-weight: bolder;}
  .spam3 {font-size: 1.6rem; font-weight: lighter; }

  .titulo4 {font-size: 1.5rem; color:#fff; font-weight: lighter;}

  .full-image {
    height: 45vh;
  }

    .full-image2 {
    height: 20vh;
  }
}

/* Container geral das seções de planos */
.conteudo-planos {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
}

/* Títulos principais */
.conteudo-planos .titulo1 {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 30px;
  color: #1c7bc4;
}

/* Grid base */
.grid-planos {
  display: grid;
  gap: 25px;
}

/* Duas colunas na primeira seção */
.grid-planos.duas-colunas {
  grid-template-columns: repeat(2, 1fr);
}

/* Quatro colunas na segunda seção */
.grid-planos.quatro-colunas {
  grid-template-columns: repeat(4, 1fr);
}

/* Itens individuais */
.plano-item {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 15px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.plano-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Imagens dos planos */
.plano-item img {
  width: 180px;       /* tamanho fixo */
  height: 112px;      /* proporcional ao limite 371x232px */
  object-fit: contain;
  border-radius: 8px;
  margin-bottom: 10px;
}

/* Texto interno */
.plano-texto h2 {
  font-size: 1.1rem;
  color: #005b8f;
  margin-bottom: 8px;
}

.plano-texto p {
  font-size: 0.95rem;
  color: #333;
  line-height: 1.4;
}

/* Responsividade */
@media (max-width: 1024px) {
  .grid-planos.quatro-colunas {
    grid-template-columns: repeat(2, 1fr);
  }

  .plano-item img {
    width: 160px;
    height: 100px;
  }
}

@media (max-width: 768px) {
  .grid-planos.duas-colunas,
  .grid-planos.quatro-colunas {
    grid-template-columns: 1fr;
  }

  .plano-item img {
    width: 150px;
    height: 95px;
  }

  .conteudo-planos .titulo1 {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .plano-item img {
    width: 130px;
    height: 82px;
  }
}