/*=========================
    EL BICHITO
    STYLE.CSS v1.0
=========================*/

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
background:#f7f7f7;
color:#222;
line-height:1.6;
}

/*========== NAV ==========*/

nav{
position:fixed;
top:0;
left:0;
width:100%;
background:white;
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 8%;
box-shadow:0 5px 20px rgba(0,0,0,.08);
z-index:999;
}

.logo-nav{
display:flex;
align-items:center;
gap:12px;
}

.logo-nav img{
width:48px;
height:48px;
border-radius:50%;
}

.logo-nav h2{
font-size:22px;
color:#d61a62;
}

.menu{
display:flex;
gap:25px;
}

.menu a{
text-decoration:none;
color:#333;
font-weight:600;
transition:.3s;
}

.menu a:hover{
color:#d61a62;
}

/*========== HERO ==========*/

.hero{
min-height:100vh;
background:linear-gradient(135deg,#d61a62,#ff5b95);
display:flex;
justify-content:center;
align-items:center;
padding:120px 20px 60px;
text-align:center;
color:white;
}

.overlay{
max-width:650px;
}

.logo{
width:180px;
border-radius:50%;
box-shadow:0 15px 35px rgba(0,0,0,.25);
margin-bottom:25px;
transition:.4s;
}

.logo:hover{
transform:scale(1.05);
}

.hero h1{
font-size:62px;
font-weight:800;
}

.hero h2{
font-size:34px;
margin:10px 0 20px;
}

.hero p{
font-size:20px;
margin-bottom:35px;
}

/*========== BOTONES ==========*/

.botones{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.btn{
padding:18px 35px;
border-radius:50px;
text-decoration:none;
font-weight:bold;
font-size:18px;
transition:.3s;
}

.verde{
background:#25D366;
color:white;
}

.blanco{
background:white;
color:#d61a62;
}

.btn:hover{
transform:translateY(-5px);
box-shadow:0 10px 25px rgba(0,0,0,.2);
}

/*========== TITULOS ==========*/

.titulo{
text-align:center;
font-size:42px;
margin-bottom:50px;
color:#d61a62;
}

/*========== SECCIONES ==========*/

section{
padding:90px 8%;
}

/*========== ESTADISTICAS ==========*/

.estadisticas{
background:#ffffff;
}

.contenedor{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
max-width:1200px;
margin:auto;
}

.dato{
background:#fff;
padding:35px;
border-radius:20px;
text-align:center;
box-shadow:0 10px 30px rgba(0,0,0,.08);
transition:.3s;
}

.dato:hover{
transform:translateY(-10px);
}

.numero{
font-size:52px;
font-weight:800;
color:#d61a62;
margin-bottom:12px;
}

.dato p{
font-size:18px;
color:#666;
}

/*========== SERVICIOS ==========*/

#servicios{
background:#f7f7f7;
}

.card{
background:#fff;
padding:35px;
border-radius:22px;
box-shadow:0 12px 30px rgba(0,0,0,.08);
transition:.35s;
text-align:center;
}

.card:hover{
transform:translateY(-10px);
}

.card h3{
font-size:28px;
margin-bottom:15px;
color:#d61a62;
}

.card p{
color:#555;
font-size:18px;
}

/*========== NOSOTROS ==========*/

.beneficios{
background:white;
}

.info{
max-width:850px;
margin:auto;
background:#fff;
padding:40px;
border-radius:25px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
text-align:center;
}

.info h3{
font-size:58px;
color:#25D366;
margin-bottom:15px;
}

.info p{
font-size:20px;
}

/*========== CONTACTO ==========*/

.contacto{
background:#f7f7f7;
}

.contacto p{
font-size:20px;
margin:15px 0;
}

/*========== FOOTER ==========*/

footer{
background:#181818;
color:white;
text-align:center;
padding:45px 20px;
}

footer h2{
margin-bottom:15px;
font-size:30px;
}

footer p{
opacity:.8;
}

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

.btn-whatsapp{

position:fixed;
bottom:25px;
right:25px;
width:70px;
height:70px;
background:#25D366;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
font-size:36px;
text-decoration:none;
color:white;
box-shadow:0 10px 25px rgba(0,0,0,.25);
transition:.35s;
z-index:9999;

}

.btn-whatsapp:hover{

transform:scale(1.1);

}

.whatsapp:hover{
transform:scale(1.1);
}

/*========== ANIMACIONES ==========*/

.card,
.dato,
.info,
.btn,
.logo{
animation:aparecer .8s ease;
}

@keyframes aparecer{

from{
opacity:0;
transform:translateY(30px);
}

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

}

/*========== RESPONSIVE ==========*/

@media(max-width:900px){

nav{
flex-direction:column;
gap:15px;
padding:20px;
}

.menu{
flex-wrap:wrap;
justify-content:center;
}

.hero h1{
font-size:44px;
}

.hero h2{
font-size:26px;
}

.hero p{
font-size:18px;
}

.logo{
width:150px;
}

.titulo{
font-size:34px;
}

.btn{
width:100%;
max-width:320px;
text-align:center;
}

.btn-whatsapp{
width:60px;
height:60px;
font-size:28px;
}

}

/*========== GALERÍA ==========*/

#galeria{
background:white;
}

