diff --git a/CICLO 2/PROYECTO/CSS/contact.css b/CICLO 2/PROYECTO/CSS/contact.css
index 545cf03..11850da 100644
--- a/CICLO 2/PROYECTO/CSS/contact.css	
+++ b/CICLO 2/PROYECTO/CSS/contact.css	
@@ -1,3 +1,7 @@
+.hidden {
+    display: none !important;
+}
+
 h1 {
     font-family: 'Poppins-semibold';
     font-size: 4rem;
@@ -24,6 +28,7 @@ p {
 .seccion {
     margin-top: 150px;
     flex: 3;
+    width: 100%;
 }
 
 .p1 {
@@ -172,6 +177,12 @@ button:active {
     font-family: 'Poppins-Regular';
 }
 
+.shopHead {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
 .query {
     background: #00FF5B;
     color: black;
@@ -188,7 +199,6 @@ button:active {
 
 .shop_sticky h2 {
     display: inline-block;
-    padding-right: 83px;
     padding-left: 10px;
     margin-bottom: 10px;
 }
@@ -201,7 +211,6 @@ button:active {
 .shop_sticky {
     position: sticky;
     top: 3.5px;
-    width: 400px;
 }
 
 .shop_resumen_head {
@@ -242,6 +251,11 @@ button:active {
     margin-bottom: 20px;
 }
 
+.shop_total h2 {
+    margin: 0;
+    font-size: 1.8rem;
+}
+
 .detail_element {
     flex: 4;
 }
@@ -250,10 +264,32 @@ button:active {
     font-family: 'Poppins-black';
 }
 
+.mobilecart {
+    position: fixed;
+    top: 30px;
+    right: 20px;
+    background: #FFF;
+    color: black;
+    font-family: 'Poppins-Regular';
+    border-radius: 955px;
+    line-height: 60px;
+    width: 50px;
+    height: 50px;
+    text-align: center;
+}
+
+.mobilecart img {
+    width: 30px;
+    position: absolute;
+    top: 6px;
+    left: 10px;
+}
+
 .checkout {
     position: fixed;
-    z-index: 2;
+    z-index: 3;
     background: #F8F8F8;
+    right: 0;
     left: 62.5%;
     top: 0;
     bottom: 0;
@@ -291,22 +327,32 @@ button:active {
     color: white;
 }
 
+.frame1 {
+    height: 100%;
+}
+
 .frame1 h2 {
-	text-align: center;
-	margin-block: 60px;
+    text-align: center;
+    margin-block: 60px;
+    margin-bottom: 0;
+}
+
+.checkout_formBox {
+    display: flex;
+    flex-flow: column wrap;
 }
 
 .checkout_formBox form {
-	gap: 40px;
-	margin-block: 75px;
+    gap: 24px;
+    margin-block: 40px 10px;
     flex-flow: column wrap;
 }
 
 .checkout_inputBox {
-	position: relative;
-	flex: 1;
-	min-width: 295px;
-	width: 440px;
+    position: relative;
+    flex: 1;
+    min-width: 295px;
+    width: 440px;
 }
 
 .checkout_inputBox label {
@@ -325,6 +371,46 @@ button:active {
     border-bottom: 1px solid #000;
 }
 
+.checkout_inputBox textarea {
+    background: #5a5a5a71;
+    border: 0;
+}
+
+.checkout_inputBox textarea:focus,
+.checkout_inputBox textarea:not(:placeholder-shown) {
+    background: #99999971;
+    outline: none;
+    border: 0;
+}
+
+.frame2 {
+    display: flex;
+    flex-flow: column wrap;
+    text-align: center;
+    height: 100%;
+    justify-content: center;
+}
+
+
+.frame2 img {
+    flex: 2;
+}
+
+.frame2 p {
+    flex: 1.5;
+}
+
+.mobilshop * {
+    font-family: 'Poppins-Regular';
+}
+
+.mobilshop .shopHead{
+    justify-content: center;
+}
+.mobilshop hr {
+    width: 100%;
+}
+
 .altseccion {
     display: flex;
     flex-flow: column wrap;
@@ -334,13 +420,10 @@ button:active {
     text-align: center;
 }
 
-.altseccion p {
-    padding-inline: 11%;
-}
 
 .altseccion a {
     text-align: center;
-    font-size: clamp(3rem, 1.0774rem + 3.7936vw, 6rem);
+    font-size: clamp(0.5rem, 0.6774rem + 3.7936vw, 6rem);
     font-family: 'Poppins-semibold';
     font-weight: 501;
     text-decoration: none;
@@ -357,12 +440,17 @@ button:active {
 
 form {
     display: flex;
-    flex-flow: wrap;
+    flex-flow: column wrap;
     justify-content: center;
     align-content: center;
     gap: 5px;
 }
 
+.nameemail {
+    display: flex;
+    align-self: center;
+}
+
 .inputBox {
     position: relative;
     ;
@@ -418,7 +506,7 @@ textarea {
     border-bottom: #4F4F4F solid 0.5px;
     border-radius: 5px;
     backdrop-filter: blur(0.5rem);
-
+    resize: none;
 }
 
 textarea::selection {
@@ -456,7 +544,6 @@ textarea::-webkit-selection {
     color: #858585;
 }
 
-
 @media (min-width:319px) and (max-width:719px) {
     .altseccion h1 {
         text-align: left;
@@ -475,4 +562,167 @@ textarea::-webkit-selection {
     }
 }
 
-@media (min-width:719px) and (max-width:1000px) {}
\ No newline at end of file
+@media (max-width:560px) {
+    .seccion {
+        margin-top: 85px;
+    }
+
+    p {
+        font-size: 1rem;
+    }
+
+    .tiers span {
+        font-size: 1.3rem;
+    }
+
+    .esps {
+        flex-flow: column;
+        gap: 40px;
+    }
+
+    .esps_card img {
+        width: 50px;
+    }
+
+    .inputBox {
+        position: relative;
+        flex-grow: 1;
+        padding: 16px 19px;
+    }
+
+    button {
+        margin-top: 20px;
+    }
+
+    .altseccion p {
+        width: 100%;
+    }
+}
+
+@media (max-width:768px) {
+    .nameemail {
+        flex-flow: column;
+        align-self: normal;
+    }
+
+    .checkout {
+        position: fixed;
+        z-index: 3;
+        background: #F8F8F8;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        padding: 50px 20px;
+    }
+    
+    .checkout_formBox {
+        display: flex;
+        flex-flow: column wrap;
+        width: 100%;
+    }
+    
+    .checkout_formBox form {
+        gap: 24px;
+        margin-block: 40px 10px;
+        flex-flow: column wrap;
+        width: 100%;
+    }
+
+    .checkout_inputBox {
+        position: relative;
+        flex: 1;
+        max-width: 90%;
+    }
+    
+    .button {
+        display: flex;
+        flex-flow: column;
+        justify-content: center;
+        transform: scale(0.7);
+    }
+}
+
+@media (min-width:901px) {
+    .mobilecart {
+        display: none;
+    }
+
+    .frame3 {
+        display: none;
+    }
+}
+
+@media (max-width:900px) {
+    .shop {
+        display: none;
+    }
+}
+
+@media (max-width:1024px) {
+
+    .mainlayer {
+        left: 12%;
+        width: 90%;
+    }
+}
+
+@media (min-width:768px) and (max-width:1024px) {
+    .checkout {
+        left: 30%;
+    }
+
+
+}
+
+@media (min-width:1024px) and (max-width:1440px) {
+    .checkout_inputBox {
+        width: clamp(0.1rem, 0.2774rem + 0.7936vw, 1.5rem);
+        ;
+    }
+}
+
+@media (min-width:1024px) and (max-width:1440px) {
+    .checkout_inputBox {
+        width: clamp(0.1rem, 0.2774rem + 0.7936vw, 1.5rem);
+        ;
+    }
+}
+
+@media (min-width:1811px) and (max-width:2586px) {
+    .shop_overflow {
+        max-height: none;
+    }
+
+    .shopHead {
+        display: flex;
+        justify-content: center;
+        gap: 50px;
+    }
+
+    .shop_sticky_hr {
+        width: 100%;
+    }
+}
+
+@media (min-width:1900px) and (max-width:2586px) {
+    .frame1 h2 {
+        font-size: clamp(2rem, 0.4774rem + 1.7936vw, 3.5rem);
+    }
+
+    .checkout_inputBox {
+        min-width: 440px;
+        width: 550px;
+    }
+
+    .checkout_inputBox textarea {
+        height: 120px;
+    }
+
+    .checkout_formBox form {
+        gap: 64px;
+    }
+
+    .checkout_inputBox * {
+        font-size: 1.5rem;
+    }
+}
\ No newline at end of file
diff --git a/CICLO 2/PROYECTO/IMG/shop copy.svg b/CICLO 2/PROYECTO/IMG/shop copy.svg
new file mode 100644
index 0000000..cb02825
--- /dev/null
+++ b/CICLO 2/PROYECTO/IMG/shop copy.svg	
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="56" fill="none" viewBox="0 0 48 56">
+  <path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M7.938 16.667h32.127a5.666 5.666 0 0 1 5.602 6.528L42.11 46.292a8.5 8.5 0 0 1-8.404 7.208H14.293a8.5 8.5 0 0 1-8.4-7.208L2.335 23.195a5.667 5.667 0 0 1 5.602-6.528Z"/>
+  <path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M15.5 25.167V11a8.5 8.5 0 1 1 17 0v14.167"/>
+</svg>
diff --git a/CICLO 2/PROYECTO/contact.html b/CICLO 2/PROYECTO/contact.html
index 6146e6c..e11b262 100644
--- a/CICLO 2/PROYECTO/contact.html	
+++ b/CICLO 2/PROYECTO/contact.html	
@@ -11,6 +11,7 @@
     <link rel="stylesheet" type="text/css" href="CSS/fonts.css">
     <script defer src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
     <script defer src="Js/codigoBase.js"></script>
+    <script defer src="Js/contact.js"></script>
 </head>
 
 <body>
@@ -78,7 +79,7 @@ <h2>Mentoría para Desarrolladores y Diseñadores</h2>
                             para mejorar tu trabajo y tu aprendizaje. Esta sesión no se trata de hacer el trabajo por
                             ti.
                         </p>
-                        <div class="subtiers">
+                        <div class="subtiers hidden">
                             <h3>Selecciona hasta 2 especificaciones que desees tratar por mentoría:</h3>
                             <div class="esps">
                                 <div class="esps_card">
@@ -113,8 +114,10 @@ <h3>Selecciona hasta 2 especificaciones que desees tratar por mentoría:</h3>
                                 </div>
                             </div>
                         </div>
-                        <button>Añadir</button>
-                        <div class="sessionCounter">
+                        <div class="button">
+                            <button type="submit">Añadir</button>
+                        </div>
+                        <div class="sessionCounter hidden">
                             <h3>Mentorías para agendar</h3>
                             <div class="counter">
                                 <button class="less">-</button>
@@ -134,7 +137,7 @@ <h2>Consultoría para Empresas</h2>
                             tu
                             proyecto, así como sobre qué herramientas y plataformas usar para optimizar el proceso y el
                             resultado.</p>
-                        <div class="subtiers">
+                        <div class="subtiers hidden">
                             <h3>Selecciona hasta 2 especificaciones que desees tratar por consultoria:</h3>
                             <div class="esps">
                                 <div class="esps_card">
@@ -169,8 +172,10 @@ <h3>Selecciona hasta 2 especificaciones que desees tratar por consultoria:</h3>
                                 </div>
                             </div>
                         </div>
-                        <button>Añadir</button>
-                        <div class="sessionCounter">
+                        <div class="button">
+                            <button type="submit">Añadir</button>
+                        </div>
+                        <div class="sessionCounter hidden">
                             <h3>Consultorías para agendar</h3>
                             <div class="counter">
                                 <button class="less">-</button>
@@ -181,11 +186,15 @@ <h3>Consultorías para agendar</h3>
 
                     </div>
                 </div>
-                <div class="shop">
+                <div class="shop hidden">
                     <div class="shop_sticky">
-                        <h2>Tu canasta</h2>
-                        <span class="query"></span>
-                        <img src="IMG/shop.svg" alt="shop">
+                        <div class="shopHead">
+                            <h2>Tu canasta</h2>
+                            <div class="canasta">
+                                <span class="query"></span>
+                                <img src="IMG/shop.svg" alt="shop">
+                            </div>
+                        </div>
                         <hr class="shop_sticky_hr">
                         <br>
                         <div class="shop_resumen">
@@ -251,14 +260,16 @@ <h1>Dame tu contacto</h1>
                     negocios.</p>
                 <div class="formBox">
                     <form action="">
-                        <div class="inputBox">
-                            <input type="text" name="nombre" id="nombre" maxlength="25" minlength="1" required=""
-                                placeholder=" ">
-                            <label for="nombre">Nombre</label>
-                        </div>
-                        <div class="inputBox">
-                            <input type="email" name="email" id="email" required="" placeholder=" ">
-                            <label for="email">E-mail</label>
+                        <div class="nameemail">
+                            <div class="inputBox">
+                                <input type="text" name="nombre" id="nombre" maxlength="25" minlength="1" required=""
+                                    placeholder=" ">
+                                <label for="nombre">Nombre</label>
+                            </div>
+                            <div class="inputBox">
+                                <input type="email" name="email" id="email" required="" placeholder=" ">
+                                <label for="email">E-mail</label>
+                            </div>
                         </div>
                         <div class="inputBox">
                             <textarea name="descripcion" id="descripcion" maxlength="500" minlength="1"
@@ -306,40 +317,108 @@ <h3 class="typing-demo">Desarrolla tus ideas.</h3>
                 </div>
             </footer>
         </div>
-        <div class="checkout">
-            <button class="cancelar">x</button>
-            <div class="frame1">
-                <h2>Pago exitoso<br>Agendamiento de sesión</h2>
-                <div class="checkout_formBox">
-                    <form action="">
-                        <div class="checkout_inputBox">
-                            <input type="text" name="nombre" id="checkout_nombre" maxlength="25" minlength="1"
-                                required="" placeholder=" ">
-                            <label for="nombre">Nombre</label>
-                        </div>
-                        <div class="checkout_inputBox">
-                            <input type="email" name="email" id="checkout_email" required="" placeholder=" ">
-                            <label for="email">E-mail</label>
-                        </div>
-                        <div class="checkout_inputBox">
-                            <input type="number" name="contacto" id="contacto" required="" placeholder=" ">
-                            <label for="contacto">Contacto</label>
-                        </div>
-                        <div class="checkout_inputBox">
-                            <input type="date" name="fecha" id="fecha" required="" placeholder=" ">
-                            <label for="fecha">Fecha de la primer sesión</label>
+        <div class="mobilecart">
+                <img src="IMG/shop copy.svg" alt="shop">
+        </div>
+        <div class="checkout hidden">
+            <div class="frames">
+                <button class="cancelar">x</button>
+                <div class="frame1">
+                    <h2>Pago exitoso<br>Agendamiento de sesión</h2>
+                    <div class="checkout_formBox">
+                        <form action="">
+                            <div class="checkout_inputBox">
+                                <input type="text" name="nombre" id="checkout_nombre" maxlength="25" minlength="1"
+                                    required="" placeholder=" ">
+                                <label for="nombre">Nombre</label>
+                            </div>
+                            <div class="checkout_inputBox">
+                                <input type="email" name="email" id="checkout_email" required="" placeholder=" ">
+                                <label for="email">E-mail</label>
+                            </div>
+                            <div class="checkout_inputBox">
+                                <input type="tel" name="contacto" id="contacto" required="" placeholder=" ">
+                                <label for="contacto">Contacto</label>
+                            </div>
+                            <div class="checkout_inputBox">
+                                <input type="date" name="fecha" id="fecha" required="" placeholder=" ">
+                                <label for="fecha">Fecha de la primer sesión</label>
+                            </div>
+                            <div class="checkout_inputBox">
+                                <textarea name="descripcion" id="descripcion" maxlength="500" minlength="1"
+                                    placeholder="Descripcion de la sesiòn" cols="10" rows="3"></textarea>
+                            </div>
+                        </form>
+                        <div class="button">
+                            <button type="submit">Agendar</button>
                         </div>
-                        <div class="checkout_inputBox">
-                            <textarea name="descripcion" id="descripcion" maxlength="500" minlength="1"
-                                placeholder="Descripcion de la sesiòn" cols="10" rows="3"></textarea>
+                    </div>
+                </div>
+                <div class="frame3">
+                    <div class="mobilshop">
+                        <div class="shop_sticky">
+                            <div class="shopHead">
+                                <h2>Tu canasta</h2>
+                            </div>
+                            <hr class="shop_sticky_hr">
+                            <br>
+                            <div class="shop_resumen">
+                                <div class="shop_resumen_head">
+                                    <span class="tierShoppedCantidad cantidad">x?</span>
+                                    <span class="tierShopped">ejemplo</span>
+                                    <span class="tierPrecio precio">$123 C/U</span>
+                                </div>
+                                <p>Desglozado en:</p>
+                                <div class="shop_overflow">
+                                    <div class="shop_overflow_element">
+                                        <span class="espsShoppedCantidad cantidad">xX</span>
+                                        <img src="IMG/turbo.svg" alt="">
+                                        <div class="detail_element">
+                                            <span class="espsShopped">Optimización del Diseño</span><br><span
+                                                class="espsPrecio precio">$20 C/U</span>
+                                            <h4 class="h4esps">
+                                                Consejos personalizados para mejorar la estética y usabilidad del diseño.
+                                            </h4>
+                                        </div>
+                                    </div>
+                                    <hr class="shop_overflow_hr">
+                                    <div class="shop_overflow_element">
+                                        <span class="espsShoppedCantidad cantidad">xX</span>
+                                        <img src="IMG/turbo.svg" alt="">
+                                        <div class="detail_element">
+                                            <span class="espsShopped">Optimización del Diseño</span><br><span
+                                                class="espsPrecio precio">$20 C/U</span>
+                                            <h4 class="h4esps">
+                                                Consejos personalizados para mejorar la estética y usabilidad del diseño.
+                                            </h4>
+                                        </div>
+                                    </div>
+                                    <hr class="shop_overflow_hr">
+                                    <div class="shop_overflow_element">
+                                        <span class="espsShoppedCantidad cantidad">xX</span>
+                                        <img src="IMG/turbo.svg" alt="">
+                                        <div class="detail_element">
+                                            <span class="espsShopped">Optimización del Diseño</span><br><span
+                                                class="espsPrecio precio">$20 C/U</span>
+                                            <h4 class="h4esps">
+                                                Consejos personalizados para mejorar la estética y usabilidad del diseño.
+                                            </h4>
+                                        </div>
+                                    </div>
+                                    <hr class="shop_overflow_hr">
+                                </div>
+                            </div>
+                            <div class="shop_total">
+                                <h2>Total a pagar: <span>$300</span></h2>
+                            </div>
+                            <div class="button shop_button">
+                                <button class="gocheck">CheckOut</button>
+                            </div>
                         </div>
-                    </form>
-                    <div class="button">
-                        <button type="submit">Agendar</button>
                     </div>
                 </div>
-            </div>
-            <div class="frame2">
+            </div>            
+            <div class="frame2 hidden">
                 <img src="IMG/line-md check-all.svg" alt="">
                 <h2>¡Sesión Agendada!</h2>
                 <p>Recibira en su E-mail el comprobante de pago con el resumen de su agendamiento en un momento.</p>