Finish servicios pages v1

src/css/base.css

@@ -34,7 +34,7 @@ label {
   --body-font: "Work Sans", sans-serif;
   --default-font-size: 1.11111vw; /* 16px on 1440px width */
 
-  --layout-padding-x: 5.19rem; /* 83px */
+  --layout-padding-x: 6rem; /* 96px 1440px width */
   --layout-padding-top: 6.25rem;
   --menu-height: 6.25rem;
   --menu-height-pinned: 5rem;

src/css/bundle.html

@@ -14,6 +14,10 @@
     {% include "css/proyectos.css" %}
     {% include "css/servicios.css" %}
     {% include "css/servicios/participacion.css" %}
+    {% include "css/servicios/software-participacion.css" %}
+    {% include "css/servicios/diseno-y-desarrollo.css" %}
+    {% include "css/servicios/transparencia.css" %}
+    {% include "css/servicios/sostenibilidad.css" %}
     {% include "css/kit-digital.css" %}
 {% endcapture %}
 

src/css/servicios.css

@@ -1,6 +1,11 @@
 :root {
   --servicios-projects-title-margin-b: 3.5rem;
   --servicios-projects-project-list-gap: 3.75rem;
+  --servicios-information-padding-y: 5rem;
+  --servicios-information-gap: 3.75rem;
+  --servicios-information-paragraph-title-img-width: 1.875rem;
+  --servicios-information-paragraph-title-img-height: 1.875rem;
+  --servicios-information-paragraph-title-img-margin: 1.38rem;
 }
 @media screen and (max-width: 1023px) {
   :root {
@@ -9,6 +14,11 @@
 }
 @media screen and (max-width: 640px) {
   :root {
+    --servicios-information-padding-y: 3.75rem;
+    --servicios-information-gap: 2.5rem;
+    --servicios-information-paragraph-title-img-width: 1.5rem;
+    --servicios-information-paragraph-title-img-height: 1.5rem;
+    --servicios-information-paragraph-title-img-margin: 1rem;
     --servicios-projects-title-margin-b: 2.5rem;
   }
 }
@@ -19,7 +29,7 @@
   flex-direction: row;
   align-items: center;
   margin: auto;
-  padding: 9.7rem var(--layout-padding-x);
+  padding: var(--layout-padding-top) var(--layout-padding-x);
   max-width: 1920px;
 }
 .servicios section.hero .right,
@@ -72,6 +82,40 @@
   }
 }
 
