@font-face {
	font-family: MyriadPro;
	src: url(/tpl/fonts/MyriadPro-Regular.otf);
}

@font-face {
	font-family: MyriadPro;
	src: url(/tpl/fonts/MyriadPro-Bold.otf);
	font-weight: bold;
}

@font-face {
	font-family: MyriadPro;
	src: url(/tpl/fonts/MyriadPro-Bold.otf);
	font-style: italic;
}



body {
	margin: 0;
	padding: 0;
	font-family: 'Montserrat', sans-serif;
}

h3 {
	text-align: left;
	color: #0c0c0c;
}



/**********************************

INICIO ESTILOS HEADER  

***********************************/

header {
	width: 100%;
	position: relative;
	/*top: 122px;*/
	height: auto;

}

@media screen and (max-width : 760px) {
	header {
		top: 165px;
	}
}

/*
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: minmax(30px, auto);
	grid-gap: 5px;
	align-items: center;
	grid-template-areas:
	"logo  menuCont menuCont menuCont menuCont menuCont";
*/

/**********************************

FIN ESTILOS HEADER

***********************************/

/**********************************

INICIO ESTILOS FOOTER

***********************************/

footer {
	width: 100%;
	position: relative;
	height: auto;
	margin-top: 20px;
}

footer a:link {
	color: white;
}

footer a:visited {
	color: white;
}

footer a:hover {
	color: gray;
}

.footerCustom {
	background-color: #fc0050;
	color: #000;
	font-size: 14px;
	font-weight: 300;
	line-height: 20px;
}

/**********************************

FIN ESTILOS FOOTER

***********************************/

/**********************************

INICIO ESTILOS ARTICLE

***********************************/

article {
	width: 100%;
	height: auto;
	position: relative;
	font-size: 1.1rem;
	color: #605f5f;
	/*top: 122px;*/
}

article a:link {
	color: #a8a8a8;
}

article a:visited {
	color: #808080;
}

article a:hover {
	color: #a8a8a8;
	text-decoration: none;
}

@media screen and (max-width : 760px) {
	article {
		top: 122px;
	}
}

/* Botón Comprar - Estilos base */
.boton-comprar {
	text-align: center;
	margin: 20px 0;
}

.boton-comprar a:link {
	text-align: center;
	margin: 0 auto;
	background-color: #727272 !important;
	color: white !important;
	padding: 16px 32px;
	text-decoration: none;
	border-radius: 8px;
	font-weight: bold;
	font-size: 18px;
	display: inline-block;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(114, 114, 114, 0.3);
}

.boton-comprar a:hover {
	text-align: center;
	color: white !important;
	margin: 0 auto;
	background-color: #5a5a5a !important;
	text-decoration: none;
	border-radius: 8px;
	font-weight: bold;
	font-size: 18px;
	display: inline-block;
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(114, 114, 114, 0.6), 0 2px 8px rgba(0, 0, 0, 0.15);
	transition: all 0.3s ease;
}

.boton-comprar a:visited {
	text-align: center;
	color: white !important;
	margin: 0 auto;
	background-color: #727272 !important;
	text-decoration: none;
	border-radius: 8px;
	font-weight: bold;
	font-size: 18px;
	display: inline-block;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(114, 114, 114, 0.3);
}

/* Variantes del botón comprar para diferentes contextos */
.boton-comprar.centrado {
	text-align: center;
	margin: 20px auto;
	display: block;
}

.boton-comprar.izquierda {
	text-align: left;
	margin: 20px 0;
}

.boton-comprar.derecha {
	text-align: right;
	margin: 20px 0;
}

/* Botón comprar pequeño */
.boton-comprar.pequeno a:link,
.boton-comprar.pequeno a:hover,
.boton-comprar.pequeno a:visited {
	padding: 10px 20px;
	font-size: 14px;
}

/* Botón comprar grande */
.boton-comprar.grande a:link,
.boton-comprar.grande a:hover,
.boton-comprar.grande a:visited {
	padding: 20px 40px;
	font-size: 20px;
}

/* Botón comprar con borde */
.boton-comprar.borde a:link,
.boton-comprar.borde a:visited {
	background-color: transparent !important;
	color: #727272 !important;
	border: 2px solid #727272;
}

.boton-comprar.borde a:hover {
	background-color: #727272 !important;
	color: white !important;
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(114, 114, 114, 0.6), 0 2px 8px rgba(0, 0, 0, 0.15);
	transition: all 0.3s ease;
}



/**********************************

FIN ESTILOS ARTICLE

***********************************/


/**********************************

INICIO ESTILOS GENERALES EDITORIALES

***********************************/

.cien {

	width: 100%;
	position: relative;

	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-auto-rows: minmax(30px, auto);
	grid-gap: 40px;
	align-items: center;
	grid-template-areas:
		"cienUno";

}

.cienUno {
	grid-area: cienUno;
	padding: 40px;
}



.cienUno h1 {
	text-align: center;
	color: black;
	font-size: 2rem;

}

.cienUno h2 {
	text-align: center;
	color: #605f5f;
	/*text-shadow: 1px 1px 2px #000000;*/
}


.cienTitulo {
	text-align: center;
	color: black;
	font-size: 2rem;
}



.color-alterno {
	/*background-color: #f975012e;*/
	background-color: #a8a8a8;
	padding: 80px 50px;
	text-align: center;
}

.color-alterno h3 {
	color: #a8a8a8;
	text-shadow: none;
}

.font-alterno {
	color: #a8a8a8 !important;
	text-transform: uppercase;
}

.font-alterno a:link {
	text-decoration: none;
}

.font-alterno a:hover {
	color: black !important;
}

.font-alterno a:visited {
	color: #a8a8a8;
}

.link-gris {
	color: #605f5f !important;
}

.link-gris a:link {
	color: #605f5f;
}

.link-gris a:hover {
	color: #a8a8a8 !important;
}

.link-gris a:visited {
	color: #605f5f;
}

.link-blanco {
	color: #FFFFFF !important;
}

.link-blanco a:link {
	color: #FFFFFF !important;
}

.link-blanco a:hover {
	color: black !important;
}

.link-blanco a:visited {
	color: #FFFFFF !important;
}

.gris-claro {
	/*background-color: #f975012e;*/
	background-color: #dbdbdb;
	text-align: center;
}

.noShadow {
	text-shadow: none;
}

.cincuenta {
	width: 100%;
	position: relative;


	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: minmax(30px, auto);
	/*grid-gap: 40px;*/

	grid-template-areas:
		"cincuentaUno cincuentaDos";
	min-height: 350px;
	align-items: center !important;
}

.invertir-cincuenta {
	width: 100%;
	position: relative;


	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: minmax(30px, auto);
	/*grid-gap: 40px;*/

	grid-template-areas:
		"cincuentaUno cincuentaDos";
	min-height: 350px;
	align-items: center !important;
}

.cincuentaUno {
	grid-area: cincuentaUno;
	padding: 30px;
}

.cincuentaUno img {
	width: 100%;
	/*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
}

.cincuentaUno img:hover {
	opacity: 0.5;
	transition: all 5;
}


.cincuentaDos {
	grid-area: cincuentaDos;
	padding: 30px;
}

.cincuentaDos img {
	width: 100%;
	/*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
	height: auto;
}

.cincuentaDos img:hover {
	opacity: 0.5;
	transition: all 5;
}

.no-pad {
	padding: 0px;
}

.pad-60 {
	padding: 60px;
}

.pad-30 {
	padding: 30px;
}

.pc {
	width: 100%;
}

.mov {
	display: none;
}

.pastilla-gde a:link {
	background-color: #a8a8a8;
	color: white;
	width: 300px;
	padding: 15px 40px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	text-transform: uppercase;
	font-size: 1.7rem;
	border: 1px solid;
}

.pastilla-gde a:visited {
	background-color: #a8a8a8;
	color: white;
	width: 300px;
	padding: 15px 40px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	text-transform: uppercase;
}

.pastilla-gde a:hover {
	background-color: #000000;
	color: white;
}

.box-blanco {
	background-color: #ffffffc2;
	padding: 25px;
	width: 60%;
	margin: auto;
}


.gris {
	background-color: #808080;
}

.blanco {
	color: #fff !important;
}

.f-negro {
	background-color: black;
	color: white;
	text-transform: uppercase;
	margin-top: 20px;
	margin-bottom: 10px;
	padding: 14px 25px 10px 25px;
}

.f-gris {
	background-color: #727272;
	color: white;
	text-transform: uppercase;
	margin-top: 20px;
	margin-bottom: 10px;
}

.f-gris a:link,
.f-gris a:visited {
	color: white;
	font-size: 1.2rem !important;
}

.f-gris a:hover {
	color: gray;
}



.tutorial p {
	font-size: 1rem !important;
	text-align: justify;
}

.tutorial h4 {
	font-weight: 600;
	font-size: 1.8rem;
}

.tablaPLS {
	width: auto;
	/* Ajusta la tabla al contenido */
	margin: auto;
	/* Centra la tabla en la página */
	border-collapse: collapse;
	text-align: center;
}

.tablaPLS th,
.tablaPLS td {
	border: 1px solid #ccc;
	/* Línea divisoria fina */
	padding: 10px;
	vertical-align: top;
}

.tablaPLS th {
	background-color: #f9f9f9;
	font-weight: bold;
}


.sesentaTreinta {
	width: 100%;
	position: relative;
	background-color: white;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: minmax(30px, auto);
	/*grid-gap: 40px;*/
	align-items: center;
	grid-template-areas:
		"sesentaTreintaUno sesentaTreintaUno sesentaTreintaDos";

}

.sesentaTreintaUno {
	grid-area: sesentaTreintaUno;
	padding: 30px;
}

