/* Fuentes */
@font-face {
	font-family: 'Montserrat';
	src: url('../font/Montserrat/Montserrat.ttf') format('truetype');
}
@font-face {
	font-family: 'MontserratRegular';
	src: url('../font/Montserrat/Montserrat-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'MontserratBlack';
	src: url('../font/Montserrat/Montserrat-Black.ttf') format('truetype');
}
@font-face {
	font-family: 'MontserratMedium';
	src: url('../font/Montserrat/Montserrat-Medium.ttf') format('truetype');
}
@font-face {
	font-family: 'MontserratSemiBold';
	src: url('../font/Montserrat/Montserrat-SemiBold.ttf') format('truetype');
}
@font-face {
	font-family: 'MontserratBold';
	src: url('../font/Montserrat/Montserrat-Bold.ttf') format('truetype');
}
@font-face {
	font-family: 'MontserratThin';
	src: url('../font/Montserrat/Montserrat-Thin.ttf') format('truetype');
}
@font-face {
	font-family: 'Gogono';
	src: url('../font/gogono/gogono.ttf') format('truetype');
}

/* Scrollbar */
::-webkit-scrollbar {
	height: 8px;
	width: 10px;
}
::-webkit-scrollbar:hover {
	width: 12px;
}
::-webkit-scrollbar-track {
	background: transparent;
	opacity: .4;
}
::-webkit-scrollbar-thumb {
	background: rgb(0, 0, 0, .4);
	border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
	background: rgb(0, 0, 0, .6);
}
	@media (max-width: 800px) {
		::-webkit-scrollbar {
			height: 8px;
			width: 5px;
		}
	}

/* Cargando */
#cargando {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9998;
	background: url("../gif/cargando.gif") 50% 50% no-repeat rgb(249,249,249);
	opacity: .8;
}

