/* =====================================================
   HIDRONET - STYLE.CSS
   PARTE 1/3
   
   Base
   Cabeçalho
   Banner
   Benefícios
   Planos
===================================================== */


/* IMPORTAÇÃO DA FONTE */

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



/* ==========================
        RESET
========================== */


*{

margin:0;
padding:0;
box-sizing:border-box;

}


html{

scroll-behavior:smooth;

}


body{

font-family:'Poppins',sans-serif;

background:#faf7f7;

color:#333;

overflow-x:hidden;

}



img{

max-width:100%;

display:block;

}



a{

text-decoration:none;

}



ul{

list-style:none;

}





/* ==========================
        CORES
========================== */


:root{


--azul:#0057d9;

--azul-escuro:#00347d;

--azul-claro:#2988ff;


--verde:#25D366;


--laranja:#ff9800;


--branco:#ffffff;


--cinza:#666;


--sombra:
0 15px 35px rgba(0,0,0,.12);


}





/* ==========================
        HEADER
========================== */


header{


position:fixed;

top:0;

left:0;

width:100%;

height:90px;

padding:0 8%;


background:#fff;


display:flex;

align-items:center;

justify-content:space-between;


z-index:1000;


box-shadow:
0 3px 20px rgba(0,0,0,.08);


transition:.3s;


}



header.scrolled{

height:65px;

background:#ffffffee;

backdrop-filter:blur(10px);

}





.logo img{


height:85px;


transition:.3s;


}



.logo img:hover{


transform:scale(1.05);


}





nav{


display:flex;

gap:30px;


}



nav a{


color:#222;

font-weight:500;

transition:.3s;


}



nav a:hover{


color:var(--azul);


}





.btn-menu{


background:
linear-gradient(135deg,var(--azul),var(--azul-claro));


color:#ffffff;


padding:13px 30px;


border-radius:40px;


font-weight:600;


}



.btn-menu:hover{


transform:translateY(-3px);

box-shadow:var(--sombra);


}





#menuMobile{


display:none;

font-size:30px;

color:var(--azul);

cursor:pointer;


}







/* ==========================
        BANNER
========================== */


.banner{


min: height 90px;vh;


display:flex;


align-items:center;


padding: 120px;px 8%;


background:


url("img/banner2.png");



background-size:cover;


background-position:center;


}





.banner-conteudo{


max-width:550px;


color:#1c4ceb;


}



.banner-conteudo span{


display:inline-block;


background:#25D366;


padding:8px 20px;


border-radius:30px;


font-size:14px;


font-weight:600;


}





.banner h1{


font-size:58px;


line-height:1.15;


margin:25px 0;


font-weight:800;


}





.banner p{


font-size:21px;


margin-bottom:35px;


}





.botoes{


display:flex;


gap:20px;


flex-wrap:wrap;


}





.btn-principal{


background:var(--verde);


color:var(--branco);


padding:16px 38px;


border-radius:50px;


font-weight:700;


}



.btn-principal:hover{


transform:translateY(-5px);

}





.btn-whatsapp{


background:var(--verde);


color:#fff;


padding:16px 38px;


border-radius:50px;


font-weight:700;


}



.btn-whatsapp i{


margin-right:8px;


}



.btn-whatsapp:hover{


transform:translateY(-5px);


}








/* ==========================
       BENEFÍCIOS
========================== */


.beneficios{


padding:80px 8%;


display:grid;


grid-template-columns:
repeat(auto-fit,minmax(230px,1fr));


gap:30px;


}



.beneficio{


background:#fff;


padding:40px 25px;


text-align:center;


border-radius:20px;


box-shadow:
0 10px 30px rgba(0,0,0,.08);


transition:.35s;


}



.beneficio:hover{


transform:translateY(-10px);


box-shadow:var(--sombra);


}



.beneficio i{


font-size:45px;


color:var(--azul);


margin-bottom:20px;


}



.beneficio h3{


color:var(--azul-escuro);


margin-bottom:10px;


}





.beneficio p{


color:var(--cinza);


}







