html, body{
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
}
   
   :root{
            --naranja:#f39c12;
            --negro:#000000;
            --blanco:#ffffff;
            --gris:#f4f4f4;
        }

        body{
            margin:0;
            font-family: Arial, Helvetica, sans-serif;
            color:var(--negro);
            background-color:var(--blanco);
        }

        header{
            background:var(--blanco);
            padding:20px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            box-shadow:0 2px 5px rgba(0,0,0,.1);
        }

        header img{
            max-height:70px;
        }

        .btn{
            background:var(--naranja);
            color:var(--blanco);
            padding:15px 25px;
            text-decoration:none;
            font-weight:bold;
            border-radius:5px;
        }

       .hero{
          width: 100vw;              /* fuerza ancho real del viewport */
          margin-left: calc(50% - 50vw);
          margin-right: calc(50% - 50vw);
          min-height:520px;                 /* Altura del banner */
          background-image:url("img/banner.png"); /* 👈 SOLO CAMBIA ESTO */
          background-size:cover;
          background-position:center;
          background-repeat:no-repeat;
      }

.hero-overlay{
    width:100%;
    height:100%;
    min-height:520px;
    background:rgba(0,0,0,0.55);      /* Oscurece la imagen */
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.hero-content{
    max-width:900px;
    padding:20px;
    color:#fff;
}

.hero-content h1{
    font-size:2.8rem;
    margin-bottom:20px;
}

.hero-content p{
    font-size:1.2rem;
    margin-bottom:30px;
}


        .section{
            padding:60px 20px;
            max-width:1100px;
            margin:auto;
        }

        .section h2{
            text-align:center;
            color:var(--naranja);
            margin-bottom:40px;
        }

        .services{
            display:grid;
            grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
            gap:25px;
        }

        .service{
            background:var(--gris);
            padding:25px;
            border-radius:8px;
            text-align:center;
        }

        .service h3{
            color:var(--naranja);
        }

        .service img{
    width:100%;
    height:180px;
    object-fit:cover;      /* Recorta sin deformar */
    border-radius:8px 8px 0 0;
    margin-bottom:15px;
}

        .why{
            background:var(--negro);
            color:var(--blanco);
        }

        .why ul{
            max-width:700px;
            margin:auto;
            list-style:none;
            padding:0;
        }

        .why li{
            padding:10px 0;
            font-size:1.1rem;
        }

        .cta{
            background:var(--naranja);
            color:var(--blanco);
            text-align:center;
            padding:60px 20px;
        }

        .cta h2{
            margin-bottom:20px;
        }

        footer{
            background:var(--negro);
            color:var(--blanco);
            text-align:center;
            padding:20px;
            font-size:0.9rem;
        }

        .btn span {
          color: #000000;
          }


          .footer-contact {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
}

.footer-contact a {
    color: white;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: 0.8;
}

.footer-contact a:hover {
    opacity: 1;
}


/* BOTÓN FLOTANTE */
.wsp-float{
    position:fixed;
    bottom:20px;
    right:20px;
    background:#25d366;
    color:#fff;
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 15px;
    border-radius:30px;
    cursor:pointer;
    z-index:999;
    font-weight:bold;
}
.wsp-float img{
    width:35px;
}

/* CHAT */
.wsp-chat{
    position:fixed;
    bottom:90px;
    right:20px;
    width:300px;
    background:#fff;
    border-radius:10px;
    box-shadow:0 5px 15px rgba(0,0,0,.3);
    display:none;
    flex-direction:column;
    z-index:999;
}

.wsp-header{
    background:#25d366;
    color:#fff;
    padding:10px;
    display:flex;
    align-items:center;
    gap:10px;
    border-radius:10px 10px 0 0;
}
.wsp-header img{width:35px;}
.wsp-close{
    margin-left:auto;
    cursor:pointer;
}

.wsp-body{
    padding:15px;
    background:#f1f1f1;
}
.wsp-msg{
    background:#fff;
    padding:10px;
    border-radius:8px;
    font-size:14px;
}

.wsp-footer{
    display:flex;
    border-top:1px solid #ddd;
}
.wsp-footer input{
    flex:1;
    padding:10px;
    border:none;
    outline:none;
}
.wsp-footer button{
    background:#25d366;
    color:#fff;
    border:none;
    padding:10px 15px;
    cursor:pointer;
}





/* ===== AJUSTES HERO PARA MÓVIL (SOLUCIÓN REAL) ===== */
@media (max-width: 768px) {

  .hero{
        background-image: url("img/banner_horizontal.png"); /* 👈 IMAGEN MÓVIL */
        min-height: 520px;       /* Mantiene el tamaño grande */
        background-size: cover; /* Impacto visual */
        background-position: center;
    }

    .hero-overlay{
        min-height: 520px;
        padding: 20px;
        background: rgba(0,0,0,0.55);
    }

    .hero-content{
        max-width: 100%;
        padding: 15px;
    }

    .hero-content h1{
        font-size: 2.1rem;
        line-height: 1.2;
    }

    .hero-content p{
        font-size: 1.05rem;
        line-height: 1.4;
    }


    
}