/* Generico */
*,
*::before,
*::after {
	box-sizing: border-box;
}
.oculto {
	display: none;
}
:root {
	/* Colores */
	--color-primary: #c78858;
	--color-primary-opaque: #c7885829;
	--color-grey: #a5a5a5;
	--color-lightgrey: #efecec;
	--color-darkgrey: #747474;
	--color-lightblack: #474747;

	/* Fuentes texto */
	--font-family-primary: system-ui;

	/* Tamaños texto */
	--font-size-xs: .75rem;
	--font-size-sm: .875rem;
	--font-size-base: 1rem;
	--font-size-md: 1.125rem;
	--font-size-lg: 1.25rem;
	--font-size-xl: 1.5rem;
	--font-size-2xl: 1.875rem;
	--font-size-3xl: 2.25rem;
	--font-size-hero: 3rem;

	/* Tamaños icono */
	--icon-size-xxs: .5rem;
	--icon-size-xs: 1rem;
	--icon-size-sm: 1.15rem;
	--icon-size-base: 1.4rem;
	--icon-size-md: 1.4rem;
	--icon-size-lg: 1.6rem;
	--icon-size-xl: 2rem;
	--icon-size-2xl: 2.5rem;
	--icon-size-3xl: 3rem;
	--icon-size-hero: 4rem;

	/* Padding icono */
	--icon-padding-xs: .3rem;
	--icon-padding-sm: .4rem;
	--icon-padding-base: .5rem;
	--icon-padding-lg: .625rem;
	--icon-padding-xl: .8rem;

	/* Padding botones */
	--button-padding-xs: .3rem .4rem;
	--button-padding-sm: .3rem .8rem;
	--button-padding-base: .5rem 1rem;
	--button-padding-md: .625rem 1.25rem;
	--button-padding-lg: 1.2rem 3.5rem;

	/* Radio botones */
	--button-border-radius-sm: 15px;
	--button-border-radius-base: 18px;
	--button-border-radius-lg: 21px;
	--button-border-radius-round: 50%;

	/* Alto linea */
	--line-height-sm: 30px;
	--line-height-base: 35px;
	--line-height-lg: 40px;

	/* Sombra */
	--box-shadow: 0px 4px 8px rgba(0, 0, 0, .4);
	--box-shadow-up: 0px -4px 8px rgba(0, 0, 0, .4);
}
@media (max-width: 800px) {
	:root {
		/* Tamaños texto */
		--font-size-xs: 0.4455rem;
		--font-size-sm: 0.63149625rem;
		--font-size-base: 0.72171rem;
		--font-size-md: 0.81192375rem;
		--font-size-lg: 0.9021375rem;
		--font-size-xl: 0.993465rem;
		--font-size-2xl: 1.17400625rem;
		--font-size-3xl: 1.3565475rem;
		--font-size-hero: 1.98693rem;

		/* Tamaños icono */
		--icon-size-xxs: 0.3rem;
		--icon-size-xs: 0.6237rem;
		--icon-size-sm: 0.75735rem;
		--icon-size-base: 1.010394rem;
		--icon-size-md: 1.010394rem;
		--icon-size-lg: 1.154736rem;
		--icon-size-xl: 1.3365rem;
		--icon-size-2xl: 1.804275rem;
		--icon-size-3xl: 2.16513rem;
		--icon-size-hero: 2.88684rem;

		/* Padding icono */
		--icon-padding-xs: 0.243rem;
		--icon-padding-sm: 0.324rem;
		--icon-padding-base: 0.405rem;
		--icon-padding-lg: 0.50625rem;
		--icon-padding-xl: 0.648rem;

		/* Padding botones */
		--button-padding-xs: .2rem .3rem;
		--button-padding-sm: 0.243rem 0.648rem;
		--button-padding-base: 0.405rem 0.81rem;
		--button-padding-md: 0.50625rem 1.0125rem;
		--button-padding-lg: 0.972rem 2.835rem;

		/* Radio botones */
		--button-border-radius-sm: 12.15px;
		--button-border-radius-base: 14.58px;
		--button-border-radius-lg: 17.01px;
		--button-border-radius-round: 50%;

		/* Alto linea */
		--line-height-sm: 18px;
		--line-height-base: 22.5px;
		--line-height-lg: 25px;

		/* Sombra */
		--box-shadow: 0px 3.24px 6.48px rgba(0, 0, 0, .4);
		--box-shadow-up: 0px -3.24px 6.48px rgba(0, 0, 0, .4);
	}
}
/* Textos */
h1, h2, h3, p, a, span, button {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}
	h2 {
		font-size: var(--font-size-xl);
	}
	h3 {
		font-size: var(--font-size-lg);
	}
		h2, h3 {
			font-weight: 500;
		}
	p, td {
		font-size: var(--font-size-md);
	}
	a, span, button {
		font-size: var(--font-size-base);
	}
	button {
		border-radius: var(--button-border-radius-base);
		padding: var(--button-padding-base)
	}
a {
	text-decoration: none;
	cursor: pointer;
}
input {
	font-size: var(--font-size-sm);
}
/* Iconos */
i {
	font-size: var(--icon-size-base);
	color: inherit;
}
	i.true {
		color: #4caf50;
	}
	i.false {
		color: #f44336;
	}
	i.star {
		color: #e9d206;
	}
	i.inf {
		color: #26c6da;
	}
	i.pri {
		color: #ab47bc;
	}
	i.war {
		color: #FF9800;
	}
	i.fav {
		color: #ff0000!important;
	}
	i.male {
		color: #2CA1E8;
	}
	i.female {
		color: #E82CC5;
	}

