html {
     scroll-padding-top: 1rem !important;
 }

 body {
     margin: 0;
     padding: 0;
     font-family: var(--primary-font);
     font-weight: 600 !important;
     color: #2f2f2f !important;
 }

 body.customize-support .navbar {
     padding-top: 32px !important;
 }

 .side-app {
     min-height: calc(100vh - calc(2rem) - calc(2rem)) !important;
     padding-top: 0;
 }

 .navbar {
     /* background: rgba(0, 0, 0, 0.35) !important; */
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     height: var(--nav-height);
     z-index: 1030;
     transition: .3s;
     /* backdrop-filter: blur(4px); */
 }

 .navbar-toggler {
     border: unset !important;
     color: #ffffff00 !important;
 }

 .navbar-color {
     background-color: #161817de !important;
     -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
     backdrop-filter: saturate(250%) blur(25px) !important;
     transition: .5s;
 }

 .navbar li.nav-item {
     font-size: 16px;
     font-weight: 500;
 }

 .navbar a.nav-link {
     color: #000000;
     font-weight: 600;
 }

 .navbar-toggler {
     border: unset !important;
 }

 /* Hamburger icon animation */
 .navbar-toggler .toggler-icon {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     width: 20px;
     height: 15px;
     cursor: pointer;
 }

 .navbar-toggler .toggler-icon span {
     display: block;
     height: 3px;
     background: #ff7e00;
     border-radius: 2px;
     transition: all 0.3s ease;
 }

 .navbar-toggler.active .toggler-icon span:nth-child(1) {
     transform: rotate(45deg) translate(5px, 5px);
 }

 .navbar-toggler.active .toggler-icon span:nth-child(2) {
     opacity: 0;
 }

 .navbar-toggler.active .toggler-icon span:nth-child(3) {
     transform: rotate(-45deg) translate(5px, -5px);
 }

 .search-box {
     position: relative;
     width: 340px;
     max-width: 40vw;
     margin-right: 1rem;
     height: 30px;
     margin-top: 0.4rem;
 }

 .search-box input {
     border-radius: 2rem;
     font-size: 14px;
 }

 .search-box input::placeholder {
     font-weight: 700;
 }

 .search-box .fa-search {
     position: absolute;
     left: 10px;
     top: 50%;
     transform: translateY(-50%);
     color: #9aa0a6;
 }

 /* Main slider */
 .swiper-slide h1 {
     font-size: 3.8vw !important;
 }

 .swiper-slide p {
     font-size: 2vw !important;
 }


 .swiper-slide .text-category h1 {
     font-size: 48px !important;
 }

 .swiper-slide .text-category p {
     font-size: 22px !important;
 }

 .swiper.main-swiper {
     height: 100vh;
     min-height: 540px;
     position: relative;
     z-index: 1;
 }

 .swiper.main-swiper.category-swiper {
     height: 25vh;
     min-height: 340px;
     position: relative;
     z-index: 1;
 }

 .main-swiper .swiper-slide {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
 }

 .main-swiper img,
 .main-swiper video {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 .overlay {
     position: absolute;
     inset: 0;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: start;
     color: #fff;
     text-align: center;
     padding: 1.25rem 2rem;
     z-index: 10;
     background: linear-gradient(360deg, #00000000, #00000047, #00000094) !important;
 }

 @media (max-width: 768px) {
     .swiper.main-swiper.category-swiper .overlay {
         margin-top: 4rem !important;
     }

     .overlay {
         background: linear-gradient(357deg, #00000000, #0000006b) !important;
     }

     .swiper-slide .text-category h1 {
         font-size: 30px !important;
     }

     .swiper-slide .text-category p {
         font-size: 16px !important;
     }

     .swiper.main-swiper.category-swiper {
         height: 48vh;
     }
 }

 .main-swiper .swiper-slide video {
     z-index: 1;
     position: relative;
 }

 .main-prev,
 .main-next {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     z-index: 9;
     font-size: 1.6rem;
     color: #fff;
     opacity: 0.95;
     background: rgb(0 0 0 / 0%);
     width: 44px;
     height: 44px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 8px;
     user-select: none;
     cursor: pointer;
 }

 .main-prev {
     left: 12px;
 }

 .main-next {
     right: 12px;
 }

 .main-pagination {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     bottom: 8px;
     z-index: 9;
 }

 /* Content padding */
 .content {
     padding: calc(var(--nav-height) + 12px) 20px 40px;
 }

 /* Cards slider */
 .card-slider {
     position: relative;
     top: -220px;
     padding: 1rem 0rem .1rem 0rem;
     height: 30px;
 }

 @media (max-width: 768px) {
     .card-slider {
         top: 0;
         height: 100%;
     }
 }

 .cards-swiper {
     padding-bottom: 12px;
 }

 .cards-swiper .swiper-wrapper {
     padding-left: 3vw;
 }

 .cards-swiper .swiper-slide {
     width: auto;
     display: flex;
     justify-content: center;
     margin-right: 6px;
 }

 .cards-swiper .card {
     width: 280px;
     border-radius: .6rem;
     overflow: hidden;
     position: relative;
     border: unset;
     background: #ffffff00;
 }

 .cards-swiper .card-img-top {
     height: 170px;
     object-fit: cover;
     width: 100%;
     display: block;
 }

 .cards-prev.disabled,
 .cards-next.disabled {
     opacity: 0 !important;
     pointer-events: none !important;
 }

 .main-swiper .swiper-slide img,
 .main-swiper .swiper-slide video {
     filter: saturate(2.5);
 }

 .swiper-pagination-bullet {
     background: #0077ff;
     transition: width .5s ease-in-out, background-color .5s ease-in-out !important;
     opacity: 1;
     border-radius: 20px;
 }

 .swiper-pagination-bullet-active {
     background: #ff5722;
     width: 2rem;
     border-radius: 20px;
     transition: width .5s ease-in-out, background-color .5s ease-in-out !important;
 }



 .card-overlay {
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     padding: .6rem .75rem;
     background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0 0 0) 100%);
     color: #fff;
     text-align: left;
 }

 .cards-swiper .card-body {
     padding: .5rem .6rem;
 }

 .cards-prev,
 .cards-next {
     position: absolute;
     top: 40%;
     width: 40px;
     height: 40px;
     transform: translateY(-50%);
     color: white;
     z-index: 10;
     cursor: pointer;
     background: rgb(79 79 79 / 42%);
     border-radius: 2rem;
     box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
     justify-content: center;
     align-items: center;
     border: unset;
     transition: all 0.3s ease;
     backdrop-filter: saturate(260%) blur(30px) !important;
 }

 .cards-prev:hover,
 .cards-next:hover {
     background: rgba(0, 0, 0, 0.6);
     transform: translateY(-50%) scale(1.1);
     color: #ffffff;
 }

 .cards-prev {
     left: 10px;
 }

 .cards-next {
     right: 10px;
 }

 /* CIRCULAR OFFCANVAS */
 #mobileMenu {
     --x: 50%;
     --y: 50%;
     position: fixed;
     inset: 0;
     width: 100%;
     height: 100%;
     z-index: 2000;
     background: #000000de;
     color: #fff;
     clip-path: circle(0px at var(--x) var(--y));
     visibility: hidden;
     pointer-events: none;
     transition: clip-path .7s cubic-bezier(0.65, 0, 0.35, 1), backdrop-filter .7s ease, opacity .35s ease;
     opacity: 0;
     display: flex;
     flex-direction: column;
     backdrop-filter: blur(0px);
 }

 #mobileMenu.show {
     clip-path: circle(150% at var(--x) var(--y));
     visibility: visible;
     pointer-events: auto;
     opacity: 1;
     backdrop-filter: saturate(260%) blur(15px) !important;
 }

 #mobileMenu .offcanvas-header {
     border-bottom: 1px solid rgba(255, 255, 255, .06);
     padding: 1rem;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 #mobileMenu .offcanvas-title {
     display: flex;
     align-items: center;
     gap: .65rem;
     font-weight: 600;
     font-size: 1.05rem;
 }

 #mobileMenu .offcanvas-body {
     padding: 1rem;
     overflow: auto;
     flex: 1;
 }

 #mobileMenu .nav-link {
     color: #fff;
     padding: .45rem 0;
     display: block;
     text-decoration: none;
     cursor: pointer;
     transform: translateX(-50px);
     opacity: 0;
     transition: all .5s ease;
     font-weight: 600;
 }

 #mobileMenu .nav-link.show-letter {
     transform: translateX(0);
     opacity: 1;
 }

 #mobileMenu .btn-close.show-icon {
     transform: translateY(0);
     opacity: 1;
     transition: all .5s ease;
 }

 #mobileMenu .btn-close {
     transform: translateY(-20px);
     opacity: 0;
 }

 #mobileMenu .offcanvas-title img {
     /* width: 44px; */
     /* height: 44px; */
     /* border-radius: 6px; */
     /* object-fit: cover; */
     transform: translateY(-20px);
     opacity: 0;
     transition: all 0.5s ease;
 }

 #mobileMenu .offcanvas-title img.show-logo {
     transform: translateY(0);
     opacity: 1;
 }


 .submenu {
     max-height: 0;
     overflow: hidden;
     transition: max-height .33s ease;
     padding-left: .75rem;
 }

 .submenu.show {
     max-height: 400px;
 }

 .cards-swiper .card {
     height: 150px;
 }

 @media (max-width:768px) {
     .search-box {
         width: 165px;
     }

     .swiper-slide h1 {
         font-size: 7vw !important;
     }

     .swiper-slide p {
         font-size: 20px !important;
     }

     .swiper.main-swiper .main-prev,
     .swiper.main-swiper .main-next {
         top: 92% !important;
         display: none;
     }

     .swiper.main-swiper {
         height: 20vh !important;
         min-height: 380px !important;
         margin-top: 0rem;
     }

     .swiper.main-swiper.category-swiper {
         height: 20vh !important;
         min-height: 310px !important;
         margin-top: 0rem;
     }

     .navbar-brand img {
         width: 90px !important;
     }

     .offcanvas-title img {
         width: 90px;
     }

     .cards-swiper .card {
         height: 120px;
     }

     .cards-swiper .card .card-overlay h6 {
         font-size: 18px !important;
     }

 }

 /* GRIDS */
 .grid {
     position: relative;
     /* necesario para Masonry */
 }

 .grid-item {
     width: 49.2%;
     /* ancho base */
     margin-bottom: 15px;
     /* espacio vertical entre imágenes */
 }

 .grid img {
     width: 100%;
     display: block;
     border-radius: 8px;
 }

 /* Responsividad */
 @media (max-width: 1400px) {
     .grid-item {
         width: 48%;
     }
 }

 @media (max-width: 768px) {
     .grid-item {
         width: 100%;
     }
 }

 /* Zones Cards */

 /* --- Escritorio --- */
 @media(min-width: 768px) {
     .zones-container {
         display: flex;
         gap: 10px;
         height: 55vh;
         min-height: 500px;
     }

     .zone-card {
         flex-grow: 1;
         border-radius: 20px;
         overflow: hidden;
         position: relative;
         cursor: pointer;
         transition: flex-grow 0.6s ease, transform 0.3s ease, box-shadow 0.3s ease;
         background-size: cover;
         background-position: center;
         color: #fff;
         filter: saturate(1.5);
     }

     .zone-card,
     .parallax-bg {
         will-change: transform;
         transform: translateZ(0);
     }

     .zone-card:hover {
         flex-grow: 3;
         /*transform: scale(1.03);*/
         /* box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); */
     }

     .zone-title {
         position: absolute;
         top: 32px;
         left: 20px;
         font-size: 1.3rem;
         font-weight: bold;
         color: #fff;
         text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
         z-index: 2;
     }

     .zone-btn {
         position: absolute;
         bottom: 20px;
         left: 20px;
         width: 45px;
         height: 45px;
         border-radius: 2rem;
         background: #ffffff;
         color: #000000;
         display: flex;
         align-items: center;
         justify-content: center;
         font-weight: bold;
         text-decoration: none;
         overflow: hidden;
         white-space: nowrap;
         transition: all 0.4s ease;
         z-index: 2;
         /* backdrop-filter: saturate(260%) blur(30px) !important; */
     }

     .zone-btn span {
         display: none;
         margin-left: 5px;
         font-weight: bold;
         text-transform: none;
     }

     .zone-card:hover .zone-btn {
         width: 94%;
         margin: 0rem 1rem;
         height: 45px;
         left: 0;
         bottom: 20px;
         border-radius: 0;
         justify-content: center;
         background: #ffffff;
         color: #000000;
         border-radius: 2rem;
         /* backdrop-filter: saturate(260%) blur(30px) !important; */
     }

     .zone-card:hover .zone-btn span {
         display: inline-block;
     }
 }

 /* --- Móvil Swiper --- */
 @media(max-width:767.98px) {
     .zones-slide {
         width: 75%;
         height: 55vh;
         border-radius: .6rem;
         overflow: hidden;
         position: relative;
         margin-right: 10px;
         cursor: grab;
     }

     .zones-slide .parallax-bg {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-size: cover;
         background-position: center;
         border-radius: .6rem;
         transition: transform 0.3s ease;
         filter: saturate(1.5);
     }

     .swiper-slide-active .zones-slide .parallax-bg {
         transform: scale(1.05);
     }

     .zone-title {
         position: absolute;
         top: 32px;
         left: 20px;
         font-size: 1.3rem;
         font-weight: bold;
         color: #fff;
         text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
         z-index: 2;
     }

     .zone-btn {
         position: absolute;
         bottom: 20px;
         left: 0;
         width: 90%;
         height: 45px;
         background: #ffffff;
         margin: 0 1rem;
         border-radius: 2rem;
         color: #000000;
         font-weight: bold;
         font-size: 1.1rem;
         display: flex;
         align-items: center;
         justify-content: center;
         text-decoration: none;
         text-transform: none;
         z-index: 2;
         backdrop-filter: saturate(260%) blur(30px) !important;
     }

     .zone-btn i {
         margin-left: 5px;
     }
 }

 /* EVENTOS */

 /* Slider */
 .swiper.events {
     padding: 1rem 0;
     position: relative;
 }

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

 .event-card {
     width: 100%;
     aspect-ratio: 4 / 5;
     /* Tarjetas cuadradas */
     overflow: hidden;
     border-radius: .6rem;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }

 .event-card img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     /* Mantiene proporción */
     filter: saturate(1.1);
 }

 /* Botones de navegación */
 .events-buttons-prev,
 .events-buttons-next {
     display: none;
     /* Oculto por defecto en mobile */
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 40px;
     height: 40px;
     background: rgb(79 79 79 / 42%);
     border-radius: 50%;
     justify-content: center;
     align-items: center;
     color: white;
     cursor: pointer;
     z-index: 10;
     transition: all 0.3s ease;
     border: unset;
 }

 .events-buttons-prev {
     left: 10px;
     /* margen desde el borde */
 }

 .events-buttons-next {
     right: 10px;
 }

 .events-buttons-prev i,
 .events-buttons-next i {
     font-size: 16px;
     /* icono proporcional */
 }

 .events-buttons-prev:hover,
 .events-buttons-next:hover {
     background: rgba(0, 0, 0, 0.6);
     transform: translateY(-50%) scale(1.1);
     color: #ffffff;
 }

 /* Mostrar solo en desktop */
 @media (min-width: 768px) {

     .events-buttons-prev,
     .events-buttons-next {
         display: flex;
     }
 }

 /* Popular Cards */

 .card.card-popular {
     border-radius: .6rem;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     border: unset;
 }

 .card.card-popular .card-img-top {
     /* border-top-left-radius: 20px; */
     /* border-top-right-radius: 20px; */
     border-radius: 20px;
 }

 @media (max-width: 768px) {
     .card-popular .popular-slider {
         aspect-ratio: 3 / 2 !important;
     }
 }

 /*LATIDO */

 .heart-btn {
     /* width: 40px; */
     /* height: 40px; */
     /* background: #ffffff; */
     /* border-radius: 50%; */
     /* display: flex; */
     /* align-items: center; */
     justify-content: center;
     cursor: pointer;
     /* position: absolute; */
     top: 10px;
     right: 10px;
     /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); */
     z-index: 10;
     /* backdrop-filter: saturate(260%) blur(30px) !important; */
 }

 /* El corazón por defecto */
 .heart-btn i {
     font-size: 20px;
     color: #1a1a1a;
     transition: color 0.3s ease;
 }

 /* Cuando está activo → corazón rojo */
 .heart-btn.active i {
     color: #000000;
 }

 /* Animación de rebote */
 @keyframes bounce {
     0% {
         transform: scale(1);
     }

     30% {
         transform: scale(1.4);
     }

     50% {
         transform: scale(0.9);
     }

     70% {
         transform: scale(1.2);
     }

     100% {
         transform: scale(1);
     }
 }

 /* Clase temporal para activar rebote */
 .heart-animate {
     animation: bounce 0.4s ease;
 }

 .card-popular {
     border-radius: 0.75rem;
     overflow: hidden;
     position: relative;
 }

 .card-popular .popular-slider {
     width: 100%;
     aspect-ratio: 3 / 2;
     border-radius: inherit;
     overflow: hidden;
     position: relative;
 }

 .card-popular .popular-slider .swiper-slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: inherit;
 }

 /* Botones Bootstrap, ocultos por defecto */
 .popular-prev,
 .popular-next {
     width: 36px;
     height: 36px;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 10;
     opacity: 0;
     transition: opacity 0.3s;
 }

 /* Aparecen al hacer hover sobre el slider */
 .card-popular:hover .popular-prev,
 .card-popular:hover .popular-next {
     opacity: 1;
 }

 .popular-slider .swiper-pagination-bullet {
     opacity: 0.4;
     transition: all 0.3s;
 }

 .popular-slider .swiper-pagination-bullet-active {
     opacity: 1;
     transform: scale(1.2);
 }

 .card-popular .swiper-pagination-bullet-active {
     background: white;
 }

 .card-service {
     border-radius: 0.75rem;
     overflow: hidden;
     position: relative;
 }

 .card-service .service-slider {
     width: 100%;
     aspect-ratio: 3 / 2;
     border-radius: inherit;
     overflow: hidden;
     position: relative;
 }

 .card-service .service-slider .swiper-slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: inherit;
 }

 /* Botones Bootstrap, ocultos por defecto */
 .service-prev,
 .service-next {
     width: 36px;
     height: 36px;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 10;
     opacity: 0;
     transition: opacity 0.3s;
 }

 /* Aparecen al hacer hover sobre el slider */
 .card-service:hover .service-prev,
 .card-service:hover .service-next {
     opacity: 1;
 }

 .service-slider .swiper-pagination-bullet {
     opacity: 0.4;
     transition: all 0.3s;
 }

 .service-slider .swiper-pagination-bullet-active {
     opacity: 1;
     transform: scale(1.2);
 }

 .card-service .swiper-pagination-bullet-active {
     background: white;
 }


 /* FOOTER */

 .footer-content {
     background: #161817;
     padding: 2rem;
     color: #ffff;
 }

 .footer-content .list-unstyled li a {
     color: #979797;
 }

 .social-icon {
     width: 35px;
     height: 35px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     margin: 0 5px;
     transition: transform 0.3s;
     text-decoration: none;
 }

 .social-icon:hover {
     transform: scale(1.2);
 }

 .youtube {
     background: #FF0000;
 }

 .instagram {
     background: #E4405F;
 }

 .facebook {
     background: #1877F2;
 }


 /* CUSTOM NAVBAR */

 .custom-navbar {
     background: #23232300;
     /* border-radius: 4rem; */
     padding: 0.5rem 1rem;
     /* display: flex; */
     /* align-items: center; */
     /* justify-content: space-between; */
     width: 100%;
     max-width: 1350px;
     margin: 0 auto;
     position: fixed;
     top: 0px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 1000;

     /* transición suave */
     transition: all 0.5s cubic-bezier(.68, -0.55, .27, 1.55);
 }

 .navbar-menu {
     background-color: #00000000;
     border-radius: 0rem;
     width: 100%;
     max-width: 2000px;
     transition: all 0.5s cubic-bezier(.68, -0.55, .27, 1.55);
 }

 @media (max-width: 768px) {
     .navbar {
         background-color: #ffffff !important;
     }

     .custom-navbar {
         /* background-color: #0000000a; */
         border-radius: 0rem;
         width: 100%;
         max-width: 2000px;
         transition: all 0.5s cubic-bezier(.68, -0.55, .27, 1.55);
     }
 }

 .side-app-menu {
     padding-top: 5.5rem;
 }


 /* Estado reducido al hacer scroll */
 .custom-navbar.shrink {
     top: 20px;
     width: 90%;
     max-width: 800px;
     border-radius: 3rem;
     padding: 0.5rem 2rem;
     background: #000000d1;
     backdrop-filter: saturate(260%) blur(30px) !important;
 }

 .navbar.light-bg #logo-navbar {
     width: 110px;
 }

 .navbar.light-bg {
     background-color: #ffffff !important;
 }

 .animate-a {
     -webkit-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
     -moz-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
     -ms-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
     -o-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
     transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
 }

 .nav-links {
     position: relative;
     display: flex;
     gap: 1.5rem;
     font-weight: 600;
 }

 .nav-links::before {
     content: "";
     position: absolute;
     top: 0;
     left: -1rem;
     right: -1rem;
     bottom: 0;
     /* background: linear-gradient(90deg, rgb(0 123 255 / 48%), rgb(157 4 255 / 73%)); */
     filter: blur(20px);
     border-radius: 3rem;
     z-index: 0;
 }

 .nav-links a {
     color: #000000;
     text-decoration: none;
     position: relative;
     z-index: 1;
     transition: color 0.5s ease-in-out;
 }

 .navbar-link.white-link {
     color: #ffffff !important;
 }

 .btn-signin {
     border: 1px solid #ff7e00;
     border-radius: 2rem;
     color: #000000;
     padding: 0.3rem 1rem;
     background: #ff7e00;
     transition: all 0.3s;
     font-weight: 600;
 }

 .btn-signin:hover {
     background: #222;
     border-color: #888;
 }

 .menu-toggle {
     background: none;
     border: none;
     color: #fff;
     font-size: 1.5rem;
     display: none;
     cursor: pointer;
     z-index: 1100;
     padding: .2rem;
 }

 @media (max-width: 768px) {

     .nav-links {
         display: none;
     }

     .btn-signin {
         display: none;
     }

     .menu-toggle {
         display: block;
     }

     .logo-navbar {
         height: 58px;
     }
 }

 .logo-orange {
     filter: invert(23%) sepia(90%) saturate(7480%) hue-rotate(1deg) brightness(101%) contrast(105%);
 }

 /* Efecto ocultar solo en mobile */
 @media (max-width: 767px) {
     .navbar-hidden {
         transform: translate(-50%, -120%);
         opacity: 0;
     }

     .footer-menu-visible {
         opacity: 1;
     }
 }

 /* Footer menu para mobile */
 .mobile-footer {
     border-top: unset;
     width: 100%;
     max-width: 780px;
     margin: 0 auto;
     height: 75px;
     position: fixed;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     z-index: 1000;
     padding: 0.8rem 1rem;
     display: flex;
     justify-content: space-around;
     background: #ffffff;
     box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.2);
     /* sombra hacia arriba */
 }

 .mobile-footer a,
 .mobile-footer button {
     color: #333333;
     text-align: center;
     font-size: 1.2rem;
     font-weight: 700;
     text-decoration: none;
     flex: 1;
     border: unset;
     background: #ffffff00;
     padding: 5px;
 }

 .mobile-footer span {
     display: block;
     font-size: 0.7rem;
 }

 /* Por defecto oculto */
 .mobile-footer {
     display: none;
 }

 /* Solo visible en mobile */
 @media (max-width: 767px) {
     .mobile-footer {
         display: flex;
     }
 }

 .custom-navbar::after,
 .mobile-footer::after {
     content: "";
     position: absolute;
     top: -15px;
     left: -15px;
     right: -15px;
     bottom: -15px;
     border-radius: 2rem;
     background: radial-gradient(circle at center, rgba(0, 123, 255, 0.5), rgb(155 0 255 / 32%), rgba(255, 0, 150, 0.2), #bd81ff38 80%);
     filter: saturate(280%) blur(30px) !important;
     z-index: -1;
     opacity: 0;
     transition: opacity 0.4s ease;
 }


 /* Cuando aparece la navbar, hace un flash */
 .custom-navbar.flash-halo::after,
 .mobile-footer.flash-halo::after {
     animation: haloFlash 1s ease-in-out forwards;
 }


 @keyframes haloFlash {
     0% {
         opacity: 0;
     }

     5% {
         opacity: 0.15;
     }

     10% {
         opacity: 0.3;
     }

     15% {
         opacity: 0.45;
     }

     20% {
         opacity: 0.6;
     }

     25% {
         opacity: 0.7;
     }

     30% {
         opacity: 0.85;
     }

     35% {
         opacity: 0.95;
     }

     40% {
         opacity: 1;
     }

     45% {
         opacity: 0.9;
     }

     50% {
         opacity: 0.8;
     }

     55% {
         opacity: 0.7;
     }

     60% {
         opacity: 0.6;
     }

     65% {
         opacity: 0.5;
     }

     70% {
         opacity: 0.4;
     }

     75% {
         opacity: 0.3;
     }

     80% {
         opacity: 0.2;
     }

     85% {
         opacity: 0.15;
     }

     90% {
         opacity: 0.1;
     }

     95% {
         opacity: 0.05;
     }

     100% {
         opacity: 0;
     }
 }

 /* GALLERY SERVICES */

 /* Skeleton Loader */
 .skeleton {
     background-color: #e0e0e0;
     border-radius: 20px;
     width: 100%;
     height: 100%;
     animation: pulse 1.5s infinite ease-in-out;
     position: relative;
     overflow: hidden;
     min-height: 230px;
 }

 @keyframes pulse {
     0% {
         opacity: 1;
     }

     50% {
         opacity: 0.4;
     }

     100% {
         opacity: 1;
     }
 }

 /* Para ajustar los contenedores según tus clases */
 .row.gallery-service-row img {
     object-fit: cover;
     width: 100%;
     height: 100%;
     border-radius: 8px !important;
     max-height: 180px;
 }

 .grid-items-services-1 {
     max-height: 250px;
     position: relative;
 }

 .grid-items-services-2 {
     height: 220px;
     position: relative;
 }

 @media (max-width: 768px) {
     .principal-image-service {
         /* aspect-ratio: 1 / 1 !important; */
     }
 }

 /* BUTTONS */

 .btn {
     border-radius: 2rem;
 }

 .btn.btn-primary {
     background: #ff7e00;
     border: unset;
     padding: .4rem 2rem;
 }

 @media (max-width: 768px) {
     .btn.btn-primary.slider {
         padding: .4rem 1.5rem;
         font-size: 14px;
     }
 }


 /* Animaciones */

 animate */ .animate {
     animation-fill-mode: both;
     animation-duration: 0.5s;
 }

 .animate-reverse {
     animation-direction: reverse;
 }

 .animate-fast {
     animation-duration: 0.3s;
 }

 .animate-no-delay {
     animation-delay: 0s !important;
 }

 .animate-delay-1 {
     animation-delay: 0.5s;
 }

 .animate-delay-2 {
     animation-delay: 1s;
 }

 .animate-delay-3 {
     animation-delay: 1.5s;
 }

 .animate-delay-4 {
     animation-delay: 2s;
 }

 .sr .card,
 .sr .list-item,
 .sr .sr-item,
 .sr .item,
 .sr .alert {
     visibility: hidden;
 }

 .sr .list-item,
 .sr .sr-item,
 .sr .item {
     visibility: hidden;
 }

 @keyframes slideInLeft {
     from {
         transform: translate3d(-75%, 0, 0);
     }

     to {
         transform: translate3d(0, 0, 0);
     }
 }

 .slideInLeft {
     animation-name: slideInLeft;
 }

 @keyframes slideInRight {
     from {
         transform: translate3d(75%, 0, 0);
     }

     to {
         transform: translate3d(0, 0, 0);
     }
 }

 .slideInRight {
     animation-name: slideInRight;
 }

 @keyframes slideInUp {
     from {
         transform: translate3d(0, 75%, 0);
     }

     to {
         transform: translate3d(0, 0, 0);
     }
 }

 .slideInUp {
     animation-name: slideInUp;
 }

 @keyframes slideInDown {
     from {
         transform: translate3d(0, -75%, 0);
     }

     to {
         transform: translate3d(0, 0, 0);
     }
 }

 .slideInDown {
     animation-name: slideInDown;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 .fadeIn {
     animation-name: fadeIn;
 }

 @keyframes fadeInLeft {
     from {
         opacity: 0;
         transform: translate3d(-75%, 0, 0);
     }

     to {
         opacity: 1;
         transform: none;
     }
 }

 .fadeInLeft {
     animation-name: fadeInLeft;
 }

 @keyframes fadeInRight {
     from {
         opacity: 0;
         transform: translate3d(75%, 0, 0);
     }

     to {
         opacity: 1;
         transform: none;
     }
 }

 .fadeInRight {
     animation-name: fadeInRight;
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translate3d(0, 75%, 0);
     }

     to {
         opacity: 1;
         transform: none;
     }
 }

 .fadeInUp {
     animation-name: fadeInUp;
 }

 @keyframes fadeInDown {
     from {
         opacity: 0;
         transform: translate3d(0, -75%, 0);
     }

     to {
         opacity: 1;
         transform: none;
     }
 }

 .fadeInDown {
     animation-name: fadeInDown;
 }


 .js-Pjax-onswitch {
     position: relative !important;
     overflow: hidden !important;
 }

 .search-bar {
     border: 1px solid #cfd8dc;
     border-radius: 50px;
     overflow: hidden;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
     height: 2.3rem;
     min-width: 400px;
     transition: all 0.3s ease;
 }

 .search-bar:hover {
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }

 .search-bar .form-control {
     border: none;
     border-radius: 50px 0 0 50px;
     padding: 0.6rem 1.2rem;
     box-shadow: none;
     font-weight: 600;
     background: #ffffffe0;
     transition: 0.8s ease;
 }

 .search-bar .form-control:focus {
     outline: none;
     box-shadow: none;
     background: #ffffff;
     transition: 0.8s ease;
 }

 .search-bar .btn {
     border-radius: 2rem;
     margin: 0.2rem;
     font-weight: 600;
     padding: 0.1rem 2rem;
     color: #000;
 }


 .search-bar-menu {
     position: relative;
     top: 98px;
     background: #ffffff00;
     border: 1px solid #cfd8dc;
     border-radius: 50px;
     overflow: hidden;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
     height: 2.8rem;
     width: 100%;
     transition: all 0.3s ease;
     z-index: 300;
 }

 .search-bar-menu:hover {
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }

 .search-bar-menu .form-control {
     border: none;
     border-radius: 50px 0 0 50px;
     padding: 0.6rem 1.2rem;
     box-shadow: none;
     font-weight: 600;
     background: #ffffffe3;
     transition: all 0.3s ease;
 }

 .search-bar-menu .form-control:focus {
     outline: none;
     box-shadow: none;
     background: #ffffff;
     transition: all 0.3s ease;
 }

 .search-bar-menu .btn {
     border-radius: 2rem;
     margin: 0.2rem;
     font-weight: 600;
     padding: 0.1rem 2rem;
     color: #000;
 }

 .form-section {
     transition: all 0.3s ease;
 }

 .side-app.normal-page {
     margin-top: 5.5rem;
 }

 .service-slider img {
     object-fit: cover;
     width: 100%;
     height: auto;
 }

 .principal-image img {
     min-height: 385px !important;
 }

 .card-service img {
     /* min-height: 385px !important; */
 }

 .btn.btn-service {
     background: #ffffff;
     border: unset;
     padding: .4rem .9rem;
 }



 .btn-theme-red {
     background-color: #ED2076 !important;
 }

 .btn-theme-red:hover {
     background-color: #a30044 !important;
 }

 .btn-theme-dark {
     background-color: #020202 !important;
      color: #ebebeb;
 }

 .btn-theme-dark:hover {
     background-color: #1f1f1f !important;
 }

 .btn-theme-orange {
     background-color: #ff7e00 !important;
     color: #000000;
 }

 .btn-theme-orange:hover {
     background-color: #d17a00 !important;
 }

 .btn-theme-green {
     background-color: #04be30 !important;
 }

 .btn-theme-green:hover {
     background-color: #00711b !important;
 }

 .btn-theme-yellow {
     background-color: #ffa200 !important;
     color: #2c2c2c;
 }

 .btn-theme-yellow:hover {
     background-color: #c99500 !important;
     color: #2c2c2c;
 }

 .btn-theme-skyblue {
     background-color: #0274eb !important;
 }

 .btn-theme-skyblue:hover {
     background-color: #007ba1 !important;
 }

 .btn-theme-purple {
     background-color: #c81ef8 !important;
 }

 .btn-theme-purple:hover {
     background-color: #970abf !important;
 }

 .btn-theme-violet {
     background-color: #7f16e8 !important;
 }

 .btn-theme-violet:hover {
     background-color: #490093 !important;
 }

 .floating-results {
     background: #fff;
     border: 1px solid #ddd;
     border-radius: 0.5rem;
     max-height: 60vh;
     overflow-y: auto;
     z-index: 9999;
     display: none;
 }

 .floating-results .result-item {
     cursor: pointer;
     transition: background 0.2s ease;
 }

 .floating-results .result-item:hover {
     background: #f8f9fa;
 }

 .result-thumb {
     width: 40px;
     height: 40px;
     object-fit: cover;
     border-radius: 6px;
 }

 .search-bar-menu {
     position: relative;
 }

 .search-icon {
     position: absolute;
     left: 0.75rem;
     top: 50%;
     transform: translateY(-50%);
     color: #888;
     pointer-events: none;
     /* Para que el clic pase al input */
     font-size: 1rem;
 }

 .search-bar-menu input {
     padding-left: 2.5rem;
     /* Deja espacio para el icono */
 }

 .search-bar {
     position: relative;
 }

 .search-bar .search-icon {
     position: absolute;
     left: 0.75rem;
     top: 50%;
     transform: translateY(-50%);
     color: #888;
     pointer-events: none;
     font-size: 1rem;
 }

 .search-bar input {
     padding-left: 2.5rem;
     /* Deja espacio para el icono */
 }

 /* --- Estilo tipo "Bottom Sheet" --- */
 .user-bottom-sheet .modal-dialog {
     position: fixed;
     bottom: 0;
     margin: 0;
     width: 100%;
     transition: transform 0.3s ease-out;
     z-index: 1061;
     /* mayor que el backdrop */
 }

 .user-bottom-sheet .modal-content {
     border-radius: 1rem 1rem 0 0;
     padding: 1rem;
     background-color: #fff;
     z-index: 1062;
 }

 /* Efecto de aparición */
 .user-bottom-sheet.fade .modal-dialog {
     transform: translateY(100%);
 }

 .user-bottom-sheet.show .modal-dialog {
     transform: translateY(0);
 }

 /* Ajuste del backdrop (más tenue) */
 .modal-backdrop.show {
     opacity: 0.4;
     z-index: 100;
     /* menor que el modal */
 }

 .breadcrumb.breadcrumb-category .breadcrumb-item {
     color: #ffffff;
 }

 .breadcrumb.breadcrumb-category .breadcrumb-item a {
     color: #ffffff;
 }

 .breadcrumb.breadcrumb-category .breadcrumb-item::before {
     color: #ffffff;
 }

 .service-like {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: .35rem;
 }

 .service-like .btn i {
     transition: transform .2s ease, color .2s ease;
 }

 .service-like .btn:hover i {
     transform: scale(1.2);
     color: #dc3545;
 }

 .btn.like-btn {
     color: #000;
 }

 .btn.like-btn-disabled {
     color: #000;
 }

 .image-counter {
     font-size: 0.8rem;
     letter-spacing: 0.5px;
     backdrop-filter: blur(4px);
     z-index: 1000;
     position: absolute;
     top: 12px;
     background-color: #0000009c;
     border-radius: 2rem;
     color: #ffff;
     right: 12px;
     padding: .2rem .5rem;
 }

 .terms-links a {
     color: #bdbdbd;
 }

 /* -----------------------------
   CONTENEDOR GENERAL
----------------------------- */
 .swiper-lightbox {
     position: fixed;
     inset: 0;
     background: rgb(0 0 0);
     backdrop-filter: blur(3px);
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 99999;
     padding: 0;
 }

 /* -----------------------------
   CONTROLES SUPERIORES
----------------------------- */
 .lightbox-controls {
     position: absolute;
     top: 15px;
     left: 50%;
     transform: translateX(-50%);

     display: flex;
     align-items: center;
     gap: 10px;
     z-index: 100000;
 }

 /* Botones redondos */
 .btn-control {
     width: 42px;
     height: 42px;
     border-radius: 50%;
     border: none;
     background: rgba(255, 255, 255, 0.25);
     backdrop-filter: blur(4px);
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 18px;
     transition: 0.2s;
 }

 .btn-control:hover {
     background: rgba(255, 255, 255, 0.4);
 }

 /* Contador */
 .lightbox-index {
     color: #fff;
     font-weight: 600;
     font-size: 16px;
     min-width: 65px;
     text-align: center;
 }

 /* Cerrar */
 .lightbox-close {
     background: rgba(255, 255, 255, 0.25);
     backdrop-filter: blur(4px);
     border: none;
     color: #fff;
     font-size: 22px;
     width: 42px;
     height: 42px;
     border-radius: 50%;
     cursor: pointer;
     transition: 0.2s;
 }

 .lightbox-close:hover {
     background: rgba(255, 255, 255, 0.4);
 }

 /* -----------------------------
   SLIDER
----------------------------- */
 .lightbox-swiper-container {
     /* width: 90%; */
     /* max-width: 950px; */
     height: 80vh;
     /* border-radius: 12px; */
     /* overflow: hidden; */
     /* background: #000; */
 }

 .lightbox-img {
     max-width: 100%;
     max-height: 100%;
     transition: transform .25s ease;
 }

 /* -----------------------------
   NAVEGACIÓN (PREV / NEXT)
----------------------------- */
 .nav-btn {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(255, 255, 255, 0.28);
     border: none;
     width: 52px;
     height: 52px;
     border-radius: 50%;
     color: #fff;
     font-size: 22px;
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 100000;
     transition: 0.2s;
 }

 .nav-btn:hover {
     background: rgba(255, 255, 255, 0.4);
 }

 #btn-prev {
     left: 25px;
 }

 #btn-next {
     right: 25px;
 }

 /* -----------------------------
   RESPONSIVE
----------------------------- */

 @media (max-width: 575px) {
     .lightbox-controls {
         top: 10px;
         gap: 6px;
         transform: translateX(-50%);
     }

     .btn-control,
     .lightbox-close {
         width: 34px;
         height: 34px;
         font-size: 14px;
     }

     .lightbox-index {
         font-size: 14px;
         min-width: 50px;
     }

     .nav-btn {
         width: 40px;
         height: 40px;
         font-size: 16px;
     }

     #btn-prev {
         left: 15px;
     }

     #btn-next {
         right: 15px;
     }

     .lightbox-swiper-container {
         width: 96%;
         height: 75vh;
     }
 }

 .content-mobile-collapsed {
     position: relative;
     max-height: 200px;
     /* Altura visible inicial */
     overflow: hidden;
 }

 .fade-effect {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 70px;
     background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 85%);
 }

 .content-mobile-expanded {
     max-height: none;
     overflow: visible;
 }

 #toggleContent {
     font-size: 16px;
 }

 .gradient-title {
     position: relative;
     display: inline-block;

     /* Texto principal con degradado */
     background: linear-gradient(90deg, #64a9ff, #3ec7fb, #ec7eff, #ff6500);
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .gradient-title::after {
     content: attr(data-text);
     position: absolute;
     top: 0;
     left: 0;
     z-index: -1;
     background: #000000;
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     filter: blur(2px);
     opacity: 0.8;
 }

 .card-events {
     border-radius: 0.75rem;
     overflow: hidden;
     position: relative;
 }

 .card-events .service-slider {
     width: 515px;
     aspect-ratio: 3 / 4;
     border-radius: inherit;
     overflow: hidden;
     position: relative;
 }

 .card-events .service-slider .swiper-slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: inherit;
 }


 @media (max-width: 768px) {
     .card-events .service-slider {
         width: 100%;
     }

 }

 .title-card-landing {
     position: absolute;
     border-radius: 8px;
     top: 0rem;
     color: #fff;
     left: 12px;
     right: 12px;
     bottom: 0px;
     padding: .6rem .75rem;
     background: linear-gradient(180deg, rgb(0 0 0 / 37%) 0%, rgb(255 255 255 / 0%) 100%);
     z-index: 1;
 }

 .card-destacados {
     filter: saturate(150%);
 }

 @media (max-width: 768px) {}

 .more-image-button {
     position: absolute;
     bottom: 3.5rem;
     left: 2rem;
     z-index: 2;
 }

 .li-oculto {
     display: none !important;
 }

 #map {
     border-radius: 0.8rem;
 }