/* ********************************** */
/*            SECTION HERO            */
/* ********************************** */
.hero-banner {
	background-image: url("../images/Resautanentepics/exterior%20poner.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	height: 100vh;
	background-attachment: fixed; /* Efecto Parallax (solo desktop) */
	position: relative;

	display: flex;
	align-items: center;
	z-index: 1;

	/* --- FIX móvil/tablet: sin parallax y mejor encuadre --- */
	@media (hover: none) and (pointer: coarse), (max-width: 992px) {
		background-attachment: scroll !important;     /* evita el “zoom/estirado” */
		background-position: center 20% !important;   /* muestra un poco más arriba */
	}

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7);
		z-index: -1;
	}

	& > div {
		display: flex;
		align-items: center;
		gap: 100px;
	}

	.content {
		flex: 1.5;
		display: flex;
		flex-direction: column;
		gap: 15px;

		h1 {
			width: 90%;
			font-size: 50px;
			text-transform: uppercase;
			letter-spacing: -1px;
			line-height: 1.1;
			font-weight: 800;
			text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
			color: var(--color-light);

			span {
				color: var(--color-primary);
			}
		}

		p {
			font-size: 18px;
			line-height: 1.5;
		}

		.container-button {
			margin-top: 40px;
			align-self: flex-start;
		}
	}

	.container-images {
		flex: 1.5;
		position: relative;
		margin-top: 50px;

		.main-image {
			width: 100%;
			height: 100%;
			object-fit: cover;
			border-radius: 9999px;
		}

		.img-banner-1,
		.img-banner-2 {
			width: 170px;
			height: 170px;
			position: absolute;
			border-radius: 999px;
			border: 7px solid #fff;
		}

		.img-banner-1 {
			bottom: 10%;
			left: -12%;
			transform: translateY(-50%);
		}

		.img-banner-2 {
			transform: translateY(-50%) translateX(50%);
			right: 8%;
			top: 25%;
		}
	}

	@media (max-width: 992px) {
		padding-left: 15px;
		padding-right: 15px;
		height: auto;           /* ya no forzamos 100vh en tablet/móvil */
		padding-top: 140px;

		& > div {
			flex-direction: column;
			gap: 30px;
		}

		.content {
			order: -1;

			h1 { font-size: 50px; }
			p { font-size: 18px; }

			.container-button { margin-top: 20px; }
		}

		.container-images {
			order: 1;
			margin-top: 0;

			.main-image { height: 100%; }

			.img-banner-1 {
				width: 140px;
				height: 140px;
				left: -10%;
			}

			.img-banner-2 {
				width: 140px;
				height: 140px;
				right: 5%;
				top: 20%;
			}
		}
	}

	@media (max-width: 768px) {
		/* ajuste extra en móviles angostos */
		background-position: center 20% !important;

		.content {
			h1 { font-size: 30px; }
			p  { font-size: 16px; }
		}

		.container-images {
			padding: 0 20px;

			.main-image { height: 500px; }

			.img-banner-1,
			.img-banner-2 {
				width: 100px;
				height: 100px;
				border-width: 4px;
			}

			.img-banner-1 {
				bottom: 10%;
				left: -2%;
				transform: translateY(-50%);
			}

			.img-banner-2 {
				transform: translateY(-50%) translateX(50%);
				right: 12%;
				top: 25%;
			}
		}
	}
}
	@media (max-width: 768px) {
		.content {
			h1 {
				font-size: 30px;
			}

			p {
				font-size: 16px;
			}
		}

		.container-images {
			padding: 0 20px;

			.main-image {
				height: 500px;
			}

			.img-banner-1,
			.img-banner-2 {
				width: 100px;
				height: 100px;
				border-width: 4px;
			}

			.img-banner-1 {
				bottom: 10%;
				left: -2%;
				transform: translateY(-50%);
			}

			.img-banner-2 {
				transform: translateY(-50%) translateX(50%);
				right: 12%;
				top: 25%;
			}
		}
	}