.galeria{

display:grid;

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

gap:20px;

max-width:1200px;

margin:auto;

}

.galeria img{

width:100%;

height:250px;

object-fit:cover;

border-radius:20px;

cursor:pointer;

transition:.35s;

box-shadow:0 8px 20px rgba(0,0,0,.12);

}

.galeria img:hover{

transform:scale(1.04);

}

/*=========================
      TESTIMONIOS
=========================*/

#testimonios{

background:#ffffff;

}

.testimonio{

text-align:center;

}

.estrellas{

font-size:30px;

color:#FFD700;

margin-bottom:20px;

}

.testimonio p{

font-size:18px;

font-style:italic;

margin-bottom:20px;

color:#555;

}

.testimonio h4{

color:#d61a62;

font-size:18px;

}

/*=========================
     COTIZACIÓN
=========================*/

#cotizacion{

background:#ffffff;

padding:90px 20px;

}

#formCotizacion{

max-width:700px;

margin:auto;

display:flex;

flex-direction:column;

gap:18px;

}

#formCotizacion input,
#formCotizacion select,
#formCotizacion textarea{

padding:18px;

font-size:17px;

border-radius:14px;

border:1px solid #ddd;

outline:none;

transition:.3s;

}

#formCotizacion input:focus,
#formCotizacion select:focus,
#formCotizacion textarea:focus{

border-color:#d61a62;

box-shadow:0 0 8px rgba(214,26,98,.25);

}

#formCotizacion button{

background:#25D366;

color:white;

padding:18px;

border:none;

border-radius:50px;

font-size:20px;

font-weight:bold;

cursor:pointer;

transition:.3s;

}

#formCotizacion button:hover{

transform:scale(1.03);

}

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

#faq{

padding:90px 20px;

background:#f7f7f7;

}

.faq-item{

max-width:900px;

margin:20px auto;

background:white;

border-radius:18px;

overflow:hidden;

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

}

.faq-question{

width:100%;

padding:22px;

border:none;

background:white;

display:flex;

justify-content:space-between;

align-items:center;

font-size:20px;

font-weight:700;

cursor:pointer;

}

.faq-question span{

font-size:30px;

color:#d61a62;

}

.faq-answer{

max-height:0;

overflow:hidden;

transition:max-height .4s ease;

padding:0 22px;

}

.faq-answer p{

padding:20px 0;

color:#555;

line-height:1.7;

}

/*======================
        RESEÑAS
=======================*/

#resenas{

background:white;

padding:90px 20px;

}

.resena{

text-align:center;

}

.estrellas{

font-size:30px;

color:#FFD700;

margin-bottom:15px;

}