.sesentaTreintaUno img {
	width: 100%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.sesentaTreintaUno img:hover {
	opacity: 0.5;
	transition: all 5;
}

.sesentaTreintaDos {
	grid-area: sesentaTreintaDos;
	padding: 30px;
}

.sesentaTreintaDos img {
	width: 100%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.sesentaTreintaDos img:hover {
	opacity: 0.5;
	transition: all 5;
}

.treintaSesenta {
	width: 100%;
	position: relative;
	background-color: #e0e0e0;
	color: black;

	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: minmax(30px, auto);
	grid-gap: 40px;
	align-items: center;
	grid-template-areas:
		"treintaSesentaUno treintaSesentaDos treintaSesentaDos";
}

.treintaSesentaUno {
	grid-area: treintaSesentaUno;
	padding: 30px;
}

.treintaSesentaUno img {
	width: 100%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.treintaSesentaUno img:hover {
	opacity: 0.5;
	transition: all 5;
}

.treintaSesentaDos {
	grid-area: treintaSesentaDos;
	padding: 30px;
}

.treintaSesentaDos img {
	width: 100%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.treintaSesentaDos img:hover {
	opacity: 0.5;
	transition: all 5;
}

.treintaTres {
	width: 100%;
	position: relative;
	background-color: white;

	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: minmax(30px, auto);
	grid-gap: 5px;
	align-items: center;
	grid-template-areas:
		"treintaTresUno treintaTresDos treintaTresTres";

}

.centrada {
	align-items: start;
	max-width: 1024px;
	margin-inline: auto;

}

.treintaTresUno {
	grid-area: treintaTresUno;
	padding: 20px;
	/*height: -webkit-fill-available;*/
	display: grid;

}

.treintaTresDos {
	grid-area: treintaTresDos;
	padding: 20px;
	/*height: -webkit-fill-available;*/
	display: grid;
}

.treintaTresTres {
	grid-area: treintaTresTres;
	padding: 20px;
	/*height: -webkit-fill-available;*/
	display: grid;
}

.veintiCinco {
	width: 100%;
	position: relative;

	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: minmax(100px, auto);
	grid-gap: 5px;
	align-items: start;
	grid-template-areas:
		"veintiCincoUno veintiCincoDos veintiCincoTres veintiCincoCuatro";
	/*padding-top: 30px;
    padding-bottom: 30px;*/
}

.veintiCincoUno {
	grid-area: veintiCincoUno;
	padding: 20px;
}

.veintiCincoDos {
	grid-area: veintiCincoDos;
	padding: 20px;
}

.veintiCincoTres {
	grid-area: veintiCincoTres;
	padding: 20px;
}

.veintiCincoCuatro {
	grid-area: veintiCincoCuatro;
	padding: 20px;
}

.atm-esp {
	margin-left: 21px;
}

.atm-icono {
	max-width: 500px !important;
	margin: auto;
	padding: 5px;
}

.icon25 img {
max-width:200px;
margin:auto;
}

.iconTit {
text-transform: uppercase;
    color: #fc0050;
    font-weight: 600;
    font-size: 1.3rem;
}

.formu {
	max-width: 600px;
	margin: auto;
}

.form-control {
	width: 100%;
	padding: 10px;
	border: 1px solid #c7c7c7;
	border-radius: 10px;
}

.text-form {
	font-size: 1.1rem;
	padding-top: 12px;
}

.veinte {
	width: 100%;
	position: relative;
	background-color: white;

	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-auto-rows: minmax(30px, auto);
	grid-gap: 5px;
	align-items: center;
	grid-template-areas:
		"veinteUno veinteDos veinteTres veinteCuatro veinteCinco";
}

.fot a:link {
	text-decoration: none;
	color: black;
}

.fot a:hover {
	text-decoration: none;
	color: #a8a8a8 !important;
}

.fot a:visited {
	text-decoration: none;
	color: black;
}

.fot img {
	max-height: 80px;
}

.dir {
	font-size: 14px;
	display: flex;
	align-items: center;
	margin: 0;
}


.al-center {
	text-align: center;
	padding: 5px;
}

.col-white {
	color: white !important;
}

.ima-prod img {
	width: 80%;
}

.ima-prod img:hover {
	opacity: 0.5;
	transition: all 5;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.imagen-fondo {
	background-image: url("https://clubsillon.com.ar/imagenes/198-curso-defensa-personal-fabian-garcia-academy.jpg");
	background-size: cover;
}

.imagen-fondo-2 {
	background-image: url("https://clubsillon.com.ar/imagenes/138-watches_women-1.jpg");
	background-size: cover;
	;
}

.imagen-fondo-3 {
	background-image: url("https://clubsillon.com.ar/imagenes/137-watches_men-1.jpg");
	background-size: cover;
}

.tit-big {
	font-size: 4rem;
	font-weight: 500;
	text-align: center;
}

.tit-50 {
	color: #605f5f;
	/*text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);*/
	font-family: MyriadPro;
	font-weight: 500;
	z-index: 999;
	font-size: 1.6rem;
}

.tit-50 img {
	margin-bottom: -5px;
}

.tit-prod {
	text-transform: uppercase;
	color: black;
	padding: 10px;
	font-weight: 600;
	font-size: 18px;
}

.video-70 {
	width: 70%;
	margin: auto;
}

.video {
	/*height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    padding-top: 30px;
    position: relative;*/
	overflow: hidden;
	position: relative;
	display: block;
	text-align: center;
}

.video iframe,
.video object,
.video embed {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.tilde {
	list-style-image: url('https://clubsillon.com.ar/imagenes/151-tilde-1-g.png');
}

.ima-triple {
	width: 100%;
}

.main-footer {
    background-color: #e30613; /* El rojo característico */
    color: white;
    padding: 40px 20px;
    font-family: Arial, sans-serif; /* O la que uses en tu sitio */
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.footer-column {
    flex: 1;
    min-width: 250px;
    margin-bottom: 20px;
    padding: 0 15px;
}

.footer-column h3 {
    font-size: 1.1rem;
    margin-bottom: 20px;
    font-weight: bold;
    text-transform: uppercase;
}

/* Estilos de la lista de contacto */
.contact-list {
    list-style: none;
    padding: 0;
}

.contact-list li {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 0.95rem;
}

.contact-list i {
    font-size: 1.4rem;
    margin-right: 15px;
    width: 25px;
    text-align: center;
}

/* Estilos de redes sociales */
.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    color: #e30613;
    background-color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.2rem;
    transition: transform 0.3s;
}

.social-icons a:hover {
    transform: scale(1.1);
}

/* Estilos de medios de pago */
.payment-info p {
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 10px;
}

/* Responsivo para móviles */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        text-align: center;
    }
    
    .contact-list li {
        justify-content: center;
    }

    .social-icons {
        justify-content: center;
    }
}


@media screen and (max-width : 760px) {

	.boton-comprar {
		margin: 20px 15px;
	}

	.cien {
		grid-template-columns: repeat(1, 1fr);
		grid-gap: 5px;
		grid-template-areas:
			"cienUno";
	}

	.cienUno {
		padding: 0px 10px 20px 10px;
	}



	.treintaSesenta {
		padding-bottom: 35px;
		grid-template-columns: repeat(1, 1fr);
		grid-gap: 5px;
		grid-template-areas:
			"treintaSesentaUno"
			"treintaSesentaDos";
	}

	.treintaSesentaUno {
		padding: 0px 15px 0px 15px;
	}

	.treintaSesentaDos {
		padding: 0px 15px 0px 15px;
	}

	.sesentaTreinta {
		padding-bottom: 35px;
		grid-template-columns: repeat(1, 1fr);
		grid-gap: 5px;
		grid-template-areas:
			"sesentaTreintaDos"
			"sesentaTreintaUno";
	}

	.sesentaTreintaUno {
		padding: 0px 15px 0px 15px;
	}

	.sesentaTreintaDos {
		padding: 0px 15px 0px 15px;
	}

	.veintiCinco {
		padding-bottom: 35px;
		grid-template-columns: repeat(1, 1fr);
		grid-auto-rows: minmax(20px, auto);
		grid-gap: 5px;
		grid-template-areas:
			"veintiCincoUno"
			"veintiCincoDos"
			"veintiCincoTres"
			"veintiCincoCuatro";
	}

	.veintiCincoUno,
	.veintiCincoDos,
	.veintiCincoTres,
	.veintiCincoCuatro {
		padding: 0px 20px;
	}

	.cincuenta {
		padding-bottom: 35px;
		grid-template-columns: repeat(1, 1fr);
		/*grid-gap: 0px;*/
		grid-template-areas:
			"cincuentaUno"
			"cincuentaDos";
	}
	
	.invertir-cincuenta {
   	padding-bottom: 35px;
		grid-template-columns: repeat(1, 1fr);
		/*grid-gap: 0px;*/
		grid-template-areas:
			"cincuentaUno"
			"cincuentaDos";
}

	.treintaTres {
		grid-template-columns: repeat(1, 1fr);
		grid-template-areas:
			"treintaTresUno"
			"treintaTresDos"
			"treintaTresTres";
	}


	.treintaTresUno {
		padding: 15px;
	}

	.treintaTresDos {
		padding: 15px;
	}

	.treintaTresTres {
		padding: 15px;
	}


	.naranja {
		padding-top: 60px;
		padding-bottom: 60px;
	}

	.video-70 {
		width: 100%
	}

	.box-blanco {
		width: 95%;
	}

	.pc {
		display: none;
	}

	.mov {
		display: block;
		width: 100%
	}

	.pastilla-gde a:link {
		width: 200px;
		padding: 15px 10px;
		font-size: 1.5rem;
	}

	.pastilla-gde a:hover {
		width: 200px;
		padding: 15px 10px;
		font-size: 1.5rem;
	}

	.pastilla-gde a:visited {
		width: 200px;
		padding: 15px 10px;
		font-size: 1.5rem;
	}

	.footerCustom {
		padding: 15px;
	}

	.cienTitulo {
		line-height: 2rem;
		text-align: center;
		text-align: center;
		font-size: 2rem;
		padding-top: 15px;
		padding-bottom: 15px;
	}

	.atm-esp {
		margin-left: 28px;
	}

	.tutorial p {
		font-size: 0.8rem !important;
		text-align: justify;
	}

	.tutorial h4 {
		font-weight: 600;
		font-size: 1.6rem;
	}

	.pad-60 {
	padding: 20px;
		text-align: center !important;
}
	.nopad-img {
    padding: 0px;}
	

}



@media screen and (max-width : 400px) {
	.color-alterno {
		padding: 50px 15px;
	}

	.box-blanco {
		padding: 5px;
	}

	.cienUno h2 {
		font-size: 1.3em;
	}

}

/**********************************

FIN ESTILOS GENERALES EDITORIALES

***********************************/


/******************
inicio carousel 

****************/
.carrusel-container {
	position: relative;
	max-width: 100%;
	overflow: hidden;
}

.carrusel {
	display: flex;
	position: relative;
}

.carrusel-slides {
	display: flex;
	transition: transform 0.5s ease;
}

.slide {
	min-width: 25%;
	/* Muestra 4 imágenes a la vez en pantallas grandes */
	box-sizing: border-box;
}

.slide img {
	width: 100%;
	height: auto;
}

.imagenTit img {
	max-width: 300px;
	margin: auto !important;
}

/* Scoped to carousel to avoid global conflict */
.carousel button,
.wowslider-container button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: rgba(255, 255, 255, 0.8);
	border: none;
	cursor: pointer;
	padding: 10px;
	font-size: 18px;
	z-index: 10;
}

.prev {
	left: 10px;
}

.next {
	right: 10px;
}

/* Estilos para dispositivos móviles */
@media (max-width: 640px) {
	.slide {
		min-width: 100%;
		/* Solo una imagen visible en móviles */
	}
}

/******************

fin carousel 

****************/

/********************************

/* INICIO ESTILOS BLOG  */

/********************************/

.headerBlog img {

	width: 100%;
	/*margin-top: 51px;*/
	margin-bottom: 30px;

}

.listaArt {

	/*padding-top: 15px;*/

}

.listaIntroBlogs {
	width: 100%;
	display: grid;
	grid-template-areas: "1fr 1fr 1fr";
	grid-template-rows: minmax(75px, auto);
	grid-gap: 0px;
	justify-items: center;
	padding-top: 40px;
	max-width: 1024px;
	margin: auto;

}

.contenedorIntroBlog {

	/*border: black solid 2px;*/
	width: 80%;
	position: relative;
	/*padding-top: 15px;*/
	padding-bottom: 50px;
	margin: 0px 0px 0px 0px;


	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-auto-rows: minmax(10px, auto);
	grid-gap: 0px;
	align-items: center;
	grid-template-areas:
		"imagenIntroBlog"
		"tituloIntroBlog"
		"detalleIntroBlog"
		"botVerMas";

}

.imagenIntroBlog {

	grid-area: imagenIntroBlog;

	/*Flex*/
	/*display: flex;
		align-items: center;
		justify-content: center;
		flex: 1 1;*/

}

.imagenIntroBlog img {

	width: 300px;
	height: auto;
	/*padding: 25px 50px 50px 50px;
		*/
}

.imagenIntroBlog img:hover {
	opacity: 0.5;
	transition: all 5;
}


.detalleIntroBlog {

	grid-area: detalleIntroBlog;
	/*padding-left: 15px;
		padding-right: 15px;*/
	/*border: green solid 2px;*/
	/*width: auto;
		height: auto;*/
}

.detalleIntroBlog a:link {
	color: #b3272a;
}


.detalleIntroBlog a:visited {
	color: #b3272a;
}


.detalleIntroBlog a:hover {
	text-decoration: none;
}

.tituloIntroBlog {

	grid-area: tituloIntroBlog;
	/*border: yellow solid 2px;*/
	width: auto;
	height: auto;
	font-size: 20px;
	padding-top: 20px;
}

.tituloIntroBlog a:link {
	color: #3e3e3e;
	text-decoration: none;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1.3rem;
}

.tituloIntroBlog a:visited {
	color: #3e3e3e;
}

.tituloIntroBlog a:hover {
	text-decoration: none;
	color: #b3272a;
}

.tituloIntroBlog h3 {
	line-height: 1.3rem;
}

.textoIntroBlog {

	/*border: orange solid 2px;*/
	width: auto;
	height: auto;

}

.botVerMas {
	grid-area: botVerMas;
}

.botVerMas a:link {
	border: 1px solid #3e3e3e;
	color: #3e3e3e;
	text-decoration: none;
	font-size: 0.90rem;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 5px 15px;
	cursor: pointer;
}

.botVerMas a:visited {
	border: 1px solid #3e3e3e;
	color: #3e3e3e;
	text-decoration: none;
	font-size: 0.90rem;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 5px 15px;
	cursor: pointer;
}


.botVerMas a:hover {
	background-color: #ececec;
	color: #3e3e3e;
	transition-all: 0.9;

}

.blogfoto img {
	max-width: 70%;
	padding: 10px;
	display: block;
	margin: auto;
}

@media screen and (max-width : 760px) {

	.listaIntroBlogs {
		grid-template-areas: "1fr";

	}


	.blogfoto img {
		max-width: 95%;
		padding: 5px;
	}

}

/********************************

/* FIN ESTILOS BLOG  */

/********************************/



/**********************************

INICIO ESTILOS NAV

***********************************/

nav {
	width: 100%;
	/*position: fixed;*/
	top: 0;
	background-color: white;
	z-index: 200;

	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: minmax(30px, auto);
	grid-gap: 5px;
	align-items: center;
	grid-template-areas:
		"logo  menuCont menuCont menuCont menuCont redesMenu";
	font-family: 'Montserrat', sans-serif;
}

.logo {
	grid-area: logo;
	padding-left: 40px;
	font-size: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.logo img {
	vertical-align: middle;
	max-height: 90px;
}

.logo a:link {
	text-decoration: none;
	color: #a8a8a8;
}

.logo a:hover {
	text-decoration: none;
	color: #a8a8a8;
}

.logo a:visited {
	text-decoration: none;
	color: #a8a8a8;
}

.verCarro {
	grid-area: verCarro;
	font-size: 14px;
	justify-self: center;

}

.botVerCarro a:link {
	background: white;
	width: 125px;
	text-align: center;
	color: black;
	text-decoration: none;
	display: block;
	padding: 10px;
	border: black 1px solid;
	text-transform: uppercase;
}

.botVerCarro a:visited {
	background: white;
	width: 125px;
	text-align: center;
	color: white;
	text-decoration: none;
	display: block;
	padding: 10px;
	border: black 1px solid;
	text-transform: uppercase;
}

.botVerCarro a:hover {
	text-decoration: none;
	background-color: #a8a8a8;
	transition-all: 0.9;
	box-shadow: 15px 12px 25px -7px rgba(0, 0, 0, 0.25);
	color: white;
}

.redesMenu {
	grid-area: redesMenu;
	text-align: center;
	display: block;
	margin-right: 20px;
}

.redesMenu img {
	max-height: 40px;
}

.menuCont {
	grid-area: menuCont;
}

.registro {
	margin-top: 5px;
}

.registro p {
	margin-top: 5px !important;
}

.red {}

.redesMenu a:link,
a:visited {
	text-decoration: none;
	color: #605f5f;
}

.redesMenu a:hover {
	text-decoration: none;
	color: #a8a8a8;
}

@media screen and (max-width : 760px) {

	nav {
		/*position: fixed;*/
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: minmax(0px, auto);
		grid-gap: 5px;
		align-items: center;
		grid-template-areas:
			"logo logo"
			"menuCont menuCont"
			"redesMenu redesMenu";
	}

	header {
		top: 0px;
	}

	article {
		top: 0px;
	}

	modulo {
		top: 0px;
	}

	.redesMenu {
		margin: auto;
	}

	.logo {
		padding-left: 0px;
		text-align: center;

	}

	.tit-big {
		font-size: 3rem;
	}

}

/**********************************

FIN ESTILOS NAV

***********************************/


/**********************************

INICIO ESTILOS MENU

***********************************/


/*menu */
#menu ul {
	margin: 0;
	padding: 0;
}

#menu .main-menu {
	display: none;
}

#tm:checked+.main-menu {
	display: block;
}

#menu input[type="checkbox"],
#menu ul span.drop-icon {
	display: none;
}

