:root {
         --primary-color: #2E8B57;
         --secondary-color: #1E6B47;
         --accent-color: #FFC107;
         --light-color: #f8f9fa;
         --dark-color: #343a40;
         --primary-green: #2E8B57;
         --primary-dark: #1E6B47;
         --light-green: #3CB371;
         --dark-green: #1F6B42;
         --ocean-blue: #4682B4;
         --light-blue: #5F9EA0;
         --industrial-gray: #4A5568;
         --light-gray: #EDF2F7;
         --text-dark: #2D3748;
         --text-light: #718096;
         --white: #FFFFFF;
         --whatsapp: #25D366;
         --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
     }

     * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
     }

     body {
         font-family: 'Source Sans Pro', sans-serif;
         overflow-x: hidden;
         padding-top: 70px;
     }

     .container {
         width: 100%;
         max-width: 1200px;
         margin: 0 auto;
         padding: 0 20px;
     }

     /* Header y Navegación */
     .header {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         background-color: rgba(255, 255, 255, 0.95);
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
         z-index: 1000;
         transition: all 0.3s ease;
     }

     h1,
     h2,
     h3,
     h4,
     h5,
     h6 {
         font-family: 'Montserrat', sans-serif;
         font-weight: 600;
         margin-bottom: 1rem;
         color: var(--industrial-gray);
     }

     .navbar-brand {
         font-weight: 600;
         color: var(--primary-color);
         font-size: 1.5rem;
     }

     .navbar-nav .nav-link {
         color: var(--dark-color);
         font-weight: 500;
         padding: 0.5rem 1rem;
         transition: all 0.3s ease;
         display: flex;
         align-items: center;
         gap: 10px;
     }

     .navbar-nav .nav-link:hover,
     .navbar-nav .nav-link.active {
         color: var(--primary-color);
     }

     /* Botón hamburguesa personalizado */
     .navbar-toggler {
         border: none;
         padding: 0.25rem 0.5rem;
         font-size: 1.25rem;
     }

     .navbar-toggler:focus {
         box-shadow: none;
     }

     .navbar-toggler-icon {
         background-image: none;
         width: 24px;
         height: 24px;
         position: relative;
     }

     .navbar-toggler-icon::before,
     .navbar-toggler-icon::after {
         content: '';
         position: absolute;
         left: 0;
         width: 100%;
         height: 2px;
         background-color: var(--primary-color);
         transition: all 0.3s ease;
     }

     .navbar-toggler-icon::before {
         top: 6px;
     }

     .navbar-toggler-icon::after {
         bottom: 6px;
     }

     .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
         transform: rotate(45deg);
         top: 11px;
     }

     .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
         transform: rotate(-45deg);
         bottom: 11px;
     }

     /* Secciones */
     .section {
         padding: 80px 0;
         min-height: auto;
     }

     /* Hero Section */
     .banner-section {
         background: linear-gradient(rgba(46, 139, 87, 0.8), rgba(46, 139, 87, 0.9));
         background-size: cover;
         background-position: center;
         color: var(--white);
         padding: 120px 0 80px;
         text-align: center;
     }

     .banner-section h1 {
         font-size: 2.5rem;
         margin-bottom: 1.5rem;
         color: var(--white);
     }

     .banner-section p {
         font-size: 1.2rem;
         max-width: 700px;
         margin: 0 auto 2rem;
     }

     .hero-buttons {
         display: flex;
         justify-content: center;
         gap: 20px;
         margin-top: 2rem;
         flex-wrap: wrap;
     }

     .cta-button {
         background-color: var(--white);
         color: var(--primary-green);
         border: none;
         padding: 12px 25px;
         border-radius: 6px;
         font-weight: 600;
         cursor: pointer;
         transition: background-color 0.3s;
         text-decoration: none;
         display: inline-block;
     }

     .cta-button:hover {
         background-color: var(--light-gray);
     }

     .secondary-button {
         background-color: transparent;
         border: 2px solid var(--white);
         color: var(--white);
     }

     .secondary-button:hover {
         background-color: rgba(255, 255, 255, 0.1);
     }

     /* Section Styling */
     .section-title {
         text-align: center;
         margin-bottom: 3rem;
     }

     .section-title h2 {
         font-size: 2.2rem;
         position: relative;
         display: inline-block;
         padding-bottom: 15px;
     }

     .section-title h2::after {
         content: '';
         position: absolute;
         width: 70px;
         height: 3px;
         background-color: var(--primary-green);
         bottom: 0;
         left: 50%;
         transform: translateX(-50%);
     }

     /* About Us */
     .about-content {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 40px;
         align-items: center;
     }

     .about-image {
         overflow: hidden;
         border-radius: 8px;
         box-shadow: var(--shadow);
     }

     .about-image img {
         width: 100%;
         height: auto;
         display: block;
     }

     .mission-vision {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 30px;
         margin-top: 40px;
     }

     .mission,
     .vision {
         background-color: var(--light-gray);
         padding: 30px;
         border-radius: 8px;
     }

     .justificado {
         text-align: justify;
     }

     /* Services Section */
     .services {
         background-color: var(--light-gray);
     }

     .services-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
         gap: 30px;
     }

     .service-card {
         background-color: var(--white);
         border-radius: 8px;
         padding: 30px;
         box-shadow: var(--shadow);
         transition: transform 0.3s;
         text-align: center;
     }

     .service-card:hover {
         transform: translateY(-10px);
     }

     .service-icon {
         font-size: 3rem;
         color: var(--primary-green);
         margin-bottom: 20px;
     }

     .service-card h3 {
         font-size: 1.5rem;
         margin-bottom: 15px;
     }

     /* Process Section */
     .process-container {
         padding: 60px 0;
     }

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

     .process-card {
         background: var(--white);
         border-radius: 12px;
         box-shadow: var(--shadow);
         padding: 25px;
         transition: all 0.3s ease;
         cursor: pointer;
         position: relative;
         border-left: 5px solid var(--primary-green);
     }

     .process-card:hover {
         background-color: var(--light-gray);
         transform: translateY(-5px);
         box-shadow: var(--shadow-hover);
     }

     .card-number {
         position: absolute;
         top: -15px;
         left: -15px;
         width: 40px;
         height: 40px;
         background-color: var(--primary-green);
         color: white;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         font-weight: 700;
         font-size: 1.2rem;
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     }

     .card-icon {
         width: 100px;
         height: 100px;
         margin: 0 auto 20px;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         overflow: hidden;
         border: 3px solid var(--light-green);
         background-color: var(--light-gray);
     }

     .card-title {
         font-weight: 600;
         margin-bottom: 12px;
         color: var(--primary-dark);
         font-size: 1.3rem;
         text-align: center;
     }

     .card-description {
         font-size: 0.95rem;
         color: var(--text-light);
         margin-bottom: 15px;
         text-align: center;
     }

     .card-activities {
         font-size: 0.85rem;
         color: var(--text-light);
         border-top: 1px dashed var(--text-light);
         padding-top: 15px;
         margin-top: 15px;
         text-align: center;
     }

     .card-icon img {
         width: 100%;
         height: 100%;
         object-fit: cover;
     }

     /* Modal */
     .modal {
         display: none;
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.5);
         z-index: 1100;
         justify-content: center;
         align-items: center;
     }

     .modal-content {
         background-color: white;
         padding: 30px;
         border-radius: 12px;
         max-width: 600px;
         width: 90%;
         max-height: 80vh;
         overflow-y: auto;
         position: relative;
     }

     .close-modal {
         position: absolute;
         top: 15px;
         right: 15px;
         font-size: 24px;
         cursor: pointer;
         color: var(--text-light);
     }

     .modal-title {
         font-size: 1.5rem;
         margin-bottom: 15px;
         color: var(--primary-dark);
     }

     .modal-section {
         margin-bottom: 20px;
     }

     .modal-section h3 {
         font-size: 1.1rem;
         margin-bottom: 10px;
         color: var(--primary-color);
     }

     /* Collection Centers */
     .centers {
         background-color: var(--light-gray);
     }

     .map-container {
         height: 450px;
         border-radius: 12px;
         overflow: hidden;
         margin-bottom: 30px;
     }

     .centers-info {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
         gap: 20px;
     }

     .center-card {
         background-color: var(--white);
         border-radius: 8px;
         padding: 20px;
         box-shadow: var(--shadow);
     }

     /* Contact & Quote Forms */
     .contact-quote {
         padding: 80px 0;
     }

     .form-container {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 40px;
     }

     .form-section {
         background-color: var(--white);
         padding: 30px;
         border-radius: 8px;
         box-shadow: var(--shadow);
     }

     .form-group {
         margin-bottom: 20px;
     }

     .form-group label {
         display: block;
         margin-bottom: 8px;
         font-weight: 600;
     }

     .form-control {
         width: 100%;
         padding: 12px;
         border: 1px solid #ddd;
         border-radius: 4px;
         font-family: 'Source Sans Pro', sans-serif;
     }

     textarea.form-control {
         min-height: 120px;
         resize: vertical;
     }

     /* Footer */
     footer {
         background-color: var(--industrial-gray);
         color: var(--white);
         padding: 60px 0 30px;
     }

     .footer-content {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
         gap: 40px;
         margin-bottom: 40px;
     }

     .footer-column h3 {
         color: var(--white);
         margin-bottom: 20px;
         font-size: 1.2rem;
     }

     .footer-column ul {
         list-style: none;
     }

     .footer-column ul li {
         margin-bottom: 10px;
     }

     .footer-column ul li a {
         color: #CBD5E0;
         text-decoration: none;
         transition: color 0.3s;
     }

     .footer-column ul li a:hover {
         color: var(--light-green);
     }

     .social-links {
         display: flex;
         gap: 15px;
         margin-top: 20px;
     }

     .social-links a {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         width: 40px;
         height: 40px;
         background-color: rgba(255, 255, 255, 0.1);
         border-radius: 50%;
         color: var(--white);
         transition: background-color 0.3s;
     }

     .social-links a:hover {
         background-color: var(--primary-green);
     }

     .copyright {
         text-align: center;
         padding-top: 30px;
         border-top: 1px solid rgba(255, 255, 255, 0.1);
         color: #CBD5E0;
         font-size: 0.9rem;
     }

     /* WhatsApp float */
     .whatsapp-float {
         position: fixed;
         bottom: 25px;
         right: 25px;
         width: 60px;
         height: 60px;
         background-color: var(--whatsapp);
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
         cursor: pointer;
         z-index: 1000;
         transition: all 0.3s ease;
     }

     .whatsapp-float:hover {
         transform: scale(1.1);
         box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
     }

     .whatsapp-float i {
         font-size: 28px;
         color: white;
     }

     .whatsapp-panel {
         position: fixed;
         bottom: 100px;
         right: 25px;
         width: 300px;
         background: white;
         border-radius: 12px;
         box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
         padding: 20px;
         z-index: 999;
         display: none;
         flex-direction: column;
         gap: 15px;
     }

     .whatsapp-panel.show {
         display: flex;
         animation: slideUp 0.3s ease;
     }

     @keyframes slideUp {
         from {
             transform: translateY(20px);
             opacity: 0;
         }

         to {
             transform: translateY(0);
             opacity: 1;
         }
     }

     .whatsapp-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-bottom: 10px;
     }

     .whatsapp-title {
         font-weight: 600;
         color: var(--primary-dark);
         font-size: 1.1rem;
     }

     .close-panel {
         background: none;
         border: none;
         font-size: 20px;
         cursor: pointer;
         color: var(--text-light);
         padding: 0;
         width: 30px;
         height: 30px;
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .whatsapp-option {
         display: flex;
         align-items: center;
         gap: 12px;
         padding: 12px;
         border-radius: 8px;
         cursor: pointer;
         transition: background-color 0.2s;
     }

     .whatsapp-option:hover {
         background-color: var(--light-gray);
     }

     .whatsapp-icon {
         width: 40px;
         height: 40px;
         border-radius: 50%;
         background-color: rgba(37, 211, 102, 0.1);
         display: flex;
         align-items: center;
         justify-content: center;
         color: var(--whatsapp);
         font-size: 18px;
     }

     .whatsapp-text {
         flex: 1;
     }

     .whatsapp-text h4 {
         font-weight: 600;
         margin-bottom: 4px;
         color: var(--primary-dark);
     }

     .whatsapp-text p {
         font-size: 0.85rem;
         color: var(--text-light);
     }

     /* Botón Cotizar */
     .btn-quote {
         background-color: var(--primary-green);
         color: white !important;
         padding: 10px 18px;
         border-radius: 8px;
         font-weight: 600;
         text-decoration: none;
         transition: .3s ease;
     }

     .btn-quote:hover {
         background-color: var(--dark-green);
     }

     /* LOGO responsivo */
     .logo-site {
         height: 45px;
         width: auto;
         object-fit: contain;
     }

     /* Responsive Styles */
     @media (max-width: 992px) {
         .navbar-collapse {
             background-color: white;
             padding: 1rem;
             border-radius: 0 0 10px 10px;
             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
         }

         .navbar-nav .nav-link {
             padding: 0.75rem 0;
             border-bottom: 1px solid rgba(0, 0, 0, 0.05);
         }

         .navbar-nav .nav-link:last-child {
             border-bottom: none;
         }

         .form-container {
             grid-template-columns: 1fr;
         }

         .mission-vision {
             grid-template-columns: 1fr;
             gap: 20px;
         }

         .about-content {
             grid-template-columns: 1fr;
             gap: 30px;
         }
     }

     @media (max-width: 768px) {
         .section {
             padding: 60px 0;
         }

         .banner-section {
             padding: 100px 0 60px;
         }

         .banner-section h1 {
             font-size: 2.2rem;
         }

         .banner-section p {
             font-size: 1.1rem;
         }

         .section-title h2 {
             font-size: 1.8rem;
         }

         .hero-buttons {
             flex-direction: column;
             align-items: center;
         }

         .cta-button {
             width: 100%;
             max-width: 300px;
             text-align: center;
         }

         .process-grid,
         .services-grid,
         .centers-info {
             grid-template-columns: 1fr;
         }

         .card-icon {
             width: 80px;
             height: 80px;
         }

         .map-container {
             height: 350px;
         }
     }

     @media (max-width: 576px) {
         body {
             padding-top: 60px;
         }

         .navbar-brand {
             font-size: 1.25rem;
         }

         .logo-site {
             height: 40px;
         }

         .banner-section {
             padding: 80px 0 40px;
         }

         .banner-section h1 {
             font-size: 1.8rem;
         }

         .banner-section p {
             font-size: 1rem;
         }

         .section-title h2 {
             font-size: 1.6rem;
         }

         .modal-content {
             padding: 20px;
             width: 95%;
         }

         .whatsapp-panel {
             width: 280px;
             right: 15px;
         }

         .form-section {
             padding: 20px;
         }

         .mission,
         .vision {
             padding: 20px;
         }

         .card-icon {
             width: 70px;
             height: 70px;
         }

         .card-title {
             font-size: 1.2rem;
         }
     }

     @media (max-width: 400px) {
         .whatsapp-panel {
             width: 260px;
             right: 10px;
         }
     }