@font-face {
     font-family: "Everett-Regular";
     src: url("../fontes/Everett-Regular.ttf") format("truetype");
     font-display: swap;
}
 html {
     -webkit-overflow-scrolling: touch;
     scroll-behavior: smooth;
}
 body{
    font-family: 'Everett-Regular', sans-serif;
     font-size:16px;
     padding:0;
     margin:0;
     background:#e4e0e1;
     color:#3700ff;
}
 a {
     color: #3700ff;
}
 h1, #obras h2, #fale-conosco h2 {
     font: 50px 'Everett-Regular', sans-serif;
     text-align: center;
}
 .container {
     width: 1000px;
     margin: 0 auto;
}
 .total {
     max-width: 1360px;
     margin: 0 auto;
}
 #topo {
     border-bottom: 2px solid #3700ff;
}
 #topo .container {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 35px 25px 5px 25px;
     border-left: 2px solid #3700ff;
     border-right: 2px solid #3700ff;
}
 #topo2 .container {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 25px;
     border-left: 2px solid #3700ff;
     border-right: 2px solid #3700ff;
}
 #menu-desktop ul {
     display: flex;
     justify-content: space-around;
     border: 2px solid #3700ff;
     padding: 0;
}
 #menu-desktop ul li {
     list-style: none;
}
 #menu-desktop ul li a {
     display: table;
     padding: 10px 20px;
     text-decoration: none;
     text-align: center;
     font-weight: bold;
}
 #menu-desktop ul li a:hover, #menu-desktop ul li a.ativo {
     background: #3700ff;
     color: #ffffff;
}
 .menu-toggle {
     display: none;
     font-size: 30px;
     color: #3700ff;
}
 .menu-toggle:hover {
     color: #000000;
}
 #menu-mobile {
     width: 100%;
     height: 100%;
     display: none;
     position: fixed;
     overflow-y: auto;
     top: 0;
     left: 0;
     bottom: 0;
     background: #e4e0e1;
     padding: 7% 0;
     z-index: 5;
     text-align: center;
}
 #menu-mobile ul {
     margin: 30px 0 0 0;
     padding: 0;
}
 #menu-mobile > ul > li {
     width: 100%;
     display: table;
     list-style: none;
     padding-top: 10px;
     border-radius: 10px;
     color: #3700ff;
}
 #menu-mobile > ul > li i{
     color: #ffef01;
     padding-right: 5px;
}
 #menu-mobile > ul > li a {
     font-size: 20px;
     color: #3700ff;
     text-decoration: none;
     text-align: center;
     font-weight: bold;
     padding: 10px 20px;
     margin: 10px 0;
}
 #menu-mobile > ul > li a:hover {
     background: #3700ff;
     color: #ffffff;
}
 .fechar {
     position: absolute;
     top: 10px;
     right: 10px;
     color: #1462b3;
     cursor: pointer;
}
 #sobre {
     border-bottom: 2px solid #3700ff;
}
 #sobre .container {
     display: flex;
     justify-content: space-between;
     align-items: center;
     position: relative;
     padding: 30px 25px 5px 25px;
     border-left: 2px solid #3700ff;
     border-right: 2px solid #3700ff;
}
 #sobre .frase {
     max-width: 55%;
     font-size: 80px;
     line-height: 100%;
     z-index: 3;
     padding: 50px 0;
}
 #sobre .frase span {
     width: 80px;
     height: 2px;
     background: #3700ff;
     display: table;
     margin-bottom: 30px;
}
 #sobre .frase img {
     float: right;
     padding: 40px 40px 20px 0;
}
 #sobre .imagens .foto1 {
     position: absolute;
     top: 0;
     right: 225px;
     z-index: 2;
}
 #sobre .imagens .foto2 {
     position: absolute;
     top: 100px;
     right: 30px;
     z-index: 1;
}
 #sobre2 {
     border-bottom: 2px solid #3700ff;
}
 #sobre2 .container {
     padding: 0 25px 5px 25px;
     border-left: 2px solid #3700ff;
     border-right: 2px solid #3700ff;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 260px;
}
 #sobre2 .container span {
     max-width: 54%;
     text-align: center;
     color: #000000;
     font-size: 20px;
}
 .bordas .container {
     padding: 0 25px 5px 25px;
     height: 60px;
     border-left: 2px solid #3700ff;
     border-right: 2px solid #3700ff;
     position: relative;
}
 .bordas .container .quadrado1{
     width: 20px;
     height: 20px;
     background: #3700ff;
     position: absolute;
     top: 0;
     left: -22px;
}
 .bordas .container .quadrado2{
     width: 20px;
     height: 20px;
     background: #3700ff;
     position: absolute;
     top: 0;
     right: -22px;
}
 #servicos {
     text-align: center;
}
 #servicos img {
     max-width: 100%;
}
 #obras {
     display: flex;
     flex-direction: column;
}
 #obras .container {
     display: flex;
     justify-content: space-around;
}
 .interna {
     border-top: 2px solid #3700ff;
     margin-bottom: 40px;
}
 .block {
     display: block !important;
}
 .grid {
     display: grid !important;
     grid-template-columns: 1fr 1fr 1fr 1fr;
     grid-gap: 30px;
}
 #obras .item {
     border: 2px solid #3700ff;
     display: flex;
     flex-direction: column;
     align-items: center;
}
 #obras .item a {
     width: 100%;
     text-decoration: none;
}
 #obras .item .foto {
     width: 100%;
     height: 170px;
     display: block;
     margin: 0 auto;
     overflow: hidden;
     transition: .35s;
}
 #obras .item figure {
     width: 100%;
     height: 100%;
     margin: 0;
}
 #obras .item figure img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: .35s;
}
 #obras .item:hover img {
     transform: scale(1.15);
}
 #obras .item .moldura {
     min-height: 80px;
     display: flex;
     justify-content: center;
     align-items: center;
     border-top: 2px solid #3700ff;
     text-align: center;
}
 #obras .item:hover .moldura {
     background: #3700ff;
     color: #ffffff;
}
 #obras .item .moldura .nome {
     font-weight: bold;
     display: flex;
     flex-direction: column;
     padding: 0 10px;
}
 #obras .item .moldura .nome span {
     font-size: 14px;
     font-weight: normal;
}
 #obras .bt {
     font-weight: bold;
     border: 2px solid #3700ff;
     padding: 10px 20px;
     color: #3700ff;
     text-decoration: none;
     margin: 30px auto;
     transition: .35s;
}
 #obras .bt:hover {
     background: #3700ff;
     color: #ffffff;
     transform: scale(1.15);
}
 #galeria {
     border: 2px solid #3700ff;
}
 #galeria li img {
     min-width: 100%;
}
 #obras.interna > .container > .nome {
     display: flex;
     justify-content: center;
     font-weight: bold;
     flex-direction: column;
     padding: 10px;
     text-align: center;
     background: #3700ff;
     color: #ffffff;
     margin-bottom: 40px;
}
 #obras.interna > .container > .nome span {
     font-size: 14px;
     font-weight: normal;
}
/*fale conosco*/
 #fale-conosco {
     background: #000000;
     color: #ffffff;
     padding: 70px 0 50px 0;
     margin-top: 40px;
     display: flex;
     flex-direction: column;
}
 #fale-conosco h2{
     padding: 10px 40px;
     background: #3700ff;
     border: 2px solid #ffffff;
     border-radius: 100px;
     margin: 0 auto;
}
 #rodape {
     background: #3700ff;
     color: #ffffff;
     padding: 40px 0;
}
 #rodape .container {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     align-items: center;
}
 #rodape .contato {
     text-align: left;
}
 #rodape .logoRodape {
     text-align: center;
}
 #rodape .endereco {
     text-align: right;
}
 #rodape .direitos {
     text-align: center;
     padding-top: 20px;
     font-size: 14px;
}
 #rodape .direitos a {
     display: flex;
     justify-content: center;
     padding-top: 20px;
}
 .form-geral{
     display: flex;
     flex-direction: column;
     width:80%;
     margin:0 auto;
}
 .form-geral .span10, .form-geral textarea {
     width: calc(100% - 12px);
     min-height:40px;
     padding: 4px 6px;
     font-family: 'Everett-Regular', sans-serif;
     font-size:18px;
     border:0;
     background: #000000;
     color:#ffffff;
     outline:2px solid #ffffff
}
.interna .form-geral .span10, .interna .form-geral textarea {
    background: #e4e0e1;
}
 .form-geral .control-group{
    width:100%;
     float:left;
     margin-top: 13px;
     padding-top: 13px;
}
 .form-geral label {
     display: block;
     margin-bottom: 5px;
}
 .form-geral .control-label {
     float: left;
     width: 20%;
     padding-top: 5px;
    text-align: right;
     display:none;
}
 .form-geral .controls {
     margin-left: 0%;
     height:55px;
}
 .form-geral .controls-textarea{
    height:140px;
}
 .form-geral .error{
    color:#ec2c3a;
}
 .form-geral .btenviar{
    font-family: 'Everett-Regular';
     float: left;
     padding:10px 20px;
     margin-bottom: 20px;
     border:2px solid #ffffff;
     background:#3700ff;
     color:#ffffff;
     font-size:18px;
     cursor:pointer;
     transition: .35s;
}
 .form-geral .btenviar:hover{
    transform: scale(1.15);
}
.whatsapp-flutuante {
     position: fixed;
     bottom:30px;
     right:10px;
     z-index:1000;
}
 .pulse {
     animation: pulse 1.2s 4.0s ease 4;
     margin: 0 auto;
     display: table;
     animation-direction: alternate;
     -webkit-animation-name: pulse;
     animation-name: pulse;
}
 @-webkit-keyframes pulse {
     0% {
         -webkit-transform: scale(1);
    }
     100% {
         -webkit-transform: scale(1.1);
    }
}
 @media (max-width:769px){
     .container {
         width: 94%;
         margin: 0 auto;
    }
     #menu-desktop {
         display: none;
    }
     .menu-toggle {
         display: table;
    }
     #topo .container, #topo2 .container, #sobre .container, #sobre2 .container, .bordas .container {
         border: 0;
    }
     .grid {
         grid-template-columns: 1fr 1fr;
    }
}
 @media (min-width:0px) and (max-width:479px){
     h1 {
         font-size: 40px;
    }
     .grid {
         grid-template-columns: 1fr;
    }
     .logo img {
         width: 150px;
    }
     #topo .container {
         padding: 10px 0;
         border: 0;
    }
     #topo2 .container {
         border: 0;
         padding: 25px 0;
    }
     #sobre {
         overflow: hidden;
    }
     #sobre .container {
         width: 100%;
         border: 0;
    }
     #sobre .container .frase {
         max-width: 100%;
         font-size: 60px;
    }
     #sobre2 .container {
         padding: 0;
         border: 0;
    }
     #sobre2 .container span {
         max-width: 100%;
    }
     .bordas {
         overflow: hidden;
    }
     .bordas .container {
         padding: 0;
         border: 0;
    }
     #galeria li img {
         max-width: 100%;
    }
     .form-geral {
         width: 100%;
    }
     #rodape .container{
         grid-template-columns: 1fr;
         text-align: center;
    }
     #rodape .container .contato, #rodape .container .endereco {
         text-align: center;
    }
     #rodape .container .logoRodape {
         padding: 20px 0;
    }
}
/* SEO: <h1> do topo mantem exatamente o visual do texto original de 80px */
#sobre .frase h1 { font: inherit; text-align: inherit; margin: 0; padding: 0; display: inline; }