.resena h3{

margin-bottom:15px;

color:#d61a62;

}

.resena p{

color:#555;

margin-bottom:20px;

line-height:1.8;

}

.resena h4{

color:#888;

font-size:16px;

font-weight:500;

}

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

#cobertura{

padding:90px 20px;

background:#f7f7f7;

}

.subtitulo{

text-align:center;

font-size:20px;

margin-bottom:45px;

color:#666;

}

.ciudad{

font-size:20px;

font-weight:600;

text-align:center;

}

.mapa{

margin-top:50px;

border-radius:25px;

overflow:hidden;

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

}

.mapa iframe{

width:100%;

height:450px;

border:none;

}

/*======================
      REDES SOCIALES
=======================*/

#redes{

    padding:110px 20px;

    background:#fff;

}

.redes-grid{

    max-width:1150px;

    margin:55px auto;

    display:grid;

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

    gap:30px;

}

.red-card{

    background:#fff;

    padding:40px 30px;

    border-radius:24px;

    text-align:center;

    text-decoration:none;

    color:#333;

    border-top:6px solid #d61a62;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    transition:.35s;

}

.red-card:hover{

    transform:translateY(-12px);

    box-shadow:0 22px 50px rgba(0,0,0,.15);

}

.icono{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:42px;

    margin-bottom:25px;

    color:white;

}

.whatsapp .icono{

    background:#25D366;

}

.facebook .icono{

    background:#1877F2;

}

.instagram .icono{

    background:linear-gradient(45deg,#833AB4,#E1306C,#FCAF45);

}

.telefono .icono{

    background:#d61a62;

}

.red-card h3{

    margin-bottom:15px;

    font-size:24px;

    color:#222;

}

.red-card p{

    color:#666;

    line-height:1.7;

}

.whatsapp{

    border-color:#25D366;

}

.facebook{

    border-color:#1877F2;

}

.instagram{

    border-color:#E1306C;

}

.telefono{

    border-color:#d61a62;

}

.correo-contacto{

    text-align:center;

    margin-top:70px;

}

.correo-contacto h3{

    font-size:28px;

    color:#d61a62;

    margin-bottom:18px;

}

.correo-contacto h3 i{

    margin-right:10px;

}

.correo-contacto a{

    color:#444;

    text-decoration:none;

    font-size:21px;

    font-weight:600;

    transition:.3s;

}

.correo-contacto a:hover{

    color:#d61a62;

}

/*======================
      GARANTÍA
=======================*/

#garantia{

    padding:100px 20px;

    background:#f7f7f7;

}

.garantia-grid{

    max-width:1150px;

    margin:60px auto 0;

    display:grid;

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

    gap:30px;

}

.garantia-card{

    background:#fff;

    padding:40px 30px;

    border-radius:24px;

    text-align:center;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    transition:.35s;

}

.garantia-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 45px rgba(0,0,0,.15);

}

.garantia-card i{

    font-size:60px;

    color:#d61a62;

    margin-bottom:25px;

}

.garantia-card h3{

    font-size:25px;

    margin-bottom:15px;

    color:#222;

}

.garantia-card p{

    color:#666;

    line-height:1.8;

}

/*======================
      PROCESO
=======================*/

#proceso{

    background:#fff;
    padding:100px 20px;

}

.proceso-grid{

    max-width:1200px;
    margin:60px auto 0;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:30px;

}

.paso{

    background:#f7f7f7;
    border-radius:24px;
    padding:35px;
    text-align:center;
    transition:.35s;
    box-shadow:0 12px 30px rgba(0,0,0,.08);

}

.paso:hover{

    transform:translateY(-10px);

}

.numero-paso{

    width:70px;
    height:70px;
    margin:auto;
    margin-bottom:20px;
    background:#d61a62;
    color:white;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    font-weight:bold;

}

.paso h3{

    margin-bottom:15px;
    color:#d61a62;

}

.paso p{

    color:#666;
    line-height:1.7;

}