#menu li,
#toggle-menu,
#menu .sub-menu {
	border-style: solid;
	border-color: rgba(0, 0, 0, .05);
}

#menu li,
#toggle-menu {
	border-width: 0 0 1px;
}

#menu .sub-menu {
	background-color: #808080;
	border-width: 1px 1px 0;
	margin: 0 1em;
}

#menu .sub-menu li:last-child {
	border-width: 0;
}

#menu li,
#toggle-menu,
#menu a {
	position: relative;
	display: block;
	color: black;
	/*text-shadow: 1px 1px 0 rgba(0, 0, 0, .125);*/
	text-decoration: none;
	font-size: 0.97rem;
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	text-transform: uppercase;
}

#menu,
#toggle-menu {
	/*background-color: #f97501;*/
	text-align: center;
	background: rgb(255, 255, 255);
	/*padding-right: 40px;*/
}

#toggle-menu,
#menu a {
	padding: 1em 1em 1em 1em;
}

#menu a {
	transition: all .125s ease-in-out;
	-webkit-transition: all .125s ease-in-out;
}

#menu a:hover {
	/*background-color: white;*/
	color: white;
	background-color: #fc0050;
}

#menu .sub-menu {
	display: none;
}

#menu input[type="checkbox"]:checked+.sub-menu {
	display: block;
}

#menu .sub-menu a:hover {
	color: white;
}

#toggle-menu .drop-icon,
#menu li label.drop-icon {
	top: 1.25em;

	/* Correción Menú		
  position: absolute;
  right: 1.5em;
  */

}

#menu label.drop-icon,
#toggle-menu span.drop-icon {
	width: 1em;
	height: 1em;
	text-align: center;
	text-shadow: 0 0 0 transparent;

	/* Correción Menú
  border-radius: 50%;
  background-color: rgba(0, 0, 0, .125);
  color: rgba(255, 255, 255, .75);
  */
}

#menu .drop-icon {
	line-height: 1;
}

.itemMob {
	/* visibility: hidden;
	  width: 0px;
	  height: 0px;
	  display: block;
	  */
	display: none;
}

.itemDesk {
	/* visibility: visible;
	  width: auto;
	  height: auto; */
	display: inline-block;
}

/*empieza responsive menu*/
@media only screen and (max-width: 64em) and (min-width: 52.01em) {
	#menu li {
		width: 33.333%;

	}

	#menu .sub-menu li {
		width: auto;
	}

	#menu,
	#toggle-menu {
		width: 100%;

	}
}

@media only screen and (min-width: 52em) {
	#menu .main-menu {
		display: inline-flex;
	}

	#toggle-menu,
	#menu label.drop-icon {
		display: none;
	}

	#menu ul span.drop-icon {
		display: inline-block;
	}

	#menu li {
		float: left;
		border-width: 0 1px 0 0;

	}

	#menu .sub-menu li {
		float: none;
	}

	#menu .sub-menu {
		border-width: 0;
		margin: 0;
		position: absolute;
		top: 100%;
		left: 0;
		width: 15em;
		z-index: 3000;
		background-color: #e9e9e9;
	}

	#menu .sub-menu,
	#menu input[type="checkbox"]:checked+.sub-menu {
		display: none;
	}

	#menu .sub-menu li {
		border-width: 0 0 1px;
	}

	#menu .sub-menu .sub-menu {
		top: 0;
		left: 100%;
	}

	#menu li:hover>input[type="checkbox"]+.sub-menu {
		display: block;
	}
}

@media screen and (max-width : 760px) {

	#menu,
	#toggle-menu {
		width: 100%;
		text-align: center;

	}

	#toggle-menu,
	#menu a {
		padding-top: 0.6em;
		padding-bottom: 0.6em;
		padding-left: 0em;
		padding-right: 0em;
	}

	.menuItem {
		padding-left: 2%;
	}

	.itemDesk {
		/*visibility: hidden;
	  width: 0px;
	  height: 0px;
	  display: block;
	  */
		display: none;
	}

	.itemMob {
		/*visibility: visible;
	  width: auto;
	  height: auto;
	  */
		display: inline-block;
	}
}

/**********************************

FIN ESTILOS MENU

***********************************/


/********************************

/* Inicio Estilos WhatsApp */

/********************************/

.whatsAppForm {

	display: none;
	position: fixed;
	z-index: 9999;
	bottom: 20px;
	right: 20px;
	float: right;
	background-color: #f7f7f7;
	padding: 15px;
	border: solid #d3d3d3 1px;
	border-radius: 20px;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.04), 0 6px 20px 0 rgba(0, 0, 0, 0.09);
	min-width: 280px;
	max-width: 350px;
	width: auto;
	overflow: visible;

}


.whatsAppForm img {
	height: 40px;
	padding: 5px;
}

