/* =========================================================
   VARIABLES GLOBALES
   ========================================================= */
:root {
    --color-gris-suave: #f7f7f7;
    --color-gris-texto: #555;
    --color-gris-borde: #ddd;
    --color-sombra-suave: 0 4px 12px rgba(0,0,0,0.12);
    --color-sombra-media: 0 6px 18px rgba(0,0,0,0.25);
    --color-sombra-fuerte: 0 10px 24px rgba(0,0,0,0.28);

    --radius-base: 12px;
    --radius-grande: 18px;

    --espacio-s: 8px;
    --espacio-m: 16px;
    --espacio-l: 24px;
    --espacio-xl: 32px;
    
        /* Colores de tarjeta */
    --card-bg: #ffffff;          /* fondo del card */
    --card-text-color: #555;     /* texto general */
    --card-title-color: var(--color-liturgico);
    --card-date-color: #555;
    
    /* Espaciado interno */
    --card-gap: 18px;
    --card-gap-large: 0.75em;
    --card-paragraph-gap: 0.5em;

    /* Espaciado externo entre tarjetas */
    --card-outer-gap: 10px;
}