:root {
     --verde: #19b34b;
     --azul-oscuro: #024eca;
     --azul-claro: #3f86c6;
     --blanco: #fff;
     --plomo: #bcb9b9;
 }

 body {
     font-family: 'Roboto', sans-serif;
     background-color: #f8f9fa;
     color: #333;
     overflow-x: hidden;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: 'Montserrat', sans-serif;
     font-weight: 600;
 }

 .navbar {
     background-color: var(--blanco);
     background-color: #333;
     background: linear-gradient(45deg, rgba(2, 59, 174, 0.9) 0%, rgba(4, 127, 43, 0.9) 100%);

     box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
     padding: 3px 0;
 }

 .navbar-brand img {
     height: 70px;
     transition: all 0.3s;
 }

 .navbar-brand:hover img {
     transform: scale(1.05);
 }


 .nav-link {
     color: var(--blanco);
     font-weight: 500;
     margin: 0 8px;
     padding: 8px 15px !important;
     border-radius: 4px;
     transition: all 0.3s;
 }

 .nav-link:hover {
     color: var(--blanco);
     background-color: rgba(255, 255, 255, 0.2);
 }


 .btn-square {
     border-radius: 4px !important;
     font-weight: normal;
     letter-spacing: 0.5px;
     text-transform: uppercase;
     font-size: 0.85rem;
     padding: 12px 25px;
     transition: all 0.3s;
     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
     border: none;
 }

 .btn-tarjeta {
     border-radius: 4px !important;
     font-weight: normal;
     letter-spacing: 0.5px;
     text-transform: uppercase;
     font-size: 0.85rem;
     padding: 12px 25px;
     color: #fff;
     background: linear-gradient(135deg, rgba(2, 78, 202, 0.9) 0%, rgba(25, 179, 75, 0.9) 100%);
     transition: all 0.3s;
     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
     border: none;
 }

 .btn-tarjeta:hover {
     transform: translateY(-3px);
     color: #fff;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 }


 .btn-primary {
     background-color: var(--verde);
 }

 .btn-primary:hover {
     background-color: var(--azul-oscuro);
     transform: translateY(-3px);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 }

 .btn-outline {
     background-color: transparent;
     border: 2px solid var(--verde);
     color: var(--verde);
     font-weight: normal;

 }

 .btn-outline:hover {
     background-color: var(--verde);
     color: var(--blanco);
     transform: translateY(-3px);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 }

 .hero-section {
     background: linear-gradient(135deg, rgba(2, 78, 202, 0.9) 0%, rgba(25, 179, 75, 0.9) 100%),
         url('https://images.unsplash.com/photo-1618477388954-7852f32655ec?ixlib=rb-4.0.3&auto=format&fit=crop&w=1364&q=80');
     background-size: cover;
     background-position: center;
     color: var(--blanco);
     padding: 180px 0 150px;
     text-align: center;
     position: relative;
     overflow: hidden;
 }

 .hero-title {
     font-size: 3.2rem;
     font-weight: 700;
     margin-bottom: 20px;
     line-height: 1.2;
 }

 .hero-subtitle {
     font-size: 1.3rem;
     margin-bottom: 35px;
     opacity: 0.9;
     max-width: 700px;
     margin-left: auto;
     margin-right: auto;
 }

 .section-title {
     color: var(--azul-oscuro);
     font-weight: 700;
     margin-bottom: 40px;
     position: relative;
     display: inline-block;
     padding-bottom: 10px;
 }

 .section-title:after {
     content: '';
     position: absolute;
     width: 60%;
     height: 4px;
     background: linear-gradient(90deg, var(--verde) 0%, var(--azul-oscuro) 100%);
     bottom: 0;
     left: 20%;
     border-radius: 2px;
 }

 .card-modern {
     background: var(--blanco);
     border-radius: 8px;
     border: none;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
     transition: all 0.4s;
     overflow: hidden;
     margin-bottom: 30px;
     height: 100%;
 }

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

 .card-icon {
     font-size: 2.5rem;
     color: var(--verde);
     margin-bottom: 20px;
     transition: all 0.5s;
     display: inline-block;
 }

 .card-modern:hover .card-icon {
     transform: scale(1.2) rotate(10deg);
     color: var(--azul-oscuro);
 }

 .process-step {
     text-align: center;
     padding: 40px 25px;
     position: relative;
     background: var(--blanco);
     border-radius: 8px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
     margin-bottom: 30px;
     transition: all 0.3s;
     border-top: 4px solid var(--verde);
 }

 .process-step:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
     border-top: 4px solid var(--azul-oscuro);
 }

 .process-step .number {
     width: 50px;
     height: 50px;
     background: var(--verde);
     color: var(--blanco);
     border-radius: 4px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.3rem;
     font-weight: 700;
     margin: 0 auto 20px;
     transition: all 0.3s;
 }

 .process-step:hover .number {
     background: var(--azul-oscuro);
     transform: scale(1.1) rotate(5deg);
 }

 .benefit-card {
     padding: 30px;
     border-radius: 8px;
     background: var(--blanco);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
     transition: all 0.3s;
     height: 100%;
     border-left: 4px solid var(--verde);
 }

 .benefit-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
     border-left: 4px solid var(--azul-oscuro);
 }

 .contact-info {
     padding: 30px;
     background: var(--blanco);
     border-radius: 8px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 }

 .contact-icon {
     width: 50px;
     height: 50px;
     background: var(--verde);
     color: var(--blanco);
     border-radius: 4px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.2rem;
     margin-right: 15px;
     transition: all 0.3s;
 }

 .contact-item:hover .contact-icon {
     background: var(--azul-oscuro);
     transform: rotate(10deg);
 }

 .contact-item p {
     max-width: 400px;
 }

 footer {
     background: var(--azul-oscuro);
     color: var(--blanco);
     padding: 70px 0 30px;
     position: relative;
 }

 .footer-links h5 {
     font-weight: 600;
     margin-bottom: 20px;
     position: relative;
     padding-bottom: 10px;
 }

 .footer-links h5:after {
     content: '';
     position: absolute;
     width: 40px;
     height: 3px;
     background: var(--verde);
     bottom: 0;
     left: 0;
     border-radius: 2px;
 }

 .footer-links a {
     color: rgba(255, 255, 255, 0.8);
     text-decoration: none;
     transition: all 0.3s;
     display: block;
     margin-bottom: 10px;
     padding: 5px 0;
 }

 .footer-links a:hover {
     color: var(--verde);
     padding-left: 5px;
 }

 .social-icons a {
     width: 40px;
     height: 40px;
     background: rgba(255, 255, 255, 0.1);
     color: var(--blanco);
     border-radius: 4px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     margin-right: 10px;
     transition: all 0.3s;
 }

 .social-icons a:hover {
     background: var(--verde);
     transform: translateY(-5px);
 }

 .floating {
     animation: floating 3s ease-in-out infinite;
 }

 @keyframes floating {
     0% {
         transform: translateY(0px);
     }

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

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

 .pulse {
     animation: pulse 2s infinite;
 }

 @keyframes pulse {
     0% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.05);
     }

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

 .img-border {
     border: 8px solid var(--blanco);
     border-radius: 8px;
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
 }

 /* Responsive adjustments */
 @media (max-width: 992px) {
     .hero-title {
         font-size: 2.8rem;
     }

     .hero-subtitle {
         font-size: 1.2rem;
     }
 }

 @media (max-width: 768px) {
     .hero-title {
         font-size: 2.2rem;
     }

     .hero-subtitle {
         font-size: 1.1rem;
     }

     .navbar-brand img {
         height: 40px;
     }
 }

 @media (max-width: 576px) {
     .hero-section {
         padding: 120px 0 100px;
     }

     .hero-title {
         font-size: 1.8rem;
     }
 }



 /* Hero Carousel Styles */
 .hero-carousel {
     height: 100vh;
     min-height: 600px;
     position: relative;
     overflow: hidden;
 }

 .hero-carousel .carousel-inner,
 .hero-carousel .carousel-item {
     height: 100%;
 }

 .hero-carousel .carousel-item {
     background-size: cover;
     background-position: center;
 }

 .hero-carousel .carousel-item::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%);
     /*background: linear-gradient(135deg, rgba(2, 78, 202, 0.85) 0%, rgba(25, 179, 75, 0.85) 100%); */
 }

 .hero-content {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 100%;
     padding: 0 15px;
     text-align: center;
     z-index: 2;
 }

 .hero-title {
     font-size: 3.5rem;
     color: #fff;
     font-weight: 700;
     margin-bottom: 20px;
     line-height: 1.2;
     text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
 }

 .hero-subtitle {
     font-size: 1.5rem;
     color: #fff;
     margin-bottom: 35px;
     max-width: 700px;
     margin-left: auto;
     margin-right: auto;
     text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
 }

 .carousel-control-prev,
 .carousel-control-next {
     width: 60px;
     height: 60px;
     background-color: rgba(255, 255, 255, 0.2);
     border-radius: 50%;
     top: 50%;
     transform: translateY(-50%);
     opacity: 1;
     transition: all 0.3s;
     z-index: 10000;
 }

 .carousel-control-prev {
     left: 30px;
 }

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

 .carousel-control-prev:hover,
 .carousel-control-next:hover {
     background-color: var(--verde);
 }

 .carousel-indicators {
     bottom: 30px;
 }

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

 .carousel-indicators button.active {
     background-color: var(--verde);
     transform: scale(1.2);
 }

 /* Button Styles */
 .btn-square {
     border-radius: 4px !important;
     font-weight: 600;
     letter-spacing: 0.5px;
     text-transform: uppercase;
     font-size: 0.85rem;
     padding: 12px 25px;
     transition: all 0.3s;
     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
     border: none;
 }

 .btn-primary {
     background-color: var(--verde);
 }

 .btn-primary:hover {
     background-color: var(--azul-oscuro);
     transform: translateY(-3px);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 }

 .btn-outline {
     background-color: transparent;
     border: 2px solid var(--blanco);
     color: var(--blanco);
 }

 .btn-outline:hover {
     background-color: var(--blanco);
     color: var(--azul-oscuro);
     transform: translateY(-3px);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 }

 /* Responsive Adjustments */
 @media (max-width: 1199px) {
     .hero-title {
         font-size: 3rem;
     }

     .hero-subtitle {
         font-size: 1.3rem;
     }
 }

 @media (max-width: 991px) {
     .hero-carousel {
         height: 80vh;
         min-height: 500px;
     }

     .hero-title {
         font-size: 2.5rem;
     }

     .hero-subtitle {
         font-size: 1.2rem;
     }

     .carousel-control-prev,
     .carousel-control-next {
         width: 50px;
         height: 50px;
     }
 }

 @media (max-width: 767px) {
     .hero-carousel {
         height: 70vh;
         min-height: 400px;
     }

     .hero-title {
         font-size: 2rem;
     }

     .hero-subtitle {
         font-size: 1rem;
         margin-bottom: 25px;
     }

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

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

     .btn-square {
         padding: 10px 20px;
         font-size: 0.8rem;
     }
 }

 @media (max-width: 575px) {
     .hero-carousel {
         height: 85vh;
     }

     .hero-title {
         font-size: 1.8rem;
         margin-bottom: 15px;
     }

     .hero-subtitle {
         margin-bottom: 20px;
     }

     .carousel-indicators {
         bottom: 20px;
     }
 }

 /* Ajustes específicos para los botones del hero en móviles */
 @media (max-width: 767px) {
     .hero-carousel .btn-square {
         padding: 10px 15px;
         font-size: 0.75rem;
         margin-bottom: 10px;
         width: 100%;
         max-width: 200px;
     }

     .hero-carousel .d-flex.flex-wrap {
         flex-direction: column;
         align-items: center;
         gap: 10px;
     }

     .hero-carousel .btn-outline {
         margin-left: 0 !important;
     }
 }

 /* Ajustes adicionales para pantallas muy pequeñas */
 @media (max-width: 400px) {
     .hero-carousel .btn-square {
         padding: 8px 12px;
         font-size: 0.7rem;
     }

     .hero-title {
         font-size: 1.6rem !important;
         margin-bottom: 15px !important;
     }

     .hero-subtitle {
         font-size: 0.9rem !important;
         margin-bottom: 25px !important;
     }
 }

 /* Estilos para el botón flotante de WhatsApp */
 .whatsapp-float {
     position: fixed;
     bottom: 30px;
     right: 30px;
     z-index: 999;
     transition: all 0.3s ease;
 }

 .whatsapp-button {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 60px;
     height: 60px;
     background: #25D366;
     color: white;
     text-decoration: none;
     border-radius: 50%;
     box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3);
     transition: all 0.3s ease;
     font-size: 32px;
 }

 .whatsapp-button:hover {
     background: #128C7E;
     transform: translateY(-3px) scale(1.1);
     box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
     color: white;
 }

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

     50% {
         transform: scale(1.1);
     }

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

 .whatsapp-button {
     animation: pulse 2s infinite;
 }

 .whatsapp-button:hover {
     animation: none;
 }

 /* Versión móvil */
 @media (max-width: 768px) {
     .whatsapp-float {
         bottom: 20px;
         right: 20px;
     }

     .whatsapp-button {
         width: 56px;
         height: 56px;
         font-size: 28px;
     }
 }