{"id":16262,"date":"2025-06-27T18:17:32","date_gmt":"2025-06-27T18:17:32","guid":{"rendered":"https:\/\/directhomeservice.com\/?page_id=16262"},"modified":"2025-07-11T08:03:17","modified_gmt":"2025-07-11T08:03:17","slug":"pricing-page-new","status":"publish","type":"page","link":"https:\/\/directhomeservice.com\/es\/pricing-page-new\/","title":{"rendered":"P\u00e1gina de precios (nueva)"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"16262\" class=\"elementor elementor-16262\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f186723 e-flex e-con-boxed wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"f186723\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3ec0238 elementor-widget elementor-widget-html\" data-id=\"3ec0238\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n.hero-banner {\r\n  background: linear-gradient(135deg, #2e3192 0%, #6366f1 100%);\r\n  padding: 60px 20px;\r\n  text-align: center;\r\n  color: white;\r\n  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n}\r\n\r\n.hero-banner h1 {\r\n  font-size: 2.5rem;\r\n  font-weight: bold;\r\n  margin-bottom: 20px;\r\n  color: white;\r\n}\r\n\r\n.hero-banner h2 {\r\n  font-size: 2rem;\r\n  font-weight: bold;\r\n  margin-bottom: 20px;\r\n  color: white;\r\n}\r\n\r\n.hero-banner p {\r\n  font-size: 1rem;\r\n  max-width: 700px;\r\n  margin: 0 auto;\r\n  color: #e6e6e6;\r\n}\r\n<\/style>\r\n\r\n<div class=\"hero-banner\">\r\n  <h1>Pruebe el servicio Direct Home gratis durante 30 d\u00edas<\/h1>\r\n  <h2>Sin compromiso, acceso total<\/h2>\r\n  <p>\r\n    Pruebe cualquier plan -Solo o Equipo- y desbloquee potentes herramientas para agilizar su negocio de servicios a domicilio.\r\n  <\/p>\r\n<\/div>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e8f0044 elementor-widget elementor-widget-html\" data-id=\"e8f0044\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n      body {\r\n        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n        margin: 0;\r\n        padding: 0;\r\n        background: #ffffff;\r\n        color: #17181c;\r\n        min-height: 100vh;\r\n      }\r\n  \r\n      .container {\r\n        max-width: 1200px;\r\n        margin: 0 auto;\r\n        padding: 3rem 2rem;\r\n      }\r\n  \r\n      .header {\r\n        text-align: center;\r\n        color: #17181c;\r\n        margin-bottom: 3rem;\r\n      }\r\n  \r\n      .header h1 {\r\n        font-size: 3rem;\r\n        font-weight: 700;\r\n        margin-bottom: 1rem;\r\n        color: #17181c;\r\n      }\r\n  \r\n      .header p {\r\n        font-size: 1.2rem;\r\n        color: #718096;\r\n        max-width: 600px;\r\n        margin: 0 auto;\r\n      }\r\n  \r\n      .toggle-container {\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        margin-bottom: 3rem;\r\n        gap: 1.5rem;\r\n        font-weight: 500;\r\n        font-size: 1rem;\r\n      }\r\n  \r\n      .toggle-label {\r\n        color: #17181c;\r\n        transition: color 0.3s ease;\r\n        cursor: pointer;\r\n      }\r\n  \r\n      .toggle-label.inactive {\r\n        color: #9ca3af;\r\n      }\r\n  \r\n      .save-badge {\r\n        \/* background: linear-gradient(90deg, #1e3a8a 0%, #ffffff 100%); *\/\r\n        background: linear-gradient(90deg, #9b97d3 0%,  #ffffff 100%);\r\n        color: #17181c;\r\n        padding: 0.35rem 0.9rem;\r\n        border-radius: 10px;\r\n        font-size: 0.75rem;\r\n        font-weight: 600;\r\n        margin-left: 0.5rem;\r\n      }\r\n  \r\n      .toggle-switch {\r\n        position: relative;\r\n        display: inline-block;\r\n        width: 52px;\r\n        height: 28px;\r\n      }\r\n  \r\n      .toggle-switch input {\r\n        opacity: 0;\r\n        width: 0;\r\n        height: 0;\r\n      }\r\n  \r\n      .slider {\r\n        position: absolute;\r\n        cursor: pointer;\r\n        top: 0; \r\n        left: 0;\r\n        right: 0; \r\n        bottom: 0;\r\n        background-color: #e5e7eb;\r\n        transition: 0.3s ease;\r\n        border-radius: 28px;\r\n      }\r\n  \r\n      .slider:before {\r\n        position: absolute;\r\n        content: \"\";\r\n        height: 24px;\r\n        width: 24px;\r\n        left: 2px;\r\n        bottom: 2px;\r\n        background-color: white;\r\n        transition: 0.3s ease;\r\n        border-radius: 50%;\r\n        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);\r\n      }\r\n  \r\n      input:checked + .slider {\r\n        background-color: #17181c;\r\n      }\r\n  \r\n      input:checked + .slider:before {\r\n        transform: translateX(24px);\r\n      }\r\n  \r\n      .slider:hover {\r\n        background-color: #d1d5db;\r\n      }\r\n  \r\n      input:checked + .slider:hover {\r\n        background-color: #17181c;\r\n      }\r\n  \r\n      .plans {\r\n        display: flex;\r\n        justify-content: center;\r\n        gap: 2rem;\r\n        margin-bottom: 4rem;\r\n        flex-wrap: wrap;\r\n      }\r\n  \r\n      .plan-card {\r\n        background: white;\r\n        border-radius: 16px;\r\n        padding: 2rem 1.5rem;\r\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\r\n        text-align: left;\r\n        position: relative;\r\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n        border: 1px solid #f1f5f9;\r\n        max-width: 350px;\r\n      }\r\n  \r\n      .plan-card:hover {\r\n        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);\r\n      }\r\n  \r\n      .plan-card.popular {\r\n        border: 1px solid #e8e9eb;\r\n        transform: none;\r\n      }\r\n  \r\n      .popular-badge {\r\n        display: inline-flex;\r\n        align-items: center;\r\n        background: linear-gradient(90deg, #9b97d3 0%, #da19c0 100%);\r\n        border-radius: 25px;\r\n        padding: 1px;\r\n        position: relative;\r\n      }\r\n  \r\n      .popular-badge-inner {\r\n        display: flex;\r\n        align-items: center;\r\n        background: #ffffff;\r\n        color: #17181c;\r\n        padding: 0rem 0.6rem;\r\n        border-radius: 24px;\r\n        font-size: 0.6rem;\r\n        font-weight: 600;\r\n        letter-spacing: 0.5px;\r\n        text-transform: uppercase;\r\n        white-space: nowrap;\r\n      }\r\n  \r\n      .plan-title {\r\n        font-size: 1.5rem;\r\n        font-weight: 700;\r\n        color: #17181c;\r\n        margin-bottom: 1rem;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n        width: 100%;\r\n      }\r\n  \r\n      .plan-price-container {\r\n        margin-bottom: 1.5rem;\r\n      }\r\n  \r\n      .plan-price {\r\n        font-size: 2.5rem;\r\n        font-weight: 700;\r\n        color: #17181c;\r\n        line-height: 1;\r\n        transition: all 0.3s ease;\r\n        position: relative;\r\n      }\r\n  \r\n      .plan-price.updating {\r\n        transition: all 0.3s ease;\r\n      }\r\n  \r\n      .plan-price-container {\r\n        margin-bottom: 1.5rem;\r\n      }\r\n  \r\n      .plan-period {\r\n        color: #718096;\r\n        font-size: 1rem;\r\n        margin-top: 0.25rem;\r\n        font-weight: 400;\r\n      }\r\n  \r\n      .plan-description {\r\n        color: #718096;\r\n        margin-bottom: 2rem;\r\n        line-height: 1.5;\r\n      }\r\n  \r\n      .user-count {\r\n        margin-bottom: 2rem;\r\n        font-weight: 600;\r\n        color: #17181c;\r\n      }\r\n  \r\n      .user-slider {\r\n        width: 100%;\r\n        margin: 1rem 0;\r\n        -webkit-appearance: none;\r\n        appearance: none;\r\n        height: 6px;\r\n        background: #e8e9eb;\r\n        border-radius: 3px;\r\n        outline: none;\r\n      }\r\n  \r\n      .user-slider::-webkit-slider-thumb {\r\n        -webkit-appearance: none;\r\n        appearance: none;\r\n        width: 20px;\r\n        height: 20px;\r\n        background: #2E3192;\r\n        border-radius: 50%;\r\n        cursor: pointer;\r\n      }\r\n  \r\n      .user-slider::-moz-range-thumb {\r\n        width: 20px;\r\n        height: 20px;\r\n        background: #2E3192;\r\n        border-radius: 50%;\r\n        cursor: pointer;\r\n        border: none;\r\n      }\r\n  \r\n      .plan-button {\r\n        width: 100%;\r\n        background: #2E3192;\r\n        color: white;\r\n        border: none;\r\n        padding: 1rem 2rem;\r\n        border-radius: 50px;\r\n        font-size: 1rem;\r\n        font-weight: 600;\r\n        cursor: pointer;\r\n        margin: 0 0 2rem 0;\r\n        transition: all 0.3s ease;\r\n      }\r\n  \r\n      .plan-button:hover {\r\n        background: #434190;\r\n      }\r\n  \r\n      .plan-features {\r\n        list-style: none;\r\n        padding: 0;\r\n        text-align: left;\r\n      }\r\n  \r\n      .plan-features li {\r\n        padding: 0.2rem 0;\r\n        border: none;\r\n        display: flex;\r\n        align-items: center;\r\n        font-size: 1rem;\r\n        text-align: left;\r\n      }\r\n  \r\n      .plan-features li:last-child {\r\n        border-bottom: none;\r\n      }\r\n  \r\n      .plan-features li.included::before {\r\n        content: \"\u2714\";\r\n        font-weight: bold;\r\n        margin-right: 0.75rem;\r\n        font-size: 14px;\r\n      }\r\n  \r\n      .plan-features li.excluded::before {\r\n        content: \"\u2715\";\r\n        color: red;\r\n        font-weight: bold;\r\n        margin-right: 0.75rem;\r\n        font-size: 14px;\r\n      }\r\n  \r\n      .plan-features li.excluded {\r\n        opacity: 0.6;\r\n      }\r\n  \r\n      \/* Contact Section *\/\r\n      .contact-section {\r\n        background: linear-gradient(135deg, #2e3192 0%, #6366f1 100%);\r\n        border-radius: 32px;\r\n        padding: 0.7rem 2rem;\r\n        margin: 4rem 0;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n        gap: 2rem;\r\n      }\r\n  \r\n      .contact-text {\r\n        color: white;\r\n        font-size: 1.1rem;\r\n        font-weight: 500;\r\n        line-height: 1.4;\r\n        flex: 1;\r\n      }\r\n  \r\n      .contact-button {\r\n        background: white;\r\n        color: #2e3192;\r\n        padding: 0.75rem 2rem;\r\n        border-radius: 50px;\r\n        font-size: 1rem;\r\n        font-weight: 600;\r\n        border: none;\r\n        cursor: pointer;\r\n        transition: all 0.3s ease;\r\n        white-space: nowrap;\r\n        flex-shrink: 0;\r\n      }\r\n  \r\n      .contact-button:hover {\r\n        background: #f8fafc;\r\n        transform: translateY(-2px);\r\n        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);\r\n      }\r\n  \r\n      \/* Features Section *\/\r\n      .features-section {\r\n        background: #F3F4F6;\r\n        border-radius: 24px;\r\n        padding: 4rem 2rem;\r\n        margin-top: 4rem;\r\n      }\r\n  \r\n      .features-title {\r\n        text-align: center;\r\n        margin-bottom: 3rem;\r\n      }\r\n  \r\n      .features-title h2 {\r\n        font-size: 2.5rem;\r\n        font-weight: 700;\r\n        color: #2e3192;\r\n        margin-bottom: 0.5rem;\r\n      }\r\n  \r\n      .features-title p {\r\n        color: #718096;\r\n        font-size: 1.2rem;\r\n        max-width: 600px;\r\n        margin: 0 auto;\r\n      }\r\n  \r\n      .features-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n        gap: 2rem;\r\n        margin-top: 3rem;\r\n      }\r\n  \r\n      .feature-category {\r\n        background: white;\r\n        border-radius: 16px;\r\n        padding: 2rem;\r\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\r\n        border: 1px solid #e2e8f0;\r\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n      }\r\n  \r\n      .feature-category:hover {\r\n        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);\r\n      }\r\n  \r\n      .feature-category-header {\r\n        display: flex;\r\n        align-items: center;\r\n        margin-bottom: 1.5rem;\r\n      }\r\n  \r\n      .feature-icon {\r\n        width: 48px;\r\n        height: 48px;\r\n        background: linear-gradient(135deg, #2E3192 0%, #6366f1 100%);\r\n        border-radius: 12px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        margin-right: 1rem;\r\n        font-size: 1.5rem;\r\n      }\r\n  \r\n      .feature-category-title {\r\n        font-size: 1.5rem;\r\n        font-weight: 700;\r\n        color: #2e3192;\r\n        margin: 0;\r\n      }\r\n  \r\n      .feature-list {\r\n        list-style: none;\r\n        padding: 0;\r\n        margin: 0;\r\n      }\r\n  \r\n      .feature-item {\r\n        display: flex;\r\n        align-items: center;\r\n        padding: 0.4rem 0;\r\n        border-bottom: 1px solid #f1f5f9;\r\n        transition: background-color 0.2s ease;\r\n      }\r\n  \r\n      .feature-item:last-child {\r\n        border-bottom: none;\r\n      }\r\n  \r\n      .feature-item:hover {\r\n        background-color: #f8fafc;\r\n        border-radius: 8px;\r\n      }\r\n  \r\n      .feature-check {\r\n        width: 20px;\r\n        height: 20px;\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        margin-right: 0.75rem;\r\n        flex-shrink: 0;\r\n      }\r\n  \r\n      .feature-check::after {\r\n        content: \"\u2713\";\r\n        color: black;\r\n        font-size: 1rem;\r\n        font-weight: bold;\r\n      }\r\n  \r\n      .feature-name {\r\n        color: #374151;\r\n        font-weight: 500;\r\n        line-height: 1.4;\r\n      }\r\n  \r\n      .all-plans-badge {\r\n        background: linear-gradient(135deg, #10b981 0%, #059669 100%);\r\n        color: white;\r\n        padding: 0.5rem 1rem;\r\n        border-radius: 20px;\r\n        font-size: 0.9rem;\r\n        font-weight: 600;\r\n        text-align: center;\r\n        margin-top: 2rem;\r\n        display: inline-block;\r\n      }\r\n  \r\n      .button-spacer {\r\n        height: 68px;\r\n        margin-top: 16px;\r\n        margin-bottom: 2rem;\r\n      }\r\n  \r\n      @media (max-width: 1024px) {\r\n        .plans {\r\n          justify-content: center;\r\n          gap: 1.5rem;\r\n        }\r\n  \r\n        .plan-card {\r\n          flex: 1;\r\n          max-width: 350px;\r\n        }\r\n      }\r\n  \r\n      @media (max-width: 768px) {\r\n        .container {\r\n          padding: 2rem 1rem;\r\n        }\r\n  \r\n        .plans {\r\n          margin: 0 -0.5rem;\r\n          padding: 0 0.5rem;\r\n        }\r\n  \r\n        .header h1 {\r\n          font-size: 2.2rem;\r\n        }\r\n  \r\n        .plans {\r\n          display: flex;\r\n          flex-direction: column;\r\n          align-items: center;\r\n          gap: 1.5rem;\r\n        }\r\n  \r\n        .plan-card {\r\n          max-width: none;\r\n          margin: 0;\r\n          padding: 1.5rem 1.25rem;\r\n        }\r\n  \r\n        .plan-card.popular {\r\n          transform: none;\r\n        }\r\n  \r\n        .features-section {\r\n          padding: 3rem 1rem;\r\n        }\r\n  \r\n        .features-grid {\r\n          grid-template-columns: 1fr;\r\n          gap: 1.5rem;\r\n        }\r\n  \r\n        .feature-category {\r\n          padding: 1.5rem;\r\n        }\r\n  \r\n        .feature-icon {\r\n          width: 40px;\r\n          height: 40px;\r\n          font-size: 1.2rem;\r\n        }\r\n  \r\n        .feature-category-title {\r\n          font-size: 1.3rem;\r\n          color: #2e3192;\r\n        }\r\n  \r\n        .plan-title {\r\n          font-size: 1.25rem;\r\n        }\r\n  \r\n        .plan-price {\r\n          font-size: 2rem;\r\n        }\r\n  \r\n        .user-slider {\r\n          width: 100%;\r\n          margin: 0.75rem 0;\r\n        }\r\n  \r\n        .user-count {\r\n          margin-bottom: 1.5rem;\r\n        }\r\n  \r\n        .user-count > div {\r\n          justify-content: space-between !important;\r\n          margin: 0.75rem 0 !important;\r\n        }\r\n  \r\n        \/* Hide the spacer div on mobile since vertical alignment isn't needed *\/\r\n        .plan-card .button-spacer {\r\n          display: none !important;\r\n        }\r\n  \r\n        .contact-section {\r\n          flex-direction: column;\r\n          text-align: center;\r\n          padding: 2rem 1.5rem;\r\n          gap: 1.5rem;\r\n        }\r\n  \r\n        .contact-text {\r\n          font-size: 1rem;\r\n        }\r\n  \r\n        .contact-button {\r\n          width: auto;\r\n          min-width: 150px;\r\n        }\r\n  \r\n        \/* FAQ Section Responsive *\/\r\n        .faq-section {\r\n          margin-top: 3rem;\r\n        }\r\n  \r\n        .faq-container {\r\n          padding: 0 1rem;\r\n        }\r\n  \r\n        .faq-header {\r\n          margin-bottom: 2rem;\r\n          text-align: center;\r\n        }\r\n  \r\n        .faq-header h2 {\r\n          font-size: 2rem;\r\n          line-height: 1.3;\r\n        }\r\n  \r\n        .faq-header p {\r\n          font-size: 1rem;\r\n          margin-top: 1rem;\r\n        }\r\n  \r\n        .faq-content {\r\n          flex-direction: column;\r\n          gap: 2rem;\r\n        }\r\n  \r\n        .faq-left {\r\n          flex: none;\r\n          position: static;\r\n        }\r\n  \r\n        .faq-sidebar {\r\n          display: flex;\r\n          flex-direction: column;\r\n          gap: 0.75rem;\r\n          margin-top: 1.5rem;\r\n        }\r\n  \r\n        .faq-nav-item {\r\n          padding: 0.75rem 1.25rem;\r\n          border-radius: 12px;\r\n          background: linear-gradient(270deg, #f8fafc 0%, #ffffff 100%);\r\n          margin: 0;\r\n          font-size: 0.9rem;\r\n          text-align: center;\r\n        }\r\n  \r\n        .faq-nav-item.active {\r\n          background: linear-gradient(270deg, #9b97d3 0%, #ffffff 100%);\r\n          color: #17181c;\r\n        }\r\n  \r\n        .faq-main {\r\n          margin-top: 1rem;\r\n        }\r\n  \r\n        .faq-item {\r\n          margin-bottom: 0.75rem;\r\n          border-radius: 12px;\r\n        }\r\n  \r\n        .faq-question {\r\n          padding: 1.25rem 1rem;\r\n          min-height: auto;\r\n        }\r\n  \r\n        .faq-question-text {\r\n          font-size: 1rem;\r\n          line-height: 1.4;\r\n          margin-right: 0.75rem;\r\n        }\r\n  \r\n        .faq-icon {\r\n          width: 20px;\r\n          height: 20px;\r\n          font-size: 20px;\r\n          flex-shrink: 0;\r\n        }\r\n  \r\n        .faq-answer-text {\r\n          font-size: 0.95rem;\r\n          line-height: 1.5;\r\n          padding: 0 1rem;\r\n        }\r\n  \r\n        .faq-answer-text.expanded {\r\n          padding: 1rem 1rem 1.5rem 1rem;\r\n          max-height: 250px;\r\n        }\r\n      }\r\n  \r\n      @media (max-width: 640px) {\r\n        .container {\r\n          padding: 1.75rem 0.875rem;\r\n        }\r\n  \r\n        .plans {\r\n          margin: 0 -0.375rem;\r\n          padding: 0 0.375rem;\r\n          gap: 1.25rem;\r\n        }\r\n  \r\n        .plan-card {\r\n          max-width: none;\r\n          margin: 0;\r\n          padding: 1.375rem 1.125rem;\r\n        }\r\n  \r\n        .plan-title {\r\n          font-size: 1.2rem;\r\n        }\r\n  \r\n        .plan-price {\r\n          font-size: 1.9rem;\r\n        }\r\n  \r\n        .user-slider {\r\n          width: 100%;\r\n          margin: 0.5rem 0;\r\n        }\r\n  \r\n        .user-count > div {\r\n          justify-content: space-between !important;\r\n          margin: 0.5rem 0 !important;\r\n        }\r\n      }\r\n  \r\n      @media (max-width: 480px) {\r\n        .container {\r\n          padding: 1.5rem 0.75rem;\r\n        }\r\n  \r\n        .plans {\r\n          margin: 0 -0.25rem;\r\n          padding: 0 0.25rem;\r\n        }\r\n  \r\n        .header h1 {\r\n          font-size: 1.8rem;\r\n        }\r\n  \r\n        .header p {\r\n          font-size: 1rem;\r\n          padding: 0 0.5rem;\r\n        }\r\n  \r\n        .plans {\r\n          gap: 1rem;\r\n        }\r\n  \r\n        .plan-card {\r\n          \/* width: 100%; *\/\r\n          max-width: none;\r\n          margin: 0;\r\n          padding: 1.25rem 1rem;\r\n        }\r\n  \r\n        .plan-title {\r\n          font-size: 1.1rem;\r\n        }\r\n  \r\n        .plan-price {\r\n          font-size: 1.75rem;\r\n        }\r\n  \r\n        .user-slider {\r\n          width: 100%;\r\n          margin: 0.5rem 0;\r\n        }\r\n  \r\n        .user-count {\r\n          margin-bottom: 1.25rem;\r\n        }\r\n  \r\n        .user-count > div {\r\n          justify-content: space-between !important;\r\n          margin: 0.5rem 0 !important;\r\n          gap: 0.75rem !important;\r\n        }\r\n  \r\n        .plan-button {\r\n          padding: 0.875rem 1.5rem;\r\n          font-size: 0.9rem;\r\n        }\r\n  \r\n        .toggle-container {\r\n          gap: 1rem;\r\n          font-size: 0.9rem;\r\n        }\r\n  \r\n        .popular-badge-inner {\r\n          font-size: 0.55rem;\r\n          padding: 0.15rem 0.5rem;\r\n        }\r\n  \r\n        \/* Hide spacer div on small mobile devices too *\/\r\n        .plan-card .button-spacer {\r\n          display: none !important;\r\n        }\r\n  \r\n        .contact-section {\r\n          flex-direction: column;\r\n          text-align: center;\r\n          padding: 1.5rem 1rem;\r\n          gap: 1rem;\r\n        }\r\n  \r\n        .contact-text {\r\n          font-size: 0.95rem;\r\n        }\r\n  \r\n        .contact-button {\r\n          width: 100%;\r\n          max-width: 200px;\r\n          padding: 0.75rem 1.5rem;\r\n        }\r\n  \r\n        .features-section {\r\n          padding: 2rem 0.75rem;\r\n        }\r\n  \r\n        .features-title h2 {\r\n          font-size: 2rem;\r\n          color: #2e3192;\r\n        }\r\n  \r\n        .feature-category {\r\n          padding: 1.25rem;\r\n        }\r\n  \r\n        .feature-icon {\r\n          width: 36px;\r\n          height: 36px;\r\n          font-size: 1.1rem;\r\n        }\r\n  \r\n        .feature-category-title {\r\n          font-size: 1.2rem;\r\n          color: #2e3192;\r\n        }\r\n  \r\n        \/* FAQ Section Responsive - Small Mobile *\/\r\n        .faq-section {\r\n          margin-top: 2rem;\r\n        }\r\n  \r\n        .faq-container {\r\n          padding: 0 0.75rem;\r\n        }\r\n  \r\n        .faq-header {\r\n          margin-bottom: 1.5rem;\r\n          text-align: center;\r\n        }\r\n  \r\n        .faq-header h2 {\r\n          font-size: 1.8rem;\r\n          line-height: 1.2;\r\n          margin-bottom: 0.75rem;\r\n        }\r\n  \r\n        .faq-header p {\r\n          font-size: 0.9rem;\r\n          line-height: 1.5;\r\n          margin-top: 0.75rem;\r\n        }\r\n  \r\n        .faq-content {\r\n          flex-direction: column;\r\n          gap: 1.25rem;\r\n        }\r\n  \r\n        .faq-left {\r\n          flex: none;\r\n          position: static;\r\n        }\r\n  \r\n        .faq-sidebar {\r\n          display: flex;\r\n          flex-direction: column;\r\n          gap: 0.5rem;\r\n          margin-top: 1rem;\r\n          width: 100% !important;\r\n        }\r\n  \r\n        .faq-nav-item {\r\n          padding: 0.65rem 1rem;\r\n          border-radius: 10px;\r\n          background: linear-gradient(270deg, #f8fafc 0%, #ffffff 100%);\r\n          margin: 0;\r\n          font-size: 0.85rem;\r\n          font-weight: 500;\r\n          text-align: center;\r\n        }\r\n  \r\n        .faq-nav-item.active {\r\n          background: linear-gradient(270deg, #9b97d3 0%, #ffffff 100%);\r\n          color: #17181c;\r\n          font-weight: 600;\r\n        }\r\n  \r\n        .faq-main {\r\n          margin-top: 0.75rem;\r\n        }\r\n  \r\n        .faq-item {\r\n          margin-bottom: 0.5rem;\r\n          border-radius: 10px;\r\n        }\r\n  \r\n        .faq-question {\r\n          padding: 1rem 0.75rem;\r\n          min-height: 44px;\r\n        }\r\n  \r\n        .faq-question-text {\r\n          font-size: 0.95rem;\r\n          line-height: 1.3;\r\n          margin-right: 0.5rem;\r\n          font-weight: 600;\r\n        }\r\n  \r\n        .faq-icon {\r\n          width: 18px;\r\n          height: 18px;\r\n          font-size: 18px;\r\n          flex-shrink: 0;\r\n        }\r\n  \r\n        .faq-answer-text {\r\n          font-size: 0.9rem;\r\n          line-height: 1.4;\r\n          padding: 0 0.75rem;\r\n        }\r\n  \r\n        .faq-answer-text.expanded {\r\n          padding: 0.75rem 0.75rem 1.25rem 0.75rem;\r\n          max-height: 200px;\r\n        }\r\n      }\r\n  \r\n      \/* FAQ Section *\/\r\n      .faq-section {\r\n        margin-top: 4rem;\r\n        padding: 0;\r\n      }\r\n  \r\n      .faq-container {\r\n        max-width: 1200px;\r\n        margin: 0 auto;\r\n        padding: 0 2rem;\r\n      }\r\n  \r\n      .faq-content {\r\n        display: flex;\r\n        gap: 2rem;\r\n        align-items: flex-start;\r\n      }\r\n  \r\n      .faq-left {\r\n        flex: 0 0 420px;\r\n        top: 2rem;\r\n      }\r\n  \r\n      .faq-header {\r\n        text-align: left;\r\n        margin-bottom: 3rem;\r\n      }\r\n  \r\n      .faq-header h2 {\r\n        font-size: 2.5rem;\r\n        font-weight: 700;\r\n        color: #17181c;\r\n        margin-bottom: 1rem;\r\n        line-height: 1.2;\r\n      }\r\n  \r\n      .faq-header p {\r\n        color: #718096;\r\n        font-size: 1.1rem;\r\n        line-height: 1.6;\r\n      }\r\n  \r\n      .faq-sidebar {\r\n        margin-top: 1rem;\r\n        width: 50%;\r\n      }\r\n  \r\n      .faq-nav-item {\r\n        padding: 0.75rem 1rem;\r\n        cursor: pointer;\r\n        color: #9ca3af;\r\n        font-weight: 500;\r\n        font-size: 0.95rem;\r\n        transition: all 0.3s ease;\r\n        border-radius: 8px;\r\n        margin: 0.25rem 0;\r\n        text-align: left;\r\n      }\r\n  \r\n      .faq-nav-item:hover {\r\n        color: #17181c;\r\n        background: linear-gradient(90deg, #f8fafc 0%, #ffffff 100%);\r\n      }\r\n  \r\n      .faq-nav-item.active {\r\n        color: #17181c;\r\n        font-weight: 600;\r\n        background: linear-gradient(270deg, #9b97d3 0%, #ffffff 100%);\r\n      }\r\n  \r\n      .faq-main {\r\n        flex: 1;\r\n        min-width: 0;\r\n      }\r\n  \r\n      .faq-item {\r\n        border: 1px solid #F3F4F6;\r\n        border-radius: 16px;\r\n        transition: all 0.3s ease;\r\n        margin-bottom: 1rem;\r\n        background: #F3F4F6;\r\n        overflow: hidden;\r\n      }\r\n  \r\n      .faq-item:last-child {\r\n        border-bottom: none;\r\n      }\r\n  \r\n      .faq-question {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n        padding: 1.5rem 2rem;\r\n        cursor: pointer;\r\n        background: transparent;\r\n        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n        border: none;\r\n        text-align: left;\r\n        font-family: inherit;\r\n      }\r\n  \r\n      .faq-question-text {\r\n        font-size: 1.1rem;\r\n        font-weight: 600;\r\n        color: #17181c;\r\n        flex: 1;\r\n        margin-right: 1rem;\r\n      }\r\n  \r\n      .faq-icon {\r\n        width: 24px;\r\n        height: 24px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        font-size: 24px;\r\n        font-weight: 600;\r\n        color: #17181c;\r\n        transition: all 0.3s ease;\r\n        flex-shrink: 0;\r\n        line-height: 1;\r\n      }\r\n  \r\n      .faq-answer {\r\n        background: transparent;\r\n      }\r\n  \r\n      .faq-answer-text {\r\n        max-height: 0;\r\n        overflow: hidden;\r\n        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n        color: #718096;\r\n        line-height: 1.6;\r\n        font-size: 1rem;\r\n        padding: 0 2rem;\r\n      }\r\n  \r\n      .faq-answer-text.expanded {\r\n        max-height: 300px;\r\n        padding: 1rem 2rem 2rem 2rem;\r\n      }\r\n    <\/style>\r\n  <body>\r\n    <div class=\"container\">\r\n      <div class=\"header\">\r\n        <h1>Planes y precios<\/h1>\r\n        <p>Tanto si trabaja solo como si forma parte de un equipo en expansi\u00f3n, tenemos un plan para usted.<\/p>\r\n      <\/div>\r\n  \r\n      <div class=\"toggle-container\">\r\n        <span class=\"toggle-label\" id=\"monthlyLabel\">Mensualmente<\/span>\r\n        <label class=\"toggle-switch\">\r\n          <input type=\"checkbox\" id=\"billingToggle\" \/>\r\n          <span class=\"slider\"><\/span>\r\n        <\/label>\r\n        <span class=\"toggle-label\" id=\"annuallyLabel\">Anualmente <span class=\"save-badge\">guardar 20%<\/span><\/span>\r\n      <\/div>\r\n  \r\n      <div class=\"plans\" id=\"plansContainer\"><\/div>\r\n  \r\n      <!-- Contact Section -->\r\n      <div class=\"contact-section\">\r\n        <div class=\"contact-text\">\r\n          Si su empresa necesita m\u00e1s de 20 usuarios, p\u00f3ngase en contacto con nosotros directamente para obtener una consulta y un presupuesto gratuitos.\r\n        <\/div>\r\n        <button class=\"contact-button\">P\u00f3ngase en contacto con nosotros<\/button>\r\n      <\/div>\r\n  \r\n      <div class=\"features-section\">\r\n        <div class=\"features-title\">\r\n          <h2>Todas las herramientas que necesita, incluidas<\/h2>\r\n          <p>Todos los planes incluyen nuestro conjunto completo de funciones, desde programaci\u00f3n y facturaci\u00f3n hasta an\u00e1lisis e integraciones. Elige tu plan en funci\u00f3n del tama\u00f1o del equipo.<\/p>\r\n        <\/div>\r\n        <div class=\"features-grid\" id=\"featuresGrid\"><\/div>\r\n      <\/div>\r\n  \r\n      <!-- FAQ Section -->\r\n      <div class=\"faq-section\">\r\n        <div class=\"faq-container\">\r\n          <div class=\"faq-content\">\r\n            <div class=\"faq-left\">\r\n              <div class=\"faq-header\">\r\n                <h2>Preguntas m\u00e1s frecuentes<\/h2>\r\n                <p>\u00bfA\u00fan no est\u00e1 seguro? Estas respuestas r\u00e1pidas pueden ayudarte a decidirte: planes, funciones, facturaci\u00f3n y mucho m\u00e1s.<\/p>\r\n              <\/div>\r\n              \r\n              <div class=\"faq-sidebar\">\r\n                <div class=\"faq-nav-item active\" data-category=\"pricing\">Precios y planes<\/div>\r\n                <div class=\"faq-nav-item\" data-category=\"features\">Caracter\u00edsticas y acceso<\/div>\r\n                <div class=\"faq-nav-item\" data-category=\"account\">Cuenta y configuraci\u00f3n<\/div>\r\n              <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"faq-main\">\r\n              <div class=\"\" id=\"faqItems\">\r\n                <!-- FAQ items will be generated by JavaScript -->\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  \r\n    <script>\r\n      const plans = [\r\n        {\r\n          id: \"solo\",\r\n          name: \"Solo\",\r\n          description: \"Built for individuals who don't need team management.\",\r\n          pricing: {\r\n            monthly: { amount: 20, display: \"$20\", period: \"\/month\" },\r\n            annual: { amount: 200, display: \"$200\", period: \"\/year\" }\r\n          },\r\n          users: {\r\n            monthly: \"1 user\",\r\n            annual: \"1 user\"\r\n          },\r\n          features: [\r\n            { name: \"Scheduling\", included: true },\r\n            { name: \"Invoicing\", included: true },\r\n            { name: \"Estimates\", included: true },\r\n            { name: \"Payments\", included: true },\r\n            { name: \"Quickbooks online\", included: true },\r\n            { name: \"Analytics\", included: true },\r\n            { name: \"Premium support\", included: true }\r\n          ],\r\n          cta: \"Start with Solo\",\r\n          popular: false\r\n        },\r\n        {\r\n          id: \"team\",\r\n          name: \"Team\",\r\n          description: \"Great for growing teams with full access and easy collaboration.\",\r\n          pricing: {\r\n            monthly: { amount: 15, display: \"$15\", period: \"\/user \/month\" },\r\n            annual: { amount: 150, display: \"$150\", period: \"\/user \/year\" }\r\n          },\r\n          users: {\r\n            monthly: \"users\",\r\n            annual: \"users\"\r\n          },\r\n          hasUserSlider: true,\r\n          minUsers: 2,\r\n          maxUsers: 20,\r\n          defaultUsers: 2,\r\n          features: [\r\n            { name: \"Scheduling\", included: true },\r\n            { name: \"Invoicing\", included: true },\r\n            { name: \"Estimates\", included: true },\r\n            { name: \"Payments\", included: true },\r\n            { name: \"Quickbooks online\", included: true },\r\n            { name: \"Analytics\", included: true },\r\n            { name: \"Premium support\", included: true }\r\n          ],\r\n          cta: \"Start Team Trial\",\r\n          popular: true\r\n        }\r\n      ];\r\n  \r\n      const featuresData = {\r\n        \"Core Features\": {\r\n          features: [\r\n            \"Drag & Drop Scheduling\",\r\n            \"Estimates\",\r\n            \"Jobs\",\r\n            \"Invoicing\",\r\n            \"Two-way text messaging\",\r\n            \"Checklists\",\r\n            \"Tip Collection\",\r\n            \"Mobile IOS & Android app\",\r\n            \"GPS Mapping\"\r\n          ]\r\n        },\r\n        \"Business Operations\": {\r\n          features: [\r\n            \"Client Management (CRM)\",\r\n            \"Inventory Management\",\r\n            \"Automated Reminders\",\r\n            \"Marketing Campaign\",\r\n            \"Online Booking\",\r\n            \"Billing\"\r\n          ]\r\n        },\r\n        \"Integrations & Analytics\": {\r\n          features: [\r\n            \"QuickBooks Integration\",\r\n            \"Credit Card Processing\",\r\n            \"Financial Reporting\",\r\n            \"Time and Labor Reports\",\r\n            \"Timesheet Reports\",\r\n            \"Work Order Reports\",\r\n            \"Advanced Reports\"\r\n          ]\r\n        }\r\n      };\r\n  \r\n      \/\/ FAQ Data\r\n        const faqData = [\r\n          \/\/ Features & Access\r\n          {\r\n            question: 'Can I schedule jobs and dispatch my team?',\r\n            answer:\r\n              'Absolutely. Our intuitive calendar lets you assign jobs, manage appointments, and dispatch techs with a few clicks.',\r\n            category: 'features'\r\n          },\r\n          {\r\n            question: 'Can I send estimates and invoices?',\r\n            answer:\r\n              'Yes. You can create branded estimates and invoices, send them via email or SMS, and track their status in real-time.',\r\n            category: 'features'\r\n          },\r\n          {\r\n            question: 'Is there a mobile app?',\r\n            answer:\r\n              'Yes! Your team can access schedules, job details, and customer info on the go with our mobile apps (iOS & Android).',\r\n            category: 'features'\r\n          },\r\n          {\r\n            question: 'Do you integrate with QuickBooks?',\r\n            answer:\r\n              'Yes, we offer a seamless integration with QuickBooks Online for smooth accounting and bookkeeping.',\r\n            category: 'features'\r\n          },\r\n  \r\n          \/\/ Account & Setup\r\n          {\r\n            question: 'How fast can I get set up?',\r\n            answer:\r\n              'Most users are fully up and running in under a day. Our onboarding team can fast-track the process if needed.',\r\n            category: 'account'\r\n          },\r\n          {\r\n            question: 'Do you have training videos or guides?',\r\n            answer:\r\n              'Yes, our Help Center includes step-by-step videos, how-to articles, and live webinars.',\r\n            category: 'account'\r\n          },\r\n          {\r\n            question: 'Do you offer onboarding assistance?',\r\n            answer:\r\n              'Yes! Our onboarding team helps you get up and running fast with personalized setup and training.',\r\n            category: 'account'\r\n          },\r\n          {\r\n            question: 'Does the app work on tablets?',\r\n            answer:\r\n              'Yes, the mobile app is optimized for smartphones and tablets \u2014 both iOS and Android.',\r\n            category: 'account'\r\n          },\r\n          {\r\n            question: 'Is there a desktop version?',\r\n            answer:\r\n              'Yes, you can access the full platform from any modern web browser \u2014 no installation needed.',\r\n            category: 'account'\r\n          },\r\n  \r\n          \/\/ Pricing & Plans\r\n           {\r\n      question: \"What plan is best for my business?\",\r\n      answer: \"Direct Home Service offers only 1 plan: One Plan, All Features. Because we believe even the smallest of companies should have all the features they need to grow their business at an affordable price.\",\r\n      category: \"pricing\",\r\n    },\r\n    {\r\n      question: \"Is there a free trial?\",\r\n      answer: \"Absolutely! Get full access with a 30-day free trial\u2014no credit card needed.\",\r\n      category: \"pricing\",\r\n    },\r\n    {\r\n      question: \"Is Direct Home Service competitively priced?\",\r\n      answer: \"Yes, our pricing is highly competitive for small and mid-sized businesses, without the bloated pricing, complicated setup, or restrictive contracts of other platforms. We focus on ensuring our business partners, no matter their size, can afford all the tools they need to grow their business.\",\r\n      category: \"pricing\",\r\n    },\r\n    {\r\n      question: \"Do I need to sign a contract?\",\r\n      answer: \"No long-term commitments. Cancel anytime. Plus, get a special discount when you choose an annual plan.\",\r\n      category: \"pricing\",\r\n    },\r\n        ];\r\n  \r\n      const billingToggle = document.getElementById(\"billingToggle\");\r\n      const plansContainer = document.getElementById(\"plansContainer\");\r\n      const featuresGrid = document.getElementById(\"featuresGrid\");\r\n      const monthlyLabel = document.getElementById(\"monthlyLabel\");\r\n      const annuallyLabel = document.getElementById(\"annuallyLabel\");\r\n  \r\n      let teamUserCount = 2;\r\n  \r\n      function updateToggleLabels() {\r\n        if (billingToggle.checked) {\r\n          \/\/ Annual is selected\r\n          monthlyLabel.classList.add('inactive');\r\n          annuallyLabel.classList.remove('inactive');\r\n        } else {\r\n          \/\/ Monthly is selected\r\n          monthlyLabel.classList.remove('inactive');\r\n          annuallyLabel.classList.add('inactive');\r\n        }\r\n      }\r\n  \r\n      function renderPlans() {\r\n        const mode = billingToggle.checked ? \"annual\" : \"monthly\";\r\n        plansContainer.innerHTML = \"\";\r\n        \r\n        plans.forEach(plan => {\r\n          const pricing = plan.pricing[mode];\r\n          let price = pricing.display;\r\n          let period = pricing.period;\r\n          \r\n          \/\/ Calculate total price for Team plan based on user count\r\n          if (plan.hasUserSlider && pricing.amount) {\r\n            const totalAmount = pricing.amount * teamUserCount;\r\n            price = `$${totalAmount}`;\r\n          }\r\n          \r\n          let userSection = \"\";\r\n          if (plan.hasUserSlider) {\r\n            const contactMessage = teamUserCount === plan.maxUsers ? \r\n              `<div style=\"color: #718096; font-size: 12px; text-align: center;\">Need more than ${plan.maxUsers} users? Contact us for pricing.<\/div>` : \r\n              '';\r\n            const sliderMargin = teamUserCount === plan.maxUsers ? \r\n              \"margin: 1rem 0 0 0;\" : \r\n              \"margin: 1rem 0;\";\r\n            userSection = `\r\n              <div class=\"user-count\">\r\n                <div style=\"display: flex; align-items: center; justify-content: center; gap: 1rem; ${sliderMargin}\">\r\n                  <span style=\"background: #17181c; color: white; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: bold; padding:0px 6px\">${teamUserCount}<\/span>\r\n                  <input type=\"range\" min=\"${plan.minUsers}\" max=\"${plan.maxUsers}\" step=\"1\" value=\"${teamUserCount}\" class=\"user-slider\" id=\"userSlider\" onchange=\"updateTeamUsers(this.value)\">\r\n                  <span><div style=\"border: 1px solid #e5e7eb; border-radius: 10px; width: 35px; text-align: center;\">${teamUserCount}<\/div> ${plan.users[mode]}<\/span>\r\n                <\/div>\r\n                ${contactMessage}\r\n              <\/div>\r\n            `;\r\n          } else {\r\n            \/\/ Add empty div to align buttons with Team plan\r\n            userSection = `<div class=\"button-spacer\"><\/div>`;\r\n          }\r\n  \r\n          const features = plan.features.map(f => \r\n            `<li class=\"${f.included ? 'included' : 'excluded'}\">${f.name}<\/li>`\r\n          ).join(\"\");\r\n  \r\n          const popularClass = plan.popular ? 'popular' : '';\r\n          \r\n          const priceId = `price-${plan.id}`;\r\n          \r\n          plansContainer.innerHTML += `\r\n            <div class=\"plan-card\">\r\n              <div class=\"plan-title\">\r\n                <span>${plan.name}<\/span>\r\n                ${plan.popular ? '<span class=\"popular-badge\"><span class=\"popular-badge-inner\">MOST POPULAR<\/span><\/span>' : ''}\r\n              <\/div>\r\n              <div class=\"plan-price-container\" id=\"container-${plan.id}\">\r\n                <div class=\"plan-price\" id=\"${priceId}\">${price}\r\n                  <span class=\"plan-period\">${period}<\/span>  \r\n                <\/div>\r\n              <\/div>\r\n              <div class=\"plan-description\">${plan.description}<\/div>\r\n              ${userSection}\r\n              <button class=\"plan-button\">${plan.cta}<\/button>\r\n              <ul class=\"plan-features\">${features}<\/ul>\r\n            <\/div>\r\n          `;\r\n        });\r\n      }\r\n  \r\n      function updateTeamUsers(sliderValue) {\r\n        const newUserCount = parseInt(sliderValue);\r\n        \r\n        if (newUserCount !== teamUserCount) {\r\n          teamUserCount = newUserCount;\r\n          renderPlans();\r\n        }\r\n      }\r\n  \r\n      function renderFeatures() {\r\n        let html = '';\r\n        \r\n        for (const [categoryName, categoryData] of Object.entries(featuresData)) {\r\n          const featuresHtml = categoryData.features.map(feature => \r\n            `<li class=\"feature-item\">\r\n              <div class=\"feature-check\"><\/div>\r\n              <span class=\"feature-name\">${feature}<\/span>\r\n            <\/li>`\r\n          ).join('');\r\n          \r\n          html += `\r\n            <div class=\"feature-category\">\r\n              <div class=\"feature-category-header\">\r\n                <h3 class=\"feature-category-title\">${categoryName}<\/h3>\r\n              <\/div>\r\n              <ul class=\"feature-list\">\r\n                ${featuresHtml}\r\n              <\/ul>\r\n            <\/div>\r\n          `;\r\n        }\r\n        \r\n        featuresGrid.innerHTML = html;\r\n      }\r\n  \r\n      billingToggle.addEventListener(\"change\", function() {\r\n        updateToggleLabels();\r\n        renderPlans();\r\n      });\r\n      \r\n      \/\/ Make labels clickable\r\n      monthlyLabel.addEventListener(\"click\", function() {\r\n        if (billingToggle.checked) {\r\n          billingToggle.checked = false;\r\n          updateToggleLabels();\r\n          renderPlans();\r\n        }\r\n      });\r\n  \r\n      annuallyLabel.addEventListener(\"click\", function() {\r\n        if (!billingToggle.checked) {\r\n          billingToggle.checked = true;\r\n          updateToggleLabels();\r\n          renderPlans();\r\n        }\r\n      });\r\n  \r\n      \/\/ FAQ Functions\r\n      let activeCategory = 'pricing';\r\n      let openFaqIndices = [0]; \/\/ Array to track which FAQs are open, first FAQ is open by default\r\n  \r\n      function renderFAQ() {\r\n        const faqItems = document.getElementById('faqItems');\r\n        const filteredFAQs = faqData.filter(faq => faq.category === activeCategory);\r\n        \r\n        let html = '';\r\n        filteredFAQs.forEach((faq, index) => {\r\n          const isOpen = openFaqIndices.includes(index);\r\n          html += `\r\n            <div class=\"faq-item\" data-index=\"${index}\">\r\n              <div class=\"faq-question\" onclick=\"toggleFAQ(${index})\">\r\n                <span class=\"faq-question-text\">${faq.question}<\/span>\r\n                <div class=\"faq-icon\">${isOpen ? '-' : '+'}<\/div>\r\n              <\/div>\r\n              <div class=\"faq-answer\">\r\n                <div class=\"faq-answer-text ${isOpen ? 'expanded' : ''}\">${faq.answer}<\/div>\r\n              <\/div>\r\n            <\/div>\r\n          `;\r\n        });\r\n        \r\n        faqItems.innerHTML = html;\r\n      }\r\n  \r\n      function toggleFAQ(index) {\r\n        if (openFaqIndices.includes(index)) {\r\n          \/\/ Remove from array if already open\r\n          openFaqIndices = openFaqIndices.filter(i => i !== index);\r\n        } else {\r\n          \/\/ Add to array if not open\r\n          openFaqIndices.push(index);\r\n        }\r\n        \r\n        \/\/ Update just this specific FAQ item without re-rendering\r\n        const faqItem = document.querySelector(`[data-index=\"${index}\"]`);\r\n        if (faqItem) {\r\n          const answerText = faqItem.querySelector('.faq-answer-text');\r\n          const icon = faqItem.querySelector('.faq-icon');\r\n          \r\n          if (openFaqIndices.includes(index)) {\r\n            answerText.classList.add('expanded');\r\n            icon.textContent = '-';\r\n          } else {\r\n            answerText.classList.remove('expanded');\r\n            icon.textContent = '+';\r\n          }\r\n        }\r\n      }\r\n  \r\n      function switchCategory(category) {\r\n        activeCategory = category;\r\n        openFaqIndices = [0]; \/\/ Set first FAQ as open when switching categories\r\n        \r\n        \/\/ Update sidebar active state\r\n        document.querySelectorAll('.faq-nav-item').forEach(item => {\r\n          item.classList.remove('active');\r\n          if (item.dataset.category === category) {\r\n            item.classList.add('active');\r\n          }\r\n        });\r\n        \r\n        renderFAQ();\r\n      }\r\n  \r\n      \/\/ Add event listeners for FAQ navigation\r\n      document.querySelectorAll('.faq-nav-item').forEach(item => {\r\n        item.addEventListener('click', () => {\r\n          switchCategory(item.dataset.category);\r\n        });\r\n      });\r\n  \r\n      \/\/ Initialize\r\n      updateToggleLabels();\r\n      renderPlans();\r\n      renderFeatures();\r\n      renderFAQ();\r\n    <\/script>\r\n  <\/body>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ee2ade8 e-con-full e-flex wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"ee2ade8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>\u00a1Pruebe Direct Home Service gratis durante 30 d\u00edas! Sin Compromiso, Acceso Total Pruebe cualquier plan - Solo o en Equipo - y desbloquee poderosas herramientas para agilizar su negocio de servicio a domicilio. Planes y precios Ya sea un operador en solitario o un equipo en crecimiento, tenemos un plan para usted. Mensual Anual ahorrar 20% Si su empresa necesita m\u00e1s de 20 usuarios, p\u00f3ngase en contacto con nosotros directamente para una consulta y un presupuesto gratuitos. P\u00f3ngase en contacto con nosotros Todas las herramientas que necesita, incluidas Todos los planes incluyen nuestro conjunto completo de funciones, desde programaci\u00f3n y facturaci\u00f3n hasta an\u00e1lisis e integraciones. Elija su plan en funci\u00f3n del tama\u00f1o de su equipo. Preguntas frecuentes \u00bfA\u00fan no est\u00e1 seguro? Estas respuestas r\u00e1pidas pueden ayudarle a decidirse: planes, funciones, facturaci\u00f3n y mucho m\u00e1s. Precios y planes Funciones y acceso Cuenta y configuraci\u00f3n<\/p>","protected":false},"author":7,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-16262","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.9 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Pricing Page (new) - Direct Home Service<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/directhomeservice.com\/es\/pricing-page-new\/\" \/>\n<meta property=\"og:locale\" content=\"es_MX\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pricing Page (new)\" \/>\n<meta property=\"og:description\" content=\"Try Direct Home Service Free for 30 Days! No Commitment, Full Access Try any plan \u2014 Solo or Team \u2014 and unlock powerful tools to streamline your home service business. Plans and pricing Whether you&#8217;re a solo operator or growing team \u2014 we&#8217;ve got a plan for you. Monthly Annually save 20% If your business needs are 20+ users, contact us directly for a free consultation and quote. Contact us All the tools you need, included Every plan includes our complete feature set &#8211; from scheduling and invoicing to analytics and integrations. Choose your plan based on team size. Frequently asked questions Still unsure? These quick answers might help you decide \u2014 covering plans, features, billing, and more. Pricing &#038; Plans Features &#038; Access Account &#038; Setup\" \/>\n<meta property=\"og:url\" content=\"https:\/\/directhomeservice.com\/es\/pricing-page-new\/\" \/>\n<meta property=\"og:site_name\" content=\"Direct Home Service\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/people\/Direct-Home-Service\/61565226406207\/\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-11T08:03:17+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@DirectHome18792\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/directhomeservice.com\/es\/pricing-page-new\/\",\"url\":\"https:\/\/directhomeservice.com\/es\/pricing-page-new\/\",\"name\":\"Pricing Page (new) - Direct Home Service\",\"isPartOf\":{\"@id\":\"https:\/\/directhomeservice.com\/es\/#website\"},\"datePublished\":\"2025-06-27T18:17:32+00:00\",\"dateModified\":\"2025-07-11T08:03:17+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/directhomeservice.com\/es\/pricing-page-new\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/directhomeservice.com\/es\/pricing-page-new\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/directhomeservice.com\/es\/pricing-page-new\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/directhomeservice.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Pricing Page (new)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/directhomeservice.com\/es\/#website\",\"url\":\"https:\/\/directhomeservice.com\/es\/\",\"name\":\"Direct Home Service\",\"description\":\"Boost Your Handyman Business\",\"publisher\":{\"@id\":\"https:\/\/directhomeservice.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/directhomeservice.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/directhomeservice.com\/es\/#organization\",\"name\":\"Direct Home Service\",\"alternateName\":\"DHS\",\"url\":\"https:\/\/directhomeservice.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/directhomeservice.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/directhomeservice.com\/wp-content\/uploads\/2025\/09\/logo-scaled.png\",\"contentUrl\":\"https:\/\/directhomeservice.com\/wp-content\/uploads\/2025\/09\/logo-scaled.png\",\"width\":2560,\"height\":1414,\"caption\":\"Direct Home Service\"},\"image\":{\"@id\":\"https:\/\/directhomeservice.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/people\/Direct-Home-Service\/61565226406207\/\",\"https:\/\/x.com\/DirectHome18792\",\"https:\/\/www.instagram.com\/directhomeservice\/\",\"https:\/\/www.youtube.com\/@DHShelp\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Pricing Page (new) - Direct Home Service","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/directhomeservice.com\/es\/pricing-page-new\/","og_locale":"es_MX","og_type":"article","og_title":"Pricing Page (new)","og_description":"Try Direct Home Service Free for 30 Days! No Commitment, Full Access Try any plan \u2014 Solo or Team \u2014 and unlock powerful tools to streamline your home service business. Plans and pricing Whether you&#8217;re a solo operator or growing team \u2014 we&#8217;ve got a plan for you. Monthly Annually save 20% If your business needs are 20+ users, contact us directly for a free consultation and quote. Contact us All the tools you need, included Every plan includes our complete feature set &#8211; from scheduling and invoicing to analytics and integrations. Choose your plan based on team size. Frequently asked questions Still unsure? These quick answers might help you decide \u2014 covering plans, features, billing, and more. Pricing &#038; Plans Features &#038; Access Account &#038; Setup","og_url":"https:\/\/directhomeservice.com\/es\/pricing-page-new\/","og_site_name":"Direct Home Service","article_publisher":"https:\/\/www.facebook.com\/people\/Direct-Home-Service\/61565226406207\/","article_modified_time":"2025-07-11T08:03:17+00:00","twitter_card":"summary_large_image","twitter_site":"@DirectHome18792","twitter_misc":{"Tiempo de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/directhomeservice.com\/es\/pricing-page-new\/","url":"https:\/\/directhomeservice.com\/es\/pricing-page-new\/","name":"Pricing Page (new) - Direct Home Service","isPartOf":{"@id":"https:\/\/directhomeservice.com\/es\/#website"},"datePublished":"2025-06-27T18:17:32+00:00","dateModified":"2025-07-11T08:03:17+00:00","breadcrumb":{"@id":"https:\/\/directhomeservice.com\/es\/pricing-page-new\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/directhomeservice.com\/es\/pricing-page-new\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/directhomeservice.com\/es\/pricing-page-new\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/directhomeservice.com\/es\/"},{"@type":"ListItem","position":2,"name":"Pricing Page (new)"}]},{"@type":"WebSite","@id":"https:\/\/directhomeservice.com\/es\/#website","url":"https:\/\/directhomeservice.com\/es\/","name":"Direct Home Service","description":"Boost Your Handyman Business","publisher":{"@id":"https:\/\/directhomeservice.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/directhomeservice.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/directhomeservice.com\/es\/#organization","name":"Direct Home Service","alternateName":"DHS","url":"https:\/\/directhomeservice.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/directhomeservice.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/directhomeservice.com\/wp-content\/uploads\/2025\/09\/logo-scaled.png","contentUrl":"https:\/\/directhomeservice.com\/wp-content\/uploads\/2025\/09\/logo-scaled.png","width":2560,"height":1414,"caption":"Direct Home Service"},"image":{"@id":"https:\/\/directhomeservice.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/people\/Direct-Home-Service\/61565226406207\/","https:\/\/x.com\/DirectHome18792","https:\/\/www.instagram.com\/directhomeservice\/","https:\/\/www.youtube.com\/@DHShelp"]}]}},"_links":{"self":[{"href":"https:\/\/directhomeservice.com\/es\/wp-json\/wp\/v2\/pages\/16262","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/directhomeservice.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/directhomeservice.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/directhomeservice.com\/es\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/directhomeservice.com\/es\/wp-json\/wp\/v2\/comments?post=16262"}],"version-history":[{"count":22,"href":"https:\/\/directhomeservice.com\/es\/wp-json\/wp\/v2\/pages\/16262\/revisions"}],"predecessor-version":[{"id":16608,"href":"https:\/\/directhomeservice.com\/es\/wp-json\/wp\/v2\/pages\/16262\/revisions\/16608"}],"wp:attachment":[{"href":"https:\/\/directhomeservice.com\/es\/wp-json\/wp\/v2\/media?parent=16262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}