diff --git a/Resources/img/bg photos/fondoinfantil.avif b/Resources/img/bg photos/fondoinfantil.avif
new file mode 100644
index 0000000..bfbc130
Binary files /dev/null and b/Resources/img/bg photos/fondoinfantil.avif differ
diff --git a/Resources/img/img_Personal-4-3/AlvaroRodriguez_DxO.jpg b/Resources/img/img_Personal-4-3/AlvaroRodriguez_DxO.jpg
new file mode 100644
index 0000000..5479191
Binary files /dev/null and b/Resources/img/img_Personal-4-3/AlvaroRodriguez_DxO.jpg differ
diff --git a/Resources/img/img_Personal-4-3/JuanCarlos_DxO.jpg b/Resources/img/img_Personal-4-3/JuanCarlos_DxO.jpg
new file mode 100644
index 0000000..e7512d7
Binary files /dev/null and b/Resources/img/img_Personal-4-3/JuanCarlos_DxO.jpg differ
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/Resources/img/personal/AlvaroRodriguez.jpeg b/Resources/img/personal/AlvaroRodriguez.jpeg
new file mode 100644
index 0000000..0ac0c4f
Binary files /dev/null and b/Resources/img/personal/AlvaroRodriguez.jpeg differ
diff --git a/Resources/img/personal/Viriginia.jpeg b/Resources/img/personal/Viriginia.jpeg
new file mode 100644
index 0000000..b2e208a
Binary files /dev/null and b/Resources/img/personal/Viriginia.jpeg differ
diff --git a/Resources/img/personal/fernando.jpeg b/Resources/img/personal/fernando.jpeg
new file mode 100644
index 0000000..1c4b8bb
Binary files /dev/null and b/Resources/img/personal/fernando.jpeg differ
diff --git a/Resources/img/personal/juanca.jpeg b/Resources/img/personal/juanca.jpeg
new file mode 100644
index 0000000..4072590
Binary files /dev/null and b/Resources/img/personal/juanca.jpeg differ
diff --git a/Resources/img/personal/pablocenizo.jpg b/Resources/img/personal/pablocenizo.jpg
new file mode 100644
index 0000000..3492cff
Binary files /dev/null and b/Resources/img/personal/pablocenizo.jpg differ
diff --git a/Resources/img/personal/pilar.jpeg b/Resources/img/personal/pilar.jpeg
new file mode 100644
index 0000000..39b6e67
Binary files /dev/null and b/Resources/img/personal/pilar.jpeg differ
diff --git a/Resources/img/personal/teresa.jpg b/Resources/img/personal/teresa.jpg
new file mode 100644
index 0000000..d4a84d0
Binary files /dev/null and b/Resources/img/personal/teresa.jpg differ
diff --git a/Resources/img/personal/virginia.jpeg b/Resources/img/personal/virginia.jpeg
deleted file mode 100644
index 8c87cdb..0000000
Binary files a/Resources/img/personal/virginia.jpeg and /dev/null differ
diff --git a/Sanidad_Anatomia.html b/Sanidad_Anatomia.html
index 4554a9a..213a5ed 100644
--- a/Sanidad_Anatomia.html
+++ b/Sanidad_Anatomia.html
@@ -10,6 +10,7 @@
   <!-- Bootstrap -->
   <link rel="stylesheet" href="css/bootstrap.css">
   <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="css/anatomia.css">
   <link rel="shortcut icon" href="Resources/img/logo/ilerna_Staff_Amarillo.png" type="image/x-icon">
 
   <script defer src="js/bootstrap.bundle.js"></script>
@@ -153,181 +154,93 @@ <h1 class="mb-3">Anatomia Patológica y Citoldiagnostico</h1>
       </div>
     </div>
 
-    <div class="container p-5 mt-5">
-      <div class="row justify-content-center align-items-center p-5">
-
-        <div class="col-12 col-md-12 col-lg-12 g-5">
-          <div
-            class="row rounded-5 justify-content-center align-items-center card-shadow p-4 bg-card border border-1 border-color ">
-            <div class="col-12 col-md-12 col-lg-6 text-center p-3">
-              <img src="Resources/img/img_Personal-4-3/Raquel-Garcia_Rodriguez.jpg" class="img-fluid rounded-3">
-              <div class="container">
-                <div class="row justify-content-center align-items-center g-2 mt-2">
-                  <!--! PONER NOMBRE DEL PROFE PARA EVITAR CONFLICTOS EN BG-BADGE-->
-                  <h1 class="col-12 text-center"> Raquel García Rodríguez
-
-                    <span class="badge rounded-pill badge-size bg-badge-Pink align-middle">☆</span>
-                  </h1>
-                  <h4 class="col-12 text-center">Profesora</h4>
-                </div>
-
-              </div>
-
-            </div>
-            <div class="col-12 col-md-12 col-lg-6 ">
-              <div class="row justify-content-center align-items-center align-middle g-2">
-                <div class="col-12 text-center container bg-dark border border-color border-1 rounded-3 px-1 my-4  ">
-                  <div class="container bg-card rounded-top mt-1">
-                    <h4 class="pt-2">Formación</h4>
-                    <p class="text-break pb-1 mb-1"> Licenciatura en Derecho y Diplomatura en Ciencias Empresariales
-
-
-
-
-                    </p>
-                  </div>
-                  <div class="container bg-card">
-                    <h4 class="pt-2">Hobbies</h4>
-                    <p class="text-break pb-1 mb-1"> Viajar, ir de conciertos/festivales, pasar tiempo con los míos, la
-                      playa y un buen atardecer
-
-
-                      .
-
-                    </p>
-                  </div>
-                  <div class="container bg-card">
-                    <h4 class="pt-2">Frase que te represente</h4>
-                    <p class="text-break pb-1 mb-1">Tiempo al tiempo
-
-
-
-                    </p>
-                  </div>
-                  <div class="container bg-card rounded-bottom ">
-                    <h4 class="pt-2">Algo sobre ti</h4>
-                    <p class="text-break pb-1 mb-1"> Imparto asignaturas trasversales como Formación y Orientación
-                      Laboral, entre otras .Estoy feliz de poder dedicarme a la docencia y de ayudar al alumnado en su
-                      incorporación al mundo laboral. Creo firmemente en el poder de la actitud.
-
-                      .
-
-                    </p>
-                  </div>
-                </div>
-              </div>
+    <div class="title-container">
+      <h1 class="title">Profesores</h1>
+  </div>
+ 
+ 
+    <div class="cards-container">
+      <!-- Tarjeta 1 -->
+      <div class="card">
+        <div class="face front">
+            <!-- Contenido del frente de la tarjeta -->
+            <img src="Resources/img/personal/raquel.png" alt="Nombre">
+            <h3>Raquel García Rodríguez</h3>
+        </div>
+        <div class="face back">
+            <!-- Contenido de la parte trasera de la tarjeta -->
+            <div class="card-info">
+              <br>
+                <h4>Formación</h4>
+                <p>Licenciatura en Derecho y Diplomatura en Ciencias Empresariales.</p>
+               
+                <h4>Hobbies</h4>
+                <p>Viajar, ir de conciertos/festivales, pasar tiempo con los míos, la playa y un buen atardecer.</p>
+               
+                <h4>Frase que te represente</h4>
+                <p>Tiempo al tiempo.</p>
+               
+                <h4>Algo sobre ti</h4>
+                <p>Imparto asignaturas transversales como Formación y Orientación Laboral, entre otras. Estoy feliz de poder dedicarme a la docencia y de ayudar al alumnado en su incorporación al mundo laboral. Creo firmemente en el poder de la actitud.</p>
+               
             </div>
-          </div>
         </div>
-      </div>
     </div>
-
-    <div class="container p-5 mt-5">
-      <div class="row justify-content-center align-items-center p-5">
-
-        <div class="col-12 col-md-12 col-lg-12 g-5">
-          <div
-            class="row rounded-5 justify-content-center align-items-center card-shadow p-4 bg-card border border-1 border-color ">
-            <div class="col-12 col-md-12 col-lg-6 text-center p-3">
-              <img src="Resources/img/img_Personal-4-3/daniddc_DxO.jpg" class="img-fluid rounded-3">
-              <div class="container">
-                <div class="row justify-content-center align-items-center g-2 mt-2">
-                  <!--! PONER NOMBRE DEL PROFE PARA EVITAR CONFLICTOS EN BG-BADGE-->
-                  <h1 class="col-12 text-center"> Daniel Domínguez Cabría <span
-                      class="badge rounded-pill badge-size bg-badge-Light-blue align-middle">☆</span></h1>
-                  <h4 class="col-12 text-center">Profesor</h4>
-                </div>
-
-              </div>
-
-            </div>
-            <div class="col-12 col-md-12 col-lg-6 ">
-              <div class="row justify-content-center align-items-center align-middle g-2">
-                <div class="col-12 text-center container bg-dark border border-color border-1 rounded-3 px-1 my-4  ">
-                  <div class="container bg-card rounded-top mt-1">
-                    <h4 class="pt-2">Formación</h4>
-                    <p class="text-break pb-1 mb-1"> Licenciatura Licenciado en Biología
-
-                    </p>
-                  </div>
-                  <div class="container bg-card">
-                    <h4 class="pt-2">Hobbies</h4>
-                    <p class="text-break pb-1 mb-1"> videojuegos, libros, juegos de mesa, anime.
-                      .
-
-                    </p>
-                  </div>
-                  <div class="container bg-card">
-                    <h4 class="pt-2">Frase que te represente</h4>
-                    <p class="text-break pb-1 mb-1">¿Se necesita una razón para ayudar a alguien? Yitan FFIX
-                    </p>
-                  </div>
-                  <div class="container bg-card rounded-bottom ">
-                    <h4 class="pt-2">Algo sobre ti</h4>
-                    <p class="text-break pb-1 mb-1"> cercano y apasionado, creo que el profesor debe apoyar al alumno
-                      desde la cercanía, no desde una posición de poder
-                    </p>
-                  </div>
-                </div>
-              </div>
+      <!-- Tarjeta 2 -->
+      <div class="card">
+        <div class="face front">
+            <!-- Contenido del frente de la tarjeta -->
+            <img src="Resources/img/img_Personal-4-3/daniddc_DxO.jpg" alt="Dani">
+            <h3>Daniel Domínguez Cabría</h3>
+        </div>
+        <div class="face back">
+            <!-- Contenido de la parte trasera de la tarjeta -->
+            <div class="card-info">
+              <br>
+                <h4>Formación</h4>
+                <p>Licenciado en Biología.</p>
+               
+                <h4>Hobbies</h4>
+                <p>Videojuegos, libros, juegos de mesa, anime.</p>
+               
+                <h4>Frase que te represente</h4>
+                <p>¿Se necesita una razón para ayudar a alguien? Yitan FFIX.</p>
+               
+                <h4>Algo sobre ti</h4>
+                <p>Cercano y apasionado, creo que el profesor debe apoyar al alumno desde la cercanía, no desde una posición de poder.</p>
+               
             </div>
-          </div>
         </div>
-      </div>
     </div>
-
-    <div class="container p-5 mt-5">
-      <div class="row justify-content-center align-items-center p-5">
-
-        <div class="col-12 col-md-12 col-lg-12 g-5">
-          <div
-            class="row rounded-5 justify-content-center align-items-center card-shadow p-4 bg-card border border-1 border-color ">
-            <div class="col-12 col-md-12 col-lg-6 text-center p-3">
-              <img src="Resources/img/img_Personal-4-3/rosa_DxO.jpg" class="img-fluid rounded-3">
-              <div class="container">
-                <div class="row justify-content-center align-items-center g-2 mt-2">
-                  <!--! PONER NOMBRE DEL PROFE PARA EVITAR CONFLICTOS EN BG-BADGE-->
-                  <h1 class="col-12 text-center"> Rosa García Valero <span
-                      class="badge rounded-pill badge-size bg-badge-blue align-middle">☆</span></h1>
-                  <h4 class="col-12 text-center">Profesora</h4>
-                </div>
-
-              </div>
-
-            </div>
-            <div class="col-12 col-md-12 col-lg-6 ">
-              <div class="row justify-content-center align-items-center align-middle g-2">
-                <div class="col-12 text-center container bg-dark border border-color border-1 rounded-3 px-1 my-4  ">
-                  <div class="container bg-card rounded-top mt-1">
-                    <h4 class="pt-2">Formación</h4>
-                    <p class="text-break pb-1 mb-1"> Doctora en Microbiología </p>
-                  </div>
-                  <div class="container bg-card">
-                    <h4 class="pt-2">Hobbies</h4>
-                    <p class="text-break pb-1 mb-1"> Leer, cocinar, senderismos, ciencia ficción, manga, submarinismos,
-                      artes marciales, juegos de mesa.
-
-                    </p>
-                  </div>
-                  <div class="container bg-card">
-                    <h4 class="pt-2">Frase que te represente</h4>
-                    <p class="text-break pb-1 mb-1">Me lo contaron y lo olvidé.
-                      Lo vi y lo entendí.
-                      Lo hice y lo aprendí </p>
-                  </div>
-                  <div class="container bg-card rounded-bottom ">
-                    <h4 class="pt-2">Algo sobre ti</h4>
-                    <p class="text-break pb-1 mb-1">Me encanta la investigación tanto básica como aplicada. A nivel
-                      docente, intento transmitir mi pasión por la ciencia a las nuevas generaciones.
-                    </p>
-                  </div>
-                </div>
-              </div>
+ 
+ 
+    <!-- Tarjeta 3 -->
+      <div class="card">
+        <div class="face front">
+            <!-- Contenido del frente de la tarjeta -->
+            <img src="Resources/img/img_Personal-4-3/rosa_DxO.jpg" alt="Dani">
+            <h3>Daniel Domínguez Cabría</h3>
+        </div>
+        <div class="face back">
+            <!-- Contenido de la parte trasera de la tarjeta -->
+            <div class="card-info">
+              <br>
+                <h4>Formación</h4>
+                <p>Doctora en Microbiología.</p>
+               
+                <h4>Hobbies</h4>
+                <p>Leer, cocinar, senderismos, ciencia ficción, manga, submarinismos, artes marciales, juegos de mesa.</p>
+               
+                <h4>Frase que te represente</h4>
+                <p>Me lo contaron y lo olvidé. Lo vi y lo entendí. Lo hice y lo aprendí.</p>
+               
+                <h4>Algo sobre ti</h4>
+                <p>Me encanta la investigación tanto básica como aplicada. A nivel docente, intento transmitir mi pasión por la ciencia a las nuevas generaciones.</p>
+               
             </div>
-          </div>
         </div>
-      </div>
     </div>
+  
 
     <!-- Hero -->
   </main>
diff --git a/Sanidad_Aux_Enfermeria.html b/Sanidad_Aux_Enfermeria.html
index 1d92b21..4675b81 100644
--- a/Sanidad_Aux_Enfermeria.html
+++ b/Sanidad_Aux_Enfermeria.html
@@ -152,6 +152,7 @@
   </header>
   <img>
   <!-- Hero -->
+
   <div id="hero" class="has-bg-image p-5 text-center bg-banner-direccion">
     <div class="container">
       <div class="row">
@@ -189,7 +190,7 @@ <h1 class="mb-3">Auxiliar de enfermería</h1>
               <div class="container">
                 <div class="row justify-content-center align-items-center g-2 mt-2">
                   <!--! PONER NOMBRE DEL PROFE PARA EVITAR CONFLICTOS EN BG-BADGE-->
-                  <h1 class="col-12 text-center">Ana García </h1>
+                  <h1 class="col-12 text-center">Ana García</h1>
                   <h4 class="col-12 text-center">Profesora</h4>
                 </div>
               </div>
@@ -224,7 +225,7 @@ <h4 class="pt-2 tab" data-tab="frase">Frase que te represente</h4>
 
                   </div>
                   <div class="container bg-card rounded-bottom ">
-                    <h4 class="pt-2 tab" data-tab="sobre">Algo sobre ti</h4>
+                    <h4 class="pt-2 tab" data-tab="sobre">Algo sobre ti  </h4>
                     <div id="sobre" class="info" style="display:none;">
                       <p class="text-break pb-1 mb-1">Me sale la enfermería por los poros, no hay una profesión más
                         bonita . Soy determinada y bastante intensa.</p>
@@ -256,7 +257,7 @@ <h4 class="pt-2 tab" data-tab="sobre">Algo sobre ti</h4>
               <div class="container">
                 <div class="row justify-content-center align-items-center g-2 mt-2">
                   <!--! PONER NOMBRE DEL PROFE PARA EVITAR CONFLICTOS EN BG-BADGE-->
-                  <h1 class="col-12 text-center">Raquel García </h1>
+                  <h1 class="col-12 text-center">Raquel García</h1>
                   <h4 class="col-12 text-center">Profesora</h4>
                 </div>
               </div>
@@ -324,7 +325,7 @@ <h4 class="pt-2 tab" data-tab="sobre">Algo sobre ti</h4>
               <div class="container">
                 <div class="row justify-content-center align-items-center g-2 mt-2">
                   <!--! PONER NOMBRE DEL PROFE PARA EVITAR CONFLICTOS EN BG-BADGE-->
-                  <h1 class="col-12 text-center">Alba Valle Molina </h1>
+                  <h1 class="col-12 text-center">Alba Valle Molina</h1>
                   <h4 class="col-12 text-center">Profesora</h4>
                 </div>
               </div>
diff --git a/Sanidad_Dietetica.html b/Sanidad_Dietetica.html
index 50948b2..4cafb5c 100644
--- a/Sanidad_Dietetica.html
+++ b/Sanidad_Dietetica.html
@@ -11,6 +11,7 @@
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="shortcut icon" href="Resources/img/logo/ilerna_Staff_Amarillo.png" type="image/x-icon">
+ <link rel="stylesheet" href="css/dietetica.css">
 
  <script defer src="js/bootstrap.bundle.js"></script>
 </head>
@@ -147,51 +148,79 @@ <h1 class="mb-3">Dietética</h1>
               </div>
           </div>
       </div>
+  </div>
+</div>
 
-<div class="container p-5 mt-5">
-  <div class="row justify-content-center align-items-center p-5">
-    
+<div class="container p-3 mt-5 mb-5 cta">
+  <div class="justify-content-center align-items-center">
     <div class="col-12 col-md-12 col-lg-12 g-5">
-      <div class="row rounded-5 justify-content-center align-items-center card-shadow p-4 bg-card border border-1 border-color ">
-        <div class="col-12 col-md-12 col-lg-6 text-center p-3">
-          <img src="Resources/img/img_Personal-4-3/anamr_DxO.jpg" class="img-fluid rounded-3">
-          <div class="container">
-            <div class="row justify-content-center align-items-center g-2 mt-2">
-              <!-- PONER NOMBRE DEL PROFE PARA EVITAR CONFLICTOS EN BG-BADGE-->
-              <h1 class="col-12 text-center"> Ana Martínez Rivero <span class="badge rounded-pill badge-size bg-badge-blue align-middle">☆</span></h1>
-              <h4 class="col-12 text-center">Profesora</h4>
-            </div>
+      <div class="d-flex justify-content-center " id="profesor">
+        <img src="Resources/img/personal/anamr.jpeg" class="img-fluid rounded-3">
+        </div>
+        <div class="container">
+          <div class="justify-content-center align-items-center g-2 mt-2">
+            <!--! PONER NOMBRE DEL PROFE PARA EVITAR CONFLICTOS EN BG-BADGE-->
+            <h1 class="col-12 text-center"> Ana Martínez Rivero </h1>
+            <h4 class="col-12 text-center">Profesora</h4>
+          </div>
+        </div>
+      </div>
 
+      <div class="justify-content-center align-items-center align-middle g-2">
+          <div class="container bg-card rounded-top mt-1" id="trigger">
+            <h4 class="pt-2">Formación</h4>
+            <p class="text-break pb-1 mb-1"> Graduada en Nutrición Humana y Dietética
+            </p>
           </div>
+          <div class="container bg-card" id="trigger">
+            <h4 class="pt-2">Hobbies</h4>
+            <p class="text-break pb-1 mb-1"> Viajar, la playa, la pintura, cocinar, un buen concierto y unas tapitas al sol. </p>
+          </div>
+          <div class="container bg-card" id="trigger">
+            <h4 class="pt-2">Frase que te represente</h4>
+            <p class="text-break pb-1 mb-1">“Sí puedes virar el rumbo y tirar lo que sobra, puedes volver a coleccionar segundos de placer y estrofas” - El Kanka </p>
+          </div>
+          <div class="container bg-card rounded-bottom " id="trigger">
+            <h4 class="pt-2">Algo sobre ti</h4>
+            <p class="text-break pb-1 mb-1"> Apasionada de la nutrición, y del poder que tienen los alimentos para mejorar nuestra salud, nuestro estado de ánimo, y en general nuestra vida. Me encanta enseñar y transmitir a mis alumnos esa pasión. Se me alegra el día cuando escucho un “qué interesante profe!” </p>
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
 