/* ==========================
          PLANOS
========================== */


.planos{


padding:100px 8%;


text-align:center;


}





.planos h2{


font-size:42px;


color:var(--azul-escuro);


}



.planos>p{


margin:15px 0 50px;


color:#666;


}





.lista-planos{


display:grid;


grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));


gap:35px;


}





.plano{


background:#fff;


padding:45px 30px;


border-radius:25px;


box-shadow:
0 10px 30px rgba(0,0,0,.08);


position:relative;


transition:.35s;


}





.plano:hover{


transform:translateY(-12px);


box-shadow:var(--sombra);


}





.plano h3{


font-size:28px;


color:var(--azul);


}





.plano h1{


font-size:48px;


color:var(--azul-escuro);


margin:20px 0;


}





.plano li{


margin:15px 0;


color:#555;


}





.plano a{


display:inline-block;


background:var(--verde);


color:#fff;


padding:15px 40px;


border-radius:40px;


font-weight:600;


margin-top:20px;


}





.plano a:hover{


transform:scale(1.05);


}





.destaque{


border:4px solid var(--laranja);


}




.selo{


position:absolute;


top:-18px;


left:50%;


transform:translateX(-50%);


background:var(--laranja);


color:#fff;


padding:8px 20px;


border-radius:30px;


font-size:13px;


font-weight:700;


}/* =====================================================
   HIDRONET - STYLE.CSS
   PARTE 2/3
   
   Serviços
   Cobertura
   Diferenciais
   Contadores
   Área Cliente
   Depoimentos
   FAQ
===================================================== */



/* ==========================
        SERVIÇOS
========================== */


.servicos{


padding:100px 8%;


background:#fff;


}



.servicos h2{


text-align:center;


font-size:42px;


color:var(--azul-escuro);


margin-bottom:60px;


}



.servicos-container{


display:grid;


grid-template-columns:
repeat(auto-fit,minmax(300px,1fr));


gap:35px;


}




.servico-card{


background:#fff;


border-radius:25px;


overflow:hidden;


box-shadow:
0 10px 30px rgba(0,0,0,.10);


transition:.35s;


}



.servico-card:hover{


transform:translateY(-10px);


box-shadow:var(--sombra);


}



.servico-card img{


width:100%;


height:230px;


object-fit:cover;


}



.servico-card h3{


font-size:26px;


color:var(--azul);


padding:25px 25px 10px;


}



.servico-card p{


padding:0 25px;


color:#666;


line-height:1.8;


}



.servico-card a{


display:inline-block;


margin:25px;


background:var(--azul);


color:#fff;


padding:12px 30px;


border-radius:30px;


font-weight:600;


}



.servico-card a:hover{


background:var(--azul-escuro);


}





/* ==========================
       COBERTURA
========================== */


.cobertura{


padding:100px 8%;


background:


linear-gradient(
135deg,
var(--azul),
var(--azul-escuro)
);


color:#fff;


text-align:center;


}



.cobertura h2{


font-size:42px;


margin-bottom:15px;


}



.cobertura p{


margin-bottom:40px;


font-size:18px;


}



.cobertura-conteudo{


max-width:900px;


margin:auto;


}



#formCobertura{


display:grid;


grid-template-columns:
repeat(2,1fr);


gap:20px;


}



#formCobertura input{


padding:18px;


border:none;


border-radius:12px;


font-size:16px;


outline:none;


}



#formCobertura input:focus{


box-shadow:
0 0 0 3px rgba(255,255,255,.4);


}



#formCobertura button{


grid-column:span 2;


padding:18px;


border:none;


border-radius:12px;


background:var(--verde);


color:#fff;


font-size:18px;


font-weight:700;


cursor:pointer;


}



#formCobertura button:hover{


transform:translateY(-4px);


}





/* ==========================
       DIFERENCIAIS
========================== */


.diferenciais{


padding:100px 8%;


}



.diferenciais h2{


text-align:center;


font-size:42px;


color:var(--azul-escuro);


margin-bottom:60px;


}



