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

body {
    font-family: Arial, sans-serif;
}
/*Hero*/
.hero-img{
position:relative;
margin-bottom:120px;
}

.hero-img img{
width:100%;
height:420px;
object-fit:cover;
filter:brightness(0.75);
}

/*Formulario*/
.formulariocontacto input,
.formulariocontacto textarea{
    border-radius:8px;
    border:1px solid #d9e8f2;
}

.formulariocontacto input:focus,
.formulariocontacto textarea:focus{
    border-color:#1EA7D7;
    box-shadow:0 0 0 0.2rem rgba(30,167,215,0.15);
}
/*Boton*/
.btn-success{
    background: linear-gradient(135deg,#5096ff, #222dff);
    border:none;
    font-weight:600;
    padding:12px 20px;
    border-radius:8px;
    box-shadow:0 6px 15px rgba(0,0,0,0.15);
    transition:all 0.25s ease;
    color: white;
}

.btn-success:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(0,0,0,0.2);
    background: linear-gradient(135deg,#337bff,#111ecc); /* color hover */
}




@media (min-width: 1200px) {
    .cuadro-flotante {
        background: white;
        padding: 25px;
        border-radius: 12px;
        box-shadow: 0 15px 40px rgba(0,0,0,0.15);
        position: absolute;
        top: 50px;
        right: 8%;
        width: 550px;
        z-index: 1000;   
}
.cuadro-flotante .form-title,
  .cuadro-flotante p {
    text-align: center;
}

.clival-cuadroborde{
    margin-top:40px;
    padding-left:20px;
    padding-right:20px;
}

.clival-logo-img{
    width: 300px;
 }

}

@media (max-width: 1199px) {
    .cuadro-flotante {
        position: static;
        width: auto;
        margin: 20px;
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }
    .formulariocontacto {
    padding: 15px;
    }
    .clival-center {
    text-align: center;
    }

    .clival-cuadroborde {
        
        margin-left:5px; 
        margin-right: 5px;
    }
    .clival-mbl-block {
        margin-bottom: 15px;
    }
    .clival-logo {
        text-align: center !important;
        display: block !important;
    }
    .clival-logo-img{
        width: 100%;
    }
}


.clival-nav{
    margin:5px;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.section-title .line {
  flex: 1;
  height: 3px;
  background: #1EA7D7;
  border-radius: 3px;
  max-width: 150px;
}

.section-title h2 {
  margin: 0;
  font-size: 28px;
  letter-spacing: 0.5px;
  color: #123845;
}

.review-box {
  background: white;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(18, 56, 69, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid #eaf6fb;
}

.review-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 28px rgba(18, 56, 69, 0.12);
}

.review-name {
  font-size: 17px;
  color: #123845;
}

.review-stars {
  font-size: 15px;
  color: #FFD700;
  letter-spacing: 1px;
}

.review-text {
  color: #4c6973;
  font-size: 15px;
  line-height: 1.5;
}
.clival-mbl-block .card {
background: white;
border-radius: 12px;
border: 1px solid #e6f1f7;
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
transition: all 0.25s ease;
}

.clival-mbl-block .card:hover{
transform: translateY(-6px);
box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}
/*Porque elegirnos*/
#sobre-nosotros{
background:#f8fbfe;
padding:60px 20px;
border-radius:12px;
}

#sobre-nosotros ul li{
background:white;
padding:15px 18px;
border-radius:10px;
box-shadow:0 4px 12px rgba(0,0,0,0.05);
transition:all 0.2s ease;
}

#sobre-nosotros ul li:hover{
transform:translateY(-3px);
box-shadow:0 8px 20px rgba(0,0,0,0.08);
}

#sobre-nosotros strong{
color:#123845;
}
.logos-marcas{
display:flex;
justify-content:center;
align-items:center;
gap:40px;
flex-wrap:wrap;
}

.logos-marcas img{
height:45px;
opacity:0.7;
transition:all 0.3s;
}

.logos-marcas img:hover{
opacity:1;
transform:scale(1.05);
}


/*Whatsapp*/
.whatsapp-float{
position:fixed;
bottom:25px;
right:25px;
background:#5096ff;
width:60px;
height:60px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 8px 25px rgba(0,0,0,0.25);
z-index:999;
transition:all 0.2s ease;
}

.whatsapp-float:hover{
transform:scale(1.08);
}
.zonas-texto{
max-width:800px;
margin:auto;
color:#4c6973;
line-height:1.6;
}
.top-bar{
background:#123845;
color:white;
font-size:14px;
padding:6px 0;
}

.top-bar a{
color:white;
text-decoration:none;
font-weight:600;
}