-        </div>
-        <div class="col-12 col-md-12 col-lg-6 ">
-          <div class="row justify-content-center align-items-center align-middle g-2">
-            <div class="col-12 text-center container bg-dark border border-color border-1 rounded-3 px-1 my-4  ">
-              <div class="container bg-card rounded-top mt-1">
-                <h4 class="pt-2">Formación</h4>
-                <p class="text-break pb-1 mb-1"> Graduada en Nutrición Humana y Dietética
-                </p>
-              </div>
-              <div class="container bg-card">
-                <h4 class="pt-2">Hobbies</h4>
-                <p class="text-break pb-1 mb-1"> Viajar, la playa, la pintura, cocinar, un buen concierto y unas tapitas al sol. 
+<div class="container p-3 mt-5 mb-5 cta">
+  <div class="justify-content-center align-items-center">
+    <div class="col-12 col-md-12 col-lg-12 g-5">
+      <div class="d-flex justify-content-center" id="profesor">
+      <img src="Resources/img/img_Personal-4-3/AlvaroRodriguez_DxO.jpg" class="img-fluid rounded-3">
+      </div>
+        <div class="container">
+          <div class="justify-content-center align-items-center g-2 mt-2">
+            <!--! PONER NOMBRE DEL PROFE PARA EVITAR CONFLICTOS EN BG-BADGE-->
+            <h1 class="col-12 text-center"> Álvaro Rodrígez García </h1>
+            <h4 class="col-12 text-center">Profesor</h4>
+          </div>
+      </div>
 
-                  </p>
-              </div>
-              <div class="container bg-card">
-                <h4 class="pt-2">Frase que te represente</h4>
-                <p class="text-break pb-1 mb-1">“Sí puedes virar el rumbo y tirar lo que sobra, puedes volver a coleccionar segundos de placer y estrofas” - El Kanka
-                  </p>
-              </div>
-              <div class="container bg-card rounded-bottom ">
-                <h4 class="pt-2">Algo sobre ti</h4>
-                <p class="text-break pb-1 mb-1"> Apasionada de la nutrición, y del poder que tienen los alimentos para mejorar nuestra salud, nuestro estado de ánimo, y en general nuestra vida. Me encanta enseñar y transmitir a mis alumnos esa pasión. Se me alegra el día cuando escucho un “qué interesante profe!” 
-                </p>
-              </div>
-            </div>
+      <div class="justify-content-center align-items-center align-middle g-2">
+          <div class="container bg-card rounded-top mt-1" id="trigger2">
+            <h4 class="pt-2">Formación</h4>
+            <p class="text-break pb-1 mb-1"> Graduada en Nutrición Humana y Dietética
+            </p>
+          </div>
+          <div class="container bg-card" id="trigger2">
+            <h4 class="pt-2">Hobbies</h4>
+            <p class="text-break pb-1 mb-1"> Entrenar </p>
+          </div>
+          <div class="container bg-card" id="trigger2">
+            <h4 class="pt-2">Frase que te represente</h4>
+            <p class="text-break pb-1 mb-1">Fluye</p>
+          </div>
+          <div class="container bg-card rounded-bottom" id="trigger2">
+            <h4 class="pt-2">Algo sobre ti</h4>
+            <p class="text-break pb-1 mb-1">Daltónico</p>
           </div>
-        </div>
       </div>
     </div>
   </div>
@@ -203,6 +232,8 @@ <h4 class="pt-2">Algo sobre ti</h4>
     <div class="container">
       <div class="row my-4">
 
+        
+
         <!-- Línea horizontal -->
         <div class="col-12 mb-2">
           <hr class="bg-white">
diff --git a/adminCentro_direccion.html b/adminCentro_direccion.html
index 627e883..6100e97 100644
--- a/adminCentro_direccion.html
+++ b/adminCentro_direccion.html
@@ -7,7 +7,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="css/bootstrap.css">
     <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="css/stylepersonal.css">
     <link rel="shortcut icon" href="Resources/img/logo/ilerna_Staff_Amarillo.png" type="image/x-icon">
+    
   
     <script defer src="js/bootstrap.bundle.js"></script>
     <title>Centro de Direccion</title>
@@ -147,230 +149,94 @@ <h1 class="mb-3">Dirección</h1>
             </div>
         </div>
 
-      
-
-        <!--CARD-->
-        <div class="container p-5 mt-2">
-            <div class="row justify-content-center align-items-center p-sm-0 p-md-0 p-lg-5 ">
-                <div class="col-12 col-md-12 col-lg-12 g-5">
-                    <div
-                        class="row rounded-5 justify-content-center align-items-center card-shadow p-4 bg-card border border-1 border-color ">
-                        <div class="col-12 col-md-12 col-lg-6 text-center p-3">
-                            <img src="Resources\img\img_Personal-4-3/virginia_ilerna_DxO.jpg"
-                                class="img-fluid rounded-3">
-                            <div class="container">
-                                <div class="row justify-content-center align-items-center g-2 mt-2">
-                                  
-                                    <h1 class="col-12 text-center">Virginia Simon Ballesteros <br><span
-                                            class="badge rounded-pill badge-size bg-badge-Pink align-middle">☆</span>
-                                    </h1>
-                                    <h4 class="col-12 text-center">Directora</h4>
-                                </div>
-
-                            </div>
-
-                        </div>
-                        <div class="col-12 col-md-12 col-lg-6 " id="remove_mobile">
-                            <div class="row justify-content-center align-items-center align-middle g-2">
-                                <div
-                                    class="col-12 text-center container bg-dark border border-color border-1 rounded-3 px-1 my-4  ">
-                                    <div class="container bg-card rounded-top mt-1">
-                                        <h4 class="pt-2">Formación</h4>
-                                        <p class="text-break pb-1 mb-1">Licenciada en comunicación</p>
-                                    </div>
-                                    <div class="container bg-card">
-                                        <h4 class="pt-2">Hobbies</h4>
-                                        <p class="text-break pb-1 mb-1"> Leer, bailar y ¡estudiar!</p>
-                                    </div>
-                                    <div class="container bg-card">
-                                        <h4 class="pt-2">Frase que te represente</h4>
-                                        <p class="text-break pb-1 mb-1">Lo consiguieron porque no sabían que era
-                                            imposible</p>
-                                    </div>
-                                    <div class="container bg-card rounded-bottom ">
-                                        <h4 class="pt-2">Algo sobre ti</h4>
-                                        <p class="text-break pb-1 mb-1">Perfeccionista, curiosa, persistente, siempre
-                                            con ganas de aprender y mejorar.</p>
-                                    </div>
-
-                                </div>
-                            </div>
-                        </div>
+        <div class="centrado">
+            <div class="card">
+                <div class="head">
+                    <div class="circle circle-virginia"></div>
+                    <div class="img">
+                        <img src="Resources/img/personal/Viriginia.jpeg" alt="">
                     </div>
-
-
                 </div>
-
+            
+                <div class="description">
+                    <h3>Virginia Simón Ballesteros </h3>
+                    <h4>Directora</h4>
+                    <p>Formación: Licenciada en comunicación</p>
+                    <p>Hobbies: Leer, bailar y ¡estudiar!</p>
+                    <p>Frase que te represente: Lo consiguieron porque no sabían que era imposible</p>
+                    <p>Algo sobre ti: Perfeccionista, curiosa, persistente, siempre con ganas de aprender y mejorar</p>
+                </div>
             </div>
-            <div  class="row justify-content-center align-items-center p-sm-0 p-md-0 p-lg-5 ">
-
-                <div class="col-12 col-md-12 col-lg-12 g-5">
-                    <div
-                        class="row rounded-5 justify-content-center align-items-center card-shadow p-4 bg-card border border-1 border-color ">
-                        <div class="col-12 col-md-12 col-lg-6 text-center p-3">
-                            <img src="Resources\img\img_Personal-4-3/ivan_DxO.jpg" class="img-fluid rounded-3">
-                            <div class="container">
-                                <div class="row justify-content-center align-items-center g-2 mt-2">
-                                    <!--! PONER NOMBRE DEL PROFE PARA EVITAR CONFLICTOS EN BG-BADGE-->
-                                    <h1 class="col-12 text-center">Iván Carrasco Guardiola <br><span
-                                            class="badge rounded-pill badge-size bg-badge-blue align-middle">☆</span>
-                                    </h1>
-                                    <h4 class="col-12 text-center">Jefe de estudios</h4>
-                                </div>
-
-                            </div>
-
-                        </div>
-                        <div class="col-12 col-md-12 col-lg-6 " id="remove_mobile">
-                            <div class="row justify-content-center align-items-center align-middle g-2">
-                                <div
-                                    class="col-12 text-center container bg-dark border border-color border-1 rounded-3 px-1 my-4  ">
-                                    <div class="container bg-card rounded-top mt-1">
-                                        <h4 class="pt-2">Formación</h4>
-                                        <p class="text-break pb-1 mb-1"> Odontología</p>
-                                    </div>
-                                    <div class="container bg-card">
-                                        <h4 class="pt-2">Hobbies</h4>
-                                        <p class="text-break pb-1 mb-1"> Deporte</p>
-                                    </div>
-                                    <div class="container bg-card">
-                                        <h4 class="pt-2">Frase que te represente</h4>
-                                        <p class="text-break pb-1 mb-1">"Ningún mar en calma hizo experto a un marinero"
-                                        </p>
-                                    </div>
-                                    <div class="container bg-card rounded-bottom ">
-                                        <h4 class="pt-2">Algo sobre ti</h4>
-                                        <p class="text-break pb-1 mb-1">Constante</p>
-                                    </div>
-
-                                </div>
-                            </div>
-                        </div>
+            
+            <div class="card">
+                <div class="head">
+                    <div class="circle circle-ivan"></div>
+                    <div class="img">
+                        <img src="Resources/img/personal/ivan.jpeg" alt=""> 
                     </div>
-
-
                 </div>
-
+            
+                <div class="description">
+                    <h3>Iván Carrasco Guardiola</h3>
+                    <h4>Jefe de estudios</h4>
+                    <p>Formación: Odontología</p>
+                    <p>Hobbies: Deporte</p>
+                    <p>Frase que te represente: "Ningún mar en calma hizo experto a un marinero"</p>
+                    <p>Algo sobre ti: Constante</p>
+                </div>
             </div>
-            <div  class="row justify-content-center align-items-center p-sm-0 p-md-0 p-lg-5 ">
-
-                <div class="col-12 col-md-12 col-lg-12 g-5">
-                    <div
-                        class="row rounded-5 justify-content-center align-items-center card-shadow p-4 bg-card border border-1 border-color ">
-                        <div class="col-12 col-md-12 col-lg-6 text-center p-3">
-                            <img src="Resources\img\img_Personal-4-3/franciscojavier_DxO.jpg"
-                                class="img-fluid rounded-3">
-                            <div class="container">
-                                <div class="row justify-content-center align-items-center g-2 mt-2">
-                                    <!--! PONER NOMBRE DEL PROFE PARA EVITAR CONFLICTOS EN BG-BADGE-->
-                                    <h1 class="col-12 text-center">Javier Guirado García<br> <span
-                                            class="badge rounded-pill badge-size bg-badge-Yellow align-middle">☆</span>
-                                    </h1>
-                                    <h4 class="col-12 text-center">Orientador y Profesor</h4>
-                                </div>
-
-                            </div>
-
-                        </div>
-                        <div class="col-12 col-md-12 col-lg-6 " id="remove_mobile">
-                            <div class="row justify-content-center align-items-center align-middle g-2">
-                                <div
-                                    class="col-12 text-center container bg-dark border border-color border-1 rounded-3 px-1 my-4  ">
-                                    <div class="container bg-card rounded-top mt-1">
-                                        <h4 class="pt-2">Formación</h4>
-                                        <p class="text-break pb-1 mb-1"> Grado de Administración y Finanzas</p>
-                                    </div>
-                                    <div class="container bg-card">
-                                        <h4 class="pt-2">Hobbies</h4>
-                                        <p class="text-break pb-1 mb-1">Carnaval y deporte</p>
-                                    </div>
-                                    <div class="container bg-card">
-                                        <h4 class="pt-2">Frase que te represente</h4>
-                                        <p class="text-break pb-1 mb-1">"La clave de la educación no es enseñar, es
-                                            despertar"</p>
-                                    </div>
-                                    <div class="container bg-card rounded-bottom ">
-                                        <h4 class="pt-2">Algo sobre ti</h4>
-                                        <p class="text-break pb-1 mb-1">Constante y justo</p>
-                                    </div>
-
-                                </div>
-                            </div>
-                        </div>
+            
+            <div class="card">
+                <div class="head">
+                    <div class="circle circle-javier"></div>
+                    <div class="img">
+                        <img src="Resources/img/personal/franciscojavier.jpg" alt=""> 
                     </div>
-
-
                 </div>
-
+            
+                <div class="description">
+                    <h3>Javier Guirado García</h3>
+                    <h4>Orientador y Profesor</h4>
+                    <p>Formación: Grado de Administración y Finanzas</p>
+                    <p>Hobbies: Carnaval y deporte</p>
+                    <p>Frase que te represente: "La clave de la educación no es enseñar, es despertar"</p>
+                    <p>Algo sobre ti: Constante y justo</p>
+                </div>
             </div>
-            <div  class="row justify-content-center align-items-center p-sm-0 p-md-0 p-lg-5 ">
-
-                <div class="col-12 col-md-12 col-lg-12 g-5">
-                    <div
-                        class="row rounded-5 justify-content-center align-items-center card-shadow p-4 bg-card border border-1 border-color ">
-                        <div class="col-12 col-md-12 col-lg-6 text-center p-3">
-                            <img src="Resources\img\img_Personal-4-3/noemi_DxO.jpg" class="img-fluid rounded-3">
-                            <div class="container">
-                                <div class="row justify-content-center align-items-center g-2 mt-2">
-                                    <!--! PONER NOMBRE DEL PROFE PARA EVITAR CONFLICTOS EN BG-BADGE-->
-                                    <h1 class="col-12 text-center">Noemí País Bouzo <br><span
-                                            class="badge rounded-pill badge-size bg-badge-Light-blue align-middle">☆</span>
-                                    </h1>
-                                    <h4 class="col-12 text-center">Orientadora</h4>
-                                </div>
-
-                            </div>
-
-                        </div>
-                        <div class="col-12 col-md-12 col-lg-6 " id="remove_mobile">
-                            <div class="row justify-content-center align-items-center align-middle g-2">
-                                <div
-                                    class="col-12 text-center container bg-dark border border-color border-1 rounded-3 px-1 my-4  ">
-                                    <div class="container bg-card rounded-top mt-1">
-                                        <h4 class="pt-2">Formación</h4>
-                                        <p class="text-break pb-1 mb-1"> Diplomatura en Trabajo Social</p>
-                                    </div>
-                                    <div class="container bg-card">
-                                        <h4 class="pt-2">Hobbies</h4>
-                                        <p class="text-break pb-1 mb-1"> Leer, viajar, senderismo y cocinar</p>
-                                    </div>
-                                    <div class="container bg-card">
-                                        <h4 class="pt-2">Frase que te represente</h4>
-                                        <p class="text-break pb-1 mb-1">"Lo esencial es invisible a los ojos"</p>
-                                    </div>
-                                    <div class="container bg-card rounded-bottom ">
-                                        <h4 class="pt-2">Algo sobre ti</h4>
-                                        <p class="text-break pb-1 mb-1">Soy una persona con empatía, con capacidad de
-                                            escucha , resolutiva, con habilidades comunicativas, y versátil. Me encanta
-                                            el dinamismo, y me aburre lo estático, proponer y organizar actividades
-                                            dando rienda suelta a la imaginación y creatividad forma parte de mi
-                                            esencia. Me gusta ayudar a los demás, y mi profesión es totalmente
-                                            vocacional.</p>
-                                    </div>
-
-                                </div>
-                            </div>
-                        </div>
+            
+            <div class="card">
+                <div class="head">
+                    <div class="circle circle-noemi"></div>
+                    <div class="img">
+                        <img src="Resources/img/personal/noemi.jpg" alt=""> 
                     </div>
-
-
                 </div>
-
+            
+                <div class="description">
+                    <h3>Noemí País Bouzo</h3>
+                    <h4>Orientadora</h4>
+                    <p>Formación: Diplomatura en Trabajo Social</p>
+                    <p>Hobbies: Leer, viajar, senderismo y cocinar</p>
+                    <p>Frase que te represente: "Lo esencial es invisible a los ojos"</p>
+                    <p>Algo sobre ti: Soy una persona con empatía, con capacidad de escucha , resolutiva, con habilidades comunicativas, y versátil. Me encanta el dinamismo, y me aburre lo estático, proponer y organizar actividades dando rienda suelta a la imaginación y creatividad forma parte de mi esencia. Me gusta ayudar a los demás, y mi profesión es totalmente vocacional.
+                    </p>
+                </div>
             </div>
-
         </div>
-
+        
+           
+            
 
     </main>
     <footer class="bg-dark text-light py-3 bg-blueilerna custom-navbar">
         <div class="container">
           <div class="row my-4">
     
-            <!-- Línea horizontal -->
+          
             <div class="col-12 mb-2">
               <hr class="bg-white">
             </div>
-            <!-- Bloque 2: Información de Contacto (dividido en 3 columnas iguales con texto alineado a la izquierda) -->
+           
             <div class="row my-3">
               <div class="col-12 col-md-4">
                 <div class="text-left">
diff --git a/adminCentro_personal.html b/adminCentro_personal.html
index 314ba02..1950fa8 100644
--- a/adminCentro_personal.html
+++ b/adminCentro_personal.html
@@ -7,6 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="css/bootstrap.css">
   <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="css/stylepersonal.css">
   <link rel="shortcut icon" href="Resources/img/logo/ilerna_Staff_Amarillo.png" type="image/x-icon">
 
   <script defer src="js/bootstrap.bundle.js"></script>
@@ -150,108 +151,101 @@ <h1 class="mb-3">Personal del centro</h1>
 
     <!--CARD-->
       <!-- container sin fluid , mt-2 -->
-      <div class="container p-5 mt-2">
-        <!-- sin p-5 psm-0 p-md-0 p-lg-5-->
-        <div class="col-12 col-md-12 col-lg-12 g-5" >
-          <div class="row rounded-5 justify-content-center align-items-center card-shadow p-4 bg-card border border-1 border-color ">
-            <div class="col-12 col-md-12 col-lg-6 text-center p-3">
-              <img src="Resources/img/img_Personal-4-3/jesus_DxO.jpg" class="img-fluid rounded-3">
-              <div class="container">
-                <div class="row justify-content-center align-items-center g-2 mt-2">
-                  <!-- PONER NOMBRE DEL PROFE PARA EVITAR CONFLICTOS EN BG-BADGE-->
-                  <h1 class="col-12 text-center">Jesús Sanchez Echevarría <span class="badge rounded-pill badge-size bg-badge-Black align-middle">☆</span></h1>
-                  <h4 class="col-12 text-center">Conserje</h4>
+      <div class="centrado">
+        <div class="card">
+            <div class="head">
+                <div class="circle circle-jesus"></div>
+                <div class="img">
+                    <img src="Resources/img/personal/jesus.jpeg" alt="">
                 </div>
-
-              </div>
-
             </div>
-             <!-- añadido id remove_mobile-->
-            <div class="col-12 col-md-12 col-lg-6 " id ="remove_mobile">
-              <div class="row justify-content-center align-items-center align-middle g-2">
-                <div class="col-12 text-center container bg-dark border border-color border-1 rounded-3 px-1 my-4  ">
-                  <div class="container bg-card rounded-top mt-1">
-                    <h4 class="pt-2">Formación</h4>
-                    <p class="text-break pb-1 mb-1"> Máster de Post-grado en Arte, Idea y Producción </p>
-                  </div>
-                  <div class="container bg-card">
-                    <h4 class="pt-2">Hobbies</h4>
-                    <p class="text-break pb-1 mb-1"> Ser feliz.</p>
-                  </div>
-                  <div class="container bg-card">
-                    <h4 class="pt-2">Frase que te represente</h4>
-                    <p class="text-break pb-1 mb-1">"Soy el amo de mi destino, soy el capitán de mi alma"</p>
-                  </div>
-                  <div class="container bg-card rounded-bottom ">
-                    <h4 class="pt-2">Algo sobre ti</h4>
-                    <p class="text-break pb-1 mb-1">Soy el copón divino.</p>
-                  </div>
-
+        
+            <div class="description">
+                <h3>Jesús Sanchez Echevarría</h3>
+                <h4>Conserje</h4>
+                <p>Formación: Máster de Post-grado en Arte, Idea y Producción</p>
+                <p>Hobbies: Ser feliz</p>
+                <p>Frase que te represente: "Soy el amo de mi destino, soy el capitán de mi alma"</p>
+                <p>Algo sobre ti: Soy el copón divino</p>
+            </div>
+        </div>
+        
+        <div class="card">
+            <div class="head">
+                <div class="circle circle-erika"></div>
+                <div class="img">
+                    <img src="Resources/img/personal/erika.JPG" alt=""> 
                 </div>
-              </div>
             </div>