.diferenciais-grid{


display:grid;


grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));


gap:30px;


}



.diferenciais-grid div{


background:#fff;


padding:35px;


text-align:center;


border-radius:20px;


box-shadow:
0 10px 30px rgba(0,0,0,.08);


transition:.3s;


}



.diferenciais-grid div:hover{


transform:translateY(-10px);


}



.diferenciais-grid i{


font-size:45px;


color:var(--azul);


margin-bottom:20px;


}



.diferenciais-grid h3{


color:var(--azul-escuro);


margin-bottom:10px;


}





/* ==========================
        NÚMEROS
========================== */


.numeros{


padding:80px 8%;


display:grid;


grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));


gap:30px;


background:#f0f5ff;


}



.numeros div{


background:#fff;


padding:40px;


text-align:center;


border-radius:20px;


box-shadow:
0 10px 25px rgba(0,0,0,.08);


}



.numeros h2{


font-size:50px;


color:var(--azul);


}



.numeros p{


font-weight:600;


color:#555;


}






/* ==========================
       ÁREA CLIENTE
========================== */


.cliente{


padding:100px 8%;


text-align:center;


background:#fff;


}



.cliente h2{


font-size:42px;


color:var(--azul-escuro);


}



.cliente p{


margin:15px 0 50px;


color:#666;


}





.cliente-botoes{


display:flex;


justify-content:center;


gap:25px;


flex-wrap:wrap;


}



.cliente-botoes a{


background:var(--azul);


color:#fff;


padding:18px 30px;


border-radius:40px;


font-weight:600;


}



.cliente-botoes a:hover{


background:var(--azul-escuro);


transform:translateY(-5px);


}



.cliente-botoes i{


margin-right:10px;


}





/* ==========================
       DEPOIMENTOS
========================== */


.depoimentos{


padding:100px 8%;


}



.depoimentos h2{


text-align:center;


font-size:42px;


color:var(--azul-escuro);


margin-bottom:60px;


}




.depoimentos-container{


display:grid;


grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));


gap:30px;


}



.depoimento{


background:#fff;


padding:35px;


border-radius:20px;


box-shadow:
0 10px 30px rgba(0,0,0,.08);


}



.estrelas{


color:#ffb400;


font-size:25px;


margin-bottom:20px;


}



.depoimento p{


color:#666;


}



.depoimento h4{


margin-top:20px;


color:var(--azul);


}





/* ==========================
           FAQ
========================== */


.faq{


padding:100px 8%;


background:#fff;


}



.faq h2{


text-align:center;


font-size:42px;


color:var(--azul-escuro);


margin-bottom:50px;


}



.faq-box{


max-width:900px;


margin:20px auto;


border-radius:15px;


box-shadow:
0 5px 20px rgba(0,0,0,.08);


overflow:hidden;


}



.pergunta{


width:100%;


border:none;


background:#fff;


padding:25px;


display:flex;


justify-content:space-between;


font-size:18px;


font-weight:600;


cursor:pointer;


color:#333;


}



.resposta{


display:none;


padding:0 25px 25px;


color:#666;


}


/* =====================================================
   HIDRONET - STYLE.CSS
   PARTE 3/3
   
   Contato
   Rodapé
   WhatsApp
   Animações
   Responsividade
===================================================== */


/* ==========================
        CONTATO
========================== */


.contato{

padding:100px 8%;

background:

linear-gradient(
135deg,
var(--azul),
var(--azul-escuro)
);

color:#fff;

text-align:center;

}



.contato h2{

font-size:42px;

margin-bottom:15px;

}



.contato p{

font-size:18px;

margin-bottom:40px;

}



.contato-botoes{

display:flex;

justify-content:center;

gap:25px;

flex-wrap:wrap;

}



.contato-botoes a{

display:flex;

align-items:center;

gap:10px;

padding:18px 40px;

border-radius:50px;

font-weight:700;

background:var(--verde);

color:#fff;

transition:.3s;

}