.whatsAppForm input[type="text"],
.whatsAppForm input[type="number"] {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	margin: 5px 0;
	border: 1px solid #d3d3d3;
	border-radius: 5px;
	font-size: 14px;
}

.whatsAppForm .btn-enviar {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 10px 15px;
	margin-top: 10px;
	white-space: nowrap;
	overflow: visible;
}


.whatsAppFloat {

	position: fixed;
	z-index: 99;
	bottom: 30px;
	right: 20px;
	float: right;
	cursor: pointer;

}

.whatsAppFloat img {
	height: 70px;

}

.whatsAppBoton {

	background-color: green;
	color: white;
	padding: 5px 20px;

}

.iconoC {
	position: fixed;
	z-index: 99;
	bottom: 120px;
	right: 20px;
	float: right;
}

.iconoC img {
	height: 62px;
}

.iconoC a:link {
	cursor: pointer;
}

.iconoC a:hover img {
	opacity: 0.8;
	filter: alpha(opacity=80) transition: all .125s ease-in-out;
	-webkit-transition: all .125s ease-in-out;
}

.btn-enviar {
	text-align: center;
	text-decoration: none;
	color: #ffffff;
	font-size: 16px;
	background-color: #39b54e;
	cursor: pointer;
}


.btn-enviar a:link {
	text-decoration: none;
	color: #ffffff;
	font-size: 16px;
	background-color: #39b54e;
}

.btn-enviar a:visited {
	text-decoration: none;
	color: #0c0c0c;
}

.btn-enviar a:hover {
	background-color: red;
	cursor: pointer;
}

@media screen and (max-width: 760px) {

	.iconoC {
		right: 30px;
		bottom: 110px;
	}


	.iconoC img {
		height: 50px;
	}

	.whatsAppForm {
		min-width: 260px;
		max-width: 90%;
		right: 10px;
		left: 10px;
		bottom: 10px;
		padding: 12px;
	}

	.whatsAppFloat {
		right: 10px;
		bottom: 20px;
	}
}


/********************************

/* Fin Estilos WhatsApp */

/********************************/


/********************************

/* Inicio Estilos Tienda */

/********************************/

.botonTienda a:link {
	background: white;
	text-align: center;
	text-decoration: none;
	color: #0c0c0c;
	text-decoration: none;
	padding: 8px 16px;
	border: solid 1px #0c0c0c;
	border-radius: 5px;
	font-size: 16px;
	display: inline-block;

}

.botonTienda a:visited {
	background: white;
	text-align: center;
	text-decoration: none;
	color: #0c0c0c;
	text-decoration: none;
	padding: 8px 16px;
	border: solid 1px #0c0c0c;
	border-radius: 5px;
	font-size: 16px;
	display: inline-block;
}

.botonTienda a:hover {
	background: dimgray;
	text-align: center;
	text-decoration: none;
	color: white;
	text-decoration: none;
	padding: 8px 16px;
	border: solid 1px dimgray;
	border-radius: 5px;
	font-size: 16px;
	display: inline-block;
	transition-all: 0.9;
	box-shadow: 15px 12px 25px -7px rgba(0, 0, 0, 0.25);
}

.botonTienda-w a:link {
	text-align: center;
	text-decoration: none;
	color: white;
	text-decoration: none;
	padding: 8px 30px;
	border: solid 1px white;
	font-size: 16px;

}

.botonTienda-w a:visited {
	text-align: center;
	text-decoration: none;
	color: white;
	text-decoration: none;
	padding: 8px 30px;
	border: solid 1px white;
	font-size: 16px;
}

.botonTienda-w a:hover {
	background: #ffffff4f;
	text-align: center;
	text-decoration: none;
	color: white;
	text-decoration: none;
	padding: 8px 30px;
	border: solid 1px white;
	font-size: 16px;
	transition-all: 0.9;
}

.consultarMargen {
	margin-bottom: 25px;
}

input[type=submit].botonTienda {
	width: auto;
	text-align: center;
	text-decoration: none;
	padding: 10px 10px 10px 10px;
	color: white;
	background-color: #666666;
	border: 2px solid #666666;
}

input[type=submit].botonTienda:hover {
	text-decoration: none;
	background-color: #333333;
	border: 2px solid #333333;
	transition-all: 0.9;
	box-shadow: 15px 12px 25px -7px rgba(0, 0, 0, 0.25);
}

input[type=text].textTienda {
	max-width: 60px;
}

.contBuscador {
	background-color: #f9f9f9 !important;
	padding: 20px !important;
}

.listaProductos,
.contBuscador {
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
	position: relative;
	border: 1px solid #adadad;
	border-radius: 12px;
	background-color: #ffffff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	padding: 40px 0px 40px 0px;
	margin-bottom: 20px;

	display: grid;
	grid-template-columns: 1fr 1.5fr 0.3fr 1.2fr;
	/* 4 columnas: Imagen, Texto (más grande), Compra (más pequeña), Colores (más grande) */
	grid-auto-rows: minmax(100px, auto);
	grid-gap: 20px;
	/* Reducido gap para ganar espacio */
	align-items: center;
	grid-template-areas:
		"listaProductosUno listaProductosDos listaProductosTres listaProductosCuatro";
}

.detalleProductos {
	border-bottom: none;
	padding-top: 15px !important;
	padding-bottom: 15px !important;
}

.listaProductosUno {
	grid-area: listaProductosUno;
	padding: 1px 30px 1px 30px;
	justify-self: center;
}

.listaProductosUno img {
	max-width: 100%;
	max-height: 280px;
	/*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
}

.listaProductosUno img:hover {
	opacity: 0.5;
	transition: all 5;
}

.listaProductos:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	transition: box-shadow 0.3s ease;
}

.listaProductosDos {
	grid-area: listaProductosDos;
	padding: 30px;
	padding: 1px 30px 1px 30px;
}

.listaProductosTres {
	grid-area: listaProductosTres;
	padding: 30px;
	padding: 1px 30px 1px 30px;
	align-self: start;
	/* Align to top */
}

.listaProductosCuatro {
	grid-area: listaProductosCuatro;
	padding: 30px;
	padding: 1px 30px 1px 30px;
	align-self: start;
	/* Align to top */
}

.listaProductosDos h3 {
	font-size: 1.8em;
	font-weight: bold;
	color: #2c3e50;
	margin-bottom: 15px;
	line-height: 1.3;
}

.listaProductosDos p {
	font-size: 0.8em;
	color: #666666;
	line-height: 1.5;
	margin-bottom: 20px;
}

.listaProductosDos select,
.listaProductosDos input {
	font-size: 14px;
	border-radius: 0px;
	text-align: center;
	width: auto;
	max-width: 90%;
	padding: 5px 10px 5px 10px;
	border: 1px solid #adadad;
	font-family: MyriadPro;
}


.detalleGeneral {
	display: grid;
	position: relative;
	padding: 40px;
	line-height: 1.8;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	background-color: #ffffff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

	grid-template-columns: repeat(1, 1fr);
	grid-auto-rows: minmax(20px, auto);
}

.detalleGeneral:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	transition: box-shadow 0.3s ease;
}

.detalleContenedor:hover .detallePack,
.detalleContenedor:hover .detalleGeneral {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	transition: box-shadow 0.3s ease;
}

.detalleGeneral h3 {
	font-size: 1.8em;
	font-weight: bold;
	color: #2c3e50;
	margin-bottom: 15px;
	line-height: 1.3;
}

/* Contenedor principal para el grid de 2 columnas */
.detalleContenedor {
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 20px;
	align-items: start;
	margin-bottom: 20px;
}

.detallePack {
	position: relative;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	background-color: #ffffff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	padding: 20px;

	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-gap: 5px;
	align-items: start;
	grid-template-areas:
		/*"detallePackHeader detallePackHeader"*/
		"detallePackUno";
}

.detallePack:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	transition: box-shadow 0.3s ease;
}

.detallePackUno {
	grid-area: detallePackUno;
	padding: 0px;
	text-align: center;
	align-self: self-start;
}

/* Force single column for pack detail form */
.detallePackUno form {
	display: block !important;
	width: 100% !important;
}

.detallePackUno form>div {
	margin-bottom: 15px !important;
}

.detallePackUno h1 {
	font-size: 1.8em;
	font-weight: bold;
	color: #2c3e50;
	margin-bottom: 10px;
	line-height: 1.3;
	padding-top: 0px;
	letter-spacing: 1px;
}

.detallePackFotos {
	width: 100%;
	margin: 0;
	position: relative;
	padding: 10px 0;

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px;
}

.detallePackFotos img {
	max-width: 100%;
	max-height: 280px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.detallePackFotos img:hover {
	opacity: 0.5;
	transition: all 5;
}


.detallePackVideos {
	width: 100%;
	margin: 0;
	position: relative;
	text-align: center;
	padding: 10px 0;

	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-gap: 0px;
	align-items: center;
	justify-items: center;
}


.carroDetalle {
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
	position: relative;

	display: grid;
	grid-template-columns: repeat(13, 1fr);
	grid-auto-rows: minmax(auto, auto);
	grid-gap: 20px;
	align-items: center;
	grid-template-areas:
		". carroProducto carroProducto carroProducto carroProducto carroProducto carroCantidad carroCantidad carroUnit carroUnit  carroSubTot carroSubTot .";
}

.fondoFila {
	background-color: #a8a8a8;
	padding: 10px;
}

.modificar {
	color: #000000;
	text-decoration: none;
}

.modificar:link {
	color: #000000;
	text-decoration: underline;
	font-size: 1rem;
}

.modificar:hover {
	color: #000000;
	background-color: #887d7d;
	padding: 2px 4px;
	border-radius: 3px;
}

.carroProducto {
	grid-area: carroProducto;
}

.carroCantidad {
	grid-area: carroCantidad;
	text-align: center;
}

.carroUnit {
	grid-area: carroUnit;
	text-align: center;
}

.carroSubTot {
	grid-area: carroSubTot;
	text-align: right;
}


.totalProductos {
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
	position: relative;
	text-align: right;
	font-weight: 550;

	display: grid;
	grid-template-columns: repeat(13, 1fr);
	grid-auto-rows: minmax(auto, auto);
	grid-gap: 20px;
	align-items: center;
	grid-template-areas:
		". . . . . . . . . . totalProd totalProd .";
}

.totalProd {
	grid-area: totalProd;
	text-align: center;
}

.carroTotales {
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
	margin-bottom: 15px;
	margin-top: 15px;
	position: relative;
	text-align: right;
	font-weight: 550;

	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-auto-rows: minmax(auto, auto);
	grid-gap: 5px;
	align-items: center;
	grid-template-areas:
		"totalProd"
		"carroEnvio"
		"carroTotalPagar";
}

.carroEnvio {
	grid-area: carroEnvio;
	text-align: center;
}

.carroDescEnvio {
	grid-area: carroDescEnvio;
}

.carroTotalEnvio {
	grid-area: carroTotalEnvio;
}

.carroTotalPagar {
	grid-area: carroTotalPagar;
	text-align: center;
}

.carroVacio {
	width: 100%;
	text-align: center;
}


.carroBotones {
	width: 100%;
	margin-left: 0%;
	margin-right: 0%;
	position: relative;
	text-align: right;
	font-weight: 550;

	display: grid;
	grid-template-columns: repeat(10, 1fr);
	grid-auto-rows: minmax(auto, auto);
	grid-gap: 20px;
	align-items: center;
	grid-template-areas:
		". . . agregarProductos agregarProductos realizarPedido realizarPedido . . .";
}

.agregarProductos {
	grid-area: agregarProductos;
}

.realizarPedido {
	grid-area: realizarPedido;
}


.formulario {
	width: 100%;
	margin-left: 0%;
	margin-right: 0%;
	position: relative;
	text-align: center;

	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: minmax(auto, auto);
	grid-gap: 20px;
	align-items: center;
	grid-template-areas:
		". campos campos campos campos .";
}

.campos {
	grid-area: campos;
}


.campos select,
input,
textarea {
	font-size: 16px;
	text-align: center;
	width: 100%;
	color: black;
	padding: 10px;
	border: 2px solid #a8a8a8;
	font-family: MyriadPro;
	border-radius: 10px;
}

.tituloRojo {
	color: #a8a8a8;
	text-align: center;
	width: 100%;
}

#prod_secciones {
	padding: 12px;
}

