@keyframes opacidadMenu {
  from {opacity: 0.5;}
  to {opacity: 1;}
}
@font-face {
	font-family: libreSans;
	src: url(fuentes/libreSans.woff2);
	font-weight:370;
}
@font-face {
	font-family: lato;
	src: url(fuentes/lato.woff2);

}
@font-face {
	font-family: latofina;
	src: url(fuentes/latofina.woff2);

}
@font-face {
	font-family: AveMad;
	src: url(fuentes/AveMad.ttf);

}
@font-face {
  font-family: 'monse';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fuentes/monse.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
body {
  font-family: latofina;
  margin: 0;
  padding: 0;
  width:100%;
  height:100%;
  
}
.tapatodo {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
transition: opacity 0.5s ease, visibility 0.5s ease;
opacity:0;
visibility:hidden;
background-color: rgba(255, 255, 255, 0.7); /* fondo oscuro semi-transparente */

z-index:1000;
}

.barraSup {
position:fixed;
display:flex;
background-color:#ffffff;
top:0px;
left:0px;
width:100%;
height:100px;
text-align:center;
transition: top 0.3s ease;
}
.logoChico{
display:flex;
margin-right:20px;
width:100px;
height:100px;
}
.logoChicoResp{
display:none;
}
.imgLogo{
width:95px;
height:95px;
margin-top:2px;
}
.imgLogo:hover{
opacity:0.7;
}

.menu {
	float:left;
	width:fit-content;
	margin:auto;
	vertical-align:middle;
}

.menu-toggle {
  display: none;
  font-size: 24px;
  padding: 15px 20px;
  cursor: pointer;
}

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items:center;
}

.menu > ul > li {
  position: relative;
  margin-left:16px;
}

.menu a {
  display: block;
  padding: 0px 0px;
  color: #333;
  text-decoration: none;
   margin-bottom:16px;
   margin-top:16px;
}
.menu a.pagActual{
 color: #167d37;
 font-weight:bold;

}
.menu .aLogoChico{
	margin-top:0px;
	margin-bottom:0px;
}
.menu ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  min-width: 200px;
  z-index: 998;
 opacity:1;
}

.menu ul ul li {
  width: 100%;
  text-align:left;
  margin-left:16px;
}

.menu li:hover > ul {
  display: block;
  animation: opacidadMenu 0.3s;
}

.menu li:hover > a {
 color: #50a33d;
}
.tapatodo.visible {
	opacity: 1;
	visibility: visible;
}
.tapatodoContent {
	display:flex;
	color: #ffffff;
	font-size: 24px;
	height:100px;
	background-color:#ffffff;
	text-align: center;
}
.buscar{
display:flex;
margin:0px auto;
vertical-align:middle;
text-align:center;
width:fit-content;
height:50px;
border:2px solid #ccc;
border-radius: 30px;
background-color:#ffffff;
}
.cerrar{
	display:flex;
	margin:0px auto;
	margin-left:10px;
}
.cerrar button{
	display:flex;
	border:none;
	align-items: center;
	height:35px;
	width:35px;
	background-color:#ffffff;
	background-image:url("img/cruz.png");
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	cursor:pointer;
}
.cerrar button:hover{
	opacity:0.5;
}
input[type="search"] {
	background-color:transparent;
	padding: 8px 16px;
	border: none;
	font-size: 16px;
	line-height:30px;
	font-style:italic;
}
input[type="search"]:focus{
outline:none;
}

.lupa {
    background-color: transparent; 
    background-image:url("img/lupa.png");
    background-size:contain;
    background-repeat:no-repeat;
    padding:0 0 0 0;
    float:right;
    margin-left:30px;
  	width:35px;
  	height:35px;
    border: none;
    cursor: pointer;
}