/* ============================================================
   RESPONSIVIDADE (melhorias) - nao altera o visual do desktop
   ============================================================ */

/* 1) O container nunca ultrapassa a largura da tela.
      Corrige a rolagem lateral que havia entre 770px e 1000px. */
.container { max-width: 92%; }

/* Trava qualquer rolagem lateral (ex.: quadradinhos decorativos que
   ficam alguns px pra fora da borda em telas estreitas). */
html, body { overflow-x: hidden; }

/* 2) Topo/herói: abaixo de 1000px empilha o texto e as fotos
      (antes o texto de 80px sobrepunha as fotos posicionadas). */
@media (max-width: 1000px) {
    #sobre { overflow: hidden; }
    #sobre .container { flex-direction: column; align-items: stretch; }
    #sobre .container .frase {
        max-width: 100%;
        font-size: clamp(38px, 8.2vw, 66px);
        line-height: 1.07;
        padding: 30px 0 12px;
    }
    #sobre .container .frase img { display: none; } /* seta flutuante */
    #sobre .imagens {
        position: static;
        width: 100%;
        display: flex;
        gap: 10px;
        padding-bottom: 28px;
    }
    #sobre .imagens .foto1, #sobre .imagens .foto2 {
        position: static;
        top: auto;
        right: auto;
        width: 50%;
        height: 220px;
        object-fit: cover;
    }
    /* texto de abertura: altura flexivel (nao corta em telas estreitas) */
    #sobre2 .container { height: auto; padding: 40px 0; }
    #sobre2 .container span { max-width: 100%; }
}

