Feat: modified global layout and minor changes.

- Added 2 buttons that don't move with scroll, one for whatsapp contact and another for payment site, each one with its own style and animations.
- Added 'required' to all inputs in contact page.
- Ajusted button height to 56px.

src/styles/global.css

@@ -397,3 +397,103 @@ summary {
 main {
     flex: 1;
 }
+
+.floating-buttons {
+    position: fixed;
+
+    bottom: 124px;
+    right: 24px;
+    z-index: 1000;
+
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+.floating-button {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 68px;
+    height: 68px;
+    border-radius: 100%;
+    box-shadow: 4px 4px 8px rgba(68, 68, 68, 0.3);
+
+    &:hover {
+        scale: 1.1;
+        transition: scale 0.4s ease;
+    }
+}
+
+.whatsapp-floatingbutton {
+    background-color: #25d366;
+
+    & .whatsapp-floatingbutton-text {
+        width: max-content;
+        height: 40px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        background-color: #25d366;
+        padding: var(--padding-sm-8px) var(--padding-lg-24px);
+        color: var(--dark-gray);
+        font-weight: bold;
+        border-radius: var(--space-md-16px);
+
+        position: absolute;
+        right: 80px;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 1001;
+
+        /* Estado inicial: invisible y cerca del botón */
+        opacity: 0;
+        visibility: hidden;
+        transition: all 0.3s ease;
+    }
+
+    &:hover .whatsapp-floatingbutton-text {
+        /* Estado hover: visible y separado del botón */
+        right: 100px;
+        opacity: 1;
+        visibility: visible;
+    }
+}
+
+.payment-floatingbutton {
+    background-color: var(--main-pink-500);
+
+    & .payment-floatingbutton-text {
+        width: max-content;
+        height: 40px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        background-color: var(--main-pink-500);
+        padding: var(--padding-sm-8px) var(--padding-lg-24px);
+        color: var(--base-white);
+        font-weight: bold;
+        border-radius: var(--space-md-16px);
+
+        position: absolute;
+        right: 80px;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 1001;
+
+        /* Estado inicial: invisible y cerca del botón */
+        opacity: 0;
+        visibility: hidden;
+        transition: all 0.3s ease;
+    }
+
+    &:hover .payment-floatingbutton-text {
+        /* Estado hover: visible y separado del botón */
+        right: 100px;
+        opacity: 1;
+        visibility: visible;
+    }
+}