body {
     background-color: #f8f9fa;
     font-family: 'Inter', sans-serif;
 }

 .header {
     background-color: #fff;
     color: #2463AB;
 }

 .text-blue-m {
     color: #2463AB;
 }

 .fondo-azul {
     background-color: #2463AB !important;
 }

 .btn-whatsapp {
     background-color: #66CF73;
     color: #fff;
 }

 .btn-whatsapp:hover {
     background-color: #52b15d;
     color: #fff;
 }

 .hero {
     background-color: #e9ecef;
     padding: 40px 0;
     min-height: 400px;
     max-height: 600px;
     background-image: url(../img/hero-image.jpg);
     background-position: center center;
     background-size: cover;
     background-repeat: no-repeat;
 }

 .activo {
     background-color: #E9EFF7;
 }

 .boder-button-m {
     border-bottom: solid 1px #D3E0EE;
     ;
 }

 .nav-link-m {
     color: #2463AB;
     background-color: #fff;
     border: solid 1px #D3E0EE;
     border-bottom: 0;
     border-right: 0;
     border-top: 0;
     font-size: 16px;
     padding: 15px 20px;
 }

 .select-m {
     background-color: #d3e0ee;
     border: 0;
     color: #2464ab;
 }

 .nav-link-m:hover {
     color: #2463AB;
     background-color: #E9EFF7;
 }

 .menu-movil {
     border: 0;
     padding: 0;
     margin: 0;
     width: 32px;
     margin: 15px;
 }

 .menu-movil:focus {
     box-shadow: none;
 }

 .navbar-brand-tj {
     width: 160px;
 }

 .nav-margin-r {
     margin-top: 0;
 }

 .cta-button {
     background-color: #28a745;
     color: white;
 }

 .cta-button:active {
     background-color: #117027;
     color: white;
 }

 .cta-button:focus {
     background-color: #117027;
     color: white;
 }

 .cta-button:hover {
     background-color: #117027;
     color: white;
 }

 .img-pro {
     width: 100%;
     margin: auto;
 }

 .footer {
     background-color: #f5f5f5;
     color: #404040;
 }

 .mas {
     background-color: #2463AB45;
     color: #2463AB;
 }

 .mas:hover {
     background-color: #2463AB;
     color: #ffffff;
 }

 /*Estilos para las categorías*/
 .carousel-container {
     display: flex;
     overflow-x: auto;
     scroll-snap-type: x mandatory;
     -webkit-overflow-scrolling: touch;
     padding-bottom: 20px;
 }

 .carousel-container::-webkit-scrollbar {
     display: none;
 }

 .category-card {
     flex: 0 0 auto;
     width: 200px;
     height: 100px;
     background-color: #FFE4D5;
     color: #FE7A2B;
     border-radius: 10px;
     margin-right: 15px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
     scroll-snap-align: start;
     transition: none;
     border: none;
     overflow: hidden;
     position: relative;
 }

 .category-card:hover {}

 .category-icon {
     font-size: 30px;
     margin-bottom: 10px;
     transition: transform 0.2s ease-in-out;
 }

 .category-name {
     font-size: 16px;
     font-weight: 500;
     transition: transform 0.2s ease-in-out;
 }

 .category-card:hover .category-icon {
     transform: translateY(-5px);
 }

 .category-card:hover .category-name {
     transform: translateY(-5px);
 }

 .carousel-container {
     scrollbar-width: none;
     -ms-overflow-style: none;
 }

 .carousel-container::-webkit-scrollbar {
     display: none;
 }

 /*Estilos del modal*/
 .modal-fondo {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
     z-index: 1000;
     overflow-y: auto;
 }

 .modal-contenedor {
     background-color: #fff;
     margin: 5% auto;
     padding: 20px;
     border-radius: 8px;
     width: 80%;
     max-width: 600px;
     position: relative;
 }

 .galeria-modal {
     display: flex;
     gap: 10px;
     margin-bottom: 15px;
     overflow-x: auto;
 }

 .galeria-modal img {
     width: 100px;
     height: auto;
     border: 1px solid #ccc;
     border-radius: 4px;
     cursor: pointer;
 }

 .descripcion-larga {
     margin-bottom: 15px;
     line-height: 1.6;
 }

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

 .btn-naranja {
     background-color: #ffe4d5;
     color: #fe7b2b;
     border: solid 1px transparent;
 }

 .btn-naranja:hover {
     background-color: #fe7b2b;
     color: #ffe4d5;
     border: solid 1px #fe7b2b;
 }

 .btn-cerrar-modal:hover {
     color: #000;
 }

 /*Estilos para los banners de pago*/
 .payment-banner {
     background-color: #f0f8ff;
     padding: 40px 20px;
     margin-top: 50px;
     border-radius: 15px;
     border: solid 1px #dee2e6;
     text-align: center;
     font-family: 'Inter', sans-serif;
 }

 .payment-banner h2 {
     color: #003366;
     font-weight: 700;
     margin-bottom: 25px;
     font-size: 2.5rem;
 }

 .payment-banner .instruction-text {
     font-size: 1.3rem;
     color: #333;
     margin-bottom: 30px;
     font-weight: 500;
 }

 .payment-banner .instruction-text a {
     color: #28a745;
     text-decoration: none;
     font-weight: 600;
     transition: color 0.2s ease-in-out;
 }

 .payment-banner .instruction-text a:hover {
     color: #218838;
     text-decoration: underline;
 }

 .bank-info-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 25px;
     margin-top: 30px;
 }

 .bank-card {
     background-color: #ffffff;
     padding: 25px;
     border-radius: 12px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
     text-align: left;
     transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
     border: 1px solid #e0e0e0;
 }

 .bank-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
 }

 .bank-card .bank-logo {
     max-width: 120px;
     height: auto;
     margin-bottom: 15px;
     filter: grayscale(0%);
     display: block;
     margin-left: 0;
 }

 .bank-card h4 {
     color: #003366;
     font-weight: 600;
     margin-bottom: 10px;
     font-size: 1.6rem;
 }

 .bank-card p {
     color: #555;
     margin-bottom: 5px;
     font-size: 1.1rem;
     line-height: 1.5;
 }

 .bank-card .account-number {
     font-weight: 700;
     color: #0056b3;
     font-size: 1.2rem;
 }

 .mobile-payments,
 .benefits-section,
 .accepted-payments {
     background-color: #ffffff;
     padding: 30px;
     border-radius: 12px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
     margin-top: 40px;
     border: 1px solid #e0e0e0;
 }

 .mobile-payments h3,
 .benefits-section h3,
 .accepted-payments h3 {
     color: #003366;
     font-weight: 600;
     margin-bottom: 20px;
     font-size: 1.8rem;
 }

 .mobile-logos {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 30px;
     margin-bottom: 20px;
     flex-wrap: wrap;
 }

 .mobile-logos img,
 .accepted-logos img {
     max-width: 100px;
     height: auto;
     border-radius: 8px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
 }

 .mobile-payments .phone-number {
     font-size: 1.3rem;
     font-weight: 700;
     color: #d9534f;
 }

 .benefits-section ul::before {
     content: "\f00c";
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     color: #28a745;
     position: absolute;
     left: 0;
     top: 3px;
 }

 .accepted-payments .accepted-logos {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 20px;
     flex-wrap: wrap;
 }

 /*Ajustes responsivos*/
 @media (max-width: 768px) {
     .payment-banner h2 {
         font-size: 2rem;
     }

     .payment-banner .instruction-text {
         font-size: 1.1rem;
     }

     .bank-card,
     .mobile-payments,
     .benefits-section,
     .accepted-payments {
         padding: 20px;
     }

     .bank-card h4,
     .mobile-payments h3,
     .benefits-section h3,
     .accepted-payments h3 {
         font-size: 1.5rem;
     }

     .bank-card p,
     .benefits-section ul li,
     .mobile-payments .phone-number {
         font-size: 1rem;
     }

     .mobile-logos img,
     .accepted-logos img {
         max-width: 80px;
     }
 }

 @media (max-width: 480px) {
     .payment-banner {
         padding: 20px 15px;
     }

     .payment-banner h2 {
         font-size: 1.8rem;
     }

     .instruction-text {
         font-size: 1rem;
     }

     .bank-info-grid {
         grid-template-columns: 1fr;
     }

     .bank-card,
     .mobile-payments,
     .benefits-section,
     .accepted-payments {
         margin-top: 25px;
     }

     .mobile-logos,
     .accepted-logos {
         gap: 15px;
     }
 }

 @media only screen and (max-width: 991px) {
     .nav-margin-r {
         margin-top: 30px;
     }
 }

 /*Estilos del cover y buscador*/
 .cover-section {
     background-color: #2463AB;
     border-radius: 1rem;
     padding: 2rem;
 }

 .cover-image {
     max-width: 100%;
     height: auto;
 }

 .cover-text {
     color: #fff;
     text-align: left;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
 }

 .cover-text h1 {
     font-size: 2.5rem;
     font-weight: 700;
     margin-bottom: 1rem;
 }

 .cover-text p {
     font-size: 1.2rem;
     margin-bottom: 1.5rem;
 }

 .cover-btn {
     display: flex;
     align-items: center;
     gap: 0.5rem;
 }

 /* Estilos responsivos para la portada */
 @media (max-width: 768px) {
     .cover-text {
         text-align: left;
         margin-bottom: 1rem;
     }

     .cover-text h1 {
         font-size: 2rem;
     }

     .cover-text p {
         font-size: 1rem;
     }
 }

 /* Estilos para el paginador */
 .pagination .page-link {
     background-color: #FFE4D5;
     color: #FE7A2B;
     border-color: #FE7A2B;
     border-radius: 0.5rem;
     margin: 0 0.25rem;
 }

 .pagination .page-item.active .page-link,
 .pagination .page-link:hover,
 .pagination .page-link:focus {
     background-color: #FE7A2B;
     color: #fff;
     border-color: #FE7A2B;
 }

 /* Nuevos estilos para imágenes de productos */
 .product-img-container {
     width: 100%;
     height: 200px;
     overflow: hidden;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .product-img-container img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
 }

 /* Responsive adjustments for product cards on mobile */
 @media (max-width: 576px) {
     .col-6 {
         padding-left: 0.5rem !important;
         padding-right: 0.5rem !important;
         margin-bottom: 1rem !important;
     }

     .card-body {
         padding: 0.75rem !important;
     }

     .card-title {
         font-size: 1rem;
         margin-bottom: 0.25rem;
     }

     .card-text {
         font-size: 0.875rem;
         margin-bottom: 0.25rem;
     }

     .btn-whatsapp,
     .btn-naranja {
         padding: 0.5rem 0.75rem;
         font-size: 0.875rem;
     }

     /* Mobile-specific styles for the cover and search bar */
     .cover-section {
         border-radius: 0;
         padding: 1.5rem;
     }

     .cover-text {
         align-items: center;
         text-align: center;
     }
 }

 /* Estilos del card de productos - Mejoras UX/UI */
 .card {
     border: 1px solid #D3E0EE;
     /* Borde del color solicitado */
     transition: transform 0.2s, box-shadow 0.2s;
 }

 .card:hover {
     transform: translateY(-5px);
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
 }

 .card-body {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     /* Alinea el contenido para que el espaciado sea consistente */
 }

 .card-title {
     font-size: 1.25rem;
     font-weight: 600;
     margin-bottom: 1rem !important;
     /* Más espacio debajo del título */
 }

 .price-container {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     margin-bottom: 1rem !important;
     /* Más espacio debajo de los precios */
 }

 .original-price {
     font-size: 0.9rem;
     color: #6c757d;
     text-decoration: line-through;
     margin: 0;
 }

 .offer-price {
     font-size: 1.2rem;
     font-weight: 700;
     color: #66CF73;
     margin: 0;
 }

 .action-buttons {
     margin-top: auto;
     /* Empuja los botones hacia la parte inferior */
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
 }

 /* Estilos minimalistas para la sección de pagos */
 .payment-section {
     background-color: #E9EFF7;
     padding: 3rem 1rem;
     border-radius: 1rem;
     border: 1px solid #D3E0EE;
 }

 .payment-section h2 {
     font-size: 2rem;
     font-weight: 600;
     color: #2463AB;
     text-align: center;
     margin-bottom: 2rem;
 }

 .payment-contact {
     text-align: center;
     margin-bottom: 3rem;
     padding: 1.5rem;
     background-color: #2463AB;
     border-radius: 0.75rem;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
 }

 .payment-contact p {
     font-size: 1.1rem;
     font-weight: 500;
     color: #fff;
     margin-bottom: 0.5rem;
 }

 .payment-contact a {
     font-size: 1.1rem;
     color: #66CF73;
     text-decoration: none;
     font-weight: 600;
     transition: color 0.2s;
 }

 .payment-contact a:hover {
     color: #52b15d;
 }

 .bank-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 1.5rem;
 }

 .bank-card-minimal {
     background-color: #fff;
     padding: 1.5rem;
     border-radius: 0.75rem;
     border: 1px solid #D3E0EE;
     text-align: left;
     transition: transform 0.2s ease-in-out;
     position: relative;
 }

 .bank-card-minimal:hover {
     transform: translateY(-5px);
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
 }

 .bank-card-minimal .bank-name {
     font-size: 1.25rem;
     font-weight: 600;
     color: #2463AB;
     margin-bottom: 0.5rem;
 }

 .bank-card-minimal p {
     font-size: 0.95rem;
     color: #555;
     margin-bottom: 0.25rem;
 }

 .bank-card-minimal .account-number-minimal {
     font-weight: 700;
     color: #FE7A2B;
     font-size: 1rem;
 }

 .copy-button {
     position: absolute;
     top: 10px;
     right: 10px;
     background-color: #f8f9fa;
     border: 1px solid #D3E0EE;
     color: #2463AB;
     padding: 5px 10px;
     border-radius: 0.5rem;
     cursor: pointer;
     font-size: 0.8rem;
     transition: background-color 0.2s, color 0.2s;
 }

 .copy-button:hover {
     background-color: #2463AB;
     color: #fff;
 }

 .copy-button .fa-copy {
     margin-right: 5px;
 }

 /* Estilos para el paginador */
 .pagination .page-link {
     background-color: #FFE4D5;
     color: #FE7A2B;
     border-color: #FE7A2B;
     border-radius: 0.5rem;
     margin: 0 0.25rem;
 }

 .pagination .page-item.active .page-link,
 .pagination .page-link:hover,
 .pagination .page-link:focus {
     background-color: #FE7A2B;
     color: #fff;
     border-color: #FE7A2B;
 }

 /* Estilos para el cuadro de mensaje personalizado */
 #custom-alert-box {
     position: fixed;
     top: 20px;
     right: 20px;
     background-color: #28a745;
     color: white;
     padding: 15px 25px;
     border-radius: 8px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     z-index: 1050;
     display: none;
     opacity: 0;
     transition: opacity 0.5s ease-in-out;
 }

 /* Ajustes específicos para móviles */
 @media (max-width: 768px) {

     .cover-section-container,
     .search-container {
         margin-top: 0 !important;
         margin-bottom: 0 !important;
     }

     .cover-section-container {
         border-radius: 0 !important;
     }

     .cover-section {
         border-radius: 0 !important;
     }
 }

 @media (min-width: 769px) {
     .cover-section-container {
         margin-top: 3rem !important;
         margin-bottom: 3rem !important;
     }

     .search-content {
         background-color: #E9EFF7;
         border: 1px solid #D3E0EE;
         padding-top: 1.5rem !important;
         padding-bottom: 1.5rem !important;
         border-radius: 1rem;
     }
 }

 @media (max-width: 576px) {
     .card-title {
         margin-bottom: 0.5rem !important;
     }

     .price-container {
         margin-bottom: 0.5rem !important;
     }

     .action-buttons {
         gap: 0.25rem;
     }

     .cover-section {
         border-radius: 0;
         padding: 1.5rem;
     }

     .cover-text {
         align-items: center;
         text-align: center;
     }

     .w-100.mt-4>.container {
         border-radius: 0 !important;
         padding: 1.5rem 1rem !important;
     }

     .search-container {
         position: sticky;
         top: 0;
         background-color: #fff;
         /* Asegura que el fondo del buscador sea blanco en móvil */
     }

     .search-content {
         background-color: #E9EFF7;
         border: 1px solid #D3E0EE;
         padding: 1rem;
         border-radius: 0;
     }
 }

 /* Estilos para el buscador */
 .search-container {
     z-index: 1000;
 }

 .search-content {
     position: relative;
 }

 .search-input-wrapper {
     position: relative;
 }

 .search-input-wrapper .form-control {
     padding-left: 2.5rem;
     color: #2463AB;
     background-color: #f8f9fa;
 }

 .search-input-wrapper .search-icon {
     position: absolute;
     left: 1rem;
     top: 50%;
     transform: translateY(-50%);
     color: #2463AB;
     pointer-events: none;
 }

 /* Aseguramos que el contenido principal no se oculte debajo del buscador fijo */
 body {
     padding-top: env(safe-area-inset-top, 0);
 }