+.servicios section.information {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--servicios-information-gap);
+  margin: auto;
+  padding: var(--servicios-information-padding-y) var(--layout-padding-x);
+  max-width: 1920px;
+}
+.servicios .information .paragraph-title {
+  display: flex;
+  flex-direction: row;
+  justify-content: start;
+  align-items: center;
+}
+.servicios .information .paragraph-title img {
+  width: var(--servicios-information-paragraph-title-img-width);
+  height: var(--servicios-information-paragraph-title-img-height);
+  margin-right: var(--servicios-information-paragraph-title-img-margin);
+}
+.servicios .information .paragraph-title h2 {
+  font: var(--font-heading-xl);
+}
+.servicios .information p {
+  position: relative;
+  margin-left: calc(
+    var(--servicios-information-paragraph-title-img-width) + 
+    var(--servicios-information-paragraph-title-img-margin)
+    );
+  padding-top: 1rem;
+  padding-bottom: 2rem;
+  font: var(--font-text-md);
+}
+
 .servicios section.projects {
   width: 100%;
   margin: auto;

src/css/servicios/diseno-y-desarrollo.css

@@ -0,0 +1,30 @@
+:root {
+    --diseño-desarrollo-information-img-width: 31.6rem;
+    --diseño-desarrollo-information-img-height: 36.9rem;
+}  
+
+@media screen and (max-width: 1023px) {
+    :root {
+        --diseño-desarrollo-information-img-width: 100%;
+        --diseño-desarrollo-information-img-height: 26.8rem;
+    }  
+}
+/* information */
+.diseno-y-desarrollo .information .information-img {
+    width: var(--diseño-desarrollo-information-img-width);
+    height: var(--diseño-desarrollo-information-img-height);
+    object-fit: cover;
+    border-radius: 1rem;
+}
+/* responsive */
+@media screen and (max-width: 1023px) {
+    .diseno-y-desarrollo section.information {
+        flex-direction: column-reverse;
+    }
+}
+
+@media screen and (max-width: 640px) {
+    .diseno-y-desarrollo section.information {
+        gap: 2.5rem;
+    }
+}

src/css/servicios/software-participacion.css

@@ -0,0 +1,54 @@
+:root {
+    --software-participacion-consul-mobile-img-width: 25.48rem;
+    --software-participacion-consul-mobile-img-height: 42.36rem;
+}
+
+@media screen and (max-width: 1023px) {
+    :root {
+        --software-participacion-consul-mobile-img-width: auto;
+        --software-participacion-consul-mobile-img-height: 29.6rem;
+    }
+}
+/* information */
+.software-participacion .information .consul-images {
+    display: flex;
+    flex-direction: column;
+    width: 31.4rem;
+    height: 50.908rem;
+    gap: 1.19rem;
+    justify-content: center;
+    align-items: center;
+}
+.software-participacion .information .consul-images .consul-mobile-img {
+    width: var(--software-participacion-consul-mobile-img-width);
+    height: var(--software-participacion-consul-mobile-img-height);
+    object-fit: cover;
+}
+.software-participacion .information .consul-images .consul-awarded-img {
+    width: 18.375rem;
+    height: 7.357rem;
+    object-fit: cover;
+}
+
+.software-participacion .information .information-text {
+    align-self: center;
+}
+.software-participacion .information .information-text .button-primary {
+    position: relative;
+    margin-left: calc(
+        var(--servicios-information-paragraph-title-img-width) + 
+        var(--servicios-information-paragraph-title-img-margin)
+        );
+    margin-top: 1.5rem;
+}
+/* responsive */
+@media screen and (max-width: 1023px) {
+    .software-participacion section.information {
+        flex-direction: column-reverse;
+    }
+
+    .software-participacion .information .consul-images {
+        width: 100%;
+        height: auto;
+    }
+}

src/css/servicios/sostenibilidad.css

@@ -0,0 +1,111 @@
+:root {
+  --sostenibilidad-card-img-width: 26.25rem;
+  --sostenibilidad-card-img-height: 26.25rem;
+}
+
+@media screen and (max-width: 1023px) {
+  :root {
+    --sostenibilidad-card-img-width: 100%;
+    --sostenibilidad-card-img-height: 17.6rem;
+  }
+}
+
+@media screen and (max-width: 640px) {
+  :root {
+    --sostenibilidad-card-img-width: 20rem;
+    --sostenibilidad-card-img-height: 15rem;
+  }
+}
+/* intro */
+.sostenibilidad section.intro {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 1.5rem;
+  color: var(--white);
+  background-color: var(--primary);
+  width: 100%;
+  text-align: center;
+  padding: 2.5rem 0rem;
+}
+.sostenibilidad section.intro h2 {
+  font: var(--font-heading-xl);
+}
+.sostenibilidad section.intro p {
+  font: var(--font-text-xxl);
+  max-width: 53rem;
+}
+.sostenibilidad section.intro img {
+  height: 3.25rem;
+}
+/* information */
+.sostenibilidad section.information {
+  flex-direction: column;
+  gap: 5rem
+}
+.sostenibilidad .information .information-card {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+.sostenibilidad .information .information-card .information-text {
+  align-self: flex-start;
+  max-width: 44.397rem;
+}
+.sostenibilidad .information .information-card .information-card-img {
+  border-radius: 1rem;
+  width: var(--sostenibilidad-card-img-width);
+  height: var(--sostenibilidad-card-img-height);
+  object-fit: cover;
+}
+/* urbandata card */
+.sostenibilidad .information .information-card #sostenibilidad-urbandata {
+  background:  #708396;
+  object-fit: contain;
+}
+/* consul sdg card* */
+.sostenibilidad .information .information-card .consul-image-spacer {
+  border-radius: 1rem;
+  width: var(--sostenibilidad-card-img-width);
+  height: var(--sostenibilidad-card-img-height);
+  background: #BBD3F6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.sostenibilidad .information .information-card #sostenibilidad-consul-sdg {
+  width: calc(var(--sostenibilidad-card-img-width) - 2.5rem);
+  height: calc(var(--sostenibilidad-card-img-width) - 3.5rem);
+  object-fit: contain;
+}
+.sostenibilidad .information .information-text .button-primary {
+  position: relative;
+  margin-left: calc(
+      var(--servicios-information-paragraph-title-img-width) + 
+      var(--servicios-information-paragraph-title-img-margin)
+      );
+  margin-top: 1.5rem;
+}
+/* responsive */
+@media screen and (max-width: 1023px) {
+  .sostenibilidad section.intro {
+    padding: 2.5rem var(--layout-padding-x);
+  }
+
+  .sostenibilidad .information {
+    gap: 3.75rem;
+  }
+  .sostenibilidad .information .information-card {
+    flex-direction: column-reverse;
+    gap: 2.5rem;
+  }
+}
+
+@media screen and (max-width: 640px) {
+  .sostenibilidad section.intro {
+    display: none;
+  }
+}

src/css/servicios/transparencia.css

@@ -0,0 +1,29 @@
+:root {
+    --transparencia-information-img-width: 31.47rem;
+    --transparencia-information-img-height: 25.85rem;
+}  
+
+@media screen and (max-width: 1023px) {
+    :root {
+        --transparencia-information-img-width: 100%;
+        --transparencia-information-img-height: auto;
+    }  
+}
+/* information */
+.transparencia .information .information-img {
+    width: var(--transparencia-information-img-width);
+    height: var(--transparencia-information-img-height);
+    object-fit: cover;
+}
+/* responsive */
+@media screen and (max-width: 1023px) {
+    .transparencia section.information {
+        flex-direction: column-reverse;
+    }
+}
+
+@media screen and (max-width: 640px) {
+    .transparencia section.information {
+        gap: 2.5rem;
+    }
+}

src/proyectos/plan-de-acción-participativo-empleo-mujeres-jóvenes-medio-rural.md

@@ -4,10 +4,11 @@ title: Plan de Acción participativo sobre empleo para mujeres y jóvenes del me
 image: https://ik.imagekit.io/enreda/valaldolid.jpg?updatedAt=1700660013051
 subtitle: Proceso participativo para detectar necesidades y soluciones entre mujeres y jóvenes rurales 
 client: Diputación Provincial de Valladolid
-ods: [5, 8, 8, 11, 12, 16, 17]
+ods: [5, 8, 11, 12, 16, 17]
 categories: ["Participación ciudadana"]
 summary: ENREDA ha desarrollado durante seis meses este proceso participativo- que ha incluido una encuesta a 400 mujeres y 400 jóvenes; varios encuentros comarcales y entrevistas a informantes clave - para desarrollar este documento que guiará la estrategia de empleo de la Diputación de Valladolid 
 ---
+
 El Servicio de Transparencia y Gobierno Abierto de la Diputación Provincial de Valladolid, se ha aliado con la Cooperativa Enreda para organizar durante 2023 diversos procesos participativos, para poder elaborar su plan de acción para la mejora del empleo de mujeres y jóvenes en el ámbito rural.
 
 Los principales objetivos de estos procesos eran:

src/proyectos/presupuesto-mijas.md

@@ -1,6 +1,6 @@
 ---
 layout: proyecto.html
-title: Presupuesto Participativos de Mijas
+title: Presupuesto Participativo de Mijas
 image: https://ik.imagekit.io/enreda/proyectos/presupuesto-participativo-mijas.png?updatedAt=1700671434750
 ogtype: website
 ogimage: https://ik.imagekit.io/enreda/proyectos/presupuesto-participativo-mijas.png?updatedAt=1700671434750

src/proyectos/transparencia-presupuestaria.md

@@ -7,7 +7,7 @@ ogimage: https://ik.imagekit.io/enreda/proyectos/transparencia-presupuestaria.pn
 subtitle: Visualiza su presupuesto
 client: Producto propio
 ods: [16]
-categories: ["Diseño y desarrollo"]
+categories: ["Diseño y desarrollo", "Transparencia"]
 summary: Web de visualización de datos en la que se intenta hacer comprensible el presupuesto de cualquier entidad. Además se compara con años anteriores para generar referencias y contextos en los datos. Una oportunidad para empezar a explicar los números.
 ---