diff --git a/css/estilos.css b/css/estilos.css index 02be079..31693b1 100644 --- a/css/estilos.css +++ b/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) --- */ -/* -.tarjeta-difunto { - background: #f0f7ff; - border-radius: 50px; - margin: 2rem auto; - max-width: 80%; - padding: 10px 20px; - border: 1px dashed var(--color-primario); -} */ +.santo_discreto { + font-size: 0.9rem; + margin-top: 0.5rem; + font-family: 'EB Garamond', serif; + font-style: italic; + opacity: 0.9; +} + +.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) --- */ @@ -191,4 +198,73 @@ body { text-decoration: none; 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; } \ No newline at end of file diff --git a/css/estilos20260117.css b/css/estilos20260117.css deleted file mode 100644 index 43e9bda..0000000 --- a/css/estilos20260117.css +++ /dev/null @@ -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