@charset "utf-8";
/* CSS Document */
* { padding: 0; box-sizing: border-box; font-family: 'corbel';}
@font-face { font-family: 'corbel'; src: url('../fonts/corbel.eot'); src: local(''), url('../fonts/corbel.woff') format('woff'), url('../fonts/corbel.ttf') format('truetype'), url('../fonts/corbel.svg') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'corbel-bold'; src: url('../fonts/corbel-bold.eot'); src: local(''), url('../fonts/corbel-bold.woff') format('woff'), url('../fonts/corbel-bold.ttf') format('truetype'), url('../fonts/corbel-bold.svg') format('svg'); font-weight: normal; font-style: normal; }
html { width: 100%; margin: 0px; padding:0px; }
body {width: 100%; margin: 0px; padding:0px; background-color: #f1f1f1; font-family: 'corbel', Verdana, sans-serif; font-size: 16px}
.masinfo {width: 22%}
.masinfo:hover {box-shadow: 0px 0px 8px 3px #666; transition: all 0.3s ease; filter: grayscale(100%)}
.division {border-bottom: 2px solid #002E5A; width: 30%; margin:auto}
#contenedor { position: absolute; width: 100%; height: auto; z-index: 3; top: 0px; margin-right: auto; margin-left: auto; left: 0px; right: 0px; }
header {position:fixed; width:100%; height:90px; background:#fff; z-index:12; box-shadow: 0px 0px 5px 3px rgba(0,0,0,.3); height: 90px; background: #fff; color: #000; display: flex; justify-content: flex-end;}
#btn-menu { display: none;}
header label { font-size: 30px; cursor: pointer; display: none;}
.menu ul { background: #fff; display: flex; list-style: none;}
.menu ul ul { display: none;}
.menu a { display: block; padding: 15px 10px; color: #000; text-decoration: none; line-height: 32px; font-weight: 700;}
.menu a:hover { background: #E61875; color: #fff}
.menu a i { margin-left: 10px;}
.menu ul li:hover ul { transition: all 0.3s ease; display: block; position: absolute;}
.submenu ul li a {padding: 4px 15px 4px 15px;}
.cajaFoto {position:relative; width: 100%; height: auto;margin:auto; overflow: hidden;}
.cajaFoto img {width: 100%; height: auto}
.cajaTextoDentroFoto {position:absolute; top: 50%; left: 5%;  transform: translate(0, -50%);/* background-color: rgba(0,0,0,.4);*/ border-radius: 6px; width:50%}

/* Estilos del slider */
.slider-container {position: relative; width: 100%; height: auto; overflow: hidden;}
.slider-wrapper {position: relative; width: 100%; height: auto;}
.slide {position: absolute; top: 0; left: 0; width: 100%; height: auto; opacity: 0; transition: opacity 1s ease-in-out, transform 0.5s ease-in-out;}
.slide.active {opacity: 1; position: relative;}
.slide img {width: 100%; height: auto; display: block;}
.slider-nav {position: absolute; top: 50%; width: 100%; transform: translateY(-50%); z-index: 10;}
.slider-btn {position: absolute; background: rgba(0, 0, 0, 0.5); color: white; border: none; padding: 15px 20px; cursor: pointer; font-size: 24px; transition: background 0.3s ease; border-radius: 5px;}
.slider-btn:hover {background: rgba(0, 0, 0, 0.8);}
.prev-btn {left: 20px;}
.next-btn {right: 20px;}
.slider-dots {position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: 10px;}
.dot {width: 12px; height: 12px; background: rgba(255, 255, 255, 0.5); border-radius: 50%; cursor: pointer; transition: background 0.3s ease;}
.dot.active {background: white;}
.dot:hover {background: rgba(255, 255, 255, 0.8);}

/* Animaciones para las diapositivas */
.slide.active .cajaTextoDentroFoto h1,
.slide.active .cajaTextoDentroFoto h2 {
    animation-delay: 0.3s;
}
h2, h3 {font-size: 24px; margin-top: 15px; margin-bottom: 10px; text-align:left;font-weight: normal; font-style: normal}

nav { float:right; margin-top: 0px;}
#principal { width:100%; height: auto;  margin-left:auto; margin-right:auto; position: relative; max-width: 1920px; top: 90px; margin-bottom: 180px;}
#principal .numero {color: #666666; font-size: 16px; text-align: right; line-height: 150%; margin-top: 15px; margin-bottom: 15px; font-weight: normal; font-style: normal; }
#principal h1 {	color: #404040; font-size: 36px; margin: 60px 10px 10px 0px; font-weight: 300; font-style: normal; line-height: 110%; text-align:center; margin-left: 10%; margin-right: 10%; }
#principal h2 { color: #404040; font-size: 24px; font-weight: 400; font-style: normal; line-height: 110%; text-align: center; margin-left: 10%; margin-right: 10%; }
#principal h3 { color: #555; font-size: 20px; line-height: 110%; margin-top: 15px; margin-bottom: 10px; font-weight: 400; text-align:center; margin-left: 10%; margin-right: 10%; }
#principal h4 { color: #555; font-size: 18px; line-height: 150%; margin-top: 15px; margin-bottom: 15px; font-weight: 400; font-style: normal; text-align:center; margin-left: 10%; margin-right: 10%;}
#principal h5 { color: #555; font-size: 16px; text-align: center; line-height: 150%; margin-top: 0px; margin-bottom: 0px; font-weight: 400; font-style: normal; padding: 0px 0px 0px 20px; margin-left: 10%; margin-right: 10%;}
#principal h6 { color: #373126; font-size: x-small; text-align: right; font-weight: 400; font-style: normal;margin-left: 10%; margin-right: 10%; }
#principal p { color: #555; font-size: 16px; line-height: 150%; margin-top: 15px; margin-bottom: 15px; font-weight: 400; font-style: normal; margin-left: 10%; margin-right: 10%;}
#principal ul { color: #769D00; font-size: 16px; text-align: left; line-height: 150%; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-left: 10%; margin-right: 10%;}
#principal ol { color: #769D00; font-size: 16px; text-align: left; line-height: 150%; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-left: 10%; margin-right: 10%;}
#principal li { margin-left: 60px; padding: 0px; color: #444; font-size: 16px; text-align: left; line-height: 150%; white-space: normal; }
#principal a:link, #principal a:visited, #principal a:active { color: #002E5A; text-decoration: none; text-align: right; padding: 0px;}
#principal a:hover { color: #000; text-decoration: underline !important; }
.error {background-color: #002E5A; color: white;}
textarea {width: 95%; height: 250px;}
.limpiar {clear: both;}
.cookies {padding-left:5px;text-decoration:none;color:#ffffff;}
.campo_formulario { max-width: 600px; width:100%; background-color: rgba(250,250,250,1); color: #444;  border: 1px #999 solid; padding: 6px; border-radius: 3px ;  }
#cabecera {position:relative; width:100%; height:55px; max-width: 1400px;margin-left: auto; margin-right: auto; }
.logoempresa {position:absolute; left: 30px; border:0px; width: auto; height:90px; float:left; margin-top:0; }
.logo {height:100%; width:auto }
.to-top-link img {position: fixed; z-index: 9999; bottom: 60px; right: 20px; background-color: rgba(0, 0, 0, 0.5); border-radius: 5px;}

.video_container {width: 95%; height: auto; float: left; margin: 1%; max-width: 800px}
.video_containerNoFloat {width: 95%; height: auto; margin: auto; max-width: 2000px}
.video {position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; margin-left:5%}
.video iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%}
.video_titulo {width: 95%; height: auto; float: left; margin: 1%}
.video_titulo h2 {font-size: 18px; color: #222; margin: 1% !important; text-align: left !important}
.video_titulo p {margin: 1% !important; text-align: left !important}
.video_tituloNoFloat {width: 95%; height: auto; margin: 1%; text-align: left;}
.video_tituloNoFloat h2 {font-size: 18px; color: #222; margin: 1% !important; text-align: left !important}
.video_tituloNoFloat p {margin: 1% !important; text-align: left !important}

.caja {display: flex; gap:1%; flex-wrap: wrap; margin-top: 20px; margin-bottom: 20px; width: 90%; margin: auto}
.caja80 {display: flex; gap:1%; flex-wrap: wrap; margin-top: 20px; margin-bottom: 20px; width: 80%; margin: auto}
.cajita {flex-grow: 1; flex-shrink: 1; flex-basis: 10px;}

.cajita:hover {box-shadow: 0px 0px 8px 3px #aaa; transition: all 0.3s ease; }
.cajita h1, .cajita h2, .cajita p {text-align: left !important;}
.cajita img {width: 100%; height: auto; border-radius: 6px;}

.cajaDestacada {width: 80%; margin:auto; left:auto; right: auto; text-align: center; border: 1px solid #888; margin-top: 20px; margin-bottom: 20px; padding: 20px; border-radius: 10px; background-color: #f9f9f9;}
.cajitaSinEfecto {flex-grow: 1; flex-shrink: 1; flex-basis: 10px;}
.cajitaSinEfecto h1, .cajitaSinEfecto h2, .cajitaSinEfecto p {text-align: justify !important;}
.cajitaSinEfecto img {width: 100%; height: auto; border-radius: 6px;}
.audio {width: 70%; height: 100px; margin-top: 20px; margin-bottom: 20px; margin-left: auto; margin-right: auto; border: 1px solid #eee; background-color: #fff; padding: 20px; border-radius: 6px;}


.bordes {border: 1px solid #888; border-radius: 6px;}
.fondoBlanco {background-color: #fff; }
.cajaIzquierda {float: left; width: 70%; padding: 2%;}
.cajaDerecha {float: right; width: 30%; padding: 2%;}
.cajaProducto {width: 100%; height: auto; margin-bottom: 20px; background-color: #fff; border: 1px solid #eee; padding: 10px;}
.cajaProducto img {width: 100%; height: auto;}
.cajaShowProducto {float: left; width: 25%; padding: 2%;}
.flotar { float: left; }
.miel {width: 0px; height: 0px; overflow: hidden;}
.items {font-weight: bold; line-height: 26px; font-size: 16px; padding:10px 20px 10px 20px; margin: 2px; background-color: #002E5A !important; color: #fff !important; border: 1px solid #002E5A !important;}
.items:hover {font-weight: bold; line-height: 26px; font-size: 16px; padding:10px 20px 10px 20px; margin: 2px; background-color: #fff !important; color: #000 !important; border: 1px solid #002E5A !important;}
.columnas2 { text-align: justify !important; column-count: 2; column-gap: 40px; margin-bottom: 30px; }
.columnas2 p {margin-top: 0px !important;}

#piedepagina { width:100%; margin-left:auto; margin-right:auto; height: auto; color: #000; font-size: 14px; text-align: center; clear: both; background-color: #333; box-shadow: 0px 0px 5px 3px rgba(0,0,0,.3) inset; padding: 50px 0 30px 0; box-sizing: border-box;}
#piedepagina img {margin-top: 20px; vertical-align: top; }
#piedepagina a:link, #piedepagina a:visited, #piedepagina a:active { color: #FB78AD; text-decoration: none; text-align: right; margin: 4px; padding: 4px; line-height: 160%;}
#piedepagina a:hover { text-decoration: underline; color: #E61875; margin: 4px; padding: 4px; line-height: 160%; font-weight: bold}
.pieInterior {width: 80%; margin:auto; display: flex; gap: 30px; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;}
.pieInteriorCaja {flex: 1 1 calc(25% - 23px); flex-grow: 1; padding: 10px; color: #ccc;}
.pieInteriorCaja h2 {font-size: 18px; margin-bottom: 10px; color: #fff !important; text-align: left !important;}
.pieInteriorCaja p {font-size: 14px; color: #ccc !important; text-align: left !important;}
 
#formulario_contacto { color: #000; font-size: 16px; margin-top: 0px; margin-left: 15px; font-weight: normal; font-style: normal; }
#formulario_contacto a:link, #formulario_contacto a:visited, #formulario_contacto a:active { color: #002E5A; text-decoration: none; text-align: center; }
#formulario_contacto a:hover { text-decoration: underline; color: #fff; }
#formulario_contacto table { width:100%; }
#formulario_contacto td {font-size:16px; vertical-align: top; }
#formulario_contacto textarea {color: #222; border: 1px solid #eee; background-color: #ffffff; width:100%; height:300px; font-size: 16px; font-weight: normal; font-style: normal; font-family: 'corbel', Verdana, sans-serif; }
#formulario_contacto select {background-color: #ffffff; width:60%; font-size: 16px; padding: 4px; border: 1px solid #888 !important;}
#barritaloca {position:fixed; left:0px; right:0px; bottom:0px; width:100%; min-height:50px; z-index: 99999; background: #444; color:#fafafa; display: block; } 
.barritaloca_texto {position: relative; width:75%; text-align:center; float: left; top: 20px; padding-left: 1%;}
.barritaloca_texto a {color: #fafafa;}
.barritaloca_boton { position: relative; width:10%; margin-left:1%; text-align:center; float: left; top: 10px;}
.barritaloca_ok { position: relative; padding:20px; text-decoration:none; background:#002E5A; color:#fff; top:15px; cursor:pointer;}
.barritaloca_ok:hover { background:#ffffff; color:#002E5A; text-decoration: none !important; cursor:pointer;}
.barritaloca_info {padding-left:5px; text-decoration:none; color:#ffffff;}

.button, .button:visited, .button:active, input.button, input.button:visited, input.button:active {display: inline-block; padding: 3px 15px !important; text-decoration: none !important; border: 0px; position: relative; cursor:pointer; transition: all 0.1s ease; border-bottom: 1px solid rgba(0,0,0,0.25); top: 1px; border-radius: 5px; font-size: 14px; border: 1px solid #ccc; font-size: 16px}
a:hover {text-decoration: none !important}
.normal, .normal:visited, .normal:active {color: #fff !important; background-color:#E61875; }
.normal:hover {color: #002E5A !important; background-color: #fff !important; border: 1px solid #E61875; text-decoration: none !important}
.blue, .blue:visited, .blue:active {color: #fff !important; background-color:#002E5A; }
.blue:hover {color: #002E5A !important; background-color: #fff !important; border: 1px solid #002E5A; text-decoration: none !important}
.orange, .orange:visited, .orange:active {color: #fff !important; background-color:#f9c319; }
.orange:hover {color: #fff !important; background-color: #8cc45b !important; border: 1px solid #8cc45b; text-decoration: none !important}
.grey, .grey:visited, .grey:active {color: #fff !important; background-color:#9C9C9A; }
.grey:hover {color: #fff !important; background-color: #666 !important; border: 1px solid #f9c319; text-decoration: none !important}
.violet, .violet:visited, .violet:active {color: #fff !important; background-color:#8a2be2; }
.violet:hover {color: #8a2be2 !important; background-color: #fff !important; border: 1px solid #8a2be2; text-decoration: none !important}
.red, .red:visited, .red:active {color: #fff !important; background-color:#EF4444; border: 1px solid #EF4444}
.red:hover {color: #EF4444 !important; background-color:#fff !important; border: 1px solid #EF4444; text-decoration: none !important}
.purple, .purple:visited, .purple:active {color: #fff !important; background-color:#E22BBD; }
.purple:hover {color: #E22BC3 !important; background-color: #fff !important; border: 1px solid #E22BBD; text-decoration: none !important}
.grande, .grande:hover, .grande:active, .grande:visited {padding: 12px !important; height: 45px !important}
select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: white; border: 1px solid #ccc; padding: 5px; border-radius: 4px; width: 100%; box-sizing: border-box; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"%3E%3Cpath fill="black" d="M0 0l5 5 5-5H0z"/%3E%3C/svg%3E'); background-repeat: no-repeat; background-position: right 10px center; background-size: 10px; cursor: pointer; }



/* MEDIA QUERIES */
@media only screen and (max-width: 1100px) {
#menuprincipal {position:absolute; top:76px; left:-300px; padding:2%; width: 400px; max-width: 96%; height:auto; background-color: rgba(0,0,0,1) ; z-index:10; visibility:hidden; overflow:visible; transition: all 0.6s ease;}
#menuprincipal h2 { font-size:16px; height:auto; }
.menu {float:none; margin-left:5px; font-size: 14px;}
.submenu {height:0; position:relative; top:0px; left:0px; width:100%; visibility:hidden; padding: 2px; overflow:hidden;}
.submenu li { margin-bottom:10px; height: auto; margin-top: 3px; }
.submenu a {font-size:16px; }	
#barritaloca {height:90px; line-height:20px;}
.flotar { float: none; width: 99% !important;}
.columnas2 { text-align: justify !important; column-count: 2; column-gap: 40px; }
.cajaFoto {position:relative; width: auto; height: 90%; margin:auto; overflow: hidden; align-items: center;}
.cajaFoto img {width: auto; height: 90%; overflow: hidden; align-items: center;}
.cajaTextoDentroFoto {position:absolute; top: 50%; left: 50%;  transform: translate(-50%, -50%); /* background-color: rgba(0,0,0,.4)*/; border-radius: 6px; width:90%}
/* Responsive slider */
.slider-btn {padding: 10px 15px; font-size: 18px;}
.prev-btn {left: 10px;}
.next-btn {right: 10px;}
.slider-dots {bottom: 15px;}
.dot {width: 10px; height: 10px;}
.cajaTextoDentroFoto {width: 90%;}
.cajaTextoDentroFoto h1 {font-size: 28px !important;}
.cajaTextoDentroFoto h2 {font-size: 16px !important;}
/* fin texto encima de imagen */
#piedepagina {padding:20px;}
.pieInteriorCaja {flex: 1 1 calc(50% - 15px);}
}

@media only screen and (max-width: 900px) {
.logoempresa { border:0px; height:90px; width:auto; float:left; margin-top:0; }
#menuprincipal {position:absolute; top:76px; left:-300px; padding:2%; width: 400px; max-width: 96%; height:auto; background-color: rgba(0,0,0,1) ; z-index:10; visibility:hidden; overflow:visible; transition: all 0.6s ease;	}
#menuprincipal h2 { font-size:16px; height:auto; }
.submenu li { margin-bottom:2px; height: auto; margin-top: 3px; }
.submenu a {font-size: 16px; }
#principal h1 {	font-size: 22px; }
#barritaloca {height:90px; line-height:17px;}
.flotar { float: none; width: 99% !important;}
#presupuesto { top: 70px; position:absolute; }
.columnas2 { text-align: justify !important; column-count: 1; column-gap: 40px; }
.caja {display: block; width: 90%; margin: auto;}
h1 {font-size: 20px}
.cajaFoto {position:relative; width: auto; height: 90%; margin:auto; overflow: hidden;}
.cajaFoto img {width: auto; height: 90%; overflow: hidden}
.cajaTextoDentroFoto {position:absolute; top: 50%; left: 50%;  transform: translate(-50%, -50%); /* background-color: rgba(0,0,0,.6); */ border-radius: 6px; width:100%}
/* Responsive slider para móvil */
.slider-btn {padding: 8px 12px; font-size: 16px;}
.prev-btn {left: 5px;}
.next-btn {right: 5px;}
.slider-dots {bottom: 10px;}
.dot {width: 8px; height: 8px;}
.cajaTextoDentroFoto h1 {font-size: 24px !important;}
.cajaTextoDentroFoto h2 {font-size: 14px !important;}
/* fin texto encima de imagen */
  header label { display: block; padding-top: 16px; padding-right: 16px; transition: all 0.4s ease;}
  .menu { position: absolute; top: 64px; left: 0; width: 70%; transform: translateX(-100%); transition: all 0.3s;}
  .menu ul { flex-direction: column; display: block;}
  .menu ul li:hover ul { display: none; position: static;}
  .menu a i { position: absolute; right: 16px; line-height: 32px;}
  #btn-menu:checked ~ .menu { transform: translateX(0%);} 
  .pieInteriorCaja {flex: 1 1 100%;}   
}