/*
Theme Name: redesim
Theme URI: https://www.redesimtelecom.com.br/
Author: R&F Digital
Author URI: https://www.instagram.com/rfdigital_of/
Description: Tema criado para o site da Redesim
Version: 1.0
*/

/* GLOBAL */

:root {
  --white-color: #fff;
  --primary-color: #2e3192;
  --hover-color: #202266;
  --footer-background: #2e3192;
  --footer-color: #fff;
  --secondary-color: #00adf1;
  --font-family: "Poppins", serif;
  --font-14: 0.875rem;
  --font-16: 1rem;
  --font-20: 1.25rem;
  --font-24: 1.5rem;
  --font-32: 2rem;
  --font-48: 3rem;
  --font-regular: 400;
  --font-medium: 500;
  --font-bold: 700;
  --transition: 0.3s;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: var(--font-family);
}

body {
  background-color: var(--white-color);
  color: var(--primary-color);
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

h1 {
  font-size: var(--font-48);
  line-height: 1.5;
}

p {
  line-height: 1.5;
}

img {
  max-width: 100%;
  height: auto;
}

.introducao-content-blog,
.introducao-content-consultoria,
.introducao-content-empresarial,
.introducao-content-planos,
.introducao-content-sobre,
.introducao-content-tecnologias {
  font-size: var(--font-24);
}

.negrito-p,
strong {
  font-weight: var(--font-medium);
}

.blue-text {
  color: var(--secondary-color);
}

.container {
  max-width: 1200px;
  padding: 0 2rem;
  margin: 0 auto;
}

.button {
  color: var(--white-color);
  background-color: var(--primary-color);
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  display: block;
  width: max-content;
  transition: var(--transition);
}

.button:hover {
  background-color: var(--hover-color);
}

.card {
  background-color: var(--white-color);
  box-shadow: 0 6px 10px 4px rgba(0, 0, 0, 0.15),
    0 2px 3px 0px rgba(0, 0, 0, 0.3);
  padding: 1.25rem;
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 400px) {
  html {
    font-size: 75%;
  }
}

table {
  border-collapse: collapse;
  width: 100%;
}

table, th, td {
  border: 1px solid #ccc; /* cor e espessura da borda */
}


/* HEADER */

header {
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
  gap: 1rem;
}

.menu-header a {
  font-size: var(--font-14);
}

.menu-header ul {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.menu-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.menu-header ul a,
footer .links ul a,
footer .termos ul a {
  position: relative;
}

.menu-header ul a::after,
footer .links ul a::after,
footer .termos ul a::after {
  position: absolute;
  content: "";
  height: 0.12rem;
  width: 0%;
  background-color: var(--primary-color);
  left: 50%;
  bottom: 0;
  transition: var(--transition);
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.menu-header ul a::before,
footer .links ul a::before,
footer .termos ul a::before {
  position: absolute;
  content: "";
  height: 0.12rem;
  width: 0%;
  background-color: var(--primary-color);
  right: 50%;
  bottom: 0;
  transition: var(--transition);
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.menu-header ul a:hover::after,
.menu-header ul a:hover::before,
.menu-header ul .current_page_item a::after,
.menu-header ul .current_page_item a::before,
footer .links ul a:hover::before,
footer .termos ul a:hover::before,
footer .links ul a:hover::after,
footer .termos ul a:hover::after {
  width: 50%;
}

.menu-button {
  display: none;
  position: relative;
  z-index: 9;
}

.menu-button .line {
  width: 3rem;
  height: 0.3rem;
  border-radius: 0.25rem;
  background-color: var(--primary-color);
  transition: 0.3s;
}

.menu-button.active .line {
  background-color: var(--white-color);
}

.menu-button .line:nth-child(n + 2) {
  margin-top: 0.5rem;
}

.menu-button.active .line:nth-child(1) {
  display: none;
}

.menu-button.active .line:nth-child(2) {
  transform: rotate(-45deg);
}

.menu-button.active .line:nth-child(3) {
  position: relative;
  transform: rotate(45deg);
  bottom: 0.8rem;
}

@media (max-width: 980px) {
  .menu-button {
    display: block;
  }

  .menu-header {
    display: none;
    gap: 0;
  }

  .menu-header ul {
    gap: 0;
  }

  .menu-header.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: var(--primary-color);
    z-index: 5;
    color: var(--white-color);
  }

  .menu-header.active ul {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .menu-header a {
    font-size: var(--font-32);
    display: block;
    padding: 0.25rem;
  }
}

@media (max-width: 500px) {
  .menu-header a {
    font-size: 0.875rem;
  }
  .menu-header a {
    font-size: var(--font-32);
    display: block;
    padding: 0.5rem;
  }
}

.toggle {
  background-color: #fff;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 0 50px 20px rgba(0, 0, 0, 0.1);
  line-height: 1;
}

.input {
  display: none;
}

.icon {
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  transition: transform 500ms;
}

.icon--moon {
  transition-delay: 200ms;
}

.icon--sun {
  transform: scale(0);
}

#switch:checked + .icon--moon {
  transform: rotate(360deg) scale(0);
}

#switch:checked ~ .icon--sun {
  transition-delay: 200ms;
  transform: scale(1) rotate(360deg);
}

/* FOOTER */

footer {
  background-color: var(--footer-background);
  color: var(--footer-color);
  padding-top: 1rem;
  padding-bottom: 1rem;
}

footer h3 {
  font-weight: var(--font-regular);
  font-size: var(--font-32);
}

footer .links a,
footer .termos a {
  font-size: var(--font-16);
}

footer .links ul a::after,
footer .links ul a::before,
footer .termos ul a::after,
footer .termos ul a::before {
  background-color: var(--footer-color);
}

.redes-footer svg {
  fill: var(--footer-color);
  width: 3.125rem;
  height: 3.125rem;
}

.redes-footer ul {
  display: flex;
  gap: 0.4rem;
}

.redes-footer svg,
.redes-footer rect,
.redes-footer path {
  transition: var(--transition);
}

.redes-footer svg:hover,
.redes-footer svg:hover rect,
.redes-footer svg:hover path {
  fill: var(--secondary-color);
}

.footer-top {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
}

.footer-top .first-part {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2rem;
}

.footer-top .second-part {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2rem;
  justify-items: center;
}

.footer-top .logos img {
  width: auto;
  height: 4rem;
  display: block;
}

.footer-top .logos div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-top .logos img:first-child {
  width: auto;
  height: 3rem;
}

.footer-top .logos div:last-child {
  margin-top: 0.5rem;
}

.footer-top .logos div:last-child img {
  height: 4rem;
}

.footer-top .termos {
  padding-bottom: 1rem;
}

.footer-separador {
  width: 100%;
  height: 0.03rem;
  background-color: var(--footer-color);
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
}

footer ul li {
  margin-top: 0.25rem;
}

.newsletter-footer h3 {
  margin-bottom: 0.35rem;
}

.newsletter-footer input,
.newsletter-footer button {
  height: 2.8rem;
  border-radius: 0.25rem;
  background-color: var(--footer-color);
  border: none;
  color: var(--footer-background);
  transition: var(--transition);
}

.newsletter-footer input {
  padding: 0 1rem;
  font-size: var(--font-16);
}

.newsletter-footer button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  cursor: pointer;
}

.newsletter-footer input:focus,
.newsletter-footer button:focus,
.newsletter-footer button:hover,
.newsletter-footer input:hover {
  outline: none;
  box-shadow: 0px 0px 0px 2px var(--footer-color);
}

.newsletter-footer :-ms-input-placeholder {
  color: var(--footer-background);
}

.newsletter-footer .form-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

.anatel-top-site {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.anatel {
  max-width: 12rem;
}

.footer-link {
  display: block;
  transition: var(--transition);
}

.footer-link:hover {
  text-decoration: underline;
}

.selo-top {
  display: block;
  width: 3.5rem;
}

@media (max-width: 980px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-top .first-part {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .footer-top .second-part {
    grid-template-columns: 1fr;
    gap: 1rem;
    justify-items: start;
  }

  .footer-bottom {
    flex-direction: column;
  }
}

@media (max-width: 500px) {
  .anatel-top-site {
    flex-wrap: wrap;
  }
}

/* HOME */

/* introducao */

.introducao-home img {
  width: 100%;
}

.banner-home video {
  width: 100%;
}

.introducao-content {
  padding-top: 5rem;
  padding-bottom: 5rem;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 1rem;
}

.introducao-content h1 {
  margin-bottom: 1rem;
}

.introducao-content p {
  margin-bottom: 1.25rem;
}

.introducao-content img {
  align-self: center;
}

.introducao-content p,
.introducao-content a {
  font-size: var(--font-24);
}

@media (max-width: 850px) {
  .introducao-content {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 2rem;
  }
}

/* banner-video */
.banner-home {
  padding-top: 5rem;
  padding-bottom: 5rem;
  overflow: hidden;
}

.banner-home video {
  width: 100%;
}

/* planos */

.planos-content {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.planos-content h1 {
  text-align: center;
  margin-bottom: 4rem;
}

.planos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-content: space-between;
  gap: 1rem;
}

.planos.combosim-planos {
  grid-template-columns: 1fr 1fr;
  justify-content: center;
  gap: 1rem;
}

.planos.combosim-planos .nome-plano,
.planos .nome-plano {
  background-color: var(--secondary-color);
  text-align: center;
  color: var(--white-color);
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  box-shadow: 0 6px 10px 4px rgba(0, 0, 0, 0.15),
    0 2px 3px 0px rgba(0, 0, 0, 0.3);
  padding: 1.25rem;
}

.plano-combo-content,
.planos .plano-content {
  background-color: var(--white-color);
  box-shadow: 0 6px 10px 4px rgba(0, 0, 0, 0.15),
    0 2px 3px 0px rgba(0, 0, 0, 0.3);
  padding: 1.25rem;
  border-radius: 0 0.25rem 0.25rem 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.familia-sim-plano {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.1rem;
  margin-bottom: .5rem;
}


.servico-total .paramount-icon {
  max-width: 12rem;
}

.servico-total .beneficios {
  margin-bottom: 2rem;
}
.plano h2 {
  font-size: var(--font-48);
  font-weight: var(--font-medium);
}

.plano .preco {
  display: flex;
  align-items: center;
  align-self: start;
}

.plano .preco p {
  font-size: var(--font-32);
  font-weight: var(--font-medium);
  margin-top: 0.25rem;
}

.plano .obs-preco {
  margin-bottom: 1.3rem;
  align-self: start;
}

.plano .beneficios {
  align-self: start;
}

.plano.melhor-oferta {
  position: relative;
}

.plano.melhor-oferta::before {
  background-color: var(--primary-color);
  content: "Melhor Oferta";
  color: var(--white-color);
  width: 7.188rem;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0.1rem 0.5rem;
  position: absolute;
  top: 0;
  right: 0;
  border-bottom-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  opacity: 0;
  transform: translateY(-0.1rem);
  animation: fadeInDrop var(--transition) ease-out forwards;
}

@keyframes fadeInDrop {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.plano.melhor-oferta:hover::before {
  display: flex;
}

.beneficios li {
  display: flex;
  align-items: start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.plano .button {
  font-size: var(--font-24);
  margin-top: 0.8rem;
  text-align: center;
  width: 100%;
}

.card li a {
  transition: var(--transition);
}

.card li a:hover {
  text-decoration: underline;
}

.planos.disable {
  display: none;
}

.planos.streaming .card .button {
  font-size: var(--font-24);
  margin-top: 0.8rem;
}

.planos.streaming .card img {
  margin-bottom: 1rem;
  width: 10rem;
}

.planos.streaming .canais-ao-vivo {
  align-self: center;
}

.canais-ao-vivo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.188rem;
  width: 100%;
}

.canais-ao-vivo-preview {
  margin-top: 0.313rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 3rem 3rem;
  justify-items: center;
  align-items: center;
  gap: 0.25rem;
}

.canais-ao-vivo-preview img {
  max-width: 3rem;
}

.canais-ao-vivo-preview {
  width: 100%;
}

.canais-ao-vivo .linha {
  flex: 1;
  height: 0.063rem;
  background-color: var(--primary-color);
  border-radius: 0.25rem;
}

.canais-ao-vivo p {
  margin: 0;
  white-space: nowrap;
}

.planos-select button {
  background: none;
  border: none;
  font-size: var(--font-20);
  color: inherit;
  padding: 0.5rem 1rem;
  border-radius: 5rem;
  cursor: pointer;
}

.planos-select button.active {
  border: 0.1rem solid var(--primary-color);
}

.planos-select {
  display: flex;
  position: relative;
  gap: 2rem;
  align-items: center;
  margin: 0 auto;
  margin-top: -2rem;
  margin-bottom: 4.25rem;
  padding: 0.5rem 1rem;
  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.15), 0px 1px 18px rgba(0, 0, 0, 0.1),
    0px 3px 5px rgba(0, 0, 0, 0.2);
  width: max-content;
  border-radius: 5rem;
}

.planos-select img {
  position: absolute;
  right: -12rem;
  width: 10rem;
}

.planos-select img.disable {
  display: none;
}

@media (max-width: 980px) {
  .planos-select img {
    display: none;
  }
}

/* lista canais */

.lista-canais-background {
  display: none;
}

.lista-canais-background.active {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
  padding: 1rem;
}

.lista-canais {
  background-color: var(--primary-color) ;
  color: var(--white-color);
  border-radius: 0.25rem;
  width: 30rem;
}

.lista-canais header {
  box-shadow: none;
  width: 100%;
}

.lista-canais header {
  padding: 0.5rem 0.5rem;
  background-color: var(--white-color);
  display: flex;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  justify-content: space-between;
  align-items: center;
  color: var(--primary-color) ;
}

.lista-canais-content {
  width: 100%;
  padding: 0 0.5rem;
  border-radius: 0.25rem;
  max-height: 500px;
  overflow-y: auto;
}

.lista-canais-content img {
    max-width: 4rem;
}

.lista-canais-button {
	cursor: pointer;
	text-decoration: underline;
}

.close-lista {
  cursor: pointer;
}

.canais-grid {
  display: none;
  padding: 0.5rem 0.5rem;
  opacity: 0;
  transform: translateY(-0.1rem);
  animation: fadeInDrop var(--transition) ease-out forwards;
}

.dropdown-canais {
  transition: var(--transition);
}

.dropdown-canais.active {
  transform: rotate(180deg);
}

.canais-grid.active {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
}

.menu-canais-expandir {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  border-radius: 0.25rem;
}

.menu-canais {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  background-color: var(--white-color);
  color: var(--primary-color);
  border-radius: 0.25rem;
}

/* conecte */

.conecte-content-home {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 1rem;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.tecnologias li,
.conecte-home p {
  font-size: var(--font-24);
}

.tecnologias li {
  display: flex;
  gap: 0.5rem;
}

.contact-content img {
  align-self: center;
}

.conecte-content h1 {
  margin-bottom: 1rem;
}

.conecte-content p {
  margin-bottom: 1.2rem;
}

@media (max-width: 850px) {
  .conecte-content {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 2rem;
  }
	
	.conecte-content-home {
		grid-template-columns: 1fr;
    justify-items: center;
    gap: 2rem;
	}
	
}

/* diferenciais */

.diferenciais-content h1 {
  text-align: center;
  margin-bottom: 4rem;
}

.diferenciais-content {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.numeros {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem;
}

.numeros h2 {
  font-size: var(--font-48);
  font-weight: var(--font-medium);
  text-align: center;
}

.numeros p {
  font-size: var(--font-24);
  font-weight: var(--font-medium);
  text-align: center;
}

.swiper-parceiros {
  max-width: 100%;
  overflow: hidden;
  padding: 20px 0;
}

.parceiros .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 5rem;
}

.parceiros {
  padding-bottom: 5rem;
}

.parceiros .swiper-slide img {
  max-width: 150px;
  height: auto;
  filter: grayscale(100%);
  transition: filter 0.3s ease-in-out;
}

.parceiros .swiper-slide img:hover {
  filter: grayscale(0);
}

@media (max-width: 900px) {
  .numeros {
    grid-template-columns: 1fr 1fr;
  }

  .numeros div:last-child {
    grid-column: span 2;
  }
}

/* SOBRE */

.introducao-content-sobre {
  padding-top: 5rem;
  padding-bottom: 5rem;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 1rem;
}

.introducao-content-sobre img {
  align-self: center;
}

@media (max-width: 850px) {
  .introducao-content-sobre {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 2rem;
  }
}

/* qualidades */

.qualidades-content {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.qualidades-content h1 {
  text-align: center;
}

.qualidades-content h2 {
  font-size: var(--font-24);
  font-weight: var(--font-medium);
  margin-bottom: 0.25rem;
  margin-top: 0.5rem;
}

.qualidades-grid {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  gap: 1rem;
  row-gap: 3rem;
}

.qualidades-grid img {
  width: 7.81rem;
  height: 7.81rem;
}

.qualidade {
  text-align: center;
}

@media (max-width: 750px) {
  .qualidades-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 450px) {
  .qualidades-grid {
    grid-template-columns: 1fr;
  }
}

/* PLANOS */

/* introducao */

.introducao-content-planos {
  padding-top: 5rem;
  padding-bottom: 5rem;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 1rem;
  align-items: center;
}

.introducao-content-planos img {
  align-self: center;
}

@media (max-width: 850px) {
  .introducao-content-planos {
    grid-template-columns: 1fr;

    justify-items: center;
    gap: 2rem;
  }
}

/* planos */

.planos-content {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.planos-content h1 {
  text-align: center;
  margin-bottom: 4rem;
}

.planos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
  justify-content: space-between;
  gap: 1rem;
}

.plano h2 {
  font-size: var(--font-48);
  font-weight: var(--font-medium);
}

.plano h2.nome-plano {
  font-size: var(--font-24);
}

.plano .preco {
  display: flex;
  align-items: center;
}

.plano .preco p {
  font-size: var(--font-32);
  font-weight: var(--font-medium);
  margin-top: 0.25rem;
}

.beneficios li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.plano .button {
  font-size: var(--font-24);
  margin-top: 0.8rem;
}

.card li a {
  transition: var(--transition);
}

.card li a:hover {
  text-decoration: underline;
}

.planos.disable {
  display: none;
}

.planos.streaming .card .button {
  font-size: var(--font-24);
  margin-top: 0.8rem;
}

.planos.streaming .card img {
  margin-bottom: 1rem;
  width: 10rem;
}

.planos.streaming .card .mais-detalhes {
  font-size: var(--font-20);
  margin-top: 0.5rem;
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.planos-select button {
  background: none;
  border: none;
  font-size: var(--font-20);
  color: inherit;
  padding: 0.5rem 1rem;
  border-radius: 5rem;
  cursor: pointer;
}

.planos-select button.active {
  border: 0.1rem solid var(--primary-color);
}

.planos-select {
  display: flex;
  position: relative;
  gap: 2rem;
  align-items: center;
  margin: 0 auto;
  margin-top: -2rem;
  margin-bottom: 4.25rem;
  padding: 0.5rem 1rem;
  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.15), 0px 1px 18px rgba(0, 0, 0, 0.1),
    0px 3px 5px rgba(0, 0, 0, 0.2);
  width: max-content;
  border-radius: 5rem;
}

.planos-select img {
  position: absolute;
  right: -12rem;
  width: 10rem;
}

.planos-select img.disable {
  display: none;
}

@media (max-width: 980px) {
  .planos-select img {
    display: none;
  }
}

.tv-select {
  grid-column: span 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  overflow: hidden;
  max-width: 1000px;
  margin: 0 auto;
  margin-bottom: 2rem;
}

.tv-select-container {
  position: relative;
}

.tv-select-container .prev-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  padding: 0.25rem;
  cursor: pointer;
}

.tv-select-container .next-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  padding: 0.25rem;
  cursor: pointer;
}

.tv-select .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tv-select img {
  width: 15rem;
  opacity: 0.4;
  transition: var(--transition);
  cursor: pointer;
}

.tv-select img.active {
  opacity: 1;
}

.tv-select img:hover {
  opacity: 1;
}

.tv-select.disable {
  display: none;
}

@media (max-width: 1180px) {
  .planos {
    grid-template-columns: 1fr 1fr;
    justify-content: space-around;
  }

  .tv-select {
    grid-column: span 2;
    justify-content: center;
    column-gap: 4rem;
    max-width: 65%;
  }
}

@media (max-width: 620px) {
  .planos {
    grid-template-columns: 1fr;
  }

  .tv-select {
    grid-column: span 1;
  }

  .planos-select button {
    font-size: var(--font-14);
  }
}
/* servicos */

.servicos-content-planos {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.servicos-content-planos h1 {
  text-align: center;
  margin-bottom: 2rem;
}

.servicos-content-planos p {
  font-size: var(--font-24);
  text-align: center;
}

.servicos-content-planos p:nth-child(2) {
  margin-top: 0.625rem;
}

.servicos-adicionais {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
  gap: 2rem;
}

.servicos-adicionais p {
  max-width: 55ch;
}

.servicos-adicionais .card {
  width: 19.5rem;
}

@media (max-width: 1080px) {
  .servicos-grid {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .servicos-adicionais .card {
    width: 19.5rem;
  }
}

@media (max-width: 730px) {
  .servicos-adicionais {
    grid-template-columns: auto;
  }
}

.indique-section .container {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.indique-section h1 {
  text-align: center;
  margin-bottom: 2rem;
}

.indique-section p {
  font-size: var(--font-24);
  text-align: center;
  margin-bottom: 1.2rem;
}

.indique-section .button {
  margin: 0 auto;
  font-size: var(--font-32);
}

/* BLOG */

/* introducao */

.introducao-content-blog {
  padding-top: 5rem;
  padding-bottom: 5rem;
  text-align: center;
}

.introducao-content-blog h1 {
  max-width: 25ch;
  margin: 0 auto;
}

.introducao-content-blog p {
  max-width: 55ch;
  margin: 0 auto;
  margin-top: 0.5rem;
}

/* postagens */

.postagens {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.postagens-content {
  margin-bottom: 1rem;
}

.postagens-content h1 {
  text-align: center;
  margin-bottom: 2.2rem;
}

.posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.posts .card h2 {
  font-size: var(--font-24);
  font-weight: var(--font-medium);
  margin-bottom: 0.25rem;
  margin-top: 0.25rem;
}

.posts .card p {
  align-self: center;
  font-size: var(--font-14);
}

.paginacao {
  margin: 0 auto;
  margin-top: 3rem;
  width: max-content;
}

.page-numbers {
  transition: var(--transition);
  font-size: var(--font-24);
  padding: 0.25rem;
}

.page-numbers.prev,
.page-numbers.next {
  display: none;
}

.page-numbers:hover {
  color: var(--secondary-color);
}

.page-numbers.current {
  color: var(--secondary-color);
}

/* single post */

.post-section .container {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.post-section p {
  font-size: 1.5rem;
}

.imagem-post-container {
  position: relative;
  width: 100%;
  height: 12.75rem;
  overflow: hidden;
  border-radius: 0.25rem;
}

.post-section .imagem-post-container {
  height: 24rem;
}

.imagem-post-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.imagem-post-container {
  box-shadow: 0 0.725rem 1.975rem rgba(0, 0, 0, 0.1);
  border-radius: 0.25rem 0.25rem 0 0;
}

.post-section .post-title {
  box-shadow: 0 0.725rem 1.975rem rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  border-radius: 0 0 0.25rem 0.25rem;
  margin-bottom: 2rem;
}

.post-section .post-date {
  text-align: center;
}

.post-section h1 {
  font-size: 4rem;
  text-align: center;
}

.post-section h1,
.post-section h2,
.post-section h3,
.post-section h4,
.post-section h5,
.post-section h6 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.post-content h1 {
  font-size: 3rem;
}

.post-section h2 {
  font-size: 2.25rem;
}

.post-section h3 {
  font-size: 2rem;
}

.post-section h4 {
  font-size: 1.875rem;
}

.post-section h5 {
  font-size: 1.575rem;
}

.post-section h6 {
  font-size: 1.25rem;
}

.post-section p,
.post-section li {
  margin-top: 1rem;
}

.post-section a {
  text-decoration: underline;
}

.post-section .voltar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  text-decoration: none;
}

.post-section svg {
  transform: rotate(180deg);
  width: 1.2rem;
  height: 1.2rem;
}

.addtoany_list svg {
  transform: initial;
}

.addtoany_content {
  margin-top: 4rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.25rem;
}

.addtoany_header {
  font-size: 1.5rem;
  text-transform: uppercase;
}

.post-content img {
    width: 100%;
	margin: 0 auto;
}

.post-content svg {
  max-width: 9rem;
  height: auto;
}

.post-content .icon-title {
  width: 5rem;
  transform: initial;
}

.post-content .icon {
  width: 1.25rem;
  transform: initial;
}

.post-content h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.post-content .image-post {
  max-width: 100%;
  height: auto;
  margin-top: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.1);
  border-radius: 0.25rem;
}

.article-blog .data {
  margin-top: 0.625rem;
}

.article-blog .resumo {
  margin-bottom: 0.4rem;
}

.article-blog h2 {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}

.article-blog a {
  color: var(--primary-color);
  font-weight: var(--font-medium);
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.article-blog .leia-mais svg {
  width: 1.2rem;
  transition: var(--transition);
}

.article-blog .leia-mais:hover svg {
  transform: translateX(0.2rem);
}

.busca-post {
  padding-bottom: 2rem;
  display: flex;
  gap: 1rem;
}

.busca-button,
#busca {
  height: 2.8rem;
  border-radius: 0.25rem;
  background-color: var(--footer-color);
  border: solid 0.1rem var(--primary-color);
  color: var(--footer-background);
  transition: var(--transition);
}

#busca {
  padding: 0 1rem;
  font-size: var(--font-16);
}

.busca-button {
  background-color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  cursor: pointer;
}

#busca:focus,
.busca-button:focus,
.busca-button:hover,
#busca:hover {
  outline: none;
  box-shadow: 0px 0px 0px 2px var(--primary-color);
}

#busca :-ms-input-placeholder {
  color: var(--footer-background);
}

.post-section ul {
  list-style: circle;
}

.post-section ol {
  list-style: decimal;
}
.post-section li {
  margin-left: 2rem !important;
  font-size: 1.5rem;
}

.post-section .list-none {
  list-style: none;
}

/* outros posts section */

.outros-posts-section h1 {
  width: 100%;
  text-align: center;
  margin-bottom: 2.2rem;
}

.grid-posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 5rem;
}

.grid-posts .card,
.posts .card {
  box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.1);
  transition: var(--transition);
  gap: 0.25rem;
}

.grid-posts .card:hover,
.posts .card:hover {
  transform: scale(1.05);
}

@media (max-width: 900px) {
  .posts {
    grid-template-columns: repeat(2, 1fr);
  }

  

  .post-title h1 {
    font-size: 3rem;
  }
}
@media (max-width: 600px) {
  .posts {
    grid-template-columns: 1fr;
  }

  .grid-posts {
    grid-template-columns: 1fr;
  }
}

/* CONSULTORIA */

/* introducao */

.introducao-content-consultoria {
  padding-top: 5rem;
  padding-bottom: 5rem;
  text-align: center;
}

.introducao-content-consultoria h1 {
  max-width: 25ch;
  margin: 0 auto;
}

.introducao-content-consultoria p {
  max-width: 55ch;
  margin: 0 auto;
  margin-top: 0.5rem;
}

/* grid */

.consultoria-grid {
  padding-top: 5rem;
  padding-bottom: 5rem;
  display: grid;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  grid-template-columns: 2fr 1fr;
  font-size: var(--font-20);
}

@media (max-width: 850px) {
  .consultoria-grid {
    grid-template-columns: 1fr;
  }
}

/* EMPRESARIAL */

/* introducao */

.introducao-content-empresarial {
  padding-top: 5rem;
  padding-bottom: 5rem;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 1rem;
}

.introducao-content-empresarial img {
  align-self: center;
}

@media (max-width: 850px) {
  .introducao-content-empresarial {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 2rem;
  }
}

/* servicos */

.servicos-content {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.servicos-content h1 {
  text-align: center;
}

.servicos-content h2 {
  font-size: var(--font-24);
  font-weight: var(--font-medium);
  margin-bottom: 0.25rem;
  margin-top: 0.5rem;
}

.servicos-empresarial-grid {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  gap: 1rem;
  row-gap: 3rem;
}

.servicos-empresarial-grid img {
  width: 7.81rem;
  height: 7.81rem;
}

.servico {
  text-align: center;
}

@media (max-width: 750px) {
  .servicos-empresarial-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 450px) {
  .servicos-empresarial-grid {
    grid-template-columns: 1fr;
  }
}

/* conecte-se */

.conecte-content {
  text-align: center;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.conecte-content h1 {
  font-size: var(--font-48);
  margin-bottom: 1.8rem;
}

.conecte-content p {
  font-size: var(--font-24);
  margin-bottom: 1.2rem;
}

.conecte-content .button {
  margin: 0 auto;
  font-size: var(--font-32);
}

.form {
  min-height: 86rem;
  width: 40rem;
}
@media (max-width: 600px) {
  .form {
    min-height: 90rem;
  }
}

@media (max-width: 500px) {
  .form {
    min-height: 100rem;
  }
}

@media (max-width: 440px) {
  .form {
    min-height: 110rem;
  }
}

@media (max-width: 400px) {
  .form {
    min-height: 140rem;
  }
}

@media (max-width: 380px) {
  .form {
    min-height: 150rem;
  }
}

@media (max-width: 352px) {
  .form {
    min-height: 160rem;
  }
}

@media (max-width: 330px) {
  .form {
    min-height: 180rem;
  }
}

/* IMAGENS */

.imagens-section {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.imagens-section div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  justify-content: center;
  align-items: center;
}

@media (max-width: 600px) {
  .imagens-section div {
    grid-template-columns: 1fr;
  }
}

/* TECNOLOGIAS */

/* introducao */

.introducao-content-tecnologias {
  padding-top: 5rem;
  padding-bottom: 5rem;
  text-align: center;
}

.introducao-content-tecnologias h1 {
  max-width: 25ch;
  margin: 0 auto;
}

.introducao-content-tecnologias p {
  max-width: 55ch;
  margin: 0 auto;
  margin-top: 0.5rem;
  font-size: var(--font-24);
}

/* tecnologias */

.nossas-tecnologias-content {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.nossas-tecnologias-content h1 {
  text-align: center;
  margin-bottom: 2.2rem;
}

.tecnologias-grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: space-evenly;
  gap: 1rem;
}

.tecnologias-grid .card h2 {
  align-self: start;
  font-size: var(--font-32);
  margin-bottom: 0.25rem;
}

.card .beneficios li {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
}

@media (max-width: 850px) {
  .tecnologias-grid {
    grid-template-columns: auto;
  }
}

/* TERMOS */

.termos .container {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.termos p {
  font-size: var(--font-16);
}

.termos h1:nth-child(n + 2) {
  margin-top: 2rem;
}

.termos h2 {
  margin-top: 1rem;
  font-size: var(--font-32);
}

.termos h3 {
  margin-bottom: 1rem;
  margin-top: 1rem;
  font-size: var(--font-24);
}

.termos p,
.termos li {
  margin-top: 0.5rem;
}

.termos h1 {
  margin-bottom: 0.5rem;
}

/* VAGAS */

.vagas-content {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.vagas-content h1 {
  text-align: center;
  margin-bottom: 2.2rem;
}

.vaga {
  color: var(--white-color);
  background-color: var(--primary-color);
  padding: 2rem;
  display: flex;
  justify-content: space-between;
  border-radius: 0.25rem;
}

.vaga:nth-child(2) {
  margin-top: 1.5rem;
}

.vaga .button {
  background-color: var(--white-color);
  color: var(--primary-color);
  align-self: start;
}

.vaga h2 {
  margin-bottom: 1rem;
}

.vaga p {
  font-weight: 200;
}

@media (max-width: 350px) {
  .vaga {
    flex-direction: column;
  }

  .vaga .button {
    margin-top: 1rem;
  }
}

/* página da vaga */

.vaga-section .container {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.vaga-section p {
  font-size: var(--font-16);
}

.vaga-section h2 {
  margin-top: 1rem;
  font-size: var(--font-32);
}

.vaga-section h3 {
  margin-bottom: 1rem;
  margin-top: 1rem;
  font-size: var(--font-24);
}

.sobre-vaga p,
.sobre-vaga li {
  margin-top: 0.5rem;
}

.vaga-section .button {
  margin-top: 2rem;
}

.vaga-section h1 {
  margin-bottom: 0.5rem;
}

.info-trabalho {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.vaga-section .voltar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.vaga-section svg {
  transform: rotate(180deg);
  width: 1.2rem;
  height: 1.2rem;
}

.form {
  min-height: 82rem;
  margin-bottom: 5rem;
  width: 40rem;
}

@media (max-width: 500px) {
  .form {
    min-height: 85rem;
  }
}

@media (max-width: 440px) {
  .form {
    min-height: 90rem;
  }
}

@media (max-width: 400px) {
  .form {
    min-height: 120rem;
  }
}

@media (max-width: 380px) {
  .form {
    min-height: 130rem;
  }
}

@media (max-width: 352px) {
  .form {
    min-height: 140rem;
  }
}

@media (max-width: 330px) {
  .form {
    min-height: 150rem;
  }
}

/* VELOCIDADE */

.velocidade .container {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.velocidade h1 {
  text-align: center;
  margin-bottom: 2.2rem;
}

.velocidade iframe {
  height: 40rem;
  box-shadow: none;
}

@media (max-width: 400px) {
  .velocidade iframe {
    height: 52rem;
  }
}