/*Carrillo Benitez Erick Antonio 606*/
*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}
body{
	/*dejar el poderoso body*/
	/*colores solidos*/
	/*background-color:#FF0000;*/
	/*background-color:rgba(200,120,40);*/
	/*background-color:hsl(200,100%,50%);*/
	
	/*colores degradados*/
	/*background-image:linear-gradient(to right,red,blue);*/
	/*background-image:radial-gradient(circle,blue,yellow);*/
	
	
	/*texto*/
	font-family: fuente-texto;
	font-size:40px;
	font-weight:bold;
	/*Se puede colocar el nombre, codigo, valor rgb hsl*/
	color:ffff00;
	/*Alineacion: left, center, right, justify*/
	/*text-align:center;
	display:flex;
	flex-direction:column;*/
	/*para que se ocupe toda la pantalla*/
	min-height:100vh;
}
hr{
	/*dejar hr*/
	/*Largo de la linea*/
	width:80%;
	/*ancho,tipo,color*/
	border:5px dashed #0000FF;
	/*Redondea el borde*/
	border-radius:20px;
}
p{
	/*dejar solo p*/
	font-size:20px;
	text-align:center;
	/*Interlineado, espacio entre lineas*/
	line-height:1.5;
	/*Espacio entre letras*/
	letter-spacing:2px;
	color:#FFFF00
}
img{
	/*solo dejar el img src y ya*/
	width:200px;
	height:200px;
	/*si se quiere un circulo debe de ser la mitad de ambos valores
	ejemplo widht:200px height:200px y el radius debe ser 100**/
	border-radius:20px;
}
/*Clases*/
/*Clases para texto*/
.titulo-principal{
	font-size:48px;
	color:#00ffff;
	text-align:center;
	font-weight:bold;
	font-family: fuente-titulo;
}
/*subtitulos*/
.subtitulo{
	font-size:25px;
	color:#4FADD6;
	/*subrayar texto*/
	text-decoration:underline;
	/*texto en italica*/
	/*font-style:italic;*/
}
.datos-desarrollador{
	font-size:20px;
	line-height:2;
	font-weight:bold;
	color:white;
}
/*clases para imagenes*/
.imagen-logo{
	border-radius:50%;
	width:200px;
	height:200px;
	/*
	0-desplazamiento horizontal
	4px-desplazamiento vertical
	10px-difuminado de la sombra
	rgba(0,0,0,0.3);- color negro con 30% de opacidad
	*/
	box-shadow:0 4px 10 px rgba (0,1000,100,0.3);
	position:absolute;
	left:20px;
}
/*Divs o contenedores*/
.encabezado{
	display:flex;
	position:relative;
	align-items:center;
	justify-content:center;
	height:200px;
	/*Padding separador de contenido del borde*/
	padding:0 20px;
	background-image:linear-gradient(gray,red);
	
}
/*clase principal del div principal*/
.main{
	/*emouja el siguiente divs*/
	flex:1;
	padding:20px;
	background-image:url("../imagenes/images.jpg");
	text-align:center;
}
.pie{
	padding:20px;
	background-image:linear-gradient(red,gray);
}
/*menu de navegacion*/
.navegacion{
	display:flex;
	height:100px;
}
.navegacion-item{
	flex:1;
	display:flex;
	justify-content:center;
	align-items:center;
	color:#0000ff;
	background:#ff0000;
	transition:flex-grow 0.3s, background 0.3s;
}
.navegacion-titulo{
	margin:0;
	font-size:18px;
	color:#efbf04;
	transition: text-shadow 0.3s;
}
.navegacion-item:hover{
	flex-grow:5;
	background:#f54021;
}
.navegacion-item:hover .navegacion-titulo{
	text-shadow:3px 3px 8px rgba(255,0,0,0.6);
}
/*contenedor de contacto*/
.contenedor-contacto{
	display:flex;
	margin:20px auto;
}
/*datos del negocio*/
.datos-negocio{
	 flex:1;
 background:#9c9c9c;
 padding:20px;
 border-radius:10px;
 box-shadow:0 0 10px rgba(0,0,0,0.2);
 text-align:left;
}
/*Mapa*/
.mapa{
	flex:1;
 background:#9c9c9c;
 padding:20px;
 border-radius:10px;
 box-shadow:0 0 10px rgba(0,0,0,0.2);
}
/*formulario de contacto*/
.formulario-contacto{
 margin:30px auto;
 max-width:1200px;
 background:#9c9c9c;
 padding:20px;
 border-radius:10px;
 box-shadow:0 0 10px rgba(0,0,0,0.2);
}
/*Carrusel de imagenes*/
.carrousel{
  max-width:800px;
  margin:40px auto;
}
/*contenedor*/
.conte-carrousel{
  width:100%;
  height:450px;
  position:relative;
  overflow:hidden;
}
/*Items o contenido*/
.item-carrousel{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.5s ease;
}
/*Item o contenido activo*/
.item-carrousel:target{
  opacity:1;
  pointer-events:auto;
  z-index:1;
}
/*Primera imagen por default*/
#item-carrousel-1{
  opacity:1;
  pointer-events:auto;
}
/*Ajuste de Imagenes*/
.img-ajustada{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000;
}
/*Flechas*/
.item-carrousel-arrows{
  position:absolute;
  top:50%;
  width:100%;
  display:flex;
  justify-content:space-between;
  transform:translateY(-50%);
  padding:0 20px;
}
/*Botones*/
.item-carrousel-arrows a{
  width:50px;
  height:50px;
  background:rgba(0,0,0,0.5);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  transition:0.3s;
}
.item-carrousel-arrows a:hover{
  background:rgba(0,0,0,0.8);
  transform:scale(1.1);
}
.item-carrousel-arrows a::before{
  content:'';
  border:solid white;
  border-width:0 4px 4px 0;
  display:inline-block;
  padding:8px;
}
.prev::before{
  transform:rotate(135deg);
}
.next::before{
  transform:rotate(-45deg);
}
 /*Pausar al pasar el mouse*/