#prod_categorias {
	padding: 12px;
}

#prod_subcategorias {
	padding: 12px;
}

/*
input[type=text].campos{
	width:100%;
}

input[type=email].campos{
	width:100%;
}

input[type=number].campos{
	width:100%;
}
*/

@media screen and (max-width : 760px) {

	.listaProductos {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		padding-bottom: 20px;
		padding-top: 20px;
		grid-template-columns: repeat(1, 1fr);
		grid-gap: 5px;
		grid-template-areas:
			"listaProductosUno"
			"listaProductosDos"
			"listaProductosTres"
			"listaProductosCuatro";
		margin-bottom: 15px;
		border-left: none;
		border-right: none;
		border-radius: 0;
	}

	.listaProductosUno {
		padding: 15px 5px 0px 5px;
	}

	.listaProductosDos {
		padding: 20px 15px 0px 15px;
	}

	.listaProductosDos h3 {
		font-size: 1.4em;
		margin-bottom: 15px;
	}

	.detalleContenedor {
		width: 95%;
		margin-left: 2.5%;
		margin-right: 2.5%;
		grid-template-columns: 1fr;
		grid-gap: 15px;
	}

	.detallePack {
		padding: 15px;
		padding-bottom: 35px;
		grid-template-columns: repeat(1, 1fr);
		grid-gap: 5px;
		grid-template-areas:
			"detallePackUno";
	}

	.detallePackUno {
		padding: 0px 15px 0px 15px;
	}

	.detallePackUno h1 {
		font-size: 1.4em;
		margin-bottom: 15px;
		padding-top: 15px;
	}

	.detalleGeneral {
		padding: 15px 20px 15px 20px;
	}

	.detalleGeneral h3 {
		font-size: 1.4em;
		margin-bottom: 15px;
	}

	.detallePackFotos {
		grid-template-columns: repeat(1, 1fr);
		padding: 5px 0;
	}

	.detallePackVideos {
		grid-template-columns: repeat(1, 1fr);
		padding: 5px 0;
	}

	.carroDetalle {
		border-bottom: orange solid 1px;
		text-align: center;

		grid-template-columns: repeat(1, 1fr);
		grid-gap: 0px;
		grid-template-areas:
			"carroProducto"
			"carroProducto"
			"carroCantidad"
			"carroUnit"
			"carroSubTot";
	}

	.carroTotales {
		text-align: center;

		display: grid;
		grid-template-columns: repeat(1, 1fr);
		grid-gap: 5px;
		grid-template-areas:
			"totalProd"
			"carroEnvio"
			"carroTotalPagar";
	}

	.carroSubTot {
		grid-area: carroSubTot;
		text-align: center;
	}


	.totalProductos {

		text-align: center;
		font-weight: 550;

		display: grid;
		grid-template-columns: repeat(1, 1fr);
		grid-auto-rows: minmax(auto, auto);
		grid-gap: 0px;
		align-items: center;
		grid-template-areas:
			"totalProd";
	}


	.carroBotones {

		text-align: center;
		font-weight: 550;

		display: grid;
		grid-template-columns: repeat(1, 1fr);
		grid-auto-rows: minmax(auto, auto);
		grid-gap: 5px;
		align-items: center;
		grid-template-areas:
			"agregarProductos"
			"realizarPedido";
	}

}

.envioGratis {
	color: white;
	background-color: rgb(226 6 19);
	padding: 7px 12px 5px;
	border-radius: 30px;
	font-size: 17px;
}

/********************************

/* Fin Estilos Tienda */

/********************************/


/********************************

/* Estilos Actividades */

/********************************/
.fondoTitAct {

	width: 100%;
	background-color: red;
	padding: 1px;
}

.titAct {

	color: white !important;

}

/********************************

/* Fin Estilos Actividades */

/********************************/


/********************************

/* Inicio Estilos Tabla Pedidos */

/********************************/

.contTabla {

	width: 1100px;
	height: auto;
	margin-left: auto;
	margin-right: auto;


}

.contFilaTabla {

	width: 995px;
	height: auto;

	display: flex;
	justify-content: space-arround;

}

.celdaHeader {

	width: 198px;
	text-align: center;
	position: relative;
	float: left;
	height: 40px;
	border: 1px #af8b8b solid;
	height: auto;



}


.celdaDato {

	width: 198px;
	text-align: center;
	position: relative;
	float: left;
	height: 40px;
	border: 1px #af8b8b solid;
	height: auto;
	min-height: 80px;

}


/********************************

/* Fin Estilos Tabla Pedidos */

/********************************/





/********************************

/* Inicio Estilos Filtros Tienda */

/********************************/




#txtbuscar,
#txtbuscar::placeholder {
	font-family: 'Montserrat', sans-serif;
}

.contFiltro {
	width: 100%;
	position: relative;
	background-color: white;

	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: minmax(30px, auto);
	grid-gap: 5px;
	align-items: center;
	grid-template-areas:
		"filtroUno filtroDos filtroTres";
}

.filtroUno {
	grid-area: filtroUno;
	padding: 1px 20px 1px 20px;
	text-align: center;
}

.filtroDos {
	grid-area: filtroDos;
	padding: 1px 20px 1px 20px;
	text-align: center;
}

.filtroTres {
	grid-area: filtroTres;
	padding: 1px 20px 1px 20px;
	text-align: center;
}

@media screen and (max-width: 760px) {

	.contFiltro {
		padding-bottom: 35px;
		grid-template-columns: repeat(1, 1fr);
		grid-auto-rows: minmax(20px, auto);
		grid-gap: 5px;
		grid-template-areas:
			"filtroUno"
			"filtroDos"
			"filtroTres";
	}

}




/********************************

/* Fin Estilos Filtros Tienda */

/********************************/




.linkTienda a:link,
a:visited {

	color: #fc0050;

}

.linkTienda a:hover {

	color: #fc0050;
	text-decoration: none;

}

.cienUno {

	padding-top: 1px;
	padding-bottom: 1px;

}

/*
.verMas{
	background: white;
    text-align: center;
	text-decoration: none;
	color: #0c0c0c;
	text-decoration: none;
	padding: 8px 30px;
	border: solid 1px #0c0c0c;
	font-size: 16px;
	align-self: end;
	width: fit-content;
	padding: 10Px 15px 10px 15px;
	
}
*/
.botonNegro {
	background: black;
	color: white;
	text-align: center;
	text-decoration: none;
	text-decoration: none;
	padding: 8px 30px;
	border: solid 1px #0c0c0c;
	font-size: 16px;
	align-self: end;
	width: fit-content;
	padding: 10Px 15px 10px 15px;

}

.botonNegro a:link {
	text-decoration: none;
	color: white;
}

.botonNegro a:visited {
	text-decoration: none;
	color: white;
}

.botonNegro a:hover {
	text-shadow: 2px 2px 3px white;
}

/**********************************

INICIO ESTILOS FORMULARIO DATOS ENVÍO

***********************************/

/* Estilos para formulario de 2 columnas responsive */
.formulario-dos-columnas {
	max-width: 850px;
	margin: 0 auto;
	padding: 8px;
	font-family: 'Montserrat', sans-serif;
}

.form-grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 15px !important;
	margin-bottom: 15px !important;
}

.form-section {
	background: #ffffff !important;
	padding: 15px !important;
	border-radius: 6px !important;
	border: 2px solid #a8a8a8 !important;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12) !important;
	margin-bottom: 0 !important;
}

.form-section h3 {
	color: #333333;
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 12px;
	padding-bottom: 6px;
	border-bottom: 2px solid #a8a8a8;
	font-family: 'Montserrat', sans-serif;
}

.form-field {
	margin-bottom: 12px;
}

.form-field label {
	display: block;
	color: #222222;
	font-weight: 600;
	margin-bottom: 4px;
	font-size: 12px;
	font-family: 'Montserrat', sans-serif;
}

.form-field input,
.form-field select {
	width: 100%;
	padding: 8px 10px;
	border: 2px solid #a8a8a8;
	border-radius: 4px;
	font-size: 12px;
	font-family: 'Montserrat', sans-serif;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
	box-sizing: border-box;
	background-color: #ffffff;
	color: #333333;
}

.form-field input:focus,
.form-field select:focus {
	outline: none;
	border-color: #a8a8a8;
	box-shadow: 0 0 0 2px rgba(168, 168, 168, 0.2);
}

.form-field input[readonly] {
	background-color: #f0f0f0;
	color: #6c757d;
}

.form-field input::placeholder {
	color: #666666;
	font-weight: 500;
}

/* Estilos para el texto ingresado por el usuario */
.form-field input:not(:placeholder-shown),
.form-field select:not([value=""]),
.form-field input[value]:not([value=""]),
.form-field select option:checked {
	font-weight: bold;
	color: #222222;
}

/* Estilos para cuando el usuario está escribiendo */
.form-field input:focus,
.form-field select:focus {
	font-weight: bold;
	color: #222222;
}

/* Estilos para selects con opciones seleccionadas */
.form-field select option:checked {
	font-weight: bold;
	color: #222222;
}

/* Estilos para inputs con valor (campos prellenados) */
.form-field input[value]:not([value=""]),
.form-field input:valid:not(:placeholder-shown) {
	font-weight: bold;
	color: #222222;
}

.form-field small {
	color: #555555;
	font-size: 10px;
	margin-top: 3px;
	display: block;
	font-weight: 500;
}

.form-field a {
	color: #a8a8a8;
	text-decoration: none;
	font-size: 10px;
}

.form-field a:hover {
	text-decoration: underline;
	color: #605f5f;
}

/* Estilos para tooltips */
.form-field {
	position: relative;
}

