Sobretodo el rosario

css/estilos.css

@@ -4,6 +4,7 @@
 :root {
     /* Paleta refinada */
     --color-primario: #2F3A56;   /* Azul noche espiritual */
+    --color-hover: #24314A;      /* Azul noche más oscuro */
     --color-secundario: #EAF2FA; /* Azul muy suave */
     --color-fondo: #FAF7F2;      /* Crema papel antiguo */
     --color-texto: #2b2b2b;
@@ -36,23 +37,24 @@ body {
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 6px;
-    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+    text-shadow: 2px 2px 4px rgba(255,255,255,0.3);
 }
 
 .fecha {
+    letter-spacing: 2px;
     font-size: 1.2rem;
     margin-top: 0.5rem;
     font-family: 'EB Garamond', serif;
-    font-style: italic;
     opacity: 0.9;
 }
 
 .ciclo {
-    font-size: 0.9rem;
-    text-transform: uppercase;
     letter-spacing: 2px;
     margin-top: 0.3rem;
     opacity: 0.8;
+    font-family: 'EB Garamond', serif;
+    margin: 0;
+    font-size: 1.2rem;
 }
 
 
@@ -75,9 +77,10 @@ body {
     padding: 1.5rem;
     border: 2px solid var(--color-acento);
     border-radius: 12px;
-    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+    box-shadow: 0 5px 15px rgba(232, 162, 58, 0.5);
     position: relative;
     z-index: 10;
+    max-width: 400px;
 }
 
 .santo h2 {
@@ -91,19 +94,23 @@ body {
     margin-top: 5px;
     font-size: 0.95rem;
     font-style: italic;
-    color: #666;
+    color: #424242;
 }
 
-/* --- DIFUNTOS (Mínimo y mono) --- */
+.santo_discreto {
-/*
+    font-size: 0.9rem;
-.tarjeta-difunto {
+    margin-top: 0.5rem;
-    background: #f0f7ff;
+    font-family: 'EB Garamond', serif;
-    border-radius: 50px;
+    font-style: italic;
-    margin: 2rem auto;
+    opacity: 0.9;
-    max-width: 80%;
+}
-    padding: 10px 20px;
+
-    border: 1px dashed var(--color-primario);
+.santo_discreto #descripcion-santo-del-dia {
-} */
+    margin-top: 0px;
+    font-size: 0.9rem;
+    font-style: italic;
+    color: var(--color-secundario);
+}
 
 .nombre-difunto {
     font-weight: 600;
@@ -157,7 +164,7 @@ body {
 /* --- BOTONES --- */
 .boton {
     display: inline-block;
-    background-color: var(--color-acento);
+    background-color: var(--color-primario);
     color: white;
     padding: 12px 25px;
     text-decoration: none;
@@ -171,7 +178,7 @@ body {
 
 .boton:hover {
     transform: translateY(-2px);
-    background-color: #d18d2b;
+    background-color: var(--color-hover);
 }
 
 /* --- RECURSOS (Enlaces abajo) --- */
@@ -192,3 +199,72 @@ body {
     font-size: 0.9rem;
     font-weight: 600;
 }
+
+/* --- ROSARIO --- */
+.contenedor_rosario {
+    background: #ffffff;
+    border-radius: 20px;
+    padding: 2.5rem;
+    box-shadow: 0 15px 35px rgba(47, 58, 86, 0.1);
+    max-width: 700px;
+    margin: -30px auto 40px; /* Sube un poco sobre la cabecera */
+    position: relative;
+    z-index: 10;
+}
+
+.contenedor_rosario h3 {
+    font-family: 'EB Garamond', serif;
+    font-size: 2rem;
+    color: var(--color-primario);
+    margin-bottom: 1rem;
+    text-align: center;
+    letter-spacing: 2px;
+}
+
+.controles-rosario {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 20px 0;
+}
+
+.btn-nav {
+    background-color: var(--color-primario);
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 50px;
+    cursor: pointer;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+
+.btn-nav:hover {
+    background-color: var(--color-acento);
+    transform: translateY(-2px);
+}
+
+.indicador-paso {
+    font-family: 'EB Garamond', serif;
+    font-weight: bold;
+    font-size: 1.2rem;
+    color: var(--color-primario);
+}
+
+.imagen-misterio {
+    width: 100%;
+    border-radius: 15px;
+    transition: opacity 0.5s ease;
+    border: 5px solid var(--color-secundario);
+}
+
+#imagen-misterio {
+    transition: opacity 0.4s ease-in-out;
+    display: block;
+    margin: 0 auto;
+    border: 4px solid var(--color-acento); /* Ese E8A23A en acción */
+    border-radius: 15px;
+    max-width: 100%;
+    height: auto;
+}

css/estilos20260117.css

@@ -1,127 +0,0 @@
-/* Fuentes importadas desde Google Fonts */
-@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,600;1,400&family=Nunito:wght@400;600&display=swap');
-
-:root {
-    --color-primario: #2F3A56;
-    --color-secundario: #EAF2FA;
-    --color-fondo: #FAF7F2;
-    --color-texto: #2b2b2b;
-    --color-acento: #E8A23A;
-
-    --color-text: #3A3A3A;
-    --color-naranja: #F4C76E;
-    --arena: #E8DCC2;
-    --color-primary-dark: #2F3A56;
-    --color-text-light: #FDFBF7;
-}
-    
-body {
-    margin: 0;
-    font-family: 'Gothic ', Garamond, 'Times New Roman', serif;
-    background-color: var(--color-fondo);
-    color: var(--color-texto);
-}
-
-.header-hoy {
-    background-color: var(--color-primario);
-    color: var(--color-secundario);
-    text-align: center;
-    padding: 2.5rem 1.5rem;
-}
-
-.fecha {
-    opacity: 0.9;
-}
-
-.titulo {
-    margin: 0.5rem;
-    font-size: 2.2rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 5px;
-    color: var(--color-secundario);
-    line-height: 1.2;
-    text-shadow: var(--color-secundario) 1px 1px 2px;
-}
-
-.subtitulo {
-    font-size: 1rem;
-    opacity: 0.85;
-}
-
-.fecha {
-    font-size: 1.5rem;
-}
-
-#indicador-liturgico {
-    font-size: 1.2rem;
-    margin-top: 1.5rem;
-}
-
-.santo {
-    font-size: 1.3rem;
-/*   border: 1px solid #E8A23A;*/
-    border-top: 0; /* Esto quita específicamente el de arriba */
-    border-left: 0;
-    border-radius: 0 0 5px 5px; /* Redondea solo las esquinas de abajo */
-    max-width: fit-content;
-    margin: 0 auto;
-    padding: 10px;
-    box-shadow: #2b2b2b 1px 1px 5px;
-}
-
-.santo {
-    text-align: center; /* Centra todo el contenido (h2 y div) */
-    margin: 10px auto;  /* Margen arriba/abajo y centrado horizontal del bloque */
-    padding: 10px;
-    border: 1px solid #E8A23A; 
-    border-radius: 5px;
-    max-width: fit-content;
-}
-
-/* Quitamos los márgenes automáticos que separan el nombre de la descripción */
-.santo h2 {
-    margin: 0; 
-    font-size: 1.3rem; /* Ajusta según prefieras */
-}
-
-#descripcion-santo-del-dia {
-    margin-top: 2px;   /* Un espacio mínimo para que no estén pegados */
-    font-size: 0.9rem;
-    font-style: italic;
-    opacity: 0.8;
-}
-
-
-.tarjeta-difunto {
-    text-align: center;
-    margin: 10px 0;
-}
-
-.nombre-difunto {
-    font-size: 1.2rem;
-    color: var(--color-primario);
-    padding: .5rem;
-}
-
-.bloque {
-    text-align: center; /* Esto centrará textos, botones y listas */
-    font-size: 1.5rem;
-    margin: 2rem 1.5rem;
-    padding: 1.5rem;
-    background-color: white;
-    border-radius: 8px;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-    border: 1px solid var(--color-primario);
-}
-
-.bloque p {
-    align-self: center;
-}
-
-/* Si usas listas <ul> en la intención, para que se centren hay que quitarles el padding */
-.bloque ul {
-    list-style: none; /* Quita los puntos si prefieres un look más limpio */
-    padding: 0;
-    margin: 10px 0;
-}

data/calendario-liturgico.json

@@ -4,10 +4,35 @@
   { "fecha": "2026-01-06", "color": "blanco", "tiempo": "Navidad (Epifanía del Señor)" },
   { "fecha": "2026-01-11", "color": "blanco", "tiempo": "Navidad (Bautismo del Señor)" },
   { "fecha": "2026-01-17", "color": "verde", "tiempo": "Tiempo Ordinario" },
-  { "fecha": "2026-01-18", "color": "blanco", "tiempo": "Tiempo Ordinario (Conversión de San Pablo)" },
+  { "fecha": "2026-01-18", "color": "verde", "tiempo": "Tiempo Ordinario" },
+  { "fecha": "2026-01-19", "color": "verde", "tiempo": "Tiempo Ordinario" },
+  { "fecha": "2026-01-20", "color": "verde", "tiempo": "Tiempo Ordinario" },
+  { "fecha": "2026-01-21", "color": "verde", "tiempo": "Tiempo Ordinario" },
+  { "fecha": "2026-01-22", "color": "verde", "tiempo": "Tiempo Ordinario" },
+  { "fecha": "2026-01-25", "color": "blanco", "tiempo": "Tiempo Ordinario (Conversión de San Pablo)" },
+  { "fecha": "2026-01-29", "color": "verde", "tiempo": "Tiempo Ordinario" },
+  { "fecha": "2026-01-30", "color": "verde", "tiempo": "Tiempo Ordinario" },
+  { "fecha": "2026-01-31", "color": "verde", "tiempo": "Tiempo Ordinario" },
+  { "fecha": "2026-02-01", "color": "verde", "tiempo": "Tiempo Ordinario" },
   { "fecha": "2026-02-02", "color": "blanco", "tiempo": "Tiempo Ordinario (Presentación del Señor)" },
+  { "fecha": "2026-02-03", "color": "verde", "tiempo": "Tiempo Ordinario" },
+  { "fecha": "2026-02-04", "color": "verde", "tiempo": "Tiempo Ordinario" },
+  { "fecha": "2026-02-11", "color": "verde", "tiempo": "Tiempo Ordinario" },
+  { "fecha": "2026-02-14", "color": "verde", "tiempo": "Domingo de Carnaval" },
+  { "fecha": "2026-02-15", "color": "verde", "tiempo": "Cuaresma (Lunes de Carnaval)" },
+  { "fecha": "2026-02-16", "color": "verde", "tiempo": "Cuaresma (Martes de Carnaval)" },
   { "fecha": "2026-02-18", "color": "morado", "tiempo": "Cuaresma (Miércoles de Ceniza)" },
+  { "fecha": "2026-03-01", "color": "morado", "tiempo": "Cuaresma" },
+  { "fecha": "2026-03-08", "color": "morado", "tiempo": "Cuaresma" },
+  { "fecha": "2026-03-15", "color": "morado", "tiempo": "Cuaresma" },
+  { "fecha": "2026-03-18", "color": "morado", "tiempo": "Cuaresma" },
   { "fecha": "2026-03-19", "color": "blanco", "tiempo": "Cuaresma (San José)" },
+  { "fecha": "2026-03-20", "color": "morado", "tiempo": "Cuaresma" },
+  { "fecha": "2026-03-21", "color": "morado", "tiempo": "Cuaresma" },
+  { "fecha": "2026-03-22", "color": "morado", "tiempo": "Cuaresma" },
+  { "fecha": "2026-03-23", "color": "morado", "tiempo": "Cuaresma" },
+  { "fecha": "2026-03-24", "color": "morado", "tiempo": "Cuaresma" },
+  { "fecha": "2026-03-25", "color": "violeta", "tiempo": "Cuaresma (Anunciación del Señor)" },
   { "fecha": "2026-03-29", "color": "rojo", "tiempo": "Semana Santa (Domingo de Ramos)" },
   { "fecha": "2026-04-02", "color": "blanco", "tiempo": "Triduo Pascual (Jueves Santo)" },
   { "fecha": "2026-04-03", "color": "rojo", "tiempo": "Triduo Pascual (Viernes Santo)" },

img/ic_flecha_abajo.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector android:height="24dp" android:tint="#000000"
+    android:viewportHeight="24" android:viewportWidth="24"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="@android:color/white" android:pathData="M7.41,8.59L12,13.17l4.59,-4.58L18,10l-6,6 -6,-6 1.41,-1.41z"/>
+</vector>

img/ic_flecha_arriba.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector android:height="24dp" android:tint="#000000"
+    android:viewportHeight="24" android:viewportWidth="24"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="@android:color/white" android:pathData="M7.41,15.41L12,10.83l4.59,4.58L18,14l-6,-6 -6,6z"/>
+</vector>

img/ic_launcher_background.xml

@@ -0,0 +1,170 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportWidth="108"
+    android:viewportHeight="108">
+    <path
+        android:fillColor="#3DDC84"
+        android:pathData="M0,0h108v108h-108z" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M9,0L9,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,0L19,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M29,0L29,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M39,0L39,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M49,0L49,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M59,0L59,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M69,0L69,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M79,0L79,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M89,0L89,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M99,0L99,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,9L108,9"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,19L108,19"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,29L108,29"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,39L108,39"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,49L108,49"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,59L108,59"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,69L108,69"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,79L108,79"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,89L108,89"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,99L108,99"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,29L89,29"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,39L89,39"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,49L89,49"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,59L89,59"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,69L89,69"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,79L89,79"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M29,19L29,89"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M39,19L39,89"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M49,19L49,89"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M59,19L59,89"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M69,19L69,89"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M79,19L79,89"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+</vector>

img/ic_launcher_foreground.xml

@@ -0,0 +1,30 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportWidth="108"
+    android:viewportHeight="108">
+    <path android:pathData="M31,63.928c0,0 6.4,-11 12.1,-13.1c7.2,-2.6 26,-1.4 26,-1.4l38.1,38.1L107,108.928l-32,-1L31,63.928z">
+        <aapt:attr name="android:fillColor">
+            <gradient
+                android:endX="85.84757"
+                android:endY="92.4963"
+                android:startX="42.9492"
+                android:startY="49.59793"
+                android:type="linear">
+                <item
+                    android:color="#44000000"
+                    android:offset="0.0" />
+                <item
+                    android:color="#00000000"
+                    android:offset="1.0" />
+            </gradient>
+        </aapt:attr>
+    </path>
+    <path
+        android:fillColor="#FFFFFF"
+        android:fillType="nonZero"
+        android:pathData="M65.3,45.828l3.8,-6.6c0.2,-0.4 0.1,-0.9 -0.3,-1.1c-0.4,-0.2 -0.9,-0.1 -1.1,0.3l-3.9,6.7c-6.3,-2.8 -13.4,-2.8 -19.7,0l-3.9,-6.7c-0.2,-0.4 -0.7,-0.5 -1.1,-0.3C38.8,38.328 38.7,38.828 38.9,39.228l3.8,6.6C36.2,49.428 31.7,56.028 31,63.928h46C76.3,56.028 71.8,49.428 65.3,45.828zM43.4,57.328c-0.8,0 -1.5,-0.5 -1.8,-1.2c-0.3,-0.7 -0.1,-1.5 0.4,-2.1c0.5,-0.5 1.4,-0.7 2.1,-0.4c0.7,0.3 1.2,1 1.2,1.8C45.3,56.528 44.5,57.328 43.4,57.328L43.4,57.328zM64.6,57.328c-0.8,0 -1.5,-0.5 -1.8,-1.2s-0.1,-1.5 0.4,-2.1c0.5,-0.5 1.4,-0.7 2.1,-0.4c0.7,0.3 1.2,1 1.2,1.8C66.5,56.528 65.6,57.328 64.6,57.328L64.6,57.328z"
+        android:strokeWidth="1"
+        android:strokeColor="#00000000" />
+</vector>

index.html

@@ -44,6 +44,7 @@
     </section>
 
     <!-- INTENCIÓN -->
+    <!--
     <section class="bloque">
         <h3>🙏 Intención de hoy</h3>
         <p class="intencion">
@@ -54,22 +55,23 @@
             </ul>
         </p>
         <a href="diario-oracion.html" class="boton">Ofrecer mi oración</a>
-    </section>
+    </section>-->
 
     <!-- DIARIO -->
+     <!--
     <section class="bloque bloque-intimo">
         <h3>🕯 Mi oración de hoy</h3>
         <p class="texto-suave">
             Un espacio personal para escribir lo que llevas en el corazón
         </p>
         <a href="diario-oracion.html" class="boton">Escribir en mi diario</a>
-    </section>
+    </section>-->
 
     <!-- ROSARIO -->
     <section class="bloque">
         <h3>📿 Rosario</h3>
         <p>Hoy rezamos los Misterios Luminosos</p>
-        <a href="rosario/index.html" class="boton">Rezar el Rosario</a>
+        <a href="rosario.html" class="boton">Rezar el Rosario</a>
     </section>
 
     <!-- RECURSOS -->

js/codigo.js

@@ -50,7 +50,8 @@ async function cargarYActualizarTodo() {
                 "blanco": "#ffffff",
                 "rojo": "#b30000",
                 "azul": "#0074d9",
-                "rosa": "#e7b1cc"
+                "rosa": "#e7b1cc",
+                "violeta": "#a0b5b0"
             };
             
             const colorReal = mapaColores[datosHoy.color] || "#0054a4"; // Color por defecto si no se encuentra
@@ -202,7 +203,6 @@ function visualizarDatos() {
     const opcionesFecha = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
     const hoy = new Date();
     fechaHoyElem.textContent = hoy.toLocaleDateString('es-ES', opcionesFecha);
-
 }
 
 // Evento de carga unificado

js/rosario.js

@@ -0,0 +1,97 @@
+let indiceMisterio = 0;
+let misteriosHoy = null;
+
+const MISTERIOS_DATA = {
+    0: { nombre: "Gloriosos", titulos: ["La Resurrección", "La Ascensión", "La Venida del Espíritu Santo", "La Asunción", "La Coronación de María"] },
+    1: { nombre: "Gozosos", titulos: ["La Anunciación", "La Visitación", "El Nacimiento", "La Presentación", "El Niño perdido en el Templo"] },
+    2: { nombre: "Dolorosos", titulos: ["La Agonía", "La Flagelación", "La Coronación de Espinas", "Jesús con la Cruz", "La Crucifixión"] },
+    3: { nombre: "Gloriosos", titulos: ["La Resurrección", "La Ascensión", "La Venida del Espíritu Santo", "La Asunción", "La Coronación de María"] },
+    4: { nombre: "Luminosos", titulos: ["El Bautismo", "Las Bodas de Caná", "El Anuncio del Reino", "La Transfiguración", "La Institución de la Eucaristía"] },
+    5: { nombre: "Dolorosos", titulos: ["La Agonía", "La Flagelación", "La Coronación de Espinas", "Jesús con la Cruz", "La Crucifixión"] },
+    6: { nombre: "Gozosos", titulos: ["La Anunciación", "La Visitación", "El Nacimiento", "La Presentación", "El Niño perdido en el Templo"] }
+};
+
+async function santoDelDia() {
+    const hoy = new Date();
+    const offset = hoy.getTimezoneOffset() * 60000;
+    const fechaISO = new Date(hoy - offset).toISOString().split('T')[0];
+    
+    // Obtenemos los elementos aquí para evitar errores de "undefined"
+    const santoElem = document.getElementById('santo-del-dia');
+
+    try {
+        // IMPORTANTE: Ruta relativa para GitHub Pages
+        const res = await fetch('data/santos.json'); 
+        const listaSantos = await res.json();
+        const elSanto = listaSantos.find(d => d.fecha === fechaISO);
+
+        if (elSanto && santoElem) {
+            santoElem.textContent = elSanto.santo + " ruega por nosotros";
+        }
+    } catch (e) {
+        console.error("Error en la carga de santos:", e);
+    }
+}
+
+function inicializarRosario() {
+    const hoy = new Date();
+    misteriosHoy = MISTERIOS_DATA[hoy.getDay()];
+
+    // Llamamos a la función de los santos
+    santoDelDia();
+    
+    // Poner la fecha (con año)
+    const fechaElem = document.getElementById('fecha-hoy');
+    if (fechaElem) {
+        fechaElem.textContent = hoy.toLocaleDateString('es-ES', { 
+            weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' 
+        });
+    }
+
+    const nombreMistElem = document.getElementById('nombre_misterio');
+    if (nombreMistElem) nombreMistElem.textContent = `Misterios ${misteriosHoy.nombre}`;
+    
+    actualizarVistaMisterio();
+
+    // Eventos de los botones con comprobación de existencia (buena práctica)
+    const btnSiguiente = document.getElementById('siguiente');
+    const btnAnterior = document.getElementById('anterior');
+
+    if (btnSiguiente) {
+        btnSiguiente.addEventListener('click', () => {
+            indiceMisterio = (indiceMisterio + 1) % 5;
+            actualizarVistaMisterio();
+        });
+    }
+
+    if (btnAnterior) {
+        btnAnterior.addEventListener('click', () => {
+            indiceMisterio = (indiceMisterio - 1 + 5) % 5;
+            actualizarVistaMisterio();
+        });
+    }
+}
+
+function actualizarVistaMisterio() {
+    const titulo = document.getElementById('titulo_misterio');
+    const imagen = document.getElementById('imagen-misterio');
+    const paso = document.getElementById('paso-actual');
+
+    if (titulo) {
+        titulo.textContent = `${indiceMisterio + 1}º Misterio: ${misteriosHoy.titulos[indiceMisterio]}`;
+    }
+    
+    if (paso) paso.textContent = indiceMisterio + 1;
+
+    if (imagen) {
+        const carpeta = misteriosHoy.nombre.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+        // Asegúrate de que las fotos sean jpg y sigan este patrón: gozosos1.jpg, gozosos2.jpg...
+        imagen.src = `img/${carpeta}${indiceMisterio + 1}.jpg`;
+        
+        // Animación suave
+        imagen.style.opacity = 0;
+        setTimeout(() => { imagen.style.opacity = 1; }, 50);
+    }
+}
+
+window.addEventListener('load', inicializarRosario);

js/rosario20260118.js

@@ -0,0 +1,63 @@
+ const MISTERIOS_POR_DIA = {
+    0: { nombre: "Gloriosos", titulos: ["La Resurrección", "La Ascensión", "La Venida del Espíritu Santo", "La Asunción", "La Coronación de María"] }, // Domingo
+    1: { nombre: "Gozosos", titulos: ["La Anunciación", "La Visitación", "El Nacimiento", "La Presentación", "El Niño perdido en el Templo"] }, // Lunes
+    2: { nombre: "Dolorosos", titulos: ["La Agonía", "La Flagelación", "La Coronación de Espinas", "Jesús con la Cruz", "La Crucifixión"] }, // Martes
+    3: { nombre: "Gloriosos", titulos: ["La Resurrección", "La Ascensión", "La Venida del Espíritu Santo", "La Asunción", "La Coronación de María"] }, // Miércoles
+    4: { nombre: "Luminosos", titulos: ["El Bautismo", "Las Bodas de Caná", "El Anuncio del Reino", "La Transfiguración", "La Institución de la Eucaristía"] }, // Jueves
+    5: { nombre: "Dolorosos", titulos: ["La Agonía", "La Flagelación", "La Coronación de Espinas", "Jesús con la Cruz", "La Crucifixión"] }, // Viernes
+    6: { nombre: "Gozosos", titulos: ["La Anunciación", "La Visitación", "El Nacimiento", "La Presentación", "El Niño perdido en el Templo"] } // Sábado
+
+}; 
+
+function inicializarVariables() {
+    cabeceraHoy = document.getElementById('header-hoy');
+    fechaHoyElem = document.getElementById('fecha-hoy');
+    santoDelDiaElem = document.getElementById('santo-del-dia');
+    nombreMisterioElem = document.getElementById('nombre_misterio');
+    tituloMisterioElem = document.getElementById('titulo_misterio');
+    descripcionMisterioElem = document.getElementById('descripcion_misterio');
+    imagenMisterioElem = document.getElementById('imagen-misterio');
+}
+
+function datosCabecera() {
+    // Aquí definimos el formato completo con el AÑO
+    const opcionesFecha = { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' };
+    const hoy = new Date();
+    if (fechaHoyElem) {
+        fechaHoyElem.textContent = hoy.toLocaleDateString('es-ES', opcionesFecha);
+    }
+}
+
+function cargarMisterioHoy() {
+    const hoy = new Date();
+    const diaSemana = hoy.getDay(); 
+    const misterioHoy = MISTERIOS_POR_DIA[diaSemana];
+
+    // ACTUALIZAR TÍTULOS DE MISTERIOS
+    indiceMisterio=0; // Siempre el primer misterio del día
+    nombreMisterioElem.textContent = `Misterios ${misterioHoy.nombre}`;
+    tituloMisterioElem.textContent = `1º Misterio ${misterioHoy.nombre}: ${misterioHoy.titulos[0]}`;
+    
+    
+
+    // ACTUALIZAR CONTENIDO DEL MISTERIO
+    const tituloMisterioElem = document.getElementById('titulo_misterio');
+    if (tituloMisterioElem) {
+        tituloMisterioElem.textContent = `1º Misterio ${misterioHoy.nombre}: ${misterioHoy.titulos[0]}`;
+    }
+    
+    const imagenMisterioElem = document.getElementById('imagen-misterio');
+    if (imagenMisterioElem) {
+        const imgId = misterioHoy.nombre.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+        imagenMisterioElem.src = `img/${imgId}1.jpg`;
+    }
+}
+
+// Evento de carga
+window.addEventListener("load", () => {
+    inicializarVariables();
+    datosCabecera();    // Esta pone la fecha con AÑO
+    cargarMisterioHoy(); // Esta ahora solo pone los misterios sin romper la fecha
+    
+    if (typeof santoDelDia === "function") santoDelDia(); 
+});

rosario.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Rosario</title>
+    <link rel="stylesheet" href="css/estilos.css">
+</head>
+<body>
+    <header class="header-hoy" id="header-hoy">
+        <h1 class="titulo">RECURSOS CATÓLICOS</h1>
+        <h2 class="subtitulo">Rosario</h2>
+
+        <div class="fecha">
+            <span id="fecha-hoy">Martes, 15 de enero de 2026</span>
+
+            <div class="misterio">
+                <span id="nombre_misterio">Nombre del misterio</span>
+            </div>
+        </div>
+
+        <div class="santo_discreto">
+            <h2 id="santo-del-dia">Santa Maria Madre de Dios</h2>
+        </div>
+    </header>
+
+    <div class="contenedor_rosario">
+        <h3 id="titulo_misterio">Primer Misterio Gozoso - La Anunciación del Ángel a María</h3>
+        <div class="controles-rosario">
+            <button id="anterior" class="btn-nav">← Anterior</button>
+            <div class="indicador-paso"><span id="paso-actual">1</span> / 5</div>
+            <button id="siguiente" class="btn-nav">Siguiente →</button>
+        </div>
+        <img src="img/gozosos1.jpg" alt="Rosario Image" id="imagen-misterio" class="imagen-misterio">
+    </div>
+    
+    <script src="js/rosario.js"></script>
+</body>
+</html>