/* ********************************** */
/*              ABOUT US              */
/* ********************************** */
.section-about {
	& > div {
		display: flex;
		align-items: center;
		gap: 120px;
	}

	.container-images {
		flex: 1;
		position: relative;

		.main-image {
			width: 100%;
			height: 100%;
			object-fit: cover;
			border-radius: 9999px;
		}

		.alt-image {
			width: 170px;
			height: 170px;
			object-fit: cover;
			border-radius: 999px;
			border: 7px solid #fff;

			position: absolute;
			bottom: 12%;
			left: -22%;
		}

		.card-info {
			border-radius: 15px;
			background-color: var(--color-primary);
			position: absolute;
			top: 20%;
			right: -20%;
			width: 170px;

			display: flex;
			flex-direction: column;
			gap: 15px;
			padding: 20px;

			i {
				color: var(--color-light);
				font-size: 26px;
			}

			h3 {
				color: var(--color-light);
				font-size: 18px;
				font-weight: 700;
			}
		}
	}

	.content {
		flex: 2;

		display: flex;
		flex-direction: column;
		gap: 10px;

		p {
			font-size: 18px;
			line-height: 1.4;
		}

		ul {
			display: flex;
			flex-direction: column;
			gap: 20px;
			margin: 30px 0;

			li {
				list-style: none;
				display: flex;
				gap: 10px;
				align-items: center;

				i {
					font-size: 10px;
					color: #333;
					background-color: var(--color-primary);
					padding: 5px;
					border-radius: 999px;
				}

				span {
					font-size: 18px;
				}
			}
		}

		.container-buttons {
			display: flex;
			gap: 20px;
			align-items: center;
		}
	}

	@media (max-width: 992px) {
		padding-left: 15px;
		padding-right: 15px;

		& > div {
			flex-direction: column;
			gap: 30px;
		}

		.container-images {
			order: 1;

			.main-image {
				height: 600px;
			}

			.alt-image {
				width: 140px;
				height: 140px;
				left: -18%;
			}

			.card-info {
				padding: 15px;
				h3 {
					font-size: 16px;
				}
			}
		}

		.content {
			order: -1;
			ul {
				li {
					span {
						font-size: 16px;
					}
				}
			}
		}
	}

	@media (max-width: 768px) {
		.container-images {
			padding: 0 20px;

			.main-image {
				height: 100%;
			}

			.alt-image {
				width: 100px;
				height: 100px;
				left: 2%;
				bottom: 5%;
				border-width: 4px;
			}

			.card-info {
				top: 10%;
				right: 0;
			}
		}

		.content {
			p {
				font-size: 16px;
			}
		}
	}
}

/* ********************************** */
/*             MAIN DISHES            */
/* ********************************** */
.section-main-dishes {
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;

		h2 {
			text-align: center;
			width: 70%;
		}

		.container-dishes {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 20px;
			margin: 50px 0;
		}

		.container-dish {
			padding: 15px;
			display: flex;
			flex-direction: column;

			img {
				width: 70%;
				margin-bottom: 20px;
				border-radius: 999px;
				align-self: center;
			}

			.dish-info {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 20px;

				h3 {
					color: var(--color-light);
					font-size: 22px;
				}

				p {
					text-align: center;
					line-height: 1.4;
					font-size: 18px;
				}
			}
		}

		.dish-link {
			color: var(--color-light);
			font-size: 18px;

			a {
				text-decoration: underline;
				color: var(--color-primary);
				transition: color 0.3s;

				&:hover {
					color: var(--color-light);
				}
			}
		}
	}

	@media (max-width: 992px) {
		padding-left: 15px;
		padding-right: 15px;

		.content {
			.container-dishes {
				grid-template-columns: repeat(2, 1fr);
				margin: 20px 0;
			}

			.container-dish {
				img {
					width: 160px;
					height: 160px;
				}

				.dish-info {
					h3 {
						font-size: 20px;
					}
				}
			}
		}
	}

	@media (max-width: 768px) {
		.content {
			.container-dishes {
				grid-template-columns: repeat(1, 1fr);
				gap: 0;
				margin: 0;
			}

			.container-dish {
				img {
					width: 120px;
					height: 120px;
				}

				.dish-info {
					h3 {
						font-size: 18px;
					}

					p {
						font-size: 16px;
					}
				}
			}

			.dish-link {
				font-size: 16px;
				text-align: center;
			}
		}
	}
}