.form-field input[title]:hover::after,
.form-field select[title]:hover::after,
.form-field select:hover::after {
	content: attr(title);
	position: absolute;
	bottom: 100%;
	left: 0;
	background: #333333;
	color: white;
	padding: 8px 12px;
	border-radius: 4px;
	font-size: 12px;
	white-space: nowrap;
	z-index: 1000;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	pointer-events: none;
	margin-bottom: 5px;
}

.form-field input[title]:hover::before,
.form-field select[title]:hover::before,
.form-field select:hover::before {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 20px;
	border: 5px solid transparent;
	border-top-color: #333333;
	z-index: 1000;
	pointer-events: none;
}

/* Tooltips específicos para selects dinámicos */
#categorias[title]:hover::after,
#subcategorias[title]:hover::after {
	content: attr(title);
	position: absolute;
	bottom: 100%;
	left: 0;
	background: #333333;
	color: white;
	padding: 8px 12px;
	border-radius: 4px;
	font-size: 12px;
	white-space: nowrap;
	z-index: 1000;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	pointer-events: none;
	margin-bottom: 5px;
}

#categorias[title]:hover::before,
#subcategorias[title]:hover::before {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 20px;
	border: 5px solid transparent;
	border-top-color: #333333;
	z-index: 1000;
	pointer-events: none;
}

.form-actions {
	grid-column: 1 / -1;
	text-align: center;
	margin-top: 15px;
}

/* Estilos específicos para el botón del formulario de datos de envío */
.formulario-dos-columnas .botonTienda,
input[type="submit"].botonTienda,
input.botonTienda {
	background: #666666 !important;
	color: white !important;
	border: 2px solid #666666 !important;
	padding: 10px 25px !important;
	border-radius: 4px !important;
	cursor: pointer !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	transition: all 0.3s ease !important;
	font-family: 'Montserrat', sans-serif !important;
	min-width: 160px !important;
	display: inline-block !important;
	text-decoration: none !important;
	box-sizing: border-box !important;
	outline: none !important;
}

.formulario-dos-columnas .botonTienda:hover,
input[type="submit"].botonTienda:hover,
input.botonTienda:hover {
	background: #333333 !important;
	border-color: #333333 !important;
	color: white !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15) !important;
}

.formulario-dos-columnas .botonTienda:active,
input[type="submit"].botonTienda:active,
input.botonTienda:active {
	background: #1a1a1a !important;
	border-color: #1a1a1a !important;
	transform: translateY(0) !important;
}

/* Estilos para campos de teléfono en línea */
.telefono-group {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 6px;
}

/* Estilos para dirección en línea */
.direccion-group {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 6px;
}

/* Estilos específicos para pedido-revisar.php */
.pedido-revisar .formulario-dos-columnas {
	max-width: 850px !important;
	margin: 0 auto !important;
	padding: 8px !important;
}

.pedido-revisar .form-grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 15px !important;
	margin-bottom: 15px !important;
}

.pedido-revisar .form-section {
	background: #ffffff !important;
	padding: 15px !important;
	border-radius: 6px !important;
	border: 2px solid #a8a8a8 !important;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12) !important;
	margin-bottom: 0 !important;
}

.pedido-revisar .form-field {
	margin-bottom: 12px !important;
}

.pedido-revisar .form-field label {
	display: block !important;
	color: #222222 !important;
	font-weight: 600 !important;
	margin-bottom: 4px !important;
	font-size: 12px !important;
	font-family: 'Montserrat', sans-serif !important;
}

.pedido-revisar .form-field input,
.pedido-revisar .form-field select {
	width: 100% !important;
	padding: 8px 10px !important;
	border: 2px solid #a8a8a8 !important;
	border-radius: 4px !important;
	font-size: 12px !important;
	font-family: 'Montserrat', sans-serif !important;
	transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
	box-sizing: border-box !important;
	background-color: #ffffff !important;
	color: #333333 !important;
}

.pedido-revisar .telefono-group {
	display: grid !important;
	grid-template-columns: 1fr 2fr !important;
	gap: 6px !important;
}

.pedido-revisar .direccion-group {
	display: grid !important;
	grid-template-columns: 2fr 1fr !important;
	gap: 6px !important;
}

.pedido-revisar .form-field small {
	color: #555555 !important;
	font-size: 10px !important;
	margin-top: 3px !important;
	display: block !important;
	font-weight: 500 !important;
}

.pedido-revisar .form-field a {
	color: #a8a8a8 !important;
	text-decoration: none !important;
	font-size: 10px !important;
}

.pedido-revisar .form-field a:hover {
	text-decoration: underline !important;
	color: #605f5f !important;
}

/* Estilos específicos para selects generados por AJAX en pedido-revisar */
.pedido-revisar select.form-control {
	width: 100% !important;
	padding: 8px 10px !important;
	border: 2px solid #a8a8a8 !important;
	border-radius: 4px !important;
	font-size: 12px !important;
	font-family: 'Montserrat', sans-serif !important;
	transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
	box-sizing: border-box !important;
	background-color: #ffffff !important;
	color: #333333 !important;
}

.pedido-revisar select.form-control:focus {
	outline: none !important;
	border-color: #a8a8a8 !important;
	box-shadow: 0 0 0 2px rgba(168, 168, 168, 0.2) !important;
}

.pedido-revisar select.form-control:disabled {
	background-color: #f0f0f0 !important;
	color: #6c757d !important;
}

/* Estilos específicos para selects generados por AJAX en pedido-datos-envio */
.formulario-dos-columnas select.form-control {
	width: 100% !important;
	padding: 8px 10px !important;
	border: 2px solid #a8a8a8 !important;
	border-radius: 4px !important;
	font-size: 12px !important;
	font-family: 'Montserrat', sans-serif !important;
	transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
	box-sizing: border-box !important;
	background-color: #ffffff !important;
	color: #333333 !important;
}

.formulario-dos-columnas select.form-control:focus {
	outline: none !important;
	border-color: #a8a8a8 !important;
	box-shadow: 0 0 0 2px rgba(168, 168, 168, 0.2) !important;
}

.formulario-dos-columnas select.form-control:disabled {
	background-color: #f0f0f0 !important;
	color: #6c757d !important;
}

/* Estilos para campos readonly en formularios */
.formulario-dos-columnas input[readonly],
.pedido-revisar input[readonly] {
	background-color: #f0f0f0 !important;
	color: #6c757d !important;
	cursor: not-allowed !important;
}

/* Responsive */
@media (max-width: 768px) {
	.form-grid {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
	}

	.formulario-dos-columnas {
		padding: 6px;
	}

	.form-section {
		padding: 12px;
		margin-left: 10px;
		margin-right: 10px;
	}

	.form-field input,
	.form-field select {
		padding: 10px 12px;
		font-size: 16px;
		/* Evita zoom en iOS */
	}

	/* Forzar una columna en pedido-revisar también */
	.pedido-revisar .form-grid {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 480px) {
	.form-section {
		padding: 12px;
	}

	.form-section h3 {
		font-size: 14px;
	}

	.formulario-dos-columnas .botonTienda,
	input[type="submit"].botonTienda {
		width: 100% !important;
		padding: 12px 20px !important;
		min-width: auto !important;
		font-size: 13px !important;
		margin-top: 15px;
	}

	.telefono-group {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.direccion-group {
		grid-template-columns: 1fr;
		gap: 8px;
	}
}

/* Estilos adicionales para asegurar que el botón funcione */
.form-actions input[type="submit"] {
	background: #a8a8a8 !important;
	color: white !important;
	border: 2px solid #a8a8a8 !important;
	padding: 12px 30px !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	transition: all 0.3s ease !important;
	font-family: 'Montserrat', sans-serif !important;
	min-width: 180px !important;
	display: inline-block !important;
	text-decoration: none !important;
	box-sizing: border-box !important;
	outline: none !important;
}

.form-actions input[type="submit"]:hover {
	background: #605f5f !important;
	border-color: #605f5f !important;
	color: white !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15) !important;
}

.form-actions input[type="submit"]:active {
	background: #4a4a4a !important;
	border-color: #4a4a4a !important;
	transform: translateY(0) !important;
}

/**********************************

FIN ESTILOS FORMULARIO DATOS ENVÍO

***********************************/

/* ========================================
   ESTILOS TARJETAS CARRITO DE COMPRAS
   ======================================== */

.cart-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
	font-family: 'Montserrat', sans-serif;
}

.modify-page-content {
	display: flex;
	justify-content: center;
	padding: 20px 0;
}

.cart-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* Fixed 3 columns */
	gap: 16px;
	margin-bottom: 30px;
}

/* Desktop: tarjeta de totales siempre a continuación de los productos */
@media (min-width: 1025px) {
	.cart-totals {
		grid-column: auto;
		/* Se posiciona automáticamente después de los productos */
	}
}

/* Responsive adjustments */
@media (max-width: 1024px) {
	.cart-grid {
		grid-template-columns: repeat(2, 1fr);
		/* 2 columns on tablets */
	}

	.cart-totals {
		grid-column: 1 / -1;
		/* En tablets ocupa todo el ancho */
	}
}

@media (max-width: 768px) {
	.cart-grid {
		grid-template-columns: 1fr;
		/* 1 column on mobile */
		gap: 20px;
		/* Mayor espacio entre elementos en móviles */
	}

	.cart-totals {
		grid-column: 1;
		/* En móviles ocupa la única columna */
		margin-top: 20px;
		/* Espacio superior en móviles */
	}
}

@media (max-width: 480px) {
	.cart-grid {
		gap: 16px;
		/* Espacio reducido en pantallas muy pequeñas */
	}

	.cart-totals {
		padding: 16px;
		/* Padding reducido en móviles pequeños */
	}
}

.cart-card {
	background: #ffffff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.cart-card:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	border-color: #a8a8a8;
}

.cart-card-header {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	margin-bottom: 15px;
}

.cart-product-image {
	width: 70px;
	height: 70px;
	border-radius: 6px;
	object-fit: cover;
	border: 1px solid #e0e0e0;
	flex-shrink: 0;
}

.cart-product-info {
	flex: 1;
	min-width: 0;
}

.cart-product-title {
	font-size: 16px;
	font-weight: 600;
	color: #333;
	margin: 0 0 5px 0;
	line-height: 1.3;
}

.cart-product-variant {
	font-size: 14px;
	color: #666;
	margin: 0;
	font-weight: 400;
}

.cart-card-body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
	margin-bottom: 15px;
}

