actualizando cards y mejorando detalles de estilo

assents/css/banner/callaction/callaction.css

@@ -44,14 +44,17 @@
         background-color: var(--coloruno);
         position: absolute;
         width: 50%;
-        height: 3.125rem;
         text-align: center;
-        padding-top: 3%;
+        padding: 5px 0;
+        cursor: pointer;
     }
     .btn_callaction, a {
         font-family: var(--fuenteprincipal);
         font-weight: bolder;
         font-size: 1.875rem;
         color: var(--colorcinco);
     }
+    .btn_callaction:hover {
+        background-color: var(--colorfondonaranja);
+    }
 }

assents/css/reset.css

@@ -5,7 +5,7 @@
     --colortres: #FF7412;
     --colorcuatro: #130100;
     --colorcinco: #FFFFFF;
-    --colorfondomaiz: #FFFFD0;
+    --colorfondomaiz: #FFFDBF;
     --colorfondogranate: #FFCCB3;
     --colorfondonaranja: #FFD180;
     /*>>> VARIABLES DE FUENTE <<<*/
@@ -49,11 +49,20 @@ section {
     color: var(--colorcuatro);
     font-size: medium;
 }
+.card {
+    height: 644px;
+}
 
 /*<<<<<<---RESPONSIVO MOBILE & TABLET--->>>>>>*/
 
 @media (max-width: 768px) {
     .more {
         display: none;
     }
+
+}
+@media (max-width: 600px) {
+    .card {
+        height: 466.77px;
+    }
 }

assents/css/sections/cards/cards.css

@@ -1,46 +1,87 @@
 .cards{
-    width: 95%;
+    width: 100%;
     margin: auto;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-evenly;
 }
 .card {
-    /*background-color: var(--coloruno);*/
-    width: 15%;
-    border-radius: 5px;
-    /* box-shadow: 2px 2px 4px rgba(0, 0, 0, 3); */
-    margin-top: 2.5%;
-    background-color: var(--colorcinco);
+    width: auto;
+    margin-top: 15px;
+    border-radius: 20px 20px 20px 20px;
+    position: relative;
 }
 .img_card {
-    width: 90%;
-    margin: auto;
-    margin-top: 0.625rem;
+    width: 100%;
+    margin-top: 0px;
+}
+.img_card::after {
+    content: "";
+    position: absolute;
+    bottom: 9%;
+    left: 0;
+    width: 94%;
+    height: 50%;
+    background-image: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
+    filter: blur(10px);
 }
 .img_producto {
     max-width: 100%;
-    height: auto;
-    border-radius: 10px;
+    border-radius: 20px; 
 }
 .footer_card {
-    display: flex;
-    justify-content:space-evenly;
-    font-size: x-large;
+    position: absolute;
+    top: 90%;
+    width: 100%;
+    height: 10%;
+    border-radius: 0px 0px 20px 20px;
     color: var(--colorcinco);
     margin-bottom: 0.625rem;
+    box-shadow: 0 5px 4px rgba(0, 0, 0, 0.3);
 }
 .title {
-    margin: 0.625rem;
+    position: absolute;
+    top: 55%;
+    left: 5%;
+    color: var(--colorcinco);
+    width: 70%;
 }
-.btncard {
-    background-color: var(--colordos);
-    width: 30%;
-    text-align: center;
-    border-radius: 5px;
-    padding-top: 4px;
+.body-card {
+    position: absolute;
+    top: 71%;
+    width: 74%;
+    left: 10%;
+}
+.p-body{
+    color: var(--colorcinco);
+    font-family: var(--fuenteterciaria);
+    font-size: 11px;
+    text-align: start;
+}
+.icon-card {
+    width: 95%;
+    left: 5%;
+}
+.icons{
+    color: var(--colorcuatro);
+    font-size: 32px;
+    margin-top: 15px;
+    margin-left: 5px;
     cursor: pointer;
 }
+.icons:nth-child(4) {
+    margin-left: 40%;
+    font-weight: bolder;
+}
+#maiz {
+    background-color: var(--coloruno);
+}
+#orange {
+    background-color: var(--colortres);
+}
+#granate {
+    background-color: var(--colordos);
+}
 
 /*<<<<<<---RESPONSIVO MOBILE & TABLET--->>>>>>*/
 