-          </div>
-
+        
+            <div class="description">
+                <h3>Erika Gutiérrez García</h3>
+                <h4>Administrativa</h4>
+                <p>Formación: Grado en Pedagogía</p>
+                <p>Hobbies:Hacer cualquier deporte, leer cualquier libro y viajar a cualquier lugar</p>
+                <p>Frase que te represente: "Nada es casualidad, todo te esta enseñando algo"
+                </p>
+                <p>Siempre he trabajado como Auxiliar Administrativo en empresas de diferentes sectores, pero sin duda, comenzar mi Grado en Pedagogía e introducirme laboralmente en el ámbito educativo a sido una de las mejores decisiones de mi vida. Este año he me he graduado y quiero especializarme el la orientación educativa. La orientación engloba muchas tareas, pero de todas ellas me quedo con la de la atención al alumno. Por ello puedo decir que me gusta lo que hago 
+                </p>
+            </div>
         </div>
-
-      </div>
-      
-    </div>
- 
-
-    <!--CARD-->
-     <!--! container sin fluid , mt-2 -->
-     <div class="container p-5 mt-2">
-       <!--! sin p-5 psm-0 p-md-0 p-lg-5-->
-       <div  class="row justify-content-center align-items-center p-sm-0 p-md-0 p-lg-5 "><!-- disminuir p-->
         
-        <div class="col-12 col-md-12 col-lg-12 g-5">
-          <div class="row rounded-5 justify-content-center align-items-center card-shadow p-4 bg-card border border-1 border-color ">
-            <div class="col-12 col-md-12 col-lg-6 text-center p-3">
-              <img src="Resources/img/img_Personal-4-3/erika_DxO.jpg" class="img-fluid rounded-3">
-              <div class="container">
-                <div class="row justify-content-center align-items-center g-2 mt-2">
-                  <!--! PONER NOMBRE DEL PROFE PARA EVITAR CONFLICTOS EN BG-BADGE-->
-                  <h1 class="col-12 text-center">Erika Gutiérrez García <span class="badge rounded-pill badge-size bg-badge-Purple align-middle">☆</span></h1>
-                  <h4 class="col-12 text-center">Administrativa</h4>
+        <div class="card">
+            <div class="head">
+                <div class="circle circle-pilar"></div>
+                <div class="img">
+                    <img src="Resources/img/personal/pilar.jpeg" alt=""> 
                 </div>
-
-              </div>
-
             </div>
-             <!--! añadido id remove_mobile-->
-            <div class="col-12 col-md-12 col-lg-6 " id ="remove_mobile">
-              <div class="row justify-content-center align-items-center align-middle g-2">
-                <div class="col-12 text-center container bg-dark border border-color border-1 rounded-3 px-1 my-4  ">
-                  <div class="container bg-card rounded-top mt-1">
-                    <h4 class="pt-2">Formación</h4>
-                    <p class="text-break pb-1 mb-1"> Grado en Pedagogía</p>
-                  </div>
-                  <div class="container bg-card">
-                    <h4 class="pt-2">Hobbies</h4>
-                    <p class="text-break pb-1 mb-1"> Hacer cualquier deporte, leer cualquier libro y viajar a cualquier lugar.</p>
-                  </div>
-                  <div class="container bg-card">
-                    <h4 class="pt-2">Frase que te represente</h4>
-                    <p class="text-break pb-1 mb-1">"Nada es casualidad, todo te esta enseñando algo"</p>
-                  </div>
-                  <div class="container bg-card rounded-bottom ">
-                    <h4 class="pt-2">Algo sobre ti</h4>
-                    <p class="text-break pb-1 mb-1">Siempre he trabajado como Auxiliar Administrativo en empresas de diferentes sectores, pero sin duda, comenzar mi Grado en Pedagogía e introducirme laboralmente en el ámbito educativo a sido una de las mejores decisiones de mi vida. 
-                      Este año he me he graduado y quiero especializarme el la orientación educativa. La orientación engloba muchas tareas, pero de todas ellas me quedo con la de la atención al alumno. Por ello puedo decir que me gusta lo que hago </p>
-                  </div>
-
+        
+            <div class="description">
+                <h3>Pilar García</h3>
+                <h4>Limpiadora</h4>
+                <p>Formación: Graduada</p>
+                <p>Hobbies: Pintura</p>
+                <p>Algo sobre ti: Soy muy alegre y optimista</p>
+            </div>
+        </div>
+        
+        <div class="card">
+            <div class="head">
+                <div class="circle circle-juanca"></div>
+                <div class="img">
+                    <img src="Resources/img/personal/juanca.jpeg" alt=""> 
                 </div>
-              </div>
             </div>
-          </div>
-
+        
+            <div class="description">
+                <h3>Juan Carlos Villaran Cruz</h3>
+                <p>Formación: Técnico informático y sistemas</p>
+                <p>Hobbies: Padel y cine</p>
+                <p>Frase que te represente: ¿Estás usando tu página personal?</p>
+      
+            </div>
         </div>
-
-      </div>
+        <div class="card">
+          <div class="head">
+              <div class="circle circle-fernando"></div>
+              <div class="img">
+                  <img src="Resources/img/personal/fernando.jpeg" alt=""> 
+              </div>
+          </div>
       
+          <div class="description">
+              <h3>Fernando Suárez La Rubia</h3>
+              <p>Formación: Administración y finanzas</p>
+              <p>Hobbies: Motociclismo</p>
+              <p>Algo sobre ti: Trabajo en equipo.</p>
+          </div>
+      </div>
+  </div>
     </div>
 
+    
+    
+    <!--CARD-->
+     <!--! container sin fluid , mt-2 -->
+    
 
   </main> 
   <footer class="bg-dark text-light py-3 bg-blueilerna custom-navbar">