.cart-quantity-section {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cart-quantity-label {
	font-size: 12px;
	color: #666;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.cart-quantity-value {
	font-size: 18px;
	font-weight: 600;
	color: #333;
}

.cart-modify-link {
	color: #fff !important;
	text-decoration: none;
	font-size: 12px;
	font-weight: 600;
	background: #a8a8a8;
	border: 2px solid #a8a8a8;
	border-radius: 6px;
	padding: 6px 12px;
	display: inline-block;
	transition: all 0.3s ease;
	text-transform: none;
	letter-spacing: 0.3px;
	white-space: nowrap;
	width: fit-content;
	min-width: auto;
}

.cart-modify-link:hover {
	color: #fff;
	background: #605f5f;
	border-color: #605f5f;
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.cart-delete-form {
	position: absolute !important;
	top: 10px !important;
	right: 10px !important;
	z-index: 100 !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	transform: none !important;
}

.cart-delete-link {
	background: none !important;
	border: none !important;
	color: #999 !important;
	text-decoration: underline !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	cursor: pointer !important;
	padding: 5px !important;
	text-transform: lowercase !important;
	transition: color 0.3s ease, transform 0.2s ease !important;
	font-family: 'Montserrat', sans-serif !important;
	display: block !important;
	position: static !important;
	width: auto !important;
	height: auto !important;
	transform: none !important;
	line-height: 1 !important;
	box-shadow: none !important;
}

.cart-delete-link:hover {
	color: #cc0000 !important;
	transform: scale(1.05) !important;
}

.cart-price-section {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: right;
}

.cart-unit-price {
	font-size: 12px;
	color: #666;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.cart-unit-value {
	font-size: 16px;
	font-weight: 600;
	color: #333;
}

.cart-subtotal {
	font-size: 16px;
	font-weight: 600;
	color: #333;
	border-top: 1px solid #e0e0e0;
	padding-top: 12px;
	text-align: center;
	background: #f8f9fa;
	margin: 15px -20px -20px -20px;
	padding: 12px 20px;
	border-radius: 0 0 8px 8px;
}

.cart-customization-details {
	margin-top: 10px;
	padding: 8px 12px;
	background: #f1f1f1;
	border-radius: 6px;
	border-left: 3px solid #a8a8a8;
}

.cart-product-custom {
	font-size: 13px !important;
	color: #444 !important;
	margin: 0 0 4px 0 !important;
	line-height: 1.4 !important;
}

.cart-product-custom strong {
	color: #222;
	font-weight: 600;
}

.cart-empty {
	text-align: center;
	padding: 60px 20px;
	background: #fafafa;
	border-radius: 12px;
	border: 2px dashed #ddd;
}

.cart-empty h1 {
	color: #666;
	font-size: 24px;
	font-weight: 400;
	margin: 0;
}

.cart-buttons {
	display: flex;
	gap: 15px;
	justify-content: center;
	margin-top: 40px;
	flex-wrap: wrap;
	padding: 0 20px;
}

.cart-button {
	background-color: #727272 !important;
	color: white !important;
	padding: 14px 28px !important;
	text-decoration: none;
	border-radius: 8px;
	font-weight: bold;
	font-size: 16px;
	display: inline-block;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(114, 114, 114, 0.3);
	border: none !important;
	min-width: 200px;
	cursor: pointer;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
}

.cart-button:hover {
	background-color: #5a5a5a !important;
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(114, 114, 114, 0.6), 0 2px 8px rgba(0, 0, 0, 0.15);
	color: white !important;
}

.cart-button.primary {
	background-color: #333 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.cart-button.primary:hover {
	background-color: #000 !important;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.cart-totals {
	background: #f8f9fa;
	border: 2px solid #e0e0e0;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	align-self: start;
	/* Se alinea al inicio para que quede alineada con las tarjetas */
}

.cart-totals h3 {
	color: #333;
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 15px 0;
	text-align: center;
	border-bottom: 2px solid #a8a8a8;
	padding-bottom: 10px;
}

.cart-total-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px solid #e0e0e0;
}

.cart-total-item:last-child {
	border-bottom: none;
	font-weight: 700;
	font-size: 16px;
	color: #333;
	border-top: 2px solid #a8a8a8;
	margin-top: 10px;
	padding-top: 15px;
}

.cart-total-item p {
	margin: 0;
	font-size: 14px;
	color: #333;
}

.cart-total-item:last-child p {
	font-weight: 700;
	color: #333;
}

/* Compatibilidad con estilos existentes del carrito */
.carroTotales {
	background: #f8f9fa;
	border: 2px solid #e0e0e0;
	border-radius: 12px;
	padding: 20px;
	margin-top: 30px;
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
}

.carroEnvio,
.carroDescEnvio,
.carroTotalEnvio,
.totalProd,
.carroTotalPagar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px solid #e0e0e0;
}

.carroTotalPagar {
	border-bottom: none;
	font-weight: 700;
	font-size: 16px;
	color: #333;
	border-top: 2px solid #a8a8a8;
	margin-top: 10px;
	padding-top: 15px;
}

.carroTotalPagar p {
	font-weight: 700;
	color: #333;
	margin: 0;
}

/* Responsive para tarjetas del carrito */
@media (max-width: 768px) {
	.cart-grid {
		grid-template-columns: 1fr;
		gap: 15px;
		padding: 15px;
	}

	.cart-card {
		padding: 15px;
	}

	.cart-card-header {
		gap: 12px;
	}

	.cart-product-image {
		width: 60px;
		height: 60px;
	}

	.cart-product-title {
		font-size: 14px;
	}

	.cart-product-variant {
		font-size: 12px;
	}

	.cart-card-body {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.cart-price-section {
		text-align: left;
	}

	.cart-buttons {
		flex-direction: column;
		align-items: center;
	}

	.cart-button {
		width: 100%;
		max-width: 300px;
	}
}

@media (max-width: 480px) {
	.cart-container {
		padding: 10px;
	}

	.cart-card {
		padding: 12px;
	}

	.cart-product-image {
		width: 50px;
		height: 50px;
	}

	.cart-product-title {
		font-size: 13px;
	}

	.cart-subtotal {
		font-size: 16px;
	}
}

/* DETALLE DE PRODUCTOS - Spinner para AJAX - posicionamiento correcto */
#cargandoDetalle {
	position: absolute;
	top: 15%;
	left: 25%;
	transform: translate(-50%, -50%);
	z-index: 1000;
	text-align: center;
	background: white;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

#cargandoDetalle .spinner-circle {
	width: 30px;
	height: 30px;
	border: 3px solid #f3f3f3;
	border-top: 3px solid #009ee3;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin: 0 auto 10px;
}

#cargandoDetalle .spinner-text {
	font-size: 14px;
	color: #666;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* Mobile screens (vertical) */
@media (max-width: 768px) {
	#cargandoDetalle {
		top: 15%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}


/* Clase de utilidad agregada manualmente para simular Tailwind JIT */
/* .text-\[\#605f5f\] { color: #605f5f !important; } */
.text-custom-gray {
	color: #605f5f !important;
}

/* Estilos para filtros de productos */
.contFiltro {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin: 20px 0;
	flex-wrap: wrap;
	background-color: #f9f9f9;
	padding: 15px;
	border-radius: 8px;
	border: 1px solid #adadad;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.filtroUno,
.filtroDos,
.filtroTres {
	flex: 1;
	min-width: 200px;
	max-width: 300px;
}

.contFiltro p {
	margin-bottom: 5px;
	color: #333;
	font-weight: bold;
	text-align: left;
}

.contFiltro select {
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	background-color: white;
	font-size: 16px;
	font-family: 'Montserrat', sans-serif;
	color: #333;
}

/* Responsive para filtros */
@media (max-width: 768px) {
	.contFiltro {
		flex-direction: column;
		align-items: center;
	}

	.filtroUno,
	.filtroDos,
	.filtroTres {
		width: 100%;
		max-width: 100%;
	}
}

/* Remoción global de resplandor azul y ajustes finales de responsiveness */
* {
	--tw-ring-color: transparent !important;
	--tw-drop-shadow: none !important;
	--tw-shadow: 0 0 #0000 !important;
}

.listaProductosUno img {
	filter: none !important;
	/*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;*/
	border-radius: 12px;
	/* Sombra normal gris */
}

@media screen and (max-width : 760px) {

	.listaProductos,
	.contFiltro,
	.contBuscador {
		width: 94% !important;
		margin: 10px auto !important;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
		border: 1px solid #adadad !important;
		border-radius: 12px !important;
		padding: 12px !important;
	}

	.contFiltro {
		display: flex !important;
		/* Asegurar que mantenga flex even with the shared rule */
		padding: 12px !important;
	}

	#txtbuscar,
	.contFiltro select {
		font-size: 14px !important;
	}

	.cienUno {
		padding: 0 15px 20px 15px !important;
	}

	.cienUno h1 {
		font-size: 1.5rem !important;
	}
}

/* Optimization Above the Fold */
.grid-above-fold {
	display: grid;
	grid-template-columns: 35% 1fr;
	gap: 20px;
	width: 90%;
	margin: 0 auto 20px auto;
	align-items: stretch;
}

.grid-above-fold .contBuscador {
	width: 100% !important;
	margin: 0 !important;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px !important;
}

.grid-above-fold .contFiltro {
	width: 100% !important;
	margin: 0 !important;
	height: 100%;
	padding: 10px;
	align-content: center;
}

@media (max-width: 768px) {
	.grid-above-fold {
		grid-template-columns: 1fr;
	}
}

/********************************
/* NUEVO GRID DE PRODUCTOS */
/********************************/

.productos-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 15px;
	width: 98%;
	margin: 15px auto;
	align-items: stretch;
}

/* Re-estilo de productos dentro del grid */
.productos-grid .listaProductos {
	width: 100% !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	padding: 15px 15px 25px 15px !important;
	/* Aumentado padding inferior para evitar cortes */
	height: 100%;
	border-radius: 12px;
	border: 1px solid #adadad;
	background-color: #ffffff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	overflow: visible !important;
	/* Asegurar que nada se corte */
}

.productos-grid .listaProductos:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.productos-grid .listaProductosUno {
	padding: 0 0 5px 0 !important;
	/* Reducido de 10px */
	flex-shrink: 0;
}

.productos-grid .listaProductosUno img {
	max-height: 180px !important;
	width: 100% !important;
	object-fit: contain;
	margin: 0 auto !important;
	display: block !important;
	border-radius: 8px;
}