/* Body */
body {
	overflow-y: hidden;
	overflow-x: hidden;
	margin: 0;
    padding: 0;
	font-family: var(--font-family-primary);
	font-size: var(--font-size-base);
}
/* Notificaciones */
	#notifica {
		position: absolute;
		top: 82px;
		right: 20px;
		box-shadow: 0 4px 20px 0px rgba(0, 0, 0, .14), 0 7px 10px -5px rgba(0, 188, 212, .4);
		color: #ffffff;
		z-index: 1000;
		padding: 20px 15px;
		border-radius: 3px;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		opacity: 0;
		transform: translate3d(0, -250%, 0);
		max-width: 86dvw;
	}
		#notifica span {
			font-size: var(--font-size-sm);
		}
		#notifica i {
			font-size: var(--icon-size-sm);
			margin-left: 1.25rem;
			cursor: pointer;
		}
		#notifica.err {
			background-color: #F44336;
		}
		#notifica.war {
			background-color: #FF9800;
		}
		#notifica.suc {
			background-color: #4CAF50;
		}
		#notifica.inf {
			background-color: #63CCF6;
		}
		@keyframes fadeInDown {
			from {
			opacity: 0;
			transform: translate3d(0, -250%, 0);
			} to {
			opacity: 1;
			transform: none;
			}
		}
		@keyframes fadeOutUp {
			from {
				opacity: 1;
				transform: none;
			} to {
				opacity: 0;
				transform: translate3d(0, -250%, 0);
			}
		}
		#notifica.show {
			animation: fadeInDown;
			animation-duration: 1.5s;
			animation-fill-mode: forwards;
			opacity: 1;
			transform: none;
		}
		#notifica.remove {
			animation: fadeOutUp;
			animation-duration: 1.5s;
			animation-fill-mode: forwards;
			opacity: 0;
			transform: translate3d(0, -100%, 0);
		}
		@media (max-width: 800px) {
			#notifica {
				top: 172px;
				right: 35px;
				padding: 25px 20px;
			}
		}
	/* Pagina completa */
	#contenedor {
		height: 100dvh;
		width: 100dvw;
		margin: 0;
		padding: 0;
	}
		/* Barra Superior */
		#navegadorPc {
			height: 70px;
			margin: 0;
			padding: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #ffffff;
			border-bottom: 1px solid rgba(0, 0, 0, .1);
		}
			#navegadorPc div {
				display: flex;
				align-items: center;
			}
				#navegadorPc div img {
					height: 40px;
					margin-left: 2rem;
					cursor: pointer;
				}
				#navegadorPc div h1, #navegadorPc div span {
					margin-left: 2rem;
					padding-right: 1rem;
					font-family: Gogono;
					font-size: var(--font-size-xl);
				}
			#navegadorPc nav {
				display:flex;
				margin-right: 1rem;
				list-style-type: none;
			}
				#navegadorPc nav a {
					display: flex;
					align-items: stretch;
					margin-right: var(--icon-padding-lg);
					padding: var(--button-padding-md);
					border-radius: var(--button-border-radius-base);
				}
					#navegadorPc nav a i {
						margin-right: var(--icon-padding-lg);
					}
					#navegadorPc nav a:hover {
						background-color: #efeded;
					}
					#navegadorPc nav a.active {
						background-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
					}
			@media (max-width: 970px) {
				#navegadorPc div h1 {
					display: none;
				}
			}
			@media (max-width: 800px) {
				#navegadorPc {
					display: none;
				}
			}
		/* Contenido pagina */
		#contenido {
			height: calc(100dvh - 70px);
            display: grid;
			align-content: start;
			overflow-y: auto;
			overflow-x: hidden;
			background-color: #FFF8F3;
		}
			@media (max-width: 800px) {
				#contenido {
					height: calc(100dvh - 60px);
					padding-bottom: 25px;
				}
			}
			/* Titulo movil*/
			#tituloMovil {
				padding: 1rem;
				font-size: var(--font-size-2xl);
			}
				@media (min-width: 800px) {
					#tituloMovil {
						display: none!important;
					}
				}
			/* Secciones */
			section {
				margin: 0;
				padding: 0 2rem;
				display: flex;
				flex-direction: column;
			}
				section:not(:first-of-type) {
					margin-top: 3rem;
				}
				section header span {
    				font-size: var(--font-size-sm);
				}
				section > div {
					display: grid;
					gap: 1rem;
				}
					article, section > div > a {
						margin: 0;
						margin-top: 2rem;
						padding: 1.2rem;
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						background-color: white;
						box-shadow: var(--box-shadow);
						border-radius: var(--button-border-radius-sm);
						background-size: cover;
						background-position: center;
					}
						article > table {
							width: 100%;
						}
							article > table tbody tr {
								display: flex;
								padding: .5rem 0;
							}
							article > table tbody tr:not(:first-of-type) {
								border-top: .8px solid var(--color-lightgrey);
							}
								article > table tbody tr td {
									flex: 1;
									display: flex;
    								align-items: center;
								}
								article > table tbody tr td:not(:first-of-type) {
									font-size: var(--font-size-base);
									color: var(--color-darkgrey);
								}
									article > table tbody tr td i.material-icons {
										font-size: var(--icon-size-xs);
    									padding-right: var(--icon-padding-xl);
									}
				@media (max-width: 800px) {
					section {
						padding: 0 .5rem;
					}
						section:not(:first-of-type) {
							margin-top: 1rem;
						}
						section > div {
							gap: .5rem;
						}
							article, section > div > a {
								margin-top: 1rem;
								padding: .75rem;
							}
				}
			/* Filtros */
			.divFiltros {
				display: flex;
    			flex-direction: row;
				align-items: center;
				padding-top: 2rem;
			}
				.divFiltros div {
					width: 100%;
					display: flex;
					flex-direction: row;
					padding: .6rem;
					background-color: var(--color-lightgrey);
					border-radius: var(--button-border-radius-lg);
				}
					.divFiltros i {
						padding-left: var(--icon-padding-base);
						font-size: var(--icon-size-md);
					}
					.divFiltros input {
						width: 100%;
						border: 0;
						background-color: transparent;
						outline: none;
					}
				.divFiltros > i {
					cursor: pointer;
				}
			#divFiltrado {
				margin-top: 0;
				padding: 0 3rem;
			}
				#divFiltrado label {
					margin-top: 1rem;
				}
				#divFiltrado div {
					display: flex;
					flex-wrap: wrap;
					margin-top: .5rem;
				}
					#divFiltrado div button {
						padding: var(--button-padding-sm);
						border: 1px solid rgb(0,0,0,.1);
						cursor: pointer;
					}
						#divFiltrado div button.selected {
							border: 1px solid var(--color-primary);
							background-color: var(--color-primary);
							color: white;
						}
				@media (max-width: 800px) {
					.divFiltros {
						padding-top: 1rem;
					}
						#divFiltrado {
							padding: 0 1rem;
						}
				}
			/* Adopciones */
			.divAdopciones > div {
				grid-template-columns: repeat(5,minmax(0,  1fr));
			}
				.divAdopciones > div > a {
					position: relative;
					display: flex;
					flex-direction: column;
					padding: 0;
					padding-bottom: .5rem;
					background-color: rgb(255,255,255,.93);
				}
					.divAdopciones > div > a:hover {
						scale: 1.01;
						cursor: pointer;
					}
					.divAdopciones > div > a > span {
						display: flex;
						align-items: center;
						position: absolute;
						left: .6rem;
						top: .6rem;
						background-color: #f3f3f3;
						border-radius: var(--button-border-radius-sm);
						padding: var(--button-padding-xs);
						color: var(--color-darkgrey);
						font-size: var(--font-size-xs);
					}
						.divAdopciones > div > a > span i {
							font-size: var(--icon-size-xs);
							padding-right: var(--icon-padding-xs);
						}
					.divAdopciones button {
						position: absolute;
						right: .6rem;
						top: .6rem;
						padding: 0;
						border: 0;
						background-color: transparent;
						cursor: pointer;
					}
						.divAdopciones button i {
							background-color: #f3f3f3;
							border-radius: var(--button-border-radius-round);
							padding: var(--icon-padding-xs);
							color: var(--color-darkgrey);
							font-size: var(--icon-size-sm);
						}
							.divAdopciones button i:hover {
								scale: 1.1;
							}
					.divAdopciones img {
						flex: 1;
						width: 100%;
						border-radius: var(--button-border-radius-sm) var(--button-border-radius-sm) 0 0;
					}
					.divAdopciones h3, .divAdopciones p {
						display: flex;
						align-items: center;
						padding-left: 1rem;
						font-family: Montserrat;
					}
						.divAdopciones h3 span, .divAdopciones p {
							margin: .28rem 0;
							font-size: var(--font-size-xs);
							color: var(--color-darkgrey);
						}
						.divAdopciones h3 {
							width: 100%;
							margin: 1rem 0 .2rem 0;
						}
							.divAdopciones h3 i {
								margin-left: var(--icon-padding-xs);
								font-size: var(--icon-size-lg);
							}
							.divAdopciones h3 span {
								margin-left: auto;
								padding-right: .8rem;
							}
							.divAdopciones p:first-of-type {
								font-size: var(--font-size-sm);
							}
							.divAdopciones p i {
								margin-right: var(--icon-padding-xs);
								font-size: var(--icon-size-xs);
							}
				@media (max-width: 1300px) {
					.divAdopciones > div {
						grid-template-columns: repeat(4,minmax(0,  1fr));
					}
				}
				@media (max-width: 1100px) {
					.divAdopciones > div {
						grid-template-columns: repeat(3,minmax(0,  1fr));
					}
				}
				@media (max-width: 800px) {
					.divAdopciones > div {
						grid-template-columns: repeat(2, minmax(0, 1fr));
					}
						.divAdopciones > div > a > span {
							left: .3rem;
							top: .3rem;
						}
						.divAdopciones > div > a > i {
							right: .3rem;
    						top: .3rem;
						}
						.divAdopciones h3, .divAdopciones p {
							padding-left: .5rem;
						}
							.divAdopciones h3 {
								margin: .3rem 0 .1rem 0;
							}
								.divAdopciones h3 span {
									padding-right: .5rem;
								}
								.divAdopciones p {
									margin:.2rem 0;
								}
				}
		/* Pie de pagina */
		footer {
			width: 100%;
			margin-top: 6rem;
			background: linear-gradient(to bottom,rgba(20,20,25,.96),rgba(15,15,20,.98));
			color: white;
			border-top: 1px solid rgba(255,255,255,.06);
		}
			footer > div {
				padding: 20px 0;
			}
			footer > div:first-child {
				display: flex;
				flex-wrap: wrap;
				gap: 4rem;
				padding: 2rem;
			}
				footer div div {
					flex: 1;
					display: flex;
					flex-direction: column;
				}
					footer div div nav {
						display: flex;
						flex-direction: column;
						padding: 20px 50px;
    					gap: 1.4rem;
					}
						footer hr {
							width: 100%;
							margin: .5rem 0;
							border: 1px solid rgba(255, 255, 255, .2);
						}
			footer span {
				margin: 0 0 1rem 0;
				font-size: var(--font-size-xl);
				font-weight: 800;
				font-family: 'Gogono';
			}
			footer p {
				margin: 0;
				font-size: var(--font-size-base);
    			line-height: 1.5;
			}
			footer a {
				transition: opacity .2s ease, transform .2s ease;
				display: flex;
    			align-items: center;
			}
				footer a:hover {
					opacity: .75;
					transform: translateX(4px);
				}
				footer a i {
					margin-right: .5rem;
					text-align: center;
					width: 1.2rem;
    				font-size: 1.2rem !important;
				}
				footer hr ~ a {
					color: rgb(255, 255, 255, .7);
					font-size: var(--font-size-sm);
				}
		footer div.copyright {
			border-top: 1.5px solid rgba(255, 255, 255, .2);
			padding: 2rem;
			text-align: center;
		}
		@media (max-width: 1150px) {
			footer div.datos {
				gap: 1rem;
			}
		}
		@media (max-width: 800px) {
			footer {
				display: none;
			}
		}
		/* Navegacion movil */
		#navegadorMovil {
			height: 60px;
			display: flex;
			align-items: center;
			gap: .5rem;
			border-top: 1px solid rgba(0, 0, 0, .1);
		}
			#navegadorMovil a {
				flex: 1;
				display: flex;
				flex-direction: column;
    			align-items: center;
				font-size: var(--font-size-lg);
				color: var(--color-darkgrey);
			}
				#navegadorMovil a.active {
					color: var(--color-primary);
				}
				#navegadorMovil a i {
					font-size: var(--icon-size-lg);
					padding-bottom: .2rem;
				}
					#navegadorMovil a.active i {
						color: var(--color-primary);
					}
			@media (min-width: 800px) {
				#navegadorMovil {
					display: none;
				}
			}