/* ********************************** */
/*              OUR MENU              */
/* ********************************** */
.section-menu {
	.content {
		display: flex;
		flex-direction: column;
		gap: 10px;
		align-items: center;

		h2 {
			text-align: center;
			width: 60%;
		}
	}

	.container-tabs {
		margin: 60px 0;
		background-color: #363837;
		padding: 20px 40px;
		border-radius: 30px;

		display: flex;
		align-items: center;
		gap: 40px;

		button {
			background: none;
			border: none;
			color: var(--color-light);
			font-weight: 700;
			font-size: 14px;
			position: relative;
			cursor: pointer;

			&::after {
				content: '';
				position: absolute;
				width: 7px;
				height: 7px;
				border-radius: 999px;
				top: 50%;
				transform: translateY(-50%);
				right: -20px;
				background-color: var(--color-primary);
			}

			&:last-child::after {
				display: none;
			}

			&.active {
				color: var(--color-primary);
			}
		}
	}

	.container-dishes {
		display: none;
		grid-template-columns: repeat(2, 1fr);
		gap: 50px;
		width: 100%;

		&.active {
			display: grid;
		}

		.container-img {
			display: flex;
			align-items: center;

			img {
				width: 100px;
				height: 100px;
				object-fit: cover;
				border-radius: 999px;
			}
		}

		.container-dish {
			display: flex;
			align-items: center;
			gap: 20px;

			.info-dish {
				display: flex;
				flex-direction: column;
				gap: 10px;

				.row {
					display: flex;
					align-items: center;
					gap: 10px;

					h3 {
						color: var(--color-light);
						font-size: 20px;
						text-transform: uppercase;
					}

					.divider {
						width: 100%;
						height: 1px;
						background-color: var(--text-color);
					}

					span {
						background-color: var(--color-primary);
						color: var(--color-light);
						font-weight: 800;
						padding: 5px 25px;
						border-radius: 999px;
						text-align: center;
						font-size: 14px;
					}
				}

				p {
					font-size: 18px;
				}
			}
		}
	}

	@media (max-width: 992px) {
		padding-left: 15px;
		padding-right: 15px;

		.container-tabs {
			padding: 15px 10px;
			margin: 30px 0;
			overflow-x: auto;

			.tab {
				flex: 1;
			}
		}

		.container-dishes {
			&.active {
				grid-template-columns: repeat(1, 1fr);
			}

			.container-dish {
				.info-dish {
					width: 100%;

					.row {
						justify-content: space-between;

						h3 {
							font-size: 16px;
						}

						.divider {
							width: 50%;
						}
					}

					p {
						text-align: center;
					}
				}
			}
		}
	}

	@media (max-width: 768px) {
		.container-tabs {
			padding: 10px 15px;
			gap: 30px;

			.tab {
				font-size: 12px;
			}
		}

		.container-dishes {
			.container-dish {
				.info-dish {
					.row {
						h3 {
							font-size: 14px;
						}
					}

					p {
						font-size: 16px;
					}
				}
			}
		}
	}
}

/* ********************************** */
/*           OUR INGREDIENTS          */
/* ********************************** */
.section-our-ingredients {
	& > div {
		display: flex;
		align-items: center;
		gap: 80px;
	}

	.container-images {
		flex: 1;
		position: relative;
		padding-bottom: 64px; /* espacio para bajar la tarjeta en desktop */

		.main-image {
			width: 100%;
			height: 100%;
			object-fit: cover;
			padding-left: 50px;
		}

		/* ===== Tarjeta ajustada (no invade y se lee mejor) ===== */
		.card-customers {
			position: absolute;
			bottom: -24px;         /* ↓ más abajo para no tapar */
			left: 24px;

			background-color: var(--color-primary);
			width: 360px;          /* tamaño moderado en desktop */
			max-width: 42%;        /* nunca más del 42% del contenedor */
			height: auto;          /* se adapta al contenido */
			padding: 20px;
			border-radius: 15px;

			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 20px;
			z-index: 2;

			p {
				font-size: 18px;
				color: var(--color-light);
				font-weight: 800;
				text-align: center;
			}

			.images-customers {
				position: relative;
				width: 100%;
				height: 100%;

				img {
					width: 50px;
					height: 50px;
					position: absolute;
					border: 1px solid #fff;
					border-radius: 999px;
					object-fit: cover;

					&:nth-child(1) { left: 0; }
					&:nth-child(2) { left: 30px; }
					&:nth-child(3) { left: 60px; }
				}

				span {
					position: absolute;
					left: 90px;
					width: 48px;
					height: 48px;
					border-radius: 999px;
					border: 1px solid #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: var(--dark-color-divider);

					i { font-size: 20px; }
				}
			}
		}
	}

	.content {
		flex: 1.5;
		display: flex;
		flex-direction: column;
		gap: 10px;

		p {
			font-size: 18px;
			line-height: 1.4;
		}

		.container-options {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 20px;
			margin: 35px 0;

			.container-option {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 15px;

				i {
					font-size: 32px;
					color: var(--color-primary);
				}

				h3 {
					font-size: 20px;
					width: 65%;
					text-align: center;
					color: var(--color-light);
				}
			}
		}

		.container-button { align-self: flex-start; }
	}

	@media (max-width: 992px) {
		padding-left: 15px;
		padding-right: 15px;

		& > div {
			flex-direction: column;
			gap: 50px;
		}

		.content {
			order: -1;

			p { font-size: 16px; }

			.container-options {
				.container-option { h3 { font-size: 18px; } }
			}

			.container-button { align-self: center; }
		}

		.container-images {
			order: 1;
			padding-bottom: 40px; /* espacio en tablet */

			/* centrar imagen en pantallas chicas */
			.main-image { padding-left: 0; }

			.card-customers{
				left: 16px;
				bottom: 8px;         /* ↓ más abajo que antes */
				width: 70%;
				max-width: 420px;
				height: auto;
			}
		}
	}

	@media (max-width: 768px) {
		.content {
			.container-options {
				.container-option { i { font-size: 24px; } }
			}
		}

		/* centrada y más ancha en teléfono */
		.container-images .card-customers{
			left: 50%;
			transform: translateX(-50%);
			bottom: 6px;          /* ↓ pegadita al borde inferior */
			width: 88%;
			max-width: 440px;
			height: auto;

			p { font-size: 16px; }

			.images-customers {
				img { width: 44px; height: 44px; }
				span { width: 42px; height: 42px; left: 84px; }
			}
		}
	}
}