/* 3) Celular: fotos do topo um pouco menores */
@media (max-width: 480px) {
    #sobre .imagens .foto1, #sobre .imagens .foto2 { height: 150px; }
}

/* ===== FAQ (home) ===== */
#faq { padding: 60px 0 20px; }
#faq h2 { font: 44px 'Everett-Regular', sans-serif; text-align: center; margin: 0 0 30px; }
#faq .container { display: block; }
#faq .faq-item { border-left: 3px solid #3700ff; padding: 4px 0 4px 18px; margin: 0 0 26px; }
#faq .faq-item h3 { font-size: 22px; margin: 0 0 8px; color: #3700ff; }
#faq .faq-item p { font-size: 17px; line-height: 1.5; color: #000; margin: 0; }
@media (max-width: 480px) {
    #faq h2 { font-size: 34px; }
    #faq .faq-item h3 { font-size: 19px; }
}

/* ===== Servicos (home) - texto indexavel + cards ===== */
#servicos { text-align: center; padding: 60px 0 40px; }
#servicos h2 { font: 42px 'Everett-Regular', sans-serif; color:#3700ff; margin: 0 0 14px; }
#servicos .servicos-intro { max-width: 760px; margin: 0 auto 36px; color:#000; font-size:18px; line-height:1.55; }
#servicos .servicos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; text-align:left; margin-bottom: 40px; }
#servicos .servico-card { border: 2px solid #3700ff; padding: 22px 24px; text-decoration: none; color: inherit; transition: .35s; display:block; }
#servicos .servico-card:hover { background:#3700ff; }
#servicos .servico-card:hover h3, #servicos .servico-card:hover p { color:#fff; }
#servicos .servico-card h3 { color:#3700ff; font-size: 21px; margin: 0 0 8px; }
#servicos .servico-card p { color:#000; font-size: 15px; line-height:1.5; margin:0; }
#servicos .servicos-img { max-width: 100%; height:auto; }