diff --git a/css/anatomia.css b/css/anatomia.css
new file mode 100644
index 0000000..749e5b2
--- /dev/null
+++ b/css/anatomia.css
@@ -0,0 +1,164 @@
+/*CARDS*/
+.cards-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    align-items: center;
+    margin: 20px;
+    margin-bottom: 200px;
+    margin-top: 50px;
+    color: #fff;
+ }
+ 
+ 
+ .card {
+    position: relative;
+    width: 100%;
+    max-width: 500px;
+    height: 550px;
+    cursor: pointer;
+    margin: 10px;
+ }
+ 
+ 
+ .card .face {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    backface-visibility: hidden;
+    border-radius: 10px;
+    overflow: hidden;
+    transition: .5s;
+ }
+ 
+ 
+ .card .front {
+    transform: perspective(600px) rotateY(0deg);
+    box-shadow: 0 5px 10px #000;
+ }
+ 
+ 
+ .card .front img {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+ }
+ 
+ 
+ .card .front h3 {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 45px;
+    line-height: 45px;
+    color: #fff;
+    background: rgb(0,0,0,.4);
+    text-align: center;
+ }
+ 
+ 
+ .card .back {
+    transform: perspective(600px) rotateY(180deg);
+    background: #023047;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    padding: 20px;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ }
+ 
+ 
+ .card .back h4 {
+    margin: 10px 0;
+    padding-bottom: 5px;
+    font-size: 1.2em;
+    font-weight: bold;
+    border-bottom: 2px solid #008f9f
+ }
+ 
+ 
+ .card .back p {
+    font-size: 1em;
+    margin: 5px 0 15px;
+    line-height: 1.6;
+ }
+ 
+ 
+ /*HOVER*/
+ .card:hover .front {
+    transform: perspective(600px) rotateY(180deg);
+ }
+ 
+ 
+ .card:hover .back {
+    transform: perspective(600px) rotateY(360deg);
+ }
+ 
+ 
+ /*RESPONSIVIDAD*/
+ @media only screen and (min-width: 768px) {
+    .card {
+        width: calc(50% - 20px);
+    }
+ }
+ 
+ 
+ @media only screen and (min-width: 992px) {
+    .card {
+        width: calc(43.333% - 20px);
+    }
+ }
+ 
+ 
+ @media only screen and (min-width: 1200px) {
+    .card {
+        width: calc(30% - 10px);
+    }
+ }
+ 
+ 
+ .card:hover .front {
+    transform: perspective(600px) rotateY(180deg);
+ }
+ 
+ 
+ .card:hover .back {
+    transform: perspective(600px) rotateY(360deg);
+ }
+ 
+ 
+ /*TITULO*/
+ .title-container {
+    text-align: center;
+    margin: 40px 0;
+    margin-top: 150px;
+ }
+ 
+ 
+ .title {
+    font-size: 2.5rem;
+    color: #333;
+    text-transform: uppercase;
+    letter-spacing: 3px;
+    display: inline-block;
+    position: relative;
+ }
+ 
+ 
+ .title::after {
+    content: '';
+    position: absolute;
+    bottom: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    height: 4px;
+    width: 70%;
+    background: #008f9f;
+    border-radius: 2px;
+ }
+ 
\ No newline at end of file
diff --git a/css/dietetica.css b/css/dietetica.css
new file mode 100644
index 0000000..c8285d4
--- /dev/null
+++ b/css/dietetica.css
@@ -0,0 +1,45 @@
+#profesor img {
+	width: 80%;
+	height: 100%;
+}
+
+h2 {
+	margin: 0;
+	font-size: 1.4rem;
+}
+
+@media (min-width: 50em) {
+	h2 {
+		font-size: 1.8rem;
+	}
+}
+
+.cta {
+	--shadowColor: 187 60% 40%;
+	display: flex;
+	flex-wrap: wrap;
+	background: hsl(187 70% 85%);
+	max-width: 50rem;
+	width: 100%;
+	box-shadow: 0.65rem 0.65rem 0 hsl(var(--shadowColor) / 1);
+	border-radius: 0.8rem;
+	overflow: hidden;
+	border: 0.5rem solid;
+}
+
+.cta img {
+	aspect-ratio: 3 / 2;
+	object-fit: cover;
+	flex: 1 1 300px;
+	outline: 0.5rem solid;
+}
+
+#trigger:hover h4{
+	text-decoration: underline;
+	text-decoration-color: blue;
+}
+
+#trigger2:hover h4{
+	text-decoration: underline;
+	text-decoration-color: rgb(0, 0, 0);
+}
\ No newline at end of file
diff --git a/css/infantil.css b/css/infantil.css
new file mode 100644
index 0000000..8a78a06
--- /dev/null
+++ b/css/infantil.css
@@ -0,0 +1,50 @@
+body{
+    background-image: url("../Resources/img/bg\ photos/fondoinfantil.avif");
+  }
+
+  .bgbluecolor{
+    background-color: #C7ECFF;
+  }
+
+  .color-identificador-Green {
+    width: 100%; 
+    height: 35px; 
+    background-color: #05b80b;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-top-left-radius: 2em;
+    border-top-right-radius: 2em;
+  }
+  .color-identificador-Yellow {
+    width: 100%; 
+    height: 35px; 
+    background-color:#ece112;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-top-left-radius: 2em;
+    border-top-right-radius: 2em;
+  }
+  
+  .color-identificador-Purple {
+    width: 100%; 
+    height: 35px; 
+    background-color:#800080;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-top-left-radius: 2em;
+    border-top-right-radius: 2em;
+  }
+  
+  .color-identificador-Light-blue {
+    width: 100%; 
+    height: 35px; 
+    background-color: #80cdde;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-top-left-radius: 2em;
+    border-top-right-radius: 2em;
+  }
diff --git a/css/integration.css b/css/integration.css
new file mode 100644
index 0000000..d55f7b9
--- /dev/null
+++ b/css/integration.css
@@ -0,0 +1,138 @@
+: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;
+}
+.integration-bg{
+    background-color: #fff;
+}
+
+.card-shadow-integration {
+    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.6);
+}
+
+#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/css/mk.css b/css/mk.css
new file mode 100644
index 0000000..381cee3
--- /dev/null
+++ b/css/mk.css
@@ -0,0 +1,102 @@
+.container {
+    max-width: 800px; /* Aumentamos el ancho aquí */
+    margin: 20px auto;
+    padding: 0 15px; /* Asegura un poco de espacio en los lados en pantallas pequeñas */
+  }
+  
+  .card {
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease;
+  }
+  
+  .card:hover {
+    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
+    transform: translateY(-5px);
+  }
+  
+  .card-header img {
+    width: 100%;
+    height: auto;
+    display: block;
+  }
+  
+  .card-body {
+    padding: 20px;
+  }
+  
+  .card-title {
+    font-size: 24px;
+    margin-bottom: 10px;
+  }
+  
+  .card-subtitle {
+    font-size: 18px;
+    color: #666;
+    margin-bottom: 20px;
+  }
+  
+  .card-info p {
+    margin-bottom: 10px;
+  }
+  
+  .badge {
+    background-color: turquoise;
+    color: white;
+    padding: 5px 10px;
+    border-radius: 50%;
+  }
+  
+  button:hover {
+    background-color: #0056b3;
+  }
+  
+  .card-title.active {
+    /* Personaliza este estilo como prefieras */
+  }
+  
+  #toggleDetails {
+    display: block;
+    margin: 20px auto;
+    padding: 10px 20px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    cursor: pointer;
+  }
+  
+  .card-info p {
+    opacity: 0;
+    transform: translateY(20px);
+    transition: opacity 0.5s ease, transform 0.5s ease;
+  }
+  
+  .card-info p.active {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  
+  .card-info h5, .card-info p {
+    opacity: 0;
+    transform: translateY(20px);
+    transition: opacity 0.5s ease, transform 0.5s ease;
+  }
+  
+  .card-info h5.active, .card-info p.active {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  
+
+  .hidden-text {
+    display: none; /* Hide the paragraphs by default */
+  }
+  
+  .show {
+    display: block !important; /* Override display property to show the paragraph */
+  }
+  
+
+  
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 38aa3d0..e899b64 100644
--- a/css/style.css
+++ b/css/style.css
@@ -309,10 +309,6 @@ p {
   text-align: center;
 }
 
-.border-color {
-  border-color: var(--main-Black);
-}
-
 /*evita texto fuera de sus cuadros*/
 .white-space {
   white-space: nowrap;
@@ -366,13 +362,6 @@ button{
   /* Cambia el valor según tus necesidades */
 }
 
-/*oculta card en displ moviles*/
-@media (max-width: 750px) {
-  #remove_mobile {
-    display: none;
-  }
-}
-
 /** Carousel*/
 .bg-carousel {
   background-color: var(--main-Blue);
diff --git a/css/stylepersonal.css b/css/stylepersonal.css
new file mode 100644
index 0000000..28a7854
--- /dev/null
+++ b/css/stylepersonal.css
@@ -0,0 +1,182 @@
+
+.centrado {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;  /* Ajusta el espacio entre tarjetas */
+}
+
+    
+
+
+
+.card {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: 600px;
+    height: 500px;
+    background: #fff;
+    border-radius: 5px;
+    overflow: hidden;
+    transition: .5s;
+    margin: 15px 20px;
+}
+
+.card:hover {
+    box-shadow: 0 5px 15px rgba(3, 89, 92, .5);
+    transform: translateY(-15px);
+}
+
+.card .head {
+    height: 125px;
+    width: 100%;
+    position: relative;
+}
+
+.card .head .circle {
+    position: absolute;
+    width: 300px;
+    height: 300px;
+    border-radius: 50%;
+
+    bottom: 0;
+}
+
+.circle.circle-virginia {
+    background: #ff35d7;
+}
+.circle.circle.circle-ivan{
+    background-color: #1b5ed3;
+}
+
+.circle.circle.circle-javier{
+    background-color: #ece112;
+}
+.circle.circle.circle-noemi{
+    background-color: #80cdde;
+}
+
+.circle.circle.circle-jesus{
+    background-color: #050505;
+}
+.circle.circle.circle-erika{
+    background-color: #800080;
+}
+
+.circle.circle.circle-pilar{
+    background-color: #1b5ed3;
+}
+
+.circle.circle.circle-juanca{
+    background-color: #1b5ed3;
+}
+
+.circle.circle.circle-fernando{
+    background-color: #ec1212;
+}
+.card .head .img {
+    width: 150px;
+    height: 150px;
+    position: absolute;
+    background: #fff;
+    padding: 5px;
+    border-radius: 50%;
+    bottom: -30%;
+    left: 50%;
+    transform: translate(-50%);
+}
+
+.card .head .img img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+
+.card .description {
+    height: 200px;
+    padding: 40px 20px 20px 20px;
+   
+    text-align: center;
+}
+
+.card .description h3 {
+    color: #05383a;
+}
+
+.card .description h4 {
+    color: #1c5a5c;
+}
+
+.card .description p {
+    margin-top: 20px;
+    font-size: 15px;
+}
+
+
+.card .contact {
+    width: 100%;
+    height: 75px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.card .contact a {
+    text-decoration: none;
+    color: #fff;
+    background: #157579;
+    padding: 5px 20px;
+    border-radius: 5px;
+    transition: .3s;
+}
+
+.card .contact a:hover {
+    
+    background: #0b6164;
+   
+}
+
+.card .description p {
+    font-size: 11px; 
+    margin: 15px 0; 
+    line-height: 1.5;
+}
+
+
+@media screen and (max-width: 768px) {
+    .card {
+        width: 90%; 
+        margin: 15px auto; 
+    }
+
+    .card .head .circle {
+        width: 200px; 
+        height: 200px; 
+    }
+
+    .card .head .img {
+        width: 120px; 
+        height: 120px;
+        bottom: -25%; 
+    }
+    
+    .card .description {
+        padding: 20px;
+    }
+    .card .description p {
+        font-size: 11px; 
+        margin: 15px 0; 
+        line-height: 1.5;
+}
+
+}
+@media screen and (max-width: 480px) {
+    .card {
+        width: 100%; 
+        margin: 10px 0; 
+    }
+}
\ No newline at end of file
diff --git a/educacioninfantil.html b/educacioninfantil.html
index ee641e8..a851611 100644
--- a/educacioninfantil.html
+++ b/educacioninfantil.html
@@ -7,6 +7,7 @@
   <link rel="stylesheet" href="css/bootstrap.css">
   <link rel="stylesheet" href="css/style.css">
   <link rel="shortcut icon" href="Resources/img/logo/ilerna_Staff_Amarillo.png" type="image/x-icon">
+  <link rel="stylesheet" href="/css/infantil.css">
   <script defer src="js/bootstrap.bundle.js"></script>
   <title>Educacion Infantil</title>
 </head>
@@ -140,7 +141,7 @@
   </nav>
   <!--  -->
   <section>
-    <div id="hero" class="p-5 text-center">
+    <div class="p-5 text-center bgbluecolor">
       <div class="container">
         <div class="row">
           <div class="col-md-12">
@@ -165,201 +166,196 @@ <h1 class="mb-3">Educación Infantil</h1>
       </div>
     </div>
   </section>
-  <!-- CARDS  -->
+  <!-- CARDS -->
   <div class="container p-5 mt-2">
-    <!-- sin p-5 psm-0 p-md-0 p-lg-5-->
-    <div class="col-12 col-md-12 col-lg-12 g-5">
+
+    <!-- First Card -->
+    <div class="col-12 col-md-12 col-lg-12 g-5 ">
       <div
-        class="row rounded-5 justify-content-center align-items-center card-shadow p-4 bg-card border border-1 border-color ">
+        class="row rounded-5 justify-content-center align-items-center card-shadow-Dark p-4 bg-card border border-1 border-color position-relative">
+        <!-- Línea horizontal como color identificador -->
+        <div class="color-identificador-Green"></div>
+
         <div class="col-12 col-md-12 col-lg-6 text-center p-3">
-          <img src="Resources/img/personal/cristina.jpg" class="img-fluid rounded-3">
+          <img src="Resources/img/img_Personal-4-3/cristina_DxO.jpg" class="img-fluid rounded-3">
           <div class="container">
             <div class="row justify-content-center align-items-center g-2 mt-2">
-              <!-- PONER NOMBRE DEL PROFE PARA EVITAR CONFLICTOS EN BG-BADGE-->
-              <h1 class="col-12 text-center">Cristina Nieto Carmona <span
-                  class="badge rounded-pill badge-size bg-badge-Green align-middle">☆</span></h1>
+              <h1 class="col-12 text-center">Cristina Nieto Carmona <br><span
+                  class="badge rounded-pill badge-size bg-badge-Green align-middle">👩‍🏫</span></h1>
               <h4 class="col-12 text-center">Profesora</h4>
             </div>
-
           </div>
-
         </div>
-        <!-- añadido id remove_mobile-->
-        <div class="col-12 col-md-12 col-lg-6 " id="remove_mobile">
+        <div class="col-12 col-md-12 col-lg-6" id="remove_mobile">
           <div class="row justify-content-center align-items-center align-middle g-2">
-            <div class="col-12 text-center container bg-dark border border-color border-1 rounded-3 px-1 my-4  ">
+            <div class="col-12 text-center container bg-dark border border-color border-1 rounded-3 px-1 my-4">
+              <!-- Resto del contenido -->
               <div class="container bg-card rounded-top mt-1">
-                <h4 class="pt-2">Formación</h4>
+                <h4 class="pt-2">Formación 🎓</h4>
                 <p class="text-break pb-1 mb-1"> Pedagoga y doctora en Educación </p>
               </div>
               <div class="container bg-card">
-                <h4 class="pt-2">Hobbies</h4>
+                <h4 class="pt-2">Hobbies 📚</h4>
                 <p class="text-break pb-1 mb-1"> La gente divertida, viajar y comer </p>
               </div>
               <div class="container bg-card">
-                <h4 class="pt-2">Frase que te represente</h4>
+                <h4 class="pt-2">Frase que te represente 🌠</h4>
                 <p class="text-break pb-1 mb-1">Dame risa y comida y me has conquistado</p>
               </div>
               <div class="container bg-card rounded-bottom ">
-                <h4 class="pt-2">Algo sobre ti</h4>
-                <p class="text-break pb-1 mb-1">Defensora de la Pedagogía de la Emoción.
-                  El aprendizaje divertido siempre es significativo.</p>
+                <h4 class="pt-2">Algo sobre ti 🗺️</h4>
+                <p class="text-break pb-1 mb-1">Defensora de la Pedagogía de la Emoción. El aprendizaje divertido
+                  siempre es
+                  significativo.</p>
               </div>
-
+              <!-- Fin del contenido -->
             </div>
           </div>
         </div>
       </div>
-
     </div>
-    <!--  -->
-    <div class="container p-5 mt-2">
-      <!-- sin p-5 psm-0 p-md-0 p-lg-5-->
-      <div class="col-12 col-md-12 col-lg-12 g-5">
-        <div
-          class="row rounded-5 justify-content-center align-items-center card-shadow p-4 bg-card border border-1 border-color ">
-          <div class="col-12 col-md-12 col-lg-6 text-center p-3">
-            <img src="Resources/img/personal/mariat.jpg" class="img-fluid rounded-3">
-            <div class="container">
-              <div class="row justify-content-center align-items-center g-2 mt-2">
-                <!-- PONER NOMBRE DEL PROFE PARA EVITAR CONFLICTOS EN BG-BADGE-->
-                <h1 class="col-12 text-center">Maria Tenorio Rodriguez<span
-                    class="badge rounded-pill badge-size bg-badge-Purple align-middle">☆</span></h1>
-                <h4 class="col-12 text-center">Profesora</h4>
-              </div>
 
-            </div>
+  </div>
 
-          </div>
-          <!-- añadido id remove_mobile-->
-          <div class="col-12 col-md-12 col-lg-6 " id="remove_mobile">
-            <div class="row justify-content-center align-items-center align-middle g-2">
-              <div class="col-12 text-center container bg-dark border border-color border-1 rounded-3 px-1 my-4  ">
-                <div class="container bg-card rounded-top mt-1">
-                  <h4 class="pt-2">Formación</h4>
-                  <p class="text-break pb-1 mb-1"> Grado en Pedagogia</p>
-                </div>
-                <div class="container bg-card">
-                  <h4 class="pt-2">Hobbies</h4>
-                  <p class="text-break pb-1 mb-1"> Me encanta la lectura, el baile, conocer lugares y disfrutar la calle
-                    con amig@s. </p>
-                </div>
-                <div class="container bg-card">
-                  <h4 class="pt-2">Frase que te represente</h4>
-                  <p class="text-break pb-1 mb-1">Dame risa y comida y me has conquistado</p>
-                </div>
-                <div class="container bg-card rounded-bottom ">
-                  <h4 class="pt-2">Algo sobre ti</h4>
-                  <p class="text-break pb-1 mb-1">Defensora de la Pedagogía de la Emoción.
-                    El aprendizaje divertido siempre es significativo.</p>
-                </div>
+  <!-- Second Card -->
+  <div class="container p-5 mt-2">
+    <div class="col-12 col-md-12 col-lg-12 g-5">
+      <div
+        class="row rounded-5 justify-content-center align-items-center card-shadow-Dark p-4 bg-card border border-1 border-color position-relative">
+        <!-- Línea horizontal como color identificador -->
+        <div class="color-identificador-Purple"></div>
 
+        <div class="col-12 col-md-12 col-lg-6 text-center p-3">
+          <img src="Resources/img/img_Personal-4-3/mariat_DxO.jpg" class="img-fluid rounded-3">
+          <div class="container">
+            <div class="row justify-content-center align-items-center g-2 mt-2">
+              <h1 class="col-12 text-center">Maria Tenorio Rodriguez<br><span
+                  class="badge rounded-pill badge-size bg-badge-Purple align-middle">👩‍🏫</span></h1>
+              <h4 class="col-12 text-center">Profesora</h4>
+            </div>
+          </div>
+        </div>
+        <div class="col-12 col-md-12 col-lg-6" id="remove_mobile">
+          <div class="row justify-content-center align-items-center align-middle g-2">
+            <div class="col-12 text-center container bg-dark border border-color border-1 rounded-3 px-1 my-4">
+              <!-- Resto del contenido -->
+              <div class="container bg-card rounded-top mt-1">
+                <h4 class="pt-2">Formación 🎓</h4>
+                <p class="text-break pb-1 mb-1"> Grado en Pedagogia</p>
+              </div>
+              <div class="container bg-card">
+                <h4 class="pt-2">Hobbies 📚</h4>
+                <p class="text-break pb-1 mb-1"> Me encanta la lectura, el baile, conocer lugares y disfrutar la calle
+                  con amig@s. </p>
+              </div>
+              <div class="container bg-card">
+                <h4 class="pt-2">Frase que te represente 🌠</h4>
+                <p class="text-break pb-1 mb-1">Cómo me las maravillaría yo</p>
               </div>
+              <div class="container bg-card rounded-bottom ">
+                <h4 class="pt-2">Algo sobre ti 🗺️</h4>
+                <p class="text-break pb-1 mb-1">Soy una apasionada de mi trabajo. Trato de crear un clima relajado, de
+                  confianza y motivación que nos permita aprender junt@s.</p>
+              </div>
+              <!-- Fin del contenido -->
             </div>
-
-
           </div>
         </div>
-
       </div>
     </div>
-    <!--  -->
+  </div>
+
+  <!-- Third Card -->
+  <div class="container p-5 mt-2">
     <div class="col-12 col-md-12 col-lg-12 g-5">
       <div
-        class="row rounded-5 justify-content-center align-items-center card-shadow p-4 bg-card border border-1 border-color ">
+        class="row rounded-5 justify-content-center align-items-center card-shadow-Dark p-4 bg-card border border-1 border-color position-relative">
+        <!-- Línea horizontal como color identificador -->
+        <div class="color-identificador-Yellow"></div>
+
         <div class="col-12 col-md-12 col-lg-6 text-center p-3">
-          <img src="Resources/img/personal/lourdes.jpg" class="img-fluid rounded-3">
+          <img src="Resources/img/img_Personal-4-3/lourdes_DxO.jpg" class="img-fluid rounded-3">
           <div class="container">
             <div class="row justify-content-center align-items-center g-2 mt-2">
-              <!-- PONER NOMBRE DEL PROFE PARA EVITAR CONFLICTOS EN BG-BADGE-->
-              <h1 class="col-12 text-center">Lourdes Pallarés Gonzalez <span
-                  class="badge rounded-pill badge-size bg-badge-Yellow align-middle">☆</span></h1>
+              <h1 class="col-12 text-center">Lourdes Pallarés Gonzalez <br><span
+                  class="badge rounded-pill badge-size bg-badge-Yellow align-middle">👩‍🏫</span></h1>
               <h4 class="col-12 text-center">Profesora</h4>
             </div>
-
           </div>
-
         </div>
-        <!-- añadido id remove_mobile-->
-        <div class="col-12 col-md-12 col-lg-6 " id="remove_mobile">
+        <div class="col-12 col-md-12 col-lg-6" id="remove_mobile">
           <div class="row justify-content-center align-items-center align-middle g-2">
-            <div class="col-12 text-center container bg-dark border border-color border-1 rounded-3 px-1 my-4  ">
+            <div class="col-12 text-center container bg-dark border border-color border-1 rounded-3 px-1 my-4">
               <div class="container bg-card rounded-top mt-1">
-                <h4 class="pt-2">Formación</h4>
+                <h4 class="pt-2">Formación 🎓</h4>
                 <p class="text-break pb-1 mb-1"> Pedagoga y doctora en Educación </p>
               </div>
               <div class="container bg-card">
-                <h4 class="pt-2">Hobbies</h4>
+                <h4 class="pt-2">Hobbies 📚</h4>
                 <p class="text-break pb-1 mb-1"> Leer Valeria en sus zapatos, reír mucho, tarifa y dormir. </p>
               </div>
               <div class="container bg-card">
-                <h4 class="pt-2">Frase que te represente</h4>
+                <h4 class="pt-2">Frase que te represente 🌠</h4>
                 <p class="text-break pb-1 mb-1">¡Que ansiedad tengo!</p>
               </div>
               <div class="container bg-card rounded-bottom ">
-                <h4 class="pt-2">Algo sobre ti</h4>
+                <h4 class="pt-2">Algo sobre ti 🗺️</h4>
                 <p class="text-break pb-1 mb-1">Exigente, creativa y apasionada de lo social.</p>
               </div>
-
             </div>
           </div>
-
-
         </div>
       </div>
-
     </div>
-    <br>
-    <!--  -->
+  </div>
+
+  <!-- Fourth Card -->
+  <div class="container p-5 mt-2">
     <div class="col-12 col-md-12 col-lg-12 g-5">
       <div
-        class="row rounded-5 justify-content-center align-items-center card-shadow p-4 bg-card border border-1 border-color ">
+        class="row rounded-5 justify-content-center align-items-center card-shadow-Dark p-4 bg-card border border-1 border-color position-relative">
+        <!-- Línea horizontal como color identificador -->
+        <div class="color-identificador-Light-blue"></div>
+
         <div class="col-12 col-md-12 col-lg-6 text-center p-3">
-          <img src="Resources/img/personal/noemi.jpg" class="img-fluid rounded-3">
+          <img src="Resources/img/img_Personal-4-3/noemi_DxO.jpg" class="img-fluid rounded-3">
           <div class="container">
             <div class="row justify-content-center align-items-center g-2 mt-2">
-              <!-- PONER NOMBRE DEL PROFE PARA EVITAR CONFLICTOS EN BG-BADGE-->
-              <h1 class="col-12 text-center">Noemi País Bozo<span
-                  class="badge rounded-pill badge-size bg-badge-Light-blue align-middle">☆</span></h1>
+              <h1 class="col-12 text-center">Noemi País Bozo<br><span
+                  class="badge rounded-pill badge-size bg-badge-Light-blue align-middle">👩‍🏫</span></h1>
               <h4 class="col-12 text-center">Profesora</h4>
             </div>
-
           </div>
-
         </div>
-        <!-- añadido id remove_mobile-->
-        <div class="col-12 col-md-12 col-lg-6 " id="remove_mobile">
+        <div class="col-12 col-md-12 col-lg-6" id="remove_mobile">
           <div class="row justify-content-center align-items-center align-middle g-2">
-            <div class="col-12 text-center container bg-dark border border-color border-1 rounded-3 px-1 my-4  ">
+            <div class="col-12 text-center container bg-dark border border-color border-1 rounded-3 px-1 my-4">
               <div class="container bg-card rounded-top mt-1">
-                <h4 class="pt-2">Formación</h4>
+                <h4 class="pt-2">Formación 🎓</h4>
                 <p class="text-break pb-1 mb-1"> Diplomatura trabajo social </p>
               </div>
               <div class="container bg-card">
-                <h4 class="pt-2">Hobbies</h4>
+                <h4 class="pt-2">Hobbies 📚</h4>
                 <p class="text-break pb-1 mb-1"> Leer, Viajar, Senderismo, Cocinar.</p>
               </div>
               <div class="container bg-card">
-                <h4 class="pt-2">Frase que te represente</h4>
+                <h4 class="pt-2">Frase que te represente 🌠</h4>
                 <p class="text-break pb-1 mb-1">Lo esencial es invisible a los ojos.</p>
               </div>
               <div class="container bg-card rounded-bottom ">
-                <h4 class="pt-2">Algo sobre ti</h4>
+                <h4 class="pt-2">Algo sobre ti 🗺️</h4>
                 <p class="text-break pb-1 mb-1">Soy una persona con empatía, con capacidad de escucha , resolutiva, con
                   habilidades comunicativas, y versátil. Me encanta el dinamismo, y me aburre lo estático, proponer y
                   organizar actividades dando rienda suelta a la imaginación y creatividad forma parte de mi esencia. Me
                   gusta ayudar a los demás, y mi profesión es totalmente vocacional.</p>
               </div>
-
             </div>
           </div>
-
-
         </div>
       </div>
-
     </div>
   </div>
+
   <footer class="bg-dark text-light py-3 bg-blueilerna custom-navbar">
     <div class="container">
       <div class="row my-4">
diff --git a/integracionsocial.html b/integracionsocial.html
index 81f2c42..15cc5fd 100644
--- a/integracionsocial.html
+++ b/integracionsocial.html
@@ -1,374 +1,438 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="stylesheet" href="css/bootstrap.css">
-        <link rel="stylesheet" href="css/style.css">
-        <link rel="shortcut icon" href="Resources/img/logo/ilerna_Staff_Amarillo.png" type="image/x-icon">
-        <script defer src="js/bootstrap.bundle.js"></script>
-        <title>Educación Infantil</title>
-    </head>
-<body>
-    <nav class="navbar navbar-expand-lg navbar-light bg-blueilerna custom-navbar">
-        <div class="container-xxl">
-            <a class="navbar-brand" href="index.html">
-                <img src="Resources/img/logo/ilerna_Staff_Amarillo.png" alt="Logo" width="150" height="55">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="css/bootstrap.css">
+  <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="css/integration.css">
+  <link rel="shortcut icon" href="Resources/img/logo/ilerna_Staff_conserje.png" type="image/x-icon">
+  <script defer src="js/bootstrap.bundle.js"></script>
+
+  <title>Integración Social</title>
+</head>
+
+<body class="integration-bg">
+  <nav class="navbar navbar-expand-lg navbar-light bg-blueilerna custom-navbar">
+    <div class="container-xxl">
+      <a class="navbar-brand" href="index.html">
+        <img src="Resources/img/logo/ilerna_Staff_conserje.png" alt="Logo" width="150" height="55">
+      </a>
+
+      <!--NO BORRAR BOTÓN DE MOVIL-->
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon">
+          <span class="linea"></span>
+          <span class="linea"></span>
+          <span class="linea"></span>
+        </span>
+      </button>
+
+      <div class="collapse navbar-collapse" id="navbarNav">
+        <ul class="navbar-nav ml-auto menu-derecha">
+          <li class="nav-item active">
+            <a class="nav-link text-white" href="index.html">Inicio</a>
+          </li>
+          <li class="nav-item has-submenu">
+            <a class="nav-link text-white" href="#">Familias educativas <class="arrow-down-custom">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="custom-arrow"
+                  viewBox="0 0 16 16">
+                  <path
+                    d="M4.646 6.146a.5.5 0 01.708 0L8 9.793l2.646-2.647a.5.5 0 01.708 0 .5.5 0 010 .708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 010-.708z" />
+                </svg>
             </a>
-  
-            <!--NO BORRAR BOTÓN DE MOVIL-->
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
-                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-                <span class="navbar-toggler-icon">
-                    <span class="linea"></span>
-                    <span class="linea"></span>
-                    <span class="linea"></span>
-                </span>
-            </button>
-  
-            <div class="collapse navbar-collapse" id="navbarNav">
-                <ul class="navbar-nav ml-auto menu-derecha">
-                    <li class="nav-item active">
-                        <a class="nav-link text-white" href="index.html">Inicio</a>
+            <ul class="submenu">
+              <div class="container overflow-auto">
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle bg-blueilerna" href="#" role="button" data-bs-toggle="dropdown"
+                    aria-expanded="false">
+                    Sanidad
+                  </a>
+                  <ul class="dropdown-menu bg-blueilerna">
+                    <li><a class="dropdown-item " href="Sanidad_Anatomia.html">Anatomía
+                        Patológica y <br> Citodiagnóstico</a></li>
+                    <li><a class="dropdown-item" href="Sanidad_Audiologia.html">Audiología Protésica</a></li>
+                    <li><a class="dropdown-item" href="Sanidad_Aux_Enfermeria.html">Auxiliar de Enfermería</a></li>
+                    <li><a class="dropdown-item" href="Sanidad_Dietetica.html">Dietética</a></li>
+                    <li><a class="dropdown-item" href="Sanidad_Imagenydiasnostico.html">Imagen para el Diagnóstico y
+                        <br> Medicina Nuclear</a></li>
+                    <li><a class="dropdown-item" href="sanidad_laboratorio.html">Laboratorio Clínico y <br>Biomédico</a>
                     </li>
-                    <li class="nav-item has-submenu">
-                        <a class="nav-link text-white" href="#">Familias educativas <class="arrow-down-custom">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
-                                    fill="currentColor" class="custom-arrow" viewBox="0 0 16 16">
-                                    <path
-                                        d="M4.646 6.146a.5.5 0 01.708 0L8 9.793l2.646-2.647a.5.5 0 01.708 0 .5.5 0 010 .708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 010-.708z" />
-                                </svg>
-                        </a>
-                        <ul class="submenu">
-                            <div class="container overflow-auto">
-                              <li class="nav-item dropdown">
-                                <a class="nav-link dropdown-toggle bg-blueilerna" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                  Sanidad
-                                </a>
-                                <ul class="dropdown-menu bg-blueilerna">
-                                  <li><a class="dropdown-item " href="Sanidad_Anatomia.html">Anatomía
-                                    Patológica y  <br> Citodiagnóstico</a></li>
-                                  <li><a class="dropdown-item" href="Sanidad_Audiologia.html">Audiología Protésica</a></li>
-                                  <li><a class="dropdown-item" href="Sanidad_Aux_Enfermeria.html">Auxiliar de Enfermería</a></li>
-                                  <li><a class="dropdown-item" href="Sanidad_Dietetica.html">Dietética</a></li>
-                                  <li><a class="dropdown-item" href="Sanidad_Imagenydiasnostico.html">Imagen para el Diagnóstico y <br> Medicina Nuclear</a></li>
-                                  <li><a class="dropdown-item" href="sanidad_laboratorio.html">Laboratorio Clínico y <br>Biomédico</a></li>
-                                  <li><a class="dropdown-item" href="Sanidad_Protesis.html">Prótesis Dental</a></li>
-  
-  
-                                </ul>
-                              </li>
-                              
-                              <li class="nav-item dropdown">
-                                <a class="nav-link dropdown-toggle bg-blueilerna" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                  Comercio y Marketing
-                                </a>
-                                <ul class="dropdown-menu bg-blueilerna">
-                                  <li><a class="dropdown-item " href="marketingPublicidad.html"> Marketing y Publicidad</a></li>
-                                </ul>
-                              </li>
-                              <li class="nav-item dropdown">
-                                <a class="nav-link dropdown-toggle bg-blueilerna" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                  Administración y Gestión
-                                </a>
-                                <ul class="dropdown-menu bg-blueilerna">
-                                  <li><a class="dropdown-item " href="administracionFinanzas.html"> Administración y Finanzas</a></li>
-                                </ul>
-                              </li>
-                              <li class="nav-item dropdown">
-                                <a class="nav-link dropdown-toggle bg-blueilerna" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                  Informática
-                                </a>
-                                <ul class="dropdown-menu bg-blueilerna">
-                                  <li><a class="dropdown-item " href="informatica_y_telecomunicaciones_desarrollo_de_aplicaciones_web.html"> Desarrollo de Aplicaciones  <br>Web</a></li>
-                                  <li><a class="dropdown-item " href="informatica_y_telecomunicaciones_desarrollo_de_aplicaciones_multiplataforma.html"> Desarrollo de Aplicaciones  <br>Multiplataforma</a></li>
-  
-                                </ul>
-                              </li>
-                              <li class="nav-item dropdown">
-                                <a class="nav-link dropdown-toggle bg-blueilerna" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                  Imagen y Sonido
-                                </a>
-                                <ul class="dropdown-menu bg-blueilerna">
-                                  <li><a class="dropdown-item " href="administracionFinanzas.html"> 3D,Juegos y <br> Entornos Interactivos</a></li>
-                                </ul>
-                              </li>
-                              <li class="nav-item dropdown">
-                                <a class="nav-link dropdown-toggle bg-blueilerna" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                    Servicios Socioculturales
-                                </a>
-                                <ul class="dropdown-menu bg-blueilerna">
-                                  <li><a class="dropdown-item " href="integracionsocial.html"> Integración Social</a></li>
-                                  <li><a class="dropdown-item " href="educacioninfantil.html"> Educación Infantil</a></li>
+                    <li><a class="dropdown-item" href="Sanidad_Protesis.html">Prótesis Dental</a></li>
 
-                                </ul>
-                              </li>
-                            </div>
-                        </ul>
-                    </li>
-                    <li class="nav-item small">
-                        <a class="nav-link text-white" href="Transversal_Transversal.html">Transversales</a>
-                    </li>
-                    <li class="nav-item small">
-                        <a class="nav-link text-white" href="adminCentro_direccion.html">Administración</a>
-                    </li>
-                    <li class="nav-item small">
-                        <a class="nav-link text-white" href="adminCentro_personal.html">Mantenimientos y
-                            servicios</a>
-                        </li>
-                        <li class="nav-item small">
-                            <a class="nav-link text-white" href="voluntariado.html">Voluntariado</a>
-                        </li>
-                </ul>
-            </div>
-        </div>
-    </nav>
-    <!-- CARDS  -->
-    <div class="container p-5 mt-2">
-        <!-- sin p-5 psm-0 p-md-0 p-lg-5-->
-        <div class="col-12 col-md-12 col-lg-12 g-5" >
-          <div class="row rounded-5 justify-content-center align-items-center card-shadow p-4 bg-card border border-1 border-color ">
-            <div class="col-12 col-md-12 col-lg-6 text-center p-3">
-              <img src="Resources/img/personal/cristina.jpg" class="img-fluid rounded-3">
-              <div class="container">
-                <div class="row justify-content-center align-items-center g-2 mt-2">
-                  <!-- PONER NOMBRE DEL PROFE PARA EVITAR CONFLICTOS EN BG-BADGE-->
-                  <h1 class="col-12 text-center">Cristina Nieto Carmona <span class="badge rounded-pill badge-size bg-badge-Black align-middle">☆</span></h1>
-                  <h4 class="col-12 text-center">Profesora</h4>
-                </div>
 
-              </div>
+                  </ul>
+                </li>
 
-            </div>
-             <!-- añadido id remove_mobile-->
-            <div class="col-12 col-md-12 col-lg-6 " id ="remove_mobile">
-              <div class="row justify-content-center align-items-center align-middle g-2">
-                <div class="col-12 text-center container bg-dark border border-color border-1 rounded-3 px-1 my-4  ">
-                  <div class="container bg-card rounded-top mt-1">
-                    <h4 class="pt-2">Formación</h4>
-                    <p class="text-break pb-1 mb-1"> Pedagoga y doctora en Educación  </p>
-                  </div>
-                  <div class="container bg-card">
-                    <h4 class="pt-2">Hobbies</h4>
-                    <p class="text-break pb-1 mb-1"> La gente divertida, viajar y comer </p>
-                  </div>
-                  <div class="container bg-card">
-                    <h4 class="pt-2">Frase que te represente</h4>
-                    <p class="text-break pb-1 mb-1">Dame risa y comida y me has conquistado</p>
-                  </div>
-                  <div class="container bg-card rounded-bottom ">
-                    <h4 class="pt-2">Algo sobre ti</h4>
-                    <p class="text-break pb-1 mb-1">Defensora de la Pedagogía de la Emoción. 
-                        El aprendizaje divertido siempre es significativo.</p>
-                  </div>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle bg-blueilerna" href="#" role="button" data-bs-toggle="dropdown"
+                    aria-expanded="false">
+                    Comercio y Marketing
+                  </a>
+                  <ul class="dropdown-menu bg-blueilerna">
+                    <li><a class="dropdown-item " href="marketingPublicidad.html"> Marketing y Publicidad</a></li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle bg-blueilerna" href="#" role="button" data-bs-toggle="dropdown"
+                    aria-expanded="false">
+                    Administración y Gestión
+                  </a>
+                  <ul class="dropdown-menu bg-blueilerna">
+                    <li><a class="dropdown-item " href="administracionFinanzas.html"> Administración y Finanzas</a></li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle bg-blueilerna" href="#" role="button" data-bs-toggle="dropdown"
+                    aria-expanded="false">
+                    Informática
+                  </a>
+                  <ul class="dropdown-menu bg-blueilerna">
+                    <li><a class="dropdown-item "
+                        href="informatica_y_telecomunicaciones_desarrollo_de_aplicaciones_web.html"> Desarrollo de
+                        Aplicaciones <br>Web</a></li>
+                    <li><a class="dropdown-item "
+                        href="informatica_y_telecomunicaciones_desarrollo_de_aplicaciones_multiplataforma.html">
+                        Desarrollo de Aplicaciones <br>Multiplataforma</a></li>
 
-                </div>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle bg-blueilerna" href="#" role="button" data-bs-toggle="dropdown"
+                    aria-expanded="false">
+                    Imagen y Sonido
+                  </a>
+                  <ul class="dropdown-menu bg-blueilerna">
+                    <li><a class="dropdown-item " href="administracionFinanzas.html"> 3D,Juegos y <br> Entornos
+                        Interactivos</a></li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle bg-blueilerna" href="#" role="button" data-bs-toggle="dropdown"
+                    aria-expanded="false">
+                    Servicios Socioculturales
+                  </a>
+                  <ul class="dropdown-menu bg-blueilerna">
+                    <li><a class="dropdown-item " href="integracionsocial.html"> Integración Social</a></li>
+                    <li><a class="dropdown-item " href="educacioninfantil.html"> Educación Infantil</a></li>
+
+                  </ul>
+                </li>
+              </div>
+            </ul>
+          </li>
+          <li class="nav-item small">
+            <a class="nav-link text-white" href="Transversal_Transversal.html">Transversales</a>
+          </li>
+          <li class="nav-item small">
+            <a class="nav-link text-white" href="adminCentro_direccion.html">Administración</a>
+          </li>
+          <li class="nav-item small">
+            <a class="nav-link text-white" href="adminCentro_personal.html">Mantenimientos y
+              servicios</a>
+          </li>
+          <li class="nav-item small">
+            <a class="nav-link text-white" href="voluntariado.html">Voluntariado</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+  <!--  -->
+  <section>
+    <div id="hero" class="p-5 text-center">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-12">
+            <div class="d-flex justify-content-center align-items-center h-100">
+              <div class="text-black">
+                <h1 class="mb-3">Integración Social</h1>
+                <p class="mb-3">
+                  Descubre el Ciclo Formativo de Grado Superior de Integración Social, una formación especializada que
+                  te prepara para abordar los desafíos del trabajo social. Con un enfoque práctico y teórico, adquirirás
+                  habilidades para intervenir en situaciones de vulnerabilidad y exclusión social. A través de prácticas
+                  en empresas del sector, obtendrás experiencia real y conexiones profesionales. Con múltiples salidas
+                  laborales en centros de atención social, ONGs, instituciones y más, esta formación te abrirá las
+                  puertas a una carrera solidaria.
               </div>
             </div>
           </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- https://codepen.io/kernesto/pen/MbaZgE -->
+  <div id="ilustration">
+
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 576">
+      <defs></defs>
+      <title>handillustration</title>
+      <g class="cls-1">
+        <g id="Layer_1" data-name="Layer 1">
+          <path id="shadow" fill="none" class="cls-2"
+            d="M623.08,123.43c15.61,28.38,42.59,87.38,46.92,120.08,2.72,20.54,4.17,41.43,5.26,62.13,1,19.38,1.65,38.77,2.27,58.16.46,14.46,0,27.07-5.15,40.64-3.31,8.8-6.74,16.45-9.22,25.71,3.86,15.08,5,46.93,2.81,63-3.12,22.75-17.92,23.66-28.53,6-12.46-.8-22.45-9.6-29.65-19.93-14.72,12.17-27.79,16.22-46,17.79-23.75,19.51-57.75,35.45-88,25.24C463.5,527.08,451,530,439.71,528c-10.63,34.18-44.46,34.72-49.93,6.29a27.22,27.22,0,0,1-28.76-5.9,28.57,28.57,0,0,1-14.21,12.59c-11,11.12-25.51,10.06-32.53-2.1C304,549.49,285.83,549,276.66,537.22a32,32,0,0,1-12.7,6.27c-16.12,9.36-34.45.92-43.72-14.48-14.85-8-28.76-15.58-39.31-29.63-4.06-3.69-6.17-4.66-11.68-6.29-25-4.9-54.88-21-68.25-44.69-15.85.9-23.71-10.49-25.73-21.7-1.53-13.14-1.73-27.19-4.63-40.21-8.57-13.55-17.09-29.45-20.83-45.17-3.39-14.28.89-33.44,4.7-47.34,3.63-13.26,8.27-26,12.34-39,4.22-13.57,5.58-27.25,8.59-41S83,188.67,91.36,177.37c22.61-30.72,53.41-62.86,82.19-87.93" />
+          <path id="shadow" fill="none" class="cls-2"
+            d="M392.9,81.52a94.51,94.51,0,0,1,5.81,7.93c7.35-13.14,16-22.66,29.6-32.55" />
+          <path id="hands" fill="none" class="cls-3"
+            d="M81,410.31c-2-10.56-2.22-29.33-5.13-41-8.48-12.79-17-28.05-20.61-42.49C50,305.44,65.67,267,72.2,246.84,81,219.6,77.43,198,95.83,173.95c16.28-21.27,52.37-59.86,84.19-86C171.94,60.41,153.23,24.33,142.55.39h.56C156.22,20.73,177.69,61.68,183.3,85c13.93-11.43,24-17.73,34.26-21.85C179,88.58,136.75,133.36,106.17,168.64c-27.08,31.24-18,44.57-30,79.56-4.31,12.61-12.46,33.74-16.5,52.48,9.32-6,20.44-4.06,25.89,2.78a23.34,23.34,0,0,0-26.69,1.25c-1.61,8.46-2.44,15.27-1.07,21.43,2.91,13,10.95,26.18,17.85,39.08-.47-8.55,2.86-14.94,9.66-14.94,20.51,0,15.34,47.35-2.52,61.32,32.14-46.8-6.37-77-2.93-39.51C81.41,388.59,81.78,394,81,410.31Z" />
+          <path id="hands" fill="none" class="cls-3"
+            d="M280,55.14a64.57,64.57,0,0,1,38.81,12.18c14.43-6.44,22.51-9.22,38.84-5-13.91-1-20.75-.1-33.79,8.28-5.83,3.75-7.17,1.6-11.56-1.63A77.57,77.57,0,0,0,280,55.14Z" />
+          <path id="hands" fill="none" class="cls-3"
+            d="M443.84,61c14.13-4.11,24.94,12.31,37.66,8,11.49-3.26,32.38-13.7,49.79-6-22.78-1.85-29.54,3.45-49.49,9.83C466.89,77.57,458.72,60.39,443.84,61Z" />
+          <path id="hands" fill="none" class="cls-3"
+            d="M650,400.69c-29.77-.52-13.88,78.28,3.86,81.57,9.11-.56,4-63.57.3-76l2,4.52c2.32-17.22,9-21.12,11.9-36.31,1-5.05,1.07-12.19.71-23.5-5.7-3.86-10.7-5.67-19.51-6.51a37.21,37.21,0,0,1,19.5,2.65c-.16-4.81-.4-8.87-.69-14.12-11.17-3.78-15.51,2-24.94-.75,11.4.06,15.94-5.38,24.84-1.25-1.31-22.7-3.57-46.91-4.48-57.35-2.43-28-3.26-41.89-13.48-67.77-13.12-33.22-36.91-100.91-67.84-123.29,13.21,6,22.62,17.13,31.68,32.18C620.27,93.54,690.5,14.14,704.32.39c-9.16,16.74-52.27,68.88-66,85.49-6.42,7.78-18,22.55-21.45,33.35,7,11.88,12.21,23.8,16.88,33.62,10.44,21.94,27.33,57.94,30.65,82,4.83,35.06,6.29,79.22,7.49,115.06,1.21,36.3-7.16,35.68-14.6,63.67,3.14,9.08,9,74.25-4.12,72.19-5.12-.8-9.06-5.25-12.5-11.61-13,.73-23.86-8.91-31.69-21.93-18.79,16.74-33.19,18.74-49.41,20-24.32,19.65-57.91,34.11-86.14,23.66-10.83,5.42-25.41,8.9-37.28,5-15.84,46.57-43.19,21.32-40.65,9.87a47.33,47.33,0,0,1-3.9-4.38c-11.65,7.7-27.77,1.45-31.55-10-2.75,8.69-7.77,16.07-16.34,18.76-10.28,10.94-23.67,8.25-27.1-6.35a16.88,16.88,0,0,1-4.79,3.51c-9.92,12.63-30.38,7.88-33.64-5-4.78,5.52-10.4,8.74-16.26,9.86-12.92,7.74-29.34,1.82-37.68-12.85-14.85-7.68-28.91-14.7-39.2-28.09-3.94-3.5-6.13-5.29-14.51-7.66-24.5-4.55-55-20.33-66.42-43.54C94.45,427,86.71,423,81.5,413c5.81,7.82,14.15,12.17,25.83,8.18,31.35-10.71,32.61-53.72,30.37-80.57-2.33-28-5.24-41.67-33-46.44,16.22-.62,25.26,6.06,30.45,16.3,15.44-18.53,17.8-42.86,9.68-75.69,4.42,11.16,8.6,23.37,8.08,35.57,19.91-25.6,22.15-38,17-65.43,4.39,15.23,6.44,26.77,1.45,42.41-1.26,3.95,7.79-3.6,16.3-16.3-4.57,14.39-21.51,30.87-33.14,42-1.09,1.09-1.06,1.53.74,1.53,23.66,4.45,39.55-9.53,64-23.76-19.29,13.9-39.2,34-66.87,26a64,64,0,0,1-1.84,10.67c11.27.14,20.62.14,29.91-.74C239.59,258,286.87,196.82,306,134.92,297.2,189.33,237.14,268,185.67,286.78c55.5-5.54,73.65-20,110.53-60.17-12.34,18.51-25.29,32.11-39.43,41.86,32.68-8,60.85-36.75,91.14-37.78-31.66,5.53-62.59,39.67-96.32,41.1-28.22,17-60.12,19.94-101.89,19.11-2.44,9-5.84,15.22-13,22.8,3.2,6.61,3.65,12,4.65,20.48,19.25,2.88,35.5,11.68,41.86,24.79.85,1.37,2.09,2.27,3.4,1.86,2.12-.67,3.5-16.1,5.38-16.25,1.6-.49,1.42,18.18,5.8,17.93,14.51-.84,33.2.55,44,18.37,9.62-18.77,40.58-23.64,53.74-11.91,1.32-16.41,13.15-28.34,29.13-31.09-5.42,2.92-8.63,4.35-13.18,8.79,19.26-4.47,59.39-16.61,61.9,14.61,2.25-8.16-4.45-52.92-4.7-67.61-45.54-17.73-103.75-8.54-154.31,28.23C254.73,283,322.11,269.38,368.53,289c-.12-52.49,5.92-112.26,16.59-151.87,3.25-12.08,6.31-22.37,10.16-31.55-7.1-22.8-20.35-30.93-44.1-34.17,11.23-.25,22.7,1.17,31.3,7.16C371.2,48.61,348.06,17.21,326.3.39,351.82,11.88,380.93,55.24,387.8,81c3.2,3.87,9.69,11.15,10.33,18.3,7.23-15.47,14.93-27.08,33.41-40,20-14,37.43-36.07,47.33-58.93-6.45,23.29-25.72,49.17-44.1,62.65-29.51,21.64-36.46,40.83-45.21,75.3-10.54,41.51-14.7,89-15.71,132,46.66-3.14,125.23,14.56,147.79,58.95l3.77,9.73h0l-5.26-8.85c-29-43.45-96.55-57.78-146.15-54.74-1.48,22.83,2.74,43.84,3.77,67.28.52,11.8-2.31,22.92-2.93,36.4,1.11,22.93,30,3.45,47.38,16-16.35-6-38.53,4.64-48-3.67a228.41,228.41,0,0,0-4.11,28.76c.43,3.37,1.8,5.93,4.72,6.86,9.15,2.93,26.73-.78,38.06.1a35.11,35.11,0,0,1,9.31-9.71c-.77-18,5.59-29.37,13.06-45,2.82-5.9,4.85-11.27.92-15.62-4.39-4.85-6.26-8-10.27-12.64-5.73-6.6-12-4.81-19.13-12.41,6,3.79,15.91,3.59,21.31,10.65,8.63,11.29,16.83,16.91,13.52,24.17,20.29-16.57,49.25,3.58,57.46,22.37,11.79-8.72,25.79-12.5,42.13-9.17,9.82-18.19,27.9-28.48,49.84-29.26a176.4,176.4,0,0,0-5.4-36.37c-29.59-4.53-66.56-11.47-85.18-33.36-20.54-24.15-59.08-63.12-74.09-88.61,20.75,23.12,41.26,46.07,62.12,69.14,31.52,34.86,26.06,33.2,73.57,45.65-51.7-37.46-107.71-147.9-64.72-206.8-16.77,33.6-15.6,60.57-3.63,95.89,12.74,37.6,51.14,109.75,90.67,114.28-5.07-19-12.5-33.85-23.74-44.09a42.75,42.75,0,0,1,12.14,10.41c-2.25-41.25,25-61.54,27.83-64.09-19.52,21.7-25.24,38.46-23.91,70,5.49,8.91,9,19.88,12.22,31.48a198.86,198.86,0,0,1,6.61,39c5.43-12,16-15.27,28.21-11.37-13.23-1.16-22.43,5.73-27.89,17.59a105,105,0,0,1-.33,13.22c-2.61,26.77,9.51,98.94,44.42,100.33A82.85,82.85,0,0,1,632.43,452C630,440.4,626.64,394.4,650,400.69Zm-114.64,4.26c-.54-7.87,1-13.4,3.51-19.83-27.06-5.64-39,4-48.83,24.41a53.64,53.64,0,0,0-4.41,12.21c8.31-1.35,19.92-1.22,33-7.35,2.68-3,14.1-8.34,16.74-9.44ZM187.65,477.53c14.4,11.86,20.15,14.17,37.64,23.17,2.14,1.1,8,19.27,28.75,16.74-12.49-1.45-19-8.94-26-18.06,8.79,8.82,20.69,18.42,34.63,14,18.22-5.77,16.76-20,13-35-7.54-30.46-18.8-37.2-48.08-37.87a30.34,30.34,0,0,1,2.2,17.11c-1.39,8.07-5.63,13.54-11.33,16.39-7.08,11.44-19.35,9-30.82,3.51Zm-46.77-54.66c5.49-21.55,30.16-22.76,52.19-13.39-8.74-23.22-29.65-31.5-53.33-24.72-3.45,17-10.6,29.74-27.72,38.29a20.64,20.64,0,0,1-5.62,2.17c17.7,20.18,36.73,34.17,62.08,40.92,19.6,2.9,29.43,17.91,46,9.4-6.3,1.69-13.75.74-20.92-2.88-7.47-3.77-15-10.26-23-11.28,10.29-3.87,38.77,27.71,53,1.83,11.2-20.42-18.67-45.7-36.62-52.24-19-6.94-35.81-6.49-46,11.91Zm55.56-13.05c19.79-6,38.58.1,49.52,9.82,0-26.13-5.3-40.42-21.9-49.53-9.46-5.2-22.85-6.54-36.35,1.1,2.29,8.09,1.9,16.32,1.65,24.53,3,4.51,5.14,9.85,7.08,14.08Zm1.24,1.79c13.07,6.56,24.59,16.77,29.71,28.44,10.67-1.54,19.86-2.06,29,2.4-10.47-26.14-31.79-35-58.76-30.84Zm228.65,3.16c14.62-9.09,45.58-9.81,55.4,4.31,2.76-9.22,11.44-24.66,15.3-28.27-12.59-18.38-31.2-33.46-56.8-21.8-7.69,16.64-13.61,26.07-13.9,45.76Zm0,2.53c-9.74,5.2-14.46,19.33-16.62,26.86,10.73-5.92,22.18-7.81,33.29-2.74A121.05,121.05,0,0,1,480.65,423c-3.29-14.64-44.69-11.4-54.35-5.7ZM300.79,390.1c16.9-16.4,58.36-18.07,66.3-5.94a26.16,26.16,0,0,1,3,6.55c-.1-4.81-.64-9.67-.08-14.42,6.26-40.59-28.76-33.14-61.24-27.18-5.88,3-12.81,20.38-11.49,22.19,2.29,3.13,2.68,10.29,3.48,18.79Zm68.06,16c-.66-9.48-2.73-18.91-8.74-22-15.75-8.18-45.52-2.35-59.17,7.63.89,9.76,1.53,20.77,2.66,28.82a37.9,37.9,0,0,1,4.47,11.16c6-20.91,46.06-19.61,59.48-10.78,1-3.84,1.09-9.37,1.3-14.79Zm43.05,22.67c-7.24,1.25-24.05,3.56-26.24,3.73-7.21.56-12.09-.42-15.23-2.47-.45,13.24-6.73,43.84-8,54.82-.23,2-.53,3.93-.92,5.87,3.86,13.52,17.31,19.38,29.53,15C371.87,480,402.84,457.05,406.26,442a43.9,43.9,0,0,1,5.65-13.21ZM242.54,382.21c4.41,7.56,6.92,17.54,6.2,30.35,15.63-9.82,39.9-11,52.44,4.51-4.65-15.89-3.27-35.66-8.76-44.45-11.51-8.79-35.84-8.55-49.89,9.59Zm6.2,32-.31,8c5.12,5.61,8,12,9.86,21.21a36.29,36.29,0,0,1,6.3,4.4c9-10.94,29.13-12.3,43.3-4-6.26-35.92-33-41.11-59.15-29.6Zm59.65,18.94c.73,3.76,2,8,1.74,11.78,19.48,13.15,24.26,44.72,7.42,62.86,8.39,6.19,18.24,6.86,24.81,4.74,9.09-2.94,14.7-12.66,15.94-27.8,1.32-16.06,3.15-25.47,6.06-41.12,1.39-7.45,5.32-17.66-2.65-22.32-13.24-7.74-43.92-4.69-53.32,11.86ZM317,508.4c1,3.6,9.07,19.46,24.24,6.79-9.67,1.46-17.82.5-24.24-6.79ZM396.82,512c8.67,22.73,27.58,14.09,33.37-1.56-11.06,12-23.35,11.21-33.37,1.56Zm37.87-11.66c-10.5-4.14-14.11-13-8.62-17.41-5.88-16.69,2.26-30,14.89-40-13.38-3.67-21.45-.9-32,2.66-5.3,10.61-9.12,14.51-14.85,24.66-9.08,16.08-7.4,31.29,7.72,42.7s24.29.12,32.85-12.6Zm-8-16.07c-6.21,8.17,7,15.21,14.59,15.86,20.32,1.74,43.43-10.28,39.56-13.95-2.06-1.95-8.71,2.6-14.39-.84,5.55,1.28,12.8-2.81,15.55-.07,4.15,4.13-4.52,8.67-7.39,10.08,30.34,4.32,59.88-8.54,80.69-23-10.35.77-19.47,1.58-33.07,5.79-7.83,2.42-26.6,9-38.17,5.35-6.43-2-11.32-9.24-7-15.46-8.55-17.53,7-34.7,23.95-45.21-9.91.43-13.91,3-18.3,3.29-1.15.07-1.71-.64-1.82-1.91-20,8.52-46.62,19.64-52.62,43.31-3.16,12.44,3.16,22.42,14.41,23.79s16.46-7.07,22.33-5.56c-5.37.83-14,9.54-25,8.78-5.07-.35-10.27-4-13.37-10.22Zm51-15.13c-2.42,6.5,1,10.56,9.62,12.25,7.39,1.45,19.55-2.7,32.13-6.69-13.14-3.83-31.6,13-41.75-5.56Zm43.08,5.14c8.59-2.71,17.31-5.25,24.78-5.8,35.16-2.62,52.45-7,54.79-30.32.18-9.06-1.7-12.12-6.11-26.24-17.2-17.86-48.67-13.58-72.44,3.62-.93,5,46.53-14.71,47.63,28-7.27-39-41.5-19.06-50.38-25.26-1.18-.83-1.49-1.71-1.21-2.62-17.05,9.82-48.71,32.32-35.47,52.85,9.42,14.6,28-2.73,38.41,5.74Zm16.54-69.94c20.2-9.17,38.29-16,56.19,4.13-2.88-14.42-3.8-28.06-2.77-37a107.93,107.93,0,0,0,.51-17.94c-32.14,5.05-48.63,19.82-53.93,50.82ZM265,448.17c11.57,10.84,23.21,43.29,15.34,56.38,8,5.52,23.2,10.48,31.73,3.66,12.95-10.35,13.19-30.51,7-45-9.74-22.65-36-27.78-54-15ZM280,505a18.65,18.65,0,0,1-1.14,1.51c6.39,11.39,19.09,13.84,29.15,7.18-9.4,2.36-21.23-1.66-28-8.69ZM141.53,336.52c.55,4.8.92,9.5,1.18,14.21.55,10,.47,19.46-1.44,29.43,16.51-4.13,35.11-2.06,47,14C183.92,364.76,176.5,344.86,141.53,336.52Z" />
+          <path id="heart" fill="none" class="cls-4"
+            d="M232.42,345c13-44.56,121.88-60.72,174.87-25.33,73.6-35.39,173.1-19.23,160.12,25.33-14.31,49.15-123.15,71.81-195.69,96.83C313.75,416.82,218.11,394.15,232.42,345Z" />
+          <path id="heart" fill="none" class="cls-3"
+            d="M204.23,230.07c0-97.46,104.2-132.8,167.5-55.4,63.3-77.4,167.5-42.06,167.5,55.4,0,107.48-102.24,157.05-167.5,211.77C306.47,387.12,204.23,337.55,204.23,230.07Z" />
+          <path id="heart" fill="none" class="cls-5"
+            d="M310.69,232.14c0-16.64,12.82-30.13,28.64-30.13S368,215.5,368,232.14c0,15.56-11.21,28.36-25.61,30h-6.07C321.91,260.5,310.69,247.7,310.69,232.14Z" />
+          <path id="heart" fill="none" class="cls-5"
+            d="M374.24,232.14c0-16.64,12.82-30.13,28.64-30.13s28.64,13.49,28.64,30.13c0,15.56-11.21,28.36-25.61,30h-6.07C385.46,260.5,374.24,247.7,374.24,232.14Z" />
+          <path id="heart" fill="none" class="cls-5"
+            d="M441.83,294.7c-3.77-8.65-12.34-22.46-19.31-25.24a35.19,35.19,0,0,0-6.79-1.8,75.41,75.41,0,0,0-25.69,0,35.16,35.16,0,0,0-6.79,1.8,13.78,13.78,0,0,0-3.38,2.09,18.14,18.14,0,0,1,8.24,15.35c0,9.28-6.69,16.9-15.26,17.86h-3.62c-8.58-1-15.26-8.58-15.26-17.86a18,18,0,0,1,9.62-16.14,12,12,0,0,0-2.42-1.3c-4-1.53-10.09-2.44-16.55-2.77H334.05c-6.46.33-12.5,1.24-16.55,2.77-7.36,2.78-15.27,16.6-19.25,25.24-5.06,11-11.9,24.84-11.9,30.33s2.43,9.32,7.75,9.32c4.56,0,6.26-2.33,9.47-7.32.36-.55,11.38-23.62,11.38-24.3l7.25,54.92c0,4.08,2.65,7.4,5.92,7.4h34.41a5,5,0,0,1-1.19-3.34l-.75-10.37h-7l4.51-20.1.26-3.36c0,.41-7.32,15.25-7.53,15.58-1.82,3-2.77,4.36-5.35,4.36-3,0-4.38-2.29-4.38-5.55s3.86-11.52,6.72-18.08c2.25-5.15,7.36-13.39,11.51-15a21,21,0,0,1,4-1.07,44.93,44.93,0,0,1,15.31,0,21,21,0,0,1,4,1.07c4.16,1.65,9.26,9.89,11.51,15,2.86,6.56,6.72,14.81,6.72,18.08s-1.37,5.55-4.38,5.55c-2.58,0-3.53-1.39-5.35-4.36-.2-.33-7.53-15.17-7.53-15.58l.26,3.36,4.51,20.1h-7l-.75,10.37a5,5,0,0,1-1.19,3.34h34c3.11,0,5.62-3.31,5.62-7.4l1.26-17.4h11.79l-7.56-33.72-.44-5.63c0,.68,12.29,25.58,12.63,26.13,3,5,4.66,7.32,9,7.32,5.05,0,7.35-3.84,7.35-9.32S446.63,305.7,441.83,294.7Z" />
+        </g>
+      </g>
+    </svg>
 
+    <img
+      src="http://idb.006.neoreef.com/Documents%20and%20Settings/5/Site%20Documents/Design%20Files/handillustration-01.png"
+      alt="image of hands ilustrated">
+  </div>
+  <!-- CARDS  -->
+  <div class="container p-5 mt-2">
+    <!-- Cristina -->
+    <div class="card integration-bg mb-5 mt-5 card-shadow-integration">
+      <div class="row no-gutters ">
+        <div class="col-md-4 d-flex justify-content-center justify-content-lg-center justify-content-xl-start">
+          <img src="Resources/img/img_Personal-4-3/cristina_DxO.jpg" class="img-fluid rounded-start">
         </div>
-        <!--  -->
-        <div class="container p-5 mt-2">
-        <!-- sin p-5 psm-0 p-md-0 p-lg-5-->
-        <div class="col-12 col-md-12 col-lg-12 g-5" >
-          <div class="row rounded-5 justify-content-center align-items-center card-shadow p-4 bg-card border border-1 border-color ">
-            <div class="col-12 col-md-12 col-lg-6 text-center p-3">
-              <img src="Resources/img/personal/mariat.jpg" class="img-fluid rounded-3">
-              <div class="container">
-                <div class="row justify-content-center align-items-center g-2 mt-2">
-                  <!-- PONER NOMBRE DEL PROFE PARA EVITAR CONFLICTOS EN BG-BADGE-->
-                  <h1 class="col-12 text-center">Maria Tenorio Rodriguez<span class="badge rounded-pill badge-size bg-badge-Black align-middle">☆</span></h1>
-                  <h4 class="col-12 text-center">Profesora</h4>
+        <div class="col-md-8">
+          <div class="card-body d-flex flex-column">
+            <h3 class="card-title d-flex justify-content-center">Cristina Nieto Carmona</h3>
+            <div class="list-group cursor mt-4">
+              <div class="list-group-item border-end-0 border-start-0 rounded-0 critina-select" aria-current="true">
+                <div class="d-flex w-100 justify-content-between">
+                  <h5 class="h35 mb-1">Formación</h5>
                 </div>
-
+                <p class="mb-1">Pedagoga y doctora en Educación.</p>
               </div>
-
-            </div>
-             <!-- añadido id remove_mobile-->
-            <div class="col-12 col-md-12 col-lg-6 " id ="remove_mobile">
-              <div class="row justify-content-center align-items-center align-middle g-2">
-                <div class="col-12 text-center container bg-dark border border-color border-1 rounded-3 px-1 my-4  ">
-                  <div class="container bg-card rounded-top mt-1">
-                    <h4 class="pt-2">Formación</h4>
-                    <p class="text-break pb-1 mb-1"> Grado en Pedagogia</p>
-                  </div>
-                  <div class="container bg-card">
-                    <h4 class="pt-2">Hobbies</h4>
-                    <p class="text-break pb-1 mb-1"> Me encanta la lectura, el baile, conocer lugares y disfrutar la calle con amig@s. </p>
-                  </div>
-                  <div class="container bg-card">
-                    <h4 class="pt-2">Frase que te represente</h4>
-                    <p class="text-break pb-1 mb-1">Dame risa y comida y me has conquistado</p>
-                  </div>
-                  <div class="container bg-card rounded-bottom ">
-                    <h4 class="pt-2">Algo sobre ti</h4>
-                    <p class="text-break pb-1 mb-1">Defensora de la Pedagogía de la Emoción. 
-                        El aprendizaje divertido siempre es significativo.</p>
-                  </div>
-
+              <div class="list-group-item border-end-0 border-start-0 critina-select" aria-current="true">
+                <div class="d-flex w-100 justify-content-between">
+                  <h5 class="h35 mb-1">Hobbies</h5>
+                </div>
+                <p class="mb-1">La gente divertida, viajar y comer.</p>
+              </div>
+              <div class="list-group-item border-end-0 border-start-0 critina-select" aria-current="true">
+                <div class="d-flex w-100 justify-content-between">
+                  <h5 class="h35 mb-1">Frase que te represente</h5>
                 </div>
+                <p class="mb-1">Dame risa y comida y me has conquistado.</p>
+              </div>
+              <div class="list-group-item border-end-0 border-start-0 border-bottom-0 rounded-0 critina-select" aria-current="true">
+                <div class="d-flex w-100 justify-content-between">
+                  <h5 class="h35 mb-1">Algo sobre ti</h5>
+                </div>
+                <p class="mb-1">Defensora de la Pedagogía de la Emoción. El aprendizaje divertido siempre es
+                  significativo.</p>
               </div>
-             
-              
             </div>
           </div>
-
         </div>
+      </div>
+    </div>
+    <!-- Maria -->
+    <div class="card integration-bg card-shadow-integration mb-5">
+      <div class="row no-gutters">
+        <div class="col-md-4 d-flex justify-content-center justify-content-lg-center justify-content-xl-start">
+          <img src="Resources/img/img_Personal-4-3/mariat_DxO.jpg" class="img-fluid rounded-start">
         </div>
-        <!--  -->
-        <div class="col-12 col-md-12 col-lg-12 g-5" >
-            <div class="row rounded-5 justify-content-center align-items-center card-shadow p-4 bg-card border border-1 border-color ">
-              <div class="col-12 col-md-12 col-lg-6 text-center p-3">
-                <img src="Resources/img/personal/lourdes.jpg" class="img-fluid rounded-3">
-                <div class="container">
-                  <div class="row justify-content-center align-items-center g-2 mt-2">
-                    <!-- PONER NOMBRE DEL PROFE PARA EVITAR CONFLICTOS EN BG-BADGE-->
-                    <h1 class="col-12 text-center">Lourdes Pallarés Gonzalez <span class="badge rounded-pill badge-size bg-badge-Black align-middle">☆</span></h1>
-                    <h4 class="col-12 text-center">Profesora</h4>
-                  </div>
-  
+        <div class="col-md-8">
+          <div class="card-body d-flex flex-column">
+            <h3 class="card-title d-flex justify-content-center">Maria Tenorio Rodriguez</h3>
+            <div class="list-group cursor mt-4">
+              <div class="list-group-item border-end-0 border-start-0 rounded-0 maria-select" aria-current="true">
+                <div class="d-flex w-100 justify-content-between">
+                  <h5 class="h35 mb-1">Formación</h5>
+                </div>
+                <p class="mb-1">Grado en Pedagogia.</p>
+              </div>
+              <div class="list-group-item border-end-0 border-start-0 maria-select" aria-current="true">
+                <div class="d-flex w-100 justify-content-between">
+                  <h5 class="h35 mb-1">Hobbies</h5>
+                </div>
+                <p class="mb-1">Me encanta la lectura, el baile, conocer lugares y disfrutar la calle
+                  con amig@s..</p>
+              </div>
+              <div class="list-group-item border-end-0 border-start-0 maria-select" aria-current="true">
+                <div class="d-flex w-100 justify-content-between">
+                  <h5 class="h35 mb-1">Frase que te represente</h5>
                 </div>
-  
+                <p class="mb-1">Dame risa y comida y me has conquistado.</p>
               </div>
-               <!-- añadido id remove_mobile-->
-              <div class="col-12 col-md-12 col-lg-6 " id ="remove_mobile">
-                <div class="row justify-content-center align-items-center align-middle g-2">
-                  <div class="col-12 text-center container bg-dark border border-color border-1 rounded-3 px-1 my-4  ">
-                    <div class="container bg-card rounded-top mt-1">
-                      <h4 class="pt-2">Formación</h4>
-                      <p class="text-break pb-1 mb-1"> Pedagoga y doctora en Educación  </p>
-                    </div>
-                    <div class="container bg-card">
-                      <h4 class="pt-2">Hobbies</h4>
-                      <p class="text-break pb-1 mb-1"> Leer Valeria en sus zapatos, reír mucho, tarifa y dormir. </p>
-                    </div>
-                    <div class="container bg-card">
-                      <h4 class="pt-2">Frase que te represente</h4>
-                      <p class="text-break pb-1 mb-1">¡Que ansiedad tengo!</p>
-                    </div>
-                    <div class="container bg-card rounded-bottom ">
-                      <h4 class="pt-2">Algo sobre ti</h4>
-                      <p class="text-break pb-1 mb-1">Exigente, creativa y apasionada de lo social.</p>
-                    </div>
-  
-                  </div>
+              <div class="list-group-item border-end-0 border-start-0 border-bottom-0 rounded-0 maria-select" aria-current="true">
+                <div class="d-flex w-100 justify-content-between">
+                  <h5 class="h35 mb-1">Algo sobre ti</h5>
                 </div>
-               
-                
+                <p class="mb-1">Defensora de la Pedagogía de la Emoción. El aprendizaje divertido siempre es
+                  significativo.</p>
               </div>
             </div>
-  
           </div>
-          <br>
-          <!--  -->
-          <div class="col-12 col-md-12 col-lg-12 g-5" >
-            <div class="row rounded-5 justify-content-center align-items-center card-shadow p-4 bg-card border border-1 border-color ">
-              <div class="col-12 col-md-12 col-lg-6 text-center p-3">
-                <img src="Resources/img/personal/noemi.jpg" class="img-fluid rounded-3">
-                <div class="container">
-                  <div class="row justify-content-center align-items-center g-2 mt-2">
-                    <!-- PONER NOMBRE DEL PROFE PARA EVITAR CONFLICTOS EN BG-BADGE-->
-                    <h1 class="col-12 text-center">Noemi País Bozo<span class="badge rounded-pill badge-size bg-badge-Black align-middle">☆</span></h1>
-                    <h4 class="col-12 text-center">Profesora</h4>
-                  </div>
-  
+        </div>
+      </div>
+    </div>
+    <!-- Lourdes -->
+    <div class="card integration-bg mb-5 mt-3 card-shadow-integration">
+      <div class="row no-gutters">
+        <div class="col-md-4 d-flex justify-content-center justify-content-lg-center justify-content-xl-start">
+          <img src="Resources/img/img_Personal-4-3/lourdes_DxO.jpg" class="img-fluid rounded-start">
+        </div>
+        <div class="col-md-8">
+          <div class="card-body d-flex flex-column">
+            <h3 class="card-title d-flex justify-content-center">Lourdes Pallarés Gonzalez</h3>
+            <div class="list-group cursor mt-4">
+              <div class="list-group-item border-end-0 border-start-0 rounded-0 lourdes-select" aria-current="true">
+                <div class="d-flex w-100 justify-content-between">
+                  <h5 class="h35 mb-1">Formación</h5>
+                </div>
+                <p class="mb-1">Grado en Pedagogia.</p>
+              </div>
+              <div class="list-group-item border-end-0 border-start-0 lourdes-select" aria-current="true">
+                <div class="d-flex w-100 justify-content-between">
+                  <h5 class="h35 mb-1">Hobbies</h5>
                 </div>
-  
+                <p class="mb-1">Leer Valeria en sus zapatos, reír mucho, tarifa y dormir.</p>
               </div>
-               <!-- añadido id remove_mobile-->
-              <div class="col-12 col-md-12 col-lg-6 " id ="remove_mobile">
-                <div class="row justify-content-center align-items-center align-middle g-2">
-                  <div class="col-12 text-center container bg-dark border border-color border-1 rounded-3 px-1 my-4  ">
-                    <div class="container bg-card rounded-top mt-1">
-                      <h4 class="pt-2">Formación</h4>
-                      <p class="text-break pb-1 mb-1"> Diplomatura trabajo social  </p>
-                    </div>
-                    <div class="container bg-card">
-                      <h4 class="pt-2">Hobbies</h4>
-                      <p class="text-break pb-1 mb-1"> Leer Valeria en sus zapatos, reír mucho, tarifa y dormir. </p>
-                    </div>
-                    <div class="container bg-card">
-                      <h4 class="pt-2">Frase que te represente</h4>
-                      <p class="text-break pb-1 mb-1">¡Que ansiedad tengo!</p>
-                    </div>
-                    <div class="container bg-card rounded-bottom ">
-                      <h4 class="pt-2">Algo sobre ti</h4>
-                      <p class="text-break pb-1 mb-1">Exigente, creativa y apasionada de lo social.</p>
-                    </div>
-  
-                  </div>
+              <div class="list-group-item border-end-0 border-start-0 lourdes-select" aria-current="true">
+                <div class="d-flex w-100 justify-content-between">
+                  <h5 class="h35 mb-1">Frase que te represente</h5>
                 </div>
-               
-                
+                <p class="mb-1">¡Que ansiedad tengo!</p>
+              </div>
+              <div class="list-group-item border-end-0 border-start-0 border-bottom-0 rounded-0 lourdes-select" aria-current="true">
+                <div class="d-flex w-100 justify-content-between">
+                  <h5 class="h35 mb-1">Algo sobre ti</h5>
+                </div>
+                <p class="mb-1">Exigente, creativa y apasionada de lo social.</p>
               </div>
             </div>
-  
           </div>
-          </div>
-          <footer class="bg-dark text-light py-3 bg-blueilerna custom-navbar">
-            <div class="container">
-              <div class="row my-4">
-        
-                <!-- Línea horizontal -->
-                <div class="col-12 mb-2">
-                  <hr class="bg-white">
+        </div>
+      </div>
+    </div>
+    <!-- Noemi -->
+    <div class="card integration-bg mb-5 mt-3 card-shadow-integration">
+      <div class="row no-gutters">
+        <div class="col-md-4 d-flex justify-content-center justify-content-lg-center justify-content-xl-start">
+          <img src="Resources/img/img_Personal-4-3/noemi_DxO.jpg" class="img-fluid rounded-start">
+        </div>
+        <div class="col-md-8">
+          <div class="card-body d-flex flex-column">
+            <h3 class="card-title d-flex justify-content-center">Noemi País Bozo</h3>
+            <div class="list-group cursor mt-4">
+              <div class="list-group-item border-end-0 border-start-0 rounded-0 noemi-select" aria-current="true">
+                <div class="d-flex w-100 justify-content-between">
+                  <h5 class="h35 mb-1">Formación</h5>
                 </div>
-                <!-- Bloque 2: Información de Contacto (dividido en 3 columnas iguales con texto alineado a la izquierda) -->
-                <div class="row my-3">
-                  <div class="col-12 col-md-4">
-                    <div class="text-left">
-                      <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12678.079767245528!2d-5.9385033!3d37.4011837!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1269414d8c133d%3A0x498ce95cde9f9931!2sILERNA%20Sevilla!5e0!3m2!1ses!2ses!4v1701699015351!5m2!1ses!2ses" width="350" height="250" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
-                    </div>
-                  </div>
-                  <div class="col-12 col-md-4">
-                    <figure>
-                      <img src="Resources\Icons\ubi.png" alt="">
-                      <figcaption>Av. de la Innovación, 7-9, Edificio Arena, 2, 41020 Sevilla</figcaption>
-                     </figure>
-                    <!--  -->
-                    <figure>
-                      <img src="Resources\Icons\telefono.png" alt="">
-                      <figcaption>954 04 12 12</figcaption>
-                     </figure>
-                     <!--  -->
-                     <figure>
-                      <img src="Resources\Icons\clock.png" alt="">
-                      <figcaption>L-V 8:30- 14:30 <br> L-V 15:00- 22:00</figcaption>
-                     </figure>
-                  </div>
-                  <div class="col-12 col-md-4">
-                    <div class="text-left">
-                      <p>
-                        <a href="mailto:correo1@example.com" class="correo-link">ilernaonline@gmail.com</a>
-                        <br>
-                        <a href="mailto:correo2@example.com" class="correo-link">ilernaandalucia@gmail.com</a>
-                        <br>
-                        Preguntas frecuentes
-                      </p>
-                    </div>
-                  </div>
+                <p class="mb-1">Diplomatura trabajo social.</p>
+              </div>
+              <div class="list-group-item border-end-0 border-start-0 noemi-select" aria-current="true">
+                <div class="d-flex w-100 justify-content-between">
+                  <h5 class="h35 mb-1">Hobbies</h5>
                 </div>
-                <!-- Línea horizontal -->
-                <div class="col-12">
-                  <hr class="bg-white">
+                <p class="mb-1">Leer, Viajar, Senderismo, Cocinar.</p>
+              </div>
+              <div class="list-group-item border-end-0 border-start-0 noemi-select" aria-current="true">
+                <div class="d-flex w-100 justify-content-between">
+                  <h5 class="h35 mb-1">Frase que te represente</h5>
                 </div>
-        
-                <!-- Bloque 3: Políticas de Privacidad y Cookies -->
-                <div class="row my-3">
-                  <div class="col-md-7 text-center ">
-                    <div>
-                      <a class="text-light" href="#">Política de Privacidad</a>
-                    </div>
-                  </div>
-                  <div class="col-md-3 text-center">
-                    <div>
-                      <a class="text-light" href="#">Política de Cookies</a>
-                    </div>
-                  </div>
+                <p class="mb-1">Lo esencial es invisible a los ojos.</p>
+              </div>
+              <div class="list-group-item border-end-0 border-start-0 border-bottom-0 rounded-0 noemi-select" aria-current="true">
+                <div class="d-flex w-100 justify-content-between">
+                  <h5 class="h35 mb-1">Algo sobre ti</h5>
                 </div>
+                <p class="mb-1">Soy una persona con empatía, con capacidad de escucha , resolutiva, con
+                  habilidades comunicativas, y versátil. Me encanta el dinamismo, y me aburre lo estático, proponer y
+                  organizar actividades dando rienda suelta a la imaginación y creatividad forma parte de mi esencia.
+                </p>
               </div>
             </div>
-          </footer>   
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <footer class="bg-dark text-light py-3 bg-blueilerna custom-navbar">
+    <div class="container">
+      <div class="row my-4">
+
+        <!-- Línea horizontal -->
+        <div class="col-12 mb-2">
+          <hr class="bg-white">
+        </div>
+        <!-- Bloque 2: Información de Contacto (dividido en 3 columnas iguales con texto alineado a la izquierda) -->
+        <div class="row my-3">
+          <div class="col-12 col-md-4">
+            <div class="text-left">
+              <iframe
+                src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12678.079767245528!2d-5.9385033!3d37.4011837!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1269414d8c133d%3A0x498ce95cde9f9931!2sILERNA%20Sevilla!5e0!3m2!1ses!2ses!4v1701699015351!5m2!1ses!2ses"
+                width="350" height="250" style="border:0;" allowfullscreen="" loading="lazy"
+                referrerpolicy="no-referrer-when-downgrade"></iframe>
+            </div>
+          </div>
+          <div class="col-12 col-md-4">
+            <figure>
+              <img src="Resources\Icons\ubi.png" alt="">
+              <figcaption>Av. de la Innovación, 7-9, Edificio Arena, 2, 41020 Sevilla</figcaption>
+            </figure>
+            <!--  -->
+            <figure>
+              <img src="Resources\Icons\telefono.png" alt="">
+              <figcaption>954 04 12 12</figcaption>
+            </figure>
+            <!--  -->
+            <figure>
+              <img src="Resources\Icons\clock.png" alt="">
+              <figcaption>L-V 8:30- 14:30 <br> L-V 15:00- 22:00</figcaption>
+            </figure>
+          </div>
+          <div class="col-12 col-md-4">
+            <div class="text-left">
+              <p>
+                <a href="mailto:correo1@example.com" class="correo-link">ilernaonline@gmail.com</a>
+                <br>
+                <a href="mailto:correo2@example.com" class="correo-link">ilernaandalucia@gmail.com</a>
+                <br>
+                Preguntas frecuentes
+              </p>
+            </div>
+          </div>
+        </div>
+        <!-- Línea horizontal -->
+        <div class="col-12">
+          <hr class="bg-white">
+        </div>
+
+        <!-- Bloque 3: Políticas de Privacidad y Cookies -->
+        <div class="row my-3">
+          <div class="col-md-7 text-center ">
+            <div>
+              <a class="text-light" href="#">Política de Privacidad</a>
+            </div>
+          </div>
+          <div class="col-md-3 text-center">
+            <div>
+              <a class="text-light" href="#">Política de Cookies</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </footer>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/js/mk.js b/js/mk.js
new file mode 100644
index 0000000..63b8f9c
--- /dev/null
+++ b/js/mk.js
@@ -0,0 +1,29 @@
+document.addEventListener('DOMContentLoaded', function() {
+  const cards = document.querySelectorAll('.interactiveCard');
+  
+  cards.forEach(card => {
+    card.style.transform = 'scale(0)';
+    setTimeout(() => {
+      card.style.transform = 'scale(1)';
+      card.style.transition = 'transform 0.5s ease';
+    }, 300);
+
+    const toggleDetailsBtn = card.querySelector('.toggleDetails');
+    const infoElements = card.querySelectorAll('.card-info p, .card-info h5');
+    let detailsVisible = false;
+
+    toggleDetailsBtn.addEventListener('click', function() {
+      detailsVisible = !detailsVisible;
+      infoElements.forEach((element, index) => {
+        if (detailsVisible) {
+          setTimeout(() => {
+            element.classList.add('active');
+          }, 100 * index); // Retraso incremental para cada elemento
+        } else {
+          element.classList.remove('active');
+        }
+      });
+      this.textContent = detailsVisible ? 'Ocultar Detalles' : 'Mostrar Detalles';
+    });
+  });
+});
diff --git a/marketingPublicidad.html b/marketingPublicidad.html
index d5dfa9c..ce6491d 100644
--- a/marketingPublicidad.html
+++ b/marketingPublicidad.html
@@ -2,462 +2,334 @@
 <html lang="es">
 
 <head>
-    <title>Ilerna Staff</title>
-    <!-- Required meta tags -->
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <title>Ilerna Staff</title>
+  <!-- Required meta tags -->
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
-    <!-- Bootstrap -->
-    <link rel="stylesheet" href="css/bootstrap.css">
-    <link rel="stylesheet" href="css/style.css">
-    <link rel="shortcut icon" href="Resources/img/logo/ilerna_Staff_Amarillo.png" type="image/x-icon">
+  <!-- Bootstrap -->
+  <link rel="stylesheet" href="css/bootstrap.css">
+  <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="css/mk.css">
+  <link rel="shortcut icon" href="Resources/img/logo/ilerna_Staff_Amarillo.png" type="image/x-icon">
 
-    <script defer src="js/bootstrap.bundle.js"></script>
+  <script defer src="js/bootstrap.bundle.js"></script>
+
+  <script defer src="js/mk.js"></script>
 </head>
 
 <body>
-    <header>
-      <nav class="navbar navbar-expand-lg navbar-light bg-blueilerna custom-navbar">
-        <div class="container-xxl">
-            <a class="navbar-brand" href="index.html">
-                <img src="Resources/img/logo/ilerna_Staff_Amarillo.png" alt="Logo" width="150" height="55">
-            </a>
-  
-            <!--NO BORRAR BOTÓN DE MOVIL-->
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
-                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-                <span class="navbar-toggler-icon">
-                    <span class="linea"></span>
-                    <span class="linea"></span>
-                    <span class="linea"></span>
-                </span>
-            </button>
-  
-            <div class="collapse navbar-collapse" id="navbarNav">
-                <ul class="navbar-nav ml-auto menu-derecha">
-                    <li class="nav-item active">
-                        <a class="nav-link text-white" href="index.html">Inicio</a>
-                    </li>
-                    <li class="nav-item has-submenu">
-                        <a class="nav-link text-white" href="#">Familias educativas <class="arrow-down-custom">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
-                                    fill="currentColor" class="custom-arrow" viewBox="0 0 16 16">
-                                    <path
-                                        d="M4.646 6.146a.5.5 0 01.708 0L8 9.793l2.646-2.647a.5.5 0 01.708 0 .5.5 0 010 .708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 010-.708z" />
-                                </svg>
-                        </a>
-                        <ul class="submenu">
-                            <div class="container overflow-auto">
-                              <li class="nav-item dropdown">
-                                <a class="nav-link dropdown-toggle bg-blueilerna" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                  Sanidad
-                                </a>
-                                <ul class="dropdown-menu bg-blueilerna">
-                                  <li><a class="dropdown-item " href="Sanidad_Anatomia.html">Anatomía
-                                    Patológica y  <br> Citodiagnóstico</a></li>
-                                  <li><a class="dropdown-item" href="Sanidad_Audiologia.html">Audiología Protésica</a></li>
-                                  <li><a class="dropdown-item" href="Sanidad_Aux_Enfermeria.html">Auxiliar de Enfermería</a></li>
-                                  <li><a class="dropdown-item" href="Sanidad_Dietetica.html">Dietética</a></li>
-                                  <li><a class="dropdown-item" href="Sanidad_Imagenydiasnostico.html">Imagen para el Diagnóstico y <br> Medicina Nuclear</a></li>
-                                  <li><a class="dropdown-item" href="sanidad_laboratorio.html">Laboratorio Clínico y <br>Biomédico</a></li>
-                                  <li><a class="dropdown-item" href="Sanidad_Protesis.html">Prótesis Dental</a></li>
-  
-  
-                                </ul>
-                              </li>
-                              
-                              <li class="nav-item dropdown">
-                                <a class="nav-link dropdown-toggle bg-blueilerna" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                  Comercio y Marketing
-                                </a>
-                                <ul class="dropdown-menu bg-blueilerna">
-                                  <li><a class="dropdown-item " href="marketingPublicidad.html"> Marketing y Publicidad</a></li>
-                                </ul>
-                              </li>
-                              <li class="nav-item dropdown">
-                                <a class="nav-link dropdown-toggle bg-blueilerna" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                  Administración y Gestión
-                                </a>
-                                <ul class="dropdown-menu bg-blueilerna">
-                                  <li><a class="dropdown-item " href="administracionFinanzas.html"> Administración y Finanzas</a></li>
-                                </ul>
-                              </li>
-                              <li class="nav-item dropdown">
-                                <a class="nav-link dropdown-toggle bg-blueilerna" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                  Informática
-                                </a>
-                                <ul class="dropdown-menu bg-blueilerna">
-                                  <li><a class="dropdown-item " href="informatica_y_telecomunicaciones_desarrollo_de_aplicaciones_web.html"> Desarrollo de Aplicaciones  <br>Web</a></li>
-                                  <li><a class="dropdown-item " href="informatica_y_telecomunicaciones_desarrollo_de_aplicaciones_multiplataforma.html"> Desarrollo de Aplicaciones  <br>Multiplataforma</a></li>
-  
-                                </ul>
-                              </li>
-                              <li class="nav-item dropdown">
-                                <a class="nav-link dropdown-toggle bg-blueilerna" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                  Imagen y Sonido
-                                </a>
-                                <ul class="dropdown-menu bg-blueilerna">
-                                  <li><a class="dropdown-item " href="administracionFinanzas.html"> 3D,Juegos y <br> Entornos Interactivos</a></li>
-                                </ul>
-                              </li>
-                              <li class="nav-item dropdown">
-                                <a class="nav-link dropdown-toggle bg-blueilerna" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                    Servicios Socioculturales
-                                </a>
-                                <ul class="dropdown-menu bg-blueilerna">
-                                  <li><a class="dropdown-item " href="integracionsocial.html"> Integracion Social</a></li>
-                                  <li><a class="dropdown-item " href="administracionFinanzas.html"> Educacion Infantil</a></li>
+  <header>
+    <nav class="navbar navbar-expand-lg navbar-light bg-blueilerna custom-navbar">
+      <div class="container-xxl">
+        <a class="navbar-brand" href="index.html">
+          <img src="Resources/img/logo/ilerna_Staff_Amarillo.png" alt="Logo" width="150" height="55">
+        </a>
 
-                                </ul>
-                              </li>
-                            </div>
-                        </ul>
-                    </li>
-                    <li class="nav-item small">
-                        <a class="nav-link text-white" href="Transversal_Transversal.html">Transversales</a>
-                    </li>
-                    <li class="nav-item small">
-                        <a class="nav-link text-white" href="adminCentro_direccion.html">Administración</a>
-                    </li>
-                    <li class="nav-item small">
-                        <a class="nav-link text-white" href="adminCentro_personal.html">Mantenimientos y
-                            servicios</a>
-                        </li>
-                        <li class="nav-item small">
-                            <a class="nav-link text-white" href="voluntariado.html">Voluntariado</a>
-                        </li>
-                </ul>
-            </div>
-        </div>
-    </nav>
-      </header>
-    <main>
-        <!-- Hero -->
-        <div id="hero" class="p-5 text-center">
-            <div class="container">
-                <div class="row">
-                    <div class="col-md-12">
-                        <div class="d-flex justify-content-center align-items-center h-100">
-                            <div class="text-black">
-                                <h1 class="mb-3">Marketing y publicidad</h1>
-                                <p class="mb-3">¿Te gustaría trabajar en un sector dinámico y con interesantes cifras de inserción laboral? Obtén la titulación oficial
-                                de Técnico Superior en Marketing y Publicidad en ILERNA y ¡lánzate hacia tu futuro profesional! A lo largo de esta FP
-                                aprenderás desde cómo elaborar un plan de marketing y preparar diferentes materiales de comunicación hasta técnicas de
-                                investigación, gestión financiera… ¡Y mucho más! Podrás poner en práctica tus conocimientos en nuestras aulas equipadas
-                                con la última tecnología.</p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-       
+        <!--NO BORRAR BOTÓN DE MOVIL-->
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+          aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon">
+            <span class="linea"></span>
+            <span class="linea"></span>
+            <span class="linea"></span>
+          </span>
+        </button>
 
-        <!--CARD-->
-        <!--! container sin fluid , mt-2 -->
-        <div class="container p-5 mt-2">
-            <!--! sin p-5 psm-0 p-md-0 p-lg-5-->
-            <div class="row justify-content-center align-items-center p-sm-0 p-md-0 p-lg-5 "><!-- disminuir p-->
+        <div class="collapse navbar-collapse" id="navbarNav">
+          <ul class="navbar-nav ml-auto menu-derecha">
+            <li class="nav-item active">
+              <a class="nav-link text-white" href="index.html">Inicio</a>
+            </li>
+            <li class="nav-item has-submenu">
+              <a class="nav-link text-white" href="#">Familias educativas <class="arrow-down-custom">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
+                    class="custom-arrow" viewBox="0 0 16 16">
+                    <path
+                      d="M4.646 6.146a.5.5 0 01.708 0L8 9.793l2.646-2.647a.5.5 0 01.708 0 .5.5 0 010 .708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 010-.708z" />
+                  </svg>
+              </a>
+              <ul class="submenu">
+                <div class="container overflow-auto">
+                  <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle bg-blueilerna" href="#" role="button" data-bs-toggle="dropdown"
+                      aria-expanded="false">
+                      Sanidad
+                    </a>
+                    <ul class="dropdown-menu bg-blueilerna">
+                      <li><a class="dropdown-item " href="Sanidad_Anatomia.html">Anatomía
+                          Patológica y <br> Citodiagnóstico</a></li>
+                      <li><a class="dropdown-item" href="Sanidad_Audiologia.html">Audiología Protésica</a></li>
+                      <li><a class="dropdown-item" href="Sanidad_Aux_Enfermeria.html">Auxiliar de Enfermería</a></li>
+                      <li><a class="dropdown-item" href="Sanidad_Dietetica.html">Dietética</a></li>
+                      <li><a class="dropdown-item" href="Sanidad_Imagenydiasnostico.html">Imagen para el Diagnóstico y
+                          <br> Medicina Nuclear</a></li>
+                      <li><a class="dropdown-item" href="sanidad_laboratorio.html">Laboratorio Clínico y
+                          <br>Biomédico</a></li>
+                      <li><a class="dropdown-item" href="Sanidad_Protesis.html">Prótesis Dental</a></li>
 
-                <div class="col-12 col-md-12 col-lg-12 g-5">
-                    <div
-                        class="row rounded-5 justify-content-center align-items-center card-shadow p-4 bg-card border border-1 border-color ">
-                        <div class="col-12 col-md-12 col-lg-6 text-center p-3">
-                            <img src="Resources/img/placeholder/placeholder_mujer.jpg" class="img-fluid rounded-3">
-                            <div class="container">
-                                <div class="row justify-content-center align-items-center g-2 mt-2">
-                                    <!--! PONER NOMBRE DEL PROFE PARA EVITAR CONFLICTOS EN BG-BADGE-->
-                                    <h1 class="col-12 text-center">Paula Fernández Navarro<span
-                                            class="badge rounded-pill badge-size bg-badge-turquoise align-middle">☆</span>
-                                    </h1>
-                                    <h4 class="col-12 text-center">Profesora</h4>
-                                </div>
 
-                            </div>
+                    </ul>
+                  </li>
 
-                        </div>
-                        <!--! añadido id remove_mobile-->
-                        <div class="col-12 col-md-12 col-lg-6" id="remove_mobile">
-                            <div class="row justify-content-center align-items-center align-middle g-2">
-                                <div
-                                    class="col-12 text-center container bg-dark border border-color border-1 rounded-3 px-1 my-4  ">
-                                    <div class="container bg-card rounded-top mt-1">
-                                        <h4 class="pt-2">Formación</h4>
-                                        <p class="text-break pb-1 mb-1"> Grado en Estudios Ingleses</p>
-                                    </div>
-                                    <div class="container bg-card">
-                                        <h4 class="pt-2">Hobbies</h4>
-                                        <p class="text-break pb-1 mb-1">Música, Lectura, Playa, Amigos</p>
-                                    </div>
-                                    <div class="container bg-card">
-                                        <h4 class="pt-2">Frase que te represente</h4>
-                                        <p class="text-break pb-1 mb-1">"Insistir, persistir, resistir y nunca desistir "</p>
-                                    </div>
-                                    <div class="container bg-card rounded-bottom ">
-                                        <h4 class="pt-2">Algo sobre ti</h4>
-                                        <p class="text-break pb-1 mb-1">Mi nombre es Paula Fernández y mi vocación siempre fue la enseñanza. Me considero filóloga, lingüista, amante de las
-                                        letras y apasionada de la literatura y la historia. Mis alumnos son mi mayor éxito.</p>
-                                    </div>
+                  <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle bg-blueilerna" href="#" role="button" data-bs-toggle="dropdown"
+                      aria-expanded="false">
+                      Comercio y Marketing
+                    </a>
+                    <ul class="dropdown-menu bg-blueilerna">
+                      <li><a class="dropdown-item " href="marketingPublicidad.html"> Marketing y Publicidad</a></li>
+                    </ul>
+                  </li>
+                  <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle bg-blueilerna" href="#" role="button" data-bs-toggle="dropdown"
+                      aria-expanded="false">
+                      Administración y Gestión
+                    </a>
+                    <ul class="dropdown-menu bg-blueilerna">
+                      <li><a class="dropdown-item " href="administracionFinanzas.html"> Administración y Finanzas</a>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle bg-blueilerna" href="#" role="button" data-bs-toggle="dropdown"
+                      aria-expanded="false">
+                      Informática
+                    </a>
+                    <ul class="dropdown-menu bg-blueilerna">
+                      <li><a class="dropdown-item "
+                          href="informatica_y_telecomunicaciones_desarrollo_de_aplicaciones_web.html"> Desarrollo de
+                          Aplicaciones <br>Web</a></li>
+                      <li><a class="dropdown-item "
+                          href="informatica_y_telecomunicaciones_desarrollo_de_aplicaciones_multiplataforma.html">
+                          Desarrollo de Aplicaciones <br>Multiplataforma</a></li>
 
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+                    </ul>
+                  </li>
+                  <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle bg-blueilerna" href="#" role="button" data-bs-toggle="dropdown"
+                      aria-expanded="false">
+                      Imagen y Sonido
+                    </a>
+                    <ul class="dropdown-menu bg-blueilerna">
+                      <li><a class="dropdown-item " href="administracionFinanzas.html"> 3D,Juegos y <br> Entornos
+                          Interactivos</a></li>
+                    </ul>
+                  </li>
+                  <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle bg-blueilerna" href="#" role="button" data-bs-toggle="dropdown"
+                      aria-expanded="false">
+                      Servicios Socioculturales
+                    </a>
+                    <ul class="dropdown-menu bg-blueilerna">
+                      <li><a class="dropdown-item " href="integracionsocial.html"> Integracion Social</a></li>
+                      <li><a class="dropdown-item " href="administracionFinanzas.html"> Educacion Infantil</a></li>
 
+                    </ul>
+                  </li>
                 </div>
-
-            </div>
-
-        </div>
-
-        <!--! container sin fluid , mt-2 -->
-        <div class="container p-5 mt-2">
-            <!--! sin p-5 psm-0 p-md-0 p-lg-5-->
-            <div class="row justify-content-center align-items-center p-sm-0 p-md-0 p-lg-5 "><!-- disminuir p-->
-        
-                <div class="col-12 col-md-12 col-lg-12 g-5">
-                    <div
-                        class="row rounded-5 justify-content-center align-items-center card-shadow p-4 bg-card border border-1 border-color ">
-                        <div class="col-12 col-md-12 col-lg-6 text-center p-3">
-                            <img src="Resources/img/img_Personal-4-3/jessica_DxO.jpg" class="img-fluid rounded-3">
-                            <div class="container">
-                                <div class="row justify-content-center align-items-center g-2 mt-2">
-                                    <!--! PONER NOMBRE DEL PROFE PARA EVITAR CONFLICTOS EN BG-BADGE-->
-                                    <h1 class="col-12 text-center">Jessica Álvarez Tirado<span
-                                            class="badge rounded-pill badge-size bg-badge-Yellow align-middle">☆</span>
-                                    </h1>
-                                    <h4 class="col-12 text-center">Profesora</h4>
-                                </div>
-        
-                            </div>
-        
-                        </div>
-                        <!--! añadido id remove_mobile-->
-                        <div class="col-12 col-md-12 col-lg-6" id="remove_mobile">
-                            <div class="row justify-content-center align-items-center align-middle g-2">
-                                <div
-                                    class="col-12 text-center container bg-dark border border-color border-1 rounded-3 px-1 my-4  ">
-                                    <div class="container bg-card rounded-top mt-1">
-                                        <h4 class="pt-2">Formación</h4>
-                                        <p class="text-break pb-1 mb-1"> Ciencias empresariales. Máster en formación del profesorado de educación secundaria y bachillerato</p>
-                                    </div>
-                                    <div class="container bg-card">
-                                        <h4 class="pt-2">Hobbies</h4>
-                                        <p class="text-break pb-1 mb-1"> Literatura, arte, pintar con acuarelas, journaling</p>
-                                    </div>
-                                    <div class="container bg-card">
-                                        <h4 class="pt-2">Frase que te represente</h4>
-                                        <p class="text-break pb-1 mb-1">"Be like schwa, it's never stressed"</p>
-                                    </div>
-                                    <div class="container bg-card rounded-bottom ">
-                                        <h4 class="pt-2">Algo sobre ti</h4>
-                                        <p class="text-break pb-1 mb-1">Mi nombre es Paula Fernández y mi vocación siempre fue
-                                            la enseñanza. Me considero filóloga, lingüista, amante de las
-                                            letras y apasionada de la literatura y la historia. Mis alumnos son mi mayor éxito.
-                                        </p>
-                                    </div>
-        
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-        
-                </div>
-        
-            </div>
-        
+              </ul>
+            </li>
+            <li class="nav-item small">
+              <a class="nav-link text-white" href="Transversal_Transversal.html">Transversales</a>
+            </li>
+            <li class="nav-item small">
+              <a class="nav-link text-white" href="adminCentro_direccion.html">Administración</a>
+            </li>
+            <li class="nav-item small">
+              <a class="nav-link text-white" href="adminCentro_personal.html">Mantenimientos y
+                servicios</a>
+            </li>
+            <li class="nav-item small">
+              <a class="nav-link text-white" href="voluntariado.html">Voluntariado</a>
+            </li>
+          </ul>
         </div>
-        <!--CARD-->
-        <!--! container sin fluid , mt-2 -->
-        <div class="container p-5 mt-2">
-            <!--! sin p-5 psm-0 p-md-0 p-lg-5-->
-            <div class="row justify-content-center align-items-center p-sm-0 p-md-0 p-lg-5 "><!-- disminuir p-->
-        
-                <div class="col-12 col-md-12 col-lg-12 g-5">
-                    <div
-                        class="row rounded-5 justify-content-center align-items-center card-shadow p-4 bg-card border border-1 border-color ">
-                        <div class="col-12 col-md-12 col-lg-6 text-center p-3">
-                            <img src="Resources/img/placeholder/placeholder_mujer.jpg" class="img-fluid rounded-3">
-                            <div class="container">
-                                <div class="row justify-content-center align-items-center g-2 mt-2">
-                                    <!--! PONER NOMBRE DEL PROFE PARA EVITAR CONFLICTOS EN BG-BADGE-->
-                                    <h1 class="col-12 text-center">Teresa Corrales <span
-                                            class="badge rounded-pill badge-size bg-badge-virginia align-middle">☆</span></h1>
-                                    <h4 class="col-12 text-center">Profesora</h4>
-                                </div>
-        
-                            </div>
-        
-                        </div>
-                        <!--! añadido id remove_mobile-->
-                        <div class="col-12 col-md-12 col-lg-6" id="remove_mobile">
-                            <div class="row justify-content-center align-items-center align-middle g-2">
-                                <div
-                                    class="col-12 text-center container bg-dark border border-color border-1 rounded-3 px-1 my-4  ">
-                                    <div class="container bg-card rounded-top mt-1">
-                                        <h4 class="pt-2">Formación</h4>
-                                        <p class="text-break pb-1 mb-1"> sssssssssssssssss</p>
-                                    </div>
-                                    <div class="container bg-card">
-                                        <h4 class="pt-2">Hobbies</h4>
-                                        <p class="text-break pb-1 mb-1"> Lorem ipsum dolor, sit amet consectetur adipisicing
-                                            elit. Debitis
-                                            molestiae facilis maiores eveniet nisi fugiat! Mollitia maxime quae, magni tenetur
-                                            libero soluta
-                                            asperiores magnam illo distinctio explicabo voluptas perferendis autem.</p>
-                                    </div>
-                                    <div class="container bg-card">
-                                        <h4 class="pt-2">Frase que te represente</h4>
-                                        <p class="text-break pb-1 mb-1">Lorem ipsum dolor, sit amet consectetur adipisicing
-                                            elit. Debitis
-                                            molestiae facilis maiores eveniet nisi fugiat! Mollitia maxime quae, magni tenetur
-                                            libero soluta
-                                            asperiores magnam illo distinctio explicabo voluptas</p>
-                                    </div>
-                                    <div class="container bg-card rounded-bottom ">
-                                        <h4 class="pt-2">Algo sobre ti</h4>
-                                        <p class="text-break pb-1 mb-1">Lorem ipsum dolor, sit amet consectetur adipisicing
-                                            elit. Debitis
-                                            molestiae facilis maiores eveniet nisi fugiat! Mollitia maxime quae, magni tenetur
-                                            libero soluta
-                                            asperiores magnam illo distinctio explicabo voluptas</p>
-                                    </div>
-        
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-        
-                </div>
-        
-            </div>
-        
-        </div>
-        <!--CARD-->
-    <!--! container sin fluid , mt-2 -->
-    <div class="container p-5 mt-2">
-      <!--! sin p-5 psm-0 p-md-0 p-lg-5-->
-      <div  class="row justify-content-center align-items-center p-sm-0 p-md-0 p-lg-5 "><!-- disminuir p-->
-
-        <div class="col-12 col-md-12 col-lg-12 g-5">
-          <div
-            class="row rounded-5 justify-content-center align-items-center card-shadow p-4 bg-card border border-1 border-color ">
-            <div class="col-12 col-md-12 col-lg-6 text-center p-3">
-              <img src="Resources/img/placeholder/placeholder_hombre.jpg" class="img-fluid rounded-3">
-              <div class="container">
-                <div class="row justify-content-center align-items-center g-2 mt-2">
-                  <!--! PONER NOMBRE DEL PROFE PARA EVITAR CONFLICTOS EN BG-BADGE-->
-                  <h1 class="col-12 text-center">Pablo Cenizo<span
-                      class="badge rounded-pill badge-size bg-badge-virginia align-middle">☆</span></h1>
-                  <h4 class="col-12 text-center">Profesor</h4>
-                </div>
-
-              </div>
-
-            </div>
-            <!--! añadido id remove_mobile-->
-            <div class="col-12 col-md-12 col-lg-6" id="remove_mobile">
-              <div class="row justify-content-center align-items-center align-middle g-2">
-                <div class="col-12 text-center container bg-dark border border-color border-1 rounded-3 px-1 my-4  ">
-                  <div class="container bg-card rounded-top mt-1">
-                    <h4 class="pt-2">Formación</h4>
-                    <p class="text-break pb-1 mb-1"> sssssssssssssssss</p>
-                  </div>
-                  <div class="container bg-card">
-                    <h4 class="pt-2">Hobbies</h4>
-                    <p class="text-break pb-1 mb-1"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis
-                      molestiae facilis maiores eveniet nisi fugiat! Mollitia maxime quae, magni tenetur libero soluta
-                      asperiores magnam illo distinctio explicabo voluptas perferendis autem.</p>
-                  </div>
-                  <div class="container bg-card">
-                    <h4 class="pt-2">Frase que te represente</h4>
-                    <p class="text-break pb-1 mb-1">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis
-                      molestiae facilis maiores eveniet nisi fugiat! Mollitia maxime quae, magni tenetur libero soluta
-                      asperiores magnam illo distinctio explicabo voluptas</p>
-                  </div>
-                  <div class="container bg-card rounded-bottom ">
-                    <h4 class="pt-2">Algo sobre ti</h4>
-                    <p class="text-break pb-1 mb-1">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis
-                      molestiae facilis maiores eveniet nisi fugiat! Mollitia maxime quae, magni tenetur libero soluta
-                      asperiores magnam illo distinctio explicabo voluptas</p>
-                  </div>
-
-                </div>
+      </div>
+    </nav>
+  </header>
+  <main>
+    <!-- Hero -->
+    <div id="hero" class="p-5 text-center">
+      <div class="container">
+        <div class="row">
+          <div class="col-md-12">
+            <div class="d-flex justify-content-center align-items-center h-100">
+              <div class="text-black">
+                <h1 class="mb-3">Marketing y publicidad</h1>
+                <p class="mb-3">¿Te gustaría trabajar en un sector dinámico y con interesantes cifras de inserción
+                  laboral? Obtén la titulación oficial
+                  de Técnico Superior en Marketing y Publicidad en ILERNA y ¡lánzate hacia tu futuro profesional! A lo
+                  largo de esta FP
+                  aprenderás desde cómo elaborar un plan de marketing y preparar diferentes materiales de comunicación
+                  hasta técnicas de
+                  investigación, gestión financiera… ¡Y mucho más! Podrás poner en práctica tus conocimientos en
+                  nuestras aulas equipadas
+                  con la última tecnología.</p>
               </div>
             </div>
           </div>
-
         </div>
-
       </div>
-      
     </div>
 
-    </main>
-    <footer class="bg-dark text-light py-3 bg-blueilerna custom-navbar">
-        <div class="container">
-          <div class="row my-4">
-    
-            <!-- Línea horizontal -->
-            <div class="col-12 mb-2">
-              <hr class="bg-white">
-            </div>
-            <!-- Bloque 2: Información de Contacto (dividido en 3 columnas iguales con texto alineado a la izquierda) -->
-            <div class="row my-3">
-              <div class="col-12 col-md-4">
-                <div class="text-left">
-                  <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12678.079767245528!2d-5.9385033!3d37.4011837!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1269414d8c133d%3A0x498ce95cde9f9931!2sILERNA%20Sevilla!5e0!3m2!1ses!2ses!4v1701699015351!5m2!1ses!2ses" width="350" height="250" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
-                </div>
+    <div class="container">
+      <div class="card interactiveCard mb-3">
+          <div class="card-header">
+              <img src="Resources/img/placeholder/placeholder_mujer.jpg" alt="Foto de Paula Fernández Navarro" class="card-img">
+          </div>
+          <div class="card-body">
+              <h1 class="card-title">Paula Fernández Navarro <span class="badge" style="background-color: turquoise; color: black;">☆</span></h1>
+              <p class="card-subtitle">Profesora</p>
+              <div class="card-info">
+                  <h5>Formación</h5>
+                  <p>Grado en Estudios Ingleses.</p>
+                  <h5>Hobbies</h5>
+                  <p>Literatura, arte, pintar con acuarelas, journaling.</p>
+                  <h5>Frase que te represente</h5>
+                  <p>"Be like schwa, it's never stressed".</p>
+                  <h5>Algo sobre ti</h5>
+                  <p>Mi nombre es Paula Fernández y mi vocación siempre fue la enseñanza. Me considero filóloga, lingüista, amante de las letras y apasionada de la literatura y la historia. Mis alumnos son mi mayor éxito.</p>
               </div>
-              <div class="col-12 col-md-4">
-                <figure>
-                  <img src="Resources\Icons\ubi.png" alt="">
-                  <figcaption>Av. de la Innovación, 7-9, Edificio Arena, 2, 41020 Sevilla</figcaption>
-                 </figure>
-                <!--  -->
-                <figure>
-                  <img src="Resources\Icons\telefono.png" alt="">
-                  <figcaption>954 04 12 12</figcaption>
-                 </figure>
-                 <!--  -->
-                 <figure>
-                  <img src="Resources\Icons\clock.png" alt="">
-                  <figcaption>L-V 8:30- 14:30 <br> L-V 15:00- 22:00</figcaption>
-                 </figure>
+              <button class="toggleDetails btn" style="margin-top: 20px;">Mostrar Detalles</button>
+          </div>
+      </div>
+  
+      <div class="card interactiveCard mb-3">
+          <div class="card-header">
+              <img src="Resources/img/img_Personal-4-3/jessica_DxO.jpg" alt="Foto de Jessica Álvarez Tirado" class="card-img">
+          </div>
+          <div class="card-body">
+              <h1 class="card-title">Jessica Álvarez Tirado <span class="badge" style="background-color: #ffffff; color: black;">☆</span></h1>
+              <p class="card-subtitle">Profesora</p>
+              <div class="card-info">
+                  <h5>Formación</h5>
+                  <p>Ciencias empresariales. Máster en formación del profesorado de educación secundaria y bachillerato.</p>
+                  <h5>Hobbies</h5>
+                  <p></p>
+                  <h5>Frase que te represente</h5>
+                  <p>""</p>
+                  <h5>Algo sobre ti</h5>
+                  <p></p>
               </div>
-              <div class="col-12 col-md-4">
-                <div class="text-left">
-                  <p>
-                    <a href="mailto:correo1@example.com" class="correo-link">ilernaonline@gmail.com</a>
-                    <br>
-                    <a href="mailto:correo2@example.com" class="correo-link">ilernaandalucia@gmail.com</a>
-                    <br>
-                    Preguntas frecuentes
-                  </p>
-                </div>
+              <button class="toggleDetails btn" style="margin-top: 20px;">Mostrar Detalles</button>
+          </div>
+      </div>
+  
+      <div class="card interactiveCard mb-3">
+          <div class="card-header">
+              <img src="Resources/img/personal/teresa.jpg" alt="Foto de Teresa Corrales Guerrero" class="card-img">
+          </div>
+          <div class="card-body">
+              <h1 class="card-title">Teresa Corrales Guerrero <span class="badge" style="background-color: green; color: black;">☆</span></h1>
+              <p class="card-subtitle">Profesora</p>
+              <div class="card-info">
+                  <h5>Formación</h5>
+                  <p>Graduada en economía y periodismo.</p>
+                  <h5>Hobbies</h5>
+                  <p>Música y pádel.</p>
+                  <h5>Frase que te represente</h5>
+                  <p>"Acho, callarse ya!".</p>
+                  <h5>Algo sobre ti</h5>
+                  <p>Exigente y perfeccionista.</p>
               </div>
+              <button class="toggleDetails btn" style="margin-top: 20px;">Mostrar Detalles</button>
+          </div>
+      </div>
+  
+      <div class="card interactiveCard mb-3">
+          <div class="card-header">
+              <img src="Resources/img/personal/pablocenizo.jpg" alt="Foto de Pablo Cenizo Reino" class="card-img">
+          </div>
+          <div class="card-body">
+              <h1 class="card-title">Pablo Cenizo Reino <span class="badge" style="background-color: red; color: black;">☆</span></h1>
+              <p class="card-subtitle">Profesor</p>
+              <div class="card-info">
+                  <h5>Formación</h5>
+                  <p>Ldo. Periodismo.</p>
+                  <h5>Hobbies</h5>
+                  <p>Música, conciertos, cine, fútbol americano, baloncesto.</p>
+                  <h5>Frase que te represente</h5>
+                  <p>"Maybe tomorrow I'll find my way home (Stereophonics)".</p>
+                  <h5>Algo sobre ti</h5>
+                  <p>Enamorado de la docencia, de poder ayudar a crear ilusiones y futuros.</p>
+              </div>
+              <button class="toggleDetails btn" style="margin-top: 20px;">Mostrar Detalles</button>
+          </div>
+      </div>
+  </div>
+  
+    </div>
+
+
+  </main>
+  <footer class="bg-dark text-light py-3 bg-blueilerna custom-navbar">
+    <div class="container">
+      <div class="row my-4">
+
+        <!-- Línea horizontal -->
+        <div class="col-12 mb-2">
+          <hr class="bg-white">
+        </div>
+        <!-- Bloque 2: Información de Contacto (dividido en 3 columnas iguales con texto alineado a la izquierda) -->
+        <div class="row my-3">
+          <div class="col-12 col-md-4">
+            <div class="text-left">
+              <iframe
+                src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12678.079767245528!2d-5.9385033!3d37.4011837!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd1269414d8c133d%3A0x498ce95cde9f9931!2sILERNA%20Sevilla!5e0!3m2!1ses!2ses!4v1701699015351!5m2!1ses!2ses"
+                width="350" height="250" style="border:0;" allowfullscreen="" loading="lazy"
+                referrerpolicy="no-referrer-when-downgrade"></iframe>
             </div>
-            <!-- Línea horizontal -->
-            <div class="col-12">
-              <hr class="bg-white">
+          </div>
+          <div class="col-12 col-md-4">
+            <figure>
+              <img src="Resources\Icons\ubi.png" alt="">
+              <figcaption>Av. de la Innovación, 7-9, Edificio Arena, 2, 41020 Sevilla</figcaption>
+            </figure>
+            <!--  -->
+            <figure>
+              <img src="Resources\Icons\telefono.png" alt="">
+              <figcaption>954 04 12 12</figcaption>
+            </figure>
+            <!--  -->
+            <figure>
+              <img src="Resources\Icons\clock.png" alt="">
+              <figcaption>L-V 8:30- 14:30 <br> L-V 15:00- 22:00</figcaption>
+            </figure>
+          </div>
+          <div class="col-12 col-md-4">
+            <div class="text-left">
+              <p>
+                <a href="mailto:correo1@example.com" class="correo-link">ilernaonline@gmail.com</a>
+                <br>
+                <a href="mailto:correo2@example.com" class="correo-link">ilernaandalucia@gmail.com</a>
+                <br>
+                Preguntas frecuentes
+              </p>
             </div>
-    
-            <!-- Bloque 3: Políticas de Privacidad y Cookies -->
-            <div class="row my-3">
-              <div class="col-md-7 text-center ">
-                <div>
-                  <a class="text-light" href="#">Política de Privacidad</a>
-                </div>
-              </div>
-              <div class="col-md-3 text-center">
-                <div>
-                  <a class="text-light" href="#">Política de Cookies</a>
-                </div>
-              </div>
+          </div>
+        </div>
+        <!-- Línea horizontal -->
+        <div class="col-12">
+          <hr class="bg-white">
+        </div>
+
+        <!-- Bloque 3: Políticas de Privacidad y Cookies -->
+        <div class="row my-3">
+          <div class="col-md-7 text-center ">
+            <div>
+              <a class="text-light" href="#">Política de Privacidad</a>
+            </div>
+          </div>
+          <div class="col-md-3 text-center">
+            <div>
+              <a class="text-light" href="#">Política de Cookies</a>
             </div>
           </div>
         </div>
-      </footer>
+      </div>
+    </div>
+  </footer>
 </body>
 
 </html>