/*  Opcional: Ajuste para el botón de lupa */
.lupa:hover {
    opacity: 0.5;
}
.lupaR{
	display:none;

}
.productoBuscado{
	cursor: pointer;
	padding: 8px;
	border: 1px solid #cccccc;
	font-size: 1em;
	color:#48b749;
	border-radius:20px;
	background-color: #ffffff;
	width:50%;
	margin:0px auto;
	transition: width 0.2s , height 0.2s;
}
.productoBuscado:hover{
	width:51%;
	font-size:1.2em;
	border: 1px solid #aaaaaa;
	color:#307f30;

}
.imgPrincipal{
	display:flex;
	align-items:center;
	float:left;
	width:100%;
	margin:auto;
	margin-bottom:30px;
	background-image:url("img/sliderIndex1.jpg");
	background-repeat:no-repeat;
	background-size:cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;"
	text-align:center;
	justify-content: center;
}

.textImgPrin{
	align-items:center;
	text-align:center;
	font-family:AveMad;
	font-size: 10em;
	color:#ffffff;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.contCuadros{
	width:100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	max-width: 100%; 
	margin: 0 auto; 
	grid-gap:3px;
}
.cuadros{
	text-align: center;
	object-fit: contain;
	line-height:0px;
	 aspect-ratio: 1/1;
	 background-repeat:no-repeat;
	 background-size:100%;
}
.aCuadros{
}
.imgCuadros{
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.conttextoCuadros{
display:flex;
width:100%;
height:100%;
align-items:center;
justify-content: center;
}
.textoCuadros{
font-family: latofina;
font-size:30px;
width:auto;
height:auto;
padding: 30px 30px 30px 30px;
border-radius:3px;
background-color: rgb(255 255 255 / 71%);
cursor:pointer;
}
.textoCuadros:hover{
background-color: rgb(255 255 255 / 100%);
color:#cccccc;
}
.contProductos{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	float:left;
	width:100%;
}

.productos{
	width:300px;
	height:400px;
	background-color:#fbfbfb;
	margin-top:20px;
	margin-bottom:20px;
	margin-left:10px;
	margin-right:10px;
	border-radius:10px;
	cursor:pointer;
	box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
	transition: box-shadow 0.2s ease;
	text-align:center;
}
.productos:hover{
box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.5);
}
.imgProductos{
	width:280px;
	height:280px;
	background-color:#ffffff;
	margin:0px auto;
	margin-top:10px;
	border-radius:8px;
}
.nosotros{
padding-top:100px;
padding-bottom:100px;
width:75%;
margin:0px auto;
text-align:center;
font-family:latofina;

}
.nosotrosCont{
width:100%;
background-image:url('img/fondoNosotros.jpg');
height:auto;
float:left;
background-size:cover;
}
.titNos{
font-family:latofina;
font-size:70px;
margin-bottom: 50px;
color:#6c6c6c;
}
.rallitaNos{
width: 100px;
height: 2px;
background-color:#6c6c6c;
margin:0px auto;
margin-bottom: 50px;
}
.textNos{
font-size:25px;
text-align:justify;
hyphens: auto;
color:#6c6c6c;
}
.contacto{
font-family:latofina;
float:left;
padding-bottom:100px;
width:100%;
margin:0px auto;
padding-top:100px;
text-align:center;
background-color: #f3f3f3;
}
.imput {
		
		box-sizing: border-box;
		border: 3px solid;
		border-color:#bbbbbb;
		border-radius: 5px;
		font-family:'monse';
		font-size:20px;
		padding-left:20px;
		margin-bottom:30px;
		height:50px;
		width:800px;
		transition: border-color 0.7s ease;
	}
textarea {
		
		box-sizing: border-box;
		border: 3px solid #bbbbbb;
		border-color:#bbbbbb;
		padding-top:20px;
		font-family:'monse';
		font-size:20px;
		margin-bottom:30px;
		height:200px;
		width:800px;
		border-radius: 5px;
		transition: border-color 0.5s ease;
	}
	textarea:focus{
		border-width:4px;
		border-color:#0ABB8F;
		outline:none;
	}
