style: ajusta bg de botones

src/components/AdoptarArbol/AdoptarArbol.tsx

@@ -14,10 +14,10 @@ const AdoptarArbol: React.FC<AdoptarArbolProps> = ({ datos }) => {
   const navigate = useNavigate();
 
   return (
-    <div className="bg-white rounded-xl overflow-hidden shadow-lg flex flex-col w-full max-w-[250px]">
+    <div className="bg-white rounded-xl overflow-hidden shadow-lg flex flex-col w-full h-full">
       <div className="relative">
         <img
-          src={datos.images[0]} // Cambié imageUrl a images
+          src={datos.images[0]}
           alt={`Árbol de ${datos.type}`}
           className="w-full h-48 object-cover transition-all duration-300 group-hover:brightness-95"
         />
@@ -80,7 +80,7 @@ const AdoptarArbol: React.FC<AdoptarArbolProps> = ({ datos }) => {
 
         <button
           onClick={() => navigate(`/adopta-un-arbol/${datos.id}`)}
-          className="w-full mt-4 rounded-lg bg-[#4BAF47] text-white transition-all duration-300 hover:bg-[#3B8833] py-2 px-4 font-medium shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-[#4BAF47] focus:ring-opacity-50"
+          className="w-full mt-4 text-white bg-gradient-to-r from-green-500 to-green-600 rounded-[10px] shadow-lg hover:from-green-600 hover:to-green-700 transition-all duration-300 transform"
         >
           Adoptar este árbol
         </button>

src/components/Arboles/Arboles.tsx

@@ -41,7 +41,7 @@ const Arboles: React.FC<ArbolesProps> = ({ language }) => {
     },
   };
 
-  const { adopt, treesTitle, adoptTree, adoptButton } = content[language];
+  const { adopt, treesTitle, adoptButton } = content[language];
 
   const arboles: Arbol[] = [
     {
@@ -113,8 +113,6 @@ const Arboles: React.FC<ArbolesProps> = ({ language }) => {
             </div>
           ))}
         </div>
-
-        <h3 className="text-4xl font-bold text-white mb-4">{adoptTree}</h3>
       </div>
     </section>
   );

src/index.css

@@ -106,3 +106,25 @@ input {
   padding: 0.5rem 1rem;
   background-color: #fff; /* Personaliza el fondo */
 }
+
+/* Personaliza el fondo del scrollbar */
+::-webkit-scrollbar {
+  width: 12px; /* Ancho del scrollbar */
+  height: 12px; /* Altura del scrollbar horizontal */
+}
+
+/* Personaliza la pista (fondo) del scrollbar */
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+/* Personaliza el pulgar (la parte deslizante) del scrollbar */
+::-webkit-scrollbar-thumb {
+  background: #4BAF47;
+  border-radius: 10px;
+}
+
+/* Pulgar del scrollbar al hacer hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #44a040;
+}

src/pages/Adoptar/Adoptar.tsx

@@ -63,7 +63,7 @@ const Adoptar: React.FC = () => {
   }
 
   return (
-    <div className="px-4 sm:px-6 md:px-8 lg:px-[200px] 2xl:px-[130px] my-[116px]">
+    <div className="px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 2xl:px-28 my-[116px] max-w-screen-2xl mx-auto">
       <motion.h1
         className="text-3xl sm:text-4xl font-bold mb-2 mt-6 sm:mt-8"
         initial={{ opacity: 0, y: -20 }}
@@ -91,20 +91,20 @@ const Adoptar: React.FC = () => {
           sx={{
             '& .MuiOutlinedInput-root': {
               '& fieldset': {
-                borderColor: 'green', // Color del borde normal
+                borderColor: 'green',
               },
               '&:hover fieldset': {
-                borderColor: '#909590', // Color del borde cuando se pasa el mouse
+                borderColor: '#909590',
               },
               '&.Mui-focused fieldset': {
-                borderColor: 'green', // Color del borde cuando está enfocado
+                borderColor: 'green',
               },
             },
             '& .MuiInputLabel-root': {
-              color: 'gray', // Color del label
+              color: 'gray',
             },
             '& .MuiInputLabel-root.Mui-focused': {
-              color: 'green', // Color del label cuando está enfocado
+              color: 'green',
             },
           }}
           label="Busca un árbol"
@@ -121,7 +121,7 @@ const Adoptar: React.FC = () => {
         />
       </motion.div>
       <motion.div
-        className="grid gap-6 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 mt-10 max-w-screen-lg"
+        className="grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-10"
         initial="hidden"
         animate="visible"
         variants={{
@@ -151,4 +151,4 @@ const Adoptar: React.FC = () => {
   );
 };
 
-export default Adoptar;
+export default Adoptar;

src/pages/Checkout/Checkout.tsx

@@ -130,14 +130,14 @@ const Checkout = () => {
                 <p className="mt-4 mb-2">Cantidad reservada</p>
                 <div className="flex items-center gap-[20px]">
                   <button
-                    className="px-[14px] py-[4px] bg-[#e9ecf3] rounded-[4px] text-[#bfc1c4] font-[600]"
+                    className="px-[14px] py-[4px] bg-[#e9ecf3] rounded-[10px] text-[#bfc1c4] font-[600]"
                     onClick={() => handleQuantityChange(-1)}
                   >
                     -
                   </button>
                   <span className="text-[#4BAF47] font-[600]">{quantity}</span>
                   <button
-                    className="px-[14px] py-[4px] bg-[#4BAF47] rounded-[4px] text-white font-[600]"
+                    className="px-[14px] py-[4px] text-white bg-gradient-to-r from-green-500 to-green-600 rounded-[10px] shadow-lg hover:from-green-600 hover:to-green-700 transition-all duration-300 transform"
                     onClick={() => handleQuantityChange(1)}
                   >
                     +
@@ -207,7 +207,7 @@ const Checkout = () => {
               </div>
 
               <button
-                className="rounded-[10px] bg-[#4BAF47] text-white hover:bg-[#3B8838] my-6 w-full"
+                className="text-white bg-gradient-to-r from-green-500 to-green-600 rounded-[10px] shadow-lg hover:from-green-600 hover:to-green-700 transition-all duration-300 transform my-6 w-full"
                 onClick={
                   activeStep === steps.length - 1
                     ? handleAdoptionComplete