* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
  border: none;
  transition: 0.2s linear;
}

:root {
  --CorLaranja: #ff5d05;
  --CorBranca: #ffffff;
  --CorPreta: #000000;
  --CorCinza: #808080;
}

body {
  font-family: "Inter", Sans-serif;
}

.interface {
  max-width: 1280px; /* Tamanho Máximo da Largura */
  padding: 0 4%; /*cima e baixo = 0 e lados 4% para quando tela estive pequena, não fica colado */
  margin: 0 auto; /*cima e baixo = 0 e lados toda vez que está em auto ele centraliza no meio tudo */
}

section {
  scroll-margin-top: 70px; /* Espaço acima da seção ao rolar, evita que o menu fixo cubra o conteúdo quando clica no #menu de cada section */
}

/* COMEÇO DO ESTILO DO HEADER */
header {
  position: fixed;
  padding: 10px 0; /* cima e baixo é 5 e 0 nos lados */
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background-color: #ffe500;
}

header > .interface {
  /* Esse Sinal(>) é para aplica apenas na classe pai .interface dentro do header, e sem o (>) ia aplica tbm em todos filhos */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7%;
}

header .logo-header img {
  width: 170px;
}

header nav.menu-desktop ul {
  display: flex;
  align-items: center;
  gap: 15px;
}

header nav.menu-desktop ul .item a {
  color: var(--CorPreta);
  font-weight: bold;
  font-size: 1.2rem;
}

header nav.menu-desktop ul .item a:hover {
  color: var(--CorPreta);
  border-bottom: solid #4b4b4b 4px;
  padding-bottom: 7px;
  font-size: 1.3rem;
}

.menu-desktop button {
  background-image: linear-gradient(90deg, #494b50 0%, #1c1d22 100%);
  color: var(--CorBranca);
  padding: 12px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 800;
  margin-left: 50px;
}

.menu-desktop button:hover {
  background-image: linear-gradient(90deg, #595f70 0%, #2a2f46 100%);
}

/* COMEÇO DO ESTILO MENU MOBILE */
.btn-abrir-menu {
  display: none;
}

.btn-abrir-menu i {
  color: var(--CorLaranja);
  font-size: 40px;
  font-weight: 900;
  cursor: pointer;
}

.menu-mobile {
  background-color: #000000ba;
  height: 100vh;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 99999;
  width: 0%;
  overflow: hidden; /* Esconde qualquer conteúdo que ultrapasse o tamanho do elemento */
  transition: 0.3s;
}

.menu-mobile.abrir-menu {
  width: 70%;
}

.menu-mobile.abrir-menu ~ .overlay-menu {
  display: block;
}

.menu-mobile .btn-fechar i {
  color: var(--CorLaranja);
  font-size: 30px;
  cursor: pointer;
}

.menu-mobile .btn-fechar {
  padding: 20px 5%;
}

.menu-mobile nav ul {
  text-align: right;
}

.menu-mobile nav ul li a {
  color: var(--CorBranca);
  font-size: 20px;
  padding: 15px 4%; /* cima e baixo 20px & lados 4% */
  display: block; /* Faz o elemento ocupar toda a largura disponível e quebrar linha */
  text-transform: capitalize;
}

.menu-mobile nav ul li a:hover {
  background-color: var(--CorLaranja);
}

.overlay-menu {
  background-color: #000000b1;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 88888;
  display: none;
}

.btn-redes {
  display: flex;
  align-items: center;
  justify-content: right;
  gap: 10%;
  padding: 30px 4%;
}

.btn-redes li a i {
  font-size: 40px;
  color: var(--CorBranca);
}

.btn-redes li a i:hover {
  color: var(--CorLaranja);
}

/* COMEÇO DO ESTILO DA SECTION --> hero */
section.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin-top: 3%;
  height: 100vh;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../img/barber/fundo.jpg");
  background-size: cover; /* cobre toda a área */
  background-repeat: no-repeat; /* evita repetição */
  background-position: center 40%;
}
/*
  clamp(min, ideal, max)

  2rem   → tamanho mínimo da fonte (usado em telas pequenas, como celular)
  5vw    → valor fluido que cresce ou diminui conforme a largura da tela
  4.7rem → tamanho máximo da fonte (usado em telas grandes / desktop)
  */

span {
  font-family: "Unbounded", Sans-serif;
  font-size: 80px;
  font-weight: 800;
  letter-spacing: 10px;
  word-spacing: 0px;
  color: #ffe500;
}

section.hero p {
  font-family: "Poppins", Sans-serif;
  font-size: 40px;
  font-weight: 100;
  letter-spacing: 5.5px;
  color: white;
}

section.hero button {
  background-color: transparent;
  font-size: 1rem;
  border: solid var(--CorBranca);
  padding: 0.8rem 2rem;
  border-radius: 2rem;
  margin-top: 1rem;
  text-transform: uppercase;
  color: var(--CorBranca);
  cursor: pointer;
}

section.hero button:hover {
  color: var(--CorLaranja);
  border: solid var(--CorLaranja);
}

/* Estilo apenas referente a pulsação do botão */
.pulse {
  animation: pulse 1s infinite;
}

/* atribuição a variavel pulse acima */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.07); /* aumenta um pouco */
  }
  100% {
    transform: scale(1);
  }
}

