@charset "utf-8";

@import url("https://fonts.googleapis.com/css?family=Hind:300,400,700&display=swap");

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

body {
  font-family: "Hind", sans-serif;
  color: #545454;
  line-height: 1.4em; /* Mejorado ligeramente para legibilidad */
}

.Vacio {
  clear: both;
}

.Wrapper {
  width: 90%;
  margin: auto;
  max-width: 1300px;
}

/* --- FORMULARIOS --- */

input[type="text"], .inputdvc {
  padding: 5px;
  font-size: 0.9em;
  line-height: 1.8em;
  background-color: #ffffff;
  border: 1px solid #c5c5c5;
  width: 90%;
  margin: 0 5% 15px 5%;
  outline: none; /* Quitado por petición */
  transition: all 0.3s ease;
}

/* Efecto Focus solicitado */
input[type="text"]:focus, .inputdvc:focus {
  border: 1px solid #002241;
  color: #002241;
}

/* Efecto Error solicitado */
input[type="text"].input-error , .inputdvc.input-error{
  border: 1px solid #e01834;
  box-shadow: 0 0 8px rgba(224, 24, 52, 0.5);
}

.button {
  background: #1ec54d;
  margin: 15px 5% 0 5%;
  border: 0;
  text-align: center;
  width: 90%;
  font-size: 1.2em;
  color: #ffffff;
  height: 2.2em;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s;
}

/* Efecto Click solicitado */
.button:active {
  background: #158a36; 
  transform: translateY(2px);
}

.label { font-size: .85em; }

.alertaError {
  background: url(Images/closeAlert.png)left center no-repeat #e01834;
  line-height: 18px;
  padding: 15px 35px;
  text-align: center;
  color: #ffffff;
  margin: -40px 0px 5px -15px;
  width: 100%;
  max-width:350px;
  position: absolute;
  z-index: 3;
  font-size: .9em;
}

#ErrorEmpresa, #ErrorNombre, #ErrorTel, #ErrorTelB, #ErrorClau, #ErrorNombre2, #ErrorTel2, #ErrorTel2B, #ErrorClau2, #ErrorGenerico {
  display: none;
  user-select: none;
}

.alertaError:hover {
  background: url(Images/closeAlert.png) left center no-repeat #aa091f;
  cursor: pointer;
}

/* --- HEADER --- */

header {
  background: rgba(255, 255, 255, 0.85);
  width: 100%;
  padding: 5px;
  height: auto;
  overflow: hidden;
}

.Logo { width: 200px; float: left; text-align: center; }
.Logo img { width: 100%; height: auto; }
.Telefono { width: 40px; height: 40px; float: right;margin:12px 0 0 0 }
.Telefono img { width: 40px; height: auto; }
.Telefononumerico1 { display: none; }

/* --- SECCIONES --- */

#Banner {
  background: url(Images/BannerMobile.webp) center top no-repeat #ffffff;
  padding-bottom:20px;
}

.Claim { width: 100%; margin: 0; padding: 20px 0 250px 0; }

