@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


/* Variaveis */
:root {
    --cor-azul-claro: #42A5F5;
    --cor-azul-escuro: #1565C0;
    --cor-fundo: #ffffff;
    --cor-fundo-secundario: #F5F5F5;
    --cor-fundo-terciario: #1565c0;
    --cor-fonte-base: #646464;
    --cor-amarelo: #fadb5b;
    --cor-texto: #353535;

    --tamanho-titulo: 50px;
    --fonte-principal: "Poppins", sans-serif;
    --fonte-secundaria: "Roboto", sans-serif;
    --peso-titulo: 300px;  
}
/* Dark mode real */
body.dark-mode {
  --cor-fundo: #121212;
  --cor-fundo-secundario: #1E1E1E;
  --cor-fundo-terciario: #242424;
  --cor-fonte-base: #E0E0E0;
  --cor-texto: #ffffff;
  --cor-amarelo: #fadb5b; 
}

body {
    font: 300 1em/1.5em var(--fonte-principal);   
}
html, body {
  width: 100%;
  overflow-x: hidden;
}
h1 {
    font-size: 3em;
}

h2 {
    font-size: 2em;
}
a {
    text-decoration: none;
}
header {
   position: fixed;         
    top: 0;                  
    left: 0;
    width: 100%;             
    height: auto;
    background-color: var(--cor-fundo);
    padding: 20px 0;    
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
    border-bottom: 1px solid #ccc;        
    z-index: 1000;           
}
/*  dark mode */
body.dark-mode header {
    background-color: var(--cor-fundo); 
     box-shadow: 0 2px 10px rgba(255, 255, 255, 0.08); 
    border-bottom: 0;      
}
.container {
    max-width: 1500px;
    width: 100%;
    height: auto;
    margin: 0 auto; 
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;    
}
.container h1 {
    width: 200px;
    height: 100px;
    background-image: url(../img/logo.svg);
    background-repeat: no-repeat;
    text-indent: -9999px;
    margin: 5px 20px;
}
body.dark-mode .container h1 {
    background-image: url(../img/logoBranca.svg); 
}
.container ul {
    display: flex;
    gap: 30px;
}
.container ul li {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 25px;
}
.container ul li a {
    color: var(--cor-azul-escuro);
    text-decoration: none;
    transition: color 0.3s;
}
.container ul li a:hover {
    color: var(--cor-amarelo);
}
/* Cor fixa da página atual */
.container ul li a.ativo {
  color: var(--cor-amarelo);
}
body.dark-mode ul li a {
  color: var(--cor-amarelo);
}
body.dark-mode ul li a:hover{
  color: var(--cor-azul-claro);    
}
/* Cor fixa do link ativo no dark */
body.dark-mode ul li a.ativo {
  color: var(--cor-azul-claro);
}
 .abrir-menu,
  .fechar-menu{
    display: none;
  }
