:root{
	/* Colores */
	--fondo: #f5f5f7;
	--texto: #161616;
	--azul: #0071e3;
}

*{
	box-sizing: border-box;
	font-family: SF Pro Display,SF Pro Icons,AOS Icons,Helvetica Neue,Helvetica,Arial,sans-serif;
}

li {
	margin-bottom: 18px;
}

code {
	font-family: "Monospace";
	background-color: rgba(0,0,0,0.5);
	padding: 2px;
}

body{
	background-color: var(--fondo);
	color: var(--texto);
	line-height: 1.4;
}

audio {
	width: 100%;
}

*:hover{
	cursor: default;
}

::selection {
	color: white;
	background-color: black;
}

.container{
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 3fr 1fr;
	gap: 20px;
}

.gtc11{
	grid-template-columns: 1fr 1fr;
}

.none {
	display: none;
}

.titulo {
	position: relative;
}

.subtitulo {
	position: absolute;
	right: -64px;
	bottom: -10px;
	display: inline-block;
	font-size: 18px;
	color: red;
	font-weight: bolder;
	animation: subtitulo 1s ease infinite;
}

.layout1{
	grid-template-areas:
	"head head"
	"nav nav"
	"main aside"
	"foot foot";
}

.layout2{ /* Esta version no tiene aside en el grid */
	grid-template-areas:
	"head head"
	"nav nav"
	"main main"
	"foot foot";
}

.tal{
	text-align: left;
}

.tar{
	text-align: right;
}

.tac{
	text-align: center;
}

.none{
	display: none;
}

.grey{
	background-color: grey;
}

fieldset{
	display: flex;
	flex-direction: column;
	gap: 12px;
	border-radius: 20px;
}

.enlaces{
	display:flex;
	gap: 12px;
	justify-content: center;
}

header, nav{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding:10px 0;
}

nav{
	position:sticky;
	flex-wrap: wrap;
	top: 0;
	background-color: var(--fondo);
	z-index: 100;
	gap: 10px;
	justify-content: space-evenly;
	grid-area: nav;
	box-shadow: 0px 15px 15px 0px var(--fondo), -20px 0px 15px 0px var(--fondo), 20px 0px 15px 0px var(--fondo);
}

a{
	color: black;
	font-weight: 900;
	text-decoration: none;
	transition: .5s;
}

a:hover, button:hover{
	text-decoration: underline;
	font-size: 1.2rem;
	
}

button{
	border: 0;
	border-radius: 40px;
	color: white;
	background-color: var(--azul);
	padding: 10px;
	font-size: large;
	font-weight: 100;
	transition: .5s;
}

.grey{
	background-color: grey;
}

button:hover{
	cursor: pointer;
}

footer{
	grid-area: foot;
	text-align: center;
	padding: 20px 0;
}

main{
	grid-area: main;
}

header{
	grid-area: head;
}

aside{
	grid-area: aside;
}

.cookie-banner{
	position: fixed;
	bottom: 0px;
	left: 0px;
	padding: 32px;
	width: 100%;
	background-color: #fff;
	z-index: 101;
}

.flex{
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
}

.flex1{
	flex: 1;
}

.flexcol{
	flex-direction: column;
}

#lista-productos{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 20px;
}

.item{
	display: flex;
	background-color: white;
	position: relative;
	flex-direction: column;
	justify-content: space-between;
	text-align: center;
	padding: 20px;
	border-radius: 20px;
	box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
	transition: .1s;
}

.item:hover{
	transform: scale(1.04);
	transition: .1s;
}

#lista-productos article div:first-child{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.panel{
	position: sticky;
	top: 60px;
	z-index: 11;
	background-color: white;
	padding: 20px;
	border-radius: 20px;
	box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

#lista-productos .producto-imagen{
	width: 100%;
	height: 200px;
	object-fit: contain;
}

.info {
	position: relative;
	display: inline-block;
}

.texto-info {
	visibility: hidden;
	width: 200px;
	border-radius: 10px;
	overflow-wrap: break-word;
	text-wrap: pretty;
	backdrop-filter: blur(10px);
	background-color: rgba(0, 0, 0, 0.6);
	color: white;
	text-align: left;
	padding: 20px 10px;
	position: absolute;
	z-index: 1;
	top: 100%;
	right: 25%;
	margin-left: -60px;
	box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.info:hover .texto-info {
	visibility: visible;
}


form{
	max-width: 600px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

input, select, textarea{
	padding: 10px;
	border-radius: 20px;
	border: 1px solid rgba(0, 0, 0, 0.09);
	resize: none;
}

input:required, textarea:required{
	border-width: 3px;
}

input:invalid, textarea:invalid{
	background-color: rgba(255, 0, 0, .1);
}

#carrito{
	width: 100%;
	table-layout: fixed;
	border-bottom: 1px solid #000;
}

#carrito td{
	text-overflow: ellipsis;
	overflow: hidden;
	text-wrap: wrap;
	padding: 8px 0;
}

.table{
	border-collapse: collapse;
}

.table td, .table th{
	border: 1px solid black;
	padding: 8px;
}

@media only screen and (max-width: 1000px) {
	#lista-productos {
		grid-template-columns: 1fr 1fr;
	}

	.container{
		grid-template-columns: 2fr 1.5fr;
	}

	#lista-productos article{
		height: auto;
	}

	form{
		width: 100%;
	}
}


@media only screen and (max-width: 680px) {
	#lista-productos {
		grid-template-columns: 1fr;
	}

	#lista-productos article{
		height: auto;
	}

	.layout1, .layout2{
		grid-template-columns: 1fr;
		grid-template-areas: "head" "nav" "aside" "main" "foot";
	}

	.cookie-banner {
		flex-direction: column;
	}

	form{
		width: 100%;
	}
	
}

@keyframes subtitulo {
	0% {
		transform: scale(1, 1) rotate(-10deg);
	}
	50% {
		transform: scale(1.2, 1.2) rotate(-10deg);
	}
	100% {
		transform: scale(1, 1) rotate(-10deg);
	}
}