.carrousel:hover.slides{
	animation-play-state:paused;
}
/*contendor de producto */
.caja {
   width: 250px;
   height: 310px;
   background: #eee;
   border: 1px solid #ddd;
   margin: 8px;
   color: #000;
   text-align:center;
   display: inline-flex;
   flex-direction: column;
   justify-content: space-between;
   align-items:center;
   padding: 10px;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.caja:hover {
   box-shadow: 0 0 12px rgba(255, 0, 0, 0.6);
   transform: scale(1.05);
}
/*Imagen de la caja*/
.caja img {
   width: 150px;
   height: 200px;
   object-fit:cover;
}
.caja-texto {
   padding: 5px 0;
   font-size: 18px;
   color: blue;
   font-weight: bold;
}
/*Descripcion*/
.texto-adicional{
	font-size:14px;
	line-height:1.4;
}

/*Contenedor para productos*/
.producto{
	display:flex;
	gap:50px;
	margin:50px auto;
	align-items:flex-start;
	padding:20px;
}
/*Galeria*/
.galeria{
	width:55%;
}
/*Miniaturas de productos*/
.miniaturas{
	display:flex;
	justify-content:center;
	align-items:center;
	gap:12px;
	margin-top:15px;
}
.miniaturas a{
	display:block;
}
.miniaturas img{
	width:70px;
height:70px;
object-fit:cover;
cursor:pointer;
border:1px solid #ddd;
border-radius:6px;
transition:all 0.3s ease;
background:#fff;	
}
/*efecto miniaturas*/
.miniaturas img:hover{
	border:1px solid #ff9900;
	transform:scale(1.08);
	box-shadow:0 0 6px rgba(0,0,0,0.2);
}
/*info del prducto*/
.info-producto{
	width:45%;
	background:#4a5053;
	padding:#fff;
	border:25px;
	border:1px solid #ddd;
	border-radius:8px;
}
/*Precio del producto*/
.precio{
	font-size:28px;
	color:#b12704;
	margin-bottom:15px;
	font-weight:bold;
}
/*Descripcion*/
.info-producto p{
	margin-bottom:20px;
	line-height:1.6;
	color:#333;
}
/*boton de comprar*/
.info-producto button{
	width:100%;
	padding:14px;
	background:#ffd814;
	border:1px solid #fcd200;
	border-radius:6px;
	font-weight:bold;
	transition:0.3;
}
/*efecto boton*/
.info-producto button:hover{
	background:#f7ca00;
}
/*Contenedor Para el Footer*/
.contenido-footer{
	position:relative;
	display:flex;
	justify-content:center;
	align-items:center;
	padding:20px 30px;
}
/*contador de visitas*/
.contador-visitas{
	position:absolute;
	left:30px;
	top:50%;
	transform:translateY(-50%);
	
}
/*Redes sociales*/
.redes-sociales{
	position:absolute;
	right:30px;
	top:50%;
	transform:traslateY(-50%);
	display:flex;
	gap:15px;
}
.redes-sociales img{
	width:45px;
	height:45px;
	background:#fff;
	padding:6px;
	border-radius:50px;
	box-shadow:0 0 8px rgba(0,0,0,0.3);
	transition:all 0.3s ease;
}
/*Efecto hover*/
.redes-sociales img:hover{
	transform:scale(1.15);
	background:#ffd814;
}
/*Imagen del contenedor de visitas*/
.contador-visitas img{
	height:40px;
	width:auto;
	display:block;
}
/*tipografias*/
@font-face {
   font-family: fuente-titulo;
   src: url("../fuentes/¡Viva México cabrones!.ttf");
}
@font-face {
   font-family: fuente-texto;
   src: url("../fuentes/ACaslonPro-BoldItalic.otf");
}