/*==============================
  * CSS TABLE CONTENT *  
==============================
01. GOOGLE FONT
02. BASE
03. REUSABLE CSS CLASSES
04. HEADER & NAV
05. HOME
06. ABOUT
07. SKILLS
08. PROJECTS
09. CONTACT
10. FOOTER
11. BREAKPOINTS. MEDIA QUERIES.
==============================
  * END TABLE CONTENT *  
==============================
*/
/* ============= BASE ==================================================================== */
html {
	box-sizing: border-box;
	scroll-behavior: smooth;
	*,
	*::before,
	*::after {
		box-sizing: inherit;
	}
	body {
		font-family: 'Poppins', sans-serif;
		font-size: 16px;
		margin: 0;
		color: light-dark(#111, #ffffffcc);
	}
	ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	a {
		text-decoration: none;
	}

	img {
		max-width: 100%;
		height: auto;
		display: block;
	}
}

/* ============= REUSABLE CLASSES ======================================================= */
.section {
	padding: 4rem 0;
	.section__title {
		text-align: center;
		margin: 20px;
		color:white;
	}
}

.grid--container {
	max-width: 1024px;
	display: grid;
	margin: 0 auto;
	padding: 0 20px;
}

.flex--container {
	display: flex;
	justify-content: center;
	align-items: center;
}

.btn {
	display: inline-block;
	padding: 1.5rem 4rem;
	border: none;
	outline: none;
	border-radius: 5px;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
	color: light-dark(#fafafa, #6a6a6a);
	background-color: light-dark(#111, #ffffffcc);

	&:hover {
		transform: translateY(-4px);
		box-shadow: 0px 3px 10px #ee991a;
	}
}

.btn--primary {
	color: light-dark(#111, #ffffffcc);
	background-color: light-dark(#e0e0e0, #6a6a6a);
}

::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: light-dark(#ca5c13, #6a6a6a);
	border-radius: 4px;
}

/* ============= Header & NavBar =============================================================== */

.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 60px;
	align-content: center;
	background-color: transparent;
	z-index: 2;
	animation: animation-bar linear both;
	animation-timeline: scroll(root block);
	animation-range: 0 200px;

	.navbar {
		justify-content: space-between;

		.navbar__logo {
			column-gap: 0.25rem;
			font-weight: 600;
			color: light-dark(#111, #ffffffcc);
		}

		.navbar__menu {
			position: fixed;
			top: -600%;
			left: 0;
			width: 100%;
			border-radius: 0 0 12px 12px;
			background-color: light-dark(#fafafa, #6a6a6a);
			box-shadow: 0px 1px 9px 2px #00000024;
			padding: 2rem 0;
			transition: all 0.6s;
			z-index: 2;

			&:target {
				top: 0;
			}

			.navbar__list {
				flex-direction: column;
				gap: 20px;
/*==================================================================================================*/
/* ===== SUBMENU ===== */
.navbar__item {
	position: relative; /* 👈 clave */
  font-family: 'walcorg-nasalization';
	.submenu {
		position: absolute;
		top: 100%;
		left: 0;
		background-color: gray;
		min-width: 115px;
		padding: 10px 0;
		display: flex;
		flex-direction: column;
		gap: 5px;

		opacity: 0;
		visibility: hidden;
		transform: translateY(-10px);
		transition: all 0.3s ease;

		z-index: 1000;

		li a {
			color: white;
			padding: 8px 20px;
			font-size: 14px;
			display: block;
			transition: 0.3s;
		}

		li a:hover {
			color: #ee991a;
		}
	}

	/* HOVER DESKTOP */
	&:hover .submenu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
}
/*==================================================================================================*/
			}

			.btn__close {
				position: absolute;
				top: 16px;
				right: 16px;
				background-color: light-dark(#eee, #111);
				width: 38px;
				height: 38px;
				border-radius: 50%;

				&:hover {
					background-color: #dfdfdf;
				}
			}
		}

		}
		}
	
	.btn__open,
	.btn__close,
	.navbar__logo i {
		font-size: 2.2rem;
		color: light-dark(#111, #ffffffcc);
		transition: 0.3s;
	}
	.btn__open {
		&:hover {
			background-color: #dfdfdf;
		}
	}


@keyframes animation-bar {
	to {
		background-color: light-dark(#fafafa, #6a6a6a);
		backdrop-filter: blur(5px);
		box-shadow: 0px 10px 100px #0000001a;
	}
}

/* ============= Home =============================================================== */
/* HERO */
.hero {
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 100vh;
  padding: 60px;
  gap: 40px;
}

/* TEXTO */
.hero__content {
  flex: 1;
  max-width: 500px;
}

/* TITULO GRANDE */
.hero__title {
  font-family: 'walcorg-cargo';
  color:rgb(46, 223, 22);
  font-size: 64px;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 20px;
}

/* TEXTO PEQUEÑO */
.hero__description {
  font-size: 16px;
  color: #aaa;
  margin-bottom: 30px;
  line-height: 1.6;
}

/* BOTON */
.hero__btn {
  display: inline-block;
  padding: 12px 28px;
  border: 1px solid white;
  color: white;
  text-decoration: none;
  font-size: 14px;
  transition: 0.3s;
}

.hero__btn:hover {
  background: white;
  color: black;
}

/* IMAGEN */
.hero__image {
  flex: 1;
  display: flex;
  justify-content: center;
}

.hero__image img {
  width: 100%;
  max-width: 500px;
  object-fit: contain;
}


/* ============= About ============================================================================== */
.about {
	  font-family: 'walcorg-nasalization';
	background-color: black;
	overflow: hidden;
	.about__container {
		.about__description {
			text-align: center;
		}
		.about__cards {
			margin-top: 2rem;
			flex-direction: column;
			gap: 2rem;
			.about__card {
				background-color: green;			
				border-radius: 5px;
				box-shadow: 0px 10px 100px #0000001a;
				.about__card--img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
		}
	}
}

/* ============= skills ======================================================================== */
.skills {
	background-color: light-dark(#eee, #111);
	background-image: url(../img/test01.jpg);
	.skills__container {
		.skills__description {
			text-align: center;
		}
		/* SLIDER  */
		.skills__wrapper {
			.skills__cards {
				display: flex;
				flex-direction: column;
				gap: 1rem;
				width: 100%;

				.skills__cards-container {
					/*background-color: light-dark(#111, #ffffffcc);*/ 
					/*agregar efecto de cristal*/
					background: linear-gradient(135deg ,rgba(255, 255, 255, 0.1), rgba(225, 255, 255, 0));
					backdrop-filter: blur(10px);
					-webkit-backdrop-filter: blur(10px);					
					height: 100px;
					padding: 20px;
					border-radius: 1rem;
					text-align: center;
					width: inherit;
					transition: 0.5s cubic-bezier(0.6, -0.28, 0.735, 0.045);
					overflow: hidden;

					.skills__cards-title {
						list-style: none;
						cursor: pointer;
						height: 100%;
						align-items: start;

						.bx {
							width: 50px;
							background-color: light-dark(#fafafa, #6a6a6a);
							color: light-dark(#111, #ffffffcc);
							font-size: 3rem;
							border-radius: 50%;
							padding: 8px;
						}
					}
					.skills__card-container {
						color: light-dark(#fafafa, #6a6a6a);
						height: 300px;
						overflow: hidden;
					}

					&[open] {
						height: 400px;
						.skills__cards-title {
							height: auto;
						}
					}
				}
			}
		}
		.skills__tags {
			flex-direction: column;
			margin-top: 26px;
			.skills__tags-container {
				flex-wrap: wrap;
				gap: 1rem;
			}
			.skills__tag {
				display: inline-block;
				padding: 0.75rem 1.5rem;
				font-weight: 600;
				font-size: 12px;
				background-color: light-dark(#111111, #ffffffcc);
				color: light-dark(#fafafa, #6a6a6a);
				border-radius: 5px;
			}
		}
	}
}


/* FOOTER */
.footer {
  background: #0f1a24;
  color: #ccc;
  padding: 40px 20px;
  display: flex;
  justify-content: center;
}

.footer__container {
  max-width: 800px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* TITLE */
.footer__title {
  font-size: 28px;
  color: white;
}

/* TEXT */
.footer__text {
  font-size: 14px;
  color: #aaa;
}

/* FORM */
.footer__form {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1c2b38;
  border-radius: 50px;
  overflow: hidden;
  max-width: 500px;
  margin: 0 auto;
}

.footer__form input {
  flex: 1;
  padding: 12px 16px;
  border: none;
  outline: none;
  background: transparent;
  color: white;
}

.footer__form input::placeholder {
  color: #888;
}

/* BUTTON */
.footer__form button {
  background: #ffcc33;
  color: white;
  border: none;
  padding: 12px 24px;
  cursor: pointer;
  transition: 0.3s;
}

.footer__form button:hover {
  background: #ff4d4d;
}

/* SOCIAL */
.footer__social {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.footer__social a {
  color: #888;
  text-decoration: none;
  font-size: 14px;
  transition: 0.3s;
}

.footer__social a:hover {
  color: white;
}

/* COPY */
.footer__copy {
  font-size: 12px;
  color: #666;
}


/* ============= Media Queries ======================================================================== */

@media (width >= 820px) {
	:root {
		--header-height: 90px;
		--normal-font-size: 18px;
		--small-font-size: 14px;
	}

	.header {
		.navbar {
			.navbar__menu {
				position: static;
				border-radius: 0;
				background-color: transparent;
				box-shadow: none;

				.navbar__list {
					flex-direction: row;
				}
				.btn__close {
					display: none;
				}
/*=========================================================*/
				/* SUBMENU EN DESKTOP */
.navbar__item {

	.submenu {
		position: absolute;
		top: 40px;
		left: 0;
		background-color: black;
	}
}
/*=========================================================*/
			}
		}
		.btn__open {
			display: none;
		}
	}

	.home {
		.home__container {
			grid-template-columns: repeat(2, 1fr);
			grid-auto-rows: auto;

			.home__image {
				width: clamp(min(375px, 100%), 48vw, 500px);
				grid-column: 2 / 3;
				grid-row: 1 / 4;
				transform: translateY(3.3rem);
			}

			.home__social {
				position: relative;
				top: 0;
				left: 0;
				flex-direction: row;
				gap: 1.5rem;
				grid-row: 2 / 3;

				.home__social-link {
					font-size: 2rem;
				}
			}

			.home__info {
				.home__title {
					margin-top: 2rem;
					font-size: 2rem;
				}

				.home__description {
					font-size: 1.3rem;
					padding: 0 30px;
				}
			}
		}
	}

	.about {
		.about__container {
			.about__cards {
				flex-direction: row;

				.about__card {
					transition: transform 0.2s;

					&:nth-child(1) {
						transform: rotate(-0deg);
					}

					&:nth-child(3) {
						transform: rotate(0deg);
					}

					&:hover {
						z-index: 1;
						cursor: pointer;
						transform: scale(1.1);
					}
				}
			}
		}
	}

	.skills {
		.skills__container {
			/* SLIDER  */
			.skills__wrapper {
				.skills__cards {
					flex-direction: row;
					.skills__cards-container {
						height: 500px;
						width: 130px;
						&[open] {
							height: 500px;
							width: inherit;
						}
					}
				}
			}
		}
	}
.navbar__menu
  
	.footer {
		.footer__container {
			grid-template-columns: repeat(2, 1fr);
		}
	}
}

/* ========================= */
/* RESPONSIVE LANDING */
/* ========================= */
@media (max-width: 820px) {

  .hero {
    flex-direction: column; /* 👈 clave */
    text-align: center;
    padding: 40px 20px;
  }

  .hero__content {
    max-width: 100%;
  }

  .hero__image {
    order: -1; /* 👈 hace que la imagen suba arriba */
    width: 100%;
  }

  .hero__image img {
    width: 100%;
    max-width: 100%;
  }

  .hero__title {
    font-size: 42px;
  }

}


/* ========================= */
/* RESPONSIVE FOOTER */
/* ========================= */

@media (max-width: 600px) {

  .footer__form {
    flex-direction: column;
    border-radius: 12px;
  }

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

  .footer__form button {
    width: 100%;
  }

}

/*========================================================================*/
/* FONTS */
@font-face {
    font-family:'walcorg-cargo';
    src: url('../fonts/walcorg cargo.ttf');
}

@font-face {
    font-family:'walcorg-bgothm';
    src: url('../fonts/walcorg bgothm.ttf');
}

@font-face {
    font-family:'walcorg-calibri';
    src: url('../fonts/walcorg calibri.ttf');
}

@font-face {
    font-family:'walcorg';
    src: url('../fonts/walcorg consola.ttf');
}

@font-face {
    font-family:'walcorg'; 
    src: url('../fonts/walcorg ocraext.ttf');
}

@font-face {
    font-family:'walcorg-nasalization';
    src: url('../fonts/walcorg nasalization.otf');
}
/*=======================================================================*/