/* COMEÇO DO ESTILO DA SECTION --> minhas-qualidades */
section.minhas-qualidades {
  background-color: #ffe500;
}

section.minhas-qualidades .interface {
  display: flex;
  text-align: center;
  justify-content: space-around;
  color: black;
  padding: 2% 0;
}

section.minhas-qualidades .interface .item i {
  font-size: clamp(10px, 50px, 80px);
}

section.minhas-qualidades .interface h2 {
  font-size: clamp(14px, 2vw, 22px);
}
/* Define o tamanho do texto de forma fluida:
   - 14px é o tamanho mínimo (nunca ficará menor que isso)
   - 2vw é o tamanho ideal (escala conforme a largura da tela)
   - 22px é o tamanho máximo (nunca ficará maior que isso)
*/

/* COMEÇO DO ESTILO DA SECTION --> criacao-de-sites */
section.criacao-de-sites .interface {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 2%;
}

section.criacao-de-sites button {
  background-color: var(--CorLaranja);
  font-size: 1rem;
  border: solid var(--CorBranca);
  padding: 0.8rem 2rem;
  border-radius: 2rem;
  margin-top: 0.2rem;
  text-transform: uppercase;
  color: var(--CorBranca);
  cursor: pointer;
}

section.criacao-de-sites button:hover {
  background-color: transparent;
  color: var(--CorLaranja);
  border: solid var(--CorLaranja);
}

section.criacao-de-sites h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

section.criacao-de-sites p {
  margin: 1rem 0rem;
  text-align: justify;
  line-height: 2rem;
}

section.criacao-de-sites #section-texto {
  max-width: 500px;
}

.img-criacao-de-sites {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(500px, 100%);
}

.img-criacao-de-sites img {
  width: 100%;
  border-radius: 15px;
}

/* COMEÇO DO ESTILO DA SECTION --> servicos-oferecidos */
section.servicos-oferecidos {
  background-color: var(--CorLaranja);
  padding: 2% 0;
  color: var(--CorBranca);
}

section.grid-servicos-oferecidos {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 colunas */
  grid-template-rows: 1fr 1fr; /* 2 linhas */
  gap: 2rem;
  row-gap: 4rem;
  padding: 3% 0;
}

.grid-servicos-oferecidos .item {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center; /* ser não tive isso o tamanho do botão não altera*/
}

.grid-servicos-oferecidos .item i {
  font-size: 5.5rem;
}

section.servicos-oferecidos #h2 {
  font-size: 1.8rem;
  margin-bottom: 3%;
}

section.servicos-oferecidos .interface {
  text-align: center;
}

.grid-servicos-oferecidos .item a {
  color: var(--CorPreta);
  text-align: center;
  padding: 7px 20px;
  border-radius: 8px;
  background-color: var(--CorBranca);
  border: solid 1px var(--CorPreta);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
}

.grid-servicos-oferecidos .item a:hover {
  background-color: var(--CorPreta);
  color: var(--CorBranca);
  transform: scale(1.1);
}
/* COMEÇO DO ESTILO DA SECTION --> PROJETOS REALIZADOS */
section.projetos-realizados {
  background-color: var(--CorBranca);
  padding: 2% 0%;
  overflow-x: hidden;
}

section.projetos-realizados h2 {
  text-align: center;
  font-size: 35px;
}

section.projetos-realizados p {
  text-align: center;
  font-size: 21px;
  margin-bottom: 30px;
}

