* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }

        body {
            background-color: #c6bfb7; /* Body background */
            color: #333;
            overflow-x: hidden;
        }

        .content-container { /* Renamed from .container to avoid conflicts if needed */
            width: 100%;
            max-width: 1200px; /* Added a max-width for content sections */
            margin: 0 auto;
            padding: 0 40px; /* Horizontal padding for content sections */
        }

        /* Header Styles (from index2.html) */
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 40px;
            width: 100%;
            background-color: #fff; /* Header background */
        }

        .logo {
            display: flex;
            flex-direction: column;
            text-decoration: none;
            color: #333;
        }

        .logo img {
            max-width: 100px;
            height: auto;
        }

        .logo span {
            font-size: 14px;
            color: #333;
        }
        /* Added logo-text style */
        .logo .logo-text {
            font-size: 18px; /* Adjust size as needed */
            font-weight: bold; /* Make it bold */
            color: #000; /* Black color */
            text-transform: uppercase; /* Uppercase */
            letter-spacing: 1px; /* Spacing */
            margin-bottom: 2px; /* Small space below */
        }


        nav {
            display: flex;
            justify-content: center;
            flex-grow: 1;
            margin: 0 60px;
        }

        nav ul {
            display: flex;
            list-style: none;
            justify-content: center;
        }

        nav ul li {
            margin: 0 15px;
        }

        nav ul li a {
            text-decoration: none;
            color: #333;
            text-transform: uppercase;
            font-size: 14px;
            font-weight: 500;
            letter-spacing: 1px;
        }

        /* Hero Section Styles (from index2.html) */
        .hero {
            display: flex;
            height: calc(100vh - 90px); /* Adjust based on actual header height */
            min-height: 600px;
            position: relative;
            width: 100%;
            background-color: #bdb4a5; /* Hero background */
            overflow: hidden;
        }

        .hero-content {
            width: 40%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding-left: 70px;
            padding-right: 40px;
            background-color: #bdb4a5; /* Match hero background */
            clip-path: path('M 0 0 L 100% 0 C 95% 30%, 80% 80%, 70% 100% L 0 100% Z');
            position: relative;
            z-index: 2; /* Ensure content is above image if overlap occurs */
        }

        .hero-content h1 {
            font-size: 48px;
            font-weight: 700;
            color: #000;
            margin-bottom: 20px;
            line-height: 1.1;
        }

        .divider {
            width: 120px;
            height: 2px;
            background-color: #d5be88; /* Accent color */
            margin: 30px 0;
        }

        .hero-content p {
            font-size: 16px;
            line-height: 1.6;
            margin-bottom: 30px;
            color: #555; /* Slightly darker than #777 for better contrast */
            max-width: 400px;
        }

        .btn-container {
            display: flex;
            gap: 20px;
            margin-top: 40px;
        }

        .btn {
            padding: 12px 40px;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.3s ease;
            display: inline-block;
            text-align: center;
            border-radius: 4px; /* Added subtle border-radius */
        }

        .btn-primary {
            background-color: #d5be88; /* Accent color */
            color: #000;
            border: none;
        }
         .btn-primary:hover {
            background-color: #c8ae70; /* Darker accent on hover */
         }

        .btn-secondary {
            background-color: transparent;
            color: #000;
            border: 1px solid #000;
        }
         .btn-secondary:hover {
            background-color: rgba(0, 0, 0, 0.05); /* Subtle background on hover */
         }

        .hero-image {
            flex-grow: 1;
            position: relative;
            padding: 0;
            margin: 0;
            /* Ensure image doesn't overlap content due to clip-path */
            margin-left: -5%; /* Adjust as needed based on clip-path */
        }

        .hero-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center center;
            display: block;
        }

        /* General Section Styling */
        .section {
            padding: 80px 0; /* Vertical padding for sections */
        }

        .section-light {
             background-color: #E8E2D9; /* Lighter background for variation */
        }

        .section-dark {
             /* background-color: #bdb4a5; */ /* Removed solid background color */
             background-image: url('beneficios.png'); /* Added background image */
             background-size: cover; /* Ensure image covers the section */
             background-position: center; /* Center the image */
             position: relative; /* Needed for the overlay */
             color: #fff; /* Default text color for the section */
             overflow: hidden; /* Ensure overlay doesn't spill */
        }
         /* Add overlay */
         .section-dark::before {
             content: '';
             position: absolute;
             top: 0;
             left: 0;
             right: 0;
             bottom: 0;
             background-color: rgba(0, 0, 0, 0.78); /* Black overlay with 78% opacity */
             z-index: 1; /* Place overlay above background image */
         }

         /* Ensure content is above the overlay */
         .section-dark .content-container {
             position: relative;
             z-index: 2;
         }

         .section-dark h2, .section-dark h3 {
             color: #fff; /* Keep titles white */
         }
         .section-dark p {
             color: #eee; /* Keep general paragraphs light */
         }
         /* Keep section title and subtitle light */
         .section-dark .section-title {
             color: #fff;
         }
         .section-dark .section-subtitle {
             color: #ccc;
         }

        .section-title {
            text-align: center;
            font-size: 36px;
            font-weight: 700;
            color: #000; /* Title color for light sections */
            margin-bottom: 15px;
            position: relative;
            display: inline-block; /* For the underline */
            left: 50%;
            transform: translateX(-50%);
        }
         .section-dark .section-title {
             color: #fff; /* Title color for dark sections */
         }

        .section-title::after { /* Underline for titles */
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background-color: #d5be88; /* Accent color */
        }

        .section-subtitle {
            text-align: center;
            font-size: 18px;
            color: #555;
            max-width: 600px;
            margin: 0 auto 60px auto; /* Bottom margin */
        }
         .section-dark .section-subtitle {
             color: #ccc;
         }

        /* Benefits Section */
        .benefits-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid */
            gap: 30px;
        }

        .benefit-card {
            background-color: #fff; /* Card background */
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            text-align: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
         .section-dark .benefit-card {
             background-color: #c6bfb7; /* Slightly lighter card on dark bg */
             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
         }


        .benefit-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
        }
         .section-dark .benefit-card:hover {
             box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
         }

        .benefit-icon {
            font-size: 40px;
            color: #d5be88; /* Accent color */
            margin-bottom: 20px;
            display: inline-block;
        }

        .benefit-card h3 {
            font-size: 22px;
            font-weight: 600;
            color: #000;
            margin-bottom: 15px;
        }
         .section-dark .benefit-card h3 {
             color: #000; /* Keep black for readability on light card */
         }

        .benefit-card p {
            font-size: 15px;
            line-height: 1.6;
            color: #555;
        }
         .section-dark .benefit-card p {
             color: #333;
         }

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

        .service-card {
            background-color: #fff;
            border-radius: 8px;
            overflow: hidden; /* To contain image/header */
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            display: flex;
            flex-direction: column;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
         .section-dark .service-card {
             background-color: #c6bfb7; /* Keep card background light */
             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
         }

        .service-card:hover {
             transform: translateY(-8px);
             box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
        }
         .section-dark .service-card:hover {
             box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
         }

        .service-card-header {
            background-color: #d5be88; /* Accent color header */
            color: #000;
            padding: 40px 20px;
            text-align: center;
            font-size: 40px; /* Icon size */
        }

        .service-card-body {
            padding: 30px;
            flex-grow: 1; /* Allow body to grow */
            display: flex;
            flex-direction: column;
        }

        .service-card h3 {
            font-size: 22px;
            font-weight: 600;
            color: #000;
            margin-bottom: 15px;
        }
         .section-dark .service-card h3 {
             color: #000; /* Keep card titles black */
         }

        .service-card p {
            font-size: 15px;
            line-height: 1.6;
            color: #555;
            margin-bottom: 20px;
            flex-grow: 1; /* Push price/button down */
        }
         .section-dark .service-card p {
             color: #333; /* Keep card text dark */
         }

        .service-card ul {
            list-style: none;
            margin-bottom: 25px;
            padding-left: 0;
        }

        .service-card ul li {
            font-size: 15px;
            color: #555;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }
         .section-dark .service-card ul li {
             color: #333; /* Keep list item text dark */
         }

        .service-card ul li i {
            color: #d5be88; /* Accent color for check icon */
            margin-right: 10px;
            font-size: 14px;
        }

        .service-price {
            font-size: 28px;
            font-weight: 700;
            color: #000;
            margin-bottom: 25px;
        }
         .section-dark .service-price {
             color: #000; /* Keep price black */
         }

        .service-card .btn { /* Button specific style */
            width: 100%;
        }

        /* Testimonials Section (Adapted from refator-index.html) */
        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

        .testimonial-card {
            background-color: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            border-left: 5px solid #d5be88; /* Accent border */
        }
         .section-dark .testimonial-card {
             background-color: #c6bfb7;
             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
         }

        .testimonial-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .testimonial-img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 15px;
            border: 2px solid #d5be88; /* Accent border */
        }

        .testimonial-info h4 {
            font-size: 18px;
            font-weight: 600;
            color: #000;
            margin: 0;
        }
         .section-dark .testimonial-info h4 {
             color: #000;
         }

        .testimonial-rating {
            color: #f39c12; /* Star color */
            font-size: 14px;
        }

        .testimonial-body {
            font-style: italic;
            color: #555;
            margin-bottom: 15px;
            line-height: 1.6;
        }
         .section-dark .testimonial-body {
             color: #333;
         }

        .testimonial-footer {
            font-size: 14px;
            color: #777;
        }
         .section-dark .testimonial-footer {
             color: #555;
         }

         /* Disclaimer Style */
         .testimonial-disclaimer {
             text-align: center;
             font-size: 14px;
             color: #777;
             margin-top: 40px; /* Space above the disclaimer */
             font-style: italic;
         }
          .section-dark .testimonial-disclaimer { /* Style for dark section if testimonials were dark */
              color: #bbb;
          }


         /* FAQ Section */
         .faq-container {
             max-width: 800px; /* Limit width for readability */
             margin: 0 auto; /* Center the container */
             display: flex;
             flex-direction: column;
             gap: 15px; /* Space between FAQ items */
         }

         .faq-item {
             background-color: #c6bfb7; /* Match dark section card background */
             border-radius: 8px;
             overflow: hidden; /* Ensure smooth transition */
             box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
         }
          /* Adjust background if FAQ is in a light section */
          .section-light .faq-item {
              background-color: #fff;
          }


         .faq-question {
             display: flex;
             justify-content: space-between;
             align-items: center;
             width: 100%;
             padding: 20px 25px;
             background: none;
             border: none;
             cursor: pointer;
             text-align: left;
             font-size: 18px;
             font-weight: 600;
             color: #000; /* Question text color */
         }
          .section-dark .faq-question {
              color: #000; /* Keep black on light card */
          }
          .section-light .faq-question {
              color: #000; /* Keep black on white card */
          }


         .faq-question span {
             flex-grow: 1;
             margin-right: 15px;
         }

         .faq-icon {
             font-size: 16px;
             color: #d5be88; /* Accent color for icon */
             transition: transform 0.3s ease;
         }

         .faq-answer {
             /* padding: 0 25px 20px 25px; */ /* Removed initial vertical padding */
             padding: 0 25px; /* Apply only horizontal padding initially */
             max-height: 0; /* Initially hidden */
             overflow: hidden;
             /* transition: max-height 0.4s ease-out, padding 0.4s ease-out; */ /* Update transition properties */
             transition: max-height 0.4s ease-out, padding-top 0.4s ease-out, padding-bottom 0.4s ease-out;
         }

         .faq-answer p {
             font-size: 15px;
             line-height: 1.6;
             color: #333; /* Answer text color */
             margin: 0; /* Reset margin */
         }
          .section-dark .faq-answer p {
              color: #333; /* Keep dark on light card */
          }
          .section-light .faq-answer p {
              color: #555; /* Slightly lighter on white card */
          }

         /* Active state for FAQ */
         .faq-item.active .faq-answer {
             max-height: 300px; /* Adjust max-height if needed for longer answers */
             /* padding-top: 0; */ /* Remove this if not needed */
             padding-top: 10px; /* Add some top padding when open */
             padding-bottom: 20px; /* Apply bottom padding only when open */
         }

         .faq-item.active .faq-icon {
             transform: rotate(180deg);
         }

        /* Footer Section */
        .footer {
            background-color: #333; /* Dark background for footer */
            color: #ccc; /* Light text color */
            padding-top: 60px; /* Padding above content */
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            padding-bottom: 40px; /* Padding below content */
        }

        .footer-column h4 {
            font-size: 18px;
            font-weight: 600;
            color: #fff; /* White heading */
            margin-bottom: 20px;
            position: relative;
        }
        /* Underline for footer headings */
        .footer-column h4::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 40px;
            height: 2px;
            background-color: #d5be88; /* Accent color */
        }

        .footer-column p {
            font-size: 15px;
            line-height: 1.7;
            margin-bottom: 10px;
            color: #bbb; /* Slightly lighter gray for text */
        }

        /* Style for the map icon link */
        .map-link {
            color: #bbb; /* Match surrounding text color */
            text-decoration: none;
            margin-left: 8px; /* Space between address and icon */
            font-size: 16px; /* Adjust icon size if needed */
            transition: color 0.3s ease;
        }
        .map-link:hover {
            color: #d5be88; /* Accent color on hover */
        }

        .footer-links {
            list-style: none;
            padding: 0;
            margin: 0;
        }

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

        .footer-links a {
            color: #bbb;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .footer-links a:hover {
            color: #d5be88; /* Accent color on hover */
        }

        .social-links {
            margin-top: 20px;
        }

        .social-links a {
            color: #bbb;
            font-size: 20px;
            margin-right: 15px;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .social-links a:hover {
            color: #d5be88; /* Accent color on hover */
        }

        .footer-bottom {
            background-color: #222; /* Slightly darker bottom bar */
            text-align: center;
            padding: 20px 0;
            margin-top: 40px; /* Space above bottom bar */
        }

        .footer-bottom p {
            margin: 0;
            font-size: 14px;
            color: #aaa;
        }

        /* Floating WhatsApp Button */
        .whatsapp-container { /* Container for button and tooltip */
            position: fixed;
            bottom: 40px;
            right: 40px;
            z-index: 100;
        }

        .whatsapp-float {
            /* position: fixed; */ /* Removed fixed positioning from button itself */
            width: 60px;
            height: 60px;
            /* bottom: 40px; */ /* Removed */
            /* right: 40px; */ /* Removed */
            background-color: #25d366; /* WhatsApp Green */
            color: #FFF;
            border-radius: 50px;
            text-align: center;
            font-size: 30px;
            box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
            /* z-index: 100; */ /* Moved to container */
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            transition: transform 0.3s ease;
            position: relative; /* Needed for tooltip positioning */
        }

        .whatsapp-float:hover {
            transform: scale(1.1); /* Slightly enlarge on hover */
        }

        /* WhatsApp Tooltip */
        .whatsapp-tooltip {
            position: absolute;
            bottom: 50%; /* Center vertically */
            right: 100%; /* Position to the left of the button */
            transform: translateY(50%); /* Adjust vertical centering */
            margin-right: 15px; /* Space between tooltip and button */
            background-color: rgba(0, 0, 0, 0.8);
            color: #fff;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 13px;
            white-space: nowrap;
            opacity: 0; /* Hidden by default */
            visibility: hidden; /* Hidden by default */
            transition: opacity 0.3s ease, visibility 0.3s ease;
            pointer-events: none; /* Prevent tooltip from blocking hover */
        }

        /* Show tooltip on container hover */
        .whatsapp-container:hover .whatsapp-tooltip {
            opacity: 1;
            visibility: visible;
        }
        /* Show tooltip after delay (handled by JS) */
        .whatsapp-tooltip.show {
            opacity: 1;
            visibility: visible;
        }


        /* Responsive Adjustments */
        @media (max-width: 992px) {
            .hero {
                flex-direction: column;
                height: auto;
                min-height: unset; /* Remove min-height */
            }

            .hero-content {
                width: 100%;
                padding: 60px 40px; /* Increase padding */
                clip-path: none;
                height: auto;
                text-align: center; /* Center text */
            }
             .hero-content .divider {
                 margin-left: auto; /* Center divider */
                 margin-right: auto; /* Center divider */
             }
             .hero-content .btn-container {
                 justify-content: center; /* Center buttons */
             }


            .hero-image {
                width: 100%;
                height: 400px; /* Or adjust as needed */
                flex-grow: 0;
                margin-left: 0; /* Reset margin */
            }

            nav {
                margin: 0 20px;
            }

            nav ul li {
                margin: 0 10px; /* Slightly reduce spacing */
            }
            .content-container {
                 padding: 0 30px; /* Adjust padding */
            }
             .footer-content {
                 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Adjust footer columns */
             }
        }

        @media (max-width: 768px) {
            header {
                 padding: 15px 20px; /* Reduce padding */
                 flex-wrap: wrap; /* Allow header items to wrap */
                 justify-content: center; /* Center items when wrapped */
            }
             header .logo {
                 margin-bottom: 15px; /* Space below logo when wrapped */
                 width: 100%; /* Full width for logo */
                 align-items: center; /* Center logo content */
             }
             header .logo span { /* Adjust logo text size */
                 font-size: 13px;
             }
             header .logo .logo-text {
                 font-size: 16px;
             }


            nav {
                margin: 10px 0 0 0; /* Adjust margin */
                justify-content: center; /* Center nav */
                overflow-x: auto; /* Enable horizontal scroll */
                width: 100%;
                order: 3; /* Move nav below logo */
                padding-bottom: 10px; /* Space for scrollbar if needed */
            }
             nav ul {
                 justify-content: flex-start; /* Align items to start for scroll */
                 padding: 0 10px; /* Padding for scrollable area */
                 flex-wrap: nowrap; /* Prevent wrapping */
                 white-space: nowrap; /* Prevent wrapping */
             }
             nav ul li {
                 margin: 0 8px; /* Reduce spacing */
             }
             nav ul li a {
                 font-size: 13px; /* Smaller nav links */
             }

            .hero {
                 height: auto; /* Let height be determined by content */
            }
            .hero-content {
                 padding: 40px 20px;
            }
             .hero-content h1 {
                 font-size: 32px; /* Smaller heading */
             }
             .hero-content p {
                 font-size: 15px;
             }
             .btn-container {
                 flex-direction: column; /* Stack buttons */
                 align-items: center;
                 gap: 15px;
             }
             .btn {
                 width: 80%; /* Make buttons wider */
                 max-width: 300px;
             }

            .section {
                 padding: 60px 0; /* Reduce section padding */
            }
            .section-title {
                 font-size: 28px;
            }
            .section-subtitle {
                 font-size: 16px;
                 margin-bottom: 40px;
            }
            .content-container {
                 padding: 0 20px; /* Reduce padding */
            }

            .benefits-grid, .services-grid, .testimonials-grid {
                 grid-template-columns: 1fr; /* Stack cards */
            }

            .faq-container {
                 max-width: 100%; /* Full width */
            }
            .faq-question {
                 font-size: 16px;
                 padding: 15px 20px;
            }
            .faq-answer p {
                 font-size: 14px;
            }

            .footer-content {
                 grid-template-columns: 1fr; /* Stack footer columns */
                 text-align: center;
            }
            .footer-column h4::after {
                 left: 50%; /* Center underline */
                 transform: translateX(-50%);
            }
            .social-links {
                 justify-content: center;
                 display: flex;
            }
            .social-links a {
                 margin: 0 10px;
            }
            .footer-column p {
                 font-size: 14px;
            }

            .whatsapp-container {
                 bottom: 20px;
                 right: 20px;
            }
            .whatsapp-float {
                 width: 50px;
                 height: 50px;
                 font-size: 25px;
            }
            .whatsapp-tooltip {
                 display: none; /* Hide tooltip on mobile */
            }
        }