actualizacion de imagenes y se agrego la leyenda que se solicito

contenido/05.html

@@ -151,7 +151,7 @@
           <div class="col-12 mb-3 px-0">
             <div class="card bg-rosa-lavanda border-0 rounded-0 shadow p-3">
               <div class="row justify-content-center">
-                <div class="col-12 mb-3">
+                <div class="col-12">
                   <div class="d-flex flex-row justify-content-center align-items-center gap-3">
                     <img src="img/book1.png" class="img-fluid" />
                     <p class="mb-0">

css/theme.scss

@@ -1,22 +1,23 @@
 // Import Bootstrap functions, variables, and mixins
-@import '../bootstrap-5.2.3/scss/functions';
+@import "../bootstrap-5.2.3/scss/functions";
-@import '../bootstrap-5.2.3/scss/variables';
+@import "../bootstrap-5.2.3/scss/variables";
-@import '../bootstrap-5.2.3/scss/mixins';
+@import "../bootstrap-5.2.3/scss/mixins";
 
 // Definir colores personalizados
 $custom-colors: (
-  'rosa-lavanda': #ede3ec,
+  "rosa-lavanda": #ede3ec,
-  'lila-rosa': #d8c4d6,
+  "lila-rosa": #d8c4d6,
-  'verde-ceniza': #84a79c,
+  "verde-ceniza": #84a79c,
-  'verde-oscuro': #105742,
+  "verde-oscuro": #105742,
-  'verde-pino': #4c8071,
+  "verde-pino": #4c8071,
-  'verde-pasto': #84a816,
+  "verde-pasto": #84a816,
-  'verde-claro': #d6e3da,
+  "verde-claro": #d6e3da,
-  'verde-gris': #cadcd4,
+  "verde-gris": #cadcd4,
-  'verde-claro-2': #b3cdb9,
+  "verde-claro-2": #b3cdb9,
-  'lila-claro': #905c8b,
+  "verde-claro-3": #d3e0d7,
-  'morado-claro': #915c8c,
+  "lila-claro": #905c8b,
-  'gris': #959595,
+  "morado-claro": #915c8c,
+  "gris": #959595,
 );
 
 // Colores base principales
@@ -48,24 +49,24 @@ $white: #ffffff; // Blanco puro
 // Combinar colores en $theme-colors
 $theme-colors: map-merge(
   (
-    'primary': $primary,
+    "primary": $primary,
-    'primary-light': $primary-light,
+    "primary-light": $primary-light,
-    'primary-lighter': $primary-lighter,
+    "primary-lighter": $primary-lighter,
-    'primary-dark': $primary-dark,
+    "primary-dark": $primary-dark,
-    'primary-darker': $primary-darker,
+    "primary-darker": $primary-darker,
-    'secondary': $secondary,
+    "secondary": $secondary,
-    'secondary-light': $secondary-light,
+    "secondary-light": $secondary-light,
-    'secondary-lighter': $secondary-lighter,
+    "secondary-lighter": $secondary-lighter,
-    'secondary-dark': $secondary-dark,
+    "secondary-dark": $secondary-dark,
-    'secondary-darker': $secondary-darker,
+    "secondary-darker": $secondary-darker,
-    'success': $success,
+    "success": $success,
-    'danger': $danger,
+    "danger": $danger,
-    'warning': $warning,
+    "warning": $warning,
-    'info': $info,
+    "info": $info,
-    'light': $light,
+    "light": $light,
-    'dark': $dark,
+    "dark": $dark,
-    'muted': $muted,
+    "muted": $muted,
-    'white': $white,
+    "white": $white,
   ),
   $custom-colors
 );
@@ -79,7 +80,7 @@ $body-color: #515151; // Azul/gris oscuro para texto
   --swiper-theme-color: $primary;
   --swiper-navigation-color: $primary;
   --swiper-pagination-color: $primary;