/* ********************************** */
/*            TESTIMONIALS            */
/* ********************************** */
.section-testimonials {
	background-image: url("../images/fondohonduras.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed; /* Efecto Parallax (solo desktop) */
	position: relative;
	z-index: 1;

	display: flex;
	align-items: center;

	/* ---- FIX: móvil/tablet (sin parallax) ---- */
	@media (hover: none) and (pointer: coarse), (max-width: 992px) {
		background-attachment: scroll !important; /* evita "estirado" */
		background-position: center 20% !important; /* muestra más parte superior */
	}

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7);
		z-index: -1;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;

		h2 {
			width: 60%;
			text-align: center;
		}

		.container-testimonials {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 50px;
			width: 90%;

			overflow-x: hidden;
			scroll-snap-type: x mandatory;
			scroll-behavior: smooth;
			position: relative;

			.testimonial {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 20px;

				transition: transform 0.3s ease-in-out;
				flex: 0 0 100%;
				scroll-snap-align: center;

				.quote-icon {
					width: 50px;
					height: 50px;
				}

				p {
					text-align: center;
					font-size: 28px;
					width: 70%;
					line-height: 1.5;
				}

				img {
					width: 60px;
					height: 60px;
					object-fit: cover;
					border-radius: 999px;
				}

				h3 {
					color: var(--color-primary);
				}
			}
		}

		.carousel-wrapper {
			position: relative;
			display: flex;
			justify-content: center;

			.btn-carousel {
				border: 1px solid var(--color-primary);
				background: none;
				width: 50px;
				height: 50px;
				border-radius: 999px;
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				cursor: pointer;
				transition: background-color 0.3s;

				top: 50%;
				transform: translateY(-50%);

				i {
					color: var(--color-primary);
					font-size: 18px;
				}

				&.btn-prev { left: 0; }
				&.btn-next { right: 0; }

				&:hover {
					background-color: var(--color-primary);
					i { color: var(--color-light); }
				}
			}
		}
	}

	@media (max-width: 992px) {
		padding-left: 15px;
		padding-right: 15px;

		.content {
			gap: 10px;

			h2 { width: 80%; }

			.container-testimonials {
				margin-top: 10px;
				.testimonial {
					p { font-size: 22px; }
					h3 { font-size: 20px; }
				}
			}
		}
	}

	@media (max-width: 768px) {
		/* reencuadre extra en móviles angostos */
		background-position: center 20% !important;

		.content {
			h2 { width: 90%; }

			.container-testimonials {
				.testimonial {
					p { font-size: 16px; width: 100%; }
					h3 { font-size: 18px; }
				}
			}

			.carousel-wrapper {
				padding-bottom: 50px;

				.btn-carousel {
					width: 40px;
					height: 40px;
					bottom: -20px;
					top: auto;

					&.btn-prev { left: 40%; }
					&.btn-next { right: 40%; }
				}
			}
		}
	}

	@media (max-width: 576px) {
		.content {
			.carousel-wrapper {
				.btn-carousel {
					&.btn-prev { left: 35%; }
					&.btn-next { right: 35%; }
				}
			}
		}
	}
}