/* ------------- BANNER -------------- */
.banner{
   height: auto;
    padding: 100px 0 50px;
    background-color: var(--cor-fundo-secundario);
    margin-top: 120px; 
} 
.banner .container {
  gap: 80px;     
}
.banner .container div{
   max-width: 650px;
   height: auto;     
}
.container h2{
    font-size: 2.8rem;
    font-weight: 600;
    color: var(--cor-azul-escuro);
    margin-bottom: 1em;
    justify-content: flex-start; 
    line-height: 1.3;      
}
span{
    font-size: 2.8rem;
    font-weight: 600;
    color: var(--cor-azul-claro);
    margin-bottom: 1em;
    justify-content: flex-start; 
    line-height: 1.3;  
}
body.dark-mode .container h2 {
    color: #ffffff; 
}
body.dark-mode .container span {
    color: var(--cor-amarelo); 
}
.banner .container div{
    display: flex;
    flex-direction: column;
    align-items: center;  
}
.banner .container .imgbanner img{
  width: 650px;
  height: auto;
  border-radius: 195px;
  box-shadow: 0px -1px 38px 0px rgba(0, 0, 0, 0.4);
}
.banner .container div  p { 
  font-family: var(--fonte-secundaria);
  color: var(--cor-fonte-base);
  font-size: 1.7rem;
  line-height: 1.6;   
  text-align: justify;
  margin-bottom: 1em;
  text-indent:  2em; 
}
/*   Botão */
 .banner .container div div {      
  width: 200px;
  height: 50px;
  display: flex;   
  align-items: center;   
  justify-content: center; 
  align-items: center;  
  border-radius: 20px;
  border: 5px solid transparent; 
  background-image: 
    linear-gradient( #F5F5F5, #F5F5F5), 
    linear-gradient(to top, #42A5f5, #1565c0); 
  background-origin: border-box; 
  background-clip: content-box, border-box; 
}
/* Botão no modo dark */
body.dark-mode .banner .container div div {
    background-image: 
        linear-gradient(#333333, #333333), 
       linear-gradient(to top,  #f5d96c, #fadb5b); 
}
 .banner .container div div  a {    
   color: var(--cor-azul-escuro);
    font-family:ar(--fonte-secundaria); 
    font-size: 20px;  
    font-weight: 700;
     text-decoration: none;      
    transition: all 0.3s ease;  
}
body.dark-mode .banner .container div div a {
    color: #fff; 
}
.banner .container div div  a:hover {        
    color: var(--cor-azul-claro); 
    transform: scale(1.09); /* efeito de "crescer" um pouquinho */
}
body.dark-mode .banner .container div div a:hover {
     color: var(--cor-amarelo);    
    transform: scale(1.09);     
}
/* ------------- Sobre -------------- */
.sobre{  
  height: auto; 
    padding: 100px 0;
    background-color: var(--cor-fundo);   
} 
.container h2{
    font-size: 2.8rem;
    font-weight: 600;    
}
.sobre .container {
  gap: 80px;
}
.sobre .container .imagem img{
  box-shadow: 0px -1px 38px 0px rgba(0, 0, 0, 0.4);
  border-radius: 50px;
  width: 600px;
  height: auto;
}
span{
    color: var(--cor-azul-claro);
    font-weight: 700;
    font-family: var(--fonte-principal);    
    font-size: 2.8rem;
}
.sobre div div{
   max-width: 650px;
   height: auto;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
    
}
.sobre .container div p {
  font-family: var(--fonte-secundaria);
  color: var(--cor-fonte-base);
  font-size: 1.7rem;
  line-height: 1.6;   
  text-align: justify; 
  text-indent:  2em;  
  padding: 0 0 50px 0;  
}

/* ------------- Serviços  -------------- */
.servicos {
     height: auto;
     background-color: var(--cor-azul-escuro);     
} 
.servicos .container-servico  {
    display: flex;
    flex-direction: column;
    align-items: center;  
    padding: 50px;
}
body.dark-mode .servicos {
    background-color: var(--cor-fundo-secundario);
}
  
 .servicos .container-servico > h2{
    color: #ffffff;   
    font-family: var(--fonte-principal); 
    font-size: 2.8rem;;
    padding: 30px 0 50px 0;
    font-weight: 600;
    margin-bottom: 0;         
}
 a {        
    color: var(--cor-fonte-base);
    font-family:ar(--fonte-secundaria); 
    font-size: 25px;  
    font-weight: 700;  
}  
.botao{     
    background-color: var(--cor-fundo-secundario);   
    padding: 12px 25px;
    border: 2px solid var(--cor-azul-claro);    
    border-radius: 20px;
    transition: all 0.3s ease;    
   
}
body.dark-mode .servicos .botao{
  border: 2px solid var(--cor-amarelo); 
}

.botao:hover {
    background-color: var(--cor-azul-claro); 
    color: var(--cor-amarelo); 
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.2); 
    transform: scale(1.05); 
}
body.dark-mode .servicos .botao:hover{
    background-color: var(--cor-fundo-secundario);
    color: var(--cor-amarelo);    
}
/* Grid de serviços */
.container-servico .servicos-grid {
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    margin-bottom: 50px;  
    gap: 30px; 
    align-items: start; 
}
/* Cada card de serviço */
.servico-item {
    width: 350px; 
    height: 250px; 
    perspective: 1000px; 
    cursor: pointer;    
}
/* Frente do card */
.card-front {
    position: absolute; 
    width: 350px; 
    height: 250px;   
    display: flex; 
    justify-content: center; 
    align-items: center; 
    overflow: hidden;

    /* Fundo do card */
    background-image: url('caminho-da-imagem.jpg'); 
    background-size: cover;
    background-position: center; 
    background-repeat: no-repeat; 
}
/* overlay escuro */
.card-front::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45); 
    z-index: 1;
}
.card-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
/* Título dentro do card */
h3 {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    color: var(--cor-fundo); 
    text-shadow: 0 2px 6px rgba(0,0,0,0.9), 0 0 12px rgba(0,0,0,0.8);
    font-weight: 700; 
    font-family: var(--fonte-principal); 
    font-size: 25px; 
    text-align: center; 
    line-height: 1.5; 
    width: 80%; 
    word-wrap: break-word; 
}
body.dark-mode .servicos h3{    
    color: #fff;    
}
/* Container interno do card (frente + trás) */
.card-inner {  
    width: 350px; 
    height: 250px; 
    transition: transform 0.8s; 
    transform-style: preserve-3d; 
}

.servico-item:hover .card-inner {
    transform: rotateY(180deg); 
}
/* Frente e verso do card compartilhando estilo */
.card-front, .card-back {   
    width: 350px; 
    height: 250px; 
    backface-visibility: hidden;
    border-radius: 0px;  
    box-shadow: 0px -1px 38px 0px rgba(0, 0, 0, 0.4);  
    display: flex; 
    flex-direction: column;
}
/* Verso do card */
.card-back {
    background: #f5f5f5; 
    transform: rotateY(180deg); 
}
body.dark-mode .servicos .card-back{
    background-color: var(--cor-fundo);       
}
/* Texto do verso do card */
.card-back span {   
    text-align: center; 
    margin: 0; 
    color: var(--cor-azul-escuro);     
    width: 90%; 
    word-wrap: break-word; 
    font-size: 25px; 
    padding: 20px 20px 10px;
}
body.dark-mode .servicos .card-back span {      
    color: var(--cor-amarelo);       
}

.servicos .container-servico .card-back p {
    text-align: justify; 
    padding: 20px 25px; 
    font-size: 20px; 
    font-family: var(--fonte-secundaria); 
    color: var(--cor-fonte-base); 
    line-height: 1.6; 
    text-indent: 2em;    
}  
  /* -------------Fim Serviços  -------------- */

 /* ------------- Porque -------------- */
.porque{
    height: auto;
    padding: 50px 0;
    background-color: var(--cor-fundo);
}
 .porque .container {
    align-items: start;
    gap: 80px;
    padding: 50px 0;     
 }  
 .porque .container div{
  max-width:650px;
  height: auto;
 
}
 .porque .container .imgpq img {
  width: 550px;
  height: auto;
  border-radius: 80px;
  box-shadow: 0px -1px 38px 0px rgba(0, 0, 0, 0.4);    
}          
 .porque .container h2{
    font-size: 2.8rem;;
    margin-bottom: 50px;     
}
 .porque .container span{
    font-size: 2.8rem;;
    margin-bottom: 50px;    
} 
 .porque .container h4{
    font-size: 1.7rem;  
    line-height: 1.6;  
    font-weight: bolder;
    margin-bottom: 30px;   
}
body.dark-mode .porque h4{
  color: #fff;    
}
.porque div div p{
  font-family: var(--fonte-secundaria);
  color: var(--cor-fonte-base);
  font-size: 1.7rem;  
  line-height: 1.6;   
  text-align: justify;   
  text-indent:  2em;
}
/* Container geral dos cards */
.containercard {
    max-width: 1500px; 
    width: 100%; 
    margin: 0 auto; 
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px; 
}

/* Cada card individual */
.containercard .card {      
    width: 350px;
    height: auto; 
    width: 100%;
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
    align-items: center; 
    border-radius: 30px; 
    border: 4px solid transparent; 
    background-image: 
        linear-gradient(#F5F5F5, #F5F5F5), 
        linear-gradient(to top, #42A5f5, #1565c0); 
    background-origin: border-box; 
    background-clip: content-box, border-box;       
}  
    
body.dark-mode .porque .containercard  .card{
   background-image: 
        linear-gradient(#121212, #121212 ), 
        linear-gradient(to top, #42A5f5, #1565c0);      
}
.porque .containercard  .card img{
 padding: 20px 0 0;
}
.card h2{
    font-size: 1.5rem;  
    font-family: var(--fonte-principal);
    font-weight: 500;
    color: #353535;
}
body.dark-mode .porque .card h2{
 color: var(--cor-azul-claro);  
    
}
.card span{
    font-size: 1.5rem;
    font-family: var(--fonte-principal);
    font-weight:500;
}

body.dark-mode .porque .card span{
 color: var(--cor-amarelo);   
    
}
.containercard .card p{
  font-family: var(--fonte-secundaria);
  color: var(--cor-fonte-base);
  font-size: 1.2rem; 
  text-align: justify;  
  padding: 10px 20px 40px;   
}

 /* ------------- ETAPAS DO DESENVOLVIMENTO -------------- */
 .etapas {
  background-color: var(--cor-fundo-secundario);
  padding:  0 50px ;   
  height: auto;
} 
.etapas .container {
  max-width: 1200px;
  flex-direction: column;  
  padding: 50px;  
} 
.etapas .container .linha-tempo{
  width: 100%;
  height: 70px;
  position: absolute;
  margin-bottom: -50px;  
  background-color:var(--cor-azul-claro);
   z-index: 1; 
}

/* título principal centralizado */
.etapas .container h2 {
  font-size: 2.8rem; 
}
.etapas .container span {
  font-size: 2.8rem; 
}
.etapas .container .etapas-item {
  position: relative;
  display: grid; 
  grid-template-columns: repeat(5, 1fr); 
  justify-content: center; 
  align-items: start; 
  width: 100%; 
  max-width: 1500px; 
  z-index:1;         
}
.etapas .container .etapas-item .um, .dois {
  width: 250px;
  height: auto;   
  text-align: center; 
}
.etapas .container .etapas-item .dois span,
.etapas .container .etapas-item .um span {
  font-size: 1.5rem; 
  color: #1565C0;
  font-weight: 400; 
  font-family: var(--fonte-principal);
}
body.dark-mode .etapas .container .etapas-item .dois span,
body.dark-mode .etapas .container .etapas-item .um span{
 color: var(--cor-amarelo);       
}
.etapas .container .etapas-item .um h2,
.etapas .container .etapas-item .dois h2 {
  font-size: 1.5rem;
  font-family: var(--fonte-principal);
  font-weight: 600;
  color: #fff;
  margin: 0;              
}
.etapas .container .etapas-item .um h2 {  
  padding: 30px 0 0;      
}
.etapas .container .etapas-item .dois h2 {  
  padding:  0 0 30px;     
}
.etapas .container .etapas-item .um   p{
  font-family: var(--fonte-secundaria);
  color: var(--cor-fonte-base);
  font-size: 18px;
  line-height: 1.6;   
  text-align: justify;   
  text-indent:  2em; 
 padding: 60px 20px  20px;
}
.etapas .container .etapas-item .dois   p{
  font-family: var(--fonte-secundaria);
  color: var(--cor-fonte-base);
  font-size: 1rem;
  line-height: 1.6;   
  text-align: justify;   
  text-indent:  2em; 
 padding: 10px 20px 150px;
}

.etapas .container .etapas-item .um img,
.etapas .container .etapas-item .dois img {
  width: 80px;
  margin-top: 5px;       
  padding: 0;           
}
.etapas .container .etapas-item .um img,
.etapas .container .etapas-item .dois img {
  width: 80px;
  margin-top: 5px;        
}
.etapas .container .etapas-item .um img {
padding: 0 0 140px;
margin-bottom: 20px;
}
.etapas .container .etapas-item .dois img {
padding: 60px 0 0;
}
/* ---------------- RODAPÉ GERAL ---------------- */
.rodape {
  background-color: var(--cor-fundo);
  padding: 50px 0 0 0;
  
}

/* Container principal das colunas */
.rodape > div:first-child {
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap; 
  gap: 50px;
  padding-bottom: 40px;
}
/* ---------------- CADA COLUNA ---------------- */
.rodape > div > div {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;  
}
/* ---------- LOGO ---------- */
.rodape > div > div:nth-child(1) .logo-site {
  width: 200px;
  height: auto;
  display: block;
  margin: 0 auto 10px; 
}
/* ---------- MODO DARK ---------- */
body.dark-mode .rodape .logo-site {
  content: url("../img/logoBranca.svg");
}
/* Texto abaixo da logo */
.rodape > div > div:nth-child(1) > p {
  font-size: 18px;
  color: var(--cor-azul-escuro);
  font-family: var(--fonte-secundaria);
  font-weight: 500;
  line-height: 1.4;
  max-width: 320px;
  text-align: center;
}
/* ---------- ÍCONES SOCIAIS ---------- */
.rodape > div > div:nth-child(1) > div {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 15px;
}
.rodape > div > div:nth-child(1) > div a img {
  width: 40px;
  transition: transform 0.2s ease, filter 0.3s ease;
  
}
/* Ícone Política de Privacidade */
.iconePrivacidade img {
  width: 35px;
  transition: transform 0.2s ease, filter 0.3s ease;
}
.iconeLinkedin:hover img {
  content: url("../img/linkedinamarelo.png");
  transform: scale(1.1);
}
.iconeInsta:hover img {
  content: url("../img/instaAmar.png");
  transform: scale(1.1);
}
.iconesap:hover img {
  content: url("../img/sapAmarelo.png");
  transform: scale(1.1);
}
.iconePrivacidade:hover img {
  content: url("../img/segurancaAmarelo.png"); 
  transform: scale(1.1);
}

/* ---------- TÍTULOS DAS COLUNAS ---------- */
.rodape > div > div:nth-child(2) h2,
.rodape > div > div:nth-child(3) h2 {
  font-family: var(--fonte-principal);
  font-size: 30px;
  font-weight: 600;
  color: var(--cor-azul-escuro); 
  margin: 30px 0 20px 0;
}
/* ---------- LINKS ---------- */
.rodape > div > div:nth-child(2) a {
  font-size: 25px;
  text-decoration: none;
  color: var(--cor-azul-escuro);
  transition: color 0.3s ease;
  font-weight: 500;
  margin-bottom: 20px;
}
.rodape > div > div:nth-child(3) a {
  font-family: var(--fonte-secundaria);
  font-size: 20px;
  text-decoration: none;
  color: var(--cor-azul-escuro);
  transition: color 0.3s ease;
  font-weight: 500;
  margin-bottom: 20px;
}
.rodape > div > div:nth-child(2) a:hover,
.rodape > div > div:nth-child(3) a:hover {
  color: var(--cor-amarelo);
}
/* ---------- RODAPÉ SECUNDÁRIO ---------- */
.rodape-secundario {
  background-color: var(--cor-azul-escuro);
  display: flex;
  justify-content: center;   
  align-items: center;       
  gap: 350px;              
  padding: 12px 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
  flex-wrap: wrap;           
}
.rodape-secundario p {
  color: #fff;
  font-family: var(--fonte-secundaria);
  font-weight: 500;
  font-size: 15px;
  margin: 0; 
}
/* ---------- MODO DARK ---------- */
body.dark-mode .rodape {
  background-color: var(--cor-fundo);
}
body.dark-mode .rodape > div > div:nth-child(1) h1 {
  background-image: url(../img/logoBranco.svg);
}
body.dark-mode .rodape > div > div:nth-child(1) > p {
  color: #fff;
}
body.dark-mode .rodape > div > div:nth-child(2) h2,
body.dark-mode .rodape > div > div:nth-child(3) h2 {
  color: var(--cor-amarelo);
}
body.dark-mode .rodape > div > div:nth-child(2) a,
body.dark-mode .rodape > div > div:nth-child(3) a {
  color: #fff;
}
body.dark-mode .rodape > div > div:nth-child(2) a:hover,
body.dark-mode .rodape > div > div:nth-child(3) a:hover {
  color: var(--cor-amarelo);
}
body.dark-mode .rodape-secundario {
  background-color: var(--cor-fundo);
  box-shadow: 0 -2px 5px rgba(0,0,0,0.4);
}
/* Fim da seção Rodapé  */ 

/* =====INICIO PAGINA QUEM SOMOS */ 
/* =====SEÇÃO O que é FrontCriativo  */ 
.quemSomos{
    max-width: 1500%;
    height: auto;
    padding: 80px 0 50px;
    background-color: var(--cor-fundo-secundario); 
    margin-top: 120px;     
}
.quemSomos div  img{ 
  max-width: 600px;
  height:auto;
  border-radius: 50px;
  box-shadow: 0px -1px 38px 0px rgba(0, 0, 0, 0.4);
}
.quemSomos div  div:nth-child(2){ 
  max-width: 600px; 
  height: auto;
  align-items: flex-start; 
  padding: 50px 0 0 0;   
} 
.quemSomos .container h2{
    font-size: 2.8rem;
    font-weight: 600;
    margin-bottom: 20px; 
}
span{
    color: var(--cor-azul-claro);
    font-weight: 700;
    font-family: var(--fonte-principal);
    font-size: 2.8rem;        
}
.quemSomos .container div p {
  font-family: var(--fonte-secundaria);
  color: var(--cor-fonte-base);
  font-size: 1.5rem;
  line-height: 1.6;   
  text-align: justify; 
  text-indent:  2em;   
  padding: 0 0 150px 0; 
}
/* ===== NOSSA EQUIPE ===== */
.nossaequipe{ 
    height: auto ;  
    padding: 50px 50px;
    background-color: var(--cor-azul-escuro);  
}
body.dark-mode .nossaequipe {
    background-color: var(--cor-fundo-terciario);
}
.nossaequipe > div h2{   
  padding: 20px 0 0 0 ; 
   text-align: center;  
   font-family: var(--fonte-principal); 
   font-size: 2.8rem;
   font-weight: 500;
   color: #fff;
}
.nossaequipe .container{
    max-width: 1500%;
    height: auto;
    padding: 20px 0;    
}
.nossaequipe .container  div:nth-child(1),
.nossaequipe .container  div:nth-child(2){   
  max-width: 650px;
  height: auto;
  display: flex;
  flex-direction: column;
  padding: 20px 20px; 
  align-items: center; 
  margin: 0;
}
.nossaequipe .container  div:nth-child(2){   
 padding: 30px 0 0 0;
}
.nossaequipe div div img{ 
  max-width: 600px;
  height: auto;
} 
.nossaequipe .container div:nth-child(1) span{
  font-size: 1.7rem;
  color: #fff;
  font-weight: 400;
  font-family: var(--fonte-principal); 
  padding: 20px 0 0 0;  
  margin-bottom: 10px;     
}
.nossaequipe .container div:nth-child(1) h4 {
  font-family: var(--fonte-secundaria);
  color: var(--cor-amarelo);
  font-size: 1.7rem;
  font-weight: 400; 
  padding:  10px;    
}
.nossaequipe .container div:nth-child(2)> p {
  font-family: var(--fonte-secundaria);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1.6;   
  text-align: justify; 
  text-indent:  2em;   
}
 .nossaequipe .container div:nth-child(2)> a {        
    color: var(--cor-fonte-base);
    font-family:ar(--fonte-secundaria); 
    font-size: 1.5rem;  
    font-weight: 700;  
    margin: 50px 0 0 0;
}  
.nossaequipe .container div:nth-child(2)> .botao{     
    background-color: var(--cor-fundo-secundario);   
    padding: 12px 25px;
    border: 2px solid var(--cor-azul-claro);    
    border-radius: 20px;
    transition: all 0.3s ease;   
}
.nossaequipe .container div:nth-child(2)> .botao:hover {
    background-color: var(--cor-azul-claro); 
    color: var(--cor-amarelo); 
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.2); 
    transform: scale(1.05); 
}
body.dark-mode .nossaequipe .container .botao{
  border: 2px solid var(--cor-amarelo); 
}
body.dark-mode .nossaequipe .container div:nth-child(2)> .botao:hover{
    background-color: var(--cor-fundo-secundario);
    color: var(--cor-amarelo);    
}
.nossaequipe .container .convite {
  font-family: var(--fonte-secundaria);
  color: var(--cor-amarelo);
  font-size: 25px;
  line-height: 1.6;   
  text-align: justify; 
  text-indent:  2em; 
  font-weight: 500;  
}
/* ===== PAGINA SERVIÇOS ===== */

/* começo do banner serviços  */
.bannerServico {
  width: 100%; 
  height: 500px; 
  background-image: url("../img/bannerServicos.png"); 
  background-size: cover; 
  background-position: center; 
  position: relative; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  margin-top: 120px; 
  padding: 100px 0 0;
}
/* Overlay escuro para destacar o texto */
.banner-overlay {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background-color: rgba(    0,    0,    0,    0.4  ); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}
/* Conteúdo do banner */
.banner-content {
  color: white; 
  text-align: center; 
  padding: 0 20px; 
  font-family: var(--fonte-principal);
}
/* fim do banner pagina serviços  */
/* ------------- Serviços -------------- */
.servicoWeb,
.servicoHosp,
.servicoSeo,
.servicoMark,
.servicoProjGrafico,
.servicoMobile{   
    padding: 50px 0 ;  
    height: auto; 
} 
.servicoWeb h2,
.servicoHosp h2,
.servicoSeo h2,
.servicoMark h2,
.servicoProjGrafico h2,
.servicoMobile h2{
  font-size: 2.8rem;
  font-weight: 600;
  color: var(--cor-azul-escuro);
  margin: 10px 0;
  padding: 0 0 5px;
}
.servicoSeo .container,
.servicoMark .container,
.servicoProjGrafico .container,
.servicoMobile .container{
  max-width: 1500px;
  align-items: center;
  padding: 0 20px;
  height: auto;
}  
.destaque-palavra {
  font-family: var(--fonte-secundaria);
  color: var(--cor-texto); 
  font-weight: 400;           
  font-size: 1.1em;             
}

.servicoWeb div,
.servicoHosp div,
.servicoSeo div,
.servicoMark div,
.servicoProjGrafico div,
.servicoMobile div{  
  align-items: flex-start;
}
.servicoWeb .container div:nth-child(1),
.servicoHosp .container div:nth-child(1),
.servicoSeo .container div:nth-child(1),
.servicoMark .container div:nth-child(1),
.servicoProjGrafico .container div:nth-child(1),
.servicoMobile .container div:nth-child(1) {
 max-width: 650px; 
 height: auto;
}   
.servicoWeb .container div:nth-child(2),
.servicoHosp .container div:nth-child(2),
.servicoSeo .container div:nth-child(2),
.servicoMark .container div:nth-child(2),
.servicoProjGrafico .container div:nth-child(2),
.servicoMobile .container div:nth-child(2) {
 max-width: 650px; 
 height: auto;
}   
.servicoWeb .container div p,
.servicoHosp .container div p,
.servicoSeo .container div p,
.servicoMark .container div p,
.servicoProjGrafico .container div p,
.servicoMobile .container div p{
  font-family: var(--fonte-secundaria);
  color: var(--cor-fonte-base);
  font-size: 1.5rem;
  line-height: 1.6;   
  text-align: justify; 
  text-indent:  2em;  
}   

.servicoWeb{  
    background-color: var(--cor-fundo);
}
.servicoSeo{  
    background-color: var(--cor-fundo);
}
.servicoProjGrafico{  
    background-color: var(--cor-fundo);
}
.servicoHosp{    
    background-color: var(--cor-azul-escuro);
}
.servicoMark{    
    background-color: var(--cor-azul-escuro);
}
.servicoMobile{    
    background-color: var(--cor-azul-escuro);
}
.servicoHosp h2,
.servicoMark h2,
.servicoMobile h2{    
  color: #fff;    
}
.servicoHosp .container div p,
.servicoMark .container div p,
.servicoMobile .container div p{    
  color: #fff;    
}
.servicoHosp .container .destaque-palavra,
.servicoMark .container .destaque-palavra,
.servicoMobile .container .destaque-palavra{    
  color: #fff;
  font-weight: 500;
}
body.dark-mode .servicoHosp,
body.dark-mode .servicoMark,
body.dark-mode .servicoMobile{
    background-color: var(--cor-fundo-secundario);
}
body.dark-mode .servicoHosp .container .destaque-palavra,
body.dark-mode .servicoMark .container .destaque-palavra,
body.dark-mode .servicoMobile .container .destaque-palavra{
    color: var(--cor-amarelo);
}
body.dark-mode .servicoWeb .container h2, 
body.dark-mode .servicoSeo .container h2,
body.dark-mode .servicoProjGrafico .container h2,
body.dark-mode .servicoHosp .container h2,
body.dark-mode .servicoMark .container h2,
body.dark-mode .servicoMobile .container h2{
    color: var(--cor-amarelo);
}
/* ===== PAGINA CONTATO ===== */

/* SEÇÃO DO BANNER  CONTATO  */
.bannerContato {
  width: 100%; 
  height: 500px; 
  background-image: url("../img/bannerContato.png"); 
  background-size: cover; 
  background-position: center; 
  position: relative; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  margin-top: 120px;   
}
/* Overlay escuro para destacar o texto */
.banner-overlay {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background-color: rgba(
    0,
    0,
    0,
    0.4
  ); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}
/* Conteúdo do banner */
.banner-content {
  color: #fff; 
  text-align: center; 
  padding: 0 20px; 
  font-family: var(--fonte-principal);
}

/*  ======= SEÇÃO FORMULÁRIO ======= */
.formContato {
  padding: 50px 0; 
  background-color: var(--cor-fundo);
}

/* Centraliza o conteúdo dentro da seção */
.formContato .container {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
}

/* Título "CONTATO" */
.formContato h2 {
  font-size: 2.8rem; 
  font-family: var(--fonte-principal);
  color: var(--cor-azul-claro);
  margin-bottom: 20px;
  font-weight: 600;
}
.formContato h4 {
  font-size: 1.5rem; 
  font-family: var(--fonte-secundaria);
  color: var(--cor-azul-escuro);
  font-weight: 600;
}
body.dark-mode .formContato h4{
  color: var(--cor-amarelo);   
}
/* Fundo e borda arredondada para o bloco que contém o formulário */
.formContato .container > div:nth-child(2) {
  background-color: var(--cor-azul-claro);
  padding: 30px;
  border-radius: 10px;
}
/*  FORMULÁRIO PRINCIPAL */
.formContato form {
  width: 1500px;              
  height: 550px;              
  display: flex;              
  justify-content: space-between; 
  align-items: center;       
  gap: 2em;                   
  margin: 0 auto;             
}
body.dark-mode .formContato .container > div:nth-child(2),
body.dark-mode .formContato form{
  background-color: var(--cor-fundo-secundario);   
}
/*  COLUNA DIREITA (campos do formulário) */
.formContato .formMensagem {
  display: flex;
  flex-direction: column;     
  gap: 1.2em;                 
  width: 50%;                 
}
/* Campos de entrada e seleção */
.formContato .formMensagem input,
.formContato textarea {
  width: 100%;                
  padding: 1em; 
  border-radius: 10px;
  font-size: 1.25em;
  outline: none;
  border: 2px solid #1565C0;  
  box-sizing: border-box;     
  font-family: var(--fonte-secundaria);
}
/* Quando o select está em foco (clicado) */
.formContato .formMensagem input:focus,
.formContato .formMensagem textarea:focus  {  
  border-color: #0d47a1; 
  box-shadow: 0 0 5px rgba(21, 101, 192, 0.5); 
}
body.dark-mode .formContato .formMensagem input,
body.dark-mode .formContato .formMensagem select,
body.dark-mode .formContato textarea {
  background-color: var(--cor-fundo);
  border: 0;  
  color: #f1f1f1; 
}
body.dark-mode .formContato .formMensagem input:focus,
body.dark-mode .formContato .formMensagem select:focus,
body.dark-mode .formContato textarea:focus {
  border: 2px solid var(--cor-amarelo);
  box-shadow: 0 0 8px rgba(250, 219, 91, 0.5); 
  outline: none;
}
.formContato .formMensagem input,
.formContato .formMensagem select {
  height: 50px; 
}
.formContato textarea {
  height: 180px;
  resize: none;             
}

/* Estilo geral do select */
.formContato .formMensagem select {   
  width: 100%;                
  height: 50px;               
  font-family: var(--fonte-secundaria); 
  font-size: 1.25em;           
  color: #5a5a5a;                
  background-color: #fff;      
  border: 2px solid #1565C0;   
  border-radius: 8px;          
  padding: 10px;              
  appearance: none;            
  outline: none;              
  cursor: pointer;             
  transition: 0.3s;
    /* seta personalizada */
  background-image: url("../img/seta1.png");
  background-repeat: no-repeat;                 
  background-position: right 12px center;       
  background-size: 18px auto;                   
  box-sizing: border-box;                   
}
body.dark-mode .formContato .formMensagem select option{
  background-color: var(--cor-fundo);    
}
body.dark-mode .formContato .formMensagem select {
  background-image: url(../img/setaclara.png);
}
.formContato .formMensagem select:hover {
  border-color: #0d47a1;
}

.formContato .formMensagem select:focus {  
  border-color: #0d47a1; 
  box-shadow: 0 0 5px rgba(21, 101, 192, 0.5); 
}

.formContato .formMensagem select option {
  font-size: 16px;         
  font-family: var(--fonte-secundaria);
  color: var(--cor-texto);
  background-color: #fff;
}
.formContato .botoes {
  display: flex;            
  flex-direction: row;        
  justify-content: center;   
  align-items: center;
  gap: 1.5em;                
  margin-top: 1em;
}
/* Estilo padrão dos botões */
.formContato .botoes button {
  background-color: var(--cor-azul-escuro);
  color: #fff;
   font-family: var(--fonte-secundaria);
  border: none;
  border-radius: 10px;
  width: 220px;
  height: 50px;
  cursor: pointer;
  font-size: 1em;
  transition: 0.2s ease;
}
body.dark-mode .formContato .botoes button{
  background-color: var(--cor-fundo);     
}
body.dark-mode .formContato .botoes button:hover{
  background-color: var(--cor-amarelo);
  color: #121212;    
  transform: scale(1.05); 
  transition: 0.3s ease; 
}
.formContato .botoes button:hover {
  background-color: var(--cor-azul-claro);
  filter: brightness(.9);
  box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.2); 
  transform: scale(1.05); 
}
/* ===== Texto e imagem da seção de contato ===== */
.formContato .imagemContato {
  display: flex;
  flex-direction: column; 
  align-items: center; 
  text-align: center; 
  gap: 3.5em; 
  padding: 20px 0 0 ;
}
.formContato .imagemContato h2 {
  font-size: 2.2rem; 
  line-height: 1.6; 
  color: #fff; 
  font-family: var(--fonte-principal);
}
.formContato .imagemContato span {
  color: var(--cor-amarelo); 
  font-weight: bold;
  font-size: 2.2rem;
}
/* Imagem abaixo do texto */
.formContato .imagemContato img {
  width: 100%;
  max-width: 400px; 
  border-radius: 10px;
}
/* ---------- ÍCONES SOCIAIS ---------- */
.formContato .container .imagemContato  div {
  display: flex;
  justify-content: center;
  gap: 30px;
}
.formContato .imagemContato > div a img {
  width: 40px;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.formContato .imagemContato .iconeInsta:hover img {
  content: url("../img/instaazul.png");
 transform: scale(1.1);
 filter: brightness(0.7) drop-shadow(0 0 15px rgba(21, 101, 192, 0.6));
 transition: 0.2s ease; 
}
.formContato .imagemContato .iconeLinkedin:hover img {
  content: url("../img/linkedinAzul.png");
  filter: brightness(0.7) drop-shadow(0 0 10px rgba(21, 101, 192, 0.6));
  transform: scale(1.1);
  transition: 0.3s ease;   
}
.formContato .imagemContato .iconesap:hover img {
  content: url("../img/sapazul.png");
  filter: brightness(0.7) drop-shadow(0 0 15px rgba(21, 101, 192, 0.6));
  transform: scale(1.1);
  transition: 0.3s ease;
}
/* ======= FIM SEÇÃO FORMULÁRIO ======= */
/* ===  CONFIRMAÇÃO DE ENVIO DO EMAIL=== */
 .mensagem-envio {
  position: absolute;
  top: 450px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 500px; 
  padding: 15px 20px;
  border-radius: 10px;
  text-align: center;
  line-height: 1.6; 
  font-weight: 50;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  animation: fadeIn 0.6s ease;
  z-index: 10;
  font-size: 15px;  
  margin-bottom: 20px;
}
.mensagem-envio.erro h4,
.mensagem-envio.sucesso h4{
padding: 5px; 
}
body.dark-mode .mensagem-envio.erro h4,
body.dark-mode .mensagem-envio.sucesso h4{
  color: #fff;     
}
.mensagem-envio.sucesso {
  background-color: var(--cor-fundo);
  color: var(--cor-azul-escuro);
  border: 2px solid var(--cor-azul-escuro);  
}
.mensagem-envio.sucesso span{ 
  padding: 5px;
  color: var(--cor-azul-claro);
  font-size: 25px;  
}
.mensagem-envio.erro {
  background-color: var(--cor-fundo);
  color: var(--cor-azul-escuro);
  border: 2px solid var(--cor-azul-escuro);
}
/* botão de fechar */
.fechar-msg {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #555;
  transition: transform 0.2s ease, color 0.3s;
}
.fechar-msg:hover {
  color: #000;
  transform: scale(1.2);
}
@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ===  PAGINA DE Política de Privacidade === */
.politica-container {
  text-align: center; 
  max-width: 1500%;
  height: auto;
  padding: 80px 0 50px;
  background-color: var(--cor-fundo-secundario); 
  margin-top: 120px; 
}
/* Título principal */
.conteudo-politica h1 {
  font-size: 32px;
  margin-bottom: 20px;
  color: var(--cor-azul-escuro);
  font-family: var(--fonte-principal);
  font-weight: 600;
}
/* Subtítulos */
.conteudo-politica h2 {
  font-size: 22px;
  margin-top: 30px;
  color: var(--cor-azul-escuro);
  font-family: var(--fonte-principal);
  font-weight: 500;
}
body.dark-mode .conteudo-politica h2, 
body.dark-mode .conteudo-politica h1{
  color: var(--cor-amarelo);
}
/* Parágrafos e listas */
.conteudo-politica p,
.conteudo-politica ul {
  font-size: 17px;
  line-height: 1.7;
  color: var(--cor-texto); 
  font-family: var(--fonte-secundaria);
  margin-bottom: 20px;
  font-weight: 400;
}
/* Ajusta UL para continuar centralizada */
.conteudo-politica ul {
  padding-left: 0;              
  list-style-position: inside;   
  margin: 10px 0;
}
/* Links dentro da página */
.conteudo-politica a {
  color: var(--cor-azul-escuro);
  text-decoration: none;
  font-weight: 600;
}

.conteudo-politica a:hover {
  filter: brightness(1.2);
  color: var(--cor-azul-claro);
}
body.dark-mode .conteudo-politica a:hover{
  color: var(--cor-amarelo);
}

/*  JANELA POP-UP DE COOKIES CENTRALIZADO */
.cookie-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    width: 90%;
    max-width: 400px;
    background: var(--cor-fundo-secundario);
    color: var(--cor-texto);
    padding: 25px 20px;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    border-left: 6px solid var(--cor-amarelo);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    z-index: 9999;
    text-align: center;
}
.cookie-popup p {
   font-family: var(--fonte-secundaria);
   font-weight: 300;
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
}
.cookie-popup .cookie-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}
.cookie-popup button {
    background: var(--cor-azul-escuro);
    color: #fff;
    border: none;
    padding: 10px 18px;
    font-weight: 300;
    cursor: pointer;
    border-radius: 8px;
    transition: 0.2s ease;
}
.cookie-popup button:hover {
    opacity: 0.9;
}
.cookie-popup.hidden {
    display: none;
}
body.dark-mode .cookie-popup button{
  background: var(--cor-amarelo);  
  color: #222;
}
/* Responsivo */
@media (max-width: 400px) {
    .cookie-popup {
        width: 90%;
        padding: 20px;
    }

    .cookie-popup .cookie-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .cookie-popup button {
        width: 100%;
    }
}

/* =========RESPONSIVO DO SITE =========== */

/* Desktop grande (até 1200px) */
@media (max-width: 1200px) {   
  .container,
  .banner .container,
  .sobre .container,
  .servicos .container-servico {  
    max-width: 1200px;
    height: auto;   
    gap: 20px;
    margin: 0 ;
}
.container ul {    
    gap: 30px;
}
    .container ul li a {
        font-size: 18px; 
    }
     .container h1 {
        margin: 0;
    }
    
   .banner .container,
   .sobre .container {
    gap: 80px;
    margin: 0 30px;
    }
    .sobre  {
      padding: 50px;
    }       
   
    .banner .container div:nth-child(1),
    .banner .container div:nth-child(2),
    .sobre .container div:nth-child(1),
    .sobre .container div:nth-child(2) {      
    max-width: 460px;
    height: auto;  
    }
    .banner .container div h2,
    .banner .container div span,
    .sobre .container div h2,
    .sobre .container div span,
    .porque .container div h2,
    .porque .container div span{
      font-size: 1.8rem;   
    }    
    .banner .container div p,
    .sobre .container div p,
    .porque .container div p{    
      font-size: 1.2rem;  
      font-weight: 500; 
    }  

.banner .container .imgbanner img,
.sobre .container .imagem img,
.porque .container .imgpq img {
    max-width: 500px;
    height: auto;      
  
}   
.porque .container .imgpq img {
    max-width: 430px;
    height: auto;    
}   
/* serviços */
.servicos .container-servico {  
    margin: 0;  
    
    padding:0;

}
.servicos .container-servico h2 {    
    font-size: 2rem;   
    padding: 30px 40px;
}
.servicos .container-servico a.botao{        
    margin: 0 0 40px;
}
.servicos .container-servico .servicos-grid {    
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
}
 .porque .container {      
  padding: 0 0 40px;
  
   }
 .porque .container div:nth-child(1),
 .porque .container div:nth-child(2){      
    max-width: 460px;
    height: auto;  
   }       
     .porque .container div h4{    
      font-size: 1.2rem;  
      margin: 15px; 
    }
    .porque .container div h2{        
      margin: 15px; 
    }  
   .containercard {
    max-width: 900px; /* largura máxima do container */
    width: 100%; /* se a tela for menor que 1500px, ocupa 100% */
    margin: 0 auto; /* centraliza horizontalmente o container */
    display: grid;
    grid-template-columns: repeat(2, 2fr);
    gap: 40px; /* espaço entre os cards */
}            
    .etapas .container {
    max-width: 900px;
    height: auto; 
    padding: 50px 0 0;
     margin: 0 auto; 
     
   }   
   /* título principal centralizado */
    .etapas .container h2 {
     font-size: 1.8rem; 
  
     }
    .etapas .container span {
      font-size: 1.8rem; 
     }
  .etapas .container .linha-tempo{
  width: 100%;
  height: 50px; 
}
.etapas .container .etapas-item .um, .dois {
  width: 200px;
  height: auto;    
}
.etapas .container .etapas-item .dois img {
  width: 50px;
  padding: 120px 0 0;
}
.etapas .container .etapas-item .um img {
  width: 50px;   
}
.etapas .container .etapas-item .dois span,
.etapas .container .etapas-item .um span {
  font-size: 1.2rem;  
}
.etapas .container .etapas-item .dois p,
.etapas .container .etapas-item .um p {
  font-size: 1rem; 
  font-weight: 600; 
}
.etapas .container .etapas-item .um p {
 padding: 50px 20px 10px;
}
.etapas .container .etapas-item .dois p {
 padding: 10px 20px 10px;
}
.etapas .container .etapas-item .um h2,
.etapas .container .etapas-item .dois h2 {
  font-size: 1.2rem;  
}
/* ---------------- RODAPÉ GERAL ---------------- */
.rodape {
  height: auto;
  background-color: var(--cor-fundo);
  padding: 50px 0 0 0;  
}
/* Container principal das colunas */
.rodape > div:first-child {
  max-width: 900px;
  margin: 0 auto; 
  padding: 20px 30px  ;
}
/* ---------------- CADA COLUNA ---------------- */
.rodape > div > div {
  flex: 1  200px;
}
/* ---------- LOGO ---------- */
.rodape > div > div:nth-child(1) .logo-site {
  width: 150px;   
}
/* Texto abaixo da logo */
.rodape > div > div:nth-child(1) > p {
  font-size: 1rem;
}
/* ---------- ÍCONES SOCIAIS ---------- */
.rodape > div > div:nth-child(1) > div {
  gap: 15px;
  margin-top: 15px;
}
.rodape > div > div:nth-child(1) > div a img {
  width: 35px;
  transition: transform 0.2s ease, filter 0.3s ease;  
}
/* Ícone Política de Privacidade */
.iconePrivacidade img {
  width: 35px;
  transition: transform 0.2s ease, filter 0.3s ease;
}

/* ---------- TÍTULOS DAS COLUNAS ---------- */
.rodape > div > div:nth-child(2) h2,
.rodape > div > div:nth-child(3) h2 { 
  font-size: 1.6rem;  
}
/* ---------- LINKS ---------- */
.rodape > div > div:nth-child(2) a {
  font-size: 1.2rem; 
  font-weight: 600;
  margin-bottom: 10px;
}
.rodape > div > div:nth-child(3) a {  
  font-size: 1rem; 
  font-weight: 600;
  margin-bottom: 10px;
}
/* ---------- RODAPÉ SECUNDÁRIO ---------- */
.rodape-secundario {
  gap: 200px;    
}
.quemSomos div div:nth-child(1),
.quemSomos div div:nth-child(2),
.nossaequipe .container div div:nth-child(1),
.nossaequipe .container div div:nth-child(2) {
    max-width: 550px;
    height: auto;
    align-items: flex-start;  
}
.quemSomos div div:nth-child(2) {
    max-width: 400px;
    padding: 80px 30px 0;  
}
.quemSomos div div:nth-child(2) p {
  font-size: 1.2rem;
  font-weight: 500;   
}
.quemSomos div div:nth-child(2) h2,
.quemSomos div div:nth-child(2) span,
.nossaequipe div h2 {
   font-size: 2rem;
}
.quemSomos div img {
    max-width: 500px;
    height: auto;  
}
.nossaequipe {    
    padding: 30px 30px;   
}
.nossaequipe .container div:nth-child(1), .nossaequipe .container div:nth-child(2) {
    max-width: 550px;
    height: auto;    
    padding: 20px 20px;   
}
.nossaequipe div h2{
     font-size: 2rem;
}
.nossaequipe .container div:nth-child(2)> p {
   font-size: 1.2rem;
   font-weight: 300;   
}
.nossaequipe .container div:nth-child(2)> p span {
   font-size: 1.2rem;
   font-weight: 400;   
}
.nossaequipe .container div:nth-child(1)> span,
.nossaequipe .container div:nth-child(1)> h4,
.nossaequipe .container div:nth-child(1)> a{
   font-size: 1.5rem;
   font-weight: 400;   
}
.servicoWeb .container div:nth-child(1),
.servicoHosp .container div:nth-child(2),
.servicoSeo .container div:nth-child(1),
.servicoMark .container div:nth-child(2),
.servicoProjGrafico .container div:nth-child(1),
.servicoMobile .container div:nth-child(2) {
 max-width: 550px; 
 height: auto;
 padding: 30px 30px; 
}  
.servicoWeb .container div:nth-child(1) >h2 ,
.servicoHosp .container div:nth-child(2) >h2,
.servicoSeo .container div:nth-child(1) >h2,
.servicoMark .container div:nth-child(2) >h2,
.servicoProjGrafico .container div:nth-child(1) >h2,
.servicoMobile .container div:nth-child(2) >h2 {
 font-size: 2rem;
}    
.servicoWeb .container div:nth-child(2) >img,
.servicoHosp .container div:nth-child(1)>img,
.servicoSeo .container div:nth-child(2) >img,
.servicoMark .container div:nth-child(1)> img,
.servicoProjGrafico .container div:nth-child(2) >img,
.servicoMobile .container div:nth-child(1) >img {
 max-width: 500px; 
 height: auto;
}   
.servicoWeb .container div p,
.servicoHosp .container div p,
.servicoSeo .container div p,
.servicoMark .container div p,
.servicoProjGrafico .container div p,
.servicoMobile .container div p{  
  font-size: 1.2rem;
  font-weight: 500;
}   
.servicoWeb .container div .destaque-palavra,
.servicoHosp .container div .destaque-palavra,
.servicoSeo .container div .destaque-palavra,
.servicoMark .container div .destaque-palavra,
.servicoProjGrafico .container div .destaque-palavra,
.servicoMobile .container div .destaque-palavra{  
  font-size: 1.2rem;
  font-weight: 600;
}   
/* Título "CONTATO" */
.formContato h2 {
  font-size: 2rem;   
}
.formContato h4 {
  font-size: 1.2rem;  
}
.formContato .container > div:nth-child(2){
  max-width: 1100px;
  height: auto;
}
.formContato form {
    width: 1200px;
    height: auto;  
}
.formContato .formMensagem input,
.formContato .formMensagem select {
 max-width: 500px;  
}
.formContato textarea {
  max-width: 500px;
  height: 220px; 
}
/* Estilo padrão dos botões */
.formContato .botoes button {  
  width: 180px;  
}
.formContato .botoes {
  padding: 0 80px 0 0;
}
/* ===== Texto e imagem da seção de contato ===== */
.formContato .imagemContato {
  max-width: 550px;
  height: auto;  
  text-align: start;
  margin-top: -90px;
}
/* Estilo do texto */
.formContato .imagemContato h2 {
  font-size: 1.7rem; 
  font-weight: 500;  
}
/* Destaque no nome da marca */
.formContato .imagemContato span {
  font-size: 1.8rem;
}
/* Imagem abaixo do texto */
.formContato .imagemContato img {
  width: 100%;
  max-width: 400px; 
}
/* ---------- ÍCONES SOCIAIS ---------- */
.formContato .imagemContato > div a img {
  width: 40px;  
}
/* ===  PAGINA DE Política de Privacidade === */
.politica-container {  
  max-width: 1200%;
  height: auto;
}
.politica-container .conteudo-politica{   
  height: auto;
}
/* Título principal */
.conteudo-politica h1 {
  font-size: 2rem; 
}
/* Subtítulos */
.conteudo-politica h2 {
  font-size: 1.5rem; 
  padding: 0 0 10px 0;
}
.conteudo-politica p,
.conteudo-politica li {
 font-weight: 400;
}
/* Links dentro da página */
.conteudo-politica a {
font-size: 1.4rem;
}

}

/* Tablets (até 992px) */
@media (max-width: 992px) {
  .container,
  .banner .container,
  .sobre .container,
  .servicos .container-servico,
  .porque .container {   
    height: auto;   
    margin: 0;
    padding: 0 ;    
}    
  .servicos .container-servico,
  .porque .container  {  
    gap: 30px;    
}  
  .banner .container,
   .sobre .container {  
    gap: 10px;    
}  
    .banner .container div h2,
    .banner .container div span,
    .sobre .container div h2,
    .sobre .container div span,
    .porque .container div h2,
    .porque .container div span{
      font-size: 1.7rem;   
    }          
.banner .container .imgbanner,
.sobre .container .imagem  {
   padding: 0 40px 0 0;
}    
.banner .container div:nth-child(1),
.sobre .container div:nth-child(2)  {
   max-width: 450px;
   height: auto;  
   margin: 0 10px;  
   padding: 0 20px;
}        
.banner .container div:nth-child(2),
.sobre .container div:nth-child(1) {
   max-width: 400px;
   height: auto;    
}     
.banner .container div:nth-child(2) .imgbanner,
.sobre .container div:nth-child(1) .imagem {
   max-width: 400px;
   height: auto; 
   margin: 0; 
   padding: 0;    
}       
.banner .container .imgbanner img,
.sobre .container .imagem img {
   max-width: 400px;
    height: auto;    
}      
/* serviços */
.servicos .container-servico h2 {    
    font-size: 2rem;   
    padding: 40px 0 0 0;
}
.servicos .container-servico .botao {    
  margin-bottom: 50px;
}
 .porque .container {      
  padding: 0 0 40px;  
 }
 .porque .container div:nth-child(1) {      
    max-width: 385px;
    height: auto;  
   }       
     .porque .container div h4{    
      font-size: 1rem;        
      font-weight: 500;
    }
    .porque .container div h2{        
      margin: 15px; 
      font-size: 1.7rem;
    }  
    .porque .container .imgpq img {
    max-width: 400px;
    height: auto;    
}   
 .containercard {
    max-width: 800px; 
    width: 100%; 
}    
    .etapas .container {
    max-width: 900px;
    height: auto; 
    padding: 50px 0 0;
     margin: 0 auto; 
     
   }   
   /* título principal centralizado */
    .etapas .container h2 {
     font-size: 1.7rem; 
  
     }
    .etapas .container span {
      font-size: 1.7rem; 
     }
  .etapas .container .linha-tempo{
  width: 100%;
  height: 40px; 
}
.etapas .container .etapas-item .um, .dois {
  width: 180px;
  height: auto;    
}
.etapas .container .etapas-item .um {
 padding: 80px 0 0;  
}
.etapas .container .etapas-item .um img {
  padding: 0 0 150px;
}
.etapas .container .etapas-item .dois span,
.etapas .container .etapas-item .um span {
  font-size: 1rem; 
  font-weight: 600; 
}
.etapas .container .etapas-item .dois p,
.etapas .container .etapas-item .um p {
  font-size: 0.8rem; 
  font-weight: 600;
  text-align: center;  
}
.etapas .container .etapas-item .um p {
 padding: 50px 10px 5px;
}
.etapas .container .etapas-item .um h2 {
 padding: 10px 0 0;
}
.etapas .container .etapas-item .dois h2 {
 padding: 0 0 10px;
}
.etapas .container .etapas-item .dois img {
  padding: 140px 0 0;
}

.etapas .container .etapas-item .dois p {
 padding: 10px 10px;
}
.etapas .container .etapas-item .um h2,
.etapas .container .etapas-item .dois h2 {
  font-size: 1rem;  
}
.quemSomos{
  padding: 0;
}
.quemSomos div img {
    max-width: 400px;
    height: auto;
 }
.bannerServico .banner-overlay .banner-content h2{
  font-size: 1.5rem
}
.servicoWeb,
.servicoHosp,
.servicoSeo,
.servicoMark,
.servicoProjGrafico,
.servicoMobile {
padding: 50px 30px;
}  
.servicoWeb .container,
.servicoHosp .container,
.servicoSeo .container,
.servicoMark .container,
.servicoProjGrafico .container,
.servicoMobile .container {
 padding: 0 30px 0 0;
}  
.servicoWeb .container div:nth-child(1),
.servicoHosp .container div:nth-child(2),
.servicoSeo .container div:nth-child(1),
.servicoMark .container div:nth-child(2),
.servicoProjGrafico .container div:nth-child(1),
.servicoMobile .container div:nth-child(2) {
 max-width: 460px; 
 height: auto;
 padding: 0 20px;
}  
.servicoWeb .container div:nth-child(2),
.servicoHosp .container div:nth-child(1),
.servicoSeo .container div:nth-child(2) ,
.servicoMark .container div:nth-child(1),
.servicoProjGrafico .container div:nth-child(2),
.servicoMobile .container div:nth-child(1) {
 max-width: 400px; 
 height: auto;
 padding: 0 30px 0 20px;
 padding-inline-start: 0 20px;
}  
.servicoWeb .container div:nth-child(2) >img,
.servicoHosp .container div:nth-child(1)>img,
.servicoSeo .container div:nth-child(2) >img,
.servicoMark .container div:nth-child(1)> img,
.servicoProjGrafico .container div:nth-child(2) >img,
.servicoMobile .container div:nth-child(1) >img {
 max-width: 400px; 
 height: auto;
}   
.servicoWeb .container div:nth-child(1) >h2 ,
.servicoHosp .container div:nth-child(2) >h2,
.servicoSeo .container div:nth-child(1) >h2,
.servicoMark .container div:nth-child(2) >h2,
.servicoProjGrafico .container div:nth-child(1) >h2,
.servicoMobile .container div:nth-child(2) >h2 {
 font-size: 1.8rem;
}   
.servicoWeb .container div p,
.servicoHosp .container div p,
.servicoSeo .container div p,
.servicoMark .container div p,
.servicoProjGrafico .container div p,
.servicoMobile .container div p{  
  font-size: 1rem;
  font-weight: 500;
}   
.bannerContato .banner-overlay .banner-content h2{
  font-size: 1.5rem;
}
.formContato .container > div:nth-child(2){
  max-width: 950px;
  height: auto;
}
.formContato form {
    width: 900px;
    height: auto;  
}
/* Estilo do texto */
.formContato .imagemContato h2 {
  font-size: 1.3rem; 
}
/* Destaque no nome da marca */
.formContato .imagemContato span {
  font-size: 1.4rem;
}
/* Imagem abaixo do texto */
.formContato .imagemContato img {
  width: 100%;
  max-width: 350px; 
}
}

@media not all and (max-width:768px){
  .abrir-menu,
  .fechar-menu{
    display: none;
  }
}

/* Celulares grandes (até 768px) */
@media (max-width: 768px) {

 .topo .container nav{
    background-color:rgba(66, 165, 245, 0.8);
    height: 100%;
    position: fixed;
    top: 0;
    max-width: 400px;
    width: 50%;
    z-index: 100;
    right: -400px;
    transition: right 1s ease-in-out;    
  }
   body.dark-mode .container nav {
   background-color: rgba(18, 18, 18, 0.6);
  }
  .menu-ativo .container nav{
    right: 0;
  }
   .menu-ativo .container nav a{
    color: var(--cor-azul-escuro);
    font-weight: 600;      } 
 
  .container nav ul {
    flex-direction: column;   
    padding:  20px 20px;  
    gap: 10px; 
  }  
  /* ########## MENU MOBILE ############# */
  .abrir-menu{
    background-image: url(../img/abrir-menu.png);
    background-size: cover;
    padding: 20px;
    border: 0;
    display: block;
    margin-right: 10px;
  }
  body.dark-mode .abrir-menu {
   background-image: url(../img/abrir-menuBlack.svg);
}
  .fechar-menu{
    background-image: url(../img/fechar-menu.png);
    background-size: cover;
    padding: 20px;
    border: 0;
    display: block;
    margin-right: 10px;
  }
  body.dark-mode .fechar-menu {
   background-image: url(../img/fechar-menuBlack.svg);
 }   

   .container,
  .banner .container,
  .sobre .container,
  .servicos .container-servico,
  .porque .container {     
    height: auto;  
    padding: 0 10px 0 10px;    
}
.container ul li a {
        font-size: 0.8rem;
}
  .banner .container,
  .sobre .container,
  .servicos .container-servico,
  .porque .container  {  
    gap: 50px;
    flex-direction: column;    
}
  .banner {  
   padding: 80px 0 16px ;    
}
  .banner .container div {  
    margin: 10px;    
}

.servicos .container-servico {    
  gap: 30px;      
}
.servicos .container-servico a.botao{    
  margin: 0 0 20px;   
}
.servicos .container-servico .servicos-grid {    
    grid-template-columns: repeat(1, 1fr);   
}
  .porque  {    
  padding: 40px 16px ;   
}   
  .porque .container  {  
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 50px; 
  margin: 0 0 50px 0 ;   
}   
 .porque .container > div {  
  width: 100%;
  max-width: 600px;    
}   
.imgpq img{
  width: 100%;
  max-width: 350px;
  height: auto;
}
.porque .containercard{
    max-width: 350px; 
    width: 100%; 
    grid-template-columns: repeat(1, 1fr);
    gap: 20px; 
}    
.etapas{
  display: none;
}
.rodape{
  padding: 10px 10px;
}
.rodape > div:first-child {
  flex-direction: column;
  align-items: center;
  gap: 0;       
}
  .rodape-secundario {
    flex-direction: column;
    gap: 0;
  }

.quemSomos{
  height: auto;
  padding: 30px 16px;
}
.quemSomos .container{
  flex-direction: column;
  align-items: center;
  padding: 40px 0 0 0;
}
.quemSomos div div:nth-child(2) {  
   padding: 20px 10px;
  }
 .quemSomos .container div p {  
    padding: 0;
}
.nossaequipe .container{
  flex-direction: column;
  gap: 0;
}
.bannerServico {
        height: 250px;
 }
 .bannerServico .banner-overlay .banner-content h2 {
        font-size: 1.2rem;       
 }
 .servicoWeb,
.servicoHosp,
.servicoSeo,
.servicoMark,
.servicoProjGrafico,
.servicoMobile {
padding: 40px 16px;
}  
.servicoWeb .container,
.servicoHosp .container,
.servicoSeo .container,
.servicoMark .container,
.servicoProjGrafico .container,
.servicoMobile .container {
 flex-direction: column;
 align-items: center;
 padding: 0;
 gap: 40px; 
}  
.bannerContato{
  height: 250px;
}
.bannerContato .banner-overlay .banner-content h2 {
        font-size: 1.2rem;       
 }
 .formContato{
  padding: 40px 40px; 
 }
 .formContato .container h2{
  font-size: 1.2rem;  
  margin: 0 0 10px 0;
 }
 .formContato .container h4{
  font-size: 1rem;  
 }
.formContato .container > div:nth-child(2) {
        max-width: 700px;
        height: auto;
        padding: 20px 16px;
 }
  .formContato form {
   max-width: 680px;
   height: auto;
   flex-direction: column;
   align-items: center;
 }
 .formContato .imagemContato{
   max-width: 680px;
   height: auto;
   margin: 0;
   gap: 10px;
 }
 .formContato .imagemContato h2 {
        font-size: 1.2rem;
  }
 .formContato .imagemContato span {
        font-size: 1.4rem;
  }
   .formContato .imagemContato img{
        max-width: 250px;
  }
   .formContato .imagemContato > div a img{
     max-width: 30px;
  }
.formContato .formMensagem {
   width: 90%;
   gap: 1.2em;   
}
.formContato .formMensagem input,
.formContato .formMensagem select,
.formContato .formMensagem textarea {
 max-width: 650px;  
}
.formContato .formMensagem input,
.formContato .formMensagem select,
.formContato .formMensagem textarea,
.formContato .formMensagem select option  {
 font-size: 1rem; 
}
.mapa iframe {
  height: 250px;
}
.politica-container{
  padding: 50px 16px 20px;
}
.politica-container .conteudo-politica {
 padding: 0 30px;
}
.politica-container .conteudo-politica h1 {
  font-size: 1.5rem;
}
.politica-container .conteudo-politica h2 {
  font-size: 1.2rem;
  font-weight: 600;
}
.politica-container .conteudo-politica p,
.politica-container .conteudo-politica li {
  font-size: 1rem;  
}
.conteudo-politica a {
  font-size: 1.2rem;
 }
}

/* FIM do Tablet - 768  */


/* Celulares - 0 - 400  */
@media (max-width: 400px) { 
   html, body {
    width: 100%;
    overflow-x: hidden;
  }
 .topo .container nav{
  width: 80%;
  max-width: 320px;
  right: -100%;
}
.menu-ativo .container nav{
  right: 0;
}
  img {
    max-width: 100%;
    padding: 0;
    height: auto;
    display: block;
  }
    .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .banner {   
    margin-top: 100px;
    padding: 0 0 20px 0;
}
.banner .container,
.sobre .container {
  gap: 30px;
}
.banner .container .imgbanner,
.sobre .container .imagem{
  padding: 0;
}
.banner .container .imgbanner,
.banner .container .imgbanner img,
.sobre .container .imagem,
.sobre .container .imagem img,
.porque .container .imgpq img {
  max-width: 300px;
  margin: 0 auto;
}
.banner .container div:nth-child(1){
  padding: 80px 16px 0;
}
.banner .container div h2{
  font-size: 1.4rem;
}
.banner .container div span{
  font-size: 1.4rem;
}
.banner .container div p{
  font-size: 1rem;
}
.sobre{
  padding: 30px 20px;
}
.sobre .container div h2{
  font-size: 1.4rem;
}
.sobre .container div span,
.porque .container div h2,
.porque .container div span{
  font-size: 1.4rem;
}
.sobre .container div p,
.porque .container div p{
  font-size: 1rem;
  padding: 0;
}
.servicos .container-servico h2 {
  font-size: 1.7rem;
}
.servicos .container-servico a.botao {
  font-size: 1rem;
}
.porque .container div:nth-child(1){
   max-width: 300px;
   height: auto;
   padding: 0 16px;
   gap: 30px;     
  
}
.porque .container div:nth-child(2){
    padding: 0 16px; 
}
.porque .container div p{
  font-size: 1rem;
}
.rodape-secundario p{
  font-size: 0.8rem ;
}
.quemSomos .container {   
    margin-top: 50px;
    padding: 0 0 16px 0;
}
.quemSomos div img {
 max-width: 300px;
}
.quemSomos .container div:nth-child(2) h2,
.quemSomos .container div:nth-child(2) span{
  font-size: 1.4rem;
}
.quemSomos .container div:nth-child(2) p{
  font-size: 1rem;
}
 .nossaequipe div h2 {
  font-size: 1.4rem;
 } 
 .nossaequipe .container div:nth-child(1) span,
 .nossaequipe .container div:nth-child(1) h4 {
  font-size: 1.2em;
 }
 .nossaequipe .container div:nth-child(1), .nossaequipe .container div:nth-child(2) {
  max-width: 330px;
  height: auto;
  padding: 10px 16px;
 }
 .nossaequipe .container div:nth-child(2) p,
 .nossaequipe .container div:nth-child(2) > p span,
 .nossaequipe .container div:nth-child(2) > a{
  font-size: 1rem;
 }
.bannerServico {
        height: 150px;
 }
 .bannerServico .banner-overlay .banner-content h2 {
        font-size: 1rem;       
 }
.servicoWeb .container,
.servicoHosp .container,
.servicoSeo .container,
.servicoMark .container,
.servicoProjGrafico .container,
.servicoMobile .container { 
 gap: 30px; 
}  
 .servicoWeb .container div:nth-child(1) >h2,
 .servicoHosp .container div:nth-child(2) >h2,
 .servicoSeo .container div:nth-child(1) >h2,
 .servicoMark .container div:nth-child(2) >h2,
 .servicoProjGrafico .container div:nth-child(1) >h2,
  .servicoMobile .container div:nth-child(2) >h2{
  font-size: 1.4rem;
 }
 .servicoWeb .container div p,
 .servicoWeb .container div .destaque-palavra,
 .servicoHosp .container div p,
 .servicoHosp .container div .destaque-palavra,
 .servicoSeo .container div p,
 .servicoSeo .container div .destaque-palavra,
 .servicoMark .container div p,
 .servicoMark .container div .destaque-palavra,
 .servicoProjGrafico .container div p,
 .servicoProjGrafico .container div .destaque-palavra,
 .servicoMobile .container div p,
 .servicoMobile .container div .destaque-palavra{
  font-size: 1rem;  
 } 
 .servicoHosp .container div p,
 .servicoHosp .container div .destaque-palavra, 
 .servicoMark .container div p,
 .servicoMark .container div .destaque-palavra, 
 .servicoMobile .container div p,
 .servicoMobile .container div .destaque-palavra{
  font-weight: 300;
 }
 .servicoWeb .container div:nth-child(2) >img,
 .servicoHosp .container div:nth-child(1) >img,
 .servicoSeo .container div:nth-child(2) >img,
 .servicoMark .container div:nth-child(1) >img,
 .servicoProjGrafico .container div:nth-child(2) >img,
 .servicoMobile .container div:nth-child(1) >img{
    max-width: 100%;
    padding: 0;
 } 
.bannerContato .banner-overlay .banner-content h2 {
        font-size: 1rem;       
 }
 .formContato .container{
  padding: 0;
 }
 .formContato .container h2{
  font-size: 1.4rem;
  font-weight: 700; 
  padding: 20px; 
 }
 .formContato .container h4{
  font-size: 0.9rem;  
 }
 .formContato .imagemContato h2 {
        font-size: 1rem;
        font-weight: 300;
  }
 .formContato .imagemContato span {
        font-size: 1.2rem;       
  } 
  .formContato form {
    width: 90%;  
    margin: 0 auto;    
    padding: 0 16px;   
    box-sizing: border-box;
  }
  .formContato .formMensagem {
    width: 100%;
    gap: 1em;
  }

.formContato .formMensagem input,
.formContato .formMensagem select,
.formContato .formMensagem textarea,
.formContato .formMensagem select option {
  width: 100%;
  box-sizing: border-box;
  font-size: 0.8rem; 
}
.formContato .botoes{
  padding: 0;
} 
.politica-container .conteudo-politica h1 {
  font-size: 1.2rem;
}
.politica-container .conteudo-politica h2 {
  font-size: 1rem;
}
.politica-container .conteudo-politica p,
.politica-container .conteudo-politica li {
  font-size: 0.9rem;
}
 .rodape-secundario {
    display: flex;             
    flex-direction: column;    
    align-items: center;        
    text-align: center;
  }

  .rodape-secundario p {
    margin: 0;
    width: 100%;
    font-size: 0.7rem;
  }
 
}