@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');



 body {
 	font-family: "Ubuntu", sans-serif;
 	font-size: 1.2rem;
 	background-color: black;
 }

 /* For all section's title */
 .section-title {
 	font-size: 3rem;
 }

 /* Navigation */
 .logo {
 	font-weight: 900;
 	font-size: 1.5rem;
 }

 .nav-item {
 	margin: 0 20px;
 	color: white;
 }

 .navbar {
 	opacity: 0;
 	visibility: hidden;
 	transition: opacity 0.6s ease-in, visibility 0.6s ease-in;
 }

 .navbar.visible {
 	opacity: 1;
 	visibility: visible;
 }

 /* Main Section */
 #main {
 	height: 100vh;
 	min-height: 100vh;
 	position: relative;
 	top: 0 !important;
 	margin: 0;
 	padding: 0;
 	scroll-snap-align: start;
 }

 .container-text {
 	color: #FFFFFF;
 	font-size: 2.7rem;
 	animation: filling 3s ease infinite alternate;
 	font-weight: 900;
 	position: relative;
 	left: 7%;
 }

 .header-main {
 	margin-top: 20px;
 }

 @keyframes filling {
 	from {
 		background-position: center 0%;
 	}

 	to {
 		background-position: center 100%;
 	}
 }

 /* Contenedor del botón "Mis compras" con imagen de perfil */
 #purchases-link {
 	text-align: center;
 	margin-top: 5px;
 }

 #purchases-link a {
 	display: inline-flex !important;
 	align-items: center;
 	gap: 10px;
 	font-size: 0.9em;
 	color: white;
 	text-decoration: none;
 	background-color: #093c6f;
 	padding: 5px 12px 5px 7px;
 	border-radius: 50px;
 	position: relative;
 	border: 3px solid #000;
 	box-shadow: 3px 3px 0 #000;
 	transition: transform 0.3s, box-shadow 0.3s;
 }

 #purchases-link a:hover {
 	transform: translate(-2px, -2px);
 	box-shadow: 5px 5px 0 #000;
 }

 /* Imagen de perfil dentro del botón */
 #user-profile-mini {
 	width: 40px;
 	height: 40px;
 	border-radius: 50%;
 	border: 2px solid white;
 	object-fit: cover;
 	display: inline-block;
 	flex-shrink: 0;
 }

 /* Ocultar la imagen de perfil grande original */
 #user-image {
 	display: none !important;
 }

 /* Ocultar botón de login cuando está autenticado */
 #login-button.hidden {
 	display: none !important;
 }

 /* Estilos responsive para móviles */
 @media (max-width: 600px) {
 	.container-text {
 		color: #FFFFFF;
 		font-size: 2.5rem;
 		animation: filling 3s ease infinite alternate;
 		font-weight: 900;
 		position: relative;
 		left: 18px;
 	}

 	#login-button {
 		display: none;
 		top: 11%;
 		right: 6%;
 		background-color: #0000005c;
 		color: white;
 		padding: 11px 13px;
 		border-radius: 10px;
 		cursor: pointer;
 		font-size: 0.8em;
 		border: solid 1px #ffffff5c;
 		font-family: "Ubuntu", sans-serif;
 	}

 	#view-purchases {
 		font-size: 0.8em;
 		color: white;
 		text-decoration: none;
 		background-color: rgba(0, 123, 255, 0.36);
 		padding: 11px 13px;
 		border-radius: 5px;
 		position: relative;
 	}

 	#purchases-link {
 		position: relative;
 		top: calc(14% + 40px);
 		right: 1%;
 		width: auto;
 		white-space: nowrap;
 	}

 	#purchases-link a {
 		font-size: 1em;
 		padding: 5px 12px 5px 7px;
 	}

 	#user-profile-mini {
 		width: 35px;
 		height: 35px;
 	}
 }

 /* Estilos para desktop */
 @media (min-width: 1025px) {
 	#login-button {
 		display: none;
 		position: absolute;
 		top: 42.5%;
 		right: -20%;
 		background-color: #0000005c;
 		color: white;
 		padding: 11px 13px;
 		border-radius: 10px;
 		cursor: pointer;
 		font-size: 0.8em;
 		border: solid 1px #ffffff5c;
 	}

 	#view-purchases {
 		font-size: 0.8em;
 		color: white;
 		text-decoration: none;
 		background-color: rgba(0, 123, 255, 0.36);
 		padding: 2px 5px;
 		border-radius: 5px;
 		position: relative;
 	}

 	.container-text {
 		color: #FFFFFF;
 		font-size: 2.7rem;
 		animation: filling 3s ease infinite alternate;
 		font-weight: 900;
 		position: relative;
 		left: 7%;
 	}

 	#purchases-link {
 		position: fixed;
 		top: calc(5.5% + 30px);
 		right: 6%;
 		width: auto;
 	}

 	#purchases-link a {
 		font-size: 0.9em;
 		padding: 5px 12px 5px 7px;
 	}

 	#user-profile-mini {
 		width: 45px;
 		height: 45px;
 	}
 }

 /* Barra inferior */
 #barra-inferior {
 	position: fixed;
 	bottom: 2%;
 	left: 0;
 	width: 100%;
 	margin: 0;
 	border-radius: 6px;
 	display: none;
 	justify-content: center;
 	align-items: center;
 	box-sizing: border-box;
 	z-index: 9;
 	text-align: center;
 	transition: opacity 1s ease-in, transform 0.3s ease;
 	opacity: 0;
 }

 /* Contenedor de botones en desktop */
 #barra-inferior>div:first-child {
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: center;
 	width: 100%;
 }

 /* En móviles, los botones se apilan verticalmente */
 @media (max-width: 768px) {
 	#barra-inferior {
 		padding: 8px 15px;
 	}

 	#barra-inferior>div:first-child {
 		display: flex;
 		flex-direction: row;
 		justify-content: center;
 		align-items: center;
 		width: 100%;
 		flex-wrap: nowrap;
 		gap: 1rem;
 	}

 	#barra-inferior a {
 		font-size: 1.5em !important;
 		width: 100%;
 		padding: 12px 20px !important;
 		text-align: center;
 	}
 }

 /* En pantallas grandes, los botones están uno al lado del otro */
 @media (min-width: 769px) {
 	#barra-inferior>div:first-child {
 		flex-direction: row;
 	}
 }

 #barra-inferior i {
 	color: rgb(255 255 255 / 71%);
 	font-size: 1.5rem;
 	border-radius: 50%;
 	justify-content: center;
 	align-items: center;
 	width: 50px;
 	height: 50px;
 	text-align: center;
 	line-height: 50px;
 	display: inline-grid;
 }



 #barra-inferior a {
 	color: #fff;
 	padding: 5px 10px;
 	font-size: 0.9em;
 	cursor: pointer;
 	transition: transform 0.3s, box-shadow 0.3s;
 	font-weight: 300;
 	border: 3px solid #000;
 	box-shadow: 3px 3px 0 #000;
 	border-radius: 10px;
 	text-decoration: none;
 	border: solid 1px;
 }

 #barra-inferior a:hover {
 	transform: translate(-2px, -2px);
 	box-shadow: 5px 5px 0 #000;
 	background-color: white;
 	color: black;
 }

 #barra-inferior #redes {
 	text-align: center;
 }

 #barra-inferior #redes a {
 	box-shadow: none;
 	border: none;
 	text-align: center;
 	align-content: center;
 }

 #barra-inferior #redes .fab {
 	font-size: 0.9em;
 	width: 30px;
 	padding: 0;
 	height: 30px;
 	align-content: center;
 }

 .header-info {
 	font-weight: 900;
 	font-size: 3rem;
 	color: #fff;
 }

 .btn-outline-light {
 	margin-left: 20px;
 }

 .btn-space {
 	margin-top: 20px;
 }

 /* Overview */
 .info-width {
 	width: 100%;
 	max-width: 300px;
 	font-size: 1.1rem;
 	line-height: 1.5;
 }

 .overview-icon {
 	font-size: 3rem;
 	color: #5a34fc;
 }

 .overview-row {
 	margin-top: 2rem;
 }

 @media (min-width: 992px) {
 	.overview-row {
 		margin-top: 3rem;
 	}
 }

 .overview-header {
 	font-weight: 900;
 }

 .overview-icon,
 .overview-header,
 .info-width {
 	padding: 0.5rem 0;
 }

 @media (min-width: 992px) {
 	.overview-header {
 		font-size: 2rem;
 	}

 	.info-width {
 		font-size: 1.6rem;
 		max-width: 600px;
 	}
 }

 /* Testimonials */
 #testimonials {
 	background-color: #111;
 	padding: 100px 0;
 	min-height: auto;
 }

 .carousel-item {
 	padding: 5% 10%;
 }

 @media (min-width: 992px) {
 	.carousel-item {
 		padding: 5% 5%;
 	}
 }

 .carousel-item h3 {
 	font-size: 1.8rem;
 	max-width: 800px;
 	margin: 0 auto;
 }

 .sinfila-logo-test {
 	width: 80px;
 	border-radius: 20px;
 	transition: width 0.3s ease;
 }

 @media (min-width: 992px) {
 	#testimonials h1 {
 		font-size: 5rem !important;
 		letter-spacing: 4px;
 	}

 	.sinfila-logo-test {
 		width: 180px;
 	}

 	.carousel-item h3 {
 		font-size: 3.5rem;
 		max-width: 100%;
 	}

 	.carousel-item p {
 		font-size: 1.6rem;
 	}
 }

 /* Carousel Arrows adjustment */
 .carousel-control-prev,
 .carousel-control-next {
 	width: 60px;
 	opacity: 0.8;
 }

 /* Move arrows further out on desktop */
 @media (min-width: 1200px) {
 	.carousel-control-prev {
 		left: -80px;
 	}

 	.carousel-control-next {
 		right: -80px;
 	}

 	/* Ensure the container doesn't clip the arrows if moved out */
 	#testimonials .container {
 		overflow: visible;
 	}
 }

 /* Ensure arrows don't overlap text on small screens by adding horizontal padding */
 .carousel-item {
 	padding-left: 15% !important;
 	padding-right: 15% !important;
 }

 @media (min-width: 992px) {
 	.carousel-item {
 		padding-left: 10% !important;
 		padding-right: 10% !important;
 	}
 }

 /* Pricing */
 #pricing {
 	margin-top: 100px;
 	padding: 100px 0;
 }

 .pricing-title {
 	margin-bottom: 100px;
 }

 .card {
 	box-shadow: 0px 3px 63px -12px rgba(0, 0, 0, 0.75);
 	border-color: #5a34fc;
 	border-radius: 10px;
 }

 .card-body {
 	padding: 7% 0;
 }

 .pricing-text {
 	color: #5a34fc;
 	font-size: 2rem;
 	font-weight: bold;
 	padding: 5% 0%;
 }

 .btn-block {
 	font-size: 1.5rem;
 }

 /* Call To Action */
 /* ========================================
   CTA SECTION - LIMPIA Y PROFESIONAL
   ======================================== */

 #cta {
 	background: #0a0a0a;
 	padding: 0;
 	position: relative;
 	overflow: hidden;
 	min-height: 100vh;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }

 .cta-wrapper {
 	max-width: 900px;
 	margin: 0 auto;
 	padding: 4rem 2rem;
 	position: relative;
 	z-index: 2;
 }

 .cta-content-center {
 	text-align: center;
 }

 /* Logo animado */
 .logo-cta {
 	width: 120px;
 	height: 120px;
 	margin: 0 auto 2rem;
 	animation: logoFloat 4s ease-in-out infinite;
 }

 .logo-cta svg {
 	width: 100%;
 	height: 100%;
 	filter: drop-shadow(0 0 20px rgba(0, 255, 136, 0.5));
 }

 @keyframes logoFloat {

 	0%,
 	100% {
 		transform: translateY(0);
 	}

 	50% {
 		transform: translateY(-15px);
 	}
 }

 /* Títulos */
 .cta-main-title {
 	font-size: 4.5rem;
 	font-weight: 900;
 	color: transparent;
 	background: linear-gradient(135deg, #00ff88 0%, rgb(64, 255, 67) 100%);
 	-webkit-background-clip: text;
 	background-clip: text;
 	margin-bottom: 1rem;
 	line-height: 1.1;
 	animation: titleGlow 3s ease-in-out infinite;
 }

 @keyframes titleGlow {

 	0%,
 	100% {
 		filter: brightness(1);
 	}

 	50% {
 		filter: brightness(1.2);
 	}
 }

 .cta-main-subtitle {
 	font-size: 2rem;
 	color: #ffffff;
 	margin-bottom: 1.5rem;
 	font-weight: 600;
 }

 .cta-main-description {
 	font-size: 1.3rem;
 	color: #a0a0a0;
 	line-height: 1.7;
 	margin-bottom: 3rem;
 	max-width: 800px;
 	margin-left: auto;
 	margin-right: auto;
 }


 /* Botones de acción */
 .cta-actions {
 	display: flex;
 	gap: 1.5rem;
 	justify-content: center;
 	flex-wrap: wrap;
 }

 .btn-explore,
 .btn-contact {
 	display: inline-flex;
 	align-items: center;
 	gap: 0.8rem;
 	padding: 1.3rem 3rem;
 	border-radius: 50px;
 	font-size: 1.2rem;
 	font-weight: 600;
 	text-decoration: none;
 	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 	position: relative;
 	overflow: hidden;
 }

 .btn-explore {
 	background: linear-gradient(135deg, #00ff88 0%, #00d9ff 100%);
 	color: #000;
 	box-shadow: 0 10px 40px rgba(0, 255, 136, 0.4);
 }

 .btn-explore::before {
 	content: '';
 	position: absolute;
 	top: 0;
 	left: -100%;
 	width: 100%;
 	height: 100%;
 	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
 	transition: left 0.6s;
 }

 .btn-explore:hover::before {
 	left: 100%;
 }

 .btn-explore:hover {
 	transform: translateY(-4px);
 	box-shadow: 0 15px 50px rgba(0, 255, 136, 0.6);
 }

 .btn-explore .arrow-icon {
 	width: 20px;
 	height: 20px;
 	transition: transform 0.3s;
 }

 .btn-explore:hover .arrow-icon {
 	transform: translateX(5px);
 }

 .btn-contact {
 	background: transparent;
 	color: #fff;
 	border: 2px solid rgba(255, 255, 255, 0.3);
 	backdrop-filter: blur(10px);
 }

 .btn-contact:hover {
 	background: rgba(37, 211, 102, 0.1);
 	border-color: #25d366;
 	transform: translateY(-4px);
 	box-shadow: 0 10px 40px rgba(37, 211, 102, 0.3);
 }

 .whatsapp-icon {
 	width: 24px;
 	height: 24px;
 	color: #25d366;
 }

 /* Background gradient */
 .cta-background-gradient {
 	position: absolute;
 	top: 0;
 	left: 0;
 	width: 100%;
 	height: 100%;
 	background: radial-gradient(ellipse at 50% 30%,
 			rgba(0, 255, 136, 0.15) 0%,
 			transparent 50%),
 		radial-gradient(ellipse at 80% 70%,
 			rgba(0, 217, 255, 0.1) 0%,
 			transparent 50%);
 	z-index: 1;
 	animation: gradientShift 15s ease infinite;
 }

 @keyframes gradientShift {

 	0%,
 	100% {
 		opacity: 0.8;
 		transform: scale(1);
 	}

 	50% {
 		opacity: 1;
 		transform: scale(1.1);
 	}
 }

 /* Responsive */
 @media (max-width: 768px) {
 	.logo-cta {
 		width: 80px;
 		height: 80px;
 	}

 	.cta-main-title {
 		font-size: 2.8rem;
 	}

 	.cta-main-subtitle {
 		font-size: 1.5rem;
 	}

 	.cta-main-description {
 		font-size: 1rem;
 	}

 	.cta-services {
 		flex-direction: column;
 		align-items: center;
 	}

 	.service-pill {
 		width: 100%;
 		max-width: 280px;
 		justify-content: center;
 	}

 	.cta-actions {
 		flex-direction: column;
 		width: 100%;
 	}

 	.btn-explore,
 	.btn-contact {
 		width: 100%;
 		max-width: 320px;
 		justify-content: center;
 	}
 }

 @media (max-width: 480px) {
 	.cta-main-title {
 		font-size: 2.2rem;
 	}

 	.btn-explore,
 	.btn-contact {
 		padding: 1.1rem 2rem;
 		font-size: 1.1rem;
 	}
 }

 /* Footer */
 #footer {
 	height: 200px;
 }

 .footer-icon {
 	font-size: 2rem;
 	color: #5a34fc;
 	padding: 5% 3%;
 }

 /* Media Queries */
 @media only screen and (max-width: 768px) {
 	.iphone-mock {
 		display: none;
 	}

 	.card {
 		margin: 20px 0;
 	}

 	.header-info {
 		font-size: 2rem;
 	}

 	.btn-outline-light {
 		margin-left: 0px;
 	}

 	#footer {
 		height: 70px;
 	}
 }

 /* Aviso banner alert */
 #spinnerFondo canvas {
 	position: absolute;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
 }

 /* ========================================
   COMPACT INFO GRID - ULTRA COMPACT
   ======================================== */

 .info-grid-compact {
 	display: grid;
 	grid-template-columns: repeat(2, 1fr);
 	gap: 0.8rem;
 	max-width: 600px;
 	margin: 0 auto;
 	padding: 0 10px;
 }

 .info-item-compact {
 	background: #111;
 	border: 1px solid #333;
 	border-radius: 8px;
 	padding: 0.8rem 0.5rem;
 	text-align: center;
 	transition: all 0.3s;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
 }

 .info-item-compact:hover {
 	border-color: #666;
 	transform: scale(1.02);
 }

 .info-icon-compact {
 	width: 32px;
 	height: 32px;
 	margin: 0 auto 0.4rem;
 	background: #fff;
 	border-radius: 50%;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }

 .info-icon-compact i {
 	font-size: 0.9rem;
 	color: #000;
 }

 .info-item-compact h4 {
 	font-size: 0.75rem;
 	font-weight: 700;
 	color: #fff;
 	margin-bottom: 0.2rem;
 	text-transform: uppercase;
 	letter-spacing: 0.5px;
 }

 .info-item-compact p,
 .info-item-compact a {
 	font-size: 0.7rem;
 	color: rgba(255, 255, 255, 0.7);
 	margin: 0;
 	line-height: 1.2;
 }

 .info-item-compact a {
 	text-decoration: underline;
 }

 .info-item-compact a:hover {
 	color: rgba(255, 255, 255, 1);
 }

 /* Desktop: Still compact but legible */
 @media (min-width: 768px) {
 	.info-grid-compact {
 		grid-template-columns: repeat(4, 1fr);
 		gap: 1rem;
 		max-width: 900px;
 	}

 	.info-item-compact {
 		padding: 1rem 0.8rem;
 	}

 	.info-icon-compact {
 		width: 45px;
 		height: 45px;
 		margin-bottom: 0.6rem;
 	}

 	.info-icon-compact i {
 		font-size: 1.2rem;
 	}

 	.info-item-compact h4 {
 		font-size: 0.9rem;
 	}

 	.info-item-compact p,
 	.info-item-compact a {
 		font-size: 0.8rem;
 	}
 }

 /* ========================================
   OVERVIEW SECTION - CONSOLIDATED
   ======================================== */

 #overview {
 	background: #000;
 	padding: 50px 0 70px;
 	color: white;
 	position: relative;
 	scroll-snap-align: start;
 }

 .overview-main-title {
 	color: rgba(255, 255, 255, 0.9);
 	font-size: 1.5rem;
 	font-weight: 600;
 	text-align: center;
 	margin-bottom: 2rem;
 	letter-spacing: 1px;
 }

 /* Carousel in Overview */
 .overview-carousel-wrapper {
 	max-width: 900px;
 	margin: 0 auto 1rem;
 	position: relative;
 }

 .carousel-img-wrapper {
 	background: #0a0a0a;
 	border-radius: 12px;
 	overflow: hidden;
 	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
 }

 .carousel-img-overview {
 	width: 100%;
 	height: 350px;
 	object-fit: cover;
 	display: block;
 }

 /* Carousel Description */
 .carousel-description-overview {
 	border-radius: 8px;
 	text-align: center;
 }

 .carousel-description-overview p {
 	color: rgba(255, 255, 255, 0.9);
 	font-size: 0.95rem;
 	font-weight: 400;
 	margin: 0;
 	line-height: 1.5;
 }

 /* Carousel Indicators */
 .carousel-indicators-overview {
 	position: relative;
 	bottom: auto;
 	margin-top: 1.2rem;
 	margin-bottom: 0;
 }

 .carousel-indicators-overview li {
 	width: 8px;
 	height: 8px;
 	border-radius: 50%;
 	background-color: rgba(255, 255, 255, 0.3);
 	border: none;
 	margin: 0 5px;
 	transition: all 0.3s ease;
 }

 .carousel-indicators-overview li.active {
 	background-color: #fff;
 	width: 24px;
 	border-radius: 4px;
 }

 /* Carousel Controls */
 .carousel-control-overview {
 	width: 35px;
 	height: 35px;
 	background: rgba(0, 0, 0, 0.5);
 	border-radius: 50%;
 	top: 50%;
 	transform: translateY(-50%);
 	opacity: 0;
 	transition: all 0.3s ease;
 }

 .overview-carousel-wrapper:hover .carousel-control-overview {
 	opacity: 0.7;
 }

 .carousel-control-overview:hover {
 	opacity: 1 !important;
 	background: rgba(0, 0, 0, 0.7);
 }

 .carousel-control-prev.carousel-control-overview {
 	left: 10px;
 }

 .carousel-control-next.carousel-control-overview {
 	right: 10px;
 }

 /* Info Grid Adjustments */
 .info-grid-compact {
 	margin-top: 0;
 }

 /* ========================================
   FLOATING LOCATION BUTTON
   ======================================== */

 #floating-location-btn {
 	position: fixed;
 	/* Center logic */
 	left: 50%;
 	transform: translateX(-50%) translateY(100px);
 	/* Start hidden below */
 	bottom: 30px;

 	background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
 	color: white;
 	padding: 12px 24px;
 	/* Reduced padding slightly */
 	border-radius: 50px;
 	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
 	display: flex;
 	align-items: center;
 	gap: 10px;
 	text-decoration: none;
 	font-size: 0.95rem;
 	font-weight: 600;
 	z-index: 999;
 	border: 1px solid #333;
 	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 	/* Bouncy effect */
 	opacity: 0;
 	pointer-events: none;
 }

 #floating-location-btn i {
 	font-size: 1.2rem;
 	color: #fff;
 }

 #floating-location-btn:hover {
 	background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
 	transform: translateX(-50%) scale(1.05);
 	/* Keep centered on hover */
 	box-shadow: 0 6px 30px rgba(0, 0, 0, 0.7);
 }

 /* Show/Hide States */
 .floating-location-visible {
 	opacity: 1 !important;
 	transform: translateX(-50%) translateY(0) !important;
 	/* Slide up to position */
 	pointer-events: auto !important;
 }

 .floating-location-hidden {
 	opacity: 0 !important;
 	transform: translateX(-50%) translateY(100px) !important;
 	/* Slide down to hide */
 	pointer-events: none !important;
 }

 /* Responsive Desktop */
 @media (min-width: 768px) {
 	#overview {
 		padding: 60px 0 80px;
 	}

 	.overview-main-title {
 		font-size: 1.8rem;
 		margin-bottom: 2.5rem;
 	}

 	.carousel-img-overview {
 		height: 450px;
 	}

 	.carousel-description-overview {
 		padding: 1.2rem 1.5rem;
 	}

 	.carousel-description-overview p {
 		font-size: 1rem;
 	}

 	.carousel-control-overview {
 		width: 45px;
 		height: 45px;
 	}

 	.carousel-control-prev.carousel-control-overview {
 		left: 15px;
 	}

 	.carousel-control-next.carousel-control-overview {
 		right: 15px;
 	}

 	#floating-location-btn {
 		bottom: 40px;
 		padding: 14px 28px;
 		font-size: 1rem;
 	}

 	#floating-location-btn i {
 		font-size: 1.3rem;
 	}
 }

 /* Responsive Mobile */
 @media (max-width: 767px) {
 	#overview {
 		padding: 40px 0 50px;
 	}

 	.overview-main-title {
 		font-size: 1.3rem;
 		margin-bottom: 1.5rem;
 	}

 	.carousel-img-overview {
 		height: 250px;
 		border-radius: 10px;
 	}

 	.carousel-img-wrapper {
 		border-radius: 10px;
 	}

 	.carousel-description-overview {
 		padding: 0rem 1rem;
 	}

 	.carousel-description-overview p {
 		font-size: 1.15rem;
 	}

 	.carousel-indicators-overview {
 		margin-top: 1rem;
 	}

 	.carousel-control-overview {
 		width: 30px;
 		height: 30px;
 	}

 	.carousel-control-prev.carousel-control-overview {
 		left: 5px;
 	}

 	.carousel-control-next.carousel-control-overview {
 		right: 5px;
 	}

 	#floating-location-btn {
 		bottom: 30px;
 		padding: 10px 20px;
 		font-size: 0.9rem;
 	}

 	#floating-location-btn i {
 		font-size: 1.1rem;
 	}

 	#floating-location-btn span {
 		display: inline;
 	}
 }

 .pop-art-banner {
 	position: fixed;
 	top: 45%;
 	left: 50%;
 	transform: translate(-50%, -50%);
 	width: 80%;
 	max-width: 500px;
 	background: #00000078;
 	border: 8px solid #000;
 	box-shadow: 0 0 0 4px #fff, 0 0 0 8px #000, 10px 10px 0 #000;
 	padding: 20px;
 	text-align: center;
 	color: white;
 	z-index: 1000;
 }

 .pop-art-banner h2 {
 	font-size: 1em;
 	margin-bottom: 15px;
 	text-transform: uppercase;
 	letter-spacing: 2px;
 	text-shadow: 3px 2px 1px rgb(0 0 0);
 }

 .pop-art-banner p {
 	font-size: 0.8em;
 	margin-bottom: 20px;
 	line-height: 1.4;
 }

 .pop-art-banner button {
 	background-color: #2f387a;
 	color: #fff;
 	border: none;
 	padding: 5px 10px;
 	font-size: 1em;
 	cursor: pointer;
 	transition: transform 0.3s, box-shadow 0.3s;
 	text-transform: uppercase;
 	font-weight: bold;
 	border: 3px solid #000;
 	box-shadow: 3px 3px 0 #000;
 }

 .pop-art-banner button:hover {
 	transform: translate(-3px, -3px);
 	box-shadow: 6px 6px 0 #000;
 }

 .close-btn {
 	position: absolute;
 	top: 10px;
 	right: 10px;
 	font-size: 1.5em;
 	background: none;
 	border: none;
 	cursor: pointer;
 	color: #000;
 }

 /* ========================================
   SCROLL SNAP - Secciones imantadas
   ======================================== */

 /* Aplicar scroll snap al body/html */
 html {
 	scroll-snap-type: y mandatory;
 	scroll-behavior: smooth;
 	overflow-y: scroll;
 }

 body {
 	scroll-snap-type: y mandatory;
 }

 /* Cada sección se "engancha" al viewport */
 #main,
 #overview,
 #testimonials,
 #cta {
 	scroll-snap-align: start;
 	scroll-snap-stop: always;
 	min-height: 100vh;
 	position: relative;
 }

 /* Corrección para #main - eliminar el desplazamiento negativo */
 #main {
 	top: -2rem !important;
 	padding-top: 0;
 }

 /* Para móviles, hacer el snap más suave */
 @media (max-width: 768px) {
 	html {
 		scroll-snap-type: y mandatory;
 		overscroll-behavior: auto;
 	}

 	body {
 		scroll-snap-type: y mandatory;
 		overscroll-behavior: auto;
 	}
 }

 /* Para tablets y desktop, mantener el snap estricto */
 @media (min-width: 769px) {
 	html {
 		scroll-snap-type: y mandatory;
 	}

 	body {
 		scroll-snap-type: y mandatory;
 	}
 }