-  --swiper-pagination-bullet-inactive-color: map-get($custom-colors, 'silver');
+  --swiper-pagination-bullet-inactive-color: map-get($custom-colors, "silver");
 }
 
 .swiper {
@@ -107,4 +108,4 @@ $container-max-widths: (
   xxl: 100%,
 );
 // Import Bootstrap components
-@import '../bootstrap-5.2.3/scss/bootstrap';
+@import "../bootstrap-5.2.3/scss/bootstrap";

css/themee.css

@@ -74,6 +74,7 @@
   --bs-verde-claro: #d6e3da;
   --bs-verde-gris: #cadcd4;
   --bs-verde-claro-2: #b3cdb9;
+  --bs-verde-claro-3: #d3e0d7;
   --bs-lila-claro: #905c8b;
   --bs-morado-claro: #915c8c;
   --bs-gris: #959595;
@@ -104,6 +105,7 @@
   --bs-verde-claro-rgb: 214, 227, 218;
   --bs-verde-gris-rgb: 202, 220, 212;
   --bs-verde-claro-2-rgb: 179, 205, 185;
+  --bs-verde-claro-3-rgb: 211, 224, 215;
   --bs-lila-claro-rgb: 144, 92, 139;
   --bs-morado-claro-rgb: 145, 92, 140;
   --bs-gris-rgb: 149, 149, 149;
@@ -3358,6 +3360,23 @@ textarea.form-control-lg {
   --bs-btn-disabled-border-color: #b3cdb9;
 }
 
+.btn-verde-claro-3 {
+  --bs-btn-color: #000;
+  --bs-btn-bg: #d3e0d7;
+  --bs-btn-border-color: #d3e0d7;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #dae5dd;
+  --bs-btn-hover-border-color: #d7e3db;
+  --bs-btn-focus-shadow-rgb: 179, 190, 183;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #dce6df;
+  --bs-btn-active-border-color: #d7e3db;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #000;
+  --bs-btn-disabled-bg: #d3e0d7;
+  --bs-btn-disabled-border-color: #d3e0d7;
+}
+
 .btn-lila-claro {
   --bs-btn-color: #fff;
   --bs-btn-bg: #905c8b;
@@ -3868,6 +3887,23 @@ textarea.form-control-lg {
   --bs-gradient: none;
 }
 
+.btn-outline-verde-claro-3 {
+  --bs-btn-color: #d3e0d7;
+  --bs-btn-border-color: #d3e0d7;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #d3e0d7;
+  --bs-btn-hover-border-color: #d3e0d7;
+  --bs-btn-focus-shadow-rgb: 211, 224, 215;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #d3e0d7;
+  --bs-btn-active-border-color: #d3e0d7;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #d3e0d7;
+  --bs-btn-disabled-bg: transparent;
+  --bs-btn-disabled-border-color: #d3e0d7;
+  --bs-gradient: none;
+}
+
 .btn-outline-lila-claro {
   --bs-btn-color: #905c8b;
   --bs-btn-border-color: #905c8b;
@@ -5702,6 +5738,15 @@ textarea.form-control-lg {
   color: #3a423b;
 }
 
+.alert-verde-claro-3 {
+  --bs-alert-color: #545a56;
+  --bs-alert-bg: #f6f9f7;
+  --bs-alert-border-color: #f2f6f3;
+}
+.alert-verde-claro-3 .alert-link {
+  color: #434845;
+}
+
 .alert-lila-claro {
   --bs-alert-color: #563753;
   --bs-alert-bg: #e9dee8;
@@ -6399,6 +6444,20 @@ textarea.form-control-lg {
   border-color: #48524a;
 }
 
+.list-group-item-verde-claro-3 {
+  color: #545a56;
+  background-color: #f6f9f7;
+}
+.list-group-item-verde-claro-3.list-group-item-action:hover, .list-group-item-verde-claro-3.list-group-item-action:focus {
+  color: #545a56;
+  background-color: #dde0de;
+}
+.list-group-item-verde-claro-3.list-group-item-action.active {
+  color: #ffffff;
+  background-color: #545a56;
+  border-color: #545a56;
+}
+
 .list-group-item-lila-claro {
   color: #563753;
   background-color: #e9dee8;
@@ -8099,6 +8158,11 @@ textarea.form-control-lg {
   background-color: RGBA(179, 205, 185, var(--bs-bg-opacity, 1)) !important;
 }
 
+.text-bg-verde-claro-3 {
+  color: #000 !important;
+  background-color: RGBA(211, 224, 215, var(--bs-bg-opacity, 1)) !important;
+}
+
 .text-bg-lila-claro {
   color: #fff !important;
   background-color: RGBA(144, 92, 139, var(--bs-bg-opacity, 1)) !important;
@@ -8303,6 +8367,13 @@ textarea.form-control-lg {
   color: #c2d7c7 !important;
 }
 
+.link-verde-claro-3 {
+  color: #d3e0d7 !important;
+}
+.link-verde-claro-3:hover, .link-verde-claro-3:focus {
+  color: #dce6df !important;
+}
+
 .link-lila-claro {
   color: #905c8b !important;
 }
@@ -8880,6 +8951,11 @@ textarea.form-control-lg {
   border-color: rgba(var(--bs-verde-claro-2-rgb), var(--bs-border-opacity)) !important;
 }
 
+.border-verde-claro-3 {
+  --bs-border-opacity: 1;
+  border-color: rgba(var(--bs-verde-claro-3-rgb), var(--bs-border-opacity)) !important;
+}
+
 .border-lila-claro {
   --bs-border-opacity: 1;
   border-color: rgba(var(--bs-lila-claro-rgb), var(--bs-border-opacity)) !important;
@@ -9847,6 +9923,11 @@ textarea.form-control-lg {
   color: rgba(var(--bs-verde-claro-2-rgb), var(--bs-text-opacity)) !important;
 }
 
+.text-verde-claro-3 {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-verde-claro-3-rgb), var(--bs-text-opacity)) !important;
+}
+
 .text-lila-claro {
   --bs-text-opacity: 1;
   color: rgba(var(--bs-lila-claro-rgb), var(--bs-text-opacity)) !important;
@@ -10038,6 +10119,11 @@ textarea.form-control-lg {
   background-color: rgba(var(--bs-verde-claro-2-rgb), var(--bs-bg-opacity)) !important;
 }
 
+.bg-verde-claro-3 {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-verde-claro-3-rgb), var(--bs-bg-opacity)) !important;
+}
+
 .bg-lila-claro {
   --bs-bg-opacity: 1;
   background-color: rgba(var(--bs-lila-claro-rgb), var(--bs-bg-opacity)) !important;

index.html

@@ -1,9 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="es">
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
+    />
     <meta name="theme-color" content="#FFA300" />
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
@@ -22,8 +25,18 @@
     <div class="wrap-course-adaptive overflow-hidden">
       <div class="wrap-course-content" id="wrap-course-content">
         <header>
-          <nav class="navbar navbar-light bg-transparent sticky-top shadow-sm py-0" id="coursenav-navbar">
+          <nav
-            <div class="container-fluid d-flex align-items-center px-3">
+            class="navbar navbar-light bg-transparent sticky-top shadow-sm py-0"
+            id="coursenav-navbar"
+          >
+            <div class="container-fluid d-flex align-items-center p-0 pe-3">
+              <div
+                class="advertencia small bg-verde-claro-3 px-3 py-2 text-verde-pino"
+                style="border-top-right-radius: 30px; border-bottom-right-radius: 30px"
+              >
+                “Este material tiene fines educativos, no promocionales, de uso exclusivo para
+                profesionales de la salud.”
+              </div>
               <!-- Logo -->
               <a class="navbar-brand p-0 disabled ms-auto" href="#">
                 <img src="img/template/logo.svg" width="133" alt="Logo" />
@@ -31,11 +44,32 @@
               <div class="flex-grow-1 d-none"></div>
               <div class="d-flex align-items-center d-none">
                 <!-- Audio Control -->
-                <button id="coursenav-audio-control" class="btn controls-btn me-2" aria-label="Toggle audio">
+                <button
+                  id="coursenav-audio-control"
+                  class="btn controls-btn me-2"
+                  aria-label="Toggle audio"
+                >
                   <div class="position-relative">
                     <svg viewBox="0 0 100 100" class="w-100 h-100">
-                      <circle cx="50" cy="50" r="45" stroke="#e9ecef" stroke-width="10" fill="none" />
+                      <circle
-                      <circle id="coursenav-progress-circle" cx="50" cy="50" r="45" stroke="#FFA300" stroke-width="10" fill="none" stroke-dasharray="283" stroke-dashoffset="283" />
+                        cx="50"
+                        cy="50"
+                        r="45"
+                        stroke="#e9ecef"
+                        stroke-width="10"
+                        fill="none"
+                      />
+                      <circle
+                        id="coursenav-progress-circle"
+                        cx="50"
+                        cy="50"
+                        r="45"
+                        stroke="#FFA300"
+                        stroke-width="10"
+                        fill="none"
+                        stroke-dasharray="283"
+                        stroke-dashoffset="283"
+                      />
                     </svg>
                     <i id="coursenav-audio-icon" class="fa-duotone fa-solid fa-volume"></i>
                   </div>
@@ -57,11 +91,20 @@
         </header>
 
         <!-- OFFCANVAS DESDE DERECHA -->
-        <div class="offcanvas offcanvas-start bg-primary text-white" tabindex="-1" id="coursenav-offcanvas" aria-labelledby="coursenav-offcanvas-label" data-bs-backdrop="false">
+        <div
+          class="offcanvas offcanvas-start bg-primary text-white"
+          tabindex="-1"
+          id="coursenav-offcanvas"
+          aria-labelledby="coursenav-offcanvas-label"
+          data-bs-backdrop="false"
+        >
           <div class="offcanvas-header">
             <h5 id="coursenav-offcanvas-label" class="offcanvas-title">Índice</h5>
             <button
-              style="background: url('img/template/close2.webp'); background-repeat: no-repeat"
+              style="
+                background: url(&quot;img/template/close2.webp&quot;);
+                background-repeat: no-repeat;
+              "
               type="button"
               class="btn-close text-white"
               data-bs-dismiss="offcanvas"
@@ -100,8 +143,14 @@
         <main id="coursenav-main-content"></main>
 
         <!-- FOOTER -->
-        <footer class="bg-cafe d-flex justify-content-around flex-row gap-4" style="position: absolute; left: 0; bottom: 0; width: 100%; z-index: 10">
+        <footer
-          <div class="d-inline-flex justify-content-center flex-row bg-transparent text-white" id="wrap-course-controls">
+          class="bg-cafe d-flex justify-content-around flex-row gap-4"
+          style="position: absolute; left: 0; bottom: 0; width: 100%; z-index: 10"
+        >
+          <div
+            class="d-inline-flex justify-content-center flex-row bg-transparent text-white"
+            id="wrap-course-controls"
+          >
             <!-- Offcanvas Toggle -->
             <button
               class="btn controls-btn text-white bg-primary align-self-center me-2"
@@ -113,8 +162,12 @@
             >
               <i class="fa-solid fa-chevron-right font-custom"></i>
             </button>
-            <div class="footer-details d-flex align-items-center bg-secondary text-white fw-lighter">
+            <div
-              <span class="small text-white" id="coursenav-footer-title"><span id="coursenav-course-title"></span></span>
+              class="footer-details d-flex align-items-center bg-secondary text-white fw-lighter"
+            >
+              <span class="small text-white" id="coursenav-footer-title"
+                ><span id="coursenav-course-title"></span
+              ></span>
             </div>
           </div>
 
@@ -123,18 +176,39 @@
               <div id="step-movil"></div>
             </div>
           </div>
-          <div class="d-flex align-items-center flex-row bg-verde-claro mx-auto gap-4" id="wrap-course-content-navigation">
+          <div
-            <button id="coursenav-prev-btn" class="coursenav-btn-navigation me-2" data-bs-toggle="tooltip" title="Anterior">
+            class="d-flex align-items-center flex-row bg-verde-claro mx-auto gap-4"
+            id="wrap-course-content-navigation"
+          >
+            <button
+              id="coursenav-prev-btn"
+              class="coursenav-btn-navigation me-2"
+              data-bs-toggle="tooltip"
+              title="Anterior"
+            >
               <img src="img/template/prev.webp" alt="" />
             </button>
-            <button id="coursenav-other-btn" class="coursenav-btn-navigation me-2 d-none" data-bs-toggle="tooltip" title="Menú">
+            <button
+              id="coursenav-other-btn"
+              class="coursenav-btn-navigation me-2 d-none"
+              data-bs-toggle="tooltip"
+              title="Menú"
+            >
               <img src="img/template/other.webp" alt="" />
             </button>
-            <button id="coursenav-next-btn" class="coursenav-btn-navigation" data-bs-toggle="tooltip" title="Siguiente">
+            <button
+              id="coursenav-next-btn"
+              class="coursenav-btn-navigation"
+              data-bs-toggle="tooltip"
+              title="Siguiente"
+            >
               <img src="img/template/next.webp" alt="" />
             </button>
           </div>
-          <div class="d-flex align-items-center flex-row text-white bg-secondary" id="wrap-course-paginator">
+          <div
+            class="d-flex align-items-center flex-row text-white bg-secondary"
+            id="wrap-course-paginator"
+          >
             <div class="paginator">
               <span id="coursenav-page-number"></span>
             </div>