h1 { font-size: 1.4em; font-weight: bold; line-height: 1.1; padding: 0 0 10px 0; margin: 0; color: #ffffff; }

.Claim span { color: #ffffff; font-weight: normal; font-size:1.2 }

.CalltoactionBanner {
  margin: 1em 0;
  padding: 8px 0;
  text-align: center;
  color: #ffffff;
  background: #d82528;
  border-radius: 15px;
  text-decoration: none;
  display: block;
}

#ContactForm { width: 100%; float: none; margin: 15px 0; background-color: #ffffff; border-radius: 10px; }
.InForm { padding: 15px; }
#ContactForm h3{padding:0 0 10px 0; margin:0;font-size:1.3em; text-align:center; color:#cc130a}
#Loading { padding: 10% 0; text-align: center; }

#Intro, #Ventajas, #Ejemplos { padding: 30px 0; }
#Servicio, #PorqueDvuelta, #Seguridad { background: rgba(0, 34, 65, 0.05); padding: 30px 0; }

p.Introtext { font-size: 1.15em; line-height: 1.2; text-align: center; }
p.Introtext2 { font-size: 1.2em; line-height: 1.2; }
h2 { text-align: center; font-size: 1.4em; color: #002241; line-height: 1.1; padding: 0 0 1em 0; }

.RightText, .LeftText, .InServicio, .LeftImage, .RightImage, .Columna { width: 100%; float: none; }
.RightText, .LeftText{padding:0 0 1.3em 0}
.LeftImage img, .RightImage img{width:99%; height:auto}
.InServicio { margin: 0 0 1em 0; text-align: center; }
h3 { color: #002241; font-size: 1.2em; line-height: 1.1; padding: 1em 0; }

ol, ul { margin: 1em; }
ol li, ul li { padding-bottom: 1em; }

#OutTabla { overflow-x: auto; padding-bottom:1.2em }
table.InTabla { min-width: 400px; margin: auto; }
table.InTabla th, table.InTabla td { text-align: center; padding: 5px 0; border:1px solid #ccc }

.Columna { margin: 0 0 1em 0; }
.Columna img{text-align:center; width:80px; height:auto}
	.Columna h3{padding:0 0 1em 0}
footer { background: #002241; padding: 8px 0 50px 0; text-align: center; }
.copy { font-size: .85em; color: #ffffff; }
.copy a { color: #fff; text-decoration: none; }

#ContactDiv { position: fixed; bottom: 0; width: 100%; background: #ffffff; padding: 8px 0; border-top: 1px solid #002241; text-align: center; z-index: 10; }
.MobileContact{display:none}
#ContactDiv span { color: #002241; font-weight: bold; }

#IralForm, #Llamar, #NumeroTelefono { padding: 8px 0; border-radius: 15px; color: #ffffff; text-decoration: none; }
#IralForm { width: 40%; float: left; margin: 0 5%; background: #002241; }
#IralForm:hover{background:#064681}
#Llamar, #NumeroTelefono { width: 40%; float: left; margin: 0 5%; background: #d82528; }
#Llamar:hover, #NumeroTelefono:hover{background:#e14648} 
#NumeroTelefono { display: none; }
#Llamar img, #NumeroTelefono img{width:25px; height:auto}
details{padding-bottom:1.2em}
summary::marker{margin-bottom:1.5em}
 
@media only screen and (max-width: 767px) {
	#Banner {background-size:cover}
	.Columna{text-align:center}
	.Claim{text-align:center; }
	h1 { color: #002241; font-size:1.8em }
	.Claim span { color: #ffffff; font-size:1.4em; font-weight:normal}
}
/* ----------------- TABLET (767px) ----------------- */
@media only screen and (min-width: 767px) {
	header{height:auto}
  .Telefono { width: 150px; text-align: right; }
  .Telefono span { color: #002241; font-size: 1.3em; line-height: 40px; font-weight: bold; display: block; }
  
  #Banner { background: url(Images/BannerTablet.webp) center center no-repeat #002241; background-size: cover; padding-bottom: 20px; }
  
  .Claim { width: 50%; margin: 0 350px 0 0; padding:20px 0;text-align: center; }
  .Claim h1 { font-size: 2em; }
  .CalltoactionBanner { display: none; }
  
  #ContactForm { width: 50%; margin: 15px 350px 0 0; }
  
  p.Introtext { font-size: 1.2em; }
	p.Introtext2 { font-size: 1.2em; line-height:1.3 }
  h2 { font-size: 1.6em; }
  
  .RightText { width: 60%; float: right; text-align: left; }
  .LeftText { width: 60%; float: left; text-align: left; }
  .LeftImage { width: 35%; float: left; }
  .RightImage { width: 35%; float: right; }
  .RightText, .LeftText, .RightImage, .LeftImage{padding-bottom:20px}
	.RightImage, .LeftImage{padding-top:1em}
  .Columna { width: 44%; margin: 0 3% 1em 3%; float: left; text-align:center }
  
  #Llamar { display: none; }
  #NumeroTelefono { display: block; }
	.Columna img{text-align:center; width:120px; height:auto}
	.Columna h3{padding:0 0 1em 0}
}

/* ----------------- PORTATIL (990px) ----------------- */
@media only screen and (min-width: 990px) {
  header { height: 100px; }
  .Logo { width: 270px; }
  .Telefono { padding-top: 10px; }
  
  #Banner { background: url(Images/BannerOrdenador.webp) center center no-repeat #002241; background-size: cover; }
  
  .Claim { margin: 0 420px 0 0; padding:20px 0  }
  .Claim h1 { font-size: 2.3em; }
	.Claim span { font-size: 1.5em; }
  #ContactForm {max-width:350px;  margin: 15px 460px 0 0; }
  
  .Columna { width: 29%; margin: 0 2% 1em 2%; }
  .RightText, .LeftText, .RightImage, .LeftImage{padding-bottom:20px}
	.RightImage, .LeftImage{padding-top:20px}
  #IralForm { width: 30%; margin: 0 10%; }
  #NumeroTelefono { width: 30%; margin: 0 10%; }
	
}

/* ----------------- ORDENADOR PEQUEÑO (1200px) ----------------- */
@media only screen and (min-width: 1200px) {
  .Claim { width:50%; margin: 0 30px 0 20px; float: left; }
  .Claim h1 { font-size: 3em; }
	.Claim span { font-size: 2em; }
  #ContactForm { width: 30%; float: left; margin: 25px 10% 0 14%; }
  
  p.Introtext { font-size: 1.25em; }
	p.Introtext2 { font-size: 1.25em; line-height:1.3}
  .RightText, .LeftText { font-size: 1.2em; }
  .RightText, .LeftText, .RightImage, .LeftImage{padding-bottom:25px}
  #IralForm, #NumeroTelefono { width: 26%; margin: 0 12%; }
	.Columna img{text-align:center; width:120px; height:auto}
	.Columna h3{padding:0 0 1em 0}
}

/* ----------------- ORDENADOR (1400px) ----------------- */
@media only screen and (min-width: 1400px) {
  #ContactForm { width: 30%; margin-right: 12%; }
	.Columna img{text-align:center; width:120px; height:auto}
	.Columna h3{padding:0 0 1em 0}
}

/* ----------------- PANTALLA GRANDE (1600px) ----------------- */
@media only screen and (min-width: 1600px) {
  #Banner { background: url(Images/BannerPantalla.webp) center center no-repeat #002241; background-size: cover; }
  .Claim { width: 50%; }
  .Claim h1 { font-size: 3em; }
  #ContactForm { width: 30%; margin: 25px 15% 0 15%; }
  .RightText, .LeftText, .Columna { font-size: 1.2em; }
  
	.RightText { width: 70%;  }
  .LeftText { width: 70%;  }
  .LeftImage { width: 27%;  }
  .RightImage { width: 27%; }
	
}