section.projetos-realizados .grid-projetos {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 colunas */
  grid-template-rows: 1fr 1fr; /* 2 linhas */
  gap: 2rem;
  row-gap: 2rem;
}

.projetos-realizados .item {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
}

section.projetos-realizados .grid-projetos a {
  color: var(--CorPreta);
  text-align: center;
  padding: 9px 20px;
  border-radius: 10px;
  background-color: transparent;
  border: solid 1px var(--CorPreta);
  font-size: 1.1rem;
  font-weight: 500;
  cursor: pointer;
}

section.projetos-realizados .grid-projetos a:hover {
  background-color: var(--CorPreta);
  color: var(--CorBranca);
  transform: scale(1.1);
}

.portfolio-frame {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1 / 1; /* mantém proporção */
}

.img-portfolio {
  width: 100%;
  height: 56%;

  background-size: cover;
  background-position: 100% 0;
  transition: background-position 5s;

  position: absolute;
  top: 9.7%; /*quanto menos ele sobe */
  left: 0;

  z-index: 1;
}

.portfolio-frame:hover .img-portfolio {
  background-position: 100% 100%;
}

.overlay {
  cursor: pointer;
  position: absolute;
  width: 100%;
  height: 56%;

  top: 9.7%;
  left: 0;

  background-color: #0000005c;

  opacity: 0;
  transition: 0.5s;
  z-index: 2;
}

.portfolio-frame:hover .overlay {
  opacity: 1;
}

.img-macbook {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: contain;
  pointer-events: none;

  transform: scale(1.47); /* aumente aqui */
  z-index: 3;
}

/* COMEÇO DO ESTILO DA SECTION --> Por que escolher a JunTech? */
section.por-que-escolher-a-juntech {
  background-color: var(--CorLaranja);
  color: var(--CorBranca);
}

.box-com-informacoes {
  padding: 40px 60px;
  text-align: center;
}

.por-que-escolher {
  position: relative;
  overflow: hidden;
  padding: 3% 3% 4%;
}

section.por-que-escolher h2.titulo {
  font-size: 32px;
  text-align: center;
  margin-bottom: 1%;
}
/*
section.por-que-escolher p.sub-titulo {
  font-size: 20px;
  text-align: center;
}
*/
.por-que-escolher .box-com-informacoes {
  cursor: grab;
}

.por-que-escolher .box-com-informacoes:active {
  cursor: grabbing;
}

.por-que-escolher i {
  font-size: 90px;
  color: var(--CorBranca);
}

section.por-que-escolher h3 {
  font-size: 30px;
  margin-bottom: 1%;
}

section.por-que-escolher p.palagrafo-do-texto {
  font-size: 20px;
  text-align: center;
  margin-bottom: 30px;
}

.margin-final {
  margin-bottom: 3%;
}

/* COMEÇO DO ESTILO DA SECTION --> Clientes Satisfeitos */
section.depoimentos {
  max-width: 1280px; /* Tamanho Máximo da Largura */
  padding: 3% 3% 4%;
  margin: 0 auto; /*cima e baixo = 0 e lados toda vez que está em auto ele centraliza no meio tudo */
}

.depoimentos {
  position: relative;
  overflow: hidden;
}

.depoimentos .slide {
  padding: 40px 60px;
  cursor: grab;
  /*margin-left: 2%;*/
}

.depoimentos .slide:active {
  cursor: grabbing;
}

.depoimentos i {
  font-size: 60px;
  color: var(--CorLaranja);
}

.depoimentos p.depoi-txt {
  font-size: 18px;
  font-weight: 300;
  margin-bottom: 30px;
}

.slide .person {
  display: flex;
  align-items: center;
  gap: 20px;
}

.slide .person img {
  width: 80px;
  height: 80px;
}

.slide .person p.nome-person {
  font-size: 18px;
  font-weight: 600;
}

.slide .person p.profissao-person {
  font-size: 14px;
}

section.depoimentos h2 {
  font-size: 32px;
  text-align: center;
  margin-bottom: 1%;
}

section.depoimentos p.text-depoimentos {
  font-size: 20px;
  text-align: center;
  margin-bottom: 30px;
}

.margin-final {
  margin-bottom: 3%;
}

/* COMEÇO DO ESTILO DA SECTION --> Fale conosco */
section.fale-conosco h2 {
  font-size: 2rem;
  margin-bottom: 30px;
}