@@ -49,13 +90,11 @@
         width: 100%;
         margin: auto;
         display: flex;
-        /* flex-wrap: wrap; */
         justify-content: space-evenly;
-
     }
     .card {
         width: 45%;
-        border-radius: 0px 0px 20px 20px;
+        border-radius: 20px 20px 20px 20px;
         position: relative;
     }
     .img_card {
@@ -73,62 +112,77 @@
         filter: blur(10px);
     }
     .img_producto {
-        max-width: 100%;
-        /* height: auto; */
+        position: absolute;
+        width: 100%;
         border-radius: 20px;
-
     }
     .footer_card {
         position: absolute;
         top: 90%;
         width: 100%;
         height: 10%;
-        background-color: var(--coloruno);
         border-radius: 0px 0px 20px 20px;
-        /* display: flex; */
-        /* justify-content:space-evenly; */
-        /* font-size: x-large; */
         color: var(--colorcinco);
         margin-bottom: 0.625rem;
         box-shadow: 0 5px 4px rgba(0, 0, 0, 0.3);
     }
     .title {
         position: absolute;
-        top: 55%;
+        top: 51%;
         left: 5%;
         color: var(--colorcinco);
         width: 70%;
     }
     .body-card {
         position: absolute;
-        top: 71%;
+        top: 65%;
         width: 74%;
-        left: 10%;
+        left: 5%;
     }
     .p-body{
         color: var(--colorcinco);
         font-family: var(--fuenteterciaria);
-        font-size: 11px;
+        font-size: 16px;
         text-align: start;
     }
     .icon-card {
-        width: 95%;
-        left: 5%;
+        width: 93%;
+        /* left: 10%; */
     }
-    /* i {
-        color: var(--colorcuatro);
-        font-size: 28px;
-        margin-top: 15px;
-    } */
     .icons{
         color: var(--colorcuatro);
         font-size: 32px;
         margin-top: 15px;
-        margin-left: 5px;
+        margin-left: 10px;
         cursor: pointer;
     }
     .icons:nth-child(4) {
-        margin-left: 40%;
-        font-weight: bolder;
+        position: absolute;
+        margin-left: 150px;
     }
-}
+    #maiz {
+        background-color: var(--coloruno);
+    }
+    #orange {
+        background-color: var(--colortres);
+    }
+    #granate {
+        background-color: var(--colordos);
+    }
+}
+
+@media (max-width: 600px) {
+    .icons{
+        margin-top: 10px;
+    }
+    .icons:nth-child(4) {
+        margin-left: 80px;
+    }
+    .body-card {
+        top: 70%;
+    }
+    .p-body {
+        font-size: 11px;
+    }
+}
+

assents/css/sections/dioramas/dioramas.css

@@ -1,9 +1,11 @@
 .dioramas {
-    width: 90%;
+    width: 100%;
     margin: auto;
     display: flex;
     flex-direction: column;
     margin-top: 3.125rem;
+    background-color: var(--colorfondomaiz);
+    padding-bottom: 30px;
 }
 
 /*<<<<<<---RESPONSIVO MOBILE & TABLET--->>>>>>*/
@@ -14,8 +16,8 @@
         margin: auto;
         display: flex;
         flex-direction: column;
-        margin-top: 3.125rem;
-        margin-bottom: 3.125rem;
         background-color: var(--colorfondomaiz);
+        padding-bottom: 30px;
     }
+
 }

assents/css/sections/fountain/fountain.css

@@ -11,11 +11,11 @@
 
 @media (max-width:768px) {
     .fountain {
-        width: 90%;
+        width: 100%;
         margin: auto;
         display: flex;
         flex-direction: column;
-        margin-top: 3.125rem;
-        margin-bottom: 3.125rem;
+        background-color: var(--colorfondogranate);
+        padding-bottom: 30px;
     }
 }

assents/css/sections/secfigures/figures.css

@@ -1,5 +1,5 @@
 .figure {
-    width: 90%;
+    width: 100%;
     margin: auto;
     display: flex;
     flex-direction: column;
@@ -10,10 +10,11 @@
 
 @media (max-width:768px) {
     .figure {
-        width: 90%;
+        width: 100%;
         margin: auto;
         display: flex;
         flex-direction: column;
-        margin-top: 3.125rem;
+        background-color: var(--colorfondonaranja);
+        padding-bottom: 30px;
     }
 }