/* ===== Diferenciais (home) ===== */
#diferenciais { padding: 20px 0 50px; }
#diferenciais h2 { font: 42px 'Everett-Regular', sans-serif; color:#3700ff; text-align:center; margin: 0 0 14px; }
#diferenciais .dif-intro { max-width: 760px; margin: 0 auto 34px; text-align:center; color:#000; font-size:18px; line-height:1.55; }
#diferenciais .dif-stats { display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-bottom: 30px; }
#diferenciais .dif-stat { border-top: 3px solid #3700ff; padding-top: 14px; text-align:center; }
#diferenciais .dif-stat strong { display:block; font-size: 26px; color:#3700ff; margin-bottom: 6px; }
#diferenciais .dif-stat span { font-size: 14px; color:#000; line-height:1.4; }
#diferenciais .dif-cta { text-align:center; font-size:17px; color:#000; }
#diferenciais .dif-cta a { color:#3700ff; font-weight:bold; }

@media (max-width: 760px){
  #servicos .servicos-grid { grid-template-columns: 1fr; }
  #diferenciais .dif-stats { grid-template-columns: 1fr 1fr; }
  #servicos h2, #diferenciais h2 { font-size: 32px; }
}

/* ===== Sitelinks (home footer nav) ===== */
#sitelinks { padding: 40px 0; border-top: 2px solid #3700ff; }
#sitelinks .container { display:grid; grid-template-columns: 1.3fr 1fr 0.8fr; gap: 30px; }
#sitelinks h3 { color:#3700ff; font-size:18px; margin:0 0 12px; }
#sitelinks ul { list-style:none; padding:0; margin:0; }
#sitelinks li { margin-bottom:8px; }
#sitelinks a { color:#000; text-decoration:none; font-size:15px; }
#sitelinks a:hover { color:#3700ff; text-decoration:underline; }
@media (max-width:760px){ #sitelinks .container{ grid-template-columns:1fr; gap:24px; } }


/* ===== Refactor: menu sem jQuery/FontAwesome, acessibilidade ===== */
.menu-toggle { background: none; border: 0; padding: 8px; cursor: pointer; line-height: 0; }
.menu-toggle svg { display: block; }
#menu-mobile.aberto { display: block; }
.fechar { background: none; border: 0; padding: 12px; line-height: 0; top: 4px; right: 4px; }
.fechar svg { display: block; }
/* label do formulario: escondida visualmente, mas lida por leitores de tela */
.form-geral .control-label { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; display: block !important; }
:focus-visible { outline: 2px solid #3700ff; outline-offset: 2px; }

/* ===== Icones SVG nitidos (sociais, WhatsApp, setas) ===== */
.redessociais { display: flex; gap: 12px; align-items: center; }
.redessociais a { display: inline-flex; }
.redessociais .ico-soc { display: block; }
.whatsapp-flutuante svg { display: block; }
#sobre .frase .ico-seta { float: right; padding: 40px 40px 20px 0; }
@media (max-width: 1000px) { #sobre .frase .ico-seta { display: none; } }

/* ===== Ajuste do herói no desktop: fotos nao encostam no texto nem passam da linha ===== */
@media (min-width: 1001px) {
  #sobre .container { min-height: 555px; padding-bottom: 40px; }
  #sobre .frase { max-width: 47%; }
  #sobre .imagens .foto1 { right: 300px; }
  #sobre .imagens .foto2 { right: 30px; top: 130px; }
}