section.fale-conosco h3 {
  font-size: 1.5rem;
}

section.fale-conosco p {
  font-size: 21px;
  font-weight: 400;
}

section.fale-conosco {
  padding: 3%;
  background-color: var(--CorLaranja);
  display: flex;
  font-size: 2rem;
  text-align: center;
  align-items: center;
  color: var(--CorBranca);
  overflow: hidden;
}

section.fale-conosco .container1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
  margin-top: 4%;
}

.item-fale-conosco {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2%;
  color: white;
  width: 100%;
  height: 130px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  margin-bottom: 20px;
  text-justify: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.item-fale-conosco:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.item-fale-conosco i {
  font-size: 30px;
}

/* COMEÇO DO ESTILO DA SECTION --> Perguntas Frequentes */
section.perguntas-frequentes {
  background-color: var(--CorBranca);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2% 0;
}

.texto-perguntas-frequentes {
  margin-bottom: 30px;
  text-align: center;
}

section.perguntas-frequentes .texto-perguntas-frequentes h2 {
  font-size: 3rem;
}

section.perguntas-frequentes .texto-perguntas-frequentes p {
  font-size: 21px;
}

.faq {
  width: 100%;
}

.faq li {
  width: 100%;
  margin-bottom: 10px;
}

.faq li label {
  padding: 15px 10px;
  font-size: 18px;
  font-weight: 500;
  background-color: var(--CorLaranja);
  color: var(--CorBranca);
  display: flex;
  align-items: center;
  cursor: pointer;
  border-radius: 13px 13px 13px 13px; /* Arredonda só os cantos superiores */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.faq li label span {
  display: inline-block; /* Fica em linha, mas aceita largura e altura */
  padding: 8px;
  background-color: var(--CorPreta);
  color: var(--CorBranca);
  border-radius: 8px;
  margin-right: 10px;
}

.faq li label::before {
  content: "+";
  margin-right: 10px;
  font-size: 24px;
}

.faq input[type="radio"] {
  display: none;
}

.faq .resposta {
  color: var(--CorPreta);
  padding: 0 14px;
  background-color: #80808027;
  line-height: 32px;
  max-height: 0;
  overflow: hidden; /* Esconde o que passa do limite */
  transition: max-height 0.5s, padding 0.5s;
  border-radius: 0 0 13px 13px; /* Arredonda só os cantos inferior */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.faq input[type="radio"]:checked + label + .resposta {
  max-height: 400px;
  padding: 10px 10px 20px;
}

.faq input[type="radio"]:checked + label {
  border-radius: 13px 13px 0 0; /* Arredonda só os cantos superiores */
}

.faq input[type="radio"]:checked + label span {
  background-color: #808080;
}

.faq input[type="radio"]:checked + label::before {
  content: "-";
  margin-right: 10px;
  font-size: 24px;
}

/* COMEÇO DO ESTILO DA SECTION --> Formulario */
section.formulario {
  background-color: var(--CorLaranja);
}

section.formulario .interface {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
  padding-bottom: 30px;
  gap: 4%;
}

.typing img {
  border-radius: 15px;
  height: 440px;
}

section.formulario .interface .form {
  width: 100%;
}

section.formulario .interface .form form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.5rem 1rem;
  margin-top: 2%;
  background-color: var(--CorBranca);
  border-radius: 10px;
}

section.formulario .interface .form h2 {
  text-align: center;
  color: var(--CorBranca);
  font-size: 2rem;
}

section.formulario .interface .form form input {
  padding: 0.7rem;
  outline: none;
  border-radius: 7px;
  border: solid 2px var(--CorPreta);
  font-size: 1rem;
}

section.formulario .interface .form form input:focus {
  box-shadow: 0 0 6px rgba(255, 98, 0, 0.9);
}

.form form textarea {
  height: 130px;
  padding: 10px;
  border: solid 2px var(--CorPreta);
  outline: none;
  border-radius: 7px;
  font-size: 1rem;
}

.form form textarea:focus {
  box-shadow: 0 0 6px rgba(255, 98, 0, 0.9);
}

section.formulario .interface .form button {
  padding: 0.8rem;
  color: var(--CorBranca);
  background-color: var(--CorPreta);
  border-radius: 7px;
  cursor: pointer;
  font-weight: bold;
}

form textarea {
  font-family: "Roboto", sans-serif;
}

/* COMEÇO DO ESTILO DA SECTION --> footer */
section.footer {
  background-color: black;
  color: white;
  padding: 2% 0;
}

section.footer .interface {
  display: flex;
  gap: 150px;
  justify-content: space-between;
}

section.footer .interface h2 {
  font-size: 2rem;
  color: #a3772d;
  margin-bottom: 10px;
}

section.footer .interface i {
  color: #a3772d;
  font-size: 20px;
  text-align: center;
  margin-right: 5px;
}

.item-footer {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* cria espaço entre os itens */
  height: 250px;
}

.item-footer .footer-links {
  list-style: none;
  padding: 0;
  margin: 0;

  display: flex;
  flex-direction: column;
  gap: 18px; /* segredo do esáçamento aqui */
}

.item-footer .footer-links a {
  color: white;
}

section.footer .interface .logo-footer img {
  width: 9rem;
}

/* COMEÇO DO ESTILO DA SECTION --> sub-footer-creditos */
section.sub-footer-creditos {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background-color: var(--CorPreta);
  color: var(--CorBranca);
  text-align: center;
  padding: 30px 0; /*cima e baixo = 30px e lados 0 nos lados*/
}

/* COMEÇO DO ESTILO DA SECTION --> MODAL TERMO DE PRIVACIDADE */
.modal-container {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #0000004b;
  z-index: 999;
  align-items: center;
  justify-content: center;
  display: none;
}

.modal {
  max-width: 500px;
  max-height: 500px;
  background-color: var(--CorBranca);
  backdrop-filter: blur(10px);
  padding: 40px;
  border-radius: 10px;
  margin: 3%; /* Isso serve para quando a telá está muito pequena*/
}

.modal .topo-modal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.modal h2 {
  font-size: clamp(18px, 4vw, 22px);
  /* clamp(MÍNIMO, IDEAL RESPONSIVO, MÁXIMO) */
  font-weight: 500;
}

.modal-container p {
  line-height: 1.6;
  font-weight: 400;
  color: #4b4b4b;
  font-size: clamp(14px, 4vw, 17px);
  /* clamp(MÍNIMO, IDEAL RESPONSIVO, MÁXIMO) */
}

.modal-container p.modal-text-spacing {
  margin-top: 1rem;
}

.sub-footer-creditos .btn {
  margin-top: 2%;
  background-color: transparent;
  color: var(--CorCinza);
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 3px; /* distância da linha */
  font-weight: 400;
  cursor: pointer;
}

.modal-body {
  border-top: 1px solid rgba(28, 26, 26, 0.177);
  border-bottom: 1px solid rgba(28, 26, 26, 0.177);
  padding: 3% 0;
}

.fechar-modal {
  width: 30px;
  height: 30px;
  border: none;
  color: var(--CorLaranja);
  background-color: transparent;
  font-weight: 500;
  font-size: 18pt;
  cursor: pointer;
}

.fechar-modal:hover {
  color: var(--CorPreta);
}

.fechar02 {
  border: none;
  background-color: var(--CorLaranja);
  color: #fff;
  font-weight: 500;
  font-size: 12pt;
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

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

.class-do-btn {
  margin-top: 15px;
  display: flex;
  justify-content: end;
}

@keyframes animate-modal {
  from {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.modal-container.mostrar {
  display: flex;
}

.mostrar .modal {
  animation: animate-modal 0.3s;
}

/* BOTÃO SOBRE TELA WHATSAPP */
.whatsapp-button {
  position: fixed;
  bottom: 15px;
  right: 15px;
  width: 60px;
  height: 60px;
  background-color: #fe6f23;
  padding: 15px;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: pulseGold 2s infinite;
  transition: transform 0.5s ease;
  cursor: pointer;
  overflow: hidden;
}

.whatsapp-button i {
  font-size: 28px;
  color: white;
}

.whatsapp-button:hover {
  background-color: #1ebe5d;
  transform: scale(1.1);
}

@keyframes pulseGold {
  0% {
    box-shadow: 0 0 0 0 rgba(228, 81, 23, 0.45);
  }

  70% {
    box-shadow: 0 0 0 20px rgba(39, 201, 106, 0);
  }

  to {
    box-shadow: 0 0 0 0 rgba(214, 60, 17, 0);
  }
}