.enviar{	
		box-sizing: border-box;
		border: 3px solid;
		border-radius: 25px;
		border-color:#539b6c;
		font-family:'monse';
		font-weight:bold;
		color:#ffffff;
		font-size:25px;
		margin-top:20px;
		margin-bottom:50px;
		cursor:pointer;
		height:50px;
		width:200px;
		background-color:#0ABB8F;
		transition: background-color 0.5s ease;
	}
	.enviar:hover{
		background-color:#147852;
		}
		
		
	.contProduF{
		width:100%;
		height:auto;
		margin-top:150px;
		float:left;
		background-color:#f1f1f1;
		padding-top: 30px;
		padding-bottom:30px;
	}
	.galería{
		width:40%;
		float:left;
		margin-left:10%;
	}
	.texto{
		width:40%;
		height:100%;
		float:right;
		margin-right:50px;
	}
	 .galeria-principal {
      width: 100%;
      overflow: hidden;
    }

    .galeria-principal img {
      width: 100%;
      height: auto;
      object-fit: cover;
      display: block;
    }

    .miniaturas {
      display: flex;
	  justify-content: center;
      gap: 10px;
      overflow-x: auto;
      margin-top: 25px;
      padding-bottom: 10px;

    }

    .miniaturas img {
      flex: 0 0 auto;
      width: 100px;
      height: 80px;
      object-fit: cover;
      cursor: pointer;
      border: 2px solid transparent;
      border-radius: 6px;
      transition: border 0.2s;
    }

    .miniaturas img:hover,
    .miniaturas img.activa {
      border-color: #008909;
    }

	.pie{
	float:left;;
	width:100%;
	height:auto;
	margin:0 auto;
	font-family:latofina;
	padding-top:50px;
	margin-bottom:50px;
	color: #696969;
	}
	.pieIz{
	font-size:1vw;
	float:left;
	margin-left:150px;

	}
	.pieDe{
		font-size:1vw;
		float:left;
		margin-left:70px;
	}

	.contenedor-imgs {
		width:100%;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 20px; /* separación entre las imágenes */
		padding: 20px 0; /* opcional, da aire arriba y abajo */
	}
	.contenedor-imgs a:hover {
		opacity:0.75;

	}
	.contenedor-imgs a img{
		width:75px;
		height:75px;
	}
/* Responsive //////////////////////////////////////////////////////////////////////
 /////////////////////////////////////////////////////////////////////////////////*/