.contato-botoes a:hover{

transform:translateY(-5px);

box-shadow:var(--sombra);

}



/* ==========================
          RODAPÉ
========================== */


footer{

background:#001d4d;

color:#fff;

padding:60px 8% 30px;

text-align:center;

}



.footer-logo img{

width:180px;

margin:0 auto 25px;

}



.footer-info h3{

font-size:28px;

margin-bottom:15px;

}



.footer-info p{

color:#ddd;

margin:8px;

}



.footer-social{

display:flex;

justify-content:center;

gap:20px;

margin:30px 0;

}



.footer-social a{

width:45px;

height:45px;

border-radius:50%;

background:#fff;

color:var(--azul);

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

transition:.3s;

}



.footer-social a:hover{

background:var(--verde);

color:#fff;

transform:translateY(-5px);

}



.copyright{

margin-top:30px;

padding-top:25px;

border-top:1px solid rgba(255,255,255,.2);

color:#ccc;

}





/* ==========================
    WHATSAPP FLUTUANTE
========================== */


.whatsapp-fixo{

position:fixed;

right:25px;

bottom:25px;


width:65px;

height:65px;


background:#25D366;


border-radius:50%;


display:flex;

align-items:center;

justify-content:center;


color:#fff;


font-size:35px;


z-index:999;


box-shadow:

0 10px 30px rgba(0,0,0,.3);


animation:pulsar 2s infinite;


}



@keyframes pulsar{


0%{

transform:scale(1);

}


50%{

transform:scale(1.1);

}


100%{

transform:scale(1);

}


}





/* ==========================
        ANIMAÇÕES
========================== */


@keyframes subir{


from{

opacity:0;

transform:translateY(40px);

}


to{

opacity:1;

transform:translateY(0);

}


}



.animar{

animation:subir .8s ease;

}





/* ==========================
       MENU MOBILE
========================== */


@media(max-width:991px){


header{

padding:0 25px;

}



nav{


position:fixed;

top:90px;

left:-100%;


width:270px;


height:100vh;


background:var(--azul-escuro);


display:flex;

flex-direction:column;


padding:40px;


gap:25px;


transition:.4s;


}



nav.active{

left:0;

}



nav a{

color:#fff;

font-size:18px;

}



.btn-menu{

display:none;

}



#menuMobile{

display:block;

}




.banner{

text-align:center;

justify-content:center;

}



.banner h1{

font-size:42px;

}



.botoes{

justify-content:center;

}


}





/* ==========================
       TABLET
========================== */


@media(max-width:768px){



.banner{

padding:120px 25px;

}



.banner h1{

font-size:34px;

}



.banner p{

font-size:16px;

}



.planos,
.servicos,
.cobertura,
.diferenciais,
.cliente,
.depoimentos,
.faq,
.contato{

padding:70px 25px;

}



.planos h2,
.servicos h2,
.diferenciais h2,
.cliente h2,
.depoimentos h2,
.faq h2,
.contato h2,
.cobertura h2{

font-size:32px;

}



#formCobertura{

grid-template-columns:1fr;

}



#formCobertura button{

grid-column:1;

}



.cliente-botoes{

flex-direction:column;

}



}





/* ==========================
       CELULAR
========================== */


@media(max-width:480px){



.logo img{

height:50px;

}



.banner h1{

font-size:29px;

line-height:40px;

}



.banner-conteudo span{

font-size:12px;

}



.btn-principal,
.btn-whatsapp{


width:100%;

text-align:center;

}



.plano h1{

font-size:40px;

}



.servico-card img{

height:190px;

}



.whatsapp-fixo{


width:58px;

height:58px;


font-size:30px;


right:15px;

bottom:15px;


}



footer{

padding:50px 20px;

}


}






/* ==========================
   EFEITO FAQ ABERTO
========================== */


.faq-box.ativo .resposta{

display:block;

}



.faq-box.ativo .pergunta span{

transform:rotate(45deg);

}




.pergunta span{

transition:.3s;

}




/* ==========================
       FINAL CSS HIDRONET
========================== */