diff --git a/Resources/img/img_Personal-4-3/cristina_DxO.jpg b/Resources/img/img_Personal-4-3/cristina_DxO.jpg
index d01e38d..0da9701 100644
Binary files a/Resources/img/img_Personal-4-3/cristina_DxO.jpg and b/Resources/img/img_Personal-4-3/cristina_DxO.jpg differ
diff --git a/Resources/img/img_Personal-4-3/lourdes_DxO.jpg b/Resources/img/img_Personal-4-3/lourdes_DxO.jpg
index c2e2b81..881298d 100644
Binary files a/Resources/img/img_Personal-4-3/lourdes_DxO.jpg and b/Resources/img/img_Personal-4-3/lourdes_DxO.jpg differ
diff --git a/Resources/img/img_Personal-4-3/mariat_DxO.jpg b/Resources/img/img_Personal-4-3/mariat_DxO.jpg
index 98436cb..1c5ff85 100644
Binary files a/Resources/img/img_Personal-4-3/mariat_DxO.jpg and b/Resources/img/img_Personal-4-3/mariat_DxO.jpg differ
diff --git a/Resources/img/img_Personal-4-3/noemi_DxO.jpg b/Resources/img/img_Personal-4-3/noemi_DxO.jpg
index 2456058..3474f7e 100644
Binary files a/Resources/img/img_Personal-4-3/noemi_DxO.jpg and b/Resources/img/img_Personal-4-3/noemi_DxO.jpg differ
diff --git a/css/integration.css b/css/integration.css
new file mode 100644
index 0000000..61391f0
--- /dev/null
+++ b/css/integration.css
@@ -0,0 +1,127 @@
+:root {
+ --main-White: #FBFBFB;
+ --main-Light-blue: #CAE2E4;
+ --main-Blue: #008F9F;
+ --main-Black: #050505;
+ --main-Yellow: #FDC523;
+ --badge-Red: #ec1212;
+ --badge-Green: #05b80b;
+ --badge-Lilac: #B695C0;
+ --badge-blue: #1b5ed3;
+ --badge-Orange: #ec9c12;
+ --badge-Pink: #ff35d7;
+ /*o fucsia*/
+ --badge-White: #dddddd;
+ --badge-Black: #050505;
+ --badge-Yellow: #ece112;
+ --badge-Aquamarine: #9fd5d1;
+ --badge-Purple: #800080;
+ --badge-Light-blue: #80cdde;
+ --badge-mallow: #E0B0FF;
+ --badge-turquoise: #5dc1b9;
+}
+
+.h35 {
+ font-size: 1.5rem;
+ /* Tamaño de fuente medio entre 3 y 4 */
+ font-weight: 550;
+}
+
+/* modificar por lapiz */
+.cursor {
+ cursor: pointer;
+}
+.critina-select:hover{
+ background-color: #05b80b;
+}
+.maria-select:hover{
+ background-color: #800080;
+ color: var(--main-White);
+}
+.lourdes-select:hover{
+ background-color:#ece112;
+}
+.noemi-select:hover{
+ background-color: #80cdde;
+}
+
+#rotated-svg {
+ transform: rotate(180deg) scaleX(-1);
+ width: 500px;
+ height: 500px;
+}
+
+#rotated-rectangle {
+ transform: rotate(-90deg);
+}
+
+#ilustration img {
+ max-width: 905px;
+ width: 100%;
+ margin: auto;
+ opacity: 0;
+ animation-name: show;
+ animation-delay: 6s;
+ animation-duration: 1s;
+ animation-fill-mode: forwards;
+ animation-iteration-count: 1;
+ animation-timing-function: linear;
+ position: relative;
+ left: 50%;
+ transform: translateX(-50%);
+ z-index: 2;
+}
+
+#ilustration svg {
+ max-width: 900px;
+ width: 100%;
+ margin: auto;
+ position: absolute;
+ position: absolute;
+ left: 0;
+ right: 0;
+ z-index: 1;
+}
+
+#ilustration svg path {
+ stroke-width: 2;
+ animation-fill-mode: forwards;
+ animation-iteration-count: 1;
+ animation-name: draw;
+ animation-timing-function: linear;
+}
+
+#ilustration svg path#hands {
+ stroke: #666;
+ stroke-dasharray: 14535;
+ stroke-dashoffset: 14535;
+ animation-duration: 10s;
+}
+
+#ilustration svg path#shadow {
+ stroke: #999;
+ stroke-dasharray: 1481;
+ stroke-dashoffset: 1481;
+ animation-duration: 2s;
+ animation-delay: 2s;
+}
+
+#ilustration svg path#heart {
+ stroke: #ddd;
+ stroke-dasharray: 3093;
+ stroke-dashoffset: 3093;
+ animation-duration: 2s;
+ animation-delay: 5s;
+}
+
+@keyframes draw {
+ to {
+ stroke-dashoffset: 0;
+ }
+}
+
+@keyframes show {
+ to {
+ opacity: 1;
+ }
+}
\ No newline at end of file
diff --git a/integracionsocial.html b/integracionsocial.html
index 81f2c42..c7fe179 100644
--- a/integracionsocial.html
+++ b/integracionsocial.html
@@ -1,374 +1,438 @@
-
-
-
-
-
-
-
- Educación Infantil
-
+
+
+
+
+
+
+
+
+
+
+ Integración Social
+
+
-