.productos-grid .listaProductosDos {
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.productos-grid .listaProductosDos h3 {
	font-size: 1.25rem !important;
	/* Subido ligeramente */
	font-weight: 600 !important;
	color: #333 !important;
	margin-bottom: 4px !important;
	/* Reducido de 8px */
	min-height: 1.2em;
	/* Usar min-height en lugar de height fijo tan pequeño */
	height: auto;
	max-height: 2.5em;
	/* Suficiente para 2 líneas */
	overflow: hidden;
	line-height: 1.2 !important;
}

.productos-grid .listaProductosDos .prod-descripcion {
	font-size: 1rem !important;
	color: #666 !important;
	margin-bottom: 5px !important;
	height: 3.2em;
	/* Altura controlada sola para descripción */
	overflow: hidden;
	line-height: 1.4 !important;
}

/* Otros párrafos que no sean la descripción deben ser visibles */
.productos-grid .listaProductosDos p:not(.prod-descripcion) {
	height: auto !important;
	overflow: visible !important;
	margin-bottom: 10px !important;
}

.label-presentacion {
	font-size: 0.95rem !important;
	color: #333 !important;
	font-weight: 500 !important;
}

.productos-grid form {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	justify-content: flex-start;
	margin-top: 5px !important;
	/* Espacio extra para evitar que el label se pegue o corte */
}

/* Ajuste específico para el párrafo que contiene el label */
.productos-grid form>p:first-child {
	margin-top: 0 !important;
	line-height: 1.4 !important;
	padding-top: 2px !important;
	/* Evitar corte superior */
}

.productos-grid .listaProductosDos select,
.productos-grid .listaProductosDos input[type=number],
.productos-grid .form-input {
	font-size: 14px !important;
	padding: 8px 10px !important;
	border-radius: 5px !important;
	border: 1px solid #ccc !important;
	width: 100% !important;
	max-width: 100% !important;
	margin-bottom: 15px !important;
	line-height: normal !important;
	height: 40px !important;
	/* Altura fija para evitar recortes en todos los navegadores */
	display: block !important;
	box-sizing: border-box !important;
	background-color: #fff !important;
}

#txtCantidad {
	width: 80px !important;
	display: inline-block !important;
	margin-right: 10px !important;
}

#cantidad-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.productos-grid .pack-personalizacion-container {
	margin-bottom: 10px !important;
}

.productos-grid .pack-personalizacion-container p {
	margin-bottom: 5px !important;
	font-size: 0.85rem !important;
	height: auto !important;
	/* No fijar altura para estos párrafos */
}

/* Forzar que el botón esté al fondo */
.productos-grid .botonTienda {
	margin-top: auto !important;
	padding-top: 10px;
}

.productos-grid .botonTienda a,
.productos-grid input.botonTienda {
	font-size: 14px !important;
	padding: 10px 15px !important;
	width: 100% !important;
	box-sizing: border-box;
	display: block;
	text-align: center;
	background-color: #333;
	color: #fff;
	border-radius: 5px;
	border: none;
	cursor: pointer;
	transition: background 0.2s;
	text-decoration: none;
}

.productos-grid input.botonTienda {
	width: auto !important;
	min-width: 120px;
}

.productos-grid .botonTienda a:hover,
.productos-grid input.botonTienda:hover {
	background-color: #555;
}



/* Media Queries para Responsiveness */
@media (max-width: 1200px) {
	.productos-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 992px) {
	.productos-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.productos-grid {
		grid-template-columns: 1fr;
		width: 94%;
		/* Reducido para margen lateral */
		margin: 15px auto;
		grid-gap: 20px;
	}

	.productos-grid .listaProductos {
		border-radius: 12px;
		border: 1px solid #adadad;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	}
}

/* MODAL DE ELIMINACION MODERNO */
.modal-overlay {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background: rgba(0, 0, 0, 0.4) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 99999 !important;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.modal-overlay.active {
	display: flex;
	opacity: 1;
}

.modal-content {
	background: white !important;
	padding: 30px !important;
	border-radius: 16px !important;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
	max-width: 400px !important;
	width: 90% !important;
	text-align: center !important;
	transform: translateY(20px);
	transition: transform 0.3s ease;
	font-family: 'Montserrat', sans-serif !important;
}

.modal-overlay.active .modal-content {
	transform: translateY(0);
}

.modal-title {
	font-size: 20px !important;
	font-weight: 700 !important;
	color: #333 !important;
	margin: 0 0 15px 0 !important;
	text-align: center !important;
}

.modal-text {
	font-size: 15px !important;
	color: #666 !important;
	line-height: 1.5 !important;
	margin-bottom: 25px !important;
}

.modal-actions {
	display: flex !important;
	gap: 12px !important;
	justify-content: center !important;
}

.modal-btn {
	padding: 12px 25px !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: all 0.3s ease !important;
	border: none !important;
	min-width: 120px !important;
	font-family: 'Montserrat', sans-serif !important;
	/* Harden against global button rules */
	position: relative !important;
	top: auto !important;
	transform: none !important;
	display: block !important;
}

.modal-btn-cancel {
	background: #f1f1f1 !important;
	color: #666 !important;
}

.modal-btn-cancel:hover {
	background: #e5e5e5 !important;
	color: #333 !important;
}

.modal-btn-confirm {
	background: #333 !important;
	color: white !important;
}

.modal-btn-confirm:hover {
	background: #000 !important;
	transform: scale(1.02) !important;
}

@media (max-width: 480px) {
	.modal-content {
		padding: 25px 20px !important;
		width: 85% !important;
	}

	.modal-actions {
		flex-direction: column !important;
		gap: 10px !important;
	}

	.modal-btn {
		width: 100% !important;
		margin: 0 !important;
		padding: 14px !important;
	}

	.modal-btn-cancel {
		order: 2;
	}

	.modal-btn-confirm {
		order: 1;
	}
}

/* Estilos para Personalización de Packs */
/* Split Layout for Customization Form */
#detallePack form {
	display: grid;
	grid-template-columns: 0.6fr 1.4fr;
	/* Qty smaller, Options larger */
	gap: 20px;
	align-items: center;
}

.pack-personalizacion-container {
	grid-column: 2;
	/* Move to right */
	grid-row: 1;
	text-align: center;
	margin-top: 0;
	color: #333;
	width: 100%;
}

.cantidad-comprar-container {
	grid-column: 1;
	/* Move to left */
	grid-row: 1;
	margin-bottom: 0 !important;
}

.pack-personalizacion-container p {
	color: #333 !important;
	/* Forzar color y sobreescribir posibles herencias */
	margin-bottom: 3px !important;
	font-size: 0.95rem;
	/* Tamaño unificado */
	font-weight: 600;
}

.cantidad-comprar-container p {
	margin-bottom: 5px !important;
}

.cantidad-comprar-container span {
	font-size: 0.95rem !important;
	/* Unified size for Cantidad label */
	font-weight: 600;
	color: #333;
}

.pack-personalizacion-container select.form-input {
	width: 100%;
	max-width: 300px;
	padding: 6px;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 14px;
	color: #333;
	background-color: #fff;
	font-family: 'MyriadPro', sans-serif;
	margin: 0 auto 10px auto;
	/* Centrar select y dar margen inferior */
	display: block;
	cursor: pointer;
}

.pack-personalizacion-container select.form-input:focus {
	border-color: #009ee3;
	outline: none;
	box-shadow: 0 0 5px rgba(0, 158, 227, 0.3);
}

/* Contenedor de colores (telas específicas) */
.tela-especifica-container,
.color-options-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/* Centrar los círculos de color */
	gap: 10px;
	margin-top: 5px;
	margin-bottom: 15px;
	width: 100%;
}

.color-options-container p {
	width: 100%;
	/* El título "Seleccione el Color" ocupa todo el ancho */
	text-align: center;
	margin-bottom: 5px !important;
	font-size: 0.95rem;
	font-weight: 600;
	color: #333 !important;
}

.color-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
	margin: 3px;
}

.color-option img {
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	border: 2px solid transparent;
	/* Reservar espacio para borde */
	width: 35px;
	/* Reducir ligeramente imagenes de color si es necesario, o mantener */
	height: 35px;
}

.color-option:hover img {
	transform: scale(1.1);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.color-option input:checked+img {
	border-color: #009ee3;
}

/* Mejoras de Estilo para Detalle General y consistencia */
/* Mejoras de Estilo para Detalle General y consistencia */
.detallePackMedia,
.detalleGeneral {
	padding: 30px;
	background-color: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	/* Sombra más suave */
	margin-bottom: 30px;
	font-family: 'MyriadPro', sans-serif !important;
	/* Forzar fuente correcta */
}

.detallePackMedia {
	min-height: 300px;
	/* Asegurar altura mínima para que el spinner sea visible */
}

.detalleGeneral h3 {
	font-size: 1.5rem;
	color: #333;
	border-bottom: none;
	padding-bottom: 10px;
	margin-bottom: 20px;
	text-align: left;
	font-family: 'MyriadPro', sans-serif !important;
}

.detallePackMedia img,
.detallePackMedia iframe,
.detallePackMedia video {
	border-radius: 8px;
	margin-bottom: 15px;
	max-width: 100%;
}

.detalleGeneral p,
.detalleGeneral li,
.detalleGeneral span,
.detalleGeneral div {
	font-size: 1rem;
	color: #555;
	line-height: 1.6;
	margin-bottom: 15px;
	font-family: 'MyriadPro', sans-serif !important;
}

.detalleGeneral strong {
	color: #333;
}

.detalleGeneral ul {
	margin-left: 20px;
	margin-bottom: 20px;
}

.detalleGeneral img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	margin: 10px 0;
}

@media screen and (max-width: 900px) {

	.listaProductos,
	.contBuscador {
		grid-template-columns: 1fr !important;
		grid-template-areas:
			"listaProductosUno"
			"listaProductosDos"
			"listaProductosTres"
			"listaProductosCuatro" !important;
		gap: 20px !important;
		padding: 20px 0 !important;
	}

	.listaProductosUno,
	.listaProductosDos,
	.listaProductosTres {
		padding: 0 20px !important;
	}

	.listaProductosUno img {
		max-height: none !important;
		width: 100% !important;
		height: auto !important;
	}

	/* Stack the customization form on mobile */
	#detallePack form {
		grid-template-columns: 1fr !important;
		display: flex;
		flex-direction: column;
		gap: 15px;
	}

	.pack-personalizacion-container,
	.cantidad-comprar-container {
		grid-column: auto !important;
		grid-row: auto !important;
		width: 100% !important;
		margin-bottom: 5px !important;
	}

	.pack-personalizacion-container {
		order: 1;
		/* Options first */
	}

	.cantidad-comprar-container {
		order: 2;
		/* Buy button second */
	}
}

/* Ajustes solicitados */
.detallePackUno h1 {
	font-size: 1.5em !important;
	/* Reducir tamaño de título (antes 1.8em) */
}

.precio-pack {
	font-size: 1.5rem;
	font-weight: bold;
	color: #333;
	font-family: 'MyriadPro', sans-serif !important;
}

/* Spinner de Carga */
.spinner-overlay {
	display: none;
	/* Default hidden */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.8);
	z-index: 100;
	border-radius: 12px;
	justify-content: center !important;
	align-items: center !important;
}

/* Spinner específico para media - cerca del tope */
#cargandoMedia {
	display: flex !important;
	align-items: flex-start !important;
	padding-top: 60px;
	z-index: 9999 !important;
}

.spinner {
	border: 4px solid #f3f3f3;
	border-top: 4px solid #333;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	animation: spin 1s linear infinite;
	margin: auto;
}

/* Resetear margen del spinner en el contenedor de media para que esté arriba */
#cargandoMedia .spinner {
	margin: 0 auto !important;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* Clase para centrar mensaje de sin resultados en grid */
.sin-resultados {
	grid-column: 1 / -1;
	width: 100%;
	text-align: center;
	margin: 0px 0;
}

.sin-resultados p {
	font-size: 18px;
	color: #666;
}