@media (max-width: 1200px) {
	.barraSup {
	float:left;
	position:fixed;
	width:100%;
	height:auto;
	text-align:center;
	align-items: center;
	justify-content: center;
	}

	.logoChico{
	display:none;
	}
	.logoChicoResp{
	display:inline-block;
	width:100px;
	height:100px;

	}
	.flechAbajo{
		display:none;
	}
	.menu{
		width:100%;
		z-index:999;
	}
	.menu-toggle{
		float: left;
		display: block;
		margin-top:20px;
		z-index: 100;
	}
	.hamburLinea{
		display: inline-block;
		position: relative;
		width: 22px;
		height: 2px;
		top:-4px;
		background-color:#000000;
		transition: 0.2s ease-in-out;
		float:left;
	}
	.hamburLinea:before{
		content: "";
		left:0px;
		display: inline-block;
		position: absolute;
		top:7px;
		width: 22px;
		height: 2px;
		background-color:#000000;
		transition: transform 0.2s ease-in-out;
		transition: 0.2s ease-in-out;
	}
	.hamburLinea:after{
		content: "";
		top:-7px;
		left:0px;
		display: inline-block;
		position: absolute;
		width: 22px;
		height: 2px;
		background-color:#000000;
		transition: transform 0.2s ease-in-out;
		transition: 0.2s ease-in-out;
	}
	.hamburLinea.cruz{
		display: inline-block;
		position: relative;
		width: 22px;
		height: 2px;
		top:-4px;
		background-color:transparent;

	}
	.hamburLinea.cruz:before{
		transform: rotate(-45deg);
		content: "";
		left:0px;
		display: inline-block;
		position: absolute;
		top:0px;
		width: 22px;
		height: 2px;
		background-color:#000000;
	}
	.hamburLinea.cruz:after{
		transform: rotate(45deg);
		content: "";
		top:0px;
		left:0px;
		display: inline-block;
		position: absolute;
		width: 22px;
		height: 2px;
		background-color:#000000;
	}
	.menu ul {
		font-size:18px;
		background-color: #f8f8f8;
		text-align:left;
		position:absolute;
		width:0px;
		height:800px;
		overflow:hidden;
		opacity:0;
		transition: width 0.2s, opacity 0.3s;
		z-index:10000;

	}

	.menu ul.open {
		display: block;
		width:100%;
		opacity:1;
	}

	.menu > ul > li {
		position:relative;
	}

	.menu ul ul {
		position: static;
		border: none;
		background: #f1f1f1;
		height:0px;
		min-width:250px;
	}

	.menu li:hover > ul {
		display: none;
	}

	.menu li > ul {
		display: none;
		height:0px;
	}

	.menu li.open > ul {
		height:auto;
		display: block;
		margin-left:50px;
	}

	.menu li.has-submenu > a::after {
		content: "▸";
		float: right;
		margin-left: 10px;
	}

	.menu li.has-submenu.open > a::after {
		content: "▾";
	}

	.menu li > a {
		padding: 15px;
	}

	.buscar{
	width:auto;
	align-items: center;
	text-align: center;
	margin-top:0px;
	margin-right:0px;
	height:30px;
	border:2px solid #ccc;
	border-radius: 30px;
	}
	.cerrar{
		margin:0px auto;
	}
	input[type="search"] {
		background-color:transparent;
		padding: 0px 16px;
		border: none;
		font-size: 16px;
		line-height:30px;
		font-style:italic;
	}
	input[type="search"]:focus{
	outline:none;
	}
	.lupa{
	display:none;
	}
	.lupaR {
		display:inline;
		float:right;
		background-color: transparent;
		background-image:url("img/lupa.png");
		background-size:contain;
		background-repeat:no-repeat;
		padding:0 0 0 0;
		float:right;
		margin-right:15px;
		margin-top:36px;
		width:30px;
		height:30px;
		border: none;
		cursor:pointer;
		}
	.lupaR:hover{
		opacity:0.5;

	}
	.productoBuscado{
		cursor: pointer;
		padding: 8px;
		border: 1px solid #cccccc;
		font-size: 1em;
		border-radius:20px;
		background-color: #ffffff;
		width:80%;
		margin:0px auto;
		transition: width 0.2s , height 0.2s;
	}
	.productoBuscado:hover{
		width:81%;
		font-size:1.2em;
		border: 1px solid #aaaaaa;

	}
	.imgPrincipal{
		display:flex;
		align-items:center;
		float:left;
		width:100%;
		margin:auto;
		margin-bottom:30px;
		background-image:url("img/sliderIndex1R.jpg");
		background-repeat:no-repeat;
		background-size:cover;
		background-size:cover;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		text-align:center;
		justify-content: center;
	}

	.textImgPrin{
		align-items:center;
		text-align:center;
		font-size: 4em;
		text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
		color:#ffffff;
	}

	.contCuadros{
		float:left;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		max-width: 100%;
		margin: 0 auto;
		grid-gap:3px;
	}
	.cuadros{
		text-align: center;
		object-fit: contain;
		line-height:0px;
		aspect-ratio: 1/1;
	}
	.aCuadros{
	}
	.imgCuadros{
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
	}
	.conttextoCuadros{
		display:flex;
		width:100%;
		height:100%;
		align-items:center;
		justify-content: center;
		text-align: center;

	}
	.textoCuadros{
		font-family: latofina;
		font-size:5vw;
		word-break: normal;
		white-space: normal;
		width:auto;
		height:auto;
		padding: 30px 15px 30px 15px;
		border-radius:10px;
		background-color: rgb(255 255 255 / 55%);
		cursor:pointer;
	}
	.textoCuadros:hover{
		background-color: rgb(255 255 255 / 100%);
		color:#cccccc;
	}
	.contProductos{
	float:left;
	width:100%;
}
.productos{
	width:90%;
	height:auto;
	background-color:#fbfbfb;
	margin-top:20px;
	margin-bottom:20px;
	margin-left:10px;
	margin-right:10px;
	border-radius:10px;
	cursor:pointer;
	box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
	transition: box-shadow 0.2s ease;
	text-align:center;
	padding-bottom:30px;
}
.productos:hover{
box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.5);
}
.imgProductos{
	width:80%;
	height:auto;
	background-color:#ffffff;
	margin:0px auto;
	margin-top:10px;
	border-radius:8px;
}
.contProduF{
		width:100%;
		height:auto;
		margin-top:150px;
		float:left;
		text-align:center;
	}
	.galería{
		width:90%;
		margin-left:5%;
	}
	.texto{
		width:90%;
		height:100%;
		float:left;
		margin-left:5%;
	}
	 .galeria-principal {
      width: 100%;
      overflow: hidden;
    }

    .galeria-principal img {
      width: 100%;
      height: auto;
      object-fit: cover;
      display: block;
    }

    .miniaturas {
      display: flex;
	  justify-content: center;
      gap: 10px;
      overflow-x: auto;
      margin-top: 25px;
      padding-bottom: 10px;

    }

    .miniaturas img {
      flex: 0 0 auto;
      width: 50px;
      height: 40px;
      object-fit: cover;
      cursor: pointer;
      border: 2px solid transparent;
      border-radius: 6px;
      transition: border 0.2s;
    }

    .miniaturas img:hover,
    .miniaturas img.activa {
      border-color: #008909;
    }
	.nosotros{
		float:left;
		padding-bottom:100px;
		padding-top:30px;
		width:100%;
		margin:0px auto;
		margin-top:50px;
		text-align:center;
		font-family:latofina;

	}
	.nosotrosCont{
		width:100%;
		background-image:url('img/fondoNosotrosR.jpg');
		height:auto;
		float:left;
		background-size:cover;
	}
	.titNos{
		font-family:latofina;
		font-size:10vw;
		color: #6c6c6c;
		margin-bottom:0px;
	}
	.rallitaNos{
		width: 100px;
		height: 1px;
		background-color:#6c6c6c;
		margin:0px auto;
		margin-top:30px;
		margin-bottom: 30px;
	}
	.textNos{
		font-size:5vw;
		text-indent: 1em;
		padding-left:15px;
		padding-right:15px;
		color: #6c6c6c;
		hyphens: auto;
	}
	.contacto{
		float:left;
		font-family:latofina;
		padding-top:100px;
		padding-bottom:30px;
		width:100%;
		margin:0px auto;
		text-align:center;
		background-color: #f3f3f3;
	}
	.imput {

		box-sizing: border-box;
		border: 3px solid;
		border-color:#bbbbbb;
		border-radius: 5px;
		font-family:'monse';
		font-size:20px;
		padding-left:20px;
		margin-bottom:30px;
		height:50px;
		width:80%;
		transition: border-color 0.7s ease;
	}
	textarea {

		box-sizing: border-box;
		border: 3px solid #bbbbbb;
		border-color:#bbbbbb;
		padding-top:20px;
		font-family:'monse';
		font-size:20px;
		margin-bottom:30px;
		height:200px;
		width:80%;
		border-radius: 5px;
		transition: border-color 0.5s ease;
	}
	textarea:focus{
		border-width:4px;
		border-color:#0ABB8F;
		outline:none;
	}
	.enviar{
		box-sizing: border-box;
		border: 3px solid;
		border-radius: 25px;
		border-color:#539b6c;
		font-family:'monse';
		font-weight:bold;
		color:#ffffff;
		font-size:25px;
		margin-top:20px;
		margin-bottom:30px;
		cursor:pointer;
		height:50px;
		width:200px;
		background-color:#0ABB8F;
		transition: background-color 0.5s ease;
	}
	.enviar:hover{
		background-color:#147852;
	}


	.pie{
		float:left;
		width:100%;
		height:auto;
		margin:0 auto;
		font-family:latofina;
		font-size:4vw;
		padding-top:50px;
		color: #696969;

	}
	.pieIz{
		font-size:3vw;
		width:100%;
		text-align:center;
		margin-bottom:20px;
		margin-left:0px;


	}
	.pieDe{
		font-size:3vw;
		width:100%;
		text-align:center;
		margin-bottom:20px;
		margin-left:0px;

	}
	.contenedor-imgs a img{
		width:50px;
		height:50px;
	}
	}