diff --git a/src/components/CollapsableFeatures.astro b/src/components/CollapsableFeatures.astro
new file mode 100644
index 0000000..4a755ba
--- /dev/null
+++ b/src/components/CollapsableFeatures.astro
@@ -0,0 +1,91 @@
+---
+// imports
+
+// types
+
+// props
+interface CollapsableFeaturesProps {
+    basicFeatures?: boolean;
+    webAppFeatures?: boolean;
+    aiFeatures?: boolean;
+}
+
+// logic, variables, functions, etc.
+const { basicFeatures, webAppFeatures, aiFeatures } =
+    Astro.props as CollapsableFeaturesProps;
+---
+
+<div class="collapsable-features">
+    <details>
+        <summary class="features-subtitle">Mira lo que incluye tu plan</summary>
+
+        <div class="features-list">
+            {
+                basicFeatures && (
+                    <div class="basic-features">
+                        <p>
+                            <strong>Características básicas:</strong>
+                        </p>
+
+                        <p>
+                            Control completo de usuarios, clientes, proveedores,
+                            inventario, contabilidad y reportes financieros.
+                            Módulos de ventas, compras y agenda de
+                            profesionales.
+                        </p>
+                    </div>
+                )
+            }
+
+            {
+                webAppFeatures && (
+                    <div class="webapp-features">
+                        <p>
+                            <strong>Aplicación web:</strong>
+                        </p>
+
+                        <p>
+                            Acceso personalizado para gestionar servicios
+                            diarios: control en tiempo real, registro de
+                            evidencias, reportes y comunicación fluida con
+                            central.
+                        </p>
+                    </div>
+                )
+            }
+
+            {
+                aiFeatures && (
+                    <div class="ai-features">
+                        <p>
+                            <strong>Servicio al cliente y postventa:</strong>
+                        </p>
+
+                        <p>
+                            Agendamiento y confirmación por WhatsApp/redes, con
+                            notificaciones de salida vía WhatsApp o email.
+                        </p>
+                    </div>
+                )
+            }
+        </div>
+    </details>
+</div>
+
+<style>
+    .features-subtitle {
+        width: 100%;
+        font-weight: bold;
+        font-size: var(--font-desktop-base);
+        color: var(--base-white);
+        cursor: pointer;
+        margin-bottom: var(--space-md-16px);
+        text-decoration: underline;
+    }
+
+    @media (min-width: 768px) {
+        .collapsable-features {
+            display: none;
+        }
+    }
+</style>
diff --git a/src/components/InitialSection.astro b/src/components/InitialSection.astro
index adebf5f..a567ee4 100644
--- a/src/components/InitialSection.astro
+++ b/src/components/InitialSection.astro
@@ -77,13 +77,27 @@ const {
         display: flex;
         flex-direction: column;
         gap: var(--space-4xl-96px);
-        padding: 80px 300px 0px 300px;
+        padding: 0px 350px;
+
+        @media (max-width: 1023px) {
+            height: auto;
+            padding: 0px 48px;
+        }
+
+        @media (max-width: 767px) {
+            padding: 0px var(--padding-lg-24px);
+            gap: var(--space-3xl-64px);
+        }
     }
 
     .section-1[data-auto-height="true"] {
         height: auto;
         min-height: 100vh;
         padding-bottom: 80px;
+
+        @media (max-width: 1023px) {
+            padding-bottom: 0px;
+        }
     }
 
     .main-img {
@@ -97,12 +111,20 @@ const {
         transform: translateX(-32%);
         z-index: -1;
         pointer-events: none;
+
+        @media (max-width: 1023px) {
+            display: none;
+        }
     }
 
     .landing-content {
         display: flex;
         flex-direction: column;
         gap: var(--space-4xl-96px);
+
+        @media (max-width: 767px) {
+            gap: var(--space-3xl-64px);
+        }
     }
 
     .logo-container {
@@ -111,8 +133,12 @@ const {
         justify-content: start;
     }
     .logo-naliia-full {
-        height: 81px;
+        height: 82px;
         width: auto;
+
+        @media (max-width: 767px) {
+            height: 50px;
+        }
     }
 
     .text-and-button-container {
@@ -120,6 +146,11 @@ const {
         flex-direction: column;
         gap: var(--space-3xl-64px);
         max-width: 780px;
+
+        @media (max-width: 767px) {
+            gap: var(--space-xl-32px);
+            width: 100%;
+        }
     }
 
     .text-content {
@@ -129,9 +160,19 @@ const {
     }
     .main-title {
         font-size: 80px;
+        line-height: calc(80px * 1.2);
+
+        @media (max-width: 767px) {
+            font-size: var(--font-mobile-h1);
+            line-height: var(--line-height-mobile-h1);
+        }
     }
     .subtitle {
         max-width: 630px;
+
+        @media (max-width: 767px) {
+            width: 100%;
+        }
     }
 
     .call-to-action-button {
@@ -149,5 +190,16 @@ const {
         justify-content: center;
         color: white;
         cursor: pointer;
+
+        @media (max-width: 1023px) {
+            padding: var(--padding-sm-8px) var(--padding-lg-24px);
+        }
+
+        @media (max-width: 767px) {
+            height: 44px;
+            font-size: var(--font-mobile-h6);
+            font-weight: bold;
+            padding: var(--padding-sm-8px) var(--padding-lg-24px);
+        }
     }
 </style>
diff --git a/src/components/PlanDetailsTable.astro b/src/components/PlanDetailsTable.astro
index d1f19ab..c8cfb43 100644
--- a/src/components/PlanDetailsTable.astro
+++ b/src/components/PlanDetailsTable.astro
@@ -194,6 +194,12 @@
         border: var(--detailstable-primaryborder);
         border-spacing: 0;
         border-collapse: collapse;
+
+        @media (max-width: 1023px) {
+            display: block;
+            overflow-x: auto;
+            white-space: nowrap;
+        }
     }
 
     th {
diff --git a/src/components/PricingCard.astro b/src/components/PricingCard.astro
index 6b1a718..0dea7a5 100644
--- a/src/components/PricingCard.astro
+++ b/src/components/PricingCard.astro
@@ -7,6 +7,7 @@ export interface PricingCardProps {
     featuresDescription: string;
     buttonText: string;
     isBestPlan?: boolean;
+    class?: string;
 }
 
 const {
@@ -17,10 +18,11 @@ const {
     featuresDescription,
     buttonText,
     isBestPlan,
+    class: className,
 } = Astro.props as PricingCardProps;
 ---
 
-<div class="pricing-card" data-best-plan={isBestPlan}>
+<div class:list={["pricing-card", className]} data-best-plan={isBestPlan}>
     <div class="pricing-card-header">
         <p class="plan-type">{`Plan ${planType}`}</p>
 
@@ -52,6 +54,10 @@ const {
     .pricing-card[data-best-plan="true"] {
         border: 4px solid var(--primarybutton-bgcolor);
         height: 750px;
+
+        @media (max-width: 1023px) {
+            height: auto;
+        }
     }
 
     .pricing-card {
@@ -68,6 +74,12 @@ const {
 
         padding: var(--space-3xl-64px) var(--space-xl-32px);
         box-sizing: border-box;
+
+        @media (max-width: 1023px) {
+            height: auto;
+            gap: var(--space-2xl-48px);
+            padding: var(--padding-xl-32px);
+        }
     }
 
     .pricing-card-header {
@@ -107,7 +119,7 @@ const {
         border-top: 1px solid var(--main-pink-500);
         border-bottom: 1px solid var(--main-pink-500);
         padding: var(--padding-lg-24px) 0;
-        gap: var(--space-xl-32px);
+        gap: var(--space-lg-24px);
 
         & .features-title {
             font-weight: bold;
diff --git a/src/components/footer/Footer.astro b/src/components/footer/Footer.astro
index 442e520..c66b7ef 100644
--- a/src/components/footer/Footer.astro
+++ b/src/components/footer/Footer.astro
@@ -125,7 +125,9 @@ import "./footer.css";
 
         <div class="footer-divider"></div>
 
-        <p>&copy; 2026 Naliia. Todos los derechos reservados.</p>
+        <p class="copyrigth-text">
+            &copy; 2026 Naliia. Todos los derechos reservados.
+        </p>
     </div>
 
     <div class="social-media">
@@ -170,6 +172,6 @@ import "./footer.css";
             </a>
         </div>
 
-        <p>Contáctanos para más información</p>
+        <p class="info-text">Contáctanos para más información</p>
     </div>
 </div>
diff --git a/src/components/footer/footer.css b/src/components/footer/footer.css
index 2cf4028..90d355f 100644
--- a/src/components/footer/footer.css
+++ b/src/components/footer/footer.css
@@ -7,23 +7,45 @@
     box-sizing: border-box;
     background-color: var(--main-bg-color);
     border-top: var(--main-border);
+
+    @media (max-width: 767px) {
+        padding: var(--padding-md-16px) var(--padding-lg-24px);
+    }
 }
 
 .logo-and-copyright {
     display: flex;
     align-items: center;
     gap: var(--space-lg-24px);
+
+    @media (max-width: 1023px) {
+        gap: var(--space-md-16px);
+    }
+}
+
+.copyrigth-text {
+    @media (max-width: 767px) {
+        display: none;
+    }
 }
 
 .footer-divider {
     width: 1px;
     height: 40px;
     background-color: rgba(68, 68, 68, 0.2);
+
+    @media (max-width: 767px) {
+        display: none;
+    }
 }
 
 .logo-naliia-footer {
     height: 44px;
     width: auto;
+
+    @media (max-width: 1023px) {
+        height: 32px;
+    }
 }
 
 .social-media {
@@ -35,6 +57,10 @@
 .icons-social-media {
     display: flex;
     gap: var(--space-lg-24px);
+
+    @media (max-width: 1023px) {
+        gap: var(--space-md-16px);
+    }
 }
 
 .social-media-link {
@@ -44,3 +70,9 @@
     align-items: center;
     justify-content: center;
 }
+
+.info-text {
+    @media (max-width: 1023px) {
+        display: none;
+    }
+}
diff --git a/src/components/navbar/Navbar.astro b/src/components/navbar/Navbar.astro
index 115cef8..0f4e41d 100644
--- a/src/components/navbar/Navbar.astro
+++ b/src/components/navbar/Navbar.astro
@@ -51,19 +51,93 @@ const currentPath: string = Astro.url.pathname;
         <a href="/contact" class={currentPath === "/contact" ? "active" : ""}>
             Contacto
         </a>
+
+        <a href="/docs" class={currentPath === "/docs" ? "active" : ""}>
+            Documentación
+        </a>
     </div>
 
-    <button class="theme-toggle">
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="32"
-            height="32"
-            viewBox="0 0 2048 2048"
-            class="svg-container"
-            ><path
-                fill="var(--main-icon-color)"
-                d="M960 512q93 0 174 35t142 96t96 142t36 175q0 93-35 174t-96 142t-142 96t-175 36q-93 0-174-35t-142-96t-96-142t-36-175q0-93 35-174t96-142t142-96t175-36m0 768q66 0 124-25t101-69t69-102t26-124t-25-124t-69-101t-102-69t-124-26q-35 0-64 7v626q29 7 64 7m64-896H896V0h128zM896 1536h128v384H896zm1024-640v128h-384V896zM384 1024H0V896h384zm123-426L236 326l90-90l272 271zm906 724l271 272l-90 90l-272-271zm0-724l-91-91l272-271l90 90zm-906 724l91 91l-272 271l-90-90z"
-            ></path></svg
-        >
-    </button>
+    <div class="navbar-buttons-container">
+        <button class="theme-toggle general-button">
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="32"
+                height="32"
+                viewBox="0 0 2048 2048"
+                class="svg-container light-icon"
+            >
+                <path
+                    fill="var(--main-icon-color)"
+                    d="M960 512q93 0 174 35t142 96t96 142t36 175q0 93-35 174t-96 142t-142 96t-175 36q-93 0-174-35t-142-96t-96-142t-36-175q0-93 35-174t96-142t142-96t175-36m0 768q66 0 124-25t101-69t69-102t26-124t-25-124t-69-101t-102-69t-124-26q-35 0-64 7v626q29 7 64 7m64-896H896V0h128zM896 1536h128v384H896zm1024-640v128h-384V896zM384 1024H0V896h384zm123-426L236 326l90-90l272 271zm906 724l271 272l-90 90l-272-271zm0-724l-91-91l272-271l90 90zm-906 724l91 91l-272 271l-90-90z"
+                ></path>
+            </svg>
+
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="32"
+                height="32"
+                viewBox="0 0 24 24"
+                class="svg-container dark-icon"
+                ><path
+                    fill="var(--main-icon-color)"
+                    d="M20.742 13.045a8 8 0 0 1-2.077.271c-2.135 0-4.14-.83-5.646-2.336a8.03 8.03 0 0 1-2.064-7.723A1 1 0 0 0 9.73 2.034a10 10 0 0 0-4.489 2.582c-3.898 3.898-3.898 10.243 0 14.143a9.94 9.94 0 0 0 7.072 2.93a9.93 9.93 0 0 0 7.07-2.929a10 10 0 0 0 2.583-4.491a1 1 0 0 0-1.224-1.224m-2.772 4.301a7.95 7.95 0 0 1-5.656 2.343a7.95 7.95 0 0 1-5.658-2.344c-3.118-3.119-3.118-8.195 0-11.314a8 8 0 0 1 2.06-1.483a10.03 10.03 0 0 0 2.89 7.848a9.97 9.97 0 0 0 7.848 2.891a8 8 0 0 1-1.484 2.059"
+                ></path></svg
+            >
+        </button>
+
+        <div class="icons-divider"></div>
+
+        <button class="mobile-menu-icon general-button">
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="32"
+                height="32"
+                viewBox="0 0 24 24"
+                class="svg-container"
+                ><path
+                    fill="none"
+                    stroke="var(--main-icon-color)"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M4 6h16M4 12h16M4 18h16"></path></svg
+            >
+        </button>
+    </div>
 </nav>
+
+<script>
+    const navContainer = document.querySelector(".nav-container");
+    const mobileMenuButton = document.querySelector(".mobile-menu-icon");
+    const themeToggler = document.querySelector(".theme-toggle");
+
+    // Inicializar el tema (por defecto "light" si no existe)
+    if (!document.documentElement.getAttribute("data-theme")) {
+        document.documentElement.setAttribute("data-theme", "light");
+    }
+
+    if (mobileMenuButton && navContainer) {
+        mobileMenuButton.addEventListener("click", () => {
+            navContainer.classList.toggle("menu-open");
+        });
+    }
+
+    if (themeToggler) {
+        themeToggler.addEventListener("click", () => {
+            const currentTheme =
+                document.documentElement.getAttribute("data-theme");
+
+            const newTheme = currentTheme === "light" ? "dark" : "light";
+
+            document.documentElement.setAttribute("data-theme", newTheme);
+
+            const persistedTheme = localStorage.getItem("theme");
+
+            if (persistedTheme) {
+                localStorage.setItem("theme", newTheme);
+            } else {
+                localStorage.setItem("theme", newTheme);
+            }
+        });
+    }
+</script>
diff --git a/src/components/navbar/navbar.css b/src/components/navbar/navbar.css
index 5c2069d..60cb79c 100644
--- a/src/components/navbar/navbar.css
+++ b/src/components/navbar/navbar.css
@@ -3,10 +3,21 @@
     justify-content: space-between;
     align-items: center;
     height: 72px;
+    width: 100%;
     box-sizing: border-box;
     padding: 16px 64px;
     border-bottom: 1px solid var(--navbar-border-color);
     background-color: var(--main-bg-color);
+    margin-bottom: 80px;
+
+    @media (max-width: 1023px) {
+        padding: 16px 48px;
+    }
+
+    @media (max-width: 767px) {
+        padding: 16px 24px;
+        position: relative;
+    }
 }
 
 .nav-link {
@@ -18,6 +29,28 @@
 .pageslinks-container {
     display: flex;
     gap: 48px;
+
+    @media (max-width: 767px) {
+        display: none;
+    }
+}
+
+/* Mostrar el menú cuando tenga la clase 'menu-open' */
+.nav-container.menu-open .pageslinks-container {
+    @media (max-width: 767px) {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        position: absolute;
+        top: 72px;
+        left: 0;
+        right: 0;
+        background-color: var(--main-bg-color);
+        padding: 24px;
+        border-bottom: 1px solid var(--navbar-border-color);
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        z-index: 1000;
+    }
 }
 
 a {
@@ -40,7 +73,7 @@ a.active::after {
     background-color: red;
 }
 
-.theme-toggle {
+.general-button {
     background: none;
     border: none;
     cursor: pointer;
@@ -56,3 +89,56 @@ a.active::after {
     align-items: center;
     justify-content: center;
 }
+
+.navbar-buttons-container {
+    @media (max-width: 767px) {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 8px;
+    }
+}
+
+.icons-divider {
+    display: none;
+
+    @media (max-width: 767px) {
+        display: block;
+        width: 1px;
+        height: 24px;
+        background-color: var(--navbar-border-color);
+    }
+}
+
+.mobile-menu-icon {
+    display: none;
+    cursor: pointer;
+    transition: transform 0.1s ease-in-out;
+
+    @media (max-width: 767px) {
+        display: block;
+    }
+}
+
+/* Toggle de iconos del tema */
+.theme-toggle {
+    position: relative;
+}
+
+/* Por defecto (modo claro): mostrar luna, ocultar sol */
+.light-icon {
+    display: none;
+}
+
+.dark-icon {
+    display: block;
+}
+
+/* En modo oscuro: mostrar sol, ocultar luna */
+[data-theme="dark"] .light-icon {
+    display: block;
+}
+
+[data-theme="dark"] .dark-icon {
+    display: none;
+}
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 1e4b3e8..b88aef4 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -15,7 +15,6 @@ const { pageTitle } = Astro.props;
 // logic, variables, functions, etc.
 ---
 
-<!doctype html>
 <html lang="es" data-theme="light">
     <head>
         <meta charset="UTF-8" />
@@ -54,6 +53,7 @@ const { pageTitle } = Astro.props;
                             width="48"
                             height="48"
                             viewBox="-2 -2 24 24"
+                            class="whatsapp-icon"
                             ><g
                                 fill="white"
                                 fill-rule="evenodd"
@@ -79,6 +79,7 @@ const { pageTitle } = Astro.props;
                             width="48"
                             height="48"
                             viewBox="0 0 32 32"
+                            class="payment-icon"
                             ><path
                                 fill="var(--base-white)"
                                 d="M2 9.5A4.5 4.5 0 0 1 6.5 5h19A4.5 4.5 0 0 1 30 9.5v13a4.5 4.5 0 0 1-4.5 4.5h-19A4.5 4.5 0 0 1 2 22.5zM6.5 7A2.5 2.5 0 0 0 4 9.5V11h24V9.5A2.5 2.5 0 0 0 25.5 7zM4 22.5A2.5 2.5 0 0 0 6.5 25h19a2.5 2.5 0 0 0 2.5-2.5V13H4zM21 19h3a1 1 0 1 1 0 2h-3a1 1 0 1 1 0-2"
@@ -99,3 +100,14 @@ const { pageTitle } = Astro.props;
         </footer>
     </body>
 </html>
+
+<script type="module">
+    const savedTheme = localStorage.getItem("theme");
+
+    if (savedTheme) {
+        document.documentElement.setAttribute("data-theme", savedTheme);
+    } else {
+        document.documentElement.setAttribute("data-theme", "light");
+        localStorage.setItem("theme", "light");
+    }
+</script>
diff --git a/src/pages/docs.astro b/src/pages/docs.astro
new file mode 100644
index 0000000..8199f0d
--- /dev/null
+++ b/src/pages/docs.astro
@@ -0,0 +1,11 @@
+---
+// imports
+
+// types
+
+// props
+
+// logic, variables, functions, etc.
+---
+
+<section>Esta es la pagina de documentacion</section>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 82d8246..e30fce5 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,7 +1,15 @@
 ---
+// imports
 import Layout from "../layouts/Layout.astro";
 import InitialSection from "../components/InitialSection.astro";
+import CollapsableFeatures from "../components/CollapsableFeatures.astro";
 import "../styles/index.css";
+
+// types
+
+// props
+
+// logic, variables, functions, etc.
 ---
 
 <Layout pageTitle="Home page">
@@ -12,10 +20,11 @@ import "../styles/index.css";
             logoSrc="/src/assets/imgs/logo-naliia.svg"
             logoAlt="Logo de Naliia"
             mainTitle="Transformamos el caos en claridad"
-            subtitle="Convertimos la complejidad de salones, spas y barberías en un ecosistema que respira orden, precisión y belleza."
+            subtitle="Convertimos la complejidad de negocios completos en un ecosistema que respira orden, precisión y belleza."
             buttonText="Comienza tu experiencia aquí"
         />
 
+        <!-- ----- What we offer section ----- -->
         <section class="offer-section second-sect-container sections">
             <div class="title-and-phrase">
                 <h4>¿Qué ofrecemos?</h4>
@@ -84,7 +93,6 @@ import "../styles/index.css";
         </section>
 
         <!-- ----- Pricing section ----- -->
-
         <section class="pricing-container">
             <div class="title-and-phrase">
                 <h4>Elige tu plan</h4>
@@ -107,20 +115,16 @@ import "../styles/index.css";
                                 La mejor opción para tu negocio!
                             </h6>
                         </div>
-
-                        <div class="button-and-link-container">
-                            <button class="button select-plan-button"
-                                >Contáctanos</button
-                            >
-
-                            <a href="/pricing"
-                                >O conoce a detalle todos los planes</a
-                            >
-                        </div>
                     </div>
 
                     <div class="divider"></div>
 
+                    <CollapsableFeatures
+                        basicFeatures={true}
+                        webAppFeatures={true}
+                        aiFeatures={true}
+                    />
+
                     <div class="features-container">
                         <p class="features-subtitle">Tu plan incluye:</p>
 
@@ -176,20 +180,15 @@ import "../styles/index.css";
                                     total!
                                 </p>
                             </div>
-
-                            <div class="button-and-link-container">
-                                <button class="button select-plan-button"
-                                    >Contáctanos</button
-                                >
-
-                                <a href="/pricing"
-                                    >O conoce a detalle todos los planes</a
-                                >
-                            </div>
                         </div>
 
                         <div class="divider"></div>
 
+                        <CollapsableFeatures
+                            basicFeatures={true}
+                            webAppFeatures={true}
+                        />
+
                         <div class="features-container">
                             <p class="features-subtitle">Tu plan incluye:</p>
 
@@ -232,20 +231,12 @@ import "../styles/index.css";
                                     Gestión esencial para tu negocio!
                                 </p>
                             </div>
-
-                            <div class="button-and-link-container">
-                                <button class="button select-plan-button"
-                                    >Contáctanos</button
-                                >
-
-                                <a href="/pricing"
-                                    >O conoce a detalle todos los planes</a
-                                >
-                            </div>
                         </div>
 
                         <div class="divider"></div>
 
+                        <CollapsableFeatures basicFeatures={true} />
+
                         <div class="features-container">
                             <p class="features-subtitle">Tu plan incluye:</p>
 
@@ -269,6 +260,10 @@ import "../styles/index.css";
                 </div>
             </div>
 
+            <button class="calltoaction-button"
+                >Quiero obtener uno de los planes</button
+            >
+
             <p class="important-information">
                 Todos los planes incluyen soporte de lunes a viernes de 8am a
                 6pm y sábados de 8am a 4pm. Además, cada plan cuenta con una
diff --git a/src/pages/pricing.astro b/src/pages/pricing.astro
index 1c6b5e4..97a0310 100644
--- a/src/pages/pricing.astro
+++ b/src/pages/pricing.astro
@@ -29,6 +29,7 @@ import "../styles/pricingPage.css";
                         featuresTitle="Módulo administrativo"
                         featuresDescription="Centraliza la operación de tu negocio con herramientas administrativas, comerciales y contables que te permiten gestionar clientes, ventas, inventarios, agenda y reportes desde un solo sistema."
                         buttonText="Elegir Básico"
+                        class="basic-plan"
                     />
 
                     <PricingCard
@@ -39,6 +40,7 @@ import "../styles/pricingPage.css";
                         featuresDescription="Incluye todo lo del Plan Básico, la app web del Plan Intermedio y agentes de inteligencia artificial que automatizan el agendamiento de citas, confirmaciones y mensajes por WhatsApp y otros canales, mejorando la atención al cliente y la postventa."
                         buttonText="Elegir Avanzado"
                         isBestPlan={true}
+                        class="advanced-plan"
                     />
 
                     <PricingCard
@@ -48,6 +50,7 @@ import "../styles/pricingPage.css";
                         featuresTitle="Módulo administrativo + web app"
                         featuresDescription="Incluye todo lo del Plan Básico, más una aplicación web que permite al equipo acceder a su cuenta, gestionar servicios diarios, registrar avances, observaciones y evidencias, y consultar reportes en tiempo real."
                         buttonText="Elegir Intermedio"
+                        class="intermediate-plan"
                     />
                 </div>
             </div>
diff --git a/src/styles/contactpage.css b/src/styles/contactpage.css
index 20e2074..615635f 100644
--- a/src/styles/contactpage.css
+++ b/src/styles/contactpage.css
@@ -32,6 +32,12 @@
         display: flex;
         gap: var(--space-3xl-64px);
     }
+
+    @media (max-width: 767px) {
+        .socialmedia-icons {
+            gap: var(--space-xl-32px);
+        }
+    }
 }
 
 .sections {
@@ -49,6 +55,14 @@
     padding: 140px;
     border: var(--main-border);
     border-radius: var(--space-lg-24px);
+
+    @media (max-width: 1023px) {
+        padding: 64px 48px;
+    }
+
+    @media (max-width: 767px) {
+        padding: 32px 24px;
+    }
 }
 
 .form-items {
diff --git a/src/styles/global.css b/src/styles/global.css
index b07b2e4..da30c86 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -29,11 +29,19 @@
 }
 
 :root {
+    --responsive-breakpoint-mobile-min: 320px;
+    --responsive-breakpoint-mobile-max: 767px;
+    --responsive-breakpoint-tablet-min: 768px;
+    --responsive-breakpoint-tablet-max: 1023px;
+    --responsive-breakpoint-desktop-min: 1024px;
+    --responsive-breakpoint-desktop-max: 1920px;
+
     /* Primitive values */
     --bg-svg-color: #ffffff;
 
     /* Colors */
     --dark-gray: #252525;
+    --darker-gray: #1b1b1b;
     --light-gray: #444444;
     --base-white: #ffffff;
     --base-black: #000000;
@@ -240,11 +248,48 @@
 
 [data-theme="dark"] {
     /* Dark theme */
+    --main-bg-color: var(--dark-gray);
+    --main-text-color: var(--base-white);
+    --main-boxshadow: 0px 4px 8px rgba(68, 68, 68, 0.1);
+    --secundary-text-color: var(--base-white);
+    --card-bg-color: var(--main-mistyRose-500);
+    --naliia-n-bg-color: var(--main-pink-500);
+    --main-icon-color: var(--base-white);
+    --navbar-border-color: rgba(255, 255, 255, 0.2);
     --navbar-n-naliia-start: var(--base-white);
     --navbar-n-naliia-end: var(--base-white);
+    --main-border: 1px solid rgba(255, 255, 255, 0.2);
+    --primarybutton-bgcolor: var(--main-pink-500);
+    --primarybutton-txtcolor: var(--base-white);
+    --pricingcard-bgcolor: var(--darker-gray);
+    --pricingcard-secundarybgcolor: var(--light-gray);
+    --pricingcard-section-bgcolor: var(--main-pink-500);
+    --pricingcard-sec-car-bgcolor: var(--light-gray);
+    --pricingcard-plantype-bgcolor: var(--main-pink-500);
+    --pricingcard-plantype-txtcolor: var(--base-white);
+    --pricingcard-value-txtcolor: var(--base-white);
+    --pricingcard-features-subtitlecolor: var(--main-pink-500);
+    --pricingcard-primarytextcolor: var(--base-white);
+    --detailstable-header-primarybgcolor: var(--light-gray);
+    --detailstable-header-txtcolor: var(--base-white);
+    --detailstable-primarytxtcolor: var(--base-white);
+    --detailstable-primaryborder: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+html {
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    min-height: 100vh;
+    overflow-x: hidden;
 }
 
-html,
 body {
     margin: 0;
     width: 100%;
@@ -261,7 +306,7 @@ p {
     margin: 0;
     color: var(--main-text-color);
 
-    @media (max-width: 768px) {
+    @media (max-width: 767px) {
         font-size: var(--font-mobile-base);
         line-height: var(--line-height-mobile-base);
         padding: 0;
@@ -276,7 +321,7 @@ h1 {
     margin: 0;
     color: var(--main-text-color);
 
-    @media (max-width: 768px) {
+    @media (max-width: 767px) {
         font-size: var(--font-mobile-h1);
         line-height: var(--line-height-mobile-h1);
         padding: 0;
@@ -291,7 +336,7 @@ h2 {
     margin: 0;
     color: var(--main-text-color);
 
-    @media (max-width: 768px) {
+    @media (max-width: 767px) {
         font-size: var(--font-mobile-h2);
         line-height: var(--line-height-mobile-h2);
         padding: 0;
@@ -306,7 +351,7 @@ h3 {
     margin: 0;
     color: var(--main-text-color);
 
-    @media (max-width: 768px) {
+    @media (max-width: 767px) {
         font-size: var(--font-mobile-h3);
         line-height: var(--line-height-mobile-h3);
         padding: 0;
@@ -321,7 +366,7 @@ h4 {
     margin: 0;
     color: var(--main-text-color);
 
-    @media (max-width: 768px) {
+    @media (max-width: 767px) {
         font-size: var(--font-mobile-h4);
         line-height: var(--line-height-mobile-h4);
         padding: 0;
@@ -336,7 +381,7 @@ h5 {
     margin: 0;
     color: var(--main-text-color);
 
-    @media (max-width: 768px) {
+    @media (max-width: 767px) {
         font-size: var(--font-mobile-h5);
         line-height: var(--line-height-mobile-h5);
         padding: 0;
@@ -351,7 +396,7 @@ h6 {
     margin: 0;
     color: var(--main-text-color);
 
-    @media (max-width: 768px) {
+    @media (max-width: 767px) {
         font-size: var(--font-mobile-h6);
         line-height: var(--line-height-mobile-h6);
         padding: 0;
@@ -367,7 +412,7 @@ summary {
     font-size: var(--font-desktop-base);
     line-height: var(--line-height-desktop-base);
 
-    @media (max-width: 768px) {
+    @media (max-width: 767px) {
         font-size: var(--font-mobile-base);
         line-height: var(--line-height-mobile-base);
     }
@@ -424,6 +469,21 @@ main {
         scale: 1.1;
         transition: scale 0.4s ease;
     }
+
+    @media (max-width: 767px) {
+        width: 56px;
+        height: 56px;
+
+        & .whatsapp-icon {
+            width: 40px;
+            height: 40px;
+        }
+
+        & .payment-icon {
+            width: 40px;
+            height: 40px;
+        }
+    }
 }
 
 .whatsapp-floatingbutton {
@@ -460,6 +520,17 @@ main {
         opacity: 1;
         visibility: visible;
     }
+
+    @media (max-width: 767px) {
+        & .whatsapp-floatingbutton-text {
+            font-size: var(--font-mobile-sm);
+            padding: var(--padding-sm-8px) var(--padding-md-16px);
+        }
+
+        &:hover .whatsapp-floatingbutton-text {
+            right: 70px;
+        }
+    }
 }
 
 .payment-floatingbutton {
@@ -496,4 +567,15 @@ main {
         opacity: 1;
         visibility: visible;
     }
+
+    @media (max-width: 767px) {
+        & .payment-floatingbutton-text {
+            font-size: var(--font-mobile-sm);
+            padding: var(--padding-sm-8px) var(--padding-md-16px);
+        }
+
+        &:hover .payment-floatingbutton-text {
+            right: 70px;
+        }
+    }
 }
diff --git a/src/styles/index.css b/src/styles/index.css
index fd8c8f3..85a7b97 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1,9 +1,18 @@
 .homepage {
     display: flex;
     overflow-x: hidden;
+    overflow-y: hidden;
     flex-direction: column;
-    gap: 140px;
+    gap: 120px;
     background-color: transparent;
+
+    @media (max-width: 1023px) {
+        overflow-y: hidden;
+    }
+
+    @media (max-width: 767px) {
+        gap: var(--space-4xl-96px);
+    }
 }
 
 .sections {
@@ -11,12 +20,26 @@
     flex-direction: column;
     gap: 48px;
     padding: 0px 350px;
+
+    @media (max-width: 1023px) {
+        padding: 0px 48px;
+    }
+
+    @media (max-width: 767px) {
+        padding: 0px var(--padding-lg-24px);
+    }
 }
 
 .sections-subtitle {
     font-size: var(--font-desktop-base);
     line-height: var(--line-height-desktop-base);
     font-weight: bold;
+
+    @media (max-width: 767px) {
+        font-size: var(--font-mobile-base);
+        line-height: var(--line-height-mobile-base);
+        font-weight: normal;
+    }
 }
 
 /* ----- Offer section styles ----- */
@@ -41,42 +64,73 @@
     border: var(--main-border);
     border-radius: var(--space-lg-24px);
 
-    height: 200px;
-    padding: var(--space-3xl-64px);
+    height: 300px;
+    padding: var(--padding-3xl-64px);
     display: flex;
+    align-items: center;
     overflow: hidden;
     position: relative;
+
+    @media (max-width: 1023px) {
+        height: auto;
+        padding: var(--padding-2xl-48px);
+        box-shadow: var(--main-boxshadow);
+    }
+
+    @media (max-width: 767px) {
+        padding: var(--padding-xl-32px);
+    }
 }
 
 .card-content {
-    max-width: 500px;
+    width: 500px;
     display: flex;
     flex-direction: column;
     gap: var(--space-md-16px);
+
+    @media (max-width: 1023px) {
+        width: 100%;
+    }
 }
 .card-1 {
     background-image: url("../assets/imgs/card_1.webp");
     background-size: auto 136%;
     background-position: right center;
     background-repeat: no-repeat;
+
+    @media (max-width: 1023px) {
+        background-image: none;
+    }
 }
 .card-2 {
     background-image: url("../assets/imgs/card_2.webp");
     background-size: auto 136%;
     background-position: right center;
     background-repeat: no-repeat;
+
+    @media (max-width: 1023px) {
+        background-image: none;
+    }
 }
 .card-3 {
     background-image: url("../assets/imgs/card_3.webp");
     background-size: auto 136%;
     background-position: right center;
     background-repeat: no-repeat;
+
+    @media (max-width: 1023px) {
+        background-image: none;
+    }
 }
 .card-4 {
     background-image: url("../assets/imgs/card_4.webp");
     background-size: auto 136%;
     background-position: right center;
     background-repeat: no-repeat;
+
+    @media (max-width: 1023px) {
+        background-image: none;
+    }
 }
 
 /* ----- Pricing section styles ----- */
@@ -87,6 +141,14 @@
     flex-direction: column;
     gap: var(--space-2xl-48px);
     padding: 0px 350px;
+
+    @media (max-width: 1023px) {
+        padding: 0px 48px;
+    }
+
+    @media (max-width: 767px) {
+        padding: 0px var(--padding-lg-24px);
+    }
 }
 
 .pricing-cards-container {
@@ -104,13 +166,25 @@
     display: flex;
     align-items: center;
     gap: var(--space-2xl-48px);
-    padding: var(--space-xl-32px);
+    padding: var(--padding-xl-32px);
 
     height: 372px;
     width: 100%;
     box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
     background-color: var(--pricingcard-bgcolor);
     box-sizing: border-box;
+
+    @media (max-width: 1023px) {
+        flex-direction: column;
+        height: auto;
+        gap: var(--space-xl-32px);
+        align-items: self-start;
+    }
+
+    @media (max-width: 767px) {
+        gap: var(--space-lg-24px);
+        border-radius: 16px;
+    }
 }
 
 .price-container {
@@ -119,7 +193,7 @@
 
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    gap: var(--space-xl-32px);
     border-top-left-radius: var(--space-2xl-48px);
 
     & .plan-type {
@@ -137,6 +211,15 @@
     & a {
         color: var(--pricingcard-value-txtcolor);
     }
+
+    @media (max-width: 1023px) {
+        width: 100%;
+        gap: var(--space-2xl-48px);
+    }
+
+    @media (max-width: 767px) {
+        gap: var(--space-lg-24px);
+    }
 }
 
 .price-and-description {
@@ -148,6 +231,22 @@
     p {
         color: var(--pricingcard-value-txtcolor);
     }
+
+    @media (max-width: 1023px) {
+        width: 100%;
+        gap: var(--space-sm-8px);
+
+        h4 {
+            font-size: var(--font-desktop-h3);
+            font-weight: bold;
+        }
+    }
+
+    @media (max-width: 767px) {
+        h4 {
+            font-size: var(--font-mobile-h3);
+        }
+    }
 }
 
 .button-and-link-container {
@@ -186,6 +285,16 @@
     width: 1px;
     height: 95%;
     background-color: rgba(255, 255, 255, 0.2);
+
+    @media (max-width: 1023px) {
+        display: none;
+    }
+}
+
+.collapsable-features {
+    @media (width > 767px) {
+        display: none;
+    }
 }
 
 .features-container {
@@ -201,6 +310,10 @@
         font-size: var(--font-desktop-base);
         color: var(--pricingcard-features-subtitlecolor);
     }
+
+    @media (max-width: 767px) {
+        display: none;
+    }
 }
 
 .features-list {
@@ -227,13 +340,32 @@
     box-sizing: border-box;
 
     & .pricing-card {
-        height: 300px;
+        height: 350px;
         display: flex;
         gap: var(--space-lg-24px);
 
         padding: var(--space-xl-32px);
         background-color: var(--pricingcard-sec-car-bgcolor);
     }
+
+    @media (max-width: 1023px) {
+        flex-direction: column;
+        gap: var(--space-lg-24px);
+
+        & .pricing-card {
+            flex-direction: column;
+            height: auto;
+            width: 100%;
+            gap: var(--space-xl-32px);
+            align-items: self-start;
+        }
+    }
+
+    @media (max-width: 767px) {
+        .pricing-card {
+            border-radius: 16px;
+        }
+    }
 }
 
 .mid-plan {
@@ -246,7 +378,7 @@
 
         display: flex;
         flex-direction: column;
-        justify-content: space-between;
+        gap: var(--space-xl-32px);
     }
 
     & .plan-type {
@@ -272,8 +404,45 @@
         }
     }
 
-    & a {
-        color: var(--pricingcard-value-txtcolor);
+    @media (max-width: 1023px) {
+        width: 100%;
+        gap: var(--space-lg-24px);
+        border-radius: 0px;
+
+        & .price-container {
+            width: 100%;
+            gap: var(--space-2xl-48px);
+        }
+
+        & .price-and-description {
+            width: 100%;
+            gap: var(--space-sm-8px);
+
+            & h5 {
+                font-size: var(--font-desktop-h3);
+                font-weight: bold;
+            }
+        }
+    }
+
+    @media (max-width: 767px) {
+        gap: var(--space-lg-24px);
+        border-radius: 0px;
+
+        & .price-container {
+            width: 100%;
+            gap: var(--space-lg-24px);
+        }
+
+        & .price-and-description {
+            width: 100%;
+            gap: var(--space-sm-8px);
+
+            & h5 {
+                font-size: var(--font-mobile-h3);
+                font-weight: bold;
+            }
+        }
     }
 }
 
@@ -283,11 +452,11 @@
 
     & .price-container {
         height: 100%;
-        width: 50%;
+        width: 70%;
 
         display: flex;
         flex-direction: column;
-        justify-content: space-between;
+        gap: var(--space-xl-32px);
     }
 
     & .plan-type {
@@ -313,8 +482,70 @@
         }
     }
 
-    & a {
-        color: var(--pricingcard-value-txtcolor);
+    @media (max-width: 1023px) {
+        width: 100%;
+        gap: var(--space-lg-24px);
+        border-bottom-left-radius: 48px;
+        border-bottom-right-radius: 48px;
+
+        & .price-container {
+            width: 100%;
+            gap: var(--space-2xl-48px);
+        }
+
+        & .price-and-description {
+            width: 100%;
+            gap: var(--space-sm-8px);
+
+            & h5 {
+                font-size: var(--font-desktop-h3);
+                font-weight: bold;
+            }
+        }
+    }
+
+    @media (max-width: 767px) {
+        gap: var(--space-lg-24px);
+        border-radius: 0px;
+
+        & .price-container {
+            width: 100%;
+            gap: var(--space-lg-24px);
+        }
+
+        & .price-and-description {
+            width: 100%;
+            gap: var(--space-sm-8px);
+
+            & h5 {
+                font-size: var(--font-mobile-h3);
+                font-weight: bold;
+            }
+        }
+    }
+}
+
+.calltoaction-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 56px;
+    width: 100%;
+    padding: var(--space-sm-8px) var(--space-md-16px);
+    border: none;
+    border-radius: 16px;
+    background-color: var(--primarybutton-bgcolor);
+    color: var(--primarybutton-txtcolor);
+    font-family: var(--font-family-primary);
+    font-size: var(--font-desktop-h6);
+    font-weight: bold;
+    cursor: pointer;
+    box-shadow: var(--main-boxshadow);
+    box-sizing: border-box;
+
+    @media (max-width: 767px) {
+        font-size: var(--font-mobile-h6);
+        height: 44px;
     }
 }
 
@@ -327,6 +558,4 @@
 
     border: 2px solid red;
     border-radius: var(--space-md-16px);
-
-    font-weight: bold;
 }
diff --git a/src/styles/pricingPage.css b/src/styles/pricingPage.css
index 5a83b8b..bf68ca0 100644
--- a/src/styles/pricingPage.css
+++ b/src/styles/pricingPage.css
@@ -5,6 +5,10 @@
     gap: 140px;
     background-color: transparent;
     margin-bottom: 140px;
+
+    @media (max-width: 1023px) {
+        gap: 120px;
+    }
 }
 
 .sections {
@@ -12,6 +16,10 @@
     flex-direction: column;
     gap: 48px;
     padding: 0px 350px;
+
+    @media (max-width: 1023px) {
+        padding: 0px 48px;
+    }
 }
 
 .sections-subtitle {
@@ -34,19 +42,21 @@
     gap: var(--space-lg-24px);
 }
 
-.plans-details-container {
-    display: flex;
-}
+@media (max-width: 1023px) {
+    .pricingcards {
+        flex-direction: column;
+        gap: var(--space-lg-24px);
+    }
 
-.plan-details {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-md-16px);
-}
+    .pricingcards .advanced-plan {
+        order: 1;
+    }
 
-.plan-title {
-    border: 1px solid black;
-    text-align: center;
-    padding: 24px;
+    .pricingcards .intermediate-plan {
+        order: 2;
+    }
+
+    .pricingcards .basic-plan {
+        order: 3;
+    }
 }